html, body, * {
    padding: 0;
    margin: 0
}

html::-webkit-scrollbar, body::-webkit-scrollbar, .scrollMe::-webkit-scrollbar, .gem-baby-container::-webkit-scrollbar {
    display: none
}

html, body, .scrollMe, .gem-baby-container {
    -ms-overflow-style: none;
    scrollbar-width: none
}

body {
    overflow-x: clip;
    background: #FFF;
    /* font-family:bebas-neue-pro-semiexpanded,sans-serif; */
    font-family: "Roboto", sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
h1, h2, h3, h4, h5, .hello h3~p{
    letter-spacing: -2px;
}

body>.home {
    padding: 0
}

span::selection, p::selection, a::selection, h1::selection, h2::selection, h3::selection, h4::selection, .role li::selection, .ul li::selection, strong::selection, .name::selection, .job::selection, .switch-labels label::selection {
    color: #FFF;
    background: #ff9300
}

.contact .hello h3::selection, .contact .hello p::selection, .projects .hello h3::selection, .projects .hello p::selection, .case .bg-color p.fw::selection, .gem h3::selection, .gem p::selection {
    color: #ff9300;
    background: #FFF
}

li p::selection, .doodles h3::selection, .doodles h3 span::selection, .case .bg-color .layer-order p::selection, .bootcamps h3::selection {
    color: #FFF
}

.contact .hello a::selection, .projects .hello a::selection, .case .case-container .switch-radio input[type=radio]:checked.option1~.switch-labels label:nth-child(1)::selection {
    color: #FFF;
    background: #ff84c2
}

.tosmallbaby {
    display: none
}

@media(min-width:300px) and (max-height:350px), (min-width:600px) and (max-height:450px), (max-width:300px) {
    html body {
        padding: 0
    }

    html body.menu {
        overflow: scroll
    }

    html body .site, html body footer {
        position: relative;
        display: none;
        overflow: hidden
    }

    html body .tosmallbaby {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        cursor: default;
        background: #1d1d1b url(../../assets/img/tosmallbaby@2x.png) no-repeat center center;
        background-size: 458px auto;
        z-index: 200
    }

    html body .tosmallbaby span {
        display: none
    }
}

.scroll-page {
    position: relative;
    text-align: center;
    z-index: 30
}

.scroll-page .scrolltotop {
    display: inline-block;
    text-indent: -999999px;
    background: url(../../assets/img/worm-up@2x.png) no-repeat 0 0;
    animation: bounce 1700ms ease infinite;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}

.scroll-page .shadow {
    position: relative;
    left: 50%;
    display: block;
    background: url(../../assets/img/worm-up@2x.png) no-repeat 0 bottom;
    animation: shadow 1700ms ease infinite
}

@keyframes bounce {
    0% {
        transform: scale(1, 1) translateY(0)
    }

    10% {
        transform: scale(1.1, 0.9) translateY(0)
    }

    30% {
        transform: scale(0.9, 1.1) translateY(-100px)
    }

    50% {
        transform: scale(1.05, 0.95) translateY(0)
    }

    57% {
        transform: scale(1, 1) translateY(-10px)
    }

    64% {
        transform: scale(1, 1) translateY(0)
    }

    100% {
        transform: scale(1, 1) translateY(0)
    }
}

@keyframes shadow {
    0% {
        transform: scaleX(1)
    }

    10% {
        transform: scaleX(0.9)
    }

    30% {
        transform: scaleX(0.5)
    }

    50% {
        transform: scaleX(0.9)
    }

    57% {
        transform: scaleX(0.8)
    }

    64% {
        transform: scaleX(1)
    }

    100% {
        transform: scaleX(1)
    }
}

@media(min-width:300px) {
    .scroll-page {
        margin: 0 0 100px;
        padding-top: 40px
    }

    .scroll-page .scrolltotop {
        width: 90px;
        height: 135px;
        margin: 0 0 0 10px;
        background-size: 90px 150px
    }

    .scroll-page .shadow {
        width: 90px;
        height: 18px;
        margin: 0 0 0 -40px;
        background-size: 90px 150px
    }
}

@media(min-width:600px) {
    .scroll-page {
        margin: 0 0 150px;
        padding-top: 60px
    }
}

@media(min-width:992px) {
    .scroll-page {
        margin: 0 0 150px;
        padding-top: 80px
    }

    .scroll-page .scrolltotop {
        width: 180px;
        height: 268px;
        margin: 0 0 0 50px;
        background-size: 180px 300px
    }

    .scroll-page .shadow {
        width: 180px;
        height: 38px;
        margin: 0 0 0 -60px;
        background-size: 180px 300px
    }
}

@media(min-width:1400px) {
    .scroll-page {
        margin: 0 0 150px;
        padding-top: 100px
    }
}

.btn, .fly {
    position: relative;
    display: inline-block;
    font-weight: 400;
    color: #FFF;
    text-decoration: none;
    background: #ff84c2;
    transition: all .2s ease;
    margin: 0 auto;
    white-space: nowrap
}

@media(hover:hover) {
    .btn:hover, .fly:hover {
        cursor: pointer;
        transform: scale(1.1);
        background: #1d1d1b;
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.4)
    }
}

.btn.arrow, .fly.arrow {
    text-align: left
}

.btn.arrow::before, .fly.arrow::before {
    position: absolute;
    content: "";
    display: block;
    border-radius: 50%;
    background: #FFF url(../../assets/img/ic-arrow.svg) no-repeat 8px center;
    z-index: 20;
    transition: all .2s ease
}

.btn.c-steady-pink, .fly.c-steady-pink {
    color: #ff84c2;
    background: #FFF
}

@media(hover:hover) {
    .btn.c-steady-pink:hover, .fly.c-steady-pink:hover {
        color: #FFF;
        background: #ff84c2
    }
}

.btn.c-highlight, .fly.c-highlight {
    background: #ff9300
}

@media(hover:hover) {
    .btn.c-highlight:hover, .fly.c-highlight:hover {
        background: #1d1d1b
    }
}

.btn.c-steady-black, .fly.c-steady-black {
    color: #ff84c2;
    background: #FFF
}

@media(hover:hover) {
    .btn.c-steady-black:hover, .fly.c-steady-black:hover {
        color: #FFF;
        background: #1d1d1b
    }
}

.btn.c-steady-bo, .fly.c-steady-bo {
    color: #ff9300;
    background: #1d1d1b
}

@media(hover:hover) {
    .btn.c-steady-bo:hover, .fly.c-steady-bo:hover {
        color: #FFF;
        background: #ff9300
    }
}

.btn.refresh, .fly.refresh {
    padding: 0;
    background-image: url(../../assets/img/refresh.svg);
    background-repeat: no-repeat;
    background-position: center center
}

.btn.refresh span, .fly.refresh span {
    display: inline-block;
    width: 2px;
    height: 2px;
    overflow: hidden;
    text-indent: -9999px
}

.fly {
    unicode-bidi: bidi-override;
    direction: rtl
}

.fly span::before {
    content: "e"
}

.fly span::after {
    content: "laC"
}

.fly.do-it span {
    display: none
}

.fly.do-it::after {
    content: "12 21 90 25 6 13+"
}

@media(min-width:300px) {
    .btn, .fly {
        min-height: 50px;
        border-radius: 25px;
        padding: 0 20px;
        line-height: 46px;
        font-size: 24px;
    }

    .btn.small, .fly.small {
        min-height: 40px;
        border-radius: 20px;
        padding: 0 15px;
        line-height: 36px;
        font-size: 20px
    }

    .btn.arrow, .fly.arrow {
        margin: 0 10px 20px
    }

    .btn.arrow::before, .fly.arrow::before {
        display: none
    }

    .btn.refresh, .fly.refresh {
        width: 50px
    }
}
@media(min-width:300px) and (max-width: 991px) {
    .hello .content .btn {
        font-size: 21px
    }
}
@media(min-width:300px) and (max-width: 599px) {
    .showcase-overview-list .project .content p.desc,
    .showcase-overview-list .project .content p {
        font-size: 18px
    }
}
@media(min-width:600px) and (max-width: 730px) {
    .showcase-overview-list.square .project .content p.desc,
    .showcase-overview-list.square .project .content p {
        font-size: 14px;
        line-height: 18px;
    }
}
@media(min-width:600px) {
    .btn.arrow, .fly.arrow {
        padding: 0 20px 0 54px
    }

    .btn.arrow::before, .fly.arrow::before {
        display: block;
        top: 6px;
        left: 6px;
        width: 38px;
        height: 38px;
        background-size: 20px auto
    }
}

@media(min-width:992px) {
    .btn, .fly {
        min-height: 70px;
        border-radius: 35px;
        padding: 0 30px;
        line-height: 64px;
        font-size: 30px
    }

    .btn.small, .fly.small {
        min-height: 50px;
        border-radius: 25px;
        padding: 0 20px;
        line-height: 46px;
        font-size: 24px
    }

    .btn.arrow, .fly.arrow {
        padding: 0 30px 0 74px;
        margin: 0 20px 40px
    }

    .btn.arrow::before, .fly.arrow::before {
        top: 8px;
        left: 8px;
        width: 54px;
        height: 54px;
        background-size: 34px auto
    }
}

@media(min-width:992px) and (hover:hover) {
    .btn.arrow:hover, .fly.arrow:hover {
        padding: 0 40px;
        margin-left: 50px
    }

    .btn.arrow:hover::before, .fly.arrow:hover::before {
        left: -24px
    }
}

@media(min-width:992px) {
    .btn.refresh, .fly.refresh {
        width: 70px
    }
}

@media(min-width:1400px) {
    .btn, .fly {
        min-height: 80px;
        border-radius: 40px;
        padding: 0 40px;
        line-height: 74px;
        font-size: 40px
    }

    .btn.small, .fly.small {
        min-height: 60px;
        border-radius: 30px;
        padding: 0 20px;
        line-height: 56px;
        font-size: 30px
    }

    .btn.arrow, .fly.arrow {
        padding: 0 40px 0 90px
    }

    .btn.arrow::before, .fly.arrow::before {
        top: 10px;
        left: 10px;
        width: 60px;
        height: 60px;
        background-size: 40px auto
    }
}

@media(min-width:1400px) and (hover:hover) {
    .btn.arrow:hover, .fly.arrow:hover {
        padding: 0 40px;
        margin-left: 50px
    }

    .btn.arrow:hover::before, .fly.arrow:hover::before {
        left: -30px
    }
}

@media(min-width:1400px) {
    .btn.refresh, .fly.refresh {
        width: 80px
    }
}

body.hold-on {
    overflow: hidden
}

body.hold-on .anim {
    pointer-events: all
}

body.hold-on .site {
    pointer-events: none
}

body.hold-on .site * {
    pointer-events: none
}

body.hold-on .mouse {
    transform: scale(0.05);
    margin: -75px 0 0 -75px
}

.anim {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #FFF;
    z-index: 200;
    pointer-events: none
}

.anim .logo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 30px;
    left: 0;
    display: flex;
    justify-content: center
}

.anim .logo svg {
    transform: scale(10);
    opacity: 0;
    width: 300px
}

.anim h1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 50px;
    line-height: 40px;
    white-space: nowrap
}

.anim h1 span {
    display: inline-block;
    opacity: 0;
    color: #1d1d1b;
    transform: scale(3)
}

.anim h1 span.and {
    padding-left: 107px
}

.anim h1 span.rockets {
    padding-left: 147px
}

html body {
    cursor: none
}

html.mobile {
    cursor: auto
}

html.mobile .mouse {
    display: none
}

.mouse {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
    opacity: 1;
    background: #ff9300;
    border-radius: 50%;
    pointer-events: none;
    transition: background-color .5s ease, transform .3s ease, width .3s ease, height .3s ease, margin .3s ease;
    z-index: 110;
    mix-blend-mode: multiply;
    transform: scale(0.2)
}

.mouse .go, .mouse .hi, .mouse .love {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0
}

.mouse .go {
    text-align: center;
    font-size: 36px;
    line-height: 30px;
    margin-top: -4px
}

.mouse .hi {
    text-align: center;
    font-size: 36px;
    line-height: 30px;
    margin-top: -4px
}

.mouse .love {
    top: calc(50% - 40px);
    left: calc(50% - 30px);
    text-indent: -999px;
    overflow: hidden;
    width: 60px;
    height: 80px;
    background: url(../../assets/img/luv@2x.png) no-repeat 0 0;
    background-size: auto 80px;
    animation: luv .8s steps(7) infinite
}

@keyframes luv {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -420px 0
    }
}

.mouse-big .mouse, .mouse-small .mouse {
    opacity: .2
}

.mouse-project .project a, .mouse-project .showcase-overview-list a {
    cursor: none
}

.mouse-project .mouse {
    cursor: none;
    background: #FFF;
    mix-blend-mode: normal;
    box-shadow: 0 0 20px rgba(29, 29, 27, 0.3)
}

.mouse-project .mouse .go {
    opacity: 1
}

.mouse-me .mouse {
    cursor: none;
    color: #fff;
    background: #ff9300;
    mix-blend-mode: normal;
    box-shadow: 0 0 20px rgba(29, 29, 27, 0.3)
}

.mouse-me .mouse .hi {
    opacity: 1
}

.mouse-me.mouse-btn .me .box {
    background: #ff84c2
}

.mouse-doodles .mouse {
    cursor: none;
    background: 0
}

.mouse-doodles .mouse .love {
    opacity: 1
}

.mouse-btn .mouse, .mouse-me.mouse-btn .mouse {
    cursor: default;
    transform: scale(0)
}

.menu .mouse {
    background: #FFF;
    mix-blend-mode: normal
}

@media(min-width:300px) {
    .mouse-big .mouse {
        transform: scale(0.8)
    }

    .mouse-small .mouse {
        transform: scale(0.4)
    }

    .mouse-project .mouse, .mouse-me .mouse, .mouse-doodles .mouse {
        transform: scale(0.6)
    }
}

@media(min-width:992px) {
    .mouse-big .mouse {
        transform: scale(1)
    }

    .mouse-small .mouse {
        transform: scale(0.6)
    }

    .mouse-project .mouse, .mouse-me .mouse, .mouse-doodles .mouse {
        transform: scale(1)
    }
}

header.pink .logo svg {
    fill: #ff84c2
}

header.pink .burger::after {
    background-color: #ff84c2
}

header.orange .logo svg {
    fill: #ff9300
}

header.orange .burger::after {
    background-color: #ff9300
}

header {
    position: relative;
    z-index: 40;
    transition: opacity .3s ease
}

header .logo {
    position: fixed;
    transition: all .3s ease
}

header .logo svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    fill: #1d1d1b;
    transition: all .3s ease;
    color: #ff9300
}

header .logo.logo-overlay svg {
    fill: #FFF
}

@media(hover:hover) {
    header .logo:hover {
        transform: scale(1.3)
    }

    header .logo:hover svg {
        fill: #ff9300
    }
}

header .burger {
    position: fixed;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer
}

header .burger span {
    display: none;
    overflow: hidden;
    text-indent: -999px
}

header .burger::before {
    opacity: 0;
    position: absolute;
    content: "";
    display: block;
    border-radius: 20px;
    background: url(../../assets/img/hamburger.svg) no-repeat center;
    transition: all .2s ease 0s;
    z-index: 20
}

header .burger::after {
    position: absolute;
    top: 40px;
    left: 40px;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #1d1d1b;
    transition: all .2s ease .2s;
    z-index: 10
}

header .burger.burger-overlay::after {
    background-color: #FFF
}

@media(hover:hover) {
    header .burger:hover::before {
        opacity: 1;
        transition: all .2s ease .2s
    }

    header .burger:hover::after {
        opacity: 1;
        border-radius: 20px;
        background: #ff9300;
        transition: all .2s ease
    }
}

.logo-projects header .logo {
    top: 4px;
    left: 10px;
    transform: scale(0.5)
}

.logo-projects header .logo svg {
    fill: #FFF
}

.logo-projects header .logo::before {
    background: #1d1d1b
}

@media(min-width:300px) {
    header .logo {
        top: 25px;
        left: 25px;
        width: 60px;
        height: 73px
    }

    header .burger {
        top: 10px;
        right: 10px
    }

    header .burger::before {
        top: 5px;
        left: 35px;
        width: 30px;
        height: 90px
    }
}

@media(min-width:300px) and (hover:hover) {
    header .burger:hover::after {
        top: 5px;
        left: 35px;
        width: 30px;
        height: 90px
    }
}

@media(min-width:600px) {
    header .logo {
        top: 50px;
        left: 60px;
        width: 80px;
        height: 98px
    }

    header .burger {
        top: 30px;
        right: 30px
    }

    header .burger::before {
        top: -20px;
        left: 30px;
        width: 40px;
        height: 140px
    }
}

@media(min-width:600px) and (hover:hover) {
    header .burger:hover::after {
        top: -20px;
        left: 30px;
        width: 40px;
        height: 140px
    }
}

@media(min-width:992px) {
    header .logo {
        top: 70px;
        left: 80px;
        width: 100px;
        height: 122px
    }

    header .burger {
        top: 70px;
        right: 70px
    }
}

@media(min-width:1400px) {
    header .logo {
        top: 100px;
        left: 130px;
        width: 120px;
        height: 150px
    }

    header .burger {
        top: 110px;
        right: 110px
    }
}

body.menu {
    overflow: hidden
}

.menu header .logo, .animo header .logo {
    filter: none;
    pointer-events: none
}

.menu header .logo svg, .animo header .logo svg {
    fill: #FFF
}

.menu header .burger::before, .animo header .burger::before {
    background: url(../../assets/img/hamburger-close.svg) no-repeat center
}

.menu header .burger::after, .animo header .burger::after {
    background-color: #FFF
}

@media(hover:hover) {
    .menu header .burger:hover::after, .animo header .burger:hover::after {
        background: #ff9300
    }
}

.menu footer, .animo footer {
    color: #FFF
}

.menu .hamburger, .animo .hamburger {
    opacity: 1;
    pointer-events: visible
}

@media(hover:hover) {
    .animo header .burger:hover::before {
        transition: all .2s ease 0
    }

    .animo header .burger:hover::after {
        transition: all .2s ease .2s
    }
}

.hamburger {
    position: relative;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    min-height: 100dvh;
    width: 100%;
    color: #FFF;
    box-sizing: border-box;
    z-index: 40;
    background: #1d1d1b;
    transition: opacity .7s ease
}

.hamburger::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    opacity: .01;
    background: url("../../assets/img/crazy-flame.png") no-repeat center center;
    background-size: 80% auto
}

.hamburger .scrollMe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    overflow-x: clip
}

.hamburger h3 {
    display: inline-block;
    font-weight: 800;
    opacity: 0;
    transform: translateX(100px)
}

.hamburger h3 span {
    display: block;
    font-weight: 300
}

.hamburger nav ul {
    list-style-type: none
}

.hamburger nav ul li {
    position: relative;
    opacity: 0;
    transform: translateX(100px)
}

.hamburger nav ul li:first-child::before {
    position: absolute;
    content: "";
    background: url(../../assets/img/star.svg) no-repeat 0 0;
    background-size: 100%
}

.hamburger nav ul li p {
    display: table;
    color: #ff9300;
    text-decoration: none;
    font-weight: 300
}

.hamburger nav ul li a, .hamburger nav ul li span {
    color: #FFF;
    text-decoration: none;
    font-weight: 300;
    transition: all .4s ease
}

@media(hover:hover) {
    .hamburger nav ul li a:hover {
        color: #ff84c2;
        transform: scale(1.1);
        background: #1d1d1b;
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.4)
    }
}

.hamburger nav ul li a[aria-current=page] {
    color: #ff9300;
    pointer-events: none
}

.hamburger nav ul li span {
    color: #ff84c2
}

.hamburger nav ul li a.button {
    display: inline-block;
    font-weight: 500;
    white-space: nowrap;
    background: #ff84c2
}

@media(hover:hover) {
    .hamburger nav ul li a.button:hover {
        color: #FFF;
        background: #ff9300
    }
}

.hamburger nav ul li a.button[aria-current=page] {
    pointer-events: none;
    color: #FFF;
    background: #ff9300
}

@media(min-width:300px) {
    .menu header .burger::before, .animo header .burger::before {
        top: 15px;
        height: 70px
    }
}

@media(min-width:300px) and (hover:hover) {
    .menu header .burger:hover::after, .animo header .burger:hover::after {
        top: 15px;
        height: 70px
    }
}

@media(min-width:300px) {
    .hamburger .scrollMe {
        padding: 110px 0 30px 50px
    }

    .hamburger h3 {
        font-size: 40px;
        line-height: 38px;
        padding: 0 50px 0 0;
        margin: 0 0 10px
    }

    .hamburger h3 span {
        font-size: 18px;
        line-height: 26px
    }

    .hamburger nav ul li {
        padding: 0 0 20px
    }

    .hamburger nav ul li:first-child {
        padding-bottom: 10px
    }

    .hamburger nav ul li:first-child::before {
        top: 4px;
        left: -34px;
        width: 24px;
        height: 24px
    }

    .hamburger nav ul li p {
        font-size: 30px;
        line-height: 30px;
        padding: 0 0 16px 0
    }

    .hamburger nav ul li a, .hamburger nav ul li span {
        font-size: 30px;
        line-height: 30px
    }

    .hamburger nav ul li a.button {
        height: 34px;
        padding: 0 20px;
        margin: 0 15px 15px 0;
        font-size: 22px;
        font-weight: 400;
        line-height: 32px;
        border-radius: 22px
    }
}

@media(min-width:600px) {
    .menu header .burger::before, .animo header .burger::before {
        top: -2px;
        height: 110px
    }
}

@media(min-width:600px) and (hover:hover) {
    .menu header .burger:hover::after, .animo header .burger:hover::after {
        top: -2px;
        height: 110px
    }
}

@media(min-width:600px) {
    .hamburger .scrollMe {
        padding: 60px 0 100px 160px
    }

    .hamburger h3 {
        font-size: 50px;
        line-height: 50px;
        padding: 0;
        margin: 0 0 50px
    }

    .hamburger h3 span {
        font-size: 20px;
        line-height: 22px
    }
}

@media(min-width:992px) {
    .hamburger .scrollMe {
        padding: 90px 0 100px 240px
    }

    .hamburger h3 {
        font-size: 70px;
        line-height: 70px;
        margin: 0 0 80px
    }

    .hamburger h3 span {
        font-size: 30px;
        line-height: 36px
    }

    .hamburger nav ul li {
        padding: 0 0 21px
    }

    .hamburger nav ul li:first-child {
        padding-bottom: 15px
    }

    .hamburger nav ul li:first-child::before {
        top: 6px;
        left: -42px;
        width: 30px;
        height: 30px
    }

    .hamburger nav ul li p {
        font-size: 40px;
        line-height: 40px;
        padding: 0 0 20px 0
    }

    .hamburger nav ul li a, .hamburger nav ul li span {
        font-size: 40px;
        line-height: 40px
    }

    .hamburger nav ul li a.button {
        height: 44px;
        padding: 0 20px;
        margin: 0 20px 20px 0;
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
        border-radius: 22px
    }

    .hamburger nav ul li.select::before {
        top: 18px;
        left: -18px;
        width: 6px;
        height: 6px;
        border-radius: 3px
    }
}

@media(min-width:1400px) {
    .hamburger .scrollMe {
        padding: 128px 0 100px 280px
    }

    .hamburger h3 {
        font-size: 70px;
        line-height: 70px
    }

    .hamburger h3 span {
        font-size: 30px;
        line-height: 36px
    }

    .hamburger nav ul li {
        padding: 0 0 21px
    }

    .hamburger nav ul li:first-child {
        padding-bottom: 22px
    }

    .hamburger nav ul li:first-child::before {
        top: 9px;
        left: -54px;
        width: 42px;
        height: 42px
    }

    .hamburger nav ul li p {
        font-size: 50px;
        line-height: 60px;
        padding: 0 0 20px 0
    }

    .hamburger nav ul li a, .hamburger nav ul li span {
        font-size: 50px;
        line-height: 60px
    }

    .hamburger nav ul li a.button {
        height: 60px;
        padding: 0 30px;
        margin: 0 30px 30px 0;
        font-size: 36px;
        line-height: 60px;
        border-radius: 30px
    }

    .hamburger nav ul li.select::before {
        top: 26px;
        left: -22px;
        width: 10px;
        height: 10px;
        border-radius: 5px
    }
}

footer {
    position: relative;
    color: #1d1d1b;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    z-index: 20;
    transition: color .2s ease;
    background: #FFF
}

footer.footerOverlay {
    color: #FFF;
    color: #ddd
}

footer p {
    display: inline-block
}

@media(min-width:300px) {
    footer {
        height: 70px;
        font-size: 16px
    }
}

@media(min-width:992px) {
    footer {
        font-size: 18px
    }
}

@media(min-width:1400px) {
    footer {
        font-size: 20px
    }
}

.intro {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    text-align: center;
    box-sizing: border-box;
    z-index: 10
}

.intro .pn {
    opacity: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    background: url("../../assets/img/me@4x.jpg") no-repeat center bottom;
    background-size: auto 71%;
    z-index: 10
}

@supports(-webkit-touch-callout:none) {
    .intro .pn {
        transform: translate3d(0, 0, 0);
        background: url("../../assets/img/me-ios@4x.jpg") no-repeat center bottom;
        background-size: auto 71%
    }
}

.intro .title {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    transform: translatey(-30%);
    display: flex;
    flex-direction: column;
    z-index: 10
}

.intro .title h1, .intro .title h2 {
    margin: 0 auto;
    font-weight: 700;
    text-align: center;
    transition: all .3s ease
}

.intro .title h1 {
    color: #1d1d1b
}

.intro .title h2 {
    color: #387c8d
}

.intro .title h2 span {
    display: block;
    color: #ff9300
}

.intro .title h2 span.typewriter, .intro .title h2 span.cursor {
    display: inline-block
}

.intro .btnRow {
    position: relative;
    z-index: 10
}

.contact .intro, .projects .intro {
    position: sticky;
    top: 0;
    height: auto;
    background: 0
}

.contact .intro .title, .projects .intro .title {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none
}

@media(min-width:300px) {
    .intro {
        padding-top: 100px
    }

    .intro .title h1 {
        font-size: 70px;
        line-height: 60px
    }

    .intro .title h2 {
        font-size: 44px;
        line-height: 46px;
        max-width: 300px;
        margin-top: 10px
    }

    .intro .title h2 span {
        padding-top: 10px;
        font-size: 38px;
        line-height: 38px
    }

    .intro .btnRow {
        padding-top: 20px
    }

    .intro .btnRow a {
        margin: 0 10px
    }
}

