/* 

font-family:'Proxima Nova Soft W03 Reg';
font-family:'Proxima Nova Soft W03 Medium';
font-family:'Proxima Nova Soft W03 Bd';
font-family:'Proxima Nova Soft W03 Smbd';

10px = 0.625em
12px = 0.750em
14px = 0.875em
16px = 1em
18px = 1.125em
20px = 1.250em
28px = 1.750em
*/

/* ----- Common ----- */
html, body { height: 100%; } 
body { 
	font-family: 'Proxima Nova Soft W03 Reg', sans-serif; 
	font-size: 1em; 
	color: #252d36;
	margin: 0; 
} 

img { 
	display: block; 
	border: none; 
} 

input, textarea { outline: none; } 
.left { text-align: left; } 

.hr { 
	width: 460px; 
	height: 1px; 
	margin-top: 40px; 
	margin-right: auto; 
	margin-bottom: 40px; 
	margin-left: auto; 
	background-color: #666; 
}
.hr-wide { 
	height: 1px; 
	margin-top: 40px; 
	margin-right: auto; 
	margin-bottom: 40px; 
	margin-left: auto; 
	background-color: #666; 
} 

/* ----- Type ----- */
h1 { 
	font-size: 1.750em; 
	color: #f84040; 
	font-weight: normal; 
	text-align: center; 
	margin: 0 0 0.5em 0; 
} 

.mbl { margin-bottom: 40px; } 

h2 { 
	font-size: 1.125em; 
	font-weight: normal; 
	text-align: center; 
	margin: 0; 
} 
h2.sub { 
	font-size: 1.750em;
	color: #f84040;
	text-align: center; 
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom-width: 0;
} 
h3 { 
	font-size: 1.750em;
	font-weight: normal; 
	text-align: center; 
	margin: 0 0 0.5em 0; 
} 

.heading { color: #f84040; } 

.text { 
	text-align: justify; 
	padding-left: 300px; 
} 

.network span { display: none; } 
.google a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 -64px; 
	background-repeat: no-repeat; 
} 
.twitter a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 -32px; 
	background-repeat: no-repeat; 
} 
.linkedin a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
} 

/* ----- Header ----- */
header { 
	z-index: 999; 
	font-size: 0.750em; 
	text-transform: uppercase;
	position: fixed; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	width: 200px; 
	color: #fff; 
	background-color: #252d36;  
} 
header .logo { 
	display: block; 
	width: 163px; 
	height: 58px; 
	background-image: url(/lib/site/the-garret.png); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
} 
header .logo span { display: none; }

/* ----- Nav ----- */
nav { 
	text-transform: uppercase; 
	font-size: 1.25em; 
	padding-left: 10px; 
	margin-bottom: 30px; 
}
nav ul { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
} 
nav a { 
	display: block; 
	color: #fff; 
	text-decoration: none; 
	padding-bottom: 10px; 
} 
nav a:hover { 
	color: #f84040; 
	text-decoration: none;
} 
nav a:active, 
nav li.current a { color: #f84040; } 
nav li.dc { display: none; } 


/* ----- Header - Social network icons ----- */
.network { 
	list-style: none; 
	padding: 0; 
	margin-top: 0; 
	margin-right: 0; 
	margin-bottom: 40px; 
	margin-left: 0; 
} 
.network li { 
	float: left; 
	margin-left: 10px; 
} 
.network .google a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 -64px; 
	background-repeat: no-repeat; 
} 
.network .twitter a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 -32px; 
	background-repeat: no-repeat; 
} 
.network .linkedin a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}
.network span { display: none; } 


