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 UFFICIALI */
/* ALTRI COLORI */
/* VARIANTI */
/* Lista delle famiglie di font, per ogni famiglia inserisco la variabile e la sua posizione */
@font-face { font-family: "MinionPro-Bold"; src: url("../font/MinionPro-Bold.eot"); src: url("../font/MinionPro-Bold.ttf") format("truetype"), url("../font/MinionPro-Bold.eot?#iefix") format("embedded-opentype"), url("../font/MinionPro-Bold.otf"), url("../font/MinionPro-Bold.svg#MinionPro-Bold") format("svg"), url("../font/MinionPro-Bold.woff") format("woff"); }
@font-face { font-family: "MinionPro-BoldIt"; src: url("../font/MinionPro-BoldIt.eot"); src: url("../font/MinionPro-BoldIt.ttf") format("truetype"), url("../font/MinionPro-BoldIt.eot?#iefix") format("embedded-opentype"), url("../font/MinionPro-BoldIt.otf"), url("../font/MinionPro-BoldIt.svg#MinionPro-BoldIt") format("svg"), url("../font/MinionPro-BoldIt.woff") format("woff"); }
@font-face { font-family: "MinionPro-Regular"; src: url("../font/MinionPro-Regular.eot"); src: url("../font/MinionPro-Regular.ttf") format("truetype"), url("../font/MinionPro-Regular.eot?#iefix") format("embedded-opentype"), url("../font/MinionPro-Regular.otf"), url("../font/MinionPro-Regular.svg#MinionPro-Regular") format("svg"), url("../font/MinionPro-Regular.woff") format("woff"); }
@font-face { font-family: "MinionPro-It"; src: url("../font/MinionPro-It.eot"); src: url("../font/MinionPro-It.ttf") format("truetype"), url("../font/MinionPro-It.eot?#iefix") format("embedded-opentype"), url("../font/MinionPro-It.otf"), url("../font/MinionPro-It.svg#MinionPro-It") format("svg"), url("../font/MinionPro-It.woff") format("woff"); }
@font-face { font-family: "Novecentowide-Bold"; src: url("../font/Novecentowide-Bold.eot"); src: url("../font/Novecentowide-Bold.ttf") format("truetype"), url("../font/Novecentowide-Bold.eot?#iefix") format("embedded-opentype"), url("../font/Novecentowide-Bold.otf"), url("../font/Novecentowide-Bold.svg#Novecentowide-Bold") format("svg"), url("../font/Novecentowide-Bold.woff") format("woff"); }
@font-face { font-family: "Novecentowide-Normal"; src: url("../font/Novecentowide-Normal.eot"); src: url("../font/Novecentowide-Normal.ttf") format("truetype"), url("../font/Novecentowide-Normal.eot?#iefix") format("embedded-opentype"), url("../font/Novecentowide-Normal.otf"), url("../font/Novecentowide-Normal.svg#Novecentowide-Normal") format("svg"), url("../font/Novecentowide-Normal.woff") format("woff"); }
@font-face { font-family: "Novecentowide-Light"; src: url("../font/Novecentowide-Light.eot"); src: url("../font/Novecentowide-Light.ttf") format("truetype"), url("../font/Novecentowide-Light.eot?#iefix") format("embedded-opentype"), url("../font/Novecentowide-Light.otf"), url("../font/Novecentowide-Light.svg#Novecentowide-Light") format("svg"), url("../font/Novecentowide-Light.woff") format("woff"); }
@font-face { font-family: "Gotham-Book"; src: url("../font/Gotham-Book.eot"); src: url("../font/Gotham-Book.ttf") format("truetype"), url("../font/Gotham-Book.eot?#iefix") format("embedded-opentype"), url("../font/Gotham-Book.otf"), url("../font/Gotham-Book.svg#Gotham-Book") format("svg"), url("../font/Gotham-Book.woff") format("woff"); }
@font-face { font-family: "Gotham-BookItalic"; src: url("../font/Gotham-BookItalic.eot"); src: url("../font/Gotham-BookItalic.ttf") format("truetype"), url("../font/Gotham-BookItalic.eot?#iefix") format("embedded-opentype"), url("../font/Gotham-BookItalic.otf"), url("../font/Gotham-BookItalic.svg#Gotham-BookItalic") format("svg"), url("../font/Gotham-BookItalic.woff") format("woff"); }
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; transition: opacity 0.5s; }

html { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; }
html body { display: block; width: 100%; height: 100%; }
@keyframes slideBg { 0% { background-image: url(../layout/bg_splash-ani_1.jpg); }
  25% { background-image: url(../layout/bg_splash-ani_2.jpg); }
  50% { background-image: url(../layout/bg_splash-ani_3.jpg); }
  75% { background-image: url(../layout/bg_splash-ani_2.jpg); }
  100% { background-image: url(../layout/bg_splash-ani_1.jpg); } }
