@charset "UTF-8";
@font-face {
  font-display:swap;
  font-family:Aeonik;
  font-style:normal;
  font-weight:400;
  src:url(../fonts/Aeonik-Regular.woff2) format("woff2"),
  url(../fonts/Aeonik-Regular.woff) format("woff")
}
:root {
  --curve: 20;
}

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

ul, ol, dl {
  padding: 0;
  margin: 15px 0 10px 25px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  font-family: 'Aeonik', sans-serif;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  box-sizing: inherit;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

img, video, svg {
  max-width: 100%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, div {
  display: block;
}

a {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  text-decoration: none;
  background-color: transparent;
}

a:active, a:hover {
  outline: 0;
}

@media screen and (min-width: 1920px) {
  body {
    min-height: auto;
    transition: opacity 200ms ease;
    text-align: left;
  }
}
body {
  display: block;
  overflow: visible;
  margin: 0;
  padding: 0;
  height: 100vh;
  min-height: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: justify;
  font-size: 14px;
  line-height: 20px;
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
h1, h2, h3, h4, h5 {
  font-weight: bold;
  line-height: 1.5em;
  margin-top: 1em;
  margin-bottom: 2rem;
}

sup {
  vertical-align: super;
  font-size: xx-large;
}

::-moz-selection {
  color: white;
  background: hsl(240deg, 92%, 51%);
}

::selection {
  color: white;
  background: hsl(240deg, 92%, 51%);
}

@media (min-width: 0) {
  .responsive-test {
    color: red;
  }
}
@media (min-width: 480px) {
  .responsive-test {
    color: #1b75bc;
  }
}
@media (min-width: 720px) {
  .responsive-test {
    color: green;
  }
}
@media (min-width: 960px) {
  .responsive-test {
    color: purple;
  }
}
@media (min-width: 1200px) {
  .responsive-test {
    color: orange;
  }
}
@media (min-width: 1400px) {
  .responsive-test {
    color: pink;
  }
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.gap-0 > * {
  padding: 0;
}

.gap-0 {
  margin-left: 0;
  margin-right: 0;
}

.gap-1 > * {
  padding: 10px;
}

.gap-1 {
  margin-left: -10px;
  margin-right: -10px;
}

.gap-2 > * {
  padding: 20px;
}

.gap-2 {
  margin-left: -20px;
  margin-right: -20px;
}

.gap-3 > * {
  padding: 30px;
}

.gap-3 {
  margin-left: -30px;
  margin-right: -30px;
}

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

.justify-flex-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-space-around {
  justify-content: space-around;
}

@media (min-width: 0) {
  .col-xs-1 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-xs-2 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-xs-3 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-xs-4 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-xs-5 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-xs-6 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-xs-7 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-xs-8 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-xs-9 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-xs-10 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-xs-11 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-xs-12 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 480px) {
  .col-sm-1 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-sm-4 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-sm-7 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-sm-10 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 720px) {
  .col-md-1 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-md-2 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-md-3 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-md-4 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-md-5 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-md-6 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-md-7 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-md-8 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-md-9 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-md-10 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-md-11 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-md-12 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 960px) {
  .col-lg-1 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-lg-4 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-lg-7 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-lg-10 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl-1 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-xl-4 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-xl-7 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-xl-10 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
body {
  font-size: 18px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1rem 0 1.38rem;
  font-weight: 700;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: clamp(3rem, 1rem + 5vw, 5rem);
}

h2 {
  font-size: clamp(2.5rem, 1rem + 4.5vw, 4rem);
}

h3 {
  font-size: clamp(2rem, 1rem + 4vw, 3rem);
}

h4 {
  font-size: clamp(1.5rem, 1rem + 3.5vw, 2rem);
}

h5 {
  font-size: 1.5rem;
}

p {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  font-weight: normal;
  line-height: 1.5em;
  margin-top: 0;
  margin-bottom: 1.2rem;
}

ul > li, ol > li, dl > dt {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}

small {
  font-size: 1rem;
}

a.before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  right: 0;
  background-color: #FFF;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a:hover:before {
  visibility: visible;
  width: 100%;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.font-thin {
  font-weight: 100;
}

.font-regular {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-black {
  font-weight: 900;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-normal {
  text-transform: none;
}

.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.overline {
  -webkit-text-decoration-line: overline;
          text-decoration-line: overline;
}

.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}

.no-underline {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.underline-offset-auto {
  text-underline-offset: auto;
}

.underline-offset-1 {
  text-underline-offset: 2px;
}

.underline-offset-2 {
  text-underline-offset: 4px;
}

.underline-offset-3 {
  text-underline-offset: 6px;
}

.underline-offset-4 {
  text-underline-offset: 8px;
}

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.letter-spacing-xsmall {
  letter-spacing: -0.05em;
}

.letter-spacing-small {
  letter-spacing: -0.025em;
}

.letter-spacing-normal {
  letter-spacing: 0;
}

.letter-spacing-medium {
  letter-spacing: 0.025em;
}

.letter-spacing-large {
  letter-spacing: 0.05em;
}

.letter-spacing-xlarge {
  letter-spacing: 0.1em;
}

.normal-nums {
  font-variant-numeric: normal;
}

.ordinal {
  font-variant-numeric: ordinal;
}

.slashed-zero {
  font-variant-numeric: slashed-zero;
}

.lining-nums {
  font-variant-numeric: lining-nums;
}

.oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}

.proportional-nums {
  font-variant-numeric: proportional-nums;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.diagonal-fractions {
  font-variant-numeric: diagonal-fractions;
}

.stacked-fractions {
  font-variant-numeric: stacked-fractions;
}

.text-error {
  color: hsl(357deg, 47%, 48%);
}

.text-hover-error:hover {
  color: hsl(357deg, 47%, 48%);
}

.bg-error {
  background-color: hsl(357deg, 47%, 48%);
}

.text-info {
  color: hsl(41deg, 99%, 71%);
}

.text-hover-info:hover {
  color: hsl(41deg, 99%, 71%);
}

.bg-info {
  background-color: hsl(41deg, 99%, 71%);
}

.text-success {
  color: hsl(141deg, 50%, 35%);
}

.text-hover-success:hover {
  color: hsl(141deg, 50%, 35%);
}

.bg-success {
  background-color: hsl(141deg, 50%, 35%);
}

.text-red {
  color: hsl(3deg, 80%, 58%);
}

.text-hover-red:hover {
  color: hsl(3deg, 80%, 58%);
}

.bg-red {
  background-color: hsl(3deg, 80%, 58%);
}

.text-blue {
  color: #1b75bc;
}

.text-hover-blue:hover {
  color: #12497c;
}

.bg-blue {
  background-color: #1b75bc;
}

.text-blue-light-1 {
  color: #3f3ff7;
}

.bg-blue-light-1 {
  background-color: #3f3ff7;
}

.text-blue-light-2 {
  color: #6f6ff9;
}

.bg-blue-light-2 {
  background-color: #6f6ff9;
}

.text-blue-light-3 {
  color: #9f9ffb;
}

.bg-blue-light-3 {
  background-color: #9f9ffb;
}

.text-blue-light-4 {
  color: #cfcffd;
}

.bg-blue-light-4 {
  background-color: #cfcffd;
}

.text-green {
  color: hsl(143deg, 92%, 54%);
}

.text-hover-green:hover {
  color: hsl(143deg, 92%, 54%);
}

.bg-green {
  background-color: hsl(143deg, 92%, 54%);
}

.text-orange {
  color: hsl(29deg, 97%, 54%);
}

.text-hover-orange:hover {
  color: hsl(29deg, 97%, 54%);
}

.bg-orange {
  background-color: hsl(29deg, 97%, 54%);
}

.text-dark {
  color: hsl(0deg, 0%, 18%);
}

.text-hover-dark:hover {
  color: hsl(0deg, 0%, 18%);
}

.bg-dark {
  background-color: hsl(0deg, 0%, 18%);
}

.text-gray {
  color: #6d6d6d;
}

.text-hover-gray:hover {
  color: #6d6d6d;
}

.bg-gray {
  background-color: #6d6d6d;
}

.text-graylight {
  color: whitesmoke;
}

.text-hover-graylight:hover {
  color: whitesmoke;
}

.bg-graylight {
  background-color: whitesmoke;
}

.text-white {
  color: hsl(0deg, 0%, 99%);
}

.text-hover-white:hover {
  color: hsl(0deg, 0%, 99%);
}

.bg-white {
  background-color: hsl(0deg, 0%, 99%);
}

.text-formcolor {
  color: hsl(0deg, 0%, 18%);
}

.text-hover-formcolor:hover {
  color: hsl(0deg, 0%, 18%);
}

.bg-formcolor {
  background-color: hsl(0deg, 0%, 18%);
}

details {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid whitesmoke;
  transition: all 1s;
}
details.no-border {
  border-bottom: none;
}
details:not([open]) summary ~ * {
  -webkit-animation-name: sweep-out;
          animation-name: sweep-out;
  -webkit-animation-duration: 0.5s ease-in-out;
          animation-duration: 0.5s ease-in-out;
}
details[open] summary ~ * {
  -webkit-animation: sweep 0.5s ease-in-out;
          animation: sweep 0.5s ease-in-out;
}
details[open] summary:after {
  content: "▾";
  font-size: 1.2rem;
}
details summary {
  position: relative;
  cursor: pointer;
  font-size: 24px;
  font-weight: 600;
  outline: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary:after {
  content: "▸";
  font-size: 1.2rem;
  float: right;
  padding: 0 2rem 0 0;
  transition: all 1s linear;
}
details summary.summary--info {
  color: hsl(220deg, 92%, 51%);
}
details summary.summary--error {
  color: hsl(357deg, 47%, 48%);
}
details summary.summary--warning {
  color: hsl(29deg, 97%, 54%);
}
details summary.summary--success {
  color: hsl(141deg, 50%, 35%);
}
details p {
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 2rem 1rem 0;
}

@-webkit-keyframes sweep {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes sweep-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
  }
}
@keyframes sweep-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
  }
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin: 4rem 5vw;
  padding: 0;
  list-style-type: none;
}

.card {
  position: relative;
  display: block;
  height: 100%;
  padding: 1rem;
  border: 1px solid whitesmoke;
  border-radius: calc(var(--curve) * 1px);
  overflow: hidden;
  text-decoration: none;
}

.card__image {
  width: 100%;
  height: auto;
}

.card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border-radius: calc(var(--curve) * 1px);
  background-color: hsl(0deg, 0%, 99%);
  transform: translateY(100%);
  transition: 0.2s ease-in-out;
}

.card:hover .card__overlay {
  transform: translateY(0);
}

.card__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2em;
  padding: 2em;
  border-radius: calc(var(--curve) * 1px) 0 0 0;
  background-color: hsl(0deg, 0%, 99%);
  transform: translateY(-100%);
  transition: 0.2s ease-in-out;
}

.card__arc {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: 1;
}

.card__arc path {
  fill: hsl(0deg, 0%, 99%);
  d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}

.card:hover .card__header {
  transform: translateY(0);
}

.card__thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.card__title {
  font-size: 1em;
  margin: 0 0 0.3em;
  color: hsl(240deg, 92%, 51%);
}

.card__tagline {
  display: block;
  margin: 1em 0;
  font-size: 0.8em;
  color: hsl(0deg, 0%, 18%);
}

.card__status {
  font-size: 0.8em;
  color: hsl(0deg, 0%, 18%);
}

.card__description {
  padding: 0 2em 2em;
  margin: 0;
  color: hsl(0deg, 0%, 18%);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.btn-error {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(357deg, 47%, 48%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-error:hover {
  background-color: #cd7479;
}

.btn-outlined-error {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(357deg, 47%, 48%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(357deg, 47%, 48%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-error:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(357deg, 47%, 48%);
  border-radius: 1.625rem;
  background-color: hsl(357deg, 47%, 48%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-error {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-error.option-error {
  width: 12rem;
  height: auto;
}
.option-error.option-error .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(357deg, 47%, 48%);
  border-radius: 1.625rem;
}
.option-error.option-error .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-error.option-error .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-error.option-error .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-error.option-error .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(357deg, 47%, 48%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-error:hover .circle {
  width: 100%;
}
.option-error:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-error:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-error {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(357deg, 47%, 48%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-error:focus, .action-error:hover {
  background-color: hsl(357deg, 47%, 48%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(357deg, 47%, 48%);
}
.action-error:active {
  background-color: hsl(357deg, 47%, 48%);
  box-shadow: 0 0 0 0.1875rem hsl(357deg, 47%, 48%), 0 0 0 0.375rem hsl(357deg, 47%, 48%);
  transition-duration: 75ms;
}
.action-error span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-error span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-error:hover span:hover {
  padding-right: 25px;
}
.action-error:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-info {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(41deg, 99%, 71%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-info:hover {
  background-color: #ffe8b8;
}

.btn-outlined-info {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(41deg, 99%, 71%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(41deg, 99%, 71%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-info:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(41deg, 99%, 71%);
  border-radius: 1.625rem;
  background-color: hsl(41deg, 99%, 71%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-info {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-info.option-info {
  width: 12rem;
  height: auto;
}
.option-info.option-info .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(41deg, 99%, 71%);
  border-radius: 1.625rem;
}
.option-info.option-info .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-info.option-info .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-info.option-info .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-info.option-info .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(41deg, 99%, 71%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-info:hover .circle {
  width: 100%;
}
.option-info:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-info:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-info {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(41deg, 99%, 71%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-info:focus, .action-info:hover {
  background-color: hsl(41deg, 99%, 71%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(41deg, 99%, 71%);
}
.action-info:active {
  background-color: hsl(41deg, 99%, 71%);
  box-shadow: 0 0 0 0.1875rem hsl(41deg, 99%, 71%), 0 0 0 0.375rem hsl(41deg, 99%, 71%);
  transition-duration: 75ms;
}
.action-info span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-info span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-info:hover span:hover {
  padding-right: 25px;
}
.action-info:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-success {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(141deg, 50%, 35%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-success:hover {
  background-color: #40bf6c;
}

.btn-outlined-success {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(141deg, 50%, 35%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(141deg, 50%, 35%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-success:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(141deg, 50%, 35%);
  border-radius: 1.625rem;
  background-color: hsl(141deg, 50%, 35%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-success {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-success.option-success {
  width: 12rem;
  height: auto;
}
.option-success.option-success .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(141deg, 50%, 35%);
  border-radius: 1.625rem;
}
.option-success.option-success .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-success.option-success .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-success.option-success .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-success.option-success .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(141deg, 50%, 35%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-success:hover .circle {
  width: 100%;
}
.option-success:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-success:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-success {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(141deg, 50%, 35%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-success:focus, .action-success:hover {
  background-color: hsl(141deg, 50%, 35%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(141deg, 50%, 35%);
}
.action-success:active {
  background-color: hsl(141deg, 50%, 35%);
  box-shadow: 0 0 0 0.1875rem hsl(141deg, 50%, 35%), 0 0 0 0.375rem hsl(141deg, 50%, 35%);
  transition-duration: 75ms;
}
.action-success span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-success span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-success:hover span:hover {
  padding-right: 25px;
}
.action-success:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-red {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(3deg, 80%, 58%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-red:hover {
  background-color: #f18983;
}

.btn-outlined-red {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(3deg, 80%, 58%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(3deg, 80%, 58%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-red:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(3deg, 80%, 58%);
  border-radius: 1.625rem;
  background-color: hsl(3deg, 80%, 58%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-red {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-red.option-red {
  width: 12rem;
  height: auto;
}
.option-red.option-red .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(3deg, 80%, 58%);
  border-radius: 1.625rem;
}
.option-red.option-red .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-red.option-red .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-red.option-red .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-red.option-red .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(3deg, 80%, 58%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-red:hover .circle {
  width: 100%;
}
.option-red:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-red:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-red {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(3deg, 80%, 58%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-red:focus, .action-red:hover {
  background-color: hsl(3deg, 80%, 58%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(3deg, 80%, 58%);
}
.action-red:active {
  background-color: hsl(3deg, 80%, 58%);
  box-shadow: 0 0 0 0.1875rem hsl(3deg, 80%, 58%), 0 0 0 0.375rem hsl(3deg, 80%, 58%);
  transition-duration: 75ms;
}
.action-red span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-red span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-red:hover span:hover {
  padding-right: 25px;
}
.action-red:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-blue {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(240deg, 92%, 51%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-blue:hover {
  background-color: #5959f8;
}

.btn-outlined-blue {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #1b75bc;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: #1b75bc;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-blue:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #1b75bc;
  border-radius: 1.625rem;
  background-color: #1b75bc;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-blue {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-blue.option-blue {
  width: 12rem;
  height: auto;
}
.option-blue.option-blue .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #1b75bc;
  border-radius: 1.625rem;
}
.option-blue.option-blue .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-blue.option-blue .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-blue.option-blue .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-blue.option-blue .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #1b75bc;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-blue:hover .circle {
  width: 100%;
}
.option-blue:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-blue:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-blue {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: #1b75bc;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-blue:focus, .action-blue:hover {
  background-color: #1b75bc;
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem #1b75bc;
}
.action-blue:active {
  background-color: #1b75bc;
  box-shadow: 0 0 0 0.1875rem #1b75bc, 0 0 0 0.375rem #1b75bc;
  transition-duration: 75ms;
}
.action-blue span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-blue span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-blue:hover span:hover {
  padding-right: 25px;
}
.action-blue:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-green {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(143deg, 92%, 54%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-green:hover {
  background-color: #67f99f;
}

.btn-outlined-green {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(143deg, 92%, 54%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(143deg, 92%, 54%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-green:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(143deg, 92%, 54%);
  border-radius: 1.625rem;
  background-color: hsl(143deg, 92%, 54%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-green {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-green.option-green {
  width: 12rem;
  height: auto;
}
.option-green.option-green .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(143deg, 92%, 54%);
  border-radius: 1.625rem;
}
.option-green.option-green .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-green.option-green .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-green.option-green .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-green.option-green .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(143deg, 92%, 54%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-green:hover .circle {
  width: 100%;
}
.option-green:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-green:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-green {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(143deg, 92%, 54%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-green:focus, .action-green:hover {
  background-color: hsl(143deg, 92%, 54%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(143deg, 92%, 54%);
}
.action-green:active {
  background-color: hsl(143deg, 92%, 54%);
  box-shadow: 0 0 0 0.1875rem hsl(143deg, 92%, 54%), 0 0 0 0.375rem hsl(143deg, 92%, 54%);
  transition-duration: 75ms;
}
.action-green span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-green span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-green:hover span:hover {
  padding-right: 25px;
}
.action-green:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-orange {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(29deg, 97%, 54%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-orange:hover {
  background-color: #fdad63;
}

.btn-outlined-orange {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(29deg, 97%, 54%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(29deg, 97%, 54%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-orange:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(29deg, 97%, 54%);
  border-radius: 1.625rem;
  background-color: hsl(29deg, 97%, 54%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-orange {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-orange.option-orange {
  width: 12rem;
  height: auto;
}
.option-orange.option-orange .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(29deg, 97%, 54%);
  border-radius: 1.625rem;
}
.option-orange.option-orange .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-orange.option-orange .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-orange.option-orange .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-orange.option-orange .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(29deg, 97%, 54%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-orange:hover .circle {
  width: 100%;
}
.option-orange:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-orange:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-orange {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(29deg, 97%, 54%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-orange:focus, .action-orange:hover {
  background-color: hsl(29deg, 97%, 54%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(29deg, 97%, 54%);
}
.action-orange:active {
  background-color: hsl(29deg, 97%, 54%);
  box-shadow: 0 0 0 0.1875rem hsl(29deg, 97%, 54%), 0 0 0 0.375rem hsl(29deg, 97%, 54%);
  transition-duration: 75ms;
}
.action-orange span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-orange span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-orange:hover span:hover {
  padding-right: 25px;
}
.action-orange:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-dark {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 18%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-dark:hover {
  background-color: #545454;
}

.btn-outlined-dark {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(0deg, 0%, 18%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 18%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-dark:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(0deg, 0%, 18%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 18%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-dark {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-dark.option-dark {
  width: 12rem;
  height: auto;
}
.option-dark.option-dark .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(0deg, 0%, 18%);
  border-radius: 1.625rem;
}
.option-dark.option-dark .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-dark.option-dark .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-dark.option-dark .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-dark.option-dark .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 3rem;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(0deg, 0%, 18%);
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}
.option-dark:hover .circle {
  width: 100%;
}
.option-dark:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-dark:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-dark {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 18%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-dark:focus, .action-dark:hover {
  background-color: hsl(0deg, 0%, 18%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(0deg, 0%, 18%);
}
.action-dark:active {
  background-color: hsl(0deg, 0%, 18%);
  box-shadow: 0 0 0 0.1875rem hsl(0deg, 0%, 18%), 0 0 0 0.375rem hsl(0deg, 0%, 18%);
  transition-duration: 75ms;
}
.action-dark span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-dark span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-dark:hover span:hover {
  padding-right: 25px;
}
.action-dark:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-gray {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: #6d6d6d;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-gray:hover {
  background-color: #939393;
}

.btn-outlined-gray {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #6d6d6d;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: #6d6d6d;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-gray:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #6d6d6d;
  border-radius: 1.625rem;
  background-color: #6d6d6d;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-gray {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-gray.option-gray {
  width: 12rem;
  height: auto;
}
.option-gray.option-gray .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #6d6d6d;
  border-radius: 1.625rem;
}
.option-gray.option-gray .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-gray.option-gray .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-gray.option-gray .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-gray.option-gray .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #6d6d6d;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-gray:hover .circle {
  width: 100%;
}
.option-gray:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-gray:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-gray {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: #6d6d6d;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-gray:focus, .action-gray:hover {
  background-color: #6d6d6d;
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem #6d6d6d;
}
.action-gray:active {
  background-color: #6d6d6d;
  box-shadow: 0 0 0 0.1875rem #6d6d6d, 0 0 0 0.375rem #6d6d6d;
  transition-duration: 75ms;
}
.action-gray span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-gray span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-gray:hover span:hover {
  padding-right: 25px;
}
.action-gray:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-graylight {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: whitesmoke;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-graylight:hover {
  background-color: white;
}

.btn-outlined-graylight {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid whitesmoke;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: whitesmoke;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-graylight:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid whitesmoke;
  border-radius: 1.625rem;
  background-color: whitesmoke;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-graylight {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-graylight.option-graylight {
  width: 12rem;
  height: auto;
}
.option-graylight.option-graylight .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: whitesmoke;
  border-radius: 1.625rem;
}
.option-graylight.option-graylight .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-graylight.option-graylight .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-graylight.option-graylight .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-graylight.option-graylight .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: whitesmoke;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-graylight:hover .circle {
  width: 100%;
}
.option-graylight:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-graylight:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-graylight {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: whitesmoke;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-graylight:focus, .action-graylight:hover {
  background-color: whitesmoke;
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem whitesmoke;
}
.action-graylight:active {
  background-color: whitesmoke;
  box-shadow: 0 0 0 0.1875rem whitesmoke, 0 0 0 0.375rem whitesmoke;
  transition-duration: 75ms;
}
.action-graylight span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-graylight span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-graylight:hover span:hover {
  padding-right: 25px;
}
.action-graylight:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-white {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-white:hover {
  background-color: white;
}

.btn-outlined-white {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(0deg, 0%, 99%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-white:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(0deg, 0%, 99%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-white {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-white.option-white {
  width: 12rem;
  height: auto;
}
.option-white.option-white .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(0deg, 0%, 99%);
  border-radius: 1.625rem;
}
.option-white.option-white .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-white.option-white .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-white.option-white .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-white.option-white .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(0deg, 0%, 99%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-white:hover .circle {
  width: 100%;
}
.option-white:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-white:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-white {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-white:focus, .action-white:hover {
  background-color: hsl(0deg, 0%, 99%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(0deg, 0%, 99%);
}
.action-white:active {
  background-color: hsl(0deg, 0%, 99%);
  box-shadow: 0 0 0 0.1875rem hsl(0deg, 0%, 99%), 0 0 0 0.375rem hsl(0deg, 0%, 99%);
  transition-duration: 75ms;
}
.action-white span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-white span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-white:hover span:hover {
  padding-right: 25px;
}
.action-white:hover span:after {
  opacity: 1;
  right: -10px;
}

.btn-formcolor {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 18%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-formcolor:hover {
  background-color: #545454;
}

.btn-outlined-formcolor {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(0deg, 0%, 18%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 99%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 18%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}
.btn-outlined-formcolor:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid hsl(0deg, 0%, 18%);
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 18%);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: hsl(0deg, 0%, 99%);
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  transition: background-color 700ms linear;
  vertical-align: middle;
}

.option-formcolor {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.option-formcolor.option-formcolor {
  width: 12rem;
  height: auto;
}
.option-formcolor.option-formcolor .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: hsl(0deg, 0%, 18%);
  border-radius: 1.625rem;
}
.option-formcolor.option-formcolor .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: hsl(0deg, 0%, 99%);
}
.option-formcolor.option-formcolor .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.option-formcolor.option-formcolor .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.option-formcolor.option-formcolor .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: hsl(0deg, 0%, 18%);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.option-formcolor:hover .circle {
  width: 100%;
}
.option-formcolor:hover .circle .icon.arrow {
  background: hsl(0deg, 0%, 99%);
  transform: translate(1rem, 0);
}
.option-formcolor:hover .button-text {
  color: hsl(0deg, 0%, 99%);
}

.action-formcolor {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 1.85rem 0;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 1.625rem;
  background-color: hsl(0deg, 0%, 18%);
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.action-formcolor:focus, .action-formcolor:hover {
  background-color: hsl(0deg, 0%, 18%);
  box-shadow: 0 0 0 0.1875rem white, 0 0 0 0.375rem hsl(0deg, 0%, 18%);
}
.action-formcolor:active {
  background-color: hsl(0deg, 0%, 18%);
  box-shadow: 0 0 0 0.1875rem hsl(0deg, 0%, 18%), 0 0 0 0.375rem hsl(0deg, 0%, 18%);
  transition-duration: 75ms;
}
.action-formcolor span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.action-formcolor span:after {
  content: "\f2fb";
  font-family: Material-Design-Iconic-Font, sans-serif;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 20px;
  transition: 0.5s;
}
.action-formcolor:hover span:hover {
  padding-right: 25px;
}
.action-formcolor:hover span:after {
  opacity: 1;
  right: -10px;
}

.back {
  /**position: fixed;
  top: 40px;
  left: 40px;**/
  width: 100px;
}
.back ul {
  display: block;
  margin-bottom: 0;
  list-style: none;
}
.back ul li {
  white-space: nowrap;
}
.back ul li a {
  text-decoration: none;
}
.back ul.nav-history {
  padding-left: 36px;
  padding-top: 25px;
  pointer-events: none;
}
.back ul.nav-history li {
  margin-bottom: 5px;
}
.back ul.nav-history li::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8eaed;
  transform: scale(0.9);
  transition: all 0.2s ease;
}
.back ul.nav-history li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  margin-top: 10px;
  width: 2px;
  height: 28px;
  background: #e8eaed;
  transition: all 0.2s ease;
}
.back ul.nav-history li.active {
  pointer-events: none;
}
.back ul.nav-history li.active::after {
  background: #e8eaed;
}
.back ul.nav-history li.active a {
  color: hsl(0deg, 0%, 18%);
}
.back ul.nav-history li a {
  color: hsl(240deg, 92%, 51%);
  display: inline-block;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}
.back ul.nav-history li a:hover {
  color: hsl(240deg, 92%, 51%);
}
.back ul.nav-links {
  position: absolute;
  transform: translateY(-10px);
  margin-top: 20px;
  padding-left: 12px;
  opacity: 0;
  transition: all 0.2s ease;
  pointer-events: none;
}
.back ul.nav-links li:not(:last-child) {
  margin-bottom: 5px;
}
.back ul.nav-links li a {
  font-size: 14px;
  font-weight: 600;
  color: #b0b0b0;
  transition: color 0.2s ease;
}
.back ul.nav-links li a:focus, .back ul.nav-links li a:hover {
  color: hsl(240deg, 92%, 51%);
}
.back:hover {
  width: auto;
}
.back:hover .menu-back {
  opacity: 1;
  transform: translateY(0);
}
.back:hover .btn-back span {
  transform: translateX(0);
  opacity: 1;
}
.back:hover ul.nav-history {
  transform: translateY(0);
  pointer-events: auto;
}
.back:hover ul.nav-history li {
  margin-bottom: 8px;
}
.back:hover ul.nav-history li::after {
  background: hsl(240deg, 92%, 51%);
  transform: translateY(6px);
}
.back:hover ul.nav-history li.active::after {
  background: hsl(0deg, 0%, 18%);
}
.back:hover ul.nav-history li a {
  opacity: 1;
  transform: translateY(0);
}
.back:hover ul.nav-links {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back:hover .btn-back div svg path,
.back:hover .btn-back div svg polyline {
  stroke: hsl(0deg, 0%, 99%);
}

.btn-back {
  display: inline-block;
}
.btn-back div {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #d5d5d5;
  float: left;
}
.btn-back div svg {
  fill: none;
  stroke: white;
  transform: translate(10px, 11px);
}
.btn-back span {
  display: inline-block;
  color: hsl(240deg, 92%, 51%);
  margin-left: 10px;
  line-height: 34px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.2s ease;
}
.btn-back div svg path,
.btn-back div svg polyline {
  stroke: #585858;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.navbar-bg, .navbar .container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.navbar {
  padding: 1rem 2rem;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
}
.navbar .logo {
  z-index: 16;
}
.nav-menu {
  z-index: 15;
  position: absolute;
  top: 18px;
  right: 30px;
  cursor: pointer;
}
.nav-menu h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
          margin-block-start: 0.83em;
  -webkit-margin-after: 0.83em;
          margin-block-end: 0.83em;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  font-weight: 600;
  color: hsl(0deg, 0%, 99%);
}

nav.menu-container {
  z-index: 10;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: hsl(240deg, 92%, 51%);
}
nav.menu-container .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
nav.menu-container .list-items li {
  position: relative;
  list-style-type: none;
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: bold;
  color: hsl(0deg, 0%, 99%);
}
nav.menu-container .list-items a:hover {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  transition-duration: 0.55s;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: none;
  -webkit-appearance: none;
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus:-ms-input-placeholder {
  color: transparent;
}

textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

textarea:focus:-moz-placeholder {
  color: transparent;
}

textarea:focus::-moz-placeholder {
  color: transparent;
}

textarea:focus:-ms-input-placeholder {
  color: transparent;
}

input::-webkit-input-placeholder {
  color: #cccccc;
}

input:-moz-placeholder {
  color: #cccccc;
}

input::-moz-placeholder {
  color: #cccccc;
}

input:-ms-input-placeholder {
  color: #cccccc;
}

textarea::-webkit-input-placeholder {
  color: #cccccc;
}

textarea:-moz-placeholder {
  color: #cccccc;
}

textarea::-moz-placeholder {
  color: #cccccc;
}

textarea:-ms-input-placeholder {
  color: #cccccc;
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form .form-title {
  display: block;
  width: 100%;
  font-size: 24px;
  color: hsl(240deg, 92%, 51%);
  line-height: 1.2;
  text-align: left;
  margin-bottom: 1rem;
}
.form .wrap {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #dbdbdb;
  margin-bottom: 45px;
}
.form .form-input {
  position: relative;
  display: block;
  padding: 0.5rem;
}
.form .form-input .label {
  font-size: 18px;
  color: hsl(0deg, 0%, 18%);
  line-height: 1.2;
  padding-left: 0.5rem;
}
.form .form-input .input {
  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  font-size: 22px;
  color: hsl(0deg, 0%, 18%);
  line-height: 1.2;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  border: 2px solid hsl(0deg, 0%, 18%);
  border-radius: 0.4rem;
}
.form .form-input input[type=date].input,
.form .form-input input[type=time].input {
  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  font-size: 22px;
  color: hsl(0deg, 0%, 18%);
  line-height: 1.2;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  border: 2px solid hsl(0deg, 0%, 18%);
  border-radius: 0.4rem;
  font-family: sans-serif;
}
.form .form-input input[type=date].input::-webkit-datetime-edit,
.form .form-input input[type=time].input::-webkit-datetime-edit {
  padding: 1em 0;
}
.form .form-input input[type=date].input::-webkit-datetime-edit-text,
.form .form-input input[type=time].input::-webkit-datetime-edit-text {
  color: hsl(0deg, 0%, 18%);
  padding: 0 0.3em;
}
.form .form-input input[type=date].input::-webkit-datetime-edit-month-field,
.form .form-input input[type=time].input::-webkit-datetime-edit-month-field {
  color: hsl(0deg, 0%, 18%);
}
.form .form-input input[type=date].input::-webkit-datetime-edit-day-field,
.form .form-input input[type=time].input::-webkit-datetime-edit-day-field {
  color: hsl(0deg, 0%, 18%);
}
.form .form-input input[type=date].input::-webkit-datetime-edit-year-field,
.form .form-input input[type=time].input::-webkit-datetime-edit-year-field {
  color: hsl(0deg, 0%, 18%);
}
.form .form-input input[type=date].input::-webkit-inner-spin-button,
.form .form-input input[type=time].input::-webkit-inner-spin-button {
  display: none;
}
.form .form-input input[type=range].input {
  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  font-size: 22px;
  color: hsl(0deg, 0%, 18%);
  line-height: 1.2;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  border: 2px solid hsl(0deg, 0%, 18%);
  border-radius: 0.4rem;
  font-family: sans-serif;
  -webkit-appearance: none;
  background: hsl(240deg, 92%, 51%);
  outline: none;
  opacity: 1;
  transition: opacity 0.2s;
}
.form .form-input input[type=range].input:hover {
  opacity: 0.7;
}
.form .form-input input[type=range].input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: hsl(41deg, 99%, 71%);
  margin-top: 0;
}
.form .form-input .right .input {
  padding-right: 3rem;
}
.form .form-input .left .input {
  padding-left: 3rem;
}
.form .form-input #rangevalue:before {
  content: "$";
}
.form .form-input-styled {
  position: relative;
  display: block;
  padding: 0.5rem;
}
.form .form-input-styled .label {
  font-size: 18px;
  color: hsl(0deg, 0%, 18%);
  line-height: 1.2;
  padding-left: 0.5rem;
}
.form .form-input-styled .input {
  display: block;
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: hsl(0deg, 0%, 18%);
  background-color: whitesmoke;
  line-height: 1.2;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  border: 0;
  border-bottom: 2px solid hsl(0deg, 0%, 18%);
}
.form .form-input-styled .right .input {
  padding-right: 3rem;
}
.form .form-input-styled .left .input {
  padding-left: 3rem;
}
.form .form-input-add {
  position: relative;
}
.form .form-input-add .form-input-icon {
  position: absolute;
  top: 0.5rem;
}
.form .form-input-add .form-input-icon-right {
  right: 1rem;
  border-left: 1px solid hsl(0deg, 0%, 18%);
  padding: 0 0 0 8px;
}
.form .form-input-add .form-input-icon-left {
  left: 1rem;
  border-right: 1px solid hsl(0deg, 0%, 18%);
  padding: 0 8px 0 0;
}
.form .form-radio input[type=radio]:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: 0;
  left: -1px;
  position: relative;
  background-color: whitesmoke;
  content: "";
  display: inline-block;
  visibility: visible;
  transition-duration: 0.3s;
  border: 2px solid hsl(240deg, 92%, 51%);
}
.form .form-radio input[type=radio]:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: 0;
  left: -1px;
  position: relative;
  background-color: hsl(240deg, 92%, 51%);
  content: "";
  display: inline-block;
  visibility: visible;
  border: 2px solid whitesmoke;
}
.form .form-radio-inline {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.form .form-radio-inline input[type=radio]:after {
  top: 0;
  left: -1px;
}
.form .form-radio-inline input[type=radio]:checked:after {
  top: 0;
  left: -1px;
}
.form .form-checkbox {
  display: block;
  cursor: pointer;
  position: relative;
}
.form .form-checkbox span {
  color: hsl(0deg, 0%, 18%);
  padding: 0;
}
.form .form-checkbox label {
  display: flex;
  align-items: baseline;
}
.form .form-checkbox label input[type=checkbox] {
  height: 15px;
  width: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid hsl(240deg, 92%, 51%);
  border-radius: 5px;
  outline: none;
  transition-duration: 0.3s;
  background-color: whitesmoke;
  cursor: pointer;
}
.form .form-checkbox label input[type=checkbox]:checked {
  border: 2px solid hsl(240deg, 92%, 51%);
  background-color: hsl(240deg, 92%, 51%);
}
.form .form-checkbox label input[type=checkbox]:checked + span::before {
  position: absolute;
  left: 5px;
  top: -3px;
  content: "✓";
  display: block;
  text-align: center;
  color: white;
  font-size: 18px;
}
.form .form-checkbox label input[type=checkbox]:not(:checked) {
  border: 2px solid hsl(240deg, 92%, 51%) !important;
}
.form .form-select {
  position: relative;
  display: block;
  padding: 0.5rem;
}
.form .form-select label {
  font-size: 18px;
  color: hsl(0deg, 0%, 18%);
  line-height: 1.2;
  padding-left: 0.5rem;
}
.form .form-select select {
  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  font-size: 22px;
  color: hsl(0deg, 0%, 18%);
  line-height: 1.2;
  padding: 0 0.5rem;
  margin: 0.5rem 0;
  border: 2px solid hsl(0deg, 0%, 18%);
  border-radius: 0.4rem;
}
.form .form-select select option {
  background-color: whitesmoke;
}
.form .container-form-btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.form .btn-form {
  min-width: 244px;
  line-height: 1.2;
}

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: hsl(0deg, 0%, 99%);
  border: 1px solid hsl(357deg, 47%, 48%);
  border-radius: 2px;
  padding: 4px 30px 4px 10px;
  bottom: calc((100% - 25px) / 2);
  transform: translateY(50%);
  right: 2px;
  pointer-events: none;
  color: hsl(357deg, 47%, 48%);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f1f4";
  font-family: Material-Design-Iconic-Font;
  display: block;
  position: absolute;
  color: #c80000;
  font-size: 18px;
  bottom: calc((100% - 25px) / 2);
  transform: translateY(50%);
  right: 8px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}
.true-validate::after {
  content: "\f26b";
  font-family: Material-Design-Iconic-Font;
  font-size: 22px;
  color: #00ad5f;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: calc((100% - 25px) / 2);
  transform: translateY(50%);
  right: 5px;
}

.message {
  position: relative;
  width: calc(100% - 3em);
  max-width: 40em;
  padding: 1.5em 1em 1.5em 2em;
  border: 1px solid #2e2e2e;
  border-left-width: 7px;
  border-left-style: solid;
  border-radius: 3px;
  line-height: 1.5;
  color: #2e2e2e;
  opacity: 1;
  margin-top: 2em;
}
.message:before {
  color: white;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  left: -3px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  line-height: 2rem;
  text-align: center;
  font-size: 1.5rem;
}
.message__close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1rem;
  color: #2e2e2e;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  -webkit-animation-name: hidemessage;
          animation-name: hidemessage;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.message__close span {
  font-size: 1rem;
}
.message p {
  color: #2e2e2e;
  margin: 0 0 1em;
  transition: all 3s ease-out;
}
.message p:last-child {
  margin-bottom: 0;
}

.message--info {
  background: linear-gradient(to bottom, hsla(220deg, 92%, 51%, 0.3), hsla(220deg, 92%, 51%, 0.1));
  border-color: hsl(220deg, 92%, 51%);
}
.message--info:before {
  background-color: hsl(220deg, 92%, 51%);
  content: "\f1f8";
  font-family: "Material-Design-Iconic-Font", sans-serif;
}

.message--info .message__close {
  color: hsl(220deg, 92%, 51%) !important;
  font-weight: 700;
}

.message--error {
  background: linear-gradient(to bottom, hsla(357deg, 47%, 48%, 0.3), hsla(357deg, 47%, 48%, 0.1));
  border-color: hsl(357deg, 47%, 48%);
}
.message--error:before {
  background-color: hsl(357deg, 47%, 48%);
  content: "\f1f1";
  font-family: "Material-Design-Iconic-Font", sans-serif;
}

.message--error .message__close {
  color: hsl(357deg, 47%, 48%) !important;
  font-weight: 700;
}

.message--warning {
  background: linear-gradient(to bottom, hsla(29deg, 97%, 54%, 0.3), hsla(29deg, 97%, 54%, 0.1));
  border-color: hsl(29deg, 97%, 54%);
}
.message--warning:before {
  background-color: hsl(29deg, 97%, 54%);
  content: "\f1fe";
  font-family: "Material-Design-Iconic-Font", sans-serif;
}

.message--warning .message__close {
  color: hsl(29deg, 97%, 54%) !important;
  font-weight: 700;
}

.message--success {
  background: linear-gradient(to bottom, hsla(141deg, 50%, 35%, 0.3), hsla(141deg, 50%, 35%, 0.1));
  border-color: hsl(141deg, 50%, 35%);
}
.message--success:before {
  background-color: hsl(141deg, 50%, 35%);
  content: "\f269";
  font-family: "Material-Design-Iconic-Font", sans-serif;
}

.message--success .message__close {
  color: hsl(141deg, 50%, 35%) !important;
  font-weight: 700;
}

input[type=checkbox].hide-input:checked + .message {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-direction: ease-out;
          animation-direction: ease-out;
  -webkit-animation-play-state: start;
          animation-play-state: start;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: hidemessage;
          animation-name: hidemessage;
  overflow: auto;
}

input.hide-input {
  display: none;
}

.message label.toggle {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.autohide {
  -webkit-animation-name: hidemessage;
          animation-name: hidemessage;
  -webkit-animation-direction: ease-out;
          animation-direction: ease-out;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-play-state: start;
          animation-play-state: start;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

@-webkit-keyframes hidemessage {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: -555%;
  }
  100% {
    padding: 0;
    opacity: 0;
    border: 0;
    margin: 0;
    margin-left: -999%;
    height: 0;
    /**line-height: 0;
    overflow: hidden;**/
  }
}

@keyframes hidemessage {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: -555%;
  }
  100% {
    padding: 0;
    opacity: 0;
    border: 0;
    margin: 0;
    margin-left: -999%;
    height: 0;
    /**line-height: 0;
    overflow: hidden;**/
  }
}
/* breakpoints */
.tabs {
  position: relative;
  padding: 50px;
  padding-bottom: 80px;
  min-width: 240px;
}
.tabs input[name=tab-control] {
  display: none;
}
.tabs .content section h2,
.tabs ul li label {
  font-weight: bold;
  font-size: 18px;
  color: hsl(240deg, 92%, 51%);
}
.tabs ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tabs ul li {
  box-sizing: border-box;
  flex: 1;
  width: 25%;
  padding: 0 10px;
  text-align: center;
}
.tabs ul li label {
  transition: all 0.3s ease-in-out;
  color: #79798b;
  padding: 5px auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none;
}
.tabs ul li label br {
  display: none;
}
.tabs ul li label svg {
  fill: #79798b;
  height: 1.2em;
  vertical-align: bottom;
  margin-right: 0.2em;
  transition: all 0.2s ease-in-out;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
  outline: 0;
  color: #a2a2ae;
}
.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
  fill: #a2a2ae;
}
.tabs .slider {
  position: relative;
  width: 25%;
  transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
  position: relative;
  width: 50px;
  max-width: 100%;
  margin: 0 auto;
  height: 4px;
  background: hsl(240deg, 92%, 51%);
  border-radius: 1px;
}
.tabs .content {
  margin-top: 30px;
}
.tabs .content section {
  display: none;
  -webkit-animation-name: content;
          animation-name: content;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  line-height: 1.4;
}
.tabs .content section h2 {
  color: hsl(240deg, 92%, 51%);
  display: none;
}
.tabs .content section h2::after {
  content: "";
  position: relative;
  display: block;
  width: 30px;
  height: 3px;
  background: hsl(240deg, 92%, 51%);
  margin-top: 5px;
  left: 1px;
}
.tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
  cursor: default;
  color: hsl(240deg, 92%, 51%);
}
.tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg {
  fill: hsl(240deg, 92%, 51%);
}
@media (max-width: 600px) {
  .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.tabs input[name=tab-control]:nth-of-type(1):checked ~ .slider {
  transform: translateX(0%);
}
.tabs input[name=tab-control]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
  display: block;
}
.tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
  cursor: default;
  color: hsl(240deg, 92%, 51%);
}
.tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg {
  fill: hsl(240deg, 92%, 51%);
}
@media (max-width: 600px) {
  .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.tabs input[name=tab-control]:nth-of-type(2):checked ~ .slider {
  transform: translateX(100%);
}
.tabs input[name=tab-control]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
  display: block;
}
.tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
  cursor: default;
  color: hsl(240deg, 92%, 51%);
}
.tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg {
  fill: hsl(240deg, 92%, 51%);
}
@media (max-width: 600px) {
  .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.tabs input[name=tab-control]:nth-of-type(3):checked ~ .slider {
  transform: translateX(200%);
}
.tabs input[name=tab-control]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
  display: block;
}
.tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
  cursor: default;
  color: hsl(240deg, 92%, 51%);
}
.tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
  fill: hsl(240deg, 92%, 51%);
}
@media (max-width: 600px) {
  .tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
    background: rgba(0, 0, 0, 0.08);
  }
}
.tabs input[name=tab-control]:nth-of-type(4):checked ~ .slider {
  transform: translateX(300%);
}
.tabs input[name=tab-control]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
  display: block;
}
@-webkit-keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes content {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@media (max-width: 1000px) {
  .tabs ul li label {
    white-space: initial;
  }
  .tabs ul li label br {
    display: initial;
  }
  .tabs ul li label svg {
    height: 1.5em;
  }
}
@media (max-width: 600px) {
  .tabs ul li label {
    padding: 5px;
    border-radius: 5px;
  }
  .tabs ul li label span {
    display: none;
  }
  .tabs .slider {
    display: none;
  }
  .tabs .content {
    margin-top: 20px;
  }
  .tabs .content section h2 {
    display: block;
  }
}

.et-hero-tabs,
.et-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: #eee;
  text-align: center;
  padding: 0 2em;
}

.et-hero-tabs-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: #fff;
  z-index: 10;
}
.et-hero-tabs-container--top {
  position: fixed;
  top: 0;
}

.et-hero-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  letter-spacing: 0.1rem;
  transition: all 0.5s ease;
  font-size: 0.8rem;
}
.et-hero-tab:hover {
  color: white;
  background: hsl(240deg, 92%, 51%);
  transition: all 0.5s ease;
}

.et-hero-tab-slider {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
  background: hsl(29deg, 97%, 54%);
  transition: left 0.3s ease;
}

@media (min-width: 800px) {
  .et-hero-tabs h1,
.et-slide h1 {
    font-size: 3rem;
  }
  .et-hero-tabs h3,
.et-slide h3 {
    font-size: 1rem;
  }
  .et-hero-tab {
    font-size: 1rem;
  }
}
img, video, svg {
  max-width: 100%;
}

.img-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.img-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.imgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
  gap: 2rem;
  margin: 4rem 5vw;
  padding: 0;
  list-style-type: none;
}

.img-rounded {
  border-radius: calc(var(--curve) * 1px);
}

.img-circle {
  border-radius: 500px;
}

.img-polaroid {
  padding: 4px;
  background-color: hsl(0deg, 0%, 99%);
  border: 1px solid whitesmoke;
  box-shadow: 0 1px 3px rgba(230, 230, 230, 0.1);
}

.img-hover {
  border: 1px solid transparent;
}
.img-hover:hover {
  outline: 2px solid hsl(240deg, 92%, 51%);
}

.img-blur {
  position: relative;
  display: block;
}
.img-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(3px) opacity(0.5) brightness(1.3);
          backdrop-filter: blur(3px) opacity(0.5) brightness(1.3);
}
.img-blur:hover::after {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.img-sepia img {
  filter: sepia(100%);
  transition: 0.3s ease-in-out;
}
.img-sepia:hover img {
  filter: sepia(0);
}

.img-grayscale img {
  filter: grayscale(100%);
  transition: 0.3s ease-in-out;
}
.img-grayscale:hover img {
  filter: grayscale(0);
}

.img-zoom {
  display: block;
  overflow: hidden;
  border: 1px solid whitesmoke;
}
.img-zoom img {
  width: 100%;
  min-height: 100%;
  transition: all 0.3s;
}
.img-zoom:hover img {
  transform: scale(1.2);
}

.text-center {
  text-align: center;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 2rem;
}

.p-3 {
  padding: 4rem;
}

.p-4 {
  padding: 6rem;
}

.p-5 {
  padding: 8rem;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 1.2rem;
}

.m-2 {
  margin: 2.4rem;
}

.m-3 {
  margin: 4.8rem;
}

.m-4 {
  margin: 7.2rem;
}

.m-5 {
  margin: 9.6rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 1.2rem;
}

.mt-2 {
  margin-top: 2.4rem;
}

.mt-3 {
  margin-top: 4.8rem;
}

.mt-4 {
  margin-top: 7.2rem;
}

.mt-5 {
  margin-top: 9.6rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 1.2rem;
}

.mb-2 {
  margin-bottom: 2.4rem;
}

.mb-3 {
  margin-bottom: 4.8rem;
}

.mb-4 {
  margin-bottom: 7.2rem;
}

.mb-5 {
  margin-bottom: 9.6rem;
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 1.2rem;
}

.ml-2 {
  margin-left: 2.4rem;
}

.ml-3 {
  margin-left: 4.8rem;
}

.ml-4 {
  margin-left: 7.2rem;
}

.ml-5 {
  margin-left: 9.6rem;
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 1.2rem;
}

.mr-2 {
  margin-right: 2.4rem;
}

.mr-3 {
  margin-right: 4.8rem;
}

.mr-4 {
  margin-right: 7.2rem;
}

.mr-5 {
  margin-right: 9.6rem;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.font-xs {
  font-size: 0.8652657602rem;
}

.font-md {
  font-size: 2.2652rem;
}

.font-lg {
  font-size: 3.6650936rem;
}

.shadow-xs {
  box-shadow: 4px 4px 10px 0 rgba(10, 10, 10, 0.5);
}

.shadow-md {
  box-shadow: 6px 6px 10px 0 rgba(10, 10, 10, 0.5);
}

.shadow-lg {
  box-shadow: 8px 8px 10px 0 rgba(10, 10, 10, 0.5);
}