@charset "utf-8";
/* CSS Document */
/*

Theme Name: Yellow Construction Version: 1.1
Theme URI: http://www.asifameer.com/
Author: ideartistic
Author URI: http://themeforest.net/user/ideartistic
Description: ThemeForest Corporate HTML Theme
Tags: carousel, animation, caption, title

*/


/* TABLE OF CONTENTS

/* 01. CAROUSEL MAIN CLASS :: START
		/* 1.1 Declare heights because of positioning of img element */
		/* 1.2 Caption Title Start */
		/* 1.3 Carousel Control */
/* 02. CAROUSEL ANIMATIONS :: START
		/* 2.1 Fade in fast */
		/* 2.2 Fade in Slow */
		/* 2.3 Bounce in Left */
		/* 2.4 Wobble */
		/* 2.5 Fade in */
/* 03. TESTIMONIAL CAROUSEL ANIMATIONS :: START
/* 04. RESPONSIVE CSS 320px to 479px		
/* 05. RESPONSIVE CSS  480px to 767px		
/* 06. RESPONSIVE CSS  768px to 1099px
	
	

/* ::: TABLE CONTENTS STARTS HERE ::: */
/* 01. CAROUSEL MAIN CLASS :: START
-------------------------------------------------- */

/* Carousel base class */
.carousel2 {

border-bottom: 8px solid #183c6c;
}
/* 1.1 Declare heights because of positioning of img element */
.carousel2 .item {

  max-height: 200px;

}
/* Carousel base class */
.carousel {
	    border-bottom: 8px solid #183c6c;
}
/* 1.1 Declare heights because of positioning of img element */
.carousel .item {
	max-height: 100%;
  max-height: 571px;
}



.carousel-inner > .item > img {
top: 0;
  left: 0;
  min-width: 40%;
  max-width: 100%;
  max-height: 571px;
  width: auto;
  margin-right:auto;
  margin-left:auto;
  height:auto;
}
/* 1.2 Caption Title Start */
.carousel-caption {
	z-index: 10;
	width: 100%;
	position: absolute; 
	right: 10%;
	bottom: 15%;
	top: 16%;
	left: 0%;
	z-index: 10;
	color: #fff;
	text-align: center;
}














.hero-header {
	width:50%;
	padding: 3%;
	margin:auto;
	height: auto;
	color: #000;
	z-index:999;
	position:relative;
}
.font75{font-size: 7.5em !important;}
.map01{ position: absolute;
  clip: rect(0px, 1000px, 550px, 0px); top:1%; left:20%;  z-index:1;}
    .banner01-1{background-image: url(/banner01.jpg);background-repeat:no-repeat;background-size:100% 100%;width:100%;height:571px;position:absolute;top:-94px;}
  .banner02-1{background-image: url(/banner02-01.jpg);background-repeat:no-repeat;background-size:100% 100%;width:100%;height:571px;position:absolute;top:-94px;}
      .banner03-1{ background-image:url(../imgs/banner03.jpg); background-repeat:no-repeat; background-size:100% 100%;; width:100%; height:571px; position:absolute; top:-94px;}
