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


/* --- CSS PAGE ROOT --- */
:root {
    --nb-slides : 2;
}



/* ----- 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; }





/* ----- PAGE CONTAINER CSS ----- */
html, body {
    overflow-x: hidden;
    /*overflow-y: unset;*/
}

#page-cont {
    position:relative;
    min-width: calc(var(--nb-slides) * 100vw);
    overflow-x: hidden;
    /*overflow-y: unset;*/

    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start; 
    align-items: flex-start;

    transform: translate(0vw);
    transition: transform 1000ms ease-in-out;
}





/* ----- FORM CUSTOM STYLE CSS ----- */
.form-container {
    padding-bottom: 0px;
}
.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;
}
select {
    border:none !important;
}
.form-select-inputs {
    width: 98.5%;
    padding-left: 1.5%;
    border-bottom: 1px solid rgba(45, 61, 119, 0.4) !important;
}

.form-lines-flex {
    max-width: 100% !important;
    margin-bottom: 15px;
}


/* --- FORM SIGNUP CUSTOM CONTENT --- */
#site-signup-form {
    width:40%;
    margin-left:30%;
}

#site-signup-form .form-lines {
    margin-bottom: 15px !important;
}
#site-signup-form-submit-line {
    position: relative;
    width: 100%;
    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: center;
}

#site-signup-form .form-submit-inputs {
    border-radius: 3px;
}

#site-signup-form .form-txt-inputs, #site-signup-form .form-pass-inputs {
    box-shadow: inset 1px 1px 4px #bebebe;
    border: none !important;
    height: 25px !important;
}

#site-signup-form .form-txt-inputs, #site-signup-form .form-pass-inputs {
    all: unset;
    border-bottom: 1px solid rgba(45, 61, 119, 0.4) !important;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: left;
    font-size: 1em;
    color: #101010;
    background-color: rgba(255, 255, 255, 1);
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 0%;
    margin-right: 0%;
    height: 20px;
    margin-top: 0px;
}

#site-signup-form .form-errors-cont { 
    width: 98% !important; 
    margin-left: 0% !important; 
}
#site-signup-form .form-errors-cont p { 
    width: 98% !important; 
    margin-left: 0% !important; 
}

#site-signup-form-user-res-section {
    width: 200%;
}

#site-signup-form-user-res-section h3 {
    text-align: left;
    margin-bottom: 25px;
}

#site-signup-form-user-res-section p {
    width: 100%;
    margin-left: 0% !important;
}






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

    width: 100vw;
    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 {
    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.3em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #101010;
    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.2em * 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: 34%;
    padding-left: 9%;
    padding-right: 0%;
}
#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.05); }




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

    width: 100vw;
    min-height: calc(95vh * var(--lateral-preview-reduc-ratio, 1) - var(--header-nav-2-nav-primary-height));
    padding-top: calc(var(--header-nav-2-nav-primary-height) + 10px);
    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;*/
}


.s2-signup-previous-arrow-cont {
    position: absolute;
    left: 3%;
    top: 20px;
    opacity: 0.6;

    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start; 
    align-items: center;
    gap:10px;

    cursor: pointer;
}
.s2-signup-previous-arrow-cont:hover { opacity: 1; }
.s2-signup-previous-arrow {
    width:25px;
    height:25px;
    background-image: url('../../../../images/generals_images/icons/left-arrow.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.s2-signup-previous-arrow-cont p {
    text-decoration: none;

    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(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));
}


.s2-signup-interface-cont {
    position: relative;
    width: 100%;
    height:100%;

}
.s2-signup-interface-cont h2, .s2-signup-interface-cont h1 {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(2em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: var(--me-color-1);
    text-align: center;
    
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

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

    /*transition: transform 300ms ease-in-out;*/
}
.s2-signup-interface-cont h3 {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.4em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #101010;
    text-align: center;
    
    -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: 0px;

    /*transition: transform 300ms ease-in-out;*/
}
.s2-signup-interface-cont p {
    text-decoration: none;

    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #606060;
    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));
}

.s2-signup-slides-cont {
    position: relative;
    width: 200%;
    height:100%;

    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start; 
    align-items: flex-start;
    /*gap:10px;*/
} 

