/* --------------------------------- *\

	Buttons

\* --------------------------------- */
.button {
  height: 4rem;
  line-height: 4rem;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0.5rem;
  width: 100%;
  display: block;
  text-align: center;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  white-space: nowrap;
  color: #ffffff;
  background: #35766b;
}
.button--off {
  cursor: default;
}
.button--inline {
  display: inline-block;
  width: auto;
  padding: 0 4rem;
  min-width: 25rem;
}
.button--border {
  position: relative;
  background: transparent;
  color: #35766b;
}
.button--border:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  left: 0;
}
.button--color-comp {
  background: #414141;
}
.button--color-comp.button--border {
  background: transparent;
  color: #414141;
  box-shadow: none;
}
.button--color-cancel {
  background: #e5e9ec;
  color: #414141;
}
.button--color-text {
  background: #282828;
}
.button--color-text.button--border {
  background: transparent;
  color: #282828;
}
.button--color-white {
  background: #ffffff;
  color: #282828;
}
.button--color-white.button--border {
  background: transparent;
  color: #ffffff;
}
.button--mono {
  font-size: 0.9rem;
  font-weight: bold;
  font-family: monospace;
  letter-spacing: 0;
}
.button--flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button--flex > svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.75rem;
  fill: #282828;
}

@media (pointer: fine) {
  .button:not(.button--off):hover {
    background: #3d9c64;
  }
  .button--color-comp:not(.button--off):hover {
    background: #4e4e4e;
  }
  .button--color-cancel:not(.button--off):hover {
    background: #e1e1e1;
  }
  .button--color-text:not(.button--off):hover {
    background: #624130;
  }
  .button--color-white:not(.button--off):hover {
    background: #f4f4f4;
  }
  .button--border:not(.button--off):hover {
    background: transparent;
    opacity: 0.5;
  }
}
@media (max-width: 1024px) and (orientation: portrait) {
  .button {
    height: 5rem;
    line-height: 5rem;
    font-size: 1.5rem;
  }
}
/* --------------------------------- *\

	Loading animation

	@source https://cssloaders.github.io/

\* --------------------------------- */
.loader {
  width: 60px;
  height: 60px;
  position: relative;
  border: 30px solid #414141;
  border-radius: 50%;
  transform: rotate(45deg);
  animation: pieFill 3s linear infinite;
}

@keyframes pieFill {
  0%, 19% {
    border-color: #414141 #414141 #414141 #414141;
  }
  20%, 39% {
    border-color: #35766b #414141 #414141 #414141;
  }
  40%, 59% {
    border-color: #35766b #35766b #414141 #414141;
  }
  60%, 79% {
    border-color: #35766b #35766b #35766b #414141;
  }
  80%, 100% {
    border-color: #35766b #35766b #35766b #35766b;
  }
}

/*# sourceMappingURL=--4-elements.css.map */