@font-face {
    font-family: Hammersmith;
    src: url(typos/hammersmith.ttf);
}
@font-face {
    font-family: Fredoka One;
    src: url(typos/fredoka_one.ttf);
}

body
{
	background-color: #292826;
}
a:hover, a:visited, a
{
	text-decoration: none;
	color: inherit;
}

#container_titre 
{
	position: relative;
	color: white;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 30px;
}

#logo_titre img
{
	width: 100%;
	height: auto;
}

#container_titre p, #container_titre i
{
	font-size: 1.8em;
	color: white;
	text-align: left;
}

h1
{
	font-family: Hammersmith;
	font-size: 3.7em;
}

#menu
{
	position: relative;
	margin-top: 40px;
}

#menu a
{
	text-decoration: none;
	color: white;
}


#menu h2
{
	font-family: Hammersmith;
	font-size: 1.2em;
	padding: 10px;
	border: 2px white solid;
	background-color: none;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
	margin-bottom: 50px;
}

#menu h2:hover
{
	background-color: white;
	color: #292826;
}
#row_decouvre, #row_decouvre2
{
	position: relative;
	text-align: center;
	justify-content: justify;
	padding-top: 20px;
	padding-bottom: 1px;
}

#row_decouvre section, #row_decouvre2 section
{
	height: 100%;
	background-color: #6da79a;
	padding-top: 5px;
}

.irregulier
{
  -webkit-clip-path: polygon(0% 0%, 45% 0%, 38% 100%, 50% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 45% 0%, 38% 100%, 50% 100%, 0% 100%);
}
.irregulier2
{
	position: relative;
	top: -5em;
  -webkit-clip-path: polygon(73% 0%, 100% 0%, 100% 100%, 66% 100%);
  clip-path: polygon(73% 0%, 100% 0%, 100% 100%, 66% 100%);
}

#row_decouvre p
{
	position: relative;
	text-align: left;
	justify-content: left;
	font-family: Hammersmith;
	font-size: 1.5em;
	color: white;
}
#row_decouvre2 i
{
	font-size: 3.8em;
	color: white;
}

#container_cartes
 {
 	position: relative;
 	margin-top: 70px;
 }

.ligne_cartes
{
	padding: 1px;
	height: 25%;
}


.espace_carte
{
	padding-top: 25px;
	padding-bottom: 65px;
}



.img_carte
{
	display: inherit;
	width: 100%;
	height: auto;
	max-height: 300px;
	opacity: 100%; /* Standard compliant browsers */
   -moz-opacity: 100%; /* Firefox and Mozilla browsers */
   -webkit-opacity: 100%; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=100);
	transition: opacity 300ms ease-in-out;
}


.carte
{
	position: relative;
	top: 0%;
	height: 100% !important;
	text-align: center;
	box-shadow: 0px 0px 0px 0px #141413;
	transition: transform 330ms ease-in-out, box-shadow 330ms ease-in-out;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 25px;
	padding-bottom: 25px;
}

.carte:hover
{
	transform: translateY(-20px);
	box-shadow: 0px 0px 25px 5px #141413;
}



.chiffre
{
	position: absolute;
	font-family: Fredoka One;
	font-size: 6.2em;
	color: white;
	top: -0.7em; /*pose problème au niveau responsive :: mettre à 0 */
	z-index: 4;
}

.nom_carte
{
	position: absolute;
	opacity: 0%; /* Standard compliant browsers */
   -moz-opacity: 0%; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0%; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=0);
	font-family: Fredoka One;
	/*font-family: Hammersmith;*/
	font-size: 2.62em;
	/*font-size: 1.5em;*/
	color: white;
	text-align: center;
	top: 20%;
	left: 0%;
	width: 100%;
	z-index: 5;
	transition: opacity 330ms ease-in-out;
}


.description_carte
{
	position: absolute;
	opacity: 0%; /* Standard compliant browsers */
   -moz-opacity: 0%; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0%; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=0);
	font-family: Hammersmith;
	font-size: 1em;
	color: white;
	text-align: center;
	top: 40%;
	left: 0%;
	width: 100%;
	z-index: 5;
	transition: opacity 330ms ease-in-out;
}

