/* MISE EN PAGE DES ÉLÉMENTS DE LA PAGE D'ACCUEIL */

/* PARTIE 1 ------------------------------------------------------------------------------------------------------------------------------------------- */
	
/* images défilantes du haut de la page accueil */
:root /* déclaration de variables valables pour toutes les images défilantes du haut de la page accueil */
	{
		--position-image : absolute ;
		--larg_img : 100% ;
		--pos_top_img : 15.3% ;
		--pos_left_img : 0% ;
		--opacity_img : 0 ;
	}

.imgDEFIL1H /* 1ère image */
	{
		position : absolute ;
		width : 100% ;
		top : 15.3% ;
		left : 0% ;
		opacity : 0 ;
		-webkit-animation : animDEFIL1H 21s infinite ;
		   -moz-animation : animDEFIL1H 21s infinite ;
		        animation : animDEFIL1H 21s infinite ;
		-webkit-animation-delay : -4s ;
		   -moz-animation-delay : -4s ;
		        animation-delay : -4s ;
	}
	
.imgDEFIL2H /* 2ème image */
	{
		position : absolute ;
		width : 100% ;
		top : 15.3% ;
		left : 0% ;
		opacity : 0 ;
		-webkit-animation : animDEFIL2H 21s infinite ;
		   -moz-animation : animDEFIL2H 21s infinite ;
		        animation : animDEFIL2H 21s infinite ;
		-webkit-animation-delay : -4s ;
		   -moz-animation-delay : -4s ;
		        animation-delay : -4s ;
	}
	
.imgDEFIL3H /* 3ème image */
	{
		position : absolute ;
		width : 100% ;
		top : 15.3% ;
		left : 0% ;
		opacity : 0 ;
		-webkit-animation : animDEFIL3H 21s infinite ;
		   -moz-animation : animDEFIL3H 21s infinite ;
		        animation : animDEFIL3H 21s infinite ;
		-webkit-animation-delay : -4s ;
		   -moz-animation-delay : -4s ;
		        animation-delay : -4s ;
	}
	
@-webkit-keyframes animDEFIL1H /* animation 1ère image */
	{
		0% { opacity : 0 ; }
		33% { opacity : 1 ; }
		66% { opacity : 1 ; }
		100% { opacity : 0 ; }
	}
	
@-moz-keyframes animDEFIL1H
	{
		0% { opacity : 0 ; }
		33% { opacity : 1 ; }
		66% { opacity : 1 ; }
		100% { opacity : 0 ; }
	}
	
@keyframes animDEFIL1H
	{
		0% { opacity : 0 ; }
		33% { opacity : 1 ; }
		66% { opacity : 1 ; }
		100% { opacity : 0 ; }
	}
	
@-webkit-keyframes animDEFIL2H /* animation 2ème image */
	{
		0% { opacity : 0 ; }
		33% { opacity : 0 ; }
		66% { opacity : 1 ; }
		100% { opacity : 1 ; }
	}
	
@-moz-keyframes animDEFIL2H
	{
		0% { opacity : 0 ; }
		33% { opacity : 0 ; }
		66% { opacity : 1 ; }
		100% { opacity : 1 ; }
	}
	
@keyframes animDEFIL2H
	{
		0% { opacity : 0 ; }
		33% { opacity : 0 ; }
		66% { opacity : 1 ; }
		100% { opacity : 1 ; }
	}
	
@-webkit-keyframes animDEFIL3H /* animation 3ème image */
	{
		0% { opacity : 1 ; }
		33% { opacity : 0 ; }
		66% { opacity : 0 ; }
		100% { opacity : 1 ; }
	}
	
@-moz-keyframes animDEFIL3H
	{
		0% { opacity : 1 ; }
		33% { opacity : 0 ; }
		66% { opacity : 0 ; }
		100% { opacity : 1 ; }
	}
	
