/* Theme Name: Go Play Systems Author: Go Play Systems Author URI: http://goplaysystems.com Description: Custom Theme, Copyright 2018 All Rights Reserved. All files property of Go Play Systems exclusively. Tags: Text Domain: blankslate */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-size: 100%; font: inherit; padding: 0; border: 0; margin: 0; vertical-align: baseline } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } .clear { clear: both } .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important } .woocommerce div.product form.cart .variations label {color:#000; font-size:18px;} /*---------------------FONTS---------------------*/ @font-face { font-family: 'VAGRoundedStd-Bold'; src: url('fonts/VAGRoundedStd-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/VAGRoundedStd-Bold.otf') format('opentype'), url('fonts/VAGRoundedStd-Bold.woff') format('woff'), url('fonts/VAGRoundedStd-Bold.ttf') format('truetype'), url('fonts/VAGRoundedStd-Bold.svg#VAGRoundedStd-Bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CircularStd-Bold'; src: url('fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/CircularStd-Bold.otf') format('opentype'), url('fonts/CircularStd-Bold.woff') format('woff'), url('fonts/CircularStd-Bold.ttf') format('truetype'), url('fonts/CircularStd-Bold.svg#CircularStd-Bold') format('svg'); font-weight: normal; font-style: normal; } /* Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x) CSS from: http://codepen.io/transportedman/pen/NPWRGq and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide Inspired from: http://codepen.io/Rowno/pen/Afykb */ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers." Need to override the 3.3 new styles for modern browsers & apply opacity */ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /*---------------------GENERAL---------------------*/ .page-id-34401 .entry-content {padding:2vw; padding-right:4vw; padding-left:4vw;} .page-id-34401 h1 { padding: .5vw; padding-top: 1vw; text-align: center; color: #FFF; font-size: 3vw; line-height: 4vw; background-color: #4d148c; } .ws-gps-fallback { margin-bottom:1.5rem; display:inline;} .woocommerce-error, .woocommerce-info, .woocommerce-message {display:inline-block; margin-top:20px;} .padding-0 {padding:0 ;} .padding-right {padding:0 ; padding-right:15px !important;} .desktop-only { display: block; } .mobile-only { display: none; } #toggle-menu { display: none; } #the-mobile-menu {display:None;} img.circular-image { width: 100%; height: auto; border: 0 solid white; border-radius: 50%; } .header-phone {position:fixed; left:0; width:auto; top:0; z-index:99999; padding:1vw 2vw; font-size:1.8vw; line-height:1.9vw; font-family: 'VAGRoundedStd-Bold'; color:#4d148c;} .two-column-text { margin:2vw 5vw; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; font-size:1.5vw; line-height:1.9vw; } .two-column-text p { display: block; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; break-inside: avoid; } .vertical-inner {display: table-cell; vertical-align: middle;} .vertical-outer {display: table;} .centered {text-align:center;} .align-right {text-align:right;} .animate-all {-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} a:hover {text-decoration:none;} h2.special, h1.special { overflow: hidden; text-align: center; padding:2vw 0; padding-bottom:.5vw; margin:0 5vw; color:#adafb2; } h1.special {padding-bottom:0;} h2.special:before, h2.special:after, h1.special:before, h1.special:after { background-color: #adafb2; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h2.special:before, h1.special:before { right: 0.5em; margin-left: -50%; } h2.special:after, h1.special:after { left: 0.5em; margin-right: -50%; } .page-id-121 #content, .page-id-15874 #content{padding:2vw 10vw;} .single-product .woocommerce-tabs {display:none;} body.single-product div.product .product_title, body.single-product div.product .product_title.entry-title { font-size: 32px !important; line-height: 1.1 !important; } @media (max-width: 991px) { body.single-product div.product .product_title, body.single-product div.product .product_title.entry-title { font-size: 28px !important; } } @media (max-width: 767px) { body.single-product div.product .product_title, body.single-product div.product .product_title.entry-title { font-size: 24px !important; } } .home-products {padding:1vw 4vw; margin:1vw; border-radius:15px; background-color:#EEE;} .single-product .related {padding:2vw 5vw;} .centered {text-align:center;} .padded {padding:2vw;} /*---------------------COLORS---------------------*/ .orange-bg {background-color:#ff6600;} .purple-bg {background-color:#4d148c !important;} .green-bg {background-color:#40b93c !important;} .gray-bg {background-color:#adafb2;} .orange {color:#ff6600;} .purple {color:#4d148c;} .green {color:#40b93c;} .gray {color:#adafb2;} a {color:#4d148c;} /*---------------------NAVIGATION---------------------*/ #toggle-menu { display: none; } nav#the-mobile-menu { display: none; } #the-main-menu { font-family: Arial, Helvetica Neue, Helvetica, sans-serif; text-align: center; background-size: 100% 100%; background-repeat: repeat-x; background-position: top left; display:inline; vertical-align:middle; } #the-main-menu ul { list-style-type: none; padding: 0; padding-top:1vw; overflow: hidden; color: #4d148c; font-family: 'CircularStd-Bold'; text-align: center; } #the-main-menu ul.sub-menu { text-align: left; border-radius:15px; } #the-main-menu li { display: inline; padding:.2vw; } #the-main-menu ul.sub-menu li { display: block; } #the-main-menu li a, .menu-item-has-children > a { color: #4d148c; font-size:1.3vw; width: 100%; text-align: left; padding: .5vw .7vw; text-decoration: none; } #the-main-menu li ul.sub-menu a { color: #4d148c; } #the-main-menu li.menu-item-has-children { display: inline-block; } .sub-menu { display: none; position: absolute; z-index: 9999999; color: #4d148c; background-color: #FFF; min-width: 160px; box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2); text-align: left; padding-top:1vw; } .sub-menu a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .sub-menu li:last-child a { border-bottom: 0; } .sub-menu a:hover { color: #FFF !important; background-color:#4d148c; } .menu-item-has-children:hover .sub-menu { display: block; } .logo img {width:100%; height:auto;} .logo {width:15%; margin:0 2vw;} #header .logo {-webkit-transition: all .5s; -moz-transition: all .5s; transition: all .51s;} /*#header.active .logo {width:25%; padding-left:4vw; padding-right:4vw; }*/ #the-main-menu {display:inline-block; vertical-align:middle;} .logo {display:inline-block; vertical-align:middle;} .purple {color:rgba(77,19,136,.7);} #header {padding-top:2.5vw; padding-bottom:1vw; text-align:center; background-color:#FFF; position:fixed; z-index:91049; left:0; right:0; width:100%;} .bumper {height:13vw;} .top-section {height:40vw;} .header-search {position:fixed; right:0; width:auto; top:0; z-index:99999; padding:.5vw;} body.search #content {padding:2vw 5vw;} body.search header.header {padding:.5vw; padding-top:1vw; text-align:center; color:#FFF; font-size:3vw; background-color: #40b93c;} body.search header.header h1 {font-size:3vw;} body.search-no-results .entry-content {padding:2vw 5vw;} body.search h2 a {color:#4d148c;} .quick-quote-container {background-color:#EEE; padding:2vw; border-radius:.5vw; padding-bottom:4vw; margin-bottom:2vw;} /*---------------------GENERAL---------------------*/ .modal-body {text-align:center;} body {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color:#000;} /* Global headings: pixel-based size for h1, keep relative size for h2/h3 */ h1, h2, h3 {font-family: 'VAGRoundedStd-Bold'; letter-spacing:.01vw;} h1 {font-size:45px;} h2, h3 {font-size:2.2vw;} h1 strong, h2 strong {font-weight:normal;} @media (max-width: 767px) { h1 {font-size:32px;} } p {margin-bottom:1.4vw;} p, .entry-content li {font-size:16px; line-height:20px; } h4 {font-weight:bold; font-size:2vw; line-height:2vw; margin-top:1vw; margin-bottom:.5vw; color:#ff6600;} .entry-content ul { list-style-type: disc; list-style-position: outside; margin-bottom:1vw; } .entry-content ol { list-style-type: decimal; list-style-position: inside; } .entry-content ul ul, .entry-content ol ul { list-style-type: circle; list-style-position: outside; margin-left: 15px; } .entry-content ol ol, .entry-content ul ol { list-style-type: lower-latin; list-style-position: inside; margin-left: 15px; } .page-template-default #Content1 {padding:2vw 5vw;} strong {font-weight:bold;} h2 strong, h1 strong {color:#ff6600;} body {font-family: 'Roboto', sans-serif; } a.orange-button {color:#FFF; font-family: 'CircularStd-Bold'; background-color:#ff6600; display:inline-block; padding:.5vw 2vw; font-size:1.5vw; box-shadow: 3px 3px 1px hsla(0,0%,0%,0.25); border-radius:2vw;} a.green-button {color:#FFF; font-family: 'Roboto', sans-serif; background-color:#ff6600; display:inline-block; padding:.5vw 2vw; font-size:17px; border-radius:2vw; margin-top:25px;} a.purple-button {color:#FFF; font-family: 'CircularStd-Bold'; background-color:#4d148c; display:inline-block; padding:.5vw 2vw; font-size:1.5vw; box-shadow: 3px 3px 1px hsla(0,0%,0%,0.25); border-radius:2vw;} .content-padding {padding:1vw 5vw;} #footer a.orange-button {margin:1vw 2vw;} .numberCircle { border-radius: 50%; display:inline-block; vertical-align:middle; width: 3vw; height: 3vw; padding: .6vw; background: #ff6600; color: #FFF; text-align: center; font-family: 'VAGRoundedStd-Bold'; font-size:2.1vw; } /*---------------------FOOTER LIGHTBOX SLIDER---------------------*/ .list_carousel { margin: 0 auto; width: 80%; } .list_carousel ul { margin: 0; padding: 0; list-style: none; display: block; } .list_carousel li img { width: 100%; height: auto; border-radius: 0 !important; } .list_carousel li { font-size: 40px; color: #999; text-align: center; width: 150px; height: 120px; padding: 0; margin: 6px; display: block; float: left; } .list_carousel.responsive { width: auto; margin-left: 0; } .clearfix { float: none; clear: both; } .prev { float: left; margin-left: 2vw; padding-top:40px; width: 5%; text-align: center; } .prev img, .next img { width: 60%; height: auto; } .next { padding-top:40px; float: right; margin-right: 2vw; width: 5%; text-align: center; } .pager { float: left; width: 300px; text-align: center; } .pager a { margin: 0 5px; text-decoration: none; } .pager a.selected { text-decoration: underline; } .timer { background-color: #999; height: 6px; width: 0px; } /*---------------------PHOTO BOXES---------------------*/ #grad-photo { min-height:35vw; height:auto; background-size: cover; background-position: center center; margin:1vw; border-radius:15px; } .inner-photo-caption {width:50%; float:right; color:#fff; padding:2vw;} .inner-photo-caption a {color:#FFF; text-decoration:underline;} .inner-photo-caption a.orange-button {text-decoration:none;} .inner-photo-caption.left-content {float:left;} /*---------------------MARKETS---------------------*/ .sections .col-sm-6 {height:32vw; padding:3vw; background-size:cover; background-position:center center;} .page-template-page-markets .section-sub-nav { margin: 20px 0 40px; } .page-template-page-markets .w-layout-blockcontainer { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .page-template-page-markets .w-container { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .page-template-page-markets .contenedor-contenido-principal-internas { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; width: 100% !important; box-sizing: border-box !important; overflow: visible !important; position: relative !important; } /* Ensure sections stay within container */ .page-template-page-markets .contenedor-contenido-principal-internas > .sections { width: calc(100% - 0px) !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .page-template-page-markets .contenedor-sub-menu { background-color: #e7e7e7; border-radius: 15px; justify-content: flex-start; align-items: center; width: 100%; max-width: 1100px; height: auto; margin-bottom: 0; padding: 5px; display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .page-template-page-markets .enlace-sub-nav { background-color: transparent; border-radius: 15px; flex-flow: column; justify-content: center; align-items: center; min-width: 120px; padding: 13px 15px; text-decoration: none; display: flex; } .page-template-page-markets .enlace-sub-nav:hover { background-color: #f3f3f3; } .page-template-page-markets .textos-sub-nav { color: #343434; text-align: center; margin-top: 3px; line-height: 16px; } .page-template-page-markets .iconos-sub-nav { mix-blend-mode: multiply; } .page-template-page-markets .container-3 {width: 100%; position: relative;} .page-template-page-indoor-playground-components-and-attractions .contenedor-contenido-principal-internas { text-align: center !important; } .page-template-page-indoor-playground-components-and-attractions .heading-6 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } .page-template-page-indoor-playground-components-and-attractions .contenedor-botones-galeria { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #w-node-fce6b7d5-354b-22c3-1170-6c0cc06904ce-16c382e1 { display: grid !important; grid-template-columns: 1fr; gap: 20px; margin: 0 auto !important; width: 100% !important; max-width: 1200px !important; padding: 0 15px !important; box-sizing: border-box !important; } /* Tablet and up */ @media (min-width: 768px) { #w-node-fce6b7d5-354b-22c3-1170-6c0cc06904ce-16c382e1 { grid-template-columns: repeat(2, 1fr); } } /* Desktop and up */ @media (min-width: 992px) { #w-node-fce6b7d5-354b-22c3-1170-6c0cc06904ce-16c382e1 { grid-template-columns: repeat(3, 1fr); } } .page-template-page-indoor-playground-components-and-attractions .galeria-thumb { border-radius: 15px !important; width: 100% !important; height: 300px !important; object-fit: cover !important; display: block !important; } .page-template-page-indoor-playground-components-and-attractions .goplay-gallery-thumb-bg { display: block !important; width: 100% !important; height: 250px !important; max-width: 100% !important; border-radius: 8px !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Markets page - Hero section layout */ .page-template-page-markets .container-3.markets-hero { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; column-gap: 15px !important; row-gap: 0 !important; margin-bottom: 40px !important; width: 100% !important; } .page-template-page-markets .container-3.markets-hero .header-equipos { width: 100% !important; margin-bottom: 20px !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text { width: calc((100% - 15px) / 2) !important; max-width: calc((100% - 15px) / 2) !important; flex: 0 0 calc((100% - 15px) / 2) !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 0 !important; padding-left: 0 !important; box-sizing: border-box !important; color: #000000 !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; align-self: stretch !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card, .page-template-page-markets #DesignSelector .markets-text-card { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 100% !important; background-color: #E8D3FF !important; border-radius: 28px !important; padding: 36px !important; text-align: left !important; box-sizing: border-box !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; font-size: 16px !important; line-height: 21px !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card p, .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card div, .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card span, .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card li, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card p, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card div, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card span, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card li, .page-template-page-markets #DesignSelector .markets-text-card p, .page-template-page-markets #DesignSelector .markets-text-card div, .page-template-page-markets #DesignSelector .markets-text-card span, .page-template-page-markets #DesignSelector .markets-text-card li { color: #000000 !important; text-align: left !important; font-size: 16px !important; line-height: 21px !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-image { width: calc((100% - 15px) / 2) !important; max-width: calc((100% - 15px) / 2) !important; flex: 0 0 calc((100% - 15px) / 2) !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; align-self: stretch !important; min-height: 320px !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 15px !important; overflow: hidden !important; } /* Markets page - Sections layout */ .page-template-page-markets .contenedor-contenido-principal-internas { position: relative !important; } .page-template-page-markets .contenedor-contenido-principal-internas .sections { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; position: relative !important; } .page-template-page-markets .sections .row.markets-section-row { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; column-gap: 15px !important; row-gap: 0 !important; margin-bottom: 40px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; } .page-template-page-markets .sections .row.markets-section-row .col-sm-6 { width: calc((100% - 15px) / 2) !important; max-width: calc((100% - 15px) / 2) !important; box-sizing: border-box !important; overflow: visible !important; flex: 0 0 calc((100% - 15px) / 2) !important; } .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block { padding: 0 !important; color: #000000 !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card > *:last-child, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card > *:last-child, .page-template-page-markets #DesignSelector .markets-text-card > *:last-child { margin-bottom: 0 !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card p, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card p, .page-template-page-markets #DesignSelector .markets-text-card p { margin-top: 0 !important; margin-bottom: 8px !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card ul, .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card ol, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card ul, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card ol, .page-template-page-markets #DesignSelector .markets-text-card ul, .page-template-page-markets #DesignSelector .markets-text-card ol { list-style-position: inside !important; padding-left: 0 !important; margin-left: 0 !important; } .page-template-page-markets .sections .row.markets-section-row .col-sm-6.section-image { align-self: stretch !important; min-height: 300px !important; background-size: cover !important; background-position: center !important; } /* Responsive styles for markets pages - Mobile and Tablet */ @media (max-width: 991px) { .page-template-page-markets .section-sub-nav { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity; } .page-template-page-markets .section-sub-nav .w-layout-blockcontainer, .page-template-page-markets .section-sub-nav .w-container { overflow: visible !important; max-width: none !important; } .page-template-page-markets .section-sub-nav .contenedor-sub-menu { display: inline-flex !important; flex-wrap: nowrap !important; width: max-content !important; min-width: max-content !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; } .page-template-page-markets .section-sub-nav .enlace-sub-nav { flex: 0 0 auto !important; scroll-snap-align: start; } /* Hero section - stack columns on tablet and mobile */ .page-template-page-markets .container-3.markets-hero { flex-direction: column !important; row-gap: 16px !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text, .page-template-page-markets .container-3.markets-hero .markets-hero-image { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-image { min-height: 250px !important; } /* Sections - stack columns on tablet and mobile */ .page-template-page-markets .sections .row.markets-section-row { flex-direction: column !important; flex-wrap: wrap !important; row-gap: 16px !important; } .page-template-page-markets .sections .row.markets-section-row .col-sm-6 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Always show image first on mobile/tablet */ .page-template-page-markets .sections .row.markets-section-row .col-sm-6.section-image { min-height: 250px !important; order: -1 !important; /* Image first on mobile */ } .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block { order: 1 !important; /* Text after image on mobile */ padding: 0 !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card { padding: 28px !important; } } @media (max-width: 767px) { /* Mobile specific adjustments */ .page-template-page-markets .container-3.markets-hero .markets-hero-text, .page-template-page-markets .container-3.markets-hero .markets-hero-image { padding-left: 0 !important; padding-right: 0 !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-image { min-height: 200px !important; } .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block { padding: 0 !important; } .page-template-page-markets .container-3.markets-hero .markets-hero-text .markets-text-card, .page-template-page-markets .sections .row.markets-section-row .col-sm-6.markets-text-block .markets-text-card { padding: 24px !important; border-radius: 22px !important; } .page-template-page-markets .sections .row.markets-section-row .col-sm-6.section-image { min-height: 200px !important; } /* Quienes Somos responsive */ .page-template-page-quienes-somos .about-hero-video .video-gradient-frame, body.page-quienes-somos .about-hero-video .video-gradient-frame, body.page-slug-quienes-somos .about-hero-video .video-gradient-frame { width: 100% !important; height: auto !important; padding: 12px !important; } } body.page-template-page-markets.page-child #content h1, body.page-template-page-markets.page-child #content h2, body.page-template-page-markets.page-child #content h3, body.page-template-page-markets.page-child #content h4 {font-family: 'Titan One', sans-serif;} body.page-template-page-markets.page-child #content img:not(.iconos-sub-nav) {border-radius: 15px;} body.page-template-page-markets.page-child #content .section-image {border-radius: 15px; overflow: hidden;} .page-template-page-markets #DesignSelector h2 {padding-top:2vw; color:#4d148c;} .page-template-page-markets #DesignSelector, #DesignSelector p {text-align:center; margin:2vw 0;} #DesignSelector p {text-align:center; margin:4vw 0;} #grad-photo.orange-grad h2 strong, #grad-photo.orange-grad h1 strong {color:#4d148c !important;} #grad-photo.green-grad h2 strong, #grad-photo.green-grad h1 strong {color:#4d148c !important;} #grad-photo.gray-grad h2 strong, #grad-photo.gray-grad h1 strong {color:#4d148c !important;} h2.headline {color:#4d148c; font-family: 'VAGRoundedStd-Bold'; font-size:2.5vw; padding:2vw; text-align:center;} p.special-p {text-align: center; font-weight:normal; font-family: 'VAGRoundedStd-Bold'; font-size:2vw; } /*---------------------HOME---------------------*/ .home h1, .home h2, .home .h1, .home .h2, body.home h1, body.home h2, body.home .h1, body.home .h2 { color: #fff !important; } .home .inner-photo-caption {float:left; width:50%;} .inner-photo {width:50%; float:right; text-align:center;} .home .inner-photo {width:50%; float:right; text-align:center;} .inner-photo img {width:90%; height:auto; max-width:100%;} .home .inner-photo img {width:70vh; height:auto; max-width:100%;} .home .inner-photo-caption {color:#4d148c;} .home .inner-photo-caption p {color:#939598} .home-parallax-content {height:60vw; padding:10vw;} .parallax-content {height:40vw; padding:10vw;} .home-parallax-content-box {width:22.5%; margin:1%; display:inline-block; vertical-align:top; height:45vw; padding:2vw;} .home-parallax-content-box h2 {color:#FFF; font-family: 'CircularStd-Bold'; font-size:2vw; line-height:2.4vw; text-align:center; margin-bottom:2vw;} .home-parallax-content-box p {font-family: 'VAGRoundedStd-Bold'; color:#FFF; font-size:1.4vw; line-height:1.8vw; margin-top:2vw; text-align:center;} .home #top-section {background:None !important; height:auto !important} /*---------------------INDOOR PLAYGROUNDS---------------------*/ #menu-indoor-playgrounds-menu {margin:.7vw;} a.homepage-title-link:hover {color:#fff;} #menu-indoor-playgrounds-menu {padding:0;} #menu-indoor-playgrounds-menu .menu-item { -webkit-transition: background-color .4s ease-in-out; -moz-transition: background-color .4s ease-in-out; -o-transition: background-color .4s ease-in-out; transition: background-color .4s ease-in-out; background-color:#ff6600; color:#FFF; height:6.45vw; width:10.3vw; margin:.3vw; display:inline-block; font-size:1.3vw; line-height:1.6vw; text-align:center; border-radius:15px;} #menu-indoor-playgrounds-menu .menu-item a {color:#FFF; text-align:center; font-weight:bold} #menu-indoor-playgrounds-menu .menu-item:hover {background-color:#4d148c;} #menu-indoor-playgrounds-menu .menu-item { display: table; margin:.3vw; margin-bottom:.6vw; float:left; padding:1vw;} #menu-indoor-playgrounds-menu .menu-item a {display: table-cell; vertical-align: middle;} .menu-indoor-playgrounds-menu-container {padding:0; } #menu-indoor-playgrounds-menu .menu-item.current-menu-item {background-color:#4d148c; } #top-section {background-image:url(img/purple-background-white-top.svg); background-position:top center; background-size:100% auto; background-repeat:no-repeat; height:33vw; overflow:hidden;} .page-id-69XX #top-section {height:56vw;} .page-id-8 .inner-photo-caption, .page-id-69 .inner-photo-caption {padding-top:7vw;} .page-id-8 #DesignSelector h2 {color:#ff6600; padding:1vw;} .color-columns {height:20vw; color:#FFF; padding:5vw; padding-top:3vw;} /*---------------------Colors---------------------*/ .numbered-list {font-family: 'VAGRoundedStd-Bold'; font-size:2vw; padding-top:2vw;} .number-item {margin-bottom:.5vw;} #colorCarousel .item {height:25vw; background-size:contain; background-repeat:no-repeat; background-position:center center;} .color-content {margin:1vw 3.5vw; padding-bottom:2vw;} .color-content .color-inner {border:1px solid #adafb2; margin:0 .5vw;} .color-content .col-sm-6 {padding-bottom:3vw;} .color-photo {height:15vw; background-color:#fff; margin-bottom:0; background-size:90% auto; background-position:center center; background-repeat:no-repeat;} .color-content h3 {text-align:center; color:#FFF; font-size:1.8vw; margin-bottom:0; background-color:#adafb2; padding:1vw 0;} /*---------------------THEMES---------------------*/ .page-id-72 .entry-content h2 {padding:1vw; text-align:center; color:#4d148c;} .page-id-72 .entry-content h2.gray {color:#adafb2;} .theme-content {margin:1vw 3.5vw; padding-bottom:2vw;} .theme-content .theme-inner {border:1px solid #adafb2; margin:0 .5vw;} .theme-content .col-sm-4 {padding-bottom:3vw;} .theme-photo {height:15vw; background-color:#fff; margin-bottom:0; background-size:cover; background-position:center center; background-repeat:no-repeat;} .theme-content h3 {text-align:center; color:#FFF; font-size:1.8vw; margin-bottom:0; background-color:#adafb2; padding:1vw 0;} /*---------------------COMPONENTS---------------------*/ .page-id-77 h1 {color:#4d148c; font-size:2.5vw; text-align:center; margin-top:1vw; margin-bottom:0;} .page-id-77 h3 {color:#adafb2; font-size:1.4vw; font-family: 'Roboto', sans-serif; font-weight:bold; text-align:center; margin-top:0;} .component-gallery {padding:1vw 0;} .component-gallery-header a {display:block; padding:1vw; font-family: 'VAGRoundedStd-Bold'; background-color:#adafb2; color:#FFF; text-align:center; font-size:2vw;} .component-gallery-header a.active {background-color:#4d148c;} .component-gallery-thumbnails {padding-top:2vw; text-align:center;} .component-gallery-header {margin-bottom:2vw;} .component-gallery-thumbnails img {width:100%; height:auto;} .component-gallery-thumbnails #component-gallery-1, .component-gallery-thumbnails #component-gallery-2, .component-gallery-thumbnails #component-gallery-3 {display:none;} .component-gallery-box {min-height:22vw;} /*---------------------PARTS---------------------*/ .parts-content {margin:1vw 3.5vw; padding-bottom:2vw;} .parts-content .parts-inner {border:1px solid #adafb2; margin:0 .5vw;} .parts-content .col-sm-3 {padding-bottom:3vw;} .parts-photo {height:17vw; background-color:#adafb2; margin-bottom:.8vw; background-size:cover; background-position:center center;} .parts-content h3 {text-align:center; color:#000; font-size:1.4vw; margin-bottom:.6vw;} /*---------------------Choose Design---------------------*/ .page-id-63 h1 {color:#4d148c; font-size:2.5vw; text-align:center; margin-top:1vw; margin-bottom:1vw;} .page-id-63 h2 {color:#adafb2; font-size:1.4vw; font-family: 'Roboto', sans-serif; font-weight:bold; text-align:center; margin-top:1vw;} #LeftCol {width:33%; height:auto; float:left;} #RightCol {width:65%; height:auto; float:right; border:2px solid #adafb2; padding:1vw; min-height:100%;} #choose-a-design {margin:0 5vw; position:relative; height:auto;} #LeftCol .RoundWhite {border:2px solid #adafb2; padding:1vw; margin-bottom:2vw; font-family: 'VAGRoundedStd-Bold'; font-size:2vw;} .irs-from, .irs-to, .irs-single {background:#4d148c !important;} .irs-from:after, .irs-to:after, .irs-single:after {border-top-color:#4d148c !important;} img.design-thumbs {width:24%; margin-right:1%; margin-bottom:1vw;} /*---------------------ABOUT---------------------*/ header.header-band {padding:.5vw; padding-top:1vw; text-align:center; color:#FFF; font-size:3vw; background-color: #40b93c;} header.header-band h1 {font-size:3vw;} .heading-5 {color:#4d148c; margin-top:10px; font-family: 'Titan One', sans-serif; font-size:30px; line-height:32px;} @media (max-width: 991px) { .heading-5 {font-size:25px; line-height:28px;} } @media (max-width: 479px) { .heading-5 {text-align:center; font-size:20px; line-height:21px;} } .about-content {padding:2vw 3vw;} /* OVERRIDE: Remove padding from about-content ONLY on quienes-somos hero section */ .page-template-page-quienes-somos .container-3.markets-hero .about-content, body.page-quienes-somos .container-3.markets-hero .about-content, body.page-slug-quienes-somos .container-3.markets-hero .about-content { padding: 0 !important; } .purple-about-copy.about-content {padding:0;} .purple-about-copy.about-content strong { color: #FFCE2C; } .purple-about-copy.about-content li { margin-bottom: 10px; } .purple-about-copy.about-content .about-cta-copy, .about-cta-copy, p.about-cta-copy { font-weight: bold; color: #FFCE2C !important; } /* Privacy Policy page - container and smaller headlines */ .page-politica-de-privacidad .contenedor-contenido-principal-internas { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .page-politica-de-privacidad .entry-title { text-align: center; } .page-politica-de-privacidad .entry-content h1, .page-politica-de-privacidad .entry-content h3, .page-politica-de-privacidad .entry-content h4, .page-politica-de-privacidad .entry-content h5, .page-politica-de-privacidad .entry-content h6 { font-size: 0.85em; } .page-politica-de-privacidad .entry-content h1 { font-size: 1em; } .page-politica-de-privacidad .entry-content ul, .page-privacy-policy .entry-content ul { list-style-position: outside; padding-left: 1.2em; margin-left: 0; } .page-politica-de-privacidad .entry-content li p, .page-privacy-policy .entry-content li p { margin: 0; } .page-politica-de-privacidad .entry-content li > [data-start], .page-politica-de-privacidad .entry-content li > [data-end], .page-privacy-policy .entry-content li > [data-start], .page-privacy-policy .entry-content li > [data-end] { display: inline; margin: 0; } .page-politica-de-privacidad .entry-content h2, .page-politica-de-privacidad h2, body.page-politica-de-privacidad h2, .page-politica-de-privacidad .contenedor-contenido-principal-internas h2, .page-terminos-y-condiciones .entry-content h2, .page-terminos-y-condiciones h2, body.page-terminos-y-condiciones h2, .page-terminos-y-condiciones .contenedor-contenido-principal-internas h2 { font-size: 18px !important; line-height: 22px !important; } /* Privacy policy page only */ .page-politica-de-privacidad .entry-content h2, .page-politica-de-privacidad h2, body.page-politica-de-privacidad h2, .page-politica-de-privacidad .contenedor-contenido-principal-internas h2 { font-size: 16px !important; line-height: 20px !important; } .page-politica-de-privacidad .entry-content h2.privacy-policy-h2, body.page-politica-de-privacidad h2.privacy-policy-h2 { font-size: 16px !important; line-height: 20px !important; } .page-terminos-y-condiciones .contenedor-contenido-principal-internas { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .page-terminos-y-condiciones .entry-title { text-align: center; } .page-terminos-y-condiciones .entry-content p, .page-terminos-y-condiciones .entry-content li { line-height: 1.75 !important; } .page-terminos-y-condiciones .entry-content h1, .page-terminos-y-condiciones .entry-content h2, .page-terminos-y-condiciones .entry-content h3, .page-terminos-y-condiciones .entry-content h4, .page-terminos-y-condiciones .entry-content h5, .page-terminos-y-condiciones .entry-content h6 { font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; } .page-terminos-y-condiciones .entry-content h1 *, .page-terminos-y-condiciones .entry-content h2 *, .page-terminos-y-condiciones .entry-content h3 *, .page-terminos-y-condiciones .entry-content h4 *, .page-terminos-y-condiciones .entry-content h5 *, .page-terminos-y-condiciones .entry-content h6 *, .page-terminos-y-condiciones .entry-content p strong, .page-terminos-y-condiciones .entry-content li strong { font-weight: 700 !important; } .photo-right {height:30vw; background-size:cover; background-position:center center; } .logos img {width:10vw; margin:1vw 2vw; vertical-align:middle;} .logos {text-align:center;} /*---------------------NEWS---------------------*/ .full-news {margin:2vw 5vw;} .pagination-station {text-align:center;} .featured-news {margin-bottom:2vw;} .featured-image {background-size:cover; background-position:center center; border:2px solid #4d148c; border-left:0;} .page-id-6 h2 {font-family: 'VAGRoundedStd-Bold'; font-size:2vw; line-height:3vw;} .page-id-6 h2 a {color:#4d148c;} .page-id-6 #content {padding:2vw 5vw;} .featured-content {margin:0; padding:2vw; border:2px solid #4d148c; border-radius:15px; border-radius: 15px 0 0 15px;} .featured-content p {font-size:1.2vw; line-height:1.6vw;} .date-post { font-size:1.2vw; margin-bottom:2vw; } a.read-more {background-color:#ff6600; color:#FFF; border-radius:15px; display:inline-block; margin-top:1vw; padding:1vw 2vw; font-family: 'VAGRoundedStd-Bold'; font-size:1.6vw;} a.read-more:hover {background-color:#000; color:#FFF; } .page-id-6 #footer {display:none;} img.news-featured-image {float:right; width:35%; margin-left:3vw;} .the-news .entry-content img.wp-post-image {float:right; width:30%; margin-left:3vw; margin-bottom:3vw;} .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {border-width:2px; background-color:#adafb2; color:#fff !important; border-color:#fff!important} .pagination > li > a, .pagination > li > span {background-color:#ff6600; color:#FFF !important; border-color:#fff!important; border-width:2px;} .pagination, .pagination li {border-radius:0 !important;} .pagination > li > a, .pagination > li {font-size:2vw; font-family: 'VAGRoundedStd-Bold';} .pagination > li:first-child > a, .pagination > li:first-child > span {border-radius:0 !important; } .pagination > li:last-child > a, .pagination > li:last-child > span {border-radius:0 !important; } .pagination > li:last-child a {padding-right:2vw;} .full-news .featured-image {border-radius: 0 15px 15px 0 ; } /*---------------------NEWS SINGLE---------------------*/ .post-template-default .entry-content {padding:2vw 5vw;} .post-template-default .entry-content img {float:right; width:35%; margin-left:2vw; height:auto;} .post-template-default .entry-footer, .post-template-default .nav-previous, .post-template-default .nav-next {display:none;} .page-id-12167 h1 {text-align:center} .page-id-12167 .entry-content {padding:2vw 5vw;} .page-id-12167 .entry-content p, .page-id-12167 .entry-content li {margin-bottom:1.4vw;} /*---------------------FINANCING---------------------*/ .inner-finance {border:1px solid #adafb2} .financing-box {margin-bottom:30px;} .financing-box .inner-finance {height:18.5vw ; background-color:#FFF; padding:1.5vw; font-family: 'futura-pt-condensed'; text-align:center;} .financing-box.preferred-box .inner-finance {height:14vw ; } .financing-box h2 {font-family: 'futura-pt-condensed'; font-size:1.8vw; font-weight:bold; text-align:center;} .financing-box.preferred-box h2 {font-size:3vw;} .financing-box a {color: #000;} .get-financing {padding:0 ;} .preferred-box .inner-finance {padding-top:.5vw; padding-bottom:1vw} .preferred {height:5vw; background-color:#CC0205; text-align:center; color:#FFF; font-weight:bold;} .popopens {text-align:center; margin-top:3vw; display:none;} a#form-next {background-color:#40b93c; padding: .3vw 1.2vw; font-family: 'VAGRoundedStd-Bold'; color: #FFF; font-size: 15px; border: none; display:inline-block;} a.anchor-jump { display: block; position: relative; top: -10vw; visibility: hidden; } #form-hidden {display:none;} /*---------------------CONTACT---------------------*/ .page-id-49 h2 {color:#40b93c; margin-top:1.4vw; margin-bottom:1.8vw; font-size:3vw; line-height:3.4vw;} .page-id-47 h2 {color:#40b93c; margin-top:1.4vw; margin-bottom:1.8vw; font-size:2vw; line-height:2.4vw;} input[type=submit] {background-color:#40b93c; padding: .3vw 1.2vw; font-family: 'VAGRoundedStd-Bold'; color: #FFF; font-size: 15px; border: none; } .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea, .wpcf7 label, .wpcf7 input[type=tel] {width:100%; max-width:none;} .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {border:2px solid #A4A4A4; padding:.5vw; margin-bottom:1vw;} .page-id-49 .entry-content {padding:0 5vw;} .page-id-49 h4 {color:#4d148c; margin-bottom:2vw; } /*---------------------Interactive---------------------*/ .video-content {margin:1vw 3.5vw; padding-bottom:2vw;} .video-content .video-inner {border:1px solid #adafb2; margin:0 .5vw;} .video-content .col-sm-4 {padding-bottom:3vw;} .video-placeholder {height:15vw; background-color:#adafb2; margin-bottom:.8vw; background-size:cover; background-position:center center;} .video-content h3 {text-align:center; color:#000; font-size:1.8vw; margin-bottom:.6vw;} .page-id-75 .inner-photo-caption {background-color:hsla(118,51%,48%,0.79) !important; margin-top:5vw;} video { object-fit: cover; } /*---------------------Interactive---------------------*/ .page-id-87 .wpcf7 input[type=text], .page-id-87 .wpcf7 input[type=email], .page-id-87 .wpcf7 input[type=tel], .page-id-87 .wpcf7 textarea {border:1px solid #adafb2; padding:.9vw; font-weight:bold;} .page-id-3969 #content {padding:2vw 5vw;} .page-id-3967 #content {padding:2vw 5vw;} /*---------------------INDOOR PLAYGROUND DESIGN CONFIGURATOR PAGE---------------------*/ .page-id-66 h1 {color:#4d148c; font-size:2.5vw; text-align:center; margin-top:1vw; margin-bottom:1vw; font-weight:normal;} .page-id-66 h2 {color:#adafb2; font-size:1.4vw; font-family: 'Roboto', sans-serif; font-weight:bold; text-align:center; margin-top:1vw; font-weight:normal;} .page-id-66 #myCarousel h1 {padding-top:2vw;} .number-box {margin:1vw 20vw; font-family: 'VAGRoundedStd-Bold'; font-size:2vw;} .page-id-66 .item .page-id-66 #content { width: 85%; margin: 0 auto; } .config-head { width: 100%; margin: 2vw auto; } .page-id-66 .carousel-header { width: 90%; margin: 0 auto; display: block; } .page-id-66 .item { height: 620px; border-radius: 0; box-shadow: rgba(0, 0, 0, 0.25) 3px 3px; padding: 10px 50px; margin: 0; } .page-id-66 .carousel-control{ width:10%; } .page-id-66 .item p { font-size: 34px; text-align: center; margin: 20px auto; width: 70%; width: 90%; color: #354d60; } li.active {width: 55px; height: 55px;} .steps { display: block; margin: 10px auto; width: 60%; border-radius: 30px; padding: 0px 25px; font-family: 'VAGRoundedStd-Bold'; color: #fff; font-size: 32px; } .step1{ background-color:#ef5424; } .step2{ background-color:#b91e2d; } .step3{ background-color:#c22690; } .step4{ background-color:#94c73d; } .start-design { background-color: #fff; color: #c22690; border: 10px solid #c22690; border-radius: 10px; font-size: 32px; font-family: 'VAGRoundedStd-Bold'; margin: 30px auto; text-align: center; display: block; padding: 10px 20px; } .carousel-control{ background-image:none !important; display:none; } .item h2 { font-family: 'VAGRoundedStd-Bold'; color: #4d148c; text-align: left; text-shadow: none; font-size: 2vw; padding: 1vw 0; } .item .col-sm-12 h2 { text-align: left; padding: 0; margin: 2vw 0 1vw; } .item h3 {text-align:center; color:#FFF; font-size:4vw; margin-top:2vw;} .form-control {border-radius:0} .item input[type="text"] { width: 100%; display: block; padding: 8px; font-family: 'CircularStd-Bold'; font-size: 18px; color:#000; height:35px; } img.upload-icon { width: 32px; display: inline; margin: 23px 10px; float:right; } .upload-sub { display: inline; text-align: left; font-size: 1.1vw; color: #000; font-family: 'CircularStd-Bold'; text-transform: uppercase; padding: 0; } .upload-head div {padding-top:1vw;} div.upload-icon{ padding-right:0 !important; } .upload-txt{ padding-left:0 !important; line-height: 10px; } .upload-type { font-family: 'CircularStd-Bold'; color: #000; font-size: 28px; text-transform: uppercase; } input[type="file"] { display: block; width: 100%; overflow: hidden; } button.next { background-color: transparent; color: #fff; width:auto; border: 10px solid #fff; border-radius: 10px; font-size: 28px; font-family: 'VAGRoundedStd-Bold'; text-align: center; display: block; padding: 5px 20px; float: right; } .slide-option { border: 10px solid #FFF; width: 70%; max-width: 160px; display: block; margin: 20px auto 5px; } .bridge-option{ border: 10px solid #FFF; width: 90%; display: block; margin: 20px auto 5px; } .item h1 { color: #fff; font-family: 'VAGRoundedStd-Bold'; font-size: 52px; margin: 0; text-align: center; text-shadow: none; } .slide-subhead { display: block; color: #fff; font-size: 14px; text-align: center; } .options-title { display: block; text-align: center; font-size: 1.5vw; font-family: 'VAGRoundedStd-Bold'; line-height: 1.7vw; width: 60%; margin: 0 auto; color: #FFF; height: 80px; } .select-group select { background-color: #354D60; width: 45%; color: #fff; font-family: 'VAGRoundedStd-Bold'; margin: 0 2px; border: 0; } .select-group { width: 70%; margin: 0 auto; } .toddler-option { width: 100%; height: 170px; background-color: #000; border: 10px #fff solid; border-radius: 10px; margin: 20px auto; } .toddler-options-title{ display: block; text-align: center; font-size: 32px; font-family: 'VAGRoundedStd-Bold'; line-height: 32px; width: 100%; margin: 0 auto; color: #354d60; height: 50px; } .button-group input[type="button"] { border: 0 !important; background: #354D60; color: #fff; font-family: 'VAGRoundedStd-Bold'; margin: 5px 3px; } .button-group input[type="button"]:hover{ background: #c22690; } .unique-button-group input[type="button"] { border: 0 !important; background: #354D60; color: #fff; font-family: 'VAGRoundedStd-Bold'; margin: 15px 10px; font-size: 26px; text-align: center; } .unique-button-group input[type="button"]:hover{ background: #a2d0d7; } .services-button-group input[type="button"] { border: 0 !important; background: #fff; color: #354D60; font-family: 'VAGRoundedStd-Bold'; margin: 5px 3px; } h1.subh1 { font-size: 40px; margin-top:50px; } .button-group, .unique-button-group{ text-align:center; } .services-button-group { width: 40%; margin: 10px auto; text-align:center; } .carousel-indicators{ position:relative; margin-top: 60px; } .carousel-indicators li, .carousel-indicators li.active { width: 35px; height: 35px; border-radius: 35px; margin: 0 10px; border: none; } .carousel-indicators li.active { box-shadow: 1px 2px rgba(0, 0, 0, 0.25); width: 45px; height: 45px; } .carousel-indicators li:hover { box-shadow: 1px 2px rgba(0, 0, 0, 0.25); } .toddler-button-group { list-style-type:none; padding:0; text-align:center; } .toddler-button-group li { margin:0; height:40px; position:relative; display: inline-block; } .toddler-button-group label, .toddler-button-group input { display:block; position:absolute; top:0; left:0; right:0; bottom:0; } .toddler-button-group input[type="checkbox"] { opacity:0.011; z-index:100; } .toddler-button-group input[type="checkbox"]:checked + label { background:#C22690; } .toddler-button-group label { background-color:#354D60; color:#fff; padding:5px; line-height:20px; font-size:16px; cursor:pointer; font-weight:normal; z-index:90; border: 0 !important; font-family: 'VAGRoundedStd-Bold'; margin: 5px 3px; } .toddler-button-group label:hover { background-color:#C22690; } .toddler-button-group li.sm{ width:80px; } .toddler-button-group li.md{ width:130px; } .toddler-button-group li.lg{ width:150px; } .toddler-button-group li.xl{ width:200px; } #indoor-playground-theming-design h1, #indoor-playground-theming-design h2 { font-family: 'VAGRoundedStd-Bold'; } #speech-bubble { font-family: 'VAGRoundedStd-Bold'; } .unique-button-group { list-style-type:none; padding:0; text-align:center; } .unique-button-group li { margin:0; height:55px; position:relative; display: inline-block; } .unique-button-group label, .unique-button-group input { display:block; position:absolute; top:0; left:0; right:0; bottom:0; } .unique-button-group input[type="checkbox"] { opacity:0.011; z-index:100; } .unique-button-group input[type="checkbox"]:checked + label { background:#A2D0D7; } .unique-button-group label { background-color:#354D60; color:#fff; padding:5px; cursor:pointer; z-index:90; border: 0 !important; font-family: 'VAGRoundedStd-Bold'; margin: 5px 3px; font-size: 26px; } .unique-button-group label:hover { background-color:#A2D0D7; } .unique-button-group li.sm{ width:160px; } .unique-button-group li.md{ width:260px; } .unique-button-group li.lg{ width:320px; } .services-button-group { list-style-type:none; padding:0; text-align:center; } .services-button-group li { margin:0; height:40px; position:relative; display: inline-block; } .services-button-group label, .services-button-group input { display:block; position:absolute; top:0; left:0; right:0; bottom:0; } .services-button-group input[type="checkbox"] { opacity:0.011; z-index:100; } .services-button-group input[type="checkbox"]:checked + label { background:#A2D0D7; } .services-button-group label { padding:8px; cursor:pointer; z-index:90; border: 0 !important; background: #fff; color: #ff6600; font-family: 'VAGRoundedStd-Bold'; margin: 5px 3px; } .services-button-group label:hover { background-color:#A2D0D7; } .services-button-group li.sm{ width:70px; } .services-button-group li.md{ width:140px; } .services-button-group li.lg{ width:160px; } .bridges-button-group { list-style-type:none; padding:0; text-align:center; } .bridges-button-group li { margin:0; height:55px; position:relative; display: inline-block; width:100% } .bridges-button-group label, .bridges-button-group input { display:block; position:absolute; top:0; left:0; right:0; bottom:0; } .bridges-button-group input[type="checkbox"] { opacity:0.011; z-index:100; } .bridges-button-group input[type="checkbox"]:checked + label { background:#C22690; color:#fff; } .bridges-button-group label { color:#354D60; padding:5px; cursor:pointer; z-index:90; border: 0 !important; font-family: 'VAGRoundedStd-Bold'; margin: 5px 3px; font-size: 30px; line-height: 36px; } .bridges-button-group label:hover { background-color:#C22690; color:#fff; } .bridges-button-group li.sm{ height:55px; } .bridges-button-group li.lg{ height:95px; } span.slide-submit { background-color: #fff; color: #354D60; border: 10px solid #ff6600; border-radius: 10px; font-size: 32px; font-family: 'VAGRoundedStd-Bold'; margin: -200px 0px; text-align: center; float: right; padding: 0 20px; } .unique-img{ margin:20px auto; } .page-id-66 a.next { position: absolute; bottom: 1vw; right: 5vw; width: 2vw; cursor: pointer; font-family: 'VAGRoundedStd-Bold'; font-size:2.5vw; color:#FFF; } .page-id-66 #cycler { position: relative; width: 100%; height: 21vw; overflow: hidden; margin-bottom: 1vw; } /* SHOP */ .up-sells {clear:both; text-align:center;} .woocommerce .up-sells .products.columns-4 {width:100% !important} .woocommerce .modal-dialog {max-width: 50%; height: 1014.6px; width: 50%; margin-top: 54.7px; margin-bottom: 54.7px; } a.anchor-jump { display: block; position: relative; top: -12vw; visibility: hidden; } .woocommerce-Tabs-panel {display:none;} .searchandfilter ul, .post-type-archive-product .searchandfilter ul {width: 20% !important; display: inline-block !important; vertical-align: top; padding:0 2vw} .post-type-archive-product .searchandfilter > ul, .tax-product_cat .searchandfilter > ul, .tax-product_tag .searchandfilter > ul , .page-id-5686 .searchandfilter > ul {width: 20% !important; display: inline-block !important; vertical-align: top; } .term-foam-pipe-and-zip-ties .searchandfilter > ul {display:none !important;} .term-foam-pipe-and-zip-ties .products.columns-4 { width: 100% !important;} .product_meta {margin-top:2vw;} p.woocommerce-result-count {display:none !important;} .searchandfilter ul li {padding:0 !important} .searchandfilter input[type=submit] {margin-top:20px;} body.woocommerce .entry-content form {display: none !important;} .woocommerce ul.products li.product .button {display: none !important;} .woocommerce .related.products .products.columns-4 {width:100% !important;} .woocommerce .products.columns-4, .page-id-5686 .columns-4 {width: 77% !important; vertical-align: top; display: inline-block !important;} /* Override for container-products - force full width - ONLY in mobile/tablet */ @media (max-width: 991px) { .container-products .woocommerce .products.columns-4, .w-layout-blockcontainer.container-products .woocommerce .products.columns-4, .container-products .products.columns-4, .w-layout-blockcontainer.container-products .products.columns-4, body .container-products .woocommerce .products.columns-4, body .w-layout-blockcontainer.container-products .woocommerce .products.columns-4, html body .container-products .woocommerce .products.columns-4, html body .w-layout-blockcontainer.container-products .woocommerce .products.columns-4 { width: 100% !important; max-width: 100% !important; min-width: 100% !important; display: grid !important; box-sizing: border-box !important; } } /* Force full width for products.columns-4 in mobile and tablet - MUST override inline-block */ @media (max-width: 991px) { .products.columns-4, .woocommerce .products.columns-4, ul.products.columns-4, body .products.columns-4, body .woocommerce .products.columns-4, body .container-products .products.columns-4, body .container-products .woocommerce .products.columns-4, body .w-layout-blockcontainer.container-products .products.columns-4, body .w-layout-blockcontainer.container-products .woocommerce .products.columns-4, html body .woocommerce .products.columns-4, html body .container-products .woocommerce .products.columns-4, html body .w-layout-blockcontainer.container-products .woocommerce .products.columns-4 { width: 100% !important; max-width: 100% !important; min-width: 100% !important; display: grid !important; vertical-align: top !important; box-sizing: border-box !important; } } .page-id-32485 .products.columns-4, .page-id-8 .products.columns-4 {width: 100% !important; } .single-attractions .products.columns-4, .home .products.columns-4 {width:100% !important; } /* Ensure container-products in desktop behaves like before - allow WooCommerce default */ @media (min-width: 992px) { /* Don't override the 77% width rule in desktop for container-products */ .container-products .woocommerce .products.columns-4, .w-layout-blockcontainer.container-products .woocommerce .products.columns-4, .container-products .products.columns-4, .w-layout-blockcontainer.container-products .products.columns-4 { width: auto !important; max-width: none !important; display: inline-block !important; } /* Ensure li.product in desktop use WooCommerce default widths */ .container-products .products.columns-4 li.product, .container-products .woocommerce .products.columns-4 li.product, .w-layout-blockcontainer.container-products .products.columns-4 li.product, .w-layout-blockcontainer.container-products .woocommerce .products.columns-4 li.product { width: auto !important; max-width: none !important; min-width: auto !important; margin-left: auto !important; margin-right: auto !important; flex-basis: auto !important; } } /* ============================================ MOBILE NAVBAR FIX - SOLUCIÓN DEFINITIVA ============================================ PROBLEMA IDENTIFICADO: ---------------------- El panel del menú desplegable (.w-nav-menu) está dentro del MISMO flex container del header y participa en el cálculo de justify-content: space-between, empujando logo y botón hamburguesa hacia adentro. ESTRUCTURA HTML: ----------------
<-- WRAPPER FLEX ... <-- Logo <-- PANEL MENÚ (PROBLEMA)
...
<-- Botón hamburguesa
ELEMENTOS DEL MENÚ DESPLEGABLE (SELECTORES EXACTOS): ---------------------------------------------------- - .nav-menu.w-nav-menu (el menú mismo - CULPABLE) - .w-nav-overlay (overlay que contiene el menú cuando está abierto) - [data-nav-menu-open] (atributo cuando el menú está abierto) SOLUCIÓN APLICADA: ------------------ 1. Menú cerrado: display:none + position:fixed + sacarlo del flex (flex: 0 0 auto) 2. Menú abierto: position:fixed con top:64px para que no afecte el layout del header 3. Overlay: position:fixed para que también esté fuera del flujo 4. Header wrapper: gap:0 + solo logo y botón participan en el flex RESULTADO: ---------- En móvil, logo y botón quedan pegados al padding del container. Al abrir el menú, el header NO se mueve (el menú está en position:fixed). ============================================ */ /* ============================================ TABLET + MOBILE NAVBAR FIX (<=991px) ============================================ */ /* WRAPPER REAL DEL NAVBAR: .navbar.w-nav */ @media (max-width: 991px) { /* 1. Navbar wrapper - position relative para que el menú se posicione debajo */ #header .navbar.w-nav, header .navbar.w-nav, .navbar.w-nav { position: relative !important; z-index: 1000 !important; } /* 2. Alinear header en tablet: logo izq + botón der */ /* El wrapper flex real es .container.w-container */ #header .navbar.w-nav .container.w-container, #header .navbar.w-nav .w-container, #header .navbar.w-nav .container, header .navbar.w-nav .container.w-container, header .navbar.w-nav .w-container, header .navbar.w-nav .container, .navbar.w-nav .container.w-container, .navbar.w-nav .w-container, .navbar.w-nav .container { display: flex !important; align-items: center !important; width: 100% !important; gap: 0 !important; padding-left: 15px !important; padding-right: 15px !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; box-sizing: border-box !important; /* Neutralizar cualquier centrado */ justify-content: flex-start !important; text-align: left !important; } /* 3. Logo - pegado a la izquierda */ #header .navbar.w-nav .container.w-container .brand, #header .navbar.w-nav .container.w-container .w-nav-brand, #header .navbar.w-nav .container .brand, #header .navbar.w-nav .container .w-nav-brand, #header .navbar.w-nav .brand, #header .navbar.w-nav .w-nav-brand, header .navbar.w-nav .container.w-container .brand, header .navbar.w-nav .container.w-container .w-nav-brand, header .navbar.w-nav .container .brand, header .navbar.w-nav .container .w-nav-brand, header .navbar.w-nav .brand, header .navbar.w-nav .w-nav-brand, .navbar.w-nav .container.w-container .brand, .navbar.w-nav .container.w-container .w-nav-brand, .navbar.w-nav .container .brand, .navbar.w-nav .container .w-nav-brand, .navbar.w-nav .brand, .navbar.w-nav .w-nav-brand { flex: 0 0 auto !important; margin-left: 0 !important; margin-right: auto !important; } /* 4. Botón hamburguesa - pegado a la derecha (margin-left: auto fuerza al extremo) */ #header .navbar.w-nav .container.w-container .menu-button, #header .navbar.w-nav .container.w-container .w-nav-button, #header .navbar.w-nav .container .menu-button, #header .navbar.w-nav .container .w-nav-button, #header .navbar.w-nav .menu-button, #header .navbar.w-nav .w-nav-button, header .navbar.w-nav .container.w-container .menu-button, header .navbar.w-nav .container.w-container .w-nav-button, header .navbar.w-nav .container .menu-button, header .navbar.w-nav .container .w-nav-button, header .navbar.w-nav .menu-button, header .navbar.w-nav .w-nav-button, .navbar.w-nav .container.w-container .menu-button, .navbar.w-nav .container.w-container .w-nav-button, .navbar.w-nav .container .menu-button, .navbar.w-nav .container .w-nav-button, .navbar.w-nav .menu-button, .navbar.w-nav .w-nav-button { flex: 0 0 auto !important; margin-left: auto !important; /* Fuerza al extremo derecho */ margin-right: 0 !important; } /* 5. Menú desplegable - Position absolute debajo del navbar (top: 100%) */ /* DEJAR QUE WEBFLOW MANEJE EL DISPLAY - Solo ajustar posición */ #header .navbar.w-nav .w-nav-menu, header .navbar.w-nav .w-nav-menu, .navbar.w-nav .w-nav-menu { position: absolute !important; top: 100% !important; /* CLAVE: debajo de la barra */ left: 0 !important; right: 0 !important; width: 100% !important; z-index: 2000 !important; pointer-events: auto !important; /* NO forzar display - dejar que Webflow lo maneje */ } /* 5-extra. TABLET: Menú ABIERTO - Ajustar posición para que coincida con el margen del container */ #header .navbar.w-nav .w-nav-menu.w--open, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .w-nav-menu.w--open, header .navbar.w-nav .w-nav-menu[data-nav-menu-open], .navbar.w-nav .w-nav-menu.w--open, .navbar.w-nav .w-nav-menu[data-nav-menu-open] { left: 15px !important; /* Mismo margen que el container (padding-left) */ right: 15px !important; /* Mismo margen que el container (padding-right) */ width: auto !important; /* Para que respete left y right */ padding-top: 25px !important; /* Espacio entre el logo y el menú */ padding-left: 0 !important; /* Sin padding adicional */ padding-right: 0 !important; /* Sin padding adicional */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* 6. Overlay del menú - también debajo del navbar */ #header .navbar.w-nav .w-nav-overlay, header .navbar.w-nav .w-nav-overlay, .navbar.w-nav .w-nav-overlay { position: absolute !important; top: 100% !important; /* CLAVE: debajo de la barra */ left: 0 !important; right: 0 !important; width: 100% !important; z-index: 2000 !important; pointer-events: auto !important; /* NO forzar display - dejar que Webflow lo maneje */ } /* 7. Botón hamburguesa - asegurar que sea clickeable (z-index alto) */ #header .navbar.w-nav .w-nav-button, header .navbar.w-nav .w-nav-button, .navbar.w-nav .w-nav-button { position: relative !important; z-index: 9999 !important; /* Por encima de todo para asegurar clickeabilidad */ pointer-events: auto !important; cursor: pointer !important; } /* Asegurar que ningún overlay esté por encima del botón cuando está cerrado */ #header .navbar.w-nav .w-nav-overlay:not(.w--open), header .navbar.w-nav .w-nav-overlay:not(.w--open), .navbar.w-nav .w-nav-overlay:not(.w--open) { z-index: 2000 !important; /* Por debajo del botón (9999) */ } /* TABLET: MENÚ ABIERTO - Forzar layout vertical para todos los elementos del menú */ /* Cuando el menú está abierto (.w--open o [data-nav-menu-open]), los links deben ser verticales */ #header .navbar.w-nav .w-nav-menu.w--open, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .w-nav-menu.w--open, header .navbar.w-nav .w-nav-menu[data-nav-menu-open], .navbar.w-nav .w-nav-menu.w--open, .navbar.w-nav .w-nav-menu[data-nav-menu-open] { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } /* Links del menú - verticales cuando el menú está abierto (TABLET) */ #header .navbar.w-nav .w-nav-menu.w--open .w-nav-link, #header .navbar.w-nav .w-nav-menu.w--open .nav-link, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-nav-link, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .nav-link, header .navbar.w-nav .w-nav-menu.w--open .w-nav-link, header .navbar.w-nav .w-nav-menu.w--open .nav-link, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-nav-link, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .nav-link, .navbar.w-nav .w-nav-menu.w--open .w-nav-link, .navbar.w-nav .w-nav-menu.w--open .nav-link, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-nav-link, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .nav-link { display: block !important; width: 100% !important; text-align: center !important; padding: 15px 20px !important; margin: 0 !important; float: none !important; clear: both !important; } /* Dropdowns del menú - verticales cuando el menú está abierto (TABLET) */ #header .navbar.w-nav .w-nav-menu.w--open .w-dropdown, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown, header .navbar.w-nav .w-nav-menu.w--open .w-dropdown, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown, .navbar.w-nav .w-nav-menu.w--open .w-dropdown, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown { display: block !important; width: 100% !important; margin: 0 !important; float: none !important; clear: both !important; } /* Dropdown toggles - verticales cuando el menú está abierto (TABLET) */ #header .navbar.w-nav .w-nav-menu.w--open .w-dropdown-toggle, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle, header .navbar.w-nav .w-nav-menu.w--open .w-dropdown-toggle, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle, .navbar.w-nav .w-nav-menu.w--open .w-dropdown-toggle, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle { display: block !important; width: 100% !important; text-align: center !important; padding: 15px 20px !important; margin: 0 !important; float: none !important; clear: both !important; } } /* ============================================ MOBILE NAVBAR FIX (767px y menos) ============================================ */ @media (max-width: 767px) { /* 1. Navbar principal - sin padding lateral */ #header .navbar.w-nav, header .navbar.w-nav, .navbar.w-nav { padding-left: 0 !important; padding-right: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; margin: 0 !important; position: relative !important; /* Para que el menú se posicione debajo */ z-index: 1000 !important; } /* 2. WRAPPER PRINCIPAL: .container.w-container - Forzar flexbox limpio */ /* Este es el wrapper flex que debe contener SOLO logo y botón en el flujo */ #header .navbar.w-nav .container.w-container, #header .navbar.w-nav .w-container, #header .navbar.w-nav .container, header .navbar.w-nav .container.w-container, header .navbar.w-nav .w-container, header .navbar.w-nav .container, .navbar.w-nav .container.w-container, .navbar.w-nav .w-container, .navbar.w-nav .container { /* Layout flexbox forzado - SOLO logo y botón participan */ display: flex !important; align-items: center !important; width: 100% !important; gap: 0 !important; /* Padding interno (el "padding verde") */ padding-left: 15px !important; padding-right: 15px !important; /* Sin margin/padding extra */ margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; box-sizing: border-box !important; /* Asegurar que no hay interferencia */ position: relative !important; overflow: visible !important; /* Neutralizar cualquier centrado */ justify-content: flex-start !important; text-align: left !important; } /* 3. ELIMINAR PSEUDO-ELEMENTOS que puedan ocupar espacio */ #header .navbar.w-nav .container.w-container::before, #header .navbar.w-nav .container.w-container::after, #header .navbar.w-nav .w-container::before, #header .navbar.w-nav .w-container::after, header .navbar.w-nav .container.w-container::before, header .navbar.w-nav .container.w-container::after, header .navbar.w-nav .w-container::before, header .navbar.w-nav .w-container::after, .navbar.w-nav .container.w-container::before, .navbar.w-nav .container.w-container::after, .navbar.w-nav .w-container::before, .navbar.w-nav .w-container::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* 4. PANEL DEL MENÚ DESPLEGABLE - Sacarlo del flujo flex, pero DEJAR QUE WEBFLOW MANEJE EL DISPLAY */ /* Selectores exactos: .nav-menu, .w-nav-menu, .w-nav-overlay */ /* REGLA QUE ROMPÍA EL TOGGLE: display: none !important y display: block !important bloqueaban el JS de Webflow */ /* 4a. Menú - Solo ajustar posición, NO forzar display */ #header .navbar.w-nav .w-nav-menu, #header .navbar.w-nav .container.w-container .w-nav-menu, #header .navbar.w-nav .container .w-nav-menu, header .navbar.w-nav .w-nav-menu, header .navbar.w-nav .container.w-container .w-nav-menu, header .navbar.w-nav .container .w-nav-menu, .navbar.w-nav .w-nav-menu, .navbar.w-nav .container.w-container .w-nav-menu, .navbar.w-nav .container .w-nav-menu { position: absolute !important; top: 100% !important; /* CLAVE: debajo de la barra */ left: 0 !important; right: 0 !important; width: 100% !important; z-index: 2000 !important; pointer-events: auto !important; /* NO forzar display, height, visibility, overflow - dejar que Webflow lo maneje */ /* Solo sacarlo del flujo flex */ flex: 0 0 auto !important; float: none !important; } /* 4a-extra. Menú ABIERTO - Ajustar posición para que coincida con el margen del container */ #header .navbar.w-nav .w-nav-menu.w--open, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open], #header .navbar.w-nav .container.w-container .w-nav-menu.w--open, #header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .w-nav-menu.w--open, header .navbar.w-nav .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .container.w-container .w-nav-menu.w--open, header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open], .navbar.w-nav .w-nav-menu.w--open, .navbar.w-nav .w-nav-menu[data-nav-menu-open], .navbar.w-nav .container.w-container .w-nav-menu.w--open, .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] { left: 15px !important; /* Mismo margen que el container (padding-left) */ right: 15px !important; /* Mismo margen que el container (padding-right) */ width: auto !important; /* Para que respete left y right */ padding-top: 25px !important; /* Espacio entre el logo y el menú */ padding-left: 0 !important; /* Sin padding adicional */ padding-right: 0 !important; /* Sin padding adicional */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* 4a-extra. Menú ABIERTO - Asegurar padding simétrico a ambos lados (igual que logo y botón) */ #header .navbar.w-nav .w-nav-menu.w--open, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open], #header .navbar.w-nav .container.w-container .w-nav-menu.w--open, #header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .w-nav-menu.w--open, header .navbar.w-nav .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .container.w-container .w-nav-menu.w--open, header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open], .navbar.w-nav .w-nav-menu.w--open, .navbar.w-nav .w-nav-menu[data-nav-menu-open], .navbar.w-nav .container.w-container .w-nav-menu.w--open, .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] { padding-left: 15px !important; /* EXACTAMENTE el mismo padding que el container (logo y botón) */ padding-right: 15px !important; /* EXACTAMENTE el mismo padding que el container (logo y botón) */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* 4b. Overlay del menú - También debajo del navbar */ #header .navbar.w-nav .w-nav-overlay, #header .navbar.w-nav .container.w-container .w-nav-overlay, header .navbar.w-nav .w-nav-overlay, header .navbar.w-nav .container.w-container .w-nav-overlay, .navbar.w-nav .w-nav-overlay, .navbar.w-nav .container.w-container .w-nav-overlay { position: absolute !important; top: 100% !important; /* CLAVE: debajo de la barra */ left: 0 !important; right: 0 !important; width: 100% !important; z-index: 2000 !important; pointer-events: auto !important; /* NO forzar display - dejar que Webflow lo maneje */ } /* 4c. Botón hamburguesa - Asegurar que sea clickeable (z-index alto) */ #header .navbar.w-nav .w-nav-button, #header .navbar.w-nav .container.w-container .w-nav-button, #header .navbar.w-nav .container .w-nav-button, header .navbar.w-nav .w-nav-button, header .navbar.w-nav .container.w-container .w-nav-button, header .navbar.w-nav .container .w-nav-button, .navbar.w-nav .w-nav-button, .navbar.w-nav .container.w-container .w-nav-button, .navbar.w-nav .container .w-nav-button { position: relative !important; z-index: 9999 !important; /* Por encima de todo para asegurar clickeabilidad */ pointer-events: auto !important; cursor: pointer !important; } /* Asegurar que ningún overlay esté por encima del botón cuando está cerrado */ #header .navbar.w-nav .w-nav-overlay:not(.w--open), #header .navbar.w-nav .container.w-container .w-nav-overlay:not(.w--open), header .navbar.w-nav .w-nav-overlay:not(.w--open), header .navbar.w-nav .container.w-container .w-nav-overlay:not(.w--open), .navbar.w-nav .w-nav-overlay:not(.w--open), .navbar.w-nav .container.w-container .w-nav-overlay:not(.w--open) { z-index: 2000 !important; /* Por debajo del botón (9999) */ } /* 4d. MENÚ ABIERTO - Forzar layout vertical para todos los elementos del menú */ /* Cuando el menú está abierto (.w--open o [data-nav-menu-open]), los links deben ser verticales */ #header .navbar.w-nav .w-nav-menu.w--open, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open], #header .navbar.w-nav .container.w-container .w-nav-menu.w--open, #header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .w-nav-menu.w--open, header .navbar.w-nav .w-nav-menu[data-nav-menu-open], header .navbar.w-nav .container.w-container .w-nav-menu.w--open, header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open], .navbar.w-nav .w-nav-menu.w--open, .navbar.w-nav .w-nav-menu[data-nav-menu-open], .navbar.w-nav .container.w-container .w-nav-menu.w--open, .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } /* Links del menú - verticales cuando el menú está abierto */ #header .navbar.w-nav .w-nav-menu.w--open .w-nav-link, #header .navbar.w-nav .w-nav-menu.w--open .nav-link, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-nav-link, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .nav-link, #header .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-nav-link, #header .navbar.w-nav .container.w-container .w-nav-menu.w--open .nav-link, #header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-nav-link, #header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .nav-link, header .navbar.w-nav .w-nav-menu.w--open .w-nav-link, header .navbar.w-nav .w-nav-menu.w--open .nav-link, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-nav-link, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .nav-link, header .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-nav-link, header .navbar.w-nav .container.w-container .w-nav-menu.w--open .nav-link, header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-nav-link, header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .nav-link, .navbar.w-nav .w-nav-menu.w--open .w-nav-link, .navbar.w-nav .w-nav-menu.w--open .nav-link, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-nav-link, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .nav-link, .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-nav-link, .navbar.w-nav .container.w-container .w-nav-menu.w--open .nav-link, .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-nav-link, .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .nav-link { display: block !important; width: 100% !important; text-align: center !important; padding: 15px 20px !important; margin: 0 !important; float: none !important; clear: both !important; } /* Dropdowns del menú - verticales cuando el menú está abierto */ #header .navbar.w-nav .w-nav-menu.w--open .w-dropdown, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown, #header .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-dropdown, #header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-dropdown, header .navbar.w-nav .w-nav-menu.w--open .w-dropdown, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown, header .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-dropdown, header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-dropdown, .navbar.w-nav .w-nav-menu.w--open .w-dropdown, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown, .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-dropdown, .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-dropdown { display: block !important; width: 100% !important; margin: 0 !important; float: none !important; clear: both !important; } /* Dropdown toggles - verticales cuando el menú está abierto */ #header .navbar.w-nav .w-nav-menu.w--open .w-dropdown-toggle, #header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle, #header .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-dropdown-toggle, #header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle, header .navbar.w-nav .w-nav-menu.w--open .w-dropdown-toggle, header .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle, header .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-dropdown-toggle, header .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle, .navbar.w-nav .w-nav-menu.w--open .w-dropdown-toggle, .navbar.w-nav .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle, .navbar.w-nav .container.w-container .w-nav-menu.w--open .w-dropdown-toggle, .navbar.w-nav .container.w-container .w-nav-menu[data-nav-menu-open] .w-dropdown-toggle { display: block !important; width: 100% !important; text-align: center !important; padding: 15px 20px !important; margin: 0 !important; float: none !important; clear: both !important; } /* 5. Logo - pegado al padding izquierdo */ #header .navbar.w-nav .container.w-container .brand, #header .navbar.w-nav .container.w-container .w-nav-brand, #header .navbar.w-nav .container .brand, #header .navbar.w-nav .container .w-nav-brand, #header .navbar.w-nav .brand, #header .navbar.w-nav .w-nav-brand, header .navbar.w-nav .container.w-container .brand, header .navbar.w-nav .container.w-container .w-nav-brand, header .navbar.w-nav .container .brand, header .navbar.w-nav .container .w-nav-brand, header .navbar.w-nav .brand, header .navbar.w-nav .w-nav-brand, .navbar.w-nav .container.w-container .brand, .navbar.w-nav .container.w-container .w-nav-brand, .navbar.w-nav .container .brand, .navbar.w-nav .container .w-nav-brand, .navbar.w-nav .brand, .navbar.w-nav .w-nav-brand { margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; margin-left: 0 !important; margin-right: auto !important; float: none !important; position: relative !important; } /* 6. Botón hamburguesa - pegado al padding derecho (margin-left: auto fuerza al extremo) */ #header .navbar.w-nav .container.w-container .menu-button, #header .navbar.w-nav .container.w-container .w-nav-button, #header .navbar.w-nav .container .menu-button, #header .navbar.w-nav .container .w-nav-button, #header .navbar.w-nav .menu-button, #header .navbar.w-nav .w-nav-button, header .navbar.w-nav .container.w-container .menu-button, header .navbar.w-nav .container.w-container .w-nav-button, header .navbar.w-nav .container .menu-button, header .navbar.w-nav .container .w-nav-button, header .navbar.w-nav .menu-button, header .navbar.w-nav .w-nav-button, .navbar.w-nav .container.w-container .menu-button, .navbar.w-nav .container.w-container .w-nav-button, .navbar.w-nav .container .menu-button, .navbar.w-nav .container .w-nav-button, .navbar.w-nav .menu-button, .navbar.w-nav .w-nav-button { margin: 0 !important; padding: 10px !important; flex: 0 0 auto !important; margin-left: auto !important; /* Fuerza al extremo derecho */ margin-right: 0 !important; float: none !important; position: relative !important; } /* 7. Eliminar cualquier spacer/wrapper adicional que pueda existir */ #header .navbar.w-nav .container.w-container .w-col, #header .navbar.w-nav .container.w-container .w-layout-cell, #header .navbar.w-nav .container.w-container .w-layout-layout, header .navbar.w-nav .container.w-container .w-col, header .navbar.w-nav .container.w-container .w-layout-cell, header .navbar.w-nav .container.w-container .w-layout-layout, .navbar.w-nav .container.w-container .w-col, .navbar.w-nav .container.w-container .w-layout-cell, .navbar.w-nav .container.w-container .w-layout-layout { display: none !important; width: 0 !important; padding: 0 !important; margin: 0 !important; flex: 0 0 0 !important; } } body.woocommerce form, .woocommerce-notices-wrapper, .page-id-5686 form {display:inline !important;} body.woocommerce form.woocommerce-ordering {display:none !important;} .post-type-archive-product #content, .tax-product_cat #content , .tax-product_tag #content{padding:2vw 5vw;} body.woocommerce .entry-content, body.woocommerce .product, .page-id-5686 .entry-content { margin: 1vw 3.5vw; padding-bottom: 2vw; } body.woocommerce .entry-content form {display:inline;} .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color: #E40000 !important; color: #fff } body.single-product .woocommerce button.single_add_to_cart_button.button.alt, body.single-product .woocommerce .single_add_to_cart_button.button.alt, body.single-product .woocommerce button[name="add-to-cart"] { background-color: #FF6600 !important; color: #fff !important; } .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background-color: #FF0000 !important; color: #fff } body.single-product .woocommerce button.single_add_to_cart_button.button.alt:hover, body.single-product .woocommerce .single_add_to_cart_button.button.alt:hover, body.single-product .woocommerce button[name="add-to-cart"]:hover { background-color: #FF6600 !important; color: #fff !important; } .product_meta span:not(.sku) {display:block; padding:.4vw; padding-left:0;} li.sf-item-705 {display:none !important;} .woocommerce-breadcrumb {display:none;} .page-id-5686 a.button.product_type_external, .page-id-5686 .onsale, .post-type-archive-product a.button.product_type_external, .post-type-archive-product .onsale {display:none !important;} span.onsale {display:none!important;} body.woocommerce:not(.single-product) h1, .shop-headline, .page-id-5686 h1 {background-color:#40b93c; font-family: 'VAGRoundedStd-Bold'; padding: .5vw; padding-top: 1vw; text-align: center; color: #FFF; font-size: 2.7vw; line-height: 4vw; } .woocommerce-products-header__title.page-title{ background:none !important; background-color:transparent !important; margin-bottom:30px !important; } section.related.products {clear:both;} section.related h2 {text-align:center;} body.single-product section.related.products h2 { font-size: 28px; line-height: 1.2; margin-bottom: 18px; } body.single-product .related .woocommerce ul.products li.product .woocommerce-loop-product__title, body.single-product .related .woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title, body.single-product .related .products li.product .woocommerce-loop-product__title { font-family: 'Roboto', Arial, sans-serif !important; font-weight: 700; font-size: 16px !important; line-height: 1.2 !important; text-align: left !important; width: 100%; } @media (min-width: 992px) { body.single-product .related .woocommerce ul.products li.product .woocommerce-loop-product__title, body.single-product .related .woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title, body.single-product .related .products li.product .woocommerce-loop-product__title { font-size: 18px !important; line-height: 1.25 !important; } } .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {font-size:1.3vw !important; line-height:1.2 !important;} .woocommerce-pagination{ margin-top:35px; } .woocommerce-pagination .page-numbers{ border:none !important; box-shadow:none !important; text-decoration:none !important; background:none !important; outline:none !important; font-size:16px; } .woocommerce-pagination li{ border-right:none !important; } .woocommerce-pagination .page-numbers.current{ border-radius:3px; margin-left:5px; margin-right:5px; background-color:#4D148C !important; color:#fff !important; } .woocommerce-pagination .page-numbers.current:hover, .woocommerce-pagination .page-numbers.current:focus{ background-color:#4D148C !important; color:#fff !important; } /* Global WooCommerce product title line-height */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title, .container-products .product .woocommerce-loop-product__title { line-height: 20px !important; } /* ATTRACTIONS */ .post-type-archive-gallery .col-full, .single-attractions .col-full { width:100%; max-width:100%;} .post-type-archive-gallery #content.site-content, .single-attractions #content.site-content {text-align:center; min-height:calc(100vh - 125px); padding-top:3vw; background-image:url(img/gallery-bg.jpg); background-size:cover; background-position:center center} .post-type-archive-gallery #content {padding:2vw 8vw; padding-top:16vh; background-image:url(img/Sorrentos-19-dk.jpg); background-size:cover; background-position:center center; min-height:79vh; } .post-type-archive-gallery #content .gallery-item {background-color:#FFF; border:20px solid #FFF; box-shadow:.5vw 0 3vw #000; } .single-attractions #content.site-content {background-size:100% auto; background-position:top center;} #caption {width:100%; font-size:2.3vw; line-height:2.3vw; float:left; color: #000; padding: .5vw; text-align:center; font-family: 'BrushScriptMT'; padding-bottom:0;} .woocommerce span.onsale {background-color:#40b93c !important} .photos-header { display: block; width: 100%; color: #000; background-color: #000; text-align: center; font-size: 2vw; text-transform: uppercase; padding: 1.5vw 0; font-weight: 700; } .single-attractions h3.orange {color:#000 !important; text-align:center; margin:2vw 0; } .single-attractions {background-color:#FFF;} #content-photos {padding:0; background-color:#FFF; margin:0 0; margin-bottom:2vw;} #content-photos h2 {font-size:2vw; margin-bottom:1vw;} .photo-caption {position:absolute; top:38%; width:100%; text-align:center; font-size:2vw; line-height:2.7vw; font-weight:normal; } .grid-item a .photo-caption {opacity:0;} .grid-item a {color:#000;} /*.grid-item a:hover {text-decoration:none; } .grid-item a:hover .photo-caption {opacity:1; z-index:99;} .grid-item a:hover .photo-white {opacity:.15; background-color:#000; position:absolute; top:0; left:0; right:0; bottom:0; z-index:98;}*/ .photo-white {-webkit-transition: background-color .5s, -webkit-transform .5s; transition: background-color .5s, transform .5s;} span.photographer {font-weight:100 !important; font-size:1.8vw;} .view-larger {font-weight:100; font-size:1.4vw;} .grid { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count:4; margin: 0; } .grid-item { -webkit-column-break-inside: avoid; } .grid-item:after { content: ''; display: block; height: 20px; } .grid-item { position:relative; margin-bottom: 0; } .columns-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .columns-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .single-attractions .col-full {padding:0 ;} .single-attractions #content {padding:0 2.5vw;} .single-attractions h3.orange {font-size:3vw; color:#FFF; display:none;} .single-attractions h1 {margin-bottom:0; } .gallery-item {width:28%; margin:1vw 2%; display:inline-block; vertical-align:top;} .photo-gallery-box .darkening-box {position:absolute; top:0; left:0; width:100%; z-index:1; background-color:hsla(0,0%,0%,0.0);} .photo-gallery-box { width:100%; display:inline-block; position:relative; height:19vw; background-size:cover; background-position:center center; font-size:2vw; color:#FFF; } .photo-gallery-box span {z-index:2; color:#FFF; position:absolute; } /*h1.entry-title {font-size:2vw; text-align:center;}*/ .entry-title{ background:none !important; background-color:transparent !important; } .galleries {padding:3vw; padding-top:0;} .footer.comments {display:none;} .single-attractions h1{padding: .5vw; padding-top: 1vw; text-align: center; color: #FFF; font-size: 3vw; line-height: 4vw; background-color:#4d148c; } .left-side {padding-top:1vw;} .left-side a {display:block; width:100%; margin:20px 0; padding:1vw; background-color:#ff6600; text-align:center; font-size:2vw;font-family: 'VAGRoundedStd-Bold'; color:#FFF; } .left-side a:hover {background-color:#4d148c;} .left-side a.active-menu {background-color:#4d148c;} .right-side strong {font-family: 'VAGRoundedStd-Bold'; font-size:2.5vw; line-height:3vw; font-weight:normal;} .right-side {padding-left:4vw;} /* Single Attractions - Right side content styling - FORCED consistency */ .single-attractions .right-side { background-color: #fff !important; padding: 2vw !important; border-radius: 15px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; box-sizing: border-box !important; } .single-attractions .right-side #content-text { padding: 1vw 0 !important; } .single-attractions .right-side .attraction-logo { margin-bottom: 2vw !important; text-align: center !important; } .single-attractions .right-side #content-photos, .single-attractions .right-side #DesignSelector { background-color: #fff !important; padding: 2vw 0 !important; } /* Normalizar #content-photos cuando no tiene contenido */ .single-attractions .right-side #content-photos:empty { display: none !important; padding: 0 !important; margin: 0 !important; } /* Asegurar consistencia en espaciado */ .single-attractions .right-side > div { margin-bottom: 2vw; } .single-attractions .right-side > div:last-child { margin-bottom: 0; } .single-attractions .attraction-logo {width:100% !important; height:auto; } .single-attractions .attraction-logo img {width:100%; height:auto; max-width:none; max-height:none;} .single-attractions .alignright {width:30%; height:auto;} .single-attractions .wpcf7 input[type=text], .single-attractions .wpcf7 input[type=email], .single-attractions .wpcf7 input[type=tel], .single-attractions .wpcf7 textarea { border: 1px solid #adafb2; padding: .9vw; font-weight: bold; font-size:16px; } .item-content {padding:3vw 5vw;} .term-description {padding:2vw 5vw;} /*---------------------DESIGN SUMMARIES---------------------*/ #design-summary img {width:100%; height:auto;} .page-id-2797 header.header {background-color:#ff6600; padding:.5vw; padding-top:1vw; text-align:center; color:#FFF; font-size:3vw; line-height:4vw;} .page-id-2797 header.header h1 {font-size:3vw; line-height:4vw;} .page-id-2797 .design-image {margin-top:2vw;} .page-id-2797 .entry-content, .page-id-12270 .entry-content {width:80%; margin:2vw 10%;} .page-id-12270 h1 {text-align:center;} .page-id-2797 .entry-content h3 {margin-bottom:1vw; color:#4d148c;} .page-id-2797 .entry-content h2 {margin-bottom:2vw;} .page-id-2797 .entry-content a.orange-button, .page-id-2797 .entry-content a.green-button, .page-id-2797 .entry-content a.purple-button {margin:0 .5vw;} .page-id-2797 p, .page-id-2797 .entry-content li { font-size: 1.2vw; line-height: 1.4vw; } #design-summary img {box-shadow:0 0 8px #CCC;} /*---------------------FINANCING---------------------*/ .page-id-47 h1 {text-align:center; } .page-id-47 h3 {text-align:center; font-size:2vw; color:#40b93c; margin-bottom:2vw; margin-top:1vw;} .page-id-47 .entry-content1 {padding: 1vw 8vw;} .instagram-feed {padding:2vw 5vw;} /*---------------------FOOTER---------------------*/ #footer { display: block; text-align:center; color:#fff; width:100%; padding:2vw 1vw; padding-top:6vw; padding-bottom:0; } #footer a{color:#fff;} .footer-headline {display:block; text-align:center; font-size:3.2vw;font-family: 'VAGRoundedStd-Bold'; color:#FFF; padding:1vw;} #copyright {padding:2vw 0; font-size:12px; line-height:15px;} .footer-headline a {color:#40b93c !important;} .social-media {text-align:center; padding:2vw;} .social-media img {width:3.5vw; height:auto; display:inline; margin:0 .2vw;} textarea.wpcf7-textarea {height:120px;} #swipebox-close {background-color:hsla(0,0%,0%,0.77);} .posted_in {padding:.4vw 0 ; display:block;} .product_metaxx strong {display:block; font-family: 'VAGRoundedStd-Bold'; font-size:2vw; font-weight:normal} .modal {z-index:99999;} @media (max-height: 920px) { .modal-body img {width:70% !important; height:auto; max-width:100% !important;} } /*---------------------MOBILE---------------------*/ @media (max-width: 767px) { .desktop-only { display: none; } .mobile-only { display: block; } #header { min-height: 15vw; } .header-search {display:none;} #toggle-menu { display: block; position: absolute; width: 50px; top: 10px; right: 10px; padding: 15px 10px; z-index:9999; border: 0px; } #toggle-menu img { width: 100%; height: auto; } nav#the-main-menu{ display:none; } nav#the-mobile-menu { width: 100%; position: absolute; top: 22vw; z-index: 999; background-color: #4d148c; display: none; padding:2vw; } nav#the-mobile-menu ul { list-style-type: none; } nav#the-mobile-menu li { list-style: none; text-align: center; -webkit-transition: background-color .5s, -webkit-transform .5s; transition: background-color .5s, transform .5s; display: block; padding: 0; font-size: 5vw; } #the-main-menu li a, .menu-item-has-children > a {font-size: 5vw;} nav#the-mobile-menu li a {color:#FFF; font-family: 'VAGRoundedStd-Bold';} nav#the-mobile-menu {box-shadow:0 10px 20px #000;} .sub-menu a {margin:0 !important; padding:0 !important;} .sub-menu {display:block; position:static; background:none; box-shadow:none; margin:0; padding:0; margin-top:1vw;} .sub-menu li, .sub-menu a {text-align:center;} nav#the-mobile-menu li {padding:2vw 0} #menu-item-15 .sub-menu {background-color:#ff6600;} #menu-item-45 .sub-menu {background-color:#40b93c;} nav#the-mobile-menu menu, nav#the-mobile-menu ol, nav#the-mobile-menu ul {padding:0;} nav#the-mobile-menu li#menu-item-15 {margin-bottom:1vw;} nav#the-mobile-menu li#menu-item-15 a {color:#ff6600; padding-bottom:2vw;} nav#the-mobile-menu li#menu-item-45 a {color:#40b93c; } nav#the-mobile-menu #menu-item-15 .sub-menu a, nav#the-mobile-menu #menu-item-45 .sub-menu a {color:#FFF; } h1, h2, h3 {font-size:5vw; line-height:6vw;} h2 strong, h1 strong {font-size:6vw; line-height:6.5vw; font-weight:normal;} p {font-size: 3.5vw; line-height: 4.5vw; margin-top: 3vw;} .prev img, .next img {width:100%;} /*--- header ---*/ .bumper {height:22vw;} .logo, #header.active .logo {width:40%; padding-left:0; padding-right:0;} #menu-indoor-playgrounds-menu .menu-item {width:31vw; height:10vw;} #carousel1 .item, .static-section {height:75vw !important;} /*--- footer ---*/ a.orange-button, a.green-button {font-size: 5vw; padding:2vw 8vw; border-radius:4vw; } #footer {background-size: auto 100%; padding-top:15vw; margin-bottom:0; display:block; float:none; padding-bottom:0;} .footer-headline {font-size:6vw; line-height:7vw; padding:5vw;} .footer-headline a {display:block; width:100%; text-align:center;} .social-media img {width:15vw; margin:1vw;} /*--- home ---*/ .two-column-text { margin:5vw 5vw; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; font-size:3.5vw; line-height:4.5vw; } .home .inner-photo, .home .inner-photo-caption {width:90%; text-align:center; margin:0 5%;} .home-parallax-content {padding:0; background:none; height:auto;} .home-parallax-content-box {width:90%; height:auto; padding:6vw; margin:5vw;} .home-parallax-content-box h2 {font-size:5vw; line-height:6vw; } .home-parallax-content-box p {font-size:3vw; line-height:4vw;} /*--- Indoor playgrounds ---*/ .color-columns {height:auto;} .page-id-8 #top-section {height:auto; background-size: auto 100%;} .page-id-8 .inner-photo {width:100%;} .page-id-8 .inner-photo-caption {width:100%;} #menu-indoor-playgrounds-menu .menu-item {margin:4px; width: calc(33.3333% - 8px); font-size:3.3vw; line-height:3vw;} #playgrounds-menu {margin:4px ; padding-bottom:4px;} /*--- choose designs ---*/ .page-id-63 #LeftCol, .page-id-63 #RightCol{width:49%;} .page-id-63 h1{font-size:6vw; line-height:7vw; padding:2vw 5vw; } .page-id-63 h2 {font-size:3.5vw; line-height:5vw;} img.RoundWhite.thumbies {width:100%; height:auto; margin-bottom:5px;} /*--- create your own ---*/ .page-id-66 .item {height:auto;} button.next {float:none; margin-top:2vw;} .number-box {font-size:5vw; margin:1vw 10vw} .page-id-66 h1 {font-size:6vw; line-height:7vw; padding:2vw 5vw; } .page-id-66 h2 {font-size:3.5vw; line-height:5vw;} .item h2 {font-size:4vw; line-height:5vw;} .options-title {font-size:3.5vw; line-height:5vw;} /*--- colors ---*/ .page-id-69 .color-photo {height:40vw;} .color-content h3 {font-size:4vw;} .page-id-69 #top-section {height:auto; background-size: auto 100%; background:#4d148c;} .page-id-69 .inner-photo {width:100%;} .page-id-69 .inner-photo-caption {width:100%;} #colorCarousel .item {height:40vw;} .numbered-list {font-size:3vw; padding-top:5vw;} /*--- themes ---*/ .theme-photo {height:40vw;} .theme-content h3 {font-size:5vw;} .page-id-75 .inner-photo-caption {float:none;width:100%; } .inner-photo-caption.left-content {float:none; width:100%;} #grad-photo {height:auto;} .logos img {width:20vw;} .page-id-75 .entry-content h2 {padding-top:4vw;} .video-placeholder {height:40vw;} .video-content h3 {font-size:5vw; line-height:5vw; padding-bottom:1.5vw; padding-top:1.5vw;} .page-id-77 h1 {font-size:5vw; line-height:6vw; padding:2vw 5vw; } .page-id-77 h3 {font-size:3vw; line-height:4vw; padding:2vw 5vw} .component-gallery-header a {margin-bottom:2vw; font-size:4vw; line-height:4vw;} h2.headline {font-size:4.5vw; line-height:5.5vw; padding:2vw 5vw; } .sections .col-sm-6 {height:auto;} .sections .col-sm-6.section-image {height:55vw;} .parts-photo {height:40vw;} .parts-content h3 {font-size:5vw; line-height:5vw; padding-bottom:1.5vw; padding-top:1.5vw;} header.header-band h1 {font-size:6vw; line-height:7vw; padding:2vw;} .page-id-2 .logos img {width:11vw;} .photo-right {height:55vw; margin-bottom:2vw;} .page-id-6 h2 { font-size:4.5vw; line-height:5.5vw; } .date-post {font-size:3vw; line-height:4vw;} .featured-content {height:auto !important; padding:4vw;} .featured-content p, a.read-more {font-size:3.5vw; line-height:4.5vw; } a.read-more {border-radius: 50px;} .featured-content {border-radius: 15px 15px 0 0;} .featured-image {border-radius: 0 0 15px 15px !important; border-left: 2px solid #4d148c; border-top:0} .featured-image {height:35vw !important;} .financing-box .inner-finance {height:auto; margin-bottom:2vw;} .aligncenter {max-width:100%; height:auto;} .financing-box h2 {font-size:4.5vw; line-height:5.5vw; margin:2vw 0;} input[type=submit] {font-size:5vw; padding:2vw;} .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {padding:2vw;} span.slide-submit {float:none;} .header-phone span {display:none} .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 { font-size: 4.3vw !important; line-height: 1.2 !important; } body.single-product section.related.products h2 { font-size: 22px; line-height: 1.2; } body.single-product .related .woocommerce ul.products li.product .woocommerce-loop-product__title, body.single-product .related .woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title, body.single-product .related .products li.product .woocommerce-loop-product__title { font-size: 16px !important; line-height: 1.2 !important; } .woocommerce ul.products li.product .price {font-size: 4vw !important; line-height: 5vw !important;} a.green-button {margin-bottom:4vw;} #the-main-menu {text-align:left !important;} } .about-content iframe {width:100%; height:34vw; border-radius:15px;} .rounded-corner {border-radius:15px;} .orange-box { background-color: #ff6600; padding: 2vw; color: #FFF; margin:1vw; border-radius:15px; } /* Quienes Somos Page Styles */ .page-template-page-quienes-somos .contenedor-contenido-principal-internas, body.page-quienes-somos .contenedor-contenido-principal-internas, body.page-slug-quienes-somos .contenedor-contenido-principal-internas { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; width: 100% !important; box-sizing: border-box !important; } /* Hero section for quienes-somos - same as markets */ .page-template-page-quienes-somos .container-3.markets-hero, body.page-quienes-somos .container-3.markets-hero, body.page-slug-quienes-somos .container-3.markets-hero { display: flex !important; flex-wrap: wrap !important; margin-bottom: 40px !important; width: 100% !important; clear: both !important; position: relative !important; } /* Remove ALL paddings from hero columns on quienes-somos page - text to left edge, video to right edge */ /* OVERRIDE: Force remove ALL padding from about-content in hero section, then add only what we need */ .page-template-page-quienes-somos .container-3.markets-hero .col-sm-6.about-content.markets-hero-text, body.page-quienes-somos .container-3.markets-hero .col-sm-6.about-content.markets-hero-text, body.page-slug-quienes-somos .container-3.markets-hero .col-sm-6.about-content.markets-hero-text, .page-template-page-quienes-somos .container-3.markets-hero .markets-hero-text.about-content, body.page-quienes-somos .container-3.markets-hero .markets-hero-text.about-content, body.page-slug-quienes-somos .container-3.markets-hero .markets-hero-text.about-content, .page-template-page-quienes-somos .container-3.markets-hero .col-sm-6.markets-hero-text.about-content, body.page-quienes-somos .container-3.markets-hero .col-sm-6.markets-hero-text.about-content, body.page-slug-quienes-somos .container-3.markets-hero .col-sm-6.markets-hero-text.about-content { width: 50% !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 20px !important; box-sizing: border-box !important; color: #000000 !important; } .page-template-page-quienes-somos .container-3.markets-hero .col-sm-6.about-content.markets-hero-image, body.page-quienes-somos .container-3.markets-hero .col-sm-6.about-content.markets-hero-image, body.page-slug-quienes-somos .container-3.markets-hero .col-sm-6.about-content.markets-hero-image, .page-template-page-quienes-somos .container-3.markets-hero .markets-hero-image.about-content, body.page-quienes-somos .container-3.markets-hero .markets-hero-image.about-content, body.page-slug-quienes-somos .container-3.markets-hero .markets-hero-image.about-content, .page-template-page-quienes-somos .container-3.markets-hero .col-sm-6.markets-hero-image.about-content, body.page-quienes-somos .container-3.markets-hero .col-sm-6.markets-hero-image.about-content, body.page-slug-quienes-somos .container-3.markets-hero .col-sm-6.markets-hero-image.about-content { width: 50% !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 20px !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Force 50/50 for col-sm-6 in hero section on quienes-somos page */ .page-template-page-quienes-somos .container-3.markets-hero .col-sm-6, body.page-quienes-somos .container-3.markets-hero .col-sm-6, body.page-slug-quienes-somos .container-3.markets-hero .col-sm-6 { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; box-sizing: border-box !important; } /* Video gradient frame for quienes-somos */ .page-template-page-quienes-somos .about-hero-video-inner, body.page-quienes-somos .about-hero-video-inner, body.page-slug-quienes-somos .about-hero-video-inner { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } .page-template-page-quienes-somos .about-hero-video .video-gradient-frame, body.page-quienes-somos .about-hero-video .video-gradient-frame, body.page-slug-quienes-somos .about-hero-video .video-gradient-frame { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; padding: 18px !important; border-radius: 32px !important; background-image: linear-gradient(321deg, #ffe46a, #ff2e75 60%, #4d148c) !important; box-shadow: 0 18px 45px rgba(77, 20, 140, .25) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .page-template-page-quienes-somos .about-hero-video iframe, body.page-quienes-somos .about-hero-video iframe, body.page-slug-quienes-somos .about-hero-video iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; border: none !important; border-radius: 20px !important; } /* Ensure video container takes full width */ .page-template-page-quienes-somos .markets-hero-image, body.page-quienes-somos .markets-hero-image, body.page-slug-quienes-somos .markets-hero-image { width: 50% !important; padding-left: 20px !important; padding-right: 0 !important; box-sizing: border-box !important; } .page-template-page-quienes-somos .markets-hero-image .about-hero-video-inner, body.page-quienes-somos .markets-hero-image .about-hero-video-inner, body.page-slug-quienes-somos .markets-hero-image .about-hero-video-inner { width: 100% !important; max-width: 100% !important; } .page-template-page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame, body.page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame, body.page-slug-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame { width: 100% !important; max-width: 100% !important; } .page-template-page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame iframe, body.page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame iframe, body.page-slug-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame iframe { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 400px !important; } /* Make video less tall on quienes-somos page */ .page-template-page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame, body.page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame, body.page-slug-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame { max-height: 450px !important; } .page-template-page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame iframe, body.page-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame iframe, body.page-slug-quienes-somos .markets-hero-image .about-hero-video-inner .video-gradient-frame iframe { aspect-ratio: 16 / 9 !important; max-height: 400px !important; } /* Purple box section for quienes-somos */ .page-template-page-quienes-somos .purple-box, body.page-quienes-somos .purple-box, body.page-slug-quienes-somos .purple-box { display: flex !important; flex-wrap: wrap !important; margin-top: 40px !important; margin-bottom: 40px !important; width: 100% !important; box-sizing: border-box !important; clear: both !important; position: relative !important; } .page-template-page-quienes-somos .purple-box .col-sm-6, body.page-quienes-somos .purple-box .col-sm-6, body.page-slug-quienes-somos .purple-box .col-sm-6 { width: 50% !important; box-sizing: border-box !important; } /* Responsive for quienes-somos */ @media (max-width: 991px) { .page-template-page-quienes-somos .container-3.markets-hero, body.page-quienes-somos .container-3.markets-hero, body.page-slug-quienes-somos .container-3.markets-hero { flex-direction: column !important; } .page-template-page-quienes-somos .markets-hero-text, .page-template-page-quienes-somos .markets-hero-image, body.page-quienes-somos .markets-hero-text, body.page-quienes-somos .markets-hero-image, body.page-slug-quienes-somos .markets-hero-text, body.page-slug-quienes-somos .markets-hero-image { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 20px !important; } .page-template-page-quienes-somos .purple-box, body.page-quienes-somos .purple-box, body.page-slug-quienes-somos .purple-box { flex-direction: column !important; } .page-template-page-quienes-somos .purple-box .col-sm-6, body.page-quienes-somos .purple-box .col-sm-6, body.page-slug-quienes-somos .purple-box .col-sm-6 { width: 100% !important; } } /* Purple box section */ .purple-box { background-color: #4d148c; padding: 2vw; color: #FFF; margin:1vw; border-radius:15px; display: block !important; clear: both !important; position: relative !important; } .purple-box a { color: #FFF;} .video-slider { display: flex; gap: 1vw; padding: 1vw 0; overflow-x: auto; margin-left:1vw; margin-top:2vw; } .slideit {text-align:center; cursor: pointer; width: 15.45vw; height: 27.6vw; /* Adjusted for 9:16 ratio */ margin: 0.5vw; padding: 0; box-sizing: border-box; border-radius: 1vw; background-size: cover; background-position: center center; background-repeat: no-repeat; display: inline-block; position: relative; flex-shrink: 0; } .slideit a { background-color:hsla(0,0%,0%,0.76); border-radius:1vw; display:inline-block; position: absolute; padding:.3vw 1vw; top: 10px; left: 10px; color: white; text-decoration: none; } .home .slideit a {background-color:hsla(0,0%,0%,0);} @media (max-width: 767px) { .slideit { width: 45vw; height: 80.1vw; /* Adjusted for 9:16 ratio */ } } .modal-dialog { width: 50%; margin: 30px auto; } .video-container { position: relative; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Custom overlay for homepage video modal (decoupled from Bootstrap .modal) */ .gps-video-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; background: rgba(0, 0, 0, 0.8); } .gps-video-modal.gps-open { display: block; } .modal-content {border:0; border-radius:15px;} .modal-content iframe, .video-container {border-radius:15px;} .home #myCarousel {margin:1vw; } .home #myCarousel .item {border-radius:15px;} .component-gallery-header a {border-radius:15px;} .component-gallery-box img {border-radius:15px;} .home .entry-content h2 {color:#4d148c;} .home #carousel1, .home #carousel2 { margin: 1vw; } .home #carousel1 .item, .home #carousel2 .item { border-radius: 15px; } .carousel-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 100%; } .home h1 {font-size:45px;} .home .about-content h1 {line-height:normal !important;} #sb_instagram img, #sb_instagram .sbi_photo {border-radius:15px !important;} header.header-band, body.woocommerce:not(.single-product) h1, .shop-headline, .page-id-5686 h1 {margin:1vw; border-radius:15px;} .post-type-archive-product #content, .tax-product_cat #content, .tax-product_tag #content {margin:1vw; border-radius:15px; background-color:#eee;} .product img {border-radius:15px;} .quick-quote-containerX {margin-bottom:4vw !important;} .page-id-87 .wpcf7 input[type=text], .page-id-87 .wpcf7 input[type=email], .page-id-87 .wpcf7 input[type=tel], .page-id-87 .wpcf7 textarea {border-radius:10px;} input[type=submit] {border-radius:5vw ;} .sf-item-609, .sf-item-1046 {display:none !important} .page page-id-34063 h1 {text-align:center !important;} @media (max-width: 768px) { .home h1 {font-size:32px;} h4.modal-title {font-size:5vw; line-height:6vw;} .woocommerce .modal-dialog {max-width: 100%; height: 1014.6px; width: 100%; margin-top: 54.7px; margin-bottom: 54.7px; } .about-content iframe {width:100%; height:54vw;} .modal-dialog { width: auto; } } .video-slider .slideit { /* Adjusted to take the full width of its container */ overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: transform .6s ease; /* Smooth zoom animation */ -webkit-transition: transform .6s ease; /* Transition for WebKit browsers like Safari */ } .video-slider .slideit:hover { transform: scale(1.02); /* Zoom in the background image */ -webkit-transform: scale(1.02); /* Zoom for WebKit browsers */ } .home-parallax-content-box {border-radius:15px;} .parts-section-1 { text-align: center; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 auto; max-width: 1500px; margin-top: 2vw; padding:0 15px; } .parts-section-1 { padding:0 15px;} .parts-box-small a { display: inline-block; padding: 0.75rem 1.5rem; border: 2px solid #fff; border-radius: 999px; color: #fff; background: transparent; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .parts-box-small a:hover { background-color: #fff; color: orange; } .parts-box-left a { display: inline-block; padding: 0.75rem 1.5rem; border: 2px solid #fff; border-radius: 999px; color: #fff; background: transparent; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .parts-box-left a:hover { background-color: #fff; color: orange; } .page-id-32485 h1 { text-align: center; color: #4e148c; } .parts-section-1 h2 { font-size: 3vw; line-height: 3vw; } .parts-section-1 h3 { font-size: 1.7vw; line-height: 1.8vw; text-transform: uppercase; margin-bottom: 1vw; margin-top: 2vw; } .parts-section-1 p { font-family: 'VAGRoundedStd-Bold'; font-size: 1.2vw; line-height: 1.3vw; } .parts-box-left, .parts-box-small { border-radius: 15px; padding: 1rem; color: #fff; padding-top: 5vw; position: relative; /* helps with overflow if needed */ overflow: hidden; } /* Each box with its own background image */ .parts-box-left { flex: 2; background: url('img/parts-background.jpg') repeat; background-size: 300px 300px; transition: all 0.3s ease; } .repairs { flex: 1; background: url('img/repairs-background.jpg') repeat; background-size: 300px 300px; transition: all 0.3s ease; } .remodeling { flex: 1; background: url('img/remodeling-background.jpg') repeat; background-size: 300px 300px; transition: all 0.3s ease; } .static-parts-section { border-radius: 15px; margin: 1vw; } .static-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 100%; } @media (max-width: 768px) { .parts-section-1 { padding: 0 1rem; /* same side padding as other sections */ } .parts-section-1 h2 { font-size: 5vw; line-height: 5.5vw; } .parts-section-1 h3 { font-size: 3vw; line-height: 3.5vw; } .parts-section-1 p { font-size: 2.5vw; line-height: 3vw; } } /* Responsive: single column on smaller screens */ @media (max-width: 768px) { .parts-section-1 { flex-direction: column; } } @media (min-width: 1500px) { .parts-section-1 h2 { font-size: 36px; /* fixed size or whatever max you want */ line-height: 42px; } .parts-section-1 h3 { font-size: 24px; line-height: 28px; } .parts-section-1 p { font-size: 18px; line-height: 24px; } } /* Diagonal slide animation */ @keyframes diagonalSlide { 0% { background-position: 0 0; } 100% { background-position: 300px 300px; } } /* Animate on hover for all boxes */ .parts-box-left:hover, .repairs:hover, .remodeling:hover { animation: diagonalSlide 10s linear infinite; } .parts-section-2 { background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 10px; padding: 2rem; margin: 2rem auto; max-width: 1500px; text-align: center; } /* Header styling */ .parts-section-2-header { margin-bottom: 2rem; } .quick-fix { color: orange; font-weight: bold; margin-right: 0.5rem; } .parts-section-2 h2 { color: orange; font-size:1.1rem;} .parts-section-2-header h3 { display: inline-block; font-size: 2rem; color: #4e148c; margin: 0; } /* Homepage products section inside container-products */ .w-layout-blockcontainer.container-products.w-container { background-color: #ffffff; border-radius: 24px; margin: 32px auto; padding: 32px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); box-sizing: border-box; display: block !important; } /* Force full width only in mobile/tablet */ @media (max-width: 991px) { .w-layout-blockcontainer.container-products.w-container { width: 100% !important; max-width: 100% !important; } } .w-layout-blockcontainer.container-products.w-container .products { margin: 0; padding: 0 !important; list-style: none; box-sizing: border-box; } /* In desktop, let WooCommerce handle the layout (inline-block with 77% width for .products.columns-4) */ /* Only override in mobile/tablet */ @media (max-width: 991px) { .w-layout-blockcontainer.container-products.w-container .products { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 15px; } } @media (max-width: 767px) { .w-layout-blockcontainer.container-products.w-container .products { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } } /* Override the 77% width rule for products inside container-products - ONLY in mobile/tablet */ @media (max-width: 991px) { .w-layout-blockcontainer.container-products.w-container .products.columns-4, .container-products .products.columns-4, .container-products .woocommerce .products.columns-4 { width: 100% !important; max-width: 100% !important; display: grid !important; } } /* Force full width for products.columns-4 in mobile and tablet */ @media (max-width: 991px) { .products.columns-4, .woocommerce .products.columns-4, ul.products.columns-4 { width: 100% !important; max-width: 100% !important; display: grid !important; } } /* Responsive grid for mobile and tablet */ @media (max-width: 767px) { .w-layout-blockcontainer.container-products.w-container { padding-left: 15px !important; padding-right: 15px !important; margin-left: 5px; margin-right: 5px; } .w-layout-blockcontainer.container-products.w-container .products { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } .container-products .product .woocommerce-loop-product__title { font-size: 16px !important; } } @media (min-width: 768px) and (max-width: 991px) { .w-layout-blockcontainer.container-products.w-container { padding-left: 15px !important; padding-right: 15px !important; margin-left: 5px; margin-right: 5px; } .w-layout-blockcontainer.container-products.w-container .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .container-products .product .woocommerce-loop-product__title { font-size: 18px !important; } } /* Fix for 744px breakpoint - keep 2 columns and smaller title */ @media (min-width: 744px) and (max-width: 800px) { .w-layout-blockcontainer.container-products.w-container .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .container-products .product .woocommerce-loop-product__title { font-size: 16px !important; } } /* Fallback for container-products without w-layout-blockcontainer */ .container-products:not(.w-layout-blockcontainer) { background-color: #ffffff; border-radius: 24px; margin: 32px auto; padding: 32px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); } .container-products:not(.w-layout-blockcontainer) .products { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; width: 100% !important; max-width: 100% !important; } /* Override the 77% width rule for products inside container-products - ONLY in mobile/tablet */ @media (max-width: 991px) { .container-products:not(.w-layout-blockcontainer) .products.columns-4, .container-products:not(.w-layout-blockcontainer) .woocommerce .products.columns-4 { width: 100% !important; max-width: 100% !important; display: grid !important; } } /* Responsive grid for container-products without w-layout-blockcontainer */ @media (max-width: 767px) { .container-products:not(.w-layout-blockcontainer) { padding-left: 15px !important; padding-right: 15px !important; margin-left: 5px; margin-right: 5px; } .container-products:not(.w-layout-blockcontainer) .products { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 20px; } .container-products .product .woocommerce-loop-product__title { font-size: 16px !important; } } @media (min-width: 768px) and (max-width: 991px) { .container-products:not(.w-layout-blockcontainer) { padding-left: 15px !important; padding-right: 15px !important; margin-left: 5px; margin-right: 5px; } .container-products:not(.w-layout-blockcontainer) .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px; } .container-products .product .woocommerce-loop-product__title { font-size: 18px !important; } } /* Fix for 744px breakpoint - keep 2 columns and smaller title */ @media (min-width: 744px) and (max-width: 800px) { .container-products:not(.w-layout-blockcontainer) .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .container-products .product .woocommerce-loop-product__title { font-size: 16px !important; } } .container-products .product { background-color: transparent; border-radius: 0; box-shadow: none; padding: 24px 8px 28px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; } .container-products .product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; width: 100%; } .container-products .product a { text-decoration: none; } .container-products .product img { order: 1; width: 100%; height: auto; border-radius: 16px; margin: 12px 0 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .container-products .product .woocommerce-loop-product__title { order: 0; font-size: 20px; line-height: 1.2; font-weight: 700; color: #343434; margin: 0; } .container-products .product .price { margin-top: 8px; margin-bottom: 16px; font-size: 14px; color: #555; } .container-products .product a.button { margin-top: auto; align-self: stretch; text-align: center; border-radius: 50px; background: linear-gradient(#ffffff, #d9d9d9 65%); color: #777777; padding: 14px 24px; font-weight: 600; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); border: none; display: block !important; /* override global rule that hides Woo buttons */ } .container-products .product a.button:hover { background: linear-gradient(#f9f9f9, #e3e3e3); color: #000; } body.tax-product_cat.woocommerce .goplay-shop-layout { display: grid; grid-template-columns: clamp(340px, 28vw, 460px) minmax(0, 1fr); gap: 40px; align-items: start; margin-left: 20px; margin-right: 20px; } body.tax-product_cat.woocommerce .goplay-shop-filters, body.tax-product_cat.woocommerce .goplay-shop-results { min-width: 0; } body.tax-product_cat.term-equipo-de-juegos-blandos-para-interiores .goplay-shop-filters{ background:#f1f1f1; border-radius:20px; padding:20px; } body.tax-product_cat.term-equipo-de-juegos-blandos-para-interiores .goplay-shop-filters .noUi-connect { background: #4D148C !important; } [data-operator="or"] { padding: 0 !important; } .goplay-shop-filters input[type="submit"] { display: block !important; margin-top: auto; text-align: center; font-family: Nunito, sans-serif; font-weight: 600; border-radius: 50px !important; background: linear-gradient(#ffffff, #d9d9d9 65%) !important; color: #777777 !important; padding: 14px 28px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important; border: none !important; cursor: pointer; width: 100%; } .goplay-shop-filters input[type="submit"]:hover { background: linear-gradient(#f9f9f9, #e3e3e3) !important; color: #000 !important; } .sf-item-1443 { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .sf-field-taxonomy-product_cat { margin-bottom: 20px !important; } /* Style all video thumbnails in clips-de-videos-cortos to match contenedor-video-thumb */ .clips-de-videos-cortos .cell-short-videos > a, .clips-de-videos-cortos .cell-short-videos > img, .clips-de-videos-cortos .cell-short-videos .short-videos-preview, .clips-de-videos-cortos .contenedor-video-thumb img, .clips-de-videos-cortos .contenedor-video-thumb .short-videos-preview, .grilla-videos-cortos-temas-graficos .short-videos-preview, .grilla-videos-cortos-temas-graficos .contenedor-video-thumb img { display: block; width: 100%; height: 200px !important; object-fit: cover; border-radius: 15px; } .clips-de-videos-cortos .cell-short-videos { display: flex; flex-direction: column; align-items: center; justify-content: center; } .clips-de-videos-cortos .cell-short-videos > a { display: flex; flex-direction: column; align-items: center; width: 100%; text-decoration: none; } /* Hide the 6th cell in the video grid */ .grilla-videos-cortos-temas-graficos > .w-layout-cell:nth-child(6), .grilla-videos-cortos-temas-graficos .w-layout-cell:nth-child(6) { display: none !important; } /* Make the grid have only 5 columns */ .grilla-videos-cortos-temas-graficos { grid-template-columns: repeat(5, 1fr) !important; grid-template-rows: auto !important; height: auto !important; } /* Ensure cells can grow to accommodate taller thumbnails */ .grilla-videos-cortos-temas-graficos .w-layout-cell, .grilla-videos-cortos-temas-graficos .cell-short-videos { height: auto !important; min-height: auto !important; } .grilla-videos-cortos-temas-graficos .contenedor-video-thumb { height: auto !important; min-height: auto !important; } /* Ensure the specific grid ID can grow */ #w-node-ad9e362c-22b2-2498-ebfd-a75cede654fc-b7ac6f97 { height: auto !important; grid-template-rows: auto !important; } body.tax-product_cat.woocommerce .goplay-shop-filters .searchandfilter, body.tax-product_cat.woocommerce .goplay-shop-filters [data-sf-form-id], body.tax-product_cat.woocommerce .goplay-shop-filters form { width: 100% !important; max-width: none !important; } body.tax-product_cat.woocommerce .goplay-shop-filters ul, body.tax-product_cat.woocommerce .goplay-shop-filters li { width: 100% !important; max-width: none !important; box-sizing: border-box; } body.tax-product_cat.woocommerce .goplay-shop-filters .goplay-measurements-note { margin-top: 14px; font-size: 15px; line-height: 1.4; color: #343434; text-align: center; } @media (max-width: 991px) { body.tax-product_cat.woocommerce .goplay-shop-layout { grid-template-columns: 1fr; gap: 28px; } } body.tax-product_cat.woocommerce ul.products { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; width: 100% !important; max-width: 100% !important; } /* Override the 77% width rule for products in category pages - ONLY in mobile/tablet */ @media (max-width: 991px) { body.tax-product_cat.woocommerce ul.products.columns-4 { width: 100% !important; max-width: 100% !important; display: grid !important; } } /* Responsive grid for product category pages */ @media (max-width: 767px) { body.tax-product_cat.woocommerce .goplay-shop-layout { margin-left: 5px !important; margin-right: 5px !important; padding-left: 15px; padding-right: 15px; } body.tax-product_cat.woocommerce ul.products { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } body.tax-product_cat.woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title { font-size: 16px !important; } } @media (min-width: 768px) and (max-width: 991px) { body.tax-product_cat.woocommerce .goplay-shop-layout { margin-left: 5px !important; margin-right: 5px !important; padding-left: 15px; padding-right: 15px; } body.tax-product_cat.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.tax-product_cat.woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title { font-size: 16px !important; } } /* Fix for 744px breakpoint - keep 2 columns and smaller title */ @media (min-width: 744px) and (max-width: 800px) { body.tax-product_cat.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.tax-product_cat.woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title { font-size: 16px !important; } } body.tax-product_cat.woocommerce ul.products::before, body.tax-product_cat.woocommerce ul.products::after { content: none !important; display: none !important; } body.tax-product_cat.woocommerce ul.products li.product { background-color: transparent; border-radius: 0; box-shadow: none; padding: 24px 8px 28px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; margin: 0; width: auto; } body.tax-product_cat.woocommerce ul.products li.product.first { clear: none !important; } body.tax-product_cat.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; width: 100%; text-decoration: none; } body.tax-product_cat.woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title { order: 0; margin: 0; font-family: 'Roboto', Arial, sans-serif !important; font-weight: 700; font-size: 18px; line-height: 1.2; color: #343434 !important; } body.tax-product_cat.term-equipo-de-juegos-blandos-para-interiores ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title{ font-size:16px; line-height:1.2; font-family: 'Roboto', Arial, sans-serif !important; color:#343434 !important; } body.tax-product_cat.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img { order: 1; display: block; width: 100% !important; max-width: 100% !important; height: 180px !important; object-fit: contain; object-position: center; border-radius: 16px; margin: 12px 0 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } body.tax-product_cat.woocommerce ul.products li.product .price { order: 2; margin: 0 0 16px; font-family: Arial, sans-serif; font-size: 18px; line-height: 1.2; color: #343434; } body.tax-product_cat.woocommerce ul.products li.product .price .woocommerce-Price-amount.amount { color: #343434; } body.tax-product_cat.woocommerce ul.products li.product a.button { display: block !important; margin-top: auto; align-self: stretch; text-align: center; font-family: Nunito, sans-serif; font-weight: 600; border-radius: 50px !important; background: linear-gradient(#ffffff, #d9d9d9 65%); color: #777777; padding: 14px 28px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); border: none; } body.tax-product_cat.woocommerce ul.products li.product a.button:hover { background: linear-gradient(#f9f9f9, #e3e3e3); color: #000; } /* Homepage product cards - match category page style */ .home ul.products.columns-4, .home .products.columns-4 .woocommerce.columns-4 ul.products, .home .products.columns-4 .woocommerce.columns-4 { margin: 0; padding: 0; list-style: none; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 15px; } .home ul.products.columns-4::before, .home ul.products.columns-4::after, .home .products.columns-4 .woocommerce.columns-4 ul.products::before, .home .products.columns-4 .woocommerce.columns-4 ul.products::after { content: none !important; display: none !important; } .home ul.products.columns-4 li.product, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product { background-color: transparent; border-radius: 0; box-shadow: none; padding: 24px 8px 28px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; margin: 0; width: auto; } .home ul.products.columns-4 li.product.first, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product.first { clear: none !important; } .home ul.products.columns-4 li.product a.woocommerce-LoopProduct-link, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; width: 100%; text-decoration: none; } .home ul.products.columns-4 li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title { order: 0; margin: 0; font-family: 'Roboto', Arial, sans-serif !important; font-weight: 700; font-size: 18px; line-height: 1.2; color: #343434 !important; } @media (min-width: 992px) { .home ul.products.columns-4 li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title { font-size: 20px !important; line-height: 1.25 !important; } } .home ul.products.columns-4 li.product a.woocommerce-LoopProduct-link img, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product a.woocommerce-LoopProduct-link img { order: 1; display: block; width: 100% !important; max-width: 100% !important; height: 180px !important; object-fit: contain; object-position: center; border-radius: 16px; margin: 12px 0 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .home ul.products.columns-4 li.product .price, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product .price { order: 2; margin: 0 0 16px; font-family: Arial, sans-serif; font-size: 18px; line-height: 1.2; color: #343434; } .home ul.products.columns-4 li.product .price .woocommerce-Price-amount.amount, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product .price .woocommerce-Price-amount.amount { color: #343434; } .home ul.products.columns-4 li.product a.button, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product a.button { display: block !important; margin-top: auto; align-self: stretch; text-align: center; font-family: Nunito, sans-serif; font-weight: 600; border-radius: 50px !important; background: linear-gradient(#ffffff, #d9d9d9 65%); color: #777777; padding: 14px 28px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); border: none; } .home ul.products.columns-4 li.product a.button:hover, .home .products.columns-4 .woocommerce.columns-4 ul.products li.product a.button:hover { background: linear-gradient(#f9f9f9, #e3e3e3); color: #000; } body.tax-product_cat .sf-field-post-meta-_regular_price .irs { height: 48px; } body.tax-product_cat .sf-field-post-meta-_regular_price .irs-line, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-line-left, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-line-mid, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-line-right { height: 6px; top: 30px; background: #e5e7eb !important; background-image: none !important; border-radius: 999px; } body.tax-product_cat .sf-field-post-meta-_regular_price .irs-diapason { height: 6px; top: 30px; background: #4d148c !important; background-image: none !important; border-radius: 999px; } body.tax-product_cat .sf-field-post-meta-_regular_price .irs-slider { width: 18px; height: 18px; top: 24px; background: #ffffff !important; background-image: none !important; border: 2px solid #4d148c; border-radius: 999px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); } body.tax-product_cat #irs-active-slider, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-slider:hover { background: #ffffff !important; background-image: none !important; } body.tax-product_cat .sf-field-post-meta-_regular_price .irs-from, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-to, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-single { top: 0; padding: 4px 10px; font-size: 12px; line-height: 1.2; font-weight: 700; border-radius: 999px; background: #4d148c !important; } body.tax-product_cat .sf-field-post-meta-_regular_price .irs-from:after, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-to:after, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-single:after { border-top-color: #4d148c !important; } body.tax-product_cat .sf-field-post-meta-_regular_price .irs-min, body.tax-product_cat .sf-field-post-meta-_regular_price .irs-max { top: 0; padding: 4px 10px; font-size: 12px; line-height: 1.2; border-radius: 999px; background: #f3f4f6; color: #6b7280; } body.tax-product_cat .sf-field-post-meta-_regular_price > h4 { color: #4D148C !important; font-family: 'Roboto', Arial, sans-serif !important; font-weight: 700; } body.tax-product_cat .goplay-shop-filters h4 { color: #4D148C !important; font-family: 'Roboto', Arial, sans-serif !important; font-weight: 700; margin-bottom: 10px; } @media (max-width: 767px) { .container-products { margin: 24px 16px; padding: 24px; } } /* Gallery Grid - Clean and Centered */ .gallery-section { width: 100% !important; padding: 20px 0 !important; display: flex !important; justify-content: center !important; } .gallery-section .gallery-container { width: 100% !important; max-width: 1200px !important; padding: 0 15px !important; box-sizing: border-box !important; } .gallery-section .grilla-temas-graficos-elementos-tematicos { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px !important; width: 100% !important; } .gallery-section .grilla-elementos-tematicos { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; position: relative !important; overflow: hidden !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .gallery-section .grilla-elementos-tematicos:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .gallery-section .galeria-thumb { width: 100% !important; height: 180px !important; object-fit: cover !important; display: block !important; transition: transform 0.3s ease; } .gallery-section .grilla-elementos-tematicos:hover .galeria-thumb { transform: scale(1.03); } /* Responsive adjustments */ @media (max-width: 991px) { .gallery-section .grilla-temas-graficos-elementos-tematicos { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .gallery-section .grilla-temas-graficos-elementos-tematicos { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .gallery-section .galeria-thumb { height: 160px !important; } } @media (max-width: 480px) { .gallery-section .grilla-temas-graficos-elementos-tematicos { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 10px !important; } .gallery-section .galeria-thumb { height: 140px !important; } } /* Tag container */ .parts-tags { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* Individual tags/pills */ .parts-tag { display: inline-block; border: 2px solid #000; border-radius: 9999px; padding: 0.5rem 1.5rem; padding-top:0.6rem; text-decoration: none; color: #000; font-size:1.7rem; font-family: 'VAGRoundedStd-Bold'; background-color: #fff; transition: background-color 0.3s ease, color 0.3s ease; } .parts-tag:hover { background-color: #000; color: #fff; } /* Responsive-ish */ @media (max-width: 768px) { .parts-section-2 { margin: 1rem; } .parts-section-2-header h2 { font-size: 1.5rem; } } .parts-section-3 { max-width: 1500px; margin: 2rem auto; text-align: center; padding: 1rem; } .parts-section-3 h2 { font-size: 2rem; margin-bottom: 2rem; color: #4e148c; } .parts-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } @media (min-width: 992px) { .parts-catalog { grid-template-columns: repeat(3, 1fr); } } .catalog-item { text-align: center; } .catalog-link { position: relative; display: block; width: 100%; padding-top: 66%; /* ratio */ border: 2px solid #000; border-radius: 10px; margin-bottom: 0.5rem; overflow: hidden; /* contain the zoom */ } /* This inner div is what we actually zoom */ .catalog-link-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; transform: scale(1); transition: transform 0.8s ease; /* slow in */ will-change: transform; } .catalog-link:hover .catalog-link-bg { transform: scale(1.1); transition: transform 0.3s ease; /* fast out */ } .catalog-item h3 { margin: 0; font-size: 1.4rem; color: #000; } /* Virtual Walkthrough Flag - positioned below price, centered */ .virtual-walkthrough-flag { display: inline-block; background-color: #ff7f00; color: white; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 5px 10px; border-radius: 5px; position: relative; top: auto; left: auto; z-index: 10; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); display: inline-flex; align-items: center; gap: 5px; } .virtual-walkthrough-flag i { font-size: 14px; color: white; } .virtual-walkthrough-flag:hover { background-color: #e66f00; } /* Video Tooltip */ #video-tooltip { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .custom-flag.video-flag { display: inline-block; background-color: #ff7f00; color: white; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 5px 10px; border-radius: 5px; position: absolute; top: 10px; left: 10px; z-index: 10; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } /* Loading Bar */ #video-tooltip .loading-bar { position: relative; top: 0; left: 0; height: 5px; width: 0; background-color: #ff7f00; transition: width 0.3s ease; border-radius: 2px; } .term-flooring .searchandfilter > ul, .term-spheres .searchandfilter > ul, .term-metal-fittings .searchandfilter > ul, .term-toddler-items .searchandfilter > ul, .term-slides-spheres .searchandfilter > ul, .term-vinyl-upholstered-items .searchandfilter > ul, .term-netting-and-panels .searchandfilter > ul, .term-foam-pipe-and-zip-ties .searchandfilter > ul, .term-structure-hardware .searchandfilter > ul {display:none !important;} .term-flooring .products.columns-4, .term-spheres .products.columns-4, .term-metal-fittings .products.columns-4, .term-toddler-items .products.columns-4, .term-slides-spheres .products.columns-4, .term-vinyl-upholstered-items .products.columns-4, .term-netting-and-panels .products.columns-4, .term-foam-pipe-and-zip-ties .products.columns-4, .term-structure-hardware .products.columns-4 { width: calc(100% - 30px) !important; padding:2vw; background-color:#EEE; margin:15px; border-radius:15px;} .searchandfilterX > ul {background-color:#eee; border-radius:15px;} ul .in_stock_color, ul.products .in_stock_color, li.wc-block-grid__product .in_stock_color, ul .s_in_stock_color, ul.products .s_in_stock_color, li.wc-block-grid__product .s_in_stock_color{display:none !important} /*---------------------GLOBAL STYLES - TITAN FONT & PURPLE FOR HEADINGS---------------------*/ h1, h2, h3, h4, h5, h6 { font-family: 'Titan One', cursive !important; color: #4d148c !important; } /* Preserve existing specific color overrides where needed */ h1 strong, h2 strong {color: #ff6600 !important;} h4 {color: #ff6600 !important;} /*---------------------GLOBAL STYLES - ROUNDED IMAGES---------------------*/ img { border-radius: 15px !important; } .attachment-woocommerce_thumbnail.size-woocommerce_thumbnail { box-shadow: none !important; } /* Exceptions for images that should not have rounded corners */ img.circular-image, .list_carousel li img, .header-phone img, .menu-item img, .iconos-sub-nav, .prev img, .next img, .logo img { border-radius: unset !important; } /*---------------------MODAL STYLES---------------------*/ .modal-title { text-align: center !important; line-height: 1 !important; } .modal-content { border: none !important; } .modal-dialog { margin-top: 30px !important; } .modal { padding-top: 30px !important; } /*---------------------SPECIAL GRAY STYLES---------------------*/ .special.gray:before, .special.gray:after { display: none !important; } .special.gray { margin-top: 35px !important; } /* Remove before/after pseudo-elements from .special on quote page */ body.page-quote .special:before, body.page-quote .special:after, body.page-slug-quote .special:before, body.page-slug-quote .special:after, .quote-page-content .special:before, .quote-page-content .special:after { display: none !important; content: none !important; } /* Add margin-top to content-padding on quote page */ body.page-quote .content-padding, body.page-slug-quote .content-padding, .quote-page-content .content-padding { margin-top: 20px !important; } /* Set submit button height to 40px on quote page */ body.page-quote .wpcf7-submit, body.page-slug-quote .wpcf7-submit, .quote-page-content .wpcf7-submit, body.page-quote .wpcf7-form-control.wpcf7-submit, body.page-slug-quote .wpcf7-form-control.wpcf7-submit, .quote-page-content .wpcf7-form-control.wpcf7-submit { height: 40px !important; padding-left: 35px !important; padding-right: 35px !important; } /* Make h1.special same size as heading-5 on quote page */ body.page-quote .special, body.page-slug-quote .special, .quote-page-content .special { color: #4d148c !important; margin-top: 0 !important; margin-bottom: 30px !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; font-family: 'Titan One', sans-serif !important; font-size: 30px !important; line-height: 32px !important; text-align: left !important; } @media (max-width: 991px) { body.page-quote .special, body.page-slug-quote .special, .quote-page-content .special { font-size: 25px !important; line-height: 28px !important; text-align: left !important; } } @media (max-width: 479px) { body.page-quote .special, body.page-slug-quote .special, .quote-page-content .special { text-align: left !important; font-size: 20px !important; line-height: 21px !important; } } /* Apply same h1.special styling to contactenos page */ body.page-contactenos .special, body.page-slug-contactenos .special { color: #4d148c !important; margin-top: 0 !important; margin-bottom: 30px !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; font-family: 'Titan One', sans-serif !important; font-size: 30px !important; line-height: 32px !important; text-align: left !important; } @media (max-width: 991px) { body.page-contactenos .special, body.page-slug-contactenos .special { font-size: 25px !important; line-height: 28px !important; text-align: left !important; } } @media (max-width: 479px) { body.page-contactenos .special, body.page-slug-contactenos .special { text-align: left !important; font-size: 20px !important; line-height: 21px !important; } } /* Make h2 smaller style on contactenos page - in right column below image */ body.page-contactenos .col-sm-8.about-content h2, body.page-slug-contactenos .col-sm-8.about-content h2, .quote-page-content .col-sm-8.about-content h2.contact-h2-right, body.page-contactenos h2.contact-h2-right { color: #ff6600 !important; margin-top: 20px !important; margin-bottom: 30px !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; font-family: 'Titan One', sans-serif !important; font-size: 18px !important; line-height: 22px !important; text-align: left !important; } /* Contactenos only: make right-side h2 sans-serif, bold, and purple */ body.page-contactenos h2.contact-h2-right, body.page-slug-contactenos h2.contact-h2-right { color: #4d148c !important; font-family: 'Roboto', sans-serif !important; font-weight: 700 !important; } @media (max-width: 991px) { body.page-contactenos .col-sm-8.about-content h2, body.page-slug-contactenos .col-sm-8.about-content h2, .quote-page-content .col-sm-8.about-content h2.contact-h2-right, body.page-contactenos h2.contact-h2-right { font-size: 16px !important; line-height: 20px !important; text-align: left !important; } } @media (max-width: 479px) { body.page-contactenos .col-sm-8.about-content h2, body.page-slug-contactenos .col-sm-8.about-content h2, .quote-page-content .col-sm-8.about-content h2.contact-h2-right, body.page-contactenos h2.contact-h2-right { text-align: left !important; font-size: 14px !important; line-height: 18px !important; } } /* Strong override for Contactenos: force sans-serif bold on right H2 */ body.page-contactenos .quote-page-content .col-sm-8.about-content h2.contact-h2-right, body.page-slug-contactenos .quote-page-content .col-sm-8.about-content h2.contact-h2-right, body.page-id-87 .quote-page-content .col-sm-8.about-content h2.contact-h2-right { font-family: 'Roboto', sans-serif !important; font-weight: 700 !important; color: #4d148c !important; } /* Make col-sm-4 and col-sm-8 equal 50/50 on quote page only */ body.page-quote .col-sm-4.about-content, body.page-slug-quote .col-sm-4.about-content, .quote-page-content .col-sm-4.about-content { width: 50% !important; } body.page-quote .col-sm-8.about-content, body.page-slug-quote .col-sm-8.about-content, .quote-page-content .col-sm-8.about-content { width: 50% !important; } /* Remove left and right padding from content-padding on quote page only */ body.page-quote .content-padding, body.page-slug-quote .content-padding, .quote-page-content .content-padding { padding-left: 0 !important; padding-right: 0 !important; } /* FINAL OVERRIDE - Force products.columns-4 to full width in mobile/tablet - Highest priority */ @media (max-width: 991px) { /* Ensure container takes full width */ html body .w-layout-blockcontainer.container-products.w-container, html body .container-products { width: 100% !important; max-width: 100% !important; } /* Force products.columns-4 to full width */ html body .woocommerce .products.columns-4, html body .container-products .woocommerce .products.columns-4, html body .w-layout-blockcontainer.container-products .woocommerce .products.columns-4, html body .container-products .products.columns-4, html body .w-layout-blockcontainer.container-products .products.columns-4, html body ul.products.columns-4, html body div .woocommerce .products.columns-4, html body div .container-products .woocommerce .products.columns-4, html body .contenedor-listado-productos .woocommerce .products.columns-4, html body .contenedor-listado-productos .products.columns-4 { width: 100% !important; max-width: 100% !important; min-width: 100% !important; display: grid !important; box-sizing: border-box !important; vertical-align: top !important; } /* Also target the ul element directly */ html body ul.products.columns-4.woocommerce { width: 100% !important; max-width: 100% !important; min-width: 100% !important; display: grid !important; } /* Force li.product to full width in mobile - override the 48% width */ html body .products.columns-4 li.product, html body .woocommerce .products.columns-4 li.product, html body .container-products .products.columns-4 li.product, html body .container-products .woocommerce .products.columns-4 li.product, html body .w-layout-blockcontainer.container-products .products.columns-4 li.product, html body .w-layout-blockcontainer.container-products .woocommerce .products.columns-4 li.product, html body ul.products.columns-4 li.product, html body .contenedor-listado-productos .products.columns-4 li.product, html body .contenedor-listado-productos .woocommerce .products.columns-4 li.product { width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; flex-basis: 100% !important; } } /* Toddler Areas page: Two-column grid layout for second section - ONLY FOR THIS PAGE */ html body .w-layout-blockcontainer.container-3.toddler-areas-two-columns { display: grid !important; grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) !important; column-gap: 40px !important; row-gap: 0 !important; align-items: start !important; background-image: linear-gradient(#e8d2ff, #fff0) !important; border-radius: 25px !important; padding: 40px !important; position: relative !important; } html body .w-layout-blockcontainer.container-3.toddler-areas-two-columns > .fotos-costado { grid-column: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-bottom: 0 !important; } html body .w-layout-blockcontainer.container-3.toddler-areas-two-columns > .contenedor-contenido-sub-sub { grid-column: 2 !important; width: auto !important; min-width: 0 !important; padding-left: 40px !important; padding-right: 40px !important; } /* Responsive: stack columns on mobile */ @media screen and (max-width: 767px) { html body .w-layout-blockcontainer.container-3.toddler-areas-two-columns { grid-template-columns: 1fr !important; gap: 20px !important; padding: 20px !important; } html body .w-layout-blockcontainer.container-3.toddler-areas-two-columns > .fotos-costado, html body .w-layout-blockcontainer.container-3.toddler-areas-two-columns > .contenedor-contenido-sub-sub { grid-column: 1 !important; } html body .w-layout-blockcontainer.container-3.toddler-areas-two-columns > .contenedor-contenido-sub-sub { padding-left: 20px !important; padding-right: 20px !important; } } /* Desktop: 2 columns for homepage products - MAXIMUM SPECIFICITY */ html body div.home-products-grid.container-products.w-layout-blockcontainer.w-container .woocommerce ul.products.columns-4, html body .contenedor-listado-productos .home-products-grid .woocommerce ul.products.columns-4 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body div.home-products-grid.container-products.w-layout-blockcontainer.w-container .woocommerce ul.products.columns-4 li.product, html body .contenedor-listado-productos .home-products-grid .woocommerce ul.products.columns-4 li.product, html body .home-products-grid ul.products.columns-4 li.product.type-product { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; clear: none !important; float: none !important; flex-basis: auto !important; } /* Tablet: 2 columns */ @media screen and (max-width: 991px) { html body div.home-products-grid.container-products.w-layout-blockcontainer.w-container .woocommerce ul.products.columns-4, html body .contenedor-listado-productos .home-products-grid .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; min-width: 0 !important; } html body div.home-products-grid.container-products.w-layout-blockcontainer.w-container .woocommerce ul.products.columns-4 li.product, html body .contenedor-listado-productos .home-products-grid .woocommerce ul.products.columns-4 li.product { width: auto !important; max-width: none !important; min-width: 0 !important; flex-basis: auto !important; } } /* Mobile: 1 column */ @media screen and (max-width: 767px) { html body div.home-products-grid.container-products.w-layout-blockcontainer.w-container .woocommerce ul.products.columns-4, html body .contenedor-listado-productos .home-products-grid .woocommerce ul.products.columns-4 { grid-template-columns: 1fr !important; min-width: 0 !important; } } /* Global WooCommerce product title line-height */ body .woocommerce ul.products li.product .woocommerce-loop-product__title, body .woocommerce ul.products li.product a.woocommerce-LoopProduct-link h2.woocommerce-loop-product__title, body .container-products .product .woocommerce-loop-product__title { line-height: 20px !important; } /* Product category listings: keep the products grid full-width inside results column */ body.tax-product_cat.woocommerce .goplay-shop-results .woocommerce ul.products, body.tax-product_cat.woocommerce .goplay-shop-results ul.products { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; } body.tax-product_cat.woocommerce .goplay-shop-results .woocommerce ul.products li.product, body.tax-product_cat.woocommerce .goplay-shop-results ul.products li.product { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; clear: none !important; float: none !important; } /* Categories without visible filters should not reserve the left sidebar column */ body.tax-product_cat.woocommerce .goplay-shop-layout.goplay-shop-layout--no-filters { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.tax-product_cat.woocommerce .goplay-shop-layout.goplay-shop-layout--no-filters .goplay-shop-results { width: 100% !important; max-width: 100% !important; } /* WooCommerce category pages: prevent default Woo sidebar layout from squeezing content */ body.tax-product_cat.woocommerce #primary, body.tax-product_cat.woocommerce .content-area, body.tax-product_cat.woocommerce main#main, body.tax-product_cat.woocommerce .site-main { width: 100% !important; max-width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; } body.tax-product_cat.woocommerce #secondary, body.tax-product_cat.woocommerce aside#sidebar { display: none !important; } /* Final hard override: product category content must span full site width */ body.tax-product_cat.woocommerce #content, body.tax-product_cat.woocommerce #content.site-content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.tax-product_cat.woocommerce .col-full, body.tax-product_cat.woocommerce .site-content .col-full { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 25px !important; padding-right: 25px !important; box-sizing: border-box !important; display: block !important; } body.tax-product_cat.woocommerce .goplay-shop-layout, body.tax-product_cat.woocommerce .goplay-shop-results { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } body.tax-product_cat.woocommerce .goplay-shop-results { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } body.tax-product_cat.woocommerce .woocommerce .products.columns-4, body.tax-product_cat.woocommerce .products.columns-4, body.tax-product_cat.woocommerce ul.products.columns-4 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; float: none !important; display: grid !important; } body.tax-product_cat.woocommerce .woocommerce .products.columns-4 li.product, body.tax-product_cat.woocommerce .products.columns-4 li.product, body.tax-product_cat.woocommerce ul.products.columns-4 li.product { width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; margin: 0 !important; clear: none !important; }