/* Init */
body {
  margin:0;
  font-family: 'Raleway', sans-serif;
  background-color:#f5f5f5;
  color:#333;
}
.wrapper {
  width: 1200px;
  margin:100px auto;
}
img {
  max-width:100%;
}

/* Header */
header {
  text-align: center;
}
[alt="Logo Mexico"] {
  margin-bottom: 80px;
}
[alt="Banner Mexico Mer"] {
  display: block;
  border-top:10px solid #08a7ba;
}

/* Header : navigation */


/* La même chose avec sass ça donnerait ceci : */
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}


nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
nav a {
  display: inline-block;
  width:20%;
  padding:20px 0;
  color:#fff;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition:.3s all ease-in-out;
  position: relative;
}
nav a:hover {
  padding:40px 0 20px 0;
}
nav a:nth-of-type(1) {
  background-color:#e82231;
  /* &:hover{
    background-color: brown;
  } */
}
nav a:nth-of-type(1):hover {
  background-color:#ac1825;
}
nav a:nth-of-type(2) {
  background-color:#e61089;
}
nav a:nth-of-type(2):hover {
  background-color:#b60d6d;
}
nav a:nth-of-type(3) {
  background-color:#f5a21e;
}
nav a:nth-of-type(3):hover {
  background-color:#c18017;
}
nav a:nth-of-type(4) {
  background-color:#89c241;
}
nav a:nth-of-type(4):hover {
  background-color:#679431;
}
nav a:nth-of-type(5) {
  background-color:#09a8bb;
}
nav a:nth-of-type(5):hover {
  background-color:#05727e;
}
/* Main */
main {
  background-color:#fff;
  padding:50px 150px;
}
h1 {
  margin-top: 0;
  font-size: 40px;
  text-align: center;
}
h2 {
  font-size: 20px;
}
main img {
  float:right;
  margin:0 0 20px 20px;
}
p {
  line-height:30px;
}