/* =====================================================================
   Celular Modo vertical MAX 480px
   ===================================================================== */

@media (max-width:480px) {

    /*  NAVBAR / MENU   */
    .navbar-brand .logo {
        width: 100px;
        height: auto;
    }

    .navbar-nav .nav-item.active .nav-link {
        border-bottom: none;
        color: #003479 !important;
        border-left: 3px solid #003479;
        padding-left: calc(1rem - 3px);
        font-size: 12px;
    }

    .navbar-dark .navbar-nav .nav-link {
        font-family: 'Arial Bold', sans-serif !important;
        font-weight: 700 !important;
        font-size: 15px;
    }

    .btn-red-osel {
        font-size: 12px !important;
        padding: 5px 10px !important;
        margin: 4px !important;
    }

    .ubica-tienda .btn-nav {
        height: 70px !important;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
    }

    .icono-mapa {
        font-size: 18px !important;
    }

    .ubica-tienda span {
        font-size: 11px !important;
        max-width: 55px !important;
    }

    .navbar-expand-lg > .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    #containers nav.navbar {
        position: relative !important;
        top: 0px;
        margin-top: 0px;
    }

    .navbar-collapse ul.navbar-nav {
        padding-left: 0px;
    }

    /*  CAROUSEL - HEADER   /   SLIDE   PRINCIPAL   */
    #header-slide, #header-slide .carousel, #header-slide .carousel-inner, #header-slide .carousel-item {
        height: 300px !important;
        min-height: 0 !important;
    }

    .caption-slide-title {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .caption-slide-subtitle {
        font-size: 11px;
    }

    #header-slide .carousel-item img, #header-slide .carousel-item iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .carousel-caption-left {
        width: 55%;
        left: 3%;
    }

    .caption-slide-desc {
        display: none;
    }

    .btn-slide-primary, .btn-slide-outline {
        font-size: 9px;
        padding: 5px 10px;
    }

    /*  SECCION PROMOCIONES */
    .card-promo {
        height: 80px;
    }

    .card-promo-title {
        font-size: 10px;
    }

    .card-promo-ver {
        display: none;
    }

    .card-promo-play {
        width: 22px;
        height: 22px;
    }

    #section-promociones {
        padding-top: 2px;
        margin-top: 0px;
    }

    /*  SECCION ¿QUE ESTAS BUSCANDO HOY?    */
    .row-qbh {
        flex-direction: column;
        gap: 12px;
    }

    .card-qbh {
        max-width: 100%;
        min-width: 0;
        max-height: 150px;
    }

    .card-qbh-img {
        width: 90px;
    }

    /*  SECCION EXPLORA POR ESPACIO */
    .explora-section {
        padding: 30px 0 40px;
    }

    .explora-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .explora-titulo {
        font-size: 26px;
    }

    .explora-bg-img {
        display: none;
    }

    .explora-card {
        height: 150px;
        max-height: 8.5rem;
    }

    .explora-card-nombre {
        font-size: 14px;
    }

    .explora-card-desc {
        display: none;
    }

    /*  SECCION IDEAS   -   TENDENCIAS  */
    #section-tendencias .tendencia-item {
        padding: 10px 5px;
    }

    #section-tendencias .tendencia-item img {
        width: 90%;
        max-width: 120px;
        height: 70px;
        margin-bottom: 10px;
    }

    #section-tendencias .tendencia-item p {
        font-size: 14px;
        text-align: center;
    }

    /*  QUIENES SOMOS   */
    .qs-hero {
        position: relative !important;
        width: 100% !important;
        height: 150px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .qs-hero > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .qs-hero-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 3% !important;
        transform: translateY(-50%) !important;
        width: 55% !important;
        text-align: left !important;
        z-index: 10 !important;
    }

    .qs-titulo {
        display: block !important;
        font-size: 13px !important;
        margin: 0 0 4px 0 !important;
    }

    .qs-descripcion {
        display: none !important;
    }

    /*  FOOTER PRINCIPAL & FIJO */
    #footer-fijo {
        display: none;
    }

    #btn-wsp-fijo {
        bottom: 15px;
        right: 15px;
        width: 46px;
        height: 46px;
        font-size: 24px;
    }

    .footer-info {
        text-align: center;
    }

    .logo-osel {
        height: 40px;
        margin-bottom: 5px;
    }

    .hecho-mexico {
        height: 65px;
        margin-bottom: 5px;
    }

    #footer h5 {
        font-size: 13px !important;
    }

    #footer .footer-link, #footer .texto-footer {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .img-oselito {
        max-height: 110px;
        margin-top: -10px;
    }
}


/* =====================================================================
   Celular Modo horizontal MIN: 481px and MAX: 767px
   ===================================================================== */

