/*
 *
 *	Colors
 *		White/Light		#ffffff
 *		Gray/Medium		#9f9497
 *		Black/Dark		#393536
 *		Accent 1		#c4161c
 *		Accent 2		#
 *		Accent 3		#
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:wght@100&display=swap');


/*-------------------*/



html, body {
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
}
body {
    
    background-image: url(../images/bg-shift-1.webp),url(../images/bg-shift-0.webp);
    background-size: 102%, 105%;
    background-position: 0% 0%,0% 0%;
    background-repeat: no-repeat, no-repeat;
}
header#slide-header {
    background-color: initial;
    box-shadow: initial;
    z-index: 10000;
    height: 3em;
    display: none;
    background-color: #ffffff;
}
header#slide-header section.slide-width {
    /*background-color: #ffffff;*/
}
footer#slide-footer, footer#slide-footer section.slide-width {
    background-color: #eceaee;
    z-index: 0;
    /*height: 3em;*/
    height: 0em;
}
main#slide-container {
    top: 3em;
    top: 0;
    bottom: 0;
    height: calc(100% - 6em);
    height: calc(100% - 3em);
    height: 100%;
}
article#slide {
/*    min-width: 100% !important;*/
}
article#slide menu {
/*    background-color: #c7ba81;*/
/*    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25);*/
    background-image: url(../images/menu-bg.png);
    background-size: 100% 100%;
    background-position: center center;
}

a.controls {
    color: #0c3959;
    background-color: #ffffff;
}
a.controls:hover {
    color: #ffffff;
    background-color: #c4161c;
}

#loader {
    background-color: #ffffff;
    background-size: 64px;
    background-image: url(../images/loading.webp);
    background-position: center center;
    background-repeat: no-repeat;
}

menu#slide-menu section a, menu#slide-menu section a:visited {
/*    background-color: #c7ba81;*/
    color: #ffffff;
    text-decoration: none;


}
menu#slide-menu section a:hover, menu#slide-menu section a:active {
    color: #c7ba81;
    color: #000000;
/*    background-color: #ffffff;*/
    text-decoration: none;
    background-image: url(../images/menu-item-bg.png);
    background-size: 100% 100%;
    background-position: center center;
}
menu#slide-menu section a.button-locked {
    opacity: 0.25;
}
menu#slide-menu section a.link-active {
    color: #c7ba81;
    color: #000000;

    background-image: url(../images/menu-item-bg.png);
    background-size: 100% 100%;
    background-position: center center;
}


#slide-previous-button, #slide-next-button {

}
#slide-previous-button:hover, #slide-next-button:hover {

}
#slide-previous-button{
    position: absolute;
    height: 8em;
    top: 87%;
    bottom: 0.5em;
    left: -1em;
}
#slide-next-button{
    position: absolute;
    height: 8em;
    top: 87%;
    
    bottom: 0.5em;
    right: 0;
}
#closing-window-message {
    font-family: 'Montserrat', sans-serif;
    color: #10111a;
    text-align: center;
    background: #ffffff;
    box-shadow: 0em 0.1em 0.5em rgba(0,0,0,0.75), 0em -0.1em 0.1em rgba(0,0,0,0.25) inset;
}

#sim-score, #sim-lives, #sim-health {
    background-color: rgba( 0, 0, 0, 0.25 );
    border-radius: 0 5em 5em 0;
}
#sim-points {
/*    color: #ffec1b;*/
}
.sim-points {
    color: #ffec1b;
}
.sim-points-pathway {
    color: #ffec1b;
    text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.9 ), 0 0 1em rgba(255, 255, 255, 1 );
}
#sim-health-max {
    border-radius: 2em;
    background-color: rgba( 255, 255, 255, 0.25 )
}
#sim-health-current {
    border-radius: 2em;
    background-color: #cb4e44;
}
#sim-health-current.dead-health {
    background-color: #842f28;
}
#sim-health-current.low-health {
    background-color: #cb4e44;
}
#sim-health-current.medium-health {
    background-color: #b9aa00;
}
#sim-health-current.high-health {
    background-color: #80cb44;
}
#sim-timer-bar {
    background-color: rgba( 0, 0, 0, 0.25 );
    color: #ffec1b;
}
#sim-time-left {

}
#sim-timer-bar.panic {
    color: #e2574c;
}

#sim-timer-bar.really-panic {
    color: #e2574c;
}
#sim-question {
    color: #ffffff;
}

