html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}
body
{
	width : 1250px;
	margin : auto;
	animation: transparence_page 1.5s;
	transition-timing-function: ease;
	 font-family: 'Quicksand';
	 overflow-x:hidden;
	
	
}

a:link
{
	text-decoration: none;
	color:white;
}


@font-face {
    font-family: 'Quicksand' ;
    font-weight: normal;
    font-style: normal;
}


@keyframes animation_barre_header {
    0% {
        transform: translateX(-3000px);
    }


    100% {
        transform: translateX(0px);
    }
}

@keyframes animation_barre_menu {
    0% {
        transform: translateX(3000px);
    }


    100% {
        transform: translateX(0px);
    }
}

@keyframes animation_corps_page {
    0% {
        transform: translateY(3000px);
    }


    100% {
        transform: translateY(0px);
    }
}

@keyframes animation_tete {
    0% {
        transform: translateY(-1000px);
    }


    100% {
        transform: translateY(0px);
    }
}

@keyframes animation_menu {
    0% {
        transform: translatex(-3000px);
    }


    100% {
        transform: translatex(0px);
    }
}

@keyframes transparence_page {
    0% {
        
        opacity: 0;
    }
 50% {
        
        opacity: 0.5;
    }
    
    100% {
        opacity: 1;
    }
}



@keyframes animation_image {
    0% {
        transform: rotateY(0deg) ;
       
        
       
    }

    12.5% {
        transform: rotateY(90deg) ;
       
       
        
    }
     25% {
        transform: rotateY(90deg);
       
        
    }

    37.5% {
        transform: rotateY(180deg);
      
        
    }

    50% {
    	transform: rotateY(180deg)  ;
    	 
    	 
    }

	62.5% {
    	transform: rotateY(270deg) ;
    	
    }

    75% {
    	transform: rotateY(270deg) ;
    	
    }

    87.5% {
    	transform: rotateY(360deg);
    	 
    	
    }

    100% {
    	transform: rotateY(360deg) ;
    	
    	 
    	
    }
}

@keyframes rotateCube {
	0% { 
		-webkit-transform: translateZ( -300px )  rotateY(   0deg );
	}
	100% {
		-webkit-transform: translateZ( -300px )  rotateY( 360deg );
	}
}

.background_image
{
	background-image:  url("Images/panorama_4.JPG");
	background-repeat : no-repeat;
	width : 100%;
	height :100%;
	background-position : left;
	animation: animation_tete 1.2s;
	transition-timing-function: ease;
	z-index:0;
	transform: translateZ(-5000px) scale(2);
	position: absolute;
}

.background_image_astro
{
background-image: url("club_astro/Images/fond_header.jpg");
background-repeat : no-repeat;
	width : 100%;
	height :100%;
	background-position : left;
	animation: animation_tete 1.2s;
	transition-timing-function: ease;
	
	position: absolute;
}

.background_image_radio
{
background-image: url(../Images/panorama.jpg);
background-repeat : no-repeat;
	width : 100%;
	height :100%;
	background-position : left;
	animation: animation_tete 1.2s;
	transition-timing-function: ease;
	z-index:0;
	transform: translateZ(-300px) scale(2);
	position: absolute;

}

.background_image_tournois
{
	background-image:  url("Images/panorama_6.JPG");
	background-repeat : no-repeat;
	width : 100%;
	height :100%;
	background-position : left;
	animation: animation_tete 1.2s;
	transition-timing-function: ease;
	z-index:0;
	transform: translateZ(-300px) scale(2);
	position: absolute;
}


  .banniere_accueil
  {
  	perspective:5000px;
  	perspective-origin: 50% ;
  	display:flex;
  	justify-content: space-between;
  	align-items:center;
  	animation: animation_tete 1.2s;
	transition-timing-function: ease-out;


  }

    #background
  {
  	position:relative;
  	margin:auto;
  	height :152.5px;
  	width:755px;
  	transform-style: preserve-3d;

  	
  	
 }

#background div
{
	backface-visibility: hidden;
	overflow:hidden;
	height :152.5px;
  	width:755px;
 }


.rotation div
{
	display: inline-block;
	position : absolute;
	height :152.5px;
  	width:755px;
}

