@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

body {
	margin:0;
	padding:0;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d9f3fd' fill-opacity='0.94' fill-rule='evenodd'/%3E%3C/svg%3E");
}

h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:20px;
	letter-spacing:1px;
	text-align:center;
}


#header {
	width:90%;
	max-width:1300px;
	background:#FFF;
	margin:1em auto;
	border-radius:0.5em;
	/*border-style: ridge;
	border-color:#57A8F7;*/
}

.logo2 {
	display:none;
}

nav {
	height:70px;
	background-color:#92CDDC;
	width:90%;
	max-width:1300px;
	margin:0 auto;
	border-radius:0.5em;
}

nav h3 {
	width:200px;
	top:8px;
	left:5%;
	color:#fff;
	/*text-transform:uppercase;*/
	display:none;
	font-size:30px;
	line-height:45px;
	margin-left:30px;
}

nav ul {
	float:left;
	list-style:none;
	margin-left:40px;
}

nav ul li {
	display:inline-block;
	line-height:40px;
	margin:0 10px;
	font-family: 'Architects Daughter', cursive;
	font-weight:bold;
	letter-spacing:2px;
}

nav ul li a {
	padding:5px 0;
	color:#FFF;
	font-size:22px;
	text-decoration:none;
}


label #sign-one,
label #sign-two {
	font-size:25px;
	color:#FFF;
	float:right;
	line-height:45px;
	margin-right:30px;
	cursor:pointer;
	display:none;
}

#res-menu {
	display:none;
}

#main {
	width:90%;
	max-width:1300px;
	margin:1em auto;
	border-radius:1em;
}

#historia {
	width:25%;
	height:1450px;
	float:left;
	background:#FFF;
	border-radius:0.5em;
	border-style: inset;
	border-color:#92CDDC;
}

section h3 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:24px;
	color:#000;
	text-align:center;
}

section h4 {
    float: left;
    padding: 0 0 0.2em;
	display:none;
}

.control-menu {
	display:none;
}

ul.section-items {
    clear: both;
	margin-left:-35px;
    height: 720px;
    overflow: hidden;
    transition: height 0.4s ease-in-out 0s, background-color 2s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al voover a su estado unicial*/
	font-size: 18px;
}

#menuhistoria:target ul.section-items {
    background: #f0f0f0 none repeat scroll 0 0;
    height: 43.8em;
    transition: height 0.4s ease-in-out 0s, background-color 0.9s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al abrirse*/
}


/*Al hacer clic sobre el enlace que abre el menú éste desaparece*/

.close { 
   display:none;
}
        
#menuhistoria:target .open {
      display: none;
}

/* Al hacer clic sobre el enlace que abre el menú aparece el enlace .close que previamente estaba oculto*/

#menuhistoria:target .close {
        display: none;
}
  
/*Estilos menu*/

ul.section-items li {
    display: block;
	font-family: 'Open Sans Condensed', sans-serif;
}
ul.section-items a {
    border-top: 2px dotted #dddbdb;
    color: #333;
    display: block;
    height: 3em;
    line-height: 3em;
    margin: 0 1.3em;
	text-decoration:none;
}

ul.section-items a:visited {
	color:#00F;
}

ul.section-items li:first-child a {
    border-top: 2px solid transparent;
}

ul.section-items li a span {
    border-left: 3px solid;
    height: 3.2em;
    padding: 0.4em 0.5em;
}

#li1 a span {
    border-color: #ff6633;
}

#li2 a span {
    border-color: #bda94d;
}

#li3 a span {
    border-color: #5887bc;
}

#li4 a span {
    border-color: #00a2b7;
}

#li5 a span {
    border-color: #639bf2;
}

#li6 a span {
    border-color: #654785;
}

#li7 a span {
    border-color:#F00;
}

#li8 a span {
    border-color: #0F6;
}

#li9 a span {
    border-color: #FF0;
}

#li10 a span {
    border-color: #90F;
}

#li11 a span {
    border-color: #666;
}

#li12 a span {
    border-color: #0FF;
}

#li13 a span {
    border-color: #630;
}

#contenido {
	width:73%;
	height:1450px;
	float:left;
	margin:0;
	margin-left:0.3em;
	margin-right:0.3em;
	background:#FFF;
	border-radius:0.5em;
	border-style: outset;
	border-color:#92CDDC;
}

