/* ::::: https://www.studiokraftwerk.com/static/css/main.min.css?cb=1.1.3 ::::: */

img, legend { border: 0px none; }
body, figure { margin: 0px; }
.clearfix::after, .hidden, .menu, .menu .ui-overlay, .section-video-pause-overlay, .svg-filters { visibility: hidden; }
html { font-family: sans-serif; }
body { overflow-x: hidden; overflow-y: scroll;}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body { overflow-x: scroll; overflow-y: scroll; background-color: rgb(0, 0, 0); }
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0px; }
.ir, .list, .list .list-item { display: block; }
a { background-color: transparent; color: inherit; text-decoration: none; }
a:active, a:hover { outline: 0px none; }
.column, .image-vertical-align--top { vertical-align: top; }
svg:not(:root) { overflow: hidden; }
hr { box-sizing: content-box; height: 0px; }
.button, button { overflow: visible; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0px none; padding: 0px; }
@font-face {
	font-family: "AkkuratPro-Regular";
	font-style: normal;
	font-weight: 400;
	src: url('akkuratpro-regular.woff2') format("woff2"), url('akkuratpro-regular.woff') format("woff");
}
@font-face {
	font-family: "AkkuratLightPro-Regular";
	font-style: normal;
	font-weight: 400;
	src: url('akkuratlightpro-regular.woff2') format("woff2"), url('akkuratlightpro-regular.woff') format("woff");
}
@font-face {
	font-family: "AkkuratPro-Bold";
	font-style: normal;
	font-weight: 400;
	src: url('akkuratpro-bold.woff2') format("woff2"), url('akkuratpro-bold.woff') format("woff");
}
@font-face {
	font-family: "DomaineDisp-Regular";
	font-style: normal;
	font-weight: 400;
	src: url('domainedisp-regular.woff2') format("woff2"), url('domainedisp-regular.woff') format("woff");
}
/**, *::after, *::before { box-sizing: border-box; }
html { font-size: 1rem; line-height: 1.8125rem; }
a:focus, a:hover { text-decoration: underline; }*/
.ir { font: 0px/0 a; text-shadow: none; color: transparent; }
.list.--bulleted .list-item::before { content: "•"; font-size: 2.5rem; line-height: 1rem; position: absolute; left: 0px; }
.grid, .section-inner { margin: 0px auto; max-width: 1440px; }
.clearfix::after { content: "."; display: block; height: 0px; clear: both; }
.button-primary-background::after, .grid--contact::before, .grid.center::before, .page-side-title::before { content: ""; }
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
.button, .page-side-title { font-family: DomaineDisp-Regular,serif; font-weight: 400; text-rendering: optimizelegibility; }
#application, .grid { width: 100%; }
@media not all, only screen and (min--moz-device-pixel-ratio: 2), not all, not all, only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
}
.grid { clear: both; position: relative; z-index: 0; padding: 0px; font-size: 0px; }
.column { display: inline-block; margin: 0px; font-size: 1rem; line-height: 1.8125rem; }
.button-primary, .page-side-title { font-size: 0.75rem; letter-spacing: 0.375rem; text-transform: uppercase; }
.grid.center .column { display: inline-block; vertical-align: middle; }
.grid.center::before { display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }
.span-8-10 { width: 79.9%; }
.gutter-l-1-10 { margin-left: 9.9%; }
.page-side-title { width: 500px; height: 30px; margin: 0px; color: rgb(255, 255, 255); text-align: left; transform-origin: left top 0px; transform: rotate(-90deg); transition: all 0.15s ease-out 0s; }
.button, .button-bare { text-align: center; outline: 0px none; text-decoration: none; }
.page-side-title::before { position: absolute; left: -27px; top: 13px; border-top: 1px solid rgb(255, 255, 255); width: 12px; }
.preloader { position: absolute; z-index: 102; top: 0px; left: 0px; width: 100%; height: 100%; background: rgb(0, 0, 0) none repeat scroll 0% 0%; }
.preloader-canvas { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; }
.button { margin: 0px; padding: 0px; color: inherit; border: medium none; background: transparent none repeat scroll 0px 0px; cursor: pointer; }
.button:focus { outline: 0px none; }
.button:hover { text-decoration: none; }
.button-primary { display: inline-block; position: relative; overflow: hidden; padding: 16px 26px 11px 31px; }
.button-primary--light { color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); }
.button-primary-background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgb(0, 0, 0) none repeat scroll 0% 0%; }
.button-primary--light .button-primary-background { background: rgb(255, 255, 255) none repeat scroll 0% 0%; }
.button-primary--light .button-primary-background::after { background-image: url('button-primary-background-light.png'); }
.button-primary--dark .button-primary-background::after { background-image: url('button-primary-background-dark.png'); }
.button-primary-background::after { display: block; position: absolute; top: 0px; right: -29px; width: 29px; height: 56px; }
.button-primary-label, .button-primary-label-dark { position: relative; display: inline-block; }
.button-primary-label--light { color: rgb(255, 255, 255); }
.button-primary-label--dark { color: rgb(0, 0, 0); }
.button-primary-label-foreground { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 16px 26px 11px 31px; }
.button-menu, .button-menu::before, .button-switch-case { font-weight: 400; text-rendering: optimizelegibility; }
.menu { opacity: 0; z-index: 90; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; }
.list-menu, .menu-background, .menu-background-color { position: absolute; top: 0px; left: 0px; }
.menu .ui-overlay { opacity: 0; }
.menu-background-color { width: 100%; height: 100%; background: rgb(0, 0, 0) none repeat scroll 0% 0%; }
.list-menu { counter-reset: buttonID; right: 0px; bottom: 0px; width: 100%; max-width: 1152px; height: 75px; margin: auto; padding: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 0px; }
.list-item-menu { counter-increment: buttonID; position: relative; width: 25%; display: inline-block; }
.button-menu { display: block; font-family: AkkuratPro-Bold,sans-serif; font-size: 4.5rem; line-height: 5.3125rem; text-align: left; transform: translateZ(0px); outline: 90px solid transparent ! important; }
.button-menu-footer, .button-menu::before { position: absolute; font-family: DomaineDisp-Regular,serif; left: 0px; }
.button-menu.button-menu--active, .button-menu:focus, .button-menu:hover { text-decoration: none; color: rgb(255, 255, 255); }
.button-menu::before { top: -40px; font-size: 0.875rem; content: "0" counter(buttonID, decimal); }
@media not all {
	.button-menu--work {  }
	.button-menu--about {  }
	.button-menu--contact {  }
}
.svg-filters { position: absolute; width: 1px; height: 1px; }
.button-menu-line { width: 60px; height: 2px; margin: -7px 0px 0px; border: 0px none; background-color: rgb(255, 255, 255); transform-origin: 0px 0px 0px; transform: scaleX(0); }
.button-menu-line--work { width: 63px; }
.button-menu-line--about { width: 46px; }
.button-menu-line--contact { width: 45px; }
.button-menu-footer { bottom: 43px; right: 0px; width: 300px; height: 30px; margin: 0px auto; text-align: center; color: rgb(255, 255, 255); font-size: 12px; letter-spacing: 6px; line-height: 30px; }
.button-menu-footer:active, .button-menu-footer:focus, .button-menu-footer:hover { text-decoration: none; }
.button-menu-footer-icon { display: inline-block; position: relative; top: 10px; width: 12px; height: 30px; margin-right: 4px; }
@font-face {
	font-family: "icomoon";
	font-style: normal;
	font-weight: 400;
	src: url('icomoon.eot') format("embedded-opentype"), url('icomoon.ttf') format("truetype"), url('icomoon.woff') format("woff"), url('icomoon.svg') format("svg");
}
.icon-play::before { content: ""; }
.icon-pause::before { content: ""; }
.icon-arrow-down::before { content: ""; }
.icon-arrow-up::before { content: ""; }
.icon-arrow-left::before { content: ""; }
.icon-arrow-right::before { content: ""; }
.icon-instagram::before { content: ""; }
.icon-linkedin::before { content: ""; }
.icon-facebook::before { content: ""; }
.icon-twitter::before { content: ""; }
.ui-overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; clip: rect(auto, auto, auto, auto); }
.ui-overlay .button-main-logo { display: block; position: fixed; top: 50px; left: 50px; width: 113px; height: 20px; z-index: 101; }
.ui-overlay .button-main-menu { display: block; position: fixed; top: 35px; right: 39px; width: 50px; height: 50px; z-index: 101; }
.ui-overlay .button-main-menu-icon { width: 50px; height: 50px; }
.ui-overlay .page-side-title { position: fixed; bottom: 58px; left: 41px; z-index: 101; }
.ui-overlay--white .page-side-title { color: rgb(255, 255, 255); }
.ui-overlay--white .page-side-title::before { border-top-color: rgb(255, 255, 255); }
.ui-overlay--black .page-side-title::before { border-top-color: rgb(0, 0, 0); }
.section, .section-image-gallery-slider, .section-text-body, p { position: relative; }
.section-image-gallery-slider::before { content: ""; display: block; padding-top: 62.55%; }
.section-video-container::before { content: ""; display: block; padding-top: 56.25%; }
.page { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.page-contact, .page-intro, .project-image { background-size: cover; }
@media screen and (min-width: 1024px) and (max-width: 1440px) {
}
.section-about-label::before { content: "0\" counter(sectionID, decimal) \" - "; font-weight: 400; text-rendering: optimizelegibility; }
.contact-button, .grid--contact, .page-contact, .page-intro-column { text-align: center; }
.page-contact, .page-intro { background-color: rgb(0, 0, 0); background-image: url('background-with-grid-lines.jpg'); background-position: center center; background-repeat: no-repeat; }
.grid--contact::before, .wrapper-contact { display: inline-block; vertical-align: middle; }
.grid--contact::before { height: 100%; margin-right: -0.25em; }
.page-intro, .page-intro-background { top: 0px; left: 0px; width: 100%; position: absolute; }
.page-intro, .page-intro-background, .page-intro-grid { height: 100%; }
.page-intro-logo { margin-bottom: 28px; margin-top: 60px;}
.page-intro-body { margin: 0px 0px 53px; font-family: DomaineDisp-Regular,serif; font-size: 1rem; letter-spacing: 0.0625rem; color: rgb(255, 255, 255); font-weight: 400; text-rendering: optimizelegibility; padding: 0px 12%;}
.page-intro-button-contact { position: fixed; right: 5px; bottom: 29px; font-family: AkkuratPro-Bold,sans-serif; font-size: 12px; color: rgb(255, 255, 255); text-transform: uppercase; letter-spacing: 6px; opacity: 1; transition: opacity 150ms ease-out 0s; }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.page-intro-button-contact {bottom: 15px; width:120px;}
.page-intro-logo { margin-bottom: 0px; margin-top: 10px;}
.page-intro-body { padding: 0 0%; margin: 0 0 30px; }
}
/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
.page-intro-logo{margin-bottom: 0px;margin-top: 5px;}
.page-intro-body{margin: 0px 0px 20px; padding: 0px 0%;}
.hvr-bounce-to-right{padding-top: 27px;}
.page-intro-logo{ margin-bottom: 50px; margin-top: 85px;}
}

