@media all and (display-mode: fullscreen) {
  html {
    /* font-size: 1em; */
  }
}
@media screen and (min-height: 900px) {
  .home-nav-container {
    top: 2vh;
  }
  .rest-info-container {
    top: 2vh;
  }
  .title {
    top: 2vh;
  }

  .col-date {
    right: 44.8vh;
  }
  .state-top-1 {
    top: -0vh !important;
  }
  .state-top-2 {
    top: -2vh !important;
  }
  .state-top-3 {
    top: -4vh !important;
  }
  .state-top-4 {
    top: -6vh !important;
  }
  .state-top-5 {
    top: -8vh !important;
  }
  .state-top-6 {
    top: -10vh !important;
  }
  .state-top-7 {
    top: -12vh !important;
  }
  .state-top-8 {
    top: -14vh !important;
  }
  .state-top-9 {
    top: -16vh !important;
  }
  .state-top-10 {
    top: -18.25vh !important;
  }
}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  body {
    display: none;
  }
}

/* MOBILE */
@media screen and (max-width: 450px) {
  .about-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 15vh;
  }
  .style-project-info {
    overflow: hidden;
  }

  .mob-categ > span {
    max-width: 50%;
    flex: 1 0 50%;
    opacity: 0.3;
  }
  .cv-info-container {
    margin-bottom: 12.5vh;
  }
  .cv-info {
    position: absolute;
    margin: auto;
    width: calc(100% - 3vh);
    margin-top: 2.5vh;
  }
  .mob-categ > span:nth-child(1) {
  }
  .mob-categ > span:nth-child(2) {
    text-align: right;
  }
  .mob-categ > span:nth-child(3) {
  }
  .mob-categ > span:nth-child(4) {
    text-align: right;
  }
  .mob-cv-categ {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .mob-categ {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 3vh);
    margin-top: 4vh;
  }

  .about-desktop {
    display: none;
  }
  .state-top-1 {
    top: -0.1vh !important;
  }
  .state-top-2 {
    top: -3vh !important;
  }
  .state-top-3 {
    top: -5.3vh !important;
  }
  .state-top-4 {
    top: -8vh !important;
  }
  .state-top-5 {
    top: -10.5vh !important;
  }
  .state-top-6 {
    top: -13.1vh !important;
  }
  .state-top-7 {
    top: -15.6vh !important;
  }
  .state-top-8 {
    top: -18.2vh !important;
  }

  .cv-contain {
    flex-direction: column;
    line-height: 3vh;
    /* line-height: normal; */
  }
  .cv-info-1 {
    position: relative;
    margin: auto;
    right: 1.5vh;
    text-align: right;
    margin-top: 2.5vh;
  }

  .legal {
    position: fixed;
    bottom: 5.5vh;
    left: 1.5vh;
    flex-direction: column;
    width: 100%;
    line-height: 2vh;
  }

  .legal > span:nth-child(1) {
    white-space: pre-line;
  }
  .cv-left {
    width: 100%;
  }
  .cv-right {
    width: 100%;
    background-color: transparent;
    position: absolute;
  }
  .cv-line {
    flex-direction: row;
    margin-bottom: 0.5vh;
  }
  .cv-line-title {
    width: 75%;
    display: flex;
    flex-direction: column;
  }
  .mob-about {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: flex-end;
    width: 70%;
  }

  .mob-cv-categ > .cv-info:last-of-type > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .mob-cv-categ > .cv-info:last-of-type > div > .cv-line {
    margin-bottom: 0;
    padding-left: 2px;
    padding-right: 2px;
    /* white-space: pre-wrap; */
  }
  .mob-cv-categ > .cv-info:last-of-type > div > .cv-line > .mob-about {
    display: none;
  }
  .mob-cv-categ > .cv-info:last-of-type > div > .cv-line > .cv-line-title {
    width: 100%;
  }

  .cv-line-date {
    width: 50%;
    padding-right: 0 !important;
  }
  .cv-line-place {
    width: 100%;
    text-align: right;
  }
  video {
    height: auto;
    width: 100%;
  }
  .preview-project img {
    height: 100%;
    width: auto;
  }

  .col-date {
    right: -50vh;
  }
  .size-project {
    right: -50vh;
  }

  .slide-out {
    transform: translateX(-250%) !important;
  }

  ul {
    white-space: nowrap;
  }

  .home-nav-container {
    left: 40%;
    display: block;
  }
  .home-nav-container ul:nth-child(1) {
    padding-left: 0vh;
  }
  .rest-info-container {
    /* display: ; */
    justify-content: flex-end;
  }
  .rest-info-container ul:nth-child(2) {
    padding-left: 10vh;
  }

  li {
    height: 4.6vw;
  }
  html {
    font-size: 4.75vw;
  }
  .home-nav-container {
    top: 2.5vh;
    transition: var(--home_duration_transition);
    transition-timing-function: var(--home_timing_transition);
  }
  .rest-info-container {
    top: 2.5vh;
  }
  .title {
    top: 2.5vh;
    position: fixed;
  }

  .nav-carousel {
    z-index: 9;
  }

  .project-desc {
    margin-top: 5vh;
    line-height: 3vh;
  }

  footer {
    top: auto;
    bottom: 2vh;
  }
  .btn-container {
    width: 0;
    height: 0;
  }
  .top-load {
    height: 5vh;
  }

  .btn-container {
    z-index: 9;
  }

  .nav-carousel {
    top: 6vh;
    position: fixed;
  }
  .style-play a {
    position: absolute;
    top: calc(50vh - 8px);
    left: calc(50vw - 16px);
  }

  .style-bar-print span {
    height: 5vh;
  }
  .style-bar-print {
    height: 5vh;
  }
  .style-slider-print {
    height: 5vh;
  }
  .style-project-info {
    width: 100vw;
    z-index: 9;
  }
  .sub-desc {
    bottom: 6.5vh;
    position: fixed;
  }
  .project-lang {
    width: 100%;
    height: 5vh;
    position: fixed;
  }
  .button-en {
    margin-right: 2vh;
    padding-left: 3vh;
  }
  .quit-info {
    margin-right: 2vh;
    margin-bottom: 2vh;
    position: relative;
    margin-top: 0;
    margin-left: 67vw;
    /* opacity: 0; */
  }
  .quit-about {
    bottom: -6vh;
    color: white;
  }

  .style-slider {
    /* background-color: rgb(255, 254, 244); */
  }

  .style-info {
    bottom: 2vh;
    position: fixed;
  }
  .style-back {
    bottom: 2vh;
    position: fixed;
  }
  .style-back-print {
    position: fixed;
  }
  .style-info-print {
    position: fixed;
  }

  .style-slider {
    top: 0;
    height: 5vh;
  }

  .style-bar span {
    height: 5vh;
    transition: 150ms ease-in-out;
  }

  .style-fullscreen {
    top: 6vh;
  }

  .style-pause {
    top: 6vh;
  }

  .slide-up {
    transform: translateY(-100%);
  }
  .slide-up-preview {
    transform: translateY(-150%);
  }

  .slide-up-rev {
    transform: translateY(-100%);
  }
  .slide-down {
    transform: translateY(-5%);
  }

  .style-bar span {
    background-color: rgb(255, 254, 244);
  }

  .video-timer {
    width: auto;
    margin-right: 1.5vh;
    color: black;
    height: 5.3vh;
  }
  .img-wrapper img {
    width: 100%;
    object-fit: contain;
    height: auto;
  }
}

