/* =========================================================
   MIRKA CONTACT PAGE V1
   ========================================================= */

body.mirka-contact-active{
    background:#f2ede1 !important;
    color:#28271f !important;
}


.mirka-contact-page{
    width:min(1540px,calc(100% - 48px));
    margin:0 auto;
    background:#f2ede1;
}


/* HERO */

.mirka-contact-hero{
    position:relative;

    min-height:570px;

    display:flex;
    align-items:center;

    background-size:cover;
    background-position:center;

    overflow:hidden;
}


.mirka-contact-hero__overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(38,34,24,.58),
            rgba(38,34,24,.13) 60%,
            rgba(38,34,24,.04)
        );
}


.mirka-contact-hero__copy{
    position:relative;
    z-index:2;

    width:min(430px,45%);

    margin-right:8%;

    color:#fff;
}


.mirka-contact-hero__copy > span{
    display:block;

    margin-bottom:14px;

    font-size:10px;
    letter-spacing:.30em;
}


.mirka-contact-hero__copy h1{
    margin:0 0 14px;

    font-size:50px;
    line-height:1.25;

    font-weight:400;
}


.mirka-contact-hero__copy p{
    max-width:380px;

    margin:0;

    font-size:12px;
    line-height:2.05;
}


/* MAIN */

.mirka-contact-main{
    display:grid;

    grid-template-columns:
        minmax(300px,.78fr)
        minmax(0,1.22fr);

    gap:75px;

    padding:75px 7%;
}


/* DETAILS */

.mirka-contact-eyebrow{
    display:block;

    color:#9a8057;

    font-size:10px;
    letter-spacing:.15em;

    margin-bottom:7px;
}


.mirka-contact-details h2,
.mirka-contact-form-wrap h2,
.mirka-contact-map-heading h2{
    margin:0 0 30px;

    font-size:34px;
    line-height:1.4;

    font-weight:400;
}


.mirka-contact-detail{
    padding:17px 0;

    border-top:
        1px solid rgba(60,58,49,.16);
}


.mirka-contact-detail > span{
    display:block;

    margin-bottom:7px;

    color:#8b806e;

    font-size:10px;
}


.mirka-contact-detail p,
.mirka-contact-detail a{
    display:block;

    margin:0 0 5px;

    color:#3f3c34;

    text-decoration:none;

    font-size:12px;
    line-height:1.9;
}


.mirka-contact-side-image{
    margin:35px 0 0;

    overflow:hidden;
}


.mirka-contact-side-image img{
    display:block;

    width:100%;
    height:400px;

    object-fit:cover;
}


/* FORM SIDE */

.mirka-contact-form-area{
    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(320px,1.08fr);

    gap:32px;

    align-items:start;
}


.mirka-contact-form-image{
    margin:0;
}


.mirka-contact-form-image img{
    display:block;

    width:100%;
    height:480px;

    object-fit:cover;
}


.mirka-contact-form-wrap{
    padding-top:6px;
}


.mirka-contact-form{
    display:flex;

    flex-direction:column;

    gap:14px;
}


.mirka-contact-form label{
    display:block;
}


.mirka-contact-form label > span{
    display:block;

    margin-bottom:6px;

    font-size:10px;

    color:#5e594f;
}


.mirka-contact-form input,
.mirka-contact-form textarea{
    width:100%;

    box-sizing:border-box;

    border:
        1px solid rgba(70,66,55,.38);

    border-radius:0;

    background:transparent;

    color:#28271f;

    outline:none;

    font-family:inherit;

    font-size:12px;
}


.mirka-contact-form input{
    height:43px;

    padding:0 12px;
}


.mirka-contact-form textarea{
    padding:11px 12px;

    resize:vertical;
}


.mirka-contact-form input:focus,
.mirka-contact-form textarea:focus{
    border-color:#3d462d;
}


.mirka-contact-form button{
    height:44px;

    border:0;

    background:#394229;

    color:#fff;

    font-family:inherit;

    font-size:11px;

    cursor:pointer;

    transition:.2s ease;
}


.mirka-contact-form button:hover{
    background:#2f3723;
}


.mirka-contact-form small{
    display:block;

    text-align:center;

    font-size:9px;

    color:#8a8478;
}


