@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:200,400,600,700,800&display=swap');

/********************/
/****** RESETS ******/
/********************/
*,
*::before,
*::after{box-sizing:border-box;}

a{text-decoration:none; color:inherit; cursor:pointer;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p{margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}
/****** END RESETS ******/


/********************/
/****** GLOBAL ******/
/********************/
html{
    font-size: 16px;
    height: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body{
    margin: 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    background: var(--cor-claro);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
:root{
    --cor-claro: #FCFCFC;
    --cor-cinza15: #D4D8DD;
    --cor-cinza30: #B4BBC4;
    --cor-cinza45: #939DAB;
    --cor-cinza60: #717F94;
    --cor-cinza75: #576275;
    --cor-cinza90: #3E4655;
    --cor-escuro: #252A34;
    --cor-primaria: #FF2E63;
    --cor-primaria-escura: #DC1D4D;
    --cor-secundaria: #08D9D6;
    --cor-secundaria-escura: #06817F;
    --cor-terciaria: #FFF5B8;
    --ease-elastic: cubic-bezier(0,-0.71,1,.21);
}
/* FLUID TYPE */
@keyframes h1 {
    0%, 20% {
        font-size: 2rem;
    }
    100% {
        font-size: 4rem;
    }
}
@keyframes h2 {
    0%, 20% {
        font-size: 1.75rem;
    }
    100% {
        font-size: 3.25rem;
    }
}
@keyframes h3 {
    0%, 20% {
        font-size: 1.5rem;
    }
    100% {
        font-size: 2.75rem;
    }
}
@keyframes h4 {
    0%, 20% {
        font-size: 1.25rem;
    }
    100% {
        font-size: 2.25rem;
    }
}
@keyframes h5 {
    0%, 20% {
        font-size: 1.125rem;
    }
    100% {
        font-size: 1.75rem;
    }
}
@keyframes p {
    0%, 20% {
        font-size: 1rem;
    }
    100% {
        font-size: 1.5rem;
    }
}
/* responsive cta */
@keyframes h6 {
    0%, 20% {
        font-size: 1rem;
        padding: 0.657rem 1rem;
    }
    100% {
        font-size: 1.25rem;
        padding: 1.1rem 1.6rem;
    }
}
/* projetos em destaque home */
@keyframes blockquote {
    0%, 20% {
        font-size: 3.5rem;
    }
    100% {
        font-size: 5rem;
    }
}
/* Frase de efeito na página de serviços */
@keyframes ol {
    0%, 20% {
        font-size: 2.4rem;
    }
    100% {
        font-size: 5.5rem;
    }
}
/****** END GLOBAL ******/


/********************/
/****** HEADER ******/
/********************/
header{
    background: var(--cor-escuro);
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    width: 100%;
    z-index: 100;
    top: 0;
}
.logo{
    width: 108px;
    margin: 0.80em 0 1em 1.5em;
}

/* NAVIGATION */
nav{
    text-align: center;
    position:absolute;
    background: var(--cor-escuro);
    width: 100%;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    transform-origin: top;
    -moz-transition: transform 400ms ease-in-out;
    -o-transition: transform 400ms ease-in-out;
    -webkit-transition: transform 400ms ease-in-out;
    transition: transform 400ms ease-in-out;
}
nav li{
    margin-top: 2.5em;
}
nav li:last-child{ /* positioning the CTA */
    margin-top: 3.5em;
    margin-bottom: 5.5em;
}
nav a{
    color: var(--cor-cinza30);
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 100ms ease-in-out;
}
nav a:hover{
    color: var(--cor-primaria);
    -webkit-text-fill-color: var(--cor-primaria);
}
nav a:active{
    color: var(--cor-secundaria);
    -webkit-text-fill-color: var(--cor-secundaria);
}

/* Line between hader and mobile menu */
.line-nav{
    margin: 0 1.5em;
    border-color: var(--cor-cinza90);
}

/* hidding the desktop dropdown */
.menu-dropdown ~ ul{
    display: none;
}

/* Mobile Toggle + Hamburger menu */
.nav-toggle{
    display: none;
}
.nav-toggle-label{
    position: absolute;
    top: .5em;
    right: .5em;
    width: 3em;
    height: 3em;
    cursor: pointer;
}
.hamburguer {
    position: relative;
    display: block;
    background: var(--cor-cinza15);
    width: 1.5em;
    height: 2px;
    top: 1.375em;
    right: -.75em;
    border-radius: 4px;
    -moz-transition: .35s ease-in-out;
    -o-transition: .35s ease-in-out;
    -webkit-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.hamburguer:before,
.hamburguer:after {
    background: var(--cor-cinza15);
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    position: absolute;
    -moz-transition: .35s ease-in-out;
    -o-transition: .35s ease-in-out;
    -webkit-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.hamburguer:before {
    top: -7px;
}
.hamburguer:after {
    bottom: -7px;
}
input .nav-toggle{
    display: none;
}

/* Check States */
.nav-toggle:checked ~ nav {
    transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out 300ms;
    -o-transition: opacity 250ms ease-in-out 300ms;
    -webkit-transition: opacity 250ms ease-in-out 300ms;
    transition: opacity 250ms ease-in-out 300ms;
}
.nav-toggle:checked ~ label .hamburguer {
    transform: rotate(45deg);
}
.nav-toggle:checked ~ label .hamburguer:before {
    transform: rotate(90deg);
    top: 0;
}
.nav-toggle:checked ~ label .hamburguer:after {
    transform: rotate(90deg);
    bottom: 0;
}
/* END NAVIGATION */
/****** END HEADER ******/


/****************************/
/****** CALL-TO-ACTION ******/
/****************************/
/* STATIC */
.main-cta{
    background: var(--cor-primaria);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
    font-size: 1.25em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: .6em 1.25em;
    border-radius: 1.5em 1.5em 0 1.5em;
}
.main-cta:hover{
    background: var(--cor-primaria-escura);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
    border-radius: .75em .75em 0 .75em;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.main-cta:active{
    background: var(--cor-secundaria-escura);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
}
/* RESPONSIVE */
.responsive-main-cta{
    background: var(--cor-primaria);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
    font-size: 1.25em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    width: max-content;
    padding: .6em 1.25em;
    border-radius: 1.5em 1.5em 0 1.5em;
    --tt-key: h6;
    border: none;
}
.responsive-main-cta:hover{
    background: var(--cor-primaria-escura);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
    border-radius: .75em .75em 0 .75em;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.responsive-main-cta:active{
    background: var(--cor-secundaria-escura);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
}
/* SECONDARY */
.secondary{
    background: rgba(37, 42, 52, .7);
    font-size: 1em;
    padding: .8em 1.6em;
    border: 2px solid var(--cor-primaria);
    border-radius: 1.5em 1.5em 0 1.5em;
}

/********************************/
/************ FOOTER ************/
/********************************/
footer{
    background-image: url('../images/site/footer-bg-600.jpg');
    background-repeat: no-repeat;
    background-color: var(--cor-escuro);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 23em;
    margin-top: auto;
    position: relative;
    padding-top: 3.1em;
    text-align: center;
}
footer::after{
    content:'';
    width: 100%;
    height: 16px;
    background: var(--cor-primaria);
    border: 1px solid red;
    position: absolute;
    display: block;
    bottom: 0;
}
footer .logo{
    width: 134px;
    height: auto;
    margin: 0 0 .8em 0;
}
.tel-footer {
    display: block;
    font-weight: 200;
    font-size: 2.5em;
    color: var(--cor-cinza45);
    margin: 0 auto 1.5em auto;
    width: max-content;
}
.copyright{
    display: block;
    margin-top: 4em;
    font-weight: 400;
    font-size: 1em;
    color: var(--cor-cinza60);
}


/******************************************/
/****************** HOME ******************/
/******************************************/
.wrapper{
    display: grid;
    grid-template-columns: minmax(1.5em, 1fr) 6fr 1fr 6fr minmax(1.5em, 1fr);
    grid-template-areas:
        "hero hero hero hero hero"
        "cha  cha  cha  cha     ."
        ".    desc desc desc    ."
        ".    cta  cta  cta     ."
        "cat  cat  cat  cat   cat"
        "chp  chp  chp  chp     ."
        ".    pj1  pj1  pj1   pj1"
        ".    pj2  pj2  pj2   pj2"
        "emp  emp  emp  emp   emp";
    background-image: url('../images/oval-bg.png');
    background-repeat: no-repeat;
    background-size: 23em auto;
    background-position: 80vw 42%;
}
/* Selectors */
p{
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
    color: var(--cor-cinza75);
    --tt-key: p;
}
h1, h2, h3, h4, h5{
    text-transform: uppercase;
    color: var(--cor-escuro);
    font-weight: 700;
}
h1{
    --tt-key: h1;
    font-size: 4em;
}
h2{
    --tt-key: h2;
    font-size: 3.25em;
}
h3{
    --tt-key: h3;
    font-size: 2.75em;
}
h4{
    --tt-key: h4;
    font-size: 2.25em;
}
h5{
    --tt-key: h5;
    font-size: 1.75em;
}
/* Hero */
.bg-hero{
    width: 100%;
    position: absolute;
    z-index: -1;
}
.hero{
    grid-area: hero;
    width: 100%;
    margin: 0 auto;
    z-index: 0;
}
.video-container{
    margin: 0 auto;
    max-width: 120em !important;
}
/* Se for uma imagem no hero ao invés de um video */
.hero-image{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    max-width: 100em;
}
/* Descrição principal */
.chamada{
    grid-area: cha;
    position: relative;
    font-weight: 600;
    color: var(--cor-cinza15);
    padding: 0 0 0 7.5%;
    margin-top: -0.3em;
    line-height: 1.5;
    z-index: 2;
}
.chamada::before{
    position: absolute;
    content: '';
    background-color: var(--cor-escuro);
    width: 8.1em;
    height: 1.7em;
    z-index: -1;
    margin: -0.1em 0 0 -1.1em;
}
.sub-chamada{
    font-size: 0.88em;
    font-weight: 800;
    color: var(--cor-escuro)
}
.descricao-site{
    grid-area: desc;
    margin: 1em 0 2em 0;
}
.bt-portfolio{
    grid-area: cta;
    margin: 0 auto;
}
/* categorias */
.cat-sublinhado{
    text-align: center;
    margin: 4.5rem 0 3rem 0;
    position: relative;
}
.cat-sublinhado::before{
    content: '';
    background: var(--cor-cinza15);
    width: 9.2em;
    height: 1rem;
    bottom: -0.2rem;
    margin-left: -0.65em;
    padding-right: 0.65em;
    position: absolute;
    z-index: -1;
}
.categorias-home{
    grid-area: cat;
    margin-bottom: 8em;
}
.mobile-slider-active .list-categorias {
	margin-left: 0.1em;
    margin-right: 0.1em;
}
.list-categorias li {
	display: inline-block;
    overflow: hidden;
    text-align: center;
    margin: 0 1em;
}
.list-categorias li img {
    margin: 0 auto;
    width: 100%;
}
.list-categorias li h5 {
    margin: 0.5rem 0 2rem 0;
    white-space: normal !important;
    font-weight: 600;
    color: var(--cor-cinza75);
}
.list-categorias li a:hover h5{
    color: var(--cor-primaria);
}
.list-categorias li a:active h5{
    color: var(--cor-secundaria);
}
/* Projetos em destaque */
.container-chamada-projetos{
    grid-area: chp;
    white-space: nowrap;
    margin-bottom: 2em;
}
.chamada-projetos{
    --tt-key: blockquote;
    font-weight: 200;
    color: var(--cor-claro);
    padding: 0 0 0 7.5%;
    line-height: 0.8;
    text-align: right;
    max-width: -moz-min-content;
    max-width: -webkit-min-content;
    max-width: -o-min-content;
    max-width: min-content;
}
.chamada-projetos::before{
    position: absolute;
    content: '';
    background-color: var(--cor-cinza30);
    width: 7.2em;
    height: 1.85em;
    z-index: -1;
    margin: -0.9em 0 0 -3em;
}
.sub-chamada-projetos{
    font-size: 0.571em;
    font-weight: 700;
    color: var(--cor-escuro);
}
.cardhome{
    width: 100%;
    position: relative;
    margin-bottom: 2em;
}
.cardhome a::after{
    content: ' ';
    position: absolute;
    background-image: url('../images/long-arrow.svg');
    background-size: 2rem 1rem;
    height: 1rem;
    width: 2rem;
    right: 1rem;
    bottom: 1.2rem;
    z-index: 3;
    -moz-transition: .35s var(--ease-elastic);
    -o-transition: .35s var(--ease-elastic);
    -webkit-transition: .35s var(--ease-elastic);
    transition: .35s var(--ease-elastic);
}
.cardhome a:hover .cardhome__dados{
    background-color: var(--cor-secundaria-escura);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, .2);
}
.cardhome a:active .cardhome__dados{
    background-color: var(--cor-secundaria);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, .2);
}
.cardhome a:hover::after{
    right: 0.75rem;
}
.cardhome img{
    width: 92.2%;
    z-index: 1;
    position: relative;
}
.cardhome__dados{
    background-color: var(--cor-primaria-escura);
    z-index: 3;
    margin: -0.8em 0 0 1.5em;
    padding: 1em 4em 1em 1em;
    position: relative;
    -moz-transition: background-color .35s ease-out;
    -o-transition: background-color .35s ease-out;
    -webkit-transition: background-color .35s ease-out;
    transition: background-color .35s ease-out;
}
.cardhome__cliente{
    --tt-key: p;
    display: block;
    margin-bottom: 0.3em;
    color: var(--cor-terciaria);
    font-weight: 200;
}
.cardhome__projeto{
    color: var(--cor-claro);
}
.cardhome--primeiro{
    grid-area: pj1;
}
.cardhome--segundo{
    grid-area: pj2;
}
/* empresa */
.empresa-home{
    grid-area: emp;
    margin-top: 3em;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;
    position: relative;
    display: grid;
    grid-template-columns: minmax(1.5em, 1fr) 6fr 1fr 6fr minmax(1.5em, 1fr);
    grid-template-areas:
        ". tit .   .     ."
        ". des des des   ."
        ". cta cta cta   .";
}
.logo-a-home{
    width: 46%;
    position: absolute;
    top: 0;
    right: 0;
}
.tit-empresa-home{
    grid-area: tit;
    margin: 0.25em 0;
}
.empresa-desc-home{
    grid-area: des;
    margin-top: 0.8em;
}
.bt-empresa-home{
    grid-area: cta;
    margin: 16% auto 58% auto;
}

/**********************************************/
/****************** LIGHTBOX ******************/
/**********************************************/
.lightbox{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .9);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
}
.lightbox:target{
    display: flex;
}
.lightbox__content{
    position: relative;
    max-width: max-content;
    max-height: 100vh;
    background-color: var(--cor-escuro);
    padding: 0.5em;
}
.lightbox__content img{
    margin: 0 auto;
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
}
/* close button */
.lightbox__close{
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    background-color: var(--cor-primaria);
    top: -2.25em;
    right: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__close:hover{
    background-color: var(--cor-primaria-escura);
}
.lightbox__close:active{
    background-color: var(--cor-secundaria);
}
.lightbox__close::after{
    content: '';
    background: url('/images/ic-close-16px.svg') no-repeat;
    width: 1rem;
    height: 1rem;
    color: var(--cor-claro);
}

/*********************************************/
/****************** CONTATO ******************/
/*********************************************/
.contato__content{
    position: absolute;
    top: 10vh;
    width: 91.11%;
    background-color: var(--cor-escuro);
    margin-bottom: 1em;
    padding: 1em;
}
.contato__content .lightbox__close{
    margin-top: 1em;
}
.contato__content .page-tit{
    margin: -1em 0 2em 0;
}
/* BT Fone Whats */
.tel-contato{
    display: flex;
    align-items:center;
    position: absolute;
    top: 3.25em;
    right: 1em;
    background: rgba(37, 42, 52, .7);
    font-size: 1.125em;
    font-weight: 200;
    color: var(--cor-cinza30);
    padding: 0 1em 0 .5em;
    border: 1px solid var(--cor-secundaria);
    border-radius: 1.5em 1.5em 1.5em 0;
    height: 2.5em;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.tel-contato:hover{
    background: rgba(37, 42, 52, 1);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
    border-radius: .75em .75em .75em 0;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.tel-contato:active{
    background: var(--cor-secundaria-escura);
    color: var(--cor-claro);
    -webkit-text-fill-color: var(--cor-claro);
}
.whats{
    width: 1.5em;
    height: auto;
    margin-right: .5em;
}
/* Form */
#form-contato fieldset{
    display: flex;
    flex-direction: column;
    margin-top: 3em;
}
input, textarea{
    font-family: 'Barlow Semi Condensed', sans-serif;
    background-color: var(--cor-escuro);
    border: 1px solid var(--cor-cinza60);
    width: 100%;
    margin: 0.5em 0 2em 0;
    font-size: 1em;
    --tt-key: p;
    padding: .6em .75em .75em .75em;
    color: var(--cor-claro);
    outline: none;
}
input{
    height: 2.5rem;
}
input:focus, textarea:focus{
    outline: none;
}
input:required, textarea:required {
    box-shadow:none;
}
input:invalid, textarea:required {
    box-shadow:none;
}
input:focus, textarea:focus{
    border: 1px solid var(--cor-secundaria);
    box-shadow: 0 0 0 4px rgba(6,129,127,0.4);
}
.form__label{
    --tt-key: p;
    font-size: 1em;
    color: var(--cor-cinza45);
}
.form-group:focus-within label {
    color: var(--cor-terciaria);
}
.input-info{
    float: right;
    font-style: italic;
    font-size: .75em;
    padding-top: .3em;
    color: var(--cor-cinza60);
}
#form-contato input[type="submit"]{
    margin: 0 auto 1em auto;
    cursor: pointer;
    height: auto;
}
/* Mensagem Sucesso */
.message{
    margin: 0 auto;
    display: block;
    font-size: 1.75em;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    padding: .25em 0;
}
.notice{    
    color: var(--cor-escuro);
    background-color: var(--cor-terciaria);
}
.error{
    color: var(--cor-terciaria);
    background-color: var(--cor-primaria-escura);
}

/*****************************************************/
/****************** INTERNAS GLOBAL ******************/
/*****************************************************/
.page-tit{
    background-color: var(--cor-secundaria);
    padding: 1.25em 0.75em 0.5em 0.75em;
    margin-bottom: 2em;
    width: max-content;
    width: -ms-max-content;
    max-width: 100%;
    grid-area: pagt;
}
.breadcrumb{
    color: var(--cor-secundaria-escura);
    font-size: 1.15em;
    margin: -1em 0 1em 0;
    display: none;
}
.breadcrumb li{
    display: inline;
}
ul.breadcrumb li+li:before {
    content: "/\00a0";
}
.breadcrumb li a:hover{
    color: var(--cor-escuro);
}
.breadcrumb li a:active{
    color: var(--cor-terciaria);
}


/*******************************************************/
/****************** PORTFOLIO LANDING ******************/
/*******************************************************/
.wrapper-port-land{
    display: grid;
    grid-template-columns: minmax(1.5em, 1fr) 6fr 1fr 6fr minmax(1.5em, 1fr);
    grid-template-areas:
        ". pagt pagt pagt ."
        ". cat  cat  cat  ."
}

/*******************************************************/
/****************** PORTFOLIO LISTING ******************/
/*******************************************************/
.wrapper-port-list{
    display: grid;
    grid-template-columns: minmax(1.5em, 1fr) 6fr 1fr 6fr minmax(1.5em, 1fr);
    grid-template-areas:
        ". pagt pagt pagt    ."
        ". list list list list"
        ". pagn pagn pagn    .";
}
.port-listagem{
    grid-area: list;
}
.cardport{
    width: 100%;
    position: relative;
    margin-bottom: 2em;
}
.cardport a::after{
    content: ' ';
    position: absolute;
    background-image: url('../images/long-arrow-grey.svg');
    color: var(--cor-cinza15);
    background-size: 2rem 1rem;
    height: 1rem;
    width: 2rem;
    right: 1rem;
    bottom: 1.2rem;
    z-index: 3;
    -moz-transition: .35s var(--ease-elastic);
    -o-transition: .35s var(--ease-elastic);
    -webkit-transition: .35s var(--ease-elastic);
    transition: .35s var(--ease-elastic);
}
.cardport a:hover .cardport__dados{
    background-color: var(--cor-terciaria);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, .2);
}
.cardport a:active .cardport__dados{
    background-color: var(--cor-secundaria);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, .2);
}
.cardport a:hover::after{
    right: 0.75rem;
}
.cardport img{
    width: 92.2%;
    z-index: 2;
    position: relative;
    border: 2px solid var(--cor-claro);
}
.cardport__dados{
    border: 1px solid var(--cor-cinza15);
    z-index: 1;
    margin: -1em 0 0 1.5em;
    padding: 1.5em 4em 1em 1em;
    position: relative;
    -moz-transition: background-color .35s ease-out;
    -o-transition: background-color .35s ease-out;
    -webkit-transition: background-color .35s ease-out;
    transition: background-color .35s ease-out;
}
.cardport__cliente{
    --tt-key: p;
    display: block;
    margin-bottom: 0.3em;
    color: var(--cor-cinza75);
    font-weight: 200;
}
.cardport__projeto{
    color: var(--cor-primaria-escura);
}

/* Paginação */
.pagination{
    grid-area: pagn;
    width: 100%;
    max-width: 25em;
    height: 3em;
    line-height: 2.75em;
    margin: 1em auto 4em auto;
    display: flex;
    align-items: center;
}
.pagi-normal{
    display: none;
}
.pagi-mobile{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    min-width: max-content;
    border: 1px solid var(--cor-cinza15);
    padding: 0 1.25em;
    margin: 0 1em;
    color: var(--cor-cinza45);
    --tt-key: p;
}
.pagi-arrow{
    background-color: var(--cor-escuro);
    width: 100%;
    padding-top: .25em;
    -moz-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
}
.pagi-arrow:hover{
    background-color: var(--cor-secundaria-escura) !important;
}
.pagi-left{
    padding-left: 1em;
}
.pagi-left:hover{
    padding-left: .75em;
    padding-right: .25em;
}
.pagi-left img{
    transform: rotate(180deg);
}
.pagi-right{
    padding-right: 1em;
    text-align: right;
}
.pagi-right:hover{
    padding-right: .75em;
    padding-left: .25em;
}

/******************************************************/
/****************** PORTFOLIO DETAIL ******************/
/******************************************************/
.wrapper-port-detail{
    display: grid;
    grid-template-columns: minmax(1.5em, 1fr) 6fr 1fr 6fr minmax(1.5em, 1fr);
    grid-template-areas:
        "pagt pagt pagt pagt pagt"
        "hero hero hero hero hero"
        "clie clie clie clie clie"
        "img2 img2 img2 img2 img2"
        ".    gale gale gale    .";
}
.tit-detail{
    padding: 1em 1.5em;
    margin-bottom: 2px;
    width: 100%;
}
.cardtitle{
    border:1px solid var(--cor-cinza15);
    padding: 1.5em;
    height: max-content;
    width: 100%;
    color: var(--cor-cinza75);
}
.cardtitle__title{
    color: var(--cor-cinza60);
    font-weight: 400;
    background-color: var(--cor-cinza15);
    width: max-content;
    padding: .58em .29em .29em;
    margin: -1.5rem 0 1rem 0;
}
.cardtitle__client{
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: .5em;
}
.cardtitle p{
    color: var(--cor-cinza75);
}
.cardproj{
    grid-area: clie;
}
.proj-imgsec{
    grid-area: img2;
    position: relative;
}
.proj-imgsec a{
    display: block;
    position: relative;
}
.proj-imgsec img{
    width: 100%;
    height: auto;
    display: block;
}
.proj-galeria{
    grid-area: gale;
    margin: 1.5em 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    grid-gap: 1.5em;
}
.proj-galeria a{
    position: relative;
}
.proj-galeria a::before, .proj-imgsec a::before{
    content:'';
    background-color: rgba(255,46,99,0.3);
    box-shadow: 0 .5em 1em rgba(0, 0, 0, .35);
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}
.proj-galeria a:hover::before, .proj-imgsec a:hover::before{
    display: block;
}
.proj-galeria img{
    width: 100%;
    height: auto;
    display: block;
}

/**********************************************/
/****************** SERVIÇOS ******************/
/**********************************************/
.wrapper-serv{
    display: grid;
    grid-template-columns: minmax(1.5em, 1fr) 6fr 1fr 6fr minmax(1.5em, 1fr);
    grid-template-areas:
        ". pagt pagt pagt ."
        ". are1 are1 are1 ."
        ". are2 are2 are2 ."
        "lser lser lser lser lser";
}
.area1{
    grid-area: are1;
}
.area1 p{
    margin-bottom: 1.75em;
    --tt-key: p;
}
.area2{
    grid-area: are2;
}
.h2serv{
    font-weight: 200;
    color: var(--cor-cinza15);
    font-style: italic;
    font-size: 2.4em;
    text-transform: uppercase;
    margin-bottom: .25em;
    --tt-key: ol;
}
.serv-topicos:before{
    content:attr(aria-label);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cor-primaria-escura);
    margin-bottom: 1em;
    display: block;
    --tt-key: h4;
}
.serv-topicos li{
    border-left: 2px solid var(--cor-cinza15);
    padding-left: .75em;
    margin-bottom: 1.5em;
    color: var(--cor-cinza75);
    line-height: 1.5;
    --tt-key: p;
}
.list-serv{
    grid-area: lser;
    margin: 1em 0 3em;
    display: grid;
    grid-gap: 2em;
    align-content: center;
}
.list-serv .cardtitle{
    max-width: 30em;
    margin: 0 auto;
}

/*********************************************/
/****************** EMPRESA ******************/
/*********************************************/
.wrapper-emp{
    display: grid;
    grid-template-columns: minmax(1.5em, 1fr) 6fr 1fr 6fr minmax(1.5em, 1fr);
    grid-template-areas:
        ". pagt pagt pagt ."
        ". arti arti arti ."
        ". cta  cta  cta  .";
        background-image: url('../images/bg-empresa.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center bottom; 
}
.wrapper-emp article{
    grid-area: arti;
    max-width: 26em;
    margin: 0 auto;
    z-index: 1;
}
.wrapper-emp article p {
    margin-bottom: 2em;
}
.wrapper-emp .bt-empresa-home{
    grid-area: cta;
}
.logo-a-serv{
    position: absolute;
    z-index: 0;
    top: 5em;
    right: 1em;
    width: 40vw;
    height: auto;
}

/*******************************************************************************************/
/************************************** MEDIA QUERIES **************************************/
/*******************************************************************************************/
/*!----------------------------------*/
/*!--------------- 600 --------------*/
/*!----------------------------------*/
@media screen and (min-width: 600px){
    /*** Footer ***/
    footer{
        background-image: url("../images/site/footer-bg-1024.jpg");
        height: 18em;
        display: grid;
        grid-template-columns: minmax(2em, 6em) 45% 45% minmax(2em, 6em);
        grid-template-rows: auto;
        grid-template-areas:
        ". logo cta ."
        ". fone cta ."
        ". cop  cta .";
        text-align: left;
        padding: 0;
    }
    .foo-logo{
        grid-area: logo;
        align-self: end;
    }
    .tel-footer {
        grid-area: fone;
        margin: 0;
    }
    .copyright{
        grid-area: cop;
        margin: 0;
    }
    footer .secondary{
        grid-area: cta;
        height: 3em;
        width: 7.125em;
        align-self: center;
        justify-self: right;
        margin: 0;
    }
    /* end footer */

    /******* Home *******/
    .wrapper{
        grid-template-columns: 1.5fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1.5fr;
        grid-template-areas:
            "hero hero hero hero hero hero hero hero hero hero hero hero hero"
            "cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  ."
            ".    desc desc desc desc desc desc desc desc desc desc desc ."
            ".    cta  cta  cta  cta  cta  cta  cta  cta  cta  cta  cta  ."
            ".    cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  ."
            "chp  chp  chp  chp  chp  chp  chp  chp  chp  chp  chp  chp  ."
            ".    .    .    pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  ."
            ".    pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  .    .    ."
            "emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp";
        background-position: 60vw 48%;
    }
    .chamada{
        padding: 0 0 0 10%;
    }
    .chamada::before{
        width: 8.7em;
        margin: -0.1em 0 0 -1.8em;
    }
    .sub-chamada{
        font-size: 1.1em;
    }
    .descricao-site{
        margin: 1.5em 0 2.5em 0;
    }
    /* categorias */
    .list-categorias{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14.9rem, 1fr)) !important;
        grid-gap: 0.5em;
    }
    .list-categorias li, .active {
        margin: 0 auto !important;
        max-width: 15rem !important;
    }
    /* projetos em destaque */
    .container-chamada-projetos{
        margin-bottom: 4em;
    }
    .cardhome{
        margin-bottom: 4.5em;
    }
    /* empresa */
    .empresa-home{
        grid-template-columns: 1.5fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1.5fr;
        grid-template-areas:
            ".   .   tit tit tit tit .   .   .   .   .   .   ."
            ".   .   des des des des des des des des des .   ."
            ".   .   .   cta cta cta cta cta cta cta .   .   .";
    }
    .logo-a-home{
        width: 38%;
        right: 9vw;
    }
    .bt-empresa-home{
        margin: 15% auto 100% auto;
    }

    /******* Lightbox *******/
    .lightbox__content{
        padding: 1em;
        margin: 1em;
    }
    .lightbox__close{
        top: -2em;
        right: 1em;
    }

    /******* Contato ********/
    .contato__content{
        width: 80%;
        max-width: 33.5em;
        padding: 3.5em;
    }
    .contato__content .page-tit{
        margin: -4.5em 0 3em 0;
    }
    /* BT Fone Whats */
    .tel-contato{
        top: 4.25em;
        right: 2.5em;
        font-size: 1.5em;
        padding: 0 .75em 0 .6em;
        height: 2.5em;
    }
    .whats{
        width: 1.5em;
        margin-right: .5em;
    }
    #form-contato fieldset{
        margin-top: 4em;
    }
    input{
        height: 3rem;
    }
    .input-info{
        font-size: .85em;
        padding-top: .4em;
    }
    #form-contato input[type="submit"]{
        margin: 0 auto;
    }
    .message{
        margin: 2em auto 0 auto;
    }


    /********* Internas Global *********/
    .page-tit{
        padding: 4em 2em 1.5em 2em;
    }
    .breadcrumb{
        display: block;
    }

    /******* Portfolio Landing *******/
    .wrapper-port-land{
        grid-template-columns: 1.5fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1.5fr;
        grid-template-areas:
            ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
            ". cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  .";
    }

    /******* Portfolio Category *******/
    .wrapper-port-list{
        grid-template-columns: 1.5fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1.5fr;
        grid-template-areas:
            ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
            ". list list list list list list list list list list list ."
            ". pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn .";
    }
    .port-listagem{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
        grid-column-gap: 1em;
    }
    .cardport{
        margin-bottom: 3em;
    }
    .cardport a::after{
        right: 1.5rem;
        bottom: 1.75rem;
    }
    .cardport a:hover::after{
        right: 1rem;
    }
    .cardport img{
        width: 85.55%;
    }
    .cardport__dados{
        margin: -4em 0 0 4em;
        padding: 5em 4em 1.5em 1.5em;
    }
    .cardport__cliente{
        margin-bottom: 0.3em;
    }
    .cardport__projeto{
        color: var(--cor-primaria-escura);
    }

    /******* Portfolio Detail *******/
    .wrapper-port-detail{
        grid-template-columns: 1.5fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1.5fr;
        grid-template-areas:
            "pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt"
            "hero hero hero hero hero hero hero hero hero hero hero hero hero"
            ".    clie clie clie clie clie clie clie clie clie clie clie    ."
            ".    img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2    ."
            ".    gale gale gale gale gale gale gale gale gale gale gale    .";
    }
    .tit-detail{
        padding-top: 3em;
    }
    .cardproj{
        margin: 3em 0;
    }
    .proj-galeria{
        margin-bottom: 4em;
    }
    .cardtitle__title{
        padding: 1.15em .35em .32em;
        margin: -2.5rem 0 1rem 0;
    }
    .cardtitle__client{
        margin-bottom: .65em;
    }

    /******* Serviços *******/
    .wrapper-serv{
        grid-template-columns: 1.5fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1.5fr;
        grid-template-areas:
            ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
            ". are1 are1 are1 are1 are1 are1 are1 are1 are1 are1 are1 ."
            ". are2 are2 are2 are2 are2 are2 are2 are2 are2 are2 are2 ."
            ". lser lser lser lser lser lser lser lser lser lser lser .";
    }
    .area1{
        margin-bottom: 2em;
    }
    .area2{
        margin-bottom: 2em;
    }
    .h2serv{
        margin-bottom: .5em;
    }
    .serv-topicos li{
        margin-bottom: 2em;
    }
    .list-serv{
        grid-row-gap: 4em;
        grid-column-gap: 2em;
        align-items: none;
        grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
        margin-bottom: 4em;
    }
    .list-serv .cardtitle{
        max-width: none;
        height: 100%;
    }

    /******* Empresa *******/
    .wrapper-emp{
        grid-template-columns: 1.5fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1fr 1.33fr 1.5fr;
        grid-template-areas:
            ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
            ". arti arti arti arti arti arti arti arti arti arti arti ."
            ". cta  cta  cta  cta  cta  cta  cta  cta  cta  cta  cta  .";
    }
    .wrapper-emp article{
        max-width: 30em;
        margin: 2em 0 0;
    }
    .wrapper-emp .bt-empresa-home{
        margin-bottom: 65%;
        margin-top: 2em;
    }
    .logo-a-serv{
        width: 45vw;
        right: 2em;
        top: 6em;
    }
}
/*!----------------------------------*/
/*!--------------- 920 --------------*/
/*!----------------------------------*/
@media screen and (min-width: 920px){

    /****** HEADER ******/
    header{
        display: grid;
        position: relative;
        grid-template-columns: 1fr auto minmax(605px, 18fr) 1fr;
        height: 176px;
        padding-top: 2em;
    }
    header > a{
        grid-column: 2 / 3;
    }
    .logo{
        margin: 0;
        width: 242px;
        height: 72px;
    }
    /****** Navigation ******/
    nav {
        all: unset;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        grid-column: 3 / 4;
        display: flex;
        justify-content: flex-end;
        top: 0;
        position: relative;
    }
    nav ul{
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        height: 5.5em;
    }
    nav li{
        margin: 0 0 0 4.5em;
    }
    nav li:last-child{
        margin-top: 0;
        margin-bottom: 0;
    }
    nav a {
        opacity: 1;
        color: var(--cor-cinza15);
        -webkit-text-fill-color: var(--cor-cinza15);
        font-size: 1.25em;
    }

    /* Dropdown menu */
    nav .menu-dropdown:after{
        position: absolute;
        content: ' ';
        background-image: url('../images/ic-chevron-6px.svg');
        background-size: 8px 5px;
        height: 5px;
        width: 8px;
        margin: 9px 0 0 7px;
        -moz-transition: rotate 800ms ease-in-out;
        -o-transition: rotate 800ms ease-in-out;
        -webkit-transition: rotate 800ms ease-in-out;
        transition: rotate 800ms ease-in-out;
    }
    nav ul li:hover ul{
        visibility: visible;
        z-index: 300;
    }
    .menu-dropdown ~ ul li{
        margin: 0;
        padding: 0 2em 1.5em;
    }
    .menu-dropdown ~ ul li:last-child{
        margin-bottom: 1.5em;
        padding: 0 2em 0;
    }
    .menu-dropdown ~ ul li a{
        text-transform: none;
        font-weight: 400;
    }
    .menu-dropdown ~ ul{
        position: absolute;
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        background: var(--cor-cinza90);
        padding-top: 1.5em;
        -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
        height: auto;
        visibility: hidden;
        border-top: .5em solid var(--cor-escuro);
        z-index: 300;
    }

    /* Main CTA */
    nav .main-cta{
        display: inline-block;
    }
    nav hr{
        display: none;
    }
    .nav-toggle-label{
        display: none;
    }

    /****** Footer ******/
    footer{
        background-image: url("../images/site/footer-bg-1920.jpg");
    }

    /****** Home ******/
    .wrapper{
        position: relative;
        grid-template-columns: 2fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 2fr;
        grid-template-areas:
        ". hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero ."
        ". .    cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  .    .    .    .    .    .    .    .    .    .    ."
        ". .    .    .    .    .    .    .    .    .    .    .    .    .    .    desc desc desc desc desc desc desc desc desc ."
        ". .    cta  cta  cta  cta  cta  cta  .    .    .    .    .    .    .    .    .    .    .    .    .    .    .    .    ."
        ". cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  ."
        ". chp  chp  chp  chp  chp  chp  chp  chp  chp  .    .    .    .    .    .    .    .    .    .    .    .    .    .    ."
        ". .    .    .    .    .    .    .    .    .    .    .    .    pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  ."
        ". pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  .    .    .    .    .    .    .    .    .    .    .    .    ."
        "emp emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp";
        background-position: 80vw 30%;
    }
    .bg-hero{
        background: var(--cor-escuro);
        height: 6em;
    }
    /* chamada */
    .chamada{
        padding: 0 0 0 0.75rem;
        margin-top: 0em;
        line-height: 1.4;
    }
    .chamada::before{
        width: 7.05em;
        height: 2.7em;
        margin: -1.25em 0 0 -0.75rem;
    }
    .sub-chamada{
        font-size: 0.8em;
    }
    .descricao-site{
        margin: -2.5em 0 0 0;
    }
    .bt-portfolio{
        margin: -1em 0 4em 0;
        height: -moz-min-content;
        height: -webkit-min-content;
        height: -o-min-content;
        height: min-content;
    }
    /* categorias */
    .cat-sublinhado{
        margin-bottom: 1.25em;
    }
    .cat-sublinhado::before{
        bottom: 0.1rem;
    }
    .list-categorias{
        grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)) !important;
        grid-gap: 1em;
    }
    .list-categorias li, .active {
        min-width: 15.5rem !important;
        max-width: unset !important;
    }
    /* projetos em destaque */
    .container-chamada-projetos{
        margin-top: 6.5em;
        margin-bottom: 0;
        align-self: stretch;
        position: relative;
    }
    .chamada-projetos{
        width: 100%;
        padding: 0 0.2em 0 0;
        line-height: 0.85;
        max-width: unset;
    }
    .chamada-projetos::before{
        width: 100%;
        height: 3.18em;
        margin: -2.15em 0 0 0;
        left: 0;
    }
    /* card projetos */
    .cardhome{
        margin-bottom: 0;
    }
    .cardhome a::after{
        right: 1.5rem;
        bottom: 1.6rem;
    }
    .cardhome img{
        width: 89.55%;
        z-index: 2;
        border: 2px solid var(--cor-claro);
    }
    .cardhome__dados{
        z-index: 1;
        margin: -0.2em 0 0 35.82%;
        padding: 1.6em 4.5em 1.2em 1.2em;
        min-height: 4em;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
    }
    .cardhome__dados::before{
        content:'';
        width: 100%;
        height: 6em;
        background-color: var(--cor-primaria-escura);
        position: absolute;
        top: -6em;
        right: 0;
        -moz-transition: background-color .35s ease-out;
        -o-transition: background-color .35s ease-out;
        -webkit-transition: background-color .35s ease-out;
        transition: background-color .35s ease-out;
    }
    .cardhome a:hover .cardhome__dados::before{
        background-color: var(--cor-secundaria-escura);
    }
    .cardhome a:active .cardhome__dados::before{
        background-color: var(--cor-secundaria);
    }
    .cardhome--primeiro{
        margin-top: -9em;
    }
    .cardhome--segundo{
        margin-top: -4em;
        margin-bottom: 6em;
    }
    /* empresa */
    .empresa-home{
        grid-template-columns: 2fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 2fr;
        grid-template-areas:
            ".   tit tit tit tit tit .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   ."
            ".   .   .   des des des des des des des des des .   .   .   .   .   .   .   .   .   .   .   .   ."
            ".   .   .   cta cta cta cta cta cta cat .   .   .   .   .   .   .   .   .   .   .   .   .   .   .";
        background-position: right bottom;
        background-size: 95%;
        margin-top: 2em;
    }
    .tit-empresa-home{
        margin: 0.5em 0 0.5em 0;
    }
    .empresa-desc-home{
        margin-top: 0;
        padding: 0.75em;
        background-color: rgba(252, 252, 252, .85);
    }
    .logo-a-home{
        width: 42%;
        top: 2em;
        right: 6.2vw;
    }
    .bt-empresa-home{
        margin: 20% 0 50% 0;
    }

    /********* Internas Global *********/
    .page-tit{
        margin: -1em 0 6em 0;
    }
    .page-tit::before{
        content: '';
        width: 100%;
        height: 6em;
        background-color: var(--cor-escuro);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    /********* Portfolio Landing *********/
    .wrapper-port-land{
        position: relative;
        grid-template-columns: 2fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 2fr;
        grid-template-areas:
        ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
        ". cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  .";
    }

    /********* Portfolio Category *********/
    .wrapper-port-list{
        position: relative;
        grid-template-columns: 2fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 2fr;
        grid-template-areas:
        ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
        ". list list list list list list list list list list list list list list list list list list list list list list list ."
        ". pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn .";
    }
    .cardport a::after{
        bottom: 2rem;
    }
    /* Paginação */
    .pagination{
        max-width: 100%;
        height: 2.5rem;
        width: max-content;
        margin: 0 auto 6rem auto;
    }
    .pagi-mobile{
        display: none;
    }
    .pagi-normal{
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        color: var(--cor-cinza75);;
    }
    .pagi-normal a{
        width: 2.5rem;
        height: 100%;
        border: 1px solid var(--cor-cinza30);
        text-align: center;
        line-height: 2.25em;
        margin: .5em;
        --tt-key: p;
    }
    @-moz-document url-prefix() {
        .pagi-normal a{
            line-height: 1.75em;
        }
    }
    .pagination a:hover:not(.pagination-active) {
        color: var(--cor-escuro);
        border: 1px solid var(--cor-escuro);
        background-color: var(--cor-terciaria);
    }
    .pagi-normal a.pagination-active{
        color: var(--cor-secundaria-escura);
        border: 2px solid var(--cor-secundaria);
        cursor: default;
    }
    .pagi-arrow{
        width: 2.5rem;
        height: 2.5rem;
        padding-top: 0;
        margin-top: 1em;
    }
    .pagi-arrow:hover{
        border: none !important;
    }
    .pagi-left{
        padding-left: 1em;
        margin-right: 1.5em;
    }
    .pagi-right{
        padding-right: 1em;
        margin-left: 1.5em;
    }
    .pagi-right img{
        margin-left: -1em;
    }

    /******* Portfolio Detail *******/
    .wrapper-port-detail{
        position: relative;
        grid-template-columns: 2fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 2fr;
        grid-template-areas:
        ".    pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt    ."
        "hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero"
        ".    img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 .    clie clie clie clie clie clie clie clie clie clie clie    ."
        ".    gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale    .";
    }
    .tit-detail{
        padding-top: 4em;
        margin-bottom: 0;
        width: max-content;
    }
    .wrapper-port-detail .hero{
        margin-top: calc(-3.45vw + -1.2rem);
        z-index: -1;
    }
    .cardproj{
        margin: 3em 0;
    }
    .proj-imgsec{
        margin: 3em 0 0;
        height: max-content;
    }
    .proj-galeria{
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
        grid-gap: 2.5em;
        margin-top: 0;
    }

    /******* Serviços *******/
    .wrapper-serv{
        position: relative;
        grid-template-columns: 2fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 2fr;
        grid-template-areas:
        ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
        ". are1 are1 are1 are1 are1 are1 are1 are1 are1 are1 are1 .    are2 are2 are2 are2 are2 are2 are2 are2 are2 are2 are2 ."
        ". lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser .";
    }
    .wrapper-serv .page-tit{
        margin-bottom: 3em;
    }

    /******* Empresa *******/
    .wrapper-emp{
        position: relative;
        grid-template-columns: 2fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 1fr 1.4fr 2fr;
        grid-template-areas:
        ".    pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt    ."
        ".    arti arti arti arti arti arti arti arti arti arti arti .    .    .    .    .    .    .    .    .    .    .    .       ."
        ".    cta  cta  cta  cta  cta  cta  cta  cta  cta  .    .    .    .    .    .    .    .    .    .    .    .    .    .       .";
            background-size: 100%;
            background-position: 50vw bottom;
    }
    .wrapper-emp .page-tit{
        margin-bottom: 3.5em;
    }
    .wrapper-emp article{
        max-width: none;
        margin: 0;
    }
    .wrapper-emp .bt-empresa-home{
        margin-bottom: 4em;
        margin-top: 1em;
    }
    .logo-a-serv{
        width: 45vw;
        right: 5%;
        top: 1.5em;
    }
}

