h1 { font-family: 'DM Sans'; font-weight: 700; font-size: 5rem; margin-bottom: 20px; }

header.intro-header { min-height: 100vh; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; padding: 50px 15px; z-index: 1; }
header .intro-text { font-family: 'DM Sans'; font-size: 2rem; max-width: 960px; line-height: 1.25; z-index: 2; }
header .intro-text .part { overflow: hidden; display: inline-block; }
header .intro-text .part span { transform: translate(0,100%); display: inline-block; transition: transform 0.4s; }
header .intro-text .part.active span { transform: none; }
header .intro-text a { color: #fff; font-size: 1.4rem; }
header .intro-text a  span { text-decoration: underline; }

header .intro-photos-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; }
header .intro-photos { position: absolute; width: 100%; height: 100%; display: flex; justify-content: space-between; opacity: 0.2; pointer-events: none; overflow: hidden; }
header .intro-photos:nth-child(2) { display: none; }
header .intro-photos .left-column { width: 55%; flex-shrink: 0; }
header .intro-photos .right-column { flex-grow: 1; margin-left: 2vw; }
header .intro-photos .column-content { animation-name: scrollImgs; animation-iteration-count: infinite; animation-timing-function: linear; }
header .intro-photos .left-column .column-content { animation-duration: 75s; }
header .intro-photos .right-column .column-content { animation-duration: 60s; }
header .intro-photos .img-wrap { display: flex; position: relative; padding-bottom: 2vw; }
header .intro-photos .img-wrap img { transition: 0.5s opacity, 0.5s transform; transition-timing-function: cubic-bezier(0,.22,0,.98); opacity: 0; transform: scale(0.8); }
header .intro-photos .img-wrap img.visible { opacity: 1; transform: none; }
header .intro-photos .column-content:nth-child(1) .img-wrap img.hidden { transform: scale(0.8); opacity: 0; }
header .intro-photos .img-wrap.single-img img { width: 100%; }
header .intro-photos .img-wrap.double-img img { height: auto; width: auto; min-width: 0; }
header .intro-photos .img-wrap.double-img img:nth-child(1) { margin-right: 1vw; }
header .intro-photos .img-wrap.double-img img:nth-child(2) { margin-left: 1vw; }
header .intro-photos .img-wrap.double-img img.img-2 { width: 100%; }
header .intro-photos .img-wrap.double-img img.img-3 { width: 50%; }
header .intro-photos .img-wrap.double-img img.img-4 { width: 50%; }
header .intro-photos .img-wrap.double-img img.img-5 { width: 50%; }
header .intro-photos .img-wrap.double-img img.img-8 { width: 42%; }
header .intro-photos .img-wrap.double-img img.img-9 { width: 100%; }

.white-overlay { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background-color: #fff; transition: transform 0.5s; }
.white-overlay.active { transform: translateX(100%); }

@keyframes scrollImgs {
    to { transform: translateY(-100%); }
}

@keyframes scrollImgsDown {
    to { transform: translateY(100%); }
}

@media (prefers-reduced-motion) {
    header .intro-photos .column-content { animation: unset; }
    header .intro-photos { animation: unset; }
    header .intro-text .part span { transform: none; }
    header .intro-photos .img-wrap img { opacity: 1; transform: none; }
}

@media only screen and (max-width: 1600px) {
    header.home-header .header-left-half { width: calc(1140px / 2); }
}

@media only screen and (max-width: 1399px) {

}


@media only screen and (max-width: 1199px) {
    header.home-header .header-left-half { width: calc(960px / 2); }
}

@media only screen and (max-width: 991px) {
    header .intro-text { font-size: 1.5rem; max-width: 768px; }
    header.home-header .header-left-half { width: 720px; margin-right: auto; }
}

@media only screen and (max-width: 767px) {
    h1 { font-size: 2.5rem; margin-bottom: 15px; }
    header .intro-text { max-width: 480px; font-size: 1.3rem; }
    header .intro-text a { font-size: 1rem; }

    header .intro-photos { position: static; height: auto; flex-wrap: wrap; animation-name: scrollImgs; animation-duration: 100s; animation-iteration-count: infinite; animation-timing-function: linear; }
    header .intro-photos:nth-child(2) { display: flex; }
    header .intro-photos .left-column { width: 100%; }
    header .intro-photos .right-column { width: 100%; margin-left: 0; }

    header .intro-photos .left-column .column-content,
    header .intro-photos .right-column .column-content { animation: none; }

    header .intro-photos .left-column .column-content:nth-child(2),
    header .intro-photos .right-column .column-content:nth-child(2) { display: none; }

    header .intro-photos .img-wrap { padding-bottom: 4vw; }
    header .intro-photos .img-wrap.double-img img:nth-child(1) { margin-right: 2vw; }
    header .intro-photos .img-wrap.double-img img:nth-child(2) { margin-left: 2vw; }

    header.home-header .header-left-half { width: 540px;  }
}

@media only screen and (max-width: 575px) {
    header.home-header .header-left-half { width: 100%; margin-left: 0; margin-right: 0; }
}

@media only screen and (max-width: 479px) {

}