#FContenedor{
	width:95%;
	height:95%;
	margin:1em;
}

#comparte {
	width:100%;
	height:800px;
	float:left;
	margin:0;
	margin-left:0.3em;
	margin-right:0.3em;
	border-radius:1em;
	background:#FFF;
}

.articulo1{
	margin:1em;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:16px;
}

.articulo1 a {
	text-decoration:none;
}

#footer {
	width:90%;
	max-width:1300px;
	height:100%;
	margin:0 auto;
	border-radius:1em;
	text-align:center;
	margin-top:1480px;
	clear:both;
	margin-bottom:20px;
	background-color:#92CDDC;
	color:#FFF;
}

#footer p {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:16px;
	text-align:center;
	letter-spacing: 3px;
	font-weight:bold;
	margin:0;
	margin-bottom:20px;
	margin-top:10px;
}

#footer a {
	text-decoration:none;
	color:#FFF;
}

#footer h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
	margin:0;
}

.footer2 {
	display:none;
}

.correobtn {
	width:200px;
	height:30px;
	border-radius:0.5em;
	border-color:#AAE2FA;
	border-style: solid;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:20px;
}

.enviarbtn {
	height:35px;
	width:100px;
	border-radius:0.5em;
	border-color:#AAE2FA;
	background:linear-gradient(#0052CE, #0064FB);
	border-style: solid;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing: 2px;
	cursor:pointer;
	color:#FFF;
}

.appWhatsapp {
	position:fixed;
	right:26px;
	bottom:100px;
	width:60px;
	z-index:1000;
}

.appWhatsapp img {
	width:100%;
	height:auto;
}

.verEN {
	position:fixed;
	right:26px;
	bottom:180px;
	width:60px;
	z-index:1000;
}

.verEN img {
	width:100%;
	height:auto;
}

.subs {
	position:fixed;
	right:26px;
	bottom:260px;
	width:60px;
	z-index:1000;
}

.subs img {
	width:100%;
	height:auto;
}


@media (min-width:800px) and (max-width:1280px) {
	ul.section-items {
    	clear: both;
		margin-left:-35px;
    	height: 690px;
    	overflow: hidden;
    	transition: height 0.4s ease-in-out 0s, background-color 2s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al voover a su estado unicial*/
		font-size: 16px;
	}
	
	nav ul {
		margin-left:0;
	}
	
	nav ul li a {
		font-size:18px;
	}
	
	#main {
		width:90%;
		max-width:1300px;
		margin:1em auto;
		border-radius:1em;
	}
	
	#contenido {
		width:73%;
		height:1450px;
		float:left;
		margin:0;
		margin-left:0.3em;
		background:#FFF;
		border-radius:0.5em;
		border-style: outset;
		border-color:#92CDDC;
	}
	
	#footer p {
		font-size:16px;
		margin-bottom:20px;
		margin-top:10px;
	}
	
	#footer h2 {
		font-size:20px;
		margin-bottom:10px;
		margin-right:10px;
	}
	
	.correobtn {
		width:150px;
		height:20px;
		font-size:16px;
	}

	.enviarbtn {
		height:30px;
		width:80px;
		font-size:16px;
		cursor:pointer;
		color:#FFF;
	}

}


