/** FONTS **/
@font-face {
    font-family: 'pt_monoregular';
    src: url('../fonts/ptm55ft-webfont.woff2') format('woff2'),
         url('../fonts/ptm55ft-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/**@import url('https://fonts.googleapis.com/css?family=Lato:900&display=swap');**/

@font-face {
    font-family:'Lato';
    src: url('../fonts/lato-black-webfont.woff2') format('woff2'),
		 url('../fonts/lato-black-webfont.woff') format('woff'),
		 url('../fonts/Lato-Black.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}

/** GLOBAL **/

::selection {
	background: #e3f86b; /* Safari */
	}
::-moz-selection {
	background: #e3f86b; /* Firefox */
}

a:visted{
	color:#000;
}

#Logo{
	position:fixed;
	display:block;
	left:3em;
	top:3em;
	width:13em;
	height:auto;
	z-index:9999999;
}

#LogoSmall{
	position:fixed;
	display:block;
	left:3em;
	top:3em;
	width:4.5em;
	height:auto;
	z-index:9999999;
}

/************ OVERLAY MENU ************/  
#trigger-overlay{
	position:fixed;
	width: 4em;
	height: 4em;
	z-index:99;
	background-color:transparent;
}

a.burger {
  display: inline-block;
  width:18px;
  height:18px;
  cursor: pointer;
  text-decoration: none;
}
a.burger i {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 5px;
  color:#252525;
  text-transform: lowercase;
  text-indent:-55px;
  background: #252525;
  transition:all .2s ease-out;
}
a.burger i::before, a i::after {
  content:'';
  width: 40px;
  height: 5px;
  background: #252525;
  position: absolute;
  left:0;
  transition:all .2s ease-out;
}
a.burger i::before {
  top: -10px;
}
a.burger i::after {
  bottom: -10px;
}
a.burger:hover i::before {
  top: -15px;
}
a.burger:hover i::after {
  bottom: -15px;
}


/* Button placement */
a.burger {
  position: fixed;
  top:3.5em;
  right:5em;
  z-index:93;
}

/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(205,238,74,1);
	z-index: 9999;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 50px;
	height: 50px;
	position: absolute;
	right: 4em;
	top: 3.5em;
	overflow: hidden;
	border: none;
	background: url(../images/cross.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 999;
}

/* Menu style */
.overlay nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 60%;
	font-size: 3em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 4);
	min-height: 54px;
}

.overlay ul li a {
	font-family: 'pt_monoregular';
	font-size: 1.4em;
	display: block;
	color: #fff;
	text-shadow: none;
	-webkit-transition: color 1s;
	-moz-transition: color 1s;
	transition: color 1s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
	color: #000;
}

.overlay ul ul li {
	display:inline-block;
	margin:0.15em 0.25em 0 0.25em;
}

