* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  outline: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

html.no-scroll, body.no-scroll {
  position: fixed;
  overflow: hidden;
}

html {
  background-color: #8dade9;
  line-height: 1.4;
}

body, input, button {
  font-family: 'PT Sans', sans-serif;
}

.orientation {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  max-height: 40vh;
  max-width: 40vw;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.screen {
  display: none;
  margin: 5%;
  opacity: 0;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.screen__visible {
  display: block;
}

.start-img {
  margin-bottom: 2vh;
  max-height: 23vh;
  max-width: 100%;
}

.start-text {
  color: #3b5e9f;
  font-size: 2.25vh;
  line-height: 1.2;
  margin-top: 2vh;
}

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

.title {
  color: #fff;
  font-size: 7.5vh;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.btn {
  background-color: #ca5052;
  border: none;
  border-radius: 0.5vh;
  color: #772124;
  cursor: pointer;
  font-size: 2.75vh;
  padding: 1.75vh 2.25vh;
  -webkit-transition: background-color 0.4s;
  -o-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.btn:hover {
  background-color: #da5b5d;
}

.form {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 5vh auto 0 auto;
  width: 100%;
}

.form_text {
  color: #3b5e9f;
  font-size: 2.75vh;
  line-height: 1.2;
  margin-right: 5%;
  text-align: left;
  width: 70%;
}

.form_input {
  background-color: transparent;
  border: 2px solid #5b7dbc;
  border-radius: 0.5vh;
  color: #3b5e9f;
  font-size: 2.25vh;
  margin-right: 5%;
  padding: 1.75vh 2.25vh;
  width: 60%;
}

.form_input::-webkit-input-placeholder {
  color: #6583bc;
  opacity: 1;
}

.form_input:-ms-input-placeholder {
  color: #6583bc;
  opacity: 1;
}

.form_input::-ms-input-placeholder {
  color: #6583bc;
  opacity: 1;
}

.form_input::placeholder {
  color: #6583bc;
  opacity: 1;
}

.form_input:-ms-input-placeholder {
  color: #6583bc;
}

.form_input::-ms-input-placeholder {
  color: #6583bc;
}

.form .btn__40 {
  width: 40%;
}

.form .btn__30 {
  width: 30%;
}

.modal {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.modal__visible {
  display: block;
}

.modal_overlay {
  background-color: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.modal_content {
  background-color: #fff;
  border-radius: 2vh;
  font-size: 3vh;
  left: 50%;
  max-width: 90%;
  padding: 4vh;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 101;
}

.modal_content .btn {
  margin-top: 4vh;
}

.result {
  border: 2px solid #5b7dbc;
  border-radius: 1vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 4vh 6vh;
  position: relative;
}

.result_title {
  color: #3b5e9f;
  font-size: 2.75vh;
  height: 10vh;
  line-height: 1.2;
  margin-top: 7vh;
  text-transform: uppercase;
}

.result_elems {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.result_elem {
  margin-left: 6vh;
  text-align: left;
  width: 50%;
}

.result_summ {
  color: #3b5e9f;
  font-size: 8vh;
  font-weight: 700;
  line-height: 0.5;
}

.result_summ__green {
  color: #00ff84;
}

.result_character {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: 6vh;
  top: 4vh;
}

.social_elem {
  cursor: pointer;
  margin-left: 2vh;
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.social_elem:hover {
  opacity: 0.7;
}

.social_elem img {
  height: 3vh;
}

.coins {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 5%;
  position: relative;
  z-index: 10;
}

.coins_elem {
  cursor: move;
  margin: 0 3vh;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.coins_summ {
  color: #3b5e9f;
  font-size: 3vh;
  margin-bottom: 1vh;
}

.coins_elem img {
  height: 6vh;
}

.coins_img-disable {
  display: none;
}

.coins_elem__disable {
  cursor: default;
}

.coins_elem__disable .coins_img {
  display: none;
}

.coins_elem__disable .coins_img-disable {
  display: inline-block;
}

.house {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 10vh;
  position: relative;
  width: 100vw;
}

.house_gradient {
  background-image: -webkit-radial-gradient(bottom center, ellipse farthest-side, #d3e2ff, #8dade9);
  background-image: -o-radial-gradient(bottom center, ellipse farthest-side, #d3e2ff, #8dade9);
  background-image: radial-gradient(ellipse farthest-side at bottom center, #d3e2ff, #8dade9);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: -50%;
  z-index: 1;
}

.house_container {
  font-size: 0;
  margin-right: 8%;
  position: relative;
  z-index: 10;
}

.house img {
  max-height: 50vh;
  max-width: 80vw;
}

.house_character {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
}

.house_character-drop {
  position: absolute;
}

.house_character-name {
  background-color: #0e2744;
  border-radius: 0.5vh;
  color: #00ff84;
  font-size: 2vh;
  padding: 0.5vh 1vh;
  position: absolute;
  text-align: left;
}

.house_character img {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

.house_character .house_character-img__disabled, .house_character .house_character-img__hovered, .house_character .house_character-img__error {
  display: none;
}

.house_character__disable .house_character-img {
  display: none;
}

.house_character__disable .house_character-img__disabled {
  display: inline-block;
}

.house_character__hover .house_character-img {
  display: none;
}

.house_character__hover .house_character-img__hovered {
  display: inline-block;
}

.house_character__error .house_character-img {
  display: none;
}

.house_character__error .house_character-img__error {
  display: inline-block;
}

.house_character__disable .house_character-img__error {
  display: none;
}

.house_character__diver {
  height: 43.158%;
  left: 53.659%;
  top: 6.842%;
  width: 12.544%;
}

.house_character__diver .house_character-name {
  right: 105%;
  top: 10%;
}

.house_character__diver .house_character-drop {
  width: 180%;
  height: 125%;
  left: -30%;
  bottom: 0;
}

.house_character__ballerina {
  height: 44.737%;
  left: 93.902%;
  top: 57.895%;
  width: 18.293%;
}

.house_character__ballerina .house_character-name {
  right: 0;
  bottom: 110%;
}

.house_character__ballerina .house_character-drop {
  width: 180%;
  height: 180%;
  left: -30%;
  bottom: -20%;
}

.house_character__blogger {
  height: 50.789%;
  left: 64.808%;
  top: 55%;
  width: 18.293%;
}

.house_character__blogger .house_character-name {
  right: 90%;
  bottom: -15%;
}

.house_character__blogger .house_character-drop {
  width: 170%;
  height: 130%;
  left: -50%;
  bottom: -20%;
}

.house_character__me {
  height: 50.526%;
  /* left: 36.237%; */
  left: 34.237%;
  top: 32.895%;
  /* width: 11.15%; */
  width: 13.15%;
}

.house_character__me .house_character-name {
  left: 90%;
  top: 20%;
}

.house_character__me .house_character-drop {
  width: 220%;
  height: 150%;
  right: -30%;
  bottom: -30%;
}

.house_character__deputy {
  height: 47.368%;
  left: -2.091%;
  top: 57.368%;
  width: 28.049%;
}

.house_character__deputy .house_character-name {
  left: 0;
  bottom: 110%;
}

.house_character__deputy .house_character-drop {
  width: 135%;
  height: 150%;
  left: -30%;
  bottom: -15%;
}

.preview-video {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 120%;
  max-height: 120%;
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 5vh;
}

.footer_links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2vh;
}

.footer_links a {
  color: #00ff84;
  margin-right: 3vh;
  text-decoration: underline;
}

.footer_links a:last-child {
  margin-right: 0;
}

.footer_links a:hover {
  text-decoration: none;
}

.footer_title {
  font-size: 2vh;
}

.footer_title span {
  display: inline-block;
  font-size: 1.25vh;
  margin-right: 1vh;
  margin-bottom: 0.1vh;
  vertical-align: middle;
}

.footer_text {
  color: #3b5e9f;
  font-size: 1.75vh;
  margin-top: 2vh;
  text-align: right;
  width: 100%;
}

.select-sex {
  color: #3b5e9f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-right: 2vh;
}

.select-sex label {
  cursor: pointer;
  font-size: 2.5vh;
  white-space: nowrap;
}

@media (max-width: 1440px) {
  .preview-video {
    width: 150%;
  }
}

@media (max-width: 1024px) {
  .form__result {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .form__result > * {
    margin-right: 0;
    margin-bottom: 5vh;
    width: 100% !important;
  }

  .form__result > *:last-child {
    margin-bottom: 0;
  }

  .form_text {
    font-size: 3vh;
  }

  .form_text br {
    display: none;
  }

  .social {
    right: 4vh;
    top: 3vh;
  }

  .result {
    border-width: 1px;
    padding: 3vh 4vh;
  }

  .result_character img {
    max-height: 50vh;
    width: 100%;
  }

  .result_elems {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-left: 6vh;
    width: 70%;
  }

  .result_elem {
    margin-left: 0;
    width: 100%;
  }

  .result_title {
    height: auto;
    margin-bottom: 2vh;
  }

  .result_summ {
    line-height: 1;
  }

  .social_elem img {
    height: 5vh;
  }

  .house {
    margin-top: 3vh;
  }

  .coins_elem {
    margin: 0 3vh 3vh 3vh;
  }

  .coins_summ {
    font-size: 2.5vh;
    margin-bottom: 1vh;
  }

  .coins_elem img {
    height: 5vh;
  }

  .preview-video {
    width: 180%;
  }

  .footer_links {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
  }

  .footer_links a {
    margin: 0 1vh 1vh 1vh;
  }

  .footer_title {
    margin-top: 1vh;
  }

  .footer_text {
    margin-top: 1vh;
    text-align: left;
  }

  .footer_text br {
    display: none;
  }
}

@media (max-width: 1000px) {
  .start-img {
    max-height: 19vh;
  }

  .start-text {
    font-size: 2vh;
  }

  .title {
    font-size: 6vh;
  }

  .btn {
    font-size: 2vh;
    padding: 2vh 1.5vh;
  }

  .form_input {
    font-size: 2vh;
    padding: 2vh 1.5vh;
  }

  .modal_content {
    font-size: 3vh;
  }
}

@media (max-width: 1000px) and (orientation: landscape) {
  .start-img {
    margin-bottom: 4vh;
    max-height: 28vh;
  }

  .start-text {
    font-size: 4.5vh;
  }

  .title {
    font-size: 9vh;
  }

  .btn {
    border-radius: 1vh;
    font-size: 3.75vh;
    padding: 3vh 4vh;
  }

  .form_input {
    border-width: 1px;
    border-radius: 1vh;
    font-size: 3.75vh;
    padding: 3vh 4vh;
  }

  .modal_content {
    font-size: 4.5vh;
  }

  .house_character-name {
    font-size: 3.5vh;
  }

  .footer_links, .footer_title {
    font-size: 3.5vh;
  }

  .footer_text {
    font-size: 3vh;
  }
}

@media (max-width: 880px) and (orientation: landscape) {
  .wrapper {
    display: none;
  }

  .orientation {
    display: block;
  }
}

@media (max-width: 550px) {
  .form {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .form > * {
    margin-right: 0;
    margin-bottom: 3vh;
    width: 100% !important;
  }

  .form > *:last-child {
    margin-bottom: 0;
  }

  .start-img {
    margin-bottom: 4vw;
    max-height: 28vw;
  }

  .start-text {
    font-size: 3.5vw;
    margin-top: 2vw;
  }

  .title {
    font-size: 9vw;
  }

  .btn {
    border-radius: 1vw;
    font-size: 3.75vw;
    padding: 3vw 4vw;
  }

  .form_input {
    border-radius: 1vw;
    font-size: 3.75vw;
    padding: 3vw 4vw;
  }

  .modal_content {
    font-size: 4.5vw;
    padding: 4vw;
    width: 90%;
  }

  .result {
    padding: 2vh;
  }

  .result_title {
    font-size: 2vh;
    margin-top: 6vh;
    margin-bottom: 1vh;
  }

  .result_elems {
    margin-left: 4vh;
  }

  .result_summ {
    font-size: 6vh;
  }

  .result_character img {
    height: auto;
    width: 100%;
  }

  .social {
    top: 2vh;
    right: 2vh;
  }

  .social_elem img {
    height: 4vh;
  }

  .preview-video {
    width: 220%;
  }
}

.house_character__me img {
  position: absolute;
  left: 0;
  bottom: 0;
}