[class*="top-hero"]{padding: 0 !important;}
[class*="top-hero"] .row{height: 500px; align-items: center;}
.top-banner {position: absolute; width: 100%; height: 500px; top: 0; left: 0;}
.top-banner img{object-fit: cover; width: 100%; height: 500px;}
.banner-text {position: relative; z-index: 1;}
[id*="custom-html"]{padding:0 !important; position:relative;}
.line-break {display: block;}
.text-show{display:block !important;}
[id*="hero"]{padding: 0 !important;}
[id*="hero"] .row{min-height: 500px; align-items: center;}
[id*="hero"] .row .col-md-5, [id*="auto-frame"] .row .col-md-5{width: 100%;}
[id*="hero"] h2, [id*="auto-frame"] h2, [id*="auto-frame"] h3, #snap-fits-section-hero h2{display: none;}
#snap-fits-section-hero .row {height: 600px;}
.l-block{display: block;}
.m-block{display: none;}
.bottom-banner-btn{margin-top: 2rem;}
.esg-video-btn {margin: 0 2rem 0 0 !important;}
.award-link {position: relative;}
.award-link img{display: block; object-fit: cover;}
.award-link:hover .overlay {opacity: 1;}
.award-link .overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 100px; width: auto; opacity: 0; transition: .5s ease; background-color: #00b2ff;}
.award-link .text{line-height: 1.2rem; color: #fff; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; font-size: 16px;}

.left-side-image.d-flex, .right-side-image.d-flex{width: 100%; height: 500px; padding: 0; margin: 0;}
.left-side-image.d-flex .img-box img, .right-side-image.d-flex .img-box img{object-fit: cover; width: 100%; height: 500px;}
.left-side-image .img-box {position: absolute; left: 0; overflow-y: hidden; width: 50%; height: 500px;}
.right-side-image .img-box{position: absolute; right: 0; overflow: hidden; width: 50%; height: 500px;}
.left-side-image .desc, .right-side-image .desc{padding: 0; width: 45%;}
.left-side-image .desc{margin-left: 54%;}

.power-consumption-video {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


/*Video pop-up*/
.esg-video-btn {color: #fff; cursor: pointer;}
.esg-video-btn i{vertical-align: middle; margin-right: 5px;}
.show {display: flex !important;}
.popup {display: none;width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.9);justify-content: center;align-items: center;position: fixed;top: 0;left: 0;z-index: 1050;}
.popup .esg-video{margin: 0 auto; width:71vw; height:40vw; text-align:center;max-height: calc(100vh - 60px);}
#esg-video .close{position: absolute;border: 0;outline: none;cursor: pointer;background: none;font-size: 50px;z-index: 1;top: 0;right: 1%;color: #fff;opacity: 1;margin: 0;padding: 0;}


.js-scroll {opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@media (max-width:900px) {
    .left-side-image.d-flex, .right-side-image.d-flex {height: auto; margin: auto; width: 90%;}
    .left-side-image.d-flex .img-box img, .right-side-image.d-flex .img-box img {height: 400px;}
    .left-side-image .img-box, .right-side-image .img-box {width: 100%; position: relative; height: 400px;}
    .left-side-image .desc, .right-side-image .desc {width: 100%; margin-left: auto;}
    [id*="auto-frame"] .d-flex{flex-direction: column-reverse;}
    .power-consumption-video {height: 400px;}
}


@media (max-width: 700px) {
    .m-block{display: block !important;}
    .l-block{display: none;}
    .banner-text {margin-top: -10rem;}
    #snap-fits-section-hero .row {background: rgba(0, 0, 0, 0.4); color: #fff;}
    #snap-fits-section-hero picture img{object-position: 62%;}
    .esg-video-btn {margin:0 0 1rem 0!important;}
}