/* TEST 1 */

/* FOOTER STRUCTURE & STYLE ---------------------------------------------------------------------------- */

footer {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: auto auto auto;
    grid-gap: 1em;
}


footer ul.footerLinks {
    grid-column: 2 / 11;
    grid-row: 1 / 2;
    list-style-type: none;
}

footer ul.footerLinks h6 {
    font-family: 'Avenir Next LT Pro Demi', sans-serif;
    font-size: .85rem;
    line-height: .95rem;
    color: #96d3e8;
    margin-top: 2rem;
}

footer ul.footerLinks li {
    font-size: .85rem;
    line-height: .95rem;
    color: #ccc;
    margin-top: .6rem;
}

footer ul.footerLinks li a {
    color: #ccc;
    text-decoration: none;
}

footer ul.footerLinks li a:hover {
    color: #f78e2e;
}

footer ul.footerSocial {
    grid-column: 2 / 11;
    grid-row: 2 / 3;
    list-style-type: none;
    font-size: .85rem;
    line-height: .95rem;
    color: #96d3e8;
    margin-top: 3rem;
}

footer ul.footerSocial li {
    width: 25px;
    height: 25px;
    margin: .5rem .5rem 0 0;
    float: left;
}

footer ul.footerSocial li img{
    filter: invert(0) sepia(0) saturate(1) hue-rotate(183.6deg) brightness(1.2);
}

footer ul.footerSocial li img:hover {
    filter: invert(0.4) sepia(1) saturate(1.9) hue-rotate(175deg) brightness(1.2);
}

footer .footerLogo {
    grid-column: 2 / 11;
    grid-row: 3 / 4;
    margin: 3em 0;
}















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


@media only screen and (min-width:375px) {}

@media only screen and (min-width:480px) {}

@media only screen and (min-width:768px) {

    footer ul.footerLinks {
        grid-column: 2/6;
        grid-row: 1 / 2;
    }

    footer ul.footerSocial {
        grid-column: 2 / 7;
        grid-row: 2 /3;
        margin-top: 2rem;
    }

    footer .footerLogo {
        grid-column: 7 / 11;
        grid-row: 2 / 3;
        margin: 2em 0;
    }

}

@media only screen and (min-width:1024px) {
    
    footer {
        grid-template-columns: repeat(11, 1fr);
        grid-column: 1 / 10;
        grid-row: 7 / 8;
    }

    footer ul.footerSocial {
        grid-column: 2 / 6;
    }

    footer .footerLogo {
        grid-column: 7 / 11;
    }
}

@media only screen and (min-width: 1200px) {}

@media only screen and (orientation: landscape) and (max-width:1440px) {}

@media only screen and (orientation: landscape) and (max-width:812px) {

    footer .footerLogo img {
        width: 100%;
    }
}

@media only screen and (orientation: landscape) and (max-width:570px) {}