.rotation
{
	animation: animation_image 20s  infinite;
	animation-delay: 1.7s;
	transition-timing-function: cubic-bezier(.16,.01,.81,.99);
	z-index:0;
}

#image1::before 
{
	z-index: 1;
	
}



#image1
{
	
	transform : translateZ(377.5px);
	

}
#image2
{
	
	transform:  rotateY(-270deg) translateX(377.5px) ;
	transform-origin: top right;
	

}
#image3
{
	
	transform: translateZ(-377.5px) rotateY(180deg);
	


}

#image4
{
	
	transform : translateZ(-377.5px) rotateY(270deg);
	transform-origin: left;
	
  
	
}
@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}


  #first_plan
  {
  	position: absolute;
	width:906px;
  	z-index: 1;
  	
  }

  header
{
	
	transform-style: preserve-3d;
	width : 100%;
	margin-top : 1%;
	font-family : Quicksand, cursive;
	text-align : left;
	color : #ffffff;
	display : flex;
	justify-content: space-between;
	align-items: center;
	padding-top : 1%;
	padding-bottom : 1%;
	perspective:5000px;
   }
header strong
{
	 text-shadow :  2px 2px 2px black;
}
.lecteur{
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	text-transform: uppercase;
	text-decoration: underline;
	margin-bottom : 2%;
}

.logo_header
{
	height : 183px;
	display : flex;
	flex-direction : column;
	justify-content : space-around;
	align-items : center;
	animation: animation_barre_menu 1.3s;
	transition-timing-function: ease;
	position: relative;
	z-index: 1;
	transform:translateZ(0px) scale(1);
}
.logo_header  a
{
	text-decoration : none;
}
.logo_header  a:hover
{
	opacity : 0.5;
	 transform: scale3d(1.1, 1.1, 1.1) translateX(-12px) translateY(5px);
	transition-duration : 0.5s;
	animation-fill-mode : backwards;
	
	}

.titre_header
{
	display : flex;
	flex-direction : column;
	justify-content : center;
	padding-left : 2%;
	margin-top : auto;
	text-align : left;
	height : 183px;
	width : 60%;
	font-size : 35px;
	animation: animation_barre_header 1.7s;
	transition-timing-function: ease;
	z-index:2;
	transform: translateZ(0px) scale(1);
	position: relative;

}

header figcaption
{
	color:black;
}
#content {
	width: 400px;
	margin: 40px auto 0 auto;
	padding: 0 60px 30px 60px;
	border: solid 1px #cbcbcb;
	background: #fafafa;
	-moz-box-shadow: 0px 0px 10px #cbcbcb;
	-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}
a:link
{
	text-decoration : none;
}

 .sommaire a:hover
{
	background-color  : white;
	color : #0462a2;
	transition-duration : 0.3s;
}
.facebook
{
	background-color:white;
	}


#icone

{
	width : 30%;
}
iframe
{
	border-color: white;
	border-width : 1px;
}
.sommaire
{
	
	width : 100%;
	margin-top : 1%;
	margin-bottom : 1%;
	font-family :  Quicksand;
	font-size : 20px;
	text-decoration : none;
	color : white;
	display : flex;
	justify-content : space-between;
}
.sommaire2
{
	
	width : 100%;
	margin-top : 1%;
	margin-bottom : 1%;
	font-family :  Quicksand;
	font-size : 20px;
	color : white;
	display : flex;
	flex-direction: column;
	justify-content : space-between;

}

.sommaire2 a
{
	width : 100%;
	color : white;
	background-color: #7caecf;
}

