/* 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" /> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/*********************
MEDIA QUERIES
*********************/
/*********************
TOOLS
*********************/
.group {
  zoom: 1; }
  .group:before, .group:after {
    content: "";
    display: table; }
  .group:after {
    clear: both; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.image-replacement {
  display: block;
  position: relative;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

/*********************
TRANSITION
*********************/
/*********************
TYPOGRAPHY & ICONS
*********************/
html {
  background: #fff;
  font: 12px/150% "schoolbook-web", Times New Roman, serif;
  -webkit-font-smoothing: antialiased;
  font-smooth: always; }

.grid, .page {
  padding: 2% 1% 0; }
  @media (min-width: 1000px) {
    .grid, .page {
      padding: 1% 0.5% 0; } }

#header {
  color: #fff;
  background: black;
  height: 70px;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10; }

#header h1 {
  margin: 0 0 0 4%;
  float: left;
  font-weight: normal;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 14;
  width: 144px; }
  #header h1 svg {
    height: 12px;
    width: auto;
    margin-top: 29px; }
  #header h1 img {
    width: 100%;
    height: auto;
    margin-top: 26px; }

#header ul#nav {
  font-family: 'Helvetica Neue',Arial,helvetica;
  margin: 0;
  padding: 0 0 20px 4%;
  top: 60px;
  float: none;
  position: absolute;
  width: 100%;
  background-color: #000;
  display: none;
  z-index: 13; }
  @media (min-width: 700px) {
    #header ul#nav {
      margin: 27px 4% 0 0;
      padding: 0;
      float: right;
      position: relative;
      width: auto;
      top: auto;
      display: block !important; } }
  #header ul#nav ul {
    padding-left: 3%;
    display: block; }
    @media (min-width: 700px) {
      #header ul#nav ul {
        padding: 12px 0 0 0;
        position: absolute;
        background: #000;
        display: none;
        width: 190px;
        left: -15px; } }
    @media (min-width: 700px) {
      #header ul#nav ul li {
        float: none;
        margin-bottom: 10px;
        margin-left: 15px; } }
  #header ul#nav li {
    float: none;
    list-style: none;
    margin-left: 0;
    position: relative;
    display: block; }
    @media (min-width: 700px) {
      #header ul#nav li {
        float: left;
        margin-left: 30px; } }
    #header ul#nav li.dd:hover ul {
      display: block; }
    #header ul#nav li a {
      text-decoration: none;
      font-size: 12px;
      color: #808080;
      display: block;
      width: 100%;
      padding: 8px 15px;
      -webkit-transition: color 0.2s linear; }
      @media (min-width: 700px) {
        #header ul#nav li a {
          width: auto;
          padding: 0; } }
      #header ul#nav li a:hover, #header ul#nav li a.active {
        color: #fff; }

@media (min-width: 1000px) {
  #project #header h1 {
    margin-left: 9%; } }
@media (min-width: 1200px) {
  #project #header h1 {
    margin-left: 14%; } }

@media (min-width: 1000px) {
  #project #header ul#nav {
    margin-right: 10%; } }
@media (min-width: 1200px) {
  #project #header ul#nav {
    margin-right: 15%; } }

#menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 26px 26px 21px;
  display: block;
  z-index: 15; }
  @media (min-width: 700px) {
    #menu-btn {
      display: none; } }

.page img, .page .text {
  width: 98%;
  margin: 0 1% 2%;
  height: auto; }
  @media (min-width: 1000px) {
    .page img, .page .text {
      margin: 0 0.5% 1%;
      width: 99%; } }
.page .text {
  background: #f05a22;
  -webkit-animation: rainbow-brite 25s infinite;
  /* Safari 4+ */
  -moz-animation: rainbow-brite 25s infinite;
  /* Fx 5+ */
  -o-animation: rainbow-brite 25s infinite;
  /* Opera 12+ */
  animation: rainbow-brite 25s infinite;
  /* IE 10+, Fx 29+ */
  color: #fff;
  font-size: 28px;
  padding: 7%;
  line-height: 125%; }
  @media (min-width: 700px) {
    .page .text {
      padding: 7%; } }
  @media (min-width: 1000px) {
    .page .text {
      padding: 6%; } }
  @media (min-width: 1200px) {
    .page .text {
      padding: 4%; } }
  .page .text p {
    margin-bottom: 1rem; }
    .page .text p br:not(.persistent) {
      display: none; }
      @media (min-width: 700px) {
        .page .text p br:not(.persistent) {
          display: block; } }
    .page .text p a {
      color: #fff;
      opacity: 1;
      text-decoration: underline; }
      .page .text p a:hover {
        text-decoration: none;
        opacity: 0.5; }

