/*
Name: xyz 0.0001 by Sandra Bermudez @ morphogonia
Version: min. for. fun.
Author: sandrax@bulabe.com
URL: https://morphogonia.xyz
*/


*, html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	-webkit-font-smoothing: antialiased;
}



:root {
	--main-snow: #fff;
	--main-midnight: #191717;
	--main-fog: #F6F5F4;
	--main-high: #773E02;
	--main-shade: #CDD0D2;
	--main-font: 'Satoshi-Variable', serif;
	--main-font-body: 'Figtree', sans-serif;
	--main-font-script: 'Sacramento', sans-serif;
}





body {
	background-color: var(--main-fog);
	color: var(--main-midnight);
	font-family: var(--main-font-body);
	text-align: center;
	padding-bottom: 220px;
	font-size: 14px;
	overflow-x: hidden;
}

::selection {
  color: #A0561F;
  background-color: #000;
}





h1 {
	font-family: var(--main-font);
	color: var(--main-shade);
	font-weight: 800;
	font-size: 13em;
	line-height: 1em;	
}




h1#morph {
	text-align: center;
	margin: 80px 0 0 0;
}

h2#name {
	color: var(--main-midnight);
	font-family: var(--main-font-script), var(--main-font), sans-serif;
	font-size: 6.8em;
	font-weight: 400;
	position: relative;
	z-index: 2;
	margin: 0 0 80px 0;
}








h3 {
	font-size: 1em;
	color: var(--main-midnight);
	font-family: var(--main-font);
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 1px;
}






p {
	font-size: 1.4em;
	font-weight: 500;
	margin: 8px 0;
}

ul {
	list-style-position: inside;
}

li {
	margin: 4px 0;
}

a:link, a:visited, a:active {
	text-decoration: none;
	color: var(--main-midnight);
}

a:hover {
	/*transition: border-bottom 0.2s ease;*/	
}


ul li a:link, ul li a:visited, ul li a:active {
	text-decoration: underline;
}

ul li a:hover {
	color: var(--main-high);
}





.dot {
	color: var(--main-high);
}





a#f_bio:link, a#f_bio:active, a#f_bio:visited {
	font-size: 16px;
	font-weight: 400;
	max-width: 150px;
	position: fixed;
	top: 420px;
	right: 140px;
	text-align: left;
	text-decoration: underline;
	z-index: 1;
}

a#f_bio:hover {
}	






.container_basico {
	text-align: left;
	width: 80%;
	margin-left: 10%;

}



.container {
	/* background-color: #EEEEEC; */
	text-align: left;
	width: 80%;
	margin-left: 10%;
	position: relative;
	z-index: 99;

	display: flex;
	/* display: inline-flex;
	flex-direction: column; */
	flex-direction: row;
	flex-wrap: wrap;
	/* flex-wrap: nowrap; */

	/* justify-content: center;
	justify-content: space-between; */
	justify-content: flex-start;

/*	align-items: center;
	align-items: stretch;
	align-items: flex-end; */

	row-gap: 32px;
	column-gap: 1.8%;
}


.container div {
	border-radius: 8px;
	flex-basis: 23%;
	text-align: left;
	/* box-shadow: -8px 4px 35px -17px rgba(0,0,0,0.1); */
}




.container div.extended {
	flex-basis: 48%;
	background-color: var(--main-midnight);
	min-height: 330px;
	position: relative;
	div {
		position: absolute;
		top: 30px;
		left: 40px;
	}
	div h2 {
		color: var(--main-fog);
		text-transform: uppercase;
		font-size: 3.7em;
		margin: 0;
	}
	div p {
		color: var(--main-fog);
		font-size: 1.6em;	
	}
	div h3 {
		color: var(--main-fog);
		font-family: var(--main-font-script), var(--main-font), sans-serif;
		font-size: 2em;
	}
}





.container div.color {
	min-height: 220px;
	width: 100%;
	border-radius: 18px;
	text-align: center;
	position: relative;
	p {
		font-weight: 800;
		line-height: 220px;
		font-size: 2.2em;
	}
}




.container div div {
	padding: 0 2px;
	margin: 24px 0 0px 0;
}

.container div h2 {
	font-family: var(--main-font-body);
	font-size: 1.2em;
	font-weight: 600;
	margin: 8px 0 18px 0;
}

.container div img {
		position: relative;
		width: 100%;
		border-radius: 8px;
}

.container div .tag {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 600;
	border: 1px solid var(--main-shade);
	border-radius: 18px;
	padding: 8px 12px;
	margin: 16px 0 0 0;
}

.container div .tag:hover {
	background-color: var(--main-high);
	color: var(--main-snow);
	border: 1px solid var(--main-high);
	transition: background-color 0.2s ease;
}






.bloque {
	width: 100%;
	padding: 30px 0;
	margin: 0;
}

.bcolor {
	background-color: var(--main-snow);
	width: 80%;
	margin-left: 10%;
	border-radius: 8px;
	margin-top: 90px;
}

.bdark {
	background-color: #060B0B;
	width: 80%;
	margin-left: 10%;
	border-radius: 8px;
	img {
		margin: 40px auto;
	}
}

.bgray {
	background-size: contain;
	width: 80%;
	margin-left: 10%;
	border-radius: 16px;
	overflow: hidden;
	img {
		width: 100%;
	}
}







#f_open, #f_mind, #f_doors, #f_perception, #f_about, #f_bio {
	position: fixed;
	right: 60px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.2px;
	transition: 0.2s;
	z-index: 13;
	color: var(--main-shade);
}

