@font-face {
 font-family: "Simplon";
 src: url(../font/SimplonEcalNorm-Medium.ttf);
 font-weight: medium;
}

@font-face {
 font-family: "Simplon-reg";
 src: url(../font/SimplonEcalMono.ttf);
  font-weight: lighter;


}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}


html{
	height:100%;
	width:100%;
}
body {
  padding-top: 0 !important;
  min-height: 100%;
  width:100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
  font-family: "Simplon", Helvetica, sans-serif;
}

body.base{
	height:100%;
}


.fadein {
    margin-left:100%;
    transition: all ease 1.5s;
}

.fadeout {
  margin-left: 100% !important;
  transition: all ease 1.5s;
}

span:hover {
  cursor: pointer;
}

body {
  background-color: #cd1719;
}
body.bwhite {
	background-color:#ffffff;
}
body.red {
	background-color:#cd1719;
}



.rond {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: black;
  border-radius: 1000px;
  z-index: 1;

  animation-name: anim_rond;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: both;
  color: white;
}

@keyframes anim_rond {
  0%   {width: 150px; height: 150px;}
  50%   {width: 300px; height:
   300px;}
  75% {width: 300px; height: 300px;}
  100% {width: 0px; height: 0px;}
}

@keyframes anim_tacos {
  0%{width: 0px; height: 0px;}
  100% {width: 350px; height: 350px;}
}

@keyframes anim_h {
    0%{transform: translateX(-100%) rotate(-90deg);}
    100%{transform: translateX(-20%) rotate(-90deg);}

}

@keyframes anim_r {
    0%{transform: translateX(100%) rotate(90deg);}
    100%{transform: translateX(20%) rotate(90deg);}

}

.container_tacos {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  left:0;
  bottom:0;
  width: 600px;
  height: 600px;
  background-color: transparent;
  z-index: 2;
  text-align: center;
}




#tacos {
    width: 200px;
    margin-top: 50%;

    animation-name: anim_tacos;
    animation-duration: 0.7s;
    animation-delay: 1.2s;
    animation-fill-mode: both;
    transform-origin: center center;
    transform: translateY(-50%);
}

.container1,
.container2 {
	position:relative;
	float:left;
	width:50%;
	height:100%;
	display:block;
}

#div_histoire,
#div_recette {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #cd1719;
  height: 100%;
  width: 100%;
}

#div_histoire:hover,
#div_recette:hover {
    background-color:#c01a21;
    transition-duration: 0.5s;
}

#txt_h {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  margin:auto;
  background-color:transparent;
  z-index: 6;
  transform: rotate(-90deg);
  margin-left: 0.5em;
  text-align: center;
  align-content: center;
  font-size: 8em;
  color: #781a22;
  font-family: "Simplon";

  animation-name: anim_h;
  animation-duration: 0.7s;
  animation-delay: 1.2s;
  animation-fill-mode: both;
}




#txt_r{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  background-color:transparent;
  z-index: 6;
  transform: rotate(90deg);
  margin-right: 0.5em;
  text-align: center;
  align-content: center;
  font-size: 8em;
  color: #781a22;

  animation-name: anim_r;
  animation-duration: 0.7s;
  animation-delay: 1.2s;
  animation-fill-mode: both;
}







#gaucheh,
.gaucheh
 {
  position: relative;
  float: left;
  height: 100%;
  width: 50%;
}

#droiteh,
.droiteh {
  position: relative;
  float: right;
  height: auto;
  width: 50%;
}

#gaucheh #texte{
    width: 93%;
    margin-left: 20%;
    font-family: "Simplon";
    font-weight: lighter;
    text-align: left;
}

#droiteh marquee{
	position:absolute;
    height: inherit;
    margin-left: 4em;
	z-index: 1000;
}

#btn_retour{
    width: 55px;
   }


#btn_retour:hover {
    opacity: 0.7;
}
p{
  color: white;
  font-size: 1.4em;
  line-height:1.4em;
  text-align: justify;
  hyphens: auto;

  }


h1{

    font-size: 10em;
    margin-left: 0;
    color: white;
    font-family: "Simplon";
	margin-top:0.3em;
	margin-bottom:0.5em;
	top:0.3em;
}
h1 a {
	text-decoration:none;
	color:white;
}
h3{
    font-size: 4em;
    margin: 0;
    font-family: "Simplon";
    color: #71e1a9;
    line-height:1em;
	margin-top:1em;
	margin-bottom:1em;
   }

h2{
    font-size: 2em;
    font-family: "Simplon";
    color: white;
}

h4{
    font-size: 4em;
    font-family: "Simplon";
    color: black;
    text-align: left;
     line-height:3em;
	color: #ffc133;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

div b {
  font-size: 4rem;
}

#gaucheh .svg-container {
  position:fixed;
  width: 10%;
   height:50%;
  z-index:100;
  top:1em;
  left:0;
}

#droiteh .svg-container2 {
  position:fixed;
  width: 10%;
  height:50%;
   z-index:100;
  right:0;
  top:1em;
}
svg {
  width: 100%;
    height: 100%;
  z-index:100;
}
#gaucheh svg path {
  animation-name: pathAnim;
   animation-duration: 4s;
  animation-iteration-count: infinite;
}
#droiteh svg path {
    animation-name: pathAnim2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}