@keyframes animDEFIL3H
	{
		0% { opacity : 1 ; }
		33% { opacity : 0 ; }
		66% { opacity : 0 ; }
		100% { opacity : 1 ; }
	}
	
/* texte central des images du haut de la page accueil */
.text1H
	{
		position : absolute ;
		width : 100% ;
		height : auto ;
		top : 15.3% ;
		left : 0% ;
		display: flex ;
		align-items: center ;
		justify-content: center ;
		-webkit-animation-name : anim_text1H ;
		   -moz-animation-name : anim_text1H ;
		        animation-name : anim_text1H ;
		-webkit-animation-iteration-count : infinite ;
		   -moz-animation-iteration-count : infinite ;
		        animation-iteration-count : infinite ;
		-webkit-animation-duration : 7s ;
		   -moz-animation-duration : 7s ;
		        animation-duration : 7s ;
		-webkit-animation-delay : -2s ;
		   -moz-animation-delay : -2s ;
		        animation-delay : -2s ;
	}
	
.text1H img
	{
		width : 100% ;
		visibility : hidden ;
	}
	
.blocTEXT1H
	{
		position : absolute ;
		width : 100% ;
		height : 100% ;
		top : 0% ;
		left : 0% ;
		display: flex ;
		align-items: center ;
		justify-content: center ;
	}
	
.blocTEXT1H p
	{
		font-family : "Brandon Grotesque" ;
		font-size : 3.5em ;
		color : white ;
	}
	
@-webkit-keyframes anim_text1H
	{
		0% { opacity : 0 ; }
		20% { opacity : 0 ; }
		40% { opacity : 1 ; }
		70% { opacity : 1 ; }
		100% { opacity : 0 ; }
	}
	
@-moz-keyframes anim_text1H
	{
		0% { opacity : 0 ; }
		20% { opacity : 0 ; }
		40% { opacity : 1 ; }
		70% { opacity : 1 ; }
		100% { opacity : 0 ; }
	}
	
@keyframes anim_text1H
	{
		0% { opacity : 0 ; }
		20% { opacity : 0 ; }
		40% { opacity : 1 ; }
		70% { opacity : 1 ; }
		100% { opacity : 0 ; }
	}
	
/* texte en haut à droite des images du haut de la page accueil */
.text2H
	{
		position : absolute ;
		width : 100% ;
		height : auto ;
		top : 15.3% ;
		left : 0% ;
		display: flex ;
		align-items: center ;
		justify-content: center ;
	}
	
.text2H img
	{
		width : 100% ;
		visibility : hidden ;
	}
	
.blocTEXT2H
	{
		background-color : white ;
		position : absolute ;
		width : 25% ;
		height : 8% ;
		top : 10% ;
		right : 2% ;
		display: flex ;
		align-items: center ;
		justify-content: center ;
		-webkit-animation-name : anim_text2H ;
		   -moz-animation-name : anim_text2H ;
		        animation-name : anim_text2H ;
		-webkit-animation-iteration-count : infinite ;
		   -moz-animation-iteration-count : infinite ;
		        animation-iteration-count : infinite ;
		-webkit-animation-duration : 7s ;
		   -moz-animation-duration : 7s ;
		        animation-duration : 7s ;
		-webkit-animation-delay : -2s ;
		   -moz-animation-delay : -2s ;
		        animation-delay : -2s ;
	}
	
.text2H p
	{
		font-family : "Brandon Grotesque" ;
		font-size : 1.4em ;
		color : #196b79 ;
		cursor : pointer ;
	}
	
@-webkit-keyframes anim_text2H
	{
		0% { right : -0% ; opacity : 0 ; }
		20% { right : -0% ; opacity : 0 ; }
		40% { right : 5% ; opacity : 1 ; }
		70% { right : 5% ; opacity : 1 ; }
		100% { right : -0% ; opacity : 0 ; }
	}
	