/*!----------------------------------*/
/*!-------------- 1024 --------------*/
/*!----------------------------------*/
@media screen and (min-width: 1024px){
    /****** Home ******/
    .wrapper{
        background-position: 80vw 29%;
    }
    .sub-chamada{
        font-size: 0.85em;
    }
    .list-categorias{
        grid-gap: 2em;
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important;
    }
    /* empresa */
    .empresa-home{
        padding-top: 4em;
        background-size: 90%;
    }
    .tit-empresa-home{
        margin: 0.5em 0 0.5em 0;
    }
    .bt-empresa-home{
        margin: 20% 0 70% 0;
    }

    /*** Contato ***/
    .tel-contato{
        top: 5em;
    }
    .input-info{
        padding-top: .6em;
    }

    /********* Portfolio Category *********/
    .port-listagem{
        grid-column-gap: 2em;
    }

    /******* Portfolio Detail *******/
    .wrapper-port-detail{
        grid-template-areas:
        ".    pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt    ."
        "hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero"
        ".    img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 .    clie clie clie clie clie clie clie clie clie    ."
        ".    gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale    .";
    }
    .cardproj{
        margin: 4em 0;
    }
    .proj-imgsec{
        margin: 4em 0 0;
    }
    .proj-galeria{
        margin-top: 2em;
        grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
        grid-gap: 3em;
    }

    /******* Serviços *******/
    .list-serv{
        grid-column-gap: 3em;
        grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr));
    }

    /******* Empresa *******/
    .logo-a-serv{
        width: 37vw;
        right: 8%;
    }
}

