/* Make fonts responsive */
html {
    font-size: 100%;
}

@media (max-width: 768px) {
    html {
        font-size: 90%;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 80%;
    }
}

* {
    font-family: 'Lucida Handwriting Std', sans-serif;
    font-size: 1.25rem; /* 20px at 100% */
    letter-spacing: 0.25rem; /* 4px */
}

.labelfooter {
    font-size: 0.75rem; /* 12px */
    font-family: 'Lucida Handwriting Std', sans-serif;
}

#map {
    height: 25rem; /* 400px */
    width: 100%;
}

.header-color {
    background-color: #9381c1;
    color: white;
}

.header-color a {
    color: white;
}

.color-principal {
    background-color: #0c8b28;
}

.color-principal-ligth {
    background-color: #489258;
    color: white;
}

.slide-left {
    animation: slideleft 1s linear forwards;
}

@keyframes slideleft {
    0% {
        transform: translate(100px);
        opacity: 0;
    }
    100% {
        transform: translate(0px);
        opacity: 1;
    }
}

.slide-rigth {
    animation: sliderigth 1s linear forwards;
}

@keyframes sliderigth {
    0% {
        transform: translate(-100px);
        opacity: 0;
    }
    100% {
        transform: translate(0px);
        opacity: 1;
    }
}

.modal-imagen {
    width: 800px;
    height: 600px;
}

.nav-link {
    color: black;
}

header a {
    color: white;
}

.carousel a {
    color: white;
}

.card {
    border: none;
}

.table {
    border-style: none;
    border-color: transparent;
}

.table tr td {
    font-size: 1.5rem;
}

.carousel-caption-top {
    position: absolute;
    bottom: 80%;
    left: 15%;
    padding: 1.25rem;
    color: #fff;
    text-align: center;
    border-style: dotted;
    border-width: thick;
    background-color: #6e8445;
    border-radius: 100px;
}

.carousel-caption-small {
    color: #fff;
    text-align: center;
    border-style: dotted;
    border-width: thick;
    border-radius: 100px;
    margin-bottom: 10%;
}

.ir-arriba {
    display: inline-block;
    padding: 1.25rem;
    background: #024959;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    bottom: 1.25rem;
    right: 1.25rem;
    position: fixed;
}

.letraTipo {
    font-family: 'Lucida Handwriting Std', sans-serif;
}

.letraTipoPV {
    font-family: 'Lucida Handwriting Std', sans-serif;
    font-size: 0.875rem;
}

.letraBeneficio {
    font-family: 'Lucida Handwriting Std', sans-serif;
    letter-spacing: 0.25rem;
}

.letraAdvertencia {
    font-family: 'Lucida Handwriting Std', sans-serif;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    display: none;
}

.panel-body {
    height: 45.625rem;
    overflow: hidden;
    transform-origin: 188px 241px 0;
}

.t1 {
    max-height: 45.3125rem;
    overflow-y: scroll;
}

.button {
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.625rem;
}

.color-header {
    color: white;
    font-size: 1rem;
}

.color-header1 {
    color: #0c8b28;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .carousel-caption-top,
    .carousel-caption-small {
        bottom: 70%;
        left: 10%;
    }
    .ir-arriba,
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
    }
    .panel-body {
        height: 40rem;
    }
    .t1 {
        max-height: 39.0625rem;
    }
}