html,body,div,ul
{
	margin:0;
	padding:0;
}

body
{
	background-color:white;
}

video 
{
	margin-left:5%;
	width:90%;
	height:auto;
}

@font-face
{	
	src:url(Fonts/BAHNSCHRIFT.ttf);
	font-family:Bahnschrift;
}

@font-face
{	
	src:url(Fonts/ACUMIN_PRO_REGULAR.ttf);
	font-family:AcuminRegular;
}

@font-face
{	
	src:url(Fonts/ACUMIN_PRO_BOLD.ttf);
	font-family:AcuminBold;
}

header
{
	height:10vh;
	display:flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
	
	background-color:black;
	color:white;
	font-family:Bahnschrift;
	font-size:0.9em;
}

header div,#buttonDown:hover
{
	cursor: pointer;
}

#buttonDown
{
	width:6%;
	position:fixed;
	right:2%;
	top:45%;
}

#imageSlider
{
	width:100%;
}

ul
{	
	justify-content:center;
	justify-content:space-around;
	align-items:center;
}

ul,#galerie
{
	width:80%;
	height:86vh;
	margin:2vh auto;
	padding:8px;
	box-sizing:border-box;
	display: flex;
	flex-wrap: wrap;
	
	list-style:none;
	background-color:black;
	color:white;
	font-family:AcuminRegular;
}

#presentation
{
	width:100%;
	height:100%;
	display:flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
	
	line-height:1.3;
	font-size:1.1em;
	font-family:Bahnschrift;
	text-align: center;
}

#presentation div
{
	width:60%;
}

#presentation span
{
	width:100px;
}

#presentation span img
{
	width:100%;
}

#presentation span img:hover
{
	cursor:pointer;
}

img[alt="cv"]
{
	height:100vh;
}

#charles
{
	width:150px;
	height:150px;
	border-radius:100%;
}

/*GALERIE IMAGE*/

#galerie
{	
	overflow-y:scroll;
}

li 
{
	height: 200px;
	margin: 8px;
	flex-grow:1;
}