.sim-selection, .sim-hover {
    box-sizing: content-box;
    background-clip: content-box;
    background-color: #eac906;
    box-shadow: 0 0.5em 0 0 #b5a80b;
    border-radius: 1.5em;
}
.sim-selection:hover, .sim-hover:hover {
    box-shadow: 0 0 0 0 #b5a80b;
    transform: translateY(0.5em);
}
.sim-selection.selected {
    border: dotted 0.25em #ffffff;
    margin: -0.25em;
    margin: -0.5em;
    padding: 0.25em;
    background-color: #f7e160;
    box-shadow: 0 0 0 0 #b5a80b;
    transform: translateY(0.5em);
}
.sim-text-button {
    box-sizing: content-box;
    background-clip: border-box;
    background-color: #eac906;
    box-shadow: 0 0.5em 0 0 #b5a80b;
    border-radius: 1.5em;
    color: #5a500d;
    text-align: center;
    z-index: 11000;
}
.sim-text-button.sim-tutorial,.sim-round-button.sim-tutorial, .sim-hover.sim-tutorial {
    animation: 4s ease forwards sim-fake-click infinite;
}
.sim-text-button.sim-tutorial:hover, .sim-round-button.sim-tutorial:hover, .sim-hover.sim-tutorial:hover {
    animation: 0;
}
.sim-answer.sim-tutorial {
    animation: 0.5s ease backwards pop-in 1, 4s ease forwards sim-fake-click infinite;
}
.sim-answer.sim-tutorial:hover {
    animation-play-state: paused, 0;
}
.sim-clear-button.sim-tutorial {
    animation: 0.5s ease backwards pop-in 1, 4s ease forwards sim-fake-jump infinite;
}
.sim-clear-button.sim-answer.sim-tutorial:hover {
    animation-play-state: paused, 0;
}
.sim-text-button.animated-pop-in.sim-tutorial {
    animation: 0.5s ease backwards pop-in 1, 4s ease forwards sim-fake-click infinite;
    animation-delay: 0s, 1s;
}
.sim-text-button.animated-pop-in.sim-tutorial:hover {
    animation-play-state: paused, 0;
}
@keyframes sim-fake-click {
    0%	    {box-shadow: 0 0.5em 0 0 #b5a80b; transform: translateY(0);}
    49.9%   {box-shadow: 0 0.5em 0 0 #b5a80b; transform: translateY(0);}
    50%	    {box-shadow: 0 0 0 0 #b5a80b; transform: translateY(0.5em);}
    70%	    {box-shadow: 0 0 0 0 #b5a80b; transform: translateY(0.5em);}
    70.1%   {box-shadow: 0 0.5em 0 0 #b5a80b; transform: translateY(0);}
    100%    {box-shadow: 0 0.5em 0 0 #b5a80b; transform: translateY(0);}
}
@keyframes sim-fake-jump {
    0%{transform: translateY(0);}
    
    45%{transform: translateY(0); animation-timing-function: ease-out;}
    50%{transform: translateY(-10%); animation-timing-function: ease-in;}
    55%{transform: translateY(0);}
 
    100%{transform: translateY(0);}
}

.sim-text-button:hover {
    box-shadow: 0 0 0 0 #b5a80b;
    transform: translateY(0.5em);
}
.sim-instruction {
    border-radius: 1.5em;
    color: #ffffff;
    background-color: #72b8de;
    box-shadow: 0 0.5em 0 0 #88c9ed;
    z-index: 11000;
}

.sim-round-button {
    z-index: 11000;
    box-shadow: 0 0.5em 0 0 #b5a80b;
    border-radius: 50%;
}
.sim-round-button:hover {
    transform: translateY(0.5em);
}

.deactivated {
    opacity: 0.5;
}


.sim-answer {
    opacity: 1;
}
.sim-answer-answered {
    background-color: #c8c8c8;
    border-radius: 1.5em;
    opacity: 0.9;
}
.sim-answer-answered {
    background-color: #c8c8c8;
    border-radius: 1.5em;
    opacity: 0.75;
}   
.sim-answer-correct {
    background-color: #cb4e44;
    border-radius: 1.5em;
    opacity: 1;
}
.sim-answer-incorrect {
    background-color: #c8c8c8;
    border-radius: 1.5em;
    opacity: 0.5; 
}
.sim-answer-correct.selected {
    background-color: #13a33f;
    box-sizing: content-box;
    background-clip: content-box;
    margin: -0.25em;
    margin: -0.5em;
    padding: 0.25em;
    opacity: 1;
    border: dotted 0.25em #ffffff;
}
.sim-answer-incorrect.selected {
    background-color: #c8c8c8;
    box-sizing: content-box;
    background-clip: content-box;
    margin: -0.25em;
    margin: -0.5em;
    padding: 0.25em;
    opacity: 0.75;
    border: dotted 0.25em #ffffff;
}

.sim-clear-button.sim-selection.selected {
    transform: translateY(0);
}
.sim-clear-button.sim-selection, .sim-clear-button.sim-hover {
    box-sizing: content-box;
    background-clip: content-box;
    background-color: transparent;
    box-shadow: initial;
    border-radius: 0.5em;
}
.sim-clear-button.sim-selection:hover, .sim-clear-button.sim-hover:hover {
    box-shadow: initial;
    transform: translateY(0);
}
.sim-clear-button.sim-answer {
    opacity: 1;
}
.sim-clear-button.sim-answer-answered {
    background-color: transparent;
    border-radius: 0.5em;
    opacity: 1;
}
.sim-clear-button.sim-answer-answered {
    background-color: transparent;
    border-radius: 0.5em;
    opacity: 1;
}   
.sim-clear-button.sim-answer-correct {
    background-color: transparent;
    border-radius: 0.5em;
    opacity: 1;
}
.sim-clear-button.sim-answer-incorrect {
    background-color: transparent;
    border-radius: 0.5em;
    opacity: 1;
}
.sim-clear-button.sim-answer-correct.selected {
    background-color: transparent;
    box-sizing: content-box;
    background-clip: content-box;
    margin: -0.25em;
    margin: -0.5em;
    padding: 0.25em;
    opacity: 1;
    border: dotted 0.25em #ffffff;
}
.sim-clear-button.sim-answer-incorrect.selected {
    background-color: transparent;
    box-sizing: content-box;
    background-clip: content-box;
    margin: -0.25em;
    margin: -0.5em;
    padding: 0.25em;
    opacity: 0.75;
    border: dotted 0.25em #ffffff;
}

.sim-special-selection.sim-selection.selected {
    border: dotted 0.25em rgba(255, 255, 255, 0);
}
.sim-special-selection.sim-answer-correct.selected {
    border: dotted 0.25em rgba(255, 255, 255, 0);
}
.sim-special-selection.sim-answer-incorrect.selected {
    border: dotted 0.25em rgba(255, 255, 255, 0);
}

.sim-feedback {
    background-color: rgba( 0, 0, 0, 0.75 );
    border-radius: 1.5em;
    color: #ffda44;
}
#sim-nickname {
    transition: top 1s ease;
}
#sim-nickname-input {
    font-family: 'typodermic';
    border-radius: 1em;
    background-color: #ffffff;
    box-shadow: 0 0.5em 0 0 #cccccc;
}
.sim-point-gain {
    text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.9 ), 0 0 1em rgba(255, 255, 255, 1 );
    font-size: 2.5em;
    color: #13a33f;
}
.sim-damage-gain {
    text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.9 ), 0 0 1em rgba(255, 255, 255, 1 );
    font-size: 2.5em;
    color: #cb4e44;
}
.sim-health-hit {
    color: #cb4e44;
    animation: 1s ease forwards falling-right 1;
}
.sim-health-hit:nth-child(odd) {
    animation: 1s ease forwards falling-right 1;
}
.sim-health-hit:nth-child(even) {
    animation: 1s ease forwards falling-left 1;
}
.sim-feedback-message {
    opacity: 0.9;
    text-align: center;
    padding: 0.5em;
    border-radius: 0.5em;
}
.sim-feedback-message.sim-feedback-super-right {

    background-color: #ffffff;
    color: #13a33f;
}
.sim-feedback-message.sim-feedback-right {
    background-color: #13a33f;
    color: #ffffff;
}
.sim-feedback-message.sim-feedback-wrong {
    background-color: #ffffff;
    color: #cb4e44;
}

.sim-feedback-message.sim-feedback-wrong.sim-feedback-not-needed {
    background-color: #cb4e44;
    color: #ffffff;
}


/*Loader Stuff*/
.logo-loading {
    
}
.logo-loading img {
    width: 320px;
}
.logo-partners {
    width: 256px;
}
.logo-partners img {
    width: 100%;
}
.jumping-loading {
    color: #c7ba81;
    font-size: 2em;
    text-align: center;
    margin: 0;
    padding: 0.5em;
}
.jumping-loading p {
    text-align: center;
}
.jumping-loading p span {
    animation-name: jump-loading;
    animation-duration:1s;
    animation-iteration-count: infinite;
    display:block;
    float: left;
    padding: 0.5;
}

.jumping-loading span:nth-child(1) {
	animation-delay: 0.1s;
}
.jumping-loading span:nth-child(2) {
	animation-delay: 0.2s;
}
.jumping-loading span:nth-child(3) {
	animation-delay: 0.3s;
}
.jumping-loading span:nth-child(4) {
	animation-delay: 0.4s;
}
.jumping-loading span:nth-child(5) {
	animation-delay: 0.5s;
}
.jumping-loading span:nth-child(6) {
	animation-delay: 0.6s;
}
.jumping-loading span:nth-child(7) {
	animation-delay: 0.7s;
}
.jumping-loading span:nth-child(8) {
	animation-delay: 0.8s;
}
.jumping-loading span:nth-child(9) {
	animation-delay: 0.9s;
}
.jumping-loading span:nth-child(10) {
	animation-delay: 1s;
}

@keyframes jump-loading {
    0% {transform: translateY(0);animation-timing-function: ease-out;}
    10% {transform: translateY(-25%);animation-timing-function: ease-in;}
    20% {transform: translateY(0);}
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5em;
    text-align: center;
}
.spinner > div {
    width: 18px;
    height: 18px;
    background-color: red;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
#sim-overworld {
    position: absolute;
    width: 2em;
    height: 2em;
    overflow: visible;
}
#sim-overworld-character {
    position: absolute;
    width: 2em;
    height: 2em;
    bottom: 0;
    left: 0;
    overflow: visible;
}
#sim-overworld-body {
    position: absolute; 
    height: 8em; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -100%);
}
#sim-overworld-clothes {
    position: absolute; 
    height: 8em; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -100%);
}
#sim-overworld-nickname {
    position: absolute; 
    width: 25em;
    left: 50%; 
    top: 50%;
    text-align: center;
    font-size: 1.5em;
    color: #eac906;
    transform: translate(-50%, -5.25em);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

#special-menu {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10000;
    background-color: rgba( 100, 100, 100, 0.80 );
}
.quiz-question-text {
    border-radius: 1em;
    background-color: #e0dfe1;
    padding: 1em;
    margin: 0 0 1em 0;
    color: rgba(0, 0, 0, 0.9 );
    font-family: 'Montserrat', sans-serif;
}
.quiz-answer {
    border-bottom: 2px solid #e0dfe1;
    padding: 1em;
    margin: 0 0 0 0;
    color: rgba(0, 0, 0, 0.9 );
    border-radius: 1em;
}

.quiz-button {
    border-radius: 1em;
    background-color: #d07857;
    padding: 0.8em;
    margin: 0px 0px 1em 9px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.quiz-message-start h2, .quiz-message-end h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    position: absolute;
    top: 17%;
    left: 25%; 
    width: 50%;
    color: #d07857;
    text-align: center;
}
.quiz-message-start p, .quiz-message-end p {
    position: absolute;
    top: 32%;
    left: 30%;
    width: 43%;
    text-align: left;
    color: rgba(0, 0, 0, 0.9 );
}

.quiz-list-item.button-locked {
    background-color: rgba(0, 0, 0, 0.9 );
}

#message-start-terminated {

}

#quiz-start-grade, #quiz-end-grade {
    font-family: 'Montserrat', sans-serif;
    top: 65.85%;
    left: 50%;
    width: 16%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    position: absolute;
    color: rgba(0, 0, 0, 0.9 );
}
#quiz-start-best-grade, #quiz-end-best-grade {
    font-family: 'Montserrat', sans-serif;
    top: 65.85%;
    left: 36%;
    width: 16%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    position: absolute;
    color: rgba(0, 0, 0, 0.9 );
}
#quiz-start-attempts, #quiz-end-attempts {
   font-family: 'Montserrat', sans-serif;
    top: 65.85%;
    left: 62%;
    width: 16%;
    transform: translateX(-50%);
    text-align: center;
    font-weight: bold;
    position: absolute;
    color: rgba(0, 0, 0, 0.9 );
}

body.ie #countdownTimer {
    position: absolute;
    
}
#countdownTimer.panic {
    animation: flashing-text 0.5s ease-in-out infinite;
}

