/**
 * Virtual Aesthetics Consultation Styles
 */

.vac__contact {
  text-align: center;
  max-width: 30em;
  margin: 0 auto 5em auto;
}

.vac__contact-form {
  display: block;
  max-width: 15em;
  margin: 0 auto;
}

.vac__contact-form input {
  width: 100%;
  padding: 1px 15px;
}

.vac__contact-form input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #494949;
  color: white;
  border: none;
  line-height: inherit;
}

.vac__contact-form input[type="submit"]:hover {
  background-color: black;
  color: white;
}

.vac__contact-form .gfield_label {
  display: block;
  text-align: left;
  margin-bottom: 0;
}

.vac__contact-form .gfield_description, .vac__contact-form .validation_message, .vac__contact .validation_error {
  font-size: 0.75em;
}

.vac__contact-form .gfield_description, .vac__contact-form .validation_message {
  text-align: left;
}

.vac__contact-form .gfield_label .gfield_required {
  display: none;
}

.vac {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 2.5em 0;
  font-size: 18px;
  back
}

.vac__results {
  position: relative;
  padding: 2.5em 0;
  font-size: 18px;
}

.vac::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX( -50% );
  width: 0.5em;
  background-color: #999999;
}

.vac svg {
  display: block;
}

.vac__content, .vac__forms {
  flex: 0 0 auto;
  width: calc( 50% - 2.5em );
  max-width: calc( 50% - 2.5em );
}

.vac__content {
  text-align: center;
  margin-right: 2.5em;
}

.vac__content__wrapper {
  max-width: 25em;
  margin: 0 auto;
  font-size: 0.75em;
}

.vac__content__title {
  position: relative;
  font-size: 2em;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

.vac__content__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate( -50%, 50% );
  width: 4em;
  height: 0.15em;
  background-color: #999999;
}

.vac__forms {
  margin-left: 2.5em;
  padding-bottom: 2.5em;
}

