/*{========================================================================================= 
Produit : Formatik.ca : 0.1 
------------------------------------------------------------------------------------------ 
Unité : Objets (Unité contenant les objets métiers de l'application) 
Version : 0.1
Description : Module contenant tout les options CSS exclusif à formatik.ca
Programmeur : Patrick Limoges 
Date création: 4 mai 2016 
Organisation : Formatik 
Copyright : Tous droits réservés 2015 
Remarques : 15 mars: Début de la documentation 
=========================================================================================}*/

/*Sert a l'affichage d'un carrousel sur la largeur de la page*/
.CarrouselPageEntiere{
	width:100%;
	display:inline-block;
	top:0px;
	height: 300px;
}

/*Sert pour déterminer la taille du bouton de naigation de droite*/
.CarrouselNavigationDroite{
	position:absolute;
	top:auto;
	right: 0px;
	width: 15%;
	height: 300px;
}

/*Sert pour déterminer la taille du bouton de naigation de gauche*/
.CarrouselNavigationGauche{
	position:absolute;
	top:auto;
	left: 0px;
	width: 15%;
	height: 300px;
}

/*Ci-dessous seront instancié tout le css servant au Carrousel en volet*/

.CarrouselVolet{
	position:absolute;
	width: 60%;
	height: 300px;
	background-color:#00F;
	display:inline-block;
}

.CarrouselVolet.Volet0{
	left: -50%;
}

.CarrouselVolet.Volet1{
	left: -40%;
}

.CarrouselVolet.Volet2{
	margin-left: 20%;
	margin-right: 20%;
	background-color:#FF0000;
}

.CarrouselVolet.Volet3{
	right: -40%;
}

.CarrouselVolet.Volet4{
	right: -50%;
}

.CarrouselVolet.Masquer{
	display:none;
}

.CarrouselVolet.Sortant{
	animation: CarrouselVoletSortant 2s linear;
}
@keyframes CarrouselVoletSortant{
	from{width: 60%;}
	to{width: 10%;}
}

.CarrouselVolet.Entrant{ 
	animation: CarrouselVoletEntrant 2s linear;
}
@keyframes CarrouselVoletEntrant{
	from{width: 10%;}
	to{width: 60%;}
}

.CarrouselVolet.VaADroite1{
	animation: Volet0VersVolet1 2s linear;
}
@keyframes Volet0VersVolet1{
	from{left: -50%;}
	to{left: -40%;}
}

.CarrouselVolet.VaADroite2{
	animation: Volet1VersVolet2 2s linear;
}
@keyframes Volet1VersVolet2{
	from{left: -40%;}
	to{left: 20%;}
}

.CarrouselVolet.VaADroite3{
	animation: Volet2VersVolet3 2s linear;
}
@keyframes Volet2VersVolet3{
	from{rigth: 20%;}
	to{right: -40%;}
}

.CarrouselVolet.VaADroite4{
	animation: Volet3VersVolet4 2s linear;
}
@keyframes Volet3VersVolet4{
	from{left: -40%;}
	to{right: -50%;}
}

.CarrouselVolet.VaADroite5{
	animation: Volet4VersVolet5 2s linear;
}
@keyframes Volet4VersVolet5{
	from{left: -50%;}
	to{right: -100%;}
}