@font-face
{
	font-family: "IBM";
	src: url('IBMPlexSans-Bold.ttf');
}

@font-face
{
	font-family: "PT Sans";
	src: url('PTSans-Regular.ttf');
}

a
{
	text-decoration: none;
	font-family: PT Sans;
	color: white;
}

input
{
	font-family: PT Sans;
}

body
{
	position: absolute;
	width: auto;
	height: 90%;
	background-color: #009688;
}

p
{
	font-family: PT Sans;
}

#fond
{
	position: relative;
	display: hidden	;
	left: 0%;
	top: 0%;
	width: 10%;
	height: 100%;
	z-index: 0;
	
	opacity: 0; /* Standard compliant browsers */
   -moz-opacity: 0; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=0);	
}

#div_home
{
	position: absolute;
	z-index: 2;
	width: auto;
	height: auto;

	/*background-color: #F16700;*/
	padding: 0.2%;
	top: 2%;
	left: 87%;

	font-family: IBM;
	color: white;
	font-size: 1.2em;	
	text-align: center;
}
#div_home p
{
	background-color: #F16700;
	/*padding: 0.8%;*/
}

#div_home i
{
	/*background-color: #F16700;*/
	
	width: auto;
	color: white;
	font-size: 1.2em;
	text-align: center;
}



#titre
{
	position: absolute;
	left: 0%;
	top: 0%;
	z-index: 2;
	width: 100%;
	height: auto;
}

#titre h1
{
	font-family: IBM;
	color: white;
	font-size: 5.7em;
	text-align: center;
}




#div_btn
{
	position: absolute;
	left: 0%;
	top: 40%;
	z-index: 3;
	width: 100%;
	height: 30%;
	text-align: center;
	/*background-color: blue;*/
}


#btn
{
	position: relative;
	width: 50%;
	height: 100%;
	left: 24%;
	top: -5%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:  20px;
	padding-top:  20px;
	background-color: #F16700;
	
}


#lance_jeu
{
	position: relative;
	font-family: IBM;
	color: white;
	font-size: 1.5em;
	top: -10%;
	text-align: center;
	transition: transform 330ms ease-in-out;
}

#lance_jeu:hover
{
	transform: translateY(-12px);
}

#texte_prez
{
	justify-content: justify;
	text-align: justify;
	font-size: 1.05em;
}


/* FORMULAIRE JEU */
#connexion
{
	position: absolute;
	left: 0%;
	top: 30%;
	z-index: 3;
	width: 100%;
	height: 20%;
}

.input_class
{
	position: relative;
	left: 42.5%;
	width: 15%;
	font-family: PT Sans;
	color: white;
}

h2
{
	font-size: 1em;
}

#input_user
{

}

#div_submit
{
	position: relative;
	width: 20%;
	left: 46%;
	font-family: PT Sans;
}




/* GESTION DES TEXTES BLABLA */
/*#bravo
{
	position: absolute;
	left: 0%;
	top: 10%;
	z-index: 2;
	width: 100%;
	height: auto;
}

#bravo h1
{
	position: relative;
	top: -60%;
	font-family: IBM;
	color: white;
	font-size: 2.7em;
	text-align: center;
}*/

#div_txt_bravo, #div_txt_perdu
{
	position: absolute;
	top: 32%;
	left: 0%;
	width: 100%;

}

#pre_bravo, #txt_perdu
{
	position: relative;
	/*top: -10%;*/
	left: 24%;
	width: 60%;
	justify-content: justify;
	text-align: justify;
	font-family: PT Sans;
	color: white;
	font-size: 1.05em;
}

#txt_bravo
{
	position: relative;
	justify-content: justify;
	text-align: justify;
	font-family: PT Sans;
	color: white;
	font-size: 1.05em;
	background-color: #F16700;

	width: 50%;
	left: 24%;
	top: -5%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom:  20px;
	padding-top:  10px;
	
}



/* GESTION DES LOGOS */
#logos
{
	position: absolute;
	z-index: 3;
	width: 50%;
	left: 100%;
	/*border: 2px black solid;*/
	top: 95%;
	left: 0%;

  	filter: brightness(0%) invert(100%);
  	-webkit-filter: brightness(0%) invert(100%); /* Safari 6.0 - 9.0 */
  	text-align: left;
  	
  	vertical-align: middle;
}

#minno
{
	height: 40px;
	width: auto;
	padding-left: 15px;
	padding-right: 30px;
}
#mines
{
	height: 60px;
	width: auto;
	padding-right: 30px;
}
#dauphine
{
	height: 30px;
	width: auto;
}


/* GESTION DES COINS: BLABLA MASTER & CHRONO */
 
#master1 h2, #histoire h2
{
	font-family: IBM;
	color: white;
	font-size: 1.2em;
}
#chrono1 h2, #chrono2 h2
{
	font-family: IBM;
	color: white;
	font-size: 2em;	
}



#m1
{
	position: absolute;
	z-index: 1;
	top: 49%;
	left: 2%;
	transform-origin: 0 0;
	transform: rotate(-90deg);
}
#m2
{
	position: absolute;
	z-index: 1;
	top: 2%;
	left: 5%;
}
#h1
{
	position: absolute;
	z-index: 1;
	top: 95%;
	left: 88%;
}
#h2
{
	position: absolute;
	z-index: 1;
	top: 91%;
	left: 95%;
	transform-origin: 0 0;
	transform: rotate(270deg);
}
#c11
{
	position: absolute;
	background-color: #F16700;
	padding: 0.2%;
	z-index: 1;
	top: 2%;
	left: 87%;
}
#c12
{
	position: absolute;
	background-color: #F16700;
	padding: 0.2%;
	z-index: 1;
	top: 12%;
	left: 89%;
}
#c21
{
	position: absolute;
	background-color: #F16700;
	padding: 0.2%;
	z-index: 1;
	top: 95%;
	left: 2%;
}
#c22
{
	position: absolute;
	background-color: #F16700;
	padding: 0.2%;
	z-index: 1;
	top: 88%;
	left: 3%;
}