/* 
----------------------------------------------------------------------------------------

* FONTS
*
*   - Fonte para títulos, navbar do menu e botões
      Montserrat
      font-family: 'Montserrat', sans-serif;
*
*   - Fonte padrão de textos
      Roboto
      font-family: 'Roboto', sans-serif;

----------------------------------------------------------------------------------------

* CSS TABLE OF CONTENTS
*
*   1.0 - customização base
*   2.0 - reset
*   3.0 - header
*   4.0 - conteúdo das páginas
*       4.1 - home
*       4.2 - notícias
*       4.3 - o sistema
*       4.4 - planos
*       4.5 - contato
*   5.0 - footer
*   6.0 - media query

----------------------------------------------------------------------------------------
*/

/*  -------------------------------------------------------------------------------------
    1.0 - CUSTOMIZAÇÃO BASE
-------------------------------------------------------------------------------------   */

html, body {
    overflow-x: hidden;
    font-size: 16px;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #F4F4F4;
}

p {
    color: #707070;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    margin-top: 15px;
    text-indent: 25px;
}

h1 {
    color: #006266;
    font-size: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    margin-bottom: 0;
}

    h1 small {
        font-size: 1.5rem;
        font-weight: 400;
    }


h2 {
    color: #005C61;
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    margin-bottom: 0;
}

    h2 small {
        font-size: 1.2rem;
        font-weight: 400;
    }

h3 {
    color: #006266;
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    margin-top: 35px;
    margin-bottom: 0;
}

span {
    font-weight: 700;
}

a {
    color: white;
}

    a:hover {
        color: white;
    }

.noticia-card h5 {
    color: #707070 !important;
    float: right !important;
}

.primary-button {
    display: inline-block;
    padding: 10px 40px;
    background: #006166;
    color: white;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
    border: 0px;
}

    .primary-button:hover {
        color: white;
        text-decoration: none;
        background-color: #1ABCC1;
        box-shadow: -15px 15px 30px rgba(207, 207, 207, 0.2), 15px -15px 30px rgba(207, 207, 207, 0.2), -15px -15px 30px rgba(255, 255, 255, 0.9), 15px 15px 38px rgba(207, 207, 207, 0.9), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(207, 207, 207, 0.5);
    }

.secondary-button {
    display: inline-block;
    padding: 10px 40px;
    color: #00585C;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    border: 2px solid #00585C;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

    .secondary-button:hover {
        color: #00A0A5;
        text-decoration: none;
        box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3), -1px -1px 2px rgba(204, 204, 204, 0.5), inset -5px 5px 10px rgba(204, 204, 204, 0.2), inset 5px -5px 10px rgba(204, 204, 204, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.9), inset 5px 5px 13px rgba(204, 204, 204, 0.9);
    }

