@font-face {
    font-family: 'existencelight';
    src: url('existence-light-webfont.woff2') format('woff2'),
         url('existence-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ostrich_sansbold';
    src: url('ostrichsans-bold-webfont.woff2') format('woff2'),
         url('ostrichsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.container_ex{display: block; margin: 0 auto; width: 980px; height: 100%; position: relative;}
.section-menu.exeption{background: black; height: 990px;}   
.section-menu.exeption h1{line-height: 160px; z-index: 50; font-weight: 100; font-size: 177px; color: white; position: relative; top: 300px; font-family: 'ostrich_sansbold';}        
.section-menu.exeption h1.second{line-height: 65px;  font-size: 82px; color: white; position: relative; letter-spacing: 4px; text-transform: uppercase; font-family: 'existencelight';}
.container_ex .coverViande{z-index: 1; width: 100%; height: 100%; position: absolute; top:0; left: 0;}


.section-menu.exeption .container_ex {position: relative;}
.section-menu.exeption .container_ex .image_fond
{
	z-index: 1;
	position: absolute;
	top: 55px;; right: -345px;
	
}





.liste_viandes .itemViande{background-color: black; height: 660px; position: relative; overflow: hidden;}
.liste_viandes .itemViande.paire{background-color: #312f2e;}     
.liste_viandes .itemViande .col{display: inline-block; vertical-align: top;}     
.liste_viandes .itemViande .col.image{width: 615px}     
.liste_viandes .itemViande .col.texte{position: relative; z-index: 55; width: 360px;}     
.liste_viandes .itemViande .col.texte .titreViande{line-height: 48px; font-weight: 100; padding-top: 120px; font-family: 'ostrich_sansbold'; font-size: 52px; color: white; padding-bottom: 40px;}       
.liste_viandes .itemViande .col.texte p{font-family: 'robotolight'; font-size: 16px; color: white; padding-bottom: 30px;}       
.liste_viandes .itemViande .col.texte .texteViande{font-family: 'robotolight'; font-size: 16px; color: white; padding-bottom: 30px;}       
.form_btn, .liste_viandes .itemViande .col.texte .btnViande{cursor: pointer; font-family: 'robotolight'; font-size: 20px; color: white; text-transform: uppercase; width: 188px; border: white 1px solid; text-align: center; padding: 13px 0;}       
.form_btn, .liste_viandes .itemViande .col.texte .btnViande{font-family: 'robotolight'; font-size: 20px; color: white; text-transform: uppercase; width: 188px; border: white 1px solid; text-align: center; padding: 13px 0;  transition: all 0.2s linear;}   
.form_btn:hover, .liste_viandes .itemViande .col.texte .btnViande:hover{ color: black; background: white; transition: all 0.2s linear;}       
.form_btn{margin: 0 auto; display: block;}

#commande form{width: 660px; margin: 0 auto; display: block; }
#commande{background: black;}
#commande .col1{margin-right: 45px;}  
#commande .col{display: inline-block; vertical-align: top;}  
#commande .col input{padding-bottom: 13px; margin-bottom: 25px; width: 305px; border: none; background: none; border-bottom: 1px solid white; color: white; font-family: 'robotolight'; font-size: 20px;}  
#commande .col textarea{padding: 13px; height: 108px; width: 272px; background: none; border: 1px solid white; color: white; font-family: 'robotolight'; font-size: 20px;}  
#commande .col input.error{border: 1px solid red;}  
#commande .col textarea.error{border: 1px solid red;}  
#commande .col2 p{padding-bottom: 13px; color: white; font-family: 'robotolight'; font-size: 20px;}  

#commande h2{z-index: 1; position: relative;}
#commande .form_rond
{
	position: absolute;
	top: -6%;
	z-index: 0;
	width: 12%;
	left: 44%;
}

input::-webkit-input-placeholder {
color: white !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
color: white !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
color: white !important;  
}
 
input:-ms-input-placeholder {  
color: white !important;  
}

#commande .col2 .oblig{padding-bottom: 35px; font-size: 16px;}
form h2
{
	color white;
	font-family: 'robotolight';
	text-align: center;
	text-transform: uppercase;
	font-size: 36px;
	color: white;
	padding-bottom: 67px;
	padding-top: 50px;
}




@media screen and (max-width: 1800px) 
{
	.section-menu.exeption{height: 800px; }
	.section-menu.exeption h1{font-size: 102px; line-height: 100px;}
	.section-menu.exeption h1.second{font-size: 44px;  line-height: 50px;}
	.section-menu.exeption .container_ex .image_fond
	{
		z-index: 1;
		position: absolute;
		top: 50px; right: 0px;
		width: 80%;
		
	}
}


@media screen and (max-width: 1000px) 
{
	.liste_viandes .itemViande .col.texte{position: relative; z-index: 2; width: 300px;}   
		.liste_viandes{margin-top: -10px !important;}
	.section-menu.exeption .container_ex {margin-top: -130px; }
	.section-menu.exeption .container_ex .image_fond{display: none;}
	.section-menu.exeption{position: relative; }
	.container_ex{width: 100%;}
	.section-menu.exeption h1{top: inherit; position: absolute; bottom: 75px; right: 40px;}
	.section-menu.exeption h1.second{top: inherit; position: absolute; bottom: 40px; right: 40px;}

	.section-menu.exeption .container_ex 
	{
		background-image: url('http://kirsch.lu/wp-content/themes/kirsch/Photos/viande_fond.png');
		background-image: url('http://kirsch.lu/wp-content/themes/kirsch/Photos/viande_fond.png');
		background-position: center;
	}
}


@media screen and (max-width: 960px) 
{
	.section-menu.exeption .container_ex 
	{
		margin-top: 0px; 
	}
}

@media screen and (max-width: 650px) 
{
	.section-menu.exeption .container_ex 
	{
		background-size: 100%;
		background-repeat: no-repeat;
	}
}

@media screen and (max-width: 500px) 
{
	.section-menu.exeption{height: 100vh; max-height: 700px;}
	.section-menu.exeption h1{top: inherit; position: absolute; bottom: 53px; right: 0px; font-size: 80px; line-height: 60px;  width: 100%; text-align: center;}
	.section-menu.exeption h1.second{top: inherit; position: absolute; bottom: 10px; right: 0px; font-size: 33px; width: 100%; text-align: center;}
}


/*LISTE RESP*/
@media screen and (max-width: 1100px) 
{
	.itemViande{height: 475px !important; }
	.itemViande .container_ex
	{
		width: 600px;
	}
	
	.filet
	{
		display: none;
	}
	
	.coverViande
	{
		
		background-position-y: 100px !important;
		background-size: auto 50% !important;
		
	}
	
	.liste_viandes .itemViande .col.texte .texteViande br
	{
		display: none;
	}
	
	.liste_viandes .itemViande .col.texte .titreViande
	{
		width: 250px;
		padding-top: 40px;
		padding-bottom: 20px;    
		font-size: 32px;
		line-height: 36px;
	}
	
	.paireResp
	{
		margin-left: 360px;
	}
	
}


@media screen and (max-width: 700px)
{
	form{width: 100% !important;}
	form h2{font-size: 28px;}
	#commande .form_rond{display: none;}
	#commande .col {width: 100%; display: block;}
	#commande .col textarea,
	#commande .col input
	{
		width: 80%;
		margin: 0 auto;
		display: block;
		font-size: 18px;
	}
	
	#commande .col textarea
	{
		width: 72%;
		padding: 4%;
	}
	
	#commande .col2 p{font-size: 18px; width: 80%; margin: 0 auto; display: block; padding-top: 40px;}
} 


@media screen and (max-width: 650px) 
{
	.itemViande{height: auto !important; }
	
	.itemViande .container_ex
	{
		width: 100%;
	}
	
	.liste_viandes .itemViande .col.texte{width: 100%;}
	.liste_viandes .itemViande .col.texte .titreViande
	{
		padding-top: 0px;
		width: 90%;
		text-align: center;
		font-size: 28px;
		display: block; margin: 0 auto;
	}
	
	.liste_viandes .itemViande .col.texte .btnViande
	{
		font-size: 14px;
		width: 120px;
		display: block; margin: 0 auto;
		padding: 7px 0;
		margin-bottom: 40px;
	}
	
	
	.liste_viandes .itemViande .col.texte .texteViande br
	{
		display: none;
	}
	
	.liste_viandes .itemViande .col.texte p,
	.liste_viandes .itemViande .col.texte .texteViande
	{
		padding-top: 0px;
		width: 90%;
		text-align: center;
		font-size: 14px;
		display: block; margin: 0 auto;
	}
	
	.itemViande .coverViande
	{
		position: relative;
		height: 200px;
		background-position: center !important;
		background-size: auto 75% !important;
	}
	
	.paireResp
	{
		margin-left: 0;
	}
}




.retrait{display: inline-block; width: 145px;}
.inline{display: inline-block;}
.paddingTopForm{padding-top: 28px;
}

#commande .col1 .oblig {
    padding-bottom: 35px;
    font-size: 12px;
	    font-family: robotolight;
	color: white;
}
.paddingForm{    padding: 35px 0 !important; padding-bottom: 35px !important;}

	.smallTxt{font-size: 14px !important;}
	.bigCase
	{
		display: inline-block;
		border: 1px solid white;
		height: 14px;
		width: 14px;
		padding: 0 !important;
		margin-right: 13px;
		position: relative;
	}
	
	.bigCase.active .contenuBig,
	.bigCase:hover .contenuBig
	{
		background-color: white;
		height: 10px;
		width: 10px;
		position: absolute;
		top: 2px;
		left: 2px;
		cursor: pointer;
	}
	
	.smallCase
	{
		display: inline-block;
		border: 1px solid white;
		height: 8px;
		width: 8px;
		padding: 0 !important;
		margin-right: 13px;
		position: relative;
		cursor: pointer;
	}
	
	.smallCase.active .contenuSmall,
	.smallCase:hover .contenuSmall
	{
		background-color: white;
		height: 4px;
		width: 4px;
		position: absolute;
		top: 2px;
		left: 2px;
		cursor: pointer;
	}

	#commande .col .emailInput.semi
	{
		width: 138px;
	}
	
	#commande .col .emailInput.semi.first
	{
		margin-right: 23px;
	}
	
	#commande .col2 p span
	{
		font-size: 12px;
	}
	
	
@media screen and (max-width: 700px)
{
		#commande .col .emailInput.semi.first
		{
			margin: 0 auto;
			margin-bottom: 20px;
		}
		
		#commande .col .emailInput.semi
		{
			width: 80%;
		}
		
		#commande .col1 .oblig
		{
			position: relative;
			left: 10%;
			width: 200px;
			margin-top: 20px;
		}
		
		.bigCase{margin-left: 10%;}
		
		.retrait.first
		{
			margin-left: 10%;
		}
		
		#commande .col1
		{
			margin-right: 0;
		}
		
		.inline
		{
			display: inline-block !important;
			padding-top: 0 !important;
		}
		
		#send2
		{
			margin-top: 20px;
		}
}