/* Style : Navbar */
body{
	background: #1e1e1e;
	color: white;
	font-family:gotham,Sans-Serif;
}

nav{
	font-size: 1.1em;
	position:absolute;
	top:0;
	background-color: #1e1e1e;
    box-shadow: 0 3px 4px -2px rgba(0,0,0,.2);
}


.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1e1e1e;
  text-decoration: none;
  padding-left: 19%; 
  padding-right:19%;
  transition: 0.3s ease-in-out;

}

.collapse {
  float: right;
  text-decoration: none;
}

.nav-items{
	color:white;
}




ul {
  position: sticky;
  top: 0;
  width: 100%;
  text-decoration: none;
  padding-left:-2em;
}

.nav-link{
	color:white;
}
  
  


li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition:0.3s ease-in-out;
}

li a:hover {
	text-decoration: none;
	color:white;
	font-weight:bold;
}

.active:hover{
	margin-left:0em;
}

.active{
	font-weight:bold;
}

.logo{
	margin-top:.5em;
	padding-bottom:1.5em;
}

.name{
	margin-left:0.5em;

}

.name:hover{
	margin-left:0.5em;
}

.nav-items{
	display:fixed;
	margin-left:2em;
}
/* FIN NAV BAR */




.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(img/waiting_screen.gif) center no-repeat #1e1e1e;
}











/* DEBUT PROJETS HOME PAGE */

.projets{
	padding-left:19%; 
    padding-right:19%;
    transition: 0.3s ease-in-out;
}



.presentation{
	padding-left:19%; 
    padding-right:19%;
    transition: 0.3s ease-in-out;
	padding-bottom: 1.8em;

}

.insecable{
	white-space:nowrap;
	
}

h1{
  padding-bottom: 1.5em;
  padding-top:3.5em;
  font-size:3.8em;
  color:white;
  font-weight: bold;
}

h2{
	margin-top:0.3em;
	font-size:1.3em;
	font-weight: lighter;
}

h3{
	margin-top:1.1em;
	font-size:0.9em;
	margin-bottom:-2.3em;
}

h4{
	margin-top:0.3em;
	font-size:1.3em;
}


h5{
  margin-bottom:-0.5em;
  padding-top:3.5em;
  font-size:3.8em;
  color:white;
}

h6{
	padding-top:0.5em;
	margin-top:0.3em;
	font-size:1.3em;
	font-weight:normal;
	padding-bottom: 3.4em;
	
}


button:active {
outline: none;
border: none;
}


button:focus {outline:0!important;}




.description{
	padding-top:4em;
	padding-bottom:8em;
}


/* .images{
	position:relative;
	top:6;
}

.img-top{
	width:100%;
	opacity:0;
	position:absolute;
	top:8;
	margin-top:-56.3%;
    transition: 0.3s ease-in-out;
}

.images:hover .img-top {
    opacity:0.7;    
    width:100%;
    margin-top:-56.2%;
}

.img-top-square{
	width:100%;
	opacity:0;
	position:absolute;
	top:8;
	margin-top:-100%;
    transition: 0.3s ease-in-out;
}

.images:hover .img-top-square{
    opacity:0.7;    
}

.img-top-rectangle{
	width:100%;
	opacity:0;
	position:absolute;
	top:8;
	margin-top:-69.8%;
    transition:0.3s ease-in-out;
}

.images:hover .img-top-rectangle{
    opacity:0.7;    
} */



.soustitres{
	padding-bottom: 2.5em;
}

.button1{
	color:white;
	text-decoration:none;
	text-align:center;
	border:2px solid white;
	padding: 1em 4em 1em 4em;
	font-weight: bold;
	transition:0.3s ease-in-out;
}

.button1:hover{
	text-decoration:none;
	color:#1e1e1e;
	background:white;
	transition:0.3s ease-in-out;
}

.button2{
	display:block;
	margin-left: auto;
	margin-right: auto;
	margin-top:0.5em;
	margin-bottom:2em;
	text-align:center;
}








/* FIN PROJETS HOME PAGE*/





/* DEBUT PROJETS WORKS */

.basic_link{
	color:white;
	text-decoration:none;
	font-weight: normal;
	transition: 0.3s ease-in-out;
}

.basic_link:hover{
	color:white;
	text-decoration:none;
	font-weight: bold;
	transition: 0.3s ease-in-out;
}




.images{
	position:relative;
	top:0;
	left:0;
}


.img2{	
	position:relative;
	top:0;
	left:0;
	width:100%;
	opacity:0;
	transition: 0.3s ease-in-out;
}

.img1{
	position:absolute;
	top:0;
	left:0;
	opacity:1;
	width:100%;
}

.img2:hover{
	opacity:0.8;
	transition: 0.3s ease-in-out;
}

/* FIN PROJETS WORKS */




/* DEBUT FOOTER */

footer{
    padding-left: 19%; 
    padding-right:19%;
    background-color:#101010;
    padding-bottom:1em;
    color:#f0f0f0;
}

.icons{
  margin-bottom:2em;
  margin-top:-0.9em;
  margin-left:0em;
  margin-right:1.8em;
}

.icons_align{
  color:#101010;
  text-align:left;
  z-index: 99;
}

.info_perso_1{
  text-align:left;
  line-height: 2.4em;
}

.info_perso_2{
  text-align:right;
  line-height: 2.6em;
  z-index: 1;
}

