/* FONTS */

@font-face {
	font-family: 'sovereign';
	src: url('../fonts/Sovereign.woff2') format('woff2'),
		url('../fonts/Sovereign.woff') format('woff');
	font-weight: normal;
	font-style:  normal;
}





/* GLOBAL */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
}

html, body {
	width: 100%;
	height: 100% !important;
}






body {
	/* font-family: 'Source Sans Pro', sans-serif; */
	font-family: 'M PLUS Rounded 1c', sans-serif;
	/* font-family: 'Varela Round', sans-serif; */
	font-weight: 500;
	/* color: black; */
	color: #858585;
	background-color: black;
}

p {
	font-size: 16px;
	line-height: 30px;
	margin-bottom: 30px;
}




/* HEADER */



section#hero {
	display: grid;
/* 	height: 100%; */
	height: 100%;
/* 	height: calc(var(--vh, 1vh) * 100); */
	grid-template-columns: 5vw auto 5vw;
	grid-template-rows:  140px 1fr;
	grid-template-areas: 	".		nav 			."
							".		hero-content 	.";
	
	background: url('../images/header-01-bw.jpg') no-repeat center center;
	background-size: cover;
/* 	background: red; */
}


section#hero:before {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0, 0, 0, 0.2);
/*     opacity: 0; */
}


.hero-content {
	grid-area: hero-content;
	position: relative;
}





#viewfinder-01 {
	width: 100%;
	height:90%;
	border: solid 2px rgba(255, 255, 255, 0.1);
	
	display: flex;
	align-items: center;
	justify-content: center;

	animation-name: viewfinderZoom;
	animation-duration: 0.7s;
	animation-timing-function: ease-out;
	animation-delay: 0.5s;
}
#viewfinder-02 {
	width: 94%;
	height: 84%;
	border: 1px solid white;
	border-image-source: url('../images/viewfinder.svg');
	border-image-slice: 53;
	border-image-width: 53px;

	display: flex;
	align-items: center;
	justify-content: center;

	animation-name: viewfinderZoom;
	animation-duration: 0.7s;
	animation-timing-function: ease-out;
	animation-delay: 0.7s;
}
#viewfinder-03 {
	width: 94%;
	height: 94%;
	border: 1px solid white;
	border-image-source: url('../images/viewfinder.svg');
	border-image-slice: 53;
	border-image-width: 53px;

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;

	animation-name: viewfinderZoom;
	animation-duration: 0.7s;
	animation-timing-function: ease-out;
	animation-delay: 0.9s;
}
#viewfinder-cross {
	width: 40px;
	height: 40px;
	/* background: rebeccapurple; */
	background: url('../images/viewfinder-cross.svg');
	opacity: 0.15;
}
#viewfinder-info-wrapper {
	display: grid;
	align-items: center;
	grid-template-columns: 150px auto 150px;
	grid-template-areas: 	"vf-left	vf-center	vf-right";

	padding-top: 10px;

	animation-delay: 1s;
}
#rec-dot {
	grid-area: vf-left;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: red;


	animation-name: recpulse;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
#histogram {
	grid-area: vf-right;
	width: 100%;
	height: 100%;
	background: url('../images/histogram.svg');
	background-size: 100% 100%;
	opacity: 0.3;
}
#viewfinder-info-wrapper h4 {
	grid-area: vf-left;
/* 	justify-self: center; */
	margin-left: 32px;
	color: white;
	font-weight: 500;
}
#title {
	position: absolute;
	bottom: 0;
	font-size: 30px;
	color: white;
	font-weight: 400;
	/* letter-spacing: -4px; */
	font-family: 'sovereign', sans-serif;
	/* text-transform: uppercase; */

	animation-delay: 1s;
}
h2 {
	grid-area: vf-center;
	font-size: 18px;
	font-weight: 200;
	/* color: white; */
	color: #EDB026;
	text-align: center;

	/* animation-delay: 0.5s; */
}












