@media (max-width:3000px){
    .desktop{
        display: flex;
        cursor: url(imágenes/Cursores/pointer-small.webp), auto;
    }
    
    .container {
        width: 100% !important;
        margin: 0 0px;
    }
    
    .banner{
        display: flex;
        position: relative;
        height:500px;
        align-content: center;
        align-items: center;
        justify-content: center;
        top:0%;
        width: 100%;
        overflow: hidden;
    }
    
    .banner .banner_text{
        display: flex;
        flex-direction: column;
        margin-top: 8%;
        margin-left: 5px;
        position:absolute;
        width: 100%;
        background: linear-gradient(
        #000000be,
        #00000031,
        #000000be);
        padding: 40px;
        padding-top: 10px;
        padding-bottom: 20px;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;
    }

    .banner .banner_text .banner_text1{
        display: flex;
        width: fit-content;
        height: fit-content;
        overflow: hidden;
    }

        
    
    .banner img{
        width: 100%;
        height:100%;
        filter:brightness(30%) saturate(200%);
    }

    .banner_buttons{
        display: flex;
        position: absolute;
        bottom: 0%;
        width: 100%;
        background-color: #0270b1;
        justify-content: center;
        margin: none;
    }

    .banner_buttons a{
        background-color: #0270b1;
        color: #fff;
        text-decoration: none;
        padding: 10px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 20px;
        transition: 1s ease;
    }

    .banner_buttons a:hover{
        background-color: #fff;
        color: #000;
    }

    .banner_buttons2{
        display: flex;
        position: absolute;
        bottom: 9%;
        width: 90%;
        background-color: #003366;
        justify-content: center;
    }

    .banner_buttons2 a{
        background-color: #003366;
        color: #fff;
        text-decoration: none;
        padding: 10px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 20px;
        transition: 1s ease;
    }

    .banner_buttons2 a:hover{
        background-color: grey;
        color: #fff;
    }
    
    
    .cerrar_article{
        display: flex;
        position: absolute;
        justify-content: flex-end;
        cursor: url(imágenes/Cursores/link.webp), auto;
        font-size: 20px;
        width:fit-content;
        text-align: right;
        transition: .5s ease;
        z-index: 1;
        background:#ffffffb2;
        right: 3%;
        top:1%;
        border-radius: 100%;
        border: 2px solid #292929;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .cerrar_article:hover{
        background-color: #292929;
        color:#fff;
        border: 2px solid #fff;
    }

    
    .main {
        display: flex;
        padding: 20px;
    }
    .sidebar {
        width: 300px;
        margin-right: 15px;
        margin-left: 2px;
    }
    .content {
        flex: 1;
    }
    
    .media{
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 100%;
        height: 400px;
        margin:none;
    }
    
    #fondo{
        transition: 1.5s ease;
        width: 100%;
        height: 100%;
        margin:none;
    }
    
    .media .b1{
        display: flex;
        position:   relative;
        align-items: center;
        font-weight: bolder;
        font-size: 30px;
        color: #fff;
        background-color: #156eeb;
        opacity: 12%;
        cursor: url(imágenes/Cursores/link.webp), auto;
        transition: 0.5s ease;
        border:none;
        left:6.2%;
    }
    
    .media .b1:hover{
        opacity: 100%;
        background-color: #156eeb8c;
    }
    
    .media .b2{
        display: flex;
        position:   relative;
        align-items: center;
        font-weight: bolder;
        font-size: 30px;
        color: #fff;
        background-color: #156eeb;
        opacity: 12%;
        cursor: url(imágenes/Cursores/link.webp), auto;
        transition: 0.5s ease;
        border:none;
        right:6.2%;
    }
    
    .media .b2:hover{
        opacity: 100%;
        background-color: #156eeb8c;
    }
    
    
    .card {
        background-color: #ffffff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin: 40px;
        padding: 20px;
        border-radius: 10px;
        margin-right: 80px;
        margin-left: 80px;
        justify-content: center;
        align-items: center;
        align-content: center;
        display: flex;
        flex-direction: column;
        h1{
            text-align: center;
            margin-bottom: 50px;
        }
        h2{
            text-align: center;
        }
        h3 {
            color: #003366;
            margin-bottom: 10px;
            font-size: 18px;
        }
        p {
            color: #333333;
            line-height: 1.5;
            font-size: 16px;
        }
        a {
            color: #003366;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        h4{
            margin-bottom: 0vh;
            width: 60%;
            text-align: center;
            background: #156eeb;
            color: #fff;
            padding: 1.2vw;
            font-size: 1.2vw;
        }
    }
    
    .card-content{
        background-color: #f0f0f0;
        cursor: url(imágenes/Cursores/link.webp), auto;
        transition: .5s ease;
        margin:none;
        position: relative;
        display: flex;
        margin-bottom: 2px;
    }
    
    
    .card-content img{
        display: inline;
        flex-direction: row;
    }
    
    .card-content h4{
        margin-top: 0px;
        margin-bottom: 2px;
    }
    
    .card-content p{
        margin-top: 2px;
        margin-bottom: 0px;
    }
    
    .card-content:hover{
        background-color: #ccc;
    }
    
    .card_topic{
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin: 0px;
        width: 100%;
        height: 150px;
        overflow: hidden !important;
        z-index: 1;
        border-radius: 5px;
        img{
            position: relative;
            top: 16%;
            margin: 0px;
            width: 100%;
            height: 230%;
            filter: brightness(30%) blur(4px);
        }
        h2{
            position: absolute;
            z-index: 1;
            color: #fff;
            font-size:44px;
        }
    }
    

    /* Contenido de Novedades */
    
    .nov{
        display: inline-flex;
        flex-direction: row;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 400px;
        outline: 1px solid #ccc;
        border-radius: 15px;
    }

    .nov .nov_dis{
        display: inline-flex;
        flex-direction: column;
        position: relative;
        overflow-y: scroll !important;
        overflow-x: hidden;
        width: 100%;
        background-color: #cccccc36;
    }

    .nov .nov_dis::-webkit-scrollbar{
        width: 15px;
        background-color: #cccccc36;
        border-radius: 2px;
    }

    .nov .nov_dis::-webkit-scrollbar-track{
        background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
        border-radius: 3em;
    }

    .nov .nov_dis::-webkit-scrollbar-thumb{
        background: linear-gradient(
        #8fbdff,   
        #156eeb,
        #156EEB,
        #003366
        );
        border-radius: 25px;
    }

    .nov .nov_dis .nov_div{
       display: inline;
       position: relative;
       margin-top: 20px;
       margin-bottom: 20px;
       margin-left: 20px;
       transition: .5s ease;
    }

    .nov .nov_dis .nov_div h2{
        text-align: center;
        font-size: 42px;
        margin: 0px;
        margin-bottom: 5px;
        font-weight: bold;
        color: #fff;
        background:linear-gradient(
            90deg,
            #003366,
            #156EEB,
            #156eeb,
            #156EEB,
            #003366);
        border-radius: 25px;
        letter-spacing: 5px;
        margin-right: 20px;
        font-size: 52px;
    }
    
    .contenido{
        display: flex;
        flex-direction: row;
        overflow: hidden !important;
        img{
            display: flex;
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            z-index: -1000;
        }
        .card{
            width: 90%;
            margin: 35px;
            transition: .5s ease;
            cursor: url(imágenes/Cursores/link.webp), auto;
            z-index: 1;
        }
        h1 {
            margin-bottom: 2px;
        }
            .card:hover{
                transform: perspective(2000px ) rotateX(20deg );
                box-shadow: 0px 5px 5px 5px #888;
            }
    }

    .index{
        display: flex;
        flex-direction: column;
        margin: 10px;
        margin-top: 20px;
        margin-right: 0px;
        width: 400px;
        border-radius: 10px;
        background-color: #ffffff;
        align-items: center;
        height: fit-content;
    }

    .index a{
        font-size: 16px;
        margin-bottom: 10px;
        text-decoration: none;
        font-weight: bold;
        font-size: 18px;
        color: #003366;
        width: 90%;
        border-radius: 5px;
        text-align: center;
        transition: .5s ease;
    }

    .index a:hover{
        background-color: #003366;
        color: #ffffff;
    }

    .index h2{
        margin-bottom: 10px;
    }


    .expandable_item h2{
        margin-bottom: 2px;
    }

    .expandable-btn:hover, .exp-btn-content:hover{
        border: #156EEB 2px solid;
    }

    .expandable-btn i{
        margin-left: 5px;
        color: slateblue;
        font-weight: bold;
        font-size: 18px;
    }

    .exp-btn-content{
        display: none;
        flex-direction: column;
        background-color: #cccccc36 !important;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin: 5px;
        border-radius: 5px;
        overflow: hidden;
        transition: 0.5s;
        height: 0px;
        width: 0%;
        max-width: 900px;
        max-height: fit-content;
        border: #156eeb00 2px solid;
        font-weight: bold;
        p{
            text-align: justify !important;
        }
        animation:jello-horizontal .9s linear both;
        @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}};
    }

    .exp-btn-content p {
        margin-left: 15px;
    }

    .exp-btn-content img{
        aspect-ratio: 16/9;
        width: 70%;
        border-radius: 20px;
    }

    .exp-btn-content a{
        margin-top: 20px;
        font-weight: bold;
        font-size: 24px;
        text-decoration: none;
        color: #003366;
        transition: 1s ease;
    }

    .exp-btn-content a:hover{
        margin-top: 20px;
        font-weight: bold;
        font-size: 24px;
        text-decoration: underline;
        color: #156eeb;
    }

    .long_text{
        display: flex;
        position: relative;
        justify-content: center;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        background-color: #f1f1f1;
        border-radius: 5px;
        img{
            width: 50%;
            border-radius: 5px;
            margin: 10px;
            margin-left: 25%;
        }
    }

    .long_text::-webkit-scrollbar{
        width: 10px;
    }

    .long_text::-webkit-scrollbar-thumb{
        background: #ccc;
    }

    .long_text::-webkit-scrollbar-track{
        background: #e9e9e9;
    }

    .long_text p{
        margin-right: 25px;
        margin-left: 15px;
        text-align: justify;
        font-size: 20px;
    }

    .card_itemv2{
        display: inline-flex;
        position: relative;
        cursor: url(imágenes/Cursores/link.webp), auto;
        overflow: hidden !important;
        transition: 1.5s ease;
        margin-bottom: 5px;
        margin-right: 5px;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        max-width: 255px;
        max-height: 155px;
        outline: 2px solid #ffffff00;
    }

    
    .card_itemv2 video{
        display: none;
    }
    
    .card_itemv2 span{
        display: none;
    }

    .card_itemv2 img{
        aspect-ratio: 16/9;
        transition: 1.5s ease;
        filter:blur(0.2px);
        filter:blur(1.2px) brightness(0.3);
        border-radius: 5px;
        width: 110%;
        height: 100% ;
    }
    
    
    .card_itemv2:hover{
        img{
            transform: scale(1.1);
            filter:blur(0px) brightness(1);
            border-radius: 5px;
        }
        padding: none;
        outline: 2px solid #156eeb;
    }
    
    .card_itemv2 .nuevo{
        display: flex;
        position:absolute;
        top:-5%;
        left:2%;
        color:#fff;
        background-color: #156eeb;
        z-index: 1;
        border-radius: 5px;
        padding-left: 3px;
        padding-right: 3px;
        font-size: 18px;
    }
    
    .card_itemv2 h4{
        bottom:5%;
        display: flex;
        position: absolute;
        left:4%;
        color: #fff;
        z-index: 1 !important;
        font-size: 20px;
    }
    
    .card_itemv2 p{
        bottom:-1%;
        display: flex;
        position: absolute;
        left:4%;
        color: #fff;
        z-index: 1 !important;
        font-size: 14px;
    }
    
    
    
    .info img:hover{
        cursor: url(imágenes/Cursores/link.webp), auto;
    }
    
    .footer {
      background-color:#156EEB;
        /* background: linear-gradient(
            #152BEB,
            #156EEB,
            #0B3775);
        /* background-color: #003366;*/
        color: white;
        text-align: center;
        width: 100%;
        padding-bottom: 10px;
        padding-top: 5px;
    }
    
    .contacts{
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex: 1;
        position: relative;
        width:250px;
        color: white;
        margin-left:20px;
    }

    .contacts p{
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .contacts .contacts_items{
        display: inline-flex;
        flex-direction: row;
        position: relative;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
    }

    .contacts .icon{
        width: fit-content;
    }

    
    .contacts a{
        text-decoration: none;
        color: white;
    }
    
}

@media (max-width:768px){
    .card{
        h1{
            margin-left: -10% !important;
        }
        .expandable_item{
            margin: 0px;
            width: 100%;
            margin-left: -8% !important;
            .exp-btn-content{
                p{
                    width: 90% !important;
                    margin-left: -3% !important;
                }
            }
        }
        h4{
            margin-bottom: 0vh;
            margin-left: -11.5vw !important;
            width: 100% !important;
            text-align: center;
            background: #156eeb;
            color: #fff;
            padding: 1.2vw;
            font-size: 5vw !important;
        }
    }
}