:root {
  --font-family: "Poppins", sans-serif;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue: #0579b2;
  --color-blue-dark: #023047;
  --color-yellow: #f2dc5d;
  --color-green: #329f5b;
  --color-green-blue: #49beaa;
  --color-green-orange: #ff785a;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins ExtraBold Italic"), local("Poppins-ExtraBoldItalic"), url("/fonts/Poppins-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Bold"), local("Poppins-Bold"), url("/fonts/Poppins-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins ExtraLight"), local("Poppins-ExtraLight"), url("/fonts/Poppins-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins ExtraLight Italic"), local("Poppins-ExtraLightItalic"), url("/fonts/Poppins-ExtraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Light"), local("Poppins-Light"), url("/fonts/Poppins-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Bold Italic"), local("Poppins-BoldItalic"), url("/fonts/Poppins-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Medium"), local("Poppins-Medium"), url("/fonts/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Medium Italic"), local("Poppins-MediumItalic"), url("/fonts/Poppins-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Light Italic"), local("Poppins-LightItalic"), url("/fonts/Poppins-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins ExtraBold"), local("Poppins-ExtraBold"), url("/fonts/Poppins-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Black Italic"), local("Poppins-BlackItalic"), url("/fonts/Poppins-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Black"), local("Poppins-Black"), url("/fonts/Poppins-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Italic"), local("Poppins-Italic"), url("/fonts/Poppins-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Thin Italic"), local("Poppins-ThinItalic"), url("/fonts/Poppins-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins SemiBold Italic"), local("Poppins-SemiBoldItalic"), url("/fonts/Poppins-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("/fonts/Poppins-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Thin"), local("Poppins-Thin"), url("/fonts/Poppins-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: local("Poppins Regular"), local("Poppins-Regular"), url("/fonts/Poppins-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marker Felt";
  src: local("Marker Felt"), local("MarkerFelt"), url("/fonts/MarkerFelt.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  line-height: 100%;
}

.team_store_container .input_group_container input,
.lead_form_container .input_group_container input, html {
  font-family: var(--font-family);
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: inherit;
  margin: 0;
  line-height: 100%;
}

.content,
.wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: 0;
}

p, li {
  line-height: 1;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
}

a {
  text-decoration: none;
  color: inherit;
}
a:not([href^="#"]) {
  cursor: pointer;
}

textarea,
input,
button {
  outline: none;
  background-color: transparent;
  line-height: 100%;
}

button {
  border: none;
}

textarea {
  resize: none;
}