.overlay ul ul li a{
	width:.5em;
	height:auto;
	opacity:0.6;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay ul ul li:nth-child(1) a{
	width:.4em;
	height:auto;
}


.overlay ul ul li:nth-child(3) a{
	width:.4em;
	height:auto;
}

.overlay ul ul li:nth-child(4) a{
	width:.4em;
	height:auto;
}

.overlay ul ul li:nth-child(5) a{
	width:.4em;
	height:auto;
}

.overlay ul ul li a:hover{
	opacity:0.9;
}


/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.overlay-hugeinc nav {
	-webkit-perspective: 1200px;
	perspective: 1200px;
}

.overlay-hugeinc nav ul {
	opacity: 0.4;
	-webkit-transform: translateY(-25%) rotateX(35deg);
	transform: translateY(-25%) rotateX(35deg);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
	opacity: 1;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
	-webkit-transform: translateY(25%) rotateX(-35deg);
	transform: translateY(25%) rotateX(-35deg);
}

/* animated strikethrough - HOR */
p > a {
  position: relative;
  color: #000;
  text-decoration: none;
}

p > a:hover {
  color: #000;
}

p > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 10px;
  left: 0;
  background-color: #cdee4a;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

p.RiskVsReward > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 10px;
  left: 0;
  margin-left:0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

p > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* animated strikethrough - VERT */
p.rotate > a:hover {
  color: #000;
}

p.rotate > a:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
  right: 118px;
  background-color: #cdee4a;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

p.AboutMe > a:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 100%;
  top: 0;
  right: 30px;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

p.rotate > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

span.white{
	color:#fff;
}


/** TYPOGRAPHY **/

h2{
	font-family:'Lato', sans-serif;
	font-size: 5.625em;
	text-align:left;
	letter-spacing:8px;
	color:#000;
	text-transform:uppercase;
	text-indent:-.8em;
	font-weight:bolder;
}

h3{
	font-family:'Lato', sans-serif;
	font-size: 5.625em;
	text-align:left;
	letter-spacing:6px;
	color:#000;
	text-transform:uppercase;
	font-weight:bolder;
}

h4{
	font-family:'pt_monoregular';
	color: #000;
	font-size: 1.4em;
	text-align: left;
	letter-spacing:2;
	line-height:2;
}

span.small{
	font-size: 60px;
	vertical-align:20px;
}

p {
	font-family:'pt_monoregular';
	color: #000;
	font-size: 1.4em;
	text-align: left;
	letter-spacing:2;
	line-height:2;
}

p.rotate{
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

p.copyright{
	color:#c4c4c4;
	font-size:1em;
	text-align-last:end;
}

/** Footer **/
footer{
	border-top:solid #000 2px;
	width:98%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2em;
}

.HomeFooter{
	margin-top:2em;
}

footer a img{
	width:15em;
	height:auto;
	margin-top:2.5em;
	text-align:left;
	-webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

footer a img:hover{
	opacity:0.5;
}

.footerlinks{
	margin-top:2.5em;
	text-align:right;
}

ul.footerlinks li{
	display:inline-block;
	margin-left:2em;
}

ul.footerlinks li a{
	font-family:'pt_monoregular';
	color: #000;
	font-size: 1em;
	text-align: left;
	letter-spacing:2;
	line-height:2;
	-webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

ul.footerlinks li a:hover{
	color:#cdee4a;
}


/*** HOME PG SHITE **/
.center-vert{
	position:absolute;
	height:100%;
	width:auto;
}

.center-vert p{
	 position: relative;
 	 height: 100px;
  	 width:auto;
	 top:25%;
	 margin-top:-10px;
}

.negative{  /** for 'about me' **/
	position:relative; 
	margin-top:-50em;
}

.x{   /** for 'x' svg **/
	padding-top:3em;
	width:5%;
	height:5%;
}

#About{
	margin-top:-9em;
}

#Work{
	margin-top:0;
}

.AboutBlurb{
	margin-top:2em;
}

.JamSesh{
	margin-top:0;
}

/** Lines **/
.VertLine{
	width:4px;
	height:800px;
	background:#000;
	margin:20px 0 0 20px;
}

.HorLine{
	height:4px;
	width:100px;
	background:#000;
	margin:15em 0 0 31.5em;
}

.HorLine2{
	height:4px;
	width:100px;
	background:#000;
	margin:4em 0 0 4em;
}

.HorLine3{
	height:4px;
	width:100px;
	background:#000;
	margin:-9.25em 0 0 -10em;
}

.HorLine4{
	height:4px;
	width:100px;
	background:#000;
	margin:0 0 0 0;
}

.HorLine5{
	height:2px;
	width: 50px;
	background:#000;
}

/** FILTER **/
button.filter{
	margin:2em 1em 0 1em;
	position: relative;
	display: inline-block;
	font-family:'pt_monoregular', sans-serif;
	font-size: 1.4em;
	color:#000;
	text-decoration: none;
	letter-spacing: 2px;
}

button.filter::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 8px;
  left: 0;
  background-color: #cdee4a;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

button.filter:hover::after,
button.filter:focus::after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

button.active{
  content: "";
}

button:focus{
  outline: 0 none; 
}

/** GALLERY GRID **/
.container .mix{
  display: none;
  width: 25%;
  -webkit-backface-visibility: hidden;
}

.container{
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -webkit-justify-content: space-between;
  -webkit-align-content: flex-start;
  margin-top:4em;
}

.da-thumbs {
	list-style: none;
	width: 100%;
	height: auto;
	position: relative;
	margin: 0;
	padding: 0;
}
.da-thumbs li {
	float: left;
	margin: 0;
	position: relative;
}
	
.da-thumbs li a,
.da-thumbs li a img {
	display: block;
	position: relative;
	width:100%;
	height:auto;
}

.da-thumbs li a {
	overflow: hidden;
}

.da-thumbs li a div {
	position: absolute;
	background: #cdee4a;
	width: 100%;
	height: 100%;
}
.da-thumbs li a div span {
	display: block;
	text-align:center;
	font-weight: normal;
	color:#fff;
	font-family:'pt_monoregular';
	font-size: 1em;
	letter-spacing:2;
}

.da-thumbs li a div span p{
	text-align:center;
	vertical-align:middle;
	/**margin-top:7em;**/
	margin-top:45%;
	transform: translateY(-65%);
}


/** PLAY PG **/
.Playcontainer{
	margin-top:16em;
	position:relative;
}

.container2 .mix{
  width: 25%;
  -webkit-backface-visibility: hidden;
}

.container2{
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -webkit-justify-content: space-between;
  -webkit-align-content: flex-start;
  margin-top:4em;
  margin-bottom:4em;
  width:94%;
  margin-left:auto;
  margin-right:auto;
}

.PlayBlurb{
	margin-top:2em;
}

/** INFO PG SHITE **/
.center-vert2 p{
	 position: relative;
 	 height: 300px;
  	 width:auto;
	 top:80%;
	 margin-top:350px;
}

.Featured{
	margin-top:3.5em;
}

#FeaturedIn{
	padding-bottom: 7.5em;
}

.Featured a{
	text-decoration:underline;
}

#Stalkers{
	margin-bottom:0;
	box-shadow: inset #e3f86b 0 0 0 1.2em;
}

