#cubeTransition { position: relative; width: 100%; height: 100%; -webkit-perspective: 1200px; perspective: 1200px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

#cubeTransition div { min-height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; font-size: 5em; color: #fff; visibility: hidden; transition:opacity 5ms; }

#cubeTransition h2 { position: relative; top: 330px; margin: 0; font-size: 30px; color:#fff; line-height: 50px; text-align: center; text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 ); }

#cubeTransition h2 span.normal-weight{font-size: 30px; font-weight:600; text-align:center}

.page1 { background: transparent url("../images/home/slide-1.html") no-repeat scroll top center; background-size:cover !important; }

.page2 { background: transparent url("../images/home/slide-2.html") no-repeat scroll top center; background-size:cover !important; }

.page3 { background: transparent url("../images/home/slide-3.html") no-repeat scroll top center; background-size:cover !important; }

.page4 { background: green; }

.visible{ visibility: visible !important; }

.rotateCubeTopOut { transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; animation: rotateCubeTopOut .6s both ease-in; -webkit-animation: rotateCubeTopOut .6s both ease-in; }

.rotateCubeTopIn { transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; animation: rotateCubeTopIn .6s both ease-in; -webkit-animation: rotateCubeTopIn .6s both ease-in; }

.rotateCubeBottomOut { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: rotateCubeBottomOut .6s both ease-in; animation: rotateCubeBottomOut .6s both ease-in; }

.rotateCubeBottomIn { transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -webkit-animation: rotateCubeBottomIn .6s both ease-in; animation: rotateCubeBottomIn .6s both ease-in; }

@keyframes rotateCubeTopOut {
50% {
animation-timing-function: ease-out;
transform: translateY(-50%) translateZ(50px) rotateX(30deg);
}

100% {
opacity: .3;
transform: translateY(-100%) rotateX(90deg);	
}

}

@-webkit-keyframes rotateCubeTopOut {
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(-50%) translateZ(50px) rotateX(30deg);
}

100% {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(90deg);	
}

}

@keyframes rotateCubeTopIn {
0% {
opacity: .3;
transform: translateY(100%) rotateX(-90deg);
}

50% {
animation-timing-function: ease-out;
transform: translateY(50%) translateZ(50px) rotateX(-30deg);
}
}

@-webkit-keyframes rotateCubeTopIn {
0% {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(-90deg);
}

50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(50%) translateZ(50px) rotateX(-30deg);
}
}

@keyframes rotateCubeBottomOut {
50% {
animation-timing-function: ease-out;
transform: translateY(50%) translateZ(50px) rotateX(-30deg);
}

100% {
opacity: .3;
transform: translateY(100%) rotateX(-90deg);
}
}

@-webkit-keyframes rotateCubeBottomOut {
50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(50%) translateZ(50px) rotateX(-30deg);
}

100% {
opacity: .3;
-webkit-transform: translateY(100%) rotateX(-90deg);
}
}

@keyframes rotateCubeBottomIn {
0% {
opacity: .3;
transform: translateY(-100%) rotateX(90deg);
}

50% {
animation-timing-function: ease-out;
transform: translateY(-50%) translateZ(50px) rotateX(30deg);
}
}
@-webkit-keyframes rotateCubeBottomIn {
0% {
opacity: .3;
-webkit-transform: translateY(-100%) rotateX(90deg);
}

50% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translateY(-50%) translateZ(50px) rotateX(30deg);
}
}

#bullets { position: absolute; width: 100%; bottom: 20px; padding: 0; margin: 0; text-align: center; }

#bullets li { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin: 0 3px; background: rgba( 255, 255, 255, 0.5 ); box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 ); cursor: pointer; -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); border: 3px solid #fff;  float: none; }
 
#bullets li:hover { background: rgba( 255, 255, 255, 0.8 ); }

#bullets li.active { cursor: default; background: #fff; }

.credit { position: absolute; bottom: 24px; right: 24px; margin: 0; z-index: 1; font-size: 0.9em; }

.credit a { color: #fff; font-weight: bold; text-decoration: none; }

#cubeTransition .page2 .banner-text-new {position:relative; max-width:1180px; margin: 0px auto; top:300px; right: -40px;}
#cubeTransition .banner-text-new {position:relative; max-width:1180px; margin: 0px auto; top:220px;}
#cubeTransition .banner-text-new h2 {top:150px; line-height: 70px; max-width: 600px; float: right; width: auto; text-align: left; color: #000;}
#cubeTransition .banner-text-new h2 span.normal-weight {display: block;}

#cubeTransition .banner-text-new-2 {position:relative; max-width:1180px; visibility: visible;}
#cubeTransition .banner-text-new-2 h2 {top:150px; line-height: 70px; max-width: 600px; float: right; width: auto; text-align: left; color: #000;}
#cubeTransition .banner-text-new-2  span.normal-weight {display: block;}
.banner-text-right {line-height: 50px; max-width: 670px; float: right; width: auto; text-align: left; color: #484040;}
.page3 .banner-text-right {color: #fff; padding: 0 100px 0 0;}
#cubeTransition .banner-text-new span.normal-weight {display: block;}

.banner-content{ min-height:540px; display:block !important; }

@media screen and (min-width: 320px) and (max-width: 767px) {
#cubeTransition h2 {font-size: 20px; top: 180px; line-height: 40px;	}
.bullets li { margin: 0 6px; }

.credit { bottom: initial; top: 10px; right: 10px; }

#cubeTransition h2 span.normal-weight {line-height: 20px; font-size: 15px;}
.banner-text-right {width: 100%; font-size: 15px; text-align: center; max-width: 100%; line-height: 40px;}
#cubeTransition .banner-text-new {top: 0px;}
.page3 .banner-text-right{padding-right:0}
.top-strip-text a{font-size:13px}
/* #cubeTransition .page2 .banner-text-new { right: 0px;  width: 100%; top:0} */
#cubeTransition .page2 .banner-text-new { right: -50px; width: 215px; top: 45px;} 

}

@media screen and (min-width: 768px) and (max-width: 1023px) {
#cubeTransition h2 {top: 300px; font-size: 50px;}
#cubeTransition .banner-text-new {top: 250px; font-size: 20px;}
#cubeTransition h2 span.normal-weight {line-height: 30px; font-size: 20px;}
.page3 .banner-text-right { padding: 0 30px 0 0; } 
.top-strip-text a {font-size: 13px;}
footer .service_footer{width: 25%}
footer .logo_footer{width: 25%}
footer .logo_footer .address span i{padding-right:2px}
}




@media screen and (max-width: 767px) {
#cubeTransition h2 { font-size: 20px; }
.banner-content { min-height: 170px; display: block !important; }


}