:root {
  --primary-color: #1D2225;
  --purple: #765C8C;
}

body {
  font-family: 'Open Sans', sans-serif;
}

/* .purple-candy {
  color: var(--primary-color);
}

.bg-purple-candy {
  background: var(--primary-color);
} */

.purple-candy {
  color: #1D2225;
}

.bg-purple-candy {
  background: #1D2225;
}


.orange-candy {
  color: #DB553C;
}

.bg-orange-candy {
  background: #DB553C;
}

header a {
  font-size: 22px;
  font-weight: 300;
}

select {
  color: var(--primary-color);
}

.tag-line {
  color: var(--primary-color);
}

.mobile-image-holder {
  position: relative;
}

.mobile-image-holder .img {
  position: absolute;
  right: 10px;
  top: -25px;
  background: url('/assets/images/headcandy_tattoo.jpg') no-repeat;
  background-size: cover;
  background-position: center 28%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 90%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 90%);
}

#about {
  position: relative;
}

.about-overlay {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 50px;
  left: 0;

  z-index: -1;

  background: url('/assets/images/background-dark.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

#about .image-holder {
  margin-right: auto;
}

#about .image-holder .img {
  background: url('/assets/images/headcandy_tattoo.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 50%;
  width: 512px;
  height: 512px;
}

#service_list {
  background: url('/assets/images/background-dark.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

#appointments {
  border-top: 1px solid var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
}

#location .map-holder {
  border-color: var(--primary-color);
}

#location img {
  align-self: flex-start;
}

footer {
  border-top: 1px solid var(--primary-color);
}

.Hero__content-cta {
  background: var(--primary-color);
  color: white;
  text-decoration: none;
}