#top-hero {padding: 0 !important;}
#top-hero .row{height: 500px; align-items: center;}
#top-hero h1{display: none;}
.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: #5a5a5a; 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:#000; 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 {padding-bottom: 350px;}
#overview h3{display: none;}
#video-section {margin-top: -350px; padding: 0 !important;}
#video-section h3{display: none;}
#sana h3{display: none;}
.section-video{margin:0 auto; width: 100%;}
.btn-video-close{display:none; position:absolute; top:-30px; right:-30px; background: none; border: none;}
.btn-video-close i{font-size:50px; color:#fff;}

.videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
}
.videoWrapper43 {
  padding-top: 75%;
}
.videoWrapper169 {
  padding-top: 56%;
}

.videoIframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}
.videoPoster:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right:0;
  transform: translate(0, -50%);
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border: 5px solid #fff;
  border-radius: 100%;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 1%;
  right: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 40px solid #fff;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
}

.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  -webkit-transition-delay: 0s, 800ms;
  -moz-transition-delay: 0s, 800ms;
  transition-delay: 0s, 800ms;
}


/*https://codepen.io/jo-asakura/pen/nhutb*/
.switch-bar {text-align: center; display: flex; justify-content: center; align-items: center; margin-bottom:2rem; position:relative;}
.button-switch [type="checkbox"]:not(:checked), .button-switch [type="checkbox"]:checked {position: absolute; opacity: 1; pointer-events: auto;}
.button-switch {font-size: 1.5em; height: 50px; position: relative; width: 100px;}
.button-switch .switch {-webkit-appearance: none; -moz-appearance: none; appearance: none; height: 0; font-size: 1em; left: 0; line-height: 0; outline: none; position: absolute; top: 0; width: 0;background-color:#fff !important; border:none !important;}
.button-switch .switch:before, .button-switch .switch:after {content: ""; position: absolute;}
.button-switch .switch:before {border-radius: 1.25em; background: #00b2ff; height: 50px; top: 0; transition: background-color 0.25s ease-out 0.1s; width: 100px;}
.button-switch .switch:after {box-shadow: 0 0.0625em 0.375em 0 #666; border-radius: 50%; background: #fefefe; height: 1.5em; transform: translate(0, 0); transition: transform 0.25s ease-out 0.1s; width: 1.5em; left: 0.25rem; top:0.25rem;}
.button-switch .switch:checked:after {transform: translate(1.75em, 0);}
.button-switch .switch#switch-blue:checked:before {background: #00b2ff;}
.switch-bar span{font-weight:500; color:#404040; font-size:1.2rem;}
.switch-bar span.active{color:#00b2ff;}
.text-standalone{margin-right:1rem;}
.text-non-standalone{margin-left:1rem;}

#easy-installation{padding: 0!important;}
#easy-installation .row{min-height: 1000px; align-items: center;}
#easy-installation .col-md-5{width: 100%;}
#easy-installation h2{display: none;}
#easy-installation picture img{object-fit: cover;}
.easy-installation-section{min-height: 820px;padding-top: 2rem;position:relative;}
.easy-installation-section h3{display: block !important;}
.benefit-section{position:relative;}
.benefitx-box{width:250px; height:250px; padding:1rem; text-align:center; display: flex; align-items: center;}
.benefitx-box p.title{margin-bottom:5px; padding:0; font-weight:500;}
.benefitx-box p.desc{font-size:14px; line-height:18px;}
.blue-gradient-bg{background: #5a5a5a; color:#fff;}
.white-bg{background:#fff; box-shadow: #575757 2px 2px 16px 0; color:#5a5a5a;}

#esim h3{display: none;}

.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;
  }
}

/*https://stackoverflow.com/questions/64768438/i-created-a-auto-slideshow-with-html-and-css-but-the-3-dots-are-not-functioning*/
.mySlides {display: none; text-align: center;}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
.slideshow-canvas {height: auto;}
.slideshow-container {max-width: 100%; width: 800px; height: auto; position: relative; margin: auto;}
.slideshow-container .prev, .slideshow-container .next {cursor: pointer; position: absolute; top: 50%; transform: translate(0, -50%); color: #404040; width: auto; transition: 0.6s ease; user-select: none;}
.slideshow-container .prev {left: 0;}
.slideshow-container .next {right: 0;}
.slideshow-container .prev i, .slideshow-container .next i {font-weight: bold; font-size: 4rem;}
.slideshow-container .prev:hover, .slideshow-container .next:hover {color: #00b2ff;}
.slideshow-container .prev:before, .slideshow-container .next:before {background-color: transparent;}
.slideshow-container .text {color: black; font-size: 20px; width: 100%; text-align: center; position: absolute; bottom: -2rem;}
.dot-container {position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;}
.dot {cursor: pointer; height: 15px; width: 15px; margin: 0 5px; background-color: #fff; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.dot.active{background-color: #00b2ff;}

.esim-content {width: auto; padding-right: 4rem;}
.esim-image {width: 340px; max-width: 100%;}
ul#user-friendly-tabs {list-style: none; padding-left: 0;}
ul#user-friendly-tabs li {list-style: none;}
ul#user-friendly-tabs li.selected  a{color: #00b2ff;}
ul#user-friendly-tabs li a {font-weight: normal; color: #404040;}
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{display: block; text-align: center;}


/*Video pop-up*/
.air-video-btn, .installation-video-btn {color: #00b2ff; cursor: pointer;}
.air-video-btn i, .installation-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 .air-video, .popup .installation-video{margin: 0 auto; width:71vw; height:40vw; text-align:center;max-height: calc(100vh - 60px);}
#air-video .close, #installation-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;}

#band-pilot h3{display:none;}
#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;}

#meet-your-5g-deployment-strategies h3 {display: none;}
.deployment-section h3{display:block !important;margin-top: 0 !important;}
.deployment-section video {width: 100%;}

#riding-the-5g-wave-with-zyxel h3{text-align:left;}
#riding-the-5g-wave-with-zyxel .btn:hover {color: #00b2ff !important;}
#award-section h3{display:none;}
.award-cta a{display:inline-flex;line-height: normal;margin-left:15px;}
#featured-products .small-note {font-size: 16px;}


@media (max-width: 830px) {
	.banner-title {width: 80%;}
	#installation-section{height:auto;}
	.easy-installation-section{position:relative;}
	.benefit-section{z-index:10;}
	.benefit-dashboard, .benefit-mapAssistant, .benefit-network, .benefit-accessControl{position:relative; top:0; left:0}
	.benefitx-box{margin-bottom:15px;}
	.gui-image{z-index:0;width:80%; left:0;}
}

@media (max-width: 640px) {
    #top-hero {background: rgba(0,0,0,0.2); color: #fff !important;}
    #top-hero picture img {object-position: 80%;}
    .line-break {display: inline; margin-left:5px;}
	#stay-ahead-of-the-5g-competition {height: auto;}
	.air-video-btn, .installation-video-btn {text-align: center; display: block !important;}
	.benefit-section{margin-top:2rem;}
	.benefitx-box {margin: 0 auto 15px;}
	.gui-image{width:100%; bottom:-5%;}
	.button-switch{width:60px; height:30px;font-size:1em;}
	.button-switch .switch:before{width:60px; height:30px;}
	.button-switch .switch:after{top:0.2rem;}
	.switch-bar span{font-size:16px;}
	.text-non-standalone{line-height:normal;}
	#achieve-lean-operation-with-powerful-remote-management h3 {padding-left: 1rem;}
	#provide-telenor-with-a-competitive-edge-throughout-norway p{text-align:left;}
	#provide-telenor-with-a-competitive-edge-throughout-norway .col-sm-12{padding:1rem;}
	.zyx-tabbed-products__list .zyx-tabbed-products__element{display:block!important;}
	.zyx-tabbed-products__toggle.zyx-link.zyx-link--chevron, .zyx-card__links a span.zyx-tabbed-products__toggle.zyx-link--chevron{display:none !important;}
}

@media (max-width: 500px) {
	.award-logo{display:block; margin:0 auto 2rem;}
    .dot {width: 10px; height: 10px;}
    #overview {padding-bottom: 0;}
    #video-section {margin-top: 0;}
}

/*For slider*/
.swipe {position: relative;width: 100%;height: 500px;margin: 0 auto;overflow: hidden;}
.swipe-wrap {position: relative;}
.swipe-wrap  .swipe-img {float: left;width: 100%;position: relative;height:500px;}
.bannerImg{display:block; height:500px;object-fit: cover; position: absolute; top: 0;}
.mbannerImg{display:none; position: absolute; top: 0;}
.swipe .nav{position: absolute;top: 50%; transform: translate(0, -50%); display: inline-block;cursor: pointer;color: #f6f6f6;}
.swipe .nav.next {right:0}
.swipe .nav.prev {left:0;}
.swipe .nav i{vertical-align: middle; font-size: 80px;}
.bannerCnt{position:absolute; z-index:1; top: 0; width: 100%;}
.bannerCnt .layout-max-width {position: relative;}
.bannerCnt .d-flex {height: 500px;}
.bannerCnt span.space{display:block; line-height:0;}
.bannerCnt-left{position: absolute; left: 0; width:65%;}
.bannerCnt-right{position: absolute; right: 0; width:65%;}
.text-show{display:block !important;}
.text-light{color:#fff;}
.text-dark{color:#404040;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center; margin:0 auto; left:34%;}
.mContent{display:none;}
.dContent{display:block;}

@media only screen and (max-width:1100px) {
    .bannerCnt-left, .bannerCnt-right{width: 90%; left: 0; right: 0; margin: auto;}
}

@media (max-width: 800px) {
    .nav-button span.nav.active{color:#00b2ff;}
}

@media (max-width: 640px){
	.bannerImg{display:none;}
	.mbannerImg{display:block; height:500px;object-fit: cover;}
	.swipe{height:550px;}
	.swipe .nav{top:auto; transform:none; bottom:0;color: #ccc;}
	.swipe .nav i{font-size:2rem;}
	.dContent{display:none;}
	.mContent{display:block;}
}