/*
     * Remove padrões da página
     */
* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    color: inherit;
    text-decoration: none;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

:before, :after {
    box-sizing: border-box;
}

input:focus {
    outline: none;
}

input[type=text],
input[type=password],
textarea {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
}

/*Auto clear*/
div:after,
header:after,
section:after,
article:after,
aside:after,
form:after,
menu:after,
nav:after,
ul:after,
ol:after,
li:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

::-moz-selection {
    background: #BBB;
    color: #222;
}

::selection {
    background: #BBB;
    color: #222;
}

html {
    height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

@media all and (min-width: 1000px) {
    header {
        width: 100%;
        position: relative;
        margin: 0 auto;
        float: left;
    }

    header .box {
        width: 100%;
        height: 110px;
        float: left;
        background-color: #002c6b;
    }

    header .box .top {
        width: 100%;
        max-width: 1120px;
        height: 80px;
        margin: 15px calc(50% - 560px);
        float: left;
        /*background-color: #2b5177;*/
    }

    header .box .top .top-mobile {
        float: left;
    }

    header .box .top .hide {
        display: none;
    }

    header .box .top .logo {
        background: url("../../img/site/logo.png") center / 100% no-repeat;
        width: 250px;
        height: 72px;
        float: left;
    }

    header .box .top .menu {
        width: 740px;
        float: right;
        margin-top: 23px;
    }

    header .box .top .menu > ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
    }

    header .box .top .menu > ul > li {
        font-size: 14px;
        color: #fff;
        height: 100%;
        padding: 9px 0;
        position: relative;
        text-align: center;
        font-family: 'Montserrat-Light';
    }

    header .box .top .menu > ul > li:hover {
        color: #5ca2f9;
    }

    header .box .top .menu > ul > li > .submenu {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        padding-top: 20px;
        text-align: left;
        display: none;
        z-index: 1000;
    }

    header .box .top .menu > ul > li:hover > .submenu {
        display: block;
    }

    header .box .top .menu > ul > li > .submenu > .setinha {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 7.5px 13.0px 7.5px;
        border-color: transparent transparent #5ca2f9 transparent;
        float: right;
        margin: 0 34px;
    }

    header .box .top .menu > ul > li > .submenu > ul {
        width: auto;
        float: right;
        background-color: #5ca2f9;
        padding: 10px 12px;
    }

    header .box .top .menu > ul > li > .submenu > ul > li {
        width: 100%;
        float: left;
        margin-bottom: 5px;
        color: #fff;
    }

    header .box .top .menu > ul > li .submenu > ul > li:hover {
        color: #254070;
    }

    header .box .top .menu > ul > a {
        border-radius: 20px;
    }

    header .box .top .menu > ul > a .cliente {
        font-size: 10px;
        color: #fff;
        background-color: #5ca2f9;
        border-radius: 20px;
        padding: 12px 16px;
    }

    header .box .top .menu > ul > a .cliente:hover {
        color: #5ca2f9;
        background-color: #fff;
    }

    header .box .top .menu > ul:after {
        content: none;
    }

    main {
        width: 100%;
        height: 100%;
        float: left;
        background-color: #f1f4f9;
    }

    footer {
        width: 100%;
        float: left;
    }

    footer .caixa-top {
        width: 100%;
        height: 100%;
        float: left;
        background-color: #021e4b;
    }

    footer .caixa-top .top {
        max-width: 1120px;
        width: 100%;
        height: 240px;
        float: left;
        margin: 0 calc(50% - 560px);
    }

    footer .caixa-top .top .box {
        width: 100%;
        height: 145px;
        float: left;
        margin-top: 52px;
    }

    footer .caixa-top .top .box .box1,
    footer .caixa-top .top .box .box2 {
        width: 232px;
        height: 100%;
        float: left;
    }

    footer .caixa-top .top .box .box1 {
        color: #fff;
        font-size: 14px;
        text-align: left;
        padding: 10px 40px 10px 0;
        border-right: #173464 solid 1px;
        line-height: 24px;
        letter-spacing: 1.7px;
    }

    footer .caixa-top .top .box .box2 ul {
        width: 100%;
        height: 100%;
        float: left;
        padding: 10px 0 10px 36px;
    }

    footer .caixa-top .top .box .box2 ul li {
        color: #fff;
        font-size: 14px;
        text-align: left;
        line-height: 24px;
        letter-spacing: 1.7px;
    }

    footer .caixa-top .top .box .box2 ul li:hover {
        color: #5ca2f9;
    }

    footer .caixa-top .top .box .box3 {
        width: 220px;
        height: 100%;
        float: left;
        background: url("../../img/site/logo-contabil-rodape.png") center no-repeat;
    }

    footer .caixa-top .top .box .box4 {
        width: 185px;
        height: 100%;
        float: left;
        margin-right: 76px;
        padding: 11px 0;
        line-height: 22px;
    }

    footer .caixa-top .top .box .box4 p span,
    footer .caixa-top .top .box .box5 p span {
        font-size: 10px;
        font-weight: bold;
        text-align: right;
        color: #5ca2f9;
        margin-bottom: 12px;
        width: 100%;
        float: left;
    }

    footer .caixa-top .top .box .box4 p,
    footer .caixa-top .top .box .box5 p {
        color: #fff;
        font-size: 14px;
        text-align: right;
        width: 100%;
        float: left;
    }

    footer .caixa-top .top .box .box5 {
        width: 175px;
        height: 100%;
        float: left;
        padding: 11px 0;
        line-height: 22px;
    }

    footer .caixa-baixo {
        width: 100%;
        height: 100%;
        float: left;
        background-color: #021a40;
    }

    footer .caixa-baixo .baixo {
        max-width: 1120px;
        width: 100%;
        height: 75px;
        float: left;
        margin: 0 calc(50% - 560px);
    }

    footer .caixa-baixo .baixo .copyright {
        width: 100%;
        float: left;
        text-align: center;
        font-size: 10px;
        color: #fff;
        margin-top: 32px;
        letter-spacing: 2.6px;
    }

    footer .caixa-baixo .baixo .copyright a:hover {
        color: #5ca2f9;
    }
}

