#banner {position: relative;width: 100%;margin: 0 auto;left: 0;}
#banner .slick-slider { margin-bottom: 0; }
#banner .main-slider .item {width: 100%;height: 100vh;background-size: cover;display: block;}
#banner .main-slider .banner-txt {position: absolute;width: 550px;height: 370px;top: 30vh;left: 8%;z-index: 1;}
#banner .main-slider .item video , #banner .main-slider .item iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.banner-txt h2 {color: #031814;font-weight: 900;font-size: 6em;transform: translateX(-30px);opacity: 0;z-index: 2;}
.banner-txt h2:after{content:"";background-image: url(../../images/42/reey-guate.png);background-size: contain;background-repeat: no-repeat;width: 597px;height: 265px;position: absolute;top: 100px;right: -30px;z-index: 1;}
.banner-txt .bannerdescrip {position: absolute;bottom: 40px;right: 50px;font-size: 18px;color: #99968D;transform: translateX(30px);transition-delay: .5s;opacity: 0;width: 345px;}
.slick-current.slick-active .banner-txt h2 ,
.slick-current.slick-active .banner-txt p {transform: translateX(0);opacity: 1;}
#banner .main-slider .banner-txt .more{ position: absolute; bottom: -55px; right: calc((100% / 2) - 160px); }

@media screen and (max-width:1280px) {
    #banner {top: 70px;}
    #banner .main-slider .item {height: 90vh;background-position: 45% 50%;}
    #banner .main-slider .banner-txt {top: 100px;width: 92%;}
    .banner-txt h2 { font-size: 4rem; }
    .banner-txt h2:after {width: 450px;left: 0;}
    .banner-txt .bannerdescrip {left: 0;bottom: 90px;}
    #banner .main-slider .banner-txt .more {left: 0;bottom: -5px;margin: 0;}
}
@media screen and (max-width:680px) {
    .banner-txt .bannerdescrip {font-size: 16px;width: 70%;bottom: 135px;font-weight: 300;text-shadow: 0 0 12px rgb(0 0 0 / 30%);}
    #banner .main-slider .banner-txt {top: 100px;}
    .banner-txt h2 {font-size: 3.5em;} 
    .banner-txt h2:after {top: 35px;width: 300px;}
    #banner .main-slider .banner-txt .more{ bottom: 40px; } 
}