@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

.playfair-display-700 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
    font-family: HKGrotesk-Light;
    src: url('/fonts/HKGrotesk-Light.otf') format("opentype");
}

@font-face {
    font-family: HKGrotesk-Medium;
    src: url('/fonts/HKGrotesk-Medium.otf') format("opentype");
}




@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');



:root {
    --header-height: 140px;
    --text-size-p: 18px;
    --text-color: #2E2929;

    --bg-color-1: #F8F2EB;
    --bg-color-2: #B9B0A0;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-color-1);

    color: var(--text-color);
}

body section:first-of-type {
    margin-top: var(--header-height);
}

section {
    width: 100%;
    /*font-family: "Work Sans", sans-serif;*/
    font-family: HKGrotesk-Light;
}

h1 {
    font-family: HKGrotesk-Medium;
    font-size: 23px;
}

h2 {
    font-family: HKGrotesk-Medium;
    font-size: 21px;
}

.btn {
    background-color: #292929;
    color: #fff;
    padding: 20px;
    text-decoration: none !important;
    display: block;
    text-transform: uppercase;
    text-align: center;
    max-width: 250px !important;
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0 auto;
    font-size: 18px;
    border: none !important;
    cursor: pointer;
}

.btn:hover {
    opacity: .8;
}


header {
    width: 100%;
    height: var(--header-height);
    line-height: 100px;

    background-color: var(--bg-color-1);

    padding: 20px 60px;

    text-transform: uppercase;
    position: fixed;
    z-index: 999;
    top: 0;

    /*box-shadow: #4443 0px 10px 20px;*/
}

header img {
    height: 100%;
}

header b {
    font-size: 25px;
    letter-spacing: 5px;
}

header #menu {
    float: right;
    top: var(--header-height);
}

header #menu.active {
    display: block;
    position: absolute;
    left: 0;
    height: auto;
    width: 100vw;
    background-color: var(--bg-color-1);
}

header #menu.active a {
    display: block;
    padding: 20px;
    padding-left: 40px;
}

header #menu.active a:hover {
    background-color: var(--bg-color-2);
}

header #menu a {
    padding-left: 40px;
    font-family: HKGrotesk-Medium;
    color: inherit !important;
    text-decoration: none !important;
    font-size: 20px;
}

header #menuBtn {
    display: none;
    float: right;

    padding: 10px;
}




.carouselContainer {

    padding-top: 30px;

    display: flex;
    flex-direction: row;
    justify-content: center;

    overflow: hidden;

    gap: 0px;

    height: auto;

    --image-width: min(300px, calc(100vw - 40px));

    & img {

        aspect-ratio: 450/650;

        padding: 0 20px;

        flex-grow: 0;
        flex-shrink: 0;

        object-fit: cover;
        height: 100%;
        width: var(--image-width);
    }

    & img.grow {
        width: 0px;
        padding: 0 0px;

        animation-name: spacerGrow;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;

    }

    & img.shrink {

        animation-name: spacerShrink;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;

    }

}

@keyframes spacerGrow {
    0% {
        width: 0px;
        padding: 0 0px;
    }

    100% {
        width: var(--image-width);
        padding: 0 20px;
    }
}

@keyframes spacerShrink {
    0% {
        width: var(--image-width);
        padding: 0 20px;
    }

    100% {
        width: 0px;
        padding: 0 0px;
    }
}

