/***
* MEDIC EXPAT - SITE - SDF PAGE DEFAULT STYLE CSS
* 
* 
***/



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



/* ----- GENERALS CTA STYLES ----- */
.page-cta-cont {
    width: 90% !important;
    padding-left: 2%;
    padding-right: 2%;

    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 70px;
    margin-bottom: 150px;

    border-radius: 10px;

    background-size: 300% 300%;
    background-image: linear-gradient(135deg, var(--me-color-1) 10%, var(--me-color-2) 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 3px 5px #808080;*/
    /*display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: center;
    gap: 0px;*/
}
.page-cta-cont h3 {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.7em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: bold;
    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;
    padding-bottom: 20px;

    /*transition: transform 300ms ease-in-out;*/
}
.page-cta-cont p, .page-cta-cont a {
    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(10px * var(--lateral-preview-reduc-ratio, 1));
    margin-bottom: calc(10px * var(--lateral-preview-reduc-ratio, 1));

    transition: transform 300ms ease-in-out;
}
.user-profil-cta-inputs-cont {
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /*gap: 0px;*/
}
.user-profil-cta-inputs {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 3%;
    padding-right: 3%;
    background: linear-gradient(135deg, rgba(62, 198, 162, 1) 20%, rgba(62, 144, 198, 1) 80%);
    border: none;
    border-radius: 3px;
    margin-top: 30px;

    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;

    box-shadow: 2px 2px 3px #303030;

    cursor: pointer;
    transform: scale(1.1);
    transition: transform 300ms ease-in-out;
}
.user-profil-cta-inputs:hover{ transform: scale(1.15); }
#user-profil-cta-1 { background: linear-gradient(135deg, var(--me-color-2) 20%, rgb(52, 126, 176) 80%); }



/* ----- PAGE CONTAINER CSS ----- */
#page-cont {
    position: relative;
    width: 100%; 
}
#page-content-cont {
    position: relative;
    width: var(--lateral-preview-width-total, 100%);
    /*padding-top: calc(40px + var(--header-nav-2-nav-primary-height));*/
    padding-top: calc(30px + var(--header-nav-2-nav-primary-height, 0px));
    /*top: var(--header-ss-nav-height, 0);*/

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: top;
}

.page-sections {
    position: relative;
    min-height: calc(100vh * var(--lateral-preview-reduc-ratio, 1) - var(--header-nav-2-nav-primary-height));
}
#page-section-1 {
    width: 66%;
    margin-left: 4%;
    margin-right: 2%;
}
#page-section-2 {
    width: 22%;
    padding-left: 2%;
    padding-right: 4%;
}

.page-titles-cont {
    position: relative;
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: center;
}

.page-images {
    width: 100%;
    min-height: calc(200px * var(--lateral-preview-reduc-ratio, 1));
    border-radius: 5px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*background-size: 100%;
    -webkit-animation: anim_background_zoom 36s ease-in-out infinite;
    animation: anim_background_zoom 36s ease infinite;*/

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: center;
}
.background-opacity-dark{
    position: absolute;
    width: 100%;
    border-radius: 5px;
    height: calc(200px * var(--lateral-preview-reduc-ratio, 1));
    background-color: rgba(0,0,0,0.4);
    z-index:301;
}
.page-cnt-img {
    min-height: calc(300px * var(--lateral-preview-reduc-ratio, 1));
    aspect-ratio: 16 / 9;
    margin-top: 50px;
    background-color: #dedede;
}

