/* poppins-regular - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('assets/fonts/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
		url('assets/fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('assets/fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('assets/fonts/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
		url('assets/fonts/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('assets/fonts/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* poppins-200 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url('assets/fonts/poppins-v20-latin-200.eot'); /* IE9 Compat Modes */
src: local(''),
		url('assets/fonts/poppins-v20-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('assets/fonts/poppins-v20-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
		url('assets/fonts/poppins-v20-latin-200.woff') format('woff'), /* Modern Browsers */
		url('assets/fonts/poppins-v20-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
		url('assets/fonts/poppins-v20-latin-200.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* poppins-600 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('assets/fonts/poppins-v20-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
		url('assets/fonts/poppins-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('assets/fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
		url('assets/fonts/poppins-v20-latin-600.woff') format('woff'), /* Modern Browsers */
		url('assets/fonts/poppins-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
		url('assets/fonts/poppins-v20-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* space-grotesk-regular - latin */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/space-grotesk-v13-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/space-grotesk-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/space-grotesk-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/space-grotesk-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/space-grotesk-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/space-grotesk-v13-latin-regular.svg#SpaceGrotesk') format('svg'); /* Legacy iOS */
  }
  
/* space-grotesk-700 - latin */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/space-grotesk-v13-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('assets/fonts/space-grotesk-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('assets/fonts/space-grotesk-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
		 url('assets/fonts/space-grotesk-v13-latin-700.woff') format('woff'), /* Modern Browsers */
		 url('assets/fonts/space-grotesk-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('assets/fonts/space-grotesk-v13-latin-700.svg#SpaceGrotesk') format('svg'); /* Legacy iOS */
  }
  

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

:root {
	--color-text-base: #3B4250;
	--color-text-subtle: #6F7580;
	--color-text-primary: #00072D;
	--color-text-inverse: #F4F4F6;
	--color-text-subtle-inverse: #C3C7CD;

	--color-background-base: #FFFFFF;
	--color-background-subtle: #6F7580;
	--color-background-highlight: #FAFBFF;
	--color-background-primary: #00072D;

	--color-border-base: #3B4250;
	--color-border-subtle: #DCDCDC;
	--color-border-primary: #00072D;

	--font-size-h1: 72px;
	--font-size-h2: 40px;
	--font-size-h3: 32px;
	--font-size-h4: 24px;
	--font-size-text: 18px;
	--font-size-small-text: 15px;
}


@media (prefers-color-scheme: dark) {
  :root {
	--color-text-base: #FFFFFF;
	--color-text-subtle: #878787;
	--color-text-primary: #FFFFFF;
	--color-text-inverse: #F4F4F6;

	--color-background-base: #0c0c0c;
	--color-background-subtle: #6F7580;
	--color-background-highlight: #101010;
	--color-background-primary: #101010;

	--color-border-base: #3B4250;
	--color-border-subtle: #6F7580;
	--color-border-primary: #00072D;
  }
}

body {
	font-family: 'Poppins', Helvetica, Arial, sans-serif;
	font-size: var(--font-size-text);
	line-height: 160%;
	font-style: normal;
	font-weight: 400;
	background: var(--color-background-base);
	color: var(--color-text-base);
	padding: 0px;
	margin: 0px;
	transition: all 0.5s ease;
}

/* Back to top button */
.to-top {
	background: var(--color-background-subtle);
	color: var(--color-text-base);
	position: fixed;
	bottom: 16px;
	right: 32px;
	width: 40px;
	height: 40px;
	border-radius: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-h3);
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: all .4s;
	z-index: 99;
}

.to-top:hover {
	background: var(--color-background-base);
	border: 1px solid var(--color-border-base);
}

.to-top.active {
	bottom: 32px;
	pointer-events: auto;
	opacity: 1;
}


h1, h2, h3, h4 {
	font-family: 'Space Grotesk', Helvetica, sans-serif;
}

h1, .h1 {
	color: var(--color-text-primary);
	font-family: 'Space Grotesk', sans-serif;
	font-size: var(--font-size-h1);
	line-height: 110%;
	font-weight: 700;
}

.h2 {
	font-family: 'Space Grotesk', sans-serif;
	font-size: var(--font-size-h2);
	line-height: 110%;
	font-weight: 700;
}

.h3 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--color-text-base);
	font-size: var(--font-size-h3);
	line-height: 130%;
	font-weight: 700;
}

.h4 {
	font-family: 'Space Grotesk', sans-serif;
	font-size: var(--font-size-h4);
	line-height: 36px;
	font-weight: 700;
}

.h5 {
	font-family: 'Space Grotesk', sans-serif;
	color: var(--color-text-subtle);
	font-size: var(--font-size-small-text);;
	line-height: 130%;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.045em;
}


p {
	font-size: var(--font-size-text);
	line-height: 160%;
	font-weight: 400;
	margin-bottom: 24px;
}

a,
a:visited {
	text-decoration: none !important;
	color: var(--color-text-base);
}

a:hover {
	color: var(--color-text-base);
	text-decoration: underline;
}

p a {
	text-decoration: underline !important;
}

p a:hover {
	text-decoration: none !important;
}

.current-page {
	color: var(--color-text-base);
	text-decoration: underline;
}

hr {
	border: none;
	height: 1px;
	width: 80px !important;
	margin-top: 24px;
	background: var(--color-background-subtle);
}




/* Menú light */
.menu-light {
	top: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	z-index: 999;
}

.menu-light a {
	color: var(--color-text-primary);
}

.menu-light a:hover {
	text-decoration: underline;
}

/* Menú dark */
.menu-dark {
	top: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	z-index: 999;
}

.menu-dark a {
	color: var(--color-text-inverse);
}

.menu-dark a:hover {
	text-decoration: underline;
}

/* Menú general */
.menu-wrapper {
	font-family: 'Space Grotesk', sans-serif;
	width: 1128px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0px;
}

.menu-logo {
	font-size: var(--font-size-h4);
	font-weight: 400;
}

.menu-logo:hover {
	text-decoration: underline !important;
}

.menu-nav ul {
	overflow: hidden;
	float: right;
}

.menu-nav ul li {
	display: inline;
	vertical-align: middle;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu-nav ul li a {
	display: block;
	padding-left: 24px;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.024em;
}

.menu-nav ul li a:hover {
	text-decoration: underline !important;
}

.menu-nav ul li a.current-page {
	text-decoration: underline !important;
}


/* Header light */
.header-light {
  background: var(--color-background-highlight);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
  z-index: 99;
  box-sizing: border-box;
}

.header-wrapper {
  width: 100%;
  max-width: 1128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

@media (max-width: 600px) {
  .header-light {
    justify-content: flex-start; /* el contenido empieza arriba */
  }

  .header-wrapper {
    justify-content: flex-start;
    padding-top: 48px;
  }
}


.header-light h1 {
	color: var(--color-text-subtle);
}

.header-light .h3 {
	color: var(--color-text-subtle);
	font-weight: 400;
}

.header-light p {
	color: var(--color-text-primary);
	margin-top: 8px;
}

.header-data {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 24px;
}

/* Header dark */
.header-dark {
	background: var(--color-background-primary);
	height: 100vh;
	display: flex;
	justify-content: center;
	align-content: center;
	position: relative;
	z-index: 99;
}

.header-wrapper {
	width: 100%;
	max-width: 1128px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}

.header-dark h1 {
	color: var(--color-text-subtle);
}

.header-dark .h3 {
	color: var(--color-text-subtle-inverse);
	font-weight: 400;
}

.header-dark p {
	color: var(--color-text-inverse);
	margin-top: 8px;
}

.header-dark hr {
	background: var(--color-background-subtle);
}

.header-dark li {
	color: var(--color-text-inverse);
}

.header-data {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.header-data h2,
.row-dark h2 {
	color: var(--color-text-subtle-inverse);
}


/* Footer */
footer {
	width: 100%;
}

.footer-wrapper {
	font-family: 'Space Grotesk', sans-serif;
	max-width: 1128px;
	margin: 0 auto;
	padding: 40px 0;
}

.footer-nav {
	padding: 0 0 24px;
}

.footer-nav ul {
	overflow: hidden;
}

.footer-nav li {
	display: inline;
	vertical-align: middle;
	list-style-type: none;
}

.footer-nav a {
	color: var(--color-text-base);
	font-family: 'Space Grotesk', sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
}

.footer-nav a .current-page {
	color: var(--color-text-primary);
	text-decoration: underline;
}

.footer-nav li a:hover {
	color: var(--color-text-base) !important;
}


footer p {
	color: var(--color-text-base);
	font-size: 14px;
	margin-bottom: 0;
}

.footer-colophon a {
	text-decoration: none !important;
}

.footer-colophon a:hover {
	text-decoration: underline !important;
}

/* Content */
.row-light {
	background: var(--color-background-base);
	margin: 0 auto;
}

.row-grey {
	background: var(--color-background-highlight);
	margin: 0 auto;
}

.row-dark {
	background: var(--color-background-primary);
	color: var(--color-text-inverse);
}

.row-wrapper {
	max-width: 1128px;
	margin: 0 auto;
	padding: 144px 0px;
}


.details {
	font-size: var(--font-size-small-text);
}


.content-wrap {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-items: start;
	margin-bottom: 88px;
}

.content-wrap:last-child {
	margin-bottom: 0;
}

.content-sm {
	flex: 30%;
}

.content-lg {
	flex: 70%;
}

.content-wrap .work-functions {
	margin-top: 48px;
}

.content-wrap .work-functions li {
	color: var(--color-text-subtle) !important;
	display: block;
	list-style: circle;
}

.content-sm h3 {
	font-family: 'Poppins', Helvetica, Arial, sans-serif;
	font-size: 24px;
	padding-top: 0 !important;
}

.work-content-boxed {
	display: flex;
	flex-direction: column;
	padding: 0px;
	width: 100% !important;
	padding-bottom: 72px;
	margin: 0 auto;
}

.work-boxed {
	background: #FBFBFB;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 88px 72px;
	gap: 80px;
	width: 100% !important;
}

.work-boxed-text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0px;
	gap: 32px;
	width: 312px;
}

.work-boxed-text img {
	width: 248px;
	height: auto;
}

.work-boxed-img {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px;
	gap: 8px;
}


.work-boxed-img img {
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}





/* Portfolio list */
#portfolio {
	position: relative;
	z-index: 0;
}

.portfolio-list {
	display: flex;
	flex-direction: column;
	gap: 56px;
	margin-top: 120px;
}

.portfolio-item-img {
	position: absolute;
	overflow: hidden;
	height: 100%;
	top: 0;
	right: 0;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	position: fixed !important;
	transform: translate(0px);
	opacity: 0;
	transform: scale(0.9);
	transform-origin: center;
	transition: all .4s ease 0s;
}

.portfolio-item-link:hover > .portfolio-item-img {
	opacity: 1;
	transform: scale(1.0);
	z-index: 99;
}

.portfolio-item-img img {
	margin-right: 120px;
	width: 640px;
	height: 480px;
	border: 1px solid var(--color-border-subtle);
}

.portfolio-item-desc {
	opacity: 0;
	color: var(--color-text-subtle);
	margin-top: 20px;
}

.portfolio-item-link:hover h3 {
	opacity: 1;
	transition: all .4s ease 0s;
	text-decoration: underline;
}

.portfolio-item-link:hover > .portfolio-item-title >.portfolio-item-desc {
	opacity: 1;
	transition: all .4s ease 0s;
}

.portfolio-item-tasks {
	color: var(--color-text-subtle);
	font-size: 16px;
}

.portfolio-item-desc p {
	margin-top: 16px;
}

.portfolio-item-desc a {
	display: none;
}




/* Clients */
.clients-wrap {
	position: relative;
	z-index: 99;
}

.clients-list {
	text-align: center;
}

.clients-list p {
	font-weight: 400;
}

.clients-logos {
	display: flex;
	flex-flow: wrap;
	gap: 40px;
	justify-content: center;
	margin-top: 40px;
}

.clients-logos img {
	width: 200px;
	height: auto;
}

.clients-list {
  text-align: center;
}

.clients-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: center;
  justify-items: center;
  margin-top: 40px;
}

.clients-logos img {
  transition: all 0.2s ease-in-out;
}

/* Quotes */
.quotes-list {
	display: flex;
	flex-direction: row;
	gap: 48px;
}

blockquote {
	border-left: 2px solid var(--color-text-base);
	padding: 16px 32px;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

blockquote::before {
	content: "";
	position: absolute;
	top: 0%;
	left: -4px;
	height: 3.4em;
	background: var(--color-background-highlight);
	width: 5px;
	margin-top: -1em;
}

blockquote::after {
    content: "”";
	color: var(--color-text-base);
	font-size: 88px;
	position: absolute;
	top: 10%;
	left: -0.5em;
	font-style: normal;
	line-height: 1em;
	text-align: center;
	text-indent: -2px;
	width: 1em;
	margin-top: -0.5em;
	transition: .2s all ease-in-out, .4s transform ease-in-out;
}

.quotes-text {
	color: var(--color-text-base);
	font-size: var(--font-size-text);
	line-height: 160%;
}

.quotes-author-name {
	color: var(--color-text-base);
	font-weight: 600;
	margin-bottom: 2px;
	font-style: normal;
}

.quotes-author-company {
	color: var(--color-text-subtle);
	font-size: var(--font-size-small-text);
	font-style: italic;
	display: block;
}


/* Work */
.work-functions {
	padding: 0px;
	margin-top: 8px;
}



.work-functions li,
.portfolio-item-areas li,
.about-functions {
	font-size: var(--font-size-text);;
	list-style-type: none;
	display: block;
	margin: 0;
	padding-left: 16px;
}

.work-functions li:before,
.portfolio-item-areas li:before,
.about-functions li:before {
	content:"-";
	position: relative;
	left:-8px;
}

.about-functions {
	margin: 24px 0 72px;
}

.portfolio-item-areas li {
	color: var(--color-text-subtle);
}


.featured-text p {
	color: var(--color-text-base);
	font-family: 'Space Grotesk';
	font-size: 28px;
	line-height: 150%;
}

.featured-text ul {
	padding: 24px 40px 40px;
}

.featured-text li {
	font-family: 'Space Grotesk';
	font-size: 28px;
	line-height: 150%;
	color: var(--color-text-base);
	list-style-type: none;
}

.featured-text li:before {
	content:"-";
	position: relative;
	left:-8px;
}

.featured-text a {
	text-decoration: underline;
}

.objective-wrapper {
	max-width: 1128px;
	margin: 0 auto;
	padding: 120px 0 120px;
}

.objective-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 24px;
}

.objective-item {
	background: var(--color-background-base);
	display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0px 4px 24px rgba(179, 179, 179, 0.2);
}

.objective-item p {
	margin-bottom: 0;
	font-size: var(--font-size-text);
}

.work-featured-img {
	display: block;
	width: 100%;
	max-width: 1440px;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}

.work-featured-title {
	color: var(--color-text-primary) !important;
	margin-top: 24px;
}

.side-content div {
	margin-left: 50%;
	max-width: 100%;
	height: 72vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 24px;
}

.work-wrapper {
	margin: 0 auto;
	padding-bottom: 144px;	
}

.work-full {
	width: 100%;
	height: auto;
	padding-bottom: 72px;
}

.work-full-list {
	width: 100%;
	height: auto;
	padding-bottom: 72px;
	display: flex;
	flex-direction: column;
	gap: 80px;
	margin-top: 120px;
}

.work-full-list img {
	border: 1px solid var(--color-border-subtle);
}

.work-content {
	max-width: 1128px;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	overflow: hidden;
}

.work-content div {
	width: 48%;
}

.work-content-extra {
	max-width: 1128px;
	display: flex;
	flex-direction: column;
	gap: 80px;
	margin: 0 auto;
	padding-bottom: 144px;
}

.work-content-col {
	display: flex;
	gap: 24px;
}

.work-content-col-img {
	flex: 800px;
}

.work-content-col-txt {
	display: flex;
	align-items: flex-end;
}

.work-content-col-txt p {
	font-size: var(--font-size-small-text);
}

.work-functions-wrapper {
	margin-top: 40px;
	width: 100% !important;
}

.work-functions-wrapper li {
	color: var(--color-text-subtle);
}

.work-content-boxed {
	display: flex;
	flex-direction: column;
	padding: 0px;
	width: 100% !important;
	padding-bottom: 72px;
	margin: 0 auto;
}


.work-results {
	max-width: 1128px;
	margin: 0 auto;
	margin-top: 80px;
	color: var(--color-text-base);
	max-width: 1128px;
	margin-top: 112px;
	border-radius: 8px;
	padding: 32px;
}

.work-results-wrapper {
	text-align: left;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	border-top: 1px solid var(--color-background-highlight);
	padding-top: 32px;
	margin-top: 16px;
}

.work-results-item {
	background: var(--color-background-base);
	padding: 24px;
	border-radius: 8px;
	flex: min-content;
	display: flex;
	flex-direction: column;
	gap: 40px;
	box-shadow: 0px 4px 24px rgba(179, 179, 179, 0.2);
}

.work-results-item span {
	font-family: 'Space Grotesk', Helvetica, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 64px;
	color: var(--color-text-base);
}

.work-result-item-symbol {
	font-size: 40px !important;
}

.work-results-item p {
	font-size: var(--font-size-small-text);
	font-weight: 400;
	color: var(--color-text-base);
}

.work-list-img-container {
	padding-top: 0px;
}

.work-list-img div {
	margin-bottom: 48px;
}

.work-list-img p {
	color: var(--color-text-subtle);
	font-size: var(--font-size-small-text);
	font-style: italic;
	padding: 4px 0px;
}

.work-img {
	width: 100%;
}

.work-gif {
	display: flex;
	justify-content: center;
	background: #F4F4F6;
	width: 100%;
	padding: 80px;
	margin-bottom: 0px !important;
}

.work-gif img {
	width: 280px;
	padding-top: 16px;
	background: #FFF;
	border-radius: 8px;
	box-shadow: 0px 32px 48px rgba(96, 96, 96, 0.08), 
		0px 24px 32px rgba(96, 96, 96, 0.04), 
		0px 16px 24px rgba(96, 96, 96, 0.04), 
		0px 8px 16px rgba(96, 96, 96, 0.04), 
		0px 2px 8px rgba(96, 96, 96, 0.02), 
		0px 1px 2px rgba(96, 96, 96, 0.02);
}

.work-video {

}

.work-video video {
	width: 100%;
	border: 1px solid #f4f4f6;
}


.work-conclusion div {
	width: 80%;
	margin-left: 0px;
}

.work-conclusion > div > h2 {
	margin-bottom: 24px;
}

.work-conclusion p {
	color: var(--color-text-inverse);
}

.ct-link {
	margin-left: 24px;
}

.ft-link-left {
	float: left;
	margin-right: 24px;
}

.ft-link-left:hover {
	text-decoration: underline;
}

.ft-link-right {
	float: right;
	margin-left: 24px;
}

.ft-link-left a.current-page {
	color: var(--color-text-primary);
	text-decoration: underline !important;
}


/* About */
.header-about {
	margin-bottom: 0px !important;
	height: auto;
	padding-top: 120px;
	padding-bottom: 88px;
	background: var(--color-background-highlight);
	margin-bottom: 0px !important;
	height: calc(var(--vvh, 1vh)*100);
	display: flex;
	justify-content: center;
	align-content: center;
}

.header-about > .row-light {
	padding: 0 40px;
}

.header-about h1 {
	font-size: 72px;
	line-height: 120%;
}

.header-about .featured-text {
	margin: 0;
}

.about-profile-img {
	opacity: 0;
	position: absolute;
	overflow: hidden;
	height: 100%;
	top: 0;
	right: 0;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	position: fixed !important;
	transform: scale(0.9);
	transform-origin: center;
	transition: all .4s ease 0s;
}

.about-profile-link:hover > .about-profile-img {
	opacity: 1 !important;
	transform: scale(1.0);
	z-index: 99 !important;
}

.about-profile-img img {
	margin-right: 120px;
	width: 440px;
	height: 440px;
	border-radius: 2px;
}

/* About - Funciones */
.role-text {
	color: var(--color-text-base);
	margin: 24px 0 88px;
}


.role-list {
	display: flex;
	flex-direction: row;
	gap: 24px;
	margin-top: 40px;
}

.role-item {
	background: var(--color-background-highlight);
	padding: 24px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.role-item h3 {
	color: var(--color-text-base);
}


/* Archive */
.archive-menu {
	background: var(--color-background-base);
}

.archive-menu a {
	color: var(--color-text-base);
}

.archive-portfolio-item {
	margin: 56px 0 120px;
}

.archive-portfolio-item-desc {
	color: var(--color-text-subtle);
	padding: 16px 0 24px;
}

.archive-portfolio-item-desc li {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-text);
	line-height: 160%;
}

.archive-portfolio-item-desc li:after {
	content: " · ";
	padding: 0px 4px;
}

.archive-portfolio-item-desc li:last-child:after {
	content: none;
}

.archive-portfolio-imgs img {
	width: 100%;
}


/* Animation */
.header-wrapper {
	-webkit-animation: fadein 0.8s; /* Safari, Chrome and Opera > 12.1 */
		-moz-animation: fadein 0.8s; /* Firefox < 16 */
		-ms-animation: fadein 0.8s; /* Internet Explorer */
		-o-animation: fadein 0.8s; /* Opera < 12.1 */
			animation: fadein 0.8s;
}

@keyframes fadein {
	from { 
		opacity: 0;
		transform: translateY(5%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from { 
		opacity: 0;
		transform: translateY(5%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from { 
		opacity: 0;
		transform: translateY(5%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from { 
		opacity: 0;
		transform: translateY(5%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}



/********************
		LAPTOP 
********************/

@media only screen and (max-width: 1280px) {
	.menu-wrapper {
		padding: 16px 40px;
	}

	/* Content */
	.row-light,
	.row-dark {
		padding: 72px 40px;
	}

	h1, .h1 {
		font-size: 72px;
	}

	/* Home */
	.header-home {
		padding: 0 32px !important;
	}
	
	.header-home div {
		padding: 0 40px !important;
		width: 100% !important;
	}
	

	.header-main {
		height: auto;
		padding: 100px 32px;
	}

	.header-wrapper {
		padding: 0 40px;
	}

	.portfolio-item-img img {
		margin-right: 80px;
		width: 512px;
		height: auto;
	}

	.work-content {
		gap: 40px;
		margin-top: 0px;
		padding-bottom: 80px;
	}
	
	.work-featured-img {
		max-width: 1248px;
	}
	
	.row-dark div {
		padding: 0px;
	}
	
	.work-conclusion {
		padding: 24px 40px !important;
	}

	footer {
		padding: 24px 40px;
	}

}



/********************
		TABLET 
********************/
@media only screen and (max-width: 1024px) {
	.header-main,
	.header-home,
	.header-about {
		height: auto;
	}
	
	h1, .h1 {
		font-size: 56px;
	}
	
	.row-wrapper {
	    padding: 144px 40px;
	}
	
	.work-content {
		flex-direction: column;
		padding-right: 40px;
		padding-left: 40px;
	}
	
	.work-content div {
	    width: 80%;
	}
	
	.work-conclusion div {
	    width: 80%;
	}
	
	.role-list {
	    flex-flow: wrap;
	}
	
	.role-item {
	    width: 48%;
	}
	
	.header-column {
		flex: 100%;
	}
	
	.work-process-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	
	.work-boxed {
	    justify-content: flex-end;
	    align-items: flex-end;
	    gap: 32px;
	}
	
	.work-boxed-text {
	    width: 280px;
	}
	
	.work-boxed-text img {
	    width: 224px;
	}
}

/********************
		MOBILE 
********************/

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

	:root {
		--font-size-h1: 72px;
		--font-size-h2: 36px;
		--font-size-h3: 32px;
		--font-size-h4: 20px;
		--font-size-text: 18px;
		--font-size-small-text: 14px;
	}


	/*body {
		padding: 32px;
	}*/

	/* Menú */
	.menu-wrapper {
		padding: 16px 32px;
	}

	.logo {
		font-size: var(--font-size-h5);
		font-weight: 600;
	}
	
	.menu-contact {
	    display: none !important;
	}

	/* Content */
	h1, .h1 {
		font-size: 42px;
	}

	h3, .h3 {
		font-size: 24px;
	}

	.row-light,
	.row-dark {
		padding: 72px 24px;
	}

	.header-main {
		height: auto;
	}

	.content-wrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24px;
		align-items: start;
		margin-bottom: 88px;
	}
	
	.content-sm {
		flex: 100%;
	}
	
	.content-lg {
		flex: 100%;
	}

	/* Headers */
	.header-light {
		min-height: 100vh;
	}

	.header-wrapper {
		padding: 0 32px;
	}

	.header-home div {
		padding: 0 !important;
	}
	
	.header-home div * {
		width: 100%;
	}

	.header-home .h2,
	.header-home .h3,
	.header-home .h5 {
		width: 100%;
	}

	.header-about {
		height: auto;
	}
	
	.header-about h1 {
	    font-size: 40px;
	}

	.row-dark div {
		width: 100% !important;
		max-width: none !important;
	}

	.row-wrapper {
		padding: 88px 24px;
	}


	/* Home */
	.portfolio-list {
	    gap: 80px;
	    margin-bottom: 56px;
	}
	
	.portfolio-item-link {
	    display: flex;
        flex-direction: column;
        gap: 16px;
	}
	
	.portfolio-item-title  h3 {
		font-size: 40px !important;
	}

	.portfolio-item-desc {
		opacity: 1;
		width: 100%;
		margin-top: 0.5em;
	}

	.portfolio-item-desc a {
		display: block;
		margin-top: 24px;
	}

	.portfolio-item-img {
		display: block;
		position: inherit !important;
        overflow: hidden;
        opacity: 1;
        transform: none;
	}
	
	.portfolio-item-img img {
        width: 100%;
	}
	
	.clients-logos {
		gap: 24px;
	}

	.clients-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: center;
  justify-items: center;
  margin-top: 40px;
}


	/* Work */
	.featured-text p {
	    font-size: 24px;
	}
	
	.objective-list,
	.work-results-wrapper {
	    flex-direction: column;
	}
	
	.objective-item {
	    min-height: 136px;
	}
	
	.objective-item p {
	    font-size: var(--font-size-text);
	}
	
	.work-process-wrapper {
		grid-template-columns: 1fr;
	}

	.work-content {
		display: grid;
		gap: 40px;
		padding: 0 16px;
	}

	.work-content div {
		width: 100%;
	}

	.work-featured-img {
		height: 360px;
		border-bottom: 1px solid var(--color-text-inverse);
		object-fit: cover;
		object-position: top;
	}
	
	.work-content-boxed {
	    width: 100%;
	}
	
	.work-boxed {
	    flex-direction: column;
	    padding: 40px 32px;
	    gap: 32px;
	}
	
	.work-boxed-text {
	    flex-direction: row;
	    width: 100%;
	}
	
	.work-boxed-text img {
        width: 160px;
        height: auto;
	}
	
	.work-content-col {
	    flex-direction: column;
		padding: 0 32px;
	}
	
	.work-content-col-img {
	    flex: auto;
	}
	
	.work-conclusion {
        padding: 0 !important;
        border-bottom: none;
    }

	.related-projects {
		flex-direction: column;
	}

	.related-projects li {
		display: block;
		text-align: left;
		padding-bottom: 12px;
		width: 100%;
	}

	/* About */
	.role-item {
		flex-direction: column;
		gap: 16px;
	}

	.role-item-details {
		width: 100%;
		position: inherit !important;
		display: inherit;
		opacity: 1;
	}

	.quotes-list {
		flex-direction: column;
	}

	.role-list {
		flex-direction: column;
	}

	.role

	/* Footer */

	.row-dark div {
		padding: 0px;
	}
	
	.ct-link {
		margin-left: 0;
	}

	footer {
		padding: 24px 32px;
	}
	
	.footer-nav li {
		display: block;
		width: 100%;
		margin-bottom: 4px;
	}

	.related-projects > ul:nth-child(2) {
	    padding-bottom: 0;
	}


}