@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900");

/* Reset e Layout Base */
* { box-sizing: border-box; }
body { background: #ffffff; color: #585858; font-family: "Source Sans Pro", sans-serif; margin: 0; line-height: 1.5; }
.inner { width: 90%; max-width: 80em; margin: 0 auto; padding: 3em 0; }

/* Quadrados de Serviços */
.tiles { display: flex; flex-wrap: wrap; margin: -1em 0 2em -1em; list-style: none; }
.tiles article { width: calc(25% - 2em); margin: 1em; height: 15em; position: relative; background: #585858; overflow: hidden; border-radius: 4px; }
.tiles article img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.tiles article > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff !important; text-decoration: none; text-align: center; z-index: 2; padding: 1em; }

/* Rodapé Alinhado */
#footer { background: #f6f6f6; padding: 4em 0; border-top: 1px solid #ddd; }
#footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
#footer section:nth-child(1) { width: 55%; }
#footer section:nth-child(2) { width: 35%; }

/* ÍCONES - CORREÇÃO PARA APARECEREM */
ul.icons { list-style: none; padding: 0; display: flex; flex-wrap: wrap; }
ul.icons li { margin: 0 0.5em 0.5em 0; }
ul.icons li a { 
    display: inline-block; width: 2.5em; height: 2.5em; line-height: 2.5em; 
    text-align: center; border: solid 1px #c9c9c9; border-radius: 4px; text-decoration: none;
}
ul.icons li a:before { font-family: 'Font Awesome 5 Brands'; font-size: 1.2em; }
.fa-instagram:before { content: "\f16d"; }
.fa-facebook-f:before { content: "\f39e"; }
.fa-linkedin:before { content: "\f08c"; }
.fa-youtube:before { content: "\f167"; }
.fa-envelope:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f0e0"; }
.fa-phone:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f095"; }
.label { display: none; }

/* Responsivo */
@media screen and (max-width: 736px) {
    .tiles article { width: calc(50% - 1em); margin: 0.5em; }
    #footer section { width: 100% !important; }
}