@import url('https://fonts.googleapis.com/css?family=Cinzel|Cormorant+SC:600|Old+Standard+TT');

body{
  font:20px/1.1em arial, sans-serif;
  background: grey;
}

h1{
  font-family: 'Cinzel', serif;
  font-size: 5.5vw;
  margin-top:4%;}


h2{
    margin-left: 10%;
    font-family: 'Cormorant SC', serif;
    font-size: 3.5vw;
  }

h2:hover{
  color:#f9d274;
}

p{
  font-family: 'Old Standard TT', serif;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 3%;
  margin-bottom: 2%;
  font-size: 2.2vw;
  line-height: normal;
}

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

img{
  width:100%;
  height:100%;
  filter: grayscale(0.9);
}

img:hover{
  filter: none;
}

div.header{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0%;
  left:0%;
}

div.header img{
  filter: none;
  width: 100%;
  height: 100%;
}

div.titre{
  position: fixed;
  width: 100%;
  height: 90%;
  text-align: center;
  top:40%;
  left:0%;
  color: #f9d274;
}

div.titrephone{
  position: fixed;
  width: 100%;
  top:40%;
  left: 0%;
  text-align: center;
  color: #f9d274;
  display: none;
}

div.titrephone h1{
  font-size: 2.4em;
}

div.arrow {
  position: absolute;
  top:95%;
  width: 10%;
  height: 7%;
  left:45%;
  background: white;
  text-align: center;
  border-radius: 8px;
  font-size: 2vw;
}

div.brother {
  position: absolute;
  width: 100%;
  height: 70%;
  top: 100%;
  left:0%;
  background-color: white;
  text-align: center;
}

div.brothertitle{
  position: absolute;
  top:108%;
  width:100%;
  text-align: center;
}

div.brothertitle:hover{
    color:#f9d274;
  }

div.belle {
  position: absolute;
  width:30%;
  height:45%;
  top:160%;
  left:0%;
}

div.bellephone{
  position: absolute;
  top:128%;
  left:0%;
  display: none;
}

div.bellephone h2{
  font-size: 1.3em}

div.belletxt {
  position: absolute;
  width:70%;
  height:45%;
  background-color: white;
  top:160%;
  left:30%;
}

div.chaperon {
  position: absolute;
  width:30%;
  height:45%;
  top:205%;
  left:70%;
}

div.chaperonphone{
  position: absolute;
  top:173%;
  left:0%;
  display: none;
}

div.chaperonphone h2{
  font-size: 1.3em}

div.chaperontxt {
  position: absolute;
  width:70%;
  height:45%;
  background-color: white;
  top:205%;
  left:0%;
}

div.handg {
  position: absolute;
  width:30%;
  height:45%;
  top:250%;
  left:0%;
}

div.handgphone{
  position: absolute;
  top:216%;
  left:0%;
  display: none;
}

div.handgphone h2{
  font-size: 1.3em}

div.handgtxt {
  position: absolute;
  width:70%;
  height:45%;
  background-color: white;
  top:250%;
  left:30%;
}

div.blanche {
  position: absolute;
  width:30%;
  height:45%;
  background-color: blue;
  top:295%;
  left:70%;
}

div.blanchephone{
  position: absolute;
  top:260%;
  left:0%;
  display: none;
}

div.blanchephone h2{
  font-size: 1.3em}

div.blanchetxt {
  position: absolute;
  width:70%;
  height:45%;
  background-color: white;
  top:295%;
  left:0%;
}

div.space{
  position: absolute;
  width:100%;
  height:2%;
  background-color: white;
  top:340%;
  left:0%;
}

div.socialmedia{
  position: absolute;
  width:100%;
  height:27%;
  background-color: lightgray;
  top:342%;
  left:0%;
}

div.contact{
  position: absolute;
  top: 341%;
  left:1%;
}
div.contact h3{
  color:#585858;
  font-size: 1.8vw;
  font-family: arial;
  margin-bottom: 10px;
  margin-left: 3%;
}

div.contact p{
  color:#585858;
  font-family: arial;
  font-size: 1.2vw;
  margin-top: 2px;
  margin-left: 3%;
}

div.gutenberg{
  position: absolute;
  width:5.5%;
  height:10%;
  top:347%;
  right:5%;
}

div.fb{
  position: absolute;
  width:5.5%;
  height:10%;
  top:347%;
  left:40%;
}

div.twitter{
  position: absolute;
  width:5.5%;
  height:10%;
  top:347%;
  left:47.5%;
}

div.insta{
  position: absolute;
  width:5.5%;
  height:10%;
  top:347%;
  left:55%;
}

footer img{
  filter: none;
}
footer img:hover{
  filter: grayscale(0.4);
}

footer figcaption{
  color:#585858;
  font-size: 1.2vw;
}

footer h2{
  color:#585858;
  font-family: arial;
  font-size: 2.3vw;
}

footer h2:hover{
  color:#585858;
}

div.follow {
  position: absolute;
  top:357%;
  left:39.5%;
}

div.copyright {
  position: absolute;
  width:16%;
  background-color: white;
  border-radius: 2px;
  top:362%;
  left:0%;
  font-size: 1vw;
  font-family: comic ;
}

@media screen and (max-width:375px) {

  div.titre{
    display: none;
}
  div.titrephone{
    display: block;
  }
    div.brothertitle {
    height: 30%;
    top:105%;
    color: black;}

    div.brother {
    height: 30%;
    top:100%;}


    div.belle {
      width: 100%;
      top: 130%;}

    div.bellephone{
      display: block;}

    div.belletxt {
      display: none;}


    div.chaperon {
      width: 100%;
      left:0%;
      top: 174%;
    }
    div.chaperonphone{
      display: block;}

    div.chaperontxt {
      display: none;}

    div.handg {
      width: 100%;
      top:218%;
      ;}

      div.handgphone{
        display: block;}

    div.handgtxt {
      display: none;}

    div.blanchephone{
      display: block;
      }

    div.blanche {
      width: 100%;
      left:0%;
      top:262%}

    div.blanchetxt {
      display: none;}

    div.space{
    display: none;
    }

    div.socialmedia{
      top:306%;
    }

    img {
      filter: none;
    }

    div.fb{
      width:15%;
      height:9%;
      top:319%;
      left:27%;
    }

    div.twitter{
      width:15%;
      height:9%;
      top:319%;
      left:42.5%;
    }

    div.insta{
      width:15%;
      height:9%;
      top:319%;
      left:58%;
    }

    div.gutenberg{
      width:10%;
      height:6%;
      top:307%;
      right:5%;
    }

    footer figcaption{
      font-size: 2.2vw;
    }

    div.follow {
      display: none;
    }

    div.copyright {
      width:100%;
      top:330%;
      text-align: center;
      font-size: 3vw;
    }

    div.contact{
     top: 304%;
     left:1%;
   }

    div.contact h3{
      font-size: 1em;
    }

    div.contact p{
      font-size: 0.4em;
    }

    h2:hover{
      display: none;
    }

    a{
      color: white;
    }

    div.brothertitle:hover{
      display: none;
    }
   }