@charset 'utf-8';


/* ====================================================================================================================
	CSS Reset by Eric Meyer - Released under Public Domain
    https://meyerweb.com/eric/tools/css/reset/
 * ====================================================================================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td 
                  	{margin: 0;padding: 0;border: 0;outline: 0; font-size: 100%;vertical-align: baseline; background: transparent;font-weight: normal;}
body              	{line-height: 1;}
ol, ul            	{list-style: none;}
blockquote, q     	{quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after 	{content: ''; content: none;}
:focus            	{outline: 0;}
ins               	{text-decoration: none;}
del               	{text-decoration: line-through;}
table             	{border-collapse: collapse;border-spacing: 0;}
a 					{text-decoration: none;}


/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/

@font-face {
    font-family: 'Bricolage Grotesque';
    src: local('../fonts/Bricolage Grotesque Regular'), local('../fonts/Bricolage-Grotesque-Regular'),
        url('../fonts/BricolageGrotesque-Regular.woff2') format('woff2'),
        url('../fonts/BricolageGrotesque-Regular.woff') format('woff'),
        url('../fonts/BricolageGrotesque-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

/* ====================================================================================================================
 * STYLES
 * ====================================================================================================================*/

html {
	height: 100%;
}

body {
	font-family: Bricolage Grotesque, Arial, sans-serif;
	color: #F5F5F5;
	background-color: #292929;
	font-size: 16px;
	line-height: 24px;
	display: flex;
	gap: 48px;
	align-items: top;
	margin: 48px;
}

body::before {
  content: "";
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  background: url("../img/mr_bg.jpg") no-repeat center top;
  background-size: cover;

  z-index: -1;
  pointer-events: none; /* allows clicking through */
}


h1 {
	font-family: Bricolage Grotesque, Arial, sans-serif;
}

h2 {
	font-style: normal;
	letter-spacing: 6px;
	text-transform: uppercase;
}

.rotation {
	writing-mode: sideways-lr;

}

strong {
	font-family: Bricolage Grotesque, Arial, sans-serif;	
}


.page {
	flex: 1;
	display: flex;
	gap: 48px;

}

.navigation {
	display: flex;
	height: calc(100vh - 96px);
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}


.content {
	margin-left: auto;
	margin-right: auto;	
	padding-bottom: 128px;
}

.mr_logo {
		width: 112px;
		transition: 0.3s;
	}

.end {
	align-self: top;
}

.caption {
	height: 256px;
}

.scrollhide {
  position:fixed;
}

.scrollhide.show {
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 0s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.scrollhide.hide {
	opacity:1;
	animation-name: blend_out;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 0s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}



@media (max-width: 639px) {
	.page {
		flex-direction: column;

	}

	.content p, .content h1, .content h2 {
		margin-bottom: 20px;
	}

	h1 {
		font-size: 40px;
		line-height: 48px;
	}
	h2 {
		font-size: 20px;
		line-height: 20px;
	}

	.mr_logo {
		width: 112px;
		transition: 0.3s;
	}


	.content{
		font-size: 22px;
		line-height: 28px;
		max-width: 600px;

	}

	.small_copy {
		font-size: 16px;
		line-height: 28px;		
	}

	.caption {
		height: 48px;
	}

	.optional {
		display: none;
	}

	.navigation {
		height: auto;
	}

	.portrait {
		width: 160px;
		border-radius: 48px;
		padding-bottom: 24px;
		transition: 0.3s;
	}


}


@media (min-width: 640px) and (max-width: 1279px) {
	h1 {
		font-size: 56px;
		line-height: 60px;
		transition: 0.3s;
	}
	
	h2 {
		font-size: 20px;
		line-height: 20px;
	}

	.content{
		font-size: 24px;
		line-height: 32px;
		max-width: 600px;

	}

	.small_copy {
		font-size: 16px;
		line-height: 24px;		
	}

	.content p, .content h1, .content h2 {
		margin-bottom: 24px;
	}

	.mr_logo {
		width: 128px;
		transition: 0.3s;
	}

	.portrait {
		width: 220px;
		border-radius: 48px;
		padding-bottom: 24px;
		transition: 0.3s;
	}
	
}



@media (min-width: 1280px) {
	h1 {
		font-size: 80px;
		line-height: 80px;
		transition: 0.3s;
	}

	h2 {
		font-size: 20px;
		line-height: 20px;
	}

	.content {
		font-size: 24px;
		line-height: 32px;
		max-width: 800px;
		align: center;

	}

	.small_copy {
		font-size: 18px;
		line-height: 28px;
	}

	.content p, .content h1, .content h2 {
		margin-bottom: 28px;
	}

	.mr_logo {
		width: 156px;
		transition: 0.3s;
	}

	.portrait {
		width: 298px;
		border-radius: 48px;
		padding-bottom: 24px;
		transition: 0.3s;
	}

}





.one{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 0.7s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.two{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 0.8s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.three{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 0.9s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.four{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.five{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.1s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.six{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.2s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.seven{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.3s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.eight{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.4s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.nine{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.5s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.ten{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.6s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.eleven{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.3s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.7s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}


@keyframes blend_in {
  0% {
    opacity: 0;
    top: 12px;
    -webkit-transform: scaleX(0.98);
	 transform: scaleX(0.98);
  }
  100% {
    opacity: 1;
	top: 0;
	-webkit-transform: scaleX(1);
	 transform: scaleX(1);
  }
}

@keyframes blend_out {
  0% {
    opacity: 1;
    top: 0px;
    -webkit-transform: scaleX(1);
	 transform: scaleX(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scaleX(0.98);
	 	transform: scaleX(0.98);
	top: 12px;
  }
}


a.primary {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	font-size: 18px;
	background-color: #fff;
	padding: 8px 24px 8px 24px;
	-webkit-transition: color 0.5s ease-out;
  	-moz-transition: color 0.5s ease-out;
  	-o-transition: color 0.5s ease-out;
	transition: color 0.5s ease-out;
	color: #292929;
	text-decoration: none;
	margin-bottom: 24px;
	margin-right:16px;
	border-radius: 8px;
	transition: 0.3s;
}


a.primary:hover, a.primary:active a.primary:focus {
	-webkit-transition: border-color 0.2s ease-out;
  	-moz-transition: border-color 0.2s ease-out;
  	-o-transition: border-color 0.2s ease-out;
	transition: border-color 0.2s ease-out;
	color: #000;
	text-decoration: none;
	border-radius: 24px;
	transition: 0.3s;
}

a.primary:hover:before, a.primary:active:before, a.primary:focus:before {
  visibility: visible;
  -webkit-transform: scaleX(0.4);
  transform: scaleX(0.4);
  -webkit-animation: random_background 2s infinite;
  animation: random_background 2s infinite;
}

.dot {
     color: #4a4a4a;
     -webkit-animation: random 2s infinite;
     animation: random 2s infinite;
}


a.secondary {
	position: relative;
	font-size: 18px;
	display: inline-block;
	color: #999;
	text-decoration: none;
}


a.secondary:hover, a.secondary:active, a.secondary:focus {
	text-decoration: underline;
}