/******************************************************************
Copyright 2014 by Agentur Durchdacht / www.agentur-durchdacht.de
******************************************************************/

html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizeLegibility; }

/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100.01%;
font: inherit, 1em/1.5em "nimbus-sans", Arial, Helvetica, Verdana, sans-serif;
vertical-align: baseline;
}

body {
width:100%;
height:100%;
margin:0;
padding:0;
line-height:1.2em;
background:#3b3e43;
border-collapse: collapse !important;
}

h1, h2, h3, h4, h5, h6, a, p {
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
font-weight:400;
text-decoration:none;
clear:both;
border:none;
padding:0;
margin:0;
}

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: normal;}
em {font-style: italic;}


h1 {
display:block;
position:relative;
font-family:"Proxima-Nova", Helvetica, Arial, sans-serif !important;
font-size:90px;
color:#2b2e33;
line-height:66px;
letter-spacing:0;
margin:0 0 60px;
text-align:center;
font-weight:400 !important;
letter-spacing:-2px;
}

h2 {
display:block;
position:relative;
font-family:'kulturista-web', serif;
font-size:40px;
font-weight:400;/*
font-weight:bold;*/
color:#2b2e33;
line-height:60px;
margin:0 auto 30px;
text-align:center;
letter-spacing:-1px;
}

h2.subhead {
font-family:"Proxima-Nova", Helvetica, Arial, sans-serif;
font-size:0.4em;
line-height:40px !important;
letter-spacing:-1px;
}

h3 {
display:block;
font-family:'kulturista-web', serif;
font-size:24px;
line-height:30px;
font-weight:400;
color:#2b2e33;
margin:30px auto 10px;
text-rendering: optimizeLegibility;
}

h4 {
display:block;
position:relative;
font-family:'kulturista-web', serif;
font-size:18px;
line-height:24px;
text-rendering: optimizelegibility;
color:#666;
margin:30px auto;
font-weight:400;
text-align:center;
}

hr {
display:block;
width:100px;
height:1px;
border:0;
margin-bottom:10px;
background:#333;
transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
}

section:hover hr {
width:200px;
}

#video-overlay hr {
width:50px;
height:1px;
border:0;
background:#999;
transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
}

#video-overlay :hover hr {
width:200px;
}

p {
position:relative;
display:block;
font-family:"Proxima-Nova", Helvetica, Arial, sans-serif;
font-size:22px;
clear: both;
color:#7e7e7f;
font-weight:300;
line-height: 30px;
margin:10px auto 60px;
text-align:center;
text-rendering: optimizelegibility;
transition:.2s ease-in-out;
-webkit-transition:.2s ease-in-out;
-moz-transition:.2s ease-in-out;
}

p.serif {
font-family:"kulturista-web", serif;
}

a {
font-family: "Proxima-Nova", Arial, Helvetica, Verdana, sans-serif ;
font-size:14px;
clear: both;
color:#666;
font-weight:500;
margin:0 0 10px 0;
text-decoration:none;
letter-spacing:0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
-ms-transition: .2s ease-in-out;
transition: .2s ease-in-out;
text-rendering: optimizelegibility;
outline:0;
cursor:pointer;
}

a:hover {
color:#1A1A1A;
}

a.serif {
font-family:"kulturista-web", serif;
}

a.more-btn{
position:relative;
display:inline-block;
font-family:"Proxima-Nova",Arial, Helvetica, sans-serif;
color:#fff;
font-size:12px;
font-weight:600;
padding:16px 35px 15px;
margin:0 auto;
background:#f7634f;
border:2px solid #f7634f;
text-align:center;
overflow:hidden;
text-transform:uppercase;
letter-spacing:2px;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
z-index:2;
}

a.more-btn:hover {
color:#fff;
background:#f66c5a;
border-color:#f66c5a;
}

a.dark {
background-color:transparent;
}

a.dark:hover {
background:#f66c5a;
}

a.home-scroller {
position:absolute;
display:block;
width:100%;
color:#fff;
font-size:14px;
font-weight:300;
line-height:48px;
margin:0 auto 0;
padding:30px 0;
left:0;
right:0;
text-align:center;
bottom:0px;
}

a.home-scroller:hover {
opacity:.5;
}

section {
padding:0;
background:transparent;
-webkit-transform-style: preserve-3d;
overflow:hidden;
}

::selection {
color:#000;
background: #eee;
}

::-webkit-selection {
color:#000;
background: #eee;
}

::-moz-selection {
color:#000;
background: #eee;
}

strong {
font-weight:300;
}

b {
font-weight:700;
}

.desktop {
display:inline;
}

.mobile {
display:none;
}

.light {
color:#fff;
}

.section {
position:relative;
display:block;
width:100%;
padding:0;
margin:0 auto;
overflow:hidden;
}

