/**
 * CSS layout debugging
 * @link http://pesticide.io/
 * @type boolean
 */
/**
 * Define width for browsers w/out media query support
 * @link http://jakearchibald.github.com/sass-ie/
 * @type boolean
 */
/**
 * Turn on/off IE specific styles
 * @link http://jakearchibald.github.com/sass-ie/
 * @type boolean
 */
/**
 * Base font size in used in _mixins.scss
 * @type number
 */
/**
 * Base line-height in used in _mixins.scss
 * @type number
 */
/**
 * (optional) URL for Google Fonts import
 * @type string
 */
/**
 * (optional) names of webfonts imports
 * @type array
 */
/**
 * define font stack used for sans-serifs
 * @type string
 */
/**
 * define font stack used for serifs
 * @type string
 */
/**
 * define font stack used for monospaced copy
 * @type string
 */
/**
 * define font stack used for headings
 * @requires {variable} $font-family-serif
 * @type string
 */
/**
 * define font stack used for paragraphs
 * @requires {variable} font-family-sans
 * @type string
 */
/**
 * Define z-indexes for various elements
 * @link http://www.sitepoint.com/using-sass-maps/
 * @type number
 */
/**
 * px to em conversion
 * @link http://www.pjmccormick.com/sweet-sass-function-convert-px-em
 * @requires {variable} $base-font-size
 * @param {number} $target - size to convert
 * @param {number} $context ($base-font-size) - context conversion is based on
 * @example scss
 * .foobar { padding-bottom: em(30); }
 * @returns {number}
 */
/**
 * px to rem
 * @link http://www.pjmccormick.com/sweet-sass-function-convert-px-em
 * @requires {variable} $base-font-size
 * @param {number} $target - size to convert
 * @param {number} $context ($base-font-size) - context conversion is based on
 * @example scss
 * .foobar { padding-bottom: rem(30); }
 * @returns {number}
 */
/**
 * em to px conversion
 * @link http://www.pjmccormick.com/sweet-sass-function-convert-px-em
 * @requires {variable} $base-font-size
 * @param {number} $target - size to convert
 * @param {number} $context ($base-font-size) - context conversion is based on
 * @example scss
 * .foobar { padding-bottom: px(30); }
 * @returns {number}
 */
/**
 * Aspect Ratio
 * @param {number} $ratio-numerator - ratio numerator
 * @param {number} $ratio-denominator - ratio denominator
 * @example scss
 * .foobar { padding-bottom: aspect-ratio(16,9); } // @returns 56.25%
 * @returns {number}
 */
/**
 * Aspect Ratio
 * Based on Fixed Image Dimensions
 * @param {number} $w - image width
 * @param {number} $h - image height
 * @example scss
 * .foobar { padding: 0 0 aspect-ratio-fixed(1080, 720); } // @returns 66.666666666667%
 * @returns {number}
 */
/**
 * Context Calculator
 * @param {number} $target
 * @param {number} $context
 * @example scss
 * .foobar { padding-bottom: context-calc(30,15); }
 * @returns {number}
 */
/**
 * Strip Unit Values
 * @link http://hugogiraudel.com/2013/08/12/sass-functions
 * @param {string} $num
 * @example scss
 * .foobar { padding-bottom: strip-unit(30px); }
 * @returns {number}
 */
/**
 * SMACSS Theming
 * @example scss
 * .foobar {
 *   background: #ff3377;
 *   @include theme(beccapurple){
 *     background: #663399;
 *   }
 * }
 * @param {String} $name - theme name
 */
/**
 * Buttons
 * This customises your buttons with a different background color and text color.
 * If no text color is specified it will default to white.
 * @param {String} $color-background - background color
 * @param {String} $color-text (#fff) - text color
 * @example scss
 * .foobar { @include btn(#f37) { ... } }
 */
/**
 * Media Queries
 * Allows you to use inline media queries.
 * @link http://jakearchibald.github.com/sass-ie/
 * @param {String} $breakpoint - breakpoint
 * @param {String} $query (min-width) - query type
 * @param {String} $type (screen) - media type
 * @example scss
 * .foobar { @include mq(20em) { ... } }
 */
/**
 * IE Specific Styles
 * @example scss
 * .foobar {
 *   .lt-ie8 & { @include old-ie { ... } }
 *   .lt-ie9 & { @include old-ie { ... } }
 * }
 */
