*
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }

    /* Layout */
    .grid {
        position: relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .grid .column {
        position: relative;
        overflow: hidden;
        width: 60%;
        height: 100%;
        text-align: center;
        cursor: pointer;
    }

    .grid .column img {
        position: relative;
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
        opacity: 0.8;
    }

    .grid .column .content {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 2em;
        color: #fff !important;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1.3rem !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .grid .column .content::before,
    .grid .column .content::after {
        pointer-events: none;
    }

    .grid .column h2 {
        word-spacing: -0.15rem;
        font-weight: 300;
    }

    .grid .column h2 span {
        display: block;
        font-weight: 800;
        font-size: 2.8rem;
    }

    .grid .column h2,
    .grid .column p {
        margin: 0;
    }

    .grid .column p {
        letter-spacing: 1px;
        font-size: 68.5%;
    }

    a {
        text-transform: uppercase;
        font-size: .6rem;
        text-decoration: none;
        color: #FFF;
        display: block;
        font-family: sans-serif;
    }

    #west {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        
    }

    #east {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        clip-path: polygon(33% 0%, 100% 0%, 100% 100%, 0% 100%);
        position: absolute;
        right: 0%
    }

    /*-----------------*/
    /*****   Logo  *****/
    /*-----------------*/

    .logo {
        height: 65px !important;
        width: auto !important;
    }

    /*-----------------*/
    /***** Hover *****/
    /*-----------------*/
    .effect-hover img,
    .effect-hover h2,
    .effect-hover h3,
    .effect-hover p,
    .effect-hover i {
        -webkit-transition: opacity 0.35s,
            -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    .effect-hover .content::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 250px;
        height: 250px;
        border: 3px solid #fff;
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        /* remove this bit if you want it to swing up */
        -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1);
        transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1);
    }

    .effect-hover p:hover,
    .effect-hover p:focus {
        opacity: 0.6;
    }

    /* Keeps things consistent */




    .effect-hover:hover .content::before {
        opacity: 1;
        -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
        transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);
    }

    .effect-hover:hover img {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }

    .effect-hover:hover h3,
    .effect-hover:hover p {
        opacity: 1;
    }

    .effect-hover:hover i {
        -webkit-transform: scale3d(2.5, 2.5, 2);
        transform: scale3d(2.5, 2.5, 2);
    }

    h3#sede-text {
        color: #fff !important;
        font-weight: 700;
        font-family: "Montserrat", Sans-serif;
    }

    @media (max-width: 768px) {

        .grid {
            flex-direction: column !important;
        }

        .column {
            width: 100% !important;
        }

        .grid .column {
            width: 100% !important;
            height: 60% !important;
        }

        #west {
            background-size: cover;
        }
    
        #east {
            clip-path: polygon(0 0, 100% 33%, 100% 100%, 0% 100%);
            top: 40%
        }
    
    }