@charset "UTF-8";

body{margin:0;background: #FAFAF3;font-family: Fedra-BookItalic}
header{width:100%;height:76vh;background-image: url(../img/banner.jpg);background-size:cover;background-position: center; text-align: center;padding-top:10%;box-sizing: border-box}
header #logo{width:24%;height:auto;}
#baseline{padding:4vh 0 0vh;text-align:center}
#baseline img{margin-top:8px;width: 10%;
    height: auto;}


hr{width:100%;border: 0;border-top: 2px solid #898989}
main{margin:0 auto;padding-left:10%;padding-right:10%;max-width: 1704px}

@media (max-width:1600px){
	main{padding-left:6%;padding-right:6%}
}

h1{font-family:Fedra-Book;font-weight: normal; font-size:38px;text-align: center;margin:0 0 -4px 0}


h2{font-family:Fedra-Bold;font-weight: normal;letter-spacing: 6px; text-transform: uppercase;margin:0;font-size:28px}
h2.h2title{margin:30px 0;font-size:34px}
p{font-size:28px;letter-spacing: 2px}
p.quality{font-size:24px;line-height: 38px; text-align: center; padding:70px 15% 30px}
.grainmoulu{width:100%}
.grainmoulu .text{float:left;padding:140px 5% 0;box-sizing: border-box;width:40%;height:400px;background:#C73A3C;color:#fff;font-size: 20px;line-height: 36px;letter-spacing: 4px;}
@media (min-width:992px) and (max-width:1250px){
	.grainmoulu .text{padding:50px 5%;line-height: 30px;letter-spacing: 4px;}
}

.grainmoulu .fond{float:left;width:60%;height:400px;background-size: cover;background-position: center center;}
.grainmoulu .fond.grain{background-image:url("../img/bg-grain.jpg")}
.grainmoulu .fond.moulu{background-image:url("../img/bg-moulu.jpg")}
.grainmoulu .slick-next::before {content:"";background-image:url("../img/next-arrow.svg");
	background-size: 35px 30px;margin: 0 auto;
    display: block;
    width: 35px;
    height: 30px;
    background-repeat: no-repeat;}
.grainmoulu .slick-next{width:84px;height:84px;background-color:#C73A3C!important;color:#fff;right:0px}
.grainmoulu .slick-next:hover, .grainmoulu .slick-next:focus{background-color:#C73A3C;color:#fff;}


#produits {float:left;width: 100%;}
#produits .container{height: 600px}
.left{position:relative;float:left;padding:50px 4% 50px 0;width:26%;text-align: center;border-right:2px solid #898989}
.left img{margin-top:100px;max-width: 330px;width:100%;height: auto}
.right{float:left;width:69%;padding:50px 5% 0px;box-sizing: border-box;}
.produitscontainer:last-child{border-bottom:2px solid #898989}
.produitscontainer{float: left;width: 100%;padding:0;border-top:2px solid #898989}
.produitscontainer p.bottom{position:absolute;bottom:60px;width:100%;letter-spacing: 2px;font-family: 'Fedra-Book';}
.produitscontainer p{font-size:26px;letter-spacing: 5px;margin:0px 0px}
.variant-produits{margin:0;padding:0;display: flex;justify-content: space-between;}
.variant-produits hr{width:120px;margin-top:50px;margin-bottom: 25px}
.variant-produits li{float:left;list-style-type: none;text-align: center}
.variant-produits li:nth-child(2){padding-top:125px}
.variant-produits li:nth-child(3){padding-top:235px}
.variant-produits span{font-family: Fedra-Book;font-size: 28px}
#euskal{
	float:left;
	width:100%;
	font-family:Fedra-Bold;font-size:36px;letter-spacing: 16px;text-align: center;
    padding: 45px 0;
    border-bottom: 2px solid #898989}
#euskal::before, #euskal::after{content:"";background-image:url("../img/picto2.svg");position: absolute;
    background-size: 30px 30px;width: 30px;height: 30px;background-repeat: no-repeat;margin-top: 4px;}
#euskal::before{left: 15%}
#euskal::after{right: 15%}
@media (max-width:1400px){
	#euskal::before{left: 10%}
	#euskal::after{right: 10%}
	#euskal{font-size:46px}
}
@media (max-width:1200px){
	#euskal::before{left: 10%}
	#euskal::after{right: 10%}
	#euskal{font-size:30px}
	#euskal::before, #euskal::after{background-size: 30px 30px;width: 30px;height: 30px;}
}

footer{float:left;width:100%;box-sizing: border-box;padding:80px 0 60px;font-family: 'Work Sans', sans-serif;font-weight:400;color:#707070;font-size: 16px;text-align: center}
.informations{width:100%}
.informations span{display:block}
.informations .title{font-size:14px;padding:20px 0}
.informations .adresse{}
.informations .contact{font-weight: 600;padding:20px 0}


@media (min-width:992px) and (max-width:1250px){
	header #logo{margin-top:4%;width:34%}
	
}
@media (min-width:551px) and (max-width:991px){
	header #logo{margin-top:10%;width:40%}
	
}



@media (min-width:992px){
	.md-left{text-align: left}
}

@media (max-width:991px){
	main{padding-left:8%;padding-right:8%}
	h1{padding:0px 10%;font-size:30px}
	.sm-center{text-align: center}
	.grainmoulu .text, .grainmoulu .fond{width:100%}
	.grainmoulu .text{height:auto;padding: 60px 5%;}
	.grainmoulu .fond{height:400px}
	.grainmoulu .slick-next{right:0px;top:55%}
	#produits .container{width:100%;height:auto;padding:0;padding-bottom:40px}
	#produits .container.left{height:auto;border-right:none;padding:50px 0 0}
	.left img{margin:20px 0;width:60%}
	#produits .produitscontainer:nth-child(1) .left img{margin:0}
	.produitscontainer p.bottom{display: none}
	.variant-produits hr{width:80px}
	p.quality{font-size:18px}
}
@media (max-width:550px){
	.sm-hidden{display: none}
	header{height:68vh}
	header #logo{width:60%;margin-top:15%;}
	#baseline{height:28vh;padding-top:3vh}
	h1 {padding: 0px 10%;text-align: center;font-size: 20px;}
	h2.h2title{font-size:28px}
	p.quality{padding:20px 0%;font-size: 16px;line-height: 30px;}
	.grainmoulu .text{font-size:15px;letter-spacing: 3px; line-height: 20px;padding: 30px 6% 30px;height:300px}
	.grainmoulu .fond{height:200px}
	.slider{margin:0px 0}
	.grainmoulu .slick-next {right: 0px;top: 80%;width: 60px;height: 60px;}
	.sm-center{font-size:24px;letter-spacing: 4px}
	.produitscontainer p{font-size:20px}
	.variant-produits li{width:33.3333%;padding:10px 2%!important}
	.variant-produits li img{width:100%}
	.variant-produits li:nth-child(2){padding-top: 55px!important;}
	.variant-produits li:nth-child(3){padding-top: 108px!important;}
	.variant-produits li:nth-child(1) img{width:90px;height: auto}
	.variant-produits li:nth-child(2) img{width:70px;height: auto}
	.variant-produits li:nth-child(3) img{width:46px;height: auto}
	.variant-produits hr{margin-top:30px;margin-bottom:15px}
	.variant-produits span{font-size:24px}
	#euskal{padding: 25px 0px;position:relative;font-size:24px}
	#euskal::before, #euskal::after{top:40px;background-size:20px 20px;width:20px;height:20px}
	#euskal::before{left:0%}
	#euskal::after{right:0%}
	footer{padding:30px 0;text-align:center;height:auto}
}
@media (max-width:350px){
	h1{font-size:17px}
	p.quality {font-size: 14px;line-height: 24px;}
	.grainmoulu .text{font-size:14px;letter-spacing: 1px; line-height: 18px;padding: 20px 6% 20px;height:240px}
	.sm-center{font-size:22px}
	#euskal{font-size:20px}
}