#myCarousel .carousel-item .mask {position: absolute; top: 0; left:0; height:100%; width: 100%; background-attachment: fixed;}
#myCarousel .carousel-item .container { padding:30px 0;}
#myCarousel h1{font-size:45px; margin-bottom:15px; color:#FFF; line-height:55px;}
#myCarousel p{color:#FFF; font-size:15px; line-height:25px; margin-bottom:15px; margin-top:15px; padding:0;  text-transform: capitalize; letter-spacing: 1px;}
#myCarousel .carousel-item a{background:#e3af37; margin-top: 10px; font-size:16px; color:#16171D; font-weight: 600; text-transform: capitalize; border-radius: 6px; letter-spacing: 2px; padding: 15px 30px; line-height: 30px; display:inline-block; }
#myCarousel .carousel-item a:hover{background:#FFF; text-decoration:none;  }

#myCarousel .carousel-item h1{-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;} 
#myCarousel .carousel-item p{-webkit-animation-name:slideInRight; animation-name:slideInRight;} 
#myCarousel .carousel-item a{-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
#myCarousel .carousel-item .mask img{-webkit-animation-name:slideInRight; animation-name:slideInRight; display:block; height:auto; max-width:100%;}
#myCarousel h1, #myCarousel p, #myCarousel a, #myCarousel .carousel-item .mask img{-webkit-animation-duration:1.5s; animation-duration: 1.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
#myCarousel .container {max-width: 960px; }
#myCarousel .carousel-item{height:100%; min-height:530px; }
#myCarousel{position:relative; z-index:1; /*background:url(https://i.imgur.com/6axE29k.jpg) center center no-repeat;*/ background-size:cover; background:#16171D;}
.carousel-control-next, .carousel-control-prev{height:50px; width:50px; line-height:50px; top:50%; bottom:auto; transform:translateY(-50%); color:#FFF; font-size:20px;  }

.carousel-item {position: relative; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; transition: -webkit-transform .6s ease; transition: transform .6s ease; transition: transform .6s ease,-webkit-transform .6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px;}
.carousel-fade .carousel-item {opacity: 0; -webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-property: opacity; transition-property: opacity;}
.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {opacity: 1;}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-right.active {opacity: 0;}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

@supports (transform-style:preserve-3d) {
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

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

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;

}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-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;
}

@media only screen and ( min-width: 1299px) and (max-width: 2399px) {

#myCarousel h1{font-size:50px; line-height:60px;}
#myCarousel p{font-size:16px; line-height:25px;}
#myCarousel .carousel-item a{font-size:16px; padding: 15px 30px; line-height: 30px; }
#myCarousel .container {max-width: 1090px;  }
#myCarousel .carousel-item{height:100%; min-height:670px; }
.carousel-control-next, .carousel-control-prev{height:50px; width:50px; line-height:50px; font-size:20px;  }
  
}

@media only screen and ( min-width: 768px) and ( max-width: 980px ) {

#myCarousel h1{font-size:35px; line-height:45px;}
#myCarousel p{font-size:13px; line-height:20px;}
#myCarousel .carousel-item a{font-size:14px; padding: 15px 25px; line-height:20px; }
#myCarousel .container {max-width:720px;  }
#myCarousel .carousel-item{height:100%; min-height:410px; }
.carousel-control-next, .carousel-control-prev{height:50px; width:50px; line-height:50px; font-size:20px;  }    
}


@media only screen and ( min-width: 600px) and ( max-width: 765px ) {

#myCarousel h1{font-size:30px; line-height:40px; margin-bottom:10px;}
#myCarousel p{display: none}
#myCarousel .carousel-item a{font-size:13px; padding: 15px 20px; line-height:20px; }
#myCarousel .container {max-width:540px;  }
#myCarousel .carousel-item{height:100%; min-height:270px; }
.carousel-control-next, .carousel-control-prev{height:50px; width:50px; line-height:50px; font-size:20px;  }     
}

@media only screen and ( min-width: 481px) and ( max-width: 599px ) {

#myCarousel .carousel-item .container { padding:30px 0;}
#myCarousel h1{font-size:30px; line-height:40px; margin-bottom:10px; margin-top:15px;}
#myCarousel p{display: none}
#myCarousel .carousel-item a{font-size:12px; padding: 10px 20px; line-height:20px;  }
#myCarousel .container {max-width:90%;  }
#myCarousel .carousel-item{height:100%; min-height:650px; }
.carousel-control-next, .carousel-control-prev{height:40px; width:40px; line-height:40px; font-size:16px;  }   
}

@media only screen and ( min-width: 320px) and ( max-width: 480px ) {
#myCarousel .carousel-item .container { padding:30px 0;}
#myCarousel h1{font-size:30px; line-height:40px; margin-bottom:10px; margin-top:15px;}
#myCarousel p{display: none}
#myCarousel .carousel-item a{font-size:12px; padding: 10px 20px; line-height:20px;  }
#myCarousel .container {max-width:90%;  }
#myCarousel .carousel-item{height:100%; min-height:550px; }
.carousel-control-next, .carousel-control-prev{height:40px; width:40px; line-height:40px; font-size:16px;  }     
}