/*
|----------------------------------------------------------------------------------------|
| SUPERAWESOME CSS FRAMEWORK - EMBEDDABLE STYLE SHEET                             | v1.1 |
|----------------------------------------------------------------------------------------|
| AUTHOR: Dragan Babic | http://sprawsm.com/                                             |
|----------------------------------------------------------------------------------------|
| DATE MODIFIED: Sat, 24 Oct 09                                                          |
|----------------------------------------------------------------------------------------|
| ABOUT:                                                                                 |
|----------------------------------------------------------------------------------------|
| Use this style sheet for all your site's styles and to override existing ones set by   |
| the framework if you wish to upgrade to a newer version at some point. This is the     |
| style sheet you should embed in your HTML page.                                        |
|----------------------------------------------------------------------------------------|
*/

@import "saf.typography.css";
@import "saf.layout.css";
@import "saf.extras.css";





/* !Generals
------------------------------------------------------------------------------------------ */

html { 
  color: #000;
  font-family: "Cambria", "Palatino", "Palatino Linotype", "Baskerville", "Hoefler Text", "Georgia", "Times", "Times New Roman", serif;
}
  body{}
  
  html > body {
    font-size: 18px;
  }

a:link,
a:visited {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  padding-bottom: .15em;
  }

a:focus,
a:hover {
  border-bottom: none;
  }





/* !Global Float Clearing
------------------------------------------------------------------------------------------ */
.content:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; }





/* !Misc elements
------------------------------------------------------------------------------------------ */

a.cta {
  padding: .5em 1em;
  font-size: 2em;
  line-height: 1;
  color: #fff;
  background: #000;
  text-align: center; text-decoration: none;
  border: none;
  border-radius:      1.25em;
  -moz-border-radius: 1.25em;
  -o-border-radius:   1.25em;
}

/* Remove padding from CTAs that are columns */

a.cta.col {
  padding-left: 0;
  padding-right: 0;
}
  
  a.cta em,
  a.cta strong {
    display: block;
  }
  
  a.cta em {
    margin-bottom: .5em;
    font-size: .35em; font-style: normal;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: #999;
  }





/* !Header
------------------------------------------------------------------------------------------ */

