/* Estilos padrão primeiro (mobile-first) */

/* Para telas menores que 1024px (tablets e dispositivos maiores) */
@media screen and  (max-width: 1023px) {
    /* Estilos para dispositivos menores que 1024px */

    h2{
        font-size: calc(var(--html-default-fontsize)*1.8) !important;
    }
    .logo-container-grid .item-c{
      
        -webkit-logical-height: auto;
    
    } 

    .menu-grid-row nav ul{
		
        margin:initial;
        padding: initial;
        display:flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .menu-grid-row nav ul>li{
        list-style:none;
        
        font-size: var(--html-default-fontsize);
        font-weight: 700;
        border-bottom: 1px solid gray;
        width: 100%;
        justify-content: space-between;
        flex-direction: row;
        margin: initial;
        padding: initial;
    }

    .menu-grid-row{
        background-color: white;
        position: relative;
        width:100%;
        z-index:1;
        width: 100%;
        -webkit-logical-height: 100%;
    }

    .pine-divider{
        font-size: var(--html-default-fontsize);
        width:2px;
        font-weight: 100;
        background:rgb(19 47 85 / 25%);
        border-radius:12px;
        display: none;
        visibility: hidden;
    }
    .menu-grid-row nav>ul>li>a{
        list-style:none;
        
        text-align: left;
        
        font-size: 16px;
        display: block;
        
        padding: calc(var(--html-default-padding)*2);
        padding-left:initial;
        color: rgb(19 47 85);
        
        border-bottom: 2px solid transparent;
        transition: var(--transition-default-delay);
    }
    
    .menu-grid-row nav>ul>li>a:hover,
    .menu-grid-row nav>ul>li>a:focus-within{
        color: rgb(138 185 210);
        padding: calc(var(--html-default-padding)*2);
        border-bottom: 2px solid rgb(138 185 210);
    }
    
    .menu-grid-row nav .nav-a-icons{
        display: none;
    }

    .menu-grid-row nav .menu-languages{
        width: 100%;
    }

    .menu-grid-row nav .menu-languages li{
        padding: 10px 0px;
    }

    .menu-grid-row nav .menu-languages li button{
        height: 40px;
    }

    .li-languages{
        height: auto;
    }
    
    .hamburger-social-icons{
        display: flex;
        align-items: end;
        gap: 5px;
    }

    .hamburger-social-icons a{
        padding:0 var(--html-default-padding) 0 0;
    }

    .hamburger-social-icons .menu-languages{
        height: auto;
        margin: 0px;
        padding: 0px;
    }

    .hamburger-social-icons .menu-languages .lang button{
        height: 27px;
        padding: 12px 5px;
        font-size: 14px;
        line-height: 0.2;
        border: 2px solid transparent;
        color: #e4e4e4;
        background-color: var(--color-blue8);
    }

    .hamburger-social-icons .menu-languages .lang button:hover{
        background-color: rgb(19 47 85);
        border-color: #FFF;
        color: #FFF;
        
    }

    .hamburger-social-icons .menu-languages .lang button.active{
        background-color: rgb(19 47 85);
        border-color: #FFF;
        color: #FFF;
    }
    
    .menu-grid-row nav .li-languages{
        display: none;
    }

    .hamburger-bar{
        display: grid;
        visibility: visible;
    }

    .menu-container .logo-container-grid{
        display: grid;
        grid-template-columns: 1fr;
    }
    .menu-grid-row nav{
        margin: initial;
    }
    .menu-social-icons{
        display:none;
        visibility:hidden;
    }

    .nav-itens {
        display: none;
        
    }

    .home-store{
        width: 100%;
        /* height: 93px; */
        /* margin-top: 50px; */
        display: flex;
        flex-direction: row;
        align-items: center; 
        justify-content: center;
    }

    .flex-columns{
    flex-direction: column;
    padding:initial;
    }

    .que .col-text, .que .col-elements, 
    .flex-columns .como-funciona-text, 
    .como-funciona-text .como-funciona-yt, 
    .como-funciona-text .como-funciona-text-01,
    .como-funciona-text .como-funciona-text-02{
        width: 100%;

    }

    .que .col:nth-child(1){
        order: 0;
    }

    .que .col:nth-child(2){
        order: 1;
    }

    .que .col:nth-child(3){
        order: 2;
    }

    .filmes,.slide,.faq,.negocios,.sec-contato{
        padding: initial;
    }

    .slide .section-container{
        
        min-height: initial;
        
    }

    .faq li.q {
        font-size: calc(var(--html-default-fontsize)*1);
    }

    .faq li.a {
        color: #34495e;
        background: var(--color-base-white);
        display: none;
        font-size: calc(var(--html-default-fontsize)*1);
        
        font-weight: 100;
    }

    .filmes .section-container .filmes-grid{
        
        display: grid;
        
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        justify-content: center;
        justify-items: stretch;
        gap: 10px;
    }

    .filmes-capa{
        width: initial;
        max-width: 90%;
    }

    .filmes-capa h3{
       font-size: calc(var(--html-default-fontsize)/1.4);
       font-weight: 600;
    }

    #experimente-o-moviereading{
        margin: 0px;
    }

    #experimente-o-moviereading p{
        font-size: 22px;
    }
    
    /* Página de faq */

    .faq li.a .flex{
        justify-content: center;
        flex-wrap: wrap;
    }

    #how-it-works .flex-between .flex-col:last-child #btnVideoTips{
        margin-top: 15px;
    }
}

