body {
	font-family: 'Markazi Text', serif;
	/*background-image: url("../images/fond-flocon-de-neige.jpg");*/
	color: #044184;
	width: 100%;
}
h1 {
	font-family: 'Bangers', cursive;
}
h2 {
	font-family: 'Kaushan Script', cursive;
}
/* ----------------------- annonce --------------------- */
#annonce{
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin-top: 1%;
}
.l-annonce {
	display: flex;
	justify-content: center;
	width: 50%;
}
.imageannonce, .textannonce {
	width: 50%;
}
.imageannonce img {
	width: 100%;
}
.texteannonce h1, .texteannonce p {
	background-color: #ffffff;
	padding-top: 3%;
	width: 100%;
}
/*@media all and (min-width: 481px) and (max-width: 767px) {
	.texteannonce h1, .texteannonce p {
		font-size: 0.8em;
	}
}*/
@media all and (max-width: 767px) {
	#annonce {
		display: flex;
		flex-direction: column;
	}
	.l-annonce {
		width: 98%;
	}
}
@media all and (max-width: 480px) {	
	.texteannonce h1, .texteannonce p {
		font-size: 0.7em;
	}
}
/* ------------------------- Header ------------------------ */
header {
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: #ffffff;
	text-align: center;
	border-bottom: 1px dashed #000000;
}
#sous-header {
	width: 70%;
	background-color: #ffffff;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
@media all and (max-width: 980px) {
	#sous-header {
		width: 100%;
	}
}
#logo-club {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 2%;
}
#logo-club img {
		font-size: 4em;
		color: #ffffff;
		text-shadow: 3px 4px 4px #044184;
		width: 20%;
}
#h1-h2-header {
	width: 60%;
	text-align: center;
}
#h1-header {
	font-size: 4em;
	color: #ffffff;
	text-shadow: 3px 4px 4px #044184;
	margin-bottom: 0;
}
#h2-header {
	font-size: 2em;
	margin-top: 0;
	color: #ffffff;
	text-shadow: 3px 4px 4px #044184;
}
@media all and (min-width: 1200px) and (max-width: 1499px) {
	#logo-club img {
		width: 25%;
	}
}
@media all and (min-width: 980px) and (max-width: 1199px) {
	#h1-header {
		font-size: 3em;
	}
	#h2-header {
		font-size: 1.5em;
	}
}
@media all and (min-width: 768px) and (max-width: 979px) {
	#h1-header {
		font-size: 3em;
	}
	#h2-header {
		font-size: 1.5em;
	}
}
@media all and (max-width: 767px) {
	#h1-header {
		font-size: 2.5em;
	}
	#h2-header {
		font-size: 1em;
	}
}
#photo-header {
	text-align: center;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