/**
 * Sass version of Sticky Footer by Ryan Fait
 * @link http://ryanfait.com/sticky-footer/
 * @param {String} $footer_height - height of footer including padding or borders
 * @param {String} $root_selector (.site) - main wrapper element
 * @param {String} $root_footer_selector (.push) - hidden element that "pushes" down the footer
 * @param {String} $footer_selector (footer) - footer element
 * @example scss
 * .foobar { @include sticky-footer(4em) { ... } }
 */
/**
 * Fullscreen Background for < IE8
 * @link http://css-tricks.com/perfect-full-page-background-image/
 * @example scss
 * .foobar { @include fullscreen-bg() { ... } }
 */
/**
 * @param {number} $opacity
 * @example scss
 * .foobar { @include opacity(4) { ... } }
 */
/**
 * @link http://bit.ly/thoughtbot-bourbon-inline-block
 * @require {mixin} old-ie
 * @param {String} $alignment (baseline)
 * @example scss
 * .foobar { @include inline-block() { ... } }
 */
/**
 * Retina Displays
 * @param {String} $image - image url
 * @param {String} $width - image width
 * @param {String} $height - image height
 * @example scss
 * .foobar { @include image-2x('img/logo.png', 200px, 300px) { ... } }
 */
/**
 * RGBA Fallback
 * @param {String} $color
 * @param {String} $percent
 * @example scss
 * .foobar { @include rgba-bg(#f37,.9) { ... } }
 */
#concept {
  *zoom: 1; }
  #concept:before, #concept:after {
    content: " ";
    display: table; }
  #concept:after {
    clear: both; }

*, *:before, *:after {
  box-sizing: inherit; }

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  box-sizing: border-box;
  font-weight: 300; }

body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #141414; }

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

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background: transparent;
  color: #141414;
  text-decoration: none;
  border-bottom: 1px solid transparent; }

a:active,
a:hover {
  outline: 0;
  color: #141414;
  text-decoration: none;
  border-color: #141414; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 16px;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: none;
  cursor: pointer;
  -webkit-border-radius: 0; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

*
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

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

td,
th {
  padding: 0; }

.wrapper {
  font-family: "Gotham", Arial, sans-serif;
  height: 100%; }

.wrapper > nav {
  position: fixed;
  z-index: 9999;
  right: 0;
  top: -60px;
  width: 100%;
  background-color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  padding: 15px 20px;
  cursor: pointer;
  border-bottom: 1px solid #e6e6e6;
  -webkit-animation-duration: 600ms;
  animation-duration: 600ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: fadeInDownNav;
  animation-name: fadeInDownNav;
  -webkit-animation-delay: 1300ms;
  animation-delay: 1300ms;
  overflow: hidden;
  max-height: 60px;
  -webkit-transition: max-height 100ms ease-in-out;
  -moz-transition: max-height 100ms ease-in-out;
  -o-transition: max-height 100ms ease-in-out;
  -ms-transition: max-height 100ms ease-in-out;
  transition: max-height 100ms ease-in-out; }
  .wrapper > nav > svg {
    width: 130px;
    margin: 0 auto;
    display: block; }
  .wrapper > nav:before {
    font-family: "FontAwesome";
    content: "\f0c9";
    color: #000;
    font-size: 22px;
    position: absolute;
    top: 17px;
    right: 20px; }
  .wrapper > nav > ul {
    padding: 0;
    margin: 18px 0 0 0; }
    .wrapper > nav > ul li {
      list-style: none;
      display: block;
      margin: 10px 0;
      -webkit-transition: opacity 500ms ease-in-out;
      -moz-transition: opacity 500ms ease-in-out;
      -o-transition: opacity 500ms ease-in-out;
      -ms-transition: opacity 500ms ease-in-out;
      transition: opacity 500ms ease-in-out; }
      .wrapper > nav > ul li.current, .wrapper > nav > ul li.active {
        opacity: 1 !important; }
      .wrapper > nav > ul li a:hover {
        border-color: transparent; }
  .wrapper > nav .social {
    font-size: 9px;
    letter-spacing: 3px;
    text-align: center; }
    .wrapper > nav .social span {
      display: none; }
    .wrapper > nav .social ul {
      margin: 20px 0 0 0;
      padding: 0; }
      .wrapper > nav .social ul li {
        list-style: none;
        margin: 0 10px;
        display: inline-block; }
        .wrapper > nav .social ul li a {
          -webkit-transition: opacity 100ms ease-in-out;
          -moz-transition: opacity 100ms ease-in-out;
          -o-transition: opacity 100ms ease-in-out;
          -ms-transition: opacity 100ms ease-in-out;
          transition: opacity 100ms ease-in-out; }
          .wrapper > nav .social ul li a:hover {
            border-bottom: none;
            opacity: .8; }
    .wrapper > nav .social .facebook {
      width: 11px; }
    .wrapper > nav .social .pinterest {
      width: 18px; }
    .wrapper > nav .social .instagram {
      width: 22px; }
  .wrapper > nav .language {
    font-weight: 500;
    text-align: center;
    margin-top: 20px; }
    .wrapper > nav .language ul {
      margin: 0;
      padding: 0; }
      .wrapper > nav .language ul li {
        list-style: none;
        margin: 0 6px;
        display: inline-block; }
        .wrapper > nav .language ul li a {
          color: #989898;
          border-bottom: none; }
          .wrapper > nav .language ul li a.active {
            color: #141414; }
            .wrapper > nav .language ul li a.active:hover {
              color: #141414; }
          .wrapper > nav .language ul li a:hover {
            border-bottom: none;
            color: #141414; }
        .wrapper > nav .language ul li:first-child {
          margin-left: 0; }
        .wrapper > nav .language ul li:last-child {
          margin-right: 0; }
  .wrapper > nav.open {
    max-height: 300px; }
    .wrapper > nav.open:before {
      display: none; }

.wrapper > nav a {
  display: inline-block; }

.no-touch .wrapper section {
  background-attachment: fixed; }

@-webkit-keyframes fadeInRight {
  0% {
    -webkit-transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-180px); } }
@keyframes fadeInRight {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-180px); } }
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
@-webkit-keyframes fadeInDownNav {
  0% {
    -webkit-transform: translateY(0); }
  100% {
    -webkit-transform: translateY(60px); } }
@keyframes fadeInDownNav {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(60px); } }
@-webkit-keyframes fadeInDownNavContent {
  0% {
    max-height: 90px; }
  100% {
    max-height: 250px; } }
