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


/* MAX: 1200px / 75em
------------------------------- */
@media all and (max-width: 75em) {



}



/* MAX: 1024px / 64em
------------------------------- */
@media all and (max-width: 64em) {

/* WEBDSIGN */
	
	.webdesign-box {
		width: 50%;
		padding: 0 20px;
	}

}



/* MAX: 768px / 48.1em
------------------------------- */
@media all and (max-width: 48.1em) {

	/* NAVI */
	
	.navi-menu ul li {
		margin: 0 0 0 20px;
	}
	
	
	
	/* TEASER */

.page-teaser-area {
	background: url(../img/bg-teaser.jpg) center bottom no-repeat;
	background-size: auto;
}

	
	.leinesser-logo {
		width: 500px;
	}
	

	
	/* ÜBER MICH */
	
	.dustin-flex {
		flex-direction: column;
		align-items: center;
	}
	
		.dustin-txt {
		padding-right: 0;
		width: auto;
	}

		.dustin-img {
			width: auto;
			padding-left: 0;
		}



	/* KUNDEN */

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

		.clients-txt {
			padding-right: 0;
			width: auto;
			margin-bottom: 20px;
		}

			.clients-logos ul li {
				margin: 0;
				padding: 10px 20px;
				width: 160px;
			}
	
			
	.clients-logos ul {
		justify-content: center;
	}
	
	.logo-maxwidth {
		margin-left: -20px;
	}

	

/* ALLGEMEIN */
	
	.page-dustin,.page-webdesign,.page-grafikdesign,.page-kontakt {
		padding: 120px 40px;
	}
	
	
	
	
/* WEBDESIGN */

.page-webdesign-area {
	background: rgba(26,252,252,0.25);
}	

	.area-portfolio .galerie img {
		filter: grayscale(0%);
	}
	
	
/* GRAFIKDESIGN */
	
.page-grafikdesign-area {
	background: #282828;
}
	
	


/* ARTWORKS */
	
	.flex-artworks {
		flex-wrap: wrap;
		justify-content: center;
		padding: 80px 40px 40px 40px;
	}
	
	.artworks-box {
		width: 50%;
		margin-bottom: 40px;
	}
	
	
	
	
	
/* KONTAKT */
	
	.kontakt-flex {
		flex-direction: column;
		align-items: flex-start;
	}

		.kontakt-info {
			width: auto;
			padding-left: 0;
			order: 1;
			margin-bottom: 40px;
		}

		.kontakt-map {
			width: 100%;
			order: 2;
		}
	
}

/* MAX: 600px / 37.5em
------------------------------- */
@media all and (max-width: 37.5em) {

	/* NAVI */
	
	.navi-flex {
		flex-direction: column;
		align-items: content;
	}
	
	.navi-menu {
		width: 160px;
		padding: 40px 40px 30px 0;
	}
	
		.navi-menu ul li {
			display: block;
			margin: 0 0 40px 40px;
		}
	
	
	/* ALLGEMEIN */
	
.super-header {
	font-size: 80px;
}

	.super-header:after {
		height: 6px;
		top: 80px;
	}
	
	/* TEASER */
	
	.leinesser-logo {
		width: 300px;
	}
	
	
	/* USPs */
	
	.usps-txt ul {
		text-align: left;
	}
	
		.usps-txt ul li {
			display: block;
			margin: 0 0 5px 20px;
		}
	
	

		
/* WEBDESIGN */
	
		
	.webdesign-flex {
		flex-direction: column;
		flex-wrap: wrap;
		margin-left: 0;
	}
	
		.webdesign-box {
			width: auto;
			padding: 20px 0 0 0;
			margin-left: -20px;
			margin-right: -20px;
		}
	
	
	
	

/* ARTWORKS */
	
	.flex-artworks {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	
	.artworks-box {
		width: 100%;
	}

	
}


/* MAX: 480px / 30em
------------------------------- */
@media all and (max-width: 30em) {

	
	/* ALLGEMEIN */
	
	h3 {
		font-size: 26px;
		line-height: 30px;
	}
	
.super-header {
	font-size: 50px;
}

	.super-header:after {
		height: 4px;
		top: 50px;
	}
	
/* TEASER */
	
	.leinesser-logo {
		width: 240px;
	}
	
	.teaser-txt {
		padding: 10px 20px;
		font-size: 14px;
	}
	
	.page-teaser-area {
		padding: 140px 40px;
	}
	

	
	
	
/* USPs */
	
	.usps-flex {
		flex-direction: column;
	}
	
	.usps,.usps-aachen {
		width: auto;
	}
	
	.wappen-aachen {
		margin: 0 20px 0 20px;
	}
	
	.usps {
		padding: 20px 40px;
			-webkit-transform: skew(0deg); 
		   -moz-transform: skew(0deg); 
		   -o-transform: skew(0deg);
		   transform: skew(0deg);
	}
	

			.usps-txt {
				-webkit-transform: skew(0deg); 
				-moz-transform: skew(0deg); 
				-o-transform: skew(0deg);
				transform: skew(0deg);
			}
	
	
/* CLIENTS */
	
	.clients-flex {
		text-align: center;
		}

	
	
	
	
/* WEBDESIGN */


	.visit-website {
		font-size: 12px;
	}
	
}


/* PORTFOLIO */

.area-portfolio {
	padding: 40px 10px;
	border-bottom: 1px solid #ffffff;
}



/* MAX: 320px / 20em
------------------------------- */
@media all and (max-width: 20em) {
	


}