@media only screen and (max-width: 770px) {
    * {
        margin: 0 auto;
    }
*, *:before, *:after{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}			 
    #menu {
        display: none !important;
    }
    #cabecera {
        width: 100%;
        height: 10%;
    }
    .texto_cabecera {
        text-align: center;
    }
    /* Menu entero */
    #menu-movil {
        display: none;
        width: 100%;
        height: auto;
        margin-top: 0;
    }
    #menu_2{
        border-top: .0625rem solid #e0e0e0;
        width: 28%;
        min-height: 110vh;
        float: left;
    }
    .cover-bg {
        background: #ed6000;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #menu_grande_movil {
        background-color: #ed6000;
        border-top: .0625rem solid #e0e0e0;
        display: none;
        width: 82%;
        left: 28.5%;
        position: absolute;
        height: 687px;
        
    }

    /* boton del Menu */
.boton_menu{
	top: 16px;
	position: absolute;
}
    .boton_menu.boton_menu_2::after {
        border: 0;
        padding: 0 20px;
        font-size: 2.35rem;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 1px #000;
        content: "x";
        position: absolute;
        cursor: pointer;
        width: 12px;
        height: 12px;
    }
    /* boton del menu */
    .boton_menu::after {
        border: 0;
        padding: 0 20px;
        font-size: 2.35rem;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 1px #000;
        content: "☰";
        position: absolute;
        cursor: pointer;
        width: 12px;
    }
    .boton_menu:hover {
        background-color: #ed6000;
    }
    /* Primer desplegable: turismo */
    .primer_desplegable {
        background-color: #ed6000;
        color: white;
        padding: 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        width: 69%;
        list-style: none;
        border-right: .0625rem solid #e0e0e0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .primer_desplegable:hover {
        background-color: #ed6000;
    }
    .primer_desplegable li {
        display: block;
    }
    .primer_desplegable li a {
        color: white;
    }
    /* Segundo desplegable: Excursiones, seguros, coches, viajes, guias, buceo, blog */
    .segundo_desplegable {
        background-color: #bd5c01;
        color: white;
        padding: 15px;
        text-align: center;
        display: inline-block;
        font-size: 12px;
        width: 100%;
        text-decoration: none;
        list-style: none;
        border-right: .0625rem solid #e0e0e0;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 10px;
    }
	
	.alojamientos{
        background-color: #bd5c01;
        color: white;
        padding: 15px;
        text-align: center;
        display: inline-block;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        width: 100%;
        text-decoration: none;
        list-style: none;
        border-right: .0625rem solid #e0e0e0;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .buceo {
        padding-bottom: 191px;					 
    }
     /* menu oculto: alojamientos */
    .ul_alojamiento {
        display: none;
    }

    .segundo_desplegable:hover {
        background-color: #ed6000;
    }

    .segundo_desplegable:hover li a{
        background-color: #ed6000;
    }

    .segundo_desplegable li {
        display: block;
    }
    .segundo_desplegable i{
        color: #fff !important;
    }