@keyframes fadeInDownNavContent {
  0% {
    max-height: 90px; }
  100% {
    max-height: 250px; } }
#start {
  background: url("../images/start-bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  -webkit-transition: all 1500ms ease-in-out;
  -moz-transition: all 1500ms ease-in-out;
  -o-transition: all 1500ms ease-in-out;
  -ms-transition: all 1500ms ease-in-out;
  transition: all 1500ms ease-in-out;
  height: 100%;
  display: none; }
  @media screen and (max-width: 480px) {
    #start {
      background-attachment: scroll; } }
  #start.two {
    background: url("../images/start-bg-two.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: top center;
    height: 100%; }
    @media screen and (max-width: 480px) {
      #start.two {
        background-attachment: scroll; } }
  #start.three {
    background: url("../images/start-bg-three.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: top center;
    height: 100%; }
    @media screen and (max-width: 480px) {
      #start.three {
        background-attachment: scroll; } }
  #start .pictures-nav {
    position: absolute;
    left: 50%;
    top: 120px;
    margin-left: -20px;
    display: none; }
    #start .pictures-nav span {
      display: inline-block;
      color: #fff;
      margin-right: 3px;
      cursor: pointer; }
      #start .pictures-nav span:before {
        font-family: "FontAwesome";
        content: "\f1db";
        font-size: 9px; }
      #start .pictures-nav span.active:before {
        content: "\f111"; }
  #start #logo {
    width: 250px;
    position: absolute;
    top: 280px;
    left: 50%;
    margin-left: -125px;
    display: none; }
  #start .scroll-down {
    text-transform: uppercase;
    font-size: 11px;
    color: #fff;
    font-weight: 300;
    letter-spacing: 8px;
    text-align: center;
    position: absolute;
    bottom: 30px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    display: none;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    cursor: pointer; }
    #start .scroll-down svg {
      width: 23px;
      display: block;
      margin: 0 auto;
      margin-bottom: 26px; }