#Stalkers h2{
	margin-top:2em;
}

.SocialSection{
	position: relative;
	margin-top:40em;
	margin-bottom:0;
}

/** Links List **/
ul.social li {
	display:inline-block;
	margin:2.5em 3em 0 0;
}

ul.social li a{
	font-family:'pt_monoregular';
	color: #000;
	font-size: 1.4em;
	text-align: left;
	letter-spacing:2;
	line-height:2;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
}

ul.social li a img{
	width:2em;
	height:auto;
	opacity:0.2;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	margin-right:.5em;
}

ul.social li:nth-child(1) a img{
	width:1em;
	height:auto;
}

ul.social li:nth-child(2) a img{
	width:1.4em;
	height:auto;
}

ul.social li:nth-child(3) a img{
	width:1.2em;
	height:auto;
}

ul.social li:nth-child(4) a img{
	width:1.1em;
	height:auto;
}

ul.social li:nth-child(5) a img{
	width:1em;
	height:auto;
}

ul.social li a:hover img{
	opacity:1;
}

ul.social li a:hover{
	color:#e3f86b;
}

/** PROJECT DEETS PG SHITE **/
.Deets{
	margin-top:3em;
	margin-bottom:3em;
}

.TopImage{
	position:relative;
	bottom:50em;
	z-index:-999;
}

.ProjImgs{
	margin-bottom:1.2em;
}

.ImgSection{
	display:inline-block;
	margin-top:-32em;
}


/****** EMBEDDED VIDEOS ********/
iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

.banner-video{
  height: 100vh;
  overflow: hidden;
}


/************ LARGE SCREENS ************/
@media only screen and (min-width: 64.063em) and (max-width: 90em) {  /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
#FeaturedIn{
	padding-bottom:7.5em;
}
}


