/*
Theme Name: UGM
Author: Herel Odin
Author URI: https://herelodin.com/
Requires at least: 
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ugm
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root{
	--primary-color : #295B87;
	--accent-color : #67B448;
	--primary-font :'Noto Sans', sans-serif;
	--primary-size : 16px;
	--secondary-color : #1686AF;
}

body,html{
	margin: 0px;
	padding: 0px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: var(--primary-font);
	font-size:var(--primary-size );
}

.wrapper{
	min-height: 700px;
}

.social-media{
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.social-media.social-media-gray a{
	text-decoration: none;
}
.social-media.social-media-gray a i{
	color: #747373;
}
.social-media li{
	margin-right: 10px;
}
.social-media li:last-child{
	margin-right: 0px;
}
.social-media li a{
	text-decoration: none !important;
	cursor: pointer;
	background: white;
	border-radius: 100%;
	width: 48px;
	height: 48px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	
}
.social-media li a i{
	color: var(--secondary-color);
	font-size: 18px;
}

.social-media.small li a{
	width: 24px;
	height: 24px;
}
.social-media.small li a i{
	font-size: 14px;
}
.social-media.social-media-gray a:hover{
	background-color: var(--secondary-color);
}
.social-media.social-media-gray a:hover i{
	color: white;
}

/*helpers*/
.img-fluid{
	max-width: 100%;
	height: auto;
}

.cover-title{
	padding-top: 30px;
	padding-bottom: 30px;
	background-image: url('./images/textura.png');
	background-size: cover;
	background-color: #295B87;
}
.cover-title h1{
	color: white;
	font-size: 56px;
	margin: 0px;
	padding: 0px;
}