.segundo_desplegable li a{
    	color: white;
    }
    /* estilos li: informacion_general, que_ver, como_llegar, transporte, donde_dormir, compras, donde_comer, mapa   */
    .informacion_general,
    .que_ver,
    .como_llegar,
    .donde_dormir,
    .compras,
    .donde_comer,
    .mapa, 
    .viajar {
        text-align: left;
        width: 100%;
        display: inline-block;
        padding-top: 15px;
        /* padding-left: 15px; */
        list-style: none;
        padding-bottom: 0;
        position: relative;
    }
    .informacion_general,
    .que_ver,
    .como_llegar {
        padding-bottom: 0px !important;
    }
    .relleno {
        width: 80.8%;
        display: inline-block;
        padding-top: 15px;
        list-style: none;
        padding-bottom: 15px;
        height: 80px;
    }
    .mostrar {
        display: block !important;
    }
    /* Se utiliza en el archivo: flechas all para mostrar los desplegables */
    .mostrar_2 {
        display: inline-block !important;
    }
    .informacion_general li,
    .que_ver li,
    .como_llegar li,
    .que_ver_2 li,
    .que_ver_3 li,
    .viajar li,
    .donde_dormir li,
    .compras li,
    .donde_comer li,
    .mapa li{
        list-style: none;
        padding: 8px 3px;
        display: none;
        background-color: #222222;
    }

    /* ul oculto: informacion general 2: por que viajar a bali */
    .informacion_general_2 {
        background-color: gray;
        position: relative;
        left: -4px;
        padding-left: 0px;
        top: 12px;
        display: none;
        width: 104%;
        height: 303px;
        padding-top: 16px;
        padding-bottom: 16px;	 
    }
    .informacion_general_2 li {
        list-style: none;
        padding: 11px 5px;
        display: none;
        background-color: gray;
    }
    /* ul dentro de informacion_general: por que viajar a bali */
    .ul-informacion-general {
        padding: 0;
        width: 100%;
        padding-top: 3px;
    }


    .informacion_general li a {
        text-decoration: none;
        color: #fff;
        font-size: 12px;
    }
    .informacion_general li a:hover {
        color: #ed6000;
    }
    /* Menu oculto: que_ver_2: top: 10  */
    .que_ver_2 {
        display: none;
        background-color: gray;
        padding-left: 0px;
    }
    /* Menu oculto: que_ver_3: playas */
    .que_ver_3 {
        display: none;
        background-color: gray;
        padding-left: 0px;
    }
    /* Desplegable 1: informacion general  */
    .desplegable_1 {
        width: 21%;
        border-bottom: .0625rem solid #e0e0e0;
        border-left: .0625rem solid #e0e0e0;
        padding: 15px;
        display: inline-block;
        background-color: #ed6000;
        height: 60px;
        position: absolute;
        top: 0px;
        left: 79%;
    }
    /* desplegable 2 : Que ver */
    .desplegable_2 {
        width: 21%;
        border-bottom: .0625rem solid #e0e0e0;
        border-left: .0625rem solid #e0e0e0;
        padding: 15px;
        display: inline-block;
        background-color: #ed6000;
        height: 60px;
        position: absolute;
        top: 0px;
        left: 79%;	
    }
    /* desplegable 3 : planifica tu viaje, informacion general */
    .desplegable_3 {
        width: 21%;
        border-bottom: .0625rem solid #e0e0e0;
        border-left: .0625rem solid #e0e0e0;
        padding: 15px;
        display: inline-block;
        background-color: #ed6000;
        height: 60px;
        position: absolute;
        top: 0;
        left: 79%;
    }
    /* desplegable 4 : top 10, que ver   */
    .desplegable_4 {
        width: 21%;
        border-bottom: .0625rem solid #e0e0e0;
        border-left: .0625rem solid #e0e0e0;
        padding: 15px;
        display: inline-block;
        background-color: #ed6000;
        height: 51px;
        position: absolute;
        left: 79%;
        top: 59px;
    }
    /* desplegable 5 : todas las playas, Todos los cayos, que ver   */
    .desplegable_5 {
        width: 21%;
        border-bottom: .0625rem solid #e0e0e0;
        border-left: .0625rem solid #e0e0e0;
        border-top: .0625rem solid #e0e0e0;
        padding: 15px;
        display: inline-block;
        background-color: gray;
        display: none;
        height: 51px;
        position: absolute;
        left: 79%;
        top: 109px;
    }
    /* desplegable 6 : cultura   */
    .desplegable_6 {
        width: 21%;
        border-bottom: .0625rem solid #e0e0e0;
        border-left: .0625rem solid #e0e0e0;
        padding: 15px;
        display: inline-block;
        background-color: #ed6000;
        height: 60px;
        position: absolute;
        left: 79%;
        top: 0px;	
    }
    /* Se utiliza en el archivo: flechas_all para bajar el desplegable 5 */
    .bajar_desplegable_5 {
        top: 161px !important;
    }
    /* Imagenes: informacion_general, que_ver, como_llegar, transporte, donde_dormir, compras, donde_comer, mapa  */
    .imagen_1 {
        width: 30px;
        height: 30px;
        display: inline-block;
        bottom: 5px;
        position: relative;
        left: 11px;
        padding-top: 3px;
        color:#fff;
        font-size: 22px;
    }
    /* Imagenes: Turismo, Excursiones, seguros, coches, viajes, guias, buceo, blog */
    .imagen_2 {
        width: 30px;
        height: 30px;
        display: block;
        padding-bottom: 7px;
        text-align: center;
        float: none;
        position: relative;
        font-size: 22px;
    }
    /* "Informacion": se utiliza en los enlaces  */
    .Informacion {
        color: white;
        font-size: 12px;
        font-weight: 700;
        white-space: normal;
    }
    /* li con clase desplegable_1_1_1 */
    .desplegable_1_1_1 {
        color: gray;
        font-size: 1.3rem;
        width: 100%;						   
    }
    /* a con clase enlace_1 */
    .enlace_1 {
        text-decoration: none;
        padding: 3px;
        color: #fff;
        padding-left: 21px;
        font-size: 12px;
        font-weight: 700;
        line-height: 0;
    }
    /* Imagen flecha: informacion general */
    .imagen_4 {
        background-color: #ed6000;
        display: inline-block;
        cursor: pointer;
    }
    .imagen_5 {
        display: none;
        cursor: pointer;
    }
    /* Imagen flecha: informacion general: planifica tu viaje  */
    .imagen_8 {
        background-color: gray;
        display: inline-block;
        cursor: pointer;
    }
    .imagen_9 {
        display: none;
        cursor: pointer;
    }
    /* Imagen flecha: que ver */
    .imagen_6 {
        background-color: #ed6000;
        display: inline-block;
        cursor: pointer;
    }
    .imagen_7 {
        display: none;
        cursor: pointer;
    }
    /* Imagen flecha: que ver: top 10 */
    .imagen_10 {
        background-color: gray;
        display: inline-block;
        cursor: pointer;
    }
    .imagen_11 {
        display: none;
        cursor: pointer;
    }
    /* Imagen flecha: que ver: playas */
    .imagen_12 {
        background-color: #ed6000;
        display: inline-block;
        cursor: pointer;
    }
    .imagen_13 {
        display: none;
        cursor: pointer;
    }
    /* Imagen flecha: cultura */
    .imagen_14 {
        background-color: #ed6000;
        display: inline-block;
        cursor: pointer;
    }
    .imagen_15 {
        display: none;
        cursor: pointer;
    }
    /* Menu derecho div  */
    #menu_grande_movil {
        width: 75%;
        float: left;
        background-color: #ed6000;
        border-top: .0625rem solid #e0e0e0;
        display: none;
    }
    /* Menu derecho ul  */
    .ul-menu-grande {
        margin: 0;
        display: inline-block;
    }
    /* Transicion */
    .menu_derecha {
        animation-name: menu_derecha;
        -webkit-animation-name: menu_derecha;
        animation-duration: 0.7s;
        -webkit-animation-duration: 0.7s;
        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;
        visibility: visible !important;
    }
    @keyframes menu_derecha {
        from {
            -webkit-transform: translateX(-100%)
        }
        to {
            -webkit-transform: translateX(0%);
        }
    }
    .menu_izquierda {
        animation-name: menu_izquierda;
        -webkit-animation-name: menu_izquierda;
        animation-duration: 0.7s;
        -webkit-animation-duration: 0.7s;
        animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;
        visibility: visible !important;
    }
    @keyframes menu_izquierda {
        from {
            -webkit-transform: translateX(0%)
        }
        to {
            -webkit-transform: translateX(-100%);
        }
    }
    .qodef-header-vertical .qodef-vertical-menu-area,
    .qodef-page-header {
        display: none !important;
    }
}			  

