@charset "UTF-8";

/*************** imagen ************************/

.image-src-box.presized img {
    image-rendering: -webkit-optimize-contrast !important;
} 

/******************* **************************************/

    .detail-page .detail-visual table{
        width: 80%; 
        margin: auto;
        margin-bottom: 10px !important;
    }

    .detail-page .detail-visual td > p{
        text-align: center;
    }
    
    #tableImagen td:nth-child(1) {
        width: 60% !important;
    }
    
    #tableImagen td:nth-child(2) {
        width: 40% !important;
    }
    
    #tableAudio td:nth-child(1), #tablePdf td:nth-child(1) {
        width: 80% !important;
    }
    
    #tableAudio td:nth-child(2), #tablePdf td:nth-child(2){
        width: 20% !important;
    }


/******************************* INICIO - ESTILO DIA ***********************************************/

.splitLine{
    border-right-style:solid;
    border-right-color:#d6d6d6;
}

.menuDiaCols{
    background-image:-webkit-linear-gradient(top, #ddd 1%, white 18%, #fff 79%, #ddd 100%);
    background-image:-moz-linear-gradient(top, #ddd 1%, white 18%, #fff 79%, #ddd 100%);
    background-image:-ms-linear-gradient(top, #ddd 1%, white 18%, #fff 79%, #ddd 100%);
    background-image:-o-linear-gradient(top, #ddd 1%, white 18%, #fff 79%, #ddd 100%);
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.bordesDia{/*Estilos bordes para enlaces de aulas 2022*/
	background: rgba(242,242,242,1);
	background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 65%, rgba(204,208,210,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,242,242,1)), color-stop(65%, rgba(242,242,242,1)), color-stop(100%, rgba(204,208,210,1)));
	background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 65%, rgba(204,208,210,1) 100%);
	background: -o-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 65%, rgba(204,208,210,1) 100%);
	background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 65%, rgba(204,208,210,1) 100%);
	background: linear-gradient(to bottom, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 65%, rgba(204,208,210,1) 100%);
	border-radius: 5px;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ccd0d2', GradientType=0 );
	margin-left: 5px;
	padding-top: 20px !important;
}

.paddingDia{
	padding-top: 20px !important;
}

.paddingIcoAulas{
	padding-top: 25px !important;
}


@media (min-width: 576px) and (max-width: 768.02px) {
  .bordesDia{
  	width:100%;
	margin-left: 0px !important;
  }
  
}

@media (min-width: 319) and (max-width: 575.98px) {
  .bordesDia{
  	width:100%;
  	margin-left: -20px !important;
  }
  
}

.menuDia{
    margin-bottom:25px
}

.encabezadoAulas{
     margin-top: 0px !important;
}

.contenedorPrincipalDia{
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

.menuDiaColsImg {
    padding-top: 15px;
}

.containerMicrositio .hero-slider {
    margin-top: 0px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.containerSoftware{
    border-bottom: 2px solid #005e97;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
    width: 95%;
    margin: auto;
}

/* ------------------------------------ style página reportes -------------------------- */

.tabsInformes .active {
    background-color: transparent !important;
}

    .tab-content {
        padding-left: 30px;
        padding-top: 25px;
    }

    .tab-list>li>a.active {
        background: #005e97 !important;
    }

    @media (min-width: 1014px){
        .tab-list {
            border-bottom: solid 2px #005e97 !important;
        }
    }

    .tab-list>li>a:hover {
        background: #005e97  !important;
    }

    .accordion .acco-header>a:focus, .accordion .acco-header>a:hover {
        background: #005e97 !important;
    }

    a.dl-link {
        color: #005e97;
    }

    a.dl-link:hover {
        color: #38b4ff;
        text-decoration: underline;
    }

    .download-list.dl-list-compact a.dl-link:hover h3 {
        color: #38b4ff;
    }
    
    .accordion .acco-header>a.collapsed {
    display: block;
    padding: .5rem 1rem;
    color: #222;
    background: #f7f7f7;
    font-size: 15px;
    }

    .accordion .acco-header>a {
        background-color: #005e97;
        display: block;
        padding: .5rem 1rem;
        color: #fff;
        font-size: 15px;
    }
    
    .accordion .acco-header>a.collapsed:hover {
        color: white;
    }

    .download-list.dl-list-compact .dl-content h3 {
        color: #005e97;
        font-size: 14px;
    }

    .dl-date {
        display: none;
    }

/* ------------------------------------ fin - style página reportes -------------------------- */



/******************************* FIN - ESTILO DIA ***********************************************/


/******************************* INICIO - ESTILO ESTUDIANTES ***********************************************/


#colorNav > ul{
    width: auto; /* Increase when adding more menu items */
    margin: auto;
    padding-left: 0 !important;

}

#colorNav > ul > li {
    list-style: none;
    border-radius: 3px;
    position: relative;
    width: 100%;
}