@media (min-width:481px) and (max-width:767px) {
    /*  NAVBAR  /   MENU    */
    .navbar-dark .navbar-nav .nav-link {
        font-family: 'Arial Bold', sans-serif !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        padding: 0.7rem 0.3rem !important;
    }

    .btn-red-osel {
        font-size: 11px !important;
        padding: 5px 8px !important;
        height: auto !important;
    }

    .ubica-tienda .btn-nav {
        height: 70px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        gap: 4px !important;
    }

    .icono-mapa {
        font-size: 16px !important;
    }

    .ubica-tienda span {
        font-size: 10px !important;
        max-width: 50px !important;
    }

    .navbar-brand img {
        width: 140px !important;
        height: auto !important;
    }

    /*  DROPDOWN    */
    .dropdown-menu {
        color: #ffffff;
        background-color: black;
        padding: 0px;
    }

    .dropdown-menu.multi-column {
        width: 100% !important;
        background: rgb(0 0 0 / 98%) !important;
    }

    /*  CAROUSEL  -   HEADER  /   SLIDE   PRINCIPAL   */
    #header-slide, #header-slide .carousel, #header-slide .carousel-inner, #header-slide .carousel-item {
        height: 50vh !important;
        min-height: 0 !important;
        margin-top: 2% !important;
    }

    #header-slide .carousel-item img, #header-slide .carousel-item iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .carousel-caption-left {
        width: 52%;
    }

    .caption-slide-title {
        font-size: 18px;
    }

    .caption-slide-desc {
        font-size: 12px;
    }

    .btn-slide-primary, .btn-slide-outline {
        font-size: 11px;
        padding: 6px 14px;
    }

    /*  SECCION PROMOCIONES */
    .col-promo {
        flex: 1 1 calc(50% - 4px);
        max-width: calc(50% - 4px);
    }

    .card-promo {
        height: 105px;
    }

    .card-promo-title {
        font-size: 11px;
    }

    /*  SECCION IDEAS   -   TENDENCIAS  */
    #section-tendencias {
        min-height: auto;
    }

    #section-tendencias .tendencia-item {
        padding: 12px 8px;
    }

    #section-tendencias .tendencia-item img {
        width: 80%;
        max-width: 200px;
        height: 90px;
        margin-bottom: 15px;
    }

    #section-tendencias .tendencia-item p {
        font-size: 18px;
        text-align: center;
    }

    /*  QUIENES SOMOS   */
    .qs-hero, .qs-hero img {
        height: 300px !important;
        min-height: 0 !important;
    }

    .qs-hero img {
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .qs-titulo {
        font-size: 3vw;
    }

    .qs-descripcion {
        font-size: 1.3vw;
    }

    .qs-hero-overlay {
        left: 3%;
        width: 42%;
    }

    /*  FOOTER  PRINCIPAL   &   FIJO    */
    #footer-fijo {
        display: none;
    }

    .logo-osel {
        height: 45px;
    }

    .hecho-mexico {
        height: 55px;
    }

    .icono-wsp {
        height: 40px;
    }

    #footer h5 {
        font-size: 15px;
    }

    #footer .footer-link, #footer .texto-footer {
        font-size: 11px;
        line-height: 1.3;
    }

    .img-oselito {
        max-height: 180px;
        margin-top: -10px;
    }

}

/* =====================================================================
   Tablets  MIN:768px and MAX:1024px
   ===================================================================== */

@media (min-width:768px) and (max-width: 1024px) {
    /*  NAVBAR  /    MENU   */
    .navbar-dark .navbar-nav .nav-link {
        font-family: 'Arial Bold', sans-serif !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        padding: 0.7rem 0.3rem !important;
    }

    .btn-red-osel {
        font-size: 11px !important;
        padding: 5px 8px !important;
        height: auto !important;
    }

    .ubica-tienda .btn-nav {
        height: 70px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        gap: 4px !important;
    }

    .navbar-brand img {
        width: 140px !important;
        height: auto !important;
    }

    /*  SECCION EXPLORA POR ESPACIO     */
    .explora-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .explora-bg-img {
        width: 50%;
        top: -10px;
    }

    .explora-titulo {
        font-size: 32px;
    }

    /*  CAROUSEL    -   HEADER  /   SLIDE   PRINCIPAL   */
    #header-slide, #header-slide .carousel, #header-slide .carousel-inner, #header-slide .carousel-item {
        height: 300px !important;
        min-height: 0 !important;
    }

    .caption-slide-title {
        font-size: 18px;
    }

    /*  SECCION IDEAS   -   CAROUSEL DE IDEAS Y COLORES */
    .img-ideas-section {
        width: 100% !important;
        height: 450px;
        object-fit: cover;
        object-position: center center;
        text-align: center;
    }

    .bg-ideas a.nav-link {
        display: block;
        justify-content: center;
        align-items: center;
        height: 9vh;
        border: 1px solid #4a4a4a1a;
        color: #fff;
        text-transform: uppercase;
        font-size: 10.5px;
        padding: 3.5% 5%;
    }

    /*  FOOTER  PRINCIPAL   &   FIJO    */
    .logo-osel {
        height: 45px;
    }

    .hecho-mexico {
        height: 55px;
    }

    #footer h5 {
        font-size: 15px;
    }

    #footer .container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .footer-fijo-titulo {
        font-size: 11px;
    }

    .footer-fijo-subtitulo {
        font-size: 10px;
    }
}

