@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;700&family=Outfit:wght@200;400;700&family=PT+Serif:wght@400;700&display=swap');

*{
padding:0px;
border:0px;
margin:0px;
}

html{
width:100%;
min-width:750px;
scroll-behavior: smooth;
}

.main_width{
width:750px;
margin:auto;
}


body{
font-family: 'Outfit', sans-serif;
font-weight:400;
width:100%;
}


/* *********************** COMMON *********************** */

p{
color:#000310;
line-height:27px;
font-size:17px;
margin-bottom:10px;
}

h1{
color:white;
font-size: 85px;
font-weight: 700;
line-height: 93px;
font-family: 'PT Serif', serif;
}

h2{
color: #31393F;
font-size: 25px;
font-weight: 700;
line-height: 40px;
margin-bottom:22px;
font-family: 'PT Serif', serif;
font-size: 80px;
position: relative;
z-index: 2;
}

h2:after{
font-size: 110px;
color: #E6E6E6;
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
}

.button{
display: inline-block;
background-color: #31393F;
text-transform: uppercase;
color: white;
padding: 10px 25px;
font-weight: 700;
font-size: 18px;
text-decoration: none;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}

.clear{
width:100%;
clear:both;
}



/* *********************** HEADING MSG*********************** */
#heading{
width:100%;
height:30px;
text-align:center;
background-color:#31393F;
}

#heading p{
	color: white;
}



/* *********************** BANNER / MENU *********************** */
#banner{
position: absolute;
top: 35px;
left: 0;
width: 100%;
z-index: 100;
}

#banner.dark-banner{
background-color: #31393F;
top: 0;
}

#banner .main_width{
display: flex;
justify-content: space-between;
align-items: center;
}

#banner.dark-banner .main_width{
align-items: center;
}

#banner .main_width>a{
width: 250px;
height: auto;
}

#banner.dark-banner .main_width>a{
width: 250px;
margin: 20px 0;
}

/* *********************** MENU *********************** */
#cssmenu{
width: fit-content;
margin: 0!important;
background-color: transparent!important;
color: #4D4D4D!important;
height: fit-content!important;
}

#cssmenu ul{
list-style: none;
display: flex;
flex-direction: column;
margin-top: 10vh;
}

#cssmenu ul li{
display: block;
width: 100%;
padding: 25px 0;
}

div#cssmenu ul li a{
line-height: 30px;
padding: 10px 35px;
font-weight: 400;
font-size: 35px;
font-family: 'Bebas Neue', cursive;
color: white;
text-decoration: none;
}

div#cssmenu ul li:hover a{
color: #b1b1b1;
}

#cssmenu .burger{
position: fixed;
top: 0;
right: -400px;
width: 350px;
height: 100vh;
background-color: #31393f;
margin: 0;
-webkit-box-shadow: 0px 2px 8px 0px #7e7e7e;
box-shadow: 0px 2px 8px 0px #7e7e7e;
transition: all 0.6s;
overflow-y: scroll;
padding-top: 100px;
box-sizing: border-box;
z-index: 10;
}

#cssmenu .burger.open{
right: 0;
}

@media screen and (max-width: 850px){
	.menu-links.open{
		margin-right: 50px;
	}
	#banner .main_width>a{
		margin-left: 50px!important;
	}
}

.menu-links.open img{
width: 30px;
height: 30px;
}

.menu-links.close{
position: absolute;
top: 50px;
left: 35px;
}

.menu-links.close img{
width: 25px;
height: 25px;
}

.menu-links{
cursor: pointer;
}

div#cssmenu .langues{
padding-left: 35px;
}

div#cssmenu .langues a{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 20px;
display: inline-block;
padding: 0px 5px;
}

div#cssmenu .langues a+a{
margin-left: 5px;
}

div#cssmenu .langues img{
width: 20px;
height: auto;
}


/* *********************** BANNER & MENU AU SCROLL *********************** */

html:not([data-scroll='0']) #banner{
position: fixed;
background-color: #31393F;
padding: 20px 0;
animation: 0.4s ease-out banner_animation;
top: 0;
-webkit-box-shadow: 0px 0px 12px -5px #585757;
box-shadow: 0px 0px 12px -5px #585757;
}

@keyframes banner_animation { 
from { top:-100px; } 
to { top: 0; }  
}

