@font-face {
  font-family: "BC Alphapipe TSB Regular";
  src: url("https://db.onlinewebfonts.com/t/b142f662bec047825d209525c0721875.eot");
  src: url("https://db.onlinewebfonts.com/t/b142f662bec047825d209525c0721875.eot?#iefix") format("embedded-opentype"),
  url("https://db.onlinewebfonts.com/t/b142f662bec047825d209525c0721875.woff") format("woff"),
  url("https://db.onlinewebfonts.com/t/b142f662bec047825d209525c0721875.woff2") format("woff2"),
  url("https://db.onlinewebfonts.com/t/b142f662bec047825d209525c0721875.ttf") format("truetype"),
  url("https://db.onlinewebfonts.com/t/b142f662bec047825d209525c0721875.svg#BC Alphapipe TSB Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v31/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  margin: 0;
  border: 0;
}

body {
  height: 10100px;
  background-color: white;
}

.topBar {

  z-index: 100;

  background-color: rgba(255, 255, 255, 0.95);

  position: sticky;

  top: 0;
  left: 0;

  width: 100vw;
  height: 11.3vh;

}

#movingFerret {
  position: absolute;

  height: inherit;
  width: 75px;

  bottom: 0;
  right: 20vw;
}

#movingFerretImg {
  position: absolute;

  bottom: 0;
}

.dropDownFerret {
  position: absolute;

  bottom: 0;
  right: 0;

  height: inherit;
  width: 75px;

  overflow: clip;
}

#bigFerretImg {
  position: absolute;

  bottom: -30px;
}

/*to be deleted*/
#bigFerretImg:hover {
  bottom: 0;
}


.screenVideo {
  position: relative;

  top: 0;

  height: 100vh;
  width: auto;


  background: linear-gradient(90deg, rgba(13, 74, 107, 1) 0%, rgba(96, 64, 119, 1) 100%);

}

#videoPlayer {
  position: absolute;

  top: 3vh;
  left: 12.5vw;

  width: 75vw;
  height: 75vh;

}

.headLine {
  font-size: 6vw;
  font-family: "BC Alphapipe TSB Regular", serif;
}

.textAreas {
  font-size: 1.4vw;
  font-family: "Quicksand", serif;
}

.slideShow img {
  position: absolute;

  object-fit: contain;
}

#screenVideoHeadLine {
  position: absolute;

  color: white;

  bottom: 10vh;
  left: 3vw;
}

.projectArea {
  position: relative;
}

#triangleBarrier {
  position: absolute;

  width: 100vw;
  height: 10vh;

  left: 0;
  top: -9.9vh;

  background-color: white;

  clip-path: polygon(
    0% 100%, 6% 0%, 12% 100%,
    12% 100%, 18% 0%, 24% 100%,
    24% 100%, 30% 0%, 36% 100%,
    36% 100%, 42% 0%,
    100% 0%, 100% 100%, 0% 100%
  );
}

#projectAreaHeadLine {
  position: absolute;

  top: -11vh;
  right: 3vw;
}

.bentoBox {
  position: relative;

  z-index: 50;

  width: 80vw;
  height: 75vh;

  top: 5vh;
  left: 10vw;
}

.bbox:hover {
  scale: 1.01;
}

#logoBox {
  position: absolute;

  top: 0;
  left: 0;

  height: 60%;
  width: 55%;

  background-color: #111111;

  border: #111111 solid 1px;
  border-radius: 10px;
}

#logoImage {
  position: absolute;

  top: 3%;
  left: 1.5%;

  height: 94%;
}

#logoBentoBoxHeadLine {
  position: absolute;

  color: white;

  bottom: 0;
  right: 5%;

  padding: 2%;
}

#tbcBox {
  position: absolute;

  top: 61%;
  left: 0;

  height: 15%;
  width: 55%;

  background-color: #78ABCD;

  border: #78ABCD solid 1px;
  border-radius: 10px;
}

#tbcBentoBoxHeadLine {
  position: absolute;

  color: black;

  font-size: 10vh;

  bottom: 0;
  left: 5%;

}

