/* ---------------------------------------------------------------------- */
/*  Settings -> Variables
/* ---------------------------------------------------------------------- */


:root {

    /* Colors */

    --main-bg-color: #ffce00;
    --secondary-bg-color: rgba(250, 250, 250, .87);

    --main-font-color: #000;
    --secondary-font-color: #093974;
    --tertiary-font-color: #999;

    --error-color: #bf1a1a;


    /* Typography */

    --main-font-family: 'HK Grotesk', sans-serif;
    --serif-font: 'Neuton', serif;

    --base-font-size: 16px;
    --smaller-font-size: .7rem; /* 11px */
    --small-font-size: .8rem; /* 12px */
    --big-font-size: 35px; /* 48px */
    --bigger-font-size: 45px;
    --biggest-font-size: 60px;


    /* Box Model */

    --spacer: 36px;
    --spacer-2x: 72px;
    --spacer-2x-neg: -72px;
    --spacer-3x: 108px;
    --spacer-half: 18px;



}

@media all and (min-width: 1690px) {

    :root {
        --bigger-font-size: 4rem;
    }

}

@media all and (max-width: 767px) {

    :root {
        --bigger-font-size: 2rem;

        --spacer: 20px;
        --spacer-2x: 40px;
        --spacer-half: 10px;


    }

}

::-webkit-input-placeholder { /* Edge */
  color: #666;
  text-transform: uppercase;
  font-size: 13px;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #666;
  text-transform: uppercase;
  font-size: 13px;
}

::placeholder {
  color: #666;
  text-transform: uppercase;
  font-size: 13px;
}



/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  /*-webkit-backface-visibility: hidden;*/
}
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 0 0 var(--spacer-half);
  background: #fff;
  border: 4px solid #fff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}
.flexslider .slides {
  zoom: 1;
}
.flexslider .slides img {
  height: auto;
  -moz-user-select: none;
}
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}
@-moz-document url-prefix() {
  .loading .flex-viewport {
    max-height: none;
  }
}
.carousel li {
  margin-right: 5px;
}
.flex-direction-nav {
  *height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
  font-family: "Ionicons";
  font-size: 20px;
  display: inline-block;
  content: '\f124';
  color: rgba(0, 0, 0, 0.8);
}
.flex-direction-nav a.flex-next:before {
  content: '\f125';
}
.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 20px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 20px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1;
}

.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}
/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}



/* ---------------------------------------------------------------------- */
/*  Generic –> Box Sizing
/* ---------------------------------------------------------------------- */

*, *:before, *:after {box-sizing: border-box;}


/* ---------------------------------------------------------------------- */
/*  Generic –> Shared
/* ---------------------------------------------------------------------- */

