* {
    box-sizing: border-box;
    text-decoration: none;
	padding: 0;
	margin: 0;
}
body {
    background-color: #000;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: .01rem;
}
img {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
h1 {
    font-size: 3.2rem;
    font-weight: 700;
}
.highlight {
    color: #F58115;
}
.small {
    display: none;
}



nav {
    position: absolute;
    z-index: 1;
    top: 2.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 54rem;
    display: flex;
    flex-flow: row nowrap;
    gap: 4.2rem;
}
.nav-plain {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    font-size: 1.2rem;
    transition: filter .15s ease-out;
    &:hover {
        cursor: pointer;
        filter: drop-shadow(0 0 .8rem rgba(255,255,255,1));
    }
}
.nav-icon {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-left: 3rem;
}
.nav-accent {
    font-weight: 600;
    color: #F58115;
    &:hover {
        filter: drop-shadow(0 0 .8rem rgba(245,129,21,1));
    }
}



main {
	overflow-x: clip;
}
section {
    position: relative;
}
#home {
    height: 57.55rem;
}
#design {
    height: 52.2rem;
}
#photography {
    height: 49.9rem;
    color: #000;
}
#contact {
    height: 52.4rem;
}



.back {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-2.05rem);
    z-index: -2;
}
.left {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-48rem);
    z-index: -1;
}
.right {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(48rem);
    z-index: -1;
}
#home h1 {
    position: absolute;
    top: 33.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 54rem;
}
#home .row-icon {
    position: absolute;
    z-index: 1;
    top: 33.7rem;
    left: 50%;
    transform: translateX(4.95rem);
    display: flex;
    flex-flow: row nowrap;
    gap: 2rem;
}
#home .row-icon svg {
    transition: filter .15s ease-out, transform .15s ease-out;
    &:hover {
        filter: drop-shadow(0 0 .8rem rgba(245,129,21,.5));
        cursor: pointer;
        transform: scale(1.1);
    }
}
#home .logo {
    position: absolute;
    z-index: 1;
    top: 2.4rem;
    left: 2.4rem;
    transition: filter .15s ease-out, transform .15s ease-out;
    &:hover {
        filter: drop-shadow(0 0 .8rem rgba(255,255,255,.5));
        cursor: pointer;
        transform: scale(1.1);
    }
}
#home p {
    position: absolute;
    top: 41.05rem;
    left: 50%;
    transform: translateX(-50%);
    width: 54rem;
}



.e1 {
    position: absolute;
    top: .65rem;
    left: 50%;
    transform: translateX(-62rem);
    z-index: -3;
}
.e2 {
    position: absolute;
    top: -14.75rem;
    right: 50%;
    transform: translateX(59.45rem);
    z-index: -3;
}
#design h1 {
    position: absolute;
    top: 4.6rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
#design .row-fill {
    position: absolute;
    z-index: 1;
    top: 11.3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
}
.blob-fill {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    background-color: #fff;
    border-radius: 3rem;
    padding: .6rem 1.2rem;
    font-weight: 600;
    box-shadow: 0 0 1.6rem rgba(255,255,255,.25);
    transition: filter .15s ease-out;
    &:hover {
        filter: drop-shadow(0 0 1.6rem rgba(255,255,255,.25));
    }
}
.uxui {
    color: #1C0D09;
}
.web {
    color: #301003;
}
.mobile {
    color: #492211;
}
#design .row-wrapper {
    position: absolute;
    z-index: 1;
    top: 15.6rem;
    width: 100%;
}
.row-outline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    gap: 0;
}
.blob-wrapper {
    padding: 0 .5rem;
    transition: padding .15s ease-out, transform .15s ease-out;
    &:hover {
        padding: 0 1.5rem;
        transform: scale(1.1);
    }
}
.blob-outline {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    border: .15rem solid #fff;
    border-radius: 3rem;
    padding: .45rem 1.05rem;
}
#design .row-project {
    position: absolute;
    z-index: 1;
    top: 22.3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
}
.column {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}
.column:nth-child(1) {
    margin-top: 3.8rem;
}
.column:nth-child(3) {
    margin-top: 1.85rem;
}
.column:nth-child(4) {
    margin-top: 4.3rem;
}
.img-project {
    width: 12.75rem;
    border-radius: .7rem;
}
.img-top {
    transition: transform .15s ease-out;
    &:hover {
        transform: translateY(-1rem);
    }
}
#design .shade {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    top: 29.8rem;
    height: 15rem;
    width: 100%;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
}
#design .block {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    top: 44.8rem;
    height: 7.4rem;
    width: 100%;
    background-color: #000;
}
.cta-design {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    position: absolute;
    z-index: 3;
    top: 42.35rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: gap .15s ease-out;
    &:hover {
        cursor: pointer;
        gap: 1.4rem;
    }
}
.cta-design svg {
    transform: rotate(-30deg) translateY(-.15rem);
}



