@charset "UTF-8";
/* Theme Name: Moleskine | Edições customizadas
Theme URI:
Description: Version: 1.0 - 2019
Author: Agência Ecco
Author URI: http://agenciaecco.com.br
Front-End e Wordpress: Valter Carnaúba
Email: valter.csousa@gmail.com
Site: http://valtercarnauba.com.br */
/*============================= RESET / FONT-FACE =============================*/
@font-face {font-family: 'Conv_BrandonGrotesque-Light'; src: url('fonts/BrandonGrotesque-Light.eot'); src: local('☺'), url('fonts/BrandonGrotesque-Light.woff') format('woff'), url('fonts/BrandonGrotesque-Light.ttf') format('truetype'), url('fonts/BrandonGrotesque-Light.svg') format('svg'); font-weight: normal; font-style: normal; } html {font-size: 62.5%;color: #333333;font-family: 'Conv_BrandonGrotesque-Light', Arial, Helvetica, sans-serif;} body {color: #333333;font-family: 'Conv_BrandonGrotesque-Light', Arial, Helvetica, sans-serif;} button, input, select, textarea {font-size: 2.0rem;color: #333333;font-family: 'Conv_BrandonGrotesque-Light', Arial, Helvetica, sans-serif;} *, h1, h2, h3, h4, h5 {margin: 0;padding: 0;outline: none;list-style-type: none;list-style-position: inside;font-family: 'Conv_BrandonGrotesque-Light', Arial, Helvetica, sans-serif;} a, a:hover, a:focus, a:visited {font-size: 2.0rem;color: #333333;text-decoration: none;outline: none;font-family: 'Conv_BrandonGrotesque-Light', Arial, Helvetica, sans-serif;} ul, p {margin: 0;font-size: 2.0rem;} img {max-width: 100%;height: auto;margin: 0 auto;display: block;object-fit: cover;}
/*============================= GERAL =============================*/
.bg-azul {padding: 2.5rem 0 7rem; color: #fff; background: #50acb4; } .bg-listras {padding: 6.0rem 0 8.0rem; background: url('img/bg-listras.jpg') center 0 no-repeat; } a.btn-padrao, .btn-padrao {padding: 1.4rem 2.5rem; display: inline-block; font-size: 1.5rem; text-transform: uppercase; border-radius: 0.5rem; border: 1px solid #505050; background: transparent; transition: all .3s; } a.btn-padrao:hover, a.btn-padrao:focus, .btn-padrao:hover, .btn-padrao:focus {color: #50acb4; border: 1px solid #50acb4; }
/*============================= TOPO =============================*/ #topo {background: #fffcf9; } #topo h2 {margin-bottom: 2rem; font-size: 5.0rem; text-transform: uppercase; font-weight: 800; } #topo p {margin-bottom: 3rem; } .logo {margin: 0 0 7.0rem; } .top {height: 5.7em; background: #f5f5f2; } #topo .ec-wp-img-wrapper .ec-wp-textblock {height: 100%; padding: 3.0rem 10.5rem 0 10.5rem; background: #fffcf9; }
/*============================= BANNER DESTAQUE =============================*/
.destaque img {height: 58.5rem; } .swiper-container {width: 100%; height: 100%; } .swiper-slide {text-align: center; font-size: 1.8rem; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-pagination-bullet {width: 1.6rem; height: 1.6rem; text-align: center; line-height: 2.0rem; font-size: 1.2rem; color:#333333; opacity: 1; border: 0.3rem solid #50acb4; background: rgba(0,0,0,0.2); } .swiper-pagination-bullet-active {color:#fff; background: #cae3e2; }
/*============================= INDEX =============================*/
/*=========== ORÇAMENTOS ===========*/
.orcamento-moleskine h2 {font-size: 3.8rem; font-weight: 800; text-transform: uppercase; } .orcamento-moleskine .base-formulario {margin: 5.8rem 0; } .form-control {height: 5.5rem; padding: 1.6rem 0 1.4rem 2.3rem; font-size: 1.6rem; background: #f7f7f7; border: transparent; border-bottom: 2px solid #ededee; } #orcamento-mensagem {height: 18.5rem; } .btn-contato {margin: 2.5rem -1.5rem 0 0; float: right; } .form-control::-webkit-input-placeholder{color:#1a1a1a;opacity:1}.form-control::-moz-placeholder{color:#1a1a1a;opacity:1}.form-control:-ms-input-placeholder{color:#1a1a1a;opacity:1}.form-control::-ms-input-placeholder{color:#1a1a1a;opacity:1}.form-control::placeholder{color:#1a1a1a;opacity:1} .invalid-feedback {font-size: 1.4rem; }
/*=========== CLIENTES ===========*/
.clientes-moleskine {padding: 5.5rem 0 7.5rem; display: flex; background: #cae3e2; } .clientes-moleskine h2 {margin: 0 0 2.5rem; font-size: 3.8rem; font-weight: 800; color: #50acb4; text-transform: uppercase; } .clientes-moleskine ul {display: inline-block; border-bottom: 2px solid #50acb4; background: #fff; } .clientes-moleskine li {width: 20%; float: left; background: #fff; }
/*=========== FORMATOS E MIOLOS ===========*/
.formatos-e-miolos-moleskine h2 {font-size: 3.8rem; font-weight: 800; text-transform: uppercase; } .formatos-e-miolos-moleskine h3 {margin: 7.0rem 0 2.0rem; font-weight: 800; font-size: 1.4rem; color: #1a1a1a; text-align: center; text-transform: uppercase; }
/*=========== ESCOLHA MOLESKINE ===========*/
.escolha-moleskine .ec-wp-img-wrapper {background: #50acb4; } .escolha-moleskine .ec-wp-img-wrapper .ec-wp-textblock {height: 100%; padding: 3.0rem 10.5rem 0 10.5rem; } .escolha-moleskine h3 {margin-bottom: 0.8rem; font-size: 3.8rem; color: #fff; text-transform: uppercase; } .escolha-moleskine p {margin-bottom: 3rem; font-size: 1.6rem; color: #fff; }
/*=========== PRODUTOS ===========*/
.produtos-moleskine {padding: 8.5rem 0 9.5rem; background: #cae3e2; } .produtos-moleskine h3 {margin-bottom: 0.8rem; font-size: 3.8rem; color: #50acb4; text-transform: uppercase; } .produtos-moleskine p {margin-bottom: 3rem; color: #50acb4; } .produtos-moleskine .card-group {margin-top: 4.0rem; } .produtos-moleskine img {max-height: 35rem; object-fit: initial; }
.produtos-moleskine .card {border: none;background: transparent;}
/*============================= RODAPE =============================*/
/*============================= ERROS 404 =============================*/
.error {padding: 10% 0;} .error .clip .shadow {height: 180px;} .error .clip:nth-of-type(2) .shadow {width: 130px;} .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {width: 250px;} .error .digit {width: 150px; height: 150px; line-height: 150px; font-size: 120px; font-weight: bold;} .error h2 {font-size: 32px;} .error .msg {top: -190px; left: 30%; width: 80px; height: 80px; line-height: 80px; font-size: 32px;} .error span.triangle {top: 70%; right: 0%; border-left: 20px solid #535353; border-top: 15px solid transparent; border-bottom: 15px solid transparent;} .error .container-error-404 {position: relative; height: 250px;} .error .container-error-404 .clip {display: inline-block; transform: skew(-45deg);} .error .clip .shadow {overflow: hidden;} .error .clip:nth-of-type(2) .shadow {overflow: hidden; position: relative; box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8);} .error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after {content: ""; position: absolute; right: -8px; bottom: 0px; z-index: 9999; height: 100%; width: 10px; background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent); border-radius: 50%;} .error .clip:nth-of-type(3) .shadow:after {left: -8px;} .error .digit {position: relative; top: 8%; color: white; background: #004c7b; border-radius: 50%; display: inline-block; transform: skew(45deg);} .error .clip:nth-of-type(2) .digit {left: -10%;} .error .clip:nth-of-type(1) .digit {right: -20%;} .error .clip:nth-of-type(3) .digit {left: -20%;} .error h2 {color: #A2A2A2; font-weight: bold; padding-bottom: 20px;} .error p {color: #A2A2A2; font-weight: bold; padding-bottom: 20px;} .error .msg {position: relative; z-index: 10; display: block; background: #535353; color: #A2A2A2; border-radius: 50%; font-style: italic;} .error .triangle {position: absolute; z-index: 999; transform: rotate(45deg); content: ""; width: 0; height: 0;}
/*============================= MEDIA QUERIES =============================*/
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 767px) {.error .clip .shadow {height: 100px;} .error .clip:nth-of-type(2) .shadow {width: 80px;} .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {width: 100px;} .error .digit {width: 80px; height: 80px; line-height: 80px; font-size: 52px;} .error h2 {font-size: 24px;} .error .msg {top: -110px; left: 15%; width: 40px; height: 40px; line-height: 40px; font-size: 18px;} .error span.triangle {top: 70%; right: -3%; border-left: 10px solid #535353; border-top: 8px solid transparent; border-bottom: 8px solid transparent;} .error .container-error-404 {height: 150px;} }
@media (max-width: 767px) {
    #topo .ec-wp-img-wrapper .ec-wp-textblock, .escolha-moleskine .ec-wp-img-wrapper .ec-wp-textblock {
        padding: 3.0rem 1.5rem;
    }
    #topo h2 {
        font-size: 4rem;
    }
    .destaque img {
        height: 40rem;
    }
    section.formatos-e-miolos-moleskine p {
        margin-bottom: 2rem;
    }
    /* .produtos-moleskine img {
        max-height: 23rem;
    } */
}
@media (min-width: 768px) and (max-width: 991px) {
    #topo .ec-wp-img-wrapper .ec-wp-textblock {
        padding: 3.0rem 9rem;
    }
    .produtos-moleskine img {
        max-height: 23rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #topo .ec-wp-img-wrapper .ec-wp-textblock {
        height: 100%;
        padding: 3.0rem 10.5rem 0 3.5rem;
    }
    .escolha-moleskine .ec-wp-img-wrapper .ec-wp-textblock {
        height: 100%;
        padding: 3.0rem 3.5rem 0 3.5rem;
    }
    .produtos-moleskine img {
        max-height: 30rem;
    }
}
@media (min-width: 1440px) and (max-width: 1599px){
    #topo .ec-wp-img-wrapper .ec-wp-textblock, .escolha-moleskine .ec-wp-img-wrapper .ec-wp-textblock {
        height: 100%;
        padding: 3.0rem 10.5rem 0 15.2rem;
    }
}
@media (min-width: 1600px) and (max-width: 1679px){
    #topo .ec-wp-img-wrapper .ec-wp-textblock, .escolha-moleskine .ec-wp-img-wrapper .ec-wp-textblock {
        height: 100%;
        padding: 3.0rem 10.5rem 0 23.2rem;
    }
}
@media (min-width: 1680px) and (max-width: 1819px) {
    #topo .ec-wp-img-wrapper .ec-wp-textblock,.escolha-moleskine .ec-wp-img-wrapper .ec-wp-textblock {
        height: 100%;
        padding: 3.0rem 10.5rem 0 26.5rem;
    }
}
@media (min-width: 1820px) {
    #topo .ec-wp-img-wrapper .ec-wp-textblock,.escolha-moleskine .ec-wp-img-wrapper .ec-wp-textblock {
        height: 100%;
        padding: 3.0rem 10.5rem 0 38.5rem;
    }
}
@media (min-width: 1921px) {
    .destaque img, .footer img  {
        width: 100%;
    }
}