/***
* COSMOS WEB - INDEX CSS STYLE
*
* 
***/

/* ----- FOOTER CSS ----- */
#footer-cont {
    width: 100%;

    background-image: url('../images/footer/footer_terre.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

#footer-menu-cont {
    width: 100%;
    margin-top: 50px;
}

.footer-lines {
    width: 90%;
    display: flex;
    margin-left: 5%;
}

.footer-lines h3 {
    font-family: 'PJS', Arial, Helvetica, sans-serif;
    word-spacing: 2px;
    color: white;
    text-shadow: 2px 2px 2px #0b0b0b;
    font-size: 1.5em;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 80px;
    margin-bottom: 0px;
    cursor: pointer;

    /*transition: font-size 0.3s ease-out;
    -webkit-transition: font-size 0.3s ease-out;
    -moz-transition: font-size 0.3s ease-out;*/

    transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
}
.footer-lines h3:hover {
    /*font-size: 1.6em;*/
    transform: scale(1.1);
    text-shadow: 3px 3px 3px #0b0b0b;
}

.footer-lines a {
    text-decoration: none;

    font-family: 'PJS', Arial, Helvetica, sans-serif;
    word-spacing: 2px;
    color: white;
    text-shadow: 2px 2px 2px #0b0b0b;
    font-size: 1.9em;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 0px;
    cursor: pointer;

    /*transition: font-size 0.3s ease-out;
    -webkit-transition: font-size 0.3s ease-out;
    -moz-transition: font-size 0.3s ease-out;*/

    transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
}
.footer-lines a:hover {
    /*font-size: 1.6em;*/
    transform: scale(1.1);
    text-shadow: 3px 3px 3px #0b0b0b;
}

.reseaux-cont a {
    text-decoration: none;
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
}

.footer-site-links {
    margin: auto;
}

.footer-reseaux-links {
    text-decoration: none;
    width:100%;
    height: 100%;
}

#line-2 {
    width: 30%;
    margin-left: 35%;
    display: flex;
    margin-top: 40px;
    margin-bottom: 20px;
}

.reseaux-cont {
    margin: auto;
}

.footer-links {
    text-decoration: none;
    width: 100%;
}

.reseaux-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 2px 4px #101010;

    transition: transform 0.3s ease-out;
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
}
.reseaux-icon:hover {
    transform: scale(1.2);
}

#line-3 {
    padding-bottom: 50px;
}
#line-3 p {
    width: 100%;
    font-family: 'PJS', Arial, Helvetica, sans-serif;
    word-spacing: 2px;
    color: white;
    text-shadow: 1px 1px 1px #222;
    font-size: 1.2em;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 0px;
    margin-bottom: 5px;
}
#line-3 a {
    font-family: 'PJS', Arial, Helvetica, sans-serif;
    word-spacing: 2px;
    color: white;
    text-shadow: 1px 1px 1px #222;
    font-size: 1em;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 0px;
    margin-bottom: 10px;

    cursor: pointer;
}



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

/* ---------- SCREEN >= 1920 ------------------------------ */
@media screen and (min-width: 1920px) {
    /*body{ background-color: orange }*/

}
/* ---------- SCREEN < 1920 | SCREEN >= 1680 -------------- */
@media screen and (max-width: 1919px) and (min-width: 1680px) {
    /*body{ background-color: cyan }*/

}
/* ---------- SCREEN < 1680 | SCREEN >= 1440 -------------- */
@media screen and (max-width: 1679px) and (min-width: 1440px) {
    /*body{ background-color: purple; }*/

}
/* ---------- SCREEN < 1440 | SCREEN >= 1280 -------------- */
@media screen and (max-width: 1439px) and (min-width: 1280px) {
    /* DEFAULT STYLE : NOT NEED MEDIA QUERIES */
}
/* ---------- SCREEN < 1280 | SCREEN >= 1024 -------------- */
@media screen and (max-width: 1279px) and (min-width: 1024px) {
    /*body{ background-color: yellow; }*/
    #footer-menu-cont { margin-top: 0px; }
    .footer-lines a {font-size: 1.3em; margin-top: 60px; }

    #line-2 { width: 50%; margin-left: 25%; }
    .reseaux-icon { width: 35px; height: 35px; }

    #line-3 p { font-size: 0.9em; letter-spacing: 0px; }

}
/* ---------- SCREEN < 1024 | SCREEN >=  768 -------------- */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    /*body{ background-color: green; }*/

    .footer-lines { width: 96%; margin-left: 2%; }
    .footer-lines a { font-size: 1.4em; margin-top: 45px; }
    #line-2 { width: 50%; margin-left: 25%; margin-top: 15px; margin-bottom: 15px; }
    #line-3 p { font-size: 0.9em; }

}
/* ---------- SCREEN <  768 | SCREEN >=  480 -------------- */
@media screen and (max-width: 767px) and (min-width: 480px) {
    /*body{ background-color: blue; }*/    

    .footer-lines { width: 98%; margin-left: 1%; }
    #footer-cont { background-size: 180%; }
    .footer-lines a { font-size: 1em; margin-top: 50px; }

    #line-2 { width: 70%; margin-left: 15%; margin-top: 20px; margin-bottom: 15px; }
    .reseaux-icon { width: 35px; height: 35px; }

    #line-3 p { font-size: 0.7em; }
}
/* ---------- SCREEN <  480  ------------------------------ */
@media screen and (max-width: 479px) {
    /*body{ background-color: red; }*/

    #line-1 { display:none; }
    .footer-lines { width: 98%; margin-left: 1%; }
    #footer-cont { background-size: 180%; }
    .footer-lines a { font-size: 0.8em; margin-top: 50px; }

    #line-2 { width: 70%; margin-left: 15%; margin-top: 20px; margin-bottom: 15px; padding-top: 40px; }
    .reseaux-icon { width: 35px; height: 35px; }

    #line-3 p { font-size: 0.8em; }
    
}