#photography .bot {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96rem;
    height: 60rem;
    object-fit: cover;
    object-position: 50% 0%;
}
#photography .top {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    top: 30rem;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 96rem;
    height: 60rem;
    object-fit: cover;
    object-position: 50% 50%;
}
#photography h1 {
    position: absolute;
    z-index: 1;
    top: 7.6rem;
    left: 50%;
    transform: translateX(-50%);
}
#photography p {
    position: absolute;
    z-index: 1;
    top: 13.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 54rem;
    font-weight: 500;
    text-align: center;
}
.cta-circle {
    position: absolute;
    top: 28rem;
    left: calc(50% + 4.75rem);
    transform: translate(-50%,-50%);
    width: 12rem;
    height: 12rem;
    border-radius: 20rem;
    background-color: #F58115;
    transition: width .15s ease-out, height .15s ease-out;
    &:hover {
        cursor: pointer;
        width: 14rem;
        height: 14rem;
    }
}
.cta-photo {
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    position: absolute;
    z-index: 1;
    top: 28rem;
    left: calc(50% + 4.75rem);
    transform: translate(-50%,-50%);
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.cta-photo svg {
    transform: rotate(-30deg) translateY(-.15rem);
}



.e3 {
    position: absolute;
    z-index: 4;
    top: 18.9rem;
    left: 50%;
    transform: translateX(-66.05rem);
}
.e4 {
    position: absolute;
    z-index: 4;
    top: 19rem;
    right: 50%;
    transform: translateX(79.35rem);
}
#contact .block {
    position: absolute;
    z-index: 3;
    top: 0;
    height: 52.4rem;
    width: 100%;
    background-color: #000;
}
#contact h1 {
    position: absolute;
    z-index: 5;
    top: 6.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 54rem;
    color: #F58115;
}
#contact p {
    position: absolute;
    z-index: 5;
    top: 11.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 54rem;
}
.list-contact {
    position: absolute;
    z-index: 5;
    top: 18.8rem;
    left: 50%;
    transform: translateX(-27rem);
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
}
.row-contact {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 2rem;
    font-weight: 500;
    transition: color .15s ease-out;
    &:hover {
        cursor: pointer;
        color: #F58115;
    }
    &:hover .link {
        fill: #F58115;
        filter: drop-shadow(0 0 .8rem rgba(245,129,21,.5));
    }
}
.row-contact .link {
    transition: fill .15s ease-out, filter .15s ease-out;
    fill: #fff;
    filter: drop-shadow(0 0 .8rem rgba(255,255,255,.5));
}
footer {
    position: absolute;
    z-index: 5;
    top: 208.05rem;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 2.8rem;
    width: 54rem;
    font-size: 1rem;
}



