body { background-color: #fff; }
			
h1 { font-family: "Courier New", Courier, monospace; font-size: 60px; margin-bottom:0px;
	-moz-transition: all .7s; /* Firefox 4 */
	-webkit-transition: all .7s; /* Safari and Chrome */
	-o-transition: all .7s; /* Opera */
}

h2 { font-family: "Letter Gothic Std", helevtica; font-weight: 100; float: right; font-size: 19px; margin: 15px 0 -10px 0;
	-moz-transition: all .2s; /* Firefox 4 */
	-webkit-transition: all .2s; /* Safari and Chrome */
	-o-transition: all .2s; /* Opera */
	}
	
img {

	-moz-transition: all .7s; /* Firefox 4 */
	-webkit-transition: all .7s; /* Safari and Chrome */
	-o-transition: all .7s; /* Opera */
	
	}
	
video { max-width: 1920px; max-height: 1080px; }
	
.name {
	width: 50%;
	margin-top: 20px;
	margin-bottom: 10px;
	}
	
.title {
	float: right;
	width: 50%;
	margin-top: 10px;
	}
	
.email {
	float: right;
	width: 30%;
	margin-top: 10px;
	}
	
a, a:visited, a:active { outline: none; border: none; text-decoration: none; color: #000000; }
a:hover { color: #999; }	

p { font-family: "Courier New", Courier, monospace; font-size: 15px; }


/*
	Variable Grid System (Fluid Version).
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/

	Licensed under GPL and MIT.
*/


/* Containers
----------------------------------------------------------------------------------------------------*/
.container_3 {
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
		-moz-transition: all .7s; /* Firefox 4 */
	-webkit-transition: all .7s; /* Safari and Chrome */
	-o-transition: all .7s; /* Opera */
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 1%;
	margin-right: 1%;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 3 Columns
----------------------------------------------------------------------------------------------------*/


.container_3 .grid_1 {
	width:31.333%;
}

.container_3 .grid_2 {
	width:64.667%;
}

.container_3 .grid_3 {
	width:98.0%;
}



/* Prefix Extra Space >> 3 Columns
----------------------------------------------------------------------------------------------------*/


.container_3 .prefix_1 {
	padding-left:33.333%;
}

.container_3 .prefix_2 {
	padding-left:66.667%;
}



/* Suffix Extra Space >> 3 Columns
----------------------------------------------------------------------------------------------------*/


.container_3 .suffix_1 {
	padding-right:33.333%;
}

.container_3 .suffix_2 {
	padding-right:66.667%;
}



/* Push Space >> 3 Columns
----------------------------------------------------------------------------------------------------*/


.container_3 .push_1 {
	left:33.333%;
}

.container_3 .push_2 {
	left:66.667%;
}



/* Pull Space >> 3 Columns
----------------------------------------------------------------------------------------------------*/


.container_3 .pull_1 {
	left:-33.333%;
}

.container_3 .pull_2 {
	left:-66.667%;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* MEDIA QUERIES
----------------------------------------------------------------------------------------------------*/


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
video { min-height: 180px; min-width: 320px;}
h1 { font-size: 35px;  }

h2 { font-size: 19px;}

.container_3 {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}


.name {
	width: 100%;
	}
	
.title {
	width: 100%;
	}
	
.email {
	width: 60%;
	}


}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
video { min-height: 180px; min-width: 320px;}
h1 { font-size: 35px;  }

h2 { font-size: 19px;}

.container_3 {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}


.name {
	width: 100%;
	}
	
.title {
	width: 100%;
	}
	
.email {
	width: 60%;
	}


}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
video { min-height: 180px; min-width: 320px;}
h1 { font-size: 35px;  }

h2 { font-size: 19px;}

.container_3 {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}


.name {
	width: 100%;
	}
	
.title {
	width: 100%;
	}
	
.email {
	width: 60%;
	}


}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
video { min-height: 405px; min-width: 720px;}

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
video { min-height: 405px; min-width: 720px;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
video { min-height: 405px; min-width: 720px;}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
video { min-height: 405px; min-width: 720px;}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
video { min-height: 405px; min-width: 720px;}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
video { min-height: 405px; min-width: 720px;}
h1 { font-size: 35px;  }

h2 { font-size: 19px;}

.container_3 {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}


.name {
	width: 100%;
	}
	
.title {
	width: 100%;
	}
	
.email {
	width: 60%;
	}


}
}


/* 670
----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 670px) {

h1 { font-size: 35px;  }

h2 { font-size: 19px;}

.container_3 {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}


.name {
	width: 70%;
	}
	
.title {
	width: 70%;
	}
	
.email {
	width: 45%;
	}


}


/* 400
----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 400px) {

h1 { font-size: 35px;  }

h2 { font-size: 19px;}

.container_3 {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}


.name {
	width: 100%;
	}
	
.title {
	width: 100%;
	}
	
.email {
	width: 60%;
	}


}