/* ----- Quick contact form ----- */
.quick-contact { 
	padding: 0; 
	margin-top: 0; 
	margin-right: 0; 
	margin-bottom: 20px; 
	margin-left: 10px; 
} 
.quick-contact p { 
	margin-top: 0; 
	margin-bottom: 5px; 
}
.quick-contact form { 
	padding: 0; 
	margin-top: 0; 
	margin-right: 0; 
	margin-bottom: 20px; 
	margin-left: 0; 
} 
.quick-contact fieldset { 
	border: 0; 
	padding: 0; 
	margin: 0; 
} 
.quick-contact legend { display: none; } 
.quick-contact label { display: none; } 
.quick-contact .textinput input { 
	width: 131px; 
	color: #4a4a4a; 
	border-style: solid; 
	border-color: #fff; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px; 
	padding: 5px; 
} 
.quick-contact .textarea textarea { 
	width: 131px; 
	height: 50px; 
	color: #4a4a4a; 
	border-style: solid; 
	border-color: #fff; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px; 
	padding: 5px; 
} 
.quick-contact .submit input { 
	width: 143px; 
	color: #fff;  
	padding: 5px; 
	border-style: solid; 
	border-color: #fff; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #252d36; 
} 
.quick-contact ul { 
	list-style: none; 
	font-size: 1.25em;
	padding: 0; 
	margin: 0; 
} 
.quick-contact a { 
	color: #fff; 
	text-decoration: none; 
} 

.email a { color: #f84040; } 

/* ----- Content show/hide buttons ----- */
.content-btns { 
	z-index: 888; 
	position: absolute; 
	top: 38px; 
	left: 0;
	width: 960px; 
	height: 30px;  
}
/* ----- Show ----- */
.content-btns #btnShow { 
	z-index: 888; 
	display: none;  
	position: absolute; 
	top: 0; 
	left: 200px; 
	width: 30px; 
	height: 30px; 
	color: #fff; 
	cursor: pointer; 
	background: url(/lib/site/main-btn-open.png) no-repeat 0 0; 
	box-sizing: border-box; 
} 
/* ----- Hide ----- */
.content-btns #btnHide { 
	z-index: 888; 
	position: absolute; 
	top: 0; 
	right: 0; 
	width: 30px; 
	height: 30px;  
	color: #fff; 
	cursor: pointer; 
	background: url(/lib/site/main-btn-close.png) no-repeat 0 0; 
	box-sizing: border-box; 
}

/* ----- Article ----- */
article { 
	position: relative; 
	max-width: 930px; 
	overflow: visible; 
} 
.main-bg { 
	min-height: 100vh; 
	background-image: url(/lib/site/main-bg.png); 
	background-repeat: repeat; 
	background-position: 0 0; 
	background: linear-gradient( rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) ), url('/lib/site/main-bg.png');
}
article .row { 
	padding-top: 40px; 
	padding-right: 40px; 
	padding-left: 240px; 
} 

/* ----- Content ----- */
.article-featured { 
	text-align: center; 
	padding: 10px; 
	margin-bottom: 20px; 
	margin-top: 40px; 
	background: #fff; 
} 
.article-featured img { margin-bottom: 20px; 

  display: block;
  width: 100%;
  height: auto;
}
.article-grid { 
	position: relative; 
	text-align: center; 
} 
.article-grid .col { 
	float: left; 
	width: 167px; 
	padding: 10px; 
	margin-right: 5px; 
	margin-left: 10px;  
	margin-bottom: 10px;
	background: #fff; 
} 
.article-grid .col:first-child { margin-left: 10px; } 
.article-grid .col img { margin-bottom: 20px; } 
.article-featured h3 { 
	font-size: 1.750em; 
	color: #f84040; 
}
.article-grid h3 { 
	font-size: 1.250em; 
	color: #f84040; 
} 
.article-featured .link { 
	padding-top: 20px; 
	padding-bottom: 10px; 
} 
.article-grid .link { 
	cursor: pointer; 
	padding-top: 20px; 
	padding-bottom: 10px; 
} 

h3.shout { font-size: 1em: } 

.article-featured .link a { 
	display: inline-block; 
	text-decoration: none; 
	color: #252d36; 
	padding: 5px;  
	border-style: solid; 
	border-color: #252d36; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
} 
.article-grid .link a {  
	display: inline-block; 
	text-decoration: none; 
	color: #252d36; 
	padding: 5px; 
	border-style: solid; 
	border-color: #252d36; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
} 
.article-header { 
	padding: 10px; 
	margin-bottom: 20px; 
	background-color: #fff; 
} 
.article-body { 
	padding: 10px; 
	background-color: #fff; 
}
.article-body p:last-child { margin-bottom: 0; }

