@charset "utf-8";
/********************************************************************
    BOTONES SOBRE IMAGEN
********************************************************************/
.botones {
    position: absolute;
    cursor: pointer;
    box-shadow: 0 0 0 2px #9fb4f2;
    background: linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    border-radius: 10px;
    border: 1px solid #4e6096;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: clamp(10px, 1vw, 15px);
    padding: 6px 10px;
    text-shadow: 0 1px 0 #283966;
    z-index: 5;
}

.botones:hover {
    background: linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
}

/* POSICIÓN RELATIVA A LA IMAGEN */
.certificacion {
    left: 69%;
    top: 52%;
}

.vigencia {
    left: 69%;
    top: 63%;
}

.convocatoria {
    left: 40%;
    top: 50%;
}

.formatos {
    left: 50%;
    top: 50%;
}
.owl-dots {
    border: 0px solid #ff0000;
    position: relative;
    margin-top: -4rem !important;
    z-index: 999;
}
/* Responsive */
@media only screen and (min-width: 1333px) and (max-width: 1440px) {
    .botones {
        font-size: 13px;
        padding: 4px;
    }
    .certificacion {
        margin-left: 68.5%;
        margin-top: 20.5%;
    }
    .vigencia {
        margin-left: 68.5%;
        margin-top: 24.5%;
    }
    .owl-dots {
        margin-top: -4rem !important;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1332px) {
    .botones {
        font-size: 10px;
        padding: 4px;
    }
    .certificacion {
        margin-left: 68.5%;
        margin-top: 20.5%;
    }
    .vigencia {
        margin-left: 68.5%;
        margin-top: 24.5%;
    }
    .owl-dots {
        margin-top: -5rem !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .botones {
        font-size: 8px;
        padding: 1px;
    }
    .certificacion {
        margin-left: 68.5%;
        margin-top: 20.5%;
    }
    .vigencia {
        margin-left: 68.5%;
        margin-top: 24.5%;
    }
    .owl-dots {
        margin-top: -12rem !important;
    }
}
/******************************************************************************/
/*  Clase para contenido HTML en carrusel                                     */
/******************************************************************************/
.html-owl-carousel {
    border: 2px solid #ff00ff;
    width: 99%;
    height: auto;
    margin: auto;
}
/******************************************************************************/
@media only screen and (min-width: 673px) and (max-width: 767px) {
    .botones {
        font-size: 9px;
        padding: 1px;
    }
    .certificacion {
        margin-left: 68%;
        margin-top: 21%;
    }
    .vigencia {
        margin-left: 68%;
        margin-top: 25%;
    }
    .convocatoria {
        margin-left: 38%;
        margin-top: 20.5%;
    }
    .formatos {
        margin-left: 50%;
        margin-top: 20.5%;
    }
    .owl-dots {
        margin-top: -15rem !important;
    }
}

@media only screen and (min-width: 360px) and (max-width: 672px) {
    .botones {
        font-size: 9px;
        padding: 1px;
    }
    .certificacion {
        margin-left: 68%;
        margin-top: 20.5%;
    }
    .vigencia {
        margin-left: 68%;
        margin-top: 25%;
    }
    .convocatoria {
        margin-left: 30%;
        margin-top: 20.5%;
    }
    .formatos {
        margin-left: 50%;
        margin-top: 20.5%;
    }
    .owl-dots {
        margin-top: -19rem !important;
    }
}