#printBox {
  position: absolute;

  top: 77%;
  left: 0;

  height: 23%;
  width: 55%;

  background-color: #5E4176;

  border: #5E4176 solid 1px;
  border-radius: 10px;
}

#printBentoBoxHeadLine {
  position: absolute;

  color: White;

  font-size: 10vh;

  bottom: 0;
  right: 5%;

}

#illustrationBox {
  position: absolute;

  top: 0;
  right: 0;

  height: 33%;
  width: 44.4%;

  background-color: #024C6B;

  border: #024C6B solid 1px;
  border-radius: 10px;
}

#illustrationImage {
  position: absolute;

  bottom: 3%;
  right: 1.5%;

  height: 94%;
}

#illustrationBentoBoxHeadLine {
  position: absolute;

  color: White;

  top: 0;
  left: 2%;
}

#gameBox {
  position: absolute;

  top: 34%;
  right: 0;

  height: 66%;
  width: 44.4%;

  background-color: #CC8FDB;

  border: #CC8FDB solid 1px;
  border-radius: 10px;
}

#gameImage {
  position: absolute;

  top: 3%;
  right: 1.5%;

  height: 94%;
}

#gameBentoBoxHeadLine {
  position: absolute;

  color: black;

  bottom: 0;
  left: 2%;
}

.logoDesignContainer {
  position: relative;

  width: 99.9vw;
  height: 170vh;

  top: 30vh;
  left: 0;
}

#logoDesignHeader {
  position: absolute;

  top: 0;
  left: 0;

  width: 60%;
  height: 60vh;
}

#logoDesignHeadLine {
  position: absolute;

  text-align: right;

  top: 22vh;
  left: 22vh;
}

#logoDesignTriangleBarrier {
  position: absolute;

  width: 60%;
  height: 60vh;
}

#logoDesignLogoImage {
  position: absolute;

  top: 30vh;
  right: 10vw;
}

#logoDesignTextArea1 {
  position: absolute;

  top: 60vh;
  left: 10vw;

  height: 16vh;
  width: 30vw;

  overflow: initial;
}

#logoDesignTextArea2 {
  position: absolute;

  top: 110vh;
  right: 5vw;

  height: 16vh;
  width: 30vw;

  overflow: initial;
}

#logoDesignSlideShow img {
  position: absolute;

  width: 60vw;
  height: 40vw;
}

#logoDesignSlideShow {
  position: absolute;

  top: 85vh;
  left: 1vw;

  width: 60vw;
  height: 40vw;
}

#logoSlideShowImage {
  object-fit: contain;
}

.slideshowButton {
  position: absolute;

  z-index: 51;

  width: 3vw;
  height: 3vw;
}

#rightButtonLogoDesign {
  position: absolute;

  top: 48%;
  right: 0;
}

#leftButtonLogoDesign {
  position: absolute;
  rotate: 180deg;

  top: 48%;
  left: 0;
}

#leftButtonLogoDesign:hover {
  scale: 1.07;
}

#rightButtonLogoDesign:hover {
  scale: 1.07;
}

#leftButtonLogoDesign:active {
  scale: 1.03;
}

#rightButtonLogoDesign:active {
  scale: 1.03;
}

.illustrationContainer {
  position: relative;

  width: 99.9vw;
  height: 170vh;

  top: 45vh;
  left: 0;
}

#illustrationHeader {
  position: absolute;
  top: 0;
  right: 0;

  width: 60%;
  height: 60vh;
}

#illustrationTriangleBarrier {
  position: absolute;

  fill: #024C6B;

  right: 0;

  width: 60%;
  height: 60vh;

  transform: scaleX(-1);
}

#illustrationHeadLine {
  position: absolute;

  top: 22vh;
  right: 22vh;
}

.iconDiv {
  position: relative;

  width: 24.5%;
  height: 33.33%;
}

.icon {
  position: absolute;
  left: 11%;
}

