@charset "utf-8";
/*sass --watch grid.scss:grid.css &*/
body {
  font: 13px/19px "SanukWeb", sans-serif; }

.ie7 {
  padding-top: 20px; }

/* ----------header with left nav and logo-------------- */
#container {
  overflow: hidden;
  width: 100%;
  z-index: 990;
  position: static;
  left: 0;
  top: 0; }
  @media only screen and (min-width: 0px) and (max-width: 639px) {
    #container {
      width: 92%;
      margin: 0 auto; } }
  #container #header-overlay {
    display: none;
    position: fixed;
    top: 0px;
    left: 629px;
    width: 100%;
    height: 100%;
    background: #51a025;
    background: rgba(81, 160, 37, 0.6); }
  #container #logo {
    margin: 0 0 0 53px; }
    @media only screen and (min-width: 0px) and (max-width: 639px) {
      #container #logo {
        margin: 0;
        text-align: center; } }
    #container #logo img {
      max-width: 100%;
      height: auto; }
    #container #logo #leupimitknauss {
      position: absolute;
      right: 105px;
      top: 14px;
      z-index: 1000; }
      @media only screen and (min-width: 0px) and (max-width: 639px) {
        #container #logo #leupimitknauss {
          display: none; } }
  #container nav {
    padding: 0 67px 25px 67px; }
    @media only screen and (min-width: 0px) and (max-width: 639px) {
      #container nav {
        padding: 0 0 25px 0; } }
    #container nav div#masonrycontainer {
      left: 0;
      top: 0;
      width: 100%;
      list-style: none; }
      @media only screen and (min-width: 0px) and (max-width: 639px) {
        #container nav div#masonrycontainer {
          max-width: 320px;
          margin: 0 auto; } }
      #container nav div#masonrycontainer .item {
        min-width: 280px;
        max-width: 320px; }
        @media only screen and (min-width: 0px) and (max-width: 639px) {
          #container nav div#masonrycontainer .item {
            width: 100%;
            min-width: 0; } }
        @media only screen and (min-width: 640px) and (max-width: 959px) {
          #container nav div#masonrycontainer .item {
            width: 50%; } }
        @media only screen and (min-width: 960px) and (max-width: 1279px) {
          #container nav div#masonrycontainer .item {
            width: 33.33%; } }
        @media only screen and (min-width: 1280px) and (max-width: 1599px) {
          #container nav div#masonrycontainer .item {
            width: 25%; } }
        @media only screen and (min-width: 1600px) and (max-width: 1919px) {
          #container nav div#masonrycontainer .item {
            width: 20%; } }
        @media only screen and (min-width: 1920px) and (max-width: 2239px) {
          #container nav div#masonrycontainer .item {
            width: 16.7%; } }
        @media only screen and (min-width: 2240px) {
          #container nav div#masonrycontainer .item {
            width: 14.29%; } }
        #container nav div#masonrycontainer .item a {
          margin: 0px 16px 16px 0px;
          display: block;
          text-decoration: none;
          color: white;
          font-size: 31px;
          line-height: 34px;
          position: relative; }
          #container nav div#masonrycontainer .item a:visited {
            color: white; }
          #container nav div#masonrycontainer .item a:hover {
            text-decoration: underline; }
          @media only screen and (min-width: 0px) and (max-width: 639px) {
            #container nav div#masonrycontainer .item a {
              margin: 0 0 16px 0; } }
          #container nav div#masonrycontainer .item a .pink {
            background-color: #ec008c; }
          #container nav div#masonrycontainer .item a .green {
            background-color: #51a025; }
          #container nav div#masonrycontainer .item a .grey {
            background-color: #b4b4b4; }
          #container nav div#masonrycontainer .item a img {
            width: 100%;
            height: auto; }
          #container nav div#masonrycontainer .item a header {
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-family: 'SanukWeb-Bold';
            letter-spacing: 0.03em; }

