/*! Place your custom styles here */

@font-face {
    font-family: 'SpectralSC_Regular';
    src: url('../fonts/SpectralSC-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'SpectralSC_Medium';
   src: url('../fonts/SpectralSC-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

.spectralsc_regular{
	font-family: 'SpectralSC_Regular', serif;
}

.spectralsc_medium{
	font-family: 'SpectralSC_Medium', serif;
}


/* @font-face {
    font-family: 'Inter';
   src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

} */

@font-face {
    font-family: 'Inter';
   src: url('../fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'Inter';
   src: url('../fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;

}

@font-face {
    font-family: 'Inter';
   src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;

}

@font-face {
    font-family: 'Inter';
   src: url('../fonts/Inter-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}


.semibold {
    font-weight:500;
}


 /* ICON - CHECKMARK */
.svg-icon-checkmark:before {
 
    /* Using the content property to
       set the background image */
    content: url('../icons/checkmark-light-blue-400.svg');

    /* Using the zoom property to
       control the size of the SVG */
    zoom: 100%;

    margin-bottom: 1em !important;
    
}

p.svg-icon-checkmark {
    margin-bottom: 0.2em !important;
}



 /* ICON - MAIL  */
 .svg-icon-mail:before {
 
    /* Using the content property to
       set the background image */
    content: url('../icons/mail_outline.svg');

    /* Using the zoom property to
       control the size of the SVG */
    zoom: 100%;

    margin-bottom: 1em !important;
    
}

p.svg-icon-mail {
    margin-bottom: 0.2em !important;
}





 /* COLORS  */
.light-blue-100{
    color: #E0F2FE !important;
}

.amber-400{
    color: #FBBF24 !important;
}

.yellow-400{
    color: #FACC15 !important;
}

.light-blue-500{
    color: #0EA5E9 !important;
}




 /* BACKGROUND COLORS  */

.background-black{
    background-color: #000;
}

.background-none{
    background-color: #ffffff00 !important;
    
}



 /* OPACITY  */
.opacity-1 {
    opacity: 1 !important;
}


 /* TEXT ALIGNMENT  */
.text-align-left{
    text-align: left !important;
}


 /* PADDING  */
.padding-0{
    padding: 0em !important;
}

.padding-025{
    padding: 0.25em !important;
}


 /* PADDING BOTTOM */

.padding-bottom-0{
    padding-bottom: 0em  !important;
}

.padding-bottom-1{
    padding-bottom: 1em  !important;
}

.padding-bottom-2{
    padding-bottom: 2em  !important;
}

.padding-bottom-5{
    padding-bottom: 5em  !important;
}

 /* PADDING TOP */

.padding-top-0{
    padding-top: 0em  !important;
}

.padding-top-1{
    padding-top: 1em  !important;
}

.padding-top-2{
    padding-top: 2em  !important;
}

.padding-top-3{
    padding-top: 3em  !important;
}

.padding-top-4{
    padding-top: 4em  !important;
}

.padding-top-5{
    padding-top: 5em  !important;
}

 /* MARGIN  */

.margin-0{
    margin: 0 !important;
}

/* MARGIN TOP */
.margin-top-0{
    margin-top: 0em !important;
}

.margin-top-05{
    margin-top: 0.5em !important;
}

.margin-top-1{
    margin-top: 1em !important;
}
.margin-top-2{
    margin-top: 2em !important;
}
.margin-top-4{
    margin-top: 4em !important;
}

.margin-top-10{
    margin-top: 10em !important;
}


/* MARGIN BOTTOM */
.margin-bottom-0{
    margin-bottom: 0 !important;
}

.margin-bottom-025{
    margin-bottom: 0.25em !important;
}

.margin-bottom-05{
    margin-bottom: 0.5em !important;
}

.margin-bottom-075{
    margin-bottom: 0.75em  !important;
}

.margin-bottom-1{
    margin-bottom: 1em  !important;
}

.margin-bottom-10{
    margin-bottom: 10em  !important;
}


/* MARGIN LEFT */
.margin-left-0{
    margin-left: 0em !important;
}
.margin-left-1{
    margin-left: 1em !important;
}


/* MARGIN RIGHT */
.margin-right-0{
    margin-right: 0em !important;
}
.margin-right-1{
    margin-right: 1em !important;
}



/* LINE HEIGHT */

.line-height-025{
    line-height: 0.25em;
}

.line-height-05{
    line-height: 0.5em;
}

.line-height-1{
    line-height: 1em;
}



/* BUTTONS */
.btn{
    border-radius: 4px !important;
    font-family: Inter;
    
}

.btn.btn-secondary:visited{
    border: 1px solid #ff0000 !important;
    shadow:none;
}

.btn.btn--secondary:active{
    border: 1px solid #FBBF24 !important;
    shadow:none;
    background:none;
}

.btn-feature-box{
    margin-left: 0px !important; 
    padding-top: 0.75em; 
    padding-bottom: 0.75em;
}

.btn--primary{
    box-shadow: 0px 4px 16px #09D0FC60 !important;
    font-size: 1em !important;
    /* font-weight:600 !important; */
    border:none;
}

.btn--primary:hover{
    box-shadow: 0px 4px 20px #09D0FC80 !important;
    font-size: 1em !important;
}


.btn--secondary{
    font-size: 1em !important;
    border: 1px solid #555555 !important;
}

/* .btn__text{
    font-weight:500 !important;
} */


button,
input[type="submit"] {
  height: 3.5em;
}

input,
select {
  height: 3.5em;
}


.inactiveLink {
    pointer-events: none;
    cursor: default;
 }

 
.switchable .row > div[class*="col-"]:last-child:not(:only-child) {
margin-top: 0em;
}


/* BACKGROUND IMAGE PARALLAX FADES */

.background-image-holder-fade-grunge{
    position: absolute;
    height: 197px;
    /* background-color: red; */
    background-image: url("../img/parallax-grunge@2x.png");
    width: 100%;
    bottom: 0;
    background-size: cover;
    background-repeat: repeat;
    z-index:1 !important;
}

.background-image-holder-fade-trees{
    position: absolute;
    height: 110px;
    /* background-color: red; */
    background-image: url("../img/parallax-forest-treeline@2x.png");
    width: 100%;
    bottom: 0;
    background-size: cover;
    background-repeat: repeat;
    z-index:1 !important;
}

.background-image-holder-fade-gradient-top-bottom{
    position: absolute;
    height: 100px;
    /* background-color: red; */
    background-image: url("../img/parallax-gradient-top-to-bottom@2x.png");
    width: 100%;
    top: 0;
    background-size: cover;
    background-repeat: repeat;
    z-index:1 !important;
}



// Mobile Styliing //
@media all and (max-width: 480px){
    .background-image-holder-fade-gradient-top-bottom {
        height: 40px !important;
    }
  }



  @media all and (max-width: 480px){
    .padding-xs-1 {
        padding-top: 1em !important;
    }
  }


  @media (max-width: 767px) {
    h1, .h1 {
      font-size: 2.1em !important;
      line-height: 1.36363636em;
    }
  }

/* HERO IMAGE RESPONSIVE HOME*/
/* scripts.js Zeile 492 - Diese Zeile deklarierte die URL vorher als undefined, daher das important Attribut hinter jeder Zeile   */


.img-hero-home {
    background-image: url("../img/background-human-rogue.jpg");
  }
  
  @media
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    .img-hero-home {
      background-image: url("../img/background-human-rogue@2x.jpg") !important;

    }
  }
  
  
  @media all and (max-width: 480px){
    .img-hero-home {
      background-image: url('../img/background-human-rogue-480@2x.jpg') !important;
      top: 0px !important;
    }
  }
  
  @media all and (min-width: 481px) and (max-width: 768px){
    .img-hero-home {
      background-image: url('../img/background-human-rogue-768@2x.jpg') !important;
      /* top: 0px !important; */
    }
  }
  
  @media all and (min-width: 769px) and (max-width: 1024px){
    .img-hero-home {
      background-image: url('../img/background-human-rogue-1024@2x.jpg') !important;
    }
  }
  

/* NEWSLETTER IMAGE RESPONSIVE HOME*/
/* scripts.js Zeile 492 - Diese Zeile deklarierte die URL vorher als undefined, daher das important Attribut hinter jeder Zeile   */


.img-newsletter {
    background-image: url("../img/background-elf-warrior.jpg");
  }
  
  @media
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    .img-newsletter {
      background-image: url("../img/background-elf-warrior@2x.jpg") !important;
    }
  }
  
  
  @media all and (max-width: 480px){
    .img-newsletter {
      background-image: url('../img/background-elf-warrior-480@2x.jpg') !important;
    }
  }
  
  /* @media all and (min-width: 481px) and (max-width: 768px){
    .img-newsletter {
      background-image: url('../img/background-elf-warrior-768@2x.jpg') !important;
    }
  }
  
  @media all and (min-width: 769px) and (max-width: 1024px){
    .img-newsletter {
      background-image: url('../img/background-elf-warrior-1024@2x.jpg') !important;
    }
  } */