@font-face {
font-family:"bric-a-brac";
src:url("../font/bric-a-broc/bric-a-brac.eot");
src:url("../font/bric-a-broc/bric-a-brac.eot?#iefix") format("embedded-opentype"),
url("../font/bric-a-broc/bric-a-brac.woff") format("woff"),
url("../font/bric-a-broc/bric-a-brac.ttf") format("truetype"),
url("../font/bric-a-broc/bric-a-brac.svg#bric-a-brac") format("svg");
font-weight:normal;
font-style:normal}
/*
@font-face{font-family:robotocondensed;src:url(../../../font/robotocondensed.woff2) format('woff2'),url(../../../font/robotocondensed.woff) format("woff"),url(../../../font/robotocondensed.svg) format("svg"),url(../../../font/robotocondensed.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:bric-a-brac;src:url(../../../font/bric-a-brac.woff) format("woff"),url(../../../font/bric-a-brac.ttf) format("truetype"),url(../../../font/bric-a-brac.svg#bric-a-brac) format("svg");font-weight:400;font-style:normal}*/




/* liste images*/

.diapo{
overflow:hidden;
position:relative}
/*
.diapo li {
width:25%;
float:left;     height: 250px;}


.diapo li > a img{
display:inline-block;
height:auto;
width:220px;
border:3px solid white;
box-shadow:0 0 5px hsla(0,0%,0%,.4)}
*/
.diapo figure > a{color:#fff;display:block;position:relative}

.diapo figure > a .clic{
position:absolute;
width:100%;
height:100%;
top:0;
left:50%;
-ms-transform:translatex(-50%);
-webkit-transform:translatex(-50%);
transform:translatex(-50%);
text-align:center;
font-size:14px;
opacity:0;
background:rgba(0,0,0,.6);
transition:opacity .3s linear;}

.diapo figure > a:hover .clic{opacity:.8}

.diapo figure > a .clic:before{
position:absolute;
/*content:'Cliquez pour agrandir'*/
content:"\e027";font-family:"bric-a-brac";
font-size:300%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}


/*lightbox*/

/*description image*/
.des{
display:block;
position:absolute;
bottom:-100%;
padding:10px;
color:#fff;
font-size:1rem;
text-align:center;
background:hsla(0,0%,0%,.5);
width:100%;
min-height:100px}


/*boutons suivant et precedent lightbox*/
.prece,
.suiva{
display:none;
text-decoration:none;
opacity:.6;
z-index:2;
font-size:54px;
position:absolute;
color:#fff;
top:45%}

.suiva{right:10%}
.prece{left:10%}

.suiva:before{content:"\e068";font-family:"bric-a-brac"}

.prece:before{content:"\e05a";font-family:"bric-a-brac"}

.prece:hover,.suiva:hover{transition:.8s;opacity:1}

/*fermeture lightbox */
.ferm{display:none;
text-decoration:none;
color:#fff;
position:absolute;
top:0;
right:0;
font-size:42px;
padding:20px;}
.ferm:before{content:"\e085";font-family:"bric-a-brac"}
/*fin fermeture lightbox */

/*design image et effet lightbox */	
.trans-image{width:0;height:0;position:fixed;overflow:hidden;left:0;top:0;min-height:100%;z-index:999999;background:hsla(0,0%,0%,.8);}
.trans-image img{display:none;top:10%;position:absolute;left:50%; transform: translateX(-50%) ; border:5px solid #fff; width:auto; }
.trans-image:target{width:100%;height:100%;}
.trans-image:target > .prece,
.trans-image:target > .suiva,
.trans-image:target > img,
.trans-image:target > .ferm{
display:block;
animation:effet 2s ease-in-out 2s backwards;
-webkit-animation:effet .4s ease-in-out .4s backwards}

.trans-image:target > .prece,
.trans-image:target > .suiva{animation-delay:.6s;-webkit-animation-delay:.6s}

.trans-image:target > .des{animation:effet1 .4s .6s forwards;-webkit-animation:effet1 .4s .6s forwards}

.trans-image:target > img{animation:effet2 ; -webkit-animation:effet2   }

/*animations*/
@keyframes effet{
0%{transform:scale(0)}
50%{transform:scale(1.2)}
100%{transform:scale(1)}}
	
	
@keyframes effet{
0%{transform:scale(0)}
50%{transform:scale(1.2)}
100%{transform:scale(1)}}



@keyframes effet1{100%{bottom:0}}
@-webkit-keyframes effet1{100%{bottom:0}}


@keyframes effet2{100%{ translateX(-50%)}}
@-webkit-keyframes effet2{100%{ translateX(-50%)}}
/*fin animations*/

@media (max-width : 599px) {
.trans-image img{left:50%; margin-left: 0; transform: translateX(-50%); width:90%}
	}