body {
	font-family: 'Mabry', sans-serif;
}

.clear {
	clear:both;
}


/******************** TYPOGRAPHY ********************/


@font-face {
    font-family:Mabry;
    src: url(../fonts/mabry-regular-pro.eot);
    src: url(../fonts/mabry-regular-pro.eot?#iefix) format('embedded-opentype'),
         url(../fonts/mabry-regular-pro.woff2) format('woff2'),
         url(../fonts/mabry-regular-pro.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
	color:black;
	font-size:42px;
	line-height: 52px;
	text-decoration: none;
	color:black;
}

h1 span {
	background-color:#f8ea21;
}

h2 {
	font-size:22px;
	line-height: 30px;	
}

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

h3 span {
	font-weight: bold;
}

a {
	text-decoration: none;
	color:black;
}

/****************** STICKY NAV ******************/

header {
	height:100px;
	width:100%;
	background-color: #fff;
	position: fixed;
	top:0;
	transition: all .25s ease;
	z-index: 99;
}

header a {
	color:black;
	padding-top:60px;
	float:left;
	display: block;
}

#nav {
	width:90%;
	margin-left:auto;
	margin-right:auto;
	max-width: 1440px;
}

#navLinks {
	float: right;
	width:10%;
	height: 100px;
}


.name {
	opacity: 0;
}

.workLink {
	opacity: 0;
}

.infoLink {
	opacity: 0;
	float: right;
}


/****************  INTRO  ****************/


#projectFilter {
	margin-top:230px;
	width:100%;
	margin-bottom: 50px;
}

#projectFilter h1 {
	float:left;
}

/*#line {
	height:3px;
	width:120px;
	margin-top:30px;
	margin-left:25px;
	margin-right:25px;
	background-color: #000;
	float:left;
}*/

/**************** PROJECT THUMBNAIL SECTION ****************/

#content {
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 100px;
	margin-top:50px;
	max-width: 1440px;
}

#work {
	width:100%;
	margin-top:50px;
}

.project {
	background-color: #000;
	background-position: center;
	background-size:cover;
	opacity: 0;
}

.grid6x3 {
	width:100%;
	padding-bottom:55%;
	float:left;
	position: relative;
	margin-bottom:1.5%;
	overflow: hidden;
}

.grid6x3skinny {
	width:100%;
	padding-bottom:35%;
	float:left;
	position: relative;
	margin-bottom:1.5%;
	overflow: hidden;
}

.left4x2 {
	width:66.25%;
	padding-bottom:36%;
	float:left;
	position: relative;
	margin-right:1.5%;
	margin-bottom:1.5%;
	overflow: hidden;
}

.right4x2 {
	width:66.25%;
	padding-bottom:36%;
	float:left;
	position: relative;
	margin-left:1.5%;
	margin-bottom:1.5%;
	overflow: hidden;
}

.left2x1 {
	width:32.25%;
	padding-bottom:17.5%;
	float:left;
	position: relative;
	margin-bottom:1.5%;	
	margin-right:1.5%;
	overflow: hidden;		
}

.right2x1 {
	width:32.25%;
	padding-bottom:17.5%;
	float:left;
	position: relative;
	margin-bottom:1.5%;
	overflow: hidden;		
}

.left2x2 {
	width:32.25%;
	padding-bottom:36%;
	float:left;
	position: relative;
	margin-bottom:1.5%;	
	overflow: hidden;			
}

.right2x2 {
	width:32.25%;
	padding-bottom:36%;
	float:left;
	position: relative;
	margin-bottom:1.5%;	
	overflow: hidden;			
}

.rightsq {
	width:66.25%;
	padding-bottom:66.25%;
	float:left;
	position: relative;
	margin-bottom:1.5%;
	margin-left:1.5%;
	overflow: hidden;			
}

.right3x2 {
	width:49.25%;
	padding-bottom:36%;
	float:left;
	position: relative;
	margin-bottom:1.5%;
	overflow: hidden;			
}

