/* =========================
   FOOTER
   ========================= */

.footer{
  margin-top:77px;
  border-top:1px solid #dddddd;
  background:#ffffff;
}

.footer-inner{
  width:100%;
  max-width:990px;
  margin:0 auto;
  padding:38px 10px 26px 10px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:28px;
  text-align:left;
}

.footer-brand,
.footer-col{
  min-width:0;
}

.footer-title{
  margin:0 0 12px 0;
  text-align:left;
  font-family:"Raleway", Arial, Helvetica, sans-serif;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-0.03em;
  color:#111111;
  font-weight:400;
}

.footer-heading{
  margin:0 0 12px 0;
  text-align:left;
  font-family:"Raleway", Arial, Helvetica, sans-serif;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#777777;
  font-weight:400;
}

.footer-text{
  margin:0;
  text-align:left;
  font-size:15px;
  line-height:1.7;
  color:#333333;
  font-weight:300;
}

.footer-links{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-links li{
  margin:0 0 10px 0;
  padding:0;
  list-style:none;
  text-align:left;
  line-height:1.5;
}

.footer-links a{
  color:#111111;
  text-decoration:none;
  font-size:15px;
}

.footer-links a:hover,
.footer-links a:focus{
  color:#000000;
  text-decoration:underline;
}

.footer-contact a{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.footer-contact img{
  display:block;
  width:18px;
  height:18px;
}

.footer-portrait-image{
  width:100%;
  max-width:180px;
  height:auto;
  border-radius:8px;
  display:block;
  border:1px solid #dddddd;
}

.footer-bottom{
  border-top:1px solid #eeeeee;
  padding:18px 10px 24px 10px;
}

.footer-bottom p{
  width:100%;
  max-width:990px;
  margin:0 auto;
  text-align:left;
  font-size:14px;
  line-height:1.7;
  color:#555555;
  font-weight:300;
}

.footer-bottom a{
  color:#111111;
  text-decoration:none;
}

.footer-bottom a:hover,
.footer-bottom a:focus{
  text-decoration:underline;
}

.footer-sep{
  display:inline-block;
  margin:0 10px;
  color:#bbbbbb;
}

/* =========================
   FOOTER MOBILE
   ========================= */

@media only screen and (max-width: 999px){

  .footer-inner{
    grid-template-columns:1fr 1fr;
  }

}

@media only screen and (max-width: 799px){


  .footer-inner{
    width:90%;
    padding:28px 0 18px 0;
    display:grid;
    grid-template-columns:1fr 1fr;   /* two columns */
    gap:20px;
  }

  /* make intro + portraits span full width */
  .footer-brand,
  .footer-portraits{
    grid-column:1 / -1;
  }

  .footer-title{
    font-size:20px;
  }

  .footer-heading{
    margin-bottom:8px;
  }

  .footer-links li{
    margin-bottom:8px;
  }

  .footer-bottom{
    padding:16px 0 20px 0;
  }

  .footer-bottom p{
    width:90%;
    font-size:13px;
  }

  .footer-sep{
    display:none;
  }

}

}