* {-moz-box-sizing: border-box; box-sizing: border-box;}

html 
{
  height: 100%;
}

body /* Corps de la page */
{
	background-color: rgb(245,255,245); /* couleur de fond, (Rouge, Vert, Bleu) */
    font-family: tahoma; /* Police d'écriture */
	color : black;  /* Couleur de la police */
	margin:0;
	padding:0;
	overflow:auto;
	position: relative;
	padding-bottom:135px;
	min-height: 100%;
}

header /* En tête */
{
	background-image: url("image/banniere3.png"); /* Image de l'en tête, pour le changer, modifier le chemin d'accès de l'image chez amen.fr */
	background-repeat: no-repeat; /* Evite la répétition de l'image d'en tête */
	background-position:center top; /* Centre l'image au centre de la fenêtre */
	
	border:ridge; /* Crée un cadre autour de l'entête */
	
	position:relative;
	height:105px; /* Mettre la hauteur de l'image à afficher */
	width:auto;
	padding-top:10px;
}

footer /* Pied de page */
{
	background-color:#a0d29f; /* Couleur du pied de page en base héxadécimal */
	
	border:ridge; /* Crée un cadre autour du pied de page */
	
	position: absolute; bottom: 0; left: 0; right: 0;
	margin:0;

	height:auto;
	width:100%;
	

}

nav /* position menu navigation */
{
	position:absolute;
		left:5px;
}

p /* Paragraphe */
{
	color : black; /* Couleur de la police */
	margin-left:225px;
	width:80%;
}

ul /* Liste (puces) */
{
	color : black; /* Couleur de la police */
	margin-left:20%
}

ol /* Liste (numéroté) */
{
	color : black; /* Couleur de la police */
	margin-left:20% 
}

a /* lien hypertexte */
{
	color : rgb(75,0,255); /* Couleur de la police (Rouge, Vert, Bleu) */
}

a:visited /* lien hypertexte visité */
{
	color : rgb(75,0,255); /* Couleur de la police (Rouge, Vert, Bleu) */
}

h1 /* Titre 1 */
{
	text-decoration:underline; /* Titre souligné */
	margin-left:0;
	text-align:center; /* Titre centré */
}

h2 /* Titre 2 */
{
	text-decoration:underline; /* Titre souligné */
	margin-left:0;
	text-align:center; /* Titre centré */
}

h3 /* Titre 3 */
{
	
}

h4 /* Titre 4 */
{
	text-align:right; /* Titre aligné à droite */
	margin-left:90%;
}

h5 /* Titre 5 */
{
	margin-top:10px;
}

table /* Tableaux (présent dans gestion equipe, Promotions etc) */
{
	background-color: white; /* Couleur de fond */
	width: 79%;
	border:1px solid black; /* Bordure du tableau */
	padding:3px;
	margin-left : 15%;
}

th /* case du tableau */
{
    border: 1px solid black; /* Bordure des cases */
	border-collapse:collapse; /* case collée les unes au autres */
}

.monForm2
{
   float:right;
   margin-left:60%;
}

.monForm3
{
   display:inline;
   float:right;
}

.promo 
{
	float:right;
	margin-left:10%;
}

.aligne
{
	padding:0;
	width:25%;
	margin-left:20%;
}

.table_promo td
{ 
	vertical-align:top;
	text-align:center;
	padding:0;
}

.img_promo
{
	width:400px;
	height: auto;	
}

.nom_promo
{
	font-size:20px;
	font-weight:bold;
}

.img_head
{
	padding-top:5px;
	overflow:scroll;
}

.lien
{
	margin-left:30px;
	font-size:20px;
	color : rgb(75,0,255);
}

.marge 
{
	margin-left: 5em;
}

.marge2
{
	margin-left: 4em;
}

.flotte 
{
	float:left;
}

