/* Feuille de style */

html,body{
	font-size:14px;
	font-family: 'raleway', arial;
	-webkit-font-feature-settings: "lnum"; 
	-moz-font-feature-settings: "lnum"; 
	font-feature-settings: "lnum"; 
	color: #2d343b;
	line-height:1.5;
	height: 100%;
}

h1{
	font-size:400%;
}

h2{
	font-size:230%;
}




/* - - - - - - - - - - GENERALITES - - - - - - - - - - */


.wrapper{
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 20px;
}

.titre{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	width: 60%;
	line-height: 50px;
	text-align: center;
	margin: 0 auto;	
	letter-spacing: 0.5px;
	background-image: url(../img/background/filet.png);
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 70px;
}

.titre span{
	background-color: white;
	padding: 0 75px;
}

p a{
	text-decoration: none;
	color: #ff5523;
	font-weight: 600;
}

.btn-burger{
	position: fixed;
	top: 0;
	right: 0;
	color: white;
	outline: none;
	border: none;
	font-size: 300%;
	background-color: transparent;
	padding: 20px;
	display: none;
	transition: 300ms;
}

.btn-burger-black-top{
	color: #2d343b;
}

.btn-burger-black{
	color: #2d343b;
}



/* -- - - - - - - - - - - NAV - - - - - - - - - - -- */


nav{
	background-color: rgba(255, 255, 255, 0.96);
	height: 70px;
	position: fixed;
	width: 100%;
	z-index: 1;
	box-shadow: 0px 4px 6px hsla(0, 0%, 0%, 0.2);
}

nav ul{
	float: right;
	margin-right: 10px;
}

nav ul li{
	float: left;
}