html body #splash { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 100%; background-image: url("../layout/bg_splash-ani_1.jpg"); background-position: center; background-size: cover; animation: slideBg 2s linear infinite 0s; animation-timing-function: ease-in-out; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #splash.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #splash .splash-container { display: block; position: absolute; top: 0; left: 0; width: calc(100% - 100px); height: calc(100% - 100px); padding: 50px; }
html body #splash .splash-container .splash-content { display: block; position: relative; width: 100%; height: 100%; }
html body #splash .splash-container .splash-content img { display: block; width: auto; height: calc(50vh - 50px); margin: 0 auto; }
html body #splash .splash-container .splash-content h1 { display: table; position: absolute; bottom: 0; left: 0; right: 0; width: 80%; height: calc(40vh - 50px); margin: 0 10%; color: #fff; font-size: 10vh; font-family: "MinionPro-Regular"; text-align: center; text-transform: uppercase; line-height: 1.2em; }
html body #splash .splash-container .splash-content h1 span { font-family: "MinionPro-Bold"; }
html body #istruzioni { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 100%; background-image: url("../layout/bg_splash-istruzioni.jpg"); background-position: center; background-size: cover; opacity: 0; pointer-events: none; z-index: -1; transition: all 0.5s ease; }
html body #istruzioni.active { opacity: 1; pointer-events: all; z-index: 999; }
html body #istruzioni .istruzioni-container { display: block; position: absolute; top: 0; left: 0; width: calc(100% - 60px); height: calc(100% - 60px); padding: 30px; }
html body #istruzioni .istruzioni-container .istruzioni-content { display: block; position: relative; width: 100%; height: 100%; }
html body #istruzioni .istruzioni-container .istruzioni-content ul { display: block; width: 100%; height: 100%; text-align: center; }
html body #istruzioni .istruzioni-container .istruzioni-content ul li { display: inline-block; position: relative; width: calc(32.5% - 20px); margin: 20px 10px; vertical-align: top; }
html body #istruzioni .istruzioni-container .istruzioni-content ul li:nth-child(3) h2, html body #istruzioni .istruzioni-container .istruzioni-content ul li#btn-start h2 { padding: 10px 20px; background-color: #fff; border-radius: 30px; box-shadow: 0 0 20px #373838; }
html body #istruzioni .istruzioni-container .istruzioni-content ul li:nth-child(3).selected, html body #istruzioni .istruzioni-container .istruzioni-content ul li#btn-start.selected { pointer-events: none; }
html body #istruzioni .istruzioni-container .istruzioni-content ul li:nth-child(3).selected h2, html body #istruzioni .istruzioni-container .istruzioni-content ul li#btn-start.selected h2 { background: #f8ba77; background: linear-gradient(90deg, #f8ba77 0%, #e6465c 50%, #927db4 100%); color: #fff; box-shadow: none; }
html body #istruzioni .istruzioni-container .istruzioni-content ul li img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
html body #istruzioni .istruzioni-container .istruzioni-content ul li h2 { color: #373838; font-family: "Novecentowide-Normal"; font-size: 15px; margin-top: 15%; }
html body #istruzioni .istruzioni-container .istruzioni-content ul li h2 span { font-family: "Novecentowide-Bold"; }
@media only screen and (orientation: portrait) { html body #splash .splash-container .splash-content { display: flex; flex-direction: column; }
  html body #splash .splash-container .splash-content img { width: auto; height: auto !important; max-width: 100%; max-height: 50%; }
  html body #splash .splash-container .splash-content h1 { width: 100%; bottom: 1vh; margin: auto; font-size: 6vh; }
  html body #istruzioni .istruzioni-container { height: calc(100% - 60px); padding: 30px 30px; }
  html body #istruzioni .istruzioni-container .istruzioni-content ul { display: flex; flex-direction: column; }
  html body #istruzioni .istruzioni-container .istruzioni-content ul li { display: block; width: 100%; height: calc(34% - 20px); margin: 0px auto 20px; }
  html body #istruzioni .istruzioni-container .istruzioni-content ul li::before { left: 50px; }
  html body #istruzioni .istruzioni-container .istruzioni-content ul li img { width: auto; height: calc(95% - 32px); margin: 0 auto; }
  html body #istruzioni .istruzioni-container .istruzioni-content ul li h2 { margin-top: 5%; } }

a { text-decoration: none; }

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

i, em { font-style: italic; }

b, strong { font-weight: 700; }

h1 { font-family: "MinionPro-Bold"; }

h2 { font-family: "MinionPro-Bold"; }

h3 { font-family: "Novecentowide-Normal"; }

h4 { font-family: "Novecentowide-Bold"; }

p { font-family: "Gotham-Book"; font-size: 36px; }