/*________ FONT_______*/

@font-face {
	font-family: 'thirsty_roughregular_one';
	src: url('../font/thirsty/yellow_design_studio_-_thirstyroughregone-webfont.eot');
	src: url('../font/thirsty/yellow_design_studio_-_thirstyroughregone-webfont.eot?#iefix') format('embedded-opentype'),
	url('../font/thirsty/yellow_design_studio_-_thirstyroughregone-webfont.woff2') format('woff2'),
	url('../font/thirsty/yellow_design_studio_-_thirstyroughregone-webfont.woff') format('woff'),
	url('../font/thirsty/yellow_design_studio_-_thirstyroughregone-webfont.ttf') format('truetype'),
	url('../font/thirsty/yellow_design_studio_-_thirstyroughregone-webfont.svg#thirsty_roughregular_one') format('svg');
	font-weight: normal;
	font-style: normal;

}

/*- - - - - - - - - BODY - - - - - - - - -*/

body{
	font-family: 'roboto', Helvetica, Arial, sans-serif;
	overflow-x: hidden;
}

/*- - - - - - - - - NAVIGATION - - - - - - -*/

nav{
	height: 80px;
}

.navbar{
	margin-bottom: 0;	
}

.nav{
	padding-top: 20px;
	float: right;
}

.nav a{
	color:#99999a;
}

.logo{
	background: url('../img/logo_petit.png') no-repeat center;
	width: 89px;
	height: 62px;
	margin: 10px;
	float: left;
}

/*------ JUMBOTRON ------*/

.jumbotron {
	margin-top: 0;
	margin-bottom: 0;
	color: #533; 
	background: black url('../img/background2.jpg') no-repeat center;
	height: 590px;
	text-align: center;
	color: white;
}

.jumbotron a{
	border: 2px solid white;
	border-radius: 0%;
	background-color: transparent;
	color: white;
	text-transform: uppercase;
	margin-top: 30px;
}

.jumbotron strong:nth-child(1){
	color: #b7588d;
}

.jumbotron strong:nth-child(3){
	color: #e6da61;
}

.jumbotron a:hover{
	background: white;
	color: grey;
}

.jumbotron span{
	font-family: 'thirsty_roughregular_one';
}

.jumbotron strong{
	text-transform: uppercase;
	font-weight: 400;
}

.jumbotron h1{
	padding: 0;
	margin: 0;
	font-size: 90px;
	font-family:'thirsty_roughregular_one';
}

.jumbotron p{
	padding: 0;
	margin: 0;
	margin-top: -20px;
	font-size: 71px;
}

.presentation{
	padding-top: 70px;
}

/*- - - - - - - - - WORKS - - - - - - - -*/

.works{
	height: 690px;
	background-color: #913167;
	margin:0;
	padding: 0;
}

.works .row{
	padding: 0;
	margin: 0;
}

.works h1{
	text-align: center;
	font-family: 'thirsty_roughregular_one';
	color: white;
	font-size: 50px;
	margin-bottom: 20px;
}

.works h1:after {
	content: '';
	text-align: center;
	width: 90px;
	height: 5px;
	background: white;
	display: block;
	margin: 10px auto;

}

/*------------- Case / Projets -------------*/

.pictures{
	height: 160px;
}

.cases1{
	background: url('../img/cases1.jpg') no-repeat center;
}

.cases2{
	background: url('../img/cases2.jpg') no-repeat center;
}

.cases3{
	background: url('../img/cases3.jpg') no-repeat center;
}

.cases4{
	background: url('../img/cases4.jpg') no-repeat center;
}

.cases5{
	background: url('../img/cases5.jpg') no-repeat center;
}

.cases6{
	background: url('../img/cases6.jpg') no-repeat center;
}

.cases7{
	background: url('../img/cases7.jpg') no-repeat center;
}

.cases8{
	background: url('../img/cases8.jpg') no-repeat center;
}

.cases9{
	background: url('../img/cases9.jpg') no-repeat center;
}

.cases1:hover{
	background: url('../img/cases1_hover.jpg') no-repeat center;
}

.cases2:hover{
	background: url('../img/cases2_hover.jpg') no-repeat center;
}

.cases3:hover{
	background: url('../img/cases3_hover.jpg') no-repeat center;
}

.cases4:hover{
	background: url('../img/cases4_hover.jpg') no-repeat center;
}

.cases5:hover{
	background: url('../img/cases5_hover.jpg') no-repeat center;
}

.cases6:hover{
	background: url('../img/cases6_hover.jpg') no-repeat center;
}

.cases7:hover{
	background: url('../img/cases7_hover.jpg') no-repeat center;
}