/* telefono pequeño */
@media only screen and (max-width: 358px) and (min-width: 320px) {

#menu_2{
    width: 28%;
}

#menu_grande_movil{
    width: 72%;
    left: 28%;
}

.Informacion{
    font-size: 12px;
}

.segundo_desplegable{
    font-size: 12px;
}

.enlace_1{
    font-size: 12px;
}

.imagen_2{
    width: 30px;
    height: 30px;
    font-size: 22px;
}

.imagen_1{
    width: 30px;
    height: 30px;
    padding-top: 3px;
    color:#fff;
    font-size: 22px;
}

.desplegable_5{
    top: 110px;

}

.desplegable_4{
    top: 60px;
}

.desplegable_3 {
    top: 0;
}

.bajar_desplegable_5 {
    top: 164px !important;

}


}

/* telefono mediano pequeño */
@media only screen and (max-width: 373px) and (min-width: 359px) {

    #menu_2{
        width: 28%;
    }
    
    #menu_grande_movil{
        width: 72%;
        left: 28%;
    }
    
    .Informacion{
        font-size: 12px;
    }
    
    .segundo_desplegable{
        font-size: 12px;
    }

    .alojamientos{
        font-size: 12px;
    }
    
    .enlace_1{
        font-size: 12px;
    }
    
    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
    
    .imagen_1{
        width: 33px;
        height: 33px;
        padding-top: 5px;
        color: #fff;
    }

    .desplegable_1{
        height: 60px;
    }

    .desplegable_2{
        height: 60px;
    }

    .desplegable_6{
        height: 59px;
    }

    }
    


