stylesheet.css

/*@import "compass/css3";*/
.glitch {
  color: black;
  font-size: 8px;
  /*font-size: 100px;*/
  position: relative;
  /*width: 400px;*/
  margin: 0 auto;
}
.ititle{
  position: absolute;
  left: 100px;
  top: 150px;
  width: calc((100% - 200px - 120px)/4 + 100px);
  font-family: 'Press Start 2P', cursive;
  font-size: 1vw;
  line-height: 1.3;
}
.dashb{
  position: absolute;
  left: 70px;
  top: 130px;
}
.stamp{
  /*position: absolute;
  bottom: 50px;
  right: 120px;*/
  width: 15vw;
}
.colwrapper{
  margin-top: 81px;
  margin-left: 200px;
  margin-right: 120px;
  margin-bottom: 50px;
  /*overflow: hidden;*/
  display: flex;
}
.col{
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  column-count:4;
  column-gap:20px;
  font-size: 12px;
  padding-left: 20px;
}
.col h1{
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}
.col h2{
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}
.firsth{
  margin-top: 14vw;
}
.lastp{
  margin-bottom: 50px;
}
.leftline{
  flex: 1;
  border-left: 1px solid black;
  width: 20px;
  min-height: 100%;
  margin-top: calc(14vw + 4px);
}
.infolist{
  list-style-type: disc;
  list-style-position: inside;
}
.infolist li{
  display: list-item;
}


@keyframes noise-anim {
  0% {
    clip: rect(16px, 9999px, 62px, 0);
  }
  5% {
    clip: rect(54px, 9999px, 5px, 0);
  }
  10% {
    clip: rect(46px, 9999px, 53px, 0);
  }
  15% {
    clip: rect(68px, 9999px, 75px, 0);
  }
  20% {
    clip: rect(61px, 9999px, 74px, 0);
  }
  25% {
    clip: rect(97px, 9999px, 65px, 0);
  }
  30% {
    clip: rect(32px, 9999px, 52px, 0);
  }
  35% {
    clip: rect(26px, 9999px, 73px, 0);
  }
  40% {
    clip: rect(22px, 9999px, 99px, 0);
  }
  45% {
    clip: rect(72px, 9999px, 47px, 0);
  }
  50% {
    clip: rect(69px, 9999px, 9px, 0);
  }
  55% {
    clip: rect(62px, 9999px, 50px, 0);
  }
  60% {
    clip: rect(3px, 9999px, 26px, 0);
  }
  65% {
    clip: rect(98px, 9999px, 40px, 0);
  }
  70% {
    clip: rect(88px, 9999px, 59px, 0);
  }
  75% {
    clip: rect(7px, 9999px, 88px, 0);
  }
  80% {
    clip: rect(69px, 9999px, 76px, 0);
  }
  85% {
    clip: rect(6px, 9999px, 61px, 0);
  }
  90% {
    clip: rect(58px, 9999px, 50px, 0);
  }
  95% {
    clip: rect(93px, 9999px, 46px, 0);
  }
  100% {
    clip: rect(59px, 9999px, 43px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  /*left: 2px;*/
  text-shadow: -1px 0 red;
  /*top: 0;*/
  color: black;
  background: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(68px, 9999px, 85px, 0);
  }
  5% {
    clip: rect(53px, 9999px, 41px, 0);
  }
  10% {
    clip: rect(29px, 9999px, 61px, 0);
  }
  15% {
    clip: rect(72px, 9999px, 38px, 0);
  }
  20% {
    clip: rect(81px, 9999px, 1px, 0);
  }
  25% {
    clip: rect(51px, 9999px, 3px, 0);
  }
  30% {
    clip: rect(77px, 9999px, 84px, 0);
  }
  35% {
    clip: rect(99px, 9999px, 46px, 0);
  }
  40% {
    clip: rect(77px, 9999px, 97px, 0);
  }
  45% {
    clip: rect(36px, 9999px, 21px, 0);
  }
  50% {
    clip: rect(53px, 9999px, 88px, 0);
  }
  55% {
    clip: rect(28px, 9999px, 26px, 0);
  }
  60% {
    clip: rect(75px, 9999px, 64px, 0);
  }
  65% {
    clip: rect(86px, 9999px, 8px, 0);
  }
  70% {
    clip: rect(8px, 9999px, 14px, 0);
  }
  75% {
    clip: rect(2px, 9999px, 56px, 0);
  }
  80% {
    clip: rect(26px, 9999px, 16px, 0);
  }
  85% {
    clip: rect(68px, 9999px, 28px, 0);
  }
  90% {
    clip: rect(76px, 9999px, 24px, 0);
  }
  95% {
    clip: rect(54px, 9999px, 3px, 0);
  }
  100% {
    clip: rect(36px, 9999px, 36px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  /*left: -2px;*/
  text-shadow: 1px 0 blue;
  /*top: 0;*/
  color: black;
  background: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}


*{
  box-sizing: border-box;
}

::selection {
    color: white;
    background: black;
}

body {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    margin: 0;
}
/*html, .item, .swrap, .section, .slide {
  background-color: black;
}*/

.iScrollIndicator{
  background-color: rgba(125, 125, 125, 0.8)!important;
}

a {
  text-decoration: none;
  /*color: inherit;*/
}
a:hover{
  color: #ac9963;
  /*-webkit-animation-name: flicker;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;*/
}


h1, h2, h3, h4, h5 {
  font-family: 'Press Start 2P', cursive;
}
h3 {
  font-size: 10px;
}
h1 {
  font-size: 18px;
}
h2{
  font-size: 12px;
}

#header{
  top:0px;
  position:fixed;
  height: 215px;
  padding-top: 13px;
  display:block;
  width: 100%;
  background: white;
  z-index:9;
  text-align:center;
  background-image: url("../img/topbg.png");
  background-repeat: no-repeat;
  background-position: left top;
  -webkit-transition-duration: 500ms; /* Safari */
    transition-duration: 500ms;
}
/*#header:hover{
  background-color: black;
}*/

#topinfo{
  /*top: 13px;*/
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  -webkit-transition-duration: 500ms; /* Safari */
    transition-duration: 500ms;
}
#topinfo table{
  margin: auto;
  width: 90%;
}



