body {
    background-attachment: fixed;
    background-position: center -200px;
    background: url(../images/layout/default-bg-lq.jpg) no-repeat center top  #cdcdcd;font-family: 'Open Sans', sans-serif;font-size:13px;margin-bottom: 30px;color:#585858;
}
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}
.main-container{background: none;}
.landing-container{
	position: relative;
}
#loading{
	position: absolute;
	top:220px;
	left:50%;
	font-size: 20px;
	margin-left:-60px;
	text-align: center;
}

#enter-site{display:none;top:900px;font-size: 25px;color:#fff;position: absolute;font-weight: 600;left:50%;margin-top: -60px;margin-left:-70px;text-shadow:3px 2px 3px #000;}
#enter-site:hover{text-decoration: none;color:#eee;}

#loading .percen{display: block;font-size: 40px;}

.group-football-container{width: 100%;height: 894px;}
#group-football{opacity: 1;transform:scale(1);display: none;}
.obj a{display: block;}


.obj-left-top{width:230px;height:130px;position: absolute;top:200px;left:50px;color:#fff;perspective: 300px;-ms-perspective: 300px;-webkit-perspective: 300px;transform-style: preserve-3d; }
.obj-left-top .object{width:230px;height:130px;position: relative;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;transform-style: preserve-3d;transition: 0.3s;-webkit-transition: 0.3s;transform:rotateX(8deg) rotateY(25deg) rotateZ(13deg); -ms-transform:rotateX(8deg) rotateY(25deg) rotateZ(13deg); -webkit-transform:rotateX(8deg) rotateY(25deg) rotateZ(13deg); }
.obj-left-top .object img{width:230px;height:130px;border-radius: 5px;}

.obj-left-center{width:240px;height:135px;position: absolute;top:372px;left:25px;color:#fff;perspective: 300px;-ms-perspective: 300px;-webkit-perspective: 300px;transform-style: preserve-3d;}
.obj-left-center .object{width:240px;height:135px;position: relative;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;transform-style: preserve-3d;transition: 0.3s;-webkit-transition: 0.3s;transform:rotateX(15deg) rotateY(16deg) rotateZ(0deg); -ms-transform:rotateX(15deg) rotateY(16deg) rotateZ(0deg); -webkit-transform:rotateX(15deg) rotateY(16deg) rotateZ(0deg); }
.obj-left-center .object img{width:240px;height:135px;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;}

.obj-left-bottom{width:260px;height:140px;position: absolute;top:555px;left:46px;color:#fff;perspective: 300px;-ms-perspective: 300px;-webkit-perspective: 300px;transform-style: preserve-3d;}
.obj-left-bottom .object{width:260px;height:140px;position: relative;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;transform-style: preserve-3d;transition: 0.3s;-webkit-transition: 0.3s;transform:rotateX(12deg) rotateY(24deg) rotateZ(-13deg); -ms-transform:rotateX(12deg) rotateY(24deg) rotateZ(-13deg); -webkit-transform:rotateX(12deg) rotateY(24deg) rotateZ(-13deg); }
.obj-left-bottom .object img{ width:260px;height:140px;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;}

.obj-right-top{width:230px;height:130px;position: absolute;top:200px;right:50px;color:#fff;perspective: 300px;-ms-perspective: 300px;-webkit-perspective: 300px;transform-style: preserve-3d;}
.obj-right-top .object{width:230px;height:130px;position: relative;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;transform-style: preserve-3d;transition: 0.3s;-webkit-transition: 0.3s;transform:rotateX(8deg) rotateY(-25deg) rotateZ(-13deg); -ms-transform:rotateX(8deg) rotateY(-5deg) rotateZ(-13deg); -webkit-transform:rotateX(8deg) rotateY(-25deg) rotateZ(-13deg); }
.obj-right-top .object img{width:230px;height:130px;border-radius: 5px;}

.obj-right-center{width:240px;height:135px;position: absolute;top:372px;right:25px;color:#fff;perspective: 300px;-ms-perspective: 300px;-webkit-perspective: 300px;transform-style: preserve-3d; ;  	 }
.obj-right-center .object{width:240px;height:135px;position: relative;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;transform-style: preserve-3d;transition: 0.3s;-webkit-transition: 0.3s;transform:rotateX(15deg) rotateY(-16deg) rotateZ(0deg); -ms-transform:rotateX(15deg) rotateY(-16deg) rotateZ(0deg); -webkit-transform:rotateX(15deg) rotateY(-16deg) rotateZ(0deg); }
.obj-right-center .object img{width:240px;height:135px;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;}

.obj-right-bottom{width:260px;height:140px;position: absolute;top:555px;right:46px;color:#fff;perspective: 300px;-ms-perspective: 300px;-webkit-perspective: 300px;transform-style: preserve-3d;}
.obj-right-bottom .object{width:260px;height:140px;position: relative;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;transform-style: preserve-3d;transition: 0.3s;-webkit-transition: 0.3s;transform:rotateX(12deg) rotateY(-24deg) rotateZ(13deg); -ms-transform:rotateX(12deg) rotateY(-24deg) rotateZ(13deg); -webkit-transform:rotateX(12deg) rotateY(-24deg) rotateZ(13deg); }
.obj-right-bottom .object img{ width:260px;height:140px;box-shadow: 0 0 5px #555;background: none;border-radius: 5px;}


.obj-left-top .object:hover,.obj-left-center .object:hover,.obj-left-bottom .object:hover 
,.obj-right-top .object:hover,.obj-right-center .object:hover,.obj-right-bottom .object:hover
{
	transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);  -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
	box-shadow: 0 0 20px #3b953f;
}


.animate_group_football{ -webkit-animation: group_football 0.5s; -moz-animation: group_football 0.5s; animation: group_football 0.5s; }

.animate_left_top{ -webkit-animation: left_top 1s; -moz-animation: left_top 1s; animation: left_top 1s; }
.animate_left_center{ -webkit-animation: left_center 1s; -moz-animation: left_center 1s; animation: left_center 1s; }
.animate_left_bottom{ -webkit-animation: left_bottom 1s; -moz-animation: left_bottom 1s; animation: left_bottom 1s; }

.animate_right_top{ -webkit-animation: right_top 1s; -moz-animation: right_top 1s; animation: right_top 1s; }
.animate_right_center{ -webkit-animation: right_center 1s; -moz-animation: right_center 1s; animation: right_center 1s; }
.animate_right_bottom{ -webkit-animation: right_bottom 1s; -moz-animation: right_bottom 1s; animation: right_bottom 1s; }

.obj{display: none;}

@keyframes group_football {
  	0%   { transform:scale(2);-webkit-transform:scale(2);opacity: 0;}
	100% { transform:scale(1);-webkit-transform:scale(1);opacity: 1;}
}
@-webkit-keyframes group_football {
  	0%   { transform:scale(2);-webkit-transform:scale(2);opacity: 0;}
	100% { transform:scale(1);-webkit-transform:scale(1);opacity: 1;}
}



@keyframes left_top {
  	0%   { left:-400px; transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -ms-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -webkit-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); opacity:0;top:-300px;}
	100% { left:50px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:200px;}
}
@-webkit-keyframes left_top {
  	0%   { left:-400px;transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -ms-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -webkit-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); opacity:0;top:-300px;}
	100% { left:50px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:200px;}
}


@keyframes right_top {
  	0%   { right:-400px;transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -ms-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -webkit-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); opacity:0;top:-300px;}
	100% { right:50px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:200px;}
}
@-webkit-keyframes right_top {
  	0%   { right:-400px;transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -ms-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -webkit-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); opacity:0;top:-300px;}
	100% { right:50px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:200px;}
}


@keyframes left_center {
  0%   { left:-400px;transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -ms-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -webkit-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); opacity:0;top:-300px;}
  100% { left:25px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:372px;}
}
@-webkit-keyframes left_center {
  0%   { left:-400px;transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -ms-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -webkit-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); opacity:0;top:-300px;}
  100% { left:25px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:372px;}
}


