@charset "UTF-8";
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: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

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

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

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

a img { border: none; }

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

/*** COLORI  ***/
/*** COLORI ***/
/*** COLORI ECOSISTEMI ***/
/* Lista delle famiglie di font, per ogni famiglia inserisco la variabile e la sua posizione */
@font-face { font-family: "Lato-Black"; src: url("../font/Lato-Black.eot"); src: url("../font/Lato-Black.ttf") format("truetype"), url("../font/Lato-Black.eot?#iefix") format("embedded-opentype"), url("../font/Lato-Black.otf"), url("../font/Lato-Black.svg#Lato-Black") format("svg"), url("../font/Lato-Black.woff") format("woff"); }
@font-face { font-family: "Lato-BlackItalic"; src: url("../font/Lato-BlackItalic.eot"); src: url("../font/Lato-BlackItalic.ttf") format("truetype"), url("../font/Lato-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../font/Lato-BlackItalic.otf"), url("../font/Lato-BlackItalic.svg#Lato-BlackItalic") format("svg"), url("../font/Lato-BlackItalic.woff") format("woff"); }
@font-face { font-family: "Lato-Bold"; src: url("../font/Lato-Bold.eot"); src: url("../font/Lato-Bold.ttf") format("truetype"), url("../font/Lato-Bold.eot?#iefix") format("embedded-opentype"), url("../font/Lato-Bold.otf"), url("../font/Lato-Bold.svg#Lato-Bold") format("svg"), url("../font/Lato-Bold.woff") format("woff"); }
@font-face { font-family: "Lato-BoldItalic"; src: url("../font/Lato-BoldItalic.eot"); src: url("../font/Lato-BoldItalic.ttf") format("truetype"), url("../font/Lato-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../font/Lato-BoldItalic.otf"), url("../font/Lato-BoldItalic.svg#Lato-BoldItalic") format("svg"), url("../font/Lato-BoldItalic.woff") format("woff"); }
@font-face { font-family: "Lato-Regular"; src: url("../font/Lato-Regular.eot"); src: url("../font/Lato-Regular.ttf") format("truetype"), url("../font/Lato-Regular.eot?#iefix") format("embedded-opentype"), url("../font/Lato-Regular.otf"), url("../font/Lato-Regular.svg#Lato-Regular") format("svg"), url("../font/Lato-Regular.woff") format("woff"); }
@font-face { font-family: "Lato-Italic"; src: url("../font/Lato-Italic.eot"); src: url("../font/Lato-Italic.ttf") format("truetype"), url("../font/Lato-Italic.eot?#iefix") format("embedded-opentype"), url("../font/Lato-Italic.otf"), url("../font/Lato-Italic.svg#Lato-Italic") format("svg"), url("../font/Lato-Italic.woff") format("woff"); }
@font-face { font-family: "Lato-Light"; src: url("../font/Lato-Light.eot"); src: url("../font/Lato-Light.ttf") format("truetype"), url("../font/Lato-Light.eot?#iefix") format("embedded-opentype"), url("../font/Lato-Light.otf"), url("../font/Lato-Light.svg#Lato-Light") format("svg"), url("../font/Lato-Light.woff") format("woff"); }
@font-face { font-family: "Lato-LightItalic"; src: url("../font/Lato-LightItalic.eot"); src: url("../font/Lato-LightItalic.ttf") format("truetype"), url("../font/Lato-LightItalic.eot?#iefix") format("embedded-opentype"), url("../font/Lato-LightItalic.otf"), url("../font/Lato-LightItalic.svg#Lato-LightItalic") format("svg"), url("../font/Lato-LightItalic.woff") format("woff"); }
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; transition: opacity 0.5s; }