#s1-main-title {
    position: absolute;
    z-index:305;
    width: 94%;
    padding-left: 3%;
    padding-right: 3%;

    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(2.5em * var(--lateral-preview-reduc-ratio, 1));
    letter-spacing: 1px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    text-shadow: #101010 1px 0 3px;

    margin-top: 0px;
    margin-bottom: 0px;
}
/*#s1-main-title {
    position: relative;
    z-index:305;
    width: 94%;
    padding-left: 3%;
    padding-right: 3%;

    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(2.5em * var(--lateral-preview-reduc-ratio, 1));
    letter-spacing: 1px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    text-shadow: #101010 1px 0 3px;

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

.page-h3-titles h3 {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.8em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: bold;
    color: var(--me-color-3);
    text-align: left;
    
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

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

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

.page-p-texts {
    text-decoration: none;

    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.1em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: lighter;
    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: calc(30px * var(--lateral-preview-reduc-ratio, 1));
}
.page-p-texts p { margin-top:0px; margin-bottom:0px; }


.page-contents-cont, .page-ads-cont, .page-cta-cont {
    width:94%;
    margin-left: 3%;
    margin-right: 3%;
}



.page-contents-blocked-cont {
    position: relative;
    width:96%;
    margin-left:2%;
    margin-right:2%;
    margin-bottom: 30px;

    margin-top: -50px;
}
.page-contents-blocked-opacity-cont {
    width: 100%;
    height:80px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
}
.page-contents-blocked-cont h3 {
    text-decoration: none;

    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.3em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: lighter;
    color: var(--me-color-2);
    text-align: center;

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

    margin-top: calc(30px * var(--lateral-preview-reduc-ratio, 1));
    margin-bottom: calc(30px * var(--lateral-preview-reduc-ratio, 1));
}
.page-contents-blocked-cont 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: lighter;
    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: calc(0px * var(--lateral-preview-reduc-ratio, 1));
    margin-bottom: calc(10px * var(--lateral-preview-reduc-ratio, 1));
}




.page-ads-cont {
    min-height: 200px;

    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 50px;

    background-size: 300% 300%;
    background-image: linear-gradient(135deg, rgb(0, 0, 0) 10%, rgb(50, 50, 50) 90%);
    background-position: 50% 50%;
    -webkit-animation: anim_background_transla 20s ease-in-out infinite;
    animation: anim_background_transla 20s ease infinite;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: center;
}
#s2-b2-ads { min-height: 300px; }
.page-ads-cont p {
    text-decoration: none;
    width: 100%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.3em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: bold;
    color: #ffffff;
    text-align: center;

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












/* - PAGE NAV STYLE - */
.page-nav-menu-cont {
    position: relative;
    width: 100%;
    border-radius: 10px;
    box-shadow: 3px 3px 4px #a9a9a9;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: top;
    align-items: start;
    /*gap: 0px;*/
}
.page-nav-sec-blocs {
    position: relative;
    width:100%;
    min-height: calc(50px * var(--lateral-preview-reduc-ratio, 1));
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /*background-color: var(--me-color-4);*/
    background-color: var(--me-color-2);
}
#page-nav-sec-l1-bloc-0 { 
    border-radius: 10px 10px 0px 0px;
    background-color: rgb(48, 124, 176);
}
#page-nav-sec-l1-bloc-2, #page-nav-sec-l1-bloc-3, #page-nav-sec-l1-bloc-4 { 
    border-top: 1px solid rgb(62,144,198);
    /*border-top: 1px solid var(--me-color-1);*/ 
}
#page-nav-sec-l1-bloc-4, #page-nav-last-elem { border-radius: 0px 0px 10px 10px; }

.page-nav-sec-blocs h4 {
    text-decoration: none;

    width:90%;
    margin-left: 5%;
    margin-right: 5%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: left;
    color: #ffffff;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;

    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform 0.3s ease-in-out;
}
.page-nav-sec-blocs p {
    text-decoration: none;

    width:90%;
    margin-left: 5%;
    margin-right: 5%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: left;
    color: #ffffff;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;

    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}
.page-nav-sec-blocs:hover > p , .page-nav-sec-blocs:hover > a {
    transform: scale(1.05);
}

.page-nav-title-cont {
    width:100%;
}

.page-nav-l1-ss-cont {
    position: relative;
    width: 100%;
}
.page-nav-l1-ss-cont a {
    text-decoration: none;

    width:82%;
    margin-left: 8%;
    margin-right: 8%;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: left;
    color: #ffffff;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;

    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}
.page-nav-l1-ss-cont:hover > a {
    transform: scale(1.05);
}