#aviso-som {
    position: absolute;
    width: 102%;
    height: 102%;
    top: -1%;
    left: -1%;
    right: -1%;
    bottom: -1%;
    z-index: 10000;
    display: none;
    cursor: pointer;
}

@keyframes flashing-text {
    0%  {color: #ffffff}
    50% {color: #ffffff}
    51% {color: #000000}
    100%{color: #000000}  
}

.trapezoid {
    position: absolute;
    background-color: rgba(0,0,0,0);
    opacity: 0;
    cursor: pointer;
    display: none;
    transition: all 1s ease;
}
.trapezoid.enabled {
    display: block;
}
.trapezoid.active {
    cursor: initial;
    display: block;
    opacity: 1;
}
.trapezoid.inactive {
    cursor: initial;
}
.trapezoid-1 {
    width: 200px;
    height: 200px;
    transform: perspective(50px) rotateX(1deg) rotateY(1deg);
}
.trapezoid-2 {
    width: 200px;
    height: 200px;
    transform: perspective(50px) rotateX(-1deg) rotateY(1deg);
}
.trapezoid-3 {
    width: 200px;
    height: 200px;
    transform: perspective(50px) rotateX(-1deg) rotateY(-1deg);
}
.trapezoid-2 {
    width: 200px;
    height: 200px;
    transform: perspective(50px) rotateX(1deg) rotateY(-1deg);
}

.right-box:hover, .wrong-box:hover {
    opacity: 1;
}
.right-box, .wrong-box, .time-out-box {
    border: 2px solid white;
}
.right-box.active {
    border: 2px solid green;
}
.wrong-box.active {
    border: 2px solid red;
}
.time-out-box.active {
    border: 2px solid gray;
}

#login-input {
    position: absolute;
    padding: 0.5em 1em;
    color: #b9ac7b;
    left: 50%;
    top: 43%;
    width: 54%;
    font-size: 1.5em;
    text-align: center;
    background: transparent;
    text-transform: uppercase;
    border: none;
    color: #ffffff;
    transform:  translate(-50%,-50%);
    cursor: pointer;
    z-index: 20000;
    
}
textarea, select, input, button { outline: none; }
.login-enter {
    position: absolute;
    padding: 0.5em 1em;
    background-color: #b9ac7b;
    left: 50%;
    top: 56%;
    font-size: 1.5em;
    transform: perspective(50px) rotateX(-1deg) rotateY(3deg) translate(-50%,-50%);
    cursor: pointer;
    z-index: 20000;
}
.continue {
    position: absolute;
    display: none;
    padding: 0.5em 1em;
    background-color: #eebd23;
    bottom: 10%;
    right: 10%;
    font-size: 1.5em;
    transform: perspective(20px) rotateX(1deg) rotateY(-1deg);
    cursor: pointer;
    z-index: 20000;
}
.continue-playing {
    position: absolute;
    display: none;
    padding: 0.5em 1em;
    background-color: #eebd23;
    bottom: 10%;
    right: 10%;
    font-size: 1.5em;
    transform: perspective(20px) rotateX(1deg) rotateY(-1deg);
    cursor: pointer;
    z-index: 20000;
}
.validate, .solution {
    position: absolute;
    display: none;
    padding: 0.5em 1em;
    color: #ffffff;
    background-color: #eebd23;
    bottom: 10%;
    right: 10%;
    font-size: 1.5em;
    transform: perspective(20px) rotateX(1deg) rotateY(-1deg);
    cursor: pointer;
    z-index: 20000;
}
.continue:hover, .validate:hover, .solution:hover {
    color: #eebd23;
    background-color: #ffffff;
    
}
.line-point {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.line-point.dead {
    cursor: initial;
}

#lines-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.line-svg {
    stroke: gray;
    stroke-width: 8;
    stroke-linecap: round;
}

.line-svg.dragged {
    stroke-width: 4;
    stroke-dasharray: 4, 4, 4;
    stroke-linecap: butt;
}
.line-svg.wrong {
    stroke: red;    
}
.line-svg.right {
    stroke: green;    
}
.line-svg.solved {
    stroke: light-gray;  
    stroke: green;   
}

.Polaroid {
    position: absolute;
    opacity: 0;
    display: none;
    cursor: pointer;
    width: 171px;
    height: 171px;
    background-color: #f4e5c1;
}

.Polaroid.selected, .Polaroid.shown {
    opacity: 1;
}
.Polaroid.solved {
    opacity: 1;
    background-color: #cac09b;
    transform: scale(1.05);
}
.info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display:none;
    z-index: 11000;
}

.map {
    position: absolute;
    display: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
}
.map.dead {
    cursor: initial;
}

#map-end {
    display: none;
    position: absolute;
    width: 400px;
}

.dnd-target {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}

.dnd-element {
    display: none;
    height: 32px;
    margin: 0.5em;
    cursor: pointer;
    background-color: #b9ac7b;
    padding: 0.5em 1em;    
    transform: perspective(50px) rotateX(1deg) rotateY(-1deg);
}
.dnd-element.dead {
    cursor: initial;
}
.dnd-element.right.solved {
    background-color: #7fbf60;
}
.dnd-element.wrong.solved {
    background-color: #bf8a60;
}
.dnd-element:nth-child(1) {  
    transform: perspective(50px) rotateX(-1deg) rotateY(-1deg);
}
.dnd-element:nth-child(2) {  
    transform: perspective(50px) rotateX(1deg) rotateY(1deg);
}
.dnd-element:nth-child(3) {  
    transform: perspective(50px) rotateX(2deg) rotateY(1deg);
}
.dnd-element:nth-child(4) {  
    transform: perspective(50px) rotateX(-1deg) rotateY(1deg);
}
.dnd-element:nth-child(5) {  
    transform: perspective(50px) rotateX(-1deg) rotateY(3deg);
}

.gs-target {
    position: absolute;
    width: 128px;
    height: 128px;
    background-color: #f4e5c1;
    cursor: crosshair;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    animation: shooting-gallery 11s linear infinite;
    display: none;
    transition: transform 0.25s ease;
    
    border-radius: 50%;
}
@keyframes shooting-gallery {
    0%    {top: 256px; left: 256px;}
    40%   {top: 256px; left: 1024px;}
    50%   {top: 512px; left: 1024px;}
    90%   {top: 512px; left: 256px;}
    100%  {top: 256px; left: 256px;}
}
.gs-target:hover, .gs-target.shot:hover {
    background-color: #ffffff;
    transform: translate(-50%, -50%) scale(1.1);
}
.gs-target:active, .gs-target.shot:active {
    background-color: #ffffff;
    transform: translate(-50%, -50%) scale(1.5) rotate(5deg);
}
.gs-gallery.stop .gs-target {
    animation-play-state: paused;
}

.gs-target.shot {
    background-color: #7fbf60;  
    background-color: #bf8a60;  
}
.gs-target:nth-child(1) {
    animation-delay: -1s;
}
.gs-target:nth-child(2) {
    animation-delay: -2s;
}
.gs-target:nth-child(3) {
    animation-delay: -3s;
}
.gs-target:nth-child(4) {
    animation-delay: -4s;
}
.gs-target:nth-child(5) {
    animation-delay: -5s;
}
.gs-target:nth-child(6) {
    animation-delay: -6s;
}
.gs-target:nth-child(7) {
    animation-delay: -7s;
}
.gs-target:nth-child(8) {
    animation-delay: -8s;
}
.gs-target:nth-child(9) {
    animation-delay: -9s;
}
.gs-target:nth-child(10) {
    animation-delay: -10s;
}
.gs-target:nth-child(11) {
    animation-delay: -11s;
}

#svideo {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.dndS-organizer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    width: 960px;
    left: 160px;
    top: 195px;
}
.dndS-organizer-origin {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    width: 960px;
    left: 160px;
    bottom: 195px;
}
.dndS-target {
    font-family: arial;
    font-weight: bold;
    
    width: 64px;
    height: 64px;
    padding: 16px;
    background-color: #f4e5c1;
    color: #b9ac7b;    color: #000000;

    font-size: 32px;
    text-align: center;
    margin-left: 8px;
    margin-right: 8px;
}
.dndS-origin {
    font-family: arial;
    font-weight: bold;
    width: 64px;
    height: 64px;
    padding: 16px;
    background-color: #dbdbdb;
    color: #b9ac7b;
    font-size: 32px;
    text-align: center;
    margin-left: 8px;
    margin-right: 8px;
    cursor: pointer;
}

.dndS-target .dndS-origin {
    font-family: arial;
    font-weight: bold;
    width: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
    color: green;
    font-size: 32px;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    cursor: initial;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
    background-color: #92bd39;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
    background-color: #3685b4;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
    background-color: #f3953e;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
    background-color: #cd3474;
}
@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(19px, 0);
  }
}

.square-loading-container {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: scale(0.125);
}

