@media (min-width: 768px){
    #casilleros .locker:nth-child(1){top:5px;left:11px;z-index: 20;}
    #casilleros .locker:nth-child(2){top:5px;left:105px;width:91px;z-index: 19;}
    #casilleros .locker:nth-child(3){top:103px;left:11px;z-index: 18;}
    #casilleros .locker:nth-child(4){top:103px;left:105px;width:91px;z-index: 17;}
    #casilleros .locker:nth-child(5){top:201px;left:11px;z-index: 16;}
    #casilleros .locker:nth-child(6){top:201px;left:105px;width:91px;z-index: 15;}
    #casilleros .locker:nth-child(7){top:301px;left:11px;z-index: 14;}
    #casilleros .locker:nth-child(8){top:301px;left:105px;width:91px;z-index: 13;}
    #casilleros .locker:nth-child(9){top:5px;left:471px;width:92px;z-index: 12;}
    #casilleros .locker:nth-child(10){top:5px;left:568px;z-index: 11;}
    #casilleros .locker:nth-child(11){top:5px;left:662px;z-index: 10;}
    #casilleros .locker:nth-child(12){top:103px;left:471px;width:92px;z-index: 9;}
    #casilleros .locker:nth-child(13){top:103px;left:568px;z-index: 8;}
    #casilleros .locker:nth-child(14){top:103px;left:662px;z-index: 7;}
    #casilleros .locker:nth-child(15){top:201px;left:471px;width:92px;z-index: 6;}
    #casilleros .locker:nth-child(16){top:201px;left:568px;z-index: 5;}
    #casilleros .locker:nth-child(17){top:201px;left:662px;z-index: 4;}
    #casilleros .locker:nth-child(18){top:301px;left:471px;width:92px;z-index: 3;}
    #casilleros .locker:nth-child(19){top:301px;left:568px;z-index: 2;}
    #casilleros .locker:nth-child(20){top:301px;left:662px;z-index: 1;}

    .locked-door-close{
        animation-name: cerrar-puerta;
        animation-duration: 0.3s;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        -webkit-animation-name: cerrar-puerta;
        -webkit-animation-duration: 0.3s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;

        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    .locked-door-open{
        animation-name: abrir-puerta;
        animation-duration: 0.4s;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        -webkit-animation-name: abrir-puerta;
        -webkit-animation-duration: 0.4s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;

        transform: rotateY(110deg);
        -webkit-transform: rotateY(110deg);
        -o-transform: rotateY(110deg);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);
    }
    @keyframes abrir-puerta{
        0%{
            transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
        }
        70%{
            transform: rotateY(117deg);
            -webkit-transform: rotateY(117deg);
            -o-transform: rotateY(117deg);
        }
        100%{
            transform: rotateY(110deg);
            -webkit-transform: rotateY(110deg);
            -o-transform: rotateY(110deg);
        }
    }
    @keyframes cerrar-puerta{
        0%{
            transform: rotateY(110deg);
            -webkit-transform: rotateY(110deg);
            -o-transform: rotateY(110deg);
        }
        70%{
            transform: rotateY(-20deg);
            -webkit-transform: rotateY(-20deg);
            -o-transform: rotateY(-20deg);
        }
        100%{
            transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
        }
    }

    .to-left{
        left: -190px !important;

        transition: left 1s;
        -webkit-transition: left 1s;
    }
    .to-left-2{
        left: 11% !important;

        transition: left 1s;
        -webkit-transition: left 1s;
    }

    #personaje-ropas .ropa:hover{
        opacity: 0.7;
    }
    #personaje-ropas-2 .ropa:hover{
        filter: brightness(150%);
        -webkit-filter: brightness(150%);
        -o-filter: brightness(150%);
    }
}