@media (width > 96rem) {
    .left {
        left: 0;
        transform: unset;
    }
    .right {
        right: 0;
        transform: unset;
    }

    #photography {
        height: calc(49.9rem + 14.27vw - 13.7rem);
    }
    #photography .bot {
        left: unset;
        transform: unset;
        width: 100%;
        height: calc(60rem + 14.27vw - 13.7rem);
    }
    #photography .top {
        left: unset;
        transform: translateY(-50%);
        width: 100%;
        height: calc(60rem + 28.54vw - 27.4rem);
    }

    footer {
        top: calc(208.05rem + 14.27vw - 13.7rem);
    }
}



@media (64rem > width) {
    .small {
        display: unset;
    }
    nav, .large {
        display: none;
    }
    .back {
        left: unset;
        right: -105.65rem;
        transform: unset;
    }

    #home .row-icon {
        top: 2.4rem;
        left: unset;
        right: 2.4rem;
        transform: unset;
    }
    #home h1, #home p {
        width: 30.4rem;
    }
    #home {
        height: 59.25rem;
    }

    #design .row-wrapper {
        overflow-x: scroll;
        scrollbar-width: none;
    }
    .row-outline {
        position: relative;
        left: max(.5rem, 50% - 25.339rem);
        transform: unset;
    }
    .blob-wrapper:last-child {
        padding-right: 1rem;
    }
    .blob-wrapper:hover {
        padding: 0 .5rem;
        transform: unset;
    }
    .img-top:hover {
        transform: unset;
    }

    #photography .bot {
        left: calc(50% - 5rem);
        height: 63rem;
    }
    #photography .top {
        left: calc(50% - 5rem);
        top: 31.5rem;
        height: 63rem;
    }
    #photography p {
        width: 30.4rem;
    }
    #photography {
        height: 52.1rem;
    }
    .cta-circle {
        top: 29.7rem;
        left: 50%;
    }
    .cta-photo {
        top: 29.7rem;
        left: 50%;
    }

    #contact h1, #contact p {
        width: 30.4rem;
        text-align: center;
    }
    .list-contact {
        top: 20.5rem;
        transform: translateX(-50%);
    }
    .e3 {
        top: 20.6rem;
    }
    .e4 {
        top: 20.7rem;
    }
    #contact {
        height: 54.1rem
    }
    footer {
        top: 213.65rem;
        width: unset;
        text-wrap: nowrap;
    }
}



