/* overview */
h1, #overview h1 {font-size:32px;} 
h2, #overview h2 {font-size:30px;}
h3, #overview h3 {font-size:28px;}
h4, #overview h4 {font-size:26px;}
h5, #overview h5 {font-size:24px;}
h6, #overview h6 {font-size:20px;}
p, #overview p {font-size:18px;}
.container.maxwid {max-width: 1320px !important;}
.bold{font-weight: bold;}
.btn.btn-lg{padding: 0 20px;}
span.section-note{margin-top: 10px;font-size: 15px;font-weight: 300;}


/* Main Banner */
	.banner-section {
		position:relative;
		overflow:hidden;
		height: 40vw;
		background: #fcfcfc url(/sites/zyxel/files/library/assets/products/xs1935-series/XS1935_banner_1920.jpg);
		background-repeat:no-repeat;
		background-position: bottom left;
		background-size:cover;
	}
	.banner-section .banner-text{
		position: absolute;
		left: 15%;
		top: 44%;
		width: 40%;
	}
	@media screen and (max-width:1600px){
		.banner-section .banner-text {
			left: 7%;
			top: 41%;
		}	
	}
	@media screen and (max-width:1300px){
		.banner-section .banner-text {
			left: 5%;
			top: 38%;
		}	
	}

	@media (max-width:1025px){
		.banner-section .banner-text{
			position: absolute;
			left: 4%;
			top: 38%;
		}
	}
	@media (max-width:991px){
		.banner-section .banner-text{
			position: absolute;
			left: 4%;
			top: 32%;
		}
	}
	@media screen and (max-width:767px){	
		.banner-section {
			position:relative;
			overflow:hidden;
			height: 100vw;
			background-position-x: 69%;
			background-position-y: bottom;
			background-size: 195%;
		}
		.banner-section .banner-text{
			position: absolute;
			left: 11%;
			top: 12%;
			width: 80%;
		}	
	}
	@media (max-width: 450px){
		.banner-section{
			height: 110vw;
		}
		.banner-section .banner-text{
			position: absolute;
			left: 11%;
			top: 10%;
			width: 80%;
		}
	}


/* highlights */
	.highlights-section {
		background-color:#000;
	}

	.higtlights .box p {
		color:#fff;
	}
	.higtlights .box>:first-child p{
		word-break: break-word;
	}

	.higtlights .box {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		justify-content: center;
		margin: 0 auto;
		text-align: center;
	}

	.higtlights .box .area {
		width: calc(100% / 5);
		padding: 0 1%;
	}

	.higtlights .box .area img {
		width: 36%!important;
		margin: 0 auto;
		text-align: center;
	}

	.higtlights .box .area p {
		padding: 0 15px;
	}

	.higtlights .box .area p span {
		font-weight: bold;
	}

	@media screen and (max-width: 991px) {
		.higtlights .box {
			width: 90%;
		}	
		.higtlights .box .area {
			width: calc(100% / 2);
		}
		.higtlights .box .area p{
			margin-bottom: 10px;
		}
	}

/* section p-two-col */
	.p-two-col .frame {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 85%;
		gap: 10%;
		margin: 0 auto;
		padding: 5% 0;
	}
	.p-two-col.img-r .frame{
		flex-direction: row-reverse;
	}
	.p-two-col.img-l .frame{
		flex-direction: row;
	}
		
	.p-two-col .content {
	    width: 50%;
	}
		
	.p-two-col .image {
	    width: 50%;	
	}

	.p-two-col .image img {
		padding: 5%;
	}

	.p-two-col .content h3 {
		font-weight: bold;
		padding-bottom: 30px;
	}

	@media screen and (max-width: 1024px) {	}

	@media screen and (max-width: 991px) {
		.p-two-col.img-r .frame,
		.p-two-col.img-l .frame {
			flex-direction: column;
			width: 90%;
			padding: 50px 0;
		}
		.p-two-col .content {
			width: 100%;
			padding: 0;
		}
		.p-two-col .image {
			width: 100%;
			margin-bottom: 50px;
		}
		.p-two-col .image img {
			padding: 0;	
		}	
	}
/* feature nebula-app */
	.nebula-app .frame {
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		align-items: center;
		width: 85%;
		gap: 10%;
		margin: 0 auto;
	}
		
	.nebula-app .content {
	    width: 50%;
	}
		
	.nebula-app .image {
	    width: 50%;	
	}

	.nebula-app .content h2 {
		padding-bottom: 30px;
	}

	.nebula-app .app_icon {
	    width: 70%;
	    margin-left: -2.5%;
	}

	.nebula-app .app_icon img {
	    cursor: pointer;
	}

	@media screen and (max-width: 1400px) {
		.nebula-app {
			padding-top: 60px;
		}
	}

	@media screen and (max-width: 991px) {
		.nebula-app .frame {
			flex-direction: column;
			width: 90%;
		}
		.nebula-app .content {
			width: 100%;
			padding: 0;
		}
		.nebula-app .image {
			width: 100%;
			margin-top: 10px;
		}
	}

	@media screen and (max-width: 501px) {
		.nebula-app .app_icon {
			width: 100%;
		}
	}