/* ----------------- content--------------------- */
section#content {
  width: 629px;
  height: 0;
  overflow: hidden; }
  @media only screen and (min-width: 0px) and (max-width: 639px) {
    section#content {
      width: 92%;
      margin: 0 auto; } }
  section#content .contentitem {
    padding: 30px 52px 30px 15px; }
    @media only screen and (min-width: 0px) and (max-width: 639px) {
      section#content .contentitem {
        padding: 30px 0 30px 0; } }
    section#content .contentitem section {
      padding: 0 0 21px 0; }
    section#content .contentitem #gallerythumbs img {
      display: inline-block;
      float: left;
      margin: 0 12px 12px 0; }
    section#content .contentitem .slideshow-container {
      position: relative;
      width: 100%;
      max-width: 455px;
      margin-bottom: 19px; }
      section#content .contentitem .slideshow-container .slideshow {
        width: 375px;
        margin: 0 40px; }
        @media only screen and (min-width: 0px) and (max-width: 639px) {
          section#content .contentitem .slideshow-container .slideshow {
            width: auto;
            margin: 0; } }
        section#content .contentitem .slideshow-container .slideshow img {
          width: auto;
          height: auto;
          padding: 0 7px; }
      section#content .contentitem .slideshow-container #prev {
        position: absolute;
        top: 68px;
        left: 0px;
        display: none; }
        @media only screen and (min-width: 0px) and (max-width: 639px) {
          section#content .contentitem .slideshow-container #prev {
            display: none !important; } }
      section#content .contentitem .slideshow-container #next {
        position: absolute;
        top: 68px;
        right: 0px;
        display: none; }
        @media only screen and (min-width: 0px) and (max-width: 639px) {
          section#content .contentitem .slideshow-container #next {
            display: none !important; } }
    section#content .contentitem .blogitem h2 {
      display: inline-block;
      padding-left: 3px; }
    section#content .contentitem .addthis_toolbox {
      height: 50px; }
    section#content .contentitem form label {
      display: block;
      clear: both;
      font-family: 'SanukWeb-Bold';
      text-transform: uppercase; }
    section#content .contentitem form input[type="text"], section#content .contentitem form textarea {
      width: 100%;
      max-width: 440px;
      display: block;
      background-color: #b4b4b4;
      color: #ffffff;
      margin-bottom: 22px;
      font-family: 'SanukWeb';
      font-size: 13px;
      line-height: 19px;
      padding: 8px 10px 7px 10px; }
    section#content .contentitem form textarea {
      height: 200px; }
    section#content .contentitem form input[type="checkbox"] {
      margin-right: 15px;
      float: left; }
    section#content .contentitem form p.checkbox {
      padding-left: 25px; }
    section#content .contentitem form input.error, section#content .contentitem form textarea.error {
      border: 1px solid #ec008c; }
    section#content .contentitem form #recaptcha_widget {
      width: 100%;
      max-width: 440px;
      margin-bottom: 22px;
      float: none;
      clear: both;
      padding: 10px 0;
      border-top: 1px solid #b4b4b4;
      border-bottom: 1px solid #b4b4b4; }
      section#content .contentitem form #recaptcha_widget #recaptcha_image {
        margin-bottom: 19px; }
      section#content .contentitem form #recaptcha_widget #recaptcha_links {
        margin-bottom: 4px; }
        section#content .contentitem form #recaptcha_widget #recaptcha_links a {
          display: inline-block;
          margin: 0 12px 12px 0;
          padding: 4px;
          background-color: #B4B4B4;
          color: #ffffff; }
    section#content .contentitem form .btn {
      display: block;
      float: none;
      clear: both;
      width: auto;
      font-family: 'SanukWeb-Bold';
      padding: 9px 35px 6px 35px;
      background-color: #ec008c;
      letter-spacing: 0.05em;
      color: #ffffff; }

/* -----------footer--------------------------- */
footer {
  position: fixed;
  width: 67px;
  bottom: 25px;
  right: 0; }
  footer #facebook, footer #twitter {
    display: block;
    margin: 10px 5px; }

/* -----------controls--------------------------- */
#loader {
  display: none;
  position: absolute;
  top: 10px;
  left: 15px; }

#controlbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 628px;
  height: 30px;
  background-color: #ffffff;
  cursor: pointer;
  z-index: 999; }
  #controlbar #close {
    max-width: 100%;
    width: 630px;
    text-align: right; }
    #controlbar #close img {
      padding: 16px 10px 0 0; }
      @media only screen and (min-width: 0px) and (max-width: 639px) {
        #controlbar #close img {
          padding: 6px 10px 0 0; } }

#hidden {
  display: none; }

/**** touch ****/
.touch #main-container .main article .projectThumb .titleDisplay {
  transition-duration: 250ms; }

.no-touch #main-container .main article .projectThumb .titleDisplay:hover, .touch #main-container .main article .projectThumb.fake-hover .titleDisplay {
  opacity: 1; }