@charset "utf-8";
/* CSS Document */


@media screen and (max-width: 1020px) {

/* Menú responsive ...................................... */	
	
	#menu-responsive { 
		background-color: #ffffff;
		z-index: 3;
		position: fixed;
		width: 100%;
		opacity: 1;
		display: block;
		text-align: center;
	}
		#menu-resp-izq {
			width: 80px;
			height: auto;
			float: left;
			margin-top: 5px;
			margin-left: 15px;
		}

		#menu-resp-cerrar, #menu-resp-logo {
			width: 80px;
			height: auto;
			float:right;
			margin-top: 5px;
			margin-right: 10px;
		}
		#menu-resp-cerrar { display: none;}
		#menu-resp-logo img { }
	
	#navegacion-responsive {
		width: 100%;
		display: none;
		margin: 0 auto;
		padding-bottom: 7px;
		z-index: 2;
		position: fixed;
		background-color: #FFFFFF;
		animation: aparecer-menu 0.5s;
		margin-top: 80px;
		padding-top:10px;
		text-align: center;
		opacity: 1;
	}

		@keyframes aparecer-menu {
			0% { opacity:1;  transform: translateY(-500px);}
			100% { opacity:1;  transform: translateY(0px); }	
		}
		@keyframes desaparecer-menu {
			0% { opacity:1;  transform: translateY(0px);}
			100% { opacity:1;  transform: translateY(-500px); }	
		}

			#navegacion-responsive a {
				width: 44%;
				display: inline-block;
				margin: 5px;
				padding: 5px;				
				font-size: 16px;
				font-weight: bold;
				text-decoration: none;
				color: #FFFFFF;
				background-color: var(--ayllon-color);
				border-radius: 8px;
				text-align: center;
			}	
	
				a #opcion-actual-resp {
					background-color: var(--b-color);
				}
	.politicas { 
			font-size: 14px;
		}
/* Modificacion de los elementos no responsive ....................... */	

	#menu { 
		width: 100%;
		display: none;
	}
		#menu-izq {
			width: 100%;
			float: none;
			text-align: center;
			margin-left: 0px;
		}
		#menu-izq img { 
			width: 70px;
		}	
		#menu-der {
			display: none;
			float: none;
			width: 100%;
			margin-top: 0px;
		}

	#bloque {
		height: 95px;  
	}
	
	#portfolio {
		width: 95%;
		
	}
		#portfolio-der {
			width: 49%;
			margin: 0px;
		}
			#portfolio-der img {
				margin: 0px;
			}
	
		#portfolio-izq {
			width: 50%;
			margin: 0px;
		}	
			#portfolio-izq img {
				margin: 0px;
			}
	
	
/* Ficha dentro del proyecto ......................... */
	
	#proyecto {
		width: 95%;
	}
		#proyecto-foto {
			width: 100%;
			
		}
		#proyecto-datos {
			width: 90%;
			margin: 0 auto;
		}
			#proyecto-datos p {
				text-align: left;
			}	
	#proyecto-mas-imagenes {
		width: 95%;
	}
		div.cada-img {
			width:32%;
			float: left;
			margin:0px;
			margin:2px;
		}	
	

	#about {
		width: 90%;
	}	
		#about-foto {
			width: 100%;
			float: none;
		}
		#about-title {
			width: 90%;
			float: none;
			margin-top: 0px;
			padding: 0px;
			margin: 0 auto;
		}	
		#about-texto {
			width: 80%;
			margin: 0 auto;
		}
			#about-texto p {
				text-align: left;
			}
	
	
	#contacto {
		width: 90%;
	}
		input, textarea {
			width: 96%;
		}
		div.enviar_fallo, div.enviar_ok {
			width: 100%;
		}
	
	
	
	
	#footer {
		width: 90%;
	}
		#footer-credits {
			width: 90%;
			margin: 0 auto;
			float: none;
			text-align: center;
			padding-top: 20px;
		}
		#footer-credits-links {
			width: 100%;
			padding-left: 0px;
			text-align: center;
			margin-bottom: 10px;
			margin-top: 30px;
		}
			#footer-credits-links img {
				width: 40px;
			}
	#footer-up {
		float: none;
		width: 100%;
		text-align: center;
	}
		#footer-up img {
			
		}
}



@media screen and (max-width: 460px) {
	
	#navegacion-responsive a {
		width: 80%;
		
	}
					
}

@media screen and (max-width: 380px) {
	
	#navegacion-responsive a {
		width: 80%;
		
	}
	#ver-publicacion { display: none; }
	#ver-publicacion-tiktok { display: none; }	
					
}