/* police */
@import url(https://fonts.googleapis.com/css?family=Petit+Formal+Script|Playfair+Display:400italic|Libre+Baskerville:400italic|Alice|Niconne|Radley:400italic|Sorts+Mill+Goudy:400italic|Fanwood+Text:400italic|Prata|Lora:400italic|Volkhov:400italic|Cambo|Lobster+Two|Playball|Dancing+Script|Sail|Rozha+One|Yeseva+One|Linden+Hill|Marcellus+SC|Antic+Didone|Sacramento|Alex+Brush|Allura|Arizonia|Herr+Von+Muellerhoff);


/* titre */
h1{
	color: #B40000;
	text-align: center;
	font-family: 'Rozha One', serif;
}

/* menu */
body{
	
	background-color:#f1f1f1;/*#CCC4C4;*/
	font-family: 'Cambo',sans-serif;
	font-size: 25px;
}
a{
	margin:0px;
	padding:0px;
	text-decoration: none;
	color:black;
}
a.white{
	text-decoration: none;
	color: #8DB9ED;
}
	
#menu {
	width: auto;
	height:45px;
	margin: 8px;
	background-color: #B40000;
	font-size: 16px;
	font-family: 'Cambo',serif;
	font-size: 25px;
	text-align: center;				/*position du texte du menu*/
	padding: 8px;					/*largeur rectangle rouge*/
	border-radius: 8px;
	-webkit-border-radius: 8px;		/*arrondissement des cotés du rectangles*/
	-moz-border-radius: 8px;		
	-o-border-radius: 8px;
}
#menu ul {
	margin: 0px;
	padding: 8px 0;					/*largeur rectangle rouge*/
	list-style: none;
	height: auto;
}
#menu li {
	display: inline;				/*les 4 titres alignés*/
	padding: 8px;					/*espace entre les titres des menus*/
}
#menu a {
	color: #FFF;					/*couleur texte menu*/
	padding: 10px;					/*dimension des carrés des menus*/
	text-decoration: none;
}
#menu a:hover {
	background-color: #B3B3B3;
	color: #FFF;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
}
#menu li .active {
	background-color: #B3B3B3;
	color: #FFF;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
}
#menu img{
	width:20px;
	height:20px;
	position: relative;
}

.sidebar ul li{
	list-style: none;
	font-size: 0.8em;
	display:inline-block;
	padding: 15px;
	text-decoration: underline;
	width:30%;
	text-align: center;
}
/* image */
#image{
	width:100%;
	max-width:1000px;
	margin:auto;
}
#image img{
	margin: 0;	
	width:234px;
	height:158px;
	position: relative;
	z-index: 3;
	margin-top:-100px;
}

h2{
	
	margin-top:20px;
}
.size{
	
	font-size: 14px;
	
}
.info{
	font-size: 25px;
	text-transform:capitalize;
}
.card:hover .info{
	font-size: 25px;
	text-transform:capitalize;
	margin-top:-50px;
}

/* transition */
.container{
	margin-top: 75px;								/*placer le carré*/
	text-align: center;								/*placer le carré*/
}

.card{
	display : inline-block;							/*aligne les deux images*/
	width: 254px;									/*longueur carré*/
	height: 208px;									/*largeur carré*/
	background-color: #CECECE;
	border-radius: 4px;								/*forme des coins*/
	padding: 20px 20px;				
	z-index: 2;										/*plan de l'élément*/
	cursor: pointer;								/* met la souris en mode pointer*/
	position: relative;
	margin-top:20px;
	margin-left:5px;
	margin-right:5px;
	overflow:hidden;
}

#image .transition {									/* animation carré image */
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#image .card:hover{	
	transform: scale(1.1, 1.1);
	box-shadow: 0 5px 40px 0 rgba(0,0,0,.2);
	z-index: 8;
	opacity: 1;
	background: linear-gradient(to bottom right, #F24C27, #F2EFDC);
 
}

#image .card img{
	
	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	transition:all .4s ease;
}

#image .card:hover img{	
  left:-300px;
 }
 
 #image p{
	
	height:100px;
	width:80px;
	font-weight:normal;
	margin: auto;
	opacity:0;
	position:relative;
	font-size:15px; 
	text-align:justify;
	
}
#image .card:hover p{
	height:150px;
	width:250px;
	opacity:1;
	word-wrap: break-word;
}

.card:active{
	opacity: 0.9;
}


/* footer */
footer {
	
	width : auto;
	height : 120px;
	background: rgb(55,55,55);
	border-radius: 8px;
	margin :auto ;
	margin-top:75px;
	position:relative;
	bottom: 0;
	margin-right:8px;
	margin-left:8px;
	font-size:10px;
	padding-top:5px;

}
.contact{
	margin-left: 10px;
	font-size:15px;
	display: inline;
	color: #8DB9ED;
}
.contact:hover {
	color: #CCCCCC;
	cursor:pointer;
}


/* footer privacy */
hr{
	margin-top:50px;
	margin-left: 10px;
	margin-right:10px;
	border: 0;
	background-position: 50%;
	box-sizing: border-box;
  
}
.line_footer{

	margin-top:80px;
	position:relative;
	margin-left: 5px;
	margin-right:5px;
	background:#CCCCCC;
	height: 1px;
	
}
.privacy{
	margin-left: 10px;
	color: #CCCCCC;
	width:200px;
}


/* footer icone */
.ico {
	margin:0px;
	position:absolute;
	right:10px;
	width:370px;
	height:100px;
	display: inline;
	font-size : 10px;
}
.tel img{
	margin-top:0px;
	width:20px;
	height:20px;
}
.tel {
	height:20px;
	width:auto;
	text-align:justify;
}
.tel span,.email span,.pos span{
	
	color:#FFFFFF;
}
.tel p,.email p,.pos p{
	
	color:rgb(192,192,192);
	font-size:12px;
	position:relative;
	margin-left:10px;
	top:-6px;
	display: inline;
}
.email img{
	margin-top:10px;
	margin-left:-2px;
	width:22px;
	height:22px;
	
}
.mail{
	color:#FFFFFF;
}
.pos  img{
	margin-top:3px;
	margin-left:-4px;
	width:25px;
	height:25px;
}

/* barre rouge */
.fade {							
	height: 1px;
	color: red;
	background-image: linear-gradient(90deg, rgba(255, 0, 0, 0), red 50%, rgba(255, 0, 0, 0) 100%);
}

#contenu{
	display:block;
	max-width:1200px;
	margin:auto;
}#contenu img{
	width:390px;
	transform:          rotate(90deg);
	-ms-transform:      rotate(90deg);
	-moz-transform:     rotate(90deg);
	-webkit-transform:  rotate(90deg);
	-o-transform:       rotate(90deg);
	margin-top:100px;
}a.blue{
	color:blue;
}p{
	text-align:center;
}