.card-degree{
	display: block;
	background-color: gray;
	height: 478px;
	margin-bottom: 15px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.card-degree img{
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	position: relative;
}
.card-degree .card-degree-content{
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	display: flex;
	flex-direction: column;
	z-index: 1;
	align-items: center;
	justify-content: flex-end;
	padding: 15px;
	background: linear-gradient(0deg, rgba(0,0,0,.4) 20%, transparent 80%);
}
.card-degree h3{
	text-align: center;
	color: white;
}

.registro{
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #67B448;
}
.registro h2{
	color: white;
	text-align: center;
	font-size: 48px;
	margin: 0px;
	padding: 0px;
}

.registro input{
	height:56px !important;
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: white;
	border:1px solid #707070;
	font-size: 18px;
	width: 100%;
}
.registro textarea{
	order-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: white;
	border:1px solid #707070;
	font-size: 18px;
	width: 100%;
}
.registro input[type="submit"]{
	margin: 0px auto;
	display: block;
	background-color: #1686AF;
	border-color: #1686AF;
	color: white;
	max-width: 206px;
}
.wrapper-img img{
	width: 100% !important;
	height: auto !important;
}
.background-gray{
	background-color: #EFF0F2;
}
.background-blue{
	background-color: #1686AF;
}
.text-center{
	text-align: center;
}

.sub_title{
	font-size: 48px;
	color: #1A1919;
}
.el-center{
	display: block;
	margin: 0px auto;
}

@media all and (max-width: 768px) {
	.card-degree{
		height: 340px;
	}
	.cover-title h1{
		font-size: 24px;
	}
	.sub_title{
		font-size: 20px;
	}
	.registro h2{
		font-size: 22px;
	}
}
.form-control{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 15px;
}
.form-control .form-icon{
	width: 30px;
	height: 30px;
	min-width: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.form-control .form-icon i{
	color: #505050;
}
.form-control p{
	font-size: 16px;
	margin: 0px;
	color: #505050;
	padding: 0px;
}
.background-blue{
	background-color: #295B87;
	padding-top: 60px;
	padding-bottom: 60px;
}

.single-services{
	list-style-type: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0px;
	padding: 0px;
}
.single-services li{
	max-width: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.single-services li p{
	text-align: center;
	color: #00496A;
	font-size: 14px;
	font-weight: 600;
	margin: 0px;
	padding: 0px;
}
.single-services li .image{
	width: 100px;
	height: 100px;
	min-height: 100px;
	margin-bottom: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-bottom: 2px solid #67B448;
}
.single-services li .image img{
	max-width: 60px;
	height: auto;
}

.single-services li  p.sub_title_text{
	font-size: 12px;
	font-weight: 300;
}

.single-services  .single-services-description{
	min-height: 100px;
}

.title_line{
	position: relative;
	font-size: 40px;
}

.title_line:after{
	position: absolute;
	content: '';
	background-color: #1686AF;
	bottom: -10px;
	height: 2px;
	width: 60px;
	left: calc((100% - 60px)/2);
}

.title_line.title_line_start:after{
	left: 0px !important;
}
.title_line.title_line_white{
	color: white;
}
.title_line.title_line_white:after{
	background-color: var(--accent-color);
}

.card-beca{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 15px;
	box-shadow: 0px 3px 10px rgba(41, 91, 135, .16);
}
.card-beca .card-beca-image{
	width: 197px;
	height: 137px;
	min-width: 197px;
	background-color: rgba(0, 0, 0, .3);
}
.card-beca .card-beca-image img{
	width: 197px;
	height: 137px;
	min-width: 197px;
	object-fit: cover;
}

.card-beca  .card-beca-body{
	width: 100%;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.card-beca  .card-beca-body h4{
	font-size: 18px;
	color: #1A1919;
	margin: 0px;
	padding: 0px;
	margin-bottom: 15px;
}
.card-beca  .card-beca-body a{
	color:var(--accent-color);
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	font-weight: 600;
	margin: 0px;
	padding: 0px;
}
.card-beca  .card-beca-body a i{
	margin-right: 5px;
}
.card-beca  .card-beca-body a:hover span{
	text-decoration: underline;
}


@media all and (max-width: 768px) {
	.card-beca .card-beca-image{
		width: 150px;
		height: 110px;
		min-width: 150px;
	}
	.card-beca .card-beca-image img{
		width: 150px;
		height: 110px;
		min-width: 150px;
	}
	.title_line{
		font-size: 26px;
	}
}

.card-oferta{
	box-shadow: 0px 2px 9px rgba(0, 0, 0, .4);
	overflow: hidden;
	border-radius: 10px;
	background-color: white;
	margin-bottom: 30px;
}
.card-oferta .card-oferta-header{
	width: 100%;
	height: 200px;
}
.card-oferta .card-oferta-header img{
	width: 100% !important;
	height: 200px !important;
	object-fit: cover;
}
.card-oferta .card-oferta-body{
	padding: 15px;
}
.card-oferta .card-oferta-body h3{
	text-align: center;
	color: #1A1919;
	font-size: 24px;
	margin: 0px;
	padding: 0px;
}
.card-oferta .card-oferta-body p{
	color: #505050;
	font-size: 14px;
}
.card-oferta .card-oferta-body ul{
}
.card-oferta .card-oferta-body li a{
	text-decoration: none;
	color: #505050;
	font-size: 14px;
}
.card-oferta .card-oferta-body li a:hover{
	text-decoration: underline;
}

.carousel-home{
	position: relative;
	width: 100%;
	height: 632px;
}
.carousel-home img{
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	object-fit: cover;
	width: 100% !important; 
	height: 100% !important;
}

.carousel-home .content{
	position: relative;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0,0,0,.3) 0%, transparent 100%);
	height: 632px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.carousel-home .content h1{
	font-size: 56px;
	font-weight: 700;
	color: white;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, .5);
}
.carousel-home .content p{
	color: white;
	font-size: 18px;
	font-weight: 600;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, .5);
}

@media all and (max-width: 768px) {
	.carousel-home .content,.carousel-home{
		height: 400px;
	}
	.carousel-home .content h1{
		font-size: 28px;
	}
	.carousel-home .content p{
		font-size: 16px;
	}
}
.truncate_text_1{
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;	
}
.truncate_text_2{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;	
}

.truncate_text_3{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

.truncate_text_4{
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

.truncate_text_6{
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

.truncate_text_7{
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

a.post-link{
	text-decoration: none;
}
.post-card{
	text-decoration: none;
}

.post-card .post-card-image{
	width: 100%;
	height: 230px;
	position: relative;
}
.post-card .post-card-image img{
	width: 100%;
	height: 230px;
	min-height: 100%;
	object-fit: cover;
}


.post-card .post-card-body{
	padding-top: 10px;
	padding-bottom: 10px;
}
.post-card .post-card-body h3{
	font-size: 24px;
	color: #3D3D3D;
	font-weight: 700;
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px;
}
.post-card .post-card-body p {
	color: #737373;
}
ul.category-list{
	display: flex;
	flex-direction: row;
	list-style-type: none;
	align-items: center;
	margin: 0px;
	margin-bottom: 15px;
	padding: 0px;
}
ul.category-list li{
	margin-right: 5px;
	border-right: 1px solid #3D3D3D;
	padding-right: 5px;
	margin-right: 5px;
}

ul.category-list li:last-child{
	margin-right: 0px;
	border-right: 0px;
}
ul.category-list li, ul.category-list li a{
	color: #3D3D3D;
	font-size: 13px;
	font-weight: 600;
}

a.more_green{
	color: #67B448;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
}
a.more_green i{
	
	margin-right: 5px;
}
a.more_green:hover i{
	text-decoration: none !important;
}
a.more_green:hover span{
	text-decoration: underline;
}

.sidebar-card{
	margin-bottom: 15px;
	width: 100%;
	background-color: #1686AF;
	height: 295px;
	position: relative;
	background-size: cover;
}

.sidebar-card.sidebar-card_mision{
	background-image: url('./images/mision.png');
}
.sidebar-card.sidebar-card_becas{
	background-image: url('./images/becas.png');
}

.sidebar-card.sidebar-card_egresados{
	background-image: url('./images/egresados.png');
}
.sidebar-content{
	position: absolute;
	padding: 15px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.sidebar-content h3{
	color: white;
	font-size: 32px;
	font-weight: 500;
}
.sidebar-content p{
	color: white;
}
.wp-pagenavi{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.wp-pagenavi a, .wp-pagenavi span{
	background-color: #EFF0F2;
	border-color: #EFF0F2;
	color: #2A2B49;
	font-family: var(--primary-font);
	text-decoration: none;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current{
	background-color: #1686AF;
	border-color: #1686AF;
	color: white;
	font-weight: bold;


}

.wp-pagenavi .page, .wp-pagenavi .current{
	width: 48px;
	height: 48px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink{
	height: 48px;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #1686AF;
	border-color: #1686AF;
	color: white;
	font-size: 16px;
	padding-left: 10px;
	padding-right: 10px;
	justify-content: center;
	font-family: var(--primary-font);
}
.background-textura{
	background-image: url('./images/fondo-textura.png');
}

.basica{
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
}

.basica .basica-header{
	padding: 10px;
	color: #FFFFFF;
	background-color: #E5673C;
}
.basica .basica-header h2{
	margin: 0px;
	padding: 0px;
	font-size: 22px;
}
.basica .basica-body{
	padding: 30px;
	height: 100%;
	background-color: white;
}
.basica .basica-body img{
	width: 100% !important;
	object-fit: cover; 
	height: 270px !important;
}

.basica .basica-body p{
	color: #3675AB;
	font-size: 16px;
}

.feature-image-basica{
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.feature-image-basica img{
	width: 100%;
	height: 100%;
	object-fit: cover;

}

.programa{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.programa.reverse{
	flex-direction: row-reverse;
}
.programa .description{
	max-width: 547px;
}
.programa .description .programa_title{
	position: relative;
}
.programa .description .programa_number{
	position: absolute;
	left: -75px;
	top: -40px;
	z-index: -1;
	width: 72px;
	height: 72px;
	background-color: #DDE2E8;
	border-radius: 72px;
	font-size: 64px;
	color: #1886AF;
	text-align: right;
}
.programa .image{
	min-width: 392px;
	width: 392px;
	height: 392px;
	border-radius: 10px;
	overflow: hidden;
	margin-right: 100px;
}
.programa .image img{
	min-width: 100%;
	width: 100%;
	height: 392px;
	object-fit: cover;
}

.programa h3{
	color: #002D4C;
	font-size: 22px;
	font-weight: bold;
}
.programa p{
	color: #3675AB;
	font-size: 16px;
}
@media all and (max-width: 990px and min-width 769px) {
	.programa .image{
		min-width: 250px;
		margin-right: 0px;
		width: 250px;
		margin-bottom: 30px;
	}
	.programa .image img{
		min-width: 100%;
		width: 100%;
	}
	.programa .description{
		max-width: 300px;
	}
}
@media all and (max-width: 768px) {
	.programa{
		flex-direction: column !important;
	}
	.programa .image{
		min-width: 100%;
		margin-right: 0px;
		width: 100%;
		margin-bottom: 30px;
	}
	.programa .image img{
		min-width: 100%;
		width: 100%;
	}
	.programa .description .programa_number{
		position: initial !important;
	}
}

ul.features{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	gap: 15px;
}

ul.features li{
	width: 249px;
	height: 93px;
	background-color: #1686AF;
	border-radius: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding-left: 10px;
	padding-right: 10px;
}



ul.features li:last-child{
	margin-right: 0px;
}
ul.features li .icon{
	width: 50px;
	height: 50px;
	max-width: 50px;
	min-width: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
ul.features li .icon img{
	max-width: 40px;
	max-height: 40px;
	object-fit: contain;
}
ul.features li p{
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	color: white;
}
ul.features li:hover,ul.features li.active{
	background-color: #66B449;
	cursor: pointer;
}

.featured_content{
	background-color: #DDE2E8;
	padding: 30px;
	border-radius: 20px;
	display: none;
}
.featured_content.active{
	display: block;
}
.featured_content > * {
	font-size: 16px;
	line-height: 1.8rem;
	color: #3675AB;
}

@media all and (max-width: 768px) {
	ul.features{
		flex-wrap: wrap;
		justify-content: center;
	}

	ul.features li{
		margin-bottom: 15px;
		width: 200px;
		height: 75px;
	}
	ul.features li p{
		font-size: 16px;
	}
}

.btn_download{
	background-color: var(--accent-color);
	color: white;
	width: 254px;
	height: 48px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none !important;
}
.btn_download:hover{
	color: white;
}
.btn_download span{
	margin-left: 10px;
}

ul.tags{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
ul.tags li{
	margin-right: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	width: fit-content;
	padding-left: 15px;
	padding-right: 15px;
	height: 42px;
	background-color: white;
	border-radius: 42px;
	box-shadow: 0px 2px 5px rgba(41, 91, 135, .16);
}
ul.tags li:last-child{
	margin-right: 0px;
}
ul.tags li:hover,ul.tags li.active{
	background-color: #67B448;
	color: white;
}

ul.tags li a{
	text-decoration: none;
	color: inherit;
}

ul.tags.tags-center{
	justify-content: center;
}
.divider{
	width: 100%;
	border:1px solid #CFCFCF;
}

.card-reconocimiento{
	margin-bottom: 30px;
	padding: 15px;
	background-color: white;
	box-shadow: 0px 3px 10px rgba(41, 91, 135, .16);
}
.card-reconocimiento h4{
	font-size: 14px;
	font-weight: bold;
}

.card-reconocimiento a{
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #67B448 !important;
	text-decoration: none !important;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}
.card-reconocimiento  a span{
	margin-right: 10px;
}
.card-reconocimiento:hover{
	background-color: #67B448;
}
.card-reconocimiento:hover p,.card-reconocimiento:hover h6{
	color: white !important;
}

.card-reconocimiento:hover a, .card-reconocimiento:hover h4 {
	color: white !important;
}

.card-mision{
	background-color: white;
	min-height: 400px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.card-mision.card-mision-blue{
	background-color: #1686AF;
}
.card-mision.card-mision-blue h2, .card-mision.card-mision-blue p, .card-mision.card-mision-blue li  {
	color: white;
}
.card-mision.card-mision-blue h2:after{
	background-color: white !important;
}

.icon_card{
	width: 76px;
	height: 76px;
	background-color: #67B448;
	border-radius: 76px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.modelo_item{
	position: relative;
	margin-bottom: 80px;
	margin-left: 50px;
}
.modelo_item:before{
	position: absolute;
	background-color: rgba(22, 134, 175, .20);
	border-radius: 100%;
	width: 65px;
	height: 65px;
	left: -32px;
	top: -32px;
	content: '';
}
.modelo_item h3{
	font-size: 20px;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	position: relative;
}

.modelo_item h3:after{
	content: '';
	position: absolute;
	background-color: #67B448;
	width: 70px;
	height: 4px;
	bottom: -10px;
	left: 0px;
}

#menu-menu-header li .dropdown-menu{
	background:var(--accent-color);
	width:100%;
	max-width:100%;
	padding:0px;
	margin:0px;
	border-radius: 0px;
	border:none;
}

#menu-menu-header .dropdown-toggle::after{
	border:0px !important;
}

#menu-menu-header li .dropdown-menu a{
	padding:10px 25px;
	display: block;
	text-align: center;
	white-space:pre-wrap;
	line-height: 24px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

#menu-menu-header li:hover .dropdown-menu {
    display: block;
}

#menu-menu-header li .dropdown-menu a.active, #menu-menu-header li .dropdown-menu a:hover{
	background:#339124;
}

.form-control{
	border: 0px;
}

.box_valides{
	margin-bottom: 30px;
	background-color: white;
	padding: 15px;
	border-radius: 10px;
	box-shadow:  0px 0px 10px rgba(0, 0, 0, .1);
}

.box_valides h3{
	color: #67B048;
	font-size: 16px;
	font-weight: 700;
	margin: 0px;
	padding: 0px;
}

.box_valides p{
	color: #1682AB;
	font-size: 14px;
}
.campus_gallery_row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.campus_gallery{
	width: 270px;
	height: 180px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.campus_gallery img{
	width: 270px !important;
	object-fit: cover;
	height: 180px !important;
}
.campus_gallery:last-child{
	margin-right: 0px;
}

.semestres_list{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.semestres_list li{
	width: 64px;
	height: 64px;
	border-radius: 64px;
	background-color: #C7C8CB;
	position: relative;
	margin-right: 10px;
	cursor: pointer;
	position: relative;
}
.semestres_list li:last-child{
	margin-right: 0px;
}
.semestres_list li .circle{
	position: absolute;
	border-radius: 100%;
	left: 5px;
	right: 5px;
	top: 5px;
	bottom: 5px;
	background-color: #C7C8CB;
	border:4px solid #C7C8CB;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	color: #727272;
	font-weight: bold;
	font-size: 22px;
}

.semestres_list li.active:after{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 12px 24px 12px;
	border-color: transparent transparent #67B448 transparent;
	content: '';
	position: absolute;
	bottom: -20px;
	left: 21px;
}
.semestres_list li.active,.semestres_list li:hover{
	background-color: #67B448;
}
.semestres_list li.active .circle,.semestres_list li:hover .circle{
	border-color: white;
	background-color: #67B448;
	color: white;
}
.card-semestre{
	display: none;
	background-color: white;
	padding: 15px;
	border:2px solid #67B448;
	border-radius: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
}

.card-semestre.active{
	display: block;
}



.semestres_points{
	position: relative;
}
.semestres_points:before{
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	height: 30px;
	background-color: #295B87;
}

ul.programas_list{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
ul.programas_list li{
	background-color: #ADADAD;
	height: 150px;
	width: 300px;
	position: relative;
	margin-right: 40px;
	margin-left: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: white;
	font-size: 32px;
	font-weight: bold;
}
ul.programas_list li:hover,ul.programas_list li.active{
	background-color: #1686AF;
	cursor: pointer;
}

ul.programas_list li:after{
	position: absolute;
		z-index: -1;
		content: "";
		right: -10%;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: inherit;
		-webkit-transform: skewX(-10deg);
		-moz-transform: skewX(-10deg);
		-ms-transform: skewX(-10deg);
		transform: skewX(-10deg);
}

ul.programas_list li:before{
	z-index: -1;
		content: "";
		position: absolute;
		left: -10%;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: inherit;
		-webkit-transform: skewX(-10deg);
		-moz-transform: skewX(-10deg);
		-ms-transform: skewX(-10deg);
		transform: skewX(-10deg);
}
.programas_item:before{
	z-index: -1;
		content: "";
		position: absolute;
		left: -10%;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: inherit;
		-webkit-transform: skewX(-10deg);
		-moz-transform: skewX(-10deg);
		-ms-transform: skewX(-10deg);
		transform: skewX(-10deg);
}
.programas_item:after{
	position: absolute;
		z-index: -1;
		content: "";
		right: -10%;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: inherit;
		-webkit-transform: skewX(-10deg);
		-moz-transform: skewX(-10deg);
		-ms-transform: skewX(-10deg);
		transform: skewX(-10deg);
}
.programas_item{
	padding: 15px;
	display: none;
	position: relative;
	background-color: #EFF0F2;
}
.programas_item.active{
	display: block;
}

.programas_item p{
	color: #168090;
}