html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  color: #555B5F;
  background: #56C1FC;
  font-size: 15px;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.333333333;
}
a {
  color: #009CFF;
}
strong {
  font-weight: 700;
}
.sprite {
  background: url('/public/images/structure/frank_sprite.png');
}
#logo {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 100;
  width: 180px;
  height: 180px;
  background: url('/public/images/structure/frank_sprite.png');
  background-position: -70px -10px;
}
nav {
  position: fixed;
  top: 0;
  z-index: 10;
  right: 320px;
  width: 60px;
  height: 100%;
  background: #009CFF;
}
nav .btn {
  display: block;
  position: relative;
  width: 60px;
  height: 59px;
  border-bottom: 1px solid #3CB1FC;
  cursor: pointer;
}
nav .btn .bg,
nav .btn .arrow {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
nav .btn:hover .bg {
  background: #1276CB;
  -webkit-transition: background 300ms;
  transition: background 300ms;
}
nav #next .arrow {
  z-index: 5;
  background: url('/public/images/structure/frank_sprite.png');
  background-position: 0 -60px;
}
nav #prev .arrow {
  z-index: 5;
  background: url('/public/images/structure/frank_sprite.png');
  background-position: 0 0;
}
aside {
  position: relative;
  z-index: 10;
  float: right;
  width: 320px;
}
aside .bg {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: #F8F7F7;
}
aside .info {
  position: relative;
  z-index: 10;
  float: left;
  width: 320px;
}
aside .info header {
  padding: 0 30px;
  margin: 0;
  width: 100%;
  height: 59px;
  border-bottom: 1px solid #DDDCDE;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
aside .info header .title {
  margin: 0;
  font-size: .8em;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 60px;
  font-family: 'Brandon Grot W01 Medium', sans-serif;
}
aside .info header .title span {
  color: #009CFF;
  font-family: 'Brandon Grot W01 Bold', sans-serif;
}
aside .info article {
  padding: 56px 30px 60px;
  border-bottom: 1px solid #DDDCDE;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
aside .info article h1 {
  margin: 0 0 1em 0;
  color: #009CFF;
  font-size: 1.2em;
  font-family: 'Brandon Grot W01 Medium', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: normal;
}
aside .info article h1 strong {
  font-family: 'Brandon Grot W01 Bold', sans-serif;
  font-weight: normal;
}
aside .info article .intro {
  font-size: 1.2em;
  font-weight: 300;
}
aside .info article ul {
  margin: 0 0 0 15px;
  padding: 0;
  list-style: square;
}
aside .info .contact {
  padding: 60px 30px;
}
aside .info .contact strong {
  font-family: 'Brandon Grot W01 Bold', sans-serif;
  font-weight: normal;
  font-size: 1.2em;
}
aside .info .contact .icon {
  float: left;
  width: 50px;
  height: 50px;
  background: url('/public/images/structure/frank_sprite.png');
  background-position: -10px -120px;
}
aside .info .contact .data {
  float: left;
}
#photography {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: url('/public/images/structure/ajax-loader.gif') center center no-repeat;
}
#photography #slider {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  opacity: 0;
  filter: alpha(opacity=0);
}
#photography #slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#photography #slider li figure {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-transition: top 750ms ease-in-out;
  transition: top 750ms ease-in-out;
}
#photography #slider li img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 700ms;
  transition: opacity 700ms;
}
#photography #slider li.new.next figure {
  top: 100%;
}
#photography #slider li.new.prev figure {
  top: -100%;
}
#photography #slider li.show figure {
  top: 0;
}
#photography #slider li.hide.next figure {
  top: -100%;
}
#photography #slider li.hide.prev figure {
  top: 100%;
}
.clear {
  display: block;
  clear: both;
}
@media screen and (max-width: 500px) {
  #logo {
    opacity: 0;
    -webkit-transition: opacity 400ms;
    transition: opacity 400ms;
  }
}
@media screen and (max-width: 380px) {
  body {
    background: #F8F7F7;
  }
  #photography {
    display: none;
  }
  nav {
    display: none;
  }
  aside {
    width: 100%;
  }
}