html {
	height:100%;
}
body {
	background: white;
	margin:0;
	height:100%;
}

h1 {
  margin: 0 0 12px 0;
  color:black;
  text-transform: uppercase;
  font-family:Lato, sans-serif;
  text-align: center;
  font-weight: 900;
  line-height: 1em;
    text-transform: uppercase;
}

h2 {
  margin: 0 0 12px 0;
  color:black;
  text-transform: uppercase;
  font-family:Lato, sans-serif;
  text-align: center;
  font-weight: bold;
  line-height: 1em;
    text-transform: uppercase;
}

h3 { 
  margin: 0px 0 0px 0;
  font-weight: normal;
  color:black;
  font-family:Lato, sans-serif;
  text-align: center;
}    

.item {
  margin: 30px auto;

  color:#333;
  text-align: center;
}

.item p {
  padding: 0 100px;
  font-size: 140%;
  line-height: 1.4em;
}

.liens, .liens a {
  font-size: 75%;
  color:red;
}

.infos {
  margin: 80px auto;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {

    .item p {
      padding: 0 0px;
      font-size: 120%;
      line-height: 1.4em;
    }
    
  }
  
#header {
  height: 50vh;
  background: url(../img/header.jpg) no-repeat;
  background-size: contain;
  background-position: center center;
}  

/* FOOTER
************************************************************/
#footer {
  background: #111;
  color:white;
  min-height: 200px;
  font-size: 90%;
  padding: 20px;
    font-family:Lato, sans-serif;
    margin-top: 50px;
}

#footer a { color: white}

#footer .columns {
  padding: 20px;
}

#footer .credits { text-align: right;}

.logo {
  height: 60px;
}

.logo.center {
  margin: 0 25%
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {

    .logo {
      height: 40px;
    }
    
  }