@import url('fuentes.css');

/*--- Estilos generales ---*/

* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}
body {
	background:#676767;
	font-family: Arial, Helvetica, Sans-serif;
}

a {
	text-decoration:none;
	color: #ffffff;
}

a:hover {
	text-decoration: underline;
}

/*--- header ---*/
header {
	width:100%;
	float:left;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,c6c6c6+100 */
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top,  #ffffff 0%, #c6c6c6 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #ffffff 0%,#c6c6c6 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #ffffff 0%,#c6c6c6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
	box-shadow:0px 3px 5px #000;
		-moz-box-shadow:0px 3px 5px #000;
		-webkit-box-shadow:0px 3px 5px #000;
	
	
}

header #subheader {
	width:100%;
	margin:auto;
	max-width:960px;
	clear:both;
	padding:15px;
	
	/*FLEX*/
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

header #subheader .logotipo img{
	width:140px;
	
}


/*Menu*/
header #subheader nav {
	width:70%;
	
	/*FLEX*/
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

header #subheader nav a {
	color:#000;
	font-size:20px;
	text-align:center;
	padding:10px;
	border-radius:3px;

	/*FLEX*/
	flex-grow:1;
}

header #subheader nav a:hover {
	color:#fff;
	background:#20ae41;
	text-decoration:none;
}

#principal {
	width:100%;
	margin:auto;
	max-width:960px;
	clear:both;
	
	/*FLEX*/
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	
}

/*slideshow*/
#slideshow {
	width:100%;
	background:#fff;
	
	margin:30px 0px 15px 0px;
	border-top:solid 20px #fff;
	border-left:solid 20px #fff;
	border-right:solid 20px #fff;
	border-bottom:solid 20px #fff;
	border-radius:5px;
	box-shadow:0px 3px 5px #000;
}

#slides {
      display: none
	  background:#fff;
    }

    .container {
      margin: 0 auto
    }
	
	#slides {
      display: none;
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../imagenes/slideshow/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(../imagenes/slideshow/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }
	

/*Bienvenidos*/
#bienvenidos {
	padding:20px;
	margin:15px 0px;
	border-radius:5px;
	box-shadow:0px 3px 5px #000;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5e9f01+1,2b6313+100 */
		background: #5e9f01; /* Old browsers */
		background: -moz-linear-gradient(top,  #5e9f01 1%, #2b6313 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #5e9f01 1%,#2b6313 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #5e9f01 1%,#2b6313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e9f01', endColorstr='#2b6313',GradientType=0 ); /* IE6-9 */
}

#bienvenidos article h3 {
	margin-bottom: 30px;
	font-family:sourcesans-light;
	color:#fff;
	font-size:40px;
}

#bienvenidos article {
	padding:20px;
	color:#fff;
	line-height:27px;
}

/*--- MAIN ---*/
#main {
	margin:15px 0px;
	padding-right:20px;
	
	/*FLEX*/
	flex:1;
}

#main article {
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px solid #fff;
}

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

#main article .titulo {
	font-size:22px;
	font-family:sourcesans;
	color:#fff;
	margin-bottom: 5px;
}

#main article .descripcion {
	font-size:14px;
	color:#1798af;
	margin-bottom: 5px;
}

#main article .thumb{
	width:220px;
	height:auto;
	float:left;
	margin:0px 10px 10px 0px;
}

#main article > p {
	font-family:Arial, Helvetica, Sans-serif;
	color:#c5c5c5;
	font-size:14px;
	text-align:justify;
	line-height:18px;
	margin-bottom:10px;
}

/*sidebar*/
aside {
	margin:15px 0px;
	padding:10px;
	
	/*FLEX*/
	display:flex;
	flex:0 0 240px;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:flex-start;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bae3e7+1,5092bc+100 */
		background: #bae3e7; /* Old browsers */
		background: -moz-linear-gradient(top,  #bae3e7 1%, #5092bc 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #bae3e7 1%,#5092bc 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #bae3e7 1%,#5092bc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bae3e7', endColorstr='#5092bc',GradientType=0 ); /* IE6-9 */
	
	border-radius:5px;
	box-shadow:0px 3px 5px #000;
}

aside #widget {
	width:220px;	
}

