#hero {padding: 0;}
#hero .row {height: 500px; align-content: center;}
[id*="custom-html"]{padding:0 !important;}
.banner-cover {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
.banner-cover h2{color: #fff; width: 45%; top: 50%; transform: translate(0, -50%); position: absolute;}
.banner-cover .layout-max-width{left:0; right:0;}
.top-header-canvas {position:relative; height:500px; overflow:hidden;}
h6 {font-weight: normal !important; color: #404040cc !important;}
.intro-text{color:#000!important; font-weight:normal !important;}
.text-show{display: block!important;}
.text-dark{color: #404040 !important;}
#top-hero{padding: 0 !important;}
#top-hero .row{height: 500px; align-items: center;}
#top-hero h1{display: none;}
#technology-section{background-position: top; padding:0 !important; height: 300px;} 
#technology-section h2{display:none;}

.about-solutions-box {position: relative;}
.about-solutions-box img {display: block; width: 100%; height: 400px; object-fit:cover !important;}
.about-solutions-box .overlay {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);overflow: hidden; width: 100%;height: 80px; padding:0 1rem; transition: .5s ease;}
.about-solutions-box .overlay:hover {height: 100%;}
.about-solutions-box .caption {color: #fff; display:flex;height: 80px; align-items: center;}
.about-solutions-box .caption h5{align-items: center!important; color:#fff !important; margin: 0 auto!important; text-align: center;}
.about-solutions-box .description {display: none; color:#fff;}
.about-solutions-box .description p{line-height: 1.4rem; margin: 0;}
.about-solutions-box .overlay:hover .description{display: block;}

#zyxel-opal-the-winning-element h2{display: none;}
#zyxel-opal-the-winning-element .col-md-5{width: 80%;}
#sustainability-awards h3{color:#404040 !important;}
.csr-award-box{height: 350px;background:url('') no-repeat center center; position:relative; background-size:cover;}
.csr-award-box img{display: block; width: 100%; height: 350px; object-fit:cover !important;}
.csr-award-box .overlay {position: absolute; width: 100%; height: 100%; bottom: 0;left: 0;right: 0; background:rgba(31,57,106, 0.6); padding:1rem;}
.csr-award-box h4{margin-top:0 !important;}
.csr-award-box a.border-adjusted {color: #fff !important;}
.csr-award-box a.border-adjusted:hover {background-color: transparent !important;}
.csr-award-box a.border-adjusted::before {background-color: #fff !important;}

.worldwide-zyxel-map{position:relative;}
.map-location {width: 15px; height: 15px; background: #0c3e91; border-radius: 50px;}
.map-label {color: #0c3e91;font-weight: 500;margin-left: 10px;}
.map-label-note{font-size:14px;}
.map-na{left:13.5%; top:43%; position: absolute; align-items: center;}
.map-sa{left:32%; bottom:19%; position: absolute; align-items: center;}
.map-emea{left:48%; top:27%; position: absolute; align-items: center;}
.map-emea .map-label{background: rgba(255,255,255,0.8);}
.map-apac{left:77.5%; top:54%; position: absolute; align-items: center;}
.map-hq{left:77.5%; top:48.5%; position: absolute; align-items: center;}
.map-de{right:51%; top:30%; position: absolute; align-items: center;}
.map-label-rd{font-size:14px; margin-left:5px; color: #000;}
.map-de .map-label{color:#000;}
.map-de .map-location{background: #000;}

@media (max-width:1700px) {
	.banner-cover h2{width:55%;}
}

@media (max-width:1440px) {
	.banner-cover h2{width:60%;}
}

@media (max-width:1300px) {
	.banner-cover h2{width:70%;}
}

@media (max-width:1100px) {
	.layout-max-width, .banner-cover h2 {width: 90%;}
}

@media (max-width:900px) {
	.csr-box, .award-box{min-height:370px;}
}

@media (max-width:850px) {
    .about-solutions-box .overlay{height: 100%;}
    .about-solutions-box .description {display: block;} 
    .about-solutions-section.d-flex, .csr-award-section .d-flex{flex-direction: column;}
    .about-solutions-section .col.me-2, .csr-award-section .col.me-2{margin-right: 0 !important; margin-bottom: 1rem;}
	.map-location{width:10px; height:10px;}
	.map-label{font-size:16px;}
}


@media (max-width:600px) {
    #top-hero {background-position: 64% !important;}
    #hero {background-position: 64% !important;}
    #zyxel-opal-the-winning-element {background-position: 80%;}
    #zyxel-opal-the-winning-element .col-md-5{width: 100%;}
	.map-list{position:absolute; margin:0 auto;top:0; left: 0; right: 0; width: 80%; text-align: left;}
	.map-na, .map-sa, .map-emea, .map-apac, .map-hq, .map-de{position:relative; display: block; left: unset; right: unset; top: unset; bottom: unset; justify-content: start;}
	.map-de{flex-direction: row-reverse;}
    .map-emea .map-label{background: none;}
}

@media (max-width:400px) {
	.hover-text h5{font-size:1.4rem;}
	.map-list{width:90%;}
}

@media (max-width:340px) {
    .csr-award-box{height:400px;}
}