/******************************************
GRAN SUPERTEMA AYUDEA - Layout
Informacion del layout del Sitio
*****************************************/


/****************************************
*****************************************
LAYOUT
*****************************************
****************************************/

/**Regiones*****************
Sistema de Regiones
**************************/
/*Centrar el CONTENT*/
.region,
main{
    margin:0rem 3rem;
    text-align:center;
}

.region > *,
main .main-container{
    margin: 0rem auto;
    max-width: var(--soul--width);
    text-align:left;
}

.region-menu,
.region-footer,
.region-header,
.region-copyright{ 
    width: 100%;
    margin:0px 0px !important;
 }
 .region-footer{
     margin:var(--soul--margin--extrabig) 0px 0px !important;    
 }
.region-menu > *,
.region-footer > *,
.region-header > *{
    max-width: none;    
    margin:0px 0px !important;
}

.region-sidebar-first,
.region-sidebar-second,
.region-content
{
    margin:0px !important;
}

.not-front main .main-container .region-sidebar-first > *,
.not-front main .main-container .region-sidebar-second > *
{
    margin:0px 0px;
}


.region-menu > * {
    width: auto;
    margin:0px auto !important;
}
.region-menu > *:nth-child(1){
    flex-basis:15%;
}


/****************************************
*****************************************
LAYOUTS
*****************************************
****************************************/
.layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
.layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 1 calc(28% - var(--soul--margin--megabig ) - 1px );
}
.layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
.layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    flex: 0 1 calc(72% - var(--soul--margin--megabig));
    margin-left: var(--soul--margin--megabig);
}


/****************************************
*****************************************
SECCIONES
*****************************************
****************************************/
.not-front .region-content
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.not-front .region-content > *,
.not-front .main .field--name-body > *,
.not-front .region-postcontent > *{
    max-width: var(--soul-max-width);
    width: 100%;
}

.not-front .block-page-title-block{
    width: 100%;
    margin: 0rem auto 0px;
}






/****************************************
*****************************************
CAMPOS EN GENERAL
*****************************************
****************************************/


/**Columnas***********************************************************
Sistema de Columnas Simples
*********************************************************************/
.columns{
    display: flex; 
    justify-content: space-between;
}
.columns > div{
    /*25% menos el espaciado entre cada elemento*/
    flex-basis: calc( 25% - ((2 * var(--soul--padding)) + 2 * var(--soul--margin) + 2 * var(--soul--border--width) ) );
    margin-bottom:2rem;
}
.column{
    padding:var(--soul--padding);
}

/**FirstMaxGrid**********************************************
El Primer Elemento es agrandado, los demas son grillas de 3
************************************************************/
.firstmaxgrid .view-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.firstmaxgrid .views-row:first-child{
    flex-basis:100%;
}
.firstmaxgrid .views-row{
    flex-basis: calc(33.3% - ( 2 * var(--soul--border--width) + 2 * var(--soul--margin) ) );
    border: var(--soul--border--width) solid #707070;
    position: relative;
    margin-bottom: 2rem;
    overflow:hidden;
    height:15rem;
}

/**ListGrid*************************************************
Una lista generalmente para titulos
************************************************************/
.listgrid .view-content{
    display: flex;
    flex-wrap: wrap;
}
.listgrid .views-row{
    background:white;
    border:var(--soul--border--width) solid var(--soul--color--border);
    position:relative;
    margin: 0rem 0rem 1rem;
    flex-basis: 100%;;
}

/**Grid*************************************************
Una lista generalmente para titulos
***************************************************************/
.grid .view-content{
    display: flex;   
    flex-wrap: wrap;
    justify-content: space-between;
}
.grid .views-row{
    flex-basis: calc(33% - 3rem);
    margin: 0rem auto var(--soul--margin--big);
    background: white;
    padding: var(--soul--padding);
    position: relative;
    border:var(--soul--border--width) solid var(--soul--color--border);
}
.grid .field__label,
.grid .field__item{
    display:0.9rem;
}

/****************************************
*****************************************
SECCIONES
*****************************************
****************************************/

/**MENU*****************
Menu Principal
**************************/

/*Region Menu*/
.menu-container{
    position:sticky;
    width: 100vw;
    top: 0px;
    z-index: 2;
}
.toolbar-fixed .menu-container{
    position: sticky;
    width: 100vw;
    top: 38px;

}
.region-menu nav {
    display: flex;
    align-items: center;
    z-index: 2;
    position: relative;
    padding: 0.5rem 3rem;
    justify-content: space-between;
    width:auto;
}

/*****************************************
*****************************************
MEDIA QUERY
*****************************************
****************************************/
@media (min-width: 851px) {

}
@media (min-width: 1200px) {
    :root{
        --soul-max-width: 65rem;
    }

    .grid .views-row {
        flex-basis: calc(25% - ( 3 * var(--soul--margin--small) + 6 * var(--soul--border--width)) );
    }
}
@media (max-width: 1000px) {
    /**Columnas*****************
    La idea es que sea al 50%, quitamos el padding normal y el margin
    **************************/
    .columns{
        flex-wrap: wrap;
    }   
    .columns > div{
        /*50% menos el espaciado entre cada elemento*/
        flex-basis: calc( 50% - ((2 * var(--soul--padding)) + 2 * var(--soul--margin) ) );
        margin-bottom:2rem;
    }    
}

@media (max-width: 850px) {
    /**FirstMaxGrid**************************
    Pagina Principal
    ********************************/      
    .firstmaxgrid .views-row{
        flex-basis: calc(50% - ( 2 * var(--soul--border--width) + 2 * var(--soul--margin) ) );
        border: var(--soul--border--width) solid #707070;
        position: relative;
        margin-bottom: 2rem;
        overflow:hidden;
        height:15rem;
    }
    /**Grid**************************
    Pagina Principal
    ********************************/  
    .grid .views-row{
        flex-basis: calc(50% - 4rem);
    }

    .grid .view-content {
        margin: 0px 0rem;
    }
}

@media (max-width: 650px) {
    /**FirstMaxGrid**********************************************
    El Primer Elemento es agrandado, los demas son grillas de 3
    ************************************************************/    
    .firstmaxgrid .views-row {
        flex-basis: 100%;
    }
    /**Columns********************
    Pagina Principal
    *****************************/ 
    .columns > div {
        flex-basis: 100%;
        margin-bottom: 0rem;
    }
    .column {
        margin-left: 0;
        margin-right: 0;
        padding:0px;
    }
    /**Grid**************************
    Pagina Principal
    ********************************/     
    .grid .views-row {
        flex-basis: 100%;
    }    
}

@media (max-width: 550px) {
    .grid .views-row {
        flex-basis: 100%;
    }
}

@media (max-width: 400px) {
    .region,       
    main {
        margin: 0rem var(--soul--margin--big);
    }
    
    .grid .views-row{
        flex-basis: calc(100%);
        margin: 0px 0rem 1rem !important;
    }

    table  {
        border-collapse: collapse;
        margin: 1.5em -2rem;
        table-layout: fixed;
        text-align: left;
        width: calc(100% + 4rem);
    }

}

@media (max-width: 250px) {
    .region,       
    main {
        margin: 0rem var(--soul--margin);
    }  
    table  {
        border-collapse: collapse;
        margin: 1.5em -1rem;
        table-layout: fixed;
        text-align: left;
        width: calc(100% + 2rem);
    }
}