@font-face { 
	
	font-family:'Mapolice'; 

	src: url('../Fonts/gravity-light.eot');
	src: local('☺'), url('../Fonts/gravity-light.woff') format('woff'), url('../Fonts/gravity-light.ttf') format('truetype'), url('../Fonts/gravity-light.svg') format('svg');

} 

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color:#fff; 
	font-size:1em; 
	font-family:'Mapolice', Verdana, sans-serif; 
}	

img {
	display: block;
}

	
#accueil {
	background-color:#FFF; 
	width:100%; 
	height:100%; 
	position:relative;
}

.logo {
	width: 100%;
	height: 100%;
	padding-bottom: 4em;
}

.menu {
	position: relative;
	margin-top: -3.2em;
}

ul {
	padding: 0;
	margin: 0;
}

nav {
	background-color:#FFD700; 
	z-index:2;
	text-align: center;
	width: 100%;
	cursor: pointer;
}

nav li {
	width: 100%;
}

nav.menu li {
	display:inline-block;
	width: 25%;
}

nav a {
	text-decoration:none; 
	color:#FFFFFF; 
	letter-spacing:0.08em;
	font-family:'Mapolice', Verdana, sans-serif; 
	font-size:1.9em;
	padding:9px; 
	display:block;
}

.fixedTop {
	position: fixed;
	top:0;
	width: 100%;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
}
		
.retourligne {
	clear:both;
}
		
h2 {
	color: #222;
	font-family:'Mapolice', Verdana, sans-serif;
	font-size:5em; 
	letter-spacing:0.1em; 
	text-align:center; 
	display:block; 
	padding:0.9em; 
	margin:0;
}

#TitreCV {
	color: #FFF;
}

svg {
	display: none;
}


#projets {
	list-style:none; 
	padding:0; 
	margin:100;
}

#projets li {
	opacity: 0;
	width:33.3%; 
	float:left; 
	margin-top:10px;
}

#projets a {
	display:block; 
	position: relative;
	overflow: hidden;
	text-decoration:none;
}

#projets img {
	display:block; 
	width:100%;
	transition: transform .9s; 
}

#projets img:hover {
	transform: scale(1.07); 
}

#projets .titre {
	display:block;
	text-align:center;
	font-size:1.5em; 
	font-family:'Roboto', Verdana, Geneva, sans-serif;
	letter-spacing:0.08em;
	color:#222;
	padding:20px 0 5px 0; 
}

#projets .info { 
	position: absolute;
	top:20px;
	left: 50px;
	color:#FFF;
	font-size: 1.2em;
	letter-spacing: 0.07em;
	margin-top: -70px;
}


#cv {
	margin-top:50px; 
	background-color:#222; 
	width:100%; 
	padding:0 0 120px 0;
}

#cvimg {
	width: 100%;
}

#cvimg img {
	margin: 0 auto;
	width: 50%;
	/*box-shadow : 5px 5px 10px #aaa;*/
}


#contact {
	margin-top:10px; 
	width:100%;
	padding:0 0 20px 0;
	margin-bottom: 50px;
}

#infos {  
	padding-top:40px;
	color: #222; 
	font-weight: bold;
	text-align:center;
}

#contact span {
	font-size:2em;  
	display: inline-block;
	margin-bottom:50px; 
	letter-spacing:0.05em;
}

#contact i, #contact a { 
	margin-top:10px; 
	display: inline-block;
	font-size:1.50em; 
	color: #222;
	text-decoration:none; 
	font-style:normal; 
	letter-spacing:0.03em;
}

#icons {
	display: flex;
	justify-content: center;
	align-items:center;
	padding-top: 50px;
}

#icons img {
	margin:20px;
}












/*-------------------------------------------------------PAGES PROJETS-------------------------------------------------------*/
			


#accueilProjet {
	background-color:#FFF; 
	width:100%; 
	position:relative;
}	

.logoProjet {
	width: 25%;
	height: 35%;
	margin-top: 4em;
	display: inline-block;
}

#trait {
	height: 2px;
	background-color: #222;
	width : 0%;
	display: block; 
	overflow: hidden;
	margin:0 auto;
}

#titre {
	display: inline-block;
	width: 50%;
	text-align:center; 
	margin-top: 3em;
}



/*RETOUR*/

