:root {
	--c-body: 				#fff;
	--c-text: 				#333;
	--c-light-grey: 	#f6f6f6;
	--c-dark-grey: 		#404040;

	--c-green: 				hsl(93, 86%, 39%);
	--c-light-green: 	hsl(93, 43%, 96%);

	--c-green1:				hsl(87, 100%, 43%);
	--c-green2:				hsl(128, 52%, 47%);
	--c-green3:				hsl(148, 100%, 27%);
	--c-body-30:			rgba(255,255,255,0.3);
	--c-body-60:			rgba(255,255,255,0.6);

	--c-purple: 			hsl(312, 60%, 44%);
	--c-light-purple: hsl(312, 60%, 92%);

	--c-light-blue: 	hsl(205, 100%, 96%);

	--f-strong: 700;

	--fill-menu: 								var(--c-body);
	--fill-menu-back: 					transparent;
	--fill-menu-back-scrolled: 	var(--c-body);
	--fill-stay-white:					var(--c-body);

	--pad-hor: 				4.8rem;
	--pad-vert: 			9.6rem;
	--pad-vert-menu: 	2rem;
	--pad-grid: 			2.4rem;
	--pad-tile: 			2.4rem;
	--pad-content:		3.2rem;

	--width-max: 136rem;
	--width-max-headertext: 112rem;

	--radius: 			0.4rem;
	--radius-large: 1.8rem;
}


/* FONTS */
.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
}
.averia-serif-libre-regular {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
}

html { 
	font-size: 62.5%;
	overflow-x: hidden;
}
html.hide { overflow: hidden; }
body {
	padding: 0;
	margin: 0;
	color: var(--c-text);
  font-family: "Poppins", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	background-color: var(--c-body);
}


/* COMMONS */
a { 
	color: var(--c-text);
	text-decoration: none; 
}
h1 {
	font-weight: var(--f-strong);
	font-size: 3.6rem;
	line-height: 3.6rem;
}
h2 {
	font-weight: var(--f-strong);
	font-size: 2.8rem;
}


/* WRAPPER */
.wrapper { padding: 0; }


/* MOVE */
.move { 
	position: relative; 
	display: flex;
}
.move a {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-2.4rem, -6.4rem);
	display: block;
	width: 4.8rem;
	height: 4.8rem;
	z-index: 1;
}
.move a svg {
	width: 4.8rem;
	height: 4.8rem;
}
.move a svg polygon { fill: var(--c-body); }
.footer .move a svg polygon { fill: var(--c-green); }
.footer .move a svg { transform: rotate(180deg); }


/* FADE-IN */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; margin-left: 0px; } to { opacity:1; margin-left: 0px; } }
.fade-in {
	opacity:0;
	-webkit-animation:fadeIn ease-out 0.25s;
	-moz-animation:fadeIn ease-out 0.25s;
	animation:fadeIn ease-out 0.25s;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration: 0.25s;
	-moz-animation-duration: 0.25s;
	animation-duration: 0.25s;
}
.fade-in {
	-webkit-animation-delay: 0.25s;
	-moz-animation-delay: 0.25s;
	animation-delay: 0.25s;
}


/* HEADER */
.header {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 72vh;
	background-color: var(--c-light-grey);
	background-size: cover;
	background-position: center center;
}
.header .header-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 80, 80, .3);
}
.header .header-text {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--fill-stay-white);
}
.header .header-text span {
	display: block;
	max-width: var(--width-max-headertext);
	padding: 1.6rem 9.6rem;
	font-size: 5.6rem;
	line-height: 5.6rem;
	font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
	text-wrap: balance;
}
.header .header-text span.sub {
	font-size: 4rem;
	line-height: 4rem;
}


/* CONTENT MAIN */
.main { 
	margin: var(--pad-vert) 0;
	padding: 0 var(--pad-hor);
}


