/*****general start*****/
@font-face {/***font integration***/
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
@font-face {/***font integration***/
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
* {/***reset css browser settings***/
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{/***clear for floats***/
	content:"";
	display:table;
}.clearfix:after{
	clear:both;
}
img {/***image settings***/
	max-width: 100%;
	height: auto;
	display: block;
	margin:0 auto;
}
h1, h2, p, a, input, textarea, button, ul {/***general font settings***/
	font-family: 'Open Sans', Arial, sans-serif;
	text-decoration:none;
}
h1, h2, input, textarea, button{/***general bold settings***/
	font-weight:700;
}
h1{
	font-size:20px;
	margin-bottom:10px;
}
h2{
	font-size:18px;
	margin-bottom:10px;
}
h1 span, p span{/***styling for coloured text marks***/
	text-transform:uppercase;
	font-weight:700;
	color:rgba(243,30,30,1);/*#F31E1E*/
}
h2 span{/***styling for coloured text marks***/
	color:rgba(243,30,30,1);/*#F31E1E*/
}
@media (min-width: 768px) {
	h1{
		font-size:32px;
	}
	h2{
		font-size:28px;
	}
}
body{
	min-height:100vh;
	font-size:14px;
	display:flex;
	flex-direction:column;
	background:rgba(0,0,0,1);
	color:rgba(0,0,0,1);
}
.container{/***contains website content***/
		max-width:1200px;
		padding:0 15px;
		margin:0 auto;
	}
@media (min-width: 768px) {
	.container{/***contains website content***/
		padding:0 30px;
	}
}
.wrapper{/***wrapping the content***/
	width:100%;
	background:rgba(255,255,255,1);
	padding-top:40px;
	padding-bottom:80px;
}
/*****general end*****/
/*****header start*****/
header{
	width:100%;
	position:fixed;/***always visible***/
	z-index:9999;
	background:rgba(0,0,0,1);/*#000*/
	font-weight:700;
	text-align:center;
	padding:15px 0;
	-webkit-backface-visibility: hidden;/***fix for flicker bug in Chrome***/
}
.nopadding{
	padding-bottom:0;
}
@media (min-width: 768px) {
	header{
		text-align:left;
		padding:0;
	}
}
header .container > a{/***logo***/
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}
header .container > img{/***navbutton on mobile***/
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}
@media (min-width: 768px) {
	header .container > a{/***logo***/
		padding:13px 0;
	}
	header .container > img{/***navbutton on mobile***/
		display:none;
	}
}
/***navigation styling***/
header .container nav{/***hiding nav on mobile***/
	display:none;
	float:none;
}
header .container nav ul{
	list-style:none;
}
@media (min-width: 768px) {
	header .container nav{
		display:block!important;
		float:right;
	}
}
header .container nav ul li{
	display:inline-block;
}
header .container nav ul li a{
	display:inline-block;
	text-decoration:none;
	color:rgba(255,255,255,1);/*#fff*/
	padding:44px 12px;
}
@media (min-width: 768px) {
	header .container nav ul li a{
		padding:44px 15px;
	}
}
header .container nav ul li a:hover, header .container nav ul li a.active{/***styling for active link in nav***/
	color:rgba(243,30,30,1);/*#F31E1E*/
	text-decoration:underline;
}
header .container nav #subNav{/***subnav on media.html document, hiding on mobile***/
	float:none;
	border-top:2px solid #fff;
}
@media (min-width: 768px) {
	header .container nav #subNav{
		float:right;
	}
}
header .container nav #subNav li a{
	padding:13px 15px;
}
/******/
/*****header end*****/
/*****main start*****/
main{
	margin-top:107px;/***header's height***/
}
@media (min-width: 768px) {
	main.specialCase{
		margin-top:154px;/***header's height on media.html***/
	}
}
/*****index.html/team.html/kontakt.html/impressum.html/datenschutz.html*****/
main .wrapper #home section:first-of-type:after, main .wrapper #team section:nth-of-type(-n+2):after, main .wrapper #media section:nth-of-type(-n+2):after, main .wrapper #kontakt section:first-of-type:after{/***parting line between content***/
	content: '';
    width: 150px;
    border-top: solid 2px #979797;
	margin:80px 0;
    display: block;
}
main .wrapper #home section div div, main .wrapper #team section:nth-of-type(odd) div div, main .wrapper #kontakt section div div, main .wrapper #fineprint section div div{/***content divs full width on mobile, 1-column layout***/
	width: 100%;
	margin-right:0px;
	display:block;
}
@media (min-width: 768px) {
	main .wrapper #home section div div, main .wrapper #team section:nth-of-type(odd) div div, main .wrapper #kontakt section div div, main .wrapper #fineprint section div div{/***content divs width on tablet and desktop, 2-column layout***/
		width: calc(50% - 15px);
		margin-right:30px;
		display:inline-block;
	}
}
main .wrapper #home section div div:nth-of-type(1), main .wrapper #team section:nth-of-type(odd) div div:nth-of-type(1), main .wrapper #kontakt section div div:nth-of-type(1), main .wrapper #fineprint section div div:nth-of-type(1){
	float:left;
}
main .wrapper #home section div div:nth-of-type(2), main .wrapper #team section:nth-of-type(odd) div div:nth-of-type(2), main .wrapper #kontakt section div div:nth-of-type(2), main .wrapper #fineprint section div div:nth-of-type(2){
	float:right;
	margin-right:0;
}
main .wrapper #home section div div:nth-of-type(2) p:first-of-type, main .wrapper #team section:nth-of-type(1) div div:nth-of-type(2) p:first-of-type{
	margin-bottom:10px;
}
main .wrapper #team section:nth-of-type(3){
	min-height:295px;
}
main .wrapper #team section:nth-of-type(3) div div ul li{
	list-style-type:none;
}
main .wrapper #team section:nth-of-type(3) div div ul li:before{/***bullet point for ul on team.html***/
	content:"- ";
}
main .wrapper #fineprint section div div p{/***spacing after p on impressum.html and datenschutz.html***/
	margin-bottom:20px;
}
/**********/
/*****team.html slider/media.html controls*****/
main .wrapper #team section #slider{
	max-width:1015px;
	margin:0 auto;
}
main .wrapper #team section #slider > img{
	display:inline-block;
}
main .wrapper #team section #slider #backward,main #lightbox div #backward{
	float:left;
}
main .wrapper #team section #slider #forward, main #lightbox div #forward{
	float:right;
}
main .wrapper #team section #slider #backward, main .wrapper #team section #slider #forward, main #lightbox div #forward, main #lightbox div #backward{/***slider and lightbox control buttons (backward and forward)***/
	width:4%;
	margin-top:18%;
	cursor:pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