.bg-grey {
background-color:#f3f4f5;
}

.bg-white {
background-color:#fff;
}

.bg-dark {
background-color:#3b3e43;
}

#ascrail2000 {
right:0px !important;
}

#project-request {
position:fixed;
display:block;
width:450px;
height:100%;
right:-450px;
background:#2b2e33;
text-align:left !important;
z-index:10000;
}

#project-request-inner {
position:absolute;
display:block;
width:100%;
height:100%;
overflow-y:scroll;
}

#project-request h2{
font-size:24px;
text-align:left;
font-weight:400;
margin-bottom:0px;
letter-spacing:-1px;
}

#project-request p{
font-size:16px;
text-align:left;
}

#project-request #toggle {
position:absolute;
top:30%;
left:0;
margin-left:-60px;
width:60px;
height:60px;
background:#2b2e33;
overflow:hidden;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
}

#project-request #toggle:hover {
padding:0 10px;
margin-left:-80px;
background:#f66c5a;
}

#project-request #toggle .toggler{
width:60px;
height:60px;
background-image:url(../images/bg/closer.png);
background-repeat:no-repeat;
background-position:center center;
background-size:120% auto;
-webkit-background-size:120% auto;
-moz-background-size:120% auto;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transition:.5s;
-webkit-transition:.5s;
-moz-transition:.5s;
}

#project-request #toggle:hover .toggler{
transform:rotate(315deg);
-webkit-transform:rotate(315deg);
-moz-transform:rotate(315deg);
-ms-transform:rotate(315deg);
-o-transform:rotate(315deg);
}

#project-request #toggle .toggler a.projects{
display:block;
position:absolute;
top:0;
width:60px;
height:60px;
background:transparent;
}

#project-request #toggle .toggler a.close{
display:none;
position:absolute;
top:0;
width:60px;
height:60px;
background:transparent;
}

#project-request #toggle .toggler.open{
width:60px;
height:60px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}

#project-request #toggle .toggler.open a.projects{
display:none;
}

#project-request #toggle .toggler.open a.close{
display:block;
}



#project-request #back-top {
position:absolute;
display:none;
top:30%;
margin-top:62px;
left:0;
margin-left:-60px;
width:60px;
height:60px;
background:#272a2e;
background:#252525;
background-image:url(../images/bg/arrow-up.png);
background-repeat:no-repeat;
background-position:center center;
background-size:120% auto;
-webkit-background-size:120% auto;
-moz-background-size:120% auto;
overflow:hidden;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
z-index:0;
}

#project-request #back-top:hover {
padding:0 10px;
margin-left:-80px;
background-color:#f66c5a;
}

#project-request #back-top a{
display:block;
height:60px;
width:60px;
}

