/* © Copyright SBORDONE SIMONE */

 @font-face {
    font-family: 'Coffee';
    font-style: normal;
    src: url(../Coffee.woff);
}
@font-face {
    font-family: 'Love Coffee';
    font-style: normal;
    src: url(../coffee2.woff);
}
:root {
    --body-bg: sienna;
    --steam-color: silver;
    --coffee-color: white;
    --steam-animation: steaming 2500ms ease infinite;
    --steam-height: -10px;
    --steam-start-height: 8px;
    --steam1-delay: 100ms;
    --steam2-delay: 250ms;
    --steam3-delay: 50ms;  
    --animazione: 25s;
}
.animazione-1 {animation: var(--animazione) linear 0s infinite scroll-1}
.animazione-2 {animation: var(--animazione) linear 0s infinite scroll-2}
.animazione-3 {animation: var(--animazione) linear 0s infinite scroll-3}
.animazione-4 {animation: var(--animazione) linear 0s infinite scroll-4}

@keyframes scroll-1 {
    0% {transform: translateX(-843.95px)}
    100% {transform: translateX(843.95px)}
}
@keyframes scroll-2 {
    0% {transform: translateX(-1687.9px)}
    100% {transform: translateX(0)}
}
@keyframes scroll-3 {
    0% {transform: translateX(-2631.85px)}
    100% {transform: translateX(-843.95px)}
}
@keyframes scroll-4 {
    0% {transform: translateX(0)}
    100% {transform: translateX(1687.9px)}
}

.homepage{
    width: 100vw;
    height: 100vh;
    background-color: #f9f0e3;
    position: relative;
    z-index: 1;
}

.div_top{
    position: absolute;
    left: 0;
    top: 0;
    height: 15vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    z-index: 99;
}

.div_sx{
    text-align: center;
}

.div_sx > h1{
    color: #8F5D44;
    font-family: 'Love Coffee', sans-serif;
    font-size: calc(2.5rem + .6vw) !important;
    /* text-shadow: 3px 3px 9px rgba(79,47,15,.54); */
    text-shadow: 0px 5px 5px #2b1910;
}

.div_sx img {
    filter: drop-shadow(0px 5px 5px #2b1910);
}

.div_sx .caption{
    font-family: glass antiqua,cursive;
    color: #c30;
    font-size: calc(20px + 0.6vw);
}

.div_bottom{
    position: absolute;
    bottom: 0;
    height: 15vh;
    width: 100%;
    z-index: 99;
}

.canvas_top{
    -webkit-transform: scale(-1);
    transform: scale(-1);
    max-height: 15vh;
    width: 100vw;
}

.canvas_bottom{
    position: relative;
    bottom: 0;
    max-height: 15vh;
    width: 100vw;
}


html{
    background: rgb(80, 37, 16);
    background: url("../images/pattern1.jpg");
    background-repeat: repeat; 
    background-size: cover;
} 
body { 
    background: none;
    overflow: hidden;
}

.logo_Game_home {
    width: calc(150px + 3vw);
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
.logo_Game_home,
.logo_Game{
    transition: .5s !important;
}
.logo_Game_home:hover,
.logo_Game:hover {
    transform: perspective(500px) rotateX(25deg) !important;
}

#loaderNum,
#loaderGiocatori{
    margin-bottom: 2rem;
}
@media (max-width: 768px){
    .imgDIV{
        margin-top: 9rem;
        margin-bottom: 1rem;
    }
    #loaderNum,
    #loaderGiocatori{
        margin-bottom: 5rem;
    }
}

#game { display: none; }

#div_game{
    transition: 2s all ease-in-out;
}

#btn_crediti{
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
    
@media (min-width: 768px){
    #btn_crediti{
        margin-top: 3rem !important;
        margin-bottom: 0 !important;
    }
}

.blurra{
    transition: 1s all;
    animation: 1s blurry ease 0s 1 normal forwards;
}

@keyframes blurry {
    from{
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        -o-filter: blur(0);
        -ms-filter: blur(0);
        filter: blur(0);
    }
    to {
        -webkit-filter: blur(32px);
        -moz-filter: blur(32px);
        -o-filter: blur(32px);
        -ms-filter: blur(32px);
        filter: blur(32px);
    }
}

.de_blurra{
    transition: 1s all;
    animation: 1s de_blurry ease 0s 1 normal forwards;
}

