[id*="custom-html"], .zyx-tab-content.zyx-product-benefits{padding:0 !important;}
[id*="hero"], #esg-auto-frame, #port-feature-frame {padding: 0 !important; position: relative;}
#esg-auto-frame {overflow: hidden; z-index: 10; margin-top: -9rem;}
[id*="hero"] h2 {display: none;}
[id*="hero"] .row {min-height:500px; align-items: center;}
[id*="hero"] .col-md-5, #esg-auto-frame .col-md-5, #port-feature-frame .col-md-5{width:100%;}
.line-break {display: block;}
.text-show {display: block !important;}
#esg-auto-frame .row {align-items: center; padding: 3rem 0;}
#port-feature-frame {overflow: hidden;}
#esg-auto-frame .esg-row, #port-feature-frame .port-feature-row {display: flex; align-items: center;}
#esg-auto-frame h2, #port-feature-frame h2{display:none;}
.mesh-video-container {position: relative;  width: 100%; max-width: 1200px; margin: auto;}
.mesh-video-container video {width: 100%; height: auto; display: block; border: none !important; outline: none !important; box-shadow: none !important;   background-color: transparent !important; filter: brightness(1) !important;}
.mesh-video-container video:focus,  .mesh-video-container video:active,  .mesh-video-container video:hover {outline: none !important; border: none !important; box-shadow: none !important;}
::-webkit-media-controls-panel {display: none !important;  visibility: hidden !important;  opacity: 0 !important; pointer-events: none !important;}
.feature-text {position: relative; z-index: 1;}
.position-bottom-right {position: absolute; bottom: 0; right: 16%; z-index: 0;}
.position-bottom-right picture img {height: 500px; width: auto;}
.feature-box {border: 1px solid #404040; border-radius: 10px; padding: 0 1.5rem; min-height: 270px; box-sizing: border-box;}
#test-kit {padding-bottom: 0 !important;}
#test-kit h3{display: none;}
/*matrix table*/
#matrix-table h3{display: none;}
.table-responsive {display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar;}
.table-responsive table th{font-size: 1rem; font-weight: bold; color: #222;background:#eee;}
.table-responsive table tr:hover{background:#eee; cursor:default;}
.table-responsive td.bold{font-weight: bold; color: #222;}
.btn-info .material-icons-round {transform: rotate(0deg); transition: all 0.6s; vertical-align: middle;}
.btn-info .material-icons-round.active {transform: rotate(180deg);}
/*ripple effect*/
.port-feature-row {align-items: center;}
.port-feature-text {position: relative; z-index: 10; width: 50%; padding: 1rem;}
.left-img {position: relative; width: 50%; height: 500px;}
.position-left {position: absolute; bottom: 0; top:0; left:0; z-index: 10; width: 100%;}
.collapse {z-index: 10; position: relative;}
.ripple-container {position: absolute; bottom: -3rem; left: 1rem; width: 450px; z-index: 0;}
.ripple {position: absolute; border-radius: 50%; border: 1px solid #ccc; opacity: 0;}
.ripple1 {position: absolute; bottom: 5rem; left: 62%; width: 50px; height: 25px; border-radius: 50%; border: 1px solid #ccc; animation: ripple 2.5s linear infinite;}
.ripple2 {position: absolute; bottom: 12rem; left: 23%; width: 30px; height: 15px; border-radius: 50%; border: 1px solid #ccc; animation: ripple 3.5s linear infinite;}
@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(10);
        opacity: 0;
    }
}
/*Zyxel One*/
.zyxelone-link {display: flex; flex-direction: column;}
.zyxelone-link a::before{background-color: transparent !important;}
.googleplay-app {margin-top: 1rem;}

@media (min-width: 2500px) {
    .position-bottom-right {right: 23%;}
}

@media (max-width: 1600px) {
    .position-bottom-right {right:0;}
    .mesh-video-container {width: 80%;}
}
@media (max-width: 1200px) {
    #esg-auto-frame {margin-top: -3rem;}
    .position-bottom-right{right:-15%;}
    .ripple-container {bottom: 0; left: 0;}
}
@media (max-width: 900px) {
    #hero-banner picture img{object-position: 15%;}
    .text-cover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); z-index: 0;}
    .hero-text {position: relative; z-index: 1;}
    .hero-text .col-sm-6{width: 100%;}
    .mesh-video-container {width: 100%;}
    #esg-auto-frame {margin-top: 0;}
    #esg-auto-frame .row {padding-bottom: 0;}
    #port-feature-frame {padding-top: 0 !important; padding-bottom: 2rem !important;}
    #port-feature-frame .port-feature-row {flex-direction: column;}
    .line-break {display: inline; margin-left: 5px;}
    .feature-text {width: 100%;}
    .feature-box {margin-bottom: 1rem;}
    .position-bottom-right {margin-top: -2rem; position: relative;}
    .position-bottom-right picture img{height: auto;}
    .left-img {position: relative; height: auto; width: 100%;}
    .position-left {position: relative;}
    .port-feature-text {width: 100%; margin-left: 0;}
    .ripple-container {bottom: -4rem; left: -5rem;}
}

@media (max-width: 500px) {
    .ripple-container {width: 350px; bottom: -6rem; left: 0;}
    .app-img {width: 40%; margin: 0 auto;}
    .zyxelone-link {width: 80%; margin: 0 auto; flex-direction: row; padding-bottom: 5rem; gap: 1rem;}
    .googleplay-app {margin-top: 0;}
}