.systemContainer .poweredBy .powered-logos .SysBadge { background-image: url("/images/3xs/3xs-badge-sprite.jpg?v=18"); background-repeat: no-repeat; }

.systemContainer .poweredBy .powered-logos .SysBadge.intel-i7 { background-position:left -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.intel-i5 { background-position:-52px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.intel-i3 { background-position:-105px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.haswell-i3 { background-position:-105px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.intel { background-position:-157px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.intel-xeon { background-position:-263px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.amd { background-position:-210px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.amd-fx { background-position:-210px -35px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.amda4 { background-position:-1464px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.amda8 { background-position:-1340px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.amda6 { background-position:-1402px -35px;}
.systemContainer .poweredBy .powered-logos .SysBadge.amda10 { background-position:-1275px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.tesla { background-position:-474px -35px; width:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.celeron { background-position:-368px -35px; width:49px; }
.systemContainer .poweredBy .powered-logos .SysBadge.pentium { background-position:-315px -35px; width:49px; }
.systemContainer .poweredBy .powered-logos .SysBadge.nvidia-sli { background-position:-420px -35px; width:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.readyship { background-position:-529px -35px; width:66px; text-indent:66px; }
.systemContainer .poweredBy .powered-logos .SysBadge.i5vpro-3rd { background-position:-602px -35px; width:55px; text-indent:55px; }
.systemContainer .poweredBy .powered-logos .SysBadge.i3-3rd { background-position:-661px -35px; width:56px; text-indent:56px; }
.systemContainer .poweredBy .powered-logos .SysBadge.i5-3rd { background-position:-721px -35px; width:56px; text-indent:56px; }
.systemContainer .poweredBy .powered-logos .SysBadge.i7-3rd { background-position:-781px -35px; width:56px; text-indent:56px; }
.systemContainer .poweredBy .powered-logos .SysBadge.i5vpro-4th { background-position:-841px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.nextday { background-position:-947px -35px; width:50px; text-indent:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.crossfire { background-position:-894px -35px; width:49px; text-indent:49px; }
.systemContainer .poweredBy .powered-logos .SysBadge.geforce { background-position:-1002px -35px; width:47px; text-indent:47px; }
.systemContainer .poweredBy .powered-logos .SysBadge.radeon { background-position:-1054px -35px; }
.systemContainer .poweredBy .powered-logos .SysBadge.quadro { background-position:-1106px -29px; width:51px; text-indent:51px; }
.systemContainer .poweredBy .powered-logos .SysBadge.z97 { background-position:-1165px -35px; width:50px; text-indent:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.grid { background-position:-1219px -34px; width:50px; text-indent:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.gsync { background-position:-1522px -35px; width:50px; text-indent:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.skylakei7 { background-position:-1639px -35px; width:50px; text-indent:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.skylakei5 { background-position:-1581px -35px; width:50px; text-indent:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.skylakei3 { background-position:-1696px -35px; width:50px; text-indent:50px; }
.systemContainer .poweredBy .powered-logos .SysBadge.vrready { background-position:-1864px -35px; width:106px; text-indent:110px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.amd-vr { background-position:-1750px -35px; width:50px; text-indent:85px; }
.systemContainer .poweredBy .powered-logos .SysBadge.quadro-vr { background-position:-150px -240px; width:82px; text-indent:85px; }
.systemContainer .poweredBy .powered-logos .SysBadge.amd-athlon { background-position:-1801px -35px; width:57px; text-indent:85px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.qnap { background-position:-335px -174px; width:76px; text-indent:85px; height:40px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.synology { background-position:-421px -174px; width:90px; text-indent:90px; height:40px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.amd-ryzen { background-position:-1975px -35px; width:55px; text-indent:90px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.corex9 { background-position:-263px -233px; width:49px; text-indent:90px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.corex7 { background-position:-315px -233px; width:49px; text-indent:90px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.corex5 { background-position:-368px -233px; width:49px; text-indent:90px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.tdripper { background-position:-427px -233px; width:63px; height:50px; text-indent:90px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.amdepyc { background-position:-499px -233px; width:60px; height:50px; text-indent:90px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.geforcertx { background-position:-515px -174px; width:48px; text-indent:170px; height:48px; }
.systemContainer .poweredBy .powered-logos .SysBadge.coffeei9 { background-position:-566px -233px; width:49px; height:49px; text-indent:90px;  }
.systemContainer .poweredBy .powered-logos .SysBadge.corei3gen { background-position:-628px -233px; width:50px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.corei5gen { background-position:-689px -233px; width:52px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.corei7gen { background-position:-752px -233px; width:52px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.corei9gen { background-position:-814px -233px; width:52px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.Userful { background-position:-720px -168px; width:63px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.Philips { background-position:-676px -168px; width:38px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.beabloo { background-position:-191px -165px; width:89px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.corsairicu { background-position:-794px -168px; width:72px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.icueLink { background-position:-951px -168px; width:80px; height:49px; text-indent:90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.winEleven { background-position:-955px -234px; width: 48px; height: 48px; text-indent: 90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.asusPba { background-position:-570px -174px; width: 50px; height: 49px; text-indent: 90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.asusPbaBlu { background-position:-623px -174px; width: 50px; height: 49px; text-indent: 90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.peakAio { background-position:-876px -170px; width: 68px; height: 48px; text-indent: 90px; }
.systemContainer .poweredBy .powered-logos .SysBadge.unitree { background-position: -1248px -94px; width: 125px; text-indent: 170px; height: 48px; }
.systemContainer .poweredBy .powered-logos .SysBadge.quibic { background-position: -1042px -169px; width: 75px; text-indent: 170px; height: 47px; }
.systemContainer .poweredBy .powered-logos .SysBadge.fanatec { background-position: -1127px -169px; width: 90px; text-indent: 170px; height: 47px; }
.systemContainer .poweredBy .powered-logos .SysBadge.nzxt { background-position: -1014px -233px; width: 92px; text-indent: 170px; height: 48px; }

.hpc .formfactor-training a:after {  content:'GPU Accelerated Servers'; margin-left:-58px; background-color:#fff; padding-left:7px; }
.servers .formfactor-training a:after {  content:'GPU Servers'; margin-left:-58px; background-color:#fff; padding-left:7px; }

/* intel ultra badges */
.systemContainer .poweredBy .powered-logos .SysBadge.icultra5,
.systemContainer .poweredBy .powered-logos .SysBadge.icultra7,
.systemContainer .poweredBy .powered-logos .SysBadge.icultra9 { 
    background: url("/images/3xs/Powered-By-Badges/intel-badges-24-on.webp") no-repeat;
    background-size: 800px 400px;
    width: 48px; 
    height: 48px; 
    text-indent: 90px;
}

.systemContainer .poweredBy .powered-logos .SysBadge.icultra5 { 
    background-position:0 0; 
}

.systemContainer .poweredBy .powered-logos .SysBadge.icultra7 { 
    background-position:-56px 0; 
}

.systemContainer .poweredBy .powered-logos .SysBadge.icultra9 { 
    background-position:-112px 0; 
}


/* RTX Studio */
.rtxstudiop .systemContainer .poweredBy .powered-logos .SysBadge.geforcertx { 
    background-image: url("/images/3xs/geforce-rtx-studio.png?v=1"); 
    background-repeat: no-repeat; 
    background-size: 181px 48px;  
    background-position:center top; 
    width:181px;  
    height:48px; 
    text-indent: 190px;
}


/* Corsair Icue */
.config #overview .poweredBy ul li.corsairicu {  
    background-image: url("/images/3xs/icue-logo.png?v=1"); 
    background-repeat: no-repeat;  
    background-size:53px 28px; 
    width: 53px; 
    height: 28px; 
}

.config .poweredBy ul li.nzxt {
    background-position: -12px -142px;
}

/*### GLOBAL START ###*/
.threexs {
    --systems-black:#000001;
    --systems-white:#FFFFFF;
    --systems-lightGrey:#E9ECEF;
    --systems-darkGrey:#BCBEC0;
    --scan-optic-blue:hsl(214, 100%, 50%);
	--scan-optic-yellow:hsl(68, 98%, 51%);
    --center-container-wrap:1800px;
    --max-text-contain:1440px;
    overflow: hidden;
	font-size: 13px;
}

	@media (max-width:1800px) {
		.threexs {
			overflow: hidden;
		}
	}


.threexs .seo.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.threexs .grey-bg {
	background-color: #F4F5F6;
}
  
.threexs p.bodyText {
    font-size: 0.9em;
    font-family: "Poppins-Regular", sans-serif;
    line-height: 1.8em;
    padding: 1em 0;
}

/*### MARGIN TOP & BOTTOM CLASSES ###*/
.threexs .margin0em {
    margin: 0em auto;
}

.threexs .margin1em {
    margin: 1em auto;
}

.threexs .margin2em {
    margin: 2em auto;
}

.threexs .margin3em {
    margin: 3em auto;
}

.threexs .margin4em {
    margin: 4em auto;
}

.threexs .margin5em {
    margin: 5em auto;
}

.threexs .margin6em {
	margin: 6em auto;
}

.threexs .margin7em {
	margin: 7em auto;
}

.threexs .margin8em {
	margin: 8em auto;
}

.threexs .margin9em {
	margin: 9em auto;
}

.threexs .margin10em {
	margin: 10em auto;
}
/*### MARGIN TOP & BOTTOM CLASSES ###*/

/*### PADDING TOP & BOTTOM CLASSES ###*/
.threexs .padding0em {
    padding-top: 0;
	padding-bottom: 0;
}

.threexs .padding1em {
    padding-top: 1em;
	padding-bottom: 1em;
}

.threexs .padding2em {
    padding-top: 2em;
	padding-bottom: 2em;
}

.threexs .padding3em {
    padding-top: 3em;
	padding-bottom: 3em;
}

.threexs .padding4em {
    padding-top: 4em;
	padding-bottom: 4em;
}

.threexs .padding5em {
    padding-top: 5em;
	padding-bottom: 5em;
}

.threexs .padding6em {
    padding-top: 6em;
	padding-bottom: 6em;
}

.threexs .padding7em {
    padding-top: 7em;
	padding-bottom: 7em;
}

.threexs .padding8em {
    padding-top: 8em;
	padding-bottom: 8em;
}

.threexs .padding9em {
    padding-top: 9em;
	padding-bottom: 9em;
}

.threexs .padding10em {
    padding-top: 10em;
	padding-bottom: 10em;
}
/*### PADDING TOP & BOTTOM CLASSES ###*/



/*### SECTION HEADER START ###*/
.threexs .textContainer.center {
	text-align: center;
	padding-bottom: 2.5em;
}

.threexs .textContainer h4 {
	font-family: "Poppins-Bold", sans-serif;
	color: var(--systems-black);
	font-size: 2.3em;
	margin: 0 0 0.5em 0;
}

.threexs .textContainer p {
	font-family: "Poppins-Regular", sans-serif;
	color: var(--systems-black);
	font-size: 1.1em;
}

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

		.threexs .textContainer h4 {
			font-size: 2em;
		}

	}

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

		.threexs .textContainer h4 {
			padding-bottom: 20px;
		}

		.threexs .textContainer p {
			display: none;
		}

	}
/*### SECTION HEADER END ###*/

 
/*### GLOBAL END ###*/

.skip-link {
	position: fixed;
	top: 1em;
	left: 1em;
	z-index: 10000;
	padding: 0.75em 1em;
	color: #000;
	background: #fff;
	transform: translateY(calc(-100% - 1em));
}

.skip-link:focus {
	transform: translateY(0);
}


/*### HEADER START ###*/
.threexs .headerSplit.template {
	background: #000000 url("https://placehold.co/2500x500/000/ccc") no-repeat;
	background-position: center;
	background-size: contain;
}

.threexs .headerSplit .frameWrap {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--center-container-wrap);
	height: 500px;
}

.threexs .headerSplit .frameWrap .textBox,
.threexs .headerSplit .frameWrap .systemBox {
	display: block;
	width: 50%;
	box-sizing: inherit;
	padding: 0;
	height: 100%;
	position: relative;
}

.threexs .headerSplit .frameWrap .textBox {
	position: relative;
	margin-left: 10px;
}


.threexs .headerSplit .frameWrap .systemBox {
    height: 100%;
    min-height: 360px;
}

.threexs .headerSplit .frameWrap .textBox > div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}


.threexs .headerSplit .frameWrap .textBox > div h3 {
    font-family: "Poppins-Bold", sans-serif;
    line-height: 1em;
    margin: 0;
    padding: 0;
	color: var(--systems-black);
	text-transform: none;
    font-size: 3.5em;
	max-width: none;
}

.threexs .headerSplit .frameWrap .textBox > div h4 {
    font-family: "Poppins-Bold", sans-serif;
    margin: 0;
    padding: 0.3em 0 0 0;
    font-size: 2.5em;
    line-height: 1.3em;
	color: var(--systems-black);
	font-weight: normal;
}

.threexs .headerSplit .frameWrap .textBox > div span.smallhead {
	display: inline-block;
    font-family: "Poppins-Regular", sans-serif;
    margin: 0;
    padding: 0.5em 0 0 0;
    font-size: 1.2em;
    line-height: 1.3em;
	color: var(--systems-black);
	font-weight: normal;
}

.threexs .headerSplit .frameWrap .textBox.whitecolour > div h3, .threexs .headerSplit .frameWrap .textBox.whitecolour > div h4, .threexs .headerSplit .frameWrap .textBox.whitecolour > div span {
	color: var(--systems-white);
}

.threexs .headerSplit .frameWrap .textBox > div h3 .highlight, .threexs .headerSplit .frameWrap .textBox > div h4 .highlight, .threexs span.highlight {
    display: inline-block;
    padding: 0.1em 0.3em;
    font-style: unset;
    color: #000001;
    background-color: #FFFFFF;
}

.threexs .headerSplit .frameWrap .textBox > div h3 .highlightopp, .threexs .headerSplit .frameWrap .textBox > div h4 .highlightopp, .threexs span.highlightopp {
    display: inline-block;
    padding: 0.1em 0.3em;
    font-style: unset;
    color: #ffffff;
    background-color: #000001;
}

.threexs .systemBox .powerBy-block-float {
	font-family: "Poppins-Regular", sans-serif;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    color: #FFFFFF;
    border: solid rgb(51, 51, 51) 1px;
    font-size: 0.7em;
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 140px;
    box-sizing: border-box;
	float: right;
}

.threexs .systemBox .powerBy-block-float img {
	display: block;
	margin: 5px auto;
}

.threexs .systemBox .powerBy-block-float.logoOnly {
	backdrop-filter: none;
    padding: 0;
    background: none;
    border: none;
	margin: 0;
	top: 0;
	bottom: auto;
}

.threexs .systemBox .powerBy-block-float.logoOnly img {
	width: 100px;
	margin: 0;
}


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

	.threexs .headerSplit.gaming {
		background-size: cover;
	}
	.threexs .headerSplit .frameWrap {
		max-width: var(--max-text-contain);	
	}
	.threexs .headerSplit .frameWrap .systemBox {
		background-position: left 0;
		background-size: 600px;
		height: 100%;
	}
	.threexs h3 {
		font-size: 3em;
	}
	.threexs h4 {
		font-size: 1.2em;

	}
	
}

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

	.threexs .headerSplit .frameWrap {
		max-width: var(--max-text-contain);	
	}
	.threexs h3 {
		font-size: 3em;
	}
	.threexs h4 {
		font-size: 1.2em;

	}

	.threexs .headerSplit .frameWrap .textBox > div {
		padding-left: 20px;
	}
	
}

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

	.threexs .headerSplit .frameWrap {
		max-width: var(--max-text-contain);	
		height: 300px;
	}
	.threexs .headerSplit .frameWrap .systemBox {
		background-position: top;
		background-size: 400px;
		height: 100%;
		min-height: 300px;
	}
	

	.threexs .headerSplit .frameWrap .textBox > div h3 {
		font-size: 2.5em;
	}
	.threexs .headerSplit .frameWrap .textBox > div h4 {
		font-size: 1.5em;
	}
	.threexs .headerSplit .frameWrap .textBox > div span.smallhead {
		font-size: 1.1em;
	}

	.threexs .headerSplit .frameWrap .textBox > div .sepLine {
		margin: 15px 0 10px 0;
	}

	.threexs .systemBox .powerBy-block-float {
		display: none;
	}
	
}

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

	.threexs .headerSplit .frameWrap .textBox > div .sepLine {
		display: none;
	}
	.threexs .headerSplit h4 {
		display: none;
	}
	.threexs .headerSplit .frameWrap .systemBox {
		background-position: 20px 13px;
	}
}

/*### HEADER END ###*/



/*### TOP GRID START ###*/
.threexs .topgrid-width {
	max-width: var(--center-container-wrap);
	padding: 0 1.5em;
}

.threexs .topgrid-width .grid-cont {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 35px;
	grid-row-gap: 35px;
}

.threexs .topgrid-width .grid-cont > a {
	background-color: #BDBDBD;
	height: 500px;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
}

.threexs .topgrid-width .grid-cont > div {
	position: relative;
	height: 500px;
}
.threexs .topgrid-width .grid-cont > div .introtext {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.threexs .topgrid-width .grid-cont > div .introtext img {
	width: 155px;
}
.threexs .topgrid-width .grid-cont > div .introtext h5 {
	font-family: "Poppins-SemiBold", sans-serif;
	font-size: 1.2em;
	margin: 0;
	padding: 0.5em 0 1em 0;
}
.threexs .topgrid-width .grid-cont > div .introtext p {
	font-family: "Poppins-Regular", sans-serif;
	font-size: 1.2em;
	line-height: 1.8em;
	padding-right: 1em;
}

.threexs .topgrid-width .grid-cont > a img {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: clamp(250px, 18vw, 320px);
	transition: all 0.5s ease-in-out;
}

.threexs .topgrid-width .grid-cont > a .coverImage {
	top: 50%;
    width: max-content;
}

.threexs .topgrid-width .grid-cont > a:hover img {
	transform: translateX(-50%) translateY(-50%) scale(1.05);
}

.threexs .topgrid-width .grid-cont > a > div {
	position: absolute;
	width: 100%;
	padding: 2em 2em 0 2em;
	bottom: 3.5em;
	box-sizing: border-box;
}

.threexs .topgrid-width .grid-cont > a > div h5 {
	text-align: center;
	font-family: "Poppins-Bold", sans-serif;
	font-size: clamp(1.375rem, 1.1576rem + 1.087vw, 1.8rem);
	line-height: 1.2em;
	color: var(--systems-white);
	margin: 0;
	padding: 0;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

.threexs .topgrid-width .grid-cont > a > div span {
	font-family: "Poppins-Bold", sans-serif;
	font-size: 1em;
	display: table;
	margin: 2em auto 0 auto;
	background: var(--systems-white);
	color: var(--systems-black);
	padding: 0.8em 2.5em;
	border-radius: 5em;
	text-align: center;
}
.threexs .topgrid-width .grid-cont > a:hover > div span {
	background: var(--scan-optic-blue);
	color: var(--systems-white);
}

.threexs .topgrid-width .grid-cont > a.dark > div h5, .threexs .topgrid-width .grid-cont > a.dark > div p {
	color: var(--systems-white);
}


.threexs .topgrid-width .div1 {
	grid-area: 1 / 1 / 2 / 2;
}
.threexs .topgrid-width .div2 {
	grid-area: 1 / 2 / 2 / 3;
}
.threexs .topgrid-width .div3 {
	grid-area: 1 / 3 / 2 / 4;
}
.threexs .topgrid-width .div4 {
	grid-area: 1 / 4 / 2 / 5;
}
.threexs .topgrid-width .div5 {
	grid-area: 2 / 1 / 3 / 2;
}
.threexs .topgrid-width .div6 {
	grid-area: 2 / 2 / 3 / 3;
}
.threexs .topgrid-width .div7 {
	grid-area: 2 / 3 / 3 / 4;
}
.threexs .topgrid-width .div8 {
	grid-area: 2 / 4 / 3 / 5;
}


.threexs .topgrid-width.sixblocks .div1 {
	grid-area: 1 / 1 / 2 / 2;
}
.threexs .topgrid-width.sixblocks .div2 {
	grid-area: 1 / 2 / 2 / 3;
}
.threexs .topgrid-width.sixblocks .div3 {
	grid-area: 1 / 3 / 2 / 4;
}
.threexs .topgrid-width.sixblocks .div4 {
	grid-area: 1 / 4 / 2 / 5;
}
.threexs .topgrid-width.sixblocks .div5 {
	grid-area: 2 / 1 / 3 / 2;
    background: white;
    box-shadow: none;
    pointer-events: none;
}
.threexs .topgrid-width.sixblocks .div6 {
	grid-area: 2 / 2 / 3 / 3;
}
.threexs .topgrid-width.sixblocks .div7 {
	grid-area: 2 / 3 / 3 / 4;
}
.threexs .topgrid-width.sixblocks .div8 {
	grid-area: 2 / 4 / 3 / 5;
}


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

	.threexs .topgrid-width {
		max-width: var(--max-text-contain);
	}
	.threexs .topgrid-width .grid-cont > a > div h5 {
		padding: 0;
	}

}

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

	.threexs .topgrid-width .grid-cont {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}

	.threexs .topgrid-width .grid-cont > div {
		position: relative;
		height: 400px;
	}

	.threexs .topgrid-width .grid-cont > a {
		height: 400px;
	}

	.threexs .topgrid-width .div1 { grid-area: 1 / 1 / 2 / 2; }
	.threexs .topgrid-width .div2 { grid-area: 1 / 2 / 2 / 3; }
	.threexs .topgrid-width .div3 { grid-area: 1 / 3 / 2 / 4; }
	.threexs .topgrid-width .div4 { grid-area: 2 / 1 / 3 / 2; }
	.threexs .topgrid-width .div5 { grid-area: 2 / 2 / 3 / 3; }
	.threexs .topgrid-width .div6 { grid-area: 2 / 3 / 3 / 4; }
	.threexs .topgrid-width .div7 { grid-area: 3 / 1 / 4 / 2; }
	.threexs .topgrid-width .div8 { grid-area: 3 / 2 / 4 / 3; }

	.threexs .topgrid-width.sixblocks .div1 { grid-area: 1 / 1 / 2 / 2; }
	.threexs .topgrid-width.sixblocks .div2 { grid-area: 1 / 2 / 2 / 3; }
	.threexs .topgrid-width.sixblocks .div3 { grid-area: 1 / 3 / 2 / 4; }
	.threexs .topgrid-width.sixblocks .div4 { grid-area: 2 / 1 / 3 / 2; }
	.threexs .topgrid-width.sixblocks .div5 { grid-area: 3 / 2 / 4 / 3; }
	.threexs .topgrid-width.sixblocks .div6 { grid-area: 2 / 2 / 3 / 3; }
	.threexs .topgrid-width.sixblocks .div7 { grid-area: 2 / 3 / 3 / 4; }
	.threexs .topgrid-width.sixblocks .div8 { grid-area: 3 / 1 / 4 / 2; }

}

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

	.threexs .topgrid-width .grid-cont {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
	.threexs .topgrid-width .grid-cont > div {
		position: relative;
		height: 375px;
	}
	.threexs .topgrid-width .grid-cont > a {
		height: 375px;
	}

	.threexs .topgrid-width .grid-cont > div .introtext h5 {
		font-family: "Poppins-SemiBold", sans-serif;
		font-size: 1.1em;
	}
	.threexs .topgrid-width .grid-cont > div .introtext p {
		font-size: 1.1em;
	}

	.threexs .topgrid-width .div1 { grid-area: 1 / 1 / 2 / 2; }
	.threexs .topgrid-width .div2 { grid-area: 1 / 2 / 2 / 3; }
	.threexs .topgrid-width .div3 { grid-area: 2 / 1 / 3 / 2; }
	.threexs .topgrid-width .div4 { grid-area: 2 / 2 / 3 / 3; }
	.threexs .topgrid-width .div5 { grid-area: 3 / 1 / 4 / 2; }
	.threexs .topgrid-width .div6 { grid-area: 3 / 2 / 4 / 3; }
	.threexs .topgrid-width .div7 { grid-area: 4 / 1 / 5 / 2; }
	.threexs .topgrid-width .div8 { grid-area: 4 / 2 / 5 / 3; }

	.threexs .topgrid-width.sixblocks .div1 { grid-area: 1 / 1 / 2 / 2; }
	.threexs .topgrid-width.sixblocks .div2 { grid-area: 1 / 2 / 2 / 3; }
	.threexs .topgrid-width.sixblocks .div3 { grid-area: 2 / 1 / 3 / 2; }
	.threexs .topgrid-width.sixblocks .div4 { grid-area: 2 / 2 / 3 / 3; }
	.threexs .topgrid-width.sixblocks .div5 { grid-area: 4 / 2 / 5 / 3; }
	.threexs .topgrid-width.sixblocks .div6 { grid-area: 3 / 1 / 4 / 2; }
	.threexs .topgrid-width.sixblocks .div7 { grid-area: 3 / 2 / 4 / 3; }
	.threexs .topgrid-width.sixblocks .div8 { grid-area: 4 / 1 / 5 / 2; }

	.threexs .topgrid-width .grid-cont > a > div {
		padding: 2em 0.5em 0 0.5em;
	}
	.threexs .topgrid-width .grid-cont > a > div h5 {
		padding: 0;
	}
	.threexs .topgrid-width .grid-cont > a > div span {
		font-size: 0.9em;
	}
}

@media screen and (max-width: 550px) {
	.threexs .topgrid-width .grid-cont > a > div span {
		font-size: 0.8em;
	}
}

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

	.threexs .topgrid-width .grid-cont {
		display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-rows: repeat(1fr);
	}

	.threexs .topgrid-width .div1, 
	.threexs .topgrid-width .div2, 
	.threexs .topgrid-width .div3, 
	.threexs .topgrid-width .div4, 
	.threexs .topgrid-width .div5, 
	.threexs .topgrid-width .div6, 
	.threexs .topgrid-width .div7, 
	.threexs .topgrid-width .div8 { grid-area: auto; }

	.threexs .topgrid-width.sixblocks .div1, 
	.threexs .topgrid-width.sixblocks .div2, 
	.threexs .topgrid-width.sixblocks .div3, 
	.threexs .topgrid-width.sixblocks .div4, 
	.threexs .topgrid-width.sixblocks .div6, 
	.threexs .topgrid-width.sixblocks .div7, 
	.threexs .topgrid-width.sixblocks .div8 { grid-area: auto; }

	.threexs .topgrid-width.sixblocks .div5 {
		display: none;
	}
}

@media screen and (max-width: 520px) {
    .threexs .topgrid-width .grid-cont {
        grid-template-rows: auto;
    }

    .threexs .topgrid-width .grid-cont > div.div1 {
        height: auto;
        padding: 1em 0;
    }

    .threexs .topgrid-width .grid-cont > div.div1 .introtext {
        position: static;
        top: auto;
        transform: none;
    }
}
/*### TOP GRID END ###*/







.manfSystems {
	width: auto;
	max-width: var(--center-container-wrap);
	padding: 0 1.5em;
}

.manfSystems .blockWrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 40px;
	grid-row-gap: 0px;	
	margin-top: 25px;
}

.manfSystems .blockWrap .block {
	text-decoration: none;
}

.manfSystems .blockWrap .block .imageWrap {
	background: var(--systems-darkGrey);
	height: 250px;
	overflow: hidden;
	border-radius: 5px;
}

.manfSystems .blockWrap .block .imageWrap img {
	display: block;
	transform: scale(1);
	transition: all 0.5s ease-in-out;
	width: 100%;
}

/* HOVER */
.manfSystems .blockWrap .block:hover .imageWrap img {
	transform: scale(1.05);
}
/* HOVER */

.manfSystems .blockWrap .block .blocktext {
	padding: 20px 0;
	position: relative;
}
.manfSystems .blockWrap .block .blocktext h5 {
	font-family: "Poppins-Bold", sans-serif;
	color: var(--systems-black);
	font-size: 1.5em;
	margin: 0;
}

.manfSystems .blockWrap .block .blocktext p {
	font-family: "Poppins-Regular", sans-serif;
	color: var(--systems-black);
	font-size: 1.1em;
	padding: 10px 0 0 0;
}

.manfSystems .blockWrap .block .blocktext .arrow {
	position: absolute;
	right: 0;
	bottom: 20px;
	width: 38px;
	height: 38px;
	background-color: var(--systems-lightGrey);
	border-radius: 38px;
	/* transition: all 0.5s ease-in-out; */
}

.manfSystems .blockWrap .block .blocktext .arrow:after {
	content: "\e916";
	font-family:"scanicons", sans-serif;
	font-size: 20px;
	color: var(--scan-optic-blue);
	display: block;
	padding: 9px 10px;
	font-style: normal;
}

/* HOVER */
.manfSystems .blockWrap .block:hover .blocktext .arrow {
	background-color: var(--scan-optic-blue);
}

.manfSystems .blockWrap .block:hover .blocktext .arrow:after {
	color: var(--systems-lightGrey);
}
/* HOVER */

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

	.manfSystems {
		max-width: var(--max-text-contain);
	}

	.manfSystems .blockWrap .block .imageWrap {
		height: auto;
	}

}

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

	.manfSystems .blockWrap .block .blocktext p {
		display: none;
	}

	.manfSystems .blockWrap .block .blocktext .arrow {
		bottom: 10px;
	}

}

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

	.manfSystems .blockWrap {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 20px;
	}

	.manfSystems .blockWrap .block .imageWrap {
		height: 200px;
	}

}

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

	.manfSystems .blockWrap .block .imageWrap {
		height: 155px;
	}

}



/*### VIDEO BANNER ###*/
.threexs .videoBanner {
    display: block;
	position: relative;
	overflow: hidden;
    background-color: var(--systems-black);
}

.threexs .videoBanner video {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 0;
}
.threexs .videoBanner video img {
	width: 100%;
	height: 100%;
	display: block;
}

.threexs .videoBanner:after {
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
}
.threexs .videoBanner .bannerWrapper {
	box-sizing: border-box;
	overflow: hidden;
	max-width: 1480px;
	height: 600px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 1;
}

.threexs .videoBanner .headContent {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;
	width: 100%;
}

.threexs .videoBanner .leftAlign {
	width: 50%;
}

.threexs .videoBanner .leftAlign h5.homeStrapLine {
	font-size: 2.7em;
	color: #fff;
	padding: 0;
	font-family: "Poppins-Bold", sans-serif;
	margin: 0;
	line-height: 1.1em;
}

.threexs .videoBanner .leftAlign p {
	font-size: 1.3em;
	color: #fff;
	padding: 1em 0;
	font-family: inherit;
	line-height: 1.4em;
	max-width: 500px;
}

.threexs .videoBanner .leftAlign span.button {
    display: table;
    color: var(--systems-white);
    border: 2px solid var(--systems-white);
    border-radius: 100vw;
    font-family: "Poppins-SemiBold", sans-serif;
    font-size: 1.1em;
    padding: 0.5em 1.5em;
}

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

    .threexs .videoBanner video {
        width: auto;
    }
    .threexs .videoBanner .bannerWrapper {
        height: 450px;
    }

}


@media screen and (max-width: 900px) {
	.threexs .videoBanner .leftAlign {
		width: 80%;
	}
    .threexs .videoBanner .leftAlign h5.homeStrapLine {
        font-size: 2.3em;
		padding-bottom: 1em;
    }
    .threexs .videoBanner .leftAlign p {
        display: none;
    }

}
/*### VIDEO BANNER ###*/

.threexs .splitBanner {
	width: 100%;
    display: flex;
	flex-wrap: nowrap;
}

.threexs .splitBanner .splitblocks {
    display: block;
	width: 50%;
	position: relative;
	overflow: hidden;
    background-color: var(--systems-black);
}
.threexs .splitBanner .splitblocks:last-child {
	background-color: var(--systems-darkGrey);
}
.threexs .splitBanner video, .threexs .splitBanner .liveimg {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 0;
}
.threexs .splitBanner video img {
	width: 100%;
	height: 100%;
	display: block;
}

/* .threexs .splitBanner a:after {
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
} */
.threexs .splitBanner .bannerWrapper {
	box-sizing: border-box;
	overflow: hidden;
	max-width: 1480px;
	height: 600px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 1;
}

.threexs .splitBanner .leftAlign {
	position: absolute;
	left: 4em;
	bottom: 4em;
	width: 75%;
}

.threexs .splitBanner .leftAlign h5 {
	font-size: 2.7em;
	color: #fff;
	padding: 0;
	font-family: "Poppins-Bold", sans-serif;
	margin: 0;
	line-height: 1.1em;
}

.threexs .splitBanner .leftAlign p {
	font-size: 1.2em;
	line-height: 1.8em;
	color: #fff;
	padding: 1em 0;
	font-family: inherit;
	line-height: 1.4em;
	max-width: 750px;
}

.threexs .splitBanner .leftAlign .livelinks {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.threexs .splitBanner .leftAlign .livelinks p {
	flex-shrink: 0;
	padding-right: 1em;
}
.threexs .splitBanner .leftAlign .livelinks a {
	width: min-content;
}
.threexs .splitBanner .leftAlign .livelinks a img {
	display: block;
	height: 27px;
	margin-left: 2em;
	transform: scale(1);
	transition: transform 0.5s ease;
}
.threexs .splitBanner .leftAlign .livelinks a:hover img {
	transform: scale(1.2);
}

.threexs .splitBanner .leftAlign span.button {
	font-family: "Poppins-Bold", sans-serif;
	font-size: 1em;
	display: table;
	margin: 1em 0 0 0;
	background: var(--systems-white);
	color: var(--systems-black);
	padding: 0.8em 2.5em;
	border-radius: 5em;
	text-align: center;
}
.threexs .splitBanner a:hover .leftAlign span.button {
	background: var(--scan-optic-blue);
	color: var(--systems-white);
}

@media (max-width:2200px) {
	.threexs .splitBanner video {
		width: auto;
		height: 600px;
	}
}
@media (max-width:1500px) {
	.threexs .splitBanner .liveimg {
		width: auto;
		height: 600px;
	}
}
@media (max-width:850px) {
	.threexs .splitBanner {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.threexs .splitBanner .splitblocks {
		display: block;
		width: 100%;
		position: relative;
		overflow: hidden;
		background-color: var(--systems-black);
		margin-top: 0;
	}
	.threexs .splitBanner .leftAlign .livelinks {
		flex-wrap: wrap;
	}
}
/*### BANNERS RIGHT TEXT START ###*/





/*### CAROUSEL END ###*/

.threexs .carr-container {
	background-color: #F4F5F6;
	margin: 0 auto;
	position: relative;
	overflow: visible; /* Allow breakout */
	padding: 0 1em;
	max-width: 1680px;
}

.threexs .carr-container .textContainer h4,
.threexs .carr-container .textContainer p {
	text-align: center;
}

.threexs .carousel-container {
	position: relative;
	/* width: calc(100vw - ((100vw - var(--center-container-wrap)) / 2)); */
	width: 100%;
	overflow: hidden;
	margin: 40px 0 0 0;
}

/* Track alignment */
.threexs .carousel-container .carousel-track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	transition: transform 0.5s ease;
    padding-left: 0;
	gap: 20px;
    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.threexs .carousel-container.centerAlign {
	margin: 0 auto;
}

.threexs .carousel-container.centerAlign .carousel-track {
	justify-content: center;
}

.threexs .carousel-container .carousel-track .carousel-item {
	flex: 0 0 25%;
    max-width: 400px;
	transform: scale(0.95);
	transition: transform 0.5s ease-in, opacity 0.7s cubic-bezier(0.15, 0, 0.2, 1) 0.1s;
	overflow: clip;
	box-sizing: border-box;
	opacity: 0.5;
	text-decoration: none;
	display: flex;
}

.threexs .carousel-container .carousel-track .carousel-item.visible {
  	opacity: 1;
  	transform: scale(1);
}

.threexs .carousel-container .carousel-track .carousel-spacer {
  flex: 0 0 auto;
  width: 100px;
  pointer-events: none;
  background: transparent;
}


.threexs .carousel-container .carousel-track .carousel-item .content-inside .flex-cont {
    color: var(--systems-white);
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
	width: 100%;
    padding: 2em;
    box-sizing: border-box;
	position: relative;
	background-color: var(--systems-lightGrey);
}

.threexs .carousel-container .carousel-track .carousel-item .content-inside .flex-cont .keyspecs {
	display: flex;
	gap: 5px;
}

.threexs .carousel-container .carousel-track .carousel-item .content-inside .flex-cont .keyspecs span {
	font-family: "Poppins-Bold", sans-serif;
	padding: 5px 8px;
	font-size: 1.1em;
	line-height: 1em;
	color: var(--systems-black);
	background-color: var(--systems-darkGrey);
}

.threexs .carousel-container .carousel-track .carousel-item .content-inside .flex-cont img {
  	width: 100%;
	outline: none !important;
	user-select: none !important;
	padding: 30px 0 40px 0;
	transform: scale(1);
	transition: transform 0.5s ease-in;
}

.threexs .carousel-container .carousel-track .carousel-item:hover .content-inside .flex-cont img {
  	transform: scale(1.05);
}


.threexs .carousel-container .carousel-track .carousel-item .content-inside {
	width: 100%;
	box-sizing: border-box;
	display: block;
    position: relative;
    overflow: hidden;
	transition: background-color 0.7s cubic-bezier(0.15, 0, 0.2, 1) 0.1s;
}

.threexs .carousel-container .carousel-track .carousel-item .content-inside h5 {
	font-family: "Poppins-Bold", sans-serif;
    font-size: 2em;
    line-height: 1.1em;
    font-weight: normal;
    margin: -28px 0 0 0;
	color: var(--systems-black);
	text-decoration: none;
	display: inline-block;
	position: absolute;
	left: 20px;
}
.threexs .carousel-container .carousel-track .carousel-item .content-inside h5 .highlightblack {
	background-color: var(--systems-black);
	color: var(--systems-white);
	padding: 0.5em 0.7em;
}
.threexs .carousel-container .carousel-track .carousel-item .content-inside h5 .highlightblue {
	background-color: var(--scan-optic-blue);
	color: var(--systems-white);
	padding: 0.5em 0.7em;
}


.threexs .carousel-container .carousel-track .carousel-item .content-inside p {
    margin: 0;
    max-width: 70%;
	color: var(--systems-black);
	text-decoration: none;
	padding: 45px 0 0 20px;
	font-size: 1.1em;
	line-height: 1.4em;
	font-family: "Poppins-Regular", sans-serif;

}
.threexs .carousel-container .carousel-track .carousel-item .content-inside p span {
	font-family: "Poppins-Bold", sans-serif;
}

.threexs .carousel-container .carousel-track .carousel-item .content-inside span.price {
	display: block;
	padding: 25px 0 0 20px;
	font-family: "Poppins-Regular", sans-serif;
	font-size: 1.5em;
	color: var(--systems-black);
}
.threexs .carousel-container .carousel-track .carousel-item .content-inside span.price span {
	font-family: "Poppins-Bold", sans-serif;
	font-size: 1.2em;
}

.threexs .carousel-container .carousel-track .carousel-item .content-inside .arrow {
	position: absolute;
	right: 20px;
	bottom: 0;
	width: 38px;
	height: 38px;
	background-color: #f1f1f1;
	border-radius: 38px;
}

.threexs .carousel-container .carousel-track .carousel-item .content-inside .arrow:after {
	content: "\e916";
	font-family:"scanicons", sans-serif;
	font-size: 20px;
	color: var(--scan-optic-blue);
	display: block;
	padding: 9px 11px;
	font-style: normal;
}


/* HOVER */
.threexs .carousel-container .carousel-track .carousel-item:hover .content-inside .arrow {
	background-color: var(--scan-optic-blue);
}

.threexs .carousel-container .carousel-track .carousel-item:hover .content-inside .arrow:after {
	color: var(--systems-white);
}
/* HOVER */


.threexs .carousel-container .carousel-track .carousel-item video {
	outline: none !important;
	user-select: none !important;
    object-fit: cover;
    height: 100%;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.threexs .carr-container .nav-wrapper {
	display: block;
	margin: 2.5rem auto 1rem auto;
	padding: 0;
	position: static;
	max-width: var(--center-container-wrap);
	z-index: 1;
}

.threexs .carr-container .nav-wrapper .nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--systems-darkGrey);
	fill: white;
	border: none;
	padding: 5px;
	cursor: pointer;
	font-size: 1.2rem;
	border-radius: 50%;
	transition: ease-out 200ms all;
	z-index: 2;
}

.threexs .carr-container .nav-wrapper .nav:first-of-type {
	margin-right: 0;
}

.threexs .carr-container .nav-wrapper .nav:hover,
.threexs .carr-container .nav-wrapper .nav:focus{
	background: var(--systems-black);
}

.threexs .carr-container .nav-wrapper .nav span {
  	display: block;
}

.threexs .carr-container .nav-wrapper .nav span svg {
	display: block;
	width: 30px;
	height: auto;
}

.threexs .carr-container .nav-wrapper .nav:first-of-type span svg {
  	transform: rotate(180deg);
}

.threexs .carr-container .nav-wrapper button[disabled] span svg {
 	 opacity: 0;
}

.threexs .carr-container .nav-wrapper button[disabled] {
	background: transparent !important;
	transform: translateY(-50%) scale(0);
}

.threexs .carr-container .nav-wrapper .nav.left {
	left: -10px;
}
.threexs .carr-container .nav-wrapper .nav.right {
	right: -10px;
}

@media screen and (max-width: 1680px) {
	.threexs .carr-container .nav-wrapper .nav.left {
		left: 0;
	}

	.threexs .carr-container .nav-wrapper .nav.right {
		right: 0;
	}
}

@media screen and (max-width: 768px) {
	.threexs .carr-container .nav-wrapper .nav.left {
		left: 0;
	}

	.threexs .carr-container .nav-wrapper .nav.right {
		right: 0;
	}
}

.threexs .carr-container .nav-wrapper .scroll-indicator-wrapper {
  	width: 100%;
	height: 3px;
	background-color: #f1f1f1;
	margin: 10px 10px 10px 0;
	box-sizing: border-box;
	position: relative;
	border-radius: 4px;
	max-width: var(--center-container-wrap);
}

.threexs .carr-container .nav-wrapper .scroll-indicator-bar {
  	height: 100%;
    background: #bcbec0;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

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

	.threexs .carousel-container .carousel-track .carousel-item {
		max-width: 380px;
	}

}


/* AS - Removed due to squased image on smaller screens */
/*@media (max-width:1400px) {

    .threexs .carousel-container .carousel-track .carousel-item img {
        width: 300px;
    }
}*/

@media screen and (max-width: 1600px) {
	.carousel-container {
		margin: 10px 0 0 0;
	}
	.threexs .carousel-container .carousel-track .carousel-item {
		min-width: 300px;
		max-width: none;
	}
	.threexs .carousel-container .carousel-track .carousel-item .content-inside .flex-cont {
		padding: 1.5em;
	}
	.threexs .carousel-container .carousel-track .carousel-item .content-inside .flex-cont .keyspecs span {
		font-size: 0.8em;
	}
	.threexs .carousel-container .carousel-track .carousel-item .content-inside h5 {
		font-size: 1.5em;
		margin: -14px 0 0 0;
	}
	.threexs .carousel-container .carousel-track .carousel-item .content-inside p {
		font-size: 1em;
		max-width: 90%;
	}

	

}

@media (width <= 1200px) {

	.threexs .carousel-track,
	.threexs .carousel-container.centerAlign .carousel-track {
		justify-content: flex-start;
	}

}


/* Carrousel systems div */



.threexs .systemList .systemContainer .systemCont-Inner.hotseller .hotsellerTag {
	display: none;
}

.threexs .systemContainer .systemInfo .systemDesc,
.threexs .systemContainer .system-tags,
.threexs .systemContainer .system-price .poweredBy .heading,
.threexs .systemContainer .system-price .poweredBy .powered-logos {
	display: none;
}

.threexs .systemContainer.rangeOnly .systemInfo .systemDesc {
	display: block;
}

.threexs .systemList .systemContainer.rangeOnly .systemCont-Inner {
	display: flex;
	flex-direction: column;
}

.threexs .systemContainer .systemImages {
	background-color: #F9FAFB;
	border-radius: 8px;
	margin: 0;
}

.threexs .systemContainer .systemImages img {
	margin: 0 auto;
    display: block;
}

.threexs .systemContainer .systemInfo {
	display: flex;
	flex-direction: column;
	font-size: 1em;
}

.threexs .systemContainer .systemInfo .thumbnails {
	border-radius: 100vw;
	inset: 12px auto auto 12px;
}

.threexs .systemContainer .systemInfo .systemDesc {
	margin: 1em 0 0 0;
}

.threexs .systemContainer .systemInfo .systemDesc p{
	margin: 0 0 2em 0;
}

.threexs .systemContainer.rangeOnly .systemInfo .systemDesc ul {
	padding: 0;
	margin: 0 0 1.5em 0;
	list-style-type: none;
}
.threexs .systemContainer.rangeOnly .systemInfo .systemDesc ul li {
	padding: 0.1em 0;
}

.threexs .systemContainer.rangeOnly .manual-system-text span {
	font-family: "Poppins-Bold", sans-serif;
	font-size: 1.2em;
	padding-bottom: 0.5em;
}

.threexs .systemContainer .poweredBy,
.threexs .systemContainer .poweredBy .systemDelivery {
	border: none;
}

.threexs .systemContainer .system-price {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: auto 0 0 0;
}

.threexs .threexs .systemContainer .system-price .price-Left {
	margin-block-start: 1em;
}

.threexs .systemContainer .system-price .price-Right {
	flex-direction: column;
	align-items: flex-start;
}

.threexs .systemContainer .system-price .systemDelivery {
	background-color: #F9FAFB;
    border-radius: 1vw;
    box-sizing: border-box;
    padding: 0.5em 1.5em;
    text-align: center;
	flex-direction: column;
	margin-top: 1em;
}
.threexs .systemContainer .system-price .systemDelivery .estDate, .threexs .systemContainer .system-price .systemDelivery .estTitle {
	text-align: center;
	margin: 0 auto;
}
.threexs .systemList .systemContainer .systemCont-Inner .configButton {
	width: 100%;
}

.threexs .systemList .systemContainer .systemCont-Inner .configButton a {
	width: 100%;
	margin-block-start: 1em;
	transition: all 0.2s ease-in-out;
}

.threexs .systemList .systemContainer .systemCont-Inner .configButton a:hover {
    background-color: var(--scan-optic-blue);
    color: var(--systems-white);
}

.threexs .systemList .systemContainer:hover {
	box-shadow: none;
}

@media (width <= 1400px) {
    .threexs .systemContainer .systemImages img {
        width: auto;
    }
}

@media (width <= 500px) {
    .threexs .systemContainer .systemImages {
        width: auto;
    }

	.threexs .systemContainer.rangeOnly .systemDesc {
		width: 100%;
	}
}

/*### CAROUSEL END ###*/

/*### BANNERS RIGHT TEXT START ###*/

.threexs .banners1-container {
    position: relative;
}

.threexs .banners1-container .sliding-banner .sliding-banner-pages > div {
    height: 650px;
	display: block;
	position: relative;
	overflow: hidden;
    background-color: var(--systems-black);
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div.videobanner:after {
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	background: rgba(0, 0, 0, 0.3);
	top: 0;
	left: 0;
}

.threexs .banners1-container .sliding-banner .sliding-banner-pages > div.videobanner video {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 0;
}

.threexs .banners1-container .sliding-banner .sliding-banner-pages > div.template {
    background: #000 url("https://placehold.co/2135x675/000000/FFF") no-repeat;
    background-size: 2100px;
    background-position: center;
} 

.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont {
    max-width: var(--center-container-wrap);
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: right;
	z-index: 1;
	position: relative;
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div {
    width: 550px;
    text-align: right;
    margin-right: 10em;
    padding-left: 10em;
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div .livelinks {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
}

.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div .livelinks p {
	flex-shrink: 0;
	padding-right: 1em;
	margin: 0;
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div .livelinks a {
	width: min-content;
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div .livelinks a img {
	display: block;
	height: 27px;
	margin-left: 2em;
	transform: scale(1);
	transition: transform 0.5s ease;
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div .livelinks a:hover img {
	transform: scale(1.2);
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div span {
    font-family: "Poppins-SemiBold", sans-serif;
    font-size: 1.5em;
    line-height: 1.1em;
    color: var(--systems-white);
    margin: 0 0 0.8em 0;
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div h5 {
    font-family: "Poppins-Bold", sans-serif;
    font-size: 3em;
    line-height: 1.1em;
    color: var(--systems-white);
    margin: 0 0 0.5em 0;
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div p {
    font-family: "Poppins-Regular", sans-serif;
    color: var(--systems-white);
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 0 0 1em auto;
    max-width: 25rem;
    text-align: right;
    text-wrap-style: pretty;
}

.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div > a {  
    display: inline-block;
    background-color: var(--systems-white);
    color: var(--systems-black);
    font-size: 1em;
    text-align: center;
    border-radius: 5em;
    padding: 0.8em 1.5em;
    font-family: "Poppins-SemiBold", sans-serif;
    text-decoration: none;
    margin: 1em 0;
	transition: all 0.2s ease-in-out;
}

.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div > a:hover {
    background-color: var(--scan-optic-blue);
    color: var(--systems-white);
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div.black h5, .threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div.black p {
	color: var(--systems-black);
} 
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div.black > a {  
    background-color: var(--systems-black);
    color: var(--systems-white);
}
.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div.black > a:hover {
    background-color: var(--scan-optic-blue);
    color: var(--systems-white);
}
.banners1-container .sliding-banner .sliding-banner-tabs {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2.5em 0;
    margin-top: -108px;
	position: absolute;
    z-index: 2;
}
.threexs .banners1-container.systemsCarrousels .sliding-banner .sliding-banner-tabs {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
	position: relative;
}
.threexs .banners1-container .sliding-banner .sliding-banner-tabs.desktop a {
    display: inline-block;
    background-color: rgba(205, 205, 205, 0.44);
    color: var(--systems-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 1em;
    text-align: center;
    border-radius: 5em;
    padding: 0.8em 1.5em;
    font-family: "Poppins-SemiBold", sans-serif;
    text-decoration: none;
    margin: 0 1em;
}
.threexs .banners1-container .sliding-banner .sliding-banner-tabs.desktop a.on {
    background-color: #E4E3E4;
    color: var(--systems-black);
}
.threexs .banners1-container .sliding-banner .sliding-banner-tabs.mobile {
    display: none;
}

.threexs .banners1-container .sliding-banner .sliding-banner-previous,
.threexs .banners1-container .sliding-banner .sliding-banner-next {
    display: flex;
    position: absolute;
    z-index: 10;
    transition: ease-out all 100ms;
    cursor: pointer;
    margin: 0 auto;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    padding: 0;
    width: 40px;
    height: 40px;
    color: transparent;
    font-size: 0rem;
}
.threexs .banners1-container .sliding-banner .sliding-banner-previous:after,
.threexs .banners1-container .sliding-banner .sliding-banner-next:after {
    display: block;
    margin: 5px auto;
    background: url("/images/3xs/homepage/white-link-arrow.svg") no-repeat;
    background-position: center;
    background-size: contain;
    padding: 0;
    width: 18px;
    height: 30px;
    content: "";
}

.threexs .banners1-container .sliding-banner .sliding-banner-previous {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}
.threexs .banners1-container .sliding-banner .sliding-banner-previous:after {
    transform: rotate(-180deg);
}

.threexs .banners1-container .sliding-banner .sliding-banner-next {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

    @media (max-width:1250px) {
		.threexs .banners1-container .sliding-banner .sliding-banner-pages > div.videobanner video {
			width: auto;
		}
	}

    @media (max-width:1185px) {
		.threexs .banners1-container .sliding-banner .sliding-banner-pages > div video {
			width: auto;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			z-index: 0;
		}
	}

    @media (max-width:850px) {
        .threexs .banners1-container .sliding-banner .sliding-banner-tabs.desktop a {
            display: none;
        }
        .threexs .banners1-container .sliding-banner .sliding-banner-tabs {
            margin-top: -80px;
        }
        .threexs .banners1-container .sliding-banner .sliding-banner-tabs.mobile {
            display: flex;
        }
        .threexs .banners1-container .sliding-banner .sliding-banner-tabs.mobile a {
            display: inline-block;
            background-color: rgba(205, 205, 205, 0.75);
            color: var(--systems-white);
            border-radius: 5em;
            margin: 0 1em;
            width: 15px;
            height: 15px;
        }
        .threexs .banners1-container .sliding-banner .sliding-banner-tabs.mobile a.on {
            background-color: #fff;
            color: var(--systems-black);
        }
		.threexs .banners1-container .sliding-banner .sliding-banner-previous,
		.threexs .banners1-container .sliding-banner .sliding-banner-next {
			display: none;
		}
		.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div {
            margin-right: 6em;
            padding-left: 6em;
        }

		.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div span {
			font-size: 1.2em;
		}
		.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div h5 {
			font-size: 2.5em;
		}
		.threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div p {
			font-size: 1.1em;
		}
    }
    @media (max-width:550px) {
        .threexs .banners1-container .sliding-banner .sliding-banner-pages > div .width-cont > div {
            margin-right: 3em;
            padding-left: 3em;
        }
    }
/*### BANNERS RIGHT TEXT END ###*/


/*### BANNERS LEFT TEXT START ###*/

.threexs .banners2-container {
    position: relative;
}

.threexs .banners2-container .sliding-banner .sliding-banner-pages > div {
    height: 650px;
	display: block;
	position: relative;
	overflow: hidden;
    background-color: var(--systems-black);
}

.threexs .banners2-container .sliding-banner .sliding-banner-pages > div.videobanner:after {
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	background: rgba(0, 0, 0, 0.3);
	top: 0;
	left: 0;
}

.threexs .banners2-container .sliding-banner .sliding-banner-pages > div.videobanner video {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 0;
}

.threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont {
    max-width: var(--center-container-wrap);
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: left;
	z-index: 1;
	position: relative;
}

.threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont > div {
    width: 550px;
    text-align: left;
    margin-right: 10em;
    padding-left: 10em;
}
.threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont > div img {
    width: 100%;
    max-width: 150px;
    margin-bottom: 1.5em;
}

.threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont > div span {
    font-family: "Poppins-SemiBold", sans-serif;
    font-size: 1.5em;
    line-height: 1.1em;
    color: var(--systems-white);
    margin: 0 0 0.8em 0;
}
.threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont > div h5 {
    font-family: "Poppins-Bold", sans-serif;
    font-size: 3em;
    line-height: 1.1em;
    color: var(--systems-white);
    margin: 0 0 0.5em 0;
}
.threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont > div p {
    font-family: "Poppins-Regular", sans-serif;
    color: var(--systems-white);
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 0 0 1em 0;
}

.threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont > div a {  
    display: inline-block;
    background-color: var(--systems-white);
    color: var(--systems-black);
    font-size: 1em;
    text-align: center;
    border-radius: 5em;
    padding: 0.8em 1.5em;
    font-family: "Poppins-SemiBold", sans-serif;
    text-decoration: none;
    margin: 1em 0;
}

.threexs .banners2-container .sliding-banner .sliding-banner-tabs {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2.5em 0;
    margin-top: -108px;
	position: absolute;
    z-index: 2;
}
.threexs .banners2-container.systemsCarrousels .sliding-banner .sliding-banner-tabs {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0;
	position: relative;
}
.threexs .banners2-container .sliding-banner .sliding-banner-tabs.desktop a {
    display: inline-block;
    background-color: rgba(205, 205, 205, 0.44);
    color: var(--systems-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 1em;
    text-align: center;
    border-radius: 5em;
    padding: 0.8em 1.5em;
    font-family: "Poppins-SemiBold", sans-serif;
    text-decoration: none;
    margin: 0 1em;
}
.threexs .banners2-container .sliding-banner .sliding-banner-tabs.desktop a.on {
    background-color: var(--scan-optic-yellow);
    color: var(--systems-black);
}
.threexs .banners2-container .sliding-banner .sliding-banner-tabs.mobile {
    display: none;
}

.threexs .banners2-container .sliding-banner .sliding-banner-previous,
.threexs .banners2-container .sliding-banner .sliding-banner-next {
    display: flex;
    position: absolute;
    z-index: 10;
    transition: ease-out all 100ms;
    cursor: pointer;
    margin: 0 auto;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    padding: 0;
    width: 40px;
    height: 40px;
    color: transparent;
    font-size: 0rem;
}
.threexs .banners2-container .sliding-banner .sliding-banner-previous:after,
.threexs .banners2-container .sliding-banner .sliding-banner-next:after {
    display: block;
    margin: 5px auto;
    background: url("/images/3xs/homepage/white-link-arrow.svg") no-repeat;
    background-position: center;
    background-size: contain;
    padding: 0;
    width: 18px;
    height: 30px;
    content: "";
}

.threexs .banners2-container .sliding-banner .sliding-banner-previous {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}
.threexs .banners2-container .sliding-banner .sliding-banner-previous:after {
    transform: rotate(-180deg);
}

.threexs .banners2-container .sliding-banner .sliding-banner-next {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
    @media (max-width:1250px) {
		.threexs .banners2-container .sliding-banner .sliding-banner-pages > div.videobanner video {
			width: auto;
		}
	}
    @media (max-width:850px) {
        .threexs .banners2-container .sliding-banner .sliding-banner-tabs.desktop {
            display: none;
        }
        .threexs .banners2-container .sliding-banner .sliding-banner-tabs {
            margin-top: -80px;
        }
        .threexs .banners2-container .sliding-banner .sliding-banner-tabs.mobile {
            display: flex;
        }
        .threexs .banners2-container .sliding-banner .sliding-banner-tabs.mobile a {
            display: inline-block;
            background-color: rgba(205, 205, 205, 0.75);
            color: var(--systems-white);
            border-radius: 5em;
            margin: 0 1em;
            width: 15px;
            height: 15px;
        }
        .threexs .banners2-container .sliding-banner .sliding-banner-tabs.mobile a.on {
            background-color: var(--scan-optic-yellow);
        }
    }
    @media (max-width:550px) {
        .threexs .banners2-container .sliding-banner .sliding-banner-pages > div .width-cont > div {
            margin-right: 6em;
            padding-left: 6em;
        }
    }

/*### BANNERS LEFT TEXT END ###*/





/*### BOTTOM GRID START ###*/
.threexs .bottomgrid-width {
	max-width: var(--center-container-wrap);
	padding: 0 1.5em;
}

.threexs .bottomgrid-width .grid-cont {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 15px;
	margin: 2em 0;
}

.threexs .bottomgrid-width .grid-cont > a {
	background-color: #EBEBEB;
	height: 438.75px;
	border-radius: 5px;
	position: relative;
	text-decoration: none;
	overflow: hidden;
}

.threexs .bottomgrid-width .grid-cont > a img {
	position: absolute;
	bottom: 0;
	right: 0;
	left: auto;
	width: 400px;
	transform: scale(1);
	transition: all 0.5s ease-in-out;
}

.threexs .bottomgrid-width .grid-cont > a img.fullbg {
	position: absolute;
	bottom: 0;
	left: auto;
	right: 0;
	width: 95%;
}

.threexs .bottomgrid-width .grid-cont > a:hover img {
	transform: scale(1.05);
}

.threexs .bottomgrid-width .grid-cont > a.dark {
	background-color: #121417;
}

.threexs .bottomgrid-width .grid-cont > a .arrow {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 38px;
	height: 38px;
	background-color: var(--systems-white);
	border-radius: 38px;
	/* transition: all 0.5s ease-in-out; */
}

.threexs .bottomgrid-width .grid-cont > a .arrow:after {
	content: "\e916";
	font-family:"scanicons", sans-serif;
	font-size: 20px;
	color: var(--scan-optic-blue);
	display: block;
	padding: 9px 10px;
	font-style: normal;
}

/* HOVER */
.threexs .bottomgrid-width .grid-cont > a:hover .arrow {
	background-color: var(--scan-optic-blue);
}

.threexs .bottomgrid-width .grid-cont > a:hover .arrow:after {
	color: var(--systems-white);
}
/* HOVER */


.threexs .bottomgrid-width .grid-cont > a > div {
	position: absolute;
	padding: 20px;
}

.threexs .bottomgrid-width .grid-cont > a > div h5 {
	font-family: "Poppins-Bold", sans-serif;
	font-size: 1.5em;
	line-height: 1.4em;
	color: var(--systems-black);
	margin: 0;
}

.threexs .bottomgrid-width .grid-cont > a > div p {
	font-family: "Poppins-Regular", sans-serif;
	font-size: 1.1em;
	line-height: 1.4em;
	padding: 10px 0 0 0;
	color: var(--systems-black);
}

.threexs .bottomgrid-width .grid-cont > a.dark > div h5, .threexs .bottomgrid-width .grid-cont > a.dark > div p {
	color: var(--systems-white);
}


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

	.threexs .bottomgrid-width {
		max-width: var(--max-text-contain);
	}
	.threexs .bottomgrid-width .grid-cont > a {
		height: 335.75px;
	}
	.threexs .bottomgrid-width .grid-cont > a img {
		width: 250px;
	}
	.threexs .bottomgrid-width .grid-cont > a > div p {
		padding-top: 2px;
	}

}

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

	.threexs .bottomgrid-width .grid-cont {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}

}

@media screen and (max-width: 550px) {
	
	.threexs .bottomgrid-width .grid-cont > a {
		height: 275px;
	}
	.threexs .bottomgrid-width .grid-cont > a > div h5 {
		font-size: 1.2em;
	}
	.threexs .bottomgrid-width .grid-cont > a > div p {
		display: none;
	}
	.threexs .bottomgrid-width .grid-cont > a img {
		width: 200px;
	}

	.threexs .bottomgrid-width .grid-cont > a img.ypyw {
		left: -150px;
	}

}
/*### BOTTOM GRID END ###*/


/*### ARTICLES START ###*/
.threexs .newsArticles {
    width: 100%;
	padding: 0 1.5em;
	max-width: var(--center-container-wrap);
} 

.threexs .newsArticles .article-wrapper-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 2em 0;
    box-sizing: border-box;
    gap: 20px;
	width: var(--center-container-wrap);
}



.threexs .newsArticles .article-wrapper-grid article {
    font-family: "Poppins-Regular", sans-serif;
	color: var(--systems-black);
	margin: 0;
	flex: 25%;
	box-sizing: border-box;
}
 
.threexs .newsArticles .article-wrapper-grid article h6 {
    font-family: "Poppins-SemiBold", sans-serif;
	font-size: 1.5em;
	margin: 0;
	padding: 1em 0 0.5em 0;
	border-bottom: solid 2px var(--scan-optic-blue);
}

.threexs .newsArticles .article-wrapper-grid article p {
	font-size: 1.1em;
	line-height: 1.4em;
	padding: 1em 0 0 0;
	overflow: hidden;
	display: flex;
}

.threexs .newsArticles .article-wrapper-grid picture {
	border-radius: 8px;
	display: block;
	background: radial-gradient(at 50% bottom, #000000 0%, #747474 100%); 
	border: solid 1px #e4e4e4;
	box-sizing: border-box;
	overflow: hidden;
}

.threexs .newsArticles .article-wrapper-grid picture img {
	display: block;
    height: auto;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.threexs .newsArticles .article-wrapper-grid .read-more-arrow {
    font-family: "Poppins-Bold", sans-serif;
	font-size: 1.1em;
	display: inline-block;
	color: var(--systems-black);
	text-decoration: none;
	padding: 0;
	margin:10px 0 0 0;
	cursor: pointer;
	transition: transform 200ms, color 100ms ease-out;
	-webkit-transition: transform 200ms, color 100ms ease-out;
    -moz-transition: transform 200ms, color 100ms ease-out;
	transform: translateX(0);
	font-style: normal;
}

.threexs .newsArticles .article-wrapper-grid .read-more-arrow:hover {
	color: var(--scan-optic-blue);
}

.threexs .newsArticles .article-wrapper-grid .read-more-arrow:after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M23.5587,16.916 C24.1447,17.4999987 24.1467,18.446 23.5647,19.034 L16.6077,26.056 C16.3147,26.352 15.9287,26.4999987 15.5427,26.4999987 C15.1607,26.4999987 14.7787,26.355 14.4867,26.065 C13.8977,25.482 13.8947,24.533 14.4777,23.944 L20.3818,17.984 L14.4408,12.062 C13.8548,11.478 13.8528,10.5279 14.4378,9.941 C15.0218,9.354 15.9738,9.353 16.5588,9.938 L23.5588,16.916 L23.5587,16.916 Z'%3E%3C/path%3E%3C/svg%3E");
	width: 30px;
    height: 31px;
    display: inline-block;
    vertical-align: middle;
	transition: inherit;
}

.threexs .newsArticles .article-wrapper-grid .read-more-arrow:hover:after {
	transform: translateX(10px);
}

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

		.threexs .newsArticles {
			max-width: var(--max-text-contain);
		}
		.threexs .newsArticles .article-wrapper-grid {
			width: var(--max-text-contain);
		}

	}

	@media (max-width:1500px) {

		.threexs .newsArticles {
			overflow-x: scroll;
		} 

	}
	@media (max-width:550px) {

		.threexs .newsArticles .article-wrapper-grid article {
			flex: 0 1 17%;
		}

		.threexs .newsArticles .article-wrapper-grid article h6 {
			font-size: 1.2em;
		}

	}

	@media (max-width:520px) {
	.threexs .newsArticles .article-wrapper-grid article {
		flex: 0 1 17%;
	}
}
/*### ARTICLES END ###*/



/*### BENEFITS START ###*/
.threexs .benefits {
    padding: 45px 20px;
	background-color: #191919;
}

.threexs .benefits .benefits-content {
	margin: 0 auto;
	max-width: 1750px;
	width: 100%;
}

.threexs .benefits .benefits-content .blocks-cont {
	display: flex;
}


.threexs .benefits .benefits-content .blocks-cont .block {
	width: 25%;
	border-radius: 20px;
	margin: 10px;
}

.threexs .benefits .benefits-content .blocks-cont .block .block-inner {
	padding: 0 30px;
}

.threexs .benefits .benefits-content .blocks-cont .block .block-inner img {
	display: block;
	max-width: 175px;
	width: 100%;
	margin: 0 auto 20px auto;
}

.threexs .benefits .benefits-content .blocks-cont .block .block-inner h5 {
	text-align: center;
	font-family: "Poppins-SemiBold", sans-serif;
	font-size: 1.2em;
	color: var(--systems-white);
	line-height: 1.5em;
}
.threexs .benefits .benefits-content .blocks-cont .block .block-inner p {
	text-align: center;
	font-family: "Poppins-Regular", sans-serif;
	font-size: 1.1em;
	color: var(--systems-white);
}

@media screen and (max-width: 1150px) {
	.threexs .benefits .benefits-content .blocks-cont {
		flex-wrap: wrap;
		justify-content: center;
	}

	.threexs .benefits .benefits-content .blocks-cont .block {
		width: 45%;
		border-radius: 20px;
		margin: 10px;
	}
}

@media screen and (max-width: 500px) {
	.threexs .benefits .benefits-content .blocks-cont .block {
		margin: 25px 10px;
	}
	.threexs .benefits .benefits-content .blocks-cont .block .block-inner p {
		display: none;
	}
}
/*### BENEFITS END ###*/



@keyframes popupOverlayFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes popupContentFade {
    from {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.s-theme {
    --bg: #FFFFFF;
    --bg-off: rgb(242.25, 242.25, 242.25);
    --text: #3E3E3E;
    --neutral: #FFFFFF;
    --neutral-colour: #000000;
    --neutral-border: #000000;
    --neutral-hover: rgb(242.25, 242.25, 242.25);
    --primary: #006FFF;
    --primary-colour: #FFFFFF;
    --primary-hover: rgb(0, 105.45, 242.25);
    --secondary: #DDFC0A;
    --secondary-colour: #3E3E3E;
    --secondary-hover: rgb(209.95, 239.4, 9.5);
    --inverted: #000000;
    --inverted-colour: #FFFFFF;
    --inverted-hover: rgb(37.05, 37.05, 37.05);
    --link: #006FFF;
    --link-colour: #006FFF;
    --link-hover: rgb(0, 105.45, 242.25)
}

.s-theme h1,.s-theme h2,.s-theme h3,.s-theme h4,.s-theme h5,.s-theme h6,.s-theme p,.s-theme ul {
    font-family: Poppins,sans-serif;
    padding: 0;
    color: var(--text)
}

.s-theme h1 {
    margin-bottom: .67em;
    margin-top: .67em;
    font-weight: 700;
    font-size: clamp(1.625rem,1.1786rem + 2.2321vw,2.25rem)
}

.s-theme h2 {
    margin-bottom: .83em;
    margin-top: .83em;
    font-weight: 600;
    font-size: clamp(1.5rem,1.3214rem + .8929vw,1.75rem)
}

.s-theme h3 {
    margin-bottom: 1em;
    margin-top: 1em;
    font-weight: 600;
    font-size: clamp(1.25rem,1.0714rem + .8929vw,1.5rem)
}

.s-theme h4 {
    font-weight: 600;
    font-size: clamp(1.125rem,.9464rem + .8929vw,1.375rem)
}

.s-theme h5 {
    font-weight: 500;
    font-size: clamp(1.125rem,.9464rem + .8929vw,1.375rem)
}

.s-theme h6 {
    font-weight: 400;
    font-size: clamp(1.125rem,.9464rem + .8929vw,1.375rem)
}

.s-theme p,.s-theme ul {
    color: var(--text);
    line-height: 1.4em;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 0;
    font-weight: 400
}

.s-theme a {
    color: var(--link-colour)
}

.s-theme ul {
    display: block;
    list-style-type: disc;
    list-style-position: outside;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 40px
}

.s-theme ul li {
    display: list-item;
    margin: 0;
    padding: 0
}

.s-theme ol {
    display: block;
    list-style-type: decimal;
    list-style-position: outside;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 40px
}

.s-theme .s-content {
    margin: 0;
    max-width: 1480px;
    padding: 30px 40px;
    background-color: var(--bg)
}

.s-theme .s-btn {
    background-color: var(--neutral);
    border: 2px solid var(--neutral-border);
    border-radius: 20px;
    color: var(--neutral-colour);
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-family: Poppins,sans-serif;
    font-weight: 600;
    line-height: 3em;
    letter-spacing: 1px;
    margin-bottom: .3em;
    margin-right: .75em;
    overflow: hidden;
    padding: 0 14px;
    text-decoration: none;
    text-transform: capitalize
}

.s-theme .s-btn:hover {
    background-color: var(--neutral-hover)
}

.s-theme .s-btn.s-btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-colour)
}

.s-theme .s-btn.s-btn-primary:hover {
    background-color: var(--primary-hover)
}

.s-theme .s-btn.s-btn-alert {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--secondary-colour);
    margin-left: 1em
}

.s-theme .s-btn.s-btn-alert:hover {
    background-color: var(--secondary-hover)
}

.s-theme .s-btn.s-btn-black {
    background-color: var(--inverted);
    border-color: var(--inverted);
    color: var(--inverted-colour)
}

.s-theme .s-btn.s-btn-black:hover {
    background-color: var(--inverted-hover)
}

.s-theme .s-btn.s-btn-link {
    background-color: transparent;
    border: 0;
    color: var(--link-colour);
    padding: 0;
    text-decoration: none;
    text-transform: uppercase
}

.s-theme .s-btn.s-btn-link:hover {
    color: var(--link-colour);
    text-decoration: underline
}

.s-theme .s-popup {
    align-items: center;
    background-color: rgba(0,0,0,.6);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 3000
}

.s-theme .s-popup.popup-fade-in {
    animation: popupOverlayFade .25s ease-out forwards
}

.s-theme .s-popup .s-popup-content {
    background: var(--bg);
    border: 2px solid rgba(0,0,0,.7);
    border-radius: 12px;
    display: block;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    position: relative;
    width: 800px
}

.s-theme .s-popup .s-popup-content.popup-content-fade-in {
    animation: popupContentFade .25s ease-out forwards;
    transform-origin: center
}

.s-theme .s-popup .s-popup-content .cookies-error {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 1px
}

.s-theme .s-popup .s-popup-content a.close {
    display: block;
    float: right;
    cursor: pointer;
    height: 20px
}

.s-theme .s-popup .s-popup-content a.close span {
    font-size: 0
}

.s-theme .s-popup .s-popup-content a.close span::before {
    content: "\e903";
    font-family: scanicons,sans-serif;
    width: 20px;
    height: 20px;
    display: block;
    color: var(--text);
    font-size: 20px
}

.s-theme .s-popup .s-popup-content .scrollable-content {
    overflow-y: auto!important;
    overflow-x: hidden!important;
    height: 50vh!important;
    scrollbar-width: thin!important;
    scrollbar-color: #949494 rgba(255,255,255,0)!important
}

@media screen and (max-width: 1000px) {
    .s-theme .s-popup {
        min-width:inherit
    }
}

@media screen and (max-width: 780px) {
    .s-theme .s-popup {
        top:56px
    }

    .s-theme .s-popup .s-popup-content {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border-bottom: 6px solid rgba(0,0,0,.7)
    }
}

@media screen and (max-width: 400px) {
    .s-theme .s-popup {
        top:44px
    }
}

.s-theme.dark-mode {
    --bg: #101010;
    --bg-off: rgb(27.95, 27.95, 27.95);
    --text: #F1F1F1;
    --neutral: #000000;
    --neutral-colour: #FFFFFF;
    --neutral-border: #F1F1F1;
    --neutral-hover: rgb(12.75, 12.75, 12.75);
    --primary: #DDFC0A;
    --primary-colour: #000000;
    --primary-hover: rgb(209.95, 239.4, 9.5);
    --secondary: #DDFC0A;
    --secondary-colour: #000000;
    --secondary-hover: rgb(209.95, 239.4, 9.5);
    --inverted: #FFFFFF;
    --inverted-colour: #000000;
    --inverted-hover: rgb(228.95, 228.95, 228.95);
    --link: #DDFC0A;
    --link-colour: #DDFC0A;
    --link-hover: rgb(209.95, 239.4, 9.5)
}

@media (prefers-color-scheme: dark) {
    .s-theme {
        --bg:#101010;
        --bg-off: rgb(27.95, 27.95, 27.95);
        --text: #F1F1F1;
        --neutral: #000000;
        --neutral-colour: #FFFFFF;
        --neutral-border: #F1F1F1;
        --neutral-hover: rgb(12.75, 12.75, 12.75);
        --primary: #DDFC0A;
        --primary-colour: #000000;
        --primary-hover: rgb(209.95, 239.4, 9.5);
        --secondary: #DDFC0A;
        --secondary-colour: #000000;
        --secondary-hover: rgb(209.95, 239.4, 9.5);
        --inverted: #FFFFFF;
        --inverted-colour: #000000;
        --inverted-hover: rgb(228.95, 228.95, 228.95);
        --link: #DDFC0A;
        --link-colour: #DDFC0A;
        --link-hover: rgb(209.95, 239.4, 9.5)
    }
}

@media screen and (prefers-reduced-motion:reduce) {
    .s-popup .s-popup-content.popup-content-fade-in,.s-theme.popup-fade-in {
        animation-duration: 0s!important;
        animation-iteration-count: 1!important;
        transition-duration: 0s!important
    }
}

@keyframes fadeInBlockHover {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}
/* add a max height to the thumbnails of the system images due to barracuda having more than 4 images */
.config #overview .system-leftcol .images ul.galleryThumbnails {
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    flex-wrap: wrap;
}

.homepage-container {
    width: 100% !important;
    margin: 0 auto !important;
    background-color: white !important;
}

.homepage-container > div.sliding-banner:first-of-type {
	max-width: 100%;
    margin: inherit;
	background-color: #f0f0f0;
	margin-block-end: 1em;
}

.homepage-container > div.sliding-banner:first-of-type .uspHeader {
	max-width: 2000px;
	margin: inherit;
}


.uspHeader { height: 45px; background-color: #f0f0f0; display: table; width: 100%; } 
.uspHeader span { display:block; } 
.uspHeader > div { display: table-cell; width: 32%; font-size: 0.80em; color:#5b5b5b; }
.uspHeader > div > span { margin-left:44px; } 
.uspHeader > div > span span, .uspHeader > div > a span  { margin-left:50px; } 
.uspHeader > div > a { text-decoration: none; display:block; margin-left:44px; color: #5b5b5b; } 
.uspHeader > div > a > i, .uspHeader > div > span > i { width: 40px; text-indent:40px; float: left; line-height: 6em; height: 40px; overflow: hidden; display: block; }
.uspHeader strong { display:block; font-family:"open_sans-bold", sans-serif; font-size: 1em; font-weight: normal; color: #000000; padding:2px 0; } 
.uspHeader .block1 i { background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size: 1700px 1700px; background-position: -375px -78px;   } 
.uspHeader .block2 i { background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size: 1700px 1700px; background-position: -375px -146px;   } 
.uspHeader .block3 i { background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size: 1700px 1700px; background-position: -375px -222px;   } 
.uspHeader .block2 { margin-left:80px; } 
.uspHeader .block3 { margin-left:120px; } 





button.left-nav, button.right-nav {   width: 30px; height: 30px;  border-radius:50%;  z-index: 2; padding: 0; border:0; position: absolute;  } 
button.left-nav { background:#3b3b3d url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size:2500px 2500px; background-position:-2308px -51px; transform: rotate(270deg); }
button.right-nav { background:#3b3b3d url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size:2500px 2500px; background-position:-2307px -51px; transform: rotate(90deg); } 




.carousel button.left-nav { left:20px; top:160px; }
.carousel button.right-nav { right:20px; top:160px; } 


.homepage-container { width: 1280px; margin:0 auto; background-color: #ffffff;  } 





.carousel { position:relative;}
.carousel h1 { font-family: "uni_sansbold",sans-serif; color:#ffffff; padding:5px 20px 0 90px; margin: 0; font-size: 2.2em; font-weight: normal;  } 
.carousel h2 { font-family: "uni_sans_regular",sans-serif; color:#ffffff; padding:5px 20px 0 90px; margin: 0; font-size: 1.2em; font-weight:normal;  } 
.carousel strong { font-family: "uni_sansbold",sans-serif; color:#ffffff; padding:5px 20px 0 90px; margin: 0; font-size: 2.2em; font-weight: normal; display: block;  } 
.carousel-content span { font-family: "uni_sans_regular",sans-serif; color:#ffffff; padding:5px 20px 0 90px; margin: 0; font-size: 1.2em; font-weight:normal; display: block;  } 


.carousel p { color: #c2c2c2; font-size:0.80em;  padding: 10px 100px 0 90px; max-width: 700px;} 
.carousel-nav { background: rgba(46,46,46,0.8);  border-bottom:1px solid #cccccc; text-align: center; position:absolute; width:100%; z-index: 2;} 
.carousel-nav a {font-family: "uni_sanssemibold",sans-serif; text-decoration: none; padding: 16px 30px; display: inline-block; color: #727177; margin: 0 15px; font-size: 0.90em; text-transform:uppercase;}
.carousel-nav a.on {  color:#ffffff; border-bottom:2px solid #ffffff; } 

.carousel .carousel-content.proGraphics a { background: linear-gradient(to left, #2bb673, #0094bb); }
.carousel .carousel-content.proGaming a { background: linear-gradient(to left, #f58220, #e9c31e); }
.carousel .carousel-content.proVideo a { background: linear-gradient(to left, #6f2c91, #c5187a); }
.carousel .carousel-content.proAudio a { background: linear-gradient(to left, #44c8f5, #812990); } 
.carousel .carousel-content.custom a { background: linear-gradient(to left, #bbbdbf, #818386); } 

.carousel .logo { background: url("/images/3xs/homepages/3xs-brand-logos.svg"); height: 30px; background-size:900px 288px; margin-left:90px; } 
.carousel .carousel-content.proAudio .logo { width: 200px; background-position:-705px -85px; }
.carousel .carousel-content.proGraphics .logo { width: 215px; background-position:-16px -85px; }
.carousel .carousel-content.proGaming .logo { width: 200px; background-position:-480px -85px; }
.carousel .carousel-content.proVideo .logo { width: 200px; background-position:-262px -85px; }

.carousel-content {  height: 350px;  display: table; width:100%;  }   
.carousel-content .left { width: 40%;  display: table-cell; vertical-align: middle; }
.carousel-content .right { width: 60%;  display: table-cell;  }
.carousel-content .right .powered-by { float:right; margin:298px 20px 0 0; } 

.carousel-content .left ul { margin:0; padding:5px 0 0 90px; } 
.carousel-content .left ul li { color:#ffffff; font-size: 0.8em; font-family:"open-sans_regular", sans-serif; display: inline-block; list-style: disc; width:185px; padding:2px; } 
.carousel-content .left ul li:before { content: ''; display: inline-block; width: 7px; height: 7px; background-color: #ffffff; border-radius:50%; margin-right:8px; } 

.carousel-content .right .powered-by span { font-family:"open-sans_regular", sans-serif; color:#000000; font-size:0.90em; letter-spacing:0.01em; display: inline-block; padding: 0 12px 0 0;   } 
.carousel-content .right .powered-by i {  display: inline-block; margin-bottom:-12px; background: url("/images/3xs/homepages/pro-manufacturer-logos.svg?v=10") no-repeat; background-size: 2200px 1712px; } 



.carousel-content a {  font-family: "uni_sanssemibold",sans-serif; color: #ffffff; text-decoration: none; display: inline-block; border-radius:5px; margin:15px 0 0 90px; font-size:1.1em;  transition: ease-in 10s ease-out 10s;   } 
.carousel-content a:hover span i {  border-color: #ffffff;  } 
.carousel-content a span { margin:3px; background-color: #000000; padding: 15px 22px 15px 45px; font-family: "uni_sanssemibold",sans-serif; display: inline-block; border-radius:3px; font-size: 1em;   }
.carousel-content a span i {  width: 11px; display: block; float: right; height: 11px; transition: all .6s ease-in-out 0s;  transform: rotate(45deg); border-top:3px solid #000;  border-right:3px solid #000; margin-top:3px;  border-left: 0; margin-left:7px; border-bottom: 0;  }

.carousel-toggle { margin-top:-40px; text-align: center; } 
.carousel-toggle .link { display:inline-block;  border:0; line-height: 0; padding: 0; background: none; border-radius:50%;  }
.carousel-toggle .link.on {  background-color:rgba(255,255,255,0.3); margin:0 4px;   } 
.carousel-toggle span { width: 13px; height:13px; display:block;   border-radius:50%; margin: 0 5px;   margin: 6px;  background-color:rgba(255,255,255,0.5);} 
.carousel-toggle .link.on span {   background:#fff;   } 


.inpageMenu { padding: 0 12px; } 
.inpageMenu .divide { height: 2px; background: linear-gradient(to left, #ffffff, #cccccc, #ffffff); } 

.shopby-title { text-align: center; font-family:"open-sans_regular", sans-serif; padding: 25px 0 10px 0;  } 
.shopby-title span:first-child { font-family: "uni_sansbold",sans-serif; font-size:1.3em; color: #000000; } 
.shopby-title span:first-child:after { content:''; display:block; height:2px; background: linear-gradient(to left, #ffffff, #cccccc, #ffffff); margin-top: 7px; } 
.shopby-title span { font-size: 0.85em; color:#6d6e70; display: block; padding: 5px 0; } 

.system-nav { background-color: #2e2e2e; text-align: center; border-radius:4px;  } 
.system-nav span { /* display: table-cell; */ display: block; } 
.system-nav span { vertical-align: middle; } 
.system-nav .textLink  { padding: 0 8px; } 
.system-nav .icon { width: 40px; height: 45px;  margin: 0 auto 5px auto; background: url("/images/3xs/homepages/3xs-homepage-icons2019.svg?v=3") no-repeat; background-size: 600px 192px; } 

.system-nav a { display: inline-block; color: #ffffff; font-size: 0.80em; text-decoration: none;  padding:12px 18px; transition: all .8s ease-in-out 0s; }  
.system-nav a:hover { background-color: #000000; } 

button.shopby { display: none; font-family: "uni_sansbold",sans-serif; font-size: 1.3em; color: #000000; border: 0; background: none;  width: 100%; text-align: left; padding:20px 0;   } 
button.shopby i { width: 30px; display: block; float: right; height: 25px; margin-left: 7px; margin-top:2px; background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size:3750px 3750px;  } 

.shopby.collapsed i  { background-position:-3183px -41px; } 
.shopby.expanded i { background-position:-3183px -86px;  } 



.shopby-filters { display: flex; } 
.shopby-filters > div { width: 50%; } 
.shopbySpec .system-nav { margin-right:3px;  }
.shopbyPrice .system-nav { margin-left:3px;  }
.shopbySpec .system-nav span { display: block; }
.shopbyPrice .system-nav a { width:175px; margin: 6px 0; border-radius:4px; padding: 8px 0 9px 0; text-align: left; text-indent:40px; position: relative; } 
.shopbyPrice .system-nav a:before { display: block; content: ''; width: 16px; height: 16px; position: absolute; background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size:4000px 4000px; background-position:-1697px -120px; transform: rotate(90deg); margin-left:15px; opacity: 0.5; } 














.pageBlocks { display:flex; } 
.pageBlocks.four { flex-wrap:wrap;} 
.pageBlocks .left, .pageBlocks .right { width:100%;  background-color: #f0f0f0;    margin-top:15px;   }
.pageBlocks .left {  margin-right:3px;  } 
.pageBlocks .right {  margin-left:3px; }  
.pageBlocks .content { display: table; width:100%; } 
.pageBlocks .content div { width: 50%; height: 260px; display: table-cell; vertical-align:middle;} 
.pageBlocks .content div h2 { font-family: "uni_sansbold",sans-serif; font-size: 1.6em; font-weight:normal; margin: 0; padding: 0 10px 15px 0; } 
.pageBlocks .content div p { font-family:"open-sans_regular", sans-serif; color:#5b5b5b; font-size: 0.90em; padding-right:40px; line-height:1.4em; min-height:90px;  } 

.pageBlocks a { color:#000000; font-family: "uni_sanssemibold",sans-serif; text-decoration: none;  font-size:1.1em; display: inline-block; width:100%; } 
.pageBlocks a i { width: 16px; display: inline-block; height: 16px; margin-left: -27px; margin-bottom:-2px; background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size:2000px 2000px; background-position:-1697px -18px; transform: rotate(270deg);  } 
.pageBlocks span {  margin-right:35px; } 

/*.pageBlocks a:after { content: ""; display: block; width:16px; height: 16px; background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size:2000px 2000px; background-position:-1697px -18px; transform: rotate(270deg); } */

.pageBlocks .footer { display:flex;  } 
.pageBlocks .footer div { background:#f0f0f0 url("https://www.scan.co.uk/images/3xs/homepages/3xs-hexagons.svg") no-repeat; background-size:1200px 947px; } 
.pageBlocks .footer .left { width: 95%; height: 17px;  background-position: right -762px; margin:0;  } 
.pageBlocks .footer .right { width: 5%; height: 17px; margin: 0; background-position: right -762px; } 

/*
.featured-pcs { background:#f2f2f2; margin: 15px 0 5px 0; padding: 0 35px 20px 35px;} 
.featured-pcs h2 { font-family: "uni_sansbold",sans-serif; color: #000000; padding: 30px 0 25px 0; margin: 0; font-size:1.6em; text-transform: none; line-height: 1.1em; font-weight:normal; } 
.featured-pcs h3 { font-family: "uni_sanssemibold",sans-serif; color: #000000; padding: 10px 0 5px 0; margin: 0; font-size:1.4em; text-transform: none; line-height: 1.1em; font-weight:normal;   } 
.featured-pcs .container { width: auto; background-color: #f2f2f2; margin-top:0; position: relative; } 
.featured-pcs .container .system-blocks { display:flex; } 
.featured-pcs .container .system-blocks {  border: 1px solid #cccccc; background-color: #ffffff;}
.featured-pcs .container.two > div > div { width: 598px;} 
.featured-pcs .container.two > div > div { background-color: #ffffff; border:1px solid #ccc;  } 
.featured-pcs .container.three div div:nth-child(-n+2) { border-right:1px solid #ccc; } 
.featured-pcs .container.four div div:nth-child(-n+3) { border-right:1px solid #ccc; } 
.featured-pcs .container.four div div.systemImg { border-right:0;  } 
.featured-pcs .container .system-blocks > div { width: 402px; text-align: center; padding: 25px 0 35px 0; position: relative; } 
.featured-pcs .container div div p { padding: 0 20px;  font-family:"open-sans_regular", sans-serif; } 
.featured-pcs .container.two div div h3 { font-family: "uni_sanssemibold",sans-serif; color: #000000; font-size: 1.4em; font-weight: normal; margin: 0; padding:50px 15px 0 0; } 
.featured-pcs .container div div p { font-size: 0.90em; color: #5b5b5b; margin: 0; min-height: 65px; } 
.featured-pcs .container div div a { background-color: #000000; padding: 12px 30px; margin-top:15px; display: inline-block; color: #ffffff; font-family: "uni_sanssemibold",sans-serif; font-size: 1em; cursor: pointer; text-decoration: none; border-radius:4px; } 
.featured-pcs .container div div .systemImg { height:240px; margin: 20px; border-right:0; } 
.featured-pcs .container div div .specOverlay { position:absolute; background-color: rgba(231,231,231,0.7); bottom:0; left:0; width:100%; } 
.featured-pcs .container.three div div .specOverlay { height: 175px;  }  
.featured-pcs .container div div .specOverlay ul { color:#000000; margin: 10px 0 0 0; padding: 0;  } 
.featured-pcs .container div div .specOverlay ul li { padding: 5px 0; color: #000000; font-family:"open-sans_regular", sans-serif; list-style: none; font-size:0.90em; } 
.featured-pcs .container div div .specOverlay ul span { font-weight:bold; color: #000000; } 
.featured-pcs .container div .dgx-1 .systemImg img { margin-top:20px; } 
.featured-pcs .viewmore { margin:10px auto 0 auto; border: 0; background: none; text-transform: uppercase; font-family:"open_sans-bold", sans-serif; font-size: 0.90em; display:none; } 
.featured-pcs .container div div .price { display: block; font-family:"open_sans", sans-serif; font-size: 1.9em;  } 
.featured-pcs .container div div .price span:first-child { font-size: 0.65em; padding-right: 3px; } 
.featured-pcs .container div div .price > span { font-size: 0.70em; }
.featured-pcs button.left-nav, .featured-pcs button.right-nav { display: none; } 
.featured-pcs button.left-nav { left:20px; top:220px; }
.featured-pcs button.right-nav { right:20px; top:220px; } 
*/



.featured-PCs .systemContainer { width: auto; } 

.featured-PCs { padding:20px 35px; background:#f0f0f0; position: relative; margin-top:6px; }
.featured-PCs button.left-nav { display:none; top:375px; left: 55px; }
.featured-PCs button.right-nav { display:none; top:375px; right:55px; }
.featured-PCs h3 { font-family: "uni_sans_regular",sans-serif; font-size: 1.6em; padding: 0;  } 
.featured-PCs .systemGroup.three > div:nth-child(even) { border-left:1px solid #ccc; border-right:1px solid #ccc; } 
.featured-PCs .systemGroup { border:1px solid #cccccc; display: flex; background:#ffffff; } 
.featured-PCs .systemGroup.three > div { width: 33.2%; padding: 10px 0 20px 0; } 
.featured-PCs .hotsellerTag { display: none; } 
.featured-PCs .thumbnails { display: none; } 
.featured-PCs .systemContainer .tabs { display:none; } 
.featured-PCs .systemContainer h3 { text-align: center; font-size: 1.3em; padding:0;  } 
.featured-PCs .systemContainer h3 a { text-decoration: none; color:#000000; font-family: "uni_sans_regular",sans-serif; } 
.featured-PCs .systemContainer .mainImg { text-align: center; } 
.featured-PCs .system-overview.overview { display: none; }
.featured-PCs .system-overview.specification ul { padding: 0; } 
.featured-PCs .system-overview.specification ul li { list-style: none; text-align: center; padding: 6px 8px; font-size:0.90em; } 
/*.featured-PCs .system-overview.specification ul li:before { content:''; display:inline-block; width: 6px; height: 6px; background-color: #000000; margin-right:6px; border-radius: 50%;  } */
.featured-PCs .system-overview.specification ul li:after { content:''; display:block; width: 250px; height: 9px; border-bottom:1px solid #d7d7d7; margin: 0 auto;   }
.featured-PCs .systemContainer .system-tags { display: none; } 
.featured-PCs .configButton { text-align: center; padding: 12px 0; } 
.featured-PCs .configButton a { display: inline-block; background: linear-gradient(to top,#212123,#414143); padding: 15px 50px; border-radius: 4px; color:#fff; font-family: "open_sans-bold",sans-serif; text-transform: uppercase; font-size: 1em; text-decoration: none; }
.featured-PCs .system-price .price .incVAT { font-family: "uni_sans_regular",sans-serif; font-size: 2.2em; }
.featured-PCs .system-price .price .incVAT span { display: none; }
.featured-PCs .system-price .price-Left { display: none; } 
.featured-PCs .systemContainer .exVAT { display:none; } 
.featured-PCs .systemContainer .price { text-align:center; }

.introText h2 { font-size: 1.9em; padding: 35px 0 0 0; } 
.introText p { font-size: 0.90em; color: #5b5b5b; } 

h3.articleTitle {
	margin: 0 auto;
    display: block;
	max-width: 2000px;
}
	
.articleContainer { padding: 25px; } 
.articleContainer .overflow { display:flex; flex-wrap: wrap; } 
.articleContainer .articleBox { width: 33%; text-align: center; margin-bottom: 50px; } 
.articleContainer .articleBox { border-right:1px solid #ccc; } 
.articleContainer .articleBox:nth-child(3n+3) { border-right:0; } 
.articleContainer .articleBox > div { margin: 0 15px; text-align: center; } 
.articleContainer .articleImg { height: 165px; background: linear-gradient(to left, #000000, #606060, #000000); /*background:url("https://www.scan.co.uk/images/3xs/homepages/gaming/3xs-gaming-article-sprite.jpg") no-repeat; background-size:2275px 1673px;*/ }

.articleContainer .articleImg div { height: 165px; } 

.articleContainer h3 { text-align: center; font-family: "uni_sanssemibold",sans-serif; font-weight:normal; font-size: 1.4em; margin: 0; padding: 26px 0 8px 0; }
.articleContainer p { text-align: center; font-size: 0.85em; color: #5b5b5b; line-height: 1.6em; padding:0 10px; } 
.articleContainer a.desktopLink { margin-top:15px; } 
.articleContainer a, .articleContainer button { color:#000000; font-family: "uni_sanssemibold",sans-serif; text-decoration: none;  font-size:1.1em; display: inline-block; border: 0; background: none;   } 
	
.articleContainer button {display:none;} 	

.articleContainer a i, .articleContainer button i { width: 16px; display: block; float: right; height: 16px; margin-left: 7px; margin-top:2px; background:url("/images/3xs/homepages/3xs-sprite-2018.svg") no-repeat; background-size:2000px 2000px; background-position:-1698px -42px; transform: rotate(90deg); } 






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

.homepage-container { width:auto;  }  
	
.shopbyPrice .system-nav a { width:auto; padding-right: 7px; } 
.system-nav a { padding:12px 6px;} 
.system-nav .textLink { display:block; } 
.system-nav .icon { display:block; } 
.shopbyPrice .system-nav a::before { margin-left:3px; } 
.shopbyPrice .system-nav a { text-indent:24px; } 
	
	
	.shopbyUse .system-nav { display: table; width:100%;} 
	.shopbyUse .system-nav a { display:table-cell; } 
	
.pageBlocks.four .left, .pageBlocks.four .right { width: 49.5%; } 
.pageBlocks .footer .left { width: 95%; }
.pageBlocks .footer .right { width: 5%; }
.pageBlocks .content div h2 { padding-left:15px; } 
.pageBlocks .content div p { padding:0 15px; } 
.pageBlocks a { margin-left:15px; } 
	
	.featured-PCs .system-overview.specification { height: auto !important; } 
	.featured-PCs .system-overview.specification ul li:after { width:50%; } 
	
	
/*
.featured-pcs .container { width: auto; } 
.featured-pcs .container.three .system-blocks > div { width: 33.3%; } 
*/
		

}


@media screen and (max-width: 1150px) { 
.uspHeader > div > a { margin-left:0;}
.uspHeader .block2 { margin-left:0; } 	
.uspHeader .block3 { margin-left:0; } 
	
.carousel p { padding-right:0; } 
	

.articleContainer .articleBox { width: 50%; margin-bottom: 50px; position: relative; } 
	
	.articleContainer .articleBox { border-right:0; } 
	
.articleContainer p { font-size:0.85em;} 
	
}


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

	.carousel-content .right .powered-by span { color: #ffffff; } 
	
	
}


@media screen and (max-width: 800px) { 
	
.carousel p { display: none; } 
.carousel h1 { font-size: 2em; } 
	
	.carousel-content .left ul { display:none; } 
	
	.system-nav { display: table; width: 100%; }
	
.system-nav.shopbyUse a { padding: 6px 0; width: 25%; } 	
.shopbyPrice .system-nav a { width: 45%; margin:1px 0; }  
.shopbyUse .system-nav a { display:table-cell;  }
.shopbySpec .system-nav a { width: 32%; padding: 12px 0; display: table-cell; } 
.shopby-title span { font-size:0.80em; } 
	

	.pageBlocks .content div { height:220px; } 
	.pageBlocks .content div h2 { font-size: 1.5em; } 
	.pageBlocks .content .imageBlock { width:40%; } 
	.pageBlocks .content .textBlock { width:60%; } 
	
	
	
	
	
.articleContainer { overflow-y: hidden; background-color: #f0f0f0; } 
.articleContainer .articleBox { margin:0 5px; padding: 65px 0 15px 0; border: 1px solid #cccccc; background-color: #ffffff; position:relative;  } 
.articleContainer .articleBox:nth-child(-n+2) { border: 1px solid #cccccc; } 

	
.articleContainer h3 { padding-top: 0; top:14px; position: absolute; right:0; left:0; color:#000000;  }
.articleContainer p { padding: 10px 0;  }
	
.articleContainer .articleBox { width: 400px; } 	
.articleText.expands { min-height: 55px; } 
.featured-pcs .container.four .system-blocks.expands { min-height: 525px; } 
	
	
	
.articleContainer .overflow { flex-wrap:nowrap; } 
	
.articleContainer button { display: inline-block; margin:5px 0 15px 0; } 
.articleContainer button i { transform: rotate(180deg); margin-top:5px;  } 
.articleContainer button.expanded i { transform: rotate(0deg); margin-top:2px;  } 
	

.articleContainer .desktopLink { height: 38px; overflow: hidden; color: #000000; text-align: center; margin:0 auto; width: 150px; display:block; margin-top: 10px; border-radius:4px; border: 2px solid #000000; font-size:1em;   }
.articleContainer .desktopLink:before { content:'view article'; display:block;  width: 150px; padding: 9px 0;  } 
.articleContainer a i { float:none; display: inline-block; }
	
.introText { padding:25px; } 
.introText h2 { padding: 0; } 
	
.articleContainer .articleImg { height: 140px; } 
.articleContainer .articleImg div {  opacity:0.8; height: 140px; }
	
.articleContainer .articleBox:nth-child(3n+3) { border-right:1px solid #ccc; } 
	
/*	
	.featured-pcs { padding:0 25px 20px 25px; } 
	.featured-pcs .container.four .system-blocks { flex-wrap: wrap; } 
	.featured-pcs .container.four .system-blocks > div { width: 49.9%; } 
	.featured-pcs .container.four .viewmore { display: block; } 
.featured-pcs .container.four .system-blocks > div:nth-child(-n+3) { border-right:0; } 
	.featured-pcs .container.four .system-blocks > div:nth-child(-n+2) { border-bottom:1px solid #ccc; } 
	.featured-pcs .container.four .system-blocks > div:nth-child(odd) { border-right:1px solid #ccc; }
	
*/
	
	
	
	

	
			
}

@media screen and (max-width: 715px) { 
	
.uspHeader > div {  display: block; margin: 0 auto; } 
.uspHeader > div:nth-child(1) { width:240px; } 
.uspHeader > div:nth-child(2) { width:300px; } 
.uspHeader > div:nth-child(3) { width:225px; } 
	
.pageBlocks .content div h2 { padding:0 20px 10px 10px; font-size:1.4em;  } 
.pageBlocks a { font-size:1.1em; margin-left:10px; } 
.pageBlocks .content div p { font-size:0.80em;  padding: 0 15px 0 10px; } 

	
.pageBlocks .content { display: table; width: 100%; } 
.pageBlocks .content div { display:table-cell; vertical-align:middle; } 	
	
	
}

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

.carousel-content { display:block; height: auto; padding-top:20px; }
.carousel-content .right, .carousel-content .left { width:auto; text-align: center; height: auto; display: block; } 
.carousel-content .left { height:auto; } 
.carousel-content h1 { font-size: 2em; padding:12px 65px 12px 65px; text-align: center;  } 
.carousel-content h2 { padding:0 65px 12px 65px; text-align: center;}
.carousel-content strong { padding:0 65px 12px 65px; text-align: center; font-size: 2em; }
.carousel-content span { padding:0 65px 12px 65px; text-align: center;  } 
.carousel-content a { margin:10px auto 0 auto; } 
.carousel-content a span i  { display:none; } 
.carousel-content a span { padding:12px 18px; margin:2px;  } 
 
.carousel-content .right, .carousel-content .left { height: 200px; } 


.carousel-nav { display:none; } 

.carousel .logo { margin:0 auto;  height: 23px; background-size:800px 256px;  } 
.carousel .carousel-content.proAudio .logo { background-position: -605px -75px;  }
.carousel .carousel-content.proGaming .logo { background-position: -412px -75px;  }
.carousel .carousel-content.proGraphics .logo { background-position: -14px -76px; width: 192px;  }  
.carousel .carousel-content.proVideo .logo	{ background-position: -212px -78px; } 
.carousel-content .right .powered-by { display: none; } 


.inpageMenu { padding: 5px 25px 0 25px; } 
.inpageMenu .divide { display:block; }

	.system-nav { display: block; } 

		
.shopbySpec .system-nav, .shopbyUse .system-nav {  display: block;  }
	.shopbyUse .system-nav { text-align: left; } 
.shopbySpec .system-nav a { display:inline-block; } 
.shopbyUse .system-nav a { display:inline-block; text-align: center;  }
.shopbyPrice .system-nav { display: block; }

.shopby-filters { display:block;  } 
.shopby-filters > div { width:auto;} 

button.shopby { display: block; } 


.shopbyUse.expanded button.shopby:after, .shopbySpec.expanded button.shopby:after  { background: none; } 
.shopbyPrice button.shopby:after { background: none; } 
.shopbyPrice button.shopby:after {display:none;}


.shopbyPrice .system-nav, .shopbySpec .system-nav { margin:0; } 

.system-nav a { width:30%; } 
.system-nav a { padding: 12px 0; } 


.pageBlocks { display: block; }
.pageBlocks.four { flex-wrap: nowrap;} 
.pageBlocks .left, .pageBlocks .right { width:auto; }
.pageBlocks.four .left, .pageBlocks.four .right { width: auto; } 
.pageBlocks .content div { height:160px; } 
.pageBlocks .content div p { display:none; } 
.pageBlocks .footer .left, .pageBlocks .footer .right { height:13px; } 
.pageBlocks .left .footer .left { width: 70%; } 
.pageBlocks .left .footer .right { width: 30%; } 
.pageBlocks .right .footer .left { width: 30%; } 
.pageBlocks .right .footer .right { width: 70%; } 
.pageBlocks .left .footer .right { background:none; } 
.pageBlocks .right .footer .left { background:none; } 
.pageBlocks .right .footer .right { background-position: left -762px; } 
.pageBlocks .left, .pageBlocks .right { margin-top:5px; } 
.pageBlocks .left, .pageBlocks .right { margin-left:0; margin-right:0; } 


/*
.featured-pcs { margin-top:5px;  } 
.featured-pcs .header h3 { padding: 30px 10px 15px 10px; text-align: center; } 
.featured-pcs .container .system-blocks > div { padding: 15px 0; } 	
.featured-pcs .container.three .system-blocks > div { width: 100%; }
.featured-pcs .container.four .system-blocks > div { width: auto; }
.featured-pcs .container.three div div:nth-child(-n+2) { border: 0; } 
.featured-pcs .container.four .system-blocks > div:nth-child(odd) { border-right:0; } 
.featured-pcs .container.four .system-blocks > div:nth-child(-n+2) { border-bottom:0; } 
.featured-pcs .container.four .viewmore { display: none; } 	
.featured-pcs button.left-nav, .featured-pcs button.right-nav { display:block; } 
*/
	


.articleContainer { padding:25px 20px; display:block; background-color: #f0f0f0; } 
.introText h2 { font-size: 2em; } 




/*.articleContainer .mobileLink { display: inline-block; position: absolute; bottom: 15px; right: 10px; color: #fff; }*/

.featured-PCs button.left-nav { display:block; }
.featured-PCs button.right-nav { display:block; } 
.featured-PCs .systemGroup.three > div { width:100%; } 
.featured-PCs .systemGroup.three > div:nth-child(even) { border-left:0; border-right:0; } 

	
}


@media screen and (max-width: 525px) {
	
	
	.inpageMenu { padding: 5px 15px 0 15px; } 
	
	.shopbySpec .system-nav a { display:table-cell; } 
	
	
}


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

	.articleContainer .articleBox { padding-top:78px; } 
	.articleContainer .articleBox { width: 300px; } 	
	.articleContainer .overflow { flex-wrap:nowrap; width: 980px; } 
	
	.featured-PCs .featured-PCs { padding:20px 30px; }  
	.featured-PCs .system-overview.specification ul { padding: 0 10px; } 
}


@media screen and (max-width: 425px) {
	
	
	.pageBlocks .content .imageBlock { background-size: 175px 1103px; }

	.pageBlocks .content div { height:125px; } 
	.pageBlocks .content div h2 { font-size: 1.4em; }
	.pageBlocks a { font-size:0.90em; } 	
	.pageBlocks a i { margin-top:1px; } 
	.pageBlocks .left .footer .left, .pageBlocks .right .footer .right { width:80%; } 
	.pageBlocks .left .footer .right, .pageBlocks .right .footer .left { width:20%; } 
	
}



.share-page {
    position: fixed;
    bottom: 30px;
    left: -1px;
    height: 50px;
    width: 60px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    cursor: pointer;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    padding-right: 10px;
    z-index: 2;
    background: rgb(0, 0, 0);
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-image: none;
    transition: all 0.3s ease-in-out 0s;
    filter: drop-shadow(2px 0px 4px white);
}