/* feature full-bg-section */
	.full-bg-section.powerful{
	    background: #f6f6f6 url('/sites/zyxel/files/library/assets/products/nwa210axv2/NWA210AXv2_GFX6_3024x1410.jpg') no-repeat right center;
	    height: 700px;
	    color: #ffffff;
	    background-size: contain;
	    position: relative;
	    color: #000000;
	}
	.full-bg-section.networkedAV{
	    background: #000000 url('/sites/zyxel/files/library/assets/products/xs1935-series/XS1935_WEB_GFX2_3024x1410.png') no-repeat;
	    height: 800px;
	    background-size: cover;
	    background-position: top right;
	    position: relative;
	    color: #ffffff;
	}
	.full-bg-section.networkedAV .content {
		position: absolute;
		left: 7.5%;
		bottom: 8%;
		width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.full-bg-section.networkedAV .content .av_logo{
		width: 150px;
		height: auto;
	}
	.full-bg-section.powerful .content {
		position: absolute;
	    left: 7.5%;
	    width: 40%;
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}

	.full-bg-section .content h2 {
		padding-bottom: 30px;
	    font-weight: bold;
	}
	.full-bg-section.networkedAV .content a.btn{
		background-color: #d24400;
		color: #ffffff;
	}
	.full-bg-section.powerful .content a.btn{
		background-color: #288719;
		color: #ffffff;
	}

	@media screen and (max-width: 991px) {
		.full-bg-section.networkedAV{
			height: 1200px;
			background-size: 330%;
			background-position: 65% top;
		}
		.full-bg-section.networkedAV .content{
			left: 5%;
			bottom: 50px;
			width: 90%;
		}
	  .full-bg-section.powerful {
	    background: none;
	    height: auto;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding: 50px 0;
	    background-color: #f6f6f6 !important;
	  }

	  .full-bg-section.powerful::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 1/0.85;
		background: #f6f6f6 url('/sites/zyxel/files/library/assets/products/nwa210axv2/NWA210AXv2_GFX6_3024x1410.jpg') no-repeat right;
		background-size: 200% auto;
		}

	  .full-bg-section.powerful .content {
	    position: static;
	    width: 100%;
	    padding: 0 5%;
	  }
	}
	@media screen and (max-width: 767px) {
		.full-bg-section.networkedAV{
			height: 1050px;
		}
	}
	@media screen and (max-width: 450px) {
		.full-bg-section.networkedAV{
			height: 1000px;
		}
		.full-bg-section.networkedAV .content .av_logo{
			width: 90px;
		}
	}

/* tab panes */
	.application-diagram-section .nav-tabs{
		border-bottom:none;
		margin:0 auto;
		display:block;
		/* width:80%; */
		text-align: center;
		padding: 0 1.5em;
	}

	.application-diagram-section .nav>li>a {
		font-size:18px;
	    position: relative;
	    display: block;
	    padding: 5px 2px;
	    margin: 0 15px;
	    border-bottom: 2px solid transparent;
	}

	.application-diagram-section .nav-tabs li{
	    float: none;
	    display: inline-block;
	    margin: 0 15px;
	}

	.application-diagram-section .nav-tabs>li>a:hover{
		color: #288719;
	}
	.application-diagram-section .nav-tabs>li.active>a, 
	.application-diagram-section .nav-tabs>li.active>a:focus, 
	.application-diagram-section .nav-tabs>li.active>a:hover{
	    color: #288719;
	    border-bottom: 2px solid #288719;
	    text-decoration: none;
	}
	.application-diagram-section .tab-content{
		padding-top: 60px;
	}

	@media only screen and (max-width: 1025px){
	.application-diagram-section .nav-tabs{
		width:100%;
		text-align:center;
	}
	}

	@media only screen and (max-width: 991px){
		.section-features{
			padding: 50px 0 !important;
		}
		.application-diagram-section .nav-tabs li {
		    margin-bottom: 10px;
		}
		.application-diagram-section .tab-content{
			padding-top: 30px;
		}
	}
