/******************************************************************
style
******************************************************************/

/* #Reset & Basics 
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, tagline, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
		
		
/* #Basic Styles
================================================== */

	html {

}

	body { 
		background: #fff;
		font: 17px/26px chaparral-pro-1,chaparral-pro-2, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #565656; 
}

	::-moz-selection {
       background-color: #000;
       color: #fff;
}

	::selection {
       background-color: #000;
       color: #fff;
}
	
#banner {
    display: block;
    text-align: center;
    /* border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3; */
    margin: 10px auto 0;
    min-height: 35px;
    padding: 12px 0 0;

}

.bannerimage {
	height: auto;
   max-width: 100%;
}

sup {
	vertical-align: top; font-size: 0.5em; position: relative; top: -0.5em;
}

/* #Typography
================================================== */
@font-face {
    font-family: 'ChaparralProRegular';
    src: url('../fonts/ChaparralPro/chaparralpro-regular-webfont.eot');
    src: url('../fonts/ChaparralPro/chaparralpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ChaparralPro/chaparralpro-regular-webfont.woff') format('woff'),
         url('../fonts/ChaparralPro/chaparralpro-regular-webfont.ttf') format('truetype'),
         url('../fonts/ChaparralPro/chaparralpro-regular-webfont.svg#ChaparralProRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'VollkornRegular';
    src: url('../fonts/Vollkorn/vollkorn-regular-webfont.eot');
    src: url('../fonts/Vollkorn/vollkorn-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vollkorn/vollkorn-regular-webfont.woff') format('woff'),
         url('../fonts/Vollkorn/vollkorn-regular-webfont.ttf') format('truetype'),
         url('../fonts/Vollkorn/vollkorn-regular-webfont.svg#VollkornRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

	h1, h2, h3, h4, h5, h6 { 
		color: #353534; 
		font-family: 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: normal; 
		font-variant: normal;
		text-transform: uppercase; 
}

    h5 {
    color: #353534; 
		font-family: 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: normal; 
		font-variant: normal;
		text-transform: uppercase; 
  }  
    
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1, .h1 { font-size: 38px; line-height: 46px; margin: 0 auto 14px; font-weight: 300; text-align: center;  
border-top: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3; padding: 12px 0; letter-spacing: 1px; }
	h2, .h2 { font-size: 35px; line-height: 45px; margin: 0 auto 20px; font-weight: 300; text-align: center; border-top: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3; padding: 12px 0; letter-spacing: 1px; }
	h3, .h3 { font-family: 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 21px; line-height: 30px; margin: 30px 0; font-weight: 300; text-align: center; padding: 0; color: #444; text-transform: none; }

    h5, .h5 { font-size: 38px; line-height: 46px; margin: 0 auto 14px; font-weight: 300; text-align: center; padding: 12px 0; letter-spacing: 1px; }

	.subheader { color: #777; }

	p { margin: 0 0 20px; font-style: normal; text-align: left; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }
	
	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }
	
/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
	
	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 20px; height: 0; }


/* #Links
================================================== */
	a, a:visited { color: #000; text-decoration: none; outline: 0; -webkit-transition: color 0.3s ease-out 0s; -moz-transition: color 0.3s ease-out 0s; -o-transition: color 0.3s ease-out 0s; transition: color 0.3s ease-out 0s;  }
	a:hover, a:focus { color: #2776ab; }
	p a, p a:visited { line-height: inherit; }
	

/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

ul.skillset {
    border-top: 1px dotted #d3d3d3;
    font-family: 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 26px;
}
ul.skillset li {
    border-bottom: 1px dotted #d3d3d3;
    list-style: none outside none;
    padding: 12px 0;
    margin-bottom: 0;
}
ul.skillset li, ul.skillset li a {
    /* color: #1FB4DD; */
	color: #2776ab;
	
}


/* #Menu
================================================== */
#nav {
    display: block;
    text-align: center;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin: 10px auto 0;
    min-height: 35px;
    padding: 12px 0 0;

}
#nav ul {
    display: block;
    font-family: 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    margin: 0 auto;
    text-align: center;
    list-style:none
}

#nav ul li {
    display: inline;
    border-color: #d3d3d3;
    border-right: 1px solid #d3d3d3;
    padding: 0 25px 0;
}
#nav ul li a, nav ul li a:visited, nav ul li a:active {
    border-radius: 2px 2px 2px 2px;
    color: #555555;
    font-size: 19px;
    position: relative;
    text-decoration: none;
}

#nav ul li.first {
    padding-left: 0;
}