@-moz-keyframes page-wrap {
    0% {
		filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	
	90% {
	filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	
	
    100% {
        margin-top: 0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

@-webkit-keyframes page-wrap {
    0% {
		filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	
	90% {
	filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	
	
    100% {
        margin-top: 0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

@keyframes page-wrap {
    0% {
		filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	
	90% {
	filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	
	
    100% {
        margin-top: 0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

#page-wrap {
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
right:0;
margin:0;
padding:0;
background:#fff;
animation:page-wrap 6s linear;
-webkit-animation:page-wrap 6s linear;
-moz-animation:page-wrap 6s linear;
z-index:2;
}

#page-wrap.sub {
top:0;
margin-top:0;
animation:none;
-webkit-animation:none;
-moz-animation:none;
}

@-webkit-keyframes loader {
    0% {

		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
    }
	
	
    100% {

		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
    }
}

@keyframes loader {
    0% {

		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
    }
	
	
    100% {

		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
    }
}

#loader-wrap {
position:fixed;
display:block;
top:42%;
left:0;
right:0;
margin:0 auto;
text-align:center;
overflow:hidden;

}

#loader-wrap img{
width:200px;
margin-top:40px;
opacity:.2;
}

.progress-circle-container {
position: relative;
height: 108px;
width: 108px;
margin: 0 auto 0;
}

.progress-circle-outer {
height: 100px;
width: 100px;
border:4px solid rgba(255,255,255,.2);
border-bottom:4px solid rgba(255,255,255,1);
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
animation:loader 1s linear;
-webkit-animation:loader 1s infinite linear;
-moz-animation:loader 1s infinite linear;
}
	
.progress-circle-inner {
height: 100px;
width: 100px;
margin: 0 auto;
position: absolute;
font-family:"kulturista-web",Helvetica, Arial, sans-serif;
font-weight:300;
left: 7px;
top: 36px;
color:#fff;
}

.number {
font-size: 30px;
position: relative;
left: 3px;
        }

.unit {
font-size: 18px;
text-shadow: 0 1px 1px white;
position: relative;
left: -2px;
}

@-webkit-keyframes header {
    0% {
        margin-top: -80px;
		filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	

	
    100% {
        margin-top: 0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

@keyframes header {
    0% {
        margin-top: -80px;
		filter:     alpha(opacity = 0);
	-ms-filter: "alpha(opacity = 0)";
	opacity:    0;
    }
	
	
    100% {
        margin-top: 0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

header {
display:block;
width:100%;
background:transparent;
z-index:10000;
}

#header-wrap {
position:absolute;
width:100%;
height:70px;
top:0px;
left:0;
right:0;
margin-top:-70px;
padding:100px 0 20px;
background:transparent;
transition:background 200ms ease-in-out;
-webkit-transition:background 200ms ease-in-out;
-moz-transition:background 200ms ease-in-out;
z-index:10000;
}

#header-wrap:hover {
background:rgba(43, 46, 51,.6);
}


#header-wrap.sticky {
position:fixed;
padding:0;
margin-top:0;
background:#2f3237;
transition:margin-top .5s ease-in-out,background .5s ease-in-out;
-webkit-transition:margin-top .5s ease-in-out,background .5s ease-in-out;
-moz-transition:margin-top .5s ease-in-out,background .5s ease-in-out;
z-index:10000;
}

#header-wrap.sticky:hover {
background:rgba(43, 46, 51,1);
z-index:10000;
}

#start-menu {
position:fixed;
display:none;
width:100%;
height:80%;
top:0;
padding:10% 0;
background:#1f1e28;
background:rgba(23, 26, 31,.95);
text-align:center;
}
#start-menu h2{
font-size:24px;
}

a.menu-closer {
position:absolute;
right:0;
top:-5px;
}

a.menu-closer img{
width:120px;
transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
}

a.menu-closer:hover img{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

a.menu-closer:focus img{
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}

#start-menu ul:hover li a{color:#666}
#start-menu ul li:hover a{color:#fff}

#start-menu ul{
position:relative;
display:block;
max-width:600px;
margin:0 auto 60px;
text-align:center;
overflow:hidden;
}

#start-menu li{
display:inline-block;
width:50%;
float:left !important;
line-height:100px;
}

#start-menu li.br{
border-right:0;
}

#start-menu li.bb{
border-bottom:0;
}

#start-menu li a{
color:#999;
font-size:2.0em;
display:block;
font-weight:300;
padding:0px 0;
}

#start-menu li a.highlighted{
color:#fff;
}

#start-menu li a.highlighted:hover{
color:#fff !important;
background:#f7634f;
}

#start-menu li a:hover{
color:#121a1f !important;
background:#fff;
}

#start-menu a{
color:#fff;
font-size:21px;
font-weight:300;
padding:0;
}

#start-menu a:hover {
color:#f7634f;
}

#menu-wrap {
position:relative;
width:100%;
max-width:90%;
height:70px;
margin:0 auto;
}

h1#logo{
position:relative;
display:inline-block;
height:70px !important;
line-height:70px !important;
font-size:14px;
padding:0;
margin:0;
float:left;
background:transparent;
overflow:hidden;
z-index:7000;
}

h1#logo img{
width:167px;
line-height:70px;
margin:0;
transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
}

.toggle-wrap {
position:absolute;
display:inline-block;
right:0;
top:20px;
height:30px;
line-height:30px;
overflow:hidden;
}

.toggle-wrap a.small-menu {
position:relative;
display:inline-block;
color:#fff;
font-size:14px;
height:30px;
line-height:30px;
padding:0;
text-transform:uppercase;
overflow:hidden;
}

.toggle-wrap a.language{
height:30px;
line-height:30px;
padding:0 10px 0 0;
margin-right:10px;
}

.toggle-wrap a.language.first-child{
border-right:1px solid #666;
}

a.menu-toggle i{
display:inline-block;
vertical-align: top;
color:#fff;
font-size:30px;
line-height:30px;
margin-left:10px;
padding:0;
}

#menu {
position:relative;
display:none;
height:70px;
float:right;
transition: ease-in;
-webkit-transition: ease-in;
-moz-transition: ease-in;
text-align:right;
overflow:hidden;
z-index:6999;
}

#menu ul{
position:relative;
margin:0;
padding:0;
float:left;
margin-right:30px;
list-style-type: none;
list-style:none;
text-align:right;
overflow:hidden;
transition:1.5s ease-in-out;
-webkit-transition:1.5s ease-in-out;
-moz-transition:1.5s ease-in-out;
}

#menu ul li{
position:relative;
display:inline;
width:100%;
height:70px;
line-height:70px;
list-style-type: none;
list-style:none;
margin:0 0 0 -4px;
padding:0;
overflow:hidden;
transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
}