@media(max-width: 900px){
    .box-icon{
        width: 47% !important;
    }
    
    #negocios .flex-evenly{
		gap: 15px;
		flex-direction: column;
	}

	#negocios .flex-evenly .flex-col{
		margin: 5px auto;
		width: auto;
	}

	#negocios .flex-evenly .col-img{
		min-height: auto;
	}

	#negocios .flex-evenly{
		margin-top: 0px;
	}

    #negocios .flex-evenly .flex-col:first-child .col-link{
        margin-top: 0px;
    }
}

@media(max-width: 800px){

	#about, #recursos, #security, #how-it-works, #experimente-o-moviereading, #faq, #filmes, #negocios {
		padding: 1em;
	}

	#home .flex h1{
        text-align: center;
		font-size: 1.1em;
	}

    #home .flex{
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        padding-right: 5px;
        padding-left: 5px;
    }

    #about h2{
        margin: 15px auto;
    }

    .box-icon{
        margin: auto;
        height: 130px;
    }

    .box-icon p{
        font-size: 0.9em;
    }

    #recursos{
        padding: 0px 1em;
    }

	#recursos .box-icons{
		justify-content: center;
	}

    #security .flex-2 .flex-center{
        padding: 0px;
        flex-direction: column;
        gap: 30px;
    }

	#security .flex-2 .flex-col{
		width: 100%;
		padding: 0px;
        gap: 5px;
	}

    #security .flex-2 .flex-col .col-img{
        width: 220px;
        height: auto;
    }

	#security .flex-2 .flex-col p{
		font-size: 1.2em;
        margin: 0px;
	}
    #how-it-works{
        margin-top: 40px;
    }
	#how-it-works .flex-between .flex-col:first-child p{
		font-size: 1.2em;
        margin-right: 0px;
	}

	#how-it-works .flex-between .flex-col:last-child img{
		width: 60%;
	}

	#experimente-o-moviereading p{
		font-size: 1.2em;
        margin-bottom: 10px !important;
	}

	#experimente-o-moviereading .col-tutorials{
		margin: auto;
	}

	#experimente-o-moviereading .flex-col:first-child .col-tutorials p{
		text-align: center;
	}

	#experimente-o-moviereading .flex-col:first-child .btns-modal{
		flex-direction: column;
	}

    #how-it-works .flex-between {
        justify-content: center;
    }

	#how-it-works .flex-between .flex-col:first-child{
		width: 100%;
	}

    #how-it-works .flex-between .flex-col:last-child{
        width: 100%;
    }

	.filmes-btn-cta a{
		margin: auto;
	}

	.component-default-button{
		font-size: 1em;
		margin: 0px !important;
        width: 320px;
        height: 50px;
	}

    #filmes .component-default-button{
        padding: 0px;
    }

    #experimente-o-moviereading{
        margin: auto;
    }

    #experimente-o-moviereading .section-container .desc{
        margin-bottom: 0px;
    }

    #experimente-o-moviereading .video{
        width: 100%;
        height: auto;
    }

	.filmes .section-container h2, .negocios h2{
        padding: 0px;
	}

	.owl-carousel h4 a{
		font-size: 0.6em;
	}

	.owl-carousel h4 p{
		font-size: 13px;
	}

	.owl-dots{
		height: auto;
        text-align: center;
	}

    footer{
        padding-top: 0px;
        padding-bottom: 10px;
    }

    .endless p{
        font-size: 1em;
        text-align: center;
    }
}

