/* ============================ */
/*                              */
/* || VARIABLES */
/* || RESETS */
/* || ERRORS */
/* || FORM PROGRESS */
/* || FORM */
/* || SLIDE */
/* || CARD */
/* || FIELDSET */
/* || LEGEND */
/* || SPAN */
/* || INPUTS */
/* || GROUP */
/* || OPTION */
/* || ACTUAL INPUTS & LABELS - GENERAL */
/* || ACTUAL INPUTS & LABELS - SPECIFIC */
/* || IMAGES */
/* || BUTTONS */
/* || ACTUAL BUTTONS - GENERAL */
/* || ACTUAL BUTTONS - SPECIFIC */
/*                              */
/* ============================ */

/* || VARIABLES */

:root {
  --base-px: 16px;
  --cc-color-black: #000000;
  --cc-color-white: #ffffff;
  --cc-color-grey: #b0b0b0;
  --cc-color-beige: #fcefcb;
  --cc-color-yellow: #fdb713;
  --cc-border-weight: 1px solid rgba(255, 255, 255, 0.4);
  --cc-border-radius: 0.25rem;
  --cc-spacing: 0.5rem;
  --cc-transition: all 300ms ease;
  --cc-height-footer: 5rem;
  --cc-font-size-1: 1rem;
  --cc-font-size-2: 1.5rem;
  --gap: 0.5rem;
}

/* || RESETS */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: 'museo-sans', sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: var(--base-px);
  -webkit-font-smoothing: antialiased;

  color: var(--cc-color-white);
  background-color: #18191B;
  width: 100%;
  overflow: hidden;
}

input,
textarea,
button,
select,
label,
a {
  /* remove grey flash on click (mobile) */
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  width: 100%;
}

/* || NAVIGATION */

.nav {
  position: fixed;
  z-index: 1000;
}

.nav__links li a {
  padding: 0.75rem 0;
  letter-spacing: 1px;
  line-height: 28px;
}

@media only screen and (max-width: 680px) {
  .nav__links li a {
    padding: 0.3rem 0;
  }
}

/* || LOGO */

:root {
  --process-margin: 4px;
  --brand-size: 12vw;
}

.brand {
  display: flex;
  position: fixed;
  border-radius: 50%;
  top: 0;
  z-index: 2;

  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

.brand:hover {
  width: calc(var(--brand-size) + 9.5vw);
  height: calc(var(--brand-size) + 9.5vw);
  border-radius: 30% 100%;
}

.brand,
#upBrand {
  width: var(--brand-size);
  height: var(--brand-size);
  transform-origin: top left;
}

.brand:hover,
#upBrand:hover {
  animation: expand 1s;
  transform: scale(1.2);
}

#upBrand {
  position: absolute;
  transition: none;
  border-radius: 0 0 50%;

  -webkit-animation-name: shimmy;
  animation-name: shimmy;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

@keyframes shimmy {
  92% {
    transform: translate3d(-4px, 0, 0);
  }

  93% {
    transform: translate3d(4px, 0, 0);
  }

  94% {
    transform: translate3d(-3px, 0, 0);
  }

  95% {
    transform: translate3d(3px, 0, 0);
  }

  96% {
    transform: translate3d(-2px, 0, 0);
  }

  97% {
    transform: translate3d(2px, 0, 0);
  }

  98% {
    transform: translate3d(-1px, 0, 0);
  }

  99% {
    transform: translate3d(1px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes expand {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.35);
  }

  40% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(1.3);
  }

  80% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1.2);
  }
}

/* || ERRORS */

.form__errors {
  position: absolute;
  /* position: fixed; */
  bottom: 0;

  /* right: calc(var(--cc-spacing) * 2); */

  display: grid;
  display: -ms-grid;
  justify-items: end;
  gap: var(--cc-spacing);
  width: 100%;
  z-index: 1000;
}

.form__errors .error {
  display: block;
  width: 100%;
  /* font-size: var(--cc-font-size-1); */
  /* color: var(--cc-color-white); */
  text-align: center;

  /* border: var(--cc-border-weight); */
  border-radius: var(--cc-border-radius);

  padding: var(--cc-spacing);
  /* background: none; */

  /* touch-action: manipulation;
  -ms-touch-action: manipulation; */
  animation: errorMsg 3000ms forwards;
  -webkit-animation: errorMsg 3000ms forwards;
}

@-webkit-keyframes errorMsg {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes errorMsg {
  0%,
  100% {
    opacity: 1;
  }
}

/* || FORM PROGRESS */

.form__progress {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);

  display: grid;
  gap: calc(var(--cc-spacing) / 2);

  height: auto;
  padding: 0 var(--cc-spacing);
  z-index: 1;
}

@media only screen and (max-width: 680px) {
  .form__progress {
    padding: 0 calc(var(--cc-spacing) / 1.2);
  }
}