@keyframes AutoSlide /* Time Line Diapo accueil */
{
	0% {
        left: 0px; /*1ère image*/
    }
    8% {
        left: 0px; /*idem pour attente*/
    }
    16% {
        left: -667px; /*2ème image*/
    }
    24% {
        left: -667px; /*idem pour attente*/
    }
    32% {
        left: -1334px; /*3ème image*/
    }
    40% {
        left: -1334px; /*idem pour attente*/
    }
    48% {
        left: -2001px; /*4eme image*/
    }
	56% {
        left: -2001px; /*idem pour attente*/
    }
	64% {
        left: -2668px; /*5eme image*/
    }
	72% {
        left: -2668px; /*idem pour attente*/
    }
	80% {
        left: -3335px; /*6eme image*/
    }
	88% {
        left: -3335px; /*idem pour attente*/
    }
	100% {
        left: 0px; /*1ere image*/
    }	
}

	#slideshow /* Diapo Accueil */
	{
		position: relative;
		width: 667px; /* Largeur d'une photo */
		height: 500px; /* Hauteur d'une photo */
		margin:  20px auto;
		overflow: hidden;
		border-radius:50px; /* Coin arrondis */
		box-shadow: 10px 10px 10px black ; /* Ombres Haut droit, Bas droit, Bas Gauche */
	}

	#sContent li 
	{
		display: inline;
	}

	#sContent /* Propriétés de l'animation Accueil */
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 4002px; /* Largeur de toutes les photos mise côte à côte */
		margin: 0;            
		padding: 0;
		
		/*CSS3 keyframes animation*/
		animation-name: AutoSlide;
		animation-duration: 30s; /* Durée d'une boucle */
		animation-iteration-count: infinite; /* Nombre de boucle à effectuer avant fin de l'animation */
		animation-timing-function: ease-in-out; /* Fonction de transition */
	}

@keyframes AutoSlideVitrine /* Time Line Diapo Matériel */
{
	0% {
        left: 0px; /*1ère image*/
    }
    10% {
        left: 0px; /*idem pour attente*/
    }
    20% {
        left: -667px; /*2ème image*/
    }
    30% {
        left: -667px; /*idem pour attente*/
    }
    40% {
        left: -1334px; /*3ème image*/
    }
    50% {
        left: -1334px; /*idem pour attente*/
    }
    60% {
        left: -2001px; /*4eme image*/
    }
	70% {
        left: -2001px; /*idem pour attente*/
    }
	80% {
        left: -2668px; /*5eme image*/
    }
	90% {
        left: -2668px; /*idem pour attente*/
    }

	100% {
        left: 0px; /*1ere image*/
    }	
}	

	#slideshow2 /* Diapo Matériel */
	{
		position: relative;
		width: 667px; /* Largeur d'une photo */
		height: 500px; /* Hauteur d'une photo */
		margin:  20px auto;
		overflow: hidden;
		border-radius:50px; /* Coin arrondis */
	}

	#sContent2 li 
	{
		display: inline;
	}

	#sContent2 /* Propriétés de l'animation Matériel */
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 4002px; /* Largeur de toutes les photos mise côte à côte */
		margin: 0;            
		padding: 0;
		
		/*CSS3 keyframes animation*/
		animation-name: AutoSlideVitrine;
		animation-duration: 30s; /* Durée d'une boucle */
		animation-iteration-count: infinite; /* Nombre de boucle à effectuer avant fin de l'animation */
		animation-timing-function: ease-in-out; /* Fonction de transition */
	}
	
#monForm 
{
   margin-left:50%;
   float : right;
}

@media screen and (min-width: 1367px) /*grands écran*/
{
	.element_menu /* Design menu */
	{
	background-image: url("image/gelule_verte5.gif"); /* Image de l'en tête, pour le changer, modifier le chemin d'accès de l'image chez amen.fr */
	background-repeat: no-repeat; /* Evite la répétition de l'image */
	box-shadow: 10px 10px 10px black ; /* Ombres Haut droit, Bas droit, Bas Gauche */
	border-radius:100px; /* Ombres Haut droit, Bas droit, Bas Gauche */
	
	position:fixed; /* Position fixed : le menu se déplace */
	margin-top: 50vh;
    transform: translateY(-50%); 
	width:184px; /* largeur de l'image */
	height:486px; /* Hauteur de l'image */
	}

	.garde
	{
		position: absolute;
			top:15px;
			left:150px;
	}
}

