/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* General */
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');


*{
  box-sizing: border-box;
}

body{
	font-family: 'PT Sans Narrow', sans-serif;
	padding:0;
	margin:0;
	color: #27282b;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'PT Sans Narrow', Helvetica, Arial, sans-serif;
}

p{

	font-family: 'Hind', Helvetica, Arial, sans-serif;
}


.mosaicflow__item img{
	border-radius:20px;
	background: rgb(232,232,232);
	background: linear-gradient(320deg, rgba(232,232,232,1) 0%, rgba(255,255,255,1) 100%);
	-webkit-box-shadow: 6px 6px 16px -4px #828282; 
	box-shadow: 6px 6px 16px -4px #828282;

}

	#btnChandelles{
		background-color:rgba(245,196,92,1); 
		padding:3px; 
		color:white;
		-webkit-border-radius: 20px; 
		-moz-border-radius: 20px; 
		border-radius: 20px;
	}

	#btnChandelles:hover{
		opacity:0.67;
	}




#h4DescEssence{
	font-size:1.6em;
	margin-top:10px;
	margin-bottom:20px;
}



















.wrapper{
	width: 80%;
	margin: auto;
}



header{
	width: 100%;
	padding:20px 0;
	border-bottom: 2px solid #5D6168;
	margin-bottom:20px;
	display:flex;
}

#divImgLogo, #divH2Portfolio, #divH2Profil{
	display:flex;
}

#divImgLogo{
	width:78%;
}

#divH2Portfolio, #divH2Profil{
	width:11%;
	justify-content:flex-end;
}

#imgLogo{
	align-self: flex-end;
}


#h2Profil{
	font-weight:400;
	font-size: 1em;
	align-self: flex-end;
}

#h2Portfolio{
	font-weight:400;
	font-size: 1em;
	align-self: flex-end;
}


a:hover{
	color: #27282b;
	text-decoration: underline;
}

.aSamePage{
	text-decoration: underline;
	color: #27282b;
	cursor:pointer;
}

#aCV{
	font-size:1.2em;
	text-decoration: underline;
}

#aRedBubble{
	font-size:1.1em;
	text-decoration: underline;
}

 #aNoTelProfil, #aEmailProfil{
	font-size:1.1em;
	text-decoration: underline;
}

#aInfoContact{
	font-size:1em;
	text-decoration: underline;
}

/* Index (Profil) */


#imgProfil{
	position: absolute;
	left: 0%;
	bottom: 0;
	max-height: 75%;
	transform: translate(-10%, 0);
	max-width: 60%;
}

#divDescProfil{
	float: right;
	width: 60%;
	margin-top: 8%;
	line-height: 1.47059;
    font-weight: 400;
}



#divDescProfil p{
	font-size:1em;
	margin: 10px 0 3px;
}




#contenuPrincipal{
	overflow:auto;
}

#divImgProfilPetite{
	width:100%;
	text-align:center;
	display:none;
}

	#imgProfilPetite{
		width:30%;
}


#h3QuiSuisJe{
	font-size:3em;
	font-weight:600;
}




/* Portfolio */

.divPhotos img{
	cursor: pointer;
}

.divPhotos img:hover{
	opacity: 0.7;
	transition: 0.25s ease;
}


.mosaicflow__column {
 float:left;


 }
.mosaicflow__item img {
 display:block;
 width:100%;
 height:auto;
 }
  .mosaicflow__item{

  	margin: 15px;
  }





/*     SINGLE PROJECT     */

#sectionSingleProject{
	width: 100%;
}

#divSPGauche{
	max-width: 40%;
	margin: 10px 6% 3% 0;
	float: left;
}

#divSPDroite1{
	width: 54%;
	float: left;
}
#divSPDroite2{
	width: 54%;
	float: left;
}





#imgPrincipale{
	max-height: 70vh;
	float: left;
	max-width:100%;
}

.les4img{
	width: 48%;
	float:left;
	margin-right:2%;
	margin-bottom: 2%;
}

.biblioSM360{
	width: 100%;
	float:left;
	margin:1%;
	margin-bottom: 2%;
}

.columnMosaiqueSM360{
	margin-right: 1%;
}

#divAllBankSM360{
	margin-top: 26px;
}

.la2eImgSP{
	margin-right:0;
}


