:root {
	/** paleta de color */
	--color-1: #c3b7b1;
	--color-2: #1c232f;
	--color-3: #4fa7bf;
	--color-4: #727781;
	--color-5: #6e72c7;
	--color-6: #6b574e;
	--color-7: #434955;
	--color-8: #535c62;
	--color-9: #443530;
	--base-color: #222a35;

	/* color de titulos */
	--title-color: #fff;
}

/** FUENTES */
/* Montserrat */
@font-face {
	font-family: 'Montserrat';
	src: url(fonts/Montserrat/static/Montserrat-Regular.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url(fonts/Montserrat/static/Montserrat-Bold.ttf) format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url(fonts/Montserrat/static/Montserrat-Italic.ttf) format('truetype');
	font-weight: normal;
	font-style: italic;
}

/** Lora */
@font-face {
	font-family: 'Lora';
	src: url(fonts/Lora/static/Lora-Regular.ttf) format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Lora';
	src: url(fonts/Lora/static/Lora-Bold.ttf) format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Lora';
	src: url(fonts/Lora/static/Lora-Italic.ttf) format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Bosteem';
	src: url('fonts/Hathem Bosteem/Hathem Bosteem.ttf') format('truetype');
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-2);
	margin: 0;
	padding: 0;
}


* {
	color: var(--title-color);
}

h1, h2, h3, h4, h5, h6, a {
	font-family: 'Montserrat';
}

p, span, div {
	font-family: 'Lora';
}

p {
	font-size: 1.1rem;
	line-height: 24px;
}

header, nav, main.background, footer {
	background-color: var(--base-color);
}

main.background {
	max-width: 100% !important;
}

/** clases globales */
.primary-button {
	border: none;
	outline: none;
	background-color: var(--color-7);
	color: var(--title-color);
	font-size: 1rem;
	padding: 10px 20px;
	display: inline-block;
	transition: all 0.3s;
	text-decoration: none;
}

.primary-button:hover {
	background-color: var(--color-3);
	color: var(--title-color);
}

.avatar {
	height: 110px;
	width: 100px;
	border-radius: 50%;
}

.signature {
	font-family: 'Bosteem';
}

.img-fluid {
	width: 100%;
}

/* nav */
nav .wrapper {
	max-width: 80%;
	margin: 0 auto !important;
	display: flex;
	justify-content: space-between;
	padding: 20px 0; 
}

nav .nav-item {
	display: flex;
	align-items: center;
	cursor: pointer;
}

nav .nav-item span {
	margin-left: 15px;
	font-family: 'Montserrat';
	font-weight: bold;
}

@media screen and (max-width: 830px) {
	nav .wrapper {
		margin-left: 20px;
		margin-right: 20px;
	}
}

nav i {
	font-size: 1.5rem;
	cursor: pointer;
}

/* barra lateral **/
nav aside {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: var(--color-2);
	overflow-x: hidden;
	transition: 0.5s;
	display: flex;
	flex-direction: column;
	align-items: center;
}

nav aside a {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 10px 0;
	font-size: 1.2rem;
	transition: all 0.3s;
}

nav aside a:not(.closebtn):hover {
	background-color: var(--color-5);
	color: var(--title-color);
}

nav aside a:not(.closebtn) {
	width: 100%;
}

nav aside a.closebtn {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 3rem;
	padding: 0;
	cursor: pointer;
}

nav aside figure {
	margin-top: 60px;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

nav aside figure figcaption {
	margin-top: 20px;
	font-size: 0.8rem;
	font-style: italic;
	text-align: center;
	line-height: 20px;
}

/* header */
header {
	padding: 60px 0;
}

@media screen and (max-width: 576px) {
	header {
		padding-top: 0; 
	}	
}


header .wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	max-width: 80%;
	margin: 0 auto; 
}

@media screen and (max-width: 576px) {
	header .wrapper {
		display: flex;
		flex-wrap: wrap; 
	}	
}

header .wrapper > div:last-child {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}


