/* SKELETON */ @charset "utf-8"; /* Table of Contents ================================================== #Desktop (1600) #Desktop (1366) #Desktop (1024) #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) /* #Additional - Large Screens beyond 1920px ================================================== */ @media only screen and (min-width: 1701px) and (max-width: 2100px) { :root { --container-width: 1640px; } .container { max-width: 1640px; } /*----------------- Inner Pages -----------------*/ } /* #Additional - Large Screens beyond 1600px ================================================== */ @media only screen and (min-width: 1451px) and (max-width: 1700px) { :root { --container-width: 1340px; } .container { max-width: 1340px; } #Caption span.subtitle { font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #socialIcons { right: -20px; } /* ESTILOS DE LAYOUT SHIFT */ #welCome .image { padding: 0 85px; } /* FIN ESTILOS DE LAYOUT SHIFT */ /*----------------- Inner Pages -----------------*/ } /* #Additional - Large Screens beyond 1366px ================================================== */ @media only screen and (min-width: 1181px) and (max-width: 1450px) { :root { --container-width: 1240px; } .container { max-width: 1240px; } #header .logo { margin: 20px 20px; } #header .phoneMenu { padding-right: 10px; } #header .languageMenu { padding: 0 10px; } #header .reservarBtn { padding-left: 10px; } #Caption span.subtitle { font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #Caption span.title { font-size: 67px; line-height: var(--desktop-line-height-title) } #socialIcons { right: -10px; } /* ESTILOS DE LAYOUT SHIFT */ #welCome .image { padding: 0 85px; } /* FIN ESTILOS DE LAYOUT SHIFT */ /*----------------- Inner Pages -----------------*/ } /* #iPad Pro - Large Screens beyond 1024px ================================================== */ @media only screen and (min-width: 960px) and (max-width: 1180px) { :root { --container-width: 960px; } .container { max-width: 960px; } #header .logo { width: 90px; margin: 20px 20px; } #header .phoneMenu { display: none; padding-right: 10px; } #header .languageMenu { padding: 0 10px; } #header .reservarBtn { padding-left: 10px; } #slider, #slider .home-slider, #slider .owl-stage-outer, #slider .owl-stage, #slider .owl-item { width: 100vw; height: auto; } #Caption span.subtitle { font-size: 35px; line-height: 45px; } #Caption span.title { font-size: 54px; line-height: 64px; } #socialIcons { right: -10px; } /* ESTILOS DE LAYOUT SHIFT */ #welCome .image { padding: 0 15px; } /* FIN ESTILOS DE LAYOUT SHIFT */ } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { :root { --container-width: 100%; } .container { max-width: 100%; padding: 0 15px; } #header { background-color: rgb(var(--primary-color-rgb) / 80%); } #header .logo { width: 98px; margin: 0; z-index: 100; } #header.stiky .logo { margin: 15px 0; } #header .leftNav { width: 100%; order: 1; justify-content: space-between; flex-direction: row-reverse} #header .hamburger { display: block; } #header .hamburger nav { width: 100%; padding-top: 100px; z-index: 101} #header .hamburger nav .menu_items { padding: 30px 15px; } #header ul.leftMenu { display: none; } #header ul.mainMenu { display: none; } #header .rightNav { display: none; } #slider, #slider .home-slider, #slider .owl-stage-outer, #slider .owl-stage, #slider .owl-item { width: 100vw; height: auto; } #slider .desktop { display: none; } #slider .tablet { display: block; } #slider .home-slider.owl-theme .owl-nav { bottom: 81px; left: 10px; width: 150px;} #slider .home-slider.owl-theme .owl-dots { bottom: 94px; right: 15px;} #Caption { width: calc(100% - 30px); } #Caption span.title { font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #Caption span.title br { display: none; } #Caption span.subtitle { font-size: var(--font-size-title); line-height: var(--mobile-line-height-title); } #socialIcons { display: none; } /* ESTILOS DE LAYOUT SHIFT */ #welCome .image { padding: 0 15px; margin-top: 30px; } .main-list .destin-listing:nth-child(odd) .image { padding: 0 15px 0 0; } /* FIN ESTILOS DE LAYOUT SHIFT */ /*----------------- Inner Pages -----------------*/ } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { :root { --container-width: 100%; } #header { background-color: rgb(var(--primary-color-rgb) / 80%); } #header .logo { width: 98px; margin: 0; z-index: 100; } #header.stiky .logo { margin: 13px 0; width: 70px;} #header .leftNav { width: 100%; margin-top: 0px; justify-content: space-between; flex-direction: row-reverse; padding: 16px 16px 0 16px;} #header .hamburger { display: block; } #header .hamburger nav { width: 100%; padding-top: 175px; z-index: 99;} #header .hamburger nav .menu_items { padding: 0 15px; } #header ul.leftMenu { display: none; } #header ul.mainMenu { display: none; } #header .rightNav { display: none; } #slider .desktop { display: none; } #slider .mobile { display: block; } #Caption { width: calc(100% - 30px); } #Caption span.title { font-size: 30px; line-height: var(--mobile-line-height-title); } #Caption span.title br { display: none; } #Caption span.subtitle { font-size: 25px; line-height: 30px; } #socialIcons { display: none; } /* ESTILOS DE LAYOUT SHIFT */ .main-list .destin-listing:nth-child(odd) .image { padding: 0; } /* FIN ESTILOS DE LAYOUT SHIFT */ /*----------------- Inner Pages -----------------*/ } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { :root { --container-width: 100%; } .container { /*width: 540px;*/ max-width: 100%; padding: 0 15px; } /*----------------- Inner Pages -----------------*/ } /* FIN SKELETON */