:root{
    --bg-color: #FAF9F9;
    --light-color: #fff;
    --main-color:#516AC3; 
    --main-color-90: rgb(81 106 195 / 90%);   
    --second-color: #5DEBBD;
    --dark-color: #1E2744;
    --gray-color: #757575;
    --max-width-container: 1200px;
    --primary-font: 'Archivo', sans-serif;
    --secondary-font: 'Lato', sans-serif;    
}

body {
    background:#fff;
    font-family: var( --primary-font );
}
.hp-page {
    width:100%;
    max-width: unset;
}
.hp-listing__image {
    display: none;
}
.hp-page__header .hp-directory__title{
    background-image: url(../banners/Banners_Desktop_Int.webp);
    background-repeat:no-repeat;
    background-position-x: center;;
    background-size:cover;
    height:400px;
    position:relative;
    width: 100%;
    margin-bottom:3rem;
}
.hp-page__header .hp-directory__title h1 {
    color:#fff;
    position:absolute;
    right:5%;
    bottom:5%;
    font-size:4rem;
    font-weight: 900;
}

.hp-page__header .hp-directory__subtitle {
    max-width: var(--max-width-container);
    margin:0 auto;
}
.hp-page__header .hp-directory__subtitle h2 {
    font-size:2rem;
    font-weight: bold;
    margin-bottom:1rem;
    line-height:1.1;
}
.hp-page__header .hp-directory__subtitle p {
    font-size:1.3rem;
    color: var(--gray-color);
}
.site-main {
    padding:0;        
    margin:auto;
    width: 100%;
    background:#fff;
}

.directory {
    display: flex;;
    gap: 2rem;
    max-width:var(--max-width-container);
    margin:auto;
    margin-bottom:50px;
}
.directory .hp-page__content {
    width:100%;
    flex:1;
}

.hp-listing-head {
    font-weight: bold;;
    border-bottom:1px solid var(--gray-color);
}
.hp-listing-head h4 {
    font-weight: bold;;
}

.hp-widget--listing-filter {
    background:#f0f0f0;
    border-radius:20px;
    padding:10px;    
    font-size:.9rem;
    width:200px;
}
.hp-listing__content {
    display: flex;
    gap:1rem;
    color:var(--gray-color);
    font-size:.9rem;
}

.hp-grid__item {
    border-bottom:1px solid #f0f0f0;
    padding-bottom:10px;
    margin-bottom:10px !important;
}

.hp-listing__title {
    width:20%;
    font-size:.9rem;
    margin-bottom:0 !important;
    color:var(--gray-color);
    font-family: var(--primary-font);
    font-weight: normal;;
}
.hp-listing__details {
    display: flex;
    width:100%;
    flex:1;
}
.hp-listing__attributes {
    display:flex;
    flex:1;   
}
.hp-listing__attributes--primary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.hp-listing__attributes>.hp-row {
    display:flex;
    gap:1rem;
}
.hp-listing__attributes a {
    color:var(--gray-color);
}
.hp-field__label {
    color:var(--main-color);
    text-transform: uppercase;
    font-weight: 700;;
}

.hp-listing--view-block .hp-listing__attributes--primary {
    display: flex;;
}
.hp-listing--view-block .hp-listing__attributes--primary:not(:last-child){
    margin-right: 0 !important;
}
.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute {
    font-size:.9rem;
    color:var(--gray-color);
    width:15%;
    display: flex;
    height:100%;
    justify-content: flex-start;
}

.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute--city {
    margin-right:.2rem !important;
}
.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute--website {
    width:5%;
}
.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute--email {
    width:30%;
    font-size:0.8rem;
}
.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute--especialidad {
    font-size:0.8rem;
}
.hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute:not(:last-child) {
    margin-right:0 !important;
}

.hp-modal .hp-form__button {
    font-family: var(--primary-font) !important;
    background-color: var(--second-color);
    border:0;
    padding: 15px 60px;
    border-radius: 30px;
    cursor:pointer;
    text-transform:uppercase;
}


.hp-button--mobile.hp-button--listing-filter {
    position: fixed;
    right:0;
    top: 40%;
    border:0;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    display: block;
    width: auto !important;
    padding:50px 10px;
    box-shadow: 1px 0px 5px rgba(0,0,0,.5);
}

.hp-button--mobile.hp-button--listing-filter .hp-icon {
    display: none;
    background-image:url(../svg/icon-filter.svg);
    background-repeat:no-repeat;
    width:25px;
    height:25px;
    background-size:contain;
    margin:0;
}

.hp-button--mobile.hp-button--listing-filter span {
    display: block;
    text-transform: uppercase;
}

.hp-pagination .nav-links {
    padding:.5rem;
}
.hp-pagination .nav-links a {
    color:var(--gray-color);
    text-decoration: none;
}
.nav-links svg {
    fill:var(--gray-color);
    width: 10px;
}
.nav-links .prev {
    text-align:left;
    
}
.nav-links .next {
    text-align:right;   
}
.hp-pagination .nav-links .page-numbers {
    padding: 0px 8px;
    border-radius: 5px;
    background-color: #f0f0f0;
    font-family:var(--primary-font);
    font-size:1rem !important;
    color: var(--gray-color);
    text-decoration: none;
    transition: all .2s;
    margin-right:.5rem !important;
}
.hp-pagination .nav-links .page-numbers:hover {
    background-color: var(--main-color);
    color:#fff;
}
.hp-pagination .nav-links .page-numbers.current {
    background-color:var(--main-color);
    color:#fff;
}
.hp-pagination .nav-links .page-numbers:not(:last-child) {
    margin-right:2rem;
}
.listing--view-block .hp-listing__header {
    display: none;
}

.select2-results__option {
    font-size:0.9rem;
}

@media screen and (max-width:768px) {

    .site-main {
        padding-top:0px;
    }

    .hp-page__header .hp-directory__subtitle {
        padding:0 20px;
    }
    .hp-listing__content {
        flex-direction:column;
        gap:0;
    }
    .hp-listing-head {
        display: none;
    }

    .directory {
        padding:0 20px;
        flex-direction: column;
        gap:0;
    }
    .hp-page__header {
        margin: 0 !important; 
    }
    .hp-listing__title {
        width:100%;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 1.2rem;
        margin:0;
    }
    .hp-listing__details {
        flex-direction:column;
    }
    .hp-listing--view-block .hp-listing__actions--primary, 
    .hp-listing--view-block .hp-listing__attributes--primary {
        flex-direction:column;
        align-items:flex-start !important;
    }
    .hp-listing__attributes>.hp-row {
        flex-direction: column;
        gap:0;
    }
    .hp-page__header .hp-directory__title{
        background-image: url(../banners/Banners_Mobile_intB.webp);
        background-repeat:no-repeat;
        background-position-x: center;;
        background-size:cover;
        
    }
    .hp-listing--view-block .hp-listing__attributes--primary .hp-listing__attribute {
        width:100% !important;
    }
    .hp-pagination .nav-links .page-numbers span{
        display: none;
    }
}