#menu ul li a{
position:relative;
display:inline-block;
font-size:13px;
color:#fff;
font-weight:normal;
padding:0 10px;
text-transform:uppercase;
letter-spacing:2px;
text-align:center;/*
text-transform:uppercase;*/
transition:.2s ease-in-out;
-webkit-transition:.2s ease-in-out;
-moz-transition:.2s ease-in-out;
}

#menu ul li a:hover{
color:#121a1f;
background:#fff;
}

#header-wrap.sticky #menu{
display:block;
}

#header-wrap.sticky .toggle-wrap {

}

#header-wrap.sticky #menu ul li {
height:70px;
line-height:70px;
}

#header-wrap.sticky h1#logo{
background:transparent;
overflow:hidden;
}

#header-wrap.sticky h1#logo img{
line-height:70px;margin-top:20px;
}

#menu ul li:hover p{
display:block;
opacity:1;
}

#menu ul hr{
display:block;
height:1px;
border:0;
text-align:center;
margin:20px auto;
}

#socialItems {
position:relative;
height:70px;
margin:0 0 0 60px;
padding:0;
vertical-align: bottom;
overflow:hidden;
}

#socialItems a{
position:relative;
display:inline-block;
width:20px;
height:70px;
font-size:22px;
color:#666;
font-weight:bold;
line-height:70px;
-webkit-margin-before:0;
padding:0 30px;
margin:0 0 0 -4px;
text-align:center;
transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
overflow:hidden;
}

#header-wrap.sticky #socialItems a{
color:#666;
}

#header-wrap.sticky #socialItems a:hover{
color:#666;
background:#fff;
}

#video-overlay {
position:absolute;
width:100%;
height:100%;
z-index:2000;
left:0;
right:0;
margin:0 auto;
background:rgba(23, 26, 31,.7);
top:0;
transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
}


@-moz-keyframes video-text {
    0% {
		margin-top:100px;
		filter:     alpha(opacity = 0);
		-ms-filter: "alpha(opacity = 0)";
		opacity:    0;
    }
	
	
    100% {
        margin-top:0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

@-webkit-keyframes video-text {
    0% {
		margin-top:100px;
		filter:     alpha(opacity = 0);
		-ms-filter: "alpha(opacity = 0)";
		opacity:    0;
    }
	
	
    100% {
        margin-top:0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

@keyframes video-text {
    0% {
		margin-top:100px;
		filter:     alpha(opacity = 0);
		-ms-filter: "alpha(opacity = 0)";
		opacity:    0;
    }
	
	
    100% {
        margin-top:0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

#video-text {
position:relative;
width:100%;
max-width:1000px;
top:36%;
filter:     alpha(opacity = 100);
-ms-filter: "alpha(opacity = 100)";
opacity:    100;
margin:0 auto;
text-align:center;
animation:visible1 1s 5s cubic-bezier(.34,.69,.59,.93);
-webkit-animation:visible1 1s 5s cubic-bezier(.34,.69,.59,.93);
-moz-animation:visible1 1s 5s cubic-bezier(.34,.69,.59,.93);
}

#video-text p{
width:700px;
color:#fff;
font-size:28px;
line-height:40px;
font-weight:300;
margin-bottom:60px;
}

#video-overlay h2{
color:#fff;
font-family:'kulturista-web', serif;
font-size:24px;
line-height:50px;
font-weight:300;
text-align:center;
letter-spacing:0px;
margin-bottom:10px;
}

#homeVideo {
position:fixed;
width:100% !important;
min-width:100% !important;
min-height:100%;
top:0;

}

#page {
position:absolute;
top:0;
width:100%;
height:100%;
margin-top:0px;
background-image:url(../images/bg/main-bg.jpg);
background-repeat:no-repeat;
background-position:center-center;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;

}

#content {
top:100%;
display:block;
position:relative;
margin:0;
left:0;
right:0;
padding:0;
background:#fff;
background:rgba(255,255,255,1);
-webkit-transform-style: preserve-3d;
overflow:hidden;
}

#content.sub {
top:0;
margin-top:0;
}

#about {
position:relative;
display:block;
width:100%;
max-width:1200px;
padding:100px 0;
margin:0 auto;
text-align:center;
overflow:hidden;
z-index:9999;
}

#about p {
max-width:800px;
}

#about img{
width:200px;
}

#services {
padding-top:0px;
border-top:1px solid #eee;
overflow:hidden;
margin-bottom:100px;
}

#services .col{
position:relative;
display:inline-block;
width:33.3333333333%;
float:left;
padding-top:60px;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity = 0)";
opacity: 0;
border-top:5px solid transparent;
overflow:hidden;
transition:200ms ease-in-out;
-webkit-transition:200ms ease-in-out;
-moz-transition:200ms ease-in-out;
}