.square-loading-item {
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 50%;
}

.square-loading-item-1 {
  background-color: #92bd39;
  top: 0;
  left: 0;
  z-index: 1;
  animation: square-loading-item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.square-loading-item-2 {
  background-color: #3685b4;
  top: 0;
  right: 0;
  animation: square-loading-item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.square-loading-item-3 {
  background-color: #f3953e;
  bottom: 0;
  right: 0;
  z-index: 1;
  animation: square-loading-item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.square-loading-item-4 {
  background-color: #cd3474;
  bottom: 0;
  left: 0;
  animation: square-loading-item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

@keyframes square-loading-item-1_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, 100px)} 
  50% {transform: translate(100px, 100px)} 
  75% {transform: translate(100px, 0)} 
}

@keyframes square-loading-item-2_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(-100px, 0)} 
  50% {transform: translate(-100px, 100px)} 
  75% {transform: translate(0, 100px)} 
}

@keyframes square-loading-item-3_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, -100px)} 
  50% {transform: translate(-100px, -100px)} 
  75% {transform: translate(-100px, 0)} 
}

@keyframes square-loading-item-4_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(100px, 0)} 
  50% {transform: translate(100px, -100px)} 
  75% {transform: translate(0, -100px)} 
}

.polly-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#polly-intro {
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
#polly-game {
    pointer-events: none;
    display: none;
}
#polly-logo {
    position: absolute;
    width: 246px;
    top: 32px;
    left: 517px;
    animation: 0.5s ease backwards rotate-pop-in 1;
    animation-delay: 1s;
}
#polly-debrief {
    display: none;
    z-index: 1000;
}
#polly-intro-message {

}
.polly-end-message {
    display: none;
}
#polly-score {

}
#polly-score-end {

    
}
.polly-button {
    position: absolute;
    width: 128px;
    height: 128px;
    bottom: 80px;
    cursor: pointer;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
}
#polly-button-intro {
    background-image: url(../images/pb-jogar-1.png);
    left: 480px;
    animation: 0.5s ease backwards pop-in 1; 
    animation-delay: 3s;
}
#polly-button-intro:hover {
    background-image: url(../images/pb-jogar-2.png);
}
#polly-button-intro:active {
    background-image: url(../images/pb-jogar-3.png);
}
#polly-button-video {
    background-image: url(../images/pb-rever-1.png);
    left: 672px;
    animation: 0.5s ease backwards pop-in 1; 
    animation-delay: 3.5s;
}
#polly-button-video:hover {
    background-image: url(../images/pb-rever-2.png);
}
#polly-button-video:active {
    background-image: url(../images/pb-rever-3.png);
}

#polly-button-0 {
    background-image: url(../images/pb-green-1.png);
    left: 288px;
    animation: 0.5s ease backwards pop-in 1; 
    animation-delay: 2.25s;
}
#polly-button-0:hover {
    background-image: url(../images/pb-green-2.png);
}
#polly-button-0:active {
    background-image: url(../images/pb-green-3.png);
}
#polly-button-1 {
    background-image: url(../images/pb-blue-1.png);
    left: 480px;
    animation: 0.5s ease backwards pop-in 1; 
    animation-delay: 2.5s;
}
#polly-button-1:hover {
    background-image: url(../images/pb-blue-2.png);
}
#polly-button-1:active {
    background-image: url(../images/pb-blue-3.png);
}
#polly-button-2 {
    background-image: url(../images/pb-orange-1.png);
    left: 672px;
    animation: 0.5s ease backwards pop-in 1; 
    animation-delay: 2.75s;
}
#polly-button-2:hover {
    background-image: url(../images/pb-orange-2.png);
}
#polly-button-2:active {
    background-image: url(../images/pb-orange-3.png);
}
#polly-button-3 {
    background-image: url(../images/pb-red-1.png);
    left: 864px;
    animation: 0.5s ease backwards pop-in 1; 
    animation-delay: 3s;
}
#polly-button-3:hover {
    background-image: url(../images/pb-red-2.png);
}
#polly-button-3:active {
    background-image: url(../images/pb-red-3.png);
}

#polly-points {
}

#polly-points-star {

}
#polly-score {
    color: #ffffff;
    position: absolute;
    width: 161px;
    height: 118px;
    top: 168px;
    right: 150px;
    padding: 0.5rem 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
}
#polly-score span {
    font-size: 20px;
    position: absolute;
    bottom: 8px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}
#polly-points #sim-points {
    font-size: initial;
    padding: 0;
    color: initial;
    float: initial;
}

