html {
	overflow-y: scroll;
}

body {
	margin:0;
	padding:0;
	text-align:left;
	font-family:Verdana, Geneva, sans-serif;
	background: #D8D8D8;
}

h1 {
	font-size:24px;
	font-weight:normal;
	margin-top:10px;
	margin-bottom:5px;
}

h2 {
	font-size:24px;
	font-weight:normal;
	margin-top:10px;
	margin-bottom:5px;
}

h3 {
	font-weight:bold;
	margin-top:10px;
	margin-bottom:3px;
}

li{
	margin-top:10px;
	margin-bottom:10px;
}

td.padded {
	width:100%;
	padding-left:10px;
	vertical-align:top;
}

td.PayPal {
	width:100%;
	padding-right:100px;
	vertical-align:top;
}

img,video,input,textarea{
	max-width: 100%;
}


img.FlagImg {
	margin-top: 0px;
}

#logo {
  padding-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.centered {
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
}

img.hardware_left {
  float:left;
  margin-right:20px;
  margin-bottom:10px;
}

img.hardware_right {
  float:right;
  margin-left:20px;
  margin-bottom:10px;
}


img.screenshot {
	width: 100%;
	float:left;
	margin-right:20px;
	margin-top:5px;
	margin-bottom:10px;
}

img.productimage {
	width: 50%;
	float:left;
	margin-right:20px;
	margin-top:5px;
	margin-bottom:10px;
}

@font-face {
    font-family: myFirstFont;
    src: url(PrimusSpecial.ttf);
}

#main {
	margin:auto;
	background: #F8F8F8;
	align-items: center;
	-webkit-box-shadow: 3px 3px 20px 0px rgba(51,51,51,1);
	-moz-box-shadow: 3px 3px 20px 0px rgba(51,51,51,1);
	box-shadow: 3px 3px 20px 0px rgba(51,51,51,1);
}

#content {
	margin:auto;
	max-width:920px;
	font-size:15px;
	text-align:justify;
	line-height: 130%;
	margin-top:20px;
/*	margin-left:5px;
	margin-right:5px;*/
	letter-spacing: 0px;
	word-spacing: 0px;
	
}

#trailer {
	background-color: #c0272d;
	height: 50px;
	text-align: center;
	color: #FFFFFF;
	margin-top: 15px;
	padding-top: 1px;
	padding-left: 5px;
	padding-right: 5px;

	display: block;
    margin-left: auto;
    margin-right: auto;
}

div#trailer p{
	margin-left: auto;
    margin-right: auto;
	width: 820px;
}

div#trailer a,a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

div#trailer a:hover {
	color:#F2EAEA;
	border-bottom: none;
}

#content a[href^='http://']:not([href*='projekt-ares']),a[href^='https://']:not([href*='projekt-ares']){
  background: url(./Icon_External_Link.svg) center right  no-repeat;
  display:inline-block;
  padding-right:13px;
  line-height:16px;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

a,a:visited {
	text-decoration: none;
	color: #9B1313;
}

a:hover {
	color:#9B1313;
	border-bottom:dashed 1px #DD6A6A;
}

a[href$='.pdf']{
  background: url(./pdf_32.png) center left no-repeat;
  display:inline-block;
  padding-left:40px;
  line-height:36px;
}

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
  background:URL(./zip_32.png) center left no-repeat;
  display:inline-block;
  padding-left:40px;
  line-height:36px;
}

.toggle,
[id^=drop] {
	display: none;
}


	
/* Change ' +' in order to change the Dropdown symbol
li > a:after { content:  "\25BC"; }
li > a:only-child:after { content: ''; }

 */
 
 
 /***************************************
* CSS-only galleries (even more fancy) *
***************************************/
.gallery {
	width: 100%;
	/*height: 31em;*/
	position: relative;
	/*background-color: #00000060;*/
	padding: 0.5em;
	float:left;
	margin-right:20px;
	margin-top:5px;
}