/*!----------------------------------*/
/*!-------------- 1360 --------------*/
/*!----------------------------------*/
@media screen and (min-width: 1360px){
    /****** Home ******/
    .wrapper{
        background-position: 80vw 31%;
    }
    .sub-chamada{
        font-size: 0.97em;
    }
    /*** Contato ***/
    .tel-contato{
        top: 5.65em;
    }

    /********* Portfolio Category *********/
    .cardport{
        margin-bottom: 4em;
    }
    .port-listagem{
        grid-column-gap: 4em;
    }
    @-moz-document url-prefix() {
        .pagi-normal a{
            line-height: 1.5em;
        }
    }

    /******* Portfolio Detail *******/
    .wrapper-port-detail{
        grid-template-areas:
        ".    pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt    ."
        "hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero"
        ".    img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 .    clie clie clie clie clie clie clie    ."
        ".    gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale    .";
    }
    .wrapper-port-detail .hero{
        margin-top: calc(-3.4vw + -1.2rem);
    }
    .cardproj{
        margin: 5em 0;
    }
    .proj-imgsec{
        margin: 5em 0 0;
    }
    .proj-galeria{
        margin: 4em 0 6em;
        grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
        grid-gap: 4em;
    }

    /******* Serviços *******/
    .wrapper-serv{
        grid-template-areas:
        ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
        ". are1 are1 are1 are1 are1 are1 are1 are1 are1 are1 .    .    are2 are2 are2 are2 are2 are2 are2 are2 are2 are2 are2 ."
        ". lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser .";
    }
    .list-serv{
        margin: 3.5em 0 6em;
        grid-column-gap: 3.5em;
        grid-row-gap: 5em;
        grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    }

    /******* Empresa *******/
    .wrapper-emp{
        grid-template-areas:
        ".    pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt    ."
        ".    arti arti arti arti arti arti arti arti arti .    .    .    .    .    .    .    .    .    .    .    .    .    .       ."
        ".    cta  cta  cta  cta  cta  cta  cta  cta  cta  .    .    .    .    .    .    .    .    .    .    .    .    .    .       .";
            background-size: 95%;
    }
    .logo-a-serv{
        width: 42vw;
        right: 10%;
    }
    .wrapper-emp .bt-empresa-home{
        margin-bottom: 6em;
        margin-top: 2em;
    }
}

