/************************************ 
Desarrollado y Diseñador Por: CEAMDEV.COM
Fecha de inicio: 10/08/2023
Fecha de termino: 
Tiempo de entrega: 
Cliente: NMark Project & MSKoach Life.
*****************************************/
* {
	margin: 0px;
	padding: 0px;
}
:root {
	/* Principales */
	--bgBlanco: #FFFFFF;
	--bgRojo: #FF4D4D;
	--bgAzul: #3333FF;	
	--bgGris: #262626;
	--bgNegro: #000000;
	--textBlanco: var(--bgBlanco);
	--textRojo: var(--bgRojo);
	--textAzul: var(--bgAzul);
	--textGris: var(--bgGris);
	--textNegro: var(--bgNegro);
}	
body {
	background-color: var(--bgBlanco);
	font-family: "Manrope";
	font-size: 32px;
	color: var(--textNegro);
	text-align: justify;

}
/* desktop lg*/
@media screen and (min-width: 769px){
	header {
		max-width: 100%;
		width: 100%;
		height: 120px;
		background-color: var(--bgAzul);
	}
	header img {
		width: 80px;
		height: auto;
		border: 0px;
	}
	header h1 {
		color: var(--textBlanco);
		font-weight: bold;
		font-size: 1em;
		text-shadow: 1px 1px 1px var(--bgNegro);
	}
	main {
		margin:100px 0px;
		font-weight: 600;
		font-size: 0.8em;
	}
	#home {
		color: var(--textNegro);
		background-color: var(--bgBlanco);
	}
	#home h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}
	#home small {
		font-weight: 400;
	}
	#home p {
		text-align: justify;
		padding: 5px;
		font-size: 0.8em;
	}
	#home .img-photo {
		width: 200px;
		height: 260px;
		border: 0px;
		float: right;
		padding: 10px;
	}
	#home .img-skill {
		width: 100px;
		height: 100px;
		border: 0px;
		padding: 0px;
		margin:0px auto;
	}
	#services {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}
	#services .services {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}
	#services .services:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}
	#services h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}
	#services .services h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}
	#services .services p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}
	#services .services p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}
	#services .services img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}
	#services .services strong {
		color: var(--textRojo);
	}
	#services .services strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#projects {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#projects .projects {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#projects .projects:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#projects h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#projects .projects h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#projects .projects p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#projects .projects p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#projects .projects img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#projects .projects strong {
		color: var(--textRojo);
	}
	#projects .projects strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#clients {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#clients .clients {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#clients .clients:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#clients h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#clients .clients h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#clients .clients p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#clients .clients p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#clients .clients img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#clients .clients strong {
		color: var(--textRojo);
	}
	#clients .clients strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#agenda {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#agenda .agenda {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#agenda .agenda:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#agenda h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#agenda .agenda h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#agenda .agenda p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#agenda .agenda p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#agenda .agenda img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#agenda .agenda strong {
		color: var(--textRojo);
	}
	#agenda .agenda strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#contacts {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#contacts .contacts {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#contacts .contacts:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#contacts h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#contacts .contacts h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#contacts .contacts p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#contacts .contacts p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#contacts .contacts img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#contacts .contacts strong {
		color: var(--textRojo);
	}
	#contacts .contacts strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	aside {
		position: fixed;
		margin-top: 100px;
	}
	footer {
		max-width: 100%;
		width: 100%;
		height: 60px;
		color: var(--textBlanco);
		font-weight: 600;
		font-size: 0.4em;
		background-color: var(--bgNegro);
	}
}
/* tablet md*/
@media screen and (min-width: 577px) and (max-width: 768px){
	
	header {
		max-width: 100%;
		width: 100%;
		height: 120px;
		background-color: var(--bgAzul);
	}
	header img {
		width: 80px;
		height: auto;
		border: 0px;
	}
	header h1 {
		color: var(--textBlanco);
		font-weight: bold;
		font-size: 1em;
		text-shadow: 1px 1px 1px var(--bgNegro);
	}
	main {
		margin:100px 0px;
		font-weight: 600;
		font-size: 0.8em;
	}
	#home {
		color: var(--textNegro);
		background-color: var(--bgBlanco);
	}
	#home h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}
	#home small {
		font-weight: 400;
	}
	#home p {
		text-align: justify;
		padding: 5px;
		font-size: 0.8em;
	}
	#home .img-photo {
		width: 200px;
		height: 260px;
		border: 0px;
		float: right;
		padding: 10px;
	}
	#home .img-skill {
		width: 100px;
		height: 100px;
		border: 0px;
		padding: 0px;
		margin:0px auto;
	}
	#services {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}
	#services .services {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}
	#services .services:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}
	#services h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}
	#services .services h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}
	#services .services p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}
	#services .services p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}
	#services .services img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}
	#services .services strong {
		color: var(--textRojo);
	}
	#services .services strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#projects {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#projects .projects {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#projects .projects:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#projects h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#projects .projects h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#projects .projects p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#projects .projects p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#projects .projects img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#projects .projects strong {
		color: var(--textRojo);
	}
	#projects .projects strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#clients {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#clients .clients {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#clients .clients:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#clients h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#clients .clients h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#clients .clients p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#clients .clients p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#clients .clients img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#clients .clients strong {
		color: var(--textRojo);
	}
	#clients .clients strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#agenda {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#agenda .agenda {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#agenda .agenda:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#agenda h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#agenda .agenda h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#agenda .agenda p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#agenda .agenda p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#agenda .agenda img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#agenda .agenda strong {
		color: var(--textRojo);
	}
	#agenda .agenda strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#contacts {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#contacts .contacts {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#contacts .contacts:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#contacts h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#contacts .contacts h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#contacts .contacts p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#contacts .contacts p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#contacts .contacts img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#contacts .contacts strong {
		color: var(--textRojo);
	}
	#contacts .contacts strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	aside {
		position: fixed;
		margin-top: 100px;
	}
	footer {
		max-width: 100%;
		width: 100%;
		height: 60px;
		color: var(--textBlanco);
		font-weight: 600;
		font-size: 0.4em;
		background-color: var(--bgNegro);
	}
}
/* mobile sm*/
@media screen and (min-width: 200px) and (max-width:576px){
	
	header {
		max-width: 100%;
		width: 100%;
		height: 120px;
		background-color: var(--bgAzul);
	}
	header img {
		width: 80px;
		height: auto;
		border: 0px;
	}
	header h1 {
		color: var(--textBlanco);
		font-weight: bold;
		font-size: 1em;
		text-shadow: 1px 1px 1px var(--bgNegro);
	}
	main {
		margin:100px 0px;
		font-weight: 600;
		font-size: 0.8em;
	}
	#home {
		color: var(--textNegro);
		background-color: var(--bgBlanco);
	}
	#home h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}
	#home small {
		font-weight: 400;
	}
	#home p {
		text-align: justify;
		padding: 5px;
		font-size: 0.8em;
	}
	#home .img-photo {
		width: 200px;
		height: 260px;
		border: 0px;
		float: right;
		padding: 10px;
	}
	#home .img-skill {
		width: 100px;
		height: 100px;
		border: 0px;
		padding: 0px;
		margin:0px auto;
	}
	#services {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}
	#services .services {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}
	#services .services:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}
	#services h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}
	#services .services h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}
	#services .services p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}
	#services .services p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}
	#services .services img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}
	#services .services strong {
		color: var(--textRojo);
	}
	#services .services strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#projects {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#projects .projects {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#projects .projects:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#projects h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#projects .projects h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#projects .projects p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#projects .projects p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#projects .projects img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#projects .projects strong {
		color: var(--textRojo);
	}
	#projects .projects strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#clients {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#clients .clients {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#clients .clients:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#clients h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#clients .clients h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#clients .clients p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#clients .clients p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#clients .clients img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#clients .clients strong {
		color: var(--textRojo);
	}
	#clients .clients strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#agenda {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#agenda .agenda {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#agenda .agenda:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#agenda h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#agenda .agenda h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#agenda .agenda p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#agenda .agenda p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#agenda .agenda img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#agenda .agenda strong {
		color: var(--textRojo);
	}
	#agenda .agenda strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	#contacts {
		background-color: var(--bgBlanco);
		color:var(--textNegro);
	}	
	#contacts .contacts {
		margin: 5px;
		padding: 10px;
		box-shadow: 5px 15px 10px var(--bgGris);
		border-radius: 20px;
	}	
	#contacts .contacts:hover {
		box-shadow: 5px 15px 10px var(--bgRojo);
		transition: 2s all;
	}	
	#contacts h2 {
		font-size: 1.3em;
		padding: 5px;
		margin:5px 0px;
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 2px solid var(--bgRojo);
	}	
	#contacts .contacts h3 {
		font-size: 0.8em;
		font-weight: bold;
		border-bottom: 10px solid var(--bgRojo);
		color: var(--textRojo);
		text-shadow: 2px 2px 2px var(--bgNegro);
	}	
	#contacts .contacts p {
		font-size: 0.7em;
		margin: 0px auto;
		text-align: justify;
		border-bottom: 10px solid var(--bgRojo);
	}	
	#contacts .contacts p:hover {
		border-bottom: 10px solid var(--bgNegro);
		transition: 2s all;
	}	
	#contacts .contacts img {
		width: 100px;
		height: auto;
		border:1px solid var(--bgGris);
		border-radius: 50px;
		box-shadow: 5px 5px 5px var(--bgNegro);
		display: block;
		margin: 0px auto;
	}	
	#contacts .contacts strong {
		color: var(--textRojo);
	}
	#contacts .contacts strong:hover {
		color: var(--textNegro);
		transition: 1s all;
	}
	aside {
		position: fixed;
		margin-top: 100px;
	}
	footer {
		max-width: 100%;
		width: 100%;
		height: 60px;
		color: var(--textBlanco);
		font-weight: 600;
		font-size: 0.4em;
		background-color: var(--bgNegro);
	}
}