@media (max-width:750px){
.page-intro-logo{
  margin-bottom: 20px;
  margin-top: 35px;
}
.hvr-bounce-to-right {
    padding-top: 15px;
}
}

@media(max-width:670px){
.page-intro-logo {
    margin-bottom: 10px;
    margin-top: 20px;
}
.hvr-bounce-to-right {
    padding-top: 25px;
    height: 50px;
 }
}


@media(max-width: 550px){
	.hvr-bounce-to-right {
    height: 60px;
}
}

/* insert styles here */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
.page-intro-logo {
    margin-bottom: 34px;
    margin-top: 48px;
}
/*.page-intro-button-contact {
    left: 280px;
}*/
.page-side-title-2{left: 35px;}
.hvr-bounce-to-right {margin-right:0px;}
}
/* (768x1024) iPad 1 & 2, Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.page-intro-logo{width: 100%;}
.page-intro-body {font-size: 1.5565rem;}
.hvr-bounce-to-right {padding-top: 14px;}
.hvr-bounce-to-right { padding-top: 14px; margin-top:100px;}
}
/* insert styles here */
.page-intro-button-contact::before { content: ""; position: absolute; left: -27px; top: 8px; border-top: 1px solid rgb(255, 255, 255); width: 12px; }
.page-intro-button-contact:hover { opacity: 0.7; }
.page-intro-button { width: 230px; }
.page-intro-button--first { margin-right: 15px; }
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 620px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 620px) {
}
.firebugResetStyles { z-index: 2147483646 ! important; top: 0px ! important; left: 0px ! important; display: block ! important; border: 0px none ! important; margin: 0px ! important; padding: 0px ! important; outline: 0px none ! important; min-width: 0px ! important; max-width: none ! important; min-height: 0px ! important; max-height: none ! important; position: fixed ! important; transform: rotate(0deg) ! important; transform-origin: 50% 50% 0px ! important; border-radius: 0px ! important; box-shadow: none ! important; background: transparent none repeat scroll 0% 0% ! important; pointer-events: none ! important; white-space: normal ! important; }
style.firebugResetStyles { display: none ! important; }
.firebugResetStyles::before, .firebugResetStyles::after { content: "" ! important; }
.firebugResetStyles { z-index: 2147483646 ! important; top: 0px ! important; left: 0px ! important; display: block ! important; border: 0px none ! important; margin: 0px ! important; padding: 0px ! important; outline: 0px none ! important; min-width: 0px ! important; max-width: none ! important; min-height: 0px ! important; max-height: none ! important; position: fixed ! important; transform: rotate(0deg) ! important; transform-origin: 50% 50% 0px ! important; border-radius: 0px ! important; box-shadow: none ! important; background: transparent none repeat scroll 0% 0% ! important; pointer-events: none ! important; white-space: normal ! important; }
style.firebugResetStyles { display: none ! important; }
.firebugResetStyles::before, .firebugResetStyles::after { content: "" ! important; }

/*@media(max-width: 376px){
	.page-intro-button-contact {
    left: 252px;
}
}*/


@media(max-width: 330px){
	.page-intro-logo {
    margin-bottom: 15px;
    margin-top: 20px;
}
.page-intro-button-contact {
    right: 5px;
}
}

.large-header {
	
	width: 100%;
	
}