.sommaire2 a:link
{
	width : 100%;
	color : white;
	background-color: #7caecf;
}

 .sommaire2 a:hover
{
	color : white;
	transition-duration : 0.3s;
	transition-timing-function: ease;
}
.menu_articles
{
	font-family :  Quicksand;
	color : white;
	background-color : #0462a2;
	display : flex;
	padding : 1%;
	flex-direction : column;
	justify-content : center;
}
.menu_articles a:hover
{
	background-color: #7caecf;
	color : black;
	transition-duration : 0.3s;
	transition-timing-function: ease;
}
.menu_articles p
{
	background-color: #7caecf;
}
.accueil_FSE
{
	animation: animation_barre_menu 0.18s;
	transition-timing-function: ease;
}
.presentation_FSE
{
	animation: animation_barre_menu 0.36s;
	transition-timing-function: ease;
}
.presentation_foyers
{
	animation: animation_barre_menu 0.54s;
	transition-timing-function: ease;
}
.les_animations
{
	animation: animation_barre_menu 0.72s;
	transition-timing-function: ease;
}
.les_tournois
{
	animation: animation_barre_menu 0.9s;
	transition-timing-function: ease;
}
.CVL
{
	animation: animation_barre_menu 1.09s;
	transition-timing-function: ease;
}
.webradio
{
	animation: animation_barre_menu 1.27s;
	transition-timing-function: ease;
}
.astro
{
	animation: animation_barre_menu 1.45s;
	transition-timing-function: ease;
}
.contact
{
	animation: animation_barre_menu 1.63s;
	transition-timing-function: ease;
}
.facebook
{
	animation: animation_barre_menu 1.81s;
	transition-timing-function: ease;
}

.sommaire a
{
	color : white;
	background-color : red;
}


.corps_de_page
{
	width : 100%;
	margin : auto;
	font-family :  Quicksand;
	display : flex;
	margin-bottom : 2%;
	
}

.corps_de_page_animations
{
	width : 100%;
	margin : auto;
	margin-top : 1%;
	font-family :  Quicksand;
	font-size : 35px;
	text-align : center;
	display : flex;
	margin-bottom : 2%;
	
}

.corps_de_page_animations img
{
	width : 100%;
}

.programme_et_news
{
	width : 30%;
	margin-top : 1%;
	margin-right : 1%;
	text-align : center;
	font-family : Quicksand;
	animation: animation_menu 1.5s;
	transition-timing-function: ease;
	
}


.permanences
{
	width : 15%;
	margin-top : 1%;
	margin-right : 1%;
	text-align : center;
	font-family :Quicksand;
	font-size : 20px;
	animation: animation_menu 1.5s;
	transition-timing-function: ease;

}

.permanences img
{
	width : 100%;
}

.programme_et_news article
{
	text-align : left;
	background-color : white;
	color : black;
}

.programme_et_news a
{
	color : black;
	text-decoration: underline;
}

.programme_et_news a:link
{ 
 text-decoration:underline; 
} 

.programme_et_news img
{
	width : 100%;
	border : solid #0462a2;
	border-width : 1px;
}

.images_info
{
	display : flex;
	flex-wrap : no wrap;
	flex-direction : row;
	justify-content : space-around;
	
}

.info_baby
{
	width : 50%;
	border : solid #0462a2;
	border-width : 1px;
}
.titre_news
{
	background-color : #0462a2;
	color : white;
	font-size : 25px;
}

.affichage
{
	width : 100%;
}
.annonce
{
	font-size : 20px;
	text-align : center;
}

.annonce strong 
{
	color : red;
}

.annonce img
{
	width : 100%;
}

.ancre_HDP
{
	display:flex;
	justify-content: center;
	align-items:center;
	width:15%;
	text-align: center;
	color: red;
	font-size: 10px;

}
.ancre_HDP a
{
	text-decoration : none;
	color: red;
	font-size: 10px;
	background-color: none;
	scroll-behavior: smooth;
}

.la_une
{
	width : 70%;
	padding-top : 1%;
	padding-left : 1%;
	text-align : justify;
	animation: animation_corps_page 1.5s;
	transition-timing-function: ease;
}
.la_une::after
{
	animation: animation_corps_page_out 1.5s;
	transition-timing-function: ease;
}

.la_une_animation
{
	width : 85%;
	padding-top : 1%;
	padding-left : 1%;
	text-align : justify;
	animation: animation_corps_page 1.5s;
	transition-timing-function: ease;
}