#logo{
  width: 334px;
  top: 85px;
  position: relative;
  -webkit-transition-duration: 500ms; /* Safari */
    transition-duration: 500ms;
}

#claim {
  position: absolute;
  z-index: 10;
  color: white;
  text-align: left;
  left: 83px;
  bottom: 20px;
  font-size: 1.4vw;
  line-height: 200%;
}
#leftwhite {
  position: absolute;
  z-index: 10;
  background-color: white;
  left: 0px;
  top:0;
  height: 100%;
  width: 50px;
}
#leftwhite img{
  position: absolute;
  bottom: 59px;
}


ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}

#menu li {
  font-family: 'Press Start 2P', cursive;
	/*display:inline-block;*/
	padding: 10px;
	color: black;
}
#menu li.active a::before {
    content: '> ';

}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
}
#menu .it:hover a::before {
    content: '> ';
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
}
#menu{
  /*background-color: white;*/
	position:fixed;
	top:10px;
	left:0px;
	/*height: 40px;*/
	z-index: 7000;
	/*width: 100%;*/
	padding: 0;
	margin:0;
}
.mtitle span:hover{
  border-bottom:3px solid #000;padding-bottom:6px
}
.it{
  display: none;
  background-color: white;
  min-width: 250px;
}
.hamb{
  margin-top: 10px;
}

.section{
  text-align:center;
  overflow: hidden;
}

#myVideo{
  position: absolute;
  right: 0px;
  padding-left: 50px;
  padding-top: 215px;
  bottom: 0;
  top:0;
  right:0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-color: black; /* in case the video doesn't fit the whole page*/
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
    object-fit: cover; /*cover video background */
    z-index:3;
}
.sound img{
  position: absolute;
  /*top: 220px;*/
  right: 50px;
  bottom: 50px;
  /*left: 0;
  right: 0;*/
  z-index: 90;
  background-color: none;
  cursor: pointer;
}
#on{
  display: none;
}
#signup{
  display: none;
  position: absolute;
  top: 220px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  z-index: 90;
  background-color: none;
  width: 276px;
  height: 403px;
  background-image: url('../img/popbg.png');
  font-size: 15px;
}
#signup h3{
  text-align: right;
  margin-right: 20px;
  margin-top: 25px;
  cursor: pointer;
}
#signup h4{
  text-align: center;
  margin-top: 100px;
  line-height: 120%;
}
#signup p{
  text-align: center;
  margin-top: 20px;
  line-height: 130%;
}
#signup input{
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 9px;
  font-family: 'Press Start 2P', cursive;
  color: grey;
  border: solid 1.25px black;
  padding-top: 5px;
  padding-bottom: 5px;
}
#signup a{
  text-align: center;
  font-size: 10px;
  font-family: 'Press Start 2P', cursive;
  color: white;
  background-color: black;
  padding: 5px;
}

#signup a:hover{
  background-color: #ac9963;
}

