/*----------------------------------------------------- Table of Contents 1. Basic Styles 2. Tipography 3. Links & Buttons 4. Header & Footer 5. Grid 6. Forms 7. Blog & Shop 8. Media queries ------------------------------------------------------*/ /*----------------------------------------------------- 1. Basic Styles ------------------------------------------------------*/ *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased} html{overflow-x:hidden;overflow-y:scroll} body{font-family:'vremena_groteskbook',sans-serif;font-size:100%;line-height:1.5;letter-spacing:.01em;background-color:#e9e7e3;color:#302F2A; animation:fadein 2s;-moz-animation:fadein 2s;-webkit-animation:fadein 2s;-o-animation:fadein 2s}@keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}} a, a:hover{transition:all .2s ease-in-out;outline:0;cursor:pointer!important;color:#302F2A;text-decoration:none} a.underline {text-decoration: underline!important;} ul{padding-left:0;margin-left:6%} ul li{padding-bottom:2%} img{display:block;object-fit:cover} .img-cover{width:100%;height:100%} .video-container { position: relative; padding-bottom: 56.25%;width: 100%; height: 0; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .clearfix{clear:both} main{padding:2% 0 0%} .shop, .blog{padding:2% 0 8%} main.adjusting{padding:2% 0 0} .spacing{padding:8% 0 10%} .spacingLight{padding:8% 0 4%} .invader{margin-top:-200px;padding-top:250px} .caption{padding-bottom:8%} .white{background-color:#fff} .beige{background-color:#E9E8E4} .caqui{background-color:#C7C4B7} .brown{background-color:#302F2A} /*----------------------------------------------------- 2. Tipography ------------------------------------------------------*/ @font-face {font-family: 'kaftanregular';src: url('../webfonts/kaftanregular-webfont.eot');src: url('../webfonts/kaftanregular-webfont.eot?#iefix') format('embedded-opentype'),url('../webfonts/kaftanregular-webfont.woff2') format('woff2'),url('../webfonts/kaftanregular-webfont.woff') format('woff'),url('../webfonts/kaftanregular-webfont.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;} @font-face{font-family:'vremena_groteskbook';src:url(../webfonts/vremenagroteskbook-webfont.eot);src:url(../webfonts/vremenagroteskbook-webfont.eot?#iefix) format("embedded-opentype"),url(../webfonts/vremenagroteskbook-webfont.woff2) format("woff2"),url(../webfonts/vremenagroteskbook-webfont.woff) format("woff"),url(../webfonts/vremenagroteskbook-webfont.ttf) format("truetype");font-weight:400;font-style:normal;font-display: swap;} @font-face{font-family:'vremena_groteskmedium';src:url(../webfonts/vremenagroteskmedium-webfont.eot);src:url(../webfonts/vremenagroteskmedium-webfont.eot?#iefix) format("embedded-opentype"),url(../webfonts/vremenagroteskmedium-webfont.woff2) format("woff2"),url(../webfonts/vremenagroteskmedium-webfont.woff) format("woff"),url(../webfonts/vremenagroteskmedium-webfont.ttf) format("truetype");font-weight:400;font-style:normal;font-display: swap;} h1,.h1,h2,.h2,h3,.h3{font-family:'kaftanregular';text-rendering:optimizeLegibility} /*h1,.h1{font-size:6em;line-height:100%;}*/ h1,.h1{font-size:3.4em;line-height:110%;} h1.hero{padding:8% 0 4%} h1.intro{padding:8% 0 2%;font-size:3.4em} h1.context{padding:14% 0 16%;font-size:3em} h2,.h2{font-size:2.6em;line-height:110%} h2.intro{padding:14% 0 6%} h2 span {font-size: 0.3em; font-family:'vremena_groteskbook',sans-serif;} h3,.h3{font-size:1.6em;line-height:120%} h4,.h4{font-size:1.3em;line-height:125%;font-family:'vremena_groteskmedium',sans-serif; padding: 2% 0%;} h5,.h5{font-size:1.2em;line-height:140%;font-family:'vremena_groteskmedium',sans-serif;text-transform:uppercase} h6,.h6{line-height:130%;font-size:.95em} p {line-height:140%;font-size:1.1em;letter-spacing:.02em; padding-bottom: 2%;} ul li{line-height:140%;font-size:1.1em;letter-spacing:.02em;} .smallest {font-size: 0.9em;} p.boldest {font-family:'vremena_groteskmedium',sans-serif; font-size: 1.15em; letter-spacing: 0.03em;} p.hero{padding:2% 0 26%; font-size:1.2em; font-family:'vremena_groteskbook',sans-serif;} span.boldest {font-family:'vremena_groteskmedium',sans-serif; font-size: 1.03em; letter-spacing: 0.03em;} /*----------------------------------------------------- 3. Links & Buttons ------------------------------------------------------*/ .social-icons{float:left} ul.social-icons{margin-left:0} .social-icons li{float:left;font-size:1em;list-style:none;margin-left:0;margin-right:25px;margin-top:2%} a.cta, input[type="submit"], button.ctaButton.spinner{ border: none; font-size:1.4em; line-height:120%; display:flex; align-items:center; justify-content:center; align-content: center; background-color:#302F2A; border-radius:35px; color:#fff; height: 70px; /*margin:0 auto;*/ cursor:pointer!important; padding: 2% 6%; min-width: 250px; max-width: 350px; letter-spacing: 0.02em; text-align: center; } a.cta:hover, input[type="submit"]:hover {background-color: #675f54;} button.ctaButton { background: transparent; border: 0; margin-top: 10%; } button.ctaButton.spinner { opacity: 0.5; cursor: none; display: none; } /*----------------------------------------------------- 4. Header & Footer ------------------------------------------------------*/ header {border-bottom: 1px solid #302F2A;} footer {border-top: 1px solid #302F2A; padding-top: 6%;} .menu {margin-top: 120px;} .menu p a {color: #302F2A; font-size: 3em; margin-bottom: 10%; display: block; font-family: 'kaftanregular';} .menu p a:hover {color: #C7C4B7;} .text-bg-secondary{color:#302F2A!important;background-color:transparent!important} a:hover .text-bg-secondary{color:#C7C4B7!important} .badge{padding:0;font-size:.2em;font-weight:400;line-height:0;color:#302F2A;text-align:left;vertical-align:top;border-radius:0;font-family:'vremena_groteskbook',sans-serif;margin-top:-12px} .logo{height:30px;margin-top:20px} .open-nav, .close-nav{display:block;height:100px;position:relative;width:160px} .btn-close{position:absolute;top:43px;right:80px} .btn-close:focus{outline:0;box-shadow:none;opacity:0} .open-nav i,.open-nav i::before{background:#302F2A} .open-nav i{height:2px;left:50%;position:absolute;top:60%;transform:translate(-50%,-50%);width:40px} .open-nav i::before{content:" ";height:2px;position:absolute;top:-9px;width:20px;margin-left:20px} .open-nav span, .close-nav span {position:absolute;top:44px;right:0} /*Estilos heredados*/ /*.close-nav{float:right;margin:40px 0px 0 0;}*/ .nav-overlay{position:fixed;top:0;left:-100%;bottom:0;right:0;height:100vh;width:100vw;opacity:0;transition:opacity .4s,left 0s .4s;z-index:3;background:rgba(0,0,0,.7)} .nav-overlay.active{left:0;opacity:1;transition:opacity .4s,left 0s} .nav-menu{height:100vh;left:-100%;position:absolute;top:0;transition:left .8s;width:100%;background:#fff} .nav-menu.active{left:0} .nav-menu nav{left:50px;position:absolute;top:50%;transform:translateY(-50%)} /*----------------------------------------------------- 5. Grid ------------------------------------------------------*/ .featured-works .item-img,.featured-projects .item{height:auto;width:100%} .featured-works .item,.featured-projects .item{margin-bottom:100px;position:relative;width:100%} .featured-works a:nth-of-type(3) .item,.featured-works a:nth-of-type(8) .item{margin-bottom:0} .featured-works .item-title,.featured-projects .item-title{position:relative;top:20px;transform:translateY(0%);} .featured-works h2.item-title{max-width: 500px;} .featured-works a:nth-of-type(1) .item-category {left:10px;position:absolute;text-transform:uppercase;top:25px;} .featured-works a:nth-of-type(2) .item-category {left:10px;position:absolute;text-transform:uppercase;top:25px;} .featured-works a:nth-of-type(3) .item-category {right:10px;position:absolute;text-transform:uppercase;top:25px;} .featured-works .item-img img, .featured-projects .item-img img {max-height: 400px;} .featured-works a:nth-of-type(1) .item,.featured-projects a:nth-of-type(1) .item,.featured-projects a:nth-of-type(5) .item,.featured-projects a:nth-of-type(7) .item{margin-left:0} .featured-works a:nth-of-type(1) .item .item-title,.featured-projects a:nth-of-type(1) .item .item-title,.featured-projects a:nth-of-type(7) .item .item-title,.featured-projects a:nth-of-type(5) .item .item-title{right:0} .featured-works a:nth-of-type(2) .item,.featured-projects a:nth-of-type(2) .item,.featured-projects a:nth-of-type(4) .item,.featured-projects a:nth-of-type(8) .item{float:right;margin-right:0} .featured-works a:nth-of-type(2) .item .item-title,.featured-projects a:nth-of-type(2) .item .item-title,.featured-projects a:nth-of-type(3) .item .item-title,.featured-projects a:nth-of-type(6) .item .item-title,.featured-projects a:nth-of-type(8) .item .item-title,.featured-works a:nth-of-type(3) .item .item-title,.featured-projects a:nth-of-type(4) .item .item-title{left:0} /*.featured-works a:nth-of-type(3) .item-img,.featured-projects a:nth-of-type(3) .item-img,.featured-projects a:nth-of-type(6) .item-img{height:470px}*/ .featured-works a:nth-of-type(3) .item,.featured-projects a:nth-of-type(3) .item,.featured-projects a:nth-of-type(6) .item{margin-left:0;width:100%} .featured-projects a:nth-of-type(1) .item{margin-top:40px} .featured-projects a:nth-of-type(3) .item,.featured-projects a:nth-of-type(6) .item{margin-bottom:60px} .featured-projects a div.item.specialBottom {margin-bottom: 70px!important;} .pe-5 {padding-right: 0rem !important;} .ps-5 {padding-left: 0.8rem !important;} .links {order: 2; margin-top: 10%; margin-bottom: 16%;} .info {order: 1;} .item-info {padding: 10% 18% 0% 0%;} img.about-img {max-height: 280px;} /*----------------------------------------------------- 6. Forms ------------------------------------------------------*/ form{padding:6%} div.landing{padding:6%;border:1px solid #302F2A;border-radius:3px;background:#fff} .newsletter {padding-top: 14%;} .form-group{padding-bottom:8%} .form-control{height:70px;padding:2% 2% 2% 0;font-size:1.2em;letter-spacing:.02em;color:#302F2A;background-color:transparent;border:0 solid #fff;border-radius:0;border-bottom:1px solid #302F2A;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;margin-bottom:6%} .form-control:focus{color:#302F2A;background-color:transparent;border-color:transparent;outline:0;box-shadow:none;border-bottom:1px solid #A59F96} .form-control::placeholder{color:#302F2A} input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;background-color:transparent;border:1px solid #302F2A} .form-check-input{width:1.1em;height:1.1em} .form-check-input:focus{border-color:#302F2A;outline:0;box-shadow:none} .form-check-input:checked{background-color:#302F2A;border-color:#302F2A} label{font-size:.9em;line-height:180%} div.landing form {padding:2% 0 0 0} div.landing form div.col-xl-6 {width: 90%;} #ok-subscribe, #ok-subscribe-landing, #ok {border: 2px solid green; margin-bottom: 4%;} #ko-subscribe, #ko {border: 2px solid red; margin-bottom: 4%;} div#ok-subscribe p, div#ok-subscribe-landing p, div#ko-subscribe p, #ok p, #ko p {padding: 4% 4% 1% 4%;} .form-check { display: block; padding-left: 0em; margin-bottom: 2%; } .form-check .form-check-input { float: none; margin-left: 0em; } .form-check-label {padding: 1.5% 0 0 1%;} .form-check-input { width:1.3rem; height:1.3rem; font-size:1.2rem; line-height:1.8rem; text-align:center; border:1px solid #999; border-radius:0.3rem; } .form-check-input:checked { background-color: #302F2A; border-color: #302F2A; } .form-check-input:checked[type="checkbox"] { background-image: url("../img/checked.png"); } input#legal.form-check-input {width:1.2rem;height:1.2rem; margin-right: 6px; font-size: 0.5rem;} /*----------------------------------------------------- 7. BLOG & SHOP ------------------------------------------------------*/ .categories-filter{padding: 6% 0 4% 0} a.filter-shop{margin-right:1rem!important;line-height:200%} .card{background-color:transparent;border:none; padding: 0 2%;} .card .h2{font-size:6em;text-align:center;padding-top:0} a.btn-shop.filter-shop.h6.activeShop {font-family:'vremena_groteskmedium',sans-serif;text-decoration:underline} .active > .page-link,.page-link.active{color:#e9e7e3;background-color:#302F2A;border-color:#302F2A} nav.paginacion{padding:0 0 8%;height:100px} .page-link{color:#302F2A;text-decoration:none;background-color:transparent;border:1px solid #302F2A} .page-link:hover{color:#302F2A;background-color:transparent;border-color:#302F2A} .page-link:focus{color:#302F2A;background-color:transparent;box-shadow:none} .pagination-lg{--bs-pagination-border-radius:.2rem} .blog img, .blog-img img{height:320px} .title-right,.title-left{top:0;transform:translateY(0%);right:0;width:100%;text-align:center; padding: 4%;} .title-left{left:0} ul.pay-icons {list-style: none; margin: 0; height: 50px;} ul.pay-icons li {float: left; padding-right: 10px;} .accordion{padding-top:6%} .accordion,.accordion-item,.accordion-button{background-color:transparent!important} .accordion-item{border-bottom:1px solid #302F2A!important;border-top:1px solid #302F2A!important;margin-top:-1px} .accordion-item:first{top:1px solid #302F2A!important} .accordion-item:last-child{border-bottom:1px solid #302F2A!important} .accordion-item p.h5{font-family:'vremena_groteskbook',sans-serif;font-size:1em;margin-top:.5rem; color: #302F2A!important; padding-bottom: 0%;} .accordion-button:focus{border-color:none;box-shadow:none} .accordion-button::after {background-image: url("data:image/svg+xml,") !important;} div.float-start.position-relative img.img-fluid, div.float-end.position-relative img.img-fluid {max-height: 220px; display: block; object-fit: cover; width: 300px;} div.float-end.position-relative img.img-fluid {padding-top: 8%} div.float-start.position-relative, div.float-end.position-relative {float: none!important;} div.container.blog div.card-body h4 {margin-bottom: 12%;} /*----------------------------------------------------- 8. Media Queries ------------------------------------------------------*/ @media (min-width: 576px) { } @media (min-width: 767.98px) { h1, .h1 {font-size: 5em;} h1.intro {font-size: 4em;} .pe-5 {padding-right: 3rem !important;} .ps-5 {padding-left: 3rem !important;} .links {order: 1; margin-top: 0%;} .info {order: 2;} .item-info {padding: 4% 18% 0% 6%;} img.about-img {max-height: 520px;} .item-info { padding: 4% 18% 0% 0.5%; } div.float-start.position-relative img.img-fluid, div.float-end.position-relative img.img-fluid {max-height: 520px; display: block; object-fit: cover; width: 350px;} div.float-end.position-relative img.img-fluid {padding-top: 0%} div.float-start.position-relative {float: left!important;} div.float-end.position-relative {float: right!important;} } @media (min-width: 991.98px) { h1, .h1 {font-size: 6em;} h1.intro {font-size: 5em;} .item-info {padding: 4% 40% 0% 0%;} .pe-5 {padding-right: 3rem !important;} .ps-5 {padding-left: 3rem !important;} .links {order: 1; margin-top: 0%} .info {order: 2;} .item-info {padding: 4% 18% 0% 6%;} img.about-img {max-height: 520px;} .form-check-input {width:2rem;height:2rem;} } @media (min-width: 1199.98px) { .logo{height:40px;margin-top:15px} .social-icons{float:right} .social-icons li{margin-left:35px;margin-right:0;margin-top:0;font-size:1.2em} .menu{margin-top:9%} .menu p a{font-size:5em;margin-bottom:6%} .menu p a:hover{font-size:6em} footer{padding-top:3%} h1, .h1 {font-size: 8em;} h1.intro {font-size: 8em;} h1.context {font-size: 7.5em;} p.hero{font-size:1.6em;} h2, .h2{font-size: 4em;} h3, .h3 {font-size: 2.4em;} h6, .h6 {font-size: 1em;} a.filter-shop {margin-right: 4rem !important;} .blog img {height: 520px;} .title-right, .title-left {position: absolute;top: 50%;transform: translateY(-50%); right: -220px; width: 70%; text-align: left; padding: 0%;} .title-left {left: -220px; text-align: right;} div.container.blog div.card-body h4 {margin-bottom: 4%;} form{padding:6% 0 0 0} .newsletter {padding-top: 4%;} .invader{margin-top:-200px;padding-top:200px} .featured-projects a:nth-of-type(1) .item{margin-top:100px} .featured-works .item-title{position:absolute;top:50%;transform:translateY(-50%)} .featured-projects .item-title{position:absolute;top:50%;transform:translateY(-50%); width: 90%;} .featured-works a:nth-of-type(1) .item-category {left:-105px;top:50px; -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);transform: rotate(-90deg);} .featured-works a:nth-of-type(2) .item-category {left:-80px;top:30px; -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);transform: rotate(-90deg);} .featured-works a:nth-of-type(3) .item-category {right: -130px; top: 75px; -webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);transform: rotate(-90deg);} .featured-works .item-img img, .featured-projects .item-img img {max-height: 738px;} .featured-works .item,.featured-projects .item{margin-bottom:180px;width:45%} .featured-works a:nth-of-type(1) .item {margin-left: 150px} .featured-works a:nth-of-type(2) .item, .featured-projects a:nth-of-type(2) .item,.featured-projects a:nth-of-type(4) .item,.featured-projects a:nth-of-type(8) .item {margin-right: 100px} .featured-works a:nth-of-type(3) .item, .featured-projects a:nth-of-type(3) .item, .featured-projects a:nth-of-type(6) .item {margin-left: 200px;width: 66%} .featured-works a:nth-of-type(1) .item .item-title {right: -380px} .featured-works a:nth-of-type(2) .item .item-title {left: -320px} .featured-works a:nth-of-type(3) .item .item-title {left: -180px} .featured-projects a:nth-of-type(1) .item .item-title,.featured-projects a:nth-of-type(7) .item .item-title {right: -450px} .featured-projects a:nth-of-type(2) .item .item-title, .featured-projects a:nth-of-type(3) .item .item-title, .featured-projects a:nth-of-type(6) .item .item-title, .featured-projects a:nth-of-type(8) .item .item-title {left: -250px} .featured-projects a:nth-of-type(4) .item .item-title {left: -335px} .featured-projects a:nth-of-type(1) .item, .featured-projects a:nth-of-type(5) .item, .featured-projects a:nth-of-type(7) .item {margin-left: 100px} .featured-projects a:nth-of-type(5) .item .item-title {right: -400px} .featured-projects a:nth-of-type(3) .item,.featured-projects a:nth-of-type(6) .item{margin-bottom:0} .featured-projects a div.item.specialBottom {margin-bottom: 230px!important;} }