.form__progress__indicator {
  height: 10px;
  width: 10px;
  border: var(--cc-border-weight);
  border-radius: 50%;
  background-color: none;
}

.form__progress__indicator--active {
  background-color: var(--cc-color-yellow);
}

/* || FORM */

.form {
  display: grid;
  place-items: center;

  height: 100vh;
  height: 100svh;
  width: 100vw;
  width: 100svw;
}

/* || SLIDE */

.slide {
  display: none;
  place-items: center;

  height: 100vh;
  height: 100svh;
  width: 100vw;
  width: 100svw;
}

.slide--active {
  display: grid;
}

#slide-get-started .legend {
  display: contents;
}

/* IMAGES */

.slide__image__list {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.slide__image__list__item {
  -o-object-fit: cover;
  object-fit: cover;
  height: 100vh;
  height: 100svh;
  /* opacity: 0.4; */
}

@media only screen and (max-width: 680px) {
  .slide__image__list__item--desktop {
    display: none;
  }
}

@media only screen and (min-width: 681px) {
  .slide__image__list__item--mobile {
    display: none;
  }
}

/* || CARD */

.card {
  position: relative;
  display: flex;
  flex-direction: column;

  height: 75vh;
  height: 75svh;
  width: calc(100vw - (var(--cc-spacing) * 6));
  /* width: calc(100svw - (var(--cc-spacing) * 6)); */
  max-width: 350px;
  z-index: 1;
}

/* || FIELDSET */

.fieldset {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;

  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* scroll bar property: https://inv.tux.pizza/watch?v=mg49F9qUs38 */
  padding: var(--cc-spacing) 0;
  border: none;
}

.fieldset::-webkit-scrollbar {
  display: none;
}

/* || SCROLLBARS */

@media only screen and (max-width: 680px) {
  .inputs {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .inputs::-webkit-scrollbar {
    display: none;
  }
}

@media only screen and (min-width: 680px) {
  .inputs {
    scrollbar-width: calc(var(--spacing) * 2);
    scrollbar-color: var(--cc-color-beige) black;
  }

  .inputs::-webkit-scrollbar {
    width: calc(var(--spacing) * 2);
    background: none;
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
    padding-left: 1rem;
    cursor: pointer;
  }

  .inputs::-webkit-scrollbar-track {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
    cursor: pointer;
  }

  .inputs::-webkit-scrollbar-thumb {
    background: var(--cc-color-beige);
    border-radius: var(--cc-border-radius);
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
    cursor: pointer;
  }
}

/* || LEGEND */

.legend {
  font-size: var(--cc-font-size-2);
  line-height: var(--cc-font-size-2);
  width: 100%;
}

/* || SPAN */

.span {
  font-family: 'Garamond';
  font-style: italic;
  font-weight: 100;
  font-size: var(--cc-font-size-1);
  line-height: var(--cc-font-size-2);
  /* line-height: 1.15rem; */
  color: var(--cc-color-beige);
  display: block;
}

/* || INPUTS */

.inputs {
  display: grid;
  place-items: center;
  gap: var(--cc-spacing);
}

.inputs p {
  font-family: 'Garamond';
  font-style: italic;
  font-weight: 100;
  color: var(--cc-color-grey);
}

#slide-liked-projects .inputs {
  overflow-y: scroll;
}

/* || GROUP */

.group {
  display: grid;
  gap: var(--cc-spacing);
  padding: var(--cc-spacing) 0;
  width: 100%;
}

@media only screen and (min-width: 680px) {
  #slide-liked-projects .group {
    padding-right: var(--cc-spacing);
  }
}

.group.preference {
  display: flex;
  width: 100%;
}

/* || OPTION */

.option {
  /* display: flex; */
  width: 100%;
}

.option__link {
  display: block;
  width: 100%;
  border: var(--cc-border-weight);
  border-radius: calc(var(--cc-spacing) / 2);
  /* background-color: var(--cc-color-black); */
  background-color: transparent;
  padding: var(--cc-spacing);
  outline: none;
  text-align: center;
  cursor: pointer;
}

/* || ACTUAL INPUTS & LABELS - GENERAL */

input[type='tel'],
input[type='text'],
input[type='email'] {
  width: 100%;
  border: var(--cc-border-weight);
  /* background-color: var(--cc-color-black); */
  background-color: transparent;
  padding: 8px;
  outline: none;
  border-radius: 4px;
  color: var(--cc-color-white);
  font-size: 16px;
}

input[type='radio']:checked + label,
input[type='checkbox']:checked + label {
  background-color: var(--cc-color-yellow);
  color: var(--cc-color-black);
}

input::placeholder {
  font-family: 'museo-sans', sans-serif;
  font-style: normal;
  font-weight: 900;
  color: var(--cc-color-grey);
  font-size: var(--base-px);
  opacity: 0.5;
}

