@import url('https://fonts.googleapis.com/css?family=Raleway');

html, body, .container {
   max-width:100%;
   max-height:100%;
   min-width:740px;
   
   margin:0;
   padding:0;
   font-family: 'Source Sans Pro', Tahoma, Helvetica, arial, sans-serif;
	
}

html, body {	
	max-height:100%;
	max-width:100%;
	min-width:740px;
}

html{
	/*overflow-x: hidden;*/
	scroll-behavior: smooth;
}

h2 {
				
	font-weight: 400;
	letter-spacing: 4px;
	margin: 0 0 1.5em 0;
	line-height: 1.75em;
}

h3 {
		letter-spacing: 2px;
		margin: 0 0 1.25em 0;
}

/* --------------- Header ------------------ */

#header{
	background-color: #001e3b;
	width:750px;
}

#section-wrapper{
	margin:0;
	padding:0;
	
}

#banniere{
	
	
	/*display:block;
	/*margin:0px;*/
	margin-top:4%;
	margin-left:6.5%;
	margin-right:6.5%;
	width:86%;
	
}



/* Nav */

	#nav_bar > ul > li > a{
		border: 0;
		
		padding: 12px;
		padding-top:14px;
		padding-bottom:14px;
		margin:0;
		
		color: white;
		text-decoration: none;
		text-transform: uppercase;
		color: white;
		text-align: center;
		font-weight: 400;
		outline: 0;
		
		display: block;
	}
		
	#nav_bar, #nav2 {
		cursor: default;
	}
	
	#nav_bar
	{
		position: fixed; /* Make it stick/fixed */
		top: 0; /* Stay on top */
		width: 100%; /* Full width */
		transition: top 0.3s; /* Transition effect when sliding down (and up) */
		z-index: 2;
		
		height: 70px;
		min-width: 500px;
	}

	#nav_bar > ul {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  overflow: hidden;
	  background-color: #001e3b;
	}

	#nav_bar > ul > li {
	  float:right;
	  margin: 0;
	  padding:0;
	  padding-left:3px;
	  padding-right:3px;
	  font-family: 'Trebuchet MS',sans-serif;
	  font-size:0.8em;
	  
	  display: block;
	  color: white;
	  text-align: center;
	  text-decoration: none;
	  
	  display: inline-block;
	}

	#nav_bar > ul > li a:hover {
	  background-color: #002d59;
	  
	}
	
	#accueil_nav:hover #name_accueil{
		opacity:50%;
	}
	

	#nav_bar > ul > li > a > span {
		font-size: 0.85em;
		letter-spacing: 3px;
	}

	#nav_bar > ul > li > ul {
		display: none;
	}
	
	#accueil_nav
	{
		position:fixed;
		margin-left:20px;
		padding:0;
		padding-top:0.3em;
		
	}
	
	#accueil_nav a
	{
		outline: 0;
		text-decoration:none;
		padding:0;
		margin:0;
	}
	
	#nav_profil
	{
		margin-top:3px;
		width:35px;
		height:42px;
		padding:0px;
	}
	
	#name_accueil
	{
		position:relative;
		top:-15px;
		left:5px;
		font-family: 'Trebuchet MS',sans-serif;
		color:white;
		font-size:0.8em;
	}
	
	#nav_icon
	{
		position:fixed;
		left:0;
		top:0;
		
		width:40px;
		height:40px;
		margin:10px;
		opacity:50%;
		
		transition: top 0.4s; /* Transition effect when sliding down (and up) */
		z-index: 1;
	}
	
	#nav_icon:hover
	{
		opacity:100%;
		cursor: pointer;
	}
		
/**** Section ****/


.title_section_white, .title_section_black
{
	text-align: center;
	text-transform: uppercase;
	
	margin : 0 22%;
	padding-top : 60px;
	font-size:1.7em;
	
	font-family: 'Trebuchet MS', Tahoma, Helvetica;
}

.title_section_black
{
	color:black;
	border-bottom: solid black 2px;
}

.title_section_white
{
	color:white;
	border-bottom: solid white 2px;
}

#title_contact{
	
	
	text-align: center;
	text-transform: uppercase;
	
	margin : 0 22%;
	padding-top : 45px;
	padding-bottom:5px;
	color:white;
	font-size:0.88em;
}

section{
	
	padding:0;
	margin:0;
}

#gamedev_part{
	background-color : #002e5b;
	margin:0;
}

#vfx_part, #resume_part {
	background-color:white;
}





/*** Footer *****/


