@charset "utf-8";
/* dlight */
.dm {}

/* SMARTPHONE
================================================== */
@media screen and (max-width: 768px) {
  
  #page-header.ph--kv {
    background-image: url(../img/dress/dress_kv.jpg);
  }
  
  #dress {
    position: relative;
    margin: auto;
    max-width: 1920px;
  }
  
  .de-sub-txt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    & img {
      width: 80%;
    }
  }
  .de-sub-txt.end {
    position: absolute;
    top: initial;
    bottom: 0;
  }
  
  .de-main {
    & .de-name {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      inset: 0;
      font-family: BaskervilleMTPro-Semibold;
      color: #FFF;
      z-index: 1;
    }
  }
  
  .de-atelier {
    margin: 0 0 20%;
    & .de-atelier-hd {
      display: flex;
      flex-flow: column;
      justify-content: center;
      margin: 0 auto 20%;
      padding-top: 70%;
      background-image: url(../img/dress/d_atelier_hd_bg_sp.jpg);
      background-size: 100%;
      background-position: center top;
      background-repeat: no-repeat;
      z-index: 1;
      & .de-main {
        margin: 0 12%;
        & .de-name {
          font-family: BaskervilleMTPro-Regular;
          font-size: clamp(2.4rem, 7.1616vw, 5.5rem);
        }
      }
    }
    
    & .de-sub {
      position: relative;
      margin: 0 0 0 35%;
    }
  }
  
  .de-rivini {
    margin: 0 0 30%;
    & .de-main {
      & .de-name {
        bottom: -46%;
        font-size: clamp(3.2rem, 8.8542vw, 6.8rem);
      }
    }
  }
  
  .de-peter {
    margin: 0 0 30%;
    & .de-main {
      margin: 0 15% 10% 0;
      & .de-name {
        bottom: -6%;
        font-size: clamp(2.2rem, 7.1615vw, 5.5rem);
      }
    }
    & .de-sub {
      margin: 0 0 0 35%;
      & .de-sub1 {
        margin-bottom: 8%;
      }
    }
  }
  
  .de-besa {
    margin: 0 0 15%;
    & .de-main {
      margin: 0 0 6%;
      & .de-name {
        font-size: clamp(3.8rem, 11.4583vw, 8.8rem);
      }
    }
    & .de-sub {
      width: 66%;
    }
  }
  
  .de-yolancris {
    margin: 0 0 20%;
    & .de-main {
      & .de-name {
        font-size: clamp(2.2rem, 7.1615vw, 5.5rem);
      }
    }
  }
  
  .de-cortana {
    margin: 0 0 20%;
    & .de-main {
      margin: 0 0 6% 15%;
      & .de-name {
        bottom: -8%;
        font-size: clamp(2.2rem, 9.2448vw, 7.1rem);
      }
    }
  }
  
  .de-gemy {
    margin: 0 10% 20% 10%;
    & .de-main {
      & .de-name {
        bottom: -10%;
        font-size: clamp(2.2rem, 7.1615vw, 5.5rem);
      }
    }
  }
  
  .de-caroline {
    & .de-name {
      font-size: clamp(2.2rem, 7.1615vw, 5.5rem);
    }
  }
  
}