/* NAV */

nav {
	height: 140px;
	width: 100%;
	grid-area: nav;
/* 	border-bottom: 2px solid white; */
	z-index: 2;
/* 	background: #9c9c9c; */
}
#navBar {
	animation-delay: 1.5s;
}

nav ul{
	margin-top: 60px;
	list-style-type: none;
	display: flex;
	align-content: center;
	justify-content: center;
/* 	justify-content: flex-end; */
/* 	background: #b22323; */
}


nav ul li {
/* 	padding: 10px 30px; */
	margin: 0 30px;
	font-size: 12px;
	color: white;
/* 	background: #4eb093; */
}
nav ul li:first-child {
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
/* 	margin-right: 165px;  *//*220 - 55 from ul li*/
/* 	margin-right: 8vw; */
	margin-right: auto;
	width: 44px;
	background-image: url('../images/logo-white.png');
	background-repeat: no-repeat;
	background-position: center center;
}

nav ul li i.fab {
	padding: 14px 0;
}

nav > ul > li#social-instagram {
	margin: 0;
	margin-left: auto;
}
nav > ul > li#social-vimeo {
	margin: 0 0 0 30px;
}


nav ul li a {
	padding: 12px 0px;
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	font-weight: 500;
	text-transform: uppercase;
}

nav ul li a:hover {
	border-bottom: 2px solid #EDB026;
}





#header-title-box {
	width: 30vw;
	height: 25vh;
	position: absolute;
	border: 15px solid rgba(255, 255, 255, 0.06)
}











section#about {
	display: grid;
	grid-template-columns: 5vw 1fr 1fr 5vw;
	grid-template-areas: 	".		about-content		about-photo 		.";
	padding: 200px 0;
	position: relative;
	overflow: hidden;
	background-image: radial-gradient(
		ellipse at top center,
		#2e2e2e,
		#171717 40%
	);
}

#about-content-container {
	grid-area: about-content;
	padding: 0 110px;
	position: relative;
	z-index: 1;
/* 	background: green; */
}
#about-photo-container {
	grid-area: about-photo;
	/* background: blue; */
	background: url('../images/camera-01.png');
/* 	background-position-x: 100%; */
	/* background-size: cover; */
/* 	background-size: contain; */
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
	z-index: 1;
}


.quote-line {
	width: 6px;
	height: 54px;
	position: absolute;
	background: black;
	left: 0;
}

h3 {
	font-family: 'sovereign';
	font-size: 48px;
	line-height: 58px;
	margin-bottom: 60px;
	color: white;
/* 	padding: 0 110px; */
}
h3 > span, h4 > span {
	color: #EDB026;
}

















.element-icon {
	/* border: 1px solid rgba(0, 0, 0, 0.03); */
	border: 1px solid #121212;
	border-radius: 4px;
	display: inline-block;
/* 	width: 4.375em; */
/* 	width: 40vw; */
	width: 70px;
/* 	height: 100px; */
	position: absolute;
	cursor: default;
	text-transform: none;
	font-weight: 400;
	font-size: 1em;
	text-align: center;
	line-height: 2.1em;
	margin: 0.1em;
	/* color: rgba(0, 0, 0, 0.03); */
	color: #121212;
	z-index: 0;
	
}
.element-icon.bright {
	color: white;
	border-color: white;
}
.element-icon .icon {
	font-size: 2.45em;
	display: block;
	padding-bottom: 0.05em;
	padding-top: 0.05em;
	color: inherit;
}
.element-icon .name {
	font-size: .63em;
	font-weight: 400;
	display: block;
	line-height: 1em;
	width: 100%;
	text-align: center;
	margin-top: 0em;
	color: inherit;
}
.element-icon::before {
	content: attr(data-atomic);
	font-size: .77em;
	padding-left: 0.4em;
	display: block;
	line-height: 1.2em;
	text-align: left;
	padding-bottom: 0.5em;
	padding-top: 0.05em;
}
.element-icon::after {
	content: attr(data-mass);
	text-align: center;
	display: block;
	font-size: .77em;
	line-height: 1.2em;
	text-align: center;
	width: 100%;
	padding-top: 1em;
}


