/*CSS JUN KITCHEN JAN2021*/

/*STYLE DE BASE*/


html {
  font-family: ABeeZee, Kosugi Maru
}

.header {
  background-color: #71130B;
  color: #ffffff;
  height: 70px;
  padding: 15px;
  padding-left: 80px;
}


.footer {
  background-color: #71130B;
  color: #ffffff;
  text-align: center;
  padding: 15px;
}

body
{ font-size:100%; font-family:ABeeZee, Kosugi Maru}

table
{ font-size:90%; font-family:ABeeZee, Kosugi Maru}

textarea
{ font-size:100%; font-family:ABeeZee, Kosugi Maru}

p
{ font-size:100%; font-family:ABeeZee, Kosugi Maru}

td.gris
{ font-size:100%; font-family:museo-sans-1,museo-sans-2, color:#555555}

td.session {
  border-bottom: 1px solid #ddd;
  padding: 5px;
  text-align: left;
  vertical-align: top;
  font-size:80%;
}

/*STYLE DE TEXTE PAR RAPPORT A BODY*/

.titre_section
{ color:#71130B ;font-size:200%}

.txt
{ color:#555555 ;font-size:100%; line-height:2.2}

.boldtxt
{ color:#555555 ;font-size:75%; line-height:1.2; font-weight:bold}

.pageSelect
{ color:#FF0000 ;font-size:75%; font-weight:bold}

.path
{ color:#555555 ;font-size:70%; letter-spacing:0.07em}

.copyright
{ color:#71130B ;font-size:10px; font-family:Arial}

.error
{ color:#71130B ;font-size:80%}


/*STYLE DES INPUTS PAR RAPPORT A BODY OU TABLE*/

.input_s {width:100px; font-size:100%; border:0; background-color: #F3F3F3; font-family:ABeeZee}






/*STYLE DE TEXTE PREFORMATE PAR RAPPORT A BODY*/

p.justify
{ color:#555555 ;font-size:100%; line-height:2.0; text-align:justify}

p.ABeeZee
{ font-size:80%; font-family:ABeeZee}




/*RESPONSIVE*/


* {
  box-sizing: border-box;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
  float: left;
  padding: 0px;

}


@media only screen and (min-width: 100px)  {
  /* For tablets & Mobile: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  
	.titre_page{ color:#FFFFFF ;font-size:300%; padding: 50px; padding-left: 5%}
	.sous-titre_page{ color:#FFFFFF ;font-size:120%; padding-left: 5%}
	.soustitre_section{ color:#71130B ;font-size:100%;padding-bottom: 10px;padding-top: 10px;}
	.smalltxt{ color:#555555 ;font-size:70%; font-family:ABeeZee, Kosugi Maru}
	.mediumtxt{ color:#555555 ;font-size:80%; font-family:ABeeZee, Kosugi Maru}
	
	table
	{ font-size:80%; font-family:ABeeZee, Kosugi Maru}
	
	.section_g {
	background-color: #f9f9f9;
	padding: 15px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 40px;
	display: table; /*Displays the responsive columns as a table*/
	}
	.section_g2 {
	background-color: #f9f9f9;
	padding: 15px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 40px;
	}

	.section_r {
	background-color: #fef8f8;
	padding: 15px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 40px;
	display: table; /*Displays the responsive columns as a table*/
	}
	
	.section_r2 {
	background-color: #fef8f8;
	padding: 15px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 40px;
	}
	
	p.justify
	{ color:#555555 ;font-size:80%; line-height:2.0; text-align:justify}
	
	.input_l {width:100%; font-size:80%; border:0; background-color: #F3F3F3; }

	.input_area_s {width:100%; font-size:80%; border:0; background-color: #F3F3F3; overflow-y:auto; overflow-x:hidden }
}



@media only screen and (min-width: 600px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  
	.titre_page{ color:#FFFFFF ;font-size:400%; padding: 50px; padding-left: 80px}
	.sous-titre_page{ color:#FFFFFF ;font-size:150%; padding-left: 80px}
	.soustitre_section{ color:#71130B ;font-size:130%;padding-bottom: 10px;padding-top: 10px;}
	.smalltxt{ color:#555555 ;font-size:80%; font-family:ABeeZee, Kosugi Maru}
	.mediumtxt{ color:#555555 ;font-size:90%; font-family:ABeeZee, Kosugi Maru}
	
	table
	{ font-size:90%; font-family:ABeeZee, Kosugi Maru}
	
	.section_g {
	background-color: #f9f9f9;
	padding: 15px;
	padding-left: 80px;
	padding-right: 60px;
	padding-top: 40px;
	}
	
	.section_r2 {
	background-color: #fef8f8;
	padding: 15px;
	padding-left: 80px;
	padding-right: 60px;
	padding-top: 40px;
	}
	
	.section_emailSent {
	background-color: #fef8f8;
	padding: 15px;
	padding-left: 80px;
	padding-right: 60px;
	padding-bottom: 15px;
	}

	.section_r {
	background-color: #fef8f8;
	padding: 15px;
	padding-left: 80px;
	padding-right: 60px;
	padding-top: 40px;
	display: table; /*Displays the responsive columns as a table*/
	}
	
	
	p.justify
	{ color:#555555 ;font-size:100%; line-height:2.0; text-align:justify}
	
	.input_l {width:400px; font-size:80%; border:0; background-color: #F3F3F3; }

	.input_area_s {width:400px; font-size:80%; border:0; background-color: #F3F3F3; overflow-y:auto; overflow-x:hidden }

}


/*IMAGES*/

.container{
	width: 100%;
	height: 400px;
	position: relative;
	margin: 0px;
}

.divHeader {
  width: 100%;
  height: 15px;
  background-image: url('/img/tile.png') ;
  position: absolute;
  z-index:1;
  margin-top: 0px;
}

.divT {
  width: 100%;
  height: 400px;
  background-image: url('/img/imageTitle.jpg') ;
  background-size: cover;
  background-position: center;
  z-index:-1;
   opacity: 1;
  margin-top: 0px;
  padding-right: 5%;
}

.shade {
  width: 100%;
  height: 400px;
  background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0));

}

/* The Modal POPUP */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* The Contact Button */
.contactbutton{
  background-color: #71130B;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

/* The Contact Form Button */
.contactFormbutton{
  background-color: #71130B;
  border: none;
  color: white;
  padding: 5px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}