/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< GENERAL >>>>>>>>>>*/	
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800';
@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700';

html, body {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size: 16px;
	height: auto;
	min-height:100%;
	line-height:1.3em;
	position: relative;
	}


h1, h2, h3, h4, h5, h6,
nav,
div.indexfrase{
	font-family: 'Montserrat', sans-serif;
	}


h1, h2, h3, h4, h5, h6 {
	color: inherit;
	font-weight:700;
	margin:0px;
	padding: 0px;
	line-height:1.3em;
	width: 100%;
	}

h1 {font-size:2em;}
h2 {font-size:1.8em;}
		@media only screen and (max-width:620px) {
		h2{
		font-size: 1.6em;
		}}
h3 {font-size:1.6em;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1em;}


img{
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

a, a:visited{
	color:inherit;
	margin:0px;
	padding: 0px;
	text-decoration:underline;
	}

a:hover {	
	text-decoration:underline;
	}

p {
	color: inherit;
	float: left;
	height:auto;
	line-height:1.2em;
	margin: 0px;
	padding:20px 0px;
	width: 100%;
	}

p strong{
	font-weight:700;
	}


ul, ol {
	float: left;
	height: auto;
	margin:15px 0px 15px 18px;
	padding: 0px;
	width:100%;
	}

ul li, ol li{
	float: left;
	height: auto;
	line-height:1.4em;
	margin: 0px;
	padding: 0px;
	width:100%;
	}

ul li {
	list-style:disc;
	}

ol li {
	list-style:decimal;
	}

hr {
	border:0px;
	padding:0px;
	margin:15px 0px;
	float: left;
	height:1px;
	width: 100%;
	}

/* 
---------- // z index // ------------------- */
body {z-index:1 }
div.banner { z-index: 2 }
section {z-index:14;}
header { z-index:15; }
div#black {z-index:16;}
nav {z-index:17; }
div.toggle{z-index:18;}
div.toggle input#togglebutton{z-index:19;}
div.toggle input#togglebutton[type=checkbox] + label {z-index:20;}
div.indexbanner { z-index: 2 }


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ESTRUCTURA >>>>>>>>>>*/
div.contenedor,
header,
div.indexbanner,
div.indexfrase,
div.indexcita,
div.indextwitter,
div.indexpanel,
div.indexcita,
footer{ 
	display: block;
	float: left;
	height: auto;
	width: 100%;
	}

div.in{
	display: block;
	height: auto;
	float: none;
	margin:0px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width:1000px;
	}
	@media only screen and (max-width:1020px) {
	div.in{
	width:900px;
	}}
	@media only screen and (max-width:920px) {
	div.in{
	width:800px;
	}}
	@media only screen and (max-width:820px) {
	div.in{
	width:700px;
	}}
	@media only screen and (max-width:720px) {
	div.in {
	width:600px;
	}}
	@media only screen and (max-width:620px) {
	div.in{
	margin: 0px 4%;
	width:92%;
	}}


div.inn{
	display: block;
	height: auto;
	float: none;
	margin:0px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width:800px;
	}
	@media only screen and (max-width:820px) {
	div.inn{
	width:700px;
	}}
	@media only screen and (max-width:720px) {
	div.inn {
	width:600px;
	}}
	@media only screen and (max-width:620px) {
	div.inn{
	margin: 0px 4%;
	width:92%;
	}}

section,
aside,
div.indexbanner ul li:last-child div,
div.indextwitter ul li,
div.indexpanel a,
body#index section article {
	box-sizing:border-box;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< HEADER >>>>>>>>>>*/
header {
	height: auto;
	}


a.logotipo{ 
	float: left;
	margin:10px 0px;
	width:180px;
	}
		@media only screen and (max-width:720px) {
		a.logotipo{
		float: none;
		text-align: center;
		margin: 10px auto;
		display: block;
		height: auto;
		}}
		@media only screen and (max-width:620px) {
		a.logotipo{
		float: left;
		}}

a.logotipo img{
	display: block;
	float: left;
	height: auto;
	width:100%;
	}

header ul{
	float: right;
	font-size:0.8em;
	height: auto;
	list-style:none;
	padding: 0px;
	margin:0px;
	margin-top:40px;
	width: auto;
	}

header ul li{
	float:left;
	height: auto;
	list-style:none;
	padding: 0px;
	margin:0px;
	margin-left:10px;
	width: auto;
	}

header ul li a{
	text-decoration: none;
	}

header ul li a,
header ul li a:visited,
header ul li a:hover {
	color: inherit;
	}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< NAV >>>>>>>>>>*/
nav {
	float:right;
	height:auto;
	margin-top:30px;
	width:auto;
	}
		@media only screen and (max-width:720px) {
		nav{
		margin-top: 5px;
		}}
		@media only screen and (max-width:620px) {
		nav {
		float: left;
		margin-top: 0px;
		background-color:#fff;
		bottom: 0px;
		box-shadow:3px 0px 3px rgba(0, 0, 0, 0.2);
		height: auto;
		left: 0px;
		margin-left:-330px;
		position: fixed;
		top: 0px;
		text-align: center;
		width:320px;
		transition:all 0.3s;
		-webkit-transition:all 0.3s ; /* Safari and Chrome */
		-o-transition:all 0.3s ;   /* Opera */
		-moz-transition:all 0.3s ; /* Mozilla Firefox */
	    -ms-transition:all 0.3s;   /* Internet Explorer */


	    -webkit-transform: translate(0px, 0px);
		-moz-transform: translate(0px, 0px);
		-o-transform: translate(0px, 0px);
		-ms-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		}}

nav ul{
	display: block;
	float:left;
	height: auto;
	list-style: none;
	margin:0px;
	padding:0px;
	width: auto;
	}
		@media only screen and (max-width:620px) {
		nav ul{
		margin-top: 0px;
		}}

nav ul li{
	display:block;
	float:left;
	height:auto;
	list-style: none;
	margin: 0px;
	padding:0px;
	width:auto;
	}
		@media only screen and (max-width:620px) {
		nav ul li{
		width: 100%;
		}}

nav ul li a{
	display:block;
	float: left;
	font-size:1.2em;
	height:40px;
	line-height:40px;
	list-style: none;
	margin:0px;
	padding:0px 10px;
	text-decoration:none;
	text-align:center;
	width:auto;
	transition:all 0.3s;
	-webkit-transition:all 0.3s ; /* Safari and Chrome */
	-o-transition:all 0.3s ;   /* Opera */
	-moz-transition:all 0.3s ; /* Mozilla Firefox */
	-ms-transition:all 0.3s;   /* Internet Explorer */
    -webkit-transform: translate(0px, 0px);
	}
		@media only screen and (max-width:920px) {
		nav ul li a{
		padding:0px 8px;
		}}
		@media only screen and (max-width:720px) {
		nav ul li a{
		padding:0px 17px;
		transition:all 0s;
		-webkit-transition:all 0s ; /* Safari and Chrome */
		-o-transition:all 0s ;   /* Opera */
		-moz-transition:all 0s ; /* Mozilla Firefox */
		-ms-transition:all 0s;   /* Internet Explorer */
		}}
		@media only screen and (max-width:620px) {
		nav ul li a{
		width: 100%;
		padding: 0px 0px;
		}}

nav ul li a:hover {
	text-decoration: none;
	}

nav ul li:nth-child(2) a:hover,
nav ul li:nth-child(5) a:hover,
nav ul li:nth-child(8) a:hover {background-color:#85c6e1;}

nav ul li:nth-child(3) a:hover,
nav ul li:nth-child(6) a:hover,
nav ul li:nth-child(9) a:hover {background-color:#87c886;}

nav ul li:nth-child(4) a:hover,
nav ul li:nth-child(7) a:hover,
nav ul li:nth-child(10) a:hover {background-color:#e88b90;}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX BANNER >>>>>>>>>>*/
div.indexbanner {
	background-color:#222;
	}

div.indexbanner div.in{
	padding:80px 0px;
	}

/*div.indexbanner ul{
	height: auto;
	}

div.indexbanner ul{
	height: auto;
	list-style: none;
	padding: 0px;
	margin:0px;
	}

div.indexbanner ul li{
	list-style: none;
	padding:20px 0px;
	margin:0px;
	height:auto;
	width:50%;
	}
		@media only screen and (max-width:620px) {
		div.indexbanner ul li{
		width: 100%;
		}}

div.indexbanner ul li:last-child{
	float: left;
	}

div.indexbanner ul li:first-child{ float: right; }

div.indexbanner ul li:first-child div{
	background-color:#fff;
	box-shadow:0px 0px 4px rgba(0, 0, 0, 0.4);
	border:5px solid #fff;
	height:260px;
	width:97%;
	}

div.indexbanner ul li:first-child div img {
	height:260px;
	width:100%;
	}

.cover {
	-moz- object-fit: cover;
	-webkit- object-fit: cover;
	-o- object-fit: cover;
	-ms- object-fit: cover;
	object-fit: cover;
	}
*/

div.indexbanner h2 {
	color:#fff;
	font-size:2.4em;
	padding: 0px;
	text-align:center;
	margin:0px;
	margin-bottom: 5px;
	}
	@media only screen and (max-width:720px) {
	div.indexbanner h2 {
	line-height: 1.2em;
	font-size:2.2em;
	}}
	@media only screen and (max-width:620px) {
	div.indexbanner h2 {
	margin-top: -20px;
	text-align: center;
	}}


div.indexbanner p {
	color:#777;
	font-size:1.1em;
	padding: 0px;
	text-align:center;
	margin:0px;
	}
	@media only screen and (max-width:620px) {
	div.indexbanner p {
	margin-bottom: 5px;
	}}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX FRASE >>>>>>>>>>*/
div.indexfrase {
	font-weight:400;
	font-size:1.6em;
	text-align: center;
	padding:10px 0px;
	}
		@media only screen and (max-width:620px) {
		div.indexfrase {
		font-size: 1.5em;
		}}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX PANEL >>>>>>>>>>*/
div.indexpanel {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	background-repeat:repeat-x;
	background-position:center bottom;
	background-size:800px auto;
	height: auto;
	padding:40px 0px;
	}


div.indexpanel a{
	box-shadow:0px 0px 6px rgba(0, 0, 0, 0.2);
	display:block;
	height:auto;
	float:left;
	margin:15px 1%;
	padding:8px 8px 16px 8px;
	width:29.33%;
	transition:all 0.3s;
	-webkit-transition:all 0.3s ; /* Safari and Chrome */
	-o-transition:all 0.3s ;   /* Opera */
	-moz-transition:all 0.3s ; /* Mozilla Firefox */
	-ms-transition:all 0.3s;   /* Internet Explorer */
    -webkit-transform: translate(0px, 0px);
	}
		@media only screen and (max-width:620px) {
		div.indexpanel a{
		margin: 0px 0px 25px 0px;
		padding: 8px 0px 16px 0px;
		width: 100%;
		}}

div.indexpanel a *{
	float: left; 
	margin-left:5%;
	margin-right:5%;
	text-align: left;
	width:90%;
	}

div.indexpanel a img{
	float: left;
	height: auto;
	margin-left:0%;
	margin-right:0%;
	width:100%;
	}

div.indexpanel a h3{
	font-size:0.8em;
	line-height:2em;
	margin-top:10px;
	}

div.indexpanel a h2{
	font-size:1em;
	font-weight:400;
	line-height:1.2em;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX TWITTER >>>>>>>>>>*/
div.indextwitter {
	height:auto;
	padding:10px 0px;
	}


div.indextwitter ul{
	height:auto;
	list-style: none;
	padding:0px;
	margin:0px;
	width:100%;
	}

div.indextwitter ul li{
	height:auto;
	list-style: none;
	padding:0px;
	margin:0px;
	width:50%;
	}
		@media only screen and (max-width:620px) {
		div.indextwitter ul li{
		margin-bottom: 40px;
		width: 100%;
		}}

div.indextwitter ul li:nth-child(1){
	padding-right:20px;
	}
		@media only screen and (max-width:620px) {
		div.indextwitter ul li:nth-child(1){
		padding-right:0px;
		}}

div.indextwitter ul li:nth-child(2){
	padding-left:20px;
	}
		@media only screen and (max-width:620px) {
		div.indextwitter ul li:nth-child(2){
		padding-left:0px;
		}}

div.indextwitter p.data{
	border-bottom:1px solid #787878;
	margin-top:40px;
	font-size:1.2em;
	line-height:1.1em;
	padding-bottom:15px;
	margin-bottom:15px;
	}
		@media only screen and (max-width:720px) {
		div.indextwitter p.data {
		font-size: 1.1em;
		line-height: 1.2em;
		}}
		@media only screen and (max-width:620px) {
	    p.data {
		text-align: center;
		}}

p.data a,
p.data a:visited,
p.data a:hover{
	color:inherit;
	text-decoration: none;
	}

p.data a i {
	border-radius:50%;
	height:26px;
	font-size:0.7em;
	line-height:26px;
	text-align: center;
	width:26px;
	}

p.data a.twitter i {
	background-color:#55acee!important;
	}
p.data a.facebook i {
	background-color:#3b5998!important;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX BANNERS >>>>>>>>>>*/
div.indexbanners {
	float: left;
	height: auto;
	width:100%;
	}

div.indexbanners a{
	display: inline-block;
	float:none;
	vertical-align: top;
	margin:0px;
	width:100%;
	}

div.indexbanners a img{
	padding: 0px;
	margin: 0px;
	max-width:60%;
	}
	@media only screen and (max-width:620px) {
	div.indexbanners a img{
	margin: 0px 10%;
	max-width:80%;
	}}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX CITA >>>>>>>>>>*/
div.indexcita p{
	float: left;
	height: auto;
	font-size:1em;
	line-height: 1.2em;
	margin:0px;
	padding:20px 0px;
	text-align: center;
	width:100%;
	}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< SECTION >>>>>>>>>>*/
section {
	float: left;
	height: auto;
	margin:15px 0px;
	min-height:300px;
	padding:20px 40px;
	width:100%;
	}
	@media only screen and (max-width:620px) {
	section{
	padding:20px 20px;
	}}

section h2{
	padding:10px 0px 20px 0px;
	width:100%;
	}
	@media only screen and (max-width:620px) {
	section h2{
	text-align: center;
	}}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< TIMELINE ARTICLE >>>>>>>>>>*/

article {
	float: left;
	height: auto;
	width:100%;
	}


article p {
	float: left;
	height: auto;
	text-align: justify;
	width:100%;
	}	

article img{
	height: auto;
	max-width:100%;
	}
	@media only screen and (max-width:620px) {
	article img{
	height: auto;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	text-align: center;
	}}

.post-datos {
	font-size:0.8em;
	padding:0px;
	margin:0px;
	}	

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< BLOG >>>>>>>>>>*/
body#index section{
	background-color: rgba(255,255,255,0);
	padding:0px;
	}
	@media only screen and (max-width:620px) {
	body#single section{
	padding:20px 20px;
	}}

body#index section article{
	background-color: #fff;
	margin-bottom:40px;
	padding:20px 40px 30px 40px;
	}
	@media only screen and (max-width:620px) {
	body#index section article{
	padding:20px 20px;
	}}

body#index section article hr{
	display: none;
	}

body#index section article a.prueba{
	display: block;
	border-radius:4px;
	cursor: pointer;
	display: block;
	float: left;
	font-size:1em;
	height:40px;
	line-height:40px;
	margin: 0px;
	padding:0px 20px; 
	text-decoration: none;
	width:auto;
	}
		@media only screen and (max-width:620px) {
		body#index section article a.prueba{
		padding:0px 0px; 
		text-align: center;
		width:100%; 
		}}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< SINGLE >>>>>>>>>>*/
