/* Start font embedding */
 
@font-face {
	font-family:"WeblySleek_italic";
	src:url("weblysleekuili.eot?") format("eot"),
		url("weblysleekuili.woff") format("woff"),
		url("weblysleekuili.ttf") format("truetype"),
		url("weblysleekuili.svg#WeblySleekUILight-Italic") format("svg");
	font-weight:normal;
	font-style:normal;
}

@font-face {
	font-family:"WeblySleek";
	src:url("weblysleekuil.eot?") format("eot"),
		url("weblysleekuil.woff") format("woff"),
		url("weblysleekuil.ttf") format("truetype"),
		url("weblysleekuil.svg#WeblySleekUILight") format("svg");
	font-weight:normal;
	font-style:normal;
}



/* End font embedding */

/* For modern browsers */
.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}

.clearfix:after {
	clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
	*zoom:1;
}

* {
	max-height:100000px;
}

html {
	overflow-y: hidden; 
	height: 100%;
	-webkit-text-size-adjust:none;
	font-size:20px;
}

@media screen and (max-width:1900px) {
	html {
		font-size:18px;
	}
}

@media screen and (max-width:1800px) {
	html {
		font-size:16px;
	}
}

body {
	background:#000;
	background-position:center;
	background-repeat:no-repeat;
	height:100%;
	padding:0;
	margin:0;
	font-family:'WeblySleek';
	color:rgba(255,255,255,0.3);
	line-height:140%;
	min-width:1024px;
}

#top,
#bottom {
	height:18%;
	background:#0a0a0a;
}

#center {
	height:64%;
	position:relative;
	text-align:center;
	background:#222;
}

@media screen and (max-height:850px) {
	#top,
	#bottom {
		height:10%;
	}
	
	#center {
		height:80%;
	}
}

#center > div {
	height:100%;
}

#center > div > div {
	height:100%;
}

.slick-track {
	height:100%;
}

.slide {
	opacity:0.3;
}

#slide > div {
	text-align:left;
}

#slide a {
	text-decoration:none;
}

#slide button.slick-prev,
#slide button.slick-next {
	color:#fff;
	position:absolute;
	top:100%;
	cursor:pointer;
	opacity:0.3;
	font-size:1.2rem;
	padding:15px;
	-moz-transition:opacity 0.3s ease;
	-webkit-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}

#slide button.slick-prev:hover,
#slide button.slick-next:hover {
	opacity:0.5;
}

#slide button.slick-prev {
	left:0;
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	transform:rotate(180deg);
}

#slide button.slick-next {
	right:0;
}

.slick-dots {
	display:inline-block;
	margin-top:20px;
}

.slick-dots li {
	display:inline;
	padding:0 6px;
}

.slick-dots li button {
	color:rgba(0,0,0,0);
	background:rgba(255,255,255,0.1);
	width:20px;
	height:20px;
	border-radius:20px;
	cursor:pointer;
	-moz-transition:background 0.3s ease;
	-webkit-transition:background 0.3s ease;
	transition:background 0.3s ease;
}

.slick-dots li button:hover {
	background:#2e2e2e;
}

.slick-dots li[aria-hidden="false"] button { /* active slide */
	background:#535353;
}

.slideLayout1 > div {
	float:left;
	width:50%;
	overflow:hidden;
	height:100%;
}

.slideLayout1 > div:first-child {
	padding:30px;
}

.slideLayout1 > div:last-child {
	background:#eaede8;
}

.slideLayout1 > div:last-child img {
	height:100%;
}

.slideLayout2 > div {
	float:left;
	width:50%;
	overflow:hidden;
	height:50%;
	padding:30px;
}

.slideLayout2 > div.bottom {
	padding-top:0;
}

.slideLayoutReferenzen {
	position:relative;
	padding:15px;
}

.slideLayoutReferenzen h2 {
	padding:15px;
}

.slideLayoutReferenzen a {
	float:left;
	padding:15px;
	padding-top:40px;
	width:12.5%;
	position:relative;
}

.slideLayoutReferenzen a img {
	width:100%;
}

.slideLayoutReferenzen a .overlay {
	position:absolute;
	font-size:0.8rem;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.1);
	text-align:center;
	opacity:0;
	padding-top:5px;
	-moz-transition:opacity 0.3s ease;
	-webkit-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}

.slideLayoutReferenzen a .overlay:hover {
	opacity:1;
}

body.touch .slideLayoutReferenzen a {
	padding-top:30px;
}

body.touch .slideLayoutReferenzen a .overlay {
	opacity:1;
	background:transparent;
}

@media screen and (max-width:1800px) {
	
	.slideLayoutReferenzen a {
		width:25%;
	}
	
	.slideLayoutReferenzen a .overlay {
		font-size:1rem;
	}
}

.slick-slide {
	position:relative;
}

#slide > div > div > .slick-slide {
	opacity:0;
	-moz-transition:opacity 0.3s ease;
	-webkit-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}

#slide > div > div > .slick-slide.slick-active,
#slide > div > div > .slick-slide.slick-cloned {
	opacity:1;
}

.verticalScroll {
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	height:100%;
}

.slide1 {
	background:rgba(255,255,100,0.2);
}

.slide2 {
	background:rgba(255,100,255,0.2);
	height:100%;
}

.slide3 {
	background:rgba(100,255,255,0.2);
	height:100%;
}

.slide4 {
	background:rgba(100,200,50,0.2);
	height:100%;
}

h2 {
	font-size:4.5rem;
	font-weight:normal;
	line-height:90%;
	margin-bottom:20px;
	cursor:default;
	cursor:default;
	font-family:'WeblySleek_italic';
}

@media screen and (max-width:1300px) {
	h2 {
		font-size:3rem;
	}
}

.subtitle {
	margin-top:30px;
	font-size:1.5rem;
}

a.border {
	display:inline-block;
	padding:5px 10px;
	border:1px solid rgba(255,255,255,0.3);
	background:transparent;
	-moz-transition:background 0.3s ease;
	-webkit-transition:background 0.3s ease;
	transition:background 0.3s ease;
}

a.border:before {
	content: '➤ ';
}

a.border:hover {
	background:rgba(255,255,255,0.1);
}

a.slidedown {
	margin-top:30px;
}

.intro {
	text-align:center;
	height:100%;
	width:100%;
	display:table;
}

.intro h2 {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	font-size:4.5rem;
	font-weight:bold;
}

h2 span {
	opacity:0;
	-moz-transition:opacity 1s ease, color 1s ease;
	-webkit-transition:opacity 1s ease, color 1s ease;
	transition:opacity 1s ease, color 1s ease;
}

h2 span:not(.visible) {
	transition:none;
}

.intro h2 span.visible,
h2 span.visible {
	color:rgba(255,255,255,0.3);
	opacity:1;
}

h2 span.visible:hover {
	-moz-transition:color 0.1s ease;
	-webkit-transition:color 0.1s ease;
	transition:color 0.1s ease;
	color:rgba(255,255,255,0.1);
}

.intro h2 span {
	-moz-transition:color 1s ease;
	-webkit-transition:color 1s ease;
	transition:color 1s ease;
	padding:4px 0;
	color:#222;
	opacity:1;
}