/* ----- Content ----- */
.col-3 { 
	position: relative; 
	overflow: hidden; 
	list-style: none; 
	font-size: 0.875em;
	text-align: center; 
	padding: 0; 
	margin: 0; 
} 
.col-3 li { 
	float: left; 
	width: 180px; 
	padding: 10px; 
} 
.col-3 h3 { font-size: 1.125em; } 
.col-3 img { 
	margin-right: auto; 
	margin-left: auto; 
	margin-bottom: 20px; 
} 
.col-3 p { margin-bottom: 20px; } 
.col-3 a.btn { 
	display: inline-block; 
	color: #2b2c30; 
	font-size: 0.750em;
	text-decoration: none; 
	text-transform: uppercase; 
	padding: 10px; 
	border-style: solid; 
	border-color: #2b2c30; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
} 
.col-3 a.btn:hover { 
	color: #2b2c30; 
	border-color: #6a6b6e;
	background-color: #a2e131; 
} 

.page-body { padding-top: 1em; }

/* ----- Portfolio for mobile ----- */
.mobile-work { 
	text-align: center; 
	padding: 10px; 
	margin-bottom: 20px; 
	margin-top: 40px; 
	background: #fff; 
} 
.mobile-work img { margin-bottom: 20px; 

  display: block;
  width: 100%;
  height: auto;
}
.mobile-work h3 { 
	font-size: 1.750em; 
	color: #f84040; 
}

.mobile-work .link a { 
	display: inline-block; 
	text-decoration: none; 
	color: #252d36; 
	padding: 5px;  
	border-style: solid; 
	border-color: #252d36; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
} 


/* ----- Shout out ----- */
.shouts { position: relative; } 
.shouts { 
	float: left; 
	width: 180px; 
	text-align: left;
	padding: 10px; 
	background-color: #fff; 
} 
.shouts h3 { 
	color: #f84040; 
	text-align: left;
} 

/* ----- Services ----- */
.services { 
	list-style: none; 
	padding: 0; 
	margin-top: 40px;
	margin-right: 0; 
	margin-bottom: 40px; 
	margin-left: 0; 
} 
.services li { 
	cursor: pointer;
	padding-bottom: 10px; 
	margin-bottom: 10px; 
	border-bottom-style: dashed; 
	border-bottom-color: #666; 
	border-bottom-width: 1px; 
}
.services h3 { 
	font-size: 1.125em; 
	text-align: left;  
	margin-bottom: 0; 
}
.services .detail { 
	display: none; 
	padding-top: 10px; 
	padding-bottom: 10px; 
}
.services .detail-btn-icon { 
	float: right; 
	color: #f84040; 
	font-size: 1.125em; 
}
.services .detail-btn-icon .close { display: none; } 

/* ----- Client grid ----- */
.client-grid { 
	padding-top: 40px; 
}
.client-grid ul { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
}
.client-grid li { 
	float: left;
	overflow: hidden; 
	width: 190px; 
	height: 118px; 
	margin-bottom: 10px; 
	margin-left: 10px; 
} 

/* ----- Work ----- */
.work { 
	position: relative;  
} 
.work-list { 
	float: left;
	width: 280px; 
} 
.work-list h3 { 
	font-size: 1.125em; 
	text-align: left;  
	margin-bottom: 20px;
}
.work-list ul {  
	list-style: none; 
	padding: 0; 
	margin-top: 0;
	margin-right: 0; 
	margin-bottom: 40px; 
	margin-left: 0; 
} 
.work-list li { 
	padding-bottom: 10px; 
	margin-bottom: 10px; 
	border-bottom-style: dashed; 
	border-bottom-color: #666; 
	border-bottom-width: 1px; 
} 
.work-list a { 
	color: #252d36; 
	text-decoration: none; 
}
.work-list a:hover { 
	color: #f84040; 
	text-decoration: underline;  
}

