/* ========================================
   FONTS
   ======================================== */
@font-face {
  font-family: 'unica';
  src: url('../font/UnicaOne/UnicaOne-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Source';
	src: url('../font/source-sans/source-sans-pro-v11-latin-regular.woff2') format('woff2'),
	url('../font/source-sans/source-sans-pro-v11-latin-regular.woff') format('woff'),
	url('../font/source-sans/source-sans-pro-v11-latin-regular.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Source';
	src: url('../font/source-sans/source-sans-pro-v11-latin-italic.woff2') format('woff2'),
	url('../font/source-sans/source-sans-pro-v11-latin-italic.woff') format('woff'),
	url('../font/source-sans/source-sans-pro-v11-latin-italic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Source';
	src: url('../font/source-sans-pro-v11-latin-600.woff2') format('woff2'),
	url('../font/source-sans/source-sans-pro-v11-latin-600.woff') format('woff'),
	url('../font/source-sans/source-sans-pro-v11-latin-600.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}


/* ========================================
   BASE STYLES (für alle Bildschirmgrößen)
   ======================================== */
header, footer, nav, section, aside, article {
	display:block;
}

body{
	background:#fff;
	margin:0;
	padding:0;
	hyphens:auto;
}

a{
	text-decoration:none;
	color:#fff;
}

a:hover{
	text-decoration:none;
	color: #e85811;
}

*:focus{
	outline:0;
}

/** clearfix **/
.clearfix:after { 
	content: "."; 
	display: block; 
	clear: both; 
	visibility: hidden; 
	line-height: 0; 
	height: 0; 
}

.clearfix { 
	display: inline-block; 
}
 
html[xmlns] .clearfix { 
	display: block; 
}

* html .clearfix { 
	height: 1%; 
}


/* ========================================
   TYPOGRAPHY (für alle Bildschirmgrößen)
   ======================================== */
p{
	margin:0 auto;
	font: 14px/22px Source;
	font-weight: 300;
	color: #fff;
	text-align:left;
	hyphens:auto;
	hyphenate-limit-chars:auto 5;
	hyphenate-limit-lines:2;
}

h2{	
	margin:100px auto 25px auto;
	padding:4px;
	font:15px unica;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
	letter-spacing: 3px;
	word-spacing:2px;
}

hr{
	width:50px;
	height:2px;
	margin-left:20%;
	padding:0;
	background-color:#fff;
	color:#fff;
	border:0;
}

h3{
	margin:-15px auto 40px auto;
	padding:0;
	font:24px/24px unica;
	color:#fff;
	letter-spacing:1px;
	text-transform: uppercase;
}

h4{
	margin:0 auto 15px auto;
	padding:0;
	font:15px/15px unica;
	color:#fff;
	letter-spacing:1px;
	text-transform: uppercase;
}


/* ========================================
   IMAGES
   ======================================== */
.pic img{
	width:100%;
}

.glow img{
	width:100%;
	height:auto;
}


/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes arrow{
	0% {
		bottom:0px;
	}
	100%{
		bottom:20px;
	}
}

@keyframes fadeIn {
	0% { }
	100% { opacity: 1; }
}


/* ========================================
   DESKTOP STYLES (min-width: 769px)
   ======================================== */
@media screen and (min-width: 769px) {

	/* HEADER */
	.header{
		background:url(../img/lg_cc.png) no-repeat left;
		height:110px;
		width:30%;
		top:0;
		left:5%;
		z-index: 5000;
		position: fixed;
	}

	/* ARROW */
	.arrow-down{
		width:30px;
		height:25px;
		margin:0 0 0 -15px;
		position:relative;
		left:50%;
		bottom:0px;
		animation: arrow 0.5s 1s infinite ease-out alternate;
	}

	.arrow-down:hover{
		animation-play-state: paused;
	}

	.left{
		position: relative;
		top: -5px;
		content: "";
		display: inline-block;
		width: 15px;
		height: 15px;
		border-right: 0.2em solid #fff;
		border-top: 0.2em solid #fff;
		transform: rotate(135deg);
	}

	/* NAVIGATION */
	#main-menu{
		align-self: flex-end; 
	}

	#navi{
		width:60%;
		height:16px;
		top:96px;
		right:5%;
		z-index: 20;
		position: fixed;
		float: right;
	}

	#navi ul{
		width:100%;
		list-style-type: none;
		height:13px;
		margin:0;
		text-align: right;
	}

	#navi li{
		min-width:4%;
		padding-left:4%;
		display: inline-block;
	}

	#navi li a{
		padding-bottom:3px;
		text-decoration:none;
		font: 13px/13px unica;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #fff;
		display: inline-block;
	}

	#navi li a:link{
		color: #fff;
	}

	#navi li a:hover{
		color: #d9dadb;
		font-weight:normal;
	}

	.active {
		border-bottom:2px solid #fff;
	}

	/* Hamburger verstecken auf Desktop */
	.button {
		display: none;
	}

	/* CONTENT */
	#content{
		width:100%;
		margin:0 auto; 
		padding:0;
	}

	.story { 
		width: 100%; 
		min-height: 800px; 
		margin: 0 auto; 
		padding: 0; 
		position: relative; 
		float:clear;
		overflow:hidden;
	}

	#home, #service, #serviceabc, #about, #contact, #formular, #impressum{ 
		width:100%;
		padding: 250px 0 50px 0;
		overflow:auto;
	}

	#work{ 
		width:100%;
		padding: 180px 0 50px 0;
		overflow:auto;
	}

	/* HOME */
	#home{
		background: #e60734;
		background: linear-gradient(100deg, #c80b2d 15%, #e60734 50%, #9a031e 100%);
	}

	#home hr{
		margin-left:30%;
	}

	#home h3{
		width:40%;
	}

	#home p{
		width:40%;
	}

	/* WORK */
	#work{
		background:#69625d;
		margin:0 auto;
	}

	.grid {
		width:90%;
		max-width: 70em;
		list-style: none;
		margin: 20px auto;
		padding: 0;
	}

	.grid li {
		display: block;
		float: left;
		padding: 4px;
		width: 33%;
		opacity: 0;
		box-sizing:border-box;
	}

	.grid li.shown,
	.no-js .grid li,
	.no-cssanimations .grid li {
		opacity: 1;
	}

	.grid li a,
	.grid li img {
		outline: none;
		border: none;
		display: block;
		max-width: 100%;
		color: #fcc300;
	}

	.grid.effect-1 li.animate {
		animation: fadeIn 0.65s ease forwards;
	}

	/* SERVICE */
	#service{
		width:100%;
		margin:0 auto;
		background: linear-gradient(100deg, #2b0b0d 10%, #581a2d 85%, #360e17 100%);
	}

	#service hr{
		background-color:#ea004d;
		color:#ea004d;
		margin-left:32%;
	}

	#service h3{
		margin-left:32%;
		color:#ea0051;
	}

	#service h4{
		width:20%;
		margin:0 0 25px 75%;
		padding-top:3px;
		color:#ea004d;
	}

	#service p{
		width:40%;
		margin:0 0 50px 32%;
		float:left;
	}

	#service .abc{
		width:20%;
		margin:0;
		right:5%;
		position:absolute;
		font: 14px/22px Source;
		font-weight: 300;
		color: #fff;
		text-align:left;
	}

	#service .glow img{
		width:45%;
		max-width:600px;
		top:0;
		left:0;
		z-index: 18;
		position:absolute;
	}

	#service .pic{	
		width:20%;
		max-width:500px;
		margin:0;
		padding:0;
		position:absolute;
		left:10%;
		top:200px;
		z-index: 20;
	}

	/* ABOUT */
	#about{
		width:100%;
		margin:0 auto;
		background: #09cad6;
		background: linear-gradient(105deg, #003d3d 20%, #09cad6 100%);
	}

	#about hr{
		margin-left:45%;
		background-color:#f6a800;
		color:#f6a800;
	}

	#about h3{
		width:40%;
		margin-left:45%;
		color:#f6a800;
	}

	#about p{
		width:40%;
		max-width:500px;
		margin-left:45%;
	}

	#about .glow img{
		width:45%;
		max-width:600px;
		height:auto;
		top:0;
		left:0;
		z-index: 34;
		position:absolute;
	}

	#about .pic{	
		width:22%;
		padding:0;
		z-index:35;
		position:absolute;
		left:18%;
		top:200px;
	}

	/* CONTACT */
	#contact{
		width:100%;
		background: #60a00e;
		background: linear-gradient(75deg, #124904 20%, #60a00e 77%, #58930c 100%);
	}

	#contact hr{
		margin-left:40%;
		background-color:#10d8fc;
		color:#10d8fc;
	}

	#contact h3{
		width:40%;
		margin-left:40%;
		color:#10d8fc;
	}

	#contact p{
		width:40%;
		max-width:500px;
		margin-left:40%;
		margin-bottom:250px;
	}

	#contact .big{
		font: 18px Source;
		font-weight: 300;
		color: #10d8fc;
	}

	#contact .glow img{
		width:45%;
		max-width:600px;
		top:0;
		left:0;
		z-index: 22;
		position:absolute;
	}

	#contact .pic{	
		width:25%;
		max-width:500px;
		padding:0;
		z-index:23;
		position:absolute;
		left:10%;
		top:200px;
	}

	/* IMPRESSUM */
	#impressum{
		background:#69625d;
	}

	#impressum p{
		width:60%;
		margin-left:30%;
		padding-bottom:50px;
		font: 11px/18px Source;
		color:#fff;
		text-transform: none;
		letter-spacing:0;
	}
}


