@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

.clear {
  clear: both; }

html {
  font-size: 62.5%;
  background: #000;
  color: #fff;
  height: 100%; }

body {
  font-size: 1.5em;
  padding: 10px 30px;
  height: 100%;
  max-width: 1150px;
  margin: 0 auto; }

a {
  text-decoration: none;
  color: #fff; }
  a:hover {
    text-decoration: underline; }

header {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 50px; }
  header .logo {
    width: 30%;
    float: left; }
    header .logo span:first-child {
      font-size: 3.3rem; }
      header .logo span:first-child:after {
        content: '';
        margin-bottom: -6px;
        margin-right: 10px;
        display: inline-block; }
    header .logo span:last-child {
      font-size: 1.7rem;
      letter-spacing: 2px;
      font-weight: 300; }
  header .menu {
    width: 70%;
    float: left;
    text-align: right;
    margin-top: 21px;
    letter-spacing: 3px; }
    header .menu ul {
      list-style: none;
      font-size: 13px; }
      header .menu ul li {
        display: inline-block;
        margin: 0 10px;
        text-transform: uppercase; }
        header .menu ul li a {
          font-family: 'Times New Roman',Times,serif; }
  header .fb {
    position: absolute;
    width: 10px;
    top: 20px;
    right: 50px; }

section.content {
  font-weight: 300; }
  section.content p {
    margin: 10px 0; }
  section.content figure {
    width: 31%;
    max-height: 180px;
    float: left;
    margin-right: 20px;
    overflow: hidden; }
    section.content figure img {
      opacity: 1;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    section.content figure:hover img {
      opacity: 0.5;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    section.content figure:hover a {
      text-decoration: none; }
      section.content figure:hover a figcaption {
        opacity: 1;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out; }
    section.content figure:nth-child(3n) {
      margin-right: 0; }
    section.content figure figcaption {
      position: relative;
      top: -100px;
      text-align: center;
      font-size: 1.9rem;
      opacity: 0;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
  section.content a.back {
    padding: 10px 0;
    display: block; }
    section.content a.back:hover {
      text-decoration: none; }

footer {
  font-size: 13px;
  padding: 20px 0; }

@media screen and (min-width: 768px) and (max-width: 1150px) {
  section.content figure {
    width: 31.9266%;
    margin-right: 5px; }
    section.content figure:nth-child(3n) {
      margin-right: 5px; } }
@media screen and (max-width: 768px) {
  section.content figure {
    width: 45%;
    margin-right: 5px;
    text-align: center; }
    section.content figure:nth-child(3n) {
      margin-right: 5px; } }
@media screen and (min-width: 361px) and (max-width: 768px) {
  header .logo {
    width: 100%;
    float: none;
    text-align: center; }
    header .logo span:first-child {
      font-size: 2.8rem; }
      header .logo span:first-child:after {
        content: '';
        margin-bottom: -6px;
        margin-right: 10px;
        display: inline-block; }
    header .logo span:last-child {
      font-size: 1.7rem;
      letter-spacing: 2px;
      font-weight: 100; }
  header .menu {
    width: 100%;
    margin-top: 20px;
    float: none;
    text-align: center; }
    header .menu ul {
      list-style: none; }
      header .menu ul li {
        display: inline-block;
        margin: 0 10px;
        text-transform: uppercase; } }
@media screen and (max-width: 360px) {
  header .logo {
    width: 100%;
    float: none;
    text-align: center; }
    header .logo span:first-child {
      font-size: 2.8rem; }
      header .logo span:first-child:after {
        content: '';
        margin-bottom: -6px;
        margin-right: 10px;
        display: inline-block; }
    header .logo span:last-child {
      font-size: 1.7rem;
      letter-spacing: 2px;
      font-weight: 100; }
  header .menu {
    width: 100%;
    margin-top: 20px;
    float: none;
    text-align: center; }
    header .menu ul {
      list-style: none; }
      header .menu ul li {
        display: inline-block;
        margin: 0 10px;
        text-transform: uppercase; }

  section.content figure {
    width: 100%;
    display: inline-block;
    margin-right: 0px; }
    section.content figure img {
      opacity: 1;
      width: 100%;
      height: auto;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    section.content figure:hover img {
      opacity: 0.5;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    section.content figure:hover a {
      text-decoration: none; }
      section.content figure:hover a figcaption {
        opacity: 1;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out; }
    section.content figure:nth-child(3n) {
      margin-right: 0; }
    section.content figure figcaption {
      position: relative;
      top: -75px;
      text-align: center;
      font-size: 1.9rem;
      opacity: 0;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
  section.content a.back {
    padding: 10px 0;
    display: block; }
    section.content a.back:hover {
      text-decoration: none; } }