/***** ANIMAZIONI *****/
/* GLOW ALTERNATO */
@keyframes alternate-green-glow { 0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; } }
/* GLOW */
@keyframes white-glow { 0% { box-shadow: 0 0 10px #fff, 0 0 10px #fff; }
  25% { box-shadow: none; }
  50% { box-shadow: 0 0 10px #fff, 0 0 10px #fff; }
  75% { box-shadow: none; }
  100% { box-shadow: 0 0 10px #fff, 0 0 10px #fff; } }
@keyframes green-glow { 0% { box-shadow: 0 0 10px #00ff55; }
  25% { box-shadow: none; }
  50% { box-shadow: 0 0 10px #00ff55; }
  75% { box-shadow: none; }
  100% { box-shadow: 0 0 10px #00ff55; } }
@keyframes blue-glow { 0% { box-shadow: 0 0 10px #0e0e1d; }
  25% { box-shadow: none; }
  50% { box-shadow: 0 0 10px #0e0e1d; }
  75% { box-shadow: none; }
  100% { box-shadow: 0 0 10px #0e0e1d; } }
@keyframes red-glow { 0% { box-shadow: 0 0 10px #ff0000; }
  25% { box-shadow: none; }
  50% { box-shadow: 0 0 10px #ff0000; }
  75% { box-shadow: none; }
  100% { box-shadow: 0 0 10px #ff0000; } }
/* TEXT-GLOW */
@keyframes white-glow-tx { 0% { text-shadow: 0 0 10px #fff; }
  25% { text-shadow: none; }
  50% { text-shadow: 0 0 10px #fff; }
  75% { text-shadow: none; }
  100% { text-shadow: 0 0 10px #fff; } }
@keyframes green-glow-tx { 0% { text-shadow: 0 0 10px #00ff55; }
  25% { text-shadow: none; }
  50% { text-shadow: 0 0 10px #00ff55; }
  75% { text-shadow: none; }
  100% { text-shadow: 0 0 10px #00ff55; } }
@keyframes blue-glow-tx { 0% { text-shadow: 0 0 10px #0e0e1d; }
  25% { text-shadow: none; }
  50% { text-shadow: 0 0 10px #0e0e1d; }
  75% { text-shadow: none; }
  100% { text-shadow: 0 0 10px #0e0e1d; } }
@keyframes red-glow-tx { 0% { text-shadow: 0 0 10px #ff0000; }
  25% { text-shadow: none; }
  50% { text-shadow: 0 0 10px #ff0000; }
  75% { text-shadow: none; }
  100% { text-shadow: 0 0 10px #ff0000; } }
/* WIGGLE */
@keyframes wiggle { 0%, 7% { transform: rotateZ(0); }
  15% { transform: rotateZ(-15deg); }
  20% { transform: rotateZ(10deg); }
  25% { transform: rotateZ(-10deg); }
  30% { transform: rotateZ(6deg); }
  35% { transform: rotateZ(-4deg); }
  40%, 100% { transform: rotateZ(0); } }
/***** FINE ANIMAZIONI *****/
[v-cloak] { display: none !important; }

html { display: block; width: 100%; }
html body { display: block; width: 100vw; height: 100vh; -webkit-text-size-adjust: none; background-color: #305253; background-image: url("../layout/img_background-game.jpg"); background-size: cover; background-repeat: no-repeat; overflow: hidden; /* HOMEPAGE */ /* SASS GENERICI */ }
html body #CookielawBanner { display: none; }
html body main { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; margin: auto; overflow: hidden; /* GIOCO 1 - EVOLUZIONE ECOSISTEMA */ /* GIOCO 2 - CARTE */ /* CARD */ }
html body main h1#title-game { display: block; position: absolute; top: 50px; left: 0; right: 0; width: calc(100% - 10vh - 20px); height: 5vh; margin: auto; color: #fff; font-family: "Lato-Black"; text-align: center; line-height: 5vh; z-index: 9; }
@media screen and (min-width: 1024px) { html body main h1#title-game { top: 40px; width: calc(100% - 10vh - 50px); font-size: 1.5em; } }
@media screen and (min-width: 1350px) { html body main h1#title-game { font-size: 1.8em; } }
@media screen and (min-width: 1920px) { html body main h1#title-game { font-size: 3em; } }
html body main #intro-game { display: block; width: 100%; height: 100%; }
html body main #intro-game #eco-list { display: block; position: relative; width: 90%; max-width: 1350px; margin: 0 auto; padding-top: 120px; }
html body main #intro-game #eco-list ul.eco-list-container { display: block; height: calc(100vh - 200px); overflow: hidden; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; scroll-snap-align: start; }
html body main #intro-game #eco-list ul.eco-list-container::-webkit-scrollbar { width: 0; height: 0; }
html body main #intro-game #eco-list ul.eco-list-container li { display: inline-block; position: relative; width: calc(100% - 40px); height: calc(85% - 40px); border-radius: 30px; padding: 20px; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; background-color: #fff; }
html body main #intro-game #eco-list ul.eco-list-container li::after { display: block; content: ""; position: absolute; top: 20px; width: calc(100% - 40px); height: 30%; border-radius: 15px; background: linear-gradient(0deg, rgba(0, 0, 0, 0), #ffffff); z-index: 0; }
html body main #intro-game #eco-list ul.eco-list-container li h2 { display: block; position: absolute; top: 50px; left: 0; right: 0; width: 100%; margin: auto; color: #00ff55; font-family: "Lato-Bold"; text-align: center; text-transform: uppercase; z-index: 9; }
html body main #intro-game #eco-list ul.eco-list-container li img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 15px; }
html body main #intro-game #eco-list ul.eco-list-container li .btn.goto { left: calc(50% - 115px); right: calc(50% - 115px); bottom: 50px; }
html body main #intro-game #eco-list ul.pagination { display: block; position: absolute; width: 100%; text-align: center; margin-top: 20px; }
html body main #intro-game #eco-list ul.pagination li { display: inline-block; width: 8px; height: 8px; margin: 0 2px; padding: 0; border-radius: 100%; background-color: #0e0e1d; cursor: pointer; }
html body main #intro-game #eco-list ul.pagination li.selected { background-color: #00ff55; }
@media screen and (min-width: 1024px) { html body main #intro-game #eco-list { padding-top: 100px; }
  html body main #intro-game #eco-list ul.eco-list-container { display: flex; flex-wrap: wrap; justify-content: center; height: auto; max-height: calc(100vh - 150px); overflow-y: auto; }
  html body main #intro-game #eco-list ul.eco-list-container::-webkit-scrollbar { width: 5px; }
  html body main #intro-game #eco-list ul.eco-list-container::-webkit-scrollbar-track { background-color: rgba(48, 82, 83, 0.5); border-radius: 2.5px; }
  html body main #intro-game #eco-list ul.eco-list-container::-webkit-scrollbar-thumb { background-color: #fff; border-radius: 2.5px; }
  html body main #intro-game #eco-list ul.eco-list-container li { display: inline-flex; position: relative; width: auto; height: 220px; aspect-ratio: 3/2; border-radius: 20px; margin: 10px 20px; padding: 10px; background-color: #fff; }
  html body main #intro-game #eco-list ul.eco-list-container li::after { display: block; content: ""; position: absolute; top: 10px; width: calc(100% - 20px); height: 30%; border-radius: 10px; background: linear-gradient(0deg, rgba(0, 0, 0, 0), #ffffff); z-index: 0; }
  html body main #intro-game #eco-list ul.eco-list-container li h2 { top: 30px; }
  html body main #intro-game #eco-list ul.eco-list-container li .btn.goto { bottom: auto; }
  html body main #intro-game #eco-list ul.eco-list-container li img { border-radius: 10px; }
  html body main #intro-game #eco-list ul.pagination { display: none; } }
@media screen and (min-width: 1350px) { html body main #intro-game #eco-list { padding-top: 150px; }
  html body main #intro-game #eco-list ul.eco-list-container li { height: 250px; margin: 10px 50px; } }
@media screen and (min-width: 1920px) { html body main #intro-game #eco-list { padding-top: 150px; }
  html body main #intro-game #eco-list ul.eco-list-container li { height: 350px; } }
@media screen and (min-width: 3840px) { html body main #intro-game #eco-list { max-width: 3460px; padding-top: 220px; }
  html body main #intro-game #eco-list ul.eco-list-container li { height: 750px; }
  html body main #intro-game #eco-list ul.eco-list-container li h2 { font-size: 2em; } }
html body main #game-container { display: block; position: absolute; width: 100%; height: 100%; }
html body main #game-container::before, html body main #game-container::after { content: ""; display: block; position: absolute; top: calc(50% - 25px); width: 50px; height: 50px; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: 1; animation-name: alternate-green-glow; animation-duration: 4s; animation-iteration-count: infinite; filter: drop-shadow(0px 0px 5px #00ff55); z-index: 8; }
html body main #game-container::before { left: 0; background-image: url("../layout/icon_arrow-left-green-glow.svg"); }
html body main #game-container::after { right: 0; background-image: url("../layout/icon_arrow-right-green-glow.svg"); }
html body main #game-container .login { display: block; position: absolute; top: 50px; right: 20px; left: auto; width: 5vh; height: 5vh; z-index: 99; }
html body main #game-container .login .login-container { display: block; position: relative; width: 100%; height: 100%; }
html body main #game-container .login .login-container .img-avatar { display: block; width: 5vh; height: 5vh; border-radius: 100%; background-color: #00ff55; }
html body main #game-container .login .login-container .img-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body main #game-container .login .login-container .user-name { display: block; position: absolute; top: 0; width: 100%; height: 100%; text-align: center; }
html body main #game-container .login .login-container .user-name h5 { display: block; position: absolute; top: -10px; width: 100%; color: #00ff55; font-family: "Lato-Regular"; font-size: 0.3em; text-transform: uppercase; }
html body main #game-container .login .login-container .user-name h4 { display: block; position: absolute; bottom: -20px; width: 100%; color: #fff; font-family: "Lato-Bold"; font-size: 0.5em; }
html body main #game-container #gameplay { display: block; width: 100%; height: 100%; }
html body main #game-container #gameplay .surface-interaction { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-x: auto; }
html body main #game-container #gameplay .surface-interaction::-webkit-scrollbar { width: 0; height: 0; }
html body main #game-container #gameplay .surface-interaction ul.stage { display: block; position: relative; width: auto; height: 100%; aspect-ratio: 16/9; pointer-events: none; z-index: 9; }
html body main #game-container #gameplay .surface-interaction ul.stage li { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
html body main #game-container #gameplay .surface-interaction ul.stage li img { display: block; width: auto; height: 100%; object-fit: cover; object-position: center; transition: all 1.5s; }
html body main #game-container #gameplay .surface-interaction ul.stage li img.dark { filter: saturate(0); opacity: 0.5; }
html body main #game-container #gameplay .surface-interaction ul.stage li img.before-appear { opacity: 0; }
html body main #game-container #gameplay .surface-interaction ul.stage li img.before-appear.appearing { opacity: 1; }
html body main #game-container #gameplay .surface-interaction .background-container { display: block; position: absolute; top: 0; left: 0; width: auto; height: 100%; aspect-ratio: 16/9; pointer-events: none; transition: all 1s; }
html body main #game-container #gameplay .surface-interaction .background-container.dark { filter: saturate(0); opacity: 0.5; }
html body main #game-container #gameplay .surface-interaction .background-container img { display: block; width: auto; height: 100%; object-fit: cover; object-position: center; }
html body main #game-container #gameplay .surface-interaction .background-container img.blur { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover !important; filter: brightness(50%) blur(8px); z-index: -1; }
html body main #game-container #gameplay .elements-game { display: block; position: absolute; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }
html body main #game-container #gameplay .elements-game::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 20vh; background: linear-gradient(0deg, rgba(0, 0, 0, 0), #0e0e1d); z-index: -1; }
html body main #game-container #gameplay .elements-game .health-planet { display: block; position: absolute; top: calc(50px + 5vh + 20px); left: 20px; right: 0; width: calc(90% - 20px); height: 30px; margin: auto; pointer-events: all; }
html body main #game-container #gameplay .elements-game .health-planet::after { content: ""; display: block; position: absolute; top: calc(50% - 2.5vh); left: -2.5vh; width: 5vh; height: 5vh; border-radius: 100%; background-image: url("../layout/icon_world.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 15px #000; }
html body main #game-container #gameplay .elements-game .health-planet h4 { display: block; width: 100%; color: #00ff55; font-family: "Lato-Regular"; font-size: 0.5em; text-transform: uppercase; text-align: center; }
html body main #game-container #gameplay .elements-game .health-planet .status-bar { display: block; position: absolute; top: calc(50% - 4px); width: 100%; height: 8px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-color: #ccc; overflow: hidden; }
html body main #game-container #gameplay .elements-game .health-planet .status-bar .progress-bar { display: block; width: 50%; height: 100%; background-color: #00ff55; }
html body main #game-container #gameplay .elements-game .help { display: block; position: absolute; top: 50px; left: 0; right: 0; width: calc(90% - 10vh - 40px); height: 5vh; margin: auto; pointer-events: all; }
html body main #game-container #gameplay .elements-game .help .help-container { display: table; width: 100%; height: 100%; border-radius: 2.5vh; background-color: rgba(255, 255, 255, 0.5); }
html body main #game-container #gameplay .elements-game .help .help-container::after { content: "?"; display: block; position: absolute; top: 0; right: 0; width: calc(5vh - 6px); height: calc(5vh - 6px); border: 3px solid #eaeaea; border-radius: 100%; color: #305253; font-family: "Lato-Bold"; font-size: 1.5em; text-align: center; line-height: calc(5vh - 7px); background-color: #ccc; }
html body main #game-container #gameplay .elements-game .help .help-container h4 { display: table-cell; color: #305253; font-family: "Lato-Regular"; font-size: 0.6em; padding-left: 30px; vertical-align: middle; }
html body main #game-container #gameplay .elements-game .help .help-container h4 span { color: #00ff55; font-family: "Lato-Bold"; }
html body main #game-container #gameplay .elements-game .help .help-container .btn.help { top: 0 !important; right: 0 !important; height: calc(5vh - 6px) !important; width: calc(5vh - 6px) !important; opacity: 0; }
@media screen and (min-width: 768px) { html body main #game-container::before, html body main #game-container:after { display: none; }
  html body main #game-container #gameplay .elements-game .health-planet { top: calc(50px + 2.5vh - 15px); left: calc(5vh + 20px + 15px + 5%); right: auto; width: 30%; margin: 0; }
  html body main #game-container #gameplay .elements-game .help { top: 50px; left: calc(5vh + 20px + 15px + 10%); width: calc(20% - 10vh - 40px); max-width: 210px; min-width: 210px; }
  html body main #game-container #gameplay .elements-game .help .help-container h4 { padding-left: 20px; } }
@media screen and (min-width: 1024px) { html body main #game-container .login { top: calc(40px - 0.5vh); left: auto; right: 0; width: 12%; max-width: 400px; min-width: 180px; height: 6vh; }
  html body main #game-container .login .login-container { display: block; width: 100%; height: 100%; border-top-left-radius: 3vh; border-bottom-left-radius: 3vh; background-color: #0e0e1d; }
  html body main #game-container .login .login-container .img-avatar { position: absolute; top: 0.5vh; left: 0.5vh; }
  html body main #game-container .login .login-container .user-name { top: 1vh; right: 1vh; width: calc(100% - 8vh); height: 4vh; text-align: left; }
  html body main #game-container .login .login-container .user-name h5 { top: 0; font-size: 0.5em; }
  html body main #game-container .login .login-container .user-name h4 { bottom: 0.5vh; font-size: 0.6em; }
  html body main #game-container #gameplay .surface-interaction { display: block; position: relative; width: auto; height: 100%; }
  html body main #game-container #gameplay .surface-interaction ul.stage { display: block; position: relative; width: 100%; height: 100%; pointer-events: none; z-index: 9; }
  html body main #game-container #gameplay .surface-interaction ul.stage li { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
  html body main #game-container #gameplay .surface-interaction ul.stage li img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: all 1.5s; }
  html body main #game-container #gameplay .surface-interaction .background-container { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: all 1s; }
  html body main #game-container #gameplay .surface-interaction .background-container img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
  html body main #game-container #gameplay .elements-game .health-planet { top: calc(40px + 2.5vh - 15px); width: 45%; }
  html body main #game-container #gameplay .elements-game .help { top: 40px; left: calc(5vh + 20px + 15px + 30%); }
  html body main #game-container #gameplay .elements-game .help .help-container h4 { padding-left: 20px; } }
@media screen and (min-width: 1350px) { html body main #game-container .login .login-container .user-name h4 { bottom: 1vh; } }
@media screen and (min-width: 1920px) { html body main #game-container #gameplay .login { width: 12%; max-width: 400px; }
  html body main #game-container #gameplay .login .login-container .user-name h5 { font-size: 0.8em; }
  html body main #game-container #gameplay .login .login-container .user-name h4 { font-size: 1em; }
  html body main #game-container #gameplay .elements-game .health-planet h4 { margin-top: -10px; font-size: 0.8em; }
  html body main #game-container #gameplay .elements-game .help { max-width: 300px; }
  html body main #game-container #gameplay .elements-game .help .help-container { font-size: 0.8em; } }
@media screen and (min-width: 3840px) { html body main #game-container .login { width: 15%; max-width: 400px; }
  html body main #game-container .login .login-container .user-name h5 { font-size: 1em; }
  html body main #game-container .login .login-container .user-name h4 { font-size: 1.8em; }
  html body main #game-container #gameplay .elements-game .health-planet { top: calc(40px + 2.5vh - 25px); height: 50px; }
  html body main #game-container #gameplay .elements-game .health-planet::after { width: 50px; height: 50px; }
  html body main #game-container #gameplay .elements-game .health-planet h4 { font-size: 1em; }
  html body main #game-container #gameplay .elements-game .health-planet .status-bar { top: calc(50% - 6px); height: 12px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
  html body main #game-container #gameplay .elements-game .help { left: calc(5vh + 400px + 15px + 30%); max-width: 500px; }
  html body main #game-container #gameplay .elements-game .help .help-container::after { font-size: 3em; }
  html body main #game-container #gameplay .elements-game .help .help-container h4 { font-size: 1.5em; padding-left: 50px; }
  html body main #game-container #gameplay .tab-interaction { max-width: 800px; }
  html body main #game-container #gameplay .tab-interaction::before { top: -70px; aspect-ratio: 4/1; }
  html body main #game-container #gameplay .tab-interaction .interaction-container { height: calc(100% - 80px); margin-top: 80px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container h3 { top: 10px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container h3::before { top: -10px; width: 50px; height: 50px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab { top: 200px; height: calc(100% - 200px); }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab .title-tab { top: -100px; height: 100px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab .title-tab h4 { font-size: 2em; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab ul li { height: 100px; border-radius: 50px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab ul li::before { width: 98px; height: 98px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab ul li img { width: 100px; height: 100px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab ul li h5 { left: 120px; width: calc(100% - 240px); line-height: 100px; font-size: 1.5em; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab ul li .btn { top: 10px; right: 10px; width: 80px; height: 80px; }
  html body main #game-container #gameplay .tab-interaction .interaction-container .tab ul li .btn.card-value { top: -20px; left: -20px; width: 60px; height: 60px; } }
html body main #game-container .tab-interaction { display: block; position: absolute; left: 0; right: 0; bottom: calc(-50vh + 80px); width: 90%; height: 50vh; margin: auto; transition: all 0.5s ease; z-index: 9; }
html body main #game-container .tab-interaction.open { bottom: 0; }
html body main #game-container .tab-interaction::before { content: ""; display: block; position: absolute; top: 0; width: 100%; background-image: url("../layout/img_background-tab.svg"); background-size: contain; background-position: bottom left; background-repeat: no-repeat; aspect-ratio: 4.3/1; }
html body main #game-container .tab-interaction .interaction-container { display: block; width: 100%; height: calc(100% - 60px); margin-top: 60px; background-color: #0e0e1d; }
html body main #game-container .tab-interaction .interaction-container h3 { display: block; position: absolute; top: 40px; left: 0; right: 0; width: 85%; margin: auto; color: #fff; font-family: "Lato-Bold"; font-size: 1.7vh; text-transform: uppercase; text-align: center; cursor: pointer; animation-name: white-glow-tx; animation-duration: 4s; animation-iteration-count: infinite; }
html body main #game-container .tab-interaction .interaction-container h3::before { content: ""; display: block; position: absolute; top: -4px; left: 0; width: 30px; height: 30px; background-image: url("../layout/icon_switch-elements-white.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
html body main #game-container .tab-interaction .interaction-container .tab { display: block; position: absolute; top: 120px; width: 100%; height: calc(100% - 120px); background-color: #ccc; }
html body main #game-container .tab-interaction .interaction-container .tab.selected { background-color: #305253; z-index: 9; }
html body main #game-container .tab-interaction .interaction-container .tab.selected .title-tab { background-color: #305253; }
html body main #game-container .tab-interaction .interaction-container .tab.selected .title-tab h4 { color: #fff; text-transform: uppercase; }
html body main #game-container .tab-interaction .interaction-container .tab.add .title-tab { left: 0; }
html body main #game-container .tab-interaction .interaction-container .tab.remove .title-tab { right: 0; }
html body main #game-container .tab-interaction .interaction-container .tab .title-tab { display: table; position: absolute; top: -40px; width: 50%; height: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; cursor: pointer; background-color: #ccc; }
html body main #game-container .tab-interaction .interaction-container .tab .title-tab h4 { display: table-cell; width: 100%; height: 100%; color: #305253; font-family: "Lato-Bold"; text-align: center; vertical-align: middle; }
html body main #game-container .tab-interaction .interaction-container .tab ul { display: block; width: 100%; height: calc(100% - 40px); padding: 20px 0; overflow-y: auto; }
html body main #game-container .tab-interaction .interaction-container .tab ul::-webkit-scrollbar { width: 5px; }
html body main #game-container .tab-interaction .interaction-container .tab ul::-webkit-scrollbar-track { background: #fff; }
html body main #game-container .tab-interaction .interaction-container .tab ul::-webkit-scrollbar-thumb { background: #0e0e1d; }
html body main #game-container .tab-interaction .interaction-container .tab ul li { display: table; position: relative; width: 90%; height: 50px; margin: 0 auto 10px; border-radius: 25px; border: 1px solid #0e0e1d; }
html body main #game-container .tab-interaction .interaction-container .tab ul li::before { content: ""; display: block; position: absolute; top: -1px; left: -1px; width: 46px; height: 46px; border: 3px solid #0e0e1d; border-radius: 100%; pointer-events: none; z-index: 1; }
html body main #game-container .tab-interaction .interaction-container .tab ul li.blocked { background-color: rgba(255, 0, 0, 0.2); border: 1px solid rgba(255, 0, 0, 0.5); }
html body main #game-container .tab-interaction .interaction-container .tab ul li.blocked::before { border-color: #ff0000; }
html body main #game-container .tab-interaction .interaction-container .tab ul li.blocked::after { content: ""; display: block; position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 100%; background-image: url("../layout/icon_padlock-locked-red.svg"); background-size: 70%; background-position: center; background-repeat: no-repeat; background-color: #fff; box-shadow: 0 0 10px #fff; }
html body main #game-container .tab-interaction .interaction-container .tab ul li.blocked img, html body main #game-container .tab-interaction .interaction-container .tab ul li.blocked h5, html body main #game-container .tab-interaction .interaction-container .tab ul li.blocked .btn.remove { opacity: 0.5; pointer-events: none; }
html body main #game-container .tab-interaction .interaction-container .tab ul li.blocked .btn.remove { background-color: #ff0000; }
html body main #game-container .tab-interaction .interaction-container .tab ul li img { display: block; width: 50px; height: 50px; border-radius: 100%; object-fit: cover; object-position: center; background-color: #fff; }
html body main #game-container .tab-interaction .interaction-container .tab ul li h5 { display: table-cell; position: absolute; top: 15px; left: 60px; width: calc(100% - 120px); color: #fff; font-family: "Lato-Bold"; text-transform: uppercase; }
html body main #game-container .tab-interaction .interaction-container .tab ul li .btn { display: block; position: absolute; }
html body main #game-container .tab-interaction .interaction-container .tab ul li .btn.add, html body main #game-container .tab-interaction .interaction-container .tab ul li .btn.remove { top: 5px; right: 5px; width: 40px; height: 40px; border-radius: 100%; background-size: 25px; background-position: center; background-repeat: no-repeat; background-color: #0e0e1d; }
html body main #game-container .tab-interaction .interaction-container .tab ul li .btn.add { background-image: url("../layout/icon_tab-add-white.svg"); }
html body main #game-container .tab-interaction .interaction-container .tab ul li .btn.remove { background-image: url("../layout/icon_tab-remove-white.svg"); }
html body main #game-container .tab-interaction .interaction-container .tab ul li .btn.card-value { top: -10px; left: -10px; width: 30px; height: 30px; border-radius: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("../layout/icon_card-value.svg"); background-color: #0e0e1d; animation-name: blue-glow; animation-duration: 4s; animation-iteration-count: infinite; z-index: 8; }
@media screen and (min-width: 768px) { html body main #game-container .tab-interaction { left: 20px; right: auto; max-width: 450px; } }
@media screen and (min-width: 1921px) { html body main #game-container .tab-interaction { max-width: 600px; } }
html body main #card-element { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 80%; max-height: 600px; margin: auto; aspect-ratio: 3/5; border-radius: 20px; background-color: #fff; box-shadow: 0 0 20px #000; opacity: 0; pointer-events: none; z-index: -1; transform: rotate(-2deg); transition: all 0.5s ease; }
html body main #card-element.active { opacity: 1; pointer-events: all; z-index: 999; }
html body main #card-element.with-popup { top: 0; left: 0; right: -170%; bottom: 0; }
html body main #card-element.with-popup.recall { left: 0; right: 0; }
html body main #card-element.with-popup .btn.close { display: none; }
html body main #card-element .btn.close { top: -2.5vh; left: auto; right: -2.5vh; }
html body main #card-element.aliena .card-container { color: #272734; background: linear-gradient(25deg, #ffeab2 0%, #ffbb00 100%); }
html body main #card-element.aliena .card-container .name-element h3 { padding: 2px 5px; color: #fff; background-color: #ff0000; }
html body main #card-element.aliena .card-container .name-element p.base-points span, html body main #card-element.aliena .card-container .name-element p.max-points span { background-color: #ff0000; }
html body main #card-element.aliena .card-container .name-element p.base-points span.neg, html body main #card-element.aliena .card-container .name-element p.max-points span.neg { background-color: #ff0000; }
html body main #card-element.aliena .card-container .info-element ul li.turns-added::after, html body main #card-element.aliena .card-container .info-element ul li.turns-removed::after { background-color: #272734; }
html body main #card-element.antropico .card-container { color: #fff; background: linear-gradient(5deg, #272734 0%, #305253 100%); }
html body main #card-element.antropico .card-container .name-element h3 { padding: 2px 5px; color: #fff; background-color: #008031; }
html body main #card-element.antropico .card-container .name-element p.base-points span, html body main #card-element.antropico .card-container .name-element p.max-points span { background-color: #008031; }
html body main #card-element.antropico .card-container .name-element p.base-points span.neg, html body main #card-element.antropico .card-container .name-element p.max-points span.neg { background-color: #ff0000; }
html body main #card-element.antropico .card-container .info-element ul li.turns-added::after, html body main #card-element.antropico .card-container .info-element ul li.turns-removed::after { background-color: #fff; }
html body main #card-element .card-container { display: flex; flex-direction: column; width: calc(100% - 20px); height: calc(100% - 20px); margin: 10px; border-radius: 10px; color: #fff; background: linear-gradient(25deg, #009138 0%, #305253 100%); overflow: hidden; }
html body main #card-element .card-container .cover { display: inline-flex; width: 100%; height: 30%; background-color: #eaeaea; }
html body main #card-element .card-container .cover img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body main #card-element .card-container .name-element { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; width: 90%; height: 10%; margin: 20px auto; text-align: center; }
html body main #card-element .card-container .name-element h1 { font-family: "Lato-Black"; font-size: 1em; text-transform: uppercase; }
html body main #card-element .card-container .name-element h2 { font-family: "Lato-Italic"; font-size: 0.8em; margin: 5px auto 0; }
html body main #card-element .card-container .name-element h3 { display: table; margin: 5px auto 0; font-family: "Lato-Regular"; font-size: 0.8em; padding: 2px 5px; background-color: #272734; }
html body main #card-element .card-container .name-element p.base-points { display: table; position: absolute; top: 30px; right: 70px; color: transparent; font-size: 0; transform: rotate(2deg); }
html body main #card-element .card-container .name-element p.base-points span { display: block; width: 20px; height: 20px; padding: 5px; color: #fff; font-family: "Lato-Black"; font-size: 18px; border-radius: 100%; background-color: #0e0e1d; }
html body main #card-element .card-container .name-element p.base-points span.neg { background-color: #ff0000; }
html body main #card-element .card-container .name-element p.max-points { display: table; position: absolute; top: 30px; right: 30px; color: transparent; font-size: 0; transform: rotate(2deg); }
html body main #card-element .card-container .name-element p.max-points span { display: block; width: 20px; height: 20px; padding: 5px; color: #fff; font-family: "Lato-Black"; font-size: 18px; border-radius: 100%; background-color: #0e0e1d; }
html body main #card-element .card-container .name-element p.max-points span.neg { background-color: #ff0000; }
html body main #card-element .card-container .info-element { display: inline-flex; position: relative; width: 90%; margin: 20px auto; height: 60%; }
html body main #card-element .card-container .info-element ul { display: block; width: 100%; }
html body main #card-element .card-container .info-element ul li { display: block; position: relative; width: calc(100% - 20px); padding-left: 20px; margin-bottom: 10px; }
html body main #card-element .card-container .info-element ul li:last-child { margin-bottom: 0; }
html body main #card-element .card-container .info-element ul li p { font-family: "Lato-Regular"; font-size: 0.8em; }
html body main #card-element .card-container .info-element ul li::before { content: "✦"; display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; }
@media screen and (min-width: 1024px) { html body main #card-element.with-popup { top: 5%; left: auto; right: 2%; bottom: 35%; } }
@media screen and (min-width: 1350px) { html body main #card-element.with-popup { right: 4%; }
  html body main #card-element .card-container .name-element h1 { font-size: 1.3em; }
  html body main #card-element .card-container .name-element h2 { font-size: 1em; } }
@media screen and (min-width: 3840px) { html body main #card-element { max-height: 850px; }
  html body main #card-element.with-popup { right: 15%; }
  html body main #card-element .card-container .name-element h1 { font-size: 2.5em; }
  html body main #card-element .card-container .info-element ul li { width: calc(100% - 40px); padding-left: 40px; font-size: 1.5em; line-height: 1.3em; } }
html body main #all-cards-slideshow { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(48, 82, 83, 0.9); opacity: 0; pointer-events: none; z-index: -1; }
html body main #all-cards-slideshow.active { opacity: 1; pointer-events: all; z-index: 9999; }
html body main #all-cards-slideshow .btn.close { left: auto; right: 20px; }
html body main #all-cards-slideshow .all-cards-slideshow-container { display: block; width: 100%; height: calc(100% - 40px - 50px - 5vh); padding-top: calc(50px + 5vh); }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards { display: block; width: 90%; height: 100%; margin: auto; overflow: hidden; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; scroll-snap-align: start; scroll-behavior: smooth; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards::-webkit-scrollbar { width: 0; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li { display: inline-block; position: relative; width: calc(100% - 40px); height: calc(100% - 40px); padding: 20px; margin: auto; vertical-align: top; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; transition: all 0.5s ease; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.fake { display: none; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container { color: #272734; background: linear-gradient(25deg, #ffeab2 0%, #ffbb00 100%); }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container .name-element h3 { padding: 2px 5px; color: #fff; background-color: #ff0000; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container .name-element p.base-points span, html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container .name-element p.max-points span { background-color: #ff0000; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container .name-element p.base-points span.neg, html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container .name-element p.max-points span.neg { background-color: #ff0000; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container .info-element ul li.turns-added::after, html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.aliena .card-container .info-element ul li.turns-removed::after { background-color: #272734; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container { color: #fff; background: linear-gradient(5deg, #272734 0%, #305253 100%); }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container .name-element h3 { padding: 2px 5px; color: #fff; background-color: #008031; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container .name-element p.base-points span, html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container .name-element p.max-points span { background-color: #008031; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container .name-element p.base-points span.neg, html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container .name-element p.max-points span.neg { background-color: #ff0000; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container .info-element ul li.turns-added::after, html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li.antropico .card-container .info-element ul li.turns-removed::after { background-color: #fff; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container { display: flex; flex-direction: column; height: calc(100% - 40px); max-width: calc(100% - 40px); aspect-ratio: 3/5; margin: 10px auto; border-radius: 30px; color: #fff; border: 10px solid #fff; background: linear-gradient(25deg, #009138 0%, #305253 100%); box-shadow: 0 0 20px #000; overflow: hidden; rotate: -2deg; transition: all 0.5s ease; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .cover { display: inline-flex; width: 100%; height: 30%; background-color: #eaeaea; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .cover img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; width: 90%; height: 10%; margin: 20px auto; text-align: center; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element h1 { font-family: "Lato-Black"; font-size: 1em; text-transform: uppercase; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element h2 { font-family: "Lato-Italic"; font-size: 0.8em; margin: 5px auto 0; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element h3 { display: table; margin: 5px auto 0; font-family: "Lato-Regular"; font-size: 0.8em; padding: 2px 5px; background-color: #272734; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element p.base-points { display: table; position: absolute; top: 30px; right: 70px; color: transparent; font-size: 0; transform: rotate(2deg); }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element p.base-points span { display: block; width: 20px; height: 20px; padding: 5px; color: #fff; font-family: "Lato-Black"; font-size: 18px; border-radius: 100%; background-color: #0e0e1d; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element p.base-points span.neg { background-color: #ff0000; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element p.max-points { display: table; position: absolute; top: 30px; right: 30px; color: transparent; font-size: 0; transform: rotate(2deg); }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element p.max-points span { display: block; width: 20px; height: 20px; padding: 5px; color: #fff; font-family: "Lato-Black"; font-size: 18px; border-radius: 100%; background-color: #0e0e1d; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element p.max-points span.neg { background-color: #ff0000; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .info-element { display: inline-flex; position: relative; width: 90%; margin: 20px auto; height: 60%; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .info-element ul { display: block; width: 100%; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .info-element ul li { display: block; position: relative; width: calc(100% - 20px) !important; height: auto; padding: 0 0 0 20px; margin-bottom: 10px; white-space: break-spaces; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .info-element ul li:last-child { margin-bottom: 0; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .info-element ul li p { font-family: "Lato-Regular"; font-size: 0.8em; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .info-element ul li::before { content: "✦"; display: block; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.nav-pagination { display: none; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.pagination { display: block; position: absolute; bottom: 10px; width: 100%; text-align: center; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.pagination li { display: inline-block; width: 12px; height: 12px; margin: 0 5px; padding: 0; border-radius: 100%; cursor: pointer; background-color: #CCE6D6; }
html body main #all-cards-slideshow .all-cards-slideshow-container ul.pagination li.selected { background-color: #00ff55; }
@media screen and (min-width: 768px) { html body main #all-cards-slideshow .btn.close { top: 30px; } }
@media screen and (min-width: 1024px) { html body main #all-cards-slideshow .btn.close { top: 20px; }
  html body main #all-cards-slideshow ul.cards li { width: calc(33% - 60px) !important; }
  html body main #all-cards-slideshow ul.cards li.fake { display: inline-block !important; }
  html body main #all-cards-slideshow ul.cards li .card-container { scale: 0.5; }
  html body main #all-cards-slideshow ul.cards li.selected .card-container { scale: 0.8; box-shadow: 0 0 50px #000; }
  html body main #all-cards-slideshow ul.nav-pagination { display: block !important; position: absolute; top: calc(50% - 25px); width: 100%; height: 5vh; min-height: 40px; text-align: center; pointer-events: none; }
  html body main #all-cards-slideshow ul.nav-pagination li { display: block; position: absolute; width: 5vh; height: 5vh; min-width: 40px; min-height: 40px; border-radius: 100%; background-position: center; background-repeat: no-repeat; background-size: 50%; background-color: #eaeaea; pointer-events: all; cursor: pointer; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
  html body main #all-cards-slideshow ul.nav-pagination li.disabled { opacity: 0.2; pointer-events: none !important; }
  html body main #all-cards-slideshow ul.nav-pagination li.left { left: 20px; background-image: url("../layout/icon_arrow-left-green.svg"); }
  html body main #all-cards-slideshow ul.nav-pagination li.right { right: 20px; background-image: url("../layout/icon_arrow-right-green.svg"); }
  html body main #all-cards-slideshow ul.pagination { bottom: 50px; } }
@media screen and (min-width: 1350px) { html body main #all-cards-slideshow .btn.close { top: 40px; } }
@media screen and (min-width: 1920px) { html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element h1 { font-size: 1.5em; }
  html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element h2 { font-size: 1.2em; }
  html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .name-element h3 { font-size: 1em; }
  html body main #all-cards-slideshow .all-cards-slideshow-container ul.cards li .card-container .info-element ul li p { font-family: "Lato-Regular"; font-size: 1em; line-height: 1.3em; } }
html body main.ecosistema-montano #cards-container .cards .card { border: 10px solid #ac8063; }
html body main.ecosistema-marino-costiero #cards-container .cards .card { border: 10px solid #42acba; }
html body main.ecosistema-artico #cards-container .cards .card { border: 10px solid #ad92f3; }
html body main.ecosistema-semiarido #cards-container .cards .card { border: 10px solid #5c9643; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(1) h2 { color: #ac8063; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(1) img { border-color: #ac8063; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(2) h2 { color: #42acba; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(2) img { border-color: #42acba; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(3) h2 { color: #ad92f3; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(3) img { border-color: #ad92f3; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(4) h2 { color: #5c9643; }
html body main #intro-game #eco-list ul.eco-list-container li:nth-child(4) img { border-color: #5c9643; }
html body main #players { display: block; position: relative; width: 90%; max-width: 1350px; height: calc(100% - 200px); margin: 0 auto; padding-top: 120px; }
html body main #players h1 { display: block; position: absolute; top: 50px; left: 0; right: 0; width: calc(100% - 10vh - 20px); margin: 0 auto; color: #fff; font-size: 1em; font-family: "Lato-Bold"; text-align: center; line-height: 5vh; }
html body main #players ul.multiplayer { display: block; height: calc(100vh - 200px); overflow: hidden; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; scroll-snap-align: start; }
html body main #players ul.multiplayer::-webkit-scrollbar { width: 0; height: 0; }
html body main #players ul.multiplayer li { display: inline-block; position: relative; width: calc(100% - 40px); height: calc(85% - 40px); border-radius: 30px; padding: 20px; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; background-color: #fff; transition: all 0.5s ease; }
html body main #players ul.multiplayer li:hover { background-color: #00ff55; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
html body main #players ul.multiplayer li:hover a { background-color: #fff; }
html body main #players ul.multiplayer li:nth-child(1) a { background-image: url("../layout/icon_singleplayer.svg"); }
html body main #players ul.multiplayer li:nth-child(2) a { background-image: url("../layout/icon_multiplayer.svg"); }
html body main #players ul.multiplayer li a { display: block; width: 100%; height: 100%; border-radius: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; background-color: #eaeaea; transition: all 0.5s ease; }
html body main #players ul.multiplayer li a h2 { display: block; position: absolute; bottom: 50px; left: 0; right: 0; width: calc(100% - 40px); margin: auto; color: #0e0e1d; font-family: "Lato-Bold"; text-transform: uppercase; text-align: center; white-space: break-spaces; }
html body main #players ul.multiplayer ul.pagination { display: block; position: absolute; width: 100%; text-align: center; margin-top: 20px; }
html body main #players ul.multiplayer ul.pagination li { display: inline-block; width: 8px; height: 8px; margin: 0 2px; padding: 0; border-radius: 100%; background-color: #0e0e1d; }
html body main #players ul.multiplayer ul.pagination li.selected { background-color: #00ff55; }
html body main #resume-results { display: block; position: absolute; left: 0; right: 0; bottom: calc(-90vh + 40px); width: 90%; height: 95vh; margin: auto; border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 9999; transition: bottom 0.5s ease; }
html body main #resume-results.to-top { bottom: 0; }
html body main #resume-results .resume-results-container { display: block; position: relative; width: 90%; height: 100%; margin: 20px 5%; }
html body main #resume-results .resume-results-container h2 { font-family: "Lato-Bold"; font-size: 1.2em; color: #305253; text-align: center; }
html body main #resume-results .resume-results-container ul.pdf-list { display: block; position: relative; width: 100%; margin: 20px 0; height: calc(95vh - 45px - 20px - 40px); overflow-y: auto; }
html body main #resume-results .resume-results-container ul.pdf-list li { display: block; width: 100%; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ccc; }
html body main #resume-results .resume-results-container ul.pdf-list li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
html body main #resume-results .resume-results-container ul.pdf-list li a { display: table; color: #000; }
html body main #resume-results .resume-results-container ul.pdf-list li a h3 { font-family: "Lato-Regular"; }
@media screen and (min-width: 768px) { html body main #players h1 { font-size: 1.5em; } }
@media screen and (min-width: 1024px) { html body main #players { display: block; position: relative; width: 90%; max-width: 1350px; height: 90vh; padding: 0; margin: 0 auto; }
  html body main #players h1 { font-size: 3em; }
  html body main #players ul.multiplayer { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; align-content: center; height: calc(100% - 100px); padding-top: 100px; }
  html body main #players ul.multiplayer li { display: inline-flex; position: relative; width: 250px; height: 22rem; max-height: 800px; border-radius: 20px; margin: 10px 50px; padding: 10px; }
  html body main #players ul.multiplayer li a h2 { font-size: 1.2em; }
  html body main #players ul.multiplayer ul.pagination { display: none; } }
@media screen and (min-width: 1350px) { html body main #players ul.multiplayer li { border-radius: 30px; padding: 20px; }
  html body main #players ul.multiplayer li a h2 { font-size: 1.5em; }
  html body main #resume-results .resume-results-container h2 { font-size: 1.2em; }
  html body main #resume-results .resume-results-container ul.pdf-list { margin: 50px 0; height: calc(95vh - 45px - 20px - 100px); }
  html body main #resume-results .resume-results-container ul.pdf-list li { padding-bottom: 30px; margin-bottom: 30px; }
  html body main #resume-results .resume-results-container ul.pdf-list li a h3 { font-size: 1.2em; } }
@media screen and (min-width: 1920px) { html body main #players ul.multiplayer li { width: 30%; height: 35rem; }
  html body main #resume-results .resume-results-container h2 { font-size: 2em; } }
@media screen and (min-width: 3840px) { html body main #players h1 { top: 15%; font-size: 7em; }
  html body main #players ul.multiplayer li { max-height: 1200px; margin: 10px 200px; }
  html body main #players ul.multiplayer li a h2 { bottom: 150px; width: calc(100% - 200px); font-size: 3em; line-height: 1.2em; } }
html body main #intro-game .tab-start-game { display: block; position: fixed; left: 0; right: 0; bottom: -60vh; width: 90%; height: 80vh; margin: auto; border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); transition: bottom 0.5s ease; z-index: 99; }
html body main #intro-game .tab-start-game.upper { bottom: 0; }
html body main #intro-game .tab-start-game.upper .tab-container .btn.bring-up { transform: rotate(-180deg); }
html body main #intro-game .tab-start-game .tab-container { display: block; width: 100%; height: 100%; }
html body main #intro-game .tab-start-game .tab-container .btn.bring-up { z-index: 9; }
html body main #intro-game .tab-start-game .tab-container .game-mode { display: block; position: relative; width: calc(100% - 10%); height: calc(100% - 10vh); padding: 5vh 5%; }
html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters { display: block; position: relative; font-family: "Lato-Regular"; text-align: center; }
html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters h2 { display: table; width: auto; margin: 0 auto 3vh; color: #305253; text-align: center; text-transform: uppercase; font-family: "Lato-Black"; }
html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters label, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters input, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters select { display: block; }
html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters input, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters select { width: 50%; height: 30px; margin: 10px auto; font-family: "Lato-Black"; text-align: center; }
html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters input#wait-master { height: 30px; width: 30px; }
html body main #intro-game .tab-start-game .tab-container .game-mode .btn.goto.green { position: relative; top: 2vh; left: 0; right: 0; bottom: auto; margin: auto; }
html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game { display: block; position: relative; height: calc(100% - 100px - 60px); margin-top: 5vh; }
html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game h2 { display: table; width: auto; margin: 0 auto 3vh; color: #305253; text-align: center; text-transform: uppercase; font-family: 'Lato-Bold'; }
html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game::before { content: ""; display: block; width: 50%; max-width: 150px; height: 1px; margin: 10px auto; background-color: #000; }
html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game p { display: none; text-align: center; margin: 25px; color: red; opacity: 0; }
html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game p.active { display: block; opacity: 100; }
html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game input { display: block; width: calc(100% - 46px); max-width: 500px; height: 50px; padding: 0 20px; margin: 50px auto 0; margin-top: 0; border-radius: 30px; border: 3px solid #305253; text-transform: uppercase; text-align: center; }
html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game .btn.goto.dark-green.join { position: relative; bottom: 0; left: 0; right: 0; margin-top: 20px; }
html body main #intro-game .tab-start-game .tab-container .waiting-room { display: none; display: block; position: relative; width: calc(100% - 50px); height: calc(100% - 200px); padding: 100px 25px; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .btn.goto.green { position: relative; top: 20px; bottom: auto; left: 0; right: 0; margin: auto; transform: initial; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .code { display: block; font-family: "Lato-Black"; text-align: center; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .code h4 { text-transform: uppercase; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .code h3 { color: #00ff55; font-size: 3em; margin: 10px 0; text-transform: uppercase; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems { display: flex; width: 100%; flex-direction: row; align-items: center; overflow-x: auto; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems::-webkit-scrollbar { width: 0; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems li { display: inline-flex; margin: 0 10px; border-radius: 30px; background-color: #eaeaea; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems li a { color: #305253; text-decoration: none; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems li a h2 { padding: 10px 20px; font-family: "Lato-Black"; text-align: center; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems li.selected { background-color: #305253; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems li.selected a { color: #fff; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-players { display: block; width: 90%; max-width: 800px; max-height: 250px; padding: 10px 10px 0; margin: 20px auto; font-family: "Lato-Regular"; text-align: center; border: 1px solid #ccc; overflow-y: auto; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-players li { display: inline-block; margin-right: 10px; margin-bottom: 10px; padding-left: 20px; background-image: url("../layout/icon_avatar-player.svg"); background-position: left center; background-size: contain; background-repeat: no-repeat; }
html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-players li.current-player { color: #00ff55; background-image: url("../layout/icon_avatar-player-current.svg"); }
html body main #intro-game .tab-start-game .tab-container .waiting-room .lds-ellipsis { display: block; position: relative; width: 80px; height: 40px; margin: 0 auto; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .lds-ellipsis div { position: absolute; top: 15px; width: 13px; height: 13px; border-radius: 50%; background: #305253; animation-timing-function: cubic-bezier(0, 1, 1, 0); }
html body main #intro-game .tab-start-game .tab-container .waiting-room .lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; }
@keyframes lds-ellipsis1 { 0% { transform: scale(0); }
  100% { transform: scale(1); } }
@keyframes lds-ellipsis3 { 0% { transform: scale(1); }
  100% { transform: scale(0); } }
@keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); }
  100% { transform: translate(24px, 0); } }
html body main #intro-game .tab-start-game .tab-container .waiting-room .waiting-text-intro { display: block; width: 100%; margin: auto; }
html body main #intro-game .tab-start-game .tab-container .waiting-room .waiting-text-intro p { color: #305253; font-family: "Lato-Black"; text-align: center; }
@media screen and (min-width: 1024px) { html body main #intro-game .tab-start-game .tab-container .waiting-room { width: calc(100% - 100px); padding: 100px 50px; }
  html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems { justify-content: center; flex-direction: row; align-items: center; }
  html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-ecosystems li { margin: 0 10px; } }
@media screen and (min-width: 1350px) { html body main #intro-game .tab-start-game .tab-container .waiting-room { width: calc(100% - 200px); height: calc(100% - 300px); padding: 150px 100px; }
  html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-players { padding: 50px; } }
@media screen and (min-width: 1920px) { html body main #intro-game .tab-start-game .tab-container .game-mode { padding: 10vh 5%; }
  html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters h2, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game h2 { font-size: 2em; }
  html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game::before { margin: 10px auto 30px; } }
@media screen and (min-width: 2500px) { html body main #intro-game .tab-start-game .tab-container .game-mode { padding: 10vh 5%; }
  html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters h2, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game h2 { font-size: 5em; }
  html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters label, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters input, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters select, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game label, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game input, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game select { font-size: 2em; }
  html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters input, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters select, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game input, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game select { height: 50px; margin: 20px auto; }
  html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters .btn.goto.green, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters input#join-the-game, html body main #intro-game .tab-start-game .tab-container .game-mode #game-parameters .btn.goto.dark-green.join, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game .btn.goto.green, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game input#join-the-game, html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game .btn.goto.dark-green.join { transform: scale(1.5); }
  html body main #intro-game .tab-start-game .tab-container .game-mode #join-the-game::before { margin: 20px auto 60px; }
  html body main #intro-game .tab-start-game .tab-container .waiting-room ul.list-players { max-width: 1800px; max-height: 800px; } }
html body main .btn.help { top: 120px !important; right: 20px !important; border: 3px solid #eaeaea; border-radius: 100%; background-color: #ccc; }
html body main .btn.help::after { display: block; content: "?"; position: absolute; top: 0; width: calc(100% - 6px); height: calc(100% - 6px); padding: 3px; color: #305253; font-family: "Lato-Bold"; font-size: 1.5em; text-align: center; line-height: calc(5vh - 6px); }
@media screen and (min-width: 1024px) { html body main .btn.help { top: calc(40px - 0.5vh) !important; right: 150px !important; } }
@media screen and (min-width: 1280px) { html body main .btn.help { right: 180px !important; } }
@media screen and (min-width: 1600px) { html body main .btn.help { right: 250px !important; } }
@media screen and (min-width: 1921px) { html body main .btn.help { right: 280px !important; } }
@media screen and (min-width: 3840px) { html body main .btn.help { right: 400px !important; } }
html body main #levels-container { display: block; width: 100%; height: 200px; background-image: url("../layout/img_top-header.svg"); background-size: cover; background-position: bottom center; background-repeat: no-repeat; }
html body main #levels-container ul { display: block; max-width: 1350px; height: calc(100% - 90px); padding-left: calc(5vh + 40px); padding-top: 25px; margin: 0 auto; }
html body main #levels-container ul li { display: inline-block; position: relative; width: calc(50% - 20px); margin-right: 10px; margin-bottom: 10px; }
html body main #levels-container ul li.bio .icon { background-image: url("../layout/icon_game-2-biodiversità.svg"); }
html body main #levels-container ul li.climate .icon { background-image: url("../layout/icon_game-2-clima.svg"); }
html body main #levels-container ul li.welfare .icon { background-image: url("../layout/icon_game-2-benessere.svg"); }
html body main #levels-container ul li.economy .icon { background-image: url("../layout/icon_game-2-economia.svg"); }
html body main #levels-container ul li.bio.death .icon { background-image: url("../layout/icon_game-2-biodiversità-death.svg"); }
html body main #levels-container ul li.bio.death .info-level h4 { color: #ff0000; }
html body main #levels-container ul li.bio.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #levels-container ul li.climate.death .icon { background-image: url("../layout/icon_game-2-clima-death.svg"); }
html body main #levels-container ul li.climate.death .info-level h4 { color: #ff0000; }
html body main #levels-container ul li.climate.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #levels-container ul li.welfare.death .icon { background-image: url("../layout/icon_game-2-benessere-death.svg"); }
html body main #levels-container ul li.welfare.death .info-level h4 { color: #ff0000; }
html body main #levels-container ul li.welfare.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #levels-container ul li.economy.death .icon { background-image: url("../layout/icon_game-2-economia-death.svg"); }
html body main #levels-container ul li.economy.death .info-level h4 { color: #ff0000; }
html body main #levels-container ul li.economy.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #levels-container ul li .icon { display: block; width: 5vh; height: 5vh; aspect-ratio: 1/1; border-radius: 100%; background-size: 70%; background-repeat: no-repeat; background-position: center; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
html body main #levels-container ul li .info-level { display: block; position: absolute; top: 0; left: 5vh; width: calc(100% - 5vh); height: 5vh; }
html body main #levels-container ul li .info-level h4 { display: block; position: absolute; top: 0; left: 0; width: 100%; font-family: "Lato-Bold"; font-size: 0.5em; color: #008031; text-transform: uppercase; text-align: center; }
html body main #levels-container ul li .info-level .status-bar { display: block; position: absolute; top: calc(50% - 7px); width: 100%; height: 14px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; background-color: #ccc; overflow: hidden; }
html body main #levels-container ul li .info-level .status-bar .progress-bar { display: block; width: 50%; height: 100%; background-color: #272734; transition: width 2s ease; }
html body main #levels-container ul li .info-level .status-bar .progress-bar.pos { background-color: #00ff55; }
html body main #levels-container ul li .info-level .status-bar .progress-bar.neg { background-color: #ffbb00; }
html body main #levels-container ul li .info-level .status-bar .progress-bar.death { background-color: #ff0000; }
html body main .login { display: block; position: absolute; top: 120px; left: 20px; width: 5vh; height: 5vh; }
html body main .login .login-container .img-avatar { display: block; width: 5vh; height: 5vh; border-radius: 100%; background-color: #00ff55; }
html body main .login .login-container .img-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
html body main .login .login-container .user-name { display: block; position: absolute; top: 0; width: 100%; height: 100%; text-align: center; }
html body main .login .login-container .user-name h5 { display: block; position: absolute; top: -10px; width: 100%; color: #00ff55; font-family: "Lato-Regular"; font-size: 0.3em; text-transform: uppercase; }
html body main .login .login-container .user-name h4 { display: block; position: absolute; bottom: -20px; width: 100%; color: #fff; font-family: "Lato-Bold"; font-size: 0.5em; }
@media screen and (min-width: 1024px) { html body main #levels-container { display: block; width: 100%; height: 200px; background-image: url("../layout/img_top-header.svg"); background-size: cover; background-position: bottom center; background-repeat: no-repeat; }
  html body main #levels-container ul { display: flex; max-width: 700px; height: calc(100% - 90px); padding-left: 0; padding-top: 10px; margin: 0 auto; }
  html body main #levels-container ul li { display: inline-flex; flex-direction: row; align-items: center; width: 100%; margin-right: 50px; }
  html body main #levels-container ul li .info-level { display: block; position: relative; width: 100%; left: 0; }
  html body main #levels-container ul li .info-level h4 { text-align: left; font-size: 0.5em; }
  html body main .login { top: calc(40px - 0.5vh); left: auto; right: 0; width: 12%; max-width: 400px; min-width: 140px; height: 6vh; }
  html body main .login .login-container { display: block; width: 100%; height: 100%; border-top-left-radius: 3vh; border-bottom-left-radius: 3vh; background-color: #0e0e1d; }
  html body main .login .login-container .img-avatar { position: absolute; top: 0.5vh; left: 0.5vh; }
  html body main .login .login-container .user-name { top: 1vh; right: 1vh; width: calc(100% - 8vh); height: 4vh; text-align: left; }
  html body main .login .login-container .user-name h5 { top: 0; font-size: 0.5em; }
  html body main .login .login-container .user-name h4 { bottom: 0.5vh; font-size: 0.6em; } }
@media screen and (min-width: 1280px) { html body main #levels-container ul { max-width: 850px; } }
@media screen and (min-width: 1350px) { html body main #levels-container ul { max-width: 1000px; padding-top: 15px; }
  html body main .login .login-container .user-name h4 { bottom: 1vh; } }
@media screen and (min-width: 1920px) { html body main #levels-container .login { width: 12%; max-width: 400px; }
  html body main #levels-container .login .login-container .user-name h5 { font-size: 0.8em; }
  html body main #levels-container .login .login-container .user-name h4 { font-size: 1em; }
  html body main #levels-container ul { max-width: 1350px; } }
@media screen and (min-width: 3840px) { html body main #levels-container { height: 280px; background-position: center -150px; }
  html body main #levels-container ul { max-width: 3000px; padding-top: 0; padding-left: 0; }
  html body main #levels-container ul li { margin-bottom: 0; }
  html body main #levels-container ul li .info-level h4 { font-size: 1.4em; }
  html body main #levels-container ul li .info-level .status-bar { top: calc(50% - 14px); height: 28px; border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
  html body main .login { max-width: 400px; }
  html body main .login .login-container .user-name h5 { font-size: 1em; }
  html body main .login .login-container .user-name h4 { font-size: 1.8em; } }
@keyframes fall-down-center { 5% { bottom: 0; }
  100% { bottom: -200%; } }
@keyframes fall-down-right { 5% { transform: rotate(5deg); transform-origin: left; bottom: 0; }
  100% { bottom: -200%; } }
@keyframes fall-down-left { 5% { transform: rotate(-5deg); transform-origin: right; bottom: 0; }
  100% { bottom: -200%; } }
@media screen and (max-height: 694px) { html body main #cards-container .cards { max-height: 380px !important; }
  html body main #cards-container .cards::after { height: 380px !important; }
  html body main #cards-container .cards .card { height: calc(380px - 50px) !important; } }
html body main #cards-container { display: block; position: relative; width: 90%; max-width: 800px; height: calc(100% - 225px); margin: 0 auto 100px; }
html body main #cards-container .cards { display: block; position: relative; top: calc(50% - 225px); width: 100%; height: 100%; max-height: 450px; margin: 0 auto; }
html body main #cards-container .cards::after { display: block; content: ""; position: absolute; left: 0; right: 0; bottom: -20px; width: calc(100% - 50px); height: 450px; margin: auto; border-radius: 20px; background-image: url("../layout/icon_doubt-opacity.svg"); background-position: center; background-size: 100%; background-color: #305253; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: -1; }
html body main #cards-container .cards .card { display: flex; flex-direction: column; align-items: center; position: absolute; width: calc(100% - 70px); height: calc(450px - 70px); padding: 25px; border-radius: 30px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body main #cards-container .cards .card.active { opacity: 1; pointer-events: all; z-index: 9; }
html body main #cards-container .cards .card.sudden { display: table; background-color: #0e0e1d; }
html body main #cards-container .cards .card.sudden h2 { display: table-cell; vertical-align: middle; color: #fff; font-family: "Lato-Bold"; line-height: 1.5em; text-align: center; }
html body main #cards-container .cards .card.sudden h2 i, html body main #cards-container .cards .card.sudden h2 em { font-family: "Lato-BoldItalic"; }
html body main #cards-container .cards .card.sudden .selected { display: none; }
html body main #cards-container .cards .card.fall-down { animation-timing-function: cubic-bezier(1, 0.01, 1, 0.42); }
html body main #cards-container .cards .card.fall-down.center { animation-name: fall-down-center; }
html body main #cards-container .cards .card.fall-down.right { animation-name: fall-down-right; }
html body main #cards-container .cards .card.fall-down.left { animation-name: fall-down-left; }
html body main #cards-container .cards .card .text-container { display: inline-flex; align-items: center; height: calc(60% - 20px); margin-bottom: 20px; overflow-y: auto; }
html body main #cards-container .cards .card .text-container h2 { color: #305253; font-family: "Lato-Bold"; font-size: 1.2em; line-height: 1.3em; text-align: center; }
html body main #cards-container .cards .card img { display: inline-flex; align-items: center; width: 100%; height: 40%; object-fit: contain; object-position: center; }
html body main #cards-container .cards .card img.hidden { display: none; }
html body main #cards-container .cards .card .btn.square { display: none; }
html body main #cards-container .cards #wait-master { cursor: pointer; display: table; position: absolute; bottom: 5vh; left: 0; right: 0; width: calc(90% - 4vh); max-width: 400px; margin: auto; padding: 2vh; border: 5px solid #ffeab2; border-radius: 50px; background-color: #ffbb00; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 10000; }
html body main #cards-container .cards #wait-master h4 { font-family: "Lato-Bold"; color: #000; font-size: 3vh; text-align: center; text-transform: uppercase; }
@media screen and (min-width: 768px) { html body main #cards-container .cards::after { background-image: url("../layout/icon_doubt.svg"); background-color: #fff; }
  html body main #cards-container .cards #wait-master { bottom: 5vh; } }
@media screen and (min-width: 1024px) { html body main #cards-container { height: calc(100% - 250px); margin: 0 auto 100px; }
  html body main #cards-container .cards { top: calc(50% - 250px); max-height: 500px; }
  html body main #cards-container .cards::after { width: calc(100% - 100px); height: 500px; border-radius: 50px; }
  html body main #cards-container .cards .card { width: calc(100% - 120px); height: calc(500px - 120px); padding: 50px; border-radius: 60px; }
  html body main #cards-container .cards .card h2 { font-size: 1.5em !important; }
  html body main #cards-container .cards .card .btn.square { display: block; } }
@media (min-width: 1280px) and (max-width: 1920px) { html body main #cards-container .cards .card .text-container h2 { max-width: 90%; margin: 0 auto; } }
@media screen and (min-width: 1920px) { html body main #cards-container { max-width: 1000px; height: calc(100% - 300px); }
  html body main #cards-container .cards { top: calc(50% - 300px); max-height: 600px; }
  html body main #cards-container .cards::after { height: 600px; }
  html body main #cards-container .cards .card { height: calc(600px - 100px); } }
@media screen and (min-width: 3840px) { html body main #cards-container { height: calc(100% - 600px); max-width: 3000px; }
  html body main #cards-container .cards { top: calc(50% - 600px); max-height: 1200px; max-width: 2000px; }
  html body main #cards-container .cards::after { bottom: -50px; height: 1200px; }
  html body main #cards-container .cards .card { width: calc(100% - 200px); height: calc(1200px - 200px); padding: 100px; }
  html body main #cards-container .cards .card.sudden h2 { font-size: 2.5em !important; }
  html body main #cards-container .cards .card .text-container h2 { font-size: 3em !important; } }
html body main #answer-text { display: block; position: absolute; bottom: 0; width: 90%; margin: 0 5%; padding: 20px 0; }
html body main #answer-text.hidden { display: none; }
html body main #answer-text h3 { font-family: "Lato-Bold"; text-align: center; color: #fff; text-shadow: 0 0 20px #0e0e1d, 0 0 20px #0e0e1d, 0 0 20px #0e0e1d; }
html body main #answer-text h3 span { display: block; width: 100%; font-size: 0.8em; }
html body main #answer-text.no h3::after { content: ""; position: fixed; height: calc(100% - 200px); width: 30px; top: calc(150px + (100px/2)); left: -30px; border-radius: 50%; background-color: #00ff55; box-shadow: 0 0 20px #00ff55, 0 0 20px #00ff55, 0 0 20px #00ff55; z-index: -99; }
html body main #answer-text.yes h3::after { content: ""; position: fixed; height: calc(100% - 200px); width: 30px; top: calc(150px + (100px/2)); right: -30px; border-radius: 50%; background-color: #00ff55; box-shadow: 0 0 20px #00ff55, 0 0 20px #00ff55, 0 0 20px #00ff55; z-index: -99; }
html body main #draw-answer { display: table; position: absolute; left: calc(50% - 100px); right: calc(50% - 100px); top: 20%; width: auto; min-width: 200px; margin: auto; padding: 5px 8px; border-radius: 20px; background-color: #ffbb00; z-index: 9; }
html body main #draw-answer h3 { color: #0e0e1d; font-size: 0.8em; font-family: "Lato-Bold"; text-align: center; }
html body main #result-answer-group-mobile { display: table; position: absolute; top: 200px; left: 15%; right: 15%; bottom: 0; width: 70%; height: calc(100% - 500px); margin: auto; z-index: 1; }
html body main #result-answer-group-mobile h3 { color: #fff; font-size: 2em; font-family: "Lato-Bold"; text-align: center; }
html body main #status-progress { display: none; position: fixed; bottom: 0; width: 100%; height: 100px; z-index: 99; }
html body main #status-progress #card-bubble { display: block; position: absolute !important; bottom: 120px; width: 50%; max-width: 300px; padding: 15px; border-radius: 10px; background: #fff; box-shadow: 0 0 20px #000; }
html body main #status-progress #card-bubble::after { content: ""; display: block; position: absolute; bottom: -15px; left: 45px; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 15px; border-color: #fff transparent transparent transparent; }
html body main #status-progress #card-bubble h2 { color: #305253; font-family: "Lato-Regular"; font-size: 0.7em; line-height: 1.2em; }
html body main #status-progress ul { display: block; position: relative; width: calc(100% - 20px); height: 100%; margin-left: 20px; white-space: nowrap; overflow-x: auto; text-align: center; }
html body main #status-progress ul::-webkit-scrollbar { height: 0px; }
html body main #status-progress ul li { display: inline-block; position: relative; width: 80px; height: 80px; margin-right: 20px; vertical-align: top; }
html body main #status-progress ul li.blocked { background-image: url("../layout/img_bg-square-status.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; }
html body main #status-progress ul li.blocked::after { content: ""; display: block; position: absolute; top: 0; width: 100%; height: 100%; background-image: url("../layout/icon_padlock-locked-green.svg"); background-position: center; background-size: 40%; background-repeat: no-repeat; }
html body main #status-progress ul li.blocked .content-status img { display: none; }
html body main #status-progress ul li .content-status { position: relative; width: 100%; height: 100%; vertical-align: top; background-image: url("../layout/img_bg-square-status-active.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; }
html body main #status-progress ul li .content-status h4 { display: block; position: absolute; top: 15%; width: 100%; color: #305253; font-family: "Lato-Bold"; text-align: center; z-index: 9; }
html body main #status-progress ul li .content-status img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: calc(60% - 8px); height: calc(60% - 8px); object-fit: contain; object-position: center; margin: auto; }
@media screen and (min-width: 1024px) { html body main #draw-answer { top: 26%; }
  html body main #answer-text, html body main #result-answer-group-mobile { display: none; }
  html body main #status-progress #card-bubble { width: 20%; } }
@media screen and (min-width: 3840px) { html body main #status-progress { height: 200px; }
  html body main #status-progress ul li { width: 160px; height: 160px; }
  html body main #status-progress ul li .content-status h4 { font-size: 2em; }
  html body main #status-progress #card-bubble { bottom: 220px; max-width: 800px; padding: 30px; }
  html body main #status-progress #card-bubble::after { left: 85px; }
  html body main #status-progress #card-bubble h2 { font-size: 1.4em; } }
@media screen and (max-width: 375px) { html body main #draw-answer { top: 20%; } }
@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
html body main .timer { display: block; position: absolute; top: 170px; left: 50%; right: 50%; width: 30px; height: 30px; margin: auto; border-radius: 100%; background-color: rgba(14, 14, 29, 0.2); color: #fff; font-family: "Lato-Black"; text-align: center; line-height: 30px; z-index: 99; transform: translate(-50%, 0%); }
html body main .timer::before { content: ""; display: block; position: absolute; top: -8px; left: -8px; width: 30px; height: 30px; border: 8px solid; border-color: #00ff55 transparent #00ff55 transparent; border-radius: 50%; animation: spin 1.2s linear infinite; }
@media screen and (min-width: 1350px) { html body main .timer { top: 200px; width: 50px; height: 50px; font-size: 1.3em; line-height: 50px; }
  html body main .timer::before { width: 50px; height: 50px; } }
@media screen and (min-width: 3840px) { html body main .timer { top: 250px; width: 150px; height: 150px; font-size: 5em; line-height: 150px; }
  html body main .timer::before { top: -15px; left: -15px; width: 150px; height: 150px; border: 15px solid; border-color: #00ff55 transparent #00ff55 transparent; } }
html body main .waiting-msg { display: table; position: absolute; top: 28%; left: calc(50% - 115px); right: calc(50% - 115px); width: auto; min-width: 230px; margin: auto; padding: 5px 8px; border-radius: 20px; background-color: #fff; z-index: 99; }
html body main .waiting-msg h3 { color: #00ff55; font-size: 0.8em; font-family: "Lato-Bold"; text-align: center; }
@media screen and (min-width: 1024px) { html body main .waiting-msg { top: 26%; } }
@media screen and (max-width: 375px) { html body main .waiting-msg { top: 20%; } }
html body main #resume-stats { display: block; width: 90%; max-width: 1350px; margin: 0 auto; padding-top: 50px; }
html body main #resume-stats .data { display: block; width: 100%; margin-bottom: 30px; }
html body main #resume-stats .data h1 { color: #fff; font-family: "Lato-Bold"; font-size: 1.5em; line-height: 1.2em; margin-bottom: 20px; text-align: center; }
html body main #resume-stats .data ul.data-list { display: block; }
html body main #resume-stats .data ul.data-list li { display: block; width: 100%; margin-bottom: 10px; }
html body main #resume-stats .data ul.data-list li h3 { display: inline-block; width: 100%; color: #fff; font-family: "Lato-Bold"; font-size: 1em; text-align: center; }
html body main #resume-stats .data ul.data-list li h3 span { display: inline-block; font-size: 1.2em; margin-left: 10px; }
html body main #resume-stats .data ul.data-list li h3 span.pos { color: #00ff55; }
html body main #resume-stats .data ul.data-list li h3 span.neg { color: #ff0000; }
html body main #resume-stats .text-result { display: block; max-height: 100px; padding-bottom: 10px; margin-bottom: 20px; overflow-y: auto; }
html body main #resume-stats .text-result::-webkit-scrollbar { width: 5px; }
html body main #resume-stats .text-result::-webkit-scrollbar-track { border-radius: 5px; background-color: #fff; }
html body main #resume-stats .text-result::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #00ff55; }
html body main #resume-stats .text-result p { color: #fff; font-family: "Lato-Regular"; line-height: 1.2em; padding-right: 5px; margin-bottom: 10px; }
html body main #resume-stats .text-result p:last-child { margin-bottom: 0; }
html body main #resume-stats .resume-levels { display: block; width: 100%; margin-bottom: 20px; }
html body main #resume-stats .resume-levels ul.levels-list { display: block; width: 100%; }
html body main #resume-stats .resume-levels ul.levels-list li { display: inline-block; position: relative; width: 100%; margin-bottom: 20px; }
html body main #resume-stats .resume-levels ul.levels-list li.bio .icon { background-image: url("../layout/icon_game-2-biodiversità.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.climate .icon { background-image: url("../layout/icon_game-2-clima.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.welfare .icon { background-image: url("../layout/icon_game-2-benessere.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.economy .icon { background-image: url("../layout/icon_game-2-economia.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.bio.death .icon { background-image: url("../layout/icon_game-2-biodiversità-death.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.bio.death .info-level h4 { color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li.bio.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li.climate.death .icon { background-image: url("../layout/icon_game-2-clima-death.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.climate.death .info-level h4 { color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li.climate.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li.welfare.death .icon { background-image: url("../layout/icon_game-2-benessere-death.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.welfare.death .info-level h4 { color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li.welfare.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li.economy.death .icon { background-image: url("../layout/icon_game-2-economia-death.svg"); }
html body main #resume-stats .resume-levels ul.levels-list li.economy.death .info-level h4 { color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li.economy.death .info-level .status-bar .progress-bar { background-color: #ff0000; }
html body main #resume-stats .resume-levels ul.levels-list li .icon { display: block; width: 5vh; height: 5vh; aspect-ratio: 1/1; border-radius: 100%; background-size: 70%; background-repeat: no-repeat; background-position: center; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
html body main #resume-stats .resume-levels ul.levels-list li .info-level { display: block; position: absolute; top: 0; left: 5vh; width: calc(100% - 5vh); height: 5vh; }
html body main #resume-stats .resume-levels ul.levels-list li .info-level h4 { display: block; position: absolute; top: 0; left: 0; width: 100%; font-family: "Lato-Bold"; font-size: 0.5em; color: #fff; text-transform: uppercase; text-align: center; }
html body main #resume-stats .resume-levels ul.levels-list li .info-level .status-bar { display: block; position: absolute; top: calc(50% - 4px); width: 100%; height: 8px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-color: #ccc; overflow: hidden; }
html body main #resume-stats .resume-levels ul.levels-list li .info-level .status-bar .progress-bar { display: block; width: 50%; height: 100%; background-color: #272734; }
html body main #resume-stats .download-pdf { display: table; position: absolute; bottom: 90px; left: calc(50% - 140px); right: calc(50% - 140px); min-width: 280px; margin: auto; text-align: center; border-radius: 30px; background-color: #0e0e1d; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 9; }
html body main #resume-stats .download-pdf a { display: table; width: calc(100% - 80px); height: calc(100% - 40px); padding: 20px 40px; color: #fff; text-decoration: none; }
html body main #resume-stats .download-pdf a h3 { display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-family: "Lato-Bold"; }
html body main #resume-stats .next-round { display: block; position: absolute; left: 0; right: 0; bottom: 0px; width: 90%; margin: 0 auto; }
html body main #resume-stats .next-round .countdown { display: block; color: #fff; font-family: "Lato-Regular"; text-align: center; }
html body main #resume-stats .next-round .btn.goto { left: calc(50% - 115px); right: calc(50% - 115px); }
@media screen and (min-width: 1024px) { html body main #resume-stats { padding-top: 150px; }
  html body main #resume-stats .data { margin-bottom: 50px; }
  html body main #resume-stats .data h1 { font-size: 2.5em; margin-bottom: 50px; text-align: left; }
  html body main #resume-stats .data ul.data-list li { margin-bottom: 30px; }
  html body main #resume-stats .data ul.data-list li h3 { font-size: 1.5em; text-align: left; }
  html body main #resume-stats .text-result { max-height: 120px; }
  html body main #resume-stats .resume-levels { margin-bottom: 50px; }
  html body main #resume-stats .resume-levels ul.levels-list { display: flex; flex-wrap: wrap; max-width: 1350px; height: calc(100% - 90px); padding-top: 20px; margin: 0 auto; }
  html body main #resume-stats .resume-levels ul.levels-list li { display: inline-flex; flex-direction: row; align-items: center; width: calc(50% - 50px); margin-right: 50px; margin-bottom: 50px; }
  html body main #resume-stats .resume-levels ul.levels-list li:last-child { margin-right: 0; }
  html body main #resume-stats .resume-levels ul.levels-list li .icon { width: 8vh; height: 8vh; }
  html body main #resume-stats .resume-levels ul.levels-list li .info-level { display: block; position: relative; width: 100%; height: 8vh; left: 0; }
  html body main #resume-stats .resume-levels ul.levels-list li .info-level h4 { text-align: left; font-size: 1em; }
  html body main #resume-stats .resume-levels ul.levels-list li .info-level .status-bar { top: calc(50% - 6px); height: 12px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
  html body main #resume-stats .download-pdf { bottom: 150px; } }
@media screen and (min-width: 1350px) { html body main #resume-stats .text-result { max-height: 200px; } }
@media screen and (min-width: 1920px) { html body main #resume-stats .text-result { max-height: 250px; margin-bottom: 50px; } }
@media screen and (min-width: 3840px) { html body main #resume-stats { max-width: 3000px; padding-top: 15%; }
  html body main #resume-stats .data { margin-bottom: 100px; }
  html body main #resume-stats .data h1 { font-size: 5em; text-align: center; }
  html body main #resume-stats .text-result { max-height: 300px; margin-bottom: 100px; font-size: 2.5em; }
  html body main #resume-stats .resume-levels ul.levels-list { max-width: 3000px; }
  html body main #resume-stats .resume-levels ul.levels-list li { width: calc(50% - 100px); margin-right: 100px; margin-bottom: 100px; }
  html body main #resume-stats .resume-levels ul.levels-list li .info-level h4 { font-size: 2em; text-align: center; }
  html body main #resume-stats .resume-levels ul.levels-list li .info-level .status-bar { top: calc(50% - 14px); height: 28px; border-top-right-radius: 14px; border-bottom-right-radius: 14px; } }
@media screen and (max-width: 1024px) { html body main.gioco-2 .login, html body main.gioco-1 .login { top: 80px !important; }
  html body main.gioco-2 .login .login-container .user-name h5, html body main.gioco-1 .login .login-container .user-name h5 { display: none !important; }
  html body main.gioco-2 .login .login-container .user-name h4, html body main.gioco-1 .login .login-container .user-name h4 { color: #000 !important; }
  html body main.gioco-2 .btn.close { top: 25px !important; } }
html body .intro-games-container { display: block; position: relative; width: 100%; height: 100%; }
html body .intro-games-container .btn.back { top: 20px; }
html body .intro-games-container .logo { display: block; position: absolute; top: calc(5% + 30px); left: 0px; right: 0; width: 200px; aspect-ratio: 3.5/1; margin: auto; background-image: url("../layout/logo-white.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
html body .intro-games-container .logo a { display: block; width: 100%; height: 100%; }
html body .intro-games-container .intro-games-title { display: block; position: absolute; top: calc(30px + 20px + 5% + 30px + 60px); left: 0; right: 0; width: 90%; max-width: 2500px; margin: auto; color: #fff; font-family: "Lato-Black"; text-align: center; }
html body .intro-games-container .intro-games-title h1 { display: block; font-size: 1.3em; }
html body .intro-games-container .intro-games-title h1 span { display: block; color: #ffeab2; margin-top: 20px; font-size: 0.5em; }
html body .intro-games-container ul.games { display: block; width: 90%; height: calc(100vh - 350px); padding-top: 300px; margin: auto; overflow: hidden; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; scroll-snap-align: start; }
html body .intro-games-container ul.games::-webkit-scrollbar { width: 0; }
html body .intro-games-container ul.games li { display: inline-block; position: relative; width: calc(100% - 40px); height: calc(100% - 40px); aspect-ratio: 2/3; border-radius: 30px; padding: 20px; margin: 0 10px; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; background-color: #fff; transition: all 0.5s ease; }
html body .intro-games-container ul.games li::after { content: ""; display: block; position: absolute; bottom: calc(50% - 100px); left: 0; right: 0; width: 200px; aspect-ratio: 1/1; margin: auto; background-size: contain; background-position: center; background-repeat: no-repeat; }
html body .intro-games-container ul.games li:nth-child(1)::after { background-image: url("../layout/img_mascotte-game-1.svg"); }
html body .intro-games-container ul.games li:nth-child(2)::after { background-image: url("../layout/img_mascotte-game-2.svg"); }
html body .intro-games-container ul.games li h2 { display: block; position: absolute; top: 15%; left: 0; right: 0; width: calc(100% - 40px); margin: auto; color: #305253; font-family: "Lato-Black"; font-size: 2em; text-align: center; white-space: break-spaces; z-index: 9; }
html body .intro-games-container ul.games li .btn.goto { bottom: 15%; }
html body .intro-games-container ul.pagination { display: block; position: absolute; width: 100%; text-align: center; margin-top: 20px; }
html body .intro-games-container ul.pagination li { display: inline-block; width: 8px; height: 8px; margin: 0 2px; padding: 0; border-radius: 100%; background-color: #0e0e1d; }
html body .intro-games-container ul.pagination li.selected { background-color: #00ff55; }
@media screen and (min-width: 1024px) { html body .intro-games-container .intro-games-title { top: 150px; }
  html body .intro-games-container .intro-games-title h1 { display: block; font-size: 1.5em; }
  html body .intro-games-container ul.games { display: flex; flex-wrap: nowrap; justify-content: center; height: auto; padding-top: 250px; }
  html body .intro-games-container ul.games li { display: inline-flex; position: relative; width: calc(50% - 110px); height: auto; max-height: 800px; aspect-ratio: 3/2; border-radius: 30px; margin: 10px 20px; padding: 20px; }
  html body .intro-games-container ul.games li::after { left: auto; right: -50px; }
  html body .intro-games-container ul.games li h2 { top: 25%; left: 50px; right: auto; width: 60%; text-align: left; }
  html body .intro-games-container ul.games li .btn.goto { left: 0; right: 0; }
  html body .intro-games-container ul.pagination { display: none; } }
@media screen and (min-width: 1920px) { html body .intro-games-container .logo { top: 50px; left: 20px; width: 200px; }
  html body .intro-games-container .intro-games-title h1 { font-size: 4em; margin-bottom: 50px; }
  html body .intro-games-container .intro-games-title h2 { font-size: 2em; }
  html body .intro-games-container ul.games { padding-top: 350px; }
  html body .intro-games-container ul.games li { width: calc(50% - 200px); max-height: 450px; }
  html body .intro-games-container ul.games li::after { right: -100px; bottom: calc(50% - 200px); width: 400px; }
  html body .intro-games-container ul.games li h2 { font-size: 3.5em; } }
@media screen and (min-width: 3840px) { html body .intro-games-container .logo { top: 200px; left: 0; width: 500px; }
  html body .intro-games-container .intro-games-title { top: 450px; }
  html body .intro-games-container .intro-games-title h1 { font-size: 6em; }
  html body .intro-games-container ul.games { padding-top: 800px; }
  html body .intro-games-container ul.games li { width: calc(50% - 450px); max-height: initial; margin: 10px 50px; padding: 100px; }
  html body .intro-games-container ul.games li::after { right: -180px; bottom: calc(50% - 400px); width: 800px; }
  html body .intro-games-container ul.games li h2 { left: 100px; width: calc(100% - 600px); font-size: 6em; }
  html body .intro-games-container ul.games li .btn.goto { left: 220px; } }
html body .btn { display: table; cursor: pointer !important; transition: all 0.5s ease; }
html body .btn.hidden { opacity: 0; pointer-events: none; }
html body .btn.disabled { opacity: 0.5; pointer-events: none; }
html body .btn:active, html body .btn:focus { box-shadow: none; }
html body .btn a { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; }
html body .btn a h3 { font-family: "Lato-Bold"; text-transform: uppercase; }
html body .btn.home { position: absolute; top: 50px; left: 20px; width: 5vh; height: 5vh; min-width: 40px; min-height: 40px; border-radius: 100%; background-color: #305253; background-image: url("../layout/icon_home-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 9999; }
html body .btn.home a { position: absolute; }
html body .btn.home a h3 { color: transparent; font-size: 0em; }
html body .btn.close { position: fixed; top: 50px; left: 20px; width: 5vh; height: 5vh; min-width: 40px; min-height: 40px; border-radius: 100%; background-color: #0e0e1d; background-image: url("../layout/icon_close-white.svg"); background-position: center; background-repeat: no-repeat; background-size: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 99; }
html body .btn.close a { width: 5vh; height: 5vh; }
html body .btn.close a h3 { color: transparent; font-size: 0em; }
html body .btn.back { position: fixed; top: 50px; left: 20px; width: auto; height: 30px; background-image: url("../layout/icon_arrow-left-back-white.svg"); background-position: left center; background-repeat: no-repeat; background-size: 30px; z-index: 99; }
html body .btn.back a { width: 100%; height: 100%; }
html body .btn.back a h3 { color: #fff; font-size: 1em; line-height: 30px; padding-left: 35px; }
html body .btn.help { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: 5vh !important; height: 5vh !important; max-width: none !important; min-width: 0 !important; border-radius: 100%; background-color: transparent; z-index: 99; }
html body .btn.goto { position: absolute; bottom: 20px; left: calc(50% - 115px); right: calc(50% - 115px); min-width: 230px; margin-left: auto; margin-right: auto; margin: auto; text-align: center; border-radius: 30px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 9; /* COLORE */ /* CONTENUTO BTN GOTO */ }
html body .btn.goto.green { background-color: #00ff55; }
html body .btn.goto.green a h3 { color: #0e0e1d; }
html body .btn.goto.blue { background-color: #0e0e1d; }
html body .btn.goto.blue a h3 { color: #00ff55; }
html body .btn.goto.dark-green { background-color: #305253; }
html body .btn.goto.dark-green a h3 { color: #fff; }
html body .btn.goto.dark-green.selected { background-color: transparent; border: 1px solid #707070; }
html body .btn.goto.dark-green.selected a h3 { color: #707070; }
html body .btn.goto.white { background-color: #fff; }
html body .btn.goto.white a h3 { color: #305253; }
html body .btn.goto a { display: table; width: calc(100% - 80px); height: calc(100% - 40px); padding: 20px 40px; }
html body .btn.goto a h3 { display: table-cell; vertical-align: middle; text-align: center; }
html body .btn.square { position: absolute; bottom: calc(50% - 100px); width: 100px; height: 100px; border: 3px solid #fff; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); background-color: #305253; z-index: 9; overflow: hidden; }
html body .btn.square.yes { right: -15px; }
html body .btn.square.no { left: -15px; }
html body .btn.square.unselected { background-color: #707070; }
html body .btn.square.unselected a { pointer-events: none; }
html body .btn.square.unselected a h3 { color: #ccc; }
html body .btn.square.unselected a img { display: none !important; opacity: 0; }
html body .btn.square.selected a { pointer-events: none; }
html body .btn.square.your-vote::before { display: block; content: ""; position: absolute; left: 0; right: 0; bottom: -50px; width: 15px; height: 15px; margin: auto; border-radius: 100%; border: 3px solid #305253; background-color: #00ff55; box-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; }
html body .btn.square.final { background-color: #00ff55; }
html body .btn.square.final a h3, html body .btn.square.final a span, html body .btn.square.final a p span { color: #305253 !important; }
html body .btn.square.wrong { background-color: #ff0000; }
html body .btn.square.wrong a h3, html body .btn.square.wrong a span, html body .btn.square.wrong a p span { color: #707070 !important; }
html body .btn.square a { display: table; text-decoration: none; }
html body .btn.square a h3 { display: table-cell; color: #fff !important; font-family: "Lato-Bold"; text-align: center; vertical-align: middle; }
html body .btn.square a h3 span, html body .btn.square a h3 p span { display: block; width: 90%; margin: 5px auto 0; color: #fff !important; font-size: 10px; text-transform: initial; }
html body .btn.square a img { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100% !important; height: 100% !important; margin: auto; width: 100%; height: 100%; z-index: -1; }
html body .btn.resume { position: absolute; top: calc(50% - 2.5vh); left: -2.5vh; width: 5vh; height: 5vh; border-radius: 100%; animation-name: white-glow; animation-duration: 4s; animation-iteration-count: infinite; z-index: 99; }
html body .btn.bring-up { display: none; position: absolute; top: 20px; left: 0; right: 0; width: 50px; height: 50px; margin: auto; background-image: url("../layout/icon-arrow-top-black.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; }
html body .btn.bring-up a { position: absolute; }
html body .btn.all-cards { position: absolute; bottom: 80px; right: 20px; width: 5vh; height: 5vh; min-width: 40px; min-height: 40px; border-radius: 100%; background-color: #00ff55; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); z-index: 9; }
html body .btn.all-cards::after { display: block; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; margin: auto; background-image: url("../layout/icon_all-cards.svg"); background-position: left center; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
html body .btn.all-cards a h3 { display: none; }
html body .btn.scroll-top { width: 80px; height: 5px; margin: 0px auto 10px; border-radius: 20px; border: 10px solid #fff; background-color: #707070; }
@media screen and (min-width: 1024px) { html body .btn.home { top: 40px; }
  html body .btn.close { top: 40px; }
  html body .btn.square { width: 150px; height: 150px; top: calc(50% - 50px); bottom: auto; }
  html body .btn.square.yes { right: -80px; }
  html body .btn.square.no { left: -80px; }
  html body .btn.square a h3 { font-size: 1.5em; }
  html body .btn.goto { bottom: 30px; }
  html body .btn.all-cards { bottom: 20px; right: 20px; width: 210px; height: 60px; border-radius: 30px; }
  html body .btn.all-cards::after { top: 0; left: 0; bottom: 0; right: auto; width: 80px; height: 80px; margin: auto; }
  html body .btn.all-cards a { display: table; }
  html body .btn.all-cards a h3 { display: table-cell; width: calc(100% - 80px); height: 60px; padding-left: 80px; vertical-align: middle; color: #0e0e1d; font-size: 0.8em; text-transform: initial; } }
@media screen and (min-width: 1350px) { html body .btn.bring-up { top: 30px; }
  html body .btn.goto { bottom: 50px; } }
@media screen and (min-width: 1921px) { html body .btn.all-cards { bottom: 50px; width: 300px; height: 80px; border-radius: 40px; }
  html body .btn.all-cards::after { left: -10px; width: 120px; height: 120px; }
  html body .btn.all-cards a h3 { width: calc(100% - 110px); padding-left: 110px; font-size: 1.2em; } }
@media screen and (min-width: 3840px) { html body .btn.goto { bottom: 100px; transform: scale(2); }
  html body .btn.square { width: 300px; height: 300px; top: calc(50% - 150px); bottom: auto; }
  html body .btn.square.yes { right: -150px; }
  html body .btn.square.no { left: -150px; }
  html body .btn.square a h3 { font-size: 2.5em; } }
html body .popup { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: -1; }
html body .popup.active { opacity: 1; pointer-events: all; z-index: 99; }
html body .popup.active::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(48, 82, 83, 0.9); }
html body .popup ul.popups { display: block; width: 100%; height: 100%; overflow: hidden; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; scroll-snap-align: start; }
html body .popup ul.popups::-webkit-scrollbar { width: 0; height: 0; }
html body .popup ul.popups li { display: inline-block; position: relative; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; transition: all 0.5s ease; }
html body .popup ul.popups li.second .popup-container { background-color: #fff; }
html body .popup ul.popups li.second .popup-container::after { display: none; }
html body .popup ul.popups li.second .popup-container .text-content h2 { color: #008031; }
html body .popup ul.popups li.second .popup-container .text-content p { color: #000; }
html body .popup ul.pagination { display: block; position: fixed; bottom: 80px; width: 100%; text-align: center; }
html body .popup ul.pagination li { display: inline-block; width: 12px; height: 12px; margin: 0 5px; padding: 0; border-radius: 100%; background-color: #CCE6D6; cursor: pointer; }
html body .popup ul.pagination li.selected { background-color: #00ff55; }
html body .popup .popup-container { display: table; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: calc(90vw - 100px); height: calc(60vh - 150px); padding: 50px; border-radius: 20px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
html body .popup .popup-container .text-content { display: block; max-height: 300px; overflow-x: hidden; overflow-y: auto; }
html body .popup .popup-container .text-content::-webkit-scrollbar { width: 5px; }
html body .popup .popup-container .text-content::-webkit-scrollbar-track { background-color: #ccc; border-radius: 2.5px; }
html body .popup .popup-container .text-content::-webkit-scrollbar-thumb { background-color: #008031; border-radius: 2.5px; }
html body .popup .popup-container .text-content .no-table-cell { width: 100%; display: block; height: calc(100% - 80px); overflow-y: auto; }
html body .popup .popup-container .text-content .no-table-cell::-webkit-scrollbar { width: 5px; }
html body .popup .popup-container .text-content .no-table-cell::-webkit-scrollbar-track { background-color: #ccc; border-radius: 2.5px; }
html body .popup .popup-container .text-content .no-table-cell::-webkit-scrollbar-thumb { background-color: #008031; border-radius: 2.5px; }
html body .popup .popup-container .text-content h2 { font-size: 1.5em; font-family: "Lato-Bold"; line-height: 1.3em; margin-bottom: 20px; white-space: break-spaces; }
html body .popup .popup-container .text-content h3 { font-size: 1.3em; font-family: "Lato-Bold"; margin-bottom: 20px; white-space: break-spaces; }
html body .popup .popup-container .text-content h3.alert { color: #ff0000; }
html body .popup .popup-container .text-content h4 { font-family: "Lato-Light"; margin-bottom: 5px; white-space: break-spaces; }
html body .popup .popup-container .text-content p { font-family: "Lato-Regular"; font-size: 1.2em; font-size: 1em; line-height: 1.3em; margin-bottom: 5px; white-space: break-spaces; }
html body .popup.intro-game { transition: none; }
html body .popup.intro-game .popup-container { background-color: #0e0e1d; }
html body .popup.intro-game .popup-container::after { content: ""; display: block; position: absolute; right: -25%; bottom: -20%; width: 220px; height: 300px; background-image: url("../layout/img_mascotte-neutral.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
html body .popup.intro-game .popup-container .text-content { height: calc(100% - 40px); max-height: 300px; }
html body .popup.intro-game .popup-container .text-content h2 { color: #00ff55; }
html body .popup.intro-game .popup-container .text-content p { color: #fff; }
html body .popup.intro-game .popup-container .btn.goto.green { bottom: 10px; }
html body .popup.resume-element .popup-container, html body .popup.resume-round .popup-container, html body .popup.final-result .popup-container { text-align: center; }
html body .popup.resume-element .popup-container .text-content h2, html body .popup.resume-round .popup-container .text-content h2, html body .popup.final-result .popup-container .text-content h2 { font-family: "Lato-Black"; text-transform: uppercase; white-space: initial; }
html body .popup.resume-element .popup-container .text-content h3, html body .popup.resume-round .popup-container .text-content h3, html body .popup.final-result .popup-container .text-content h3 { white-space: initial; }
html body .popup.resume-element .popup-container .text-content h3 span, html body .popup.resume-round .popup-container .text-content h3 span, html body .popup.final-result .popup-container .text-content h3 span { white-space: initial; }
html body .popup.resume-element .popup-container .text-content h3 span.pos, html body .popup.resume-round .popup-container .text-content h3 span.pos, html body .popup.final-result .popup-container .text-content h3 span.pos { color: #008031; }
html body .popup.resume-element .popup-container .text-content h3 span.neg, html body .popup.resume-round .popup-container .text-content h3 span.neg, html body .popup.final-result .popup-container .text-content h3 span.neg { color: #ff0000; }
html body .popup.resume-element .popup-container .text-content h4, html body .popup.resume-round .popup-container .text-content h4, html body .popup.final-result .popup-container .text-content h4 { font-size: 0.8em; text-transform: uppercase; }
html body .popup.resume-element .popup-container .text-content ul li p, html body .popup.resume-round .popup-container .text-content ul li p, html body .popup.final-result .popup-container .text-content ul li p { white-space: initial; }
html body .popup.resume-element .popup-container .text-content ul li p span, html body .popup.resume-round .popup-container .text-content ul li p span, html body .popup.final-result .popup-container .text-content ul li p span { white-space: initial; }
html body .popup.resume-element .popup-container .btn.goto.blue, html body .popup.resume-round .popup-container .btn.goto.blue, html body .popup.final-result .popup-container .btn.goto.blue { left: calc(50% - 115px); right: calc(50% - 115px); }
html body .popup.resume-round { transition: none; }
html body .popup.resume-round .popup-container .text-content { max-height: 220px; }
html body .popup.resume-round .popup-container .text-content h2 span { margin-left: 10px; }
html body .popup.resume-round .popup-container .text-content h2 span.pos { color: #008031; }
html body .popup.resume-round .popup-container .text-content h2 span.neg { color: #ff0000; }
html body .popup.resume-round .popup-container .text-content div.alert { color: #ff0000; margin: 20px 0; }
html body .popup.resume-round .popup-container .text-content p { text-align: left; }
html body .popup.resume-round .popup-container .text-content ul { display: block; text-align: left; }
html body .popup.resume-round .popup-container .text-content ul li p { margin-bottom: 5px; }
html body .popup.resume-round .popup-container .text-content ul li p span.pos { color: #008031; }
html body .popup.resume-round .popup-container .text-content ul li p span.neg { color: #ff0000; }
html body .popup.resume-round .popup-container .text-content table { display: block; width: 100%; height: auto; margin-bottom: 20px; font-family: "Lato-Regular"; }
html body .popup.resume-round .popup-container .text-content table tbody { display: block; width: 100%; }
html body .popup.resume-round .popup-container .text-content table tbody tr { display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%; border-bottom: 1px solid #eaeaea; }
html body .popup.resume-round .popup-container .text-content table tbody tr:first-child td:nth-child(2), html body .popup.resume-round .popup-container .text-content table tbody tr:first-child td:nth-child(3) { font-size: 0.5em; }
html body .popup.resume-round .popup-container .text-content table tbody tr:nth-child(even) { background-color: #fafafa; }
html body .popup.resume-round .popup-container .text-content table tbody tr td { display: inline-flex; flex-wrap: nowrap; align-items: center; width: calc(20% - 10px); padding: 5px; }
html body .popup.resume-round .popup-container .text-content table tbody tr td:first-child { width: calc(50% - 10px); font-family: "Lato-Bold"; }
html body .popup.resume-round .popup-container .text-content table tbody tr td.neg { color: #ff0000; }
html body .popup.resume-round .popup-container .text-content table tbody tr td.pos { color: #008031; }
html body .popup.final-result .popup-container::after { content: ""; display: block; position: absolute; right: -25%; bottom: -20%; width: 220px; height: 300px; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
html body .popup.final-result.winner .popup-container::after { background-image: url(../layout/img_mascotte-winner.svg); }
html body .popup.final-result.loser .popup-container::after { background-image: url(../layout/img_mascotte-loser.svg); }
@media screen and (min-width: 376px) { html body .popup.resume-round .popup-container .text-content { max-height: 300px; } }
@media screen and (min-width: 390px) { html body .popup.resume-round .popup-container .text-content { max-height: 350px; } }
@media screen and (min-width: 768px) { html body .popup.intro-game .popup-container .text-content { display: block; max-height: 300px; padding-right: 20px; }
  html body .popup .popup-container .text-content { display: table-cell; vertical-align: middle; height: calc(30rem - 100px) !important; } }
@media screen and (min-width: 1024px) { html body .popup ul.pagination { bottom: 120px; }
  html body .popup .popup-container { width: calc(60% - 100px); height: calc(60% - 100px); padding: 100px; }
  html body .popup .popup-container .text-content { padding-right: 20px; }
  html body .popup.intro-game .popup-container::after { right: -25%; bottom: -5%; width: 250px; height: 350px; }
  html body .popup.intro-game .popup-container .btn.goto.green { position: absolute; bottom: 50px; }
  html body .popup.final-result .popup-container::after { right: -20%; bottom: -10%; width: 350px; height: 350px; } }
@media screen and (min-width: 1350px) { html body .popup ul.pagination { bottom: 180px; }
  html body .popup .popup-container { padding: 100px; }
  html body .popup.intro-game .popup-container::after { right: -15%; bottom: -5%; }
  html body .popup.final-result .popup-container::after { right: -15%; bottom: -5%; width: 500px; height: 500px; } }
@media screen and (min-width: 1920px) { html body .popup.intro-game .popup-container .text-content { display: table-cell; vertical-align: middle; } }
@media screen and (min-width: 1921px) { html body .popup.intro-game .popup-container::after, html body .popup.final-result .popup-container::after { right: -20%; bottom: -15%; width: 400px; height: 600px; } }
@media screen and (min-width: 3840px) { html body .popup .popup-container .text-content h2 { font-size: 3em; margin-bottom: 40px; }
  html body .popup .popup-container .text-content h3 { font-size: 2.5em; margin-bottom: 40px; }
  html body .popup .popup-container .text-content h4 { font-size: 1.5em !important; margin-bottom: 10px; }
  html body .popup .popup-container .text-content p { font-size: 2em; } }
html body #tutorial { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(14, 14, 29, 0.95); opacity: 0; pointer-events: none; z-index: -1; }
html body #tutorial.active { opacity: 1; pointer-events: all; z-index: 99999; }
html body #tutorial .btn.close { top: 20px; left: auto !important; right: 20px; background-color: #305253; }
html body #tutorial h2 { display: block; width: calc(100% - 20vh); margin: 30px auto 0; color: #00ff55; font-size: 1.5em; font-family: "Lato-Bold"; text-align: center; }
html body #tutorial ul.tutorial-images-list { display: block; position: absolute; top: 100px; width: 100%; height: calc(100% - 120px); overflow: hidden; overflow-x: auto; white-space: nowrap; scroll-snap-type: x mandatory; scroll-snap-align: start; }
html body #tutorial ul.tutorial-images-list::-webkit-scrollbar { width: 0; }
html body #tutorial ul.tutorial-images-list li { display: inline-block; position: relative; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: normal; justify-content: center; align-items: center; vertical-align: top; transition: all 0.5s ease; }
html body #tutorial ul.tutorial-images-list li figure { width: 90%; flex-direction: column; aspect-ratio: 9/16; max-height: calc(100% - 20px); margin: 0 auto; border-radius: 30px; background-color: #fff; }
html body #tutorial ul.tutorial-images-list li figure.mobile { display: flex; }
html body #tutorial ul.tutorial-images-list li figure.desktop { display: none; }
html body #tutorial ul.tutorial-images-list li figure.first { display: block !important; background-color: #0e0e1d; }
html body #tutorial ul.tutorial-images-list li figure.first::after { content: ""; display: block; position: absolute; right: -5%; bottom: 0; width: 100px; height: 120px; background-image: url("../layout/img_mascotte-neutral.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
html body #tutorial ul.tutorial-images-list li figure.first figcaption { width: calc(100% - 80px); height: calc(100% - 40px); padding: 0 20px; flex-direction: column; white-space: break-spaces; background-color: transparent; }
html body #tutorial ul.tutorial-images-list li figure.first figcaption h2 { width: calc(100% - 4vh); }
html body #tutorial ul.tutorial-images-list li figure.first figcaption p { color: #fff; }
html body #tutorial ul.tutorial-images-list li figure img { display: inline-flex; width: 100%; height: calc(85% - 40px); margin: 0 auto; padding: 20px 0; object-fit: contain; object-position: center; }
html body #tutorial ul.tutorial-images-list li figure figcaption { display: inline-flex; width: calc(100% - 40px); height: calc(15% - 20px); margin: 0 20px 20px; background-color: #fff; overflow-y: auto; }
html body #tutorial ul.tutorial-images-list li figure figcaption p { display: block; width: 100%; color: #0e0e1d; font-family: "Lato-Bold"; text-align: center; white-space: break-spaces; line-height: 1.5em; }
html body #tutorial ul.nav-pagination { display: none; }
html body #tutorial ul.pagination { display: block; position: absolute; bottom: 10px; width: 100%; text-align: center; }
html body #tutorial ul.pagination li { display: inline-block; width: 12px; height: 12px; margin: 0 5px; padding: 0; border-radius: 100%; cursor: pointer; background-color: #CCE6D6; }
html body #tutorial ul.pagination li.selected { background-color: #00ff55; }
@media screen and (min-width: 768px) { html body #tutorial .btn.close { top: 30px; }
  html body #tutorial h2 { margin: 45px auto 0; }
  html body #tutorial ul.tutorial-images-list li figure.first figcaption { justify-content: center; }
  html body #tutorial ul.tutorial-images-list li figure.mobile { display: none; }
  html body #tutorial ul.tutorial-images-list li figure.desktop { display: flex; }
  html body #tutorial ul.tutorial-images-list li figure img { max-width: 80%; max-height: 90%; } }
@media screen and (min-width: 1024px) { html body #tutorial .btn.close { top: 20px; }
  html body #tutorial h2 { margin: 30px auto 0; }
  html body #tutorial ul.tutorial-images-list { height: calc(100% - 200px); }
  html body #tutorial ul.tutorial-images-list li figure { aspect-ratio: 16/9; width: 80%; margin: 0 auto; }
  html body #tutorial ul.tutorial-images-list li figure.first::after { right: 0; bottom: 0; width: 220px; height: 300px; }
  html body #tutorial ul.nav-pagination { display: block; position: absolute; top: calc(50% - 25px); width: 100%; height: 5vh; min-height: 40px; text-align: center; pointer-events: none; }
  html body #tutorial ul.nav-pagination li { display: block; position: absolute; width: 5vh; height: 5vh; min-width: 40px; min-height: 40px; border-radius: 100%; background-position: center; background-repeat: no-repeat; background-size: 50%; background-color: #eaeaea; pointer-events: all; cursor: pointer; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
  html body #tutorial ul.nav-pagination li.disabled { opacity: 0.2; pointer-events: none !important; }
  html body #tutorial ul.nav-pagination li.left { left: 20px; background-image: url("../layout/icon_arrow-left-green.svg"); }
  html body #tutorial ul.nav-pagination li.right { right: 20px; background-image: url("../layout/icon_arrow-right-green.svg"); }
  html body #tutorial ul.pagination { bottom: 50px; } }
@media screen and (min-width: 1350px) { html body #tutorial .btn.close { top: 40px; }
  html body #tutorial h2 { margin: 50px auto 0; }
  html body #tutorial ul.tutorial-images-list li figure.first::after { width: 250px; height: 350px; } }
@media screen and (min-width: 1921px) { html body #tutorial ul.tutorial-images-list li figure.first::after { width: 400px; height: 600px; } }
html body.home { background-image: url("../layout/img_background-home.jpg"); background-size: cover; background-repeat: no-repeat; }

@media screen and (max-height: 450px) and (orientation: landscape) { html body #vue-app::before { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../layout/rotate-phone.gif"); background-position: center; background-size: 25%; background-repeat: no-repeat; background-color: #000; z-index: 999; }
  html body main::before { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../layout/rotate-phone.gif"); background-position: center; background-size: 25%; background-repeat: no-repeat; background-color: #000; z-index: 99999; } }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { font-size: 0.7em; line-height: 1em; vertical-align: top; }

i, em { font-family: italic; }

b, strong { font-family: "Lato-Bold"; }