/* in-depth */
	.in-depth {
		position:relative;
		width: 80%;
		left: 10%;
	}
	.in-depth .in-depth-note{
		position: absolute;
		left: 50%;
		top: 10%;
		transform: translateX(-50%);
		font-size: 18px;
		color: #288719;
		font-weight: bold;
	}

	#XS1935-12F .in-depth .image.desktop {
		background:url('/sites/zyxel/files/library/assets/products/xs1935-series/XS1935_WEB_XGS1935-12F_3024x1410.png') no-repeat;
		background-size: 100% auto;
		position:relative;
		aspect-ratio: 1920 / 620;
	}
	#XS1935-12HP .in-depth .image.desktop {
		background:url('/sites/zyxel/files/library/assets/products/xs1935-series/XS1935_WEB_XGS1935-12HP_3024x1410.png') no-repeat;
		background-size:100% auto;
		position:relative;
		aspect-ratio: 1920 / 620;	 
	}
	#XS1935-10 .in-depth .image.desktop {
		background:url('/sites/zyxel/files/library/assets/products/xs1935-series/XS1935_WEB_XGS1935-10_3024x1410.png') no-repeat;
		background-size:100% auto;
		position:relative;
		aspect-ratio: 1920 / 620;
	}

	#XS1935-12F .in-depth .description .tip01  {
		position:absolute;
		top: 55%;
		left: 50%;
	}

	#XS1935-12F .in-depth .description .tip02  {
		position:absolute;
		top: 55%;
		left: 77%;
	}

	#XS1935-12HP .in-depth .description .tip01{
		position:absolute;
		top: 55%;
		left: 77%;
	}
	#XS1935-12HP .in-depth .description .tip02{
		position:absolute;
		top: 55%;
		left: 67%;
	}

	#XS1935-12HP .in-depth .description .tip03 {
		position:absolute;
		top: 55%;
		left: 46%;
	}

	#XS1935-10 .in-depth .description .tip01{
		position:absolute;
		top: 54%;
		left: 45.5%;
	}
	#XS1935-10 .in-depth .description .tip02{
		position:absolute;
		top: 54%;
		left: 77%;
	}


	.in-depth .description .circleBG {
	    height:30px;
	    width:30px;
	    position:absolute;
	    top:50%;
	    left:50%;
	    text-align:center;
	    margin:-30px 0 0 -30px;
	    border-radius:100px;
	    z-index:1
	}

	.in-depth .description .circleBG i {
	    font-size:28px;
	    padding:1px;
	    color: #288719;
	}

	.in-depth .description .circleBG .flash {
	    position:absolute;
		width:100px;
	    height:100px;
	    z-index:-1;
	    left:50%;
	    top:50%;
	    opacity:0;
	    margin:-50px 0 0 -50px;
	    border-radius:100px;
	    -webkit-animation:flash 1.8s infinite;
	    animation:flash 1.8s infinite
	}

	@-webkit-keyframes flash {
	    0%{
	        opacity:1;
	        -webkit-transform:scale(0);
	        transform:scale(0)
	    }
	    100%{
	        opacity:0;
	        -webkit-transform:scale(1);
	        transform:scale(1)
	    }
	}

	@keyframes flash {
	    0%{
	        opacity:1;
	        -webkit-transform:scale(0);
	        transform:scale(0)
	    }
	    100%{
	        opacity:0;
	        -webkit-transform:scale(1);
	        transform:scale(1)
	    }
	}

	.fade.in {
	    opacity:0.9;
	}

	.in-depth .description .white {
	    background-color:rgba(255,255,255,.6);
	}

	.in-depth .description .green {
	    background-color: rgb(40 135 25 / 60%);
	}

	.in-depth .description .look-tooltip .tooltiptext {
	  visibility: hidden;
	  width: auto;
	  white-space: nowrap;
	  background-color: #288719;
	  color: #fff;
	  text-align: center;
	  border-radius: 6px;
	  padding: 10px 20px 8px;
	  position: absolute;
	  z-index: 2;
	  transform: translateX(-55%);
	}

	.in-depth .description .look-tooltip:hover .tooltiptext {
	  visibility: visible;
	}
	.in-depth .description .look-tooltip .tooltiptext span.bold{
		font-size: 24px;
	}
	@media screen and (max-width: 1025px) {
		.in-depth {
			width: 100%;
			left: 0;
		}		
	}

	@media screen and (max-width: 991px) {
		.in-depth {
			width: 110%;
			left: -5%;
		}
		.in-depth .description .look-tooltip .tooltiptext {
			position: absolute;
			bottom: auto;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			margin-top: 10px;
			padding: 8px 12px;
			font-size: 14px;
		}

		.in-depth .description .look-tooltip {
			--pos-x: calc(var(--left, 0%) * 1%);
		}
		#XS1935-12F .in-depth .description .tip01  {
			position:absolute;
			top: 55%;
			left: 51%;
		}

		#XS1935-12F .in-depth .description .tip02  {
			position:absolute;
			top: 55%;
			left: 78%;
		}
		#XS1935-12HP .in-depth .description .tip01{
			position:absolute;
			top: 55%;
			left: 77.5%;
		}
		#XS1935-12HP .in-depth .description .tip02{
			position:absolute;
			top: 55%;
			left: 67.5%;
		}

		#XS1935-12HP .in-depth .description .tip03 {
			position:absolute;
			top: 55%;
			left: 46.3%;
		}

		#XS1935-10 .in-depth .description .tip01{
			position:absolute;
			top: 54%;
			left: 46%;
		}
		#XS1935-10 .in-depth .description .tip02{
			position:absolute;
			top: 54%;
			left: 77%;
		}

	}
	@media screen and (max-width: 640px) {
			.in-depth .in-depth-note {
		        top: -8%;
		    }
	}

	