.s2-slides {
    position: relative;
    min-width: 50%;

    display: flex; 
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start; 
    align-items: center;
    /*gap:10px;*/

    transform: translate(100%);
    transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
}
.s2-slide-visible-1 {
    transform: translate(0%);
    opacity: 1;
    pointer-events: visible;
}
.s2-slide-visible-2-right { 
    transform: translate(-100%); 
    opacity: 1;
    pointer-events: visible;
}
.s2-slide-visible-2-left { 
    transform: translate(-100%);
    opacity: 1;
    pointer-events: visible;
}
.s2-slide-visible-3 {
    transform: translate(-200%);
    opacity: 1;
    pointer-events: visible;
}

.s2-slide-hidden-1 {
    transform: translate(-100%);
    opacity: 0;
    pointer-events: none;

    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.s2-slide-hidden-2-left { 
    transform: translate(-200%); 
    opacity: 0;
    pointer-events: none;

    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
.s2-slide-hidden-2-right { 
    transform: translate(100%); 
    opacity: 0;
    pointer-events: none;

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

.s2-slide-hidden-3 {
    transform: translate(100%);
    opacity: 0;
    pointer-events: none;

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

.s2-signup-form-field-cont {
    position: relative;
    width:100%;

    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between; 
    align-items: center;
    gap:15px;
}
.s2-signup-form-field-cont p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.1em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: var(--me-color-3);
    text-align: center;

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

    margin-top:10px;
    margin-bottom:10px;
}
.s2-signup-form-field-title {
    width:40% !important;
    margin-top: 0px;
    margin-bottom: 15px !important;
}


.s2-signup-slide-inputs {
    text-decoration: none;
    position: relative;
    margin-top: calc(20px* 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.1em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;

    transition: transform 0.3s ease-in-out;
}
.s2-signup-slide-inputs:hover { transform: scale(1.05); }


/* --- SLIDE 1 --- */
.horizontal-line {
    width: 60%;
    height: 2px;
    background-color: #dddddd;
    margin-top: 40px;
    margin-bottom: 40px;
}

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

    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: center;
    /*gap:10px;*/
}
.signup-google-cont p { 
    width: 100%;
    margin-left: 0%;
    text-align:center;
}
.google_signup_inp {
    transform: scale(1.05);
}


/* --- SLIDE 2 --- */
.s2-slide-previous-arrow-cont {
    position: absolute;
    left: -25%;
    top: 25%;
    opacity: 0.6;

    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start; 
    align-items: center;
    /*gap:10px;*/

    cursor: pointer;
}
.s2-slide-previous-arrow-cont:hover { opacity: 1; }
.s2-slide-previous-arrow {
    width:60px;
    height:60px;
    background-image: url('../../../../images/generals_images/icons/left-arrow-circle-green.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.s2-slide-previous-arrow-cont p {
    text-decoration: none;

    max-width: 20%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(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));
}





















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

}

/* --- 1200 - 1025 - Orange ----------------------------------------- */
@media screen and (width <= 1200px) and (width > 1024px) {
    
    

}

/* --- 1024 - 769 - Jaune ------------------------------------------ */
@media screen and (width <= 1024px) and (width > 768px) {
      
    #site-signup-form {
        width: 60%;
        margin-left: 20%;
    }

}

/* --- 768 - 481 - Vert ------------------------------------------- */
@media screen and (width <= 768px) and (width > 480px) {
    
    #site-signup-form {
        width: 60%;
        margin-left: 20%;
    }

}

/* --- 480 - 321 - Bleu ------------------------------------------- */
@media screen and (width <= 480px) and (width > 320px) {
    
    #section-2 { height: auto; }

    .s2-slide-previous-arrow-cont { left: -30%; }
    
    #site-signup-form {
        width: 60%;
        margin-left: 20%;
    }

}

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

    #section-2 { height: auto; }

    .s2-slide-previous-arrow-cont { left: -30%; }
    .s2-slide-previous-arrow {
        width: 45px;
        height: 45px; 
    }
    
    #site-signup-form {
        width: 60%;
        margin-left: 20%;
    }

}