@media(min-width:600px) {
    .intro {
        padding-top: 140px
    }

    .intro .title h1 {
        font-size: 80px;
        line-height: 70px
    }

    .intro .title h2 {
        font-size: 55px;
        line-height: 54px;
        max-width: 650px;
        padding: 0 20px
    }

    .intro .title h2 span {
        padding-top: 10px;
        font-size: 44px;
        line-height: 44px
    }
}

@media(min-width:992px) {
    .intro {
        padding-top: 20vh
    }

    .intro .title h1 {
        font-size: 100px;
        line-height: 110px
    }

    .intro .title h2 {
        font-size: 80px;
        line-height: 80px;
        max-width: 900px
    }

    .intro .title h2 span {
        padding-top: 20px;
        font-size: 54px;
        line-height: 54px
    }
}

@media(min-width:1400px) {
    .intro {
        padding-top: 20vh
    }

    .intro .title h1 {
        font-size: 130px;
        line-height: 110px
    }

    .intro .title h2 {
        font-size: 100px;
        line-height: 100px;
        max-width: 1050px;
        margin-top: 33px
    }

    .intro .title h2 span {
        padding-top: 30px;
        font-size: 70px;
        line-height: 70px
    }

    .contact .intro div h2, .projects .intro div h2 {
        max-width: 1200px
    }
}

.scroll-container {
    position: relative;
    z-index: 30;
    margin: 0 0 100lvh
}

.scroll-container .project {
    width: 100%;
    position: sticky;
    pointer-events: none;
    top: 0
}

.scroll-container .project:first-child .project-container::before {
    display: none
}

.scroll-container .project:first-child .project-container .box::before, .scroll-container .project:first-child .project-container .box::after {
    display: none
}

.scroll-container .project:first-child .project-container .box .content::before, .scroll-container .project:first-child .project-container .box .content::after {
    display: none
}

.scroll-container .project .project-container {
    position: relative;
    height: 100lvh;
    box-sizing: border-box;
    z-index: 30
}

.scroll-container .project .project-container::before {
    position: absolute;
    top: 0;
    content: "";
    display: block;
    background: #FFF
}

.scroll-container .project .project-container>a {
    position: absolute;
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    pointer-events: auto;
    z-index: 40
}

.scroll-container .project .project-container .box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    color: #FFF
}

.scroll-container .project .project-container .box::before, .scroll-container .project .project-container .box::after {
    position: absolute;
    content: "";
    display: block;
    width: 20px;
    height: 40px;
    background: url(../../assets/img/left-corner.svg) no-repeat 0 0
}

.scroll-container .project .project-container .box::before {
    top: -20px
}

.scroll-container .project .project-container .box::after {
    top: -20px;
    transform: rotate(180deg)
}

.scroll-container .project .project-container .box .content::before, .scroll-container .project .project-container .box .content::after {
    position: absolute;
    content: "";
    display: block;
    width: 20px;
    height: 40px;
    background: url(../../assets/img/left-corner.svg) no-repeat 0 0
}

.scroll-container .project .project-container .box .content::before {
    left: 0
}

.scroll-container .project .project-container .box .content::after {
    right: 0;
    transform: rotate(180deg)
}

.scroll-container .project .project-container .box .content span {
    position: relative;
    font-size: 80px;
    font-weight: 300;
    z-index: 2
}

.scroll-container .project .project-container .box .content h3 {
    position: relative;
    font-weight: 700;
    margin: -9px 0 10px;
    text-shadow: 0 10px 20px rgba(29, 29, 27, 0.2);
    z-index: 1;
    transition: all .3s ease
}

.scroll-container .project .project-container .box .content p {
    position: relative;
    font-weight: 700;
    z-index: 2;
    transition: all .3s ease
}

.scroll-container .project .project-container .box figure {
    position: absolute;
    z-index: 0;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    -webkit-mask-image: linear-gradient(to top, transparent 1%, black 50%);
    mask-image: linear-gradient(to top, transparent 1%, black 50%)
}

.scroll-container .project .project-container.fix img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.scroll-container .project .project-container.ra img, .scroll-container .project .project-container.la img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0
}

.scroll-container .more-projects {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 30
}

.scroll-container .more-projects .project-container {
    position: relative;
    box-sizing: border-box
}

.scroll-container .more-projects .project-container::before {
    position: absolute;
    content: "";
    display: block;
    background: #FFF
}

.scroll-container .more-projects .project-container .box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #ff84c2 url(../../assets/img/worm-projects@2x.png) no-repeat;
    background-position: center
}

.scroll-container .more-projects .project-container .box::before, .scroll-container .more-projects .project-container .box::after {
    position: absolute;
    content: "";
    display: block;
    width: 20px;
    height: 40px;
    background: url(../../assets/img/left-corner.svg) no-repeat 0 0
}

.scroll-container .more-projects .project-container .box::after {
    transform: rotate(180deg)
}

.scroll-container .more-projects .project-container .box .content {
    display: flex;
    flex-direction: column;
    color: #fff;
    text-align: center
}

.scroll-container .more-projects .project-container .box .content::before, .scroll-container .more-projects .project-container .box .content::after {
    position: absolute;
    content: "";
    display: block;
    width: 20px;
    height: 40px;
    background: url(../../assets/img/left-corner.svg) no-repeat 0 0
}

.scroll-container .more-projects .project-container .box .content::before {
    top: -20px
}

.scroll-container .more-projects .project-container .box .content::after {
    top: -20px;
    transform: rotate(180deg)
}

.scroll-container .more-projects .project-container .box .content h3 {
    display: inline-block;
    text-shadow: 0 10px 20px rgba(29, 29, 27, 0.2)
}

.scroll-container .more-projects .project-container .box .content .btn {
    display: inline-block;
    font-weight: 400;
    color: #FFF;
    text-decoration: none;
    background: #387c8d;
    transition: all .2s ease
}

@media(hover:hover) {
    .scroll-container .more-projects .project-container .box .content .btn:hover {
        transform: scale(1.1);
        background: #1d1d1b;
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.4)
    }
}

@media(min-width:300px) {
    .scroll-container .project .project-container {
        padding: 10px
    }

    .scroll-container .project .project-container::before {
        left: 10px;
        right: 10px;
        height: 10px
    }

    .scroll-container .project .project-container>a {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px
    }

    .scroll-container .project .project-container .box::before {
        left: 10px
    }

    .scroll-container .project .project-container .box::after {
        right: 10px
    }

    .scroll-container .project .project-container .box .content {
        padding: 0 40px 80px
    }

    .scroll-container .project .project-container .box .content::before {
        top: -10px;
        left: 10px
    }

    .scroll-container .project .project-container .box .content::after {
        top: -10px;
        right: 10px
    }

    .scroll-container .project .project-container .box .content h3 {
        font-size: 70px;
        line-height: 60px
    }

    .scroll-container .project .project-container .box .content p {
        font-size: 22px;
        font-size: 44px;
        line-height: 46px;
        margin-top: 10px
    }

    .scroll-container .project .project-container .box figure {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px
    }

    .scroll-container .project .project-container.ra img {
        max-height: calc(100lvh - 30%)
    }

    .scroll-container .project .project-container.la img {
        max-height: calc(100lvh - 30%)
    }

    .scroll-container .more-projects .project-container::before {
        top: -10px;
        left: 10px;
        right: 10px;
        height: 10px
    }

    .scroll-container .more-projects .project-container .box {
        min-height: calc(100lvh - 20px);
        margin: 10px;
        background-size: auto 80%
    }

    .scroll-container .more-projects .project-container .box::before {
        top: -30px;
        left: 10px
    }

    .scroll-container .more-projects .project-container .box::after {
        top: -30px;
        right: 10px
    }

    .scroll-container .more-projects .project-container .box .content::before {
        left: 10px
    }

    .scroll-container .more-projects .project-container .box .content::after {
        right: 10px
    }

    .scroll-container .more-projects .project-container .box .content h3 {
        font-size: 70px;
        line-height: 60px
    }

    .scroll-container .more-projects .project-container .box .content p {
        font-size: 22px;
        margin: 10px 0 0
    }

    .scroll-container .more-projects .project-container .box .content .btn {
        min-height: 50px;
        border-radius: 25px;
        padding: 0 20px;
        margin: 30px auto 0;
        line-height: 46px;
        font-size: 24px
    }
}

@media(min-width:600px) {
    .scroll-container .project .project-container {
        padding: 20px
    }

    .scroll-container .project .project-container::before {
        left: 20px;
        right: 20px;
        height: 20px
    }

    .scroll-container .project .project-container>a {
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px
    }

    .scroll-container .project .project-container .box::before {
        left: 20px
    }

    .scroll-container .project .project-container .box::after {
        right: 20px
    }

    .scroll-container .project .project-container .box .content {
        padding: 0 60px 90px
    }

    .scroll-container .project .project-container .box .content::before {
        top: 0;
        left: 20px
    }

    .scroll-container .project .project-container .box .content::after {
        top: 0;
        right: 20px
    }

    .scroll-container .project .project-container .box .content h3 {
        font-size: 80px;
        line-height: 70px
    }

    .scroll-container .project .project-container .box .content p {
        font-size: 24px;
        font-size: 55px;
        line-height: 54px;
        margin-top: 0
    }

    .scroll-container .project .project-container .box figure {
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px
    }

    .scroll-container .more-projects .project-container::before {
        top: -20px;
        left: 20px;
        right: 20px;
        height: 20px
    }

    .scroll-container .more-projects .project-container .box {
        min-height: calc(100lvh - 40px);
        margin: 20px;
        background-size: auto 80%
    }

    .scroll-container .more-projects .project-container .box::before {
        top: -40px;
        left: 20px
    }

    .scroll-container .more-projects .project-container .box::after {
        top: -40px;
        right: 20px
    }

    .scroll-container .more-projects .project-container .box .content::before {
        left: 20px
    }

    .scroll-container .more-projects .project-container .box .content::after {
        right: 20px
    }

    .scroll-container .more-projects .project-container .box .content h3 {
        font-size: 80px;
        line-height: 70px
    }

    .scroll-container .more-projects .project-container .box .content p {
        font-size: 26px;
        margin: 10px 0 0
    }
}

@media(min-width:992px) {
    .scroll-container .project .project-container {
        padding: 30px
    }

    .scroll-container .project .project-container::before {
        left: 30px;
        right: 30px;
        height: 30px
    }

    .scroll-container .project .project-container>a {
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px
    }

    .scroll-container .project .project-container .box::before {
        left: 30px
    }

    .scroll-container .project .project-container .box::after {
        right: 30px
    }

    .scroll-container .project .project-container .box .content {
        padding: 0 80px 120px
    }

    .scroll-container .project .project-container .box .content::before {
        top: 10px;
        left: 30px
    }

    .scroll-container .project .project-container .box .content::after {
        top: 10px;
        right: 30px
    }

    .scroll-container .project .project-container .box .content h3 {
        font-size: 100px;
        line-height: 110px;
        margin: -9px 0 16px
    }

    .scroll-container .project .project-container .box .content p {
        font-size: 30px;
        font-size: 80px;
        line-height: 80px;
        margin-top: -10px
    }

    .scroll-container .project .project-container .box figure {
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px
    }

    .scroll-container .project .project-container.ra img, .scroll-container .project .project-container.la img {
        position: static;
        left: auto;
        transform: translateX(0)
    }

    .scroll-container .project .project-container.ra img {
        float: right;
        max-height: calc(100lvh - 60px);
        margin-right: -60px
    }

    .scroll-container .project .project-container.la img {
        float: left;
        max-height: calc(100lvh - 60px);
        margin-left: -60px
    }

    .scroll-container .project .project-container.la .content {
        text-align: right;
        padding-right: 90px
    }

    .scroll-container .more-projects .project-container::before {
        top: -30px;
        left: 30px;
        right: 30px;
        height: 30px
    }

    .scroll-container .more-projects .project-container .box {
        min-height: calc(100lvh - 60px);
        margin: 30px;
        background-size: 400% auto
    }

    .scroll-container .more-projects .project-container .box::before {
        top: -50px;
        left: 30px
    }

    .scroll-container .more-projects .project-container .box::after {
        top: -50px;
        right: 30px
    }

    .scroll-container .more-projects .project-container .box .content::before {
        left: 30px
    }

    .scroll-container .more-projects .project-container .box .content::after {
        right: 30px
    }

    .scroll-container .more-projects .project-container .box .content h3 {
        font-size: 100px;
        line-height: 110px
    }

    .scroll-container .more-projects .project-container .box .content p {
        font-size: 32px;
        margin: 0 0 40px
    }

    .scroll-container .more-projects .project-container .box .content .btn {
        min-height: 70px;
        border-radius: 35px;
        padding: 0 30px;
        line-height: 70px;
        font-size: 30px
    }
}

@media(min-width:1400px) {
    .scroll-container .project .project-container {
        padding: 50px
    }

    .scroll-container .project .project-container::before {
        left: 50px;
        right: 50px;
        height: 50px
    }

    .scroll-container .project .project-container>a {
        top: 50px;
        right: 50px;
        bottom: 50px;
        left: 50px
    }

    .scroll-container .project .project-container .box::before {
        left: 50px
    }

    .scroll-container .project .project-container .box::after {
        right: 50px
    }

    .scroll-container .project .project-container .box .content {
        top: 50px;
        right: 50px;
        bottom: 50px;
        left: 50px;
        padding: 0 100px 100px
    }

    .scroll-container .project .project-container .box .content::before {
        top: 30px;
        left: 50px
    }

    .scroll-container .project .project-container .box .content::after {
        top: 30px;
        right: 50px
    }

    .scroll-container .project .project-container .box .content h3 {
        font-size: 130px;
        line-height: 110px
    }

    .scroll-container .project .project-container .box .content p {
        font-size: 36px;
        font-size: 100px;
        line-height: 100px;
        margin-top: 10px
    }

    .scroll-container .project .project-container .box figure {
        top: 50px;
        right: 50px;
        bottom: 50px;
        left: 50px
    }

    .scroll-container .project .project-container.ra img {
        max-height: calc(100lvh - 100px);
        margin-right: -100px
    }

    .scroll-container .project .project-container.la img {
        max-height: calc(100lvh - 100px);
        margin-left: -100px
    }

    .scroll-container .project .project-container.la .content {
        padding-right: 160px
    }

    .scroll-container .more-projects .project-container::before {
        top: -50px;
        left: 50px;
        right: 50px;
        height: 50px
    }

    .scroll-container .more-projects .project-container .box {
        min-height: calc(100lvh - 100px);
        margin: 50px
    }

    .scroll-container .more-projects .project-container .box::before {
        top: -70px;
        left: 50px
    }

    .scroll-container .more-projects .project-container .box::after {
        top: -70px;
        right: 50px
    }

    .scroll-container .more-projects .project-container .box .content::before {
        left: 50px
    }

    .scroll-container .more-projects .project-container .box .content::after {
        right: 50px
    }

    .scroll-container .more-projects .project-container .box .content h3 {
        font-size: 130px;
        line-height: 110px
    }

    .scroll-container .more-projects .project-container .box .content p {
        font-size: 36px;
        margin: 20px 0 40px
    }

    .scroll-container .more-projects .project-container .box .content .btn {
        min-height: 80px;
        border-radius: 40px;
        padding: 0 40px;
        line-height: 80px;
        font-size: 40px
    }
}

.hello {
    position: relative;
    box-sizing: border-box;
    background: #FFF;
    -webkit-transform: translate3d(0, 0, 0);
    overflow-x: hidden;
    z-index: 20
}

.hello .box {
    position: relative;
    margin: 0 auto;
    transition: all .2s ease
}

.hello .box .content {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center
}

.hello .box .content h3 {
    color: #1d1d1b;
    font-weight: 700
}

.hello .box .content p {
    color: #FFF;
    font-weight: 700;
    padding: 0 40px
}

.hello .box .content::before {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: #ff9300;
    z-index: -1;
    transition: all .2s ease
}

.hello .box .content::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: #ff9300;
    z-index: -1;
    transition: all .2s ease
}

.home .hello .box>a {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.home .hello .box::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    content: "";
    display: block;
    background: url(../../assets/img/doodles@2x.jpg) no-repeat center center;
    background-size: cover;
    z-index: -1
}

.contact .hello::before {
    position: absolute;
    content: "";
    display: block;
    background: #eaf4f5;
    z-index: -1
}

.projects .hello {
    position: relative;
    padding-bottom: 0;
    z-index: 30
}

.projects .hello .box::before, .projects .hello .box::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    pointer-events: none;
    display: block;
    background: no-repeat 0 0;
    background-size: 100%
}

.projects .hello .box::before {
    background-image: url(../../assets/img/worm-happy-back@2x.png);
    z-index: -1
}

.projects .hello .box::after {
    background-image: url(../../assets/img/worm-happy-front@2x.png);
    z-index: 20
}

.projects .hello .box .content::before {
    background: #ff9300 url(../../assets/img/worm-happy-shadow@2x.png) no-repeat 0 0;
    background-size: 100%
}

@media(min-width:300px) {
    .hello {
        padding-bottom: 80px
    }

    .hello .box {
        height: 420px
    }

    .hello .box .content h3 {
        font-size: 70px;
        line-height: 60px;
        margin: -9px 0 15px
    }

    .hello .box .content p {
        font-size: 44px;
        line-height: 46px;
        margin: -15px 0 25px 0
    }

    .hello .box .content::before {
        width: 420px;
        height: 420px
    }

    .hello .box .content::after {
        width: 80px;
        height: 80px;
        margin: -300px -300px 0 0
    }

    .home .hello .title h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px;
        text-align: center;
        padding: 0 20px 40px
    }

    .home .hello .box {
        padding: 250px 0
    }

    .home .hello .box .content::before {
        box-shadow: 0 0 60px rgba(56, 124, 141, 0.6)
    }

    .home .hello .box>a {
        bottom: 60px
    }

    .home .hello .box::before {
        width: 210px;
        border-radius: 105px
    }

    .contact .hello::before {
        top: -52px;
        right: 0;
        bottom: calc(50% + 40px);
        left: 0
    }

    .projects .hello {
        margin: 0;
        height: 906px
    }

    .projects .hello .box {
        height: 100%
    }

    .projects .hello .box::before, .projects .hello .box::after {
        top: 0;
        width: 540px;
        height: 804px
    }
}

@media(min-width:600px) {
    .hello {
        padding-bottom: 120px
    }

    .hello .box {
        height: 380px
    }

    .hello .box .content h3 {
        font-size: 80px;
        line-height: 70px;
        margin: -9px 0 10px
    }

    .hello .box .content p {
        font-size: 55px;
        line-height: 54px;
        margin: -10px 0 30px 0
    }

    .hello .box .content::before {
        width: 380px;
        height: 380px
    }

    .hello .box .content::after {
        width: 80px;
        height: 80px;
        margin: -270px -270px 0 0
    }

    .home .hello .title h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px;
        text-align: center;
        padding-bottom: 60px
    }

    .contact .hello::before {
        border-radius: 0 0 20px 20px;
        right: 20px;
        bottom: calc(50% + 60px);
        left: 20px
    }

    .projects .hello {
        margin: 355px 0 300px;
        overflow: visible;
        height: auto
    }

    .projects .hello .box::before, .projects .hello .box::after {
        top: -360px;
        width: 540px;
        height: 804px
    }

    .projects .hello .box .content::before {
        width: 420px;
        height: 420px
    }

    .projects .hello .box .content::after {
        width: 80px;
        height: 80px;
        margin: -300px -300px 0 0
    }
}

@media(min-width:992px) {
    .hello {
        padding-bottom: 160px
    }

    .hello .box {
        height: 550px
    }

    .hello .box .content h3 {
        font-size: 100px;
        line-height: 110px;
        margin: -9px 0 0
    }

    .hello .box .content p {
        font-size: 80px;
        line-height: 80px;
        margin: -10px 0 50px 0
    }

    .hello .box .content::before {
        width: 550px;
        height: 550px
    }

    .hello .box .content::after {
        width: 136px;
        height: 136px;
        margin: -380px -380px 0 0
    }

    .home .hello .title h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px;
        text-align: center;
        padding-bottom: 80px
    }

    .home .hello .box {
        padding: 350px 0
    }

    .home .hello .box .content::before {
        box-shadow: 0 0 80px rgba(56, 124, 141, 0.6)
    }

    .home .hello .box>a {
        bottom: 80px
    }

    .home .hello .box::before {
        width: 280px;
        border-radius: 140px
    }

    .contact .hello::before {
        right: 35px;
        bottom: calc(50% + 80px);
        left: 35px
    }

    .projects .hello {
        margin: 440px 0 350px
    }

    .projects .hello .box::before, .projects .hello .box::after {
        top: -447px;
        width: 707px;
        height: 1055px
    }

    .projects .hello .box .content::before {
        width: 550px;
        height: 550px
    }

    .projects .hello .box .content::after {
        width: 136px;
        height: 136px;
        margin: -380px -380px 0 0
    }
}

@media(min-width:1400px) {
    .hello {
        padding-bottom: 200px
    }

    .hello .box {
        height: 700px
    }

    .hello .box .content h3 {
        font-size: 130px;
        line-height: 110px;
        margin: -9px 0 16px
    }

    .hello .box .content p {
        font-size: 100px;
        line-height: 100px;
        margin: -5px 0 60px 0
    }

    .hello .box .content::before {
        width: 700px;
        height: 700px
    }

    .hello .box .content::after {
        width: 136px;
        height: 136px;
        margin: -500px -500px 0 0
    }

    .home .hello .title h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px;
        text-align: center;
        padding-bottom: 100px
    }

    .home .hello .box {
        padding: 400px 0
    }

    .home .hello .box .content::before {
        box-shadow: 0 0 100px rgba(56, 124, 141, 0.6)
    }

    .home .hello .box>a {
        bottom: 120px
    }

    .home .hello .box::before {
        width: 400px;
        border-radius: 200px
    }

    .contact .hello::before {
        top: -102px;
        right: 50px;
        bottom: calc(50% + 100px);
        left: 50px
    }

    .projects .hello {
        position: relative;
        margin: 580px 0 400px
    }

    .projects .hello .box::before, .projects .hello .box::after {
        top: -590px;
        width: 900px;
        height: 1340px
    }

    .projects .hello .box .content::before {
        width: 700px;
        height: 700px
    }

    .projects .hello .box .content::after {
        width: 136px;
        height: 136px;
        margin: -500px -500px 0 0
    }
}

.me {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 30
}

.me::before {
    position: absolute;
    bottom: 0;
    content: "";
    display: block;
    background: #eaf4f5;
    z-index: 20
}

.me .box {
    position: relative;
    text-align: center;
    background: #1d1d1b;
    transition: all .2s ease;
    z-index: 30
}

.me .box h3 {
    color: #FFF
}

.me .box .btnRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.me .box::before {
    position: absolute;
    top: 0;
    left: 50%;
    content: "";
    display: block;
    background: url(../../assets/img/me-full.png) no-repeat 0 0;
    background-size: 100%
}

@media(min-width:300px) {
    .me {
        padding-bottom: 60px;
        margin: 130px 0 0
    }

    .me::before {
        top: 30%;
        right: 0;
        left: 0;
        border-radius: 0
    }

    .me .box {
        padding: 0 0 40px;
        margin: 0 20px;
        border-radius: 20px;
        box-shadow: 0 0 30px rgba(29, 29, 27, 0.2)
    }

    .me .box h3 {
        font-size: 44px;
        line-height: 46px;
        padding: 120px 0 30px
    }

    .me .box .btnRow {
        padding: 0 20px
    }

    .me .box::before {
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px
    }
}

@media(min-width:600px) {
    .me {
        padding-bottom: 90px;
        margin: 150px 0 0
    }

    .me::before {
        top: 30%;
        right: 20px;
        left: 20px;
        border-radius: 20px 20px 0 0
    }

    .me .box {
        margin: 0 10%
    }

    .me .box h3 {
        font-size: 55px;
        line-height: 54px
    }

    .me .box .btnRow {
        padding: 0 20px
    }
}

@media(min-width:992px) {
    .me {
        padding-bottom: 120px
    }

    .me::before {
        right: 35px;
        left: 35px
    }

    .me .box {
        border-radius: 30px;
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.2)
    }

    .me .box h3 {
        font-size: 80px;
        line-height: 80px
    }
}

@media(min-width:1400px) {
    .me {
        padding-bottom: 150px;
        margin: 270px 0 0
    }

    .me::before {
        right: 50px;
        left: 50px
    }

    .me .box {
        padding: 0 0 160px;
        margin: 0 300px;
        border-radius: 50px;
        box-shadow: 0 0 80px rgba(29, 29, 27, 0.2)
    }

    .me .box h3 {
        font-size: 100px;
        line-height: 100px;
        padding: 250px 0 60px
    }

    .me .box::before {
        width: 360px;
        height: 360px;
        margin: -180px 0 0 -180px
    }
}

.brands {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 20
}

.brands .box {
    text-align: center;
    background: #eaf4f5
}

.brands .box h3 {
    color: #1d1d1b
}

.brands .box h3 .selection {
    position: relative;
    display: inline-block;
    padding: 0 30px;
    z-index: 1
}

.brands .box h3 .selection .justdoit {
    position: absolute;
    top: 0;
    left: 0;
    bottom: -6px;
    content: "";
    display: block;
    width: 0;
    padding: 0 0 0 30px;
    box-sizing: border-box;
    color: #FFF;
    border-radius: 10px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    background: #ff9300;
    z-index: 1
}

.brands .box h4 {
    color: #387c8d
}

.brands .box h4 .highlight {
    color: #ff9300
}

.brands .box p {
    padding: 0 15%;
    color: #387c8d
}

@media(min-width:300px) {
    .brands {
        margin: 0
    }

    .brands .box {
        padding: 0 0 80px
    }

    .brands .box h3 {
        font-size: 44px;
        line-height: 46px;
        padding: 0 40px
    }

    .brands .box h3 .selection {
        padding: 0 15px
    }

    .brands .box h3 .selection .justdoit {
        bottom: -4px;
        padding: 0 0 0 15px;
        border-radius: 8px
    }

    .brands .box h4 {
        font-size: 38px;
        line-height: 38px;
        padding: 20px 40px
    }

    .brands .box p {
        font-size: 20px;
        line-height: 28px;
        padding: 0 40px
    }
}

@media(min-width:600px) {
    .brands {
        margin: 0 20px
    }

    .brands .box {
        padding: 0 0 120px
    }

    .brands .box h3 {
        font-size: 55px;
        line-height: 54px;
        padding: 0 15%
    }

    .brands .box h4 {
        font-size: 44px;
        line-height: 44px;
        padding: 20px 40px
    }

    .brands .box p {
        font-size: 26px;
        line-height: 40px;
        padding: 0 15%
    }
}

