/*
$unit: percentage(69 / 960);
$gutter: percentage(12 / 960);

$unit: percentage(58 / 960);
$gutter: percentage(24 / 960);

$unit: percentage(77 / 1056);
$gutter: percentage(12 / 1056);

$unit: percentage(66 / 1056);
$gutter: percentage(24 / 1056);

*/
/*! layout elements
--------------------------------*/
#branding {
  background-image: url(../images/pgp-header.jpg);
  height: 0; }

#buckets {
  text-align: center;
  font-size: 87.5%; }
  #buckets .bucket .bthumb {
    position: relative;
    margin-bottom: 1em; }
    #buckets .bucket .bthumb img {
      position: relative;
      width: 100%;
      height: auto; }
  #buckets .bucket h3 {
    font-size: 120%;
    line-height: 2;
    border-bottom: 1px solid #e7eff3;
    padding-bottom: .3em; }
  #buckets .bucket .excerpt p:last-child {
    margin-bottom: 0; }

@media screen and (max-width: 700px) {
  #branding {
    background-image: url(../images/pgp-header-mobile.jpg);
    padding-bottom: 40%; }

  #buckets .bucket {
    margin-bottom: 1em;
    background: #e7eff3; }
    #buckets .bucket .bthumb {
      background: #166189;
      height: 0;
      padding-bottom: 35%;
      overflow: hidden;
      margin-bottom: .5em; }
      #buckets .bucket .bthumb a.thumblink {
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }
      #buckets .bucket .bthumb img {
        opacity: 0.3;
        position: relative;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      #buckets .bucket .bthumb:hover img {
        opacity: 0.1; }
    #buckets .bucket h3 {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 100%;
      text-align: center;
      border: 0; }
      #buckets .bucket h3 a {
        color: #fff; }
    #buckets .bucket .excerpt {
      padding: 1em; } }
@media screen and (min-width: 701px) {
  #branding {
    padding-bottom: 30%; }

  #main {
    margin-top: -2em;
    padding-top: 0; }

  h1.hometitle {
    font-size: 250%;
    line-height: 1;
    margin-top: -1.2em;
    text-align: center;
    color: white;
    -webkit-text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    -moz-text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); }

  #primary {
    background: #e7eff3;
    border: 3px solid white;
    width: 74.3299%;
    float: none;
    margin: 0 auto 2em;
    padding: 1em;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
    #primary #content {
      margin: 0; }
      #primary #content p:last-child {
        margin-bottom: 0; }

  #buckets {
    margin: 0; }
    #buckets .bucket {
      width: 31.54639%;
      display: inline-block;
      float: left;
      padding: 2.68041%; }
      #buckets .bucket:nth-of-type(2) {
        background: #5fc3f2;
        width: 36.90722%;
        color: #fff; }
        #buckets .bucket:nth-of-type(2) h3 a {
          color: #fff; } }