#services .col:hover{
border-top:5px solid #f7634f;
background:#eee;
}



@-moz-keyframes visible1 {
    0% {
		margin-top:100px;
		filter:     alpha(opacity = 0);
		-ms-filter: "alpha(opacity = 0)";
		opacity:    0;
    }
	
	
    100% {
        margin-top:0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

@-webkit-keyframes visible1 {
    0% {
		margin-top:100px;
		filter:     alpha(opacity = 0);
		-ms-filter: "alpha(opacity = 0)";
		opacity:    0;
    }
	
	
    100% {
        margin-top:0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

@keyframes visible1 {
    0% {
		margin-top:100px;
		filter:     alpha(opacity = 0);
		-ms-filter: "alpha(opacity = 0)";
		opacity:    0;
    }
	
	
    100% {
        margin-top:0px;
		filter:     alpha(opacity = 100);
		-ms-filter: "alpha(opacity = 100)";
		opacity:    1;
    }
}

#services .col.visible {
margin-top:0px;
filter:     alpha(opacity = 100);
-ms-filter: "alpha(opacity = 100)";
opacity:    100;
animation:visible1 800ms cubic-bezier(.34,.69,.59,.93);
-webkit-animation:visible1 800ms cubic-bezier(.34,.69,.59,.93);
-moz-animation:visible1 800ms cubic-bezier(.34,.69,.59,.93);
}



#services .col img{
width:60%;
}

#services .col h4{
font-size:16px;
font-family:"Proxmia-Nova", Helvetica, Arial, sans-serif;
width:80%;
color:#7e7e7f;
font-weight:300;
line-height: 30px;
margin:10px auto 60px;
text-align:center;
}

#theheatison {
position:relative;
display:block;
width:100%;
max-width:1200px;
margin:0 auto;
padding:100px 0;
background:#f3f4f5;
overflow:hidden;
}

#theheatison h2 {
max-width:1200px;
}

#theheatison p{
display:inline-block;
text-align:left;
float:left;
}

#theheatison .meta-date{
display:inline-block;
position:relative;
width:30%;
margin:20px 0;
padding-top:20px;
border-top:1px solid #eee;
height:40px;
float:left;
}

#theheatison .meta-date p{
display:inline-block;
position:relative;
font-size:16px;
font-weight:400;
font-family:"Kulturista-web", serif;
color:#f7634f;
margin:10px 0;
float:left;
}


#theheatison .meta-date p span{
display:inline-block;
position:relative;
font-size:16px;
font-family:"Proxima-Nova", sans-serif;
color:#7e7e7f;
}

#theheatison .news{
display:inline-block;
position:relative;
width:70%;
float:left;
padding-top:0px;
border-top:1px solid #eee;
margin:20px 0 20px;
}

#projects {
position:relative;
display:block;
width:100%;
max-width:1200px;
margin:0 auto;
padding:100px 0;
background:#fff;
text-align:center;
overflow:hidden;
}

#projects h2, #projects p{

}

#projects-col-wrap {
width:100%;
overflow:hidden;

}

#projects-col-wrap .col {
position:relative;
display:inline-block;
height:400px;
width:400px;
margin:0 0 30px;
float:left;
overflow:hidden;

}

#projects-col-wrap .col a{
margin:0 !important;

}

#projects-col-wrap .col img {
width:100%;min-height:100%; vertical-align:middle; margin:0; transition:.5s ease-in-out; -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out;

}

#projects-col-wrap .col:hover img{
transform:scale(1.25); -webkit-transform:scale(1.25); -moz-transform:scale(1.25);
}

#projects-col-wrap .col:hover .permalink img{
transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);
}

#projects-col-wrap .col a.col-overlay {
position:absolute;
display:table-cell;
width:100%;
height:100%;
top:100%;
background:rgba(245,90,69,.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80f7634f, endColorstr=#80f7634f);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80f7634f, endColorstr=#80f7634f)";
opacity:0;
filter:opacity(0);
-ms-filter:opacity(0);
transition:.3s  ease-in-out;
-webkit-transition:.3s  ease-in-out;
-moz-transition:.3s ease-in-out;
text-align:center;
z-index:2;
}

#projects-col-wrap .col:hover a.col-overlay{
top:0;
opacity:1;
filter:opacity(1);
-ms-filter:opacity(100);
}

#projects-col-wrap .col a.col-overlay .link{
position:relative;
display:inline-block;
font-family:"Proxima-Nova",Arial, Helvetica, sans-serif;
color:#fff;
font-size:14px;
font-weight:300;
margin:30px auto;
text-transform:uppercase;
letter-spacing:1.5px;
text-align:center;
opacity:0;
transition:.7s;
-webkit-transition:.7s;
-moz-transition:.7s;
}