@media (min-width: 560px) and (max-width: 767px){
    #container{
        width: 100%;
        height: 578px;
    }
    .logo-sura{
        margin-left: 10px;
    }
    .titulo{
        margin-right: 10px;
    }
    .logo-arl{
        margin-left: 10px;
    }
    #oficio-title{
        margin-right: 10px;
    }

    .fondo{
        background-size: cover;
    }

    #personaje-home{
        width: 132px;
        height: 370px;
        top: 25%;
        left: 5%;
    }
    .to-left{
        left: -149px !important;
        transition: left 1s;
        -webkit-transition: left 1s;
    }
    .to-left-2{
        left: 4% !important;
        transition: left 1s;
        -webkit-transition: left 1s;
    }

    #fondo-casilleros{
        width: 550px;
        background-image: url(../images/lockers-background-v2.png);
        top: 1%;
        left: 50%;
        left: calc(50% - (550px / 2));
        left: -moz-calc(50% - (550px / 2));
    }
    #casilleros{
        width: 550px;
        top: 1%;
        left: 50%;
        left: calc(50% - (550px / 2));
        left: -moz-calc(50% - (550px / 2));
    }
    .locker{
        width: 74px;
        height: 96px;
    }
    .locker-door{
        background-image: url(../images/locker-door.png);
        background-size: 100% 100%;
    }
    #casilleros .locker:nth-child(1){top:5px;left:4px;z-index: 20;}
    #casilleros .locker:nth-child(2){top:5px;left:82px;z-index: 19;width: 78px;}
    #casilleros .locker:nth-child(3){top:103px;left:4px;z-index: 18;}
    #casilleros .locker:nth-child(4){top:103px;left:82px;z-index: 17;width: 78px;}
    #casilleros .locker:nth-child(5){top:201px;left:4px;z-index: 16;}
    #casilleros .locker:nth-child(6){top:201px;left:82px;z-index: 15;width: 78px;}
    #casilleros .locker:nth-child(7){top:301px;left:4px;z-index: 14;}
    #casilleros .locker:nth-child(8){top:301px;left:82px;z-index: 13;width: 78px;}
    #casilleros .locker:nth-child(9){top:5px;left:310px;z-index: 12;width: 78px;}
    #casilleros .locker:nth-child(10){top:5px;left:392px;z-index: 11;}
    #casilleros .locker:nth-child(11){top:5px;left:469px;z-index: 10;}
    #casilleros .locker:nth-child(12){top:103px;left:310px;z-index: 9;width: 78px;}
    #casilleros .locker:nth-child(13){top:103px;left:392px;z-index: 8;}
    #casilleros .locker:nth-child(14){top:103px;left:469px;z-index: 7;}
    #casilleros .locker:nth-child(15){top:201px;left:310px;z-index: 6;width: 78px;}
    #casilleros .locker:nth-child(16){top:201px;left:392px;z-index: 5;}
    #casilleros .locker:nth-child(17){top:201px;left:469px;z-index: 4;}
    #casilleros .locker:nth-child(18){top:301px;left:310px;z-index: 3;width: 78px;}
    #casilleros .locker:nth-child(19){top:301px;left:392px;z-index: 2;}
    #casilleros .locker:nth-child(20){top:301px;left:469px;z-index: 1;}

    .locked-door-close{
        animation-name: cerrar-puerta;
        animation-duration: 0.3s;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        -webkit-animation-name: cerrar-puerta;
        -webkit-animation-duration: 0.3s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;

        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    .locked-door-open{
        animation-name: abrir-puerta;
        animation-duration: 0.4s;
        animation-iteration-count: 1;
        animation-timing-function: linear;
        -webkit-animation-name: abrir-puerta;
        -webkit-animation-duration: 0.4s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;

        transform: rotateY(97deg);
        -webkit-transform: rotateY(97deg);
        -o-transform: rotateY(97deg);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);
    }
    @keyframes abrir-puerta{
        0%{
            transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
        }
        70%{
            transform: rotateY(104deg);
            -webkit-transform: rotateY(104deg);
            -o-transform: rotateY(104deg);
        }
        100%{
            transform: rotateY(97deg);
            -webkit-transform: rotateY(97deg);
            -o-transform: rotateY(97deg);
        }
    }
    @keyframes cerrar-puerta{
        0%{
            transform: rotateY(97deg);
            -webkit-transform: rotateY(97deg);
            -o-transform: rotateY(97deg);
        }
        70%{
            transform: rotateY(-10deg);
            -webkit-transform: rotateY(-10deg);
            -o-transform: rotateY(-10deg);
        }
        100%{
            transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
        }
    }

    .elemento-label{
        width: 100%;
        left: 0%;
        padding: 3px;

        font-size: 12px;
    }

    #personaje{
        width: 132px;
        height: 370px;
        
        top: 16%;
        left: 45%;
        left: calc(45% - 66px);
        left: -moz-calc(45% - 66px);
    }
    #personaje-2{
        width: 132px;
        height: 370px;
        
        top: 26.5%;
        left: 4%;
    }

    #menu{
        width: 100%;
        height: 50px;
    }

    #personaje-ropas .ropa:hover{
        opacity: 0.7;
    }
    #personaje-ropas-2 .ropa:hover{
        filter: brightness(150%);
        -webkit-filter: brightness(150%);
        -o-filter: brightness(150%);
    }

    /************MODAL**************/
    #modal-box{
        width: 350px;
        padding: 10px;
    }
    .modal-box-final{
        left: 11%;
    }
    #modal-title{
        font-size: 18px;
    }
    .elemento-incorrecto{
        width: 90%;
    }
    .elemento-incorrecto-img{
        margin-right: 10px;
    }
}