@media screen and (max-width: 576px) {
	header .profile {
		height: 200px; 
	}
	
	header .wrapper > div:last-child {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

@media screen and (min-width: 577px) and (max-width: 830px) {
	header .wrapper > div:last-child img {
		max-height: 250px;
		max-width: 250px;
	}
}


@media screen and (max-width: 576px) {
	header .wrapper > div:last-child img {
		width: 100%;
	}
}


@media screen and (max-width: 576px) {
	header .wrapper > div:first-child {
		order: 1;
		margin-left: 15px;
		margin-right: 15px;
	}
}

header .primary-button {
	margin-top: 20px;
}

header .social-container {
	margin-top: 10px;
}

header .social-container a,
footer .social-container a {
	margin-right: 5px;
	color: var(--title-color);
	text-decoration: none;
	font-size: 1.5rem;
}

/* main */
main,
footer .wrapper {
	max-width: 80%;
	margin: 0 auto;
}

main section {
	padding: 40px 0;
}

/* seccion acerca */
main section:first-child h2 {
	font-size: 2rem;
}

main section:first-child .grid-about {
	display: grid;
	grid-template-columns: 35% 65%;
}

@media screen and (min-width: 577px) and (max-width: 830px) {
	main section:first-child .grid-about {
		grid-template-columns: 25% 75%;
	}
}

@media screen and (max-width: 576px) {
	main section:first-child .grid-about {
		grid-template-columns: 100%;
		grid-template-rows: repeat(2, auto);
	}
}

main section:first-child .grid-about > div:first-child {
	display: flex;
	flex-direction: column;
	align-items: end;
	padding-top: 40px;
}

@media screen and (max-width: 576px) {	
	main section:first-child .grid-about > div:first-child {
		flex-direction: row;
		align-items: end;
		padding-top: 0;
		justify-content: space-between;
		margin-bottom: 20px;	
	}
}

main section:first-child .grid-about > div:last-child {
	border-left: 1px solid var(--color-8);
}

@media screen and (max-width: 576px) {	
	main section:first-child .grid-about > div:last-child {
		border-top: 1px solid var(--color-8);
		border-left: none;		
	}
}

main section:first-child .grid-about > div {
	padding: 0 30px;
}

main section:first-child .title-about {
	text-align: right;
	margin-top: 10px;
}

main section:first-child .grid-about > div:first-child i {
	font-size: 2rem;
	display: block;
	text-align: right;
}

main section:first-child .grid-about > div:first-child i.space {
	margin-top: 20px;
}


main section:first-child .title-about span {
	font-family: 'Montserrat';
	font-size: 2rem;
}

/** seccion servicios */
main #services,
main #port {
	max-width: 80%;
	margin: 0 auto;
}

main #services .grid-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 20px;
}

@media screen and (max-width: 576px) {
	main #services .grid-services {
		grid-template-columns: 100%;
		grid-template-rows: repeat(6, auto);
	}
}

@media screen and (min-width: 577px) and (max-width: 830px) {
	main #services .grid-services {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
	}
}

main #services .grid-services .card {
	border-radius: 5px;
	background: var(--color-2);
	padding: 30px 25px;
}

main #services .grid-services .card i {
	font-size: 2rem;
	transition: all 0.3s;
}

main #services .grid-services .card h4 {
	transition: all 0.3s;
}

main #services .grid-services .card:hover i,
main #services .grid-services .card:hover h4 {
	color: var(--color-3);
}

main #services .grid-services .card p {
	font-size: 1rem;
}

/** seccion portafolio */
main #proyects .timeline {
	position: relative;
	margin: 0 auto;
}

main #proyects .timeline::after {
	content: '';
	position: absolute;
	width: 1px;
	background-color: var(--color-8);
	top: 0;
  	bottom: 0;
  	left: 50%;
  	/*margin-left: -3px;*/
}


/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	main #proyects .timeline::after {
		left: 5px;
	}
}

main #proyects .container {
	position: relative;
	background-color: inherit;
	width: 50%;
}

main #proyects .container::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	right: -12px;
	background-color: var(--color-3);
	top: 15px;
	border-radius: 50%;
	z-index: 1;
	transition: all 0.3s;
}

main #proyects .container:first-child::after {
	top: 0;
}

@media screen and (max-width: 600px) {
	main #proyects .container {
		width: 100%;
		margin-right: 0;
	}
	
	/* Place the timelime to the left */
	main #proyects .container::after {
		left: -7px;
	}

	main #proyects .container a {
		margin-top: 10px;
	}
}

main #proyects .container:hover::after {
	background-color: var(--color-5);
}

main #proyects .content {
	margin: 0 34px;
}

@media screen and (max-width: 600px) {
	main #proyects .content {
		margin-right: 0;
	}	
}

main #proyects .left {
	left: 0;
}

main #proyects .left h2 {
	text-align: right;
}

@media screen and (max-width: 600px) {
	main #proyects .left h2 {
		text-align: left;
	}	
}

main #proyects .right {
	left: 50%;
}

@media screen and (max-width: 600px) {
	main #proyects .right {
		left: 0;
	}	
}

