.portfolio .projeto{position: relative;}
.portfolio .projeto a{display: block;}
.portfolio .projeto:before{content: ''; position: absolute; width: 100%; height: 100%; border: 9px solid transparent; transition: .2s linear; z-index: 100}
.portfolio .projeto:hover:before{border-color: #ffdd00}
.portfolio .projeto img.img-fluid{transition: all .6s linear; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%);}
.portfolio .projeto:hover img.img-fluid{-webkit-filter: none; /* Safari 6.0 - 9.0 */ filter: none;}
.portfolio .projeto h3{display: block; position: absolute; left: 0; bottom: 55px; width: 100%; color: #fff; font-weight: 700; font-size: 18px}
.portfolio .projeto p.descricao-projeto{display: block; position: absolute; left: 0; bottom: 35px; width: 100%; color: #fff; margin: 0; padding: 0;}
.portfolio .projeto .overlay-projeto{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; border: solid 9px transparent; border-top: 0; cursor: pointer; padding: 0 15px 35px; opacity: 0; transition: .2s all linear; background: rgba(0,0,0,0.8); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); z-index: 200;}
.portfolio .projeto:hover .overlay-projeto{opacity: 1; border-top: 0; border-bottom-color: #ffdd00; border-right-color: #ffdd00; border-left-color: #ffdd00;}
.portfolio .projeto p.mais{display: block; position: absolute; left: 0; bottom: 80px; width: 100%; font-size: 64px; line-height: 64px}

@media (min-width: 768px){
    .portfolio .projeto h3{left: 0; bottom: 35px;}
    .portfolio .projeto p.descricao-projeto{left: 0; bottom: 15px;}
    .portfolio .projeto p.mais{left: 0; bottom: 60px}
}
@media (min-width: 992px) {
    .portfolio .projeto h3{left: 0; bottom: 55px;}
    .portfolio .projeto p.descricao-projeto{left: 0; bottom: 35px;}
    .portfolio .projeto p.mais{left: 0; bottom: 80px}
}
@media (min-width: 1200px) {
    .portfolio .projeto .overlay-projeto{padding-top: 0;}
    .portfolio .projeto p.mais{font-size: 200px; line-height: 200px}
}

.portfolio h1.entry-title{
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a2e4a;
    margin: 0;
}
.portfolio h1.entry-title::before{
    display: none;
}
.portfolio .entry, .portfolio .entry p{
    font-size: 18px;
    color: #1a2e4a;
    line-height: 1.3;
}
.portfolio .bg-x{
    padding-top: 30px;
    padding-bottom: 50px;
}

@media (min-width: 768px) {
    .portfolio.single-project{
        background: url('../images/quadrado.png') 95% 350px no-repeat;
        background-size: 100px 100px;
    }
    .portfolio .bg-x{
        padding-top: 100px;
        padding-bottom: 100px;
        background: url('../images/x.png') 0 110px no-repeat;
        background-size: 15px 116px;
    }
    .portfolio .entry-title{
        padding-left: 50px;
    }
    .portfolio .entry{
        padding-left: 50px;
    }
    .portfolio .entry, .portfolio .entry p{
        font-size: 20px;
    }
}
@media (min-width: 992px) {
    .portfolio.single-project{
        background: url('../images/quadrado.png') 95% 350px no-repeat;
        background-size: 150px 150px;
    }
    .portfolio .bg-x{
        padding-top: 150px;
        padding-bottom: 150px;
        background: url('../images/x.png') 0 110px no-repeat;
        background-size: 25px 194px;
    }
    .portfolio .entry-title{
        padding-left: 100px;
    }
    .portfolio .entry{
        padding-left: 100px;
    }
    .portfolio .entry, .portfolio .entry p{
        font-size: 20px;
    }
}
@media (min-width: 1200px) {
    .portfolio.single-project{
        background: url('../images/quadrado.png') 95% 350px no-repeat;
        background-size: 191px 191px;
    }
    .portfolio .bg-x{
        padding-top: 150px;
        padding-bottom: 150px;
        background: url('../images/x.png') 10% 110px no-repeat;
        background-size: 31px 240px;
    }
    .portfolio .entry-title{
        padding-left: 200px;
    }
    .portfolio .entry{
        padding-left: 200px;
    }
    .portfolio .entry, .portfolio .entry p{
        font-size: 20px;
    }
}
@media (min-width: 1230px) {
    .portfolio .container{
        max-width: 1230px;
    }
}

.portfolio .mockups{
    padding: 30px 0 0;
}
.portfolio .mockups h3{
    font-size: 28px;
    font-weight: 400;
    color: #1a2e4a;
    margin: 0 0 20px;
    padding: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .portfolio .mockups h3{
        font-size: 32px;
    }
}
@media (min-width: 992px) {
    .portfolio .mockups h3{
        font-size: 40px;
    }
}
@media (min-width: 1200px) {
    .portfolio .mockups h3{
        font-size: 47.29px;
    }
}

.portfolio .resultados{
    padding: 80px 0 50px;
}
.portfolio .resultados h3{
    font-size: 24px;
    font-weight: 400;
    color: #1a2e4a;
    margin: 0 0 50px;
    padding: 0;
    line-height: 1.2;
}
.portfolio .resultados h3 strong{
    font-weight: 700;
}

.portfolio .resultados .resultado{
    margin-bottom: 50px;
}
.portfolio .resultados .resultado .resultado-icone{
    margin: 0 auto 20px;
    width: 80px;
}
.portfolio .resultados .resultado .resultado-conteudo{
    text-align: center;
    font-size: 18px;
}
.portfolio .resultados .resultado .resultado-conteudo p{
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .portfolio .resultados{
        padding: 100px 0 50px;
    }
    .portfolio .resultados h3{
        font-size: 48px;
        margin-bottom: 75px;
    }
    .portfolio .resultados h3 strong{
        display: block;
        margin-left: 35%;
    }

    .portfolio .resultados .resultado{
        margin-bottom: 100px;
    }
    .portfolio .resultados .resultado .resultado-icone{
        margin: 0 auto 20px;
        width: 150px;
    }
    .portfolio .resultados .resultado .resultado-conteudo{
        text-align: center;
        font-size: 26px;
    }
    .portfolio .resultados .resultado .resultado-conteudo p{
        text-align: center;
        margin: 0;
    }
}
@media (min-width: 992px) {
    .portfolio .resultados{
        padding: 100px 0 50px;
    }
    .portfolio .resultados h3{
        font-size: 48px;
        margin-bottom: 75px;
    }
    .portfolio .resultados h3 strong{
        display: block;
        margin-left: 35%;
    }

    .portfolio .resultados .resultado{
        display: flex;
        align-items: center;
        margin-bottom: 100px;
    }
    .portfolio .resultados .resultado .resultado-icone{
        margin: 0 15px 0 0;
        width: 150px;
    }
    .portfolio .resultados .resultado .resultado-conteudo{
        text-align: left;
        font-size: 26px;
        flex: 1;
    }
    .portfolio .resultados .resultado .resultado-conteudo p{
        text-align: left;
        margin: 0;
    }
}
@media (min-width: 1200px) {
    .portfolio .resultados{
        padding: 100px 0 50px;
    }
    .portfolio .resultados h3{
        font-size: 60.62px;
        margin-bottom: 75px;
    }
    .portfolio .resultados h3 strong{
        display: block;
        margin-left: 35%;
    }

    .portfolio .resultados .resultado{
        display: flex;
        align-items: center;
        margin-bottom: 100px;
    }
    .portfolio .resultados .resultado .resultado-icone{
        margin: 0 15px 0 0;
        width: 190px;
    }
    .portfolio .resultados .resultado .resultado-conteudo{
        text-align: left;
        font-size: 30px;
        flex: 1;
    }
    .portfolio .resultados .resultado .resultado-conteudo p{
        text-align: left;
        margin: 0;
    }
}

.portfolio .video{
    background-color: #1a2e4a;
    padding: 50px 0 0;
}
.portfolio .video h3{
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 28px;
    margin: 0 0 30px;
    padding: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .portfolio .video{
        padding: 70px 0 0;
    }
    .portfolio .video h3{
        font-size: 42px;
    }
}
@media (min-width: 992px) {
    .portfolio .video{
        padding: 70px 0 0;
    }
    .portfolio .video h3{
        font-size: 52px;
    }
}
@media (min-width: 1200px) {
    .portfolio .video{
        padding: 90px 0 0;
    }
    .portfolio .video h3{
        font-size: 60.62px;
    }
}

.portfolio-posts{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.container-projeto{position: relative; width: 100%;}

.projeto{position: relative; height: 250px; overflow: hidden;}
.projeto a{display: block; color: #fff !important;}
.projeto .overlay-projeto{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-content: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; border:0; cursor: pointer; padding: 15px; opacity: 0; transition: .2s all linear; background: rgba(26,46,74,1); z-index: 200;}
.projeto .overlay-projeto h3{font-size: 18px; font-weight: 800; line-height: 1.7; margin: 0; padding: 0; width: 100%; color: #fff !important;}
.projeto:hover .overlay-projeto{opacity: 1;}
.projeto img{display: block; position: absolute; left: 50%; top: 50%; width: 100%; max-width: 100%; height: 400px; object-fit: cover; transform: translate(-50%, -50%);}

.container-projeto:nth-child(even) .projeto .overlay-projeto{background-color: #f6db00;}
.container-projeto:nth-child(even) .projeto .overlay-projeto h3{color: #1a2e4a;}

.bg-header-portfolio{
    background: url('../images/banner.png') center center no-repeat;
    background-size: cover;
    padding: 50px 0;
}
.figital{
    padding: 0;
    margin: 100px auto;
}
.figital p{
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}
.figital p.onoff{
    margin-bottom: 50px;
}
.figital p.somos{
    font-size: 42px;
    line-height: 1.1;
}
.figital p.somos span{
    position: relative;
}
.figital p.somos span::before{
    content: '';
    display: block;
    position: absolute;
    top: -20px;
    left: 0;
    width: 100px;
    height: 11px;
    background-color: #f6db00;
}

@media (min-width: 576px){
    .container-projeto:first-child{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(2){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(3){-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .container-projeto:nth-child(4){-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .container-projeto:nth-child(5){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(6){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}
@media (min-width: 768px){
    .container-projeto:first-child{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(2){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(3){-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .container-projeto:nth-child(4){-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .container-projeto:nth-child(5){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(6){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}

    .projeto{height: 300px;}
    .projeto .overlay-projeto{padding: 15px 30px;}
    .projeto .overlay-projeto h3{font-size: 22px;}
    
    .figital p{
        font-size: 21px;
        letter-spacing: 10px;
    }
    .figital p.onoff{
        margin-left: 5%;
        margin-bottom: 50px;
    }
    .figital p.somos{
        font-size: 48px;
        line-height: 1.1;
        letter-spacing: 12px;
    }
    .figital p.somos span::before{
        top: -20px;
        width: 140px;
    }
}
@media (min-width: 992px) {
    .container-projeto:first-child{-ms-flex: 0 0 27%; flex: 0 0 27%; max-width: 27%;}
    .container-projeto:nth-child(2){-ms-flex: 0 0 27%; flex: 0 0 27%; max-width: 27%;}
    .container-projeto:nth-child(3){-ms-flex: 0 0 46%; flex: 0 0 46%; max-width: 46%;}
    .container-projeto:nth-child(4){-ms-flex: 0 0 46%; flex: 0 0 46%; max-width: 46%;}
    .container-projeto:nth-child(5){-ms-flex: 0 0 27%; flex: 0 0 27%; max-width: 27%;}
    .container-projeto:nth-child(6){-ms-flex: 0 0 27%; flex: 0 0 27%; max-width: 27%;}

    .projeto{height: 350px;}
    .projeto .overlay-projeto{padding: 15px 30px;}
    .projeto .overlay-projeto h3{font-size: 22px;}

    .agencia-360{
        font-size: 22px;
    }
    .figital p{
        font-size: 24px;
        letter-spacing: 10px;
    }
    .figital p.onoff{
        margin-left: 10%;
        margin-bottom: 50px;
    }
    .figital p.somos{
        font-size: 60px;
        line-height: 1.1;
        letter-spacing: 12px;
    }
    .figital p.somos span::before{
        top: -20px;
        width: 180px;
    }
}
@media (min-width: 1200px) {
    .container-projeto:first-child{-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
    .container-projeto:nth-child(2){-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
    .container-projeto:nth-child(3){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(4){-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .container-projeto:nth-child(5){-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
    .container-projeto:nth-child(6){-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}

    .projeto{height: 400px;}
    .projeto .overlay-projeto{padding: 15px 50px;}
    .projeto .overlay-projeto h3{font-size: 25px;}
    
    .agencia-360{
        font-size: 25px;
    }
    .figital p{
        font-size: 29.81px;
        letter-spacing: 10px;
    }
    .figital p.onoff{
        margin-left: 20%;
        margin-bottom: 50px;
    }
    .figital p.somos{
        font-size: 72.5px;
        line-height: 1.1;
        letter-spacing: 12px;
    }
    .figital p.somos span::before{
        top: -20px;
        width: 260px;
    }
}
@media (min-width: 1600px){
    .agencia-360{
        font-size: 25px;
    }
    .figital p{
        font-size: 29.81px;
        letter-spacing: 10px;
    }
    .figital p.onoff{
        margin-left: 23%;
        margin-bottom: 50px;
    }
    .figital p.somos{
        font-size: 72.5px;
        line-height: 1.1;
        letter-spacing: 12px;
    }
    .figital p.somos span::before{
        top: -20px;
        width: 260px;
    }
}