@font-face {
    font-family: Permanent Marker;
    src: url(fonts/PermanentMarker-Regular.ttf);
}
@font-face {
    font-family: Fira Sans;
    src: url(fonts/FiraSansCondensed-Regular.ttf);
}
@font-face {
    font-family: Bebas Neue;
    src: url(fonts/BebasNeue-Regular.ttf);
}
@font-face {
    font-family: run;
    src: url(fonts/run.ttf);
}


@media only screen /* TELEPHONE */
  and (max-device-width: 812px) 
  {
  	#titre_page
{
	margin-top: 3%;
	text-align: center;
	font-family: Bebas Neue;
	color: white;
}

#titre_pageH2
{
	font-size: 4em;
}

.schema_top
{
	margin-bottom: 8%;
	margin-top: 5%;
	width: auto;
	height: 5em;
}

.clic
{
	font-family: Permanent Marker;
	font-size: 2em;
	color: black;
}

#test_autres p
{
	position: relative;
	font-family: Permanent Marker;
	font-size: 10em;
	color: white;
	text-align: center;
	top: 35%;
}

#docu_idee1 .recto,#docu_idee2 .recto,#docu_idee6 .recto 
{
	margin-top: 30%;
	margin-bottom: -40%;
	font-size: 0em;
	top: 30%;
}

#docu_idee3 .recto
{
	margin-top: 70%;
	margin-bottom: -95%;
	font-size: 0em;
	top: 30%;
}

#docu_idee4 .recto
{
	margin-top: 35%;
	margin-bottom: -55%;
	font-size: 0em;
	top: 30%;
}

#docu_idee5 .recto
{
	margin-top: 20%;
	margin-bottom: -30%;
	font-size: 0em;
	top: 30%;
}

#docu_idee6 .recto
{
	margin-top: 20%;
	margin-bottom: -40%;
	font-size: 0em;
	top: 30%;
}

.recto
{
	position: relative;
	z-index: 10;
	display: inherit;	
	opacity: 100%;
	color: white;
	font-family: Bebas Neue;
}

.case
{
	margin-top: 25%;
	padding-bottom: 10%;
	padding-top: 20%;
	background-color: blue;
	height: 100%;
}

  }

  @media screen  /* ORDINATEUR */
  and (min-device-width: 800px) 
  {
#titre_page
{
	margin-top: 5%;
	text-align: center;
	font-family: Bebas Neue;
	color: white;
}

#titre_pageH2
{
	font-size: 5em;
}

.schema_top
{
	margin-bottom: 30%;
	margin-top: 20%;
	width: auto;
	height: 7em;
}

.clic
{
	font-family: Permanent Marker;
	font-size: 4em;
	color: black;
}



#texte_hexa
{
	font-size: 10em;
}

#docu_idee1 .recto,#docu_idee2 .recto,#docu_idee6 .recto 
{
	margin-top: 30%;
	margin-bottom: -40%;
	font-size: 2em;
	top: 30%;
}

#docu_idee3 .recto
{
	margin-top: 70%;
	margin-bottom: -95%;
	font-size: 2em;
	top: 30%;
}

#docu_idee4 .recto
{
	margin-top: 35%;
	margin-bottom: -55%;
	font-size: 2em;
	top: 30%;
}

#docu_idee5 .recto
{
	margin-top: 20%;
	margin-bottom: -30%;
	font-size: 2em;
	top: 30%;
}

#docu_idee6 .recto
{
	margin-top: 20%;
	margin-bottom: -40%;
	font-size: 2em;
	top: 30%;
}

.recto
{
	position: relative;
	z-index: 10;
	display: inherit;	
	opacity: 100%;
	color: white;
	font-family: Bebas Neue;
}

.case
{
	background-color: blue;
	height: 100%;
}

  }



body, label
{
	font-family: Fira Sans;
}

body
{
	height: auto;
}

a
{
	color: black;
}
a:hover
{
	color: #111111;
}
a:link, a:visited
{
	text-decoration: none;
	color: #111111;
}

#container_background
{
	width: 100%;
	height: 100%;
}