@media(min-width:770px){
    div[vw-access-button]{
        top: -30px;
    }
}

/* Para telas menores que 768px (tablets em modo retrato e smartphones grandes) */
@media screen and  (max-width: 767px) {
    /* Estilos para dispositivos menores que 768px */

    .hamburger-bar{
        display: grid;
        visibility: visible;
    }
	
    .box-icon{
        width: 414px !important;
        height: 130px !important;
    }
}

/* Para telas muito pequenas (smartphones) */
@media screen and (max-width: 766px) {
    /* Estilos para dispositivos menores que 480px */

    h2{
        margin: 15px auto !important;
    }

    .logo-container-grid .item-c{
        -webkit-logical-height: auto;
    }   

    header{
        padding:initial;
    }
    
    .menu-grid-row nav ul>li{
        list-style:none;
        font-size: var(--html-default-fontsize);
        font-weight: 700;
        border-bottom: 1px solid gray;
        width: 100%;
        justify-content: space-between;
        flex-direction: row;
        margin: initial;
        padding: initial;
    }

    .pine-divider{
        font-size: var(--html-default-fontsize);
        width:2px;
        font-weight: 100;
        background:rgb(19 47 85 / 25%);
        border-radius:12px;
        display: none;
        visibility: hidden;
    }

    .menu-grid-row nav>ul>li>a{
        list-style:none;
        text-align: left;
        font-size: 16px;
        display: block;
        padding-left: 20px;
        color: rgb(19 47 85);
        
        transition: var(--transition-default-delay);
    }

    .hamburger-bar{
        display: grid;
        visibility: visible;
    }

    .hamburger-social-icons a{
        padding:0 var(--html-default-padding) 0 0;
    }

    .menu-container .logo-container-grid{
        display: grid;
        grid-template-columns: 1fr;
    }

    .menu-grid-row nav{
        margin: initial;
    }

    .menu-social-icons{
        display:none;
        visibility:hidden;
    }

    .nav-itens {
       display: none;
    }

    .home-store{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center; 
        justify-content: center;
    }
    
    .flex-columns{
       flex-direction: column;
       padding:initial;
    }

    .que .col-text, .que .col-elements, 
    .flex-columns .como-funciona-text, 
    .como-funciona-text .como-funciona-yt, 
    .como-funciona-text .como-funciona-text-01,
    .como-funciona-text .como-funciona-text-02{
        width: 100%;
    
    }

    .negocios .flex-columns>div{
        text-align: center;
        width: 100%;
    }

    .negocios .flex-columns>div{
        min-height: 300px;
        padding: var(--html-default-padding) 0 calc(var(--html-default-padding)*4.5) 0;
        height: initial;
    }

    .faq li.q {
        font-size: calc(var(--html-default-fontsize)*1);
    }
    
    .faq li.a {
        color: #34495e;
        background: var(--color-base-white);
        display: none;
        font-size: calc(var(--html-default-fontsize)*1);
        font-weight: 100;
    }

    .filmes .section-container .filmes-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        justify-content: center;
        justify-items: stretch;
        gap: 10px;
    }
    
    .filmes-capa{
        width: initial;
        max-width: 100%;
        margin: 10px;
    }

    .movie-icons-group{
        gap: 0px;
        justify-content: space-evenly;
    }

    .filmes-capa h3{
       font-size: calc(var(--html-default-fontsize)/1.4);
       font-weight: 600;
    }
    .filmes-capa p{
        font-size: calc(var(--html-default-fontsize)/1.2);
    }