@keyframes de_blurry {
    from{
        -webkit-filter: blur(32px);
        -moz-filter: blur(32px);
        -o-filter: blur(32px);
        -ms-filter: blur(32px);
        filter: blur(32px);
    }
    to {
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        -o-filter: blur(0);
        -ms-filter: blur(0);
        filter: blur(0);
    }
}

/* #region Crediti */
    .div_container {
        background: transparent; 
        width: 100vw; 
        height: 50vh; 
        position: relative;
    }
    .div_chiudi_Crediti {
        position: relative;
        top: 0;
        width: 34.7vw;
        height: 12%;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        background-color: #ECA779;
        margin-left: 63.3%;
    }
    .div_chiudi_Crediti::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 3px;
        right: 3px;
        bottom: -2px;
        border: white 2px solid;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }

    .span_txt_Crediti {
        color: #6f3d17;
        font-family: glass antiqua,cursive;
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        text-shadow: 3px 3px 5px rgba(0,0,0,.25);
        line-height: 3.2rem;
        position: absolute;
        width: 100%;
    }
    .div_bordi_crediti {
        position: relative; 
        top: -4px; 
        left: 0; 
        width: 98%; 
        height: 88%; 
        border: 2px solid #ECA779;
        border-top-left-radius: 24px; 
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        background: rgb(254,254,253);
        background: linear-gradient(160deg, rgba(254,254,253,1) 0%, rgba(232,219,201,1) 100%);
    }
    .div_centro_crediti{
        background: rgb(254,254,253);
        background: linear-gradient(160deg, rgba(254,254,253,1) 0%, rgba(232,219,201,1) 100%);
        position: absolute;
        top: 2px;
        left: 3px;
        right: 3px;
        bottom: 2px;
        border: 2px solid white;
        border-top-left-radius: 24px; 
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }
    .div_centro_crediti > h1 {
        font-family: 'Love Coffee', sans-serif;
        text-align: center;
        text-shadow: 0px 1.5px 1px #2b1910;
        font-size: calc(20px + 1vw);
        margin-top: 2vh;
        color: brown;
    }
    .div_centro_crediti > hr {
        margin-inline: 7vw;
        margin-top: 2vh;
    }
    .div_centro_crediti > ul {
        margin-left: 5vw;
        margin-top: 4vh;
    }
    .div_centro_crediti > ul li {
        font-size: calc(20px + .5vw);
    }
    .div_centro_crediti > ul li a {
        text-decoration: none;
        color: #6f3d17;
    }
    .Xchiudi {
        font-family: monospace;
        width: 30px;
        height: 30px;
        background: brown;
        color: white;
        border: 4px solid brown;
        line-height: normal;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
        position: relative;
        margin-left: calc(100% - 40px);
        top: .3vh;
        -moz-transition: box-shadow 200ms ease-out, -moz-transform 200ms ease-out, opacity 200ms ease-in-out;
        -o-transition: box-shadow 200ms ease-out, -o-transform 200ms ease-out, opacity 200ms ease-in-out;
        -webkit-transition: box-shadow 200ms ease-out, -webkit-transform 200ms ease-out, opacity 200ms ease-in-out;
        transition: box-shadow 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-in-out;
    }
    .Xchiudi:after, .Xchiudi:before {
        -moz-transition: linear 200ms;
        -o-transition: linear 200ms;
        -webkit-transition: linear 200ms;
        transition: linear 200ms;
    }

    .Xchiudi:hover:not(.fadeOut) {
        border: 4px solid chocolate;
        -moz-box-shadow: 0px 0px 0px 20px chocolate inset;
        -webkit-box-shadow: 0px 0px 0px 20px chocolate inset;
        box-shadow: 0px 0px 0px 20px chocolate inset;
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    .Xchiudi:hover:not(.fadeOut):after {
        background-color: #fff;
        -moz-transform: rotate(-45deg) scale(0.6);
        -ms-transform: rotate(-45deg) scale(0.6);
        -webkit-transform: rotate(-45deg) scale(0.6);
        transform: rotate(-45deg) scale(0.6);
    }
    .Xchiudi:hover:not(.fadeOut):before {
        background-color: #fff;
        -moz-transform: rotate(45deg) scale(0.6);
        -ms-transform: rotate(45deg) scale(0.6);
        -webkit-transform: rotate(45deg) scale(0.6);
        transform: rotate(45deg) scale(0.6);
    }
    .appare{
        animation: simoAppare 2s cubic-bezier(0.87, 0, 0.13, 1) 0s 1 alternate forwards;
        z-index: 21 !important;
    }
    @keyframes simoAppare {
        0% {
            opacity: 0;
            transform: rotateX(-70deg);
            transform-origin: bottom;
        }
    
        100% {
            opacity: 1;
            transform: rotateX(0);
            transform-origin: bottom;
        }
    }
    .scompare{
        animation: simoScompare 1s ease-out alternate-reverse;
    }
    @keyframes simoScompare {
        0% {
            transform: rotateX(-70deg);
            transform-origin: bottom;
        }
    
        100% {
            transform: rotateX(0);
            transform-origin: bottom;
        }
    }
    .blurraScompare{
        animation: 1s SimoblurraScompare 0s 1 alternate-reverse forwards;
    }
    @keyframes SimoblurraScompare {
        from {
            transform: rotateX(-70deg);
            transform-origin: bottom;
            -webkit-filter: blur(0);
            -moz-filter: blur(0);
            -o-filter: blur(0);
            -ms-filter: blur(0);
            filter: blur(0);            
        }
    
        to {
            transform: rotateX(0);
            transform-origin: bottom;
            -webkit-filter: blur(32px);
            -moz-filter: blur(32px);
            -o-filter: blur(32px);
            -ms-filter: blur(32px);
            filter: blur(32px);
        }
    }
/* #endregion */

button {
    margin: 10px;
    transition: .5s !important;
}

button:hover{
    transform: perspective(500px) rotateX(25deg) !important;
}

input[type=number] {
    width: 100px;
}

input[type=range] {
    -webkit-appearance: none;
    margin-inline: 4rem;
    width: 400px !important;
    background: none !important;
    padding: 0;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12.8px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #b56a43;
    border-radius: 25px;
    border: 0px solid #000101;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 29px;
    width: 29px;
    border-radius: 50%;
    background: #633118;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8.5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #b56a43;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 12.8px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background: #b56a43;
    border-radius: 50%;
    border: 0px solid #000101;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 29px;
    width: 29px;
    border-radius: 7px;
    background: #633118;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 12.8px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 39px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #b56a43;
    border: 0px solid #000101;
    border-radius: 50%;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
    background: #b56a43;
    border: 0px solid #000101;
    border-radius: 50%;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 29px;
    width: 29px;
    border-radius: 50%;
    background: #633118;
    cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
    background: #b56a43;
}

input[type=range]:focus::-ms-fill-upper {
    background: #b56a43;
}

.divGs {
    margin-top: 9.5rem !important;
}

@media (min-width: 768px) {
    .divGs {
        margin-top: 0 !important;
    }
}

#num_check {
    line-height: 0; 
    width: 5rem; 
    position: absolute; 
    top: 68.5vh; 
    left: 80vw;
}

