/* Inicio de estilos de header */
@media only screen and (min-width:800px){
    .menu-toggle{
        display: none;
    } 

    .menu{
        height: auto;
        position: relative;
        background: transparent;
        float: right;
        margin-right: 140px;
        margin-top: 20px;
        clip-path: initial;
    } 

    .menu ul{
        color: #6A6A6A;
    }

    .menu li{
        display: inline-block;
        border: none;
    }

    .menu a{
        color: inherit;
        padding: 0;
        margin-left: 3em;
        font-weight: 600;
    }

    .menu a:hover{
        color: #444444;
        background: transparent;
    }

    .menu-active{
        color: #0FB875;
    }
}

@media screen and (max-width:800px){
    .logo{
        margin: 0px 0px 0px 20px;
    }   

    /*buscador de contenido*/  
    #ctn-icon-search{
        position: absolute;
        right: 80px;
    }
    /*Página Créditos*/ 
    #credito p {
        width: 90%;
        margin: auto;
        padding: 7px;
    }
}

@media screen and (max-width: 650px){
    #ctn-bars-search{
        background: #fff;
    }

    .flex-search{
        width: 100%;
    }

    #exit{
        margin-left: 20px;
    }

    #local{
        margin-right: 20px;
    }

    .titulo{
        font-size: 19px;
        text-align: center;
        left: auto;
    }
}
  
/* Fin de estilos de header */

@media only screen and (min-width:700px) {
    .cajaPri{
        width: 500px;
        height: 500px;
        font-size: 14px;
        background-position: center;
        text-align: center;
        position:relative;
        left: 50%;
        top:30%;
    }

    /* Modal de filtros*/
    .the_modal {
        display: none;
    }
}
    
@media screen and (min-width:1024px) {
    .cajaPri{
        width: 500px;
        height: 500px;
        font-size: 14px;
        background-position: center;
        text-align: center;   
    }
}

@media only screen and (max-width:700px){
    /* Estilos botón de inicio*/
    .conter h1{
        margin: 80px 20px 30px;
        font-size: 35px;
    }

    .conter img{
        width: 70%;
    }

    .conter p{
        margin: 40px 20px 20px;
        font-size: 16px;
        line-height: 19px;
    }
    /* Estilos ordenar por y filtros mobile*/
    .btn-controls{
        display: none;
    }

    .content-cb{
        display: none;
    }

   .content-order {
        padding: 0;
        text-align: left;
        height: 35px;
    }

    .caja {
        margin-left: 20px;
        width: 42%;
        float: left;
    }

    #orden {	
        width: 100%;
    }
    
    .content-filtro-m{
        display: block;
    }

    #letritas {
        width: 42%;
        left: 20px;
    }

    /* Estilos de cards data*/
    .alldata{
        margin: 10px;
    }

    .person{
        margin:15px 10px;
    }

    /* Modal de filtros*/
    .the_modal {
        color:#6A6A6A;
        padding-top: 90px;
        position: fixed; 
        z-index: 2; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: white;
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; 
        padding: 20px;
        border: 1px solid #888;
        width: 80%; 
    }

    .modal_header {
        padding: 25px;
    }

    #close  {
        content:url(imagen/icon_close.png);
        display: table-cell;
        padding: 20px;
        text-align: center;
        background-color:white;
        float: right;
        cursor: pointer;
    }

    .title-filter {
        width: 50%;
        padding: 20px;
        color: #459AE2;
        font-size: 18px;
        font-weight: bold;
    }

    .accordion {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        max-width: 1000px;
    }

    .accordion-item-all {
        text-align: left;
        background-color: white;
        padding: 8px 14px;
        font-size: 16px;
        border-bottom: 1px solid #D9D9D9;
        display: block;
        cursor: pointer;
    }

    .accordion-item-header {
        text-align: left;
        background-color: white;
        padding: 8px 14px;
        font-size: 16px;
        border-bottom: 1px solid #D9D9D9;
        display: block;
        cursor: pointer;
    }

    .accordion-item-header::after   {
        content: url(imagen/icon_arrow_down.png);
        float: right;
    }

    .accordion-item-header.active::after {
        transform: rotate(180deg);
    }

    .accordion-item-body {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

    .accordion-item-body-content {
        padding: 15px 30px;
        line-height: 1.5rem;
    }

    .listElements li {
        display: list-item;
        margin: 0;
    }

    /*Sección de capítulos*/
    .retrato {
        width: 90%;
        max-width: 90%;
    }
}

@media screen and (max-width:750px){
    /* Estilos de cards data*/
    .alldata{
        margin: 10px;
    }

    .app-title{
        font-size: 20px;
        margin-bottom: 20px;
    }

    .person{
        margin:15px 10px;
    }

    .photo {
        width: 130px;
    }

    .info{
        height: 160px;
    }

    .name{
        margin: 5px 10px;
        font-size: 16px;
    }
    
    .text-datos{
        font-size: 14px;
    }
}

@media screen and (max-width:400px){
    /*Sección de capítulos*/ 
    .retrato {
        padding: 10px;
    }
    
    .imas {
        margin-right: 10px;
    }

    .text-cap{
        font-size: 13px;
        margin-bottom: 3px;
    }

    .photopar{
        margin-top: 3px;
        width: 25px;
    }
    .logo img{
        width: 90%;
    }
    
    #container-header{
        padding: 5px 0;
    }

    #ctn-icon-search{
        width: 9%;
    }
    
    .menu-toggle{
        padding: 15px;
    }
}

@media screen and (min-width: 401px) and (max-width:1000px){
    /*Sección de capítulos*/ 
    .photopar{
        width: 30px;
    }

    .text-cap{
        font-size: 14px;
        margin-bottom: 3px;
    }
}