@media(min-width:992px) {
    .brands {
        margin: 0 35px
    }

    .brands .box {
        padding: 0 0 160px
    }

    .brands .box h3 {
        font-size: 80px;
        line-height: 80px
    }

    .brands .box h3 .selection {
        padding: 0 20px
    }

    .brands .box h3 .selection .justdoit {
        padding: 0 0 0 20px;
        border-radius: 10px
    }

    .brands .box h4 {
        font-size: 54px;
        line-height: 54px
    }

    .brands .box p {
        font-size: 30px;
        line-height: 48px
    }
}

@media(min-width:1400px) {
    .brands {
        margin: 0 50px
    }

    .brands .box {
        padding: 0 0 200px
    }

    .brands .box h3 {
        font-size: 100px;
        line-height: 100px
    }

    .brands .box h3 .selection {
        padding: 0 30px
    }

    .brands .box h3 .selection .justdoit {
        bottom: -6px;
        padding: 0 0 0 30px
    }

    .brands .box h4 {
        font-size: 70px;
        line-height: 70px
    }

    .brands .box p {
        font-size: 36px;
        line-height: 60px
    }
}

.doodles {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 20;
    background: #eaf4f5
}

.doodles h3 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -41%);
    transform: translate(-50%, -64%);
    text-align: center;
    white-space: nowrap;
    color: #ff84c2;
    z-index: 20
}

@media(min-width:300px) {
    .doodles {
        margin: 0
    }

    .doodles h3 {
        top: 43%;
        font-size: 44px;
        line-height: 40px
    }

    .doodles figure {
        overflow: hidden
    }

    .doodles figure img {
        position: relative;
        left: 50%;
        width: auto;
        height: 800px;
        transform: translate(-50%, 0)
    }
}

@media(min-width:600px) {
    .doodles {
        margin: 0 20px
    }

    .doodles h3 {
        font-size: 55px;
        line-height: 44px
    }

    .doodles h3 span {
        font-size: 45px
    }

    .doodles figure img {
        position: relative;
        left: 50%;
        width: 103%;
        height: auto;
        transform: translate(-50%, 0)
    }
}

@media(min-width:992px) {
    .doodles {
        margin: 0 35px
    }

    .doodles h3 {
        font-size: 80px;
        line-height: 80px
    }

    .doodles h3 span {
        font-size: 80px
    }
}

@media(min-width:1400px) {
    .doodles {
        margin: 0 50px
    }

    .doodles h3 {
        font-size: 100px;
        line-height: 100px
    }

    .doodles h3 span {
        font-size: 100px
    }
}

.address {
    position: relative;
    text-align: center;
    background: #FFF;
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 20
}

.address h4 {
    display: inline-block
}

.address .row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.address .row p {
    display: inline;
    color: #387c8d
}

.address .row p span {
    color: #1d1d1b
}

@media(min-width:300px) {
    .address {
        padding: 0 20px 80px
    }

    .address h4 {
        font-size: 36px;
        line-height: 36px;
        padding-bottom: 10px
    }

    .address .row p {
        font-size: 20px;
        line-height: 28px;
        padding: 0 0 20px
    }
}

@media(min-width:600px) {
    .address {
        padding: 0 30px 120px
    }

    .address h4 {
        font-size: 42px;
        line-height: 40px
    }

    .address .row p {
        font-size: 26px;
        line-height: 36px
    }
}

@media(min-width:992px) {
    .address {
        padding: 0 40px 160px
    }

    .address h4 {
        font-size: 46px;
        line-height: 46px
    }

    .address .row p {
        font-size: 30px;
        line-height: 42px;
        padding: 0 0 30px
    }
}

@media(min-width:1400px) {
    .address {
        padding: 0 60px 200px
    }

    .address h4 {
        font-size: 50px;
        line-height: 60px
    }

    .address .row p {
        font-size: 36px;
        line-height: 44px;
        padding: 0 0 40px
    }
}

.showcase-overview-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    align-items: flex-start;
    z-index: 20;
    pointer-events: none
}

.showcase-overview-list.square .project {
    aspect-ratio: 1/1;
    min-height: auto
}

.showcase-overview-list .project {
    opacity: 0;
    position: relative;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    color: #FFF;
    text-align: center;
    z-index: 20;
    pointer-events: auto;
    transition: transform .2s ease, opacity .6s ease
}

.showcase-overview-list .project:last-child {
    margin-bottom: 0
}

.showcase-overview-list .project.i-see-you {
    opacity: 1
}

.showcase-overview-list .project .title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 0 20px 20px;
    z-index: 20;
    transition: bottom .2s ease, opacity .2s ease
}

.showcase-overview-list .project .content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 20;
    transition: opacity .2s ease, top .2s ease
}

.showcase-overview-list .project .content .desc {
    opacity: 0;
    margin-top: -50px;
    transition: opacity .2s ease, margin-top .2s ease
}

.showcase-overview-list .project figure {
    position: absolute;
    top: -100px;
    right: -50px;
    bottom: 0;
    left: -50px;
    z-index: 10
}

.showcase-overview-list .project figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .2s ease
}

.showcase-overview-list .project a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-indent: -99999px;
    z-index: 20
}

@media(hover:hover) {
    .showcase-overview-list .project:hover {
        z-index: 25;
        transform: scale(1.2)
    }

    .showcase-overview-list .project:hover .title {
        bottom: -90px;
        opacity: 0
    }

    .showcase-overview-list .project:hover .content {
        top: 0;
        opacity: 1
    }

    .showcase-overview-list .project:hover .content .desc {
        opacity: 1;
        margin-top: 0;
        transition-delay: .1s
    }

    .showcase-overview-list .project:hover img {
        filter: blur(40px);
        transform: translate3d(0, 0, 0)
    }
}

.worm-me-up {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden
}

.worm-me-up img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: auto
}

@media(min-width:300px) {
    .worm-me-up img {
        height: 425px;
        margin-top: 160px
    }

    .showcase-overview-list {
        padding: 30vh 40px 80px;
        gap: 20px
    }

    .showcase-overview-list.square {
        padding-top: 80px
    }

    .showcase-overview-list .project {
        width: 100%;
        min-height: 360px
    }

    .showcase-overview-list .project:nth-child(odd) {
        margin-top: 0
    }

    .showcase-overview-list .project .title {
        padding: 140px 20px 40px
    }

    .showcase-overview-list .project .content {
        top: -40px;
        padding: 40px 20px 30px 20px
    }

    .showcase-overview-list .project h3 {
        font-size: 38px;
        line-height: 34px
    }

    .showcase-overview-list .project p {
        font-size: 20px;
        line-height: 28px;
        padding-top: 10px
    }

    .showcase-overview-list .project p.desc {
        padding: 20px 0 0;
        margin-bottom: -5px;
        font-size: 20px;
        line-height: 28px
    }
}

@media(min-width:300px) and (hover:hover) {
    .showcase-overview-list .project:hover {
        box-shadow: 0 0 20px rgba(29, 29, 27, 0.5)
    }
}

@media(min-width:600px) {
    .worm-me-up img {
        height: 705px;
        margin-top: -180px
    }

    .showcase-overview-list {
        padding: 260px 40px 120px;
        gap: 30px
    }

    .showcase-overview-list.square {
        padding-top: 60px
    }

    .showcase-overview-list.square .project:nth-child(odd) {
        margin-top: 0
    }

    .showcase-overview-list .project {
        width: calc(50% - 15px);
        min-height: 450px
    }

    .showcase-overview-list .project:nth-child(odd) {
        margin-top: -125px
    }

    .showcase-overview-list .project .title {
        padding: 140px 20px 50px
    }

    .showcase-overview-list .project .content {
        top: -40px;
        padding: 40px 20px 30px 20px
    }

    .showcase-overview-list .project h3 {
        font-size: 44px;
        line-height: 40px
    }

    .showcase-overview-list .project p {
        font-size: 24px;
        line-height: 26px;
        padding-top: 10px
    }

    .showcase-overview-list .project p.desc {
        padding-top: 20px;
        margin-bottom: -5px;
        font-size: 20px;
        line-height: 26px
    }
}

@media(min-width:600px) and (hover:hover) {
    .showcase-overview-list .project:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(29, 29, 27, 0.2)
    }
}

@media(min-width:992px) {
    .worm-me-up img {
        height: 920px
    }

    .showcase-overview-list {
        padding: 330px 10% 160px;
        gap: 40px
    }

    .showcase-overview-list.square {
        padding-top: 80px
    }

    .showcase-overview-list .project {
        width: calc(50% - 20px);
        min-height: 650px
    }

    .showcase-overview-list .project:nth-child(odd) {
        margin-top: -175px
    }

    .showcase-overview-list .project .title {
        padding: 140px 30px 70px
    }

    .showcase-overview-list .project .content {
        top: -40px;
        padding: 50px 40px 40px 40px
    }

    .showcase-overview-list .project h3 {
        font-size: 54px;
        line-height: 50px
    }

    .showcase-overview-list .project p {
        font-size: 30px;
        line-height: 32px
    }

    .showcase-overview-list .project p.desc {
        padding-top: 30px;
        margin-bottom: -10px;
        font-size: 26px;
        line-height: 30px
    }
}

@media(min-width:992px) and (hover:hover) {
    .showcase-overview-list .project:hover {
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.2)
    }
}

@media(min-width:1400px) {
    .worm-me-up img {
        height: 1250px;
        margin-top: 120px
    }

    .showcase-overview-list {
        max-width: 1800px;
        margin-inline: auto;
        box-sizing: border-box;
        padding: 550px 10% 200px;
        gap: 60px
    }

    .showcase-overview-list.square {
        padding-top: 100px
    }

    .showcase-overview-list .project {
        width: calc(50% - 30px);
        min-height: 850px
    }

    .showcase-overview-list .project:nth-child(odd) {
        margin-top: -250px
    }

    .showcase-overview-list .project .title {
        padding: 140px 50px 80px
    }

    .showcase-overview-list .project .content {
        top: -50px;
        padding: 80px 40px 50px 40px
    }

    .showcase-overview-list .project h3 {
        font-size: 70px;
        line-height: 60px
    }

    .showcase-overview-list .project p {
        font-size: 40px;
        line-height: 42px;
        padding-top: 20px
    }

    .showcase-overview-list .project p.desc {
        padding-top: 40px;
        font-size: 36px;
        line-height: 50px
    }
}

@media(min-width:1400px) and (hover:hover) {
    .showcase-overview-list .project:hover {
        box-shadow: 0 0 80px rgba(29, 29, 27, 0.2)
    }
}

.project.june .box {
    background: #1a3e70
}

