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


/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}



@font-face{
        font-family:"Serpentine Pro W01 Bold Italic";
        src:url("fonts/1361726/8900a5c7-c601-448e-b3ef-4b43dda31b67.eot?#iefix");
        src:url("fonts/1361726/8900a5c7-c601-448e-b3ef-4b43dda31b67.eot?#iefix") format("eot"),
			url("fonts/1361726/a5f1494c-781e-4251-a6e3-db226bb2abc8.woff2") format("woff2"),
			url("fonts/1361726/55dc84d0-945b-4eba-a819-b79b74687a28.woff") format("woff"),
			url("fonts/1361726/0a67b150-9329-4b68-b7c2-36d32b7e059c.ttf") format("truetype");
    }

@font-face{
        font-family:"Serpentine Pro W01 Light It";
        src:url("fonts/1361730/e6618d34-4ea9-443e-a19d-ac59a2d17542.eot?#iefix");
        src:url("fonts/1361730/e6618d34-4ea9-443e-a19d-ac59a2d17542.eot?#iefix") format("eot"),
			url("fonts/1361730/73ccf66e-526c-47f5-88d4-7a438710e400.woff2") format("woff2"),
			url("fonts/1361730/55c90b1e-e2d1-4117-a5f8-2ce699f375b2.woff") format("woff"),
			url("fonts/1361730/619542af-0778-479f-97a0-b7d5cd305080.ttf") format("truetype");
    }


/*
This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: https://www.linotype.com
*/



button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}


*{
	box-sizing: border-box;   /*Das Boxmodell wird für alle Boxen neu definiert -> padding wirkt nach innen*/
}


/*body > section{
	min-height: 100vh;
}*/

#cookies a{ color:#999;  }
#cookies a:hover{ color:#333;  }
#cookies { 
	display:none; position:fixed; left:0; bottom:0px; z-index:10100;
	width:100%; padding: 20px 30px 20px;
   	color:#999; font-size:14px; text-align:right; line-height:1.2;
	background: #222;  
 }
#cookieWrapper{
	 display:flex; justify-content:flex-end; align-items: center;
}

#cookiesCloser {
	line-height: 18px; color: #333; text-shadow: 0 1px 0 #FFF; white-space: nowrap;
	padding: 2px 12px; margin-left:10px;
	background: linear-gradient(to bottom,#FEFEFE,#F4F4F4) #F3F3F3;
	border-color: #BBB; border-radius: 3px;
 }

#cookiesCloser:hover {
	background: linear-gradient(to bottom,#BBBBBB,#CFCFCF) #F3F3F3;
	border-color: #BBB;}



header{
	position: fixed;
	width: 100%;
	background-size: cover;
	padding: 0 0 0;
	align-items: center;
	z-index: 9999;
}


#mobile{
	position: absolute;
	width: 40px;
	height: 40px;
	cursor: pointer;
	top: 10px;
	right: 10px;
	transform: scale(0,0);
}

#mobile.show{
	transform: scale(1,1);
}

#mobile span{
	display: block;
	height: 6px;
	width: 100%;
	background: #000000;
	position: absolute;
	border-radius: 9px;
	transition: all 0.25s;
}

#mobile span:nth-child(1){ top: 0; left: 0;}
#mobile span:nth-child(2){ top: 12px; left: 0;}
#mobile span:nth-child(3){ top: 12px; left: 0;}
#mobile span:nth-child(4){ top: 24px; left: 0;}


.show #mobile span:nth-child(1){ top: 50%; left: 50%; height: 0; width: 0; }
.show #mobile span:nth-child(2){ 
	-moz-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.show #mobile span:nth-child(3){ 
	-moz-transform: rotate(-45deg); 
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.show #mobile span:nth-child(4){ top: 50%; left: 50%; height: 0; width: 0; }

#navigation ul{
	-webkit-transform: scale(0);
	transform: scale(0);
	position:absolute;
	top: 30px;
	width: 100%;
	list-style: none;
	padding: 25px;
	background: rgba(255,255,255,1.0);
}

#navigation ul a{
	position: relative;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 10px;
	line-height: 35px;
	margin-bottom: 3px;
	padding: 10px;
	
}

#navigation ul a span {
	position: absolute;
	-webkit-transform: scale(0);
	transform: scale(0);
}

#navigation.show ul{
	-webkit-transform: scale(1);
	transform: scale(1);
}


body{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	overflow-x: hidden;  /*Querbalken wird versteckt*/
}






h1{
	font-size: 2.1em;
	color:#FFFFFF;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	font-family: "Serpentine Pro W01 Bold Italic", sans-serif;
	font-weight: 900;
	padding-top: 45vh;
	text-shadow: 5px 5px 10px rgba(0,0,0,1.00);
	z-index: 1;
	line-height: 1;
}

	h1.daten{
		padding-top: 0;
		margin-bottom: 25px;
		font-size: 1.5em;
		text-align: left;
	}

	h1.imp{
		padding-top: 0;
		margin-bottom: 25px;
		font-size: 1.5em;
		text-align: left;
	}


