// Reboot
@import "_reboot.scss";

// Typography
@import "_fonts.scss";
@import "_typography.scss";

// Components
@import "../components/_components.scss";

// Helper
@import "_colors.scss";
@import "_helper.scss";

// Styles
body {
    margin: 0;
    padding: 0
}
.col-left {
    opacity: 0;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    height: 100vh;
    overflow: hidden;
    -webkit-transition: 0.3s;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    z-index: 0;
}

.col-left.instate {
    -webkit-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    opacity: 1;
}

.col-left.has-bg-color {
    background: #673FB4;
}

 .col-inner {
    // width: 66.66666667%;
    // margin-left: 16.66666667%;
}

.col-left .col-block {
    position: relative;
}

.col-right {
    background: #f00;
    position: fixed;
    top: 0;
    left: 50%;
    width: 60%;
    height: 100%;
    z-index: 1 !important;
    -webkit-transition: 0.3s;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    //visibility: hidden;
}

.background-img-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -2;
    top: 0;
    left: 0;
}

@media (max-width: 991px) {
    .col-left {
        width: auto;
    }

    .col-right {
        position: relative;
        left: 0;
        width: 100%;
        height: 500px;
    }
}