/* Layout - Intro - Animation */

#GalleryWrapper {
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

@media all and (max-width: 500px){

	#GalleryWrapper {
		height: 300px;
		position: absolute;
		top: 111px;
	}

}

/* Layout - Intro - Socialmedia */

.socialmedia {
	position: fixed;
	right: -55px;
	top: 250px;
	z-index: 11;
	-webkit-transition: right 450ms ease-out;
	-moz-transition: right 450ms ease-out;
	-ms-transition: right 450ms ease-out;
	-o-transition: right 450ms ease-out;
	transition: right 450ms ease-out;
}
.socialmedia.show {
	right: 0;
}
.socialmedia > li > a {
	background: #ffffff;
	background: rgba(255, 255, 255, 0.75);
	color: #EA5B0C;
	display: block;
	font-family: "fontello";
	font-size: 40px;
	font-weight: normal;
	height: 55px;
	line-height: 1;
	margin: 0 0 1px 0;
	padding: 6px 0 0 0;
	position: relative;
	text-align: center;
	width: 55px;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.socialmedia > li > a:hover {
	background: #EA5B0C;
	color: #ffffff;
}
.socialmedia > li > a.fb:before {
	content: "\E80C";
	font-size: 40px;
}
.socialmedia > li > a.mail:before {
	content: "\E82E";
	font-size: 22px;
}
.socialmedia > li > a.mail {
	padding-top: 0px;
}
.socialmedia > li > a.phone:before {
	content: "\E835";
	font-size: 40px;
	padding-top: 7px;
}

@media all and (max-height: 450px){

	.socialmedia {
		top: 150px;
	}

}

@media all and (max-width: 500px){

	.socialmedia {
		display: none;
	}

}

/* Layout - Intro - Follow Me */

.followme {
	background: #3c3c3b none repeat scroll 0 0;
	cursor: pointer;
	color: #ffffff;
	font-weight: 600;
	height: 28px;
	left: 50%;
	line-height: 26px;
	margin: -14px 0 0 -70px;
	opacity: 0;
	position: fixed;
	text-align: center;
	text-transform: uppercase;
	width: 140px;
	z-index: 15;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
.followme.show {
	margin-top: 0;
	opacity: 1;
}
.followme:after {
	content: "\E81D";
	font-family: "fontello";
	font-size: 25px;
	left: 50%;
	line-height: 1;
	margin: 0 0 0 -28px;
	position: absolute;
	top: 40px;
}

@media all and (max-width: 800px), (max-height: 700px){

	.followme {
		display: none;
	}

}

/* Layout - Intro - Boxen */

.boxes {
	left: 50%;
	margin: 0 0 0 -600px;
	opacity: 0;
	position: fixed;
	top: 500px;
	width: 1200px;
	z-index: 12;
	-webkit-transition: opacity 1.4s ease-out;
	-moz-transition: opacity 1.4s ease-out;
	-ms-transition: opacity 1.4s ease-out;
	-o-transition: opacity 1.4s ease-out;
	transition: opacity 1.4s ease-out;
}
.boxes.show {
	opacity: 1;
}
.boxes > ul > li {
	background: #EA5B0C;
	float: left;
	margin: 0 0.25% 0 0; /* 0 3 0 0 */
	min-height: 100px;
	width: 33.166666666666664%; /* 398 */
}
.boxes > ul > li:last-child {
	margin-right: 0;
}
.boxes > ul > li > a {
	color: #FFFFFF;
	display: block;
	line-height: 1.2;
	padding: 25px 10px 22px 100px;
	text-transform: uppercase;
}
.boxes > ul > li > a.box1 {
	background: url("/img/layout/ico-ipad.png") no-repeat 28px 22px;
	background-size: 44px auto;
}
.boxes > ul > li > a.box2 {
	background: url("/img/layout/ico-book.png") no-repeat 30px 22px;
	background-size: 40px auto;
}
.boxes > ul > li > a.box3 {
	background: url("/img/layout/ico-headset.png") no-repeat 22px 22px;
	background-size: 56px auto;
}
.boxes > ul > li > a > .text1 {
	display: block;
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 3px 0;
}
.boxes > ul > li > a > .text2 {
	display: block;
	font-size: 17px;
	font-weight: 300;
}

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

	.boxes {
		left: 0;
		margin-left: 0;
		width: 100%;
	}
	.boxes > ul > li > a {
		padding-left: 70px;
	}
	.boxes > ul > li > a.box1 {
		background-position: 12px 22px;
	}
	.boxes > ul > li > a.box2 {
		background-position: 14px 22px;
	}
	.boxes > ul > li > a.box3 {
		background-position: 6px 22px;
	}
	.boxes > ul > li > a > .text1 {
		font-size: 17px;
	}
	.boxes > ul > li > a > .text2 {
		font-size: 15px;
	}

}

@media all and (max-width: 1000px){

	.boxes > ul > li {
		min-height: 130px;
	}

}

@media all and (max-width: 800px){

	.boxes {
		display: none;
	}

}