.project.cultofpigeons .box {
    background: transparent linear-gradient(180deg, #f00 0, #630000 100%) 0 0 no-repeat
}

.project.monocle .box {
    background: transparent linear-gradient(180deg, #121b45 0, #1a234c 100%) 0 0 no-repeat
}

.project.besmartcampus .box {
    background: transparent linear-gradient(180deg, #1ec208 0, #108618 100%) 0 0 no-repeat
}

.project.all .box {
    background: #ff9300
}

.sneak-preview .cultofpigeons::before {
    background: #b4b7e1;
    background: transparent linear-gradient(45deg, #b4b7e1 0, #9ea2d8 100%) 0 0 no-repeat
}

.sneak-preview .cultofpigeons .item:nth-child(1)::before {
    background: transparent linear-gradient(45deg, #36355c 0, #555492 100%) 0 0 no-repeat
}

.sneak-preview .besmartcampus::before {
    background: #47ac4e;
    background: transparent linear-gradient(45deg, #47ac4e 0, #1f90b6 100%) 0 0 no-repeat
}

.sneak-preview .besmartcampus .item:nth-child(1)::before {
    background: transparent linear-gradient(45deg, #ffbc2d 0, #118110 100%) 0 0 no-repeat padding-box
}

.sneak-preview .monocle::before {
    background: transparent linear-gradient(45deg, #f8c12d 0, #c3254e 100%) 0 0 no-repeat
}

.sneak-preview .monocle .item:nth-child(1)::before {
    background: transparent linear-gradient(180deg, #121b45 0, #1a234c 100%) 0 0 no-repeat
}

body .sneaker .main-bg {
    background: #d7d9ef
}

body.sneak-02 .sneaker .main-bg {
    background: #8ed292
}

body.sneak-03 .sneaker .main-bg {
    background: #ed9e32
}

.showcase-overview-list .project.freegameaday {
    background: #29506b
}

.showcase-overview-list .project.freegameaday .title {
    background: transparent linear-gradient(180deg, rgba(41, 80, 107, 0) 0, #29506b 100%) 0 0 no-repeat padding-box
}

.showcase-overview-list .project.june {
    background: #1a3e70
}

.showcase-overview-list .project.june .title {
    background: transparent linear-gradient(180deg, rgba(26, 62, 112, 0) 0, #1a3e70 100%) 0 0 no-repeat padding-box
}

.showcase-overview-list .project.cultofpigeons {
    background: #384774
}

.showcase-overview-list .project.cultofpigeons .title {
    background: transparent linear-gradient(180deg, rgba(54, 53, 92, 0) 0, #36355c 100%) 0 0 no-repeat padding-box
}

.showcase-overview-list .project.bonesandrockets {
    background: #1d1d1b
}

.showcase-overview-list .project.bonesandrockets .title {
    background: transparent linear-gradient(180deg, rgba(29, 29, 27, 0) 0, #1d1d1b 100%) 0 0 no-repeat padding-box
}

.showcase-overview-list .project.debovenstad {
    background: #f45877
}

.showcase-overview-list .project.debovenstad .title {
    background: transparent linear-gradient(180deg, rgba(237, 11, 147, 0) 0, #ed0b93 100%) 0 0 no-repeat padding-box
}

.showcase-overview-list .project.personal {
    background: #fd3a5e
}

.showcase-overview-list .project.personal .title {
    background: transparent linear-gradient(180deg, rgba(253, 58, 94, 0) 0, #fd3a5e 100%) 0 0 no-repeat padding-box
}

.showcase-overview-list .project.monocle {
    background: #2f365c
}

.showcase-overview-list .project.monocle .title {
    background: transparent linear-gradient(180deg, rgba(203, 59, 73, 0) 0, #cb3b49 100%) 0 0 no-repeat padding-box
}

.showcase-overview-list .project.besmartcampus {
    background: #ffbc2d
}

.showcase-overview-list .project.besmartcampus .title {
    background: transparent linear-gradient(180deg, rgba(17, 129, 16, 0) 0, #118110 100%) 0 0 no-repeat padding-box
}

.next.debovenstad .go {
    background: #f45877 linear-gradient(180deg, rgba(237, 11, 147, 0) 0, #ed0b93 100%) 0 0 no-repeat padding-box
}

.next.cultofpigeons .go {
    background: #384774 linear-gradient(180deg, rgba(54, 53, 92, 0) 0, #36355c 100%) 0 0 no-repeat padding-box
}

.next.bonesandrockets .go {
    background: #252522
}

.next.personal .go {
    background: #fd3a5e
}

.next.monocle .go {
    background: #2f365c linear-gradient(180deg, rgba(203, 59, 73, 0) 0, #cb3b49 100%) 0 0 no-repeat padding-box
}

.next.freegameaday .go {
    background: #29506b linear-gradient(180deg, rgba(41, 80, 107, 0) 0, #29506b 100%) 0 0 no-repeat padding-box
}

.next.freegameaday .go figure img {
    position: relative;
    top: -30%;
    left: -25%;
    width: 150%;
    height: 150%
}

.next.june .go {
    background: #1a3e70 linear-gradient(180deg, rgba(26, 62, 112, 0) 0, #1a3e70 100%) 0 0 no-repeat padding-box
}

.next.besmartcampus .go {
    background: #ffbc2d linear-gradient(180deg, rgba(17, 129, 16, 0) 0, #118110 100%) 0 0 no-repeat padding-box
}

.case.freegameaday .case-hero {
    background: transparent linear-gradient(180deg, #294e6b 0, #5fb0d1 80%, #294e6b 100%)
}

.case.freegameaday .about::before {
    background: #29506b linear-gradient(180deg, #294e6b 0, #5fb0d1 100%)
}

.case.june .case-hero {
    background: #1a3e70
}

.case.june .about::before {
    background: #1a3e70
}

.case.june figure.fw.bg-t {
    background: #e7ebf0
}

.case.cultofpigeons .case-hero {
    background: transparent linear-gradient(180deg, #f00 0, #630000 100%) 0 0 no-repeat
}

.case.cultofpigeons .about::before {
    background: transparent linear-gradient(180deg, #630000 0, #36355c 100%) 0 0 no-repeat
}

.case.bonesandrockets .case-hero {
    background: #1d1d1b
}

.case.bonesandrockets .about::before {
    background: #1d1d1b
}

.case.personal .case-hero {
    background: #fd3a5e
}

.case.personal .about::before {
    background: #fd3a5e
}

.case.debovenstad .case-hero {
    background: linear-gradient(180deg, #f45877 0, #ed0b93 100%) 0 0 no-repeat padding-box
}

.case.debovenstad .about::before {
    background: #f45877 linear-gradient(180deg, #ed0b93 0, rgba(237, 11, 147, 0) 100%) 0 0 no-repeat padding-box
}

.case.monocle .case-hero {
    background: transparent linear-gradient(180deg, #121b45 0, #1a234c 100%) 0 0 no-repeat
}

.case.monocle .about::before {
    background: transparent linear-gradient(180deg, #1a234c 0, #3d4568 100%) 0 0 no-repeat
}

.case.besmartcampus .case-hero {
    background: transparent linear-gradient(180deg, #ffbc2d 0, #118110 100%) 0 0 no-repeat padding-box
}

.case.besmartcampus .about::before {
    background: #ffbc2d linear-gradient(180deg, #118110 0, rgba(17, 129, 16, 0) 100%) 0 0 no-repeat padding-box
}

.mouse-project.freegameaday .mouse {
    color: #29506b;
    background: #fbde00
}

.mouse-project.june .mouse {
    color: #fff;
    background: #1a3e70
}

.mouse-project.cultofpigeons .mouse {
    color: #8792cc;
    background: #36355c
}

.mouse-project.debovenstad .mouse {
    color: #f89dd4;
    background: #ed0b93
}

.mouse-project.monocle .mouse {
    color: #eea433;
    background: #cb3b49
}

.mouse-project.besmartcampus .mouse {
    color: #fff;
    background: #118110
}

.mouse-project.bonesandrockets .mouse {
    color: #fff;
    background: #ff84c2
}

.mouse-project.personal .mouse {
    color: #fff;
    background: #fd3a5e
}

body.main-bg-out .main-bg {
    display: none
}

.sneaker {
    margin-top: 100vh;
    z-index: 30
}

.sneaker .main-bg {
    position: fixed;
    border-radius: 20px;
    content: "";
    display: block;
    background: 0;
    z-index: 10;
    opacity: 0;
    transition: background .5s ease;
    pointer-events: none
}

.sneaker .title {
    position: relative;
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background .5s ease
}

.sneaker .title ul, .sneaker .title p {
    color: #387c8d
}

.sneaker .title::before {
    position: sticky;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    display: block;
    border-radius: 50%;
    margin: 0 auto;
    z-index: -1;
    background: rgba(0, 255, 0, 0.5);
    transition: background .5s ease;
    display: none
}

.safari-grid-fix {
    display: grid
}

.sneak-preview {
    position: relative;
    margin: 0;
    z-index: 20
}

.sneak-preview::before {
    position: sticky;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    display: block;
    border-radius: 50%;
    margin: 0 auto;
    z-index: -1;
    transition: background .5s ease;
    display: none
}

.sneak-preview>div {
    position: relative;
    display: grid
}

.sneak-preview>div::before {
    position: absolute;
    content: "";
    display: block;
    background: #eaf4f5;
    border-radius: 20px;
    z-index: -1;
    box-shadow: 0 0 40px rgba(29, 29, 27, 0.2)
}

.sneak-preview>div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px
}

.sneak-preview .sneak-01 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.sneak-preview .sneak-02 {
    grid-template-columns: repeat(14, minmax(0, 1fr))
}

.sneak-preview .sneak-03 {
    grid-template-columns: repeat(16, minmax(0, 1fr))
}

.sneak-preview .item {
    border-radius: 20px;
    color: #FFF
}

.sneak-preview .item:nth-child(1) {
    position: relative
}

.sneak-preview .item:nth-child(1)::before {
    position: absolute;
    content: "";
    display: block;
    z-index: -1;
    border-radius: 20px
}

.sneak-preview .item img {
    opacity: 0
}

.more-projects {
    position: relative;
    width: 100%;
    top: 0;
    z-index: 30
}

.more-projects::before {
    position: relative;
    content: "";
    display: block;
    max-width: 100%;
    z-index: 1;
    background: #FFF;
    -webkit-mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat;
    mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat
}

.more-projects .project-container {
    position: relative;
    box-sizing: border-box
}

.more-projects .project-container .box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100lvh;
    background: url(../../assets/img/worm-projects@2x.jpg) no-repeat;
    background-size: cover;
    background-position: center
}

.more-projects .project-container .box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    background: url(../../assets/img/worm-projects-overlay@2x.png) no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .9;
    pointer-events: none
}

.more-projects .project-container .box .content {
    display: flex;
    flex-direction: column;
    color: #fff;
    text-align: center
}

.more-projects .project-container .box .content h3 {
    display: inline-block;
    color: #1d1d1b
}

.more-projects .project-container .box .content p {
    color: #ff9300
}

@media(min-width:300px) {
    .sneaker .main-bg {
        inset: 120px 15px 15px 15px
    }

    .sneaker .main-bg {
        inset: 15px
    }

    .sneaker .title {
        position: sticky;
        top: 100px
    }

    .sneaker .title h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px
    }

    .sneaker .title .ul, .sneaker .title p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px;
        padding-left: 60px;
        padding-right: 60px
    }

    .safari-grid-fix {
        margin: 0 20px 40px;
        margin: 0 10px 0;
        margin: 0 5px
    }

    .safari-grid-fix::after {
        bottom: -38px;
        width: 140px;
        height: 40px
    }

    .sneak-preview {
        padding: 40px 0 80px
    }

    .sneak-preview>div {
        gap: 10px
    }

    .sneak-preview>div.sneak-01 {
        padding: 0 0 40px
    }

    .sneak-preview>div.sneak-01::before {
        top: 14vw;
        right: 11vw;
        bottom: 20vw;
        left: 11vw
    }

    .sneak-preview>div.sneak-02 {
        padding: 40px 0
    }

    .sneak-preview>div.sneak-02::before {
        top: 0;
        right: 11vw;
        bottom: 14vw;
        left: 11vw
    }

    .sneak-preview>div.sneak-03 {
        padding: 40px 0 0
    }

    .sneak-preview>div.sneak-03::before {
        top: 4vw;
        right: 11vw;
        bottom: 25vw;
        left: 11vw
    }

    .sneak-preview>div img {
        box-shadow: 0 0 20px rgba(29, 29, 27, 0.3)
    }

    .sneak-preview .item h4 {
        font-size: 38px;
        line-height: 38px
    }

    .sneak-preview .item p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px
    }

    .sneak-preview .item.left {
        padding: 40px 0 40px 20px
    }

    .sneak-preview .item.right {
        padding: 40px 40px 40px 10px
    }

    .sneak-preview .sneak-01 .item:nth-child(1) {
        grid-column: 1/span 6;
        grid-row: 1/span 4
    }

    .sneak-preview .sneak-01 .item:nth-child(1)::before {
        top: 0;
        right: -75%;
        bottom: 0;
        left: 0
    }

    .sneak-preview .sneak-01 .item:nth-child(2) {
        grid-column: 7/span 6;
        grid-row: 3/span 6
    }

    .sneak-preview .sneak-01 .item:nth-child(3) {
        grid-column: 4/span 3;
        grid-row: 5/span 7
    }

    .sneak-preview .sneak-01 .item:nth-child(4) {
        grid-column: 2/span 2;
        grid-row: 10/span 2
    }

    .sneak-preview .sneak-01 .item:nth-child(5) {
        grid-column: 7/span 3;
        grid-row: 9/span 6
    }

    .sneak-preview .sneak-02 .item:nth-child(1) {
        grid-column: 7/span 8;
        grid-row: 3/span 5
    }

    .sneak-preview .sneak-02 .item:nth-child(1)::before {
        top: 0;
        right: 0;
        bottom: 0;
        left: -40%
    }

    .sneak-preview .sneak-02 .item:nth-child(2) {
        grid-column: 1/span 6;
        grid-row: 1/span 6
    }

    .sneak-preview .sneak-02 .item:nth-child(3) {
        grid-column: 2/span 6;
        grid-row: 8/span 5
    }

    .sneak-preview .sneak-02 .item:nth-child(4) {
        grid-column: 5/span 3;
        grid-row: 13/span 4
    }

    .sneak-preview .sneak-02 .item:nth-child(5) {
        grid-column: 8/span 3;
        grid-row: 9/span 6
    }

    .sneak-preview .sneak-03 .item:nth-child(1) {
        grid-column: 1/span 9;
        grid-row: 5/span 5
    }

    .sneak-preview .sneak-03 .item:nth-child(1)::before {
        top: 0;
        right: -57%;
        bottom: 0;
        left: 0
    }

    .sneak-preview .sneak-03 .item:nth-child(2) {
        grid-column: 4/span 5;
        grid-row: 1/span 4
    }

    .sneak-preview .sneak-03 .item:nth-child(3) {
        grid-column: 9/span 8;
        grid-row: 2/span 6
    }

    .sneak-preview .sneak-03 .item:nth-child(4) {
        grid-column: 8/span 6;
        grid-row: 8/span 6
    }

    .sneak-preview .sneak-03 .item:nth-child(5) {
        grid-column: 4/span 4;
        grid-row: 10/span 6
    }

    .sneak-preview .sneak-03 .item:nth-child(6) {
        grid-column: 8/span 6;
        grid-row: 14/span 4
    }

    .more-projects::before {
        height: 80px;
        margin: 0 15px -2px
    }

    .more-projects .project-container .box .content {
        padding: 0 40px
    }

    .more-projects .project-container .box .content h3 {
        font-size: 70px;
        line-height: 60px;
        margin-bottom: 20px
    }

    .more-projects .project-container .box .content p {
        font-size: 22px;
        margin: 10px 0 0
    }
}

@media(min-width:600px) {
    .sneaker .main-bg {
        inset: 30px
    }

    .sneaker .title {
        top: 130px
    }

    .sneaker .title h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px
    }

    .sneaker .title .ul, .sneaker .title p {
        font-size: 26px;
        line-height: 40px
    }

    .safari-grid-fix {
        margin: 0 30px 60px;
        margin: 0 30px 0
    }

    .safari-grid-fix::after {
        bottom: -58px;
        width: 210px;
        height: 60px
    }

    .sneak-preview {
        padding: 60px 5vw 120px
    }

    .sneak-preview>div {
        gap: 15px
    }

    .sneak-preview>div.sneak-01 {
        padding: 0 0 60px
    }

    .sneak-preview>div.sneak-01::before {
        top: 6vw;
        bottom: 14vw
    }

    .sneak-preview>div.sneak-02 {
        padding: 60px 0
    }

    .sneak-preview>div.sneak-03 {
        padding: 60px 0 0
    }

    .sneak-preview>div.sneak-03::before {
        right: 7vw;
        left: 7vw
    }

    .sneak-preview .item h4 {
        font-size: 44px;
        line-height: 44px
    }

    .sneak-preview .item p {
        font-size: 26px;
        line-height: 40px
    }

    .sneak-preview .item.left {
        padding: 60px 0 60px 60px
    }

    .sneak-preview .item.right {
        padding: 60px 60px 60px 30px
    }

    .more-projects::before {
        height: 140px;
        margin: 0 30px -2px
    }

    .more-projects .project-container .box .content h3 {
        font-size: 80px;
        line-height: 70px;
        margin-bottom: 30px
    }

    .more-projects .project-container .box .content p {
        font-size: 26px;
        margin: 10px 0 0
    }
}

@media(min-width:992px) {
    .sneaker .main-bg {
        inset: 40px
    }

    .sneaker .title {
        top: 160px
    }

    .sneaker .title h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px
    }

    .sneaker .title .ul, .sneaker .title p {
        font-size: 30px;
        line-height: 48px
    }

    .sneaker .title::before {
        height: 400px;
        width: 400px
    }

    .safari-grid-fix {
        margin: 0 40px 80px;
        margin: 0 40px
    }

    .safari-grid-fix::after {
        bottom: -78px;
        width: 280px;
        height: 100px
    }

    .sneak-preview {
        padding: 80px 10vw 160px
    }

    .sneak-preview::before {
        height: 400px;
        width: 400px
    }

    .sneak-preview>div {
        gap: 20px
    }

    .sneak-preview>div.sneak-01 {
        padding: 0 0 80px
    }

    .sneak-preview>div.sneak-01::before {
        right: 10vw;
        bottom: 13vw;
        left: 10vw
    }

    .sneak-preview>div.sneak-02 {
        padding: 80px 0
    }

    .sneak-preview>div.sneak-02::before {
        right: 10vw;
        bottom: 11vw;
        left: 10vw
    }

    .sneak-preview>div.sneak-03 {
        padding: 80px 0 0
    }

    .sneak-preview>div.sneak-03::before {
        right: 7vw;
        bottom: 30vw;
        left: 7vw
    }

    .sneak-preview>div img {
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.3)
    }

    .sneak-preview .item h4 {
        font-size: 54px;
        line-height: 54px
    }

    .sneak-preview .item p {
        font-size: 30px;
        line-height: 48px
    }

    .sneak-preview .item.left {
        padding: 80px 0 80px 80px
    }

    .sneak-preview .item.right {
        padding: 80px 80px 80px 40px
    }

    .sneak-preview .cultofpigeons .item:nth-child(1)::before {
        right: -50%
    }

    .more-projects::before {
        height: 200px;
        margin: 0 40px -2px
    }

    .more-projects .project-container .box .content h3 {
        font-size: 100px;
        line-height: 110px;
        margin-bottom: 40px
    }

    .more-projects .project-container .box .content p {
        font-size: 32px;
        margin: 0 0 40px
    }
}

@media(min-width:1400px) {
    .sneaker .main-bg {
        inset: 60px
    }

    .sneaker .title {
        top: 200px
    }

    .sneaker .title h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px
    }

    .sneaker .title .ul, .sneaker .title p {
        font-size: 36px;
        line-height: 60px
    }

    .safari-grid-fix {
        margin: 0 60px 120px;
        margin: 0 60px 0
    }

    .safari-grid-fix::after {
        bottom: -98px;
        width: 400px;
        height: 120px
    }

    .sneak-preview {
        max-width: 1800px;
        margin-inline: auto;
        box-sizing: border-box;
        padding: 120px 10vw 240px
    }

    .sneak-preview::before {
        top: -400px;
        bottom: -100px;
        width: 400px;
        border-radius: 200px 200px 0 0
    }

    .sneak-preview>div.sneak-01 {
        padding: 0 0 100px
    }

    .sneak-preview>div.sneak-01::before {
        top: 7vw;
        bottom: 15vw
    }

    .sneak-preview>div.sneak-02 {
        padding: 100px 0
    }

    .sneak-preview>div.sneak-03 {
        padding: 100px 0 0
    }

    .sneak-preview>div.sneak-03::before {
        top: 0;
        bottom: 20vw
    }

    .sneak-preview .item h4 {
        font-size: 70px;
        line-height: 70px
    }

    .sneak-preview .item p {
        font-size: 36px;
        line-height: 60px
    }

    .sneak-preview .item.left {
        padding: 100px 0 100px 100px
    }

    .sneak-preview .item.right {
        padding: 100px 100px 100px 60px
    }

    .more-projects::before {
        height: 280px;
        margin: 0 60px -2px
    }

    .more-projects .project-container .box .content h3 {
        font-size: 130px;
        line-height: 110px;
        margin-bottom: 60px
    }

    .more-projects .project-container .box .content p {
        font-size: 36px;
        margin: 20px 0 40px
    }
}

.transition-main {
    opacity: 1;
    transition: all 300ms ease-in-out
}

html.is-animating .transition-main {
    opacity: 0;
    transform: translateY(-100px)
}

html.is-leaving .transition-main {
    opacity: 0
}

.imgPH {
    position: relative;
    display: inline
}

.imgPH .ph {
    opacity: 0;
    width: 100%
}

.imgPH.showme::after {
    opacity: 0;
    animation: none
}

.project-summ {
    position: relative;
    background: #eaf4f5;
    background: #FFF;
    overflow: hidden;
    z-index: 9
}

.project-summ .project-summ-container {
    position: relative
}

.project-summ .project-summ-container::before, .project-summ .project-summ-container::after {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    z-index: 1;
    filter: drop-shadow(0 3px 20px rgba(29, 29, 27, 0.3));
    transform: translateZ(0)
}

.project-summ .project-summ-container::before {
    margin-top: -2px;
    background: url(../../assets/img/projectssumm-top.svg) no-repeat center top;
    background-size: 100%
}

.project-summ .project-summ-container::after {
    margin-bottom: -2px;
    background: url(../../assets/img/projectssumm-bottom.svg) no-repeat center bottom;
    background-size: 100%
}

.project-summ .go {
    position: relative;
    text-align: center;
    border-radius: 20px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 20
}

.project-summ .go h3 {
    color: #1d1d1b
}

.project-summ .go p {
    color: #387c8d
}

.project-summ .go .container {
    position: relative;
    border-radius: 20px;
    z-index: 20
}

.project-summ .snippets {
    display: flex;
    align-content: flex-start;
    margin: 0 auto;
    display: none
}

.project-summ .snippets div {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(29, 29, 27, 0.3)
}

.project-summ .snippets div img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.project-summ .snippets div:nth-child(1) {
    width: 20%;
    background: red;
    z-index: 1
}

.project-summ .snippets div:nth-child(2) {
    width: 15%;
    border-radius: 20px 0 0 20px;
    background: yellow;
    z-index: 2
}

.project-summ .snippets div:nth-child(3) {
    width: 30%;
    border-radius: 20px;
    background: lime;
    z-index: 3
}

.project-summ .snippets div:nth-child(4) {
    width: 20%;
    border-radius: 0 20px 20px 0;
    background: orange;
    z-index: 2
}

.project-summ .snippets div:nth-child(5) {
    width: 15%;
    background: lightblue;
    z-index: 1
}

.project-summ .peekaboo {
    position: fixed;
    top: 0;
    opacity: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none
}

.project-summ .peekaboo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@supports(-webkit-touch-callout:none) {
    .project-summ .peekaboo img {
        transform: translate3d(0, 0, 0)
    }
}

@media(min-width:300px) {
    .project-summ {
        margin: 0
    }

    .project-summ h3 {
        font-size: 38px;
        line-height: 38px;
        padding-bottom: 10px
    }

    .project-summ p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px
    }

    .project-summ .project-summ-container::before, .project-summ .project-summ-container::after {
        height: 120px
    }

    .project-summ .go {
        width: 70%;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(29, 29, 27, 0.3);
        margin-top: 160px;
        margin-bottom: 160px
    }

    .project-summ .go .container {
        padding: 30px 20px 40px
    }

    .project-summ .snippets {
        width: 100%
    }

    .project-summ .snippets div:nth-child(1) {
        height: 250px;
        width: 10%;
        margin-top: 110px;
        border-radius: 0
    }

    .project-summ .snippets div:nth-child(2) {
        height: 430px;
        width: 25%;
        margin-top: 60px
    }

    .project-summ .snippets div:nth-child(3) {
        height: 600px;
        width: 35%
    }

    .project-summ .snippets div:nth-child(4) {
        height: 450px;
        width: 20%;
        margin-top: 80px
    }

    .project-summ .snippets div:nth-child(5) {
        height: 200px;
        width: 10%;
        margin-top: 270px;
        border-radius: 0
    }

    .project-summ .peekaboo {
        left: 0;
        right: 0
    }
}

@media(min-width:600px) {
    .project-summ {
        margin: 0 20px
    }

    .project-summ h3 {
        font-size: 44px;
        line-height: 44px
    }

    .project-summ p {
        font-size: 26px;
        line-height: 40px
    }

    .project-summ .project-summ-container::before, .project-summ .project-summ-container::after {
        height: 160px
    }

    .project-summ .go {
        width: 450px;
        margin-top: 240px;
        margin-bottom: 240px
    }

    .project-summ .go .container {
        padding: 45px 30px 60px
    }

    .project-summ .snippets {
        width: 500px
    }

    .project-summ .snippets div:nth-child(1) {
        height: 300px;
        margin-top: 110px;
        border-radius: 20px 0 0 20px
    }

    .project-summ .snippets div:nth-child(2) {
        height: 500px;
        margin-top: 60px
    }

    .project-summ .snippets div:nth-child(3) {
        height: 600px
    }

    .project-summ .snippets div:nth-child(4) {
        height: 450px;
        margin-top: 80px
    }

    .project-summ .snippets div:nth-child(5) {
        height: 200px;
        margin-top: 270px;
        border-radius: 0 20px 20px 0
    }

    .project-summ .peekaboo {
        left: 40px;
        right: 40px
    }

    .brands::after, .doodles::after {
        position: absolute;
        content: "";
        pointer-events: none;
        z-index: 1;
        left: -20px;
        right: -20px;
        height: 500px;
        border-right: 20px solid #FFF;
        border-left: 20px solid #FFF
    }

    .brands::after {
        top: -300px
    }

    .doodles::after {
        bottom: -300px
    }
}

@media(min-width:992px) {
    .project-summ {
        margin: 0 35px
    }

    .project-summ h3 {
        font-size: 54px;
        line-height: 54px
    }

    .project-summ p {
        font-size: 30px;
        line-height: 48px
    }

    .project-summ .project-summ-container::before, .project-summ .project-summ-container::after {
        height: 240px
    }

    .project-summ .go {
        width: 700px;
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.3);
        margin-top: 320px;
        margin-bottom: 320px
    }

    .project-summ .go .container {
        padding: 60px 40px 80px
    }

    .project-summ .snippets {
        width: 840px
    }

    .project-summ .snippets div:nth-child(1) {
        width: 20%;
        height: 300px;
        margin-top: 180px
    }

    .project-summ .snippets div:nth-child(2) {
        width: 15%;
        height: 600px;
        margin-top: 100px
    }

    .project-summ .snippets div:nth-child(3) {
        width: 30%;
        height: 800px
    }

    .project-summ .snippets div:nth-child(4) {
        width: 20%;
        height: 520px;
        margin-top: 140px
    }

    .project-summ .snippets div:nth-child(5) {
        width: 15%;
        height: 250px;
        margin-top: 370px
    }

    .project-summ .peekaboo {
        left: 70px;
        right: 70px
    }

    .brands::after, .doodles::after {
        left: -35px;
        right: -35px;
        height: 500px;
        border-right: 35px solid #FFF;
        border-left: 35px solid #FFF
    }
}

@media(min-width:1400px) {
    .project-summ {
        margin: 0 50px
    }

    .project-summ h3 {
        font-size: 70px;
        line-height: 70px
    }

    .project-summ p {
        font-size: 36px;
        line-height: 60px
    }

    .project-summ .project-summ-container::before, .project-summ .project-summ-container::after {
        height: 320px
    }

    .project-summ .go {
        width: 900px;
        margin-top: 400px;
        margin-bottom: 400px
    }

    .project-summ .go .container {
        padding: 90px 60px 120px
    }

    .project-summ .snippets {
        width: 1150px
    }

    .project-summ .snippets div:nth-child(1) {
        height: 400px;
        margin-top: 225px
    }

    .project-summ .snippets div:nth-child(2) {
        height: 800px;
        margin-top: 100px
    }

    .project-summ .snippets div:nth-child(3) {
        height: 1100px
    }

    .project-summ .snippets div:nth-child(4) {
        height: 850px;
        margin-top: 160px
    }

    .project-summ .snippets div:nth-child(5) {
        height: 350px;
        margin-top: 500px
    }

    .project-summ .peekaboo {
        left: 100px;
        right: 100px
    }

    .brands::after, .doodles::after {
        left: -50px;
        right: -50px;
        height: 500px;
        border-right: 50px solid #FFF;
        border-left: 50px solid #FFF
    }
}

.contact .site>.content {
    position: relative;
    text-align: center;
    background: #eaf4f5;
    z-index: 20
}

.contact .site>.content h3 {
    color: #1d1d1b;
    padding: 0 15%
}

.contact .site>.content h3 span {
    color: #387c8d
}

.contact .site>.content p {
    color: #387c8d;
    padding: 0 15%
}

.contact .site>.content .ul {
    list-style-type: none;
    color: #387c8d
}

.contact .site>.content .ul li {
    position: relative
}

.contact .site>.content .ul li::before {
    position: absolute;
    display: block;
    content: "";
    background: #ff9300
}

@media(min-width:300px) {
    .contact .site>.content {
        padding: 0 0 40px 0
    }

    .contact .site>.content h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px
    }

    .contact .site>.content h4 {
        font-size: 38px;
        line-height: 38px
    }

    .contact .site>.content .ul, .contact .site>.content p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px
    }

    .contact .site>.content .ul {
        padding: 0 0 20px 34px
    }

    .contact .site>.content .ul li {
        position: relative
    }

    .contact .site>.content .ul li::before {
        top: 12px;
        left: -16px;
        width: 6px;
        height: 6px;
        border-radius: 3px
    }
}

@media(min-width:600px) {
    .contact .site>.content {
        padding: 0 0 60px 0;
        margin: 0 20px
    }

    .contact .site>.content h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px
    }

    .contact .site>.content h4 {
        font-size: 44px;
        line-height: 44px
    }

    .contact .site>.content .ul, .contact .site>.content p {
        font-size: 26px;
        line-height: 40px
    }

    .contact .site>.content .ul {
        padding: 0 0 30px 40px
    }

    .contact .site>.content .ul li {
        position: relative
    }

    .contact .site>.content .ul li::before {
        top: 18px;
        left: -18px;
        width: 7px;
        height: 7px;
        border-radius: 4px
    }
}

@media(min-width:992px) {
    .contact .site>.content {
        padding: 0 0 80px 0;
        margin: 0 35px
    }

    .contact .site>.content h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px
    }

    .contact .site>.content h4 {
        font-size: 54px;
        line-height: 54px
    }

    .contact .site>.content .ul, .contact .site>.content p {
        font-size: 30px;
        line-height: 48px
    }

    .contact .site>.content .ul {
        padding: 0 0 40px 40px
    }

    .contact .site>.content .ul li {
        position: relative
    }

    .contact .site>.content .ul li::before {
        top: 20px;
        left: -20px;
        width: 8px;
        height: 8px;
        border-radius: 4px
    }
}

@media(min-width:1400px) {
    .contact .site>.content {
        padding: 0 0 100px 0;
        margin: 0 50px
    }

    .contact .site>.content h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px
    }

    .contact .site>.content h4 {
        font-size: 70px;
        line-height: 70px
    }

    .contact .site>.content .ul, .contact .site>.content p {
        font-size: 36px;
        line-height: 60px
    }

    .contact .site>.content .ul {
        padding: 0 0 50px 60px
    }

    .contact .site>.content .ul li {
        position: relative
    }

    .contact .site>.content .ul li::before {
        top: 26px;
        left: -30px;
        width: 10px;
        height: 10px;
        border-radius: 5px
    }
}

.services {
    position: relative;
    z-index: 20;
    display: flex;
    background: #FFF
}

.services h3 {
    padding: 0 10%
}

.services h4 {
    color: #ff9300
}

.services h4:first-child {
    opacity: 1
}

.services .illustrations {
    display: flex;
    flex-direction: column
}

.services .illustrations .item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 20px;
    background: #fff;
    background: linear-gradient(0, #eaf4f5 0, #eaf4f5 50%, #fff 51%, #fff 100%)
}

.services .illustrations .item:nth-child(3), .services .illustrations .item:nth-child(4) {
    background: #fff;
    background: linear-gradient(0, #f4f9fa 0, #f4f9fa 50%, #fff 51%, #fff 100%)
}

.services .illustrations .item:nth-child(3) figure::before, .services .illustrations .item:nth-child(4) figure::before {
    background: #eaf4f5
}

.services .illustrations .item .content {
    width: 100%
}

.services .illustrations figure::before {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    z-index: 1;
    background: #f4f9fa;
    margin-bottom: -2px;
    -webkit-mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat;
    mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat
}

.services .illustrations figure img {
    position: relative;
    width: 100%;
    z-index: 10;
    border-radius: 0 0 20px 20px
}

.services .switch {
    position: relative
}

.services .switch figure:nth-of-type(1) {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
    opacity: 0;
    transition: .3s
}

.services .switch label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: block;
    background: #b9c0c8;
    border-radius: 200px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 -1px 15px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    z-index: 40
}

.services .switch label:after {
    content: "";
    position: absolute;
    background: #66707d;
    background: linear-gradient(135deg, #38404b, #66707d);
    border-radius: 200px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)
}

.services .switch input {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden
}

.services .switch input:checked+label {
    background: #ec5da5
}

.services .switch input:checked+label:after {
    background: linear-gradient(135deg, #b90750, #890235)
}

.services .switch label, .services .switch label:after {
    transition: .3s
}

.services .switch label span {
    position: absolute;
    display: block;
    color: #FFF;
    z-index: 100;
    pointer-events: none
}

.services .switch label span.ux {
    transition: .3s
}

.services .switch label span.ui {
    color: #66707d;
    transition: .3s
}

.services .switch input:checked+label span.ux {
    opacity: .7
}

.services .switch input:checked+label span.ui {
    color: #fff
}

.services .switch input:checked+label+figure {
    opacity: 1
}

@media(min-width:300px) {
    .services {
        flex-direction: column;
        text-align: center;
        padding: 80px 0 40px
    }

    .services h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px;
        padding-bottom: 20px
    }

    .services h4 {
        font-size: 38px;
        line-height: 38px;
        padding: 40px 20px 15px
    }

    .services .illustrations .item {
        padding-bottom: 40px;
        margin: 20px 20px 0
    }

    .services .illustrations .item:first-child h4 {
        padding-top: 0
    }

    .services .illustrations .item figure::before {
        height: 80px
    }

    .services .switch {
        padding-bottom: 60px
    }

    .services .switch label {
        width: 100px;
        height: 40px
    }

    .services .switch label:after {
        width: 50px;
        height: 30px;
        top: 5px;
        left: 5px
    }

    .services .switch label:active:after {
        width: 60px
    }

    .services .switch input:checked+label:active:after {
        left: 35px
    }

    .services .switch input:checked+label:after {
        left: 45px
    }

    .services .switch label span {
        top: 10px;
        width: 50px
    }

    .services .switch label span.ux {
        left: 5px
    }

    .services .switch label span.ui {
        left: 45px
    }
}

@media(min-width:600px) {
    .services {
        padding: 60px 10% 60px
    }

    .services h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px;
        padding-bottom: 30px
    }

    .services h4 {
        font-size: 44px;
        line-height: 44px;
        padding: 60px 30px 30px
    }

    .services .illustrations .item {
        padding-bottom: 60px;
        margin: 30px 30px 0
    }

    .services .illustrations .item figure::before {
        height: 120px
    }

    .services .switch {
        padding-bottom: 100px
    }

    .services .switch label {
        width: 140px;
        height: 50px;
        bottom: 20px
    }

    .services .switch label:after {
        width: 70px;
        height: 40px;
        top: 5px;
        left: 5px
    }

    .services .switch label:active:after {
        width: 80px
    }

    .services .switch input:checked+label:active:after {
        left: 55px
    }

    .services .switch input:checked+label:after {
        left: 65px
    }

    .services .switch label span {
        top: 10px;
        width: 70px;
        font-size: 23px
    }

    .services .switch label span.ux {
        left: 5px
    }

    .services .switch label span.ui {
        left: 65px
    }
}

@media(min-width:992px) {
    .services {
        padding: 80px 10% 80px
    }

    .services h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px;
        padding-bottom: 80px
    }

    .services h4 {
        font-size: 54px;
        line-height: 54px;
        padding: 40px 40px
    }

    .services .illustrations {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px
    }

    .services .illustrations .item {
        padding-bottom: 80px;
        margin: 0
    }

    .services .illustrations .item:nth-child(2) h4 {
        padding-top: 0
    }

    .services .illustrations .item figure::before {
        height: 130px
    }

    .services .illustrations .item .content {
        align-self: start
    }
}

@media(min-width:1400px) {
    .services {
        padding: 100px 10% 100px
    }

    .services h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px;
        padding-bottom: 120px
    }

    .services h4 {
        font-size: 70px;
        line-height: 70px;
        padding: 60px 60px
    }

    .services .illustrations .item {
        padding-bottom: 100px
    }

    .services .illustrations .item figure::before {
        height: 160px
    }
}

.br-quote {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: center;
    z-index: 20;
    pointer-events: auto
}

.br-quote .br-quote-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    border-radius: 20px;
    background: #eaf4f5;
    background: linear-gradient(315deg, rgba(255, 132, 194, 0.5) 0, rgba(255, 132, 194, 0.1) 100%)
}

.quotes {
    position: relative;
    z-index: 20;
    background: #FFF
}

.quotes::before, .quotes::after {
    left: 0;
    right: 0;
    content: "";
    display: block;
    max-width: 100%;
    z-index: 1;
    -webkit-mask: url("../../assets/img/projectssumm-top.svg") 0 0/100% 100% no-repeat;
    mask: url("../../assets/img/projectssumm-top.svg") 0 0/100% 100% no-repeat
}

.quotes::before {
    position: absolute;
    top: -2px;
    background: #FFF
}

.quotes::after {
    position: relative;
    bottom: 2px;
    background: #eaf4f5
}

.quotes .project-quote {
    position: relative;
    text-align: left;
    padding-bottom: 0;
    background: #eaf4f5;
    box-shadow: none
}

.quotes .project-quote::before {
    position: relative;
    content: "";
    display: block;
    background: #387c8d;
    -webkit-mask-image: url("../../assets/img/quote.svg");
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../../assets/img/quote.svg");
    mask-size: 100% auto;
    mask-repeat: no-repeat
}

.quotes .project-quote h3 span.highlight {
    color: #ff9300
}

.quotes .project-quote p {
    color: #387c8d
}

.quotes .project-quote .who.placeholder {
    position: relative;
    padding-left: 80px
}

.quotes .project-quote .who.placeholder .photo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    background: #FFF;
    border-radius: 50%;
    overflow: hidden
}

.quotes .project-quote .who.placeholder .photo img {
    display: block;
    width: 100%
}

.quotes.slides {
    overflow-x: clip
}

.quotes.slides::before, .quotes.slides::after {
    display: none
}

.quotes.slides h3 {
    text-align: center
}

.quotes.slides .project-quote-container {
    position: relative;
    display: grid;
    transition: all .3s ease-in-out
}

.quotes.slides .project-quote-container .project-quote {
    opacity: 0;
    align-self: center;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 0 40px rgba(29, 29, 27, 0.2);
    transform: scale(0.6);
    transition: all .3s ease-in-out
}

.quotes.slides .project-quote-container .project-quote::before {
    display: none
}

.quotes.slides .project-quote-container .project-quote p:first-child {
    position: relative
}

.quotes.slides .project-quote-container .project-quote p:first-child::before {
    position: relative;
    content: "";
    display: block;
    background: #387c8d;
    -webkit-mask-image: url("../../assets/img/quote.svg");
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../../assets/img/quote.svg");
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    z-index: 10
}

.quotes.slides.select1 .project-quote-container {
    left: 0
}

.quotes.slides.select1 .project-quote-container .project-quote:nth-child(1) {
    opacity: 1;
    transform: scale(1)
}

.quotes.slides.select2 .project-quote-container .project-quote:nth-child(2) {
    transform: scale(1);
    opacity: 1
}

.quotes.slides.select3 .project-quote-container .project-quote:nth-child(3) {
    opacity: 1;
    transform: scale(1)
}

.quotes.slides.select4 .project-quote-container .project-quote:nth-child(4) {
    opacity: 1;
    transform: scale(1)
}

.quotes.slides .pager {
    display: flex;
    justify-content: center
}

.quotes.slides .pager .page {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    text-indent: -99999px;
    background: #ff9300;
    transition: all .2s ease
}

.quotes.slides .pager .page.select {
    background: #1d1d1b
}

@media(hover:hover) {
    .quotes.slides .pager .page:hover {
        cursor: pointer;
        transform: scale(1.3)
    }
}

.case .quotes {
    padding-bottom: 0
}

.case .quotes::after {
    position: absolute;
    bottom: -2px;
    -webkit-mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat;
    mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat;
    background: #FFF
}

.contact .quotes {
    background: #eaf4f5
}

.projects .quotes.slides {
    background: #eaf4f5
}

.projects .quotes.slides::before, .projects .quotes.slides::after {
    display: block
}

.projects .quotes.slides::after {
    position: absolute;
    bottom: -2px;
    -webkit-mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat;
    mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat;
    background: #FFF
}

@media(min-width:300px) {
    .quotes h3, .br-quote h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px
    }

    .quotes h4, .br-quote h4 {
        font-size: 38px;
        line-height: 38px
    }

    .quotes p, .br-quote p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px
    }

    .br-quote {
        width: 100%
    }

    .br-quote .br-quote-container {
        margin: 25px;
        padding: 40px 40px 30px
    }

    .br-quote:nth-child(odd) {
        margin-top: 0
    }

    .quotes {
        padding: 0 0 25px
    }

    .quotes::before, .quotes::after {
        height: 80px
    }

    .quotes .pager {
        margin: 20px 0 40px
    }

    .quotes .pager .page {
        width: 15px;
        margin: 0 10px
    }

    .quotes .project-quote {
        padding: 120px 40px 20px
    }

    .quotes .project-quote::before {
        width: 30px;
        height: 30px;
        padding-bottom: 10px
    }

    .quotes .project-quote h3 {
        padding-bottom: 20px
    }

    .quotes .project-quote .who {
        padding-top: 10px
    }

    .quotes .project-quote .who .name {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px;
        font-weight: 600
    }

    .quotes .project-quote .who .job {
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 10px;
        font-weight: 500;
        margin-top: -20px
    }

    .quotes .project-quote .who.placeholder {
        padding: 10px 0 10px 70px
    }

    .quotes .project-quote .who.placeholder .photo {
        left: -10px;
        width: 70px
    }

    .quotes .project-quote .who.placeholder .job {
        padding-bottom: 0
    }

    .quotes.slides {
        padding-bottom: 80px
    }

    .quotes.slides .project-quote-container {
        grid-template-columns: repeat(4, 100vw)
    }

    .quotes.slides .project-quote-container .project-quote {
        padding: 30px;
        margin: 0 40px
    }

    .quotes.slides .project-quote-container .project-quote p:first-child::before {
        width: 20px;
        height: 20px
    }

    .quotes.slides.select2 .project-quote-container {
        left: -100vw
    }

    .quotes.slides.select3 .project-quote-container {
        left: -200vw
    }

    .quotes.slides.select4 .project-quote-container {
        left: -300vw
    }

    .case .quotes .project-quote {
        padding-bottom: 120px
    }

    .contact .quotes {
        margin: 0
    }

    .projects .quotes.slides {
        padding-bottom: 160px
    }

    .projects .quotes.slides h3 {
        padding-top: 120px
    }
}

