:root{
    --black: #000000;
    --gray: #F3F3F3;
    --gray-bold: #BFBFBF;
    --red: #BA031E;
    --blue-regular: #3159E9;
    --blue: #263779;
}

/*CLASS GENERAL BACKGROUND*/
.bg-black{ background-color: var(--black);}
.bg-gray{ background-color: var(--gray);}
.bg-red{ background-color: var(--red);}
.bg-blue{ background-color: var(--blue);}
.bg-blue-regular{ background-color: var(--blue-regular);}

/*CLASS GENERAL COLOR*/
.c-black{ color: var(--black);}
.c-gray{ color: var(--gray);}
.c-red{ color: var(--red);}
.c-blue{ color: var(--blue);}

/*CLASS GENERAL FONT WEIGHT*/
.w-light{ font-weight: 300;}
.w-regular{ font-weight: 400;}
.w-medium{ font-weight: 500;}
.w-semibold{ font-weight: 600;}
.w-bold{ font-weight: 700;}

/*STYLES GENERAL*/
body{
    color: var(--black);
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;}
    input:focus,
    .form-control:focus,
    button:focus{
        outline: none !important;
        box-shadow: none !important;}
    .action-button{
        border-radius: 1.125rem; /*18*/
        padding: 0.313rem 2.188rem; /*5 35*/}
        .action-button.menu,
        .action-button.curriculum,
        .action-button.class-sample,
        .action-button.inscription{
            font-size: 1rem; /*16*/
            line-height: 1.125rem; /*18*/}
            .action-button.curriculum,
            .action-button.class-sample{
                font-size: 0.938rem; /*15*/}

    .message.with-errors{
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--red);}
    input.field-error-active,
    input.field-error-active{
        border-color: #af2c2c;}
    .message.field-error{
        color: #af2c2c;
        display: none;
        font: 0.75rem/1rem "Proxima Nova",arial,sans-serif;
        margin-top: 0.25rem;
        opacity: 0;
        text-align: left;}
        .message.field-error-active{
            animation: showErrorMessage .3s linear;
            display: block;
            opacity: 1;}

    @keyframes showErrorMessage{
        0%{opacity:0}
        100%{opacity:1}
    }

/*STYLES GENERAL SECTION*/
.section-login .row,
.section-about .row,
.section-maps .row{
    flex-direction: column-reverse;}

.form-inscription.login{
    width: 100%;}    
.form-inscription.slider{
    border-radius: 1rem 1rem 0 0;}
.form-inscription.inscription{
    border-radius: 1rem; /*16*/}        
.form-inscription .form-control{
    font-size: 1rem; /*16*/
    line-height: 1.125rem; /*18*/
    font-weight: 600;
    color: var(--gray-bold);}
    .form-inscription .form-control::placeholder{
        color: var(--gray-bold);}

/*HEADER*/
body.login .site-header{
    position: unset !important;}
.site-header{
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    opacity: 0.8;}
    .navbar-brand img{
        max-width: 50%;}
    .navbar-light .navbar-toggler{
        box-shadow: none;}
    .navbar-expand-lg .navbar-nav .nav-link{
        font-size: 1rem; /*16*/
        line-height: 1.125rem; /*18*/
        padding: 0.625rem 0;}
    .navbar-expand-lg .navbar-nav .action-button{
        margin: 0.625rem 0;}


/*STYLES FOOTER*/
footer {
    padding: 2.594rem 0; /*41.5*/}
    .title-items{
        font-size: 1.125rem; /*18*/
        line-height: 1.25rem; /*20*/}
    .list-items li a,
    .list-items li a:hover{
        font-size: 1rem; /*16*/
        line-height: 1.125rem; /*18*/
        color: var(--black);}

/* XX-Large devices (larger desktops, 1400px and up) */
/* XXL */
@media (min-width: 1400px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.slider{
        width: 40%;}

}

/* X-Large devices (large desktops, less than 1400px) */
/* XL */
@media (max-width: 1399.98px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.slider{
        width: 47%;}

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    /*STYLES GENERAL*/
    .action-button{
        border-radius: 1.625rem; /*26*/}
        .action-button.menu,
        .action-button.curriculum,
        .action-button.class-sample,
        .action-button.inscription{
            font-size: 1.125rem; /*18*/
            line-height: 1.25rem; /*20*/}
            .action-button.class-sample{
                padding-top: 0.625rem !important; /*10*/
                padding-bottom: 0.625rem !important; /*10*/}

    /*STYLES GENERAL SECTION*/
    .form-inscription.login{
        padding: 4.188rem; /*67*/
        border-radius: 2.688rem; /*43*/}    
    .form-inscription.slider{
        padding: 1.625rem 2.25rem; /*26 36*/}                
    .form-inscription.inscription{
        width: 70%;
        border-radius: 2.688rem; /*43*/
        padding: 3.75rem 9.563rem 3.438rem; /*60 153 55*/}
        .form-inscription .form-control{
            font-size: 1.125rem; /*18*/
            line-height: 1.25rem; /*20*/}
        .form-inscription.login .form-control{
            padding: 0.625rem 1.125rem; /*10 18*/
            border-radius: 1.125rem; /*18*/}  

    /*HEADER*/
    .navbar-brand img{
        max-width: 80%;}
    .navbar-expand-lg .navbar-nav .nav-link{ 
        font-size: 1.125rem; /*18*/
        line-height: 1.25rem; /*20*/
        padding-left: 0.75rem; /*12*/
        padding-right: 0.75rem;}

    /*STYLES FOOTER*/
    footer {
        padding: 5.188rem 0; /*83*/}
        .title-items{
            font-size: 1.25rem; /*20*/
            line-height: 1.375rem; /*22*/}
        .list-items li a,
        .list-items li a:hover{
            font-size: 1.125rem; /*18*/
            line-height: 1.25rem; /*20*/
            color: var(--black);}


}        

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.login{
        padding: 2.094rem; /*33.5*/
        border-radius: 1.344rem; /*21.5*/}
    .form-inscription.slider{
        width: 47%;
        padding: 1rem; /*16*/}
    .form-inscription.inscription{
        width: 85%;
        padding: 1.875rem 4.781rem 1.719rem; /*30 76.5 27.5*/}

}        

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

    /*HEADER*/
    .navbar-expand-lg .navbar-nav{
        align-items: center;}
        .navbar-expand-lg .navbar-nav .nav-link{
            padding-left: 0.625rem; /*10*/
            padding-right: 0.625rem;}

}        

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.slider{
        width: 52%;}
    .form-inscription.inscription{
        width: 100%;}

}        

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    /*STYLES GENERAL SECTION*/
    .section-login .row,
    .section-about .row,
    .section-maps .row{
        flex-direction: row;}

}        

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.slider{
        width: 68%;}

}        

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.inscription{
        padding: 1rem; /*16*/}

}

@media (max-width: 420px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.login{
        padding: 1rem; /*16*/
        border-radius: 0.656rem; /*10.5*/}
    .form-inscription.slider{
        width: 95%;}        

}        

@media (max-width: 393px) { 

    /*STYLES GENERAL SECTION*/
    .form-inscription.slider{
        width: 93%;}

}