/* ========================================
   MOBILE STYLES (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {

	/* Typography Adjustments Mobile */
	p{
		font: 15px/23px Source;
		font-weight:300;
	}

	h2{
		padding-top:40px;
		font:14px unica;
		letter-spacing:3px;
	}

	hr{
		width:50px;
		height:2px;
		padding:0;
		border:0;
	}

	h3{
		margin:-15px 0 30px 10%;
		font:22px/24px unica;
	}

	h4{
		font:14px/14px unica;
		margin:15px 0 10px 0;
	}

	/* HEADER */
	.header{
		background:url(../img/lg_cc.png) no-repeat left;
		height:110px;
		width:70%;
		top:0;
		left:5%;
		z-index: 5000;
		position: fixed;
	}

	/* ARROW */
	.arrow-down{
		width:40px;
		height:30px;
		margin:30px 0 0 -20px;
		z-index: 4000;
		position:relative;
		left:50%;
		bottom:0px;
		animation: arrow 0.5s 1s infinite ease-out alternate;
	}

	.left{
		position: relative;
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		border-right: 0.3em solid #fff;
		border-top: 0.3em solid #fff;
		transform: rotate(135deg);
	}

	/* NAVIGATION */
	#main-menu{
		align-self: flex-end; 
	}

	#navi{
		width:100%;
		height:auto;
		background-color: rgba(64,65,64,0.8);
		top:0;
		left:0%;
		z-index: 5001;
		position: fixed;
		float: right;
		display: flex;
		flex-flow: row wrap;
	}

	#navi ul{
		width:70%;
		height:auto;
		list-style-type: none;
		padding:120px 0 1000px 0;
		text-align: right;
	}

	#navi li{
		display: block;
	}

	#navi li a{
		font: 18px/36px unica;
		font-weight:400;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #fff;
		display: inline-block;
	}

	#navi li a:link{
		color: #fff;
	}

	#navi li a:hover{
		color: #e85811;
		font-weight:normal;
	}

	#navi li a:active{
		color: #e85811;
	}

	.active {
		border-bottom:2px solid #fff;
	}

	/* HAMBURGER */
	.button {
		background-color: rgba(255,254,254,0);
		width: 40px;
		height: 36px;
		position: absolute;
		right: 10%;
		top: 74px;
		cursor: pointer;
		z-index: 10000;
		border: none;
	}

	.button:after {
		position: absolute;
		top: 8px;
		right: 0;
		display: block;
		height: 4px;
		width: 35px;
		border-top: 2px solid #fff;
		border-bottom: 4px solid #fff;
		content: '';
		border-radius:0 0 2px 2px;
	}

	.button:before {
		height: 4px;
		width: 35px;
		background: #fff;
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		transition:all .3s ease;
		border-radius:2px 2px 0 0;
	}

	.button.menu-opened{
		background-color: rgba(255,254,254,0);
	}

	.button.menu-opened:after {
		width: 21px;
		background: #fff;
		height: 4px;
		top: 8px;
		right:7px;
		border: 0;
		border-radius:0;  
		transform: rotate(45deg);
		transition:all .3s ease-in-out;
	}

	.button.menu-opened:before {
		width: 21px;
		border-radius:0;  
		top: 8px;
		right:7px;
		background: #fff;
		transform: rotate(-45deg);
	}

	/* CONTENT */
	#content{
		width:100%;
		margin:0 auto; 
		padding:0;
	}

	.story { 
		width: 100%; 
		min-height: 800px; 
		margin: 0 auto; 
		padding: 0; 
		position: relative; 
		float:clear;
	}

	#home, #work, #service, #serviceabc, #about, #contact, #impressum{ 
		width:100%;
		margin:0 auto;
		padding: 170px 0 50px 0;
	}

	/* HOME */
	#home{
		background: #e60734;
		background: linear-gradient(100deg, #c80b2d 15%, #e60734 50%, #9a031e 100%);
	}

	#home hr{
		margin-left:5%;
	}

	#home h3{
		width:90%;
		margin-left:5%;
	}

	#home p{
		width:90%;
		margin-left:5%;
	}

	/* WORK */
	#work{
		background:#69625d;
		margin:0 auto;
	}

	.grid {
		max-width: 90%;
		list-style: none;
		margin: 20px auto;
		padding: 0;
	}

	.grid li {
		display: block;
		float: left;
		padding: 3px;
		width: 50%;
		opacity: 0;
		box-sizing:border-box;
	}

	.grid li.shown,
	.no-js .grid li,
	.no-cssanimations .grid li {
		opacity: 1;
	}

	.grid li a,
	.grid li img {
		outline: none;
		border: none;
		display: block;
		max-width: 100%;
		color: #fcc300;
	}

	.grid.effect-1 li.animate {
		animation: fadeIn 0.65s ease forwards;
	}

	/* SERVICE */
	#service, #serviceabc{
		width:100%;
		background: linear-gradient(100deg, #2b0b0d 10%, #581a2d 85%, #360e17 100%);
	}

	#service hr{
		background-color:#ea004d;
		color:#ea004d;
		margin-left:5%;
	}

	#service h3{
		width:90%;
		color:#ea004d;
		margin-left:5%;
	}

	#service h4{
		width:60%;
		margin-left:20%;
		color:#ea004d;
	}

	#service p{
		width:90%;
		margin:0 auto 50px auto;
	}

	#service .abc{
		width:60%;
		margin:0 0 0 20%;
		font: 14px/23px Source;
		font-weight:300;
		color: #fff;
		text-align:left;
	}

	#service .glow img{
		top:0;
		left:0;
		z-index: 18;
		position:absolute;
	}

	#service .pic{	
		width:50%;
		margin: 0 auto 20px auto;
		padding:0;
		position:relative;
		z-index: 20;
	}

	/* ABOUT */
	#about{
		background: #09cad6;
		background: linear-gradient(105deg, #003d3d 20%, #09cad6 100%);
	}

	#about hr{
		margin-left:5%;
		background-color:#f6a800;
		color:#f6a800;
	}

	#about h3{
		width:90%;
		margin-left:5%;
		color:#f6a800;
	}

	#about p{
		width:90%;
		margin:0 auto;
	}

	#about .glow img{
		top:0;
		left:0;
		position:absolute;
		z-index:34;
	}

	#about .pic{	
		width:50%;
		margin: 0 auto 20px auto;
		padding:0;
		position:relative;
		z-index:35;
	}

	/* CONTACT */
	#contact{
		background: #60a00e;
		background: linear-gradient(75deg, #124904 20%, #60a00e 77%, #58930c 100%);
	}

	#contact hr{
		margin-left:10%;
		background-color:#10d8fc;
		color:#10d8fc;
	}

	#contact h3{
		width:80%;
		margin-left:10%;
		color:#10d8fc;
	}

	#contact p{
		width:80%;
		margin:0 auto;
		margin-bottom:150px;
	}

	#contact .big{
		font: 16px Source;
		color: #10d8fc;
	}

	#contact .glow img{
		top:0;
		left:0;
		position:absolute;
		z-index: 22;
	}

	#contact .pic{	
		width:50%;
		margin: 0 auto 20px auto;
		padding:0;
		position:relative;
		z-index:23;
	}

	/* IMPRESSUM */
	#impressum{
		background:#69625d;
	}

	#impressum p{
		width:90%;
		padding:50px 0;
		margin:0 auto;
		font: 10px/16px Source;
		text-transform: none;
	}
}