@media (min-width: 768px){
	main .wrapper #team section #slider #backward, main .wrapper #team section #slider #forward{/***slider control buttons (backward and forward)***/
		width:2.5%;
	}
}
main .wrapper #team section #slider #backward:hover, main .wrapper #team section #slider #forward:hover, main #lightbox div #forward:hover, main #lightbox div #backward:hover{
	-webkit-transform: scale(1.1);
  	transform: scale(1.1);
}
main .wrapper #team section #slider #stage{/***contains slider images***/
	width:92%;
	display:inline-block;
	text-align:center;
}
@media (min-width: 768px){
	main .wrapper #team section #slider #stage{/***contains slider images***/
		width:95%;
	}
}
main .wrapper #team section #slider #stage .slideImage{/***slider images, styling for small images, hiding all images***/
	display:none;
	width: calc(50%/3);
	overflow:hidden;
	border:3px solid #000;
	border-radius:4px;
}
main .wrapper #team section #slider #stage .slideImage:nth-of-type(-n+3){/***show three images***/
	display:inline-block;
}
main .wrapper #team section #slider #stage .slideImage.activeSlide{/***styling for active image, larger than next image and prev image***/
	display:inline-block;
	width: 50%;
	border:3px solid #F31E1E;
	margin:0 15px;
}
@media (min-width: 768px){
	main .wrapper #team section #slider #stage .slideImage{/***small slider images***/
		width: calc(66.66%/3);
	}
	main .wrapper #team section #slider #stage .slideImage.activeSlide{/***large slider image***/
		width: 33.33%;
		margin:0 25px;
	}
}
/**********/
/*****media.html*****/
main .wrapper #media section:first-of-type h2{
	margin-top:70px;
}
main .wrapper #media section .gallery figure{/***gallery thumbnail container, 4-column layout***/
	display:inline-block;
	cursor:pointer;
	width:calc(100%/4 - 14px);
	margin:0 15px 15px 0;
	max-height:130px;
	overflow:hidden;
	border:3px solid #000;
	border-radius:4px;
	background-position:center;
	background-size:cover;
	padding-top:11%;
}
@media (min-width: 768px) {
	main .wrapper #media section .gallery figure{/***gallery thumbnail container, 4-column layout***/
		width:calc(100%/4 - 26px);
		margin:0 30px 20px 0;
	}
}
main .wrapper #media section .gallery figure img{
	width:100%;
	overflow:hidden;
}
main .wrapper #media section .gallery figure:nth-of-type(4n){/***every 4th image has no margin-right***/
	margin-right:0;
}
main #lightbox{/***lightbox styling***/
	position:absolute;
	z-index:999999;
	top:0;
	background:rgba(255,255,255,0.9);
	display:none;
	padding:30px;
	cursor:pointer;
	font-size:25px;
	font-weight:700;
}
main #lightbox div{/***contains the image container and the lightbox controls***/
	max-width:960px;
	text-align:center;
	cursor:default;
}
@media (min-width: 768px){
	main #lightbox div{/***absolute positioning on tablet and desktop***/
		position:absolute;
		transform:translateX(-50%);
		left:50%;
		margin-top:0;
	}
}
main #lightbox div .number{/***image bullet points***/
	display:inline-block;
	margin:0 5px;
	cursor:pointer;
	vertical-align:top;
}
main #lightbox div #forward, main #lightbox div #backward{/***lightbox control buttons (backward and forward)***/
	margin-top:0;
	width:3%;
}
main #lightbox div figure{/***lightbox image container***/
	border:3px solid #000;
	border-radius:4px;
	margin:0 auto 10px;
}
/**********/
/*****kontakt.html Kontaktformular*****/
main .wrapper #kontakt section form{
	color:rgba(0,0,0,1);
	font-size:14px;
	font-weight:700;
}
main .wrapper #kontakt section form div div input, main .wrapper #kontakt section form div div textarea{/***form input and textarea styling***/
	width:100%;
	margin-bottom:20px;
	border-radius:4px;
	border:3px solid rgba(0,0,0,1);
	background:rgba(255,255,255,1);
	padding:13px 0 12px 13px;
}
main .wrapper #kontakt section form div div input[name="url"]{/***spam protection***/
	display:none;
}
main .wrapper #kontakt section form div div textarea{/***form textarea styling***/
	height:178px;
	padding:13px 0 0 13px;
	resize:none;
}
main .wrapper #kontakt section form div div button{/***submit button styling***/
	float:right;
	border-radius:4px;
	background:rgba(0,0,0,1);
	color:rgba(255,255,255,1);
	padding:13px 48px;
	font-size:14px;
	cursor:pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
