@charset "UTF-8";
/* R E S E T */
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 {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, 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;
	}

/* F O N T S */


/* L A Y O U T */ 

.wrap {
	margin: 0 auto;
    max-width: 1100px;
	}
.header-wrap {
	margin: 0 auto;
	max-width: 1100px;
	padding: 0 2.5%;
	}
.footer-wrap {
	margin: 0 auto;
	max-width: 1100px;
	padding: 1% 0 3% 0;
	}
section {
	margin: 0px;
	padding: 0px;
	}
.part {
	display: block;
	float:left;
	margin: 1% 0 1% 4.5%;
	}
.part:first-child { 
	margin-left: 0;
	}
.full {
	width: 100%;	
	}
.two-thirds {
	width: 65.18%;
	}
.half {
	width: 47.72%;
	}
.third {
	width: 30.3%;
	}
img {
	max-width: 100%;
	}
section,
.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
/* F O N T S */
@font-face {
    font-family: 'wisdom_script_airegular';
    src: url('Fonts/wisdom_script-webfont.eot');
    src: url('Fonts/wisdom_script-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/wisdom_script-webfont.woff') format('woff'),
         url('Fonts/wisdom_script-webfont.ttf') format('truetype'),
         url('Fonts/wisdom_script-webfont.svg#wisdom_script_airegular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
/* S T Y L E S */

body {
	background: #FAF7F2;
	color: #353434;
	font-family: 'Gotham SSm A', 'Gotham SSm B'; 
	font-style: normal;
	font-weight: 300; 
	line-height: 1.5em;
	padding-top: 5%;
	text-align: center;
	}
a:link, a:visited {
	color: #FC6C85;
	text-decoration: none;
	}
a:hover, a:active {
	color: #ca2127;
	}
h2 {
	color: #D0021B;
	font-size: 1.6em;
	font-weight: 400;
	margin-bottom: .1em;
	text-align: left;
	text-transform: uppercase;
	}
h3 {
	color: #353434;
	font-size: 1.4em;
	font-weight: 400;
	margin-bottom: .1em;
	text-align: left;
	text-transform: uppercase;
	}
.bkg {
	clear: both;
	padding-bottom: 0;
	}
.note {
	color: #7c7b7b;
	font-size:.6em;
	font-style:italic;
	}
.third .side-note {
	color: #818282;
	font-size: .4em;
	font-style: italic;
	}
strong {
	font-weight: 500;
	}
/* H E A D E R */

header {
	background: #efefef;
	font-family: 'Idlewild A', 'Idlewild B'; 
	padding: 1% 0;
	position: fixed;
	text-align: left;
	top: 0;
	width: 100%;
	z-index: 4;
	}
nav {
	float: right;
	margin-top: 2%;
	min-width: 30%;
	}
header h1 {
	font-size: 1.4em;
	font-weight: 500;
	float: left;
	text-transform: uppercase;
	}
h1 span.first-letter {
	color: #D0021B;
	}
h1 span.logo-word {
	display: block;
	}
header h1 a:link, 
header h1 a:visited {
	color: #353434;
	}
nav ul li a:link,
nav ul li a:visited {
	color: #D0021B;
	}
header nav ul {
	text-align: right;
	}
header nav ul li {
	display: inline-block;
	}
nav ul li.vis {
	margin: 0 2%;
	padding: 0 2%;
	border-left: 2px dotted rgba(53,52,52,.15);
	border-right: 2px dotted rgba(53,52,52,.15);
	}
header nav a {
	font-family: 'Cyclone Inline A', 'Cyclone Inline B';
	font-size: 4em;
	text-transform: uppercase;
	}
nav ul li.current a {
	color: #353434;
	background: url("img/arrow-up.png") bottom center no-repeat;
	padding-bottom: 28px;
	}
p:not(.intro) {
	font-size: .9em;
	text-align: justify;
	}
.intro {
	font-size: 1.2em;
	line-height: 1.5em;
	margin: 5% 0 2.5% 0;
	text-align: left;
	}
.intro:first-line {
	font-size: 1.4em;
	line-height: 1.5em;
	}
.heart {
	margin-bottom: 3%;
	}

/* H O M E */

.home header {
	background: #FAF7F2;
	}

.home-hdr {
	background: url("img/home-bkg-1.png") left top repeat-x;
	padding: 18% 0 3% 0;
	width: 100%;
	}
.chicken {
	background: rgba(53,53,54,.75);
	font-family: 'Cyclone Inline A', 'Cyclone Inline B'; 
	font-size: 4.5em;
	line-height: .9em;
	text-align: center; 
	width: 100%;
	}
.chicken p {
	color: #faf7f2;
	line-height: 1.2em;
	text-align: center; 
	}
.build {
	margin-right: 1%;
	padding-right: 2%;
	background: url("img/arrow-up.png") right center no-repeat;
	}
.make {
	margin-right: 1%;
	padding-right: 2%;
	background: url("img/arrow-down.png") right center no-repeat;
	}
.home .third h3,
.ux .third h3 {
	color: #D0021B;
	text-align: center;
	}
.home .third img {
	margin: 15% 0;
	}
h4 {
	font-weight: 500;
	letter-spacing: .2em;
	margin-bottom: .3em;
	text-transform:uppercase;
	}
.home .third p {
	margin-bottom: 10%;
	}
.home .third .tools p {
	font-size: .8em;
	font-style: italic;
	text-align: center;
	}
.amp {
	color: rgba(256,256,256,0);
	background: url("img/amp.png") center center no-repeat;
	padding: 1%;
}
/*   D E V   */

.other-projects {
	border-top:  2px dotted rgba(53,53,54,.15);
	margin-top: 2.5%;
	padding-top: 2.5%;
	}
.dev section {
	border-top:  2px dotted rgba(53,53,54,.15);
	margin-top: 2%;
	padding: 2% 0;
	}
.dev .wrap section.first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
	}
.dev section:nth-child(even) a.half {
	float: left;
	}
.dev section:nth-of-type(odd) a.half {
	float: right;
	}
.dev section:nth-of-type(even):not(.other-projects) div {
	float: right;
	margin-top: 2em;
	}
/*   U X   */
.desc-wrap {
	margin: 0 auto;
    max-width: 1100px;
	position: fixed;
	top: 27%;
	width: 90%;
	}
.desc-wrap p {
	color: #353434;
	font-size: .8em;
	margin-bottom: 4%;
	line-height: 1.5em;
}
.desc-wrap .third {
	float: right;
	background: #FAF7F2;
	padding: 1.5% 2% 0 2%;
	border-bottom:  2px dotted rgba(53,53,54,.15);
	}
.desc-wrap h3,
.other-projects h3 {
	background: url("img/heart.png") left center no-repeat;
	padding-left: 28px;
	}
.reach-out {
	background-image: url("img/heart.png"), url("img/heart.png");
	background-position: left center, right center;
	background-repeat: no-repeat;
	display: inline-block;
	padding: 4%;
	}
.reach-out .pw {
	font-family: 'Cyclone Inline A', 'Cyclone Inline B';
	font-style: normal;
	font-size: 5em;
	margin-bottom: 3%;
	text-align: center;
	}
.reach-out .no-pw {
	font-size: 1.2em;
	font-style: italic;
	text-align: center;
	}
.buttons {
	border-bottom:  2px dotted rgba(53,53,54,.15);
	padding-bottom: 4%;
	margin-bottom: 4%;
	}
.prev {
	background: url("../img/prev-arrow.png") left top no-repeat;
	display: block;
	float: left;
	height: 15px;
	text-indent: -9999px;
	width: 86px;
	}
.next{
	background: url("../img/next-arrow.png") right top no-repeat;
	display: block;
	float: right;
	height: 15px;
	text-indent: -9999px;
	width: 86px;
	}
.next:hover {
	background-position: right -15px;
	}
.prev:hover {
	background-position: left -15px;
	}
.ux-work {
	position: relative;
	width: 62%;
	z-index: 3;
}
.ux-work h2 {
	margin-bottom: 2.5%;
	}
.ux-piece p {
	border-bottom:  2px dotted rgba(53,53,54,.15);
	font-style: italic;
	padding: 2.5% 0;
	margin-bottom: 5%;
	}
.ux-page h2 {
	margin-bottom: 2.5%;
	}
.more-design p {
	max-width: 700px;
	}
.more-design {
	margin: 0 auto;
	}
.more-design img {
	margin: 2% 0;
	}
.more-design h3:not(.first-child) {
	border-top:  2px dotted rgba(53,53,54,.15);
	padding-top: 2%;
	}

/*   V I S U A L   */
.accordion-toggle {
	cursor: pointer;
	}
.accordion-content {
	display: none;
	margin-bottom: 2%;
	text-align: center;
	}
.accordion-content.default {
	display: block;
	}
.accordion-toggle .open {
	background: url("img/open-arrow.png") right top no-repeat;
	display: block; 
	float: right;
	height: 55px;
	width: 85px;
	}
.accordion-toggle .close {
	background: url("img/close-arrow.png") right top no-repeat;
	display: block; 
	float: right;
	margin-right: .8em;
	margin-top: -15px;
	height: 55px;
	width: 50px;
	}
	
.vis h4 {
	font-size: 1.6em;
	text-align: left;
	padding: 2% 0 2% 4.5%;
	border-top:  2px dotted rgba(53,53,54,.15);
	clear: both;
	}
.vis h4:first-of-type {
	border-top: none;
	}
.vis h4 img {
	float: right;
	}
.vis h4.beer {
	background: url("img/beer.png") left center no-repeat;
	}
.vis h4.mid {
	background: url("img/mid.png") left center no-repeat;
	}
.vis h4.digest {
	background: url("img/digest.png") left center no-repeat;
	}
.vis h4.clock {
	background: url("img/clock.png") left center no-repeat;
	}
.vis h4.market {
	background: url("img/cheese.png") left center no-repeat;
	}
.vis h4.pod {
	background: url("img/plug.png") left center no-repeat;
	}
.vis h4.cyclo {
	background: url("img/cyclo.png") left center no-repeat;
	}
.accordion-content p {
	font-style: italic;
	clear: both;
	margin: 2% auto 0 auto;
	text-align: left;
	width: 80%;
	}
.accordion-content img {
	margin-bottom: 2%;
	}
.accordion-content ul {
	margin: 0 auto;
	}
.mid-century li {
	display: inline-block;
	margin-right: 5%;
	}
.pod li {
	display: inline-block;
	margin-right: 4%;
	}
.beer-icons li {
	display: inline-block;
	margin-right: 2%;
	}
.market li {
	display: inline-block;
	margin-right: 2%;
	vertical-align: middle;
	}
.market ul:first-child,
.beer ul:first-child {
	margin-bottom: 3%;
	}
.vis li:last-child {
	margin-right: 0;
	}
.clock p,
.cyclo p {
	width: 50%;
	}
.digest p {
	width: 30%;
	}
	
/*   G R A P H I C   D E S I G N   */
.graphic {
	position: relative;
	}
.graphic:hover {
	cursor: default;
	}
.overlay {
	background: rgba(255,255,255,.97);
	opacity: 0;
	padding: 5%;
	position: absolute;
	top: 40%;
	-webkit-transition: .5s ease-in-out; 
	-moz-transition: .5s ease-in-out; 
	-o-transition: .5s ease-in-out; 
	transition: .5s ease-in-out;
	z-index: 3;
	}
.graphic:hover .overlay {
	display: block;
	cursor: default;
	opacity: 1;
	}

/* F O O T E R */

footer {
	background: #A8CEC8;
	margin-top: 2.5%;
	}
footer .copyright {
	border-top: 2px dotted rgba(53,53,54,.15);
	color: #FAF7F2;
	font-size: .8em;
	font-style: normal;
	letter-spacing: .2em;
	margin-top: .5%;
	padding-top: .5%;
	text-transform: uppercase;
	}
.other-contact h2 {
	color: #FAF7F2;
	font-family: 'wisdom_script_airegular', sans-serif;
	font-size: 2em;
	margin-bottom: 1%;
	text-transform: none;
	}
.other-contact {
	font-size: .9em;
	font-style: italic;
	}
.phone {
	display: block;
	font-family: 'Cyclone Inline A', 'Cyclone Inline B'; 
	font-style: normal;
	font-size: 6.5em;
	font-weight: 400; 
	margin: 0 0 3% 0;
	line-height:.6em;
	}
.contact-info {
	text-align: center;
	}
a:link.email {
	color: #FAF7F2;
	font-size: .9em; 
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	}
.social {
	margin-top: 4%;
	}
.social li {
	display: inline-block;
	margin: 0 3.5%;
	}
.social li:first-child {
	margin-left: 0;
	}
.social li a:hover {
	opacity: .5;
	}
/*  R E S P O N S I V E   S T U F F   */

@media only screen 
and (min-width : 768px) 
and (max-width : 1200px) {
	.wrap,
	.footer-wrap {
	padding-left: 2.5%;
	padding-right: 2.5%;
	}
	.beer-icons li {
	margin: 0;
	width: 15%;
	}
	.mid-century li,
	.pod li,
	.market li {
	margin: 0;
	width: 30%;
	}
	.vis ul img {
	width: 85%;
	}
	.accordion-content p {
	width: 100%;
	}
	.email {
	font-size: .6em;
	}
	.vis h4 {
	font-size: 1em;
	padding-left: 6%;
	}
	.vid.desc {
	margin-top: 1%;
	}
	a.follow {
	padding-left: 9%;
	}
	.home .third img {
	margin: 8% 0;
	}
	.social li {
	margin: 0;
	width: 18%;
	}
	.reach-out {
	line-height: .8em;
	}
	.phone {
	font-size: 4.5em;
	}
	a:link.email {
	font-size: .65em;
	}
	.other-contact h2 {
	font-size: 1.5em;
	text-align: center;
	}
	.ux-page section {
	clear: none;
	}
	.desc-wrap {
	position: relative;
	float: right;
	top: 0;
	width: 30%;
	}
	.desc-wrap .third {
	width: 100%;
	}
	.ux-page .desc-wrap h3 {
	font-size: .9em;
	}
	.reach-out .pw {
	font-size: 3em;
	}
		
}
@media only screen and (max-width: 768px) {
	body {
	padding-top: 10%;
	}
	.accordion-toggle .open {
	background: url("img/open-alt.png") right top no-repeat;
	width: 31px;
	height: 31px;
	}
	.accordion-toggle .close {
	background: url("img/close-alt.png") right bottom no-repeat;
	height: 31px;
	width: 31px;
	}
	a.follow {
	background: none;
	background-color: rgba(33,184,202,.50);
	font-size: 1.1em;
	padding: 3%;
	}
	.phone {
	font-size: 4.5em;
	}
	a:link.email {
	font-size: .65em;
	}
	.other-contact h2 {
	font-size: 1.5em;
	text-align: center;
	}
	
	.vis h4 {
	font-size: 1em;
	padding-left: 7%;
	padding-top: 3%;
	}
	nav {
	min-width: 60%;
	text-align: left;
	}
	.reach-out .pw {
	font-size: 3em;
	line-height: .8em;
	}
	.reach-out .no-pw {
	line-height: 1em;
	}
}
@media screen and (max-width: 767px) {
	.wrap,
	.footer-wrap {
	padding-left: 2.5%;
	padding-right: 2.5%;
	}
	body {
	padding-top: 20%;
	}
	nav ul li {
	margin-top: 10%;
	}
	.third,
	.half, 
	.two-thirds {
	width: 100%;
	}
	.part,
	.dev section:nth-child(1n + 1):not(.other-projects) div {
	float: none;
	margin: 0;
	}
	h3 {
	font-size: .9em;
	text-align: center;
	}
	.vis h4 {
	background: none !important;
	font-size: .7em;
	padding-left: 0;
	padding-top: 3%;
	}	
	.vis h4 span {
	margin-right: 0;
	}
	.vis ul li {
	margin-right: 0;
	margin-bottom: 8%;
	}
	.accordion-content p {
	width: 100%;
	}
	.heart {
	margin: 4% 0;
	}
    .build {
	display: block;
	}
	.dev section img {
	height: 0;
	}
	.dev h3 {
	display: inline-block;
	background: url("img/heart.png") left center no-repeat;
	padding-left: 9%;
	font-size: 1.2em;
	}
	a.half {
	display: none;
	}
	.intro,
	.intro:first-line {
	font-size: 1.1em;
	text-align: justify;
	}
	.intro {
	margin: 10% auto 2% auto;	
	}
	.dev section:nth-child(1n + 1) div.desc {
	margin-top: 1%;
	}
	header h1 a:link {
	background: none;
	font-size: .8em; 
	font-weight: 800;
	padding: 2% 0 0 0;	
	}
	nav ul li a{
	font-size: 2.8em;
	}
	.home-hdr {
	padding-top: 15%;
	width: 100%;
	}
	.home-hdr .chicken p {
	font-size: .7em; 
	}
	.home .third img {
	margin: 5% 0;
	}
	.name {
	display: block;
	}
	.build,
	.make {
	display: inline-block;
	margin-right: 2.5%;
	padding-right: 6%;
	}
	.chicken {
	padding: 2% 0;
	}
	.chicken p{
	line-height: .9em;
	}
	.home .third img {
	margin: 6% 0;
	}
	.home .tools p {
	margin-bottom: 0;
	}
	.overlay {
	background: none;
	opacity: 1;
	padding: 0 0 10% 0;
	position: relative;
	top: 0;
	}
	.overlay p {
	text-align: center;
	}	
	.social {
	width: 85%;
	margin: 2%  auto;
	}
	.more-stuff {
	font-size: 2em;
	}
	.phone {
	margin-top: 4%;
	font-size: 6em;
	}
	a:link.email {
	font-size: .85em;
	}
	.social  {
	margin-bottom: 4%;
	}
	.desc-wrap {
	position: relative;
	top: 0;	
	}
	h2 {
	text-align: center;
	}
	.buttons {
	border-top:  2px dotted rgba(53,53,54,.15);
	padding-top: 4%;
	margin-top: 4%;
	}
	.ux-page .desc-wrap h3 {
	text-align: left;
	}
	
}