#background
{
	width: 100%;
	height: 100%;
	background: rgb(244,248,44);
}

#presentation
{
	font-family: Fira Sans;
	color: white;
	margin-top: 1%;
}


/* id titre en media only*/ 

/* classe schema_top en media only */

#titre_go
{
	margin-bottom: 3.9%;
}


.centrer
{
	text-align: center;
}

#container_nav
{
	display: none;
	padding-top: 17%;
	padding-bottom: 25%;
	margin-top: 20%;
}

#container_nav a:hover
{
	color: rgb(244,248,44);
}
.suite a:hover
{
	color: rgb(244,248,44);
}

#try, #construction, #documentation
{
	display: none;
	color: #111111;
	padding-top: 7%;
	padding-bottom: 10%;
}

.divnav
{
	margin-bottom: 3%;
}

.fas
{
	font-size: 1.5em;
}

.margin_top
{
	margin-top: 4%;
}
.margin_top2
{
	margin-top: 2%;
}
.margin_top_bc
{
	margin-top: 14%;
}
.margin_top_bc_bc
{
	margin-top: 22%;
}

.fond_bleu
{
	background-color: rgb(40,114,212);
	padding: 4%;
}
.cadre_bleu
{
	border: 5px rgb(40,114,212) solid;
	padding: 4%;
}

h2
{
	color: white;
	font-family: Bebas Neue;
	font-size: 3em;
}


.try_text
{
	font-size: 1.25em;
}
#try_trait:hover, #try_trait2:hover, #viens_voir_display a:hover, .chevron:hover
{
	color: rgb(244,248,44);
}

#try .fas
{
	font-size: 2.1em;
}

.chevron
{
	font-size: 4em;
}

input
{
	position: relative;
	left: 25%;
}

#viens_voir_display
{
	display: none;
}


/* DISPLAY */

#display
{
	display: none;
	margin-top: 10%;
}

#display p, #autres p, #try p, #documentation p
{
	font-size: 1.2em;
}

.bloc
{
	height: 50px;
	background-color: black;
}

#anim_F_caché
{
	margin-top: 40%;
}

#bloc_animation1
{
	background-color: black;
	height: 50px;
	margin-top: 3%;
}
#bloc_animation2
{
	background-color: black;
	height: 50px;
	margin-top: 3%;
}

#cercles1, #cercles2
{
	margin-top: 13%;
	margin-bottom: 10%;
}

.cercle
{
	position: absolute;
	border-radius: 50%;
	left: 0%;
	top: 0%;
	height: 5px;
	width: 5px;
}

#cercleF1,#cercleF2
{
	padding-top: 0%;
	padding-bottom: 0%;
}


#atelier_do .fas, #atelier_do i
{
	font-size: 3em;
	margin-top: 20%;
}

/* GET INSPIRED */
#autres
{
	display: none;
	margin-top: 20%;
}

/* classe clic dans media only*/

.clic p
{
	display: none;
}

#test_autres
{
	height: 180px;
	background-color: white;
}
#test_autres p
{
	position: relative;
	font-family: Permanent Marker;
	font-size: 3em;
	color: white;
	text-align: center;
	top: 30%;
}
/* id test_autres en media only */


form, input
{
	text-align: center;
	justify-content: center;
}


.texte_construction
{
	font-size: 1.25em;
	text-align: justify;
  text-justify: inter-word;
  margin-top: 3%;
}


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



/* DOCUMENTATION */ 

/* GESTION DES CLASSES RECTO en media only*/

.verso
{
	position: relative;
	top: 0%;
	z-index: 2;
	opacity: 0%;
}

#documentation
{
	width: 100%;
}

/* gestion de la classe case en media only */

.photo_docu
{
	width: 100%;
	height: auto;
	max-height: 100%;
}


#docu_idee2 .verso
{
	text-align: justify;
	font-size: 1.2em;
	padding: 30px;
	color: black;
	background-color: white;
}
#docu_idee3 .verso
{
	text-align: justify;
	font-size: 1.3em;
	padding: 30px;
	color: black;
	background-color: white;
}