html, body {font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 400; color: #000; line-height: 1.7; letter-spacing: 1px; background: #fff; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
body {margin-top: var(--main-height);}

hr {display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc;}

h1 {margin: 0; font-family: var(--serif-font); font-size:40px; font-weight: 100; line-height: 1; color:#000;}
h2 {font-size: 30px;
    font-family: 'Neuton', sans-serif;
    font-weight: 100;
    text-align: left;
    line-height: 1;} 
h3 {margin:0; font-size: var(--base-font-size); font-weight: 400; line-height: 1.2}
h4 {margin: 0; font-size: 16px; font-family: var(--serif-font); font-weight: 100; text-transform: uppercase; text-align: center; letter-spacing: 2px; padding: var(--spacer-2x) 0;}
h5 {margin: 0; font-size: 16px; font-family: var(--serif-font); font-weight: 100; text-transform: none; text-align: left; margin: var(--spacer) 0 0 0 }

h1.smaller {font-size: 40px; margin: var(--spacer) 0 var(--spacer-2x) 0; text-align: center;}

a {color: var(--main-font-color); text-decoration: none; transition: .6s;}
a:hover {opacity: .8; text-decoration: none;}

p a {text-decoration: underline;}
p:first-child {margin-top: 0;}
p:last-child {margin-bottom: 0;}

img {display: block; max-width: 100%;}

ul {margin: 0; padding: 0; list-style: none;}

.serif {font-family: var(--serif-font); font-weight: 300}
.center {text-align: center;}
.wrap {max-width: 80vw; margin: 0 auto;}

.mobile {display: none;}

@media all and (max-width: 800px) {

    h4 {padding: var(--spacer) 0;}

    .wrap {max-width: 100vw; margin: 0 auto;}

    .mobile {display: block;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Grid
/* ---------------------------------------------------------------------- */

.grid-2 {display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--spacer-2x)}

.wrapper-small {width: 80vw; max-width: 760px; margin: 0 auto; text-align: center;}

@media all and (max-width: 800px) {
  .grid-2 {grid-template-columns: 1fr;}
  .wrapper-small {width: 100vw; max-width: unset; text-align: left;}

}
/* ---------------------------------------------------------------------- */
/*  Elements –> Header
/* ---------------------------------------------------------------------- */

.header-main {padding: var(--spacer) var(--spacer-2x); position: relative;}
.site-logo {margin: 0 auto; width: 140px; position: relative; top: -12px;}
.site-logo img {width: 100%;}
header .icons {display: flex; position: absolute; right: var(--spacer-2x); z-index: 999}
header .icons svg {width: 20px;}
header .icons a {margin-left:12px; cursor: pointer;}
header .icons a.basket {position: relative;}
header .icons a.basket span {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: #093974; border-radius: 50%; font-size: 11px; color: #fff; text-align: center; position: absolute; top: -8px; right: -12px;}
header .user svg {height: 18px;}

header .langs {position: absolute; left: var(--spacer); top: var(--spacer); text-transform: uppercase; font-size: 13px;}
header .langs a {color: var(--secondary-font-color);}

header .newsletter-icon {position: absolute; cursor: pointer; display: none;}
header .newsletter-icon a {display: flex;}
header .newsletter-icon a img {height: 24px; margin-right: var(--spacer-half)}

header .logout {font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
  position: relative;
  top: 4px;
  color: #093974;}

.search-form {width: 100%; overflow: hidden; height: 80px; background: var(--secondary-bg-color); line-height: 1; opacity: 0; z-index: -1; transition: all 0.6s ease 0s; position: fixed; top: 0; right: 0; left: 0;}
.search-form.is-open {opacity: 1; z-index: 999;}
.search-form input {display: block; width: 100%; height: 100%!important; padding: 0 var(--spacer)!important; background: var(--secondary-bg-color); border: none; font-family: var(--serif-font)!important; font-size: var(--bigger-font-size); line-height: calc(var(--header-height) - 40px);}
.search-form input:focus {border: 1px solid var(--tertiary-bg-color); outline: 0;}
.search-form .search-close {display: flex; align-items: center; height: 100%; padding: 0 var(--spacer); font-size: 12px;position: absolute; top: 0; right: 0;}



@media all and (max-width: 800px) {

    .header-main {padding: 0;}
    header .langs {display: none}
    .site-logo {width: 130px; margin: 40px auto 0; display: block; position: relative; z-index: 9999;}
    header .icons {top: 15px; right: var(--spacer);}
    header .newsletter-icon {display: none;}
    li.site-logo {display: none}
    .subscribe-newsletter {display: none!important}

    
}


/* ---------------------------------------------------------------------- */
/*  Elements –> Navigation
/* ---------------------------------------------------------------------- */


.nav-main ul {display: flex; text-align: center; justify-content: center; align-items: center;}
.nav-main li {margin: 0 20px}
.nav-main li a {font-size: 13px;  text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: var(--secondary-font-color)}

.nav-main .sub_cats.mobile {display: none}

.hamburger {display: none; width: 40px; height: 40px; padding: 10px; position: fixed; top: 10px; left: 10px; z-index: 9999;}
.hamburger:focus {outline: 0;}
.hamburger-box {width: 20px; height: 16px;}
.hamburger-inner {margin-top: -1px;}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {width: 20px; height: 1px; background-color: var(--main-font-color);}
.hamburger-inner::before {top: -5px;}
.hamburger-inner::after {bottom: -5px;}

.hamburger.is-active:hover, .hamburger:hover {background: none;}

.fixed_nav {display:none; }

@media all and (max-width: 800px) {

    body.nav-is-open {position: fixed; top: 0; overflow: hidden;}

    body.nav-is-open .nav-main {transform: translateX(0);}

    .nav-main {width: 100%; height: 100%; margin: 0; padding: var(--spacer); background: #fff; transition: transform .6s ease-in-out; transform: translateX(-100%); position: fixed; top: 0; left: 0; z-index: 997;}

   


    .hamburger {display: block;}

    div.logo {width: 100%;
    text-align: center;
    display: flex;
    position: relative;
    padding-top: 10px;
     justify-content: center; padding: var(--spacer);}

     body.nav-is-open div.logo { background-color: #fff; z-index: 999;}
    

    .nav-main {padding: 0;  overflow: auto;}
    .nav-main ul {margin: 162px 0px 0px 0px; padding: 0px; display: block;}
    .nav-main li {display: block; text-align: left; padding: 0px; margin: 0px;}
    nav ul li a {padding:14px 20px; display: block; font-size: 17px; text-transform: capitalize; border-bottom: 1px solid #CCC}
    nav ul li a.active {background: #CCC;}
    nav li.site-logo {display: none;}

    .nav-main .sub_cats.mobile {display: block; padding: 0; margin:0}
    ul.sub_cats.mobile li a {padding-left: 50px; border-bottom: 1px solid #cccccc8a;}

    .greynav {background: #F2F1F0; padding: 20px 20px 90px 20px; text-align: left; color: #626262; display: block;}
    .greynav a {text-transform: none; text-decoration: none; color: #626262}
    .greynav h4, .greynav h4 a {font-size: 17px; color: #fff; margin-top: 20px;}

    .social {display: block; position: static; margin-top: 20px;} 
   
    .fixed_nav {display:none; padding: 20px; background:#093974; color: #fff; position: fixed; bottom: 0; left: 0; width: 100%;}
    .fixed_nav a {color: #fff;}
    body.nav-is-open .fixed_nav{display: block; z-index: 9999;}
}

/* nav ul {margin: 102px 0px 0px 0px; padding: 0px; display: block;}
  
nav ul li {display: block; text-align: left; padding: 0px; margin: 0px;}
nav ul li a {padding:20px; display: block; font-size: 17px; text-transform: capitalize; border-bottom: 1px solid #CCC}
nav ul li a.active {background: #CCC;}
nav ul li ul {margin: 0px;}
nav li.logo {display: none;}

.greynav {background: #F2F1F0; padding: 20px 20px 90px 20px; text-align: left; color: #626262; display: block;}
.greynav a {text-transform: none; text-decoration: none; color: #626262}
.greynav h4, .greynav h4 a {font-size: 17px; color: #fff; margin-top: 20px;}

.social {display: block; position: static; margin-top: 20px;} */



/* ---------------------------------------------------------------------- */
/*  Elements –> Main
/* ---------------------------------------------------------------------- */

main {display: flex; flex-flow: column;  justify-content: center; padding: 0 var(--spacer);}

@media all and (max-height: 750px) {

    main {display: block; min-height: unset; padding: 0 var(--spacer);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Home
/* ---------------------------------------------------------------------- */

.home-slideshow img, .home-slideshow video  {width: 100%; height: calc(100vh - 240px); object-fit: cover; display: block;}
.video-container {height:  calc(100vh - 240px); overflow: hidden;}
.video-container video {height: 100%; width: 104%;
    left: -2%;
    position: relative;}
.home-slideshow h1, h1.center {text-align: center; margin: var(--spacer-2x) 0}
.home-highlights {display: flex; width: 100%; height: 600px; flex-flow: column wrap; font-weight: 300}
.highlight {display: flex; width: calc((100% - 36px) / 2); padding: 30px; background-size: cover; background-position: center; font-size: 30px; text-transform: none; align-items:flex-end;}
.highlight p {margin: 0px;}
.highlight h1 {margin: 0; color: #fff; text-align: left;}

.highlight.height-2-3 {    height: calc((100% - 18px) / 3 * 2);
    margin: 0px 18px 0px 0px;}
.highlight.height-1-3 {    height: calc((100% - 128px) / 3);
    margin: 36px 18px 0px 0px; background-color: #F2F1F0; display: flex; justify-content: center; align-items: center;}
.highlight.height-1-3 h1 {margin: 0; text-align: left; line-height: 1.1; color: #000; font-size:33px;}
.highlight.height-100 {height: calc(100% - 18px); margin: 0px 0px 0px 18px;}

.insta{ margin-top: 18px;}
.insta.grid-6-cols{grid-gap: 1px;}

@media all and (max-width: 800px) {
    .video-container{height:calc(100vh - 360px)}
    .video-container video {height:100%;}

    .home-slideshow img {height:calc(100vh - 360px)}

    .home-highlights{height: auto;}
    .highlight {width: 100%; height: 250px!important; margin:  18px 0px!important}
    .highlight.height-1-3 {height: auto!important}
    .insta.grid-6-cols {grid-template-columns: repeat(3, 1fr)}
}



@media all and (max-width: 800px) {

    .banner h1 {margin-top: var(--spacer); font-size: var(--big-font-size); color: #000; transform: translateX(0); position: static;}

    .intro-text {font-size: var(--base-font-size);}

    .highlight {display: block;}
    .highlight .text {margin-top: var(--spacer); position: static;}
    .highlight .text h1 {font-size: var(--big-font-size); text-align: center;}

}

/* ---------------------------------------------------------------------- */
/*  Elements –> Forms
/* ---------------------------------------------------------------------- */

input[type="text"], input[type="password"] {display: block; width: 100%; height: 36px; margin-bottom: 8px; padding: 0; border: none!important; border-bottom: 1px solid #2c2c2c !important; border-radius: 0; line-height: 36px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; outline-width: 0;}
textarea {display: block; width: 100%; margin-bottom: 8px; padding: 0; border: none!important; border-bottom: 1px solid #2c2c2c !important; border-radius: 0; line-height: 36px;}
input[type="checkbox"] {margin-right: 4px;}

button, .button {padding: 11px 14px; border: 0 none; background:#073975; color: #fff; display: block; width: 100%;  cursor: pointer;   transition: all .6s; text-transform: uppercase; font-size: 13px;}

button.black, .button.black {background:#000; color: #fff;}
input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px #ffffff inset !important;

  }
button:hover, .button:hover {background:#000; color: #fff;}
input:-internal-autofill-selected {background-color: #fff!important}

button .ion-load-c {display: none;}

span.error {display: none!important;}
input.error {background:rgba(242, 102, 102, 0.31);}

select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0;  border: 1px solid #fff !important; border-bottom-color: #2c2c2c !important; padding: 14px 0px 4px 0px; width: 100%; background-color: #fff}
.errorFeedback {background:rgba(242, 102, 102, 0.31); padding: 4px; font-size: var(--small-font-size)}

.custom-select.country {margin-top: 12px; margin-bottom: 24px;}

/* ---------------------------------------------------------------------- */
/*  Elements –> Quick Cart
/* ---------------------------------------------------------------------- */
.quickcart{z-index: -1; pointer-events: none;}
.quickcart.open{z-index: 1; pointer-events: unset;}

.quickcart:after {content:''; position: fixed; top: 0; left: 0; width:100%; height:100vh; background:rgba(0,0,0,.2); opacity: 0; transition: opacity .5s}
.quickcart.open:after {opacity: 1}
.quickcart .quickcart-content {width: 40vw; padding: var(--spacer-2x); background: #FFF; top: 0px; right: 0px; z-index: 99; height: 100vh; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; position: fixed; overflow-y: scroll; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: 0}
.quickcart.open .quickcart-content {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1}

.basket_aside h1 {margin-bottom: var(--spacer-2x);}
.basket_aside .basket-item {border-bottom: 1px solid #f5f5f5; padding: var(--spacer) 0; display: flex; position: relative;}
.basket_aside .basket-item:first-of-type {border-top: 1px solid #f5f5f5;}
.basket_aside .basket-item .basket-product {display: flex;}
.basket_aside .basket-item .basket-item-img {width: 80px; height: 80px; background-size: cover; margin-right: var(--spacer); flex: 0 0 80px;}
.basket-item-img img {width: 100%; height: 100%; object-fit: contain;}


.basket_aside .basket-item .price {position: absolute; top: 36px; right: 0px;}
.basket_aside .basket-item-content {font-size: 14px; padding-right: var(--spacer-2x);}
.basket_aside .basket-quantity {margin-top: 8px;}

.quantity-container {border: 1px solid #ddd; display: inline-flex; margin-top: 6px;}
.quantity-container .quantity-remove, .quantity-container .quantity-add {width: 24px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.6s;}

.quantity-container .quantity-remove:hover,  .quantity-container .quantity-add:hover {background: #f2f2f2;}
.quantity-container .quantity-remove {border-right: 1px solid #ddd; }
.quantity-container .quantity-add {border-left: 1px solid #ddd; }
.quantity-container .quantity {padding: 0 8px;}

.basket_aside .basket-item-delete {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: #f2f2f2; border-radius: 50%; font-size: 21px; text-decoration: none; transition: all .6s; position: absolute; right: 0; top: 80px;}
.basket_aside .basket-item-delete:hover {background:#000; color: #fff;}

.basket_aside .basket-bt-checkout { width: 100%; padding: 14px 40px;
  font-size: 13px;
  background: #073975;
  color: #fff;
  border: 0 none;
  margin: var(--spacer) 0; text-align: center; text-transform: uppercase;}

.basket_aside .total {display: flex; padding: var(--spacer) 0}
.basket_aside .total .basket-total-text {flex:1;}

.grid {display: flex;}
.grid .col {flex: 0 0 50%;}
.grid.grid-totals {margin: var(--spacer) 0}
.grid .basket-shipping-costs:first-of-type {flex-basis: 67%}

@media all and (max-width: 800px) {

    .quickcart .quickcart-content {width: 85vw; padding: var(--spacer-2x) var(--spacer);}

    .basket_aside h1 {margin: var(--spacer-2x) 0 var(--spacer);}

    .basket_aside .basket-item-content,
    .basket_aside .basket-item-content h3 {font-size: 12px;}

    .basket_aside .basket-item .price {top: var(--spacer);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Products list
/* ---------------------------------------------------------------------- */

.product_list.grid {display: grid; grid-template-columns: 250px auto; grid-gap: var(--spacer);}
.product_list.grid .submenu {color: var(--secondary-font-color); text-transform: uppercase; font-size: 13px;}

.product_list.grid .submenu a {color: var(--secondary-font-color); font-weight: normal;}
.product_list.grid .submenu a.active {font-weight: 600;}
.product_list.grid .submenu>ul>li {font-family: 'Neuton'; font-size: 26px; text-transform: none; font-weight: 300;}


.product_list.grid .submenu ul li ul {margin-top: 20px;}
.product_list.grid .submenu ul li ul li {padding: 4px 0; font-family: 'HK Grotesk'; font-size: 13px; text-transform: uppercase;}

section.product-highlight {margin-bottom: var(--spacer-2x)}
section.product-highlight article  {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;}
section.product-highlight article .smaller_photo {flex: 0 0 30%; margin-right: var(--spacer)}
section.product-highlight article .bigger_photo {flex: 0 0 50%; }
section.product-highlight .cat-name {transform: rotate(-180deg);
    position: absolute;
    bottom: 0;
    left: -80px;
    font-size: var(--biggest-font-size);
    writing-mode: tb-rl;}



section.products {display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr)); grid-gap: var(--spacer);}
section.products h3, section.products .content {font-size: 13px; text-transform: uppercase; color: #093974;}

section.products article {}
section.search-products {margin-top: var(--spacer);}

section.related-products {justify-content: center; max-width: 1180px; margin: 0 auto;}


figure.square {margin: 0; width: 100%; position: relative; padding-top: 100%; background: #f1f1f159}
figure.square img {position: absolute; top:0; left: 0; width: 100%; height: 100%; object-fit: contain;}
figure.square img.back {opacity: 0; transition: opacity 0.3s linear}
figure.square:hover img.back {opacity: 1}

.product .content  {display: grid; grid-template-columns: auto 100px; margin-top: 10px; align-items: center;}
.product .content .price {text-align: right; font-size: 13px}

.oldprice {text-decoration: line-through; opacity: 0.6}


.product img:not(.initial) {
    transition: opacity 1s;
}
.product img.initial,
.product img.loaded,
.product img.error {
    opacity: 1;
}

.product img:not([src]) {
    visibility: hidden;
}


@media all and (max-width: 800px) {

     section.products {grid-template-columns: 1fr 1fr;}
     section.products .product .content {grid-template-columns: 1fr;}
     section.products .product .content .price {text-align: left;}
    .product_list.grid {grid-template-columns: 1fr;}
    .product_list.grid ul {display: flex; max-width: 90vw; overflow-x: hidden;}

    .product_list.grid ul.sub {display: flex;  overflow-x: auto;  -webkit-overflow-scrolling: touch;}
    .product_list.grid ul.sub::-webkit-scrollbar {
      display: none;
    }

    
    .product_list.grid .submenu ul li ul li {flex-shrink: 0; margin-right: 30px;}
    
   

    section.product-highlight article  {flex-direction: column;}
    section.product-highlight article .smaller_photo {text-align: center;}
    section.product-highlight article .smaller_photo figure {display: none;}
    section.product-highlight article .bigger_photo {width: 100%; flex: 0 0 100%; order: -1;}


    
    figure.square:hover img.back {opacity: 0;}

}

/* ---------------------------------------------------------------------- */
/*  Elements –> Product page
/* ---------------------------------------------------------------------- */

section.product {display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--spacer-2x); width: 80%; margin: 0 auto var(--spacer-2x) auto}
section.product .prod-slider img {width: 100%; }
section.product .thumb-slider img {width: 100px; height: 100px; object-fit: cover; object-position: center;}
.product-main-image img {max-height: 70vh; object-fit: contain;}

section.product .product-image .sec-photo {flex: 0 0 35%; padding-right: var(--spacer)}
section.product .product-image .main-photo {padding-right: var(--spacer)}
section.product .product-info {flex: 0 0 30%; padding-top: var(--spacer)}
section.product .product-info button {width: auto}
section.product .product-info .price_contain {font-size: 20px;}

section.product .product-info button {padding: 14px 40px; font-size: 13px; background:#073975; color: #fff; border: 0 none; margin: var(--spacer) 0}
section.product .product-info button:hover{background-color: #06274f;}

section.product .sticky {position: sticky; top:0;}
section.product .oldprice{display: block; font-size: 16px;}

section.product .product-info h1 {color: #093974; margin-bottom: var(--spacer-half);}

section.product .product-info .price_contain {font-size: 14px;}

.productoptions {margin-top: var(--spacer-2x)}
.productoptions .block {display: flex; margin-bottom: var(--spacer)}
.productoptions .block label {margin:0 10px 0 0;}
.productoptions .block .full-custom-select {min-width: 110px;}
.productoptions .block select {padding: 2px 0px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ny4xICg0NTQyMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+QXJyb3c8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkhlYWRlci0xNDQwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDY3LjAwMDAwMCwgLTkzLjAwMDAwMCkiIHN0cm9rZT0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iQXJyb3ciIHBvaW50cz0iNDY3IDk0IDQ3Mi4wMDMwNjEgOTcgNDc3IDk0Ij48L3BvbHlsaW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) 100% 50% no-repeat transparent}

@media all and (max-width: 800px) {

    section.product {display: block; text-align: center; width: 100%;}
    section.product .sticky {position: static;}
    section.product .product-image {width: 100%;}
    section.product .product-image .sec-photo {display: none;}
    section.product .product-image .main-photo {padding-right: 0;}
    section.product .product-info button {margin: var(--spacer) auto; }

    section.product h1 {font-size: var(--big-font-size);}

    .productoptions {margin-top: var(--spacer);}
    .productoptions .block {display: inline-flex;}
   .product-thumbnails {display: none;}

}

/* ---------------------------------------------------------------------- */
/*  Elements –> Checkout
/* ---------------------------------------------------------------------- */
.checkout-bar {display: flex; width: 100%; list-style-type: none; margin: var(--spacer) 0; padding: 0}
.checkout-bar li {color: rgba(0, 0, 0, 0.35); padding: 0 2px; text-transform: uppercase; font-size: 11px; letter-spacing: 1px;}
.checkout-bar li:after{  content: " > "; color: rgba(0, 0, 0, 0.35);}
.checkout-bar li:last-of-type:after {content: '';}
.checkout-bar li.active {color: #000}

/*  Checkout –> Cart */
.order .basket-content .basket-header {display: flex;}
.order .basket-content .basket-header .basket-product-header {flex: 0 0 50%;}
.order .basket-content .basket-item {display: flex;  border-bottom: 1px solid #2c2c2c; padding: var(--spacer) 0}
.order .basket-content .basket-product {flex: 0 0 50%;}
.order .basket-content .b-col {flex: 0 0 calc(50% / 3);}
.order .basket-content .basket-product {display: flex;}
.order .basket-content .basket-item-img {width: 120px; height: 120px; background-size: cover; flex: 0 0 120px; margin-right: var(--spacer)}
/*  Checkout –> Login */
.cart-login .flex {display: grid; grid-template-columns: 1fr 1fr ; grid-gap: var(--spacer-2x); max-width: 1180px; margin:0 auto;}
.cart-login .login, .cart-login .register, .cart-login .basket_aside {}


/*  Checkout –> Info */
.checkout {display: flex; flex-wrap: wrap; justify-content: space-between; padding: var(--spacer-2x);}
.checkout .col-2-3 {width: calc(66.666% - 120px);}
.checkout .col-1-3 {width: calc(33.333% - 40px); margin-left: 40px;}

.checkout .client-info h2 {margin-bottom: var(--spacer-half);}

#billingAddressForm, #shippingAddressForm {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: var(--spacer);}
#billingAddressForm .col-1-2, #shippingAddressForm .col-1-2 {width: calc(50% - 20px);}
#billingAddressForm button {margin-bottom: var(--spacer); color: #fff; background-color: #000}
#shippingAddressForm button {margin-top: 46px; margin-bottom: var(--spacer); color: #fff; background-color: #000}

.checkout form input,
.checkout form .custom-select {width: 100%; margin-bottom: 20px;}

.gift-info.collapsible {display: none;}

.collapsible {border-top: 1px solid #2c2c2c; padding: 16px 0px;}
.collapsible.no-border{border-top: 0px none}

#user-address, .shipping-address {min-height: 60px; position: relative;}
#user-address .showAddressForm, .shipping-address .showShippingAddressForm {position: absolute; top: 0px; right: 0px; width: auto;}

.billing-address, .shipping-address {padding: 0px 0px 20px 0px; position: relative}
.shipping-address .billing-check {display: inline-block; width:30px; margin-bottom: 0px;}
.showShippingAddressForm{position: absolute; top: -20px; right:0px; width: auto!important;}

.shipping-method ul{margin: 0px; padding: 0px;}
.shipping-method {padding: 0px 0px 20px 0px; position: relative}
.shipping-method li{margin-right: 10px; list-style-type: none; float: left;}
.shipping-method li span{display: block; margin-left: 0px;}

.payment-method ul{margin: 0px; padding: 0px;}
.payment-method {padding: 0px 0px 20px 0px; position: relative}
.payment-method li{margin-right: 30px; list-style-type: none; float: left;}

.basket-content h1 {font-size: 22px;}

.basket-products {margin-bottom: 20px;}

.basket-estimated-shipping span, .basket-payment-costs span, .voucher-discount span, .basket-total-costs span, .basket-export-taxes span, .basket-insurance span {float: right; text-align: right; text-transform: none;}

.basket-total-costs.final-total {font-weight: bold;
  border-top: 1px solid #2c2c2c;
  margin-top: 20px;
  padding-top: 20px;}

#payment-method{margin-top: 20px; width: 450px;}
#payment-method label{margin-bottom:6px; display: block;}

#payment-method ul.cards li{ float: left;margin: 0 4px 0 0; list-style-type: none; box-sizing: border-box;}
#payment-method ul.cards li span{background-image: url("../../img/credit-cards-@2x.png"); background-size: 300px 31px; background-position:0 0;   float: left; width: 47px; height: 31px; text-indent: -9999px;opacity: 0.6; box-sizing: border-box; }

#payment-method ul.cards {margin-bottom: 20px;}
#payment-method ul.cards li span.card.visa {background-position: 0 0}
#payment-method ul.cards li span.card.master-card {background-position: -100px 0}
#payment-method ul.cards li span.card.american-express {background-position: -50px 0}
#payment-method ul.cards li span.card.discover {background-position: -150px 0}
#payment-method ul.cards li span.card.jcb {background-position: -200px 0}
#payment-method ul.cards li span.card.diners-club {background-position: -250px 0}
#payment-method ul.cards li span.card-selected {opacity: 1}
#payment-method ul.cards li.text {font-size: 11px; line-height: 31px; color: #767676;}
#payment-method .col-1-4 {display: inline-block; margin-right: 10px; overflow: hidden;}

.my-hosted-fields-container {height: 25px; width:300px; margin-bottom: 1em; padding: 0 0.5em;}
#my-credit-card-field, #my-security-code-field, #my-expiration-field {border:1px solid #000;}
#my-security-code-field, #my-expiration-field {border:1px solid #000; width:100px;}
.my-hosted-fields-left {height: 25px; width:100px; margin-bottom: 1em; padding: 0 0.5em; border: 1px solid #000;}
.my-hosted-fields-container.braintree-hosted-fields-invalid {background-color: rgba(242, 102, 102, 0.31)!important}
.my-hosted-fields-container.braintree-hosted-fields-valid {border-color: limegreen;}


.radio-col {width: 100px; display: inline-block; margin-bottom: 20px;}
.gift-message-box{margin-bottom: 20px;}
.gift-message-box img {max-width: 90%;}
.gift-info textarea {width: 100%; height: 120px; border: 1px solid #ddd; margin-bottom: 4px; margin-top: 10px; box-sizing: border-box; padding: 10px;}
.gift-chars-info {font-size: 13px;}

.gift-message-box.normal .photo-normal-gift{display: block;}
.gift-message-box.normal .photo-gift-gift{display: none;}

.gift-message-box.gift .photo-normal-gift{display: none;}
.gift-message-box.gift .photo-gift-gift{display: block;}


ul.order_mbref{width: 240px; margin: 20px auto; list-style-type: none; text-align: left}
ul.order_mbref li {padding: 5px 0px; border-bottom:1px solid #ddd;}
ul.order_mbref li span {width:100px; display: inline-block}

@media all and (max-width: 800px) {

    .checkout {display: block; padding: var(--spacer);}

    .checkout-bar {display: block;}
    .checkout-bar li {display: inline-block;}

    .checkout .col-2-3,
    .checkout .col-1-3 {width: 100%; margin-left: 0}

    .cart-login .flex {grid-template-columns: 1fr; max-width: 100%;}
    #user-address .showAddressForm, .shipping-address .showShippingAddressForm {margin-top: 20px; position: static;}

    #billingAddressForm .col-1-2, #shippingAddressForm .col-1-2 {width: 100%;}

    #payment-method {width: 100%;}
    #payment-method ul.cards li.text {display: block; clear: both;}

    .checkout .basket-content {margin-top: var(--spacer-2x);}

    .grid.grid-totals {display: block;}
    .grid.grid-totals .basket-aside {margin-top: var(--spacer);}

   
    .basket-unit-header,
    .basket-unit {display: none;}

    .basket_aside .basket-item-delete {top:60px;}

    .order .basket-content .b-col {flex: 0 0 calc(50% / 2);}

}




/* ==========================================================================
   SELECTS
   ========================================================================== */

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {display: block; width: 100%; height: 36px; padding: 0; border: 1px solid #2c2c2c; position: relative;}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {width: 100%; height: 100%; margin: 0; padding: 0 10px; background: none; border: none!important; border-radius: 0; line-height: 1.4; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; appearance: none; -webkit-appearance: none; cursor: pointer;}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {content: "\f3d0"; width: 9px; height: 8px; margin-top: -14px; font-family: 'Ionicons'; font-size: 19px; font-weight: bold; position: absolute; top: 50%; right: 1em; z-index: 2; pointer-events:none;}

/* Focus style */
.custom-select select:focus {background-color: transparent; border: none; color: #222; outline: none;}

/* Set options to normal weight */
.custom-select option {font-weight:normal;}


/* ---------------------------------------------------------------------- */
/*  Elements –> Login Modal
/* ---------------------------------------------------------------------- */
.login-modal {display: flex; flex-wrap: wrap;}
.login-modal .col {flex: 0 0 50%; padding-right: var(--spacer);}
.login-modal h2 {margin-bottom: var(--spacer-half)}
.login-modal button {margin-top: var(--spacer) }
.login-modal .recover-password {opacity: 0.6; font-size: var(--small-font-size)}
.login-modal .privacy_agree {font-size: var(--small-font-size)}

@media all and (max-width: 800px) {

    .login-modal {display: block;}

}

/* ---------------------------------------------------------------------- */
/*  Elements –> Footer
/* ---------------------------------------------------------------------- */

footer {width: 100%; padding: 0 var(--spacer) var(--spacer) var(--spacer);}
footer .grid {display: flex; font-size: var(--small-font-size); border-top: 1px solid rgba(0,0,0,.1); padding-top: var(--spacer); margin-top: var(--spacer-2x); flex-wrap: wrap; color: var(--secondary-font-color); padding:var(--spacer)}

footer .grid > div {margin-right: var(--spacer-2x);}
footer .grid .sec_info {margin-right: 0; margin-left: auto;}

.insta .instagram_gallery {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 1px}
.insta .instagram_gallery a:after {display: none;}

.insta .instagram_gallery img {width: 100%!important; float: none;}

footer .footer-logo {width: 70px; opacity: 0.7; margin-right: var(--spacer); flex-shrink: 0; flex-grow: 0}


footer a {color: var(--secondary-font-color); text-decoration: none; position: relative;}
footer a:after{content: ""; position: absolute; height: 1px; width: 0%; background: #979796ba; left: 0px; bottom: 0; transition: width 0.3s ease;}
footer a:hover:after {width: 100%;}

footer .payment {margin: var(--spacer-half) 0;}
footer .payment span {display: inline-block; padding: 4px; border: 1px solid var(--secondary-font-color); border-radius: 4px; font-size: 18px; opacity: 0.8; color: var(--secondary-font-color);}

footer .social {color: var(--secondary-font-color);}
footer .social a {margin-right:6px; font-size: 20px; position: relative; opacity: 0.7;}
footer .social a:after{height: 0}


.newsletter-subscribe {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 9999

}

.newsletter-subscribe .newsletter-container {
    background: #e9e9e9;
    padding: 18px;
    border: 20px solid #fff;
    position: relative;
    min-width: 500px;
}

.newsletter-subscribe .ion-close {
    position: absolute;
    top: 4px;
    right: 10px;
    cursor: pointer;
}

.newsletter-subscribe input {width: 100%; padding: 8px 16px; margin-bottom: 10px; text-align: center;}
.newsletter-subscribe button {color: #fff; background-color: #000}

@media all and (max-width: 767px) {
   .insta .instagram_gallery {grid-template-columns: 1fr 1fr 1fr;}

    footer {padding: var(--spacer); margin-top: 20px;}
    footer p {display: block; margin: 0 0 var(--spacer);}

  
footer .footer-logo, footer .grid>ul:first-of-type, footer .grid>ul:nth-child(3) {display: none;}
    footer .grid {flex-wrap: wrap;}
    footer .grid ul {margin-right: var(--spacer); }

    footer .payment {width: 100%; margin-top: var(--spacer);}

}

@media all and (min-width: 768px) and (max-width: 1023px){

    footer {margin-top: 36px; padding: var(--spacer);}
    
}




/* ---------------------------------------------------------------------- */
/*  Pages –> Single Page
/* ---------------------------------------------------------------------- */

.pages-page .main-grid .aside {position: relative; left: calc(var(--site-margin) / 2 * -1);}
.pages-page .aside .img-block {padding-bottom: 100%;}
.pages-page .aside.map {margin-left: calc(var(--site-margin) / 2 * -1);}

.columns-text {columns: 2; column-gap: var(--spacer)}

.contact-form {width: 600px; margin: 0 auto;}

.cc_open_consent_button {background: var(--secondary-font-color); color: #fff;}


@media all and (max-width: 700px) {

    .pages-page .main-grid .aside {left: 0;}
    .pages-page .aside.map {height: 400px; margin-left: 0;}
    .columns-text  {columns: 1}
    .contact-form {width: 100%; margin: 0 auto;}
}


/* ---------------------------------------------------------------------- */
/*  Pages –> tiles and pottery
/* ---------------------------------------------------------------------- */


.page-main {padding: 0px 72px}
.page-main .grid-2-cols {margin: 54px 0; display: grid; grid-template-columns: 1fr 1fr;}
.page-main .grid-2-cols .text h1 {margin-top: 0; text-align: left;}

.page-main .grid-2-cols:first-of-type .text, .page-main .grid-2-cols:nth-of-type(3) .text {
    background: #fff;
    position: relative;
    align-self: self-start;
    width: 110%;
    margin: 10% 0 0 0%;
    padding: 36px;
}

.page-main .grid-2-cols .text{
    background: #fff;
    position: relative;
    align-self: self-start;
    width: 110%;
    margin: 10% 0 0 -10%;
    padding: 36px;
    z-index: 1
}

.about.grid-2-cols {grid-gap: 72px;}
.about.grid-2-cols h1 {text-align: left; margin-top: 0px}

@media all and (max-width: 800px) {
    .page-main{padding: 0px}
    .grid-2-cols, .about.grid-2-cols{
        grid-template-columns: 1fr;
        grid-gap: 0
    }
    .page-main .contacts-left {}
    .page-main .contacts{background-color: #F2F1F0; padding: 10px; }
    .page-main .grid-2-cols {margin-top: 0px;}
    .page-main .grid-2-cols .text, .page-main .grid-2-cols:first-of-type .text, .page-main .grid-2-cols:nth-of-type(3) .text  {position: static; width: 100%; margin: 0; padding: 0; margin-bottom: 36px}

}


/* ==========================================================================
   SELECTS
   ========================================================================== */

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {display: block; width: 100%; height: 36px; padding: 0; border: 1px solid #2c2c2c; position: relative;}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {width: 100%; height: 100%; margin: 0; padding: 0 10px; background: none; border: none!important; border-radius: 0; line-height: 1.4; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; appearance: none; -webkit-appearance: none; cursor: pointer;}

/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {content: "\f3d0"; width: 9px; height: 8px; margin-top: -14px; font-family: 'Ionicons'; font-size: 19px; font-weight: bold; position: absolute; top: 50%; right: 1em; z-index: 2; pointer-events:none;}

/* Focus style */
.custom-select select:focus {background-color: transparent; border: none; color: #222; outline: none;}

/* Set options to normal weight */
.custom-select option {font-weight:normal;}



/* ---------------------------------------------------------------------- */
/*  Pages –> Client's Area
/* ---------------------------------------------------------------------- */

#editprofile {display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--spacer-2x); justify-content: space-between;}
.order-profile input {width: 100%!important;}

form.order label {display: block;}
form.order label:not(:first-child) {margin-top: 20px;}

.clientsarea h1 {font-size: var(--big-font-size); text-align: center; margin-bottom: 20px;}
.clientsarea h1 span {text-align: center; padding: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.85)}

.clientsarea {min-height: calc(100vh - 296px);}


nav.clientsarenav {text-align: center;}
nav.clientsarenav ul {list-style-type: none; padding: 0px; margin: 0px;}
nav.clientsarenav ul li {display: inline; margin: 10px 15px; font-family: var(--serif-font); font-size: var(--base-font-size);}
nav.clientsarenav ul li a.active {border-bottom: 1px solid rgba(0, 0, 0, 0.35); letter-spacing: 1px;}

.order-history {padding: 36px var(--spacer-2x);}

.order-history-item {display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 18px 0px;}
.order-history-item:first-child {margin-top: var(--spacer);}
.order-history-item > div {flex-basis: calc(20% - 36px);}
.order-history-item .info {flex-basis: calc(40% - 36px); text-transform: uppercase;}
.order-history-item h3.date{ margin: 6px 0px 0px 0px; text-transform: none;}

.order-history-item .status, .order-history-item .total {text-transform: uppercase; color: rgba(0, 0, 0, 0.35)}
.order-history-item .status span, .order-history-item .total span{display: block; text-transform: none; color: rgba(0, 0, 0, 0.85)}
.order-history-item .details{text-transform: uppercase;}

.order-history-item .view-order-details {width: 80%; margin: 0px;}

.order-details-address {margin-top: 30px;}

.order-items {width:100%; margin-top: 60px; padding-right: 20px; border-bottom: 1px solid #000; border-collapse: separate;}
.order-items th {padding-bottom: 20px; font-size: 13px; font-weight: normal; text-transform: uppercase;}
.order-items td {padding-bottom: 20px;}
.order-items td td {padding-bottom: 0;}
.order-items td img {border:4px solid #FFF}
.order-items td.img {width:90px;}
.order-items h3 {margin: 0; font-size: 13px; text-transform: uppercase;}

.order-info {margin-top: 30px; border-collapse: separate;}
.order-info table {padding: 20px; background: #FFF; border-collapse: separate;}
.order-info h3 {text-transform: uppercase;}

.order-status {width: auto!important; padding: 11px 14px; border: 1px solid rgba(0, 0, 0, 0.85); float: right;}

table.order-items-list.small-table {width: 300px;float: right;}
table.order-items-list.small-table td{text-align: right; border-bottom: 1px solid #000; padding: 20px 0px;}

.change-password {margin-top: 20px; clear: both;}
.change-password p {font-size: 13px;}
.change-password button {margin-top: 40px;}



.downloaduserdata.button, .deleteaccount.button {display: inline-block; width: auto; margin-bottom: 40px; padding: 5px 10px; border: 1px solid #000; transition: all 0.5s ease; cursor: pointer;}

.downloaduserdata.button:hover, .deleteaccount.button:hover {background: #000; color: #fff;}


@media all and (max-width: 800px) {

    #editprofile {grid-template-columns: 1fr; grid-gap: 20px}
    #editprofile .col-1-2 {width: 100%;}

    nav.clientsarenav ul li {display: block; margin: 6px 15px;}

    .order-history {padding: 36px var(--spacer);}

    .order-history-item {display: block; margin: 0; padding: 0 0 18px;}
    .order-history-item > div {margin-top: 18px;}

    .order-status {display: table; margin-bottom: 16px; padding: 4px 8px; float: none;}

}


/* ==========================================================================
   FULL BASKET
   ========================================================================== */

#mainCartContent {overflow: hidden;}

#vouchercode, .voucher-apply-button {height: 36px; margin: 0; padding: 0 10px; border: 1px solid #073975!important; line-height: 32px; }

.voucher-apply-button {font-size: 13px;
  background: #073975;
  color: #fff; text-transform: uppercase;}

#vouchercode {width: 250px; border-right: none!important;}

.basket-aside .grid {justify-content: space-between;}
.basket-aside .basket-shipping-costs:last-child {text-align: right;}

.order button.basket-bt-process-preorder  {width: 50%; float: right; margin-top: 36px;    
  padding: 14px 40px;
  font-size: 13px;
  background: #073975;
  color: #fff;
  border: 0 none;
  margin: var(--spacer) 0;
  text-align: center;
  text-transform: uppercase;}


.voucher h2 {margin-bottom: var(--spacer)}
.basket-aside.col h2 {margin-bottom: var(--spacer)}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.checkout-container .client-info{line-height: 170%;}

.order input{display: block; width: 80%}
.order input {display: block; margin-bottom: 20px;}
.order label {display: block; margin-bottom: 5px;}


#processorder-btn {width: auto; margin: 20px 0px 0px;}

.product-info .more-info{padding-top: 36px;}





.order input[type="checkbox"], .order input[type="radio"]{display: inline-block; margin-bottom: 0px; width: auto; margin-right: 10px;}

button span{display: none;}
button.loading span{display: block;}




.clearfix:before, .clearfix:after {display: table;content: " ";}
.clearfix:after {clear: both;}
.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}



/*!
 * jquery-confirm v1.7.5 (http://craftpip.github.io/jquery-confirm/)
 * Author: boniface pereira
 * Website: www.craftpip.com
 * Contact: hey@craftpip.com
 *
 * Copyright 2013-2015 jquery-confirm
 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
 */
.jconfirm-box-container {width: 700px; margin: 0px auto;}
.jconfirm-box-container.large-modal {width: 700px;}
.jconfirm-box-container.personalization-modal {width: 900px;}
.personalization-modal .jconfirm-box {background: #fff!important;}


body.jconfirm-noscroll{overflow:hidden!important}@-webkit-keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.jconfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999999;font-family:inherit;overflow:hidden}.jconfirm .jconfirm-bg{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-transition:all .4s;transition:all .4s}.jconfirm .jconfirm-bg.seen{opacity:1}.jconfirm .jconfirm-scrollpane{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto}.jconfirm .jconfirm-box{background:#FFF;position:relative}.jconfirm .jconfirm-box div.closeIcon{height:20px;width:20px;position:absolute;top:6px;right:12px;cursor:pointer;opacity:.6;text-align:center;display:none;font-size:29px;z-index: 9999;}.jconfirm .jconfirm-box div.closeIcon:hover{opacity:1}.jconfirm .jconfirm-box div.title{font-size:24px;font-weight:bold;padding:30px 30px 0px 30pxs}.jconfirm .jconfirm-box div.content{padding:30px}.jconfirm .jconfirm-box div.content:empty{height:40px;position:relative;opacity:.6}.jconfirm .jconfirm-box div.content:empty:before{content: "\f29c";height:20px;width:20px;font-family:'Ionicons';position:absolute;left:50%;margin-left:-45px;-webkit-animation:jconfirm-rotate 1s infinite;animation:jconfirm-rotate 1s infinite}.jconfirm .jconfirm-box div.content:empty:after{content:'...';position:absolute;left:50%;margin-left:-15px}.jconfirm .jconfirm-box .buttons{padding:10px 15px}.jconfirm .jconfirm-box .buttons button+button{margin-left:5px}.jconfirm .jquery-clear{clear:both}.jconfirm.white .jconfirm-bg{background-color:rgba(0,0,0,0.2)}.jconfirm.white .jconfirm-box .buttons{float:right}.jconfirm.white .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.white .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#333}.jconfirm.white .jconfirm-box .buttons button.btn-default:hover{background:#ddd}.jconfirm.black .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.black .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.2);background:#444;border-radius:5px;color:white}.jconfirm.black .jconfirm-box .buttons{float:right}.jconfirm.black .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.black .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#fff;background:0}.jconfirm.black .jconfirm-box .buttons button.btn-default:hover{background:#828282}.jconfirm.hololight .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.hololight .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;overflow:hidden}.jconfirm.hololight .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.hololight .jconfirm-box .buttons{border-top:solid 2px #e7e7e7;width:100%;float:none;padding:0}.jconfirm.hololight .jconfirm-box .buttons button{margin:0;border:0;background:#fff;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#666}.jconfirm.hololight .jconfirm-box .buttons button+button{border-left:solid 2px #e7e7e7}.jconfirm.holodark .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.holodark .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;background:#333;overflow:hidden}.jconfirm.holodark .jconfirm-box div.closeIcon{color:white}.jconfirm.holodark .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.holodark .jconfirm-box div.content{color:white}.jconfirm.holodark .jconfirm-box .buttons{border-top:solid 2px rgba(255,255,255,0.2);width:100%;float:none;padding:0}.jconfirm.holodark .jconfirm-box .buttons button{margin:0;border:0;background:#333;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#fff;text-shadow:none}.jconfirm.holodark .jconfirm-box .buttons button+button{border-left:solid 2px rgba(255,255,255,0.2)}.jconfirm .jconfirm-box.hilight{box-shadow:0 0 20px red}.jconfirm{-webkit-perspective:400px;perspective:400px}.jconfirm .jconfirm-box{opacity:1;-webkit-transition-property:-webkit-transform,opacity,box-shadow;transition-property:transform,opacity,box-shadow}.jconfirm .jconfirm-box.anim-top,.jconfirm .jconfirm-box.anim-left,.jconfirm .jconfirm-box.anim-right,.jconfirm .jconfirm-box.anim-bottom,.jconfirm .jconfirm-box.anim-opacity,.jconfirm .jconfirm-box.anim-zoom,.jconfirm .jconfirm-box.anim-scale,.jconfirm .jconfirm-box.anim-none,.jconfirm .jconfirm-box.anim-rotate,.jconfirm .jconfirm-box.anim-rotatex,.jconfirm .jconfirm-box.anim-rotatey,.jconfirm .jconfirm-box.anim-scaley,.jconfirm .jconfirm-box.anim-scalex{opacity:0}.jconfirm .jconfirm-box.anim-rotate{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.jconfirm .jconfirm-box.anim-rotatex{-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-rotatey{-webkit-transform:rotatey(90deg);-ms-transform:rotatey(90deg);transform:rotatey(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scaley{-webkit-transform:scaley(1.5);-ms-transform:scaley(1.5);transform:scaley(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scalex{-webkit-transform:scalex(1.5);-ms-transform:scalex(1.5);transform:scalex(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-top{-webkit-transform:translate(0px,-100px);-ms-transform:translate(0px,-100px);transform:translate(0px,-100px)}.jconfirm .jconfirm-box.anim-left{-webkit-transform:translate(-100px,0px);-ms-transform:translate(-100px,0px);transform:translate(-100px,0px)}.jconfirm .jconfirm-box.anim-right{-webkit-transform:translate(100px,0px);-ms-transform:translate(100px,0px);transform:translate(100px,0px)}.jconfirm .jconfirm-box.anim-bottom{-webkit-transform:translate(0px,100px);-ms-transform:translate(0px,100px);transform:translate(0px,100px)}.jconfirm .jconfirm-box.anim-zoom{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.jconfirm .jconfirm-box.anim-scale{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.jconfirm .jconfirm-box.anim-none{display:none}.jconfirm.supervan .jconfirm-bg{background-color:rgba(54,70,93,0.95)}.jconfirm.supervan .jconfirm-box{background-color:transparent}.jconfirm.supervan .jconfirm-box div.closeIcon{color:white}.jconfirm.supervan .jconfirm-box div.title{text-align:center;color:white;font-size:28px;font-weight:normal}.jconfirm.supervan .jconfirm-box div.content{text-align:center;color:white}.jconfirm.supervan .jconfirm-box .buttons{text-align:center}.jconfirm.supervan .jconfirm-box .buttons button{font-size:16px;border-radius:2px;background:#303f53;text-shadow:none;border:0;color:white;width:25%;padding:10px}


#resetpassword {width: 600px; margin: var(--spacer-2x) auto 0 auto; }
#resetpassword input {width: 100%; border: 1px solid #2c2c2c !important}

@media all and (max-width: 800px) {

    .jconfirm-box-container.large-modal {width: 90%;}
    .login-modal .col {padding-right: 0;}
    .login-modal .col.register {padding-top: 30px; padding-bottom: 0!important;}
    .jconfirm .jconfirm-box div.content {padding: 20px;}
    #resetpassword {max-width: 100%}

}


/* -----------------------------------------------
FlexSlider
----------------------------------------------- */

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */