/* style.css de Mon site CD */

body {
	background: #3d3d3d repeat-x;     /*  gris #d1d1d1  */
	font-family:'trebuchet MS', verdana, arial, sans-serif; /* polices desciption */
}

#bloc_page {width: 100%; margin: auto;}
	
h1 { padding-left: 55px; font-size:1.2em; color:#6a2507; }

		/* Texte h2 qui clignote         
h2 {animation: h2 4s infinite;
	font-family: 'Acme', sans-serif; font-weight:normal; font-style:italic; color:#115ace; font-size:28px; padding-left: 7px;
}
@keyframes h2 {
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}*/





table {  
	width:52%;
	margin:0 auto;	
	border-spacing:0px;
}
#titre {font-family: 'Acme', sans-serif; font-size:2.2em; background-color:#3d3d3d; color:white;
	text-align:center; padding: 10px 0px 15px 0px;
}
td {	border: 0px solid black; 
	padding: 0px;
	font-size:0.9em;
}
.espace {height:10px;}

span { font-weight:bold; color:#6a2507;}

p {font-style:italic; font-weight:normal;}
/*.site  {margin-left: 50%;}*/

.imagerecto {
	width: 218px; 
	height: 218px; 
}
/*.imageverso {
	width: 420px; 
	height: 370px; 	
}*/

.reduction { float: left;                    
	width: 650px; height: 218px;
	background-color:white; text-align:left; font-size:1.03em; border-radius:12px;
	padding-left:20px;  padding-right:20px;		           
}
a:link {color:#6a2507; text-decoration:none; list-style-type:none; font-weight:bold;}
a:hover {color:#6a2507;}
a:visited {color:#6a2507;}


.description { float: left;                    
	width: 650px; height: 218px;
	background-color:#ebebeb; text-align:left; font-size:1.03em; border-radius:12px;
	padding-left:20px;  padding-right:20px;		           
}

.container {
  width: 290px; text-align:center;
  height: 218px; padding: 0px 20px 0px 0px;
  
}
.container {
  perspective: 1000px; 
}
.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.3s linear;   /* au lieu 0.0s */
}
.container:hover .card {
  transform: rotateY(180deg);
 
}
.face {  
  width: 100%;
  height: 100%;
  backface-visibility: hidden; 
}
.face.back {
  display: block;
  transform: rotateY(180deg); 
  margin: -183px 0px 0px -200px;
}

		/* Slideshow */

@keyframes AutoSlide {
	0%,10%  {left:  0px;}   /*1 image*/
	14%,24% {left: -184px;} /*2 image*/	
	28%,38% {left: -368px;} /*3 image*/	
	42%,52% {left: -552px;} /*4 image*/		
	56%,66% {left: -736px;} /*5 BLUES*/		
	70%,81% {left: -920px;} 
	85%,96% {left: -1104px;}
	100%,0% {left: -1288px;}  /*évite marche arrière*/
	0%      {left: 0px;}    /*retour*/
}

#slideshow {
	float: none; 
	position: relative;
	width: 180px;
	height: 180px;
	margin:  0px;
	overflow: hidden;
}
#sContent li {
	display: inline;
}

#sContent {
	position: absolute;
	top: 0;
	left: 0;
	width: 1472px;
	margin: 0;            
	padding: 0;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide;
	animation-duration: 22s;
	animation-iteration-count: infinite;  /*egalement loop */
	animation-timing-function: ease-in-out;
}


#pagewrap {margin: 0 auto;position: relative;}

/* Back to top button  */
#back-top   {position: fixed;bottom: 50px;margin-left: 1300px;}
#back-top a {width: 108px;display: block;text-align: center;
	font: 11px/100% 'trebuchet MS', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: black;      /* color de Haut de Page (gris) */
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {color: #000;}
/* arrow icon (span tag) */
#back-top span {width: 108px;height: 108px;display: block;
	margin-bottom: 7px;
	background: #bcbcbc url('arbo/haut.png') no-repeat center center;      /* couleur du bouton */
	/* rounded corners */
	-webkit-border-radius: 53px;
	-moz-border-radius: 53px;
	border-radius: 53px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {background-color: #3d3d3d;}   /* couleur du bouton après hover */

footer {
	text-align: center;
	margin-top: 20px;	
	font-size: 0.7em; font-family: arial,helvetica;
}