body, html { height: 100%; }
.hotpixel { display: none; }

/* botões . . . . . . . . . . . . . . . . . */

.bt-seta { display: flex; justify-content: center; align-items: center; height: 48px; border-radius: 100px; max-width: 240px; padding: 0 24px; white-space: nowrap; }
.bt-seta-black { background: #000; color: #fff; }
.bt-seta-black:after { content: ""; background: url(../img/arrow-r-branca.svg) no-repeat center; width: 18px; height: 18px; display: inline-block; background-size: cover; margin-left: 12px; }
.bt-seta-black:hover { background: #E02020 }
.bt-seta-branco { background: #fff; color: #000; border: inset 2px #000; }
.bt-seta-branco:after { content: ""; background: url(../img/arrow-r.svg) no-repeat center; width: 18px; height: 18px; display: inline-block; background-size: cover; margin-left: 12px; }
.bt-seta-visitar:after { content: ""; transform: rotate(-45deg); } 
.bt-seta-visitar:hover { background: #FFEAEA; border: solid 2px #FFEAEA; }

ul.compartilha-redes-hp2 li a { filter: grayscale(.5); }
ul.compartilha-redes-hp2 li a:hover { filter: grayscale(0); }

.menu-add { mix-blend-mode: difference; background: none; }

/* Header . . . . . . . . . . . . . . . . . */
.header-default { z-index: 998; background: #fff; width: 100%; height: 80%; box-sizing: border-box; position: absolute; top: 0; left: 0; pointer-events: none; transition: .4s }
.scrollDesce .header-default {  }
.header-default .content { width: 100%; padding: 100px 100px 0; box-sizing:  border-box; }
.scrollDesce .header-default .content { pointer-events: inherit; }
.scrollDesce .header-default .content { pointer-events: inherit; }
.logo-menu { position: fixed; top: 100px; right: 100px; z-index: 999999; display: flex; flex-direction: column; justify-content: center; }
.logo-menu:hover .menu-add { transform:  rotate(90deg); }
.logo-menu .label { padding-top: 0px; opacity: 0 }
.logo-menu:hover .label { padding-top: 10px; opacity: 1 }
.scrollDesce .logo-menu { transform: translate(25px,-25px) }
.add-menu,.fechar-menu-icon { width: 29px; }
.add-menu:hover line { stroke: #E02020 }
.logo-branco { display: none; }

.black-page .header-default { background: none }
.black-page .logo-branco { display: block; }
.black-page .logo-black { display: none; }
.black-page .add-menu line { stroke: #fff }
body.meio-scroll.black-page .add-menu line { stroke: #000 }

.nav-header { display: none; }
.nav-header { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #000; z-index: 999999 }
.nav-header.active-menu { display: block; }
body.active-menu { overflow: hidden; }
.nav-header .logo-fechar { display: flex; justify-content: flex-end; padding: 124px 100px 20px 100px }
.nav-header .link-h { color: #fff; display: block; padding: 6px 0; transition: .2s }
.nav-header .link-h:hover { filter: contrast(.1); transition: .2s }
.nav-header .menu-header { display: flex; align-items: center; flex-direction: column; }
.fechar-menu-icon:hover { transform: rotate(90deg) }

.wrapper-section-header { height: 400px; display: block; pointer-events: none; }

@media ( max-width: 1250px ) {
.header-default .content { padding: 100px 50px 0 }
.scrollDesce .fechar-menu  { transform: translateX(10px); }
}

@media ( max-width: 768px ) {
.nav-header .logo-fechar { padding: 124px 50px 20px 50px }
.logo-menu { top: 50px; right: 50px }
}

@media ( max-width: 600px ) {
.header-default { height: 80% }
.header-default .content { padding: 10px 25px 0 }
.scrollDesce .header-default .content { padding: 100px 25px 0 }
.scrollDesce .menu-add,.scrollDesce .fechar-menu { transform: translateX(0px); }
.add-menu,.fechar-menu-icon { width: 21px; }
.nav-header .logo-fechar { padding: 24px 25px 20px 25px }
.logo-menu .logo-rei1 { width: 51px }
}

/* Heros . . . . . . . . . . . . . . . . . */

.hero-page { position: absolute; width: 100%; height: 70%; z-index: 999; }
.scrollDesce .hero-page { transform: translateY(-300px) }
.hero-page .content { display: flex; align-items: center; justify-content: center; height: 100%; }
.hero-page .content-slogan {  }
.hero-page .content-slogan .title { font-size: 44px; line-height: 48px }
.hero-page .content-slogan .title span { display: block; }
.hero-page .content-slogan .title500 { font-weight: 500; }
.hero-page .bar-tag { display: flex; justify-content: center; align-items: center; padding-bottom: 16px; }
.hero-page .bar-tag .label { margin-right: 8px; }
.hero-page .bar-content-texts { display: flex; flex-direction: column; justify-content: space-between; height: 100% }
.hero-page .bar-content-texts .content-slogan { padding-top: calc(var(--vh, 1vh)*10 - .60vw) }
.hero-page .bar-bt-compartilhe { position: absolute; right: 100px; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.hero-page .bar-bt-compartilhe .btCompartilhe { background: none; display: flex; align-items: center; justify-content: center; }

.hero-full { width: 100%; height: 100%; background: #3F2B87; position: fixed; transition: .3s }
.hero-full-branco { background: #fff; }
.meio-scroll .hero-full { transition: .3s }
.wrapper-hero-full { height: 200%; display: block; pointer-events: none; }
.wrapper-hero-full-min { height: 80% }
.hero-full .card-hero-full { width: 100%; height: 100%; min-height: 100vh }
.hero-full .bar-h-info { position: fixed; left: 0; bottom: 80px; width: 100%; display: block; }
.hero-full .owl-dots { position: absolute; top: 0; width: 100%; display: flex; justify-content: center; }
.video-card-hero { height: calc(100% + 1px); width: calc(100% + 1px); object-fit: cover; min-height: 100vh }
.hero-full .card-hero-full .thumb-card-work { width: 100%; height: 100%; display: block; min-height: 100vh; background-size: cover !important; }
/*.hero-full-services { background: url(../img/capas-servico-fractal-black.webp) no-repeat center; background-size: cover; }*/
.bar-logo-cliente { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bar-logo-cliente .work-logo { max-width: 300px; width: unset !important; }

@media ( max-width: 768px ) {
.hero-page .bar-bt-compartilhe { right: 50px; }
}

@media ( max-width: 600px ) {
.scrollDesce .hero-page { transform: translateY(-500px) }
.hero-page-single .content-slogan .title { font-size: 24px; line-height: 30px; }
.hero-page .bar-content-texts .content-slogan .title { font-size: 30px; line-height: 34px }
.hero-page .bar-bt-compartilhe { right: 25px; }
.bar-logo-cliente .work-logo { max-width: 150px }
}

/* ui layout . . . . . . . . . . . . . . . . . */

.wrapper-600 { max-width: 600px; margin: 0 auto }
.wrapper-h { width: 100%; padding: 0 100px; box-sizing: border-box; }
.space-h { display: block; height: 100px; pointer-events: none; }
.space-h-min { display: block; height: 50px; pointer-events: none; }
.content-main { background: #fff; z-index: 10; position: sticky; width: 100%; }
.content-main-black { background: #000 }
.h-info-bar { display: flex; justify-content: space-between; align-items: center; }
.h-info-bar .h-info-bar-left { display: flex; align-items: center; margin-right: .5em }
.h-info-bar .h-info-bar-left .label { margin-left: .5em }
.tag-label { border: solid 2px #000; color: #000; border-radius: 100px; padding: 4px 18px; white-space: nowrap; display: inline-block; text-transform: uppercase; font-weight: 800 }
.h-info-bar .label { color: #000 }
.bar-h-info .space-line { height: 1px; background: #000; margin-bottom: calc(16.4px + 1.125vw); }
.tag-hotpixel { width: 44px; height: 44px; border: solid 2px #000; display: flex; align-items: center; justify-content: center; border-radius: 100px;  }
.tag-hotpixel .logo { width: 30px; }

.bar-branca .tag-label { border: solid 2px #fff; color: #fff; }
.bar-branca .tag-label.tag-label-bt:hover { background: #fff; color: #000; border: solid 2px #fff; }
.bar-branca .label { color: #fff; }
.bar-branca .space-line { background: #fff; }

.seta-r { background: url(../img/arrow-r.svg) no-repeat center; width: 14px; height: 14px; display: inline-block; background-size: cover; }
.updates { position: sticky; top: calc(var(--vh, 1vh)*50 - 12.29167vw); background: url(../img/updates.svg) no-repeat center; height: 280px; width: 100%; background-size: contain; display: block; }
.work-branco { position: sticky; top: calc(var(--vh, 1vh)*50 - 12.29167vw); background: url(../img/work-branco.svg) no-repeat center; height: 400px; width: 100%; background-size: contain; display: block; }
.contato { background: url(../img/contato.svg) no-repeat center; height: 400px; width: 100%; background-size: contain; display: block;  }
.the_work { position: sticky; top: calc(var(--vh, 1vh)*10 - 12.29167vw); background: url(../img/the_work.svg) no-repeat center; height: 280px; width: 100%; background-size: contain; display: block; }
.mobile { position: sticky; top: calc(var(--vh, 1vh)*10 - 12.29167vw); background: url(../img/mobile.svg) no-repeat center; height: 280px; width: 100%; background-size: contain; display: block; }
.proximo { position: sticky; top: calc(var(--vh, 1vh)*10 - 12.29167vw); background: url(../img/proximo.svg) no-repeat center; height: 480px; width: 100%; background-size: contain; display: block; pointer-events: none; }
.google { background: url(../img/google-logo.svg) no-repeat center; height: 660px; width: 100%; background-size: contain; display: block; }
.updates,.work-branco,.contato,.the_work,.mobile,.proximo,.google { pointer-events: none; }

.bar-text-1000 { max-width: 1000px; margin: 0 auto }
.bar-default-text { max-width: 920px; margin: 0 auto }
.bar-text-content-post { max-width: 744px; margin: 0 auto }
.bar-cta { width: 100%; display: flex; justify-content: center; align-items: center; }
.bar-cta .label { padding-right: 8px; }

.mosaico-thumbs .bar-thumbs { max-width: 1250px; margin: 0 auto }
.mosaico-thumbs .bar-col-thumbs { display: flex; align-items: center; justify-content: space-between; }
.mosaico-thumbs .bar-col-thumbs .col { width: 50%; }
.mosaico-thumbs .bar-col-thumbs .col-thumb { display: flex; align-items: center; }
.mosaico-thumbs .thumb { display: block; }

.thumb-device-mobile { display: flex; justify-content: center; }
.thumb-device-mobile .thumb { max-width: 610px; }

.list-ferramenta li { display: flex; justify-content: space-between; border-bottom: dotted 1px #000; padding: 12px 30px; box-sizing: border-box; }
.list-ferramenta .ferramenta { text-align: right; padding-right: 8px; }

.next-post-work { background: #000 }
.next-post-work .bar-card .card-work { margin: 0 auto }

.bar-grade-mais-quatro .space-line { width: 100%; height: 1px; background: #000; display: block; }
.grade-mais-quatro { display: flex; justify-content: space-between; }
.grade-mais-quatro .col { width: 49%; padding: 50px 0 }
.grade-mais-quatro .col .bar-text { max-width: 470px; margin: 0 auto }
.grade-mais-quatro .space-line-v { width: 1px; background: #000; }
.grade-mais-quatro .col-thumb { display: flex; align-items: center; }

.card-recurso { width: 560px; height: 560px; background: #000; padding: 154px 34px 34px 34px; box-sizing: border-box;  }
.card-recurso .tag-number { border: solid 2px #fff; width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; border-radius: 100px; margin-bottom: 20px;  }

.reels-default .bt-nav { background: url(../img/arrow-r.svg) no-repeat center; width: 18px; height: 18px; display: block; }
.reels-default .bt-nav.nav-prev { transform: rotate(180deg); }
.reels-default.owl-theme .owl-nav { position: absolute; top: -50px; padding: 0 100px; box-sizing: border-box; }

.bar-thumb-big { max-width: 50% }
.bar-thumb-big-right { display: flex; justify-content: flex-end; }

.device-mobile-redes-sociais { max-width: 600px; margin: 0 auto }
.device-mobile-redes-sociais .bar-logos { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; }
.device-mobile-redes-sociais .logos-redes-sociais { width: 100%; height: 80%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
.device-mobile-redes-sociais .logos-redes-sociais li { height: 33%; display: flex; align-items: center; }
.device-mobile-redes-sociais .logos-redes-sociais .logo-rede { width: 100%; max-width: 200px; }

@media ( max-width: 768px ) {
.wrapper-h { padding: 0 50px; }
.updates,.contato,.mobile,.work-branco { height: 200px; }
.the_work,.mobile { height: 160px; }
.proximo { height: 220px; }
.google { height: 300px }
.card-recurso { width: 400px }
.reels-default.owl-theme .owl-nav { padding: 0 50px; }
.bar-thumb-big { max-width: 80% }

}

@media ( max-width: 600px ) {
.wrapper-h { padding: 0 25px; }
.space-h { height: 50px; }
.space-h-min { height: 25px; }
.tag-hotpixel { width: 28px; min-width: 28px; height: 28px; }
.tag-hotpixel .logo { width: 24px; }
.seta-r { width: 10px; height: 10px; }
.updates,.contato,.the_work,.work-branco { height: 80px; }
.updates,.work-branco { top: calc(var(--vh, 1vh)*40 - 12.29167vw) }
.the_work{ top: calc(var(--vh, 1vh)*20 - 20.29167vw) }
.mobile { top: calc(var(--vh, 1vh)*20 - 30.29167vw) }
.proximo { height: 180px; }
.google { height: 200px }
.list-ferramenta li { padding: 12px 10px; }

.grade-mais-quatro .col { padding: 20px 0; transform: scale(0.9) }
.grade-mais-quatro .col .thumb-wp-ico { max-width: 90px; }

.card-recurso { width: 300px }

.reels-default.owl-theme .owl-nav { padding: 0 25px; }

.device-mobile-redes-sociais .logos-redes-sociais .logo-rede { max-width: 100px }

}

/* work . . . . . . . . . . . . . . . . . */
.card-work { width: 100%; max-width: 1200px; height: 80vh; background: #000; margin: 0 auto 100px auto; position: relative; display: block; }
.card-work .bar-tag { position: absolute; left: 0px; bottom: 50px; display: block; width: 100%; }
.card-work .bar-tag .content-tag { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 32px; box-sizing: border-box; }
.card-work .tag-label.tag-label-branca { border: solid 2px #fff; color: #fff; margin-right: 10px; }
.card-work:hover .tag-label.tag-label-branca { background: #fff; color: #000; }
.card-work .video-card-hero { min-height: unset; }
.card-work .thumb-card-work {  width: 100%; height: 100%; display: block; background-size: cover !important; }
.content-the-work .item,.content-mobile .item { position: inherit; }
.card-work .bar-text { padding: 0 32px; box-sizing: border-box; max-width: 50%; }
.card-work .bar-text .title { padding-bottom: 20%; }

.post-type-archive-work { background: #000; }
.tags a { text-transform: uppercase;font-weight: 800 }
.cms-text p { font-weight: 500; color: #000 }

@media ( max-width: 1250px ) {
.card-work { max-width: 80% }
}

@media ( max-width: 768px ) {
.card-work { height: 60vh }
}

@media ( max-width: 600px ) {
.card-work { height: 50vh; max-width: 90% }
.card-work .bar-tag {  bottom: 30px; }
.card-work .bar-tag .content-tag { padding: 0 16px; }
.card-work .bar-text { max-width: 80% }
}

/* footer . . . . . . . . . . . . . . . . . */

.footer-custom { background: #000; z-index: 1 }
.wrapper-footer { max-width: 400px; margin: 0 auto }
.logos-pao li { padding-right: 40px !important; }

@media ( max-width: 600px ) {
.wrapper-footer { max-width: 80%; }
}

/* formulários . . . . . . . . . . . . . . . . . */

.bar-form-footer { max-width: 440px; margin: 0 auto; padding: 20px 0; }
.bar-form-footer .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=text] { font-size: 18px; color: #fff; text-align: center; border: none; background: none; border-bottom: solid 1px; box-shadow: none; }
.bar-form-footer .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=text]:focus { color: #fff; outline: none; }
.bar-form-footer .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-submit input[type=submit] { font-size: 20px; background: #fff; color: #000; text-shadow: none; border: none; width: 197px; height: 48px; border-radius: 100px; margin: 0 auto; box-shadow: none; transition: .2s }
.bar-form-footer .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-submit input[type=submit]:after { content: ""; background: url(../img/arrow-r.svg) no-repeat center; display: block; width: 18px; height: 18px; margin-left: 12px; }
.bar-form-footer .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-submit input[type=submit]:hover { background: #44bd32; transition: .2s }
.bar-form-footer ul.wpuf-form li { display: flex; align-items: center; }
.bar-form-footer ul.wpuf-form .wpuf-submit .wpuf-errors, .bar-form-footer .wpuf-error-msg { display: none; }
.bar-form-footer ul.wpuf-form li.has-error { background: none }
.bar-form-footer .wpuf-form-add.wpuf-style ul.wpuf-form .has-error .wpuf-fields input[type=text] { border-bottom: solid 1px red }
.bar-form-footer .wpuf-success { background: none; border: 0; border-bottom: 1px solid #44bd32; text-align: center; color: #44bd32 }

.bar-form-min .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-submit input[type=submit] { background: #000; color: #fff; }
.bar-form-min .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=text] { border-bottom: solid 1px #000; color: #000 }
.bar-form-min .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=text]:focus { color: #000; }

/* pushy busca . . . . . . . . . . . . . . . . . */

.pushyBusca { background: #000 }
.pushyBusca .pushyHeader { background: #fff; box-shadow: none; }
.pushyBusca .bar-search input { background: #fff; border: 0; color: #000; font-size: 22px; font-weight: 100; border-radius: 100px; }

/* breadcrumb . . . . . . . . . . . . . . . . . */

.breadcrumb .item-home .bread-home { background: #000; color: #fff; border-radius: 100px; padding: 8px 18px; }
.breadcrumb a { color: #000; font-weight: 600; }