@charset "utf-8";

/* -----------------------
   GLOBAL
----------------------- */

body {
  margin: 0 auto;
  width: 92%;
  max-width: 960px;
  padding: 0 2.275%;
	padding-top: 10px;
}

.sitewrapper {
  font-family: "nimbus-sans-1","nimbus-sans-2",sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11.5pt;
  line-height: 10.5pt;
  color: #000;
}

/* -----------------------
   LINKS
----------------------- */

a {
  text-decoration: none;
  outline: none;
}

a:hover {
  color: #666;
}

a:focus,
a:active {
  outline: none !important;
}

/* -----------------------
   CONTENT WRAPPERS
----------------------- */

.thework,
.aboutwrapper,
.contactwrapper,
.playwrapper,
.work,
.text {
  color: #999;
}

.thework a,
.aboutwrapper a,
.contactwrapper a,
.playwrapper a,
.work a,
.text a,
.credits a {
  color: inherit;
}

.thework a:hover,
.aboutwrapper a:hover,
.contactwrapper a:hover,
.playwrapper a:hover,
.work a:hover,
.text a:hover,
.credits a:hover {
  color: #666;
}

/* -----------------------
   MENU
----------------------- */

.menu a {
  color: #000;
}

/* -----------------------
   PROJECT NAV
----------------------- */

.links,
.boldlinks {
  font-size: 8pt;
  line-height: 10.5pt;
  padding-top: 10px;
}

.links {
  font-weight: 300;
  color: #999;
  word-spacing: 2pt;
}

.boldlinks {
  font-weight: 700;
  color: #000;
  letter-spacing: 2pt;
}

/* -----------------------
   TEXT
----------------------- */

.text {
  padding-top: 10px;
}

.blurb,
.blurbbold,
.blurbitalic {
  font-size: 8pt;
  line-height: 9pt;
  padding-top: 3px;
  padding-bottom: 5px;
  max-width: 100%;
}

.blurb {
  font-weight: 300;
  color: #999;
}

.blurbbold {
  font-weight: 400;
  color: #333;
}

.blurbitalic {
  font-style: italic;
  font-weight: 300;
  color: #999;
}

.credits {
  font-size: 6pt;
  line-height: normal;
  color: #999;
  padding-top: 5pt;
}

/* -----------------------
   IMAGES
----------------------- */

.pictures {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    padding-top: 20px;
	padding-left: 0px;
}

.pictures img {
    display: block;
    width: auto;
    height: 400px;
    max-width: 100%;
    object-fit: contain;
}

/* -----------------------
   MOBILE
----------------------- */

@media (max-width: 480px) {
  .sitewrapper {
    font-size: 11.5pt;
    line-height: 10.5pt;
  }

  .links,
  .boldlinks {
    padding-top: 8px;
  }

  .blurb,
  .blurbbold,
  .blurbitalic {
    font-size: 10pt;
    line-height: 1;
  }

  .pictures {
    display: block;
  }

  .pictures img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }
}