/*!----------------------------------*/
/*!--------------- 1600 --------------*/
/*!----------------------------------*/
@media screen and (min-width: 1600px){
    /****** Home ******/
    .wrapper{
        grid-template-columns: 1.75fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1.75fr;
        grid-template-areas:
        ". hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero ."
        ". .    .    cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  cha  .    .    .    .    .    .    .    .    .    .    ."
        ". .    .    .    .    .    .    .    .    .    .    .    .    .    desc desc desc desc desc desc desc desc .    .    ."
        ". .    .    cta  cta  cta  cta  cta  .    .    .    .    .    .    .    .    .    .    .    .    .    .    .    .    ."
        ". .    cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  .    ."
        ". chp  chp  chp  chp  chp  chp  chp  .    .    .    .    .    .    .    .    .    .    .    .    .    .    .    .    ."
        ". .    .    .    .    .    .    .    .    .    .    .    .    pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  pj1  ."
        ". pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  pj2  .    .    .    .    .    .    .    .    .    .    .    .    ."
        "emp emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp  emp";
        background-position: 76vw 33%;
    }
    .chamada::before{
        width: 6.92em;
        height: 2.7em;
        margin: -1.25em 0 0 -0.75rem;
    }
    .sub-chamada{
        font-size: 0.94em;
    }
    .descricao-site{
        margin: -1em 0 0 0;
    }
    .bt-portfolio{
        margin: 0 0 4em 0;
    }
    .list-categorias{
        grid-gap: 3em;
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)) !important;
    }
    /* projetos em destaque */
    .container-chamada-projetos{
        margin-top: 12em;
    }
    .cardhome__dados{
        padding: 1.6em 5em 2em 2em;
    }
    .cardhome--segundo{
        margin-top: -12em;
        margin-bottom: 6em;
    }
    .cardhome a::after{
        right: 2.5rem;
        bottom: 2.5rem;
    }
    .cardhome a:hover::after{
        right: 1.5rem;
    }
    /* empresa */
    .empresa-home{
        grid-template-columns: 1.75fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1.75fr;
        grid-template-areas:
            ".   .   tit tit tit tit tit .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   ."
            ".   .   .   des des des des des des des des .   .   .   .   .   .   .   .   .   .   .   .   .   ."
            ".   .   .   cta cta cta cta cta cta .   .   .   .   .   .   .   .   .   .   .   .   .   .   .   .";
        margin-top: 0;
        padding-top: 10em;
        background-size: 80%;
        overflow: visible;
    }
    .logo-a-home{
        top: 10em;
        max-width: 40em;
    }
    .tit-empresa-home{
        margin: 0.5em 0 1em 0;
    }
    .bt-empresa-home{
        margin: 20% 0 70% 0;
    }

    /****** Lightbox ******/
    .lightbox__content{
        padding: 2em;
    }
    .lightbox__close{
        top: -1.5em;
        right: 2em;
    }

    /****** Contato ********/
    .contato__content{
        max-width: 45em;
    }
    .tel-contato{
        top: 5em;
    }
    .input-info{
        font-size: 1em;
        padding-top: .4em;
    }

    /****** Portfolio Landing ******/
    .wrapper-port-land{
        grid-template-columns: 1.75fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1.75fr;
        grid-template-areas:
        ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
        ". cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  cat  .";
    }

    /********* Portfolio Category *********/
    .wrapper-port-list{
        grid-template-columns: 1.75fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1.75fr;
        grid-template-areas:
        ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
        ". list list list list list list list list list list list list list list list list list list list list list list list ."
        ". pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn pagn .";
    }
    .port-listagem{
        grid-template-columns: repeat(auto-fill, minmax(33.5rem, 1fr));
        grid-column-gap: 6em;
    }
    .cardport{
        margin-bottom: 6em;
    }

    /********* Portfolio Detail *********/
    .wrapper-port-detail{
        grid-template-columns: 1.75fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1.75fr;
        grid-template-areas:
        ".    pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt    ."
        "hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero hero"
        ".    img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 img2 .    clie clie clie clie clie clie clie    ."
        ".    gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale gale    .";
    }
    .wrapper-port-detail .hero{
        margin-top: -4.57rem;
    }
    .cardproj{
        margin: 9em 0;
    }
    .proj-imgsec{
        margin: 9em 0 0;
    }
    .proj-galeria{
        margin: 6em 0 6em;
        grid-gap: 5em;
    }

    /******* Serviços *******/
    .wrapper-serv{
        grid-template-columns: 1.75fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1.75fr;
        grid-template-areas:
        ". pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt ."
        ". are1 are1 are1 are1 are1 are1 are1 are1 are1 .    .    .    are2 are2 are2 are2 are2 are2 are2 are2 are2 are2 .    ."
        ". lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser lser .";
    }
    .wrapper-serv .page-tit{
        margin-bottom: 5em;
    }
    .list-serv{
        margin: 5em 0 7em;
        grid-column-gap: 5em;
        grid-row-gap: 7em;
        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    }
    .list-serv .cardtitle{
        padding: 2em;
    }
    .list-serv .cardtitle__title{
        margin: -1.75em 0 1.2em;
    }

    /******* Empresa *******/
    .wrapper-emp{
        grid-template-columns: 1.75fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1fr 1.125fr 1.75fr;
        grid-template-areas:
        ".    pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt pagt    ."
        ".    arti arti arti arti arti arti arti arti arti .    .    .    .    .    .    .    .    .    .    .    .    .    .       ."
        ".    cta  cta  cta  cta  cta  cta  cta  cta  cta  .    .    .    .    .    .    .    .    .    .    .    .    .    .       .";
        background-size: auto 900px;
        background-position: 45vw bottom;
    }
    .logo-a-serv{
        width: 40vw;
        max-width: 53em;
        right: 12%;
    }
    .wrapper-emp article{
        max-width: 38em;
    }
    .wrapper-emp .bt-empresa-home{
        margin-bottom: 7em;
    }
}