/* SOCIAL */
.social {
  display: flex;
  text-align: center;
  justify-content: center;
  gap: 16px;
  align-items: center;
  font-size: 29px;
  margin-bottom: 20px;
}
.social .fb {
  -webkit-mask: url("/images/_icons/social-facebook-circle.svg") no-repeat 50% 50%;
  mask: url("/images/_icons/social-facebook-circle.svg") no-repeat 50% 50%; }
.social .ig {
  -webkit-mask: url("/images/_icons/social-instagram.svg") no-repeat 50% 50%;
  mask: url("/images/_icons/social-instagram.svg") no-repeat 50% 50%; }
.social .tw {
  -webkit-mask: url("/images/_icons/social-x.svg") no-repeat 50% 50%;
  mask: url("/images/_icons/social-x.svg") no-repeat 50% 50%; }
.social .yt {
  -webkit-mask: url("/images/_icons/social-youtube.svg") no-repeat 50% 50%;
  mask: url("/images/_icons/social-youtube.svg") no-repeat 50% 50%; }
.social .tt {
  -webkit-mask: url("/images/_icons/social-tiktok.svg") no-repeat 50% 50%;
  mask: url("/images/_icons/social-tiktok.svg") no-repeat 50% 50%; }
  .social .threads {
  -webkit-mask: url("/images/_icons/social-threads.svg") no-repeat 50% 50%;
  mask: url("/images/_icons/social-threads.svg") no-repeat 50% 50%; }
.social a div {
  height: 1em;
  width: 1em;
  background-color: var(--color2);
  -webkit-mask-size: cover;
  mask-size: cover;
}
.social a:hover div {
  background-color: var(--color1);
}

@media (min-width: 768px) {
  .social {
    justify-content: flex-start;
  }
}


/*----------------------------
PAGE STYLES
-----------------------------*/


/* HOME */
.logo-container {
  position: relative;
  display: block;
  text-align: center;
  width: 60vw;
  max-width: 300px;
  padding: 0;
  overflow: hidden;
}
.logo-container span {
	width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.logo-container img {
  position: relative;
}