@media (max-width:3000px){
.desktop{
    display: flex;
    cursor: url(imágenes/Cursores/pointer-small.webp), auto;
}

.mostrador{
    display: inline-flex;
    position: relative;
    width: 99%;
    max-height: 750px;
    padding: 5px;
    border-radius: 0px;
    margin: 0px;
    background: #eee;
}

.item{
    max-width: 200px;
    width: 100%;
    margin: 5px;
    display: flex;
    flex-direction: column;
    background: #fff;
    align-items: center;
    align-content: center;
    border: 2px solid #eee;
    cursor: pointer;
    transition: .5s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 2px #ccc;
    h2{
        display: flex;
        font-size: 1.5vw;
        justify-content: center;
        text-align: justify;
        margin-bottom: 2px;
        width: 50%;
        background: none !important;
    }
    h5{
        margin-top: 0px;
    }
    p{
        font-size: 1dvw;
        display: flex;
        position: relative;
        bottom: 0%;
        font-weight: bold;
        margin-top: 5px;
        width: 70%;
        background: rgb(172, 255, 47);
        border: 2px solid #ddd;
        color: #555 !important;
        text-align: center;
        justify-content: center;
    }
    img{
        max-width: 200px;
        max-height: 300px;
        width: 100%;
        height: 100%;
        margin: 0px;
        transition: .5s ease;
        filter: blur(.8px) brightness(80%);
    }
}

.materias{
    max-width: 200px;
    width: 100%;
    margin: 5px;
    display: flex;
    flex-direction: column;
    background: #fff;
    align-items: center;
    align-content: center;
    border: 2px solid #eee;
    cursor: pointer;
    transition: .5s ease;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 2px #ccc;
    h2{
        display: flex;
        font-size: 1.5dvw;
        justify-content: center;
        text-align: justify;
        margin-bottom: 2px;
        width: 50%;
        background: none !important;
    }
    h5{
        margin-top: 0px;
    }
    p{
        font-size: 1dvw;
        display: flex;
        position: relative;
        bottom: 0%;
        font-weight: bold;
        margin-top: 5px;
        width: 70%;
        background: rgb(172, 255, 47);
        border: 2px solid #ddd;
        color: #555 !important;
        text-align: center;
        justify-content: center;
    }
    img{
        max-width: 200px;
        max-height: 200px;
        width: 100%;
        height: 100%;
        margin: 0px;
        transition: .5s ease;
        filter: blur(.3px) brightness(80%);
    }
}

.item:hover, .materias:hover{
    border: 2px solid #ccc;
    transform: scale(1.05);
    img{
        filter: blur(.0px) brightness(100%);
    }
}

.desktop{
    display: flex;
    cursor: url(imágenes/Cursores/pointer-small.webp), auto;
}


.container {
    width: 100% !important;
    margin: 0 0px;
}

.banner .banner_text h1{
    margin-left: 60px;
    font-size: 54px;
    color: #fff;
    margin-bottom: 0PX;
    font-weight: bolder;
    letter-spacing: 5px;
}

.banner .banner_text h3{
    margin-left: 60px;
    margin-top:20px;
    color: #fff;
    font-size: 18PX;
    font-weight: normal;
}

.banner img{
    top: -20%;
    width: 100%;
    height:110%;
    filter:brightness(0.3) saturate(100%);
}

.banner_buttons{
    display: flex;
    position: absolute;
    bottom: 0vh;
    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: 6vh;
    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;
}


.main {
    display: flex;
    padding: 20px;
}

.media{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 400px;
    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: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    margin-right: 80px;
    margin-left: 80px;
    h1{
        text-align: center;
        margin-bottom: 2px;
    }
    h2{
        margin-bottom: 0px;
        background:#ccc;
        text-align: center;
        padding: 2px;
    }
}
.card h3 {
    color: #003366;
    margin-bottom: 10px;
    font-size: 18px;
}
.card p {
    color: #333333;
    line-height: 1.5;
    font-size: 16px;
}
.card a {
    color: #003366;
    text-decoration: none;
}
.card a:hover {
    text-decoration: underline;
}

.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-item{
    background-color: #f0f0f0;
    cursor: url(imágenes/Cursores/link.webp), auto;
    transition: 1s ease;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 5px;
}

.card-item h3{
    margin-bottom: 2px;
}

.card-item p{
    margin-top: 2px;
}

.card-item:hover{
    background-color: #ccc;
    outline: 2px solid #c3c3c3;
}

/* 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;
}

.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{
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    align-content: center;
    transition: .5s ease;
    margin: 10px;
}

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

.expandable-btn{
    display: flex;
    background: #bee0ff;
    padding:15px;
    border-radius: 5px;
    text-align: center;
    justify-content: center;
    color: #003366;
    font-weight: BOLD;
    align-items: center;
    align-content: center;
    height: fit-content;
    cursor: url(imágenes/Cursores/link.webp), auto;
    max-width:800px ;
    width: 100%;
    transition: .5s ease ;
    overflow: hidden;
    border: #156eeb00 2px solid;
}

.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: flex;
    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;
    border: #156eeb00 2px solid;
    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;
    height: 300px;
    width: 500px;
    border-radius: 25px;
    box-shadow: 0px 2px 5px 3px  #888;
    margin: 10px;
}

.img-conceptuales{
    display: inline-flex;
    position: relative;
    background: #e0e0e0;
    border-radius: 25px;
    padding: 5px;
    box-shadow: 3px 3px 3px 3px #ddd;
    img{
        cursor: pointer;
        transition: .5s ease;
        width: 150px; height: 150px; padding:10px;
        background: linear-gradient(#fff,#eee, #ccc);
        box-shadow: 3px 3px 3px #ddd;
    }
}
.img-conceptuales img:hover{
    box-shadow: 5px 5px 5px #777 !important;
    background: radial-gradient(#fff,#eee);
    transform:scale(1.05);
}

.exp-btn-content a{
    text-decoration: none !important;
    margin-top: 20px;
    font-weight: bold;
    font-size: 24px;
    color: #fff;
    transition: 1s ease;
    background: linear-gradient(#003366,#156EEB,#156EEB, #156EEB);
    padding: 10px;
    border-radius: 25px;
    transition: .5s ease !important;
    width: 35%;
    text-align: center;
    box-shadow: 4px 4px 4px #ccc;
}

.exp-btn-content a:hover{
    margin-top: 20px;
    font-weight: bold;
    font-size: 24px;
    text-decoration: underline;
    color: #ccc;
    box-shadow: 5px 5px 5px #999;
}


.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;
}


.carrousel{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    min-width: 100px;
}

.display_text{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    bottom: 6%;
    left:0%;
    background-color: #292929bd;
    height:70px;
}

.display_text h1{
    color: #fff;
    width: 100%;
    margin:0px;
    margin-left: 30px;
}

.display_text p{
    color: #fff;
    font-size: 24px;
    margin:0px;
    margin-top: -10px;
    margin-left: 30px;
}


.display_text1{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    bottom: 6%;
    left:100%;
    background-color: #292929bd;
    height:70px;
}

.display_text1 h1{
    color: #fff;
    width: 100%;
    margin:0px;
    margin-left: 30px;
}

.display_text1 p{
    color: #fff;
    font-size: 24px;
    margin:0px;
    margin-top: -10px;
    margin-left: 30px;
}


.display_text2{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    bottom: 6%;
    left:200%;
    background-color: #292929bd;
    height:70px;
}

.display_text2 h1{
    color: #fff;
    width: 100%;
    margin:0px;
    margin-left: 30px;
}

.display_text2 p{
    color: #fff;
    font-size: 24px;
    margin:0px;
    margin-top: -10px;
    margin-left: 30px;
}

.display_text3{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    bottom: 6%;
    left:300%;
    background-color: #292929bd;
    height:70px;
}

.display_text3 h1{
    color: #fff;
    width: 100%;
    margin:0px;
    margin-left: 30px;
}

.display_text3 p{
    color: #fff;
    font-size: 24px;
    margin:0px;
    margin-top: -10px;
    margin-left: 30px;
}


.carrousel_nextandprev{
    display: flex;
    position:relative;
    z-index: 1 ;
}

.next_button{
    display: flex;
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-size: 28px;
    background-color: #29292985;
    border:none;
    padding-top: 30px;
    padding-bottom: 30px;
    right:0%;
    margin-top: 20%;
    transition: .5s ease;
    cursor: url(imágenes/Cursores/link.webp), auto;
    border-radius: 5px;
}

.prev_button{
    display: flex;
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-size: 28px;
    background-color: #29292985;
    border:none;
    padding-top: 30px;
    padding-bottom: 30px;
    left:0%;
    margin-top: 20%;
    transition: .5s ease;
    cursor: url(imágenes/Cursores/link.webp), auto;
    border-radius: 5px;
}

.prev_button:hover, .next_button:hover{
background-color: #292929d7;
}



.display img{
    width: 100%;
    border-radius: 15px;
}

.display{
    display: flex;
    position: relative;
    left:0%;
    transition: 1.5s ease;
    height: 400px;
}

.carrousel_button{
    margin:10px;
    display: flex;
    position: relative;
    justify-content: center;
    background-color: #156EEB;
    padding:10px;
    border-radius: 5px;
}

.carrousel .next {
    background-color: #fff;
    border-radius: 25px;
    display: flex;
    position: relative;
    height: 20px;
    width: 20px;
    transition: 0.5s ease;
    cursor: url(imágenes/Cursores/link.webp), auto;
    margin-left: 10px;
    outline:2px #ccc solid;
}

.next:hover{
    background-color: #b8b8b8;
}
}

@media (max-width: 768px){
    .banner_buttons2{
        bottom: 6% !important;
    }
}