#element-01 {
	transform-origin: top left;
	transform: scale(9);
	top: 100px;
	left: -10vw;
}
#element-02 {
	transform-origin: top left;
	transform: scale(5);
	top: 230px;
	left: 35vw;
}
#element-03 {
	transform-origin: top left;
	transform: scale(4);
	top: 600px;
	left: 60vw;
}
#element-04 {
	transform-origin: top left;
	transform: scale(7);
	top: 50px;
	left: 80vw;
}



















section#reel {
	padding: 500px 0;
/* 	min-height: 1000px; */
	display: flex;
	justify-content: center;
	align-content: center;

	background-image:
		url('../images/reel-01.png'),
		radial-gradient(
			ellipse at top center,
			#1f1f1f,
			#0e0e0e 60%
		);
	background-size: 95vw, auto;
	background-repeat: no-repeat;
	background-position: center center;
}



#reel-content {
/* 	max-width: 40vw; */
	width: 80vw;
	max-width: 750px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
/* 	background: red; */
}
#reel-content > h4,
#reel-content > p {
	flex: 1 100%;
	text-align: center;
}
#reel-content > h4 {
	font-size: 24px;
	text-align: center;
	color: white;
	margin-bottom: 30px;
}


#reel-thumb-wrapper {
	width: 75vw;
}
#reel-thumb {
	width: 100%;

	background: url('../images/reel-01.png');
	background-size: cover;
}
#reel-content-wrapper {
	max-width: 40vw;
/*
	position: absolute;
	bottom: 0;
*/
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
#reel-content-wrapper > * {
  flex: 1 100%;
}
#reel-content-wrapper > h4 {
	font-size: 24px;
	text-align: center;
	color: white;
	margin-bottom: 30px;
}
#reel-content-wrapper > p {
	text-align: center;
}
.play-btn {
	width: 70px;
	height: 70px;
	border-radius: 999px;
	/* background: #EDB026; */
	background: black;
	
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;

	color: white;
}
.play-btn:hover {
	background: #EDB026;
	cursor: pointer;
}
.fa-play {
	margin-left: 3px;
}





#projects {
	/* background: #171717; */
	background-image: radial-gradient(
		ellipse at top center,
		#2e2e2e,
		#171717 40%
	);
	padding: 10vh 0;
}

#projects-container {
	display: grid;
	grid-template-columns: 1fr;
}


#portfolio-container {
	padding: 15px;
	font-size: 0;
	flex-flow: row wrap;
	display: flex;
}

#portfolio-container > a {
	flex: auto;
	width: 500px;
	margin: 15px;
}
#portfolio-container > a:first-child {
	width: 1000px;
}
#portfolio-container > a > img {
	width: 100%;
	height: auto;
}

.project {
	position: relative;
}

.project-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 15px 10px 0;
	color: rgba(255, 255, 255, 0.2);
	font-size: 18px;
}
.project::before {
	content: '\A';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(10, 10, 10, 0.4);

	transition: 0.2s ease-in-out;
}
.project:hover::before {
	background: rgba(10, 10, 10, 0.0);
}









section#footer {
	display: grid;
	grid-template-columns: 5vw 1fr 5vw;
	grid-template-areas: 	".		footer-content 		.";
	padding: 50px 0;
	position: relative;
	overflow: hidden;
	/* background-image: radial-gradient(
		ellipse at top center,
		#2e2e2e,
		#171717 40%
	); */
	background: #212121;
}
#footer-container {
	grid-area: footer-content;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
