#banner { position: relative; }
.slick-track { height: calc(100vh - 135px); margin-top: 135px; }
@media (max-width: 768px) {
    .prv-arrow, .nxt-arrow { bottom: 20px!important; }
    .nxt-arrow { left: 60%!important; }
    .prv-arrow { left: 40%!important; }
}
.prv-arrow, .nxt-arrow { position: absolute; transform: translateX(-50%); bottom: 10%; z-index: 999; line-height: 40px !important; }
.prv-arrow, .nxt-arrow { text-align: center; color: #fff; font-size: 20px; width: 40px; height: 40px; border: 1px solid #fff; cursor: pointer; transition: all linear .3s; }
.prv-arrow, .nxt-arrow { display: none!important; }
.nxt-arrow { right: 45%; }
.prv-arrow { left: 45%; }
.nxt-arrow:hover, .prv-arrow:hover { background: #6db111; }
.banner-img { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; position: relative; }
/*
.banner-img:after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; }
.banner-img:after { background: rgba(0,0,0,0.5); }
.banner-img:after { background: linear-gradient(rgba(45, 66, 42,0.5), rgba(45, 66, 42,0.5) 85%, rgba(0,0,0,0) 100%); }
*/
.video-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.banner-slider .overlay { width: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
/* .banner0slider .overlay { background-color: rgba(0,0,0,0); } */
.banner-slider .overlay { background: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(27,27,27,0.8) 70%); }
.banner-slider .banner-container .btn { display: inline-block; margin-top: 30px; margin-left: 0; font-size: 0.8em; }

.banner-norm-img { background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; position: relative; }
.banner-norm-img:after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; }
.banner-img .banner-container { position: relative; height: 100% }
.banner-content { position: absolute; bottom: calc(10% + 100px); z-index: 999; }
/*.banner-content { position: absolute; transform: translateY(-50%); top: 50%; z-index: 999; }*/
/*.banner-content { font-size: 1.6em; width: 60%; }*/

.banner-content.left { left: 5%; }
.banner-content.right { right: 5%; } 
.banner-content.centre { left: 50%; transform: translateX(-50%); } 
.banner-content h1 { animation: aniTopBannerTitle 2s both; }
.banner-content h2 { font-size: 1.2em; margin: 0; }
/*.banner-content h2 { text-transform: capitalize; }*/
/*.banner-content h2 { font-family: "Raleway", sans-serif; padding-top: 20px; line-height:1.6em; letter-spacing: 1px; }*/
.banner-content .btn-banner { display: inline-block; margin-top: 50px;}
.banner-slider .banner-container .btn { padding: 10px; font-size: 0.9em; }
@media (min-width: 1200px){
    .video-banner { width: 100%; height: unset; }
}
@media (max-width: 768px) {
    .banner-content { left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 30px; bottom: unset;  }
    .banner-content h1 { font-size: 30px; }
    .banner-content h2 { font-size: 20px; padding-top: 10px; padding-bottom: 20px; }
    .banner-content.left, .banner-content.right { text-align:center; left: 50%; right: unset; top: 50%; }

    /*.banner-slider .banner-container .btn { width: 80%; margin: auto; }*/
    .banner-slider .banner-container .btn { padding: 15px 20px; margin: auto; width: unset; }
    .banner-slider .overlay { background: rgba(27,27,27,0.1); }
}
/*
@media(max-width:575px){
    @media(max-aspect-ratio: 16/9) { .slick-track { height: calc(50vh - 80px); }
}
    */
@media (max-width: 575px) { 
    @media (min-height: 575px) { .slick-track { height: calc(50vh - 80px); } }
    @media (max-height: 575px) { .slick-track { height: calc(100vh - 80px); } } 
    .slick-track { margin-top: 80px; }
    .banner-content h1 { font-size: 26px }
    .banner-content h2 { font-size: 15px }
}

.banner-content .btn-banner { padding: 15px 20px; border-radius: 20px; text-decoration: none; font-size: 0.6em; font-weight:bold; letter-spacing: 1px; transition: all linear .3s; }
.banner-content .btn-banner { color: #7d5443; background: #c4a091; border: 1px solid #c4a091; }
.banner-content .btn-banner:hover { color: #7d5443; background: #dbc96b; border: 1px solid #dbc9c1; }

/*******************************/
/****** Animation CSS ******/
/*******************************/

.banner-content h1 { -webkit-animation: aniTopBannerTitle 2s both; animation: aniTopBannerTitle 2s both; }
.banner-content h2 { -webkit-animation: aniTopBannerSubtitle 3s both; animation: aniTopBannerSubtitle 3s both; animation-delay: 1s; }
@-webkit-keyframes aniTopBannerTitle { 0% { left: 45%; opacity: 0; } 100% { left: 50%; opacity: 1; } }
@keyframes aniTopBannerTitle { 0% { left: 45%; opacity: 0; } 100% { left: 50%; opacity: 1; } }
@-webkit-keyframes aniTopBannerSubtitle { 0% { left: 45%; opacity: 0; } 100% { left: 50%; opacity: 1; } }
@keyframes aniTopBannerSubtitle { 0% { left: 45%; opacity: 0; } 100% { left: 50%; opacity: 1; } }