/* =====================================================================
   Computadora  MIN:1025px and MAX:1440px
   ===================================================================== */

@media (min-width:1025px) and (max-width:1440px) {
    /*  NAVBAR  /   MENU    */
    .navbar-dark .navbar-nav .nav-link {
        font-family: 'Arial Bold', sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 0.7rem 0.35rem !important;
    }

    .btn-red-osel {
        font-size: 14px !important;
        padding: 6px 12px !important;
        height: auto !important;
    }

    .ubica-tienda .btn-nav {
        height: 70px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        gap: 5px !important;
    }

    .icono-mapa {
        font-size: 20px !important;
    }

    .ubica-tienda span {
        font-size: 12px !important;
        max-width: 60px !important;
    }

    .navbar-brand img {
        width: 130px !important;
        height: auto !important;
    }

    /*  CAROUSEL    -   HEADER  /   SLIDE   PRINCIPAL   */
    #header-slide, #header-slide .carousel, #header-slide .carousel-inner, #header-slide .carousel-item {
        height: 400px !important;
    }

    #header-slide .carousel-item img, #header-slide .carousel-item iframe {
        width: 100%;
        object-fit: cover;
        display: block;
    }

    /*  SECCION IDEAS   -   CAROUSEL DE IDEAS Y COLORES */
    .img-ideas-section {
        width: 70% !important;
        height: 350px;
        object-fit: cover;
        object-position: center center;
        text-align: center;
    }

    #carousel-ideas-color .carousel-item {
        height: 100%;
        margin-left: 160px;
    }

    /*  SECCION IDEAS   -   TENDENCIAS  */
    #section-tendencias {
        min-height: auto;
    }

    #section-tendencias .tendencia-item img {
        width: 75%;
        max-width: 230px;
        height: 120px;
    }

    #section-tendencias .tendencia-item p {
        font-size: 26px;
    }

    /*  QUIENES SOMOS   */
    .qs-hero, .qs-hero img {
        height: 400px !important;
    }

    .qs-hero img {
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /*  FOOTER  PRINCIPAL   */
    .logo-osel {
        height: 55px;
    }

    .hecho-mexico {
        height: 65px;
    }

    .icono-wsp {
        height: 46px;
    }

    #footer > .container {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    #footer h5 {
        font-size: 18px;
    }

    #footer .footer-link, #footer .texto-footer {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* =====================================================================
   Pantallas 2K MIN:1441px and  MAX:1920px
   ===================================================================== */

@media (min-width: 1441px) and (max-width:1920px) {
    /*  NAVBAR  -   MENU    */
    .navbar-dark .navbar-nav .nav-link {
        font-family: 'Arial Bold', sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 0.7rem 0.35rem !important;
    }

    /*  CAROUSEL    -   HEADER  /   SLIDE   PRINCIPAL   */
    #header-slide, #header-slide .carousel, #header-slide .carousel-inner, #header-slide .carousel-item {
        height: 560px !important;
    }

    #header-slide .carousel-item img, #header-slide .carousel-item iframe {
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /*  SECCION PROMOCIONES */
    .card-promo {
        height: 165px;
    }

    .card-promo-title {
        font-size: 14px;
    }

    /*  SECCION IDEAS   -   CAROUSEL DE IDEAS Y COLORES */
    .img-ideas-section {
        width: 95% !important;
        height: 60vh;
        object-fit: cover;
        object-position: center center;
        text-align: center;
    }

    #carousel-ideas-color .carousel-item {
        height: 100%;
        margin-left: 0px;
    }

    /*  SECCION IDEAS   -   TENDENCIAS  */
    #section-tendencias .tendencia-item img {
        width: 75%;
        max-width: 280px;
        height: 170px;
    }

    #section-tendencias .tendencia-item p {
        font-size: 30px;
    }

    /*  SECCION PRODUCTOS   */
    .titulo-soluciones {
        font-size: 38px;
    }

    .cont-productos {
        height: 900px;
        overflow: auto;
        overflow-x: hidden;
    }

    .lista-productos {
        height: 20vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    /*  QUIENES SOMOS   */
    .qs-hero, .qs-hero img {
        height: 560px !important;
    }

    .qs-hero img {
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .qs-titulo {
        font-size: 2.1vw;
    }

    .qs-descripcion {
        font-size: 0.82vw;
    }

    .qs-item-isotipo {
        width: 130px;
    }

    /*  FOOTER  PRINCIPAL   */
    .logo-osel {
        height: 65px;
    }

    .hecho-mexico {
        height: 75px;
    }

    .icono-wsp {
        height: 52px;
    }

    #footer h5 {
        font-size: 20px;
    }

    #footer .footer-link, #footer .texto-footer {
        font-size: 16px;
        line-height: 1.6;
    }

    .footer-bottom {
        padding: 12px 0 !important;
        margin-top: -12px;
    }
}