#retour {
	margin-top:10px; 
	width:100%;
	height:100%; 
	padding:0 0 20px 0;
}

.retour {
	background-color: #FFD700;
	position: fixed;
	transition: background-color 0.5s ease;
}

.retour:hover {
	background-color: #000;
}



/*LIENS - TEXTES - VIDEOS PROJETS*/

a {
	color: #222;
	font-family: 'Roboto' , sans-serif;
}

p {
	color: #222;
	font-family:'Roboto', sans-serif;
	letter-spacing:0.1em; 
	position: absolute;
}

h3 {
	color: #222;
	font-family:'Mapolice', Verdana, sans-serif;
	font-size:5em; 
	letter-spacing:0.1em; 
	text-align:center; 
	margin:0;
	display: inline-block;
}

h3.long {
	font-size:3.6em
}

h4 {
	color: #222;
	font-family:'Mapolice', Verdana, sans-serif;
	letter-spacing:0.1em; 
	text-align:center; 
	opacity: 0;
	position: relative;
	top:-30px;
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/*--------------------BEEPLE--------------------*/


#bpwd {
	width: 90%;
}

#video_beeple{
	margin-top: 77%;
	height: 94%;
}

#txtbpwd {
	margin-top: 2%;
	left: 50%;
	width: 80%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 1.3em;
	padding-bottom: 50px;
}







/*--------------------BISCUIT Prod--------------------*/


#txtasm {
	/*margin-top: -7%;*/
	font-size: 1.3em;
    width: 100%;
    margin: 20px auto;
    display: block;
    text-align: center;
}

#sezam {
	/*margin-top: 75%;*/
}

#txtsezam {
	/*margin-top: 30%;*/
	width: 100%;
    margin: 20px auto;
    display: block;
	text-align: center;
	font-size: 1.3em;
}
/*
#lettre {
		margin-top: 150%;
}

#sortilège {
	margin-top: 210%;
}

#peurnoire {
	margin-top: 270%;
}*/

#txtoxmo {
	/*margin-top: 128%;*/
	width: 100%;
    margin: 20px auto 100px auto;
    display: block;
	font-size: 1.3em;
	text-align: center;
}

#projetBiscuit {
	width: 70%;
    margin: 0 auto;
}

#projetBiscuit > div {
	position: relative;
    padding-bottom: 56.25%;
    font-size: 1em;
    height: 0;
    margin: 30px 0;
}

/*--------------------VIDEOS--------------------*/

#projetTexte {
	position: relative;
	width: 50%; 
	height: 0;
	padding-bottom: 28.155%;
	margin: 0 auto 130px auto;
}

#projetTexte p {
	color: #222;
	font-family: 'Roboto' , sans-serif;
	letter-spacing:0.1em; 
	width: 100%;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 50px;
	position: absolute;
	top: 100%;
	font-size: 1.3em;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

#projetBiscuit p { 
	position: static;

	}



/*--------------------INSA--------------------*/

.parallax {

    /* The image used */
    background-image: url("../Images/Flyers_INSA.jpg");

    /* Set a specific height */
    min-height: 400px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 30px;
}

.parallax2 {
    /* The image used */
    background-image: url("../Images/Flyer_Nuit_INT.jpg");

    /* Set a specific height */
    height : 100%;
    min-height: 600px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 80%;
}

.bloc{
   height : 35%;
   width: 100%;
   position : relative;
}

#insaAffiches {
	width: 100%;
	padding-top: 15%;
    position: absolute;
}

#txtinsa2 {
	font-size: 1.7em;
	letter-spacing:0.1em; 
	left: 10%;
	margin-top: 6%;
}

#txtinsa {
	font-size: 1.5em;
	letter-spacing:0.1em; 
	left: 5%;
	text-align: center;
	margin-top: 83%;
}


/*--------------------Roll UP--------------------*/

#rollup {
	width: 30%;
    position: absolute;
    left: 10%;
}

#txtrollup {
	font-size: 1.5em;
	letter-spacing:0.1em; 
	margin-top: 17%;
	left: 40%;
	margin-bottom: 130px;
}



/*--------------------3D--------------------*/

#tableBlender {
	width: 80%;
    position: absolute;
    left: 10%;
}

#txtblender {
	font-size: 1.5em;
	letter-spacing:0.1em; 
	margin-top: 47%;
	left: 50%;
	transform: translateX(-50%);
}

