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

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

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

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

/* Anwendung */
body {
  font-family: 'InterLocal', sans-serif;
  font-weight: 300;
  color: #fff;
  background-color: #0f0f0f;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: 'InterLocal', sans-serif;
  text-transform: uppercase;
  font-weight: 300;
}

a {
  color: #d3003d !important;
  text-decoration: none !important;
}

.zi-10 {
  z-index: 10;
}

strong {
  font-weight: 600 !important;
}

fw-600 {
  font-weight: 600 !important;
}

.border-danger {
  border-color: #d3003d !important;
}

.text-danger {
  color: #d3003d !important;
}


/* BTN */

.c17-btn {
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  border: none;
  padding: 0.75em 1.5em;
  border-radius: 150px;
  cursor: pointer;
  font-weight: bold;
  /* background: linear-gradient(135deg, #d3003d, #890029); von Original zu dunklerem Ton */
  /* transition: background 1.9s ease, transform 0.2s ease; */

  background: linear-gradient(120deg, #d3003d, #d3003d, #890029);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .75s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.c17-btn:hover {
  background-position: 0 0;
  /* transform: translateY(-2px); */
  /* box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); */
}

.c17-btn.btn-outline-light {
  background: transparent !important;
  border: 1px solid #f8f9fa;
  color: #f8f9fa;
}

.c17-btn.btn-outline-light:hover {
  background: #f8f9fa !important;
  border: 1px solid #f8f9fa;
  color: #000;
}

.c17-btn.btn-link-light {
  background: transparent !important;
  border: none !important;
  color: #f8f9fa;
}

.c17-btn.btn-link-light:hover {
  background: none !important;
  border: none !important;
  color: #d3003d !important;
}

.c17-btn-preicon {
  margin-right:.25rem;
}

.c17-hhelp {
  color: #313131;
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: 600;
}
/* SECTION: MENU */

.c17-home-icon {
  width: 60px;
}

/* SECTION: HERO */

.c17-hero-topline {
  text-transform: uppercase;
  text-align: center;
  font-size: .6rem;
}

.c17-hero-p {
  text-align: center;
  font-size: .8rem;
}


.c17_h1_hidden {
  font-size: 0px;
}

.c17-index-bg-lg {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: 
  linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,     /* oben: dunkel */
    rgba(0, 0, 0, 0.0) 10%,    /* bei 10%: komplett transparent */
    rgba(0, 0, 0, 0.0) 90%,    /* bis 90%: transparent */
    rgba(0, 0, 0, 1) 100%    /* unten: dunkel */
  ),
  url("/imgs/index-bg-lg.png");

  /* Set a specific height */
  height: 100%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.c17-hero-about {
  font-size: .75rem;
}

/* SECTION: COPYRIGHT */
.c17-copyright {
  text-transform: uppercase;
  font-size: 9px;
}

/* SECTION: EPIC-METHOD */
.c17-epic-icon-wrapper {
  display: flex;
  position: relative;
}

.c17-epic-card {
  margin: 0 1rem;
  text-align: center;
  border-radius: 8px;
  /* background: linear-gradient(120deg, #131313, #131313, #0a0a0a); */
  /* background-color: #131313; */
  border: 1.5px solid rgb(51, 51, 51);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3rem !important;
}



.c17-epic-card.result {
  text-align: left;
  justify-content: start;
  align-items: start;
  padding-left: 3rem !important;
}

.c17-epic-card.result h4 {
  text-transform:initial !important;
}

.c17-epic-card div.c17-epic-icon {
  height: 64px;
  width: 64px;
  /* background-color: #d3003d; */
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #d3003d, #d3003d, #890029);
  background-size: 200% 100%;
  background-position: 100% 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}



.c17-epic-card.card-sub div.c17-epic-icon {
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent ;
  border: 2px solid #d3003d ;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.c17-epic-icon-blurry {
  opacity: 0.6;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    background-color: #d3003d !important;
    filter: blur(24px);
    position: absolute;
    inset: 0%;
    z-index: 1 !important;
}

.c17-epic-card.bg-sub {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: 
  linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 45%,    /* bis 90%: transparent */
    rgba(0, 0, 0, 0) 80%,    /* bis 90%: transparent */
    rgba(0, 0, 0, 0) 100%    /* unten: dunkel */
  ),
  url("/imgs/bg/bg-cinema-crowd.webp");

  /* Set a specific height */
  height: 100%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.c17-epic-card div.c17-epic-icon-blurry.purple {
  background: linear-gradient(120deg, #ED039E, #ED039E, #74004d) !important;
}

.c17-epic-card div.c17-epic-icon.purple {
  border-color: #ED039E !important;
}

.c17-epic-card div.c17-epic-icon-blurry.blue {
  background: linear-gradient(120deg, #32ACE9, #32ACE9, #005783) !important;
}

.c17-epic-card div.c17-epic-icon.blue {
  border-color: #32ACE9 !important;
}

.c17-epic-card div.c17-epic-icon-blurry.yellow {
  background: linear-gradient(120deg, #e9e632, #e9e632, #e9a332) !important;
}

.c17-epic-card div.c17-epic-icon.yellow {
  border-color: #e9e632 !important;
}

.c17-epic-card div.c17-epic-icon.green {
  background: linear-gradient(120deg, #05E304, #05E304, #007d00) !important;
}


.c17-epic-card div.c17-epic-icon img {
  height: 32px;
}

.c17-epic-card h4 {
  font-weight: 400;
  color: #fff;
}

.c17-epic-card h4.purple {
  color: #ED039E !important;
}

.c17-epic-card h4.green {
  color: #05E304 !important;
}

.c17-epic-card h4.blue {
  color: #32ACE9 !important;
}

.c17-epic-card p {
  font-size: 1rem;
  line-height: 1.625;
  color: #A5A7A6;
  font-weight: 400;
}

.c17-epic-subcard {
  margin: 0 1rem;
  text-align: center;
  /* background-color: #131313; */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem !important;
}

.c17-epic-subcard p {
  margin: 0 !important;
  text-transform: uppercase;
  font-size: .8rem;
}

.headline-real-branding {
  line-height: 2.5rem;
}


.headline-real-branding small {
  font-size: 2rem;
}


/* // X-Small devices (portrait phones, less than 576px) */
/* // No media query for `xs` since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* SECTION: HERO */

  .c17-hero-topline {
    text-transform: uppercase;
    text-align: center;
    font-size: .8rem;
  }

  .c17-hero-p {
    text-align: center;
    font-size: 1.1rem;
  }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  
  .mt-lg-n1 {
    margin-top: -1rem;
  }

  .mt-lg-n2 {
    margin-top: -2rem;
  }

  .mt-lg-n3 {
    margin-top: -3rem;
  }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  .position-xl-absolute {
    position:absolute !important;
  }
  
  .bottom-xl-0 {
    bottom: 0 !important;
  }
  
  .w-xl-100 {
    width: 100% !important;
  }

  /* SECTION: HERO */

  .c17-hero-topline {
    text-transform: uppercase;
    text-align: center;
    font-size: .8rem;
  }

  .c17-hero-p {
    text-align: center;
    font-size: 1.1rem;
  }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

  /* SECTION: MENU */

.c17-home-icon {
  width: 80px;
}
  
}