@charset "UTF-8";
/* CSS Document */

body
	{font-family: "ff-meta-web-pro";}

a
	{color:inherit;
	text-decoration:none}

#container
	{width:900;
	margin-left:30px;
	float:left}

#left
	{float:left;
	width:171px;
	padding:0 740px 0 0}

#right
	{float:right;
	width:739px;
	margin:0 0 0 -740px;}

#sidebar
	{margin-top:98px}

#sidebar ul
	{list-style:none;
	margin:0;
	padding:10px 0 10px 0;
	width:170px}

#sidebar li
	{list-style:none;
	margin:5px 0;
	padding:0}

#sidebar p
	{margin:0 0 0 1px;
	padding:0;
	color:#333333;
	font-size:13px}

.scott, .shelby
	{border-top:solid 2px #e3a171}

.piece
	{padding:15px 0 20px 0;
	border-top:solid 1px #a8a8a9;
	margin:0 0 0 70px;
	width:100%}

.piece img
	{padding:0;
	margin:0;}

.clear, .clear_head
	{padding:20px 0 0 0;
	clear:both;
	font-size:14px}

.head
	{margin:0 0 20px 70px;
	font-size:14px}

.active
	{font-weight:bold;
	color:#d06212 !important}

.clear_head
	{font-weight:bold;
	text-transform:uppercase;
	margin-bottom:0}

.bullet ul
	{margin:0;
	padding:0}

.bullet p
	{margin:0;
	padding:0;
	font-size:14px}

.bullet li
	{margin:0 0 0 15px}

.outline
	{border:solid 1px #a8a8a9}

.caption
	{display:block;
	float:left;
	font-style:italic;
	padding:10px 3px 0 0;
	color:#333333;
	font-size:14px}

.bold
	{font-style:normal;
	font-weight:bold}

.padded
	{margin-top:20px !important}

.blue
	{color:#15a8a0 !important;
	font-style:italic;
	font-size:14px;
	width:90%;
	padding-left:15px}

.brown
	{color:#5f3817 !important;
	font-style:italic;
	font-size:14px;
	width:90%;
	padding-left:15px}

.piece h2
	{color:#d06212;
	padding:0 0 0 3px;
	text-align:left}

.piece p
	{padding:0 100px 0 3px;
	color:#333333;
	font-size:14px;
	text-align:left}

.masthead
	{text-align:center;
	margin-left:95px;
	height:74px}

.masthead h1, .home h1
	{font-size:35px;}

p.kick_head, p.kick_sub
	{font-size:24px;
	text-align:center;
	margin:0;
	padding:0}

p.kick_sub
	{color:#787777;
	font-weight:normal}

p.kick_head
	{color:#d06212;
	text-transform:uppercase;
	font-weight:bold;
	margin-top:1em}

img.writing-logo
	{float:left;
	margin-right:3% !important;
	max-width:200px}

.orange
	{color:#d06212}

.creative
	{border-top:solid 2px #e3a171;
	padding-top:2%;
	max-width:14em}

.home
	{text-align:center;
	width:100%;}

.button
	{max-width:750px;
	margin:auto;
	height:175px;
	position:relative;
	margin-top:30px}

.creative-logos, .strategy-logos
	{background-repeat:repeat;
    background-size: contain;
	z-index:1;
	opacity:1;
	z-index:100}

.creative-logos
	{background-image:url(images/creative_bkgnd.jpg);}

.strategy-logos
	{background-image:url(images/strategy_bkgnd.jpg);}

.homebutton-original
	{background:background: rgba(255,175,75,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(208,98,18,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#d06212', GradientType=1 );
width:60%;
margin:auto;
position:relative}

.homebutton-original h2
	{text-align:center;
	color:#fff;
	padding:3em;}

.homebutton
	{background:rgba(255,175,75,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(208,98,18,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#d06212', GradientType=1 );
width:750px;
height:175px;
margin:auto;
opacity:0.92;
z-index:10;}

.strategy-logos h2, .creative-logos h2
	{text-align:center;
	color:#FFF;
	padding:0;
	margin:0;
	position:absolute;
	top:40%;
	width:100%
	}

.home-nav li
	{display:inline-block;
	margin:0 1.5%;
	color:#787777}

.home-nav ul
	{padding:0;
	margin:-2% 0 0 0;
	text-align:center;
	width:100%;
	border-bottom:solid 1px #a8a8a9}

li.homefirst
	{margin-left:0 !important}

.saul
	{color:#d06212;
	text-transform:uppercase}

.storyteller
	{color:#787777;
	border-left:solid 3px #e1dfdf !important;
	padding-left:10px;
	font-weight:normal}

.strategic
	{color:#d06212}
	 
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  height: 213px;
  margin: 0 5em -3em 0;
  position: relative;
  width: 147px;
}

ul.img-list img {
	width:213px
}


 
span.text-content span, span.home-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(255,175,75,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(208,98,18,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#d06212', GradientType=1 );
  color: white;
  cursor: pointer;
  display: table;
  height: 147px;
  left: 0;
  position: absolute;
  top: 0;
  width: 213px;
  opacity: 0;
}
 
ul.img-list li:hover span.text-content {
  opacity: 0.9;
}

.home a:hover span.home-content
	{opacity:1}

span.home-content {
  color: white;
  cursor: pointer;
  display: table;
  position: absolute;
  bottom:1em;
  opacity: 0;
  text-align:center;
  width:98%;
  font-size:20px;}

.vid
	{position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
	width:100%;
	margin:1.5% 0 1.5% 0}

.vid iframe
	{position: absolute;
    top:0;
	left:0;
    width: 100%;
    height: 100%;
	padding:0;
	margin:1.5% auto;
	border:none}

.masthead ul
	{display:none}

nav
	{display:none}

img.about_pic
	{float:left;
	padding:0 3% 3% 0}

#contact
	{display:none;
	background:#fff;
	border-top:solid 1px #a8a8a9;
	font-size:0.8em}

#contact2
	{background:#fff;
	border-top:solid 1px #a8a8a9;
	font-size:0.8em;
	margin-top:5%}

#contact ul, #contact2 ul
	{margin:0;
	padding:0;
	text-align:center}

#contact li, #contact2 li
	{display:inline-block;
	text-align:center;
	margin:1%}

#contact2 p
	{padding:0;
	margin:0}

li.inline
	{display:inline-block;}

li.second
	{margin-left:10% !important}
	
/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding:0;
	display: none;
	margin:0
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

@media screen and (max-width: 1030px) {

nav
	{display:block;
	margin:auto;}

.disappear
	{display:none;
	width:0}

#container
	{float:none;
	margin:0;
	width:100%}

#right
	{float:none;
	margin:auto;
	width:100%}

.homebutton
	{max-width:750px}

.homebutton-original
	{width:90%;
	max-width:750px}

.buttons
	{margin-left:0}

.home span.home-content
	{opacity:1}

ul.img-list li {
  display: inline-block;
  height: 147px;
  margin: 0 0.5em 0 0;
  position: relative;
  width: 213px;
}

span.text-content {
  background: rgba(255,175,75,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(208,98,18,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#d06212', GradientType=1 );
  color: white;
  cursor:auto;
  display: table;
  height: 147px;
  left: 0;
  position: absolute;
  top: 0;
  width: 213px;
  opacity: 0;
}
 
ul.img-list li span.text-content {
  opacity: 0.9;
}

.piece
	{margin:auto;
	width:95%}

.piece h2
	{color:#d06212;
	padding:auto;
	margin:auto}

.piece p
	{padding-right:10px}
	
.piece img
	{display:inline-block;
	margin:auto}

a.scroll
	{color:#e1dfdf;
	font-size:3em;
	display:inline;
	padding:0 2%;
	vertical-align:middle}

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

.masthead
	{margin:auto;
	height:auto;
	width:auto}

.masthead h1
	{margin-bottom:2%}

.masthead ul
	{display:block;
	list-style:none;
	margin:0;
	padding:0}

.masthead li
	{display:inline-block;
	margin:0 2% 2% 2%;}

.masthead p
	{color:#333333;
	font-size:14px;
	padding:0;
	margin:0}

.call, .email2, .twitter
	{display:inline-block;
	text-align:center;
	padding:0.75em 1em;
	background: rgba(255,175,75,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(208,98,18,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#d06212', GradientType=1 );
}

.call a, .email2 a, .twitter a
	{color:#fff;
	text-decoration:none;
	letter-spacing:0.062em}

.email2
	{margin:5px 0 5px 0}

#contact
	{display:block;}

li.first
	{margin-left:0 !important}
	
.tinynav { 
   display: inline;
   padding:0;
   font-size: 1.5em;
   background:#a5bbc9;
   width:50%;
   border:none;
   color:#fff
 }



/*Display 'show menu' link*/
	.show-menu {
		display:inline-block;
		background:background: rgba(255,175,75,1);
		background: -moz-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(208,98,18,1)));
		background: -webkit-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
		background: -o-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
		background: -ms-radial-gradient(center, ellipse cover, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
		background: radial-gradient(ellipse at center, rgba(255,175,75,1) 0%, rgba(208,98,18,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#d06212', GradientType=1 );
		text-align:middle;
		text-transform:uppercase;
		letter-spacing:0.062em;
		text-align:left;
		padding:2% 0 2% 5%;
		color:#FFF;
		margin:2% 0;
		width:50%;}

nav ul
	{display:none;
	width:50%;
	padding:0;
	margin:0}
	
nav li
	{display:block;
	border:none;
	margin:2% 0;
	padding:0;
	width:100%}

nav p
	{color:#333333;
	text-align:center;
	margin:0;
	padding:0}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 16px solid #FFF;
	float:right;
	margin:2% 5% 0 0}

@media screen and (max-width: 850px) {	
.homebutton
	{width:100%;
	margin:auto;}

@media screen and (max-width: 600px) {
	.storyteller
		{display:block;
		border-left:none !important;
		padding-left:0}
	
	.homebutton, .creative-logos, .strategy-logos
		{width:100%}
	
	.homebutton-original
		{width:100%}

@media screen and (max-width: 485px) {	
	img.about_pic
	{padding:0 3% 0 0}
	
	.home span.home-content
		{bottom:0.5em}
}