.btnPiuMeno{
    position: relative;
    color: white;
    border-radius: 20px;
    background-color: #9a4100;
    border: none;
    box-shadow: 5px 5px 10px rgba(55,94,148,.2), -5px -5px 10px rgba(255,255,255,.4);
    transition: background-color .15s ease-in-out,border .15s ease-in-out,box-shadow .15s ease-in-out,color .15s ease-in-out;
    width: 50px;
    margin: 0;
}

.blurraBtn{
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

.ranges{
    color: #6f3d17;
    font-family: 'Love Coffee', sans-serif;
    position: relative;
    top: 20px;
    text-align: center;
}
.rangeNUtente{
    top: 0 !important;
    margin-inline: 1rem;
}
.ranges .outVal_range{
    font-size: 1.6rem;
    text-shadow: 3px 3px 9px rgba(79,47,15,.54);
}

/* Chrome, Safari, Edge, Opera */
.nInput::-webkit-outer-spin-button,
.nInput::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.nInput {
    background: none;
    border: none;
    text-align: center;
    color: #6F3C17;
    -moz-appearance: textfield;
}

#game {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    margin: -240px 0 0 -320px;
    z-index: 1;
    opacity: 1;
    transition: left .5s ease;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    color: #000
}

button.coffee {
    overflow: hidden;
    position: relative;
    vertical-align: top;
    width: calc(250px + 1.3vw);
    height: calc(45px + .7vh);
    margin: 0;
    padding: 0;
    /* border: none; */
    border-radius: 20px;
    background: #f9f0e3 url(../images/button.svg) no-repeat 100% 100%;
    color: #6F3C17;
    font-family: 'Love Coffee', sans-serif !important;
    font-size: 1.2rem;
    box-shadow: 0px 5px 5px #2b1910;
    /* box-shadow: 0 0 20px rgba(163,41,11,.25); */
    border: 2px solid white;
}

