/****************************************
*********** Élements généraux ***********
****************************************/

body {
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

a {
  color: #00B7FF;
}

.wrap {
  width: 90%;
  max-width: 900px;
  margin: auto;
}

header .wrap,
footer .wrap {
  max-width: 1200px;
}


/****************************************
***************** Header ****************
****************************************/

header {
  position: relative;
}

header::before {
  content: "";
  display: block;
  position: absolute;
  top: -7em;
  left: -1em;
  width: 2560px;
  height: 20em;
  min-width: 120vw;
  background-color: #006D80;
  border-bottom: #78A419 solid 1em;
  transform: rotate(5deg);
  z-index: -1;
}

/********** Logo ************/

.site-name {
  position: absolute;
  top: 15px;
  font-size: 3em;
  font-family: "Delius Unicase", Verdana, sans-serif;
  font-weight: bold;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: white;
}

/********** Navigation ************/

header .nav {
  width : 100%;
  padding-top: 1em;
}

header .nav li {
  z-index: 1;
}

header .nav a {
  font-size: 1.1em;
  color: white;
  transition: all 0.2s;
}

header .nav a:hover {
  color: #78A419;
}


/****************************************
***************** Footer ****************
****************************************/
footer {
  position: relative;
  overflow: hidden;
  width: 100vw;
  padding-top: 9em;
  color: white;
}

footer::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -7em;
  left: -1em;
  width: 2560px;
  height: 10em;
  min-width: 120vw;
  background-color: #006D80;
  border-top: #78A419 solid 1em;
  transform: rotate(5deg);
  z-index: -1;
}

footer .wrap {
}

/****************************************
***************** Content ***************
****************************************/

.content {
  min-height: calc(100vh - 24.7em);
  margin-top: 10em;
}