@charset "utf-8";

/* CSS Document */
@font-face {
    font-family: 'matizregular';
    src: url('http://benblalock.com/files/matiz_regular_macroman/Matiz-webfont.eot');
    src: url('http://benblalock.com/files/matiz_regular_macroman/Matiz-webfont.eot?#iefix') format('embedded-opentype'),
         /*url('http://benblalock.com/files/matiz_regular_macroman/Matiz-webfont.woff2') format('woff2'),*/
         url('http://benblalock.com/files/matiz_regular_macroman/Matiz-webfont.woff') format('woff'),
         url('http://benblalock.com/files/matiz_regular_macroman/Matiz-webfont.ttf') format('truetype'),
         url('http://benblalock.com/files/matiz_regular_macroman/Matiz-webfont.svg#matizregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

body{
	width: 100%;
	margin: 0;
	min-height: 100%;
	background-color: #c1ced7;
	font-family: Lato, sans-serif;
	min-width: 300px;
}

#page_cont{
	float: left;
	width: 75%;
	margin: 0 12.5%;
	max-width: 2250px;
	background-color: #ecf1f4;
	color: #2d3a42;
}

/*Header Section*/
header{
	width: 80%;
	float: left;
	padding: 2% 10% 10% 10%;
	text-align: left;
	color: #2d3a42;
}
#name_text{
	font-size: 3.5em;
	font-family: matizregular, sans-serif;
	color: #2d3a42;
	float: left;
	width: 100%;
}
#name_text a{
	color: #2d3a42;
	text-decoration: none;
	float: left;
}
#header_row{
	float: left;
	width: 100%;
}
#sub_text{
	display: inherit;
	font-size: 1.3em;
	font-family: Lato, sans-serif;
	color: #2d3a42;
	float: left;
	width: 50%;
}
#mobile_menu_button{
	display: none;
}
nav{
	width: 50%;
	float: left;
	font-size: 1.3em;
	text-align: right;
}
.nav_link{
	color: #2d3a42;
	text-decoration: none;
}
.nav_link:hover{
	text-decoration: underline;
}
#current_page{
	font-weight: bold;
}
.section_title{
	font-size: 2em;
	font-family: matizregular, sans-serif;
	color: #2d3a42;
	float: left;
	width: 100%;
	padding: 0 0 2% 0;
}

/*Content section*/
#content{
	width: 80%;
	float: left;
	padding: 0 10% 10% 10%;
	line-height: 200%;
}
.black_link{
	color: #000;
}

.colored_link{
	color: #2d3a42;
}

a{
	color: #000;
}

/*About Page*/
#thin_coloumn_l{
	float: left;
	width: 20%;
}
#portrait_pic{
	width: 100%;
	float: left;
}
#content_column_r{
	float: right;
	width: 75%;
	padding-left: 5%;
}
#featured_work{
	width: 80%;
	float: left;
	padding: 4% 10% 10% 10%;
}
.feat_work_box{
	float: left;
	width: 25%;
	padding: 0 12.5% 4% 0;
}
.feat_work_box_end{
	float: left;
	width: 25%;
	padding: 0 0 4% 0;
}
.feat_work_img{
	width: 100%;
	float: left;
}
.feat_work_title{
	width: 100%;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	padding: 6% 0 0 0;
}
.feat_work_desc{
	width: 100%;
	float: left;
	font-size: 0.8em;
	line-height: 150%;
	text-align: left;
	padding: 4% 0 0 0;
}

/*Work Index Page*/
#top_links{
	display: block;
	width: 100%;
	text-align: center;
	padding-bottom: 2%;
}
.top_link{
	color: #2d3a42;
	text-decoration: none;
}
.top_link:hover{
	text-decoration: underline;
}
#php_grid{
	width: 100%;
	float: left;
}
.work_square{
	width: 24.25%;
	float: left;
	padding: 0 1% 1% 0;
}
.work_square_end{
	width: 24.25%;
	float: left;
	padding: 0 0 1% 0;
}
.work_img{
	width: 100%;
	float: left;
}

