/* ----- BASE ----- */



::selection{
    background-color: rgba(0,0,0,1);
    color: rgb(255,255,255,1);
    opacity: 1;
}


*{
    box-sizing: border-box;
}


html{
    height: 100%;
    width: 100%;
	background-color: rgb(26,26,26);
}


html, body{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
	background-color: rgb(26,26,26);
}








/* ----- MENU ----- */



div.wrap{
    width: 100%;
    padding: 120px 0px 0px 0px;
	position: relative;
}


div.tete-wrap, div.nav-tete{
    margin: 40px 0px 40px 0px;
    width: 100%;
	position: fixed;
	top: 0px;
    z-index: 900;
    padding: 0px 40px 0px 40px;
}


div.tete{
    width: 100%;
    display: inline-block;
}


div.menu-nom{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 900;
	
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}


div.menu-gauche{
	position: absolute;
	left: 40px;
	top: 50%;
	z-index: 900;
	
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);	
}


div.menu-droite, div.menu-mobile{
	position: absolute;
	right: 40px;
	top: 50%;
	z-index: 900;
	
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);	
}

div.menu-mobile{
	display: none;
}





/* ----- MENU 2 ----- */



div.nav-wrap, div.contact-wrap{
    background-color: rgba(20,20,20,1);
    position: fixed;
	width: 100%;
	height: 0px;
	bottom: 0px;
	right: 0px;
	overflow: hidden;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition-timing-function: cubic-bezier(.6, 0, .2, 1);
	height: 0px;
	z-index: 800;
}


div.nav-wrap{
	display: none;
}


div.nav-wrap.open, div.contact-wrap.open{
    height: 100%;
}


div.nav{
	position: absolute;
	left: 50%;
	top: 50%;
	
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}














/* ----- INDEX ----- */



div.paru-wrap, div.projet-wrap{
    position: relative;
    padding: 0px 60px 0px 60px;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-column-gap: 20px;
    grid-row-gap: 80px;
    width: 100%;
    max-width: 1400px;
}


div.projet-wrap{
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}


div.paru, div.projet{
    position: relative;
    width: 100%;
    display: inline-block;
    overflow: hidden;
	border-radius: 20px;
}


div.paru{
	padding-bottom: 75%;
    grid-column: 1 / auto;
	float: left;

    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
}

div.projet.note{
    grid-column: 1 / span 2;
}

div.paru-photo-wrap{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
}


div.paru:not(.no-hover):hover{
    opacity: 0.5;
}


div.projet{
	padding-bottom: 50%;
    grid-column: 1 / span 2;
}


div.projet.demi{
    grid-column: auto;
	padding-bottom: 75%;
}




img.paru-photo, img.projet-photo{
    height: 100%;
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0px auto 0px auto;
	
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}


img.paru-photo.paysage-80, img.prjet-photo.paysage-80{
	height: 80%;
}


img.projet-photo.paysage-complot, img.paru-photo.paysage-complot{
    width: 100%;
    height: auto;
}


div.projet img.rond{
	border-radius: 20px;
}






div.colophon{
    padding: 0px 60px 60px 60px;
	margin: 0px auto 0px auto;
    width: 100%;
	text-wrap: balance;
}



div.pied{
	padding: 90px 60px 60px 60px;
	margin: 0px auto 0px auto;
    width: 100%;
	text-wrap: balance;
}










/* ----- BG ----- */



div.bg-tournure{
	background-color: rgb(0,0,0);
}


div.bg-bst{
	background-color: rgb(0,0,0);
}


div.bg-bdq{
	background-color: rgb(30,60,40);
}


div.bg-complot{
	background-color: rgb(0,0,0);
}


div.bg-talentshow{
	background-color: rgb(120,90,50);
}


div.bg-risque{
	background-color: rgb(200,160,255);
}


div.bg-ujperc{
	background-color: rgb(230,170,0);;
}


div.bg-organe{
	background-color: rgb(80,180,255);;
}


div.bg-cirque{
	background-color: rgb(0,0,0);
}


div.bg-foyer{
	background-color: rgb(230,90,0);
}


div.bg-yonkers{
	background-color: rgb(150,130,255);
}


div.bg-vidal{
	background-color: rgb(0,0,0);
}


div.bg-ece{
	background-color: rgb(110,0,0);
}


div.bg-qe{
	background-color: rgb(0,40,90);
}


div.bg-transformerie{
	background-color: rgb(220,155,175);
}


div.bg-maison{
	background-color: rgb(110,30,0);
}


div.bg-anel{
	background-color: rgb(10,20,30);
}


div.bg-triplex{
	background-color: rgb(185,205,230);
}


div.bg-anel-c{
	background-color: rgb(15,51,45);
}





/* ----- CV ----- */



div.cv-wrap{
    position: relative;
    padding: 0px 60px 0px 60px;
	margin: 0px auto 0px auto;
    display: inline-block;
}


table.cv{
	margin: 0px auto 0px auto;
	display: block;
	position: relative;
}



table.cv td{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	width: auto;
}


table.cv tr{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	vertical-align: center;
    background-color: rgb(40,40,40);
	
	transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
}


table.cv tr:nth-child(odd) {
    background-color: rgb(35,35,35);
}


table.cv tr:hover{
	background-color: rgb(26,26,26);
}


table.cv{
	border-collapse: collapse;
	margin: 0px auto 0px auto;
}

div.voir{
	padding: 0px 40px 0px 40px;
}

div.voir svg{
	width: 18px;
	height: 20px;
	fill: rgb(250,250,250);
	display: block;
	position: relative;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	
	transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
}


td div.voir svg:hover {
	fill: rgb(80,80,80);
}



table.cv tbody a {
  display: block;
}


div.mobile-hide{
	display: auto;
}