/* 
#colorNav li ul {
    position: relative;
    list-style: none;
    text-align: center;
    width: 230px;
    left: 4%;
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.4s linear;
    -moz-transition: max-height 0.4s linear;
    transition: max-height 0.4s linear;
}
*/
#colorNav li ul {
    z-index: 1;
    position: absolute;
    list-style: none;
    text-align: center;
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.4s linear;
    -moz-transition: max-height 0.4s linear;
    transition: max-height 0.4s linear;
    padding: 0px;
    border-radius: 5px;
    /* margin-top: 15px; */
    background-color: #e7eff4;
    

}




#colorNav li ul li {
    background-color: #dddddd;
}

#colorNav li ul li a {
    padding: 10px;
    color: #000 !important;
    display: block;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

/* zebra stripes */
/*
#colorNav li ul li:nth-child(odd){ 
    background-color:#46607A;
}
*/
#colorNav li ul li:nth-child(odd) {
    background-color: #ffffff;
}

#colorNav li ul li:hover{
    background-color:#637281;
}

#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    position:relative;
}

#colorNav li:hover ul {
    border: 2px solid #084d75;
}

#colorNav li ul li:hover a {
    color: white !important;
}


#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

/* This will trigger the CSS */
/* transition animation on hover */

#colorNav li:hover ul{
    max-height: max-content;

}


/*
#colorNav li.green{
    background-color: #FFFFFF;
    color: #FFFFFF;
}
*/

#colorNav ul li img{
    width: 100%;
}


/******************************* FIN - ESTILO ESTUDIANTES ***********************************************/

/******************************* INICIO - NUEVA LISTA DESPLEGABLE ***************************************/


/* Fixed sidenav, full height */
/*
.sidenav {
    width: 200px;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #3F5B76;
    overflow: hidden;
    max-height: 0px;
    margin: auto;
}
*/

.sidenav {
    width: 100%;
    position: absolute;
    z-index: 1;
    background-color: #e7eff4;
    overflow: hidden;
    margin: auto;
    max-height: 0px;
}

#colorNav li:hover .sidenav {
    max-height: max-content;
    transition: 0.5s;
    border-radius: 5px;
    border: 2px solid #084d75;
}

/* Style the sidenav links and the dropdown button */
.dropdown-btn {
    padding: 10px;
    text-decoration: none;
    font-size: 13px;
    color: #000000;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    outline: none;
    border-radius: 3px;
    font-weight: 500;
}

.sidenav a {
    padding: 8px;
    text-decoration: none;
    font-size: 14px;
    color: #000000;
    display: block;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    font-weight: 400;
}

/* On mouse-over */
.sidenav a:hover {
    color: #f4f4f4;
    background-color: #637281;
}

.dropdown-btn:hover {
    color: #ffffff;
    background-color: #637281;
}


/* Add an active class to the active dropdown button */
.active {
   /* background-color: #8A2BE2; */ 
   /* color: white;*/
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    display: none;
    background-color: #ffffff;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.sidenav .dropdown-btn:nth-child(even){ /* zebra stripes */
  background-color:#637281;
  border-radius: 3px;
}




/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 12px;}
  .sidenav a {font-size: 12px;}
}


/********************************* FIN - NUEVA LISTA DESPLEGABLE ******************************************/
/************************************ INICIO - GUÍAS Y TUTORIALES *******************************************/

.rowGuias .col-lg-4 {
    padding-right: 0px;
    padding-left: 0px;
}

.imagenGuia {
    margin-bottom: 0px !important;
}

/************************************ FIN - GUÍAS Y TUTORIALES *******************************************/
/************************** NOTICIAS **************************************/

