@charset "utf-8";
/* CSS Document */
:root {
 	--ayllon-color: #e85b0d;
	--b-color: #706f6f;
	
	--font-menu: 25px; --font-menu-resp: 22px;
	--font-h1: 35px;
	--font-h2: 20px;
	--font-normal: 18px;
	--font-small: 14px;
}

	body {
		font-family: 'Quicksand', sans-serif;
		border:0;
		font-size: var(--font-normal);
		line-height:24px;
		margin:0px;
		padding:0px;
		color: #5E5E5E;
	}
		* {
			box-sizing: inherit;
			transition-property: all;
			transition-duration: 0.3s;
			transition-timing-function: ease;
		}
	
	h1, h2, h3, h4 { 
		font-size: var(--font-h2);
		text-align:left;
		color: var(--b-color);
	}
	h1 {
		font-size: var(--font-h1);
		letter-spacing: 1px;
		line-height:  var(--font-h1);
		}
	h2 {
		color: var(--ayllon-color);
		font-size: var(--font-normal);
	}	
	p { 
		margin-top:15px; 
		margin-bottom:15px;
		color: var(--b-color);
	}
	
	li {
		line-height: 30px;
	}
	li a { color: #000000; text-decoration: none;  }

	a { color: #000000; text-decoration: none;  }
	
	.center { text-align:center; }
	
	iframe { width:100%; }


#header {
	background-color: #ffffff;
	z-index: 3;
	position: fixed;
	width: 100%;
	opacity: 1;
}
	
#menu {
	display: block;
	width: 1000px;
	margin: 0 auto;	
	margin-top: 10px;
	margin-bottom: 5px;
}
#bloque {
	width: 100%;
	height: 105px;
}
	#menu-izq {
		width: auto;
		float: left;
		text-align: left;
	}
		#menu-izq img {
			width: auto;
			height: 80px;
			margin-left: 5px;
			text-align: left;
		}
	#menu-der {
		float: right;
		margin-top: 25px;
	}
		div.opcion {
			padding: 10px;
			padding-left: 20px;
			padding-right: 20px;
			display: inline;
			text-align: center;
			letter-spacing: 2px;
		}
			div.opcion a {
				font-size: 16px;
				font-weight: bold;
				text-decoration: none;
				color: #232323;
			}
				#opcion_atual {
					color: #888888;
				}
	div.break {
		clear: both;
	}
	#menu-responsive {
		display: none;
		text-align: center;
	}
	#navegacion-responsive {
		display: none;
	}

#portfolio {
	width: 1000px;
	height: auto;
	margin: 0 auto;
}
	#portfolio-izq {
		float: left;
		width: 495px;
	}
		#portfolio-izq img {
			width: 100%;
			height: auto;
			border: 0px;
			margin-bottom: 4px;
		}
	#portfolio-der {
		float: right;
		width: 495px;
	}
		#portfolio-der img {
			width: 100%;
			height: auto;
			border: 0px;
			margin-bottom: 4px;
		}

#proyecto {
	width: 1000px;
	margin: 0 auto;
}
	#proyecto-foto {
		width: 490px;
		float: left;
		font-size: 13px;
		text-align: center;
	}
		#proyecto-foto img {
			width: 100%;
			height: auto;
		}
	#proyecto-datos {
		width: 400px;
		float: right;
		padding-right: 20px;
		margin-top: 0px;
	}
		#proyecto-datos p {
			text-align: justify;
		}
		#proyecto-enlaces {
			width: 40px;
			height: auto;
			display: inline-block;
			margin-right: 10px;
		}
			#ver-publicacion, #ver-publicacion-tiktok {
				vertical-align: middle;
				height:40px;
				display:inline-block;
				padding:top:0px; 
				margin-top:-15px;
				color: #E5007E;
			}
				#ver-publicacion-tiktok {
					color: #000000;
				}

#proyecto-mas-imagenes {
	width: 1000px;
	margin: 0 auto;
	margin-top: 30px;
}
	div.cada-img {
		width:32%;
		float: left;
		margin:5px;
	}
		div.cada-img img {
			width: 100%;
			height: auto;	
		}


#about {
	width: 1000px;

	border-radius: 15px;
	margin: 0 auto;
}
	#about-foto {
		width: 500px;
		float: left;
	}
		#about-foto img {
			width: 100%;
			height: auto;
		}
	#about-title {
		width: 400px;
		float: right;
		padding: 20px;
		margin-top: 107px;
	}
	#about-social {
		margin-top:10px;
	}
		#about-social img { width: 40px; height: auto; margin-right: 10px;}
	#about-skills {
		margin-top:20px;
	}
		#about-skills img { width: 40px; height: auto; margin-right: 10px;}
#about-texto {
	width: 800px;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
	#about-texto p {
		text-align: justify;
	}
		#about-iconos {
			width: 45px;
			height: auto;
			display: inline-block;
		}

#contacto {
	width: 1000px;	
	margin: 0 auto;
	text-align: left;
	margin-bottom: 50px;
}
	input, textarea {
		width: 800px;
		padding: 10px;
		border-radius: 10px;
		border: 0px;
		background-color: #DEDEDE;
		font-weight: bold;
		color: var(--ayllon-color);
	}
	#enviar { 
		background-color: #404040;
		color: #ffffff;
		cursor: pointer;
	}
		div.enviar_fallo, div.enviar_ok {
			width: 800px;
			margin:0 auto;
			background-color: #9E282A;
			color: #FFFFFF;
			text-align: center;
			padding: 5px;
			margin-bottom: 30px;
			border-radius: 20px;
			animation: aparecer1 2s;
		}
		div.enviar_ok {
			background-color: #28681C;
		}
		.politicas {
			font-size: 16px;	
		}

		@keyframes aparecer1 {
			0% { opacity:0;}
			100% { opacity:1; }	
		}


#footer {
	border-top: 6px solid #e95a0c;
	width: 1000px;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 40px;
	height: auto;
}
	#footer-credits {
		float: left;
		width: 400px;
		
	}
			#footer a {
				font-size: 17px;
				font-weight: bold;
				text-decoration: none;
				color: #232323;
			}
	#footer-credits-links {
		float: left;
		width: 90px;
		padding-left: 20px;
		margin-top: 18px;
	}
		#footer-credits-links img {
			width: 30px;
			height: auto;
		}
	#footer-up {
		float: right;
		width: 100px;
		text-align: right;
	}
		#footer-up img {
			padding-top:11px;
			width: 70px;
			height: auto;
		}
		#boton-subir {
			animation: arriba_movi 2s infinite;
		}
			@keyframes arriba_movi {
					0%, 20%, 80% 100% { transform: translateY(8px); } 
					50% { transform: translateY(-8px);}
				}


	#cookies {
			width:100%;
			background-color: #333333;
			color:#ffffff;
			padding-top:10px; padding-bottom:0px;
			text-align:center; font-size:14px; 
			bottom: 0px;
			position:fixed;
			line-height: 18px;
			font-weight: bold;
			z-index:20;
			opacity: 0.90;
			animation: aparecer2 2s;
		}
		#cookies div { width:80%; margin: auto; display:block; }
		#cookies a { color: var(--ayllon-color); font-weight: bold; background-color:#FFFFFF; padding:2px; text-decoration:none; padding-left:10px; padding-right:10px; margin:5px; }
		
		
		@keyframes aparecer2 {
			0% { opacity:0;  transform: translateY(30px);}
			100% { opacity:0.90;  transform: translateY(0px); }	
		}