@media (36rem > width) {
    body {
        font-size: 3.8889vw;
        letter-spacing: .0278vw;
    }
    h1 {
        font-size: 8.8889vw;
    }
    
    #home {
        height: 164.5833vw;
    }
    #design {
        height: 145vw;
    }
    #photography {
        height: 144.7222vw;
    }
    #contact {
        height: 150.2778vw;
    }
    
    .back {
        width: 317.9167vw;
        height: 107.6389vw;
        right: -293.4722vw;
    }
    .link {
        width: 8.8889vw;
        height: 8.8889vw;
    }
    #home h1 {
        top: 92.6389vw;
        width: 84.4444vw;
    }
    #home .row-icon {
        top: 6.6667vw;
        right: 6.6667vw;
        gap: 5.5556vw;
    }
    #home .row-icon svg {
        &:hover {
            filter: drop-shadow(0 0 2.2222vw rgba(245,129,21,.5));
        }
    }
    #home .logo {
        width: 8.8889vw;
        height: 8.8889vw;
        top: 6.6667vw;
        left: 6.6667vw;
        &:hover {
            filter: drop-shadow(0 0 2.2222vw rgba(255,255,255,.5));
        }
    }
    #home p {
        top: 114.0278vw;
        width: 84.4444vw;
    }
    
    .e1 {
        width: 205.8333vw;
        height: 168.0556vw;
        top: 1.8056vw;
        transform: translateX(-172.2222vw);
    }
    .e2 {
        width: 224.7222vw;
        height: 202.5vw;
        top: -40.9722vw;
        transform: translateX(165.1389vw);
    }
    #design h1 {
        top: 12.7778vw;
    }
    #design .row-fill {
        top: 31.3889vw;
        gap: 2.7778vw;
    }
    .blob-fill {
        border-radius: 8.3333vw;
        padding: 1.6667vw 3.3333vw;
        box-shadow: 0 0 4.4444vw rgba(255,255,255,.25);
        &:hover {
            filter: drop-shadow(0 0 4.4444vw rgba(255,255,255,.25));
        }
    }
    #design .row-wrapper {
        top: 43.3333vw;
    }
    .row-outline {
        left: max(1.3889vw, 50% - 70.3861vw);
    }
    .blob-wrapper {
        padding: 0 1.3889vw;
        &:hover {
            padding: 0 1.3889vw;
        }
    }
    .blob-wrapper:last-child {
        padding-right: 2.7778vw;
    }
    .blob-outline {
        border: 0.4167vw solid #fff;
        border-radius: 8.3333vw;
        padding: 1.25vw 2.9167vw;
    }
    #design .row-project {
        top: 61.9444vw;
        gap: 2.7778vw;
    }
    .column {
        gap: 2.7778vw;
    }
    .column:nth-child(1) {
        margin-top: 10.5556vw;
    }
    .column:nth-child(3) {
        margin-top: 5.1389vw;
    }
    .column:nth-child(4) {
        margin-top: 11.9444vw;
    }
    .img-project {
        width: 35.4167vw;
        border-radius: 1.9444vw;
    }
    #design .shade {
        top: 82.7778vw;
        height: 41.6667vw;
    }
    #design .block {
        top: 124.4444vw;
        height: 20.5556vw;
    }
    .cta-design {
        top: 117.6389vw;
        font-size: 3.3333vw;
        gap: 1.1111vw;
        &:hover {
            gap: 3.8889vw;
        }
    }
    .cta-design svg {
        width: 2.8889vw;
        height: 2.5vw;
        transform: rotate(-30deg) translateY(-0.4167vw);
    }
    
    #photography .bot {
        width: 266.6667vw;
        left: calc(50% - 13.8889vw);
        height: 175vw;
    }
    #photography .top {
        left: calc(50% - 13.8889vw);
        top: 87.5vw;
        width: 266.6667vw;
        height: 175vw;
    }
    #photography h1 {
        top: 21.1111vw;
    }
    #photography p {
        top: 36.3889vw;
        width: 84.4444vw;
    }
    .cta-circle {
        top: 82.5vw;
        width: 33.3333vw;
        height: 33.3333vw;
        border-radius: 55.5556vw;
        &:hover {
            width: 38.8889vw;
            height: 38.8889vw;
        }
    }
    .cta-photo {
        top: 82.5vw;
        font-size: 3.3333vw;
        gap: 1.1111vw;
    }
    .cta-photo svg {
        width: 2.8889vw;
        height: 2.5vw;
        transform: rotate(-30deg) translateY(-0.4167vw);
    }
    
    .e3 {
        width: 224.7222vw;
        height: 93.0556vw;
        top: 57.2222vw;
        transform: translateX(-183.4722vw);
    }
    .e4 {
        width: 231.6667vw;
        height: 92.7778vw;
        top: 57.5vw;
        transform: translateX(220.4167vw);
    }
    #contact .block {
        height: 145.5556vw;
    }
    #contact h1 {
        top: 16.9444vw;
        width: 84.4444vw;
    }
    #contact p {
        top: 32.2222vw;
        width: 84.4444vw;
    }
    .list-contact {
        top: 56.9444vw;
        gap: 5.5556vw;
    }
    .row-contact {
        gap: 5.5556vw;
        &:hover .link {
            filter: drop-shadow(0 0 2.2222vw rgba(245,129,21,.5));
        }
    }
    .row-contact .link {
        filter: drop-shadow(0 0 2.2222vw rgba(255,255,255,.5));
    }
    footer {
        top: 593.4722vw;
        padding-bottom: 7.7778vw;
        font-size: 2.7778vw;
    }
}