﻿/*****geral ****/
* {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    color: #414141;
    font-family: Verdana;
    font-size: 16px;
}
/*****geral ****/


/*****logo ****/
.navbar-logo img {
    margin: 4px 2px;
    width: 60%;
    height: 40px;
}

@media only screen and (max-width:768px) {
    .navbar-logo img {
        width: 50%;
        height: 40px;
    }

    body {
        overflow-x: hidden;
    }
}
/*****logo ****/


/*****navbar ****/
.navbar-nav li:active, .navbar-nav li:hover {
    color: #fff;
    animation: animate1 .4s;
    animation-fill-mode: forwards;
}

@keyframes animate1 {
    from {
        border-radius: 0px;
    }

    to {
        border-radius: 2px;
    }
}
/*****navbar ****/


/*****login ****/
#login-ul {
    margin-right: 1px;
    min-width: 250px;
    padding: 12px 12px 0;
    background-color: rgb(255,255,255);
    border-radius: 5px;
}

    #login-ul .help {
        font-size: 12px
    }

    #login-ul .bottom {
        background-color: rgba(255,255,255,.8);
        border-top: 1px solid #ddd;
        clear: both;
        padding: 14px;
    }

    #login-ul .form-group {
        margin-bottom: 10px;
    }

.login-titulo {
    margin: 7px auto;
    font-weight: bold;
    color: #414141;
}

.login-div {
    margin: 7px auto;
    color: #616060;
}

.help {
    letter-spacing: 0.4px;
    font-family: monospace;
    margin: 15px auto;
}

#acessar {
    background: #275D8C;
    color: #fff;
}

#cadastrar {
    background: #419FD9;
}

#acessar, #cadastrar {
    border: none;
}

    #acessar:hover, #cadastrar:hover {
        filter: brightness(90%);
    }

@media only screen and (max-width:768px) {
    #login-ul {
        background-color: inherit;
        color: #414141;
    }

        #login-ul .bottom {
            background-color: inherit;
            border-top: 0 none;
        }
}

@media only screen and (max-width:768px) {
    #login-ul {
        padding: 10px 10px 0;
        margin-right: 6px;
        margin-left: 2px;
    }
}
 
    /*Deixa o dropdown aberto*/
    .dropdown >.dropdown-menu {  display: block;}

/*****login ****/




/*****slider****/
body ::-webkit-scrollbar {
    width: 0;
}

.item .slider1 {
    /*width: 100%;
        height: 480px;
        background: url('../images/publicidade_sox.png');
        background-color: #183152;
        background-attachment: fixed;
        background-position: center 27%;
        background-repeat: no-repeat;
        background-size: 70%;*/
    width: 100%;
    height: 480px;
    background: url('../images/contratoMedicoesPub.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(95%);
}

.item .slider2 {
    width: 100%;
    height: 480px;
    background: url('../images/planejamentoPub.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(95%);
}

.item .slider3 {
    width: 100%;
    height: 480px;
    background: url('../images/usuarisoPub.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(95%);
}

.left .carousel-control,
.right .carousel-control {
    font-size: 12px;
}

.carousel-caption h3 {
    padding: 10px 100px;
    font-weight: bold;
    font-size: 35px;
    /*opacity: 0.8;*/
}

/*.carousel-caption .h3-slider1 {
        margin-top: -350px;
        font-size: 23px;
    }*/
.carousel-caption .h3-slider1 {
    margin-top: -200px;
    font-size: 27px;
}

.carousel-caption p {
    padding: 5px 100px;
    font-size: 20px;
    color: #FFF;
}

@media only screen and (max-width:768px) {
    .carousel-caption h3 {
        padding: 2px 10px;
        font-size: 24px;
    }

    .carousel-caption p {
        padding: 4px 10px;
        font-size: 18px;
    }
}
/****slider****/




/****Modulos****/
.landing-page hr {
    border-top: 3px solid #183152;
    width: 5%;
    margin: 20px auto;
}

#landing-title {
    font-weight: bold;
    font-size: 30px;
    color: #183152;
}

#landing-sub {
    font-size: 24px;
    color: #A4A5A6;
}

section #modulos {
    min-height: 80vh;
    display: flex;
    align-items: center;
    font-family: Roboto;
}

.card-sox {
    margin: 20px auto;
    border-radius: 4px;
}

.card-header i {
    margin-left: 20px;
}

.card-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #40485a;
}

.card-body, h5 p {
    padding: 10px 10px;
}

.card-body, p {
    font-size: 15px;
    letter-spacing: normal;
    text-align: center;
    color: #6a707d;
}

    p.card-text {
        color: #414141;
        font-size: 12px;
    }
/*transicao/animacao*/
.card-sox {
    padding: 40px;
    transition: 400ms all;
    cursor: pointer;
}

    .card-sox .card-header {
        text-align: center;
    }

        .card-sox .card-header i {
            color: #183152;
            font-size: 80px;
            max-width: 100%;
            transition: 400ms all;
        }

    .card-sox:hover {
        background-color: #ffffff;
        box-shadow: 0px 30px 60px 0 rgba(64, 72, 90, 0.15);
        transform: translateY(-15px);
    }
/****Modulos****/


/****sobre****/
p.card-text-sobre {
    color: #414141;
    font-size: 14px;
    text-align: justify;
}
/****sobre****/



/****comoFunciona****/
.space {
    height: 50px;
}