#nav ul li.last {
    border-right: none;
    padding-right: 0;
}

#nav ul li a:hover, nav ul li a:focus {
    /* color: #1FB4DD; */
	color: #2776ab;
}

#nav ul li.current_page_item a {
    /* color: #1FB4DD; */
	color: #2776ab;
}
#nav ul li.current_page_ancestor a {
    /* color: #1FB4DD; */
	color: #2776ab;
}


/* #Images
================================================== */
/*
	The purpose of the below declaration is to make sure images don't 
	exceed the width of columns they are put into when resizing window. 
	Unfortunately, this declaration breaks certain lightbox, slider or other plugins,
	so the best solution is to individually call these properties on images that 
	are children of the grid that you want to resize with grid. 

	img { 
		max-width: 100%;
		height: auto; }
 

/* #Buttons
================================================== */

	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
    		background: #eeeeee;
    		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eeeeee));
    		background: -moz-linear-gradient(center top, #f7f7f7 0%, #eeeeee 100%);
    		-webkit-box-shadow: 0px 1px 1px 0px #dfdfdf, 0px 1px 1px 0px #ffffff inset;
   		 -moz-box-shadow: 0px 1px 1px 0px #dfdfdf, 0px 1px 1px 0px #ffffff inset;
    		box-shadow: 0px 1px 1px 0px #dfdfdf, 0px 1px 1px 0px #ffffff inset;
    		text-shadow: 0px 1px 0px #ffffff;
		margin: -20px 0 10px;
    		padding: 11px 21px;
    		border-color: #dddddd;
    		border-width: 1px;
    		border-radius: 4px;
    		-moz-border-radius: 4px;
    		-webkit-border-radius: 4px;
    		-o-border-radius: 4px;
   		border-color: #dddddd;
  		font-family: 'ChaparralProRegular', 'VollkornRegular', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    		font-size: 16px;
    		line-height: 16px;
    		color: #1FB4DD;
    		font-weight: normal; }

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
    		background: #efefef;
    		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#efefef));
    		background: -moz-linear-gradient(center top, #fbfbfb 0%, #efefef 100%);
    		color: #444; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
    		background: #f2f2f2;
    		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e9e9e9));
    		background: -moz-linear-gradient(center top, #f2f2f2 0%, #e9e9e9 100%);
    		-webkit-box-shadow: 0px 1px 1px 0px #dfdfdf inset, 0px -1px 3px 0px #ffffff inset;
    		-moz-box-shadow: 0px 1px 1px 0px #dfdfdf inset, 0px -1px 3px 0px #ffffff inset;
    		box-shadow: 0px 1px 1px 0px #dfdfdf inset, 0px -1px 3px 0px #ffffff inset;
    		padding: 12px 21px 10px 21px;
    		color: #444; }

	
	
/* #Tabs (activate in app.js)
================================================== */
	ul.tabs { 
		display: block;
		margin: 0 0 20px 0;
		padding: 0;
		border-bottom: solid 1px #ddd; }
	ul.tabs li { 
		display: block;
		width: auto;
		height: 30px;
		padding: 0;
		float: left;
		margin-bottom: 0; }
	ul.tabs li a { 
		display: block; 
		text-decoration: none;
		width: auto; 
		height: 29px; 
		padding: 0px 20px; 
		line-height: 30px; 
		border: solid 1px #ddd;
		border-width: 1px 0 0 1px; 
		margin: 0;  
		background: #f5f5f5;
		font-size: 13px; }
	ul.tabs li a.active { 
		background: #fff; 
		height: 30px;
		position: relative;
		top: -4px;
		padding-top: 4px;
		border-right-width: 1px;
		margin: 0 -1px 0 0;
		color: #111;
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	ul.tabs li:first-child a {
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px; }
	ul.tabs li:last-child a {
		border-width: 1px 1px 0 1px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	
	ul.tabs-content { margin: 0; display: block; }
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; }
		
	/* Clearfixing tabs for beautiful stacking */
	ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }
			
			
/* #Forms
================================================== */

#contact {
  position: relative;
}

form * {
  outline: 0;
}

form .row {
  margin-bottom: 0;
}

form .row div {
  position: relative;
}

form .row .columns div {
margin-bottom: 20px;
}

form input {
  width: 240px;
  height: 35px;
  padding: 0 24px 0 7px;
  margin: 0;
  border: 1px solid #d3d4d5;
  border-top: 1px solid #a7aaad;
  background: #fffeff;
  border-right-color: #c2c7ca;
  border-left-color: #c2c7ca;
  color: #3a444f;
  font: 15px 'ChaparralProRegular', 'VollkornRegular', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  position: relative;
  z-index: 0;
  -webkit-background-clip: padding-box;
}

form input:focus {
  -webkit-box-shadow: 0px 0px 2px #1FB4DD;
  -moz-box-shadow: 0px 0px 2px #1FB4DD;
  border: 1px solid #1FB4DD;
  -webkit-transition: all 0.10s ease-in-out;
  -moz-transition: all 0.10s ease-in-out;
}

form textarea {
  width: 530px;
  height: 181px;
  padding: 7px 24px 0 7px;
  margin: 0 0 25px;
  border: 1px solid #d3d4d5;
  border-top: 1px solid #a7aaad;
  background: #fffeff;
  border-right-color: #c2c7ca;
  border-left-color: #c2c7ca;
  color: #3a444f;
  font: 15px 'ChaparralProRegular', 'VollkornRegular', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  position: relative;
  z-index: 0;
  vertical-align: bottom;
  overflow: auto;
  resize: none;
}

form textarea:focus {
  -webkit-box-shadow: 0px 0px 2px #1FB4DD;
  -moz-box-shadow: 0px 0px 2px #1FB4DD;
  border: 1px solid #1FB4DD;
  -webkit-transition: all 0.10s ease-in-out;
  -moz-transition: all 0.10s ease-in-out;
}

/* --- */

form label {
  position: absolute;
  top: 6px;
  left: 9px;
  z-index: 1;
  cursor: text;
  font-size: 15px;
}
		
/* #Misc
================================================== */
	.add-top { margin-top: 30px !important; }
	.add-bottom { margin-bottom: 30px !important; }
	.remove-top { margin-top: 0 !important; }
	.remove-bottom { margin-bottom: 0 !important; }
	.half-top { margin-top: 20px !important; }
	.half-bottom { margin-bottom: 10px !important; }

	.clear { clear: both; }
	.left { float: left !important; }
	.right { float: right !important; }
	.auto_width { width:auto; }
	.offset { margin-right: 10px; }
	.center { text-align: center; }

	.center p { text-align: center; }

/* #Site Styles
================================================== */

div.container {
    padding: 20px 0;
}

.logo {
    text-align: center;
    float: none;
    z-index: 2;
}

.hire {
    position: absolute;
    top: 0;
    right: 40px;
    z-index: 1;

}

.ss {
   -o-transform: scale(1.1);
   -moz-transform: scale(1.1); 
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}


	
div.section {
   margin: 30px 0;
   overflow: hidden;
}

div.section2 {
   margin: 0px 0;
   overflow: hidden;
}

div.section img {
   height: auto;
   max-width: 100%;
}

p.background {
   font: 23px/32px 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 300;
   color: #444; 
   text-align: center;
   margin: 30px 0;
}

p.background2 {
	font: 16px 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #2776ab;
	text-align: center;
	margin: 10px 0;
	font-style: italic;
}

.container .one-third.column {
	margin-bottom: 13px;
}

.container .one-third.column p {
   margin: 0 auto 10px;
   text-align: center;
   padding: 0 15px;
}

#about {
    margin: 10px 0 0;
    overflow: auto;
}

