/* voctours_responsive_moviles.css */
/* Adaptación de estilos a los distintos medias: móviles (desde 320px a 767px) y tablets (de 768 a 1024) */
    /*      SOLO _responsive_, ie, "full screen" (no player here, están en voctours_responsive.css) */

    .vl_logado1 #login #dd div span {display: none;}

    /* optimización fastplay_docready animLoop rAF */
    .elem_out_of_view {visibility: hidden; top: -1000px;-webkit-transform:none;}
    .elem_in_view {visibility: visible;}

    /* debug speed */
    /*.fixed-cta {display: block !important;} */

    
    .header {
        height: 54px;
        padding-top: 0 !important;
    }
    .header-wrapper {
        width: 100%;    /* all-rent-resp lo define a 800px  */
    }
    #guide_tour_btn {display: none;}        /* don't show the Guide Tour 'i' launch button in CTA. */

    .header .header_sub {display: inline-block;}
    .filtres {top:0;}
    .idiomes {top: 5px;}
    body.lvti_std .filtres {
        margin-top: 6px !important;
    }

    #voices textarea {color: #fff;}


@media only screen and (max-width: 320px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            margin-top: 30px !important;
            margin-right: calc((100% - 120px) / 2) !important;
            width: 120px;
        }
        .header .header-nav > li.info {
            font-size: 14px;        
        }

    /* logo */
        body.lvti_std #logo {
            left: 115px;
        }

    /* idiomes */
        .idiomes {
            top: 5px;
            left: 5px;
            height: 40px;
            width: 100px;
        }
        ul.language li, ul.social li {
            margin-right: 5px;
            float: left;
        }
        .pastille { /* también aplica a #filtres */
            display: block;
            height: 25px;
            width: 25px;
        }
        .pastille span {
            background: url(../img3m/social_4-small.png) no-repeat;    
        }
        .pastille.en span {
            background-position: -75px 0;
        }
        .pastille.en span.roll {
            background-position: -75px -25px;
        }
        .pastille.en.active span {
            background-position: -75px -25px;
        }
        .pastille.es span {
            background-position: -300px 0;
        }
        .pastille.es span.roll {
            background-position: -300px -25px;
        }
        .pastille.es.active span {
            background-position: -300px -25px;
        }
        .pastille.fr span {
            background-position: -375px 0;
        }
        .pastille.fr span.roll {
            background-position: -375px -25px;
        }
        .pastille.fr.active span {
            background-position: -375px -25px;
        }
        .pastille span, .pastille span.roll {
            width: 25px;
            height: 25px;
            padding: 9px;
            border-radius: 13px;
            margin: 2px;
            font-size: 10px;
        }

    /* filtres */
        #filtres {
            display: block !important;
            height: 40px;
            width: 100px;
            right: 0;
            top: 5px;
        }
        #filtres ul.burbujas {width: auto !important;}
        #filtres ul.burbujas .txtfiltros {display: none;}
        #filtres .pastille span {
            text-indent: -5000px;
            width: 25px;
            height: 25px;
            border-radius: 0;
        }    
        ul.burbujas .pastille.azul span {
            background: url(../img3m/bgbubbleblue-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.roja span {
            background: url(../img3m/bgbubblered-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.verde span {
            background: url(../img3m/bgbubblegreen-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille span {
            background-position: 0 0;
        }
        ul.burbujas .pastille span.roll {
            background-position: 0 -25px;
        }   
        ul.burbujas .pastille.active span.roll {
            background-position: 0 0;
        }   
        ul.burbujas li {
            margin-right: 0;
        }
        .in_frame #filtres {display: none;}

    /* voces */
        .hotspot.right {
            right: 70px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        .navigation {padding-top: 50px;}
        .navigation > ul > li {
            margin-top: -10px;
            font-size: 12px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }

}

@media only screen and (min-width: 321px) and (max-width: 360px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            margin-top: 30px !important;
            margin-right: calc((100% - 120px) / 2) !important;
            width: 120px;
        }
        .header .header-nav > li.info {
            font-size: 14px;        
        }

    /* logo */
        body.lvti_std #logo {
            left: 115px;
        }

    /* idiomes */
        .idiomes {
            top: 5px;
            left: 5px;
            height: 40px;
            width: 100px;
        }
        ul.language li, ul.social li {
            margin-right: 5px;
            float: left;
        }
        .pastille { /* también aplica a #filtres */
            display: block;
            height: 25px;
            width: 25px;
        }
        .pastille span {
            background: url(../img3m/social_4-small.png) no-repeat;    
        }
        .pastille.en span {
            background-position: -75px 0;
        }
        .pastille.en span.roll {
            background-position: -75px -25px;
        }
        .pastille.en.active span {
            background-position: -75px -25px;
        }
        .pastille.es span {
            background-position: -300px 0;
        }
        .pastille.es span.roll {
            background-position: -300px -25px;
        }
        .pastille.es.active span {
            background-position: -300px -25px;
        }
        .pastille.fr span {
            background-position: -375px 0;
        }
        .pastille.fr span.roll {
            background-position: -375px -25px;
        }
        .pastille.fr.active span {
            background-position: -375px -25px;
        }
        .pastille span, .pastille span.roll {
            width: 25px;
            height: 25px;
            padding: 9px;
            border-radius: 13px;
            margin: 2px;
            font-size: 10px;
        }

    /* filtres */
        #filtres {
            display: block !important;
            height: 40px;
            width: 100px;
            right: 0;
            top: 5px;
        }
        #filtres ul.burbujas {width: auto !important;}
        #filtres ul.burbujas .txtfiltros {display: none;}
        #filtres .pastille span {
            text-indent: -5000px;
            width: 25px;
            height: 25px;
            border-radius: 0;
        }    
        ul.burbujas .pastille.azul span {
            background: url(../img3m/bgbubbleblue-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.roja span {
            background: url(../img3m/bgbubblered-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.verde span {
            background: url(../img3m/bgbubblegreen-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille span {
            background-position: 0 0;
        }
        ul.burbujas .pastille span.roll {
            background-position: 0 -25px;
        }   
        ul.burbujas .pastille.active span.roll {
            background-position: 0 0;
        }   
        ul.burbujas li {
            margin-right: 0;
        }
        .in_frame #filtres {display: none;}

    /* voces */
        .hotspot.right {
            right: 70px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        .navigation {padding-top: 50px;}
        .navigation > ul > li {
            margin-top: -10px;
            font-size: 12px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}

@media only screen and (min-width: 361px) and (max-width: 400px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            margin-top: 30px !important;
            margin-right: calc((100% - 120px) / 2) !important;
            width: 120px;
        }
        .header .header-nav > li.info {
            font-size: 14px;        
        }

    /* logo */
        body.lvti_std #logo {
            left: 115px;
        }

    /* idiomes */
        .idiomes {
            top: 5px;
            left: 5px;
            height: 40px;
            width: 100px;
        }
        ul.language li, ul.social li {
            margin-right: 5px;
            float: left;
        }
        .pastille { /* también aplica a #filtres */
            display: block;
            height: 25px;
            width: 25px;
        }
        .pastille span {
            background: url(../img3m/social_4-small.png) no-repeat;    
        }
        .pastille.en span {
            background-position: -75px 0;
        }
        .pastille.en span.roll {
            background-position: -75px -25px;
        }
        .pastille.en.active span {
            background-position: -75px -25px;
        }
        .pastille.es span {
            background-position: -300px 0;
        }
        .pastille.es span.roll {
            background-position: -300px -25px;
        }
        .pastille.es.active span {
            background-position: -300px -25px;
        }
        .pastille.fr span {
            background-position: -375px 0;
        }
        .pastille.fr span.roll {
            background-position: -375px -25px;
        }
        .pastille.fr.active span {
            background-position: -375px -25px;
        }
        .pastille span, .pastille span.roll {
            width: 25px;
            height: 25px;
            padding: 9px;
            border-radius: 13px;
            margin: 2px;
            font-size: 10px;
        }

    /* filtres */
        #filtres {
            display: block !important;
            height: 40px;
            width: 100px;
            right: 0;
            top: 5px;
        }
        #filtres ul.burbujas {width: auto !important;}
        #filtres ul.burbujas .txtfiltros {display: none;}        
        #filtres .pastille span {
            text-indent: -5000px;
            width: 25px;
            height: 25px;
            border-radius: 0;
        }    
        ul.burbujas .pastille.azul span {
            background: url(../img3m/bgbubbleblue-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.roja span {
            background: url(../img3m/bgbubblered-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.verde span {
            background: url(../img3m/bgbubblegreen-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille span {
            background-position: 0 0;
        }
        ul.burbujas .pastille span.roll {
            background-position: 0 -25px;
        }   
        ul.burbujas .pastille.active span.roll {
            background-position: 0 0;
        }   
        ul.burbujas li {
            margin-right: 0;
        }
        .in_frame #filtres {display: none;}

    /* voces */
        .hotspot.right {
            right: 70px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        .navigation {padding-top: 50px;}
        .navigation > ul > li {
            margin-top: -10px;
            font-size: 12px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}

@media only screen and (min-width: 401px) and (max-width: 480px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            /*margin-top: 30px !important;*/
            margin-top: -1px !important;
            margin-right: 95px !important;
            width: 120px;
            text-align: center;
        }
        .header .header-nav > li.info {
            font-size: 14px;        
        }

    /* logo */
        body.lvti_std #logo {
            left: 115px;
        }

    /* idiomes */
        .idiomes {
            top: 5px;
            left: 5px;
            height: 40px;
            width: 100px;
        }
        ul.language li, ul.social li {
            margin-right: 5px;
            float: left;
        }
        .pastille { /* también aplica a #filtres */
            display: block;
            height: 25px;
            width: 25px;
        }
        .pastille span {
            background: url(../img3m/social_4-small.png) no-repeat;    
        }
        .pastille.en span {
            background-position: -75px 0;
        }
        .pastille.en span.roll {
            background-position: -75px -25px;
        }
        .pastille.en.active span {
            background-position: -75px -25px;
        }
        .pastille.es span {
            background-position: -300px 0;
        }
        .pastille.es span.roll {
            background-position: -300px -25px;
        }
        .pastille.es.active span {
            background-position: -300px -25px;
        }
        .pastille.fr span {
            background-position: -375px 0;
        }
        .pastille.fr span.roll {
            background-position: -375px -25px;
        }
        .pastille.fr.active span {
            background-position: -375px -25px;
        }
        .pastille span, .pastille span.roll {
            width: 25px;
            height: 25px;
            padding: 9px;
            border-radius: 13px;
            margin: 2px;
            font-size: 10px;
        }

    /* filtres */
        #filtres {
            display: block !important;
            height: 40px;
            width: 100px;
            right: 0;
            top: 5px;
        }
        #filtres ul.burbujas {width: auto !important;}
        #filtres ul.burbujas .txtfiltros {display: none;}
        #filtres .pastille span {
            text-indent: -5000px;
            width: 25px;
            height: 25px;
            border-radius: 0;
        }    
        ul.burbujas .pastille.azul span {
            background: url(../img3m/bgbubbleblue-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.roja span {
            background: url(../img3m/bgbubblered-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.verde span {
            background: url(../img3m/bgbubblegreen-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille span {
            background-position: 0 0;
        }
        ul.burbujas .pastille span.roll {
            background-position: 0 -25px;
        }   
        ul.burbujas .pastille.active span.roll {
            background-position: 0 0;
        }   
        ul.burbujas li {
            margin-right: 0;
        }
        .in_frame #filtres {display: none;}

    /* voces */
        .hotspot.right {
            right: 70px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        .navigation {padding-top: 50px;}
        .navigation > ul > li {
            margin-top: -10px;
            font-size: 12px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}

@media only screen and (min-width: 481px) and (max-width: 567px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            /*margin-top: 30px !important;*/
            margin-top: -1px !important;
            margin-right: 130px !important;
            width: 120px;
            text-align: center;
        }
        .header .header-nav > li.info {
            font-size: 14px;        
        }

    /* logo */
        body.lvti_std #logo {
            left: 130px;
        }

    /* idiomes */
        .idiomes {
            top: 5px;
            left: 5px;
            height: 40px;
            width: 100px;
        }
        ul.language li, ul.social li {
            margin-right: 5px;
            float: left;
        }
        .pastille { /* también aplica a #filtres */
            display: block;
            height: 25px;
            width: 25px;
        }
        .pastille span {
            background: url(../img3m/social_4-small.png) no-repeat;    
        }
        .pastille.en span {
            background-position: -75px 0;
        }
        .pastille.en span.roll {
            background-position: -75px -25px;
        }
        .pastille.en.active span {
            background-position: -75px -25px;
        }
        .pastille.es span {
            background-position: -300px 0;
        }
        .pastille.es span.roll {
            background-position: -300px -25px;
        }
        .pastille.es.active span {
            background-position: -300px -25px;
        }
        .pastille.fr span {
            background-position: -375px 0;
        }
        .pastille.fr span.roll {
            background-position: -375px -25px;
        }
        .pastille.fr.active span {
            background-position: -375px -25px;
        }
        .pastille span, .pastille span.roll {
            width: 25px;
            height: 25px;
            padding: 9px;
            border-radius: 13px;
            margin: 2px;
            font-size: 10px;
        }

    /* filtres */
        #filtres {
            display: block !important;
            height: 40px;
            width: 100px;
            right: 0;
            top: 5px;
        }
        #filtres ul.burbujas {width: auto !important;}
        #filtres ul.burbujas .txtfiltros {display: none;}
        #filtres .pastille span {
            text-indent: -5000px;
            width: 25px;
            height: 25px;
            border-radius: 0;
        }    
        ul.burbujas .pastille.azul span {
            background: url(../img3m/bgbubbleblue-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.roja span {
            background: url(../img3m/bgbubblered-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.verde span {
            background: url(../img3m/bgbubblegreen-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille span {
            background-position: 0 0;
        }
        ul.burbujas .pastille span.roll {
            background-position: 0 -25px;
        }   
        ul.burbujas .pastille.active span.roll {
            background-position: 0 0;
        }   
        ul.burbujas li {
            margin-right: 0;
        }
        .in_frame #filtres {display: none;}

    /* voces */
        .hotspot.right {
            right: 70px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        .navigation {padding-top: 50px;}
        .navigation > ul > li {
            margin-top: -10px;
            font-size: 12px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}

@media only screen and (min-width: 568px) and (max-width: 600px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            /*margin-top: 30px !important;*/
            margin-top: -1px !important;
            margin-right: 130px !important;
            width: 120px;
            text-align: center;
        }
        .header .header-nav > li.info {
            font-size: 14px;        
        }

    /* logo */
        body.lvti_std #logo {
            left: 130px;
        }

    /* idiomes */
        .idiomes {
            top: 5px;
            left: 5px;
            height: 40px;
            width: 100px;
        }
        ul.language li, ul.social li {
            margin-right: 5px;
            float: left;
        }
        .pastille { /* también aplica a #filtres */
            display: block;
            height: 25px;
            width: 25px;
        }
        .pastille span {
            background: url(../img3m/social_4-small.png) no-repeat;    
        }
        .pastille.en span {
            background-position: -75px 0;
        }
        .pastille.en span.roll {
            background-position: -75px -25px;
        }
        .pastille.en.active span {
            background-position: -75px -25px;
        }
        .pastille.es span {
            background-position: -300px 0;
        }
        .pastille.es span.roll {
            background-position: -300px -25px;
        }
        .pastille.es.active span {
            background-position: -300px -25px;
        }
        .pastille.fr span {
            background-position: -375px 0;
        }
        .pastille.fr span.roll {
            background-position: -375px -25px;
        }
        .pastille.fr.active span {
            background-position: -375px -25px;
        }
        .pastille span, .pastille span.roll {
            width: 25px;
            height: 25px;
            padding: 9px;
            border-radius: 13px;
            margin: 2px;
            font-size: 10px;
        }

    /* filtres */
        #filtres {
            display: block !important;
            height: 40px;
            width: 100px;
            right: 0;
            top: 5px;
        }
        #filtres ul.burbujas {width: auto !important;}
        #filtres ul.burbujas .txtfiltros {display: none;}
        #filtres .pastille span {
            text-indent: -5000px;
            width: 25px;
            height: 25px;
            border-radius: 0;
        }    
        ul.burbujas .pastille.azul span {
            background: url(../img3m/bgbubbleblue-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.roja span {
            background: url(../img3m/bgbubblered-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.verde span {
            background: url(../img3m/bgbubblegreen-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille span {
            background-position: 0 0;
        }
        ul.burbujas .pastille span.roll {
            background-position: 0 -50px;
        }   
        ul.burbujas .pastille.active span.roll {
            background-position: 0 0;
        }   
        ul.burbujas li {
            margin-right: 0;
        }
        .in_frame #filtres {display: none;}

    /* voces */
        .hotspot.right {
            right: 70px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        .navigation {padding-top: 50px;}
        .navigation > ul > li {
            margin-top: -10px;
            font-size: 12px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}

@media only screen and (min-width: 601px) and (max-width: 767px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            /*margin-top: 30px !important;*/
            margin-top: -1px !important;
            margin-right: 170px !important;
            width: 120px;
            text-align: center;
        }
        .header .header-nav > li.info {
            font-size: 14px;        
        }

    /* logo */
        body.lvti_std #logo {
            left: 170px;
        }

    /* idiomes */
        .idiomes {
            top: 5px;
            left: 5px;
            height: 40px;
            width: 100px;
        }
        ul.language li, ul.social li {
            margin-right: 5px;
            float: left;
        }
        .pastille { /* también aplica a #filtres */
            display: block;
            height: 25px;
            width: 25px;
        }
        .pastille span {
            background: url(../img3m/social_4-small.png) no-repeat;    
        }
        .pastille.en span {
            background-position: -75px 0;
        }
        .pastille.en span.roll {
            background-position: -75px -25px;
        }
        .pastille.en.active span {
            background-position: -75px -25px;
        }
        .pastille.es span {
            background-position: -300px 0;
        }
        .pastille.es span.roll {
            background-position: -300px -25px;
        }
        .pastille.es.active span {
            background-position: -300px -25px;
        }
        .pastille.fr span {
            background-position: -375px 0;
        }
        .pastille.fr span.roll {
            background-position: -375px -25px;
        }
        .pastille.fr.active span {
            background-position: -375px -25px;
        }
        .pastille span, .pastille span.roll {
            width: 25px;
            height: 25px;
            padding: 9px;
            border-radius: 13px;
            margin: 2px;
            font-size: 10px;
        }

    /* filtres */
        #filtres {
            display: block !important;
            height: 40px;
            width: 100px;
            right: 0;
            top: 5px;
        }
        #filtres ul.burbujas {width: auto !important;}
        #filtres ul.burbujas .txtfiltros {display: none;}
        #filtres .pastille span {
            text-indent: -5000px;
            width: 25px;
            height: 25px;
            border-radius: 0;
        }    
        ul.burbujas .pastille.azul span {
            background: url(../img3m/bgbubbleblue-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.roja span {
            background: url(../img3m/bgbubblered-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille.verde span {
            background: url(../img3m/bgbubblegreen-kukio-small.png) no-repeat;
        }
        ul.burbujas .pastille span {
            background-position: 0 0;
        }
        ul.burbujas .pastille span.roll {
            background-position: 0 -50px;
        }   
        ul.burbujas .pastille.active span.roll {
            background-position: 0 0;
        }   
        ul.burbujas li {
            margin-right: 0;
        }
        .in_frame #filtres {display: none;}

    /* voces */
        .hotspot.right {
            right: 150px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        .navigation {padding-top: 50px;}
        .navigation > ul > li {
            margin-top: -10px;
            font-size: 12px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            margin-top: 18px !important;
            margin-right: 500px !important;
            width: 180px;
            text-align: center;
        }
        .header .header-nav > li.info {
            /*font-size: 14px;        */
        }

    /* logo */
        body.lvti_std #logo {
            left: 300px;
        }
    /* idiomes */
    /* filtres */
        #filtres {
            right: 0;
        }
        #filtres ul.burbujas {width: auto !important;}
    /* voces */
   
        .hotspot.right {
            right: 150px;
        }
        .hotspot:hover > .content, .hotspot > .content {width: 75px;height: 75px; padding-top: 25px;}
        .hotspot:hover > .content, .hotspot.active > .content {width: 150px;height: 150px; padding-top: 25px;}
        .hotspot > .content h2 {
            font-size: 21px; 
        }
        .hotspot > .content > .description, .hotspot > .content > .links {
            padding-left: 25px;
            padding-right: 25px;
            width: 150px;
            height: 90px;  
            margin-left: 0;
            margin-right: 0;
        }
        .hotspot > .content > .description {height: 0;}
        .hotspot > .content .bubble-bg { /* es el 100% de .content */ }   /* 232px x 232px */ 
        .hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
            font-size: 16px;
        }

        .image-circle {    
            padding: 5px;
            width: 25px;
            height: 25px;
        }
        .idioma .user_social {left: 40px;}
        .hotspot.active .prevnext_replies, .hotspot:hover .prevnext_replies {top: 120px; left: 75px;}
        .hotspot.active .voce_social, .hotspot:hover .voce_social, .hotspot.active .reply_social, .hotspot:hover .reply_social {top: 120px; left: 50px;}
        .hotspot.active .voce_reply, .hotspot:hover .voce_reply {top: 120px; left: 35px;}

    /* navigation */
        
    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
    /* booking c2a */
        body.lvti_std .header .header-nav {
            margin-right: 260px !important;
        }

    /* logo */
        body.lvti_std #logo {
            left: 180px;
        }

    /* in_frame's */
        body.lvti_std.in_frame .header .header-nav {
            margin-top: 0px !important;     /* important porque lo tengo en html*/
            margin-right: 20%;
            width: 120px;
        }
        body.lvti_std.in_frame #titol.titol .header-nav li.info a.booking span {font-size: 14px; width: 62px;}

        body.lvti_std.in_frame #logo {
                left: 115px;
        }
        .in_frame .idiomes {display: none;}
        .in_frame #filtres {
            display: none;  /* !!! EXTREMELY IMPORTANT!!! */
        }
}


/* ----------- Height rules (mismas, girado. ¿Cierto?) ----------- */

@media only screen and (max-height: 320px) {
    /* menu lateral izqdo */
    .fixed-cta {
        top: 55px !important;
    }
    #menuside li a {padding: 4px 10px !important;}
    #menuside li a .fa {font-size: 10px;}
}

@media only screen and (min-height: 321px) and (max-height: 360px) {
    .fixed-cta {
        top: calc((100% - 270px)/2) !important;  /* (w - 326)/2 */
    }
    #menuside li a {padding: 4px 10px !important;}
    #menuside li a .fa {font-size: 10px;}
}

@media only screen and (min-height: 361px) and (max-height: 400px) {
    .fixed-cta {
        top: calc((100% - 270px)/2) !important;  /* (w - 326)/2 */
    }
    #menuside li a {padding: 4px 10px !important;}
    #menuside li a .fa {font-size: 10px;}
}

@media only screen and (min-height: 401px) and (max-height: 480px) {
    .fixed-cta {
        top: calc((100% - 326px)/2) !important;  /* (w - 326)/2 */
    }
}

@media only screen and (min-height: 481px) and (max-height: 567px) {
    .fixed-cta {
        top: calc((100% - 326px)/2) !important;  /* (w - 326)/2 */
    }
}

@media only screen and (min-height: 568px) and (max-height: 600px) {
    .fixed-cta {
        top: calc((100% - 326px)/2) !important;  /* (w - 326)/2 */
    }
}

@media only screen and (min-height: 601px) and (max-height: 767px) {
    .fixed-cta {
        top: calc((100% - 326px)/2) !important;  /* (w - 326)/2 */
    }
}