/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */

}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */


}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
    .rightContainer{
        width: 100%;
    }

    .leftContainer{
        display: none;
    }  
    
    .logo{
        width: 45%;
        height: auto;
    }

    .center-div
    {
        width: 60%;
        height: 58%;
        
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        
        margin: auto;
        background-color: rgb(29, 29, 29);
        border-radius: 20px;

        padding: 20px;
    }

    .logo{
        width: 69%;
        height: auto;
    }

    .form__group {
        position: relative;
        padding: 15px 0 0;
        margin-top: 10px;
    }
    
    .form__field {
        font-family: inherit;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #d2d2d2;
        outline: 0;
        font-size: 32px;
        color:#463557;
        padding: 32px 0;
        background: transparent;
        transition: border-color 0.2s;
    }
    
    .form__field::placeholder {
        color: transparent;
    }
    
    .form__field:placeholder-shown ~ .form__label {
        font-size: 32px;
        cursor: text;
        top: 40px;
    }
    
    label, .form__field:focus ~ .form__label {
        position: absolute;
        top: 0;
        display: block;
        transition: 0.2s;
        font-size: 32px;
        color: #9b9b9b;
    }
    
    .form__field:focus ~ .form__label {
        color: #463557;
    }
    
    .form__field:focus {
        padding-bottom: 24px;
        border-bottom: 2px solid #463557;
    }
    
    .button {
        font-size: 32px;
        padding: 30px;
        width: 210px;

      }
    
}


@media screen and (max-width: 800px) {

    .rightContainer{
        width: 100%;
    }

    .leftContainer{
        display: none;
    }  
    
    .logo{
        width: 45%;
        height: auto;
    }

    .center-div
    {
        width: 60%;
        height: 70%;
        
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        
        margin: auto;
        background-color: rgb(29, 29, 29);
        border-radius: 20px;

        padding: 20px;
    }
}

@media screen and (max-width: 500px) {

    .rightContainer{
        width: 100%;
    }

    .leftContainer{
        display: none;
    }  
    
    .logo{
        width: 45%;
        height: auto;
    }

    .center-div
    {
        width: 60%;
        height: 55%;
        
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        
        margin: auto;
        background-color: rgb(29, 29, 29);
        border-radius: 20px;

        padding: 20px;
    }
}