.carouselController {
    position: relative;
    padding: 40px 0;

    font-size: 14px;
    font-family: HKGrotesk-Light;

    &>div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50% + 70px), -50%);

        height: 10px;
        width: 60px;

        background-image: url('/img/arrow_right.png');
        background-position: center center;
        background-repeat: no-repeat;

        background-size: contain;

        opacity: 0.3;
        transition: opacity .3s;
        /*background-size: 100px 40px;*/
    }

    & #carouselArrowLeft {
        transform: translate(calc(-50% - 70px), -50%);
        background-image: url('/img/arrow_left.png');
    }

    & #carouselArrowLeft,
    & #carouselArrowRight {
        background-size: auto 15px;
        filter: brightness(0) saturate(100%) invert(13%) sepia(2%) saturate(2565%) hue-rotate(314deg) brightness(95%) contrast(90%);
        /* black to #2E2929 */
    }

    &>div:hover {
        /*background-size: 125px 50px;*/
        opacity: .8;
    }

    & span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        justify-content: center;

        display: flex;
        gap: 10px;

        font-family: HKGrotesk-Light;
        opacity: 0.6;
        font-weight: 400;

        --parent-height: 40px;
        --child-height: calc(var(--parent-height) / 2);

        height: var(--parent-height);
        width: 100px;

        & *:nth-child(1) {
            align-self: flex-start;
            height: var(--child-height);
            line-height: var(--child-height);
            font-size: var(--child-height);
        }

        & #carouselIndexDivider {
            align-self: center;
            height: var(--parent-height);
            line-height: var(--parent-height);
            font-size: var(--parent-height);
            background-color: var(--text-color);
            width: 1px;
            transform: rotateZ(30deg);
        }

        & *:nth-child(3) {
            align-self: flex-end;
            height: var(--child-height);
            line-height: var(--child-height);
            font-size: var(--child-height);
        }

    }

}



.tripleText {

    background-color: var(--bg-color-2);

    display: flex;

    font-size: var(--text-size-p);

    padding: 140px 25px;
    color: #f4f4f2;

    &>* {
        width: calc(100% / 3);
        padding: 50px;

        font-size: 20px;
        font-weight: 300;
        text-align: center;
    }

    &>*:nth-child(1) {
        font-size: 50px;
        position: relative;
    }

    &>*:nth-child(1)>* {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &>*:nth-child(2) {
        border-left: 1px solid #292929;
        border-right: 1px solid #292929;

        position: relative;
        padding: 0px;
    }

    & .middle {
        position: absolute;
        width: calc(100% - 50px * 2);
        top: 50%;
        left: 50px;
        transform: translateY(-50%);
    }

    &>*:nth-child(2) span {
        display: block;
        padding-bottom: 40px;
    }

    &>*:nth-child(3) center {
        font-family: HKGrotesk-Medium;
    }

    &>*:nth-child(3) li {
        margin-bottom: 15px;
    }

    & #blockTextContainer {
        /*text-align: left;*/
    }

}

#about {

    height: auto;
    min-height: 900px;

    display: flex;
    align-items: center;

    &>* {
        width: 50%;
        height: 100%;
    }

    & .left {
        padding: 40px;
        padding-left: 200px;
    }

    & .left img {
        width: 100%;
        height: 100%;

        object-fit: contain;
        float: right;
    }

    & .right {

        padding: 100px;

        position: relative;

        & p {
            font-size: var(--text-size-p);
            text-align: justify;
        }

    }

    & .right>div {
        padding-right: inherit;
    }

    & .right>div>* {
        max-width: 700px;
    }

    & .right .btn {
        margin: 50px 0 0 0 !important;
    }

}

