/* Cluster propio *******************************************************/

.caja-cluster { margin-bottom: 30px; }

.cluster {
    display: inline-block;
    vertical-align: top;
    /* border: 1px solid lightgray; */
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
    /* background-color: #eeeeee; */

    /*width: 90%;*/
    /*margin-right: 5%;*/
    /*margin-left: 5%;*/
    /*margin-bottom: 5%;*/

    /*width: 100%;*/
    margin-right: 0;
    margin-left: 0;
    /*margin-bottom: 5%;*/
}

.col3 {
    
}

.cluster a {
    font-weight: normal;
    /*color: $back_color;*/ /* #166B7F */
    display: block; /*text-decoration:none; */
}
.cluster img { width: 100%; display: block; }
.cluster div { height: 14em; background-color: #DFE7EA }  /* no podemos asignar relativo... no height 100% hasta body! */
/* la idea es igualar altura clusters... img igual así que igualamos h3 + txt */
.cluster h3:not(#X) {
    margin: 0;
    padding: .5em .5em .5em .5em;
    /*background-color: $back_color;*/ /* #dddddd */ /* #166B7F */ /* #79A2B0 */
    /*color: $text_color;*/ /* #DFE7EA */
    font-size: 1.2em;
}
.cluster p {
    /* height: 5em; /* no podemos asignar relativo... no height 100% hasta body! */
    overflow: hidden;
    margin: 0;
    padding: .5em .75em .75em .75em; }

@media screen and (min-width: 44.375em) {   /* a partir 710 px */
    .cluster {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 8px;

        width: 90%;

        -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);

        background-color: #166B7F /* #1D8787 */;
    }

    .col2 {
        width: calc((100% / 2) - 27px);
    }

    .col3 {
        /* width: calc(50% - 4px); */
        /* width: calc(50% - 8px); */
        /* width: calc((100% / 3) - 4px); */
        /* width: calc((100% / 3) - 22px); */
        width: calc((100% / 3) - 27px);
        /* width: 50%; */
        /* margin: 0 2px 8px 2px; */
        /* margin: 0 15px 15px 15px; */
        /* margin: 0 30px 30px 30px; */
    }

    .col4 {
        width: calc((100% / 4) - 27px);
    }

    .cluster.inter { background-color: #1D8787; }

    .col2:nth-of-type(2n+1){ margin: 0 50px 15px 0px; }
    .col2:nth-of-type(2n+2){ margin: 0 0 15px 0; }

    .col3:nth-of-type(3n+1){ margin: 0 40px 15px 0px; }
    .col3:nth-of-type(3n+2){ margin: 0 0 15px 0; }
    .col3:nth-of-type(3n+3){ margin: 0 0px 15px 40px; }

    .col4:nth-of-type(4n+1){ margin: 0 35px 15px 0px; }
    .col4:nth-of-type(4n+2){ margin: 0 35px 15px 0; }
    .col4:nth-of-type(4n+3){ margin: 0 0 15px 0; }
    .col4:nth-of-type(4n+4){ margin: 0 0px 15px 35px; }

    .cluster { transition: transform .2s; }
    .cluster img { transition: opacity .2s; }

    .cluster:hover { transform: scale(1.1); }
    .cluster:hover img { opacity: .85; }
    .cluster:hover a { font-weight: normal; color: #166B7F; }
}


.post-container {
    width: 100%;
}

.post-container h3 {
    padding-bottom: 10px;
}

.post-container ul {
    margin-left: 0px;
    font-weight: normal;
}

.image-box {
    width: 100%;
    height: 300px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 15px;
}

.content-box {
    width: 100%;
    padding: 10px;
}



.table-comp-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.table-comp-content {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    /*margin: 10px;*/
    text-align: center;
    background-color: white;
}

.table-comp-image {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 100%;   /* 1:1 Aspect Ratio */
    background-size: cover;
    background-position: center;
    border: 3px solid;
}

.table-comp-content h3, .table-comp-content p {
    padding: 0;
    border: 3px solid;
}

@media (min-width: 768px) {
    .table-comp-content {
        width: 30%; /* Aproximadamente un tercio del ancho */
    }

    .post-container {
        /*display: flex;
        flex-wrap: wrap;*/
    }

    .post-container h3 {
        /*padding-bottom: 0px;*/
    }

    .post-container ul {
        margin-left: 20px;
    }

    .image-box {
        display: inline-block;
        vertical-align: top;
        width: calc(30% - 20px);
        margin-bottom: 0;
    }

    .content-box {
        display: inline-block;
        vertical-align: top;
        width: calc(70% - 20px);
        padding-left: 0px; /* quito al ya tener ul contenido */
    }
}



.cluster-div-img {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 100%;   /* 1:1 Aspect Ratio SOLO PARA CUADRADAS?? para caja height = width? */
    background-size: cover;
    background-position: center;
}



.cluster-parent-tax {
    /*height: 200px;*/
}

.parent-tax-cta-img {
    background-size: cover;
    background-position: center center;
    height: 200px;

    display: flex;  /* con esto centramos hor+vert sus etiquetas contenidas */
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .cluster-parent-tax {
        /*width: 30%;*/ /* Aproximadamente un tercio del ancho */
    }
}