/* MEDIA QUERIES */
/* Responsify Defaults */
@media screen and (max-width: 2560px) {
#container {max-width: 105em; margin-left: 7em;}
}

@media screen and (max-width: 1366px) {
  #container {margin-left: 4em;}
  header h1 { font-size: 2em; margin: 1em;}
}
@media screen and (max-width: 1280px)  {
  header h1 { font-size: 2em; margin: 2.5em 1em 1em 1em;}
}

@media screen and (max-width: 1152px) {
  #container {margin-left: 3.5em;}
  header h1 { font-size: 1.8em; margin: 2em 1em 1em 1em;}
  section img { margin: 0px 1em 1.5em 0.5em;}
  nav ul li { margin: 5px;  width: 100%;}
  nav a:hover {border-bottom: 1px solid transparent;}
  .vcard  {font-size: 0.8em;} h3 {font-size: 0.8em;} h2 {font-size: 1em;}
  p {width: 100%; padding-left: 1em;}
}


@media screen and (max-width: 1024px) {
  header h1 { font-size: 1.6em; margin: 2em 1.2em 1em 1em; }
  section img { margin: 0px 1em 1.5em 0.5em;}
  nav ul li { margin: 5px;  width: 100%;}
  nav a:hover {border-bottom: 1px solid transparent;}
  .vcard  {font-size: 0.5em;} h3 {font-size: 0.8em;} h2 {font-size: 1em;}
  p {width: 100%; padding-left: 1em;}
}

 @media screen and (max-width: 800px) {
  #container {margin-left: 2em;}
  header { background-image: none; }
  header h1 { text-align: center; font-size: 3em; }
  section img { margin: 0px 1em 1.5em 0.5em; }
  nav:nth-child(2) {margin: -2em 0 -10em 0; }
  nav:nth-child(3) {margin-bottom: -4em;}
  nav:nth-child(4) {margin-bottom: -4em;}
  nav ul li  { margin: 0px; text-align: center; width: 100%; }
  nav a:hover { border-bottom: 1px solid transparent; }
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11,
  .span12, .aside { width: 100%; clear: both; margin-left: 0px; padding-left: 0px; }
  p { width: 80%; padding-left: 2em; }
  .vcard { font-size: 0.7em; }
  h3 { font-size: 1em; }
 footer.span12 {padding: 0; margin: 0;}
 footer section.span4, h2 p {font-size: 1em;
  text-align: center;}
 footer h2 {text-align: center;}
}


@media screen and (max-width: 768px) {
  header {background-image: none;}
  h1 { text-align: center; }
  section img { margin: 0px 1em 1.5em 0.5em;  }
  nav ul li { margin: 0px; text-align: center; width: 100%; }
  nav a:hover { border-bottom: 1px solid transparent; }
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .aside
   { width: 100%; clear: both; margin-left: 0px; padding-left: 0px; }
   p {width: 80%; padding-left: 2em;}
   .vcard {font-size: 0.7em;}
}


@media screen and (max-width: 600px) {
  header {background-image: none;}
  h1 { text-align: center; }
  section img { margin: 0px 1em 1.5em 0.5em; }
  nav ul li { margin: 0px; text-align: center; width: 100%; }
  nav a:hover { border-bottom: 1px solid transparent; }
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .aside
   { width: 100%; clear: both; margin-left: 0px; padding-left: 0px; }
   p {width: 80%; padding-left: 2em;}
   .vcard {font-size: 0.7em;}
   h3 {font-size: 1em;}
   }

@media screen and (max-width: 480px) {
  #container {margin-left: 1.5em;}
  nav ul li {
    width: 100%;
    margin: 0 0 5px 0;
    h3 {font-size: 1em;}
    div.vcard {float: left;}
  }
  nav a {
    margin: 0;
    padding: 14px 0 14px 0;
    border-left: none;
  }
  nav a:hover {
    border-bottom: 1px solid transparent;
  }
  h1 {
    text-align: center;
  }
  .span1,
  .span2,
  .span3,
  .span4,
  .span5,
  .span6,
  .span7,
  .span8,
  .span9,
  .span10,
  .span11,
  .span12,
  .aside {
    width: 100%;
    clear: both;
    margin-left: 0;
    padding-left: 0;
  }
}


@media screen and (max-width: 320px) {
  #container {margin-left: 0.8em;}
  p {width: 90%; padding-left: 0.4em;}
 }

/* Custom Breakpoints */
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  nav ul li {
    width: 100%;
    margin: 0 0 5px 0;
  }
  nav a {
    margin: 0;
    padding: 14px 0 14px 0;
    border-left: none;
  }
  nav a:hover {
    border-bottom: 1px solid transparent;
  }
  .span1,
  .span2,
  .span3,
  .span4,
  .span5,
  .span6,
  .span7,
  .span8,
  .span9,
  .span10,
  .span11,
  .span12,
  .aside {
    width: 100%;
    clear: both;
    margin-left: 0;
    padding-left: 0;
  }

}
/* Custom Breakpoints */
@media screen and (max-width: px) {

}
.cf {
  zoom: 1;
}
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}