/***
* TGH SITE - FOOTER.PHP STYLE CSS
***/



/* --- CSS ROOT --- */
:root {
    /* Paramètre modulable : Hauteur du menu de navigation (Utilise pour calculer la hauteur d'une section 1 à 100vh)   */
    --footer-bg-image-1: url('../../../../images/generals_images/logos/tgh_favicon_blc_1.png');
    --footer-bg-image-2: url('../../../../images/generals_images/logos/tgh_favicon_blc_2.png');
    --footer-bg-image-3: url('../../../../images/generals_images/logos/tgh_favicon_blc_1.png');
}



/*__________ IMPORT RESSOURCES __________*/
/* Fonts */








/*__________ GENERAL CLASS DECLARATION __________*/
.redTxt{
    color: red;
}

.inline_class {
    width: 100%;
    
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: inline-flex;
}

/*__________ FOOTER STYLE CSS __________*/
#footer {
    position: relative;
    width: 100%;
    /*background-image: url('../images/footer/degrade_bleu.png');;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
    background: linear-gradient(135deg, var(--me-color-1) 20%, var(--me-color-3) 100%);

    /*display: -webkit-box;
    display: -moz-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: inline-flex;*/
}

.footer-primary-line-cont {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.footer-containers {
    width: 30%;
}
.footer-containers h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    letter-spacing: 1px;
    color: #101010;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 30px;
    font-weight: normal;
}
#footer-nav-1-logo { margin-top:20px;}

#footer-nav-1-logo {
    position: absolute;
    width: 70px; 
    height: 70px;
    right: 5%;
    bottom:10%;

    cursor: pointer;

}
/* - Loader TGH - */
.footer-loader-nav-1 {
  width: 15%;
  aspect-ratio: .866;
  margin-left: 2%;
  margin-top: 60px;
  display: grid;
  background-image: var(--footer-bg-image-1);
  background-repeat: no-repeat;
  background-size: contain;
  animation: l12 16s infinite linear;
  transform-origin: 45% 43%;
  opacity: 0.7;
}
.footer-loader-nav-1:before,
.footer-loader-nav-1:after {
  content: "";
  grid-area: 1/1;
  background-image: var(--footer-bg-image-2);
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: inherit;
  /*animation: inherit;*/
  animation: l12 18s infinite linear;
  opacity: 0.7;
}
.footer-loader-nav-1:after {
  background-image: var(--footer-bg-image-3);
  background-repeat: no-repeat;
  background-size: contain;
  animation-duration: 20s;
}




.footer-containers p, .footer-containers a {
    text-decoration: none;
    width: 98%;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    color: white;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;

    transition: transform 0.3s ease-in-out;
}
.footer-containers p:hover, .footer-containers a:hover { transform: scale(1.03); }
#footer-adrs:hover { transform: scale(1); }








#footer_bottom {
    margin-top: 20px;
    margin-bottom: 5px;
}
#footer_bottom p {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    color: white;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}
#footer_bottom a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: white;
    margin-top: 0px;
    margin-bottom: 0px;
    text-decoration: none;
}



#footer_bottom{
    width: 100%;
}




/* ---------- 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) {

    .footer-containers { width: 42%; }
   
}
/* --- 768 - 481 ------------------------------------------- */
@media screen and (width <= 768px) and (width > 480px) {

    .footer-primary-line-cont { flex-direction: column; }
    .footer-containers { width: 100%; }


}
/* --- 480 - 321 ------------------------------------------- */
@media screen and (width <= 480px) and (width > 320px) {
    
    .footer-primary-line-cont { flex-direction: column; }
    .footer-containers { width: 100%; }

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

    .footer-primary-line-cont { flex-direction: column; }
    .footer-containers { width: 100%; }

}