.random_left {
  position:fixed; top: 0; left: 0; width: 80%; height: 100%; background-color:#000; background-image:url('https://source.unsplash.com/random/?landscape'); background-size: cover; background-position:center;
}

.login_container {
  background-color:#fff; height: 100vh; position: fixed; top: 0; right: 0; width: 35%; padding-top: 20vh;
}

@media (max-width: 600px) {
  .random_left { width: 110vw; !important; position: relative; height: 150px !important; padding: 0; margin-left:-20px;}
  .login_container { width: 100% !important; position: relative; padding: 4%; background-color:rgba(0,0,0,0); }
}



body .button-01 {
    border-radius: 3px;
    background-color: var(--button-color1);
    min-width: 150px;
    color: #FFF;
    font-family: var(--family2);
    font-weight: 400;
    padding-bottom: 2px;
}
body .button-01, body .button-01:link, body .button-01:active, body .button-01:visited {
    color: #FFF;
    transition: color ease-in 300ms, background-color ease-in 300ms;
}
body .button-01:hover {
    background-color: var(--button-hover-color1);
    text-decoration: none !important;
}
body .btn-color1.button-01 {
    background-color: var(--button-color1);
}
body .btn-color1.button-01:hover {
    background-color: var(--button-hover-color1);
}
body .btn-color2.button-01 {
    background-color: var(--button-color2);
}
body .btn-color2.button-01:hover {
    background-color: var(--button-hover-color2);
}
body .btn-color3.button-01 {
    background-color: var(--button-color3);
}
body .btn-color3.button-01:hover {
    background-color: var(--button-hover-color3);
}
body .btn-color4.button-01 {
    background-color: var(--button-color4);
}
body .btn-color4.button-01, body .btn-color4.button-01:link, body .btn-color4.button-01:active, body .btn-color4.button-01:visited {
    color: #272727;
    transition: color ease-in 300ms, background-color ease-in 300ms;
}
body .btn-color4.button-01:hover {
    background-color: var(--button-hover-color4);
}
body .btn-color5.button-01 {
    background-color: var(--button-color5);
}
body .btn-color5.button-01, body .btn-color5.button-01:link, body .btn-color5.button-01:active, body .btn-color5.button-01:visited {
    color: var(--accent-color);
}
body .btn-color5.button-01:hover {
    background-color: var(--button-hover-color5);
}
body .btn-color6.button-01 {
    background-image: linear-gradient(to right, var(--accent-color), var(--accent-color2));
    transition: all ease-in 300ms;
}
body .btn-color6.button-01:hover {
    filter: brightness(120%);
}


.heading-box {
    background-color: var(--button-color1);
    padding: 12px 20px 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    color:#fff;
}

.heading-box h4 {color:#fff;}