@-webkit-keyframes rainbow-brite {
  0% {
    background-color: #f0aa20; }
  10% {
    background-color: #ef8a2c; }
  20% {
    background-color: #f05a22; }
  30% {
    background-color: #f5002d; }
  40% {
    background-color: #df1463; }
  50% {
    background-color: #893f98; }
  60% {
    background-color: #4953a5; }
  70% {
    background-color: #3993de; }
  80% {
    background-color: #00bfc4; }
  90% {
    background-color: #62bb46; }
  100% {
    background-color: #f0aa20; } }
@-moz-keyframes rainbow-brite {
  0% {
    background-color: #f0aa20; }
  10% {
    background-color: #ef8a2c; }
  20% {
    background-color: #f05a22; }
  30% {
    background-color: #f5002d; }
  40% {
    background-color: #df1463; }
  50% {
    background-color: #893f98; }
  60% {
    background-color: #4953a5; }
  70% {
    background-color: #3993de; }
  80% {
    background-color: #00bfc4; }
  90% {
    background-color: #62bb46; }
  100% {
    background-color: #f0aa20; } }
@-o-keyframes rainbow-brite {
  0% {
    background-color: #f0aa20; }
  10% {
    background-color: #ef8a2c; }
  20% {
    background-color: #f05a22; }
  30% {
    background-color: #f5002d; }
  40% {
    background-color: #df1463; }
  50% {
    background-color: #893f98; }
  60% {
    background-color: #4953a5; }
  70% {
    background-color: #3993de; }
  80% {
    background-color: #00bfc4; }
  90% {
    background-color: #62bb46; }
  100% {
    background-color: #f0aa20; } }
@keyframes rainbow-brite {
  0% {
    background-color: #f0aa20; }
  10% {
    background-color: #ef8a2c; }
  20% {
    background-color: #f05a22; }
  30% {
    background-color: #f5002d; }
  40% {
    background-color: #df1463; }
  50% {
    background-color: #893f98; }
  60% {
    background-color: #4953a5; }
  70% {
    background-color: #3993de; }
  80% {
    background-color: #00bfc4; }
  90% {
    background-color: #62bb46; }
  100% {
    background-color: #f0aa20; } }
.lazy-hidden {
  opacity: 0; }

.lazy-loaded {
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1; }

ul.social li {
  float: left;
  margin-right: 1rem; }
  ul.social li a {
    opacity: 1; }
    ul.social li a:hover {
      opacity: 0.5; }

.item {
  display: block;
  float: left;
  width: 48%;
  margin: 0 1% 2%; }
  .item .image {
    width: 100%;
    padding-top: 133.333333334%;
    position: relative; }
    .item .image a:hover img {
      opacity: 0.85; }
    .item .image a {
      overflow: hidden;
      display: block;
      position: absolute;
      top: 0;
      left: 0; }
      .item .image a img {
        height: 100%;
        width: 100%; }
      .item .image a.horizontal {
        width: 100%;
        height: 47.9%; }
        @media (min-width: 700px) {
          .item .image a.horizontal {
            height: 47%; } }
        @media (min-width: 1000px) {
          .item .image a.horizontal {
            height: 48%; } }
        .item .image a.horizontal img {
          width: 100%;
          height: auto; }
      .item .image a.vertical {
        height: 47.9%;
        width: 47.9%; }
        .item .image a.vertical img {
          height: 100%;
          width: auto; }
        @media (min-width: 700px) {
          .item .image a.vertical {
            width: 46.75%;
            height: 46.75%; } }
        @media (min-width: 1000px) {
          .item .image a.vertical {
            width: 48%;
            height: 48%; } }
      .item .image a.top {
        top: 0; }
      .item .image a.left {
        left: 0; }
      .item .image a.right {
        right: 0;
        left: auto; }
      .item .image a.bot {
        bottom: 0;
        top: auto; }
  @media (min-width: 700px) {
    .item {
      margin: 0 1% 2%;
      width: 31.33333333%; } }
  @media (min-width: 1000px) {
    .item {
      margin: 0 0.5% 1%;
      width: 24%; } }
  @media (min-width: 1400px) {
    .item {
      width: 19%; } }

.project {
  color: #808083;
  padding: 3rem 5% 0; }
  @media (min-width: 1000px) {
    .project {
      padding: 3rem 10% 0; } }
  @media (min-width: 1200px) {
    .project {
      padding: 3rem 15% 0; } }
  .project h2 {
    font-size: 28px;
    margin-bottom: 2rem; }
  .project p {
    font-size: 25px;
    line-height: 125%;
    margin-bottom: 2rem; }
    .project p a {
      color: #808083; }
      .project p a:hover {
        text-decoration: none;
        color: #000; }
  .project img {
    max-width: 100%;
    height: auto;
    margin-bottom: 2rem; }
  .project .video {
    width: 100%;
    margin-bottom: 2rem; }

.copyright {
  text-align: center;
  margin-bottom: 2rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 10px; }