@charset "utf-8";

.bandeau {
	width: 100%;
	max-width:1024px;
	margin-left:auto; 
	margin-right:auto;
	margin-top:140px;
	height: 268px;
	position: relative;
	background-position: center 10px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/images/mosaik/trouver_son_bonheur.jpg");
	overflow: hidden;
}
.bandeau .trouver {
	width:100%;
	position: absolute;
	color: #FFFFFF;
	font-size: 50px;
	font-weight: lighter;
	padding-top : 110px;
	padding-left: 5%;
	font-family: 'Roboto', sans-serif;
	margin-left: auto;
	margin-right: auto;
	text-shadow: #000 0 0 2px;
}
.bandeau .bonheur {
	width:100%;
	position: absolute;
	color: #FFFFFF;
	font-size: 60px;
	font-weight: bold;
	left: 15%;
	top: 170px;
	font-family: 'Roboto', sans-serif;
	margin-left: auto;
	margin-right: auto;
	text-shadow: #000 0 0 2px;
}


.galerie, .filters { width:100%; max-width:1024px; margin-left: auto; margin-right: auto; z-index: 1;}

.filters { text-align: center; margin-top: 20px;  }
.filters div { display: inline-block;  cursor:pointer; padding:10px; background-color: #8C724A; color:#fff; margin:10px; }

.card { position:relative; }
.card a { position:absolute; top:0; left:0; width:100%; height:100%; }

.card1 { width:320px; height:300px; margin-top:30px;  }

.card1 .card-photo { width:320px; height:200px; overflow: hidden; }
.card1 .card-photo div { width:100%; height:100%; background-position:center; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: all 1000ms linear; }

.card1 .card-photo:hover div { transform: scale(1.1); transition: all 1000ms linear; }
.card1 .card-nom { font-weight: 900; }

.card3 { width:1024px; height:340px; cursor: pointer; margin-top:30px; }
.card3:hover .card-photo div { transform: scale(1.2); transition: all 1500ms linear; }
.card3 .card-photo { position:relative;  display:inline-block; width:66%; height:300px; overflow:hidden;  }
.card3 .card-photo div { width:100%; height:100%; background-position:center; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: all 1000ms linear; }
.card3 .card-catalogue { display:inline-block; width:33%; height:300px; background-position:center; background-size: contain; background-repeat: no-repeat; }
.card3 .card-nom { font-weight: 900; }

.card3r .card-text { text-align: right; }


@media screen and (min-width: 1024px) and (max-width: 640px) {
   	.galerie, .filters { width:1024px;}
 	
}

@media screen and (min-width: 674px) and (max-width: 1023px) {
  	.galerie, .filters { width:674px;}
	.galerie .card3 { width:674px; }
	.galerie .card3 .card-photo { width:100%; }
	.galerie .card-catalogue { display:none; }
}

@media screen and (max-width: 673px) {
 	.bandeau, .galerie, .filters { width:480px; }
	.galerie .card3 { width:480px; }
	.galerie .card3 .card-photo { width:100%; }
	.galerie .card-catalogue { display:none; }
	.galerie .card1 { margin-left:80px; }
	
	.galerie .card1 { height:310px; }
	.galerie .card3 { height:400px; }
	.galerie .card-text { font-size:20px; }
	.galerie .card3 .card-text { padding-left:20px; padding-right:20px; }
	
}