/* Polices de caractères utilisées */

@font-face
{
    font-family: "Brandon Grotesque";
	src:
        url("./fonts/BrandonGrotesque-Regular.woff2") format("woff2"),
        url("./fonts/BrandonGrotesque-Regular.woff") format("woff"),
        url("./fonts/BrandonGrotesque-Regular.ttf") format("truetype");
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */

/* mise en page commune */

/* réinitialiser les valeurs à 0 */
*
	{
		margin : 0px ;
		padding : 0px ;
	}

body
	{
		background-color : #196b79 ; /* Couleur du fond de page */
		background-size : 100% ; /* Taille du fond de page */
		background-repeat : no-repeat ; /* Image unique */
		background-attachment: fixed ; /* Image fixe */
		font-size : 0.8vw ;
	}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* Paramètres globaux de la page */
	
.fondENTETE
	{
		position : fixed ;
		width : 100% ;
		height : 14% ;
		background-color : #196b79 ;
		border-top : 0.4em solid #a8992d ;
		border-bottom : 0.4em solid #a8992d ;
		text-align : center ;
		display : table ;
	}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* logo de la box */

.logo_box
	{
		position : absolute ;
		top : 0% ;
		left : 15% ;
		height : 100% ;
		cursor : default ;
		-webkit-animation : mouvement 3s ; /* définition de l'animation sur les différentes versions de navigateurs */
		   -moz-animation : mouvement 3s ;
		        animation : mouvement 3s ;
	}

@-webkit-keyframes mouvement /* paramètres de l'animation "mouvement" sur les différentes version de navigateurs */
	{
	  0% { left: 0%; }
	  100% { left: 15%; }
	}
@-moz-keyframes mouvement
	{
	  0% { left: 0%; }
	  100% { left: 15%; }
	}
@keyframes mouvement
	{
	  0% { left: 0%; }
	  100% { left: 15%; }
	}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* cache pour masquer l'apparition du logo */

.cache_H-G
	{
		position : absolute ;
		width : 15% ;
		height : 100% ;
		top : 0%;
		left : -0.5em ;
		background: -webkit-linear-gradient(to right, #196b79 80%, transparent);
		background:    -moz-linear-gradient(to right, #196b79 80%, transparent);
		background:         linear-gradient(to right, #196b79 80%, transparent);
	}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* enseigne de la box */

.enseigne_texte
	{
		font-family : "Brandon Grotesque" ;
		font-size : 4.2em ;
		color : #fcb400 ;
		display : table-cell ;
		vertical-align : middle ;
		-webkit-animation-name : apparition_enseigne;
		   -moz-animation-name : apparition_enseigne;
		        animation-name : apparition_enseigne;
		-webkit-animation-iteration-count : 1;
		   -moz-animation-iteration-count : 1;
		        animation-iteration-count : 1;
		-webkit-animation-timing-function : ease-in;
		   -moz-animation-timing-function : ease-in;
		        animation-timing-function : ease-in;
		-webkit-animation-duration : 4s;
		   -moz-animation-duration : 4s;
		        animation-duration : 4s;
	}

@-webkit-keyframes apparition_enseigne
{
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-moz-keyframes apparition_enseigne
{
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes apparition_enseigne
{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* pied de page */

#footerPG1 /* accueil */
	{
		position : absolute ;
		top : 445% ;
		width : 100% ;
		height : 15% ;
		font-family : "Brandon Grotesque" ;
		font-size : 1.2em ;
		color : white ;
	}

#footerPG2 /* planning */
	{
		position : absolute ;
		top : 235% ;
		width : 100% ;
		height : 15% ;
		font-family : "Brandon Grotesque" ;
		font-size : 1.2em ;
		color : white ;
	}

#footerPG3 /* coachs */
	{
		position : absolute ;
		top : 170% ;
		width : 100% ;
		height : 15% ;
		font-family : "Brandon Grotesque" ;
		font-size : 1.2em ;
		color : white ;
	}

#footerPG4 /* tarifs */
	{
		position : absolute ;
		top : 115% ;
		width : 100% ;
		height : 15% ;
		font-family : "Brandon Grotesque" ;
		font-size : 1.2em ;
		color : white ;
	}

#footerPG5 /* contact */
	{
		position : absolute ;
		top : 142% ;
		width : 100% ;
		height : 15% ;
		font-family : "Brandon Grotesque" ;
		font-size : 1.2em ;
		color : white ;
	}
	
#mailPDP
	{
		position : absolute ;
		top : 10% ;
		width : 100% ;
		text-align : center ;
	}
	
#nomboxPDP
	{
		position : absolute ;
		bottom : 15% ;
		left : 2% ;
	}
	
#datecreaboxPDP
	{
		position : absolute ;
		bottom : 15% ;
		right : 2% ;
	}
	
.boitelogos
	{
		position : absolute ;
		width : 100% ;
		height : 28% ;
		bottom : 5% ;
		text-align : center ;
	}
	
.boitelogos img
	{
		height : 100% ;
	}
	
#grandqrcodeinstagram
	{
		position : absolute ;
		left : 10% ;
		bottom : 0% ;
		display : none ;
	}
	
#grandqrcodefacebook
	{
		position : absolute ;
		right : 10% ;
		bottom : 0% ;
		display : none ;
	}