#services {

    & .titleContainer {
        padding: 50px 0 50px 0;
        width: 100%;
        background-color: var(--bg-color-2);
        color: #f4f4f2;

        & h1 {
            text-align: center;
            text-transform: uppercase;
        }

        & p {
            padding: 0 40px;
            max-width: 800px;
        }

    }

    & .inner {
        margin: 0 auto;
        max-width: 100%;
        position: relative;

        &>p {
            padding-top: 20px;
        }

    }

    & p {
        font-size: var(--text-size-p);
        text-align: justify;
        margin: 0 auto;
    }

    & .btn {
        margin-top: 50px;
        max-width: 300px !important;
    }

    &>.inner>h1 {
        margin-top: 50px;
        margin-bottom: 0px;
        text-transform: uppercase;
        text-align: center;
    }

    & .container {

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;

        width: 100%;
        padding: 100px max(calc((100vw - 1300px)/2), 100px);
        margin: 0px auto;
    }

    & .container.accent {
        background-color: var(--bg-color-2);
        color: #f4f4f2;
    }

    & .container h1 {
        position: absolute;
        display: block;
        transform: rotateZ(90deg) translateY(-100px);
        flex-grow: 0;
        flex-shrink: 0;
        right: 0;
        font-family: HKGrotesk-Medium;
        font-size: 50px;
    }

    & .container.accent h1 {
        transform: rotateZ(270deg) translateY(-100px);
        left: 0;
        right: auto;
    }

    & .container img {
        width: 50%;
        padding-left: 100px;
        object-fit: contain;

        flex-grow: 1;
        align-self: stretch;
    }

    & .container.accent img {
        padding-left: 0px;
        padding-right: 100px;
    }

    & .container .inner {
        width: 50%;
        flex-grow: 1;
        padding-top: 30px;
        padding-bottom: 50px;
    }

    & .container .inner h2 {
        font-weight: 400;
        font-size: 23px !important;
        line-height: 1.2em;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    & .container .inner i {
        display: block;
        margin-bottom: 1.6em;
        font-family: serif;
        line-height: 1.65;
        font-size: 18px;
    }


    --folder-height: 40px;

    & .folder::before {
        content: '+';
        font-weight: 700;
        width: 25px;
        display: inline-block;
        user-select: none;
    }

    & .folder {
        height: var(--folder-height);
        overflow-y: hidden;
        transition: height 1s;
        cursor: pointer;
        font-size: 18px;
        margin-bottom: 2.6em;
    }

    & .folder span {
        display: inline-block;
        height: var(--folder-height);
        line-height: var(--folder-height);
        user-select: none;
    }

    & .folder ul {
        line-height: 30px;
        margin: 0;
        padding-bottom: 10px;
    }


    & .folder.open {
        height: auto;
    }

    & .folder.open::before {
        content: '-';
    }

    & .folder ul {
        line-height: 30px;
        margin: 0;
    }

    & .outline-btn {
        display: inline-block;
        text-decoration: none !important;
        color: inherit !important;
        padding: 10px 30px;
        border: 2px solid;
        text-transform: uppercase;
        user-select: none;
    }

}

#kontakt {

    background-color: #292929;

    padding: 100px;

    color: #f4f4f2 !important;

    &>div {
        padding: 50px 50px;
        margin: 0 auto;
        max-width: 1000px;
    }

    & #kreativmanagement {

        & label,
        & input,
        & textarea,
        & .required-icon {
            color: #f4f4f2 !important;
        }

        & .hm-contact-form-button-container {
            border: 1px solid;
            width: fit-content;

            justify-content: right;
            text-transform: uppercase;
            box-shadow: none !important;

            margin-top: 20px;

            &:focus {
                box-shadow: none !important;
            }

            &>a.hm-contact-form-button {
                margin: 0 !important;
            }

        }

        & input,
        & textarea {
            background-color: #0000;
        }

    }

    /*
    & h1{
        margin-top: 0px;
        margin-bottom: 0px;
        text-transform: uppercase;
    }

    & span{
        color: #444;
    }

    & p{
        margin-top: 50px;
        font-size: 20px;
        text-align: justify;
    }

    & a{
        display: inline-block;
        width: 100%;
        height: 40px;
        line-height: 40px;

        text-decoration: none;
        text-transform: uppercase;
        font-size: 20px;
        color: inherit !important;

        padding-left: 20px;
    }

    & a:hover{
        text-decoration: underline !important;
    }

    & a img{
        height: 100%;
        width: 20px;
        object-fit: contain;
        float: left;
        margin-right: 10px;
    }

    & a:nth-of-type(2){
        float: right;
    }

    & input, & textarea, & select{
        border: none !important;
        border-bottom: 1px solid #292929 !important;
        outline: none !important;
        height: 50px;
        line-height: 50px;
        color: #444 !important;
        font-size: 20px;

        font-family: "Cormorant Garamond", serif;
        font-weight: 400;
        font-style: normal;

        letter-spacing: 1px;

        background-color: rgba(0,0,0,0);
    }

    & input[name="fullname"], & input[name="email"]{
        width: calc(50% - 20px);
        margin-top: 60px;
    }

    & input[name="email"]{
        float: right;
    }

    & input[name="phonenumber"]{
        width: calc(50% - 20px);
        margin-top: 20px;
    }

    & select{
        width: calc(50% - 20px);
        float: right;
        margin-top: 20px;

        background-color: #0000;

        text-transform: uppercase;
    }

    & textarea{
        margin-top: 40px;
        padding-bottom: 20px;
        line-height: 25px;
        width: 100%;
        min-height: 100px;
        resize: vertical;
    }

    & .btn{
        margin-top: 40px;
        width: 100%;
    }

    */

}

