@font-face {
    font-family: 'Open Sans';
    src: url('https://www.yoann-vermeulen.com/assets/font/OpenSans.ttf') format('truetype');
}

@font-face {
    font-family: 'Bodoni Moda';
    src: url('https://www.yoann-vermeulen.com/assets/font/BodoniModa.ttf') format('truetype');
}

html {
scroll-behavior:smooth;
}

body {
font-family:"Open Sans", serif;
font-size:16px;
font-weight:300;
background:#000000;
color:#FFFFFF;
margin:0;
padding:0;
}

nav h1 {
float:left;
margin:0px;
}

h2 {
font-family:"Bodoni Moda", serif;
font-style:normal;
font-weight:500;
font-size:50px;
color:#FFFFFF;
margin:100px 0 0;
}

ul {
list-style:none;
margin:0 3em 0 0;
padding:0;
}

header {
height:50px;
width:100%;
position:fixed;
top:0;
left:0;
background:#fff;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
z-index:100;
padding:0 20px;
}

.logo {
float:left;
font-size:29px;
font-weight:300;
text-decoration:none;
color:#333;
line-height:50px;
}

.logo img {
height:21px;
width:auto;
}

.nav-menu {
float:right;
margin:0;
padding:0;
}

.nav-menu li {
float:left;
margin-left:1em;
}

.nav-menu li.crea {
float:left;
margin-right:3em!important;
}

.nav-menu a {
text-decoration:none;
color:#000;
font-weight:800;
line-height:50px;
display:block;
letter-spacing:.3em;
font-size:11px;
transition:color 1s ease;
padding:0 10px;
}

.nav-menu a:hover {
color:#FF163E;
transition:color .3s ease;
}

.hero video,.creation video {
width:100%;
height:auto;
display:block;
}

.hero {
margin-top:50px;
padding: 0px 18%;

}


#creation h2 {
text-align:center;
margin-bottom:36px;
margin-top:180px;
}



#creation p {
  text-align: justify;
  margin: 36px;
  margin-bottom:50px;
  padding: 0 205px;
  font-size: 17px;
}

#creation p b {
    font-weight: 600;
    
}

.creation,.about {
max-width:1200px;
margin:auto;
padding:40px 20px;
}

#creation div {
padding:0;
}

#apropos h2 {
text-align:center;
margin-bottom:36px;
margin-top:180px;
}

#apropos p {
text-align:justify;
margin:36px;
padding:0 205px;
}

#apropos a {
text-decoration:none;
color:#FFFFFF;
font-weight:600;
transition:color 1s ease;
}

#apropos a:hover {
text-decoration:none;
color:#FF163E;
transition:color 0.5s ease;
}

#apropos .expersecteur {
font-family:"Bodoni Moda", serif;
font-weight:200;
font-size:28px;
text-align:center;
margin:4px;
}


footer {
text-align: center;
background: #000;
margin-top: 180px;
padding: 60px 60px 250px;
background-image: url(https://www.yoann-vermeulen.com/assets/img/contact.png);
background-repeat: no-repeat;
background-position: top;
background-position-y: top;
background-position-y: 120px;
background-size: 30%;
background-color: #000;

}

footer h2 {
color:#FFFFFF;
font-size:50px;
margin-top:0;
}

footer p {
color: #FFFFFF;
font-size: 12px;
background: #000;
padding: 4px;
letter-spacing: 2px;
}

footer a {
color:#FFFFFF;
transition:color 1s ease;
text-decoration:none;
font-weight:700;
}

footer a:hover {
color:#FF163E;
transition:color 0.3s ease;
text-decoration:none;
font-weight:700;
}