/* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .content-column { float: right; overflow-x: hidden; } @media screen and (min-width: 1px) { .content-column { width: 845px; margin-right: 37px; padding-left: calc(100vw - 845px - 300px); } } @media screen and (max-width: 2355px) { .content-column { width: 800px; margin-right: 36px; padding-left: calc(100vw - 800px - 280px); } } @media screen and (max-width: 2035px) { .content-column { width: 755px; margin-right: 35px; padding-left: calc(100vw - 755px - 270px); } } @media screen and (max-width: 1760px) { .content-column { width: 715px; margin-right: 34px; padding-left: calc(100vw - 715px - 260px); } } @media screen and (max-width: 1490px) { .content-column { width: 660px; margin-right: 33px; padding-left: calc(100vw - 660px - 250px); } } @media screen and (max-width: 1279px) { .content-column { width: 613px; margin-right: 32px; padding-left: calc(100vw - 613px - 250px); } } @media screen and (max-width: 1129px) { .content-column { width: 573px; margin-right: 31px; padding-left: calc(100vw - 573px - 230px); } } @media screen and (max-width: 1009px) { .content-column { width: 533px; margin-right: 30px; padding-left: calc(100vw - 533px - 220px); } } @media screen and (max-width: 906px) { .content-column { width: 508px; margin-right: 29px; padding-left: calc(100vw - 508px - 210px); } } @media screen and (max-width: 798px) { .content-column { width: 478px; margin-right: 28px; padding-left: calc(100vw - 478px - 100px); } } @media screen and (max-width: 667px) { .content-column { width: calc(100% - 189px); padding-left: calc(100vw - 478px - 100px); } } @media screen and (max-width: 610px) { .content-column { width: calc(100% - 189px); padding-left: calc(100vw - 438px - 95px); } } @media screen and (max-width: 556px) { .content-column { margin-right: 0px; float: none; width: calc(100% - 52px); padding: 0 26px; } } @media screen and (max-width: 481px) { .content-column { width: calc(100% - 46px); padding: 0 23px; } } @media screen and (max-width: 414px) { .content-column { width: calc(100% - 36px); padding: 0 18px; } } @media screen and (max-width: 375px) { .content-column { width: calc(100% - 34px); padding: 0 17px; } } @media screen and (max-width: 320px) { .content-column { width: calc(100% - 32px); padding: 0 16px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .contact-item p, .contact-item p > span > a, .contact-item p > a { color: #8e8e8e; } .contact-item__image { width: 100%; background-color: #ffffff; position: relative; } .contact-item__image img { width: 100%; display: block; position: absolute; } .contact-item .separator { color: #8e8e8e; } .contact-item a h2 { color: #121212; transition-duration: 300ms; } .contact-item a p { transition-duration: 300ms; } .contact-item a:hover h2, .contact-item a:hover p { color: #121212; transition-duration: 300ms; } .contact-item p a:hover { color: #121212; transition-duration: 300ms; } .contact-item p a { transition-duration: 300ms; } .contact-item--bottom a h2 { color: #8e8e8e; transition-duration: 300ms; } .contact-item--bottom h2 { color: #8e8e8e; } .contact-item--bottom:hover a h2 { color: #8e8e8e; transition-duration: 300ms; } .contact-item--bottom:hover h2 { color: #8e8e8e; } @media screen and (min-width: 1px) { .contact-item { margin-bottom: 38px; } .contact-item h1 { font-size: 28px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 22px; } .contact-item__image { margin-bottom: 44px; } } @media screen and (max-width: 2355px) { .contact-item { margin-bottom: 37px; } .contact-item h1 { font-size: 27px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 21px; } .contact-item__image { margin-bottom: 42px; } } @media screen and (max-width: 2035px) { .contact-item { margin-bottom: 35px; } .contact-item h1 { font-size: 26px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 20px; } .contact-item__image { margin-bottom: 40px; } } @media screen and (max-width: 1760px) { .contact-item { margin-bottom: 34px; } .contact-item h1 { font-size: 25px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 19px; } .contact-item__image { margin-bottom: 38px; } } @media screen and (max-width: 1490px) { .contact-item { margin-bottom: 31px; } .contact-item h1 { font-size: 24px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 19px; } .contact-item__image { margin-bottom: 35px; } } @media screen and (max-width: 1279px) { .contact-item { margin-bottom: 31px; } .contact-item h1 { font-size: 23px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 18px; } .contact-item__image { margin-bottom: 31px; } } @media screen and (max-width: 1129px) { .contact-item { margin-bottom: 30px; } .contact-item h1 { font-size: 22px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 17px; } .contact-item__image { margin-bottom: 30px; } } @media screen and (max-width: 1009px) { .contact-item { margin-bottom: 29px; } .contact-item h1 { font-size: 21px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 16px; } .contact-item__image { margin-bottom: 28px; } } @media screen and (max-width: 906px) { .contact-item { margin-bottom: 28px; } .contact-item h1 { font-size: 20px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 16px; } .contact-item__image { margin-bottom: 27px; } } @media screen and (max-width: 798px) { .contact-item { margin-bottom: 25px; } .contact-item h1 { font-size: 20px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 16px; } .contact-item__image { margin-bottom: 25px; } } @media screen and (max-width: 610px) { .contact-item { margin-bottom: 25px; } .contact-item h1 { font-size: 20px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 16px; } .contact-item__image { margin-bottom: 24px; } } @media screen and (max-width: 556px) { .contact-item { margin-bottom: 29px; } .contact-item h1 { font-size: 22px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 17px; } .contact-item__image { margin-bottom: 27px; } } @media screen and (max-width: 481px) { .contact-item { margin-bottom: 25px; } .contact-item h1 { font-size: 20px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 16px; } .contact-item__image { margin-bottom: 26px; } } @media screen and (max-width: 414px) { .contact-item { margin-bottom: 23px; } .contact-item h1 { font-size: 18px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 14px; } .contact-item__image { margin-bottom: 20px; } } @media screen and (max-width: 375px) { .contact-item { margin-bottom: 23px; } .contact-item h1 { font-size: 18px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 14px; } .contact-item__image { margin-bottom: 18px; } } @media screen and (max-width: 320px) { .contact-item { margin-bottom: 20px; } .contact-item h1 { font-size: 16px; } .contact-item h3, .contact-item h3 > span > a, .contact-item h3 > a { font-size: 12px; } .contact-item__image { margin-bottom: 15px; } } .location-item p, .location-item p > span > a, .location-item p > a { color: #121212; } .location-item .separator { color: #8e8e8e; } .location-item a h2 { color: #121212; transition-duration: 300ms; } .location-item a p { transition-duration: 300ms; } .location-item a:hover h2, .location-item a:hover p { color: #121212; transition-duration: 300ms; } .location-item p a:hover { color: #121212; transition-duration: 300ms; } .location-item p a { transition-duration: 300ms; } .location-item--bottom { margin-bottom: 0px !important; } .location-item--reached-bottom p, .location-item--reached-bottom p > span > a, .location-item--reached-bottom p > a, .location-item--reached-bottom p > strong { color: #8e8e8e; } .location-item--reached-bottom a h2 { color: #8e8e8e; transition-duration: 300ms; } @media screen and (min-width: 1px) { .location-item { margin-bottom: 38px; } .location-item h1 { font-size: 28px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 22px; } } @media screen and (max-width: 2355px) { .location-item { margin-bottom: 37px; } .location-item h1 { font-size: 27px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 21px; } } @media screen and (max-width: 2035px) { .location-item { margin-bottom: 35px; } .location-item h1 { font-size: 26px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 20px; } } @media screen and (max-width: 1760px) { .location-item { margin-bottom: 34px; } .location-item h1 { font-size: 25px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 19px; } } @media screen and (max-width: 1490px) { .location-item { margin-bottom: 31px; } .location-item h1 { font-size: 24px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 19px; } } @media screen and (max-width: 1279px) { .location-item { margin-bottom: 31px; } .location-item h1 { font-size: 23px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 18px; } } @media screen and (max-width: 1129px) { .location-item { margin-bottom: 30px; } .location-item h1 { font-size: 22px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 17px; } } @media screen and (max-width: 1009px) { .location-item { margin-bottom: 29px; } .location-item h1 { font-size: 21px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 16px; } } @media screen and (max-width: 906px) { .location-item { margin-bottom: 28px; } .location-item h1 { font-size: 20px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 16px; } } @media screen and (max-width: 798px) { .location-item { margin-bottom: 25px; } .location-item h1 { font-size: 20px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 16px; } } @media screen and (max-width: 610px) { .location-item { margin-bottom: 25px; } .location-item h1 { font-size: 20px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 16px; } } @media screen and (max-width: 556px) { .location-item { margin-bottom: 29px; } .location-item h1 { font-size: 22px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 17px; } } @media screen and (max-width: 481px) { .location-item { margin-bottom: 25px; } .location-item h1 { font-size: 20px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 16px; } } @media screen and (max-width: 414px) { .location-item { margin-bottom: 23px; } .location-item h1 { font-size: 18px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 14px; } } @media screen and (max-width: 375px) { .location-item { margin-bottom: 23px; } .location-item h1 { font-size: 18px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 14px; } } @media screen and (max-width: 320px) { .location-item { margin-bottom: 20px; } .location-item h1 { font-size: 16px; } .location-item h3, .location-item h3 > span > a, .location-item h3 > a { font-size: 12px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .landing-carousel__slide { width: 100%; transition: transform 180ms; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .landing-gallery__item { background-color: #ffffff; position: relative; } .landing-gallery__item:hover { cursor: pointer; } .landing-gallery__item:hover .landing-gallery__item-cont { opacity: 0.03; transition: opacity 150ms ease-out; } .landing-gallery__item:hover .landing-gallery__item-title { opacity: 1; transition: opacity 150ms ease-out 50ms; } .landing-gallery__item--faded .landing-gallery__item-cont { opacity: 0.03; transition: opacity 150ms ease-out; } .landing-gallery__item--faded .landing-gallery__item-title { opacity: 1; color: #8e8e8e !important; transition: color 300ms; } .landing-gallery__item--faded:hover .landing-gallery__item-title { color: #121212 !important; transition: color 300ms; } .landing-gallery__item--active .landing-gallery__item-cont { opacity: 0.03; transition: opacity 150ms ease-out; } .landing-gallery__item--active .landing-gallery__item-title { opacity: 1; color: #121212 !important; transition: color 300ms; } .landing-gallery__item--active:hover .landing-gallery__item-title { color: #121212 !important; transition: color 300ms; } .landing-gallery__item-cont { position: relative; transition: opacity 300ms ease-out; } .landing-gallery__item__img { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; } .landing-gallery__item__img.loaded { opacity: 1; transition: opacity 147ms ease-out; } .landing-gallery__item__img.preloaded { opacity: 1; } .landing-gallery__item-title { position: absolute; width: 100%; text-align: center; padding: 5px 23%; box-sizing: border-box; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; color: #121212 !important; transition: opacity 200ms ease-out; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .landing-gallery__item { margin-bottom: 52px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .landing-gallery__item { margin-bottom: 50px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .landing-gallery__item { margin-bottom: 48px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .landing-gallery__item { margin-bottom: 46px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .landing-gallery__item { margin-bottom: 42px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .landing-gallery__item { margin-bottom: 39px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .landing-gallery__item { margin-bottom: 36px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .landing-gallery__item { margin-bottom: 34px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .landing-gallery__item { margin-bottom: 32px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .landing-gallery__item { margin-bottom: 30px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .landing-gallery__item { margin-bottom: 28px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .landing-gallery__item { margin-bottom: 32px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .landing-gallery__item { margin-bottom: 28px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .landing-gallery__item { margin-bottom: 25px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .landing-gallery__item { margin-bottom: 22px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .landing-gallery__item { margin-bottom: 19px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .press-item { width: 100%; position: relative; margin-bottom: 30px; } .press-item:last-child { margin-bottom: 0px; } .press-item--link:hover { cursor: pointer; } .press-item--link:hover .press-item__link .svg__stroke { stroke: #696969; transition-duration: 300ms; } .press-item--bottom .press-item__title { color: #8e8e8e; transition-duration: 250ms; } .press-item--bottom .press-item__link { opacity: 0; transition-duration: 250ms; } .press-item--bottom-link .press-item__title { color: #8e8e8e; transition-duration: 250ms; } .press-item--bottom-link .press-item__link { opacity: 0; transition-duration: 250ms; } .press-item--bottom-link:hover { cursor: pointer; } .press-item--bottom-link:hover .press-item__title { color: #121212; } .press-item--bottom-link:hover .press-item__link { opacity: 1; } .press-item--bottom-link:hover .press-item__link .svg__stroke { stroke: #696969; transition-duration: 300ms; } .press-item__category { color: #8e8e8e; margin: 0; } .press-item__title { color: #121212; margin: 0; transition-duration: 250ms; } .press-item__subtitle { color: #8e8e8e; margin: 0; } .press-item__link { position: absolute; right: 0; transition-duration: 250ms; } .press-item__link .svg__stroke { stroke: #c7c7c7; transition-duration: 300ms; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .press-item { margin-bottom: 39px; } .press-item__text { max-width: 700px; } .press-item__category { font-size: 22px; } .press-item__title, .press-item__subtitle { font-size: 28px; } .press-item__link { width: 23px; height: 23px; top: calc(1.4 * 22px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .press-item { margin-bottom: 37px; } .press-item__text { max-width: 670px; } .press-item__category { font-size: 21px; } .press-item__title, .press-item__subtitle { font-size: 27px; } .press-item__link { width: 23px; height: 23px; top: calc(1.4 * 21px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .press-item { margin-bottom: 36px; } .press-item__text { max-width: 628px; } .press-item__category { font-size: 20px; } .press-item__title, .press-item__subtitle { font-size: 26px; } .press-item__link { width: 22px; height: 22px; top: calc(1.4 * 20px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .press-item { margin-bottom: 35px; } .press-item__text { max-width: 595px; } .press-item__category { font-size: 19px; } .press-item__title, .press-item__subtitle { font-size: 25px; } .press-item__link { width: 21px; height: 21px; top: calc(1.4 * 19px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .press-item { margin-bottom: 34px; } .press-item__text { max-width: 550px; } .press-item__category { font-size: 19px; } .press-item__title, .press-item__subtitle { font-size: 24px; } .press-item__link { width: 20px; height: 20px; top: calc(1.4 * 19px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .press-item { margin-bottom: 32px; } .press-item__text { max-width: 510px; } .press-item__category { font-size: 18px; } .press-item__title, .press-item__subtitle { font-size: 23px; } .press-item__link { width: 19px; height: 19px; top: calc(1.4 * 18px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .press-item { margin-bottom: 31px; } .press-item__text { max-width: 476px; } .press-item__category { font-size: 17px; } .press-item__title, .press-item__subtitle { font-size: 22px; } .press-item__link { width: 18px; height: 18px; top: calc(1.4 * 17px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .press-item { margin-bottom: 30px; } .press-item__text { max-width: 440px; } .press-item__category { font-size: 16px; } .press-item__title, .press-item__subtitle { font-size: 21px; } .press-item__link { width: 17px; height: 17px; top: calc(1.4 * 16px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .press-item { margin-bottom: 28px; } .press-item__text { max-width: 422px; } .press-item__category { font-size: 16px; } .press-item__title, .press-item__subtitle { font-size: 20px; } .press-item__link { width: 16px; height: 16px; top: calc(1.4 * 16px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .press-item { margin-bottom: 27px; } .press-item__text { max-width: 396px; } .press-item__category { font-size: 16px; } .press-item__title, .press-item__subtitle { font-size: 20px; } .press-item__link { width: 15px; height: 15px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .press-item { margin-bottom: 27px; } .press-item__text { max-width: 364px; } .press-item__category { font-size: 16px; } .press-item__title, .press-item__subtitle { font-size: 20px; } .press-item__link { width: 14px; height: 14px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .press-item { margin-bottom: 30px; } .press-item__text { max-width: 358px; } .press-item__category { font-size: 17px; } .press-item__title, .press-item__subtitle { font-size: 22px; } .press-item__link { width: 17px; height: 17px; top: calc(1.4 * 17px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .press-item { margin-bottom: 28px; } .press-item__text { max-width: 330px; } .press-item__category { font-size: 16px; } .press-item__title, .press-item__subtitle { font-size: 20px; } .press-item__link { width: 15px; height: 15px; top: calc(1.4 * 16px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .press-item { margin-bottom: 24px; } .press-item__text { max-width: 315px; } .press-item__category { font-size: 14px; } .press-item__title, .press-item__subtitle { font-size: 18px; } .press-item__link { width: 13px; height: 13px; top: calc(1.4 * 14px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .press-item { margin-bottom: 24px; } .press-item__text { max-width: 284px; } .press-item__category { font-size: 14px; } .press-item__title, .press-item__subtitle { font-size: 18px; } .press-item__link { width: 13px; height: 13px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .press-item { margin-bottom: 22px; } .press-item__text { max-width: 240px; } .press-item__category { font-size: 16px; } .press-item__title, .press-item__subtitle { font-size: 12px; } .press-item__link { width: 11px; height: 11px; top: calc(1.4 * 12px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .zoom-asset { position: fixed; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background-color: #fff; } .zoom-asset:hover { cursor: pointer; } .zoom-asset__img { max-width: 90vw; max-height: 90vh; } @media screen and (min-width: 1px) { .zoom-asset__img { max-width: 975px; } } @media screen and (max-width: 2380px) { .zoom-asset__img { max-width: 915px; } } @media screen and (max-width: 1795px) { .zoom-asset__img { max-width: 820px; } } @media screen and (max-width: 1355px) { .zoom-asset__img { max-width: 737px; } } @media screen and (max-width: 798px) { .zoom-asset__img { max-width: 90vw; } } .anim__zoom-asset-enter { opacity: 0; } .anim__zoom-asset-enter.anim__zoom-asset-enter-active { opacity: 1; } .anim__zoom-asset-leave { opacity: 1; } .anim__zoom-asset-leave.anim__zoom-asset-leave-active { opacity: 0; transition: opacity 100ms ease-in-out; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .project-asset { width: 100%; } .project-asset:hover { cursor: pointer; } .project-asset__background { width: 100%; background-color: #ffffff; position: relative; } .project-asset__img { width: 100%; display: block; position: absolute; } .project-asset.first { margin-top: 0px; } .project-asset.last { margin-bottom: 0px; } @media screen and (min-width: 1px) { .project-asset { margin-top: 52px; } } @media screen and (max-width: 2540px) { .project-asset { margin-top: 50px; } } @media screen and (max-width: 2035px) { .project-asset { margin-top: 48px; } } @media screen and (max-width: 1760px) { .project-asset { margin-top: 46px; } } @media screen and (max-width: 1490px) { .project-asset { margin-top: 42px; } } @media screen and (max-width: 1279px) { .project-asset { margin-top: 39px; } } @media screen and (max-width: 1129px) { .project-asset { margin-top: 36px; } } @media screen and (max-width: 1009px) { .project-asset { margin-top: 34px; } } @media screen and (max-width: 906px) { .project-asset { margin-top: 32px; } } @media screen and (max-width: 798px) { .project-asset { margin-top: 30px; } } @media screen and (max-width: 610px) { .project-asset { margin-top: 28px; } } @media screen and (max-width: 556px) { .project-asset { margin-top: 32px; } } @media screen and (max-width: 481px) { .project-asset { margin-top: 28px; } } @media screen and (max-width: 414px) { .project-asset { margin-top: 25px; } } @media screen and (max-width: 375px) { .project-asset { margin-top: 22px; } } @media screen and (max-width: 320px) { .project-asset { margin-top: 19px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .landing-carousel { height: 100vh; display: flex; flex-direction: column; justify-content: center; } .landing-carousel--left { cursor: url("/static/icons/arrow_left.svg") 40 20, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrow_right.svg") 0 20, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrow_down.svg") 20 0, pointer; } .landing-carousel__intro { position: absolute; } .landing-carousel__intro:hover { cursor: pointer; } .landing-carousel__intro:hover .landing-carousel__intro-bookmark .svg__stroke { transition-duration: 300ms; stroke: #121212; } .landing-carousel__intro-bookmark { position: absolute; } .landing-carousel__intro-bookmark .svg__stroke { transition-duration: 300ms; stroke: #c7c7c7; } .landing-carousel__intro-bookmark--active .svg__stroke { transition-duration: 300ms; stroke: #121212; } .landing-carousel__half { position: absolute; width: 40vw; background-color: transparent; z-index: 2; } @media screen and (max-height: 750px) { .landing-carousel__half { max-height: calc(100vh - 200px); bottom: 80px !important; } } .landing-carousel__content { margin: 0 auto; position: relative; background-color: #ffffff; overflow: hidden; z-index: 1; } .landing-carousel__gallery-link { width: 100%; z-index: 999; } @media screen and (max-height: 750px) { .landing-carousel__gallery-link { min-height: 80px; } } .landing-carousel__spacer { width: 100%; height: 100px; } .anim__landing-carousel-appear .landing-carousel__intro-bookmark { opacity: 0; } .anim__landing-carousel-appear.anim__landing-carousel-appear-active .landing-carousel__intro-bookmark { opacity: 1; transition: opacity 500ms ease-in 6500ms; } .anim__landing-carousel-enter { height: 0px; opacity: 0; } .anim__landing-carousel-enter.anim__landing-carousel-enter-active { opacity: 1; height: 100vh; transition: opacity 250ms ease-in 750ms, height 500ms ease-in; } .anim__landing-carousel-leave { height: 100vh; opacity: 1; transition: opacity 250ms ease-in, height 500ms ease-in 250ms; } .anim__landing-carousel-leave.anim__landing-carousel-leave-active { height: 0px; opacity: 0; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } .anim__landing-carousel__spacer-leave { transition: height 500ms ease-in 0ms, margin-bottom 500ms ease-in 0ms; } .anim__landing-carousel__spacer-leave.anim__landing-carousel__spacer-leave-active { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__intro-enter { opacity: 0; } .anim__landing-carousel__intro-enter.anim__landing-carousel__intro-enter-active { opacity: 1; transition: opacity 400ms; } .anim__landing-carousel__intro-leave { opacity: 1; } .anim__landing-carousel__intro-leave.anim__landing-carousel__intro-leave-active { opacity: 0; transition: opacity 400ms; } .anim__landing-carousel__header-leave { opacity: 1; } .anim__landing-carousel__header-leave.anim__landing-carousel__header-leave-active { opacity: 0; transition: opacity ease-in 250ms; } .anim__landing-carousel__carousel-leave { opacity: 1; } .anim__landing-carousel__carousel-leave.anim__landing-carousel__carousel-leave-active { opacity: 0; transition: opacity 250ms ease-in 250ms; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .landing-carousel--left { cursor: url("/static/icons/arrows/47x47/arrow_left.svg") 47 23.5, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrows/47x47/arrow_right.svg") 0 23.5, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrows/47x47/arrow_down.svg") 23.5 0, pointer; } .landing-carousel__intro { top: 43px; right: 37px; width: 845px; } .landing-carousel__intro-text { width: 700px; } .landing-carousel__intro-text h2 { font-size: 28px; } .landing-carousel__intro-text h3 { font-size: 22px; } .landing-carousel__intro-bookmark { width: 23px; top: 2px; right: 0px; } .landing-carousel__half { bottom: calc((100vh - calc(975px / 3 * 2)) / 2); height: calc(975px / 3 * 2); } .landing-carousel__content { width: 975px; height: calc(975px / 3 * 2); } } @media screen and (min-width: 1px) and (max-height: 900px) { .landing-carousel__content { max-height: calc(100vh - 250px); max-width: calc((100vh - 250px) / 2 * 3); } } @media screen and (min-width: 1px) { .landing-carousel__content-cont { cursor: pointer; } .landing-carousel__content-cont--left { cursor: url("/static/icons/arrows/47x47/arrow_left.svg") 47 23.5, pointer; } .landing-carousel__content-cont--right { cursor: url("/static/icons/arrows/47x47/arrow_right.svg") 0 23.5, pointer; } .landing-carousel__gallery-link { height: calc((100vh - calc(975px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 43px; margin-bottom: 135px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 43px; margin-bottom: 135px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2540px) and (max-height: 900px) { .landing-carousel__content { max-height: calc(100vh - 350px); max-width: calc((100vh - 350px) / 2 * 3); } } @media screen and (max-width: 2540px) { .landing-carousel__spacer { height: 43px; margin-bottom: 132px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 43px; margin-bottom: 132px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .landing-carousel--left { cursor: url("/static/icons/arrows/47x47/arrow_left.svg") 47 23.5, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrows/47x47/arrow_right.svg") 0 23.5, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrows/47x47/arrow_down.svg") 23.5 0, pointer; } .landing-carousel__intro { top: 42px; right: 36px; width: 800px; } .landing-carousel__intro-text { width: 670px; } .landing-carousel__intro-text h2 { font-size: 27px; } .landing-carousel__intro-text h3 { font-size: 21px; } .landing-carousel__intro-bookmark { width: 23px; top: 1px; right: 0px; } .landing-carousel__half { bottom: calc((100vh - calc(975px / 3 * 2)) / 2); height: calc(975px / 3 * 2); } .landing-carousel__content { width: 975px; height: calc(975px / 3 * 2); } } @media screen and (max-width: 2355px) and (max-height: 900px) { .landing-carousel__content { max-height: calc(100vh - 350px); max-width: calc((100vh - 350px) / 2 * 3); } } @media screen and (max-width: 2355px) { .landing-carousel__content-cont { cursor: pointer; } .landing-carousel__content-cont--left { cursor: url("/static/icons/arrows/47x47/arrow_left.svg") 47 23.5, pointer; } .landing-carousel__content-cont--right { cursor: url("/static/icons/arrows/47x47/arrow_right.svg") 0 23.5, pointer; } .landing-carousel__spacer { height: 42px; margin-bottom: 129px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 42px; margin-bottom: 129px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2380px) { .landing-carousel__half { bottom: calc((100vh - calc(915px / 3 * 2)) / 2); height: calc(915px / 3 * 2); } .landing-carousel__content { width: 915px; height: calc(915px / 3 * 2); } } @media screen and (max-width: 2380px) and (max-height: 850px) { .landing-carousel__content { max-height: calc(100vh - 330px); max-width: calc((100vh - 330px) / 2 * 3); } } @media screen and (max-width: 2380px) { .landing-carousel__gallery-link { height: calc((100vh - calc(915px / 3 * 2)) / 2); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2214px) { .landing-carousel__spacer { height: 42px; margin-bottom: 126px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 42px; margin-bottom: 126px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .landing-carousel__intro { top: 41px; right: 35px; width: 755px; } .landing-carousel__intro-text { width: 628px; } .landing-carousel__intro-text h2 { font-size: 26px; } .landing-carousel__intro-text h3 { font-size: 20px; } } @media screen and (max-width: 2035px) and (max-height: 850px) { .landing-carousel__content { max-height: calc(100vh - 310px); max-width: calc((100vh - 310px) / 2 * 3); } } @media screen and (max-width: 2035px) { .landing-carousel__intro-bookmark { width: 22px; top: 1px; right: 0px; } .landing-carousel__gallery-link { height: calc((100vh - calc(915px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 41px; margin-bottom: 120px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 41px; margin-bottom: 120px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1910px) { .landing-carousel__spacer { height: 41px; margin-bottom: 116px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 41px; margin-bottom: 116px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .landing-carousel--left { cursor: url("/static/icons/arrows/43x43/arrow_left.svg") 43 21.5, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrows/43x43/arrow_right.svg") 0 21.5, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrows/43x43/arrow_down.svg") 21.5 0, pointer; } .landing-carousel__intro { top: 40px; right: 34px; width: 715px; } .landing-carousel__intro-text { width: 595px; } .landing-carousel__intro-text h2 { font-size: 25px; } .landing-carousel__intro-text h3 { font-size: 19px; } .landing-carousel__intro-bookmark { width: 21px; top: 1px; right: 0px; } .landing-carousel__content-cont { cursor: pointer; } .landing-carousel__content-cont--left { cursor: url("/static/icons/arrows/43x43/arrow_left.svg") 43 21.5, pointer; } .landing-carousel__content-cont--right { cursor: url("/static/icons/arrows/43x43/arrow_right.svg") 0 21.5, pointer; } .landing-carousel__gallery-link { height: calc((100vh - calc(915px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 40px; margin-bottom: 112px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 40px; margin-bottom: 112px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1795px) { .landing-carousel__half { bottom: calc((100vh - calc(820px / 3 * 2)) / 2); height: calc(820px / 3 * 2); } .landing-carousel__content { width: 820px; height: calc(820px / 3 * 2); } } @media screen and (max-width: 1795px) and (max-height: 750px) { .landing-carousel__content { max-height: calc(100vh - 280px); max-width: calc((100vh - 280px) / 2 * 3); } } @media screen and (max-width: 1795px) { .landing-carousel__gallery-link { height: calc((100vh - calc(820px / 3 * 2)) / 2); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1670px) { .landing-carousel__spacer { height: 40px; margin-bottom: 109px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 40px; margin-bottom: 109px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .landing-carousel__intro { top: 38px; right: 33px; width: 660px; } .landing-carousel__intro-text { width: 550px; } .landing-carousel__intro-text h2 { font-size: 24px; } .landing-carousel__intro-text h3 { font-size: 19px; } .landing-carousel__intro-bookmark { width: 20px; top: 1px; right: 0px; } .landing-carousel__gallery-link { height: calc((100vh - calc(820px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 38px; margin-bottom: 106px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 38px; margin-bottom: 106px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1432px) { .landing-carousel__spacer { height: 38px; margin-bottom: 103px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 38px; margin-bottom: 103px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1355px) { .landing-carousel__half { bottom: calc((100vh - calc(737px / 3 * 2)) / 2); height: calc(737px / 3 * 2); } .landing-carousel__content { width: 737px; height: calc(737px / 3 * 2); } } @media screen and (max-width: 1355px) and (max-height: 750px) { .landing-carousel__content { max-height: calc(100vh - 270px); max-width: calc((100vh - 270px) / 2 * 3); } } @media screen and (max-width: 1355px) { .landing-carousel__gallery-link { height: calc((100vh - calc(737px / 3 * 2)) / 2); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .landing-carousel__intro { top: 37px; right: 32px; width: 613px; } .landing-carousel__intro-text { width: 510px; } .landing-carousel__intro-text h2 { font-size: 23px; } .landing-carousel__intro-text h3 { font-size: 18px; } } @media screen and (max-width: 1279px) and (max-height: 750px) { .landing-carousel__content { max-height: calc(100vh - 250px); max-width: calc((100vh - 250px) / 2 * 3); } } @media screen and (max-width: 1279px) { .landing-carousel__intro-bookmark { width: 19px; top: 1px; right: 0px; } .landing-carousel__gallery-link { height: calc((100vh - calc(737px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 37px; margin-bottom: 98px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 37px; margin-bottom: 98px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1240px) { .landing-carousel__spacer { height: 37px; margin-bottom: 96px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 37px; margin-bottom: 96px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .landing-carousel--left { cursor: url("/static/icons/arrows/38x38/arrow_left.svg") 38 19, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrows/38x38/arrow_right.svg") 0 19, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrows/38x38/arrow_down.svg") 19 0, pointer; } .landing-carousel__intro { top: 36px; right: 31px; width: 573px; } .landing-carousel__intro-text { width: 476px; } .landing-carousel__intro-text h2 { font-size: 22px; } .landing-carousel__intro-text h3 { font-size: 17px; } .landing-carousel__intro-bookmark { width: 18px; top: 1px; right: 0px; } .landing-carousel__content { max-width: 737px; width: 59.5vw; height: calc(59.5vw / 3 * 2); } } @media screen and (max-width: 1129px) and (max-height: 850px) { .landing-carousel__content { max-height: calc(737px / 3 * 2); } } @media screen and (max-width: 1129px) and (max-height: 750px) { .landing-carousel__content { max-height: calc(100vh - 250px); max-width: calc((100vh - 250px) / 2 * 3); } } @media screen and (max-width: 1129px) { .landing-carousel__content-cont { cursor: pointer; } .landing-carousel__content-cont--left { cursor: url("/static/icons/arrows/38x38/arrow_left.svg") 38 19, pointer; } .landing-carousel__content-cont--right { cursor: url("/static/icons/arrows/38x38/arrow_right.svg") 0 19, pointer; } .landing-carousel__gallery-link { height: calc((100vh - calc(737px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 36px; margin-bottom: 93px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 36px; margin-bottom: 93px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1085px) { .landing-carousel__spacer { height: 36px; margin-bottom: 90px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 36px; margin-bottom: 90px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .landing-carousel--left { cursor: url("/static/icons/arrows/34x34/arrow_left.svg") 34 17, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrows/34x34/arrow_right.svg") 0 17, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrows/34x34/arrow_down.svg") 17 0, pointer; } .landing-carousel__intro { top: 35px; right: 30px; width: 533px; } .landing-carousel__intro-text { width: 440px; } .landing-carousel__intro-text h2 { font-size: 21px; } .landing-carousel__intro-text h3 { font-size: 16px; } .landing-carousel__intro-bookmark { width: 17px; top: 1px; right: 0px; } .landing-carousel__content-cont { cursor: pointer; } .landing-carousel__content-cont--left { cursor: url("/static/icons/arrows/34x34/arrow_left.svg") 34 17, pointer; } .landing-carousel__content-cont--right { cursor: url("/static/icons/arrows/34x34/arrow_right.svg") 0 17, pointer; } .landing-carousel__gallery-link { height: calc((100vh - calc(737px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 35px; margin-bottom: 89px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 35px; margin-bottom: 89px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 950px) { .landing-carousel__spacer { height: 35px; margin-bottom: 87px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 35px; margin-bottom: 87px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .landing-carousel--left { cursor: url("/static/icons/arrows/30x30/arrow_left.svg") 30 15, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrows/30x30/arrow_right.svg") 0 15, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrows/30x30/arrow_down.svg") 15 0, pointer; } .landing-carousel__intro { top: 34px; right: 29px; width: 508px; } .landing-carousel__intro-text { width: 422px; } .landing-carousel__intro-text h2 { font-size: 20px; } .landing-carousel__intro-text h3 { font-size: 16px; } .landing-carousel__intro-bookmark { width: 16px; top: 1px; right: 0px; } .landing-carousel__content { width: 59.5vw; height: calc(59.5vw / 3 * 2); } .landing-carousel__content-cont { cursor: pointer; } .landing-carousel__content-cont--left { cursor: url("/static/icons/arrows/30x30/arrow_left.svg") 30 15, pointer; } .landing-carousel__content-cont--right { cursor: url("/static/icons/arrows/30x30/arrow_right.svg") 0 15, pointer; } .landing-carousel__gallery-link { height: calc((100vh - calc(737px / 3 * 2)) / 2); } .landing-carousel__spacer { height: 34px; margin-bottom: 86px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 34px; margin-bottom: 86px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 850px) { .landing-carousel__spacer { height: 34px; margin-bottom: 85px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 34px; margin-bottom: 85px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .landing-carousel__intro { top: 33px; right: 28px; width: 478px; } .landing-carousel__intro-text { width: 396px; } .landing-carousel__intro-text h2 { font-size: 20px; } .landing-carousel__intro-text h3 { font-size: 16px; } .landing-carousel__intro-bookmark { width: 15px; top: 1px; right: 0px; } .landing-carousel__content { width: 59.5vw; height: calc(59.5vw / 3 * 2); padding-top: 0; max-width: calc((100vh - 230px) / 2 * 3); max-height: calc(100vh - 230px); } .landing-carousel__half { height: 0; padding-top: 62.25%; bottom: calc(((100vh - 62.25vw) / 2) - 26px); } .landing-carousel__gallery-link { height: calc((100vh - (0.7 * 100vw)) / 2); } .landing-carousel__spacer { height: 33px; margin-bottom: 83px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 33px; margin-bottom: 83px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 667px) { .landing-carousel__intro { width: calc(100% - 189px); } .landing-carousel__spacer { height: 33px; margin-bottom: 80px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 33px; margin-bottom: 80px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .landing-carousel--left { cursor: url("/static/icons/arrows/27x27/arrow_left.svg") 27 13.5, pointer; } .landing-carousel--right { cursor: url("/static/icons/arrows/27x27/arrow_right.svg") 0 13.5, pointer; } .landing-carousel--gallery { cursor: url("/static/icons/arrows/27x27/arrow_down.svg") 13.5 0, pointer; } .landing-carousel__intro { top: 31px; right: 27px; width: calc(100% - 189px); } .landing-carousel__intro-text { width: 364px; } .landing-carousel__intro-text h2 { font-size: 20px; } .landing-carousel__intro-text h3 { font-size: 16px; } .landing-carousel__intro-bookmark { width: 15px; top: 2px; right: 0px; } .landing-carousel__content { width: 59.5vw; height: calc(59.5vw / 3 * 2); } .landing-carousel__content-cont { cursor: pointer; } .landing-carousel__content-cont--left { cursor: url("/static/icons/arrows/27x27/arrow_left.svg") 27 13.5, pointer; } .landing-carousel__content-cont--right { cursor: url("/static/icons/arrows/27x27/arrow_right.svg") 0 13.5, pointer; } .landing-carousel__half { bottom: calc(((100vh - 62.25vw) / 2) - 23px); } .landing-carousel__gallery-link { height: calc((100vh - (0.7 * 100vw)) / 2); } .landing-carousel__spacer { height: 31px; margin-bottom: 78px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 31px; margin-bottom: 78px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .landing-carousel__intro { width: calc(100% - 50px); top: calc(31px + 68px); left: 25px; } .landing-carousel__content { width: 59.5vw; height: calc(59.5vw / 3 * 2); max-width: calc((100vh - 350px) / 2 * 3); max-height: calc(100vh - 350px); } .landing-carousel__half { bottom: calc(((100vh - 62.25vw) / 2) - 22px); } .landing-carousel__spacer { height: 96px; margin-bottom: 82px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 96px; margin-bottom: 82px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .landing-carousel__intro { width: calc(100% - 44px); top: calc(31px + 62px); left: 22px; } .landing-carousel__half { bottom: calc(((100vh - 62.25vw) / 2) - 18px); } .landing-carousel__spacer { height: 87px; margin-bottom: 69px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 87px; margin-bottom: 69px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .landing-carousel__intro { width: calc(100% - 36px); top: calc(31px + 52px); left: 18px; } .landing-carousel__half { bottom: calc(((100vh - 62.25vw) / 2) - 18px); } .landing-carousel__spacer { height: 72px; margin-bottom: 55px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 72px; margin-bottom: 55px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .landing-carousel__intro { width: calc(100% - 34px); left: 17px; } .landing-carousel__half { bottom: calc(((100vh - 62.25vw) / 2) - 16px); } .landing-carousel__spacer { height: 71px; margin-bottom: 54px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 71px; margin-bottom: 54px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .landing-carousel__intro { width: calc(100% - 32px); top: calc(31px + 47px); left: 16px; } } @media screen and (max-width: 320px) and (max-height: 750px) { .landing-carousel__content { max-height: calc(100vh - 200px); max-width: calc((100vh - 200px) / 2 * 3); } } @media screen and (max-width: 320px) { .landing-carousel__half { bottom: calc(((100vh - 62.25vw) / 2) - 14px); } } @media screen and (max-width: 320px) and (max-height: 750px) { .landing-carousel__half { max-height: calc(100vh - 200px); } } @media screen and (max-width: 320px) { .landing-carousel__spacer { height: 65px; margin-bottom: 46px; } .anim__landing-carousel__spacer-enter { height: 0px; margin-bottom: 0px; } .anim__landing-carousel__spacer-enter.anim__landing-carousel__spacer-enter-active { height: 65px; margin-bottom: 46px; transition: height 500ms ease-in 250ms, margin-bottom 500ms ease-in 250ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .project-carousel { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; transition-duration: 300ms; } .project-carousel.last { margin-bottom: 0px; } .project-carousel.first { padding-top: 0px; } .project-carousel__left-half { left: 0; } .project-carousel__left-half:hover { cursor: url("/static/icons/arrow_left.svg") 20 20, pointer; } .project-carousel__right-half { right: 0; } .project-carousel__right-half:hover { cursor: url("/static/icons/arrow_right.svg") 20 20, pointer; } .project-carousel__half { position: absolute; width: 33.33%; background-color: transparent; z-index: 2; } .project-carousel__content { width: 100%; margin: 0 auto; position: relative; background-color: #ffffff; z-index: 1; } .project-carousel__content:hover { cursor: pointer; } .project-carousel__arrow-icon { position: absolute; } .project-carousel__arrow-icon svg { fill: #8e8e8e; opacity: 0.5; transition-duration: 300ms; } .project-carousel__arrow-icon--last svg { opacity: 0.2; transition-duration: 300ms; } @media screen and (min-width: 1px) { .project-carousel__arrow-icon { top: calc(50% - 28px); padding: 22px 38px 22px 12px; left: -50px; width: 6px; } } @media screen and (max-width: 2540px) { .project-carousel__arrow-icon { top: calc(50% - 28px); padding: 22px 36px 22px 12px; left: -48px; width: 6px; } } @media screen and (max-width: 2035px) { .project-carousel__arrow-icon { padding: 22px 35px 22px 12px; left: -47px; } } @media screen and (max-width: 1760px) { .project-carousel__arrow-icon { padding: 22px 34px 22px 12px; left: -46px; } } @media screen and (max-width: 1490px) { .project-carousel__arrow-icon { padding: 22px 32px 22px 12px; left: -44px; } } @media screen and (max-width: 1279px) { .project-carousel__arrow-icon { top: calc(50% - 27px); padding: 22px 30px 22px 12px; left: -42px; width: 5px; } } @media screen and (max-width: 1129px) { .project-carousel__arrow-icon { padding: 22px 29px 22px 12px; left: -41px; } } @media screen and (max-width: 1009px) { .project-carousel__arrow-icon { padding: 22px 27px 22px 12px; left: -39px; } } @media screen and (max-width: 906px) { .project-carousel__arrow-icon { padding: 22px 25px 22px 12px; left: -37px; } } @media screen and (max-width: 798px) { .project-carousel__arrow-icon { padding: 22px 24px 22px 12px; left: -36px; } } @media screen and (max-width: 610px) { .project-carousel__arrow-icon { padding: 22px 22px 22px 12px; left: -34px; } } @media screen and (max-width: 556px) { .project-carousel__arrow-icon { padding: 22px 15px 22px 12px; left: -27px; } } @media screen and (max-width: 481px) { .project-carousel__arrow-icon { top: calc(50% - 26px); padding: 22px 13px 22px 12px; left: -25px; width: 4px; } } @media screen and (max-width: 414px) { .project-carousel__arrow-icon { padding: 22px 11px 22px 12px; left: -23px; } } @media screen and (max-width: 375px) { .project-carousel__arrow-icon { padding: 22px 10px 22px 12px; left: -22px; } } @media screen and (max-width: 320px) { .project-carousel__arrow-icon { top: calc(50% - 25px); padding: 22px 9px 22px 12px; left: -21px; width: 3px; } } @media screen and (min-width: 1px) { .project-carousel { padding-top: 52px; } } @media screen and (max-width: 2540px) { .project-carousel { padding-top: 50px; } } @media screen and (max-width: 2035px) { .project-carousel { padding-top: 48px; } } @media screen and (max-width: 1760px) { .project-carousel { padding-top: 46px; } } @media screen and (max-width: 1490px) { .project-carousel { padding-top: 42px; } } @media screen and (max-width: 1279px) { .project-carousel { padding-top: 39px; } } @media screen and (max-width: 1129px) { .project-carousel { padding-top: 36px; } } @media screen and (max-width: 1009px) { .project-carousel { padding-top: 34px; } } @media screen and (max-width: 906px) { .project-carousel { padding-top: 32px; } } @media screen and (max-width: 798px) { .project-carousel { padding-top: 30px; } } @media screen and (max-width: 610px) { .project-carousel { padding-top: 28px; } } @media screen and (max-width: 556px) { .project-carousel { padding-top: 32px; } } @media screen and (max-width: 481px) { .project-carousel { padding-top: 28px; } } @media screen and (max-width: 414px) { .project-carousel { padding-top: 25px; } } @media screen and (max-width: 375px) { .project-carousel { padding-top: 22px; } } @media screen and (max-width: 320px) { .project-carousel { padding-top: 19px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .projects-scroll { position: relative; } .projects-scroll__hov { position: absolute; width: 100vw; right: 0; } .projects-scroll__hov:hover { cursor: pointer; } .projects-scroll__hov--prev { top: 0; } .projects-scroll__hov--next { z-index: 99; bottom: 0; } .projects-scroll__hov--asset { position: fixed; width: 100vw; height: 50vh; right: 0; } .projects-scroll__hov--asset:hover { cursor: default; } .projects-scroll__hov--asset-prev { top: 0; } .projects-scroll__hov--asset-next { bottom: 0; } .projects-scroll__project { padding-bottom: 0px; transition: opacity 100ms ease-in, transform 500ms ease-out 200ms, height 500ms ease-out, max-height 1000ms ease-out; } .projects-scroll__project--active.animating-prev { transform: translateY(100vh); padding-top: 0px !important; } .projects-scroll__project--active.animating-next, .projects-scroll__project--active.animating-next-hov { opacity: 0.4; } .projects-scroll__project--prev { height: 0px; max-height: 0px; margin-top: 0px; padding-top: 0px; display: flex; align-items: flex-end; top: var(--project-timing); transition: opacity 50ms ease-in, padding-top 200ms cubic-bezier(0.25, 0, 0.5, 1), height var(--project-timing) cubic-bezier(0.25, 0, 0.5, 1), max-height var(--project-timing) cubic-bezier(0.25, 0, 0.5, 1); } .projects-scroll__project--prev.animating-prev { max-height: var(--project-height); height: auto; } .projects-scroll__project--next { position: absolute; bottom: 0; height: 0px; padding-bottom: 0px; overflow-y: hidden; margin-bottom: 0px; transition: transform 500ms cubic-bezier(0.25, 0, 0.5, 1) 200ms, padding-bottom 200ms cubic-bezier(0.25, 0, 0.5, 1); } .projects-scroll__project--next.animating-next, .projects-scroll__project--next.animating-next-hov { position: static; height: auto; } .projects-scroll__project--unloaded { height: 0px; padding-bottom: 0px !important; } .projects-scroll__link:hover { cursor: pointer; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .projects-scroll__hov--prev { height: 38px; } .projects-scroll__hov--next { height: 38px; } .projects-scroll__project--active { padding-top: 38px; min-height: calc(100vh - 38px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(95px - 100vh)); margin-bottom: -57px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(76px - 100vh)); margin-bottom: -38px; } .projects-scroll__project--prev.hover { padding-top: 19px; } .projects-scroll__project--prev.animating-prev { padding-top: 38px; } .projects-scroll__project--next { padding-bottom: 38px; } .projects-scroll__project--next.hover { padding-bottom: 57px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(95px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(76px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .projects-scroll__hov--prev { height: 37px; } .projects-scroll__hov--next { height: 37px; } .projects-scroll__project--active { padding-top: 37px; min-height: calc(100vh - 37px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(91px - 100vh)); margin-bottom: -54px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(73px - 100vh)); margin-bottom: -36px; } .projects-scroll__project--prev.hover { padding-top: 18px; } .projects-scroll__project--prev.animating-prev { padding-top: 37px; } .projects-scroll__project--next { padding-bottom: 36px; } .projects-scroll__project--next.hover { padding-bottom: 54px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(91px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(73px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .projects-scroll__hov--prev { height: 36px; } .projects-scroll__hov--next { height: 36px; } .projects-scroll__project--active { padding-top: 36px; min-height: calc(100vh - 36px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(87px - 100vh)); margin-bottom: -51px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(70px - 100vh)); margin-bottom: -34px; } .projects-scroll__project--prev.hover { padding-top: 17px; } .projects-scroll__project--prev.animating-prev { padding-top: 36px; } .projects-scroll__project--next { padding-bottom: 34px; } .projects-scroll__project--next.hover { padding-bottom: 51px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(87px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(70px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .projects-scroll__hov--prev { height: 35px; } .projects-scroll__hov--next { height: 35px; } .projects-scroll__project--active { padding-top: 35px; min-height: calc(100vh - 35px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(85px - 100vh)); margin-bottom: -50px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(68px - 100vh)); margin-bottom: -33px; } .projects-scroll__project--prev.hover { padding-top: 17px; } .projects-scroll__project--prev.animating-prev { padding-top: 35px; } .projects-scroll__project--next { padding-bottom: 33px; } .projects-scroll__project--next.hover { padding-bottom: 50px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(85px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(68px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .projects-scroll__hov--prev { height: 34px; } .projects-scroll__hov--next { height: 34px; } .projects-scroll__project--active { padding-top: 34px; min-height: calc(100vh - 34px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(79px - 100vh)); margin-bottom: -45px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(65px - 100vh)); margin-bottom: -31px; } .projects-scroll__project--prev.hover { padding-top: 14px; } .projects-scroll__project--prev.animating-prev { padding-top: 34px; } .projects-scroll__project--next { padding-bottom: 31px; } .projects-scroll__project--next.hover { padding-bottom: 45px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(79px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(65px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .projects-scroll__hov--prev { height: 33px; } .projects-scroll__hov--next { height: 33px; } .projects-scroll__project--active { padding-top: 33px; min-height: calc(100vh - 33px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(75px - 100vh)); margin-bottom: -42px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(61px - 100vh)); margin-bottom: -28px; } .projects-scroll__project--prev.hover { padding-top: 13px; } .projects-scroll__project--prev.animating-prev { padding-top: 33px; } .projects-scroll__project--next { padding-bottom: 28px; } .projects-scroll__project--next.hover { padding-bottom: 42px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(75px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(61px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .projects-scroll__hov--prev { height: 32px; } .projects-scroll__hov--next { height: 32px; } .projects-scroll__project--active { padding-top: 32px; min-height: calc(100vh - 32px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(72px - 100vh)); margin-bottom: -40px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(60px - 100vh)); margin-bottom: -28px; } .projects-scroll__project--prev.hover { padding-top: 12px; } .projects-scroll__project--prev.animating-prev { padding-top: 32px; } .projects-scroll__project--next { padding-bottom: 28px; } .projects-scroll__project--next.hover { padding-bottom: 40px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(72px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(60px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .projects-scroll__hov--prev { height: 31px; } .projects-scroll__hov--next { height: 31px; } .projects-scroll__project--active { padding-top: 31px; min-height: calc(100vh - 31px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(68px - 100vh)); margin-bottom: -37px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(57px - 100vh)); margin-bottom: -26px; } .projects-scroll__project--prev.hover { padding-top: 11px; } .projects-scroll__project--prev.animating-prev { padding-top: 31px; } .projects-scroll__project--next { padding-bottom: 26px; } .projects-scroll__project--next.hover { padding-bottom: 37px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(68px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(57px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .projects-scroll__hov--prev { height: 30px; } .projects-scroll__hov--next { height: 30px; } .projects-scroll__project--active { padding-top: 30px; min-height: calc(100vh - 30px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(65px - 100vh)); margin-bottom: -35px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(55px - 100vh)); margin-bottom: -25px; } .projects-scroll__project--prev.hover { padding-top: 10px; } .projects-scroll__project--prev.animating-prev { padding-top: 30px; } .projects-scroll__project--next { padding-bottom: 25px; } .projects-scroll__project--next.hover { padding-bottom: 35px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(65px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(55px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .projects-scroll__hov--prev { height: 29px; } .projects-scroll__hov--next { height: 29px; } .projects-scroll__project--active { padding-top: 29px; min-height: calc(100vh - 29px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(62px - 100vh)); margin-bottom: -33px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(53px - 100vh)); margin-bottom: -24px; } .projects-scroll__project--prev.hover { padding-top: 9px; } .projects-scroll__project--prev.animating-prev { padding-top: 29px; } .projects-scroll__project--next { padding-bottom: 24px; } .projects-scroll__project--next.hover { padding-bottom: 33px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(62px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(53px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .projects-scroll__hov--prev { height: 28px; } .projects-scroll__hov--next { height: 28px; } .projects-scroll__project--active { padding-top: 28px; min-height: calc(100vh - 28px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(58px - 100vh)); margin-bottom: -30px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(49px - 100vh)); margin-bottom: -21px; } .projects-scroll__project--prev.hover { padding-top: 9px; } .projects-scroll__project--prev.animating-prev { padding-top: 28px; } .projects-scroll__project--next { padding-bottom: 21px; } .projects-scroll__project--next.hover { padding-bottom: 30px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(58px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(49px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .projects-scroll__hov--prev { height: 96px; } .projects-scroll__hov--next { height: 96px; } .projects-scroll__project--active { padding-top: 96px; min-height: calc(100vh - 96px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(130px - 100vh)); margin-bottom: -34px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(120px - 100vh)); margin-bottom: -24px; } .projects-scroll__project--prev.hover { padding-top: 10px; } .projects-scroll__project--prev.animating-prev { padding-top: 96px; } .projects-scroll__project--next { padding-bottom: 24px; } .projects-scroll__project--next.hover { padding-bottom: 34px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(130px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(120px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .projects-scroll__hov--prev { height: 87px; } .projects-scroll__hov--next { height: 87px; } .projects-scroll__project--active { padding-top: 87px; min-height: calc(100vh - 87px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(117px - 100vh)); margin-bottom: -30px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(108px - 100vh)); margin-bottom: -21px; } .projects-scroll__project--prev.hover { padding-top: 9px; } .projects-scroll__project--prev.animating-prev { padding-top: 87px; } .projects-scroll__project--next { padding-bottom: 21px; } .projects-scroll__project--next.hover { padding-bottom: 30px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(117px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(108px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .projects-scroll__hov--prev { height: 72px; } .projects-scroll__hov--next { height: 72px; } .projects-scroll__project--active { padding-top: 72px; min-height: calc(100vh - 72px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(98px - 100vh)); margin-bottom: -26px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(89px - 100vh)); margin-bottom: -17px; } .projects-scroll__project--prev.hover { padding-top: 9px; } .projects-scroll__project--prev.animating-prev { padding-top: 72px; } .projects-scroll__project--next { padding-bottom: 17px; } .projects-scroll__project--next.hover { padding-bottom: 26px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(98px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(89px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .projects-scroll__hov--prev { height: 71px; } .projects-scroll__hov--next { height: 71px; } .projects-scroll__project--active { padding-top: 71px; min-height: calc(100vh - 71px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(95px - 100vh)); margin-bottom: -24px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(87px - 100vh)); margin-bottom: -16px; } .projects-scroll__project--prev.hover { padding-top: 8px; } .projects-scroll__project--prev.animating-prev { padding-top: 71px; } .projects-scroll__project--next { padding-bottom: 16px; } .projects-scroll__project--next.hover { padding-bottom: 24px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(95px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(87px - 100vh)); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .projects-scroll__hov--prev { height: 65px; } .projects-scroll__hov--next { height: 65px; } .projects-scroll__project--active { padding-top: 65px; min-height: calc(100vh - 65px); } .projects-scroll__project--active.animating-next-hov { transform: translateY(calc(85px - 100vh)); margin-bottom: -20px; } .projects-scroll__project--active.animating-next { transform: translateY(calc(79px - 100vh)); margin-bottom: -14px; } .projects-scroll__project--prev.hover { padding-top: 6px; } .projects-scroll__project--prev.animating-prev { padding-top: 65px; } .projects-scroll__project--next { padding-bottom: 14px; } .projects-scroll__project--next.hover { padding-bottom: 20px; } .projects-scroll__project--next.animating-next-hov { transform: translateY(calc(85px - 100vh)); } .projects-scroll__project--next.animating-next { transform: translateY(calc(79px - 100vh)); } } .react-scroll__item--inactive { height: 0; visibility: hidden; position: absolute; box-sizing: border-box; overflow: hidden; } .anim__react-scroll__project-enter { opacity: 0; } .anim__react-scroll__project-enter.anim__react-scroll__project-enter-active { opacity: 1; transition: opacity 5000ms; } .anim__react-scroll__project-leave { opacity: 1; } .anim__react-scroll__project-leave.anim__react-scroll__project-leave-active { opacity: 0; transition: opacity 5000ms; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .project-item { transition-duration: 100ms; } .project-item p { margin: 0; } .project-item__heading-cont { position: relative; z-index: 9; width: 99.4%; display: flex; flex-direction: row; justify-content: space-between; } .project-item__heading-cont:hover { cursor: pointer; } .project-item__heading-cont:hover .project-item__bookmark-icon .svg__stroke { transition-duration: 300ms; stroke: #696969; } .project-item__heading h2 { color: #121212; margin: 0; } .project-item__heading p { color: #8e8e8e; margin: 0; } .project-item__bookmark-icon .svg__stroke { transition-duration: 300ms; stroke: #c7c7c7; } .project-item__description { position: relative; z-index: 9; color: #8e8e8e; } .project-item__number { position: relative; z-index: 9; color: #8e8e8e; } .project-item__credits { position: relative; z-index: 9; color: #8e8e8e; } .project-item__credits--none { margin-top: 0px !important; } .project-item__back { position: fixed; z-index: 99; } .project-item__back svg { transition-duration: 300ms; fill: #c7c7c7; } .project-item__back svg:hover { cursor: pointer; transition-duration: 300ms; fill: #696969; } .project-item__category { position: fixed; margin: 0; color: #bcbcbc; } .project-item__category .separator { color: #bcbcbc; } .project-item__category a { border: none; color: #bcbcbc; transition-duration: 300ms; } .project-item__category a:hover { border: none; color: #8e8e8e; transition-duration: 300ms; } .project-item--hidden { opacity: 0; transition-duration: 100ms; } body .anim__project-item__asset-0-appear { opacity: 0; } body .anim__project-item__asset-0-appear.anim__project-item__asset-0-appear-active { opacity: 1; transition: opacity 300ms ease-in 0ms; } body .anim__project-item__asset-1-appear { opacity: 0; } body .anim__project-item__asset-1-appear.anim__project-item__asset-1-appear-active { opacity: 1; transition: opacity 300ms ease-in 300ms; } body .anim__project-item__asset-2-appear { opacity: 0; } body .anim__project-item__asset-2-appear.anim__project-item__asset-2-appear-active { opacity: 1; transition: opacity 300ms ease-in 600ms; } body .anim__project-item__asset-3-appear { opacity: 0; } body .anim__project-item__asset-3-appear.anim__project-item__asset-3-appear-active { opacity: 1; transition: opacity 300ms ease-in 900ms; } body .anim__project-item__asset-4-appear { opacity: 0; } body .anim__project-item__asset-4-appear.anim__project-item__asset-4-appear-active { opacity: 1; transition: opacity 300ms ease-in 1200ms; } body .anim__project-item__asset-5-appear { opacity: 0; } body .anim__project-item__asset-5-appear.anim__project-item__asset-5-appear-active { opacity: 1; transition: opacity 300ms ease-in 1500ms; } body .anim__project-item__asset-6-appear { opacity: 0; } body .anim__project-item__asset-6-appear.anim__project-item__asset-6-appear-active { opacity: 1; transition: opacity 300ms ease-in 1800ms; } body .anim__project-item__asset-7-appear { opacity: 0; } body .anim__project-item__asset-7-appear.anim__project-item__asset-7-appear-active { opacity: 1; transition: opacity 300ms ease-in 2100ms; } body .anim__project-item__asset-8-appear { opacity: 0; } body .anim__project-item__asset-8-appear.anim__project-item__asset-8-appear-active { opacity: 1; transition: opacity 300ms ease-in 2400ms; } body .anim__project-item__asset-9-appear { opacity: 0; } body .anim__project-item__asset-9-appear.anim__project-item__asset-9-appear-active { opacity: 1; transition: opacity 300ms ease-in 2700ms; } body .anim__project-item__asset-10-appear { opacity: 0; } body .anim__project-item__asset-10-appear.anim__project-item__asset-10-appear-active { opacity: 1; transition: opacity 300ms ease-in 3000ms; } body .anim__project-item__asset-11-appear { opacity: 0; } body .anim__project-item__asset-11-appear.anim__project-item__asset-11-appear-active { opacity: 1; transition: opacity 300ms ease-in 3300ms; } body .anim__project-item__asset-12-appear { opacity: 0; } body .anim__project-item__asset-12-appear.anim__project-item__asset-12-appear-active { opacity: 1; transition: opacity 300ms ease-in 3600ms; } body .anim__project-item__asset-13-appear { opacity: 0; } body .anim__project-item__asset-13-appear.anim__project-item__asset-13-appear-active { opacity: 1; transition: opacity 300ms ease-in 3900ms; } body .anim__project-item__asset-14-appear { opacity: 0; } body .anim__project-item__asset-14-appear.anim__project-item__asset-14-appear-active { opacity: 1; transition: opacity 300ms ease-in 4200ms; } body .anim__project-item__asset-15-appear { opacity: 0; } body .anim__project-item__asset-15-appear.anim__project-item__asset-15-appear-active { opacity: 1; transition: opacity 300ms ease-in 4500ms; } body .anim__project-item__asset-16-appear { opacity: 0; } body .anim__project-item__asset-16-appear.anim__project-item__asset-16-appear-active { opacity: 1; transition: opacity 300ms ease-in 4800ms; } body .anim__project-item__asset-17-appear { opacity: 0; } body .anim__project-item__asset-17-appear.anim__project-item__asset-17-appear-active { opacity: 1; transition: opacity 300ms ease-in 5100ms; } body .anim__project-item__asset-18-appear { opacity: 0; } body .anim__project-item__asset-18-appear.anim__project-item__asset-18-appear-active { opacity: 1; transition: opacity 300ms ease-in 5400ms; } body .anim__project-item__asset-19-appear { opacity: 0; } body .anim__project-item__asset-19-appear.anim__project-item__asset-19-appear-active { opacity: 1; transition: opacity 300ms ease-in 5700ms; } body .anim__project-item__asset-20-appear { opacity: 0; } body .anim__project-item__asset-20-appear.anim__project-item__asset-20-appear-active { opacity: 1; transition: opacity 300ms ease-in 6000ms; } body .anim__project-item__asset-21-appear { opacity: 0; } body .anim__project-item__asset-21-appear.anim__project-item__asset-21-appear-active { opacity: 1; transition: opacity 300ms ease-in 6300ms; } body .anim__project-item__asset-22-appear { opacity: 0; } body .anim__project-item__asset-22-appear.anim__project-item__asset-22-appear-active { opacity: 1; transition: opacity 300ms ease-in 6600ms; } body .anim__project-item__asset-23-appear { opacity: 0; } body .anim__project-item__asset-23-appear.anim__project-item__asset-23-appear-active { opacity: 1; transition: opacity 300ms ease-in 6900ms; } .anim__project-item__categories-enter { opacity: 0; } .anim__project-item__categories-enter.anim__project-item__categories-enter-active { opacity: 1; transition: opacity 130ms ease-in; } .anim__project-item__categories-leave { opacity: 1; } .anim__project-item__categories-leave.anim__project-item__categories-leave-active { opacity: 0; transition: opacity 130ms ease-in; } .anim__project-item__categories--outside-enter { opacity: 0; } .anim__project-item__categories--outside-enter.anim__project-item__categories--outside-enter-active { opacity: 1; transition: opacity 130ms ease-in; } .anim__project-item__categories--outside-leave { opacity: 1; } .anim__project-item__categories--outside-leave.anim__project-item__categories--outside-leave-active { opacity: 0; transition: opacity 130ms ease-in; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .project-item { margin-top: 38px; font-size: 22px; } .project-item__heading-cont { margin-top: 37px; } .project-item__heading, .project-item h2 { max-width: 700px; font-size: 28px; } .project-item__heading--year, .project-item h2--year { font-size: 22px; } .project-item__bookmark-icon { width: 23px; margin-top: 3px; } .project-item__description { margin: 37px 0; font-size: 28px; } .project-item__credits { max-width: 700px; padding: 0 0 205px; margin-top: 30px; } .project-item__credits.last { padding-bottom: 71px; } .project-item__back { width: 23px; top: 127px; left: 39px; } .project-item__category { max-width: 365px; left: 39px; bottom: 35px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2540px) { .project-item { margin-top: 37px; font-size: 21px; } .project-item__heading-cont { margin-top: 36px; } .project-item__heading, .project-item h2 { max-width: 670px; font-size: 27px; } .project-item__heading--year, .project-item h2--year { font-size: 21px; } .project-item__bookmark-icon { width: 23px; margin-top: 2px; } .project-item__description { margin: 35px 0; font-size: 27px; } .project-item__credits { max-width: 670px; padding: 0 0 185px; margin-top: 29px; } .project-item__credits.last { padding-bottom: 67px; } .project-item__back { width: 23px; top: 123px; left: 38px; } .project-item__category { max-width: 350px; left: 38px; bottom: 34px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .project-item { margin-top: 36px; font-size: 20px; } .project-item__heading-cont { margin-top: 35px; } .project-item__heading, .project-item h2 { max-width: 628px; font-size: 26px; } .project-item__heading--year, .project-item h2--year { font-size: 20px; } .project-item__bookmark-icon { width: 22px; margin-top: 2px; } .project-item__description { margin: 34px 0; font-size: 26px; } .project-item__credits { max-width: 628px; padding: 0 0 175px; margin-top: 28px; } .project-item__credits.last { padding-bottom: 63px; } .project-item__back { width: 22px; top: 118px; left: 37px; } .project-item__category { max-width: 330px; left: 37px; bottom: 32px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .project-item { margin-top: 35px; font-size: 19px; } .project-item__heading-cont { margin-top: 33px; } .project-item__heading, .project-item h2 { max-width: 595px; font-size: 25px; } .project-item__heading--year, .project-item h2--year { font-size: 19px; } .project-item__bookmark-icon { width: 21px; margin-top: 2px; } .project-item__description { margin: 33px 0; font-size: 25px; } .project-item__credits { max-width: 595px; padding: 0 0 164px; margin-top: 26px; } .project-item__credits.last { padding-bottom: 60px; } .project-item__back { width: 21px; top: 113px; left: 35px; } .project-item__category { max-width: 315px; left: 35px; bottom: 31px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .project-item { margin-top: 34px; font-size: 19px; } .project-item__heading-cont { margin-top: 30px; } .project-item__heading, .project-item h2 { max-width: 550px; font-size: 24px; } .project-item__heading--year, .project-item h2--year { font-size: 19px; } .project-item__bookmark-icon { width: 20px; margin-top: 3px; } .project-item__description { margin: 32px 0; font-size: 24px; } .project-item__credits { max-width: 550px; padding: 0 0 134px; margin-top: 25px; } .project-item__credits.last { padding-bottom: 56px; } .project-item__back { width: 20px; top: 144px; left: 33px; } .project-item__category { max-width: 300px; left: 33px; bottom: 30px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .project-item { margin-top: 33px; font-size: 18px; } .project-item__heading-cont { margin-top: 28px; } .project-item__heading, .project-item h2 { max-width: 510px; font-size: 23px; } .project-item__heading--year, .project-item h2--year { font-size: 18px; } .project-item__bookmark-icon { width: 19px; margin-top: 3px; } .project-item__description { margin: 30px 0; font-size: 23px; } .project-item__credits { max-width: 510px; padding: 0 0 116px; margin-top: 24px; } .project-item__credits.last { padding-bottom: 51px; } .project-item__back { width: 19px; top: 104px; left: 32px; } .project-item__category { max-width: 270px; left: 32px; bottom: 29px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .project-item { margin-top: 32px; font-size: 17px; } .project-item__heading-cont { margin-top: 26px; } .project-item__heading, .project-item h2 { max-width: 476px; font-size: 22px; } .project-item__heading--year, .project-item h2--year { font-size: 17px; } .project-item__bookmark-icon { width: 18px; margin-top: 3px; } .project-item__description { margin: 29px 0; font-size: 22px; } .project-item__credits { max-width: 476px; padding: 0 0 107px; margin-top: 24px; } .project-item__credits.last { padding-bottom: 48px; } .project-item__back { width: 18px; top: 100px; left: 32px; } .project-item__category { max-width: 255px; left: 32px; bottom: 29px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .project-item { margin-top: 31px; font-size: 16px; } .project-item__heading-cont { margin-top: 24px; } .project-item__heading, .project-item h2 { max-width: 440px; font-size: 21px; } .project-item__heading--year, .project-item h2--year { font-size: 16px; } .project-item__bookmark-icon { width: 17px; margin-top: 3px; } .project-item__description { margin: 28px 0; font-size: 21px; } .project-item__credits { max-width: 440px; padding: 0 0 97px; margin-top: 23px; } .project-item__credits.last { padding-bottom: 45px; } .project-item__back { width: 17px; top: 96px; left: 31px; } .project-item__category { max-width: 235px; left: 31px; bottom: 28px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .project-item { margin-top: 30px; font-size: 16px; } .project-item__heading-cont { margin-top: 23px; } .project-item__heading, .project-item h2 { max-width: 422px; font-size: 20px; } .project-item__heading--year, .project-item h2--year { font-size: 16px; } .project-item__bookmark-icon { width: 16px; margin-top: 3px; } .project-item__description { margin: 26px 0; font-size: 20px; } .project-item__credits { max-width: 422px; padding: 0 0 84px; margin-top: 21px; } .project-item__credits.last { padding-bottom: 42px; } .project-item__back { width: 16px; top: 91px; left: 30px; } .project-item__category { max-width: 200px; left: 30px; bottom: 27px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .project-item { margin-top: 29px; } .project-item__heading-cont { margin-top: 22px; } .project-item__heading { max-width: 396px; } .project-item__bookmark-icon { width: 15px; margin-top: 3px; } .project-item__description { margin: 25px 0; } .project-item__credits { max-width: 396px; padding: 0 0 79px; margin-top: 20px; } .project-item__credits.last { padding-bottom: 40px; } .project-item__back { width: 15px; top: 89px; left: 29px; } .project-item__category { max-width: 170px; left: 29px; bottom: 27px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 773px) { .project-item__credits { max-width: 396px; padding: 0 0 20px; margin-top: 20px; } .project-item__credits.last { padding-bottom: 20px; } .project-item__back { display: none; } .project-item__category { position: static; max-width: 170px; padding-bottom: 84px; } .project-item__category.last { padding-bottom: 40px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .project-item { margin-top: 28px; } .project-item__heading-cont { margin-top: 20px; } .project-item__heading { max-width: 364px; } .project-item__bookmark-icon { width: 15px; margin-top: 3px; } .project-item__description { margin: 25px 0; } .project-item__credits { max-width: 364px; padding: 0 0 20px; margin-top: 20px; } .project-item__category { max-width: 364px; padding-bottom: 82px; } .project-item__category.last { padding-bottom: 36px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .project-item { margin-top: 96px; font-size: 17px; } .project-item__heading-cont { margin-top: 23px; } .project-item__heading, .project-item h2 { max-width: 418px; font-size: 22px; } .project-item__heading--year, .project-item h2--year { font-size: 17px; } .project-item__bookmark-icon { width: 17px; margin-top: 4px; } .project-item__description { margin: 28px 0; font-size: 22px; } .project-item__credits { max-width: 418px; padding: 0 0 22px; margin-top: 22px; } .project-item__category { max-width: 418px; padding-bottom: 80px; } .project-item__category.last { padding-bottom: 38px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .project-item { margin-top: 87px; font-size: 16px; } .project-item__heading-cont { margin-top: 20px; } .project-item__heading, .project-item h2 { max-width: 360px; font-size: 20px; } .project-item__heading--year, .project-item h2--year { font-size: 16px; } .project-item__bookmark-icon { width: 15px; margin-top: 5px; } .project-item__description { margin: 26px 0; font-size: 20px; } .project-item__credits { max-width: 360px; padding: 0 0 20px; margin-top: 20px; } .project-item__category { max-width: 360px; padding-bottom: 65px; } .project-item__category.last { padding-bottom: 32px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .project-item { margin-top: 72px; font-size: 14px; } .project-item__heading-cont { margin-top: 17px; } .project-item__heading, .project-item h2 { max-width: 315px; font-size: 18px; } .project-item__heading--year, .project-item h2--year { font-size: 14px; } .project-item__bookmark-icon { width: 14px; margin-top: 2px; } .project-item__description { margin: 22px 0; font-size: 18px; } .project-item__credits { max-width: 315px; padding: 0 0 17px; margin-top: 17px; } .project-item__category { max-width: 315px; padding-bottom: 57px; } .project-item__category.last { padding-bottom: 26px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .project-item { margin-top: 71px; } .project-item__heading-cont { margin-top: 16px; } .project-item__heading { max-width: 284px; } .project-item__bookmark-icon { width: 14px; margin-top: 3px; } .project-item__description { margin: 22px 0; } .project-item__credits { max-width: 284px; padding: 0 0 17px; margin-top: 17px; } .project-item__category { max-width: 284px; padding-bottom: 51px; } .project-item__category.last { padding-bottom: 26px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .project-item { margin-top: 65px; font-size: 12px; } .project-item__heading-cont { margin-top: 13px; } .project-item__heading, .project-item h2 { max-width: 240px; font-size: 16px; } .project-item__heading--year, .project-item h2--year { font-size: 12px; } .project-item__bookmark-icon { width: 12px; margin-top: 3px; } .project-item__description { margin: 20px 0; font-size: 16px; } .project-item__credits { max-width: 240px; padding: 0 0 15px; margin-top: 15px; } .project-item__category { max-width: 240px; padding-bottom: 45px; } .project-item__category.last { padding-bottom: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .work-item { margin-bottom: 50px; } .work-item:hover { cursor: pointer; } .work-item:hover h3 { color: #121212; transition-duration: 300ms; } .work-item h3 { margin: 0; color: #8e8e8e; font-weight: normal; transition-duration: 300ms; } .work-item__img { width: 100%; display: block; } .work-item:last-child { margin-bottom: 0px; } .hidden h3 { opacity: 0; transition-duration: 200ms; } .hidden:hover h3 { opacity: 1; color: #121212; transition-duration: 300ms; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .work-item { margin-top: 128px; margin-bottom: 91px; } .work-item h3 { font-size: 28px; } .work-item__asset { margin-bottom: 37px; } .work-item:nth-child(2) { margin-top: 178px; } .work-item:last-child { margin-bottom: 0px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .work-item { margin-top: 116px; margin-bottom: 80px; } .work-item h3 { font-size: 27px; } .work-item__asset { margin-bottom: 36px; } .work-item:nth-child(2) { margin-top: 171px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .work-item { margin-top: 102px; margin-bottom: 67px; } .work-item h3 { font-size: 26px; } .work-item__asset { margin-bottom: 35px; } .work-item:nth-child(2) { margin-top: 161px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .work-item { margin-top: 97px; margin-bottom: 63px; } .work-item h3 { font-size: 25px; } .work-item__asset { margin-bottom: 33px; } .work-item:nth-child(2) { margin-top: 152px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .work-item { margin-top: 90px; margin-bottom: 57px; } .work-item h3 { font-size: 24px; } .work-item__asset { margin-bottom: 30px; } .work-item:nth-child(2) { margin-top: 144px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .work-item { margin-top: 83px; margin-bottom: 51px; } .work-item h3 { font-size: 23px; } .work-item__asset { margin-bottom: 28px; } .work-item:nth-child(2) { margin-top: 135px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .work-item { margin-top: 78px; margin-bottom: 47px; } .work-item h3 { font-size: 22px; } .work-item__asset { margin-bottom: 26px; } .work-item:nth-child(2) { margin-top: 129px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .work-item { margin-top: 72px; margin-bottom: 42px; } .work-item h3 { font-size: 21px; } .work-item__asset { margin-bottom: 24px; } .work-item:nth-child(2) { margin-top: 124px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .work-item { margin-top: 57px; margin-bottom: 40px; } .work-item h3 { font-size: 20px; } .work-item__asset { margin-bottom: 23px; } .work-item:nth-child(2) { margin-top: 120px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .work-item { margin-top: 53px; margin-bottom: 44px; } .work-item h3 { font-size: 20px; } .work-item__asset { margin-bottom: 22px; } .work-item:nth-child(2) { margin-top: 116px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 773px) { .work-item { margin-top: 58px; margin-bottom: 49px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 667px) { .work-item { margin-top: 59px; margin-bottom: 50px; } .work-item:nth-child(2) { margin-top: 113px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .work-item { margin-top: 48px; margin-bottom: 45px; } .work-item h3 { font-size: 20px; } .work-item__asset { margin-bottom: 20px; } .work-item:nth-child(2) { margin-top: 109px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .work-item { margin-top: 56px; margin-bottom: 47px; } .work-item h3 { font-size: 22px; } .work-item__asset { margin-bottom: 23px; } .work-item:nth-child(2) { margin-top: 178px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .work-item { margin-top: 44px; margin-bottom: 40px; } .work-item h3 { font-size: 20px; } .work-item__asset { margin-bottom: 20px; } .work-item:nth-child(2) { margin-top: 156px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .work-item { margin-top: 36px; margin-bottom: 36px; } .work-item h3 { font-size: 18px; } .work-item__asset { margin-bottom: 17px; } .work-item:nth-child(2) { margin-top: 127px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .work-item { margin-top: 36px; margin-bottom: 36px; } .work-item h3 { font-size: 18px; } .work-item__asset { margin-bottom: 16px; } .work-item:nth-child(2) { margin-top: 125px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .work-item { margin-top: 30px; margin-bottom: 30px; } .work-item h3 { font-size: 16px; } .work-item__asset { margin-bottom: 13px; } .work-item:nth-child(2) { margin-top: 111px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .footer { position: relative; background-color: #ffffff; } .footer__links { position: relative; display: table-caption; } .footer__links a { display: inline-block; color: #8e8e8e; transition-duration: 300ms; } .footer__links a:hover { cursor: pointer; color: #121212; transition-duration: 300ms; } .footer__links .active { color: #8e8e8e; transition-duration: 300ms; transition-delay: 100ms; } .footer .bottom .active { color: #121212; transition-duration: 300ms; transition-delay: 100ms; } .footer__column--right { position: absolute; } .footer__mobile-address { display: none; position: absolute; bottom: 0; right: 0; z-index: 9; } .footer__mobile-address:hover { cursor: pointer; } .footer__mobile-address a > p { color: #121212; } .footer__content-column { display: flex; flex-direction: row; min-height: 60px; } .footer__content-column--col { display: flex; flex: 1; } .footer__content-column--col .location-item a h2, .footer__content-column--col .location-item a p, .footer__content-column--col .location-item a span { color: #8e8e8e; transition-duration: 300ms; transition-delay: 100ms; } .footer__content-column .bottom .location-item a h2, .footer__content-column .bottom .location-item a p, .footer__content-column .bottom .location-item a span { color: #121212; transition-duration: 300ms; transition-delay: 100ms; } .footer__content-column--icon { opacity: 0; display: flex; transition-duration: 300ms; transition-delay: 100ms; transform: rotate(45deg); transform-origin: center left; margin-top: -3px; } .footer__content-column--icon svg { width: 100%; stroke: #c7c7c7; transition-duration: 300ms; } .footer__content-column--icon svg:hover { cursor: pointer; stroke: #696969; transition-duration: 300ms; } .footer__content-column .bottom { opacity: 1; transition-duration: 300ms; transition-delay: 100ms; } .bottom-click-area { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } .bottom-click-area:hover { cursor: url("/static/icons/dot.svg"), pointer; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .footer { margin-top: 72px; padding: 29px 37px; } .footer__column--right { top: 29px; right: 0; } .footer__content-column--icon { width: 23px; height: 23px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .footer { margin-top: 53px; padding: 28px 36px; } .footer__column--right { top: 28px; right: 0; } .footer__content-column--icon { width: 23px; height: 23px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .footer { margin-top: 41px; padding: 27px 35px; } .footer__column--right { top: 27px; right: 0; } .footer__content-column--icon { width: 22px; height: 22px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .footer { margin-top: 34px; padding: 26px 34px; } .footer__column--right { top: 26px; right: 0; } .footer__content-column--icon { width: 21px; height: 21px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .footer { margin-top: 43px; padding: 25px 33px; } .footer__column--right { top: 25px; right: 0; } .footer__content-column--icon { width: 20px; height: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .footer { margin-top: 27px; padding: 24px 32px; } .footer__column--right { top: 24px; right: 0; } .footer__content-column--icon { width: 19px; height: 19px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .footer { margin-top: 17px; padding: 23px 31px; } .footer__column--right { top: 23px; right: 0; } .footer__content-column--icon { width: 18px; height: 18px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .footer { margin-top: 23px; padding: 22px 30px; } .footer__column--right { top: 22px; right: 0; } .footer__content-column--icon { width: 17px; height: 17px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .footer { margin-top: 20px; padding: 22px 29px; } .footer__column--right { top: 22px; right: 0; } .footer__content-column--icon { width: 16px; height: 16px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .footer { margin-top: 22px; padding: 21px 28px; } .footer__column--right { top: 21px; right: 0; } .footer__content-column--icon { width: 15px; height: 15px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 667px) { .footer__mobile-address { display: block; margin-bottom: 2px; } .footer__links { z-index: 9; } .footer__column--right { width: 100%; } .footer__content-column--col { visibility: hidden; z-index: -1; height: 0px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .footer { margin-top: 9px; padding: 21px 28px; } .footer__column--right { top: 21px; right: 0; } .footer__content-column--icon { width: 15px; height: 15px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .footer { margin-top: 31px; padding: 18px 26px; } .footer__column--right { top: 18px; right: 0; } .footer__content-column--icon { width: 17px; height: 17px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .footer { margin-top: 25px; padding: 20px 23px; } .footer__column--right { top: 20px; right: 0; } .footer__content-column--icon { width: 15px; height: 15px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .footer { margin-top: 19px; padding: 15px 18px; } .footer__column--right { top: 15px; right: 0; } .footer__content-column--icon { width: 14px; height: 14px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .footer { margin-top: 18px; padding: 14px 17px; } .footer__column--right { top: 14px; right: 0; } .footer__content-column--icon { width: 14px; height: 14px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .footer { margin-top: 13px; padding: 13px 16px; } .footer__column--right { top: 13px; right: 0; } .footer__content-column--icon { width: 12px; height: 12px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .navbar { top: 0; } .navbar__logo { position: absolute; z-index: 9998; } .navbar__logo .svg__fill { fill: #000000; transition-duration: 400ms; } .navbar__logo:hover { cursor: pointer; } .navbar__logo--active .svg__fill { fill: #939393; transition-duration: 0ms; } .navbar__logo--active-slow .svg__fill { fill: #939393; transition-duration: 400ms; } .navbar__arrow { position: fixed; } .navbar__arrow .svg__stroke { stroke: black; opacity: 0.15; } .navbar__arrow .svg__fill { fill: black; opacity: 0.15; } .navbar__arrow--flip { transform: rotate(180deg); transform-origin: center center; } .navbar__arrow:hover { cursor: pointer; } .navbar__caret { position: absolute; z-index: 9998; } .navbar__caret:hover { cursor: pointer; } .navbar__caret .svg__stroke { stroke: #c7c7c7; } .navbar__caret--active { opacity: 0; } .navbar__menu { position: fixed; top: 0; left: 0; width: 100vw; z-index: 9997; background-color: #ffffff; } .navbar__menu-options { list-style-type: none; margin: 0; color: #8e8e8e; width: fit-content; } .navbar__menu-options li { transition-duration: 300ms; } .navbar__menu-options li:hover { color: #121212; transition-duration: 300ms; } .navbar__menu-options li::selection { color: #8e8e8e; } .navbar__menu-options:hover { cursor: pointer; } .navbar__menu-options .active { animation: darken 500ms 350ms forwards; } .navbar__menu-options--changing { opacity: 0; transition-duration: 100ms; } @keyframes darken { from { color: #8e8e8e; } to { color: #121212; } } .anim__navbar__menu-options-refreshed-0-enter { opacity: 0; } .anim__navbar__menu-options-refreshed-0-enter.anim__navbar__menu-options-refreshed-0-enter-active { opacity: 1; transition: opacity 220ms ease-in 0ms; } .anim__navbar__menu-options-refreshed-0-leave { opacity: 1; } .anim__navbar__menu-options-refreshed-0-leave.anim__navbar__menu-options-refreshed-0-leave-active { opacity: 0; transition: opacity 220ms ease-in 180ms; } .anim__navbar__menu-options-refreshed-1-enter { opacity: 0; } .anim__navbar__menu-options-refreshed-1-enter.anim__navbar__menu-options-refreshed-1-enter-active { opacity: 1; transition: opacity 220ms ease-in 60ms; } .anim__navbar__menu-options-refreshed-1-leave { opacity: 1; } .anim__navbar__menu-options-refreshed-1-leave.anim__navbar__menu-options-refreshed-1-leave-active { opacity: 0; transition: opacity 220ms ease-in 120ms; } .anim__navbar__menu-options-refreshed-2-enter { opacity: 0; } .anim__navbar__menu-options-refreshed-2-enter.anim__navbar__menu-options-refreshed-2-enter-active { opacity: 1; transition: opacity 220ms ease-in 120ms; } .anim__navbar__menu-options-refreshed-2-leave { opacity: 1; } .anim__navbar__menu-options-refreshed-2-leave.anim__navbar__menu-options-refreshed-2-leave-active { opacity: 0; transition: opacity 220ms ease-in 60ms; } .anim__navbar__menu-options-refreshed-3-enter { opacity: 0; } .anim__navbar__menu-options-refreshed-3-enter.anim__navbar__menu-options-refreshed-3-enter-active { opacity: 1; transition: opacity 220ms ease-in 180ms; } .anim__navbar__menu-options-refreshed-3-leave { opacity: 1; } .anim__navbar__menu-options-refreshed-3-leave.anim__navbar__menu-options-refreshed-3-leave-active { opacity: 0; transition: opacity 220ms ease-in 0ms; } .anim__navbar__menu-options-0-enter { opacity: 0; } .anim__navbar__menu-options-0-enter.anim__navbar__menu-options-0-enter-active { opacity: 1; transition: opacity 220ms ease-in 0ms; } .anim__navbar__menu-options-0-leave { opacity: 1; } .anim__navbar__menu-options-0-leave.anim__navbar__menu-options-0-leave-active { opacity: 0; transition: opacity 100ms ease-in; } .anim__navbar__menu-options-1-enter { opacity: 0; } .anim__navbar__menu-options-1-enter.anim__navbar__menu-options-1-enter-active { opacity: 1; transition: opacity 220ms ease-in 60ms; } .anim__navbar__menu-options-1-leave { opacity: 1; } .anim__navbar__menu-options-1-leave.anim__navbar__menu-options-1-leave-active { opacity: 0; transition: opacity 100ms ease-in; } .anim__navbar__menu-options-2-enter { opacity: 0; } .anim__navbar__menu-options-2-enter.anim__navbar__menu-options-2-enter-active { opacity: 1; transition: opacity 220ms ease-in 120ms; } .anim__navbar__menu-options-2-leave { opacity: 1; } .anim__navbar__menu-options-2-leave.anim__navbar__menu-options-2-leave-active { opacity: 0; transition: opacity 100ms ease-in; } .anim__navbar__menu-options-3-enter { opacity: 0; } .anim__navbar__menu-options-3-enter.anim__navbar__menu-options-3-enter-active { opacity: 1; transition: opacity 220ms ease-in 180ms; } .anim__navbar__menu-options-3-leave { opacity: 1; } .anim__navbar__menu-options-3-leave.anim__navbar__menu-options-3-leave-active { opacity: 0; transition: opacity 100ms ease-in; } .navbar__anim-enter .svg__fill { fill: #939393; } .navbar__anim-enter.navbar__anim-enter-active .svg__fill { fill: #000000; transition: fill 200ms ease-in 400ms; } .navbar__anim--project-enter .svg__fill { fill: #939393; } .navbar__anim--project-enter.navbar__anim--project-enter-active .svg__fill { fill: #000000; transition: fill 200ms ease-in 400ms; } .navbar__anim--landing-enter .svg__fill { fill: #939393; } .navbar__anim--landing-enter.navbar__anim--landing-enter-active .svg__fill { fill: #000000; transition: fill 220ms ease-in 1700ms; } .navbar-overlay-leave { opacity: 1; } .navbar-overlay-leave .navbar__menu-options { opacity: 1; } .navbar-overlay-leave.navbar-overlay-leave-active { opacity: 0; transition: opacity 100ms ease-in; } .navbar-overlay-leave.navbar-overlay-leave-active .navbar__menu-options { opacity: 0; transition: opacity 100ms ease-in; } .navbar-overlay-enter { opacity: 0; transition: opacity 100ms ease-in; } .navbar-overlay-enter .navbar__menu-options { opacity: 0; transition: opacity 100ms ease-in 0ms; } .navbar-overlay-enter.navbar-overlay-enter-active { opacity: 1; } .navbar-overlay-enter.navbar-overlay-enter-active .navbar__menu-options { opacity: 1; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .navbar__logo { width: 159px; height: 32px; left: 39px; top: 36px; } .navbar__arrow { display: none; } .navbar__menu { padding-top: 127px; height: calc(100vh - 127px); } .navbar__menu-options { padding-left: 39px; } .navbar__menu-options li { font-size: 28px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .navbar__logo { width: 154px; height: 31px; left: 37px; top: 35px; } .navbar__menu { padding-top: 123px; height: calc(100vh - 123px); } .navbar__menu-options { padding-left: 38px; } .navbar__menu-options li { font-size: 27px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .navbar__logo { width: 150px; height: 30px; left: 37px; top: 34px; } .navbar__menu { padding-top: 118px; height: calc(100vh - 118px); } .navbar__menu-options { padding-left: 37px; } .navbar__menu-options li { font-size: 26px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .navbar__logo { width: 144px; height: 29px; left: 36px; top: 33px; } .navbar__menu { padding-top: 113px; height: calc(100vh - 113px); } .navbar__menu-options { padding-left: 36px; } .navbar__menu-options li { font-size: 25px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .navbar__logo { width: 139px; height: 28px; left: 34px; top: 31px; } .navbar__caret { width: 28px; height: 28px; left: 34px; top: 92px; } .navbar__menu { padding-top: 107px; height: calc(100vh - 107px); } .navbar__menu-options { padding-left: 35px; } .navbar__menu-options li { font-size: 24px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .navbar__logo { width: 134px; height: 27px; left: 33px; top: 30px; } .navbar__menu { padding-top: 104px; height: calc(100vh - 104px); } .navbar__menu-options { padding-left: 33px; } .navbar__menu-options li { font-size: 23px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .navbar__logo { width: 129px; height: 26px; left: 32px; top: 29px; } .navbar__menu { padding-top: 100px; height: calc(100vh - 100px); } .navbar__menu-options { padding-left: 32px; } .navbar__menu-options li { font-size: 22px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .navbar__logo { width: 124px; height: 25px; left: 31px; top: 28px; } .navbar__menu { padding-top: 96px; height: calc(100vh - 96px); } .navbar__menu-options { padding-left: 30px; } .navbar__menu-options li { font-size: 21px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .navbar__logo { width: 119px; height: 24px; left: 30px; top: 27px; } .navbar__menu { padding-top: 91px; height: calc(100vh - 91px); } .navbar__menu-options { padding-left: 29px; } .navbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .navbar__logo { width: 114px; height: 23px; left: 29px; top: 27px; } .navbar__menu { padding-top: 89px; height: calc(100vh - 89px); } .navbar__menu-options { padding-left: 28px; } .navbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 773px) { .navbar__logo { height: 21px; left: 29px; top: 27px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .navbar__logo { height: 21px; left: 26px; top: 26px; } .navbar__menu { padding-top: 86px; height: calc(100vh - 86px); } .navbar__menu-options { padding-left: 27px; } .navbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .navbar { position: fixed; background-color: #fff; width: 100%; z-index: 9998; border-bottom: 1px solid #f3f3f3; height: 68px; } .navbar:hover { cursor: pointer; } .navbar__logo { width: 119px; height: 24px; left: 25px; top: 24px; padding-bottom: calc(68px - 24px - 24px); } .navbar__arrow { display: block; width: 23px; height: 15px; right: 25px; top: 34px; } .navbar__menu { padding-top: 96px; height: calc(100vh - 96px); } .navbar__menu-options { padding-left: 26px; } .navbar__menu-options li { font-size: 22px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .navbar { height: 62px; } .navbar__logo { width: 114px; height: 23px; left: 22px; top: 21px; padding-bottom: calc(62px - 23px - 21px); border-bottom: 1px solid #f3f3f3; } .navbar__arrow { width: 21px; height: 14px; right: 22px; top: 30px; } .navbar__menu { padding-top: 87px; height: calc(100vh - 87px); } .navbar__menu-options { padding-left: 23px; } .navbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .navbar { height: 52px; } .navbar__logo { width: 99px; height: 20px; left: 18px; top: 18px; padding-bottom: calc(52px - 20px - 18px); border-bottom: 1px solid #f3f3f3; } .navbar__arrow { width: 19px; height: 12px; right: 16px; top: 25px; } .navbar__arrow--flip { top: 30px; } .navbar__menu { padding-top: 71px; height: calc(100vh - 71px); } .navbar__menu-options { padding-left: 17px; } .navbar__menu-options li { font-size: 18px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .navbar__logo { left: 17px; } .navbar__arrow { width: 19px; height: 12px; right: 15px; top: 24px; } .navbar__arrow--flip { top: 30px; } .navbar__menu { padding-top: 74px; height: calc(100vh - 74px); } .navbar__menu-options { padding-left: 16px; } .navbar__menu-options li { font-size: 18px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .navbar { height: 47px; } .navbar__logo { width: 85px; height: 17px; left: 16px; top: 17px; padding-bottom: calc(47px - 17px - 17px); border-bottom: 1px solid #f3f3f3; } .navbar__arrow { width: 16px; height: 10px; right: 14px; top: 19px; } .navbar__arrow--flip { top: 28px; } .navbar__menu { padding-top: 66px; height: calc(100vh - 66px); } .navbar__menu-options { padding-left: 15px; } .navbar__menu-options li { font-size: 16px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .searchbar { position: absolute; } .searchbar__input { width: 100%; border: none; background-color: transparent; color: #121212; padding: 0; } .searchbar__input::placeholder { color: #bcbcbc; transition-duration: 300ms; } .searchbar__input:focus { outline: none; } .searchbar__input:hover { cursor: pointer; } .searchbar__input:hover::placeholder { opacity: 0.8; transition-duration: 300ms; } .searchbar__input--active::placeholder { color: #bcbcbc; opacity: 0.5; transition-duration: 0ms; } .searchbar__input--active:hover::placeholder { opacity: 0.5; transition-duration: 0ms; } .searchbar__input--inactive::placeholder { color: #bcbcbc; transition-duration: 0ms; } .searchbar__input--inactive:hover::placeholder { transition-duration: 0ms; } .searchbar__icon .svg__stroke { stroke: black; opacity: 0.15; } .searchbar__icon .svg__fill { fill: black; opacity: 0.15; } .searchbar__icon--flip { transform: rotate(180deg); transform-origin: center center; } .searchbar__icon:hover { cursor: pointer; } .searchbar__overlay { position: fixed; top: 0; left: 0; width: 100vw; height: calc(100vh - 100px); background-color: #ffffff; } .searchbar__menu-options { color: #8e8e8e; position: absolute; list-style-type: none; padding: 0; margin: 0; } .searchbar__menu-options:hover { cursor: pointer; } .searchbar__menu-options .active { color: #121212; } .searchbar__menu-options li span { transition-duration: 300ms; } .searchbar__menu-options li span:hover { color: #121212; transition-duration: 300ms; } .searchbar.top { z-index: 9996; display: flex; justify-content: space-between; } .searchbar.bottom { z-index: 9995; } .anim__searchbar__overlay-leave { opacity: 1; } .anim__searchbar__overlay-leave .searchbar__menu-options { opacity: 1; } .anim__searchbar__overlay-leave.anim__searchbar__overlay-leave-active { opacity: 0; transition: opacity 1ms ease-in 200ms; } .anim__searchbar__overlay-leave.anim__searchbar__overlay-leave-active .searchbar__menu-options { opacity: 0; transition: opacity 0ms ease-in; } .anim__searchbar__overlay-enter { opacity: 0; transition: opacity 0ms ease-in; } .anim__searchbar__overlay-enter.anim__searchbar__overlay-enter-active { opacity: 1; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .searchbar { top: 43px; right: 36px; width: 846px; } .searchbar__input { font-size: 28px; } .searchbar__icon { width: 31px; height: 20px; margin-top: 8px; } .searchbar__icon--flip { margin-top: 4px; } .searchbar__overlay { padding-top: 177px; } .searchbar__menu-options { width: 845px; right: 37px; } .searchbar__menu-options li { font-size: 28px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .searchbar { top: 42px; right: 35px; width: 801px; } .searchbar__input { font-size: 27px; } .searchbar__icon { width: 31px; height: 20px; margin-top: 9px; } .searchbar__icon--flip { margin-top: 5px; } .searchbar__overlay { padding-top: 170px; } .searchbar__menu-options { width: 800px; right: 36px; } .searchbar__menu-options li { font-size: 27px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .searchbar { top: 41px; right: 34px; width: 756px; } .searchbar__input { font-size: 26px; } .searchbar__icon { width: 29px; height: 19px; margin-top: 12px; } .searchbar__icon--flip { margin-top: 7px; } .searchbar__overlay { padding-top: 160px; } .searchbar__menu-options { width: 755px; right: 35px; } .searchbar__menu-options li { font-size: 26px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .searchbar { top: 40px; right: 33px; width: 716px; } .searchbar__input { font-size: 25px; } .searchbar__icon { width: 28px; height: 18px; margin-top: 13px; } .searchbar__icon--flip { margin-top: 9px; } .searchbar__overlay { padding-top: 151px; } .searchbar__menu-options { width: 715px; right: 34px; } .searchbar__menu-options li { font-size: 25px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .searchbar { top: 38px; right: 32px; width: 661px; } .searchbar__input { font-size: 24px; } .searchbar__icon { width: 28px; height: 18px; margin-top: 11px; } .searchbar__icon--flip { margin-top: 7px; } .searchbar__overlay { padding-top: 143px; } .searchbar__menu-options { width: 660px; right: 33px; } .searchbar__menu-options li { font-size: 24px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .searchbar { top: 37px; right: 31px; width: 614px; } .searchbar__input { font-size: 23px; } .searchbar__icon { width: 26px; height: 17px; margin-top: 10px; } .searchbar__icon--flip { margin-top: 7px; } .searchbar__overlay { padding-top: 134px; } .searchbar__menu-options { width: 613px; right: 32px; } .searchbar__menu-options li { font-size: 23px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .searchbar { top: 36px; right: 30px; width: 574px; } .searchbar__input { font-size: 22px; } .searchbar__icon { width: 25px; height: 16px; margin-top: 6px; } .searchbar__icon--flip { margin-top: 4px; } .searchbar__overlay { padding-top: 128px; } .searchbar__menu-options { width: 573px; right: 31px; } .searchbar__menu-options li { font-size: 22px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .searchbar { top: 35px; right: 29px; width: 534px; } .searchbar__input { font-size: 21px; } .searchbar__icon { width: 23px; height: 15px; margin-top: 4px; } .searchbar__icon--flip { margin-top: 3px; } .searchbar__overlay { padding-top: 123px; } .searchbar__menu-options { width: 533px; right: 30px; } .searchbar__menu-options li { font-size: 21px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .searchbar { top: 34px; right: 28px; width: 509px; } .searchbar__input { font-size: 20px; } .searchbar__icon { width: 22px; height: 14px; margin-top: 4px; } .searchbar__icon--flip { margin-top: 6px; } .searchbar__overlay { padding-top: 119px; } .searchbar__menu-options { width: 508px; right: 29px; } .searchbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .searchbar { top: 33px; right: 27px; width: 479px; } .searchbar__input { font-size: 20px; } .searchbar__icon { width: 22px; height: 14px; margin-top: 4px; } .searchbar__icon--flip { margin-top: 6px; } .searchbar__overlay { padding-top: 115px; } .searchbar__menu-options { width: 478px; right: 28px; } .searchbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 667px) { .searchbar { width: calc(100% - 189px); } .searchbar__overlay { padding-top: 112px; } .searchbar__menu-options { width: calc(100% - 191px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .searchbar { top: 31px; right: 25px; width: calc(100% - 189px); } .searchbar__input { font-size: 20px; } .searchbar__icon { width: 22px; height: 14px; margin-top: 4px; } .searchbar__icon--flip { margin-top: 6px; } .searchbar__overlay { padding-top: 108px; } .searchbar__menu-options { width: calc(100% - 191px); right: 27px; } .searchbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .searchbar { top: 96px; right: 0; padding: 0 25px; width: calc(100% - 50px); } .searchbar__input { font-size: 22px; } .searchbar__icon { width: 23px; height: 15px; margin-top: 5px; } .searchbar__icon--flip { margin-top: 6px; } .searchbar__overlay { padding-top: 178px; } .searchbar__menu-options { right: 0; padding: 0 26px; width: calc(100% - 52px); } .searchbar__menu-options li { font-size: 22px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .searchbar { top: 87px; right: 0; padding: 0 22px; width: calc(100% - 44px); } .searchbar__input { font-size: 20px; } .searchbar__icon { width: 21px; height: 14px; margin-top: 4px; } .searchbar__icon--flip { margin-top: 6px; } .searchbar__overlay { padding-top: 156px; } .searchbar__menu-options { right: 0; padding: 0 23px; width: calc(100% - 46px); } .searchbar__menu-options li { font-size: 20px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .searchbar { top: 72px; right: 0; padding: 0 17px; width: calc(100% - 34px); } .searchbar__input { font-size: 18px; } .searchbar__icon { width: 19px; height: 12px; margin-top: 0px; } .searchbar__icon--flip { margin-top: 5px; } .searchbar__overlay { padding-top: 127px; } .searchbar__menu-options { right: 0; padding: 0 18px; width: calc(100% - 36px); } .searchbar__menu-options li { font-size: 18px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .searchbar { top: 71px; right: 0; padding: 0 16px; width: calc(100% - 32px); } .searchbar__input { font-size: 18px; } .searchbar__icon { width: 19px; height: 12px; margin-top: 0px; } .searchbar__icon--flip { margin-top: 6px; } .searchbar__overlay { padding-top: 125px; } .searchbar__menu-options { right: 0; padding: 0 17px; width: calc(100% - 34px); } .searchbar__menu-options li { font-size: 18px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .searchbar { top: 65px; right: 0; padding: 0 15px; width: calc(100% - 30px); } .searchbar__input { font-size: 16px; } .searchbar__icon { width: 16px; height: 10px; margin-top: -2px; } .searchbar__icon--flip { margin-top: 7px; } .searchbar__overlay { padding-top: 111px; } .searchbar__menu-options { right: 0; padding: 0 16px; width: calc(100% - 32px); } .searchbar__menu-options li { font-size: 16px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .contact-content { margin-top: 38px; } } @media screen and (max-width: 2355px) { .contact-content { margin-top: 37px; } } @media screen and (max-width: 2035px) { .contact-content { margin-top: 36px; } } @media screen and (max-width: 1760px) { .contact-content { margin-top: 35px; } } @media screen and (max-width: 1490px) { .contact-content { margin-top: 34px; } } @media screen and (max-width: 1279px) { .contact-content { margin-top: 33px; } } @media screen and (max-width: 1129px) { .contact-content { margin-top: 32px; } } @media screen and (max-width: 1009px) { .contact-content { margin-top: 31px; } } @media screen and (max-width: 906px) { .contact-content { margin-top: 30px; } } @media screen and (max-width: 798px) { .contact-content { margin-top: 29px; } } @media screen and (max-width: 610px) { .contact-content { margin-top: 28px; } } @media screen and (max-width: 556px) { .contact-content { margin-top: 96px; } } @media screen and (max-width: 481px) { .contact-content { margin-top: 87px; } } @media screen and (max-width: 414px) { .contact-content { margin-top: 72px; } } @media screen and (max-width: 375px) { .contact-content { margin-top: 71px; } } @media screen and (max-width: 320px) { .contact-content { margin-top: 65px; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .landing-gallery { display: flex; justify-content: space-between; transition-duration: 300ms; background-color: #ffffff; } .landing-gallery--hov:hover { cursor: url("/static/icons/arrow_down.svg") 20 0, pointer; } .landing-gallery__column { flex: 1; } .landing-gallery__column:first-child { padding-left: 0px; } .landing-gallery__column:last-child { padding-right: 0px; } .landing-gallery--hov { transition-duration: 300ms; } .landing-gallery--active { transform: translateY(0px); transition-duration: 300ms; } .landing-gallery--inactive { opacity: 0; transition-duration: 150ms; } body { margin-left: calc(var(--item-number) * 60px); } body .anim__landing-gallery__item-0-enter { opacity: 0; } body .anim__landing-gallery__item-0-enter.anim__landing-gallery__item-0-enter-active { opacity: 1; transition: opacity 120ms ease-in 0ms; } body .anim__landing-gallery__item-0-leave { opacity: 1; } body .anim__landing-gallery__item-0-leave.anim__landing-gallery__item-0-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-1-enter { opacity: 0; } body .anim__landing-gallery__item-1-enter.anim__landing-gallery__item-1-enter-active { opacity: 1; transition: opacity 120ms ease-in 116ms; } body .anim__landing-gallery__item-1-leave { opacity: 1; } body .anim__landing-gallery__item-1-leave.anim__landing-gallery__item-1-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-2-enter { opacity: 0; } body .anim__landing-gallery__item-2-enter.anim__landing-gallery__item-2-enter-active { opacity: 1; transition: opacity 120ms ease-in 230ms; } body .anim__landing-gallery__item-2-leave { opacity: 1; } body .anim__landing-gallery__item-2-leave.anim__landing-gallery__item-2-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-3-enter { opacity: 0; } body .anim__landing-gallery__item-3-enter.anim__landing-gallery__item-3-enter-active { opacity: 1; transition: opacity 120ms ease-in 342ms; } body .anim__landing-gallery__item-3-leave { opacity: 1; } body .anim__landing-gallery__item-3-leave.anim__landing-gallery__item-3-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-4-enter { opacity: 0; } body .anim__landing-gallery__item-4-enter.anim__landing-gallery__item-4-enter-active { opacity: 1; transition: opacity 120ms ease-in 452ms; } body .anim__landing-gallery__item-4-leave { opacity: 1; } body .anim__landing-gallery__item-4-leave.anim__landing-gallery__item-4-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-5-enter { opacity: 0; } body .anim__landing-gallery__item-5-enter.anim__landing-gallery__item-5-enter-active { opacity: 1; transition: opacity 120ms ease-in 560ms; } body .anim__landing-gallery__item-5-leave { opacity: 1; } body .anim__landing-gallery__item-5-leave.anim__landing-gallery__item-5-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-6-enter { opacity: 0; } body .anim__landing-gallery__item-6-enter.anim__landing-gallery__item-6-enter-active { opacity: 1; transition: opacity 120ms ease-in 666ms; } body .anim__landing-gallery__item-6-leave { opacity: 1; } body .anim__landing-gallery__item-6-leave.anim__landing-gallery__item-6-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-7-enter { opacity: 0; } body .anim__landing-gallery__item-7-enter.anim__landing-gallery__item-7-enter-active { opacity: 1; transition: opacity 120ms ease-in 770ms; } body .anim__landing-gallery__item-7-leave { opacity: 1; } body .anim__landing-gallery__item-7-leave.anim__landing-gallery__item-7-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-8-enter { opacity: 0; } body .anim__landing-gallery__item-8-enter.anim__landing-gallery__item-8-enter-active { opacity: 1; transition: opacity 120ms ease-in 872ms; } body .anim__landing-gallery__item-8-leave { opacity: 1; } body .anim__landing-gallery__item-8-leave.anim__landing-gallery__item-8-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-9-enter { opacity: 0; } body .anim__landing-gallery__item-9-enter.anim__landing-gallery__item-9-enter-active { opacity: 1; transition: opacity 120ms ease-in 972ms; } body .anim__landing-gallery__item-9-leave { opacity: 1; } body .anim__landing-gallery__item-9-leave.anim__landing-gallery__item-9-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-10-enter { opacity: 0; } body .anim__landing-gallery__item-10-enter.anim__landing-gallery__item-10-enter-active { opacity: 1; transition: opacity 120ms ease-in 1070ms; } body .anim__landing-gallery__item-10-leave { opacity: 1; } body .anim__landing-gallery__item-10-leave.anim__landing-gallery__item-10-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-11-enter { opacity: 0; } body .anim__landing-gallery__item-11-enter.anim__landing-gallery__item-11-enter-active { opacity: 1; transition: opacity 120ms ease-in 1166ms; } body .anim__landing-gallery__item-11-leave { opacity: 1; } body .anim__landing-gallery__item-11-leave.anim__landing-gallery__item-11-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-12-enter { opacity: 0; } body .anim__landing-gallery__item-12-enter.anim__landing-gallery__item-12-enter-active { opacity: 1; transition: opacity 120ms ease-in 1260ms; } body .anim__landing-gallery__item-12-leave { opacity: 1; } body .anim__landing-gallery__item-12-leave.anim__landing-gallery__item-12-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-13-enter { opacity: 0; } body .anim__landing-gallery__item-13-enter.anim__landing-gallery__item-13-enter-active { opacity: 1; transition: opacity 120ms ease-in 1352ms; } body .anim__landing-gallery__item-13-leave { opacity: 1; } body .anim__landing-gallery__item-13-leave.anim__landing-gallery__item-13-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-14-enter { opacity: 0; } body .anim__landing-gallery__item-14-enter.anim__landing-gallery__item-14-enter-active { opacity: 1; transition: opacity 120ms ease-in 1442ms; } body .anim__landing-gallery__item-14-leave { opacity: 1; } body .anim__landing-gallery__item-14-leave.anim__landing-gallery__item-14-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-15-enter { opacity: 0; } body .anim__landing-gallery__item-15-enter.anim__landing-gallery__item-15-enter-active { opacity: 1; transition: opacity 120ms ease-in 1530ms; } body .anim__landing-gallery__item-15-leave { opacity: 1; } body .anim__landing-gallery__item-15-leave.anim__landing-gallery__item-15-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-16-enter { opacity: 0; } body .anim__landing-gallery__item-16-enter.anim__landing-gallery__item-16-enter-active { opacity: 1; transition: opacity 120ms ease-in 1616ms; } body .anim__landing-gallery__item-16-leave { opacity: 1; } body .anim__landing-gallery__item-16-leave.anim__landing-gallery__item-16-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-17-enter { opacity: 0; } body .anim__landing-gallery__item-17-enter.anim__landing-gallery__item-17-enter-active { opacity: 1; transition: opacity 120ms ease-in 1700ms; } body .anim__landing-gallery__item-17-leave { opacity: 1; } body .anim__landing-gallery__item-17-leave.anim__landing-gallery__item-17-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-18-enter { opacity: 0; } body .anim__landing-gallery__item-18-enter.anim__landing-gallery__item-18-enter-active { opacity: 1; transition: opacity 120ms ease-in 1782ms; } body .anim__landing-gallery__item-18-leave { opacity: 1; } body .anim__landing-gallery__item-18-leave.anim__landing-gallery__item-18-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-19-enter { opacity: 0; } body .anim__landing-gallery__item-19-enter.anim__landing-gallery__item-19-enter-active { opacity: 1; transition: opacity 120ms ease-in 1862ms; } body .anim__landing-gallery__item-19-leave { opacity: 1; } body .anim__landing-gallery__item-19-leave.anim__landing-gallery__item-19-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-20-enter { opacity: 0; } body .anim__landing-gallery__item-20-enter.anim__landing-gallery__item-20-enter-active { opacity: 1; transition: opacity 120ms ease-in 1940ms; } body .anim__landing-gallery__item-20-leave { opacity: 1; } body .anim__landing-gallery__item-20-leave.anim__landing-gallery__item-20-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-21-enter { opacity: 0; } body .anim__landing-gallery__item-21-enter.anim__landing-gallery__item-21-enter-active { opacity: 1; transition: opacity 120ms ease-in 2016ms; } body .anim__landing-gallery__item-21-leave { opacity: 1; } body .anim__landing-gallery__item-21-leave.anim__landing-gallery__item-21-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-22-enter { opacity: 0; } body .anim__landing-gallery__item-22-enter.anim__landing-gallery__item-22-enter-active { opacity: 1; transition: opacity 120ms ease-in 2090ms; } body .anim__landing-gallery__item-22-leave { opacity: 1; } body .anim__landing-gallery__item-22-leave.anim__landing-gallery__item-22-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-23-enter { opacity: 0; } body .anim__landing-gallery__item-23-enter.anim__landing-gallery__item-23-enter-active { opacity: 1; transition: opacity 120ms ease-in 2162ms; } body .anim__landing-gallery__item-23-leave { opacity: 1; } body .anim__landing-gallery__item-23-leave.anim__landing-gallery__item-23-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-24-enter { opacity: 0; } body .anim__landing-gallery__item-24-enter.anim__landing-gallery__item-24-enter-active { opacity: 1; transition: opacity 120ms ease-in 2232ms; } body .anim__landing-gallery__item-24-leave { opacity: 1; } body .anim__landing-gallery__item-24-leave.anim__landing-gallery__item-24-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-25-enter { opacity: 0; } body .anim__landing-gallery__item-25-enter.anim__landing-gallery__item-25-enter-active { opacity: 1; transition: opacity 120ms ease-in 2300ms; } body .anim__landing-gallery__item-25-leave { opacity: 1; } body .anim__landing-gallery__item-25-leave.anim__landing-gallery__item-25-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-26-enter { opacity: 0; } body .anim__landing-gallery__item-26-enter.anim__landing-gallery__item-26-enter-active { opacity: 1; transition: opacity 120ms ease-in 2366ms; } body .anim__landing-gallery__item-26-leave { opacity: 1; } body .anim__landing-gallery__item-26-leave.anim__landing-gallery__item-26-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-27-enter { opacity: 0; } body .anim__landing-gallery__item-27-enter.anim__landing-gallery__item-27-enter-active { opacity: 1; transition: opacity 120ms ease-in 2430ms; } body .anim__landing-gallery__item-27-leave { opacity: 1; } body .anim__landing-gallery__item-27-leave.anim__landing-gallery__item-27-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-28-enter { opacity: 0; } body .anim__landing-gallery__item-28-enter.anim__landing-gallery__item-28-enter-active { opacity: 1; transition: opacity 120ms ease-in 2492ms; } body .anim__landing-gallery__item-28-leave { opacity: 1; } body .anim__landing-gallery__item-28-leave.anim__landing-gallery__item-28-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-29-enter { opacity: 0; } body .anim__landing-gallery__item-29-enter.anim__landing-gallery__item-29-enter-active { opacity: 1; transition: opacity 120ms ease-in 2552ms; } body .anim__landing-gallery__item-29-leave { opacity: 1; } body .anim__landing-gallery__item-29-leave.anim__landing-gallery__item-29-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-30-enter { opacity: 0; } body .anim__landing-gallery__item-30-enter.anim__landing-gallery__item-30-enter-active { opacity: 1; transition: opacity 120ms ease-in 2610ms; } body .anim__landing-gallery__item-30-leave { opacity: 1; } body .anim__landing-gallery__item-30-leave.anim__landing-gallery__item-30-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-31-enter { opacity: 0; } body .anim__landing-gallery__item-31-enter.anim__landing-gallery__item-31-enter-active { opacity: 1; transition: opacity 120ms ease-in 2666ms; } body .anim__landing-gallery__item-31-leave { opacity: 1; } body .anim__landing-gallery__item-31-leave.anim__landing-gallery__item-31-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-32-enter { opacity: 0; } body .anim__landing-gallery__item-32-enter.anim__landing-gallery__item-32-enter-active { opacity: 1; transition: opacity 120ms ease-in 2720ms; } body .anim__landing-gallery__item-32-leave { opacity: 1; } body .anim__landing-gallery__item-32-leave.anim__landing-gallery__item-32-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-33-enter { opacity: 0; } body .anim__landing-gallery__item-33-enter.anim__landing-gallery__item-33-enter-active { opacity: 1; transition: opacity 120ms ease-in 2772ms; } body .anim__landing-gallery__item-33-leave { opacity: 1; } body .anim__landing-gallery__item-33-leave.anim__landing-gallery__item-33-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-34-enter { opacity: 0; } body .anim__landing-gallery__item-34-enter.anim__landing-gallery__item-34-enter-active { opacity: 1; transition: opacity 120ms ease-in 2822ms; } body .anim__landing-gallery__item-34-leave { opacity: 1; } body .anim__landing-gallery__item-34-leave.anim__landing-gallery__item-34-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-35-enter { opacity: 0; } body .anim__landing-gallery__item-35-enter.anim__landing-gallery__item-35-enter-active { opacity: 1; transition: opacity 120ms ease-in 2870ms; } body .anim__landing-gallery__item-35-leave { opacity: 1; } body .anim__landing-gallery__item-35-leave.anim__landing-gallery__item-35-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-36-enter { opacity: 0; } body .anim__landing-gallery__item-36-enter.anim__landing-gallery__item-36-enter-active { opacity: 1; transition: opacity 120ms ease-in 2916ms; } body .anim__landing-gallery__item-36-leave { opacity: 1; } body .anim__landing-gallery__item-36-leave.anim__landing-gallery__item-36-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-37-enter { opacity: 0; } body .anim__landing-gallery__item-37-enter.anim__landing-gallery__item-37-enter-active { opacity: 1; transition: opacity 120ms ease-in 2960ms; } body .anim__landing-gallery__item-37-leave { opacity: 1; } body .anim__landing-gallery__item-37-leave.anim__landing-gallery__item-37-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-38-enter { opacity: 0; } body .anim__landing-gallery__item-38-enter.anim__landing-gallery__item-38-enter-active { opacity: 1; transition: opacity 120ms ease-in 3002ms; } body .anim__landing-gallery__item-38-leave { opacity: 1; } body .anim__landing-gallery__item-38-leave.anim__landing-gallery__item-38-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-39-enter { opacity: 0; } body .anim__landing-gallery__item-39-enter.anim__landing-gallery__item-39-enter-active { opacity: 1; transition: opacity 120ms ease-in 3042ms; } body .anim__landing-gallery__item-39-leave { opacity: 1; } body .anim__landing-gallery__item-39-leave.anim__landing-gallery__item-39-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-40-enter { opacity: 0; } body .anim__landing-gallery__item-40-enter.anim__landing-gallery__item-40-enter-active { opacity: 1; transition: opacity 120ms ease-in 3080ms; } body .anim__landing-gallery__item-40-leave { opacity: 1; } body .anim__landing-gallery__item-40-leave.anim__landing-gallery__item-40-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-41-enter { opacity: 0; } body .anim__landing-gallery__item-41-enter.anim__landing-gallery__item-41-enter-active { opacity: 1; transition: opacity 120ms ease-in 3116ms; } body .anim__landing-gallery__item-41-leave { opacity: 1; } body .anim__landing-gallery__item-41-leave.anim__landing-gallery__item-41-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-42-enter { opacity: 0; } body .anim__landing-gallery__item-42-enter.anim__landing-gallery__item-42-enter-active { opacity: 1; transition: opacity 120ms ease-in 3150ms; } body .anim__landing-gallery__item-42-leave { opacity: 1; } body .anim__landing-gallery__item-42-leave.anim__landing-gallery__item-42-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-43-enter { opacity: 0; } body .anim__landing-gallery__item-43-enter.anim__landing-gallery__item-43-enter-active { opacity: 1; transition: opacity 120ms ease-in 3182ms; } body .anim__landing-gallery__item-43-leave { opacity: 1; } body .anim__landing-gallery__item-43-leave.anim__landing-gallery__item-43-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-44-enter { opacity: 0; } body .anim__landing-gallery__item-44-enter.anim__landing-gallery__item-44-enter-active { opacity: 1; transition: opacity 120ms ease-in 3212ms; } body .anim__landing-gallery__item-44-leave { opacity: 1; } body .anim__landing-gallery__item-44-leave.anim__landing-gallery__item-44-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-45-enter { opacity: 0; } body .anim__landing-gallery__item-45-enter.anim__landing-gallery__item-45-enter-active { opacity: 1; transition: opacity 120ms ease-in 3240ms; } body .anim__landing-gallery__item-45-leave { opacity: 1; } body .anim__landing-gallery__item-45-leave.anim__landing-gallery__item-45-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-46-enter { opacity: 0; } body .anim__landing-gallery__item-46-enter.anim__landing-gallery__item-46-enter-active { opacity: 1; transition: opacity 120ms ease-in 3266ms; } body .anim__landing-gallery__item-46-leave { opacity: 1; } body .anim__landing-gallery__item-46-leave.anim__landing-gallery__item-46-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-47-enter { opacity: 0; } body .anim__landing-gallery__item-47-enter.anim__landing-gallery__item-47-enter-active { opacity: 1; transition: opacity 120ms ease-in 3290ms; } body .anim__landing-gallery__item-47-leave { opacity: 1; } body .anim__landing-gallery__item-47-leave.anim__landing-gallery__item-47-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-48-enter { opacity: 0; } body .anim__landing-gallery__item-48-enter.anim__landing-gallery__item-48-enter-active { opacity: 1; transition: opacity 120ms ease-in 3312ms; } body .anim__landing-gallery__item-48-leave { opacity: 1; } body .anim__landing-gallery__item-48-leave.anim__landing-gallery__item-48-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-49-enter { opacity: 0; } body .anim__landing-gallery__item-49-enter.anim__landing-gallery__item-49-enter-active { opacity: 1; transition: opacity 120ms ease-in 3332ms; } body .anim__landing-gallery__item-49-leave { opacity: 1; } body .anim__landing-gallery__item-49-leave.anim__landing-gallery__item-49-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-50-enter { opacity: 0; } body .anim__landing-gallery__item-50-enter.anim__landing-gallery__item-50-enter-active { opacity: 1; transition: opacity 120ms ease-in 3350ms; } body .anim__landing-gallery__item-50-leave { opacity: 1; } body .anim__landing-gallery__item-50-leave.anim__landing-gallery__item-50-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-51-enter { opacity: 0; } body .anim__landing-gallery__item-51-enter.anim__landing-gallery__item-51-enter-active { opacity: 1; transition: opacity 120ms ease-in 3366ms; } body .anim__landing-gallery__item-51-leave { opacity: 1; } body .anim__landing-gallery__item-51-leave.anim__landing-gallery__item-51-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-52-enter { opacity: 0; } body .anim__landing-gallery__item-52-enter.anim__landing-gallery__item-52-enter-active { opacity: 1; transition: opacity 120ms ease-in 3380ms; } body .anim__landing-gallery__item-52-leave { opacity: 1; } body .anim__landing-gallery__item-52-leave.anim__landing-gallery__item-52-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-53-enter { opacity: 0; } body .anim__landing-gallery__item-53-enter.anim__landing-gallery__item-53-enter-active { opacity: 1; transition: opacity 120ms ease-in 3392ms; } body .anim__landing-gallery__item-53-leave { opacity: 1; } body .anim__landing-gallery__item-53-leave.anim__landing-gallery__item-53-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-54-enter { opacity: 0; } body .anim__landing-gallery__item-54-enter.anim__landing-gallery__item-54-enter-active { opacity: 1; transition: opacity 120ms ease-in 3402ms; } body .anim__landing-gallery__item-54-leave { opacity: 1; } body .anim__landing-gallery__item-54-leave.anim__landing-gallery__item-54-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-55-enter { opacity: 0; } body .anim__landing-gallery__item-55-enter.anim__landing-gallery__item-55-enter-active { opacity: 1; transition: opacity 120ms ease-in 3410ms; } body .anim__landing-gallery__item-55-leave { opacity: 1; } body .anim__landing-gallery__item-55-leave.anim__landing-gallery__item-55-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-56-enter { opacity: 0; } body .anim__landing-gallery__item-56-enter.anim__landing-gallery__item-56-enter-active { opacity: 1; transition: opacity 120ms ease-in 3416ms; } body .anim__landing-gallery__item-56-leave { opacity: 1; } body .anim__landing-gallery__item-56-leave.anim__landing-gallery__item-56-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-57-enter { opacity: 0; } body .anim__landing-gallery__item-57-enter.anim__landing-gallery__item-57-enter-active { opacity: 1; transition: opacity 120ms ease-in 3420ms; } body .anim__landing-gallery__item-57-leave { opacity: 1; } body .anim__landing-gallery__item-57-leave.anim__landing-gallery__item-57-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-58-enter { opacity: 0; } body .anim__landing-gallery__item-58-enter.anim__landing-gallery__item-58-enter-active { opacity: 1; transition: opacity 120ms ease-in 3422ms; } body .anim__landing-gallery__item-58-leave { opacity: 1; } body .anim__landing-gallery__item-58-leave.anim__landing-gallery__item-58-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-59-enter { opacity: 0; } body .anim__landing-gallery__item-59-enter.anim__landing-gallery__item-59-enter-active { opacity: 1; transition: opacity 120ms ease-in 3422ms; } body .anim__landing-gallery__item-59-leave { opacity: 1; } body .anim__landing-gallery__item-59-leave.anim__landing-gallery__item-59-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-60-enter { opacity: 0; } body .anim__landing-gallery__item-60-enter.anim__landing-gallery__item-60-enter-active { opacity: 1; transition: opacity 120ms ease-in 3420ms; } body .anim__landing-gallery__item-60-leave { opacity: 1; } body .anim__landing-gallery__item-60-leave.anim__landing-gallery__item-60-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-61-enter { opacity: 0; } body .anim__landing-gallery__item-61-enter.anim__landing-gallery__item-61-enter-active { opacity: 1; transition: opacity 120ms ease-in 3416ms; } body .anim__landing-gallery__item-61-leave { opacity: 1; } body .anim__landing-gallery__item-61-leave.anim__landing-gallery__item-61-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-62-enter { opacity: 0; } body .anim__landing-gallery__item-62-enter.anim__landing-gallery__item-62-enter-active { opacity: 1; transition: opacity 120ms ease-in 3410ms; } body .anim__landing-gallery__item-62-leave { opacity: 1; } body .anim__landing-gallery__item-62-leave.anim__landing-gallery__item-62-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-63-enter { opacity: 0; } body .anim__landing-gallery__item-63-enter.anim__landing-gallery__item-63-enter-active { opacity: 1; transition: opacity 120ms ease-in 3402ms; } body .anim__landing-gallery__item-63-leave { opacity: 1; } body .anim__landing-gallery__item-63-leave.anim__landing-gallery__item-63-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-64-enter { opacity: 0; } body .anim__landing-gallery__item-64-enter.anim__landing-gallery__item-64-enter-active { opacity: 1; transition: opacity 120ms ease-in 3392ms; } body .anim__landing-gallery__item-64-leave { opacity: 1; } body .anim__landing-gallery__item-64-leave.anim__landing-gallery__item-64-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-65-enter { opacity: 0; } body .anim__landing-gallery__item-65-enter.anim__landing-gallery__item-65-enter-active { opacity: 1; transition: opacity 120ms ease-in 3380ms; } body .anim__landing-gallery__item-65-leave { opacity: 1; } body .anim__landing-gallery__item-65-leave.anim__landing-gallery__item-65-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-66-enter { opacity: 0; } body .anim__landing-gallery__item-66-enter.anim__landing-gallery__item-66-enter-active { opacity: 1; transition: opacity 120ms ease-in 3366ms; } body .anim__landing-gallery__item-66-leave { opacity: 1; } body .anim__landing-gallery__item-66-leave.anim__landing-gallery__item-66-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-67-enter { opacity: 0; } body .anim__landing-gallery__item-67-enter.anim__landing-gallery__item-67-enter-active { opacity: 1; transition: opacity 120ms ease-in 3350ms; } body .anim__landing-gallery__item-67-leave { opacity: 1; } body .anim__landing-gallery__item-67-leave.anim__landing-gallery__item-67-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-68-enter { opacity: 0; } body .anim__landing-gallery__item-68-enter.anim__landing-gallery__item-68-enter-active { opacity: 1; transition: opacity 120ms ease-in 3332ms; } body .anim__landing-gallery__item-68-leave { opacity: 1; } body .anim__landing-gallery__item-68-leave.anim__landing-gallery__item-68-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-69-enter { opacity: 0; } body .anim__landing-gallery__item-69-enter.anim__landing-gallery__item-69-enter-active { opacity: 1; transition: opacity 120ms ease-in 3312ms; } body .anim__landing-gallery__item-69-leave { opacity: 1; } body .anim__landing-gallery__item-69-leave.anim__landing-gallery__item-69-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-70-enter { opacity: 0; } body .anim__landing-gallery__item-70-enter.anim__landing-gallery__item-70-enter-active { opacity: 1; transition: opacity 120ms ease-in 3290ms; } body .anim__landing-gallery__item-70-leave { opacity: 1; } body .anim__landing-gallery__item-70-leave.anim__landing-gallery__item-70-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-71-enter { opacity: 0; } body .anim__landing-gallery__item-71-enter.anim__landing-gallery__item-71-enter-active { opacity: 1; transition: opacity 120ms ease-in 3266ms; } body .anim__landing-gallery__item-71-leave { opacity: 1; } body .anim__landing-gallery__item-71-leave.anim__landing-gallery__item-71-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-72-enter { opacity: 0; } body .anim__landing-gallery__item-72-enter.anim__landing-gallery__item-72-enter-active { opacity: 1; transition: opacity 120ms ease-in 3240ms; } body .anim__landing-gallery__item-72-leave { opacity: 1; } body .anim__landing-gallery__item-72-leave.anim__landing-gallery__item-72-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-73-enter { opacity: 0; } body .anim__landing-gallery__item-73-enter.anim__landing-gallery__item-73-enter-active { opacity: 1; transition: opacity 120ms ease-in 3212ms; } body .anim__landing-gallery__item-73-leave { opacity: 1; } body .anim__landing-gallery__item-73-leave.anim__landing-gallery__item-73-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-74-enter { opacity: 0; } body .anim__landing-gallery__item-74-enter.anim__landing-gallery__item-74-enter-active { opacity: 1; transition: opacity 120ms ease-in 3182ms; } body .anim__landing-gallery__item-74-leave { opacity: 1; } body .anim__landing-gallery__item-74-leave.anim__landing-gallery__item-74-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-75-enter { opacity: 0; } body .anim__landing-gallery__item-75-enter.anim__landing-gallery__item-75-enter-active { opacity: 1; transition: opacity 120ms ease-in 3150ms; } body .anim__landing-gallery__item-75-leave { opacity: 1; } body .anim__landing-gallery__item-75-leave.anim__landing-gallery__item-75-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-76-enter { opacity: 0; } body .anim__landing-gallery__item-76-enter.anim__landing-gallery__item-76-enter-active { opacity: 1; transition: opacity 120ms ease-in 3116ms; } body .anim__landing-gallery__item-76-leave { opacity: 1; } body .anim__landing-gallery__item-76-leave.anim__landing-gallery__item-76-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-77-enter { opacity: 0; } body .anim__landing-gallery__item-77-enter.anim__landing-gallery__item-77-enter-active { opacity: 1; transition: opacity 120ms ease-in 3080ms; } body .anim__landing-gallery__item-77-leave { opacity: 1; } body .anim__landing-gallery__item-77-leave.anim__landing-gallery__item-77-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-78-enter { opacity: 0; } body .anim__landing-gallery__item-78-enter.anim__landing-gallery__item-78-enter-active { opacity: 1; transition: opacity 120ms ease-in 3042ms; } body .anim__landing-gallery__item-78-leave { opacity: 1; } body .anim__landing-gallery__item-78-leave.anim__landing-gallery__item-78-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-79-enter { opacity: 0; } body .anim__landing-gallery__item-79-enter.anim__landing-gallery__item-79-enter-active { opacity: 1; transition: opacity 120ms ease-in 3002ms; } body .anim__landing-gallery__item-79-leave { opacity: 1; } body .anim__landing-gallery__item-79-leave.anim__landing-gallery__item-79-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-80-enter { opacity: 0; } body .anim__landing-gallery__item-80-enter.anim__landing-gallery__item-80-enter-active { opacity: 1; transition: opacity 120ms ease-in 2960ms; } body .anim__landing-gallery__item-80-leave { opacity: 1; } body .anim__landing-gallery__item-80-leave.anim__landing-gallery__item-80-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-81-enter { opacity: 0; } body .anim__landing-gallery__item-81-enter.anim__landing-gallery__item-81-enter-active { opacity: 1; transition: opacity 120ms ease-in 2916ms; } body .anim__landing-gallery__item-81-leave { opacity: 1; } body .anim__landing-gallery__item-81-leave.anim__landing-gallery__item-81-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-82-enter { opacity: 0; } body .anim__landing-gallery__item-82-enter.anim__landing-gallery__item-82-enter-active { opacity: 1; transition: opacity 120ms ease-in 2870ms; } body .anim__landing-gallery__item-82-leave { opacity: 1; } body .anim__landing-gallery__item-82-leave.anim__landing-gallery__item-82-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-83-enter { opacity: 0; } body .anim__landing-gallery__item-83-enter.anim__landing-gallery__item-83-enter-active { opacity: 1; transition: opacity 120ms ease-in 2822ms; } body .anim__landing-gallery__item-83-leave { opacity: 1; } body .anim__landing-gallery__item-83-leave.anim__landing-gallery__item-83-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-84-enter { opacity: 0; } body .anim__landing-gallery__item-84-enter.anim__landing-gallery__item-84-enter-active { opacity: 1; transition: opacity 120ms ease-in 2772ms; } body .anim__landing-gallery__item-84-leave { opacity: 1; } body .anim__landing-gallery__item-84-leave.anim__landing-gallery__item-84-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-85-enter { opacity: 0; } body .anim__landing-gallery__item-85-enter.anim__landing-gallery__item-85-enter-active { opacity: 1; transition: opacity 120ms ease-in 2720ms; } body .anim__landing-gallery__item-85-leave { opacity: 1; } body .anim__landing-gallery__item-85-leave.anim__landing-gallery__item-85-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-86-enter { opacity: 0; } body .anim__landing-gallery__item-86-enter.anim__landing-gallery__item-86-enter-active { opacity: 1; transition: opacity 120ms ease-in 2666ms; } body .anim__landing-gallery__item-86-leave { opacity: 1; } body .anim__landing-gallery__item-86-leave.anim__landing-gallery__item-86-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-87-enter { opacity: 0; } body .anim__landing-gallery__item-87-enter.anim__landing-gallery__item-87-enter-active { opacity: 1; transition: opacity 120ms ease-in 2610ms; } body .anim__landing-gallery__item-87-leave { opacity: 1; } body .anim__landing-gallery__item-87-leave.anim__landing-gallery__item-87-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-88-enter { opacity: 0; } body .anim__landing-gallery__item-88-enter.anim__landing-gallery__item-88-enter-active { opacity: 1; transition: opacity 120ms ease-in 2552ms; } body .anim__landing-gallery__item-88-leave { opacity: 1; } body .anim__landing-gallery__item-88-leave.anim__landing-gallery__item-88-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-89-enter { opacity: 0; } body .anim__landing-gallery__item-89-enter.anim__landing-gallery__item-89-enter-active { opacity: 1; transition: opacity 120ms ease-in 2492ms; } body .anim__landing-gallery__item-89-leave { opacity: 1; } body .anim__landing-gallery__item-89-leave.anim__landing-gallery__item-89-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-90-enter { opacity: 0; } body .anim__landing-gallery__item-90-enter.anim__landing-gallery__item-90-enter-active { opacity: 1; transition: opacity 120ms ease-in 2430ms; } body .anim__landing-gallery__item-90-leave { opacity: 1; } body .anim__landing-gallery__item-90-leave.anim__landing-gallery__item-90-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-91-enter { opacity: 0; } body .anim__landing-gallery__item-91-enter.anim__landing-gallery__item-91-enter-active { opacity: 1; transition: opacity 120ms ease-in 2366ms; } body .anim__landing-gallery__item-91-leave { opacity: 1; } body .anim__landing-gallery__item-91-leave.anim__landing-gallery__item-91-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-92-enter { opacity: 0; } body .anim__landing-gallery__item-92-enter.anim__landing-gallery__item-92-enter-active { opacity: 1; transition: opacity 120ms ease-in 2300ms; } body .anim__landing-gallery__item-92-leave { opacity: 1; } body .anim__landing-gallery__item-92-leave.anim__landing-gallery__item-92-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-93-enter { opacity: 0; } body .anim__landing-gallery__item-93-enter.anim__landing-gallery__item-93-enter-active { opacity: 1; transition: opacity 120ms ease-in 2232ms; } body .anim__landing-gallery__item-93-leave { opacity: 1; } body .anim__landing-gallery__item-93-leave.anim__landing-gallery__item-93-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-94-enter { opacity: 0; } body .anim__landing-gallery__item-94-enter.anim__landing-gallery__item-94-enter-active { opacity: 1; transition: opacity 120ms ease-in 2162ms; } body .anim__landing-gallery__item-94-leave { opacity: 1; } body .anim__landing-gallery__item-94-leave.anim__landing-gallery__item-94-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-95-enter { opacity: 0; } body .anim__landing-gallery__item-95-enter.anim__landing-gallery__item-95-enter-active { opacity: 1; transition: opacity 120ms ease-in 2090ms; } body .anim__landing-gallery__item-95-leave { opacity: 1; } body .anim__landing-gallery__item-95-leave.anim__landing-gallery__item-95-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-96-enter { opacity: 0; } body .anim__landing-gallery__item-96-enter.anim__landing-gallery__item-96-enter-active { opacity: 1; transition: opacity 120ms ease-in 2016ms; } body .anim__landing-gallery__item-96-leave { opacity: 1; } body .anim__landing-gallery__item-96-leave.anim__landing-gallery__item-96-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-97-enter { opacity: 0; } body .anim__landing-gallery__item-97-enter.anim__landing-gallery__item-97-enter-active { opacity: 1; transition: opacity 120ms ease-in 1940ms; } body .anim__landing-gallery__item-97-leave { opacity: 1; } body .anim__landing-gallery__item-97-leave.anim__landing-gallery__item-97-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-98-enter { opacity: 0; } body .anim__landing-gallery__item-98-enter.anim__landing-gallery__item-98-enter-active { opacity: 1; transition: opacity 120ms ease-in 1862ms; } body .anim__landing-gallery__item-98-leave { opacity: 1; } body .anim__landing-gallery__item-98-leave.anim__landing-gallery__item-98-leave-active { opacity: 0; transition: opacity 0ms; } body .anim__landing-gallery__item-99-enter { opacity: 0; } body .anim__landing-gallery__item-99-enter.anim__landing-gallery__item-99-enter-active { opacity: 1; transition: opacity 120ms ease-in 1782ms; } body .anim__landing-gallery__item-99-leave { opacity: 1; } body .anim__landing-gallery__item-99-leave.anim__landing-gallery__item-99-leave-active { opacity: 0; transition: opacity 0ms; } .landing-gallery-cont-leave { opacity: 1; } .landing-gallery-cont-leave.landing-gallery-cont-leave-active { opacity: 0; transition: opacity 500ms ease-in; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (min-width: 1px) { .landing-gallery { margin: 0 37px -52px; transform: translateY(-38px); } .landing-gallery__column { padding: 0 18.5px; } .landing-gallery--hov { transform: translateY(-55px); cursor: url("/static/icons/arrows/47x47/arrow_down.svg") 23.5 0, pointer; } .landing-gallery--active { transform: translateY(0px); cursor: normal; } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2355px) { .landing-gallery { margin: 0 36px -50px; transform: translateY(-36px); } .landing-gallery__column { padding: 0 18px; } .landing-gallery--hov { transform: translateY(-54px); cursor: url("/static/icons/arrows/47x47/arrow_down.svg") 23.5 0, pointer; } .landing-gallery--active { transform: translateY(0px); cursor: normal; } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 2035px) { .landing-gallery { margin: 0 35px -48px; transform: translateY(-34px); } .landing-gallery__column { padding: 0 17.5px; } .landing-gallery--hov { transform: translateY(-51px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1760px) { .landing-gallery { margin: 0 34px -46px; transform: translateY(-33px); } .landing-gallery__column { padding: 0 17px; } .landing-gallery--hov { transform: translateY(-50px); cursor: url("/static/icons/arrows/43x43/arrow_down.svg") 21.5 0, pointer; } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1490px) { .landing-gallery { margin: 0 33px -42px; transform: translateY(-31px); } .landing-gallery__column { padding: 0 16.5px; } .landing-gallery--hov { transform: translateY(-45px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1279px) { .landing-gallery { margin: 0 32px -39px; transform: translateY(-28px); } .landing-gallery__column { padding: 0 16px; } .landing-gallery--hov { transform: translateY(-42px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1129px) { .landing-gallery { margin: 0 31px -36px; transform: translateY(-28px); } .landing-gallery__column { padding: 0 15.5px; } .landing-gallery--hov { transform: translateY(-40px); cursor: url("/static/icons/arrows/38x38/arrow_down.svg") 19 0, pointer; } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 1009px) { .landing-gallery { margin: 0 30px -34px; transform: translateY(-26px); } .landing-gallery__column { padding: 0 15px; } .landing-gallery--hov { transform: translateY(-37px); cursor: url("/static/icons/arrows/34x34/arrow_down.svg") 17 0, pointer; } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 906px) { .landing-gallery { margin: 0 29px -32px; transform: translateY(-25px); } .landing-gallery__column { padding: 0 14.5px; } .landing-gallery--hov { transform: translateY(-35px); cursor: url("/static/icons/arrows/30x30/arrow_down.svg") 15 0, pointer; } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 798px) { .landing-gallery { margin: 0 28px -30px; transform: translateY(-24px); } .landing-gallery__column { padding: 0 14px; } .landing-gallery--hov { transform: translateY(-33px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 610px) { .landing-gallery { margin: 0 27px -28px; transform: translateY(-21px); } .landing-gallery__column { padding: 0 13.5px; } .landing-gallery--hov { transform: translateY(-30px); cursor: url("/static/icons/arrows/27x27/arrow_down.svg") 13.5 0, pointer; } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 556px) { .landing-gallery { margin: 0 26px -32px; transform: translateY(-21px); } .landing-gallery__column { padding: 0 13px; } .landing-gallery--hov { transform: translateY(-30px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 481px) { .landing-gallery { margin: 0 23px -28px; transform: translateY(-21px); } .landing-gallery__column { padding: 0 11.5px; } .landing-gallery--hov { transform: translateY(-30px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 414px) { .landing-gallery { margin: 0 18px -25px; transform: translateY(-21px); } .landing-gallery__column { padding: 0 9px; } .landing-gallery--hov { transform: translateY(-30px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 375px) { .landing-gallery { margin: 0 17px -22px; transform: translateY(-21px); } .landing-gallery__column { padding: 0 8.5px; } .landing-gallery--hov { transform: translateY(-30px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ @media screen and (max-width: 320px) { .landing-gallery { margin: 0 16px -19px; transform: translateY(-21px); } .landing-gallery__column { padding: 0 8px; } .landing-gallery--hov { transform: translateY(-30px); } .landing-gallery--active { transform: translateY(0px); } .landing-gallery-cont-appear { transform: translateY(0px); } .landing-gallery-cont-appear.landing-gallery-cont-appear-active { transform: translateY(0px); transition: transform 500ms ease-in 4500ms; } } .anim__searchbar-leave { opacity: 1; } .anim__searchbar-leave.anim__searchbar-leave-active { opacity: 0; transition: opacity 100ms ease-in; } .anim__searchbar-enter { opacity: 0; transition: opacity 200ms ease-in; } .anim__searchbar-enter.anim__searchbar-enter-active { opacity: 1; } .anim__searchbar--refreshed-leave { opacity: 1; } .anim__searchbar--refreshed-leave.anim__searchbar--refreshed-leave-active { opacity: 0; transition: opacity 100ms ease-in; } .anim__searchbar--refreshed-enter { opacity: 0; transition: opacity 250ms ease-in 1000ms; } .anim__searchbar--refreshed-enter.anim__searchbar--refreshed-enter-active { opacity: 1; } .anim__searchbar--refreshed-appear { opacity: 0; transition: opacity 250ms ease-in 3850ms; } .anim__searchbar--refreshed-appear .searchbar__icon { opacity: 0; transition: opacity 250ms ease-in 3950ms; } .anim__searchbar--refreshed-appear.anim__searchbar--refreshed-appear-active { opacity: 1; } .anim__searchbar--refreshed-appear.anim__searchbar--refreshed-appear-active .searchbar__icon { opacity: 1; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .loading { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; box-sizing: border-box; z-index: 9999; } .loading__logo { opacity: 0; width: 200px; animation: fadeIn 700ms ease-in 300ms forwards; } @media screen and (min-width: 1px) { .loading__passafiume svg { width: 159px; height: 32px; } } @media screen and (max-width: 2355px) { .loading__passafiume svg { width: 154px; height: 31px; } } @media screen and (max-width: 2035px) { .loading__passafiume svg { width: 150px; height: 30px; } } @media screen and (max-width: 1760px) { .loading__passafiume svg { width: 144px; height: 29px; } } @media screen and (max-width: 1490px) { .loading__passafiume svg { width: 139px; height: 28px; } } @media screen and (max-width: 1279px) { .loading__passafiume svg { width: 134px; height: 27px; } } @media screen and (max-width: 1129px) { .loading__passafiume svg { width: 129px; height: 26px; } } @media screen and (max-width: 1009px) { .loading__passafiume svg { width: 124px; height: 25px; } } @media screen and (max-width: 906px) { .loading__passafiume svg { width: 119px; height: 24px; } } @media screen and (max-width: 798px) { .loading__passafiume svg { width: 119px; height: 24px; } } @media screen and (max-width: 773px) { .loading__passafiume svg { width: 109px; height: 22px; } } @media screen and (max-width: 610px) { .loading__passafiume svg { width: 104px; height: 21px; } } @media screen and (max-width: 556px) { .loading__passafiume svg { width: 119px; height: 24px; } } @media screen and (max-width: 481px) { .loading__passafiume svg { width: 114px; height: 23px; } } @media screen and (max-width: 414px) { .loading__passafiume svg { width: 99px; height: 20px; } } @media screen and (max-width: 320px) { .loading__passafiume svg { width: 85px; height: 17px; } } .loading__message { opacity: 0; width: 83vw; text-align: center; animation: fadeIn 500ms ease-in forwards; } @media screen and (min-width: 1px) { .loading__message { font-size: 30px; } } @media screen and (max-width: 2355px) { .loading__message { font-size: 29px; } } @media screen and (max-width: 2035px) { .loading__message { font-size: 28px; } } @media screen and (max-width: 1760px) { .loading__message { font-size: 27px; } } @media screen and (max-width: 1490px) { .loading__message { font-size: 26px; } } @media screen and (max-width: 1279px) { .loading__message { font-size: 25px; } } @media screen and (max-width: 1129px) { .loading__message { font-size: 24px; } } @media screen and (max-width: 1009px) { .loading__message { font-size: 24px; } } @media screen and (max-width: 906px) { .loading__message { max-width: 550px; font-size: 23px; } } @media screen and (max-width: 556px) { .loading__message { font-size: 24px; } } @media screen and (max-width: 481px) { .loading__message { font-size: 22px; padding-bottom: 50px; } } @media screen and (max-width: 414px) { .loading__message { font-size: 20px; } } @media screen and (max-width: 320px) { .loading__message { font-size: 18px; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ body { margin-left: calc(var(--item-number) * 60px); } .anim_press-section__item-enter { opacity: 0.01; } .anim_press-section__item-enter.anim_press-section__item-enter-active { opacity: 1; transition: opacity 300ms ease-in; } .anim_press-section__item-leave { opacity: 1; } .anim_press-section__item-leave.anim_press-section__item-leave-active { opacity: 0; transition: opacity 0ms ease-in; } @media screen and (min-width: 1px) { .press-content { padding-top: 170px; min-height: calc(100vh - 200px); } } @media screen and (max-width: 2355px) { .press-content { padding-top: 170px; min-height: calc(100vh - 202px); } } @media screen and (max-width: 2035px) { .press-content { padding-top: 160px; min-height: calc(100vh - 189px); } } @media screen and (max-width: 1760px) { .press-content { padding-top: 151px; min-height: calc(100vh - 178px); } } @media screen and (max-width: 1490px) { .press-content { padding-top: 143px; min-height: calc(100vh - 167px); } } @media screen and (max-width: 1279px) { .press-content { padding-top: 134px; min-height: calc(100vh - 155px); } } @media screen and (max-width: 1129px) { .press-content { padding-top: 128px; min-height: calc(100vh - 147px); } } @media screen and (max-width: 1009px) { .press-content { padding-top: 123px; min-height: calc(100vh - 140px); } } @media screen and (max-width: 906px) { .press-content { padding-top: 119px; min-height: calc(100vh - 135px); } } @media screen and (max-width: 798px) { .press-content { padding-top: 115px; min-height: calc(100vh - 128px); } } @media screen and (max-width: 667px) { .press-content { padding-top: 112px; min-height: calc(100vh - 125px); } } @media screen and (max-width: 610px) { .press-content { padding-top: 108px; min-height: calc(100vh - 118px); } } @media screen and (max-width: 556px) { .press-content { padding-top: 177px; min-height: calc(100vh - 187px); } } @media screen and (max-width: 481px) { .press-content { padding-top: 156px; min-height: calc(100vh - 162px); } } @media screen and (max-width: 414px) { .press-content { padding-top: 127px; min-height: calc(100vh - 131px); } } @media screen and (max-width: 375px) { .press-content { padding-top: 125px; min-height: calc(100vh - 129px); } } @media screen and (max-width: 320px) { .press-content { padding-top: 111px; min-height: calc(100vh - 115px); } } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .project-section__category { position: fixed; left: 30px; bottom: 20px; color: #bcbcbc; transition-duration: 300ms; } .project-section__category:hover { color: #8e8e8e; transition-duration: 300ms; cursor: pointer; } .project-content { margin-top: 150px; } /* ------------------------------------------------------------------ */ /* FONTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* COLORS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* TRANSITIONS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* LANDING /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* BREAKPOINTS /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* MEDIA QUERIES /* ------------------------------------------------------------------ */ .studio-section__featured-image-background { width: 100%; background-color: #ffffff; position: relative; } .studio-section__featured-image { width: 100%; display: block; position: absolute; } .studio-section__content { color: #8e8e8e; } .studio-section__content strong { transition-duration: 300ms; } .studio-section__credits { color: #8e8e8e; } .studio-section__credits:last-child { margin-bottom: 0px; } .studio-section .bottom strong { color: #8e8e8e; transition-duration: 300ms; } @media screen and (min-width: 1px) { .studio-section__featured-image-background { margin-top: 38px; } .studio-section__content { font-size: 28px; margin: 44px 0 37px; } .studio-section__credits { font-size: 22px; } } @media screen and (max-width: 2355px) { .studio-section__featured-image-background { margin-top: 37px; } .studio-section__content { font-size: 27px; margin: 42px 0 35px; } .studio-section__credits { font-size: 21px; } } @media screen and (max-width: 2035px) { .studio-section__featured-image-background { margin-top: 36px; } .studio-section__content { font-size: 26px; margin: 40px 0 34px; } .studio-section__credits { font-size: 20px; } } @media screen and (max-width: 1760px) { .studio-section__featured-image-background { margin-top: 35px; } .studio-section__content { font-size: 25px; margin: 38px 0 33px; } .studio-section__credits { font-size: 19px; } } @media screen and (max-width: 1490px) { .studio-section__featured-image-background { margin-top: 34px; } .studio-section__content { font-size: 24px; margin: 35px 0 32px; } .studio-section__credits { font-size: 19px; } } @media screen and (max-width: 1279px) { .studio-section__featured-image-background { margin-top: 33px; } .studio-section__content { font-size: 23px; margin: 31px 0 30px; } .studio-section__credits { font-size: 18px; } } @media screen and (max-width: 1129px) { .studio-section__featured-image-background { margin-top: 32px; } .studio-section__content { font-size: 22px; margin: 30px 0 29px; } .studio-section__credits { font-size: 17px; } } @media screen and (max-width: 1009px) { .studio-section__featured-image-background { margin-top: 31px; } .studio-section__content { font-size: 21px; margin: 28px 0 27px; } .studio-section__credits { font-size: 16px; } } @media screen and (max-width: 906px) { .studio-section__featured-image-background { margin-top: 30px; } .studio-section__content { font-size: 20px; margin: 27px 0 26px; } .studio-section__credits { font-size: 16px; } } @media screen and (max-width: 798px) { .studio-section__featured-image-background { margin-top: 29px; } .studio-section__content { font-size: 20px; margin: 25px 0 25px; } .studio-section__credits { font-size: 16px; } } @media screen and (max-width: 610px) { .studio-section__featured-image-background { margin-top: 28px; } .studio-section__content { font-size: 20px; margin: 24px 0 25px; } .studio-section__credits { font-size: 16px; } } @media screen and (max-width: 556px) { .studio-section__featured-image-background { margin-top: 96px; } .studio-section__content { font-size: 22px; margin: 27px 0 28px; } .studio-section__credits { font-size: 17px; } } @media screen and (max-width: 481px) { .studio-section__featured-image-background { margin-top: 87px; } .studio-section__content { font-size: 20px; margin: 26px 0 23px; } .studio-section__credits { font-size: 16px; } } @media screen and (max-width: 414px) { .studio-section__featured-image-background { margin-top: 72px; } .studio-section__content { font-size: 18px; margin: 20px 0 22px; } .studio-section__credits { font-size: 14px; } } @media screen and (max-width: 375px) { .studio-section__featured-image-background { margin-top: 71px; } .studio-section__content { font-size: 18px; margin: 18px 0 22px; } .studio-section__credits { font-size: 14px; } } @media screen and (max-width: 320px) { .studio-section__featured-image-background { margin-top: 65px; } .studio-section__content { font-size: 16px; margin: 15px 0 10px; } .studio-section__credits { font-size: 12px; } }