/*///////////////////////////// FONT DECLARATIONS //////////////////////////////*/
@font-face{
  font-family:'Helvetica World';
  font-style: normal;
  font-weight: normal;
  src:url('fonts/HelveticaWorld-Regular.woff');
}

@font-face{
  font-family:'Helvetica World';
  font-style: normal;
  font-weight: bold;
  src:url('fonts/HelveticaWorld-Bold.woff');
}

@font-face{
  font-family:'Helvetica World';
  font-style: italic;
  font-weight: normal;
  src:url('fonts/HelveticaWorld-Italic.woff');
}

@font-face{
  font-family:'Helvetica World';
  font-style: italic;
  font-weight: bold;
  src:url('fonts/HelveticaWorld-BoldItalic.woff');
}

/*///////////////////////////// CSS RESET //////////////////////////////*/
p, h1, h2, h3, h4, h5, h6, footer, header, section, article, aside, body, pre, img, div{
  box-sizing: border-box;
  font-weight:normal;
  margin:0;
  padding:0;
}

a{
  color:black;
  text-decoration: none;
}

/*///////////////////////////// BASE //////////////////////////////*/
html{
  font-family: 'Helvetica World', Helvetica, Arial, sans-serif;
  font-size: calc(10px + 1vmin);
  font-style:normal;
  padding:1.5vw 2.5vw 2.5vw 2.5vw;
}

/*///////////////////////////// HEADER //////////////////////////////*/
header{
  height:2.5vw;
  position: relative;
  z-index:1;
}

article{
  float:left;
  font-size:0.9rem;
  line-height: 1.3em;
  position:relative;
  width:calc(25% - 0.94vw);
  word-wrap:break-word;
}

p{
  font-weight:inherit;
  width:auto;
}

.bold{
  font-weight: bold;
}

#contact:after{
  clear:both;
}

article:not(#contact):not(.texte){
  margin-right:1.25vw;
}

/*///////////////////////////// TEXTES //////////////////////////////*/
.texte{
  position:absolute;
}

.infos{
  left:calc(50% + 0.75vw);
  width:calc(50% - 0.9375vw);
}

.contact{
  left:calc(75% + 0.75vw);
  width:calc(25% - 0.9375vw);
}

.hidden{
  display:none;
}


/*//////////////////////// start of desktop/large tablet styles ////////////////////////*/
@media (min-width: 767px) {
  .texte{
    top:2.5vw;
  }

  .activable:hover, .activable:focus{
    cursor:pointer;
    font-style:italic;
  }

  /*///////////////////////////// IMAGES //////////////////////////////*/
  .visuel{
    bottom:2.5vw;
    display:block;
    height: calc(100% - 5vw);
    position:absolute;
    width: calc(100% - 5vw);
  }

  .wrapper{
    bottom:0;
    height:calc(100% - 2.5vw);
    position: absolute;
  }

  .wrapper:not(.center){
    width:calc(50% - 0.75vw);
  }

  .visu{
    bottom:0;
    max-height: calc(100vh - 7.5vw);
    max-width:100%;
    position:absolute;
  }

  .right{
    right:0;
  }

  .center{
    left:50%;
    transform:translate(-50%);
    width: 70%;
  }

  #àdroite{
    right:0;
  }

}

/*//////////////////////// start of phone styles /////////////////////////*/
@media (max-width: 767px) {
  /*///////////////////////////// CSS RESET //////////////////////////////*/
  p, h1, h2, h3, h4, h5, h6, footer, header, section, article, aside, body, pre, img, div{
    box-sizing: border-box;
    margin:0;
    padding:0;
  }

  /* BASE */
  html{
    padding: 5vw 6vw 6vw 6vw;
  }

  header{
    height:calc(100vh - 12vw);
  }

  article{
    font-size: 1rem;
    margin:0;
    position:absolute;
    width: calc(50% - 3vw);
  }

  article.activable{
    bottom:0;
  }

  #job, #contact{
    right:0;
  }

  .bold{
    font-weight: bold;
  }


  /* TEXTE */
  .texte{
    bottom:9vw;
  }

  .infos{
    left:0;
    width:100%;
  }

  .contact{
    left:calc(50% + 3vw);
    width:calc(50% - 6vw);
  }


  /* VISU */
  .visuel{
    height:calc(100vh - 30vw);
    width:calc(100% - 12vw);
    position:absolute;
    text-align: center;
    top:18vw;
  }

  .wrapper{
    margin:0 auto;
    max-height:100%;
    max-width:100%;
  }
  .visu{
    max-height: calc(100vh - 20vw); max-width:100%;
  }
}


@media (max-height: 479px) and (orientation:landscape){
  /*///////////////////////////// CSS RESET //////////////////////////////*/
  p, h1, h2, h3, h4, h5, h6, footer, header, section, article, aside, body, pre, img, div{
    box-sizing: border-box;
    margin:0;
    padding:0;
  }

  /* BASE */
  html{
    padding: 3vw 4vw 4vw 4vw;
  }

  header{
    height:calc(100vh - 8vw);
  }

  article{
    font-size: 1rem;
    margin:0;
    position:absolute;
    width: calc(50% - 2vw);
  }

  article.activable{
    bottom:0;
  }

  #job, #contact{
    right:0;
  }

  .bold{
    font-weight: bold;
  }


  /* TEXTE */
  .texte{
    bottom:6vw;
  }

  .infos{
    left:0;
    width:100%;
  }

  .contact{
    left:calc(50% + 2vw);
    width:calc(50% - 4vw);
  }


  /* VISU */
  .visuel{
    height:calc(100vh - 20vw);
    width:calc(100vw - 8vw);
    top:9vw;
  }

  .wrapper{
    height: 100%;
    max-width:calc(50% - 1vw);
    position:absolute;
  }

  .center{
    height:100%;
    left:50%;
    max-width:100%;
    transform:translate(-50%);
  }

  video{
    left:0;
    right:0;
    margin:0 auto;
  }
  .right{
    right:0;
  }

  .right img{
    right:0;
  }

  .visu{
    max-height: 100%; max-width:100%;
  }
}

@media (max-height: 650px) and (max-width:767px){
  .visuel{
    height:calc(100vh - 35vw);
    width:calc(100% - 12vw);
    position:absolute;
    text-align: center;
    top:16vw;
  }

  .wrapper{
    height:100%;
    width:100%;
  }

  .visu{
    max-height: 100%;
    max-width: 100%;
  }

}

@media (max-height: 650px) and (max-width:767px) and (orientation:landscape){
  .visuel{
    height:calc(100vh - 22vw);
    width:calc(100% - 8vw);
    position:absolute;
    text-align: center;
    top:10vw;
  }

  .wrapper{
    height:100%;
    width:100%;
  }

  img{
    float:left;
  }

  .right > img{
    float:right;
  }

  .visu{
    max-height: 100%;
    max-width: 100%;
  }

}