body {
	font-family:"proxima-nova",sans-serif;
	background:#fff;
	color:#111;
	margin:0;
	padding:0;
}

img, svg {max-width:100%; height:auto; }
a { color: #f63; }
a:hover, a:focus { color: #f63; text-decoration: none; }

/* Color helpers
================================================== */	
.orange {color:#f63;}
.white {color:#fff;}
.gray {color:#888;}
	
/* Type helpers
================================================== */	
.justify, .justify p {text-align:justify;}
.uppercase {text-transform:uppercase;}

.lowercase {text-transform:lowercase;}
.capitalize {text-transform:capitalize;}
.light {font-weight:200;}	

h1 { font-size:48px; font-weight:200; line-height:1; margin:0; }
h2 { font-size:36px; font-weight:200; line-height:1; margin:0; }
/*h3 { line-height:1.1; margin:0; font-weight:bold; }*/
h3 { line-height:1; margin:0; text-transform:uppercase; font-weight:bold; letter-spacing:0.04em; }
h4 { line-height:1.2; margin:0; font-weight:bold; }
h5 { letter-spacing:0.05em; margin:0; line-height:1.2; font-weight:bold; }

p {margin: 0 0 1.5em 0;}
p.big { font-size:18px; line-height:1.5em; margin:0 0 1.5em 0; }
p.bigger { font-size:24px; letter-spacing:-0.02em; line-height:1.5em; margin:0 0 1.5em 0; }
p.huge { font-size:30px; letter-spacing:-0.01em; line-height:1.3em; margin:0 0 1em 0; }
p.small { font-size:0.8em; margin:0 0 1em 0; }

hr {margin: 20px 0;}
hr.half-margin {margin: 10px 0;}
hr.quarter-margin {margin: 5px 0;}

/* Opacity helpers
================================================== */
.opacity10 { -moz-opacity:.10; filter:alpha(opacity=10); opacity:.10; }
.opacity20 { -moz-opacity:.20; filter:alpha(opacity=20); opacity:.20; }
.opacity30 { -moz-opacity:.30; filter:alpha(opacity=30); opacity:.30; }
.opacity40 { -moz-opacity:.40; filter:alpha(opacity=40); opacity:.40; }
.opacity50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
.opacity60 { -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60; }
.opacity70 { -moz-opacity:.70; filter:alpha(opacity=70); opacity:.70; }
.opacity80 { -moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; }
.opacity90 { -moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; }

div.jumbotron { position: relative; padding: 0; margin:0; color: #fff; background: #000; clear:both; }
div.jumbotron img { margin: 0 auto; }



/* Header & Navigation
================================================== */	
.navbar { background:#111; color:#444; margin:0; padding:0; border-radius:0; border:none; }
.navbar .navbar-toggle { border:none; background-color:none; }
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background-color:none; }
.navbar .navbar-toggle .icon-bar { background-color: #ddd; }
.navbar #nav-logo {
	display:block;
	background-color:#f63;
	height:50px;
	width:50px;	
	margin:0;
	background-image:url(../img/cf_logo.png);
	background-position:center;
	background-size:100%;
	background-repeat: no-repeat;
}
.navbar #nav-campfire {
	font-size:1em;
	font-weight:600;
	color: #444; 
	letter-spacing:0.05em;
	background:none;
	transition: all 0.2s linear; 
	-webkit-transition: all 0.2s linear; 
	-moz-transition: all 0.2s linear; 
	-o-transition: all 0.2s linear;	
}
.navbar #nav-campfire:hover,
.navbar #nav-campfire:focus {
	color: #fff;
}
.navbar .navbar-nav { padding-right:20px; }
.navbar .navbar-nav > li > a,
.navbar .navbar-nav > li > a:visited { 
	font-weight:600;
	color: #444; 
	letter-spacing:0.05em;
	background:none;
	transition: all 0.2s linear; 
	-webkit-transition: all 0.2s linear; 
	-moz-transition: all 0.2s linear; 
	-o-transition: all 0.2s linear;	
}
.navbar .navbar-nav > li > a:hover, 
.navbar .navbar-nav > li > a:focus {
	color: #fff;
	background:none;
}

body#home li#home a, body#home li#home a:visited { color:#fff; }
body#about li#about a, body#about li#about a:visited { color:#fff; }
body#work li#work a, body#work li#work a:visited { color:#fff; }
body#contact li#contact a, body#contact li#contact a:visited { color:#fff; }


/* Home
================================================== */
#homeIntro { padding: 0 10px 10px 10px; }
#homeIntro p { font-weight:200; font-size:1.8em; line-height:1.5; margin-bottom:1.5em; }
#homeCampaignOfTheYear { 
	display:none;
}
#homeCampaignOfTheYear img {
	margin-bottom:8px;
}
#homeCampaignOfTheYear h5 {
	font-size:13px;
	text-transform:uppercase;
	color:#fff;
	background:#f63;
	padding:8px;
}
#homeCampaignOfTheYear a p { 
	font-size:16px; 
	font-weight:bold;
	line-height:1.3; 
	color:#111; 
	margin:0;
}
#homeCampaignOfTheYear a:hover p { color:#f63; }


