html{
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body {
    margin: 0; 
    padding: 0; 
    min-width: 100vw!important;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1{
    color:#fff;
    font-weight: 900;
    font-size: 3em;
    margin:0;
}

h2{
  margin-top:50px;
  color:#ffcb04;
  font-size: 3em; 
  font-weight: 900;
}
h3{
  color:#44525f;
  margin:0;
  font-size: 2em;
  text-transform: uppercase;
}
h4{
    color:#fff;
    font-weight: 400;
    font-size: 1.5em;
    margin:0.5em;
}

p{
  text-align: left;
}


button {
  margin:3%;
  border: solid 2px #fff; 
  color: #fff; 
  text-decoration: none;
  border-radius:25px;
  text-align: center; 
  font-size: 18px; 
  font-weight: bold; 
  cursor:pointer; 
  width:250px;
  padding:10px 0;
  background: transparent;}
button:hover{
  border:solid 2px #fff;
  background-color: #fff;
  color:#ffcb04;
}

/* HEADER */

header {
    width:100vw;
    height:80vh;
    text-align: left;
    color: white;
    background-image: url("http://be-hive.be/img/header-bg_1.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
}

header .kbs {
    position:absolute;
    top:5vh;
    right:5vw;
}

header .intro-text{
    width:50vw;
    margin-top:20vh;
}

header .intro-text p{
    color:#ffcb04;
    margin-top:30px;
    margin-left:23%;
    font-size:1em;
}

header .intro-text img{
    width:100%;
}

/* BANDAGE JAUNE TITRE NEWSLETTER*/
#title{
    z-index: 20;
    background:#ffcb04;
    min-height: 20vh;
    margin-top:-10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2vh 0;
}

/* ARTICLES*/
section{
  padding:10vh 0;
}

aside{
  max-width:45vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

aside img{
  height:100%;
}

section.newscontent img{
  width: 100%;
}

section .centerContent{
  max-width: 70vw;
  padding:2vw;
  margin-left:auto;
  margin-right:auto;
}

section .rowContent{
  display: flex;
  flex-direction: row;
}

section .textContentLeft{
  display: block;
  padding:0 2vw 0 2vw;
  width: 800px;
}

section .textContentRight{
  display: block;
  padding:0 0 0 2vw;
  max-width: 800px;
}

section .textContentCenter{
  display: block;
  padding:0 0 0 2vw;
  max-width: 800px;
  margin-right: auto;
  margin-left:auto;
}

section.middleBand{
  background:#2f3942;
  padding:10vh 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section.middleBand article{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

section.middleBand h2{
  color:#fff;
  margin:0;
}

section.middleBand p{
  color:#fff;
  font-size: 1.5em;
  font-weight: normal;
  text-align: center;
  max-width: 800px;
}

article .cadreContent{
  background:#ffcb04;
  color:#fff;
  padding:7%;
  font-size: 1.5em;
  min-width: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



article .nextCadreContent{
  padding:7%;
  min-width: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
article .cadreContent p,article .cadreContent h2,article .nextCadreContent p,article .nextCadreContent h2{
  max-width: 70vw;
}

/* SPECIFICITE ARTICLES */

#article1 aside{
  width:40vw;
}

#article3{
  background:#fbfcfd;
  padding:0;
}

#article5 .textContentCenter p, #article5 ul{
  text-align: left;
  font-size:1em;
  color:#fff;
}

/* FOOTER */

footer{
  background: #44525f;
  margin:0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
footer .footerIllustration{
  max-width: 70vw;
  overflow: hidden;
}

footer .footerIllustration img{
  height:100%;
}

footer .credit{
  padding:2vh 5vw;
  width: 20vw;
  margin-left:auto;
  margin-right: auto;
  color:#fff;
  text-align: center;
  font-weight: bold;
}

footer .credit .explication p, footer .credit .explication a{
  font-weight: normal;
  font-size: 0.8em;
  text-decoration: none;
  color:#fff;
}

footer .credit .explication img{
  width:30%;
}

footer .credit p{
  text-align: center;
}

footer .socialLink{
  display:flex;
  flex-direction: row;
  align-items: center;
}

footer ul{
  list-style: none;
  display: flex;
  justify-content: center;
  margin:0;
  padding:0;
}

footer ul li{
  padding:10px;
}

/* RESPONSIVE */

/* TABLET */
@media screen and (max-width: 900px){
  aside {
    display: none;
  }

  section .textContentLeft{
    width:100%;
  }
  
  section .rowContent{
    flex-direction: column;
  }

  footer .footerIllustration{
    max-width: 40vw;
  }
  
  footer .credit{
    width: 60vw;
  }
}

/* PHONE */

@media screen and (max-width: 420px){
  header .intro-text{
    width:80vw;
  }
  h1{
    font-size: 2em;
    text-align: center;
    max-width:80vw;
  }
  h2{
    font-size:1.8em;
  }
  h3{
    font-size:1.5em;
  }

  section .centerContent,article .nextCadreContent p,article .cadreContent p{
    max-width: 80vw;
  }

  footer .credit{
    width:80vw;
  }

  article .cadreContent,section.middleBand p{
    font-size:1em;
  }
  footer .footerIllustration{
    display: none;
  }
}