@charset "utf-8";
@import url('./base.css');
@import url('./header/header.css');
@import url('./header/search-header.css');
@import url('./forms.css');
@import url('./header/session-header.css');
@import url('./header/navigation.css');
@import url('./home.css');

@import url('./category.css');
@import url('./subcategory.css');
@import url('./product.css');
@import url('./edging.css');
@import url('./cart.css');
@import url('./login.css');
@import url('./vision.css');
@import url('./colorclip.css');
@import url('./customer.css');
@import url('./own-brand.css');

@import url('./cookie-bar.css');
@import url('./footer.css');

/************************************************************************************
content area
*************************************************************************************/

#mainContent {
  padding: 10px 0 0 0;
  position: relative;
  margin-bottom: 40px;
  min-height: 75vh;
}

@media only screen and (max-width: 680px) {
  #mainContent {
    margin-top: 128px;
    padding: 0 0 0 0;
  }
}

#maincontentPadding {
  width: 96%;
  padding: 0 2%;
}

#maincontentright {
  float: right;
  width: 220px;
  padding: 0px;
  margin-top: 0px;
  text-align: center;
}

#maincontentfull {
  position: relative;
  max-width: 1028px;
  margin: 0 auto;
  padding: 0 20px;
}

#mainContent ul {
  margin-left: 30px;
  margin-bottom: 10px;
}

.slider_wrapper {
  margin-top: -10px;
}

/* basic grids */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
  width: 100%;
}

.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.engineer-check-box {
  display: grid;
  grid-template-columns: 1fr 12fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
  align-items: center;
}