.page-nav-ss-inputs {
    min-height: calc(40px * var(--lateral-preview-reduc-ratio, 1));
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: rgb(48, 124, 176);
    border-top: 1px solid var(--me-color-2);
    /*background-color: var(--me-color-1);
    border-top: 1px solid rgb(137 221 199);*/
}
.page-nav-ss-inputs p {
    text-decoration: none;
    display: block;
    position: relative;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    font-weight: normal;
    text-align: left;
    color: #ffffff;
    margin-top: 0px;
    margin-bottom: 0px;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform 0.3s ease-in-out;
}
.page-nav-ss-inputs:hover > p , .page-nav-ss-inputs:hover > a {
    transform: scale(1.05);
}
#page-nav-l1-ss-b4 > *:nth-child(4) {
    border-radius: 0px 0px 10px 10px;
}










/* ---------- MEDIA QUERIES SYSTEM ------------------------------------------------------------*/

/* --- > 1200 ----------------------------------------- */
@media screen and (width > 1200px) {
}

/* --- 1200 - 1025 ----------------------------------------- */
@media screen and (width <= 1200px) and (width > 1024px) {
    
    #page-content-cont { padding-top: calc(20px + var(--header-nav-2-nav-primary-height, 0px)); }


    #page-section-1 {
        width: 69%;
        margin-left: 2%;
        margin-right: 1%;
    }
    .page-images { min-height: calc(170px* var(--lateral-preview-reduc-ratio, 1)); }
    .background-opacity-dark { height: calc(170px* var(--lateral-preview-reduc-ratio, 1)); }


    #page-section-2 {
        width: 25%;
        padding-left: 1%;
        padding-right: 2%;
    }

    .page-nav-sec-blocs { min-height: calc(40px* var(--lateral-preview-reduc-ratio, 1)); }
    .page-nav-sec-blocs p {
        padding-top: 5px;
        padding-bottom: 5px; 
    }

    .page-ads-cont {
        width: 98%;
        margin-left: 2%;
        margin-right: 0%; 
    }

}