#photo-header img {
	width: 100%;
}
@media all and (max-width: 980px) {
	#photo-header {
		width: 100%;
	}
}
@media all and (max-width: 767px) {
	#photo-header {
		width: 100%;
	}
}
@media all and (max-width: 480px) {
	#h1-header {
		font-size: 2em;
	}
	#h2-header {
		font-size: 1em;
	}
}
@keyframes titre-page {
	from {color: #ffffff; text-shadow: 3px 4px 4px #044184; }
	to{color: #044184; text-shadow: 1px 1px 1px #eaa41a;}	
}
#h1-header, #h2-header, .h1-header-index, .h1-header1-index {
	animation:  titre-page 5s linear  infinite alternate;
}
		/* ----------------------- menu header ------------------------ */
#nav-header {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
#conteneur-nav label, #conteneur-nav input {
	display: none;
}
#menu-ski-club {
	display: flex;
}
#menu-ski-club li{
	font-size: 1.5em;
	font-family: 'Markazi Text', serif;
	padding: 0 2%;
}
ul#menu-ski-club li #sous-menu1 li , li #sous-menu2 li  {
	margin: 0;
	text-align: center;
	font-size: 1em;
	width: 185px;
}
#menu-ski-club li a {
	color: #eaa41e;
	background-color: #ffffff;
	text-align: left;
	text-decoration: none;
}
#menu-ski-club li a:hover {
	color: #044184;
	text-decoration: underline;
}
ul#menu-ski-club li ul#sous-menu1 li a, ul#sous-menu2 li a {
	display: block;
	margin: 0;
	padding: 5px 10px 5px 10px;
	z-index: 99;
}
ul#menu-ski-club li #sous-menu1, li #sous-menu2 {
	display: none;
	padding: 0;
	margin: 0 ;
	position: absolute;
	z-index:99;
}
li #sous-menu2{
	left: 120px;
	top: 10px;
}
ul#menu-ski-club li:hover #sous-menu1, li #sous-menu1 li:hover #sous-menu2 {
	display: block;
}
@media all and (min-width: 768px) and (max-width: 1199px) {
	#menu-ski-club li {
		font-size: 1.3em;
	}
}
@media all and (max-width: 767px) {
	header {
		padding-bottom: 3%;
	}
	nav{
		width: 100%;
		margin: 0 auto;
		position: sticky;
		top: 0px;
	}
	#conteneur-nav {
		position: absolute;
		width: 100%;
	}
	nav#nav-header input[type=checkbox] {
		display: none;
	}
	nav#nav-header label {
		display: inline-block;
		width: 100%;
		padding: 10px 0px;
		text-align: center;
		font-size: 1.5em;
		background-color: #56bde8;
	}
	nav#nav-header ul {
		display: none;
		list-style-type: none;
		background-color: #fff;
	}
	nav#nav-header input[type=checkbox]:checked + ul {
		display: flex;
		flex-flow: column wrap;
	}
	nav#nav-header ul li {
		flex: 1 1 auto;
		text-align: center;
		font-size: 1.5em;
	}
	nav > div > ul > li > a {
		color: white;
	}
	nav#nav-header  a {
		display: block;
		text-decoration: none;
		color: #eaa41e;
		padding: 10px 0px 10px 5px;
		width: 100%;
	}
	ul#menu-ski-club li ul#sous-menu1, ul#menu-ski-club li ul#sous-menu1 ul#sous-menu2 {
		display: flex;
		flex-flow: column wrap;
		z-index: 1000;
		position: relative;
		top: 0;
		left: 0;
	}
	ul#menu-ski-club li ul#sous-menu1 {
		padding-left: 15px;
	}
	ul#menu-ski-club li ul#sous-menu1 ul#sous-menu2 {
		padding-left: 20px;
	}
	ul#menu-ski-club li ul#sous-menu1 li, ul#menu-ski-club li ul#sous-menu1 ul#sous-menu2 li {
		flex: 1 1 auto;
		text-align: left;
	}
	ul#menu-ski-club li ul#sous-menu1 li a, ul#menu-ski-club li ul#sous-menu1 ul#sous-menu2 li a {
		padding: 10px 0 10px 5px;
		border-bottom: none;
	}
	ul#menu-ski-club li ul#sous-menu1 li a {
		background-color: RGBa(4,65,132,0.8);
	}
	ul#menu-ski-club li ul#sous-menu1 ul#sous-menu2 li a {
		background-color: RGBa(4,65,132,0.6);
	}
}
/* ------------------------------------- commun --------------------------------------------- */
#corps-page {
	width: 70%;
	margin: 0 auto;
	background: #ffffff;
	font-size: 1.5em;
}
@media all and (min-width:1200px) and (max-width:1499px) {
	#corps-page {
		width: 90%;
	}
}
@media all and (max-width: 1199px) {
	#corps-page {
		width: 100%;
	}
}
#flex-colonnes {
	display: flex;
	justyfi-content: space-between;
}
@media all and (max-width: 767px) {
	#flex-colonnes {
		flex-direction: column;
	}
}
.fond-blanc {
	background-color: #ffffff;
	padding-bottom: 1%;
}
.clear {
	clear: both;
}
.souligne {
	text-decoration: underline;
}
.rouge {
	color: red;
}
.gras {
	font-weight: bold;
}
.image-droite {
	float: right;
	margin-left: 2%;
	margin-top: 1%;
}
.image-gauche {
	float: left;
	margin-right: 2%;
	margin-top: 1%;
}
p#fils-arianne a {
	padding: 1%;
	text-decoration: none;
	font-style: italic;
	font-size: 0.8em;
	color: #3eb8df;
}
p#fils-arianne a:hover {
	text-decoration: underline;
}
@media all and (max-width: 980px) {
	p#fils-arianne {
		padding-top: 3%;
	}
}
@media all and (max-width: 480px) {
	p#fils-arianne {
		padding-top: 7%;
	}
}
/* -------------------------- Accueil ------------------------ */
	/* --------------- Facebook --------------------- */
