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

    /* estilo das uls*/
    ul {
        margin: 0;
        padding: 0;
    }

    /* estilo das listas*/
    li {
        list-style-type: none;
        text-decoration: none;
    }

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

        background-image: url("/images/background_image_faq_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 layout mobile */
    .open-nav {
        position: absolute;
        display: block !important;
        top: 6.4vw;
        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: 70vw;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .container-text{
        width: 80%;
        height: 55vw;
        z-index: 1;
        overflow-y: auto;

        display: flex;
        flex-direction: row;
        justify-content: left;
        margin-left: -2vw;
        padding-right: 4vw;
    }

    .container-text::-webkit-scrollbar{
        background: #1c3851;
        width: 1vw;
    }

    .container-text::-webkit-scrollbar-thumb{
        background: #386189;
    }

    .ul-1, .ul-2, .ul-3, .ul-4, .ul-5, .ul-6, .ul-7, .ul-8, .ul-9, .ul-10 {
        display: none;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

    .body-text .li-p {
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

    .body-text a{
        list-style-type: none;
        text-decoration: none;
        display: flex;
        flex-direction: row;
        justify-content:end;
        height: 100%;
    }

    .body-text .faq-arrow{
        width: 6vw;
        height: 5.08vw;
        margin: auto;
        margin-left: 0;
        margin-right: 2vw;
    }

    .container-text h1{
        margin: 0;
        padding: 0;
        color: #dcdcd8;
        text-transform: uppercase;
        font-family: 'MuseoSans-300', calibri;
        font-size: 3.5vw;
    }

    .li-ul {
        color: #dcdcd8;
        font-family: 'MuseoSans-300', calibri;
        font-size: 2.5vw;
        list-style: inside disc;
        text-align: justify;
    }

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

    .text-line{
        position: relative;
        background-color: #21405b;
        width: 100%;
        height: 2px;
        margin: 2vw;
        margin-bottom: 2vw;
    }

    /* 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;
    }
}
    /*################################################################################################################################*/
    /*################################################################################################################################*/