@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;
}

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

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

#container_titre p, #container_titre i
{
	font-size: 1.8em;
	color: white;
	text-align: left;
	padding-top: 15px;
	padding-left: 10px;
}

h1
{
	font-family: Hammersmith;
	font-size: 3.7em;
	padding-top: 15px;
}

a:hover, a:visited, a
{
	text-decoration: none;
	color: inherit;
}


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

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


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

.carte
{
	position: relative;
	top: 0%;
	height: 300px;
	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: 50px;
}

.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;
	font-family: Fredoka One;
	font-size: 2.62em;
	color: white;
	text-align: center;
	top: 20%;
	left: 0%;
	width: 100%;
	z-index: 5;
}

.div_bt
{
	position: absolute;
	top: 80%;
	width: 100%;
	height: 15%;
	left: 0%;
	text-align: center;
	justify-content: center;
	padding: 10px;
	margin-bottom: 20px;
	z-index: 5;
	transition: opacity 330ms ease-in-out;
}

#carte1
{
	background-color: #dfd7b2;
}
#carte2
{
	background-color: #328f8f;
}
#carte3
{
	background-color: #a7c0a6;
}
#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;
	}
.button 
{
	position: absolute;
	display: block;
	left: 20%;
  height: 100%;
  width: 60%;
  border-radius:40px;
  background: #fff;
  color: white;
  font-family: Hammersmith;
  font-size:1.2em;
  margin-bottom: 20px;
}
button:focus {
    outline: 0 !important;
} 
/* Partie informations */
@media screen and (min-width: 1024px) 
{
#container_infos
{
	color: white;
	font-family: Hammersmith;
	font-size: 1.2em;
}
}


@media only screen 
  and (max-device-width: 812px) 
{
	#container_infos
{
	color: white;
	font-family: Hammersmith;
	font-size: 2em;
	text-align: center;
}

	#container_infos p
	{
		margin-bottom: 40px;
	}
	.espace_carte
{
	padding-top: 25px;
	padding-bottom: 100px;
}
.nom_carte
{
	font-size: 1.5em !important;
}
.chiffre
{
	font-size: 3.5em !important;
}
}


#texte1
{
	text-align: center;
}

input
{
	font-family: inherit;
	background: transparent;
	color: white;
	outline: none;
	outline-width: 0; 
	border: 0px;
	border-bottom: 1px white solid;
	/*transition: border-bottom 300ms ease-in-out;*/
	text-align: center;

}
input:focus
{
}


.red
{
	color: red;
	font-size: 0.8em;
}

#bt_envoyer
{
	background-color: #292826;
	color: white;
	border: 2px white solid;
	text-align: center;
	padding: 10px;
	margin-bottom: 40px;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt_connexion
{
	background-color: white;
	color: #292826;
	border: 2px white solid;
	text-align: center;
	padding: 10px;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

#bt_envoyer:hover
{
	background-color: white;
	color: #292826;
}
#bt_connexion:hover
{
	background-color: #292826;
	color: white;
}
button
{
	 background: transparent;
	 border: 0px;
}