button.superBig{
    background: #f9f0e3 url(../images/button.svg) 100% 100% !important;
    background-size: cover !important;
    min-height: 90px;
    align-self: center;
    font-size: 2rem;
}
button.superBig:hover{
    color: #6F3C17 !important;
}

.superBig_Range{
    background: #f9f0e3 url(../images/button.svg) 100% 100% !important;
    background-size: cover !important;
    min-height: 90px;
    width: 344px;
    align-self: center;
    overflow: hidden;
    position: absolute;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 2px solid white;
    border-radius: 20px;
    color: #6F3C17;
    font-family: 'Love Coffee', sans-serif !important;
    font-size: 2rem;
    box-shadow: 0px 5px 5px #2b1910;
    /* box-shadow: 0 0 20px rgba(163,41,11,.25); */
}

button.coffee span {
    content: '';
    box-sizing: border-box;
    /* position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px; */
    /* border-radius: 20px; */
    /* border: 2px solid #fff; */
    line-height: 32px
}

button.coffee.big {
    border: 2px solid white;
    height: calc(45px + .7vh);
    /* border: none; */
    /* border-radius: 24px; */
    font-size: 30px;
    transition: 1s linear;
    width: calc(250px + 1.8vw);
}

button.coffee.big span {
    /* border-radius: 24px; */
    line-height: 42px
}

button.coffee:hover {
    color: #c30;
    border-color: #e1610b;
}

button.coffee:hover span {
    border-color: #eba272
}

button.coffee:active span {
    border-color: #e1610b;
}
a,button,input[type=submit],input[type=button],input[type=reset],input:focus,select,label,option {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent
}


.tooltip {
    display: inline-block;
    margin: 2px 0;
    padding: 0 5px;
    border: 2px solid #000;
    background: #ffc;
    color: #000;
    font-size: 30px;
    font-family: calibri;
    line-height: 43px;
    white-space: nowrap
}

.tooltip+#game {
    display: none
}

.show {
    opacity: 1;
    transition: opacity 1s ease-out .25s;
}

section {
    width: 100%;
    height: 100%
}

section#screen-main {
    z-index: 1;
    opacity: 1;
    background: #f9f0e3;
    font-family: glass antiqua,cursive;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

section#screen-main h1 {
    position: absolute;
    left: 0;
    top: 6.8rem;
    z-index: 3;
    width: 380px;
    color: #6f3d17;
    font-size: 2rem;
    font-family: 'Love Coffee', sans-serif !important;
    text-shadow: 3px 3px 9px rgba(79,47,15,.54);
    text-align: center;
    transform-origin: 0 100%;
    transform: translate(-100px,0) rotate(-90deg)
}

section#screen-main .logo {
    position: absolute;
    z-index: 0;
    left: 140px !important;
    z-index: 3;
    top: 206px !important;
    width: 100px !important;
}

section#screen-main .logo img {
    display: block;
    width: 100%
}

section#screen-main .menu {
    position: absolute;
    left: 380px;
    top: 135px;
    z-index: 1
}

 section#screen-main .caption {
    position: absolute;
    left: 0;
    top: 330px;
    width: 380px;
    z-index: -1;
    color: #c30;
    font-size: 20px;
    text-align: center;
    opacity: 0;
    z-index: 1;
}

section#screen-main .caption i {
    color: #930;
    font-style: normal
}

section#screen-main .decor-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

section#screen-main .decor-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2
}

section#screen-main.show h1 {
    transform: rotate(0) translate(0,0);
    transition: transform 1s cubic-bezier(0,0,0,1) 2.5s
}

section#screen-main.show .caption {
    opacity: 1;
    transition: opacity .75s ease-out 4.25s
}

section#screen-main.show .menu li.highscore {
    color: #777;
    text-align: center;
    transition-delay: 4s
}

