/* -------- BACKGROUND HERO ----- */

.hero#none {
  background: transparent !important;
}

.hero#me {
  background-image: url(../img/herome.jpg);
}

.hero#aphrodite {
  background-image: url(../img/heroaphrodite.jpg);
}

.hero#beyondlegacy {
  background-image: url(../img/herobeyondlegacy.jpg);
}

.hero#mirror {
  background-image: url(../img/heromirror.jpg);
}

.hero#aixtinction {
  background-image: url(../img/heroaixtinction.jpg);
}

.hero#dmhd {
  background-image: url(../img/herodmhd.jpg);
}

.hero#lotus {
  background-image: url(../img/herolotus.jpg);
}

.hero#mwtb {
  background-image: url(../img/heromwtb.jpg);
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    .hero#none {
      background: transparent !important;
    }

    .hero#me {
      background-image: url(../img/herome_m.jpg);
    }

    .hero#aphrodite {
      background-image: url(../img/heroaphrodite_m.jpg);
    }

    .hero#beyondlegacy {
      background-image: url(../img/herobeyondlegacy_m.jpg);
    }

    .hero#mirror {
      background-image: url(../img/heromirror_m.jpg);
    }

    .hero#aixtinction {
      background-image: url(../img/heroaixtinction_m.jpg);
    }

    .hero#dmhd {
      background-image: url(../img/herodmhd_m.jpg);
    }

    .hero#mwtb {
      background-image: url(../img/heromwtb_m.jpg);
    }
}

/* -------- LOGO HERO ----- */

#me .hero-logo{
  background-image: url(../img/logo.png);
  height: 35px;
}

#aphrodite .hero-logo{
  background-image: url(../img/aphrodite.png);
}

#beyondlegacy .hero-logo{
  background-image: url(../img/beyondlegacy.png);
}

#mirror .hero-logo{
  background-image: url(../img/mirror.png);
}

#aixtinction .hero-logo{
  background-image: url(../img/aixtinction.png);
}

#dmhd .hero-logo{
  background-image: url(../img/dmhd2.png);
}

#lotus .hero-logo{
  background-image: url(../img/lotus.png);
}

#mwtb .hero-logo{
  background-image: url(../img/mwtb.png);
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

  #beyondlegacy .hero-logo, #dmhd .hero-logo{
    height: 85px;
  }

}

/* -------- DOT COLORS ----- */

#aphrodite .dot {
  color: #e5c1a4;
}

#beyondlegacy .dot {
  color: #feac42;
}

#mirror .dot {
  color: #74a9bf;
}

#aixtinction .dot {
  color: #24a000;
}

#dmhd .dot {
  color: #c9e957;
}

#lotus .dot {
  color: #d60000;
}

#mwtb .dot {
  color: #ff7f5a;
}


/* ---------------------------- */
/* -------- HERO SETTINGS ----- */
/* ---------------------------- */

.hero {
  z-index: 1;
  position: relative;
  top: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 56.25vw;
  display: table;
}

.hero#none {
  position: absolute !important;
}

.fade {
  position: absolute !important;
  display: table;
}

.gradient {
  display: inline-block;
  position: relative;
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1)),
              linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1));
  height: 100.5%;
  width: 100%;
}

.works1 .gradient, .works12 .gradient, .works2 .gradient{
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1));
}

.infos {
  display: inline-block;
  width: 35%;
  margin-left: 4vw;
  margin-top: calc(56.25vw / 2); /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-70%);
}

.works1 .infos { /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-70%);
}

.works12 .infos { /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-60%);
}

.works2 .infos { /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%);
}

.hero-logo{
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  width: 75%;
  height: 150px;
}

.works1 .hero-logo, .works12 .hero-logo, .works2 .hero-logo{
  width: 100%;
  height: 200px;
}

.description-project {
  width: 100%;
  font-size: 1.3vw;
  margin: 2vw 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,.45);
}

.works1 .description-project, .works12 .description-project, .works2 .description-project {
  font-size: 1vw;
}

.tags {
  display: none;
  width: 100%;
  font-size: 0.7vw;
  margin: 2vw 0px;
  letter-spacing: 1px;
}

.works1 .tags, .works12 .tags, .works2 .tags {
  display: block;
}

.tag {
  opacity: 0.75;
}

.dot {
  margin: 0px 2px;
}

.button#hero {
  background: rgba(255, 255, 255, 1);
  color: black;
}

.mobile {
  display: none;
}

.button#hero:hover {
  background: rgba(255, 255, 255, 0.75);
  color: black;
}

#button-icon {
  margin-left: 5px;
  font-size: 1vw;
}

#button-play {
  margin-right: 5px;
  font-size: 14px;
  font-family: "FontAwesome Solid";
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    .parallax {
      z-index: 0 !important;
    }
    .hero {
      z-index: 1;
      position: relative;
      top: 0;
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 52vh;
      text-align: center;
      display: table;
    }

    #beyondlegacy .hero, #mwtb .hero {
      height: 65vh;
    }

    .hero#none {
      position: absolute !important;
    }

    .fade {
      position: absolute !important;
      display: table;
    }

    .hero div {
      display: table-cell;
      vertical-align: bottom;
    }

    .hero div div {
      display: table-cell;
    }

    .hero div div div {
      display: inline-block;
    }

    .gradient {
      position: relative;
      background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
      height: 100%;
      width: 100%;
    }

    .works1 .gradient, .works12 .gradient, .works2 .gradient{
      background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
    }

    .infos, .works1 .infos, .works12 .infos, .works2 .infos {
      display: inline-block;
      width: 100%;
      text-align: center;
      margin-left: auto;
      margin-top: none !important; /* poussé de la moitié de hauteur de viewport */
      transform: none !important;
    }

    .hero-logo, .works1 .hero-logo, .works12 .hero-logo, .works2 .hero-logo{
      background-repeat: no-repeat;
      background-size: contain;
      background-position: bottom center;
      width: 57%;
      height: 65px;
    }

    .tags {
      width: 100%;
      font-size: 12px;
      margin: 17px 0px;
      letter-spacing: 1px;
    }

    .tag {
      opacity: 0.75;
    }

    .dot {
      margin: 0px 2px;
    }

    .button#hero {
      background: rgba(255, 255, 255, 1);
      color: black;
    }

    .mobile {
      display: inline-block;
    }

    #button-icon {
      margin-left: 5px;
      font-size: 14px;
    }

    #button-play {
      margin-right: 5px;
      font-size: 14px;
      font-family: "FontAwesome Solid";
    }

}