.hero-button {
    display: inline-block;
    padding: 10px 40px;
    color: white;
    font-size: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    background: #2C6062;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

    .hero-button:hover {
        color: white;
        text-decoration: none;
        background-color: #00A0A5;
    }

.box-imagem::before {
    z-index: -1;
    content: "";
    border: 2px solid #00A0A5;
    border-radius: 10px;
    position: absolute;
    margin-left: -25px;
    margin-top: 25px;
    max-width: 400px;
    width: 80%;
    max-height: 275px;
    height: 100%;
    box-shadow: -5px 5px 10px rgba(212, 212, 212, 0.2), 5px -5px 10px rgba(212, 212, 212, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(212, 212, 212, 0.9), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(212, 212, 212, 0.5);
}

/*  -------------------------------------------------------------------------------------
    2.0 - RESET
-------------------------------------------------------------------------------------   */
/* extra container sizes */
@media (min-width: 1450px) {
    .container {
        max-width: 1250px;
    }
}

@media (min-width: 1700px) {
    .container {
        max-width: 1400px;
    }

    .container_contato {
        min-height: 527px;
    }

        .container_contato .titulo::before {
            content: url(../../img/Site/icon_CG.svg);
            margin-right: 15px;
        }
}

@media (max-width: 500px) {
    html, body {
        font-size: 14px;
    }
}

/*  -------------------------------------------------------------------------------------
    3.0 - HEADER
-------------------------------------------------------------------------------------   */
header {
    background-image: url('../../img/Site/header_hero_background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.header-background {
    padding-top: 25px;
    background: rgba(244, 244, 244, 0.85);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

/* navbar */
.navbar-collapsed-bg {
    background-color: #134651;
}

.navbar-light .navbar-toggler-icon {
    background-image: url('../../img/Site/icon_menu.svg');
    background-size: 25px;
    background-repeat: no-repeat;
    outline: none;
    border: none;
}

    .navbar-light .navbar-toggler-icon:focus {
        outline: none;
        border: none;
    }

.navbar-brand img {
    max-height: 60px;
}

.login-button {
    display: inline-block;
    background-color: #00686B;
    border: 1px solid #00686B;
    border-radius: 0px 5px 5px 0px;
    padding: 7px 30px;
    min-width: 165px;
    text-align: center;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-left: 0;
    transition: all 0.5s ease-in-out;
    box-shadow: initial;
}

    .login-button:hover {
        color: white;
        text-decoration: none;
        box-shadow: 1px 1px 2px rgba(45, 98, 113, 0.3), -1px -1px 2px rgba(33, 72, 83, 0.5), inset -10px 10px 20px rgba(33, 72, 83, 0.2), inset 10px -10px 20px rgba(33, 72, 83, 0.2), inset -10px -10px 20px rgba(45, 98, 113, 0.9), inset 10px 10px 25px rgba(33, 72, 83, 0.9);
    }

.cadastro-button {
    display: inline-block;
    border: 1px solid #00686B;
    border-radius: 5px 0px 0px 5px;
    padding: 7px 30px;
    min-width: 165px;
    text-align: center;
    color: #00686B;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-right: -5px;
    transition: all 0.5s ease-in-out;
    box-shadow: initial;
}

    .cadastro-button:hover {
        color: #2C6062;
        text-decoration: none;
        box-shadow: inset -10px 10px 20px rgba(186, 186, 186, 0.2), inset 10px -10px 20px rgba(186, 186, 186, 0.2), inset -10px -10px 20px rgba(255, 255, 255, 0.9), inset 10px 10px 25px rgba(186, 186, 186, 0.9);
    }

@media (max-width: 371px) {
    .cadastro-button {
        border-radius: 5px;
        margin: 0;
    }

    .login-button {
        border-radius: 5px;
        margin-top: 8px;
    }
}

/* barra inferior de navegação em desktop */
.inf-navbar {
    padding: 25px;
    text-align: center;
}

    .inf-navbar .col {
        margin: 0;
        padding: 0;
    }

    .inf-navbar a {
        display: block;
        width: 100%;
        border-left: 0.5px solid #00686B;
        border-right: 0.5px solid #00686B;
        color: #00686B;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
    }

/* hero */

.hero {
    display: inline-block;
    background: rgba(244, 244, 244, 0.9);
    border-radius: 10px;
    margin-top: 90px;
    margin-bottom: 150px;
    color: white;
    padding: 25px 50px;
}

    .hero h1 {
        color: #2C6062;
        font-family: 'Montserrat', sans-serif;
        font-size: 2rem;
        font-weight: 500;
    }

    .hero h2 {
        color: #2C6062;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.3rem;
        font-weight: 400;
    }

.hero-wave {
    width: 100%;
    height: 194px;
}

/* box content -------------------------------------------------------------------------- */
.box-content {
    margin-top: -235px;
}

    .box-content .box-card-height {
        min-height: 100%;
        height: 100%;
    }

    .box-content .box-card {
        min-height: 100%;
        height: 100%;
        width: 100%;
        padding: 20px 10px;
        border-radius: 10px;
        box-shadow: inset -3px 3px 6px rgba(220, 220, 220, 0.2), inset 3px -3px 6px rgba(220, 220, 220, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 8px rgba(220, 220, 220, 0.9);
        background-color: white;
        text-align: center;
    }

        .box-content .box-card img {
            max-height: 35px;
        }

        .box-content .box-card ._h3 {
            margin-top: 10px;
            margin-bottom: 5px;
            color: #00a0a5;
            font-size: 1.2rem;
            font-weight: 700;
            display: block;
        }

        .box-content .box-card p {
            margin: 0;
            text-indent: 0;
        }

/*  -------------------------------------------------------------------------------------
    4.0 - conteúdo das páginas
        4.1 - HOME
-------------------------------------------------------------------------------------   */
/* CONTEÚDO HOME: entenda mais sobre o ContratosGOV */
.entendacg {
    margin-top: 75px;
}

    .entendacg img {
        max-height: 250px;
        max-width: 100%;
        border: 5px white solid;
        border-radius: 5px;
        box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
    }

    .entendacg video {
        max-height: 250px;
        max-width: 100%;
        border: 5px white solid;
        border-radius: 5px;
        box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
    }



/* CONTEÚDO HOME: barra de estatísticas de usuários do ContratosGOV */
.estatisticascg {
    margin-top: 100px;
    padding: 25px 0 15px 0;
    background-image: url('../../img/Site/backgound_blocks.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 50px 0 50px 0;
}

    .estatisticascg .numero-estatistica {
        padding: 25px 0;
        text-align: center;
        align-content: center;
        align-items: center;
    }

        .estatisticascg .numero-estatistica h3 {
            margin-bottom: 0;
            color: white;
            font-size: 1.7rem;
            font-weight: 700;
            text-align: center;
        }

        .estatisticascg .numero-estatistica p {
            color: white;
            font-size: 1.2rem;
            text-align: center;
            margin: 0;
        }

/* CONTEÚDO HOME: comentários de usuários do nosso sistema */
.comentarios {
    margin-top: 100px;
}

    .comentarios .comment {
        margin-top: 15px;
    }

        .comentarios .comment .comment-card-height {
            min-height: 100%;
            height: 100%;
        }

            .comentarios .comment .comment-card-height .comment-card {
                min-height: 100%;
                height: 100%;
                padding: 25px;
                background: linear-gradient(135deg, #E8E8E8 0%, #FFFFFF 100%);
                box-shadow: -5px 5px 10px rgba(195, 195, 195, 0.2), 5px -5px 10px rgba(195, 195, 195, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(195, 195, 195, 0.9);
                background-image: url('../../img/Site/icon_quote.svg');
                background-repeat: no-repeat;
                border-radius: 25px;
            }

                .comentarios .comment .comment-card-height .comment-card p {
                    line-height: 17px;
                }

/* CONTEÚDO HOME: se interessou e deseja fazer parte? */
.fazerparte {
    margin-top: 100px;
}

    .fazerparte img {
        margin-top: 15px;
        max-height: 250px;
        max-width: 100%;
        border: 5px white solid;
        border-radius: 5px;
        box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
    }

/* CONTEÚDO HOME: notícias */
.noticias {
    margin-top: 100px;
    margin-bottom: 100px;
}

    .noticias .noticia-card-height {
        height: 100%;
        min-height: 100%;
    }

        .noticias .noticia-card-height:hover {
            text-decoration: none;
            cursor: pointer;
        }

        .noticias .noticia-card-height .noticia-card {
            padding: 20px;
            height: 100%;
            min-height: 100%;
            background: linear-gradient(135deg, #E8E8E8 0%, #FFFFFF 100%);
            box-shadow: -5px 5px 10px rgba(220, 220, 220, 0.2), 5px -5px 10px rgba(220, 220, 220, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(220, 220, 220, 0.9);
            border-radius: 25px;
            transition: 0.3s all ease-in-out;
        }

            .noticias .noticia-card-height .noticia-card:hover {
                box-shadow: -20px 20px 40px rgba(195, 195, 195, 0.2), 20px -20px 40px rgba(195, 195, 195, 0.2), -20px -20px 40px rgba(255, 255, 255, 0.9), 20px 20px 50px rgba(195, 195, 195, 0.9);
                transition: 0.3s all ease-in-out;
            }

            .noticias .noticia-card-height .noticia-card img {
                object-fit: cover;
                width: 100%;
                min-width: 100%;
                height: auto;
                max-height: 150px;
            }

            .noticias .noticia-card-height .noticia-card ._h4 {
                margin-top: 5px;
                text-align: right;
                color: #707070;
                font-size: 0.8rem;
                font-weight: 700;
            }

            .noticias .noticia-card-height .noticia-card ._h3 {
                color: #707070;
                font-size: 1.2rem;
                font-weight: 700;
            }

            .noticias .noticia-card-height .noticia-card p {
                text-indent: 0;
            }

/*  -------------------------------------------------------------------------------------
    4.0 - conteúdo das páginas
        4.2 - NOTÍCIAS
-------------------------------------------------------------------------------------   */
/* CONTEÚDO NOTICIAS: notícias */
.pagina-noticias {
    margin-top: 75px;
}

    .pagina-noticias .titulo::before {
        content: url(../../img/Site/icon_CG.svg);
        margin-right: 15px;
    }

    .pagina-noticias a {
        color: #707070;
        text-decoration: underline;
        font-weight: 700;
    }

    .pagina-noticias input {
        width: 100%;
        margin-top: 25px;
        padding: 15px 25px;
        border: none;
        outline: none;
        font-size: 1rem;
        background: #FEFEFE;
        box-shadow: -5px 5px 10px rgba(220, 220, 220, 0.2), 5px -5px 10px rgba(220, 220, 220, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(220, 220, 220, 0.9);
        border-radius: 25px;
    }

        .pagina-noticias input::placeholder {
            color: #979797;
            font-weight: 700;
        }

    .pagina-noticias .noticias {
        margin-top: 10px;
    }

/*  -------------------------------------------------------------------------------------
    4.0 - conteúdo das páginas
        4.2 - NOTÍCIAS
                4.2 - NOTÍCIA INTERNA
-------------------------------------------------------------------------------------   */
/* CONTEÚDO NOTICIA INTERNA: página interna da notícia */
.noticia-interna h3 {
    color: #707070;
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 10px;
}

.noticia-interna h4 {
    color: #7C7C7C;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin-bottom: 0;
}

.noticia-interna img {
    width: 100%;
    border-radius: 5px;
}

/*  -------------------------------------------------------------------------------------
    4.0 - conteúdo das páginas
        4.3 - O SISTEMA
-------------------------------------------------------------------------------------   */
/* CONTEÚDO O SISTEMA: sobre o sistema */
.sobre {
    margin-top: 75px;
}

    .sobre .titulo::before {
        content: url(../../img/Site/icon_CG.svg);
        margin-right: 15px;
    }

/* CONTEÚDO O SISTEMA: porque o ContratosGOV? */
.sobre {
    background-image: url('../../img/Site/background_white_blocks.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

    .sobre img {
        min-width: 125%;
        margin-left: -50px;
        margin-top: -75px;
    }

.porquecg {
    margin-top: 25px;
    padding: 50px 0px;
    background-image: url('../../img/Site/backgound_blocks.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    .porquecg img {
        margin-top: 25px;
        border-radius: 10px;
    }

    .porquecg video {
        margin-top: 25px;
        border-radius: 10px;
        max-width: 100%;
        height: auto;
    }


    .porquecg h2 {
        color: white;
        font-weight: 700;
    }

    .porquecg p {
        color: white;
    }

/* CONTEÚDO O SISTEMA: 01 funcionalidades */
.sistema-funcionalidades {
    margin-top: 100px;
}

    .sistema-funcionalidades h3 {
        color: #107C81;
        font-size: 1.4rem;
        font-weight: 700;
    }

        .sistema-funcionalidades h3 span {
            color: #B1C2C2;
        }

    .sistema-funcionalidades h4 {
        margin-top: 8px;
        color: #707070;
        font-size: 1rem;
        font-weight: 700;
        text-indent: 15px;
    }

    .sistema-funcionalidades p {
        color: #707070;
        font-size: 0.95rem;
        text-indent: 0;
        text-align: left;
        padding: 0 8px 0 8px;
        margin-bottom: 8px;
    }

    .sistema-funcionalidades .sistema-card-height {
        height: 100%;
        min-height: 100%;
    }

    .sistema-funcionalidades .sistema-card {
        padding: 10px;
        height: 100%;
        min-height: 100%;
        background: #F9F9F9;
        box-shadow: -5px 5px 10px rgba(195, 195, 195, 0.2), 5px -5px 10px rgba(195, 195, 195, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(195, 195, 195, 0.9);
        border-radius: 10px;
        transition: 0.3s all ease-in-out;
    }

        .sistema-funcionalidades .sistema-card img {
            width: auto;
            height: 100%;
            max-height: 40px;
        }

/* CONTEÚDO O SISTEMA: 02 serviços */
.sistema-sevicos {
    margin-top: 100px;
}

    .sistema-sevicos h3 {
        color: #107C81;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .sistema-sevicos .sistema-card-height {
        height: 100%;
        min-height: 100%;
    }

    .sistema-sevicos .sistema-card {
        padding: 4px 10px 0px 10px;
        height: 100%;
        min-height: 100%;
        background: #F9F9F9;
        box-shadow: -5px 5px 10px rgba(195, 195, 195, 0.2), 5px -5px 10px rgba(195, 195, 195, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(195, 195, 195, 0.9);
        border-radius: 10px;
        border-radius: 10px;
        transition: 0.3s all ease-in-out;
    }

    .sistema-sevicos h3 span {
        color: #B1C2C2;
    }

    .sistema-sevicos .topico::before {
        content: url(../../img/Site/icon_correct.svg);
        margin-right: 15px;
        margin-bottom: 0;
    }

/* CONTEÚDO O SISTEMA: 03 acessibilidade */
.sistema-acessibilidade {
    margin-top: 100px;
}

    .sistema-acessibilidade h3 {
        color: #107C81;
        font-size: 1.4rem;
        font-weight: 700;
    }

        .sistema-acessibilidade h3 span {
            color: #B1C2C2;
        }

/* CONTEÚDO O SISTEMA: SOLICITE DEMONSTRAÇÃO no fim da página */
.experimentegratis {
    margin-top: 100px;
    margin-bottom: -50px;
    padding: 80px;
    background-image: url('../../img/Site/sistema-experimente2.jpg');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

    .experimentegratis h3 {
        color: #254F51;
        font-size: 1.4rem;
        font-weight: 700;
    }

/*  -------------------------------------------------------------------------------------
    4.0 - conteúdo das páginas
        4.4 - PLANOS
-------------------------------------------------------------------------------------   */
/* CONTEÚDO PLANOS: tabela com os planos */
.planos {
    margin-top: 75px;
}

    .planos .titulo::before {
        content: url(../../img/Site/icon_CG.svg);
        margin-right: 15px;
    }

    .planos .tabela-planos {
        padding: 20px;
        background: linear-gradient(135.32deg, #F2F2F2 0%, #FFFFFF 99.44%);
        box-shadow: -5px 5px 10px rgba(212, 212, 212, 0.2), 5px -5px 10px rgba(212, 212, 212, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(212, 212, 212, 0.9), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(212, 212, 212, 0.5);
        border-radius: 10px;
        margin-bottom: 100px;
    }

        .planos .tabela-planos::before {
            z-index: -1;
            content: "";
            border: 2px solid #00A0A5;
            border-radius: 10px;
            position: absolute;
            margin-left: -50px;
            max-width: 1350px;
            width: 75%;
            height: 400px;
            box-shadow: -5px 5px 10px rgba(212, 212, 212, 0.2), 5px -5px 10px rgba(212, 212, 212, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(212, 212, 212, 0.9), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(212, 212, 212, 0.5);
        }

        .planos .tabela-planos .tabela-header {
            border-bottom: 1px solid #CFCFCF;
            height: 55px;
        }

            .planos .tabela-planos .tabela-header h1 {
                opacity: 0.5;
                font-size: 1rem;
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
                margin-bottom: 0;
            }

            .planos .tabela-planos .tabela-header h2 {
                font-size: 1.5rem;
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
                margin-bottom: 0;
            }

            .planos .tabela-planos .tabela-header h3 {
                font-size: 1rem;
                font-family: 'Montserrat', sans-serif;
                font-weight: 400;
                margin-top: 0;
            }

        .planos .tabela-planos .tabela-body p {
            border-bottom: 1px solid #CFCFCF;
            padding-bottom: 10px;
            text-indent: 0;
        }

        .planos .tabela-planos .tabela-button {
            display: inline-block;
            border-radius: 5px;
            padding: 7px 30px;
            min-width: 165px;
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            transition: all 0.3s ease-in-out;
            box-shadow: initial;
        }

/* altera a cor de cada plano */
/* plano light */
.plano-light {
    border-right: 1px solid #CFCFCF;
}

    .plano-light h1, .plano-light h2, .plano-light h3 {
        color: #00A0A5;
    }

    .plano-light .tabela-button {
        border: 3px solid #00A0A5;
        color: #00A0A5;
    }

        .plano-light .tabela-button:hover {
            text-decoration: none;
            box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
        }

/* plano standard */
.plano-standard {
    border-right: 1px solid #CFCFCF;
}

    .plano-standard h1, .plano-standard h2, .plano-standard h3 {
        color: #0E7D83;
    }

    .plano-standard .tabela-button {
        border: 3px solid #0E7D83;
        color: #0E7D83;
    }

        .plano-standard .tabela-button:hover {
            text-decoration: none;
            box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
        }

/* plano pro */
.plano-pro {
    border-right: 1px solid #CFCFCF;
}

    .plano-pro h1, .plano-pro h2, .plano-pro h3 {
        color: #086B71;
    }

    .plano-pro .tabela-button {
        border: 3px solid #086B71;
        color: #086B71;
    }

        .plano-pro .tabela-button:hover {
            text-decoration: none;
            box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
        }

/* plano interprise */
.plano-interprise h1, .plano-interprise h2, .plano-interprise h3 {
    color: #075054;
}

.plano-interprise .tabela-button {
    border: 3px solid #075054;
    background: #075054;
    box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
    border-radius: 5px;
}

    .plano-interprise .tabela-button:hover {
        border: 3px solid #13676B;
        background: #13676B;
        color: white;
        text-decoration: none;
    }

/* ajustar a tabela para o responsivo */
@media (max-width: 768px) {
    .planos .tabela-planos::before {
        border: none;
        box-shadow: none;
    }

    .plano-light, .plano-standard, .plano-pro {
        border-right: none;
        border-bottom: 3px solid #CFCFCF;
    }

    .planos .tabela-planos .tabela-button {
        margin-bottom: 40px;
    }
}

/* CONTEÚDO PLANOS: plano personalizado */
.plano-personalizado {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('../../img/Site/background_white_blocks2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

    .plano-personalizado img {
        max-width: 150%;
        margin-top: 25px;
        margin-left: -100px;
    }

    .plano-personalizado .plano-personalizado-box {
        padding: 30px;
        background: linear-gradient(135.32deg, #F2F2F2 0%, #FFFFFF 99.44%);
        box-shadow: -5px 5px 10px rgba(212, 212, 212, 0.2), 5px -5px 10px rgba(212, 212, 212, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(212, 212, 212, 0.9);
        border-radius: 10px;
    }

        .plano-personalizado .plano-personalizado-box h2 {
            font-weight: 700;
        }

/* CONTEÚDO PLANOS: Se interessou só que não sabe como será experimente gratuitamente? */
.experimente-gratuitamente {
    margin-top: 50px;
}

    .experimente-gratuitamente img {
        max-height: 250px;
        max-width: 100%;
        border: 5px white solid;
        border-radius: 5px;
        box-shadow: -5px 5px 10px rgba(182, 196, 197, 0.2), 5px -5px 10px rgba(182, 196, 197, 0.2), -5px -5px 10px rgba(246, 255, 255, 0.9), 5px 5px 13px rgba(182, 196, 197, 0.9), inset 1px 1px 2px rgba(246, 255, 255, 0.3), inset -1px -1px 2px rgba(182, 196, 197, 0.5);
    }

/* CONTEÚDO PLANOS: Possui alguma dúvida antes de começar? Fale conosco */
.duvida-fale-conosco {
    margin-top: 100px;
    margin-bottom: 50px;
}

.duvida-fale-conosco-form {
    background-color: white;
    background: linear-gradient(135.32deg, #F6F6F6 0%, #FFFFFF 99.44%);
    box-shadow: -5px 5px 10px rgba(212, 212, 212, 0.2), 5px -5px 10px rgba(212, 212, 212, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(212, 212, 212, 0.9), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(212, 212, 212, 0.5);
    border-radius: 10px;
    padding: 30px;
    padding-top: 20px;
    width: 100%;
}

    .duvida-fale-conosco-form .texto-form {
        color: #707070;
        display: flex;
        font-size: 0.8rem;
        margin-bottom: 0;
        margin-top: 10px;
    }

    .duvida-fale-conosco-form .campo-form {
        background: #F9F9F9;
        padding: 5px 10px;
        border: 1px solid #AEAEAE;
        box-sizing: border-box;
        border-radius: 5px;
        width: 100%;
        height: auto;
    }

        .duvida-fale-conosco-form .campo-form:focus {
            outline: none;
        }

/*  -------------------------------------------------------------------------------------
    4.0 - conteúdo das páginas
        4.5 - CONTATO
-------------------------------------------------------------------------------------   */
.contato {
    /*margin-top: 50px;*/
}

    .contato h3 {
        font-size: 1rem;
        font-weight: bold;
        color: #606060;
    }

        .contato h3 .contato::before {
            content: url(../../img/Site/icon_contato.svg);
            margin-right: 15px;
        }

        .contato h3 .suporte::before {
            content: url(../../img/Site/icon_suporte.svg);
            margin-right: 15px;
        }

    .contato h2 {
        text-indent: 30px;
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .contato p {
        text-indent: 30px;
        margin-top: 5px;
        margin-bottom: 25px;
    }

/* form de contato */
.contato-form {
    background-color: white;
    background: linear-gradient(135.32deg, #F6F6F6 0%, #FFFFFF 99.44%);
    box-shadow: -5px 5px 10px rgba(212, 212, 212, 0.2), 5px -5px 10px rgba(212, 212, 212, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.9), 5px 5px 13px rgba(212, 212, 212, 0.9), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(212, 212, 212, 0.5);
    border-radius: 10px;
    padding: 30px;
    padding-top: 20px;
    width: 100%;
}

    .contato-form .texto-form {
        color: #707070;
        display: flex;
        font-size: 0.8rem;
        margin-bottom: 0;
        margin-top: 10px;
    }

    .contato-form .campo-form {
        background: #F9F9F9;
        padding: 5px 10px;
        border: 1px solid #AEAEAE;
        box-sizing: border-box;
        border-radius: 5px;
        width: 100%;
        height: auto;
    }

        .contato-form .campo-form:focus {
            outline: none;
        }


/*  -------------------------------------------------------------------------------------
    5.0 - FOOTER
-------------------------------------------------------------------------------------   */
footer {
    margin-top: 50px;
    padding: 25px 0;
    background-image: url('../../img/Site/footer_background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

    footer p {
        margin: 0;
        text-indent: 0;
        color: white;
    }

    footer .footer-content {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: white 1px solid;
    }

/*  -------------------------------------------------------------------------------------
    6.0 - MEDIA QUERY
-------------------------------------------------------------------------------------   */

body.modal-open {
    padding-right: 0px !important;
}

.cursor-pointer {
    cursor: pointer;
}