@media (min-width: 280px) and (max-width: 559px){
    #container{
        width: 100%;
        height: 578px;
    }
    .logo-sura{
        margin-left: 10px;
    }
    .titulo{
        margin-right: 10px;
        width: 200px;
        width: calc(100% - (73px + 30px));
        width: -moz-calc(100% - (73px + 30px));
    }
    .logo-arl{
        margin-left: 10px;
    }
    #oficio-title{
        margin-right: 10px;
    }

    .fondo{
        background-size: cover;
        background-image: url(../images/fondo-v3.jpg);
    }

    #game-wrapper{
        position: relative;
        width: 100%;
        height: 440px;
        overflow-y: hidden;
        overflow-x: auto;
    }

    #cursor-swipe{
        position: absolute;
        width: 70px;
        height: 70px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url(../images/cursor-hand-icon.svg);
        top: 50%;
        transform: translateX(-35px) translateY(-35px);
        -webkit-transform: translateX(-35px) translateY(-35px);
        -o-transform: translateX(-35px) translateY(-35px);
        z-index: 30;
        
    }
    .cursor-swipe-animation-1,
    .cursor-swipe-animation-2,
    .cursor-swipe-animation-3
    {
        animation-iteration-count: 2;
        animation-duration: 3s;
        animation-timing-function: linear;

        -webkit-animation-iteration-count: 2;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
    }

    .cursor-swipe-animation-1{
        left: 80%;
        animation-name: animation-cursor-swipe-1;
        -webkit-animation-name: animation-cursor-swipe-1;
    }
    .cursor-swipe-animation-2{
        animation-name: animation-cursor-swipe-2;
        -webkit-animation-name: animation-cursor-swipe-2;
    }
    .cursor-swipe-animation-3{
        animation-name: animation-cursor-swipe-3;
        -webkit-animation-name: animation-cursor-swipe-3;
    }

    @keyframes animation-cursor-swipe-1{
        0% {
            left: 80%;
            transform: translateX(-35px) translateY(-35px) scale(1.5);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1.5);
            -o-transform: translateX(-35px) translateY(-35px) scale(1.5);
            opacity: 0;
        }
        5% {
            left: 80%;
            transform: translateX(-35px) translateY(-35px) scale(1);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1);
            -o-transform: translateX(-35px) translateY(-35px) scale(1);
            opacity: 1;
        }
        10% {
            left: 80%;
            transform: translateX(-35px) translateY(-35px) scale(1);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1);
            -o-transform: translateX(-35px) translateY(-35px) scale(1);
        }
        40% {
            left: 20%;
            transform: translateX(-35px) translateY(-35px) scale(1);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1);
            -o-transform: translateX(-35px) translateY(-35px) scale(1);
        }
        45% {
            left: 20%;
            transform: translateX(-35px) translateY(-35px) scale(1.5);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1.5);
            -o-transform: translateX(-35px) translateY(-35px) scale(1.5);
        }
        50% {
            left: 20%;
            transform: translateX(-35px) translateY(-35px) scale(1.5);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1.5);
            -o-transform: translateX(-35px) translateY(-35px) scale(1.5);
        }
        55% {
            left: 20%;
            transform: translateX(-35px) translateY(-35px) scale(1);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1);
            -o-transform: translateX(-35px) translateY(-35px) scale(1);
        }
        60% {
            left: 20%;
            transform: translateX(-35px) translateY(-35px) scale(1);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1);
            -o-transform: translateX(-35px) translateY(-35px) scale(1);
        }
        90% {
            left: 80%;
            transform: translateX(-35px) translateY(-35px) scale(1);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1);
            -o-transform: translateX(-35px) translateY(-35px) scale(1);
        }
        95% {
            left: 80%;
            transform: translateX(-35px) translateY(-35px) scale(1);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1);
            -o-transform: translateX(-35px) translateY(-35px) scale(1);
            opacity: 1;
        }
        100% {
            left: 80%;
            transform: translateX(-35px) translateY(-35px) scale(1.5);
            -webkit-transform: translateX(-35px) translateY(-35px) scale(1.5);
            -o-transform: translateX(-35px) translateY(-35px) scale(1.5);
            opacity: 0;
        }
    }
    @keyframes animation-cursor-swipe-2{
        0% {
            left: 20px;
        }
        5% {
            left: 20px;
        }
        10% {
            left: 20px;
        }
        40% {
            left: -150px;
        }
        45% {
            left: -150px;
        }
        50% {
            left: -150px;
        }
        55% {
            left: -150px;
        }
        60% {
            left: -150px;
        }
        90% {
            left: 20px;
        }
        95% {
            left: 20px;
        }
        100% {
            left: 20px;
        }
    }
    @keyframes animation-cursor-swipe-3{
        0% {
            left: 190px;
        }
        5% {
            left: 190px;
        }
        10% {
            left: 190px;
        }
        40% {
            left: 20px;
        }
        45% {
            left: 20px;
        }
        50% {
            left: 20px;
        }
        55% {
            left: 20px;
        }
        60% {
            left: 20px;
        }
        90% {
            left: 190px;
        }
        95% {
            left: 190px;
        }
        100% {
            left: 190px;
        }
    }

    #personaje-home{
        display: none;
    }

    #fondo-casilleros{
        width: 550px;
        height: 410px;
        background-image: url(../images/lockers-background-v3.png);
        top: 1%;
        left: 20px;
    }
    /******pedacito para el final*****/
    #fondo-casilleros::after{
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        left: 100%;
        top: 0px;
    }
    #casilleros{
        width: 550px;
        height: 410px;
        top: 1%;
        left: 20px;
    }
    .locker{
        width: 74px;
        height: 96px;
    }
    .locker-door{
        cursor: default !important;
        background-image: url(../images/locker-door.png);
        background-size: 100% 100%;
        transition: transform 0.2s, -webkit-transform 0.2s, -o-transform 0.2s;
        -webkit-transition: transform 0.2s, -webkit-transform 0.2s, -o-transform 0.2s;
    }
    .locked-door-close{
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    .locked-door-open{
        transform: rotateY(110deg);
        -webkit-transform: rotateY(110deg);
        -o-transform: rotateY(110deg);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);
    }
    .locked-door-open::after{
        content: "";
        position: absolute;
        width: 10px;
        height: 30px;
        top: 50%;
        top: calc(50% - 15px);
        top: -moz-calc(50% - 15px);
        left: 3px;
        background-color: #dee7ea;
    }

    #casilleros .locker:nth-child(1){top:5px;left:4px;z-index: 20;}
    #casilleros .locker:nth-child(2){top:5px;left:82px;z-index: 19;width: 78px;}
    #casilleros .locker:nth-child(3){top:103px;left:4px;z-index: 18;}
    #casilleros .locker:nth-child(4){top:103px;left:82px;z-index: 17;width: 78px;}
    #casilleros .locker:nth-child(5){top:201px;left:4px;z-index: 16;}
    #casilleros .locker:nth-child(6){top:201px;left:82px;z-index: 15;width: 78px;}
    #casilleros .locker:nth-child(7){top:301px;left:4px;z-index: 14;}
    #casilleros .locker:nth-child(8){top:301px;left:82px;z-index: 13;width: 78px;}
    #casilleros .locker:nth-child(9){top:5px;left:310px;z-index: 12;width: 78px;}
    #casilleros .locker:nth-child(10){top:5px;left:392px;z-index: 11;}
    #casilleros .locker:nth-child(11){top:5px;left:469px;z-index: 10;}
    #casilleros .locker:nth-child(12){top:103px;left:310px;z-index: 9;width: 78px;}
    #casilleros .locker:nth-child(13){top:103px;left:392px;z-index: 8;}
    #casilleros .locker:nth-child(14){top:103px;left:469px;z-index: 7;}
    #casilleros .locker:nth-child(15){top:201px;left:310px;z-index: 6;width: 78px;}
    #casilleros .locker:nth-child(16){top:201px;left:392px;z-index: 5;}
    #casilleros .locker:nth-child(17){top:201px;left:469px;z-index: 4;}
    #casilleros .locker:nth-child(18){top:301px;left:310px;z-index: 3;width: 78px;}
    #casilleros .locker:nth-child(19){top:301px;left:392px;z-index: 2;}
    #casilleros .locker:nth-child(20){top:301px;left:469px;z-index: 1;}

    .locked-door-close{
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }
    .locked-door-open{
        transform: rotateY(97deg);
        -webkit-transform: rotateY(97deg);
        -o-transform: rotateY(97deg);
        box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.3);
    }

    .elemento-label{
        width: 100%;
        left: 0%;
        padding: 3px;

        font-size: 12px;
    }
    .elemento div{
        cursor: default;
    }
    .area{
        cursor: default;
    }
    .ropa{
        cursor: default;
    }

    #personaje{
        width: 132px;
        height: 370px;
        
        top: 50px;
        left: 190px;
    }

    #personaje-2{
        display: none;
    }

    #menu{
        width: 100%;
        height: 50px;
    }
    #comprobar-btn{
        display: none;
    }
    #comprobar2-btn{
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background-color: #00AEC7;
        background-image: url(../images/check-icon.svg);

        padding: 0px;
        margin: 2.5px 0px;
        margin-left: 15px;

        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
        cursor: default;
    }
    #music-btn,
    #ayuda-btn{
        width: 30px;
        height: 30px;
        background-size: 20px 20px;
        margin: 2.5px 0px;
        margin-left: 15px;
        cursor: default;
    }
    #reloj{
        border: #00AEC7 solid 2px;
    }
    #reloj::after{
        display: none;
    }
    #tiempo-txt{
        font-size: 30px;
    }

    /************MODAL**************/
    #modal-box{
        width: 95%;
        padding: 10px;
    }
    .modal-box-final{
        left: initial;
    }
    #modal-title{
        font-size: 18px;
    }
    .elemento-incorrecto{
        width: 100%;
        justify-content: center;
    }
    .elemento-incorrecto-img{
        margin-right: 10px;
    }
    #modal-button{
        cursor: default;
    }
    #modal-close-btn{
        cursor: default;
    }
    .modal-instrucciones-gif > div{
        cursor: default;
    }
    .modal-instrucciones-gif > div video{
        cursor: default;
    }
    .modal-instrucciones-gif > div button{
        cursor: default;
    }

    /********TOOLTIP*********/
    #tooltip{
        width: 90%;
        top: 15%;
    }
    .tooltip-off{
        right: -100%;
    }
    .tooltip-on{
        right: 5%;
    }
}