@charset "utf-8";
/* CSS Document */


h2 {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;}
	
/*Bannière et parallax logo*/

	#banniere {
		height:80vw;
		background-image: url(Images/carroussel8.jpg); 
		background-repeat:no-repeat;
		background-position:center;  
		background-size:auto 100%;
		padding:0 0 0 0;
		}
	#cadre_logo {
		height:80vw;
		background-image:
			url(Images/welcome/logo-w.png),
			url(Images/welcome/gauche40.png), 
			url(Images/welcome/haut40.png), 
			url(Images/welcome/droite40.png), 
			url(Images/welcome/bas40.png)
			;
		background-repeat:no-repeat;
		background-position:50% 50%;
		background-size:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:flex-end
		}

/*Présentation*/

#presentation {
	margin-top:15px;
	}
#pres_gauche {
	padding:40px;
	text-align:justify;
	background-color:rgb(120,180,216);
	}
#pres_gauche p {
	margin-top:15px}
#presentation h2 {
	color:rgb(217,222,138);
	margin:0px 0 20px 0;
	padding-top:20px}

#izoard {
	display:none
	}

#photo_me {
	width:100vw;
	height:50vw;
	border-radius:1vw 1vw;
	/*margin-left:calc(40vw - 60px);*/
	overflow:hidden;
	margin-top:15px;
	z-index:5;
	}

#photo_me img {width:100%;	
	padding:0;
	margin:0;
	transform:translateY(-7vw)
	}

#liens_utils {
		opacity:0%;
	margin-top:15px;
	padding:40px;
	padding-top:10px;
	text-align:justify;
	background-color:rgb(217,222,138);
	box-shadow:3px 3px 3px black;
	z-index:1}

#liens_utils h2 {
	color:rgb(120,180,216)}

@media screen and (min-width: 480px) {
	

#banniere {
	background-attachment:fixed;
	height:32vw;
	background-size:100%;
	background-position:top;
	padding:0 36vw 0 0;}	
#cadre_logo {
	height:32vw;
	background-size:80%;
	}
	
}

@media screen and (min-width: 768px) {


#presentation {
	margin-top:85px;
	}

#pres_gauche {
	width:60vw;
	padding:40px;
	padding-bottom:100px;
	text-align:justify;
	background-color:rgb(120,180,216);
	margin-left:6vw;
	box-shadow:3px 3px 3px black inset;
	}

#izoard {
	display:inherit;
	position:relative;
	top:-90px;
	width:50vw;
	padding:0px;
	padding-top:0px;
	text-align:justify;
	margin-left:43vw;
	box-shadow:3px 3px 3px black
	}

#photo_me {
	margin:0;
	width:auto;
	height:auto;
	border-radius:0 0;
	}

#photo_me img {width:calc(60vw + 80px);
	height:auto;
	box-shadow:3px 3px 3px black inset;
	margin-left:6vw;
	transform:translateY(0);
	}

#liens_utils {
	position:relative;
	top:-90px;
	width:calc(50vw - 80px);
	margin:0;
	margin-left:43vw;
	}

}

@media screen and (min-width: 1024px) {
	
p {
	font-size:inherit}	
		
#presentation {
	/*height:550px;*/
	height:38vw;
	width:84vw;
	margin:auto;
	margin-top:85px;
	padding:0;
	display:flex;
	}
#pres_gauche {
	width:37vw;
	padding:0;
	padding-left:30px;
	padding-right:30px;
	margin:0;
	box-shadow:none
	}

#photo_theme {
	width:calc(52vw - 60px);
	overflow:hidden;
	height:38vw;
	display:flex;
	justify-content:flex-end;
	}
	
#izoard {
	position:inherit;
	height:38vw;
	width:auto;
	margin:0;
	box-shadow:none
	}

#cv {
	background-image:url(Images/oiseaux.png);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:right}

#photo_me {
	margin-top:85px
	}

#photo_me img {width:calc(37vw + 30px);	
	padding:0;
	margin:0;
	box-shadow:3px 3px 3px black inset;
	margin-left:7.6vw;
	}

#liens_utils {
	position:relative;
	top:-90px;
	width:30%;
	padding:40px;
	padding-top:10px;
	text-align:justify;
	/*background-color:rgba(255,255,255,0.6);*/
	margin-left:23vw;
	box-shadow:3px 3px 3px black;}
}

@media screen and (min-width: 1800px) {
	
#presentation, #photo_theme, #izoard {
	min-height:30vw;
	}
#pres_gauche {
	width:30vw;
	padding-left:3vw;
	padding-right:3vw;
	display:flex;
	flex-direction:column;
	justify-content:center;
	}


}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #banniere {
	background-attachment:scroll}

}