@media(min-width:600px) {
    .quotes h3, .br-quote h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px
    }

    .quotes h4, .br-quote h4 {
        font-size: 44px;
        line-height: 44px
    }

    .quotes p, .br-quote p {
        font-size: 26px;
        line-height: 40px
    }

    .br-quote {
        width: calc(50% - 15px);
        min-height: 450px
    }

    .br-quote .br-quote-container {
        margin: 20px;
        padding: 0 10%
    }

    .br-quote:nth-child(odd) {
        margin-top: -125px
    }

    .quotes {
        padding: 0 0 50px
    }

    .quotes::before, .quotes::after {
        height: 140px
    }

    .quotes .pager {
        margin: 20px 0 40px
    }

    .quotes .pager .page {
        width: 20px;
        margin: 0 10px
    }

    .quotes .project-quote {
        padding: 200px 10% 20px
    }

    .quotes .project-quote::before {
        width: 40px;
        height: 40px;
        padding-bottom: 20px
    }

    .quotes .project-quote h3 {
        padding-bottom: 30px
    }

    .quotes .project-quote .who {
        padding-top: 20px
    }

    .quotes .project-quote .who .name {
        font-size: 26px;
        line-height: 40px
    }

    .quotes .project-quote .who .job {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px;
        margin-top: -25px
    }

    .quotes .project-quote .who.placeholder {
        padding: 20px 0 20px 90px
    }

    .quotes .project-quote .who.placeholder .photo {
        left: -15px;
        width: 90px
    }

    .quotes.slides {
        padding-bottom: 160px
    }

    .quotes.slides .project-quote-container {
        grid-template-columns: repeat(4, calc(100vw - 40px))
    }

    .quotes.slides .project-quote-container .project-quote {
        padding: 45px;
        margin: 0 10%
    }

    .quotes.slides .project-quote-container .project-quote p:first-child::before {
        width: 25px;
        height: 25px
    }

    .quotes.slides.select2 .project-quote-container {
        left: calc((100vw - 40px) * -1)
    }

    .quotes.slides.select3 .project-quote-container {
        left: calc((100vw - 40px) * -2)
    }

    .quotes.slides.select4 .project-quote-container {
        left: calc((100vw - 40px) * -3)
    }

    .case .quotes .project-quote {
        padding-bottom: 220px
    }

    .contact .quotes {
        margin: -2px 20px 0
    }

    .projects .quotes.slides {
        padding-bottom: 240px
    }

    .projects .quotes.slides h3 {
        padding-top: 200px
    }
}

@media(min-width:992px) {
    .quotes h3, .br-quote h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px
    }

    .quotes h4, .br-quote h4 {
        font-size: 54px;
        line-height: 54px
    }

    .quotes p, .br-quote p {
        font-size: 30px;
        line-height: 48px
    }

    .br-quote {
        width: calc(50% - 20px);
        min-height: 650px
    }

    .br-quote .br-quote-container {
        margin: 30px;
        padding: 0 10%
    }

    .br-quote:nth-child(odd) {
        margin-top: -175px
    }

    .quotes {
        padding: 0 0 75px
    }

    .quotes::before, .quotes::after {
        height: 200px
    }

    .quotes .pager {
        margin: 30px 0 60px
    }

    .quotes .pager .page {
        width: 20px;
        margin: 0 10px
    }

    .quotes .project-quote {
        padding: 300px 10% 30px
    }

    .quotes .project-quote::before {
        width: 50px;
        height: 50px;
        padding-bottom: 30px
    }

    .quotes .project-quote h3 {
        padding-bottom: 40px
    }

    .quotes .project-quote .who {
        padding-top: 30px
    }

    .quotes .project-quote .who .name {
        font-size: 30px;
        line-height: 48px
    }

    .quotes .project-quote .who .job {
        font-size: 26px;
        line-height: 40px;
        margin-top: -25px
    }

    .quotes .project-quote .who.placeholder {
        padding: 30px 0 30px 110px
    }

    .quotes .project-quote .who.placeholder .photo {
        left: -20px;
        width: 110px
    }

    .quotes.slides {
        padding-bottom: 240px
    }

    .quotes.slides .project-quote-container {
        grid-template-columns: repeat(4, calc(100vw - 70px))
    }

    .quotes.slides .project-quote-container .project-quote {
        padding: 60px;
        margin: 0 15%
    }

    .quotes.slides .project-quote-container .project-quote p:first-child::before {
        width: 30px;
        height: 30px
    }

    .quotes.slides.select2 .project-quote-container {
        left: calc((100vw - 70px) * -1)
    }

    .quotes.slides.select3 .project-quote-container {
        left: calc((100vw - 70px) * -2)
    }

    .quotes.slides.select4 .project-quote-container {
        left: calc((100vw - 70px) * -3)
    }

    .case .quotes .project-quote {
        padding-bottom: 320px
    }

    .contact .quotes {
        margin: -2px 35px 0
    }

    .projects .quotes.slides {
        padding-bottom: 360px
    }

    .projects .quotes.slides h3 {
        padding-top: 300px
    }
}

@media(min-width:1400px) {
    .quotes h3, .br-quote h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px
    }

    .quotes h4, .br-quote h4 {
        font-size: 70px;
        line-height: 70px
    }

    .quotes p, .br-quote p {
        font-size: 36px;
        line-height: 60px
    }

    .br-quote {
        width: calc(50% - 30px);
        min-height: 850px
    }

    .br-quote .br-quote-container {
        margin: 50px;
        padding: 0 10%
    }

    .br-quote:nth-child(odd) {
        margin-top: -250px
    }

    .quotes {
        padding: 0 0 125px
    }

    .quotes::before, .quotes::after {
        height: 280px
    }

    .quotes .pager {
        margin: 30px 0 100px
    }

    .quotes .pager .page {
        width: 30px;
        margin: 0 20px
    }

    .quotes .project-quote {
        padding: 400px 10% 50px
    }

    .quotes .project-quote::before {
        width: 60px;
        height: 60px;
        padding-bottom: 50px
    }

    .quotes .project-quote h3 {
        padding-bottom: 60px
    }

    .quotes .project-quote .who {
        padding-top: 50px
    }

    .quotes .project-quote .who .name {
        font-size: 36px;
        line-height: 60px;
        font-weight: 600
    }

    .quotes .project-quote .who .job {
        font-size: 30px;
        line-height: 48px;
        font-weight: 500;
        margin-top: -30px
    }

    .quotes .project-quote .who.placeholder {
        padding: 50px 0 50px 130px
    }

    .quotes .project-quote .who.placeholder .photo {
        left: -25px;
        width: 130px
    }

    .quotes.slides {
        padding-bottom: 300px
    }

    .quotes.slides .project-quote-container {
        grid-template-columns: repeat(4, calc(100vw - 100px))
    }

    .quotes.slides .project-quote-container .project-quote {
        padding: 90px;
        margin: 0 15%
    }

    .quotes.slides .project-quote-container .project-quote p:first-child::before {
        width: 35px;
        height: 35px
    }

    .quotes.slides.select2 .project-quote-container {
        left: calc((100vw - 100px) * -1)
    }

    .quotes.slides.select3 .project-quote-container {
        left: calc((100vw - 100px) * -2)
    }

    .quotes.slides.select4 .project-quote-container {
        left: calc((100vw - 100px) * -3)
    }

    .case .quotes .project-quote {
        padding-bottom: 430px
    }

    .contact .quotes {
        margin: -2px 50px 0
    }

    .projects .quotes.slides {
        padding-bottom: 500px
    }

    .projects .quotes.slides h3 {
        padding-top: 400px
    }
}

.nrs {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100lvh;
    overflow: hidden;
    background: #1d1d1b;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity .3s ease-in-out
}

.nrs::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    aspect-ratio: 1/1;
    background: url(../../assets/img/projects/gemspecial/gem-lock@4x.jpg) no-repeat 0 0;
    background-size: 100%
}

.nrs .nrs-container {
    position: relative;
    text-align: center;
    text-transform: uppercase
}

.nrs .nrs-container span {
    display: inline-block;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.nrs .nrs-container span.select, .nrs .nrs-container span:active {
    color: #FFF;
    background: #ff9300
}

.nrs .nrs-container span:nth-child(1) {
    transition-delay: 0s
}

.nrs .nrs-container span:nth-child(2) {
    transition-delay: .05s
}

.nrs .nrs-container span:nth-child(3) {
    transition-delay: .1s
}

.nrs .nrs-container span:nth-child(4) {
    transition-delay: .15s
}

.nrs .nrs-container span:nth-child(5) {
    transition-delay: .2s
}

.nrs .nrs-container span:nth-child(6) {
    transition-delay: .25s
}

.nrs .nrs-container span:nth-child(7) {
    transition-delay: .3s
}

.nrs .nrs-container span:nth-child(8) {
    transition-delay: .35s
}

.nrs .nrs-container span:nth-child(9) {
    transition-delay: .4s
}

.nrs .nrs-container span:nth-child(10) {
    transition-delay: .45s
}

.nrs .nrs-container span:nth-child(11) {
    transition-delay: .5s
}

.nrs .nrs-container span:nth-child(12) {
    transition-delay: .55s
}

.nrs .nrs-container span:nth-child(13) {
    transition-delay: .6s
}

.nrs .nrs-container span:nth-child(14) {
    transition-delay: .65s
}

.nrs .nrs-container span:nth-child(15) {
    transition-delay: .7s
}

.nrs .nrs-container span:nth-child(16) {
    transition-delay: .75s
}

.nrs .nrs-container span:nth-child(17) {
    transition-delay: .8s
}

.nrs .nrs-container span:nth-child(18) {
    transition-delay: .85s
}

.nrs .nrs-container span:nth-child(19) {
    transition-delay: .9s
}

.nrs .nrs-container span:nth-child(20) {
    transition-delay: .95s
}

body.show-nrs {
    overflow: hidden
}

body.show-nrs .nrs {
    pointer-events: all;
    opacity: 1;
    z-index: 99
}

body.show-nrs .nrs .nrs-container span {
    opacity: 1
}

@media(min-width:300px) {
    .nrs::before {
        width: 180%
    }

    .nrs .nrs-container {
        padding: 0 10%
    }

    .nrs .nrs-container span {
        margin: 10px
    }
}

@media(min-width:600px) {
    .nrs::before {
        width: 90%
    }
}

@media(min-width:992px) {
    .nrs .nrs-container span {
        margin: 20px
    }
}

.gem-special {
    position: fixed;
    display: grid;
    align-items: center;
    width: 100%;
    z-index: 30;
    transition: all .3s ease-out;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
    transform-origin: 50% bottom;
    filter: drop-shadow(0 0 20px rgba(29, 29, 27, 0.3))
}

.gem-special .btn {
    pointer-events: all;
    text-align: center
}

@media(hover:hover) {
    .gem-special .btn:hover {
        cursor: pointer
    }
}

.gem-baby-modal {
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 100dvh;
    background: #ff9300;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-out
}

.gem-baby-modal .close {
    position: absolute;
    content: "";
    display: block;
    cursor: pointer;
    z-index: 10
}

.gem-baby-modal .close span {
    display: block;
    aspect-ratio: 1/1;
    text-indent: -999px;
    overflow: hidden;
    background: url(../../assets/img/close.svg) no-repeat 0 0
}

.gem-baby-modal .close::before {
    position: absolute;
    inset: 0;
    opacity: 0;
    content: "";
    display: block;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #ff9300;
    z-index: -1;
    transition: all .2s ease
}

.gem-baby-modal .gem-baby-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    overflow-x: clip;
    color: #FFF;
    text-align: center;
    box-sizing: border-box;
    background: #1d1d1b
}

.gem-baby-modal .gem-baby-container figure {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden
}

.gem-baby-modal .gem-baby-container .highlight {
    color: #ff9300
}

html.gem-baby body .gem-special {
    transform: scale(100%);
    opacity: 1
}

html.gem-baby-modal-show body {
    overflow: hidden
}

html.gem-baby-modal-show .gem-baby-modal {
    opacity: 1;
    pointer-events: all
}

@media(min-width:300px) {
    .gem-baby .hamburger nav {
        padding-bottom: 80px
    }

    .gem-baby .gem-special {
        bottom: 30px
    }

    .gem-baby-modal .close {
        top: 40px;
        right: 40px
    }

    .gem-baby-modal .close span {
        width: 20px
    }
}

@media(min-width:300px) and (hover:hover) {
    .gem-baby-modal .close:hover::before {
        opacity: 1;
        inset: -20px
    }
}

@media(min-width:300px) {
    .gem-baby-modal .gem-baby-container {
        padding: 40px 0
    }

    .gem-baby-modal .gem-baby-container figure {
        padding: 20px 0;
        width: 250px
    }

    .gem-baby-modal .gem-baby-container figure img {
        width: 100%
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px;
        padding-bottom: 20px
    }
}

@media(min-width:300px) {
    html.gem-baby body footer {
        padding-bottom: 70px
    }
}

@media(min-width:600px) {
    .gem-baby .hamburger nav {
        padding-bottom: 0
    }

    .gem-baby .gem-special {
        bottom: 40px
    }

    .gem-baby-modal .close {
        top: 60px;
        right: 60px
    }

    .gem-baby-modal .gem-baby-container {
        padding: 60px 0
    }

    .gem-baby-modal .gem-baby-container figure {
        padding: 30px 0;
        width: 280px
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content p {
        font-size: 26px;
        line-height: 40px;
        padding-bottom: 30px
    }

    html.gem-baby body footer {
        padding-bottom: 90px
    }
}

@media(min-width:992px) {
    .gem-baby .hamburger nav {
        padding-bottom: 40px
    }

    .gem-baby .gem-special {
        bottom: 50px
    }

    .gem-baby-modal .close {
        top: 80px;
        right: 80px
    }

    .gem-baby-modal .close span {
        width: 25px
    }
}

@media(min-width:992px) and (hover:hover) {
    .gem-baby-modal .close:hover::before {
        inset: -30px
    }
}

@media(min-width:992px) {
    .gem-baby-modal .gem-baby-container {
        padding: 80px 0
    }

    .gem-baby-modal .gem-baby-container figure {
        padding: 0 0 40px 0;
        width: 380px
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content p {
        font-size: 30px;
        line-height: 48px;
        padding-bottom: 40px
    }
}

@media(min-width:992px) {
    html.gem-baby body footer {
        padding-bottom: 130px
    }
}

@media(min-width:1400px) {
    .gem-baby .hamburger nav {
        padding-bottom: 0
    }

    .gem-baby .gem-special {
        bottom: 60px
    }

    .gem-baby-modal .close {
        top: 90px;
        right: 90px
    }

    .gem-baby-modal .close span {
        width: 30px
    }
}

@media(min-width:1400px) and (hover:hover) {
    .gem-baby-modal .close:hover::before {
        inset: -40px
    }
}

@media(min-width:1400px) {
    .gem-baby-modal .gem-baby-container {
        padding: 100px 0
    }

    .gem-baby-modal .gem-baby-container figure {
        padding: 0 0 60px 0;
        width: 480px
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px
    }

    .gem-baby-modal .gem-baby-container .gem-baby-content p {
        font-size: 36px;
        line-height: 60px;
        padding-bottom: 60px
    }
}

@media(min-width:1400px) {
    html.gem-baby body footer {
        padding-bottom: 170px
    }
}

body.error-stuff, body.error-gem-stuff {
    background: #1d1d1b
}

body.error-stuff .fadert, body.error-gem-stuff .fadert {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #FFF;
    z-index: 100;
    pointer-events: none
}

body.error-stuff footer, body.error-gem-stuff footer {
    color: #FFF;
    height: auto;
    background: 0
}

body.error-stuff .site, body.error-gem-stuff .site {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100svh
}

body.error-stuff .site .content, body.error-gem-stuff .site .content {
    text-align: center
}

body.error-stuff .site .content h1, body.error-gem-stuff .site .content h1 {
    color: #FFF
}

body.error-stuff .site .content h1 span, body.error-gem-stuff .site .content h1 span {
    color: #ff9300
}

body.error-stuff .site .content p, body.error-gem-stuff .site .content p {
    color: #FFF
}

body.error-stuff .site .content p a.link, body.error-gem-stuff .site .content p a.link {
    margin: 0;
    color: #ff9300;
    text-decoration: underline
}

body.error-stuff .site .content figure, body.error-gem-stuff .site .content figure {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90svh;
    transition: all .5s ease
}

body.error-stuff .site .content figure img, body.error-gem-stuff .site .content figure img {
    object-fit: contain
}

body.error-stuff .site .content .alert, body.error-gem-stuff .site .content .alert {
    position: relative;
    display: inline-block;
    background: #eaf4f5
}

body.error-stuff .site .content .alert p, body.error-gem-stuff .site .content .alert p {
    color: #1d1d1b
}

body.error-stuff .site .content .alert p .link, body.error-gem-stuff .site .content .alert p .link {
    color: #ff84c2;
    text-decoration: none;
    transition: color .3s ease
}

@media(hover:hover) {
    body.error-stuff .site .content .alert p .link:hover, body.error-gem-stuff .site .content .alert p .link:hover {
        color: #1d1d1b
    }
}

body.error-stuff .site .content .alert::before, body.error-stuff .site .content .alert::after, body.error-gem-stuff .site .content .alert::before, body.error-gem-stuff .site .content .alert::after {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    z-index: 1
}

body.error-stuff .site .content .alert::before, body.error-gem-stuff .site .content .alert::before {
    margin-bottom: -2px;
    background: #1d1d1b url(../../assets/img/projectssumm-bottom.svg) no-repeat center bottom;
    background-size: 100%
}

body.error-stuff .site .content .alert::after, body.error-gem-stuff .site .content .alert::after {
    margin-top: -2px;
    background-size: 100%;
    background: #1d1d1b url(../../assets/img/projectssumm-top.svg) no-repeat center top
}

@media(min-width:300px) {
    body.error-stuff .site .content .tell-me, body.error-gem-stuff .site .content .tell-me {
        padding: 0 40px
    }

    body.error-stuff .site .content h1, body.error-gem-stuff .site .content h1 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px
    }

    body.error-stuff .site .content p, body.error-gem-stuff .site .content p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px
    }

    body.error-stuff .site .content a, body.error-gem-stuff .site .content a {
        margin: 0 5px 10px
    }

    body.error-stuff .site .content figure, body.error-gem-stuff .site .content figure {
        max-height: 600px
    }

    body.error-stuff .site .content figure img, body.error-gem-stuff .site .content figure img {
        width: 90%;
        height: 90%
    }

    body.error-stuff .site .content .btn-row, body.error-gem-stuff .site .content .btn-row {
        padding: 20px 40px
    }

    body.error-stuff .site .content .alert, body.error-gem-stuff .site .content .alert {
        max-width: 350px;
        margin: 40px
    }

    body.error-stuff .site .content .alert p, body.error-gem-stuff .site .content .alert p {
        padding: 0 20px
    }

    body.error-stuff .site .content .alert::before, body.error-stuff .site .content .alert::after, body.error-gem-stuff .site .content .alert::before, body.error-gem-stuff .site .content .alert::after {
        height: 80px
    }

    body.error-stuff footer, body.error-gem-stuff footer {
        padding: 40px 0 60px
    }
}

@media(min-width:600px) {
    body.error-stuff .site .content h1, body.error-gem-stuff .site .content h1 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px
    }

    body.error-stuff .site .content p, body.error-gem-stuff .site .content p {
        font-size: 26px;
        line-height: 40px
    }

    body.error-stuff .site .content a, body.error-gem-stuff .site .content a {
        margin-right: 15px
    }

    body.error-stuff .site .content figure, body.error-gem-stuff .site .content figure {
        max-height: 700px
    }

    body.error-stuff .site .content .btn-row, body.error-gem-stuff .site .content .btn-row {
        padding: 30px 0
    }

    body.error-stuff .site .content .alert, body.error-gem-stuff .site .content .alert {
        max-width: 450px;
        margin: 60px 0
    }

    body.error-stuff .site .content .alert p, body.error-gem-stuff .site .content .alert p {
        padding: 0 30px
    }

    body.error-stuff .site .content .alert::before, body.error-stuff .site .content .alert::after, body.error-gem-stuff .site .content .alert::before, body.error-gem-stuff .site .content .alert::after {
        height: 100px
    }
}

@media(min-width:992px) {
    body.error-stuff .site .content h1, body.error-gem-stuff .site .content h1 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px
    }

    body.error-stuff .site .content p, body.error-gem-stuff .site .content p {
        font-size: 30px;
        line-height: 48px
    }

    body.error-stuff .site .content a, body.error-gem-stuff .site .content a {
        margin-right: 20px
    }

    body.error-stuff .site .content figure, body.error-gem-stuff .site .content figure {
        max-height: 800px
    }

    body.error-stuff .site .content .btn-row, body.error-gem-stuff .site .content .btn-row {
        padding: 40px 0
    }

    body.error-stuff .site .content .alert, body.error-gem-stuff .site .content .alert {
        max-width: 550px;
        margin: 80px 0
    }

    body.error-stuff .site .content .alert p, body.error-gem-stuff .site .content .alert p {
        padding: 0 40px
    }

    body.error-stuff .site .content .alert::before, body.error-stuff .site .content .alert::after, body.error-gem-stuff .site .content .alert::before, body.error-gem-stuff .site .content .alert::after {
        height: 130px
    }
}

@media(min-width:1400px) {
    body.error-stuff .site .content h1, body.error-gem-stuff .site .content h1 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px
    }

    body.error-stuff .site .content p, body.error-gem-stuff .site .content p {
        font-size: 36px;
        line-height: 60px
    }

    body.error-stuff .site .content a, body.error-gem-stuff .site .content a {
        margin-right: 30px
    }

    body.error-stuff .site .content figure, body.error-gem-stuff .site .content figure {
        max-height: 1000px
    }

    body.error-stuff .site .content .btn-row, body.error-gem-stuff .site .content .btn-row {
        padding: 60px 0
    }

    body.error-stuff .site .content .alert, body.error-gem-stuff .site .content .alert {
        max-width: 650px;
        margin: 100px 0
    }

    body.error-stuff .site .content .alert p, body.error-gem-stuff .site .content .alert p {
        padding: 0 60px
    }

    body.error-stuff .site .content .alert::before, body.error-stuff .site .content .alert::after, body.error-gem-stuff .site .content .alert::before, body.error-gem-stuff .site .content .alert::after {
        height: 160px
    }
}

.scoop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100lvh;
    display: grid;
    opacity: 1;
    text-align: center;
    background: #1d1d1b;
    z-index: 101;
    overflow: hidden;
    background: #1d1d1b url("../../assets/img/projects/gemspecial/gem-scoop@4x.jpg") center center no-repeat;
    animation: show-scoope 1s forwards ease-in;
    clip-path: inset(50% round 50%);
    transition: opacity 0s ease .9s
}

.scoop.hide-scoop {
    opacity: 0;
    animation: hide-scoope .8s forwards ease-out
}

@keyframes show-scoope {
    0% {
        clip-path: inset(50% round 50px)
    }

    30% {
        clip-path: inset(47% round 50px)
    }

    40% {
        clip-path: inset(47% 20px round 50px)
    }

    80% {
        clip-path: inset(35% 20px round 50px)
    }

    100% {
        clip-path: inset(0 round 0)
    }
}

@keyframes hide-scoope {
    0% {
        clip-path: inset(0 round 0)
    }

    20% {
        clip-path: inset(35% 20px round 50px)
    }

    60% {
        clip-path: inset(49% 20px round 50px)
    }

    70% {
        clip-path: inset(49% round 50px)
    }

    100% {
        clip-path: inset(50% round 50px)
    }
}

.scoop .scoop-content {
    position: relative;
    align-self: center;
    z-index: 2
}

.scoop .scoop-content h3, .scoop .scoop-content p {
    color: #FFF;
    text-shadow: 0 10px 20px #1d1d1b
}

.scoop .scoop-content h3 .highlight, .scoop .scoop-content p .highlight {
    color: #ff9300
}

.scoop .scoop-content .close {
    position: relative;
    cursor: pointer;
    display: inline-block;
    z-index: 10;
    opacity: 0;
    transition: opacity .2s ease
}

.scoop .scoop-content .close span {
    display: block;
    aspect-ratio: 1/1;
    text-indent: -999px;
    overflow: hidden;
    background: url(../../assets/img/close.svg) no-repeat 0 0
}