@media only screen and (max-width: 700px) {
  .reduce-grid {
    display: block;
  }

  .three-up {
    grid-template-columns: 1fr;
  }

  .two-up {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.four-up {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.five-up {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.top-margin {
  margin-top: 1rem;
}

/*************************
Page specific styles
**************************/

/*home page styles*/

.dispatch {
  max-width: 1028px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.dispatch div {
  background: #0099cc;
  padding: 1.5rem 1rem;
  text-align: center;
}

.dispatch div h2 {
  text-transform: uppercase;
  color: #fff;
  font-weight: 200;
  font-size: 1.5rem;
}

@media only screen and (max-width: 770px) {
  .dispatch {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    width: 98%;
  }

  .dispatch div {
    padding: 1rem 0.8rem;
  }

  .dispatch div h2 {
    text-transform: uppercase;
    color: #fff;
    font-weight: 200;
    font-size: 1.2rem;
  }
}

.homesquare {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 22px 0 0 0;
}

@media only screen and (max-width: 670px) {
  .homesquare {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/****************
quick order
****************/
.quick-order-section {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 2rem;
  align-items: top;
}

.quick-order-section p {
  font-size: 1.8rem;
  font-weight: bold;
}

.quick-order-selection {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
}
.quick-order-selection p {
  padding: 0.5rem;
  font-size: 1.6rem;
  font-weight: normal;
}

.quick-header {
  font-size: 1.6rem;
  background: #1f91d0;
  padding: 0.5rem;
  color: #fff;
  text-transform: uppercase;
}

.quick-order-button-container {
  text-align: right;
}

input[type='submit'].quick-order-button {
  width: 30rem;
}

.homesquare img {
  width: 100%;
  height: auto;
}

.homeproduct {
  border: 1px solid #ccc;
  padding: 5px;
  box-sizing: border-box;
}

.homeproducttwo {
  float: left;
  width: 450px;
  border: 1px solid #ccc;
  margin-right: 10px;
  margin-bottom: 5px;
  height: 190px;
  margin-top: 5px;
  padding: 5px;
}

.homeproductlong {
  float: left;
  width: 960px;
  border: 1px solid #ccc;
  margin-right: 10px;
  margin-bottom: 5px;
  height: 190px;
  margin-top: 5px;
  padding: 5px;
}

.homepagefacebook {
  width: 100%;
  border: none;
}

#my_popup {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 5000;
  width: 350px;
  height: 730px;
  display: block;
  display: none;
}

#subscribe {
  width: 100%;
  height: 100%;
  position: relative;
}

/*login page styles*/

.tech {
  color: #990011;
}

.techVideo {
  border-bottom: 1px solid gray;
  padding: 10px 0;
  clear: both;
}

.techVideo img {
  float: left;
  margin-right: 20px;
}

.techVideoDesc {
  clear: right;
}

.post_content iframe {
  margin: 0 auto;
}

.ufo {
  background-image: url(../media/ufo.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 0;
}

.ufo img {
  width: 100%;
}

.ufo_content img {
  width: 50%;
}

.ufo_content {
  margin-top: 15%;
  margin-left: 50%;
}

.ufo_content h2 {
  color: #000;
  font-size: 3em;
  margin-bottom: 170px;
}

.ufo-title {
  color: #000;
  font-size: 1.8em;
  text-align: left;
  color: #535353;
  margin: 0 10px;
}

.ufo_content a {
  color: #000;
  font-size: 1.3em;
}

.ufo_content a:hover {
  color: darkorange;
}

.pad {
  margin: 0 10px 10px;
}

.pad p {
  font-size: 1.2em;
  line-height: 1.6em;
}

.pad p:first-child {
  margin-top: 40px;
}

.solution {
  background: #b9c0d2;
  padding: 0 10px 10px;
}

.ufo-install h3,
.ufo-install h4 {
  color: #585e6f;
  font-size: 1.4em;
}

.ufo-install ul {
  font-size: 1.2em;
}

.toggle h5 {
  font-size: 1.4em;
  margin: 0 0 5px 0;
  background: #c0c8dd;
  padding: 20px;
  cursor: pointer;
}

.toggle-this {
  display: none;
  padding: 20px;
  cursor: pointer;
}

.toggle-this p:first-child {
  margin-top: 10px;
}

.toggle-this p {
  margin-top: 0;
  padding: 0;
  line-height: 1.8em;
  font-size: 1.1em;
}

.ufo-contact h3 {
  font-size: 1.5em;
  text-align: center;
  padding: 20px;
}

/*chemistrie styles*/

.address {
  float: left;
  width: 300px;
  margin-bottom: 20px;
}

.smallheading {
  font-weight: bold;
  font-size: 10pt;
  color: gray;
}

.maintenance {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 960px;
  padding: 50px 7px;
  margin-right: 5px;
  text-align: center;
  border: 2px solid #ffcc00;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

.newstab {
  float: right;
  width: 220px;
  background: #ffcc00;
  padding: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.opt {
  text-align: center;
  padding: 100px 0;
}

.opt p {
  margin-bottom: 20px;
}

input[type='email'].optInInput,
input[type='submit'].optInSubmit {
  padding: 15px;
}

input[type='email'].optInInput {
  width: 300px;
  text-align: center;
}

input[type='submit'].optInSubmit {
  text-transform: uppercase;
  width: 300px;
}

.exMarginTop {
  margin-top: 30px;
}

/************************************************************************************
table styles
*************************************************************************************/

table {
  width: 430px;
  font-size: 8pt;
}

table#quickform {
  width: 700px;
  margin: 20px 0 0 200px;
}

table.cart_table {
  width: 610px;
  font-size: 8pt;
}
table.prescription {
  width: 100%;
}

th {
  background: #072f67;
  color: #fff;
}
th.nobackground {
  background: #fff;
}

th.qty {
  width: 60px;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}

th.noborder {
  border-right: 0;
}

th,
td {
  padding: 4px 0;
  border-right: 2px solid #fff;
  vertical-align: middle;
}
th {
  padding: 2rem;
}

table#orders {
  width: 100%;
  font-size: 1.4rem;
}
table#orders th,
table#orders td {
  padding: 0.8rem;
}

.order-amounts {
  cursor: pointer;
}

.order-amounts:hover {
  background: #009fe3;
  color: #fff;
}

.orderrow {
  background-color: #e0de94;
}

.orderdetails {
  padding-bottom: 20px;
}

.orderdetailstitle {
  display: grid;
  grid-template-columns: 0.3fr 0.5fr 2fr 1fr 1fr;
  width: 100%;
  padding: 0.8rem;
  background: #009fe3;
  color: #fff;
}

.orderdetails {
  display: grid;
  grid-template-columns: 0.3fr 0.5fr 2fr 1fr 1fr;
  width: 100%;
  padding: 0.8rem;
  border-bottom: 1px solid #009fe3;
}

table.kits td {
  border: 1px solid grey;
  text-align: center;
  position: relative;
  height: 120px;
  width: 250px;
  padding: 0;
}

table.kits td p {
  position: absolute;
  top: 5px;
  width: 100%;
  padding: 0;
  margin: 0;
}

table.kits td h3 {
  position: absolute;
  bottom: 25px;
  width: 100%;
}

table.kits td h4 {
  position: absolute;
  bottom: 0px;
  width: 96%;
  padding: 2px;
  background: #ffcc00;
  color: #003059;
  font-size: 9pt;
  margin: 0;
}

.redFont {
  color: #980303;
}

.greenFont {
  color: #02691a;
}

.blueFont {
  color: #191b6a;
}

.tealFont {
  color: #196a69;
}

.totalhead {
  display: inline-block;
  width: 200px;
  padding: 5px 10px 5px 0;
  text-align: right;
  font-weight: bold;
}

.gallery img {
  margin: 0;
  width: 100%;
  border: 1px solid gray;
}

.sunlens,
.threed,
.reader {
  margin-bottom: 30px;
}

.slide,
.slidelast {
  float: left;
  border: 1px solid gray;
  padding: 0;
  width: 110px;
  height: 70px;
  margin-right: 4px;
}

.slidelast {
  margin-right: 0;
}

.isEssilor {
  position: absolute;
  width: 40%;
  background: gray;
  display: none;
  box-sizing: border-box;
  padding: 15px;
  left: 30%;
  border: 1px solid #000;
  z-index: 7001;
}

.isEssilor img {
  width: 80%;
  margin: 10px 10%;
}

.isEssilor p {
  text-align: center;
}

.closeEssilor {
  padding: 4px 15px;
  margin-left: 10px;
  background: #072f67;
  color: #fff;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

.closeEssilor:hover {
  background: #ffcc00;
  color: #072f67;
}

.cloth-promo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 4rem 0;
}
.promo-heading {
  text-align: center;
}

.category-container {
  min-width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  margin: 0;
  overflow: hidden;
  height: 200px;
}

.category-container:hover {
  cursor: pointer;
}

.background-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.category-body-container {
  margin: 0;
  text-align: center;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  background-color: rgb(255, 255, 255);
  opacity: 0.8;
  position: absolute;
}

.category-container:hover .background-image {
  transform: scale(1.1);
  transition: transform 3s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}

/************************************************************************************
footer styles
*************************************************************************************/

#footer {
  width: 960px;
  padding: 15px 10px 0 20px;
  border-top: 1px solid #ffcc01;
  background: #ffffff;
  margin: 10px auto;
  color: #999999;
}

#footer a {
  text-decoration: none;
  color: #999999;
}

#footer a:hover {
  text-decoration: none;
  color: #666666;
}

#footer ul {
  margin: 0 0 10px 0;
  padding: 0;
}

#footer ul li {
  margin: 0;
  padding: 5px 0 0;
  text-align: center;
  list-style: none;
}

#footer h3 {
  margin-bottom: 5px;
  text-align: center;
}

/************************************************************************************
miscelanious floats -hides -alignments
*************************************************************************************/
.rt {
  text-align: right;
}

.centre {
  text-align: center;
}

.fltrt {
  float: right;
  margin-left: 8px;
}

.fltlft {
  float: left;
  margin-right: 8px;
}

.clearfloat {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}

.textcentre {
  text-align: center;
}

.rowtextright {
  text-align: right;
  border-color: #dfdbce;
  background: #dfdbce;
}

.spaceBefore {
  margin-left: 60px;
}

#pagehide {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 400;
  background: rgba(0, 0, 0, 0.8);
}

.hide {
  display: none;
}

.hide1 {
  border: 2px solid #ffcc00;
}

.hide1 h2 {
  display: block;
  background: gray;
  margin: -5px -5px 5px -5px;
  padding: 4px 15px;
  color: #fff;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.createGap {
  display: block;
  margin-bottom: 15px;
}

.show {
  display: block;
}

.makeRed {
  background: #980303 !important;
}

.makeRed a {
  color: #fff !important;
}

.history p {
  line-height: 2rem;
}

.history span {
  font-weight: bold;
  color: #0099cc;
}

.history i {
  color: #0099cc;
}