@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: fill-available;
  height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  min-height: 100vh;
  min-height: fill-available;
  min-height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1.2vw;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

.js-cont {
  position: relative;
  width: 100%;
  height: 100%;
}

.js-scroll {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  will-change: transform;
}

.full-screen {
  height: 100%;
}

/* ------------------------ */
.invisible {
  visibility: hidden;
}

.novisible {
  display: none;
}

/* Titular que leen los lectores de pantalla y los buscadores, pero que no se
   ve. Se usa en las pantallas del juego (niveles, texto, final), donde el
   diseno no tiene sitio para un titular visible pero la pagina igualmente
   necesita su h1 y su h2.
   OJO: no vale display:none ni visibility:hidden - eso lo esconde tambien
   para el lector de pantalla y para Google, que es justo lo contrario. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-desktop {
  display: none;
  height: 100vh;
}

.no-responsive {
  display: initial;
}

.no-mobile {
  display: initial;
}

.only-mobile {
  display: none;
}

.no-touch {
  display: initial;
}

.no-scroll {
  overflow: hidden !important;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

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

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

.acenter {
  text-align: center;
}

.wfull {
  width: 100%;
}

.w100 {
  max-width: 1600px;
  margin: auto;
  padding: 0 90px;
}

.w80 {
  width: 80%;
  max-width: 1400px;
  margin: auto;
}

.ofcover {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ofcontain {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.vcenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} /* siempre dentro de un relative */
.slider .flickity-page-dots {
  bottom: -30px;
}

.slider .flickity-page-dots .dot {
  background: none;
  border: solid 1px #000000;
}

.slider.dots-dentro .flickity-page-dots {
  bottom: 20px;
}

.slider.dots-dentro .flickity-page-dots .dot {
  background: none;
  border: solid 1px #FFFFFF;
}

.mt-1 {
  margin-top: 20vh;
}