/*Work Item Page*/
#visual_column{
	width: 60%;
	float: left;
}
#video{
	width: 100%;
	height: 350px;
}
#mysketch{
	width: 100%;
	height: 350px;
}
#main_image{
	width: 100%;
	float: left;
	padding-bottom: 4%;
}
.image{
	width: 100%;
}
#gallery{
	width: 96%;
	padding: 2%;
	float: left;
	background-color: #CCCCCC;
}
.gallery_image_cont{
	width: 30%;
	float: left;
	padding: 1% 3.3% 1% 0;
}
.gallery_image{
	width: 100%;
	cursor: pointer;
}
#info_column{
	width: 38%;
	float: left;
	padding-left: 2%;
}
#title{
	width: 100%;
	float: left;
	padding-bottom: 2%;
	font-size: 2em;
}
#year{
	width: 50%;
	float: left;
	padding-bottom: 2%;
	font-size: 1.5em;
}
#medium{
	width: 60%;
	float: left;
	font-size: 1em;
}
#dim{
	width: 50%;
	float: left;
	font-size: 1em;
}
#desc{
	width: 100%;
	float: left;
	padding: 4% 0 4% 0;
	font-size: 1.2em;
}
#collab{
	width: 100%;
	float: left;
	font-size: 1em;
}
#tags{
	width: 60%;
	float: right;
	padding-bottom: 2%;
	font-size: 1em;
	text-align: right;
}
#work_link{
	width: 60%;
	float: right;
	font-size: 1em;
	text-align: right;
}

/*Resume Page*/
#resume_title{
	float: left;
	width: 75%;
	font-size: 2em;
	font-family: matizregular, sans-serif;
	color: #2d3a42;
	padding: 0 5% 2% 0;
}
#download_resume{
	float: right;
	width: 18%;
	text-align: right;
	padding: 2% 0 0 2%;
}
#resume_link{
	font-family: matizregular, sans-serif;
	color: #2d3a42;
	text-decoration: none;
}
#resume_link:hover{
	text-decoration: underline;
}
.resume_section{
	float: left;
	width: 80%;
	padding-bottom: 2%;
}
.resume_tables{
	width: 100%;
}
.year{
	width: 20%;
	font-weight: bold;
}
.info{
	width: 80%;
	font-weight: bold;
}
.info_no_bold{
	width: 80%;
	font-weight: normal;
}
.year_spacer{
	width: 20%;
	height: 10px;
}
.info_spacer{
	width: 80%;
	height: 10px;
}
#skills{
}
#main_skills{
	width: 100%;
	float: left;
}
#main_skills ul{
	width: 30%;
	float: left;
	padding-right: 1%;
}
#end_main_skill_ul{
	padding-right: 0;
}
.left_skills{
	width: 49%;
	padding-right: 2%;
	float: left;
}
.right_skills{
	width: 49%;
	float: left;
}
ul {
  list-style-type: square;
}
li {
}

/*Footer Section*/
#footer_svg{
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}
footer{
	width: 80%;
	float: left;
	padding: 2% 10% 2% 10%;
	text-align: right;
	background-color: #2d3a42;
	color: #ecf1f4;
}
.resume_mobile{
	display: none;
}
.education_mobile{
	display: none;
}

/*------RESPONSIVE------*/

/*****SMALLER COMPUTERS*****/

@media(min-width:950px) and (max-width:1250px) {
    #page_cont{
		float: left;
		width: 100%;
		margin: 0;
		background-color: #ecf1f4;
	}
	/*Header Section*/
	header{
		float: left;
		width: 90%;
		padding: 2% 5% 2% 5%;
		text-align: left;
		color: #2d3a42;
	}
	#name_text{
		font-size: 3.5em;
	}
	#header_row{
		width: 100%;
	}
	#sub_text{
		display: inherit;
		font-size: 1.3em;
		font-family: Lato, sans-serif;
		color: #2d3a42;
		float: left;
		width: 50%;
	}
	#mobile_menu_button{
		display: none;
	}
	nav{
		width: 50%;
		float: left;
		font-size: 1.3em;
		text-align: right;
	}
	/*Content section*/
	#content{
		float: left;
		width: 90%;
		padding: 2% 5% 2% 5%;
	}
	/*About Page*/
	#featured_work{
		float: left;
		width: 90%;
		padding: 2% 5% 2% 5%;
	}
	/*Work Index Page*/
	
	/*Work Item Page*/
	
	/*Footer Section*/
	footer{
		float: left;
		width: 90%;
		padding: 2% 5% 2% 5%;
	}
	#footer_svg{
		width: 100%;
		float: left;
		margin: 0;
		padding: 0;
	}
	.resume_mobile{
		display: none;
	}
}

/*****SMALL DEVICES*****/