h2{
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	color: #FFFFFF;
	text-transform: uppercase;
	text-shadow: 5px 5px 10px rgba(0,0,0,1.00);
	text-align: center;
	margin-bottom: 0;
}


h3{
	font-size: 1.7em;
	color:#000000;
	text-align: center;
	margin-top: 3em;
	margin-bottom: 2.5em;
	font-family: "Serpentine Pro W01 Bold Italic", sans-serif;
	font-weight: 900;
	line-height: 1;
	padding-top: 2em;
}


h4{
	font-size: 1em;
	color:#010000;
	text-align: center;
	margin-top: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}


h5{
	font-size: 1.2em;
	color:#000000;
	text-align: center;
	margin-top: 5px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
}

h6{
	font-size: 1em;
	color:#010000;
	margin-top: 10px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	text-align: left;
	
}


h7{
	font-size: 1em;
	color:#010000;
	text-align: center;
	margin-top: 10px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
}


p{
	line-height: 1.5;
	
}


#home{
	height: 100vh;
}


#home div{
	text-align: center;
}


#Zepps div{
	text-align: center;
}


#Modelle{
	margin: 0 auto;
	padding: 0 25px 0 25px;
}




#Bildergalerie{ 
		margin: 0 auto;  
		padding: 25px 20px 20px;
		text-align: center;
}


#Bildergalerie figure{ position: relative; margin: 10px; }
#Bildergalerie img{ vertical-align: bottom; }
#Bildergalerie figcaption{ 
	color: #fff; position: absolute; background: rgba(0,123,196,0.55);
	top:0; left: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: 0.5s;
}
#Bildergalerie figure:hover figcaption{ 
	opacity: 1;
}



.video{
	margin-top: 15px;
	padding: 0;
	text-align: center;
}




/*padding: 5px 0;*/


.links{
	text-align: left;
	padding-left: 15px;
}


	@keyframes pulse {
  0% {
    color: #FFFFFF;
	transform: scale(1.0);
  }
  50% {
    color: #FF3D40;
	transform: scale(1.2);
  }
	100%{
    color: #FF0000;
	transform: scale(1.0);
  }
}



header p{
	color: rgba(249,0,4,1.00);
}



.nopadding{
	padding: 0 0 0 0;
	margin-bottom: -4px;
}



.zepp{
	width: 100%;
	height: auto;
}




.zepppadding{
	padding: 0 25px 0 25px;
}




video{
	width: 100%;
	height: auto;	
}


.nopadding{
	padding: 0 0 0 0;
}


.nopaddingbottom{
	padding-bottom: 0;
}



.mybuttn {
	display: inline-block;
    background-color: rgba(0,123,196,1.00); /* Blau */
    border: none;
    color: white !important;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
	border-radius: 15px;
	margin-top: 10px;
	text-transform: uppercase;
	font-weight: 700;
}


.mybuttn:hover{
	background-color: rgba(255,237,0,1.00);
}


a{
	text-decoration: none;
}


a:link{
	color: rgba(0,0,0,0.55);
}

a:visited{
	color: rgba(0,0,0,0.55);
}

a:hover{
	color: rgba(0,123,196,0.95);
}

a:active{
	color: rgba(0,123,196,0.90);
}


input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	font-size: inherit;
}

input[type=number], date{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	font-size: inherit;
}


input[type=submit] {
    width: 100%;
    background-color: rgba(0,123,196,1.00);
    color: white;
    padding: 14px 8px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size: inherit;
}

input[type=submit]:hover {
    background-color: rgba(255,237,0,1.00);
}


textarea{
	padding: 12px 20px;
	border: 1px solid #ccc;
	font-family: inherit;
	width: 100%;
	font-size: inherit;
}

form{
	width: 90%;
	margin: 0 auto;
	
}

footer{
	background-color: rgba(255,237,0,0.30);
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 25px;
	padding-bottom: 15px;
	text-align: center;
}

footer p{
	margin: 0;
}

.margintop{
	margin-top: 40px;
}


#logo{
	width: 75px;
	height: 75px;
	position: absolute;
	left: 10px;
}


#Bildergalerie img{
	width: 100%;
	height: auto;
}


#home{
	background: url(img/wim15_zepp_1920x1080.jpg) no-repeat;
	background-position: 45% 56%;
}


#Zepps img{
	height: auto;
}


#Modelle img{
	width: 100%;
	height: auto;
}


#Zepps figure{
	margin-bottom: 3em;
}


#Modelle figure{
	margin-bottom: 3em;
	padding-bottom: 3em;
}



#Branding div{
	text-align: center;
}