#projects-col-wrap .col:hover a.col-overlay .link{

opacity:1;
}
#projects-col-wrap .col:hover a.col-overlay .link:hover{
color:#333;
background:#fff;
}

#projects-col-wrap .col a.col-overlay .permalink{
display:table-cell;
position:absolute;
width:100%;
top:50%;
font-size:18px;
color:#fff;
font-family:'Droid-serif', serif;
text-align:center;
}

#projects-col-wrap .col a.col-overlay img{
height:30px !important;
min-height:30px !important;
max-height:30px !important;
width:auto !important;
display:block;
margin:0 auto 20px;
}

.quote {
width:100%;
padding:60px 0 ;
text-align:center;
}

.quote p{
font-size:36px;
font-style:italic;
text-align:center !important;
}

.quote p .author{
display:block;
font-size:18px;
text-align:right !important;
margin-top:20px;
}

#clients {
position:relative;
display:block;
width:100%;
max-width:1200px;
margin:0 auto;
padding:100px 0;
background:#f3f4f5;
text-align:center;
overflow:hidden;
}

#clients p{
font-size:16px;
}

#clients a{
margin-top:30px;
}

#clients  img{
display:inline-block;
width:240px;
float:left;
margin:10px 30px;
filter: alpha(opacity=50);
opacity: 0.5;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
}

#clients  img:hover{
filter: alpha(opacity=1);
opacity: 1;
}

#contact {
position:relative;
display:block;
width:100%;
padding:160px 0;
margin:0 auto;
background-image:url(../images/bg/contact-bg.jpg);
background-position:center bottom;
background-repeat:no-repeat;
background-size:cover;
-wbekit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
text-align:center;
overflow:hidden;
}

#contact p{
max-width:80%;
}


#contact-form {
position:relative;
display:block;
width:60%;
padding:60px 20%;
overflow:hidden;
z-index:6000;
}

form {
position:relative;
display:block;
margin-top:30px;
}

form input {
margin: 0 auto 10px;
display: block;
width:96%;
height: 40px;
line-height: 40px;
padding:0 2%;
font-family: "Proxima-Nova",Arial, Helvetica, sans-serif;
font-size: 14px;
color:#fff;
font-weight: 300;
border:0;
background:transparent;
border-bottom:1px solid #666;
outline:0;
transition:.3s;
-webkit-transition:.3s;
-moz-transition:.3s;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
-webkit-appearance:none;
}
	
form textarea {
margin: 0 auto 20px;
display: block;
width:96%;
height: 120px;
padding:10px 2%;
font-family: "Proxima-Nova", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
color:#fff;
font-weight: 300;
border:0;
background:transparent;
border-bottom:1px solid #666;
outline:0;
transition:.3s;
-webkit-transition:.3s;
-moz-transition:.3s;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
-webkit-appearance:none;
}
	
form #submit {
position:relative;
display:inline-block;
font-family:"proxima-nova",Arial, Helvetica, sans-serif;
width:100%;
height:50px;
font-size:11pt;
font-weight:600;
color:#f7634f;/*
background:#f7634f;*/
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
padding:0;
border:2px solid #f7634f;
margin:30px 0;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
transition:.5s;
-webkit-transition:.5s;
-moz-transition:.5s;
-webkit-appearance:none;
cursor:pointer;
}

form #submit:hover {
color:#fff;
background:#f66c5a;
border-color:#f66c5a;
}

#footer {
position:relative;
display:block;
width:100%;
height:auto;
background:#fff;
overflow:hidden;
}

.footer-inner {
position:relative;
display:block;
width:100%;
max-width:1200px;
font-size:15px;
padding:30px 0 0;
background:#fff;
margin:0 auto;
overflow:hidden;
}

.footer-inner p{
font-size:14px;
font-weight:400;
margin-bottom:30px;
}

.footer-inner a{
font-size:14px;
font-weight:400;
margin:0 10px;
}

.footer-inner a:hover {
color:#f7634f;
}

.footer-logo {
position:relative;
display:inline-block;
width:25%;
float:left;
}

.footer-logo img{
width:160px;
filter: alpha(opacity=60);
opacity: 0.6;
margin-top:10px;
}

.footer-col {
position:relative;
display:inline-block;
width:25%;
float:left;
}

#copyright-footer {
position:relative;
display:inline-block;
width:100%;
max-width:1200px;
padding:60px 0 30px;
margin:0 auto;
}

#copyright-footer p{
font-family:"Proxima-Nova", Helvetica, Arial, sans-serif;
font-size:14px;
color:#4a4a4a;
margin:0;
overflow:hidden;
}

#copyright-footer p .footer-menu{
float:right;
}