.work-list .current a { color: #f84040; } 

.work-detail { 
	overflow: visible; 
	float: left; 
	width: 280px; 
	text-align: left; 
	margin-left: 30px;  
} 
.work-detail .intro { 
	font-size: 1.625em; 
}
.work-detail h3 { 
	color: #252d36; 
	text-align: left; 
}
.work-detail .quote { 
	/* ----- Condensed font ----- */
	position: relative; 
	text-transform: uppercase;  
	margin-bottom: 10px; 
} 
.work-detail .quote-img { 
	position: absolute; 
	left: -22px; 
	width: 19px; 
	height: 15px; 
	background-image: url(/lib/site/quote.png);
	background-repeat: no-repeat; 
	background-position: 0 0;
} 
.work-detail .quote-text { 
	font-size: 1.5em; 
	margin-bottom: 1em; 
}
.work-detail .quote-name { 
	font-size: 1.125em; 
	margin-bottom: 1.5em; 
} 
.work-detail .job { color: #a2e131;  } 

/* ----- Prezi ----- */
.prezi { padding-top: 40px; }

/* ----- Contact info ---- */
.contact-info h3 { 
	font-size: 1.5em; 
	text-align: left; 
	color: #f84040; 
	margin-top: 1em; 
} 
.contact-info ul { 
	list-style: none; 
	font-size: 1.2em; 
	padding: 0; 
	margin-left: 0; 
}
.contact-info strong { font-weight: normal; } 



/* ----- Contact form ----- */
.contact-form form { 
	padding: 0; 
	margin: 0; 
} 
.contact-form h2 { 
	font-size: 1.5em; 
	color: #f84040;
	text-align: left; 
}
.contact-form fieldset { 
	padding: 0; 
	margin: 0; 
	border-style: none; 
	border-width: 0; 
}
.contact-form legend { display: none; } 
.contact-form label { 
	display: block; 
	margin-bottom: 5px; 
} 
.contact-form .field { 
	border-style: solid; 
	border-color: #ccc; 
	border-width: 1px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px; 
	background: #fff; 
} 
.contact-form .field input, 
.contact-form .field textarea {  
	width: 98%; 
	padding: 0; 
	margin: 1%; 
	color: #4a4a4a; 
	border-style: none; 
	border-width: 0; 
} 
.contact-form .textinput input {  
	width: 100%; 
	padding: 0; 
	margin: 0; 
	color: #4a4a4a; 
	border-style: none; 
	border-width: 0; 
} 
.contact-form .textarea textarea { 
	width: 100%; 
	height: 50px; 
	padding: 0; 
	margin: 0; 
	color: #4a4a4a; 
	border-style: none; 
	border-width: 0; 
} 
.contact-form .submit { text-align: right; } 
.contact-form .alert { 
	color: #f84040; 
	font-weight: bold; 
} 


/* ----- Background Nav ----- */
.background-nav  { 
	position: fixed; 
	top: 0; 
	right: 0; 
	z-index: 999; 
	background: transparent; 
} 
.background-nav a { 
	float: right; 
	display: block; 
	cursor: pointer; 
	width: 30px; 
	height: 30px; 
	background: #fff; 
} 
.background-nav span { display: none; } 
.background-nav #prevslide { 
	background-image: url(/lib/site/prev.png); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}
.background-nav #nextslide { 
	background-image: url(/lib/site/next.png); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}





/* ----- Links ----- */
a { 
	color: #f84040; 
	cursor: pointer; 
	text-decoration: none; 
} 
a:hover { 
	text-decoration: underline;  
}


/* ----- Footer ----- */
footer { 
	font-size: 1em; 
	color: #666;
	margin-bottom: 20px; 
}
footer ul { 
	display: inline-block; 
	list-style: none; 
	padding: 0; 
	margin-top: 0; 
	margin-right: auto; 
	margin-bottom: 0; 
	margin-left: auto; 
} 
footer li { 
	float: left; 
	margin-left: 20px; 
} 
footer li:first-child { margin-left: 0; } 

/* ----- Footer - Social network icons ----- */
.footer-network { display: none; } 

