:root{
  --p-mini: 1rem;
  --p: 1.6rem;
  --h4: 1.4rem;
  --h3: 2rem;
  --h2: 2.8rem;
  --heading-text: clamp(1.8rem, 3.6vw, 4rem);
  --heading-text-height: clamp(2rem, 4.6vw, 5rem);
  --start: clamp(.8rem, 1.2vw, 2rem);
  --contact: clamp(.8rem, 1.2vw, 2rem);
  --spc50: 100px;
  --spc100: 100px;
  --spc150: 150px;
}

* {
  box-sizing: border-box;
}
@font-face {
  font-family: 'Signika Negative';
  font-weight: 100 1000;
  src: url('../css/fonts/SignikaNegative-VariableFont.ttf') format('truetype');
  font-display: swap;
}
body {
  font-size: 14px;
  text-rendering: geometricPrecision;
  margin: 0;
}
h2 {
  color: rgba(42,47,122,1);
  font-family: Signika Negative;
  font-weight: 600;
  font-size: var(--h2);
  text-align: left;
  width: 70%;
  margin: 0 15%;
}
h3 {
  color: rgba(42,47,122,1);
  font-family: Signika Negative;
  font-weight: 600;
  font-size: var(--h3);
  text-align: left;
  width: 70%;
  margin: 3rem 15% 1rem 15%;
}
h4 {
  color: rgba(255,255,255,1);
  font-family: Signika Negative;
  font-weight: 600;
  font-size: var(--h4);
  text-align: left;
  width: 70%;
  margin: 0 15%;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.white{
  color: rgba(255,255,255,1);
}
a.blue{
  color: rgba(42,47,122,1);
}
#heroVideo{
  min-width: 100vw;
}
.text{
  color: rgba(42,47,122,1);
  font-family: Signika Negative;
  font-weight: 300;
  font-size: var(--p);
  text-align: left;
  width: 70%;
  margin: 1rem 15%;
}
.text-mini{
  font-family: Signika Negative;
  font-weight: 300;
  font-size: var(--p-mini);
  text-align: left;
  width: 70%;
  padding: 0;
  margin: 1rem 15%;
}
.text-mini span{
  padding-bottom: 0.6rem;
}
.container {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.top-block-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  position: relative;
  overflow: hidden;
  background: #2A2F7A;
}
.top-sentence {
  width: 100%;
  z-index: 2;
  height: 100px;
  position: relative;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--spc50);
  padding-bottom: var(--spc50);
}
.top-sentence-mobile{
  display: none;
}
.logo{
  content: url("../images/logo.svg");
  width: 8%;
  max-height: 90px;
  position: relative;
  margin-left: 15%;
  z-index: 2;
}
.logo-dark{
  content: url("../images/logo-dark.svg");
  width: 8%;
  max-height: 90px;
  position: relative;
  margin-left: 15%;
  z-index: 2;
}
.logo-alreadytomorrow{
  content: url("../images/logo-AT.svg");
  display: inline-block;
  height: 70px;
  position: relative;
  z-index: 2;
}
.logo-oktrade{
  content: url("../images/logo-OKtrade.svg");
  display: inline-block;
  height: 70px;
  position: relative;
  z-index: 2;
}
.tribute-logos{
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  margin: 70px 15% 0 15%;
}
.start {
  width: 30%;
  color: rgba(42,47,122,1);
  position: relative;
  margin-left: 20px;
  font-family: Signika Negative;
  font-weight: 600;
  font-size: var(--start);
  text-align: left;
  z-index: 2;
}
.spacer{
  width: 24%;
}
.contact {
  width: auto;
  color: rgba(255,255,255,1);
  position: relative;
  font-family: Signika Negative;
  font-weight: 600;
  font-size: var(--contact);
  text-align: right;
  z-index: 2;
}
.heading {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  position: relative;
  overflow: hidden;
  z-index: 10;
  justify-content: space-between;
  align-items: center;
}
.heading-mobile{
  display: none;
}
.top-1{
  content: url("../images/1.svg");
  position: absolute;
  max-width: 19vw;
  left: -8vw;
  top: 115px;
  z-index: 3;
  animation: vibrate 4s infinite;
}
.top-2{
  content: url("../images/2.svg");
  position: absolute;
  max-width: 17vw;
  right: 27%;
  top: -8vw;
  z-index: 3;
  animation: inflate 8s infinite;
}
.top-3{
  content: url("../images/3.svg");
  position: absolute;
  max-width: 20vw;
  right: 3%;
  bottom: -4vw;
  z-index: 3;
}
.top-4{
  content: url("../images/4.svg");
  position: absolute;
  max-width: 18vw;
  left: 25%;
  bottom: -4vw;
  z-index: 3;
}
@keyframes vibrate {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(0deg); }
  45% { transform: rotate(5deg); }
  48% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  52% { transform: rotate(-5deg); }
  55% { transform: rotate(5deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes inflate {
  0% { transform: scale(1); }
  20% { transform: scale(1); }
  45% { transform: scale(1.3); }
  55% { transform: scale(1.3); }
  80% { transform: scale(1); }
  0% { transform: scale(1); }
}
.top-block{
  content: url("../images/top-block2.svg");
  position: absolute;
  top: 0px;
  z-index: 1;
}
.top-block-2 {
  content: url("../images/top-block-2.svg");
  position: absolute;
  bottom: 0px;
}
.heading-text {
  color: rgba(42,47,122,1);
  display: flex;
  width: 35%;
  margin: 0 0 0 15%;
  padding: 2% 0 0 0;
  font-family: Signika Negative;
  font-weight: 500;
  font-size: var(--heading-text);
  line-height: var(--heading-text-height);
  text-align: left;
}
.picture0{
  content: url("../images/picture0.svg");
  width: 74%;
  position: relative;
  margin: 4rem 15%;
  z-index: 2;
}
.picture1{
  content: url("../images/picture1.webp");
  display: inline-block;
  width: 100vw;
  position: relative;
  margin: 0 0 var(--spc150) 0;
  z-index: 2;
}
.picture3{
  content: url("../images/kit-picture.webp");
  width: 30%;
  position: relative;
  margin: 0;
  z-index: 2;
}
.icon-vib{
  content: url("../images/icon-vib.svg");
  position: relative;
  margin: 0 40px 0 0;
  z-index: 2;
}
.icon-heat{
  content: url("../images/icon-heat.svg");
  position: relative;
  margin: 0 40px 0 0;
  z-index: 2;
}
.icon-inflate{
  content: url("../images/icon-inflate.svg");
  position: relative;
  margin: 0 40px 0 0;
  z-index: 2;
}
.icon-airfib{
  content: url("../images/icon-airfib.svg");
  position: relative;
  margin: 0 40px 0 0;
  z-index: 2;
}
.kit-vib{
  content: url("../images/kit-vib.webp");
  max-width: 90%;
  position: relative;
  padding-bottom: 50px;
  margin: 0;
  z-index: 2;
}
.kit-heat{
  content: url("../images/kit-heat.webp");
  max-width: 90%;
  position: relative;
  padding-bottom: 50px;
  margin: 0;
  z-index: 2;
}
.kit-inflate{
  content: url("../images/kit-inflate.webp");
  max-width: 90%;
  position: relative;
  padding-bottom: 50px;
  margin: 0;
  z-index: 2;
}
.kit-airfib{
  content: url("../images/kit-airfib.webp");
  max-width: 90%;
  position: relative;
  padding-bottom: 50px;
  margin: 0;
  z-index: 2;
}
.kit-title{
  width: 350px;
  max-width: 70%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.kits {
  width: 100%;
  height: auto;
  display: flex;
  background-color: #2A2F7A;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  margin: var(--spc150) 0 0 0;
  padding: var(--spc150) 0 var(--spc100) 0;
}
.midi {
  width: 100%;
  height: auto;
  background-color: #2A2F7A;
  position: relative;
  overflow: hidden;
  margin: var(--spc150) 0;
  padding: var(--spc150) 0;
}
.footer-block{
  width: 92%;
  display: flex;
  flex-direction: column;
}
.footer-mini-block{
  width: 35%;
}
footer {
  width: 100%;
  display: flex;
  align-items: flex-start;
  color: rgba(255, 255, 255, 1.0) ;
  background-color: #2A2F7A;
  position: relative;
  overflow: hidden;
  margin-top: var(--spc150);
  padding: var(--spc100) 0;
}
.contact-extra-container{
  display: flex;
  margin: 0 15%
}


@media screen and (max-device-width: 480px){
  :root {
    --p-mini: 1rem;
    --p: 1.3rem;
    --h4: 1.4rem;
    --h3: 1.6rem;
    --h2: 2rem;
    --heading-text: 1.9rem;
    --heading-text-height: normal;
    --start: 1.4rem;
    --contact: 1.4rem;
    --spc50: 2rem;
    --spc100: 3rem;
    --spc150: 4rem;
  }
  .heading{
    display: none;
  }
  .heading-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    position: relative;
    overflow: hidden;
    z-index: 10;
  }
  .picture3{
    width: 85%;
    margin: 50px 0 0 15%;
  }
  .heading-text{
    width: 70%;
  }
  .top-block-container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    position: relative;
    overflow: hidden;
    background: #2A2F7A;
    top: 0;
  }
  .top-sentence{
    display: none;
  }
  .top-sentence-mobile {
    width: 70%;
    margin: 30px auto;
    z-index: 2;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
  .start{
    width: 100%;
    margin: 30px 0;
  }
  .top-1{
    content: url("../images/1.svg");
    position: absolute;
    max-width: 100px;
    left: -35px;
    top: 250px;
    z-index: 3;
    animation: vibrate 4s infinite;
  }
  .top-2{
    content: url("../images/2.svg");
    position: absolute;
    max-width: 100px;
    right: 33%;
    top: -40px;
    z-index: 3;
    animation: inflate 8s infinite;
  }
  .top-3{
    content: url("../images/3.svg");
    position: absolute;
    max-width: 120px;
    right: 3%;
    bottom: -20px;
    z-index: 3;
  }
  .top-4{
    content: url("../images/4.svg");
    position: absolute;
    max-width: 80px;
    left: 15%;
    bottom: -10px;
    z-index: 3;
  }
  footer{
    flex-direction: column;
  }
  .footer-block{
    width: 100vw;
    margin-top: var(--spc100);
  }
  .logo{
    width: 120px;
    max-height: 100%;
  }
  .logo-dark{
    content: url("../images/logo-dark.svg");
    width: 120px;
    max-height: 90px;
    position: relative;
    margin: 0;
    z-index: 2;
  }
  .contact-extra-container{
    display: flex;
    margin: 0%;
    width: 100vw;
    flex-direction: column;
  }
  .footer-mini-block{
    width: 100%;
  }
  .contact-heading{
    padding-bottom: var(--spc50);
  }
  .text-mini{
    width: 100%;
    margin: 0;
    padding: 0 15%;
    padding-bottom: var(--spc50);
  }
}