* {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:#F9F9F9; background-image:url('../img/bg.jpg'); background-repeat:no-repeat; background-position:top center}
h2 {margin:0px; padding:0px; font-size:36px; color:#333333; font-weight:700; line-height:1.1; text-align:center}

.container {padding:0px}
.gridCont {width:100%; display:flex; justify-content:center; flex-wrap: wrap}
.grid-g {width:calc(100% - 28px); max-width:1240px; margin:0px 14px}
.grid-m {width:calc(100% - 28px); max-width:800px; }

.solicitar-proposta {background-color:#1C1C1C; font-size:15px; color:#fff; font-weight:600; border-radius:50px; padding:22px 80px; text-decoration:none; transition: 100ms;}
.solicitar-proposta:hover {background-color:#252525; color:#fff; text-decoration:none}
.marginTop10 {margin-top:10px !important}
.marginTop20 {margin-top:20px !important}
.marginTop30 {margin-top:30px !important}
.txtAlignLeft {text-align:left !important}
.center {display:flex; width:100%; flex-wrap: wrap; justify-content: center;}

#topo .container {display:flex; flex-wrap: wrap; justify-content: space-between; padding:10px 0px; align-items: center;}
#topo img {width:100%; max-width:241px; height:auto}
#topo .entrar {border:2px #fff solid; font-size:14px; color:#fff; font-weight:700; border-radius:50px; padding:15px 50px; text-decoration: none; transition: 100ms;}
#topo .entrar:hover {background-color:#fff; color:#FF9400}

#banner .container {height:500px; display:flex; align-items:center}
#banner .bloco {width:100%; max-width:550px}
#banner .texto, #banner .texto b {font-size:28px; color:#fff; line-height:1.4; font-weight:300}
#banner .texto b {font-weight:700}
#banner .titulo {display:block; font-size:50px; font-weight:800; color:#fff; line-height:1.1; margin-bottom:6px}

#comoFunciona {margin-top:150px}
#comoFunciona .bloco {display:flex; flex-wrap:wrap; justify-content: space-between; margin-top:50px}
#comoFunciona .box {width:33.33%; padding:0px 30px; display:flex; flex-wrap:wrap; justify-content:center; flex-direction: column; align-items:center}
#comoFunciona .box .circulo {width:102px; height:102px; background-color:#FF9400; border-radius:100px}
#comoFunciona .box .titulo {font-size:23px; color:#FF9400; font-weight:700; margin-top:20px}
#comoFunciona .box .texto {font-size:16px; text-align:center; margin-top:15px; line-height:1.5}
#comoFunciona .bg1 {background: url('../img/como-funciona-configure.png') no-repeat center center}
#comoFunciona .bg2 {background: url('../img/como-funciona-divulgue.png') no-repeat center center}
#comoFunciona .bg3 {background: url('../img/como-funciona-cuidamos-do-resto.png') no-repeat center center}
#comoFunciona .divBt {display:flex; justify-content:center; margin-top:50px}

#equipe {background-color:#fff; margin-top:60px; padding:30px 0px}
#equipe .container {display:flex; flex-wrap: wrap}
#equipe .coltexto {width:35%; padding-right:70px; display:flex; flex-wrap:wrap; align-content:center}
#equipe .texto, #equipe b {font-size:17px; color:#333; line-height:1.4}
#equipe .colimg {width:65%}
#equipe .divisao {width:100%; margin:30px 0px}
#equipe .divisao div {background-color:#FF9400; font-size:1px; width:50%; height:3px}
#equipe .colimg img {width:100%; height:auto; padding:10px; border:1px #E8E8E8 solid; border-radius:6px}

#deixe {margin-top:60px}
#deixe .bloco {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:50px}
#deixe .box {width:calc(25% - 15px); background-color:#fff; border:1px #F1EDED solid; padding:35px 20px}
#deixe .check {background:url('../img/icone-check.png') no-repeat center center; height:46px; width:100%}
#deixe .titulo {font-size:22px; font-weight:700; width:100%; text-align:center; line-height:1.1; margin:20px 0px}
#deixe .texto {font-size:15px; color:#646464; line-height:1.5; width:100%; text-align:center}
#deixe .divBt {display:flex; justify-content:center; margin-top:50px}

#projetos {margin-top:60px}
#projetos .container {display:flex; justify-content:center; flex-wrap:wrap; flex-direction: column; align-items:center}
#projetos .subtitulo {font-size:19px; width:100%; max-width:450px; text-align:center; margin-top:10px}
#projetos .bloco {width:100%; display:flex; flex-wrap:wrap; margin-top:20px}
#projetos .box {width:25%}
#projetos .box img {max-width:100%; max-height:100%}

#perguntas {margin-top:60px}
#perguntas .box {background-color:#fff; border-radius:4px; padding:25px 30px; margin-top:20px; -webkit-box-shadow: 3px 3px 9px 0px rgba(0,0,0,0.16); box-shadow: 3px 3px 9px 0px rgba(0,0,0,0.16);}
#perguntas .pergunta {font-size:18px; font-weight:600; background:url('../img/icone-arrow-down.png') no-repeat center right; padding-right:20px; cursor:pointer}
#perguntas .active {background:url('../img/icone-arrow-up.png') no-repeat center right}
#perguntas .resposta {font-size:15px; color:#999999; line-height:1.5; margin-top:20px; display:none}

#proposta {background-color:#232323; padding:50px 0px; margin-top:80px}
#proposta .container {width:calc(100% - 28px); max-width:540px}
#proposta .white {color:#fff !important}
#proposta .subtitulo {display:block; width:100%; margin-top:10px; font-size:15px; color:#BBBBBB; text-align: center;}
#proposta form {margin-top:20px}
#proposta input[type=text], #proposta input[type=email], #proposta textarea {width:100%; height:48px; background-color:#fff; border-radius:4px; font-size:16px; padding:0px 15px; border:0px; margin-top:10px}
#proposta textarea {padding:15px; height:auto}
#proposta input[type=submit] {width:100%; height:48px; background-color:#FF9400; color:#fff; font-size:16px; font-weight:700; border:0px; border-radius:4px; margin-top:10px}
#proposta input[type=submit]:hover {background-color:#e9992a; cursor:pointer}

#sucesso {display:none; width:100%; border:2px #60AE1C solid; border-radius:3px; padding:30px; margin-top:30px}
#sucesso div:nth-child(1) {width:100%; font-size:25px; color:#60AE1C; text-align:center; font-weight:700}
#sucesso div:nth-child(2), #sucesso span {width:100%; font-size:18px; color:#fff; text-align:center; margin:20px 0px}
#sucesso div:nth-child(3) {width:100%; font-size:13px; color:#a3a3a3; text-align:center}

#rodape {background-color:#1D1D1D; color:#A8A8A8; padding:30px; text-align:center; line-height:1}
#rodape a {color:#FF9400; text-decoration:none}

@media screen and (max-width: 1040px) {
    #equipe .coltexto {width:100%; padding-right:0px}
    #equipe .colimg {width:100%; margin-top:30px}
}

@media screen and (max-width: 850px) {
    #deixe .box {width:calc(50% - 10px); margin-bottom:20px}
}

@media screen and (max-width: 780px) {
    #projetos .box {width:50%}
    #comoFunciona .box {width:100%; margin-top:30px}
    #comoFunciona .box:first-child {margin-top:0px}
}

@media screen and (max-width: 720px) {
    body {background-position:left -160px}
    #banner .container {height:400px}
    #banner .titulo {font-size:40px}
    #banner .texto, #banner .texto b {font-size:19px}
    .solicitar-proposta {padding:22px calc(50% - 80px)}
}

@media screen and (max-width: 480px) {
    h2 {font-size:29px}
    .solicitar-proposta {padding:18px calc(50% - 80px)}
    #comoFunciona {margin-top:120px}
    #equipe {margin-top:40px}
    #deixe {margin-top:40px}
    #projetos {margin-top:40px}
    #perguntas {margin-top:40px}
    #proposta {padding:30px 0px; margin-top:40px}
    #topo img {max-width:150px}
    #topo .entrar {font-size:14px; padding:10px 30px}
    #deixe .box {width:calc(25% - 15px); margin-bottom:0px}
    #deixe .bloco {width:1000px}
    #deixe .scroll {width:100%; overflow:auto; padding-bottom:10px}
}