/* --- 1024 - 769 ------------------------------------------ */
@media screen and (width <= 1024px) and (width > 768px) {
    
    #page-content-cont { padding-top: calc(20px + var(--header-nav-2-nav-primary-height, 0px)); }


    #page-section-1 {
        width: 69%;
        margin-left: 2%;
        margin-right: 1%;
    }
    .page-images { min-height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    .background-opacity-dark { height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-main-title { font-size: calc(2.25em* var(--lateral-preview-reduc-ratio, 1)); }
    .page-h3-titles h3 {
        font-size: calc(1.65em* var(--lateral-preview-reduc-ratio, 1));
        margin-top: 25px;
    }
    .page-p-texts { font-size: calc(1em* var(--lateral-preview-reduc-ratio, 1)); }


    #page-section-2 {
        width: 25%;
        padding-left: 1%;
        padding-right: 2%;
    }

    .page-nav-sec-blocs { min-height: calc(35px* var(--lateral-preview-reduc-ratio, 1)); }
    .page-nav-sec-blocs p {
        padding-top: 5px;
        padding-bottom: 5px; 
    }
    .page-nav-l1-ss-cont a {
        font-size: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .page-ads-cont {
        width: 98%;
        margin-left: 2%;
        margin-right: 0%; 
    }
    

}

/* --- 768 - 481 ------------------------------------------- */
@media screen and (width <= 768px) and (width > 480px) {
    
    #page-content-cont { padding-top: calc(20px + var(--header-nav-2-nav-primary-height, 0px)); }


    #page-section-1 {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .page-images { min-height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    .background-opacity-dark { height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-main-title { font-size: calc(2.25em* var(--lateral-preview-reduc-ratio, 1)); }
    .page-h3-titles h3 {
        font-size: calc(1.65em* var(--lateral-preview-reduc-ratio, 1));
        margin-top: 25px;
    }
    .page-p-texts { font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1)); }


    #page-section-2 {
        display:none; 

        position: fixed;
        z-index: 310;

        width:34%;
        padding-left: 2%;
        padding-right: 2%;
        right: 0%;
        /*height: calc(100vh * var(--lateral-preview-reduc-ratio, 1) - var(--header-nav-2-nav-primary-height));*/
        height: 100%;
        margin-top: -20px;
        padding-top: 20px;

        background-color: rgba(0,0,0,0.7);
        overflow: auto;
    }

    .page-nav-menu-cont { box-shadow: none; }
    .page-nav-sec-blocs { min-height: calc(35px* var(--lateral-preview-reduc-ratio, 1)); }
    .page-nav-sec-blocs p {
        padding-top: 5px;
        padding-bottom: 5px; 
    }
    .page-nav-l1-ss-cont a {
        font-size: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .page-ads-cont {
        width: 98%;
        margin-left: 2%;
        margin-right: 0%; 
        margin-top: 30px;
    }


}

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

    #page-content-cont { padding-top: calc(20px + var(--header-nav-2-nav-primary-height, 0px)); }


    #page-section-1 {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .page-images { min-height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    .background-opacity-dark { height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-main-title { font-size: calc(2.25em* var(--lateral-preview-reduc-ratio, 1)); }
    .page-h3-titles h3 {
        font-size: calc(1.65em* var(--lateral-preview-reduc-ratio, 1));
        margin-top: 25px;
    }
    .page-p-texts { font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1)); }


    #page-section-2 {
        display:none; 
        
        position: fixed;
        z-index: 310;

        width:34%;
        padding-left: 2%;
        padding-right: 2%;
        right: 0%;
        /*height: calc(100vh * var(--lateral-preview-reduc-ratio, 1) - var(--header-nav-2-nav-primary-height));*/
        height: 100%;
        margin-top: -20px;
        padding-top: 20px;

        background-color: rgba(0,0,0,0.7);
        overflow: auto;
    }

    .page-nav-menu-cont { box-shadow: none; }
    .page-nav-sec-blocs { min-height: calc(35px* var(--lateral-preview-reduc-ratio, 1)); }
    .page-nav-sec-blocs p {
        padding-top: 5px;
        padding-bottom: 5px; 
    }
    .page-nav-l1-ss-cont a {
        font-size: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .page-ads-cont {
        width: 98%;
        margin-left: 2%;
        margin-right: 0%; 
        margin-top: 30px;
    }

}

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

    #page-content-cont { padding-top: calc(20px + var(--header-nav-2-nav-primary-height, 0px)); }


    #page-section-1 {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }
    .page-images { min-height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    .background-opacity-dark { height: calc(150px* var(--lateral-preview-reduc-ratio, 1)); }
    #s1-main-title { font-size: calc(2.25em* var(--lateral-preview-reduc-ratio, 1)); }
    .page-h3-titles h3 {
        font-size: calc(1.65em* var(--lateral-preview-reduc-ratio, 1));
        margin-top: 25px;
    }
    .page-p-texts { font-size: calc(1.1em* var(--lateral-preview-reduc-ratio, 1)); }


    #page-section-2 {
        display:none; 
        
        position: fixed;
        z-index: 310;

        width:34%;
        padding-left: 2%;
        padding-right: 2%;
        right: 0%;
        /*height: calc(100vh * var(--lateral-preview-reduc-ratio, 1) - var(--header-nav-2-nav-primary-height));*/
        height: 100%;
        margin-top: -20px;
        padding-top: 20px;

        background-color: rgba(0,0,0,0.7);
        overflow: auto;
    }

    .page-nav-menu-cont { box-shadow: none; }
    .page-nav-sec-blocs { min-height: calc(35px* var(--lateral-preview-reduc-ratio, 1)); }
    .page-nav-sec-blocs p {
        padding-top: 5px;
        padding-bottom: 5px; 
    }
    .page-nav-l1-ss-cont a {
        font-size: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .page-ads-cont {
        width: 98%;
        margin-left: 2%;
        margin-right: 0%; 
        margin-top: 30px;
    }

}