@font-face {
  font-family: als_hauss;
  src: url(hauss.ttf);
}

* {
  margin: 0;
  box-sizing: border-box;
}

.h-ann {
  background: black;
}

.h {
  font-family: als_hauss;
  font-weight: 100;
}

.h-header {
  font-size: 4vw;
  font-variation-settings: 'wght' 850;
  line-height: 1;
}

.h-vid video{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: block;
}

.h-text {
  color: white;
}

.h-cnt {
  max-width: calc(850px + 5vw);
  margin: 0 auto;
  padding: 0 2.5vw;
}

/*@media (max-width: 895px) {
  .h-cnt {
    padding: 0 21px;
  }
}*/

.h-text p {
  line-height: 1.2;
  font-size: 26px;
  margin: 10% 0 5% 0;
  font-variation-settings: 'wght' 400;
}

.h-1 p{
  font-size: 32px;
  font-variation-settings: 'wght' 200;
}

.h-gl {
  color: white;
}

@keyframes h-anim-ital-1 {
  0% {
    font-variation-settings: 'wght' 1, 'ital' 1;
  }
  50% {
    font-variation-settings: 'wght' 1, 'ital' 850;
  }
  100% {
    font-variation-settings: 'wght' 1, 'ital' 1;
  }
}

.h-anim-ital-1 {
  animation: h-anim-ital-1 500ms ease-in-out infinite;
}

@keyframes h-anim-ital-wght-850 {
  0% {
    font-variation-settings: 'wght' 850, 'ital' 1;
  }
  50% {
    font-variation-settings: 'wght' 1, 'ital' 850;
  }
  100% {
    font-variation-settings: 'wght' 850, 'ital' 1;
  }
}

.h-anim-ital-wght-850 {
  animation: h-anim-ital-wght-850 2000ms ease-in-out infinite;
}

.master-wght-need {
  font-variation-settings: 'wght' 1, 'ital' 1;
  transition: all 1s cubic-bezier(0,0,0,1);
}

.master-ital-need {
  font-variation-settings: 'wght' 1, 'ital' 1;
  transition: all 1s cubic-bezier(0,0,0,1);
}

.master-wght-1 {
  font-variation-settings: 'wght' 1, 'ital' 1;
}
.master-wght-2 {
  font-variation-settings: 'wght' 200, 'ital' 1;
}
.master-wght-3 {
  font-variation-settings: 'wght' 400, 'ital' 1;
}
.master-wght-4 {
  font-variation-settings: 'wght' 850, 'ital' 1;
}

.master-ital-1 {
  font-variation-settings: 'wght' 1, 'ital' 850;
}
.master-ital-2 {
  font-variation-settings: 'wght' 200, 'ital' 850;
}
.master-ital-3 {
  font-variation-settings: 'wght' 400, 'ital' 850;
}
.master-ital-4 {
  font-variation-settings: 'wght' 850, 'ital' 850;
}

.master-wght * {
  display: inline;
}

.master-wght {
  font-size: 26vw;
  text-align: center;
  /*color: white;*/
  max-width: (1440px + 5vw);
  color: #ff0a3f !important;
  padding: 0 2.5vw;
  margin: 0 auto
}

@media (min-width: 1440px) {
  .master-wght {
    font-size: 374px;
  }
}

.h-testdrive {
  background: black;
  color: white;
  width: 100%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.h-testdrive-inner {
  display: flex;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5vw;
}

@media (max-width: 768px) {
  .h-testdrive-inner {
    flex-direction: column-reverse;
  }
  .h-testdrive-settings {
    width: 100% !important;
  }
}

.h-testdrive-area {
  flex: 1;
  font-size: 6rem;
  padding-top: 18px;
  color: rgba(255,255,255,1);
  transition: color 1.5s cubic-bezier(0,0,0,1);
  padding-right: 18px;
  padding-bottom: 18px;
}

.h-testdrive-area:focus {
  outline: none;
  color: rgba(255,255,255,1);
}

.h-testdrive-settings {
  width: 25%;
  margin-right: -10px;
  padding-top: 18px;
}

.h-testdrive-settings-bar {
  margin-bottom: 1.5vw;
}

.h-testdrive-settings-bar-name {
  margin-bottom: .5vw;
  font-size: 18px;
  font-variation-settings: 'wght' 600;
}

.fracs {
  font-family: als_hauss;
  font-size: 16vw;
  display: block;
  font-weight: 100;
  width: calc(1440px + 5vw);
  padding: 0 2.5vw;
  margin: 0 auto;
  color: #ff00b8;
  margin-bottom: 5%;
}

@media (min-width: 1440px) {
  .fracs {
    font-size: 260px
  }
}

.h-case-control {
  margin-top: 5%;
  margin-bottom: 2%;
}

.frac {
  display: inline-block;
}

.frac:first-child {
  margin-left: 0;
}

.h-case {
  color: white;
}

.h-case-area {
  font-size: 6vw;
  max-width: calc(1440px + 5vw);
  margin: 0 auto;
  padding: 0 2.5vw;
  cursor: pointer;
  user-select: none;
  /*font-feature-settings: 'case';*/
}

@media (min-width: 1440px) {
  .h-case-area {
    font-size: 100px;
  }
}

.h-case-btn {
  cursor: pointer;
  display: inline-block;
  transition: all 1s cubic-bezier(0,0,0,1);
  /*padding: 10px 20px;*/
  /*border: 2px solid white;*/
  /*border-radius: 999px;*/
  font-size: 24px;
  font-variation-settings: 'wght' 200, 'ital' 1;
  margin-right: .5rem;
  border-bottom: 2px solid rgba(255,255,255,.4);
  white-space: nowrap;
  margin-bottom: .5rem;
  /*text-decoration: underline;*/
}

.h-case-btn-active {
  font-variation-settings: 'wght' 800, 'ital' 1;
  border-bottom-color: rgba(0,0,0,0);
  /*border-bottom-width: 4px;*/
  /*background: white;
  color: black;*/
}

.ann-h-1 {
  font-size: 32vw;
  text-align: center;
  color: white;
}

.h-gl-text {
  margin-top: 5%;
  margin-bottom: 2.5%;
  color: white;
  font-variation-settings: 'wght' 600, 'ital' 1;
  font-size: 24px;
}

.credits {
  color: #fff;
  background: black;
  font-variation-settings: 'wght' 400;
}

.magazinus-button {
  font-variation-settings: 'wght' 400;
}

footer {
  background: #000;
  color: white;
}

@media (max-width: 701px) {
  .h-text p {
    font-size: 18px !important;
  }

  .ann-h-1 {
    margin-top: 10vw !important;
  }
  .h-styles-lang {
    font-size: 18px !important;
  }
  .h-case-btn {
    font-size: 16px !important;
    margin-bottom: .1rem;
  }
  .h-casevid_ {
    padding: 16px 0vw !important;
  }
}