/************ MEDIUM SCREENS ************/
@media only screen and (min-width: 40.063em) and (max-width: 64em) {  /* min-width 641px, medium screens */
.center-vert p{
	 position: relative;
 	 height: 100px;
  	 width:auto;
	 top:35%;
	 margin-top:-100px;
}

/** Lines **/
.HorLine{
	height:4px;
	width:100px;
	background:#000;
	margin:15em 0 0 15em;
}

.HorLine2{
	margin:3.3em 0 0 2em;
}

x{   /** for 'x' svg **/
	width:10%;
	height:10%;
}

/** HOME STUFF **/
.JamSesh{
	margin-top:3em;
}

.container .mix{
  display: none;
  width: 33%;
  margin-top:0;
  -webkit-backface-visibility: hidden;
}

.da-thumbs li a div span p{
	text-align:center;
	vertical-align:middle;
	/**margin-top:3em;**/
	margin-top:45%;
	transform: translateY(-65%);
}

/** PLAY PG **/
.container2 .mix{
  width: 33%;
  margin-top:0;
}

/** INFO PG **/
.SocialSection{
	margin-top:60em;
	margin-bottom:0;
}
	
#FeaturedIn{
	padding-bottom:4.5em;
}

/** DEETS PG **/
.TopImage{
	position:relative;
	top:0em;
}

.ImgSection{
	margin-top:1.2em;
}
	
#FeaturedIn{
	margin-bottom:3.5em;
}
}

/************ SMALL SCREENS ************/
@media only screen and (max-width: 40em) { /* max-width 640px, mobile-only styles, use when QAing mobile issues */
/** typography **/
p {
	font-size: 1em;
	line-height:30px;
}

h2, h3 {
	font-size: 2em;
}

/** Button Placement **/
a.burger {
  position: fixed;
  top:5em;
  right:5em;
  z-index:93;
}

/** NAVIGATION **/
.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 4);
	min-height: 54px;
}

/** FOOTER **/
footer{
	margin-bottom:2em;
}

.HomeFooter{
	margin-top: 2em;
}

footer a img{
	margin-left:3.5em;
	margin-right:auto;
	text-align:center;
}

footer p.copyright{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	text-align-last:center;
}

p a {
  text-decoration:underline;
}

.AboutMe{
	margin-top:4.5em;
}

p.AboutMe > a:before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  right: 20px;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

p > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 7px;
  left: 0;
  background-color: #cdee4a;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

p.RiskVsReward > a:before{
	margin-left:0;
	bottom:7px;
}

/** Lines **/
.VertLine{
	width:2px;
	height:800px;
	background:#000;
	margin:20px 0 0 12px;
}

.HorLine4{
	height:4px;
	width:50px;
	background:#000;
}

/** HOME STUFF **/
.IntroText{
	margin-top:0em;
	margin-left:7em;
}

span.small{
	font-size: 30px;
	vertical-align:10px;
}

.Curious{
	margin-top:12em;
}

.JamSesh{
	border:solid #cdee4a 3px;
	padding:.25em;
	text-align:center;
	margin-top:5em;
}

#Work{
	margin-top:1em; 
}

.container .mix{
  display: none;
  width: 100%;
  margin-top:0;
  -webkit-backface-visibility: hidden;
}

.container{
	width:100%;
}

#Container{
	width:100%;
}

/** PLAY PG **/
.container2 .mix{
  width: 100%;
}

/** INFO PG **/
.SocialSection{
	margin-top:60em;
	margin-bottom:0;
}

#Recognize{
	margin-top:5em;
}

#FeaturedIn{
	padding-bottom:2em;
	display:inline-block;
}

/** DEETS PG **/
.TopImage{
	position:relative;
	top:0em;
}

.ImgSection{
	margin-top:1em;
	position:relative;
	display:inline-block;
}

.Playcontainer{
	margin-top:12em;
}
	

}