/* TIPOGRAFIA STYLE------------------------------------*/

@font-face {
	font-family: proyecto;
	src: url(../Tipografia/OpenSans-Regular.ttf) format("truetype");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "proyecto grueso";
	src: url(../Tipografia/OpenSans-Bold.ttf) format("truetype");
	font-weight: bold;
	font-style: normal;
}

/* Body stile---------------------------------------------------- */

body {
	color: #f5f0ed;
	/* width: fit-content; */
}

/* General Styile------------------------------ */

div {
	font-family: "proyecto grueso";
	/*max-height: 500px;*/
	text-align: center;
}
p {
	font-family: proyecto, Arial;
	font-size: 16px;
}

h1 {
	font-size: 44px;
}
h2 {
	font-size: 28px;
}
h3 {
	font-size: 24px;
}

a {
	text-decoration: none;
}

/*---------------------------------- Especific Styile------------------------------ */

/* -------------------------------class content Styile------------------------------ */

div.content {
	position: relative;
	background: url("../Imagenes/Fondo1.jpg");
	background-size: 100% 100%;
	padding: 15px;
}
div.content h2 {
	margin-top: 10%;
}

.content p {
	padding-bottom: 25%;
}

.content h2 {
	padding-bottom: 20px;
	padding-top: 40px;
}
@media screen and (min-width: 500px) {
	.content h2{ 
		font-size: 3em;
	}
	.content p{
		font-size: 2em;

	}
}

/*---------------------------------class content2------------------------*/
div.content2 {
	position: relative;
	background: url("../Imagenes/Fondo2.jpg");
	background-size: 100% 100%;
	padding: 15px;
}
.content2 a {
	border: 2px solid #f5f0ed;
	color: #f5f0ed;
	display: inline-block;
	margin-bottom: 25%;
	padding: 6px;
}
.content2 a:hover {
	border-color: #d03b40;
	color: #d03b40;
	text-decoration: blink;
}

.content2 p {
	padding-bottom: 35px;
}

.content2 h2 {
	padding-bottom: 20px;
	padding-top: 40px;
}
@media screen and (min-width: 500px) {
	.content2 h2{ 
		font-size: 3em;
	}
	.content2 p{
		font-size: 2em;
		
	}
}

/* Lanzador-menu -----------------------------------------------------------*/
div.logo-menu {
	display: inline-block;
}
.logo {
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 20px;
}

a.lanzador-menu {
	display: inline-block;
	background-color: #d03b40;
	position: absolute;
	right: 0px;
	top: 0px;
	margin: 20px;
}
@media screen and (min-width: 700px) {
	a.lanzador-menu {
		display: none;
	}
}

/* rayitas -----------------------------------------------------------*/
div.rayita {
	border-bottom: 3px solid #f5f0ed;
	margin-right: 35%;
	margin-left: 35%;
	margin-bottom: 40px;
	margin-top: 20px;
}

/* class color-box (red and beige) Styile------------------------------ */

.color-box h3 {
	padding: 0px 10px 25px;
}

.color-box a {
	text-decoration: none;
}

.color-box a:hover {
	text-decoration: underline;
	font-size: 120%;
	padding-bottom: 10px;
}

.red-box {
	padding: 40px 20px;
	color: #ded6c0;
	background-color: #d03b40;
}

.red-box a {
	color: #ded6c0;
}

.beige-box {
	padding: 40px 20px;
	color: #d03b40;
	background-color: #ded6c0;
}

.beige-box a {
	color: #d03b40;
}
@media screen and (min-width: 400px) {
	.color-box {
		display: flex;
		flex-wrap: wrap;
		height: auto;
	}
	.color-box div {
		width: 50%;
	}
}
/* @media screen and (min-width: 600px) { */

/* } */
/* class content-white-box Styile------------------------------ */

.content-white-box {
	color: #3c3c3b;
	padding-bottom: 50px;
}
.white-box {
	text-align: center;
	height: 50%;
	float: none;
}
.white-box .text {
	padding: 5px 15px;
	text-align: start;
}
.white-box img {
	margin-top: 50px;
	max-height: 80px;
}
@media screen and (min-width: 400px) {
	.content-white-box {
		display: flex;
		height: auto;
		flex-wrap: wrap;
	}
	.white-box {
		padding: 0px 10%;
	}
}
@media screen and (min-width: 600px) {
	.white-box {
		padding: 0px;
		width: 50%;
	}
}
/* ------------------------------class footer -------------------------*/
.footer {
	background-color: #241d1b;
	padding: 30px;
	text-align: left;
}

/*-------------------------------class navigation----------------------*/
.navegacion li a {
	display: block;
	background-color: #f5f0ed;
	color: #d03b40;
	margin: 2px;
	border: 1px solid #d03b40;
}
.navegacion li a:hover {
	background-color: black;
}


@media screen and (min-width: 701px) {
	.navegacion{
		/*float: left;*/
		position: absolute;
		top: 6%;
		right: 25px;
	}
	.navegacion li{
		display: inline-block;
		
	}
	.navegacion li a {
	background-color: transparent;
	color: #f5f0ed;
	margin: 2px;
	border: 0px solid #f5f0ed;}
}

/*-------------------------------JS en accion--------------------------*/

@media screen and (max-width: 700px) {
	.js .navegacion{
		list-style: none;
		max-height: 0px ;
		overflow: hidden;
		transition: max-height .5s;
		position: absolute;
		top: 3px;
		right: 78px;
	}

	.js .navegacion-desplegado {

		max-height: 200px;
	}
}