aside .eltiempo .normal {
	background:none !important;
	border:none !important;
}

/*--- FOOTER ---*/
footer {
	width:100%;
	margin-top:15px;
	padding:20px;
	box-shadow:0px 3px 5px #000;
	border-radius:5px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#626262+1,323232+100 */
		background: #626262; /* Old browsers */
		background: -moz-linear-gradient(top,  #626262 1%, #323232 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #626262 1%,#323232 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #626262 1%,#323232 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#626262', endColorstr='#323232',GradientType=0 ); /* IE6-9 */
	
	/*FLEX*/
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

footer #acerca-de {
	/*FLEX*/
	flex:1;
}

footer #acerca-de h3 {
	font-family:sourcesans-light;
	font-size:20px;
	color:#fff;
}

footer #acerca-de p{
	font-family:Arial, Helvetica, Sans-serif;
	font-size:12px;
	color:#848484;
	text-align:justify;
	line-height:14px;
	margin-bottom:10px;
}

footer #acerca-de img {
	width:50px;
	float:left;
}

footer #contacto {
	text-align:center;
	padding-left:20px;
	
	/*FLEX*/
	display:flex;
	flex:0 0 440px;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;
}

footer #contacto img {
	float:center;
	height:60px;
	width:auto;
}

footer #contacto h3{
	font-family:sourcesans-light;
	color:#fff;
	font-size:18px;
}

footer #contacto .telefono p {
	font-family:sourcesans;
	color:#919191;
	font-size:20px;
}

footer #contacto .correo{
	padding:0px 10px 0px 10px;
}

footer #contacto .correo p {
	font-family:sourcesans;
	color:#919191;
	font-size:12px;
}

footer #contacto .horario p {
	font-family:sourcesans;
	color:#919191;
	font-size:12px;
}

#copyright{
	float:left;
	width:100%;
	margin:10px 0px;
}

#copyright p {
	text-align:center;
	font-size:12px;
	color:#fff;
	font-family:Arial, Helvetica, Sans-serif;
}

/* For tablets & smart phones */
@media (max-width: 767px) {
    
	.container {
	width: auto;
	}
	
	#slideshow {
	width:100%;
	background:#fff;
	
	margin:30px 0px 0px 0px;
	border-top:solid 15px #fff;
	border-left:solid 10px #fff;
	border-right:solid 10px #fff;
	border-bottom:solid 10px #fff;
	border-radius:5px;
	box-shadow:0px 3px 5px #000;
	}
		
	header #subheader {
		padding:0px;
		
		flex-direction:column;
		
	}
	
	header #subheader .logotipo{
		margin:10px;
	}
	
	header #subheader nav {
		padding:5px;
		width:100%;
	}
	
	#principal {
		flex-direction:column;
	}
	
	#bienvenidos {
		padding:10px;	
	}
	
	#bienvenidos article h3 {
		font-size:24px;
		line-height:28px;
		margin-bottom: 15px;
		
	}
	
	#main {
	padding:10px;
	}
		
	#main article > p {
		clear:both;
	}
	
	aside {
		margin-top: 10px;
		
		flex-direction:column;
		justify-content:center;
		align-items:center;
		flex-basis:320px;
	}
	
	footer{
		flex-direction:column;
	}

	footer #acerca-de {
		flex:0;
	}
	footer #contacto {
		flex-basis:140px;
	}
	  
}

    /* For smartphones */
@media (max-width: 480px) {
	.container {
		width: auto;
	}
	
	footer #contacto {
		flex-basis:290px;
		justify-content:center;
	}  
	
	footer #contacto > div{
		margin: 10px;
	}
}

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px;
      }
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 960px;
      }
    }