#footer-container > * {
	font-size: 12px;
	text-align: center;
	/* color: white; */
}
#footer-container > a {
	text-decoration: none;
	color: #EDB026;
}
#footer-logo {
	/* width: 100%; */
	width: 50px;
	height: 50px;
	/* padding-top: 80px; */

	/* flex: 1 100%; */

	background-image: url('../images/logo-white.png');
	background-repeat: no-repeat;
	background-position: center bottom; 

	border-top: 1px solid #1f1f1f;
}








.paused {
	animation-play-state: paused !important;
}
.fill-both {
	animation-fill-mode: both;
}


@keyframes recpulse {
	0%		{opacity: 1;}
	48%		{opacity: 1;}
	50%		{opacity: 0;}
	98%		{opacity: 0;}
    100%	{opacity: 1;}
}


@keyframes viewfinderZoom {
	from {
	  opacity: 0;
	  -webkit-transform: scale3d(1.05, 1.05, 1.05);
	  transform: scale3d(1.05, 1.05, 1.05);
	}
	50% {
	  opacity: 1;
	}
  }













@media (max-width: 1800px) {
	section#reel {
		background-size: 95vw, auto;
	}
}

@media (max-width: 1300px) {
	section#reel {
		padding: 300px 0;
	}
	#element-01 {
	transform: scale(7);
	}
	#element-02 {
		transform: scale(4);
	}
	#element-03 {
		transform: scale(3);
	}
	#element-04 {
		transform: scale(5);
	}
	section#reel {
		background-size: 100vw auto;
	}
}

@media (max-width: 1200px) {
	#portfolio-container > a {
		width: 300px;
	}
}

@media (max-width: 1000px) {
	#element-01 {
	transform: scale(5);
	}
	#element-02 {
		transform: scale(4);
		top: 450px;
		left: 28vw;
	}
	#element-03 {
		transform: scale(3);
	}
	#element-04 {
		transform: scale(5);
		left: 60vw;
	}
	section#reel {
		background-size: 150vw auto;
	}
/*
	#portfolio-container > a {
		width: 300px;
	}
*/
}

@media (max-width: 800px) {
	#navBar {
		display: none;
	}
	section#hero {
		grid-template-rows: 0 1fr;
		padding: 3vh 0;
	}
	#element-01 {
	transform: scale(5);
	}
	#element-02 {
		transform: scale(4);
		top: 650px;
		left: 28vw;
	}
	#element-03 {
		transform: scale(3);
		left: 70vw;
	}
	#element-04 {
		transform: scale(5);
		left: 60vw;
	}
	#about-photo-container {
		background: none;
	}
}

@media (max-width: 700px) {
	
}

@media (max-width: 570px) {
/*
	#viewfinder-info-wrapper {
		grid-template-columns: 80px auto 80px;
	}
*/
	#viewfinder-info-wrapper {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 	"vf-left	vf-right";
	}
	
	h1 {
		font-size: 80px;
		line-height: 80px;
		text-align: center;
	}
	h2 {
		font-size: 18px;
		text-align: center;
		display: none;
	}
	section#about {
		grid-template-columns: 10vw 1fr 10vw;
		padding: 100px 0;
	}
	#about-content-container {
		padding: 0;
		max-width: none;
	}
	.quote-line {
		display: none;
	}
	h3 {
		font-size: 36px;
		line-height: 48px;
		margin-bottom: 60px;
	}
	p {
		font-size: 14px;
	}
	section#reel {
		grid-template-columns: 10vw auto 10vw;
		padding: 150px 0;
		background-size: 150vw auto;
	}
	#reel-content {
		padding: 0;
	}
	#reel-content > h3, #reel-content > p {
		max-width: none;
	}
}




@media (min-width: 1500px) {
	#projects-container {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1800px) {
	#about-photo-container {
		background-size: contain;
		background-position: right center;
	}
}


@media screen and (max-width: 400px) {
	#portfolio-container  a { margin: 5px; }
	#portfolio-container { padding: 5px; }
	
  }