#facebooktel {
	display: none;
}
@media all and (max-width: 480px) {
	#facebookecran {
		display: none;
	}
	#facebooktel {
		display: block;
	}
}
#corps-page-accueil {
	width: 70%;
	margin: 0 auto;
	font-size: 1.5em;
}
@media all and (min-width:1200px) and (max-width:1499px) {
	#corps-page-accueil {
		width: 90%;
	}
}
@media all and (max-width:1199px) {
	#corps-page-accueil {
		width: 100%;
	}
}
#fond-photo {
	background: url('../images/photo-fond-accueil.jpg') center fixed;
	background-size: cover;
	margin:0;
    width:100%;
    height:100%;
}
#h1-accueil {
	text-align: center;
	font-size: 3em;
	margin: 5px 0 10px 0;
}
#h2-accueil {
	text-align: center;
}
@media all and (max-width: 768px) {
	#h2-accueil {
		font-size: 0.8em;
	}
}
.section-accueil {
	margin: 1% auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.section-accueil h1, #section-actus h1 {
	font-size: 1.5em;
}
#section-actus h2 {
	text-align: center;
}
.section-accueil article {
	background-color: rgba(255,255,255,0.8);
	width: 32%;
	text-align: center;
	line-height: 1.5em;
	padding: 1% 0;
}
.section-accueil article h1 {
	margin-bottom: 1%;
}
#categories-age article h3 {
	margin: 5px 0 5px 0;
}
#entrainement h2, #ages-categories h2 {
	font-size: 1em;
	color: #3eb8df;
	margin: 5px 0 10px 10px;
}
#p-club-img {
	width: 100%;
}
#p-club-img img {
	width: 100%;
}
@media all and (min-width: 768px) and (max-width: 979px) {
	.p1 {
		font-size: 0.8em;
	}
}
@media all and (min-width: 481px) and (max-width: 767px) {
	.section-accueil {
		flex-direction: column;
	}
	.section-accueil article {
		width: 80%;
		margin: 1% auto;
	}
	#p-club-img {
		width: 80%;
		margin: auto;
	}
}
@media all and (max-width: 480px) {
	.section-accueil {
		flex-direction: column;
	}
	.section-accueil article {
		width: 100%;
	}
	#p-club-img {
		width: 70%;
		margin: auto;
	}
}
#partenaires-accueil {
	text-align: center;
	background-color: rgba(255,255,255,0.8);
}
#partenaires-accueil img {
	margin: 2%;
}
			/* ------------- dernières actus du ski club ----------------- */
#flex-actus {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#section-actus {
	margin: 2% 0;
	padding: 2% 0;
	background-color: rgba(255,255,255,0.8);
}
#section-actus h1 {
	margin-left: 1%;
}
#flex-actus article {
	width: 48%;
	margin: 1%;
	background-color: rgba(255,255,255,0.8);
}
.flex-titre-date {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 1%;
}
.date-actu {
	color: #3eb8df;
}
.photo-actu {
	margin: 1% 0;
	width: 100%;
	text-align: center;
}
.texte-actu {
	padding: 1%;
	color: #000000;
}
.texte-actu li {
	list-style-type : circle;
	list-style-position: inside;
}
#archives {
	margin-top: 2%;
}
#page-facebook {
	text-align: center;
	margin: 1%;
	width: 100%;
}
			/* ------ slideshow actus ------- */
