/* Variables */
:root {
  --color-primary: #2b70b1;;
}

/* Base */
html,
body
{
	margin: 0;
	padding: 0;
	font-family: "Zain", sans-serif;
	font-weight: 400;
	font-size: 16px;
	background-color: #2c96b1;
}
a
{
	color: var(--color-primary);
}
.color-primary
{
	color: var(--color-primary);
}
/* Fonts */
.spicy-rice-regular
{
  font-family: "Spicy Rice", serif;
  font-weight: 400;
  font-style: normal;
}
.zain-extralight
{
  font-family: "Zain", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.zain-light
{
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.zain-regular
{
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.zain-bold
{
  font-family: "Zain", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.zain-extrabold
{
  font-family: "Zain", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.zain-black
{
  font-family: "Zain", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.zain-light-italic
{
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.zain-regular-italic
{
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: italic;
}

/* Page */
.page
{
	display: flex;
	flex-direction: column;

	//border: solid 3px aqua;
}
.page .photo
{
	width: 100%;
	height: 300px;
	position: relative;
	overflow: hidden;
}
.page .photo .img-main
{
	width: 100%;
	position: absolute;
	left: 0;
	top: -20%;
}
.page .content
{
	position: relative;
	z-index: 10;
	padding: 2rem;
}
.page .content .content-inner
{
	margin: -3rem 0 0 0;
	padding: 2rem;
	background-color: #FFFFFF;
	box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.logo-inline
{
	width: 32px;
	height: 32px;
	display: inline;
}
/* Type */
.h1
{
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: rgba(50,50,50,1);
}
.h1 .name
{
	display: block;
	font-size: 10vw;
	line-height: 1.2;
}
.h2
{
	margin: 2.5rem 0 0.5rem 0;
	padding: 0;
	color: var(--color-primary);
	font-family: "Zain", sans-serif;
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
}

@media screen and (min-width: 1024px)
{
	.page
	{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: row;
	}
	.page .photo
	{
		width: 100%;
		height: auto;
	}
	.page .photo .img-main
	{
		width: 100%;
		height: 100%;
		position: static;
		transform: none;
		object-fit: cover;
	}
	.page .content
	{
		min-width: 40vw;
		display: flex;
		align-items: center;
		padding: 0;
		border-left: solid 1px #74bfea;
	}
	.page .content .content-inner
	{
		margin: 0;
		transform: translateX(-5vw);
		max-height: 80vh;
		overflow-y: auto;
	}
	.h1 .name
	{
		font-size: 5rem;
		line-height: 1;
		margin-top: 0.5rem;
	}

}