@font-face {
    font-family: Roboto Condensed;
    src: url('/fonts/RobotoCondensed-Light.ttf');
}

@font-face {
    font-family: Roboto Condensed Bold;
    src: url('/fonts/RobotoCondensed-Regular.ttf');
}

#Form input[type=text], #Al{
	width: 30%;
}

*
{
	margin: 0;
	padding: 0;
}

/* MAIN AND OTHERS*/

/*=========BODY=========*/

body{
	background-color: #cac3b9;
	margin: 0 auto;
	background:#ffffff;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:300;
}

/*=========HEADER=========*/

#HeaderWrapper{
	background-image: url("/img/kissen-header.jpg");
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-color: #3e3e3e;
	background-size: cover;
	height: 8em;
	padding: 7em 0;
	box-shadow: 0px 5px 10px rgba(64,168,132,1);
}

#HeaderWrapper a{
	text-decoration: none;
	color: transparent
}

div.Headertext{
	position: relative;
	font-size: 8vw;
	font-family: 'Six Caps', sans-serif;
	font-weight:300;
}

#TopNav{
	position: relative;
	text-align: center;
	padding-top: 2em;
}

#TopNav ul{
	list-style:none;
}

#TopNav li{
	display: inline-block;
	font-size: 1.2vw;
	color: #5d5d5db3;
}

#TopNav a{
	border:2px solid transparent;
	padding:16px 20px;
	color: rgba(64,168,132,1);
	text-decoration: none;
}

/*=========MAIN=========*/

#Main{
	max-width: 70%;
	font-size: 1.1vw;
	background-color: #fff;
	margin: 0 auto;
	padding: 1em;
	color: #3e3e3e;
}

#Main a, #Form a{
	color: rgba(64,168,132,1);
}

p{
	padding-top: 0.8em;
	padding-left: 2em;
}

h1,h2,h3{
	font-family: Roboto Condensed Bold;
	padding-top: 2em;
	font-weight: 400;
	color: #3e3e3e;
}

/*=========FOOTER=========*/

#Footer ul{
	clear: both;
	text-align: center;
	list-style: none;
	background-color: #3e3e3e;
	padding: 2em 0;
	margin-top: 1.5em;
}

#Footer li, #Footer a{
	padding: 0 1em;
	color: rgba(64,168,132,1);
	display: inline-block;
	letter-spacing: 0.05em;
	text-decoration: none;
	font-size: 0.85vw;
}

/* FORMULAR */

.Hidden{
	display: none;
}

#Form{
	margin: 1em auto;
	text-align: center;
	padding: 1.5em;
}

#Form input[type=text], #Al{
	padding: 1.5em;
	margin: 1em;
	text-align: center;
	border:2px solid rgba(64,168,132,1);
	border-radius:6px;
	font-family: 'Roboto Condensed', sans-serif;
}

#Al{
	text-align: left !important;
}

.Button{
	width: 30%;
	margin: 1em 0;
	margin-bottom: 4em;
	margin-top: 2em;
	padding: 1em 0;
	color: rgba(64,168,132,1);
	border:2px solid transparent;
	border-radius:6px;
	padding:16px 20px;
}

/* IMPRESSUM */

#Impressum{
	margin-top: 1em;
	margin-left: 2em;
}

#Information{
	padding: 1em;
	background-color: rgba(64,168,132,1);
	margin: 1em 2em;
	color: white;
}

@media only screen and (min-width: 1000px){
	#TopNav a:hover, #Form Button:hover{
		border:2px solid rgba(64,168,132,1);
		border-radius:6px;
		color:rgba(64,168,132,1);
		padding:16px 20px;
		background-color: #3e3e3e;
		transition: 0.2s ease-in-out;
	}
	
	.text{
		float: left;
		max-width: 70%;
  }

  #bildrechtshome{
		float: right;
		width: 20%;
		margin: 1em;
		box-shadow: 1px 1px 5px grey;
  }

  #bildrechtsdesign{
		float: right;
		width: 25%;
		margin: 2em 0;
		box-shadow: 1px 1px 5px grey;
  }
	
	#bildrechtsfarben{
		float: right;
		width: 25%;
		margin: 2em 1em;
		box-shadow: 1px 1px 5px grey;
	}
}

/*MOBILE*/
@media only screen and (max-width: 1000px){
	/* MAIN AND OTHERS */
	*{
		text-align: center;
	}
	
	#HeaderWrapper{
	background-image: url("/img/headerbild.png");
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	min-height: 30% !important;
	background-size: 65%;
	
	background-color: #3e3e3e;
	padding: 7em 0;
	box-shadow: 0px 5px 10px rgba(64,168,132,1);
}

	div.Headertext{
		position: relative;
		font-size: 8vw;
		font-family: 'Six Caps', sans-serif;
		font-weight:300;
  }
		
	div.Headertext{
		font-size: 25vw;
	}

	span.Headertext{
		top: -5%;
		font-size: 5vw;
	}

	#TopNav{
		text-align: center;
		padding-top: 1.3em;
		padding-bottom: 1.3em;
	}

	#TopNav ul{
		list-style:none;
	}

	#TopNav li{
		display: table;
		margin: 0 auto;
		font-size: 5vw;
		margin-bottom: 0em;
		padding-top: 0.3em;
		border:0px solid transparent;
	}

	#TopNav a{
		color: rgba(64,168,132,1);
		text-decoration: none;
	}
		
	#Main{
		max-width: 90%;
		font-size: 5vw;
		margin: 0 auto;
		box-shadow: 0px -5px 10px rgba(64,168,132,1);
	}
	
	#bildrechtshome, #bildrechtsdesign, #bildrechtsfarben{
		width: 80%;
		margin: 1em;
	}

	p{
		padding-top: 0.8em;
		padding-left: 0em;
	}
	
	h1,h2,h3{
		font-size: 1.2em;
		text-align: center;
  }
	
	h1{
		padding-top: 0em;
	}
	
	#Footer ul{
		margin-top: 1em;
		padding: .5em 0;
	}

	#Footer li, #Footer a{
		padding: 0 1em;
		letter-spacing: 0em;
		text-decoration: none;
		font-size: 4vw;
		padding: 0.6em;
	}
	
	/*FORMULAR*/
	
	#Form, #Al{
		margin: 0 auto;
		max-width: 90%;
		box-shadow: 0px 0px 0px;
	}
	
	#Al{
		max-width: 80%;
	}
	
	.Button{
		max-width: 48%;
		width: 100%;
		margin: 1.5em 0;
		padding: 1em 0;
		color: rgba(64,168,132,1);
		border:2px solid transparent;
	  border-radius:6px;
		padding:16px 20px;
	}
	
	#Form h3{
		padding-top: 1.5em;
		padding-bottom: 0.5em; 
	}
	
	#Form h2{
		padding-top: 1em;
		padding-bottom: 0em; 
		font-size: 8vw;		
	}
	
	#Form a{
		padding-bottom: 1em;		
	}
	
	/* IMPRESSUM */

	#Impressum{
		width: 80%;
	}
}