/*			GENERAL A SAVOIR 
		- pas de point : on indique un style pour une balise (type em, h1, p...)
		- un point . idique que ca concerne une classe du fichier html
		- un diese # indique que ca concerne  une id (ici ya pas d'id)  */

/* les 2 trucs qui suivent permettent (entre autres ) d'ajouter la grille par dessus les images. l'image pattern.png est juste un point noir */ 

/* La ligne juste après concerne Les 2 (slideshow ET slideshow after, la virgule indique que les propriétés seront partagées par les 2) */

/* afer ou before permettent d'nsérer directement avant ou après un élément. C'est ce qui est dans content qui est ajouté
exemple :  h1::before{ content:"Titre:"; }  ajoutera "Titre" avant chaque h1 (chaque titre de niveau 1)   */

/* position : 
- absolute avec top 50 et left 0 : sur la page, l'élément sera 50 pixels sous le haut et a gauche
- fixed pareil mais si on scrolle la page vers le bas ça sera toujours au même endroit sur notre écran
- relative : décalé en pixels par rapport à l'endroit ou il devrait être
*/



.cb-slideshow
/* .cb-slideshow:after  */ { 
    position: absolute;
    width: 100%;
    height: 95%;   /* 100% fait que sur ordi, il y a une barre à droite. Mais autre chose que 100% fait que le zoom est foireux
	sur firefox mobile, il faudra donc différencier les versions ici */

    top: 0px;
    left: 0px;
    z-index: 0; 
	
}

/* pour faire disparaître les points bleus de la liste. Je l'ai trouvé tout seul yeah! */

.cb-slideshow {

color: transparent;

}


/* là il ajoute une image en 2x2 avec sur 1 seul des 4 pixels un point noir. Le reste est transparent. Ca donne bien la grille   */ 


/*
.cb-slideshow:after { 
    content: '';
background: transparent url(../images/pattern.png) repeat top left;
}  */

/* dans span il y a "image1  2  3 et ainsi de suite, dans div il y a "relaxation" "quietude" tout ça
Rq : il n'y a aucun lien vers les images dans le html, juste les noms  */


.cb-slideshow li span { 
	
	/* border-radius:150px;
    border: 1px solid black;   */ 
    width: 100%;
    height: 100%;
    position: fixed;
	/* je ne sais pas pourquoi il faut mettre -16 ici, mais 0 ça faisait une bande blanche de 16px en haut */
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: 100%; 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
	/* ici, il donne à l'animation le nom "imageanimation", avec une durée de 30s, une méthode linear c'est-à-dire sans acceleration ou décéleration.
	infinite car elle va se répéter un nombre infini de fois  */
	
   /* J'ai volontairement supprimé ces 4 lignes. Explication : ceci permet de spécifier pour chaque éditeur de navigateur une fonction
   qu'il supporte, mais qui n'est pas encore supportée par le W3C. Une fois que la fonction est supportée par le W3C, cela devient inutile. 
   Visisblement c'est supporté car en la supprimant ça marche. 
   
   */
    -webkit-animation: imageAnimation 42s linear infinite 0s;
    -moz-animation: imageAnimation 42s linear infinite 0s;
    -o-animation: imageAnimation 42s linear infinite 0s;
    -ms-animation: imageAnimation 42s linear infinite 0s;
 
    animation: imageAnimation 42s linear infinite 0s; 
}

/* Ca on s'en fout car div c'est le texte  */

/*
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 1;
    color: #fff;
	
	
	
	/* 
    -webkit-animation: titleAnimation 30s linear infinite 0s;
    -moz-animation: titleAnimation 30s linear infinite 0s;
    -o-animation: titleAnimation 30s linear infinite 0s;
    -ms-animation: titleAnimation 30s linear infinite 0s;
    animation: titleAnimation 30s linear infinite 0s; 
*/
	

/* Ca aussi c'est le texte on s'en fout  */

/*

.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 120px;
    padding: 0;
    line-height: 200px; 
}
*/


/* Ici, il indique le 1er élément de la liste (qui contient span ET div) et il ne concerne que le span ("image1") 
nth-child peut être aussi utilisé sur du span avec par ex un div dans lequel il y a plusieurs span, dans ce cas
on ecrit span:nth-child(3) par exemple. On peut mettre toute formule de type 4n+7 pour selectionner les éléments 
ou nth-last-child(2) pour l'avant dernier... voir http://www.marevueweb.com/css-html/liste-nth-child-propriete/ */

/* a besoin d'être là en double, comme pour initialiser le truc (j'ai pas tout compris encore). Quand je remet le texte, plus besoin de double... */