.cases8:hover{
	background: url('../img/cases8_hover.jpg') no-repeat center;
}

.cases9:hover{
	background: url('../img/cases9_hover.jpg') no-repeat center;
}

/*---------- Follow / Social -------------*/

.social{
	color: white;
}

.social i{
	font-size: 40px;
	margin-top: 5px;
}

.follow div{
	margin-top: 10px;
}

.social a{
	color: white;
}

.social a:hover{
	color: #602044;
}

/*---------- Projet -----------*/

.projet a{
	border: 3px solid white;
	border-radius : 0;
	color: white;
	text-align: right;
	float: right;
	padding-left: 100px;
	padding-right: 100px;
	text-transform: uppercase;
}

.projet a:hover{
	color: #913167;
	background-color: white;

}

/*- - - - - - - - - - ABOUT - - - - - - - -*/

.about{
	padding: 0;
	margin: 0;
	height: 690px;
	background-color: white;
}

.about .row{
	margin: 0;
	padding: 0;
}

.about img{
	height: 430px;
	width: 430px;
}

.about strong{
	color: #913167;
}

.about h1{
	padding: 0;
	margin: 0;
	text-align: center;
	color: grey;
	font-family: 'thirsty_roughregular_one';
	font-size: 50px;
}

.about a{
	color: grey;
	border: 2px solid grey;
	text-align: center;
	border-radius: 0;
	margin-top: 30px;
	text-transform: uppercase;
}

.about a:hover{
	background-color: grey;
	color: white;
}

.about h1:after {
	content: '';
	text-align: center;
	width: 90px;
	height: 5px;
	background: grey;
	display: block;
	margin: 30px auto;

}

.centered{
	display: block;
}

.fleche{
	text-align: center;
	padding: 0;
	margin: 0;
}

.fleche img{
	width: 117px;
	height: 59px;
	margin-bottom: 80px;
}

.profil{
	text-align: center;
	padding: 0;
	margin: 0;
}

.profil img{
	height: 430px;
	width: 430px;
}

.description{
	padding: 0;
	margin: 0;
	width: 350px;
}


/*- - - - - - - - CONTACT - - - - - - - -*/

.contact{	
	padding: 0;
	margin: 0;
	border-top: 4px grey solid;
	background: black url('../img/background3.jpg') center;
	height: 650px;
	text-align: center;
	color: white;
}

.contact h1{
	text-align: center;
	font-family: 'thirsty_roughregular_one';
	color: white;
	font-size: 50px;
	margin-bottom: 30px;
	margin-top: 50px;
}

.contact h1:after {
	content: '';
	text-align: center;
	width: 90px;
	height: 5px;
	background: white;
	display: block;
	margin: 10px auto;
}

/*- - - - - - FORMULAIRE DE CONTACT - - - - - -*/

.contact p{
	font-size: 19px;
	font-weight: 100;
	padding: 0;
	margin: 0;
}

.contact p:nth-child(4) {
	font-family: 'thirsty_roughregular_one';
	color: white;
	font-size: 23px;
	margin-bottom: 20px;
	margin-top: 40px;
}

.contact input{
	border-radius: 0;
	border-bottom: 6px #e6da61 solid;
	margin-bottom: 20px;
}

.contact textarea{
	border-radius: 0;
	border-bottom: 6px #e6da61 solid;
}

.contact textarea .id{
	text-transform: uppercase;
}

.contact button{
	text-transform: uppercase;
	margin-top: 35px;
	border: 3px white solid;
	background: transparent;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
	font-size : 19px;
}

.contact button:hover{
	background-color: white;
	color: grey;
}

/*- - - - - - - FOOTER - - - - - - - - -*/
footer{
	text-align: center;
	padding: 0;
	margin: 0;
}

.pages{
	padding-top: 20px;
	text-align: center;
}

.pages li{
	color:#99999a;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}

.pages li a{
	color:#99999a;
	text-transform: uppercase;
	font-size: 13px;
	text-decoration: none;
	color: black;
}

footer h3{
	text-align: center;
	font-family: 'thirsty_roughregular_one';
	font-size: 20px;
}

footer .followme a{
	font-size: 25px;
	color: grey;
	margin: 0;
	padding: 0;
}

footer p{
	margin: 0;
	padding: 0;
	color: white;	
}

footer .rights{
	font-size: 12px;
	padding-top: 10px;
	background-color: #9a9a9a;
	padding-bottom: 10px;
}

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

@media screen and (min-width: 570px) and (max-width: 640px){
  	.jumbotron h1{
		font-size: 50px;
	}
}

@media screen and (min-width: 640px) and (max-width: 795px){
  	.jumbotron h1{
		font-size: 45px;
	}
}