#baril {
	width: 100%;
	position: absolute;
	margin-top: 55%;
}

#citerne {
	width: 100%;
	position: absolute;
	margin-top: 83%;
}

#txtcitbar {
	margin-top: 115%;
	font-size: 1.5em;
	letter-spacing:0.1em; 
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

#bracelet {
	width: 50%;
	position: absolute;
	margin-top: 129%;
}

#marqueurs {
	width: 50%;
	position: absolute;
	margin-top: 129%;
	left: 50%;
}

#outils {
	width: 50%;
	position: absolute;
	margin-top: 160%;
}

#txtoutils {
	margin-top: 175%;
	left: 52%;
	width: 45%;
	font-size: 1.5em;
	letter-spacing:0.1em; 
}



/*--------------------Illustrations--------------------*/

#claire_roman {
	width: 100%;
    position: absolute;
}

#txtphotos {
	margin-top: 54%;
	left: 25%;
	font-size: 1.5em;
	letter-spacing:0.1em; 
}

#picto {
	width: 60%;
    position: absolute;
    margin-top: 60%;
}

#txtpicto {
	margin-top: 80%;
	left: 65%;
	font-size: 1.5em;
	letter-spacing:0.1em; 
}

#modagro {
	width: 70%;
    position: absolute;
    margin-top: 105%;
    right: 0%;
}

#txtma {
	font-size: 1.5em;
	margin-top: 125%;
	left: 5%;
	letter-spacing:0.1em; 
	width: 25%;
}



















/*------------------------------------------------------- QUERIES-------------------------------------------------------*/



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

	#accueil {
		height:70%; 
	}

	nav a {
		font-size:1.5em;
		padding:5px; 
	}

	h2 {
		font-size:3em; 
		padding:1.5em; 
	}

	h3 {
		font-size:2.5em; 
	}

	h3.long {
			font-size:1.7em
	}

	h4 {
		font-size:0.8em; 
	}

	#projets li {
		opacity: 0;
		width:50%; 
	}

	#projets .titre {
		font-size:1.1em; 
		padding:20px 0 5px 0; 
	}

	#projets .info { 
		top:20px;
		left: 50px;
		font-size: 0.9em;
		margin-top: -70px;
	}

	#cvimg img {
		width: 80%;
	}

	p {
		font-size:0.8em; 
	}

	.logoProjet{
		margin-top: 3em;
	}

	#titre {
		margin-top: 3em;
	}

	#projetTexte {
		width: 70%; 
		padding-bottom: 39.417%;
		font-size: 1em;
	}

	#projetTexte p {
	font-size: 1em;
}





/*--------------------BEEPLE--------------------*/


#video_beeple{
	margin-top: 77%;
	height: 77%;
	width: 100%;

}

#txtbpwd {
	width: 90%;
	font-size: 1em;
}






/*--------------------INSA--------------------*/

	.parallax {
	    min-height: 200px; 
	    background-position: center top;
	}

	.bloc{
	   height : 15%;
	}

	#txtinsa2 {
		font-size: 1em;
		left: 3%;
	}

	#txtinsa {
		font-size: 0.9em;
		left: 3%;
		margin-top: 80%;
	}


/*--------------------Roll Up PP--------------------*/


	#rollup {
		width: 50%;
		left: 2%;
	}

	#txtrollup {
		font-size: 1em;
		margin-top: 37%;
		left: 45%;
	}



/*--------------------BISCUIT Prod--------------------*/

	#txtasm {
		/*margin-top: -19%;*/
		font-size: 1em;
		
	}

	#txtsezam {
		/*margin-top: 33%;*/
		font-size: 1em;
		
	}

	#txtoxmo {
		font-size: 1em;
	
	}



/*--------------------Illustrations--------------------*/

	#txtphotos {
		left: 15%;
		font-size: 1em;
	}

	#txtpicto {
		font-size: 1em;
	}

	#txtma {
		font-size: 1em;
		width: 30%;
	}