#section0 .layer{
  position: absolute;
  z-index: 4;
  width: 100%;
  left: 0;
  top: 43%;

  /*
  * Preventing flicker on some browsers
  * See http://stackoverflow.com/a/36671466/1081396  or issue #183
  */
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*solves problem with overflowing video in Mac with Chrome */
#section0{
  overflow: hidden;
}
/* Hiding video controls
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
video::-webkit-media-controls {
  display:none !important;
}

.pagination{
  width: 512px;
  border-top: 1px solid black;
  margin-top: 50px;
  text-align: right;
  top: -50px;
  font-size: 9px;
  font-family: 'Press Start 2P', cursive;
}
.swrap{
  padding-top: 100px;
}
.pr{
  text-align: left;
  float:right;
}
.black {
  font-size: 18px;
  font-family: 'Press Start 2P', cursive;
  margin: 0px 0px 0px 50px;
  color: white;
  background-color: black;
  height: 782px;
  text-align: right;
  padding-right: 32px;
  padding-top: 10px;
  z-index: -1;
}
.bgbg{
  position: relative;
  float: left;
  top: 10px;
  left: 20px;
}
.foto{
  margin-top: -82px;
  /*min-width: 40%;*/
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}
.left{
  float: left;
  margin-left: 32px;
  transform: translate(0,0px);
  /*height: 847px;*/
}
.right{
  float: right;
  margin-right: -32px;
  transform: translate(0,0px);
}

.fp-viewing-Produkte-0 .item .left{
  transform: translate(0,-65px);
}
.fp-viewing-Produkte-0 #p1div .right{
  transform: translate(0,230px);
}
.fp-viewing-Produkte-0 .item .right{
  transform: translate(0,130px);
}

.clear{
  clear: both;
}
#section1{
  /*overflow: visible;*/
  /*margin-top: 200px;*/
}
.fp-slides, .fp-scrollable, .fp-scroller{
  /*overflow: visible !important;*/
}
.fp-tableCell{
  display: block !important;
}
.info{
  border-left: solid 1px black;
  margin-left: 50px;
  max-width: 800px;
  margin-top: 0px;
  margin-right: 342px;
  margin-bottom: 0px;
  text-align: left;
  font-size: 18px;
  padding-left: 16px;
  line-height: 150%;
}
b{
  font-weight: 900;
}
.placeholder{
  min-height: 200px;
}
#productlist{
  width: 100%;
  margin-top: 40px;
}
.thumbnail{
  width: 18%;
  max-width: 300px;
  margin: 0;
  display: inline-block;
  max-height: 18vw;
  background: black;
}
.thumbnail:hover{
  background: white !important;
}
.thumbnail img {
  /*max-width: 12vw;*/
  max-height: 18vw;
}
.hidden{
  display: none;
}
.hidden .left{
  /*max-width: 478px;*/
  height: 847px;
  /*width: 30%;*/
}
.hidden .right{
  /*max-width: 339px;*/
  height: 652px;
  /*width: 30%;*/
}
.text{
  font-size: 18px;
  line-height: 150%;
  text-align: left;
  width: 340px;
  margin-left: 91px;
}
.about{
  bottom: 0px;
  width: 100%;
  background-image: url("../img/aboutbg.jpg");
  background-size:100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  bottom: 0px;
  position: absolute;
  top: 90px;
}
.why{
  bottom: 0px;
  width: 100%;
  background-image: url("../img/bottbg.png"), url("../img/whybg.jpg");
  background-size: 649px, 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: right bottom, left top;
  bottom: 0px;
  position: absolute;
  top: 0px;
}
.textr{
  font-size: 18px;
  line-height: 150%;
  text-align: left;
  width: 488px;
  margin-left: 50%;
  margin-top: 90px;
  margin-bottom: 50px;
}
.achtungcont{
  background-color: black;
  margin-left: 50%;
}
.achtung{
  color: white;
  width: 508px;
  text-align: left;
  padding: 20px;

}
.achtung input{
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 9px;
  font-family: 'Press Start 2P', cursive;
  color: grey;
  border: solid 1.25px white;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: black;
  margin-right: 19px;
}
.achtung a{
  text-align: center;
  font-size: 10px;
  font-family: 'Press Start 2P', cursive;
  color: black;
  background-color: white;
  padding: 5px;
}
.achtung a:hover{
  background-color: #ac9963;
}

footer{
  margin-left: 50%;
  margin-top: 19px;
  text-align: left;
  font-size: 10px;
  font-family: 'Press Start 2P', cursive;
}
footer a{
  color: black;
}
footer ul li{
  display: inline-block;
}
footer li{
  text-align: center;
}