@keyframes AutoSlide {
    0% {
        left: 0%/*0px; /*1ère image*/
    }
    8%{
        left: 0%/*0px; /*idem pour attente*/
    }
    13%{
        left: -100%/*-1900px; /*2ème image*/
    }
    18% {
        left: -100%/*-1900px; /*idem pour attente*/
    }
    23% {
        left: -200%; /*3ème image*/
    }
    28%{
        left: -200%; /*idem pour attente*/
    }
    33% {
        left: -300%; /*4ème image*/
    }
	38% {
        left: -300%; /*attente*/
    }
	43% {
        left: -400%; /*5ème image*/
    }
	48% {
        left: -400%; /*attente*/
    }
	53% {
        left: -500%; /*6ème image*/
    }
	58% {
        left: -500%; /*attente*/
    }
	63% {
        left: -600%; /*7ème image*/
    }
	68% {
        left: -600%; /*attente*/
    }
	73% {
        left: -700%; /*8ème image*/
    }
	78% {
        left: -700%; /*attente*/
    }
	83% {
        left: -800%; /*9ème image*/
    }
	88% {
        left: -800%; /*attente*/
    }
	93% {
        left: -900%; /*10ème image*/
    }
	98% {
        left: -900%; /*attente*/
    }
	100% {
        left: -900%; /*attente*/
    }
}
/* slideshow 4 images */
@keyframes quatresimg {
    0% {
        left: 0%/*0px; /*1ère image*/
    }
    15%{
        left: 0%/*0px; /*idem pour attente*/
    }
    29%{
        left: -100%/*-1900px; /*2ème image*/
    }
    43% {
        left: -100%/*-1900px; /*idem pour attente*/
    }
    57% {
        left: -200%; /*3ème image*/
    }
    71%{
        left: -200%; /*idem pour attente*/
    }
    85% {
        left: -300%; /*4ème image*/
    }
	100% {
        left: -300%; /*attente*/
    }
}
.slideshow, .showquatre {
	width: 70%;
	margin: auto;
	height: 300px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.caroussel li, .slidequatre li{
	width: 100%;
	display: inline;
}
.caroussel li a img {
	width: 10%;
	height: 300px;
}
.caroussel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    margin: 0;            
    padding: 0;
	z-index:1;
	    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	
	-webkit-animation-name: AutoSlide;
    -webkit-animation-duration: 40s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}
