body, html {overflow-x:hidden;}

#quiz_bg {position:relative; width:100vw; height:100%; position:fixed; top:0; left:0; z-index:1;}

#quiz_bg img {display:block; position:absolute; top:0; left:-10px; width:100vw; height:100%; /*animation-name:bganimpc; animation-duration:20s; animation-iteration-count:infinite; animation-direction:alternate;*/ opacity:0;}
#quiz_bg img.show {opacity:1;}

@keyframes bganimpc{
    from{
        left:-30px
    }
    to{
        left:0px;
    }
}


#quiz {width:100%; max-width:400px; margin:15vh auto 0px auto; position:relative; z-index:3; padding-bottom:80px;}

#q2, #q3, #q4, #q5, #q6 {display: none;}

.quiz_con {display:flex; justify-content:center; align-items:center; flex-wrap:wrap;}

.question {width:80%; background:white; padding:10px 15px; border-radius:15px; margin-top:50px; position:relative; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;}
.question .arrow {display:block; width:70px; height:70px; clip-path: polygon(64.25% 49%, 59.25% 75%, 28.02% 75%); background-color: #ffffff; position:absolute; top:-50px; right:20px;}
.question .number {width:35px; height:35px; line-height:35px; border-radius:50px; text-align:center; background:#FEF02F; flex-grow:0; flex-shrink:0; margin-right:10px;}
.question p {font-size:16px; line-height:24px;}

.quiz_con img.main {width:80%; position:relative; z-index:3; animation-name:main; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate;}
.quiz_con img.shine {width:150%; position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); animation-name:shine; animation-duration:1.2s; animation-iteration-count:infinite; animation-direction:alternate;}

@keyframes main{
    from{
        filter: drop-shadow(0 1px 2px rgb(255, 255, 255, 0)) drop-shadow(0 -1px 1px rgb(255, 255, 255, 0));
    }
    to{
        filter: drop-shadow(0 1px 3px rgb(255, 255, 255, 1)) drop-shadow(0 -1px 1px rgb(255, 255, 255, 1));
    }
}

@keyframes shine{
    from{
        opacity: 0.5;
        filter: drop-shadow(0 1px 2px rgb(255, 255, 255, 0)) drop-shadow(0 -1px 1px rgb(255, 255, 255, 0));
    }
    to{
        opacity: 1;
        filter: drop-shadow(0 1px 3px rgb(255, 255, 255, 1)) drop-shadow(0 -1px 1px rgb(255, 255, 255, 1));
    }
}

button.answer {width:80%; padding:6px 12px; background:#3559df; text-align:left; border:1px dashed white; border-radius:50px; font-size:15px; color:white; margin:5px auto; position:relative; z-index:3;}
button.answer:focus{background-color:#4769e6;}

:root {
    --fridgewdh:-100%;
}

#animation {display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; opacity:0;}
#animation img {display:block; width:100%; height:auto; margin:auto;}
#animation .fridge {display:block; width:80%; max-width:400px; height:auto; opacity:0; position:absolute; left:50%; bottom:40px; transform:translateX(-50%); background:url(../images/quiz/fridge_ani.png); background-size:auto 100%; background-position:top left 0;
    animation-name: fridge_ani;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-timing-function:step-start;}

@keyframes fridge_ani{
    0.00% {background-position:top left var(--fridgewdh);}
    3.45% {background-position:top left calc(2 * var(--fridgewdh));}
    6.90% {background-position:top left calc(3 * var(--fridgewdh));}
    10.34% {background-position:top left calc(3 * var(--fridgewdh));}
    13.79% {background-position:top left calc(4 * var(--fridgewdh));}
    17.24% {background-position:top left calc(5 * var(--fridgewdh));}
    20.69% {background-position:top left calc(6 * var(--fridgewdh));}
    24.14% {background-position:top left calc(7 * var(--fridgewdh));}
    27.59% {background-position:top left calc(8 * var(--fridgewdh));}
    31.03% {background-position:top left calc(9 * var(--fridgewdh));}
    34.48% {background-position:top left calc(10 * var(--fridgewdh));}
    37.93% {background-position:top left calc(11 * var(--fridgewdh));}
    41.38% {background-position:top left calc(12 * var(--fridgewdh));}
    44.83% {background-position:top left calc(13 * var(--fridgewdh));}
    48.28% {background-position:top left calc(14 * var(--fridgewdh));}
    51.72% {background-position:top left calc(15 * var(--fridgewdh));}
    55.17% {background-position:top left calc(16 * var(--fridgewdh));}
    58.62% {background-position:top left calc(17 * var(--fridgewdh));}
    62.07% {background-position:top left calc(18 * var(--fridgewdh));}
    65.52% {background-position:top left calc(19 * var(--fridgewdh));}
    68.97% {background-position:top left calc(20 * var(--fridgewdh));}
    72.41% {background-position:top left calc(21 * var(--fridgewdh));}
    75.86% {background-position:top left calc(22 * var(--fridgewdh));}
    79.31% {background-position:top left calc(23 * var(--fridgewdh));}
    82.76% {background-position:top left calc(24 * var(--fridgewdh));}
    86.21% {background-position:top left calc(25 * var(--fridgewdh));}
    89.66% {background-position:top left calc(26 * var(--fridgewdh));}
    93.10% {background-position:top left calc(27 * var(--fridgewdh));}
    96.55% {background-position:top left calc(28 * var(--fridgewdh));}
    100.00% {background-position:top left calc(30 * var(--fridgewdh));}
  }



@media screen and (max-width: 768px) {

    #quiz_bg img {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100%; width:auto; /*animation-name:bganim; animation-duration:20s; animation-iteration-count:infinite; animation-direction:alternate;*/}

    @keyframes bganim{
        from{
            left:-30vw;
        }
        to{
            left:-60vw;
        }
    }

    #quiz {margin:auto;}
    
}