nav ul li a{
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	border: 0px solid #ff5523;
	color: #2d343b;
	padding: 10px 25px;
	line-height: 50px;
	font-size: 14px;
	letter-spacing: 1px;
	transition: 250ms;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

nav ul li a:hover{
	color: #ff5523;
	padding: 10px 25px 5px 25px;
	border-bottom: #ff5523 5px solid;
}

.logo span{
	display: none;
}

.logo{
	height: 70px;
	width: 85px;
	float: left;
	margin-left: 10px;
	background-image: url(../img/logo/Logo_Seul.svg);
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
	display: block;
}

/* .logosprite{
	height: 70px;
	width: 85px;
	float: left;
	background-image: url(../img/logo_sprite2.png);
	background-repeat: no-repeat;
	overflow: hidden;
	display: block;
}

.logosprite:hover{
	background-position: -100px;
} /*




/* -- - - - - - - - - - - ACCUEIL / HEADER - - - - - - - - - - -- */


header{
	height: 100%;
	text-align: center;
	background-image: url(../img/background/background_header.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	box-shadow: 0px 3px 10px grey;
	z-index: 2;
}

.accueil{
	width: 100%;
	position: absolute;
	top: 35%;
	margin: 0 auto;
}

header h1.header_nom{
	margin: 0 auto;
	text-align: center;
	padding-top: 30px;
	font-size: 270%;
	text-transform: uppercase;
	color: white;
	letter-spacing: 2px;
	font-weight: 600;
}

header h1.header_baseline{
	margin: 0 auto;
	text-align: center;
	padding-top: 10px;
	font-size: 190%;
	text-transform: uppercase;
	color: #ff5523;
	letter-spacing: 3px;
	font-weight: 500;
}

header img#logo_intro1{
	max-width: 300px;
}




/* -- - - - - - - - - - - SECTION 1 / PRESENTATION - - - - - - - - - - -- */


.presentation{
	background-color: white;
	padding-top: 85px; 
	padding-bottom: 85px;
	font-weight: 500;
}

.presentation p{
	text-align: center;
	font-size: 110%;
}

p.intro{
	width: 80%;
	margin: 0 auto;
	text-align: center;
	font-weight: 500;
	margin-bottom: 80px;
}

.col-3{
	width: 30%;
	float: left;
	margin-right: 5%;
}

.col-last{
	margin-right: 0;
}

p.ticon{
	margin-bottom: 15px;
}

h3{
	font-size:150%;
	text-align: center;
	margin-bottom: 20px;
	font-weight: 600;
}

p.detail{
	margin-bottom: 80px;
}

.cv a{
	clear: both;
	display: block;
	width: 320px;
	margin: 0 auto;
	color: white;
	padding: 15px;
	background-color: #2d343b;
	border-radius: 4px;
	font-size: 120%;
	font-weight: 500;
	letter-spacing: 2px;
	transition: 500ms;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.cv a:hover{
	color: #ff5523;
	background-color: black;
	box-shadow: 0 10px 20px 0px hsla(0, 0%, 0%, 0.4);
}




/* -- - - - - - - - - - - SECTION 2 / PORTFOLIO - - - - - - - - - - -- */


.portfolio{
	background-color: #ebebeb;
	padding-top: 85px; 
	padding-bottom: 85px;
}

.portfolio .titre span{
	background-color: #ebebeb;
}

.portfolio .liste-projet.grille li .main img{
	max-width: 100%;
	border-radius: 2px;
	padding: 1px;
	display: block;
}
 
.liste-projet.grille .main .projet .overlay{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -750px;
	margin-top: -350px;
	background-color:rgba(0,0,0,0.5);
	color:white;
	width: 1500px;
	line-height:700px;
	text-align:center;
	transform:scale(2);
	opacity:0;
	transition:300ms;
	overflow: hidden;
	font-size: 120%;
} 

.liste-projet.grille .main .projet img.mainm{
	display: none;
}

.liste-projet.grille .main .projet img.mains{
	display: none;
}

.liste-projet.grille{
	overflow:hidden;
}

.liste-projet.grille li{
	float:left;
	width:33.3333%;
	padding: 3px;
}

.liste-projet.grille .main li{
	float: none;
	width: 100%;
	padding: 3px;
}

.liste-projet.grille .projet{
	width: 100%;
	display:block;
	border-radius: 2px;
	overflow:hidden;
	position:relative;
}

.liste-projet.grille .projet img{
	width: 100%;
	height: 70%;
	display:block;
	transition: 300ms;
	border-radius: 2px;
	box-shadow: 1px 15px 22px black;
}

.liste-projet.grille .projet .infos{
	position:absolute;
	bottom:-70px;
	left:0;
	display:block;
	width: 100%;
	height: auto;
	color:white;
	text-align:center;
	transition: 300ms;
	font-weight: 600;
	padding: 5px 0px;
	letter-spacing: 1px;
}

.liste-projet.grille .projet .infos p{ 
	margin-bottom: 0px;
}

.liste-projet.grille .projet:hover .infos{
	bottom: 0px;
}

.liste-projet.grille .projet .titreprojet{
	width: 100%;
	color:white;
	text-align:center;
	font-weight: 600;
	font-size: 125%;
	margin-bottom: 0px;
	letter-spacing: 1px;
}

.liste-projet.grille .projet .soustitreprojet{
	width: 100%;
	color:white;
	text-align:center;
	font-style: italic;
	margin-bottom: 0px;
	letter-spacing: 1px;
	font-weight: 300;
	color:hsla(0, 0%, 100%, 0.8);
	transition: 500ms;
	transform: translate(0px,50px);
}


.liste-projet.grille .projet:hover .soustitreprojet{
	transform: translate(0px,0px);
}

.liste-projet.grille .projet:hover img{
	transform: scale(1.1);
	cursor: pointer;
}

.liste-projet.grille .projet .overlay{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-300px;
	margin-top:-300px;
	display:block;
	background-color:rgba(0,0,0,0.5);
	color:white;
	width:600px;
	line-height:600px;
	text-align:center;
	transform:scale(1.3);
	opacity:0;
	transition:300ms;
}

.liste-projet.grille .projet:hover .overlay{
	transform:scale(1);
	opacity:1;
}

.liste-projet.grille{
	overflow:hidden;
}

.fancybox-slide--iframe .fancybox-content{
	width  : 1300px;
	height: 95%;
	max-height : 95%;
	margin: 0;
}

.fancybox-toolbar {
	top: 30px;
	right: 30px;
}

.fancybox-button{
	height: 60px;
	width: 60px;
	background-color: #3b3b3b;
	opacity: 0.8
}

.fancybox-navigation button{
	opacity: 1;
}

.plusdeprojet a{
	clear: both;
	display: block;
	width: 320px;
	margin: 0 auto;
	color: white;
	padding: 15px;
	background-color: #3b3b3b;
	border-radius: 4px;
	font-size: 120%;
	font-weight: 500;
	letter-spacing: 2px;
	transition: 500ms;
	text-decoration: none;
	text-align: center;
	margin-top: 70px;
	box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.plusdeprojet a:hover{
	color: white;
	background-color: black;
	box-shadow: 0 10px 20px 0px hsla(0, 0%, 0%, 0.4);
}




/* -- - - - - - - - - - - SECTION 3 / CONTACT - - - - - - - - - - -- */


.contact{
	padding-top: 85px; 
	padding-bottom: 85px; 
	font-weight: 400;
}

.contact p{
	padding-bottom: 10px;
}

p.introcontact{
	width: 75%;
	margin: 0 auto;
	margin-bottom: 70px;
	text-align: center;
	font-weight: 500;
	font-size: 110%;
}

p.introcontact span{
	font-weight: 700;
}

form{
	width: 75%;
	margin: 0 auto;	
	text-align: center;
}

.form input,
.form textarea{
	background-color: white;
	border: 1px solid black;
	border-radius: 3px;
	padding: 2px;
	transition: 300ms;
	width: 100%;
	height: 50px;
	padding: 15px 10px;
	font-weight: 500;
	font-size: 110%;
	font-family: inherit;
   	font-size: inherit;
}

textarea[name=f-message]{
	resize : none;
}

.form label{
	display: none;
}

.form input:focus,
.form textarea:focus{
	background-color: rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.6);
	color: black;
	outline: none; /* Fix la barre bleu sur chrome */
}

p.fpremier, p.fdeuxieme{
	float: left;
	width: 50%;
	padding-right: 5px;
	padding-bottom: 10px;
}

p.fdeuxieme{
	padding-right: 0px; 
	padding-left: 5px;
}

.form textarea{
	clear: both;
	height: 250px;
	margin-bottom: 0px;
	max-width: 100%;
	margin-bottom: 5px;
}

p.obligatoire{
	font-style: italic;
	color: #3b3b3b;
	font-size: 80%;
	margin-bottom: 20px;
	font-weight: 600;
}

button.envoyer{
	width: 40%;
	margin: 0 auto;
	color: #3b3b3b;
	padding: 15px;
	background-color: white;
	border-radius: 4px;
	font-size: 120%;
	font-weight: 600;
	letter-spacing: 2px;
	transition: 500ms;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
	outline: none;
	margin-bottom: 20px;
	border: 0px black solid;
}

button.envoyer:hover{
	color: white;
	background-color: #2d343b;
	box-shadow: 0 10px 20px 0px hsla(0, 0%, 0%, 0.4);
	cursor: pointer;
}

.msg_err{
	color: red;
	font-weight: 600;
	font-size: 115%;
}

.merci{
	color: green;
	font-weight: 600;
	font-size: 115%;
}




/* -- - - - - - - - - - - Footer - - - - - - - - - - -- */


footer{
	background-color: #2d343b;
	color: white;
	padding: 15px 0px;
	text-align: center;
	font-weight: 500;
}

footer p{
	color: white;
	margin-bottom: 15px;
}

footer .lien i{
	color: white;
	font-size: 125%;
	padding: 0 15px;
	opacity: 0.7;
	transition: 300ms;
}

footer .lien i:hover{
	opacity: 1;
}

footer a{
	color: white;
	transition: 300ms;
	font-weight: 700;
}

footer a:hover{
	color: #ff5523;
}

.credit{
	border-right: 2px solid white;
	padding-right: 7px;
}

.auteur{
	border-right: 2px solid white;
	padding: 0px 7px 0px 7px;
}

.mentionlegale{
	padding-left: 7px;
}


/* -- - - - - - - - - - - RESPONSIVE - - - - - - - - - - -- */


/* Tablette (Paysage) */
@media screen and (max-width:1024px){
	
	.btn-burger{
		display: block;
		z-index: 999;
	}

	.accueil{
		top: 30%;
	}

	nav{
		position: fixed;
		left: -100%;
		height: 100%;
		width: 100%;
		transition: cubic-bezier(.14,.58,.03,1.08) 600ms;
	}

	nav ul {
		float: none;
		padding-top: 200px;
		vertical-align:middle;
	}

	nav ul li{
		display: block;
		float: none;
		text-align: center;
	}

	nav ul li a{
		display: block;
		text-decoration: none;
		text-transform: uppercase;
		color: #2d343b;
		padding: 30px 0px;
		font-weight: 500;
		font-size: 150%;
		letter-spacing: 1px;
		transition: 300ms;	
	}

	nav ul li a:hover{
		color: #ff5523;
		padding: 30px 0px;
		border-bottom: none;
	}

	nav .sprite{
		display: none;
	}

	nav.open{
		left: 0;
	}

	.liste-projet.grille li{
		width:50%;
		padding: 10px;
	}

	.liste-projet.grille .main .projet img.mainm{
	display: block;
	}

	.liste-projet.grille .main .projet img.mainl{
	display: none;
	}

	.titre{
		width: 80%;
	}
	
	.titre span{
		padding: 10px 70px;
	}

	.presentation{
		padding-top: 50px; 
		padding-bottom: 50px;
	}

	.portfolio{
		padding-top: 50px; 
		padding-bottom: 50px;
	}

	.contact{
		padding-top: 50px; 
		padding-bottom: 50px;
	}

	p.intro{
		width: 90%;
	}

	form{
		width: 90%;
	}

	p.introcontact{
		width: 90%;
	}

	p.fdeuxieme{
		margin-bottom: 10px;
	}

}




/* Tablette (Portrait) */
@media screen and (max-width: 720px) {

	header h1.header_nom{
		font-size: 210%;
	}

	header h1.header_baseline{
		font-size: 150%;
	}

	header img#logo_intro1{
		width: 270px;
	}

	.presentation, .portfolio, .contact{
		padding-top: 55px;
	}

	.col-3{
		width: auto;
		float: none;
	}

	p.intro{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 70px;
	}

	p.detail{
		width: 80%;
		margin: 0 auto;
		margin-bottom: 70px;
	}

	p.fpremier{
		padding-right: 3px;
	}

	p.fdeuxieme{
		padding-left: 3px;
	}

	h2.titre{
		width: 90%;
	}

	.titre span{
		padding: 10px 60px;
	}

	.liste-projet.grille li{
		width: 100%;
		padding: 10px 50px;
	}

	.liste-projet.grille .main li{
		padding: 10px 50px;
	}

	.liste-projet.grille .main .projet img.mainm{
	display: none;
	}

	.liste-projet.grille .main .projet img.mains{
	display: block;
	}

	p.fpremier, p.fdeuxieme{
		width: 100%;
		padding: 10px 0px;
	}

	form{
		width: 90%;
	}

	button.envoyer{
		width: 60%;
	}

	footer p{
		font-size: 92%;
	}

	.fancybox-slide--iframe .fancybox-content {
		width  : 95%;
		height : 97%;
		max-width  : 95%;
		max-height : 97%;
		margin: 0;
	}

	.fancybox-toolbar {
		top: 20px;
		right: 20px;
	}

	.fancybox-button{
		height: 50px;
		width: 50px;
	}
}




/* Mobile */
@media screen and (max-width: 500px) {


	header h1.header_nom{
		margin: 0 auto;
		text-align: center;
		padding-top: 30px;
		font-size: 210%;
		text-transform: uppercase;
		color: white;
		letter-spacing: 2px;
		font-weight: 700;
	}

	header h1.header_baseline{
		padding-top: 10px;
		font-size: 140%;
		font-weight: 600;
	}

	header img#logo_intro1{
		width: 250px;
	}

	p.intro{
		width: 100%;
	}

	p.detail{
		width: 100%;
	}

	p.introcontact{
		width: 100%;
	}

	.col-3{
		width: 100%;
		float: none;
	}

	.titre span{
		padding: 50px;
	}

	.liste-projet.grille li{
		width: 100%;
		padding: 7px;
	}

	.liste-projet.grille .main li{
		padding: 7px;
	}
}