/* Nav footer */
	
	
	#nav2{
		margin-bottom:0;
		padding:0;
	}
	
	#nav2 > ul > li > a{
		border: 0;
		text-decoration: none;
		outline: 0;
		color:white;
	}
	
	#nav2 > ul > li{
		list-style:none;
		display:inline;
		margin-left:10px;
		margin-right:10px;
	}
		
	#nav2 > ul > li.active > a:before, #nav2 > ul > li:hover > a:before,  {
		color: #fff;
	}

	#nav2 > ul > li:hover > a {
		color: #53A9CE;
		 
	}
	
	#linkedin:hover, #mail:hover{
		border:1px #53A9CE solid;
		cursor: pointer;
	}
		
	#nav2 > ul > li > a{		
		text-decoration : none;
	}

	#footer{
		background-color: #001e3b;
	}
	
	#nav2 .title_section{
		padding-top:0px;
		color:white;
		border:1px black solid;
	}

#artstation_footer, #mail_footer, #insta_footer, #x_footer, #linkedin_footer{
	width:25px; 
	height:25px;
}

#icons_footer{
			
	width: 15%; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 0;
	margin-top:30px;
    position: relative;
	/*left:0.2%;*/
	
	width:300px;
			left:27px;
	
}


/* Copyright */

#copyright {
	text-align: center;
	color:white;
	font-size:0.75em;
	line-height: 1.4em;
	padding:10px;
	margin-top:20px;
}

.name-project-type-1
		{
			margin-left: 45%;
			color:white;
		}

/**************/
/*** Rajout ***/		
/**************/

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

		/* Basic */

			body, input, textarea, select {
				line-height: 1.65em;
				font-size: 13pt;
			}

			

		/* List */

			ul.actions li {
				display: inline-block;
				margin-left: 1em;
			}

				ul.actions li:first-child {
					margin-left: 0;
				}

			ul.divided li {
				margin: 2.5em 0 0 0;
				padding: 2.5em 0 0 0;
			}

		/* Wrappers */

			#main-wrapper {
				padding: 6em 0 6em 0;
			}
			
		
		
	}

/* Tablet */

	@media screen and (min-width: 801px) and (max-width: 1215px) {
	
		/* Basic */

			body {
				min-width: 737px;
				line-height: 1.75em;
				/*font-size: 12pt;*/
			}

			input, textarea, select {
				line-height: 1.75em;
				/*font-size: 12pt;*/
			}

		/* Image */

		.image.featured {
			margin: 0 0 2.5em 0;
		}

		/* Nav */
		
		#nav_bar > ul > li > a{
			
			padding-top:13.5px;
			padding-bottom:13.5px;
		}
	
	}

/* Mobile */

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

		/* Basic */
		

		html, body {
			min-width:740px;
			/*overflow-x: hidden;*/
		}
		
		#nav_bar > ul > li > a{
			
			padding-top:20px;
			padding-bottom:20px;
		}

		#name_accueil{
			display:none;
		}

		#page-wrapper {
			-moz-backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;
			-moz-transition: -moz-transform 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease;
			transition: transform 0.5s ease;
			padding-bottom: 1px;
		}
			
		
		.title_section_black, .title_section_white {
			font-size:1.6em;
			/*font-weight:lighter;*/
			padding-bottom:8px;
		}
		
		/* Gamedev part */
		
		#explication_gamedev {
			line-height: 1.8em;
			font-size:1em;
			letter-spacing: 0;
		}
		
		/* Resume part */
		
		#experiences .sous-section_name 
		{
			font-size:1.35em;
			font-family: 'Trebuchet MS';
			/*font-weight:lighter;*/
		}
		
		#experiences .entry_xp .title_exp .role_exp, #experiences .entry_xp .title_exp .location_exp
		{
			font-size:15px;
		}
		
		#experiences .entry_xp .title_exp .time_exp
		{
			font-size:15.3px;
		}
		
		#experiences .entry_xp .body_exp ul li
		{
			line-height: 1.8em;
		}
			
		#footer{
			height:225px;
			/*border-bottom:5px #001e3b solid;*/
		}
		
		#copyright
		{
			margin-bottom:0;
			padding-bottom:0;
			font-size:13.5px;
		}
	}
	
	
	@media screen and (max-width: 600px) {
		
		#nav_bar > ul > li > a{
			
			padding: 6px;
			padding-top:20px;
			padding-bottom:20px;
		}
		
		#linkedin {
			right : 44.5%;				
		}	
			
		#linkedin span{
			left:32%;
		}	
	}
	
	@media screen and (max-width: 550px) {
		
		
			#nav_bar > ul > li > a > span {
				font-size: 0.82em;
				letter-spacing: 1.5px;
			}
			
			#linkedin {
				
				right : 42.5%;				
			}

			#linkedin span{
		
				left:22%;
			}			

	}

/** Gestion du scroll de la page **/

.remove-scrolling { 
  height: 100%; 
  overflow: hidden; 
}