@keyframes right_center {
  0%   { right:-400px;transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -ms-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -webkit-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); opacity:0;top:-300px;}
  100% { right:25px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:372px;}
}
@-webkit-keyframes right_center {
  0%   { right:-400px;transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -ms-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -webkit-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); opacity:0;top:-300px;}
  100% { right:25px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1;top:372px;}
}


@keyframes left_bottom {
  0%   { left:-200px;transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -ms-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -webkit-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); opacity:0;top:-300px;}
  100% { left:46px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity:1;top:555px;}
}
@-webkit-keyframes left_bottom {
  0%   { left:-200px;transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -ms-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); -webkit-transform:rotateX(360deg) rotateY(-25deg) rotateZ(-13deg); opacity:0;top:-300px;}
  100% { left:46px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity:1;top:555px;}
}

@keyframes right_bottom {
  0%   { right:-200px;transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -ms-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -webkit-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); opacity:0;top:-300px;}
  100% { right:46px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity:1;top:555px;}
}
@-webkit-keyframes right_bottom {
  0%   { right:-200px;transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -ms-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); -webkit-transform:rotateX(360deg) rotateY(25deg) rotateZ(13deg); opacity:0;top:-300px;}
  100% { right:46px;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);opacity:1;top:555px;}
}


