/*******************************************

		FONTS

*******************************************/

@font-face 
{
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat Regular.eot');
	src: url('../fonts/Montserrat Regular.eot?#iefix') format('embedded-opentype'),
		  url('../fonts/Montserrat Regular.woff2') format('woff2'),
		  url('../fonts/Montserrat Regular.woff') format('woff'),
		  url('../fonts/Montserrat Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face 
{
	font-family:'Anonymous Pro';
	src: url('../fonts/Anonymous Pro Regular.eot');
	src: url('../fonts/Anonymous Pro Regular.eot?#iefix') format('embedded-opentype'),
		  url('../fonts/Anonymous Pro Regular.woff2') format('woff2'),
		  url('../fonts/Anonymous Pro Regular.woff') format('woff'),
		  url('../fonts/Anonymous Pro Regular.ttf') format('truetype'),
		  url('../fonts/Anonymous Pro Regular.otf') format('opentype'),
		  url('../fonts/Anonymous Pro Regular.svg#Anonymous Pro Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-02DC;
}

.montserrat{font-family: 'Montserrat', sans-serif;}
.anonymous{font-family: 'Anonymous Pro', monospace;}


/*******************************************

		BASICS

*******************************************/

* 
{
	box-sizing: border-box;

	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
	/* Font */
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;

}

body, html 
{
	width: 100%;
	height: auto; /*100vmin;*/
	/* Font */
	font-family: "Montserrat", sans-serif;
	background-color: #282829;
	color: #f8f8f9;
}

header, section, footer
{
	position: relative;
	min-height: 100vh;
	min-width: 100%;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 4vmin;
}

header
{
/*	min-height: 90vh;
*/	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.headerlogo
{ 
	height: 70vmin;
	width: auto;
}

main
{
	margin-bottom: 100vh;
}

section
{
	
}
.vanity
{
	min-height: 0vmin;
	padding: 1vw;
	background-color: white;
	align-items: flex-start;
	justify-content: flex-start;
}

footer
{
	color: #b8b198;
/*	height: 100vmin;
	bottom: 0;
	position: fixed;
	z-index: -1;*/
}

h1
{
	letter-spacing: 0.1em
	line-height: 1em;
	font-weight: bold;
	font-size: 8vmin;
	margin: 0 auto;
	text-align: center;
}


.fixed-pos
{
	position: fixed;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* Turn on parallax for larger */
@media(min-width: 1025px)
{
	footer
	{
		color: #b8b198;
		height: 100vh;/*100vmin;*/
		bottom: 0;
		position: fixed;
		z-index: -1;
	}
}

/* Turn off parallax scrolling for tablets and phones */
@media (max-width: 1024px) 
{
	header, section, footer
	{
		min-height: 100vh;/*100vmin;*/
		min-height: calc(var(--vh, 1vh) * 100);
	}
	main
	{
		margin-bottom: 100vh;
		margin-bottom: calc(var(--vh, 1vh) * 100);
	}
	footer
	{
		color: #b8b198;
		height: 100vh;/*100vmin;*/
		bottom: 0;
		position: fixed;
		z-index: -1;
	}
}

/*******************************************

		VANITY GRID

*******************************************/
.grid 
{
	width: 100vw;
	height: auto;
	font-size: 5.25vw;
}
.row 
{
	display: flex;
	margin-bottom: 0.8vw;
}
.box 
{
	background: white;
	color: black;
	margin: 0;
	flex: 1 0 auto;
	position: relative;
}
.blue { color: #2EA7DE; }
.red { color: #E1363b; }
.purple { color: #5A58A1; }
.box:after 
{
	content: "";
	float:left;
	display: block;
	padding-top: 110%;
}
.box .inner 
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}



/*******************************************
		
		MONO FADER
		100/numframes = %
		frame 1 at 0 and 100
		
*******************************************/
@keyframes monofader
{
/* 100/numframes = % - eg 6 frames = 0,16.67,33.34,50.01,66.68,83.35,100 (frame 1 at 0 and 100) */
/* color: #e8e5da; background-image: linear-gradient(#282829, #383839); background-size: cover; */
	0% 		{ background-color: #282829; }
	16.67%	{ background-color: #383839; }
	33.34%	{ background-color: #484849; }
	50.01%	{ background-color: #585859; }
	66.68%	{ background-color: #686869; }
	83.35%	{ background-color: #787879; }
	100%		{ background-color: #282829; }
}

.monofade
{
	animation: monofader 45s cubic-bezier(0.8,0,0,0.8) infinite;
}


/*******************************************
		
		COLOR FADER
		100/numframes = %
		frame 1 at 0 and 100
		
*******************************************/
@keyframes colorfader
{
/* 100/numframes = % - eg 6 frames = 0,16.67,33.34,50.01,66.68,83.35,100 (frame 1 at 0 and 100) */
/* color: #e8e5da; background-image: linear-gradient(#282829, #383839); background-size: cover; */
	0% 		{ background-color: #282829; }
	16.67%	{ background-color: #325d81; }
	33.34%	{ background-color: #568f56; }
	50.01%	{ background-color: #ff674d; }
	66.68%	{ background-color: #ab2121; }
	83.35%	{ background-color: #33334d; }
	100%		{ background-color: #282829; }
}

.colorfade
{
	animation: colorfader 45s cubic-bezier(0.8,0,0,0.8) infinite;
}

/*******************************************
		
		TEXT FADER
		100/numframes = %
		same text start and end for smooth tx?

*******************************************/

@keyframes textfader1
{
	0%			{ opacity:0; }
	7.69%		{ opacity:1; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}
@keyframes textfader1b
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:1; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}

@keyframes textfader2
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:1; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}
@keyframes textfader2b
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:1; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}

@keyframes textfader3
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:1; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}
@keyframes textfader3b
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:1; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}

@keyframes textfader4
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:1; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}
@keyframes textfader4b
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:1; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}

@keyframes textfader5
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:1; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}
@keyframes textfader5b
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:1; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}

@keyframes textfader6
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:1; }
	92.31%	{ opacity:0; }
	100%		{ opacity:0; }
}
@keyframes textfader6b
{
	0%			{ opacity:0; }
	7.69%		{ opacity:0; }
	15.38%	{ opacity:0; }
	23.08%	{ opacity:0; }
	30.77%	{ opacity:0; }
	38.46%	{ opacity:0; }
	46.15%	{ opacity:0; }
	53.85%	{ opacity:0; }
	61.54%	{ opacity:0; }
	69.23%	{ opacity:0; }
	76.92%	{ opacity:0; }
	84.62%	{ opacity:0; }
	92.31%	{ opacity:1; }
	100%		{ opacity:0; }
}

.blurbs
{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-weight: bold;
	font-size: 6vmin;
}
.blurb1,.blurb2,.blurb3,.blurb4,.blurb5,.blurb6, .blurb1b,.blurb2b,.blurb3b,.blurb4b,.blurb5b,.blurb6b
{
	position: absolute;
	text-align: center;
	animation-duration: 45s;
	animation-timing-function: cubic-bezier(0.9,0,0,0.9);
	animation-iteration-count: infinite;
	animation-delay: 0s;
}

.blurb1,.blurb2,.blurb3,.blurb4,.blurb5,.blurb6
{
	font-size: 6vmin;	
	top: -10vmin;
}

.blurb1b,.blurb2b,.blurb3b,.blurb4b,.blurb5b,.blurb6b
{
	font-size: 4vmin;
	top: 6vmin;
}


.blurb1
{
  animation-name:textfader1;
  -webkit-animation-name:textfader1;
} 
.blurb1b
{
  animation-name:textfader1b;
  -webkit-animation-name:textfader1b;
}
.blurb2
{
   animation-name:textfader2;
  -webkit-animation-name:textfader2;
}
.blurb2b
{
   animation-name:textfader2b;
  -webkit-animation-name:textfader2b;
}
.blurb3
{
  animation-name:textfader3;
  -webkit-animation-name:textfader3;
}
.blurb3b
{
  animation-name:textfader3b;
  -webkit-animation-name:textfader3b;
}
.blurb4
{
  animation-name:textfader4;
  -webkit-animation-name:textfader4;
}
.blurb4b
{
  animation-name:textfader4b;
  -webkit-animation-name:textfader4b;
}
.blurb5
{
  animation-name:textfader5;
  -webkit-animation-name:textfader5;
}
.blurb5b
{
  animation-name:textfader5b;
  -webkit-animation-name:textfader5b;
}
.blurb6
{
  animation-name:textfader6;
  -webkit-animation-name:textfader6;
}
.blurb6b
{
  animation-name:textfader6b;
  -webkit-animation-name:textfader6b;
}