section#screen-main.show .menu li.highscore b {
    display: block;
    font-size: 24px
} 

/* #region DA INDOVINARE */
.h1{
    color: #6f3d17;
    font-size: 1.8rem;
    font-family: 'Love Coffee', sans-serif !important;
    text-shadow: 3px 3px 9px rgba(79,47,15,.54);
    text-align: center;
    padding-top: 2rem;
}


section#screen-daIndovinare {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: #f9f0e3;
    font-family: glass antiqua,cursive
}

section#screen-daIndovinare h1 {
    color: #6f3d17;
    font-size: 1.8rem;
    font-family: 'Love Coffee', sans-serif !important;
    text-shadow: 3px 3px 9px rgba(79,47,15,.54);
    text-align: center;
    padding-top: 2rem;
}

section#screen-daIndovinare .menu {
    position: relative;
    left: 95px;
    top: 50px;
    z-index: 1;
    display:flex;
    flex-direction: row;
}

section#screen-daIndovinare .logo {
    position: absolute;
    z-index: 0;
    left: 140px !important;
    z-index: 3;
    top: 206px !important;
    width: 100px !important;
}

section#screen-daIndovinare .logo img {
    display: block;
    width: 100%
}

section#screen-daIndovinare .decor-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

section#screen-daIndovinare .decor-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2
}

section#screen-daIndovinare.show {
    opacity: 1;
    transition: opacity 1s ease-out .25s;
}

section#screen-daIndovinare.show h1 {
    transform: rotate(0) translate(0,0);
    transition: transform 1s cubic-bezier(0,0,0,1) 2.5s
}

section#screen-daIndovinare.show .caption {
    opacity: 1;
    transition: opacity .75s ease-out 4.25s
}

section#screen-daIndovinare.show .status {
    bottom: 0;
    transition: bottom 1s ease-out 4.5s
}
/* #endregion */

/* #region NUMERO GIOCATORI */
section#screen-nGiocatori {
    z-index: 1;
    position: relative;
    opacity: 0;
    background: #f9f0e3;
    font-family: glass antiqua,cursive
}

section#screen-nGiocatori h1 {
    color: #6f3d17;
    font-size: 1.8rem;
    font-family: 'Love Coffee', sans-serif !important;
    text-shadow: 3px 3px 9px rgba(79,47,15,.54);
    text-align: center;
    padding-top: 2rem;
}

section#screen-nGiocatori .menu {
    position: relative;
    left: 95px;
    top: 110px;
    z-index: 1;
    display:flex;
    flex-direction: row;
}

section#screen-nGiocatori .logo {
    position: absolute;
    z-index: 0;
    left: 140px !important;
    z-index: 3;
    top: 206px !important;
    width: 100px !important;
}

section#screen-nGiocatori .logo img {
    display: block;
    width: 100%
}

section#screen-nGiocatori .decor-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

section#screen-nGiocatori .decor-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2
}

section#screen-nGiocatori.show {
    opacity: 1;
    transition: opacity 1s ease-out .25s;
}

section#screen-nGiocatori.show h1 {
    transform: rotate(0) translate(0,0);
    transition: transform 1s cubic-bezier(0,0,0,1) 2.5s
}

section#screen-nGiocatori.show .caption {
    opacity: 1;
    transition: opacity .75s ease-out 4.25s
}

section#screen-nGiocatori.show .status {
    bottom: 0;
    transition: bottom 1s ease-out 4.5s
}
/* #endregion */

/* #region INDOVINA E PAGA */
section#screen-indovinaEPaga {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: #f9f0e3;
    font-family: glass antiqua,cursive
}

section#screen-indovinaEPaga h1 {
    color: #6f3d17;
    font-size: 1.8rem;
    font-family: 'Love Coffee', sans-serif !important;
    text-shadow: 3px 3px 9px rgba(79,47,15,.54);
    text-align: center;
    padding-top: 2rem;
}

section#screen-indovinaEPaga .menu {
    position: relative;
    left: 95px;
    top: 110px;
    z-index: 1;
    display:flex;
    flex-direction: row;
}

section#screen-indovinaEPaga .decor-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

section#screen-indovinaEPaga .decor-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2
}

section#screen-indovinaEPaga.show {
    opacity: 1;
    transition: opacity 1s ease-out .25s;
}

