*{
  /*border: 1px solid red;*/
}
@font-face {
    font-family: 'hoefler';
    src: url('../fonts/hoefler.eot');
    src: url('../fonts/hoefler.woff') format('woff'),
         url('../fonts/hoefler.ttf') format('truetype'),
         url('../fonts/hoefler.svg') format('svg');
}

@font-face {
    font-family: 'BellGothic';
    src: url('../fonts/bell_gothic.eot');
    src: url('../fonts/bell_gothic.woff') format('woff'),
         url('../fonts/bell_gothic.ttf') format('truetype'),
         url('../fonts/bell_gothic.svg') format('svg');
}

body{
  color: #333;
  font-family: 'BellGothic';
  font-size: 18px;
  padding-top: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{
  color: #03C4AA;
  text-decoration: none;
}
a:hover{
  color: #444;
}
h1{
  color: black;
  font-family: 'hoefler';
  letter-spacing: 0px;
}
h1 a{
  color: #333;
}
h1 a:hover{
  color: #333;
}
h2{
  color: black;
  font-family: 'hoefler';
  font-size: 24px;
}
#about h2.lg{
  padding:15px 0 15px 0;
  margin-bottom: 0px;
  font-size: 38px;
  line-height: 45px;
}
h2.lg{
  padding:0 0 0px 0;
  margin-bottom: 0px;
  font-size: 36px;
  line-height: 43px;
}
h3{
  font-size: 14px;
}
h4{
  color: black;
  font-size: 23px;
}
p{
  font-size: 19px;
  line-height: 29px;
  color: #333;
  margin:0px 0 30px;
}
a.underline{
  text-decoration: underline;
}
a:hover{
  text-decoration: none;
}
hr{
  border-top: 1px solid #ddd;
}
#main-nav{
  padding-top: 8px;
  position: fixed;
  background: white;
  margin-top: -1px;
  height: 50px;
  top: 0;
  z-index: 2;
}
nav{
  color: #333;
  font-family: 'BellGothic';
  font-size: 14px;
}
nav li{
  margin: 10px 0 0 0;
}
nav .list-inline{
  float: right;
  padding-right: 10px;
  z-index: 3;
}
nav .list-inline-home{
  float:none;
  padding-right: 10px;
  margin-left:5px;
}
#home_name{
  margin: 7px 0 0 10px;
  display: inline-block;
}
nav a{
  text-decoration: none;
  color: #444;
  padding: 2px 10px 2px 10px;
}
nav a:hover{
  text-decoration: underline;
}
.active{
  text-decoration: underline;
}
#name-nav{
  font-size: 15px;
  margin-top: -3px;
  color: #444;
}
.pull-quote{
  font-family: 'hoefler';
  font-size: 28px;
  padding: 20px 0 70px 0;
}
.case-studies{
  background: white;
  margin: 0;
  text-align: center;
  z-index: 3;
}
.case-studies li{
  border-top: 1px solid #e1e1e1;
  height: 300px;
}
.case-studies a:hover{
  color: #888;
}
.case-studies img{
  padding-bottom: 10px;
}
.case-studies a{
  color: #333;
  text-decoration: none;
  display: inline-block;
}
.case-studies p{
  font-size: 18px;
}
#ph_emoji{
  width: 50px;
  margin-top: -10px;
}
#logo_product_hunt{
  display: block;
  padding: 50px 0 3px 0;
  width: 60px;
  margin: 0 auto;
}
#logo_bw_courier{
  width: 180px;
}
#logo_courier_spacer{
 padding-top: 100px;
}
#logo_courier{
  padding-top: 150px;
  width: 280px;
}
#logo_qallout{
  padding-top: 135px;
  width: 220px;
}
#logo_bw_qallout{
  width: 180px;
}
#logo_qallout_spacer{
  padding-top: 85px;
}
#logo_jobcrush{
  padding-top: 155px;
  width: 250px;
}
#logo_bw_jobcrush{
  width: 200px;
}
#logo_jobcrush_spacer{
  padding-top: 110px;
}
#logo_simple-circle{
  padding-top: 85px;
  width: 180px;
}
#logo_simple-circle_spacer{
  padding-top: 90px;
}
#logo_bw_cw{
  width: 190px;
}
#logo_cw{
  padding-top: 105px;
  width: 240px;
}
#logo_cw_spacer{
  padding-top: 75px;
}
#logo_bw_puppystream{
  width: 280px;
}
#logo_puppystream{
  padding-top: 157px;
  width: 320px;
}
#logo_puppystream_spacer{
  padding-top: 100px;
}
#logo_bw_simplecircle{
  width: 320px;
}
#logo_simplecircle_spacer{
  padding-top: 75px;
}
.contact-nav{
  font-family: 'lucida grande';
  font-size: 13px;
  padding-top: 33px;
  margin: 0;
}
.contact-nav li{
  margin: 0;
  margin-right: 15px;
}
.list-inline li{
  padding: 0;
}