/* DESKTOP
================================================== */
@media screen and (min-width: 769px), print {
  
  #page-header.ph--kv {
    background-image: url(../img/dress/dress_kv.jpg);
  }
  
  #dress {
    position: relative;
    margin: auto;
    max-width: 1920px;
  }
  
  .de-sub-txt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    & img {
      width: 33%;
    }
  }
  .de-sub-txt.end {
    position: absolute;
    top: initial;
    bottom: 0;
  }
  
  .de-main {
    & .de-name {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      inset: 0;
      font-family: BaskervilleMTPro-Semibold;
      color: #FFF;
      z-index: 1;
    }
  }
  
  
  .de-atelier {
    
    & .de-atelier-hd {
      display: flex;
      flex-flow: column;
      justify-content: center;
      aspect-ratio: 1	/	0.547;
      width: 100%;
      height: auto;
      margin: 0 auto 15%;
      background-image: url(../img/dress/d_atelier_hd_bg.jpg);
      background-size: cover;
      z-index: 1;
      & .de-main {
        margin: 0 56% 0 19.3%;
        & .de-name {
          font-family: BaskervilleMTPro-Regular;
        }
        @media (width <= 1300px) {
          & .de-name {
            font-size: 3rem;
          }
        }
        @media (1300px < width) {
          & .de-name {
            font-size: clamp(3rem, 2.308vw, 5.5rem);
          }
        }
      }
    }
    
    & .de-sub {
      position: relative;
      margin: 0 7.6% 0 59.4%;
    }
  }
  
  .de-rivini {
    margin: -16% 50% 15% 9%;
    & .de-main {
      & .de-name {
        bottom: -46%;
      }
      @media (width <= 1300px) {
        & .de-name {
          font-size: 4.8rem;
        }
      }
      @media (1300px < width) {
        & .de-name {
          font-size: clamp(4.8rem, 3.692vw, 6.8rem);
        }
      }
    }
  }
  
  .de-peter {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 10.9% 5% 13.2%;
    & .de-main {
      width: 43.6%;
      & .de-name {
        bottom: -6%;
      }
      @media (width <= 1300px) {
        & .de-name {
          font-size: 3.4rem;
        }
      }
      @media (1300px < width) {
        & .de-name {
          font-size: clamp(3.4rem, 2.615vw, 5.5rem);
        }
      }
    }
    & .de-sub {
      margin-top: 20%;
      width: 41.2%;
      & .de-sub1 {
        margin-bottom: 8%;
      }
    }
  }
  
  .de-besa {
    display: flex;
    justify-content: space-between;
    margin: 0 10% 15% 0;
    & .de-main {
      width: 44.8%;
      margin-top: 30%;
      order: 2;
      @media (width <= 1300px) {
        & .de-name {
          font-size: 5.8rem;
        }
      }
      @media (1300px < width) {
        & .de-name {
          font-size: clamp(5.8rem, 4.462vw, 8.8rem);
        }
      }
    }
    & .de-sub {
      width: 48%;
      order: 1;
    }
  }
  
  .de-yolancris {
    margin: 0 48% 0 0;
    & .de-main {
      @media (width <= 1300px) {
        & .de-name {
          font-size: 3.4rem;
        }
      }
      @media (1300px < width) {
        & .de-name {
          font-size: clamp(3.4rem, 2.615vw, 5.5rem);
        }
      }
    }
  }
  
  .de-cortana {
    margin: -54% 0 0 50%;
    & .de-main {
      margin: 0 0 6% 15%;
      & .de-name {
        bottom: -8%;
      }
      @media (width <= 1300px) {
        & .de-name {
          font-size: 4.2rem;
        }
      }
      @media (1300px < width) {
        & .de-name {
          font-size: clamp(4.2rem, 3.231vw, 7.1rem);
        }
      }
    }
    & .de-sub {
      margin: 0 38% 0 0;
    }
  }
  
  .de-gemy {
    margin: -30% 58.3% 0 10.4%;
    & .de-main {
      & .de-name {
        bottom: -10%;
      }
      @media (width <= 1300px) {
        & .de-name {
          font-size: 3.4rem;
        }
      }
      @media (1300px < width) {
        & .de-name {
          font-size: clamp(3.4rem, 2.615vw, 5.5rem);
        }
      }
    }
  }
  
  .de-caroline {
    margin: -4% 13% 0 50%;
    @media (width <= 1300px) {
      & .de-name {
        font-size: 3.4rem;
      }
    }
    @media (1300px < width) {
      & .de-name {
        font-size: clamp(3.4rem, 2.615vw, 5.5rem);
      }
    }
  }
  
}