.slidequatre li img {
	width: 25%;
	height: 300px;
}
.slidequatre {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    margin: 0;            
    padding: 0;
	z-index:1;
	    
    /*CSS3 keyframes animation*/
    animation-name: quatresimg;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	
	-webkit-animation-name: quatresimg;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

@media all and (min-width: 980px) and (max-width: 1199px) {
	.caroussel li a img, .photo-actu img, .slideshow {
		height: 250px;
	}
}
@media all and (min-width: 769px) and (max-width: 979px) {
	.caroussel li a img, .photo-actu img, .slideshow {
		height: 200px;
	}
	.flex-titre-date {
		flex-direction: column;
	}
	.titre-actu {
		margin-bottom: 1%;
	}
}
@media all and (min-width: 481px) and (max-width: 767px) {
	#flex-actus {
		flex-direction: column;
	}
	#flex-actus article {
		width: 80%;
		margin: 1% auto;
	}
	.slideshow, .photo-actu img {
		width: 80%;
	}
	.caroussel li a img, .photo-actu img, .slideshow {
		height: 250px;
	}
	.flex-titre-date {
		flex-direction: column;
	}
	.titre-actu {
		margin-bottom: 1%;
	}
}
@media all and  (max-width: 480px) {
	#flex-actus {
		flex-direction: column;
	}
	#flex-actus article {
		width: 98%;
		margin: 1% auto;
	}
	.slideshow, .photo-actu img {
		width: 80%;
	}
	.caroussel li a img, .photo-actu img, .slideshow {
		height: 250px;
	}
	.flex-titre-date {
		flex-direction: column;
	}
	.titre-actu {
		margin-bottom: 1%;
	}
}
/* ----------------------- qui sommes nous --------------- */
#histoire {
	text-align: justify;
	padding: 1%;
}
#histoire h2 {
	font-size: 1em;
	color: #3eb8df;
	margin: 5px 0 10px 10px;
}
#histoire article p {
	margin: 3% 0;
}
#histoire a img {
	width: 30%;
}
#histoire ul#liste-sommes {
	list-style-type: square;
	margin-left: 50px;
}
ul.sous-liste-sommes {
	margin-top: 2%;
}
ul.sous-liste-sommes li {
	list-style-type: circle;
	margin: 5px 0 5px 25px;
}
#li2, #li4 {
	margin-top: 5%;
}
#li3 {
	margin-top: 4%;
}
@media all and (max-width: 767px) {
	#histoire {
		width: 100%;
	}
	#histoire p {
		margin: 0 0 20px 0;
	}
	#histoire a img {
		width: 50%;
	}
	#histoire ul li {
		margin: 1% 0 2% 0;
	}
}
@media all and (max-width: 480px) {
	#h1-accueil {
		font-size: 2em;
	}
	#histoire h2 {
		font-size: 0.8em
	}
	#histoire p {
		margin: 0 0 20px 0;
	}
	#histoire a img {
		width: 50%;
	}
	#histoire p, #histoire ul {
		font-size: 0.8em;
	}
	#histoire ul li {
		margin: 1% 0 2% 0;
	}
	ul li ul.sous-liste-sommes li {
		font-size: 1.2em;
	}
}
#lien-contact {
	display: flex;
	width: 80%;
}
#lien-contact a {
	display: block;
	margin-left: 5px;
	text-decoration: none;
	color: #3eb8df;
}
#lien-contact a:hover {
	font-style: italic;
	transform: translatex(15px);
}
/* ------------------------------------- pages categories -------------------------------- */
.h1-categories {
	font-size: 2em;
	text-align: center;
	padding: 1% 0;
	color: #044184;
}
.h2-categories {
	font-size: 1em;
	color: #3eb8df;
	width: 90%;
	border-bottom: 2px solid #eaa41e;
	margin: 2% 1%;
}
.categories p {
	padding: 0 1%;
}
.photos-categories {
	margin-top: 1%;
	width: 100%;
}
.photos-categories a img, #photo-centre a img{
	box-shadow: 6px 6px 5px #06557a;
	margin: 2%;
}
.photos-categories a img {
	height: 200px;
}
.photos-categories a:hover img, #video a:hover img, #photo-centre a:hover img {
	box-shadow: 2px 2px 1px #000000;
}
#video {
	text-align: center;
	margin: 2% 1%;
}
#video iframe {
	width: 560px;
	height: 315px;
}
#photo-centre {
	text-align: center;
	margin-top: 2%;
}
#photo-centre a img {
	width: 50%;
}
@media all and (min-width: 768px) and (max-width: 1199px) {
	.photos-categories a img {
		height: 150px;
	}
}
@media all and (max-width: 767px) {
	.photos-categories a img {
		height: 100px;
	}
	#video img {
		width: 75%;
	}
	#video iframe {
		width: 98%;
	}
}
		/* ------------------ page staff -------------------- */