@media(min-width:750px) and (max-width:949px) {
    #page_cont{
		float: left;
		width: 100%;
		margin: 0;
		background-color: #ecf1f4;
	}
	/*Header Section*/
	header{
		float: left;
		width: 95%;
		padding: 2% 2.5% 2% 2.5%;
		text-align: left;
		color: #2d3a42;
	}
	#name_text{
		font-size: 3.5em;
	}
	#header_row{
		width: 100%;
	}
	#sub_text{
		display: inherit;
		font-size: 1.3em;
		font-family: Lato, sans-serif;
		color: #2d3a42;
		float: left;
		width: 50%;
	}
	#mobile_menu_button{
		display: none;
	}
	nav{
		width: 50%;
		float: right;
		font-size: 1.3em;
		text-align: right;
	}
	/*Content section*/
	#content{
		float: left;
		width: 95%;
		padding: 0 2.5% 2% 2.5%;
	}
	/*About Page*/
	#featured_work{
		float: left;
		width: 95%;
		padding: 0 2.5% 2% 2.5%;
	}
	/*Work Index Page*/
	#top_links{
		display: block;
		width: 100%;
		text-align: center;
		padding-bottom: 2%;
	}
	#php_grid{
		width: 100%;
		float: left;
	}
	.work_square{
		width: 45%;
		float: left;
		padding: 0 5% 5% 0;
	}
	.work_square_end{
		width: 45%;
		float: left;
		padding: 0 0 5% 0;
	}
	.work_img{
		width: 100%;
		float: left;
	}
	/*Work Item Page*/
	#visual_column{
		width: 100%;
		float: left;
	}
	#video{
		width: 100%;
		height: 350px;
	}
	#mysketch{
		width: 100%;
		height: 60%;
	}
	#main_image{
		width: 100%;
		float: left;
		padding-bottom: 4%;
	}
	.image{
		width: 100%;
	}
	#gallery{
		width: 100%;
		padding: 2%;
		float: left;
		background-color: #CCCCCC;
	}
	.gallery_image_cont{
		width: 30%;
		float: left;
		padding: 1% 3.3% 4% 0;
	}
	.gallery_image{
		width: 100%;
	}
	#info_column{
		width: 100%;
		float: left;
		padding: 0 0 0 0;
	}
	#title{
		width: 100%;
		float: left;
		padding-bottom: 2%;
		font-size: 2em;
	}
	#year{
		width: 50%;
		float: left;
		padding-bottom: 2%;
		font-size: 1.5em;
	}
	#medium{
		width: 60%;
		float: left;
		font-size: 1em;
	}
	#dim{
		width: 50%;
		float: left;
		font-size: 1em;
	}
	#desc{
		width: 100%;
		float: left;
		padding: 4% 0 4% 0;
		font-size: 1.2em;
	}
	#collab{
		width: 100%;
		float: left;
		font-size: 1em;
	}
	#tags{
		width: 60%;
		float: right;
		padding-bottom: 2%;
		font-size: 1em;
		text-align: right;
	}
	#work_link{
		width: 60%;
		float: right;
		font-size: 1em;
		text-align: right;
	}
	/*Footer Section*/
	footer{
		float: left;
		width: 95%;
		padding: 2% 2.5% 2% 2.5%;
		text-align: right;
	}
	#footer_svg{
		width: 100%;
		float: left;
		margin: 0;
		padding: 0;
	}
	.resume_mobile{
		display: none;
	}
}

/*****EXTRA SMALL DEVICES*****/

