/** CSS **/

  * {
      margin: 0;
      padding: 0;
      zoom:1;
      height: 100%;
      background-color: transparent;
      font-family: 'Avenir', Sans-serif;
      font-size: 12px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }

  .whole
  {
      display: flex;
      position: relative;
      background-color: #F5F5F5;
      min-height: 100vh;
  }

  img {
      max-width: 100%;
      width: auto;
      height: auto;
      display: block;
      border: 0;
  }

  img[usemap] {
     height: auto;
     max-width: 100%;
     width: auto;
  }

  #main {
      max-width: 380px;
      height: auto;
      width: 100%;
      margin: auto;
  }



/* =============================== Animation =========================== */


    @keyframes main_gwd-keyframes {
      0% {
        opacity: 0;
        animation-timing-function: linear;
      }
      100% {
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    .whole #main {
      animation: main_gwd-keyframes 0.75s linear 0s 1 normal forwards running;
    }

    @keyframes intro_gwd-keyframes {
      0% {
        background-color: rgb(245, 245, 245);
        opacity: 1;
        animation-timing-function: linear;
      }
      10% {
        background-color: rgb(245, 245, 245);
        opacity: 1;
        animation-timing-function: linear;
      }
      16% {
        background-color: rgb(255, 255, 255);
        opacity: 1;
        animation-timing-function: linear;
      }
      30% {
        background-color: rgba(255, 255, 255, 0.894);
        opacity: 1;
        animation-timing-function: linear;
      }
      35% {
        background-color: transparent;
        opacity: 1;
        animation-timing-function: linear;
      }
      40% {
        background-color: rgb(51, 51, 51);
        opacity: 1;
        animation-timing-function: linear;
      }
      70% {
        background-color: rgb(51, 51, 51);
        opacity: 1;
        animation-timing-function: linear;
      }
      100% {
        background-color: transparent;
        opacity: 1;
        animation-timing-function: linear;
      }
    }
    .whole .intro {
      animation: intro_gwd-keyframes 5s linear 0s 1 normal forwards running;
    }



/* =============================== Watch & Mobile =========================== */

    #main {
        max-width: 300px;
    }

    img.smartphone {
        display: block;
    }

    img.computer, img.pad {
        display: none;
    }

/* =============================== Mobile =================================== */

@media (min-width: 400px) {

    #main {
        max-width: 380px;
    }

    img.smartphone {
        display: block;
    }

    img.computer, img.pad {
        display: none;
    }

}

/* =============================== Phablet ================================== */

@media (min-width: 550px) {

    #main {
        max-width: 530px;
    }

    img.pad {
        display: block;
    }

    img.computer, img.smartphone {
        display: none;
    }

}

/* =============================== Tablette ================================= */
/*
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait)  applied to lg also  {

    #main {
        max-width: 720px;
    }

    img.pad {
        display: block;
    }

    img.computer, img.smartphone {
        display: none;
    }

}

*/
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ {

    #main {
        max-width: 720px;
    }

    img.pad {
        display: block;
    }

    img.computer, img.smartphone {
        display: none;
    }

}

/*

@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG  {

    #main {
        max-width: 720px;
    }

    img.pad {
        display: block;
    }

    img.computer, img.smartphone {
        display: none;
    }

}


@media (min-width: 750px) {

    #main {
        max-width: 720px;
    }

    img.pad {
        display: block;
    }

    img.computer, img.smartphone {
        display: none;
    }

}

*/

/* =============================== Desktop ================================== */

@media (min-width: 1000px) {

    #main {
        max-width: 980px;
    }

    img.computer {
        display: block;
    }

    img.pad, img.smartphone {
        display: none;
    }

}


/* =============================== Desktop HD =============================== */

@media (min-width: 1200px) {

    #main {
        max-width: 980px;
    }

    img.computer {
        display: block;
    }

    img.pad, img.smartphone {
        display: none;
    }

}



/* =============================== Desktop 4K =============================== */
/*
@media (max-width: 1200px) {

    #main {
        max-width: 1280px;
    }

    img.computer {
        display: block;
    }

    img.pad, img.smartphone {
        display: none;
    }

}
*/