.vac__background {
  display: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.vac__background.active {
  display: block;
}

.vac__background svg {

}

.vac__button {
  display: inline-block;
  flex: 0 0 auto;
  cursor: hand;
  cursor: pointer;
  padding: 0.5em 0.75em;
  background-color: #494949;
  color: white;
  border: 0;
  border-radius: 0;
  font-size: 0.75em;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.vac__submit {
  margin-top: 1em;
  font-size: calc( 1em / 0.75 );
}

.vac__button:hover, .vac__button:active, .vac__button:focus {
  background-color: black;
  transition: all 0.15s ease-in-out;
}

.svg-opacity {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  fill: #2af4cd;
  cursor: pointer;
}

.svg-opacity.hover {
  opacity: 0.5;
  transition: opacity 0.25s ease-in-out;
  cursor: hand;
  cursor: pointer;
}

.svg-opacity.svg-opacity--none.hover {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  cursor: hand;
  cursor: pointer;
}

.svg-text {
  opacity: 1;
  fill: transparent;
}

.svg-text path {
  fill: black;
}

.svg-text.hover {
  opacity: 1;
  cursor: hand;
  cursor: pointer;
}

.svg-text.hover path {
  fill: red;
}

.vac__nav {
  position: absolute;
  pointer-events: none;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
  width: calc( 50% - 2.5em );
  max-width: calc( 50% - 2.5em );
}

.vac__nav--left {
  justify-content: flex-start;
}

.vac__nav__item {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.25em 0.5em;
  margin: 0;
  cursor: hand;
  cursor: pointer;
  pointer-events: all;
  transition: all 0.15s ease-in-out;
}

.vac__nav__item:hover {
  background-color: #999999;
  color: white;
}

.vac__nav__item.active {
  background-color: #494949;
  color: white;
}

.vac__form-popup {
  position: absolute;
  z-index: 10;
  top: 55%;
  left: 50%;
  transform: translate( -50%, -50% );
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 35em;
  padding: 1em 2em;
  background-color: white;
  font-size: 1em;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, top 0.15s 0.1s ease, visibility 0.15s 0.1s ease;
}

.vac__form-popup.active {
  z-index: 11;
  top: 50%;
  box-shadow: 0 0 3em -0.5em #494949;
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity 0.35s 0.15s ease, top 0.25s 0.25s ease;
}

.vac__form-popup__back {

}

.vac__form-popup__exit {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 1em;
  width: 1em;
  color: white;
  text-align: center;
  background-color: #494949;
  line-height: 1;
  cursor: hand;
  cursor: pointer;
}

.vac__form-popup__exit:hover {
  background-color: black;
}

.vac__form-popup__title {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.vac__form-popup__text {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1em;
  text-align: center;
  font-size: 0.9em;
  color: #999999;
}

.vac__form-group {
  margin-bottom: 0.5em;
}

.vac__form-group--checkbox {
  display: flex;
  flex: 0 0 auto;
  width: 50%;
  align-items: center;
  white-space: nowrap;
}

.vac__form-group--checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: 0;
  visibility: hidden;
}

.vac__form-group--checkbox label {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
  line-height: 1;
  cursor: hand;
  cursor: pointer;
  font-weight: normal;
}

.vac__form-group--checkbox label::before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 50%;
  transform: translateY( -50% );
  visibility: visible;
  background-color: transparent;
  width: 1em;
  height: 1em;
  border: 2px solid #494949;
}

.vac__form-group--checkbox label::after {
  content: "";
  position: absolute;
  left: -1.6em;
  top: 34%;
  transform: translate( 25%, -50% ) rotate( -45deg );
  visibility: visible;
  background-color: transparent;
  border: 4px solid #494949;
  border-top: 0;
  border-right: 0;
  width: 1em;
  height: 0.5em;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.vac__form-group--checkbox input[type="checkbox"]:checked + label::after {
  opacity: 1;
  border-color: black;
}

.vac__form-group--checkbox input[type="checkbox"]:checked + label::before {
  border-color: black;
}

.vac__form-group--checkbox input[type="checkbox"]:checked + label {
  color: black;
}

.vac__form-group--buttons {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 1em;
}

h1.vac__results__title {
  font-size: 2em;
  text-align: center;
  margin: 0 0 0.5em 0;
}

h2.vac__results__title {
  font-size: 1.75em;
  margin: 1em 0 0.5em 0;
  background-color: #494949;
  color: white;
  padding: 0.25em;
}

.vac__results__title__flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

h3.vac__results__title {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 1.5em;
  margin: 0.5em 1em 0.5em 0;
}

h4.vac__results__title {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  font-size: 1.25em;
  margin: 0 0 0.5em 0;
  font-weight: bold;
}

h5.vac__results__title {
  font-size: 1.15em;
  margin: 0;
  color: #999999;
}

.vac__results__subtext {
  text-align: center;
}

.vac__results__subtitle {
  text-align: center;
  font-size: 1.25em;
}

.vac__results__subtitle span {
  font-weight: bold;
}

.vac__results__title--matches {
  display: none;
  font-size: 0.75em;
  color: #999999;
}

.vac__results__content {
  margin: 1em 0;
}

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

.vac__results__treatment-list li {
  padding: 0 0 0 0.25em;
  margin: 0;
  font-size: 0.9em;
  display: block;
  color: #999999;
}

.vac__results__button {
  flex: 0 0 auto;
  display: inline-block;
  background-color: #494949;
  color: white;
  padding: 0.15em 1em;
  font-size: initial;
  font-weight: initial
}

.vac__results__button:hover, .vac__results__button:active, .vac__results__button:focus {
  background-color: black;
  color: white;
  text-decoration: none;
}

.vac__results__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.vac__results__group {
  flex: 0 0 auto;
  min-width: 25%;
  margin-bottom: 0.75em;
}

.vac__results__result {
  margin: 2em 0;
}

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

  .vac {
    padding: 1em 0;
  }
}

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

  .vac::after {
    display: none;
  }

  .vac__content, .vac__forms {
    width: 100%;
    max-width: 100%;
  }

  .vac__nav {
    width: 100%;
    max-width: 100%;
  }

  .vac__content {
    margin-right: 0;
  }

  .vac__forms {
    position: relative;
    margin-left: 0;
  }

  .vac__form-popup {
    font-size: 0.9em;
  }
}

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

  .vac__form-popup {
    font-size: initial;
  }

  .vac__form-group--checkbox {
    width: 100%;
    font-size: 1.25em;
  }

  .vac__button {
    margin: 0.25em 0;
    width: 100%;
    max-width: 100%;
    font-size: 1em;
    text-align: center;
  }

  .vac__form-group--buttons {
    flex-wrap: wrap;
  }
}

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

  .vac__form-popup {
    font-size: 0.75em;
  }
}