#top-hero {padding: 0 !important;}
#top-hero .row{height: 500px; align-items: center;}
#top-hero h1{display: none;}
[class*="video-banner-canvas"] {position:relative; height:500px; overflow:hidden; z-index:0;}
[class*="video-banner-canvas"] video {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;}
[class*="video-banner-canvas"] .d-flex {height: 500px;}
[class*="video-banner-canvas"] .banner-title{position: relative; width: 100%; z-index: 1;}
.wifi7-video-banner-canvas .banner-title{color: #fff;}
.bold{font-weight:600;}
.pb10{padding-bottom:10px;}
.pt10{padding-top:10px;}
.mt20{margin-top:2rem;}
.small-text{font-size:15px;}
.text-center{text-align:center !important;}
.text-white{color:#fff;}
.text-show{display:block !important;}
[id*="custom-html"]{padding:0 !important; position:relative;}

/* Navigation Bar */
.navScrolled {position: fixed !important;top: 0;z-index: 1000;}
nav.second-nav {background-color: #0C162D; width: 100%; overflow: hidden; padding: 14px 0; position:relative;}
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: 7px; padding: 5px 25px; 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: #fff;color:#0C162D; border-radius: 50px; font-weight:500;text-decoration: none; }
nav.second-nav ul li.active a.border-adjusted, nav.second-nav ul li a.border-adjusted:hover {color: #000 !important;}
nav.second-nav ul li a.border-adjusted {color: #fff !important;}
@media screen and (max-width: 992px) {
	nav.second-nav {overflow-x: scroll;}
}
/* End Navigation Bar */
#overview h3{display:none;}
#benefits{background-size:cover !important; height:700px;position:relative; padding:0; overflow:hidden;background-position: center center !important;}
#benefits h2{display:none;}
#benefits .col-md-5{width: 100%;}
.benefits-section {position:relative; height:650px;}
.hover-area {position: absolute; bottom: 5%; right: 0; left: 0; margin: 0 auto; text-align: center; font-size:13px; color: #fff;}
.hover-area i {font-size: 20px;}
.circle-box{display: block; margin: 0 auto; width: 350px; height: 350px; position: absolute; top:25%; left:0; right:0;}
.circle-outer{width:350px; height:350px; border-radius:50%; border: 2px solid #fff; position: relative;}
.circle-middle{width:250px; height:250px; border-radius:50%; border: 2px solid #fff; position: absolute; margin: 0 auto; left: 0;right: 0; top: 50%; transform: translate(0, -50%);}
.circle-inner{width:220px; height:220px; border-radius:50%; border: 2px solid #fff; position: absolute; margin: 0 auto; left: 0;right: 0; top: 50%; transform: translate(0, -50%);}
.circle-inner-bg{width:200px; height:200px; border-radius:50%; position: absolute; margin: 0 auto; left: 0;right: 0; top: 50%; transform: translate(0, -50%); background:rgba(12,22,45,0.7);}
.circle-inner-bg img{position: absolute; margin: 0 auto; left: 0;right: 0; top: 50%; transform: translate(0, -50%);}
.logoBox{position: absolute; margin: 0 auto; left: 0;right: 0; top: 50%; transform: translate(0, -50%); height:100px; background-size: auto 60px; background-position:center center; background-repeat:no-repeat;}
.mySlides{display:none;}
.benefit-point{border-radius:50%; width:30px; height:30px; background:#fff; position:absolute; margin: 0 auto; top:25%; left:0; right:0; -webkit-animation: sonar-effect 1s ease-in-out 0.1s infinite; animation: sonar-effect 1s ease-in-out 0.1s infinite; z-index:0;}
.benefits-section a.benefit-text{color:#fff; text-align:center; line-height:1.2rem; display:block; font-weight:normal;}
.benefits-section a.benefit-text:before{background-color:#fff !important;}
.benefit-portfolio{position: absolute; top: -28%; left: 0; right: 0; margin: 0 auto; text-align:center;}
.benefit-mpro-mesh{position: absolute; top: 30%; right: -7%; margin: 0 auto;}
.benefit-opal{position: absolute; bottom: -10%; right: 7%; text-align:center;}
.benefit-gui{position: absolute; bottom: -6%; left: -6%; text-align:center;}
.benefit-remoteMgnt{position: absolute; top: 25%; left: -7%; margin: 0 auto;text-align:center;}
.benefit-portfolio .hoverPoint{width: 65px; height:65px;border-radius: 50%;background: #fff;display:block; position:relative;margin: 0 auto; }
.benefit-mpro-mesh .hoverPoint{width: 65px; height:65px;border-radius: 50%;background: #fff;display:block; position:relative;}
.benefit-opal .hoverPoint{width: 65px; height:65px;border-radius: 50%;background: #fff;display:block; position:relative;margin: 0 auto;}
.benefit-gui .hoverPoint{width: 65px; height:65px;border-radius: 50%;background: #fff;display:block; position:relative;margin: 0 auto;}
.benefit-remoteMgnt .hoverPoint{width: 65px; height:65px;border-radius: 50%;background: #fff;display:block; position:relative;}
.benefit-portfolio .hoverPoint:hover .benefit-point, .benefit-mpro-mesh .hoverPoint:hover .benefit-point, .benefit-opal .hoverPoint:hover, .benefit-gui .hoverPoint:hover, .benefit-remoteMgnt .hoverPoint:hover{-webkit-animation:none; animation:none;}
.benefit-portfolio .hoverPoint a, .benefit-mpro-mesh .hoverPoint a, .benefit-opal .hoverPoint a, .benefit-gui .hoverPoint a, .benefit-remoteMgnt .hoverPoint a{height:40px; position:absolute; top: 50%; transform:translate(0, -50%); left:0; right:0; margin: 0 auto; z-index:1; text-align:center;}
.benefit-portfolio .hoverPoint a:before, .benefit-mpro-mesh .hoverPoint a:before, .benefit-opal .hoverPoint a:before, .benefit-gui .hoverPoint a:before, .benefit-remoteMgnt .hoverPoint a:before{margin: 0 auto; width: 45px; height:45px;border-radius: 50%;background: transparent;display:block;position: absolute;left: 0;right:0;}
.benefit-portfolio .hoverPoint:hover a::before, .benefit-mpro-mesh .hoverPoint:hover a::before, .benefit-opal .hoverPoint:hover a::before, .benefit-gui .hoverPoint:hover a::before, .benefit-remoteMgnt .hoverPoint:hover a::before{color: #fff;-webkit-animation: sonar-effect1 1s ease-in-out 0.1s 1; animation: sonar-effect1 1s ease-in-out 0.1s 1;}
.benefit-portfolio a.benefit-text{width:150px; margin:0 auto 20px;}
.benefit-mpro-mesh a.benefit-text{width:120px; position:absolute; top: 50%; transform:translate(0, -50%); left:4rem}
.benefit-remoteMgnt a.benefit-text{width:150px; position:absolute; top: 50%; transform:translate(0, -50%); right: 4rem;}
.benefit-opal a.benefit-text, .benefit-gui a.benefit-text{margin-top:20px;}
#opal-section{padding:0 !important;}
#opal-section .row {height:900px; position:relative; }
#opal-section .col-md-5{width: 100%;}
#opal-section h2{display:none;}
.opal-box{text-align:left; padding:2rem; width:60%;position:absolute; border: 1px solid #fff;}
.opal-box h3{display:block !important;}
.stay-ahead-box{top:5rem; left: 0;}
.less-cose-box{bottom:5rem; right: 0;}
.race-figure{position:absolute; right:-40%; bottom:0; z-index:0; height:710px;}
#customer-story {padding: 0 !important;}
#customer-story h2{display:none;}
#customer-story .row {height: 500px; align-items: center;}
#customer-story .col-md-5{width: 100%;}
#customer-story .text-cover {background: rgba(255,255,255,0.8); margin: 0 auto; padding: 2rem; text-align: center;}
#consistent-gui{padding: 0!important;}
#consistent-gui .row{align-items: center; height:400px;}
#consistent-gui h2{display:none;}
#consistent-gui .col-md-5{width: 100%;}
#family-photo-portfolio{text-align:center;}
#family-photo-portfolio h3{display:none;}
#family-photo-portfolio video{margin: 0 auto; width:100% !important; height:auto !important; object-fit: fill !important;}
.videoMobile{display:none;}
.floatDiv{position:fixed; bottom:15%; height:135px; vertical-align:top; z-index:10;}
.showInfoIcon{position:fixed; display:none; cursor: pointer; right:0;}
.showInfoIcon i{font-size:50px; color:#00b2ff;}
.showMsg{position:fixed; background:#fff; box-shadow:2px 0 5px #999;padding:15px; width:250px; right:10px;}
.showMsg .closeBtn{position: absolute; right:-5px; top:-15px; cursor: pointer; width:28px; height: 28px; background:#fff; border-radius:50%; border-color:transparent;}
.showMsg .closeBtn i{font-size:34px; border-radius:50%; color:#00b2ff;position: absolute;top: -4px;right:-4px;}
.showMsg p{font-size:14px; line-height:1.2rem; margin:0;}
.showMsg a.btn {font-size: 13px; margin:10px auto 0; padding: 10px; text-align: center;}
#featured-products h3{display: none;}
#featured-products.zyx-paragraph{padding: 2rem 0 0 !important;}
#featured-products .small-note {font-size: 16px;}
.zyx-paragraph--related-products {padding: 2rem 0 !important;}
.zyx-paragraph--related-products h3 {font-size: 1.55rem;}
#test-kit h3{display: none;}
.benefit-text.border-adjusted {color: #fff !important; border-color: transparent !important;}
.benefit-text.border-adjusted:hover {background-color: transparent !important; color: #fff !important; border-color: transparent !important;}
.hoverPoint .border-adjusted:hover, .hoverPoint .border-adjusted:before {background-color: transparent !important;}


@-webkit-keyframes sonar-effect {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 5px #fff;
  }
  100% {
    box-shadow: 0 0 0 5px #fff, 0 0 10px 15px #fff, 0 0 0 5px #fff;
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes sonar-effect {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 5px #fff;
  }
  100% {
    box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 15px #fff;
    transform: scale(1.5);
    opacity: 0;
  }
}

@-webkit-keyframes sonar-effect1 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 5px #fff;
  }
  100% {
    box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 15px #fff;
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes sonar-effect1 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 5px #fff;
  }
  100% {
    box-shadow: 0 0 0 5px #fff, 0 0 10px 10px #fff, 0 0 0 10px #fff;
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (max-width:1680px) {
    #wifi7-section .img-box picture img {object-position: center right;}
}

@media (max-width:1300px) {
	#consistent-gui{background-position:20% top;}
}

@media (max-width:1100px) {
	#family-photo-portfolio video{max-width:100%;}
}

@media (max-width: 900px) {
    #wifi7-section .img-box{height: 500px;}
}

@media (max-width: 830px) {
	[class*="video-banner-canvas"] .banner-title {width: 80%;}
	.videoDesktop{display:none;}
	.videoMobile{display:block;}
}

@media (max-width: 700px) {
	.opal-box{width:90%; padding:1rem; position: relative !important; margin: 2rem auto; top: auto !important; bottom: auto !important;}
	#wifi7-section .d-flex{height: auto; flex-direction: column-reverse;}
	#wifi7-section .img-box{position:relative;  margin: 2rem auto 1rem; height: 350px; width: 100%; left: 0; right: 0;}
    #wifi7-section .img-box img{height: 350px;}
    #wifi7-section .desc{margin: 0 auto; width:100%; padding: 0;}
}

@media (max-width: 600px) {
    .wifi6-logo img {height: 80px;}
    [class*="video-banner-canvas"] .banner-title {width: 100%; text-align: left;}
	#opal-section .container{padding:0;}
	.race-figure{left:-20%; right:unset;}
	#consistent-gui .col-md-5{left:0; right:unset; background:rgba(0,0,0,0.5); padding:1rem; max-width:90%;}
	#consistent-gui .col-md-5 h3, #consistent-gui .col-md-5 p{color:#fff !important;}
	.circle-box{width: 1px; height:500px; background:#fff; top:10%;}
	.circle-outer, .circle-middle, .circle-inner{display:none;}
	.benefit-portfolio{top: 0;left: -30px;width: auto;}
	.benefit-portfolio a.benefit-text{margin-top: 0;text-align: left;width: 150px;position: absolute;top: 50%;transform: translate(0, -50%);left: 5rem;}
	.benefit-mpro-mesh{top:22%; left:-30px;width: auto;right: unset;}
	.benefit-mpro-mesh a.benefit-text{margin-top: 0;text-align: right;width: 150px;position: absolute;top: 50%;transform: translate(0, -50%);right: 5rem; left:unset;}
	.benefit-opal{top:43%; left:-30px;bottom: unset;width: auto;}
	.benefit-opal a.benefit-text{margin-top: 0;text-align: left;width: 150px;position: absolute;top: 50%;transform: translate(0, -50%);left: 5rem;}
	.benefit-gui{top:65%; left:-30px;bottom: unset;width: auto;}
	.benefit-gui a.benefit-text{margin-top: 0;text-align: right;width: 150px;position: absolute;top: 50%;transform: translate(0, -50%);right: 5rem;}
	.benefit-remoteMgnt{bottom:0;top: unset; left:-30px;width: auto;}
	.benefit-remoteMgnt a.benefit-text{margin-top: 0;text-align: left;width: 150px;position: absolute;top: 50%;transform: translate(0, -50%);left: 5rem; right:unset;}
	.showInfoIcon{display:block;}
	.showMsg{display:none;}
	#customer-story .col-sm-12{padding:1rem; text-align:left;}
	#customer-story .zyx-paragraph__cta {text-align:center;}
	#family-photo-portfolio {text-align:left;}
}

@media (max-width: 400px) {
	.wifi6-logo img {height: 70px;}
}

@media (max-width: 350px) {
	.wifi6-logo img {height: 60px;}
}