/* corrige el punto en el tiempo */
main #proyects .right::after {
	left: -12px;
}

main #proyects h5 {
	font-size: 1.5rem;
}

main #proyects a {
	text-decoration: none;
}

main #proyects .stack > span a i {
	transition: all 0.3s;
}

main #proyects .stack > span a:hover i {
	color: var(--color-3);
}

main #proyects .team img {
	height: 50px;
	width: 50px;
}

/** seccion portafolio */
main #port .grid-port {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media screen and (max-width: 576px) {
	main #port .grid-port {
		grid-template-columns: 100%;
		grid-template-rows: repeat(3, auto);
	}
}

@media screen and (min-width: 577px) and (max-width: 830px) {
	main #port .grid-port {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
	}
}

main #port .grid-port .card {
	border-radius: 5px;
	background: var(--color-2);
	padding: 30px 25px;
	overflow-y: auto;
	height: 400px;
}

main #port .grid-port .card img {
	width: 100%;
}

main #port .grid-port .card i {
	font-size: 2rem;
	transition: all 0.3s;
}

main #port .grid-port .card h4 {
	font-size: 1.1rem;
}

main #port .grid-port .card a:not(.primary-button) {
	text-decoration: none;
	font-family: 'Lora';
	color: var(--color-3);
}

@media screen and (max-width: 576px) {
	main #port .grid-port .card a {
		margin-top: 10px;
	}
}

main #port .grid-port .card p {
	font-size: 1rem;
}

main #port .more-proyect {
	margin-top: 40px; 
	text-align: right;
}

@media screen and (max-width: 576px) {
	main #port .more-proyect a:last-child {
		margin-top: 10px;
	}
}

/* section contact */
main #contact .contact-grid {
	display: grid;
	grid-template-columns: 35% 65%;
}

@media screen and (max-width: 576px) {
	main #contact .contact-grid {
		grid-template-columns: 100%;
		grid-template-rows: repeat(2, auto);
	}
}

main #contact .contact-grid > div {
	padding: 0 30px;
}

main #contact .contact-grid > div:first-child {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

@media screen and (max-width: 576px) {
	main #contact .contact-grid > div:first-child {
		align-items: flex-start;
	}	
}

main #contact .contact-grid > div:first-child div {
	text-align: right;
	margin-bottom: 20px;
}

@media screen and (max-width: 576px) {
	main #contact .contact-grid > div:first-child div {
		text-align: left;
	}
}

@media screen and (min-width: 577px) and (max-width: 830px) {
	main #contact .contact-grid > div:last-child {
		padding-right: 0;
	}
}


main #contact .contact-grid > div:first-child h4 {
	margin-top: 10px;
}

main #contact .contact-grid > div:first-child i {
	font-size: 2rem;
	transition: all 0.3s;
}

main #contact .contact-grid > div:first-child a {
	color: var(--title-color);
	text-decoration: none;
}

main #contact .contact-grid > div:first-child a:hover i {
	color: var(--color-3);
}

main #contact .contact-grid > div:last-child {
	border-left: 1px solid var(--color-8);
}

@media screen and (max-width: 576px) {
	main #contact .contact-grid > div:last-child {
		border-left: none;
		border-top: 1px solid var(--color-8);
	}
}

/* footer */
footer {
	padding: 20px 0;
}

footer .wrapper {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 576px) {
	footer .wrapper {
		flex-direction: column;
		justify-content: space-between;
	}	
}

footer .social-container {
	display: flex;
	align-items: center;
}

footer .social-container a {
	margin-right: 20px;
}

/** Mapa */
#map {
	height: 250px;
	max-width: 100%;
}

#map a.leaflet-control-zoom-in span,
#map a.leaflet-control-zoom-out span {
	color: black;
}

/** image svg */
main.p-relative {
	position: relative;
	max-width: initial;
	display: flex;
	justify-content: center;
}


/** ocultamos las figuras en mobile */
@media screen and (max-width: 576px) {
	main.p-relative img {
		display: none;
	}
}

main.p-relative #acerca,
main.p-relative #proyects,
main.p-relative #contact {
	max-width: 80%;
}

.figure-bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 150px;
}

.figure-top-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
}

.figure-bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 150px;
}

.figure-top-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
}

.go-logo {
	position: absolute;
	top: -24px;
	width: 60px;
}

/** ocultamos las figuras en mobile */
@media screen and (max-width: 576px) {
	.go-logo {
		display: block !important;
		left: 0;
	}
}

@media screen and (max-width: 576px) {
	.d-inline {
		display: inline !important;
	}
}
