@charset "UTF-8";
@import url("https://use.typekit.net/ery0xaf.css");
:root {
  /* Base font size */
  font-size: 16px;
  /* Set neon color */
  --rw-text-color: #4f5359;
  --rw-dark-color: #111111;
  --rw-border-color: #1884d5;
  --rw-darker-border-color: #1368a7;
  --badge-size: 2.25rem;
}

body {
  padding: 0;
  background: #ffffff;
  /*   background: -moz-linear-gradient(194deg, rgba(0,0,0,1) 0%, rgba(82,82,82,1) 100%);
  background: -webkit-linear-gradient(194deg, rgba(0,0,0,1) 0%, rgba(82,82,82,1) 100%);
  background: linear-gradient(194deg, rgba(0,0,0,1) 0%, rgba(82,82,82,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#525252",GradientType=1); */
}

#wrap {
  min-height: calc(100vh - 35px);
}

footer.wrap {
  height: 35px;
  margin-top: 25px;
  font-family: myriad-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
}

a {
  cursor: pointer !important;
}

.sml {
  font-size: 0.75rem;
  color: #777;
}
.sml a {
  color: #999;
}

.udid {
  position: absolute;
  bottom: 0;
  margin-bottom: 0.35rem;
  font-size: 0.5rem;
  color: #ccc;
}

.hero {
  margin-bottom: 1rem;
}

.jumbotron {
  /*   background: url(https://source.unsplash.com/8Gl7Ew-q6D8/2000x2000); */
  margin-bottom: 0rem;
  margin-top: 2rem5rem;
  padding: 0;
  background-color: #ffffff;
}

.jumbotron h1 {
  font-family: trade-gothic-next, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2rem;
  text-align: center;
  margin: 0;
}

.jumbotron p {
  margin: 0;
  text-align: center;
}

.navbar {
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.9);
}

h2.cat {
  font-family: trade-gothic-next-compressed, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 4.5rem;
  color: var(--rw-dark-color) !important;
  margin-top: 1rem;
}

#app {
  text-transform: uppercase;
}

h4.cat {
  font-family: trade-gothic-next-compressed, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.75rem;
  margin-top: 2rem;
  margin-bottom: -0.2rem;
  color: var(--rw-border-color) !important;
  /*  &:before {
    content: ":"
  }*/
}
h4.cat.sub:after {
  content: " for #REMOTEWORKING";
  color: var(--rw-dark-color);
}

.subtitle {
  color: var(--rw-border-color);
  font-family: trade-gothic-next, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 3px;
  font-size: 1.15rem;
  margin-top: -0.6rem;
}

nav {
  padding: 1rem;
}

nav .btn-link {
  /*   margin-bottom: 4px; */
  color: #777;
  margin-left: 4px;
  font-size: 0.95rem;
  font-family: trade-gothic-next, sans-serif;
  font-weight: 400;
  font-style: normal;
}
nav .btn-link.packagedeals {
  background-color: var(--rw-border-color);
  color: #eff7fd !important;
}
nav .btn-link.packagedeals:hover {
  background-color: var(--rw-darker-border-color);
}

nav .btn-link.active {
  /*   margin-bottom: 4px; */
  color: var(--rw-border-color);
  text-decoration: none;
  border: 1px solid var(--rw-border-color);
}
nav .btn-link.active.packagedeals {
  background-color: var(--rw-border-color);
  color: #eff7fd !important;
}
nav .btn-link.active.packagedeals:hover {
  background-color: var(--rw-darker-border-color);
}

nav .btn-link:hover {
  color: var(--rw-border-color);
  text-decoration: none;
}

nav .btn-link.active:hover {
  background-color: #eff7fd;
}

.homenav {
  margin-top: -0.5rem;
}

.homenav .btn {
  color: var(--rw-border-color);
  font-size: 1.15rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-decoration: none;
  border: 1px solid var(--rw-border-color);
}
.homenav .btn:hover {
  background-color: #eff7fd;
}
.homenav .btn.packagedeals {
  background-color: var(--rw-border-color);
  color: #eff7fd;
}
.homenav .btn.packagedeals:hover {
  background-color: var(--rw-darker-border-color);
}

.msg {
  margin-top: -3rem;
  margin-bottom: 2rem;
  font-size: 0.85rem;
}

.articles {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1.35;
}
.articles a {
  color: var(--rw-dark-color);
  text-decoration: none;
}
.articles a:hover {
  color: var(--rw-border-color);
  cursor: pointer;
}
.articles img {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: transparent;
  max-width: 1440px;
  margin: 0 auto;
  justify-content: center !important;
  flex-wrap: wrap;
}

