@media (min-width: 768px){
	.nubes{
		animation-name: animacion-nubes;
	    animation-duration: 20s;
	    animation-iteration-count: infinite;
	    animation-timing-function: linear;
	    -webkit-animation-name: animacion-nubes;
	    -webkit-animation-duration: 20s;
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
	}

    .personaje_temblando_animation{
        transform-origin: 80% 100%;
        -webkit-transform-origin: 80% 100%;
        -o-transform-origin: center 80% 100%;
        animation-name: animacion-personaje-temblando;
        animation-iteration-count: 4;
        animation-timing-function: linear;
        animation-duration: 0.5s;
        -webkit-animation-name: animacion-personaje-temblando;
        -webkit-animation-iteration-count: 4;
        -webkit-animation-timing-function: linear;
        -webkit- animation-duration: 0.5s;
    }

	#modal-button:hover,#repetir-btn:hover{
	    cursor: pointer;
	    transform: scale(1.1);
	    -webkit-transform: scale(1.1);
	    -o-transform: scale(1.1);
	    background-color: #0097A3;
	}
}

@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;
    }

    .nubes{
		animation-name: animacion-nubes;
	    animation-duration: 20s;
	    animation-iteration-count: infinite;
	    animation-timing-function: linear;
	    -webkit-animation-name: animacion-nubes;
	    -webkit-animation-duration: 20s;
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
	}

    /************MAIN**************/
    #estructura{
        right: 0px;
    }
    #personaje_temblando{
        right: 40px;
    }
    #personaje_salvado{
        right: 44px;
    }
    .personaje_temblando_animation{
        transform-origin: 80% 100%;
        -webkit-transform-origin: 80% 100%;
        -o-transform-origin: center 80% 100%;
        animation-name: animacion-personaje-temblando;
        animation-iteration-count: 4;
        animation-timing-function: linear;
        animation-duration: 0.5s;
        -webkit-animation-name: animacion-personaje-temblando;
        -webkit-animation-iteration-count: 4;
        -webkit-animation-timing-function: linear;
        -webkit- animation-duration: 0.5s;
    }
    #cuerda{
        right: 90px;
    }
    #grua{
        top: -10px;
        left: 25%;
    }
    #letras-content{
        bottom: 15px;
    }
    /******************************/

    /************MODAL**************/
    #modal-box{
        width: 350px;
        padding: 10px;
    }
    
    #modal-title{
        font-size: 18px;
    }
    
    #modal-button:hover,#repetir-btn:hover{
	    cursor: pointer;
	    transform: scale(1.1);
	    -webkit-transform: scale(1.1);
	    -o-transform: scale(1.1);
	    background-color: #0097A3;
	}
}

@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: 100%;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .nubes{
        animation: none;
        animation: unset;
        -webkit-animation: none;
        -webkit-animation: unset;
    }

    /**************MAIN**************/
    #incorrectas-content{
        width: 100px;
        height: 35px;
        bottom: initial;
        right: initial;
        left: 10px;
        top: 10px;
    }
    .incorrecta-txt{
        width: 20px;
    }
    #estructura{
        right: initial;
        bottom: initial;
        width: 308px;
        height: 144px;
        left: 50%;
        left: calc(50% - 154px);
        left: -moz-calc(50% - 154px);
        
        top: 47%;        
    }
    #andamios{
        width: 225px;
        height: 123px;
        right: initial;
        left: 50%;
        left: calc(50% - (225px / 2));
        left: -moz-calc(50% - (225px / 2));
    }
    #plataforma{
        width: 304px;
        height: 28px;
        left: 50%;
        left: calc(50% - (304px / 2));
        left: -moz-calc(50% - (304px / 2));
    }

    #barras{
        height: 129px;
        top: 15px;
    }
    #barra1,
    #barra2,
    #barra3{
        width: 22px;
        height: 127px;
    }
    #barra4,
    #barra5,
    #barra6{
        width: 17px;
        height: 115px;
        top: 3px;
    }
    #barra7,
    #barra8,
    #barra9{
        width: 15px;
        height: 102px;
        top: 7px;
    }
    #barra10,
    #barra11,
    #barra12{
        width: 13px;
        height: 92px;
        top: 9px;
    }

    #personaje_temblando,
    #personaje_salvado{
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
        -o-transform: scale(0.7);
        top: 14%;
        right: initial;
    }
    #personaje_temblando{
        left: 50%;
        left: calc(50% - (91px / 2));
        left: -moz-calc(50% - (91px / 2));
    }
    #personaje_salvado{
        left: 50%;
        left: calc(50% - (95px / 2));
        left: -moz-calc(50% - (95px / 2));
    }
    .personaje_temblando_animation{
        animation-name: animacion-personaje-temblando-responsive;
        animation-iteration-count: 4;
        animation-timing-function: linear;
        animation-duration: 0.5s;
        -webkit-animation-name: animacion-personaje-temblando-responsive;
        -webkit-animation-iteration-count: 4;
        -webkit-animation-timing-function: linear;
        -webkit- animation-duration: 0.5s;
    }

    #cuerda{
        display: none;
    }
    .cuerda-temblando{
        animation: none;
        -webkit-animation: none;
        animation: unset;
        -webkit-animation: unset;
    }
    #grua{
        top: 50px;
        left: 50%;
        left: calc(50% - (350px / 2));
        left: -moz-calc(50% - (350px / 2));
        right: initial;
        width: 350px;
        height: 50px;
    }
    
    #grua-1{
        display: none;
    }
    #grua-2{
        display: none;
    }
    .grua-2-active,.lingote-active{
        animation: none;
        animation: unset;
        -webkit-animation: none;
        -webkit-animation: unset;
    }
    #grua-3{
        display: none;
    }
    #hilo{
        left: 50%;
        left: calc(50% - 3px);
        left: -moz-calc(50% - 3px);
        top: -75px; 
    }
    #lingote{
        top: 0px;
        left: 0px;
        transform: none;
        -webkit-transform: none;
        -o-transform: none;
    }
    
    #letras-content{
        width: 100%;
        width: calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        
        bottom: 15px;
    }
    .ladrillo{
        width: 40px;
        width: calc(100% / 6);
        width: -moz-calc(100% / 6);
        margin: 0px;
    }
    .ladrillo p{
        font-size: 15px;
    }

    #humo1,#humo2,#humo3{
        display: none;
    }
    .humo-on-1,.humo-on-2,.humo-on-3{
        animation: none;
        animation: unset;
        -webkit-animation: none;
        -webkit-animation: unset;
    }
    /************MODAL**************/
    #modal-box{
        width: 95%;
        padding: 10px;
    }
    
    #modal-title{
        font-size: 18px;
    }
    #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%;
    }
}