*:not(html) {
    -webkit-transform: 	translate3d(0, 0, 0);
}

.screen .bt{

    width: 100px;
}

.screen[data-screen='0'] .back{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}


.screen[data-screen='0'] .half{
    position: relative;
    width: 50%;
    float: right;
    text-align: center;
    padding:  100px 0px 20px 0px;
}

.screen[data-screen='0'] .buttons{
    position: relative;
    margin-top: 50px;
}


.screen[data-screen='0'] .buttons .button{
    position: relative;
    cursor: pointer;
}


.screen[data-screen='0'] .metronomo{
    position: absolute;
    left: 14%;
    bottom: 2%;
    width: 20%;
    max-width: 300px;
    min-width: 140px;
}


.screen[data-screen='0'] .metronomo .metronomo-base{
    display: block;
    width: 100%;
    height: auto;
}

.screen[data-screen='0'] .metronomo .metronomo-pendulo{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 34%;
    height: 50%;
    animation-name: metronomo-pendulum;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 50% 100%;
    animation-timing-function: ease-in-out;
    transform: translateX(-50%);
}

@keyframes metronomo-pendulum {
  0% {
    transform: translateX(-50%) rotate(-25deg);
  }
  100% {
    transform: translateX(-50%) rotate(25deg);
  }
}