/*--------------------3D--------------------*/

	#tableBlender {
		width: 100%;
	    left: 0%;
	}

	#txtblender {
		font-size: 1em;
		margin-top:60%;
		width: 52%;
	}

	#baril {
		margin-top: 75%;
	}

	#citerne {
		margin-top: 103%;
	}

	#txtcitbar {
		margin-top: 135%;
		font-size: 1em;
	}

	#bracelet {
		margin-top: 149%;
	}

	#marqueurs {
		margin-top: 149%;
	}

	#outils {
		margin-top: 180%;
	}

	#txtoutils {
		margin-top: 190%;
		font-size: 1em;
	}




}
















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




	#accueil {
		height:50%; 
	}

	.menu {
	    position: fixed;
	    z-index: 6;
	    margin-top: 0;
	    top: 0px;
	  	height: 47%;
	}

	nav {
		display: none;
		height: 100%;
		opacity: 0;
		z-index: 2;
		width: 100%;
	}

	nav.menu li {
	    display: block;
	    width: 25%;
	    margin: 0 auto;
	}

	nav li {
	    width: 100%;
	    line-height: 360%;
	}

	p {
		padding-left: 2%;
		padding-right: 2%;
	}

	h2 {
		font-size:2.5em; 
		padding:1.2em; 
	}

	h3 {
		font-size:2em; 
	}

	h4 {
		font-size:0.7em; 
	}

	#projets li {
		opacity: 0;
		width:100%; 
	}

	#cvimg img {
		width: 100%;
	}

	#contact span {
		font-size:1.5em;  
		margin-bottom:30px; 
	}

	#contact i, #contact a { 
		font-size:1em; 
	}

	#titre {
		margin-top: 3em;
	}

	.logoProjet {
		visibility: hidden;
	}

	#projetTexte {
		width: 100%; 
		padding-bottom: 52.31%;
	}

	#projetTexte p {
	font-size: 0.8em;
}


	svg {
		width:20px;
		height:20px;
		position: fixed;
		right: 5%;
		top:5%;
		cursor: pointer;
	}

	svg#burgerMenu {
		z-index: 5;
		display: block;
	}

	svg#croix {
		z-index: 7;
		display: none;
		opacity: 0;
	}

	svg#back {
		display: block;
		z-index: 8;
	}



/*--------------------BEEPLE--------------------*/


#video_beeple{
	margin-top: 97%;
	height: 50%;
	width: 100%;

}

#txtbpwd {
	width: 60%;
	font-size: 0.8em;
}






/*--------------------BISCUIT Prod--------------------*/

	#projetBiscuit {
		width: 100%;
	}

	#txtasm {
		/*margin-top: -25%;*/
		font-size: 0.8em;
	}

	#txtsezam {
		/*margin-top: 50%;*/
		font-size: 0.8em;
	}

	#txtoxmo {
		font-size: 0.8em;
	}




/*--------------------Roll UP--------------------*/

	#rollup {
		width: 100%;
	    position: static;
	    display: block;
	    margin: 0 auto;
	}

	#txtrollup {
		position: static;
		padding: 20px 2%;
		margin-top: 0;
		margin-bottom: 40px;
		font-size: 0.8em;
	}


/*--------------------INSA-------------------*/


	.parallax {
	    min-height: 150px; 
	    background-size: 100%;
	    margin-top: 30px;
	    background-position: center top ;
	}

	.bloc{
	   height : 15%;
	}

	.parallax2 {
	    background-attachment: scroll;
	    background-size: 100%;
	    margin-top: 50%;
	}


	#txtinsa2 {
		font-size: 0.8em;
		left: 3%;
		margin-top: 5%;
	}

	#txtinsa {
		font-size: 0.7em;
		margin-top: 83%;
	}



/*--------------------3D--------------------*/


	#txtblender {
		font-size: 0.8em;
	}

	#txtcitbar {
		font-size: 0.8em;
		width: 65%;
	}

	#bracelet {
		width: 100%;
		position: static;
	}

	#marqueurs {
		width: 100%;
		position: static;
		margin-top: 0%;
	}

	#outils {
		width: 100%;
		position: static;
		margin-top: 0%;
	}

	#txtoutils {
		font-size: 0.8em;
		left: 50%;
		margin-top: 0%;
		transform: translateX(-50%);
		text-align: center;
		padding: 20px 2%;
		width: 65%;
	}




/*--------------------Illustrations--------------------*/



	#txtphotos {
		left: 5%;
		font-size: 0.8em;
	}


	#txtpicto {
		font-size: 0.8em;
	}

	#txtma {
		font-size: 0.8em;
	}




}