.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

#popup {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: auto;
  position: fixed;
  z-index: 1001;
  background-color: rgba(0, 0, 0, 0.6);
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
}
#popup #popup-container {
  box-sizing: border-box;
  background: #fff;
  position: relative;
  border: 5px solid #000;
  border-radius: 4px;
  padding: 12px;
  font-size: 13px;
  margin: 30px auto;
  display: block;
  max-width: 1200px;
}
#popup #popup-container a.close {
  cursor: pointer;
  display: block;
  float: right;
  margin: 0;
  background: #fff;
  border: 0;
  color: #707070;
  cursor: pointer;
  height: 30px;
  outline: medium none;
  overflow: hidden;
  text-decoration: none !important;
  transition: all 0.3s ease-in-out 0s;
  width: 30px;
}
#popup #popup-container a.close:hover {
  text-decoration: underline;
}
#popup #popup-container a.close:before {
  font-size: 1.6em;
  line-height: 1.4em;
  margin: 0 auto;
  padding: 0;
  content: "\e903";
  font-family: "scanicons", sans-serif;
  font-style: normal;
  height: 30px;
  display: block;
  width: 30px;
  text-align: center;
}
#popup #popup-container.callMeBack-popUp {
  height: 680px;
  width: 100% !important;
  max-width: 500px;
  background: #fff;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
}
#popup #popup-container.callMeBack-popUp iframe {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1200px) {
  #popup #popup-container {
    max-width: 100%;
  }
}
@media screen and (max-width: 780px) {
  #popup {
    top: 52px;
  }
  #popup #popup-container {
    border: 0;
    margin: 0 auto;
    border-radius: 0;
  }
}
@media screen and (max-width: 500px) {
  #popup {
    top: 40px;
  }
}
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont, .toggleSwitch .toggleSwitch-inner:after, .toggleSwitch .toggleSwitch-inner:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

/* 3xs cookie popup styles */
#popup.cookie-popup {
  z-index: 3001;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}

#popup.cookie-popup > div {
  background: none;
  font-size: 13px;
  position: absolute;
  width: 100%;
  max-width: 800px;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
}

#popup.cookie-popup .scrollable-content {
  overflow-x: hidden;
  overflow-y: auto;
  height: 50vh;
}

#popup.cookie-popup > div a.close:before {
  font-size: 1.5em;
}

#popup.cookie-popup > div a.close {
  color: #000000;
}

.cookie-popup #popup-container {
  border: 6px solid rgba(0, 0, 0, 0.3);
}

#popup.cookie-popup .cookie-manage .title,
#popup.cookie-popup .cookie-banner .title {
  font-family: "uni_sanssemibold", sans-serif;
  font-size: 1.4rem;
  color: #000000;
  padding: 10px 0;
  margin: 0;
}

.cookie-popup h2 {
  font-family: "uni_sanssemibold", sans-serif;
  color: #000000;
  padding: 10px 0;
  margin: 0;
}

.cookie-popup p {
  font-family: "open_sans", sans-serif;
  padding: 10px 0;
}

.cookie-manage {
  background: #ffffff;
  padding: 28px;
}

.acknowledgementBlock h2 {
  padding: 4px 20px 0 20px;
  font-family: "open_sans-bold", sans-serif;
  font-size: 1.2em;
  color: #5b5b5b;
}

.acknowledgementBlock p {
  font-family: "open_sans", sans-serif;
  padding: 6px 12px 10px 20px;
}

.cookie-manage a {
  text-transform: uppercase;
  font-family: "open_sans-bold", sans-serif;
  color: #000000;
}

.cookie-manage button {
  width: 80px;
}

.cookie-banner {
  background: #ffffff;
  padding: 20px;
}

.acknowledgementBlock {
  display: table;
  padding: 9px 0;
}
.acknowledgementBlock > div {
  display: table-cell;
  vertical-align: top;
}
.acknowledgementBlock > div.singleCheckboxPill {
  width: 58px;
}

#popup button.cookies-accept-all {
  background: linear-gradient(to top, #000000, #4c4c4c);
  color: #fff;
  border: 0;
  height: 42px;
  width: 110px;
  font-family: "open_sans-bold", sans-serif;
  text-transform: uppercase;
}

.cookie-manage .cookies-accept-all {
  background: linear-gradient(to top, #1463a2, #3a7fbf);
  color: #fff;
  border: 0;
  height: 42px;
  width: 110px;
  font-family: "open_sans-bold", sans-serif;
  text-transform: uppercase;
}

#popup button {
  background: linear-gradient(to top, #858484, #a0a0a0);
  border: 0;
  color: #ffffff;
  font-family: "open_sans-bold", sans-serif;
  height: 42px;
  width: 150px;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}

.cookie-saved {
  background: #ffffff;
  padding: 20px;
}

@media screen and (max-width: 840px) {
  .cookie-manage {
    padding: 22px;
  }
}
/* Scan pill style */
/* ON/OFF Switch */
.toggleSwitch {
  position: relative;
  width: 55px;
  display: inline-block;
  font-size: 80%;
}

.toggleSwitch .toggleSwitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e6e6e6;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  margin: 0;
}

.toggleSwitch .toggleSwitch-inner {
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.15s ease-in-out;
  -o-transition: margin 0.15s ease-in-out;
  -moz-transition: margin 0.15s ease-in-out;
  transition: margin 0.15s ease-in-out;
}

