/* Global */
@font-face {
	font-family:'Canaro';
	src: url('../fonts/canaro-book.eot');
	src: url('../fonts/canaro-book.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/canaro-book.woff') format('woff'),
		 url('../fonts/canaro-book.ttf') format('truetype'),
		 url('../fonts/canaro-book.svg#canarobook') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
	font-family:'Canaro';
	src: url('../fonts/canaro-bold.eot');
	src: url('../fonts/canaro-bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/canaro-bold.woff') format('woff'),
		 url('../fonts/canaro-bold.ttf') format('truetype'),
		 url('../fonts/canaro-bold.svg#canarobold') format('svg');
	font-weight:bold;
	font-style:normal;
}

body {background:#313131;color:#fff;font-family:'Canaro';}
body.products-list {background:#252525;}
header {z-index:2;}
header.grid-container {position:relative;padding:0;position:fixed;width:100%;top:0;left:0;}
header div.bg {background:#252525;position:absolute;z-index:-1;width:100%;height:87px;}
header label {border:4px solid #fff;border-radius:10px;width:50px;height:50px;position:fixed;top:15px;right:20px;z-index:2;padding:8px;overflow:hidden;}
header label span {display:block;height:4px;border-radius:4px;background:#fff;position:relative;transition:all .5s ease-in-out;}
header label span:nth-child(2) {margin:7px 0;width:60%;left:0;}
header label span:first-child {top:0;}
header label.active span:first-child {transform:rotate(45deg);top:11px;}
header label span:last-child {bottom:0;}
header label.active span:last-child {transform:rotate(-45deg);bottom:11px;}
header label.active span:nth-child(2) {left:-100%;}
header nav {position:fixed;top:87px;left:0;background:#00acec;width:100vw;height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:all .5s ease-in-out;}
header nav ul {display:flex;align-items:center;justify-content:center;flex-direction:column;list-style-type:none;color:#fff;line-height:3;font-size:1.5rem;margin:0;filter:blur(20px);transition:all .5s ease-in-out;}
header nav ul a {color:#fff;}
header nav ul a.active {color:#252525;}
header nav + a {position:absolute;top:78px;right:0;background:#00acec;border-top-left-radius:10px;border-bottom-left-radius:10px;color:#fff;padding:0 10px 0 20px;text-transform:uppercase;font-size:.8rem;}
header #menu {display:none;}
header #menu:checked + nav {height:calc(100% - 87px);}
header #menu:checked + nav ul {filter:blur(0);}
main {margin:130px 0 60px 0;}
footer {background:#252525;}
h1, h2, h3, h4, h5, h6 {font-family:'Canaro';text-align:center;}
h1 {font-size:0;position:relative;z-index:2;}
h1::before {content:'';background:url('../img/logo-bordo2.svg') no-repeat bottom center;background-size:contain;display:block;height:140px;width:100%;}
h2 {font-size:1rem;}
h2 span {display:block;font-size:0.8rem;color:#00acec;}
h2 span.tags {display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;}
h2 span.tags span {text-transform:capitalize;}
h2 span.tags span::after {content:',';display:inline-block;padding-right:3px;}
/*h2 span.tags span:first-child::before {content:'Goût :';display:inline-block;padding-right:3px;}*/
h2 span.tags span:last-child::after {content:'';}
.categories div {padding:0.9375rem;}
.categories a {background:#00acec;border-radius:10px;text-align:center;color:#fff;font-size:1.2rem;display:block;padding:1rem;}
.categories a span {display:block;font-size:.8rem;white-space:nowrap;}

.categories .basico2 a::before, .categories .premium a::before, .categories .omg a::before, .categories .ml-50 a::before {content:'';background:url('../img/basico2.svg') no-repeat center center;background-size:contain;display:block;width:100%;height:100px;}
.categories .omg a::before {background-image:url('../img/ohmygod.svg');}
.categories .ml-50 a::before {background-image:url('../img/50ml.svg');}

.grid-container {padding-left:2rem;padding-right:2rem;}

a.button {background:#00acec;color:#fff;display:block;border-radius:10px;font-size:1.2rem;}
.intro .content {display:flex;flex-direction:row;margin-bottom:20px;}
.intro .content div {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.intro .content h2, .intro .content h3 {font-size:2rem;line-height:1;margin:0;}
.intro .content h3 {font-size:1rem;text-align:left;}
.intro .content p {font-size:.8rem;color:#00acec;}
.intro .content img {width:100px;height:200px;margin-right:10px;}
.intro table {font-size:.8rem;margin:0;}
thead, tbody, tfoot, table, table tr, table td, tbody tr:nth-child(even) {background:none;border:0;}
table th, table td {padding:0;line-height:1.2;}
tbody td:nth-child(even) {color:#00acec;}

body.products-list .intro {padding-top:150px;padding-bottom:40px;background:#313131;margin-bottom:50px;position:relative;z-index:0;}
body.products-list .intro a.button {position:absolute;width:calc(100% - 4rem);left:2rem;bottom:-45px;}
body.products-list main {margin-top:0;}

p.livraison {position:absolute;font-size:1.2rem;text-transform:uppercase;line-height:1.2;padding-left:50px;pointer-events:none;}
p.livraison span {display:block;font-size:.8rem;margin-top:5px;}
p.livraison::before {content:'';background:url('../img/livraison-offerte.svg') no-repeat center center;background-size:contain;display:inline-block;width:70px;height:100px;position:absolute;top:-50px;left:0;}

main div.bg {background:#252525;position:absolute;z-index:-1;width:100%;height:140px;left:0;bottom:0;}



@media screen and (min-width:75rem){
	header label {display:none;}
	header .large-10 {display:flex;}
	header nav {position:relative;top:0;left:0;background:none;width:100%;height:auto;overflow:auto;flex-direction:row;justify-content:flex-start;}
	header nav ul {flex-direction:row;filter:blur(0);font-size:1.3rem;width:100%;margin-bottom:10px;}
	header nav ul li {flex:1 0 calc(100%/5);text-align:center;}
	header nav ul li:nth-last-child(2) {display:none;}
	header nav ul li:last-child {visibility:hidden;}
	header nav ul a.active {color:#00acec;}
	header.grid-container {left:calc((100% - 75rem) / 2);}
	h1::before {background-position:bottom left;}
	footer img {max-width:400px;margin:0 auto;display:block;}
	main div.bg {width:calc(100% - 75rem);left:calc((100% - 75rem) / 2);}
}