* {
  overscroll-behavior: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.global_container,
.page_container {
  width: 100%;
  overflow: hidden;
}

.page_content {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100vh;
}

.fs_button {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  z-index: 30;
}
.fs_button.top {
  top: 0%;
  transform: translateY(0%);
}

.start_panel_container h1 {
  font-size: 4.6875rem;
}
@media (min-width: 1921px) {
  .start_panel_container h1 {
    font-size: 3.90625vw;
  }
}

.start_panel_container p {
  font-size: 2.1875rem;
}
@media (min-width: 1921px) {
  .start_panel_container p {
    font-size: 1.8229166667vw;
  }
}

.start_panel_container button {
  font-size: 4.6875rem;
}
@media (min-width: 1921px) {
  .start_panel_container button {
    font-size: 3.90625vw;
  }
}

.introduction_start_panel_container p {
  font-size: 2.1875rem;
}
@media (min-width: 1921px) {
  .introduction_start_panel_container p {
    font-size: 1.8229166667vw;
  }
}

.introduction_end_panel_container p {
  font-size: 2.1875rem;
}
@media (min-width: 1921px) {
  .introduction_end_panel_container p {
    font-size: 1.8229166667vw;
  }
}

.introduction_end_panel_container h4 {
  font-size: 3.5rem;
}
@media (min-width: 1921px) {
  .introduction_end_panel_container h4 {
    font-size: 2.9166666667vw;
  }
}

.sonar_emitter h6 {
  font-size: 1rem;
}
@media (min-width: 1921px) {
  .sonar_emitter h6 {
    font-size: 0.8333333333vw;
  }
}

.sonar_emitter h5 {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .sonar_emitter h5 {
    font-size: 1.25vw;
  }
}

.history_btn {
  font-size: 1.6875rem;
}
@media (min-width: 1921px) {
  .history_btn {
    font-size: 1.40625vw;
  }
}

.history_btn.big {
  font-size: 2.5rem;
}
@media (min-width: 1921px) {
  .history_btn.big {
    font-size: 2.0833333333vw;
  }
}

.team_store_container h2 {
  font-size: 3.5rem;
}
@media (min-width: 1921px) {
  .team_store_container h2 {
    font-size: 2.9166666667vw;
  }
}

.team_store_container h6,
.lead_form_container h6 {
  font-size: 1.875rem;
}
@media (min-width: 1921px) {
  .team_store_container h6,
  .lead_form_container h6 {
    font-size: 1.5625vw;
  }
}

.team_store_container .input_group_container input,
.lead_form_container .input_group_container input {
  font-size: 1.75rem;
}
@media (min-width: 1921px) {
  .team_store_container .input_group_container input,
  .lead_form_container .input_group_container input {
    font-size: 1.4583333333vw;
  }
}

.team_store_product_container h2 {
  font-size: 3.5rem;
}
@media (min-width: 1921px) {
  .team_store_product_container h2 {
    font-size: 2.9166666667vw;
  }
}

.challange_container .challange .title {
  font-size: 1.875rem;
}
@media (min-width: 1921px) {
  .challange_container .challange .title {
    font-size: 1.5625vw;
  }
}

.challange_container .challange .description {
  font-size: 1.25rem;
}
@media (min-width: 1921px) {
  .challange_container .challange .description {
    font-size: 1.0416666667vw;
  }
}

.challange_container .challange .select {
  font-size: 1.875rem;
}
@media (min-width: 1921px) {
  .challange_container .challange .select {
    font-size: 1.5625vw;
  }
}

.game_general_rules_container h2 {
  font-size: 3.125rem;
}
@media (min-width: 1921px) {
  .game_general_rules_container h2 {
    font-size: 2.6041666667vw;
  }
}

.game_general_rules_container li {
  font-size: 1.875rem;
}
@media (min-width: 1921px) {
  .game_general_rules_container li {
    font-size: 1.5625vw;
  }
}

.game_general_rules_container p {
  font-size: 1.625rem;
}
@media (min-width: 1921px) {
  .game_general_rules_container p {
    font-size: 1.3541666667vw;
  }
}

.game_general_rules_container h4 {
  font-size: 2.25rem;
}
@media (min-width: 1921px) {
  .game_general_rules_container h4 {
    font-size: 1.875vw;
  }
}

.game_intro_container h2 {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .game_intro_container h2 {
    font-size: 1.25vw;
  }
}

.game_intro_container h2 span {
  font-size: 3rem;
}
@media (min-width: 1921px) {
  .game_intro_container h2 span {
    font-size: 2.5vw;
  }
}

.game_intro_container p {
  font-size: 1.625rem;
}
@media (min-width: 1921px) {
  .game_intro_container p {
    font-size: 1.3541666667vw;
  }
}

.game_rules_container h2 {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .game_rules_container h2 {
    font-size: 1.25vw;
  }
}

.game_rules_container h2 span {
  font-size: 3rem;
}
@media (min-width: 1921px) {
  .game_rules_container h2 span {
    font-size: 2.5vw;
  }
}

.game_rules_container p {
  font-size: 1.625rem;
}
@media (min-width: 1921px) {
  .game_rules_container p {
    font-size: 1.3541666667vw;
  }
}

.game_rules_container h4 {
  font-size: 2.25rem;
}
@media (min-width: 1921px) {
  .game_rules_container h4 {
    font-size: 1.875vw;
  }
}

.well_done_container h2 {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .well_done_container h2 {
    font-size: 1.25vw;
  }
}

.well_done_container h2 span {
  font-size: 3rem;
}
@media (min-width: 1921px) {
  .well_done_container h2 span {
    font-size: 2.5vw;
  }
}

.well_done_container h4 {
  font-size: 2rem;
}
@media (min-width: 1921px) {
  .well_done_container h4 {
    font-size: 1.6666666667vw;
  }
}

.well_done_container p {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .well_done_container p {
    font-size: 1.25vw;
  }
}

.well_done_container .product_container h3 {
  font-size: 2.1875rem;
}
@media (min-width: 1921px) {
  .well_done_container .product_container h3 {
    font-size: 1.8229166667vw;
  }
}

.well_done_container .product_container p {
  font-size: 1.1875rem;
}
@media (min-width: 1921px) {
  .well_done_container .product_container p {
    font-size: 0.9895833333vw;
  }
}

.next_table_container h2 {
  font-size: 2.1875rem;
}
@media (min-width: 1921px) {
  .next_table_container h2 {
    font-size: 1.8229166667vw;
  }
}

.slot_dorsal_container h2 {
  font-size: 3.5rem;
}
@media (min-width: 1921px) {
  .slot_dorsal_container h2 {
    font-size: 2.9166666667vw;
  }
}

.slot_dorsal li {
  font-size: 8.125rem;
}
@media (min-width: 1921px) {
  .slot_dorsal li {
    font-size: 6.7708333333vw;
  }
}

.slot_dorsal_container p {
  font-size: 2.5rem;
}
@media (min-width: 1921px) {
  .slot_dorsal_container p {
    font-size: 2.0833333333vw;
  }
}

.user_dorsal_container h2 {
  font-size: 3rem;
}
@media (min-width: 1921px) {
  .user_dorsal_container h2 {
    font-size: 2.5vw;
  }
}

.user_dorsal_container h5 {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .user_dorsal_container h5 {
    font-size: 1.25vw;
  }
}

.login_container input[type=text] {
  font-size: 8.125rem;
}
@media (min-width: 1921px) {
  .login_container input[type=text] {
    font-size: 6.7708333333vw;
  }
}

.user_dorsal_container p {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .user_dorsal_container p {
    font-size: 1.25vw;
  }
}

.team_info_container .team_number, .team_info_container .partner {
  font-size: 0.8125rem;
}
@media (min-width: 1921px) {
  .team_info_container .team_number, .team_info_container .partner {
    font-size: 0.6770833333vw;
  }
}

.team_info_container .team_name, .team_info_container .person_name {
  font-size: 1.25rem;
}
@media (min-width: 1921px) {
  .team_info_container .team_name, .team_info_container .person_name {
    font-size: 1.0416666667vw;
  }
}

.posts_game_container .question h2 {
  font-size: 1.5rem;
}
@media (min-width: 1921px) {
  .posts_game_container .question h2 {
    font-size: 1.25vw;
  }
}

.posts_game_container .question p {
  font-size: 1.25rem;
}
@media (min-width: 1921px) {
  .posts_game_container .question p {
    font-size: 1.0416666667vw;
  }
}

.posts_game_container .square.big,
.well_done_container .square.big {
  font-size: 1.875rem;
}
@media (min-width: 1921px) {
  .posts_game_container .square.big,
  .well_done_container .square.big {
    font-size: 1.5625vw;
  }
}

.posts_game_container .square.medium,
.well_done_container .square.medium {
  font-size: 1.5625rem;
}
@media (min-width: 1921px) {
  .posts_game_container .square.medium,
  .well_done_container .square.medium {
    font-size: 1.3020833333vw;
  }
}

.posts_game_container .square.small,
.well_done_container .square.small {
  font-size: 1.125rem;
}
@media (min-width: 1921px) {
  .posts_game_container .square.small,
  .well_done_container .square.small {
    font-size: 0.9375vw;
  }
}

.pong_game_container .score {
  font-size: 3.25rem;
}
@media (min-width: 1921px) {
  .pong_game_container .score {
    font-size: 2.7083333333vw;
  }
}

.pong_game_container .messages .ballon {
  font-size: 1.5625rem;
}
@media (min-width: 1921px) {
  .pong_game_container .messages .ballon {
    font-size: 1.3020833333vw;
  }
}

.pong_game_container .messages .ballon.emoji {
  font-size: 3.125rem;
}
@media (min-width: 1921px) {
  .pong_game_container .messages .ballon.emoji {
    font-size: 2.6041666667vw;
  }
}

.congratulations_container h2 {
  font-size: 4.375rem;
}
@media (min-width: 1921px) {
  .congratulations_container h2 {
    font-size: 3.6458333333vw;
  }
}

.congratulations_container h2 span {
  font-size: 2.25rem;
}
@media (min-width: 1921px) {
  .congratulations_container h2 span {
    font-size: 1.875vw;
  }
}

.congratulations_container h2 + p {
  font-size: 1.75rem;
}
@media (min-width: 1921px) {
  .congratulations_container h2 + p {
    font-size: 1.4583333333vw;
  }
}

.congratulations_container .sonar_wrapper + p {
  font-size: 2rem;
}
@media (min-width: 1921px) {
  .congratulations_container .sonar_wrapper + p {
    font-size: 1.6666666667vw;
  }
}

.end_journey_container h2 {
  font-size: 2.25rem;
}
@media (min-width: 1921px) {
  .end_journey_container h2 {
    font-size: 1.875vw;
  }
}

.end_journey_container p {
  font-size: 1.75rem;
}
@media (min-width: 1921px) {
  .end_journey_container p {
    font-size: 1.4583333333vw;
  }
}

.lead_form_container p {
  font-size: 1.75rem;
}
@media (min-width: 1921px) {
  .lead_form_container p {
    font-size: 1.4583333333vw;
  }
}

.team_store_container .checkbox_group_container input + label,
.lead_form_container .checkbox_group_container input + label {
  font-size: 1.125rem;
}
@media (min-width: 1921px) {
  .team_store_container .checkbox_group_container input + label,
  .lead_form_container .checkbox_group_container input + label {
    font-size: 0.9375vw;
  }
}

.thank_you_container span {
  font-size: 3.75rem;
}
@media (min-width: 1921px) {
  .thank_you_container span {
    font-size: 3.125vw;
  }
}

.terms_modal h1 {
  font-size: 1.75rem;
}
@media (min-width: 1921px) {
  .terms_modal h1 {
    font-size: 1.4583333333vw;
  }
}

.terms_modal h2 {
  font-size: 1.375rem;
}
@media (min-width: 1921px) {
  .terms_modal h2 {
    font-size: 1.1458333333vw;
  }
}

.terms_modal h3 {
  font-size: 1.125rem;
}
@media (min-width: 1921px) {
  .terms_modal h3 {
    font-size: 0.9375vw;
  }
}

.terms_modal h4 {
  font-size: 1rem;
}
@media (min-width: 1921px) {
  .terms_modal h4 {
    font-size: 0.8333333333vw;
  }
}

.terms_modal p, .terms_modal li {
  font-size: 0.875rem;
}
@media (min-width: 1921px) {
  .terms_modal p, .terms_modal li {
    font-size: 0.7291666667vw;
  }
}

.form_error, .team_store_container .input_group_container input,
.lead_form_container .input_group_container input {
  font-weight: 300;
}

.well_done_container .product_container h3 span, .congratulations_container h2 span {
  font-weight: 400;
}

.start_panel_container p {
  font-weight: 500;
}

.well_done_container .product_container .text p:last-child, .well_done_container .product_container p span, .well_done_container .product_container h3, .posts_game_container .question h2, .thank_you_container span, .lead_form_container p span, .end_journey_container p span, .end_journey_container h2 span, .end_journey_container h2, .congratulations_container h2 strong, .congratulations_container h2, .team_info_container .team_name, .team_info_container .person_name, .team_info_container .team_number, .team_info_container .partner, .sonar_emitter h5, .next_table_container h2 span, .well_done_container h4, .game_intro_container h2 strong, .game_intro_container p strong,
.game_rules_container p strong,
.well_done_container p strong, .game_intro_container h2 span,
.game_rules_container h2 span,
.well_done_container h2 span, .game_general_rules_container p, .game_general_rules_container li strong, .slot_dorsal_container p, .team_store_container h6,
.lead_form_container h6, .user_dorsal_container p span, .user_dorsal_container h5 span, .user_dorsal_container h2, .introduction_end_panel_container p:nth-child(2), .introduction_start_panel_container strong, .start_panel_container h1 strong {
  font-weight: 600;
}

.pong_game_container .score, .game_general_rules_container h4,
.game_intro_container h4,
.game_rules_container h4, .slot_dorsal_container p span, .challange_container .challange .title, .challange_container .challange .bold, .challange_container .challange .select, .team_store_container h2,
.team_store_product_container h2,
.slot_dorsal_container h2,
.game_general_rules_container h2, .introduction_end_panel_container h4, .start_panel_container h1 .span_yellow, .start_panel_container button,
.history_btn {
  font-weight: 700;
}

.login_container input[type=text], .sonar_emitter h6, .slot_dorsal li {
  font-weight: 900;
}

.posts_game_container .question h2, .thank_you_container span, .congratulations_container h2, .team_info_container .team_name, .team_info_container .person_name, .team_info_container .team_number, .team_info_container .partner, .sonar_emitter h5, .sonar_emitter h6, .next_table_container h2 span, .game_intro_container h2,
.game_rules_container h2,
.well_done_container h2, .game_general_rules_container h2, .slot_dorsal_container p span, .slot_dorsal_container h2, .challange_container .challange .title, .challange_container .challange .bold, .challange_container .challange .select, .team_store_container h6,
.lead_form_container h6, .team_store_container h2, .user_dorsal_container p span, .user_dorsal_container h5 span, .user_dorsal_container h2, .introduction_end_panel_container h4, .start_panel_container h1 .span_yellow, .start_panel_container button,
.history_btn {
  text-transform: uppercase;
}

.well_done_container .prototype_container p, .well_done_container .prototype_container h4, .well_done_container .product_container .text, .terms_modal, .form_error, .team_store_container .checkbox_group_container input + label,
.lead_form_container .checkbox_group_container input + label {
  text-align: left;
}

.posts_game_container .question, .posts_game_container .square,
.well_done_container .square, .terms_modal h1, .login_container input[type=text], .sonar_emitter .text, .next_table_container h2, .game_intro_container > .half,
.game_rules_container > .half,
.well_done_container > .half, .game_general_rules_container p,
.game_intro_container p,
.game_rules_container p, .game_general_rules_container h4,
.game_intro_container h4,
.game_rules_container h4, .user_dorsal_container p, .user_dorsal_container > .half, .start_panel_container h1, .default_panel_container,
.default_game_container, .start_panel_container button,
.history_btn {
  text-align: center;
}

.pong_game_container .messages, .team_info_container .right {
  text-align: right;
}

.well_done_container .product_container h3, .posts_game_container .square.small,
.well_done_container .square.small, .well_done_container h4, .slot_dorsal_container p, .start_panel_container p, .start_panel_container h1 {
  line-height: 125%;
}

.posts_game_container .question p, .posts_game_container .square.medium,
.well_done_container .square.medium, .posts_game_container .square.big,
.well_done_container .square.big, .congratulations_container .sonar_wrapper + p, .next_table_container h2, .game_rules_container h4, .game_rules_container p, .game_intro_container p, .game_intro_container h2,
.game_rules_container h2,
.well_done_container h2, .game_general_rules_container li, .team_store_product_container h2, .challange_container .challange .description, .team_store_container .checkbox_group_container input + label,
.lead_form_container .checkbox_group_container input + label, .introduction_end_panel_container p, .introduction_start_panel_container p {
  line-height: 140%;
}

.terms_modal p, .terms_modal li, .lead_form_container p, .end_journey_container p, .congratulations_container h2 + p, .well_done_container p, .game_general_rules_container p,
.game_intro_container p,
.game_rules_container p, .user_dorsal_container p {
  line-height: 160%;
}

.login_container input[type=text], .slot_dorsal li {
  color: var(--color-black);
}

.pong_game_container .messages, .congratulations_container h2 span, .sonar_emitter h6, .sonar_wrapper.past .sonar_emitter h5, .challange_container .challange .select, .start_panel_container button,
.history_btn, .page_content {
  color: var(--color-white);
}

.pong_game_container .score, .thank_you_container span, .congratulations_container h2, .form_error, .next_table_container h2 span, .game_intro_container h2 span,
.game_rules_container h2 span,
.well_done_container h2 span, .game_general_rules_container h4,
.game_intro_container h4,
.game_rules_container h4, .slot_dorsal_container p span, .user_dorsal_container p span, .user_dorsal_container h5 span, .user_dorsal_container h2, .team_store_container h2,
.team_store_product_container h2,
.slot_dorsal_container h2,
.game_general_rules_container h2, .introduction_end_panel_container h4, .span_yellow {
  color: var(--color-yellow);
}

.posts_game_container .middle_container, .posts_game_container .square,
.well_done_container .square, .team_info_container, .sonar_emitter h5, .sonar_wrapper.past .sonar_emitter h6, .challange_container .challange {
  color: var(--color-blue-dark);
}

.posts_game_container .middle_container, .login_container input[type=text], .sonar_wrapper:before, .challange_container .challange .wrapper, .team_store_container .input_group_container input,
.lead_form_container .input_group_container input, .slot_dorsal li {
  background-color: var(--color-white);
}

.finish_square .fill > .wrapper, div[class^=level] .block.straight, div[class^=level] .block.curve, .posts_game_container .square,
.well_done_container .square, .challange_container .challange .select {
  background-color: var(--color-yellow);
}

.challange_container .challange.active .select {
  background-color: var(--color-green);
}

.finish_square, div[class^=level] .block.fill.straight, div[class^=level] .block.fill.curve {
  background-color: var(--color-blue);
}

.pipes_game_container, .terms_modal > .content > .wrapper {
  background-color: var(--color-blue-dark);
}

.team_info_container .partner .number.green {
  background-color: var(--color-green-blue);
}

.team_info_container .partner .number.orange {
  background-color: var(--color-green-orange);
}

.page_content {
  background: linear-gradient(#023047, #012234, #023047);
}

.posts_game_container .middle_container .rotate.active, .start_panel_container button, .history_btn.fowards {
  background: radial-gradient(ellipse 70% 80% at center, rgb(235, 59, 60) -40%, rgb(240, 93, 94) 20%, rgb(235, 59, 60) 100%);
}

.sonar_wrapper.past .sonar_emitter, .history_btn.previous {
  background: radial-gradient(ellipse 70% 80% at center, #046299 -40%, #0579b3 20%, #046299 100%);
}

.posts_game_container .middle_container .rotate, .history_btn:disabled {
  background: radial-gradient(ellipse 70% 80% at center, #556675 -40%, #7a8b99 20%, #556675 100%);
}

[v-clock] {
  display: none;
}

.btn_container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.history_btn {
  position: absolute;
  max-width: 280px;
  width: 100%;
  height: 90px;
}
.history_btn.big {
  max-width: 375px;
  height: 125px;
}
.history_btn.bottom {
  bottom: 0;
}
.history_btn.bottom.previous {
  left: 0;
}
.history_btn.bottom.fowards {
  right: 0;
}
.history_btn.top {
  top: 0;
  transform: rotate(180deg);
}
.history_btn.top.previous {
  right: 0;
}
.history_btn.top.fowards {
  left: 0;
}
.history_btn.previous {
  border-top-right-radius: 45px;
}
.history_btn.fowards {
  border-top-left-radius: 45px;
}
.default_panel_container,
.default_game_container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.dual_divisor_container {
  width: 100%;
  min-height: 100vh;
}
.dual_divisor_container .half {
  position: relative;
  width: 100%;
  height: 50%;
  background: linear-gradient(#023047, #012234);
}
.dual_divisor_container .half:nth-child(1) {
  transform: rotate(180deg);
  background-color: #eee;
}

.product_container > .row {
  display: flex;
}
.product_container .product {
  display: inline-block;
}
.product_container .product.active {
  border: 3px solid red;
}
.product_container .product img {
  display: block;
}

.slot_dorsal {
  position: relative;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  height: 235px;
  margin: 0 -0.390625rem;
}
.slot_dorsal .slot {
  position: relative;
  width: 25%;
  padding: 0 0.390625rem;
  float: left;
}
.slot_dorsal ul {
  list-style: none;
  padding: 0;
}
.slot_dorsal li {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 235px;
  line-height: 211.538461538%;
}

.start_panel_container,
.introduction_end_panel_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.introduction_end_panel_container {
  padding: 9.270833333vh 4.629629629vw 9.0625vh 4.629629629vw;
}

.start_panel_container {
  padding: 13.541666666vh 4.629629629vw 9.0625vh 4.629629629vw;
}

.start_panel_container h1:not(:last-child) {
  margin-bottom: 4.166666666vh;
}
.start_panel_container .logo {
  display: block;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.start_panel_container .logo:not(:last-child) {
  margin-bottom: 9.895833333vh;
}
.start_panel_container .btn_container {
  margin-top: auto;
  margin-bottom: 0;
}
.start_panel_container button {
  max-width: 600px;
  width: 100%;
  height: 190px;
  border-radius: 2.5rem;
}
.introduction_start_panel_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.introduction_start_panel_container .sonars_container {
  max-width: 620px;
  max-height: 620px;
}

.introduction_end_panel_container .logo {
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
}
.introduction_end_panel_container .logo:not(:last-child) {
  margin-bottom: 7.552083333vh;
}
.introduction_end_panel_container p:not(:last-child) {
  margin-bottom: 4.166666666vh;
}
.congratulations_container,
.end_journey_container,
.lead_form_container,
.team_store_container,
.team_store_product_container,
.slot_dorsal_container,
.thank_you_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team_store_container,
.team_store_product_container,
.slot_dorsal_container {
  padding: 11.197916666vh 4.629629629vw;
}

.user_dorsal_container > .half,
.game_general_rules_container > .half,
.game_intro_container > .half,
.game_rules_container > .half,
.well_done_container > .half,
.next_table_container > .half {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.user_dorsal_container > .half {
  padding: 6.770833333vh 4.629629629vw;
}
.user_dorsal_container h2 {
  margin-top: 0;
  margin-bottom: auto;
}
.user_dorsal_container h5 {
  margin-top: auto;
  margin-bottom: 0;
}
.user_dorsal_container p {
  margin-bottom: auto;
}
.team_store_container h2:not(:last-child) {
  margin-bottom: 5.208333333vh;
}

.team_store_container .input_group_container:not(.team_name) {
  max-width: 675px;
}
.team_store_container .input_group_container:not(.team_name) {
  margin-bottom: 4.427083333vh;
}

.lead_form_container .input_group_container {
  max-width: 675px;
}
.lead_form_container .input_group_container:not(:last-child) {
  margin-bottom: 3.125vh;
}
.lead_form_container .checkbox_group_container {
  max-width: 675px;
}

.team_store_container h6:not(:last-child),
.lead_form_container h6:not(:last-child) {
  margin-bottom: 1.25rem;
}
.team_store_container .checkbox_group_container,
.lead_form_container .checkbox_group_container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.team_store_container .checkbox_group_container input,
.lead_form_container .checkbox_group_container input {
  width: 30px;
  height: 30px;
  border-radius: 0.625rem;
  flex: 0 0 30px;
  margin-right: 1.25rem;
}
.team_store_container .checkbox_group_container input + label,
.lead_form_container .checkbox_group_container input + label {
  width: calc(100% - 60px);
}
.team_store_container .input_group_container,
.lead_form_container .input_group_container {
  width: 100%;
  margin: 0 auto;
}
.team_store_container .input_group_container input,
.lead_form_container .input_group_container input {
  display: block;
  width: 100%;
  border: none;
  height: 110px;
  padding: 0.46875rem 2.5rem 0 2.5rem;
  border-radius: 0.9375rem;
}
.team_store_container .input_group_container input::-webkit-input-placeholder,
.lead_form_container .input_group_container input::-webkit-input-placeholder {
  font-weight: 200;
}
.team_store_container .input_group_container input:-moz-placeholder,
.lead_form_container .input_group_container input:-moz-placeholder {
  font-weight: 200;
}
.team_store_container .input_group_container input::-moz-placeholder,
.lead_form_container .input_group_container input::-moz-placeholder {
  font-weight: 200;
}
.team_store_container .input_group_container input::-ms-input-placeholder,
.lead_form_container .input_group_container input::-ms-input-placeholder {
  font-weight: 200;
}
.team_store_container .input_group_container input:-ms-input-placeholder,
.lead_form_container .input_group_container input:-ms-input-placeholder {
  font-weight: 200;
}
.team_store_container .input_group_container input:last-of-type:not(:only-of-type),
.lead_form_container .input_group_container input:last-of-type:not(:only-of-type) {
  margin-top: 1.5625rem;
}

.challange_container {
  max-width: 875px;
}
.challange_container > .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.78125rem -1.875rem;
}
.challange_container .challange {
  width: 50%;
  padding: 0 0.78125rem;
  margin-bottom: 1.875rem;
}
.challange_container .challange.active .wrapper {
  border: 2px solid var(--color-green);
}
.challange_container .challange.active .select {
  border-top: 2px solid var(--color-green);
  box-shadow: inset 0px 0px 40px 5px #1b7c39;
}
.challange_container .challange .wrapper {
  padding: 0;
  border-radius: 2.8125rem;
  border: 2px solid var(--color-blue-dark);
}
.challange_container .challange .description {
  display: flex;
  align-items: center;
  height: 250px;
  padding: 1.5625rem 1.875rem;
}
.challange_container .challange .title {
  width: calc(100% - 60px);
  margin: 0 auto;
  padding: 2.1875rem 1.875rem 1.5625rem 1.875rem;
  border-bottom: 2px solid var(--color-blue-dark);
}
.challange_container .challange .select {
  padding: 2.5rem 1.875rem;
  border-top: 1px solid var(--color-yellow);
  box-shadow: inset 0px 0px 40px 5px #e6be22;
  border-radius: 0 0 2.8125rem 2.8125rem;
}

.slot_dorsal_container {
  justify-content: center;
}
.slot_dorsal_container h2:not(:last-child) {
  margin-top: 0;
}
.slot_dorsal_container .slot_dorsal {
  margin-top: auto;
  margin-bottom: 6.770833333vh;
}
.slot_dorsal_container p {
  margin-top: 0;
  margin-bottom: auto;
}
.team_store_product_container h2:not(:last-child) {
  margin-bottom: 9.635416666vh;
}

.game_general_rules_container h2:not(:last-child) {
  margin-bottom: 3.229166666vh;
}
.game_general_rules_container ul {
  max-width: 530px;
  width: 100%;
}
.game_general_rules_container ul:not(:last-child) {
  margin-bottom: 3.385416666vh;
}
.game_general_rules_container li {
  display: inline-block;
}
.game_general_rules_container li:not(:last-child) {
  margin-bottom: 1.1041666666vh;
}
.game_general_rules_container p {
  max-width: 530px;
}
.game_general_rules_container p:not(:last-child) {
  margin-bottom: 1.822916666vh;
}
.game_intro_container h2 span,
.game_rules_container h2 span,
.well_done_container h2 span {
  display: block;
  line-height: 90%;
}
.game_intro_container p:not(:last-child),
.game_rules_container p:not(:last-child),
.well_done_container p:not(:last-child) {
  margin-bottom: 3.125vh;
}
.game_intro_container h2:not(:last-child) {
  margin-bottom: 2.083333333vh;
}
.game_intro_container h2.top span {
  margin-top: 1.302083333vh;
}
.game_intro_container h2:not(.top) span {
  margin-bottom: 1.302083333vh;
}
.game_intro_container p {
  max-width: 550px;
}

.game_rules_container h2:not(:last-child) {
  margin-bottom: 4.166666666vh;
}
.game_rules_container h2 span {
  margin-top: 1.302083333vh;
}
.game_rules_container p {
  max-width: 740px;
}
.well_done_container h2:not(:last-child) {
  margin-bottom: 2.083333333vh;
}
.well_done_container h2 span {
  margin-top: 1.302083333vh;
}
.well_done_container p {
  max-width: 550px;
}
.well_done_container .posts_container {
  max-width: 940px;
  width: 100%;
}
.well_done_container .posts_container:not(:last-child) {
  margin-bottom: 5.208333333vh;
}

.next_table_container h2:not(:last-child) {
  margin-bottom: 2.864583333vh;
}
.next_table_container .sonars_container {
  max-width: 550px;
  max-height: 550px;
}

.form_error {
  display: block;
  margin-top: 0.46875rem;
  margin-left: 0.9375rem;
}

.sonars_container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.sonars_container:not(:last-child) {
  margin-bottom: 5.208333333vh;
}
.sonars_container .sonar_wrapper {
  position: absolute;
  width: 33.870967741%;
  height: 33.870967741%;
}
.sonars_container .sonar_wrapper.problem {
  left: 0;
  bottom: 0;
}
.sonars_container .sonar_wrapper.problem:before {
  top: -10px;
  right: -10px;
  height: 30px;
  transform: rotate(45deg);
  transform-origin: center top;
}
.sonars_container .sonar_wrapper.idea {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sonars_container .sonar_wrapper.idea:before {
  top: -10px;
  left: -10px;
  height: 30px;
  transform: rotate(-45deg);
  transform-origin: center top;
}
.sonars_container .sonar_wrapper.prototype {
  top: 0;
  left: 0;
}
.sonars_container .sonar_wrapper.prototype:before {
  top: 50%;
  right: -32px;
  height: 140px;
  transform: rotate(270deg);
  transform-origin: center top;
}
.sonars_container .sonar_wrapper.product {
  top: 0;
  right: 0;
}
.sonars_container .sonar_wrapper.cup {
  right: 0;
  bottom: 0;
}

.sonar_wrapper {
  z-index: 0;
}
.sonar_wrapper.cup img {
  position: absolute;
  width: 45.625%;
  max-width: 146px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sonar_wrapper:before {
  content: "";
  position: absolute;
  width: 2px;
}

.sonar_emitter {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(242, 220, 92) 0%, rgb(232, 192, 45) 100%);
}
.sonar_emitter .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sonar_emitter h6:not(:last-child) {
  margin-bottom: 0.46875rem;
}
.sonar_wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgb(232, 192, 45);
  z-index: -1;
  pointer-events: none;
}

.team_info_container {
  position: absolute;
  pointer-events: none;
  left: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 85px;
  overflow: hidden;
  z-index: 2;
}
.team_info_container .bar {
  position: absolute;
  left: 0;
  width: 100%;
}
.team_info_container.top {
  transform-origin: top center;
}
.team_info_container.top.one {
  top: 50%;
}
.team_info_container.top.two {
  top: 50%;
}
.team_info_container.top .bar {
  top: -1px;
}
.team_info_container.bottom {
  transform-origin: center center;
}
.team_info_container.bottom.one {
  bottom: 0;
}
.team_info_container.bottom.two {
  top: 0;
}
.team_info_container.bottom .bar {
  top: 0;
}
.team_info_container.one {
  transform: translateX(-50%);
}
.team_info_container.two {
  transform: translateX(-50%) rotate(180deg);
}
.team_info_container .left, .team_info_container .right {
  position: relative;
  width: 280px;
  padding: 1.25rem 2.5rem;
  z-index: 2;
}
.team_info_container .left .team_id, .team_info_container .left .team_number, .team_info_container .right .team_id, .team_info_container .right .team_number {
  display: block;
}
.team_info_container .team_number, .team_info_container .partner {
  display: block;
  margin-bottom: 0.3125rem;
}
.team_info_container .partner .number {
  display: inline-block;
  line-height: 100%;
  padding: 0.3125rem 0.3125rem 0rem 0.3125rem;
  border-radius: 0.625rem;
  margin-left: 0.46875rem;
}
.team_info_container .team_name, .team_info_container .person_name {
  display: block;
}

.login_container {
  max-width: 845px;
  width: 100%;
  margin: 1.5625vh auto 5.729166666vh auto;
}
.login_container > .row {
  margin: 0 -0.3125rem;
}
.login_container input[type=text] {
  width: calc(25% - 10px);
  margin: 0 0.3125rem;
  height: 220px;
  line-height: 211.538461538%;
}

.congratulations_container,
.end_journey_container,
.lead_form_container {
  padding: 4.6875vh 4.629629629vw 10.416666666vh 4.629629629vw;
}
.congratulations_container .logo,
.end_journey_container .logo,
.lead_form_container .logo {
  max-width: 230px;
  width: 100%;
}
.congratulations_container .logo:not(:last-child),
.end_journey_container .logo:not(:last-child),
.lead_form_container .logo:not(:last-child) {
  margin-bottom: 3.125vh;
}

.congratulations_container h2:not(:last-child) {
  margin-bottom: 5.208333333vh;
}
.congratulations_container h2 + p {
  max-width: 640px;
  margin: 0 auto;
}
.congratulations_container h2 + p:not(:last-child) {
  margin-bottom: 9.375vh;
}
.congratulations_container h2 span {
  display: block;
  text-transform: none;
  line-height: 115%;
  margin-top: 2.083333333vh;
}
.congratulations_container .bottom {
  margin-top: auto;
  margin-bottom: 0;
}
.congratulations_container .sonar_wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
}
.congratulations_container .sonar_wrapper:not(:last-child) {
  margin-bottom: 3.645833333vh;
}
.end_journey_container .sonars_container {
  max-width: 630px;
  max-height: 630px;
}
.end_journey_container h2:not(:last-child) {
  margin-bottom: 3.125vh;
}
.end_journey_container p {
  max-width: 770px;
  margin: 0 auto;
}
.end_journey_container p:not(:last-child) {
  margin-bottom: 5.208333333vh;
}
.lead_form_container p:not(:last-child) {
  margin-bottom: 3.125vh;
}
.thank_you_container {
  justify-content: center;
}
.thank_you_container .logo {
  max-width: 480px;
  width: 100%;
}
.thank_you_container .logo:not(:last-child) {
  margin-bottom: 7.291666666vh;
}
.terms_modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.2);
}
.terms_modal > .content {
  position: relative;
  z-index: 1;
  width: 85%;
  height: 65%;
  border-radius: 1.5625rem;
  top: 3% !important;
}
.terms_modal > .content > .wrapper {
  border-radius: 1.5625rem;
  padding: 3% 4.5% 3% 4.5%;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.terms_modal > .content > .wrapper::-webkit-scrollbar {
  display: none;
}
.terms_modal h1:not(:last-child) {
  margin-bottom: 1.5625rem;
}
.terms_modal h2:not(:last-child) {
  margin-bottom: 0.9375rem;
}
.terms_modal h3:not(:last-child) {
  margin-bottom: 0.625rem;
}
.terms_modal h4:not(:last-child) {
  margin-bottom: 0.15625rem;
}
.terms_modal p:not(:last-child) {
  margin-bottom: 0.9375rem;
}
.terms_modal ul {
  list-style: circle;
  padding-left: 0.9375rem;
}
.terms_modal ul:not(:last-child) {
  margin-bottom: 0.9375rem;
}
.terms_modal li {
  display: list-item;
}
.terms_modal li:not(:last-child) {
  margin-bottom: 0.3125rem;
}

.pong_game_container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}
.pong_game_container .score {
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 50%;
}
.pong_game_container .score.top {
  top: 40px;
  transform: translateX(-50%) rotate(180deg);
}
.pong_game_container .score.bottom {
  bottom: 40px;
  transform: translateX(-50%);
}
.pong_game_container .messages {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.pong_game_container .messages.bottom {
  right: 0;
  bottom: 100px;
}
.pong_game_container .messages.top {
  top: 100px;
  left: 0;
  transform: rotate(180deg);
}
.pong_game_container .messages .ballon {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 115px;
  border: 1px solid var(--color-white);
  border-radius: 57.5px 57.5px 0 57.5px;
  padding: 0 1.875rem;
}
.pong_game_container .messages .ballon:not(:last-child) {
  margin-bottom: 0.625rem;
}

.pong_canvas {
  position: relative;
  z-index: 1;
}

.touch_area {
  position: absolute;
  width: 100%;
  height: 50%;
  touch-action: none;
  left: 0%;
  z-index: 4;
}
.touch_area.top {
  top: 0%;
}
.touch_area.bottom {
  bottom: 0%;
}

.well_done_container .genius {
  max-width: 415px;
  margin-top: -5.208333333vh;
  margin-bottom: 0;
}

.posts_game_container .square,
.well_done_container .square {
  float: left;
  position: relative;
  display: flex;
  font-family: "Marker Felt";
  letter-spacing: 1px;
}
.posts_game_container .square > .wrapper,
.well_done_container .square > .wrapper {
  padding-top: 100%;
}
.posts_game_container .square.big span,
.well_done_container .square.big span {
  padding: 1.25rem;
}
.posts_game_container .square.medium span,
.well_done_container .square.medium span {
  padding: 1.25rem;
}
.posts_game_container .square.small span,
.well_done_container .square.small span {
  padding: 0.9375rem;
}
.posts_game_container .square span,
.well_done_container .square span {
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.well_done_container .posts_container {
  max-width: 940px;
  width: 100%;
  margin: 0 -0.625rem;
}
.well_done_container .posts_container:not(:last-child) {
  margin-bottom: 5.208333333vh;
}
.well_done_container .posts_container .square {
  width: calc(25% - 20px);
  margin: 0 0.625rem;
}

.posts_game_container {
  position: relative;
  width: 100%;
  height: 100vh;
  transition: transform 0.1s ease-in-out;
}
.posts_game_container.rotated {
  transform: rotate(180deg);
}
.posts_game_container.rotated .middle_container .rotate.top {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}
.posts_game_container.rotated .middle_container .rotate.bottom {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}
.posts_game_container .squares_container {
  position: absolute;
  width: 100%;
  left: 50%;
  padding: 1.875rem 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.posts_game_container .squares_container.two {
  transform: translateX(-50%) rotate(180deg);
  top: 1.875rem;
}
.posts_game_container .squares_container.one {
  transform: translateX(-50%);
  bottom: 1.875rem;
}
.posts_game_container .squares_container .square {
  float: left;
  max-width: 215px;
  width: calc(25% - 30px);
  cursor: pointer;
  margin: 0 auto 1.5625rem auto;
}
.posts_game_container .squares_container .square.left {
  transform: rotate(-3deg);
}
.posts_game_container .squares_container .square.right {
  transform: rotate(3deg);
}
.posts_game_container .squares_container .square.rotated.left {
  transform: rotate(177deg);
}
.posts_game_container .squares_container .square.rotated.right {
  transform: rotate(183deg);
}
.posts_game_container .squares_container .square.correct, .posts_game_container .squares_container .square.wrong {
  pointer-events: none;
}
.posts_game_container .squares_container .square.correct {
  opacity: 0;
}
.posts_game_container .squares_container .square.wrong:after {
  content: "";
}
.posts_game_container .squares_container .square:nth-child(1), .posts_game_container .squares_container .square:nth-child(2), .posts_game_container .squares_container .square:nth-child(3), .posts_game_container .squares_container .square:nth-child(6), .posts_game_container .squares_container .square:nth-child(7), .posts_game_container .squares_container .square:nth-child(10) {
  top: -30px;
}
.posts_game_container .squares_container .square:nth-child(4), .posts_game_container .squares_container .square:nth-child(5), .posts_game_container .squares_container .square:nth-child(8), .posts_game_container .squares_container .square:nth-child(9) {
  top: 45px;
}
.posts_game_container .squares_container .square:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/images/crossed.svg");
}
.posts_game_container .squares_container .square:nth-child(1) {
  margin-right: calc(50% + 15px);
}
.posts_game_container .middle_container {
  position: absolute;
  max-width: 550px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3.125rem 3.125rem 6.25rem 3.125rem;
  border-radius: 1.875rem;
  z-index: 10;
}
.posts_game_container .middle_container .rotate {
  position: absolute;
  width: 85px;
  height: 85px;
  border-radius: 1.875rem 0 1.875rem 0;
  pointer-events: none;
}
.posts_game_container .middle_container .rotate:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/images/rotate.svg");
  background-position: center center;
  background-size: auto 40px;
  background-repeat: no-repeat;
}
.posts_game_container .middle_container .rotate.active {
  pointer-events: auto;
}
.posts_game_container .middle_container .rotate.top {
  top: 0;
  left: 0;
}
.posts_game_container .middle_container .rotate.bottom {
  bottom: 0;
  right: 0;
}
.posts_game_container .answers_spots {
  width: 100%;
}
.posts_game_container .answers_spots > .row {
  margin: 0rem -0.46875rem;
}
.posts_game_container .answers_spots .spot {
  width: calc(50% - 15px);
  margin: 0 0.46875rem 0.9375rem 0.46875rem;
  float: left;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23f2dc5d' stroke-width='3' stroke-dasharray='10' stroke-dashoffset='43' stroke-linecap='square'/%3e%3c/svg%3e");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repaat;
}
.posts_game_container .answers_spots .spot.visible .square {
  opacity: 1;
}
.posts_game_container .answers_spots .spot:nth-last-child(1), .posts_game_container .answers_spots .spot:nth-last-child(2) {
  margin-bottom: 0rem;
}
.posts_game_container .answers_spots .spot .square {
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.posts_game_container .question:not(:last-child) {
  margin-bottom: 2.8125rem;
}
.posts_game_container .question h2:not(:last-child) {
  margin-bottom: 1.5625rem;
}
.posts_game_container .sentences_container {
  width: 50%;
}
.posts_game_container .sentences_container li {
  width: 100%;
}
.posts_game_container .sentences_container li.right {
  color: white;
  background-color: green;
}

#win,
#finished {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  color: inherit;
  z-index: 9999;
  display: none;
}
#win .text,
#finished .text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 40px;
  font-weight: 100;
  transform: translate3d(-50%, -50%, 0);
}

.panel_introduction_container {
  width: 100%;
  min-height: 100vh;
}

.pipes_game_container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div[class^=level] {
  position: relative;
  width: 910px;
  margin: 12.1875rem -0.3125rem 0 -0.3125rem;
}
div[class^=level]:before {
  content: url("/images/pipes-start.png");
  width: 115px;
  position: absolute;
  top: -195px;
  left: 3px;
}
div[class^=level] .text {
  font-size: 19px;
  padding-top: 20px;
  clear: both;
  overflow: hidden;
}
div[class^=level] .text.center {
  text-align: center;
}
div[class^=level] .text span {
  padding: 10px 0 0;
  font-size: 15px;
  display: block;
}
div[class^=level] .block {
  position: relative;
  width: 120px;
  height: 120px;
  float: left;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
  margin: 0rem 0.3125rem 0.625rem 0.3125rem;
}
div[class^=level] .block.fill.straight, div[class^=level] .block.fill.curve {
  border-radius: 0.9375rem;
}
div[class^=level] .block.fill.straight svg .background, div[class^=level] .block.fill.curve svg .background {
  fill: var(--color-blue);
}
div[class^=level] .block.fill.straight svg .path, div[class^=level] .block.fill.curve svg .path {
  fill: var(--color-yellow);
}
div[class^=level] .block.r1 {
  transform: rotate(0deg);
}
div[class^=level] .block.r2 {
  transform: rotate(90deg);
}
div[class^=level] .block.r3 {
  transform: rotate(180deg);
}
div[class^=level] .block.r4 {
  transform: rotate(270deg);
}
div[class^=level] .block.r5 {
  transform: rotate(360deg);
}
div[class^=level] .block svg {
  width: 120px;
  height: 120px;
}
div[class^=level] .block svg .background, div[class^=level] .block svg .path {
  transition: fill 0.35s ease-in-out;
}

.finish_square {
  position: absolute;
  top: 389px;
  left: 265px;
  width: 381px;
  height: 381px;
  border-radius: 2.5rem;
}
.finish_square img {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 103%;
}
.finish_square img.shadows {
  z-index: 1;
}
.finish_square img.mask {
  z-index: 3;
}
.finish_square .fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  overflow: hidden;
  z-index: 2;
}
.finish_square .fill > .wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 381px;
  border-radius: 2.5rem;
}

.well_done_container .product_container {
  max-width: 920px;
  width: 100%;
  display: flex;
}
.well_done_container .product_container h3:not(:last-child) {
  margin-bottom: 1.5625vh;
}
.well_done_container .product_container p:not(:last-child) {
  margin-bottom: 1.5625vh;
}
.well_done_container .product_container .text {
  width: calc(100% - 470px);
  padding-right: 0.9375rem;
}
.well_done_container .product_container .image {
  width: 470px;
}
.well_done_container .product_container .image img {
  width: 100%;
}
.well_done_container .product_container .description:not(:last-child) {
  margin-bottom: 1.5625vh;
}

.puzzle_game_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.puzzle_game_container .puzzle_container {
  position: relative;
  max-width: 810px;
  width: 100%;
}
.puzzle_game_container .puzzle_container img {
  width: 100%;
}
.puzzle_game_container .puzzle_container .dropzones_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.puzzle_game_container .drag_item {
  position: absolute;
  width: 25%;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translate(0px, 0px);
  z-index: 3;
}
.puzzle_game_container .drag_item.dropped {
  pointer-events: none;
  z-index: 1;
  transform: none !important;
  opacity: 0;
}
.puzzle_game_container .drag_item img {
  width: 100%;
  pointer-events: none;
}
.puzzle_game_container .dropzone {
  position: absolute;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}
.puzzle_game_container .dropzone.filled {
  opacity: 1;
}
.puzzle_game_container .dropzone.active {
  z-index: 2;
}
.puzzle_game_container .dropzone img {
  width: 100%;
}

.well_done_container .prototype_container {
  max-width: 920px;
  display: flex;
  align-items: center;
}
.well_done_container .prototype_container .text {
  width: calc(100% - 420px);
  padding-right: 1.875rem;
}
.well_done_container .prototype_container h4:not(:last-child) {
  margin-bottom: 1.25rem;
}
.well_done_container .prototype_container p:not(:last-child) {
  margin-bottom: 1.25rem;
}
.well_done_container .product {
  max-width: 420px;
  max-height: 420px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.sonar_wave {
  opacity: 0;
}

.sonar_wrapper.active .sonar_wave1 {
  animation: sonarWave 2s linear infinite;
}
.sonar_wrapper.active .sonar_wave2 {
  animation: sonarWave 2s 0.5s linear infinite;
}
.sonar_wrapper.active .sonar_wave3 {
  animation: sonarWave 2s 1s linear infinite;
}
.sonar_wrapper.active .sonar_wave4 {
  animation: sonarWave 2s 1.5s linear infinite;
}

.pong_game_container .messages .ballon {
  transform: translateY(100%);
  opacity: 0;
  transition: opacity 0.25s ease-in-out, transform 0.35s ease-in-out;
}
.pong_game_container .messages .ballon.fadeIn {
  transform: translateY(0%);
  opacity: 1;
}
.pong_game_container .messages .ballon.fadeOut {
  transform: translateY(-100%);
  opacity: 0;
}

@keyframes sonarWave {
  from {
    opacity: 0.4;
  }
  to {
    transform: scale(1.3);
    opacity: 0;
  }
}