/* ----- Full screen background ----- */
.background { 
	z-index: -2; 
	position: fixed; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
}
.cycle-slideshow { 
	position: fixed; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0; 
} 
.cycle-slideshow .slide { 
	width: 100%; 
	height: 100vh;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* ===== Mobile and handheld devices ===== */
/* ========================================================================================================= */
@media only screen and (max-width: 767px) { 
	
	/* ----- Reset ----- */
	
	h1, h2, h2.sub, h3, h4, h5, p { 
		text-align: left; 
	}
	
	/* ----- Header ----- */
	header { 
		position: fixed; 
		height: 88px; 
		width: 100%;  
		color: #fff; 
		margin-bottom: 20px; 
		background-color: #252d36; 
	}
	header .logo { margin-bottom: 0; } 
	.quick-contact { display: none; } 
	
	
	
	/* ----- Nav ----- */
	nav { 
		height: 30px; 
		margin-top: 0; 
		margin-right: 0; 
		margin-bottom: 0; 
		margin-left: 0;
		padding-left: 0;
	} 
	nav ul { 
		height: 30px; 
		padding: 0;
		margin: 0 auto; 
		border-top-style: solid; 
		border-top-color: #fff; 
		border-top-width: 0;
		background-color: #a2e131; 
		min-width: 768px;
	} 
	nav li { 
		float: left; 
		height: 30px; 
	} 
	nav li.dt { display: none; } 
	nav li.dc { display: inline; } 
	nav a { 
		display: block; 
		padding-top: 0;
		padding-right: 10px; 
		padding-bottom: 0; 
		padding-left: 10px; 
		line-height: 30px; 
		color: #252d36; 
	} 
	nav a:first-child { 
		/* padding-left: 0; */
	}
	
	.background-nav { display: none; } 
	
	/* ----- Header - Social network icons ----- */
	.network { 
	list-style: none; 
	padding: 0; 
	margin-top: 0; 
	margin-right: 0; 
	margin-bottom: 0px; 
	margin-left: 0;
	position: absolute;
	top: 15px;
  right: 30px;
} 
.network li { 
	float: right; 
	margin-right: 0px; 
} 
.network .google a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 -64px; 
	background-repeat: no-repeat; 
} 
.network .twitter a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 -32px; 
	background-repeat: no-repeat; 
} 
.network .linkedin a { 
	display: block; 
	width: 32px; 
	height: 32px; 
	background-image: url(/lib/site/network-icons.png); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}
.network span { display: none; } 
	
	/* ----- Content show/hide buttons ----- */
	.content-btns { display: none; } 
	
	/* ----- Article ----- */
	article { 
		width: 100%; 
		text-align: left; 
		margin-bottom: 20px; 
		margin-top: 80px; 
	} 
	article .row { 
		text-align: left; 
		padding-right: 0; 
		padding-left: 0; 
		margin-right: 20px; 
		margin-left: 20px;
	} 
	#main { 
		text-align: left; 
	}
	
	/* ----- Footer - Social network icons ----- */
	.footer-network { 
		display: block;
		list-style: none; 
		padding: 0; 
		margin-top: 0; 
		margin-right: 0; 
		margin-bottom: 40px; 
		margin-left: 0; 
	} 
	.footer-network li { 
		float: left; 
		margin-left: 10px; 
	} 
	.footer-network .google a { 
		display: block; 
		width: 32px; 
		height: 32px; 
		background-image: url(/lib/site/network-icons.png); 
		background-position: 0 -64px; 
		background-repeat: no-repeat; 
	} 
	.footer-network .twitter a { 
		display: block; 
		width: 32px; 
		height: 32px; 
		background-image: url(/lib/site/network-icons.png); 
		background-position: 0 -32px; 
		background-repeat: no-repeat; 
	} 
	.footer-network .linkedin a { 
		display: block; 
		width: 32px; 
		height: 32px; 
		background-image: url(/lib/site/network-icons.png); 
		background-position: 0 0; 
		background-repeat: no-repeat; 
	} 
	.footer-network span { display: none; } 
	
	/* ----- Full screen background ----- */
	.background { display: none; } 
	
}