/* CSS Document */
* {
	margin         : 0px;
	padding        : 0px;
	box-sizing     : border-box;
	text-decoration: none;
	font-family    : Helvetica, arial, sans-serif;
	font-size      : 14px;
}

body {
	background: #e9e9e9;
}


.hide {
	display: none;
}

.container {
	background: #ccc;
	width     : 100%;
	max-width : 1000px;
	/*min-width : 320px;*/
	margin    : auto;

	/*Flex*/
	display       : flex;
	flex-direction: row;
	flex-wrap     : wrap;
}


/*##### Content #####*/
.main {
	background: linear-gradient(to top, #1e4a5f, #73b7c3);
	padding   : 20px;

	/*Flex*/
	/*flex-grow  : 1;
	flex-shrink: 1;
	flex-basis : 70%;*/
	flex: 1;
}
	.main article {
		padding       : 5px;
		text-align    : justify;
		margin-bottom : 20px;
		background    : white;

		/*flex*/
		display  : flex;
		flex-wrap: wrap;
	}
		.main article h2 {
			padding    : 10px;
			flex       : 1 0 100%;
			font-weight: normal;
			font-size  : 24px;
		}
			.main article h2 span {
				font-size   : 24px;
			}
		.main article p {
			padding: 10px;
			flex   :1 0 100%;
		}
			.main article .read-more {
				text-align: right;
				cursor    : pointer;
			}
				.main article .read-more:hover {
					background: teal;
					color     : white;
				}
			.main article .read-more .caret {
				margin-left : 4px;
				padding-left: 3px;
				position    : relative;
				margin-right: 0px;
				float       : right;
				transform   : rotate(90deg);
			}
		.main article .wimg {
			flex: 1 0 50%;
		}
		.main article img {
			padding: 10px;
			flex   : 1 0 30%;
			width  : 100%;
		}

	.main article:nth-last-child(1) {
		margin-bottom : 0px;
		padding-bottom: 0px;
		border-bottom : none;
	}

		.main article table {
			padding: 10px;
			width  : 100%;

			/*flex*/
			/*display: flex;*/
		}
			.main article table tr {
				width: 100%;
			}
				.main article table td{
					text-align: justify;
					padding   : 4px 2px;
					width     : 100%;
				}
				.main article table th{
					font-weight: bold;
					text-align : left;
					padding    : 0px 2px;
					width      : 30%;
				}
					.main article table .subtitulo {
						text-align: center;
						background: #c9e5fe;
						padding   : 5px;
						width     : 100%;
					}
/*#e0e8f5 #FFFFFF*/
aside{
	background: #035f8a;
	padding   : 10px;

	/*Flex*/
	/*flex           : 1 1 30%;*/
	flex: 0 0 300px; /* De esta manera los elementos contenidos en este contenedor
						no crecen ni disminuyen (1er 0), no se alargan (2do 0) y
						siempre tienene el mismo ancho (300px);*/
	display        : flex;
	flex-wrap      : wrap;
	justify-content: flex-start;
	flex-direction : column;
}

aside .widget {
	/*background: #003751;*/
	margin    : 10px;
}









/*####### Botón go-up ######*/
.go-up {
	border-radius: 30px;
	display      : none;
	padding      : 12px;
	background   : #024959;
	opacity      : 0.5;
	font-size    : 20px;
	color        : #ffff;
	cursor       : pointer;
	position     : fixed;
	bottom       : 20px;
	right        : 20px;
}








/*######## Slideshow ########*/
#slides {
	width  : 100%;
	padding: 10px;
}

#slides img {
	width  : 100%;
	padding: 0px;
}

#slides .active {
	background: -webkit-radial-gradient(circle, black 25%, white 10%);
}

.slidesjs-pagination {
	list-style: none;
	overflow  : hidden;
	float     : right;
}

.slidesjs-pagination li {
	float: left;
}

.slidesjs-pagination li a {
	display        : block;
	padding        : 10px;
	color          : black;
	text-decoration: none;
}

.slidesjs-pagination li a:hover {
	color: #003060;
}

.slidesjs-navigation {
	color          : black;
	text-decoration: none;
	display        : inline-block;
	padding        : 10px;
	font-size      : 16px;
	float          : left;
}
	.slidesjs-navigation:hover{
		color: #003060;
	}









/*###### Media Querys ######*/

@media screen and (max-width: 800px) {
	.container {
		flex-direction: column;
	}

	header {
		flex-direction: column;
		padding       : 0px;
	}

	header .logo {
		margin: 20px 0;
	}

	header nav {
		width: 100%;
	}

	aside {
		flex-direction: row;
		flex: 0;
	}

	aside .widget {
		flex-grow: 1;
	}
}

@media screen and (max-width: 600px) {
	aside {
		flex-direction: column;
	}

	footer {
		justify-content: space-around;
	}

	footer .social {
		padding-top: 10px;
	}
}

@media screen and (max-width: 500px) {
	.main article p {
		flex  :1 0 100%;
	}
	.main article .wimg {
		flex: 1 0 100%;
	}
}

@media screen and (max-width: 400px) {
	header .logo{
		margin        : 0px;
		margin-top    : 10px;
		display       : flex;
		align-items   : center;
		flex-direction: column;
	}
}

@media screen and (max-width: 350px) {
	* {
		font-size: 13px;
	}
	.main {
		padding: 15px;
	}
		.main article h2 {
			font-size  : 23px;
		}
}