/* related links */
	.related-links {
		background-color: #fff;
	}

	.related-links h3 {
		font-weight:bold;
		text-align: center;
	}

	.links-section {
		display: flex;
	    flex-direction: row;
	    justify-content: center;
	    width: 100%;
	}

	.links-area ul {
		list-style: none;
	    display: flex;
	    justify-content: space-around;
	}

	.links-area ul li {
		width:30%;
	}

	.links-area .zoom a {
	  display: block;
	  overflow: hidden;
	}

	.links-area .zoom img {
	  display: block;
	  transition: transform 0.3s ease;
	}

	.links-area .zoom:hover img {
	  transform: scale(1.1);
	}

	.links-area h5 a div {
	    color: #010101;
		/* margin-top: 30px; */
		font-size: 20px;
	}

	.links-area h5 a div:hover {
	    color: #288719;
	}

	@media screen and (max-width: 769px) {
		.links-area ul {
		    flex-direction: column;
			padding: 20px 20px 0;
		}
		.links-area ul li {
		    width: 100%;
		    margin-bottom: 30px;
		}
		.links-area .link-text{
			margin-top: -5%;
			z-index: 2;
		}
	}


/* specification */
	.spec-note ol {
		list-style: none;
	}
	.xs1935-series-section-spec .nav-tabs{
		border-bottom:none;
		padding-bottom:50px;
		padding-top:20px;
		margin:0 auto;
		display:block;
		width:100%;
		text-align: center;
	}

	.xs1935-series-section-spec .nav>li>a {
	    position: relative;
	    display: block;
	    padding: 5px 15px;
	}

	.xs1935-series-section-spec .nav-tabs li{
	    float: none;
	    display: inline-block;
	    border-radius: 5px;
	margin-bottom: 10px;
	}

	.xs1935-series-section-spec .nav-tabs>li>a{
		color:#000;
		font-size:18px!important;
	}

	.xs1935-series-section-spec .nav-tabs>li>a:hover{
		color:#288719;
		background-color: transparent;
	    text-decoration: none;
	    border-color: transparent;
	}

	.xs1935-series-section-spec .nav-tabs>li.active>a, 
	.xs1935-series-section-spec .nav-tabs>li.active>a:focus, 
	.xs1935-series-section-spec .nav-tabs>li.active>a:hover{
	    color: #288719;
	    border-bottom: 2px solid #288719;
	    border-top: transparent;
	    border-right: transparent;
	    border-left: transparent;
		font-weight:bold;
	}

	.xs1935-series-section-spec .tab-content ul li{
		font-size: 18px;
	}

	@media only screen and (max-width: 1025px){
	.xs1935-series-section-spec .nav-tabs{
		width:100%;
		text-align:center;
	}
	}

	@media only screen and (max-width: 991px){
	.xs1935-series-section-spec .nav-tabs li {
	    margin-bottom: 10px;
	}
	}


/* features */
	#features .main-basic-content ul{
		margin-left: 20px;
	}
	.features-note {
		padding-top:20px;
	}

	.features-note ul{
		list-style:none;
	}

	.features-note li {
		text-indent: -25px;
	    padding-left: 15px;
	}

	.features-note li:nth-child(1):before {
	    content: "*";
	    margin-right: 0.5em;
	    position: relative;
		padding-right: 11px;
	}

	.features-note li:nth-child(2):before {
	    content: "**";
	    margin-right: 0.4em;
	    position: relative;  
		padding-right: 5px;
	}

	.features-note li:nth-child(3):before {
	    content: "***";
	    margin-right: 0.3em;
	    position: relative;
	}