.hoefler{
  font-family: 'hoefler';
}
.col-centered{
  float: none;
  margin: 0 auto;
}
.quotes-list li{
  font-family: Courier;
  background: #00E6C7;
  padding: 10px;
  margin-bottom: 10px;
}
.project-info{
  text-align: center;
}
.clients{
  background: black;
  margin-top: -19px;
}
.design-process{
  background: #FE00EF;
  background: #092551;
  background: white;
  margin-top: -19px;
}
.poster{
  padding: 30px 10px 0 10px;
}
.poster--scaled{
  height: auto;
  max-width: 100%;
  min-width: 100%;
}
.poster__cw{
  background: #E9514E;
  /*margin-top: 50px;*/
}
.poster__courier{
  background: #F5F5F5;
  padding-top: 40px;
  margin-bottom: 1px;
}
.poster__grey{
  background: #F5F5F5;
  padding-top: 0px;
}
.poster__pink{
  background: #FF3279;
  padding-top: 0px;
}
.poster__jobcrush{
  background: #00D5F5;
}
.poster__puppystream{
  background: #FFEC68;
}
.poster__sitecontrol{
  background: #E7E7E7;
}
.poster__design_process{
  background: #FFFE68;
  padding: 0;
}

.sitecontrol-desc{
  color: #999;
}
#compass{
  width: 100px;
}
#art-circle{
  width: 50px;
  height: 50px;
  /*background: #099275;*/
  border-radius: 50%;
  position: absolute;
  top: -88px;
  left: 160px;
}
#art-line{
  width: 86%;
  height: 4px;
  position: absolute;
  right: -99px;
  top: 203px;
  right: -199px;
  z-index: -1;
  -webkit-transform: rotate(348deg);
}
.accent-blue{
  background-color: #94F1FF;
}
.accent-courier{
  color: #01de70;
}
.accent-qallout{
  color: #ec2125;
}
.accent-puppystream{
  color: #ff2a00;
}
#hero{
  margin-top: 140px;
  margin-bottom: 19%;
  position: fixed;
  margin-left: 50%;
  z-index: -1;
}
#hero-shim{
  margin-left: -232px;
}
#hero-spacer{
  height: 500px;
}
#name{
  font-size: 21px;
  margin-bottom: 15px;
}
#tagline{
  font-size: 70px;
  padding: 0 !important;
  margin: 0 !important;
}
#sub-tagline{
  font-size: 24px;
}
.full-width{
  width: 100%;
}
#bio{
  margin-top: 80px;
}
#tweets li{
  padding-bottom: 25px;
  /*font-size: 19px;*/
}
#case-study-hero{
  margin-top: 20px;
  margin-bottom: 30px;
}
#hero-left{
  border-right: 1px solid #ddd;
  height: 400px;
}
#hero-right{
  padding: 120px 30px 0 50px;
}
.grey-panel{
  background-color: #F5F5F5;
}
#hero-video{
 background: url(../images/ps_stickers.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#qallout-bkgrnd{
 background: url(../images/qallout_step_repeat.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
footer a{
  font-size: 14px;
  color: #444;
}
footer a:hover{
  text-decoration: underline;
  color: #444;
}
footer{
  margin-bottom: 40px;
}
footer .list-inline li{
  padding: 0 20px 0 20px;
}
.white-bkgrnd{
  background: white;
}
.ptn,.pvn,.pan{padding-top:0px}
.pts,.pvs,.pas{padding-top:5px}
.ptm,.pvm,.pam{padding-top:10px}
.ptl,.pvl,.pal{padding-top:20px}
.ptxl,.pvxl,.paxl{padding-top:40px}
.prn,.phn,.pan{padding-right:0px}
.prs,.phs,.pas{padding-right:5px}
.prm,.phm,.pam{padding-right:10px}
.prl,.phl,.pal{padding-right:20px}
.prxl,.phxl,.paxl{padding-right:40px}
.pbn,.pvn,.pan{padding-bottom:0px}
.pbs,.pvs,.pas{padding-bottom:5px}
.pbm,.pvm,.pam{padding-bottom:10px}
.pbl,.pvl,.pal{padding-bottom:20px}
.pbxl,.pvxl,.paxl{padding-bottom:40px}
.pln,.phn,.pan{padding-left:0px}
.plxs,.phxs,.paxs{padding-left:3px}
.pls,.phs,.pas{padding-left:5px}
.plm,.phm,.pam{padding-left:10px}
.pll,.phl,.pal{padding-left:20px}
.plxl,.phxl,.paxl{padding-left:40px}
.mtn,.mvn,.man{margin-top:0px}
.mts,.mvs,.mas{margin-top:5px}
.mtm,.mvm,.mam{margin-top:10px}
.mtl,.mvl,.mal{margin-top:20px}
.mtxl,.mvxl,.maxl{margin-top:40px}
.mrn,.mhn,.man{margin-right:0px}
.mrs,.mhs,.mas{margin-right:5px}
.mrm,.mhm,.mam{margin-right:10px}
.mrl,.mhl,.mal{margin-right:20px}
.mrxl,.mhxl,.maxl{margin-right:40px}
.mbn,.mvn,.man{margin-bottom:0px}
.mbs,.mvs,.mas{margin-bottom:5px}
.mbm,.mvm,.mam{margin-bottom:10px}
.mbl,.mvl,.mal{margin-bottom:20px}
.mbxl,.mvxl,.maxl{margin-bottom:40px}
.mln,.mhn,.man{margin-left:0px}
.mls,.mhs,.mas{margin-left:5px}
.mlm,.mhm,.mam{margin-left:10px}
.mll,.mhl,.mal{margin-left:20px}
.mlxl,.mhxl,.maxl{margin-left:40px}