* {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size:14px; color:#333333; line-height:1.3; box-sizing:border-box}
html {height:100%}
body {margin:0px; height:100%; background-color:#1C1E29}
h1 {font-family:'Dosis',helvetica,arial; font-size:45px; color:#EE4252; line-height:1.1; font-weight:400; width:100%; text-align:center; margin:0; padding:0; margin-top:70px; text-transform: uppercase;}

.bgHome {background-image:url('../img/bg.jpg'); background-repeat:no-repeat; background-position: center center; background-size:cover}
.bordaMenu {border-bottom:1px #2F313D solid}
.gridCont {width:100%; display:flex; justify-content:center; flex-wrap: wrap}
.grid {width:calc(100% - 28px); max-width:1240px; margin:0px 14px}
.gridTexto {width:calc(100% - 28px); max-width:800px; }
.hoverOpacidade:hover {opacity:0.8; filter: alpha(opacity=80); cursor:pointer}
.tituloTag {width:100%; text-align:center; font-family:'Dosis', helvetica, arial; font-size:45px; color:#ffffff; line-height:1.1}
.titulo {width:100%; font-family:'Dosis', helvetica, arial; font-size:45px; color:#EE4252; line-height:1.1; text-align:center}
.saibaMaisHome {width:100%; text-align:center; margin-top:40px; padding:0px 14px}
.saibaMaisHome input[type=button] {border:1px #fff solid; width:100%; max-width:390px; height:60px; background-color:transparent; color:#fff; font-size:17px; transition: 200ms;}
.saibaMaisHome input[type=button]:hover {border:1px #EE4252 solid; background-color:#EE4252; cursor:pointer}
.flex {display:flex; flex-wrap:wrap}
.linha {width:100%; display:flex; flex-wrap:wrap; width:100%}
.centralizar {justify-content: center;}

.marginTop20 {margin-top:20px}
.marginTop30 {margin-top:30px}
.marginTop40 {margin-top:40px}
.marginTop50 {margin-top:50px}
.marginTop60 {margin-top:60px}
.marginTop80 {margin-top:80px}
.marginBottom20 {margin-bottom:20px}

#topo {height:94px; align-items:center}
#topo .menu {display:flex; justify-content: space-between; align-items:center}
#topo .contDir {display:flex; padding-top:10px}
#topo .contLinks {display:flex; align-items:center; height:34px; border-right:1px #707070 solid}
#topo .contLinks a {margin-right:40px; color:#BEBEBE; font-size:14px; text-decoration:none}
#topo .contLinks a:hover {color:#EE4252}
#topo .linkSel {color:#EE4252 !important; border-bottom:2px #EE4252 solid}
#topo .contWhats {display:flex; align-items:center; margin-left:30px; color:#F5F5F5; font-size:15px}
#topo .contWhats img {height:30px; margin-right:4px}
#topo .menuMobile {padding-top:20px; display:none}

#menuMobile {display:flex; position:fixed; top:0; left:-100%; width:100%; height:100%; background-color: #EE4252; z-index:9; flex-wrap: wrap;}
#menuMobile .close {width:100%; height:55px; background-image:url('../img/icone-fechar.png'); background-repeat:no-repeat; background-position:calc(100% - 15px) center}
#menuMobile .menus {width:100%; height:100%; display:flex; justify-content: center; flex-direction: column; align-items:center}
#menuMobile .menus a {font-family:'Dosis',helvetica,arial; font-size:29px; font-weight:500; color:#ffffff; text-decoration:none; margin-bottom:18px}

#banner {display:flex; width:100%; height:calc(100% - 170px); align-items:center}
#banner .esq {width:calc(50% - 620px); height:350px; border:1px #707070 solid; border-right:0px; border-left:0px}
#banner .dir {width:100%; max-width:1240px}
#banner .textos {display:flex; flex-wrap: wrap; align-content:center; width:50%; height:350px; border:1px #707070 solid; border-left:0px}
#banner .txt {width:100%; font-family:'Dosis', helvetica, arial; font-size:45px; color:#707070; line-height:1.1}
#banner .destaque {width:100%; height:62px; font-family:'Dosis', helvetica, arial; font-size:72px; color:#EE4252; line-height:1.1}

#saibaMais {width:100%; text-align:center; color:#ffffff; font-size:13px}

#servicos .container {display:flex; flex-wrap: wrap; justify-content: space-between}
#servicos .linkBox {width:calc(33.33% - 18px); text-decoration:none}
#servicos .box {width:100%; border:2px #373A4D solid; padding:30px; margin-top:28px; -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.63); -moz-box-shadow: 0px 0px 14px 0px rgba(14, 13, 13, 0.63); box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.63); font-size:15px; color:#8A8A8A; line-height:1.5; transition:300ms}
#servicos .box:hover {border:2px #EE4252 solid; cursor:pointer}
#servicos h2 {margin:0px; padding:0px; font-family:'Dosis', helvetica, arial; font-size:23px; color:#ffffff; font-weight:700; margin-top:14px; margin-bottom:16px}
#servicos .gridInterna {display:flex; flex-wrap: wrap; width:calc(100% - 28px); max-width:900px; margin:0px 14px}
#servicos .colTexto {width:calc(50% - 1px); border-right:1px #434555 solid; padding-right:70px}
#servicos .colForm {width:50%; padding-left:70px}
#servicos .form {width:100%; display:flex; flex-wrap:wrap; justify-content: space-between}
#servicos .txt {width:100%; font-size:15px; color:#d4d4d4; margin-bottom:6px}
#servicos input[type=text], #servicos input[type=email] {width:100%; height:55px; border:1px #434555 solid; background-color:transparent; font-size:15px; color:#CBCBCB; padding:0px 15px; outline-style:none; margin-top:10px}
#servicos textarea {width:100%; height:120px; border:1px #434555 solid; background-color:transparent; font-size:15px; color:#CBCBCB; padding:15px; outline-style:none; margin-top:10px}
#servicos textarea:focus, #servicos input[type=text]:focus {border:1px #EE4252 solid}
#servicos .enviar {width:100%; text-align: center; margin-top:12px}
#servicos .enviar input {width:100%; height:55px; background-color: #EE4252; border:0px; color:#ffffff; font-size:15px}
#servicos .sucesso {width:100%; margin-top:20px; background-color:#4fa744; color:#ffffff; text-align:center; padding:15px 10px; font-family:'Open Sans',helvetica,arial; font-size:14px}
#servicos .col50 {display:flex; flex-wrap:wrap; width:50%; align-items:center; align-content:center}
#servicos .col50 span,b {color:#c7c7c7; font-size:15px; line-height:1.6}
#servicos .col50 b {font-weight:700}
#servicos .col50.ilustra {padding:0px 80px; justify-content:center; align-items:center; align-content:center}
#servicos .col50.ilustra img {max-width:100%; height:auto}
#servicos .solicite {font-size:28px; color:#fff; font-weight:700}
#servicos .solicite span {color:#EE4252; font-size:28px}
#servicos .btnSolicite {width:100%; max-width:400px; height:55px; background-color: #EE4252; border:0px; color:#ffffff; font-size:15px; font-weight:600}

#portfolio .container {display:flex; flex-wrap: wrap; justify-content: space-between}
#portfolio .boxG {width:calc(50% - 17.5px); margin-top:35px; position:relative; cursor:pointer}
#portfolio .boxP {width:calc(33.33% - 23.33px); margin-top:35px; position:relative; cursor:pointer}
#portfolio .boxP img, #portfolio .boxG img {width:100%; height:auto}
#portfolio .divInfoG {display:flex; position:absolute; width:100%; height:100px; bottom:0px; overflow:hidden; cursor:default}
#portfolio .divInfoP {display:flex; position:absolute; width:100%; height:85px; bottom:0px; overflow:hidden; cursor:default}
#portfolio .contInfo {width:100%; height:100%; background-color:#EE4252; font-family:'Dosis', helvetica, arial; color:#F8B4BA; display:flex; flex-wrap: wrap; align-content:center; padding:15px; margin-top:100px}
#portfolio .tamG {font-size:18px}
#portfolio .tamP {font-size:16px}
#portfolio .tamG h3 {width:100%; margin:0px; font-size:29px; font-weight:500; color:#ffffff; font-family:'Dosis', helvetica, arial; line-height:1.1}
#portfolio .tamP h3 {width:100%; margin:0px; font-size:24px; font-weight:500; color:#ffffff; font-family:'Dosis', helvetica, arial; line-height:1.1}

#clientes {margin-top:80px}
#clientes .container {display:flex; flex-wrap: wrap; justify-content: center}
#clientes .box {width:20%; margin-top:20px; filter:alpha(opacity=40); opacity:0.4; text-align:center; transition:200ms}
#clientes .box:hover {filter:alpha(opacity=100); opacity:1; cursor:pointer}
#clientes .box img {width:100%}

#contato .container {display:flex; flex-wrap: wrap; justify-content: center}
#contato .txt {width:100%; font-size:19px; color:#747474; margin-top:15px; text-align:center}
#contato .form {width:100%; max-width:840px; display:flex; flex-wrap:wrap; justify-content: space-between}
#contato input[type=text], #contato input[type=email] {width:calc(50% - 10px); height:60px; border:1px #434555 solid; background-color:transparent; font-size:17px; color:#848484; padding:0px 15px; outline-style:none; margin-top:20px}
#contato textarea {width:100%; height:200px; border:1px #434555 solid; background-color:transparent; font-size:17px; color:#848484; padding:15px; outline-style:none; margin-top:20px}
#contato textarea:focus, #contato input[type=text]:focus {border:1px #EE4252 solid}
#contato .enviar {width:100%; text-align: center; margin-top:20px}
#contato .enviar input {width:100%; max-width:400px; height:60px; background-color: #EE4252; border:0px; color:#ffffff; font-size:17px}
#contato .sucesso {width:100%; margin-top:20px; background-color:#4fa744; color:#ffffff; text-align:center; padding:15px 10px; font-family:'Open Sans',helvetica,arial; font-size:14px}

#rodape {margin-top:80px; border-top:1px #434555 solid; padding-top:20px; padding-bottom:30px}
#rodape div {color:#747474; font-size:17px}
#rodape .cont {display:flex; width:calc(100% - 14px); margin:0px 14px; max-width:840px; flex-wrap:wrap; justify-content: space-between}
#rodape .colunas {margin-top:30px}
#rodape .titulo {display:flex; width:100%; font-family:'Dosis',helvetica,arial; font-size:17px; color:#ffffff; margin-bottom:6px}
#rodape .contRedes {width:100%; display:flex; justify-content: center; flex-wrap: wrap;}
#rodape .contRedes a {justify-content: center;}
#rodape .redes {display:inline-block; width:45px; height:45px; background-color:#EE4252; border-radius:6px; margin:20px 10px}
#rodape .redes:hover {background-color:#333333; cursor:pointer}
#rodape .facebook {background-image:url('../img/icone-redes-facebook.png'); background-size:30px; background-position:center center; background-repeat:no-repeat}
#rodape .instagram {background-image:url('../img/icone-redes-instagram.png'); background-size:30px; background-position:center center; background-repeat:no-repeat}
#rodape a {display:flex; width:100%; font-size:16px; color:#747474; text-decoration:none; margin-top:4px}
#rodape a:hover {color:#EE4252}
#rodape .por {width:100%; text-align:center; color:#747474; font-size:14px; margin-top:40px}

#whatsFlutuante {position:fixed; z-index:9; bottom:20px; right:20px; width:60px; height:60px; background-color:#25D366; border-radius:50%; background-image:url('../img/icone-whatsapp-branco.png'); background-repeat: no-repeat; background-position: center center;}

#migalha {display:flex; justify-content: center; width:100%; color:#ffffff; font-size:17px; list-style-type: none; margin:0; padding:0; margin-top:15px; margin-bottom:60px}
#migalha li a span {color:#ffffff; font-size:17px; margin:0px 10px}
#migalha a {text-decoration:none}
#migalha .ativo {color:#646464}

#blocoTexto {font-family:'Open Sans',helvetica,arial; font-size:15px; color:#D2D2D2; line-height:1.7}
#blocoTexto img {max-width:100%; height:auto; margin-top:20px}
#blocoTexto ul {margin-top:4px; padding-left:18px}
#blocoTexto li {color:#D2D2D2; font-family:'Open Sans',helvetica,arial; font-size:15px; color:#D2D2D2; line-height:1.3; margin-top:6px}
#blocoTexto b {color:#ffffff; font-weight:600}
#blocoTexto h2 {margin:0px; padding:0px; line-height:1.3; color:#fff; font-size:21px; font-family:'Open Sans',helvetica,arial; margin-bottom:18px}
#blocoTexto a {color:#EE4252; text-decoration:none}
#blocoTexto a:hover {text-decoration:underline}


@media screen and (max-width: 1280px) {
    #banner .textos {padding:0px 20px; width:70%}
}

@media screen and (max-width: 1100px) {
    #clientes .box {width:25%}
}

@media screen and (max-width: 1000px) {
    #portfolio .divInfoP {height:100px}
    #portfolio .boxP {width:calc(50% - 17.5px)}
    #portfolio .tamP {font-size:18px}
    #portfolio .tamP h3 {font-size:29px}
}

@media screen and (max-width: 890px) {
    #topo .contDir {display:none}
    #topo .menuMobile {display:block}
    #banner .textos {width:90%; height:200px}
    #banner .txt {font-size:25px}
    #banner .destaque {font-size:40px; height:30px}
    #servicos .linkBox {width:100%}
    #servicos .colTexto {width:100%; border-right:0px; padding-right:0px}
    #servicos .colForm {width:100%; padding-left:0px; margin-top:20px; padding-top:30px; border-top:1px #434555 solid}
    #clientes .box {width:33.33%}
    #contato input[type=text], #contato input[type=email] {width:100%}
    #rodape .colunas {width:100%; display:flex; flex-wrap: wrap; justify-content: center;}
    #rodape a {justify-content: center;}
    #rodape .titulo {justify-content: center;}
    #rodape .colunas:nth-child(2) {order:3}
    #servicos .col50 {width:100%; order:2}
    #servicos .col50.ilustra {padding:0px; order:1 !important; padding-bottom:20px}
}

@media screen and (max-width: 740px) {
    #portfolio .boxG {width:100%}
    #portfolio .boxP {width:100%}
    #portfolio .divInfoP {height:85px}
    #portfolio .divInfoG {height:85px}
    #portfolio .tamP {font-size:16px}
    #portfolio .tamG {font-size:16px}
    #portfolio .tamP h3 {font-size:24px}
    #portfolio .tamG h3 {font-size:24px}
    #clientes .box {width:50%}
}

@media screen and (max-width: 430px) {
    #rodape {padding-bottom:90px}
}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #888888; }
::-webkit-scrollbar-thumb {background: #333333; }
::-webkit-scrollbar-thumb:hover {background: #EE4252; }