/*
* CSS pour le site le plus cool
*/



.page {

   /* Limit width and center page (*) */
   max-width: 1800px;
   margin: 0 auto;
   padding : 0 0 0 0;
    

   /* Align content vertically */
   display: flex;
   align-items: center;

   /* Column background */
   background-size: 1200px ;
	background-position: center;
	background-attachment:fixed;
}


.content {
   /* Extend content width */
   width: 100%; max-width: 1200px; margin: auto; padding: 0 0 0 12px ; 
}

#page-1 { top: 0;
	background-image: url(../images/desjouesphoto01.jpg); background-repeat: no-repeat; background-position: center;}
#page-1 .premier {background-color: white; margin: -5px 0 -5px 0;}
#page-2 {background-image: url(../images/desjouesphoto02.jpg); background-repeat: no-repeat; align-items: center; text-align: center; align-content: center;}
#page-3 {background-image: url(../images/desjouesphoto03.jpg); background-repeat: repeat-y;}
#page-4 {background-image: url(../images/desjouesphoto04.jpg); background-repeat: repeat-y;}
#page-5 {background-image: url(../images/desjouesphoto05.jpg); background-repeat: repeat-y; align-items: center; text-align: center; align-content: center; }
#fondblanc { background-color: white; margin: -5px 0 -5px 0 ; }
.visu { background-position: top;}
#polygones {margin: -1px 0 0 0;}


*{margin:0;padding:0;}
*:focus{outline:none;}
body{font-size:15px;letter-spacing:1px;font-family:"Century Gothic", "Calibri";background:#265368 ;color:#000; 
	background-image: url(../menu/background-up.jpg), url(../menu/background-down.jpg), url(../menu/background-big.jpg); 
	background-repeat: no-repeat, no-repeat, repeat-y; background-position: top center, bottom center, center;}
a{text-decoration:none;color:#d5b13f;}
a:hover{ border-bottom:1px solid #d5b13f;}
a:active{}
a img,
a.thumb-img{border:none;}
A:hover{}
u{border:0 !important;}
p{margin:0 0 9px 0;}
h1{font-size:32px;}
h2{font-size:24px}
h3{font-size:14px;}
h4{font-size:12px;}
#déjoué { margin: 0 auto 240px auto; text-align: center;}
.visu {max-width: 900px; margin: 700px 0 0 0;}
#menu{ }
#menu p{ font-size: 20px;}
#menu a{}
#content{height:100%;margin:-250px 0 0 0;padding:0 0 0 0;top:0;background-color:;}
#content p{}
#content A:link{}
#content A:visited{}
#content A:active{}
#content A:hover{}
#img-container{margin:0;padding:0 0 0 15px;z-index:1;}
#img-container p{width:100%;height:auto;margin:0;padding:0;}
#img-container img{position:relative;margin:0;z-index:1;}
#img-container a{border-bottom:none;}
#once{clear:left;}
#title {font-size:24px;letter-spacing:2px; text-align: center; margin-top: 15px; margin-bottom: 0}
#title img {margin-top: 20px;}
#end {text-align: center;}
.container{padding:0 5px 25px 0;}
.grisaille{color:#858174; margin: 5px 0 15px 0;}
.carres{margin:0 30px 30px 0; }
.expo{margin: 0 15px 15px 0; }



#menuimages a img {
    opacity: 0.7;/* l'opacite que vous voulez au depart */
    border: none;/* enlever les border d'une image en lien */
    -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* Hack IE8 */
    filter: alpha(opacity = 70); /* Hack IE 5-7 */
    -webkit-transition: opacity 0.4s ease-in-out;/* transition pour Chrome et Safari */
    -moz-transition: opacity 0.4s ease-in-out;/* transition pour Firefox */
    -o-transition: opacity 0.4s ease-in-out;/* transition pour Opéra */
    transition: opacity 0.4s ease-in-out; /* on écrit cette ligne à la fin de façon à ce que ce soit elle qui soit prise en compte lorsque l'attribut transition sera pris en compte par tous les navigateurs */
 }
 

#menuimages a:hover img, #images a:focus img {
    opacity: 1; /* opacite au survol */
    -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Hack IE 8 */
    filter: alpha(opacity = 100); /* Hack IE 5-7 */
}


header nav .menu{margin:0 0 ;text-align:center; background-image: url();}
header nav .menu ul li{display:inline-block;vertical-align:middle;text-align:center}
header nav .menu ul li a>span span.border{position:absolute;width:100%;height:1px;bottom:0; }
header nav .menu ul li a>span.white,header nav .menu ul li a>span.black,header nav .menu ul li a>span.over{position:absolute;overflow:hidden;text-align:left;margin-top:-4px; color:inherit; text-decoration:inherit; border-bottom:inherit; top:inherit; left:inherit;}
header nav .menu ul li a>span.black{color:#000;opacity:.5}
header nav .menu ul li a>span.white{color:#FFF;opacity:.7}
header nav .menu ul li a>span.over span.text,header nav .menu ul li a>span.over span.border{opacity:0}
header nav .menu ul li a>span.ref{opacity:0}
header nav .menu ul li a>span.white{display:none}header nav .menu ul li a>span.black{display:inline-block}
header nav .menu ul li:not(:first-child){margin:3px 20px 0 0; color:inherit; text-decoration:inherit; border-bottom:inherit; top:inherit; left:inherit;}
header nav .menu ul li:not(:first-child) a{padding:15px;letter-spacing:1.5px;color:#000;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; color:inherit; text-decoration:inherit; border-bottom:inherit; top:inherit; left:inherit;}





/* FOND NOIR TRANSPARENT SUR LES IMAGES CARRÉES */

/* LIEN AVEC LE CADRE BLANC SUR FOND NOIR */
html{ box-sizing:border-box; }
*{ box-sizing:inherit; }
/* TAILLE DU TEXTE */
html{ font-size:calc( 1em * 0.625); }

/* RESTE */

.ProjectList-ul{ padding:0; list-style:none; max-width:1650px; text-align:left; margin:0 auto; }

.ProjectList-projectListItem{ display:inline-block; margin:0 30px 0 0; vertical-align:top; width:auto; }

@media (max-width: 700px){ .ProjectList{ padding:0; }
  .ProjectList-projectListItem{ margin:0; width:50%; } }

@media (max-width: 400px){ .ProjectList-projectListItem{ width:auto; } }
.ProjectListItem-a{ display:block; position:relative; }

.ProjectListItem-a:hover, .ProjectListItem-a:active, .ProjectListItem-a:visited{ -ms-transform:none; transform:none; border:none; }

/* PETIT MOUVEMENT ET TRANSITION DU CARRÉ NOIR AU SURVOL */
.ProjectListItem-a > div{ position:absolute; top:0; bottom:3px; left:0; right:0; background-color:rgba(0, 0, 0, 0.70); padding:1.5rem; opacity:0; -ms-transform:translate(0, 1rem); transform:translate(0, 1rem); transition:opacity 200ms ease-in-out, transform 200ms ease-in-out; }

.ProjectListItem-a:focus > div, .ProjectListItem-a:hover > div, .ProjectListItem-a:active > div{ opacity:1; -ms-transform:translate(0, 0); transform:translate(0, 0); }

.ProjectListItem-a > img{ width:100%; }

.ProjectListItem-a > div > div{ display:table; table-layout:fixed; width:100%; height:100%; border:2px dashed #fff; padding:1em ; }

.ProjectListItem-title{ color:#fff; font-size:1.8rem; font-weight:400; text-align:center; display:table-cell; vertical-align:middle; }