.la_une em
{
	text-decoration : none;
	color : red;
}
.la_une article
{
	color : black;
	text-align : justify;
	padding-top : 1%;
	padding-bottom : 1%;
	padding-left : 2%;
	padding-right : 2%;
	background-color :  rgba(4, 105, 208, 0.1);
	margin-top : 2%;
	margin-bottom : 2%;
}
.la_une_animation article
{
	color : black;
	text-align : justify;
	padding-top : 1%;
	padding-bottom : 1%;
	padding-left : 2%;
	padding-right : 2%;
	background-color :  rgba(4, 105, 208, 0.1);
	margin-top : 2%;
	margin-bottom : 2%;
}

.mep_matchs
{
	display : flex;
	flex-direction : column;
	justify-content: space-between;
	align-items: flex-start;
	width:96.5%;
}

.mep_matchs article
{
	width : 100%;
}

.la_une img
{
	width : 100%;
}

.la_une iframe
{
	width : 100%;
	height : 600px;
}

.titre_une
{	
	text-align : center;
	background-color : #0462a2;
	color : white;
	font-size : 25px;
	width : 100%;
}

#countbox1
{
	display : flex;
	align-items: center;
	justify-content: center;
	margin-left:10%;
	margin-right:10%;
	text-align:center;
	font-size:150%;
	font-weight:bold;
	background: linear-gradient(#92d0fa, 5%, #0462a2, 95%, #92d0fa);
	border-radius: 7px;
	color:white;
	height:60px;
}

article
{
	font-family :  Quicksand;
	text-align : center;
	color : white;
	background-color :  #0462a2;
	display : flex;
	padding : 1%;
	flex-direction : column;
	justify-content : center;
}

article img
{
	width : 100%;
}

.date
{
	font-size: 12px;
	color : #0462a2;
	margin: 0px;
}

.corps_de_page_animations 
{
	display : flex;
	flex-direction : row;
	align-items : baseline;
}
.corps_de_page_clubs
{
	width : 100%;
	margin : auto;
	font-family :  Quicksand
	display : flex;
justify-content : space-between;
}
.corps_de_page_clubs img
{
	padding-top : 3%;
}

.pied_de_page
{
	font-family : Quicksand;
	font-size : 12px;
	display : flex;
	justify-content : space-between;
	align-items : flex-end;
	color : white;
	background-color :  #0462a2;
	margin-top : 2%;
	margin-bottom : 1%;
	padding : 1%;
	animation: animation_barre_header 1.5s;
	transition-timing-function: ease;
}

.pied_de_page::after
{
	animation: animation_barre_header_out 1.5s;
	transition-timing-function: ease;
}

.pied_de_page a:link
{ 
 text-decoration: none; 
 color : white;
} 
.copyright
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-end;
}

.copyright a
{
	text-decoration:none;
	color:white;
}
.copyright a:link
{ 
 text-decoration: none; 
 color : white;
} 

.slider
{
	width:500px;
	overflow:hidden;
	margin : auto;
}
.slides
{
	width: calc(500px*10);
	animation : glisse 30s infinite;
}
.slide
{
	float:left;
	margin:auto;
}


@keyframes glisse
{
	0%
	{
		transform : translateX(0);
	}
	5%
	{
		transform : translateX(0);
	}
	10%
	{
		transform : translateX(-500px);
	}
	15%
	{
		transform : translateX(-500px);
	}
	20%
	{
		transform : translateX(-1000px);
	}
	25%
	{
		transform : translateX(-1000px);
	}
	30%
	{
		transform : translateX(-1500px);
	}
	35%
	{
		transform : translateX(-1500px);
	}
	40%
	{
		transform : translateX(-2000px);
	}
	45%
	{
		transform : translateX(-2000px);
	}
	50%
	{
		transform : translateX(-2500px);
	}
	55%
	{
		transform : translateX(-2500px);
	}
	60%
	{
		transform : translateX(-3000px);
	}
	65%
	{
		transform : translateX(-3000px);
	}
	70%
	{
		transform : translateX(-3500px);
	}
	75%
	{
		transform : translateX(-3500px);
	}
	80%
	{
		transform : translateX(-4000px);
	}
	85%
	{
		transform : translateX(-4000px);
	}
	90%
	{
		transform:translateX(-4500px);
	}
	95%
	{
		transform : translateX(-4500px);
	}
	100%
	{
		transform:translateX(0px);
	}
}