@font-face {
  font-family: 'A Janna TL';
  src: url('../fonts/jannah.ttf');
  font-weight: normal;
  font-style: normal;
}

.grid {
	position: relative;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	/*margin: 10px 1%;
	width: 270px;
	max-height: 188px;*/
	width: 100%;
	background: #000;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;

}

.grid figure figcaption {
	/*padding: 2em;*/
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption .icone_plus{
	font-size:14px;
	color:#fff;
	position:absolute;
	text-align:center;
	width:100%; 
	line-height:7.5; 
	height:100%;
	opacity:0;
}
.bloc_homep2 .grid figure figcaption .icone_plus{line-height:65px; }

.grid figure figcaption .icone_plus:hover{
	opacity:1;
}
.bloc_homep2 .grid figure img {height:80px;width:100%;object-fit:cover;}

.bloc_homeactg .grid figure figcaption .icone_plus{ position:absolute; font-size:12px; line-height:1.5; opacity:0; border:solid 1px #fff; padding-left: 15px; padding-right: 15px; width: 120px; height: 40px; top: 50%; left: 50%; margin-left: -60px; margin-top:-20px; line-height: 40px; color:#fff; text-indent:0}
.bloc_homeactg .grid figure figcaption:hover .icone_plus:hover{ background:#fff; color:#000 !important;}
.bloc_homeactg .grid figure figcaption:hover .icone_plus{ opacity:1}

.bloc_homeactg .grid figure figcaption .icone_plus span{ font-size:12px !important}

.bloc_homeact .grid figure figcaption .icone_plus{ position:absolute; font-size:14px; line-height:7; opacity:0}
.bloc_homeact .grid figure figcaption:hover .icone_plus{ opacity:1}

.bloc_homeright .grid figure figcaption .icone_plus{ position:absolute; font-size:14px; line-height:7; opacity:0}
.bloc_homeright .grid figure figcaption:hover .icone_plus{ opacity:1}

.bloc_homehf .grid figure figcaption .icone_plus{ position:absolute; font-size:18px; line-height:0; top:50%; margin-top:-7px; opacity:0}
.bloc_homehf .grid figure figcaption:hover .icone_plus{ opacity:1}

.page_realisation .grid figure figcaption .icone_plus{ position:absolute; font-size:12px; line-height:1.5; opacity:0; border:solid 1px #fff; padding-left: 15px; padding-right: 15px; width: 120px; height: 40px; top: 50%; left: 50%; margin-left: -60px; margin-top:-20px; line-height: 40px; color:#fff; text-indent:0}
.page_realisation .grid figure figcaption:hover .icone_plus:hover{ background:#fff; color:#000 !important;}
.page_realisation .grid figure figcaption:hover .icone_plus{ opacity:1}

.page_actualites .grid figure figcaption .icone_plus{ position:absolute; font-size:12px; line-height:1.5; opacity:0; border:solid 1px #fff; padding-left: 15px; padding-right: 15px; width: 120px; height: 40px; top: 50%; left: 50%; margin-left: -60px; margin-top:-20px; line-height: 40px; color:#fff; text-indent:0}
.page_actualites .grid figure figcaption:hover .icone_plus:hover{ background:#fff; color:#000 !important;}
.page_actualites .grid figure figcaption:hover .icone_plus{ opacity:1}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/*---------------*/
/***** Julia *****/
/*---------------*/
figure.effect-julia {
	background: #2f3238;
}

figure.effect-julia img {
	max-width: none;
	max-height:188px !important;
	height: 188px;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	text-align: left;
}

figure.effect-julia h2 {
	position: relative;
	padding: 0.5em 0;
}

figure.effect-julia div{
	margin:1.3em;
	height:125px;
}
figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	opacity:0;
	padding: 0.4em 1em;
	background: rgba(255,255,255,0.9) url(../img/puce.png) center left no-repeat;
	color: #2f3238;
	text-transform: none;
	font-size: 11px;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-360px,0,0);
	transform: translate3d(-360px,0,0);
	width:100%
}
figure.effect-julia p:hover {
	background: rgba(0,0,0,0.9) url(../img/puce2.png) center left no-repeat; color:#fff;
}

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-julia h2{
	font-family: 'A Janna TL';
	font-size:16px;
	height:45px;
	line-height:1.5;
	bottom:0;
	text-align:center;
	background:#000;
	width:100%
}
figure.effect-julia h2{
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-julia:hover h2{
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}
figure.effect-julia:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

/*---------------*/
/***** Layla *****/
/*---------------*/

figure.effect-layla {
	background:none;
}

figure.effect-layla img {
	/*height: 390px;*/
}

figure.effect-layla figcaption {
	/*padding: 3em;*/
}

figure.effect-layla figcaption:hover{background:rgba(0,0,0,0.5)}
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
	position: absolute;
	content: '';
	opacity: 0;
	
}

figure.effect-layla figcaption::before {
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

figure.effect-layla h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-layla p {
	padding: 0.5em 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
	-webkit-transform: translate3d(0,-0px,0);
	transform: translate3d(0,-0px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
	/*opacity: 0.7;*/
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}


@media screen and (max-width: 50em) {
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}


/*-----------------*/
/***** Hera *****/
/*-----------------*/


figure.effect-hera {
	background: none;
}
figure.effect-hera figcaption:hover{background:rgba(0,0,0,0.5)}
figure.effect-hera h2 {
	font-size: 158.75%;
}

figure.effect-hera h2,
figure.effect-hera p {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera figcaption::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	border: 2px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}
.bloc_imggalerie1 figure.effect-hera figcaption::before {
	width: 150px !important;
	height: 150px !important;
}
.bloc_imggalerie2 figure{ margin:0 0 0;}
.bloc_imggalerie2 figure.effect-hera figcaption::before {
	width: 75px !important;
	height: 75px !important;
}

.bloc_imggalerie2 figure.effect-hera p a i{ font-size:1.5rem !important;}

figure.effect-hera p {
	width: 100px;
	text-transform: none;
	font-size: 121%;
	line-height: 2;
}

figure.effect-hera p a {
	color: #fff;
}
figure.effect-hera p a i{ font-size:2rem}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
	opacity: 0.6;
}

figure.effect-hera p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
	-webkit-transform: translate3d(-60px,60px,0);
	transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
	-webkit-transform: translate3d(60px,60px,0);
	transform: translate3d(60px,60px,0);
}

figure.effect-hera:hover figcaption::before {
	opacity: 1;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h2 {
	opacity: 0;
	-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
	transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
	opacity: 1;
}

/*---------------*/
/***** Chico *****/
/*---------------*/

figure.effect-chico img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1.12);
	transform: scale(1.12);
}

figure.effect-chico figcaption {
	padding: 3em;
}

figure.effect-chico figcaption::before {
	position: absolute;
	top: 15px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	border: 1px solid #fff;
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico h2 {
	padding: 20% 0 10px 0;
}

figure.effect-chico p {
	margin: 0 auto;
	max-width: 200px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.icone_galery{ font-size:2rem !important; margin-top:0px;}

/*---------------*/
/***** Chicop *****/
/*---------------*/

figure.effect-chicop img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chicop:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1.12);
	transform: scale(1.12);
}

figure.effect-chicop figcaption {
	padding: 3em;
}

figure.effect-chicop figcaption::before {
	position: absolute;
	top: 15px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	border: 1px solid #fff;
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

figure.effect-chicop figcaption::before,
figure.effect-chicop p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chicop h2 {
	padding: 20% 0 10px 0;
}

figure.effect-chicop p {
	margin: 0 auto;
	max-width: 200px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-chicop:hover figcaption::before,
figure.effect-chicop:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.icone_galery{ font-size:2rem !important; margin-top:0px;}


/*---------------*/
/***** Roxy *****/
/*---------------*/

figure.effect-roxy {
	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

figure.effect-roxy img {
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-0px,0,0);
	transform: translate3d(-0px,0,0);
}

figure.effect-roxy figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-20px,0,0);
	transform: translate3d(-20px,0,0);
}

figure.effect-roxy figcaption {
	padding: 3em;
	text-align: left;
}

figure.effect-roxy h2 {
	padding: 30% 0 10px 0;
}

figure.effect-roxy p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
}

figure.effect-roxy:hover img {
	opacity: 0.7;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby {
	/*background-color: #17819c;*/
	background-color: #000;
}

figure.effect-ruby img {
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-ruby:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

figure.effect-ruby h2 {
	margin-top: 20%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
	margin: 1em 0 0;
	padding: 3em;
	border: 1px solid #fff;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0) scale(1.1);
	transform: translate3d(0,20px,0) scale(1.1);
} 

figure.effect-ruby:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-ruby:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}
@media only screen and (min-device-width: 769px) and (max-device-width: 1024px) {
figure.effect-julia div{ height:100px}
}
@media (min-width: 1400px){
figure.effect-julia h2 { margin-top:25px}
}