body{
    width: 100%;
 }
 
.logincontainer{
    display: flex;
    flex-direction: row;
}


.login{
    background: var(--login-white);
    width: 50%;
}

.loginimage{
    background: var(--login-pink);
    width: 50%;
}

.loginimage .logbrand{
    font-weight: 700;
    font-size: 90px;
    text-align: center;
    color: var(--log-white);
}

.logbrand > span{
    color: var(--text-black);
}

.logimg{
    width: 390px;
    height: 520px;
    align-self: flex-end;
    margin: 0 0 12px 293px;
}

.toggler{
    margin: 30px 0 0 600px;
}

.logbg{
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 300px;
    margin: -40px 0 0 -350px;
    color: var(--logbg);
}

.logh1{
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 70px;
    color: var(--text-black);
    margin: -220px 0 0 130px;
}

.lbl{
    font-weight: 700;
    font-size: 20px;
    color: var(--footer-text);
}

.logform .email, .logform .password{
    justify-content: center;
    margin-top: 40px;
}

.email input, .password input{
    width: 350px;
}

.email{
    margin-right: 50px;
}

.password{
    margin-top: 30px;
}

.fgtpswd{
    margin: 20px 0 0 290px;
}

.loginbtn{
    width: 350px;
    margin-top: 10px;
    background: #FF4D47;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
}

.loginbtn:hover{
    background: #FF4D47;
    color: #ffffff;
}

.loggbtn{
    width: 350px;
    /* margin-top: 10px; */
    background: transparent;
    font-weight: 700;
    font-size: 18px;
    color: var(--text-black);
    border: 1px solid var(--text-black);
}

.logincontainer p{
    font-weight: 700;
    font-size: 18px;
    color: var(--footer-text);
    margin: 60px 0 0 120px;
}

.signups a{
    color: #FF4D47;
}

.signups a:hover{
    color: var(--footer-text);
}



@media screen and (max-width:769px) {
    body{
        width: 100%;
    }

    .logincontainer{
        width: 765px;
        flex-flow: column wrap;
        justify-content: center;
    }

    .loginimage{
        display: none;
    }

    .login{
        width: 768px;
        overflow: hidden;
    }

    .toggler{
        margin: 20px 0 0 700px;
    }

    .logbg{
        width: 768px;
        margin-top: -50px;
    }

    .logh1{
        margin: -250px 0 0 200px;
    }

   .email{
        margin: 30px 0 0 200px;
    }

    .password{
        margin: 10px 0 0 200px;
    }

    .fgtpswd {
        margin: 15px 0 0 390px;
    }
    
    .mb-lg-3, .col-12 {
        margin-left: 200px;
    }

    .logincontainer p{
        margin: 35px 0 0 220px;
    }
}


@media screen and (max-width:426px){
    body{
        width: 100%;
        overflow: hidden;
    }

    .logincontainer{
        width: 425px;
        overflow: hidden;
        justify-content: center;
    }

    .login{
        width: 425px;
    }
    
    .toggler{
        display: none;
        margin: 50px 0 0 360px;
    }

    .logbg{ 
        width: 425px;
        font-size: 250px;
        margin: -30px 0 0 -300px;
    }
 
    .logh1{
        margin: -190px 0 -30px 80px;
    }

    .logform{
        width: 425px;
        overflow: hidden;
    }

    .email{
        margin: 0 0 -30px 80px;
    }

    .password{
        margin-left: 80px;
    }

    .email input, .password input{
        width: 270px;
    }

    .fgtpswd {
        margin: 10px 0 0 190px;
    }
 
    .mb-lg-3, .col-12 {
        margin-left: 80px;
    }

    .loginbtn{
        width: 270px;
    }
 
    .loggbtn{
        width: 270px;
    }

    .logincontainer p{
        margin: 35px 0 0 80px;
    }      
}

@media screen and (max-width:376px){
    body{
        width: 100%;
        overflow: hidden;
    }

    .logincontainer{
        width: 375px;
        justify-content: center;
        overflow: hidden;
    }

    .login{
        width: 375px;
        overflow: hidden;
    }

    .toggler{
        display: none;
    }

    .logbg{
        width: 375px;
        font-size: 220px;
        margin-right: 0;
    }

    .logh1{
        margin-left: 55px;
        margin-right: 0;
    }

    .logform{
        width: 375px;
    }

    .email, .password, .mb-lg-3, .col-12{
        margin-left: 55px;
        margin-right: 0;
    }

    .email input, .password input, .loginbtn, .loggbtn{
        width: 250px;
    }

    .fgtpswd{
        margin-left: 130px;
        margin-right: 0;
    }

    .logincontainer p{
        margin-left: 60px;
        margin-right: 0;
        font-size: 17px;
    }
    
}




@media screen and (max-width:321px){
    .logincontainer{
        width: 320px;
    }

    .login{
        width: 320px;
    }

    .logh1{
        margin-left: 30px;
      }
    .email, .password, .mb-lg-3, .col-12{
        margin-left: 30px;
    }

    .fgtpswd{
        margin-left: 110px;
    }

    .logincontainer p{
        margin-left: 30px;
    }
}