@media (min-width: 768px) { #homeCampaignOfTheYear {display:block;} }

#homeHeadlines {background:#333; padding:40px 0 20px 0; color:#aaa;}
#homeHeadlines h3 { color:#555; }
#homeHeadlines a img { 
	width:100%;
	margin-bottom: 8px;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%); 
	-moz-opacity:.50; 
	filter:alpha(opacity=50); 
	opacity:.50;
}
#homeHeadlines a:hover img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	filter: grayscale(0%);
	-moz-opacity:1.0; 
	filter:alpha(opacity=100); 
	opacity:1.0;	
}
#homeHeadlines a p { font-size:16px; font-weight:bold; color:#888; }
#homeHeadlines a:hover p { color:#ddd; }


/* About
================================================== */
#aboutIntro p { font-size:1.2em; line-height:1.5; margin-bottom:1.5em; }
#aboutLeadership {background:#333; padding:40px 0 0 0; color:#777;}
#aboutLeadership h3 { color:#555; }
#aboutLeadership h4 { color:#fff; letter-spacing:0.02em; text-transform:uppercase; font-weight:bold; }
#aboutLeadership h5 { color:#aaa; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.4em; }


/* Work
================================================== */
#projectDetails h2 { color:#111; font-size:48px; line-height:56px; font-weight:200;  letter-spacing:0; margin:0; }
#projectDetails h4 { font-size:12px; line-height:15px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin:0; }
#projectDetails p { font-size:1.2em; margin-bottom:1.5em;}

.projectAwards h4 { color:#888; margin-bottom:1em !important; }
.projectAwards td { color:#888; padding-right:8px; padding-bottom:8px; border:none; }
.projectAwards img { width:36px; height:36px; }

div#projects .projectLink a { text-decoration:none;  }
div#projects .projectLink a h4 { 
	font-size:17px; 
	font-weight:bold;
	line-height:1.1; 
	color:#111; 
	margin:0;
}
div#projects .projectLink a:hover h4 { color:#f63; }

div#projects .projectLink a h5 { 
	text-transform:uppercase;
	font-size:12px; 
	font-weight:600;
	line-height:1.2; 
	letter-spacing:0.05em;
	color:#aaa; 
	margin:0;
}
div#projects .projectLink a:hover h5 { }

div#projects .projectLink a .projectThumb {
	margin-bottom:8px;
}
div#projects .projectLink .projectThumb img { width:100%; border:none; }


div#projects .projectLink a .projectThumb img { 

}
div#projects .projectLink a:hover .projectThumb img {

}

div#projects .projectName { height:4em; }

#clients { background:#333; padding:40px 0 20px 0; margin-top:20px; }
#clients h3 { color:#555; }