@media screen and (min-width: 1600px) {
   


	.cb-slideshow li:nth-child(1) span { 
		 background-image: url(../images/1.jpg);
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-o-animation-delay: 0s;
		-ms-animation-delay: 0s;
		animation-delay: 0s; 
		}
		
	.cb-slideshow li:nth-child(1) span { 
		 background-image: url(../images/1.jpg);
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-o-animation-delay: 0s;
		-ms-animation-delay: 0s;
		animation-delay: 0s; 
		
		
	}
	.cb-slideshow li:nth-child(2) span { 
		background-image: url(../images/2.jpg);
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		-o-animation-delay: 7s;
		-ms-animation-delay: 7s;
		animation-delay: 7s; 
	}
	.cb-slideshow li:nth-child(3) span { 
		background-image: url(../images/3.jpg);
		-webkit-animation-delay: 14s;
		-moz-animation-delay: 14s;
		-o-animation-delay: 14s;
		-ms-animation-delay: 14s;
		animation-delay: 14s; 
	}
	.cb-slideshow li:nth-child(4) span { 
		background-image: url(../images/4.jpg);
		-webkit-animation-delay: 21s;
		-moz-animation-delay: 21s;
		-o-animation-delay: 21s;
		-ms-animation-delay: 21s;
		animation-delay: 21s; 
	}
	.cb-slideshow li:nth-child(5) span { 
		background-image: url(../images/5.jpg);
		-webkit-animation-delay: 28s;
		-moz-animation-delay: 28s;
		-o-animation-delay: 28s;
		-ms-animation-delay: 28s;
		animation-delay: 28s; 
	}
	.cb-slideshow li:nth-child(6) span { 
		background-image: url(../images/6.jpg);
		-webkit-animation-delay: 35s;
		-moz-animation-delay: 35s;
		-o-animation-delay: 35s;
		-ms-animation-delay: 35s;
		animation-delay: 35s; 
	}

}	


@media screen and (max-width: 1599px) {
   


	.cb-slideshow li:nth-child(1) span { 
		 background-image: url(../images/1-720.jpg);
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-o-animation-delay: 0s;
		-ms-animation-delay: 0s;
		animation-delay: 0s; 
		}
		
	.cb-slideshow li:nth-child(1) span { 
		 background-image: url(../images/1-720.jpg);
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-o-animation-delay: 0s;
		-ms-animation-delay: 0s;
		animation-delay: 0s; 
		
		
	}
	.cb-slideshow li:nth-child(2) span { 
		background-image: url(../images/2-720.jpg);
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		-o-animation-delay: 7s;
		-ms-animation-delay: 7s;
		animation-delay: 7s; 
	}
	.cb-slideshow li:nth-child(3) span { 
		background-image: url(../images/3-720.jpg);
		-webkit-animation-delay: 14s;
		-moz-animation-delay: 14s;
		-o-animation-delay: 14s;
		-ms-animation-delay: 14s;
		animation-delay: 14s; 
	}
	.cb-slideshow li:nth-child(4) span { 
		background-image: url(../images/4-720.jpg);
		-webkit-animation-delay: 21s;
		-moz-animation-delay: 21s;
		-o-animation-delay: 21s;
		-ms-animation-delay: 21s;
		animation-delay: 21s; 
	}
	.cb-slideshow li:nth-child(5) span { 
		background-image: url(../images/5-720.jpg);
		-webkit-animation-delay: 28s;
		-moz-animation-delay: 28s;
		-o-animation-delay: 28s;
		-ms-animation-delay: 28s;
		animation-delay: 28s; 
	}
	.cb-slideshow li:nth-child(6) span { 
		background-image: url(../images/6-720.jpg);
		-webkit-animation-delay: 35s;
		-moz-animation-delay: 35s;
		-o-animation-delay: 35s;
		-ms-animation-delay: 35s;
		animation-delay: 35s; 
	}

}	





	






	
/* tout ça c'est le texte on s'en fout  */ 

/*

.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -o-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
/* La règle CSS @keyframes permet aux auteurs de controller les étapes intermédiaires d'une séquence
 d'animation CSS en établissant des Images Clés (keyframes) qui sont atteint à certains points durant l'animation.
Les % sont en fait le temps : 0% c'est le début de l'animation et 100% c'est la fin. Ces 2 valeurs doivent être obligatoirement spécifiées. 
 
*/
 
 /* j'ai supprimé pour les keyframes qui suivent toutes les versions moz webkit ... car c'est supporté 
 ease-in : l'animation a un départ lent  ease-out : l'animation a une fin lente
 */
 
 @-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    7% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    7% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    7% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    7% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
 
@keyframes imageAnimation { 
    0% { opacity: 0;animation-timing-function: ease-in; }
    7% { opacity: 1;animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
/*

@keyframes titleAnimation { 
    0% { opacity: 0 }
    7% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */

/*
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}
*/