section#comoFunciona {
    font-size: 25px;
}

    section#comoFunciona h6 {
        text-align: center;
        color: #616060;
        font-size: 25px;
    }

    section#comoFunciona p {
        color: #616060;
        font-size: 15px;
        text-align: justify;
    }

    section#comoFunciona h2 {
        font-size: 20px;
        font-weight: bold;
        color: #183152;
    }

    section#comoFunciona img {
        margin: auto 80px;
    }

.left {
    border-left: 2px solid #183152;
}

.right {
    border-right: 2px solid #183152;
}

.container-btn {
    margin-left: 30%;
}

#cadastrarEmpresa {
    margin: 50px 28%;
    opacity: 0.8;
    width: 60%;
}

#cadastrarEmpresa {
    opacity: 1;
}

@media only screen and (max-width:768px) {
    #cadastrarEmpresa {
        margin: 50px -13%;
        width: 80%;
    }

    section#comoFunciona p {
        padding: 1px 2px;
    }
}
/****comoFunciona****/



/****Depoimentos e usuarios****/

h1 {
    text-align: center;
    font-family: Verdana, sans-serif;
    color: #333;
    margin-top: 150px;
}

.accordion, .accordionDep {
    width: 100%;
    /*max-width: 1080px;*/
    height: 350px;
    overflow: hidden;
    margin: 50px auto;
    display: flex;
}

    .accordion ul, .accordionDep ul {
        width: 100%;
        display: table;
        table-layout: fixed;
        margin: 0;
        padding: 0;
    }

        .accordion ul li, .accordionDep ul li {
            display: table-cell;
            vertical-align: bottom;
            position: relative;
            width: 16.666%;
            height: 350px;
            background-repeat: no-repeat;
            background-position: center center;
            transition: all 500ms ease;
        }

            .accordion ul li div, .accordionDep ul li div {
                display: block;
                overflow: hidden;
                width: 100%;
            }

                .accordion ul li div a, .accordionDep ul li div a {
                    display: block;
                    height: 350px;
                    width: 100%;
                    position: relative;
                    z-index: 3;
                    vertical-align: bottom;
                    padding: 15px 20px;
                    box-sizing: border-box;
                    color: #fff;
                    text-decoration: none;
                    font-family: Open Sans, sans-serif;
                    transition: all 200ms ease;
                    text-decoration: none;
                    font-size: 10px;
                }

                    .accordion ul li div a *, .accordionDep ul li div a * {
                        opacity: 0;
                        margin: 0;
                        width: 100%;
                        text-overflow: ellipsis;
                        position: relative;
                        z-index: 5;
                        white-space: nowrap;
                        overflow: hidden;
                        -webkit-transform: translateX(-20px);
                        transform: translateX(-20px);
                        -webkit-transition: all 400ms ease;
                        transition: all 400ms ease;
                    }

                    .accordion ul li div a h2, .accordionDep ul li div a h2 {
                        margin: 0 auto;
                        font-family: Montserrat, sans-serif;
                        text-overflow: clip;
                        font-size: 13.2px;
                        text-transform: uppercase;
                        margin-bottom: 2px;
                        top: 140px;
                        padding: 3px 4px;
                        font-weight: bold;
                    }

                    .accordion ul li div a p, .accordionDep ul li div a p {
                        margin: 0 auto;
                        top: 160px;
                        font-size: 13.5px;
                        color: #fff;
                        text-align: center;
                        font-size: 12px;
                    }


            .accordion ul li:nth-child(1) {
                background-image: url(../images/clientes/fortes.png);
            }

            .accordion ul li:nth-child(2) {
                background-image: url(../images/clientes/santos-neves.png);
            }

            .accordion ul li:nth-child(3) {
                background-image: url(../images/clientes/ucl.png);
                background-size: 200px;
            }

            .accordion ul li:nth-child(4) {
                background-image: url(../images/clientes/veratto.png);
                background-size: 400px;
            }

            .accordion ul li:nth-child(5) {
                background-image: url(../images/clientes/viplan.png);
            }

            .accordion ul li:nth-child(6) {
                background-image: url(../images/clientes/vivace.png);
            }


            .accordionDep ul li:nth-child(1) {
                background-image: url(../images/depoimentos/gilsonVeras.jpg);
                background-size: 200px 200px;
            }

            .accordionDep ul li:nth-child(2) {
                background-image: url(../images/depoimentos/Romildo.gif);
                background-size: 200px 200px;
            }

            .accordionDep ul li:nth-child(3) {
                background-image: url(../images/depoimentos/cris.jpg);
                background-size: 200px 200px;
            }

            .accordionDep ul li:nth-child(4) {
                background-image: url(../images/depoimentos/Gilson_Fortes.jpg);
                background-size: 200px 200px;
            }

        .accordion ul:hover li, .accordionDep ul:hover li {
            width: 15%;
        }

            .accordion ul:hover li:hover, .accordionDep ul:hover li:hover {
                width: 60%;
            }

                .accordion ul:hover li:hover a, .accordionDep ul:hover li:hover a {
                    background: rgba(0, 0, 0, 0.4);
                }

                    .accordion ul:hover li:hover a *, .accordionDep ul:hover li:hover a * {
                        opacity: 1;
                        -webkit-transform: translateX(0);
                        transform: translateX(0);
                    }

                .accordionDep ul:hover li:hover h2 * {
                    padding: 3px 4px;
                }


@media screen and (max-width: 600px) {

    .accordion, .accordionDep {
        height: auto;
    }
}

.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
}

    .image_title p {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 20px;
        font-size: 16px;
    }


/****Depoimentos e usuarios****/














































































































































