@import url(public/css/normalize.css);

/*Reset list-auto*/

.list-auto,
.list-auto li {
    width: 100%;
    float: left;
    display: block;
    position: relative;
}

.list-auto,
.list-auto li {
    width: auto;
}

#page header input#controle-nav {
    visibility: hidden;
    position: absolute;
    left: -99999px;
    opacity: 0;
}


/*Responsive*/


@media screen and (min-width:319px) and (max-width:1022px) {
    /*---------Configurando a navegação NAV--- menu hamburguer*/
    input {
        display: none;
    }
    #pagina ul {
        padding: 15px 10px 0 0;
    }
    #pagina li {
        border-left: 1px solid #fff;
    }
    #pagina li:first-child {
        border: none;
    }
    #pagina li a {
        display: block;
        padding: 0 10px;
        color: #fff;
        font-size: 16px;
        line-height: 30px;
        text-align: none;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    #pagina li a:hover {
        color: #465260;
    }
    #pagina nav {
        width: 250px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        overflow: auto;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }
    #pagina .controle-nav {
        position: fixed;
        right: 20px;
        top: 58px;
        display: block;
        width: 30px;
        padding: 5px 0;
        border: 3px solid #465260;
        border-width: 3px 0;
        z-index: 200;
        cursor: pointer;
    }
    #pagina .controle-nav:before {
        content: "";
        display: block;
        height: 3px;
        background: #465260;
    }
    #pagina .controle-nav-fecha {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        z-index: 1;
        background: rgba(0, 0, 0, 0.4);
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }
    #pagina #controle-nav:checked~nav {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        color: #465260;
    }
    #pagina #controle-nav:checked~.controle-nav-fecha {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    #pagina nav li a {
        display: block;
        padding: 20px 10px;
    }
    /*--Ajuste do menu um elemento abaixo do outro--*/
    #pagina ul.list-auto {
        padding: 0;
    }
    #pagina ul.list-auto li {
        width: 100%;
        border: 1px solid #eee;
        border-width: 0 0 1px;
    }
    #pagina li a {
        text-decoration: none;
    }
    #pagina li a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.4)
    }
    /*FIM MENU BURGUER*/
    
    #pagina #banner-fale-conosco {
        background: #465260;
        height: 25px;
        color: #fff;
        font-family: "Kiona";
        font-size: 11px;
        padding: 0;
        margin-top: 0;
        margin-left: -5px;
        width: 101%;
    }
    #pagina #banner-fale-conosco .fale-conosco p {
        margin-left: 40%;
        margin-top: 0;
        padding: 6px;
        height: 5px;
        width: 120px;
    }
    #pagina #banner-fale-conosco .imagem-facebook {
        margin-top: -75px;
        padding: 52px;
        margin-left: 58%;
        width: 0px;
    }
    #pagina #banner-fale-conosco .imagem-instagram {
        margin-top: -119px;
        padding: 52px;
        margin-left: 64%;
        width: 0px;
    }    
    #pagina #banner-fale-conosco .imagem-whatsapp {
        margin-top: -119px;
        padding: 52px;
        margin-left: 72%;
        width: 0px;
    }    
    #pagina #logotipo {
        padding: 10px;
        margin-left: 60px;
        margin-top: 0;  
    }

/*INICIO BLOCO BANNER ORÇAMENTO*/

    #pagina .banner-orcamento {
        float: left;
        position: relative;        
        margin-left: -15px;
    }

    #pagina .descritivo-orcamento {
        color: #fff;
        font-family: "Kiona";
        font-size: 12px;
        float: left;
        margin-top: -120px;
        margin-left: 50px;
        position: relative;
        padding: 0;
    }
    #pagina button {
        background-color: #1f2429;
        border: none;
        color: white;
        padding: 10px 1px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 13px;
        font-family: "Kiona", "bold";
        margin-top: -70px;
        margin-left: 50px;
        position: relative;
        opacity: 5.0;
        padding: 8px;
        opacity: 100%;
    }    
}


@media screen and (min-width:1023px) and (max-width:1199px) {
   /* input {
        display: none;
    }
    */
}

