@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900');

*{box-sizing:border-box}
html{background-color:#000}
body{background-color:#f0f0f0;display:block;max-width:1920px;margin:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3,p,a,li,input,textarea{font-family:'Lato',sans-serif}
a,input,header{text-decoration:none;transition:all 0.4s}
header,footer,section,.conteudo{position:relative;display:block;width:100%;padding:0;margin:0}
.container{display:block;width:100%;max-width:1180px;padding:0 15px;margin:0 auto}
.botao-faleconosco{display:block;width:250px;padding:12px 12px 15px;margin:auto;border-radius:5px;font-size:21px;font-weight:700;line-height:24px;text-align:center}
.botao-faleconosco.verde{background-color:#ccff66;border:solid 1px #339933;color:#339933}
.botao-faleconosco.verde:hover{background-color:#fff}
.botao-faleconosco.azul{background-color:#069;border:solid 1px #66ccff;color:#fff}
.botao-faleconosco.azul:hover{background-color:#008bbf}

header{position:absolute;z-index:99}
header.azul{background-color:#008bbf}
header .container{height:70px}
.logo{display:inline-block}
.logo a,#menu{height:70px;display:flex;align-items:center}
.logo a img{height:28px}
#menu{float:right}
#menu a{display:inline-block;font-size:20px;font-weight:400;color:#80c5df;padding:10px 20px}
#menu a:hover{color:#fff}
#menu a.menu-faleconosco{border:solid 1px #2d6f9a;border-radius:5px;color:#fff;margin-left:20px}
#menu a.menu-faleconosco:hover{border-color:#fff}
.sticky{position:fixed;top:0;width:100%;background-color:#008bbf}

#home{background:url(../img/clientes-satisfeitos-com-novo-software.jpg) no-repeat center #008bbf;background-size:cover;height:100vh;display:flex;text-align:center}
#home .container{align-self:flex-end;padding-bottom:75px}
#home h1{font-size:42px;font-weight:300;line-height:45px;margin-bottom:20px;color:#fff}
#home h1 span{display:block;margin-bottom:40px;font-size:100px;font-weight:900;line-height:100px;color:#ccff66}
#home p{display:block;margin-bottom:125px;font-size:21px;font-weight:700;line-height:29px;color:#fff}

#desafios{background-color:#fff;text-align:center}
#desafios .container{padding:90px 15px 75px 15px}
#desafios h2{font-size:48px;font-weight:300;line-height:52px;margin-bottom:15px;color:#80c5df}
#desafios p{font-size:18px;font-weight:400;line-height:27px;color:#999;padding:0 10%;margin-bottom:30px}
#desafios p strong{display:block;color:#80c5df;margin:45px 0 -20px 0}
#desafios ul{list-style:none;padding:0}
#desafios ul.desafios li{display:inline-block;padding:15px 20px;margin:1%;border:1px dotted #80c5df;border-radius:10px;font-size:21px;line-height:24px;color:#666}
#desafios ul.segmentos li{display:inline-block;width:30%;padding:20px 25px;margin:1.5%;border:1px dotted #80c5df;border-radius:10px;font-size:21px;line-height:24px;color:#008bbf;background:#f2f9fc}

#diferenciais{background:url(../img/textura-mesa-madeira.jpg) repeat center top #e2e2c7;overflow:hidden}
#diferenciais:before{content:'';position:absolute;display:block;width:100%;height:630px;top:0;left:0;background:url(../img/clarear-mesa-madeira.png) repeat-x center top;z-index:1}
#diferenciais:after{content:'';position:absolute;display:block;width:750px;height:100%;top:0;right:61%;background:url(../img/desenvolvendo-software-com-cliente.png) no-repeat left top;z-index:2}
#diferenciais .container{position:relative;z-index:3;padding:90px 15px 100px 420px}
#diferenciais h2{font-size:56px;font-weight:700;line-height:60px;margin-bottom:45px;color:#069}
#diferenciais p{font-size:23px;font-weight:400;line-height:32px;margin-bottom:23px;color:#3c2718}
#diferenciais .topicos{display:block;margin-top:22px}
#diferenciais .topicos:after{content:'';display:block;width:100%;height:0;clear:both}
#diferenciais .topicos div{display:block;width:50%;float:left;margin-top:45px}
#diferenciais .topicos div:nth-child(odd){padding-right:15px}
#diferenciais .topicos div:nth-child(even){padding-left:15px}
#diferenciais .topicos div:nth-of-type(3){clear:both}
#diferenciais .topicos h3{font-size:26px;font-weight:900;line-height:35px;margin-bottom:5px;color:#339933}
#diferenciais .topicos p{font-size:17px;font-weight:400;line-height:25px;margin-bottom:0px;color:#000}

#cases{background-color:#fff;text-align:center}
#cases .container{padding:90px 0 120px}
#cases h2{font-size:56px;font-weight:300;line-height:60px;margin-bottom:45px;color:#000}
#cases p{font-size:23px;font-weight:400;line-height:32px;color:#008bbf;padding:0 10%}
#cases p strong{color:#000;display:block;padding:30px 0}
#cases .botao-faleconosco{margin-top:60px}
#cases .topicos{display:block}
#cases .topicos:after{content:'';display:block;width:100%;height:0;clear:both}
#cases .topicos div{display:block;width:25%;float:left}
#cases .topicos img{display:block;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);padding:10px;margin:auto}
#cases .topicos h3{font-size:18px;font-weight:400;line-height:21px;color:#14aae6;padding-top:15px}
#cases .topicos p{font-size:13px;font-weight:400;line-height:21px;color:#666;text-transform:uppercase;padding-bottom:60px}

#transformacaodigital{background:url(../img/duvida-transformacao-digital.jpg) no-repeat center top #6999bc}
#transformacaodigital .container{padding:90px 420px 100px 15px}
#transformacaodigital h2{font-size:56px;font-weight:700;line-height:60px;margin-bottom:45px;color:#ccff66}
#transformacaodigital p{font-size:23px;font-weight:400;line-height:32px;margin-bottom:23px;color:#fff}
#transformacaodigital a{margin:60px 0 0}

#faleconosco .container{padding:90px 15px 120px;text-align:center}
#faleconosco h2{font-size:56px;font-weight:900;line-height:60px;margin-bottom:45px;color:#008bbf}
#faleconosco p{font-size:18px;font-weight:400;line-height:27px;color:#666;padding:0}
#faleconosco p strong{font-size:23px;line-height:35px;color:#333;display:block;padding:90px 0 120px}
#faleconosco p strong.sucesso{padding:30px 0 30px}
#faleconosco p a{color:#008bbf;border-bottom:solid 1px #008bbf;display:inline-block;padding-bottom:3px;margin-top:30px}
#faleconosco p a:hover{color:#069;border-color:#069}
#faleconosco form{display:block}
#faleconosco form *:focus{outline:none!important}
#faleconosco form .error{border-color:#f00!important}
#faleconosco form .fnome,#faleconosco form .femail,#faleconosco form .ftelefone{display:block;width:32%;margin-right:2%;float:left}
#faleconosco form .fnome,#faleconosco form .femail,#faleconosco form .ftelefone,#faleconosco form .fmensagem{background-color:#fff;border:solid 1px #fff;border-radius:5px;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);font-size:21px;font-weight:400;padding:10px 15px}
#faleconosco form .ftelefone{margin-right:0}
#faleconosco form .fmensagem{width:100%;height:220px;margin:2% 0}
#faleconosco form .fnome.error,#faleconosco form .femail.error,#faleconosco form .ftelefone.error,#faleconosco form .fmensagem.error{border-color:#f00}
#faleconosco form .fbotaoenviar{display:block;width:100%;background-color:#008bbf;border:0;border-radius:5px;font-size:17px;font-weight:900;color:#fff;text-transform:uppercase;padding:20px}
#faleconosco form .fbotaoenviar:hover{cursor:pointer;background-color:#069}
.error-field{display:none!important}

footer{background-color:#fff;display:flex;align-items:center;height:60px;text-align:center}
footer p{font-size:13px;font-weight:400;line-height:27px;color:#a29898}
footer p span{display:inline-block;padding:0 15px}
footer a{color:#a29898}

#case-detalhe{background-color:#fff}
#case-detalhe .container{padding:180px 15px 120px}
#case-detalhe .container>p{font-size:24px;font-weight:300;line-height:24px;margin-bottom:45px;color:#999;text-transform:uppercase;text-align:center}
#case-detalhe h1{font-size:64px;font-weight:900;line-height:65px;margin-bottom:15px;color:#008bbf;text-align:center}
#case-detalhe h2{font-size:28px;font-weight:400;line-height:32px;margin-bottom:60px;color:#333;text-align:center}
#case-detalhe .case-conteudo:after{content:'';display:block;width:100%;height:0;clear:both}
#case-detalhe .case-descricao{display:block;float:left;width:70%;padding-right:5%}
#case-detalhe .case-descricao h2{font-size:28px;font-weight:700;line-height:28px;margin-bottom:6px;color:#008bbf;text-align:left}
#case-detalhe .case-descricao h2:not(.primeiro){padding-top:36px;margin-top:36px;border-top:1px dotted #dedede}
#case-detalhe .case-descricao h3,#case-detalhe .case-descricao p{font-size:18px;font-weight:400;line-height:28px;margin-bottom:15px;color:#888}
#case-detalhe .case-descricao p{color:#333}
#case-detalhe .case-tecnologias{display:block;float:left;width:30%}
#case-detalhe .case-tecnologias p{font-size:18px;font-weight:700;line-height:31px;color:#14aae6;margin-top:2px}
#case-detalhe .case-tecnologias ul{padding-left:21px;margin-top:5px}
#case-detalhe .case-tecnologias ul li{font-size:18px;font-weight:400;line-height:31px;color:#14aae6}
#case-detalhe .botao-faleconosco{margin-top:60px}

#metodo-detalhe{background-color:#fff}
#metodo-detalhe .container{padding:180px 15px 120px}
#metodo-detalhe .container>p{font-size:24px;font-weight:300;line-height:24px;margin-bottom:45px;color:#999;text-transform:uppercase;text-align:center}
#metodo-detalhe h1{font-size:48px;font-weight:900;line-height:52px;margin-bottom:30px;color:#069;text-align:center}
#metodo-detalhe .metodo-conteudo{text-align:center}
#metodo-detalhe .metodo-conteudo p{font-size:21px;font-weight:400;line-height:29px;color:#333}
#metodo-detalhe .metodo-conteudo p strong{display:inline-block;margin-top:18px;margin-bottom:60px}
#metodo-detalhe .metodo-conteudo img{max-width:100%}
#metodo-detalhe .botao-faleconosco{margin-top:90px}

#sucesso-detalhe{background-color:#fff}
#sucesso-detalhe .container{padding:180px 15px 150px}
#sucesso-detalhe .container>p{font-size:24px;font-weight:300;line-height:24px;margin-bottom:45px;color:#999;text-transform:uppercase;text-align:center}
#sucesso-detalhe h1{font-size:48px;font-weight:900;line-height:52px;margin-bottom:30px;color:#069;text-align:center}
#sucesso-detalhe .sucesso-conteudo p{font-size:21px;font-weight:400;line-height:29px;color:#333;text-align:center}


@media(min-width:960px){
.menu-mobile{display:none}
#menu{display:flex!important;align-items:center!important}
}

@media(max-width:1599px){
#diferenciais:after{right:64%}
}

@media(max-width:1399px){
#home .container{padding-bottom:50px}
#home p{margin-bottom:75px}
#diferenciais:after{right:65%}
}

@media(max-width:1099px){
#home h1{font-size:38px;line-height:42px}
#home h1 span{font-size:94px;line-height:94px}
#diferenciais:after{right:61%}
#diferenciais h2{font-size:44px;line-height:47px}
#diferenciais p{font-size:21px;line-height:29px;margin-bottom:21px}
#diferenciais .topicos{display:block;margin-top:14px}
#diferenciais .topicos div{margin-top:30px}
#diferenciais .topicos h3{font-size:24px;line-height:29px}
#diferenciais .topicos p{font-size:15px;line-height:22px}
#cases h2{font-size:44px;line-height:47px;margin-bottom:30px}
#cases p{font-size:21px;line-height:29px;padding:0 5%}
#cases .topicos div{width:33.333%}
#cases .topicos p{padding-bottom:45px}
#transformacaodigital{background-position:left -600px top}
#transformacaodigital h2{font-size:42px;line-height:47px;margin-bottom:30px}
#transformacaodigital p{font-size:19px;line-height:25px;margin-bottom:18px}
#transformacaodigital a{margin:60px 0 0}
#faleconosco .container{padding:90px 60px}
#faleconosco h2{font-size:44px;line-height:47px}
#faleconosco p strong{padding:75px 0 30px}
}

@media(max-width:1023px){
#home .container{padding-bottom:25px}
#home h1{font-size:36px;line-height:40px}
#home h1 span{font-size:88px;line-height:88px;margin-bottom:20px}
#home p{margin-bottom:50px}
#diferenciais:after{width:100%;height:100%;top:0;right:0;background-image:url(../img/desenvolvendo-software-com-cliente-mobile.png);background-size:100% auto}
#diferenciais .container{position:relative;z-index:3;padding:260px 30px 90px}
#diferenciais h2{font-size:42px;line-height:45px;margin-bottom:23px}
#diferenciais p{font-size:21px;line-height:28px;margin-bottom:21px}
#diferenciais .topicos div{margin-top:30px}
#diferenciais .topicos h3{font-size:24px;line-height:29px}
#diferenciais .topicos p{font-size:18px;line-height:24px}
#cases .container{padding:75px 30px 90px}
#cases h2{font-size:42px;line-height:45px}
#cases p{font-size:21px;line-height:29px;padding:0}
#cases .topicos div{width:33.333%}
#cases .topicos h3{font-size:17px}
#transformacaodigital{background-position:left -650px top}
#transformacaodigital .container{padding:75px 420px 75px 30px}
#transformacaodigital h2{font-size:36px;line-height:42px}
#transformacaodigital p{font-size:18px;line-height:24px}
#transformacaodigital a{margin:45px 0 0}
#faleconosco .container{padding:75px 60px}
#faleconosco h2{font-size:42px;line-height:45px}
}

@media(max-width:959px){
.menu-mobile{display:inline-block;float:right;margin-top:15px}
.menu-mobile img{width:40px;height:40px}
#menu{float:none;width:100%;display:none}
#menu a{display:block;background-color:#fff;font-size:21px;color:#80c5df!important;padding:20px;margin:0 -15px!important;text-align:center;border-bottom:solid 1px #eee}
#menu a:hover{background-color:#069;color:#fff!important}
#menu a.menu-faleconosco{border:0;border-radius:0}
#home{min-height:520px}
#home .container{padding-bottom:60px}
#home h1{font-size:34px;line-height:38px}
#home h1 span{font-size:85px;line-height:85px;margin-bottom:20px}
#diferenciais .container{position:relative;z-index:3;padding:220px 30px 90px}
#diferenciais h2{font-size:38px;line-height:43px}
#diferenciais p{font-size:21px;line-height:28px;margin-bottom:21px}
#diferenciais .topicos div{margin-top:30px}
#diferenciais .topicos h3{font-size:24px;line-height:29px}
#diferenciais .topicos p{font-size:18px;line-height:24px}
#cases .container{padding:50px 30px 75px}
#cases h2{font-size:38px;line-height:43px;padding:0 10%}
#cases p{font-size:21px;line-height:29px;padding:0}
#cases p br{display:none}
#cases .topicos div{width:50%}
#transformacaodigital{background-position:left -720px top}
#transformacaodigital .container{padding:45px 330px 60px 30px}
#transformacaodigital h2{font-size:30px;line-height:36px}
#transformacaodigital a{margin:30px 0 0}
#faleconosco .container{padding:60px}
#faleconosco h2{font-size:38px;line-height:43px;margin-bottom:30px}
#faleconosco form .fnome,#faleconosco form .femail,#faleconosco form .ftelefone,#faleconosco form .fmensagem{font-size:19px}
}

@media(max-width:799px){
#diferenciais .container{position:relative;z-index:3;padding:200px 30px 75px}
#transformacaodigital{background-position:left -760px top}
}

@media(max-width:767px){
.botao-faleconosco{font-size:21px;line-height:21px}
#home h1{font-size:30px;line-height:30px}
#home h1 span{margin:5px 0 30px;font-size:52px;line-height:52px}
#home p{margin-bottom:75px;font-size:19px;line-height:27px}
#desafios .container{padding:60px 30px 45px 30px}
#desafios h2{font-size:42px;line-height:46px}
#desafios ul.desafios li,
#desafios ul.segmentos li{display:block;width:100%;margin:2% 0;padding:20px;font-size:19px;line-height:21px}
#diferenciais:after{background-size:150% auto;background-position:center top}
#diferenciais .container{padding:280px 30px 60px}
#diferenciais h2{font-size:32px;line-height:36px;margin-bottom:18px}
#diferenciais p{font-size:19px;line-height:25px;margin-bottom:18px}
#diferenciais .topicos div{width:100%;float:none;margin-top:36px}
#diferenciais .topicos div:nth-child(odd){padding-right:0}
#diferenciais .topicos div:nth-child(even){padding-left:0}
#diferenciais .topicos h3{font-size:21px;line-height:24px}
#diferenciais .topicos p{font-size:18px;line-height:24px}
#cases .container{padding:45px 30px 60px}
#cases h2{font-size:40px;line-height:44px;margin-bottom:36px}
#cases p{font-size:18px;line-height:25px}
#cases .topicos div{width:100%;float:none}
#cases .topicos h3{font-size:17px}
#cases .botao-faleconosco{margin-top:30px}
#transformacaodigital{background-position:center top;background-size:100% auto}
#transformacaodigital .container{padding:250px 30px 60px 30px}
#transformacaodigital h2{font-size:32px;line-height:36px;margin-bottom:18px}
#transformacaodigital p{font-size:19px;line-height:26px;margin-bottom:21px}
#transformacaodigital a{margin:30px 0 0}
#faleconosco .container{padding:60px 30px}
#faleconosco h2{font-size:32px;line-height:36px;margin-bottom:30px}
#faleconosco p strong{font-size:24px;line-height:32px}
#faleconosco form .fnome,#faleconosco form .femail,#faleconosco form .ftelefone{width:100%;margin-right:0%;margin-bottom:5%;float:none}
#faleconosco form .fmensagem{margin:0 0 5% 0}
footer{display:block;height:auto;text-align:center;padding:20px 0}
footer p{line-height:23px}
footer p span{display:block;padding:0;font-size:0;line-height:0}
footer a{color:#a29898}
#case-detalhe .container,#metodo-detalhe .container,#sucesso-detalhe .container{padding:150px 30px 90px}
#case-detalhe .container>p,#metodo-detalhe .container>p,#sucesso-detalhe .container>p{font-size:21px;margin-bottom:30px}
#case-detalhe h1{font-size:48px;line-height:50px;margin-bottom:15px}
#case-detalhe h2{font-size:21px;line-height:27px;margin-bottom:45px}
#case-detalhe .case-descricao,#case-detalhe .case-tecnologias{float:none;width:100%;padding-right:0}
#case-detalhe .botao-faleconosco{margin-top:45px}
#metodo-detalhe h1{font-size:40px;line-height:44px;margin-bottom:20px}
#metodo-detalhe .metodo-conteudo p{font-size:18px;line-height:27px}
#metodo-detalhe .metodo-conteudo p strong{margin-top:15px;margin-bottom:45px}
#metodo-detalhe .botao-faleconosco{margin-top:60px}
}

@media(max-width:699px){
#diferenciais .container{padding-top:260px}
}

@media(max-width:649px){
#diferenciais .container{padding-top:230px}
}

@media(max-width:499px){
#diferenciais .container{padding-top:190px}
}

@media(max-width:449px){
#diferenciais .container{padding-top:160px}
}

@media(max-width:399px){
#home h1{font-size:28px;line-height:28px}
#home h1 span{font-size:48px;line-height:48px}
#home p{margin-bottom:45px;font-size:18px;line-height:26px}
#diferenciais .container{padding:150px 20px 60px}
#diferenciais h2{font-size:28px;line-height:30px}
#cases h2{font-size:36px;line-height:38px}
#transformacaodigital .container{padding:210px 20px 60px 20px}
#transformacaodigital h2{font-size:28px;line-height:30px}
#transformacaodigital p{font-size:18px;line-height:24px}
#faleconosco .container{padding:45px 20px}
#faleconosco h2{font-size:30px;line-height:32px}
#faleconosco p{font-size:16px;line-height:25px}
#faleconosco p strong{font-size:21px;line-height:29px}
}

.cookie-overlay {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background: #fff;
    z-index: 2051;
    line-height: 20px;
    font-size: 14px;
    border-radius: 6px;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

    div:first-child {
        width: 458px;
    }

    a {
        text-decoration: underline;
    }

    .close-cookies {
        cursor: pointer;
    }

    @include media-breakpoint-down(md) {
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;

        > div:first-child {
        width: auto;
        }
    }
}