.carousel,
.item,
.active { height: 100%;}
.carousel-inner {height: 100%;background: #ccc;}
.carousel-caption{padding-bottom:80px;}
h2{font-size: 60px;}
/* Background images are set within the HTML using inline CSS, not here */
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; opacity:0.6;}
/**
 * Button
 */
.btn-transparent {background: transparent; color: #fff; border: 2px solid #fff;}
.btn-transparent:hover {background-color: #fff;}
.btn-rounded {border-radius: 70px;}
.btn-large {padding: 11px 45px; font-size: 18px;}
/* *************** css for slideanim  Starts *************** */
.slideanim {visibility:hidden;}
.slide {/* The name of the animation */animation-name: slide;-webkit-animation-name: slide; /* The duration of the animation */
animation-duration: 1s; -webkit-animation-duration: 1s;/* Make the element visible */visibility: visible; }
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
.slideInLeft {-webkit-animation-name: slideInLeft; animation-name: slideInLeft;}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.banner-text { padding: 70px 0px 70px 0px; position: absolute; margin: 0px auto; top: 10%; text-align: center; margin: auto; width: 100%;}
.banner-title{ font-weight: 700; padding: 10px 12px 15px 10px; font-family: Lato; font-size: 36px; line-height: 37px; color: rgb(255, 255, 255); background: rgba(138, 133, 77, 0.7); top: 100px; left: 281.5px; margin: 0px; z-index: auto; width: 650px; height: 60px; border-width: 0px; border-radius: 0px; letter-spacing: 0px; filter: none;}
.banner-description{padding: 20px;background-color: rgba(116, 117, 119, 0.9); width: 600px; height: 110px; top: 162px; left: 281.5px; margin: 0px; z-index: auto; border-width: 0px; border-radius: 0px; font-size: 14px; letter-spacing: 0px; filter: none;margin-bottom:20px;}
.banner-description p{white-space: normal; font-family: "Open Sans"; font-size: 15px; line-height: 22px; color: #fff; width: 100%; top: 180px; left: 301.5px; margin: 0px; z-index: auto; /*height: 128px;*/ padding: 0px; border-width: 0px; border-radius: 0px; letter-spacing: 0px; filter: none;}
.btn-red{background: rgb(138, 133, 77); color: #fff; font-size: 14px; font-family: 'Raleway', sans-serif; text-transform: uppercase; display: inline-block; padding: 9px 30px; border: 1px solid rgb(138, 133, 77); outline: none; text-decoration: none; font-weight: 700;}
.btn-red:hover, .btn-red:focus  {background-color:transparent;  color: rgb(138, 133, 77); border:1px solid rgb(138, 133, 77); text-decoration: none;}
@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}
100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes slideInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);}
100%{-moz-transform:translateX(0);}
}
@-o-keyframes slideInLeft{0%{opacity:0;-o-transform:translateX(-2000px);}
100%{-o-transform:translateX(0);}
}
@keyframes slideInLeft{0%{opacity:0;transform:translateX(-2000px);}
100%{transform:translateX(0);}
}
.slideInLeft{-webkit-animation-name:slideInLeft;
  -moz-animation-name:slideInLeft;
  -o-animation-name:slideInLeft;
  animation-name:slideInLeft;
position: relative;
    animation-duration: 2s;
}

.slideInRight{position: relative;

  animation-name: slideInRight;
    animation-duration: 2s;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
      animation-duration: 2s;
}

@-webkit-keyframes flipInX1 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX1 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX1 {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX1;
  animation-name: flipInX1;
   transform-origin: 50% 0%;
  animation:flipInX1 0.8s ease-in;
}

@-webkit-keyframes flipInX2 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX2 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX2 {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX2;
  animation-name: flipInX2;
   transform-origin: 50% 0%;
  animation:flipInX2 1s ease-in;
}


@-webkit-keyframes flipInX2 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX3 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX3 { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX3; animation-name: flipInX3; transform-origin: 50% 0%; animation:flipInX3 1.5s ease-in;}
.carousel-control.left, .carousel-control.right { background-image: none; opacity: 1;}
.postop200{position: relative;top:-100px;left: 28px;max-width:100%;}
.posbtm{position: absolute;bottom:50px;left:100px;max-width:100%;}
.banner{height:500px; }
.postop1 { position: relative; bottom: 20px; max-width: 100%; margin-left: 65px;}
.postop2 {position: relative; bottom: 100px; max-width: 100%;}
.carousel-inner>.item>a>img, .carousel-inner>.item>img {height: 100%; }
@media only screen and (min-width:992px) and (max-width:1024px){
.banner-title {font-size: 35px; width: 549px; }
.banner-description p {font-size:18px;word-break: break-all; }
.banner-description{width: 500px; }
.postop1 {bottom: -50px; }
.posbtm {left: 58px; }
}
@media only screen and (max-width:768px){
.banner-text { position: static;}
.banner {height: auto; }
.banner-title {font-size:20px; width: 100%; }
.banner-description{width: 100%; }
.banner-description p {font-size:14px; height: auto; }
.postop2 {bottom: -81px; }
.postop1 {bottom: -73px; margin-left:0px; }
.postop1, .postop2, .postop200, .posbtm {display: none; }
.banner-text {padding: 20px 0px 70px 0px; }
.banner-description, .banner-title { height: auto; }
.banner-title{line-height: 27px;}
}