/* =====================================================================
   Pantallas 4K     MIN:1921px and MAX:2560px
   ===================================================================== */

@media (min-width: 1921px) and (max-width:2560px) {
    /*  NAVBAR  /   MENU    */
    .navbar-dark .navbar-nav .nav-link {
        font-family: 'Arial Bold', sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 0.7rem 0.35rem !important;
    }

    /*  CAROUSEL    -   HEADER  /   SLIDE   PRINCIPAL   */
    #header-slide, #header-slide .carousel, #header-slide .carousel-inner, #header-slide .carousel-item {
        height: 640px !important;
        overflow: hidden !important;
    }

    #header-slide .carousel-item img, #header-slide .carousel-item iframe {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /*  SECCION IDEAS   -  TENDENCIAS    */
    #section-tendencias .tendencia-item img {
        width: 90% !important;
        max-width: 520px !important;
        height: 320px !important;
        object-fit: cover !important;
    }

    #section-tendencias .tendencia-item p {
        font-size: 52px !important;
        line-height: 1.2 !important;
    }

    #section-tendencias .tendencia-item {
        padding: 20px !important;
    }

    /*  SECCION PRODUCTOS   */
    .titulo-soluciones {
        font-size: 60px !important;
    }

    /*  QUIENES SOMOS   */
    .qs-hero {
        height: 640px !important;
        overflow: hidden !important;
    }

    .qs-hero img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    .qs-titulo {
        font-size: 2.1vw;
    }

    .qs-descripcion {
        font-size: 0.82vw;
    }

    /*  FOOTER  PRINCIPAL   */
    .logo-osel {
        height: 80px;
    }

    .hecho-mexico {
        height: 95px;
    }

    .icono-wsp {
        height: 65px;
    }

    #footer h5 {
        font-size: 24px;
    }

    #footer .footer-link, #footer .texto-footer {
        font-size: 18px;
        line-height: 1.8;
    }

    .footer-bottom {
        padding: 14px 0 !important;
        margin-top: -14px;
    }
}

/* =====================================================================
   Pantallas 5K     MIN:2561px
   ===================================================================== */

@media (min-width:2561px) {
    /*  NAVBAR  /   MENU    */
    .navbar-dark .navbar-nav .nav-link {
        font-family: 'Arial Bold', sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding: 0.7rem 0.35rem !important;
    }

    #topBar {
        padding-inline: 20% !important;
    }

    /*  CAROUSEL    HEADER  /   SLIDE   PRINCIPAL   */
    #header-slide .carousel-inner {
        height: 50% !important;
        padding-inline: 20% !important;
    }

    /*  SECCION IDEAS   -   TENDENCIAS  */
    #section-tendencias .tendencia-item img {
        width: 90% !important;
        max-width: 520px !important;
        height: 320px !important;
        object-fit: cover !important;
    }

    .section-qbh {
        padding: 10px 20% 15px !important;
    }

    #section-tendencias .tendencia-item p {
        font-size: 52px !important;
        line-height: 1.2 !important;
    }

    #section-tendencias .tendencia-item {
        padding: 20px !important;
    }

    .explora-section {
        padding-inline: 20%;
    }

    .section-slns {
        padding-inline: 20%;
    }

    /*  SECCION PRODUCTOS   */
    #section-prd {
        padding-inline: 20% !important;
    }

    .titulo-soluciones {
        font-size: 60px !important;
    }

    #productos-secction {
        padding-inline: 20% !important;
    }

    /*  QUIENES SOMOS   */
    .qs-hero {
        height: 640px !important;
        overflow: hidden !important;
    }

    .qs-hero img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    #quienes-somos {
        padding-inline: 20% !important;
    }

    /*      COLORARIO    */
    .colorario-hero-overlay {
        padding-inline: 20% !important;
    }

    /*  FOOTER  PRINCIPAL   */
    .logo-osel {
        height: 80px;
    }

    .hecho-mexico {
        height: 95px;
    }

    .icono-wsp {
        height: 65px;
    }

    #footer h5 {
        font-size: 24px;
    }

    #footer .footer-link, #footer .texto-footer {
        font-size: 18px;
        line-height: 1.8;
    }

    .footer-principal {
        padding-inline: 20% !important;
    }
}