#concept {
  background: #fff;
  height: auto; }
  #concept article {
    padding: 20px; }
    #concept article h3 {
      margin-top: 0;
      text-transform: uppercase;
      letter-spacing: 3.2px;
      line-height: 1.5;
      font-size: 16px; }
    #concept article p {
      font-size: 14px;
      line-height: 2; }
  #concept .visual {
    margin: 0;
    width: 100%;
    height: 285px;
    background: url("../images/concept.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover; }

#projecten {
  background: #f3f3f3;
  padding: 30px 20px;
  text-align: center;
  height: auto; }
  #projecten > h3 {
    font-weight: normal;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center; }
    #projecten > h3 span {
      display: none; }
      #projecten > h3 span.show {
        display: inline-block; }
  #projecten .select-container {
    position: relative;
    display: inline-block; }
    #projecten .select-container > ul {
      margin: 0;
      padding: 0;
      text-align: left; }
      #projecten .select-container > ul > li {
        border: 2px solid #3d3d3d;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 3px;
        font-size: 12px;
        cursor: pointer;
        min-width: 285px;
        background: transparent;
        list-style: none;
        margin: 0 0 40px 0;
        position: relative; }
        #projecten .select-container > ul > li span {
          cursor: pointer; }
          #projecten .select-container > ul > li span a {
            padding: 14px 20px;
            display: block; }
            #projecten .select-container > ul > li span a:hover {
              border-bottom-color: transparent; }
        #projecten .select-container > ul > li ul {
          display: none;
          margin: 0;
          padding: 0;
          position: absolute;
          z-index: 999;
          left: -2px;
          width: calc(100% + 4px);
          top: 48px;
          font-weight: 300; }
          #projecten .select-container > ul > li ul li {
            list-style: none;
            padding: 14px 20px;
            margin: 0;
            background-color: #fff;
            border-bottom: 1px solid #cdcdcd; }
            #projecten .select-container > ul > li ul li:last-child {
              border-bottom: none; }
    #projecten .select-container:after {
      font-family: "FontAwesome";
      content: "\f107";
      position: absolute;
      right: 20px;
      top: 15px;
      font-weight: normal; }
  #projecten .project-nav {
    display: inline-block;
    margin-bottom: 30px; }
    #projecten .project-nav ul {
      margin: 0;
      padding: 0;
      text-align: center; }
      #projecten .project-nav ul li {
        border: 2px solid #3d3d3d;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
        font-size: 11px;
        cursor: pointer;
        background: transparent;
        list-style: none;
        margin: 0 5px 10px 5px;
        padding: 14px 12px;
        display: block;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out; }
        #projecten .project-nav ul li:hover, #projecten .project-nav ul li.show {
          background-color: #000;
          color: #fff;
          border-color: #000; }
  #projecten .projects > div {
    display: none; }
    #projecten .projects > div.show {
      display: block; }
    #projecten .projects > div ul {
      margin: 0;
      padding: 0;
      text-align: left; }
      #projecten .projects > div ul li {
        list-style: none;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        width: 49%;
        vertical-align: top;
        padding: 0 5px;
        margin-bottom: 20px;
        overflow: hidden; }
        #projecten .projects > div ul li.hide {
          display: none; }
        #projecten .projects > div ul li:nth-child(1n) {
          padding-left: 0; }
        #projecten .projects > div ul li:nth-child(2n) {
          padding-right: 0;
          padding-left: 5px; }
        #projecten .projects > div ul li img {
          width: 100%;
          display: block; }
        #projecten .projects > div ul li div {
          background: #fff;
          padding: 12px 15px 5px 15px; }
        #projecten .projects > div ul li h4, #projecten .projects > div ul li h5 {
          margin: 0 0 5px 0; }
        #projecten .projects > div ul li h4 {
          font-weight: 300;
          font-size: 13px; }
        #projecten .projects > div ul li h5 {
          text-transform: uppercase;
          font-size: 12px; }
        #projecten .projects > div ul li:not(:hover) img {
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          filter: grayscale(100%); }
        #projecten .projects > div ul li:hover img {
          width: 100%;
          display: block;
          -webkit-transition: all .4s;
          -moz-transition: all .4s;
          -ms-transition: all .4s;
          -o-transition: all .4s;
          transition: all .4s; }
        #projecten .projects > div ul li:hover img {
          -webkit-filter: grayscale(0);
          -moz-filter: greyscale(0);
          -ms-filter: greyscale(0);
          -o-filter: greyscale(0);
          filter: grayscale(0); }
    #projecten .projects > div .show-more {
      display: none;
      margin-top: 30px; }
      #projecten .projects > div .show-more.show {
        display: inline-block;
        border: 2px solid #262626;
        padding: 7px 11px;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 2px; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
