@charset "utf-8";
/* CSS Document */

body {
	background-color: #E2E2E2;
	color: #808080;
	padding:10px;
}



h2{
	background-color:#e10031;
	padding: 5px 10px 5px 10px;
	color:white;	
	font-family: 'Kaushan Script', cursive;
	display: inline-block;
}

.txtjustify{
	text-align:justify;	
}

hr{
	height: 1px;
	color: #123455;
	background-color: #e10031;
	border: none;
	margin-top:30px;
	margin-bottom: 30px;
}

.strong{
	font-weight:bold;	
}

#fiches{
	
}

.fiche{
	padding:10px;
	overflow:hidden;
	float:left;
}

.fiche:hover .contenu, #comvous:hover{
	transform: scale(1.02);
	transition: all .2s ease-in-out;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.fiche:hover .nom, .fiche:hover .zoom{
	display: block;
}
.fiche:hover .contenu{
	opacity: 0.7;
}
.fiche#comvous:hover .contenu{
	opacity: 1;
}

.fiche .contenu{
	display:block;
	background-color:white;
	height:100%;
	padding: 10px;
	background-repeat:no-repeat;
	background-size: cover;
	background-position: top center;
	position: relative;
	cursor:pointer;
	z-index:99;
}
.fiche#comvous-small{
	height:auto !important;
}

.fiche .nom{
	background-color:#e10031;
	position:absolute;
	bottom:10px;
	left:0px;
	padding: 5px 10px 5px 10px;
	color:white;	
	font-family: 'Kaushan Script', cursive;
	font-size:1.2em;
	display: none;
	z-index:100;
}
.fiche .zoom{
	position:absolute;
	left:50%;
	top: 50%;
	width:16%;
	height: 16%;
	margin-left:-8%;
	margin-top:-8%;
	background:url(../images/zoom.png) no-repeat;
	background-size: contain;
	background-position: center center;
	display: none;
	z-index:101;
	cursor: pointer;
}

.ficheDetails{
	display: none;
	position: fixed;
	top:10%;
	left: 10%;
	width:80%;
	height: 80%;
	background-color:white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index: 1000;
	overflow-y: scroll;
}


.ficheDetails .social{
	overflow:hidden;	
}

.ficheDetails .social a span{
	background-color:#e10031;
	padding:5px;
	font-size:0.8em;
	color:white;
	text-decoration:none !important;
}

.ficheDetails .socialIco{
	text-align:center;
	float:left;
	width:20%;
}

.ficheDetails i{
	color:#e10031;
	padding: 5px;
	margin-right:10px;
}

.ficheDetails .details{
	height:100%;
}

.ficheDetails .details .tb{
	text-align:center;
	position:relative;
	margin:auto;
	z-index:199;
}
.ficheDetails .details img{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transform: rotate(-5deg);
}
.ficheDetails .details .infos{
	width:100%;
	position:relative;
	margin:auto;
	z-index:200
}

.ficheDetails .close{
	position: fixed;
	right:20px;
	top: 10px;
	width:30px;
	height:30px;
	background: url(../images/close.png) center center no-repeat;
	background-color:white;
	cursor: pointer;
	z-index:1010;
}
	
#overlay{
	display:none;
	background-color: #e10031;
	opacity: 0.8;
	width:100%;
	height:100%;
	position:fixed;
	z-index:999;
	margin-left:-10px;
	margin-top:-10px;
}

#comvous{
	display:inline-block;
	float:left;
	padding:10px;
	cursor:pointer;
	z-index:500;
	background-color:white !important;
	
}
#comvous .contenu{
		overflow:hidden;	
}

#comvous .contenu, #comvous-small .contenu {
	background-color:white !important;
	font-family:"Oswald";
	font-size:1.5em;
	font-weight: bold;
	line-height: 1.1em;
	padding: 10px;
}
#comvous-small{
	display: none;
}
#comvous-small{
	padding:15px;
}
#comvous .contenu .normal, #comvous-small .contenu .normal{
	font-size:0.7em;
	font-weight:normal;
	line-height: normal;
}

@media (max-width: 1000px ) {
	#comvous-small{
		display:block;
		width:100% !important;	
	}
	#comvous{
		display:none;	
	}
	.fiche {
		width:50% !important;
		height:300px !important;
		margin:0 !important;
 	}
	.ficheDetails .details{
		display:block;
	}
	.social span{
		display:none;
	}
}

@media (max-width: 576px  ) {
	
	.fiche {
		width:100% !important;
 	}
}