/* 04/05/2021 Theme Name: Houz Comunicação Theme URI: http://houzcomunica.com.br/ Description: Produzido por Cociente Consultoria e Desenvolvimento em Tecnologia Version: 2021 Autor Desenvolvimento: Produzido por Cociente Consultoria e Desenvolvimento em Tecnologia Autor URI: http://www.cociente.com.br */ /* default */ *{margin:0; padding:0; outline:none;} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, div, ul, li{display: block; position: relative; } html {font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;} body, html, button, input, select, textarea, p, h1, h2, h3, h4, h5, h6, li, address, small, td, span { font-family: 'Montserrat', sans-serif; } body{ background: #FFFFFF; margin-top: 120px;} ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #5ab8d8; color: #fff; text-shadow: none; } ::placeholder { color: #C4C4C4; opacity: 1; } :-ms-input-placeholder { color: #C4C4C4; } ::-ms-input-placeholder { color: #C4C4C4; } a, a:hover, a:active, a:focus { color: #125484; text-decoration:none } .none{ display:none !important; } .show{ opacity: 1 } .hide{ opacity: 0 } .clear{ clear: both; } .alignnone, .alignleft{float:left; margin:0 10px 10px 0;} .alignright{float:right; margin:0 0 10px 10px} .aligncenter {margin-left: auto; margin-right: auto; clear: both; display: block;} .btn{ color: #FFF !important; } .progress{ display: none; } input[type="radio"], label{ cursor: pointer; } .col-centered{ float: none; margin: 0 auto; } .no-padding{ padding: 0 !important; } .no-scroll{ overflow: hidden; } .error_field{ border-color: red !important; } .container-sm{ width: 860px; margin: 0 auto; display: block; clear: both; } .anim{ -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wp-pagenavi{ display: block; width: 100%; } #fancybox-overlay{ z-index: 999999999 !important; } #fancybox-wrap{ z-index: 9999999999 !important; } #fancybox-title-over{ color: #FFF !important; background: rgba(52, 97, 177, 0.8) !important; font-size: 18px; text-transform: uppercase; } //////////////// // VAR COLORS // //////////////// :root{ --gray : #777; --bg-primary : #234c9b; --bg-secondary : #25871d; --color-primary: #bfe3f5; --title-primary: #142a55; } //////////// // LAYOUT // //////////// .title_section{ font-style: normal; font-weight: normal; font-size: 16px; line-height: 44px; letter-spacing: 0.5em; text-transform: uppercase; color: #5ab8d8; padding-bottom: 32px; background: url(../img/border_bottom_section.svg) no-repeat; background-position: left bottom; margin-bottom: 32px; &.text-center{ width: 100%; background-position: center bottom; } } .title_section_no_border{ font-style: normal; font-weight: normal; font-size: 16px; line-height: 44px; letter-spacing: 0.5em; text-transform: uppercase; color: #5ab8d8 !important; margin-bottom: 10px; } .subtitle_section{ font-style: normal; font-weight: bold; font-size: 36px; line-height: 44px; color: #3C3C3B; &.text-center{ width: 100%; } } .subtitle_item{ font-style: normal; font-weight: bold; font-size: 24px; line-height: 29px; color: #3C3C3B; } .title_gradient{ font-style: normal; font-weight: 900; font-size: 80px; line-height: 65px; letter-spacing: 0.06em; background: linear-gradient(90.13deg, #3d5f7c 6.79%, #254865 54.64%, #031c31 85.06%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link{ font-style: normal; font-weight: bold; font-size: 12px; line-height: 14px; letter-spacing: 0.3em; color: #0382C4; } .bt-blue{ border: none; padding: 16px 20px; background: #002f4b; border-radius: 5px; color: #FFF; font-style: normal; font-weight: bold; font-size: 12px; line-height: 14px; letter-spacing: 0.3em; text-transform: uppercase; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; &.text-center{ display: block; margin: 0 auto; } &:hover{ background: #5ab8d8; color: #FFF; } } /* Desktop Size */ header{ position: fixed; top: 0; left: 0; width: 100%; height: 105px; background: #FFF; z-index: 99999999; .header-content{ height: 105px; display: flex; justify-content: space-between; align-items: center; .menu-btn{ display: none; } figure.logo{ margin-bottom: 0px; img{ width: 154px; height: auto; } } nav.menu{ ul{ margin: 0; li{ display: inline-block; margin: 0 15px; a{ font-family: Montserrat; font-style: normal; font-weight: 500; font-size: 14px; color: #555; } } } } .social-media{ a{ display: inline-block; margin-right: 15px; &:last-of-type{ margin-right: 0; } img{ width: 32px; height: 32px; } } } } } #destaques{ width: 100%; height: 690px; overflow: hidden; .item{ width: 100%; height: 690px; h1{ position: absolute; top: 160px; left: 0; width: 512px; font-weight: bold; font-size: 64px; line-height: 54px; color: rgba(255, 255, 255, 0.6); z-index: 10; } figure{ position: absolute; top: 0; left: 0; width: 100%; height: 690px; display: flex; align-items: center; justify-content: center; img{ height: 690px; width: auto; position: absolute; top: 0; left: 0; z-index: -1; } &::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(72.34deg, #3d5f7c 22.98%, #254865 72.76%, #031c31 98.45%); mix-blend-mode: multiply; } } } .owl-dots{ background: rgba(255, 255, 255, 0.3); border-radius: 70px; position: absolute; top: 160px; width: 40px; right: 6%; padding: 14px 14px; z-index: 999; button{ margin: 10px 0; display: block; width: 12px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.5); &.active{ background: rgba(255, 255, 255, 1); } } } } #agencia{ margin-top: 10px; min-height: 528px; h2{ margin-top: 80px; } h3{ width: 380px; z-index: 999; // text-shadow: 0 0 2px rgb(255,255,255,1); } figure{ position: absolute; width: 328px; height: 528px; top: 0; right: 0; border-radius: 5px; overflow: hidden; z-index: -1; img{ filter: brightness(1.3); } &::after{ position: absolute; content:""; height:100%; width:100%; top:0; left:0; background: linear-gradient(72.34deg, #3d5f7c 22.98%, #254865 72.76%, #031c31 98.45%); } } .text{ margin-top: 260px; font-style: normal; font-weight: normal; font-size: 18px; line-height: 44px; color: #555555; } } #equipe{ margin-top: 60px; .nav-equipe{ position: absolute; top: 200px; right: 15px; a{ margin-left: 10px; } } .equipe-list{ width: 100%; height: 600px; overflow: hidden; .item{ width: 300px; height: 600px; float: left; .text{ position: absolute; bottom: 60px; left: 20px; z-index: 999999; color: rgba(255,255,255,0.8); h3{ font-style: normal; font-weight: bold; font-size: 28px; margin-bottom: 3px; color: #FFF; } span{ font-style: normal; font-weight: normal; font-size: 16px; letter-spacing: 0.5em; text-transform: uppercase; } } figure{ width: 300px; height: 600px; overflow: auto; img{ filter: saturate(40%); } &::after{ position: absolute; content:""; height:100%; width:100%; top:0; left:0; background: linear-gradient(72.34deg, rgba(61,95,124, 0.5) 22.98%, rgba(37, 72, 101, 0.5) 72.76%, rgba(3, 28, 49, 0.5) 98.45%); } } } } } #servicos{ padding: 80px 0; background: #e7e7e7; .servicos-list{ margin-top: 48px; .item{ margin-bottom: 48px; .box{ padding: 32px 24px; height: 205px; background: #FFFFFF; box-shadow: 0px 12px 24px rgba(60, 60, 59, 0.1); border-radius: 5px; h3{ font-style: normal; font-weight: bold; font-size: 16px; line-height: 22px; color: #555555; } p{ font-style: normal; font-weight: normal; font-size: 12px; line-height: 18px; color: #555555; } img{ position: absolute; left: 24px; bottom: 32px; } &:hover{ h3{ color: #5ab8d8; } img{ left: 32px; } } } } } } #cases{ margin-top: 80px; h1.title_gradient{ margin-bottom: 80px; } .item{ margin-bottom: 120px; min-height: 373px; figure{ position: absolute; top: 0; right: 0; width: 95%; img{ border-radius: 5px; width: 100%; height: auto; } /* &::before{ position: absolute; content:""; height:100%; width:100%; top:0; left:0; border-radius: 5px; background: linear-gradient(180.86deg, rgba(60, 60, 59, 0) -27.63%, rgba(0, 0, 0, 0.79) 104.36%); mix-blend-mode: multiply; } */ &::after{ z-index: -1; position: absolute; content:""; height:100%; width:85%; bottom:-15px; left:-15px; border-radius: 5px; background: linear-gradient(72.34deg, #3d5f7c 22.98%, #254865 72.76%, #031c31 98.45%); } } h3{ margin-bottom: 32px; } p{ margin-top: 16px; display: block; font-style: normal; font-weight: 500; font-size: 14px; line-height: 17px; color: #979797; } .link{ display: block; margin-top: 40px; } &.ltr{ .text{ padding-left: 50px; } } &.rtl{ .text{ padding-right: 50px; } } } .bt-portfolio{ margin-bottom: 80px; } } #depoimentos{ min-height: 496px; background: url(../img/bg-depoimentos.svg) no-repeat right bottom, linear-gradient(72.34deg, #3d5f7c 22.98%, #254865 72.76%, #031c31 98.45%); padding-top: 65px; .balloon{ height: 370px; background: #FFF; border-radius: 5px; overflow: hidden; &::before{ content: ""; position: absolute; width: 50px; height: 50px; left: 403px; bottom: -14px; background: #FFFFFF; border-radius: 6px; transform: rotate(30deg); } .item{ height: 370px; overflow: hidden; .img{ height: 370px; display: flex; align-items: center; justify-content: center; figure{ width: 240px; height: 240px; border-radius: 120px; overflow: hidden; img{ width: 240px; height: auto; } } } .text{ padding: 35px; .title{ display: flex; align-items: center; img{ width: 48px; height: 48px; } h2{ margin: 0; padding-left: 20px; } } p{ margin-top: 24px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 23px; color: #979797; } h3{ margin-top: 15px; font-style: normal; font-weight: bold; font-size: 16px; line-height: 19px; color: #3C3C3B; } } } } } #podcast{ padding: 80px 0; background: #e7e7e7; .content{ .box{ width: 320px; height: 360px; background: url(../img/bg-podcast.svg) no-repeat; .item{ position: absolute; width: 252px; height: 320px; overflow: hidden; border-radius: 5px; top: 12px; left: 23px; figure{ background: #333; width: 100%; height: 150px; margin: 0; &::before{ position: absolute; content:""; height:100%; width:100%; top:0; left:0; border-radius: 5px; background: linear-gradient(180.86deg, rgba(60, 60, 59, 0) -27.63%, rgba(0, 0, 0, 0.79) 104.36%); mix-blend-mode: multiply; } } .text{ padding: 0 24px; img.play{ margin-top: -24px; } h2{ margin-bottom: 0; } p{ font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #3C3C3B; } } } } } } #contato{ margin: 80px 0; .forms{ margin-top: 35px; .form-box{ width: 100%; height: 480px; padding: 24px; background: #FFFFFF; border: 1px solid #e7e7e7; box-shadow: 0px 12px 24px rgba(60, 60, 59, 0.1); border-radius: 5px; h2{ font-style: normal; font-weight: bold; font-size: 18px; line-height: 40px; color: #0382C4; margin-bottom: 25px; } label{ font-style: normal; font-weight: bold; font-size: 14px; color: #555555; } input[type=text],input[type=email],input[type=tel]{ margin-top: 5px; width: 100%; padding: 15px 16px; background: #e7e7e7; border: 1px solid #EBEBEB; box-sizing: border-box; border-radius: 3px; font-style: normal; color: #979797; } input[type=submit]{ margin-top: 25px; } } } } .internas{ margin-top: 40px; .title_gradient{ line-height: 90px; margin-bottom: 35px; } .noticias-list{ article{ min-height: 180px; figure{ border-radius: 5px; overflow: hidden; img{ width: 100% !important; height: auto !important; } } small{ font-family: 'Montserrat', sans-serif;; } &.req-pl{ min-height: 140px; } } } .post{ h1.title_post{ color: var(--bg-primary); } small.post-date{ display: block; color: var(--bg-secondary); font-size: 14px; margin: 0 0 25px 0; } .post-content{ h1,h2,h3{ font-weight: bold; margin-bottom: 15px; color: var(--title-primary); } p{ font-family: 'Montserrat', sans-serif !important; } img{ max-width: 100% !important; // &.size-full{ // width: 100% !important; // height: auto; // } } .wp-caption{ width: 100% !important; } .wp-caption-text{ padding: 10px; background: #d2d2d2; font-size: 12px; text-align: center; } } &.portfolio{ .project-details{ min-height: 400px; figure.thumb{ position: absolute; top: 0; right: 0; width: 95%; img{ border-radius: 5px; width: 100%; height: auto; } &::before{ position: absolute; content:""; height:100%; width:100%; top:0; left:0; border-radius: 5px; background: linear-gradient(180.86deg, rgba(60, 60, 59, 0) -27.63%, rgba(0, 0, 0, 0.79) 104.36%); mix-blend-mode: multiply; } &::after{ z-index: -1; position: absolute; content:""; height:100%; width:85%; bottom:-15px; left:-15px; border-radius: 5px; background: linear-gradient(72.34deg, #3d5f7c 22.98%, #254865 72.76%, #031c31 98.45%); } } } .text{ padding-left: 50px; h3{ margin-bottom: 32px; } p{ margin-top: 16px; display: block; font-style: normal; font-weight: 500; font-size: 14px; line-height: 17px; color: #979797; } .link{ display: block; margin-top: 40px; } } } &.servicos{ #audio-content-servico{ margin-top: 45px; figure.cover-audio{ width: 95px; height: 95px; border-radius: 50%; overflow: hidden; img{ width: 95px; height: 95px; } } .album-title, .track-title, .currentTime, .totalTime{ display: none !important; } .player{ z-index: 99999; position: absolute; width: 35%; top: -95px; left: 100px; display: flex; flex-direction: row-reverse; .sr_progressbar{ flex: 1; background: rgba(74,172,97,0.17); border-radius: 10px; margin-left: -15px; } .control{ width: 50px; .play{ width: 40px !important; height: 40px !important; padding: 11px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #cde6f3; svg{ path,rect{ fill: #0382c4 !important; } } } } } } } &.podcast{ iframe{ width: 100% !important; height: 165px !important; } .podcast-list{ margin-top: 50px; display: inline-block; width: 100%; .item{ margin: 10px; width: 252px; height: 320px; overflow: hidden; border-radius: 5px; float: left; box-shadow: 0px 12px 24px rgba(60, 60, 59, 0.1); &:last-of-type{ // margin-right: 0; } figure{ background: #333; width: 100%; height: 150px; margin: 0; &::before{ position: absolute; content:""; height:100%; width:100%; top:0; left:0; border-radius: 5px; background: linear-gradient(180.86deg, rgba(60, 60, 59, 0) -27.63%, rgba(0, 0, 0, 0.79) 104.36%); mix-blend-mode: multiply; } } .text{ padding: 0 24px; img.play{ margin-top: -24px; } h2{ margin-bottom: 0; } p{ font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #3C3C3B; } } } } } } .outras-postagens{ h3{ margin-top: 0; color: var(--bg-primary); } ul,li{ list-style: none !important; padding: 0; } ul{ margin: 25px 0; li{ margin: 5px; padding: 10px 0; border-bottom: 1px dotted #CCC; a{ color: #000; &:hover{ color: var(--bg-secondary); } } } } } div.galeria{ margin-bottom: 50px; figure{ background: #FFFFFF; box-shadow: 0px 2px 4px #D1D1D1; border-radius: 5px; width: 100%; height: 250px; overflow: hidden; img{ width: 100%; height: auto; } } h2{ font-style: normal; font-weight: 500; font-size: 24px; line-height: 35px; color: var(--title-primary); } } } footer{ background: #e7e7e7; padding-top: 35px; height: 310px; .content{ display: flex; justify-content: space-between; align-items: center; .atmos{ width: 580px; img.logo{ width: 154px; height: auto; } p{ margin-top: 25px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 21px; color: #555555; } } nav.menu{ ul{ margin: 0; li{ display: block; margin: 15px 0; a{ font-family: Montserrat; font-style: normal; font-weight: 500; font-size: 14px; color: #555; } } } } .social-media{ a{ display: inline-block; margin-right: 15px; &:last-of-type{ margin-right: 0; } img{ width: 32px; height: 32px; } } } } .border_bottom{ position: absolute; width: 100%; height: 8px; left: 0; bottom: 0; background: linear-gradient(72.34deg, #3d5f7c 22.98%, #254865 72.76%, #031c31 98.45%); } } /* Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .title_gradient{ font-size: 48px; line-height: 42px; } .subtitle_section{ font-size: 28px; line-height: 35px; } .link{ font-size: 16px; } body{ margin-top: 120px; } header{ .container{ padding: 0; .header-content{ .menu-btn { position: absolute; display: block; top: 50px; right: -15px; width: 80px; height: 80px; cursor: pointer; transition: all 300ms ease-in-out; /* border: 3px solid #fff; */ } .menu-btn__burger { width: 35px; height: 5px; background: #3C3C3B; border-radius: 5px; transition: all 300ms ease-in-out; } .menu-btn__burger::before, .menu-btn__burger::after { content: ''; position: absolute; width: 35px; height: 5px; background: #3C3C3B; border-radius: 5px; transition: all 300ms ease-in-out; } .menu-btn__burger::before { transform: translateY(-12px); } .menu-btn__burger::after { transform: translateY(12px); } /* ANIMATION */ .menu-btn.open .menu-btn__burger { transform: translateX(-50px); background: transparent; box-shadow: none; } .menu-btn.open .menu-btn__burger::before { transform: rotate(45deg) translate(35px, -35px); } .menu-btn.open .menu-btn__burger::after { transform: rotate(-45deg) translate(35px, 35px); } .logo{ width: 90%; text-align: center; img{ width: 140px !important; margin-top: 0px !important; } } .menu,.social-media{ // display: none; position: absolute; width: 100%; top: 105px; right: -1000px; background: #e7e7e7; display: block; padding: 25px; text-align: center; transition: all 300ms ease-in-out; &.active{ right: 0; } } .menu{ top: 200px; ul{ li{ display: block; margin-bottom: 20px; a{ font-size: 18px; } } } } .social-media{ img{ height: 48px; width: auto; } } } } } #destaques{ height: 300px; .item{ height: 300px; figure{ height: 300px; img{ height: 300px; } } h1{ width: 260px; font-size: 26px; top: 50px; left: 20px; line-height: 35px; } } .owl-dots{ top: 50px; } } #agencia{ h2{ margin-top: 0; } h3{ width: 100%; text-shadow: none; } figure{ display: none; width: 100%; height: 528px; top: 100px; left: 0; border-radius: 0px; img{ width: 100%; height: auto; } } .text{ margin-top: 25px; p{ // color: #FFF; line-height: 24px; } } } #equipe{ margin-top: 0px; .nav-equipe{ position: relative; top: 0; right: 0; text-align: center; margin: 15px 0; } .equipe-list{ width: 300px; height: 460px; margin: 0 auto; .item{ height: 460px; } } } #servicos{ margin-top: 80px; .servicos-list{ .item{ .box{ // height: 275px; h3{ font-size: 18px; } p{ font-size: 16px; } } } } } #cases{ h1.title_gradient{ margin-bottom: 45px; } .item{ margin-bottom: 90px; figure{ width: 100%; position: relative; margin: 0 auto 25px auto; &::after{ bottom: -7px; left: -7px; } } .text{ padding: 0 15px !important; .link{ width: 100%; text-align: center; } } } } #depoimentos{ padding: 20px 0; .balloon{ height: 600px; .item{ height: 600px; .text{ padding: 0 35px; } } } } #podcast{ .box{ margin-top: 35px; } } #contato{ .form-box{ margin-bottom: 35px; } } &.internas{ h1.title_gradient{ line-height: 40px; } .post{ .post-content{ img{ &.size-full{ width: 100% !important; height: auto; } } } &.portfolio{ .project-details{ min-height: 400px; figure.thumb{ position: relative !important; margin-left: 15px; width: 95%; } } } &.servicos{ #audio-content-servico{ .player{ width: 65%; .control{ .play{ display: block; padding: 9px 11px 11px 11px; } } } } } } } footer{ height: 230px; .content{ display: block; .atmos{ width: 100%; text-align: center; p{ display: none; } } .menu{ display: none; } .social-media{ text-align: center; margin: 45px 0; } } } } /* Tablets Sizes */ @media only screen and (min-width: 768px) and (max-width: 991px) { }