///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.events-meetings-container {
    height: 426px;
}

.events-meetings-wrapper {
    border: 1px solid $color-golden;
    background: white;
    height: 100%;
    overflow: hidden;
}

.events-meetings-left {
    width: 50%;
    height: 100%;
    display: inline-block;
    float: left;
    vertical-align: top;
    text-align: center;
    padding: 0 20px 0 20px;
}

.events-meetings-left-title {
    text-transform: uppercase;
    color: $color-golden;
    font-family: "lucien-light";
    font-size: 1.5vw;
    line-height: 1.2em;
    margin: 35px 0 40px 0;
}

.events-meetings-left-txt {
    font-size: 1.2vw;
}

.events-meetings-button {
    margin-top: 6vw;
    font-size: 1vw;
    &:hover {
        font-size: 1vw;
    }
}

.events-meetings-right {
    width: 50%;
    height: 100%;
    display: inline-block;
    float: right;
    margin-top: -1px;
    margin-right: -1px;
    position: relative;
    overflow: hidden;

    border-left: 1px solid $color-golden;

    picture {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        img {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            height: 100%;
        }
    }
}

///////////////////////////////////////////////////////////////
// Device: Desktop XL
///////////////////////////////////////////////////////////////
@include desktop-xl {
    .events-meetings-left-title {
        font-size: 1.5rem;
    }
    .events-meetings-left-txt {
        font-size: 1rem;
    }
    .events-meetings-button {
        margin-top: 80px;
        font-size: 1rem;
        &:hover {
            font-size: 1rem;
        }
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .events-meetings-left-title {
        font-size: 1.5rem;
    }
    .events-meetings-left-txt {
        font-size: 1rem;
    }
    .events-meetings-button {
        font-size: 1rem;
        &:hover {
            font-size: 1rem;
        }
    }
}

@include tablet-portrait-and-below {

}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .events-meetings-container {
        height: auto;
    }
    .events-meetings-wrapper {
        height: auto;    
    }
    .events-meetings-left {
        float: none;
        height: auto;
        width: 100%;
    }
    .events-meetings-right {
        float: none;
        height: auto;
        width: 100%;
    }
}