/* telefono mediano */
@media only screen and (max-width: 425px) and (min-width: 373px) {

    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }

    #menu_2{
        width: 28%;
    }
    
    #menu_grande_movil{
        width: 72%;
        left: 28%;
    }

    .Informacion{
        font-size: 12px;
    }
    
    .segundo_desplegable{
        font-size: 12px;
    }

    .alojamientos{
        font-size: 12px;
    }
    
    .enlace_1{
        font-size: 12px;
    }
    
    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
    
    .imagen_1{
        width: 35px;
        height: 35px;
        padding-top: 5px;
        color: #fff;
    }

    .desplegable_1{
        height: 60px;
				   
    }

    .desplegable_2{
        height: 60px;
    }

    .desplegable_6{
        height: 59px;
    }

    .desplegable_5{
        top: 108px;
        height: 50px;
    
    }

    .desplegable_4{
        height: 50px;
        top: 59px;
    }
    
    .desplegable_3 {
        top: 0;
        height: 60px;
    }
}


/* telefono grande */
@media only screen and (max-width: 490px) and (min-width: 426px) {

    .primer_desplegable{
        width: 72.5%;
    }

   .segundo_desplegable{
        width: 72.5%;
    }

    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }

    #menu_2{
        width: 28%;
    }
    
    #menu_grande_movil{
        width: 71%;
        left: 29.5%;
    }

    .Informacion{
        font-size: 16px;
    }
    
    .segundo_desplegable{
        font-size: 16px;
    }

    .alojamientos{
        font-size: 16px;
    }
    
    .enlace_1{
        font-size: 15px;
    }
    
    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
    
    .imagen_1{
        width: 37px;
        height: 37px;
        padding-top: 5px;
        color: #fff;
    }

    .desplegable_1{
       height: 60px;
    }

    .desplegable_2{
        height: 60px;
    }

    .desplegable_6{
        height: 59px;
    }

}

/* telefono muy grande */
@media only screen and (max-width: 570px) and (min-width: 490px) {

    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }

																  
    #menu_2{
        width: 29%;
    }
    
    #menu_grande_movil{
        width: 71%;
        left: 29.5%;
    }

    .Informacion{
        font-size: 17px;
    }
    
    .segundo_desplegable{
        font-size: 17px;
    }

    .alojamientos{
        font-size: 17px;
    }
    
    .enlace_1{
        font-size: 15px;
    }
    
    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
    
    .imagen_1{
        width: 39px;
        height: 39px;
        padding-top: 3px;
        color:#fff;
        font-size: 22px;
    }

    .desplegable_1{
        height: 60px;
    }

    .desplegable_2{
        height: 60px;
    }

    .desplegable_6{
        height: 59px;
    }

}

