@charset "utf-8";
body{
	margin:0;
	padding: 0;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

}
a{
	text-decoration: none;
}
.conteneur{
    width: 80%;
    margin: auto;
}
.flex{
	display: flex;
}
.colonne{
	flex:1;
	margin: 20px;
}
h1{
	color: #FFFFFF;
    margin-top: 100px;
    margin-bottom: 0;
    font-size: 60px;
    font-weight: bold;
	text-align: left;
}
h2{
    color: #DBBDBE;
	font-weight: lighter;
	font-size: 30px;
	margin: 0;
	text-align: left;
	
}
/*Présentation*/
#synopsis{
	background-color: #FFFFFF;
	padding: 20px 0;
}
h3{
	text-align: center;
	text-transform: uppercase;
	font-size: 30px
}
h4{
	font-size: 20px;
	margin: 0;
	color: #452627;
	font-weight: bold;
}
/*Navigation*/
.topnav{
    background-color: #000000;
    overflow: hidden;
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
}
.navigation{
	float: right;
}
.navigation a{
	display: inline-block;
	padding: 20px;
	color: #FFFFFF;
	text-decoration: none;
}
.navigation a:hover{
	background-color: #FFFFFF;
	color: #000000;
}
/*Hello*/
#hello{
	background-image: url("images/header.jpg");
	background-position: top;
	background-size: cover;
	height: 600px;
	padding: 20px 0;
}
.portrait{
	width: 100%;
}
/*Compétences*/
#infos{
	
	padding: 20px 0;
	
}
.centrer{
	text-align: center;
}
.petite{
	width: 30%;
	margin-bottom: 20px;
}
/*Portfolio*/
#acteurs{
	padding: 20px 0;
	background-color: #ECE6DF;
}
#acteurs h4 a{
	color: #000000;
}
.portfolio{
	width: 100%;
}
/*Contact*/
#contact{
	background-color: #3D2424;
	text-align: center;
	padding: 40px 0;
}
.reseauSocial{
	width: 50px;
	margin: 0 40px;
}

.topnav .icon {
	display: none;
	background-color: #260301;
}
@media screen and (max-width: 600px) {

.topnav a {display: none;}
.topnav a.icon {
    display: block;
	  position: fixed;
    right: 0;
    top: 0;
  }
	 .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
	.topnav.responsive .navigation{
		float: none;
	}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	.topnav.responsive a.logo{
		display: none;
	}
  .topnav.responsive .fa-navicon:before, .topnav.responsive .fa-reorder:before, .topnav.responsive .fa-bars:before {
	  content: "\f00d";
	  
	}
	#hello{
		height: 350px;
	}
	.flex{
		display: block;
	}
	.reseauSocial{
		width: 15%;
		margin: 0 5%;
	}
}