#Branding img{
	margin-top: 10px;
	margin-bottom: 25px;
}


img.animated.fadeInLeft {
  animation-duration: 4s;
  animation-iteration-count: infinite;
}


#Branding figure{
	margin-bottom: 3em;
}


#Modelle{
	background-color: rgba(255,237,0,0.50);
}


#Kontakt{
	background: rgba(0,123,196,0.50);
}


.paddingbottom{
	padding-bottom: 3em;
}


 .parallax {
    background-attachment: scroll;
	background-image: url(img/Zepp_cam_1920x1280.jpg);
	background-position: 42%;
	height: 80vh;
}


p#error{
	text-transform: uppercase;
	text-align: center;
	color: red;
	font-weight: 900;
}



#video figure{
	width: 55px;
	margin: 0 auto;
}


.bestof{
		display: none;
		margin: 0 auto;
		text-align: center;
}


.impressum{
	background-color: rgba(0,123,196,0.55);
	height: 100%;
	padding: 20px 10px 0 10px;
}


h8{
	font-size: 2em;
}


.datenschutz{
	background-color: rgba(0,123,196,0.55);
	height: 100%;
	padding: 20px 10px 0 10px;
}

#Danke{
	padding: 25px;
	background: rgba(0,123,196,0.55);
	height: 100vh;
}


#button{
	text-align: center;
	margin: 20px;
}


.event{
	text-transform: uppercase;
}




/*Media Queries -> CSS Eigenschaften für die Mobile Variante bis 360px breite, weil "max-width" */

@media only screen and (max-width: 360px) {
	
	h1{
		font-size: 2em;
	}
	
	h2{
		font-size: 1.2em;
	}

}


@media screen and (min-width:550px) {
	
	
	.bestof{
		display: none;
		margin: 0 auto;
		justify-content: space-around;
		padding-top: 2em;
}
	
	
	
}

/*Media Queries -> CSS Eigenschaften für die Desktop Variante, weil "min-width" */

@media only screen and (min-width: 768px) {
	
	#Bildergalerie{
		margin: 0 auto;  
		padding: 10px 20px 20px;
}
	
	#Bildergalerie div{
		display: flex;
}
	
	
	#Zepps{
		margin: 0 auto;  
		padding: 0px 20px 20px; 
}
	
	
	
	#Modelle figure{
		margin: 0 auto;
		margin-bottom: 70px;
	}
	
	
	#Modelle .imgright div{
		order: 2
	}
	
	
	#Modelle .imgright figcaption{
		order: 1
	}
	
	
	h1{
	font-size: 3em;
	padding-top: 69vh;
}
	
	h1.daten{
		padding-top: 0;
	}
	
	h1.imp{
		padding-top: 0;
	}
	
	
	h3{
	font-size: 2.7em;
}
	
	h4{
	font-size: 1.7em;
	color:#010000;
	text-align: center;
	margin-top: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}
	
	

	
	.nopadding{
	padding: 0 0 0 0;
}

	.zepp{
	width: auto;
}


	
	.btn btn-info{
	text-align: center;
}
	
	.center{
		text-align: center;
	}
	
	
	form{
		width: 85%;
		margin: 0 auto;	
}

	
	
	#navigation ul{
	-webkit-transform: scale(0);
	transform: scale(0);
	position:absolute;
	right: 0;
	top: 30px;
	width: 25%;
	list-style: none;
	padding: 25px;
	background: rgba(255,237,0,0.60);
	border-radius: 50px;
}

	
	#navigation ul a:hover{
		font-weight: 700;
		border: 1px solid rgba(0,123,196,1.00);
		color: rgba(0,123,196,1.00);
		background-color: #FFFFFF;
		
	}
		

	.impressum{
		height: 100vh;
}
	
	.zeppsize{
		height: auto;
		margin: 0 auto;
	}
	
	
}


@media only screen and (min-width: 1025px) {
	
	.parallax {
		background-image: url(img/Zepp_cam_1920x1280.jpg);
		height: 100vh;
    	background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
}
	
	#Zepps div{
		display: flex;
		justify-content: space-around;
		align-items: center;
}
	
	
	#Modelle figure{
		display: flex;
		max-width: 1200px;
		margin: 0 auto;
		height: 250px;
		margin-bottom: 70px;
	}
	
	
	#Modelle figcaption{
		text-align: left;
		width: 50%;
	}
	
	.zeppsize{
		width: 50%;
		height: auto;
		margin: 0 auto;
		padding-right: 25px;
	}
	
	#Branding div{
		display: flex;
		text-align: center;
		justify-content: space-around;
}
	
	#Branding figure{
		width: 33.33%;
	}
	
	form{
		width: 50%;
		margin: 0 auto;
		
}
	

}


@media screen and (min-width: 1400px){

}


@media print{
	
	body{
		font-size: 16pt;
	}
	
	nav{
		display: none;
	}
}