/* @import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic); */
@import url(https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap);
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /* font-family:'Poppings',sans-serif; */
    font-family: 'Kanit', sans-serif;
}

section{
    position:relative;
    min-height:100vh;
    /* background-color:#fee648; */
    background-color:#ffffff;
    padding:20px;
    display:flex;
    justify-content:center;
    align-items:center;
}

section .container{
    position:relative;
    width:1000px;
    height:600px;
    background-color:#fff;
    /* box-shadow:0 15px 50px rgba(0,0,0,0.5); */
    overflow: hidden;
}

section .container .user{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;


}

section .container .user .imgBx{
    position:relative;
    width:50%;
    height:100%;
    background-color:#fff;
    transition:0.5s;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    -o-transition:0.5s;

}

section .container .user  .imgBx img{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:scale-down;
    
}

/* section .container .user  .imgBx img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
} */

section .container .user .formBx{
    display: flex;
    

    position:relative;
    width:50%;
    height:100%;
    background-color:#fff;
   display:flex;
   justify-content: center;
   align-items: center;
   padding:40px;
   transition:0.5s;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    -o-transition:0.5s;
}
section .container .user .formBx form{
    flex-direction: row;
}


section .container .user .formBx h2{
    font-size:18px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing: 2px;
    text-align:center;
    width:100%;
    margin-bottom:10px;
    color:#555;
}

section .container .user .formBx input{
    width:100%;
    font-weight:600;
    background-color:#f5f5f5;
    padding:10px;
    color:#333;
    border:none;
    font-size:14px;
    outline:none;
    margin:8px 0;
    letter-spacing: 2px;
}

section .container .user .formBx form input[type="submit"]{
    max-width:100%;
    background-color:#677eff;
    color:#fff;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    letter-spacing: 2px;

}

section .container.active .user .formBx form input[type="submit"]{
    /* background-color:#e73e49; */
    background-color:green;
}

section .container .user .formBx form .signup{
    position:relative;
    margin-top:20px;
    font-size:12px;
    letter-spacing: 2px;
    color:#555;
    text-transform: uppercase;

}

section .container .user .formBx form .signup a{
    font-weight:600;
    text-decoration: none;
    color:#677eff;

}

section .container .signupBx{
    pointer-events:none;
}

section .container.active .signupBx{
    pointer-events:initial;
}



section .container .signupBx .formBx{
    left:100%;
}
section .container.active .signupBx .formBx{
    left:0;
}
section .container .signupBx  .imgBx{
    left:-100%;
}
section .container.active .signupBx .imgBx{
    left:0;
}



section .container .signinBx .formBx{
    left:0;
}
section .container.active .signinBx .formBx{
    left:-100%;
}
section .container .signinBx  .imgBx{
    left:0;
}
section .container.active .signinBx .imgBx{
    left:100%;
}



@media(max-width:991px){
    section .container{
        max-width: 400px;
    }

    section .container .imgBx{
        display: none;
    }


    section .container .user .formBx {
        width: 100%;
    }
}


.flex-grid{
    display:flex;
    flex-direction: column;
}
.container{
    width:98%;
    max-width:120rem;
    margin:0 auto;

}


.flex-row{
    display:flex;
    flex-direction: row;
}