.screen[data-screen='0'] .button{
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.screen[data-screen='0'] .button img{
    position: relative;
    display: block;
    width: 100%;
}

.screen[data-screen='0'] .button div{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

}

.screen[data-screen='0'] .button p{
    position: relative;
    color: #ffffff;
}


.screen[data-screen='0'] .button[data-cmd='quees']{
    width: 180px;
    margin-right: 100px;
    filter: drop-shadow(5px 5px 1px #5d514c40);
}

.screen[data-screen='0'] .button[data-cmd='responde']{
    width: 180px;
    transform: translateY(40px);
    filter: drop-shadow(5px 5px 1px #5d514c40);
}

.screen[data-screen='0'] .button[data-cmd='responde'] p{
    padding: 0px 20px;
}

.screen[data-screen='0'] .button[data-cmd='ejemplos']{
    width: 300px;
    margin-top: 70px;
    margin-right: 50px;
    filter: drop-shadow(5px 5px 1px #5d514c40);
}

.screen[data-screen='1'] .back{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}


.screen[data-screen='1'] .txt1{
    text-align: center;
    padding: 100px 15% 50px 15%;
}


.screen[data-screen='2'] .back{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.screen[data-screen='2'] .scr2block{
    text-align: center;
}

.screen[data-screen='2'] .txt2{
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding: 0px 0px 50px 0px;
}




.screen[data-screen='2'] .pelota{
    position: absolute;
    left: 20%;
    top: auto;
    bottom: auto;
    height: 20%;
    width: 100px;
    height: auto;
    display: block;
}


.screen[data-screen='3']{
    background: #f7f5ee;
    text-align: center;
    padding-bottom: 120px;
}

.screen[data-screen='3'] h1{
    margin: 80px 0px 0px 0px;
    line-height: 40px;
}

.screen[data-screen='3'] .test-duo{
    width: 100%;
    max-width: 500px;
    margin: 0px auto;
}

.screen[data-screen='3'] .buttons{
    display: inline-block;
    vertical-align: middle;
}


.screen[data-screen='3'] .equh{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 70%;
    height: auto;
    padding: 10px 0px;
    margin-left: 40px;
}

.screen[data-screen='3'] .equh .in{
    position: relative;
    width: 100%;
    height: 24px;
    margin: 0px auto;
    background: #ced3d8;
}

.screen[data-screen='3'] .equh .in .val{
    position: absolute;
    width: 20%;
    height: 100%;
    left: 0px;
    background: #f5bf92;
}

.screen[data-screen='3'] .equh .handle{
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    background: #ffffff;
    border-radius: 50%;
    left: 10%;
    filter: drop-shadow(0px 0px 5px #22222240);
    cursor: pointer;
}

.screen[data-screen='3'] .equh .up{
    position: absolute;
    left: 0px;
    width: 100%;
    text-align: center;
    top: -50px;
    height: 50px;
    color: #f5bf92;
    font-size: 30px;
    line-height: 30px;
}

.screen[data-screen='3'] .equh .dw{
    position: absolute;
    left: 0px;
    width: 100%;
    text-align: center;
    top: 70px;
    height: 50px;
    color: #f5bf92;
    font-size: 20px;
    line-height: 20px;
}

.screen[data-screen='3'] .equh .dw .tempo{
    display: none;
}


.screen[data-screen='3'] button{
    transition: all 0s linear 0s;
}


.screen[data-screen='3'] button:hover{
    color: #ffffff;
}


.screen[data-screen] .test-question{
    margin: 40px 0px 100px 0px;
}


.screen[data-screen] .test-question .num{
    position: relative;
    font-size: 60px;
    color: #fac495;
    line-height: 80px;
    display: inline-block;
    vertical-align: top;
    font-weight: 100;
}


.screen[data-screen] .test-question > p{
    margin: 10px 0px 30px 0px;
    padding: 0px 20px;
}


.screen[data-screen] .bt.hand{
    margin-left: 40px;
}

.screen[data-screen] .button-selected{
    color: #ffffff;
}

.screen[data-screen] .num span{
    position: absolute;
    left: 120%;
    top: -10px;
}

.screen[data-screen='3'] .moltbe{
    font-size: 40px;
    line-height: 50px;
}


@media screen and (min-width: 0px) {

    .screen[data-screen='0'] .back{  left: -10%; width: 240%;  height: 100%;  }

    .screen[data-screen='0'] .half{ width: 100%; float: right;  padding:  20px 0px 300px 0px; }

    .screen[data-screen='0'] .buttons{ margin-top: 10px; }
    .screen[data-screen='0'] .button[data-cmd='quees']{ width: 120px; margin-right: 30px; }
    .screen[data-screen='0'] .button[data-cmd='responde']{ width: 120px; transform: translateY(40px); }
    .screen[data-screen='0'] .button[data-cmd='ejemplos']{ width: 160px; margin-top: 70px; margin-right: 50px; }

    .screen[data-screen='1'] .back{ left: -35%; width: 160%; height: 100%; }
    .screen[data-screen='1'] .txt1{ padding: 100px 15% 50px 15%; }

    .screen[data-screen='2'] .back{ left: -50%; width: 200%; height: 100%; }

    .screen[data-screen='2'] .txt2{ max-width: 240px; }

    .screen[data-screen='3'] .buttons{ display: inline-block; vertical-align: middle; width: 70%;  }
    .screen[data-screen='3'] .equh{ display: inline-block; vertical-align: middle; width: 70%; margin-left: 0px; margin-top: 70px; }

}

@media screen and (min-width: 480px) {

    .screen[data-screen='0'] .back{ left: 0px;  width: 220%;  height: 100%;  }

    .screen[data-screen='0'] .half{ width: 100%; float: right;  padding:  20px 0px 300px 0px; }

    .screen[data-screen='0'] .buttons{ margin-top: 30px; }
    .screen[data-screen='0'] .button[data-cmd='quees']{ width: 140px; margin-right: 40px; }
    .screen[data-screen='0'] .button[data-cmd='responde']{ width: 140px; transform: translateY(40px); }
    .screen[data-screen='0'] .button[data-cmd='ejemplos']{ width: 200px; margin-top: 70px; margin-right: 50px; }

    .screen[data-screen='1'] .back{ left: -35%; width: 160%; height: 100%; }
    .screen[data-screen='1'] .txt1{ padding: 100px 15% 50px 15%; }

    .screen[data-screen='2'] .back{ left: -50%; width: 200%; height: 100%; }

    .screen[data-screen='2'] .txt2{ max-width: 380px; }
}

@media screen and (min-width: 640px) {

    .screen[data-screen='0'] .back{  width: 180%;  height: 100%;  }

    .screen[data-screen='0'] .half{ width: 80%; float: right;  padding:  20px 0px 40px 0px; }

    .screen[data-screen='0'] .buttons{ margin-top: 40px; }
    .screen[data-screen='0'] .button[data-cmd='quees']{ width: 150px; margin-right: 60px; }
    .screen[data-screen='0'] .button[data-cmd='responde']{ width: 150px; transform: translateY(40px); }
    .screen[data-screen='0'] .button[data-cmd='ejemplos']{ width: 240px; margin-top: 70px; margin-right: 50px; margin-top: 0px; }

    .screen[data-screen='1'] .back{ left: -25%; width: 140%; height: 100%; }
    .screen[data-screen='1'] .txt1{ padding: 100px 15% 50px 15%; }

    .screen[data-screen='2'] .back{ left: -30%; width: 160%; height: 100%; }

    .screen[data-screen='2'] .txt2{ max-width: 400px; }


    .screen[data-screen='3'] .buttons{ display: inline-block; vertical-align: middle; width: auto; }
    .screen[data-screen='3'] .equh{ display: inline-block; vertical-align: middle; width: 70%; margin-left: 40px; }
}

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

    .screen[data-screen='0'] .back{  width: 140%;  height: 100%;  }

    .screen[data-screen='0'] .half{ width: 65%; float: right;  padding:  50px 0px 40px 0px; }

    .screen[data-screen='0'] .buttons{ margin-top: 40px; }
    .screen[data-screen='0'] .button[data-cmd='quees']{ width: 160px; margin-right: 80px; }
    .screen[data-screen='0'] .button[data-cmd='responde']{ width: 160px; transform: translateY(40px); }
    .screen[data-screen='0'] .button[data-cmd='ejemplos']{ width: 270px; margin-top: 70px; margin-right: 50px; }

    .screen[data-screen='1'] .back{ width: 100%; height: 100%; }

    .screen[data-screen='1'] .back{ left: -15%; width: 120%; height: 100%; }
    .screen[data-screen='1'] .txt1{ padding: 100px 25% 50px 25%; }

    .screen[data-screen='2'] .back{ left: -15%; width: 130%; height: 100%; }

    .screen[data-screen='2'] .txt2{ max-width: 450px; }
}

@media screen and (min-width: 1024px) {


    .screen[data-screen='0'] .back{  width: 100%;  height: 100%;  }


    .screen[data-screen='0'] .half{ width: 50%; float: right;  padding:  100px 0px 20px 0px; }

    .screen[data-screen='0'] .buttons{ margin-top: 50px; }
    .screen[data-screen='0'] .button[data-cmd='quees']{ width: 180px; margin-right: 100px; }
    .screen[data-screen='0'] .button[data-cmd='responde']{ width: 180px; transform: translateY(40px); }
    .screen[data-screen='0'] .button[data-cmd='ejemplos']{ width: 300px; margin-top: 70px; margin-right: 50px; }



    .screen[data-screen='1'] .back{ left: 0px; width: 100%; height: 100%; }
    .screen[data-screen='1'] .txt1{ padding: 100px 25% 50px 25%; }


    .screen[data-screen='2'] .back{ left: 0px; width: 100%; height: 100%; }

    .screen[data-screen='2'] .txt2{ max-width: 450px; }
}

@media screen and (min-width: 1200px) {

    .screen[data-screen='1'] .txt1{ padding: 100px 20% 50px 20%; }

    .screen[data-screen='2'] .txt2{ max-width: 500px; }
}

@media screen and (min-width: 1400px) {

    .screen[data-screen='1'] .txt1{ padding: 100px 20% 50px 20%; }

    .screen[data-screen='2'] .txt2{ max-width: 500px; }
}

@media screen and (min-width: 1600px) {

    .screen[data-screen='1'] .txt1{ padding: 100px 15% 50px 15%; }

    .screen[data-screen='2'] .txt2{ max-width: 500px; }
}

@media screen and (min-width: 1800px) {


    .screen[data-screen='1'] .txt1{ padding: 100px 15% 50px 15%; }

    .screen[data-screen='2'] .txt2{ max-width: 500px; }

}