/* ---------------------------------------------------------------------- */
/* -------------------------------------------------- Mixins */
/*
<div class="progress-circle p{VALUE_OF_PROGRESS} {if VALUE_OF_PROGRESS > 50}over50{/if}">
	<span>{VALUE_OF_PROGRESS}%</span>
	<div class="left-half-clipper">
		<div class="first50-bar"></div>
		<div class="value-bar"></div>
	</div>
</div>
*/
/* ---------------------------------------------------------------------- */
/* -------------------------------------------------- Footer */
.footer {
  margin-top: 30px;
}
@media (min-width: 768px) {
  .footer {
    margin-top: 60px;
  }
}
.footer__top {
  background-color: var(--hl-primary);
}
.footer__boxes {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 0 auto;
  max-width: 1110px;
  padding: 15px;
}
.footer__box {
  display: flex;
  flex-direction: column;
}
.footer__box p {
  margin-bottom: 10px;
}
.footer__box span {
  font-family: var(--roboto);
  font-size: 14px;
  margin-bottom: 5px;
}
.footer__box a {
  color: var(--hl-white);
  font-family: var(--roboto);
  font-size: 16px;
  font-weight: 400;
}
.footer__bottom {
  background-color: var(--hl-sea);
  display: flex;
  height: 60px;
  justify-content: center;
}
.footer__socials {
  align-items: center;
  display: flex;
  height: 100%;
}
.footer__socials span {
  color: var(--hl-white);
  font-family: var(--roboto);
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
}
.footer__socials a {
  margin-right: 10px;
}
.footer__socials i {
  color: var(--hl-white);
  font-size: 24px;
}
.footer__title {
  cursor: default;
  font-size: 20px !important;
  font-weight: 800 !important;
}
/*# sourceMappingURL=footer.css.map */