#section-package{
    background: url(../images/landing/bg-home-package.jpg) center top;
    height: 565px;

}

.row-package{
  max-width: 680px;
  margin:100px auto;
}


#sponsored{
  background: url(../images/landing/sponsored.jpg) no-repeat center top;
  height: 160px;
}

#what-is-brazia-soccer{
  border-top:solid 7px #18860c;
  border-bottom:solid 7px #18860c;
  min-height: 300px;
  background:  url(../images/landing/bg-what-brazia-soccer.png) repeat-y center top #fff;
  padding:50px 0 100px;
}
#what-is-brazia-soccer h2{
  text-align: center;
  font-style: italic;
  margin-bottom: 30px;
}
#what-is-brazia-soccer p{
  font-style: italic;
}

#how-it-work-title{
  background: #000;
  padding:30px 0;
  text-align: center;
  font-style: italic;
  position: relative;
}
#how-it-work-title h2{
  position: relative;
  z-index: 10;
}
#how-it-work-title .arrow{
  width: 100px;height: 100px;
  background: #000;
  position: absolute;
  bottom: -35px;
  left:50%;margin-left:-50px;
  -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.step-description{
  width: 250px;

}
.step-description .no{
  font-family: 'helvetica_neue';
  font-size: 240px;
   line-height: 240px;
  color:#000;
}
.step-description .text{
  font-size: 68px;
  font-family: 'helvetica_neue';
  color:#000;
  line-height: 63px;
  font-weight: bold;
}


#step1{
  background: url(../images/landing/bg-step1.jpg) no-repeat center top; background-attachment: fixed;background-size: cover;
  height: 655px;
}
#step1 .step-description{
  margin:90px 0 0 180px;
}


#step2{
  background: url(../images/landing/bg-step2.jpg) no-repeat center top; 
  height: 662px;
}

#step2 .no{
  color:#148818;background: -webkit-linear-gradient(#56af59, #148818); -webkit-background-clip: text;-webkit-text-fill-color: transparent;
  float: left;
  margin-top:-90px;
  margin-right: 10px;
} 
#step2 .text{
   color:#148818;
   background: -webkit-linear-gradient(#56af59, #148818); -webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

#step2 .step-description{
  width: 700px;
  margin:0 auto;
  margin-top:450px;
}


#step3{
  background: url(../images/landing/bg-step3.jpg) no-repeat center top;
   background-attachment: fixed;background-size: cover;
  height: 658px;
}
#step3 .step-description{
  width: 570px;
  margin:0 auto;
  margin-top:100px;
  text-align: center;

}
#step3 .no{color:#148818;background: -webkit-linear-gradient(#56af59, #148818); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#step3 .text{color:#148818;background: -webkit-linear-gradient(#56af59, #148818); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}

