/* #General
================================================== */
  body {
      font-family: 'Merriweather', serif;
      font-family: 'Source Sans Pro', sans-serif;
      margin: 0;
      overflow-x: hidden;
    }

blockquote {font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: rgb(148, 54, 73);
    border-left: 2px solid rgb(148, 54, 73);
    padding: 10px 30px;
    width: 75%;}

/*  blockquote, blockquote p { font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.5; margin: 5px 0; color: rgb(148, 54, 73); font-style: italic; }*/
/*  blockquote { margin: 0 0 20px; padding: 9px 20px 0 20px;*/}
  blockquote cite { display: block; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; color: rgb(148, 54, 73); }
  blockquote cite:before { content: "\2014 \0020"; }

  hr {
    border: 1px solid rgb(148, 54, 73);
  }

  a {
    color: rgb(148, 54, 73); /* red */
    text-decoration: none;
  }

  .paddingTopBottom10 {
    padding-top: 10px;
  }

  .marginTop25 {
    margin-top: 25px; 
  }

  .marginTop30 {
    margin-top: 35px; 
  }

  .marginTop5percent {
    margin-top: 5%;
  }

  ul {
    padding-left: 0;
  }

  .float-right {
    float: right
  }

/* #Typography
================================================== */
  h1.sectionHeading {
    font-family: 'Merriweather', serif;
    margin: 0;
    font-size: 48px;
    text-align: center;
  }
  h1.alt-heading {
    font-family: 'Merriweather', serif;
    margin: 0;
    font-size: 48px;
  }
  h1.work-heading {
    font-family: 'Merriweather', serif;
    margin: 0;
    font-size: 4rem;
  }
  h2.work-heading {
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    font-family: 'Merriweather', serif;
    margin: 10px 0;
    padding: 15px 0;
    line-height: 35px;
    font-size: 20px;
  }
  h2.alt-heading {
    font-family: 'Merriweather', serif;
    font-size: 36px;
  }
  a.clear_underline {
    text-decoration: none;
    color: rgb(23, 14, 32); /* dark purple */
    transition-duration: 0.4s;
  }
  a.clear_underline:hover {
    color: rgb(148, 54, 73); /* red */
  }

  a.small {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.5;
/*    color: rgb(232, 229, 236); /* white */
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    letter-spacing: 0.7px;
  }
  a.small:hover {
    color: rgb(148, 54, 73); /* red */
  }

  p {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 5px 0px 20px 0px;
    font-size: 18px;
    line-height: 1.5;
  }
  dl.body, ul.body, p.body {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 5px 0px 15px 0px;
    font-size: 18px;
    line-height: 1.5;
  }

  .small-caps, a.small-caps {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgb(232, 229, 236); /* white */
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.7px;
  }
  a.small-caps:hover {
    color: rgb(148, 54, 73);
  }
  .small-caps {
    text-decoration: underline;
  }
  .xsmall {
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    font-size: 8px;
    line-height: 2.5;
    display: inline-block;
  }

  ul li {
    list-style: none;
    line-height: 1.5;
  }

/* #Colors
================================================== */
  .dark-purple {
    background-color: rgb(23, 14, 32);
  }
  .red {
    background-color: rgb(148, 54, 73);
  }
  .white {
    background-color: rgb(232, 229, 236);
  }

  .dark-purple-font {
    color: rgb(23, 14, 32);
  }
  .red-light-font {
    color: rgb(155, 89, 101);
  }
  .white-font {
    color: rgb(232, 229, 236);
  }

/* #Button
================================================== */
  .work-button-dark-purple, .work-button-red {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 20px 0px 0px 0px;
    width: 220px;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid #fff;
    border-radius: 4px;
    background-color: rgba(0,0,0,0);
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    color: rgb(232, 229, 236);
  }
  .work-button-dark-purple:hover, .work-button-dark-purple:focus {
    background-color: rgb(232, 229, 236);
    color: rgb(23, 14, 32);
  }
  .work-button-red:hover, .work-button-red:focus {
    background-color: rgb(232, 229, 236);
    color: rgb(148, 54, 73);
  }

  .color-button {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 70px 0px 0px 0px;
    width: 280px;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    background-color: rgb(148, 54, 73);
    border: 1px solid rgba(148, 54, 73, 0);
    border-radius: 4px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    color: rgb(232, 229, 236);
  }
  .color-button:hover, .color-button:focus {
    background-color: rgba(148, 54, 73, 0);
    border: 1px solid rgb(148, 54, 73);
    color: rgb(148, 54, 73);
  }

  .color-button-white {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 70px 0px 0px 0px;
    width: 280px;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    background-color: rgb(148, 54, 73);
    border: 1px solid rgba(148, 54, 73, 0);
    border-radius: 4px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    color: rgb(232, 229, 236);
  }
  .color-button-white:hover, .color-button-white:focus {
    background-color: rgba(232, 229, 236, 0);
    border: 1px solid rgb(232, 229, 236);
    color: rgb(232, 229, 236);
  }

