﻿@media only screen and (min-width: 720px) and (max-width: 1199px) {

    .centralizar {
        float: left;
        width: 100%;
        padding: 0px 10px;
    }

    .centralizar-md {
        width: 950px;
        margin: 0 auto;
    }

    .corpo {
        float: left;
        width: 100%;        
    }

    .topo {
        float: left;
        width: 100%;
        height: 120px;
        padding: 15px 0px;
        background-color: #fff;
        -webkit-box-shadow: 0px 10px 52px -11px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 10px 52px -11px rgba(0,0,0,0.75);
        box-shadow: 0px 10px 52px -11px rgba(0,0,0,0.75);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999;
        transition: top 250ms, height 250ms;
    }

        .topo .linha {
            float: left;
            width: 100%;
        }

            .topo .linha .logo {
                float: left;
                width: 90px;
                height: 85px;
                margin-left: 10px;
                background-image: url(../images/logo-vertical.png);
                background-repeat: no-repeat;
                background-size: cover;
                transition: width 250ms, height 250ms;
            }

            .topo .linha .link-rapidos-mob {
                display: none;
            }

            .topo .linha .link-rapidos {
                float: left;
                width: 450px;
                margin: 20px 0px 0px 15px;
                transition: top 250ms;
            }                

                .topo .linha .link-rapidos ul {
                    list-style: none;
                    margin: 0px;
                }

                    .topo .linha .link-rapidos ul li {
                        display: inline-block;
                        margin: 10px 0px;
                    }

            .topo .linha .menu-mobile {
                float: right;
                width: 46px;
                height: 46px;
                margin-top: 20px;
                color: #000000;
                text-decoration: none;
            }

            .topo .linha .menu-mobile i {
                font-size: 42px;
            }

            .topo .linha .menu {
                position: fixed;
                top: 0px;
                right: -1200px;
                width: 600px;
                bottom: 0px;
                background-color: #b02e21;                
                z-index: 999;                
            }

                .topo .linha .menu ul {
                    float: left;
                    width: 85%;
                    margin-top: 20px;
                }

                    .topo .linha .menu ul li {
                        display: block;
                        margin-top: 10px;
                        margin-bottom: 10px;
                    }

                        .topo .linha .menu ul li a {
                            display: block;
                            margin: 0px 10px;
                            font-family: Heebo;
                            font-size: 16px;
                            font-weight: 300;
                            color: #fff;
                            text-decoration: none;
                        }

                            .topo .linha .menu ul li a:before {
                                font-family: 'Font Awesome 5 Pro';
                                content: "\f054";
                                display: inline-block;
                                padding-right: 10px;
                                color: #f5f6f6;
                                vertical-align: middle;
                                font-weight: 900;
                            }

                            .topo .linha .menu ul li a:hover {
                                color: #ffd800;
                            }

                .topo .linha .menu .menu-close {
                    float: left;
                    width: 15%;
                    margin-top: 20px;
                    text-align: center;
                    color: #fff;
                    text-decoration: none;
                }

                    .topo .linha .menu .menu-close:hover {
                        color: #ffd800;
                    }

                    .topo .linha .menu .menu-close i {
                        font-size: 36px;
                        color: #fff;
                    }

    .rodape .coluna {
        float: left;
        width: 33%;
        min-width: 220px;
        height: 350px;
        padding: 0px 15px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .rodape .coluna .conteudo {
            float: left;
            width: 100%;
        }

            .rodape .coluna .conteudo .logo-rodape {
                width: 80%;
            }

    .copyright .coluna {
        float: left;
        width: 100%;
        padding: 0px 15px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

        .copyright .coluna.align-right {
            text-align: center;
        }           
}

@media only screen and (max-width: 719px) {

    .centralizar {
        float: left;
        width: 100%;
        padding: 0px 10px;
    }

    .centralizar-md {
        width: 950px;
        margin: 0 auto;
    }

    .corpo {
        float: left;
        width: 100%;
    }

    .topo {
        float: left;
        width: 100%;
        height: 120px;
        padding: 15px 0px;
        background-color: #fff;
        -webkit-box-shadow: 0px 10px 52px -11px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 10px 52px -11px rgba(0,0,0,0.75);
        box-shadow: 0px 10px 52px -11px rgba(0,0,0,0.75);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999;        
    }

        .topo .linha {
            float: left;
            width: 100%;
        }

            .topo .linha .logo {
                float: left;
                width: 90px;
                height: 85px;
                margin-left: 5px;
                background-image: url(../images/logo-vertical.png);
                background-repeat: no-repeat;
                background-size: cover;                
            }

            .topo .linha .link-rapidos {
                float: left;
                width: 150px;
                margin-left: 30px;
            }
                
                .topo .linha .link-rapidos ul {
                    list-style: none;
                    margin: 0px;
                    padding: 0px;
                }

                    .topo .linha .link-rapidos ul li {
                        display: inline-block;
                        margin: 1px 0px;
                    }

                    .topo .linha .link-rapidos ul li a.btn {
                        display: inline-block;
                        width: 150px;
                    }

            .topo .linha .menu-mobile {
                float: right;
                width: 46px;
                height: 46px;
                margin-top: 20px;
                color: #000000;
                text-decoration: none;
            }

                .topo .linha .menu-mobile i {
                    font-size: 42px;
                }

            .topo .linha .menu {
                position: fixed;
                top: 0px;
                right: -1200px;
                width: 100%;
                bottom: 0px;
                background-color: #b02e21;
                z-index: 999;                
            }

                .topo .linha .menu ul {
                    float: left;
                    width: 85%;
                    margin-top: 20px;
                }

                    .topo .linha .menu ul li {
                        display: block;
                        margin-top: 10px;
                        margin-bottom: 10px;
                    }

                        .topo .linha .menu ul li a {
                            display: block;
                            margin: 0px 10px;
                            font-family: Heebo;
                            font-size: 16px;
                            font-weight: 300;
                            color: #fff;
                            text-decoration: none;
                        }

                            .topo .linha .menu ul li a:before {
                                font-family: 'Font Awesome 5 Pro';
                                content: "\f054";
                                display: inline-block;
                                padding-right: 10px;
                                color: #f5f6f6;
                                vertical-align: middle;
                                font-weight: 900;
                            }

                            .topo .linha .menu ul li a:hover {
                                color: #ffd800;
                            }

                .topo .linha .menu .menu-close {
                    float: left;
                    width: 15%;
                    margin-top: 20px;
                    text-align: center;
                    color: #fff;
                    text-decoration: none;
                }

                    .topo .linha .menu .menu-close:hover {
                        color: #ffd800;
                    }

                    .topo .linha .menu .menu-close i {
                        font-size: 36px;
                        color: #fff;
                    }

    .whatsapp-button {
        position: fixed;
        bottom: 15px;
        right: 15px;
        width: 80px;
        height: 80px;
        background-image: url(../images/whatsapp.png);
        background-size: cover;
    }

    .rodape .coluna {
        float: left;
        width: 100% !important;
        padding: 0px 15px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin-bottom: 30px;
    }

        .rodape .coluna .conteudo {             
            width: 60%;
            margin: 0 auto;
            
        }

            .rodape .coluna .conteudo .logo-rodape {
                width: 80%;
            }

    .copyright .coluna {
        float: left;
        width: 100%;
        padding: 0px 15px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
    }

        .copyright .coluna.align-right {
            text-align: center;
        }
}