.scoop .scoop-content .close::before {
    position: absolute;
    inset: 0;
    opacity: 0;
    content: "";
    display: block;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #ff9300;
    z-index: -1;
    transition: all .2s ease
}

@media(min-width:300px) {
    .scoop {
        background-size: 700px
    }

    .scoop .scoop-content h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px
    }

    .scoop .scoop-content p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px
    }

    .scoop .scoop-content .close span {
        width: 20px
    }
}

@media(min-width:300px) and (hover:hover) {
    .scoop .scoop-content .close:hover::before {
        opacity: 1;
        inset: -20px
    }
}

@media(min-width:600px) {
    .scoop {
        background-size: 900px
    }

    .scoop .scoop-content h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px
    }

    .scoop .scoop-content p {
        font-size: 26px;
        line-height: 40px
    }
}

@media(min-width:992px) {
    .scoop {
        background-size: 1100px
    }

    .scoop .scoop-content h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px
    }

    .scoop .scoop-content p {
        font-size: 30px;
        line-height: 48px
    }

    .scoop .scoop-content .close span {
        width: 25px
    }
}

@media(min-width:992px) and (hover:hover) {
    .scoop .scoop-content .close:hover::before {
        inset: -30px
    }
}

@media(min-width:1400px) {
    .scoop {
        background-size: 1200px
    }

    .scoop .scoop-content h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px
    }

    .scoop .scoop-content p {
        font-size: 36px;
        line-height: 60px
    }

    .scoop .scoop-content .close span {
        width: 30px
    }
}

@media(min-width:1400px) and (hover:hover) {
    .scoop .scoop-content .close:hover::before {
        inset: -40px
    }
}

.case .case-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    z-index: 30
}

.case .case-hero .content {
    z-index: 20
}

.case .case-hero .content h1, .case .case-hero .content h2 {
    color: #FFF;
    text-shadow: 0 10px 20px rgba(29, 29, 27, 0.2)
}

.case .case-hero figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, transparent 1%, black 50%);
    mask-image: linear-gradient(to top, transparent 1%, black 50%)
}

.case .case-hero figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: growBaby 50s 2s forwards;
    transform: translate3d(0, 0, 0)
}

@keyframes growBaby {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.3)
    }
}

.case .case-hero::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    content: "";
    display: block;
    z-index: 20;
    width: 240px;
    height: 42px;
    background: url("../../assets/img/yes-you-can-scroll.svg") no-repeat center bottom
}

.case .case-container {
    position: relative;
    z-index: 20
}

.case .case-container h3 {
    color: #1d1d1b
}

.case .case-container h3 span {
    color: #387c8d
}

.case .case-container p {
    color: #387c8d
}

.case .case-container .ul {
    list-style-type: none;
    color: #387c8d
}

.case .case-container .ul li {
    position: relative
}

.case .case-container .ul li::before {
    position: absolute;
    display: block;
    content: "";
    background: #ff9300
}

.case .case-container .content {
    position: relative;
    text-align: center;
    z-index: 20
}

.case .case-container .content p:last-child, .case .case-container .content h3:last-child {
    padding-bottom: 0;
    margin-bottom: 0
}

.case .case-container .content.fw {
    margin: 0
}

.case .case-container .content.fw p {
    font-size: 17vw;
    line-height: 10vw;
    font-weight: 800
}

.case .case-container .content.fw p:last-child {
    font-size: 13vw;
    line-height: 17vw
}

.case .case-container .content.no-space-b {
    margin-bottom: 0
}

.case .case-container .content.left-align {
    text-align: left
}

.case .case-container .img-mobile {
    position: relative
}

.case .case-container .img-mobile .set-03 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

.case .case-container .img-mobile .set-03 .images {
    position: relative
}

.case .case-container .img-mobile .set-03 .images:nth-child(1) {
    align-self: center
}

.case .case-container .img-mobile .set-03 .images:nth-child(2) {
    z-index: 10
}

.case .case-container .img-mobile .set-03 .images:nth-child(3) {
    align-self: center
}

.case .case-container .img-mobile .set-03 .images figure {
    position: relative
}

.case .case-container .img-mobile .set-03 .images figure img {
    display: block;
    width: 100%;
    -webkit-mask-image: url("../../assets/img/projects/all/iphone-frame.svg");
    mask-image: url("../../assets/img/projects/all/iphone-frame.svg")
}

.case .case-container .about {
    position: relative;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto
}

.case .case-container .about::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50%;
    display: block;
    content: "";
    z-index: -1
}

.case .case-container .about::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    content: "";
    border-radius: 20px;
    background: #FFF;
    z-index: -1;
    box-shadow: 0 0 40px rgba(29, 29, 27, 0.2)
}

.case .case-container .about .story {
    position: relative;
    z-index: 1;
    color: #387c8d
}

.case .case-container .about .story p {
    position: relative
}

.case .case-container .about .story p:last-child {
    padding: 0
}

.case .case-container .about .story p.disclaimer {
    color: #FFF
}

.case .case-container .about .story p.disclaimer::before {
    position: absolute;
    border-radius: 20px;
    content: "";
    display: block;
    background: #ff9300;
    z-index: -1
}

.case .case-container .about .role p {
    color: #1d1d1b
}

.case .case-container .about .role ul {
    list-style-type: none
}

.case .case-container .about .role ul li {
    float: left;
    color: rgba(29, 29, 27, 0.5);
    background: #eaf4f5
}

.case .case-container>figure, .case .case-container .bg-color>figure, .case .case-container .standout>figure {
    position: relative;
    margin: 0;
    z-index: 10
}