/* #Navigation and Footer
================================================== */
  .navigation {
    background-color: rgb(23,14,32);
    min-height: 50px;
    padding: 20px 0px 0px 0px;
    border: none;
  }
  nav {
    padding: 0% 0% 0% 8%;
    display: inline-block;
  }
  nav.right {
    display: inline-block;
    padding: 0 0 0 60px;
  }
  nav.right > a.small-caps {
    margin: 0 30px 0 0;
  }
  nav.right > a.small-caps:last-child {
    margin: 0;
  }
  ul.footer {
    list-style: none;
  }
  footer {
    bottom: 0;
  }
/* #Pane
================================================== */
  #intro {
    background: url(/images/Hills.svg) no-repeat center 70px fixed; 
    background-color: rgb(23,14,32);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #about {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 0%,
        rgba(23, 14, 32, 1) 45%,
        rgba(23, 14, 32, 0) 65%),
      url(/images/aboutme.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #aboutmepage {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 0%,
        rgba(23, 14, 32, 1) 40%,
        rgba(23, 14, 32, 0) 85%),
      url(/images/aboutmepage.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  .description {
    padding: 8%;
    max-width: 510px;
  }

  .contentSection {
    min-height: 350px;
    padding: 30px 0px 0px 0px;
  }

  .internalPadding {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 3%;
    padding-left: 3%;
  }
  
  .center {
    justify-content: center;
    text-align: center;
    margin: 0 auto;
  }

  .center-v {
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    padding: 20% 0;
  }

  .work-featured {
    font-family: sans-serif;
    padding-bottom: 5vh;
    transition: cubic-bezier(.19,1,.22,1) 3s;
  }

  .work-description {
    padding: 20% 4% 20% 25%;
  }

  .work-image-mobile {
    margin-top: 10%;
    margin-left: 25%;
    box-shadow: 0 30px 60px rgba(34,34,34,.5);
  }

  .work-image-desktop {
    margin-top: 10%;
    margin-left: 25%;
    box-shadow: 0 30px 60px rgba(34,34,34,.5);
  }

/* #Capital One portfolio
================================================== */
  #capitalone-portfolio {
    background:
      linear-gradient(to top, 
        rgba(23, 14, 32, 0.5) 0%,
        rgba(23, 14, 32, 1) 99%),
      url(/images/portfolio/posts/capitalone_blueprint.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-ia {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 47%,
        rgba(23, 14, 32, 0) 47%),
      url(/images/portfolio/posts/capitalone_appsitemap.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-platform {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 47%,
        rgba(23, 14, 32, 0) 47%),
      url(/images/portfolio/posts/capitalone_platform.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-brand {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 47%,
        rgba(23, 14, 32, 0) 47%),
      url(/images/portfolio/posts/capitalone_brandstyle.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-accessibility {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 47%,
        rgba(23, 14, 32, 0) 47%),
      url(/images/portfolio/posts/capitalone_accessibility.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-wireframe {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 47%,
        rgba(23, 14, 32, 0) 47%),
      url(/images/portfolio/posts/capitalone_wireframe.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-ideation {
    background:
      linear-gradient(to top,
        rgba(23, 14, 32, 0.6) 0%,
        rgba(23, 14, 32, 0.6) 100%),
      url(/images/portfolio/posts/capitalone_ideation.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-hifi {
    background:
      linear-gradient(to top,
        rgba(23, 14, 32, 0.6) 0%,
        rgba(23, 14, 32, 0.6) 100%),
      url(/images/portfolio/posts/capitalone_androidhifi.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

  #capitalone-relations {
    background:
      linear-gradient(to right,
        rgba(23, 14, 32, 1) 47%,
        rgba(23, 14, 32, 0) 47%),
      url(/images/portfolio/posts/capitalone_relations.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }

/* #Post page specific
================================================== */
  #post-bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  }
  
  .max1080 {
    max-width: 960px;
    margin: 0 auto;
  }

/* #Media Queries
================================================== */
  @media (max-width: 48em) {
    h1.work-heading {
      font-family: 'Merriweather', serif;
      margin: 0;
      font-size: 58px;
    }
    h2.work-heading {
      font-family: 'Merriweather', serif;
      margin: 0;
      font-size: 40px;
    }
    h1.alt-heading {
    font-family: 'Merriweather', serif;
    margin: 0;
    font-size: 32px;
    }
    .work-description {
      padding: 4%
    }
    .work-image-desktop {
      margin-left: 0%;
    }
    .work-image-mobile {
      display: block;
      margin: auto;
    }
    .img-container {
      padding: 4%;
    }
    .work-button-dark-purple, .work-button-red, .color-button, .color-button-white {
      width: 100%;
    }
    nav.left {
      display: inline-block;
      margin: 0 30%;
    }
    nav.right {
      display: inline-block;
      margin: 0 auto;
    }
    nav.right > a.small-caps {
      margin: 0 5px 0 0;
    }
    nav.legal {
      float: right;
      margin: 10px 0;
    }
    #about, #aboutmepage, #capitalone-wireframe, #capitalone-ia, #capitalone-platform, #capitalone-brand, #capitalone-accessibility, #capitalone-relations {
      background: none;
      background-color: rgb(23, 14, 32);
    }
  }