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

* { margin: 0; padding: 0;}

html{
  scroll-behavior: smooth;
}

body {
	background-color: #030303;
	color: #ffffff;
	font-family: neue-haas-grotesk-display, sans-serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 35px; font-weight: 500; position: fixed; top: 50px;  }
	.nombre { left: 50px; }
	.gris { color: #5E6772; right: 50px; }
h2 { font-size: 7vw; font-weight: 400; margin: 250px 0 150px; width: 85%; line-height: 1.1em; }
h3, p, a { font-size: 50px; font-weight: 500; width: 75%; }
h3 { color: #5E6772; margin-top: 50px; font-weight: 500; }

a { text-decoration: none; color: #ffffff; }
a:hover { text-decoration: line-through; }


.contenido { position: relative; padding: 50px; z-index: 999; margin-bottom: 200px; }
.clientes { margin-bottom: 150px;}


#fondo {
	opacity: 0;
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: url("me.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}



@media all and (min-width: 1024px) and (max-width: 1280px) { }

@media all and (min-width: 768px) and (max-width: 1024px) {
	h1 { font-size: 35px; top: 30px; }
		.nombre { left: 30px; }
		.gris { right: 30px; }
	h2 { font-size: 11vw; width: 100%; line-height: 1.2em; margin: 300px 0 100px; }
	.contenido { padding: 30px;  margin-bottom: 150px; }
	h3, p, a { width: 100%; }
}


@media all and (min-width: 480px) and (max-width: 767px) {
	h1 { font-size: 21px; top: 20px; }
		.nombre { left: 20px; }
		.gris { right: 20px; }
	h2 { font-size: 10vw; width: 100%; line-height: 1.2em; margin: 200px 0 100px; }
	h3, p, a { font-size: 35px; font-weight: 500; width: 100%; }
	
	.clientes { margin-bottom: 50px;}
	.contenido { padding: 20px;  margin-bottom: 100px; }
}


@media all and (max-width: 480px) {
	h1 { font-size: 21px; top: 20px; }
		.nombre { left: 20px; }
		.gris { right: 20px; }
	h2 { font-size: 10vw; width: 100%; line-height: 1.2em; margin: 200px 0 100px; }
	h3, p, a { font-size: 30px; font-weight: 500; width: 100%; }
	
	.clientes { margin-bottom: 50px;}
	.contenido { padding: 20px;  margin-bottom: 150px; }
}