html:not([data-scroll='0']) #banner .main_width>a{
width: 180px;
margin: 0;
}

html:not([data-scroll='0']) div#cssmenu > ul > li > a{
line-height: 55px;
}


/* *********************** WRAPPER *********************** */
#wrapper .main_width{
}

/* *********************** PAGES *********************** */


/* ***** SLIDER -> HOME***** */
#slider{
width: 100%;
height: 800px;
background-color: #cccccc; 
position: relative;
}

#slider .slider_background{
background-image: url(images/lasagnes-intro.jpg);
background-position: right 50px;
background-size: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-repeat: repeat-x;
}

#slider .slider_background:after{
content: "";
width: 100%;
height: 114px;
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5018382352941176) 70%, rgba(0,0,0,0) 100%);
top: 0;
left: 0;
position: absolute;
}

.slider_content{
height: 100%;
overflow: hidden;
position: relative;
z-index: 2;
width: 100%;
text-align: center;
background: linear-gradient(180deg, rgba(49,57,63,1) 0%, rgba(49,57,63,0.9668242296918768) 30%, rgba(49,57,63,0.7763480392156863) 50%, rgba(49,57,63,0) 65%);
}

#slider .asterisk{
position: absolute;
bottom: 2px;
right: 25px;
color: white;
margin: 0;
font-size: 14px;
}

#slider .content{
width: 100%;
padding: 200px 0 0 0;
position: relative;
}

#slider .content h1+a.button{
margin-top: 75px;
}

#slider h1{
font-size: 70px;
line-height: 	75px;
}

#slider .content .scroll_icon{
position: absolute;
height: 50px;
bottom: -140px;
background-image: url(images/scroll-down-white.svg);
background-repeat: no-repeat;
animation: 1s ease-in 0s infinite alternate scroll_animation;
animation-delay: 1.2s;
left: 50%;
transform: translateX(-50%);
margin: 0;
width: 35px;
background-size: 35px;
}

@keyframes scroll_animation { 
from { bottom:-140px; } 
to { bottom:-160px; }  
}

/* ***** HOME ***** */
#home{
text-align:center;
position:relative;
margin-bottom:0px;
}

#home .main_width{
}

#home .c1{
padding-top: 100px;
padding-bottom: 100px;
background-color: white;
}

#home .c1 .main_width{
position: relative;
margin-bottom: 75px;
}

#home .c1 h2{
display: inline-block;
width: 100%;
text-align: center;
vertical-align: top;
}

#home .c1 h2:after{
content: "Concept";
}

#home .c1-de h2:after{
content: "Konzept";
}

#home .c1 .content{
display: inline-block;
width: 460px;
vertical-align: top;
box-sizing: border-box;
margin-top: 75px;
}

#home .c1 .content p{
font-size: 21px;
margin-bottom: 20px;
line-height: 30px;
}

#home .c1 .content .sub-title{
font-size: 33px;
padding: 15px 0;
font-weight: 600;
}

#home .c1 .content+a{
position: absolute;
bottom: -100px;
transform: translateX(-50%);
left: 50%;
color: #31393f;
font-weight: 700;
font-size: 25px;
display: inline-block;
text-decoration: none;
padding-left: 55px;
}

#home .c1 .content+a:after{
content: "";
position: absolute;
left: 0;
top: -5px;
width: 40px;
height: 40px;
background-image: url(images/common/icon_facebook.svg);
background-size: 40px;
background-repeat: no-repeat;
background-position: center;
}

#home .c1 a{
margin-top: 30px;
}

#home .c2{
position: relative;
z-index: 2;
padding-top: 100px;
background-color: white;
padding-bottom: 200px;
}

#home .c2 .c2_background{
background-image: url(images/c2-background.svg);
background-repeat: no-repeat;
background-position: center top;
background-size: 1700px;
position: absolute;
z-index: -1;
width: 100%;
top: 0;
left: 0;
height: 800px;
}

#home .c2 h2{
color: white;
padding-top: 110px;
background-image: url(images/lasagnes-background.svg);
background-size: 80px;
background-position: top center;
background-repeat: no-repeat;
transform: translateY(-15px);
}

#home .c2 h2:after{
content: "Les lasagnes";
color: #3a4147;
left: 50%;
transform: translateX(-50%);
width: fit-content;
width: 100%;
}