#clients .clientLogo { position:relative; width:100%; height:0; padding-bottom:100%; margin:auto; }
#clients .clientLogo svg { position:absolute; fill: #fff; width:100%; height:100%; padding:20%; }

/* #clients .clientLogo { width:100%; height:0; padding-bottom:100%; margin:20px auto; } /* fluid square */
/* #clients .clientLogo svg { fill: #fff; width:80%; height:80%; padding:20%;} */

/*@media (min-width: 992px) { #clients .clientLogo svg { padding: 30px;} }
@media (min-width: 1200px) { #clients .clientLogo svg { padding: 40px;} }*/

#moreWork {background:#333; padding:40px 0 20px 0; color:#aaa;}
#moreWork h3 { color:#555; margin-bottom:1em; }
#moreWork .projectLink a .projectThumb { margin-bottom:8px;}
#moreWork .projectLink a .projectThumb img { 
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%); 
	-moz-opacity:.50; 
	filter:alpha(opacity=50); 
	opacity:.50;
}
#moreWork .projectLink a:hover .projectThumb img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	filter: grayscale(0%);
	-moz-opacity:1.0; 
	filter:alpha(opacity=100); 
	opacity:1.0;	
}
#moreWork .projectLink a h5 { 
	color:#555; 
	text-transform:uppercase;
	font-size:12px; 
	font-weight:600;
	line-height:1.2;
	letter-spacing:0.05em; 
	margin:0;	
}
#moreWork .projectLink a:hover h5 { color:#777; }
#moreWork .projectLink a h4 { color:#888; }
#moreWork .projectLink a:hover h4 { color:#ddd; }


/* Jobs (Work With Us)
================================================== */
body#jobs div.container h5 { color:#555; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.4em; }
body#jobs div.container ul { margin-left:0; padding-left:1.2em; margin-bottom:1.5em; }

/* Footer
================================================== */
footer { position:relative; height:50px; background:#111; color:#444; margin:0; padding:0; border-radius:0; border:none; }
footer nav { position:absolute; right:15px; top:0; }
footer nav li { float: left; list-style: none; margin:0; padding:15px 10px; }
footer nav li a, footer nav li a:visited {
	text-decoration:none;
	font-weight:600;
	color:#444;
	letter-spacing:0.05em;
	transition: all 0.2s linear; 
	-webkit-transition: all 0.2s linear; 
	-moz-transition: all 0.2s linear; 
	-o-transition: all 0.2s linear; 
}
footer nav li a:hover { color:#fff; }
@media (max-width: 420px) { 
	footer nav li { font-size:13px; padding:16px 7px; }
}


/* Social
-------------------------------------------------- */
.socialMediaLinks { position:absolute; left:0; top:0; list-style: none; }
.socialMediaLinks ul { margin:14px 0 0 14px; padding:0; }
.socialMediaLinks li { float: left; list-style: none; }
.socialMediaLinks a { padding:0 4px 0 0;}
	
.socialMediaLinks .sml { 
	float:left; 
	display:block; 
	width:28px; 
	height:22px; 
	padding-right:9px; 
	background-position: 0 0; 
	background-size:100%; 
	background-repeat: no-repeat; 
	-moz-opacity:0.27; 
	filter:alpha(opacity=27); 
	opacity:0.27; 	
	transition: opacity 0.2s linear; 
	-webkit-transition: opacity 0.2s linear; 
	-moz-transition: opacity 0.2s linear; 
	-o-transition: opacity 0.2s linear; 
}
.socialMediaLinks .sml:hover {
	-moz-opacity:1.0; 
	filter:alpha(opacity=100); 
	opacity:1.0; 
}
.sml.facebook {
	background: url(../img/icons/icon-facebook.png) left center no-repeat; 
	background-size:22px 22px; 
}
.sml.twitter { 
	background: url(../img/icons/icon-twitter.png) left center no-repeat; 
	background-size:22px 22px; 
}