/* SKELETON */ /* Table of Contents ================================================== #Desktop (1600) #Desktop (1366) #Desktop (1024) #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) /* #Additional - Large Screens beyond 1920px ================================================== */ @charset "utf-8"; @media only screen and (min-width: 1701px) and (max-width: 2100px) { #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } /*----------------- Inner Pages -----------------*/ }/* #Additional - Large Screens beyond 1600px ================================================== */ @media only screen and (min-width: 1451px) and (max-width: 1700px) { .main-list:after { left: -37%; } #ourResponsibility span.tagnumber { padding: 0 70px; } #ourResponsibility .featuredvilla-slider .content { padding: 50px 0 50px 70px; } #ourResponsibility .featuredvilla-slider .content h3 { font-size: var(--font-size-title); line-height: var(--desktop-line-height-title); } #ourResponsibility .featuredvilla-slider .content .description { column-gap: 20px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 80px 0; } #ourResponsibility .thumbs { padding: 50px 70px; } #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } /*----------------- Inner Pages -----------------*/ }/* #Additional - Large Screens beyond 1366px ================================================== */ @media only screen and (min-width: 1181px) and (max-width: 1450px) { .main-list:after { left: -45%; } #ourResponsibility span.tagnumber { padding: 0 70px; } #ourResponsibility .featuredvilla-slider .content { padding: 50px 0 50px 70px; } #ourResponsibility .featuredvilla-slider .content h3 { font-size: 62px; line-height: 72px; } #ourResponsibility .featuredvilla-slider .content .description { column-gap: 20px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 80px 0; } #ourResponsibility .thumbs { padding: 50px 70px; } #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } /*----------------- Inner Pages -----------------*/ } /* Contrapartida del corte de #searchForm en skeleton.css: mismo umbral (1181px), para que el botón aparezca exactamente donde la máscara desaparece. Estaba en 1024px, lo que dejaba la franja 1025-1180 sin máscara y sin botón. */ @media (max-width: 1180px) { #searchFormBtn { display: block; } } /* Repesca del boton por encima del corte. El servidor no emite la mascara del hero cuando detecta movil o tablet por user-agent, y ese dispositivo puede tener la ventana ancha (una tablet en horizontal pasa de 1181px de sobra). Sin esto se quedaba sin mascara Y sin boton: ninguna via de reserva en el hero. */ @media (min-width: 1181px) { #innerBanner > .container:not(:has(#searchForm)) #searchFormBtn, #slider > .container:not(:has(#searchForm)) #searchFormBtn { display: block; } }/* #iPad Pro - Large Screens beyond 1024px ================================================== */ @media only screen and (min-width: 960px) and (max-width: 1180px) { #searchForm .field { padding: 10px 10px; } #searchForm .field label { font-size: 16px; line-height: 20px; } #searchForm .field .form-control { font-size: 20px; } #searchForm .neobookings-submit-btn { padding: 23px 15px; font-size: 28px; } .main-list { padding-top: 100px; padding-bottom: 100px; } .main-list:after { left: -57%; } #ourResponsibility { padding-top: 0px; padding-bottom: 0px; } #ourResponsibility span.tagnumber { padding: 0 0px; } #ourResponsibility .featuredvilla-slider .item img { width: 154%; max-width: 154%; margin-left: -27%; } #ourResponsibility .featuredvilla-slider .content { padding: 50px 15px 50px 0; } #ourResponsibility .featuredvilla-slider .content h3 { font-size: 57px; line-height: 60px } #ourResponsibility .featuredvilla-slider .content .description { column-gap: 15px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 80px 0; } #ourResponsibility .thumbs { padding: 50px 0 50px 15px; } #ourResponsibility .featuredvilla-slider-thumbs .owl-stage { transform: none !important; width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { width: 100% !important; } #ourResponsibility .featuredvilla-slider-thumbs .item { padding: 15px 30px; } /*----------------- Inner Pages -----------------*/ }/* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { #searchForm { bottom: 0; } #occupationBox .logo { display: block; } #occupationBox .occupationClose::before, #occupationBox .occupationClose::after { background-color: var(--primary-color); } #occupationBox > div { width: 100vw; height: 100vh; padding: 96px 15px 30px 15px; } #occupationBox > div .room { margin: 0 auto; } .main-list { padding-top: 70px; padding-bottom: 70px; } .main-list:after { background-position: left bottom 0px; background-size: 100%; opacity: 5%; top: -23%; left: -50%; } .main-list .title { margin-bottom: 30px; padding-left: 15px !important; } .main-list .title span.tagnumber { margin: 0; font-size: 20px; line-height: 25px; } .main-list .title span.tagnumber strong:after { width: 40px; margin: 0 15px; } #ourResponsibility { padding-top: 0px; padding-bottom: 0px; } #ourResponsibility span.tagnumber { margin: 0 0 30px 0; padding: 0 0px; font-size: 20px; line-height: 25px; } #ourResponsibility span.tagnumber strong:after { width: 40px; margin: 0 15px; } #ourResponsibility .featuredvilla-slider .item img { width: 180%; max-width: 180%; margin-left: -40%; } #ourResponsibility .featuredvilla-slider .content { display: block; width: 100%; height: auto; padding: 40px 15px; left: 0;} #ourResponsibility .featuredvilla-slider .content h3 { margin: 0 0 20px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #ourResponsibility .featuredvilla-slider .content .description { -moz-columns: 1; -webkit-columns: 1; column-count: 1; column-gap: 0px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 20px 0; } #ourResponsibility .featuredvilla-slider .content p { margin: 20px 0 0 0; } #ourResponsibility .thumbs { display: block; width: 100%; height: 150px; padding: 0 15px; top: auto; bottom: 0; right: 0; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { margin-bottom: 0; } #ourResponsibility .featuredvilla-slider-thumbs .item { padding: 15px 30px; } #ourResponsibility .featuredvilla-slider-thumbs.owl-theme .owl-nav { position: static; margin-top: 30px; text-align: left; } #footer { background-position: right 37% center; } .footerSection { padding-top: 50px; padding-bottom: 50px; } .footerSection .ftr_menu { margin-bottom: 30px; } .footerBottom .container { padding-top: 30px; padding-bottom: 30px; } .footerBottom .ftr_text { margin-bottom: 10px; text-align: center; } .footerBottom .ftr_text:last-child { margin-bottom: 0; text-align: center; } /*----------------- Inner Pages -----------------*/ }/* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { #searchFormPopup > #searchForm { bottom: 0; padding-bottom: 0;} #occupationBox .logo { display: block; } #occupationBox .occupationClose::before, #occupationBox .occupationClose::after { background-color: var(--primary-color); } #occupationBox > div { width: 100vw; height: 100vh; padding: 96px 15px 30px 15px; } #occupationBox > div .room { flex-direction: column; width: 100%; } #occupationBox > div .room select { width: calc(100% - 30px); } #occupationBox > div .room .ages-inputs { flex-direction: column; } .main-list:after { background-position: left bottom 0px; background-size: 100%; opacity: 5%; top: -23%; left: -50%; } .main-list .title { margin-bottom: 0; } .main-list .title span.tagnumber { margin: 0; font-size: 20px; line-height: 25px; } .main-list .title span.tagnumber strong:after { width: 40px; margin: 0 15px; } #ourResponsibility { padding-top: 0px; padding-bottom: 0px; } #ourResponsibility span.tagnumber { margin: 0 0 30px 0; padding: 0 0px; font-size: 20px; line-height: 25px; } #ourResponsibility span.tagnumber strong:after { width: 40px; margin: 0 15px; } #ourResponsibility .featuredvilla-slider .content { display: block; width: 100%; height: auto; padding: 40px 15px; left: 0; } #ourResponsibility .featuredvilla-slider .content h3 { margin: 0 0 20px 0; font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #ourResponsibility .featuredvilla-slider .content .description { -moz-columns: 1; -webkit-columns: 1; column-count: 1; column-gap: 0px; } #ourResponsibility .featuredvilla-slider .content h4 { margin: 0 0 20px 0; } #ourResponsibility .featuredvilla-slider .content p { margin: 20px 0 0 0; } #ourResponsibility .thumbs { display: block; width: 100%; height: 150px; padding: 0 15px; top: auto; bottom: 0; right: 0; } #ourResponsibility .featuredvilla-slider-thumbs .owl-item { margin-bottom: 0; } #ourResponsibility .featuredvilla-slider-thumbs .item { padding: 15px 30px; } #ourResponsibility .featuredvilla-slider-thumbs.owl-theme .owl-nav { position: static; margin-top: 30px; text-align: left; } #footer { background-position: right 37% center; } .footerSection { padding-top: var(--space-between-sections); padding-bottom: 0; } .footerSection .ftr_menu { margin-bottom: 30px; } .footerBottom .container { padding-top: 30px; padding-bottom: 100px; } .footerBottom .ftr_text { margin-bottom: 20px; text-align: center; } .footerBottom .ftr_text:last-child { margin-bottom: 0; text-align: center; } /*----------------- Inner Pages -----------------*/ }/* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #Caption { top: 37%; } #occupationBox > div #rooms { max-height: 32vh; } #ourResponsibility .featuredvilla-slider .item img { width: 220%; max-width: 220%; margin-left: -60%; } /*----------------- Inner Pages -----------------*/ } /* FIN SKELETON */