.div_bt
{
	position: absolute;
	/*display: none;*/
	opacity: 0%; /* Standard compliant browsers */
   -moz-opacity: 0%; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0%; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=0);
	top: 80%;
	width: 100%;
	height: 15%;
	left: 0%;
	text-align: center;
	justify-content: center;
	z-index: 5;
	transition: opacity 330ms ease-in-out;
}


.button 
{
	position: absolute;
	display: block;
	left: 20%;
  height: 100%;
  width: 60%;
  border-radius:40px;
  background: #fff;
  color: white;
  font-family: Hammersmith;
  font-size:12px;
}



/* GESTION COULEURS CAS PAR CAS */
#carte1
{
	background-color: #dfd7b2;
}
#carte2
{
	background-color: #328f8f;
}
#carte3
{
	background-color: #a7c0a6;
}
#carte4
{
	background-color: #6da79a;
}
#carte5
{
	background-color: #dfd7b2;
}
#carte6
{
	background-color: #328f8f;
}
#carte7
{
	background-color: #a7c0a6;
}
#carte8
{
	background-color: #6da79a;
}

#bt1
{
	background-color: #dfd7b2;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt1:hover
	{
		background-color: white;
		color: #dfd7b2;
	}
#bt2
{
	background-color: #328f8f;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt2:hover
	{
		background-color: white;
		color: #328f8f;
	}
#bt3
{
	background-color: #a7c0a6;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt3:hover
	{
		background-color: white;
		color: #a7c0a6;
	}
#bt4
{
	background-color: #6da79a;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt4:hover
	{
		background-color: white;
		color: #6da79a;
	}
#bt5
{
	background-color: #dfd7b2;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt5:hover
	{
		background-color: white;
		color: #dfd7b2;
	}
#bt6
{
	background-color: #328f8f;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt6:hover
	{
		background-color: white;
		color: #328f8f;
	}
#bt7
{
	background-color: #a7c0a6;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt7:hover
	{
		background-color: white;
		color: #a7c0a6;
	}
#bt8
{
	background-color: #6da79a;
	border: 2px white solid;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt8:hover
	{
		background-color: white;
		color: #6da79a;
	}

button:focus {
    outline: 0 !important;
}



/* gestion logo minno */
#foot
{
	text-align: center;
	margin-top: 30px;
}

#minno
{
	width: 150px;
	min-width: 150px;
	margin-top: 20px;
	margin-bottom: 20px;
	height: auto;
	filter: brightness(0%) invert(100%);
  	-webkit-filter: brightness(0%) invert(100%);
}

/* POUR SMARTPHONES */

@media only screen 
  and (max-device-width: 812px) 
{
	#menu
{
	position: relative;
	top: 0em;
	margin-bottom: 60px;
}
#menu h2
{
	font-size: 1.8em;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 5px;
	padding-right: 5px;
}
.espace_carte
{
	padding-top: 25px;
	padding-bottom: 65px;
	text-align: center;
}
.carte
{
	margin-bottom: 60px;
}

	.img_carte
{
	width: 90%;
	height: auto;
	max-height: 1200px;
	opacity: 100%; /* Standard compliant browsers */
   -moz-opacity: 100%; /* Firefox and Mozilla browsers */
   -webkit-opacity: 100%; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=100);
	transition: opacity 300ms ease-in-out;
}
.nom_carte
{

	font-size: 4.1em;
}
.div_bt
{
	position: absolute;
	top: 70%;
	width: 100%;
	height: 20%;
	left: 0%;
	text-align: center;
}


.button 
{
	position: relative;
	display: block;
  height: 100%;
  width: 60%;
  font-size:32px;
}
.chiffre
{
	font-size: 10em;
}

#foot
{
	margin-top: 50px;
}

#minno
{
	width: 250px;
	min-width: 250px;
	margin-bottom: 50px;
	margin-top: 0px;
}

}