#polly-timer {
    
}
#polly-timer-clock {

}
#countdownTimer {
    color: #ffffff;
    position: absolute;
    height: 81px;
    width: 162px;
    top: 187px;
    left: 147px;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#polly-timer #countdownTimer.panic {
    animation: flashing-text 0.5s ease-in-out infinite;
}
@keyframes flashing-text {
    0%  {color: #10111a;}
    50% {color: #10111a;}
    51% {color: #ea2c42;}
    100%{color: #ea2c42;}  
}

#polly-game.polly-done .polly-stack-Polaroid {transform: translate(0px, -1000%);}
#polly-game.polly-0 .polly-stack-Polaroid:nth-last-child(-n+1) {transform: translate(0px, -1000%);}
#polly-game.polly-1 .polly-stack-Polaroid:nth-last-child(-n+2) {transform: translate(0px, -1000%);}
#polly-game.polly-2 .polly-stack-Polaroid:nth-last-child(-n+3) {transform: translate(0px, -1000%);}
#polly-game.polly-3 .polly-stack-Polaroid:nth-last-child(-n+4) {transform: translate(0px, -1000%);}
#polly-game.polly-4 .polly-stack-Polaroid:nth-last-child(-n+5) {transform: translate(0px, -1000%);}
#polly-game.polly-5 .polly-stack-Polaroid:nth-last-child(-n+6) {transform: translate(0px, -1000%);}
#polly-game.polly-6 .polly-stack-Polaroid:nth-last-child(-n+7) {transform: translate(0px, -1000%);}
#polly-game.polly-7 .polly-stack-Polaroid:nth-last-child(-n+8) {transform: translate(0px, -1000%);}
#polly-game.polly-8 .polly-stack-Polaroid:nth-last-child(-n+9) {transform: translate(0px, -1000%);}
#polly-game.polly-9 .polly-stack-Polaroid:nth-last-child(-n+10) {transform: translate(0px, -1000%);}
#polly-game.polly-10 .polly-stack-Polaroid:nth-last-child(-n+11) {transform: translate(0px, -1000%);}
#polly-game.polly-11 .polly-stack-Polaroid:nth-last-child(-n+12) {transform: translate(0px, -1000%);}
#polly-game.polly-12 .polly-stack-Polaroid:nth-last-child(-n+13) {transform: translate(0px, -1000%);}
#polly-game.polly-13 .polly-stack-Polaroid:nth-last-child(-n+14) {transform: translate(0px, -1000%);}
#polly-game.polly-14 .polly-stack-Polaroid:nth-last-child(-n+15) {transform: translate(0px, -1000%);}
#polly-game.polly-15 .polly-stack-Polaroid:nth-last-child(-n+16) {transform: translate(0px, -1000%);}
#polly-game.polly-16 .polly-stack-Polaroid:nth-last-child(-n+17) {transform: translate(0px, -1000%);}
#polly-game.polly-17 .polly-stack-Polaroid:nth-last-child(-n+18) {transform: translate(0px, -1000%);}
#polly-game.polly-18 .polly-stack-Polaroid:nth-last-child(-n+19) {transform: translate(0px, -1000%);}
#polly-game.polly-19 .polly-stack-Polaroid:nth-last-child(-n+20) {transform: translate(0px, -1000%);}
#polly-game.polly-20 .polly-stack-Polaroid:nth-last-child(-n+21) {transform: translate(0px, -1000%);}
#polly-game.polly-21 .polly-stack-Polaroid:nth-last-child(-n+22) {transform: translate(0px, -1000%);}
#polly-game.polly-22 .polly-stack-Polaroid:nth-last-child(-n+23) {transform: translate(0px, -1000%);}
#polly-game.polly-23 .polly-stack-Polaroid:nth-last-child(-n+24) {transform: translate(0px, -1000%);}
#polly-game.polly-24 .polly-stack-Polaroid:nth-last-child(-n+25) {transform: translate(0px, -1000%);}
#polly-game.polly-25 .polly-stack-Polaroid:nth-last-child(-n+26) {transform: translate(0px, -1000%);}
#polly-game.polly-26 .polly-stack-Polaroid:nth-last-child(-n+27) {transform: translate(0px, -1000%);}
#polly-game.polly-27 .polly-stack-Polaroid:nth-last-child(-n+28) {transform: translate(0px, -1000%);}
#polly-game.polly-28 .polly-stack-Polaroid:nth-last-child(-n+29) {transform: translate(0px, -1000%);}
#polly-game.polly-29 .polly-stack-Polaroid:nth-last-child(-n+30) {transform: translate(0px, -1000%);}
#polly-game.polly-30 .polly-stack-Polaroid:nth-last-child(-n+31) {transform: translate(0px, -1000%);}
#polly-game.polly-31 .polly-stack-Polaroid:nth-last-child(-n+32) {transform: translate(0px, -1000%);}
#polly-game.polly-32 .polly-stack-Polaroid:nth-last-child(-n+33) {transform: translate(0px, -1000%);}
#polly-game.polly-33 .polly-stack-Polaroid:nth-last-child(-n+34) {transform: translate(0px, -1000%);}
#polly-game.polly-34 .polly-stack-Polaroid:nth-last-child(-n+35) {transform: translate(0px, -1000%);}
#polly-game.polly-35 .polly-stack-Polaroid:nth-last-child(-n+36) {transform: translate(0px, -1000%);}
#polly-game.polly-36 .polly-stack-Polaroid:nth-last-child(-n+37) {transform: translate(0px, -1000%);}
#polly-game.polly-37 .polly-stack-Polaroid:nth-last-child(-n+38) {transform: translate(0px, -1000%);}
#polly-game.polly-38 .polly-stack-Polaroid:nth-last-child(-n+39) {transform: translate(0px, -1000%);}
#polly-game.polly-39 .polly-stack-Polaroid:nth-last-child(-n+40) {transform: translate(0px, -1000%);}
#polly-game.polly-40 .polly-stack-Polaroid:nth-last-child(-n+41) {transform: translate(0px, -1000%);}
#polly-game.polly-41 .polly-stack-Polaroid:nth-last-child(-n+42) {transform: translate(0px, -1000%);}
#polly-game.polly-42 .polly-stack-Polaroid:nth-last-child(-n+43) {transform: translate(0px, -1000%);}
#polly-game.polly-43 .polly-stack-Polaroid:nth-last-child(-n+44) {transform: translate(0px, -1000%);}
#polly-game.polly-44 .polly-stack-Polaroid:nth-last-child(-n+45) {transform: translate(0px, -1000%);}
#polly-game.polly-45 .polly-stack-Polaroid:nth-last-child(-n+46) {transform: translate(0px, -1000%);}
#polly-game.polly-46 .polly-stack-Polaroid:nth-last-child(-n+47) {transform: translate(0px, -1000%);}
#polly-game.polly-47 .polly-stack-Polaroid:nth-last-child(-n+48) {transform: translate(0px, -1000%);}
#polly-game.polly-48 .polly-stack-Polaroid:nth-last-child(-n+49) {transform: translate(0px, -1000%);}
#polly-game.polly-49 .polly-stack-Polaroid:nth-last-child(-n+50) {transform: translate(0px, -1000%);}

#polly-polaroids {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#polly-game.polly-0 #polaroid-0 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-1 #polaroid-1 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-2 #polaroid-2 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-3 #polaroid-3 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-4 #polaroid-4 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-5 #polaroid-5 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-6 #polaroid-6 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-7 #polaroid-7 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-8 #polaroid-8 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-9 #polaroid-9 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-10 #polaroid-10 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-11 #polaroid-11 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-12 #polaroid-12 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-13 #polaroid-13 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-14 #polaroid-14 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-15 #polaroid-15 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-16 #polaroid-16 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-17 #polaroid-17 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-18 #polaroid-18 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-19 #polaroid-19 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-20 #polaroid-20 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-21 #polaroid-21 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-22 #polaroid-22 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-23 #polaroid-23 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-24 #polaroid-24 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-25 #polaroid-25 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-26 #polaroid-26 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-27 #polaroid-27 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-28 #polaroid-28 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-29 #polaroid-29 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-30 #polaroid-30 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-31 #polaroid-31 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-32 #polaroid-32 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-33 #polaroid-33 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-34 #polaroid-34 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-35 #polaroid-35 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-36 #polaroid-36 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-37 #polaroid-37 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-38 #polaroid-38 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-39 #polaroid-39 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-40 #polaroid-40 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-41 #polaroid-41 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-42 #polaroid-42 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-43 #polaroid-43 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-44 #polaroid-44 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-45 #polaroid-45 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-46 #polaroid-46 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-47 #polaroid-47 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-48 #polaroid-48 { transform: translate(-50%,-50%) scale(1.25);opacity: 1;}
#polly-game.polly-49 #polaroid-49 {transform: translate(-50%,-50%) scale(1.25);opacity: 1;opacity: 1;}

.polly-polaroid {
    width: 350px;
    height: 350px;
    position: absolute;
    top: -100%; 
    top: 38%;
    left: 50%;
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1s;
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
}
#polly-game.polly-answer-wrong {
    /*animation: 1.5s ease backwards polly-answer-wrong 1;*/
}
#polly-game.polly-answer-0 {
    /*animation: 1.5s ease backwards polly-answer-0 1;*/
}
#polly-game.polly-answer-1 {
    /*animation: 1.5s ease backwards polly-answer-1 1;*/
}
#polly-game.polly-answer-2 {
    /*animation: 1.5s ease backwards polly-answer-2 1;*/
}
#polly-game.polly-answer-3 {
    /*animation: 1.5s ease backwards polly-answer-3 1;*/
}
/*@keyframes polly-answer-wrong {
    0%	    {background-color: rgba(255,255,255,0)}
    15%	    {background-color: rgba(117,117,117,0.5);background-color: rgba(232,40,75,1)}
    100%    {background-color: rgba(255,255,255,0)}
}
@keyframes polly-answer-0 {
    0%	    {background-color: rgba(255,255,255,0)}
    25%	    {background-color: rgba(146,189,57,0.5);background-color: rgba(79,190,81,1)}
    100%    {background-color: rgba(255,255,255,0)}
}
@keyframes polly-answer-1 {
    0%	    {background-color: rgba(255,255,255,0)}
    25%	    {background-color: rgba(54,133,180,0.5);background-color: rgba(79,190,81,1)}
    100%    {background-color: rgba(255,255,255,0)}
}
@keyframes polly-answer-2 {
    0%	    {background-color: rgba(255,255,255,0)}
    25%	    {background-color: rgba(243,149,62,0.5);background-color: rgba(79,190,81,1)}
    100%    {background-color: rgba(255,255,255,0)}
}
@keyframes polly-answer-3 {
    0%	    {background-color: rgba(255,255,255,0)}
    25%	    {background-color: rgba(205,52,116,0.5);background-color: rgba(79,190,81,1)}
    100%    {background-color: rgba(255,255,255,0)}
}*/

 #logo-box{
    position: absolute;
    /*height: 48px;*/
    padding: 8px 0;
    top: 16px;
    width: 512px;
    left: -200px;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5018382352941176) 40%, rgba(255,255,255,0) 60%);
}
#logo {
    height: 48px;
    float: right;
}


.polly-poll {
    z-index: -1000;
    cursor: pointer;
    position: absolute;
    height: 50px;
    width: 265px;
    height: 130px;
    transform: translate(-50%, -50%) scale(0.9);
    bottom: 50px;
    /*background: rgba(255,255,255,0.1);*/
    background-image: url(../images/bt_sheet.webp);
    background-size: 1200px;
    background-position-y: -20px;
    padding: 0.5rem 1.5rem;
}
.polly-poll:hover{
    filter: brightness(125%);
}
.polly-poll.star {
    z-index: 1000;
    /*filter: brightness(125%);*/
    opacity: 1 !important;
}
#polly-poll-0 { left: 216px; background-position-x: 0px; }
#polly-poll-1 { left: 479px; background-position-x: -313px; }
#polly-poll-2 { left: 759px; background-position-x: -626px;}
#polly-poll-3 { left: 1013px; background-position-x: -939px; }

#polly-poll-false {
        background-image: url(../images/bt_trash.webp);
    background-size: 128px;
    /* background-position: center center; */
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0px;
    opacity: 0.75;
    left: 1200px;
    bottom: 30px;
    width: 128px;
    height: 159px;
}

#polly-poll-false:hover {
    opacity: 1;
}
#polly-intro {
    perspective: 1000px;
}

.polly-answer-right ~ .polly-poll,
.polly-answer-wrong ~ .polly-poll {    
    cursor: initial;
    opacity: 0.5;
}
.polly-answer-0 ~ #polly-poll-0 { opacity: 1;}
.polly-answer-1 ~ #polly-poll-1 { opacity: 1;}
.polly-answer-2 ~ #polly-poll-2 { opacity: 1;}
.polly-answer-3 ~ #polly-poll-3 { opacity: 1;}
.polly-answer-4 ~ #polly-poll-4 { opacity: 1;}
.polly-answer-5 ~ #polly-poll-5 { opacity: 1;}
.polly-answer-6 ~ #polly-poll-6 { opacity: 1;}
.polly-answer-7 ~ #polly-poll-7 { opacity: 1;}
.polly-answer-8 ~ #polly-poll-8 { opacity: 1;}
.polly-answer-9 ~ #polly-poll-9 { opacity: 1;}

