/***** base ********************/
body, html {
  margin: 0;
  font-size: 16px;
  font-family: 'Helvetica-Light', 'Helvetica';
  font-weight: 300;
  /*height: 100%;*/
}

a {
  color: #000;
  cursor: pointer;
}

a.image {
  display: block;
}

.wrapper {
  position: relative;
  /*max-height: 100%;
  overflow: auto;*/
}

header .fixed, .content, footer {
  width: 60em;
  margin: 0 auto;
}

/***** header ******************/
header {
  width: 100%;
  position: fixed;
  top: 6.25em;
  left: 3.5em;
  z-index: 10;
}

header img {
  width: 5em;
  float: left;
}

header .info {
  padding-top: 0.65rem;
  padding-left: 0.5em;
  float: left;
  font-size: 1.125em;
  font-family: 'Helvetica';
  font-weight: normal;
  letter-spacing: 0.05em;
}

/***** content *****************/
.content.single {
  display: none;
  text-align: center;
}

.content.single .block {
  text-align: center;
}

/***** columns *****************/
.column {
  width: 29.5em;
}

.column.left {
  float: left;
}

.column.left .block {
  text-align: right;
}

.column.right {
  float: right;
}

.column.right .block {
  text-align: left;
}


/***** blocks ******************/
.block {
  padding-top: 1em;
}

.block figure {
  margin: 0;
  display: inline-block;
  position: relative;
}

.block figure a {
  -webkit-transition: opacity 0.2s, -webkit-transform 2s;
  transition: opacity 0.2s, transform 2s;
  background-color: white;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}

.block figure a:hover, .block figure.revealed a {
  opacity: 0.8;
}

.block figcaption {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  font-size: 0.75em;
  line-height: 1.5em;
  text-align: left;
}

.block img, .block iframe {
  max-width: 100%;
}

.block.full {
  clear: both;
}

.block.full.center {
  text-align: center;
}

.block.full.right {
  text-align: right;
}

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/***** utilities ****************/
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/***** footer ******************/
footer {
  clear: both;
  text-align: center;
  padding-bottom: 2em;
  padding-top: 5em;
}

footer small {
  font-size: 0.75em;
  display: inline-block;
  padding-top: 3rem;
}

/***** media queries ***********/
@media screen  and ( max-width: 64em ) {
  header .fixed, .content, footer {
    width: 100%;
    margin: auto auto;
  }

  .content.single {
    display: block;
    margin: 1em;
    width: auto;
  }

  .content.double {
    display: none;
  }

  .block img, .block iframe {
    min-width: 100%;
  }
}


@media screen and ( max-width: 40em ) {
  header img, header .info {
    float: none;
    display: block;
  }

  header .info {
    padding-left: 0;
  }
}

@media screen and ( max-width: 30em ) {
  header {
    left: 10%;
    width: 80%;
  }

  header .fixed {
    width: auto;
  }
}