﻿@media all {
    article {
        display: flex;
        width:100%;
        padding-bottom: 20px;
    }

    aside > form > div > button {
        margin: 8px 0;
    }

    #msgEmail {
        padding: 5px;
        margin: 2px;
        color: black;
        width: 100%;
        word-wrap: break-word;
        -ms-word-wrap: break-word;
    }

    #moverForm{
        display: block;
        margin-left: 0px;
        flex: 0 1 50%;
        margin-top:11px;
    }


    
    /*********************************/
    /***           Mapa           ***/
    /*******************************/

    #mapaPesquisa {
        width: 100%;
    }

    #map_canvas {
        width: 100%;
        height: 340px;
        border: 1px solid #bbb;
    }
}

@media (min-width:768px) {
    article > aside {
        flex: 0 1 50%;
        padding: 0 10px 10px 10px;
        margin-top: -20px;
    }

        article > aside > .enderecoEI {
            margin-top: 15px;
        }

    article > :first-child {
        padding-right: 30px;
    }

        article > :first-child > form > input {
            margin-bottom: 8px;
        }
}

@media (min-width:426px) and (max-width:767px) {
    article {
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
    }

        article > aside {
            width: 100%;
            margin: 0 auto;
            margin-top: 20px;
            background: white;
            padding: 10px;
            box-shadow: 1px 2px 8px rgba(0,0,0,0.8);
        }
         
            article > aside > .enderecoEI {
                display: none;
            }

                #moverForm {
                    display: block;
                    padding-left: 50px;
                    padding-right: 50px;
                }
}

@media (max-width: 425px) {
    article {
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
    }

        article > aside {
            padding: 10px;
            flex: 1 1 100%;
            width: 100%;
        }

            article > aside > .enderecoEI {
                display: none;
            }

            article > aside > form > div {
                display: flex;
            }

                article > aside > form > div > button {
                    width: 50%;
                    flex: 1 1 50%;
                    margin: 3px;
                }
        #moverForm{
            display: block;
            padding-left: 50px;
            padding-right: 50px;
        }

        .form-control {
            width: 300px;
        }
}

@media (max-width: 765px){
    #pagina {
        min-height: 875px;
    }
}

@media (max-width: 425px) {
    #pagina {
        min-height: 830px;
    }
}