.login,
.register,
.reset-password {
    padding: 0;
}

@media (max-width: 575px) {
    /* login start */
    .container-login {
        position: absolute;
        width: 100%;
        background-color: #EEEDE9;
        height: 80%;
    }
    .container-login .form-login {
        position: relative;
        width: 80%;
        margin: auto;
        height: auto;
        background: #fff;
        top: 20vw;
        border-radius: 20px;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
    }
    .container-login .form-login h3 {
        text-align: center;
        padding-top: 1.5vw;
        font-size: 6vw;
    }
    .container-login .form-login p {
        text-align: center;
        font-size: 3.5vw;
        margin: 3vw 0 0 0;
    }
    .container-login .form-login .email {
        margin-top: 2vw;
        font-size: 3.5vw;
        padding: 0 0 0 3vw;
    }
    .container-login .form-login .password {
        margin-top: 5vw;
        font-size: 3.5vw;
    }
    .container-login .form-login a {
        color: #10448F;
        font-weight: bold;
    }
    .container-login .form-login a:hover {
        text-decoration: none;
    }
    .container-login .form-login button {
        border: none;
        background-color: #10448F;
        border-radius: 8px;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        color: #FFFEFF;
        font-weight: 400;
        font-size: 5vw;
        cursor: pointer;
        width: 90%;
        height: 10vw;
        margin: 5vw 0 5vw 5%;
    }
    .container-login .form-login .forgot-password {
        display: block;
        text-align: center;
        font-size: 3.5vw;
        margin-top: 3vw;
    }
    .container-login .form-login .error-msg {
        color: red;
        text-align: center;
        width: 80%;
        margin: 3% 0 0 10%;
        padding-bottom: 5%;
        font-size: 3.5vw;
    }
    /* login end */
    /* reset password start */
    .container-reset-password {
        position: absolute;
        width: 100%;
        top: 20%;
        background-color: #EEEDE9;
        height: 80%;
    }
    .container-reset-password .form-reset-password {
        position: relative;
        width: 80%;
        margin: auto;
        height: auto;
        background: #fff;
        top: 35vw;
        border-radius: 20px;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
    }
    .container-reset-password .form-reset-password h3 {
        text-align: center;
        padding-top: 2vw;
        font-size: 6vw;
    }
    .container-reset-password .form-reset-password p {
        font-size: 3.5vw;
        text-align: center;
        margin-top: 3vw;
    }
    .container-reset-password .form-reset-password p a {
        color: #10448F;
        font-weight: bold;
    }
    .container-reset-password .form-reset-password p a:hover {
        text-decoration: none;
    }
    .container-reset-password .form-reset-password .email {
        margin-top: 0vw;
        font-size: 4vw;
        padding: 0 0 0 3vw;
        height: 8vw;
    }
    .container-reset-password .form-reset-password .reset-password-button {
        border: none;
        background-color: #10448F;
        border-radius: 8px;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        color: #FFFEFF;
        font-weight: 400;
        font-size: 5vw;
        cursor: pointer;
        width: 90%;
        height: 10vw;
        margin: 5vw 0 5vw 5%;
    }
    .container-reset-password .form-reset-password .error-msg {
        display: none;
        color: red;
        text-align: center;
        width: 80%;
        margin: 3% 0 0 10%;
        padding-bottom: 5%;
        font-size: 3vw;
    }
    /* reset password end*/
    /* register start */
    .container-register {
        position: relative;
        width: 100%;
        background-color: #EEEDE9;
        height: 200vw;
    }
    .container-register .register-form {
        position: relative;
        width: 80%;
        margin: auto;
        height: auto;
        background: #fff;
        top: 14vw;
        border-radius: 20px;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
    }
    .container-register .register-form h3 {
        text-align: center;
        font-size: 6vw;
        padding-top: 2vw;
    }
    .container-register .register-form p {
        text-align: center;
        font-size: 3.5vw;
        margin: 3vw 0 0 0;
    }
    .container-register .register-form p a {
        color: #10448F;
        font-weight: bold;
    }
    .container-register .register-form p a:hover {
        text-decoration: none;
    }
    .container-register .personal-code {
        margin-top: 2vw;
        font-size: 3.5vw;
        padding: 0 0 0 3vw;
    }
    .container-register .register-form .email {
        margin-top: 2vw;
        font-size: 3.5vw;
        padding: 0 0 0 3vw;
    }
    .container-register .register-form .password {
        margin-top: 2vw;
        font-size: 3.5vw;
        padding: 0 0 0 3vw;
    }
    .container-register .register-form .confirm-password {
        margin-top: 2vw;
        font-size: 3.5vw;
        padding: 0 0 0 3vw;
    }
    .container-register .register-form .register-button {
        border: none;
        background-color: #10448F;
        border-radius: 8px;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        color: #FFFEFF;
        font-weight: 400;
        font-size: 5vw;
        cursor: pointer;
        width: 90%;
        height: 10vw;
        margin: 5vw 0 5vw 5%;
    }
    .container-register .register-form .error-msg {
        display: none;
        color: red;
        text-align: center;
        width: 80%;
        margin: 3% 0 0 10%;
        padding-bottom: 5%;
        font-size: 3vw;
    }
    /* register end */
}