.mirka-form-message{
    margin-bottom:18px;

    padding:12px 14px;

    font-size:11px;

    line-height:1.8;
}


.mirka-form-message.is-success{
    border:1px solid rgba(56,92,55,.3);

    background:rgba(79,112,73,.08);
}


.mirka-form-message.is-error{
    border:1px solid rgba(137,69,55,.26);

    background:rgba(137,69,55,.06);
}


/* EDITORIAL */

.mirka-contact-editorial{
    display:grid;

    grid-template-columns:1.15fr .85fr;

    min-height:420px;

    margin:0 7% 75px;

    background:#e7dfcf;
}


.mirka-contact-editorial img{
    display:block;

    width:100%;
    height:420px;

    object-fit:cover;
}


.mirka-contact-editorial > div{
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:50px;
}


.mirka-contact-editorial span{
    color:#967c55;

    font-size:10px;

    letter-spacing:.23em;
}


.mirka-contact-editorial h2{
    margin:12px 0 12px;

    font-size:32px;

    font-weight:400;
}


.mirka-contact-editorial p{
    max-width:420px;

    margin:0;

    color:#645e54;

    font-size:11px;

    line-height:2;
}


/* MAP */

.mirka-contact-map-section{
    padding:70px 7% 85px;

    border-top:
        1px solid rgba(70,66,55,.13);
}


.mirka-contact-map-heading{
    margin-bottom:25px;
}


.mirka-contact-map-heading > span{
    color:#9a8057;

    font-size:10px;

    letter-spacing:.25em;
}


.mirka-contact-map-heading h2{
    margin-top:5px;

    margin-bottom:5px;
}


.mirka-contact-map-heading p{
    margin:0;

    color:#797267;

    font-size:11px;
}


.mirka-contact-map{
    width:100%;

    height:390px;

    background:#d9d3c5;

    overflow:hidden;

    filter:
        saturate(.75)
        sepia(.08)
        contrast(.95);
}


.mirka-contact-map iframe{
    display:block;

    width:100%;

    height:100%;
}


/* TABLET */

@media(max-width:1100px){

    .mirka-contact-page{
        width:calc(100% - 32px);
    }

    .mirka-contact-main{
        gap:40px;

        padding-inline:4%;
    }

    .mirka-contact-form-area{
        grid-template-columns:1fr;
    }

    .mirka-contact-form-image img{
        height:330px;
    }

    .mirka-contact-editorial,
    .mirka-contact-map-section{
        margin-left:4%;
        margin-right:4%;
    }

}


/* MOBILE */

@media(max-width:767px){

    .mirka-contact-page{
        width:100%;
    }

    .mirka-contact-hero{
        min-height:470px;
    }

    .mirka-contact-hero__overlay{
        background:
            linear-gradient(
                0deg,
                rgba(32,30,23,.62),
                rgba(32,30,23,.08)
            );
    }

    .mirka-contact-hero__copy{
        width:calc(100% - 36px);

        margin:0 18px;

        align-self:flex-end;

        padding-bottom:38px;
    }

    .mirka-contact-hero__copy h1{
        font-size:40px;
    }

    .mirka-contact-main{
        display:flex;

        flex-direction:column;

        gap:48px;

        padding:48px 18px;
    }

    .mirka-contact-details h2,
    .mirka-contact-form-wrap h2,
    .mirka-contact-map-heading h2{
        font-size:28px;
    }

    .mirka-contact-side-image img{
        height:330px;
    }

    .mirka-contact-form-area{
        display:flex;

        flex-direction:column;

        gap:30px;
    }

    .mirka-contact-form-image{
        width:100%;
    }

    .mirka-contact-form-image img{
        height:360px;
    }

    .mirka-contact-form-wrap{
        width:100%;
    }

    .mirka-contact-editorial{
        display:flex;

        flex-direction:column;

        margin:
            0
            18px
            50px;

        min-height:0;
    }

    .mirka-contact-editorial img{
        height:330px;
    }

    .mirka-contact-editorial > div{
        padding:35px 24px;
    }

    .mirka-contact-editorial h2{
        font-size:27px;
    }

    .mirka-contact-map-section{
        margin:0;

        padding:50px 18px;
    }

    .mirka-contact-map{
        height:320px;
    }

}

/* /MIRKA CONTACT PAGE V1 */