@media(max-width:749px) {
    #page_cont{
		float: left;
		width: 100%;
		margin: 0;
		background-color: #ecf1f4;
	}
	.section_title{
		font-size: 1.5em;
		font-family: matizregular, sans-serif;
		color: #2d3a42;
		float: left;
		width: 100%;
		padding: 0 0 4% 0;
	}
	/*Header Section*/
	header{
		float: left;
		width: 80%;
		padding: 2% 10% 4% 10%;
		text-align: left;
		color: #2d3a42;
	}
	#name_text{
		font-size: 2.5em;
		width: 100%;
		float: left;
	}
	#header_row{
		width: 90%;
		float: left;
	}
	#sub_text{
		display: none;
		font-size: 1.1em;
		font-family: Lato, sans-serif;
		color: #2d3a42;
		float: left;
		width: 100%;
		padding: 0 0 2% 0;
	}
	#mobile_menu_button{
		width: 10%;
		float: right;
		display: inherit;
	}
	#mobile_menu_svg{
		width: 100%;
		float: left;
	}
	nav{
		width: 100%;
		float: left;
		font-size: 1.3em;
		text-align: left;
		padding: 0 0 2% 0;
	}
	/*Content section*/
	#content{
		float: left;
		width: 80%;
		padding: 0 10% 2% 10%;
		background-color: #ecf1f4;
	}
	/*About Page*/
	#thin_coloumn_l{
		float: left;
		width: 100%;
	}
	#portrait_pic{
		display: none;
	}
	#content_column_r{
		float: left;
		width: 100%;
		padding: 0;
	}
	#featured_work{
		float: left;
		width: 80%;
		padding: 0 10% 6% 10%;
	}
	.feat_work_box{
		float: left;
		width: 100%;
		padding: 0 0 6% 0;
	}
	.feat_work_box_end{
		float: left;
		width: 100%;
		padding: 0 0 6% 0;
	}
	.feat_work_img{
		width: 100%;
		float: left;
	}
	.feat_work_title{
		width: 100%;
		float: left;
		font-size: 1.2em;
		font-weight: bold;
		text-align: left;
		padding: 6% 0 0 0;
	}
	.feat_work_desc{
		width: 100%;
		float: left;
		font-size: 0.8em;
		line-height: 150%;
		text-align: left;
		padding: 4% 0 0 0;
	}
	/*Work Index Page*/
	#top_links{
		display: none;
	}
	#php_grid{
		width: 100%;
		float: left;
	}
	.work_square{
		width: 100%;
		float: left;
		padding: 0 0 4% 0;
	}
	.work_square_end{
		width: 100%;
		float: left;
		padding: 0 0 4% 0;
	}
	.work_img{
		width: 100%;
		float: left;
	}
	/*Work Item Page*/
	#visual_column{
		width: 100%;
		float: left;
	}
	#video{
		width: 100%;
		height: 350px;
	}
	#mysketch{
		width: 100%;
		height: 60%;
	}
	#main_image{
		width: 100%;
		float: left;
		padding-bottom: 4%;
	}
	.image{
		width: 100%;
	}
	#gallery{
		width: 100%;
		padding: 2%;
		float: left;
		background-color: #CCCCCC;
	}
	.gallery_image_cont{
		width: 30%;
		float: left;
		padding: 1% 3.3% 4% 0;
	}
	.gallery_image{
		width: 100%;
	}
	#info_column{
		width: 100%;
		float: left;
		padding: 0 0 0 0;
	}
	#title{
		width: 100%;
		float: left;
		padding-bottom: 2%;
		font-size: 2em;
	}
	#year{
		width: 50%;
		float: left;
		padding-bottom: 2%;
		font-size: 1.5em;
	}
	#medium{
		width: 60%;
		float: left;
		font-size: 1em;
	}
	#dim{
		width: 50%;
		float: left;
		font-size: 1em;
	}
	#desc{
		width: 100%;
		float: left;
		padding: 4% 0 4% 0;
		font-size: 1.2em;
	}
	#collab{
		width: 100%;
		float: left;
		font-size: 1em;
	}
	#tags{
		width: 60%;
		float: right;
		padding-bottom: 2%;
		font-size: 1em;
		text-align: right;
	}
	#work_link{
		width: 60%;
		float: right;
		font-size: 1em;
		text-align: right;
	}
	/*Resume Page*/
	#resume_title{
		float: left;
		width: 100%;
		font-size: 2em;
		font-family: matizregular, sans-serif;
		color: #2d3a42;
		padding: 0 0 2% 0;
	}
	#download_resume{
		float: left;
		width: 100%;
		text-align: left;
		padding: 0 0 2% 0;
	}
	#resume_link{
		font-family: matizregular, sans-serif;
		color: #2d3a42;
		text-decoration: none;
	}
	#resume_link:hover{
		text-decoration: underline;
	}
	.resume_section{
		float: left;
		width: 100%;
		padding-bottom: 2%;
	}
	.resume_mobile{
		display: block;
		width: 100%;
	}
	.resume_tables{
		display: none;
	}
	.experience_mobile{
		width: 100%;
		float: left;
		padding: 0 0 2% 0;
	}
	.experience_title{
		width: 100%;
		float: left;
		font-weight: bold;
		font-size: 1.25em;
	}
	.experience_company{
		width: 100%;
		float: left;
	}
	.experience_year{
		width: 100%;
		float: left;
	}
	.experience_desc{
		width: 100%;
		float: left;
	}
	#skills{
	}
	.left_skills{
		width: 100%;
		float: left;
	}
	.right_skills{
		width: 100%;
		float: left;
	}
	ul {
		list-style-type: square;
		width: 75%
	}
	li {
		width: 100%;
	}
	.education_mobile{
		display: block;
		width: 100%;
		float: left;
	}
	.education_cont{
		width: 100%;
		float: left;
		padding: 0 0 2% 0;
	}
	.education_name{
		width: 100%;
		float: left;
		font-weight: bold;
	}
	.education_year{
		width: 100%;
		float: left;
	}
	/*Footer Section*/
	footer{
		float: left;
		width: 95%;
		padding: 2% 2.5% 2% 2.5%;
		text-align: right;
	}
	#footer_svg{
		width: 100%;
		float: left;
		margin: 0;
		padding: 0;
	}
}