@media (min-width: 576px) and (max-width: 767px) {
    /* logo start */
    .logo {
        position: relative;
        height: 23vw;
    }
    .logo .britanica-logo {
        background-image: url('images/britanica-logo.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% auto;
        width: 30vw;
        height: 25vw;
        margin: auto;
        z-index: 20;
    }
    .logo .blackground-color-grey {
        position: relative;
        width: 100%;
        height: 6.5vw;
        background: #EEEDE9;
        top: -8.3vw;
        z-index: -1;
    }
    .logo .background-color-blue {
        background-color: #10448F;
        position: relative;
        width: 100%;
        height: 1.6vw;
        top: -16vw;
    }
    /* logo end */
    /* login start */
    .container-login {
        position: absolute;
        width: 100%;
        background-color: #EEEDE9;
        height: 80%;
    }
    .container-login .form-login {
        position: relative;
        width: 80%;
        margin: auto;
        height: auto;
        background: #fff;
        top: 15vw;
        border-radius: 20px;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
    }
    .container-login .form-login h3 {
        text-align: center;
        padding-top: 2vw;
        font-size: 5vw;
    }
    .container-login .form-login p {
        text-align: center;
        font-size: 3vw;
        margin: 3vw 0 0 0;
    }
    .container-login .form-login .email {
        margin-top: 2vw;
        font-size: 4vw;
        padding: 0 0 0 3vw;
        height: 8vw;
    }
    .container-login .form-login .password {
        margin-top: 3vw;
        font-size: 4vw;
        height: 8vw;
    }
    .container-login .form-login a {
        color: #10448F;
        font-weight: bold;
    }
    .container-login .form-login a:hover {
        text-decoration: none;
    }
    .container-login .form-login button {
        border: none;
        background-color: #10448F;
        border-radius: 8px;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        color: #FFFEFF;
        font-weight: 400;
        font-size: 4vw;
        cursor: pointer;
        width: 78%;
        height: 7vw;
        margin: 5vw 0 5vw 11%;
    }
    .container-login .form-login .forgot-password {
        display: block;
        text-align: center;
        font-size: 3vw;
        margin-top: 3vw;
    }
    .container-login .form-login .error-msg {
        display: none;
        color: red;
        text-align: center;
        width: 80%;
        margin: 3% 0 0 10%;
        padding-bottom: 5%;
        font-size: 3vw;
    }
    /* login end */
    /* reset password start */
    .container-reset-password {
        position: absolute;
        width: 100%;
        top: 23vw;
        background-color: #EEEDE9;
        height: 80%;
    }
    .container-reset-password .form-reset-password {
        position: relative;
        width: 80%;
        margin: auto;
        height: auto;
        background: #fff;
        top: 30vw;
        border-radius: 20px;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
    }
    .container-reset-password .form-reset-password h3 {
        text-align: center;
        font-size: 5vw;
        padding-top: 2vw;
    }
    .container-reset-password .form-reset-password p {
        font-size: 3.5vw;
        text-align: center;
        margin-top: 2vw;
    }
    .container-reset-password .form-reset-password p a {
        color: #10448F;
        font-weight: bold;
    }
    .container-reset-password .form-reset-password p a:hover {
        text-decoration: none;
    }
    .container-reset-password .form-reset-password .email {
        font-size: 4vw;
        padding: 0 0 0 3vw;
        height: 8vw;
    }
    .container-reset-password .form-reset-password .reset-password-button {
        border: none;
        background-color: #10448F;
        border-radius: 8px;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        color: #FFFEFF;
        font-weight: 400;
        font-size: 4vw;
        cursor: pointer;
        width: 78%;
        height: 7vw;
        margin: 5vw 0 5vw 11%;
    }
    .container-reset-password .form-reset-password .error-msg {
        display: none;
        color: red;
        text-align: center;
        width: 80%;
        margin: 3% 0 0 10%;
        padding-bottom: 5%;
        font-size: 3vw;
    }
    /* reset password end*/
    /* register start */
    .container-register {
        position: absolute;
        width: 100%;
        background-color: #EEEDE9;
        height: 80%;
    }
    .container-register .register-form {
        position: relative;
        width: 80%;
        margin: auto;
        height: auto;
        background: #fff;
        top: 10vw;
        border-radius: 20px;
        box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
    }
    .container-register .register-form h3 {
        text-align: center;
        font-size: 5vw;
        padding-top: 2vw;
    }
    .container-register .register-form p {
        text-align: center;
        font-size: 3vw;
        margin: 3vw 0 0 0;
    }
    .container-register .register-form p a {
        color: #10448F;
        font-weight: bold;
    }
    .container-register .register-form p a:hover {
        text-decoration: none;
    }
    .container-register .personal-code {
        margin-top: 2vw;
        font-size: 4vw;
        padding: 0 0 0 3vw;
        height: 8vw;
    }
    .container-register .register-form .email {
        margin-top: 2vw;
        font-size: 4vw;
        padding: 0 0 0 3vw;
        height: 8vw;
    }
    .container-register .register-form .password {
        margin-top: 2vw;
        font-size: 4vw;
        padding: 0 0 0 3vw;
        height: 8vw;
    }
    .container-register .register-form .confirm-password {
        margin-top: 2vw;
        font-size: 4vw;
        padding: 0 0 0 3vw;
        height: 8vw;
    }
    .container-register .register-form .register-button {
        border: none;
        background-color: #10448F;
        border-radius: 8px;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        color: #FFFEFF;
        font-weight: 400;
        font-size: 4vw;
        cursor: pointer;
        width: 78%;
        height: 7vw;
        margin: 5vw 0 5vw 11%;
    }
    .container-register .register-form .error-msg {
        display: none;
        color: red;
        text-align: center;
        width: 80%;
        margin: 3% 0 0 10%;
        padding-bottom: 5%;
        font-size: 3vw;
    }
    /* register end */
}