@media (max-width:799px) {
	label #sign-one {
		display:block;
	}
	
	.logo1 {
		display:none;
	}
	
	.logo2 {
		display:block;
	}
	
	nav h3 {
		display:block;
		font-family: 'Architects Daughter', cursive;
		font-size:22px;
		letter-spacing: 3px;
	}
	
	nav {
		background-color: #92CDDC;
		height:40px;
		margin-top:-10px;
		border:none;
	}
	
	nav ul {
		position: relative;
		width:90%;
		height:450px;
		left: -110%;
		text-align:center;
		transition: .5s;
		z-index: 10;
		border-radius:0.5em;
		margin-top:-20px;
		background-color:#92CDDC;
		margin-left:0;
	}
	
	nav ul li {
		display:block;
		margin:25px 0;
		line-height:30px;
		font-family: 'Architects Daughter', cursive;
	}
	
	nav ul li a {
		font-size:30px;
	}
	
	#res-menu:checked ~ ul {
		left:0;
	}
	
	#res-menu:checked ~ label #sign-one {
		display:none;
	}
	
	#res-menu:checked ~ label #sign-two {
		display:block;
	}
	
	main{
		/*position:absolute;*/
	}
	
	main h2 {
		display: none;
	}
	
	#contenido {
		margin:0.5em 0;
		border-radius:1em;
		width:100%;
		margin-top:-410px;
	}
		
	#historia {
		margin:0.5em 0;
		background-color: #92CDDC;
		border-radius:0.5em;
		width:90%;
		height:40px;
		position:absolute;
		margin-top:-5px;
		border:none;
	}

	section h4 {
    	float: left;
    	padding: 0 0 0.2em;
		display:block;
	}
	
	section h3 {
		display:none;
	}
	
	section h4 {
		font-family: 'Architects Daughter', cursive;
		font-size:22px;
		color:#FFF;
		margin-left:30px;
		margin-top:5px;
		letter-spacing: 3px;
	}
	
	.control-menu {
    	background-color: transparent;
    	background-position: center center;
    	display: block;
    	float: right;
    	height: 25px;
    	margin-right: 1.7em;
    	width: 22px;
		margin-top:8px;
	}

	.control-menu a span {
    	display: inline-block;
    	height: 25px;
    	text-indent: -9999px;
    	width: 22px;
	}

	.control-menu .close {
    	background-image: url("img/close-menu.png");
    	background-position: center center;
    	background-repeat: no-repeat;
    	display: none;
	}

	.control-menu .open {
    	background-image: url("img/open-menu.png");
    	background-position: center center;
    	background-repeat: no-repeat;
    	display: block;
	}

	ul.section-items {
    	clear: both;
    	height: 0;
    	overflow: hidden;
		background-color:#92CDDC;
		border-radius:0.5em;
    	transition: height 0.4s ease-in-out 0s, background-color 2s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al voover a su estado unicial*/
		margin:0 auto;
		position:absolute;
		margin-top:45px;
		width:90%;
	}

	#menuhistoria:target ul.section-items {
    	background: #92CDDC none repeat scroll 0 0;
    	height: 43.8em;
    	transition: height 0.4s ease-in-out 0s, background-color 0.9s ease 0s; /*El menú cambia su altura y su color de fondo mediante una transición suavizada al abrirse*/
	}


	/*Al hacer clic sobre el enlace que abre el menú éste desaparece*/

	.close { 
   		display:none;
	}
        
	#menuhistoria:target .open {
    	display: none;
	}

	/* Al hacer clic sobre el enlace que abre el menú aparece el enlace .close que previamente estaba oculto*/

	#menuhistoria:target .close {
    	display: block;
	}
  
	/*Estilos menu*/

	ul.section-items li {
    	display: block;
		font-size:16px;
		font-weight:bold;
	}

	ul.section-items a {
    	border-top: 2px dotted #dddbdb;
    	color: #00F;
    	display: block;
    	height: 3em;
    	line-height: 3em;
    	margin: 0 1.3em;
	}
	
	ul.section-items a:visited {
		color:#FFF;
	}

	ul.section-items li:first-child a {
    	border-top: 2px solid transparent;
	}

	ul.section-items li a span {
    	border-left: 3px solid;
    	height: 3.2em;
    	padding: 0.4em 0.5em;
	}
	
	.appWhatsapp {
		position:fixed;
		right:80px;
		bottom:26px;
		width:60px;
		z-index:1000;
	}

	.appWhatsapp img {
		width:70%;
		height:auto;
	}

	.verEN {
		position:fixed;
		right:140px;
		bottom:26px;
		width:60px;
		z-index:1000;
	}

	.verEN img {
		width:70%;
		height:auto;
	}
	
	.subs {
		position:fixed;
		right:200px;
		bottom:26px;
		width:60px;
		z-index:1000;
	}

	.subs img {
		width:70%;
		height:auto;
	}
	
	#comparte {
		position:absolute;
		width:90%;
	}
	
	.footer1 {
		display:none;
	}
	
	.footer2 {
		display:block;
	}
	
	#footer p {
		font-size:14px;
		margin-bottom:20px;
		margin-top:10px;
	}
	
	#footer h2 {
		font-size:18px;
		margin-bottom:10px;
		margin-right:10px;
	}
	
	.correobtn {
		width:150px;
		height:20px;
		font-size:16px;
	}

	.enviarbtn {
		height:30px;
		width:80px;
		font-size:16px;
		cursor:pointer;
		color:#FFF;
	}

}