/***
* MEDIC EXPAT - SITE - MAINTENANCE PAGE CSS
* 
* 
***/


/* ----- BO NAV LATERAL - CONFIG AUTO DISPLAY SELECTED ELEM ----- */
#nav-site-vef-p1 { transform: scale(1.05); background-color: rgb(65, 170, 239); }

/* ----- SITE NAV - CONFIG AUTO DISPLAY ----- */
#site-header-2 { display: block; }



/* --- CUSTOM FORM CONTENT --- */
.form-submit-inputs {
    border-radius: 3px;
}







/* ----- PAGE CONTAINER CSS ----- */
#page-cont {
    width: 100%;
}



/* ----- FORM CUSTOM STYLE CSS ----- */
.form-sections {
    position: relative;
    width: 90%;
    margin-left: 0%;
}
.form-lines {
    margin-bottom: 30px !important;
}
.form-txt-inputs, .form-pass-inputs {
    box-shadow: inset 1px 1px 4px #bebebe;
    border: none !important;
    height: 30px !important;
}
#login-pass-line { 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#login-pass {
    width:86% !important;
}
.form-show-inputs {
    margin-top: 0px !important;
    width: 6% !important;
    padding-left: 2% !important;
}
.form-show-inputs p { font-size: calc(1.2em* var(--lateral-preview-reduc-ratio, 1)) !important; }

.form-errors-cont { width: 86.5% !important; margin-left: 0% !important; }
.form-errors-cont p { margin-bottom: 8px !important; }


#login-pass-forget-line {
    margin-top: 30px;
    margin-bottom: 0px;
}
#login-pass-forget {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.05em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #ffffff;
    
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    margin-top: 0px;
    margin-bottom: 0px;
}

.form-user-res-img {
    width: 20%;
    min-height: 150px;
    background-image: url(../../../../images/generals_images/icons/valid_circle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.form-user-res-msg {
    width: 70% !important;
    padding-left: 0% !important;
    padding-right: 5% !important;
}





/* ----- SECTION 1 CSS ----- */
#section-1 {
    position: relative;

    width: 100%;
    height: calc(100vh * var(--lateral-preview-reduc-ratio, 1) - var(--header-nav-2-nav-primary-height));
    padding-top: var(--header-nav-2-nav-primary-height);
    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: center;
    
    background: linear-gradient(135deg, rgb(250, 250, 250) 0%, rgb(245, 245, 245) 100%)
    /*overflow: hidden;*/
}

.s1-lines {
    margin-bottom: 40px;
}

.s1-blocs {
    position: relative;
    height: calc(100vh * var(--lateral-preview-reduc-ratio, 1) - var(--header-nav-2-nav-primary-height));
}
.s1-blocs h2, .s1-blocs h1 {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(2em * var(--lateral-preview-reduc-ratio, 1));
    letter-spacing: 1px;
    font-weight: normal;
    color: #ffffff;
    text-align: left;
    
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    margin-top: 0px;
    padding-top: 100px;
    margin-bottom: 30px;

    /*transition: transform 300ms ease-in-out;*/
}

.s1-blocs h3 {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.5em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #ffffff;
    text-align: left;
    
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 20px;

    /*transition: transform 300ms ease-in-out;*/
}

.s1-blocs p {
    text-decoration: none;

    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.1em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #050505;
    text-align: left;

    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    margin-top: calc(0px * var(--lateral-preview-reduc-ratio, 1));
    margin-bottom: calc(0px * var(--lateral-preview-reduc-ratio, 1));
}

#s1-bloc-login {
    width: 48%;
    margin-left:-8%;
    padding-left: 10%;
    padding-right: 2%;
    /*background: linear-gradient(135deg, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 100%);*/
    /*background: linear-gradient(135deg, rgb(70,70,70) 0%, rgb(35,35,35) 100%);*/

    background-size: 300% 300%;
    background-image: linear-gradient(135deg, rgba(45,61,119,1) 10%, rgba(62,144,198,1) 90%);
    background-position: 50% 50%;
    -webkit-animation: anim_background_transla 20s ease-in-out infinite;
    animation: anim_background_transla 20s ease infinite;

    box-shadow: 3px 0px 5px #4e4e4e;
    transform: skewX(-12deg);
}
#s1-bloc-login-cnt-cont { transform: skewX(12deg); }

#s1-bloc-signup {
    width: 32%;
    padding-left: 10%;
    padding-right: 2%;
}
#s1-bloc-signup h2, #s1-bloc-signup p { color: #242424; }

#s1-bloc-signup-inp {
    text-decoration: none;
    position: relative;
    margin: 0 auto;
    margin-top: calc(50px* var(--lateral-preview-reduc-ratio, 1));
    background: var(--me-color-1);
    border:none;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.25em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;

    transition: transform 0.3s ease-in-out;
}
#s1-bloc-signup-inp:hover { transform: scale(1.05em); }







/* ---------- MEDIA QUERIES SYSTEM ------------------------------------------------------------*/
/* --- > 1200 ----------------------------------------- */
@media screen and (width > 1200px) {

}

/* --- 1200 - 1025 ----------------------------------------- */
@media screen and (width <= 1200px) and (width > 1024px) {
    #s1-bloc-login { margin-left: -9%; }
    

}