#home .c2-de h2:after{
content: "Unsere Lasagnen";
}

#home .c2 .products{
display: flex;
justify-content: space-around;
position: relative;
top: 130px;
}

#home .c2 .product h3{
font-family: 'Oswald', sans-serif;
font-weight: 700;
color: white;
font-size: 30px;
margin-bottom: 75px;
position: relative;
}

#home .c2 .product h3:after{
content: "";
position: absolute;
bottom: -55px;
left: 50%;
transform: translateX(-50%);
width: 25px;
height: 40px;
background-image: url(images/scroll-down-white.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 25px;
animation: 0.8s ease-in 0s infinite alternate discover_animation;
animation-delay: 1.2s;
}

@keyframes discover_animation { 
from { bottom:-55px; } 
to { bottom:-65px; }  
}

#home .c2 .product img{
display: block;
width: 75%;
max-width: 375px;
height: auto;
margin: auto;
}

#home .c2 .product span.button{
margin-top: 45px;
}

#home .c2 .product a{
text-decoration: none;
}

#home .c3{
background-color: #e6e6e6;
padding: 100px 0 0;
}

#home .c3 .main_width{
background-color: white;
padding: 80px;
box-sizing: border-box;
padding-bottom: 100px;
position: relative;
z-index: 5;
}

.form_response{
position: fixed;
bottom: 50px;
right: -850px;
background-color: #74b643;
padding: 20px 50px;
-webkit-box-shadow: 0px 0px 4px 2px #c0c0c0;
box-shadow: 0px 0px 4px 2px #c0c0c0;
animation-name: response;
animation-duration: 6s;
animation-delay: 1s;
z-index: 100;
}

.form_response.error{
background-color: #a34040;
}

@keyframes response {
0% {right: -850px;}
10% {right: 0;}
90% {right: 0;}
100% {right: -850px;}
}

.form_response p{
color: white;margin: 0;
}

#home .c3 h2{
text-align: left;
margin-bottom: 100px;
font-size: 60px;
}

#home .c3 h2:after{
content: "Remise de prix";
font-size: 75px;
bottom: -10px;
}

#home .c3 .form_c1{
display: inline-block;
width: 100%;
vertical-align: top;
margin-bottom: 50px;
}

#home .c3 .form_c2{
display: inline-block;
width: 100%;
vertical-align: top;
text-align: left;
}

#home .c3 .form_part{
position: relative;
display: inline-block;
width: 100%;
margin: 30px 0 10px;
}

#home .c3 .form_part.cp{
width: 40%;
margin-right: 4%;
}

#home .c3 .form_part.city{
width: 55%;
}

#home .c3 .form_part label{
position: absolute;
top: -12px;
left: 10px;
background-color: white;
font-size: 17px;
padding: 0 7px;
font-weight: 600;
}

#home .c3 .form_part label.required:after{
content: "*";
position: absolute;
right: 0;
top: 0px;
font-size: 14px;
color: #959595;
}


#home .c3 .form_part input, #home .c3 .form_part select{
border: 1px solid #666666;
padding: 15px 10px;
box-sizing: border-box;
font-size: 17px;
width: 100%;
}

#home .c3 form p.title{
text-align: left;
font-weight: 600;
font-size: 26px;
margin-top: 50px;
color: #959595;
margin-bottom: 0;
}

#home .c3 form p.title:first-of-type{
margin-top: 0;
}

#home .c3 .form_part.checkbox{
text-align: left;
}

#home .c3 .form_part.checkbox input{
display: inline-block;
width: auto;
}

#home .c3 .form_part.checkbox label{
position: static;
background-color: transparent;
}

#home .c3 .form_part.visibility:not(.visible){
opacity: 0;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}

#home .c3 table{
width: 100%;
margin: 25px 0 50px;
text-align: center;
position: relative;
}

#home .c3 table:after{
content: "";
position: absolute;
top: -64px;
right: 10px;
width: 50px;
height: 50px;
background-image: url(images/price-arrow.svg);
background-size: 44px;
background-repeat: no-repeat;
background-position: center;
transform: rotate(25deg);
}

#home .c3 td, #home .c3 th {
  padding: 8px;
}

#home .c3 tr:nth-child(odd){background-color: #f2f2f2;}