#step4{ background: url(../images/landing/bg-step4.jpg) no-repeat center top;height: 658px; overflow: hidden;position: relative;}

#step4 .man-win{
  position: absolute;
  width: 1090px;
  height: 100%;
  background: url(../images/landing/man-win.png) no-repeat center top;
  right: 10%;
}
#step4 .step-description{
  float: right;
  position: relative;
  z-index: 10;
  width: 370px;
  margin-top:220px;
  text-align: right;
  margin-right: 100px;
}
#step4 .no{color:#148818;background: -webkit-linear-gradient(#56af59, #148818); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#step4 .text{color:#fff;font-weight: 200;line-height: 50px;}
#step4 .text span{font-size: 41px;}
#step4 .graph{width: 588px;height: 432px;position: absolute;bottom: 0;background:url(../images/landing/graph.png) no-repeat center top;z-index: 10}

#step5{
  background: url(../images/landing/bg-step5.jpg) no-repeat center top; background-attachment: fixed;background-size: cover;
  height: 658px;
}
#step5 .no{
  color:#fff;
  float: left;
  margin-top:-30px;
  margin-right: 10px;
} 
#step5 .text{
   color:#fff;
   text-transform: uppercase;
}
#step5 .step-description{
  width: 880px;
  margin:0 auto;
  margin-top:350px;
  text-shadow:0 0 4px #333;
}

#step6{
  background: url(../images/landing/bg-step6.jpg) no-repeat center top; background-attachment: fixed;background-size: cover;
  height: 658px;
}

#step6 .step-description{
  width: 480px;
  margin-left:400px;
  margin-top:150px;

}
#step6 .no{color:#148818;background: -webkit-linear-gradient(#56af59, #148818); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#step6 .text{color:#148818;background: -webkit-linear-gradient(#56af59, #148818); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}

#downloadapp{
  background: #222;
  padding:30px;
}


@media (max-width: 768px) { 
    .obj-left-top .object,.obj-left-center .object,.obj-left-bottom .object,.obj-right-top .object,.obj-right-center .object,.obj-right-bottom .object
    {transform-style: preserve-3d;transition: 0.3s;-webkit-transition: 0.3s;transform:rotateX(0) rotateY(0) rotateZ(0); -ms-transform:rotateX(0) rotateY(0) rotateZ(0); -webkit-transform:rotateX(0) rotateY(0) rotateZ(0); }
    .obj {position: static;width: 50%;float:left;padding:5px 10px;margin-bottom: 10px;height: auto;}
    .group-football-container{height: auto;}
    .obj .object{width: 100%; height: auto; }
    .obj .object img{width: 100%; height: auto; }

    #sponsored{height: 70px; background-size: auto 100%; }
    #step1 .step-description,
    #step2 .step-description,
    #step5 .step-description,
    #step6 .step-description
    {margin-left:10%; }
    #step1,#step2,#step3,#step4,#step5,#step6{
      background-attachment: scroll;
    }

}
@media (max-width: 414px) { 
    
   
    #section-package{height: auto;padding:0 0 10%;}
    #sponsored{height: 50px; background-size: auto 100%; }
    .step-description .no{font-size: 80px;line-height: 80px;}
    .step-description .text{font-size: 25px;line-height: 25px;}

    #step2 .step-description{margin-top:70%;width: auto; }
    #step2 .no{float: none}
    #step3 .step-description{margin-top: 20%;}
    #step4 .graph{width: 150px; background-size: 100% auto; height: 37%; }
    #step4 .man-win{width: 100%;height: 100%;background-size: 100% auto;right:0;top:10%;}
    #step4 .step-description{ margin-top:30%;margin-right: 10%;width: auto;}
    #step4 .text span{font-size: 23px; }
    #step4 .text{line-height: 20px;}
    #step5 .step-description{margin-top:40%;width: auto;}
    #step5 .step-description .no{float: none;}
    #step6 .step-description{margin-left:40%;margin-top:10%;float: right;width: 55%}
    #step6{background-position: 40% top;}
    #step1,#step2,#step3,#step4,#step5,#step6{
      height: 300px;
    }
    
   
}