/*
@primary: #5f545a;
@secondary: #67c2d4;
@ternary: #faf1e0;
@altern: #ebd3bd;
*/

@import url(reset.css);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Merriweather+Sans:500|Open+Sans:400,700);

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

/* 1em equals 10px, instead of the default 16px.
To set the font-size to the equivalent of 14px, set it to 1.4em.
The rem unit is relative to the root—or the html—element. 
That means that we can define a single font size on the html
element and define all rem units to be a percentage of that.
*/
html { 
  font-family: "Lato", sans-serif;
  color: #faf1e0;
  background-color: #5f545a;
  font-size: 62.5%;       /* =10px */
} 

body {
  /*font-size: 10px;*/    /* fallback pour les anciens navigateurs */
  font-size: 1em;         /* =10px - taille relative au root (html) */
  max-width: 100em;        /* =960px */
  margin: 1em auto;
  line-height: 2.2;        /* =22px */
  padding: 2em;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
}

h1 {font-size: 4.4rem;text-transform: uppercase;}
h2 {font-size: 3.4rem;}
h3 {font-size: 3.0rem;}
h4 {font-size: 2.6rem;}
h5 {font-size: 2.2rem;}
h6 {font-size: 1.8rem;}

li, p, label {font-size: 1.6rem;line-height: 2.6rem;}

img {max-width: 100%;}

em {font-style: italic;}
strong {font-weight: bold;}

button {
  background: transparent;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  color: #faf1e0;
  font-size: 2rem;
  text-transform: uppercase;
  padding: 1.4rem 6rem;
  border: .3rem solid #faf1e0;
  cursor: pointer;
  margin: 4rem;
  max-width: 30rem;
}

button:hover {
  color: #faf1e0;
  border: .3rem solid #faf1e0;
}


body header {
  text-align: center;
}

body footer {
  clear:both;
  text-align:center;
  margin-bottom: 2em;
}

section {
  margin-bottom: 4em;
}
/*

body > nav {

}

body > section {

}

body > aside {
  width: 27.0833%;
  float: right;
  margin-bottom: 5em;
}



body > footer hr {
  height: 1px;
  color: #FFC;
}

body > section > article {
  margin-top: 2em;
}

body > section > article h3,
body > section > article section {
  margin-top: 1.5em;
}
*/