body {
  margin: 0; }

.row {
  display: block;
  clear: both; }

.project-meta {
  margin: 20px 10px; }

#column-main .project-meta {
  margin: 28px 10px 20px -20px; }

.square-wrap {
  margin: 10px;
  width: 100%;
  padding-top: 10vw; }

.square-wrap.about-us {
  max-width: 1400px; }

.square {
  float: left;
  position: relative;
  width: 31%;
  padding-bottom: 31%;
  /* = width for a 1:1 aspect ratio */
  margin: 0.5%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* you change this to "contain" if you don't want the images to be cropped */
  border: 1px dotted #000000;
  z-index: 10; }

.project-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  border-bottom: none; }

.square-inner-text {
  opacity: 0;
  z-index: 10;
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 50% 0;
  font-size: 14px;
  font-family: "Atlas Grotesk Web", sans-serif;
  background: #fff none repeat scroll 0 0; }

.square:hover {
  background-color: #FFFFFF !important; }

div#column-sidebar {
  width: calc(33% - 40px);
  max-width: 280px;
  display: inline-block;
  vertical-align: top;
  margin-left: 20px; }

div#column-main img, div#column-sidebar img {
  max-width: 100%; }

div#column-main {
  display: inline-block;
  width: 66%;
  max-width: 1000px; }

@media all and (min-width: 1390px) {
  .nav-link a {
    font-size: 135px; }

  .square {
    float: left;
    position: relative;
    width: 450px;
    padding-bottom: 450px;
    margin: 0.5%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* you change this to "contain" if you don't want the images to be cropped */
    border: 1px dotted #000000; } }
@media only screen and (max-width: 490px) {
  div#column-main {
    display: block;
    width: 100%; }

  div#sidebar-images {
    display: none; }

  div#column-sidebar {
    display: block;
    width: 100%; } }
@media only screen and (max-width: 490px) and (orientation: portrait) {
  div#column-main {
    display: block;
    width: 100%; }

  div#sidebar-images {
    display: none; }

  div#column-sidebar {
    display: block;
    width: 100%; } }
.animated {
  animation-duration: 1s;
  animation-fill-mode: both; }

.animated.fadeInUp {
  animation-duration: 2s; }

.animated.fadeIn {
  animation-duration: 2s;
  animation-timing-function: ease-out; }

.animated.infinite {
  animation-iteration-count: infinite; }

.animated.hinge {
  animation-duration: 2s; }

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0); }
  to {
    opacity: 1;
    transform: none; } }
.fadeInUp {
  animation-name: fadeInUp; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.fadeIn {
  animation-name: fadeIn; }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@font-face {
  font-family: 'Noir';
  src: url("/static/Noir_regular.woff") format("woff"); }
@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url("/static/AtlasGrotesk-Light-Web.eot");
  src: url("/static/AtlasGrotesk-Light-Web.eot?#iefix") format("embedded-opentype"), url("/static/AtlasGrotesk-Light-Web.woff2") format("woff2"), url("/static/AtlasGrotesk-Light-Web.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal; }
body {
  font-family: "Atlas Grotesk Web", sans-serif; }

a {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px dotted #000000; }

#header-wrap {
  position: fixed;
  top: 0;
  background: #ffffff;
  z-index: 100;
  padding-right: 10%;
  width: 100%; }

#header {
  font-family: "Atlas Grotesk Web", sans-serif;
  background: #FFFFFF;
  margin: 20px 0 20px 20px;
  width: 94%;
  max-width: 1350px; }

#main-nav {
  font-family: "Noir", sans-serif;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%; }

.nav-link {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  margin-right: 0px; }

.nav-link.projects.selected a {
  color: #6092AA; }

.nav-link.news.selected a {
  color: #BF7C97; }

.nav-link.about-us.selected a {
  color: #689784; }

.nav-link a {
  display: block;
  font-size: 9.3vw;
  width: 100%; }

.nav-link a > .slash {
  color: #000000; }

.nav-link a, .project-meta a {
  border: 0; }

.main-logo {
  max-width: 1350px;
  width: 100%; }

.tag-link.selected-tag {
  color: #6092AA; }

#column-main.projects .tag-link.selected-tag {
  color: #6092AA; }

#column-main.news .tag-link.selected-tag {
  color: #BF7C97; }

.grid {
  margin: 0 40px 40px 40px; }

.project-title {
  font-weight: bold;
  font-size: 1em; }

#column-main, #column-sidebar, #text-wrap {
  line-height: 1.3em; }

#project-description p {
  margin-top: 10px;
  font-size: 0.8em; }

div#sidebar-related {
  font-size: 0.8em;
  margin-top: 20px;
  padding: 0;
  text-align: right; }

div#sidebar-related ul {
  list-style: none;
  margin-bottom: 20px;
  padding: 0px; }

#sidebar-images {
  width: 40%;
  padding-left: 60%; }

#sidebar-images img {
  margin-bottom: 10px; }

.project-image.main-image {
  margin-top: 10px; }

.project-image {
  margin-top: 40px; }

.about-us {
  display: flex;
  flex-wrap: wrap; }

.about-us > .about-images {
  flex: 1 1 60%; }

.about-us > .about-images .square {
  width: 45%;
  max-width: 450px;
  padding-bottom: 45%; }

.about-us > #text-wrap {
  flex: 1 0 30%;
  margin: 0 40px 40px 20px; }

@media all and (min-width: 1390px) {
  .nav-link a {
    font-size: 135px; } }

/*# sourceMappingURL=front-styles.css.map */