footer {
    background-color: #292929;
    padding: 100px;

    border-top: 1px solid #ccc;

    font-family: HKGrotesk-Medium;

    & hr {
        margin-top: 70px;
        margin-bottom: 50px;
    }

    & img {
        margin: 0 auto;
        margin-bottom: 30px;
        width: 100%;
        max-width: 300px;
        padding: 40px;
    }

    & * {
        display: block;
        font-size: 20px;
        color: #ccc !important;
    }
}






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

    #about {

        & .left {
            padding-left: 100px;
        }

        & .right>div {

            padding-right: 0px;

        }

    }

}


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

    .tripleText {
        flex-wrap: wrap;
        padding: 25px;

        &>*:nth-child(2) {
            padding: 50px;
        }

        & .middle {
            position: static;
            width: 100%;
            transform: none;
        }

    }

    .tripleText>div {
        width: 100%;
        border: none !important;
        text-align: center;

        background-image: linear-gradient(#292929, #292929);
        background-size: 50% 1px;
        background-repeat: no-repeat;
        background-position: bottom center;

        height: auto;

    }

    .tripleText ul li {
        text-align: left;
    }

    .tripleText>div:last-child {
        background-image: none !important;
    }

    .tripleText>div>* {
        max-width: 500px;
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .tripleText>*:nth-child(1)>* {
        position: static;
        transform: none;
    }



    #about {

        flex-wrap: wrap;

        &>* {
            width: 100%;
        }

        & .left {
            padding: 100px;
            padding-bottom: 40px;
        }

        & .left img {
            height: 600px;
            object-fit: cover;
        }

        & .right {
            padding-top: 0px;
            width: auto;
            margin: 0 auto;
        }

        & .right .btn {
            margin-left: auto !important;
            margin-right: auto !important;
        }

    }

    #services>.inner {

        &>p,
        &>h1 {
            padding-left: 30px;
            padding-right: 30px;
        }

    }


}


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

    #services {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

}


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

    :root {
        --text-size-p: 18px;
        --header-height: 80px;
    }

    header {
        line-height: 60px;
        padding: 10px 50px;
    }

    header #menu {
        display: none;
    }

    header #menuBtn {
        display: block;
    }

    #blockTextContainer {
        transform: none;
    }

    #about {

        & .left,
        .right {
            padding: 40px;
        }

        & .right {
            padding-top: 0px;
            padding-bottom: 80px;

            & h1 {
                text-align: center;
            }

        }

    }

    #services .container {

        flex-direction: column !important;
        padding: 50px;

        &>* {
            width: 100% !important;
        }

        & img {
            padding: 0 !important;
        }

        & .inner h2 {
            text-align: left !important;
        }

        & h1 {
            display: none;
        }

    }

    #kontakt {

        padding: 0px;

        & input,
        & textarea,
        & select {
            width: 100% !important;
            margin-bottom: 20px !important;
        }

    }

    footer {
        text-align: center;
    }

}

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

    #about {

        & img {
            object-position: 0% bottom;
            padding: 0 10px;
        }

    }

}

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

    #about {

        & img {
            object-position: 10% bottom;
            padding: 0 0;
        }

    }

}

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

    #about {

        & img {
            object-position: center bottom;
        }

    }

}

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

    #services {

        padding-top: 50px;

        & .container .inner h2 {
            font-size: 30px;
            text-align: center !important;
        }

        & .container .outline-btn {
            display: block;
            width: fit-content;
            margin: 0 auto;
        }

        & h2 b{
            display: block;
        }

    }

}