#copyright-footer a{
font-family:"Proxima-Nova", Helvetica, Arial, sans-serif;
font-size:12px;
color:#4a4a4a;
margin:0 15px;
text-transform:uppercase;
}

#copyright-footer a:hover{
color:#fff;
}

#imprint, #agb {
position:relative;
display:block;
width:100%;
max-width:1200px;
padding:100px 0;
margin:0 auto;
text-align:left !important;
overflow:hidden;
z-index:9999;
}

#imprint p , #agb p{
text-align:left !important;
font-size:18px;
}

#imprint p , #agb a{
text-align:left !important;
font-size:18px;
}



/***************************************** Notebook/Laptop ************************************************************/



@media screen and (max-width: 1200px){

#menu-wrap {
max-width:90%;
}

#about, #theheatison, #projects, .footer-inner, #imprint, #agb {
max-width:90%;
}

#about p {
max-width:80%;
}

#video-text p{
width:60%;
font-size:21px;
line-height:30px;
margin-bottom:30px;
}

#video-overlay h2{
font-size:18px;
line-height:30px;
margin-bottom:10px;
}

#homeVideo {
position:fixed;
width:auto !important;
min-width:auto !important;
min-height:110%;
height:110%;
top:0;
}

#clients img {
width:25%;
max-width:25%;
margin:10px 0;
}
}



/***************************************** Tablets ************************************************************/



@media screen and (max-width: 960px){
#header-wrap:hover {
background-color:transparent;
}

#start-menu ul{
position:relative;
display:block;
max-width:90%;
top:-80px;
margin:0px auto -60px;
text-align:center;
overflow:hidden;
}

#start-menu li{
line-height:40px;
}

#start-menu li a{
color:#999;
font-size:1.4em;
display:block;
font-weight:300;
padding:0px 0;
}

#start-menu h4{
font-size:12px;
margin:10px auto;
}

#start-menu a{
font-size:14px;
display:block;
margin-bottom:20px;
}


#video-overlay {
height:500px !important;
}

#video-text {
top:29%;
}

#video-text p{
width:70%;
font-size:18px;
line-height:24px;
margin-bottom:30px;
}

#video-overlay h2{
font-size:18px;
line-height:30px;
margin-bottom:10px;
}

#video-overlay a.more-btn{
font-size:10px;
}

#homeVideo {
display:none;
}

#content {
position:absolute;
top:0;
margin-top:500px;
z-index:6000;
}


}



/***************************************** Schmartfon ************************************************************/



@media screen and (max-width: 767px){
.desktop {
display:none;
}

.mobile {
display:block;
}

.progress-circle-inner {
display:none;
}

#project-request {
position:fixed;
display:block;
width:300px;
height:100%;
right:-450px;
background:#2b2e33;
text-align:left !important;
overflow-y:scroll;
z-index:10000;
}

#project-request h2{
font-size:24px;
text-align:left;
font-weight:400;
margin-bottom:0px;
letter-spacing:-1px;
}

#project-request p{
font-size:16px;
text-align:left;
}

#contact-form {
position:relative;
display:block;
width:80%;
padding:60px 10%;
overflow:hidden;
z-index:6000;
}

#project-request #toggle {
position:absolute !important;
top:0px !important;
right:0 !important;
left:250px;
margin:0px !important;
padding:0 !important;
width:50px;
height:50px;
background:#2b2e33;
overflow:hidden;
transition:.2s;
-webkit-transition:.2s;
-moz-transition:.2s;
z-index:10000;
}

#project-request #toggle .toggler{
width:50px;
height:50px;
padding:0 !important;
margin:0px !important;
}

#project-request #toggle .toggler a.projects{
width:50px;
height:50px;
padding:0 !important;
margin:0px !important;
}

#project-request #toggle .toggler a.close{
display:none;
position:absolute;
top:0;
width:50px;
height:50px;
padding:0 !important;
margin:0px !important;
}

#project-request #toggle .toggler.open{
width:50px;
height:50px;
padding:0 !important;
margin:0px !important;
}

#header-wrap {
position:fixed !important;
height:50px !important;
padding:0 !important;
margin:0 !important;
transition:none !important;
-webkit-transition:none !important;
-moz-transition:none !important;
box-shadow:none !important;
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
}

#menu-wrap {
position:relative;
width:100%;
max-width:90%;
height:50px;
margin:0 auto;
}

h1#logo{
position:relative;
display:inline-block;
height:50px !important;
line-height:50px !important;
font-size:14px;
padding:0;
margin:0;
float:left;
background:transparent;
overflow:hidden;
z-index:7000;
}

h1#logo img{
width:120px;
line-height:50px;
margin:15px 0 0 !important;
transition:.3s ease-in-out;
-webkit-transition:.3s ease-in-out;
-moz-transition:.3s ease-in-out;
}

