@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700|Work+Sans:400,700&display=swap);

html, body { font-family: "Anton", sans-serif; margin: 0px; padding: 0px; width:100%; font-size: 1em; color:#525252; line-height: 26px; background: #fefefe; letter-spacing: 0px }
h2, h3 { letter-spacing: -1px }
a { color:#292929; text-decoration: none;}
.noborder { border:none !important }
#preloader { position: fixed; top:0; left:0; right:0; bottom:0; background: #fff; z-index: 100; }
#loader { width: 140px; height: 140px; position: absolute; left:50%; top:50%; background: url(../img/loading.gif) no-repeat center 0; margin:-50px 0 0 -50px; }

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #E6EFFD;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #C7552B;
  border-radius: 5px
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #052742
}

.scrollup { width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 80px; right: 50px; display: none; text-indent: -9999px;  background: url(../img/icon_top.png) no-repeat }
/* Header */

#body_content { float: left; width: 100%; overflow: hidden }
#migas {float: left; width:80%; padding:1% 10%; font-size:14px; text-align:left; border-bottom: 1px dashed #ccc}
#migas a { color: #82b440; text-decoration: none; font-weight: bold }
#migas a:hover {color: #fff; background: #82b440; text-decoration: underline }

#fullpage { float: left; width: 80%; padding: 2% 10%; margin: 0% }
#fullpage h1 { color:#82b440 }
#tituloH1 { float: left; width: 80%; padding: 3% 10%; margin: 0%; color:#82b440 }
.enlacesTransparencia{
	display: flex;
	flex-wrap: wrap;
	color:#333333 !important;
	margin: 3.5px 0px;
	width: 100%;
}	
.contentMenu{
	flex-wrap: nowrap !important;
}
.transparencia{
	float: left; width: 80%; padding: 1% 10%
}
h3{
	color: #C7552B !important;
}
.ui-state-active{
	border: 1px solid #0078b2 !important;
	background: #0078b2 !important;
	color: white !important;
}

#imageGallery { padding: 3% 0%; float: left; background:#fff; margin: 0 }
#imageGallery .sliderImagen { padding: 0; float: left; width: 56%; margin-right: 4%; border-radius: 0px 40px 40px 0px }
#imageGallery .sliderImagen img { width: 100%; height: 700px; border-radius: 0px 40px 40px 0px }
#imageGallery .sliderImagen span { position: relative; background: url("../img/overlaySlider.png") bottom left no-repeat; margin-top: -207px; width: 80%; height: 200px; display: block; background-size: 76%; }
#imageGallery .sliderTextos { padding: 0; float: left; width: 40%; background: url("../img/bgTextoSlider.jpg") center right no-repeat; height: 700px; background-size: 100%; border-radius: 40px 0px 0px 40px }
#imageGallery .sliderTextos h2 { color:#fff; padding: 20% 15% 0%; font-size: 2em; line-height: 36px }
#imageGallery .sliderTextos p { color:#525252; padding: 0% 15%; font-size: 1.5em; line-height: 30px }

.separadorVertical { float:left; height: 300px;  width: 0.5%; margin-right: 5% }
.dimensionLeft, .dimensionRight { float: left; width: 100%; margin-bottom: 100px }

#dimensionesHome1 { float: left; width: 70%; padding: 5% 15% 0%; background: url(../img/bgSectionGray.png); }
#dimensionesHome1 h2 { font-weight: bolder; color:#000 !important; text-align: center; font-size: 2.5em; border-left: 10px solid #FF605C; width: 260px; padding-left: 0px; margin: 0px auto; line-height: 30px }
#dimensionesHome1 p { color:#000 !important; text-align: center; margin-bottom: 100px; width: 90%; padding: 0% 5% }
#dimensionesHome1 .dimensionDetail { float: left; width: 44% }
#dimensionesHome1 .dimensionImage { float: left; width: 50%; padding: 0%; text-align: center }
#dimensionesHome1 .dimensionImage img { max-height: 300px }
#dimensionesHome1 .dimensionDetail h3 { font-weight: bolder; color:#000 !important; margin-top:0px; font-size: 2em }
#dimensionesHome1 .dimensionDetail span { float: left }
#dimensionesHome1 .dimensionDetail h4 { width: 100px; text-align: center; padding: 5px 10px; border-radius: 5px; margin-top: 100px; float: right }
#dimensionesHome1 .dimensionDetail h4 a { font-weight: bolder; color:#fff !important }

#dimensionesHome2 { float: left; width: 70%; padding: 5% 15% 0%; background: url(../img/bgSectionGray.png); }
#dimensionesHome2 h2 { font-weight: bolder; color:#000 !important; text-align: center }
#dimensionesHome2 p { color:#000 !important; text-align: center }
#dimensionesHome2 .dimensionDetail { float: left; width: 44%  }
#dimensionesHome2 .dimensionImage { float: left; width: 50%; padding: 0%; text-align: center }
#dimensionesHome2 .dimensionImage img { max-height: 300px }
#dimensionesHome2 .dimensionDetail h3 { font-weight: bolder; color:#000 !important; margin-top:0px; font-size: 2em }
#dimensionesHome2 .dimensionDetail span { float: left }
#dimensionesHome2 .dimensionDetail h4 { width: 100px; text-align: center; padding: 5px 10px; border-radius: 5px; margin-top: 100px; float: right }
#dimensionesHome2 .dimensionDetail h4 a { font-weight: bolder; color:#fff !important }

#noticiasHome { float: left; width: 80%; padding: 5% 10%; background: url("../img/bgNoticias.png") center 280px no-repeat; background-size: 100% }
#noticiasHome h2 { font-weight: bolder; color:#000 !important; text-align: center; font-size: 2.5em; border-left: 10px solid #FF605C; width: 200px; padding-left: 0px; margin: 0px auto; line-height: 30px; margin-bottom: 50px }
#noticiasHome .noticiaImagen { float: left; width: 44%; height: 540px; border:10px solid #FF605C; border-radius: 20px }
#noticiasHome .noticiaImagen img { height: 540px; width: 100%; border-radius: 10px; }
#noticiasHome .noticiaTexto { float: left; width: 51%; padding-left: 3%; color: #fff }
#noticiasHome h3 { margin: 0%; font-size: 1.5em; padding: 7% 0% }
#noticiasHome h3 a { color:#525252 !important }
#noticiasHome h3 a:hover {color: #82B440 !important; text-decoration: underline; background: #fff }
#noticiasHome h4 { margin: 3% auto; background: #FF605C; border-radius: 5px; text-align: center; width: 18%; padding: 1% 0%; float: right }
#noticiasHome h4:hover { background: #82B440; cursor: pointer; transition: .3s; border-style: solid; }
#noticiasHome h4 a { color: #fff }
#noticiasHome h4 a:hover {color: #fff }
#noticiasHome .noticiaTexto p { margin: 3% 0% 7%; font-size: 1em; float: left; height: 200px }
#noticiasHome .textoFechaAct { float:left; margin: 3% 0%; width: 100% }

#timelineHome { background: #fff; padding: 5% 10%; width: 80%; float: left }
#timelineHome h2 { font-weight: bolder; color:#000 !important; text-align: center; font-size: 2.5em; border-left: 10px solid #FF605C; width: 310px; padding-left: 0px; margin: 0px auto; line-height: 30px }

#mapasHome { background: #fff; padding: 5% 0% 0%; width: 100%; float: left }
#mapasHome h2 { font-weight: bolder; color:#000 !important; text-align: center; font-size: 2.5em; border-left: 10px solid #FF605C; width: 140px; padding-left: 0px; margin: 0px auto; line-height: 30px }
#mapasHome div { border-top: 2px solid #82b440; border-bottom: 2px solid #82b440; padding: 4% 0%; width: 100%; background: url(../img/bgSectionGray.png); margin-top: 50px }

#eventosHome { padding: 10% 10% 0%; width: 80%; float: left }
#eventosHome h2 { font-weight: bolder; color:#000 !important; text-align: center; font-size: 2.5em; border-left: 10px solid #FF605C; width: 355px; padding-left: 0px; margin: 0px auto; line-height: 30px }
#eventosHome ul { background: url("../img/bgEventos.png") #fff no-repeat center; height: 650px; padding: 0px }
#eventosHome ul li { list-style: none; float: left; width: 90%; padding: 5% }
#eventosHome ul li .fecha { float: left; width: 16%; padding: 1% 80% 3% 4%; color:#FF605C; font-size: 2em; font-weight: bold; text-align: center }
#eventosHome ul li .foto { float: left; width: 30%; padding: 5% }
#eventosHome ul li .foto img { border-radius: 15px; border:15px solid #fff; width: 100%; float: left }
#eventosHome ul li .detalle { float: left; width: 50%; padding: 5% 5% 2%; }
#eventosHome h4 { background: #FF605C; border-radius: 5px; text-align: center; width: 10%; padding: 1% 0%; float: right; margin: 0% 5% }
#eventosHome h4:hover { background: #82B440; cursor: pointer; transition: .3s; border-style: solid; }
#eventosHome h4 a { color: #fff }
#eventosHome h4 a:hover {color: #fff }

#contactoHome { padding: 5% 10%; width: 80%; float: left; background: url(../img/bgContacto.png) #fff no-repeat fixed; margin: 0%; background-size: 140% }
#contactoHome .contactoDetail { width: 40%; padding: 5%; float: left }
#contactoHome .contactoDetail h2 { font-weight: bolder; color:#000 !important; text-align: center; font-size: 2.5em; border-left: 10px solid #8CC63E; width: 250px; padding-left: 0px; line-height: 30px }
#contactoHome .contactoForm { width: 37%; padding: 4% 5%; float: left; background: #8CC63E; border-radius: 10px; margin: 1% 0% 1% 3% }
#contactoHome .contactoForm .campos { background: #fff; width: 40%; margin: 2%; padding: 2% 2.4%; border: 1px solid #8CC63E; float: left }
#contactoHome .contactoForm .textos { background: #fff; width: 90%; margin: 2%; padding: 2%; border: 1px solid #8CC63E; float: left }
#contactoHome .contactoForm .campos input[type=text] { background: #fff; border:none; width: 100%; color:#666 }
#contactoHome .contactoForm .campos input[type=text]::placeholder { color: #8CC63E; opacity: 1 }
#contactoHome .contactoForm .campos input[type=text]:-ms-input-placeholder { color: #8CC63E }
#contactoHome .contactoForm .campos input[type=text]::-ms-input-placeholder { color: #8CC63E }
#contactoHome .contactoForm .campos input:focus { outline: none; }
#contactoHome .contactoForm .textos textarea { background: none; border:none; width: 100%; color:#666 }
#contactoHome .contactoForm .textos textarea:focus { outline: none; }
#contactoHome .contactoForm .textos textarea::placeholder { color: #8CC63E; opacity: 1 }
#contactoHome .contactoForm .textos textarea:-ms-input-placeholder { color: #8CC63E }
#contactoHome .contactoForm .textos textarea::-ms-input-placeholder { color: #8CC63E }
#contactoHome .contactoForm .enviar { background: #ffffff; color: #8CC63E; width: 30%; text-align: center; float: right; border:none; padding: 1%; border-radius: 5px; font-size: 1em; cursor: pointer; margin-right: 18px }
#contactoHome .contactoForm .enviar:hover { background: #000000; color: #fff }

#partnersHome { padding: 5% 10%; width: 80%; float: left; background: url(../img/bgSectionGray.png) }
#partnersHome .partnersImages { width: 45%; padding: 5% 0% 5% 5%; float: left }
#partnersHome .partnersImages div { width: 100%; padding: 0%; border-radius: 10px; background: #fff; margin:3% 0% }
#partnersHome .partnersImages div ul { list-style: none; padding: 0%; display: grid; grid-gap: 0px; grid-template-columns: repeat(3, 1fr); border-radius: 10px }
#partnersHome .partnersImages div ul li { border:1px solid #B4B4B4; background: #fff; padding: 30px 20px; text-align: center }
#partnersHome .partnersImages div ul li img { height: 40px }
#partnersHome .partnersImages div ul li:nth-child(1){ border-top-left-radius: 10px }
#partnersHome .partnersImages div ul li:nth-child(3){ border-top-right-radius: 10px }
#partnersHome .partnersImages div ul li:nth-child(4){ border-bottom-left-radius: 10px }
#partnersHome .partnersImages div ul li:nth-child(6){ border-bottom-right-radius: 10px }
#partnersHome .partnersDetail { width: 40%; padding: 5%; float: left }
#partnersHome .partnersDetail h2 { font-weight: bolder; color:#000 !important; text-align: center; font-size: 2.5em; border-left: 10px solid #FF605C; width: 270px; padding-left: 0px; line-height: 30px }

#historico .articulo { float: left; width: 80%; margin: 1% 8%; padding: 2%; height: auto; border-bottom: 1px solid #ccc }
#historico .articulo:last-child { border-bottom: none }
#historico .articulo .fotos { float: left; width: 25%; margin-right: 5% }
#historico .articulo .fotos img { width: 100%; height: auto }
#historico .articulo .fotos img:hover { -webkit-transform:scale(1.1);transform:scale(1.1); transition: transform .5s }
#historico .articulo .fotos { overflow: hidden}
#historico .articulo .texto { float: left; width: 70% }
#historico .articulo .texto h2 { width: 100%; float: left; color: #82b440; margin: 0% 0% 1% }
#historico .articulo .texto h2 a { color: #82b440; text-decoration: underline }
#historico .articulo .texto h2 a:hover { color: #fff!important; background:  #82b440}
#historico .articulo .texto p { color: #6A6A6A; float: left; margin: 8px 0px; width: 100% }
#historico .articulo .texto .fechaHistorico .textofechahi { font-weight: bold }

#glosario, #articulo { float:left; width:96%; margin:2% }
#articulo .fotos img { width:100% }
#articulo table { width:100% }
#faqs { float:left; width:80%; padding:1% 10%; margin:0% }

#tabs h2 { margin:0px; font-size: 1.2em }
.normatividad { height: auto !important; padding: 1em !important }
.norma { float: left;width: 100%; padding: 1% 0%; font-size: 12px }
.norma h4 {float: left; width: 12%;padding: 0%; margin: 0%;font-size: 12px !important; text-transform: uppercase }
.norma .icono { float: left; width: 8%; padding: 0% 1%; text-align: center }
.norma .fecha { float: left; width: 8%; padding: 0% 1%; text-align: center }
.norma .descripcion { float: left; width: 56%; padding: 0% 1%; height: 14px }
.norma .ano { float: left; width: 8%; padding: 0% 1%; text-align: center }

#contacto { float: left; width: 90%; padding: 1% 5% }
#contacto h2  { float: left; margin: 0%; padding: 1% 10%; width: 80% }
#formulario { float: left; margin: 1%; padding: 1% 10%; width: 80% }
#formulario h3  { float: left; margin: 0% 0% 2%; padding: 1% 2%; width: 96%; background: #f8f8f8 }
#formulario .nombrecampo { float: left; margin: 1%; padding: 0% 1%; width: 40% }
#formulario .campo { color:#525252!important; float: left; margin: 0.5% 0%; padding: 0% 1%; width: 52%; }
#formulario .campo input[type="text"], #formulario .campo input[type="number"], #formulario textarea { float: left; padding: 2%; width:96%; border: 1px solid #ccc; border-radius: 5px; }
#formulario input[type="button"] { padding: 2%; width:26%; border: none; border-radius: 5px; background: #82b440; color: #fff; margin:1% 35% 0% }
#formulario input[type="file"]{ padding: 5px 0%; width: 100%; }
#formulario select { float: left; padding: 2%; width:100%; border: 1px solid #ccc; border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image:
    linear-gradient(45deg, transparent 50%, #82b440 50%),
    linear-gradient(135deg, #82b440 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat }
#formulario select option { color:#525252 }

#opendata { float: left; width: 80%; padding: 0% 10% }
#opendata .keyword { float: left; width: 98%; padding: 1%; font-size: 14px }
#opendata .keyword .nombre { float: left; width: 40%; padding: 0%; margin: 0%; font-size: 14px !important }
#opendata .keyword .enlace { float: left;width: 58%;padding: 0% 1%; text-align: center }

.keyword {
float: left;
width: 98%;
padding: 1%;
font-size: 12px
}

.keyword .nombre {
float: left;
width: 30%;
padding: 0%;
margin: 0%;
font-size: 12px !important;
}

.keyword .dependencia {
float: left;
width: 46%;
padding: 0% 1%;
text-align: center
}

.keyword .enlace {
float: left;
width: 20%;
padding: 0% 1%;
text-align: center
}

#eventos { float: left; width: 80%; margin: 1% 10%; list-style: none; padding: 0%; display: grid; grid-gap: 0px; grid-template-columns: repeat(2, 1fr); }
#eventos .evento { float: left; margin: 1%; padding: 0%; border: 1px solid #00953A; width: 98%; height: 112px }
#eventos .evento .fecha { float: left; margin: 0%; padding: 0%; width: 20%; background: #f8f8f8; height: 112px }
#eventos .evento .fecha .dia { float: left; width: 90%; padding: 0px 5% 0px; font-size: 3em; text-align: center }
#eventos .evento .fecha .mes { float: left; width: 90%; padding: 3px 5%; text-align: center; }
#eventos .evento .fecha .hora { float: left; width: 90%; padding: 3px 5%; text-align: center }

#eventos .evento .detalle { float: left; margin: 0%; padding: 10px 2%; width: 56%; height: 92px }
#eventos .evento .detalle .lugar { float: left; width: 100%; min-height: 30px }
#eventos .evento .detalle .actividad { float: left; width: 100%; min-height: 30px; margin-bottom:10px; color:#0078b2 }
#eventos .evento .telefono { float: left; width: 100%; min-height: 30px }

#eventos .evento .foto { float: left; margin: 0%; padding: 0%; width: 20%; height: 112px }
#eventos .evento .foto img { float: left; margin: 0%; padding: 0%; width: 100%; height: 100% }

#cursospanel { float: left; width: 20%; margin: 0% 0% 0% 10% }
#cursospanel ul { margin: 0; padding: 0 }
#cursospanel ul li { list-style: none; padding: 10px 5%; border-bottom: 1px solid #ccc; width: 90% }
#cursospanel ul li.activo { background: #e7e7e7 }
#cursospanel ul li.activo a { color: #00953A }
#cursos { float: left; width: 59%; margin: 0% 5% 0% 1% }
#cursos h2 { float: left; width: 100%; margin: 0% }
.cursos { float: left; width: 98%; margin: 1%; list-style: none; padding: 0%; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); }
.cursos .curso { float: left; margin: 1%; padding: 0%; border: 1px solid #ccc; width: 98% }
.cursos .curso .foto { float: left; margin: 0%; padding: 0%; width: 100%; }
.cursos .curso .foto img { float: left; margin: 0%; padding: 0%; width: 100%; height: auto }
.cursos .curso .titulo { float: left; margin: 0%; padding: 5px 2%; width: 96%; height: 40px; text-align: center; font-weight: bolder; align-items: center; display: flex; justify-content: center; }
.cursos .curso .detalle { float: left; margin: 0%; padding: 0px 5% 10px; width: 90%; font-size: 0.8em; height: 120px; }
.cursos .curso .detalle .area { float: left; width: 100% }
.cursos .curso .detalle .sede { float: left; width: 100% }
.cursos .curso .detalle .cupos { float: left; width: 100% }
.cursos .curso .detalle .horario { float: left; width: 100% }
.cursos .curso .detalle .publico { float: left; width: 100%; text-align: center; margin-top: 10px; font-weight: bold; align-items: center; display: flex; justify-content: center; height: 40px; color:#E70E11 }
.cursos .curso .detalle .docente { float: left; width: 100%; color:#00953A; font-weight: bold }
.cursos .curso .boton { float: left; margin: 0%; width: 100%; height: auto; background: #00b2bd; color:#fff; text-align: center }
.cursos .curso .boton a { padding: 10px 2%; display: block; cursor: pointer; color:#fff }
.cursos .curso .boton a:hover { background: #3478B1 }
.cursos .curso .botonOculto { display: none }

#carreras { float: left; width: 80%; margin: 0% 10% }
#carreras h2 { float: left; width: 100%; margin: 0% }
.carreras { float: left; width: 98%; margin: 1%; list-style: none; padding: 0%; display: grid; grid-gap: 10px; grid-template-columns: repeat(2, 1fr); }
.carreras .carrera { float: left; margin: 1%; padding: 0%; border: 1px solid #ccc; width: 98% }
.carreras .carrera .foto { float: left; margin: 0%; padding: 0%; width: 100%; }
.carreras .carrera .foto img { float: left; margin: 0%; padding: 0%; width: 100%; height: auto }
.carreras .carrera .titulo { float: left; margin: 0%; padding: 5px 2%; width: 96%; height: 40px; text-align: center; font-weight: bolder; align-items: center; display: flex; justify-content: center; }
.carreras .carrera .detalle { float: left; margin: 0%; padding: 0px 5% 10px; width: 90%; font-size: 0.8em; height: 120px; }
.carreras .carrera .detalle .area { float: left; width: 100% }
.carreras .carrera .detalle .sede { float: left; width: 100% }
.carreras .carrera .detalle .cupos { float: left; width: 100% }
.carreras .carrera .detalle .horario { float: left; width: 100% }
.carreras .carrera .detalle .publico { float: left; width: 100%; text-align: center; margin-top: 10px; font-weight: bold; align-items: center; display: flex; justify-content: center; height: 40px; color:#E70E11 }
.carreras .carrera .detalle .docente { float: left; width: 100%; color:#00953A; font-weight: bold }
.carreras .carrera .boton { float: left; margin: 0%; width: 100%; height: auto; background: #00b2bd; color:#fff; text-align: center }
.carreras .carrera .boton a { padding: 10px 2%; display: block; carrerar: pointer; color:#fff }
.carreras .carrera .boton a:hover { background: #3478B1 }
.carreras .carrera .botonOculto { display: none }

#registroEstudiante { width: 86%; margin: 0% 3%; padding: 3% 4%; position: fixed; z-index: 1; display: none; top:40px; bottom:40px; background: #fff; -webkit-box-shadow: 0px 0px 5px 5px rgba(214,207,214,1); -moz-box-shadow: 0px 0px 5px 5px rgba(214,207,214,1); box-shadow: 0px 0px 5px 5px rgba(214,207,214,1); }
#registroEstudiante .cerrar { float: right; font-size: 2em; margin-top: -10px; cursor: pointer }
#registroEstudiante .cerrar a { color:#00b2bd }
#registroEstudiante h2 { text-align: center; width: 100%; margin: 0px; color:#00b2bd }
#registroEstudiante ul { float: left; width: 100%; margin: 1% 0%; list-style: none; padding: 0%; display: grid; grid-gap: 5px 20px; grid-template-columns: repeat(4, 1fr); }
#registroEstudiante ul li { padding: 0px; height: 32px }
#registroEstudiante ul li input[type=text] { width: 92%; padding: 2% 4% }
#registroEstudiante ul li input[type=date] { width: 92%; padding: 2% 4% }
#registroEstudiante ul li select { width: 100%; padding: 2% 4% }
#registroEstudiante ul.terminos li:nth-child(1){ grid-row: 1; grid-column: 1/5; text-align: center; padding-top: 5px }
#registroEstudiante ul.terminos li:nth-child(2){ grid-row: 2; grid-column: 1/5; text-align: center; }
#registroEstudiante ul.terminos li:nth-child(3){ grid-row: 3; grid-column: 1/5; text-align: center; }
#registroEstudiante ul.terminos li #Enviar { background: #00b2bd; color:#fff; border:none; padding: 5px 10px; margin-top: 10px; border-radius: 5px }
#registroEstudiante ul.terminos li #Cancelar { background: #00b2bd; color:#fff; border:none; padding: 5px 10px; float: left; margin-top: 10px; border-radius: 5px }

#registroCarrera { width: 66%; margin: 0% 13%; padding: 2% 4%; position: fixed; z-index: 1; display: none; top:40px; bottom:40px; background: #fff; -webkit-box-shadow: 0px 0px 5px 5px rgba(214,207,214,1); -moz-box-shadow: 0px 0px 5px 5px rgba(214,207,214,1); box-shadow: 0px 0px 5px 5px rgba(214,207,214,1); overflow-y: auto }
#registroCarrera .cerrar { float: right; font-size: 2em; margin-top: -10px; cursor: pointer }
#registroCarrera .cerrar a { color:#00b2bd }
#registroCarrera h2 { text-align: center; width: 100%; margin: 0px; color:#00b2bd }
#registroCarrera ul { float: left; width: 100%; margin: 1% 0%; list-style: none; padding: 0%; display: grid; grid-gap: 5px 20px; grid-template-columns: repeat(4, 1fr); }
#registroCarrera ul li { padding: 0px; height: 32px }
#registroCarrera ul li input[type=text] { width: 92%; padding: 2% 4% }
#registroCarrera ul li input[type=date] { width: 92%; padding: 2% 4% }
#registroCarrera ul li select { width: 101%; padding: 2% 4% }
#registroCarrera ul.terminos li:nth-child(1){ grid-row: 1; grid-column: 1/5; text-align: center; padding-top: 5px }
#registroCarrera ul.terminos li:nth-child(2){ grid-row: 2; grid-column: 1/5; text-align: center; }
#registroCarrera ul.terminos li:nth-child(3){ grid-row: 3; grid-column: 1/5; text-align: center; }
#registroCarrera ul.terminos li #Enviar { background: #00b2bd; color:#fff; border:none; padding: 5px 10px; margin-top: 10px; border-radius: 5px }
#registroCarrera ul.terminos li #Cancelar { background: #00b2bd; color:#fff; border:none; padding: 5px 10px; float: left; margin-top: 10px; border-radius: 5px }
#txtNombreClub { display: none }

.pagar .info { width: 90%; padding: 0% 5% 2%;}
.pagar .info h1 { margin:1% 0% 2% !important }
.pagar .info .tnombre, .pagar .info .tdireccion, .pagar .info .temail, .pagar .info .tcelular, .pagar .info .ttalla, .pagar .info .tcategoria { width: 15%; padding: 1% 0% 1% 15%; float: left; font-weight: bold; }
.pagar .info .nombre, .pagar .info .direccion, .pagar .info .email, .pagar .info .celular, .pagar .info .talla, .pagar .info .categoria { width: 60%; padding: 1% 5%; float: left; }
.pagar .info .total { width: 40%; padding: 2% 30%; float: left; font-weight: bold; }
.pagar .info .total .valor { width: 100%; padding: 2% 0% 4%; float: left; text-align: center; }
.pagar .info .total .boton { width: 30%; padding: 2% 10%; float: left; margin:20px 25%; background:#1A4594; text-align: center; border-radius: 10px }

#mapa { width: 80%; margin: 2% 10%; padding: 0%; float: left; border: 1px dotted #0078b2 }
#sitemap { float: left; width: 80%; padding: 1% 10% }

.popover{position:absolute;top:0;left:0;z-index:1060;display:none;width:180px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto;background: #fff;}
.popover.top{margin-top:-10px}
.popover.right{margin-left:10px}
.popover.bottom{margin-top:10px}
.popover.left{margin-left:-10px}
.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}
.popover-content{padding:9px 14px}
.popover-content a { color:#1d4458; text-decoration: none; font-weight: bold }
.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}
.popover>.arrow{border-width:11px}
.popover>.arrow:after{content:"";border-width:10px}
.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}
.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}
.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}
.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}
.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}
.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}
.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}
.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}
.ol-popup-closer { text-decoration: none;  position: absolute; top: 2px; right: 8px; color: #b00000 !important }
.ol-popup-closer:after { content: "X" }

#mensaje { float: left; width: 96%; padding: 2%; background: #f8f8f8; text-align: center }
#mensaje .verde { color: #fff; float: left; width: 80%; padding: 2% 10%; background: #26701D; text-align: center }
#mensaje .rojo { color: #fff; float: left; width: 80%; padding: 2% 10%; background: #E70E11; text-align: center }

#txtArchivo3, #txtArchivo4, #txtArchivo5, #txtArchivo6 { display: none }

#content { float: left; width: 100%; margin:0% }
#article { float: left; width: 61%; margin: 2% 2% 2% 5%; }

#sidebar { float: right; padding: 0% 1%; width: 25%; margin-right: 5% }
#sidebar h2 { width: 100%; text-align: center }
#sidebar .articulos { float: left; width: 96%; margin: 1%; padding: 1%; align-items: center }
#sidebar .articulos .fotos img:hover { zoom:1.1; }
#sidebar .articulos h3 { width: 70%; margin: 0% 0% 0% 5%; display: inline !important; float: left }
#sidebar .articulos h3 a { color: #82b440; font-size: 16px }
#sidebar .articulos h3 a:hover { color:#fff; background: #82b440; text-decoration: underline }
#sidebar .articulos p { color: #6A6A6A; float: left }
#sidebar .articulos .fotos { width: 25%; float: left }
#sidebar .articulos .fotos img { width: 100% }
#sidebar .articulos .fotos img:hover { -webkit-transform:scale(1.1);transform:scale(1.1); transition: transform .5s }
#sidebar .articulos .fotos { overflow: hidden }

ul.col-2 { list-style: none; padding: 0%; display: grid; grid-gap: 30px; grid-template-columns: repeat(2, 1fr); }
ul.col-3 { list-style: none; padding: 0%; display: grid; grid-gap: 30px; grid-template-columns: repeat(3, 1fr); }
ul.col-4 { list-style: none; padding: 0%; display: grid; grid-gap: 30px; grid-template-columns: repeat(4, 1fr); }

.ads { float: left; width: 80%; margin: 2%; padding: 0% 8%; display: grid; grid-gap: 0px; grid-template-columns: repeat(3, 1fr) }
.ads .articulo { float: left; width: 90%; padding: 6% 5% 5%; margin: 0%; height: auto; background: #f7f7f7 }
.ads .articulo:hover { background: #eef5f0 !important; }
.ads .articulo:nth-of-type(2n){ background: #fff }
.ads .articulo h2 { float: left; width: 92%; overflow: hidden; padding: 0% 4%; margin: 2% 0% 1%; font-size: 1em; font-weight: bold }
.ads .articulo h2 a { color:#7c7b7b; text-decoration: none; display: block }
.ads .articulo h2 a:hover { text-decoration: underline }
.ads .articulo .mobile { padding: 10px 6% 10px 14%; float: left; width: 80%; margin: 0%; font-size: 0.8em; background: url('https://www.sabaneta.gov.co/themes/img/icons/iconMobile.png') 4% center no-repeat; background-size: 8% }
.ads .articulo h3 { padding: 5px 2%; float: left; width: 18%; margin: 5px 3%; font-size: 0.8em; text-align: center; color:#fff; background: #078930; border-radius: 5px; line-height: 12px; }
.ads .articulo .foto { float: left; width: 50%; overflow: hidden; border: 1px dotted #ccc; margin:0px 25% }
.ads .articulo .foto a { display: block}
.ads .articulo .foto a img { height: auto; width: 100%; margin: 0%; background: #fff }
.ads .articulo p { float: left; width: 98%; margin: 0%; padding: 1% }
.ads .articulo .fecha { color:#ffa800 }
.ads .articulo .descripcion { margin: 0% 5%; float: left; width: 90% }
.ads .articulo:nth-child(1) .descripcion { float: left; width: 40%; overflow: hidden }

#controlSlider { float: left; margin-top: -26px; position: relative; width: 94%; height: 20px; padding: 8px 3% }
#controlSlider .btn-success {color: #3478B1; border-color: #3478B1 !important; border-radius: 3px; background-color: #FFFFFF;
    padding-top: 3px; padding-bottom: 3px; border-width: 1px }
#controlSlider .btn-success:hover {color: #FFFFFF; background-color: #3478B1; cursor: pointer }
#controlSlider .btn-success:active {color: #FFFFFF; background-color: #004884}

@media only screen and (max-width: 959px){
	ul.col-2 { list-style: none; padding: 0%; display: grid; grid-gap: 30px; grid-template-columns: repeat(1, 1fr); }
	ul.col-3 { list-style: none; padding: 0%; display: grid; grid-gap: 30px; grid-template-columns: repeat(1, 1fr); }
	ul.col-4 { list-style: none; padding: 0%; display: grid; grid-gap: 30px; grid-template-columns: repeat(1, 1fr); }
	.ads { float: left; width: 80%; margin: 2%; padding: 0% 8%; display: grid; grid-gap: 0px; grid-template-columns: repeat(1, 1fr) }
	#eventos { float: left; width: 80%; margin: 1% 10%; list-style: none; padding: 0%; display: grid; grid-gap: 0px; grid-template-columns: repeat(1, 1fr); }
	#migas {
		padding: 4% 10%;
	}
	#tituloH1 { padding: 4% 5% 0%; width: 90%; font-size: 1.5em }
	#glosario, #faqs, #articulo {
		float: left;
		width: 90%;
		margin: 10px 5%;
	}
	#articulo p { width: 100%; padding: 1% 0%; margin: 1% 0% }
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
		float: left;
		padding: 8px;
		text-decoration: none;
	}
	figure.table { 
		width: 100%;
		padding: 0%;
		margin: 0%;
	}
	.norma h4 {
		width: 100%
	}
	.norma .icono, .norma .fecha {
		width: 50%;
		padding: 0%;
		margin: 0%;
	}
	.ui-tabs .ui-tabs-panel {
		padding: 0% !important
	}
	.normatividad {
		padding: 0.5em !important;
	}
	.norma .descripcion, .norma .ano {
		display: none
	}
	#articulo .fotos img {
		max-width: 100%
	}
	#historico .articulo .fotos, #historico .articulo .texto {
		float: left;
		width: 100%;
		margin-right: 0%;
	}
	#noticiashome p, #blogHome p {
		display: none 
	}
	#noticiashome h4, #blogHome h4 {
		width: 50%;
		padding: 3%
	}
	.scrollup {
		display: none !important
	}
	#formulario { padding: 1% 0%; width: 98%; margin: 1% }
	#formulario .nombrecampo, #formulario .campo { float: left; margin: 1%; padding: 0% 1%; width: 96% }
	#contacto h2 { float: left; margin: 0%; padding: 3% 0% 1%; width: 98%; }
	#registroCarrera ul {  grid-template-columns: repeat(1, 1fr); }
	.pagar .info .tnombre, .pagar .info .tdireccion, .pagar .info .temail, .pagar .info .tcelular, .pagar .info .ttalla, .pagar .info .tcategoria { width: 90%; padding: 1% 5%; float: left; font-weight: bold; }
	.pagar .info .nombre, .pagar .info .direccion, .pagar .info .email, .pagar .info .celular, .pagar .info .talla, .pagar .info .categoria { width: 96%; padding: 1% 5%; float: left; }
	.pagar .info .total { width: 90%; padding: 2% 5%; float: left; font-weight: bold; }
	.carreras { float: left; width: 98%; margin: 1%; list-style: none; padding: 0%; display: grid; grid-gap: 10px; grid-template-columns: repeat(1, 1fr); }
}

.myInput {
    display: none;
}