#aSP{
	float: left;
	clear: both;
	text-align: center;
	width: 100%;
	margin-top: 3%;
	padding: 5%;
	background-color: #343f51;
	text-decoration: none;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.3em;	
	-webkit-transition: color 0.1s ease-out;
	-moz-transition: color 0.1s ease-out;
	-o-transition: color 0.1s ease-out;
	transition: color 0.1s ease-out;
}

#aSP:hover{
	color: lightgrey;
}

#aSP:active{
	color: grey;
}

#aVoirAutrePageSP{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    text-decoration: underline;
}

#divXretour{
	width:100%;
}


#xRetourSingleP{
	cursor:pointer;
	width: 2%;
}

#h1SP{
	font-family: 'Roboto Slab', serif;
	font-weight: 700;
	font-size: 2.2em;
	margin-top: -0.7%;
	margin-bottom: 6%;
}

#h2CaracSP{
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	font-size: 1.5em;
	width: 100%;
	padding-bottom: 1.2%;
	border-bottom: 1px solid black;
}

.divCategSP{
	width: 100%;
	clear: both;
	overflow: hidden;
	padding: 3% 0;
	border-bottom: 1px solid black;
}

.h3SP{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	float: left;
}

.contentSP{
	float: right;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.9em;
}


#h2DescSP{
	margin-top: 5%;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	font-size: 1.5em;
	width: 100%;
}

#pDescSP{
	margin-top: 1.5%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	line-height: 1.6;
}

#pPrecision{
	margin-top: 1%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.8em;
	line-height: 1.6;
}

.imgSP{
	opacity:1;
	border-radius: 10px;
}

.imgSP:hover{
	opacity:0.5;
	transition-duration: 0.25s;
}











/* Media Queries */




@media screen and (max-width: 1260px) {
	#divImgLogo{
		width:74%;
	}

	#divH2Portfolio, #divH2Profil{
		width:13%;
		justify-content:flex-end;
	}
}



@media screen and (max-width: 1024px) {

.mosaicflow__item{
	margin:8px;
}


#divImgLogo{
	width:64%;
}

#divH2Portfolio, #divH2Profil{
	width:18%;
	justify-content:flex-end;
}



	#imgProfil{
		display:none;
	}

	#divImgProfilPetite{
		display:inline-block;	
		margin-top:1%;
	}

	#h3QuiSuisJe{
		text-align: center;
		line-height: 1;
		margin-top:10px;
	}

	#divDescProfil{
		float:none;
		display:inline-block;
		width:70%;		
		margin:1% 15% 40px;
	}

	#divDescProfil p{
		font-size:0.9em;
	}
}




@media all and (min-width: 901px){

	#sectionSingleProject{
    	flex-flow: inline;
	}
}

@media all and (max-width: 900px){

	#h2DescSP{
		margin-top:40px;
	}

	
	#sectionSingleProject{
    	flex-flow: column;
    	display:flex;
	}
	#divSPDroite1{
		width:80%;
		margin: 10px 10% 30px;
	}

	#h1SP{
    	text-align:center;
    	order:1;
    	margin-bottom:0%;
	}

	#divSPGauche{
		max-width:none;
		width: 80%;
    	margin: 0% auto 3%;
    	float: none;
    	order:2;
	}

	#imgPrincipale{
		max-height: none;
    	max-width: none;
    	width: 100%;
	}

	#divSPDroite2{
		width: 80%;
    	float: left;
    	margin: 20px 0 10px 10%;
    	order:3;
	}

	#pDescSP{
		margin-bottom:40px;
	}


	#xRetourSingleP{
		width:3.75%;
	}
}








@media screen and (max-width: 680px) {

	#pDescSP{
		font-size:0.75em;
	}

	header{
		font-size:0.85em;
	}

	#imgProfilPetite{
		width:50%;
}

	#divDescProfil{
		float:none;
		display:inline-block;
		width:100%;		
		margin:1% 0% 40px;
	}

	#xRetourSingleP{
		width:5%;
	}


	.mosaicflow__item{
		margin:20px 5px;
	}

	.wrapper{
		width:90%;
	}
}


@media screen and (max-width: 600px) {
	#divImgLogo{
		width:42%;
	}

	#imgLogo{
		width:50px;
	}

	#divH2Portfolio, #divH2Profil{
		width:29%;
		justify-content:flex-end;
	}
}

@media screen and (max-width: 470px) {
	#h1Nom{
		font-size:1.6em;
	}
}

@media screen and (max-width: 380px) {

	#divImgLogo{
		width:30%;
	}

	#divH2Portfolio, #divH2Profil{
		width:35%;
		justify-content:flex-end;
	}
}