.grid > div {
  padding: 0.1rem 0.5rem 1.5rem 0.5rem;
  background: #edf7ff;
  background: -moz-linear-gradient(349deg, #edf7ff 0%, white 100%);
  background: -webkit-linear-gradient(349deg, #edf7ff 0%, white 100%);
  background: linear-gradient(349deg, #edf7ff 0%, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#edf7ff",endColorstr="#ffffff",GradientType=1);
  display: grid;
  grid-template-rows: min-content min-content auto min-content min-content;
  row-gap: 0.5rem;
  place-items: center;
  border-radius: 0.5rem;
}
.grid > div:hover, .grid > div.active {
  background: #ffffff;
  box-shadow: 5px 5px 36px 3px rgba(0, 21, 32, 0.1);
  border: 1px solid var(--rw-border-color);
  z-index: 999;
}

.grid > div > h5 {
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  grid-area: 1/1/2/2;
  justify-self: end;
  align-self: start;
  font-size: 0.7rem;
  text-align: right;
  margin-right: 0.5rem;
  margin-top: 0.75rem;
}

.grid > div > h5 span {
  color: #121212;
}

.grid > div > img {
  width: 72%;
  margin-top: 10px;
  /*   height: 90%; */
  /*   object-fit: contain; */
  padding: 2rem 1rem 1rem 1rem;
  grid-area: 1/1/2/2;
}

.grid > div > h6 {
  grid-area: 1/1/2/2;
  margin: 1rem 0.5rem 0.25rem 0.5rem;
  justify-self: center;
  align-self: end;
}

#deals.grid > div > img {
  width: 92% !important;
  padding: 2rem 0.5rem 0rem 0.5rem;
}

.badge {
  /*   border-radius: 3rem; */
  padding: 0.3rem 0.6rem;
}

.grid > div:hover .badge {
  background-color: var(--rw-border-color);
}

.grid > div > h3 {
  font-size: 1.75rem;
  padding: 0.5rem 0.75rem;
  font-family: trade-gothic-next-compressed, sans-serif;
  font-weight: 700;
  font-style: normal;
  /*text-transform: capitalize!important;*/
  text-align: center;
  align-self: flex-start;
  grid-area: 2/1/3/2;
  margin-bottom: 0;
}

/* .grid > div.rog {
  border-top: 0.5rem #F7323F solid;
} */
.grid > div > ul {
  padding: 0 1rem;
  width: 90%;
  list-style-type: square;
  text-align: left;
  align-self: flex-start;
  justify-self: center;
  grid-area: 3/1/4/2;
}

.grid > div > ul > li {
  font-size: 0.9rem;
  color: var(--rw-text-color);
  padding: 2px;
  font-family: trade-gothic-next, sans-serif;
  font-weight: 400;
  font-style: normal;
  border-bottom: 1px dotted #aaa;
}

.grid > div > p {
  font-family: trade-gothic-next, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
}

.grid > div > .wtb > a > img {
  width: 2.25rem;
  margin: auto 0.1rem;
  object-fit: contain;
  background: #ffffff;
  padding: 0.3rem;
  border-radius: 0.3rem;
}

.grid > div > .prices {
  font-size: 1.3rem;
  align-self: end;
  font-family: myriad-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  align-self: bottom;
  justify-self: center;
}

.grid > div > .prices > .was {
  text-decoration-line: line-through;
  color: #888;
  font-weight: 300;
  font-size: 0.9rem;
}

.was::before {
  content: "SRP £";
  color: #888;
}

.now::before {
  content: "£";
}

.grid > div.proart::before {
  content: "";
  width: var(--badge-size);
  height: var(--badge-size);
  /*   outline: 1px solid red; */
  grid-area: 1/1/2/2;
  background-color: #b0815e;
  border-radius: 0.3rem;
  background-image: url("../img/proart-logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  position: absolute;
  top: 1rem;
  left: 0.5rem;
}

.grid > div.ab::before {
  content: "";
  width: var(--badge-size);
  height: var(--badge-size);
  grid-area: 1/1/2/2;
  background-color: #ffffff;
  border-radius: 0.3rem;
  background-image: url("../img/ab-logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  position: absolute;
  top: 1rem;
  left: 0.5rem;
  border: 1px solid var(--rw-border-color);
}

.grid > div.rog::before {
  content: "";
  width: var(--badge-size);
  height: var(--badge-size);
  /*   outline: 1px solid red; */
  grid-area: 1/1/2/2;
  background-color: #f7323f;
  border-radius: 0.3rem;
  background-image: url("../img/rog-logo-w.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  position: absolute;
  top: 1rem;
  left: 0.5rem;
}

.grid > div.tuf::before {
  content: "";
  width: var(--badge-size);
  height: var(--badge-size);
  /*   outline: 1px solid red; */
  grid-area: 1/1/2/2;
  background-color: #121212;
  /*     background-color: rgba(248,185,66,1); */
  border-radius: 0.3rem;
  background-image: url("../img/tuf-logo-w.svg");
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 10px;
  position: absolute;
  top: 1rem;
  left: 0.5rem;
}

.grid > div.asus::before {
  content: "";
  width: var(--badge-size);
  height: var(--badge-size);
  /*   outline: 1px solid red; */
  grid-area: 1/1/2/2;
  background-color: #2a4b81;
  /*     background-color: rgba(248,185,66,1); */
  border-radius: 0.3rem;
  background-image: url("../img/ASUS_Logo-W.svg");
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: center;
  position: absolute;
  top: 1rem;
  left: 0.5rem;
}

.grid > div.pba::before {
  content: "";
  width: var(--badge-size);
  height: var(--badge-size);
  /*   outline: 1px solid red; */
  grid-area: 1/1/2/2;
  background-color: #000000;
  /*     background-color: rgba(248,185,66,1); */
  border-radius: 0.3rem;
  background-image: url("../img/pba.svg");
  background-repeat: no-repeat;
  background-size: 95%;
  background-position: 0px 17px;
  position: absolute;
  top: 1rem;
  left: 0.5rem;
}

@media only screen and (max-width: 679px) {
  h2.cat {
    font-size: 2.5rem;
    margin-top: 2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .grid > div {
    grid-template-columns: minmax(140px, 40%) 1fr;
    grid-template-rows: 92px 1fr;
    padding: 0.1rem 0.5rem 1rem 0.5rem;
    border-radius: 0.5rem;
  }

  .grid > div > img {
    width: 90%;
    padding: 0.5rem;
    margin-top: 2rem;
    margin-bottom: -0.5rem;
    grid-area: 1/1/3/2;
  }

  .grid > div > h6 {
    grid-area: 1/1/3/2;
    margin-bottom: 0rem;
    justify-self: center;
    align-self: srart;
  }

  .grid > div > h5 {
    grid-area: 1/2/2/3;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
    font-size: 0.7rem;
  }

  .grid > div > h3 {
    grid-area: 1/2/2/3;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: left;
    justify-self: start;
    align-self: end;
    /*     outline: 1px solid red; */
    padding-bottom: 0.25rem;
    padding-left: 0.7rem;
  }

  .grid > div > ul {
    grid-area: 2/2/3/3;
    justify-self: start;
    text-align: left;
    padding-left: 0;
    margin: 0.5rem 0.5rem 1rem 0.5rem;
    width: 100%;
    list-style-type: none;
  }

  .grid > div > ul > li {
    font-size: 0.85rem;
  }

  .grid > div > p {
    text-align: left;
  }

  .grid > div > .wtb,
.grid > div .dropdown {
    justify-self: end;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }

  .grid > div > .wtb > a {
    padding-left: 2px;
  }

  .grid > div > .wtb > a > img {
    width: 2rem;
    margin: 2px 0;
    padding: 0.3rem;
  }

  .grid > div > .prices {
    padding-bottom: 0rem;
    font-size: 1.1rem;
  }

  .grid > div > .prices > .was {
    font-size: 0.75rem;
  }

  .grid > div > .prices > .now::before {
    content: " £";
  }

  .grid .prices {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  h4.cat {
    font-size: 1.75rem;
  }

  .navbar-nav .nav-item a.btn {
    width: 10rem;
    margin-bottom: 0.4rem;
  }

  #mntr > div > img {
    width: 80%;
    margin-top: 2rem;
    margin-bottom: -1rem;
  }

  #home .jumbotron {
    margin-bottom: -2rem;
  }
}
.searchcontainer {
  padding: 0 1.5rem;
}

.searchcontainer input {
  border-radius: 3rem;
  font-family: trade-gothic-next, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.1rem;
}

#noResultMessage {
  margin-top: 1.5rem;
}

.inmenu_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-top: -3px;
  margin-left: -8px;
  margin-right: 6px;
}

.dropdown .btn,
.dropdown-menu a {
  font-size: 0.9rem;
  font-family: "Segoe UI", "微軟正黑體", "myriad-pro", "Microsoft JhengHei", Arial, "新細明體";
  font-weight: 600;
}

.lazy {
  opacity: 0.25;
  transition: opacity 0.2s ease-in;
}

.lazy.loaded {
  opacity: 1;
}

#mb > div > img {
  width: 87%;
  margin-bottom: 0.5rem;
}

.disclaimer {
  font-size: 1.1rem;
  color: #999 !important;
  line-height: 1.2rem;
  margin-top: 0.5rem !important;
  font-family: trade-gothic-next-compressed, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tooltip-inner::before {
  content: "Buy now at ";
}

.w-6.h-6 {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}

.w-12.h-12 {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  margin-right: 2px;
}