/*
 *  @Copyright (c) 2016 - 2023. XPanel® Hostiberi - Powerful CMS
 *  @Author: Hostiberi
 *  @Email: info@hostiberi.com
 *  @Filename: responsive.css
 *  @Last modified by: hostiberi
 *  @web: www.hostiberi.com
 */

.timeline .d-grid {
    grid-template-columns: repeat(5, 1fr); /* 5 columnas en pantallas grandes */
}


/* Large Devices, Wide Screens */
@media (min-width: 1600px) {
    .hide-from-cel{display:none;}
    .hide-from-tablet{display:none;}
}

/* Large Devices, Wide Screens */
@media (min-width: 1200px) and (max-width:1599px) {
    .hide-from-cel{display:none;}
    .hide-from-tablet{display:none;}

    .timeline .d-grid {
        grid-template-columns: repeat(3, 1fr)!important;
        gap: 1rem;
    }

    .timeline .box {
        width: 100%; /* Que ocupe todo el ancho de la pantalla */
    }

    .container-fluid.bg-higienista::before {
        background-size: 80%;
    }

}

/* Medium Devices, Desktops */
@media (min-width: 992px) and (max-width:1199px) {
    .hide-from-cel{display:none;}
    .hide-from-desktop{display:none;}

    .timeline .d-grid {
        grid-template-columns: repeat(3, 1fr)!important;
        gap: 1rem;
    }

    .timeline .box {
        width: 100%; /* Que ocupe todo el ancho de la pantalla */
    }

    .container-fluid.bg-higienista::before {
        background-size: 100%;
    }

}


/* Small Devices, Tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-from-desktop{display:none;}
    .hide-from-cel{display:none;}

    .timeline .d-grid {
        grid-template-columns: 1fr !important; /* 1 columna en pantallas pequeñas */
        gap: 1rem; /* Añade separación entre módulos */
    }

    .timeline .box {
        width: 100%; /* Que ocupe todo el ancho de la pantalla */
    }

    .container-fluid.bg-higienista::before {
        background-size: 80%;
    }
}

/* Small Devices Potrait */
@media (max-width: 767px) {

    .timeline .d-grid {
        grid-template-columns: 1fr !important; /* 1 columna en pantallas pequeñas */
        gap: 1rem; /* Añade separación entre módulos */
    }

    .timeline .box {
        width: 100%; /* Que ocupe todo el ancho de la pantalla */
    }

    .container-fluid.bg-higienista::before {
        background-size: 80%;
    }

    #header .row {
        --bs-gutter-x: 0 !important;
    }
    .titulo-header-right {
        color: #fff;
        margin-top:1rem;
    }

    .hide-from-tablet{display:none;}
    .hide-from-desktop{display:none;}
}

/* Extra Small Devices, Phones */
@media (max-width: 479px) {
    #header .row {
        --bs-gutter-x: 0 !important;
    }
    .titulo-header-right {
        color: #fff;
        margin-top:1rem;
    }
    .bg-custom {
        padding: 1rem;
    }
    #content-temario h4 {
        margin-top:0!important;
    }
    .nav-item.icon {
        margin-top:1rem;
        margin-left:.5rem;
        width:20%;
    }
    .nav-item.icon.cursos {
        position:absolute;
        margin-left:4rem;
    }
    .hide-from-desktop{display:none;}
    .hide-from-tablet{display:none;}

    .timeline .d-grid {
        grid-template-columns: 1fr !important; /* 1 columna en pantallas pequeñas */
        gap: 1rem; /* Añade separación entre módulos */
    }

    .timeline .box {
        width: 100%; /* Que ocupe todo el ancho de la pantalla */
    }

    .timeline .titulo-modulo {
        margin-right: 0; /* Quita el margen lateral en móvil */
    }

    .empty-space {
        display: none; /* Oculta los huecos en móvil */
    }

}

/* Custom, iPhone Retina */
@media (max-width: 320px) and (max-width: 478px) {

    #header .row {
        --bs-gutter-x: 0 !important;
    }
    .titulo-header-right {
        color: #fff;
        margin-top:1rem;
    }


    #content-temario h4 {
        margin-top:0!important;
    }

    .hide-from-desktop{display:none;}
    .hide-from-tablet{display:none;}

    .timeline .d-grid {
        grid-template-columns: 1fr !important; /* 1 columna en pantallas pequeñas */
        gap: 1rem; /* Añade separación entre módulos */
    }

    .timeline .box {
        width: 100%; /* Que ocupe todo el ancho de la pantalla */
    }

    .timeline .titulo-modulo {
        margin-right: 0; /* Quita el margen lateral en móvil */
    }

    .empty-space {
        display: none; /* Oculta los huecos en móvil */
    }

}