.toggle-wrap {
position:absolute;
display:inline-block;
right:0px;
top:10px;
height:30px;
line-height:30px;
border-left:1px solid rgba(255,255,255,.05);
overflow:hidden;
}

#about, #theheatison, #projects, #clients, .footer-inner, #imprint, #agb {
max-width:90%;
}

#contact {
padding:100px 0;
}

h2 {
display:block;
position:relative;
font-family:'kulturista-web', serif;
font-size:30px;
font-weight:400;/*
font-weight:bold;*/
color:#2b2e33;
line-height:44px;
margin:0 auto 30px;
text-align:center;
letter-spacing:-1px;
}

h2.subhead {
font-family:"Proxima-Nova", Helvetica, Arial, sans-serif;
font-size:0.4em;
line-height:40px !important;
letter-spacing:-1px;
}

h3 {
display:block;
font-family:'kulturista-web', serif;
font-size:18px;
line-height:30px;
font-weight:400;
color:#2b2e33;
margin:30px auto 10px;
text-rendering: optimizeLegibility;
}

h4 {
display:block;
position:relative;
font-family:'kulturista-web', serif;
font-size:18px;
line-height:24px;
text-rendering: optimizelegibility;
color:#666;
margin:30px auto;
font-weight:400;
text-align:center;
}

p {
font-size:16px;
line-height:24px;
}

#page-wrap {
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
right:0;
margin:0;
padding:0;
background:#fff;
animation:page-wrap 1s linear;
-webkit-animation:page-wrap 1s linear;
-moz-animation:page-wrap 1s linear;
z-index:2;
}

#header-wrap h1#logo img{
line-height:70px;margin-top:20px;
}

.toggle-wrap a.language{
display:none;
}


a.menu-closer {
position:absolute;
width:50px;
height:50px;
top:0;
right:0;
z-index:10000;
}

a.menu-closer img{
width:50px;
transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
}

#start-menu {
height:100%;
}

#start-menu ul{
position:relative;
display:block;
max-width:90%;
top:-80px;
margin:0px auto -60px;
text-align:center;
overflow:hidden;
}

#start-menu h2{
margin:40px auto 0px;
}

#start-menu li{
display:inline-block;
width:90%;
float:none !important;
margin:0 auto;
line-height:30px;
}

#start-menu li a{
color:#999;
font-size:1.2em;
display:block;
font-weight:300;
padding:0px 0;
}

#start-menu a{
font-size:14px;
display:block;
margin-bottom:20px;
}

#start-menu h4 {
display:none;
}

a.home-scroller {
padding:10px 0;
}

#video-overlay {
height:450px !important;
}

#video-text {
top:120px;
animation:visible1 1s 1s cubic-bezier(.34,.69,.59,.93);
-webkit-animation:visible1 1s 1s cubic-bezier(.34,.69,.59,.93);
-moz-animation:visible1 1s 1s cubic-bezier(.34,.69,.59,.93);
}

#video-text p{
width:80%;
font-size:18px;
line-height:24px;
margin-bottom:30px;
}

#video-overlay h2{
font-size:18px;
line-height:30px;
margin-bottom:10px;
}

#video-overlay a.more-btn{
font-size:10px;
}

#homeVideo {
display:none;
}

#content {
position:absolute;
top:0;
margin-top:450px;
z-index:6000;
}

#clients img {
width:25%;
max-width:25%;
margin:10px 0;
}

#services .col {
width:100%;
float:none;
padding:30px 0;
}

#services .col h4{
width:90%;
}

#about p {
width:80%;
}

#services .col h4{
margin-bottom:0;
}


#theheatison p{
float:none;
}

#theheatison .meta-date{
width:90%;
margin:0px auto;
float:none;
}

#theheatison .meta-date p{
display:inline-block;
position:relative;
font-size:16px;
font-weight:400;
font-family:"Kulturista-web", serif;
color:#f7634f;
margin:10px 0;
float:left;
}


#theheatison .meta-date p span{
display:inline-block;
position:relative;
font-size:16px;
font-family:"Proxima-Nova", sans-serif;
color:#7e7e7f;
}

#theheatison .news{
width:90%;
margin:0px auto;
float:none;
border:0;
}

#clients img {
width:50%;
max-width:50%;
margin:10px 0;
}

.footer-logo {
position:relative;
display:inline-block;
width:100%;
float:none;
margin:0 auto;
text-align:center;
}

.footer-col {
position:relative;
display:inline-block;
width:100%;
float:none;
margin:0 auto;
text-align:center;
}

.footer-col p{
text-align:center;
margin:10px auto;
}

.footer-inner {
padding-bottom:30px;
}

}