/* --- adiciona fundo na legenda no mobile --- */

@media screen and (max-width: 767px) {
    .carousel-inner {
        margin-top: 50px;
    }

    .sobre h1 {
        margin-top: 50px;
    }

    .rodape .copyright {
        text-align: left;
    }

    a.telefone {
        float: right;
        display: block;
        width: 100%;
        text-align: center;
        background: #ff6701;
        font-weight: 600;
        font-size: 21px;
        color: #fff;
        padding: 8px;
        margin: 7px 0;
    }

    a.whatsapp {
        float: right;
        display: block;
        width: 100%;
        text-align: center;
        background: #00b042;
        font-weight: 600;
        font-size: 21px;
        color: #fff;
        padding: 8px;
        margin: -7px 0;
    }

    a.telefone:hover, a.telefone:focus {
        text-decoration: none;
    }

    a.navbar-brand {
        height: auto;
    }

    .navbar-nav {
        margin-top: -8px;
    }

    .rodape .copyright, .rodape .teodoz {
        text-align: center;
    }

    #vantagens .robusty img, #vantagens .concorrencia img {
        width: 100%;
    }
}

/* --- alinhar colunas na base --- */

@media screen and (max-width: 991px) {
    .carousel-caption.col-md-4 {
        top: 48%;
        padding-bottom: 40px;
    }

    .carousel-caption {
        background-color: rgba(255, 255, 255, 0.93);
    }

    #carousel-example-generic .item.active.row {
        height: 340px;
    }
}

@media screen and (min-width: 992px){
    .vantagens .flex-center-box img {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {

    .barra-topo .container {
        width: 100%;
    }

    .navbar-default .navbar-collapse {
        display: inline-block;
        float: right;
    }

    .barra-topo .navbar-nav > li > a {
        font-size: 15px !important;
    }

    .barra-topo .navbar-nav > li.telefones {
        margin: 0 -4px;
    }
}

@media screen and (min-width: 1000px) {
    .sobre .row {
        display: table;
    }

        .sobre .row .col-md-6 {
            float: none;
            display: table-cell;
            vertical-align: bottom;
        }

    .hide-md {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    a.telefone, a.whatsapp {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 814px) {
    .navbar-brand > img {
        width: 100%;
    }

    .container > .navbar-header {
        width: 140px;
        padding: 10px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .barra-topo .navbar-nav > li > a {
        padding: 25px 9px;
        font-size: 16px;
    }
}

@media screen and (min-width: 426px) and (max-width: 766px) {
    .barra-topo .navbar-nav > li > a {
        font-size: 15px;
        padding: 0 8px;
    }

    li.telefones {
        display: inline-flex;
    }

    .barra-topo {
        max-height: 90px;
        height: 90px;
    }

    .navbar-default {
        display: flex;
    }

        .navbar-default .navbar-collapse {
            display: none !important;
            margin: 20px;
        }
}

@media screen and (max-width: 768px) {
    .vantagens .flex-center {
        display: none;
    }

    #carousel-instalacao .item img {
        width: 100%;
    }
}

@media screen and (min-width: 425px) {
    .w-100 {
        width: auto;
    }
}

@media screen and (max-width: 425px) {
    li.telefones {
        display: none !important;
    }

    .carousel-inner .item img {
        width: 100%;
    }
}

/* --- corrigir estouro de tela com as imagens das vantagens --- */

@media screen and (max-width: 450px) {
    .vantagens h3 img {
        width: inherit !important;
    }

    .vantagens .mixfer img, .vantagens .concorrencia img {
        width: 100%;
    }

    .carousel-caption h2 {
        font-size: 28px;
    }

    .carousel-caption h3.large {
        font-size: 30px;
        margin: 0;
    }

        .carousel-caption h3.large.black {
            font-size: 29px;
        }
}