main .wrapper #kontakt section form div div button:hover{
	-webkit-transform: scale(1.1);
  	transform: scale(1.1);
}
main .wrapper #kontakt section #errorlog{/***styling for errorlog, shows form submit errors***/
	color:#F31E1E;
	margin-top:20px;
}
@media (min-width: 768px) {
	main .wrapper #kontakt section #errorlog{/***styling for errorlog, shows form submit errors***/
		margin-top:0;
	}
}
/**********/
/*****main end*****/
/*****footer start*****/
footer{
	width:100%;
	background:rgba(0,0,0,1);/*#000*/
	font-size:12px;
}
footer .container div{/***footer content spacing on mobile***/
	text-align:center;
	margin-top:20px;
}
footer .container div:nth-of-type(2){/***footer content spacing on mobile***/
	margin-bottom:20px;
}
@media (min-width: 768px) {
	footer .container div:nth-of-type(1){/***footer content spacing and positioning on tablet and desktop***/
		float:left;
		margin:40px 0;
		
	}
	footer .container div:nth-of-type(2){/***footer content spacing and positioning on tablet and desktop***/
		float:right;
		margin:28px 0;
	}
}
footer .container div a{
	color:rgba(255,255,255,1);
}
footer .container div:nth-of-type(1) a:nth-of-type(1){
	margin-right:25px;
}
footer .container div:nth-of-type(2) a{
	display:inline-block;
}
footer .container div:nth-of-type(2) a:nth-of-type(2), footer .container div:nth-of-type(2) a:nth-of-type(3){/***margin-left on second and third social media icon***/
	margin-left:25px;
}
/*****footer end*****/