@media screen and (min-width:1200px) {
    /*
    input {
        display: none;
    }
    */
    .centraliza {
        position: relative;
        float: left;
        left: 50%;
    }
    #pagina {
        width: 100%;
        margin-left: -683px;
    }

    #topo{
        z-index: 1;
        position: fixed;
        margin-left: 94%;
        margin-top: 38%;
    }

    #pagina #banner-fale-conosco {
        background: #465260;
        height: 30px;
        color: #fff;
        font-family: "Kiona";
        font-size: 15px;
        padding: 0;
        margin-top: 0;
        width: 1357px;
    }
    #pagina #banner-fale-conosco .fale-conosco p {
        margin-left: 65%;
        margin-top: 0;
        padding: 6px;
        height: 5px;
        width: 120px;
    }
    #pagina #banner-fale-conosco .imagem-facebook {
        margin-top: -78px;
        padding: 52px;
        margin-left: 1000px;
        width: 0px;
    }
    #pagina #banner-fale-conosco .imagem-instagram {
        margin-top: -118px;
        padding: 52px;
        margin-left: 1026px;
        width: 0px;
    }
    #pagina #banner-fale-conosco .imagem-whatsapp {
        margin-top: -118px;
        padding: 52px;
        margin-left: 1056px;
        width: 0px;
    }
    #pagina #logotipo {
        padding: 30px;
        margin-left: -360px;
    }
    #pagina #botoes {
        color: #465260;
        font-family: "Kiona";
        font-size: 15px;
        margin-left: -200px;
        margin-top: -10px;
    }
    #pagina #botoes a {
        text-decoration: none;
        color: #465260;
        font-family: "Kiona";
    }
    #pagina #botoes li {
        list-style: none;
        display: block;
        float: left;
        padding: 50px;
    }

    #pagina #botoes .sobre-nos-posicao{
        margin-left: 20px;
    }

    #pagina .descritivo-orcamento {
        color: #fff;
        font-family: "Kiona";
        font-size: 12px;
        float: left;
        margin-top: -220px;
        margin-left: 450px;
        position: relative;
        padding: 0;
    }
    #pagina button {
        background-color: #1f2429;
        border: none;
        color: white;
        padding: 10px 1px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 13px;
        font-family: "Kiona", "bold";
        margin-top: -180px;
        margin-left: 450px;
        position: relative;
        opacity: 5.0;
        padding: 8px;
        opacity: 100%;
        cursor: pointer;
    }
    #pagina #banner-sobre-nos .cabecalho {
        float: left;
        position: relative;
        font-family: "Verdana", "Regular";
        font-size: 11px;
        margin-left: 48%;
        margin-top: -208px;
        color: #fff;
        font-weight: bold;
    }
    #pagina #banner-sobre-nos .descritivo {
        float: left;
        position: relative;
        font-family: "Verdana", "Regular";
        font-size: 11px;
        margin-left: 48%;
        margin-top: -177px;
        color: #fff;
        width: 450px;
        height: 163px;
        text-align: justify;
        line-height: 1.2;
    }
    /*Parceiros*/
    #pagina #banner-parceiro .titulo-parceiro {
        color: #465260;
        float: left;
        position: relative;
        font-family: "Kiona", "Regular";
        font-size: 15px;
        margin-left: 30.2%;
        margin-top: -378px;
    }
    #pagina #banner-parceiro .descritivo-parceiro {
        width: 346px;
        height: 346px;
        margin-left: 30.2%;
        margin-top: -362px;
        float: left;
        position: relative;
        padding: 0;
    }
    #pagina #banner-parceiro .descritivo-parceiro p {
        color: #465260;
        font-family: "Verdana", "Regular";
        font-size: 9.22px;
        text-align: justify;
        line-height: 2.0;
    }
    /*WebSite*/
    #pagina #banner-website .titulo-website {
        color: #fff;
        float: left;
        position: relative;
        font-family: "Kiona", "Regular";
        font-size: 15px;
        margin-left: 30.2%;
        margin-top: -340px;
    }
    #pagina #banner-website .descritivo-website {
        width: 346px;
        height: 346px;
        margin-left: 30.2%;
        margin-top: -280px;
        float: left;
        position: relative;
        padding: 0;
    }
    #pagina #banner-website .descritivo-website p {
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9.22px;
        text-align: justify;
        line-height: 2.0;
    }

    /*Depoimentos Contabil*/
    #pagina #depoimentos .titulo-depoimento {
        color: #465260;
        font-family: "Kiona", "Regular";
        font-size: 16px;
        padding: 0;
        margin-left: -200px;
        float: left;
        position: relative;
    }
    #pagina #depoimentos .lista-depoimentos {
        list-style: none;
        display: block;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-contabil {
        float: left;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-contabil img {
        background: none;
        margin-left: 340px;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-contabil .titulo-cliente-contabil {
        float: left;
        position: absolute;
        color: #fff;
        font-family: "Kiona", "Regular";
        font-size: 14px;
        padding: 0;
        margin-left: 360px;
        margin-top: 95px;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-contabil p {
        float: left;
        position: absolute;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 360px;
        margin-top: -217px;
        text-align: justify;
        width: 156px;
        height: 185px;
        line-height: 1.3;
    }
    
    /*Depoimentos Restaurante*/
    #pagina #depoimentos .lista-depoimentos .depoimento-restaurante {
        float: left;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-restaurante img {
        background: none;
        margin-left: 20px;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-restaurante .titulo-cliente-restaurante {
        float: left;
        position: absolute;
        color: #fff;
        font-family: "Kiona", "Regular";
        font-size: 14px;
        padding: 0;
        margin-left: 40px;
        margin-top: 95px;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-restaurante p {
        float: left;
        position: absolute;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 41px;
        margin-top: -217px;
        text-align: justify;
        width: 156px;
        height: 185px;
        line-height: 1.3;
    }    
    
    /*Depoimentos Construtora*/
    #pagina #depoimentos .lista-depoimentos .depoimento-construtora {
        float: left;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-construtora img {
        background: none;
        margin-left: 20px;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-construtora .titulo-cliente-construtora {
        float: left;
        position: absolute;
        color: #fff;
        font-family: "Kiona", "Regular";
        font-size: 14px;
        padding: 0;
        margin-left: 42px;
        margin-top: 95px;
    }
    #pagina #depoimentos .lista-depoimentos .depoimento-construtora p {
        float: left;
        position: absolute;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 41px;
        margin-top: -217px;
        text-align: justify;
        width: 156px;
        height: 185px;
        line-height: 1.3;
    }

    /*Orçamento*/
    #pagina #orcamento{
        background: #465260;
        float: left;
        position: relative;        
        width: 1357px;
        height: 500px;
        margin-left: 0px;
        margin-top: 20px;
    }
    #pagina #orcamento .titulo-orcamento{
        float: left;
        position: relative;
        color: #fff;
        font-family: "Kiona", "Regular";
        font-size: 15px;
        padding: 0;
        margin-left: 42%;
        margin-top: 40px;
    }

    /*#pagina #orcamento .dados-cadastrais{
        width: 1102px;
        height: 100px;  
        padding: 50px;
        border: 1px solid #fff;
        margin-left: 80px;
        margin-top: 100px;        
    }

    #pagina #orcamento .dados-cadastrais p{
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 15px;
        margin-left: 42%;
        margin-top: -15px;
        padding: 0;
    }*/
    #pagina #orcamento .dados-cadastrais {
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 12px;
        float: left;
        position: relative;
        margin-left: -600px;
        margin-top: 120px;
    }
    #pagina #orcamento .dados-cadastrais  .f_lbl_nomecompleto{
        float: left;
        position: relative;   
    }
    #pagina #orcamento .dados-cadastrais  .f_text_nomecompleto{
        float: left;
        position: relative;   
        margin: 6px 0;     
        box-sizing: border-box;
        margin-top: -10px;
        margin-left: 20px;
        height: 30px;
        width: 310px;
    }
    #pagina #orcamento .dados-cadastrais  .f_lbl_email{
        float: left;
        position: relative;
        margin-top: 60px;
        margin-left: -432px;
    }
    #pagina #orcamento .dados-cadastrais  .f_text_email{
        float: left;
        position: relative;
        margin: 8px 0;
        box-sizing: border-box;
        margin-top: 50px;
        height: 30px;
        width: 310px;        
        margin-left: -310px;
    }
    #pagina #orcamento .dados-cadastrais  .f_lbl_razaosocial{
        float: left;
        position: relative;
        margin-left: 100px;        
    }
    #pagina #orcamento .dados-cadastrais  .f_text_razaosocial{
        float: left;
        position: relative;
        margin: 8px 0;
        box-sizing: border-box;
        margin-top: -10px;
        margin-left: 28px;
        height: 30px;
        width: 310px; 
    }
    #pagina #orcamento .dados-cadastrais .f_lbl_celular{
        float: left;
        position: relative;
        margin-top: 60px;
        margin-left: -470px;
    }
    #pagina #orcamento .dados-cadastrais .f_text_celular{
        float: left;
        position: relative;
        margin: 8px 0;
        box-sizing: border-box;
        margin-top: 50px;
        margin-left: -310px;
        height: 30px;      
        width: 310px; 
    }

    #pagina #orcamento .servicos-prestados .form-servicos{
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 12px;
        float: left;
        position: relative;
        margin-left: 195px;
        margin-top: 40px;
    } 

    /* The container */
    #pagina #orcamento .servicos-prestados .form-servicos .chc-servicos {
        display: inline;
        position: relative;
        padding-left: 25px;
        /*margin-bottom: 8px;*/
        margin-inline: 30px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default checkbox */
    #pagina #orcamento .servicos-prestados .form-servicos .chc-servicos input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    #pagina #orcamento .servicos-prestados .form-servicos .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 19px;
        width: 19px;
        background-color: #eee;
        padding: 0;
    }
    
    /* On mouse-over, add a grey background color */
    #pagina #orcamento .servicos-prestados .form-servicos .chc-servicos:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    #pagina #orcamento .servicos-prestados .form-servicos .chc-servicos input:checked ~ .checkmark {
        background-color: #465260;
        height: 14px;
        width: 14px;
        border: solid white;
    }
    
    /* Create the checkmark/indicator (hidden when not checked) */
    #pagina #orcamento .servicos-prestados .form-servicos .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    /* Show the checkmark when checked */
    #pagina #orcamento .servicos-prestados .form-servicos .chc-servicos input:checked ~ .checkmark:after {
        display: block;
    }
    
    /* Style the checkmark/indicator */
    #pagina #orcamento .servicos-prestados .form-servicos .chc-servicos .checkmark:after {
        left: 3px;
        top: -1.0px;
        width: 6px;
        height: 8px;
        border: solid 1px white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #pagina #orcamento .observacoes input[type=text] {
        width: 1012px;
        height: 90px;  
        padding: 12px 20px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        background-color: #918f8f;
        font-size: 12px;
        resize: none;
        margin-top: 70px;
        margin-left: 165px;
        float: left;
        position: relative;
        color: #fff;
    }

    #pagina #orcamento .enviar-form{
        float: left;
        position: relative;
        color: #fff;
        cursor: pointer;
        background: #465260;
        display: block;
        margin-top: 180px;
        margin-left: -520px;
        font-family: "Verdana", "Regular";
        font-size: 12px;
    }

    #pagina #orcamento #confirmacao-email{
        width: 300px;
        height: 150px;
        float: left;
        position: relative;
        z-index: 2;
        border: 1px solid #fff;
        border-radius: 4px;
        margin-left: 600px;
    }

    /*Rodapé*/
    #pagina #rodape .linha-rodape {
        float: left;
        width: 1358px;
        height: 18px;
        background: #DEDEDE;
        margin-top: 10px;
    }
    #pagina #rodape .rodape-conteudo {
        float: left;
        width: 1358px;
        height: 166px;
        background: #465260;
    }
    #pagina #rodape .rodape-conteudo .rodape-contato strong {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Kiona", "Regular";
        font-size: 15px;
        padding: 0;
        margin-left: 380px;
        margin-top: 30px;
    }
    #pagina #rodape .rodape-conteudo .rodape-contato .rodape-contato-email {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: -68px;
        margin-top: 60px;
    }
    #pagina #rodape .rodape-conteudo .rodape-contato .rodape-contato-celular {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: -151px;
        margin-top: 80px;
    }
    #pagina #rodape .rodape-conteudo .rodape-contato .rodape-contato-instagram {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: -151px;
        margin-top: 100px;
    }
    #pagina #rodape .rodape-conteudo .rodape-contato .rodape-contato-bairro {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: -151px;
        margin-top: 120px;
    }
    #pagina #rodape .rodape-institucional .rodape-institucional-conteudo strong {
        float: left;
        position: relative;
        font-family: "Kiona", "Regular";
        font-size: 15px;
        color: #fff;
        padding: 0;
        margin-left: 606px;
        margin-top: -140px;
    }
    #pagina #rodape .rodape-institucional .rodape-institucional-conteudo .rodape-institucional-sobre-nos {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 606px;
        margin-top: -106px;
    }
    #pagina #rodape .rodape-institucional .rodape-institucional-conteudo .rodape-institucional-contato {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 606px;
        margin-top: -85px;
    }
    #pagina #rodape .rodape-institucional .rodape-institucional-conteudo .rodape-institucional-trabalhe-conosco {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 606px;
        margin-top: -65px;
    }
    #pagina #rodape .rodape-servicos .rodape-servicos-conteudo strong {
        float: left;
        position: relative;
        font-family: "Kiona", "Regular";
        font-size: 15px;
        color: #fff;
        padding: 0;
        margin-left: 825px;
        margin-top: -140px;
    }
    #pagina #rodape .rodape-servicos .rodape-servicos-conteudo .rodape-servicos-erp {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 825px;
        margin-top: -106px;
    }
    #pagina #rodape .rodape-servicos .rodape-servicos-conteudo .rodape-servicos-suporte {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 825px;
        margin-top: -85px;
    }
 
    #pagina #rodape .rodape-servicos .rodape-servicos-conteudo .rodape-servicos-sites {
        float: left;
        position: relative;
        color: #fff;
        font-family: "Verdana", "Regular";
        font-size: 9px;
        padding: 0;
        margin-left: 825px;
        margin-top: -65px;
    }
}