/* Responsivo Moto G4 - 360x640*/
@media (max-width: 1200px) {
    /* estilo do cabecalho */
    header {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .bg-about {
        background-color: #14202d;
        width: 100%;
        margin: 0;
        padding: 0;

        background-image: url("/images/background_image_about_mobile.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
    }

    /* estilo altura da pagina */
    .bg-height {
        height: 0; /*zera para nao seguir mais a referencia do layout desktop de 1355px*/
        padding-bottom: 155.75%; /*1869*100/1200 = 155.75%*/
    }

    /* cabecalho ##########################################################################################################*/

    /* estilo do container do cabecalho */
    .container-header {
        position: absolute;
        width: 100%;
    }

    /* estilo do botao home */
    .home-button {
        position: absolute;
        display: flex;
        text-align: center;
        display: block;
        margin-top: 1.5vw;
        margin-left: 0%;
    }

    /* estilo da imagem do botao home*/
    .home-img {
        width:  19vw;
        height: 19vw;
        z-index: 2;
    }

    /* estilo botao de menu */
    .open-nav {
        position: absolute;
        display: block !important;
        top: 6.6vw;
        left: 88%;
        width: 8%;
        height: 8vw;
        background-color: transparent;
        z-index: 4;
        cursor: pointer;
        background-image: url("/images/menu_button.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        border: 1px solid #003;
        border-width: 0 0 0 0;
    }

    .open-nav.active {
        top: 3vw;
        left: 88%;
        background-image: url("/images/menu_button_x.png");
    }

    /* estilo do menu principal */
    .main-menu {
        position: absolute;
        width: 100%;
        background: rgba(0, 0, 0, 0.842);
        top: 0;
        right: 0;
        display: none;
        padding-top: 10vw;
        padding-bottom: 10vw;
        height: 100vw;
        flex-direction: column;
        align-items: center;
        margin: 0;
        z-index: 3;
    }

    .main-menu.active {
        display: flex;
    }

    /* estilo da lista do menu */
    .main-menu li {
        display: none;
    }

    /* estilo do item do menu principal */
    .menu-item {
        width: 50%;
        font-size: 5vw;
    }

    /* texto ##########################################################################################################*/

    .body-text{
        position: absolute;
        top: 73vw;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .container-text{
        width: 75%;
        margin-left: 5vw;
    }

    .body-text p{
        color: #aeb6bf;
        font-family: 'MuseoSans-300', calibri;
        text-align: justify;
        font-size: 2.5vw;
    }

    .body-text p b{
        color: #aeb6bf;
        font-family: 'MuseoSans-900', verdana;
        text-align: justify;
        font-size: 2.5vw;
    }

    /* botoes download ##########################################################################################################*/

    .body-download-buttons {
        position: absolute;
        top: 140vw;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .download-buttons{
        margin-left: 0%;
        display: flex;
        justify-content: center;
        width: 50%;
    }

    .app-store-button{
        position: absolute;
        width: 15%;
        height: 40.5%;
        border-radius: 7%;
        
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        left: 36%;
    }

    .app-store-img{
        width: 90%;
    }

    .google-play-button{
        position: absolute;
        width: 15%;
        height: 40.5%;
        border-radius: 7%;
        
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        left: 51%;
    }

    .google-play-img{
        width: 90%;
    }

    /* rodape ##########################################################################################################*/
    /* estilo do rodape */
    .body-footer {
        position: absolute;
        width: 100%;
        top: 147vw;
        display: flex;
        justify-content: center;
    }

    /* estilo do container do rodape */
    .container-footer {
        text-align: center;
        width: 100%;
    }

    /* estilo do copyright*/
    .copy-right {
        font-size: 1.4vw;
        color: #3e5e7f;
    }
}

/*################################################################################################################################*/
/*################################################################################################################################*/