/* --- 1024 - 769 ------------------------------------------ */
@media screen and (width <= 1024px) and (width > 768px) {

    #s1-bloc-login { margin-left: -10%; }
      
    .s1-blocs h2 { font-size: calc(1.7em* var(--lateral-preview-reduc-ratio, 1)); }

    .form-lines { margin-bottom: 25px !important; }
    .form-txt-inputs, .form-pass-inputs {
        height: 25px !important;
    }
    .form-submit-inputs {
        font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 5px;
    }


    .s1-blocs p { font-size: calc(1.05em* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-bloc-signup-inp {
        font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 25px;
    }

}

/* --- 768 - 481 ------------------------------------------- */
@media screen and (width <= 768px) and (width > 480px) {

    .site-notif-msg-cont {
        position: absolute;
        max-width: 90%;
        padding-left: 5%;
        padding-right: 5%;
        top: -675px;
    }
    .site-notif-msg p { font-size: calc(1.2em * var(--lateral-preview-reduc-ratio, 1)); }
    
    #section-1 {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: var(--header-nav-2-nav-primary-height);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .s1-blocs { height: auto;}

    #s1-bloc-login {
        width: 92%;
        margin-left: 0%;
        padding-left: 4%;
        padding-right: 4%;
        transform: skewX(0deg);
        padding-bottom: 20px;
    }
    #s1-bloc-login-cnt-cont { transform: skewX(0deg); }
      
    .s1-blocs h2 { 
        font-size: calc(1.7em* var(--lateral-preview-reduc-ratio, 1)); 
        text-align: center;
    }

    .form-sections { margin-left: 5%; }
    .form-lines { 
        display: flex; 
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center; 
        align-items: center;

        margin-bottom: 25px !important; 
    }
    .form-txt-inputs, .form-pass-inputs {
        height: 25px !important;
    }
    .form-submit-inputs {
        font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 5px;
    }


    .s1-blocs p { font-size: calc(1.05em* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-bloc-signup-inp {
        font-size: calc(1.3em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 40px;
    }

    #login-pass-forget { text-align: center; }

    .signup-api-cont { width: 100%; }




    #s1-bloc-signup {
        width: 76%;
        padding-left: 12%;
        padding-right: 12%;
        padding-bottom: 100px;
    }

    .signup-inp-cont {
        position: relative;
        width: 100%;
        
        display: flex; 
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center; 
        align-items: center;
    }




}

/* --- 480 - 321 ------------------------------------------- */
@media screen and (width <= 480px) and (width > 320px) {

    .site-notif-msg-cont {
        position: absolute;
        max-width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }
    .site-notif-msg p { font-size: calc(1.2em * var(--lateral-preview-reduc-ratio, 1)); }
    
    #section-1 {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: var(--header-nav-2-nav-primary-height);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .s1-blocs { height: auto;}

    #s1-bloc-login {
        width: 92%;
        margin-left: 0%;
        padding-left: 4%;
        padding-right: 4%;
        transform: skewX(0deg);
        padding-bottom: 20px;
    }
    #s1-bloc-login-cnt-cont { transform: skewX(0deg); }
      
    .s1-blocs h2 { 
        font-size: calc(1.7em* var(--lateral-preview-reduc-ratio, 1)); 
        text-align: center;
    }

    .form-sections { margin-left: 5%; }
    .form-lines { 
        display: flex; 
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center; 
        align-items: center;

        margin-bottom: 25px !important; 
    }
    .form-txt-inputs, .form-pass-inputs {
        height: 25px !important;
    }
    .form-submit-inputs {
        font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 5px;
    }


    .s1-blocs p { font-size: calc(1.05em* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-bloc-signup-inp {
        font-size: calc(1.3em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 40px;
    }

    #login-pass-forget { text-align: center; }

    .signup-api-cont { width: 100%; }




    #s1-bloc-signup {
        width: 76%;
        padding-left: 12%;
        padding-right: 12%;
        padding-bottom: 100px;
    }

    .signup-inp-cont {
        position: relative;
        width: 100%;
        
        display: flex; 
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center; 
        align-items: center;
    }

}

/* --- 320  ------------------------------------------------ */
@media screen and (width <= 320px) {

    .site-notif-msg-cont {
        position: absolute;
        max-width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }
    .site-notif-msg p { font-size: calc(1.2em * var(--lateral-preview-reduc-ratio, 1)); }
    
    #section-1 {
        position: relative;
        width: 100vw;
        height: auto;
        padding-top: var(--header-nav-2-nav-primary-height);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .s1-blocs { height: auto;}

    #s1-bloc-login {
        width: 92%;
        margin-left: 0%;
        padding-left: 4%;
        padding-right: 4%;
        transform: skewX(0deg);
        padding-bottom: 20px;
    }
    #s1-bloc-login-cnt-cont { transform: skewX(0deg); }
      
    .s1-blocs h2 { 
        font-size: calc(1.7em* var(--lateral-preview-reduc-ratio, 1)); 
        text-align: center;
    }

    .form-sections { margin-left: 5%; }
    .form-lines { 
        display: flex; 
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center; 
        align-items: center;

        margin-bottom: 25px !important; 
    }
    .form-txt-inputs, .form-pass-inputs {
        height: 25px !important;
    }
    .form-submit-inputs {
        font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 5px;
    }


    .s1-blocs p { font-size: calc(1.05em* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-bloc-signup-inp {
        font-size: calc(1.3em* var(--lateral-preview-reduc-ratio, 1));
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 40px;
    }

    #login-pass-forget { text-align: center; }

    .signup-api-cont { width: 100%; }




    #s1-bloc-signup {
        width: 76%;
        padding-left: 12%;
        padding-right: 12%;
        padding-bottom: 100px;
    }

    .signup-inp-cont {
        position: relative;
        width: 100%;
        
        display: flex; 
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center; 
        align-items: center;
    }

}