/* IPHONE 8  */
@media screen and (min-device-height: 700px) and (max-device-height: 950px) {
  .project-desc {
    line-height: 2.7vh;
  }

  .cv-contain {
    flex-direction: column;
    line-height: 2.5vh;
    /* line-height: normal; */
  }
  .cv-line {
    flex-direction: row;
    margin-bottom: 1.4vh;
  }
  .slide-up-plus {
    transform: translateY(-250%);
  }
  .video-timer {
    height: 5.1vh;
  }
  .title {
    top: 2.8vh;
    position: fixed;
  }
  .rest-info-container {
    top: 2.8vh;
  }
  .home-nav-container {
    top: 2.8vh;
  }
  .cv-info-1 {
    margin-top: 2.8vh;
  }
  .state-top-1 {
    top: 0.6vh !important;
  }
  .state-top-2 {
    top: -1.9vh !important;
  }
  .state-top-3 {
    top: -3.7vh !important;
  }
  .state-top-4 {
    top: -5.7vh !important;
  }
  .state-top-5 {
    top: -7.95vh !important;
  }
  .state-top-6 {
    top: -10.1vh !important;
  }
  .state-top-7 {
    top: -12.15vh !important;
  }
  .state-top-8 {
    top: -14.2vh !important;
  }
  .state-top-9 {
    top: -10.3vh !important;
  }
}

@media screen and (min-width: 1800px) {
  .project-desc {
    line-height: 1.8vh;
  }
}

@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  /* .home-nav-container > ul > li {
    white-space: nowrap;
  }

  .title {
    top: 2.7vh;
  }

  .state-top-1 {
    top: 0.2vh !important;
  }
  .state-top-2 {
    top: -2.5vh !important;
  }
  .state-top-3 {
    top: -5.2vh !important;
  }
  .state-top-4 {
    top: -7.65vh !important;
  }
  .state-top-5 {
    top: -10.3vh !important;
  }
  .state-top-6 {
    top: -12.7vh !important;
  }
  .state-top-7 {
    top: -15.4vh !important;
  }
  .state-top-8 {
    top: -18.1vh !important;
  }
  .state-top-9 {
    top: -10.3vh !important;
  } */
}

/* NOT IPHONE 6/7/8 */

@media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
  /* .rest-info-container {
    top: 2.7vh;
  }
  .home-nav-container {
    top: 2.7vh;
  }
  .cv-info-1 {
    margin-top: 2.7vh;
  }
  .title {
    top: 2.7vh;
  } */
  /* 
  .state-top-1 {
    top: -0.1vh !important;
  }
  .state-top-2 {
    top: -2.7vh !important;
  }
  .state-top-3 {
    top: -5.3vh !important;
  }
  .state-top-4 {
    top: -8vh !important;
  }
  .state-top-5 {
    top: -10.5vh !important;
  }
  .state-top-6 {
    top: -13.1vh !important;
  }
  .state-top-7 {
    top: -15.6vh !important;
  }
  .state-top-8 {
    top: -18.2vh !important;
  } */
}
@media screen and (min-width: 1200px) {
  html {
    /* font-size: 1.15em; */
  }
}

@media screen and (min-width: 2400px) {
  html {
    font-size: 1.85em;
  }
}