/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html{line-height:1.15;-webkit-text-size-adjust:100%;box-sizing: border-box}
*,*::before,*::after{box-sizing: inherit}
body{margin:0}
main{display:block}
a{background-color:transparent}
img{border-style:none}

/* Variables
--------------------------------------------- */
:root {
    --darkgrey: #3b3b3b;
    --middlegrey: #858585;
    --lightgrey: #dadada;
    --red: #e30513;
    --green: #006937;
    --unit: 50px;
    --transFast: 150ms var(--ease-in-out-expo);
    --transMedium: 300ms var(--ease-in-out-expo);
    --transSlow: 600ms var(--ease-in-out-expo);
    
    /* EASING */
    --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
    --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
    --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
    --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
    --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
    --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

    --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
    --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
    --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
    --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
    --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
    --ease-out-circ: cubic-bezier(.075, .82, .165, 1);

    --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
    --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
    --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
    --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}
body{background-color:#fff;overflow: hidden;}

.row {
    display: flex;
}
.row .col {
    position: relative;
    background-color: var(--darkgrey);
    width: 50%;
    height: 110vh;
    overflow: hidden;
}
.col .logo {
    position: absolute;
    background-color: #fff;
    width: auto;
    height: 33%;
    z-index: 5;
    padding: 10px;
    margin-bottom: 10vh;
}
.col:first-child .logo {
    right:0;
    top:10%
}
.col:last-child .logo {
    left:0;
    top:calc(33% + 10%);
}
.col a {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
}
.col .bg {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: 800ms var(--ease-in-out-quad);
    will-change: scale, filter;
    display: flex;
    flex-direction: column;
    filter: grayscale(1) brightness(2);
}
.col:hover {
    z-index: 10;
}
.col:hover .bg {
    scale: 1.05;
    filter: grayscale(0);
}
@media screen and (max-width:1024px) {
    .col .logo {
        height: 25%;
    }
}
@media screen and (max-width:1024px) {
    .col .logo {
        height: 50%;
        position: relative;
        top: auto!important;
        bottom: auto!important;
    }
    .row {
        flex-direction: column;
    }
    .row .col {
        width: 100%;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}