/*
    CSS FOR THE GAME PAGE PREFIX EVERYTHING WITH .gamepage
*/

/*
    
COLOURS

    BLUE
    #0CB0BA - Primary
    #05929B - Dark

    ORANGE
    #FF6E2B - Primary
    #DD591B - Dark
    #FFC49C - Light
    #FA9162 - Light-Border

*/


.State_Game .scroll-content {
    bottom: 80px;
    background-color: #F6ECEB;
}

.bar-gametop {
    background-color: #FFF;
}

.bar-game {
    height: 80px;
    bottom: 0;
    color: #FFF;
    background-color: #05929B;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
}

    .bar-game h1 {
        color: #FFF;
        text-align: left;
        font-family: 'Roboto-Thin';
        font-size: 38px;
    }

.game-timer {
    font-family: 'Roboto';
    font-size: 32px;
    line-height: 38px;
    color: #ef4e3a;
    padding-right: 20px;
    display: inline-block;
}

.multiplier-progress {
    height: 4px;
    background-color: #DD591B;
    position: absolute;
    bottom: 80px;
}

/***QUESTIONS***/
.gamepage .question-wrap {
    font-family: 'Roboto-Bold';
    height: 80px;
    height: 25vh;
    width: auto;
    color: #535353;
    background-color: #FFF;
    border-color: #DBCFCF;
    border-width: 0;
    border-style: solid;
    border-bottom-width: 5px;
    border-radius: 4px;
    margin: 18px 32px;
    font-size: 38px;
}

    .gamepage .question-wrap .bonus {
        color: goldenrod;
    }

    .gamepage .question-wrap.correct {
        animation: correctflash 1.4s ease-in-out;
        -webkit-animation: correctflash 1.4s ease-in-out;
    }

    .gamepage .question-wrap.incorrect {
        animation: incorrectflash 1.4s ease-in-out;
        -webkit-animation: incorrectflash 1.4s ease-in-out;
    }
    
@-webkit-keyframes correctflash {
    10% {
        background-color: #6CF77C;
    }
    to {
        background-color: white;
    }
}
@keyframes correctflash {
    10% {
        background-color: #6CF77C;
    }
    to {
        background-color: white;
    }
}
@-webkit-keyframes incorrectflash {
    10% {
        background-color: #FF8C8C;
    }
    to {
        background-color: white;
    }
}
@keyframes incorrectflash {
    10% {
        background-color: #FF8C8C;
    }
    to {
        background-color: white;
    }
}


/***ANSWERS***/
.button-answer {
    min-height: 50px;
    font-size: 26px;
    line-height: 50px;
    margin-top: 0;
    margin-bottom: 0;
    color: #fff;
    background: #FFC49C;
    border-color: #FA9162;
    border-width: 0;
    border-bottom-width: 5px;
    border-radius: 4px;
}

    .button-answer:hover {
        color: #FFF;
    }

    .button-answer:active, .button-answer.active {
        color: #FFF;
        background-color: #FF6E2B;
        border-color: #FA9162;
    }
/*.button-answer.active {
        color: #FFF;
        background-color: #FFC49C;
        border-color: #FA9162;
    }*/
.gamepage .answer {
    padding: 0 12px;
    text-align: center;
    color: white;
}

    .gamepage .answer button {
        min-height: 50px;
        font-size: 24px;
    }




/***UPLOAD***/
.gamepage .uploading {
    font-size: 24px;
    margin: 24px;
    text-align: center;
    color: #666;
}

.gamepage .upload-score {
    font-size: 36px;
    line-height: 60px;
    margin: 0;
    background-color: #FF6E2B;
    color: #FFF;
    overflow: hidden;
    text-align: center;
}

.gamepage .upload-stat {
    border-top: 1px solid #F3F3F3;
}





/***RESPONSIVE***/
.gamepage .answers-grid {
    display: none;
    margin-bottom: 24px;
    padding-left: 20px;
    padding-right: 20px;
}

.gamepage .answers-inline {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 567px) {
    .gamepage .answers-grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
    }

    .gamepage .answers-inline {
        display: none;
    }
}
