@charset "utf-8";
/* CSS Document */

h1 {
	font-weight: 300;
	color: #282828;
	letter-spacing: 0;
	text-transform: uppercase;
	font-size: 46px;
	margin-bottom: 40px;
}

h2 {
	font-weight: 300;
	color: #282828;
	letter-spacing: 0;
	text-transform: uppercase;
	font-size: 36px;
	margin-bottom: 40px;
	position: relative;
	display: inline-block;
}

	h2:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background-color: #ffffff;
		top: 40px;
		left: 0;
	}

.super-header {
	font-size: 120px;
	position: relative;
	display: inline-block;
}

	.super-header:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 6px;
		background-color: #1afcfc;
		top: 120px;
		left: 0;
	}


/* NAVI */

.page-navi-area {
	z-index: 99999;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

	.navi-flex {
		display: flex;
		flex-direction: row;
		align-items: content;
	}

		.navi-btn {
			padding: 40px;
			background: #282828;
			width: 160px;
			-webkit-transition: all 0.15s ease-out;
			-moz-transition: all 0.15s ease-out;
			-o-transition: all 0.15s ease-out;
			-ms-transition: all 0.15s ease-out;
			transition: all 0.15s ease-out;
		}

			.navi-btn:hover {
				background: #1afcfc;
				color: #282828;
				cursor: pointer;
			}




	/* */


		.navi-menu {
			background: rgba(40,40,40,0.9);
			padding: 40px 40px 40px 0;
			display: none;
			margin: 0;
		}


			.navi-menu ul {
				padding: 0;
				margin: 0;
				list-style: none;
			}

				.navi-menu ul li {
					display: inline-block;
					padding: 0;
					margin: 0 0 0 40px;
				}

					.navi-menu ul li a {
						display: block;
						text-decoration: none;
						text-transform: uppercase;
						color: #fff;
						-webkit-transition: all 0.15s ease-out;
						-moz-transition: all 0.15s ease-out;
						-o-transition: all 0.15s ease-out;
						-ms-transition: all 0.15s ease-out;
						transition: all 0.15s ease-out;
					}

						.navi-menu ul li a:hover {
							color: #1afcfc;
						}






/* TEASER */

.page-teaser-area {
	background: url(../img/bg-teaser.jpg) center no-repeat fixed;
	background-size: cover;
	border-bottom: 1px solid #1afcfc;
	padding: 160px 40px;
}


	.leinesser-logo {
		width: 600px;
		display: inline-block;
		margin-bottom: 20px;
	}

	.teaser-txt {
		background: #282828;
		padding: 20px 40px;
		display: inline-block;
		text-transform: uppercase;
	}

		.teaser-txt span {
			color: #1afcfc;
		}


.page-teaser a {
	padding: 20px 40px;
	background: #282828;
	color: #fff;
	display: inline-block;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	-ms-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}

	.page-teaser a:hover {
		background: #282828;
		color: #1afcfc;
	}



/* USPS */

.page-usps-area {
	text-transform: uppercase;
	background: #e8e8e8;
}

	.usps-flex {
		display: flex;
		flex-direction: row;
		align-content: center;
	}

		.usps {
			width: 50%;
			padding: 40px;
			background: #e8e8e8;
			-webkit-transform: skew(-20deg); 
		   -moz-transform: skew(-20deg); 
		   -o-transform: skew(-20deg);
		   transform: skew(-20deg);
		}

			.usps-txt {
				color: #686868;
				text-align: right;
				-webkit-transform: skew(20deg); 
				-moz-transform: skew(20deg); 
				-o-transform: skew(20deg);
				transform: skew(20deg);
			}

				.usps-txt ul {
					list-style: none;
					margin: 0;
					padding: 0;
				}

					.usps-txt ul li {
						margin: 0 0 0 40px;
						padding: 0;
						display: inline-block;
						position: relative;
					}

						.usps-txt ul li:before {
							content: url(../img/ico_check.svg);
							width: 24px;
							height: 24px;
							position: absolute;
							left: -30px;
							top: -3px;
						}

			.usps-aachen {
				width: 50%;
				background: #282828;
				padding: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

				.wappen-aachen {
					width: 60px;
					margin: 0 20px 0 30px;
				}







/* DUSTIN */

.page-dustin-area {
	background: #fff;
}


	.page-dustin {
		padding: 160px 40px;
		color: #282828;
		font-size: 20px;
		letter-spacing: 0;
	}


.dustin-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

	.dustin-txt {
		padding-right: 40px;
		width: 60%;
	}

	.dustin-img {
		width: 40%;
		padding-left: 40px;
	}

		.dustin-img img {
			max-width: 300px;
		}





/* CLIENTS */

.page-clients-area {
	background: #e8e8e8;
	border-bottom: 1px solid #1afcfc;
}

	.page-clients {
		padding: 20px 40px;
		color: #686868;
		text-transform: uppercase;
	}


		.clients-flex {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

			.clients-txt {
				padding-right: 20px;
				width: 200px;
			}

			.clients-logos {
				width: 100%;
			}


				.clients-logos ul {
					list-style: none;
					margin: 0;
					padding: 0;
					display: flex;	
					flex-direction: row;
					align-items: center;
					flex-wrap: wrap;
				}

					.clients-logos ul li {
						margin: 0 10px 0 0;
						display: inline-block;
						padding: 10px 20px;
						min-width: 160px;
						filter: grayscale(100%);
						-webkit-transition: all 0.15s ease-out;
						-moz-transition: all 0.15s ease-out;
						-o-transition: all 0.15s ease-out;
						-ms-transition: all 0.15s ease-out;
						transition: all 0.15s ease-out;
					}

						.clients-logos ul li:hover {
							filter: grayscale(0);
						}

						.clients-logos ul li a {
							min-width: 100px;
						}

						.clients-logos ul li img {
							max-height: 60px;
						}

						.logo-maxwidth {
							width: 160px;
						}







/* WEBDESIGN */

.page-webdesign-area {
	background: url(../img/bg-webdesign.jpg) center no-repeat fixed;
	background-size: cover;
}

.page-webdesign {
	padding: 160px 40px 140px 40px;
	color: #fff;
	font-size: 20px;
	letter-spacing: 0;
}


	.page-webdesign h1 {
		color: #fff;
	}


.webdesign-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -20px;
	margin-top: 20px;
}

	.webdesign-box {
		width: 25%;
		padding: 0 20px;
	}



.webdesign-icon {
	display: flex;
	height: 50px;
	align-content: flex-end;
}

	.webdesign-icon img {
		width: 50px;
	}



/* */

.page-portfolia-area {
	bakground-color: #ffffff; 
}

.area-portfolio {
	padding: 80px 40px;
	color: #fff;
	font-size: 20px;
	letter-spacing: 0;
	text-align: center;
}

.area-portfolio h2 {
	color: #1afcfc;
}

		.btn-portfolio {
			padding: 20px 40px;
			background: #1afcfc;
			text-transform:  uppercase;
			display: inline-block;
			color: #282828;
			-webkit-transition: all 0.15s ease-out;
			-moz-transition: all 0.15s ease-out;
			-o-transition: all 0.15s ease-out;
			-ms-transition: all 0.15s ease-out;
			transition: all 0.15s ease-out;
		}

			.btn-portfolio:hover {
				background: #fff;
				cursor: pointer;
			}




.area-portfolio .galerie {
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

	.area-portfolio .galerie a {
		
	}

	.area-portfolio .galerie .preview-container a img {
		transition: 0.5s;
		padding: 10px;
		max-width: 700px;
		filter: grayscale(100%);
	}

		.area-portfolio .galerie .preview-container a img:hover {
			filter: grayscale(0%);
		}



.preview-container {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
}

.visit-website {
	position: absolute;
	z-index: 999;
	background: rgba(0,0,0,0.75);
	padding: 10px 20px;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 3%;
}

	.visit-website a {
		color: #fff;
		-webkit-transition: all 0.15s ease-out;
		-moz-transition: all 0.15s ease-out;
		-o-transition: all 0.15s ease-out;
		-ms-transition: all 0.15s ease-out;
		transition: all 0.15s ease-out;
	}

		.visit-website a:hover {
			color: #1afcfc;

		}


.offline:hover {
	color: red;
}




/* GRAFIKDESIGN */

.page-grafikdesign-area {
	background: url(../img/bg-grafikdesign.jpg) no-repeat fixed;
	background-size: cover;
}

.page-grafikdesign {
	padding: 160px 40px;
	color: #fff;
	font-size: 20px;
	letter-spacing: 0;
}


	.page-grafikdesign h1 {
		color: #fff;
	}


		.page-grafikdesign ul {
			list-style: none;
			margin: 0 0 40px 0;
			padding: 0;
		}


			.page-grafikdesign ul li {
						margin: 0 0 5px 30px;
						padding: 0;
						position: relative;
					}

						.page-grafikdesign ul li:before {
							content: url(../img/ico_check.svg);
							width: 20px;
							height: 20px;
							position: absolute;
							left: -28px;
						}



/* */


.grafikdesign-container {
	max-width: 460px;
}


.col-box img {
	max-width: 1000px;
	margin: auto;
}


/* ARTWORKS */

.page-artworks-area {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e8e8e8+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#e8e8e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}

.flex-artworks {
	display: flex;
	flex-direction: row;
	padding: 80px 40px;
}

	.artworks-box {
		width: 33.33333333%;
		text-align: center;
	}

		.artworks .owl-carousel {
			max-width: 400px;
			margin: auto;
		}


		.print .owl-carousel {
			max-width: 440px;
			margin: auto;
			margin-top: -10px;
		}



		.shirts .owl-carousel {
			max-width: 320px;
			margin: auto;
			margin-top: -10px;
		}






/* KONTAKT */

.page-kontakt-area {
	background: #fff;
}

	.page-kontakt {
		padding: 80px 0 80px 40px;
		font-weight: 300;
		color: #282828;
		letter-spacing: 0;
		font-size: 20px;
	}


.kontakt-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	margin: 0;
}

.kontakt-info {
	width: 30%;
	padding-left: 80px;
}

.kontakt-map {
	width: 60%;
}

.page-kontakt a {
	color: #282828;
}


		.page-kontakt .kontakt-btn {
			padding: 20px 40px;
			text-transform:  uppercase;
			background: #282828;
			color: #fff;
			display: block;
			width: 200px;
			text-align: center;
			margin-bottom: 20px;
			-webkit-transition: all 0.15s ease-out;
			-moz-transition: all 0.15s ease-out;
			-o-transition: all 0.15s ease-out;
			-ms-transition: all 0.15s ease-out;
			transition: all 0.15s ease-out;
		}

			.page-kontakt .kontakt-btn:hover {
				background: #282828;
				color: #1afcfc;
				cursor: pointer;
			}







/* FOOTER */


.page-footer-area {
	background: #282828;
}

	.page-footer {
		padding: 20px 40px;
		font-size: 12px;
		letter-spacing: 0;
	}

		.page-footer span {
			color: #1afcfc;
		}



.footer-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.rechte {
	width: 50%;
}

.impressum {
	width: 50%;
	text-align: right;
	text-transform: uppercase;
}

	.impressum a {
		color: #fff;			
		-webkit-transition: all 0.15s ease-out;
		-moz-transition: all 0.15s ease-out;
		-o-transition: all 0.15s ease-out;
		-ms-transition: all 0.15s ease-out;
		transition: all 0.15s ease-out;
	}

		.impressum a:hover {
			color: #1afcfc;
		}



/* IMPRESSUM */

.page-impressum-area {
	background: #fff;
}


	.page-impressum {
		padding: 160px 40px;
		color: #282828;
		font-size: 20px;
		letter-spacing: 0;
	}

	.page-impressum h2 {
		font-size: 30px;
		margin-top: 40px;
		margin-bottom: 20px;
	}

	.page-impressum h3 {
		font-size: 20px;
		margin-top: 40px;
		margin-bottom: 26px;
		color: #282828;
		font-weight: 300;
	}

.page-impressum a {
	color: #14A3A3;
}