@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

.btnVolver {
	width: auto;
	height: auto;
	float: left;
	margin-left: 5%;
	margin-top: 15px;
}

#container {
	width: 100%;
	height: auto;
	float: left;
	background-color: #E9E9E9;
	padding-bottom: 20px;
}

#nubeHeader {
	width: 379px;
	height: auto;
	float: left;
	text-align: center;
	margin-left: 140px;
	margin-top: 10px;
	font-size: 20px;
	color: #666;
	font-size: 18px;
}

/* Info Util */
#contentInfo {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 15px;
}

#columnas {
	width: 100%;
	float: left;
}

.titleInfo {
	width: 100%;
	height: auto;
	float: left;
	font-size: 16px;
	color: #333;
}

.titleInfoBlog {
	width: 100%;
	height: auto;
	float: left;
	color: #333;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
}

.titleInfoBlog p {
	color: #333;
	font-size: 20px;
	text-align: left;
	margin: 0;
}

.descInfo {
	width: 100%;
	height: auto;
	float: left;
	text-align: left;
}

.descInfo p {
	font-size: 12px;
	color: #666;
}

.imgInfo {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 10px;
	text-align: center;
}

.imgInfo img {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;t
	text-align: center;
}

.imgInfoBlog {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 10px;
	text-align: left;
}

.imgInfoBlog p {
	font-size: 16px;
	color: #333;
	font-weight: 300;
}

.imgInfoBlog img {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-align: center;
	float: left;
	margin-right: 10px;
	max-width: 200px;
}

.ContentbtnDetalle {
	width: 100%;
	height: 23px;
	float: left;
}

.btnDetalle {
	width: 60px;
	height: 20px;
	float: right;
	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	background-color: #CCC;
	margin-right: 0px;
	margin-top: 0px;
	background-color: #CCC;
	color: #333;
	font-size: 14px;
	transition:all 0.3s;
	cursor: pointer;
	text-align: center;
	margin-bottom: 5px;
}

.btnDetalle:hover {
	background-color: #666;
	color: #FFF;
}

.btnDetalleBlog {
	min-width: 130px;
	height: 17px;
	float: right;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #CCC;
	margin-right: 0px;
	margin-top: 0px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #666;
	color: #FFF;
	font-size: 12px;
	transition:all 0.3s;
	cursor: pointer;
	text-align: center;
}

.btnDetalleBlog:hover {
	background-color: #333;
	color: #FFF;
}

/* ========= */
/* Detalle */
#contentDet {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 20px;
}

.headertitlesDet  {
	width: 100%;
	height: auto;
	float: left;
	margin-bottom: 15px;
}

.titleDet {
	width: 100%;
	height: auto;
	margin-top: 10px;
	float: left;
}

.titleDet p {
	font-size: 24px;
	color: #333;
}

.imgFirstDet {
	width: 100%;
	height: auto;
	float: left;
	text-align: center;
}

.imgFirstDet img {
	background-color: #FFF;
	box-shadow: 0 0 5px #666; 
	padding:5px;
	-webkit-box-shadow: 0 0 5px #666; 
	-moz-box-shadow: 0 0 5px #666;
	margin-bottom: 20px;
}

.descDet {
	width: 100%;
	height: auto;
	float: left;
	color: #666;
	font-size: 16px;
	text-align: justify;
}

.titlesleftDet {
	width: 100%;
	height: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
	text-align: center;
}

.titlesleftDet p {
	font-size: 24px;
	color: #0F715A;
}

#sube img:hover{
	cursor: pointer;
}

#volver {
	position: absolute;
	margin-top: 10px;
	left: 20px;
	z-index: 100;
}

.titlesleft {
	width: 230px;
	height: 30px;
	float: left;
	text-align: left;
	padding-left: 20px;
	font-size: 18px;
	background-color: #87CC99;
	color: #FFF;
	padding-top: 5px;
	margin-left: 3%;
}
.titlesright {
	width: 230px;
	height: 30px;
	float: right;
	text-align: right;
	padding-right: 20px;
	font-size: 18px;
	background-color: #87CC99;
	color: #FFF;
	padding-top: 5px;
	margin-right: 3%;
}
/* ======= */

.fecha {
	font-size: 12px;
	color: #333;
	font-weight: 300;
}

.titleBlog {
	font-size: 16px;
	color: #333;
}

.descResp {
	font-size: 14px;
	color: #666;
}

/* News Home */

.contentNewListHome {
	width: 100%;
	height: auto;
	float: left;
	border-bottom: 1px solid #CCC;
	margin-top: 5px;
}

.titleNewListHome {
	width: 100%;
	min-height: 40px;
	float: left;
	text-align: left;
}

.titleNewListHome p {
	font-size: 16px;
	color: #333;
}

.descNewListHome {
	width: 100%;
	height: auto;
	float: left;
	text-align: justify;
}

.descNewListHome p {
	font-size: 12px;
	color: #666;
}

/* DETALLE */

.fechaDetalle {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 20px;
	margin-bottom: 20px;
}

.fechaDetalle p {
	font-size: 22px;
	font-weight: 300;
	color: #666;
}

.imgDetalle {
	width: 100%;
	height: auto;
	display: -webkit-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-flex;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  display: flex;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  align-self: center;
  align-content: center;
  align-items: center;
}

.imgDetalle img {
	/*border: 3px solid #CCC;*/
}

.txtDetalle {
	width: 90%;
	height: auto;
	float: left;
	margin-top: 30px;
	margin-bottom: 30px;
}

.txtDetalle p {
	font-size: 18px;
	font-weight: 300;
	color: #333;
	text-align: justify;
}

.unidad {
	width: 200px;
	height: 200px;
	margin: 15px;
	background-color: #FFF;
	box-shadow: 0px 0px 30px #CCC;

	display: -webkit-flex;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	display: -moz-flex;
	-moz-box-orient: horizontal;
	-moz-box-pack: center;
	-moz-box-align: center;
	display: flex;
	box-orient: horizontal;
	box-pack: center;
	box-align: center;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	align-self: center;
	align-content: center;
	align-items: center;
	
	transition: all 0.3s;
}

.unidad:hover {
	cursor: pointer;
}

.imgDetalle img:hover {
	cursor: pointer;
}