﻿

.sitios-interes-container {
    width: 100%;
    font-family: Sans-serif;
    margin: 5px 0;
}

    .sitios-interes-container h1 {
        padding: 10px 20px;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        color: #616161;
    }

    .sitios-interes-container .sitios-interes {
        padding: 0 1.2em;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sitios-interes-container .sitios-item-4.top a {
        padding: 0em 2em;
    }

    .sitios-interes-container .sitios-item-3.top a {
        padding: 0em 6em;
    }

    .sitios-interes-container .sitios-item-2.top a {
        padding: 0em 14em;
    }

    .sitios-interes-container .sitios-item-1.top a {
        padding: 0em 37.5em;
    }

    .sitios-interes-container a {
        display: block;
        margin: 2px -14px;
    }

    .sitios-interes-container .row.sitios-interes div {
        display: flex;
        align-items: center;
        transform: scale(0.98,0.97);
    }


/* ------------------ Responsive --------------------*/

@media( min-width: 992px ) {

    .sitios-interes div.sitios-item-5:first-child {
        margin-left: 0.5em;
    }

    .sitios-interes div.sitios-item-5:last-child {
        margin-right: 0.5em;
    }

    .sitios-item-5 {
        width: 19.7%;
    }

}


@media( min-width: 426px ) and (max-width: 991px) {

    .sitios-interes-container .top {
        padding-left: 0em;
    }

    .sitios-interes-container .bottom a {
        padding-left: 1em;
    }

    .sitios-interes-container .top a {
        padding: 0em 6em;
    }

    .sitios-interes-container .sitios-item-4.top a {
        padding: 0em 6.5em;
    }

    .sitios-interes-container .sitios-item-3.top a {
        padding: 0em 3em;
    }

    .sitios-interes-container .sitios-item-2.top a {
        padding: 0em 6.5em;
    }

    .sitios-interes-container .sitios-item-1.top a {
        padding: 0em 21.5em;
    }

    .sitios-interes-container .sitios-interes {
        padding: 0px 0em;
    }
}


@media( max-width: 425px ) {

    .sitios-interes-container .sitios-item-1.top a,
    .sitios-interes-container .sitios-item-2.top a {
        padding: 0em 6.5em;
    }

}