@media all and (max-width: 999px) {
    header {
        width: 100%;
        position: relative;
        margin: 0 auto;
        float: left;
    }

    header .box {
        width: 100%;
        height: 90px;
        float: left;
        background-color: #002c6b;
    }

    header .box .top {
        width: 100%;
        /*max-width: 1120px;*/
        height: 80px;
        /*margin: 15px calc(50% - 560px);*/
        float: left;
        position: relative;
    }

    header .box .top .top-mobile {
        position: fixed;
        height: 90px;
        background-color: #002c6b;
        width: 100vw;
        z-index: 1000;
    }

    header .box .top .top-mobile a {
        float: left;
    }

    header .box .top .top-mobile .logo {
        background: url("../../img/site/logo.png") center / 100% no-repeat;
        width: 150px;
        height: 43px;
        float: left;
        margin: 22px 20px;
    }

    header .box .top .top-mobile .abrir-menu {
        position: absolute;
        top: 29px;
        right: 20px;
        width: 30px;
        height: 30px;
        /*z-index: 1000;*/
        background: url("../../img/site/down-arrow.png") center / 100% no-repeat;
        transition: 0.5s;
        cursor: pointer;
    }

    header .box .top .top-mobile .fechar-menu {
        position: absolute;
        top: 29px;
        right: 20px;
        width: 30px;
        height: 30px;
        transition: 0.5s;
        cursor: pointer;
    }

    header .box .top .menu {
        /*width: 740px;*/
        float: left;
        /*margin-top: 10px;*/
        /*display: none;*/
    }

    header .box .top .menu > ul {
        /*display: flex;*/
        /*justify-content: space-between;*/
        /*width: 100%;*/
        /*height: 100%;*/
        position: fixed;
        width: 100vw;
        top: -100vh;
        left: 0vw;
        height: calc(100vh - 90px);
        background: #002c6b;
        z-index: 999;
        overflow-y: auto;
        padding: 0 20px;
        text-transform: uppercase;
    }

    header .box .top .menu > ul > li {
        font-size: 14px;
        color: #fff;
        /*height: 100%;*/
        padding: 5px 0;
        position: relative;
        /*text-align: center;*/
        font-family: 'Montserrat-Light';
    }

    header .box .top .menu > ul > li:hover {
        /*color: #5ca2f9;*/
    }

    header .box .top .menu > ul > li > .submenu {
        /*position: absolute;*/
        /*top: 10px;*/
        /*left: 0;*/
        width: 100%;
        /*padding-top: 20px;*/
        text-align: left;
        display: none;
        /*z-index: 1000;*/
    }

    header .box .top .menu > ul > li:hover > .submenu {
        /*display: block;*/
    }

    /*header .box .top .menu > ul > li > .submenu > .setinha {*/
        /*width: 0;*/
        /*height: 0;*/
        /*border-style: solid;*/
        /*border-width: 0 7.5px 13.0px 7.5px;*/
        /*border-color: transparent transparent #5ca2f9 transparent;*/
        /*float: right;*/
        /*margin: 0 34px;*/
    /*}*/

    header .box .top .menu > ul > li > .submenu > ul {
        /*width: auto;*/
        float: left;
        /*background-color: #5ca2f9;*/
        padding: 10px 12px;
    }

    header .box .top .menu > ul > li > .submenu > ul > li {
        width: 100%;
        float: left;
        margin-bottom: 5px;
        color: #fff;
    }

    header .box .top .menu > ul > li .submenu > ul > li:hover {
        color: #5ca2f9;
    }

    /*header .box .top .menu > ul > a {*/
        /*border-radius: 20px;*/
    /*}*/

    header .box .top .menu > ul > a .cliente {
        font-size: 10px;
        color: #fff;
        background-color: #5ca2f9;
        border-radius: 20px;
        padding: 12px 16px;
        text-align: center;
        margin-top: 10px;
        width: 125px;
    }

    header .box .top .menu > ul > a .cliente:hover {
        color: #5ca2f9;
        background-color: #fff;
    }

    header .box .top .menu > ul:after {
        content: none;
    }

    main {
        width: 100%;
        height: 100%;
        float: left;
        background-color: #f1f4f9;
    }

    footer {
        width: 100%;
        float: left;
    }

    footer .caixa-top {
        width: 100%;
        height: 100%;
        float: left;
        background-color: #021e4b;
    }

    footer .caixa-top .top {
        /*max-width: 1120px;*/
        width: 100%;
        /*height: 240px;*/
        float: left;
        /*margin: 0 calc(50% - 560px);*/
    }

    footer .caixa-top .top .box {
        width: 100%;
        /*height: 145px;*/
        /*float: left;*/
        margin: 20px 0;
    }

    footer .caixa-top .top .box .box1,
    footer .caixa-top .top .box .box2 {
        width: 232px;
        height: 100%;
        /*float: left;*/
    }

    footer .caixa-top .top .box .box1,
    footer .caixa-top .top .box .box2 {
        color: #fff;
        font-size: 14px;
        text-align: left;
        padding: 10px 22px;
        /*border-right: #173464 solid 1px;*/
        line-height: 24px;
        letter-spacing: 1.7px;
        margin: 0 calc(50% - 116px);
    }

    footer .caixa-top .top .box .box2 {
        display: none;
    }
    
    footer .caixa-top .top .box .box2 ul {
        width: 100%;
        height: 100%;
        float: left;
        padding: 10px 0;
    }

    footer .caixa-top .top .box .box2 ul li {
        color: #fff;
        font-size: 14px;
        text-align: left;
        line-height: 24px;
        letter-spacing: 1.7px;
    }

    footer .caixa-top .top .box .box2 ul li:hover {
        color: #5ca2f9;
    }

    footer .caixa-top .top .box .box3 {
        width: 220px;
        height: 170px;
        /*float: left;*/
        background: url("../../img/site/logo-contabil-rodape.png") center no-repeat;
        margin: 0 auto;
        display: none;
    }

    footer .caixa-top .top .box .box4 {
        width: 185px;
        height: 100%;
        float: left;
        margin: 0 calc(50% - 92px);
        padding: 11px 0;
        line-height: 22px;
    }

    footer .caixa-top .top .box .box4 p span,
    footer .caixa-top .top .box .box5 p span {
        font-size: 10px;
        font-weight: bold;
        text-align: left;
        color: #5ca2f9;
        margin-bottom: 12px;
        width: 100%;
        float: left;
    }

    footer .caixa-top .top .box .box4 p,
    footer .caixa-top .top .box .box5 p {
        color: #fff;
        font-size: 14px;
        text-align: left;
        width: 100%;
        float: left;
    }

    footer .caixa-top .top .box .box5 {
        width: 175px;
        height: 100%;
        float: left;
        padding: 11px 0;
        line-height: 22px;
        margin: 0 calc(50% - 92px);
    }

    footer .caixa-baixo {
        width: 100%;
        height: 100%;
        float: left;
        background-color: #021a40;
    }

    footer .caixa-baixo .baixo {
        /*max-width: 1120px;*/
        width: 100%;
        /*height: 75px;*/
        /*float: left;*/
        /*margin: 0 calc(50% - 560px);*/
    }

    footer .caixa-baixo .baixo .copyright {
        /*width: 100%;*/
        /*float: left;*/
        text-align: center;
        font-size: 10px;
        color: #fff;
        margin: 20px;
        letter-spacing: 2.6px;
        line-height: 20px;
    }

    footer .caixa-baixo .baixo .copyright a:hover {
        color: #5ca2f9;
    }
}