section#screen-indovinaEPaga.show h1 {
    transform: rotate(0) translate(0,0);
    transition: transform 1s cubic-bezier(0,0,0,1) 2.5s
}

section#screen-indovinaEPaga.show .caption {
    opacity: 1;
    transition: opacity .75s ease-out 4.25s
}
/* #endregion */

.loaded section#screen-main.credits-visible h1 {
    transform: translate(-2px,-134px) scale(.5);
    transition: transform .75s ease-in-out
}

.loaded section#screen-main.credits-visible .logo {
    transform: translate(-92px,-160px) scale(.5);
    transition: transform .75s ease-in-out
}

.loaded section#screen-main.credits-visible .caption {
    opacity: 0;
    transition: opacity .5s ease-out
}

.loaded section#screen-main.credits-visible .status {
    bottom: -25px;
    transition: bottom .5s ease-in-out
}

.loaded section#screen-main.credits-visible .menu {
    pointer-events: none
}

.loaded section#screen-main.credits-visible .menu li {
    transform: translate(300px,0);
    transition: transform .5s ease-in-out
}

.loaded section#screen-main.credits-visible .menu li.separated {
    transition-delay: .25s
}

.loaded section#screen-main.credits-visible .back {
    right: 20px
}

.loaded section#screen-main.credits-hidden h1 {
    transform: none;
    transition: transform .75s ease-in-out
}

.loaded section#screen-main.credits-hidden .caption {
    opacity: 1;
    transition: opacity .5s ease-out 1s
}

.loaded section#screen-main.credits-hidden .status {
    bottom: 0;
    transition: bottom .5s ease-in-out 1s
}

.loaded section#screen-main.credits-hidden .menu li {
    transform: translate(0,0);
    transition: transform .5s ease-in-out
}

.loaded section#screen-main.credits-hidden .menu li.separated {
    transition-delay: .25s
}

.loaded section#screen-main.credits-hidden .back {
    right: -60px
}

.loaded section#screen-main.play {
    opacity: 0;
    transition: opacity .75s ease-in-out 3s
}

.loaded section#screen-main.play h1 {
    transform: translate(-100px,0) rotate(-90deg);
    transition: transform .75s ease-in-out
}

.loaded section#screen-main.play .caption {
    opacity: 0;
    transition: opacity .5s ease-out
}

.loaded section#screen-main.play .status {
    bottom: -25px;
    transition: bottom .5s ease-in-out
}

.loaded section#screen-main.play .menu li {
    transform: translate(300px,0);
    transition: transform .5s ease-in-out
}

.loaded section#screen-main.play .menu li.separated {
    transition-delay: .25s
}

.loaded section#screen-main.play .decor-top {
    top: -64px;
    transition: top 1.25s ease-in-out
}

.loaded section#screen-main.play .decor-bottom {
    bottom: -64px;
    transition: bottom 1.25s ease-in-out
}

#screen-credits {
    position: absolute;
    left: 20px;
    top: 35px;
    width: 600px;
    height: 400px;
    background: transparent url(../images/main/credits.svg) no-repeat 50% 0;
}

#screen-credits.hidden {
    bottom: -400px
}

#screen-credits h2 {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 300px;
    color: #6f3d17;
    font-family: glass antiqua,cursive;
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    text-shadow: 3px 3px 5px rgba(0,0,0,.25)
}

#screen-credits h3 {
    position: absolute;
    top: 51px;
    left: 45px;
    right: 45px;
    font-size: 24px;
    font-weight: 400;
    line-height: 50px;
    text-align: center
}

#screen-credits h3 i {
    font-style: normal;
    font-size: 32px
}

#screen-credits ul {
    position: absolute;
    left: 45px;
    right: 45px;
    top: 110px;
    font-size: 20px;
    line-height: 44px
}

#screen-credits ul li {
    position: relative
}

#screen-credits ul li a{
    text-decoration: none;
    color: #6f3d17;
}

#screen-credits ul b {
    position: absolute;
    right: 0;
    font-weight: 400;
    font-size: 24px
}

#screen-game {
    overflow: hidden;
    z-index: 1
}

#screen-game .unit {
    display: inline-block;
    vertical-align: top;
    width: 58px;
    margin-top: 14px;
    color: #999;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1
}

#screen-game.hidden {
    visibility: hidden
}