.polly-answer-wrong-0 ~ #polly-poll-0 { opacity: 1;}
.polly-answer-wrong-1 ~ #polly-poll-1 { opacity: 1;}
.polly-answer-wrong-2 ~ #polly-poll-2 { opacity: 1;}
.polly-answer-wrong-3 ~ #polly-poll-3 { opacity: 1;}
.polly-answer-wrong-4 ~ #polly-poll-4 { opacity: 1;}
.polly-answer-wrong-5 ~ #polly-poll-5 { opacity: 1;}
.polly-answer-wrong-6 ~ #polly-poll-6 { opacity: 1;}
.polly-answer-wrong-7 ~ #polly-poll-7 { opacity: 1;}
.polly-answer-wrong-8 ~ #polly-poll-8 { opacity: 1;}
.polly-answer-wrong-9 ~ #polly-poll-9 { opacity: 1;}


/*#polly-intro.polaroid-message-0 #polaroid-message-0 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-1 #polaroid-message-1 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-2 #polaroid-message-2 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-3 #polaroid-message-3 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-4 #polaroid-message-4 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-5 #polaroid-message-5 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-6 #polaroid-message-6 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-7 #polaroid-message-7 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-8 #polaroid-message-8 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-9 #polaroid-message-9 {transform: translate(-50%, -50%) rotateY(0deg);}
#polly-intro.polaroid-message-10 #polaroid-message-10 {transform: translate(-50%, -50%) rotateY(0deg);}*/

.mask{
    position: absolute;
    width: 152%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: -1000;
    transition: all 1s ease;
}

#mask-0 {
    background: rgba(0,0,0,0.75); 
}
#mask-1 {
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
#mask-2 {
    background: linear-gradient(225deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
#mask-3 {
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

#polaroid-message-0.polaroid-message-active ~ #mask-0 {
    opacity: 0.8;
}
#polaroid-message-1.polaroid-message-active ~ #mask-1 {
    opacity: 0.8;
}
#polaroid-message-2.polaroid-message-active ~ #mask-2 {
    opacity: 0.8;
}
#polaroid-message-3.polaroid-message-active ~ #mask-3 {
    opacity: 0.8;
}
#polaroid-message-0.polaroid-message-active ~ #mask-0, #polaroid-message-4.polaroid-message-active ~ #mask-0{
    opacity: 0.8;
}
.polaroid-end #polaroid-message-4.polaroid-message-active ~ #mask-0 {
    opacity: 0; 
}
.polaroid-end #polaroid-message-4.polaroid-message-active ~ #mask-2 {
    opacity: 0.8;
}

.polaroid-message h2 {
    font-family: 'Montserrat', sans-serif;
    
}
p {
    margin: 0.5rem 0;
}
.polaroid-button {
    width: 210px;
    height: 96px;
    color: #231F20;
    background-image: url(../images/bt_01.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center; 
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 1rem 1rem 3rem;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    text-transform: uppercase;
    margin: 1rem auto;
}
.polaroid-button.polaroid-button-small {
    width: 210px;
    height: 96px;
    background-image: url(../images/bt_01.webp);
}
.polaroid-button.polaroid-button-medium {
    width: 315px;
    height: 96px;
    background-image: url(../images/bt_02.webp);
}

.polaroid-button:hover {
    filter: brightness(125%);
}
#polly-start::after {
    content: " ";
    background-image: url(../images/bt_hand.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 96px;
    height: 96px;
    z-index: 10000;
    position: absolute;
    margin-left: 128px;
    margin-top: 52px;
    animation: 0.5s ease backwards pop-in 1 2s; 
}
.polaroid-message {
    font-family: 'Arial', Arial, sans-serif;
    color: #10111a;
    width: 500px;
    height: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 38%;
    left: 50%;
    background-image: url(../images/big_circle.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 3rem 4rem;
    /*transition: all 1s ease;*/
    backface-visibility: hidden;
    transform-style: preserve-3d;
    pointer-events: none;
}
div#polly-intro .polaroid-message {
    opacity: 0;
}
/*.polaroid-message-active ~ .polaroid-message {opacity: 0;}*/

div#polly-intro .polaroid-message-active {opacity: 1;    pointer-events: initial;}

#polaroid-message-0 {
    left: 60%;
    top: 50%;
}

#polaroid-message-1 {
    top: 50%;
    left: 70%;
    width: 600px;
    height: 600px;
}
img.polly-score-table {
    width: 350px;
    margin: 0 auto;
}
#polaroid-message-1.polaroid-message-active ~ .polly-robot {
    left: 22%;
}
.polaroid-message-controls {
    margin: 1em -2em 0 -2em;
    display: flex;
    justify-content: space-between;
}
.polaroid-message-controls span {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2em;
    padding: 0.5em;
    text-align: center;
    width: 150px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%, 100% 100%;
    background-position: center center, center center;
    background-image: url(../images/button-bg-1.svg), url(../images/button-bg-c-1.svg);
}
.polaroid-message-controls span:nth-child(3n+1) {
    background-image: url(../images/button-bg-1.svg), url(../images/button-bg-c-1.svg);
}
.polaroid-message-controls span:nth-child(3n+2) {
    background-image: url(../images/button-bg-2.svg), url(../images/button-bg-c-2.svg);
}
.polaroid-message-controls span:nth-child(3n+3) {
    background-image: url(../images/button-bg-3.svg), url(../images/button-bg-c-3.svg);
}
.polaroid-message-controls span:nth-child(3n+4) {
    background-image: url(../images/button-bg-3.svg), url(../images/button-bg-c-4.svg);
}
.polaroid-message-controls span.locked {
    opacity: 0.5;
}