.paginationjs .paginationjs-pages li>a {
    min-width: 30px;
    height: 30px; 
    line-height: 30px; 
    display: block;
    font-size: 22px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: .5s;
}

.paginationjs .paginationjs-pages li.active>a {
    height: 30px;
    line-height: 30px;
    background: var(--color-blue1);
    color: #fff;
    cursor: default;
    transition: .5s;
}


.modal-content {
  
    max-width: 300px;
    
  }

  div[vw].enabled {
   
    top:0!important;
}
#icom-btn{
   /* top: 0%!important; */
   bottom: 52%!important;
   /* display: block!important; */
   min-height: 57px!important;
   /* position: sticky; */
   /* background: red; */
   /* left: 100%!important; */
}

  .acc-scrollToTop{
    width: 40px;
    height: 40px;
    right: 1px;
    background-size: 40px 40px;
    z-index: 2;
}

}


@media(max-width:700px){
	.home-store{
		flex-wrap: wrap;
        gap: 5px;
	}

	#videoTips{
		width: 100%;
		height: auto;
	}

	#about p{
		font-size: 1.2em;
        margin-bottom: 0px;
	}

    #about .col:last-child p{
        font-size: 1.2em;
    }

	#main-section .section-container{
		display: none;
	}

	#main-section .d-titles{
		display: block;
	}

	#security .flex-2 .flex-between{
		padding: 10px;
		flex-direction: column;
	}

	#how-it-works .flex-between{
		flex-direction: column;
	}

	#experimente-o-moviereading .flex-col:first-child{
		width: auto;
	}

	#experimente-o-moviereading .flex-col:last-child{
		width: auto;
		margin: 1em auto;
	}

    #experimente-o-moviereading .flex-col:last-child p{
        margin: auto;
    }

    .owl-next, .owl-prev{
        width: auto;
    }

    #negocios .flex-evenly a{
        font-size: 0.8em;
    }
}

@media(max-width: 600px){
    body{
        padding: 0px;
    }

	#home .flex-between .flex-col:first-child .home-store{
		justify-content: center;
	}
	
	#faq{
		margin-top: 0px;
        margin-bottom: 0px;
	}

	#faq .btn{
		width: 120px;
		height: 45px;
		font-size: 1em;
	}
	
	#faq .d-img img{
		width: 155px;
        height: 210px;
	}

	#faq .flex-between{
		grid-template-columns: auto 1fr;
		grid-template-rows: 100px;
	}

	#faq .flex-between .flex-col:last-child{
		justify-content: center;
	}

	.owl-carousel .h4{
		padding: 10px;
	}

	.owl-dots{
		display: block;
	}

	.faq li.a .flex video{
		width: 100%;
		height: 100%;
	}

    #filmes .justify-borders .border{
        display: none;
    }

    #press #filmescarrossellista{
        padding: 0 60px;
    }

    #mrModal{
        width: auto;
    }

	#mrModal .m-body{
		padding: 1em;
		margin: auto;
		width: 280px;
		height: fit-content;
		top: 0;
		left: 0;
        border: 1px solid var(--color-blue4);
	}

	#mrModal .m-header p{
		font-size: 17px;
	}

	#mrModal .m-header .d-titles .d-logo{
		margin-left: -3em;
	}

	#modalTutorials .m-body{
		padding: 10px;
	}

	#modalTutorials .m-body .m-section{
		width: auto;
		height: auto;
	}

	#modalTutorials .m-content{
		padding: 1em;
	}

	#modalTutorials .m-header .d-titles{
		margin: 0px;
	}

	#modalTutorials .m-header .d-titles p{
		font-size: 1.1em;
		padding: 0px;
	}

	#modalTutorials .m-content .d-video video{
		width: 100%;
		height: 100%;
	}

	#modalTutorials .m-body .d-btn{
		padding-bottom: 1em;
	}

    #btn-contact-form #opModalMr{
        margin-bottom: 0px;
        margin-right: 2.5em;
        width: 70px;
        height: 70px;
    }

    #btn-contact-form #opModalMr img{
        width: 44px;
        height: 40px;
    }

    #icom-btn{
        top: 55% !important;
    }
}