﻿/* Sendo utilizado em mais de um lugar */

.just-starter-tag {
    font-size: 12px;
    background: var(--dark-purple);
    color: var(--white);
    padding: 3px 5px 3px 5px;
    border-radius: 10px;
    vertical-align: middle;
}

.just-on-mobile {
    display: none;
}

.purple-span {
    font-weight: 700;
    color: var(--dark-purple)
}

.orange-span {
    font-weight: 700;
    color: var(--light-orange)
}


.half-right {
    text-align: right;
}

.title-on-dark h2 {
    color: var(--white);
}


/* Banner Top */


.content-banner-top h1 {
    font-size: 44px;
}

    .content-banner-top h1 span {
        color: var(--light-orange);
    }

.content-banner-top ul li {
    font-size: 24px;
    color: var(--white);
    padding-left: 30px;
    background: url('../img/AreasDeAtuacao/check.svg') no-repeat center left;
    background-size: auto 50%;
}

    .content-banner-top ul li span {
        font-weight: 700;
    }

.banner-top-segmentos {
    background: var(--line-gradient-purple-inverse);
}

.spacing-banner {
    padding: 100px 0px 100px 0px;
}

/* Aqui muda as imagens no banner do topo conforme ramo de atuação! */

.clothes-store-banner {
    background-image: url("../img/AreasDeAtuacao/image-top-sige-lite.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.minimercados-banner {
    background-image: url("../img/AreasDeAtuacao/image-top-sige-lite-minimercados.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.calcados-banner {
    background-image: url("../img/AreasDeAtuacao/image-top-sige-lite-calcados.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.assistencia-store-banner {
    background-image: url("../img/AreasDeAtuacao/image-top-sige-lite-assistencia-tecnica.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.autopecas-banner {
    background-image: url("../img/AreasDeAtuacao/image-top-sige-lite-autopecas.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.foods-banner {
    background-image: url("../img/AreasDeAtuacao/image-top-sige-lite-foods.png");
    background-position: right center;
    background-repeat: no-repeat;
}

/* Menu on the Bottom */

.menu-bottom {
    background: var(--dark-purple);
    height: auto;
    z-index: 5000;
}

    .menu-bottom div a {
        display: inline-block;
        vertical-align: middle;
        color: var(--white);
        font-size: 18px;
        font-weight: 900;
        width: 100%;
        padding: 20px 0px 20px 0px;
    }

        .menu-bottom div a:hover {
            color: var(--light-orange);
        }

        .menu-bottom div a svg {
            height: 50px;
            width: auto;
            vertical-align: middle;
            fill: var(--light-orange);
            padding-right: 10px;
        }

/* Seção dos apps dentro dos Exagonos */

.apps-hex {
    background: url("../img/AreasDeAtuacao/line-back-system.svg") no-repeat center top 180px;
    background-size: 70% auto;
    margin-top: -110px;
}

    .apps-hex div img {
        width: 100%;
    }

    .apps-hex div h3 {
        font-size: 18px;
        color: var(--light-orange);
        margin: 50px 0px 20px 0px;
    }

.app-hex-2 {
    margin-top: 150px;
}

.app-hex-3 {
    margin-top: 300px;
}

/* Seção do CTA em curva */

.cta-curve {
    margin-top: -400px;
    background: url("../img/AreasDeAtuacao/cta-back-sige-lite.png");
    background-repeat: no-repeat;
    background-position: center top;
    height: 890px;
}

.line-cta-curve {
    height: 100%;
    width: auto;
    background: url("../img/AreasDeAtuacao/line-back-cta.svg") no-repeat left 525px top 330px;
    background-size: 500px auto;
}

.cta-curve-inside {
    width: 350px;
    padding-top: 180px;
    margin-left: 250px;
}

    .cta-curve-inside h2 {
        font-size: 28px;
        color: var(--light-orange);
    }

        .cta-curve-inside h2 span {
            color: var(--white);
        }

/* Seção da gestão fiscal */

.fiscal-section {
    margin-top: -200px;
}

.fiscal-section-3-columns {
    margin-top: -100px;
}

.items-fiscal-section h3 {
    font-size: 21px;
    color: var(--light-orange);
}

/* Seção do Estoque */

.stock-section {
    background: var(--line-gradient-purple);
}

.item-stock-section h3 {
    font-size: 21px;
    color: var(--white);
}

/* Seção da Gestão Financeira */

.item-financial-section h3 {
    font-size: 21px;
    color: var(--light-orange);
}



/* 

    R E S P O N S I V I D A D E

*/


@media screen and (max-width: 1450px) {

    /* Banner top */

    .clothes-store-banner {
        background-position: right -250px center;
    }

    .minimercados-banner {
        background-position: right -250px center;
    }

    .calcados-banner {
        background-position: right -250px center;
    }

    .assistencia-store-banner {
        background-position: right -250px center;
    }

    .autopecas-banner {
        background-position: right -250px center;
    }

    .spacing-banner {
        padding: 50px 0px 50px 0px;
    }

    .content-banner-top ul li {
        font-size: 21px;
    }

    /* CTA Curve */

    .cta-curve {
        background-size: 120% auto;
        height: 750px;
    }

    .cta-curve-inside {
        width: 350px;
        padding-top: 160px;
        margin-left: 100px;
    }

    .line-cta-curve {
        height: 100%;
        width: auto;
        background: url("../img/AreasDeAtuacao/line-back-cta.svg") no-repeat left 375px top 315px;
        background-size: 365px auto;
    }
}


@media screen and (max-width: 1023px) {

    .just-on-mobile {
        display: block;
    }

    .half-right {
        text-align: left;
    }

    .title-full-width h2 {
        font-size: 28px;
    }


    /* Banner top */

    .content-banner-top h1 {
        font-size: 35px;
    }

    .spacing-banner {
        padding: 50px 0px 50px 0px;
    }

    .clothes-store-banner, .minimercados-banner, .assistencia-store-banner, .calcados-banner, .autopecas-banner {
        background: none;
    }

    .content-banner-top ul {
        margin: 0px 25px 0px 25px;
    }

        .content-banner-top ul li {
            font-size: 21px;
            text-align: left;
            color: var(--white);
            padding-left: 50px;
            background-size: auto 20px;
            margin-bottom: 10px;
        }

    /* Menu on bottom */

    .menu-bottom {
        padding: 25px 0px 25px 0px;
    }

        .menu-bottom div a {
            display: inline-block;
            vertical-align: middle;
            color: var(--white);
            font-size: 18px;
            font-weight: 900;
            width: 100%;
            padding: 15px 0px 15px 0px;
            text-align: center;
        }

    /* Seção sobre os outros sistemas  */

    .apps-hex {
        margin-top: 0px;
    }

    .app-hex-2, .app-hex-3 {
        margin-top: 50px;
    }

    /* Seção do CTA em curva */

    .cta-curve {
        margin-top: 0px;
        background: var(--line-gradient-purple-inverse);
        height: auto;
        text-align: center;
        padding: 50px 0px 50px 0px;
    }

    .line-cta-curve {
        background: none;
    }

    .cta-curve-inside {
        width: auto;
        padding-top: 0px;
        margin-left: 0px;
    }


    /* Fiscal Section */

    .fiscal-section {
        margin-top: 0px;
    }

    .fiscal-section-3-columns {
        margin-top: 0px;
    }
}