@keyframes pathAnim {
    0% {
    d: path('M 0 0 C 50 20, 100 20, 0 100');
  }
  50% {
    d: path('M 0 0 C 100 20, 50 20, 0 100');
  }
  100% {
    d: path('M 0 0 C 50 20, 100 20, 0 100');
  }
}

@keyframes pathAnim2 {
  0% {
    d: path('M 100 0 C 50 20, 50 20, 100 100');
  }
  50% {
    d: path('M 100 0 C 0 20, 0 20, 100 100');
  }
  100% {
    d: path('M 100 0 C 50 20, 50 20, 100 100');
  }
}

/*



 *  recettes */
#head{
	display:flex;
	flex-wrap: wrap;
  align-items: center;
}
#head #btn_retour{
  width: 55px;
  display:block;
}


#head #btn_retour:hover {
    opacity: 0.7;
}

#btn_poulet{
  width: 4em;
	font-size:4em;
  background-color: #cd1719;
  color: white;
	text-align: center;
	border-style: solid;
	border-width:0.2em;
	border-color:white;

}
#btn_poulet:hover,
#btn_poulet.active{
    background-color: white;
    transition: 0.3s;
    color: #cd1719;
}
#btn_viande{
    width: 8em;
	font-size:4em;
    background-color: #cd1719;
    color: white;
	text-align: center;
	border-style: solid;
	border-width:0.2em;
	border-color:white;

}

#btn_viande:hover,
#btn_viande.active{
    background-color: white;
    transition: 0.3s;
    color: #cd1719;
}

#head h1{
    font-size: 10em;
    color: black;
    font-family: "Simplon";
    margin-left: 0.1em;
	color:white;
	width:4em;
}
#ing{
  padding-left: 10rem;
	position:relative;
	float:left;
	width:50%;
	/*height:4em;	*/
}
#ing h3{
	margin-top:0;
	margin-bottom:1em;
}
#personne{
	position:relative;
	float:left;
	width:50%;
	/*height:4em;*/
}

#personne div{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: space-around;
}
#personne h2{
	font-size:4em;
}

button.btp {
  background-color: white;
  border: 55px;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  margin: 4px 2px ;
  border-radius: 50%;


 }

 button.active {
  background-color: #cd1719;
  border: 5px;
  border-color:white;
  border-style:solid;
  color: #cd1719;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  margin: 4px 2px ;
  border-radius: 50%;
  cursor: pointer;



 }

#poulet{
		display:block;
		float:left;
		width:100%

 }
#viande{
	display:none;
	float:left;
}

#gaucher
 {
  position: relative;
  top: 50px;
  float: left;
  height: 100%;
  width: 50%;
    font-size: 2em;
    padding-left: 10rem;
  padding-right:1em;
  font-family: "Simplon";
  	color:white;
}
ul li{
	list-style:none;
	line-height:2.5em;
}

li::before {
  margin-right: 3em;
}

li.tacos::before {
	content: url(../image/tacos_shells1.png);
}

li.escalope::before {
	content: url(../image/escalope1.png);
}
li.viande::before {
	content: url(../image/viande_hachee1.png);
}
li.avocado::before {
	content: url(../image/avocado1.png);
}
li.salade::before {
	content: url(../image/salade1.png);
}
li.tomate::before {
	content: url(../image/tomate1.png);
}
li.poivronrouge::before {
	content: url(../image/poivron_rouge1.png);
}
li.oignon::before {
	content: url(../image/oignon1.png);
}
li.cheddar::before {
	content: url(../image/cheddar1.png);
}
li.citronvert::before {
	content: url(../image/citron_vert1.png);
}
li.tabasco::before {
	content: url(../image/tabasco_vert1.png);
}
li.epice::before {
	/*content: url(../image/epice1.png);*/
	content: '--- ';
}
li.huile::before {
	content: url(../image/huile1.png);
}
li.sel::before {
	/*content: url(../image/sel1.png);*/
	content: '--- ';
}
li.poivre::before {
	/*content: url(../image/sel1.png);*/
	content: '--- ';
}

.texte1{
	display:block;
}

.texte2,
.texte3,
.texte4,
.texte5{
	display:none;
}


#droiter {
  position: relative;
  float: right;
  height: 100%;
  text-align: justify;
  width: 50%;
  font-size: 2em;
  color: white;
  padding-right:10rem;
  font-family: "Simplon";
}

#droiter img {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	display:block;
  top: 50px;
  float: right;
  height: 100%;
  width: 50%;
    font-size: 2em;
    padding-left:1em;
  padding-right:1em;
  font-family: "Simplon";
    color:white;
}

#gaucher h3,
#droiter h3 {

	color:#71e1a9;


}

#gaucher h4,
#droiter h4 {

padding-bottom: 2em;
}

.Nomargin{
padding : 2em;
margin:0;
/*
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  margin-bottom: 2em;
*/
}


  .mybutton{
  background-color:#cd1719; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
}