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

    /* estilo do fundo da pagina */
    .bg-home {
        background-color: #14202d;
        width: 100%;
        margin: 0;
        padding: 0;

        background-image: url("/images/bg-home-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 5037px*/
        padding-bottom: 773%; /*9276*100/1200 = 773%*/
    }

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

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

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

    /* 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.9vw;
        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;
    }

    /* botoes download ##########################################################################################################*/
    .body-download-buttons {
        position: absolute;
        width: 100%;
        top: 72vw;
        display: flex;
        justify-content: center;
    }
    
    .buttons-download-container {
        width: 100%;
        left: 0;
    }
    
    .download-buttons{
        margin-left: 50%;
        display: flex;
        justify-content: space-around;
        width: 50%;
    }
    
    .app-store-button{
        position: absolute;
        width: 15%;
        height: 40.5%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        left: 66%;
    }

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

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

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

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

    .body-intro-text{
        position: absolute;
        width: 100%;
        top: 84vw;
        display: flex;
        justify-content: center;
    }
    
    .container-intro{
        width: 65%;
        margin-left: 10%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .container-l-intro{
        width: 100%;
        margin-right: 0;
        text-align: center;
    }
    
    .container-r-intro{
        width: 100%;
        margin-right: 0;
        text-align: justify;
    }
    
    .container-l-intro h1{
        color: #72ecb7;
        text-transform: uppercase;
        font-family: 'MuseoSans-100', calibri;
        font-size: 5vw;
        width: 100%;
        padding-left: 0;
    }
    
    .container-l-intro h1 b{
        color: #72ecb7;
        text-transform: uppercase;
        font-family: 'MuseoSans-900', verdana;
        font-weight: bold;
        font-size: 5vw;
    }
    
    .container-l-intro h2{
        color: #aeb6bf;
        text-transform: uppercase;
        font-family: 'MuseoSans-100', calibri;
        font-size: 3vw;
    }
    
    .container-l-intro h2 b{
        color: #aeb6bf;
        text-transform: uppercase;
        font-family: 'MuseoSans-500', verdana;
        font-weight: bold;
        font-size: 3vw;
    }
    
    .container-r-intro p{
        color: #aeb6bf;
        font-family: 'MuseoSans-300', calibri;
        font-size: 2.5vw;
    }
    
    .container-r-intro p b{
        color: #aeb6bf;
        font-family: 'MuseoSans-300', verdana;
        font-weight: bold;
        font-size: 2.5vw;
    }

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

    .body-resources {
        position: absolute;
        width: 100%;
        top: 170vw;
        display: flex;
        justify-content: center;
    }
    
    .container-resources {
        width: 100%;
        height: 285vw;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content:space-between;
    }
    
    .resources-img {
        width:  15vw;
        height: 15vw;
    }
    
    .text-container-h {
        width: 80%;
        display: flex;
    }
    
    .text-container-p {
        width: 80%;
    }
    
    .text-container-p p {
        color: #707070;
        text-align: justify;
        font-family: 'MuseoSans-300', calibri;
        font-size: 2.5vw;
    }
    
    .text-container-h h1 {
        color: #1c3851;
        text-transform: uppercase;
        font-weight: bold;
        font-family: 'MuseoSans-900', verdana;
        font-size: 2.5vw;
    }

    /* texto recursos 1 ##########################################################################################################*/

    .body-resource-1 {
        width: 90%;
        margin-left: 5%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-1 .body-container-resources-img {
        text-align: right;
        display: block;
        width: 29%;
    }
    
    .body-resource-1 .body-container-resources-txt {
        width: 71%;
        margin-left: 3%;
    }
    
    .body-resource-1 .text-container-h {
        justify-content: left;
    }
    
    .body-resource-1 .container-l {
        width:  2vw;
        height: 8vw;
        background-color: #27e5ff;
    }
    
    .body-resource-1 .container-r {
        padding-left: 2vw;
    }

    /* texto recursos 2 ##########################################################################################################*/

    .body-resource-2 {
        width: 90%;
        margin-left: 4%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-2 .body-container-resources-img {
        text-align: left;
        display: block;
        width: 29%;
    }
    
    .body-resource-2 .body-container-resources-txt {
        width: 71%;
        margin-right: 3%;
        margin-left: auto;
    }
    
    .body-resource-2 .text-container-h {
        margin-left: auto;
    }
    
    .body-resource-2 .text-container-p {
        margin-left: auto;
    }
    
    .body-resource-2 .container-l {
        margin-left: auto;
        text-align: right;
        padding-right: 2vw;
    }
    
    .body-resource-2 .container-r {
        width:  2vw;
        height: 8vw;
        background-color: #d94fe8;
    }

    /* texto recursos 3 ##########################################################################################################*/

    .body-resource-3 {
        width: 90%;
        margin-left: 5%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-3 .body-container-resources-img {
        text-align: right;
        display: block;
        width: 29%;
    }
    
    .body-resource-3 .body-container-resources-txt {
        width: 71%;
        margin-left: 3%;
    }
    
    .body-resource-3 .text-container-h {
        justify-content: left;
    }
    
    .body-resource-3 .container-l {
        width:  2vw;
        height: 8vw;
        background-color: #73edb8;
    }
    
    .body-resource-3 .container-r {
        padding-left: 2vw;
    }

    /* texto recursos 4 ##########################################################################################################*/

    .body-resource-4 {
        width: 90%;
        margin-left: 4%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-4 .body-container-resources-img {
        text-align: left;
        display: block;
        width: 29%;
    }
    
    .body-resource-4 .body-container-resources-txt {
        width: 71%;
        margin-right: 3%;
        margin-left: auto;
    }
    
    .body-resource-4 .text-container-h {
        margin-left: auto;
    }
    
    .body-resource-4 .text-container-p {
        margin-left: auto;
    }
    
    .body-resource-4 .container-l {
        margin-left: auto;
        text-align: right;
        padding-right: 2vw;
    }
    
    .body-resource-4 .container-r {
        width:  2vw;
        height: 11vw;
        background-color: #27e5ff;
    }

    /* texto recursos 5 ##########################################################################################################*/

    .body-resource-5 {
        width: 90%;
        margin-left: 5%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-5 .body-container-resources-img {
        text-align: right;
        display: block;
        width: 29%;
    }
    
    .body-resource-5 .body-container-resources-txt {
        width: 71%;
        margin-left: 3%;
    }
    
    .body-resource-5 .text-container-h {
        justify-content: left;
    }
    
    .body-resource-5 .container-l {
        width:  2vw;
        height: 8vw;
        background-color: #d94fe8;
    }
    
    .body-resource-5 .container-r {
        padding-left: 2vw;
    }

    /* texto recursos 6 ##########################################################################################################*/

    .body-resource-6 {
        width: 90%;
        margin-left: 4%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-6 .body-container-resources-img {
        text-align: left;
        display: block;
        width: 29%;
    }
    
    .body-resource-6 .body-container-resources-txt {
        width: 71%;
        margin-right: 3%;
        margin-left: auto;
    }
    
    .body-resource-6 .text-container-h {
        margin-left: auto;
    }
    
    .body-resource-6 .text-container-p {
        margin-left: auto;
    }
    
    .body-resource-6 .container-l {
        margin-left: auto;
        text-align: right;
        padding-right: 2vw;
    }
    
    .body-resource-6 .container-r {
        width:  2vw;
        height: 8vw;
        background-color: #73edb8;
    }

    /* texto recursos 7 ##########################################################################################################*/

    .body-resource-7 {
        width: 90%;
        margin-left: 5%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-7 .body-container-resources-img {
        text-align: right;
        display: block;
        width: 29%;
    }
    
    .body-resource-7 .body-container-resources-txt {
        width: 71%;
        margin-left: 3%;
    }
    
    .body-resource-7 .text-container-h {
        justify-content: left;
    }
    
    .body-resource-7 .container-l {
        width:  2vw;
        height: 8vw;
        background-color: #27e5ff;
    }
    
    .body-resource-7 .container-r {
        padding-left: 2vw;
    }
    
    /* texto recursos 8 ##########################################################################################################*/

    .body-resource-8 {
        width: 90%;
        margin-left: 4%;
        display: flex;
        justify-content: center;
    }
    
    .body-resource-8 .body-container-resources-img {
        text-align: left;
        display: block;
        width: 29%;
    }
    
    .body-resource-8 .body-container-resources-txt {
        width: 71%;
        margin-right: 3%;
        margin-left: auto;
    }
    
    .body-resource-8 .text-container-h {
        margin-left: auto;
    }
    
    .body-resource-8 .text-container-p {
        margin-left: auto;
    }
    
    .body-resource-8 .container-l {
        margin-left: auto;
        text-align: right;
        padding-right: 2vw;
    }
    
    .body-resource-8 .container-r {
        width:  2vw;
        height: 8vw;
        background-color: #d94fe8;
    }

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

    .body-download-buttons-2 {
        position: absolute;
        top: 470vw;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }
    
    .download-buttons-2{
        margin-left: 0%;
        display: flex;
        justify-content: center;
        width: 50%;
    }
    
    .app-store-button-2{
        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-2{
        width: 90%;
    }
    
    .google-play-button-2{
        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-2{
        width: 90%;
    }

    /* junte-se a nos ##########################################################################################################*/

    .body-join-us{
        position: absolute;
        top: 507vw;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .container-join-us{
        width: 90%;
        margin-left: 7%;
    }

    .body-join-us p{
        color: #aeb6bf;
        font-family: 'MuseoSans-300', calibri;
        font-size: 2.5vw;
        width: 60%;
    }

    .body-join-us b{
        color: #aeb6bf;
        font-family: 'MuseoSans-900', verdana;
        font-weight: bold;
        font-size: 2.5vw;
        width: 60%;
    }

    /* midia ##########################################################################################################*/

    .body-media {
        position: absolute;
        top: 530vw;
        width: 100%;
        display: flex;
        justify-content: left;
    }

    .container-media {
        width: 18%;
        margin-left: 11%;
    }

    .buttons-media{
        margin-left: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .button-instagram{
        width: 7vw;
        height: 7vw;
        background: #2c567c;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .instagram-img{
        width: 100%;
    }

    .button-facebook{
        width: 7vw;
        height: 7vw;
        background: #2c567c;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .facebook-img{
        width: 100%;
    }

    /* sobre nos ##########################################################################################################*/

    .body-about-us{
        position: absolute;
        width: 100%;
        top: 557vw;
        display: flex;
        justify-content: center;
    }

    .container-about-us{
        width: 100%;
    }

    .body-about-us h1 {
        color: #18293d;
        text-transform: uppercase;
        font-weight: bold;
        font-family: 'MuseoSans-900', verdana;
        font-size: 2.3vw;
        margin: 2vw;
    }

    .body-about-us p {
        color: #aeb6bf;
        text-align: justify;
        font-family: 'MuseoSans-300', calibri;
        font-size: 2.3vw;
        margin: 2vw;
    }

    .body-about-us h2 {
        color: #18293d;
        font-family: 'MuseoSans-300', calibri;
        font-size: 2.3vw;
        margin: 2vw;
    }

    .body-about-us h2 b{
        font-family: 'MuseoSans-900', verdana;
        font-weight: bold;
        font-size: 2.5vw;
    }

    /* sobre nos 1 ##########################################################################################################*/

    .body-about-us-1 {
        background-image: url("/images/about-us-1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 28px 16px 18px 28px;
        width: 45%;
        margin-left: 10%;
    }

    /* sobre nos 2 ##########################################################################################################*/

    .body-about-us-2 {
        background-image: url("/images/about-us-2.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 34px 6px 22px 18px;
        margin-top: -4vw;
        margin-left: 45%;
        width: 40%;
    }

    /* sobre nos 3 ##########################################################################################################*/

    .body-about-us-3 {
        background-image: url("/images/about-us-3.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 38px 6px 26px 18px;
        margin-top: -5vw;
        margin-left: 10%;
        width: 40vw;
    }

    /* sobre nos 4 ##########################################################################################################*/

    .body-about-us-4 {
        background-image: url("/images/about-us-4.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 28px 10px 18px 34px;
        width: 35%;
        margin-top: -8vw;
        margin-left: 45vw;
    }

    /* sobre nos 5 ##########################################################################################################*/

    .body-about-us-5 {
        background-image: url("/images/about-us-5.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 21px 38px 3px 22px; /*padding: 6vw 10vw 0.5vw 6vw;*/
        width: 50%;
        margin-top: -1vw;
        margin-left: 6vw;
    }

    /* rodape ##########################################################################################################*/
    /* estilo do rodape */
    .body-footer {
        position: absolute;
        width: 100%;
        top: 765vw;
        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;
    }

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