/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(skeleton.css);
html,
body {
  font-size: 16px;
  letter-spacing: normal;
  font-family: "futura-pt", Helvetica, sans-serif;
  font-weight: 400;
  color: #f5f4f4;
  background-color: #1a1a1a; }

/* ------------------ TYPOGRAPHY -------------------- */
h1 {
  font-size: 4em;
  margin-bottom: 0; }

h2 {
  font-size: 2em; }

h3 {
  font-size: 1.4em; }

h4 {
  font-size: 1.3em; }

.small {
  font-size: .75em; }

.light {
  font-weight: 300; }

.bold {
  font-weight: 700; }

.italic {
  font-weight: 400;
  font-style: italic; }

.orange {
  color: #f5a227; }

.grey {
  color: #f5f4f4; }

p, li {
  margin-bottom: 15px;
  line-height: 1.3em;
  font-size: 1em; }

a {
  color: #f5a227;
  font-weight: 700;
  text-decoration: none; }
  a :hover {
    opacity: 0.5;
    color: #f5a227; }

.button {
  background-color: #f5a227;
  color: white; }

.button:hover {
  color: white; }

/* ------------------ END TYPOGRAPHY -------------------- */
/* ------------------ HEADER/FOOTER -------------------- */
header,
footer {
  width: 100%;
  clear: both;
  height: auto; }

header {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 20px;
  clear: both;
  width: 100%;
  height: auto;
  overflow: auto; }
  header #header-left {
    width: 40%;
    float: left;
    padding-left: 70px; }
    header #header-left a {
      color: #f5f4f4; }
    header #header-left a:hover {
      opacity: 1 !important;
      color: inherit; }
      header #header-left a:hover .light {
        color: #f5f4f4;
        opacity: 1; }
      header #header-left a:hover .orange {
        color: #f5a227;
        opacity: 1; }
  header #header-right {
    width: 40%;
    float: right;
    padding-right: 70px;
    text-align: right;
    padding-top: 48px; }
    header #header-right ul li:after {
      content: ' | '; }
    header #header-right ul li:last-child:after {
      content: ''; }
    header #header-right .nav li a {
      color: #f5f4f4;
      text-decoration: none; }
    header #header-right .nav li a:hover {
      color: #f5a227; }
    header #header-right .nav li a.active {
      color: #f5a227; }
  header h2 {
    font-size: 3em; }
  header h3 {
    letter-spacing: .009em; }
  header ul {
    padding-top: 20px; }
    header ul li {
      display: inline-block; }

footer {
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 100px;
  text-align: center;
  color: #a1a1a1; }

.icon a {
  padding: 10px; }
  .icon a img {
    width: 30px;
    height: auto; }

/* ------------------ END HEADER/FOOTER -------------------- */
#container {
  width: 80%;
  margin: 0 auto; }
  #container #tagline,
  #container #archive {
    width: 100%;
    text-align: center; }
  #container #iframe {
    text-align: center;
    margin: 0 auto; }

section ul li {
  margin-top: 20px;
  height: auto;
  overflow: auto;
  width: 100%;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f5f4f4; }
  section ul li h3, section ul li h4 {
    text-align: left; }
  section ul li img {
    width: 30%;
    float: left;
    height: auto;
    margin-right: 20px;
    margin-bottom: 15px; }
  section ul li a {
    text-decoration: none; }
    section ul li a p {
      color: black; }
    section ul li a h3, section ul li a h4 {
      font-weight: 300; }
section ul li:last-child {
  border-bottom: none; }
section h1, section h2, section h3, section h4 {
  text-align: center;
  margin-bottom: 15px; }
section h2 {
  margin: 0;
  padding: 0;
  padding-top: 20px; }

.no-margin {
  margin-bottom: 0; }

#copyright .button {
  margin-top: 30px; }

#tagline {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 1.25em; }

#what-is {
  margin-bottom: 30px; }
  #what-is h3 {
    margin-bottom: 30px; }

#crew {
  margin-bottom: 60px; }
  #crew ul {
    margin-top: 30px;
    margin-left: 30px; }
    #crew ul li {
      list-style: circle;
      list-style-position: inside; }

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  iframe {
    width: 100%;
    height: auto; }

  header #header-left,
  header #header-right {
    width: 100%;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    float: none; }
  header #header-left h1, header #header-left h3 {
    margin-bottom: 0px; }
  header #header-right {
    padding: 0; }
    header #header-right nav {
      padding-left: 20px;
      margin-bottom: 0; }
      header #header-right nav ul {
        padding-top: 0; }

  section ul li h3, section ul li h4 {
    text-align: center; }
  section ul li img {
    width: 100%;
    height: auto;
    margin-bottom: 15px; } }

/*# sourceMappingURL=screen.css.map */