body > header {
  height: 128px;
  position: relative;
}

  body > header a:link,
 body > header a:visited {
    border: none;
  }
  
  body > header .logo {
    position: absolute; top: 0; left: 419px;
    display: block;
    width: 128px;
    height: 128px;
  }
    
    body > header .logo img {
      display: block;
    }
  
  body > header .tagline{
    padding-top: 35px;
    text-align: right;
    font-size: .65em; font-weight: bold; 
    line-height: 28px;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
    
    body > header .tagline em {
      display: block;
      font-style: normal;
      color: #999;
    }
  
  body > header.safGrid dl.col{
    padding-top: 35px;
    margin-left: 184px;
    font-size: .65em; font-weight: bold; 
    line-height: 28px;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
    
    body > header dt {
      color: #999;
    }





/* !Footer
------------------------------------------------------------------------------------------ */

footer.pageFooter {
  margin-top:    4em;
  padding-bottom: 8em;
  font-size: .65em;
  color: #999;
  background: url(../images/design/footer-logo.png) 50% 0 no-repeat;
  text-align: left;
}

.home      footer.pageFooter,
.contact   footer.pageFooter,
.services  footer.pageFooter,
.jobs      footer.pageFooter,
.bottomCTA footer.pageFooter {
  background-image: url(../images/design/footer-logo-invert.png);
}

.home     footer.pageFooter,
.contact  footer.pageFooter,
.services footer.pageFooter,
.jobs     footer.pageFooter {
  color: #777;
}
  
  .home     footer.pageFooter a,
  .contact  footer.pageFooter a,
  .services footer.pageFooter a,
  .jobs     footer.pageFooter a{
    color: #999;
    border-color: #343434;
  }
  
  .home     footer.pageFooter a:focus,
  .home     footer.pageFooter a:hover,
  .contact  footer.pageFooter a:focus,
  .contact  footer.pageFooter a:hover,
  .services footer.pageFooter a:focus,
  .services footer.pageFooter a:hover,
  .jobs     footer.pageFooter a:focus,
  .jobs     footer.pageFooter a:hover{
    color: #ccc;
  }
  
  footer.pageFooter p:first-child {
    text-align: right;
  }
    
    footer.pageFooter a {
      color: #999;
    }

.CDAbanner {
  display: block;
  padding: 0;
  position: absolute; top: 28px; right: 0;
  width: 69px;
  height: 164px;
  border: none !important;
}
  
  .CDAbanner img {
    display: block;
  }





/* !Portfolio pieces
------------------------------------------------------------------------------------------ */

ul.pieces {}
  
  ul.pieces li {
    margin: 3em 28px;
    overflow: hidden;
    background-position: 50% 50%; background-repeat: no-repeat;
  }
  
  ul.pieces li:last-child {
    margin-bottom: 0;
  }
  
  ul.pieces li.piece-healthclub {
    height: 489px;
    background-image: url(../images/work/healthclub/lander.png);
  }
  
  ul.pieces li.piece-freebirdee {
    height: 523px;
    background-image: url(../images/work/freebirdee/lander.png);
  }
  
  ul.pieces li.piece-plakatt {
    height: 433px;
    background-image: url(../images/work/plakatt/lander.png);
  }
  
  ul.pieces li.piece-thedeadline {
    height: 368px;
    background-image: url(../images/work/thedeadline/lander.png);
  }
    
    ul.pieces .cta {
      display: block;
      background: rgba(0,0,0,.85);
      box-shadow:      0 4px 7px rgba(0,0,0,.75);
      -moz-box-shadow: 0 4px 7px rgba(0,0,0,.75);
      -o-box-shadow:   0 4px 7px rgba(0,0,0,.75);
    }
    
    ul.pieces .cta:focus,
    ul.pieces .cta:hover {
      background: #000;
    }





/* !Portfolio gallery (less important and older stuff)
------------------------------------------------------------------------------------------ */

div.gallery {
  width: 964px;
  margin: 5em auto;
  position: relative;
  font-size: .75em;
}
  
  /* Project listing */
  
  .gallery ul {
    margin-top:    0;
    margin-bottom: 0;
  }
  
  .gallery li.col {
    margin-bottom: 28px;
  }
    
    .gallery ul li > a {
      display: block;
      border: none;
    }
    
    .gallery ul li > a.active,
    .gallery ul li > a:focus,
    .gallery ul li > a:hover {
      margin: -14px;
      padding: 14px;
      background: #000;
      color: #fff;
    }
      
      .gallery ul li > a p {
        margin: .5em 0 0 0;
      }
  
  /* Project details */
  
  .detail {
    width: 964px;
    height: 610px;
    position: absolute; top: 0; left: 0;
    background: #000;
    color: #efefef;
    box-shadow: 0 4px 21px rgba(0,0,0,.25);
  }
    
    .detail a {
      color: #fff;
      border-color: #343434;
    }
    
    .detail .close {
      position: absolute; top: 0; right: 0;
      z-index: 101;
      display: block;
      width: 28px;
      height: 28px;
      background: #fff url(../images/design/icon-close.png) 0 0 no-repeat;
      overflow: hidden;
      text-indent: -9999px;
      color: #000;
      border: none;
    }
      
      .detail .images {
        width: 964px;
        height: 610px;
        float: left;
        overflow: hidden;
        position: relative;
      }
      
        .images .viewport {
          float: left;
          width: 705px;
          height: 610px;
          overflow: hidden;
          position: relative;
        }
        
          .images .overview {
            list-style: none;
            position: absolute; left: 0; top: 0;
            padding: 0;
            margin: 0;
          }
          
            .images .overview li {
              float: left;
              width: 705px;
            }
            
          .images .buttons {
            position: absolute; bottom: 28px;
            padding: 4px;
            border: none;
            font-size: .75em;
            line-height: 1;
            color: #999;
            text-transform: uppercase;
            letter-spacing: .15em;
          }
          
          .images .buttons:focus,
          .images .buttons:hover {
            background: #fff;
            color: #000;
          }
          
          .buttons.prev {
            left: 733px;
          }
          
          .buttons.next {
            right: 28px;
          }
          
          .buttons.disable {
            visibility: hidden;
          }
    
    .detail article {
      width: 206px;
      position: absolute; bottom: 56px; left: 733px; right: 28px;
      z-index: 99;
    }

/* Bottom of the page action */

.action {
  margin: 0 0 3em 0;
  font-size: 1.5em;
  clear: both;
  text-align: center;
}





/* !Individual portfolio pieces
------------------------------------------------------------------------------------------ */

.work {}
  
/* Common elements */

  .intro {
    font-size: 1.25em;
    text-align: center;
  }
  
.quote {}
  
  .quote blockquote {
    font-size: 2em; font-weight: 900;
    line-height: 1.15;
  }
    
    .quote blockquote p {
      margin: 0;
    }
    
    .quote .cited {
      margin-top:    1em;
      margin-bottom: 0;
    }
    
      .quote cite {
        font-size: .55em; font-style: normal;
        text-transform: uppercase;
        letter-spacing: .15em;
        color: #999;
      }

.lessons {
  border-top: 1px solid #dfdfdf;
}
  
  .lessons h2 {
    margin-bottom: 1em;
  }

.visit {
  margin: 0 0 5em 0;
  font-size: .85em;
  text-transform: uppercase; 
  letter-spacing: .15em;
  text-align: center;
}
  
  .visit p {
    margin: 0;
  }
    
    .visit a {
      padding: .25em;
      border-top: 1px solid #ccc;
    }
    
    .visit a:focus,
    .visit a:hover {
      border-top:    1px solid #000;
      border-bottom: 1px solid #000;
    }

.bottomCTA {
  margin-top: 3em;
  padding-top: 4em;
  overflow: hidden;
  background: #000;
  color: #efefef;
}
  
  .bottomCTA a:link,
  .bottomCTA a:visited {
    color: #fff;
    border-color: #343434;
  }

/* End common elements */
  
/* Plakatt */

.project-plakatt .intro {
  text-align: center;
}

.project-plakatt .mvp {
  margin: 4em 0;
}

.project-plakatt .branding {
  margin-top:    7em;
  margin-bottom: 3em;
}
  
  .project-plakatt .branding h2 {
    margin: 0 0 1em 0;
    text-align: left;
  }
  
  .project-plakatt .branding img {
    display: block;
    margin-top: -2em;
    box-shadow:      0 0 7px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 7px rgba(0,0,0,.5);
    -o-box-shadow:   0 0 7px rgba(0,0,0,.5);
  }

.project-plakatt .interface h2 {
  margin-bottom: 0;
  font-size: 1.5em;
  text-align: left;
}

.project-plakatt .whatWasWrong li {
  margin: 0 106px 1em 106px;
  padding: 1em;
  background: #efefef;
  position: relative;
  border-radius:      4px;
  -moz-border-radius: 4px;
  -o-border-radius:   4px;
}
  
  .project-plakatt .whatWasWrong li strong {
    position: absolute; top: .5em; left: -1em;
    font-size: 2em; font-weight: 900;
  }

.project-plakatt .mobile {
  margin-top: 5em; 
  margin-bottom: 5em;
  font-size: .85em;
}
  
  .project-plakatt .mobile p {
    margin: 4em 0 0 0;
  }

.project-plakatt .seedCamp {
  margin-top: 5em;
}
  
  .project-plakatt .seedCamp h2 {
    margin: 0;
    font-family: inherit; font-size: 1.25em;
    text-align: left;
  }
  
.project-plakatt .lessons {
  margin-top: 2.5em;
}

/* Health Club */

.project-healthclub .quote {
  background: #000;
  color: #efefef;
}
  
  .project-healthclub .quote .safGrid {
    padding: 56px 0;
    background: url(../images/work/healthclub/henry.jpg) 100% 100% no-repeat;
  }
    
    .project-healthclub .quote blockquote {
      font-size: 1.75em;
    }
  
  .project-healthclub .quote a {
    color: #fff;
    border-color: #343434;
  }

.project-healthclub .intro {
  margin-top: 3em;
  text-align: left;
}

.project-healthclub .branding {
  margin-top:    4em;
  margin-bottom: 4em;
}
  
  .project-healthclub .branding h2 {
    margin: 0;
    text-align: left;
  }

.project-healthclub .interface {
  margin-bottom: 4em;
  padding: 614px 0 0 0;
  background: url(../images/work/healthclub/website.jpg) 50% 0 no-repeat;
}
  
  .project-healthclub .slogans {
    padding-bottom: 240px;
    background: url(../images/work/healthclub/slogans.png) 50% 100% no-repeat;
  }
    
    .project-healthclub .siteDesc {
      font-size: .85em;
    }

.project-healthclub .collaboration {
  margin-bottom: 4em;
  font-size: .85em;
}

/* FreeBirdee */

.project-freebirdee .intro {
  padding-top: 682px;
  background: url(../images/work/freebirdee/intro.jpg) 50% 0 no-repeat;
}
  
  .project-freebirdee .intro .content {
    padding: 1px 0;
    background: #000;
    color: #efefef;
  }
    
    .project-freebirdee .intro .cs-10 {
      margin-top: 2em;
      font-weight: 900;
    }
    
    .project-freebirdee .intro .cs-8 {
      margin-top:    2em;
      margin-bottom: 3em;
      font-size: .85em;
    }
      
      .project-freebirdee .intro a {
        color: #fff;
        border-color: #343434;
      }

.project-freebirdee .branding {
  margin-top:    4em;
  margin-bottom: 4em;
}
  
  .project-freebirdee .branding h2 {
    margin: 0;
    text-align: left;
  }
  
    .project-freebirdee .branding figure img {
      display: block;
      margin-top: -1em;
    }

.project-freebirdee .interface {
  padding-bottom: 323px;
  background: url(../images/work/freebirdee/interface.jpg) 50% 100% no-repeat;
}
  
  .project-freebirdee .interface h2 {
    margin-bottom: 0;
    text-align: left;
  }

.project-freebirdee .visit {
  clear: both;
  padding-top: 4em;
}

.project-freebirdee .bottomCTA {
  margin-top: 0;
}

/* TheDeadline */

.project-thedeadline .branding {
  margin-top: 4em;
  background: url(../images/work/thedeadline/branding.png) 50% 0 no-repeat;
}
  
  .project-thedeadline .branding h2 {
    margin: 0;
    text-align: left;
  }

.project-thedeadline .webApp {
  margin: 4em 0;
  padding: 3em 0;
  background: #f2ecff;
}
  
  .project-thedeadline .webApp .intro {
    padding-bottom: 500px;
    text-align: center;
    background: url(../images/work/thedeadline/webapp.png) 50% 100% no-repeat;
  }
  
  .project-thedeadline .lessons {
    border: none;
  }
    
    .project-thedeadline .lessons h2 {
      margin: 2em 0 0 0;
      font-size: 1em;
      text-align: left;
    }
  
  .project-thedeadline .filters h2 {
    margin: 0;
    text-align: left;
  }

.project-thedeadline .marketingSite ol {
  margin-bottom: 4em;
}

  .project-thedeadline .marketingSite li {
    margin: 0 106px 1em 106px;
    padding: 1em;
    background: #efefef;
    position: relative;
    border-radius:      4px;
    -moz-border-radius: 4px;
    -o-border-radius:   4px;
  }
    
    .project-thedeadline .marketingSite li strong {
      position: absolute; top: .5em; left: -1em;
      font-size: 2em; font-weight: 900;
    }

.project-thedeadline .mobile {
  margin-top:    4em;
  margin-bottom: 4em;
}
  
  .project-thedeadline .mobile h2 {
    text-align: left;
    margin-bottom: 0;
  }





/* !Contact page
------------------------------------------------------------------------------------------ */

section.contactForm {}
  
  .contactInfo {
    position: relative;
    padding-bottom: 5em;
  }
    
    .contactInfo .contactCTA {
      padding-bottom: 1em;
      text-align: center;
    }
      
      .contactCTA .cta {
        padding-left: 2em;
        padding-right: 2em;
        font-weight: bold;
      }
      
      .contactCTA .cta:focus,
      .contactCTA .cta:hover {
        box-shadow: 0 0 21px rgb(255,246,0);
      }
    
    .request {
      text-align: center;
      overflow: hidden;
    }
      
      .request strong {
      }
    
    .contactInfo footer {
      position: absolute; bottom: 0; left: 0; right: 0;
      font-size: .65em;
      color: #999;
      text-transform: uppercase;
      letter-spacing: .1em;
      text-align: center;
    }

section.information {
  margin-top: 4em;
  padding: 1em 0;
  background: #000;
  overflow: hidden;
  color: #efefef;
}
  
  section.information h1 {
    color: #fff;
  }
  
  article.general {}
    
    article.general ul {
      margin: 0;
      padding-bottom: 3em;
      font-size: .85em;
      overflow: hidden;
    }
      
      article.general li,
      article.general li h3 {
        text-align: center;
      }
        
        article.general a:link,
        article.general a:visited {
          color: #fff;
          border-color: #999;
        }
    
    article.general footer {
      font-size: .65em;
      color: #999;
      text-transform: uppercase;
      letter-spacing: .1em;
      text-align: center;
    }
  
  article.process {
    margin-top: 4em;
    padding: 1px 28px;
    background: #efefef;
    color: #000;
  }
    
    article.process header {
      margin-left: -28px;
      margin-right: -28px;
      border-bottom: 1px solid #000;
      overflow: hidden;
    }
    
      article.process h1 {
        color: #000;
      }
    
    article.process ol {
      margin: 3em 0 1em 0;
      overflow: hidden;
    }
      
      article.process li {
        float: left;
        width: 284px;
        margin: 0 0 28px 28px;
        font-size: .85em;
      }
    
    article.process .extra {
      text-align: center;
      font-size: 1.25em;
      margin-bottom: 2em;
    }
      
      article.process .extra p {
        margin: 0 0 1em 0;
      }






/* !About page
------------------------------------------------------------------------------------------ */

.about {
  background-image: url(../images/design/dragan-stefan.jpg);
  background-position: 50% 0;
  background-repeat: no-repeat;
}

.profile {
  font-size: .85em;
}
  
  .profile.draganBabic {
    text-align: right;
  }
    
    .profile.draganBabic h3 {
      text-align: right;
    }
    
    .profile p {
      margin-top: -1em;
    }
    
    .profile p.role,
    .profile ul {
      margin-top: -1em;
      font-size: .75em;
      text-transform: uppercase;
      letter-spacing: .15em;
      color: #999;
    }
      
      .profile li {
        margin-bottom: 1em;
      }
      
      .profile p.role em {
        font-style: normal;
      }
  
  .banner {
    padding-top: 1em;
    clear: both;
    text-align: center;
  }

.services {
  margin-top: 4em;
  padding-top: 1em;
  background: #000;
  color: #efefef;
}
  
  .services a:link,
  .services a:visited {
    color: #fff;
    border-color: #343434;
  }
  
  .services ul {
    margin: 0;
    font-size: .85em;
    overflow: hidden;
  }
    
    .services li,
    .services li h3 {
      text-align: center;
    }
      
      .services li p{
        margin-bottom: 0;
      }
  
  .services .action {
    margin: 2.5em 0;
  }
  
  .services .partners {
    font-size: .55em;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .15em;
    text-align: center;
  }





/* !Home page
------------------------------------------------------------------------------------------ */

.home body > header {
  position: relative; 
  z-index: 999;
}

.showcase {
  border-bottom: 1px solid #000;
  padding-top: 128px;
  margin-top: -128px;
  position: relative;
}
  
  .workCTA:link,
  .workCTA:visited {
    display: block;
    width: 128px;
    height: 93px;
    padding-top: 35px;
    position: absolute; bottom: -64px; left: 50%;
    margin-left: -64px;
    background: rgba(255,246,0,.85);
    border-radius: 64px;
    font-size: 32px; font-weight: 100; font-style: italic;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    border: none;
  }
  
  .workCTA:focus,
  .workCTA:hover {
    background: rgb(255,246,0);
  }

/* Specific showcase design */

.showcase {
  background: url(../images/showcase/redesign/promo.jpg) 50% 0 no-repeat;
  height: 544px;
  position: relative;
}
  
  .promoText {
    width: 568px;
    margin: 180px auto 0 auto;
    text-align: center;
    line-height: 1.25;
  }
    
    .promoText a {
      display: block;
      padding: 28px 0;
      background: rgba(255,255,255,.9);
      border: none;
    }
    
    .promoText a:focus,
    .promoText a:hover {
      background: #fff;
    }
    
      .promoText strong {
        display: block;
        font-size: 3em; font-weight: 900;
        letter-spacing: -.05em;
      }
      
      .promoText span {
        font-size: 1.5em; font-weight: 100;
      }

.home .intro {
  background: #000;
  color: #efefef;
  font-size: 1em;
}
  
  .home .intro a {
    color: #fff;
    border-color: #343434;
  }
  
  .home .intro h1 {
    padding-top: 28px;
    font-family: inherit; font-size: .65em; font-weight: normal;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #efefef;
    text-align: left;
  }
    
    .home .intro h1 span.first {
      text-align: right;
    }

  .home .intro ul {
    margin: 4em 0;
    overflow: hidden;
  }
    
    .home .intro li {
      font-size: .85em;
      text-align: center;
    }
      
      .home .intro li h3 {
        margin: 0 0 .25em 0;
        text-align: center;
      }
      
      .home .intro li p {
        margin: 0;
      }
  
  .home .action {
    margin: 1em 0 2.5em 0;
  }




/* Error 404 */

.error .message {
  margin-top: 3em;
}