.main-content.survey .block-content {
  display: none;
}

#survey {
  background: #fff;
  /* padding: 24px 16px; */
  padding: 0 16px;
}

#survey input[type="text"],
#survey input[type="email"] {
  width: 100%;
}

#survey-result{
  display: none;
}


@media (min-width: 512px) {
  #survey {
    /* padding: 32px 10%; */
    padding: 0 10%;
  }
  .grid-container{
    display:grid;
    grid-template-columns: auto;
    grid-gap: 5px;
  }
}

@media (min-width: 784px) {
  #survey {
    /* padding: 40px 15%; */
    padding: 0 15%;
  }
  .grid-container{
    display:grid;
    grid-template-columns: auto auto;
    grid-gap: 5px;
  }
}

@media (min-width: 1024px) {
  #survey {
    /* padding: 48px 20%; */
    padding: 0 20%;
  }
  .grid-container{
    display:grid;
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
  }
}

html, body {
  font-family: 'Muli', sans-serif;
  color: #545660;
  ;
}

.page-template-page-survey [type="radio"] {
  z-index: -1;
  position: absolute;
  opacity: 0;
}
.page-template-page-survey [type="radio"]:checked ~ label {
  border-color: #4062f6;
  background-color: rgba(97, 154, 234, 0.16);
  color: rgb(0, 0, 0);
}
.page-template-page-survey [type="radio"]:checked ~ label:before {
  will-change: transform, border-width, border-color;
  -webkit-animation: bubble 1s ease-in;
  animation: bubble 1s ease-in;
}
.page-template-page-survey [type="radio"]:checked ~ label:after {
  will-change: opacity, box-shadow;
  -webkit-animation: sparkles 700ms ease-in-out;
  animation: sparkles 700ms ease-in-out;
}
.page-template-page-survey [type="radio"]:checked ~ label > span.radio-button {
  will-change: transform;
  border: 0;
  background-image: -webkit-gradient(linear, left bottom, right top, from(#6e89ff), to(#4363ee));
  background-image: linear-gradient(to top right, #6e89ff, #4363ee);
  -webkit-animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);
  animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
.page-template-page-survey [type="radio"]:checked ~ label > span.radio-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #fff;
}

.form{
  color: black;
  font-size: 20px;
}

.page-template-page-survey label {
  position: relative;
  display: grid;
  -webkit-box-align: center;
  align-items: center;
  grid-template-columns: 20px auto;
  grid-gap: 20px;
  width: 320px;
  min-height: 62px;
  padding: 8px 20px;
  border-radius: 6px;
  border: 2px solid transparent;
  background-color: transparent;
  transition: all 300ms ease-in;
  line-height: 1.2;
}
.page-template-page-survey label.has-image {
  grid-template-columns: 20px 42px auto;
}
.page-template-page-survey label.has-image img {
  width: 42px;
  height: 42px;
}
.page-template-page-survey label:hover {
  border-color: #4062f6;
  background-color: rgba(97, 154, 234, 0.16);
}
.page-template-page-survey label:before,
.page-template-page-survey label:after {
  position: absolute;
  left: 29px;
  border-radius: 50%;
  content: "";
}
.page-template-page-survey label:before {
  margin: -2rem;
  border: solid 2rem #545461;
  width: 4rem;
  height: 4rem;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.page-template-page-survey label:after {
  margin: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: 0.32476rem -2.6875rem 0 -0.1875rem #ff8080, -0.32476rem -2.3125rem 0 -0.1875rem #ffed80, 2.30366rem -1.42172rem 0 -0.1875rem #ffed80, 1.6055rem -1.69573rem 0 -0.1875rem #a4ff80, 2.54785rem 0.91464rem 0 -0.1875rem #a4ff80, 2.32679rem 0.19796rem 0 -0.1875rem #80ffc8, 0.87346rem 2.56226rem 0 -0.1875rem #80ffc8, 1.29595rem 1.94258rem 0 -0.1875rem #80c8ff, -1.45866rem 2.28045rem 0 -0.1875rem #80c8ff, -0.71076rem 2.2244rem 0 -0.1875rem #a480ff, -2.69238rem 0.28141rem 0 -0.1875rem #a480ff, -2.18226rem 0.8312rem 0 -0.1875rem #ff80ed, -1.89869rem -1.92954rem 0 -0.1875rem #ff80ed, -2.01047rem -1.18791rem 0 -0.1875rem #ff8080;
}
.page-template-page-survey label > span.radio-button {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 2px solid #454861;
}  
.option:not(:last-child) {
  margin-bottom: 4px;
}

h2.fit-recommendation-header {
  margin-top: 32px;
}
p.fit-recommendation {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}
p.fit-recommendation-and {
  margin: 16px 0;
}

.fit-recommendation {
  font-weight: bold;
}
.fit-recommendation.quantity {
  margin-top: 12px;
}
.fit-recommendation.category {
  font-size: 18px;
}
.fit-recommendation.large {
  font-size: 24px;
}
.fit-recommendation.grounding {
  color: #9e4b24;
}
.fit-recommendation.adventure {
  color: #ee7722;
}
.fit-recommendation.focus {
  color: #a4c539;
}
.fit-recommendation.balance {
  color: #418370;
}
.fit-recommendation.imagination {
  color: #6e6196;
}
.fit-recommendation.charisma {
  color: #b72978;
}


@-webkit-keyframes radio {
  0%,
  17.5% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@keyframes radio {
  0%,
  17.5% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@-webkit-keyframes bubble {
  15% {
    -webkit-transform: scale(1);
    transform: scale(1);
    border-color: #545461;
    border-width: 0;
  }
  30%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    border-color: #545461;
    border-width: 0;
  }
}
@keyframes bubble {
  15% {
    -webkit-transform: scale(1);
    transform: scale(1);
    border-color: #545461;
    border-width: 0;
  }
  30%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    border-color: #545461;
    border-width: 0;
  }
}
@-webkit-keyframes sparkles {
  0%,
  10% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(1.2) rotate(-20deg);
    transform: scale(1.2) rotate(-20deg);
    box-shadow: 0.32476rem -2.1875rem 0 0rem #ff8080, -0.32476rem -1.8125rem 0 0rem #ffed80, 1.91274rem -1.10998rem 0 0rem #ffed80, 1.21459rem -1.38398rem 0 0rem #a4ff80, 2.06039rem 0.80338rem 0 0rem #a4ff80, 1.83932rem 0.0867rem 0 0rem #80ffc8, 0.65652rem 2.11178rem 0 0rem #80ffc8, 1.07901rem 1.4921rem 0 0rem #80c8ff, -1.24172rem 1.82996rem 0 0rem #80c8ff, -0.49382rem 1.77391rem 0 0rem #a480ff, -2.20492rem 0.17015rem 0 0rem #a480ff, -1.69479rem 0.71994rem 0 0rem #ff80ed, -1.50777rem -1.61779rem 0 0rem #ff80ed, -1.61955rem -0.87617rem 0 0rem #ff8080;
  }
}
@keyframes sparkles {
  0%,
  10% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(1.2) rotate(-20deg);
    transform: scale(1.2) rotate(-20deg);
    box-shadow: 0.32476rem -2.1875rem 0 0rem #ff8080, -0.32476rem -1.8125rem 0 0rem #ffed80, 1.91274rem -1.10998rem 0 0rem #ffed80, 1.21459rem -1.38398rem 0 0rem #a4ff80, 2.06039rem 0.80338rem 0 0rem #a4ff80, 1.83932rem 0.0867rem 0 0rem #80ffc8, 0.65652rem 2.11178rem 0 0rem #80ffc8, 1.07901rem 1.4921rem 0 0rem #80c8ff, -1.24172rem 1.82996rem 0 0rem #80c8ff, -0.49382rem 1.77391rem 0 0rem #a480ff, -2.20492rem 0.17015rem 0 0rem #a480ff, -1.69479rem 0.71994rem 0 0rem #ff80ed, -1.50777rem -1.61779rem 0 0rem #ff80ed, -1.61955rem -0.87617rem 0 0rem #ff8080;
  }
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background: white;
}

.progress {
  width: 100%;
  max-width: 400px;
  height: 6px;
  background: #e1e4e8;
  border-radius: 3px;
  overflow: hidden;
}
.progress .progress-bar {
  display: block;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#ffd33d), color-stop(17%, #ea4aaa), color-stop(34%, #b34bff), color-stop(51%, #01feff), color-stop(68%, #ffd33d), color-stop(85%, #ea4aaa), to(#b34bff));
  background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);
  background-size: 300% 100%;
  -webkit-animation: progress-animation 3s linear infinite;
  animation: progress-animation 3s linear infinite;
}

@-webkit-keyframes progress-animation {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: 0;
  }
}

@keyframes progress-animation {
  0% {
    background-position: 100%;
  }
  100% {
    background-position: 0;
  }
}