#about2 {
    /* margin: 5px 0 0; */
    overflow: auto;
}

#studio {
    margin: 0 0 30px 0;
    overflow: auto;
}

#tools {
    margin: 0 0 30px 0;
    overflow: auto;
}

#project {
    margin: 30px 0 20px;
    overflow: auto;
}

#project:hover {
   -o-transition: all 0.1s ease-in-out 0s;
   -webkit-transition: all 0.1s ease-in-out 0s;
   -moz-transition: all 0.1s ease-in-out 0s;
   transition: all 0.1s ease-in-out 0s;
   box-shadow: 0 0 2px #1fb4dd;
}

#project img {
    vertical-align: bottom;
}

#project-details {
    margin: 30px 0;
    overflow: auto;
}

p.introduction {
   font: 21px/30px 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 300;
   color: #444; 
   text-align: left;
   margin: 30px 0;
   border-bottom: 1px dotted #d3d3d3;
   padding-bottom: 30px;
}

p.main {
   font-size: 21px;
   margin: 30px 0;
}

p.small {
	font-variant: small-caps;
	}

#clients {
    margin-top: 5px;
    margin-bottom: 5px;
}

#social {
    margin-top: 0px;
}

#social2 {
    margin-top: 0px;
	text-align: center;
	/* border-top: 1px dotted #d3d3d3; */
	border-bottom: 1px dotted #d3d3d3;
}