/* PROJECTS */
.main.projects {
	background-color: var(--c-light-blue);
	padding-block: 4.8rem var(--pad-vert);
}
.main.projects .project {
	background-color: var(--c-body);
	border-radius: var(--radius-large);
	padding: var(--pad-tile);
	overflow: hidden;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.main.projects .project p { padding-inline: 0.8rem; }
.main.projects .project p.project-title {
	font-family: "Averia Serif Libre", serif;
	font-size: 2.4rem;
	font-weight: 700;
	margin: 0.8rem 0;
}
.main.projects .project p.project-subtitle { font-weight: 700; }
.main.projects .project a {
	display: flex;
	justify-content: center;
	cursor: pointer;
}
.main.projects .project a svg {
	width: 2.4rem;
	height: 2.4rem;
}
.main.projects .project.show a { transform: rotate(180deg); }


/* EXPANDER */
.expander {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.2s;
}
.expander-content {
  min-height: 0;
  transition: visibility 1s;
  visibility: hidden;
}
.show .expander { grid-template-rows: 1fr; }
.show .expander .expander-content { visibility: visible; }


/* QUOTES */
.main.quotes {
	background-color: var(--c-light-green);
	padding-block: 4.8rem var(--pad-vert);
	margin-bottom: 0;
}
.main.quotes .content { grid-template-columns: repeat(2, 1fr); }


/* MASKED */
.masked { 
	width: 100%;
	height: auto;
	clip-path: url(#shape); 
}


/* META */
.meta {
	font-size: 1.2rem;
	text-transform: uppercase;
}
.main ul.meta {
	list-style-type: none;
	padding: 0 0.8rem;
	line-height: 1.4rem;
}
.main ul.meta li { margin-block: 0.4rem; }


/* CONTENT */
.main .content { 
	max-width: var(--width-max);
	margin: 0 auto;
	display: grid;
	gap: var(--pad-grid);
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}
.main .content div > *:first-child { margin-top: 0; }
.main .content img { 
	width: 100%; 
	border-radius: var(--radius);
}
.main .content > div { margin-inline: var(--pad-content); }
.main .content > div.project { margin-inline: 0; }
/*.image { align-self: center; }*/
.main .content > div.image { margin: 0; }
.column-1-2 { grid-column: 1/3; }
.column-1-3 { grid-column: 1/4; }
.column-2-3 { grid-column: 2/4; }
.main .btn a {
	display: inline-block;
	background-color: var(--c-green);
	padding: 0.8rem 4rem 0.8rem 2.4rem;
	margin: 1.6rem 0;
	border-radius: 0.4rem;
	color: var(--c-body);
	text-decoration: none;
	position: relative;
}
.main .btn a:after {
	content: '';
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	position: absolute;
	top: 50%;
	margin-top: -1.2rem;
	right: 1.2rem;
	background-image: url("../img/chevron-right-diap.svg");
}
.main a { 
	color: var(--c-green); 
	text-decoration: underline;
}
.main .btn a:hover { background-color: var(--c-text); }
.main p strong { font-weight: var(--f-strong); }

.main ul,
.main ol {
	margin-bottom: 0;
}
.main ul li,
.main ol li { 
	position: relative;
	margin: 0.8rem 0;
}

.main ul.leafs {
	list-style-type: none;
	padding: 0;
}
.main ul.leafs li {
	display: block;
	position: relative;
	padding-left: 3.2rem;
}
.main ul.leafs li:before {
	content:'';
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	position: absolute;
	top: 0.2rem;
	left: 0;
	background-image: url('../img/icon-leaf-01.svg');
}

.main blockquote {
	background-color: var(--c-purple);
	padding: var(--pad-tile);
	margin: 0 var(--pad-grid);
	border-radius: var(--radius);
	color: var(--c-body);
	font-size: 2rem;
}
.main blockquote > *:first-child { margin-top: 0; }
.main blockquote > *:last-child { margin-bottom: 0; }
.main blockquote p { padding-inline: 0.8rem; }


/* MAIN-NAVIGATION */
.main-navigation {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: var(--pad-vert-menu) var(--pad-hor);
	justify-content: space-between;
	transition: padding 0.2s ease-out;
	background-color: var(--fill-menu-back);
	z-index: 2;
}
.scrolled .main-navigation { 
	--fill-menu-back: var(--fill-menu-back-scrolled);
}
.scrolled .main-navigation:after {
	content: '';
	display: block;
	width: 100%;
	height: 0.6rem;
	position: absolute;
	bottom: -0.6rem;
	left: 0;
	background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}
.main-navigation .logo {
	width: 37.5rem;
	height: 6rem;
	padding: 0.4rem 0rem;
	margin: -0.8rem 1.6rem 0;
}
.scrolled .main-navigation {
	--fill-menu: var(--c-text);
}

.leaf-green1 { fill: var(--c-body-30); }
.leaf-green2 { fill: var(--c-body-60); }
.leaf-green3,
.leaf-black { 
	fill: var(--c-body); 
}

.scrolled .leaf-green1 { fill: var(--c-green1); }
.scrolled .leaf-green2 { fill: var(--c-green2); }
.scrolled .leaf-green3 { fill: var(--c-green3); }
.scrolled .leaf-black { fill: var(--c-text); }

.main-menu-container { margin-left: auto; }
ul.main-menu {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
ul.main-menu { position: relative; }
ul.main-menu li a {
	display: block;
	padding: 0.4rem 0rem;
	margin: 0 1.6rem;
	text-transform: uppercase;
	color: var(--fill-menu);
}
.scrolled ul.main-menu li a { --fill-menu: var(--fill-menu-scrolled); }



/* ANIMISTA */
.scale-up {
	-webkit-animation: scale-up-center 200ms cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 200ms cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


/* FOOTER */
.footer {
	position: relative;
	width: 100%;
	background-color: var(--c-light-grey);
}
.footer .footer-grid {
	max-width: var(--width-max); 
	margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.8rem;
  padding: 10rem var(--pad-hor) 16rem;
}
.footer .footer-grid .grid-item {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-inline: var(--pad-content);
}
.footer .footer-grid .grid-item p.title {
	font-size: 2.4rem;
	font-weight: 800;
}
.footer .footer-grid .grid-item p { 
	margin: 0;
	padding: 0 0 1.6rem;
}
.footer .footer-grid .grid-item a {
	display: block;
	line-height: 2.4rem;
	margin: 0;
}
.footer .footer-grid .grid-item a:hover { text-decoration: underline; }
.footer .footer-grid .grid-item ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.footer .footer-grid .grid-item ul li {
	position: relative;
	display: block;
	line-height: 2.4rem;
	margin: 0 0 2.4rem;
	padding-left: 2.4rem;
}
.footer .footer-grid .grid-item ul li:before {
	content: '';
	display: block;
	width: 2rem;
	height: 2rem;
	position: absolute;
	top: -0.3rem;
	left: 0;
	margin: 0.4rem 0;
	background-image: url("../img/chevron-right.svg");
}
.footer .footer-grid .grid-item .social-media {
	display: flex;
	margin: 2.4rem 0;
}
.footer .footer-grid .grid-item .social-media a {
	display: block;
	width: 3.6rem;
	height: 3.6rem;
	margin: 0.4rem 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	transform: scale(1);
	transition: transform 0.2s ease-out;
}
.footer .footer-grid .grid-item .social-media a:hover { transform: scale(1.2); }
.footer .footer-grid .grid-item .social-media a.facebook { background-image: url('../img/icon-facebook.svg'); }
.footer .footer-grid .grid-item .social-media a.linkedin { background-image: url('../img/icon-linkedin.svg'); }
.footer .footer-grid .grid-item .social-media a.instagram { background-image: url('../img/icon-instagram.svg'); }

@media (max-width: 800px) {
	:root {
		--pad-hor: 				1.6rem;
		--pad-vert: 			4.8rem;
		--pad-vert-menu: 	0;
		--pad-grid: 			2.4rem;
		--pad-tile: 			2.4rem;
		--pad-content:		1.6rem;
	}
	.hidemobile {
		display: none;
		visibility: hidden;
	}
	h1 {
		font-size: 2.8rem;
		line-height: 2.8rem;
	}
	h2 { font-size: 2.4rem; }
	.header { height: 64vh; }
	.header .header-text span {
		font-size: 3.2rem;
		line-height: 3.2rem;
	}
	.header .header-text span.sub {
		font-size: 2.4rem;
		line-height: 2.4rem;
	}
	.main-navigation .logo {
		width: 31.25rem;
		height: 5rem;
		margin: 1.2rem 0.8rem 1.6rem;
	}
	.main .content,
	.main.projects .content { 
		grid-template-columns: 1fr; 
	}
	.column-1-2,
	.column-1-3,
	.column-2-3 { 
		grid-column: 1/2; 
	}
	.footer .footer-grid { 
		grid-template-columns: 1fr;
		padding: 5rem var(--pad-hor) 8rem;
	}
	.main.quotes .content { grid-template-columns: 1fr; }
}