body#single section{
	padding:40px 40px;
	}
		@media only screen and (max-width:620px) {
		body#single section{
		padding:20px 20px;
		}}

body#single h2 {
	padding:0px;
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ASIDE >>>>>>>>>>*/
aside {
	height: auto;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FOOTER >>>>>>>>>>*/
footer {
	font-size: 0.8em;
	height: auto;
	min-height:40px;
	padding-bottom: 20px;
	}


footer p{
	background-color:#444;
	display: block;
	float:left;
	height: auto;
	padding-top:20px;
	text-align:left;
	width:60%;
	}

footer img{
	display: block;
	float:right;
	height:auto;
	padding-top:20px;
	margin-left:5px;
	width:100px;
	}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FIRMA >>>>>>>>>>*/
footer a.signature,
footer a.signature:visited{
	display:inline-block;
	color: inherit;
	float:none;
	text-decoration: none;
	width:auto;
	}

footer a.signature:hover{
	color:inherit;
	text-decoration: none;
	}

footer a.signature:hover strong{
	color:#000;
	}


footer a.signature i,
footer a.signature span,
footer a.signature strong{
	height: 20px;
	line-height: 20px;
	float: left;
	}

footer a.signature i,
footer a.signature strong {
	font-style: normal;
	font-weight: normal;
	}


footer a.signature span{
	background-image: url(../svg/icon-ls.svg);
	background-size:40px 20px;
	background-position:0px 0px;
	display:inline-block;
	background-color: #da1f43;
	border-radius:50%;
	float:left;
	height:20px;
	margin:0px 3px 0px 3px;
	width:20px;
	}

footer a.signature:hover span{
	background-color: #da1f43;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< CONTACTO >>>>>>>>>>*/
body#s-contacto aside {
	float: right;
	width:46%;
	}
		@media only screen and (max-width:620px) {
		body#s-contacto aside{
		width: 100%;
		}}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< VARIOS  >>>>>>>>>>*/
img.izquierda {
	float: left;
	margin:10px 10px 0px 0px;
	}

img.derecha {
	float:right;
	margin:0px 0px 10px 10px;
	}