/***
* TGH - SITE - ACCUEIL PAGE CSS
* 
* 
***/



/* ----- BO NAV LATERAL CSS PERSO ----- */
#nav-site-demande_compte { background-color: #fbac39; }
#bo-page-cont {
    background: none;
}
#page-content-cont {
    background: linear-gradient(135deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0.8) 100%);
}


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



/* --- CUSTOM CONTACT FORM --- */
.form-lines, .form-lines-flex {
    margin-bottom: 30px;
}

.form-infos-txt-cont h3 {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    /*color: #ffffff !important;*/
    color: var(--me-color-1) !important;
    font-size: calc(2.5em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: bold;
    text-align: left;
    letter-spacing: 1px;
    padding-top: calc(0px * var(--lateral-preview-reduc-ratio, 1));
    margin-top: 0px;
    margin-bottom: calc(50px * var(--lateral-preview-reduc-ratio, 1));
}
.form-infos-txt-cont {
    width: 100%;
    margin-left: 0px;
}

.form-submit-inputs {
    border-radius: 5px;
}






/* ----- PAGE CONTAINER CSS ----- */
body {
    background-color: var(--me-color-1);
}

#page-cont {
    width: 100%;
    min-height: calc(100vh * var(--lateral-preview-reduc-ratio, 1));
    background: linear-gradient(135deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0.8) 100%);
}





/* ----- SECTIONS PAGE GENERALS CSS ----- */

.sections-blocs-title {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(2.7em * var(--lateral-preview-reduc-ratio, 1));
    letter-spacing: 1px;
    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;
    margin-bottom: 20px;

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

.sections-blocs-ss-title {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.6em * var(--lateral-preview-reduc-ratio, 1));
    letter-spacing: 1px;
    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;
    margin-bottom: 30px;

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

.sections-blocs-text {
    text-decoration: none;

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

    -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));
}

.sections-blocs-input {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    width: 50%;
    margin-left: 25%;
    margin-top: calc(20px * var(--lateral-preview-reduc-ratio, 1));

    box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
    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 30s ease-in-out infinite;
    animation: anim_background_transla 30s ease infinite;

    border:none;
    border-radius: 5px;

    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.sections-blocs-input:hover { transform: scale(1.03); }

.sections-blocs-input p, .sections-blocs-input a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1.1em * var(--lateral-preview-reduc-ratio, 1));
    /*letter-spacing: 1px;*/
    font-weight: normal;
    color: #ffffff;
    text-align: center;

    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: calc(8px * var(--lateral-preview-reduc-ratio, 1));
    padding-bottom: calc(8px * var(--lateral-preview-reduc-ratio, 1));
}



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

    width: 75%;
    margin-left: 20%;
    margin-right: 5%;
    padding-bottom: 0px;

}

#section-1 h1 { 
    font-family: Arial, Helvetica, sans-serif;
    /*color: #ffffff !important;*/
    color: var(--me-color-1) !important;
    font-size: calc(2.5em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: bold;
    text-align: left;
    letter-spacing: 1px;
    padding-top: calc(150px * var(--lateral-preview-reduc-ratio, 1));
    margin-top: 0px;
    margin-bottom: calc(100px * var(--lateral-preview-reduc-ratio, 1));
}

.tgh-forms {
    position: absolute;
    z-index: 1;

    width: calc(280px * var(--lateral-preview-reduc-ratio, 1));
    height: calc(280px * var(--lateral-preview-reduc-ratio, 1));
    margin-top: -70px;
    right: 22%;

    filter: blur(5px);
    opacity: 0.3;
    background-image: url('../../../../images/generals_images/logos/tgh_favicon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.s2-bloc-titles, .s3-bloc-titles, .s4-bloc-titles {
    font-family: Arial, Helvetica, sans-serif;
    color: #101010 !important;
    font-size: calc(1.7em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: bold;
    text-align: left;
    margin-top: 0px;
    margin-bottom:25px;
}

.s2-bloc-txt, .s3-bloc-txt, .s4-bloc-txt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(1em * var(--lateral-preview-reduc-ratio, 1));
    font-weight: lighter;
    color: #050505;
    text-align: left;
    margin-top: 0px;
    margin-bottom: calc(100px* var(--lateral-preview-reduc-ratio, 1));
}



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

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

.s2-blocs {
    width:75%;
    margin-left: 20%;
    margin-right: 5%;
    padding-top: calc(0px* var(--lateral-preview-reduc-ratio, 1));
    padding-bottom: 0px;
}



/* ----- SECTION 3 CSS ----- */
#section-3 {
    position: relative;
    width: 100%;

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

.s3-blocs {
    width:90%;
    margin-left: 5%;
    padding-top: calc(0px* var(--lateral-preview-reduc-ratio, 1));
    padding-bottom: 0px;
}




/* ----- SECTION 4 CSS ----- */
#section-4 {
    position: relative;
    width: 100%;

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

.s4-blocs {
    width:90%;
    margin-left: 5%;
    padding-top: calc(0px* var(--lateral-preview-reduc-ratio, 1));
    padding-bottom: 0px;
}












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

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

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

}

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

}

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


}

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

}

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

}