.case .case-container>figure.space.no-space-t img, .case .case-container .bg-color>figure.space.no-space-t img, .case .case-container .standout>figure.space.no-space-t img {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.case .case-container>figure.space.no-space-b, .case .case-container .bg-color>figure.space.no-space-b, .case .case-container .standout>figure.space.no-space-b {
    margin-bottom: 0
}

.case .case-container>figure.space.no-space-b img, .case .case-container .bg-color>figure.space.no-space-b img, .case .case-container .standout>figure.space.no-space-b img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.case .case-container>figure.space img, .case .case-container .bg-color>figure.space img, .case .case-container .standout>figure.space img {
    border-radius: 20px
}

.case .case-container>figure.fw img, .case .case-container .bg-color>figure.fw img, .case .case-container .standout>figure.fw img {
    display: block;
    width: 100%
}

.case .case-container>figure.w50 img, .case .case-container .bg-color>figure.w50 img, .case .case-container .standout>figure.w50 img {
    display: block;
    width: 50%;
    margin: 0 auto;
    border-radius: 20px
}

.case .case-container>figure.no-space-b, .case .case-container .bg-color>figure.no-space-b, .case .case-container .standout>figure.no-space-b {
    margin-bottom: 0
}

.case .case-container .set-43::after {
    content: "";
    clear: both;
    display: table
}

.case .case-container .set-43 figure {
    float: left;
    box-sizing: border-box
}

.case .case-container .set-43 figure img {
    width: 100%
}

.case .case-container .images-grid {
    display: grid
}

.case .case-container .images-grid .item h4 {
    text-align: center
}

.case .case-container .images-grid .item img {
    display: block;
    width: 100%;
    border-radius: 20px
}

.case .case-container .images-grid .item.nb img {
    border-radius: 0
}

.case .case-container .images-grid .item.shadow img {
    box-shadow: 0 0 40px rgba(29, 29, 27, 0.2)
}

.case .case-container .images-grid .content {
    display: grid;
    height: 100%;
    margin: 0
}

.case .case-container .images-grid .content .desc {
    align-self: center
}

.case .case-container .images-grid .content .desc h3 {
    color: #ff9300
}

.case .case-container .logo-01 img {
    width: 100%;
    display: block
}

.case .case-container .btn-row .content {
    margin-bottom: 0;
    background: none !important
}

.case .case-container .btn-row .content P {
    background: none !important
}

.case .case-container .btn-row .go {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.case .case-container .standout {
    position: relative
}

.case .case-container .standout::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    content: "";
    display: block;
    z-index: -1
}

.case .case-container .switch-radio {
    width: 100%
}

.case .case-container .switch-radio input {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden
}

.case .case-container .switch-radio .switch-labels {
    position: sticky;
    display: flex;
    z-index: 10;
    transition: top .2s ease
}

.case .case-container .switch-radio .switch-labels .switch-labels-container {
    position: relative;
    margin: 0 auto;
    border-radius: 200px;
    background: #1d1d1b;
    z-index: 1
}

.case .case-container .switch-radio .switch-labels label {
    position: relative;
    display: inline-block;
    color: #FFF;
    border-radius: 100px;
    cursor: pointer
}

.case .case-container .switch-radio .switch-labels label::before {
    position: absolute;
    content: "";
    display: block;
    border-radius: 100px;
    z-index: -1
}

.case .case-container .switch-radio input[type=radio]:checked.option1~.switch-labels label:nth-child(1)::before {
    background: #ff9300;
    box-shadow: 0 5px 10px rgba(29, 29, 27, 0.3)
}

.case .case-container .switch-radio input[type=radio]:checked.option1~.switch-radio-img figure:nth-child(1) {
    opacity: 1
}

.case .case-container .switch-radio input[type=radio]:checked.option2~.switch-labels label:nth-child(2)::before {
    background: #ff9300;
    box-shadow: 0 5px 10px rgba(29, 29, 27, 0.3)
}

.case .case-container .switch-radio input[type=radio]:checked.option2~.switch-radio-img figure:nth-child(2) {
    opacity: 1
}

.case .case-container .switch-radio input[type=radio]:checked.option3~.switch-labels label:nth-child(3)::before {
    background: #ff9300;
    box-shadow: 0 5px 10px rgba(29, 29, 27, 0.3)
}

.case .case-container .switch-radio input[type=radio]:checked.option3~.switch-radio-img figure:nth-child(3) {
    opacity: 1
}

.case .case-container .switch-radio .switch-radio-img {
    position: relative
}

.case .case-container .switch-radio .switch-radio-img figure {
    opacity: 0;
    transition: .3s
}

.case .case-container .switch-radio .switch-radio-img figure:nth-child(2), .case .case-container .switch-radio .switch-radio-img figure:nth-child(3) {
    position: absolute;
    width: 100%;
    top: 0
}

@media(min-width:300px) {
    .case .case-hero {
        min-height: calc(100svh - 20px);
        margin: 10px 10px 0;
        margin: 0
    }

    .case .case-hero .content {
        width: 100%;
        text-align: center;
        padding: 180px 20px 60px;
        overflow: hidden
    }

    .case .case-hero .content h1 {
        font-size: 70px;
        line-height: 60px;
        text-overflow: ellipsis
    }

    .case .case-hero .content h2 {
        font-size: 44px;
        line-height: 46px;
        margin-top: 10px
    }

    .case .case-container h3 {
        font-size: 44px;
        line-height: 46px;
        padding-bottom: 10px
    }

    .case .case-container h4 {
        font-size: 38px;
        line-height: 38px
    }

    .case .case-container .ul, .case .case-container p {
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px
    }

    .case .case-container .ul {
        padding: 0 0 20px 34px
    }

    .case .case-container .ul li {
        position: relative
    }

    .case .case-container .ul li::before {
        top: 12px;
        left: -16px;
        width: 6px;
        height: 6px;
        border-radius: 3px
    }

    .case .case-container .about {
        padding: 30px 40px 40px;
        margin: 0 10px 40px
    }

    .case .case-container .about::before {
        left: -10px;
        right: -10px;
        border-radius: 0
    }

    .case .case-container .about::after {
        left: 10px;
        right: 10px;
        bottom: 10px
    }

    .case .case-container .about .title {
        grid-column-start: 1;
        grid-column-end: 3;
        padding-right: 0
    }

    .case .case-container .about .title h3 {
        padding-bottom: 0
    }

    .case .case-container .about .story {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: span 2;
        padding-top: 18px
    }

    .case .case-container .about .story p.disclaimer {
        margin-top: 20px
    }

    .case .case-container .about .story p.disclaimer::before {
        inset: -20px -20px -20px -20px
    }

    .case .case-container .about .role {
        grid-column-start: 1;
        grid-column-end: 3;
        padding: 30px 20px 8px 0
    }

    .case .case-container .about .role p {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: -25px
    }

    .case .case-container .about .role ul li {
        height: 34px;
        font-size: 20px;
        line-height: 32px;
        padding: 0 12px;
        margin: 15px 15px 0 0;
        border-radius: 6px
    }

    .case .case-container>figure, .case .case-container .bg-color>figure, .case .case-container .standout>figure {
        margin: 0 0 40px
    }

    .case .case-container>figure.space, .case .case-container .bg-color>figure.space, .case .case-container .standout>figure.space {
        margin: 0 40px 40px
    }

    .case .case-container figure.fw.bg-t {
        padding-top: 80px
    }

    .case .case-container .content {
        margin: 0 10% 40px
    }

    .case .case-container .content.left-align {
        margin: 0 50px 40px
    }

    .case .case-container .img-mobile {
        padding: 0 0 80px
    }

    .case .case-container .img-mobile .set-03 {
        margin: 0 5%
    }

    .case .case-container .img-mobile .set-03 .images:nth-child(2) {
        margin: 0 -30px 0
    }

    .case .case-container .img-mobile .set-03 .images:nth-child(2) figure {
        filter: drop-shadow(0 0 20px rgba(29, 29, 27, 0.3));
        transform: translateZ(0)
    }

    .case .case-container .switch-radio .switch-radio-img {
        padding-bottom: 120px
    }

    .case .case-container .switch-radio .switch-labels {
        top: 120px;
        margin-bottom: 60px
    }

    .case .case-container .switch-radio .switch-labels .switch-labels-container {
        padding: 0 10px
    }

    .case .case-container .switch-radio .switch-labels label {
        height: 34px;
        font-size: 18px;
        line-height: 32px;
        padding: 0 15px
    }

    .case .case-container .switch-radio .switch-labels label::before {
        inset: -5px -10px
    }

    .case .case-container .set-43 {
        padding: 0 40px 40px
    }

    .case .case-container .set-43 figure {
        width: 50%;
        padding: 0 10px;
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(3n) {
        clear: both;
        margin: 0 25%
    }

    .case .case-container .set-43 figure:nth-child(3n-2):last-child {
        margin: 0 25%
    }

    .case .case-container .images-grid {
        padding: 0 40px 40px;
        gap: 20px
    }

    .case .case-container .images-grid.layout-02 {
        grid-template-columns: 1fr
    }

    .case .case-container .images-grid.layout-02.order-flip h3 {
        padding-top: 100px
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(2) h3 {
        padding-top: 0
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(1) {
        order: 2
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(2) {
        order: 1
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(3) {
        order: 3
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(4) {
        order: 4
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(5) {
        order: 6
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(6) {
        order: 5
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(7) {
        order: 7
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(8) {
        order: 8
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(9) {
        order: 10
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(10) {
        order: 9
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(11) {
        order: 11
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(12) {
        order: 12
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(13) {
        order: 14
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(14) {
        order: 13
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(15) {
        order: 15
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(16) {
        order: 16
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(17) {
        order: 18
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(18) {
        order: 17
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(19) {
        order: 19
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(20) {
        order: 20
    }

    .case .case-container .images-grid.layout-03 {
        grid-template-columns: 1fr 1fr 1fr;
        padding-bottom: 80px
    }

    .case .case-container .images-grid.layout-04 {
        grid-template-columns: 1fr 1fr
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(2n-1) {
        grid-column: span 2
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(2n-1) img {
        width: 50%;
        margin: 0 auto
    }

    .case .case-container .images-grid.layout-04.fixed {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 0;
        padding: 0 20px 40px
    }

    .case .case-container .images-grid .item h4 {
        padding: 20px 0 20px
    }

    .case .case-container .images-grid .item:first-child h4 {
        padding: 0 0 20px
    }

    .case .case-container .bg-color {
        margin: -30px 10px 40px;
        padding-top: 40px
    }

    .case .case-container .bg-color .set-43 {
        margin: 0 10px
    }

    .case .case-container .btn-row {
        margin: 0 10px 40px
    }

    .case .case-container .btn-row .go {
        gap: 20px;
        margin: 20px 0 0
    }

    .case .case-container .standout {
        padding-top: 60px;
        margin-top: 40px
    }

    .case .case-container .standout::after {
        bottom: 40%
    }
}

@media(min-width:600px) {
    .case .case-hero {
        min-height: calc(100svh - 40px);
        margin: 20px 20px 0;
        border-radius: 20px 20px 0 0
    }

    .case .case-hero .content {
        padding: 180px 40px 70px
    }

    .case .case-hero .content h1 {
        font-size: 80px;
        line-height: 70px
    }

    .case .case-hero .content h2 {
        font-size: 55px;
        line-height: 54px;
        margin-top: 0
    }

    .case .case-container h3 {
        font-size: 55px;
        line-height: 54px;
        padding-bottom: 15px
    }

    .case .case-container h4 {
        font-size: 44px;
        line-height: 44px
    }

    .case .case-container .ul, .case .case-container p {
        font-size: 26px;
        line-height: 40px
    }

    .case .case-container .ul {
        padding: 0 0 30px 40px
    }

    .case .case-container .ul li {
        position: relative
    }

    .case .case-container .ul li::before {
        top: 18px;
        left: -18px;
        width: 7px;
        height: 7px;
        border-radius: 4px
    }

    .case .case-container .about {
        padding: 30px 80px 80px;
        margin: 0 20px 60px
    }

    .case .case-container .about::before {
        left: 0;
        right: 0;
        border-radius: 0 0 20px 20px
    }

    .case .case-container .about::after {
        left: 20px;
        right: 20px;
        bottom: 20px
    }

    .case .case-container .about .title {
        grid-column-end: 2;
        align-self: start;
        padding-right: 50px
    }

    .case .case-container .about .title h3 {
        padding-bottom: 40px
    }

    .case .case-container .about .story {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: span 2;
        padding-top: 18px
    }

    .case .case-container .about .story p {
        padding-bottom: 30px
    }

    .case .case-container .about .story p.disclaimer::before {
        left: -40px
    }

    .case .case-container .about .role {
        grid-column-start: 1;
        grid-column-end: 2;
        align-self: end;
        padding: 0 20px 8px 0
    }

    .case .case-container .about .role p {
        font-size: 26px;
        line-height: 40px;
        margin-bottom: -20px
    }

    .case .case-container .about .role ul li {
        height: 34px;
        font-size: 20px;
        line-height: 32px;
        padding: 0 12px;
        margin: 15px 15px 0 0;
        border-radius: 6px
    }

    .case .case-container>figure, .case .case-container .bg-color>figure, .case .case-container .standout>figure {
        margin: 0 0 60px
    }

    .case .case-container>figure.space, .case .case-container .bg-color>figure.space, .case .case-container .standout>figure.space {
        margin: 0 10% 60px
    }

    .case .case-container figure.fw.bg-t {
        padding-top: 120px
    }

    .case .case-container .content {
        margin: 0 20% 60px
    }

    .case .case-container .content.left-align {
        margin: 0 100px 60px
    }

    .case .case-container .img-mobile {
        padding: 0 0 120px
    }

    .case .case-container .img-mobile .set-03 {
        margin: 0 7%
    }

    .case .case-container .img-mobile .set-03 .images:nth-child(2) {
        margin: 0 -45px 0
    }

    .case .case-container .switch-radio .switch-radio-img {
        padding-bottom: 180px
    }

    .case .case-container .switch-radio .switch-labels {
        top: 60px;
        margin-bottom: 90px
    }

    .case .case-container .switch-radio .switch-labels label {
        height: 40px;
        font-size: 20px;
        line-height: 28px;
        padding-bottom: 20px;
        line-height: 38px;
        padding: 0 20px
    }

    .case .case-container .set-43 {
        padding: 0 10% 60px
    }

    .case .case-container .images-grid {
        padding: 0 10% 60px;
        gap: 30px
    }

    .case .case-container .images-grid.layout-02 {
        grid-template-columns: 1fr 1fr
    }

    .case .case-container .images-grid.layout-02 .item:nth-last-child(1):nth-child(odd) {
        grid-column: 1/span 2
    }

    .case .case-container .images-grid.layout-02 .item:nth-last-child(1):nth-child(odd) img {
        width: 70%;
        margin: 0 auto
    }

    .case .case-container .images-grid.layout-02.order-flip h3 {
        padding-top: 0
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(1) {
        order: 1
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(2) {
        order: 2
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(5) {
        order: 5
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(6) {
        order: 6
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(9) {
        order: 9
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(10) {
        order: 10
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(13) {
        order: 13
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(14) {
        order: 14
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(17) {
        order: 17
    }

    .case .case-container .images-grid.layout-02.order-flip .item:nth-child(18) {
        order: 18
    }

    .case .case-container .images-grid.layout-03 {
        padding-bottom: 120px
    }

    .case .case-container .images-grid .item h4 {
        padding: 0 0 20px
    }

    .case .case-container .images-grid .item:first-child h4 {
        padding: 0 0 20px
    }

    .case .case-container .bg-color {
        margin: -40px 20px 60px;
        padding-top: 60px
    }

    .case .case-container .bg-color .set-43 {
        margin: 0 20px
    }

    .case .case-container .btn-row {
        margin: 0 20px 60px
    }

    .case .case-container .btn-row .go {
        gap: 30px;
        margin: 30px 0 0
    }

    .case .case-container .standout {
        padding-top: 90px;
        margin-top: 60px
    }

    .case .case-container .standout::after {
        bottom: 10%
    }
}

@media(min-width:992px) {
    .case .case-hero {
        min-height: calc(100svh - 60px);
        margin: 30px 30px 0
    }

    .case .case-hero .content {
        text-align: left;
        padding: 160px 60px 90px
    }

    .case .case-hero .content h1 {
        font-size: 100px;
        line-height: 110px
    }

    .case .case-hero .content h2 {
        font-size: 80px;
        line-height: 80px;
        margin-top: -10px
    }

    .case .case-container h3 {
        font-size: 80px;
        line-height: 80px;
        padding-bottom: 20px
    }

    .case .case-container h4 {
        font-size: 54px;
        line-height: 54px
    }

    .case .case-container .ul, .case .case-container p {
        font-size: 30px;
        line-height: 48px
    }

    .case .case-container .ul {
        padding: 0 0 40px 40px
    }

    .case .case-container .ul li {
        position: relative
    }

    .case .case-container .ul li::before {
        top: 20px;
        left: -20px;
        width: 8px;
        height: 8px;
        border-radius: 4px
    }

    .case .case-container .about {
        padding: 50px 100px 110px;
        margin: 0 30px 80px
    }

    .case .case-container .about::after {
        left: 30px;
        right: 30px;
        bottom: 30px
    }

    .case .case-container .about .title {
        padding-right: 50px
    }

    .case .case-container .about .title h3 {
        padding-bottom: 40px
    }

    .case .case-container .about .story {
        padding-top: 34px
    }

    .case .case-container .about .story p {
        padding-bottom: 40px
    }

    .case .case-container .about .role {
        padding: 0 20px 12px 0
    }

    .case .case-container .about .role p {
        font-size: 30px;
        line-height: 48px;
        margin-bottom: -25px
    }

    .case .case-container .about .role ul li {
        height: 44px;
        font-size: 24px;
        line-height: 42px;
        padding: 0 20px;
        margin: 20px 20px 0 0;
        border-radius: 8px
    }

    .case .case-container>figure, .case .case-container .bg-color>figure, .case .case-container .standout>figure {
        margin: 0 0 80px
    }

    .case .case-container>figure.space, .case .case-container .bg-color>figure.space, .case .case-container .standout>figure.space {
        margin: 0 10% 80px
    }

    .case .case-container figure.fw.bg-t {
        padding-top: 160px
    }

    .case .case-container .content {
        margin: 0 20% 80px
    }

    .case .case-container .content.left-align {
        margin: 0 130px 80px
    }

    .case .case-container .img-mobile {
        padding: 0 0 160px
    }

    .case .case-container .img-mobile .set-03 {
        margin: 0 7%
    }

    .case .case-container .img-mobile .set-03 .images:nth-child(2) {
        margin: 0 -60px 0
    }

    .case .case-container .img-mobile .set-03 .images:nth-child(2) figure {
        filter: drop-shadow(0 0 20px rgba(29, 29, 27, 0.5))
    }

    .case .case-container .switch-radio .switch-radio-img {
        padding-bottom: 240px
    }

    .case .case-container .switch-radio .switch-labels {
        top: 100px;
        margin-bottom: 120px
    }

    .case .case-container .switch-radio .switch-labels label {
        height: 50px;
        font-size: 26px;
        line-height: 40px;
        line-height: 48px
    }

    .case .case-container .set-43 {
        padding: 0 10% 80px
    }

    .case .case-container .set-43 figure {
        width: 33%;
        padding: 0 30px
    }

    .case .case-container .set-43 figure:nth-child(3n) {
        clear: unset;
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(3n-2):last-child {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(5n+4) {
        clear: both
    }

    .case .case-container .set-43 figure:nth-child(5n+4), .case .case-container .set-43 figure:nth-child(5n+5) {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(5n+4) {
        margin: 0 0 0 16.665%
    }

    .case .case-container .set-43 figure:nth-child(5n+6):nth-last-child(1) {
        margin: 0 0 0 33.333%
    }

    .case .case-container .set-43 figure:nth-child(5n+6):nth-last-child(2) {
        margin: 0 0 0 16.665%
    }

    .case .case-container .set-43 figure:nth-child(5n+4):last-child {
        margin: 0 0 0 33.333%
    }

    .case .case-container .images-grid {
        padding: 0 10% 80px;
        gap: 30px
    }

    .case .case-container .images-grid.layout-03 {
        padding-bottom: 160px
    }

    .case .case-container .images-grid.layout-04 {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }

    .case .case-container .images-grid.layout-04 .item:nth-last-child(3):nth-child(4n+1) img {
        margin-left: 50%
    }

    .case .case-container .images-grid.layout-04 .item:nth-last-child(2):nth-child(4n+2) img {
        margin-left: 50%
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(4n-1) img {
        margin-left: 50%
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(2n-1) {
        grid-column: auto
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(2n-1) img {
        width: 100%
    }

    .case .case-container .images-grid.layout-04 .item:nth-last-child(2):nth-child(4n+1) {
        grid-column-end: -3
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(4n-2) {
        grid-column-end: -2
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(4n-3) {
        grid-column: span 4
    }

    .case .case-container .images-grid.layout-04 .item:last-child:nth-child(4n-3) img {
        width: 25%;
        margin: 0 auto
    }

    .case .case-container .images-grid.layout-04.fixed {
        gap: 40px;
        padding: 0 10% 80px
    }

    .case .case-container .images-grid .item h4 {
        padding: 0 0 30px
    }

    .case .case-container .images-grid .item:first-child h4 {
        padding: 0 0 30px
    }

    .case .case-container .bg-color {
        margin: -50px 30px 80px;
        padding-top: 80px
    }

    .case .case-container .bg-color .set-43 {
        margin: 0 30px
    }

    .case .case-container .btn-row {
        margin: 0 30px 80px
    }

    .case .case-container .btn-row .go {
        gap: 40px;
        margin: 40px 0 0
    }

    .case .case-container .standout {
        padding-top: 120px;
        margin-top: 80px
    }
}

@media(min-width:1400px) {
    .case .case-hero {
        min-height: calc(100svh - 100px);
        margin: 50px 50px 0
    }

    .case .case-hero .content {
        padding: 200px 100px 100px
    }

    .case .case-hero .content h1 {
        font-size: 130px;
        line-height: 110px
    }

    .case .case-hero .content h2 {
        font-size: 100px;
        line-height: 100px;
        margin-top: 10px
    }

    .case .case-container h3 {
        font-size: 100px;
        line-height: 100px;
        padding-bottom: 25px
    }

    .case .case-container h4 {
        font-size: 70px;
        line-height: 70px
    }

    .case .case-container .ul, .case .case-container p {
        font-size: 36px;
        line-height: 60px
    }

    .case .case-container .ul {
        padding: 0 0 50px 60px
    }

    .case .case-container .ul li {
        position: relative
    }

    .case .case-container .ul li::before {
        top: 26px;
        left: -30px;
        width: 10px;
        height: 10px;
        border-radius: 5px
    }

    .case .case-container .about {
        padding: 60px 140px 140px;
        margin: 0 50px 100px
    }

    .case .case-container .about::after {
        left: 50px;
        right: 50px;
        bottom: 50px
    }

    .case .case-container .about .title h3 {
        padding-bottom: 50px
    }

    .case .case-container .about .story {
        padding-top: 44px
    }

    .case .case-container .about .story p {
        padding-bottom: 50px
    }

    .case .case-container .about .role {
        padding: 0 20px 16px 0
    }

    .case .case-container .about .role p {
        font-size: 36px;
        line-height: 60px
    }

    .case .case-container .about .role ul li {
        height: 58px;
        font-size: 32px;
        line-height: 56px;
        margin: 25px 25px 0 0;
        border-radius: 10px
    }

    .case .case-container>figure, .case .case-container .bg-color>figure, .case .case-container .standout>figure {
        margin: 0 0 100px
    }

    .case .case-container>figure.space, .case .case-container .bg-color>figure.space, .case .case-container .standout>figure.space {
        margin: 0 10% 100px
    }

    .case .case-container figure.fw.bg-t {
        padding-top: 200px
    }

    .case .case-container .content {
        margin: 0 20% 100px
    }

    .case .case-container .content.left-align {
        margin: 0 190px 100px
    }

    .case .case-container .img-mobile {
        padding: 0 0 200px
    }

    .case .case-container .img-mobile .set-03 {
        margin: 0 5%
    }

    .case .case-container .img-mobile .set-03 .images:nth-child(2) {
        margin: 0 -90px 0
    }

    .case .case-container .switch-radio .switch-labels {
        top: 134px
    }

    .case .case-container .set-43 {
        padding: 0 10% 100px
    }

    .case .case-container .set-43 figure {
        width: 25%;
        padding: 0 50px
    }

    .case .case-container .set-43 figure:nth-child(3n) {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(3n-2):last-child {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(5n+4), .case .case-container .set-43 figure:nth-child(5n+5) {
        clear: unset;
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(5n+4) {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(5n+6):nth-last-child(1) {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(5n+6):nth-last-child(2) {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(5n+4):last-child {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(7n+5) {
        clear: both
    }

    .case .case-container .set-43 figure:nth-child(7n+5), .case .case-container .set-43 figure:nth-child(7n+6), .case .case-container .set-43 figure:nth-child(7n+7) {
        margin: 0
    }

    .case .case-container .set-43 figure:nth-child(7n+5) {
        margin: 0 0 0 12.5%
    }

    .case .case-container .set-43 figure:nth-child(7n+8):nth-last-child(1) {
        margin: 0 0 0 37.5%
    }

    .case .case-container .set-43 figure:nth-child(7n+8):nth-last-child(2) {
        margin: 0 0 0 25%
    }

    .case .case-container .set-43 figure:nth-child(7n+8):nth-last-child(3) {
        margin: 0 0 0 12.5%
    }

    .case .case-container .set-43 figure:nth-child(7n+5):nth-last-child(1) {
        margin: 0 0 0 37.5%
    }

    .case .case-container .set-43 figure:nth-child(7n+5):nth-last-child(2) {
        margin: 0 0 0 25%
    }

    .case .case-container .images-grid {
        padding: 0 10% 100px;
        gap: 50px
    }

    .case .case-container .images-grid .item h4 {
        padding: 0 0 50px
    }

    .case .case-container .images-grid .item.layout-03 {
        padding-bottom: 200px
    }

    .case .case-container .images-grid .item:first-child h4 {
        padding: 0 0 50px
    }

    .case .case-container .bg-color {
        margin: -50px 50px 100px;
        padding-top: 100px
    }

    .case .case-container .bg-color .set-43 {
        margin: 0 50px
    }

    .case .case-container .btn-row {
        margin: 0 50px 100px
    }

    .case .case-container .btn-row .go {
        gap: 60px;
        margin: 60px 0 0
    }

    .case .case-container .standout {
        padding-top: 150px;
        margin-top: 100px
    }
}

.cultofpigeons .case-container .bg-color {
    border-radius: 20px;
    background: #36355c
}

.cultofpigeons .case-container .bg-color .content h3, .cultofpigeons .case-container .bg-color .content p {
    color: #FFF
}

.cultofpigeons .case-container .bg-color .content h3.fw, .cultofpigeons .case-container .bg-color .content p.fw {
    color: #ff9300
}

.cultofpigeons .case-container .bg-color .layer-order {
    position: relative
}

.cultofpigeons .case-container .bg-color .layer-order>div {
    position: sticky;
    top: 0;
    width: 100%
}

.cultofpigeons .case-container .bg-color .layer-order>.layer-01 .layer-content::after {
    position: absolute;
    left: 0;
    content: "";
    display: block;
    width: 30px;
    background: #FFF;
    transform: rotate(-45deg);
    z-index: -1
}

.cultofpigeons .case-container .bg-color .layer-order .imgPH {
    position: static
}

.cultofpigeons .case-container .bg-color .layer-order .layer-container {
    height: 100lvh
}

.cultofpigeons .case-container .bg-color .layer-order .layer-container img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    width: 100%;
    height: 100%
}

.cultofpigeons .case-container .bg-color .layer-order .layer-container .layer-content {
    position: absolute;
    z-index: 1
}

.cultofpigeons .case-container .bg-color .layer-order .layer-container .layer-content p {
    display: block;
    color: #ff84c2;
    border-radius: 100px;
    background: #FFF;
    transition: all .3s ease
}

@media(min-width:300px) {
    .cultofpigeons .case-container .bg-color .layer-order>.layer-01 .layer-content::after {
        bottom: 7px;
        left: -6px;
        height: 4px;
        border-radius: 2px
    }

    .cultofpigeons .case-container .bg-color .layer-order .layer-container .layer-content {
        right: 10%;
        top: 15%
    }

    .cultofpigeons .case-container .bg-color .layer-order .layer-container .layer-content p {
        padding: 0 20px 2px 30px
    }
}

@media(min-width:600px) {
    .cultofpigeons .case-container .bg-color .layer-order>.layer-01 .layer-content::after {
        bottom: 7px;
        left: -8px;
        height: 6px;
        border-radius: 3px
    }

    .cultofpigeons .case-container .bg-color .layer-order .layer-container .layer-content p {
        padding: 0 30px 4px 40px
    }
}

@media(min-width:992px) {
    .cultofpigeons .case-container .bg-color .layer-order>.layer-01 .layer-content::after {
        bottom: 5px;
        left: -10px;
        height: 8px;
        border-radius: 4px
    }

    .cultofpigeons .case-container .bg-color .layer-order .layer-container .layer-content p {
        padding: 0 35px 5px 45px
    }
}

@media(min-width:1400px) {
    .cultofpigeons .case-container .bg-color .layer-order>.layer-01 .layer-content::after {
        bottom: 0;
        left: -15px;
        height: 10px;
        border-radius: 10px
    }

    .cultofpigeons .case-container .bg-color .layer-order .layer-container .layer-content p {
        padding: 0 40px 6px 50px
    }
}

.freegameaday .case-container .logo-01 .columns.clean {
    width: 80%;
    padding: 0;
    grid-column-gap: 0;
    grid-row-gap: 0
}

.freegameaday .case-container .logo-01 .columns.clean .column {
    padding: 0
}

.freegameaday .case-container .palette-02 {
    padding-bottom: 10%
}

.freegameaday .case-container .palette-02 .container {
    position: relative;
    width: 90%;
    margin: 0 auto;
    color: #FFF;
    text-align: center
}

.freegameaday .case-container .palette-02 .container span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.freegameaday .case-container .palette-02 .container::after {
    content: "";
    clear: both;
    display: table
}

.freegameaday .case-container .palette-02 .container>div div {
    position: relative
}

.freegameaday .case-container .palette-02 .container .base-01, .freegameaday .case-container .palette-02 .container .base-02, .freegameaday .case-container .palette-02 .container .base-03 {
    float: left
}

.freegameaday .case-container .palette-02 .container .base-01, .freegameaday .case-container .palette-02 .container .base-03 {
    width: 33%
}

.freegameaday .case-container .palette-02 .container .base-01 {
    margin-right: -10%;
    margin-left: 10%;
    transform: rotate(-25deg);
    transform-origin: center left
}

.freegameaday .case-container .palette-02 .container .base-01 .base {
    background: #4c92c3
}

.freegameaday .case-container .palette-02 .container .base-01 .gradient {
    background: transparent linear-gradient(135deg, #8dbbd9 0, #4c92c3 50%, #34719a 100%)
}

.freegameaday .case-container .palette-02 .container .base-02 {
    width: 33%;
    margin: 25% 0 0
}

.freegameaday .case-container .palette-02 .container .base-02 .base {
    background: #eb0001
}

.freegameaday .case-container .palette-02 .container .base-02 .gradient {
    margin-bottom: -15%;
    background: transparent linear-gradient(135deg, #ff676a 0, #eb0001 50%, #c10017 100%)
}

.freegameaday .case-container .palette-02 .container .base-03 {
    margin-left: -10%;
    transform: rotate(25deg);
    transform-origin: center right
}

.freegameaday .case-container .palette-02 .container .base-03 .base {
    background: #ffdf00
}

.freegameaday .case-container .palette-02 .container .base-03 .gradient {
    background: transparent linear-gradient(135deg, #fff6bc 0, #ffdf00 50%, #eb8b04 100%)
}

.freegameaday .case-container .palette-02 .container .base {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    z-index: 20
}

.freegameaday .case-container .palette-02 .container .gradient {
    width: 70%;
    margin: -15% auto 0 auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    text-indent: -9999px;
    z-index: 10
}

.freegameaday .case-container .palette-02 .container .grain {
    width: 100px;
    width: 100%;
    margin: 0 auto -20% auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    mix-blend-mode: multiply;
    z-index: 30
}

@media(min-width:300px) {
    .freegameaday .case-container .logo-01 .columns.clean {
        width: 100%
    }

    .freegameaday .case-container .palette-02 {
        font-size: 20px
    }

    .freegameaday .case-container .palette-02 .container img {
        width: 500%
    }

    .freegameaday .case-container .palette-02 .container .base {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2)
    }

    .freegameaday .case-container .palette-02 .container .gradient {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2)
    }
}

@media(min-width:600px) {
    .freegameaday .case-container .logo-01 .columns.clean {
        width: 90%
    }

    .freegameaday .case-container .palette-02 {
        font-size: 26px
    }

    .freegameaday .case-container .palette-02 .container img {
        width: 400%
    }

    .freegameaday .case-container .palette-02 .container .base {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)
    }

    .freegameaday .case-container .palette-02 .container .gradient {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)
    }
}

@media(min-width:992px) {
    .freegameaday .case-container .palette-02 {
        font-size: 30px
    }

    .freegameaday .case-container .palette-02 .container img {
        width: 300%
    }

    .freegameaday .case-container .palette-02 .container .base {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2)
    }

    .freegameaday .case-container .palette-02 .container .gradient {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2)
    }
}

@media(min-width:1400px) {
    .freegameaday .case-container .palette-02 {
        font-size: 36px
    }

    .freegameaday .case-container .palette-02 .container img {
        width: 200%
    }

    .freegameaday .case-container .palette-02 .container .base {
        box-shadow: 0 30px 50px rgba(0, 0, 0, 0.2)
    }

    .freegameaday .case-container .palette-02 .container .gradient {
        box-shadow: 0 30px 50px rgba(0, 0, 0, 0.2)
    }
}

.monocle .case-container .palette-03 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.monocle .case-container .palette-03 .color {
    position: relative;
    text-indent: -9999px;
    overflow: hidden
}

.monocle .case-container .palette-03 .color::before, .monocle .case-container .palette-03 .color::after {
    position: absolute;
    left: 10px;
    right: 10px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    content: "";
    display: block;
    background: #FFF
}

.monocle .case-container .palette-03 .color::before {
    opacity: .4
}

.monocle .case-container .palette-03 .color::after {
    opacity: .2
}

.monocle .case-container .palette-03 .color.base-01 {
    background: #2f365c
}

.monocle .case-container .palette-03 .color.base-02 {
    background: #ffc62e
}

.monocle .case-container .palette-03 .color.base-03 {
    background: #19647e
}

.monocle .case-container .palette-03 .color.base-04 {
    background: #aa224c
}

.monocle .case-container .palette-03 .color.gradient-01 {
    background: transparent linear-gradient(180deg, #ffc62e 0, #19647e 100%) 0 0 no-repeat padding-box
}

.monocle .case-container .palette-03 .color.gradient-02 {
    background: transparent linear-gradient(180deg, #c3254e 0, #f8c12d 100%) 0 0 no-repeat padding-box
}

.monocle .case-container .palette-03 .color.gradient-03 {
    background: transparent linear-gradient(180deg, #12b3d8 0, #ff6e6e 100%) 0 0 no-repeat padding-box
}

.monocle .case-container .standout h3, .monocle .case-container .standout p {
    color: #FFF
}

.monocle .case-container .standout::after {
    background: transparent linear-gradient(180deg, #c3254e 0, #f8c12d 100%) 0 0 no-repeat padding-box
}

@media(min-width:300px) {
    .monocle .case-container .palette-03 {
        gap: 20px;
        margin: 0 10px 40px
    }

    .monocle .case-container .palette-03 .color {
        width: 60px;
        height: 200px;
        border-radius: 30px
    }

    .monocle .case-container .palette-03 .color::before {
        bottom: 10px
    }

    .monocle .case-container .palette-03 .color::after {
        bottom: 60px
    }

    .monocle .case-container .standout {
        padding-top: 130px
    }

    .monocle .case-container .standout::after {
        --mask: radial-gradient(34.99px at 50% 48.00px, #000 99%, #0000 101%) calc(50% - 60px) 0/120px 51% repeat-x, radial-gradient(34.99px at 50% -18px, #0000 99%, #000 101%) 50% 30px/120px calc(51% - 30px) repeat-x, radial-gradient(34.99px at 50% calc(100% - 48.00px), #000 99%, #0000 101%) calc(50% - 60px) 100%/120px 51% repeat-x, radial-gradient(34.99px at 50% calc(100% + 18.00px), #0000 99%, #000 101%) 50% calc(100% - 30px)/120px calc(51% - 30px) repeat-x;
        -webkit-mask: var(--mask);
        mask: var(--mask)
    }
}

@media(min-width:600px) {
    .monocle .case-container .palette-03 {
        gap: 30px;
        margin: 0 20px 60px
    }

    .monocle .case-container .palette-03 .color {
        width: 90px;
        height: 300px;
        border-radius: 45px
    }

    .monocle .case-container .palette-03 .color::before {
        bottom: 10px
    }

    .monocle .case-container .palette-03 .color::after {
        bottom: 90px
    }

    .monocle .case-container .standout {
        padding-top: 250px
    }

    .monocle .case-container .standout::after {
        --mask: radial-gradient(69.97px at 50% 96.00px, #000 99%, #0000 101%) calc(50% - 120px) 0/240px 51% repeat-x, radial-gradient(69.97px at 50% -36px, #0000 99%, #000 101%) 50% 60px/240px calc(51% - 60px) repeat-x, radial-gradient(69.97px at 50% calc(100% - 96.00px), #000 99%, #0000 101%) calc(50% - 120px) 100%/240px 51% repeat-x, radial-gradient(69.97px at 50% calc(100% + 36.00px), #0000 99%, #000 101%) 50% calc(100% - 60px)/240px calc(51% - 60px) repeat-x;
        -webkit-mask: var(--mask);
        mask: var(--mask)
    }
}

@media(min-width:992px) {
    .monocle .case-container .palette-03 {
        gap: 40px;
        margin: 0 30px 80px
    }

    .monocle .case-container .standout {
        padding-top: 300px
    }

    .monocle .case-container .standout::after {
        --mask: radial-gradient(93.30px at 50% 128.00px, #000 99%, #0000 101%) calc(50% - 160px) 0/320px 51% repeat-x, radial-gradient(93.30px at 50% -48px, #0000 99%, #000 101%) 50% 80px/320px calc(51% - 80px) repeat-x, radial-gradient(93.30px at 50% calc(100% - 128.00px), #000 99%, #0000 101%) calc(50% - 160px) 100%/320px 51% repeat-x, radial-gradient(93.30px at 50% calc(100% + 48.00px), #0000 99%, #000 101%) 50% calc(100% - 80px)/320px calc(51% - 80px) repeat-x;
        -webkit-mask: var(--mask);
        mask: var(--mask)
    }
}

@media(min-width:1400px) {
    .monocle .case-container .palette-03 {
        gap: 60px;
        margin: 0 50px 100px
    }

    .monocle .case-container .palette-03 .color {
        width: 140px;
        height: 480px;
        border-radius: 70px
    }

    .monocle .case-container .palette-03 .color::before, .monocle .case-container .palette-03 .color::after {
        left: 20px;
        right: 20px
    }

    .monocle .case-container .palette-03 .color::before {
        bottom: 20px
    }

    .monocle .case-container .palette-03 .color::after {
        bottom: 140px
    }

    .monocle .case-container .standout {
        padding-top: 350px
    }

    .monocle .case-container .standout::after {
        --mask: radial-gradient(116.62px at 50% 160.00px, #000 99%, #0000 101%) calc(50% - 200px) 0/400px 51% repeat-x, radial-gradient(116.62px at 50% -60px, #0000 99%, #000 101%) 50% 100px/400px calc(51% - 100px) repeat-x, radial-gradient(116.62px at 50% calc(100% - 160.00px), #000 99%, #0000 101%) calc(50% - 200px) 100%/400px 51% repeat-x, radial-gradient(116.62px at 50% calc(100% + 60.00px), #0000 99%, #000 101%) 50% calc(100% - 100px)/400px calc(51% - 100px) repeat-x;
        -webkit-mask: var(--mask);
        mask: var(--mask)
    }
}

.debovenstad .kiosk {
    position: relative;
    display: grid
}

.debovenstad .kiosk .summ {
    position: relative
}

.debovenstad .kiosk .image {
    position: relative
}

.debovenstad .palette-01::after {
    content: "";
    clear: both;
    display: table
}

.debovenstad .palette-01 h3, .debovenstad .palette-01 p, .debovenstad .palette-01 span {
    color: #FFF
}

.debovenstad .palette-01 .color-01 {
    border-radius: 20px 20px 0 0;
    background: #742e8e
}

.debovenstad .palette-01 .color-02 {
    background: transparent linear-gradient(90deg, #ec0d93 0, #742e8e 100%) 0 0 no-repeat padding-box
}

.debovenstad .palette-01 .color-03 {
    border-radius: 0 0 0 20px;
    background: transparent linear-gradient(90deg, #ec0d93 0, #f2b82b 100%) 0 0 no-repeat padding-box
}

.debovenstad .palette-01 .color-04, .debovenstad .palette-01 .color-05, .debovenstad .palette-01 .color-06 {
    position: relative;
    float: left;
    box-sizing: border-box;
    text-align: center
}

.debovenstad .palette-01 .color-04 span, .debovenstad .palette-01 .color-05 span, .debovenstad .palette-01 .color-06 span {
    position: absolute
}

.debovenstad .palette-01 .color-04 {
    background: #ec0d93
}

.debovenstad .palette-01 .color-05 {
    background: #ff3a61
}

.debovenstad .palette-01 .color-06 {
    background: #f2b82b
}

.debovenstad .font-01 h3, .debovenstad .font-01 p, .debovenstad .font-01 span {
    color: #FFF
}

.debovenstad .font-01 .big img {
    width: 100%
}

.debovenstad .font-01 .container {
    border-radius: 20px 0 0 20px;
    box-sizing: border-box;
    background: #ec0d93
}

.debovenstad .worm {
    position: relative;
    overflow: hidden;
    background: #f2b82b
}

.debovenstad .worm .container {
    content: "";
    position: absolute;
    top: 70px;
    left: 70px;
    animation: myOrbit 2s linear infinite
}

@keyframes myOrbit {
    from {
        transform: rotate(0) translateX(40px) rotate(0)
    }

    to {
        transform: rotate(360deg) translateX(40px) rotate(-360deg)
    }
}

.debovenstad .worm .container::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 0 0 40px 10px rgba(0, 0, 0, 0.5), 0 0 40px 10px rgba(0, 0, 0, 0.4)
}

.debovenstad .worm .circle01, .debovenstad .worm .circle02, .debovenstad .worm .circle03, .debovenstad .worm .circle04, .debovenstad .worm .circle05, .debovenstad .worm .circle06, .debovenstad .worm .circle07, .debovenstad .worm .circle08, .debovenstad .worm .circle09, .debovenstad .worm .circle10, .debovenstad .worm .circle11, .debovenstad .worm .circle12, .debovenstad .worm .circle13, .debovenstad .worm .circle14, .debovenstad .worm .circle15 {
    position: relative
}

.debovenstad .worm .circle01>div {
    top: 0;
    left: 0;
    width: 2260px;
    height: 2260px
}

.debovenstad .worm .circle01>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .9s;
    visibility: visible;
    opacity: 1;
    width: 2260px;
    height: 2260px;
    background: #f2b82b
}

.debovenstad .worm .circle02>div {
    width: 2120px;
    height: 2120px
}

.debovenstad .worm .circle02>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .85s;
    visibility: visible;
    opacity: 1;
    width: 2120px;
    height: 2120px;
    background: #ed0b93
}

.debovenstad .worm .circle03>div {
    width: 1980px;
    height: 1980px
}

.debovenstad .worm .circle03>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .8s;
    visibility: visible;
    opacity: 1;
    width: 1980px;
    height: 1980px;
    background: #56caf4 url(../../assets/img/projects/debovenstad/case/circle03.svg) 0 0 no-repeat
}

.debovenstad .worm .circle04>div {
    width: 1840px;
    height: 1840px
}

.debovenstad .worm .circle04>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .75s;
    visibility: visible;
    opacity: 1;
    width: 1840px;
    height: 1840px;
    background: #0db3ef url(../../assets/img/projects/debovenstad/case/circle04.svg) 0 0 no-repeat
}

.debovenstad .worm .circle05>div {
    width: 1700px;
    height: 1700px
}

.debovenstad .worm .circle05>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .7s;
    visibility: visible;
    opacity: 1;
    width: 1700px;
    height: 1700px;
    background: #24215d url(../../assets/img/projects/debovenstad/case/circle05.svg) 0 0 no-repeat
}

.debovenstad .worm .circle06>div {
    width: 1560px;
    height: 1560px
}

.debovenstad .worm .circle06>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .65s;
    visibility: visible;
    opacity: 1;
    width: 1560px;
    height: 1560px;
    background: #504d7d url(../../assets/img/projects/debovenstad/case/circle06.svg) 0 0 no-repeat
}

.debovenstad .worm .circle07>div {
    width: 1420px;
    height: 1420px
}

.debovenstad .worm .circle07>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .6s;
    visibility: visible;
    opacity: 1;
    width: 1420px;
    height: 1420px;
    background: #f2b82b url(../../assets/img/projects/debovenstad/case/circle07.svg) 0 0 no-repeat
}

.debovenstad .worm .circle08>div {
    width: 1280px;
    height: 1280px
}

.debovenstad .worm .circle08>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .55s;
    visibility: visible;
    opacity: 1;
    width: 1280px;
    height: 1280px;
    background: #ed0b93 url(../../assets/img/projects/debovenstad/case/circle08.svg) 0 0 no-repeat
}

.debovenstad .worm .circle09>div {
    width: 1140px;
    height: 1140px
}

.debovenstad .worm .circle09>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .5s;
    visibility: visible;
    opacity: 1;
    width: 1140px;
    height: 1140px;
    background: #0db3ef url(../../assets/img/projects/debovenstad/case/circle09.svg) 0 0 no-repeat
}

.debovenstad .worm .circle10>div {
    width: 1000px;
    height: 1000px
}

.debovenstad .worm .circle10>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .45s;
    visibility: visible;
    opacity: 1;
    width: 1000px;
    height: 1000px;
    background: #9057a5 url(../../assets/img/projects/debovenstad/case/circle10.svg) 0 0 no-repeat
}

.debovenstad .worm .circle11>div {
    width: 860px;
    height: 860px
}

.debovenstad .worm .circle11>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .4s;
    visibility: visible;
    opacity: 1;
    width: 860px;
    height: 860px;
    background: #504d7d url(../../assets/img/projects/debovenstad/case/circle11.svg) 0 0 no-repeat
}

.debovenstad .worm .circle12>div {
    width: 720px;
    height: 720px
}

.debovenstad .worm .circle12>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .35s;
    visibility: visible;
    opacity: 1;
    width: 720px;
    height: 720px;
    background: #24215d url(../../assets/img/projects/debovenstad/case/circle12.svg) 0 0 no-repeat
}

.debovenstad .worm .circle13>div {
    width: 580px;
    height: 580px
}

.debovenstad .worm .circle13>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .3s;
    visibility: visible;
    opacity: 1;
    width: 580px;
    height: 580px;
    background: #f2b82b url(../../assets/img/projects/debovenstad/case/circle13.svg) 0 0 no-repeat
}

.debovenstad .worm .circle14>div {
    width: 440px;
    height: 440px
}

.debovenstad .worm .circle14>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .25s;
    visibility: visible;
    opacity: 1;
    width: 440px;
    height: 440px;
    background: #ed0b93 url(../../assets/img/projects/debovenstad/case/circle14.svg) 0 0 no-repeat
}

.debovenstad .worm .circle15>div {
    width: 300px;
    height: 300px
}

.debovenstad .worm .circle15>div::before {
    transition: visibility .2s, opacity .2s;
    transition-delay: .2s;
    visibility: visible;
    opacity: 1;
    width: 300px;
    height: 300px;
    background: #742d8e url(../../assets/img/projects/debovenstad/case/circle15.svg) 0 0 no-repeat
}

@media(min-width:300px) {
    .debovenstad .kiosk {
        position: relative;
        padding: 30px 30px 0;
        margin: 0 40px 40px
    }

    .debovenstad .kiosk::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 20%;
        content: "";
        display: block;
        border-radius: 20px;
        background: #eaf2f3;
        z-index: -1
    }

    .debovenstad .kiosk .summ {
        padding: 0
    }

    .debovenstad .kiosk .list {
        padding: 0
    }

    .debovenstad .kiosk .image figure {
        position: static;
        margin: 0 auto;
        transition: all .3s ease;
        width: 50vw
    }

    .debovenstad .kiosk .image figure img {
        width: 100%
    }

    .debovenstad .palette-01 {
        padding: 0 40px 40px
    }

    .debovenstad .palette-01 span {
        font-size: 20px
    }

    .debovenstad .palette-01 .color-01, .debovenstad .palette-01 .color-02, .debovenstad .palette-01 .color-03 {
        padding: 30px
    }

    .debovenstad .palette-01 .color-04, .debovenstad .palette-01 .color-05, .debovenstad .palette-01 .color-06 {
        width: 30%;
        padding: 0;
        border-radius: 0 0 500px 500px
    }

    .debovenstad .palette-01 .color-04 span, .debovenstad .palette-01 .color-05 span, .debovenstad .palette-01 .color-06 span {
        bottom: 40px;
        left: 50%;
        transform: translate(-50%, 0)
    }

    .debovenstad .palette-01 .color-04 {
        height: 100px;
        margin-left: 10%
    }

    .debovenstad .palette-01 .color-05 {
        height: 150px
    }

    .debovenstad .palette-01 .color-06 {
        height: 200px
    }

    .debovenstad .font-01 {
        padding-bottom: 40px
    }

    .debovenstad .font-01 .container {
        padding: 40px;
        margin: -40px 0 0 16%
    }

    .debovenstad .worm {
        height: 400px;
        margin: 0 0 40px
    }

    .debovenstad .worm .circle01>div {
        top: -625px;
        left: calc((2260px - 100vw) / -2)
    }
}

@media(min-width:600px) {
    .debovenstad .kiosk {
        position: relative;
        padding: 50px 60px 0 40px;
        margin: 0 10% 60px
    }

    .debovenstad .kiosk h3 {
        padding-bottom: 20px
    }

    .debovenstad .kiosk .summ {
        padding: 0 0 10px
    }

    .debovenstad .palette-01 {
        padding: 0 10% 60px
    }

    .debovenstad .palette-01 span {
        font-size: 26px
    }

    .debovenstad .palette-01 .color-01, .debovenstad .palette-01 .color-02, .debovenstad .palette-01 .color-03 {
        padding: 30px
    }

    .debovenstad .palette-01 .color-04, .debovenstad .palette-01 .color-05, .debovenstad .palette-01 .color-06 {
        width: 25%
    }

    .debovenstad .palette-01 .color-04 span, .debovenstad .palette-01 .color-05 span, .debovenstad .palette-01 .color-06 span {
        bottom: 60px
    }

    .debovenstad .palette-01 .color-04 {
        height: 200px;
        margin-left: 25%
    }

    .debovenstad .palette-01 .color-05 {
        height: 250px
    }

    .debovenstad .palette-01 .color-06 {
        height: 300px
    }

    .debovenstad .font-01 {
        padding-bottom: 60px
    }

    .debovenstad .font-01 .container {
        padding: 60px;
        margin: -70px 0 0 18%
    }

    .debovenstad .worm {
        margin: 0 0 60px
    }
}

@media(min-width:992px) {
    .debovenstad .kiosk {
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        padding: 60px 0 0 60px;
        margin: 200px 30px 80px
    }

    .debovenstad .kiosk::before {
        display: none
    }

    .debovenstad .kiosk .summ {
        grid-area: 1/1/2/2;
        padding: 0 30px 80px 0
    }

    .debovenstad .kiosk .summ::before {
        position: absolute;
        top: -60px;
        left: -60px;
        right: 0;
        bottom: 0;
        content: "";
        display: block;
        width: calc(100vw - 60px);
        border-radius: 20px;
        background: #eaf2f3;
        z-index: -1
    }

    .debovenstad .kiosk .list {
        grid-area: 2/1/3/2;
        padding: 80px 0
    }

    .debovenstad .kiosk .list ul {
        padding-bottom: 0
    }

    .debovenstad .kiosk .image {
        grid-area: 1/2/3/3
    }

    .debovenstad .kiosk .image figure {
        position: absolute;
        top: -200px;
        left: 50%;
        bottom: 300px;
        transform: translate(-50%, 0);
        padding: 0;
        margin: 0;
        width: auto
    }

    .debovenstad .kiosk .image figure img {
        width: auto;
        height: 90%
    }

    .debovenstad .palette-01 {
        padding: 0 10% 80px
    }

    .debovenstad .palette-01 h3 {
        padding-bottom: 20px
    }

    .debovenstad .palette-01 span {
        font-size: 30px
    }

    .debovenstad .palette-01 .color-01, .debovenstad .palette-01 .color-02, .debovenstad .palette-01 .color-03 {
        padding: 40px
    }

    .debovenstad .palette-01 .color-01, .debovenstad .palette-01 .color-02, .debovenstad .palette-01 .color-03 {
        position: relative;
        float: left;
        width: 50%;
        box-sizing: border-box
    }

    .debovenstad .palette-01 .color-01 span, .debovenstad .palette-01 .color-02 span, .debovenstad .palette-01 .color-03 span {
        position: absolute;
        bottom: 40px
    }

    .debovenstad .palette-01 .color-01 {
        height: 450px;
        border-radius: 20px 20px 0 0
    }

    .debovenstad .palette-01 .color-02 {
        height: 250px;
        margin-top: 200px;
        border-radius: 0 20px 0 0
    }

    .debovenstad .palette-01 .color-03 {
        height: 250px
    }

    .debovenstad .palette-01 .color-04, .debovenstad .palette-01 .color-05, .debovenstad .palette-01 .color-06 {
        width: 16.6666666667%
    }

    .debovenstad .palette-01 .color-04 span, .debovenstad .palette-01 .color-05 span, .debovenstad .palette-01 .color-06 span {
        bottom: 80px
    }

    .debovenstad .palette-01 .color-04 {
        height: 450px;
        margin-left: 0
    }

    .debovenstad .palette-01 .color-05 {
        height: 550px
    }

    .debovenstad .palette-01 .color-06 {
        height: 650px
    }

    .debovenstad .font-01 {
        padding-bottom: 80px
    }

    .debovenstad .font-01 .container {
        padding: 80px;
        margin: -110px 0 0 20%
    }

    .debovenstad .worm {
        height: 700px;
        margin: 0 0 80px
    }

    .debovenstad .worm .circle01>div {
        top: -375px
    }
}

@media(min-width:1400px) {
    .debovenstad .kiosk {
        padding: 100px 0 0 100px;
        margin: 260px 50px 100px
    }

    .debovenstad .kiosk .summ {
        padding: 0 0 100px
    }

    .debovenstad .kiosk .summ::before {
        top: -100px;
        left: -100px;
        width: calc(100vw - 100px)
    }

    .debovenstad .kiosk .list {
        padding: 100px 0
    }

    .debovenstad .kiosk .image figure {
        top: -250px;
        bottom: 200px
    }

    .debovenstad .palette-01 {
        padding: 0 10% 100px
    }

    .debovenstad .palette-01 h3 {
        padding-bottom: 15px
    }

    .debovenstad .palette-01 span {
        font-size: 36px
    }

    .debovenstad .palette-01 .color-01, .debovenstad .palette-01 .color-02, .debovenstad .palette-01 .color-03 {
        padding: 60px
    }

    .debovenstad .palette-01 .color-01 span, .debovenstad .palette-01 .color-02 span, .debovenstad .palette-01 .color-03 span {
        bottom: 60px
    }

    .debovenstad .palette-01 .color-04 span, .debovenstad .palette-01 .color-05 span, .debovenstad .palette-01 .color-06 span {
        bottom: 100px
    }

    .debovenstad .palette-01 .color-04 {
        height: 500px
    }

    .debovenstad .palette-01 .color-05 {
        height: 600px
    }

    .debovenstad .palette-01 .color-06 {
        height: 700px
    }

    .debovenstad .font-01 {
        padding-bottom: 100px
    }

    .debovenstad .font-01 .container {
        padding: 100px;
        margin: -150px 0 0 22%
    }
}

.besmartcampus .case-container .bootcamps .bc {
    position: relative
}

.besmartcampus .case-container .bootcamps .bc .container {
    border-radius: 20px
}

.besmartcampus .case-container .bootcamps .bc.math .container {
    background: #d9f2f8
}

.besmartcampus .case-container .bootcamps .bc.math .container h3 {
    color: #71d0e5
}

.besmartcampus .case-container .bootcamps .bc.physics h3 {
    color: #9fbeca
}

.besmartcampus .case-container .bootcamps .bc.physics .container {
    background: #e0eaee
}

.besmartcampus .case-container .bootcamps .bc.chemistry h3 {
    color: #f6b463
}

.besmartcampus .case-container .bootcamps .bc.chemistry .container {
    background: #fbe6cb
}

.besmartcampus .case-container .bootcamps .bc.biology h3 {
    color: #8fd18a
}

.besmartcampus .case-container .bootcamps .bc.biology .container {
    background: #e4f4e3
}

.besmartcampus .case-container .bootcamps .bc.economy h3 {
    color: #8ebdff
}

.besmartcampus .case-container .bootcamps .bc.economy .container {
    background: #e4efff
}

.besmartcampus .case-container .bootcamps .bc.nlt h3 {
    color: #ff6f6f
}

.besmartcampus .case-container .bootcamps .bc.nlt .container {
    background: #ffd5d5
}

.besmartcampus .case-container .bootcamps .bc.history h3 {
    color: #dfbaa0
}

.besmartcampus .case-container .bootcamps .bc.history .container {
    background: #f8f0ea
}

.besmartcampus .case-container .bootcamps .bc.businesseconomy h3 {
    color: #acacac
}

.besmartcampus .case-container .bootcamps .bc.businesseconomy .container {
    background: #f5f5f5
}

.besmartcampus .case-container .bootcamps .bc.geography h3 {
    color: #d4aca9
}

.besmartcampus .case-container .bootcamps .bc.geography .container {
    background: #f3e8e7
}

.besmartcampus .case-container .bootcamps .bc.dutch h3 {
    color: #ffbe4e
}

.besmartcampus .case-container .bootcamps .bc.dutch .container {
    background: #ffe4b2
}

.besmartcampus .case-container .bootcamps .bc.german h3 {
    color: #e09e01
}

.besmartcampus .case-container .bootcamps .bc.german .container {
    background: #fed265
}

.besmartcampus .case-container .bootcamps .bc.english h3 {
    color: #ff5b5b
}

.besmartcampus .case-container .bootcamps .bc.english .container {
    background: #ffc1c1
}

.besmartcampus .case-container .bootcamps .bc.spanish h3 {
    color: #ffc71f
}

.besmartcampus .case-container .bootcamps .bc.spanish .container {
    background: #fff6d9
}

@media(min-width:300px) {
    .besmartcampus .case-container .bootcamps .bc {
        height: auto;
        margin: 150px auto 0
    }

    .besmartcampus .case-container .bootcamps .bc:first-child {
        margin-top: -20px
    }

    .besmartcampus .case-container .bootcamps .bc:last-child {
        margin-bottom: 150px
    }

    .besmartcampus .case-container .bootcamps .bc .container {
        position: relative;
        width: 70%;
        padding: 40px;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center
    }

    .besmartcampus .case-container .bootcamps .bc figure {
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 40px)
    }

    .besmartcampus .case-container .bootcamps .bc figure img {
        width: 100%;
        margin-bottom: -140px;
        transform: translateZ(0);
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2))
    }
}

@media(min-width:600px) {
    .besmartcampus .case-container .bootcamps {
        overflow: hidden;
        padding-top: 20px;
        margin-top: -60px
    }

    .besmartcampus .case-container .bootcamps .bc {
        display: grid;
        width: 580px;
        margin: 0 auto
    }

    .besmartcampus .case-container .bootcamps .bc:first-child {
        margin-top: 0
    }

    .besmartcampus .case-container .bootcamps .bc:last-child {
        margin-bottom: 50px
    }

    .besmartcampus .case-container .bootcamps .bc:nth-child(even) {
        justify-items: end
    }

    .besmartcampus .case-container .bootcamps .bc:nth-child(even) .container {
        text-align: right
    }

    .besmartcampus .case-container .bootcamps .bc:nth-child(even) figure {
        left: -40px;
        right: auto
    }

    .besmartcampus .case-container .bootcamps .bc.chemistry figure {
        height: 380px;
        right: -100px
    }

    .besmartcampus .case-container .bootcamps .bc.history figure {
        height: 330px;
        top: 40px;
        right: -100px
    }

    .besmartcampus .case-container .bootcamps .bc.businesseconomy figure {
        height: 450px;
        top: 0;
        left: -140px
    }

    .besmartcampus .case-container .bootcamps .bc .container {
        position: static;
        width: 80%;
        padding: 40px 40px 50px;
        margin: 150px 0;
        text-align: left
    }

    .besmartcampus .case-container .bootcamps .bc figure {
        position: absolute;
        top: 20px;
        left: auto;
        right: -40px;
        transform: none;
        width: auto;
        height: 350px;
        margin: 0
    }

    .besmartcampus .case-container .bootcamps .bc figure img {
        width: auto;
        height: 100%;
        margin-bottom: 0;
        transform: translateZ(0);
        filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.2));
        transform: translateZ(0)
    }
}

@media(min-width:992px) {
    .besmartcampus .case-container .bootcamps .bc {
        width: 880px
    }

    .besmartcampus .case-container .bootcamps .bc:last-child {
        margin-bottom: 0
    }

    .besmartcampus .case-container .bootcamps .bc:nth-child(even) figure {
        left: 0
    }

    .besmartcampus .case-container .bootcamps .bc.chemistry figure {
        height: 450px;
        right: -40px
    }

    .besmartcampus .case-container .bootcamps .bc.history figure {
        height: 450px;
        top: 40px;
        right: -60px
    }

    .besmartcampus .case-container .bootcamps .bc.businesseconomy figure {
        height: 550px;
        top: 30px;
        left: -100px
    }

    .besmartcampus .case-container .bootcamps .bc .container {
        padding: 60px 60px 80px;
        margin: 200px 0
    }

    .besmartcampus .case-container .bootcamps .bc figure {
        top: 40px;
        right: 0;
        height: 450px
    }
}

@media(min-width:1400px) {
    .besmartcampus .case-container .bootcamps .bc {
        width: 1200px
    }

    .besmartcampus .case-container .bootcamps .bc.chemistry figure {
        height: 600px;
        top: 40px;
        right: -40px
    }

    .besmartcampus .case-container .bootcamps .bc.history figure {
        height: 600px;
        top: 60px
    }

    .besmartcampus .case-container .bootcamps .bc.businesseconomy figure {
        height: 750px;
        top: 10px;
        left: -100px
    }

    .besmartcampus .case-container .bootcamps .bc .container {
        padding: 80px 80px 100px;
        margin: 300px 0
    }

    .besmartcampus .case-container .bootcamps .bc figure {
        top: 60px;
        height: 600px
    }
}

.next {
    position: relative
}

.next .max {
    margin: 0 auto
}

.next::before {
    position: absolute;
    right: 0;
    left: 0;
    content: "";
    display: block;
    background: #eaf4f5
}

.next::after {
    content: "";
    clear: both;
    display: table
}

.next .hi, .next .go {
    border-radius: 20px;
    overflow-x: clip
}

.next .hi h3, .next .hi h4, .next .go h3, .next .go h4 {
    color: #FFF
}

.next .hi p, .next .go p {
    color: #FFF
}

.next .hi {
    position: relative;
    overflow: hidden;
    z-index: 10;
    box-sizing: border-box;
    background: #1d1d1b
}

.next .hi::before {
    position: absolute;
    content: "";
    display: block;
    aspect-ratio: 1/1;
    background: url(../../assets/img/me-full.png) no-repeat 0 center;
    background-size: auto 100%
}

.next .hi h3 {
    padding: 0
}

.next .go {
    position: relative;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    z-index: 20
}

.next .go figure {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    border-radius: 20px;
    z-index: 10;
    -webkit-mask-image: linear-gradient(to top, transparent 1%, black 70%);
    mask-image: linear-gradient(to top, transparent 1%, black 70%)
}

.next .go figure img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.next .go .container {
    position: relative;
    z-index: 20
}

@media(min-width:300px) {
    .next {
        text-align: center;
        margin-bottom: 80px
    }

    .next::before {
        top: 40px;
        bottom: 160px
    }

    .next .hi {
        width: 90%;
        padding: 160px 0 180px;
        margin: -120px auto 0
    }

    .next .hi::before {
        top: auto;
        bottom: -50%;
        left: 50%;
        transform: translate(-50%, -100px);
        width: 260px
    }

    .next .go {
        width: 80%;
        max-width: 360px;
        height: 300px;
        margin: 0 20px 0 0;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(29, 29, 27, 0.3)
    }

    .next .go .container {
        padding: 20px 20px 30px 20px;
        margin: 0 auto
    }

    .next .all {
        padding-top: 40px
    }
}

@media(min-width:600px) {
    .next {
        text-align: left;
        margin-bottom: 120px
    }

    .next .max {
        max-width: 700px
    }

    .next::before {
        top: 60px;
        bottom: 180px
    }

    .next .hi {
        display: flex;
        align-items: center;
        float: left;
        width: 60%;
        height: 260px;
        padding: 0 0 0 110px;
        margin: -40px 0 0 60px
    }

    .next .hi::before {
        width: 200px;
        top: 50%;
        bottom: auto;
        left: 0;
        transform: translate(-50%, -50%)
    }

    .next .go {
        float: right;
        width: 60%;
        max-width: none;
        height: 300px;
        margin: 0 60px 0 0
    }

    .next .go .container {
        padding: 30px 30px 45px 30px;
        margin: 0
    }

    .next .all {
        text-align: center;
        clear: both;
        padding-top: 60px
    }
}

@media(min-width:992px) {
    .next {
        margin-bottom: 160px
    }

    .next .max {
        max-width: 1200px
    }

    .next::before {
        top: 80px;
        bottom: 240px
    }

    .next .hi {
        width: 50%;
        height: 380px;
        padding: 0 0 0 170px;
        margin: -80px 0 0 80px
    }

    .next .hi::before {
        width: 300px
    }

    .next .go {
        width: 50%;
        height: 440px;
        margin: 0 80px 0 0;
        box-shadow: 0 0 40px rgba(29, 29, 27, 0.3)
    }

    .next .go .container {
        padding: 40px 40px 60px 40px
    }

    .next .all {
        padding-top: 80px
    }
}

@media(min-width:1400px) {
    .next {
        margin-bottom: 200px
    }

    .next .max {
        max-width: 1600px
    }

    .next::before {
        top: 100px;
        bottom: 300px
    }

    .next .hi {
        width: 50%;
        height: 440px;
        padding: 0 0 0 220px;
        margin: -80px 0 0 200px
    }

    .next .hi::before {
        width: 380px
    }

    .next .go {
        width: 50%;
        height: 500px;
        margin: 0 200px 0 0
    }

    .next .go .container {
        padding: 60px 60px 90px 60px
    }

    .next .all {
        padding-top: 120px
    }
}

.bonesandrockets .case-container .bg-color {
    border-radius: 20px;
    background: #1d1d1b
}

.bonesandrockets .case-container .bg-color .content h3 {
    color: #ff84c2
}

.bonesandrockets .case-container .bg-color .content h3.fw {
    color: #ff9300
}

.bonesandrockets .case-container .bg-color .content p {
    color: #FFF
}

.bonesandrockets .case-container .bg-color .content p.fw {
    color: #ff9300
}

.bonesandrockets .palette-04 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.bonesandrockets .palette-04 .color {
    position: relative;
    text-indent: -9999px;
    overflow: hidden
}

.bonesandrockets .palette-04 .color.base-01 {
    border-inline: 1px solid #FFF;
    background: #1d1d1b
}

.bonesandrockets .palette-04 .color.base-02 {
    background: #ff84c2
}

.bonesandrockets .palette-04 .color.base-03 {
    background: #387c8d
}

.bonesandrockets .palette-04 .color.base-04 {
    background: #ff9300
}

.bonesandrockets .palette-04 .color.base-05 {
    background: #eaf4f5
}

.bonesandrockets .palette-04 .color.base-06 {
    background: #FFF
}

.bonesandrockets .gem {
    position: relative;
    display: grid
}

.bonesandrockets .gem .alert {
    position: relative;
    justify-self: center
}

.bonesandrockets .gem .alert .alert-content {
    background: #ff9300;
    text-align: center
}

.bonesandrockets .gem .alert .alert-content h3 span, .bonesandrockets .gem .alert .alert-content p span {
    opacity: 1;
    transition: opacity .3s ease-in-out
}

.bonesandrockets .gem .alert .alert-content h3 span {
    color: #1d1d1b
}

.bonesandrockets .gem .alert .alert-content p {
    color: #FFF
}

.bonesandrockets .gem .alert .alert-content .btn {
    cursor: pointer;
    transition: opacity .3s ease-in-out
}

.bonesandrockets .gem .alert::before, .bonesandrockets .gem .alert::after {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    z-index: -1;
    background: #ff9300
}

.bonesandrockets .gem .alert::before {
    margin-bottom: -2px;
    -webkit-mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat;
    mask: url("../../assets/img/projectssumm-bottom.svg") center center/100% 100% no-repeat
}

.bonesandrockets .gem .alert::after {
    margin-top: -2px;
    -webkit-mask: url("../../assets/img/projectssumm-top.svg") center center/100% 100% no-repeat;
    mask: url("../../assets/img/projectssumm-top.svg") center center/100% 100% no-repeat
}

.wiggle-gem .bonesandrockets .gem {
    animation: shake-it-baby .8s .3s forwards
}

.wiggle-gem .bonesandrockets .gem .alert-content div {
    animation: shake-it-baby-rev .8s .3s forwards
}

.wiggle-gem .bonesandrockets .gem .alert-content div h3 span, .wiggle-gem .bonesandrockets .gem .alert-content div p span {
    opacity: .8;
    transition: opacity .3s ease-in-out .2s
}

.wiggle-gem .bonesandrockets .gem .alert-content div span {
    opacity: .2;
    pointer-events: none
}

@keyframes shake-it-baby {
    0% {
        transform: translateY(0)
    }

    12.5% {
        transform: translateY(-40px)
    }

    25% {
        transform: translateY(0)
    }

    37.5% {
        transform: translateY(40px)
    }

    50% {
        transform: translateY(0)
    }

    62.5% {
        transform: translateX(-40px)
    }

    75% {
        transform: translateX(0)
    }

    87.5% {
        transform: translateX(40px)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes shake-it-baby-rev {
    0% {
        transform: translateY(0)
    }

    12.5% {
        transform: translateY(50px)
    }

    25% {
        transform: translateY(0)
    }

    37.5% {
        transform: translateY(-50px)
    }

    50% {
        transform: translateY(0)
    }

    62.5% {
        transform: translateX(50px)
    }

    75% {
        transform: translateX(0)
    }

    87.5% {
        transform: translateX(-50px)
    }

    100% {
        transform: translateX(0)
    }
}

@media(min-width:300px) {
    .bonesandrockets .case-container .bg-color {
        padding-top: 80px
    }

    .bonesandrockets .palette-04 {
        gap: 20px;
        margin: 0 10px 40px
    }

    .bonesandrockets .palette-04 .color {
        width: 60px;
        height: 100px;
        border-radius: 30px
    }

    .bonesandrockets .alert {
        max-width: 350px;
        margin: 40px
    }

    .bonesandrockets .alert .alert-content {
        padding: 0 40px
    }

    .bonesandrockets .alert .alert-content p {
        padding: 0 20px 20px
    }

    .bonesandrockets .alert::before, .bonesandrockets .alert::after {
        height: 80px
    }
}

@media(min-width:600px) {
    .bonesandrockets .case-container .bg-color {
        padding-top: 120px
    }

    .bonesandrockets .palette-04 {
        gap: 30px;
        margin: 0 20px 60px
    }

    .bonesandrockets .palette-04 .color {
        width: 90px;
        height: 200px;
        border-radius: 45px
    }

    .bonesandrockets .alert {
        max-width: 450px;
        margin: 60px 0
    }

    .bonesandrockets .alert .alert-content {
        padding: 0 10%
    }

    .bonesandrockets .alert .alert-content p {
        padding: 0 30px 30px
    }

    .bonesandrockets .alert::before, .bonesandrockets .alert::after {
        height: 100px
    }
}

@media(min-width:992px) {
    .bonesandrockets .case-container .bg-color {
        padding-top: 160px
    }

    .bonesandrockets .palette-04 {
        gap: 40px;
        margin: 0 30px 80px
    }

    .bonesandrockets .alert {
        max-width: 550px;
        margin: 80px 0
    }

    .bonesandrockets .alert .alert-content {
        padding: 0 10%
    }

    .bonesandrockets .alert .alert-content p {
        padding: 0 40px 40px
    }

    .bonesandrockets .alert::before, .bonesandrockets .alert::after {
        height: 130px
    }
}

@media(min-width:1400px) {
    .bonesandrockets .case-container .bg-color {
        padding-top: 200px
    }

    .bonesandrockets .palette-04 {
        gap: 60px;
        margin: 0 50px 100px
    }

    .bonesandrockets .palette-04 .color {
        width: 140px;
        height: 380px;
        border-radius: 70px
    }

    .bonesandrockets .alert {
        max-width: 650px;
        margin: 100px 0
    }

    .bonesandrockets .alert .alert-content {
        padding: 0 10%
    }

    .bonesandrockets .alert .alert-content p {
        padding: 0 60px 60px
    }

    .bonesandrockets .alert::before, .bonesandrockets .alert::after {
        height: 160px
    }
}