#iconGrid {
  position: absolute;

  top: 38vh;
  left: 2vw;

  scale: 0.8;

  display: flex;
  flex-wrap: wrap;

  width: 42vw;
  height: 42vw;
}

#illustrationTextArea1 {
  position: absolute;

  width: 35vw;

  top: 45vh;
  right: 22vw;
}

#anhaenger {
  position: absolute;

  top: 60vh;
  right: 10vw;

  width: 40vw;
  height: 40vh;
}

#hoodies {
  position: absolute;

  top: 90vh;
  right: 10vw;

  width: 40vw;
  height: 40vh;
}

.gameContainer {
  position: relative;

  top: 45vh;
  left: 0;

  width: 99.9vw;
  height: 250vh;

}

#gameHeader {
  position: absolute;

  top: 0;
  left: 0;

  width: 60%;
  height: 60vh;
}

#gameHeadLine {
  position: absolute;

  top: 22vh;
  left: 22vh;
}

#gameTriangleBarrier {
  position: absolute;

  fill: #CC8FDB;

  width: 60%;
  height: 60vh;
}

#gameSlideShow img {
  position: absolute;

  width: 60vw;
  height: 40vw;
}

#gameSlideShow {
  position: absolute;

  top: 65vh;
  left: 1vw;

  width: 50vw;
  height: 30vw;
}

#gameShowImage {
  object-fit: contain;
}

#rightButtonGame {
  position: absolute;

  top: 62%;
  right: -10vw;
}

#leftButtonGame {
  position: absolute;
  rotate: 180deg;

  top: 62%;
  left: 0;
}

#leftButtonGame:hover {
  scale: 1.07;
}

#rightButtonGame:hover {
  scale: 1.07;
}

#leftButtonGame:active {
  scale: 1.03;
}

#rightButtonGame:active {
  scale: 1.03;
}

#gameTextArea1 {
  position: absolute;

  width: 35vw;

  top: 65vh;
  right: 0;
}

#reiterin {
  position: absolute;

  width: 35vw;

  top: 80vh;
  right: 0;
}

#überlebender {
  position: absolute;

  width: 35vw;

  top: 145vh;
  right: 35vw;
}

.printContainer {
  position: relative;

  top: 45vh;
  left: 0;

  width: 99.9vw;
  height: 210vh;
}

#printHeader {
  position: absolute;

  top: 0;
  right: 0;

  width: 60%;
  height: 60vh;
}

#printHeadLine {
  position: absolute;

  text-align: right;

  top: 22vh;
  right: 20vh;
}

#printTriangleBarrier {
  position: absolute;

  fill: #5E4176;

  right: 0;

  transform: scaleX(-1);

  width: 60%;
  height: 60vh;
}

#plakat {
  position: absolute;

  width: 50vw;

  top: 60vh;
  left: 15vh;
}

.theEnd {
  position: relative;

  bottom: -45vh;
  height: 17vh;

  background: linear-gradient(90deg, rgba(13, 74, 107, 1) 0%, rgba(96, 64, 119, 1) 100%);

}

#endImg {
  position: absolute;
  width: 30vw;
  height: 8vw;
  bottom: 1.1vh;
  background-image: url(../img/Element_43x.png);
  background-size: contain;
  background-repeat: no-repeat;
  left: 10%;
}

#endDiv {
  position: absolute;
  margin-left: 90%;
}

#endHeader {
  position: relative;
  scale: 1.2;
  color: white;
  margin-top: 10px;
  font-family: "BC Alphapipe TSB Regular", serif;
  font-weight: bolder;
}

#socialicon1 {
  width: 2vw;
  height: 2vw;
  margin-left: 25%;
  position: relative;
  background-image: url(../img/Element_12x_2.png);
  background-size: contain;
  background-repeat: no-repeat;

}

#socialicon2 {
  width: 2vw;
  height: 2vw;
  margin-left: 25%;
  margin-top: 10px;
  position: relative;
  background-image: url(../img/Element_22x_2.png);
  background-size: contain;
  background-repeat: no-repeat;
}