.toggleSwitch .toggleSwitch-inner:before, .toggleSwitch .toggleSwitch-inner:after {
  float: left;
  width: 50%;
  height: 24px;
  padding: 0;
  line-height: 24px;
  font-size: 100%;
  color: #ffffff;
  font-weight: normal;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.toggleSwitch .toggleSwitch-inner:before {
  content: "\e92f";
  padding-left: 10px;
  background-color: #007bc8;
  color: #ffffff;
}

.toggleSwitch .toggleSwitch-inner:after {
  content: " ";
  padding-right: 10px;
  background-color: #cccccc;
  color: #3d3d3d;
  text-align: right;
}

.toggleSwitch .toggleSwitch-switch {
  width: 22px;
  height: 22px;
  margin: 0;
  background: #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  bottom: 0;
  right: 32px;
  -webkit-transition: right 0.15s ease-in-out;
  -o-transition: right 0.15s ease-in-out;
  -moz-transition: right 0.15s ease-in-out;
  transition: right 0.15s ease-in-out;
}

.singleCheckboxPill {
  position: relative;
  height: 30px;
  top: 50%;
  overflow: hidden;
}

.singleCheckboxPill input[type=checkbox] {
  position: absolute;
  left: 10px;
}

.singleCheckboxPill input[type=checkbox]:checked ~ .toggleSwitch .toggleSwitch-label .toggleSwitch-inner {
  margin-left: 0;
}

.singleCheckboxPill input[type=checkbox]:checked ~ .toggleSwitch .toggleSwitch-label .toggleSwitch-switch {
  right: 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.singleCheckboxPill input[type=checkbox]:focus ~ .toggleSwitch {
  outline: thin dotted #333;
  outline: 0;
}

.singleCheckboxPill label {
  position: absolute;
  cursor: pointer;
  padding-left: 65px;
  display: inline-block;
  text-align: left;
  line-height: 24px;
  width: 100%;
  z-index: 1;
  height: 24px;
  font-weight: 200;
}

/* black pill style changes */
.singleCheckboxPill .toggleSwitch .toggleSwitch-label {
  border: 3px solid #cccccc;
}

.singleCheckboxPill input[type=checkbox]:checked ~ .toggleSwitch .toggleSwitch-label {
  border: 3px solid #000000;
}

.singleCheckboxPill input[type=checkbox]:checked ~ .toggleSwitch .toggleSwitch-label .toggleSwitch-switch {
  right: 6px;
  box-shadow: none;
  background: #000000;
}

.singleCheckboxPill input[type=checkbox]:disabled ~ .toggleSwitch .toggleSwitch-label {
  border: 3px solid #b4b4b4;
}
.singleCheckboxPill input[type=checkbox]:disabled ~ .toggleSwitch .toggleSwitch-label .toggleSwitch-switch {
  background: #b4b4b4;
}
.singleCheckboxPill input[type=checkbox]:disabled ~ .toggleSwitch .toggleSwitch-inner:before {
  color: #b4b4b4;
}

.singleCheckboxPill input[type=checkbox]:checked {
  display: block;
  top: 7px;
}

.singleCheckboxPill input[type=checkbox] {
  display: none;
}

.toggleSwitch .toggleSwitch-switch {
  width: 18px;
  height: 18px;
  margin: 0;
  background: #cccccc;
  box-shadow: none;
  top: 6px;
}

.toggleSwitch .toggleSwitch-inner:after {
  background: none;
}

.toggleSwitch .toggleSwitch-inner:before {
  color: #000000;
  background-color: #ffffff;
  font-size: 1.3em;
  font-weight: bold;
  padding-left: 7px;
}
/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE6/7/8/9 & FF3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
 * Known issue: no IE6 support.
 */
[hidden] {
  display: none;
}

/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select,
textarea {
  font-family: "open_sans", sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE6/7.
 */
body {
  margin: 0;
}

/* =============================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:active,
a:hover {
  outline: 0;
}

/* =============================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE6/7.
 * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
 */
b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome.
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Addresses margins set differently in IE6/7.
 */
p,
pre {
  margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome.
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE6/7.
 */
q {
  quotes: none;
}

/*
 * Addresses `quotes` property not supported in S4.
 */
q:before,
q:after {
  content: "";
  content: none;
}

small {
  font-size: 75%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* =============================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}

dd {
  margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
 * 2. Improves image quality when scaled in IE7.
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* =============================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11.
 */
figure {
  margin: 0;
}

/* =============================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7.
 */
form {
  margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9.
 * 2. Corrects text not wrapping in FF3.
 * 3. Corrects alignment displayed oddly in IE6/7.
 */
legend {
  border: 0; /* 1 */
  padding: 0;
  white-space: normal; /* 2 */
  *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

/*
 * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * UA stylesheet.
 */
button,
input {
  line-height: normal; /* 1 */
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE6.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  *overflow: visible; /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9.
 * 2. Removes excess padding in IE8/9.
 * 3. Removes excess padding in IE7.
 *    Known issue: excess padding remains in IE6.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  *height: 13px; /* 3 */
  *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 *    to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/* =============================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

.breadcrumb {
  border-top: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
  font-family: "open_sans", sans-serif;
  font-size: 0.8em;
  height: 40px;
  background: #2e2e2e;
  display: table;
  width: 1280px;
  margin: 0 auto;
}
.breadcrumb > ul {
  list-style: none;
  padding: 2px 36px 10px;
  padding-left: 30px;
  line-height: 1em;
  margin: 0;
  display: table-cell;
  float: left;
}
.breadcrumb > ul > li {
  display: inline-block;
  float: left;
  height: 25px;
}
.breadcrumb > ul > li > span {
  display: inline-block;
  color: #5b5b5b;
  padding: 12px 18px;
}
.breadcrumb > ul > li strong {
  display: inline-block;
  padding: 10px 10px;
  color: #fff;
  font-weight: normal;
}
.breadcrumb > ul > li a {
  display: inline-block;
  text-decoration: none;
  transition: ease-in-out 0.2s;
  color: #5b5b5b;
  padding: 12px 12px;
}
.breadcrumb > ul > li a strong {
  padding: 0;
}
.breadcrumb > ul > li a:hover {
  color: #e8e8e8;
}
.breadcrumb > ul > li:first-child {
  padding-right: 6px;
}
.breadcrumb > ul > li:first-child a {
  overflow: hidden;
  display: block;
  padding: 0;
  font-size: 1.8em;
  width: 26px;
  height: 13px;
  color: #a6a6a6;
  overflow: hidden;
  margin-top: 10px;
}
.breadcrumb > ul > li:first-child a:before {
  content: "\e95f";
  font-family: "scanicons", sans-serif;
  font-style: normal;
  padding-right: 6px;
  display: inline-block;
  padding-bottom: 4px;
}
.breadcrumb > ul > li:first-child a:hover {
  color: #e8e8e8;
}
.breadcrumb > ul > li > i {
  width: 7px;
  height: 7px;
  border-top: 1px solid #8e8e8e;
  border-right: 1px solid #8e8e8e;
}
.breadcrumb > ul > li > a {
  padding: 10px 10px;
  font-size: 1em;
  color: #a6a6a6;
}
.breadcrumb > ul > li:last-child {
  font-size: 1em;
}
.breadcrumb > ul i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg);
}
.breadcrumb > ul:first-child:before {
  content: "";
}

@media screen and (max-width: 1280px) {
  .breadcrumb {
    width: 100%;
  }
}
@media screen and (max-width: 780px) {
  .breadcrumb ul {
    padding-left: 15px;
  }
}
@font-face {
  font-family: uni_sansbold;
  src: url("../../images/fonts/Uni-Sans-Bold-130a186c0d.eot?#iefix") format("embedded-opentype");
  src: url("../../images/fonts/Uni-Sans-Bold-130a186c0d.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Uni-Sans-Bold-cd3f53d3a3.woff") format("woff"), url("../../images/fonts/Uni-Sans-Bold-3e0aefa0b2.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: uni_sansbook;
  src: url("../../images/fonts/Uni_Sans_Book-webfont-ffd5ddcf5b.eot");
  src: url("../../images/fonts/Uni_Sans_Book-webfont-ffd5ddcf5b.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Uni_Sans_Book-webfont-82c954d1af.woff2") format("woff2"), url("../../images/fonts/Uni_Sans_Book-webfont-aec57401f4.woff") format("woff"), url("../../images/fonts/Uni_Sans_Book-webfont-961bcce38b.ttf") format("truetype"), url("../../images/fonts/Uni_Sans_Book-webfont-043900d5e7.svg#uni_sansbook") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: uni_sanssemibold;
  src: url("../../images/fonts/Uni_Sans_SemiBold-webfont-ce6f7e8c61.eot");
  src: url("../../images/fonts/Uni_Sans_SemiBold-webfont-ce6f7e8c61.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Uni_Sans_SemiBold-webfont-819ef434a5.woff2") format("woff2"), url("../../images/fonts/Uni_Sans_SemiBold-webfont-2e4c1cb3f8.woff") format("woff"), url("../../images/fonts/Uni_Sans_SemiBold-webfont-de5f917a57.ttf") format("truetype"), url("../../images/fonts/Uni_Sans_SemiBold-webfont-95eaf002a1.svg#uni_sanssemibold") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: uni_sans_regular;
  src: url("../../images/fonts/Uni_Sans_Regular-webfont-7c105493bb.eot");
  src: url("../../images/fonts/Uni_Sans_Regular-webfont-7c105493bb.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Uni_Sans_Regular-webfont-d5bd7e08bf.woff2") format("woff2"), url("../../images/fonts/Uni_Sans_Regular-webfont-da6be4d774.woff") format("woff"), url("../../images/fonts/Uni_Sans_Regular-webfont-e777f14c46.ttf") format("truetype"), url("../../images/fonts/Uni_Sans_Regular-webfont-e66c20afc8.svg#uni_sans_regularregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: scanicons;
  src: url("../../images/fonts/scanicons-79aadbce3c.eot");
  src: url("../../images/fonts/scanicons-79aadbce3c.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/scanicons-19cebe826b.woff") format("woff"), url("../../images/fonts/scanicons-f1bb29e3a4.ttf") format("truetype"), url("../../images/fonts/scanicons-d5c18215e3.svg#scanicons") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: open_sans;
  src: url("../../images/fonts/opensans-regular-webfont-9d1c12b712.eot");
  src: url("../../images/fonts/opensans-regular-webfont-9d1c12b712.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/opensans-regular-webfont-f2b0ed79b7.woff") format("woff"), url("../../images/fonts/opensans-regular-webfont-629a55a7e7.ttf") format("truetype"), url("../../images/fonts/opensans-regular-webfont-37a18bdac3.svg#open_sans") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: open_sans-bold;
  src: url("../../images/fonts/opensans-bold-webfont-0ba827c0a8.eot");
  src: url("../../images/fonts/opensans-bold-webfont-0ba827c0a8.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/opensans-bold-webfont-3177f09919.woff") format("woff"), url("../../images/fonts/opensans-bold-webfont-5014568504.ttf") format("truetype"), url("../../images/fonts/opensans-bold-webfont-97a6a10527.svg#open_sans-bold") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: open_sans-semibold;
  src: url("../../images/fonts/opensans-semibold-webfont-fd9faec008.eot");
  src: url("../../images/fonts/opensans-semibold-webfont-fd9faec008.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/opensans-semibold-webfont-2432afba5c.woff") format("woff"), url("../../images/fonts/opensans-semibold-webfont-33f225b8f5.ttf") format("truetype"), url("../../images/fonts/opensans-semibold-webfont-8f4503cf30.svg#open_sans-bold") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Poppins font start */
@font-face {
  font-family: Poppins-Light;
  src: url("../../images/fonts/Poppins-Light-197cace4cf.eot");
  src: url("../../images/fonts/Poppins-Light-197cace4cf.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Poppins-Light-e577e3ba5c.woff2") format("woff2"), url("../../images/fonts/Poppins-Light-b9a56777a8.woff") format("woff"), url("../../images/fonts/Poppins-Light-fcc40ae9a5.ttf") format("truetype"), url("../../images/fonts/Poppins-Light.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Poppins-Regular;
  src: url("../../images/fonts/Poppins-Regular-8a12a39012.eot");
  src: url("../../images/fonts/Poppins-Regular-8a12a39012.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Poppins-Regular-4ca79fd9a4.woff2") format("woff2"), url("../../images/fonts/Poppins-Regular-41dd109294.woff") format("woff"), url("../../images/fonts/Poppins-Regular-093ee89be9.ttf") format("truetype"), url("../../images/fonts/Poppins-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Poppins-Medium;
  src: url("../../images/fonts/Poppins-Medium-bbad072474.eot");
  src: url("../../images/fonts/Poppins-Medium-bbad072474.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Poppins-Medium-3b48234d19.woff2") format("woff2"), url("../../images/fonts/Poppins-Medium-2ba582f707.woff") format("woff"), url("../../images/fonts/Poppins-Medium-bf59c687bc.ttf") format("truetype"), url("../../images/fonts/Poppins-Medium.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Poppins-SemiBold;
  src: url("../../images/fonts/Poppins-SemiBold-01ef2d813b.eot");
  src: url("../../images/fonts/Poppins-SemiBold-01ef2d813b.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Poppins-SemiBold-a36b89cf7f.woff2") format("woff2"), url("../../images/fonts/Poppins-SemiBold-5cd938c7e4.woff") format("woff"), url("../../images/fonts/Poppins-SemiBold-6f1520d107.ttf") format("truetype"), url("../../images/fonts/Poppins-SemiBold.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Poppins-Bold;
  src: url("../../images/fonts/Poppins-Bold-e1895c50d7.eot");
  src: url("../../images/fonts/Poppins-Bold-e1895c50d7.eot?#iefix") format("embedded-opentype"), url("../../images/fonts/Poppins-Bold-72eea25a55.woff2") format("woff2"), url("../../images/fonts/Poppins-Bold-b4b76be527.woff") format("woff"), url("../../images/fonts/Poppins-Bold-08c20a4879.ttf") format("truetype"), url("../../images/fonts/Poppins-Bold.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Poppins font end */
.icon:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.icon.login:before {
  content: "\e90e";
}

.icon.help:before {
  content: "\e908";
}

.icon.location:before {
  content: "\e90c";
}

.icon.telephone:before {
  content: "\e919";
}

.icon.twitter:before {
  content: "\e91b";
}

.icon.googlePlus:before {
  content: "\e907";
}

.icon.facebook:before {
  content: "\e905";
}

.icon.instagram:before {
  content: "\e946";
}

.icon.linkedin:before {
  content: "\e935";
}

.icon.youTube:before {
  content: "\e947";
}

.icon.reddit:before {
  content: "\e949";
}

.icon.close:before {
  content: "\e903";
}

.icon.bin:before {
  content: "\e94b";
}
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold, footer .contact-bar > div .social > span, footer .contact-bar > div a.how-to-find-us, footer .contact-bar > div a.opening-times, footer .call-us-bar {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont, footer .contact-bar > div a.how-to-find-us:before, footer .contact-bar > div a.opening-times:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

footer .contC {
  width: 1200px;
  margin: 0 auto;
}

footer .footerTop {
  background-color: #2e2e2e;
  padding: 30px 0 20px 0;
}

.footerTop .col-container {
  display: flex;
}

.footerTop .col1 {
  width: 20%;
}

.footerTop .col2 {
  width: 21%;
}

.footerTop .col3 {
  width: 32%;
}

.footerTop .col4 {
  width: 26%;
}

.footerTop .col-container .title {
  color: #ffffff;
  font-family: "uni_sanssemibold", sans-serif;
  font-size: 1.1em;
  padding: 0 0 8px 0;
  display: inline-block;
}

.footerTop .col-container .link {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-family: "uni_sanssemibold", sans-serif;
  font-size: 1.2em;
  line-height: 0.5em;
  margin: 0;
  text-decoration: none;
  padding: 12px 0;
  margin: 0;
  width: 100%;
  text-align: left;
}

.footerTop .col-container .link:hover {
  text-decoration: none;
}

.footerTop .col-container .link.expanded:before, .footerTop .col-container .link.collapsed:before {
  overflow: hidden;
  display: block;
  line-height: 1em;
}

.footerTop .col-container .link.expanded:before {
  content: "\e93d";
}

.footerTop .col-container .link.collapsed:before {
  content: "\e942";
}

.footerTop .infoLinks ul {
  padding: 0;
  margin: 0;
}

.footerTop .infoLinks ul li {
  list-style: none;
  padding: 0 0 10px 0;
}

.footerTop .infoLinks ul li a {
  color: #a5a5a5;
  font-family: "open_sans", sans-serif;
  font-size: 0.8em;
  text-decoration: none;
}

.footerTop .order-info p {
  color: #a5a5a5;
  font-family: "open_sans", sans-serif;
  font-size: 0.8em;
  margin: 0;
  padding: 0 0 15px 0;
}

.footerTop .order-info .date {
  display: block;
  color: #ffffff;
}

.footerTop .tracker .trackBox {
  background-color: #3e3e40;
  padding: 12px 0;
  margin-top: 10px;
  margin-right: 40px;
}
.footerTop .tracker .trackBox .inner {
  padding: 0 12px 8px;
}
.footerTop .tracker .trackBox .fieldCont {
  display: inline-block;
  float: left;
}
.footerTop .tracker .trackBox .fieldCont input {
  font-size: 0.75em;
  padding: 9px;
  font-family: "open_sans", sans-serif;
  border: 0;
  width: 100px;
}
.footerTop .tracker .trackBox .fieldCont input:first-child {
  margin-bottom: 8px;
}
.footerTop .tracker .trackBox button {
  display: inline-block;
  background: none;
  color: #ffffff;
  font-family: "open_sans-bold", sans-serif;
  border: 0;
  font-size: 0.85em;
  padding: 0;
  margin: 6px 0 0 14px;
}
.footerTop .tracker .trackBox button i {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 0 -4px 6px;
  background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-position: -110px -22px;
  background-size: 1575px 1575px;
}

.footerTop .payment-logos ul {
  margin: 0;
  padding: 0;
}
.footerTop .payment-logos li {
  display: inline-block;
  margin-right: 2px;
  width: 54px;
  height: 34px;
  background: #4a4a4a url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-size: 900px 900px;
  padding: 0 0 7px 0;
}
.footerTop .payment-logos li.visa {
  background-position: -68px -38px;
}
.footerTop .payment-logos li.mastercard {
  background-position: -127px -84px;
}
.footerTop .payment-logos li.maestro {
  background-position: -9px -130px;
}
.footerTop .payment-logos li.aexpress {
  background-position: -69px -82px;
}
.footerTop .payment-logos li.amazonpay {
  background-position: -68px -130px;
}
.footerTop .payment-logos li.paypal {
  background-position: -9px -36px;
}
.footerTop .payment-logos li.visadebit {
  background-position: -128px -38px;
}
.footerTop .payment-logos li.visaelectron {
  background-position: -10px -84px;
}
.footerTop .payment-logos li.bitcoin {
  background-position: -128px -130px;
}
.footerTop .payment-logos li.applepay {
  background-position: -70px -176px;
}
.footerTop .payment-logos li.googlepay {
  background-position: -128px -176px;
}
.footerTop .payment-logos li.bitcoincash {
  background-position: -9px -176px;
}

footer .secure-logos {
  background-color: #000000;
}

footer .secure-logos .securityLogos {
  display: inline-block;
  height: 38px;
  background: #000000 url("../../images/sprite-footer-logos-53fd4b074d.png") no-repeat;
  background-size: 180px 285px;
  overflow: hidden;
  line-height: 5em;
  font-size: 3em;
  margin: 0 20px;
}

footer .secure-logos .securityLogos.mcafee {
  background-position: 0 -94px;
  width: 90px;
}

footer .secure-logos .securityLogos.norton {
  background-position: -97px -94px;
  width: 78px;
}

footer .secure-logos .securityLogos.visa {
  background-position: -10px -136px;
  width: 72px;
}

footer .secure-logos .securityLogos.mastercard {
  background-position: -95px -136px;
  width: 80px;
}

footer .secure-logos .securityLogos.rohs {
  background-position: -23px -178px;
  width: 50px;
}

footer .secure-logos .securityLogos.weee {
  width: 200px;
  display: inline-block;
  line-height: 0.8em;
  font-size: 1em;
  background: none;
  text-decoration: none;
}

footer .secure-logos .securityLogos.weee i {
  background: #000000 url("../../images/sprite-footer-logos-53fd4b074d.png") no-repeat;
  background-size: 180px 285px;
  background-position: -123px -178px;
  width: 26px;
  font-size: 1em;
  display: block;
  float: left;
  margin: 0 10px;
  height: 50px;
}

footer .secure-logos .securityLogos.weee span {
  margin-left: 36px;
  display: block;
  color: #a2a2a2;
  font-size: 0.7em;
  padding-top: 10px;
  text-align: left;
}

footer .secure-logos .contC {
  text-align: center;
  padding-top: 30px;
}

footer .credit-broker {
  background-color: #000000;
}

footer .credit-broker p {
  color: #707070;
  font-size: 0.5em;
  text-align: center;
  font-family: "open_sans", sans-serif;
  padding: 0 20px;
}

footer .copy-right {
  background-color: #000000;
}

footer .copy-right p {
  color: #888888;
  font-size: 0.55em;
  text-align: center;
  font-family: "open_sans", sans-serif;
  padding: 10px 0;
}

footer {
  margin: 0 auto;
  width: 1280px;
  background-color: #000000;
  bottom: 0;
}
footer .call-us-bar {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 21px 0;
  font-size: 1.2em;
}
footer .call-us-bar a {
  color: #fff;
  text-decoration: none;
  padding-left: 23px;
  margin-right: 23px;
  border-left: 1px solid #fff;
}
footer .call-us-bar a:first-child {
  border-left: 0;
  padding-left: 0;
}
footer .call-us-bar a:first-child > strong {
  padding-right: 6px;
}
footer .call-us-bar a > i {
  display: none;
}
footer .contact-bar {
  display: table;
  height: 100px;
  width: 100%;
  background: #fff;
  font-size: 0.85em;
}
footer .contact-bar > div {
  display: table-cell;
}
footer .contact-bar > div.address {
  width: 610px;
}
footer .contact-bar > div.address > i {
  display: block;
  background: url(../../images/scan-logos-svg-b4451de7c5.svg);
  background-position: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  text-indent: 140px;
  font-size: 3em;
  line-height: 3em;
  background-size: 110px 29px;
  width: 130px;
  height: 38px;
  margin-top: 30px;
  margin-left: 40px;
  float: left;
}
footer .contact-bar > div.address > p {
  font-size: 0.9em;
  line-height: 1.6em;
  margin-top: 32px;
  margin-right: 100px;
}
footer .contact-bar > div a.how-to-find-us, footer .contact-bar > div a.opening-times {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.3em;
  color: #333;
  text-decoration: none;
  padding-left: 27px;
  padding-top: 8px;
}
footer .contact-bar > div a.how-to-find-us:before, footer .contact-bar > div a.opening-times:before {
  display: block;
  position: absolute;
  margin-left: -27px;
}
footer .contact-bar > div a.how-to-find-us:hover, footer .contact-bar > div a.opening-times:hover {
  color: #3d70b7;
}
footer .contact-bar > div a.how-to-find-us:before {
  content: "\e90c";
  font-size: 1.2em;
}
footer .contact-bar > div a.opening-times {
  margin-left: 30px;
  padding-left: 26px;
}
footer .contact-bar > div a.opening-times:before {
  content: "\e943";
  font-size: 1.5em;
  margin-left: -34px;
  line-height: 0.9em;
}
footer .contact-bar > div .social {
  width: 294px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
  padding-top: 8px;
  border-left: 1px solid #bcbec0;
  font-size: 0.95em;
}
footer .contact-bar > div .social > span {
  display: block;
  float: left;
  font-size: 1.45em;
  padding: 2px 10px 0 26px;
}
footer .contact-bar > div .social a {
  display: block;
  float: left;
  height: 22px;
  width: 22px;
  overflow: hidden;
  line-height: 3em;
  font-size: 2.7em;
  color: #333;
  text-decoration: none;
  transition: ease-in-out 0.3s;
  margin-right: 6px;
  margin-top: 3px;
}
footer .contact-bar > div .social a:last-child {
  margin-right: 0;
}
footer .contact-bar > div .social a:hover {
  color: #3d70b7;
}
footer .contact-bar > div .social a.googlePlus {
  width: 38px;
}
footer .contact-bar > div .social a.youTube {
  width: 45px;
  margin-top: 1px;
}
footer .contact-bar > div .social a.instagram {
  width: 26px;
}
footer .contact-bar > div .social a.twitter {
  width: 24px;
}
footer .contact-bar > div .social a.facebook {
  width: 23px;
}
footer .contact-bar > div .social a.reddit {
  width: 23px;
}
footer .contact-bar > div .social a i {
  display: block;
  height: 22px;
  width: 22px;
  font-size: 0.6em;
  line-height: 1em;
}
footer .contact-bar > div .social a i.facebook {
  font-size: 0.55em;
}
footer .contact-bar > div .social a i.googlePlus {
  font-size: 0.77em;
  line-height: 0.83em;
  width: 38px;
  margin-left: 3px;
}
footer .contact-bar > div .social a i.youTube {
  font-size: 1.1em;
  line-height: 0.58em;
}
footer .contact-bar > div .social a:last-child {
  margin-right: 0;
}
footer .contact-bar > div a.royal-warrant {
  display: none;
  vertical-align: middle;
  width: 200px;
  text-decoration: none;
  color: #333;
  margin-left: 30px;
  padding-top: 10px;
}
footer .contact-bar > div a.royal-warrant > i {
  background: url("../../images/sprite-footer-logos-53fd4b074d.png");
  background-size: 120px 190px;
  display: block;
  width: 60px;
  height: 60px;
  float: left;
}
footer .contact-bar > div a.royal-warrant > i:before {
  content: " ";
}
footer .contact-bar > div a.royal-warrant > span {
  margin-left: 72px;
  font-size: 0.66em;
  display: block;
  text-transform: uppercase;
  line-height: 1.2em;
}
footer .trust-bar {
  background: #eaeaea;
  text-align: center;
}
footer .trust-bar .trust {
  border-right: 1px solid #bcbec0;
  display: inline-block;
  vertical-align: top;
  margin: 20px 0;
}
footer .trust-bar .trust > a {
  width: 124px;
  height: 38px;
  background: url(../../images/sprite-certified-99eeee5aad.png);
  background-size: 120px 117px;
  display: inline-block;
  background-repeat: no-repeat;
  text-indent: 124px;
  line-height: 3em;
  overflow: hidden;
  margin: 0 10px;
}
footer .trust-bar .trust > a.iso-certified {
  background-position: 0 -36px;
}
footer .trust-bar .trust > a.royal-warrant {
  display: none;
}
footer .trust-bar .security {
  text-align: center;
  padding: 20px 0;
  display: inline-block;
  vertical-align: top;
}
footer .trust-bar .security .securityLogos {
  display: inline-block;
  vertical-align: top;
  height: 38px;
  background: url("../../images/sprite-footer-logos-53fd4b074d.png");
  background-repeat: no-repeat;
  background-size: 180px 285px;
  overflow: hidden;
  line-height: 5em;
  font-size: 3em;
  margin: 0 10px;
}
footer .trust-bar .security .securityLogos.mcafee {
  background-position: 0 -94px;
  width: 90px;
  display: none !important;
}
footer .trust-bar .security .securityLogos.norton {
  background-position: -97px -94px;
  width: 78px;
}
footer .trust-bar .security .securityLogos.visa {
  background-position: -10px -136px;
  width: 72px;
}
footer .trust-bar .security .securityLogos.mastercard {
  background-position: -95px -136px;
  width: 80px;
}
footer .trust-bar .security .securityLogos.rohs {
  background-position: -23px -178px;
  width: 50px;
}
footer .trust-bar .security .securityLogos.modernslavery {
  background-position: -111px -230px;
  width: 50px;
}
footer .trust-bar .security .securityLogos.weee {
  width: 200px;
  display: inline-block;
  line-height: 0.8em;
  font-size: 1em;
  background: none;
  text-decoration: none;
}
footer .trust-bar .security .securityLogos.weee i {
  height: 52px;
  background: url("../../images/sprite-footer-logos-53fd4b074d.png");
  background-repeat: no-repeat;
  background-size: 180px 285px;
  overflow: hidden;
  line-height: 5em;
  background-position: -123px -178px;
  width: 26px;
  font-size: 1em;
  display: block;
  float: left;
  margin: 0 10px;
}
footer .trust-bar .security .securityLogos.weee span {
  margin-left: 36px;
  display: block;
  color: #a2a2a2;
  font-size: 0.6em;
  padding-top: 10px;
  text-align: left;
}
footer .trust-bar .copyright {
  padding-top: 16px;
  padding-bottom: 30px;
  border-top: 1px solid #bcbec0;
  margin: 0 110px;
  color: #5b5b5b;
  font-size: 0.7em;
}

@media screen and (max-width: 1280px) {
  footer .contC {
    width: auto;
  }
  footer .footerTop {
    padding: 0;
  }
  .footerTop .col-container {
    display: block;
    padding: 0 20px;
  }
  footer .infoLinks ul li {
    display: inline-block;
    width: 24.5%;
  }
  .footerTop .col1 {
    width: auto;
    border-bottom: 1px solid #494949;
    padding: 20px 0;
  }
  .footerTop .col2 {
    width: auto;
    border-bottom: 1px solid #494949;
    padding: 20px 0;
  }
  .footerTop .col3 {
    width: auto;
    border-bottom: 1px solid #494949;
    padding: 20px 0;
  }
  .footerTop .col4 {
    width: auto;
    padding: 20px 0;
  }
  footer .payment-logos {
    padding-right: 0;
  }
}
@media screen and (max-width: 725px) {
  .footerTop .col4 {
    display: none;
  }
  .footerTop .col3 {
    border-bottom: 0;
  }
}
@media screen and (max-width: 800px) {
  .footerTop .col1, .footerTop .col2, .footerTop .col3, .footerTop .col4 {
    padding: 15px 0 10px 0;
  }
  .footerTop .infoLinks.collapsed, .footerTop .order-info.collapsed, .footerTop .tracker.collapsed {
    overflow: hidden;
  }
  .footerTop .order-info {
    padding: 0 0 8px 0;
    border-bottom: 1px solid #494949;
  }
  .footerTop .tracker {
    padding: 12px 0 0 0;
  }
  footer .secure-logos {
    display: none;
  }
  .footerTop .col-container .title {
    display: none;
  }
  .footerTop .col-container .link {
    display: block;
  }
  .footerTop .tracker .trackBox {
    margin-top: 18px;
  }
  .footerTop .col-container .link:before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    float: right;
    margin-top: -8px;
    text-indent: 50px;
    background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
    background-size: 2250px 2250px;
  }
  .footerTop .col-container .collapsed .link:before {
    background-position: -1436px -96px;
  } /* + */
  .footerTop .col-container .expanded .link:before {
    background-position: -1479px -92px;
  } /* - */
}
@media screen and (max-width: 650px) {
  .footerTop .infoLinks ul li {
    width: 32.5%;
  }
  .footerTop .tracker .trackBox {
    width: 100%;
  }
}
@media screen and (max-width: 550px) {
  .footerTop .infoLinks.expanded, .footerTop .order-info.expanded, .footerTop .tracker.expanded {
    overflow: hidden;
  }
  .footerTop .col-container {
    padding: 0 18px;
  }
  .footerTop .col-container .title {
    font-size: 1em;
    padding: 0 0 8px 0;
  }
  .footerTop .col-container .link {
    font-size: 1em;
  }
}
@media screen and (max-width: 500px) {
  .footerTop .infoLinks ul li {
    width: 49%;
  }
}
@media screen and (max-width: 3400px) and (min-width: 900px) {
  footer .links-tracking-payments > div.links > div.expanded div.expands {
    height: auto !important;
  }
}
@media screen and (max-width: 1280px) and (min-width: 20px) {
  footer .links-tracking-payments > div.secure-payments {
    padding-right: 8px;
  }
  footer .contact-bar > div.address {
    width: 540px;
  }
}
@media screen and (max-width: 1200px) and (min-width: 20px) {
  footer {
    width: 100%;
  }
  footer .contact-bar > div.address {
    width: 510px;
  }
  footer .contact-bar > div.address > p {
    margin-right: 10px;
  }
  footer .contact-bar > div a.royal-warrant {
    display: none;
  }
  footer .contact-bar > div .social {
    border-left: 0;
    width: 168px;
  }
  footer .contact-bar > div .social > span {
    display: none;
  }
  footer .trust-bar .trust {
    border-right: 0;
    padding-bottom: 16px;
  }
  footer .trust-bar .trust > a.royal-warrant {
    display: none;
    vertical-align: top;
    width: 270px;
    text-decoration: none;
    color: #333;
    background: none;
  }
  footer .trust-bar .trust > a.royal-warrant > i {
    background: url("../../images/sprite-certified-99eeee5aad.png");
    background-size: 114px 111px;
    display: block;
    background-position: -1px -71px;
    width: 43px;
    height: 52px;
    float: left;
    margin-top: -1px;
  }
  footer .trust-bar .trust > a.royal-warrant > i:before {
    content: " ";
  }
  footer .trust-bar .trust > a.royal-warrant > span {
    margin-left: 58px;
    font-size: 0.66em;
    display: block;
    text-transform: uppercase;
    line-height: 1.2em;
    text-align: left;
    text-indent: 0;
  }
}
@media screen and (max-width: 1180px) and (min-width: 20px) {
  footer .links-tracking-payments > div.delivery-tracking .quickTrackBlock .trackarea > form {
    display: table;
  }
  footer .links-tracking-payments > div.delivery-tracking .quickTrackBlock .trackarea > form span.fieldCont {
    display: table-cell;
  }
  footer .links-tracking-payments > div.delivery-tracking .quickTrackBlock .trackarea > form span.fieldCont > input {
    width: 44%;
  }
  footer .links-tracking-payments > div.delivery-tracking .quickTrackBlock .trackarea > form > button {
    display: table-cell;
  }
}
@media screen and (max-width: 1130px) and (min-width: 20px) {
  footer .links-tracking-payments > div {
    display: inline-block;
  }
  footer .links-tracking-payments > div.links {
    width: 64%;
  }
  footer .links-tracking-payments > div.delivery-tracking {
    padding-left: 0;
    padding-right: 0;
  }
  footer .links-tracking-payments > div.secure-payments {
    display: block;
    width: 100%;
    background: #cccccc;
    text-align: center;
    padding: 6px 0;
  }
  footer .links-tracking-payments > div.secure-payments > span.title {
    display: none;
  }
  footer .links-tracking-payments > div.secure-payments > ul.securePaymentLogos {
    margin: 0 auto;
    padding: 0;
  }
  footer .links-tracking-payments > div.secure-payments > ul.securePaymentLogos > li {
    display: inline-block;
    float: none;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 1090px) and (min-width: 20px) {
  footer .trust-bar .trust {
    border-bottom: 1px solid #bcbec0;
  }
}
@media screen and (max-width: 1060px) and (min-width: 20px) {
  footer .contact-bar > div.address {
    width: 410px;
  }
  footer .contact-bar > div.address > i {
    height: 50px;
    margin-top: 20px;
  }
  footer .contact-bar > div.address > p {
    margin-top: 10px;
  }
  /*footer .contact-bar > div .social { width:94px; 
  	> a { margin-top: 4px; }
  }*/
}
@media screen and (max-width: 950px) and (min-width: 20px) {
  footer .contact-bar > div.address {
    width: 380px;
  }
}
@media screen and (max-width: 900px) and (min-width: 20px) {
  footer .links-tracking-payments > div.links {
    padding-right: 30px;
    width: 54%;
  }
  footer .links-tracking-payments > div.links > div {
    display: block;
    width: 100% !important;
    border-bottom: 1px solid #bcbec0;
  }
  footer .links-tracking-payments > div.links > div.expanded {
    height: 40px;
    overflow: hidden;
  }
  footer .links-tracking-payments > div.links > div.collapsed .expands {
    height: auto !important;
  }
  footer .links-tracking-payments > div.links > div span.title {
    display: none;
  }
  footer .links-tracking-payments > div.links > div > button.link {
    display: block;
    font-family: "open_sans-bold", sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #5b5b5b;
    display: block;
    font-size: 15px;
    padding: 12px 0;
    margin: 0;
    width: 100%;
    text-align: left;
  }
  footer .links-tracking-payments > div.links > div > button.link:before {
    font-family: "scanicons", sans-serif;
    font-style: normal;
    content: " \e93d";
    float: right;
    margin-right: 8px;
  }
  footer .links-tracking-payments > div.links > div > div > ul {
    padding: 0;
  }
  footer .links-tracking-payments > div.delivery-tracking {
    width: 35%;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery.expanded {
    height: 40px;
    overflow: hidden;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery.collapsed > div.expands {
    height: auto !important;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery.collapsed > div.expands > p {
    padding-left: 20px;
    padding-right: 20px;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.mobileDeliveryInformation.expanded {
    height: 40px;
    overflow: hidden;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.mobileDeliveryInformation.collapsed .expands {
    height: auto !important;
  }
  footer .contact-bar {
    display: block;
    text-align: center;
    height: 124px;
  }
  footer .contact-bar > div {
    display: block;
  }
  footer .contact-bar > div.address {
    text-align: center;
    width: 100%;
  }
  footer .contact-bar > div.address > i {
    margin: 12px auto 0;
    float: none;
  }
  footer .contact-bar > div.address > p {
    margin-top: 0;
    padding: 4px 0;
  }
  footer .contact-bar > div a.royal-warrant {
    display: none;
  }
  footer .contact-bar > div a.how-to-find-us:after, footer .contact-bar > div a.opening-times:after {
    content: " ";
    border-right: 1px solid #bcbec0;
    display: inline-block;
    height: 16px;
    padding-left: 30px;
    position: relative;
  }
}
@media screen and (max-width: 780px) and (min-width: 20px) {
  footer .links-tracking-payments > div.secure-payments .securePaymentLogos li {
    margin-right: 4px;
  }
}
@media screen and (max-width: 670px) and (min-width: 20px) {
  footer .links-tracking-payments > div {
    display: block;
    padding-top: 0;
  }
  footer .links-tracking-payments > div.links {
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    margin: 0 auto;
  }
  footer .links-tracking-payments > div.links > div {
    padding: 0;
    margin: 0;
  }
  footer .links-tracking-payments > div.links > div > button.link {
    padding: 14px 20px;
  }
  footer .links-tracking-payments > div.links > div > div ul {
    padding: 0 20px;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div {
    display: block;
    width: 100% !important;
    border-bottom: 1px solid #bcbec0;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery.expanded, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div.expanded {
    height: 40px;
    overflow: hidden;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery.collapsed, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div.collapsed {
    height: auto !important;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery.collapsed .expands, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div.collapsed .expands {
    height: auto !important;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery span.title, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div span.title {
    display: none;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery > button.link, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div > button.link {
    display: block;
    font-family: "open_sans-bold", sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #5b5b5b;
    display: block;
    font-size: 15px;
    padding: 12px 0;
    margin: 0;
    width: 100%;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery > button.link:before, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div > button.link:before {
    font-family: "scanicons", sans-serif;
    font-style: normal;
    content: " \e93d";
    float: right;
    margin-right: 8px;
  }
  footer .links-tracking-payments > div.delivery-tracking > div.delivery > div > ul, footer .links-tracking-payments > div.delivery-tracking > div.tracking > div > div > ul {
    padding: 0;
  }
  footer .links-tracking-payments > div.delivery-tracking {
    width: 100%;
  }
  footer .links-tracking-payments > div.delivery-tracking .mobileDeliveryInformation.expanded .quickTrackBlock .trackarea > form > button {
    display: none;
  }
  footer .trust-bar .trust {
    margin-bottom: 10px;
  }
  footer .trust-bar .security {
    display: none;
  }
  footer .trust-bar .copyright {
    border-top: 0;
    padding-top: 0;
  }
  footer .call-us-bar a.telephone > i {
    display: inline-block;
    font-size: 0.8em;
    margin-right: 4px;
  }
  footer .call-us-bar a.telephone > span > strong {
    display: none;
  }
  footer .links-tracking-payments > div.secure-payments .securePaymentLogos li {
    margin-right: 2px;
  }
}
@media screen and (max-width: 600px) and (min-width: 20px) {
  footer .contact-bar {
    height: auto;
    padding-bottom: 16px;
  }
  footer .contact-bar > div a.how-to-find-us {
    padding-left: 0;
  }
  footer .contact-bar > div a.how-to-find-us:before {
    font-size: 0.9em;
    margin-left: -20px;
  }
  footer .contact-bar > div a.how-to-find-us:after {
    padding-left: 16px;
  }
  footer .contact-bar > div a.opening-times {
    margin-left: 16px;
    padding-left: 0;
  }
  footer .contact-bar > div a.opening-times:before {
    display: none;
  }
  footer .contact-bar > div a.opening-times:after {
    padding-left: 16px;
  }
  footer .contact-bar > div span.social {
    margin-left: 10px;
  }
  footer .call-us-bar > a {
    margin-right: 10px;
    padding-left: 10px;
  }
  footer .call-us-bar > a.telephone > span > span {
    display: none;
  }
  footer .trust-bar .trust {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  footer .trust-bar .trust > a {
    margin-bottom: 10px;
  }
  footer .trust-bar .copyright {
    margin: 0;
  }
}
@media screen and (max-width: 460px) and (min-width: 20px) {
  footer .links-tracking-payments > div.secure-payments {
    display: none;
  }
}
@media screen and (max-width: 400px) and (min-width: 20px) {
  footer .call-us-bar .call-me-back {
    display: none;
  }
}
#loading {
  display: none;
}

/* top nav */
section.header {
  background-color: #2e2e2e;
}

section.header .body-holder {
  display: flex;
  background-color: #2e2e2e;
  width: 1280px;
  margin: 0 auto;
  padding: 25px 0;
}

section.header .logo a {
  background: url("../../images/3xs-logo-ec3ddae9c9.svg") no-repeat left top;
  display: block;
  width: 180px;
  height: 23px;
  overflow: hidden;
  text-indent: 200px;
  line-height: 3em;
}

nav > ul {
  margin: 0 auto;
  padding: 6px 0 0 0;
  width: 500px;
}

nav a {
  font-family: "open_sans", sans-serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 0 15px;
}

nav li a {
  color: #ffffff;
}

nav a#pull {
  display: none;
}

nav {
  font-weight: normal;
}

nav .link-container {
  width: 500px;
  margin: 0 auto;
  display: flex;
}

nav .about-links .collapsed {
  display: none;
}

nav .about-links .sub-menu {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
}

nav .about-links:hover .sub-menu {
  display: block;
}

nav .about-links .sub-menu li {
  display: inline-block;
}

nav .about-links .sub-menu li a {
  color: #7d7e80;
  text-transform: lowercase;
}

nav .support-links .sub-menu {
  padding: 0;
  margin: 0;
}

nav .support-links .sub-menu li {
  display: inline-block;
}

nav .support-links {
  display: table;
}

nav .support-links .desktop {
  display: table-cell;
}

nav .series, nav .series {
  display: none;
  font-size: 1.4em;
  padding: 8px 0;
  text-align: left;
  border-bottom: 2px solid #E6E7E8;
  font-family: "uni_sansbold", sans-serif;
  text-transform: none;
  color: #000000;
}

nav .mobile-menu-button {
  background: none;
  border: 0;
  padding: 0;
  display: none;
  position: absolute;
}

nav .mobile-menu-button span.iconBar {
  border-top: 2px solid #ffffff;
  display: block;
  height: 6px;
  width: 24px;
  margin: 0 auto;
  margin-top: 0px;
}

nav .mobile-search-button {
  background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-position: -1205px -30px;
  background-size: 2000px 2000px;
  border: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  display: none;
}

nav button.mobile {
  display: none;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 0;
  border-bottom: 1px solid #cccccc;
  font-family: "open_sans-bold", sans-serif;
  color: #404040;
  font-size: 0.9em;
}

nav .support-links .mobile:before, nav .about-links .mobile:before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  float: right;
  text-indent: 50px;
  background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-size: 1750px 1750px;
}

nav .support-links .sub-menu li:first-child {
  display: none;
}

nav .support-links .mobile.collapsed:before, nav .about-links .mobile.collapsed:before {
  background-position: -1116px -112px;
}

nav .support-links .mobile.expanded:before, nav .about-links .mobile.expanded:before {
  background-position: -1149px -112px;
}

nav button.mobile.expanded {
  border-bottom: 1px solid #ffffff;
}

section.header .search .search-inputs {
  position: relative;
}

section.header .search .search-box {
  padding: 0 10px;
}

section.header .search .search-field {
  padding: 9px 0;
  border: 0;
  font-size: 0.8em;
  font-family: "uni_sans_regular", sans-serif;
  border-radius: 3px;
  width: 300px;
  text-indent: 10px;
}

section.header .search .search-button {
  overflow: hidden;
  width: 34px;
  height: 35px;
  border: 0;
  text-indent: 40px; /* background-image:linear-gradient(to top, rgb(160, 160, 160), rgb(133, 132, 132));*/
  margin: 0 0 -1px -4px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  position: absolute;
  right: 9px;
  top: 0;
  -webkit-appearance: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #000000 url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-position: -1198px -23px;
  background-size: 2000px 2000px;
}

.system-edit {
  display: none;
}

@media screen and (max-width: 1280px) {
  section.header .body-holder {
    padding: 25px;
    width: auto;
  }
  nav {
    width: auto;
  }
}
@media screen and (max-width: 1100px) {
  /* header styles */
  section.header .body-holder {
    display: block;
  }
  nav .about-links a {
    padding-left: 0;
  }
  nav .link-container {
    width: auto;
    margin: 10px 0 0 0;
  }
}
@media screen and (min-width: 800px) {
  nav .about-links .expands, nav .support-links .expands {
    height: auto !important;
  }
}
@media screen and (max-width: 780px) {
  a[name=anc] {
    display: block;
    height: 35px;
  }
  /* section.header { position: fixed; width: 100%; z-index: 1000; top:0; } */
  section.header .body-holder {
    padding: 0;
  }
  nav .link-container {
    display: block;
    width: 100%;
    margin: 0;
    height: 100%;
    position: fixed;
    background-color: #ffffff;
    z-index: 1000;
    transition: right ease-in-out 0.4s;
    right: 100%;
  }
  nav .link-container.slider {
    z-index: 101;
  }
  nav .link-container.mobileVisible {
    right: 0;
  }
  nav .about-links .collapsed {
    display: block;
  }
  nav .support-links .sub-menu {
    padding: 0;
    margin: 0;
  }
  nav .support-links .sub-menu li {
    display: block;
  }
  nav .support-links, .about-links {
    display: block;
    padding: 0 12px;
  }
  nav .support-links .desktop {
    display: block;
  }
  nav {
    background-color: #ffffff;
  }
  nav .mobile-menu-button {
    display: block;
    margin: -32px 0 0 10px;
  }
  nav .series {
    display: block;
  }
  nav .series a {
    padding: 12px 0;
    font-size: 1em;
  }
  nav .mobile-search-button {
    display: block;
    right: 10px;
    position: absolute;
    top: 15px;
  }
  nav li {
    display: block;
  }
  nav > ul {
    background-color: #ffffff;
    margin: 10px 0 15px 0;
    margin-bottom: 0;
  }
  nav a {
    font-size: 0.9em;
    display: block;
    text-align: left;
    padding: 10px 0;
    color: #404040;
    text-transform: none;
    font-family: "open_sans", sans-serif;
  }
  nav li a {
    padding: 0 15px 0 0;
  }
  nav .scan-link a {
    text-transform: uppercase;
    font-family: "open_sans-bold", sans-serif;
  }
  nav li:last-child a {
    border-bottom: 0;
  }
  nav .about-links .mobile {
    display: block;
  }
  nav .about-links .desktop {
    display: none;
  }
  nav .support-links .mobile {
    display: block;
  }
  nav .support-links .desktop {
    display: none;
  }
  nav .about-links .sub-menu {
    position: static;
    display: block;
  }
  nav .about-links .sub-menu li {
    display: block;
  }
  nav .about-links .sub-menu li a {
    color: #7d7e7f;
    text-transform: lowercase;
  }
  nav .sub-menu {
    padding: 0;
    margin: 0;
  }
  nav .sub-menu li {
    padding: 5px 0 10px 0;
  }
  nav .sub-menu li:last-child {
    border: 0;
  }
  nav .sub-menu li a {
    color: #5b5b5b;
    margin: 0;
  }
  section.header .search.mobileVisible {
    height: 54px;
  }
  section.header .search .search-field {
    width: 100%;
  }
  section.header .search .search-field {
    width: 100%;
  }
  section.header .search .search-box {
    padding: 10px;
  }
  section.header .search .search-button {
    top: 10px;
  }
}
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

/* Using popup styles from configurator/scan.infopopup */
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont, .share-page {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont, .share-page:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

.share-page {
  content: "\e963";
  position: fixed;
  bottom: 30px;
  left: 0; /* background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4384c1, #1766a6) repeat scroll 0 0; */
  background: #000;
  border: 0;
  box-shadow: 1px 1px 2px #666666;
  width: 60px;
  height: 50px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  font-size: 10px;
  text-align: center;
  padding-right: 10px;
  z-index: 100;
}
.share-page:before {
  display: block;
  width: 18px;
  height: 18px;
  font-size: 22px;
  margin-left: 10px;
  margin-top: 2px;
  padding-left: 2px;
  margin-bottom: 4px;
}

body .share-page {
  left: -60px;
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
body.feature-share .share-page {
  left: 0;
  opacity: 1;
}
body.device-ios .share-page:before {
  content: "\e962";
}
body.device-android .share-page:before {
  content: "\e963";
  margin-left: 6px;
}
body.feature-share.configuratorPage .share-page {
  bottom: 88px;
}
body.feature-share.configuratorPage button.share {
  display: none;
}

@media screen and (max-width: 700px) {
  body.configuratorPage .shareContainer {
    margin: -190px 0 0 0;
    left: -6px;
    position: fixed;
    display: block !important;
    transition: all 0.5s ease-in-out 0.5s;
  }
  body.configuratorPage .shareContainer .innerContainer {
    padding-left: 22px;
  }
  body.configuratorPage .shareContainer .goSocial {
    margin-left: 62px;
  }
  body.configuratorPage .shareContainer.ng-hide {
    left: -410px;
  }
  body.configuratorPage button.share {
    opacity: 1;
    position: fixed;
    bottom: 86px;
    left: 0;
    background: #000 !important;
    border: 0;
    box-shadow: 1px 1px 2px #666666;
    width: 60px;
    height: 50px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    cursor: pointer;
    color: #fff;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    font-family: "open_sans-bold", sans-serif;
    font-style: normal;
    padding-right: 10px;
    z-index: 100;
  }
  body.configuratorPage button.share:before {
    content: "\e963";
    margin-left: 6px;
    display: block;
    width: 18px;
    height: 18px;
    font-family: "scanicons", sans-serif;
    font-style: normal;
    font-size: 22px;
    margin-left: 10px;
    margin-top: 2px;
    padding-left: 2px;
    margin-bottom: 4px;
  }
  body.configuratorPage button.share > i {
    display: none !important;
  }
  body.configuratorPage.feature-share .shareContainer {
    display: none !important;
  }
  body.configuratorPage .share-page {
    bottom: 86px;
  }
  .priceBar .totalPrice {
    width: auto;
  }
}
.siteHelp button.help {
  background: transparent linear-gradient(to bottom, #4384c1, #1766a6) repeat scroll 0 0;
  width: 108px;
  height: 42px;
  border: 0 none;
  color: #fff;
  cursor: pointer;
  display: block;
  outline: 0 none;
  float: right;
  box-shadow: 0 -2px 4px #585858;
  font-family: "open_sans-bold", sans-serif;
  font-size: 0.9em;
}

.siteHelp {
  position: fixed;
  bottom: 0;
  right: 50px;
  z-index: 100;
}

.siteHelp button.help span::before {
  content: "";
  font-family: "scanicons", sans-serif;
  font-size: 1.3em;
  font-weight: normal;
  margin-right: 10px;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-position: -1281px -22px;
  background-size: 1600px 1600px;
  margin-bottom: -4px;
}

.helpMenu {
  display: none;
  width: 270px;
  height: 280px;
  background-color: #fff;
  box-shadow: 0 -1px 5px 2px #999;
  z-index: 100;
}

.helpMenu a {
  text-decoration: none;
  color: #5b5b5b;
  display: inline-block;
  font-family: "open_sans-bold", sans-serif;
  font-size: 0.85em;
  text-transform: uppercase;
}

.helpMenu a strong {
  font-weight: normal;
}

.helpMenu ul {
  padding: 0 15px 0 20px;
  margin-top: 42px;
  list-style: none;
}

.helpMenu .close {
  float: right;
  height: 25px;
  width: 25px;
  margin: 10px;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

.callus a {
  padding-left: 8px;
  font-size: 0.95em;
}

.helpMenu ul li {
  padding: 6px 0;
  line-height: 25px;
  vertical-align: middle;
  display: block;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
}

.helpMenu ul li i {
  width: 30px;
  height: 35px;
  background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-size: 1000px 1000px;
  margin-right: 15px;
}

.helpMenu ul li.livechat {
  padding-top: 25px;
}

.helpMenu ul li.livechat i {
  background-position: -452px -40px;
}

.helpMenu ul li.emailus i {
  background-position: -452px -118px;
}

.helpMenu ul li.question i {
  background-position: -452px -80px;
}

.helpMenu ul li.callus i {
  background-position: -452px -150px;
}

.helpMenu ul li.support i {
  background-position: -452px -184px;
}

.helpMenu ul li:last-child {
  border-bottom: 0;
}

.helpMenu .close span {
  text-indent: 50px;
  display: block;
  width: 20px;
  background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-size: 800px 800px;
  background-position: -395px -5px;
  margin-left: -3px;
}

.siteHelp.open .helpMenu {
  display: block;
}

@media screen and (max-width: 1550px) {
  .siteHelp {
    right: 10px;
  }
  .helpMenu {
    right: 10px;
  }
}
@media screen and (max-width: 1000px) {
  .siteHelp button.help {
    width: 105px;
    height: 39px;
  }
  .helpMenu ul {
    margin-top: 39px;
  }
}
@media screen and (max-width: 700px) {
  .siteHelp button.help {
    height: 32px;
    font-size: 0.8em;
    letter-spacing: 0.025em;
    width: 90px;
  }
  .helpMenu ul {
    margin-top: 32px;
  }
}
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont, .btn.buyAction {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

a.button-3xs {
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: inline-block;
  font-size: 13px;
  position: relative;
  text-decoration: none;
  z-index: 2;
  padding: 0;
  margin-left: 22px;
  line-height: 1em;
  text-align: center;
}
a.button-3xs > span {
  background: #000;
  border-radius: 3px;
  display: block;
  margin: 2px;
  transition: background 0.4s ease;
  padding: 9px 26px 10px;
}
a.button-3xs:hover > span {
  background: transparent;
}

/* buy buttons */
.buyButton {
  display: block;
}
.buyButton > span {
  display: block;
}
.buyButton > span span.qty {
  color: #0c9444;
  float: left;
  display: block;
  text-align: center;
}
.buyButton > span span.controls {
  display: block;
}
.buyButton > span span.title {
  position: relative;
  text-transform: uppercase;
  text-align: center;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: none;
}
.buyButton > span a.decrease, .buyButton > span a.increase {
  background: #bcbec0;
  overflow: hidden;
  display: inline-block;
  float: left;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 1em;
}
.buyButton > span a.decrease {
  background: #858484;
  background: linear-gradient(to top, #858484, #c7c8ca);
  float: left;
}
.buyButton > span a.increase {
  line-height: 1.2em;
  background: #55a952;
  background: linear-gradient(to top, #3b7739, #55a952);
  float: right;
}
.buyButton > span a.decrease:hover {
  background: #707070;
  background: linear-gradient(to top, #858484, #737373);
}
.buyButton > span a.increase:hover {
  background: #009245;
  background: linear-gradient(to top, #326830, #4a9b47);
}
.buyButton > span a.decrease i, .buyButton > span a.increase i {
  text-indent: 20px;
  overflow: hidden;
  height: 15px;
  display: block;
  font-style: normal;
}
.buyButton > span a.decrease span, .buyButton > span a.increase span {
  display: block;
  border-top: 1px solid #fff;
}
.buyButton > span a.increase span i {
  border-left: 1px solid #fff;
  overflow: hidden;
}
.buyButton > span input {
  float: left;
  border: 0;
  border: 1px solid #ccc;
  background: #f5f5f5;
  text-align: center;
  margin: 0;
  padding: 0;
}
.buyButton .btn {
  display: block;
  overflow: hidden;
  padding: 0;
  width: 76px;
  font-size: 0.85em;
  height: 23px;
  line-height: 2em;
  background: #55a952;
  color: #fff;
  background: linear-gradient(to top, #3b7739, #55a952);
  text-align: center;
}
.buyButton .btn:hover {
  background: #009245;
  background: linear-gradient(to top, #326830, #4a9b47);
  text-decoration: none;
}

.buyButton.small {
  height: 21px;
  width: 82px;
}
.buyButton.small .btn {
  height: 21px;
}
.buyButton.small input {
  height: 21px;
  width: 30px;
}
.buyButton.small a.decrease {
  width: 21px;
  height: 21px;
}
.buyButton.small a.increase {
  width: 21px;
  height: 21px;
}
.buyButton.small a.decrease span, .buyButton.small a.increase span {
  width: 11px;
  margin-top: 10px;
  margin-left: 5px;
}
.buyButton.small a.increase span i {
  margin-top: -6px;
  margin-left: 5px;
  height: 11px;
  width: 11px;
}

.buyButton.medium {
  height: 35px;
  width: 110px;
}
.buyButton.medium .btn {
  height: 35px;
  width: 110px;
}
.buyButton.medium > span {
  height: 35px;
  width: 110px;
}
.buyButton.medium > span span.qty {
  width: 40px;
}
.buyButton.medium > span span.qty > span {
  font-size: 1.7em;
  display: block;
  line-height: 1.6em;
}
.buyButton.medium > span span.controls {
  width: 110px;
}
.buyButton.medium span.title {
  line-height: 1em;
  padding-top: 7px;
  width: 50px;
  font-size: 0.7em;
}
.buyButton.medium input {
  height: 33px;
  width: 34px;
  margin-left: 2px;
  font-size: 1.7em;
}
.buyButton.medium a.btn {
  height: 35px;
  line-height: 2.9em;
}
.buyButton.medium a.decrease,
.buyButton.medium a.increase {
  width: 35px;
  height: 35px;
}
.buyButton.medium a.increase {
  margin-bottom: 1px;
}
.buyButton.medium a.decrease span, .buyButton.medium a.increase span {
  width: 16px;
  margin-top: 16px;
  margin-left: 10px;
  border-top: 2px solid #fff;
}
.buyButton.medium a.increase span i {
  margin-top: -9px;
  margin-left: 7px;
  height: 16px;
  width: 16px;
  border-left: 2px solid #fff;
}

.buyButton.large {
  height: 42px;
  width: 180px;
}
.buyButton.large .btn {
  height: 42px;
  width: 180px;
}
.buyButton.large > span {
  height: 42px;
  width: 180px;
}
.buyButton.large > span span.qty {
  width: 84px;
}
.buyButton.large > span span.qty > span {
  font-size: 2.2em;
  display: block;
  line-height: 1.4em;
}
.buyButton.large > span span.controls {
  width: 180px;
  margin-top: 3px;
}
.buyButton.large span.title {
  line-height: 1em;
  padding-top: 0;
  width: 180px;
  font-size: 0.8em;
  margin-top: -50px;
}
.buyButton.large input {
  height: 40px;
  width: 78px;
  margin-left: 2px;
  font-size: 1.7em;
}
.buyButton.large a.btn {
  height: 42px;
  width: 180px;
  color: #fff;
  line-height: 2.5em;
  font-size: 1.25em;
}
.buyButton.large a.decrease,
.buyButton.large a.increase {
  width: 48px;
  height: 42px;
}
.buyButton.large a.increase {
  margin-bottom: 2px;
}
.buyButton.large a.decrease span, .buyButton.large a.increase span {
  width: 20px;
  margin-top: 19px;
  margin-left: 14px;
  border-top: 2px solid #fff;
}
.buyButton.large a.increase span i {
  margin-top: -10px;
  margin-left: 9px;
  height: 20px;
  width: 20px;
  border-left: 2px solid #fff;
}

.buyButton.preOrder a.btn {
  background: #1463a2;
  background: linear-gradient(to top, #1463a2, #3a7fbf);
  color: #fff;
}
.buyButton.preOrder a.btn:hover {
  background: #004a93;
  background: linear-gradient(to top, #004a93, #1969b4);
}
.buyButton.preOrder a.increase {
  background: #1463a2;
  background: linear-gradient(to top, #1463a2, #3a7fbf);
}
.buyButton.preOrder a.increase:hover {
  background: #004a93;
  background: linear-gradient(to top, #004a93, #1969b4);
}
.buyButton.preOrder a.decrease {
  background: #858484;
  background: linear-gradient(to top, #858484, #c7c8ca);
}
.buyButton.preOrder > span span.qty {
  color: #1463a2;
}

.btn.buyAction {
  transition: ease-in-out 0.3s;
  background: #009245;
  background: linear-gradient(to top, #009245, #02ab52);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.btn.buyAction:hover, .btn.buyAction:focus {
  background: #009245;
  background: linear-gradient(to top, #008631, #00a13f);
  text-decoration: underline;
}

.btn.buyAction:focus {
  text-decoration: underline;
}
.openSansFont, section.header .search .popup .header > span.title span, div.basket.headerBasket .popup div.scansure, section.header .productList a.titleLong, .basket.headerBasket .productList a.titleLong, section.header .price, .basket.headerBasket .price {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont, section.header .search .popup .group.product span.details .linkNo, div.basket.headerBasket .popup div.total span.title, div.basket.headerBasket .popup div.scansure span.title strong, div.basket.headerBasket .popup div.scansure span.title span, div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation .title, div.basket.headerBasket .popup .subTotals > ul > li > span.title strong, div.basket.headerBasket .popup .productList .basketEmpty i, section.header .productList .linkNo, section.header section.header .itemList .location, .basket.headerBasket .productList .linkNo, .basket.headerBasket section.header .itemList .location, section.header > div .myaccount-links > span:first-child, section.header > div .headLinks > span {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont, section.header .search .popup .group.product span.details .description, section.header .search .popup .group.category span.itemCategorys a:last-child, section.header .search .popup .group > span.title, section.header .search form > input, div.basket.headerBasket .popup .subTotals > ul > li.total .title strong,
div.basket.headerBasket .popup .subTotals > ul > li.total .price {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps, section.header .search .popup .header > span.title {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold, section.header > nav .menuLevel3 .menu-button > span > button, section.header > nav .menuLevel1 > div > a, section.header > nav .menuLevel1 > ul > li > a, section.header > div .back-to-scan > span.title {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont, section.header .search form .btn, section.header > div .myaccount-links:before, section.header > div .back-to-scan > i:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone, .delivery ul.deliveryOptions li, section.header .productList ul > li, section.header .itemList ul > li, .basket.headerBasket .productList ul > li, .basket.headerBasket .itemList ul > li {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone, section.header .search .popup .group > ul, div.basket.headerBasket .popup .subTotals > ul > li, div.basket.headerBasket .popup .subTotals > ul, div.basket.headerBasket .popup > div .header ul li, section.header .productList ul, section.header .itemList ul, .basket.headerBasket .productList ul, .basket.headerBasket .itemList ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg, section.header .search .popup > div a.more:after, section.header .search .popup .results .moreResults button:before, div.basket.headerBasket .popup .subTotals > ul > li.delivery .viewDeliveryOptions:after, section.header > div .myaccount-links > span:first-child:after, section.header > div .back-to-scan > span:last-child:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg, div.basket.headerBasket .popup .subTotals > ul > li.delivery .viewDeliveryOptions.on:after {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu, div.basket.headerBasket .popup > div .header ul li.selected,
div.basket.headerBasket .popup > div .header ul li.selected:hover, section.header > nav .menuLevel1 > div > a.selected > a, section.header > nav .menuLevel1 > ul > li.selected > a {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

nav #menu-3xs-mobile {
  display: none !important;
}
nav #menu-3xs {
  display: block !important;
}

section.header {
  margin: 0 auto;
  width: 1280px;
  font-size: 0.8em;
}
section.header > div {
  background: #fff;
  height: 88px;
  width: 100%;
}
section.header > div .logo {
  height: 88px;
  float: left;
}
section.header > div .logo a {
  display: block;
  background: url(../../images/logo-scan-3xs-33b9460e67.svg);
  background-position: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  text-indent: 170px;
  background-size: 164px 25px;
  font-size: 3em;
  line-height: 3em;
  margin: 23px 0 0 36px;
  width: 170px;
  height: 38px;
}
section.header > div .toolbar {
  margin: 0 630px 0 200px;
  padding-top: 23px;
}
section.header > div .rightCol {
  width: 610px;
  float: right;
}
section.header > div .headLinks {
  display: inline-block;
  vertical-align: top;
  padding-top: 26px;
  padding-right: 26px;
}
section.header > div .headLinks > span {
  display: block;
  transition: ease-in-out 0.3s;
  font-size: 0.9em;
  color: #5d5c5c;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 0 14px 0;
}
section.header > div .headLinks > span:before {
  font-size: 1.9em;
  margin-left: -29px;
  margin-top: -4px;
  display: block;
  position: absolute;
}
section.header > div .headLinks > span:hover {
  text-decoration: none;
  color: #333;
}
section.header > div .headLinks > span:first-child {
  margin-left: 29px;
}
section.header > div .headLinks span {
  padding: 0 3px;
}
section.header > div .back-to-scan {
  display: inline-block;
  line-height: 1em;
  margin-left: 30px;
  vertical-align: top;
  width: 134px;
  text-decoration: none;
  color: #000;
  margin-top: 24px;
}
section.header > div .back-to-scan > i {
  width: 20px;
  height: 23px;
  display: inline-block;
  overflow: hidden;
  font-size: 20px;
  line-height: 18px;
}
section.header > div .back-to-scan > i:before {
  content: "\e909";
  border: 0;
}
section.header > div .back-to-scan > span {
  display: block;
  vertical-align: top;
}
section.header > div .back-to-scan > span.title {
  display: inline-block;
  font-size: 18px;
  margin-top: 3px;
  padding-left: 4px;
}
section.header > div .back-to-scan > span:last-child {
  color: #59595b;
}
section.header > div .back-to-scan > span:last-child:after {
  content: " ";
  display: inline-block;
  border-right: 1px solid #59595b;
  border-top: 1px solid #59595b;
  width: 6px;
  height: 6px;
  margin-left: 3px;
}
section.header > div .myaccount-links {
  color: #000;
  width: 180px;
}
section.header > div .myaccount-links:before {
  content: "\e90e";
  display: block;
  float: left;
  width: 34px;
  height: 28px;
  font-size: 26px;
  margin-top: 7px;
}
section.header > div .myaccount-links > span {
  display: block;
}
section.header > div .myaccount-links > span:first-child {
  text-transform: uppercase;
  padding-bottom: 2px;
  cursor: pointer;
}
section.header > div .myaccount-links > span:first-child:after {
  content: " ";
  width: 7px;
  height: 7px;
  display: inline-block;
  border-right: 1px solid #5d5c5c;
  border-bottom: 1px solid #5d5c5c;
  margin-left: 8px;
  font-size: 6px;
  margin-top: 2px;
  vertical-align: top;
}
section.header > div .myaccount-links > span:first-child > i {
  display: none;
}
section.header > div .myaccount-links > span:last-child {
  font-size: 0.9em;
  text-transform: capitalize;
}
section.header > div .myaccount-links > span:last-child > a {
  color: #5b5b5b;
  text-decoration: none;
  padding: 0 6px;
  margin: 0;
  display: inline-block;
  line-height: 1em;
  text-transform: none;
}
section.header > div .myaccount-links > span:last-child > a:hover {
  text-decoration: underline;
}
section.header > div .myaccount-links > span:last-child > a:first-child {
  border-right: 1px solid #5d5c5c;
  padding-left: 0;
  padding-right: 9px;
}
section.header > nav {
  width: 100%;
}
section.header > nav .menuLevel1 {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 4px solid #2e2e2e;
}
section.header > nav .menuLevel1 > ul {
  display: table;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 35px;
}
section.header > nav .menuLevel1 > ul > li {
  display: table-cell;
  width: 50%;
}
section.header > nav .menuLevel1 > ul > li > a {
  background: #e7e8ea;
  color: #353334;
  display: block;
  text-align: center;
  font-size: 1.15em;
  line-height: 2.7em;
  height: 40px;
  overflow: hidden;
  border: 0;
  text-transform: uppercase;
}
section.header > nav .menuLevel1 > ul > li > a.series {
  border-bottom: 0;
}
section.header > nav .menuLevel1 > ul > li.selected > a {
  background: #2e2e2e;
  color: #fff;
}
section.header > nav .menuLevel1 > div {
  display: table;
  width: 100%;
}
section.header > nav .menuLevel1 > div > a {
  background: #e7e8ea;
  color: #353334;
  display: table-cell;
  text-align: center;
  font-size: 1.15em;
  line-height: 2.7em;
  height: 40px;
  overflow: hidden;
}
section.header > nav .menuLevel1 > div > a.selected > a {
  background: #2e2e2e;
  color: #fff;
}
section.header > nav .menuLevel2 ul li span a {
  padding: 7px 0 10px;
}
section.header > nav .menuLevel2 > ul {
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
section.header > nav .menuLevel2 > ul > li {
  display: table-cell;
  width: auto;
}
section.header > nav .menuLevel2 > ul > li > span, section.header > nav .menuLevel2 > ul > li > a {
  display: block;
  text-align: center;
  height: 35px;
  overflow: hidden;
  cursor: pointer;
}
section.header > nav .menuLevel2 > ul > li.title {
  display: none;
}
section.header > nav .menuLevel2 > ul > li.title > span {
  cursor: inherit;
}
section.header > nav .menuLevel2 > div {
  display: none;
}
section.header > nav .menuLevel3 .menu-button {
  margin: 0 30px;
}
section.header > nav .menuLevel3 .menu-button > span {
  border-top: 1px solid #cccccc;
  width: 100%;
  display: block;
  padding: 10px 0;
}
section.header > nav .menuLevel3 .menu-button > span > button {
  border: 0;
  color: #fff;
  cursor: pointer;
  margin: 0 auto;
  display: block;
  width: 180px;
  height: 36px;
  border-radius: 4px;
  padding: 0;
  background: #1d1d1b;
  font-size: 1.2em;
  transition: ease-in-out 0.2s;
  opacity: 1;
}
section.header > nav .menuLevel3 .menu-button > span > button:disabled {
  background: #e9e9e9;
  color: #fff;
}
section.header > nav .menuLevel3 li.back {
  display: none;
}

/* - Special Edition Remove - start -*/
section.header nav .menuLevel2 ul li:last-child {
  display: none !important;
}

/* - Special Edition Remove - remove -*/
/* Price Block */
section.header .price, .basket.headerBasket .price {
  display: block;
  line-height: 1em;
}
section.header .price .incVat small, .basket.headerBasket .price .incVat small {
  font-weight: normal;
  font-size: 0.6em;
}
section.header .price .incVat span, .basket.headerBasket .price .incVat span {
  display: inline-block;
  color: #707070;
  text-transform: uppercase;
  font-size: 0.4em;
  width: 20px;
  margin-left: 10px;
  line-height: 1.1em;
}
section.header .productList ul > li, section.header .itemList ul > li, .basket.headerBasket .productList ul > li, .basket.headerBasket .itemList ul > li {
  padding: 0 0 12px;
  border-bottom: 1px solid #e2e2e2;
}
section.header .productList ul > li:last-child, section.header .itemList ul > li:last-child, .basket.headerBasket .productList ul > li:last-child, .basket.headerBasket .itemList ul > li:last-child {
  border-bottom: 0;
  padding: 0 0 10px;
}
section.header .productList ul > li > ul, section.header .itemList ul > li > ul, .basket.headerBasket .productList ul > li > ul, .basket.headerBasket .itemList ul > li > ul {
  display: table;
  padding-top: 12px;
}
section.header .productList ul > li > ul > li, section.header .itemList ul > li > ul > li, .basket.headerBasket .productList ul > li > ul > li, .basket.headerBasket .itemList ul > li > ul > li {
  display: table-cell;
  vertical-align: top;
}
section.header .productList ul > li > ul > li.image, section.header .productList ul > li > ul > li.icon, section.header .itemList ul > li > ul > li.image, section.header .itemList ul > li > ul > li.icon, .basket.headerBasket .productList ul > li > ul > li.image, .basket.headerBasket .productList ul > li > ul > li.icon, .basket.headerBasket .itemList ul > li > ul > li.image, .basket.headerBasket .itemList ul > li > ul > li.icon {
  width: 122px;
  vertical-align: middle;
}
section.header .productList ul > li > ul > li.image a, section.header .productList ul > li > ul > li.icon a, section.header .itemList ul > li > ul > li.image a, section.header .itemList ul > li > ul > li.icon a, .basket.headerBasket .productList ul > li > ul > li.image a, .basket.headerBasket .productList ul > li > ul > li.icon a, .basket.headerBasket .itemList ul > li > ul > li.image a, .basket.headerBasket .itemList ul > li > ul > li.icon a {
  display: block;
  border: 1px solid #e2e2e2;
  width: 104px;
  height: 104px;
}
section.header .productList ul > li > ul > li.image a img, section.header .itemList ul > li > ul > li.image a img, .basket.headerBasket .productList ul > li > ul > li.image a img, .basket.headerBasket .itemList ul > li > ul > li.image a img {
  margin-top: 2px;
  margin-left: 2px;
}
section.header .productList > ul > li > ul > li.description a.titleShort,
section.header .productList > ul > li > ul > li.description a.titleLong,
section.header .itemList > ul > li > ul > li.description a.titleLong, .basket.headerBasket .productList > ul > li > ul > li.description a.titleShort,
.basket.headerBasket .productList > ul > li > ul > li.description a.titleLong,
.basket.headerBasket .itemList > ul > li > ul > li.description a.titleLong {
  color: #707070;
  text-decoration: none;
}
section.header .productList > ul > li > ul > li.description a.titleShort:hover,
section.header .productList > ul > li > ul > li.description a.titleLong:hover, .basket.headerBasket .productList > ul > li > ul > li.description a.titleShort:hover,
.basket.headerBasket .productList > ul > li > ul > li.description a.titleLong:hover {
  text-decoration: underline;
}
section.header .productList > ul > li > ul > li.quantity, .basket.headerBasket .productList > ul > li > ul > li.quantity {
  vertical-align: bottom;
}
section.header .productList .linkNo, section.header section.header .itemList .location, .basket.headerBasket .productList .linkNo, .basket.headerBasket section.header .itemList .location {
  display: block;
  color: #000;
  font-size: 0.8em;
  padding: 0 0 3px;
}
section.header .productList a.titleLong, .basket.headerBasket .productList a.titleLong {
  color: #707070;
  display: block;
  font-size: 1.2em;
  line-height: 1.3em;
  padding-bottom: 2px;
  padding-right: 30px;
  text-decoration: none;
}
section.header .productList a:hover.titleLong, .basket.headerBasket .productList a:hover.titleLong {
  color: #707070;
  text-decoration: underline;
}
section.header .productList span.titleShort, .basket.headerBasket .productList span.titleShort {
  display: block;
  font-size: 0.85em;
}
section.header .productList span.price, .basket.headerBasket .productList span.price {
  color: #000;
  font-size: 2em;
  padding-top: 5px;
}
section.header .productList li.quantity .buyButton, .basket.headerBasket .productList li.quantity .buyButton {
  margin-bottom: 6px;
}

.hide {
  display: none !important;
}

/** --- Hover Basket --- **/
div.basket.headerBasket {
  display: inline-block;
  width: 210px;
  height: 88px;
}
div.basket.headerBasket .productList > ul > li > ul > li.image {
  height: 74px;
  width: 74px;
}
div.basket.headerBasket .productList > ul > li > ul > li.image img {
  height: 66px;
  width: 66px;
}
div.basket.headerBasket .productList a.titleLong {
  font-size: 0.9em;
  padding-right: 3px;
}
div.basket.headerBasket a.btn {
  display: inline-block;
  height: 52px;
  margin-top: 40px;
  padding: 0 14px;
}
div.basket.headerBasket a.summary {
  float: left;
  display: inline-block;
  font-family: "open_sans", sans-serif;
  color: #5d5c5c;
  text-decoration: none;
  margin-top: 23px;
  height: 38px;
  transition: ease-in-out 0.3s;
  background: #e7e8ea;
  border-radius: 4px;
}
div.basket.headerBasket a.summary:hover {
  text-decoration: none;
  background: #d4d5d5;
}
div.basket.headerBasket a.summary strong {
  font-weight: normal;
  text-align: center;
  display: block;
  width: 20px;
  margin: 0 auto;
  padding-top: 3px;
  color: #fff;
}
div.basket.headerBasket a.summary .items {
  display: block;
  float: left;
  border-radius: 11px;
  width: 22px;
  height: 22px;
  background: #000;
  margin: 7px 0 0 12px;
}
div.basket.headerBasket a.summary > i {
  display: block;
  float: left;
  width: 31px;
  height: 30px;
  margin-top: 3px;
  margin-left: 6px;
  transition: ease-in-out 0.5s;
  font-size: 2.05em;
}
div.basket.headerBasket a.summary > i:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
  content: "\e901";
  color: #000;
  line-height: 1.2em;
}
div.basket.headerBasket a.summary .price {
  margin-left: 8px;
  float: left;
  display: block;
  font-size: 1.5em;
  width: 100px;
  margin-top: 9px;
  color: #000;
}
div.basket.headerBasket a.summary .price small {
  font-size: 0.6em;
  padding-right: 2px;
}
div.basket.headerBasket a.summary span.btn {
  display: block;
  width: 30px;
  float: left;
  padding: 0;
  background: 0;
}
div.basket.headerBasket a.summary span.btn i {
  display: block;
  border-right: 1px solid #5d5c5c;
  border-bottom: 1px solid #5d5c5c;
  width: 8px;
  height: 8px;
  margin: 13px auto 0;
  transform: rotate(45deg);
}
div.basket.headerBasket a.summary span.btn:hover {
  box-shadow: none;
}
div.basket.headerBasket .popup {
  position: absolute;
  width: 430px;
  margin-left: -226px;
  margin-top: 20px;
  border: 6px solid rgba(0, 0, 0, 0.3);
  border-radius: 7px;
  z-index: 30;
}
div.basket.headerBasket .popup > div {
  background-color: #fff;
  border-radius: 0;
  width: 430px;
  font-family: "open_sans", sans-serif;
  color: #707070;
}
div.basket.headerBasket .popup > div .header {
  background: #ebecec;
  height: 40px;
}
div.basket.headerBasket .popup > div .header span.btn {
  display: block;
  width: 38px;
  height: 40px;
  float: right;
  padding: 0;
  cursor: pointer;
  transition: ease-in-out 0.3s;
  border-left: 1px solid #CCCCCC;
}
div.basket.headerBasket .popup > div .header span.btn i {
  display: block;
  border-left: 1px solid #5d5c5c;
  border-top: 1px solid #5d5c5c;
  width: 8px;
  height: 8px;
  margin: 18px auto 0;
  transform: rotate(45deg);
}
div.basket.headerBasket .popup > div .header ul {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0 39px 0 0;
}
div.basket.headerBasket .popup > div .header ul li {
  display: block;
  float: left;
  height: 40px;
  width: 49.96%;
  text-indent: 18px;
  text-transform: uppercase;
  line-height: 3em;
  overflow: hidden;
  color: #707070;
  cursor: pointer;
  font-size: 1em;
  transition: ease-in-out 0.3s;
}
div.basket.headerBasket .popup > div .header ul li.selected,
div.basket.headerBasket .popup > div .header ul li.selected:hover {
  color: #fff;
  background: #2e2e2e;
}
div.basket.headerBasket .popup > div .header ul li:hover,
div.basket.headerBasket .popup > div .header span.btn:hover {
  background: #CCCCCC;
}
div.basket.headerBasket .popup .productList {
  min-height: 132px;
  max-height: 262px;
  overflow-y: auto;
  padding: 0 10px 0 16px;
  color: #707070;
  margin-top: 8px;
  margin-right: 14px;
}
div.basket.headerBasket .popup .productList .basketEmpty {
  text-align: center;
}
div.basket.headerBasket .popup .productList .basketEmpty i {
  font-weight: normal;
  text-transform: uppercase;
  padding-top: 60px;
  display: block;
  color: #cccccc;
  font-size: 1.2em;
}
div.basket.headerBasket .popup .subTotals {
  margin: 18px 20px 0;
  border-top: 4px solid #e2e2e2;
}
div.basket.headerBasket .popup .subTotals > ul > li {
  display: table;
  width: 100%;
  border-bottom: 1px solid #e2e2e2;
  height: 50px;
}
div.basket.headerBasket .popup .subTotals > ul > li > span {
  display: table-cell;
  height: 44px;
}
div.basket.headerBasket .popup .subTotals > ul > li > span.title {
  width: 70%;
  font-size: 0.95em;
}
div.basket.headerBasket .popup .subTotals > ul > li > span.title strong {
  display: block;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 1.15em;
  line-height: 1em;
  padding: 10px 0 2px;
}
div.basket.headerBasket .popup .subTotals > ul > li > span.title p {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
div.basket.headerBasket .popup .subTotals > ul > li > span.price {
  width: 30%;
  text-align: right;
  font-size: 2.7em;
  vertical-align: top;
  font-size: 2.1em;
  padding-top: 10px;
}
div.basket.headerBasket .popup .subTotals > ul > li > span.price .incVat {
  padding-top: 16px;
  display: block;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery span.title strong {
  display: inline-block;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation {
  display: block;
  background: #e2e2e2;
  padding: 12px;
  margin: 4px 0 18px 0;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation .title {
  display: block;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation .fieldRow {
  display: block;
  padding: 3px 0;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation .fieldRow label {
  display: inline-block;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation .fieldRow:last-child {
  padding-top: 10px;
  text-align: center;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation .fieldRow:last-child input {
  width: 90px;
  padding: 0;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation label {
  width: 60px;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation input, div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryLocation section.header .basket .popup .subTotals > ul > li.delivery .deliveryLocation select {
  width: 170px;
  border: 1px solid #ccc;
  padding: 2px 0;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .deliveryOptions {
  display: block;
  font-size: 0.9em;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .changeLocation {
  margin-left: 0;
  display: inline-block;
  border: 0;
  background: #fff;
  cursor: pointer;
  outline: none;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .changeLocation:focus {
  outline: none;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .viewDeliveryOptions {
  display: block;
  background: #fff;
  border: 0;
  margin: 0;
  cursor: pointer;
  padding-left: 0;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .viewDeliveryOptions:after {
  font-family: "scanicons", sans-serif;
  font-style: normal;
  content: "\e910";
  display: inline-block;
  margin-left: 5px;
  font-size: 0.8em;
}
div.basket.headerBasket .popup .subTotals > ul > li.delivery .viewDeliveryOptions.on:after {
  content: "-";
  font-size: 1.2em;
}
div.basket.headerBasket .popup .subTotals > ul > li.total .title strong,
div.basket.headerBasket .popup .subTotals > ul > li.total .price {
  color: #000;
}
div.basket.headerBasket .popup div.scansure {
  margin: 0 20px;
  background: #f5f5f5;
  border-bottom: 1px solid #e2e2e2;
  height: 52px;
}
div.basket.headerBasket .popup div.scansure i {
  color: #5b5b5b;
  float: left;
  width: 35px;
  display: block;
  height: 40px;
  margin: 10px 0 0 8px;
  overflow: hidden;
  text-indent: 40px;
  line-height: 3em;
}
div.basket.headerBasket .popup div.scansure i:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
  content: "\e917";
  font-size: 2.3em;
  margin-left: -40px;
  padding-right: 10px;
  line-height: 1em;
}
div.basket.headerBasket .popup div.scansure span.title {
  display: block;
  margin-left: 48px;
  color: #5b5b5b;
  padding-top: 8px;
  font-size: 0.9em;
  padding-right: 0;
}
div.basket.headerBasket .popup div.scansure span.title strong {
  display: block;
  font-weight: normal;
  color: #000;
  text-transform: uppercase;
  font-size: 1.1em;
}
div.basket.headerBasket .popup div.scansure span.title strong span.price {
  display: inline-block;
}
div.basket.headerBasket .popup div.scansure span.title strong span.price small {
  font-size: 1em;
}
div.basket.headerBasket .popup div.total {
  height: 80px;
  overflow: hidden;
  margin: 0 20px;
}
div.basket.headerBasket .popup div.total span.title {
  display: block;
  font-weight: normal;
  color: #000;
  float: left;
  width: 234px;
  padding-top: 16px;
  font-size: 1em;
  line-height: 1.2em;
  letter-spacing: -0.5px;
}
div.basket.headerBasket .popup div.total span.title strong {
  font-weight: normal;
  color: #5b5b5b;
  display: inline-block;
  text-transform: uppercase;
}
div.basket.headerBasket .popup div.total span.title strong:after {
  content: " -";
  padding-right: 5px;
}
div.basket.headerBasket .popup div.total span.title small:before {
  content: " - ";
}
div.basket.headerBasket .popup div.total a.btn {
  float: right;
  display: block;
  margin-top: 16px;
  width: 116px;
  text-align: center;
  line-height: 3.4em;
  height: 46px;
  color: #fff !important;
}
div.basket.headerBasket .popup div.systemBasket .categoryTitle {
  font-size: 1.4em;
  color: #5b5b5b;
  display: block;
}
div.basket.headerBasket .popup div.systemBasket .productList > ul > li > ul > li.image {
  width: 92px;
}
div.basket.headerBasket .popup div.systemBasket .productList > ul > li > ul > li.image a {
  width: 74px;
  height: 74px;
}
div.basket.headerBasket .popup div.systemBasket .productList > ul > li > ul > li.image a img {
  width: 70px;
  height: 70px;
}
div.basket.headerBasket .popup div.systemBasket .productList > ul > li {
  padding: 9px 0 16px;
}
div.basket.headerBasket .popup div.systemBasket .productList span.linkNo {
  float: left;
  width: 200px;
}
div.basket.headerBasket .popup div.systemBasket .productList a.titleLong {
  float: left;
  width: 200px;
  padding-right: 0;
  font-size: 0.9em;
  height: 52px;
  overflow: hidden;
}
div.basket.headerBasket .popup div.systemBasket .productList span.price {
  margin-left: 220px;
  padding-top: 45px;
}
div.basket.headerBasket .popup div.systemBasket .productList > ul > li > ul {
  padding-top: 10px;
}

section.header .basket .popup div.total span.title {
  font-size: 0.95em !important;
}

.delivery ul.deliveryOptions {
  margin: 10px 0 10px 0;
  padding: 0;
  list-style: none;
}
.delivery ul.deliveryOptions li {
  margin: 0;
  padding: 2px 2%;
  min-height: 16px;
  cursor: pointer;
  vertical-align: top;
}
.delivery ul.deliveryOptions li:nth-child(odd) {
  background: #f3f3f3;
}
.delivery ul.deliveryOptions li span {
  display: inline-block;
}
.delivery ul.deliveryOptions li span.option {
  width: 78%;
  padding: 2px 0;
  text-indent: 6px;
}
.delivery ul.deliveryOptions li span.price {
  width: 20%;
  text-align: right;
  padding: 0;
}
.delivery ul.deliveryOptions li.selected {
  background: #2b74b2 !important;
  color: #fff;
}
.delivery ul.deliveryOptions li:hover {
  background: #dbdbdb;
}

.basket.headerBasket .productList .buyButton span.title {
  display: none;
}
.basket.headerBasket .productList .buyButton span.qty {
  width: 40px;
  font-size: 1.2em;
  color: #5b5b5b;
}
.basket.headerBasket .productList .buyButton span.qty span {
  padding: 2px 0 0;
  display: block;
  width: 40px;
}
.basket.headerBasket .productList .buyButton span.qty input {
  height: 20px;
  padding: 0;
  display: block;
  border: 0;
  width: 40px;
  text-align: center;
}
.basket.headerBasket .productList .buyButton span.controls {
  float: none;
}
.basket.headerBasket .productList .buyButton span.controls a.increase {
  float: right;
}

#headerSearch .productList .buyButton span.title {
  display: none;
}
#headerSearch .productList .buyButton span.qty {
  width: 40px;
  font-size: 1.2em;
  color: #5b5b5b;
}
#headerSearch .productList .buyButton span.qty span {
  padding: 2px 0 0;
  display: block;
  width: 40px;
}
#headerSearch .productList .buyButton span.qty input {
  height: 20px;
  padding: 0;
  display: block;
  border: 0;
  width: 40px;
  text-align: center;
}
#headerSearch .productList .buyButton span.controls {
  float: none;
}
#headerSearch .productList .buyButton span.controls a.increase {
  float: right;
}

@media screen and (max-width: 1280px) {
  .container, section.header {
    width: 100% !important;
  }
}
@media screen and (max-width: 5080px) and (min-width: 780px) {
  section.header nav .menuLevel3.ffoptions-1 ul {
    height: 40px;
  }
  section.header nav .menuLevel3.ffoptions-2 ul {
    height: 40px;
  }
  section.header nav .menuLevel3.ffoptions-3 ul {
    height: 40px;
  }
}
@media screen and (max-width: 950px) and (min-width: 781px) {
  section.header > div .logo a {
    margin-left: 20px;
    background-size: 144px 22px;
  }
  section.header > div .toolbar {
    margin-left: 166px;
  }
}
@media screen and (max-width: 860px) and (min-width: 780px) {
  section.header > div .rightCol .headLinks > span {
    width: auto;
  }
}
@media screen and (max-width: 400px) {
  body div.container {
    margin-top: 40px;
  }
  body div.container.customer-logged-in .myaccount-links > span:first-child > i {
    width: 18px;
    height: 18px;
    border-radius: 11px;
    position: absolute;
    margin-left: 12px;
    margin-top: 1px;
  }
  body div.container.customer-logged-in .myaccount-links > span:first-child > i:before {
    width: 3px;
    height: 7px;
    margin-left: 7px;
    margin-top: 4px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  body[data-isloggedin] .headLinks .myaccount-links > span:first-child > i {
    height: 18px;
    width: 19px;
    margin-left: 12px;
  }
  section.header > div {
    height: 40px;
  }
  section.header > div .logo {
    margin: 0 82px;
  }
  section.header > div .logo a {
    background-size: 80px 21px;
    width: 80px;
    height: 21px;
    margin-top: 8px;
    padding-top: 1px;
  }
  section.header > div div.rightCol {
    margin-top: -60px;
    height: 40px;
    width: 86px !important;
  }
  section.header > div div.rightCol div.headLinks {
    width: 40px;
    height: 40px;
  }
  section.header > div div.rightCol div.headLinks > span {
    line-height: 3.5em;
    width: 40px;
    height: 40px;
  }
  section.header > div div.rightCol div.headLinks > span:before {
    font-size: 1.8em;
  }
  section.header > div div.rightCol .myaccount-links {
    margin-top: 4px;
  }
  section.header > div div.rightCol .myaccount-links > span:first-child:before {
    font-size: 20px;
  }
  section.header > div div.rightCol .myaccount-links > span:first-child > i::before {
    margin-left: 8px;
    margin-top: 5px;
  }
  section.header > div div.rightCol div.basket.headerBasket {
    width: 44px;
    height: 40px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary {
    height: 40px;
    width: 41px;
    margin-top: 1px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary span.items {
    font-size: 0.85em;
    height: 19px;
    width: 19px;
    margin-top: 4px;
    margin-left: 21px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary span.items strong {
    padding-top: 1px;
    width: 19px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary > i {
    margin-top: 5px;
    margin-left: 2px;
    font-size: 1.6em;
  }
}
/* --- Header Search --- */
section.header .search form {
  border: 1px solid #e7e8ea;
  margin-left: 60px;
  background: #e7e8ea;
  border-radius: 4px;
  height: 38px;
  width: 360px;
}
section.header .search form > label {
  display: none;
}
section.header .search form > input {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #e7e8ea;
  border-right: 0;
  height: 36px;
  width: 290px;
  background: #e7e8ea;
  overflow: hidden;
  padding: 0 16px;
  font-size: 1.15em;
  color: #1d1d1d;
  float: left;
  transition: ease-in-out 0.3s;
  outline: none;
}
section.header .search form > input:focus {
  border: 1px solid #e7e8ea;
  background: #fff;
  border-right: 0;
}
section.header .search form .btn {
  display: inline-block;
  height: 36px;
  width: 36px;
  overflow: hidden;
  padding: 0;
  text-align: center;
  line-height: 1.2em;
  font-size: 1.15em;
  border: 1px solid #e7e8ea;
  background: #e7e8ea;
}
section.header .search form .btn:before {
  content: "\e918";
  color: #000;
  margin: 0 11px 0 9px;
}
section.header .search .popupShown > form > input {
  width: 306px !important;
  margin-left: 140px;
}
section.header .search .popup {
  position: absolute;
  width: 680px;
  margin-top: 3px;
  border: 6px solid rgba(0, 0, 0, 0.3);
  border-radius: 7px;
  z-index: 20;
  margin-left: 20px;
}
section.header .search .popup > div {
  background-color: #fff;
  border-radius: 0;
  width: 680px;
  height: 580px;
  font-family: "open_sans", sans-serif;
  color: #707070;
}
section.header .search .popup .header {
  background: #ebecec;
  height: 50px;
}
section.header .search .popup .header span.close {
  float: right;
  height: 50px;
  width: 50px;
  display: block;
  text-indent: 50px;
  overflow: hidden;
  text-decoration: none;
  color: #5b5b5b;
  font-size: 1.1em;
  line-height: 3.1em;
  cursor: pointer;
}
section.header .search .popup .header span.close:before {
  margin-left: -30px;
  margin-right: 20px;
}
section.header .search .popup .header span.close:hover {
  color: #333;
}
section.header .search .popup .header > span.title {
  list-style: none;
  transition: ease-in-out 0.2s;
  font-size: 1.1em;
  display: inline-block;
  cursor: pointer;
  padding: 3px 30px 0;
  color: #b3b3b3;
  height: 50px;
  line-height: 3.2em;
}
section.header .search .popup .header > span.title span {
  font-size: 0.7em;
}
section.header .search .popup .header > span.title:hover {
  color: #707070;
}
section.header .search .popup .header > span.title.selected {
  color: #333;
}
section.header .search .popup .results {
  overflow-y: auto;
  height: 468px;
  margin-right: 14px;
  margin-top: 20px;
  padding: 0 30px;
}
section.header .search .popup .results .moreResults {
  border-top: 4px solid #f5f5f5;
  display: block;
  text-align: center;
}
section.header .search .popup .results .moreResults button:hover {
  background: none;
}
section.header .search .popup .results .moreResults button:before {
  border-right: 2px solid #2b74b2;
  border-bottom: 2px solid #2b74b2;
  content: " ";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  margin-bottom: 2px;
}
section.header .search .popup .group {
  padding-bottom: 10px;
  font-size: 0.9em;
}
section.header .search .popup .group > span.title {
  background: #f5f5f5;
  text-transform: uppercase;
  color: #000;
  display: block;
  padding: 4px 8px;
  font-size: 0.9em;
}
section.header .search .popup .group > ul > li {
  display: table;
  width: 100%;
  border-bottom: 1px solid #e4e4e4;
}
section.header .search .popup .group > ul > li:last-child {
  border-bottom: 0;
}
section.header .search .popup .group > ul > li span.itemImage,
section.header .search .popup .group > ul > li span.itemDescription {
  display: table-cell;
  vertical-align: middle;
  height: 46px;
}
section.header .search .popup .group.manufacturer span.itemImage {
  width: 80px;
}
section.header .search .popup .group.manufacturer span.itemImage img {
  width: 70px;
  height: 15px;
}
section.header .search .popup .group.manufacturer span.itemDescription {
  color: #b3b3b3;
}
section.header .search .popup .group.category span.itemCategorys {
  vertical-align: middle;
  height: 46px;
  display: table-cell;
}
section.header .search .popup .group.category span.itemCategorys a {
  display: inline-block;
  padding-left: 8px;
  text-decoration: none;
  color: #b3b3b3;
}
section.header .search .popup .group.category span.itemCategorys a:last-child {
  color: #5b5b5b;
}
section.header .search .popup .group.category span.itemCategorys a:hover {
  text-decoration: underline;
}
section.header .search .popup .group.product span.image,
section.header .search .popup .group.product span.details,
section.header .search .popup .group.product span.priceAvailability {
  display: table-cell;
  vertical-align: middle;
  height: 70px;
}
section.header .search .popup .group.product span.image {
  width: 80px;
}
section.header .search .popup .group.product span.image img {
  width: 60px;
  height: 60px;
}
section.header .search .popup .group.product span.image {
  margin-left: 0;
  position: inherit;
  height: 60px;
}
section.header .search .popup .group.product span.details .description {
  display: block;
  color: #5b5b5b;
  text-decoration: none;
  height: 32px;
  overflow: hidden;
  padding-right: 6px;
}
section.header .search .popup .group.product span.details .description:hover {
  text-decoration: underline;
}
section.header .search .popup .group.product span.details .linkNo {
  display: block;
  color: #3d70b7;
  padding: 2px 0 0;
}
section.header .search .popup .group.product span.priceAvailability {
  margin-left: 0;
  width: 230px;
  padding-top: 7px;
}
section.header .search .popup .group.product span.priceAvailability .stock {
  display: none;
}
section.header .search .popup .group.product span.priceAvailability .leftColumn {
  width: 120px;
}
section.header .search .popup .group.product span.priceAvailability .leftColumn .price {
  font-size: 2em;
}
section.header .search .popup .group.product span.priceAvailability .leftColumn .price span.exVat, section.header .search .popup .group.product span.priceAvailability .leftColumn .price span.incVat {
  display: none;
}
section.header .search .popup .group.product span.priceAvailability .rightColumn {
  width: 110px;
}
section.header .search .popup .group.product span.priceAvailability .rightColumn .buyButton a.btn {
  width: 110px;
  line-height: 3.4em;
}
section.header .search .popup .group.product span.priceAvailability .rightColumn .buyButton span.controls {
  margin-top: 0;
  margin-left: 0;
}
section.header .search .popup .group.article span.itemImage {
  width: 65px;
  height: 55px;
}
section.header .search .popup .group.article span.itemImage img {
  width: 45px;
  height: 45px;
}
section.header .search .popup .productList,
section.header .search .popup .itemList {
  height: inherit;
  padding: 0 20px 0 20px;
  color: #707070;
  margin-top: 0;
}
section.header .search .popup .productList > ul > li > ul > li.image,
section.header .search .popup .itemList > ul > li > ul > li.image {
  width: 102px;
}
section.header .search .popup .productList > ul > li > ul > li.image a {
  border: 0;
  width: 84px;
  height: 84px;
}
section.header .search .popup .productList > ul > li > ul > li.image a img {
  border: 0;
  width: 80px;
  height: 80px;
}
section.header .search .popup .productList > ul > li > ul > li.price {
  width: 130px;
  padding-top: 28px;
}
section.header .search .popup .productList > ul > li > ul > li.price .incVat {
  font-size: 2.2em;
  color: #2b74b2;
  margin-top: 33px;
  vertical-align: top;
  display: block;
}
section.header .search .popup .productList > ul > li > ul > li.description .titleShort {
  padding-right: 30px;
}
section.header .search .popup .productList > ul > li > ul > li.addToBasket {
  vertical-align: top;
}
section.header .search .popup .productList > ul > li > ul > li.addToBasket .buyButton {
  margin-top: 37px;
}
section.header .search .popup .productList > ul > li > ul,
section.header .search .popup .itemList > ul > li > ul {
  padding-top: 6px;
}
section.header .search .popup .productList > ul > li,
section.header .search .popup .itemList > ul > li {
  padding-bottom: 6px;
}
section.header .search .popup .productList span.linkNo {
  padding-bottom: 0;
  padding-top: 2px;
}
section.header .search .popup > div a.more {
  display: block;
  text-align: center;
  padding: 4px 0 6px;
  font-size: 1.1em;
  text-transform: uppercase;
  margin: 0 auto;
}
section.header .search .popup > div a.more:after {
  width: 7px;
  height: 7px;
  margin-left: 8px;
  margin-bottom: 3px;
  position: relative;
  display: inline-block;
  content: " ";
  border-bottom: 2px solid #2b74b2;
  border-right: 2px solid #2b74b2;
}
section.header .search .popup .itemList > ul > li > ul > li.icon {
  width: 78px;
}
section.header .search .popup .itemList > ul > li > ul > li.icon a {
  font-size: 4em;
  border: 0;
  overflow: hidden;
  text-decoration: none;
  text-indent: 70px;
  width: 70px;
  height: 70px;
  color: #b3b3b3;
  transition: ease-in-out 0.2s;
}
section.header .search .popup .itemList > ul > li > ul > li.icon a:hover {
  color: #707070;
}
section.header .search .popup .itemList > ul > li > ul > li.icon a:before {
  font-family: "scanicons", sans-serif;
  font-style: normal;
  content: "\e91e";
  margin-left: -66px;
  margin-right: 10px;
}
section.header .search .popup .itemList span.location {
  font-size: 1em;
  color: #2b74b2;
  padding-top: 3px;
}
section.header .search .popup .itemList span.location a {
  color: #2b74b2;
  text-decoration: none;
}
section.header .search .popup .itemList span.location a:hover {
  text-decoration: underline;
}
section.header .search .popup .itemList span.location a:after {
  width: 7px;
  height: 7px;
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 1px;
  position: relative;
  display: inline-block;
  content: " ";
  border-top: 1px solid #2b74b2;
  border-right: 1px solid #2b74b2;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
section.header .search .popup .itemList span.location a:last-child:after {
  display: none;
}
section.header .search .popup .itemList > ul > li > ul > li.description a.titleLong {
  display: block;
  font-size: 1.2em;
  padding-top: 12px;
  transition: ease-in-out 0.3s;
}
section.header .search .popup .itemList > ul > li > ul > li.description a.titleLong:hover {
  color: #333;
}
section.header .search .popup .itemList > ul > li > ul > li.image a {
  border: 0;
  width: 79px;
  height: 79px;
}
section.header .search .popup .itemList > ul > li > ul > li.image a img {
  border: 0;
  width: 75px;
  height: 75px;
}

.searchMobileBar {
  display: none;
}

.search .popup .searchResultsList {
  margin-left: 26px;
}
.search .popup .searchResultsList li {
  padding: 4px 0;
}
.search .popup .searchResultsList li strong {
  min-width: 150px;
  display: inline-block;
}

@media screen and (max-width: 1280px) and (min-width: 780px) {
  section.header .search form {
    margin-left: 20px;
    width: 320px;
  }
  section.header .search form > input {
    width: 250px;
  }
}
@media screen and (max-width: 1100px) and (min-width: 780px) {
  section.header .search form {
    width: 220px;
  }
  section.header .search form > input {
    width: 150px;
  }
  section.header > div .headLinks {
    padding-right: 16px;
  }
}
@media screen and (max-width: 1030px) and (min-width: 780px) {
  section.header > div .myaccount-links {
    width: 100px;
    margin-top: 6px;
  }
  section.header > div .myaccount-links:before {
    font-size: 24px;
    width: 30px;
    margin-top: 0;
  }
  section.header > div .myaccount-links > span:last-child {
    display: none;
  }
  section.header > div .myaccount-links > span {
    font-size: 11px;
    line-height: 1.1em;
  }
  section.header > div .myaccount-links > span:first-child:after {
    display: none;
  }
  section.header > div .myaccount-links:after {
    content: " ";
    width: 7px;
    height: 7px;
    display: inline-block;
    border-right: 1px solid #5d5c5c;
    border-bottom: 1px solid #5d5c5c;
    margin-left: 8px;
    font-size: 6px;
    margin-top: 2px;
    vertical-align: top;
    float: right;
    transform: rotate(45deg);
    margin-top: -18px;
  }
}
@media screen and (max-width: 950px) and (min-width: 780px) {
  section.header .search form {
    width: 213px;
  }
  section.header .search form > input {
    width: 140px;
  }
  section.header > nav .menuLevel2 ul li span {
    height: 50px;
  }
  section.header > nav .menuLevel2 ul li span > a {
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 900px) and (min-width: 780px) {
  section.header .search form {
    width: 172px;
  }
  section.header .search form > input {
    width: 115px;
    padding: 0 8px;
  }
  section.header .search form > input::placeholder {
    font-size: 0.9em;
  }
}
@media screen and (max-width: 870px) and (min-width: 780px) {
  section.header > div .back-to-scan {
    line-height: 0.7em;
    width: 120px;
  }
  section.header > div .back-to-scan > i {
    font-size: 18px;
    width: 18px;
  }
  section.header > div .back-to-scan > span.title {
    padding-left: 2px;
    font-size: 17px;
    margin-top: 5px;
  }
  section.header > div .back-to-scan > span:last-child {
    font-size: 12px;
  }
}
@media screen and (max-width: 815px) and (min-width: 781px) {
  section.header .search form {
    width: 156px;
    margin-left: 12px;
  }
  section.header .search form > input {
    width: 100px;
  }
  section.header > div .logo a {
    width: 150px;
  }
  section.header > div .back-to-scan {
    line-height: 0.6em;
    width: 110px;
  }
  section.header > div .back-to-scan > i {
    font-size: 16px;
    width: 17px;
  }
  section.header > div .back-to-scan > span.title {
    padding-left: 2px;
    font-size: 15px;
    margin-top: 6px;
  }
  section.header > div .back-to-scan > span:last-child {
    font-size: 11px;
  }
  section.header > div .back-to-scan > span:last-child:after {
    width: 4px;
    height: 4px;
  }
}
@media screen and (max-width: 1020px) {
  section.header .search {
    margin-left: 0px;
  }
}
@media screen and (max-width: 366px) {
  section.header .searchMobileBar form {
    margin-right: 60px;
    margin-left: 12px;
    display: block;
  }
  section.header .searchMobileBar form span {
    display: block;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0;
    padding-left: 0;
    margin-top: 10px;
  }
  section.header .searchMobileBar form span button {
    position: inherit;
    width: 30px;
    display: block;
    margin-left: 0;
    float: right;
    z-index: 100;
    margin-top: 2px;
  }
  section.header .searchMobileBar form span input {
    padding-left: 0;
    padding-right: 0;
    display: block;
    float: none;
    width: inherit;
    margin-right: 60px;
    position: relative;
    top: -28px;
    z-index: 2;
  }
  section.header .searchMobileBar form span input::-webkit-input-placeholder {
    font-size: 10px;
  }
  section.header .searchMobileBar form span input:-moz-placeholder {
    font-size: 10px;
  }
  section.header .searchMobileBar form span input:-ms-input-placeholder {
    font-size: 10px;
  }
}
/* --- scan header nav --- */
/* Level 1 Menu / Sites */
input[type=search] {
  -moz-appearance: none;
  -webkit-appearance: none;
}

.menuLevel1 ul .arrow, span.previousList {
  display: none;
}

/* Level 2 Menu / Master Category Groups */
@media screen and (min-width: 780px) {
  section.header nav {
    /* Level 3 Menu / Master Categories */
  }
  section.header nav .menuLevel2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 35px;
    background: #2e2e2e;
    width: 100%;
    display: table;
    justify-content: space-around;
  }
  section.header nav .menuLevel2 ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "open_sans", sans-serif;
    display: table-cell;
    font-size: 1em;
    width: auto;
  }
  section.header nav .menuLevel2 ul li:first-child {
    margin-left: 12px;
  }
  section.header nav .menuLevel2 ul li:last-child {
    margin-right: 12px;
  }
  section.header nav .menuLevel2 ul li span {
    color: #fff;
    padding: 0;
  }
  section.header nav .menuLevel2 ul li.selected > span > a {
    background: #414141;
    outline: none !important;
  }
  section.header nav .menuLevel2 ul li > span > a {
    display: block;
  }
  section.header nav .menuLevel3 {
    display: block;
    border-bottom: 1px solid #bcbcbc;
    background: #fff;
    /*
    .menu-button { width:100%; text-align: center; margin:0 0 16px; 
    	> span { display: block; margin: 0 26px; border-top:1px solid $standard-border; padding: 14px 0 0;
    		button { cursor: pointer; text-transform: uppercase; border: 0!important; color: #fff; border-radius: 2px; padding: 2px; border-radius: 4px; 
    			> span { padding: 10px 30px; display: block; background-color:rgba(255, 255, 255, 1); color: #000; }
    			&:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin:-5px; z-index: -1; background-image: linear-gradient(to right, #333333 0%, #666666 100%); content: " "; border-radius: 4px;  display: block; width:200px; height:50px; margin-top: -48px; }
    		}
    	}
    } */
  }
  section.header nav .menuLevel3.visible {
    display: block;
  }
  section.header nav .menuLevel3 ul {
    margin: 0;
    font-family: "open_sans", sans-serif;
    padding: 5px 16px;
    list-style: none;
    min-height: 50px;
    width: 100%;
    display: flex;
    display: -ms-flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex-direction: column;
    height: 90px;
  }
  section.header nav .menuLevel3 ul.visible {
    display: flex;
  }
  section.header nav .menuLevel3 ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 30%;
    font-family: "open_sans", sans-serif;
    display: block;
  }
  section.header nav .menuLevel3 ul li div.formfactor-checkbox {
    margin-top: 7px;
  }
  section.header nav .menuLevel3 ul li div.formfactor-checkbox label {
    border-radius: 3px;
    border: 2px solid #bcbec0;
    width: 18px;
    height: 18px;
    margin-left: 0;
  }
  section.header nav .menuLevel3 ul li div.formfactor-checkbox label:after {
    width: 8px;
    height: 4px;
  }
  section.header nav .menuLevel3 ul li a {
    color: #707070;
    text-decoration: none;
    display: block;
    padding: 0 0 0 40px;
    overflow: hidden;
    margin: 0;
    line-height: 2.8em;
    transition: ease-in-out 0.3s;
    text-transform: none;
    font-size: 1em;
    text-align: left;
  }
  section.header nav .menuLevel3 ul li a:hover {
    background: #f3f3f3;
  }
  section.header nav .menuLevel3 ul li.title {
    display: block;
    font-family: "uni_sanssemibold", sans-serif;
    font-size: 15px;
    background: #f6f6f6;
  }
  section.header nav .home-header {
    display: none;
  }
  section.header .basket.headerBasket a.summary.responsive {
    display: none;
  }
  body.custom nav .menuLevel2 > ul {
    display: none;
  }
  body.custom nav .menuLevel2 > ul.custom-menu {
    display: table;
  }
  body.enterprise nav .menuLevel2 > ul.enterprise-menu {
    display: table;
  }
}
/* ipad / smaller screen fixes */
@media screen and (min-width: 780px) and (max-width: 1150px) {
  section.header nav .menuLevel1 li a {
    font-size: 1em;
    line-height: 3em;
  }
  section.header nav .menuLevel2 ul li span {
    font-size: 0.95em;
  }
  section.header nav .nav-header > span {
    width: 700px;
  }
}
@media screen and (min-width: 780px) and (max-width: 1050px) {
  section.header nav .nav-header > span {
    width: 600px;
  }
}
@media screen and (min-width: 780px) and (max-width: 950px) {
  section.header nav .nav-header > span {
    width: 500px;
  }
}
@media screen and (min-width: 780px) and (max-width: 800px) {
  section.header nav .nav-header > span {
    width: 490px;
  }
}
/* Sub Menu */
@media screen and (max-width: 1200px) and (min-width: 780px) {
  section.header div.basket a.summary {
    margin-top: 28px;
  }
  section.header div.basket a.summary .items {
    height: 18px;
    width: 18px;
    z-index: 10;
    position: absolute;
    margin-top: 2px;
    margin-left: 24px;
    border: 2px solid #ebecec;
    opacity: 0.8;
  }
  section.header div.basket a.summary strong {
    width: 16px;
    font-size: 11px;
  }
  section.header div.basket a.summary > i {
    margin-left: 10px;
  }
  section.header div.basket a.summary .price {
    width: 90px;
  }
  section.header nav .menuLevel2 ul li:first-child {
    margin-left: 4px;
  }
  section.header nav .menuLevel2 ul li:last-child {
    margin-right: 4px;
  }
  section.header nav .menuLevel2 ul li span {
    padding: 0 8px;
  }
  section.header nav div#menuPopup div.menuLevel4 .bodyHolder {
    width: 100%;
  }
  section.header nav div#menuPopup div.menuLevel4 > div {
    margin-top: 90px;
    width: 100%;
  }
  section.header nav div#menuPopup div.menuLevel4 > div > div {
    width: 100%;
  }
  section.header nav div.menuLevel2 ul li {
    height: inherit;
  }
  div.basket.headerBasket {
    width: 190px;
  }
  section.header > div .back-to-scan {
    margin-left: 0;
    margin-top: 27px;
  }
  section.header > div .rightCol {
    width: 540px;
  }
  section.header div.basket a.summary {
    margin-top: 26px;
  }
}
@media screen and (max-width: 1030px) and (min-width: 780px) {
  section.header > div .rightCol {
    width: 460px;
  }
}
@media screen and (max-width: 1000px) and (min-width: 780px) {
  section.header nav .menuLevel1 ul li a {
    line-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  section.header nav .menuLevel1 ul li a:before {
    display: block;
    content: " ";
    height: 6px;
  }
  section.header nav .menuLevel2 ul li:first-child {
    margin-left: 2px;
  }
  section.header nav .menuLevel2 ul li:last-child {
    margin-right: 2px;
  }
  section.header nav .menuLevel2 ul li span, section.header nav .menuLevel2 ul li a {
    padding: 0 7px;
  }
  .help .helpAnswers input {
    width: 120px;
  }
  .help .helpLinks a {
    font-size: 0.95em;
  }
  .help .helpLinks {
    padding-right: 10px;
    margin-top: 6px;
  }
  .help .helpAnswers input {
    width: 170px;
  }
  .breadcrumb button.help {
    width: 140px;
  }
  .breadcrumb button.help span:before {
    display: none;
  }
  section.header nav div#menuPopup div.menuLevel4 .bodyHolder > div > ul > li span.rowHolder > ul > li {
    width: 40%;
  }
  section.header nav div.menuLevel2 ul li {
    height: inherit;
  }
}
@media screen and (max-width: 900px) and (min-width: 780px) {
  .breadcrumb li:first-child {
    padding-right: 12px;
  }
  .breadcrumb li {
    height: 34px;
  }
  .breadcrumb li i {
    height: 6px;
    width: 6px;
  }
  .breadcrumb li a {
    padding: 12px 10px;
  }
  .breadcrumb button.help {
    display: none;
  }
  section.header .search > input {
    margin-left: 20px;
  }
  section.header .search > .btn {
    width: 40px;
    overflow: hidden;
  }
  section.header .search > .btn:before {
    font-family: "scanicons", sans-serif;
    font-style: normal;
    content: "\e918";
    padding: 0 16px 0 13px;
  }
  section.header > div .toolbar .headLinks a {
    width: 70px;
    padding-top: 2px;
  }
  .help .helpAnswers input {
    width: 160px;
  }
  section.header nav div#menuPopup div.menuLevel4 .bodyHolder div:first-child > ul > li > a {
    width: 180px;
  }
  section.header nav div#menuPopup div.menuLevel4 .bodyHolder div:first-child > ul > li > span.rowHolder {
    margin-left: 182px;
  }
  section.header nav div#menuPopup div.menuLevel4 .bodyHolder div.footer .buttonHolder {
    width: 300px;
    float: none;
    margin: 0 0 0 200px;
  }
  section.header nav div#menuPopup div.menuLevel4 > div {
    margin-top: 0;
  }
}
@media screen and (max-width: 870px) and (min-width: 780px) {
  section.header > div .rightCol {
    width: 440px;
  }
}
@media screen and (max-width: 830px) and (min-width: 780px) {
  div.basket.headerBasket {
    width: 180px;
  }
  section.header > div .rightCol {
    width: 430px;
  }
}
@media screen and (max-width: 815px) and (min-width: 780px) {
  section.header > div .rightCol {
    width: 420px;
  }
}
@media screen and (min-width: 780px) {
  .leftCol, ul.mobileMenuBreadcrumb {
    display: none;
  }
  section.header nav div.menuLevel4.visible {
    display: block;
  }
  section.header nav div.menuLevel4 {
    z-index: 999;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 100%;
    display: none;
  }
  section.header nav div.menuLevel4 > div {
    width: 1100px;
    margin: 40px auto 0;
    border: 6px solid rgba(0, 0, 0, 0.3);
    border-radius: 7px;
    z-index: 10;
  }
  section.header nav div.menuLevel4 > div.popupBackground {
    border: 0;
    border-radius: 0;
    margin-top: 0;
    width: 100%;
    position: fixed;
    z-index: -10;
  }
  section.header nav div.menuLevel4 > div > div {
    background-color: #fff;
    border-radius: 0;
    width: 1100px;
    z-index: 10;
  }
  section.header nav div.menuLevel4 > div > div a:hover {
    text-decoration: underline !important;
  }
  section.header nav div.menuLevel4 > div > div > span.title {
    display: none;
  }
  section.header nav div.menuLevel4 .header {
    min-height: 80px;
    border-bottom: 1px solid #dfdede;
  }
  section.header nav div.menuLevel4 .close {
    float: right;
    text-decoration: none;
    color: #707070;
    text-indent: 46px;
    width: 46px;
    height: 30px;
    overflow: hidden;
    border: 0;
    cursor: pointer;
    background: #fff;
    transition: ease-in-out 0.3s;
    outline: none;
  }
  section.header nav div.menuLevel4 .close:before {
    margin-left: -40px;
    line-height: 2.4em;
    font-size: 1.3em;
    padding-right: 20px;
  }
  section.header nav div.menuLevel4 .close:hover {
    color: #505050;
  }
  section.header nav div.menuLevel4 .header .rightColumn {
    width: 320px;
  }
  section.header nav div.menuLevel4 .rightColumn .filter {
    display: block;
    clear: right;
  }
  section.header nav div.menuLevel4 .rightColumn .filter a {
    font-family: "open_sans-bold", sans-serif;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    transition: ease-in-out 0.3s;
    padding: 16px 0 0 18px;
  }
  section.header nav div.menuLevel4 .header a.heading {
    padding: 34px 0 0 30px;
    display: block;
    font-size: 2.2em;
  }
  section.header nav div.menuLevel4 .bodyHolder {
    display: table;
    width: 1100px;
  }
  section.header nav div.menuLevel4 .bodyHolder a.heading {
    padding: 0;
    text-decoration: none;
    font-size: 1.1em;
    line-height: 1em;
    margin-top: 0;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child {
    display: table-cell;
    background: #f2f2f2;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #dfdede;
    width: 100%;
    clear: left;
    min-height: 40px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li:hover {
    background: #dadada;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > span.rowHolder {
    display: block;
    margin-left: 232px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > a {
    float: left;
    width: 230px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 42px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > a span {
    display: block;
    padding: 0 10px 0 32px;
    line-height: 1.3em;
    font-size: 1em;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > span.rowHolder > ul {
    list-style: none;
    padding: 8px 0 4px 0;
    margin: 0;
    width: 100%;
    display: flex;
    display: -ms-flex;
    flex-flow: row wrap;
    background: #fff;
    min-height: 24px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > span.rowHolder > ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 33%;
    min-height: 30px;
    font-size: 0.9em;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > span.rowHolder > ul > li a {
    line-height: 1.2em;
    padding: 2px 0 2px;
    margin-left: 22px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > span.rowHolder > ul > li span.checkboxLink .checkbox label {
    width: 18px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li > span.rowHolder > ul > li span.checkboxLink .checkbox label:after {
    left: 5px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li:hover > span.rowHolder, section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li:hover > span.rowHolder > ul {
    background: #e6e6e6;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li .checkboxLink {
    display: block;
    margin: 4px 0 0 16px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child > ul > li .checkboxLink a {
    margin-left: 23px;
  }
  section.header nav div.menuLevel4 .bodyHolder > div:first-child a {
    text-decoration: none;
    color: #707070;
  }
  section.header nav div.menuLevel4 .bodyHolder > div.menuBanner {
    background: green;
    display: table-cell;
    width: 220px;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer {
    background: #fff;
    width: 100%;
    height: 100px;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .checkboxLink {
    position: absolute;
    margin: 50px 0 0 30px;
    width: 160px;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .checkboxLink span:last-child {
    color: #707070;
    display: block;
    margin-left: 23px;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .buttonHolder {
    text-align: center;
    padding-top: 30px;
    vertical-align: top;
    width: 284px;
    margin: 0 auto;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .buttonHolder .viewAll {
    width: 100px;
    margin-right: 14px;
    display: block;
    float: left;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .buttonHolder button.btn {
    background: #d9dadb;
    background: linear-gradient(to top, #d9dadb, #f1f1f1);
    color: #5d5c5c;
    opacity: 0.5;
    margin-top: 0;
    overflow: hidden;
    width: 140px;
    display: block;
    float: left;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .buttonHolder a.btn {
    color: #fff;
    margin-top: 0;
    display: block;
    float: left;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .buttonHolder a.btn.on {
    background: #1463a2;
    background: linear-gradient(to top, #1463a2, #3a7fbf);
    color: #fff;
    opacity: 1;
  }
  section.header nav div.menuLevel4 .bodyHolder div.footer .buttonHolder a.btn.on:hover {
    background: #105891;
    background: linear-gradient(to top, #105891, #1463a2);
  }
  section.header nav div.menuLevel4 span.menuLoader {
    width: 100px;
    margin: 0 auto;
    padding: 0;
    height: 300px;
    display: block;
    background: url(../../images/loading.svg);
    background-size: 80px 80px;
    background-position: 0 100px;
    background-repeat: no-repeat;
  }
  section.header nav div.menuLevel3 > span.title, section.header nav div.menuLevel3 > span.menuLevel3, section.header nav div.menuLevel3 > span.menuLevel3, section.header nav div.menuLevel2 > span.title, section.header nav div.menuLevel2 > span.menuLevel3, section.header nav div.menuLevel2 > span.menuLevel3 {
    display: none;
  }
  .popupBackground {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    background: #333;
  }
}
section.header nav div.menuLevel4 .header .rightColumn {
  float: right;
  margin-left: 0;
}

.popupShown form {
  position: absolute;
  z-index: 2;
  display: block;
  height: 40px;
}
.popupShown form input {
  width: 346px !important;
  border: 1px solid #5b5b5b;
}
.popupShown form button.btn {
  border: 1px solid #5b5b5b !important;
}
.popupShown div.popup {
  margin-top: 40px !important;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .subMenu .bodyHolder > div:first-child > ul > li > span.rowHolder > ul {
    width: 750px;
  }
}
.navBackground {
  display: none;
}

@media screen and (max-width: 780px) {
  section.header nav #menu-3xs-mobile {
    display: block !important;
  }
  section.header nav #menu-3xs-mobile > div {
    right: 100%;
    transition: right 0.4s ease-in-out 0s;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 56px;
    z-index: 2000;
    background: #fff;
    min-height: 1000px;
  }
  section.header nav #menu-3xs-mobile > div.slide-in {
    right: 0;
  }
  section.header nav #menu-3xs-mobile > div > div.menuLevel1 {
    background: #fff;
  }
  section.header nav #menu-3xs {
    display: none !important;
  }
  section.header nav .menuLevel2 ul li span {
    padding-left: 24px;
  }
  body.custom .mobile-menu-tabs > a.btn-custom, body.enterprise .mobile-menu-tabs > a.btn-enterprise {
    background: #2e2e2e;
    background: linear-gradient(to top, #2e2e2e, #403e3f);
    color: #fff;
  }
  body div.container {
    margin-top: 52px;
  }
  body[data-isloggedin] .headLinks .myaccount-links > span:first-child > i {
    display: block;
    background: #2172ad;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    position: absolute;
    margin-left: 16px;
    margin-top: 1px;
  }
  body[data-isloggedin] .headLinks .myaccount-links > span:first-child > i:before {
    display: block;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    content: " ";
    transform: rotate(45deg);
    width: 3px;
    height: 7px;
    margin-left: 9px;
    margin-top: 6px;
  }
  section.header > div {
    height: 52px;
  }
  section.header > div .logo {
    margin: 0 170px 0 110px;
    float: none;
    height: 52px;
    text-align: center;
  }
  section.header > div .logo a {
    background-size: 100px 26px;
    width: 100px;
    height: 26px;
    margin: 6px auto 0 auto;
    padding-top: 10px;
  }
  section.header > div div.rightCol {
    width: 106px;
    margin-top: -56px;
  }
  section.header > div div.rightCol .headLinks {
    width: 38px;
    height: 48px;
    padding-top: 0;
    padding-right: 0;
  }
  section.header > div div.rightCol .headLinks > span {
    height: 48px;
    width: 48px;
    display: block;
    overflow: hidden;
    line-height: 4.2em;
    margin-left: 0;
    padding: 0;
  }
  section.header > div div.rightCol .headLinks > span:before {
    display: inline-block;
    font-size: 2.1em;
    padding: 0 10px 0 10px;
    margin-left: 0;
    margin-top: 0;
    position: inherit;
  }
  section.header > div div.rightCol .myaccount-links {
    width: 30px;
    height: 28px;
    overflow: hidden;
    margin-top: 7px;
  }
  section.header > div div.rightCol .myaccount-links:before {
    display: none;
  }
  section.header > div div.rightCol .myaccount-links > span:first-child:before {
    font-family: "scanicons", sans-serif;
    font-style: normal;
    content: "\e90e";
    display: block;
    float: left;
    width: 34px;
    height: 28px;
    font-size: 26px;
    margin-top: 2px;
  }
  section.header > div div.rightCol .myaccount-links > span:last-child {
    display: none;
  }
  section.header > div div.rightCol .basket.headerBasket {
    float: left;
    width: 60px;
  }
  section.header > div div.rightCol .basket.headerBasket a.summary {
    background: none;
    margin-top: 2px;
  }
  section.header > div {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
  }
  .leftCol button.menu {
    display: block;
  }
  .leftCol {
    display: block;
    float: left;
    width: 110px;
  }
  div.search {
    display: none;
  }
  section.header .searchMobileBar {
    position: fixed;
    display: none;
    top: 0;
    height: 52px;
    width: 100%;
    background: #000;
    z-index: 300;
  }
  section.header .searchMobileBar span {
    display: block;
    margin-right: 62px;
    padding-top: 10px;
    padding-left: 10px;
  }
  section.header .searchMobileBar span input {
    z-index: 1;
    border: 1px solid #fff;
    margin: 0;
    width: 100%;
    float: left;
    height: 26px;
    text-indent: 10px;
  }
  section.header .searchMobileBar span button {
    position: relative;
    float: right;
    width: 32px;
    margin-left: -42px;
    margin-top: 1px;
    line-height: 1.8em;
    background: none;
    border: 0;
    font-size: 1.2em;
    color: #575757;
    height: 28px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    z-index: 20;
  }
  section.header .searchMobileBar span button:before {
    font-family: "scanicons", sans-serif;
    font-style: normal;
    content: "\e918";
    padding-left: 0px;
    padding-right: 12px;
  }
  section.header .searchMobileBar button.x {
    float: right;
    width: 40px;
    overflow: hidden;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
    height: 40px;
    margin: 6px 6px 0 0;
    font-size: 1.4em;
  }
  section.header .searchMobileBar button.x:before {
    font-family: "scanicons", sans-serif;
    font-style: normal;
    content: "\e910";
    padding: 8px 16px 8px 0px;
    color: #fff;
  }
  section.header .basket {
    width: 160px;
    height: 52px;
  }
  section.header .basket a.summary {
    margin-top: 0;
    height: 52px;
    background: #fff;
  }
  section.header .basket a.summary span.btn {
    display: none;
  }
  section.header .basket a.summary > i:before {
    padding: 0 12px 0 6px;
    line-height: 1.5em;
  }
  section.header .basket a.summary .items {
    margin-left: 28px;
    margin-top: 6px;
    border: 2px solid #fff;
    border-radius: 14px;
  }
  section.header .basket a.summary .items > strong {
    padding-top: 2px !important;
  }
  section.header .basket a.summary .price {
    margin-top: 18px;
  }
  section.header > div div.rightCol {
    width: 176px;
    display: block;
  }
  section.header > div div.rightCol a.back-to-scan {
    margin-left: 0;
    margin-top: 8px;
    width: 64px;
  }
  section.header > div div.rightCol a.back-to-scan:before {
    content: "Back to";
    font-size: 0.8em;
  }
  section.header > div div.rightCol a.back-to-scan > i {
    display: none;
  }
  section.header > div div.rightCol a.back-to-scan > span {
    display: none;
  }
  section.header > div div.rightCol a.back-to-scan > span.title {
    display: block;
    padding-left: 0;
    font-size: 14px;
  }
  .leftCol button.menu {
    height: 52px;
    width: 52px;
    border: 0;
    background: #fff;
    overflow: hidden;
    vertical-align: top;
    padding: 0;
    margin: 0;
    text-align: center;
    float: left;
    cursor: pointer;
  }
  .leftCol button.menu span.iconBar {
    border-top: 2px solid #000;
    display: block;
    height: 6px;
    width: 26px;
    margin: 0 auto;
  }
  .leftCol button.menu span.iconBar:first-child {
    margin-top: 6px;
  }
  .leftCol button.search {
    height: 52px;
    display: block;
    width: 52px !important;
    float: left;
    border: 0;
    line-height: 3.9em;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    position: inherit !important;
  }
  .leftCol button.search:before {
    display: block;
    content: "\e918";
    font-family: "scanicons", sans-serif;
    font-style: normal;
    font-size: 1.4em;
    color: #000;
  }
  .mobileHide {
    display: none !important;
  }
  section.header {
    background: #fff;
    top: 0;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  section.header > div:first-child {
    border-bottom: 4px solid #000;
    box-shadow: 0 4px 15px #333333;
    z-index: 3000;
    top: 0;
    right: 0;
    left: 0;
  }
  section.header nav { /* right:100%; transition: right 0.4s ease-in-out 0s; width: 100%; height: 100%;  position: absolute; top: 56px; display: block !important; box-shadow: 1px 0 2px 0 rgba(228, 228, 228, 0.2); z-index: 2000; background: #fff; */ }
  section.header nav.mobileVisible {
    z-index: 1900;
    display: block;
    height: 100%;
    background-color: #fff;
    right: 0;
  }
  section.header nav > div div.mobileVisible.mobileHideOptions > span.title {
    background: #dcdcdc !important;
    color: #787878 !important;
  }
  section.header nav > div div.mobileVisible.mobileHideOptions > span.title i {
    display: block;
    float: right;
    width: 12px;
    height: 12px;
    margin-top: 20px;
  }
  section.header nav > div div.mobileVisible.mobileHideOptions > span.title i:before {
    border-left: 3px solid #787878;
    border-top: 3px solid #787878;
    transform: rotate(45deg);
    content: " ";
    display: block;
    width: 9px;
    height: 9px;
  }
  section.header nav > div > div > span.title, section.header nav > div > div > div span.title {
    background: #f5f5f5;
    display: block;
    height: 48px;
    cursor: pointer;
    border-bottom: 1px solid #cdcdcd;
    padding: 0 30px;
  }
  section.header nav > div > div > span.title > span, section.header nav > div > div > div span.title > span {
    display: block;
    font-size: 1.1em;
    padding: 16px 0 0;
    font-weight: bold;
  }
  section.header nav > div > div > span.title i, section.header nav > div > div > div span.title i {
    display: none;
  }
  section.header nav .menuLevel1 > ul {
    display: none;
  }
  section.header .menuLevel2 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    top: 0;
    display: block !important;
  }
  section.header .menuLevel2.mobileVisible {
    display: block;
    height: 100%;
    transform: scale(1, 1);
  }
  section.header .menuLevel2.mobileVisible span.title {
    background: #3d70b7;
    color: #fff;
  }
  section.header .menuLevel2 > ul > li.title {
    display: block !important;
    font-family: "uni_sanssemibold", sans-serif;
    font-size: 15px;
    background: #f6f6f6;
  }
  section.header .menuLevel2 > ul > li.title > span:after {
    display: none;
  }
  section.header .menuLevel2 > ul > li > span, section.header .menuLevel2 > ul > li > a {
    text-align: left !important;
    color: #000 !important;
  }
  section.header .menuLevel2 > div.nav-header {
    display: block;
    position: inherit;
    top: inherit;
  }
  section.header .menuLevel3 {
    position: absolute;
    z-index: 2000;
    top: 1200px;
    height: 1200px;
    background: #fff;
    width: 100%;
    display: block !important;
    transition: 0.4s ease-in-out 0s;
  }
  section.header .menuLevel3 ul {
    display: block;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    margin-top: 126px;
  }
  section.header .menuLevel3 ul li {
    height: 44px;
    border-bottom: 1px solid #cdcdcd;
  }
  section.header .menuLevel3 ul li:after {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-top: -27px;
    margin-right: 24px;
    content: " ";
    font-size: 2em;
    transform: rotate(45deg);
    border-top: 3px solid #787878;
    border-right: 3px solid #787878;
    position: absolute;
    right: 0;
  }
  section.header .menuLevel3 ul li div.formfactor-checkbox {
    margin-top: 9px;
    margin-left: 26px;
  }
  section.header .menuLevel3 ul li div.formfactor-checkbox label {
    border-radius: 2px;
    border: 1px solid #bcbec0;
    width: 22px;
    height: 22px;
    text-indent: 22px;
    margin-left: 0;
  }
  section.header .menuLevel3 ul li div.formfactor-checkbox label:after {
    width: 10px;
    height: 6px;
    top: 5px;
    left: 5px;
  }
  section.header .menuLevel3 ul li a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 0 0 0 64px;
    overflow: hidden;
    margin: 0;
    line-height: 3.1em;
    transition: ease-in-out 0.3s;
    text-transform: none;
    font-size: 1.1em;
    text-align: left;
  }
  section.header .menuLevel3 ul li a:hover {
    background: #f3f3f3;
  }
  section.header .menuLevel3 ul li.back {
    display: block;
    background: #f3f3f3;
  }
  section.header .menuLevel3 ul li.back > a {
    padding-left: 30px;
  }
  section.header .menuLevel3 ul li.back > a:before {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-top: -27px;
    margin-right: 24px;
    content: " ";
    font-size: 2em;
    transform: rotate(45deg);
    border-bottom: 3px solid #787878;
    border-left: 3px solid #787878;
  }
  section.header .menuLevel3 ul li.back:after {
    display: none;
  }
  section.header .menuLevel3 .menu-button {
    width: 100%;
    text-align: center;
    margin: 0 0 16px !important;
    background: #f3f3f3;
  }
  section.header .menuLevel3 .menu-button span {
    display: block;
    margin: 0;
    padding: 14px 0;
  }
  section.header #menuPopup {
    background: #fff;
  }
  section.header nav .mobileHideOptions {
    transform: scale(1, 0);
  }
  section.header nav .mobileHideOptions > ul {
    display: none !important;
  }
  span.home-header {
    display: block;
    color: #fff;
    background: #000000 url(../../images/mobile-menu-left-hex-3533585ec5.png);
    background-repeat: no-repeat;
    background-position: right 10px;
    background-size: 124px 120px;
    height: 126px;
  }
  span.home-header:before {
    display: block;
    content: " ";
    position: absolute;
    right: 6px;
    width: 176px;
    height: 110px;
    background: url(../../images/menu-mobile-systems-970233a9bc.png);
    background-repeat: no-repeat;
    background-position: right 10px;
    background-size: 180px 290px;
    overflow: hidden;
  }
  span.home-header > span {
    padding-left: 22px;
    font-family: "uni_sanssemibold", sans-serif;
    font-size: 1.55em;
    display: block;
  }
  span.home-header > span.home-title {
    padding-top: 12px;
    background: none;
  }
  span.home-header > span.desc {
    float: left;
    font-weight: normal;
    font-size: 0.95em;
    padding: 2px 0 8px 22px;
    font-family: "open_sans", sans-serif;
  }
  span.home-header a.button-3xs {
    display: inline-block;
  }
  span.home-header.custom-pcs > span.desc {
    margin-right: 180px;
  }
  span.home-header.pro-gaming-pcs > span.desc {
    margin-right: 120px;
  }
  span.home-header.pro-gaming-pcs a.button-3xs {
    background-image: linear-gradient(to right, #f48920 0%, #e9c21e 100%);
  }
  #toolbar > div.breadcrumb ul li:nth-child(2) {
    display: none;
  }
  #toolbar > div.breadcrumb ul li:last-child {
    display: inline-block;
  }
  .navBackground {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    opacity: 0;
    display: block;
    top: 100%;
    right: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease-in-out 0s;
  }
  .navBackground:before {
    content: " ";
  }
  .navBackground.mobileVisible {
    display: block;
    opacity: 1;
    top: 0;
  }
  #scrollHelper {
    display: none !important;
  }
  #toolbar .help {
    display: none;
  }
  section.header .basket {
    width: 52px;
  }
  section.header .basket a.summary {
    padding: 0;
    display: none;
  }
  section.header .basket a.summary .price {
    display: none;
  }
  section.header .basket a.summary > i {
    width: 52px;
  }
  section.header .basket a.summary.responsive {
    display: block;
  }
  section.header .basket a.summary.responsive .items {
    position: absolute;
  }
  section.header nav .menuLevel1 {
    overflow: hidden;
    width: 100%;
    border-bottom: 0;
  }
  section.header nav .menuLevel1 ul {
    display: none;
    margin: 0 34px 0 0;
    background: #eaeaea;
    height: 56px;
    padding: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  section.header nav .menuLevel1 ul li {
    height: 90px;
    flex-direction: row;
  }
  section.header nav .menuLevel1 ul li a {
    height: 90px;
    border-right: 1px solid #d6d6d6;
    font-size: 0.9em;
    line-height: 1.2em;
    word-spacing: normal;
  }
  section.header nav .menuLevel1 ul li a:before {
    display: block;
    height: 40px;
    font-family: "scanicons", sans-serif;
    font-style: normal;
    margin: 0 auto;
    width: 60px;
    font-size: 2.4em;
    overflow: hidden;
    line-height: 1.4em;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  section.header nav .menuLevel1 ul li:first-child {
    margin-left: 36px;
  }
  section.header nav .menuLevel1 span.arrow {
    display: none;
  }
  section.header nav .menuLevel1 .mobile-menu-tabs {
    display: table;
    width: 100%;
  }
  section.header nav .menuLevel1 .mobile-menu-tabs > button, section.header nav .menuLevel1 .mobile-menu-tabs > a {
    display: table-cell;
    border: 0;
    width: 50%;
    cursor: pointer;
    font-family: "uni_sanssemibold", sans-serif;
    font-style: normal;
    text-transform: uppercase;
    font-size: 14px;
  }
  section.header nav .menuLevel1 .mobile-menu-tabs > button.selected, section.header nav .menuLevel1 .mobile-menu-tabs > a.selected {
    background: #282828;
    background: linear-gradient(to top, #282828, #282828, #000000);
    color: #fff;
  }
  section.header nav .menuLevel1 .mobile-menu-tabs .nav-header {
    margin-top: 56px;
  }
  section.header nav .menuLevel3 .nav-header {
    width: 100%;
  }
  section.header > nav .menuLevel2 {
    display: block;
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: "open_sans", sans-serif;
    clear: left;
  }
  section.header > nav .menuLevel2 ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #707070;
    background: #fff;
  }
  section.header > nav .menuLevel2 ul li {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  section.header > nav .menuLevel2 ul li span, section.header > nav .menuLevel2 ul li a {
    display: block;
    cursor: pointer;
    height: 44px;
    overflow: hidden;
    border-bottom: 1px solid #cdcdcd;
    font-size: 1.1em;
    line-height: 2.9em;
    text-decoration: none;
    color: #707070;
  }
  section.header > nav .menuLevel2 ul li span a {
    padding: 0;
  }
  section.header > nav .menuLevel2 ul li span a:after {
    display: block;
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-top: 14px;
    margin-right: 30px;
    content: " ";
    font-size: 2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: 3px solid #787878;
    border-right: 3px solid #787878;
    position: absolute;
    right: 0;
  }
  ul.mobileMenuBreadcrumb {
    display: block;
    background: #f2f2f2;
    margin: 0;
    padding: 18px 30px 20px;
    border-top: 1px solid #cdcdcd;
    list-style: none;
    font-family: "open_sans", sans-serif;
    font-size: 1.1em;
    color: #575757;
  }
  ul.mobileMenuBreadcrumb button.btn {
    display: block !important;
    width: 52px;
    height: 52px;
    overflow: hidden;
    line-height: 4em;
    background: none;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    margin-left: -36px;
    margin-top: -18px;
  }
  ul.mobileMenuBreadcrumb button.btn:before {
    display: block;
    width: 13px;
    height: 13px;
    margin-top: 18px;
    margin-left: 28px;
    margin-right: 20px;
    content: " ";
    font-size: 2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom: 3px solid #5b5b5b;
    border-left: 3px solid #5b5b5b;
  }
  ul.mobileMenuBreadcrumb > li {
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
    display: inline-block;
    text-transform: uppercase;
    line-height: 1em;
  }
  ul.mobileMenuBreadcrumb > li:first-child {
    padding: 0;
  }
  ul.mobileMenuBreadcrumb > li:first-child:before {
    display: none;
  }
  section.header .basket a.summary {
    display: none;
  }
  section.header .basket a.summary.responsive {
    display: block !important;
  }
  div.page-overlay.zoom-view-close {
    top: 56px;
  }
  nav.slide-in {
    right: 0 !important;
  }
  div.menuLevel3.slide-up {
    top: 56px !important;
  }
}
@media screen and (max-height: 790px) {
  section.header .basket .popup div.scansure {
    display: none;
  }
}
@media screen and (max-height: 760px) {
  section.header .basket .popup .productList {
    height: 200px;
  }
}
@media screen and (max-width: 600px) {
  section.header .mobileVisible {
    display: block !important;
  }
}
@media screen and (max-width: 540px) {
  .nav-header > span > i {
    height: 126px;
    background-size: 130px 81px;
    background-position: center;
    width: 150px;
  }
}
@media screen and (max-width: 500px) {
  body div.container {
    margin-top: 40px;
  }
  body div.container.customer-logged-in .myaccount-links > span:first-child > i {
    width: 18px;
    height: 18px;
    border-radius: 11px;
    position: absolute;
    margin-left: 12px;
    margin-top: 1px;
  }
  body div.container.customer-logged-in .myaccount-links > span:first-child > i:before {
    width: 3px;
    height: 7px;
    margin-left: 7px;
    margin-top: 4px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  body[data-isloggedin] .headLinks .myaccount-links > span:first-child > i {
    height: 18px;
    width: 19px;
    margin-left: 12px;
  }
  section.header > div {
    height: 40px;
  }
  section.header > div .logo {
    margin: 0 140px 0 82px;
  }
  section.header > div .logo a {
    background-size: 80px 21px;
    width: 80px;
    height: 21px;
    margin-top: 8px;
    padding-top: 1px;
  }
  section.header > div div.rightCol {
    margin-top: -60px;
    height: 40px;
    width: 140px !important;
  }
  section.header > div div.rightCol div.headLinks {
    width: 30px;
    height: 40px;
  }
  section.header > div div.rightCol div.headLinks > span {
    line-height: 3.5em;
    width: 40px;
    height: 40px;
  }
  section.header > div div.rightCol div.headLinks > span:before {
    font-size: 1.8em;
  }
  section.header > div div.rightCol .myaccount-links {
    margin-top: 8px;
  }
  section.header > div div.rightCol .myaccount-links > span:first-child:before {
    font-size: 20px;
  }
  section.header > div div.rightCol .myaccount-links > span:first-child > i::before {
    margin-left: 8px;
    margin-top: 5px;
  }
  section.header > div div.rightCol div.basket.headerBasket {
    width: 46px;
    height: 40px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary {
    height: 40px;
    width: 41px;
    margin-top: 1px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary span.items {
    font-size: 0.85em;
    height: 19px;
    width: 19px;
    margin-top: 4px;
    margin-left: 21px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary span.items strong {
    padding-top: 1px;
    width: 19px;
  }
  section.header > div div.rightCol div.basket.headerBasket a.summary > i {
    margin-top: 5px;
    margin-left: 2px;
    font-size: 1.6em;
  }
  section.header > div div.rightCol a.back-to-scan {
    width: 54px;
    margin-top: 7px;
  }
  section.header > div div.rightCol a.back-to-scan:before {
    font-size: 0.7em;
  }
  section.header > div div.rightCol a.back-to-scan > span.title {
    font-size: 12px;
    margin-top: 0;
  }
  section.header nav {
    top: 42px;
  }
  section.header nav #menu-3xs-mobile > div {
    top: 42px;
  }
  section.header .leftCol {
    width: 90px;
  }
  section.header .leftCol button.menu {
    width: 42px;
    height: 40px;
  }
  section.header .leftCol button.menu span.iconBar {
    width: 22px;
    height: 5px;
  }
  section.header .leftCol button.menu span.iconBar:first-child {
    margin-top: 4px;
  }
  section.header .leftCol button.search {
    margin: 0;
    width: 40px !important;
    height: 40px;
  }
  section.header .leftCol button.search:before {
    line-height: 2.2em;
  }
}
@media screen and (max-height: 450px) {
  .mobile-slide-menu {
    padding-top: 15px;
  }
  .mobile-slide-menu a {
    font-size: 18px;
  }
}
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

.loading-3xs {
  padding: 0;
  text-align: center;
  position: relative;
}
.loading-3xs > i {
  width: 100px;
  height: 100px;
  margin: 40px auto;
  display: block;
  opacity: 0.7;
  position: absolute;
  left: 0;
  right: 0;
}
.loading-3xs > i:before {
  content: " ";
  width: 100px;
  height: 100px;
  background: url("../../images/loading-3xs-3591b2e3ef.svg") no-repeat left top;
  display: block;
  animation: loading-spin 2s linear infinite;
}
.loading-3xs > i > span {
  background: url("../../images/logo-scan-3xs-33b9460e67.svg") no-repeat left top;
  background-size: 131px 20px;
  background-position: -83px 0;
  display: block;
  margin-top: -60px;
  margin-left: 25px;
  text-indent: 50px;
  position: absolute;
  overflow: hidden;
  height: 20px;
  width: 50px;
}

@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.openSansFont, div.hoverMenu > ul > li > a, div.hoverMenu > ul > li > button {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont, div.hoverMenu > ul > li.vatToggle > button strong {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

div.hoverMenu {
  border: 6px solid rgba(0, 0, 0, 0.4);
  background: #fff;
  border-radius: 7px;
  margin-top: 4px;
  position: absolute;
  z-index: 20;
  box-shadow: 0 0 6px #777;
}
div.hoverMenu .close {
  width: 12px;
  overflow: hidden;
  display: block;
  float: right;
  margin: 10px 14px 0 0;
  cursor: pointer;
}
div.hoverMenu .close:before {
  padding-right: 10px;
}
div.hoverMenu > ul {
  margin: 30px 16px 40px;
  list-style: none;
  padding: 0;
}
div.hoverMenu > ul > li {
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ddd;
}
div.hoverMenu > ul > li > a, div.hoverMenu > ul > li > button {
  position: inherit;
  color: #5b5b5b;
  padding: 8px 0;
  margin: 0;
  display: block;
  text-transform: none;
  font-size: 1em;
  text-decoration: none;
}
div.hoverMenu > ul > li > a:before, div.hoverMenu > ul > li > button:before {
  display: none;
}
div.hoverMenu > ul > li > a:hover, div.hoverMenu > ul > li > button:hover {
  background: #ddd;
}
div.hoverMenu > ul > li > button {
  border: 0;
  background: none;
  width: 100%;
  cursor: pointer;
}
div.hoverMenu > ul > li.vatToggle {
  border-top: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
}
div.hoverMenu > ul > li.vatToggle > button strong {
  color: #3d70b7;
}
div.hoverMenu.small {
  width: 180px;
  margin-left: -36px;
}

@media screen and (min-width: 780px) {
  section.header .headLinks div.popupBackground {
    display: none;
  }
}
@media screen and (max-width: 780px) {
  section.header .headLinks div.popupBackground {
    display: block;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    background: #333;
  }
  section.header .headLinks div.hoverMenu {
    top: 20px;
    left: 50%;
  }
  section.header .headLinks div.hoverMenu.small {
    margin-left: -90px;
  }
}
.openSansFont {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default, .nav-header {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming, .nav-header.progaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics, .nav-header.prograph {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio, .nav-header.proaudio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video, .nav-header.provideo {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default, .nav-header .button-3xs, .nav-header > span > span a.button-3xs {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming, .nav-header.progaming a.button-3xs {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics, .nav-header.prograph a.button-3xs {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio, .nav-header.proaudio a.button-3xs {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video, .nav-header.provideo a.button-3xs {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc, .nav-header.custom-pcs > span > i {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming, .nav-header.progaming > span > i {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video, .nav-header.provideo > span > i {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics, .nav-header.prograph > span > i {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio, .nav-header.proaudio > span > i {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators, .nav-header.simulators > span > i {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice, .nav-header.homeoffice > span > i {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles, .nav-header.bundle > span > i {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc, .nav-header.yourpc > span > i {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops, .nav-header.laptop > span > i {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc, .nav-header.special > span > i {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers, .nav-header.servers > span > i {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc, .nav-header.hpc > span > i {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai, .nav-header.deeplearn > span > i {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading, .nav-header.trading > span > i {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage, .nav-header.signage > span > i {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud, .nav-header.cloudwork > span > i {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

.nav-header {
  height: 88px;
  margin: 0 26px 26px;
  border: 1px solid #acacac;
  overflow: hidden;
}
.nav-header > span {
  display: table;
  vertical-align: middle;
  margin-left: 0;
  width: 800px;
  height: 88px;
  color: #fff;
  background: url(../../images/ban-desktop-black-hex-fc6f278bd2.png);
  background-position: top right;
  background-repeat: no-repeat;
}
.nav-header > span > span {
  display: table-cell;
  height: 88px;
  vertical-align: middle;
}
.nav-header > span > span > span.home-title {
  font-family: "uni_sansbold", sans-serif;
  font-size: 2em;
  display: block;
  padding-left: 28px;
}
.nav-header > span > span > span.desc {
  font-family: "open_sans", sans-serif;
  font-size: 1.1em;
  padding-left: 28px;
  display: block;
}
.nav-header > span > span a.button-3xs {
  display: none;
}
.nav-header > span > i {
  display: table-cell;
  height: 88px;
  width: 142px;
  display: block;
  background-size: 142px 88px;
  background-repeat: no-repeat;
}
.nav-header .button-3xs {
  display: block;
  float: right;
  margin-top: 26px;
  margin-right: 26px;
}
@media screen and (max-width: 780px) {
  .nav-header {
    position: absolute;
    top: 0;
    margin: 0;
    border: 0;
    height: 126px;
  }
  .nav-header > span {
    background-position: right -90px;
    height: 126px;
    width: inherit;
  }
  .nav-header > span > span > span.home-title {
    font-size: 1.4em;
  }
  .nav-header > span > span > span.desc {
    font-size: 1em;
  }
  .nav-header > span > span a.button-3xs {
    display: block;
    margin-top: 8px;
    float: left;
    font-size: 12px;
  }
  .nav-header > span > span a.button-3xs > span {
    padding: 7px 26px 9px;
  }
  .nav-header > span > i {
    height: 126px;
    background-size: 161px 100px;
    background-position: center;
    width: 180px;
  }
  .nav-header > a.button-3xs {
    display: none;
  }
}
#loading {
  display: none;
}

p {
  margin: 0;
}

/* page headers */
.SystemTypeIntro, .SystemUsageIntro {
  margin: 0 auto;
  width: 1280px;
  display: flex;
  background: #000000 url("../../images/3xs-pod-bg-24b92e9f84.jpg") no-repeat;
  background-position: 500px 65px;
  background-size: 700px 256px;
}

.IntroBlock {
  width: 840px;
}

.IntroBlock h1 {
  color: #fff;
  font-family: "uni_sansbold", sans-serif;
  font-size: 1.7em;
  margin: 0;
  padding: 70px 0 0 80px;
  font-weight: normal;
}

.IntroBlock p {
  font-size: 0.85em;
  color: #fff;
  padding: 10px 100px 0 80px;
  font-family: "open_sans", sans-serif;
}

.IntroBlock a {
  text-decoration: none;
  font-family: "open_sans-bold", sans-serif;
  text-transform: uppercase;
  font-size: 1em;
  color: #2b74b2;
}

.ImageBlock img {
  margin: 20px 70px 0 0;
}

/* content Include Styles */
.include-contC {
  width: 1280px;
  margin: 0 auto;
  border-top: 3px solid #2e2e2e;
}

.include-contHolder {
  background-color: #ffffff;
}

.blockHolder {
  padding: 15px 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 8px;
}

.blockHolder .block {
  flex: 0 1 33%;
  display: flex;
}

.blockHolder .blockCont {
  margin: 12px;
  border: 1px solid #ccc;
  text-align: center;
}

.blockBody {
  text-align: center;
  height: 420px;
}

.blockHolder .blockImage {
  border-bottom: 1px solid #ccc;
  margin: 0 20px;
}

.blockBody h2 {
  font-family: "uni_sanssemibold", sans-serif;
  margin: 0;
  font-size: 1.6em;
  font-weight: normal;
  text-align: center;
  padding: 30px 0 10px 0;
  color: #000000;
}

.blockBody p {
  font-family: "open_sans", sans-serif;
  color: #5b5b5b;
  padding: 0 25px;
  font-size: 0.8em;
  line-height: 18px;
  margin: 0;
}

.buttonLink {
  font-family: "open_sans-bold", sans-serif;
  text-transform: uppercase;
  border: 0;
  background: rgba(0, 0, 0, 0) linear-gradient(to top, #a0a0a0, #858484) repeat scroll 0 0;
  color: #fff;
  margin: 0 auto 15px auto;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 0.85em;
  padding: 12px;
  width: auto;
}

.blockHolder .blockBody a {
  text-transform: uppercase;
  text-decoration: none;
  color: #2b74b2;
  font-family: "open_sans-bold", sans-serif;
}

.introText {
  padding: 0 50px;
  background-color: #ffffff;
}

.introText h2 {
  font-family: "uni_sansbold", sans-serif;
  font-size: 2.2em;
  font-weight: normal;
  text-align: center;
  padding: 40px 0 0 0;
  margin: 0;
  color: #000000;
}

.introText p {
  padding: 15px 0 20px 0;
  color: #000000;
  text-align: center;
  margin: 0;
  font-size: 0.9em;
  font-family: "open_sans", sans-serif;
}

/* System menu nav */
.main-outer {
  width: 1280px;
  margin: 0 auto;
  height: 100%;
  position: relative;
}

.main-outer .popup-bg {
  background-color: rgba(1, 1, 1, 0.8);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
}

/* Form factor menu */
.system-formfactor h2 {
  color: #000000;
  text-align: center;
  font-family: "uni_sansbold", sans-serif;
  font-size: 1.8em;
  margin: 20px 20px 0 20px;
  padding-bottom: 8px;
  border-bottom: 4px solid #e9eaeb;
  font-weight: normal;
}

.system-formfactor {
  position: relative;
  width: 1100px;
  border: 5px solid #000000;
  border-radius: 6px;
  background-color: #ffffff;
  margin: 90px 90px 0 90px;
  z-index: 100;
}

.system-formfactor .close-formfactor {
  position: absolute;
  height: 25px;
  width: 25px;
  right: 10px;
  top: 10px;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: none;
}

.system-formfactor .close-formfactor span {
  text-indent: 50px;
  display: block;
  width: 20px;
  background: url("../../images/3xs-sprite-2018-686da2e872.svg") no-repeat;
  background-size: 1000px 1000px;
  background-position: -495px -10px;
  margin-left: -3px;
}

.system-formfactor .heading p {
  display: none;
}

.formfactor-priceFilter {
  display: none;
}

.formfactor-menu {
  padding: 20px;
}

.formfactor-menu .menu-button {
  text-align: center;
}

.formfactor-menu button {
  padding: 10px 30px;
  font-family: "open_sans-bold", sans-serif;
  text-transform: uppercase;
  border: 0 !important;
  color: #ffffff !important;
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(to top, #212123, #414143);
}

.formfactor-menu button[disabled] {
  background: linear-gradient(to top, #dbdcdd, #e9eaeb);
}

.formfactor-menuItems a {
  text-decoration: none;
  color: #5b5b5b;
  font-family: "open_sans-bold", sans-serif;
  text-transform: uppercase;
  font-size: 0.9em;
  margin: 0 10px 0 35px;
  display: block;
}

.formfactor-menuItems ul {
  margin: 10px 0 25px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.formfactor-menuItems li {
  list-style: none;
  padding: 8px 0;
  background-color: #e9eaeb;
  border-radius: 3px;
  margin: 8px 12px 6px 0;
  width: 32%;
}

.formfactor-menuItems .subHeader p {
  font-family: "open_sans", sans-serif;
  font-size: 0.85em;
}

.formfactor-checkbox label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  top: 0;
  left: 0;
  background: #ffffff;
  border-radius: 3px;
  overflow: hidden;
  text-indent: 20px;
  line-height: 3em;
  position: absolute;
  margin-left: -3px;
  transition: 0.8s;
}

.formfactor-checkbox {
  display: inline-block;
  position: absolute;
  margin-left: 10px;
}

.formfactor-checkbox label::after {
  content: "";
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #1e1f20;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  background: transparent;
  opacity: 0;
  transition: 0.8s;
}

.formfactor-checkbox label:hover::after {
  opacity: 0.2;
}

.formfactor-checkbox label:checked::after {
  opacity: 1;
}

.formfactor-checkbox input:checked + label::after {
  opacity: 1;
}

.configTypes4 {
  display: flex;
}

.system-series {
  background-color: #2c2c2c;
}

.system-series span {
  display: block;
}

.system-series .tabs {
  display: inline-block;
  text-align: center;
  width: 50%;
  font-family: "uni_sansbold", sans-serif;
  color: #808284;
  text-decoration: none;
  font-size: 1.8em;
  transition: all 0.8s ease-in-out 0s;
}

.system-series .tabs:hover {
  background-color: #151515;
}

/* .system-series a.tabs:nth-child(2), .system-series a.tabs:nth-child(3)  { display:none; }  */
.system-series .tabs .underline {
  padding: 25px 0 15px 0;
}

.system-series .tabs.on .underline {
  display: block;
  margin: 0 20px;
  border-bottom: 2px solid #000000;
}

.system-series .tabs.on {
  color: #000000;
  background-color: #f3f3f4;
}

.system-series .seriesTag {
  font-size: 0.45em;
  color: #6d6e70;
  font-family: "open_sans", sans-serif;
  padding: 0 25px;
}

.shopBy .heading {
  background-color: #f3f3f4;
  min-height: 78px;
}

.shopBy .heading span {
  display: block;
  font-family: "uni_sanssemibold", sans-serif;
  font-size: 1.6em;
  color: #000000;
}

.shopBy .heading p {
  text-align: center;
  font-family: "open_sans", sans-serif;
  font-size: 0.8em;
  padding: 8px 10px 10px 10px;
  color: #6d6e70;
}

.shopBy {
  display: flex;
  background-color: #f3f3f4;
  padding: 25px 0;
}

.shopBy > div {
  border-right: 3px solid #e7e8e9;
}

.shopBy .byEdition {
  border: 0;
}

.shopBy .selections {
  padding: 6px 9px;
}

.shopBy .byUse .selections {
  padding: 6px 12px;
}

.enterprise .shopBy .heading {
  position: relative;
}

.enterprise .shopBy .heading > p:before {
  display: block;
  position: absolute;
  margin-top: 35px;
  width: 100%;
}

.enterprise .shopBy.usageTypes-3 .bySpec > div.heading > p:before {
  content: "Public, private and hybrid cloud systems";
}

.enterprise .shopBy.usageTypes-3 .byPrice > div.heading > p:before {
  content: "Enterprise solutions for your business";
}

.enterprise .shopBy.usageTypes-3 .byUse > div.heading > p:before {
  content: "A selection of systems optimised for specific tasks";
}

.enterprise .shopBy .heading > p {
  overflow: hidden;
  height: 58px;
  padding: 0;
}

.enterprise .shopBy .heading > p > span:before {
  display: block;
  padding: 10px 0 26px 0;
}

.enterprise .shopBy.usageTypes-3 .bySpec > div.heading > p > span:before {
  content: "Cloud Solutions";
}

.enterprise .shopBy.usageTypes-3 .byUse > div.heading > p > span:before {
  content: "On Premises Solutions";
}

.enterprise .shopBy.usageTypes-3 .byPrice > div.heading > p > span:before {
  content: "Additonal Services";
}

.enterprise.cloudwork .popup-bg {
  display: none;
}

.enterprise.network .popup-bg {
  display: none;
}

.enterprise.forensics .popup-bg {
  display: none;
}

.enterprise.security .popup-bg {
  display: none;
}

.shopBy .selections ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.shopBy .selections ul li {
  text-align: center;
}

.shopBy .selections ul li a {
  font-family: "uni_sanssemibold", sans-serif;
  color: #000000;
  font-size: 1.1em;
  text-decoration: none;
  display: block;
  padding: 0 10px;
  transition: all 0.8s ease-in-out 0s;
  letter-spacing: 0.02em;
}

.shopBy .selections ul li a:hover {
  background-color: #d4d4d4;
}

.shopBy .selections .icon {
  height: 50px;
  width: 65px;
  display: inline-block;
  margin: 0 auto;
}

.shopBy .byUse .selections .icon {
  margin-top: 31px;
}

.shopBy .byUse .selections .link {
  padding-bottom: 29px;
}

.shopBy .bySpec .selections .icon {
  margin-top: 7px;
}

.shopBy .bySpec .selections .link {
  padding-bottom: 9px;
}

.shopBy .byEdition .selections .icon {
  margin: 0 6px;
  float: left;
}

.shopBy .byEdition .selections ul li {
  text-align: left;
}

.custom .shopBy .byPrice .selections ul li:last-child a {
  border-bottom: 1px solid #c4c4c4;
}

.custom .shopBy .byUse {
  width: 55%;
}

.custom .shopBy .byUse .selections ul {
  display: flex;
  flex-wrap: wrap;
}

.shopBy .byUse .selections ul li {
  width: 33.3%;
  padding: 3px 0;
}

.custom .shopBy .byPrice .selections ul {
  margin-top: 5px;
}

.shopBy .selections ul li a {
  border-radius: 3px;
  background-color: #e9eaeb;
}

.custom .shopBy .selections ul li a:hover {
  background-color: #dadcdd;
}

.custom .shopBy .byUse .selections ul li a {
  padding: 0 8px;
  height: 100%;
  margin: 3px;
}

.selections ul li a {
  padding: 8px 0;
  margin: 6px;
}

.custom .shopBy .byPrice .selections ul li a {
  padding: 18px 0 17px 0;
  margin: 0 8px;
  border-top: 1px solid #c4c4c4;
  border-radius: 0;
  background: none;
}

.custom .shopBy .byPrice .selections ul li a:hover {
  background-color: #dadcdd;
}

.custom .shopBy .byEdition .selections ul li a {
  padding: 10px 0;
  margin: 0 6px 6px 6px;
}

.shopBy .selections .link {
  display: block;
}

.shopBy .byEdition .selections .link {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}

.custom .shopBy .byPrice {
  width: 20%;
}

.custom .shopBy .byEdition {
  width: 25%;
  border-right: 0;
}

.shopBy .clean {
  display: none;
}

.value .shopBy .byUse {
  width: 50%;
}

.value .shopBy .bySpec {
  width: 25%;
}

.value .shopBy .byPrice {
  width: 25%;
}

.value .shopBy .byUse .selections ul li a {
  padding: 58px 0;
}

.value .shopBy .bySpec .selections ul li a {
  padding: 10px 0;
}

.value .shopBy .byPrice .selections ul li a {
  padding: 35px 0;
}

.value .shopBy .byUse .selections ul {
  display: flex;
  flex-wrap: wrap;
}

.value .shopBy .byUse .selections ul li {
  width: 33%;
}

.fseries .shopBy .byUse {
  width: 50%;
}

.fseries .shopBy .bySpec {
  width: 25%;
}

.fseries .shopBy .byPrice {
  width: 25%;
}

.fseries .shopBy .byUse .selections ul {
  display: flex;
  flex-wrap: wrap;
}

.fseries .shopBy .byUse .selections ul li {
  width: 33%;
}

.fseries .shopBy .byUse .selections ul li a {
  padding: 25px 0;
}

.fseries .shopBy .bySpec .selections ul li a {
  padding: 25px 0;
}

.fseries .shopBy .byPrice .selections ul li a {
  padding: 50px 0;
}

.enterprise .shopBy .byUse {
  width: 50%;
}

.enterprise .shopBy .bySpec {
  width: 25%;
}

.enterprise .shopBy .byPrice {
  width: 25%;
  border-right: 0;
}

.enterprise .shopBy .byUse .selections ul {
  display: flex;
  flex-wrap: wrap;
}

.enterprise .shopBy .byUse .selections ul li {
  width: 33.3%;
}

.enterprise .shopBy .byUse .selections ul li a {
  padding: 0 8px;
  height: 100%;
  margin: 3px;
}

.enterprise .shopBy .bySpec .selections ul li a {
  padding: 25px 0;
  margin: 6px 8px;
}

.enterprise .shopBy .byPrice .selections ul li a {
  padding: 9px 0 7px 0;
  margin: 6px 8px;
}

.shopBy .icon {
  background: url("../../images/3xs-homepage-icons-66a34d2edd.svg") no-repeat;
  background-size: 650px 412px;
}

.usage-progaming .icon {
  background-position: -66px -5px;
}

.usage-simulators .icon {
  background-position: -128px -5px;
}

.usage-homeoffice .icon {
  background-position: -193px -5px;
}

.usage-prograph .icon {
  background-position: -324px -5px;
}

.usage-provideo .icon {
  background-position: -454px -5px;
}

.usage-yourpc .icon {
  background-position: -584px 0;
}

.usage-proaudio .icon {
  background-position: -390px -5px;
}

.usage-bundle .icon {
  background-position: -582px -52px;
}

.usage-laptop .icon {
  background-position: -520px 0;
}

.usage-Dream .icon {
  background-position: -2px -2px;
}

.usage-battlebox .icon {
  background-position: -330px -100px;
}

.usage-steam .icon {
  background-position: -260px -54px;
}

.usage-pba .icon {
  background-position: -408px -340px;
}

.usage-Pro .icon {
  background-position: -460px -260px;
}

.usage-desktoppcs .icon {
  background-position: -593px -155px;
}

.usage-pcbundles .icon {
  background-position: -590px -208px;
}

.usage-servers .icon {
  background-position: -132px -256px;
}

.usage-hpc .icon {
  background-position: -197px -258px;
}

.usage-deeplearn .icon {
  background-position: -65px -206px;
}

.usage-trading .icon {
  background-position: -520px -255px;
}

.usage-industrial .icon {
  background-position: -388px -255px;
}

.usage-signage .icon {
  background-position: -386px -202px;
}

.usage-cloudwork .icon {
  background-position: -255px -317px;
}

.usage-cloudserv .icon {
  background-position: -325px -318px;
}

.usage-network .icon {
  background-position: -65px -322px;
}

.usage-forensics .icon {
  background-position: -195px -322px;
}

.usage-security .icon {
  background-position: -132px -315px;
}

.custom .shopBy .byPrice .selections .icon {
  display: none;
}

@media screen and (max-width: 1280px) {
  /* page headers */
  .SystemTypeIntro, .SystemUsageIntro {
    width: auto;
    background-size: 600px 220px;
  }
  .IntroBlock {
    width: auto;
  }
  .ImageBlock img {
    width: 275px;
    height: 191px;
  }
  .IntroBlock p {
    padding: 10px 100px 20px 40px;
    font-size: 0.8em;
  }
  .IntroBlock h1 {
    padding: 30px 0 0 40px;
  }
  .main-outer {
    width: auto;
    margin: 0 12px;
  }
  .main-outer .menu-inner {
    border-bottom: 0;
  }
  .shopBy {
    display: block;
    padding: 15px;
  }
  .shopBy .selections .link {
    padding: 0 3px;
  }
  .shopBy .bySpec .selections ul li {
    width: 50%;
  }
  .shopBy .bySpec {
    width: auto;
    border-top: 3px solid #e2e2e2;
    margin-top: 20px;
  }
  .shopBy .byPrice {
    width: auto;
    margin-top: 20px;
    border-top: 3px solid #e2e2e2;
  }
  .shopBy .byPrice .selections ul li {
    width: 20%;
  }
  .shopBy .byEdition .selections ul li {
    width: 25%;
  }
  .shopBy .bySpec .selections ul li {
    width: 33.3%;
  }
  .shopBy > div {
    border-right: 0;
  }
  .shobBy .selections ul li a {
    margin: 0 3px;
  }
  .shopBy .selections ul {
    display: flex;
    flex-wrap: wrap;
  }
  .shopBy .selections {
    padding: 0;
  }
  .shopBy .byEdition, .shopBy .bySpec, .shopBy .byPrice {
    padding-top: 20px;
  }
  .shopBy .byUse .selections .icon {
    margin-top: 20px;
  }
  .shopBy .byUse .selections .link {
    padding-bottom: 18px;
  }
  .enterprise .shopBy .byUse {
    width: auto;
  }
  .enterprise .shopBy .bySpec {
    width: auto;
  }
  .enterprise .shopBy .byPrice {
    width: auto;
  }
  .enterprise .shopBy .bySpec .selections ul {
    display: flex;
    flex-wrap: wrap;
  }
  .enterprise .shopBy .byPrice .selections ul {
    display: flex;
    flex-wrap: wrap;
  }
  .enterprise .shopBy .byPrice .selections .link {
    width: auto;
  }
  .enterprise .shopBy .byPrice .selections ul li {
    width: 33.3%;
  }
  .enterprise .shopBy .byPrice .selections ul li a {
    margin: 3px;
  }
  .enterprise .shopBy .bySpec .selections ul li {
    width: 50%;
  }
  .enterprise .shopBy .bySpec .selections ul li a {
    margin: 3px;
  }
  .enterprise .shopBy .selections {
    padding: 0;
  }
  .custom .shopBy .selections {
    padding: 0;
  }
  .custom .shopBy .byUse {
    width: auto;
  }
  .custom .shopBy .byEdition {
    width: auto;
    margin-top: 20px;
    border-top: 3px solid #e2e2e2;
  }
  .custom .shopBy .byPrice .selections ul {
    display: flex;
    flex-wrap: wrap;
  }
  .custom .shopBy .byEdition .selections ul {
    display: flex;
    flex-wrap: wrap;
  }
  .custom .shopBy .byEdition .selections ul li a {
    margin: 0 3px;
  }
  .custom .shopBy .byPrice .selections ul li a {
    margin: 0 3px;
    border-radius: 3px;
    background-color: #e9eaeb;
  }
  .custom .shopBy .byPrice .selections ul li a {
    border: 0;
  }
  .custom .shopBy .byPrice .selections ul li:last-child a {
    border: 0;
  }
  .custom .shopBy .byPrice {
    width: auto;
  }
  /* Include Styles */
  .blockHolder .block {
    flex: 0 1 50%;
  }
  .include-outer {
    margin: 0 12px;
  }
  .include-contC {
    width: auto;
  }
  .selections ul li a {
    margin: 3px;
  }
  /* Form-factor menu */
  .system-formfactor {
    width: auto;
  }
  /* site skin */
  body {
    background-color: #000000;
  }
}
@media screen and (max-width: 1200px) {
  .formfactor-menuItems li {
    width: 48%;
  }
}
@media screen and (max-width: 800px) {
  .system-series .tabs .underline {
    padding-top: 15px;
  }
  .shopBy .selections ul li a {
    font-size: 1em;
  }
  .shopBy .byPrice .selections .link {
    width: 70px;
    margin: 0 auto;
    padding: 10px 0;
  }
  .shopBy .byEdition .selections .link {
    display: block;
    text-align: center;
    height: auto;
  }
  .shopBy .byEdition .selections .icon {
    float: none;
    margin: 0 auto;
    display: block;
  }
  .custom .shopBy .byEdition .selections ul li a {
    height: 100%;
    padding: 5px 0;
  }
  .selections ul li a {
    height: 100%;
    padding: 0;
  }
  .selections .link {
    padding-bottom: 8px;
  }
  .custom .shopBy .byPrice .selections ul li a {
    height: 100%;
    padding: 0;
  }
  .enterprise .shopBy .bySpec .selections .icon {
    margin-top: 8px;
  }
  .enterprise .shopBy .bySpec .selections .link {
    padding-bottom: 5px;
  }
  .enterprise .shopBy .bySpec .selections ul li a {
    height: 100%;
    padding: 0;
  }
  .enterprise .shopBy .byPrice .selections .icon {
    margin-top: 8px;
  }
  .enterprise .shopBy .byPrice .selections .link {
    padding-bottom: 5px;
  }
  .enterprise .shopBy .byPrice .selections ul li a {
    height: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 1100px) {
  .SystemTypeIntro, .SystemUsageIntro {
    background-position: 400px 65px;
  }
}
@media screen and (max-width: 950px) {
  .formfactor-menuItems li {
    width: 100%;
    margin-right: 0;
  }
  .SystemTypeIntro, .SystemUsageIntro {
    background-position: 250px 65px;
  }
}
@media screen and (max-width: 800px) {
  .usage-Dream .icon {
    background-position: 0px -2px;
  }
  .usage-battlebox .icon {
    background-position: -324px -100px;
  }
  .usage-steam .icon {
    background-position: -260px -54px;
  }
  .usage-pba .icon {
    background-position: -402px -340px;
  }
  .system-series .tabs.on .underline {
    margin: 0 10px;
  }
  .SystemTypeIntro, .SystemUsageIntro {
    background-size: 500px 183px;
  }
  .main-outer {
    margin: 0;
  }
  .include-outer {
    margin: 0;
  }
  /* Page Headers */
  .SystemTypeIntro, .SystemUsageIntro {
    display: block;
    background-position: -100px 125px;
  }
  .SystemTypeIntro p, .SystemUsageIntro p {
    display: none;
  }
  .IntroBlock h1 {
    text-align: center;
    padding: 30px 70px 15px 70px;
    font-size: 1.6em;
  }
  .ImageBlock {
    text-align: center;
  }
  .ImageBlock img {
    margin-right: 0;
  }
  .introText {
    padding: 0 35px;
  }
  .introText h2 {
    font-size: 1.8em;
  }
  .introText p {
    padding: 10px 0;
    font-size: 0.8em;
    line-height: 1.4em;
  }
  /* Form factor menu */
  .formfactor-menuItems .subHeader p {
    text-align: center;
  }
  .system-formfactor {
    margin: 40px 90px 0 90px;
  }
}
@media screen and (max-width: 700px) {
  .shopBy .byEdition .selections ul li {
    width: 50%;
    padding: 3px 0;
  }
  .shopBy .byEdition .selections .link {
    padding-bottom: 8px;
  }
  .shopBy .byEdition .selections .icon {
    margin-top: 5px;
  }
  .shopBy {
    padding: 15px;
  }
  .shopBy .heading {
    min-height: 70px;
  }
  .custom .shopBy .byEdition .selections ul li a {
    padding: 0;
  }
  .system-series .seriesTag {
    display: none;
  }
  .system-series .tabs .underline {
    padding: 20px 0;
  }
  /* Include Styles */
  .blockHolder .block {
    flex: 0 1 100%;
  }
  .blockBody {
    height: auto;
  }
  .blockBody p {
    padding-bottom: 15px;
  }
  .blockHolder .blockCont {
    width: 100%;
  }
  .whybuyText, .buybuiltText, .experienceText, .qualityText, .feedbackText, .supportText, .reviewText, .spotlightText {
    display: none;
  }
  .system-formfactor {
    margin: 40px 20px 0 20px;
  }
}
@media screen and (max-width: 600px) {
  .IntroBlock h1 {
    padding-left: 35px;
    padding-right: 35px;
    font-size: 1.4em;
  }
  .system-series .tabs {
    font-size: 1.5em;
  }
  /* Form factor menu */
  .shopBy .selections ul li a {
    font-size: 1em;
  }
}
@media screen and (max-width: 450px) {
  .shopBy .byPrice .selections .link {
    width: auto;
  }
  /* Form factor menu */
}
.openSansFont, .container {
  font-family: "open_sans", sans-serif;
  font-style: normal;
}

.openSansBoldFont {
  font-family: "open_sans-bold", sans-serif;
  font-style: normal;
}

.openSansSemiBoldFont {
  font-family: "open_sans-semibold", sans-serif;
  font-style: normal;
}

.uniSansBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  font-style: normal;
  text-transform: uppercase;
}

.uniSansSemiBoldCaps {
  font-family: "uni_sanssemibold", sans-serif;
  text-transform: uppercase;
}

.uniSansBook {
  font-family: "uni_sansbook", sans-serif;
  font-style: normal;
}

.uniSansBold {
  font-family: "uni_sansbold", sans-serif;
  font-style: normal;
}

.uniSansSemiBold {
  font-family: "uni_sanssemibold", sans-serif;
}

.uniSansRegular {
  font-family: "uni_sans_regular", sans-serif;
  font-style: normal;
}

.scanIcoFont {
  font-family: "scanicons", sans-serif;
  font-style: normal;
}

.Poppins-Light {
  font-family: "Poppins-Light", sans-serif;
  font-style: normal;
}

.Poppins-Regular {
  font-family: "Poppins-Regular", sans-serif;
  font-style: normal;
}

.Poppins-Medium {
  font-family: "Poppins-Medium", sans-serif;
  font-style: normal;
}

.Poppins-SemiBold {
  font-family: "Poppins-SemiBold", sans-serif;
  font-style: normal;
}

.Poppins-Bold {
  font-family: "Poppins-Bold", sans-serif;
  font-style: normal;
}

.inputErrorHighlight {
  background: #f7d9d9 !important;
  border: 1px solid #a80002 !important;
}

.listStyleMarginNone {
  list-style: none;
  margin: 0;
}

.listStyleMarginPaddingNone {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rotate45deg {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotate0deg {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.rotate225deg {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.spriteScan {
  background: url(../../images/sprite-scan.png);
  background-size: 47px 72px;
  background-repeat: no-repeat;
}

/* gradients - start */
/* menu gradients */
.grad-3xs-menu {
  background: linear-gradient(to top, #2e2e2e, #403e3f);
}

/* pro gradients */
.grandient-3col-default {
  background-image: linear-gradient(to left, #333333, #666666, #333333);
}

.grandient-3col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220, #e9c31e);
}

.grandient-3col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb, #2bb673);
}

.grandient-3col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990, #44c8f5);
}

.grandient-3col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a, #6f2c91);
}

.grandient-2col-default {
  background-image: linear-gradient(to left, #333333, #666666);
}

.grandient-2col-gaming {
  background-image: linear-gradient(to left, #e9c31e, #f58220);
}

.grandient-2col-graphics {
  background-image: linear-gradient(to left, #2bb673, #0094bb);
}

.grandient-2col-audio {
  background-image: linear-gradient(to left, #44c8f5, #812990);
}

.grandient-2col-video {
  background-image: linear-gradient(to left, #6f2c91, #c5187a);
}

/* gradients - end */
/* pro systems */
.system-custompc {
  background-image: url(../../images/ban-custompc-sys-eb8d5c8a45.png);
  background-repeat: no-repeat;
}

.system-gaming {
  background-image: url(../../images/ban-gaming-sys-e8f1bbd286.png);
  background-repeat: no-repeat;
}

.system-video {
  background-image: url(../../images/ban-video-sys-df6adb3c4f.png);
  background-repeat: no-repeat;
}

.system-graphics {
  background-image: url(../../images/ban-graphics-sys-4a3a1696f7.png);
  background-repeat: no-repeat;
}

.system-audio {
  background-image: url(../../images/ban-audio-sys-0ac0b3dd22.png);
  background-repeat: no-repeat;
}

.system-simulators {
  background-image: url(../../images/ban-simulators-sys-306826981a.png);
  background-repeat: no-repeat;
}

.system-homeoffice {
  background-image: url(../../images/ban-homeoffice-sys-1f53952927.png);
  background-repeat: no-repeat;
}

.system-bundles {
  background-image: url(../../images/ban-bundles-sys-975947f855.png);
  background-repeat: no-repeat;
}

.system-yourpc {
  background-image: url(../../images/ban-yourpc-sys-df5628bf96.png);
  background-repeat: no-repeat;
}

.system-laptops {
  background-image: url(../../images/ban-laptops-sys-d1f2d4d999.png);
  background-repeat: no-repeat;
}

.system-dreampc {
  background-image: url(../../images/ban-dream-pc-5598d35ff6.png);
  background-repeat: no-repeat;
  background-size: 187px 116px;
  background-position: center 12px;
}

.system-servers {
  background-image: url(../../images/ban-servers-storage-caf3971646.png);
  background-repeat: no-repeat;
}

.system-hpc {
  background-image: url(../../images/ban-hpc-b853d5f30a.png);
  background-repeat: no-repeat;
}

.system-ai {
  background-image: url(../../images/ban-ai-sys-40fc2f671d.png);
  background-repeat: no-repeat;
}

.system-trading {
  background-image: url(../../images/ban-trading-pcs-3e962ff2e3.png);
  background-repeat: no-repeat;
}

.system-digitalsignage {
  background-image: url(../../images/ban-digital-signage-43f6732d3e.png);
  background-repeat: no-repeat;
}

.system-cloud {
  background-image: url(../../images/ban-cloud-workstations-c16749dba3.png);
  background-repeat: no-repeat;
}

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  min-height: 100%;
  margin: 0 auto -372px;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  /* margin-bottom: -473px; */
}

button {
  outline: none;
}

footer, .push {
  height: 372px;
}

.container {
  background: #fff;
  margin: 0 auto;
  width: 1280px;
}

@media screen and (max-width: 800px) {
  body {
    margin-top: 40px;
  }
}
/*!
Video.js Default Styles (http://videojs.com)
Version 4.10.2
Create your own skin at http://designer.videojs.com
*/
/* SKIN
================================================================================
The main class name for all skin-specific styles. To make your own skin,
replace all occurances of 'vjs-default-skin' with a new name. Then add your new
skin name to your video tag instead of the default skin.
e.g. <video class="video-js my-skin-name">
*/
.vjs-default-skin {
  color: #cccccc;
}

/* Custom Icon Font
--------------------------------------------------------------------------------
The control icons are from a custom font. Each icon corresponds to a character
(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
*/
@font-face {
  font-family: "VideoJS";
  src: url("../font/vjs.eot");
  src: url("../font/vjs.eot?#iefix") format("embedded-opentype"), url("../font/vjs.woff") format("woff"), url("../font/vjs.ttf") format("truetype"), url("../font/vjs.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Base UI Component Classes
--------------------------------------------------------------------------------
*/
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  /* Replace browser focus hightlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  background-color: #333333;
  background-color: rgba(51, 51, 51, 0.9);
}

.vjs-default-skin .vjs-slider:focus {
  /* box-shadow */
  -webkit-box-shadow: 0 0 2em #ffffff;
  -moz-box-shadow: 0 0 2em #ffffff;
  box-shadow: 0 0 2em #ffffff;
}

.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.vjs-default-skin .vjs-slider-handle:before {
  content: "\e009";
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;
  position: absolute;
  top: 0;
  left: 0;
  /* Rotate the square icon to make a diamond */
  /* transform */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Control Bar
--------------------------------------------------------------------------------
The default control bar that is a container for most of the controls.
*/
.vjs-default-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
     If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3em;
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
}

/* Show the control bar only once the video has started playing */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */
  visibility: visible;
  opacity: 1;
  /* transition */
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s;
}

/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}

.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none;
}

.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none;
}

/* The control bar shouldn't show after an error */
.vjs-default-skin.vjs-error .vjs-control-bar {
  display: none;
}

/* Don't hide the control bar if it's audio */
.vjs-audio.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
  visibility: visible;
}

/* IE8 is flakey with fonts, and you have to change the actual content to force
fonts to show/hide properly.
  - "\9" IE8 hack didn't work for this
  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
*/
@media \0 screen {
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: "";
  }
}
/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3em;
  width: 4em;
}

/* Font button icons */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em #ffffff;
}

.vjs-default-skin .vjs-control:focus {
  /*  outline: 0; */
  /* keyboard-only users cannot see the focus on several of the UI elements when
  this is set to 0 */
}

/* Hide control text visually, but have it available for screenreaders */
.vjs-default-skin .vjs-control-text {
  /* hide-visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Play/Pause
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer;
}

.vjs-default-skin .vjs-play-control:before {
  content: "\e001";
}

.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002";
}

/* Playback toggle
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 4em;
  left: -2em;
  list-style: none;
}

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}

.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006";
}

.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003";
}

.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004";
}

.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005";
}

.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right;
}

.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0;
}

.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  /* assuming volume starts at 1.0 */
  width: 100%;
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
  /* Assumes volume starts at 1.0. If you change the size of the
     handle relative to the volume bar, you'll need to update this value
     too. */
  left: 4.5em;
}

.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em;
}

/* The volume menu button is like menu buttons (captions/subtitles) but works
    a little differently. It needs to be possible to tab to the volume slider
    without hitting space bar on the menu button. To do this we're not using
    display:none to hide the slider menu by default, and instead setting the
    width and height to zero. */
.vjs-default-skin .vjs-volume-menu-button .vjs-menu {
  display: block;
  width: 0;
  height: 0;
  border-top-color: transparent;
}

.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  height: 0;
  width: 0;
}

.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu,
.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing {
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */
}

.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,
.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
  height: 2.9em;
  width: 10em;
}

/* Progress
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: 0.9em;
  /* Even though we're not changing the top/height, we need to include them in
      the transition so they're handled correctly. */
  /* transition */
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  height: 100%;
}

/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* updated by javascript during playback */
  width: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}

.vjs-default-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprisingly works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

.vjs-default-skin .vjs-load-progress {
  background: #646464;
  background: rgba(255, 255, 255, 0.2);
}

/* there are child elements of the load progress bar that represent the
   specific time ranges that have been buffered */
.vjs-default-skin .vjs-load-progress div {
  background: #787878;
  background: rgba(255, 255, 255, 0.1);
}

.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}

.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em;
}

/* Live Mode
--------------------------------------------------------------------------------
*/
.vjs-default-skin.vjs-live .vjs-time-controls,
.vjs-default-skin.vjs-live .vjs-time-divider,
.vjs-default-skin.vjs-live .vjs-progress-control {
  display: none;
}

.vjs-default-skin.vjs-live .vjs-live-display {
  display: block;
}

/* Live Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-live-display {
  display: none;
  font-size: 1em;
  line-height: 3em;
}

/* Time Display
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
}

.vjs-default-skin .vjs-current-time {
  float: left;
}

.vjs-default-skin .vjs-duration {
  float: left;
}

/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left;
}

.vjs-time-divider {
  float: left;
  line-height: 3em;
}

/* Fullscreen
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
}

.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000";
}

/* Switch to the exit icon when the player is in fullscreen */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b";
}

/* Big Play Button (play button at start)
--------------------------------------------------------------------------------
Positioning of the play button in the center or other corners can be done more
easily in the skin designer. http://designer.videojs.com/
*/
.vjs-default-skin .vjs-big-play-button {
  left: 0.5em;
  top: 0.5em;
  font-size: 3em;
  display: block;
  z-index: 2;
  position: absolute;
  width: 4em;
  height: 2.6em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  /* Need a slightly gray bg so it can be seen on black backgrounds */
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  border: 0.1em solid #3b4249;
  /* border-radius */
  -webkit-border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  border-radius: 0.8em;
  /* box-shadow */
  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

/* Optionally center */
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
  /* Center it horizontally */
  left: 50%;
  margin-left: -2.1em;
  /* Center it vertically */
  top: 50%;
  margin-top: -1.4em;
}

/* Hide if controls are disabled */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none;
}

/* Hide when video starts playing */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none;
}

/* Hide on mobile devices. Remove when we stop using native controls
    by default on mobile  */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none;
}

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  /* IE8 needs a non-glow hover state */
  background-color: #505050;
  background-color: rgba(50, 50, 50, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 3em #ffffff;
  -moz-box-shadow: 0 0 3em #ffffff;
  box-shadow: 0 0 3em #ffffff;
  /* transition */
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
}

.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */
  line-height: 2.6em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-error .vjs-big-play-button {
  display: none;
}

/* Error Display
--------------------------------------------------------------------------------
*/
.vjs-error-display {
  display: none;
}

.vjs-error .vjs-error-display {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.vjs-error .vjs-error-display:before {
  content: "X";
  font-family: Arial;
  font-size: 4em;
  color: #666666;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */
  line-height: 1;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -0.5em;
  width: 100%;
}

.vjs-error-display div {
  position: absolute;
  bottom: 1em;
  right: 0;
  left: 0;
  font-size: 1.4em;
  text-align: center;
  padding: 3px;
  background: #000000;
  background: rgba(0, 0, 0, 0.5);
}

.vjs-error-display a,
.vjs-error-display a:visited {
  color: #F4A460;
}

/* Loading Spinner
--------------------------------------------------------------------------------
*/
.vjs-loading-spinner {
  /* Should be hidden by default */
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
}

/* Show the spinner when waiting for data and seeking to a new time */
.vjs-waiting .vjs-loading-spinner,
.vjs-seeking .vjs-loading-spinner {
  display: block;
  /* only animate when showing because it can be processor heavy */
  /* animation */
  -webkit-animation: spin 1.5s infinite linear;
  -moz-animation: spin 1.5s infinite linear;
  -o-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

/* Errors are unrecoverable without user interaction so hide the spinner */
.vjs-error .vjs-loading-spinner {
  display: none;
  /* ensure animation doesn't continue while hidden */
  /* animation */
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}

.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e01e";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
/* Menu Buttons (Captions/Subtitles/etc.)
--------------------------------------------------------------------------------
*/
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer;
}

.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid #000000;
  /* Same width top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */
}

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  /* box-shadow */
  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}

.vjs-default-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu,
.vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing {
  display: block;
}

.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}

.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000;
}

.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  outline: 0;
  color: #111;
  /* background-color-with-alpha */
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}

.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default;
}

/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before {
  content: "\e00c";
}

/* Captions Button */
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008";
}

/* Chapters Button */
.vjs-default-skin .vjs-chapters-button:before {
  content: "\e00c";
}

.vjs-default-skin .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 24em;
  left: -12em;
}

/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}

/*
REQUIRED STYLES (be careful overriding)
================================================================================
When loading the player, the video tag is replaced with a DIV,
that will hold the video tag or object tag for other playback methods.
The div contains the video playback element (Flash or HTML5) and controls,
and sets the width and height of the video.

** If you want to add some kind of border/padding (e.g. a frame), or special
positioning, use another containing element. Otherwise you risk messing up
control positioning and full window mode. **
*/
.video-js {
  background-color: #000;
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and
     easily calculable. */
  font-size: 10px;
  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/
  /* Provide some basic defaults for fonts */
  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */
  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */
  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Playback technology elements expand to the width/height of the containing div
    <video> or <object> */
.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   checking fullScreenEnabled. */
.video-js:-moz-full-screen {
  position: absolute;
}

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto;
}

.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  /* IE6 full-window (underscore hack) */
  _position: absolute;
}

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}

/* Hide the poster after the video has started playing */
.video-js.vjs-has-started .vjs-poster {
  display: none;
}

/* Don't hide the poster if we're playing audio */
.video-js.vjs-audio.vjs-has-started .vjs-poster {
  display: block;
}

/* Hide the poster when controls are disabled because it's clickable
    and the native poster can take over */
.video-js.vjs-controls-disabled .vjs-poster {
  display: none;
}

/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  /* Leave padding on left and right */
  left: 1em;
  right: 1em;
}

/* Move captions down when controls aren't being shown */
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}

/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  /* background-color-with-alpha */
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
}

.video-js .vjs-subtitles {
  color: #ffffff;
}

.video-js .vjs-captions {
  color: #ffcc66;
}

.vjs-tt-cue {
  display: block;
}

/* Increase font-size when fullscreen */
.video-js.vjs-fullscreen .vjs-text-track {
  font-size: 3em;
}

/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden {
  display: none;
}

.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
    The .video-js classname on the video tag also isn't considered.
    This optional paragraph inside the video tag can provide a message to users
    about what's required to play video. */
.vjs-no-js {
  padding: 20px;
  color: #ccc;
  background-color: #333;
  font-size: 18px;
  font-family: Arial, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}

.vjs-no-js a,
.vjs-no-js a:visited {
  color: #F4A460;
}

/* -----------------------------------------------------------------------------
The original source of this file lives at
https://github.com/videojs/video.js/blob/master/src/css/video-js.less */