@font-face{ font-family:'infini_safari'; src:url('../font/infini-gras-safari.woff2') format('woff2'), url('../font/infini-gras-safari.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'infini'; src:url('../font/infini-gras.woff2') format('woff2'), url('../font/infini-gras.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'infini_safari'; src:url('../font/infini-italique-safari.woff2') format('woff2'), url('../font/infini-italique-safari.woff') format('woff'); font-weight:normal; font-style:italic; }
@font-face{ font-family:'infini'; src:url('../font/infini-italique.woff2') format('woff2'), url('../font/infini-italique.woff') format('woff'); font-weight:normal; font-style:italic; }
@font-face{ font-family:'infini_picto'; src:url('../font/infini-picto.woff2') format('woff2'), url('../font/infini-picto.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'infini_safari'; src:url('../font/infini-romain-safari.woff2') format('woff2'), url('../font/infini-romain-safari.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'infini'; src:url('../font/infini-romain.woff2') format('woff2'), url('../font/infini-romain.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'print_clearly'; src:url('printbold-webfont.woff2') format('woff2'), url('printbold-webfont.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face{ font-family:'print_clearly'; src:url('printclearly-webfont.woff2') format('woff2'), url('printclearly-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face{ font-family:'print_clearly'; src:url('printdashed-webfont.woff2') format('woff2'), url('printdashed-webfont.woff') format('woff'); font-weight:normal; font-style:italic; }

@font-face{font-family:'menlo';src:url('../font/menlo-bold-webfont.woff2') format('woff2'),
url('../font/menlo-bold-webfont.woff') format('woff');font-weight:bold;font-style:normal;}
@font-face{font-family:'menlo';src:url('../font/menlo-bolditalic-webfont.woff2') format('woff2'),
url('../font/menlo-bolditalic-webfont.woff') format('woff');font-weight:bold;font-style:itlic;}
@font-face{font-family:'menlo';src:url('../font/menlo-italic-webfont.woff2') format('woff2'),
url('../font/menlo-italic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}
@font-face{font-family:'menlo';src:url('../font/menlo-regular-webfont.woff2') format('woff2'),
url('../font/menlo-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal;}

*, *::before, *::after { margin:0; padding:0; border:0; background-repeat:no-repeat; box-sizing:border-box; }
*:lang(fr), *:lang(fr) * { quotes:"« " " »" "‘" "’"  }
*:lang(en), *:lang(en) * { quotes:"“" "”" "‘" "’" }

html { font-size:0.58vw; }
body { font-family:Verdana,Helvetica,sans-serif; font-size:1.3rem; color:#333; background-color:#000;}

video, img, audio { width:100%; height:auto;}
p img { width:100%; height:auto;}
/*a{ background-color:#fff; line-height:1%;}*/

a{ color:#ccc; background-color:transparent; }
a:hover{ color:#fff; }
.capital { text-transform:uppercase; font-size:4rem; }
.zone-lien {color:#ccc ;text-decoration:none; background-color:transparent;font-weight:normal; }

a.lien-externe {color:#ccc ;text-decoration:none; font-weight:normal; }
a.lien-externe:hover {color:#EF604D; text-decoration:underline; font-weight:normal; }

p.boutoncentre{text-align:center;}
a.bouton-interne:hover {color:#111; font-style:normal; text-decoration:none; background-color:#fff; }
a.bouton-interne{display:inline-block; background-color:#EF604D;  color: #000;  text-decoration:none;   font-size:1.8rem; font-family:"menlo", sans-serif; font-style:bold;  margin-top:20px; text-transform:uppercase; text-align:center; padding: 15px 10px 12px 10px;}



body.flex{ display:flex; flex-direction:column; width:100vw; height:100vh; overflow:hidden; }
body.flex iframe { flex-grow:1; }
body.flex nav { flex-grow:0; background-color:#eee; font-family:"menlo"; }
body.flex nav ul{ display:flex; width:100%; height:100%; padding:0; margin:0; list-style-type:none; }
body.flex nav ul li{ flex-grow:1; }
body.flex nav ul li a{ display:block; background-color:#555; color:#fff; text-decoration:none; font-weight:normal; font-size:1.6rem; line-height:3rem; text-align:center; }
body.flex nav ul li a:hover{ background-color:#fff; color:#222; cursor:pointer;}
body.flex nav ul li:nth-child(1) a{ background-color:#000; color:#fff;}
body.flex nav ul li:nth-child(1) a:hover{ background-color:#fff; color:#555;}
body.flex nav ul li:nth-child(15) a,
body.flex nav ul li:nth-child(16) a,
body.flex nav ul li:nth-child(17) a{ background-color:#888; color:#555; }
body.flex nav ul li:nth-child(15) a:hover,
body.flex nav ul li:nth-child(16) a:hover,
body.flex nav ul li:nth-child(17) a:hover{ background-color:#000; color:#fff; }

div#accroche { margin:0; padding:0;text-align:center; background-color:#000;}



div#ALL { background-color:#000;  }
div#ALL p{ font-family:"menlo","infini",sans-serif; margin:10px 20px; color:#fff; font-size:1.6rem; }
div#ALL p.gris { color:#ccc;}

div#ALL h1 { font-size:2rem; color:#fff; font-family:"menlo",Helvetica,sans-serif;  }
div#ALL h2, div#ALL  h3 { font-size:1.3rem; color:#fff; font-family:"menlo",Helvetica,sans-serif; color:#eee;  }
div#ALL h4{ font-size:3rem; font-family:"menlo",Helvetica,sans-serif; font-weight:normal;}
div#ALL h4.capital, h4.capitalb { text-transform:uppercase; color:#fff;  font-size:5rem; font-style:normal;  font-family:"menlo", Helvetica,sans-serif;}
div#ALL h4.capitalb { color:#000;  font-size:3rem; font-family:Helvetica, "menlo", sans-serif; font-style:normal; font-weight:bold;}
div#ALL h5, div#ALL h6{ font-size:1.4rem; margin:0.5rem 0; color:#ccc; font-weight:normal; font-family:"menlo", Helvetica,sans-serif;}
div#ALL h6.numero{ padding:0; text-transform:uppercase; color:#000;  font-size:4rem; font-style:normal; font-weight:bold; font-family:Helvetica, "menlo", sans-serif;}
div#ALL h5.nom {font-size:2rem; color:#000; font-weight:normal; font-family:Helvetica, "menlo", sans-serif;}

/*accroche*/
div#accroche { margin:0; padding:5px ; font-style:normal; font-size:2rem; text-align:center; background-color:#000; color:#fff;  	font-family:"menlo",sans-serif; }


*[class*="voile-"]{ color:#fff; }
*[class*="voile-"] > * { position:relative; color:#fff; }
*[class*="voile-"]::before{ position:absolute; content:''; top:0; bottom:0; left:0; right:0; background-color:rgba(255,255,255,0.6); }
*.voile-noir::before  { background-color:rgba( 0, 0, 0, 0.6); --wip-tag:'section div'; } 
*.voile-white::before  { background-color:rgba( 256, 256, 256, 0.9); --wip-tag:'section div'; border:20px solid black;} 


/* Portraits*/
ol { list-style-type:decimal; padding-left:1vw; }

ol.liste { list-style-type:none; display:flex; position:relative; margin:0 auto; padding:0; justify-content:space-between; align-items:center; align-content:center; flex-wrap:wrap; width:100vw; height:3vw;}
ol.liste > li { position:relative; overflow:hidden; background-size:40% 40%; background-position:center center; transition:all 0.6s ease-in-out; cursor:pointer;}


ol.casier, ol.casier2 { list-style-type:none; display:flex; position:relative; margin:0 auto; padding:0; justify-content:space-between; align-items:center; align-content:center; flex-wrap:wrap; width:100vw; }
ol.casier > li { position:relative; overflow:hidden; background-size:90% 90%; background-position:center center; transition:all 0.6s ease-in-out; cursor:pointer; }
ol.casier2 > li { position:relative; overflow:hidden; background-size:90% auto; background-position:center center; transition:all 0.6s ease-in-out; cursor:pointer; }

/*ol.casier > li.over,
ol.casier2 > li.over,
ol.casier > li:hover,
ol.casier2 > li:hover { background-size:120% 120%; }
*/
ol.casier > li > [class*="voile-"], ol.casier2 > li > [class*="voile-"]{ position:absolute; top:0; left:-100%; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff; padding:4vw; transition:all 0.6s ease-in-out; cursor:pointer; }
ol.casier2 > li > [class*="voile-"]{ color:#000;  }
ol.casier > li > [class*="voile-"] > *, ol.casier2 > li > [class*="voile-"] > *{ margin:1vh 0; }

ol.casier.by4, ol.casier2.by4{ min-height:45vw; }
ol.casier.by4 > li, ol.casier2.by4 > li, ol.casier2.by4 > li > [class*="voile-"] { width:25vw; height:25vw; overflow:hidden; text-decoration:none;}
ol.casier > li.over [class*="voile-"],
ol.casier > li:hover [class*="voile-"]{ left:0; }

ol.casier2 > li.over [class*="voile-"],
ol.casier2 > li:hover [class*="voile-"]{ left:0; }

/*
div.signature{ position:absolute; bottom:2%; width:100%; height:20%; margin:0; padding:0;text-align:center;  z-index:120; }
div.signature h1{ font-family:Helvetica,"verdana", sans-serif;  margin:0; padding:5px 15px 10px 15px; font-size:3rem; color:#fff;   }
div.signature h2{ text-transform:uppercase; padding:25px 7px; font-size:2rem; color:#ccc; font-family:Helvetica,"verdana", sans-serif;  }
div.signature p{ font-family:Helvetica, "menlo", "verdana",sans-serif; margin:10px 20px; color:#ccc;text-align:right; font-size:1.6rem; }
div.signature span{  color:#fff; }

.colonne {  display:flex; flex-wrap: wrap ; flex-direction: row ; justify-content: center; align-items: stretch;}
.colonne section{flex-wrap: wrap ; max-width:40%;}
.colonne section:nth-of-type(2){ justify-content: flex-end;}
.colonne section:nth-of-type(1) p{ text-align:left; margin-left:15%;}
.colonne section:nth-of-type(2) p{ text-align:right; margin-right:15%;}
.colonne section p {background-color:#000; opacity:0.8;}

.signature.colonne2 { height:25%;  display:flex; flex-wrap: wrap ; flex-direction: row ; justify-content: center; align-items: baseline;}
.colonne2 section{flex-wrap: wrap ; font-style:normal;  }
.colonne2 section:nth-of-type(1) p{ text-align:center; }
.colonne2 section:nth-of-type(2) p{ text-align:center; }
*/

@media (max-width:1023px) { html{ font-size:1.2vw; } }
@media (max-width:736px ) { html{ font-size:2.0vw; } }
@media (max-width:568px ) { html{ font-size:2.0vw; } }
@media (max-width:335px ) { html{ font-size:2.0vw; } }

/*** TABLET ****/
@media screen and (min-device-width:737px ) and (max-device-width:1024px ) and (orientation:portrait), screen and (min-device-width:375px ) and (max-device-width:768px ) and (orientation:landscape), screen and (min-width:737px) and (max-width:1023px)
{
	html{ font-size:0.5vw; }
	#ALL ol.casier > li.click > [class*="voile-"]{ left:0; }
	#ALL ol.casier2 > li.click > [class*="voile-"]{ left:0; }
}

@media screen and (min-device-width:737px ) and (max-device-width:1024px ) and (orientation:portrait)
{
	div#accroche { font-size:0.8rem;}
	ol.casier.by4 > li,#ALL ol.casier2.by4 > li, #ALL ol.casier2.by4 > li > [class*="voile-"] { width:33.33vw; height:33.33vw; overflow:hidden;}

}
@media screen and (max-device-width:736px ) and (orientation:portrait), screen and (max-device-width:374px ) and (orientation:landscape), screen and (max-width:736px)
{
	div#accroche { font-size:1.3rem;}
	#ALL ol.casier { }
	#ALL ol.casier > li {  width:100vw; height:100vw; }
	#ALL ol.casier > li.reveal > [class*="voile-"]{ left:0; }
	
	#ALL ol.casier2 > li{  width:100vw; height:100vw; }
	#ALL ol.casier2 > li > [class*="voile-"] {  width:100vw; height:100vw; padding:10vw; }
	#ALL ol.casier2 > li.reveal > [class*="voile-"]{ left:0; }
}