.page-title .vcard{border:0;padding:0}.byline{color:#999}.entry-content img{max-width:100%;height:auto}.entry-content .alignleft,.entry-content img.alignleft{margin-right:1.5em;display:inline;float:left}.entry-content .alignright,.entry-content img.alignright{margin-left:1.5em;display:inline;float:right}.entry-content .aligncenter,.entry-content img.aligncenter{margin-right:auto;margin-left:auto;display:block;clear:both}.entry-content object,.entry-content video{max-width:100%;height:auto}.entry-content pre{background:#eee;border:1px solid #cecece;padding:10px}.wp-caption{max-width:100%;background:#eee;padding:5px}.wp-caption img{max-width:100%;margin-bottom:0;width:100%}.wp-caption p.wp-caption-text{font-size:.85em;margin:4px 0 7px;text-align:center}.post-password-form input[type=submit]{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;transition:background-color .25s ease-out,color .25s ease-out;font-size:.9rem;line-height:1;text-align:center;cursor:pointer;background-color:#1779ba;color:#fefefe}[data-whatinput=mouse] .post-password-form input[type=submit]{outline:0}.post-password-form input[type=submit]:focus,.post-password-form input[type=submit]:hover{background-color:#14679e;color:#fefefe}.gallery{max-width:100%;margin-left:auto;margin-right:auto;margin-right:-15px;margin-left:-15px}.gallery::after,.gallery::before{content:' ';display:table}.gallery::after{clear:both}.gallery.gallery-columns-1>dl{width:100%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-1>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-1>dl:last-child:not(:first-child){float:right}.gallery.gallery-columns-2>dl{width:50%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-2>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-2>dl:last-child:not(:first-child){float:right}.gallery.gallery-columns-3>dl{width:33.33333%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-3>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-3>dl:last-child:not(:first-child){float:right}.gallery.gallery-columns-4>dl{width:25%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-4>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-4>dl:last-child:not(:first-child){float:right}.gallery.gallery-columns-5>dl{width:20%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-5>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-5>dl:last-child:not(:first-child){float:right}.gallery.gallery-columns-6>dl{width:16.66667%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-6>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-6>dl:last-child:not(:first-child){float:right}.gallery.gallery-columns-7>dl{width:14.28571%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-7>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-7>dl:last-child:not(:first-child){float:right}.gallery.gallery-columns-8>dl{width:12.5%;float:left;padding-right:.625rem;padding-left:.625rem}@media print,screen and (min-width:40em){.gallery.gallery-columns-8>dl{padding-right:.9375rem;padding-left:.9375rem}}.gallery.gallery-columns-8>dl:last-child:not(:first-child){float:right}.gallery dl{width:100%;float:left;padding-left:.9375rem;padding-right:.9375rem}.gallery dl:last-child:not(:first-child){float:right}.page-navigation{margin-top:1rem}#comments .commentlist{margin-left:0}#respond ul{margin-left:0}.commentlist li{position:relative;clear:both;overflow:hidden;list-style-type:none;margin-bottom:1.5em;padding:.7335em 10px}.commentlist li:last-child{margin-bottom:0}.commentlist li ul.children{margin:0}.commentlist li[class*=depth-]{margin-top:1.1em}.commentlist li.depth-1{margin-left:0;margin-top:0}.commentlist li:not(.depth-1){margin-left:10px;margin-top:0;padding-bottom:0}.commentlist .vcard{margin-left:50px}.commentlist .vcard cite.fn{font-weight:700;font-style:normal}.commentlist .vcard time{float:right}.commentlist .vcard time a{color:#999;text-decoration:none}.commentlist .vcard time a:hover{text-decoration:underline}.commentlist .vcard img.avatar{position:absolute;left:10px;padding:2px;border:1px solid #cecece;background:#fff}.commentlist .comment_content p{margin:.7335em 0 1.5em;font-size:1em;line-height:1.5em}.commentlist .comment-reply-link{float:right}.respond-form{margin:1.5em 10px;padding-bottom:2.2em}.respond-form form{margin:.75em 0}.respond-form form li{list-style-type:none;clear:both;margin-bottom:.7335em}.respond-form form li label,.respond-form form li small{display:none}.respond-form form input[type=email],.respond-form form input[type=text],.respond-form form input[type=url],.respond-form form textarea{padding:3px 6px;background:#efefef;border:2px solid #cecece;line-height:1.5em}.respond-form form input[type=email]:focus,.respond-form form input[type=text]:focus,.respond-form form input[type=url]:focus,.respond-form form textarea:focus{background:#fff}.respond-form form input[type=email]:invalid,.respond-form form input[type=text]:invalid,.respond-form form input[type=url]:invalid,.respond-form form textarea:invalid{outline:0;border-color:#fbc2c4;background-color:#f6e7eb;-ms-box-shadow:none;box-shadow:none}.respond-form form input[type=email],.respond-form form input[type=text],.respond-form form input[type=url]{max-width:400px;min-width:250px}.respond-form form textarea{resize:none;width:97.3%;height:150px}#comment-form-title{margin:0 0 1.1em}#allowed_tags{margin:1.5em 10px .7335em 0}.nocomments{margin:0 20px 1.1em}.sidebar li{list-style:none}.widget ul{margin:0}.footer{clear:both;margin-top:1em}body#tinymce{margin:20px}.gform_body ul{list-style:none outside none;margin:0} /* ================================ */ /* START CUSTOM STYLING */ /* ================================ */ /* ==================== */ /* IMPORTS & HELPERS */ /* ==================== */ @font-face { font-family: 'neue_worldregular'; src: url('../fonts/neueworld-regular-webfont.woff2') format('woff2'), url('../fonts/neueworld-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'); @-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotatingr /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotatingr { from { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } to { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .rotating-rev { -webkit-animation: rotatingr 3 s linear infinite; -moz-animation: rotatingr: 3px;2s linear infinite; -ms-animation: rotatingr 3 s linear infinite; -o-animation: rotatingr 3 s linear infinite; animation: rotatingr 3 s linear infinite; } .rotating { -webkit-animation: rotating 3 s linear infinite; -moz-animation: rotating 3 s linear infinite; -ms-animation: rotating 3 s linear infinite; -o-animation: rotating 3 s linear infinite; animation: rotating 3 s linear infinite; } .rotating-rev { -webkit-animation: rotatingr 4s linear infinite; -moz-animation: rotatingr 4s linear infinite; -ms-animation: rotatingr 4s linear infinite; -o-animation: rotatingr 4s linear infinite; animation: rotatingr 4s linear infinite; } .rotating { -webkit-animation: rotating 4s linear infinite; -moz-animation: rotating 4s linear infinite; -ms-animation: rotating 4s linear infinite; -o-animation: rotating 4s linear infinite; animation: rotating 4s linear infinite; } /* ==================== */ /* GENERAL */ /* ==================== */ /* COLORS */ /* END COLORS */ body{ font-size: 20px; background: #181818; color: #E8E5DE; font-family: 'Roboto', sans-serif;} .overlayr{ background-image: url(); background-position: center center; background-size: cover; opacity: 1; z-index: 0; position: fixed; left: 0; right: 0; top:0; width: 120%; height: 100%; pointer-events: none; } a{text-decoration: none; color: #E8E5DE;} a:hover, a:focus, a:active{color: #B0862C;} p a{} .inner{max-width: 1280px; width: 100%; margin: 0 auto; position: relative;} .inner-txt{max-width: 800px; width: 90%; margin: 0 auto;} .title{font-family: 'neue_worldregular'; line-height:1.2; margin-bottom:40px;} .--100{font-size: 100px;} .--60{font-size: 60px;} .--30{font-size: 35px;} .--20{font-size: 20px;} .rel{position: relative;} div.sep-1{height: 40px; width: 100%; clear: both; position: relative;} div.sep-2{height: 20px; width: 100%; clear: both; position: relative;} div.sep{height: 80px; width: 100%; clear: both; position: relative;} div.sep2{height: 120px; width: 100%; clear: both; position: relative;} div.sep3{height: 160px; width: 100%; clear: both; position: relative;} .gold{color: #B0862C;} .white{color: #E8E5DE; } .bg-gold{background-color: #B0862C;} .bg-white{background-color: #E8E5DE;} .t-up{text-transform: uppercase;} .rel{position: relative;} /* ==================== */ /* HEADER */ /* ==================== */ button.menu{position: absolute; top: -10px; right: 200px; z-index:99; cursor: pointer;} #main-nav{width: 100%;} #main-nav li{width: 90%; margin-left: 5%; text-align: center; padding: 40px 0; position: relative; transition: all 0.6s;} #main-nav li:before{content: ''; position: absolute; left: 0; top:50%; margin-top: -10px; border: solid 3px #B0862C; width: 20px; height: 20px; border-radius: 50%; transition: all 0.6s; transform-origin:center;} #main-nav li:after{content: ''; position: absolute; right: 0; top:50%; margin-top: -10px; border: solid 3px #B0862C; width: 20px; height: 20px; border-radius: 50%; transition: all 0.6s; transform-origin:center;} #main-nav li:hover:before{background: #B0862C; border-radius: 5px; transform: rotate(-45deg); transform-origin:center;} #main-nav li:hover:after{background: #B0862C; border-radius: 5px; transform: rotate(45deg); transform-origin: center;} #main-nav li a{font-size:60px; position: relative; display:block; color: #B0862C; font-family: 'neue_worldregular'; text-transform: uppercase; transition: all 0.6s;} #main-nav li a:after{content: ''; height: 3px; background: #B0862C; width: 0%; position: absolute; bottom: -10px; left: 50%; transition: all 0.4s;} #main-nav li a:hover:after{content: ''; width: 100px; left: 50%; margin-left: -50px;} .menu .active>a { background: none; color: #E8E5DE;} /* ==================== */ /* HOME */ /* ==================== */ #hero{position: relative; width: 90%; min-height: 90vh; margin-top: 50px; margin-left: 5%;} #hero .layr{position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;} #menu{position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: none;} #menu .inner{position: absolute; top: 50%; left: 50%; width: 90%; max-width: 90%; transform: translate(-50%, -50%);} #hero .layr .logo{position: absolute; top: 50%; left: 50%; width: 80%; max-width: 600px; transform: translate(-50%, -50%);} #hero a.btn-u{padding: 18px 36px;} #hero a.btn-u:active, #hero a.btn-u:focus, #hero a.btn-u:hover{padding: 18px 36px; color: #F7f7f7;} #hid{max-width: 800px; display:none; width: 90%; overflow: hidden;} .top, .top2, .bottom{position: absolute; background: #B0862C; width: calc(100% - 100px); height: 3px; left: 50px; z-index: 10;} .top{top: 8px; width: calc(100% - 350px);} .top2{top: 8px; width: 130px; right: 50px; left: auto;} .bottom{bottom: 8px;} .right, .left{position: absolute; background: #B0862C; height: calc(100% - 100px); width: 3px; top: 50px; z-index: 10;} .right{right: 8px;} .left{left: 8px;} .circle{width: 60px; height: 60px; border: solid 3px #B0862C; border-radius: 50%; z-index:19;} .circle.dec{position: absolute;} .circle.dec.l.t{top: -20px; left: -20px;} .circle.dec.l.b{bottom: -20px; left: -20px;} .circle.dec.l.b img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .circle.dec.l.b img, .circle.dec.r.b img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .circle.dec.r.b div.in-circle{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #B0862C; border-radius: 50%;} .circle.dec.r.t{top: -20px; right: -20px;} .circle.dec.r.b{bottom: -20px; right: -20px;} div[class^="star-"]{position: absolute; width: 40px; height: 1px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%;} div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important;} #imgr{width: 500px; height: auto; position: absolute; transition: all 0.4s ease-out;} #imgr .ovr{position:absolute; width: 100%; height: 100%; top: 0; left: 0; background:#181818; z-index: 9;} #imgr.img-1{left:-10%; top: 20px;} #imgr.img-2{top:50%; left: 10%;} #imgr.img-3{bottom: -5%; ;left: 20%;} #imgr.img-4{left: 30%; top: 10%;} #imgr.img-5{top: -5%; left: 55%} #imgr.img-6{top: 20%; left: 50%;} #imgr.img-7{bottom:-5%; left: 65%} #imgr.img-8{top: 20%; right: 0; text-align: right;} #imgr.img-9{bottom: 50px; right: -10%;} #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 350px;} /* Close */ #imgr.img-4, #imgr.img-6{z-index: 2; width: 450px;} /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 250px;} /* Far */ #imgr.img-1{z-index: 4;} #imgr.img-4{width: 250px;} #imgr.img-1 img, #imgr.img-5 img, #imgr.img-9 img{width: 100%; -webkit-filter:blur(0rem); -ms-filter:blur(0rem); -moz-filter:blur(0rem); filter:blur(0rem); } /* Close */ #imgr.img-3 img, #imgr.img-4 img, #imgr.img-6 img{width: 100%; -webkit-filter:blur(0.025rem); -ms-filter:blur(0.025rem); -moz-filter:blur(0.025rem); filter:blur(0.025rem);} /* Medium */ #imgr.img-2 img, #imgr.img-7 img, #imgr.img-8 img{width: 100%; -webkit-filter:blur(0.5rem); -ms-filter:blur(0.05rem); -moz-filter:blur(0.05rem); filter:blur(0.05rem);} /* Far */ #imgr.img-1 .ovr, #imgr.img-5 .ovr, #imgr.img-9 .ovr{opacity: 0.25;} /* Close */ #imgr.img-3 .ovr, #imgr.img-4 .ovr, #imgr.img-6 .ovr{opacity: 0.50;} /* Medium */ #imgr.img-2 .ovr, #imgr.img-7 .ovr, #imgr.img-8 .ovr{opacity: 0.75;} /* Far */ #intro{position: relative; font-size:20px;} #intro:before{content: ''; position: absolute; width: 3px; left: 50%; margin-left:-1px; background: #B0862C; height: 200px; bottom: 110%;} #intro:after{content: ''; position: absolute; width: 3px; left: 50%; margin-left:-1px; background: #B0862C; height: 200px; top: 110%;} #intro .sidr.l{position: absolute; width: calc(45% - 475px); height: 3px; left: 5%; top: 50%; background: #B0862C;} #intro .sidr.l:before{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; left: -25px; top: -10px;} #intro .sidr.l:after{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; right: -25px; top: -10px;} #intro .sidr.r{position: absolute; width: calc(45% - 475px); height:3px; right: 5%; top: 50%; background: #B0862C;} #intro .sidr.r:before{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; left: -25px; top: -10px;} #intro .sidr.r:after{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; right: -25px; top: -10px;} #secciones{width: 90%; margin-left: 5%; margin-right: 5%; position: relative;} #secciones .item{position: relative; margin-bottom: 40px;} #secciones .item:after{content: ''; width: 2px; height: 180px; position: absolute; left: 50%; margin-left: -1px; bottom: -240px; background: #B0862C;} #secciones .item.last{margin-bottom: -200px;} #secciones .item.last:after{content: ''; width: 2px; height: 0px; position: absolute; left: 50%; margin-left: -1px; bottom: -240px; background: #B0862C;} #secciones .l .text-box{margin-left: -150px; position: relative; z-index: 12;} #secciones .r .text-box{margin-right: -150px; position: relative; z-index: 12;} #secciones .l .ovr{position:absolute; width: 100%; height: 100%; top: 0; right: -1px; background:url('../images/degradado.png') top right repeat-y; background-size: 100% auto; z-index: 9;} #secciones .r .ovr{position:absolute; width: 100%; height: 100%; top: 0; left: -1px; background:url('../images/degradado.png') top right repeat-y; background-size: 100% auto; z-index: 9; transform: rotate(180deg);} #secciones .bottom{bottom: 8px;} #secciones .circle.home{width: 120px; height: 120px; border: solid 1px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer;} #secciones .l .text-box .circle.home{float: right;} #secciones .circle.home:before{content: 'Ver Más'; position: absolute; top: 55%; right: 50%; width: 200px; transition: all 0.6s; opacity: 1; } #secciones .circle.home:after{content: ''; position: absolute; top: 50%; right: 50%; width: 200px; background: #B0862C; height: 1px; transition: all 0.6s; transform:translateY(-50%);} #secciones .circle.home div[class^="star-"]{position: absolute; width: 40px; height: 1px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #secciones .circle.home div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important; width: 40px;} #secciones .circle.home div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important; width: 40px;} #secciones .circle.home div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important; width: 40px;} #secciones .circle.home div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important; width: 40px;} #secciones .circle.home div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; width: 40px;} #secciones .circle.home:hover:before{content: 'Ver Más'; opacity: 1;} #secciones .circle.home:hover:after{content: ''; position: absolute; top: 50%; right: 50%; width: 0px; background: #B0862C; height: 1px;} #secciones .circle.home:hover div[class^="star-"]{position: absolute; width: 110px; height: 1px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; } #secciones .circle.home:hover div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important; width: 110px;} #secciones .circle.home:hover div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important; width: 110px;} #secciones .circle.home:hover div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important; width: 110px;} #secciones .circle.home:hover div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important; width: 110px;} #secciones .circle.home:hover div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; width: 110px;} #secciones .circle.gen.--5{width: 300px; height: 300px; border: solid 0px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; position: absolute; top: 50%; right: -250px;} #secciones .circle.gen.--5 div[class^="star-"]{position: absolute; width: 300px; height: 2px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #secciones .circle.gen.--5 div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--5 div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--5 div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--5 div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--5 div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; } #secciones .circle.gen.--2-5{width: 300px; height: 300px; border: solid 0px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; position: absolute; top: 25%; right: -250px;} #secciones .circle.gen.--2-5 div[class^="star-"]{position: absolute; width: 300px; height: 2px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #secciones .circle.gen.--2-5 div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--2-5 div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--2-5 div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--2-5 div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--2-5 div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; } #secciones .circle.gen.--7-5{width: 300px; height: 300px; border: solid 0px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; position: absolute; top: 75%; left: -250px;} #secciones .circle.gen.--7-5 div[class^="star-"]{position: absolute; width: 300px; height: 2px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #secciones .circle.gen.--7-5 div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--7-5 div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--7-5 div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--7-5 div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} #secciones .circle.gen.--7-5 div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; } #tienda{width: 90%; margin-left: 5%; margin-right: 5%;} #tienda .title{margin-bottom: 0;} #tienda .cell.textr{position: relative; z-index: 1; margin-left: 10%; margin-top: 20%; border: solid 3px #B0862C; padding: 10px;} #tienda .cell.textr .innert{padding: 40px 80px;} #tienda .cell.imgr{margin-left: -20%; position: relative;} #tienda .cell.imgr:after{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #181818; opacity: 0.5; } #tienda .cell.imgr img{width: 100%;} .lini{position: relative;} .lini.l:before{content:''; background: #B0862C; width: 88%; height: 4px; position: absolute; top: 50%; margin-top: -2px; left: 7%;} .lini.r:before{content:''; background: #B0862C; width: 88%; height: 4px; position: absolute; top: 50%; margin-top: -2px; right: 7%;} .lini.l:after{content:''; border:solid 3px #B0862C; width: 24px; height: 24px; border-radius: 50%; position: absolute; top: 50%; margin-top: -12px; right: 0%;} .lini.r:after{content:''; border:solid 3px #B0862C; width: 24px; height: 24px; border-radius: 50%; position: absolute; top: 50%; margin-top: -12px; left: 0%;} .lini.l .circle{position: absolute; left: -24px; top: 50%; margin-top: -30px; width: 60px; height: 60px;} .lini.r .circle{position: absolute; right: -24px; top: 50%; margin-top: -30px; width: 60px; height: 60px;} .texti{text-align: center;} .texti.title{margin:0;} .linr{position: relative;} .linr.y{position: relative; width:100%; height: 10px;} .linr.y:after{content: ''; position: absolute; width:calc(100% - 100px); left: 50px; top: 50%; height: 3px; background: #B0862C;} .textir:before{content:''; border:solid 3px #B0862C; width: 24px; height: 24px; border-radius: 50%; position: absolute; top: 50%; margin-top: -12px; right: 2%;} .textir:after{content:''; border:solid 3px #B0862C; width: 24px; height: 24px; border-radius: 50%; position: absolute; top: 50%; margin-top: -12px; left: 2%;} .linr.l .circle{position: absolute; left: -24px; top: 50%; margin-top: -30px; width: 60px!important; height: 60px!important;} .linr.l .circle.r{position: absolute; right: -24px; left: auto; top: 50%; margin-top: -30px; width: 60px!important; height: 60px!important;} .textir{text-align: center; position: relative; display: inline-block; margin: -40px auto 40px; padding: 5px 50px; margin-top: -40px; background: #181818;} .textir.title{} #tienda .circle.gen{width: 200px; height: 200px; border: solid 0px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; position: absolute; bottom: -90px; right: -85px;} #tienda .circle.gen div[class^="star-"]{position: absolute; width: 200px; height: 2px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #tienda .circle.gen div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} #tienda .circle.gen div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} #tienda .circle.gen div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} #tienda .circle.gen div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} #tienda .circle.gen div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; } #frases{width: 90%; margin-left: 5%; margin-right: 5%;} #frases .cell:first-child{text-align: right; border-right: solid 3px #B0862C;} #frases .cell{padding: 150px 100px;} .menu.accordion-menu{width: 100%; max-width: 400px; border: solid 3px #B0862C; margin: 0 auto 40px;} .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle)>a::after { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-bottom-width: 0; border-top-style: solid; border-color: #B0862C transparent transparent; position: absolute; top: 50%; margin-top: -3px; right: 1rem; } .accordion-menu .is-accordion-submenu-item{border-bottom: solid 3px #B0862C;} .accordion-menu .is-accordion-submenu-item:last-child{border-bottom: solid 0px #B0862C;} ul.accordion-menu, ul.is-accordion-submenu { display: block; list-style-type: none; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } .accordion-menu .nested.is-accordion-submenu{margin-left:0;} /* ==================== */ /* PRODUCTOS */ /* ==================== */ #productos.content{width: 90%; margin-left: 5%; margin-right: 5%;} #productos.content .panel article{width: 90%; margin: 20px auto; padding: 10px;} #productos.content .panel article img{width: 100%; transition: 0.4s all ease;} #productos.content .panel article:hover > section > a > img{opacity: 0.5;} #productos.content .panel article p, #productos.content .panel article .title{margin: 0; padding: 0;} #productos .top, #productos .top2, #productos .bottom{position: absolute; background: #B0862C; width: calc(100% - 50px); height: 3px; left: 25px; z-index: 10;} #productos .top2{top: 0; width: 130px; right: 50px; left: auto;} #productos .bottom{bottom: 0;} #productos .right, #productos .left{position: absolute; background: #B0862C; height: calc(100% - 50px); width: 3px; top: 25px; z-index: 10;} #productos .right{right: 0;} #productos .left{left: 0;} #productos .circle{width: 25px; height: 25px; border: solid 3px #B0862C; border-radius: 50%; z-index:5;} #productos .circle.dec{position: absolute;} #productos .circle.dec.l.t{top: -10px; left: -10px;} #productos .circle.dec.l.b{bottom: -10px; left: -10px;} #productos .circle.dec.r.t{top: -10px; right: -10px;} #productos .circle.dec.r.b{bottom: -10px; right: -10px;} #productos .lini.r .circle{width: 60px; height:60px;} #productos .lini.l .circle{width: 60px; height:60px;} #intro.alt{position: relative; font-size:20px;} #intro.alt:before{content: ''; position: absolute; width: 3px; left: 50%; margin-left:-1px; background: #B0862C; height: 0px; bottom: 110%;} #intro.alt:after{content: ''; position: absolute; width: 3px; left: 50%; margin-left:-1px; background: #B0862C; height: 200px; top: 110%;} #intro.alt .sidr.l{position: absolute; width: calc(45% - 600px); height: 3px; left: 5%; top: 50%; background: #B0862C;} #intro.alt .sidr.l:before{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; left: -25px; top: -10px;} #intro.alt .sidr.l:after{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; right: -25px; top: -10px;} #intro.alt .sidr.r{position: absolute; width: calc(45% - 600px); height:3px; right: 5%; top: 50%; background: #B0862C;} #intro.alt .sidr.r:before{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; left: -25px; top: -10px;} #intro.alt .sidr.r:after{content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: solid 3px #B0862C; right: -25px; top: -10px;} #intro.alt .inner-txt{max-width: 1080px; width: 90%; margin: 0 auto;} .cont99 .imgr-hold{width: 70%; max-width: 1200px; min-width: 300px; height: 100%; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: 0;} .cont99 .fore{position: relative; z-index: 1;} .cont99 .imgr-hold .ovr{position:absolute; width: 100%; height: 100%; bottom: -1px; left: 0; background:url('../images/degradado-v.png') top right repeat-x; background-size: auto 100%; z-index: 9;} .main-img{width: 400px; height: 600px; position: absolute; bottom:-100px; left: 50%; margin-left: -200px; overflow:hidden;} #hero .single-textr{position: relative; z-index: 10;} #hero .imgr.l .ovr{position:absolute; width: 100%; height: 100%; top: 0; right: -1px; background:url('../images/degradado.png') top right repeat-y; background-size: 100% auto; z-index: 9;} #hero.artista .circle.a{width: 120px; height: 120px; border: solid 1px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; transform: rotate(90deg); position: absolute; bottom: 0; right: 8.33333%; margin-right: -60px;} #hero.artista .l .text-box .circle.a{float: right;} #hero.artista .circle.a:before{content: 'Ver Obras'; position: absolute; top: 55%; right: 50%; width: 200px; transition: all 0.6s; opacity: 1; } #hero.artista .circle.a:after{content: ''; position: absolute; top: 50%; right: 50%; width: 200px; background: #B0862C; height: 1px; transition: all 0.6s; transform:translateY(-50%);} #hero.artista .circle.a div[class^="star-"]{position: absolute; width: 40px; height: 1px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #hero.artista .circle.a div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important; width: 40px;} #hero.artista .circle.a div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important; width: 40px;} #hero.artista .circle.a div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important; width: 40px;} #hero.artista .circle.a div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important; width: 40px;} #hero.artista .circle.a div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; width: 40px;} #hero.artista .circle.a:hover:before{content: 'Ver Obras'; opacity: 1;} #hero.artista .circle.a:hover:after{content: ''; position: absolute; top: 50%; right: 50%; width: 0px; background: #B0862C; height: 1px;} #hero.artista .circle.a:hover div[class^="star-"]{position: absolute; width: 110px; height: 1px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; } #hero.artista .circle.a:hover div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important; width: 110px;} #hero.artista .circle.a:hover div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important; width: 110px;} #hero.artista .circle.a:hover div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important; width: 110px;} #hero.artista .circle.a:hover div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important; width: 110px;} #hero.artista .circle.a:hover div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; width: 110px;} #hero.artista .circle.gen.--5{width: 300px; height: 300px; border: solid 0px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; position: absolute; top: 50%; right: -250px;} #hero.artista .circle.gen.--5 div[class^="star-"]{position: absolute; width: 300px; height: 2px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #hero.artista .circle.gen.--5 div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--5 div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--5 div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--5 div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--5 div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; } #hero.artista .circle.gen.--2-5{width: 300px; height: 300px; border: solid 0px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; position: absolute; top: 25%; right: -250px;} #hero.artista .circle.gen.--2-5 div[class^="star-"]{position: absolute; width: 300px; height: 2px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #hero.artista .circle.gen.--2-5 div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--2-5 div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--2-5 div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--2-5 div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--2-5 div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; } #hero.artista .circle.gen.--7-5{width: 300px; height: 300px; border: solid 0px #E8E5DE; border-radius: 50%; z-index:5; position: relative; cursor: pointer; position: absolute; top: 75%; left: -250px;} #hero.artista .circle.gen.--7-5 div[class^="star-"]{position: absolute; width: 300px; height: 2px; top: 50%; left: 50%; background: #B0862C; transform: rotate(0deg) translate(-50%, -50%); transform-origin: 0% 0%; transition: all 0.6s;} #hero.artista .circle.gen.--7-5 div.star-2{transform: rotate(30deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--7-5 div.star-3{transform: rotate(60deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--7-5 div.star-4{transform: rotate(90deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--7-5 div.star-5{transform: rotate(120deg) translate(-50%, -50%)!important;} #hero.artista .circle.gen.--7-5 div.star-6{transform: rotate(150deg) translate(-50%, -50%)!important; } .artista-list{} .artista-list a.button{background: none; border: solid 2px #B0862C; width: 100%; font-size: 16px; padding: 10px; transition: 0.6s all ease} .artista-list a.button:hover{background: #B0862C;} .artista-list a .arrow{width: 50px; height: 2px; background: #FFFFFF; position: relative; display: inline-block; margin-left: 20px; top: -3px; transition: 0.2s all ease;} .artista-list a .arrow:before{content: ''; width: 5px; height: 2px; background: #FFFFFF; position: absolute; right: 0; transform: rotate(45deg); transform-origin: right;} .artista-list a .arrow:after{content: ''; width: 5px; height: 2px; background: #FFFFFF; position: absolute; right: 0; transform: rotate(-45deg); transform-origin: right;} #hero.artista .imgr img{height: auto; width: 100%; float: right; max-width: 600px;} #hero.artista .ovr{right: -25%;} /* ==================== */ /* FOOTER */ /* ==================== */ footer.footer{width: 90%; margin-left: 5%; margin-right: 5%; position: relative; padding: 80px 70px 80px 30px;} footer.footer .title{margin-bottom:0;} footer.footer p{margin: 0} footer.footer .top{position: absolute; background: #B0862C; width: calc(100% - 100px); height: 3px; left: 50px; z-index: 10;} #footer-links li{width: 100%; text-align: left; padding: 0.5rem 0;} #hero.contacto{padding: 70px 30px; position: relative; height: auto; min-height:90vh;} .gform_wrapper .top_label .gfield_label, .gform_wrapper legend.gfield_label{display: none!important;} .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_page_footer input.button, .gform_wrapper .gform_page_footer input[type=submit]{background: #B0862C; width: 97.5%!important; margin: 0!important;} .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]){background: none!important; border: solid 3px #B0862C; padding: 5px 10px!important; color: #B0862C; margin: 0!important;} .gform_wrapper textarea{background: none!important; border: solid 3px #B0862C; padding: 5px 10px!important; color: #B0862C;} .gform_wrapper .top_label li.gfield.gf_left_half, .gform_wrapper .top_label li.gfield.gf_right_half{padding-right:5px; margin-top: 5px;} .about-holder{position: absolute; top: 35%; right: -20%; border: solid 3px #B0862C; padding: 20px; z-index: 99; max-width: 500px;} .about-holder .in{padding: 50px;} p.contact{margin: 0; padding: 0;} /* ==================== */ /* @MEDIA QUERIES@ */ /* ==================== */ /* WIDTH QUERIES */ @media screen and (max-width: 1700px){ #tienda .cell.textr .innert{padding: 40px; font-size: 25px;} .about-holder{left: 10%;} } @media screen and (max-width: 1550px){ .about-holder{right: -30%; left: 20%;} .about-holder .in{padding: 30px;} #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 300px;} /* Close */ #imgr.img-1, #imgr.img-4, #imgr.img-6{z-index: 2; width: 350px;} /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 150px;} /* Far */ #imgr.img-4{width: 150px;} } @media screen and (max-width: 1450px){ .about-holder{right: -40%; left: 30%;} .about-holder .in{padding: 20px;} .about-holder .--30{font-size: 20px;} #intro.alt .sidr{display: none;} } @media screen and (max-width: 1250px){ .--100{font-size: 80px;} .--60{font-size: 50px;} .--30{font-size: 25px;} .--20{font-size: 20px;} button.menu{font-size: 30px;} #tienda .cell.textr .innert{padding: 30px; font-size: 20px;} #hero.artista .imgr img { height: auto; width: 80%; float: left;} #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 250px;} /* Close */ #imgr.img-1, #imgr.img-4, #imgr.img-6{z-index: 2; width: 300px;} /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 120px;} /* Far */ #imgr.img-4{width: 120px;} } @media screen and (max-width: 1100px){ #intro .sidr{display: none;} #secciones .circle.home:before, #secciones .circle.home:after{width: 150px;} .main-img{width:300px; height:400px; margin-left: -150px;} } @media screen and (max-width: 64em) { #hero.contacto{padding: 0px 30px 20px;} #map{height: 300px; margin-top: 50px;} #secciones{margin-top:-60px;} #secciones .item{margin-bottom:0;} #secciones .l .text-box{margin: 20px 0 -60px;} #secciones .r .text-box{margin: 20px 0 -60px;} #secciones .circle.home{float: right;} #secciones .l img{width: 70%;} #secciones .r img{width: 70%;} #tienda .cell.textr{margin: 10% 0 -10%;} #tienda .cell.imgr{margin-left: 10%} body{overflow-x: hidden;} #frases .cell:first-child {border-right: 0px solid rgb(176, 134, 44);} #frases .cell{padding: 30px 10px;} #hero.artista .imgr img { height: auto; width: 100%; float: left;} #hero.cat .main-img{bottom: 0px;} #hero.cat{margin-bottom: -140px;} #hero .single-textr{} #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 250px;} /* Close */ #imgr.img-1, #imgr.img-4, #imgr.img-6{z-index: 2; width: 300px; } /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 120px; display: none;} /* Far */ #imgr.img-4{width: 120px;} #intro.alt::after{height: 150px; top: 101%;} } @media screen and (max-width: 1000px){ #main-nav li{padding: 30px 0;} #main-nav li a{font-size: 50px;} .about-holder{top: 10%;} } @media screen and (max-width: 950px){ .--100{font-size: 60px;} .--60{font-size: 40px;} .--30{font-size: 20px;} .--20{font-size: 18px;} body, p{ font-size: 18px;} button.menu{font-size: 30px;} .about-holder{display: none;} .textir{margin-top: -33px;} } @media screen and (max-width: 850px){ #main-nav li{padding: 20px 0;} #main-nav li a{font-size: 40px;} #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 250px; display: none;} /* Close */ #imgr.img-1, #imgr.img-4, #imgr.img-6{z-index: 2; width: 300px; } /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 120px; display: none;} /* Far */ #imgr.img-4{width: 120px; display: none;} #imgr.img-6{width: 50%;} } @media screen and (max-width: 700px){ #main-nav li{padding: 30px;} #main-nav li a{font-size: 35px;} .cont99 .imgr-hold{width: 100%;} #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 250px; display: none;} /* Close */ #imgr.img-1, #imgr.img-4, #imgr.img-6{z-index: 2; width: 300px; display:none;} /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 120px; display: none;} /* Far */ #imgr.img-4{width: 120px; display: none;} #imgr.img-6{width: 70%; display: block; top: 5%; left: 30%;} .textir{margin-top: -30px; padding: 5px 20px;} .textir:after, .textir:before{display: none;} } @media screen and (max-width: 40em){ #secciones{margin-top:-20px;} #hero{position: relative; width: 86%; min-height: 85vh; margin-top: 50px; margin-left: 7%;} #tienda, #productos.content, #frases{width: 86%; margin-left: 7%; margin-right: 7%; margin-top: 100px;} footer.footer{position: relative; width: 86%; margin-left: 7%;} #hero .menu.accordion-menu{width: 100%; max-width: 90%; border: none;} #hero .menu.accordion-menu li{padding: 20px 30px;} #hero .menu.accordion-menu li a{font-size: 30px;} .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle)>a::after { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-bottom-width: 0; border-top-style: solid; border-color: #B0862C transparent transparent; position: absolute; top: 50%; margin-top: -3px; right: 1rem; } #main-nav li:before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -5px; border: solid 2px #B0862C; width: 10px; height: 10px; border-radius: 50%; transition: all 0.6s; transform-origin: center; } #main-nav li:after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -5px; border: solid 2px #B0862C; width: 10px; height: 10px; border-radius: 50%; transition: all 0.6s; transform-origin: center; } .accordion-menu .is-accordion-submenu-item{border-bottom: solid 3px #B0862C;} .accordion-menu .is-accordion-submenu-item:last-child{border-bottom: solid 0px #B0862C;} ul.accordion-menu, ul.is-accordion-submenu { display: block; list-style-type: none; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; } .accordion-menu .nested.is-accordion-submenu{margin-left:0;} #hero .single-textr{margin-top: 50px;} #map{height: 300px; margin-top: 50px;} footer.footer{padding: 50px 30px;} #productos.content .prod-item{margin-bottom: 20px;} #productos > .grid-x{margin-top: -80px;} #intro.cat.alt::after{top: auto; bottom: -165px;} #intro.about.alt::after{top: auto; bottom: -165px;} } @media screen and (max-width:460px){ #secciones .l img{width: 100%;} #secciones .r img{width: 100%;} #hero .menu.accordion-menu li a{font-size: 20px;} .--100{font-size: 50px;} .--60{font-size: 30px;} .--30{font-size: 20px;} .--20{font-size: 18px;} .main-img{width:260px; height:400px; margin-left: -130px;} #imgr.img-6{width: 90%; display: block; top: 10%; left: 25%;} #hero.cat .fore .title{margin-top: -40px;} .textir{margin-top: -30px; padding: 5px 50px;} .textir:after, .textir:before{display: none;} .linr:after{display: none;} } @media screen and (max-width:380px){ #hero .menu.accordion-menu li a{font-size: 18px;} #hero .menu.accordion-menu li{padding: 20px 10px;} .--100{font-size: 38px;} .--60{font-size: 30px;} .--30{font-size: 20px;} .--20{font-size: 18px;} button.menu{right: 200px;} .top2 { top: 8px; width: 140px; right: 50px; left: auto;} .main-img{width:200px; height:350px; margin-left: -100px;} #frases .cell:first-child {padding: 30px 0px;} #frases .cell{padding: 30px 0px;} } /* HEIGHT QUERIES */ @media screen and (max-height: 900px){ #main-nav li{padding: 30px;} #main-nav li a{font-size: 50px;} } @media screen and (max-height: 750px){ #main-nav li{padding: 20px 30px;} #main-nav li a{font-size: 40px;} } @media screen and (max-height: 550px){ #main-nav li{padding: 15px 30px;} #main-nav li a{font-size: 30px;} } @media screen and (max-height: 450px){ #main-nav li{padding: 10px 30px;} #main-nav li a{font-size: 30px;} } /* DEVICE QUERIES */ @media screen and (max-height: 1024px){ #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 250px;} /* Close */ #imgr.img-1, #imgr.img-4, #imgr.img-6{z-index: 2; width: 300px; } /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 120px;} /* Far */ #imgr.img-4{width: 120px;} .main-img{width: 250px; height: 400px; margin-left: -125px;} } @media screen and (max-height: 760px){ #imgr.img-3, #imgr.img-5, #imgr.img-9{z-index:3; width: 180px;} /* Close */ #imgr.img-1, #imgr.img-4, #imgr.img-6{z-index: 2; width: 200px; } /* Medium */ #imgr.img-2, #imgr.img-7, #imgr.img-8{z-index: 1; width: 120px; display:none;} /* Far */ #imgr.img-4{width: 120px;} } @media screen and (orientation: landscape) and (max-height: 450px){ #main-nav li{padding: 2px 30px;} #hero .layr .logo{width: 50%;} #secciones .circle.gen.--5, #tienda .circle.gen{display:none;} #tienda{margin-top: 60px;} .main-img{display:none;} #productos .grid-x:first-child{margin-top: 5px; margin-bottom: -120px;} #productos .sep3{display: none;} .page-template-pagina-categoria .content .grid-x:first-child{margin-bottom: 0px!important;} .page-template-pagina-nosotros div.sep2.hide-for-small-only{display: none;} } /* ================================ */ /* END CUSTOM STYLING */ /* ================================ */