.transitionall {
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.dot {
  height: 6px;
  width: 6px;
  background-color: #FFFFFF;
  border-radius: 50%;
  display: block;
}

.overflowhidden {
  overflow: hidden;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.felx {
  display: flex;
}

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

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

.bounce-v {
  animation-name: bounce-v;
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes bounce-v {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce-h {
  animation-name: bounce-h;
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes bounce-h {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-15%);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-float-v-6 {
  animation-name: bounce-float-v;
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.bounce-float-v-9 {
  animation-name: bounce-float-v;
  animation-timing-function: ease-in-out;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}

.bounce-float-v-12 {
  animation-name: bounce-float-v;
  animation-timing-function: ease-in-out;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes bounce-float-v {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5%);
  }
  100% {
    transform: translateY(0);
  }
}
@media (max-width: 1024px) {
  .no-desktop {
    display: initial;
  }
  .no-responsive {
    display: none;
  }
}
@media (max-width: 767px) {
  .no-mobile {
    display: none;
  }
  .only-mobile {
    display: initial;
  }
}
@media (hover: none) {
  .no-touch {
    display: none;
  }
}
:root {
  --mediaIpad: 1080px;
}

:root {
  --mediaPhone: 767px;
}

:root {
  --mediaMax: 1600px;
}

body {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-color: #0D0D0D;
}
body.loaded {
  opacity: 1;
}

h1 {
  font-family: "Graphik";
}

h2 {
  font-family: "Graphik";
}

a {
  font-family: "Graphik";
}

p {
  font-family: "Graphik";
  line-height: 130%;
  font-size: clamp(14px, 2vw, 18px);
  color: #FFFFFF;
}

strong {
  font-weight: 800;
}

.color-corporativo {
  color: #96F092;
}

.max-width {
  max-width: 1600px;
  margin: auto;
}

.general-padding {
  padding: 3vw;
}

.lite-padding {
  padding: 1.5vw;
}

.glass-effect {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.bg-black {
  background-color: #0D0D0D;
}

/* ---------------------btns------------------- */
.default-btn {
  border-radius: 100px;
  background-color: #96F092;
  padding: 8px 12px 6px;
  display: flex;
  height: fit-content;
  width: fit-content;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  border: 1px solid #96F092;
  min-width: 80px;
}
.default-btn p {
  color: #0D0D0D;
  font-size: 16px;
}
.default-btn:not(.no-hover):hover {
  background-color: #0D0D0D;
  border: 1px solid #96F092;
}
.default-btn:not(.no-hover):hover p {
  color: #96F092;
}
.default-btn.ins {
  border: 1px solid #0D0D0D;
}
.default-btn.ins p {
  font-family: "Instrument";
  font-size: 20px;
  padding-bottom: 4px;
}
.default-btn.ins:not(.no-hover):hover {
  border: 1px solid #96F092;
}
.default-btn.no-hover {
  cursor: default;
}

/* 1/10/2026 — CENTRADO VERTICAL DEL TEXTO DE LAS PASTILLAS (tanda
   `templates_centrado_pills_movil`).
   El sitio del texto dentro de la pastilla dependía de las medidas internas de
   cada fuente, y Safari (iPhone) no aplica los `*-override` de `fonts.scss`:
   ahí el texto en Graphik quedaba ~2px bajo. `text-box` recorta la caja del
   <p> a la altura de las mayúsculas (de su parte de arriba a la línea base),
   así que el centrado ya no depende de la fuente ni del navegador. Los
   márgenes devuelven lo recortado (1lh - 1cap) para que la pastilla mida lo
   mismo que antes, y el -1/+1px compensa el reparto 8/6 del padding.
   Solo entra donde se soporta (Safari 18.2+, Chrome/Edge 133+); el resto
   sigue como estaba. */
@supports (text-box: trim-both cap alphabetic) {
  .default-btn p {
    text-box: trim-both cap alphabetic;
    margin-top: calc((1lh - 1cap) / 2 - 1px);
    margin-bottom: calc((1lh - 1cap) / 2 + 1px);
  }
  .default-btn.ins p {
    margin-top: calc((1lh - 1cap) / 2 + 1px);
    margin-bottom: calc((1lh - 1cap) / 2 - 1px);
  }
}
/* -----------form--------- */
.jolasa-form {
  font-family: "Graphik";
  color: #96F092;
}
.jolasa-form .campo {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.jolasa-form .campo label {
  font-size: clamp(14px, 2vw, 18px);
}
.jolasa-form .campo textarea,
.jolasa-form .campo input[type=email],
.jolasa-form .campo input[type=text] {
  padding: 10px 1rem;
  border: 1px solid #96F092;
  border-radius: 100px;
  background-color: transparent;
  font-size: clamp(14px, 2vw, 18px);
  color: #FFFFFF;
  width: 20vw;
  font-family: "Graphik";
  resize: none;
  line-height: 1.2;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  text-align: center;
}
.jolasa-form .campo textarea:focus,
.jolasa-form .campo input[type=email]:focus,
.jolasa-form .campo input[type=text]:focus {
  outline: none;
  border-color: #96F092;
  box-shadow: 0 0 0 3px rgba(150, 240, 146, 0.1);
}
.jolasa-form .campo textarea::placeholder,
.jolasa-form .campo input[type=email]::placeholder,
.jolasa-form .campo input[type=text]::placeholder {
  color: #FFFFFF;
}
.jolasa-form .campo.checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.jolasa-form .campo.checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #96F092;
  flex: 0 0 auto;
  margin-top: 1px;
}
.jolasa-form .campo.checkbox label {
  font-weight: normal;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
}
.jolasa-form .campo.checkbox label a {
  color: #96F092;
  text-decoration: underline;
}
.jolasa-form .campo.checkbox label a:hover {
  color: #96F092;
}
.jolasa-form .form_msg {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.3;
  margin-bottom: 20px;
  min-height: 1.2em;
}
.jolasa-form .form_msg:empty {
  margin-bottom: 0;
  min-height: 0;
}
.jolasa-form .form_msg.is_error {
  color: #ff5252;
}
.jolasa-form .form_msg.is_ok {
  color: #96F092;
}
.jolasa-form button[type=submit] {
  background-color: #96F092;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s active;
}
.jolasa-form button[type=submit]:hover {
  background-color: #96F092;
}
.jolasa-form button[type=submit]:active {
  transform: scale(0.98);
}
.jolasa-form button[type=submit]:disabled {
  background-color: #c1f6bf;
  cursor: not-allowed;
}
.jolasa-form button[type=submit]:hover {
  background-color: #0D0D0D;
  border: 1px solid #96F092;
}
.jolasa-form button[type=submit]:hover p {
  color: #96F092;
}

/* -----------gracias por jugar--------- */
.jolasa-gracias {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jolasa-gracias .default-btn {
  margin-top: 1rem;
}

/* ----------fin-form--------- */
@media only screen and (max-width: 1080px) {
  /* -----------form--------- */
  .jolasa-form .campo textarea,
.jolasa-form .campo input[type=email],
.jolasa-form .campo input[type=text] {
    width: 40vw;
  }
  /* ----------fin-form--------- */
}
@media only screen and (max-width: 767px) {
  /* -----------form--------- */
  .jolasa-form .campo textarea,
.jolasa-form .campo input[type=email],
.jolasa-form .campo input[type=text] {
    width: 80vw;
  }
  /* ----------fin-form--------- */
}
header {
  position: fixed;
  height: min(max(35px, 6vw), 80px);
  width: 100%;
  top: 0;
  z-index: 99;
}
header div.header__container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: min(max(35px, 6vw), 80px);
}
header div.header__container .header-logo img {
  width: 3rem;
}

@media only screen and (max-width: 1024px) {
  header {
    height: 5rem;
  }
  header div.header__container {
    height: 5rem;
  }
  header div.header__container .header-logo img {
    width: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  header {
    height: 4rem;
  }
  header div.header__container {
    height: 4rem;
  }
  header div.header__container .header-logo img {
    width: 3rem;
  }
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Light.woff2") format("woff2"), url("../fonts/Graphik-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  ascent-override: 81.787%;
  descent-override: 18.213%;
  line-gap-override: 10.01%;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Regular.woff2") format("woff2"), url("../fonts/Graphik-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  ascent-override: 81.787%;
  descent-override: 18.213%;
  line-gap-override: 10.01%;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Medium.woff2") format("woff2"), url("../fonts/Graphik-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 82.08%;
  descent-override: 17.92%;
  line-gap-override: 10.01%;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Semibold.woff2") format("woff2"), url("../fonts/Graphik-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  ascent-override: 82.178%;
  descent-override: 17.822%;
  line-gap-override: 10.01%;
}
@font-face {
  font-family: "Instrument";
  src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"), url("../fonts/InstrumentSerif-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VCR";
  src: url("../fonts/VCROSDMono.woff2") format("woff2"), url("../fonts/VCROSDMono.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
section.default_hero {
  height: 100vh;
  position: relative;
}
section.default_hero video {
  position: absolute;
}
section.default_hero div.wrap {
  height: 100%;
  width: 100%;
  text-align: center;
}
section.default_hero div.wrap div.hero-content {
  position: relative;
  z-index: 1;
  width: 45vw;
  max-width: 700px;
}
section.default_hero div.wrap div.hero-content .title {
  padding-bottom: 1.5vw;
}
section.default_hero div.wrap div.hero-content .title p, section.default_hero div.wrap div.hero-content .title h1, section.default_hero div.wrap div.hero-content .title h2 {
  font-family: "VCR";
  color: #96F092;
  font-size: clamp(24px, 3vw, 38px);
}
section.default_hero div.wrap div.hero-content .hero-text {
  padding-bottom: 1.5vw;
}
section.default_hero div.wrap div.hero-content .hero-text p {
  padding-bottom: 1.5vw;
}
section.default_hero div.wrap div.hero-content .hero-nav .default-btn {
  margin-bottom: 1rem;
}

@media only screen and (max-width: 1080px) {
  section.default_hero {
    height: 100vh;
  }
  section.default_hero div.wrap {
    padding-top: min(max(35px, 6vw), 80px);
  }
  section.default_hero div.wrap div.hero-content {
    width: 70vw;
  }
  section.default_hero div.wrap div.hero-content .hero-text {
    padding-bottom: 1.5vw;
  }
  section.default_hero div.wrap div.hero-content .hero-nav .default-btn {
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  section.default_hero {
    height: 100vh;
  }
  section.default_hero div.wrap {
    padding-top: min(max(35px, 6vw), 80px);
  }
  section.default_hero div.wrap div.hero-content {
    width: 90vw;
  }
  section.default_hero div.wrap div.hero-content .title {
    padding-bottom: 3vw;
  }
  section.default_hero div.wrap div.hero-content .hero-text {
    padding-bottom: 1.5vw;
  }
  section.default_hero div.wrap div.hero-content .hero-nav .default-btn {
    margin-bottom: 1rem;
  }
}
section.default_differences {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-top: min(max(35px, 6vw), 80px);
  padding-bottom: min(max(35px, 6vw), 80px);
}
section.default_differences div.wrap {
  display: flex;
  position: relative;
  width: 100%;
}
section.default_differences div.wrap div.differences-nav {
  position: fixed;
  width: 100%;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
section.default_differences div.wrap .left, section.default_differences div.wrap .right {
  width: 50%;
  position: relative;
  cursor: crosshair;
  overflow: hidden;
  aspect-ratio: 1.35/1;
}
section.default_differences div.wrap .left img, section.default_differences div.wrap .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
section.default_differences div.wrap .left .okey-btn, section.default_differences div.wrap .right .okey-btn {
  position: absolute;
  z-index: 100;
  display: block !important;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: inherit;
}
section.default_differences div.wrap .left .okey-btn.level-1, section.default_differences div.wrap .right .okey-btn.level-1 {
  top: 40%;
  left: 85%;
  width: 8vw;
  height: 8vw;
}
section.default_differences div.wrap .left .okey-btn.level-2, section.default_differences div.wrap .right .okey-btn.level-2 {
  top: 19%;
  left: 55%;
  width: 8vw;
}
section.default_differences div.wrap .left .okey-btn.level-3, section.default_differences div.wrap .right .okey-btn.level-3 {
  top: 75%;
  left: 69%;
}
section.default_differences div.wrap .left .okey-btn.level-4, section.default_differences div.wrap .right .okey-btn.level-4 {
  top: 31%;
  left: 55%;
  width: 13vw;
}
section.default_differences div.wrap .left .okey-btn.level-5, section.default_differences div.wrap .right .okey-btn.level-5 {
  top: 23%;
  left: 45%;
  height: 14vw;
}
section.default_differences div.wrap .left .okey-btn.level-6, section.default_differences div.wrap .right .okey-btn.level-6 {
  top: 36%;
  left: 30%;
}
section.default_differences div.wrap .left .okey-btn.level-7, section.default_differences div.wrap .right .okey-btn.level-7 {
  top: 80%;
  left: 27%;
  width: 10vw;
}
section.default_differences div.wrap .left .okey-btn.level-8, section.default_differences div.wrap .right .okey-btn.level-8 {
  top: 15%;
  left: 57%;
}
section.default_differences div.wrap .left .click-feedback, section.default_differences div.wrap .right .click-feedback {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: fadeOut 1s forwards;
  z-index: 101;
}
section.default_differences div.wrap .left .click-feedback.error, section.default_differences div.wrap .right .click-feedback.error {
  border-color: red;
  background: rgba(255, 0, 0, 0.2);
}
section.default_differences div.wrap .left .click-feedback.success, section.default_differences div.wrap .right .click-feedback.success {
  border-color: #00FF00;
  background: rgba(0, 255, 0, 0.2);
}
section.default_differences div.wrap .left {
  border-right: 1px solid white;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  }
}
@media only screen and (min-width: 1600px) {
  section.default_differences {
    padding-top: min(max(35px, 6vw), 80px);
    padding-bottom: min(max(35px, 6vw), 80px);
  }
  section.default_differences div.wrap .left .okey-btn, section.default_differences div.wrap .right .okey-btn {
    width: 140px;
    height: 140px;
  }
  section.default_differences div.wrap .left .click-feedback, section.default_differences div.wrap .right .click-feedback {
    width: 140px;
    height: 140px;
  }
}
@media only screen and (max-width: 1080px) {
  section.default_differences {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  section.default_differences div.wrap {
    flex-direction: column;
  }
  section.default_differences div.wrap .left, section.default_differences div.wrap .right {
    width: 100%;
  }
  section.default_differences div.wrap .left .okey-btn.level-1, section.default_differences div.wrap .right .okey-btn.level-1 {
    top: 38%;
    left: 83%;
    width: 5rem;
    height: 5rem;
  }
  section.default_differences div.wrap .left .okey-btn.level-2, section.default_differences div.wrap .right .okey-btn.level-2 {
    top: 14%;
    left: 50%;
    width: 5rem;
    height: 5rem;
  }
  section.default_differences div.wrap .left .okey-btn.level-3, section.default_differences div.wrap .right .okey-btn.level-3 {
    top: 67%;
    left: 69%;
    width: 5rem;
    height: 5rem;
  }
  section.default_differences div.wrap .left .okey-btn.level-4, section.default_differences div.wrap .right .okey-btn.level-4 {
    top: 27%;
    left: 53%;
    width: 7rem;
    height: 5rem;
  }
  section.default_differences div.wrap .left .okey-btn.level-5, section.default_differences div.wrap .right .okey-btn.level-5 {
    top: 23%;
    left: 40%;
    width: 5rem;
    height: 7rem;
  }
  section.default_differences div.wrap .left .okey-btn.level-6, section.default_differences div.wrap .right .okey-btn.level-6 {
    top: 30%;
    left: 30%;
    width: 5rem;
    height: 5rem;
  }
  section.default_differences div.wrap .left .okey-btn.level-7, section.default_differences div.wrap .right .okey-btn.level-7 {
    top: 71%;
    left: 27%;
    width: 5rem;
    height: 5rem;
  }
  section.default_differences div.wrap .left .okey-btn.level-8, section.default_differences div.wrap .right .okey-btn.level-8 {
    top: 15%;
    left: 55%;
    width: 5rem;
    height: 5rem;
  }
  section.default_differences div.wrap .left {
    border-right: 0px;
    border-bottom: 1px solid white;
  }
}
section.default_text_page {
  background-color: #96F092;
  height: 100vh;
  width: 100%;
}
section.default_text_page div.wrap {
  justify-content: center;
  height: 100%;
}
section.default_text_page div.wrap div.content {
  width: 50%;
  max-width: 800px;
}
section.default_text_page div.wrap div.content div.text {
  height: fit-content;
  padding-bottom: 1.5vw;
}
section.default_text_page div.wrap div.content div.text h1, section.default_text_page div.wrap div.content div.text h2 {
  font-size: clamp(34px, 10vw, 38px);
  padding-bottom: 1.5vw;
}
section.default_text_page div.wrap div.content div.text p.text-writting {
  visibility: hidden;
  line-height: 1.6;
  color: #0D0D0D;
}
section.default_text_page div.wrap div.content div.bottom {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
section.default_text_page div.wrap div.content div.bottom a {
  transition: 0.3s;
}
section.default_text_page div.wrap div.content div.bottom a:hover {
  margin-left: 15px;
}

@media only screen and (max-width: 767px) {
  section.default_text_page {
    padding-top: 0px;
  }
  section.default_text_page div.wrap {
    padding-top: 7.5rem;
    padding-bottom: 5rem;
  }
  section.default_text_page div.wrap div.content {
    width: 85%;
    height: 90%;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
  }
  section.default_text_page div.wrap div.content div.text {
    height: fit-content;
    padding-bottom: 1.5vw;
  }
  section.default_text_page div.wrap div.content div.text h1, section.default_text_page div.wrap div.content div.text h2 {
    padding-bottom: 3vw;
  }
  section.default_text_page div.wrap div.content div.bottom {
    width: 100%;
    justify-content: flex-start;
  }
}

/*# sourceMappingURL=app.min.css.map */