@-moz-keyframes anim_text2H
	{
		0% { right : -0% ; opacity : 0 ; }
		20% { right : -0% ; opacity : 0 ; }
		40% { right : 5% ; opacity : 1 ; }
		70% { right : 5% ; opacity : 1 ; }
		100% { right : -0% ; opacity : 0 ; }
	}
	
@keyframes anim_text2H
	{
		0% { right : -0% ; opacity : 0 ; }
		20% { right : -0% ; opacity : 0 ; }
		40% { right : 5% ; opacity : 1 ; }
		70% { right : 5% ; opacity : 1 ; }
		100% { right : -0% ; opacity : 0 ; }
	}
	
/* PARTIE 2 ------------------------------------------------------------------------------------------------------------------------------------------- */

.partie2
	{
		position : absolute ;
		width : 100% ;
		height : 104% ;
		top : 67% ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* texte "le crossfit, qu'est-ce que c'est ? */
	
.question1PG1
	{
		position : absolute ;
		width : 100% ;
		top : 11% ;
		left : 0% ;
		text-align : center ;
		font-family : "Brandon Grotesque" ;
		font-size : 3.5em ;
		color : white ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* conteneur concernant les explications sur le crossfit */

.conteneurCKOI
	{
		position : absolute ;
		width : 100% ;
		height : 67% ;
		bottom : 0% ;
		left : 0% ;
		background-color : white ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* section PEDAGOGIE */

.PEDAGOGIE
	{
		position : absolute ;
		width : 20% ;
		height : 100% ;
		top : 0% ;
		left : 13% ;
	}

#pedagogie_img
	{
		position : absolute ;
		width : 100% ;
		top : 5% ;
		left : 0% ;
		display: flex;
		justify-content: center;
	}

.PEDAGOGIE img
	{
		width : 50% ;
	}
	
.pedagogie_text
	{
		position : absolute ;
		width : 100% ;
		top : 50% ;
		left : 0% ;
	}

.pedagogie_text1
	{
		font-family : "Brandon Grotesque" ;
		font-size : 3em ;
		color : #196b79 ;
		text-align : center ;
	}

.pedagogie_text2
	{
		font-family : "Brandon Grotesque" ;
		font-size : 1.5em ;
		line-height : 1.05em ;
		width : 80% ;
		margin-left : 10% ;
		color : #196b79 ;
		text-align : justify ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* section ADAPTATION */

.ADAPTATION
	{
		position : absolute ;
		width : 20% ;
		height : 100% ;
		top : 0% ;
		left : 40% ;
	}
	
#adaptation_img
	{
		position : absolute ;
		width : 100% ;
		bottom : 5% ;
		left : 0% ;
		display: flex;
		justify-content: center;
	}
	
.ADAPTATION img
	{
		width : 50% ;
	}
	
.adaptation_text
	{
		position : absolute ;
		width : 100% ;
		bottom : 52% ;
		left : 0% ;
	}

.adaptation_text1
	{
		font-family : "Brandon Grotesque" ;
		font-size : 3em ;
		color : #196b79 ;
		text-align : center ;
	}
	
.adaptation_text2
	{
		font-family : "Brandon Grotesque" ;
		font-size : 1.5em ;
		line-height : 1.05em ;
		width : 80% ;
		margin-left : 10% ;
		color : #196b79 ;
		text-align : justify ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* section BIENVEILLANCE */

.BIENVEILLANCE
	{
		position : absolute ;
		width : 20% ;
		height : 100% ;
		top : 0% ;
		left : 67% ;
	}

#bienveillance_img
	{
		position : absolute ;
		width : 100% ;
		top : 5% ;
		left : 0% ;
		display: flex;
		justify-content: center;
	}
	
.BIENVEILLANCE img
	{
		width : 50% ;
	}
	
.bienveillance_text
	{
		position : absolute ;
		width : 100% ;
		top : 50% ;
		left : 0% ;
	}
	
.bienveillance_text1
	{
		font-family : "Brandon Grotesque" ;
		font-size : 3em ;
		color : #196b79 ;
		text-align : center ;
	}
	
.bienveillance_text2
	{
		font-family : "Brandon Grotesque" ;
		font-size : 1.5em ;
		line-height : 1.05em ;
		width : 80% ;
		margin-left : 10% ;
		color : #196b79 ;
		text-align : justify ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* espace contenant le texte "LA BOX" */

.question2PG1
	{
		position : absolute ;
		width : 100% ;
		height : 30% ;
		top : 170% ;
		text-align : center ;
		display : table ;
	}
	
.question2PG1 p
	{
		font-family : "Brandon Grotesque" ;
		font-size : 3.5em ;
		display : table-cell ;
		vertical-align : middle ;
		color : white ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* espace "LA BOX" images et textes */

.conteneurLABOX
	{
		position : absolute ;
		width : 100% ;
		height : 117.4%;
		top : 200% ;
		background-color : white ;
		font-family : "Brandon Grotesque" ;
		color : #2a7c6f ;
	}
	
.img1BOX
	{
		position : absolute ;
		width : 50% ;
		height : 50% ;
		top : 0% ;
		left : 0% ;
	}
	
.img1BOX img
	{
		width : 100% ;
		height : 100% ;
	}
	
.img2BOX
	{
		position : absolute ;
		width : 50% ;
		height : 50% ;
		bottom : 0% ;
		right : 0% ;
	}
	
.img2BOX img
	{
		width : 100% ;
		height : 100% ;
	}
	
.text1BOX
	{
		position : absolute ;
		width : 50% ;
		height : 50% ;
		top : 0% ;
		right : 0% ;
	}
	
.boiteT1BOX
	{
		position : relative ;
		width : 100% ;
		height : 100% ;
		top : 0% ;
		left : 0% ;
		padding : 4% ;
		display : table ;
		box-sizing : border-box ;
	}
	
#T1-BOX
	{
		display : table-cell ;
		vertical-align : middle ;
	}
	
.T1-1BOX
	{
		font-size : 2em ;
		font-weight : bold ;
		box-sizing : border-box ;
		text-align : center ;
	}
	
.T1-2BOX
	{
		font-size : 1.5em ;
		font-weight : bold ;
		line-height : 250% ;
		box-sizing : border-box ;
		text-align : center ;
	}
	
.T1-3BOX
	{
		font-size : 1.5em ;
		box-sizing : border-box ;
		text-align : justify ;
	}
	
.text2BOX
	{
		position : absolute ;
		width : 50% ;
		height : 50% ;
		bottom : 0% ;
		left : 0% ;
	}
	
.boiteT2BOX
	{
		position : relative ;
		width : 100% ;
		height : 100% ;
		top : 0% ;
		left : 0% ;
		padding : 4% ;
		display : table ;
		box-sizing : border-box ;
	}
	
#T2-BOX
	{
		display : table-cell ;
		vertical-align : middle ;
	}
	
.T2-1BOX
	{
		font-size : 2em ;
		font-weight : bold ;
		box-sizing : border-box ;
		text-align : center ;
	}
	
.T2-2BOX
	{
		font-size : 1.5em ;
		font-weight : bold ;
		line-height : 250% ;
		box-sizing : border-box ;
		text-align : center ;
	}
	
.T2-3BOX
	{
		font-size : 1.5em ;
		box-sizing : border-box ;
		text-align : justify ;
	}
	
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* espace "CARTE" */

.zoneCARTE
	{
		position : absolute ; /* page ACCUEIL */
		width : 100% ;
		height : 75% ;
		top : 369% ;
	}
	
.zone2CARTE
	{
		position : absolute ; /* page CONTACT */
		width : 100% ;
		height : 75% ;
		top : 66% ;
	}
	
.boiteCARTE
	{
		position : absolute ;
		width : 100% ;
		height : 100% ;
		top : 0% ;
		left : 0% ;
	}
	
iframe
	{
		width : 100% ;
		height : 100% ;
	}