/* FOLHA DE ESTILO - MÓDULO MEIAS AVENTURAS */
@font-face { font-family: "LatoReg"; src: url("Lato-Regular.ttf"); }
@font-face { font-family: "LatoBold"; src: url("Lato-Bold.ttf"); }

.ma_bold { font-family: "LatoBold"; }

.ma_container { width: calc(100vw - 10px); max-width: 950px; display: flex; flex-direction: column; color: #FFF; font-family: "LatoReg"; font-size: 26px; }
.ma_inner { display: flex; }

@media screen and (max-width: 700px) {
    .mobileonly { display: auto; }
    .desktoponly { display: none !important; }
	
	.ma_container img { max-width: calc(100vw - 10px); }

    /* BLOCOS INDIVIDUAIS */
	.ma_intro1 { position: relative; background-color: #1C8EC4; color: #FFF; padding: 40px; padding-bottom: 10px; overflow-y: hidden; flex-direction: column; font-size: 30px; }
	.ma_intro1 p { margin-bottom: 30px; }
	
	.intro1_leiamais { position: absolute; width: calc(100vw - 80px); text-align: center; display: flex; align-items: flex-end; justify-content: center; }
	
    .ma_s1 { background-color: #AA1A4C; padding: 20px; justify-content: space-evenly; align-items: center; flex-direction: column; }
    .ma_s1 a { display: inline-block; padding: 3px 15px; color: #FFF; font-family: "LatoReg"; text-transform: uppercase; font-size: 13.34px; text-decoration: none; }
    .ma_s1 a:hover { background-color: #39A5E3; }
    .ma_s1 .inativo { display: inline-block; padding: 3px 10px; color: rgba(255, 255, 255, 0.5); font-family: "LatoReg"; text-transform: uppercase; font-size: 13.34px; position: relative; }
    .ma_s1 .nav_topo_img { display: flex; width: 100%; justify-content: space-between; }

    .ma_s2 { display: flex; flex-direction: column; align-items: center; background-color: #EEE8DA; background-image: url("../MEIA_Carrossel_Fundo.png"); color: #2C2D82; padding: 20px;}
    .ma_s2 .cabecalho { margin-bottom: 20px; font-size: 20pt; font-family: "LatoBold"; }

    .ma_s3 { position: relative; background-color: #EC7A00; }
    .ma_s3 .texto { padding: 35px 40px; }
    .ma_s3 .projeto_img_elementos_mobile {
		width: 100%; padding-top: 5px; background-image: url("MEIA_MOBI_ProjetoElementos.png"); background-position: center top;
		background-size: contain; padding-bottom: 150px; background-repeat: no-repeat; margin-bottom: 10px;
	}

    .ma_s5 { background-color: #F2EFE8; display: flex; flex-direction: column; }
    .ma_s5 .texto { padding: 40px; color: #000; }
    .ma_s5 .textokit { padding: 40px; padding-top: 0; display: flex; justify-content: space-around; flex-direction: column; }
    .textokit_botao { width: auto; margin-bottom: 20px; background-color: #E9E2D4; border-radius: 15px; padding: 10px; }
    .textokit img { float: left; margin-right: 10px; }
    .textokit .chamariz { font-weight: bold; color: #39A5E3; margin: 0; }
    .textokit .label { color: #774939; font-size: 22px; margin: 0; }

    .ma_s7 { padding: 40px; background-color: #35A8DF; background-image: url("../MEIA_PassoPassoFundo.png"); background-repeat: no-repeat; background-position: 135% 110%; background-size: 50%; display: flex; flex-direction: column; }
    .ma_s7 .topo { text-align: left; }
    .ma_s7 .meio { display: none }
    .ma_s7 .meio_mobile { display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .meio_mobile_card { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; }
    .ma_s7 .baixo { margin-top: 20px; margin-bottom: 80px; }
    .flip-card-texto { text-align: center; font-size: 20px; font-weight: bolder; margin-top: 10px; }

    .ma_s8 { background-color: #A9194D; background-image: url("MEIA_MOBI_Home_Aventuras_Bg_Personagem.png"); background-repeat: no-repeat; background-position: 100% 15px; display: flex; flex-direction: column; }
    .ma_s8 .texto { display: inline-block; text-align: left; padding: 40px; }
    .ma_s8 .video { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; background-image: url("../MEIA_AventurasTextura.png"); background-repeat: no-repeat; background-position: 0 25px; }
    .s8_cabecalho { font-family: "LatoReg"; font-size: 40px; margin-top: 15px; font-style: italic; font-weight: bold; }
    .s8_video { display: flex; margin-bottom: 50px; flex-direction: column; align-items: center; justify-content: flex-end; width: calc(100vw - 80px); height: calc(((100vw - 80px) * 375) / 694); background-size: contain; background-image: url("../MEIA_AventurasPrint01.png"); padding-bottom: 30px; }

    .textolink { padding: 7px 12px !important; font-size: 23px; color: #FFF; background-color: #EC7A00; font-family: "LatoBold"; border-radius: 100px; }

    .ma_s9 { background-color: #BEE2EE; padding: 20px; padding-top: 30px; justify-content: space-evenly; align-items: center; }
    .ma_s9 a { display: inline-block; padding: 3px 15px; color: #4760E1; font-family: "LatoReg"; text-transform: uppercase; font-size: 13.34px; text-decoration: none; }
    .ma_s9 .inativo { display: inline-block; padding: 3px 10px; color: rgba(71, 96, 225, 0.5); font-family: "LatoReg"; text-transform: uppercase; font-size: 13.34px; position: relative; }

    .ma_s10 { position: relative; background-color: #35a7de; }
    .ma_s10 .texto { padding: 35px 40px; }
    .ma_s10 .projeto_img_elementos_mobile {
		width: 100%; padding-top: 5px; padding-bottom: 50px; margin-bottom: 10px;
	}


    .inativo img { position: absolute; left: 60%; top: -5%; }


    /* PÁGINA AVENTURAS DO MEIA */
    .ma_adm .conteudo { background-color: #FFF; background-image: url("../MEIA_Aventuras_TexturaAmostra.png"); color: #000; }
    .ma_adm .cabeca { padding: 60px 40px; }
    .ma_adm .em_breve { padding-right: 20px; margin-bottom: 100px; }
    .em_breve .em_breve_persona { float: left; margin-right: 20px; margin-bottom: 50px; max-width: 25vw; }
    .em_breve .aventuras_tabela { clear: both; display: inline-flex; flex-direction: column; align-items: left; }
    .em_breve .aventuras_tabela img { }
    
    .ma_adm_videos { background-color: #EC7A00; border-radius: 30px; padding: 30px; padding-bottom: 100px; display: flex; flex-direction: column; align-items: center; }
    .ma_adm_videos a { text-decoration: none; color: #FFF; }
    .adm_videos_entrada { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
    .adm_videos_entrada_texto { font-size: 40px; font-weight: bold; width: 100%; text-align: left; }
    .adm_videos_entrada_img { position: relative; align-self: center; }
    .adm_videos_entrada_novo { align-items: flex-start !important; }
    .adm_videos_novo { position: absolute; top: 110px; left: 160px; }


    /* PÁGINA CAMARIM MEIO MÁGICO */
    .ma_cmm .conteudo { background-color: #F2EFE8; padding: 60px 40px; color: #000; }
    .tabeladesktop { display: none !important; }
    .cmm_tabela_cell_mobile {
        position: relative; width: 468px; height: 133px; padding-left: 160px; background-size: cover;
        text-align: left; color: #FFF; font-family: "LatoBold"; font-style: italic;
        display: flex; align-items: center; justify-content: left; margin-bottom: 20px; text-decoration: none;
    }
    .cmm_tabela_cell_mobile img { position: absolute; left: calc(100% - 80px); }
    .carrossel-camarim { width: calc(100vw - 100px); height: calc((100vw - 100px) * 600 / 767); background-position: bottom; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url('../camarim/Meia_CAMARIM_unboxing_bg_B.png'); }
    .carrossel-camarim img { width: calc(100vw - 100px); height: calc((100vw - 100px) * 600 / 767); }


    /* PÁGINA PASSO A PASSO */
    .ma_pap { background-color: #35A8DF; position: relative; }
    .ma_pap .planodefundo { background-image: url("MEIA_PassoPassoTextura.png"); background-size: 150px; opacity: 0.1; position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; }
    .ma_pap .conteudo { z-index: 1; display: flex; flex-direction: column; align-items: stretch; }
    .ma_pap .cabeca { padding: 40px; padding-bottom: 20px; }

    .ma_pap .coluna_passos { padding: 0 100px; }
    .ma_pap .passo { background-color: #E3DBCE; position: relative; width: 80vw; margin-left: 50px; margin-bottom: 60px; height: 262px; border-radius: 45px; }
    .passo .passo_numero { position: absolute; left: -50px; }
    .passo .titulo { color: #A9194D; padding: 30px 0 10px 60px; margin: 0; font-family: "LatoBold"; }
    .passo .texto { color: #333; font-size: 17px; line-height: 26px; font-weight: bold; margin: 0; padding: 0 60px; }
    .passo .passo_flavor { float: right; margin-left: 60px; }

    .ma_pap .dicas { position: relative; border-radius: 45px; background-color: #E4D8BE; margin: calc((20vw - 10px) / 2); margin-top: 150px; width: 80vw; color: #555; font-weight: bold; display: flex; flex-direction: column; }
    .dicas .header { position: absolute; left: -1px; top: -140px; width: 80vw; }
    .dicas .cabecalho { padding: 20px; padding-top: 20vw; padding-bottom: 0; }
    .dicas .rodape { text-align: center; }
    .rodape .texto { display: inline-block; padding: 15px; border-radius: 45px; background-color: #DED1B1; }
    .dicas .dica { margin: 20px; display: flex; flex-direction: column; align-items: center; align-content: center; }
    .dica .dica_titulo { text-align: left !important; font-size: 32px; font-family: "LatoBold"; margin: 0; }
    .dica .dica_texto { text-align: left !important; margin: 0; }
    .dica02 { flex-direction: column-reverse !important; }

    .ma_pap .direitos { margin: 0; margin: calc((20vw - 10px) / 2); width: 80vw; height: calc((80vw / 506) * 661); position: relative; }
    .direitos .conteudo { display: flex; flex-direction: column; padding: 0 30px; z-index: 10; }
    .direitos .direitos_titulo { color: #A9194D; font-size: 32px; padding-bottom: 10px; padding-top: 30px; margin: 0; font-family: "LatoBold"; }
    .direitos .direitos_texto { color: #333; font-size: 24px; padding-bottom: 20px; }
    .direitos .textolink { background-color: #A9194D; }

    .ma_pap_mobile_container { width: 80vw; margin: calc((20vw - 10px) / 2); margin-top: 0; margin-bottom: 0; }
    .ma_pap_mobile_passo_mais { font-weight: bold; padding-top: 40px; margin-left: 40px; }
    .ma_pap_mobile_passo1, .ma_pap_mobile_passo2, .ma_pap_mobile_passo3 {
        background-color: #E5D5B1; border-radius: 50px;
        box-shadow: inset 3px 3px 0 0 #E6C07F, inset -3px -3px 0 0 #E6C07F, inset 3px -3px 0 0 #E6C07F, inset -3px 3px 0 0 #E6C07F; 
    }
    .ma_pap_mobile_passo_header { display: flex; color: #A9194D; justify-content: center; align-items: center; }
    .ma_pap_mobile_passo1_conteudo, .ma_pap_mobile_passo2_conteudo, .ma_pap_mobile_passo3_conteudo { display: none; }
    .ma_pap_mobile_passo_texto { color: #333; width: 100%; padding: 20px 40px; }
    .ma_pap_mobile_passo_aberto { background-color: #E3DBCE !important; box-shadow: none !important; }


    /* PÁGINA ATIVIDADES DIVERTIDAS */
    .ma_atd { background-image: url("../MEIA_Atividades_TexturaAmostra.png"); padding: 60px 40px; color: #000; }
	
	.ma_atd .tabela img { width: 80vw; }

    /* SISTEMA DE FLIP DO CORTE 7 */
    .flip-card { background-color: transparent; width: 150px; height: 150px; perspective: 1000px; }
    .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
    
    .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
    .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .flip-card-back { transform: rotateY(180deg); }
    /*
    .flip-card-front { background-color: #bbb; color: black; }
    .flip-card-back { background-color: #2980b9; color: white; transform: rotateY(180deg); }
    */

    /* PÁGINA MÃO NA MEIA */
    .ma_mnm .conteudo { background-color: #35a7de; position: relative; }

    .ma_mnm .cabeca {
        padding: 0px 30px 150px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

    .ma_mnm .historias_fundo0, .ma_mnm .historias_fundo1 {
        /* border-radius: 20px; */
        padding: 30px;
        /* padding-bottom: 70px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        /* margin-top: -31px; */
      }
    
      .ma_mnm .historias_fundo0, .ma_mnm .historias_borda_inferior0{
        background-color: #ffffff;
      }
    
      .ma_mnm .historias_fundo1, .ma_mnm .historias_borda_inferior1{
        background-color: #f0f0f0;
      }
    
      .ma_mnm .historias_borda_inferior0, .ma_mnm .historias_borda_inferior1{
        height: 25px;
        width: 100%;
        border-radius: 0 0 20px 20px;
      }
    
      .ma_mnm .historias_cabecalho {
        
        font-family: "LatoBold";
        font-size: 22px;
        align-self: baseline;
      }
    
      .ma_mnm .historias_fundo0 .historias_cabecalho {
        color: #2c2d82;
      }
    
      .ma_mnm .historias_fundo1 .historias_cabecalho {
        color: #226348;
      }

    /* MENU VERSÃO MOBILE */
    .ma_nav_mobile_menu { color: #2C2D82; position: absolute; width: 80%; display: none; z-index: 10; }
    .ma_nav_mobile_menu_esta_aberto { display: flex !important; flex-direction: column; }
    .ma_nav_mobile_menu .cabecalho { width: 100%; background-color: #FFF; display: flex; justify-content: space-between; align-items: center; padding: 10px; }
    .ma_nav_mobile_menu .item { width: 100%; background-color: #BEE2EE; display: flex; justify-content: space-between; padding: 30px; font-weight: bold; text-decoration: none; }
    .ma_nav_mobile_fecha_menu { background-color: #CCC; padding: 5px 0; width: 40px; text-align: center; font-weight: bold; }
}