.left3x2 {
	width:49.25%;
	padding-bottom:36%;
	margin-right:1.5%;	
	float:left;
	position: relative;
	margin-bottom:1.5%;	
	overflow: hidden;			
}

.left3x3 {
	width:49.25%;
	padding-bottom:49.25%;
	margin-right:1.5%;	
	float:left;
	position: relative;
	margin-bottom:1.5%;	
	overflow: hidden;			
}

.right3x3 {
	width:49.25%;
	padding-bottom:49.25%;
	float:left;
	position: relative;
	margin-bottom:1.5%;
	overflow: hidden;			
}


.project img {
	object-fit: contain;
	position: absolute;
	width: 100%;
	display:block;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
	transform: translateY(-50%);
}

.project h2 {
	position: absolute;
	text-align: center;
/*	width:100%;*/
	color:#fff;
	top: 45%;
	left: 50%;
	transform: translateY(-50%);
	transform: translateX(-50%);	
	opacity: 0;
}

/*********/


.project h2 {
	display: inline-block;	
	opacity: 0;
	border-bottom: solid 2px #000;
}

.link {
	border-bottom: solid 2px #000;
}


.project h2::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .3s;
}

.project h2:hover::after {
    width: 100%;
    transition: width .3s;
}


/*********/


#variant {

}

#lynhall {

}

#avidor {
	margin-top: -19%;
	padding-bottom: 36.5%;
}

#jamesdayton {
	margin-top: -19%;
	margin-left:1.5%;
}

#goradio {
	margin-left:1.5%;
}

#logos {
	float:right;
}

/*********************  FOOTER  *********************/

#footerEmoji {
	font-size:28px;
	float: left;
}

#copyright {
	float:right;
}


/*********************  INFO PAGE  *********************/


.spacer {
	height:200px;
	width: 100px;
	background-color:#fff;
}

#profileImage {
	display: block;
	width:40%;
	float: left;
	opacity: 0;
}

#about {
	float: left;
	width:45%;
	margin-left:5%;
	opacity: 0;
}

#availability {
	float: left;
	width:40%;
	margin-left:5%;
	margin-top:5%;
	opacity: 0;
}

#emojis {
	font-size:28px;
	float: left;
	width:10%;
	margin-top:5%;
	line-height: 72px;
	opacity: 0;
}

#socialMedia {
	margin-top:5%;
	margin-left:5%;
	float:left;
	width:40%;
	opacity: 0;
}

#socialMedia li {
	float:left;
	margin-right:10%;
}

#socialMedia a {
	border-bottom: 1.5px solid black;
}

#contact {
	width:40%;
	margin-left:5%;
	margin-top:5%;
	float:left;
	opacity: 0;
}

#experience {
	float:left;
	width:20%;
	margin-left:45%;	
	margin-top:5%;
	opacity: 0;
}

#features {
	float:left;
	width:20%;
	margin-left:5%;
	margin-top:5%;
	opacity: 0;
}


/**************** PROJECT PAGES ****************/


#projectHeader {
	margin-left:20px;
	height: 100px;
	float:left;
}

#projectLine {
	height:2px;
	width:0px;
	margin-top:75px;
	display: block;
	float:left;
	background-color: #000;
}

#projectTitle {
	padding-top:60px;
	margin-left:70px;
	opacity: 0;
}

#projectDescription {
	margin-top:200px;
	margin-bottom: 100px;
}

#projectDescription h1{
	opacity: 0;
}

#projectDescription h2 {
	margin-top:30px;
	opacity: 0;
}

#projectDescription h2 a {
	border-bottom: 2px solid black;
}

#projectDescription h3{
	opacity: 0;
}

.break{
	height:80px;
	width: 100%;
	display: block;
	float: left;
}

#next {
	border-bottom: 2px solid black;
	float:right;
	height:;
}