@charset "utf-8";

@media screen and (max-width: 1320px) {
  .page-right-menu {
    right: 20px;
  }

  .header-inner-link {
    font-size: 1.6rem;
  }

  .section-menu-link {
    font-size: 1.2rem;
  }

  .main-title {
    font-size: 5rem;
  }
}
@media screen and (max-width: 1360px) {
     // 07
     .graphic-design-outputs {
      .inner-wrapper {
        margin: 0;  
      }
      .grid-size-3 {
        gap: 30px;
      }
    }
    .graphic-top-items-cover {
      width: 100%;
      height: 100%;
      min-width: auto;
    }
}

@media screen and (max-width: 1250px) {
  .page-right-menu {
    right: 20px;
  }

  .header-inner-link {
    font-size: 1.6rem;
  }

  .section-menu-link {
    font-size: 1.2rem;
  }

  .main-title {
    font-size: 5rem;
  }

  .setlist-wrapper {
    margin: 0 100px;
  }

  // 02
  .introduction {
    .introduction-wrapper .introduction-left .this-is-box-wrapper {
      padding: 0;
      margin-right: 30px;
    }
    .introduction-wrapper .introduction-left .this-is-box-wrapper .this-is-box {
      width: 380px;
      height: 380px;
    }
    .introduction-wrapper .introduction-left .this-is-box-wrapper.this-is-title {
      top: 35px;
    }
    .introduction-wrapper .introduction-right .profile-data {
      padding: 0;
      width: auto;
    }
  }
  // 04
  .web-design-essential {
    .inner-wrapper {
      margin: 0;
    }
    .grid-size-2 {
      gap: auto;
    }
  }
  .web-design-essentials {
    width: 350px;
    height: 350px;
    .essentials-above {
      .essentials-title {
        font-size: 80px;
      }
    }
    .essentials-below {
      .essentials-img {
        width: 350px;
      }
    }
  }
  // 05
  .logic {
    .inner-wrapper {
      margin: 0;  
    }
    .grid-size-2 {
      gap: 20px;
    }
  }
   // 07
   .graphic-design-outputs {
    .inner-wrapper {
      margin: 0;  
    }
    .grid-size-3 {
      gap: 30px;
    }
  }
    // 08
    .other-outputs {
      .inner-wrapper {
        margin: 0;  
      }
      .grid-size-2 {
        gap: 0;
      }
      .presenting-wrapper {
        margin-bottom: 20px;
      }
    }

}
@media screen and (max-width: 1240px) {
 // 02
 .introduction {
   .introduction-wrapper  {
      display: block;
      .introduction-left {
        margin-bottom: 30px;
      }
   }
 }
//  04
 .web-design-essentials {
  width: 300px;
  height: 300px;
  .essentials-above {
    height: 120px;
    .essentials-title {
      font-size: 70px;
    }
  }
  .essentials-below {
    .essentials-img {
      width: 300px;
    }
  }
}
}
@media screen and (max-width: 1030px) {
  body {
    font-size: 1.4rem;
  }

  .wrapper {
    .page-right-menu {
      display: none !important;
      position: static;
    }
  }

  .header-the-story {
    .fv-wrapper {
      .first-view-top {
        .fv-img-container {
          .black-out {
            max-width: 190px;
          }

          .fv-img10 {
            position: absolute;
            top: 30px;
            left: 40px;
          }

          .fv-img11 {
            position: absolute;
            top: 30px;
            right: 200px;
          }
        }
      }
    }
  }

  .wrapper {
    padding: 0 70px;
  }

  .top-article {
    padding: 200px 0;
    color: #f9f9f9;
  }

  .setlist {
    .section-title-p1 {
      font-size: 4rem;
      padding: 10px;
    }

    .setlist-wrapper {
      margin: 0 50px;

      a {
        font-size: 2.4rem;
      }
    }
  }

  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .loader {
    max-width: 870px;

    .loader-above {
      // width: 100%;
      margin: 0 auto;
      max-width: 870px;

      img {
        max-width: 200px;
        display: block;
      }

      span {
        width: 250px;
      }
    }

    .section-title-wrapper {
      margin: 0 30px 0px;
    }

    .load-of-the-sites {
      bottom: 20px;
    }
  }

  .section-title-wrapper {
    .title-right {
      .title-right-above {
        .section-title-caption {
          font-size: 0.8rem;
          padding: 3px;
        }
      }

      .main-title {
        .feat-title {
          font-size: 1.4rem;
        }
      }
    }
  }

  // 02
  .introduction {
    .section-title-wrapper {
      .title-right {
        .main-title {
          font-size: 4rem;
        }
      }
    }

    .introduction-wrapper {
      .introduction-left {
        .this-is-box-wrapper {
          margin: 0;

          .this-is-box {
            width: 250px;
            height: 250px;
          }

          .this-is-title {
            font-size: 10px;
            padding-top: 0px;
            top: 20px;
            min-width: 300px;

            span {
              font-size: 2.6rem;
              width: 100%;
            }
          }

          .this-is-name {
            font-size: 2.2rem;
            bottom: 18px;
          }

          .this-is-below {
            width: 250px;
            height: 150px;
            margin-top: 20px;
          }
        }

      }
    }

    .introduction-right {
      .profile-data {
        width: auto;
        margin: 0 auto;
        padding: 0 0;
        font-size: 1.4rem;
      }
    }

    .contact-icons-box {
      .contact-icons {
        display: flex;
        align-items: center;

        .contact-icon {
          width: 130px;
        }

        .contact-icon-fb {
          width: 100px;
        }
      }
    }
  }

  // 03
  .three-elements {
    .inner-wrapper {
      margin: 0;

      .main-skills-wrapper {
        .main-skills-items {
          width: 30%;
          margin-top: 0px;

          .main-skills-dd {
            .main-skils-img {
              width: 80px;
              height: auto;
            }
          }
        }
      }
    }
  }

  // 04
  .web-design-essential {
    .section-title-wrapper {
      .title-right {
        .main-title {
          font-size: 3.7rem;
        }
      }
    }

    .inner-wrapper {
      margin: 0;

      .grid-size-2 {
        gap: 30px;
      }

      .web-design-essentials {
        width: 315px;
        height: 315px;

        .essentials-above {
          width: 315px;
          height: 125px;

          .essentials-title {
            font-size: 7.4rem;
          }
        }

        .essentials-below {
          width: 315px;
          height: 190px;

          .essentials-img {
            width: 315px;
          }
        }
      }
    }
  }

  // 05
  #logic {
    .inner-wrapper {
      margin: 0;

      .grid-size-2 {
        gap: 30px;

        .logic-wrapper {
          width: 300px;

          .logic-img {
            width: 300px;
          }

          .logic-buttom {
            .logic-buttom-img {
              width: 40px;
              height: 40px;
              bottom: 120px;
              right: 20px;
            }
          }

          .logic-bottom {
            height: 80px;

            .logic-bottom-title {
              font-size: 16px;
            }

            .logic-bottom-cap {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  // 06
  #u_and_i {
    .inner-wrapper {
      margin: 0;

      .grid {
        display: block;
      }
    }
    .uiux-card {
      display: inline-block;
    }
  }

  // 08
  #other-outputs {
    .section-title-wrapper {
      .title-right {
        .main-title {
          font-size: 4rem;
        }
      }
    }

    .inner-wrapper {
      margin: 0;

      .grid-size-2 {
        .presenting-wrapper {
          width: 315px;
          height: 315px;

          .presenting-above {
            width: 315px;

            .presenting-icon {
              width: 16px;
              height: 16px;
            }

            .presenting-img {
              width: 90%;
              height: auto;
              margin-top: 35px;
            }
          }

          .presenting-below {
            margin-top: 22px;

            .presenting-title {
              font-size: 1.6rem;
            }

            .presenting-text {
              font-size: 1.6rem;
            }

            .presenting-arrow {
              bottom: 6px;
            }
          }
        }
      }
    }
  }

  //10
  .weapons {
    .inner-wrapper {
      margin: 0;

      .grid-size-2 {
        gap: 20px;

        .weapons-items {
          .flex-box {
            align-items: center;
            width: 90%;

            .weapon-title {
              font-size: 3rem;
            }
          }

          .weapons-text {
            bottom: 30px;
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  // webdesign.html & graphicdesign.html
  .inner-wrapper {
    margin: 0;
  }

  .category-wrapper {
    &:last-of-type {
      margin-bottom: 200px;
    }

    .flex-box {
      .category-type {
        font-size: 1.6rem;
      }
    }
  }

  .inner-header {
    .inner-first-view {
      .page-title {
        font-size: 10rem;
      }
    }
  }

  .single-wrapper {
    padding: 0 50px;

    section {
      .inner-wrapper {
        margin: 0;
      }
    }
  }

  .graphic {
    .flex-box {
      margin-top: 50px;

      .graphic-detail-left {
        .graphic-img {
          width: 220px;
        }
      }
    }
  }

  .study-banner-img {
    width: 200px;
  }
}

@media screen and (max-width: 480px) {
  .loader {
    .loader-above {
      display: flex;

      img {
        width: 100px;
        height: auto;
      }

      span {
        width: 70px;
      }
    }

    .section-title-wrapper {
      .section-title-left {
        margin: 0 10px 0 0;
      }

      .title-right {
        .title-right-above {
          .section-title-caption {
            font-size: 0.8rem;
            padding: 3px;
          }
        }

        .prologue {
          font-size: 4rem;
        }
      }
    }

    .listen {
      font-size: 8rem;
    }

    svg {
      width: 300px;
      height: 300px;
    }

    .load-of-the-sites {
      left: 20px;

      .load-of-the-name {
        font-size: 3.5rem;

        &::before {
          top: -15px;
        }
      }

      .made-of {
        font-size: 1.2rem;
        margin-bottom: 5px;
      }

      .load-of-dl {
        display: flex;
        line-height: 1.8rem;
        font-size: 1rem;
      }
    }
  }

  .nav-content {
    .header-top-list {
      .header-items {
        .header-link {
          font-size: 5rem;
        }
      }
    }
  }

  .flex-box {
    display: block;
  }

  .grid {
    display: block;
  }

  .header-the-story {
    .fv-wrapper {
      margin-bottom: 250px;

      .first-view-top {
        h1 {
          .first-view-button-subtitle {
            width: 210px;
          }
        }

        .fv-img-container {
          .black-out {
            max-width: 110px;
          }

          .fv-img2 {
            left: -20px;
          }

          .fv-img4 {
            left: 130px;
          }

          .fv-img6 {
            left: 170px;
          }

          .fv-img7 {
            left: -20px;
          }

          .fv-img12 {
            right: 0;
          }
        }
      }
    }
  }

  section {
    margin: 150px 0;
  }

  .wrapper {
    padding: 0 20px;
  }

  .section-title-wrapper {
    display: flex;
    margin-bottom: 50px;

    .section-title-left {
      font-size: 5rem;
      margin: 0 10px 0 0;
    }

    .title-right {
      margin: 0;

      .title-right-above {
        display: flex;

        .you-are-listening-to {
          letter-spacing: 3px;
        }
      }

      .main-title {
        font-size: 3rem;
      }

      .title-below-wrapper {
        display: flex;
        align-items: center;
        padding: 0;

        .icon-wrapper {
          display: flex;

          img {
            width: 15px;
          }
        }

        .from-the-story {
          font-size: 1rem;
        }
      }
    }
  }

  .top-article {
    padding: 0px 0;
    color: #f9f9f9;
  }

  .setlist {
    .section-title-p1 {
      font-size: 3rem;
      margin-bottom: 30px;
    }

    .setlist-wrapper {
      margin: 0px;

      li {
        a {
          font-size: 1.8rem;
        }

        .setlist-span {
          width: auto;
          margin-right: 20px;
        }

        .setlist-feat {
          font-size: 1.2rem;
        }
      }
    }
  }

  // 02
  .introduction {
    .section-title-wrapper {
      .title-right {
        .main-title {
          font-size: 2.4rem;
        }
      }
    }

    .contact-icons-box {
      .contact-icons {
        display: block;

        li {
          margin: 30px 0;
        }
      }
    }
  }

  // 03
  .three-elements {
    .inner-wrapper {
      .main-skills-wrapper {
        display: block;

        .main-skills-items {
          width: 100%;
          margin-bottom: 50px;
        }
      }
    }
  }

  // 04
  #web-design-essentials {
    .section-title-wrapper {
      .title-right {
        .main-title {
          font-size: 2rem;
        }
      }
    }

    a {
      .web-design-essentials {
        margin-bottom: 50px;
        width: 100%;

        .essentials-below {
          width: 100%;
        }

        .essentials-above-icon-wrapper {
          display: flex;
        }
      }
    }
  }

  // 05
  #logic {
    .section-title-wrapper {
      .title-right {
        .main-title {
          font-size: 2.4rem;

          span {
            font-size: 1.2rem;
          }
        }
      }
    }

    .inner-wrapper {
      .grid-size-2 {
        .logic-wrapper {
          border: 0;
          width: 100%;
          margin-bottom: 70px;

          .logic-img {
            width: 100%;
          }

          .logic-bottom {
            width: 100%;
          }
        }
      }
    }
  }

  // 06
  .ui-design-outputs {
    margin: 0 auto;
    .inner-wrapper {
      .grid {
        margin: 0 auto;
        text-align: center;
        .ui-figure {
          text-align: left;
          a {
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .uiux-card {
      display: inline-block;
      .uiux-above {
        display: flex;
      }
      .uiux-below {
        text-align: right;
      }
    }
  }

  // 07
  #graphic-design-outputs {
    .inner-wrapper {
      margin: 0;

      .grid-size-3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        object-fit: fill;
        gap: 10px;
      }
    }

    .graphic-top-items-cover {
      width: 100%;
      height: 100%;
      min-width: auto;
    }

    .medley-title {
      font-size: 1.6rem;

      &:nth-of-type(3) {
        font-size: 1.4rem;
      }

      span {
        margin-right: 20px;
      }
    }
  }

  // 08
  #other-outputs {
    .section-title-wrapper {
      .title-right {
        .main-title {
          font-size: 2.4rem;

          span {
            font-size: 1.2rem;
          }
        }
      }
    }

    .inner-wrapper {
      .grid-size-2 {
        margin: 0 auto;

        .presenting-wrapper {
          width: 315px;
          height: 315px;
          margin-bottom: 50px;
          background-image: url(../img/presenting-background.jpg);

          .presenting-above {
            width: auto;
          }

          .presenting-below {
            margin: 10px 18px 30px;
          }
        }
      }
    }
  }

  // 09 {
  #story-tv {
    .coming-soon {
      font-size: 6.5rem;
    }
  }

  // 10
  .weapons {
    .inner-wrapper {
      .grid-size-2 {
        .weapons-items {
          height: 250px;
          margin-bottom: 50px;

          .flex-box {
            display: flex;
            margin: 40px auto 20px;

            .weapon-title {
              font-size: 2rem;

              &::before {
                min-width: 50px;
              }
            }

            .skills-icon {
              width: 40px;
            }
          }

          .weapons-text {
            bottom: 20px;
          }
        }
      }
    }
  }

  // 11
  #no-final-destination {
    .coming-soon {
      font-size: 6.5rem;
    }
  }

  footer {
    .footer-middle {
      display: none;
    }

    .footer-right {
      margin-top: 70px;
    }
  }

  // webdesign.html & graphicdesign.html
  .category-wrapper {
    .flex-box {
      display: flex;
      flex-wrap: wrap;

      .category-type {
        width: 120px;
        margin: 10px 0;
      }
    }
  }

  .inner-header {
    .inner-first-view {
      .page-title {
        font-size: 10rem;
      }
    }
  }

  .single-wrapper {
    section {
      .section-inner-title {
        width: 100%;
      }

      .inner-wrapper {
        margin: 0;
      }
    }
  }

  .site {
    .inner-wrapper {
      .site-flex {
        .site-detail-left {
          width: 100%;
          margin: 0 auto;
        }

        .site-detail-right {
          width: 100%;
          margin: 40px auto 100px;

          dl {
            dd {
              &:nth-of-type(2) {
                margin-top: 0px;
              }
            }
          }
        }
      }
    }
  }

  .graphic {
    .section-inner-title {
      font-size: 1.6rem;

      &:first-child {
        margin-top: 50px;
      }
    }

    .flex-box {
      .graphic-detail-left {
        width: 100%;
        margin: 0 auto;

        .graphic-img {
          width: 90%;
          text-align: center;
          display: block;
          margin: 0 auto;
        }
      }

      .graphic-detail-right {
        width: 100%;
        margin: 40px auto 100px;

        dl {
          dd {
            &:nth-of-type(2) {
              margin-top: 0px;
            }
          }
        }
      }
    }
  }

  .study-banner-img {
    width: 200px;
  }

  .to-the-top {
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;

    .to-the-top-link {
      font-size: 1rem;
    }
  }
}