@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,700&display=swap&subset=latin-ext');

:root
{
 --color-text: #231f20;
 --color-green: #313b28;
 --color-red: #900;
 --color-menu: #dce0df;
 --color-button-text: #fff;
 --font-size-normal: 14pt;
 --font-size-small: 12pt;
 --font-size-big: 20pt;
 --font-size-h1: 36pt;
 --font-size-h2: 28pt;
}

*
{
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

html
{
 overflow-y: scroll;
 min-height: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

body
{
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Quicksand', sans-serif;
 font-size: var(--font-size-normal);
 line-height: 1.5em;
 color: var(--color-text);
}

a
{
 color: var(--color-text);
 text-decoration: none;
}

a:hover
{
 text-decoration: underline;
}

p
{
 margin-bottom: 1em;
}

input,
select
{
 padding: 3px 10px;
 margin: 2px;
 font-family: 'Quicksand', sans-serif;
 font-size: var(--font-size-normal);
}

.clr
{
 clear: both;
 display: none !important;
}

.right
{
 text-align: right !important;
}

.center
{
 text-align: center;
}

.float-right
{
 float: right;
}

.float-left
{
 float: left;
}

.mobile-only
{
 display: none;
}

.small,
small
{
 font-size: var(--font-size-small);
}

#menu-h
{
 position: absolute;
 top: 5px;
 left: 20px;
 cursor: pointer;
 z-index: 100;
}

.menu-toggle
{
 cursor: pointer;
}

.shop_message
{
 font-weight: bold;
 color: var(--color-red);
}

#main-container
{
 min-height: 100%;
 position: relative;
}

#content
{
 padding-bottom: 8em;
}

header
{
 display: block;
 padding-top: 1em;
 margin-bottom: 4em;
}

header > .container
{
 position: relative;
}

header.index
{
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding-top: 0;
 height: 800px;
 background: url(../img/index-header.jpg) center no-repeat;
 background-size: cover;
 overflow: hidden;
}

header.index > .container
{
 height: 100%;
}

header.index #logo,
header.index #menu-h
{
 margin-top: 1em;
}

#header-login
{
 position: absolute;
 top: 10px;
 right: 20px;
 text-align: right;
}

header.index #header-login
{
 top: 29px;
}

#fog {position: absolute; width: 2000px; height: 1304px; top: -600px; left: -700px; pointer-events: none; opacity: .3; z-index: 200;}
#fog2 {position: absolute; width: 2000px; height: 1304px; top: -350px; left: -1200px; pointer-events: none; opacity: .4; z-index: 210;}
#explore {position: absolute; left: 50%; bottom: 20%; margin-left: -100px; width: 200px; padding: 10px; background-color: #000; border-radius: 5px; z-index: 250; color: #fff; font-size: var(--font-size-small); cursor: pointer;}
#explore:hover {background-color: var(--color-green);}
#explore-video {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 350;}
#video-close {position: fixed; top: 70px; right: 20px; z-index: 360; cursor: pointer;}

#message
{
 position: fixed;
 bottom: 20px;
 width: 400px;
 max-width: 90%;
 left: 50%;
 transform: translateX(-50%);
 text-align: center;
 background-color: var(--color-green);
 color: #fff;
 border: 2px solid #fff;
 border-radius: 10px;
 padding: 20px;
}

#message a
{
 color: #fff;
}

#message:after
{
 content: '\00d7';
 font-size: 22px;
 position: absolute;
 top: 0;
 right: 10px;
 color: #fff;
 cursor: pointer;
}

nav#menu
{
 display: none;
 position: absolute;
 left: 0;
 top: -20px;
# height: 828px;
 font-size: var(--font-size-small);
 background-color: var(--color-green);
 text-align: left;
 z-index: 300;
 padding: 20px 45px 20px 25px;
}

header.index nav#menu
{
 top: 0px;
 height: 800px;
}

nav#menu a
{
 color: #fff;
 text-decoration: none;
 text-transform: lowercase;
}

nav#menu a:hover
{
 border-bottom: 1px solid #fff;
}

nav#menu > ul
{
 margin-top: 70px;
 list-style: none;
}

nav#menu > ul > li
{
 margin-bottom: .75em;
}

#logo
{
 display: inline-block;
 width: 200px;
 z-index: 100;
}

#logo > img
{
 width: 100%;
}

footer
{
# margin: 4em 0 1em 0;
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 5em;
}

ul#footer-menu
{
 list-style: none;
 text-align: right;
 margin-bottom: 1em;
}

ul#footer-menu > li
{
 display: inline-block;
 margin-left: 1em;
 font-size: var(--font-size-small);
}

ul#footer-menu > li > a
{
 color: var(--color-text);
}

.container
{
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}

.container.pad
{
 padding: 0 1em;
}

.container img
{
 max-width: 100%;
}

.header
{
 max-width: 920px;
 margin: 0 auto;
}

.button
{
 display: inline-block;
 padding: .75em 2em;
 font-family: 'Quicksand', sans-serif;
 font-size: var(--font-size-small);
 font-weight: bold;
 background-color: var(--color-green);
 color: var(--color-button-text);
 border: 0;
 border-radius: 5px;
 cursor: pointer;
}

.button:hover
{
 background-color: var(--color-text);
}

article
{
 text-align: center;
 margin: 4em auto 0 auto;
}

article.text
{
 width: 90%;
 max-width: 728px;
}

h1
{
 font-size: var(--font-size-h1);
 line-height: 1.25em;
 font-weight: 300;
 margin-bottom: .5em;
}

h2
{
 font-size: var(--font-size-h2);
 line-height: 1.25em;
 font-weight: 300;
 margin-bottom: .5em;
}

.price
{
 font-size: var(--font-size-big);
 font-weight: bold;
 color: var(--color-green);
 margin-bottom: 1em;
}

.price-alt
{
 font-size: var(--font-size-normal);
 font-weight: normal;
}

.basket-add
{
 font-size: var(--font-size-small);
 margin-bottom: 3em;
}

.product-list
{
 max-width: 1200px;
 margin: 4em auto;
 text-align: center;
}

.product-list:after
{
 content: '';
 width: 100%;
 display: inline-block;
}

.product-item
{
 display: inline-block;
 width: 25%;
 vertical-align: top;
 text-align: center;
 margin: 0 4.166666666% 50px 4.166666666%;
}

.product-item a
{
 color: var(--color-text)
}

#cookie-popup
{
 width: 100%;
 padding: 1em;
 text-align: center;
 position: fixed;
 bottom: 0;
 left: 0;
 background: #f7f7f7;
 z-index: 9999;
}

.basket-header
{
 display: inline-block;
 border-bottom: 1px solid var(--color-green);
 margin: 0 auto 1em auto;
 padding-bottom: .5em;
}

table.condensed {margin: 0 auto;}
table.condensed td {padding: 5px; text-align: left;}
table.condensed input
{
 background-color: var(--color-green);
 color: #fff;
 padding: 5px 10px;
 text-align: center;
 font-size: var(--font-size-normal);
 border: 0;
 border-radius: 5px;
}

table.basket {min-width: 50%; margin: 0 auto 1em auto; border-collapse: collapse;}
table.basket td, table.basket th {text-align: left; padding: 8px; line-height: 1em;}
table.basket thead > tr, table.basket tfoot > tr {background-color: var(--color-green); color: #fff;}
table.basket tbody > tr:nth-child(even) {background-color: #f0f0f0;}

.two-cols
{
 display: inline-block;
 vertical-align: top;
 width: 48%;
 margin-bottom: 1em;
}

.two-cols:first-child
{
 margin-right: 4%;
}

/* media queries */

@media screen and (max-width: 1000px)
{
 header {margin-bottom: 2em;}
 article {margin-top: 2em;}
 footer {margin-top: 2em; padding: 0 1em; font-size: var(--font-size-small);}

 :root
 {
   --font-size-normal: 14pt;
   --font-size-small: 12pt;
   --font-size-big: 18pt;
   --font-size-h1: 28pt;
   --font-size-h2: 24pt;
 }
}

@media screen and (max-width: 800px)
{
 .product-item {width: 40%; margin: 0 5% 20px 5%;}
 .two-cols {display: block; width: 100%;}
 .two-cols:first-child {margin-right: 0;}
}

@media screen and (max-width: 640px)
{
 #cart-icon {width: 60px;}
 nav#menu > ul {margin-top: 20px;}
 footer p {display: block; width: 100%; float: none; text-align: center;}
 ul#footer-menu {text-align: center;}
 ul#footer-menu > li {margin-left: .5em; margin-right: .5em;}
 .desktop-only {display: none !important;}
 .mobile-only {display: block;}
 table.condensed img {width: 50px;}
}

@media screen and (max-width: 480px)
{
 #logo {width: 125px;}
 #cart-icon {width: 50px;}
 header {margin-bottom: 1em;}
 header.index {height: 600px;}
 #explore {bottom: 30%;}
 article {margin-top: 1em;}
 nav#menu {font-size: var(--font-size-normal);}
 .product-item {display: block; max-width: 300px; width: 90%; margin: 0 auto 20px auto;}
 #content {padding-bottom: 6em;}

 :root
 {
   --font-size-normal: 12pt;
   --font-size-small: 10pt;
   --font-size-big: 14pt;
   --font-size-h1: 24pt;
 }
}