html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
}

* { -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  padding: 0px;
  margin: 0px;
  background-color: #fff;
  font-family: 'Comfortaa', cursive; 
  font-weight: 300;
  font-size: 0.9em;
  color: #3a3531;
}


/*------------------------------*\
    The basics
\*------------------------------*/

h1 {
font-family: 'Source Serif Pro', serif;
font-style: italic;
font-size:48px;
line-height: 52px;
font-weight: 400;
letter-spacing: -1px;
color: #baad7b;
padding: 0px;
margin: 0px;
}

h2 {
font-family: 'Comfortaa', cursive;
font-size:16px;
color: #3a3531;
letter-spacing: 1px;
font-weight: 300;
padding: 0px;
margin: 0px;
}

h3 {
font-family: 'Source Serif Pro', serif;
font-style: italic;
font-size:24px;
color: #5a5148;
font-weight: 400;
padding: 10px 0px;
margin: 0px;
}

h4 {
font-family: 'Comfortaa', cursive;
font-style: italic;
font-size:11px;
color: #ccc;
font-weight: 400;
padding: 2px;
margin: 0px;
}

a { color: #baad7b; text-decoration: none; transition: 0.5s ease-in-out; }
a:hover { color: #5c5048; }

p { font-family: 'Source Serif Pro', serif; font-size: 1.3em; color: #5c5148; line-height: 1.4em; font-weight: 400;}

ol { margin: 0px; }
ol li { font-size: 3em; }

/*------------------------------*\
    Grid System
\*------------------------------*/

.gridrow, 
.gridcolumn { box-sizing: border-box; }
.gridrow:before,
.gridrow:after { content: ""; display: table;}
.gridrow:after { clear: both; }
.gridcolumn { position: relative; float: left; display: block; }

.gridcolumn + .gridcolumn { margin-left: 0%; }
.gridcolumn-1 { width: 8.33333333333%; }
.gridcolumn-2 { width: 16.6666666666%; }
.gridcolumn-3 { width: 24.9999999999%; }
.gridcolumn-3x { width: 24.9999999999%; }
.gridcolumn-4 { width: 33.3333333333%; }
.gridcolumn-5 { width: 41.6666666666%; }
.gridcolumn-6 { width: 50%; }
.gridcolumn-7 { width: 58.3333333333%; }
.gridcolumn-8 { width: 66.6666666666%; }
.gridcolumn-9 { width: 74.6%; }
.gridcolumn-10 { width: 83.3333333333%; }
.gridcolumn-11 { width: 91.5333333333%; }
.gridcolumn-12 { width: 100%; margin-left: 0; }

.box{
  display: flex;
  flex-flow: column nowrap;
  /*justify-content: center;*/
}
.box span{
  font-size: 14px;
  padding: 5px ;
  text-align: center;
  font-weight: 500;
}
.box strong{
  text-align: center;
  font-size: 12px;
}

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

}
@media only screen and (max-width: 801px) {
    .gridcolumn-1, .gridcolumn-2, .gridcolumn-3, .gridcolumn-4, .gridcolumn-5, .gridcolumn-6, .gridcolumn-7, .gridcolumn-8, .gridcolumn-9, .gridcolumn-10, .gridcolumn-11, .gridcolumn-12 { 
      float: none; width: auto; text-align: center !important; 
    }
    .gridcolumn + .gridcolumn { margin-left: 0; text-align: center !important; }
}

.imgx { display: block;  /* margin: 0 auto; Centred */  max-width: 100%; }

.gridcolumn { border: 0px solid #4affff; padding: 1px; min-height: 0px; }

.gridrow { margin-bottom: 0px;  /* max-width: 1280px; */  margin: 0px auto;}
.gridrow:last-child { margin-bottom: 0; }
.gridcolumn .gridcolumn { border-color: 0px solid #4ed7ff; }

@media only screen and (max-width: 801px) {
    .gridrow { margin-bottom: 0px; }
    .gridcolumn { margin-bottom: 0px; text-align: center; }
    .gridrow:last-child .gridcolumn:last-child { margin-bottom: 0px; text-align: center; }
    .imgx { display: block; margin: 0 auto; max-width: 100%; position: relative; }
}



/*--  middle allignment --*/

.element {
    position: relative;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
} 


/*------------------------------*\
    Form Styles
\*------------------------------*/


/*------------------------------*\
    nav
\*------------------------------*/

.topnav { overflow: hidden; }

.topnav a {
  float: left;
  display: block;
  color: #5c5149;
  text-align: center;
  padding: 12px 3%;
  text-decoration: none;
  font-size: 13px;
  margin: 0px;
  border-top: solid 2px #fffdf5;
}

.topnav a:hover {
  border-top: solid 2px #baad7b;
  color: #938960;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  font-size: 20px;
}

@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 800px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/*------------------------------*\
    Hero slider
\*------------------------------*/

#heroContainer {
  width:100%;
  height:20px;
  overflow: hidden;
}
#heroListing {
  position: relative;
  top: 0px;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#heroListing li {
  width: 100%;
  padding: 0px;
  height: 110px;
  margin: 0px;
  color: #fff;
}



/*------------------------------*\
    Tabs
\*------------------------------*/
.tabs .tab > label {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  display: block;
  padding: 10px;
  cursor: pointer;
  color: #fff;
  position: relative;
  background: #3a3531;
  border-bottom: solid 1px #fff;
  font-weight: bold;
  -webkit-transition: background ease 0.2s;
  transition: background ease 0.2s;
}
.tabs .tab > label::before{
  content: ' ';
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-70%) rotate(45deg);
}
.tabs .tab > label.active::before {
  transform: translateY(-35%) rotate(225deg);
}
.tabs .tab {
  -webkit-box-ordinal-group: 100;
      -ms-flex-order: 99;
          order: 99;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  padding: 10px;
  background: #fff;
}
.tabs .tab .tab-inner{

  transition: max-height 0.35s ease-in;
  width: 100%;
  min-width: 100%;
  display: none;
}

.tabs .tab .tab-inner .tab-flex{
  display: flex;
  flex-flow: row wrap;
}

.tabs .tab .tab-inner .tab-flex .box a{
  display: inline-block;
  width: fit-content;
  transform: translateY(-100%);
  font-size: 16px;
  padding: 3px;
  color: #9f9f9f;
  cursor: pointer;
}

.tabs .tab .tab-inner label{cursor: pointer;}
.tabs .tab .tab-inner.showed{
  max-height: 400px;
}
.tabs .tab .tab-inner input[type=radio] + label{
  border: 2px solid #fff;
}
.tabs .tab .tab-inner input[type=radio]:checked + label{
  border: 2px solid #9f9182;
  background: #fff;
}


.tabs input[type="radio"] { position: absolute; opacity: 0; }
.tabs input[type="radio"]:checked + label { background: #9f9182; }
.tabs input[type="radio"]:checked + label + .tab { display: block; }


/*------------------------------*\
    Custom Css
\*------------------------------*/

.displayDesktop { display: block; }
.displayMobile { display: none; opacity: 0; pointer-events: none;}

.aweicon { padding-right: 10px; }

.topCta { border: solid 2px #baad7b; line-height: 30px; text-align: center; cursor: pointer;}
.topCta h3 { font-size: 14px; padding: 0px;}
.topCta h3:hover { color: #fff; background-color: #baad7b; transition: 0.5s ease-in-out; }
.designCta { display: block; width: 280px; margin: 0px auto; padding: 8px 10px; text-align: center; background-color: #baad7b; font-family: 'Comfortaa', cursive; font-size:12px; color: #3a3531; letter-spacing: 1px; font-weight: 300; cursor: pointer;}
.designCta:hover { background-color: #3a3531; color: #fff;transition: 0.5s ease-in-out;}


.hoverSepia { filter: grayscale(100%); transition: 0.5s ease-in-out; }
.hoverSepia:hover { filter: grayscale(0%); transition: 0.3s ease-in-out;}




.subFooter {
  background: -moz-linear-gradient(left,  #2490d5 0%, #2490d5 50%, #e43f5a 50%, #e43f5a 100%);
  background: -webkit-linear-gradient(left,  #2490d5 0%,#2490d5 50%,#e43f5a 50%,#e43f5a 100%);
  background: linear-gradient(to right,  #2490d5 0%,#2490d5 50%,#e43f5a 50%,#e43f5a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2490d5', endColorstr='#e43f5a',GradientType=1 );
  margin: 30px 0px;
}
.subFooter h2 { color: #fff; }

.productDescription { padding: 0px 2%; }
.productDescription h1 { font-size: 28px; }



@media only screen and (max-width: 801px) {
.displayDesktop { display: none; }
.displayMobile { display: block; opacity: 1; pointer-events: auto;}

nav a {
  text-align: left;
}
nav ul ul li {
  width:360px;
}

.topProducts {padding: 10px;}
.suggestedProducts {padding:  10px;}

}

#order{
  width: calc(100% - 20px);
  margin: 0 10px;
  border: 0;
  background: #baad7b;
  box-sizing: border-box;
  padding: 20px 0;
  color: #fff;
  font-family: 'Comfortaa', cursive;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease-in-out;
}
#order:hover{
  background: #a1966b;
}

.overlay{
  position: fixed;
  background: rgba(0,0,0,0.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  display: none;
  justify-content: center;
  align-items: center;
}
.order{
  width: 100%;
  max-width: 600px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  max-height: 80%;
  overflow: auto;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 99999;
}
.order h3{margin-bottom: 15px}
.order input, .order label, .order textarea{display: block; font-family: 'Comfortaa', cursive;}
.order label{font-weight: bold; font-size: 16px;margin: 0 0 10px 0;}
.order input,.order textarea{width: 100%; padding: 10px 7px; font-size: 15px; border: 1px #baad7b solid;margin: 0 0 20px 0;}
.order textarea{width: 100%;}

#submitorder{
  width: 100% ;
  border: 0;
  background: #baad7b;
  box-sizing: border-box;
  padding: 20px 0;
  color: #fff;
  font-family: 'Comfortaa', cursive;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease-in-out;
}