#top-hero {padding: 0 !important;}
#top-hero .row{height: 500px; align-items: center;}
#top-hero h1{display: none;}
.bold{font-weight:600;}
.small-text{font-size:10px;}
.text-center{text-align:center !important;}
.text-white{color:#fff;}
.text-show{display:block !important;}
[id*="custom-html"]{padding:0 !important; position:relative;}
.break-line {display: block;}									   

/* Navigation Bar */
.navScrolled {position: fixed;top: 0;z-index: 1000;}
nav.second-nav {background-color: #828282; width: 100%; overflow: hidden; padding: 14px 0;}
nav.second-nav ul {width: max-content; margin:0 auto; text-align: center;}
nav.second-nav ul li {display: inline-block;padding: 0 5px;}
nav.second-nav ul li a {color: #fff; border-radius: 50px; padding: 5px 10px; display: inline-block; font-weight:normal;}
nav.second-nav ul li a:hover:before, .second-nav ul li a:before {text-decoration: none; height: 0 !important;}
nav.second-nav ul li.active a, nav.second-nav ul li a:hover {background-color: #00b2ff;color:#fff; padding: 5px 10px; text-decoration: none; }
nav.second-nav ul li a.border-adjusted, nav.second-nav ul li a.color-adjusted{color: #fff !important; background-color: transparent!important;}
nav.second-nav ul li.active a.color-adjusted, nav.second-nav ul li.active a.border-adjusted, nav.second-nav ul li.active a.border-adjusted:hover{color: #fff !important; background-color: #003eab!important;}
@media screen and (max-width: 992px) {
	nav.second-nav {overflow-x: scroll;}
}
/* End Navigation Bar */

.overview .link .image {width: 115px; margin: auto; border-radius: 50%; position: relative;}
.overview .link .image a:before{background-color: transparent !important;}
.overview .link .image img {margin: auto; display: block; width: 70px; height: 70px; position: relative; z-index: 5;} 
.overview .image:after {content: ""; width: 1px; height: 1px; border-radius: 50%; background-color:#00b2ff; position: absolute; transition: all 0.2s ease; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;}
.overview .link:hover:before {height: 0; background: none !important;}
.overview .link .image:hover:after, .overview .link .image:focus:after, .overview .link .image:active:after {width: 100px; height: 100px;}
.overview .link h6{text-align: center; margin-top: 1rem !important;}

/*Video pop-up*/
.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 .video{margin: 0 auto; width:71vw; height:40vw; text-align:center;max-height: calc(100vh - 60px);}
#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;}

#wifi6-section {padding: 0 !important;}
#wifi6-section h2{display: none;}
#wifi6-section .row{min-height: 700px; align-items: center;}
#wifi6-section .col-md-5{width: 100%;}
#wifi6-section picture img{object-fit: cover;}

/*Customer stories*/
.customer-story-section {position: relative; z-index: 10;}
.customer-story-box {position: relative;}
.customer-story-box img {display: block; width: 100%; height: 400px; object-fit:cover !important;}
.customer-story-box .overlay {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.7);overflow: hidden; width: 100%;height: 50px; padding:0 1rem; transition: .5s ease;}
.customer-story-box .overlay:hover {height: 100%;}
.customer-story-box .caption {color: #fff; display:flex;height: 50px; align-items: center; justify-content: center;}
.customer-story-box .caption h5{align-items: center!important; color:#fff !important; margin:0 auto!important;}
.customer-story-box .description {display: none; color:#fff;}
.customer-story-box .description p{line-height: 1.4rem; margin: 0;}
.customer-story-box .overlay:hover .description{display: block;}

/*Mobile App switch*/
ul#user-friendly-tabs {list-style-type: none;}
ul#user-friendly-tabs li {margin-top: 5px;}
ul#user-friendly-tabs li.selected  a{color: #00b2ff;}
ul#user-friendly-tabs li:hover a {color: #00b2ff;}
ul#user-friendly-tabs li a {color: #404040;text-decoration: none;}
ul#user-friendly-tabs li a:hover {color: #00b2ff;}
ul#user-friendly-tabs li a:before {background-color: #00b2ff;}
.user-friendly-tabContent {display: none;}
.contentPicture{margin: 0 auto;}
.download-links a:before{background-color: transparent !important;}

#opex-section, #benefits-section {padding: 0 !important;}
#opex-section h2, #benefits-section h2, #benefits-banner h2{display: none;}
#opex-section ul li{list-style: disc !important; text-align: left; margin-left: 1rem;}
#opex-section .row{min-height: 600px; align-items: center;}
#opex-section .col-md-5, #benefits-section .col-md-5, #benefits-banner .col-md-5{width: 100%;}
#opex-section .text-cover {background: rgba(255,255,255,0.8); margin: 0 auto; padding: 2rem; text-align: center;}
#opex-section picture img{object-fit: cover;}
#benefits-banner .row, #benefits-section .row{align-items: center;}
#benefits-section ul li{font-size: 16px; margin-bottom: 1rem;}
#benefits-section ul li span{vertical-align: middle;}

.switch-icon .image, .switch-icon.active .image{width: 150px; margin: auto; border-radius: 50%; position: relative;}
.switch-icon .image img, .switch-icon.active .image img {margin: auto; display: block; position: relative; z-index: 5;} 
.switch-icon .image:after, .switch-icon.active .image:after {content: ""; width: 1px; height: 1px; border-radius: 50%; background-color:#00b2ff; position: absolute; transition: all 0.2s ease; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;}
.switch-icon:hover:before {height: 0; background: none !important;}
.switch-icon .image:hover:after, .switch-icon .image:focus:after, .switch-icon .image:active:after, .switch-icon.active .image:after {width: 100px; height: 100px;}
.next-scene-btn {font-weight: 600; cursor: pointer;}
.tag-wrap {display: flex;}
.tag {border:2px solid #00b2ff; background: #fff; border-radius: 50px; color: #00b2ff; padding: 10px; display: inline-block; margin: 1rem auto;}
.tag-sceneA, .tag-sceneB{cursor: pointer;}
.tag-wrap .tag.border-adjusted {background-color: #fff; color: #003eab !important;}
.tag-wrap .tag.border-adjusted.active {background-color: #003eab!important; color: #fff !important;}
.scenario-switch {box-shadow: rgb(118 118 118 / 50%) 0px 50px 50px; background: #fff; display: flex; flex-direction: column;}

@media (max-width:700px) {
    .scenario-switch {flex-direction: row; width: 90%; margin: 1rem auto; justify-content: center; flex-wrap: wrap;}
    .customer-story-section .col {flex: 1 0 33%; margin: 0 auto 1rem;}
    .download-links div {width: 150px; margin: auto;}
    .search-app {flex-direction: column;}
    .search-app div {margin: 5px 0;}
    .mpro-mesh-app-icon {width: fit-content;}
}

@media (max-width:500px) {
    .customer-story-section .col {flex: 1 0 90%;}
    .switch-icon .image, .switch-icon.active .image {width: 90px;}
    .switch-icon .image:hover:after, .switch-icon .image:focus:after, .switch-icon .image:active:after, .switch-icon.active .image:after {width: 50px; height: 50px;}
    .switch-icon h6 {margin-top: 2rem !important; font-size: 15px;}
}