.imageGalerie
{
	min-width: 100%;
	max-height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

li:last-child 
{
	height:0px;
	margin:0px;
	flex-grow:0;
}

.imageGalerie:hover 
{
	object-fit:contain;
	transform: scale(1.5);
}

/*PANNEAU IMAGE*/

.window
{
	width:100%;
	height:100vh;
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	top:0px;
	left:0px;
	z-index:1;
	visibility:hidden;
}

.fondSombre
{
	width:100%;
	height:100vh;
	position:absolute;
	top:0px;
	left:0px;
	
	background-color:black;
	z-index:-1;	
	opacity:0.9;
}

#panneauTransparent
{
	position:fixed;
	top:0px;
	left:0px;
	height:100vh;
	width:100%;
	visibility:hidden;
}

.bouttonFermer
{
	width:30px;
	height:30px;
	position:fixed;
	top:10px;
	right:10px;
}

.bouttonFermer img
{
	width:30px;
}

.bouttonFermer:hover
{
	cursor:pointer;
}

#blocTransition
{
	position:fixed;
	z-index:2;/*pour que la transition cache la page*/
	left:0px;
	height:100vh;
	width:0%;
	
	background-color:black;
	animation: transitionPage 0.7s;
	-webkit-animation: transitionPage 0.7s;	
}

/*CONTACT*/

form
{
	font-size:0.9em;
}

#mail
{
	font-family:Bahnschrift;
}

input,textarea
{
	margin:10px 0px 20px 0px;
	resize: none;
	font-family:AcuminRegular;
	width:300px;
	border:0px;
	border-radius:4px;
	height:20px;
}

form div
{
	text-align:center;
}

textarea
{
	height:50px;
	margin-bottom:-10px;
}

input[type="submit"],input[type="reset"]
{
	width:100px;
	border:0px;
	height:30px;
	font-family:AcuminBold;
	background-color:white;
	margin-right:5px;
	
}

/*IMAGES*/

.container
{
	width:25%;
	position:relative;
}

.image
{
	display:block;
	width:100%;
}

.overlay 
{
	position: absolute;
	top:0px;
	height:100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center; 
	
	background-color:#008CBA;
	color: white;
	opacity:0;
	transition:0.4s ease;
}

.container:hover .overlay 
{
	opacity: 1;
	cursor:pointer;
}

.text 
{
	text-align:center;
	font-size:17px;
	padding:0 20px;
}

#imgGraphisme1
{
	display:block;
	width:350px;
	content:url("images/magazineUne.jpg");
    animation: carousselGraphisme1 11s infinite;
	-webkit-animation: carousselGraphisme1 11s infinite;	
}

#imgGraphisme2
{
	display:block;
	width:350px;
	content:url("images/typofontAffiche.png");
    animation: carousselGraphisme2 16.5s infinite;
	-webkit-animation: carousselGraphisme2 16.5s infinite;	
}

#imgGraphisme3
{
	display:block;
	width:350px;
	content:url("images/pictos.png");
    animation: carousselGraphisme3 11s infinite;
	-webkit-animation: carousselGraphisme3 11s infinite;	
}

/*@keyframes carousselGraphisme1
{
	0%{content:url("images/magazineUne.jpg");opacity:1;width:350px;}
	38%{content:url("images/magazineUne.jpg");opacity:1;width:350px;}
	41%{content:url("images/magazineUne.jpg");opacity:0;width:350px;}
	42%{content:url("images/somaire.jpg");opacity:0;width:500px;}
	50%{content:url("images/somaire.jpg");opacity:1;width:500px;}
	88%{content:url("images/somaire.jpg");opacity:1;width:500px;}
	91%{content:url("images/somaire.jpg");opacity:0;width:500px;}
	92%{content:url("images/magazineUne.jpg");opacity:0;width:350px;}
	100%{content:url("images/magazineUne.jpg");opacity:1;width:350px;}
}*/

@keyframes carousselGraphisme1
{
	0%{content:url("images/drom affiche 1.png");opacity:1;width:350px;} 
	13%{content:url("images/drom affiche 1.png");opacity:1;width:350px;}
	16%{content:url("images/drom affiche 1.png");opacity:0;width:350px;}
	17%{content:url("images/drom concept 1.png");opacity:0;width:420px;}
	25%{content:url("images/drom concept 1.png");opacity:1;width:420px;}
	38%{content:url("images/drom concept 1.png");opacity:1;width:420px;}
	41%{content:url("images/drom concept 1.png");opacity:0;width:420px;}
	42%{content:url("images/drom affiche 2.png");opacity:0;width:350px;}
	50%{content:url("images/drom affiche 2.png");opacity:1;width:350px;}
	63%{content:url("images/drom affiche 2.png");opacity:1;width:350px;}
	66%{content:url("images/drom affiche 2.png");opacity:0;width:350px;}
	67%{content:url("images/drom concept 2.png");opacity:0;width:600px;}
	75%{content:url("images/drom concept 2.png");opacity:1;width:600px;}
	88%{content:url("images/drom concept 2.png");opacity:1;width:600px;}
	91%{content:url("images/drom concept 2.png");opacity:0;width:600px;}
	92%{content:url("images/drom affiche 1.png");opacity:0;width:350px;}
	100%{content:url("images/drom affiche 1.png");opacity:1;width:350px;}
}


@keyframes carousselGraphisme2
{
	0%{content:url("images/typofontAffiche.png");opacity:1;width:350px;}
	21%{content:url("images/typofontAffiche.png");opacity:1;width:350px;}
	24%{content:url("images/typofontAffiche.png");opacity:0;width:350px;}
	25%{content:url("images/mockupTasse.png");opacity:0;width:350px;}
	33%{content:url("images/mockupTasse.png");opacity:1;width:350px;}
	54%{content:url("images/mockupTasse.png");opacity:1;width:350px;}
	57%{content:url("images/mockupTasse.png");opacity:0;width:350px;}
	58%{content:url("images/mockupCarteDeVisite.jpg");opacity:0;width:500px;}
	66%{content:url("images/mockupCarteDeVisite.jpg");opacity:1;width:500px;}
	88%{content:url("images/mockupCarteDeVisite.jpg");opacity:1;width:500px;}
	91%{content:url("images/mockupCarteDeVisite.jpg");opacity:0;width:500px;}
	92%{content:url("images/typofontAffiche.png");opacity:0;width:350px;}
	100%{content:url("images/typofontAffiche.png");opacity:1;width:350px;}
}

@keyframes carousselGraphisme3
{
	0%{content:url("images/pictos.png");opacity:1;}
	38%{content:url("images/pictos.png");opacity:1;}
	41%{content:url("images/pictos.png");opacity:0;}
	42%{content:url("images/pictoSituation.jpg");opacity:0;}
	50%{content:url("images/pictoSituation.jpg");opacity:1;}
	88%{content:url("images/pictoSituation.jpg");opacity:1;}
	91%{content:url("images/pictoSituation.jpg");opacity:0;}
	92%{content:url("images/pictos.png");opacity:0;}
	100%{content:url("images/pictos.png");opacity:1;}
}

@keyframes transitionPage
{
	0%{width:100%;}
	100%{width:0%;}
}

@media all and (max-width: 800px) 
{
	ul
	{
		flex-direction:column;
	}
	
	li
	{
		height:130px;
	}
	
	#galerie
	{
		flex-direction:row;
	}
	
	.icone,.lienIntegration,.container
	{
		width:40%;
	}	
	
	.text
	{
		font-size:14px;
		padding:0 10px;
	}
	
	header
	{
		font-size:0.6em;
	}
	
	#presentation div
	{
		font-size:1.1em;
	}
	
	#charles
	{
		width:150px;
		height:150px;
	}
	
	img[alt="cv"]
	{
		width:450px;
	}
}



@media all and (max-width: 480px) 
{
	.icone,.lienIntegration,.container
	{
		width:60%;
	}
	
	input,textarea
	{
		width:200px;
	}
		
	img[alt="cv"]
	{
		width:300px;
	}
}

@media all and (max-device-width: 480px) 
{	
	#presentation div
	{
		font-size:2em;
	}
	
	#charles
	{
		width:350px;
		height:350px;
	}
	
	#presentation span
	{
		width:150px;
	}
	
	img[alt="cv"]
	{
		width:100%;
	}
	
	.icone,.lienIntegration,.container
	{
		width:60%;
	}
	
	.container
	{
		width:52%;
	}
	
	.text 
	{
	  font-size:37px;
	}
	
	#buttonDown
	{
		width:10%;
		right:0px;
		top:45%;
	}
	
	.bouttonFermer
	{
		width:150px;
		height:150px;
		position:fixed;
		top:10px;
		right:10px;
	}
	
	.bouttonFermer img
	{
		width:100%;
	}
	
	header
	{
		font-size:2em;
	}
	
	input,textarea
	{
		width:650px;
	}
	
	input
	{
		height:50px;
	}
	
	input[type="submit"],input[type="reset"]
	{
		height:60px;
		width:200px;
		font-size:0.8em;
	}
	
	textarea
	{
		height:120px;
	}
		
	img[alt="cv"]
	{
		height:100%;
	}
	
	form
	{
		font-size:2.5em;
	}
	
	video 
	{
		margin-left:5%;
		width:90%;
		height:auto;
	}
	
	li 
	{
		height: 300px;
	}
	
	/*@keyframes carousselGraphisme1
	{
		0%{content:url("images/magazineUne.jpg");opacity:1;width:100%;}
		38%{content:url("images/magazineUne.jpg");opacity:1;width:100%;}
		41%{content:url("images/magazineUne.jpg");opacity:0;width:100%;}
		42%{content:url("images/somaire.jpg");opacity:0;width:100%;}
		50%{content:url("images/somaire.jpg");opacity:1;width:100%;}
		88%{content:url("images/somaire.jpg");opacity:1;width:100%;}
		91%{content:url("images/somaire.jpg");opacity:0;width:100%;}
		92%{content:url("images/magazineUne.jpg");opacity:0;width:100%;}
		100%{content:url("images/magazineUne.jpg");opacity:1;width:100%;}
	}*/
	
	
	@keyframes carousselGraphisme1
	{
		0%{content:url("images/drom affiche 1.png");opacity:1;width:100%;} 
		13%{content:url("images/drom affiche 1.png");opacity:1;width:100%;}
		16%{content:url("images/drom affiche 1.png");opacity:0;width:100%;}
		17%{content:url("images/drom concept 1.png");opacity:0;width:100%;}
		25%{content:url("images/drom concept 1.png");opacity:1;width:100%;}
		38%{content:url("images/drom concept 1.png");opacity:1;width:100%;}
		41%{content:url("images/drom concept 1.png");opacity:0;width:100%;}
		42%{content:url("images/drom affiche 2.png");opacity:0;width:100%;}
		50%{content:url("images/drom affiche 2.png");opacity:1;width:100%;}
		63%{content:url("images/drom affiche 2.png");opacity:1;width:100%;}
		66%{content:url("images/drom affiche 2.png");opacity:0;width:100%;}
		67%{content:url("images/drom concept 2.png");opacity:0;width:100%;}
		75%{content:url("images/drom concept 2.png");opacity:1;width:100%;}
		88%{content:url("images/drom concept 2.png");opacity:1;width:100%;}
		91%{content:url("images/drom concept 2.png");opacity:0;width:100%;}
		92%{content:url("images/drom affiche 1.png");opacity:0;width:100%;}
		100%{content:url("images/drom affiche 1.png");opacity:1;width:100%;}
	}
	
	
	@keyframes carousselGraphisme2
	{
		0%{content:url("images/typofontAffiche.png");opacity:1;width:100%;}
		21%{content:url("images/typofontAffiche.png");opacity:1;width:100%;}
		24%{content:url("images/typofontAffiche.png");opacity:0;width:100%;}
		25%{content:url("images/mockupTasse.png");opacity:0;width:100%;}
		33%{content:url("images/mockupTasse.png");opacity:1;width:100%;}
		54%{content:url("images/mockupTasse.png");opacity:1;width:100%;}
		57%{content:url("images/mockupTasse.png");opacity:0;width:100%;}
		58%{content:url("images/mockupCarteDeVisite.jpg");opacity:0;width:100%;}
		66%{content:url("images/mockupCarteDeVisite.jpg");opacity:1;width:100%;}
		88%{content:url("images/mockupCarteDeVisite.jpg");opacity:1;width:100%;}
		91%{content:url("images/mockupCarteDeVisite.jpg");opacity:0;width:100%;}
		92%{content:url("images/typofontAffiche.png");opacity:0;width:100%;}
		100%{content:url("images/typofontAffiche.png");opacity:1;width:100%;}
	}
	
	#imgGraphisme3
	{
		width:100%;
	}
}