p.quote {
   font: 21px/30px 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 300;
   color: #444; 
   text-align: center;
   margin: 20px 0 0;
}

p.author {
   font: 19px/30px 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
   /* color: #1fb4dd; */
   color: #2776ab;
   text-align: center;
   margin: 5px 0;
}

p.author a {
   /* color: #1fb4dd; */
   color: #2776ab; 
}

.thumbnail {
   position: relative;
   height: 100%;
}

.thumbnail img {
   vertical-align: bottom;
}

.thumbnail .details {
   text-align: center;
   background-color: #1fb4dd;
   background-color: rgba(31, 180, 221, 1.0);
   color: #fff;
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transition: 0.25s ease-in;
   -moz-transition: 0.25s ease-in;
   -o-transition: 0.25s ease-in;
   transition: 0.25s ease-in;
   min-height: 40%;
   width: 100%;
}

.no-opacity .thumbnail .details {
   text-align: center;
   background: none;
   min-height: 40%;
   width: 100%;
   top: -9999px;
}

.thumbnail:hover .details {
   margin-top: 0;
   opacity: .9;
}

.thumbnail .details h3, .h3 { 
   font-family: 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 300; 
   color: #fff; 
   font-size: 28px; 
   line-height: 30px;
   letter-spacing: 1px; 
   margin: 0 auto;
   text-transform: uppercase; 
   text-align: center; 
   padding: 27px 0 5px; 
   border: none; 
}


.thumbnail .details p { 
   font-size: 18px; 
   text-align: center;
}

.work {
   margin-bottom: 30px;
}



/* #Footer
================================================== */

#footer {
   margin: 0 auto;
   height: 48px;	
   padding: 0px 22px;
    
}

#footer p {
   font-family: 'ChaparralProRegular', 'VollkornRegular', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   float: left;
   color: #d3d3d3;
   /* padding: 10px 0 0 5px; */
   padding: 0px 0 0 0px;
}

#footer p a {
   color: #d3d3d3;
}

#footer img {
   float: right;
}


.twitter-follow-button {
   width: 320px !important;
}