@media screen and (max-width: 1366px) /*petits écran*/
{
	
	.element_menu /* Design menu */
	{
	
	background-image: url("image/gelule_verte5.gif"); /* Image de l'en tête, pour le changer, modifier le chemin d'accès de l'image chez amen.fr */
	background-repeat: no-repeat; /* Evite la répétition de l'image */
	box-shadow: 10px 10px 10px black ; /* Ombres Haut droit, Bas droit, Bas Gauche */
	border-radius:100px; /* Ombres Haut droit, Bas droit, Bas Gauche */
	
	position:fixed; /* Position fixed : le menu se déplace */

	width:184px; /* largeur de l'image */
	height:486px; /* Hauteur de l'image */
	
	transform: scale(0.65); 
	margin-top: 10vh;
	}

	.garde
	{
		position: absolute;
			top:15px;
			left:75px;
	}
	
	#slideshow2
	{
		position: relative;
		width: 667px;
		height: 500px;
		margin:  20px auto;
		overflow: hidden;
		border-radius:50px;
	}

}

@media screen and (max-width: 1000px) and (orientation:portrait)/*smartphone portrait*/
{		
	body
	{
		background-color: rgb(245,255,245);
		font-family: tahoma;
		color : black;
		margin:0;
		padding:0;
	}
		
	ul
	{
		color : black;
		margin-left:30%
	}

	ol
	{
		color : black;
		margin-left:30% 
	}

	.element_menu
	{
		background-image: url("image/gelule_verte5.gif");
		background-repeat: no-repeat;
		box-shadow: 10px 10px 10px black ;
		border-radius:100px;
		
		position:fixed; 

		width:184px;
		height:486px;
		
		transform: scale(0.90); 
		margin-top: 30vh; /*poussé de la moitié de hauteur de viewport */
	}

	.garde
	{
		margin-top:10px;
		margin-left:-50px;
		transform:scale(0.70);
		
	}

	.marge 
	{
		margin-left: 3em;
	}

	.marge2
	{
		margin-left: 2em;
	}	

	#slideshow 
	{
		position: relative;
			left:100px;
		width: 667px;
		height: 500px;
		margin:  20px auto;
		overflow: hidden;
		border-radius:50px;
		box-shadow: 10px 10px 10px black ;
	}	
	
	#slideshow2
	{
		position: relative;
			left:100px;
		width: 667px;
		height: 500px;
		margin:  20px auto;
		overflow: hidden;
		border-radius:50px;
	}
}

@media screen and (max-width: 1000px) and (orientation: landscape) /*smartphone paysage*/
{
	body
	{
		background-color: rgb(245,255,245);
		font-family: tahoma;
		color : black;
		margin:0;
		padding:0;
	}

	ul
	{
		color : black;
		margin-left:30%
	}

	ol
	{
		color : black;
		margin-left:30% 
	}
	
	footer
	{
		background-color:#a0d29f;
		
		border:ridge;
		
		position: absolute; bottom: 0; left: 0; right: 0;
		margin:0;

		height:auto;
		width:100%;
		
		transform:scaleY(0.75);
	}
	
	.element_menu
	{
		background-image: url("image/gelule_verte5.gif");
		background-repeat: no-repeat;
		box-shadow: 10px 10px 10px black ;
		border-radius:100px;
		
		position:fixed; 

		width:184px;
		height:486px;
		
		transform: scale(0.50); 
		margin-top: 1vh; /*poussé de la moitié de hauteur de viewport */
	}
	
	.marge 
	{
		margin-left: 3em;
	}

	.marge2
	{
		margin-left: 2em;
	}	

}