#f_open {
	top: 50px;
}

#f_mind {
	top: 40%;
}

#f_doors {
	top: 55%;
}

#f_perception {
	bottom: 60px;
}

#f_about {
	bottom: 180px;
	font-weight: 800;
	background-color: #7A5830;
	color: #fff;
	padding: 12px;
	border-radius: 4px;
	z-index: 1000;
	right: 22px;
}

#f_about:hover {
	background-color: var(--main-midnight);
}

#f_bio:hover {
	color: #000;
}





.over {
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;	
	position: fixed;
	z-index: 800;
	border-radius: 9px;
	text-align: left;
	display: none;
	background-color: var(--main-snow);
	color: var(--main-midnight); 
	overflow: scroll;
}

.over div {
	margin: 60px;
	width: 90%;
}

.over h2 {
	font-size: 28px;
	margin: 0 0 40px 0;
}

.over p {
	width: 70%;
	font-size: 18px;
}

.over a {
	color: #F7F6F6;
}

.close {
	position: absolute;
	top: 6%;
	right: 4%;
	background-color: var(--main-midnight);
	color: var(--main-snow);
	font-size: 22px;
	font-weight: 1200;
	padding: 12px;
	border-radius: 28px;
}

div#resume {
	margin: 0;
	width: 100%;
	height: 20%;
	margin: 40px 0 90px 0;
}

div#resume p {
	width: 80%;
	margin-right: 5%;
	float: left;
}

div#resume p.date {
	font-size: 14px;
	opacity: 0.8;
	width: 10%;
	margin-right: 5%;
	text-align: right;
	float: left;
}














/* -- CASE STUDY -- */




a#back:link,  a#back:visited, a#back:active {
	background-color: var(--main-midnight);
	color: var(--main-snow);
	font-size: 1em;
	position: fixed;
	top: 30px;
	left: 10%;
	z-index: 100;
	padding: 12px;
	border-radius: 8px;
}

a#back:hover {
	
}

h1#case {
	text-align: left;
	margin: 120px 0 60px 0;
	font-size: 8em;
}

div#tile {
	width: 100%;
	margin: 0 0 60px 0;
	text-align: left;
}

div#mocks {

}

div#mocks img {
	
}






div#wall {
	width: 100%;
	padding: 30px 60px;
	position: fixed;
	z-index: 999;
	left: 0;
	bottom: 0;
	min-height: 33%;
	background-color: #fff;
}

div#wall div#pass form { 
	margin: 40px 0;
}


label {

}

input {
  padding: 5px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0 20px 0 0;
  font-family: var(--main-font-body);
}

button {
  padding: 8px 12px;
  font-size: 0.8rem;
  background-color: var(--main-midnight);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}

button:hover {
  
}









/* = Tablet = */

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


	#f_open, #f_mind, #f_doors, #f_perception {
		font-size: 0.8em;
		opacity: 0.4;
		right: 22px;
	}

	a#f_bio:link, a#f_bio:active, a#f_bio:visited {
		font-size: 11px;
		top: 20px;
		right: 25px;
		min-width: 70%;
		text-align: right;
	}

	h1 {
		font-size: 9.6em;
		margin: 0px 0 0;
	}

	h1#morph {
		margin: 90px 0 0 0;
	}

	h2#name {
		font-size: 3.6em;
		margin: 0 0 90px 0;
	}


	.container div.color {
		p {
		font-size: 1em;
	}
}

	.container div {
		flex-basis: 32%;
	}

	.container div h2 {
		margin: 8px 0 18px 0;
	}

	#close {
		top: 7%;
		right: 10%;
	}







.over p {
	width: 80%;
	font-size: 1px;
}

div#resume p {
	width: 90%;
	margin-right: 0;
	float: none;
}

div#resume p.date {
	width: 90%;
	margin-right: 0;
	margin: 28px 0 0 0;
	text-align: left;
	float: none;
}







	div#tile {
	margin: 40px 0 0 10%;
	top: 200px;
	}

	div#mocks {
		top: 210px;
		right: 5%;
	}


	.bdark img {
		width: 90%;
	}



}


/* = Mobile = */

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


h1#morph {
	margin: 60px 0 0 0;
}

h2#name {
	margin: 0 0 40px 0;
}

	h1 {
		font-size: 4em;
		margin: 0px 0 0 0;
	}

	h2 {
		font-size: 2.8em;
	}



p {
	font-size: 1em;
	font-weight: 500;
	margin: 4px 0;
}




.container div h2 {
	
	margin: 0px 0 8px 0;
}


h1#case {
	font-size: 4em;
}

div#wall {
	
	padding: 30px 0px;

}



	.container div {
		flex-basis: 48%;
	}

div#tile {
	width: 80%;
	margin: 0px 0 0 10%;
	text-align: left;
	position: relative;
}

div#mocks {
	position: relative;
	width: 80%;
	left: 10%;
}

h2#name {
	font-size: 3.2em;
	margin: 0 0 40px 0;
}



.over p {
	font-size: 18px;
}
.over a {
	color: #F7F6F6;
}

.over div {
	margin: 40px 20px;
}






label {
	display: block;
	margin: 12px 0 12px 0;
}

input {
	display: block;
	width: 60%;
	margin-left: 20%;
}

button {
	margin: 28px 0 0 0;
}



} /* media  */

/* = Mobile = */

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

	

}