.hero-header .title_carousel h1 {
	font-size: 6.5em;
	font-weight: 500;
	color: #FFF;
	z-index:9999;
	position:relative;
}
.hero-header .title_carousel h2 {
	font-size: 3.5em;
	font-weight: 600;
	margin-top: -15px;

	color: #FFF;
	z-index:9999;
	position:relative;
}
.hero-header .title_carousel h3 {
	font-size: 3.5em;
	font-weight: 300;
	margin-top: -15px;
	color: #FFF;
}
.hero-header .title_carousel p {
	font-size: 1em;
	font-weight: 300;
	margin-top: -15px;
}
.list-inline{
padding-left: 0;
margin-left: -5px;
margin-top:-35px;
list-style: none;
text-align: center;}
.list-inline li { width:100px; cursor:pointer; }
.list-inline img {border:1px solid #999;}
.list-inline .selected { height:auto; display:block; border:0px solid #333;     opacity: 0.4;
   transition: opacity .50s ease-in-out;
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;}
/* 1.3 Carousel Control */
.carousel-control {
	top: 40%;
	width: 1.5em;
	height: 1.5em;
	background: transparent;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
	position: static;
	display: block;
	width: auto;
}
.carousel-control .glyphicon-chevron-left:before {
	margin-left: 0;
	content: " ";
	display: block;
	background-image: url(../../images/item_scroller/prev.png) !important;
	background-repeat: no-repeat;
	width: 139px;
	height: 199px;
}
.carousel-control .glyphicon-chevron-right:before {
	content: " ";
	display: block;
	background-image: url(../../images/item_scroller/next.png) !important;
	background-repeat: no-repeat;
	width: 139px;
	height: 199px;
}
/* CAROUSEL MAIN CLASS :: End
-------------------------------------------------- */


/* 02. CAROUSEL ANIMATIONS :: START
-------------------------------------------------- */
/* 2.1 Fade in fast */
.element-animation {
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode: forwards; /*when the spec is finished*/
	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode: forwards; /*FF 5+*/
	-o-animation: animationFrames ease 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode: forwards; /*Not implemented yet*/
	-ms-animation: animationFrames ease 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode: forwards; /*IE 10+*/

}
 @keyframes animationFrames {
 0% {
 opacity:0;
 transform:  translate(0px, -185px);
}
 100% {
 opacity:1;
 transform:  translate(0px, 0px);
}
}
 @-moz-keyframes animationFrames {
 0% {
 opacity:0;
 -moz-transform:  translate(0px, -185px);
}
 100% {
 opacity:1;
 -moz-transform:  translate(0px, 0px);
}
}
 @-webkit-keyframes animationFrames {
 0% {
 opacity:0;
 -webkit-transform:  translate(0px, -185px);
}
 100% {
 opacity:1;
 -webkit-transform:  translate(0px, 0px);
}
}
 @-o-keyframes animationFrames {
 0% {
 opacity:0;
 -o-transform:  translate(0px, -185px);
}
 100% {
 opacity:1;
 -o-transform:  translate(0px, 0px);
}
}
/* 2.2 Fade in Slow */
.text-animation {
	animation: animationFrames ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode: forwards; /*when the spec is finished*/
	-webkit-animation: animationFrames ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
	-moz-animation: animationFrames ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode: forwards; /*FF 5+*/
	-o-animation: animationFrames ease 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode: forwards; /*Not implemented yet*/
	-ms-animation: animationFrames ease 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode: forwards; /*IE 10+*/
}
 @keyframes animationFrames {
 0% {
 opacity:0;
 transform:  translate(0px, -385px);
}
 100% {
 opacity:1;
 transform:  translate(0px, 0px);
}
}
 @-moz-keyframes animationFrames {
 0% {
 opacity:0;
 -moz-transform:  translate(0px, -385px);
}
 100% {
 opacity:1;
 -moz-transform:  translate(0px, 0px);
}
}
 @-webkit-keyframes animationFrames {
 0% {
 opacity:0;
 -webkit-transform:  translate(0px, -385px);
}
 100% {
 opacity:1;
 -webkit-transform:  translate(0px, 0px);
}
}
 @-o-keyframes animationFrames {
 0% {
 opacity:0;
 -o-transform:  translate(0px, -385px);
}
 100% {
 opacity:1;
 -o-transform:  translate(0px, 0px);
}
}



/* 2.2 Fade in Slow */
.zoom-in-01 {
 -webkit-animation: mymove_first 1s 1s  ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}


.ani-readmore {
 -webkit-animation: mymove_first 1s 4s  ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}

 @keyframes mymove_first {
 0% {
 opacity:0;
 transform:scale(1.9);
}
 100% {
 opacity:1;
 transform:scale(1);
}
 }


.zoom-in-02 {
 -webkit-animation:
          mymove_first 1s 2s  ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes mymove_first {
 0% {
 opacity:0;
 transform:scale(1.9);
}
 100% {
 opacity:1;
 transform:scale(1);
}
 }
 
 
 
.zoom-in-03 {
 -webkit-animation:
          mymove_first 1s 3s  ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes mymove_first {
 0% {
 opacity:0;
 transform:scale(1.9);
}
 100% {
 opacity:1;
 transform:scale(1);
}
 }
 
 
  
 
.zoom-in-04 {
 -webkit-animation:
          mymove_first 1s 1s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes mymove_first {
 0% {
 opacity:1;
 transform: translate(0px, 0px);
}
 100% {
 opacity:1;
 transform: translate(0px, 0px);
}
 }
 
 
 
 
 
 
 
 

 
 

 
 .text-appear-01 {
 -webkit-animation:
          text01 0.5s 0.5s  ease-in-out;


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes text01 {
 0% {
 opacity:0;
 transform: translate(100px, 0px);
}
 100% {
 opacity:1;
 transform: translate(0px, 0px);
}
 }
 
  .text-appear-02 {
 -webkit-animation:
          text02 0.5s 1s  ease-in-out;


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes text02 {
 0% {
 opacity:0;
 transform: translate(100px, 0px);
}
 100% {
 opacity:1;
 transform: translate(0px, 0px);
}
 }
 
 
   .text-appear-03 {
 -webkit-animation:
          text03 0.5s 1.5s  ease-in-out;


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes text03 {
 0% {
 opacity:0;
 transform: translate(100px, 0px);
}
 100% {
 opacity:1;
 transform: translate(0px, 0px);
}
 }
 
 
 
/* 2.2 Fade in Slow */
.text-animation-02 {
 -webkit-animation:
          mymove_first 1s 1s  ease-in-out,
          mymove_second 1s 5s  ease-in-out,
		  mymove_third 1s 10s  ease-in-out;/


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes mymove_first {
 0% {
 opacity:0;
 transform:scale(1.9);
}
 100% {
 opacity:1;
 transform:scale(1);
}
 }
 @keyframes mymove_second {
 0% {
 opacity:1;
 transform:scale(1.1) translate(0px, 0px);
}
 100% {
 opacity:1;
 transform:scale(0.4) translate(-160px, 120px);
}
 }
 
  @keyframes mymove_third {
 0% {
 opacity:1;
 transform:scale(0.4) translate(-160px, 120px);
}
 100% {
 opacity:1;
 transform:scale(0.4) translate(-1100px, -60px);
}
 }
 


.pic {

  float: left;
  height: 570px;
  width: 100%;
  overflow: hidden;
  position:absolute;
  background-color:#c8c8c8;
 
}


 .grow img {
 -webkit-animation:
          mapz01 1s 1s  ease-in-out,
		  mapz02 1s 5s  ease-in-out,
          mapz03 1s 10s  ease-in-out;/

 clip: rect(0px, 1000px, 550px, 0px);
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
   height: 570px;
  width: 1158px;
}
 @keyframes mapz01 {
 0% {
 opacity:0;
 transform:scale(0.2);
}
 100% {
 opacity:1;
 transform:scale(2.5) translate(0px, 60px);
}
 }
 @keyframes mapz02 {
 0% {
 opacity:1;
  transform:scale(2.5) translate(0px, 60px);
}
 100% {
 opacity:1;
 transform:scale(4) translate(0px, 80px);
}
 }
  @keyframes mapz03 {
 0% {
 opacity:1;
 transform:scale(4) translate(0px, 80px);

}
 100% {
 opacity:0;
 transform:scale(4) translate(0px, 80px);

}
 }
 


/* 2.2 Fade in Slow */
.zoom-map {
 -webkit-animation:
          map01 1s 1s  ease-in-out,
		  map02 1s 5s  ease-in-out,
          map03 1s 7s  ease-in-out;/

 clip: rect(0px, 1000px, 550px, 0px);
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes map01 {
 0% {
 opacity:0;
 transform:scale(0.2);
}
 100% {
 opacity:1;
 transform:scale(0.5);
}
 }
 @keyframes map02 {
 0% {
 opacity:1;
 transform:scale(0.5) translate(0px, 0px);
}
 100% {
 opacity:1;
 transform:scale(1.1) translate(-440px, -60px);
}
 }
  @keyframes map03 {
 0% {
 opacity:1;
transform:scale(1.1) translate(-440px, -60px);
}
 100% {
 opacity:0;
transform:scale(1.1) translate(-440px, -60px);
}
 }
 
 .banner-slide-01 {
 -webkit-animation:
          banners01 1s 0s  ease-in-out,
          banners02 1s 20s  ease-in-out;/


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes banners01 {
 0% {
 opacity:0;
 

}
 100% {
 opacity:1;

}
 }
 @keyframes banners02 {
 0% {
 opacity:1;

}
 100% {
 opacity:0;

}
 }
 
 
 
 
 
 
  .banner-slide-03 img {
 -webkit-animation:
          banners301 1s 0s  ease-in-out,
          banners302 20s 2s;/


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes banners301 {
 0% {
 opacity:0;
 transform:scale(3) translate(0px, 0px);
 
 

}
 100% {
 opacity:1;
  transform:scale(3) translate(0px, 0px);

}
 }
 @keyframes banners302 {
 0% {
 opacity:1;
  transform:scale(3) translate(0px, 0px);

}
 100% {
 opacity:1;
  transform:scale(3) translate(0px, -100px);

}
 }
 
 
 
 

.banner-map {
 -webkit-animation:
          banner01 1s 10s  ease-in-out,
          banner02 1s 28s  ease-in-out;/


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes banner01 {
 0% {
 opacity:0;

}
 100% {
 opacity:1;

}
 }
 @keyframes banner02 {
 0% {
 opacity:1;

}
 100% {
 opacity:0;

}
 }





.services01an {
 -webkit-animation:
          services01an01 1s 10s  ease-in-out,
          services01an02 1s 28s  ease-in-out;/


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes services01an01 {
 0% {
 opacity:0;
 transform: translate(-50px, 0px);
}
 100% {
 opacity:1;
 transform: translate(0px, 0px);
}
 }
 @keyframes services01an02 {
 0% {
 opacity:1;
 transform: translate(0px, 0px);
}
 100% {
 opacity:0;
 transform: translate(50px, 0px);
}
 }
 
  @keyframes service01 {
 0% {
 opacity:0;
 transform:scale(1.1);
}
 100% {
 opacity:1;
 transform:scale(1);
}
 }






.services02an {
 -webkit-animation:
          services02an01 1s 16s  ease-in-out,
          services02an02 1s 28s  ease-in-out;/


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes services02an01 {
 0% {
 opacity:0;
 transform: translate(-50px, 0px);
}
 100% {
 opacity:1;
 transform: translate(0px, 0px);
}
 }
 @keyframes services02an02 {
 0% {
 opacity:1;
 transform: translate(0px, 0px);
}
 100% {
 opacity:0;
 transform: translate(50px, 0px);
}
 }
 
  @keyframes service01 {
 0% {
 opacity:0;
 transform:scale(1.1);
}
 100% {
 opacity:1;
 transform:scale(1);
}
 }











.services03an {
 -webkit-animation:
          services03an01 1s 22s  ease-in-out,
          services03an02 1s 28s  ease-in-out;/


  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count:1 !important;
  opacity:0;
}
 @keyframes services03an01 {
 0% {
 opacity:0;
 transform: translate(-50px, 0px);
}
 100% {
 opacity:1;
 transform: translate(0px, 0px);
}
 }
 @keyframes services03an02 {
 0% {
 opacity:1;
 transform: translate(0px, 0px);
}
 100% {
 opacity:0;
 transform: translate(50px, 0px);
}
 }
 
  @keyframes service01 {
 0% {
 opacity:0;
 transform:scale(1.1);
}
 100% {
 opacity:1;
 transform:scale(1);
}
 }
 
 
 
 

/* 2.3 Bounce in Left */
.bounce-in-left {
	animation: Bounceanimation ease 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode: forwards; /*when the spec is finished*/
	-webkit-animation: Bounceanimation ease 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
	-moz-animation: Bounceanimation ease 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode: forwards; /*FF 5+*/
	-o-animation: Bounceanimation ease 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode: forwards; /*Not implemented yet*/
	-ms-animation: Bounceanimation ease 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode: forwards; /*IE 10+*/
}
 @keyframes Bounceanimation {
 0% {
 opacity:0;
 transform:  translate(-1500px, 0px);
}
 60% {
 opacity:1;
 transform:  translate(30px, 0px);
}
 80% {
 transform:  translate(-10px, 0px);
}
 100% {
 opacity:1;
 transform:  translate(0px, 0px);
}
}
 @-moz-keyframes Bounceanimation {
 0% {
 opacity:0;
 -moz-transform:  translate(-1500px, 0px);
}
 60% {
 opacity:1;
 -moz-transform:  translate(30px, 0px);
}
 80% {
 -moz-transform:  translate(-10px, 0px);
}
 100% {
 opacity:1;
 -moz-transform:  translate(0px, 0px);
}
}
 @-webkit-keyframes Bounceanimation {
 0% {
 opacity:0;
 -webkit-transform:  translate(-1500px, 0px);
}
 60% {
 opacity:1;
 -webkit-transform:  translate(30px, 0px);
}
 80% {
 -webkit-transform:  translate(-10px, 0px);
}
 100% {
 opacity:1;
 -webkit-transform:  translate(0px, 0px);
}
}
 @-o-keyframes Bounceanimation {
 0% {
 opacity:0;
 -o-transform:  translate(-1500px, 0px);
}
 60% {
 opacity:1;
 -o-transform:  translate(30px, 0px);
}
 80% {
 -o-transform:  translate(-10px, 0px);
}
 100% {
 opacity:1;
 -o-transform:  translate(0px, 0px);
}
}
 @-ms-keyframes Bounceanimation {
 0% {
 opacity:0;
 -ms-transform:  translate(-1500px, 0px);
}
 60% {
 opacity:1;
 -ms-transform:  translate(30px, 0px);
}
 80% {
 -ms-transform:  translate(-10px, 0px);
}
 100% {
 opacity:1;
 -ms-transform:  translate(0px, 0px);
}
}
/* 2.4 Wobble */
.wobble {
	animation: wobbleanimation linear 0.8s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	-webkit-animation: wobbleanimation linear 0.8s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: wobbleanimation linear 0.8s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-o-animation: wobbleanimation linear 0.8s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-ms-animation: wobbleanimation linear 0.8s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
}
 @keyframes wobbleanimation {
 0% {
 transform:  translate(0px, 0px);
}
 15% {
 transform:  translate(0px, -25px);
}
 30% {
 transform:  translate(0px, 0px);
}
 45% {
 transform:  translate(0px, -15px);
}
 60% {
 transform:  translate(0px, 0px);
}
 75% {
 transform:  translate(0px, -5px);
}
 100% {
 transform:  translate(0px, 0px);
}
}
 @-moz-keyframes wobbleanimation {
 0% {
 -moz-transform:  translate(0px, 0px);
}
 15% {
 -moz-transform:  translate(0px, -25px);
}
 30% {
 -moz-transform:  translate(0px, 0px);
}
 45% {
 -moz-transform:  translate(0px, -15px);
}
 60% {
 -moz-transform:  translate(0px, 0px);
}
 75% {
 -moz-transform:  translate(0px, -5px);
}
 100% {
 -moz-transform:  translate(0px, 0px);
}
}
 @-webkit-keyframes wobbleanimation {
 0% {
 -webkit-transform:  translate(0px, 0px);
}
 15% {
 -webkit-transform:  translate(0px, -25px);
}
 30% {
 -webkit-transform:  translate(0px, 0px);
}
 45% {
 -webkit-transform:  translate(0px, -15px);
}
 60% {
 -webkit-transform:  translate(0px, 0px);
}
 75% {
 -webkit-transform:  translate(0px, -5px);
}
 100% {
 -webkit-transform:  translate(0px, 0px);
}
}
 @-o-keyframes wobbleanimation {
 0% {
 -o-transform:  translate(0px, 0px);
}
 15% {
 -o-transform:  translate(0px, -25px);
}
 30% {
 -o-transform:  translate(0px, 0px);
}
 45% {
 -o-transform:  translate(0px, -15px);
}
 60% {
 -o-transform:  translate(0px, 0px);
}
 75% {
 -o-transform:  translate(0px, -5px);
}
 100% {
 -o-transform:  translate(0px, 0px);
}
}
 @-ms-keyframes wobbleanimation {
 0% {
 -ms-transform:  translate(0px, 0px);
}
 15% {
 -ms-transform:  translate(0px, -25px);
}
 30% {
 -ms-transform:  translate(0px, 0px);
}
 45% {
 -ms-transform:  translate(0px, -15px);
}
 60% {
 -ms-transform:  translate(0px, 0px);
}
 75% {
 -ms-transform:  translate(0px, -5px);
}
 100% {
 -ms-transform:  translate(0px, 0px);
}
}
/* 2.5 Fade in */
.fade-in-banner{
  animation: fadein ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fadein ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: fadein ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fadein ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fadein ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fadein{
  0% {
    opacity:0;
    transform:  ;
  }
  100% {
    opacity:1;
    transform:  ;
  }
}

@-moz-keyframes fadein{
  0% {
    opacity:0;
    -moz-transform:  ;
  }
  100% {
    opacity:1;
    -moz-transform:  ;
  }
}

@-webkit-keyframes fadein {
  0% {
    opacity:0;
    -webkit-transform:  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  ;
  }
}

@-o-keyframes fadein {
  0% {
    opacity:0;
    -o-transform:  ;
  }
  100% {
    opacity:1;
    -o-transform:  ;
  }
}

@-ms-keyframes fadein {
  0% {
    opacity:0;
    -ms-transform:  ;
  }
  100% {
    opacity:1;
    -ms-transform:  ;
  }
}
/* CAROUSEL ANIMATIONS :: End
-------------------------------------------------- */











/* 03. TESTIMONIAL CAROUSEL ANIMATIONS :: START
-------------------------------------------------- */
.quote {
    color: rgba(0,0,0,.1);
    text-align: center;
  
}

#fade-quote-carousel.carousel .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
      -ms-transition-property: opacity;
          transition-property: opacity;
		  height:150px !important;
		  
}
#fade-quote-carousel.carousel .carousel-inner .active {
  opacity: 1;
  -webkit-transition-property: opacity;
      -ms-transition-property: opacity;
          transition-property: opacity;

}
#fade-quote-carousel.carousel .carousel-indicators {

}
#fade-quote-carousel.carousel .carousel-indicators > li {
  background-color: #feb900;
  border: none;
}
#fade-quote-carousel blockquote {
    text-align: center;
    border: none;
}

#fade-quote-carousel blockquote{
font-size: 14px;
color: #333;	
}

/* 03. TESTIMONIAL CAROUSEL ANIMATIONS :: END
-------------------------------------------------- */










/* 04. RESPONSIVE CSS 320px to 479px
-------------------------------------------------- */

@media (min-width: 320px) and (max-width: 479px) {
.carousel .item {
	height: 121px;
}
.carousel-caption {
	width: 80%;
	right: 0%;
	bottom: 0%;
	top: -30%;
	left: 11%;
}
.hero-header {
	padding: 1% 1% 1% 5%;
}
.hero-header .title_carousel h1 {
	font-size: 2.5em;
}
.hero-header .title_carousel h2 {
	font-size: 1.5em;
}
.hero-header .title_carousel h3 {
	font-size: 1.5em;
}
.hero-header .title_carousel p {
	font-size: 1em;
}
.carousel-control {
	top: 10%;
	width: 0.5em;
	height: 1.5em;
}
#fade-quote-carousel.carousel .carousel-inner .item {
		  height:250px !important;
		  
}
}

/* 05. RESPONSIVE CSS  480px to 767px
-------------------------------------------------- */

@media (min-width: 480px) and (max-width: 767px) {
.carousel .item {
	height: 185px;
}
.carousel-caption {
	width: 80%;
	right: 0%;
	bottom: 0%;
	top: -4%;
	left: 11%;
}
.hero-header {
	padding: 1% 1% 4% 5%;
}
.hero-header .title_carousel h1 {
	font-size: 2.5em;
}
.hero-header .title_carousel h2 {
	font-size: 1.5em;
}
.hero-header .title_carousel h3 {
	font-size: 1.5em;
}
.hero-header .title_carousel p {
	font-size: 1em;
}
.carousel-control {
	top: 35%;
	width: 1em;
	height: 1.5em;
}
}
/* 06. RESPONSIVE CSS  768px to 1099px
-------------------------------------------------- */
 @media (min-width: 1200px) and (max-width: 1399px) {

.carousel .item {
	height: 400px;
}
.banner_service01 {
    left: 42%;
    top: 28%;}
	.hero-header .title_carousel h1{ font-size:4.5em;}
	.hero-header .title_carousel h2{ font-size:2.5em;}
 }
 @media (min-width: 1098px) and (max-width: 1199px) {
.carousel .item {
	height: 380px;
}
.banner_service01 {
    left: 17%;
    top: 54%;}
	.hero-header .title_carousel h1{ font-size:3.5em;}
	.hero-header .title_carousel h2{ font-size:2.5em;}
 }
/* 06. RESPONSIVE CSS  768px to 1099px
-------------------------------------------------- */
 @media (min-width: 768px) and (max-width: 1099px) {
.carousel .item {
	height: 320px;
}
.carousel-caption {
	width: 80%;
	right: 10%;
	bottom: 15%;
	top: 5%;
	left: 10%;
}
.hero-header {
	padding: 1% 1% 4% 5%;
}
.hero-header .title_carousel h1 {
	font-size: 3.5em;
}
.hero-header .title_carousel h2 {
	font-size: 2.5em;
}
.hero-header .title_carousel h3 {
	font-size: 2.5em;
}
.hero-header .title_carousel p {
	font-size: 2em;
}
.carousel-control {
	top: 35%;
	width: 1em;
	height: 1.5em;
}
}