#home .c3 th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #31393F;
  color: white;
}

#home .opt_in{
text-align: left;
}

#home table+.small{
color: #808080;
font-size: 12px;
line-height: 16px;
}

#home .opt_in .small{
color: #808080;
font-size: 12px;
line-height: 16px;
}

#home .opt_in label{
font-size: 17px;
padding: 0 7px;
font-weight: 600;
}

#home .c3 form .button{
margin-top: 50px;
}

#home .c4{
padding: 150px 0;
text-align: center;
background-color: white;
}

#home .c4 h2{
margin-bottom: 100px;
}

#home .c4 h2:after{
content:"FAQ";
text-align: center;
width: 100%;
}

#home .c4 .question{
margin-bottom: 70px;
}

#home .c4 .question-title{
color: #4D4D4D;
font-size: 28px;
margin-bottom: 25px;
}

#home .c4 p:not(.question-title){
max-width: 800px;
margin: 0 auto 10px;
}

#home .c4 p a{
color: #31393F;
font-weight: 600;
}

#home .c4 span a{
color: #808080;
font-weight: 600;
}

#home .c4 table{
width: 100%;
max-width: 600px;
margin: 30px auto 0;
text-align: center;
}

#home .c4 td, #home .c4 th {
  padding: 8px;
}

#home .c4 tr:nth-child(odd){background-color: #f2f2f2;}

#home .c4 th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #31393F;
  color: white;
}

#home .c4 table+span{
color: #808080;
font-size: 14px;
line-height: 18px;
max-width: 600px;
display: block;
margin: 0 auto;
}

#home .fixed-image{
width: 100%;
height: 600px;
background-color: transparent;
}

#home .fixed-image .image{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
}

#home .fixed-image .image img{
width: 100%;
height: 100%;
object-fit: cover;
}



/* ***** COMMANDES ***** */
#commande {
	background-color: #e6e6e6;
	padding: 200px 0 300px;
}

#commande.merci{
	text-align: center;
}

#commande .main_width{
	background-color: white;
	padding: 80px;
	box-sizing: border-box;
	padding-bottom: 100px;
	position: relative;
	z-index: 5;
}

#commande h2, #commande h1 {
	text-align: center;
	margin-bottom: 20px;
	font-size: 38px;
	color: #31393F;
	font-weight: 700;
	line-height: 40px;
}

#commande form p.title {
	text-align: left;
	font-weight: 600;
	font-size: 27px;
	margin-top: 15px;
	color: #959595;
	margin-bottom: 0;
}

#commande .form_part{
position: relative;
display: inline-block;
width: 100%;
margin: 30px 0 10px;
}

#commande .form_part.checkbox{
text-align: left;
}

#commande .form_part.checkbox input{
display: inline-block;
width: auto;
}

#commande .form_part.checkbox label{
position: static;
background-color: transparent;
}

#commande .form_part.cp{
width: 40%;
margin-right: 4%;
}

#commande .form_part.city{
width: 55%;
}

#commande .form_part label{
position: absolute;
top: -12px;
left: 10px;
background-color: white;
font-size: 17px;
padding: 0 7px;
font-weight: 600;
}

#commande .form_part label.required:after{
content: "*";
position: absolute;
right: 0;
top: 0px;
font-size: 14px;
color: #959595;
}


#commande .form_part input, #commande .form_part select{
border: 1px solid #666666;
padding: 15px 10px;
box-sizing: border-box;
font-size: 17px;
width: 100%;
}

#commande .form_c1, #commande .form_c2{
max-width: 550px;
margin: 0 auto;
}

#commande form>.important{
	max-width: 550px;
    margin: 0 auto 50px;
}

#commande .form_part .note{
	margin-top: 8px;
	color: #b5b5b5;
	font-size: 15px;
}

#commande .opt_in{
text-align: left;
}


#commande .small{
color: #808080;
font-size: 12px;
line-height: 16px;
}

#commande .opt_in label{
font-size: 17px;
padding: 0 7px;
font-weight: 600;
}

#commande .important table{
width: 100%;
max-width: 600px;
margin: 30px auto 0;
text-align: center;
}

#commande .important table td, #commande .important table th {
  padding: 8px;
}

#commande .important table td:first-of-type{
	text-align: left;
}

#commande .important table tr:nth-child(odd){background-color: #f2f2f2;}