.logo_footer{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:3.1em;
}

/* FIN FOOTER */














/*  DEBUT RESPONSIVE 1280 */

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

	/* DEBUT REPONSIVE NAV BAR */
	
	.navbar{
		padding-left:2%; 
  		padding-right:2%;
  		transition: 0.3s ease-in-out;
	}

	/* FIN REPONSIVE NAV BAR */




	/* DEBUT REPONSIVE HOME */

	.projets{
	padding-left:2%; 
    padding-right:2%;
    transition: 0.3s ease-in-out;
	}

	.presentation{
	padding-left:2%; 
    padding-right:2%;
    font-size:1em;
    transition: 0.3s ease-in-out;
	}

	/* FIN REPONSIVE HOME */

	

	/* DEBUT RESPONSIVE PAGES PROJETS */

	h1{
		padding-bottom: 1.5em;
		padding-top:3.5em;
		font-size:3.8em;
		   transition: 0.3s ease-in-out;
	}
	
	h6{
		margin-top:0.3em;
		font-size:1.3em;
		padding-bottom:6em;
		font-weight:normal;
		   transition: 0.3s ease-in-out;
	}

	/* FIN RESPONSIVE PAGES PROJETS */


	/* DEBUT REPONSIVE FOOTER */

	footer{
		padding-left:2%; 
		padding-right:2%;
		transition: 0.3s ease-in-out;
	}

	/* FIN  REPONSIVE FOOTER */

}


/* FIN RESPONSIVE 1280 */		

/* DEBUT RESPONSIVE 992*/

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

	.name{
	color:#1e1e1e;
	padding-bottom: 2.4em;
	padding-top:2.4em;
	transition: 0.3s ease-in-out;
	} 

	.logo{
		
		margin-top:0em;
		margin-bottom:-0.5em;
		   transition: 0.3s ease-in-out;
		

	}

	.contact{
		padding-bottom:10em;
		transition: 0.3s ease-in-out;
	}


	.presentation{
		transition: 0.3s ease-in-out;
	}

	.name{
		display:none;
	}

	.navbar-text{
		display:block;
		margin-right:auto;
		margin-left:auto;
		text-align:center;
		padding-bottom:1em;
		font-size:1.5em;
		   transition: 0.3s ease-in-out;
	}

	/* DEBUT RESPONSIVE PAGES PROJETS */
	
	h1{

		padding-top:3.1em;
		font-size:3.8em;
		font-weight: bold;
		   transition: 0.3s ease-in-out;
	}

	h5{
		padding-top:3.1em;
		font-weight: bold;
		   transition: 0.3s ease-in-out;
	}



	h6{
		margin-top:0.3em;
		font-size:1.3em;
		padding-bottom:4.8em;
		font-weight:normal;
		   transition: 0.3s ease-in-out;
	}

	/* FIN RESPONSIVE PAGES PROJETS */



}


/* FIN RESPONSIVE 992 */






/* DEBUT REPONSIVE 768 */

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


	.presentation{
	padding-bottom: 1.5em;
	padding-top:3.3em;
	padding-left:2%; 
    padding-right:2%;
    font-size:0.7em;
    transition: 0.3s ease-in-out;
   
	}



	


	/* DEBUT RESPONSIVE PAGES PROJETS */

	h1{
		padding-bottom:1.6em;
		transition: 0.3s ease-in-out;
	}

	h5{
    	padding-bottom:0em;
    	padding-top:3.1em;
    	font-size:3.8em;
    	color:white;
    	   transition: 0.3s ease-in-out;
	}
	
	h6{
		margin-top:0.3em;
		font-size:1.3em;
		padding-bottom:4.8em;
		font-weight:normal;
		   transition: 0.3s ease-in-out;
	}



	/* FIN RESPONSIVE PAGES PROJETS */



	  /* DEBUT REPONSIVE FOOTER */

  .info_perso_1{
    text-align:center;
    line-height: 2.4em;
    transition: 0.3s ease-in-out;
    margin-bottom:-1%;
  }

  .info_perso_2{
    text-align:center;
    line-height: 2.6em;
    transition: 0.3s ease-in-out;
    margin-top:-2em;
    margin-bottom:1em
  }

  .icons{
    display:inline-block;
    position:sticky;
    text-align:center;
    margin-left:0em;
    margin-bottom:0.1em;
    margin-right:1.8em;
    transition: 0.3s ease-in-out;
  }

  .logo_footer{
    display:none;
    transition: 0.3s ease-in-out;
  }

  .icons_align{
    text-align:center;
    padding-bottom:0em;
    padding-left:2em;
    transition: 0.3s ease-in-out;
  }

  .footer{
  	margin-bottom:10em;
  }
  /* FIN RESPONSIVE FOOTER */

}
	

/* FIN REPONSIVE 768 */


/* DEBUT REPONSIVE 520 */

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

	h1{
		font-size:3em;
		transition: 0.3s ease-in-out;
		padding-bottom:0.9em;
	}

	h4{
		font-size:;
	}

	h5{
    	padding-bottom:0em;
    	font-size:3em;
    	transition: 0.3s ease-in-out;
	}

	h6{
		padding-bottom:2.5em;
	}


	.description{
		padding-top:2.9em;
	}





}

/* FIN REPONSIVE 520 */



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

	.insecable{
		white-space:normal;
	}


	.button1{
	padding: 1em 1em 1em 1em;

	}

}