/**==========BANNER==========**/ 
.slider_container{ width:1170px; margin:0 auto; position:relative; height:530px;}
.cloud_outer{ position:absolute; top:0; bottom:0; left:0; right:0;}
.banner_mobile{  display:none;border-bottom:10px solid  #aae81a;}

.index_slider{  background:url(../images/sky_bg.png) no-repeat fixed 50% 0 / cover ; overflow:hidden; border-bottom:15px solid  #aae81a; position:relative; }
.index_slider h2{ font-size:63px; color:#006eae; font-family: 'Roboto', sans-serif; font-weight:100; text-align:center; margin-top:120px;z-index:15; position:relative;}

/* foreground (ballons/landscape) */
#house_bg_box_parallax {z-index:10;	position: absolute;	left: 0;top: 0;	width: 100%;bottom:0;}
#house_bg_parallax {position: absolute;bottom: 0;left: 0; z-index:10;}



/*Time to finalise the cloud shape*/
.cloud{ position:absolute; -webkit-transition:all 10s ease-in; -moz-transition:all 10s ease-in; -ms-transition:all 10s ease-in; -o-transition:all 10s ease-in; transition:all 10s ease-in;}
.cloud1{background:url(../images/cloud_op1.png) no-repeat; width:236px; height:114px; }
.cloud2{background:url(../images/cloud_op2.png) no-repeat; width:106px; height:51px;}
.cloud3{background:url(../images/cloud_op3.png) no-repeat; width:98px; height:48px;}

.cloud_sm1{ background:url(../images/cloud_sm1.png) no-repeat; width:111px; height:52px; left:-95px; top:20%; }
.cloud_sm2{ background:url(../images/cloud_sm2.png) no-repeat; width:92px; height:44px; left:30px; top:5%;}
/*.cloud_sm3{ background:url(../images/cloud_sm3.png) no-repeat; width:54px; height:26px;left:230px; top:45%;}
.cloud_sm4{ background:url(../images/cloud_sm4.png) no-repeat; width:111px; height:52px;left:350px; top:30%;}
.cloud_sm5{ background:url(../images/cloud_sm5.png) no-repeat; width:72px; height:33px;left:95%; top:-50px;}*/
.cloud_sm6{ background:url(../images/cloud_sm6.png) no-repeat; width:138px; height:65px;right:85px; top:0%;}
.move_sm{ z-index:11;}	
.cloud_sm1{animation:moveCloud 50s infinite linear; -moz-animation:moveCloud 50s infinite linear; -webkit-animation:moveCloud 50s infinite linear; -o-animation:moveCloud 50s infinite linear;}	
.cloud_sm2{animation:moveCloud 100s infinite linear; -moz-animation:moveCloud 100s infinite linear; -webkit-animation:moveCloud 100s infinite linear; -o-animation:moveCloud 100s infinite linear;}	
/*.cloud_sm5{animation:moveCloud5 70s infinite linear; -moz-animation:moveCloud5 70s infinite linear; -webkit-animation:moveCloud5 70s infinite linear; -o-animation:moveCloud5 70s infinite linear;}	*/
.cloud_sm6{animation:upCloud 2s infinite linear; -moz-animation:upCloud 2s infinite linear; -webkit-animation:upCloud 2s infinite linear; -o-animation:upCloud 2s infinite linear;}

@keyframes moveCloud {
 0%,100% {opacity:0.2;} 1%,99%{opacity:1;} 0%{ margin-left:-50px;}  100% {margin-left:1920px; }}

@-moz-keyframes moveCloud { 
 0%,100% {opacity:0.2;} 1%,99%{opacity:1;} 0%{ margin-left:-50px;}  100% {margin-left:1920px; }}

@-webkit-keyframes moveCloud {
0%,100% {opacity:0.2;} 1%,99%{opacity:1;} 0%{ margin-left:-50px;}  100% {margin-left:1920px; }}

@-o-keyframes moveCloud {
 0%,100% {opacity:0.2;} 1%,99%{opacity:1;} 0%{ margin-left:-50px;}  100% {margin-left:1920px; }}

@-ms-keyframes moveCloud {
 0%,100% {opacity:0.2;} 1%,99%{opacity:1;} 0%{ margin-left:-50px;}  100% {margin-left:1920px; }}

/****/
/*@keyframes upCloud {
 0% {margin-top: 6px;} 25% {margin-top: 5px;} 33%{margin-top: 3px;} 50% {margin-top: 0px;} 65% {margin-top: 3px;} 75% {margin-top: 5px;} 100% {margin-top:6px;}
}

@-moz-keyframes upCloud { 
  0% {margin-top: 6px;} 25% {margin-top: 5px;} 33%{margin-top: 3px;} 50% {margin-top: 0px;} 65% {margin-top: 3px;} 75% {margin-top: 5px;} 100% {margin-top:6px;}
}

@-webkit-keyframes upCloud {
 0% {margin-top: 6px;} 25% {margin-top: 5px;} 33%{margin-top: 3px;} 50% {margin-top: 0px;} 65% {margin-top: 3px;} 75% {margin-top: 5px;} 100% {margin-top:6px;}
}

@-o-keyframes upCloud {
 0% {margin-top: 6px;} 25% {margin-top: 5px;} 33%{margin-top: 3px;} 50% {margin-top: 0px;} 65% {margin-top: 3px;} 75% {margin-top: 5px;} 100% {margin-top:6px;}
}

@-ms-keyframes upCloud {
 0% {margin-top: 6px;} 25% {margin-top: 5px;} 33%{margin-top: 3px;} 50% {margin-top: 0px;} 65% {margin-top: 3px;} 75% {margin-top: 5px;} 100% {margin-top:6px;}
}
*/


/**FADE EFFECT**/	

/**===LIGHT CLOUD===**/
.fade_in1{left:0; top:40px; animation:fadein1 170s infinite linear; -moz-animation: fadein1 170s infinite linear; -webkit-animation: fadein1 170s infinite linear; -o-animation: fadein1 170s infinite linear;}
.fade_in3{left:94%; top:37%; animation:fadein3 110s infinite; -moz-animation: fadein3 110s infinite; -webkit-animation: fadein3 110s infinite; -o-animation: fadein3 110s infinite;}
.fade_in2{left:50%; top:5px; animation:fadein2 150s linear infinite; -webkit-animation: fadein2 150s linear infinite; -moz-animation:fadein2 150s linear infinite;-o-animation:fadein2 150s linear infinite;}

/**fadein1**/
@keyframes fadein1 {  0% {margin-left: -150px;}  100% {margin-left: 1600px;}}
@-moz-keyframes fadein1 { 0% {margin-left: -150px;}  100% {margin-left: 1600px;}}
@-webkit-keyframes fadein1 { 0% {margin-left: -150px;}  100% {margin-left: 1600px;}}
@-o-keyframes fadein1 { 0% {margin-left: -150px;}  100% {margin-left: 1600px;}}
@-ms-keyframes fadein1 {0% {margin-left: -150px;}  100% {margin-left: 1600px;}}


/**fadein2**/
@keyframes fadein2{0% {margin-left: 0px;} 100% {margin-left: 600px;}}
@-webkit-keyframes fadein2 {	0% {margin-left: 0;} 100% {margin-left: 600px;}}
@-moz-keyframes fadein2 {0% {margin-left: 0;} 100% {margin-left: 600px;}}
@-o-keyframes fadein2 {	0% {margin-left: 0;}  100% {margin-left: 600px;}}
@-ms-keyframes fadein2 {0% {margin-left: 0;}  100% {margin-left: 600px;}}


/**fadein3**/
@keyframes fadein3{ 0% {margin-left: 0px;} 100% {margin-left: 200px;}}
@-moz-keyframes fadein3 { 0% {margin-left:0px;} 100% {margin-left: 200px;}}
@-webkit-keyframes fadein3 { 0% {margin-left: 0px;}  100% {margin-left: 200px;}}
@-o-keyframes fadein3 {  0% {margin-left: 0px;}  100% {margin-left: 200px;}}
@-ms-keyframes fadein3 {  0% {margin-left: 0px;}  100% {margin-left: 200px;}}


/**DROP**/
.drop{ background:url(../images/drop.png) no-repeat; width:14px; height:19px; position:absolute; z-index:-1;}

.drop1{left:30px; top:45px; animation:dropFade 1.5s infinite linear; -moz-animation:dropFade 1.5s infinite linear; -webkit-animation:dropFade 1.5s infinite linear; -o-animation:dropFade 1.5s infinite linear;}
.drop4{left:15px; top:45px; animation:dropFade 2s 3s infinite linear; -moz-animation:dropFade 2s 3s infinite linear; -webkit-animation:dropFade 2s 3s infinite linear; -o-animation:dropFade 2s 3s infinite linear;}
.drop8{left:10px; top:45px; animation:dropFade 3s 4s infinite linear;-moz-animation:dropFade 3s 4s infinite linear; -webkit-animation:dropFade 3s 4s infinite linear; -o-animation:dropFade 3s 4s infinite linear;}

.drop6{left:75px;top:45px;animation:dropFade1 1.5s  infinite linear; -moz-animation:dropFade1 1.5s infinite linear; -webkit-animation:dropFade1 1.5s infinite linear;-o-animation:dropFade1 1.5s infinite linear;}
.drop2{left:55px;top:45px; animation:dropFade1 2s 3s infinite linear; -moz-animation:dropFade1 2s 3s infinite linear;-webkit-animation:dropFade1 2s 3s infinite linear; -o-animation:dropFade1 2s 3s infinite linear;}
.drop9{ left:45px;top:45px; animation:dropFade1 3s 4s infinite linear; -moz-animation:dropFade1 3s 4s infinite linear;-webkit-animation:dropFade1 3s 4s infinite linear; -o-animation:dropFade1 3s 4s infinite linear;}

.drop7{left:100px; top:45px;animation:dropFade2 1.5s infinite linear;-moz-animation:dropFade2 1.5s infinite linear; -webkit-animation:dropFade2 1.5s infinite linear;-o-animation:dropFade2 1.5s infinite linear;}
.drop5{left:95px;top:45px; animation:dropFade2 2s 3s infinite linear; -moz-animation:dropFade2 2s 3s infinite linear; -webkit-animation:dropFade2 2s 3s infinite linear; -o-animation:dropFade2 2s 3s infinite linear;}
.drop3{left:80px; top:45px; animation:dropFade2 3s 4s infinite linear;-moz-animation:dropFade2 3s 4s infinite linear; -webkit-animation:dropFade2 3s 4s infinite linear; -o-animation:dropFade2 3s 4s infinite linear;}


@keyframes dropFade {from { top:30px;}to {top:160px;}}
@-moz-keyframes dropFade {from { top:30px;}to { top:160px;}}
@-webkit-keyframes dropFade {from { top:30px;}to {top:160px;}}
@-o-keyframes dropFade {from { top:30px;}to { top:160px;}}


@keyframes dropFade1 {from { top:50px;}to {top:175px;}}
@-moz-keyframes dropFade1 {from { top:50px;}to { top:175px;}}
@-webkit-keyframes dropFade1 {from { top:50px;}to {top:175px;}}
@-o-keyframes dropFade1 {from { top:50px;}to { top:175px;}}


@keyframes dropFade2 {from { top:60px;}to {top:280px;}}
@-moz-keyframes dropFade2 {from { top:60px;}to { top:280px;}}
@-webkit-keyframes dropFade2 {from { top:60px;}to {top:280px;}}
@-o-keyframes dropFade2 {from { top:60px;}to { top:280px;}}





/**SUN**/
.sun {position: absolute;top:-53px; left:53px;}
/*@-webkit-keyframes spin {from {	-webkit-transform: rotate(360deg);}	to {-webkit-transform: rotate(0deg);}}
@-moz-keyframes spin {from {-moz-transform: rotate(360deg);}to {-moz-transform: rotate(0deg);}}		
@-ms-keyframes spin {from {	-ms-transform: rotate(360deg);}	to {-ms-transform: rotate(0deg);}}*/
		


/**FAN SPIN**/
.fan{ position: absolute; height:124px; width:120px;  background:url(../images/fan.png) no-repeat; z-index:12;}
.fan1{top:39%; left:26px; -moz-animation: bladeSpin 15s linear infinite; -webkit-animation: bladeSpin 15s  linear infinite;-o-animation: bladeSpin 15s  linear infinite;animation: bladeSpin 15s  linear infinite;}
.fan2{top:42%; left:238px; -moz-animation: bladeSpin 20s linear infinite; -webkit-animation: bladeSpin 20s linear infinite;-o-animation: bladeSpin 20s linear infinite;animation: bladeSpin 20s linear infinite;}
.fan3{top:49%; left:360px;-moz-animation: bladeSpin 15s  linear infinite; -webkit-animation: bladeSpin 15s  linear infinite;-o-animation: bladeSpin 15s  linear infinite;animation: bladeSpin 15s  linear infinite;}

@-moz-keyframes bladeSpin { 0{ -moz-transform: rotate(0deg); }   100%{ -moz-transform: rotate(1440deg);}}
@-webkit-keyframes bladeSpin {0 { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(1440deg);}} 
@-o-keyframes bladeSpin {0 { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(1440deg);}} 
@keyframes bladeSpin {0 { transform: rotate(0deg); }  100% { transform: rotate(1440deg);}}


/**RECYCLE**/
.recycle{ position:absolute; height:32px; width:42px;right:166px; top:171px; -webkit-animation:recyclespin 5s  linear  infinite; -ms-animation:recyclespin 5s linear  infinite; -0-animation:recyclespin 5s linear  infinite; -moz-animation:recyclespin 5s linear  infinite;  animation:recyclespin 5s linear  infinite; z-index:11;}
/*@-webkit-keyframes recyclespin {from {	-webkit-transform: rotate(0deg);}	to {-webkit-transform: rotate(360deg);}}
@-moz-keyframes recyclespin {from {-moz-transform: rotate(0deg);}to {-moz-transform: rotate(360deg);}}		
@-ms-keyframes recyclespin {from {	-ms-transform: rotate(0deg);}	to {-ms-transform: rotate(360deg);}}*/

/**CYCLE**/
.cycle{ position:absolute; bottom:0px; left:310px; -webkit-animation:cyclemove 2s forwards ; -ms-animation:cyclemove 2s forwards; -0-animation:cyclemove 2s forwards; -moz-animation:cyclemove 2s forwards;  animation:cyclemove 2s forwards; opacity:0; z-index:11;}
@-webkit-keyframes cyclemove {100% {left:380px;  opacity:1;}}
@-moz-keyframes cyclemove {100% {left:380px; opacity:1;}}	
@-ms-keyframes cyclemove { 100% {left:380px; opacity:1;}}
@-o-keyframes cyclemove {100% {left:380px; opacity:1;}}

/**CAR**/
.car{ position:absolute; bottom:0px; right:50px; -webkit-animation:carmove 2s forwards ; -ms-animation:carmove 2s forwards; -0-animation:carmove 2s forwards; -moz-animation:carmove 2s forwards; animation:carmove 2s forwards; opacity:0; z-index:11;}
@-webkit-keyframes carmove {100% {right:-70px;  opacity:1;}}
@-moz-keyframes carmove {100% {right:-70px; opacity:1;}}	
@-ms-keyframes carmove { 100% {right:-70px; opacity:1;}}
@-o-keyframes carmove {100% {right:-70px; opacity:1;}}
	

@media (max-width:1280px){
 @-webkit-keyframes carmove {100% {right:0px;  opacity:1;}}@-moz-keyframes carmove {100% {right:0px; opacity:1;}}	@-ms-keyframes carmove { 100% {right:0px; opacity:1;}}@-o-keyframes carmove {100% {right:0px; opacity:1;}}	
}

@media (max-width:1200px){
 .index_slider h2{ font-size:45px; margin-top:50px;}
}

@media (max-width:1199px) and  (min-width:768px){ 
 .recycle{ right:16.3%;}
 .slider_container{ width:760px; height:350px;}
 .cloud1,.cloud_sm1, .cloud_sm6{ background-size:100%;}
 .cloud1{height: 79px; width: 133px;}
 .cloud_sm1{height:50px; width: 90px;}
 .cloud_sm6{width:120px; right:0;}
 
 .car_box img, .cycle_box img, .sun_box img{width:10%;} 
 .recycle_box img{height: 20px; right: 109px;  top: 117px; width: 25px;}
 .sun {left:0; top:-30px;}
 .fan1{left:6px; top:36%;}
 .fan2{left: 144px; top:38%;}
 .fan3{ left: 222px; top:45%;} 
 
 .cycle{left:100px; -webkit-animation:cyclemove 6s forwards ; -ms-animation:cyclemove 6s forwards; -0-animation:cyclemove 6s forwards; -moz-animation:cyclemove 6s forwards;  animation:cyclemove 6s forwards;} 
 @-webkit-keyframes cyclemove{100%{left:300px;opacity:1;}}
 @-moz-keyframes cyclemove{100%{left:300px; opacity:1;}}
 @-ms-keyframes cyclemove{100%{left:300px;opacity:1;}}
 @-o-keyframes cyclemove{100%{left:300px; opacity:1;}} 
 
 .drop2,.drop3,.drop4,.drop5,.drop8,.drop9{ top:35px;}  
 
 .fan{width:100px; background-size:100%; height:104px;}
}

@media (max-width:800px)
{
 .index_slider{ z-index:0;}
}

@media (max-width:767px){
 .banner_mobile{ display:block;}	
 .index_slider{ display:none;}
}