#commande .important table th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #31393F;
  color: white;
}

#commande .important #resume-reduction-infos{
	display: block;
	margin-top: 3px;
	color: #8d1010;
	font-size: 12px;
}

/* ***** Mentions légales ***** */


#legal{
text-align:center;
margin-top: 150px;
margin-bottom: 250px;
padding-bottom:30px;

}

#legal .main_width{
padding-top:85px;
padding-bottom:30px;
}


#legal h1{
text-align:center;
background-position:bottom center;
margin-bottom:73px;
color: #31393f;
}

#legal h2{
background-position: 0px 7px;
position: relative;
bottom: 0px;
margin-top: 14px;
margin-bottom: 14px;
font-size:28px;
line-height:30px;
background-position: bottom left;
padding-bottom: 7px;
}

#legal h3{
line-height:23px!important;
padding-bottom: 6px!important;
}

#legal p{
margin-bottom:5px;
}

#legal p span{
display:inline-block;
vertical-align:top;
width:166px;
text-decoration:underline;
}

#legal .c0{
width:600px;
text-align:left;
display:inline-block;
vertical-align:top;
border:1px solid #c0c0c0;
text-align:left;
padding:1%;
margin-bottom:30px;
background-color:white;
border-radius:13px;
}

#legal .c1{
display:inline-block;
vertical-align:top;
width:36%;
margin-right:6%;
padding:1%;
border:1px solid #c0c0c0;
text-align:left;
margin-bottom:30px;
min-height:262px;
background-color:white;
border-radius:13px;
}

#legal .c1.last{
margin-right:0px;
}

#legal .c1 p{
margin-bottom:8px;
font-size:13px;
line-height:22px;
}

#legal .c2{
width:36%;
padding:1%;
margin-right:4%;
text-align:left;
display:inline-block;
vertical-align:top;
border:1px solid #c0c0c0;
margin-bottom:30px;
height:600px;
overflow:auto;
padding-bottom:30px;
background-color:white;
border-radius:13px;
}

#legal .c2 h3{

}

#legal .c2 h4{

}

#legal .c2 p{
margin-bottom:8px;
font-size:13px;
line-height:22px;
}

#legal .c2 ul li{
margin-bottom:5px;
font-size:13px;
line-height:22px;
padding-left:15px;
list-style-type:none;
}

#legal .c2 ul ul li{
padding-left:30px;
}

#legal .c2.last{
margin-right:0px;
}


/* ***** 404 ***** */

#e404{
text-align:center;
margin-top: 150px;
margin-bottom: 250px;
padding-bottom:30px;
}

#e404 .main_width{
padding-top:85px;
padding-bottom:30px;
}

#e404 h1{
text-align:center;
background-position:bottom center;
margin-bottom:73px;
color: #31393f;
}

#e404 h1+p{
color: #31393f;
}


/* *********************** FOOTER *********************** */


#footer{
width:100%;
background-color:#31393F;
padding-top:275px;
text-align:center;
position: relative;
margin-top: -200px;
z-index: 3;
}

#footer.simple-footer{
padding-top: 75px;
}

#footer p{
color: white;
margin-bottom: 30px;
}

#footer p span:not(.address){
font-weight: bold;
text-transform: uppercase;
}

#footer p span.address{
display: block;
margin-top: 10px;
}

#footer div>a>img{
width:75%;
max-width:200px;
display:block;
margin:auto;
}

#footer p.copyright{
color: white;
font-size: 14px;
margin: 65px auto 0;
padding: 0px 10px 0;
text-align: center;
position: relative;
}

#footer p.copyright+p.copyright{
margin: 0 auto;
padding: 0px 10px 100px;
}

#footer p.copyright a{
color: white;
}

#footer p.copyright a:last-of-type{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 35px;
}

#footer .copyright a img{
display: inline-block;
width: 94px;
margin-left: 10px;
height: auto;
}

/* ***** CAPTCHA ***** */

.grecaptcha-badge { 
	visibility: hidden; 
}


/* ***** COOKIES ***** */

#cookieChoiceInfo{
	box-sizing: border-box;
}

/* ***** AOS ***** */

.fade_container {
    overflow-x: hidden;
}

/* ***** MICRODATA ***** */

#home .microdata {
    display: none;
}