.teaser.type-event .visual {
    margin: auto !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.teaser .teaser-date {
    color: #000000 !important;
    font-size: 12.5px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

.teaser.type-event .teaser-text {
    text-align: center !important;
    font-size: 13px !important;
    color: #000000 !important;
}

.teaser.type-article .teaser-text {
    text-align: justify !important;
    font-size: 13px !important;
    color: #000000 !important;
}

.teaser span.headline {
    color: #000000 !important;
    font-size: 13px !important;
    text-align: justify !important;
    font-weight: 650 !important;
}

 .detail-page.type-article .piece>.visual{
	max-height: 350px !important;
    max-width: 800px !important;
    margin: auto !important;
}

.detail-page.type-article .piece>.visual img {
    height: 350px !important;
    object-fit: contain !important;
}

.detail-page.type-article .image-src-box.presized {
    z-index: -1 !important;
	padding-bottom: 100% !important;

}

.containerMicrositio .detail-page iframe {
    /*height: 400px !important;*/
    width: 100% !important;
    position: relative !important;
}

.containerMicrositio .detail-page .fluid-width-video-wrapper {
    padding-top: unset !important;
    width: 90% !important;
    margin-left: 5%!important;
}


/**************************** FIN NOTICIAS ******************************************/
/************************** EVENTOS **************************************/
@media (min-width: 764px){
    .detail-page .detail-visual.full .visual-info.right {
        justify-content: center !important;
        margin-top: 2% !important;
    }
}

.teaser.teaser-masonry .intro, .teaser.teaser-text-tile .intro {
    display: none !important;
}

.detail-page.type-event .piece>.visual {
    /*  width: 280px !important; */
    box-shadow: 0px 0px 4px 0px black; !important;
    margin: auto !important;
    max-width: 320px !important;
    height: auto !important;
}

.detail-page.type-event .piece>.visual img{
    /*max-height: 350px !important;*/
    max-width: 320px !important;
    object-fit: contain !important;
}

.detail-page .intro-headline>.intro {
    display: none !important;
}

.detail-page.type-event .info.type {
    display: none !important;
}

 .detail-page.type-article .detail-content .piece>.visual{
    /*margin-right: 15px !important;*/
    margin-bottom: 15px !important;
}

.detail-page.type-event .sub-header {
    font-weight: 300 !important;
    text-align: center !important;
    font-size: 14px !important;
}

.detail-page.type-article .sub-header {
    font-weight: 300 !important;
    text-align: justify !important;
    font-size: 14px !important;
}

.detail-page .detail-content {
    text-align: justify !important;
}

.detail-page .detail-content .heading {
    text-align: center !important;
}

.detail-page.type-event span.headline, .detail-page.type-article span.headline {
    text-align: center !important;
}

.teaser.type-event .link, .teaser.type-article .link {
    text-align: center !important;
}

.detail-page.type-event .detail-visual {
    margin-bottom: 55px !important;
}

.detail-page .detail-content {
    border-top: 3px #b8b8b8;
    padding-top: 20px;
    border-top-style: double;
}

.detail-page.type-event .link {
    position: absolute;
    top: -65px;
    margin: auto;
    width: 30%;
    left: 35%;
}

.detail-page.type-event .link .btn {
    margin: auto !important;
    width: 100% !important;
    background-color: var(--amarillo-uptc) !important;
    border: 1px solid black !important;
    color: black !important;
    border-radius: 5px !important;
}


.detail-page.type-event .link .btn:hover {
    background-color: black !important;
    color: white !important;
}


/**************************** FIN EVENTOS ******************************************/
/************************* ESTILOS PORTAFOLIO VISTA PROGRAMAS ********************************/
a.btnVisitaPrograma img {
	width: 40%;
	height: auto;
    transform: scale(1);
    transition: transform 0.5s linear;
}

a.btnVisitaPrograma img:hover{
    transform: scale(1.2);
}

@media (max-width: 1013px) {
	a.btnVisitaPrograma img{
		width: 70%;
		height: auto;
	}
}
/************************ FIN ESTILOS PORTAFOLIO VISTA PROGRAMAS *****************************/

/*********************** ESTILOS IMAGENES CON BOTON *****************************************/
.centrarImgBtn .visual {
    width: 50%;
    margin: auto;
}
.centrarImgBtn .link {
    margin: auto;
}
.centrarImgBtn .btn:hover{
 background-color: #ffcc29;
 color: #000;
}
/********************** FIN DE ESTILOS IMAGENES CON BOTON **********************/
/********************** ESTILOS COMPONENTE VIDEO ***************************/

.videoImg .image-src-box{
    padding-bottom: 0;
}

.centrarVideo{
	display: flex;
	justify-content: center;
	
}

/*********************** FIN DE ESTILOS COMPONENTE CVIDEO ******************************/
/*********************** ESTILOS DE LINKSEQUENCE **********************************/
.nav-side li>a:not(.btn):focus, .nav-side li>a:not(.btn):hover {
    color: #005E97;
}
.pagination>li.active>a {
    color: #fff;
    background-color: #004771;
    border-color: #004771;
}
.pagination>li.active>a:hover, .pagination>li>a:hover {
    color: #000;
    background: #ffcc29;
    border-color: #ffcc29;
}
/********************* FIN DE ESTILOS LINKSEUENCE **********************************/

/********************** ESTILOS DE LOS BOTONES ************************************/
.btn:hover{
background-color: #ffcc29;
color: #000;
}
/********************* FIN DE ESTILOS DE LOS BOTONES ******************************/