@import url(font/stylesheet.css);
 @-ms-viewport {
     width: device-width;
 }

 :root {
     --main-bg-color: #191919;
     --darkest-color: #151515;
     --primary-color: #E20053;
     --greyish-color: #b1b1b1;
     --white-color: #ffffff;
     --font: 'Metropolis', 'Helvetica Neue', 'Segoe UI', 'Arial';
     --max-width-box: 960px;
     --margin-icon: 1.8em;
     --icon-width: 4rem;
     --icon-height: 4rem;
     --icon-width-desktop: 6rem;
     --icon-height-desktop: 6rem;
 }

 body {
     width: 100%;
     background-color: var(--main-bg-color);
     font-family: var(--font);
     margin: 0px;
     background-image: url('schraege.svg');
     background-position-x: -200px;
     background-position-y: -100px;
     background-repeat: no-repeat;
 }

 a {
     color: var(--primary-color);
     text-decoration: none;
 }
 /**INPUTFIELD**/

 .label {
     font-size: 1.1rem;
     font-weight: 400;
     font-style: normal;
     font-stretch: normal;
     line-height: 1.19;
     letter-spacing: 0.2px;
     padding-left: 10px;
     text-align: left;
     color: var(--white-color);
 }

 input[type=email] {
     border-radius: 100px;
     width: 70vw;
     min-width: 200px;
     max-width: 350px;
     border: 1px solid #434343;
     background-color: #141414;
     height: 45px;
     font-weight: 200;
     font-style: normal;
     font-stretch: normal;
     letter-spacing: 0.3px;
     text-align: left;
     padding-left: 1em;
     padding-right: 1em;
     color: white;
     font-size: 1.3rem;
     font-family: var(--font);
     transition: 0.3s;
box-sizing: border-box;
 }

 input[type=email]:focus {
     outline: none;
     box-shadow: 0 0 6px 0 var(--primary-color);
     border-color: var(--primary-color);
     background-color: #212121;
     transition: 0.3s;

 }

 input::placeholder {
     color: dimgrey;
 }

 input[type=submit] {
     background-image: linear-gradient(114deg, #cf0087, #e4004c);
     border-radius: 100px;
     font-family: var(--font);
     width: 70vw;
     min-width: 200px;
     max-width: 350px;
     font-size: 1.2rem;
     padding-top: 4px;
     height: 55px;
     line-height: 1.19;
     text-transform: uppercase;
     font-weight: 700;
     font-style: normal;
     font-stretch: normal;
     letter-spacing: 1px;
     text-align: center;
     color: var(--white-color);
     border: 0px;
     transition: all .1s ease-in-out;
     cursor: pointer;
     padding-left: 1em;
     padding-right: 1em;
 }

 input[type=submit]:hover {
     transform: scale(0.95);
     transition: all .1s ease-in-out;
 }

 .button{

   background-image: linear-gradient(114deg, #cf0087, #e4004c);
   border-radius: 100px;
   font-family: var(--font);
   width: 300px;
   font-size: 1.2rem;
   text-transform: uppercase;
   font-weight: 700;
   font-style: normal;
   font-stretch: normal;
   letter-spacing: 1px;
   text-align: center;
   color: var(--white-color);
   border: 0px;
   transition: all .1s ease-in-out;
   cursor: pointer;
   padding: 1em 1.5em;

 flex: 0 1 auto;
 cursor: pointer;
 white-space: nowrap;

 }

.button:hover{
   transform: scale(0.95);
   transition: all .1s ease-in-out;
 }

 /* Layout Container */

 .card {
     align-items: center;
     justify-content: center;
     display: flex;
     padding: 1.6em;
     z-index: 20;
 }

 .card-light {
     background-color: white;
 }

 .card-black {
     background-color: var(--main-bg-color);
 }

 .content-wrapper {
     max-width: var(--max-width-box);
     text-align: left;
     align-items: center;
     justify-content: center;
     display: flex;
     flex-direction: column;
 }

 .maillist {
     margin-top: 4em;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: auto;
     margin-bottom: 4em;
 }

 .container-label {
     display: flex;
     justify-content: center;
     height: 35px;
 }

 .toolbar {
     display: flex;
     justify-content: right;
     flex-direction: row-reverse;
     flex-flow: row-reverse;
     padding: 2em;
 }

 .header {
     justify-content: center;
     align-items: center;
     flex-direction: column;
     display: flex;
 }

 .footer {
     display: flex;
     justify-content: center;
     background-color: var(--darkest-color);
     align-items: center;
     padding: 1em;
     flex-direction: column;
 }
 /**FONTS**/

 .antetype-title {
     font-size: 3.4rem;
     font-weight: bold;
     font-style: normal;
     font-stretch: normal;
     line-height: 1.2;
     text-align: left;
     letter-spacing: 1.6px;
     color: #e3004c;
     text-transform: uppercase;
     margin-top: 30px;
 }

 h1 {
     font-size: 1.6rem;
     font-weight: 900;
     font-style: normal;
     font-stretch: normal;
     line-height: 1.25;
     letter-spacing: 0.6px;
     text-align: center;
     text-transform: uppercase;
 }

 h2 {
     font-family: Metropolis;
     font-size: 1.2rem;
     font-weight: 500;
     font-style: normal;
     font-stretch: normal;
     line-height: 1.1;
     letter-spacing: 1.0px;
     text-align: left;
     text-transform: uppercase;
     color: var(--white-color);
     margin-top: 10px
 }

 .content,
 p {
     font-size: 1.2em;
     font-weight: 300;
     font-style: normal;
     font-stretch: normal;
     line-height: 1.5;
     letter-spacing: 0.5px;
     text-align: left;
     hyphens: auto;
     color: var(--greyish-color);
     -webkit-hyphens: auto;
 }

 .content .dark {
     color: #4a4a4a;
 }

 .content .light {
     color: #e6e6e6;
 }

 .light {
     color: var(--white-color);
 }

 .dark {
     color: #000000;
 }

 .legal {
     color: var(--greyish-color);
 }

 .pipe {
     margin-left: 2px;
     margin-right: 2px;
     color: var(--greyish-color);
 }
 /**DREIECK**/

 .dreieck {
     border-top: 12vw solid #191919;
     border-right: 100vw solid transparent;
     width: 0;
     height: 0;
     background-color: white;
 }

 .dreieck-bottom {
     border-top: 12vw solid white;
     border-right: 100vw solid transparent;
     width: 0;
     height: 0;
     background-color: var(--main-bg-color);
 }

 .dreieck-footer {
     border-top: 4vw solid var(--main-bg-color);
     border-right: 100vw solid transparent;
     width: 0;
     height: 0;
     background-color: var(--darkest-color);
 }
 /**ICONS**/

 .icon {
     width: var(--icon-width);
     height: var(--icon-height);
     object-fit: contain;
     margin-bottom: var(--margin-icon);
 }

 .icon-lock {
     width: 20px;
     height: 20px;
 }

 .social {
     width: 3em;
 }

 .twitter {
     margin-right: 1em;
 }
 .facebook {
     margin-right: 1em;
 }

 .support {
      margin-right: 1em;
  }
 /**IMAGES**/

 .antetype-logo {
     width: 40vw;
     max-width: 300px;
    max-height: 300px;
 }

 .Real-Silver {
     object-fit: contain;
     width: 80vw;
     max-width: 800px;
 }

 .preview {
     max-width: 800px;
     object-fit: contain;
     width: 80vw;
 }

 .btnAppstore {
     width: 50vw;
     max-width: 300px;
     margin-top: 2vw;
     margin-bottom: 2vw;
 }
 /**Adjustments Desktop**/

 @media (min-width: 1024px) {
     .content {
         font-size: 1.6rem;
         font-weight: 200;
     }
     .icon {
         width: var(--icon-width-desktop);
         height: var(--icon-height-desktop);
         object-fit: contain;
         margin-bottom: var(--margin-icon);
     }
     h1 {
         font-size: 2.5rem;
         font-weight: 800;
     }
 }
 /**Adjustments Mobile**/

 @media only screen and (min-device-width: 375px) and (max-device-width:420px) {
     .dreieck {
         border-top: 12vw solid var(--main-bg-color);
         margin-top: -2px;
         margin-bottom: -1px;
     }
     .dreieck-bottom {
         border-top: 12vw solid white;
         margin-top: -2px;
         margin-bottom: -1px;
     }
     .dreieck-footer {
         border-top: 6vw solid var(--main-bg-color);
     }
 }

 /**VIDEO**/

  .video-wrapper {
     position: relative;
 }

 .video-wrapper > video {
     width: 100%;
     max-width: 300px;
     vertical-align: middle;
 }

 .video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
     display: none;
 }

 .video-overlay-play-button {
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     padding: 10px calc(50% - 50px);
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     opacity: 0.95;
     cursor: pointer;

     transition: opacity 150ms;
 }

 .video-overlay-play-button:hover {
     opacity: 1;
 }

 .video-overlay-play-button.is-hidden {
     display: none;
 }