@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
	padding: 0;
	background-color:#FFFFFF;
	
}

#wrapper{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
header{
	text-align: center;
}
h1{
	font-size: 6em;
	color: #463629;
	font-family: 'Calligraffitti', cursive;
	margin-bottom: auto;
	margin-top: 10px;
}
a:link, a:visited{
	text-decoration: none;
	color: #512605;
}
a:hover{
	color: #2A1709;
}
#vignettes{
	width: 584px;
	margin-left: auto;
	margin-right: auto;
}
.flotteGauche{
	float: left;
	margin-right: 15px;
	margin-bottom: 2px;
}
.colonne1{
	width: 640px;
	display: inline-block;
	vertical-align: top;
	margin-right: 12px;
	font-family: 'Nunito', sans-serif;
}
.colonne2{
	width: 300px;
	display: inline-block;
	vertical-align: top;
}
footer{
	
	text-align: center;
	word-spacing: 20px;
	padding-top: 20px;
	font-family: 'Nunito', sans-serif;
}

nav{
  width: 100%;
  position: inherit;
  top:50px;
  text-align:center;
	word-spacing: 100px;
}
nav a{
  font-family: 'Oswald', sans-serif;
  font-weight:500;
  text-transform:uppercase;
  text-decoration:none;
  color:#16151b;
  margin:20px;
  font-size:16px;
  letter-spacing:2px;
  position:relative;
  display:inline-block;
	
}
nav a:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 3px;
  background:#16151b;
  top:47%;
  animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
  animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;

}
@keyframes in{
  0%{
    width: 0;
    left:0;
    right:auto;
  }
  100%{
    left:0;
    right:auto;
    width: 100%;
  }
}
@keyframes out{
  0%{
    width:100%;
    left: auto;
    right: 0;
  }
  100%{
    width: 0;
    left: auto;
    right: 0;
  }
}
@keyframes show{
  0%{
    opacity:0;
    transform:translateY(-10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@for $i from 1 through 5 {
  nav a:nth-child(#{$i}){
    animation:show .2s #{$i*0.1+1}s ease 1 both;
  }
}