.flex-photos {
	display: flex;
	flex-wrap: wrap;
}
.photos-staff {
	text-align: center;
	width: 25%;
}
.photos-staff img {
	width: 80%;
}
#texte-intro {
	margin: 1%;
}
section#staff {
	width: 60%;
	border-right: 2px solid #eaa41e;
}
#contact {
	width: 39%;
	padding: 1%;
}
p#lien-facebook a, #contact article p, p#lien-mail a{
	text-decoration: none;
	color: #3eb8df;
	margin-left: 2%;
}
p#lien-facebook a:hover, p#lien-mail a:hover {
	font-style: italic;
}
#contact article h3 {
	margin: 2% 0 1% 0;
}
#nom {
	margin-left: 10%;
	width: 50%;
}
#prenom {
	margin-left: 5%;
	width: 50%;
}
#email {
	margin-left: 8%;
	width: 50%;
}
#telephone {
	margin-left: 1%;
	width: 50%;
}
#sujet {
	width: 80%;
}
#message {
	width: 80%;
	height: 100px;
}
#envoie {
	margin: 2% 0 2% 25%;
	color: #eaa41e;
	background-color: #044184;
	padding: 3%;
	font-size: 0.8em;
}
#envoie:hover {
	color: #044184;
	background-color: #eaa41e;
}
@media all and (max-width: 767px) {
	section#staff, #contact {
		width: 100%;
		border-right: 0px;
	}
}
/* ----------------------------- page presse ------------------------------ */
.article {
	text-align: center;
}
.article figure:hover a {
	font-style: italic;
}
.article figure:hover a img {
	box-shadow: 2px 3px 3px #000000;
}
@media all and (max-width: 480px) {
	.article figure a img {
		width: 70%;
	}
}
/* ------------------------------ page partenaires ------------------------ */
#flex-logos {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}
.image-partenaires {
	margin: 1%;
	text-align: center;
	font-size: 1.2em;
}
.image-partenaires a img {
	width: 100%;
}
@media all and (min-width: 1500px) and (max-width: 1800px) {
	.image-partenaires {
		font-size: 1em;
	}
	.image-partenaires a img {
		width: 60%;
	}

}
@media all and (min-width: 1200px) and (max-width: 1499px) {
	.image-partenaires {
		font-size: 0.8em;
		width: 25%;
	}
	.image-partenaires a img {
		width: 50%;
	}
}
@media all and (max-width: 480px) {
	.image-partenaires {
		font-size: 0.5em;
	}
	.image-partenaires a img {
		width: 60%;
	}
}
.float-left {
	margin: 2%;
	float: left;
	font-size: 0.5em;
}
/* ------------------------------ footer ---------------------------- */
footer {
	width: 100%;
	background: #020537;
}
#sous-footer {
	width: 70%;
	margin: 0 auto;
	color: #eaa41e;
}
@media all and (max-width: 980px) {
	#sous-footer {
		width: 100%;
	}
}
section#flex-footer {
	display: flex;
	justify-content: space-between;
}
.menu-footer {
	display: flex;
	width: 30%;
}
.menu-footer ul:first-child {
	margin-right: 20%;
}
.alpin-footer{
	margin-left: 25%;
}
.menu-footer li a {
	color: #eaa41e;
	text-decoration: none;
}
.menu-footer li:hover a {
	font-style: italic;
	text-decoration: underline;
}
#gif-footer {
	text-align: center;
}
#realisation {
	text-align:right;
}
#realisation p span {
	position: relative;
	bottom: 20px;
}
@media all and (min-width: 980px) and (max-width: 1199px) {
	#gif-footer img {
		width: 60%;
	}
	.menu-footer li {
		font-size: 0.8em;
	}
	#realisation img {
		width: 10%;
	}
	#realisation p {
		font-size: 0.8em;
	}
	#realisation p span {
		bottom: 10px;
	}
}
@media all and (max-width: 767px) {
	#gif-footer {
		display: none;
	}
	.menu-footer {
		width: 45%;
	}
	.menu-footer li {
		font-size: 1.2em;
	}
}
@media all and (max-width: 480px) {
	.menu-footer {
		flex-direction: column;
	}
}