@charset "utf8";

html{overflow-x: hidden; font-family: 'Inter Tight';}
body{font-size: 16px; scroll-behavior: smooth;}

@font-face {font-display: swap; font-family: 'Inter Tight';font-style: normal; font-weight: 300;
    src: url('../fonts/inter-tight-v7-latin-300.eot');
    src: url('../fonts/inter-tight-v7-latin-300.eot?#iefix') format('embedded-opentype'),
         url('../fonts/inter-tight-v7-latin-300.woff2') format('woff2'),
         url('../fonts/inter-tight-v7-latin-300.woff') format('woff'),
         url('../fonts/inter-tight-v7-latin-300.ttf') format('truetype'),
         url('../fonts/inter-tight-v7-latin-300.svg#InterTight') format('svg');}

  @font-face {font-display: swap; font-family: 'Inter Tight'; font-style: normal; font-weight: 600;
    src: url('../fonts/inter-tight-v7-latin-600.eot');
    src: url('../fonts/inter-tight-v7-latin-600.eot?#iefix') format('embedded-opentype'),
         url('../fonts/inter-tight-v7-latin-600.woff2') format('woff2'),
         url('../fonts/inter-tight-v7-latin-600.woff') format('woff'),
         url('../fonts/inter-tight-v7-latin-600.ttf') format('truetype'),
         url('../fonts/inter-tight-v7-latin-600.svg#InterTight') format('svg');}

@font-face {font-display: swap; font-family: 'Bebas Neue'; font-style: normal; font-weight: 400;
  src: url('../fonts/bebas-neue-v14-latin-regular.eot');
  src: url('../fonts/bebas-neue-v14-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/bebas-neue-v14-latin-regular.woff2') format('woff2'),
       url('../fonts/bebas-neue-v14-latin-regular.woff') format('woff'),
       url('../fonts/bebas-neue-v14-latin-regular.ttf') format('truetype'),
       url('../fonts/bebas-neue-v14-latin-regular.svg#BebasNeue') format('svg');}

h1{color: rgba(0, 104, 180, 1);}
.text{font-family: 'Bebas Neue';}
.hero-text{color: rgba(255, 255, 255, 0.6); font-size: 5rem; font-weight: 600; line-height: 5rem; transform: skew(-10deg,-5deg); text-shadow: rgba(0, 0, 0, 0.8) #525252; font-family: 'Bebas Neue';}

.logo{position: absolute; top: 25px; left: 25px; width: 100px; height: auto;}

#hero-home{
    width: 100%;
    height: 100vh;
    background: url(../images/header-bg.jpg) center;
    background-size: cover;}

#hero-motorrad{
  width: 100%;
  height: 100vh;
  background: url(../images/header-motorrad.jpg) center;
  background-size: cover;}

#hero-tier{
  width: 100%;
  height: 100vh;
  background: url(../images/header-tier.jpg) center;
  background-size: cover;}

footer{ 
  width: 100%;
  /*background:  rgba(0, 104, 180, 1);*/
  background: linear-gradient(to bottom, #009ee3 0%,#0068b4 100%);
  color: #fff;}
footer a{color: rgba(255, 255, 255, 0.5); text-decoration: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
footer a:hover{color: rgba(255, 255, 255, 0.8); text-decoration: none;}

.copyline{font-size: 0.8rem;}

@media (min-width: 576px) {
  .logo{position: absolute; top: 25px; left: 25px; width: 100px; height: auto;}
  .hero-text{font-size: 5rem; line-height: 5rem;}
}

@media (min-width: 768px) {
  .logo{position: absolute; top: 25px; left: 25px; width: 150px; height: auto;}
  .hero-text{font-size: 4rem; line-height: 4rem;}
}

@media (min-width: 992px) {
  .logo{position: absolute; top: 25px; left: 25px; width: 150px; height: auto;}
  .hero-text{font-size: 10rem; line-height: 10rem;}
}

@media (min-width: 1200px) {
  .logo{position: absolute; top: 25px; left: 25px; width: 400px; height: auto;}
  .hero-text{font-size: 10rem; line-height: 10rem;}
}

@media (min-width: 1400px) {
  .logo{position: absolute; top: 25px; left: 25px; width: 400px; height: auto;}
  .hero-text{font-size: 10rem;  line-height: 10rem;}
}