/* ------------ Grid Skeleton -------------- */

body {
	margin: 0;
	padding:0;
	min-width:320px;
	/* iPhone min width in portrait; do we even need this? */
}

.item-database,
.detail-database {
	display: none;
}

/* Rows */
.row-banner {
	/* Used for wide banner images */
	width:100%;	

	max-width:1024px;

	margin: 0 auto; /* center it */
/*	margin-top: 24px;*/

	margin-top: 96px;
	margin-bottom: 32px;
}

.row {
	/* Normal row of stuff -- e.g. 3 portfolio items, bio row, full width item title... */
	width:100%;
	max-width:1024px;
	margin: 0 auto; /* center it */
}

.subrow {
	/* Row of stuff  */
	margin: 0 auto; /* center it */
}

footer {
	margin-top: 24px;
/* A little gap at the bottom	*/
}

/* Make rows behave properly */
.row-banner:after {
	content: "";
	display: table;
	clear:both;
}

.row:after {
	content: "";
	display: table;
	clear:both;
}

.subrow:after {
	content: "";
	display: table;
	clear: both;
}

.tile-grid-header {
	width:100%;
	height:48px;
}

/* Columns */
.col-item {
	width: 25%;
	float: left;
}

.col-1-2 {
	width: 50%;
	float: left;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.col-1-4 {
	width: 25%;
	float: left;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.col-3-4 {
	width: 75%;
	float: left;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



/* ------------ Bio -------------- */

.bio-box {
	margin-left:16px;
	margin-right:16px;
}

.bio-pic {
	float:left;
	height: 150px;
	width: 150px;
	background-image: url("image/me mattw.jpg");
/*	background-image: url("image/me beach.jpg");*/
	background-size: cover;
	margin-top: 13px;
	margin-right: 20px;
	margin-bottom: 5px;
	padding-bottom: 0px;
	border-radius: 50%; /* make into a circle? */
}

.bio-row-padding {	
	padding-top: 16px;
	padding-margin: 16px;
}

.bio-col-padding {
	padding-left:  16px;
	padding-right: 16px;
}

/*.bio-col-padding:last-of-type {*/
/*	padding-left:  32px;*/
/*	padding-right: 16px;*/
/*}*/

.bio {
/*	bio text */
	text-align: justify;
	margin: 10px 0px 10px 0px;
	font-size:18px;
}

.bio-text-div {
	float:left;
	padding-top:16px;
}

.bio-contact,
.bio-stats,
.bio-contact-icons {
	padding-left: 16px;
	
	margin-top: 5px;
	margin-bottom: 0px;
	
	/* cg@levitylab.com, etc... */
	font-family: 'GillSans-Light',avenir-book,sans-serif;
	font-weight: lighter;
	font-style: italic;

	font-size: 18px;
	color: #4A4A4A;
	letter-spacing: 0.16px;
	line-height: 27px;
	/* Move this text style to the end of file? (Can we have two declarations?) */
}

.bio-stats,
.bio-contact-icons {
	font-size: 18px;
	padding-left:0px;
}

.bio-contact-icons {
	margin-top:8px;
	font-size: 24px;
}

/* ------------ Item Detail Info -------------- */

.item-group-detail {
	background-color: #EBF4FF;
	display:none; /* by default hide it; js will hide/show it. */
	clear:left;
	/* Very important for interleaving item-details in groups of item thumbnails */
	border-radius: 5px;
}

.item-group-detail-visible {
	background-color: #FFF4FF;
/* Trace color for debugging. */
	
/*	clear:left;*/
/*	no need to fix "display", js will animate that for us */
}

.item-detail {
	display:none; /* by default hide it; js will hide/show it. */
	padding-top: 16px;
	padding-bottom: 16px;
/*	margin-top: 8px;*/
}

.item-detail-col {
	padding-left: 16px;
	padding-right: 16px;
}


/*.item-detail-col:first-of-type {*/
/*	padding-right: 16px;*/
/*}*/
/**/
/*.item-detail-col:last-of-type {*/
/*	padding-left: 16px;*/
/*}*/


/* ------------ Item -------------- */


.item-tile-image-plate-outline {
	border-style:solid;
	border-width:1px;
	color:rgba(0, 0, 0, 0.08);
}

.item-tile-image-plate {
	
	position: relative;
	padding-bottom: 100%;
	height: 0;
	width: 100%;
	border-radius: 10px;
	
	overflow:hidden;
}

.item-bleed-image {
	/* Contains super-wide image */
	width: 100%;
/*	min-width: 1024px;*/
	
/*	http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped */
}

.item-bleed-info-border {
	/* Contains title info after super-wide image;
		this just will just have this in it */
	
	padding: 0px 16px 2px 16px;

	/*
	Better gutter technique:
	https://css-tricks.com/dont-overthink-it-grids/
	*/
}

.item-border {
	/* Pads a single item. */
	padding: 36px 24px 2px 16px;
	
	/*
	Better gutter technique:
	https://css-tricks.com/dont-overthink-it-grids/
	*/
}

.item-link {
	cursor: pointer;
}


/* ----- Chevron ---- */

.chevron-holder
{
	position: relative;
}
/* Things that hold the chevron need relative positioning. */

.chevron {
	width: 32px;
	height: 32px;
/*	background-color: blue;*/
	bottom: -20px;
	left: 14px;
	
	position: absolute;
}


/* ------------ Styling Details ----------- */

/* Project title */
.item-title,
.item-title-banner {
	font-family: 'abadi mt condensed extra bold', 'arial black', 'arial bold','Futura-CondensedExtraBold','Avenir-Black','san-serif';
/*	font-family: 'avenir bold', 'arial bold','Futura-CondensedExtraBold','Avenir-Black','san-serif';*/
	font-weight: 500;
	font-size: 24px;

	line-height: 26px;
/* A little tighter than default line spacing */

	color: #4A4A4A;

	margin-top: 8px;
	margin-bottom: 4px;
}

.item-title-banner {
	margin-bottom: 8px;
	font-size: 32px;
}

/* Project subtitle */
.item-subtitle,
.item-subtitle-banner {
	font-family: "abadi mt condensed light",'AvenirNextCondensed-Regular','avenir-book','arial narrow','arial','san-serif';
/*	font-family: 'avenir-book','arial narrow','arial','san-serif';*/
	font-size: 24px;
	font-weight: normal;
	
/*	line-height: 4px;*/
/*	height: 4px;*/
	color: #4A4A4A;

	margin-top: 0px;
	margin-bottom: 2px;
}

.item-subtitle-banner {
	margin-bottom: 8px;
	font-family: 'avenir','arial narrow','arial','san-serif';
	font-weight: 250;
	line-height: 150%;
}

p {
	font-family: avenir-book,avenir book,verdana,sans-serif;
	font-style: normal;
	text-align: justify;
	margin-top: 0px;
}

p.quote {
	font-style:italic;
	color: #777;
	font-size:smaller;
}

p.citation {
	font-family: avenir-book,avenir book,verdana,sans-serif;
	font-style: normal;
	text-align: justify;
	font-size: smaller;
}

a {
/*	font-family: GillSans; /*GillSans-LightItalic,"GillSans LightItalic";*/
/*	font-family: "abadi mt condensed light",'AvenirNextCondensed-Regular','avenir-book','arial narrow','arial','san-serif';*/
/*	font-size: 18px;*/
/*	font-weight: normal;*/

/*	font-weight: lighter;*/
/*	font-style:  italic;*/
	
/*	letter-spacing: 0.16px;*/
/*	line-height: 27px;*/

/*	font-size: 18px;*/
/*	font-family: avenir-book,avenir book,verdana,sans-serif;*/
	font-style: normal;	
	text-decoration: none;

	color: inherit; /* blue colors for links too */
	text-decoration: inherit; /* no underline */

	font-size: inherit;
	font-family: inherit;
	font-style: inherit;

}

a:visited {
	color:#333;
}

a:hover {
	text-decoration: underline;
}

a:link {
}

.item-title-selected,
.chevron-selected {
	color: #68AEFF;
}

.item-title-hover,
.chevron-hover {
	color: #F5A623;
/*	transition:.5s;*/
}

/* ---- Video Misc. ---- */

/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
*/

.videoWrapper-16x9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
/*	padding-top: 25px;*/
	height: 0;
}
.videoWrapper-16x9 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videoWrapper-4x3 {
	position: relative;
	padding-bottom: 75%; /* 4:3 */
	height: 0;
}

.videoWrapper-4x3 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

img.scale-to-fit {
/*	max-width:100%;*/
/*	max-height:100%;*/
	width:100%
}

.game-loop-plate video,
.game-loop-plate img
{
	width:100%;
}


/* ---- Respnosive ---- */

.is-cols-2 { display:block; }
.is-cols-3 { display:block; }
.is-cols-4 { display:block; }
/*	These classes are just used to signal what responsive state we are in */

.clearleft {
	clear:left;
}

/*@media (max-width: 1024px) and (min-width: 924px) {*/
/**/
/*	.row {*/
/*		width:100% !important;*/
/*		margin:auto !important; */
/*	}*/
/*	*/
/*};*/

/* Would be nice to squeeze the 4 column layout a bit before going to 3. */

@media (max-width: 1024px) {

	.item-group-detail {
		border-radius: 0px;
	}

	.row-banner {
		margin-top: 48px;
		margin-bottom: 16px;
	}

	.item-subtitle,
	.item-subtitle-banner {
		font-size: 18px;
		line-height: 140%;
	}

	.item-title,
	.item-title-banner {
		font-size: 24px;
	}
}

@media (max-width: 800px) {

/*	3 columns */
	.is-cols-4 { display:none !important; }

    .col-item {
        width:33% !important;
    }

	.row {
		width:100% !important;
		margin:auto !important; 
	}

	.item-bleed-image {
		min-width: 0px !important;
	}

	.item-border {
		padding: 16px 16px 2px 16px !important;
/*	Better spacing.	*/
	}
}

@media (max-width: 520px) {

/* 2 Columns */

	.is-cols-3 { display:none !important; }

    .col-item {
        width:50% !important;
    }
	
/*	.bio-col-padding {*/
/*		padding-right: 16px !important;*/
/*	}*/
/* Redundant to tweaked layout */

	.item-border {
/*		padding: 36px 16px 2px 16px; !important;*/
/*	Technically more exact/correct left margin layout */

		padding: 16px 12px 2px 12px !important;
/*	Better spacing.	*/
	}

}

/*@media (max-width: 720px) {*/
/**/
/*	.bio-pic {*/
/*		height: 75px;*/
/*		width: 75px;*/
/**/
/*		margin-top: 16px;*/
/*		margin-right: 10px;*/
/*		margin-bottom: 0px;*/
/*		padding-bottom: 0px;		*/
/*	}*/
/*}*/

@media (max-width: 560px) {

	.col-1-2 {
        width:100% !important;
    }
	
	p {
/*		margin-top: 16px !important;*/
		margin-top: 16px;
	}
}

.fa
{
	margin-right:6px;
}