/* telefono muy muy grande */
@media only screen and (max-width: 670px) and (min-width: 570px) {
    
    #menu_2{
        width: 30%;
    }
    
    #menu_grande_movil{
        width: 71%;
        left: 29.5%;
    }
    
    .Informacion{
        font-size: 19px;
    }
    
    .segundo_desplegable{
        font-size: 19px;
    }

    .alojamientos{
        font-size: 19px;
    }
    
    .enlace_1{
        font-size: 19px !important;
    }
    
    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
    
    .imagen_1{
        width: 41px;
        height: 41px;
        padding-top: 3px;
        color:#fff;
        font-size: 22px;
    }

    .desplegable_1{
        height: 60px;
    }

    .desplegable_2{
        height: 60px;
				   
    }

    .desplegable_6{
        height: 60px;
    }

    .desplegable_5{
        top: 110px;
    
    }
    
    .desplegable_4{
        top: 60px;
    }
    
    .desplegable_3 {
        top: 0;
    }
    
    .bajar_desplegable_5 {
        top: 164px !important;
    
    }


}

/* telefono muy muy muy grande */
@media only screen and (max-width: 767px) and (min-width: 670px) {
    
    #menu_2{
        width: 29%;
    }
    
    #menu_grande_movil{
        width: 71%;
        left: 29.5%;
    }

    .Informacion{
        font-size: 21px;
    }
    
    .segundo_desplegable{
        font-size: 21px;
    }

    .alojamientos{
        font-size: 21px;
    }
    
    .enlace_1{
        font-size: 21px !important;
    }
    
    .imagen_2{
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
    
    .imagen_1{
        width: 43px;
        height: 43px;
        padding-top: 3px;
        color:#fff;
        font-size: 22px;
    }

    .desplegable_1{
        height: 60px;
    }

    .desplegable_2{
        height: 60px;
    }

    .desplegable_6{
        height: 61px;
    }

    .desplegable_5{
        top: 108px;
        height: 48px;
    
    }
    
    .desplegable_4{
        top: 61px;
        height: 48px;
    }
    
    .desplegable_3 {
        top: 0;
        height: 60px;
    }
    
    .bajar_desplegable_5 {
        top: 156px !important;
    
    }


}

/* Ipad */
@media only screen and (max-width: 768px) and (min-width: 768px) {
    #menu_2{
        width: 30%;
    }
    
    #menu_grande_movil{
        width: 71%;
        left: 29.5%;
    }
    
    .bajar_desplegable_5 {
        top: 159px !important;
    }

    .desplegable_5{
        height: 48px;
        top: 108px;

    }

    .desplegable_4{
        height: 48px;
        top: 61px;
    }

    .desplegable_3 {
      /*   height: 51px;
        top: 60px;*/
       height: 60px;
       top: 0;
}

.desplegable_1{
    height: 60px;
}

.desplegable_2{
   height: 60px;
}

.desplegable_6{
    height: 61px;
}

.Informacion{
    font-size: 21px;
}

.segundo_desplegable{
    font-size: 21px;
}

.alojamientos{
    font-size: 21px;
}

.enlace_1{
    font-size: 21px !important;
}

.imagen_2{
    width: 30px;
    height: 30px;
    font-size: 22px;
}

.imagen_1{
    width: 43px;
    height: 43px;
    padding-top: 3px;
    color:#fff;
    font-size: 22px;
}

}


@media only screen and (max-width: 1513px) {
    #menu{
        width: 93%;
        margin-left: 1%;
    }

    .primer_desplegable{
        width: 13.2%;
        padding-left: 0;
        padding-right: 0;
    }
}