#merken {
  background: #fff;
  padding: 20px; }
  #merken > h3 {
    font-weight: normal;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center; }
  #merken ol, #merken ul {
    padding: 0; }
  #merken li {
    list-style: none; }
  #merken .grid .col {
    vertical-align: top;
    padding-right: 20px;
    padding-left: 20px; }
    #merken .grid .col:nth-child(1n) {
      padding-left: 0; }
    #merken .grid .col:nth-child(2n) {
      padding-right: 0; }
    #merken .grid .col ul {
      margin-bottom: 30px; }
      #merken .grid .col ul li {
        border-bottom: 1px solid #d1d1d1;
        padding: 10px 0 8px 0; }
  #merken .grid h3 {
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 10px;
    min-height: 42px; }

#contact {
  border-bottom: 170px solid #000;
  height: auto;
  font-size: 13px;
  line-height: 1.5; }
  #contact #map {
    width: 100%;
    height: 350px;
    margin-bottom: 30px; }
  #contact > h3 {
    font-weight: normal;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 3.2px;
    line-height: 1.5;
    font-size: 20px;
    margin-bottom: 0;
    padding: 0 20px;
    text-align: center; }
  #contact .contact-container {
    margin-bottom: 30px;
    padding: 20px; }
    #contact .contact-container h4 {
      text-transform: uppercase;
      font-weight: 500;
      font-size: 14px;
      margin: 0; }
    #contact .contact-container .contact-form {
      margin-top: 40px; }
      #contact .contact-container .contact-form input[type=text],
      #contact .contact-container .contact-form textarea {
        border: none;
        border-bottom: 1px solid #dddddd;
        background: none;
        font-size: 14px;
        padding: 12px 0 12px 12px;
        margin-bottom: 20px;
        outline: none;
        width: 100%; }
      #contact .contact-container .contact-form textarea {
        height: 120px; }
      #contact .contact-container .contact-form .action {
        text-align: right; }
        #contact .contact-container .contact-form .action input[type=submit] {
          border: 2px solid #262626;
          background: none;
          font-weight: 500;
          text-transform: uppercase;
          padding: 8px 12px 5px 12px;
          cursor: pointer;
          outline: 0; }
      #contact .contact-container .contact-form .message {
        border-bottom: 2px solid #141414;
        padding: 6px 0;
        margin-bottom: 30px;
        font-style: italic;
        display: none; }

@media screen and (min-width: 481px) {
  .wrapper,
  .wrapper section {
    height: 100%; }

  #start #logo {
    width: 400px;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -200px; }

  #concept {
    height: 100%;
    border-bottom: none; }
    #concept article {
      width: 48.75%;
      float: left; }
    #concept .visual {
      width: 51.25%;
      height: 100%;
      float: left; }

  #merken {
    height: auto; }
    #merken > h3 {
      font-size: 25px;
      margin-bottom: 30px; }
    #merken .grid .col {
      width: 47%;
      display: inline-block; }

  #projecten > h3 {
    font-size: 25px;
    margin-bottom: 30px; }
  #projecten .project-nav ul li {
    display: inline-block; }

  #contact > h3 {
    font-size: 25px; } }
@media screen and (min-width: 601px) {
  #start .scroll-down {
    bottom: 70px; } }