input[type='range'],
input[type='range']:focus,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  outline: none;
}

input[type='range'] {
  margin: 0;
  padding: 1.5rem 0;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  font: 1em/1 arial, sans-serif;
}

/* || RANGE - TRACK */

input[type='range']::-webkit-slider-runnable-track {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: var(--cc-color-white);
  width: 100%;
  height: 0.25rem;
  border: none;
  border-radius: var(--cc-border-radius);
  outline: none;
}

input[type='range']::-moz-range-track {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: var(--cc-color-white);
  width: 100%;
  height: 0.25rem;
  border: none;
  border-radius: var(--cc-border-radius);
  outline: none;
}

input[type='range']::-ms-track {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: var(--cc-color-white);
  width: 100%;
  height: 0.25rem;
  border: none;
  border-radius: var(--cc-border-radius);
  outline: none;
}

/* || RANGE - THUMB */

input[type='range']::-webkit-slider-thumb {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: none;
  border-radius: 50%;
  background: var(--cc-color-yellow);
  width: 2rem;
  height: 2rem;
  margin-top: -0.99rem;
  outline: none;
  cursor: pointer;
}

input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: none;
  border-radius: 50%;
  background: var(--cc-color-yellow);
  width: 2rem;
  height: 2rem;
  margin-top: -0.99rem;
  outline: none;
  cursor: pointer;
}

input[type='range']::-ms-thumb {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: none;
  border-radius: 50%;
  background: var(--cc-color-yellow);
  width: 2rem;
  height: 2rem;
  margin-top: -0.99rem;
  outline: none;
  cursor: pointer;
}

/* || RANGE - TOOLTIP */

input[type='range']::-ms-tooltip {
  display: none;
}

label {
  display: block;
  width: 100%;
  border: var(--cc-border-weight);
  border-radius: calc(var(--cc-spacing) / 2);
  /* background-color: var(--cc-color-black); */
  background-color: transparent;
  padding: var(--cc-spacing);
  outline: none;
  text-align: center;
  cursor: pointer;
}

/* || ACTUAL INPUTS & LABELS - SPECIFIC */

/* .lead .option input {
  text-align: center;
} */

/* #lead-referral,
#lead-other {
  text-align: center;
  color: var(--cc-color-black);
}

.lead--active,
.lead--active::placeholder {
  background-color: var(--cc-color-yellow) !important;
  color: var(--cc-color-black) !important;
  opacity: 1 !important;
} */

/* || ACTUAL OUTPUTS - GENERAL */

output {
  color: var(--cc-color-yellow);
}

/* || IMAGES */

.project-image {
  height: 200px;
}

.project-image img {
  height: 100%;
  object-fit: cover;
  /* opacity: 0.7; */
}

/* || BUTTONS */

.buttons {
  display: flex;
  gap: var(--cc-spacing);
  text-align: center;
}

/* || ACTUAL BUTTONS - GENERAL */

button {
  font-family: 'museo-sans', sans-serif;
  font-style: normal;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  font-size: var(--cc-font-size-1);
  color: var(--cc-color-black);
  background-color: var(--cc-color-beige);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cc-spacing);
  border: none;
  border-radius: var(--cc-border-radius);
  outline: none;
  cursor: pointer;
}

/* || ACTUAL BUTTONS - SPECIFIC */

.start,
.next,
.submit {
  flex: 1;
}

.next,
.submit {
  background-color: var(--cc-color-grey);
}

.valid {
  background-color: var(--cc-color-beige) !important;
}

/* GOOGLE DROP-DOWN */

.pac-container {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: none !important;
  background-color: transparent !important;
}
.pac-logo:after {
  display: none !important;
}
.pac-item {
  padding: calc(var(--gap) / 2) !important;
  background-color: transparent !important;
  border-top: none !important;
  cursor: pointer !important;
  font-family: 'Garamond' !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--cc-color-grey) !important;
  font-size: 16px !important;
}
.pac-item:hover {
  background-color: var(--cc-color-yellow) !important;
  color: var(--cc-color-black) !important;
}
.pac-item-selected,
.pac-item-selected:hover {
  color: var(--cc-color-black) !important;
}

.pac-item-query {
  color: var(--cc-color-white) !important;
  font-size: var(--base-px);
  padding-right: var(--cc-spacing) !important;
  font-family: 'museo-sans', sans-serif !important;
  font-style: normal !important;
}
.pac-item:hover .pac-item-query {
  color: var(--cc-color-black) !important;
}
.pac-icon {
  margin-right: var(--cc-spacing) !important;
}

/* SCROLL INDICATION */

.scroll-indication {
  position: absolute;
  color: var(--cc-color-yellow);
  bottom: 5%;
  left: 50%;
  /* width: 4rem; */
  transform: translate(-50%, -100%);
  z-index: 2;
}

.scroll-indication i {
  font-size: 2rem;
}