.slimGal{
	width: 50%;
}

.gallery input {
	display: none;
}
.gallery label {	
}
.gallery label div {
	position: relative;
	width: 6em;
	height: 4.5em;
/*	background-color: #555;*/
	display: inline-block;
	border: 4px solid #555;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition-property: background-color, border-color;
	transition-delay: 0s;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.gallery label input:checked ~ div {
/*	background-color: #324678;*/
	border-color: #c0272d;
}
.gallery .empty-stub {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	max-height: 630px;
	height: 75vw;
	z-index: -1;
}

.gallery .empty-stub-slim{
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	max-height: 320px;
	height: 75vw;
}


.gallery label img {
	display: inline-block;
	object-fit: contain;
	object-position: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(width * 0.75);
	margin-top: 0.5em;
	opacity: 0.0;
	transition: opacity 0.5s;
	pointer-events: none;
}
.gallery label input:checked + img {
	opacity: 1.0;
}

 
  button#WarenkorbButton {
	  position:staic; /*wird auf fixed umgestellt*/
	  top: 0;
	  width: 920px;
	  left: 50%;
	  transform: translate(-50%, 0);
	  padding: 1rem;
	  font-weight: 1000;
	  font-size: 16px;
	  text-align: left;
	  line-height: 20px;

	  background: url(./Cart.png)  no-repeat;
	  background-position: left 5px center;
	  padding-left:60px;
	  border-radius: 2px; 
	  background-color: #c0272d;
	  border-style: none;
	  color: #ffffff;
	  	  	 
	  animation-iteration-count:1;
      animation-duration:3s;
	  animation-direction: normal;
	  opacity: 0%;
	  /* display: none; */
 }

input[type=SUBMIT], input[type=button]{
	  height:40px;
	  border-radius: 8px; 
	  background-color: #c0272d;
	  border-style: none;
	  color: #ffffff;
	  font-weight: 1000;
	  font-size: 16px;
	  text-align: center;
	  width: 45%;
}

input[type=SUBMIT]:hover, input[type=button]:hover{
	background-color: #cc5256;
}
  
 	img.BannerHeading {
		height: 50px;
	}
 
 
/* Media Queries
--------------------------------------------- */

@media all and (max-width : 980px) {

/*	#main {
		margin:0px auto 0px;
		padding-right: 0px;
		padding-left: 0px;
	}
*/
	div#content {
		font-size:13px;
		text-align:justify;
		margin-top:20px;
		margin-left:10px;
		margin-right:10px;
		line-height: 1.4;
	}
	
	div#trailer p{
		width: 100%;
	}
	
/* Code zum Fixieren des menüs. Könnte Probleme geben weil in langen Menüs nicht mehr gescrollt werden kann
	Es wird  <div id="navdiv"> benötigt

	div#navdiv{		
		position: -webkit-sticky;
		position: sticky;
		top: 0px;
	}
*/
	.gallery {
		width: 100%;/*calc(50% - 1em);*/
		position: relative;
		padding:0;
		float:none;
		margin: 0px;
	}
	.slimGal{
		width: 100%;/*calc(50% - 1em);*/
		position: relative;
		padding:0;
		float:none;
		margin: 0px;
	}
	
	.gallery .empty-stub-slim{
	max-height: 570px;
}
	
	img.screenshot {
		width: 100%;
		float:none;
		margin: 0px;
	}
	
	img.productimage {
		width: 100%;
		float:none;
		margin: 0px;
	}
	

	
	
	
	
	button.AddToCartButton{
		width: 100%;
	}
	
	 button#WarenkorbButton {
		width: 100%;
		left: 0;
		transform: translate(0,0);
	 }
}

 @keyframes AnimFlash {
		0% {opacity: 0%;}
		10% {opacity: 100%;}
		90% {opacity: 100%;}
		100% {opacity: 0%;}
  }