@media screen and (min-width: 769px) {
  .wrapper section {
    width: calc(100% - 180px); }

  .wrapper #start {
    width: 100%; }

  .wrapper > nav {
    width: 180px;
    right: -180px;
    top: 0;
    height: 100%;
    text-align: left;
    padding: 50px 0 0 0;
    border-bottom: none;
    cursor: default;
    font-size: 11px;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    max-height: 100%; }
    .wrapper > nav:before {
      display: none; }
    .wrapper > nav > svg {
      margin-bottom: 60px;
      width: 130px; }
    .wrapper > nav > ul {
      padding-left: 0;
      display: block;
      margin-top: 0;
      text-align: center; }
      .wrapper > nav > ul li {
        display: block;
        margin: 0; }
        .wrapper > nav > ul li a {
          margin-bottom: 28px; }
    .wrapper > nav.open {
      max-height: 100%; }
      .wrapper > nav.open > svg {
        margin-bottom: 60px; }
      .wrapper > nav.open > ul,
      .wrapper > nav.open .social {
        display: block; }
    .wrapper > nav .social {
      position: absolute;
      bottom: 100px;
      width: 100%;
      display: block; }
      .wrapper > nav .social span {
        display: block; }
    .wrapper > nav .language {
      position: absolute;
      bottom: 40px;
      width: 100%;
      margin-top: 0; }

  #start .pictures-nav {
    width: 10px;
    left: 30px;
    top: 50%;
    margin-top: -32px;
    margin-left: 0; }
    #start .pictures-nav span {
      margin-right: 0;
      margin-bottom: 3px; }

  #concept article {
    padding: 40px; }
    #concept article p {
      font-size: 13px; }

  #merken {
    padding: 40px; }
    #merken > h3 {
      font-size: 30px;
      margin-bottom: 60px; }
    #merken .grid .col {
      width: 47%; }
    #merken .grid h3 {
      margin-bottom: 30px; }

  #projecten {
    padding: 70px 20px; }
    #projecten > h3 {
      font-size: 30px;
      margin-bottom: 60px; }
    #projecten select {
      margin-bottom: 70px; }
    #projecten .projects > div ul li {
      position: relative; }
      #projecten .projects > div ul li div {
        position: absolute;
        width: calc(100% - 4px);
        bottom: 0;
        left: 5px;
        display: none; }
      #projecten .projects > div ul li:hover div {
        display: block;
        -webkit-animation-duration: 300ms;
        animation-duration: 300ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp; }

  #contact {
    font-size: 13px;
    line-height: 1.5; }
    #contact > h3 {
      font-size: 30px; }
    #contact .contact-container {
      margin-bottom: 60px; }
      #contact .contact-container .contact-data {
        float: left;
        width: 170px; }
      #contact .contact-container .contact-form {
        overflow: hidden;
        padding-left: 120px;
        margin-top: 0; } }
@media screen and (min-width: 900px) {
  #start #logo {
    width: 500px;
    margin-top: -37px;
    margin-left: -250px; }

  #projecten .projects > div ul li {
    width: 24%;
    padding: 0 15px;
    margin-bottom: 30px; }
    #projecten .projects > div ul li:nth-child(1n) {
      padding-left: 15px; }
    #projecten .projects > div ul li:nth-child(2n) {
      padding-right: 15px;
      padding-left: 15px; }
    #projecten .projects > div ul li div {
      width: calc(100% - 29px);
      left: 15px; } }
@media screen and (min-width: 1149px) {
  #concept article {
    padding: 90px 90px 0 90px; }

  #merken {
    padding: 100px 50px; }
    #merken .grid .col {
      width: 24%; }
    #merken .grid h3 {
      margin-bottom: 30px; }

  #contact #map {
    margin-bottom: 50px; }
  #contact .contact-container {
    padding: 30px 0 0 120px;
    margin-bottom: 100px; }
    #contact .contact-container .contact-form {
      width: calc(100% - 160px - 170px); } }
@media screen and (min-width: 1299px) {
  #merken .grid .col {
    width: calc(100% / 4 - 70px);
    margin-left: 50px; }
    #merken .grid .col ul {
      margin-bottom: 0; }
  #merken .grid h3 {
    margin-bottom: 30px; } }
@font-face {
  font-family: 'Gotham';
  src: url("../fonts/Gotham-Bold.eot");
  src: url("../fonts/Gotham-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gotham-Bold.woff") format("woff"), url("../fonts/Gotham-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'Gotham';
  src: url("../fonts/GothamLight.eot");
  src: url("../fonts/GothamLight.eot?#iefix") format("embedded-opentype"), url("../fonts/GothamLight.woff") format("woff"), url("../fonts/GothamLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: 'Gotham';
  src: url("../fonts/Gotham-Medium.eot");
  src: url("../fonts/Gotham-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Gotham-Medium.woff") format("woff"), url("../fonts/Gotham-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.4.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }

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