.polaroid {
    width: 350px;
    height: 350px;
    background: #e9eaf6;
    position: fixed;

    box-shadow: 0em 0.1em 0.5em rgba(0,0,0,0.75), 0em -0.1em 0.1em rgba(0,0,0,0.25) inset;

    transition: all 1s ease;
    background-image: url(../images/polaroid_texture.png);
    background-size: 100px;
}
.polaroid-center {
    top: 38%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(0deg) scale(1.25);
}
.polaroid-wrong {
    /*filter: brightness(150%) blur(8px) ;*/
    opacity: 0 !important;
    transition: 1s all cubic-bezier(0.5, 0, 0.75, 0);
    transform: translate(-50%,-50%) scale(0) !important;
    pointer-events: none;
}
.polaroid-0 {
    top: 88%;
    left: 11%;
}
.polaroid-1 {
    top: 88%;
    left: 31.5%;
}
.polaroid-2 {
    top: 88%;
    left: 53%;
}
.polaroid-3 {
    top: 88%;
    left: 73%;
}
.polaroid-0 .polaroid-text,
.polaroid-0 .polaroid-number,
.polaroid-1 .polaroid-text,
.polaroid-1 .polaroid-number,
.polaroid-2 .polaroid-text,
.polaroid-2 .polaroid-number,
.polaroid-3 .polaroid-text,
.polaroid-3 .polaroid-number {
    opacity: 0;
    transition: all 0.5s ease 0.5s;
}
.polaroid-0 .polaroid-picture,
.polaroid-1 .polaroid-picture,
.polaroid-2 .polaroid-picture,
.polaroid-3 .polaroid-picture {
    transition: all 0.5s ease 0.5s;
    border: 16px solid #ffffff !important;
}
.polaroid-0 {transform: translate(-50%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-0 ~ .polaroid-0 {transform: translate(-29%, -50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-0 ~ .polaroid-0 ~ .polaroid-0 {transform: translate(-8%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-0 ~ .polaroid-0 ~ .polaroid-0 ~ .polaroid-0 {transform: translate(-50%,-35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-0 ~ .polaroid-0 ~ .polaroid-0 ~ .polaroid-0 ~ .polaroid-0 {transform: translate(-29%, -35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}

.polaroid-1 {transform: translate(-50%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-1 ~ .polaroid-1 {transform: translate(-29%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-1 ~ .polaroid-1 ~ .polaroid-1 {transform: translate(-8%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-1 ~ .polaroid-1 ~ .polaroid-1 ~ .polaroid-1 {transform: translate(-50%,-35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-1 ~ .polaroid-1 ~ .polaroid-1 ~ .polaroid-1 ~ .polaroid-1 {transform: translate(-29%, -35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}

.polaroid-2 {transform: translate(-50%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-2 ~ .polaroid-2 {transform: translate(-29%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-2 ~ .polaroid-2 ~ .polaroid-2 {transform: translate(-8%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-2 ~ .polaroid-2 ~ .polaroid-2 ~ .polaroid-2 {transform: translate(-50%,-35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-2 ~ .polaroid-2 ~ .polaroid-2 ~ .polaroid-2 ~ .polaroid-2 {transform: translate(-29%, -35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}


.polaroid-3 {transform: translate(-50%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-3 ~ .polaroid-3 {transform: translate(-39%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-3 ~ .polaroid-3 ~ .polaroid-3 {transform: translate(-8%,-50%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-3 ~ .polaroid-3 ~ .polaroid-3 ~ .polaroid-3 {transform: translate(-50%,-35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}
.polaroid-3 ~ .polaroid-3 ~ .polaroid-3 ~ .polaroid-3 ~ .polaroid-3 {transform: translate(-29%, -35%) scale(0.25) !important;z-index: 100 !important;opacity: 1 !important;}


.polaroid-picture {
    width: 260px;
    height: 180px;
    position: absolute;
    background: black;
    border: 8px solid #ffffff;
    left: 45px;
    top: 35px;
    background-size: cover;
    background-position: center center;
    background-image: url(../images/polaroids/p.png);
}
.polaroid-0-0 .polaroid-picture{background-image: url(../images/polaroids/p-0-0.webp);}
.polaroid-0-1 .polaroid-picture{background-image: url(../images/polaroids/p-0-1.webp);}
.polaroid-0-2 .polaroid-picture{background-image: url(../images/polaroids/p-0-2.webp);}
.polaroid-0-3 .polaroid-picture{background-image: url(../images/polaroids/p-0-3.webp);}
.polaroid-0-4 .polaroid-picture{background-image: url(../images/polaroids/p-0-4.webp);}
.polaroid-0-5 .polaroid-picture{background-image: url(../images/polaroids/p-0-5.webp);}
.polaroid-0-6 .polaroid-picture{background-image: url(../images/polaroids/p-0-6.webp);}
.polaroid-0-7 .polaroid-picture{background-image: url(../images/polaroids/p-0-7.webp);}
.polaroid-0-8 .polaroid-picture{background-image: url(../images/polaroids/p-0-8.webp);}
.polaroid-0-9 .polaroid-picture{background-image: url(../images/polaroids/p-0-9.webp);}
.polaroid-0-10 .polaroid-picture{background-image: url(../images/polaroids/p-0-10.webp);}
.polaroid-0-11 .polaroid-picture{background-image: url(../images/polaroids/p-0-11.webp);}
.polaroid-0-12 .polaroid-picture{background-image: url(../images/polaroids/p-0-12.webp);}
.polaroid-0-13 .polaroid-picture{background-image: url(../images/polaroids/p-0-13.webp);}
.polaroid-0-14 .polaroid-picture{background-image: url(../images/polaroids/p-0-14.webp);}
.polaroid-0-15 .polaroid-picture{background-image: url(../images/polaroids/p-0-15.webp);}
.polaroid-0-16 .polaroid-picture{background-image: url(../images/polaroids/p-0-16.webp);}
.polaroid-0-17 .polaroid-picture{background-image: url(../images/polaroids/p-0-17.webp);}
.polaroid-0-18 .polaroid-picture{background-image: url(../images/polaroids/p-0-18.webp);}
.polaroid-0-19 .polaroid-picture{background-image: url(../images/polaroids/p-0-19.webp);}
.polaroid-0-20 .polaroid-picture{background-image: url(../images/polaroids/p-0-20.webp);}
.polaroid-1-0 .polaroid-picture{background-image: url(../images/polaroids/p-1-0.webp);}
.polaroid-1-1 .polaroid-picture{background-image: url(../images/polaroids/p-1-1.webp);}
.polaroid-1-2 .polaroid-picture{background-image: url(../images/polaroids/p-1-2.webp);}
.polaroid-1-3 .polaroid-picture{background-image: url(../images/polaroids/p-1-3.webp);}
.polaroid-1-4 .polaroid-picture{background-image: url(../images/polaroids/p-1-4.webp);}
.polaroid-1-5 .polaroid-picture{background-image: url(../images/polaroids/p-1-5.webp);}
.polaroid-1-6 .polaroid-picture{background-image: url(../images/polaroids/p-1-6.webp);}
.polaroid-1-7 .polaroid-picture{background-image: url(../images/polaroids/p-1-7.webp);}
.polaroid-1-8 .polaroid-picture{background-image: url(../images/polaroids/p-1-8.webp);}
.polaroid-1-9 .polaroid-picture{background-image: url(../images/polaroids/p-1-9.webp);}
.polaroid-1-10 .polaroid-picture{background-image: url(../images/polaroids/p-1-10.webp);}
.polaroid-1-11 .polaroid-picture{background-image: url(../images/polaroids/p-1-11.webp);}
.polaroid-1-12 .polaroid-picture{background-image: url(../images/polaroids/p-1-12.webp);}
.polaroid-1-13 .polaroid-picture{background-image: url(../images/polaroids/p-1-13.webp);}
.polaroid-1-14 .polaroid-picture{background-image: url(../images/polaroids/p-1-14.webp);}
.polaroid-1-15 .polaroid-picture{background-image: url(../images/polaroids/p-1-15.webp);}
.polaroid-1-16 .polaroid-picture{background-image: url(../images/polaroids/p-1-16.webp);}
.polaroid-1-17 .polaroid-picture{background-image: url(../images/polaroids/p-1-17.webp);}
.polaroid-1-18 .polaroid-picture{background-image: url(../images/polaroids/p-1-18.webp);}
.polaroid-1-19 .polaroid-picture{background-image: url(../images/polaroids/p-1-19.webp);}
.polaroid-1-20 .polaroid-picture{background-image: url(../images/polaroids/p-1-20.webp);}
.polaroid-2-0 .polaroid-picture{background-image: url(../images/polaroids/p-2-0.webp);}
.polaroid-2-1 .polaroid-picture{background-image: url(../images/polaroids/p-2-1.webp);}
.polaroid-2-2 .polaroid-picture{background-image: url(../images/polaroids/p-2-2.webp);}
.polaroid-2-3 .polaroid-picture{background-image: url(../images/polaroids/p-2-3.webp);}
.polaroid-2-4 .polaroid-picture{background-image: url(../images/polaroids/p-2-4.webp);}
.polaroid-2-5 .polaroid-picture{background-image: url(../images/polaroids/p-2-5.webp);}
.polaroid-2-6 .polaroid-picture{background-image: url(../images/polaroids/p-2-6.webp);}
.polaroid-2-7 .polaroid-picture{background-image: url(../images/polaroids/p-2-7.webp);}
.polaroid-2-8 .polaroid-picture{background-image: url(../images/polaroids/p-2-8.webp);}
.polaroid-2-9 .polaroid-picture{background-image: url(../images/polaroids/p-2-9.webp);}
.polaroid-2-10 .polaroid-picture{background-image: url(../images/polaroids/p-2-10.webp);}
.polaroid-2-11 .polaroid-picture{background-image: url(../images/polaroids/p-2-11.webp);}
.polaroid-2-12 .polaroid-picture{background-image: url(../images/polaroids/p-2-12.webp);}
.polaroid-2-13 .polaroid-picture{background-image: url(../images/polaroids/p-2-13.webp);}
.polaroid-2-14 .polaroid-picture{background-image: url(../images/polaroids/p-2-14.webp);}
.polaroid-2-15 .polaroid-picture{background-image: url(../images/polaroids/p-2-15.webp);}
.polaroid-2-16 .polaroid-picture{background-image: url(../images/polaroids/p-2-16.webp);}
.polaroid-2-17 .polaroid-picture{background-image: url(../images/polaroids/p-2-17.webp);}
.polaroid-2-18 .polaroid-picture{background-image: url(../images/polaroids/p-2-18.webp);}
.polaroid-2-19 .polaroid-picture{background-image: url(../images/polaroids/p-2-19.webp);}
.polaroid-2-20 .polaroid-picture{background-image: url(../images/polaroids/p-2-20.webp);}
.polaroid-3-0 .polaroid-picture{background-image: url(../images/polaroids/p-3-0.webp);}
.polaroid-3-1 .polaroid-picture{background-image: url(../images/polaroids/p-3-1.webp);}
.polaroid-3-2 .polaroid-picture{background-image: url(../images/polaroids/p-3-2.webp);}
.polaroid-3-3 .polaroid-picture{background-image: url(../images/polaroids/p-3-3.webp);}
.polaroid-3-4 .polaroid-picture{background-image: url(../images/polaroids/p-3-4.webp);}
.polaroid-3-5 .polaroid-picture{background-image: url(../images/polaroids/p-3-5.webp);}
.polaroid-3-6 .polaroid-picture{background-image: url(../images/polaroids/p-3-6.webp);}
.polaroid-3-7 .polaroid-picture{background-image: url(../images/polaroids/p-3-7.webp);}
.polaroid-3-8 .polaroid-picture{background-image: url(../images/polaroids/p-3-8.webp);}
.polaroid-3-9 .polaroid-picture{background-image: url(../images/polaroids/p-3-9.webp);}
.polaroid-3-10 .polaroid-picture{background-image: url(../images/polaroids/p-3-10.webp);}
.polaroid-3-11 .polaroid-picture{background-image: url(../images/polaroids/p-3-11.webp);}
.polaroid-3-12 .polaroid-picture{background-image: url(../images/polaroids/p-3-12.webp);}
.polaroid-3-13 .polaroid-picture{background-image: url(../images/polaroids/p-3-13.webp);}
.polaroid-3-14 .polaroid-picture{background-image: url(../images/polaroids/p-3-14.webp);}
.polaroid-3-15 .polaroid-picture{background-image: url(../images/polaroids/p-3-15.webp);}
.polaroid-3-16 .polaroid-picture{background-image: url(../images/polaroids/p-3-16.webp);}
.polaroid-3-17 .polaroid-picture{background-image: url(../images/polaroids/p-3-17.webp);}
.polaroid-3-18 .polaroid-picture{background-image: url(../images/polaroids/p-3-18.webp);}
.polaroid-3-19 .polaroid-picture{background-image: url(../images/polaroids/p-3-19.webp);}
.polaroid-3-20 .polaroid-picture{background-image: url(../images/polaroids/p-3-20.webp);}


.polaroid-text {
    color: #231F20;
    position: absolute;
    top: 233px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 200px;
    font-family: 'Montserrat', sans-serif;
    flex-direction: column;
    font-size: 0.65rem;
    line-height: 130%;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(2px);
}
.polaroid-number {
    font-family: 'Montserrat', sans-serif;
    color: #fcfcfc;
    position: absolute;
    top: 220px;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 0.5rem;
}

#polly-game.polly-answer-wrong-0 ~ #polly-poll-0,
#polly-game.polly-answer-wrong-1 ~ #polly-poll-1,
#polly-game.polly-answer-wrong-2 ~ #polly-poll-2,
#polly-game.polly-answer-wrong-3 ~ #polly-poll-3  {
    background-position-y: 173px;
    z-index: 10000;
    pointer-events: none;
}

#polly-game.polly-answer-wrong-false ~ #polly-poll-false {
    background-position-y: -317px;
}

#polly-game.polly-answer-0 ~ #polly-poll-0,
#polly-game.polly-answer-1 ~ #polly-poll-1,
#polly-game.polly-answer-2 ~ #polly-poll-2,
#polly-game.polly-answer-3 ~ #polly-poll-3 {
    background-position-y: 326px;
    z-index: 10000;
    pointer-events: none;
}
#polly-game.polly-answer-false ~ #polly-poll-false {
    background-position-y: -159px;
    z-index: 10000;
    pointer-events: none;
}

#polly-game.polly-answer-wrong.polly-answer-0 ~ #polly-poll-0,
#polly-game.polly-answer-wrong.polly-answer-1 ~ #polly-poll-1,
#polly-game.polly-answer-wrong.polly-answer-2 ~ #polly-poll-2,
#polly-game.polly-answer-wrong.polly-answer-3 ~ #polly-poll-3,
#polly-game.polly-answer-wrong.polly-answer-false ~ #polly-poll-false {
    animation: blink 1s ease infinite;
}
@keyframes blink {
    0%	    {filter: brightness(100%);}
    25%     {filter: brightness(125%);}
    50%	    {filter: brightness(100%);}
    100%    {filter: brightness(100%);}
}

@keyframes polly-answer {
    0%	    {transform: translate(-50%, -45%); opacity: 0; animation-timing-function: ease-in;}
    25%     {opacity: 1;}
    50%	    {transform: translate(-50%, -50%); opacity: 1; animation-timing-function: ease-out;}
    75%     {opacity: 1;}
    100%    {transform: translate(-50%, -55%); opacity: 0;}
}
@keyframes polly-answer {
    0%	    {transform: translate(-50%, -45%); opacity: 0; animation-timing-function: ease-in;}
    5%     {opacity: 1;}
    50%	    {transform: translate(-50%, -50%); opacity: 1; animation-timing-function: ease-out;}
    95%     {opacity: 1;}
    100%    {transform: translate(-50%, -55%); opacity: 0;}
}

#bg-video {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: visible;
    z-index: -200;
}
video.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: 1000;
    width: auto;
    height: 100%;
    height: 120%;
    transform: translate(-50%, -50%);
}

#menu-box {
    display: flex;
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
}

.menu-icon {
    text-align: center;
    padding: 1rem;
    background-color: rgba(0,0,0,0.5);
    margin: 0 0.58rem;
    transition: all 0.25s ease;
    opacity: 0.5;
}
#menu-booklet {
    position: absolute;
    right: 1rem;
    bottom: 3rem;
}
.menu-icon.active {
    cursor: pointer;
    opacity: 0.75;
}
.menu-icon.active.completed {
    background-image: url(../images/fb-right-white.svg);
    background-position: 8.5rem 0.5rem;
    background-size: 2rem;
    background-repeat: no-repeat;
    opacity: 0.75;
}
.menu-icon img {
    height: 3rem;
    width: 9rem;
}
.menu-icon.ageas-1.active {
    background-color: #cd3474;
}
.menu-icon.ageas-2.active {
    background-color: #92bd39;
}
.menu-icon.ageas-3.active {
    background-color: #3685b4;
}
.menu-icon.ageas-4.active {
    background-color: #f3953e;
}
.menu-icon.ageas-1.active:hover {
    background-color: #cd3474;
    opacity: 1;
}
.menu-icon.ageas-2.active:hover {
    background-color: #92bd39;
    opacity: 1;
}
.menu-icon.ageas-3.active:hover {
    background-color: #3685b4;
    opacity: 1;
}
.menu-icon.ageas-4.active:hover {
    background-color: #f3953e;
    opacity: 1;
}

#menu-title {
    font-size: 4rem;
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    position: absolute;
    top: 40%;
    left: 50%;
    width: 75%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    text-transform: uppercase;
}

#menu-logo-academy {
    height: 2.4rem;
    top: 26px;
    left: 184px;
    position: absolute;
    opacity: 0.5;
}

#menu-logo-ageas {
    height: 3.6rem;
    top: 16px;
    left: 16px;
    position: absolute;
    opacity: 0.5;
}

.polly-robot {
    width: 512px;
    pointer-events: none;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    animation: 3s floaty-float both infinite cubic-bezier(0.45, 0, 0.55, 1);
}

#polly-intro .polly-robot {
    left: 12%;
    top: 16%;
}
@keyframes floaty-float {
    0%  {transform: translateY(-10%)}
    50% {transform: translateY(10%)}
    100%{transform: translateY(-10%)}
    
}
#polly-debrief .polly-robot {
    z-index: 11000;
    top: 90px;
    width: 400px;
    left: 80px;
}
.polly-dark-bg {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(2px);
    
}

#gamebg {
    pointer-events: none;
    width: 90%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.polly-dark-bar {
    background: linear-gradient(
90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 90%);
    position: absolute;
    width: 150%;
    height: 50%;
    top: 15%;
    left: -30%;
}

#polaroid-message-debrief {
    z-index: 1000;
    position: absolute;
    top: 40%;
    left: 40%;
    width: 40%;
    transform: translateY(-50%);
}

#polly-debrief-button {
    margin: 1rem 0 0 -1rem;
    
}

.polly-polaroid.polaroid-false {
    transform: translate(-50%,-50%) scale(0) !important;
    top: 75.5%;
    left: 94.5%;
    opacity: 0 !important;
    transition: all 1s cubic-bezier(0.36, 0, 0.66, -0.56) !important;
}

.polly-end {
    background-image: url(../images/score_circle.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    
    
    position: absolute;
    transform-style: preserve-3d;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    flex-direction: column;
    color: #136394;
    top: 70px;
    left: 110px;
    display: none;
}

.polly-end-title {
    font-weight: bold;
    font-size: 1.5rem;
}
.polly-end-points-text {
    text-transform: lowercase;
    font-size: 1.25rem;
}
span.polly-score-end-points {
    font-size: 3.5rem;
}

.audio-controls {
    width: 96px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    /*z-index: 10000;*/
}

body.mobile .polaroid-picture {
    width: 174px;
    height: 120px;
    left: 85px;
}
body.mobile .polaroid-text {
    font-size: 1rem;
    top: 50%;
}
body.mobile .polaroid-number {
    top: 160px;
    font-size: 0.75rem;
}