/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v25-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* allison-regular - latin */
@font-face {
  font-family: 'Allison';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/allison-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/allison-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/allison-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/allison-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/allison-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/allison-v9-latin-regular.svg#Allison') format('svg'); /* Legacy iOS */
}

/* grey-qo-regular - latin */
@font-face {
  font-family: 'Grey Qo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/grey-qo-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/grey-qo-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/grey-qo-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/grey-qo-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/grey-qo-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/grey-qo-v7-latin-regular.svg#GreyQo') format('svg'); /* Legacy iOS */
}

/* rubik-glitch-regular - latin */
@font-face {
  font-family: 'Rubik Glitch';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rubik-glitch-v2-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/rubik-glitch-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rubik-glitch-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/rubik-glitch-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/rubik-glitch-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/rubik-glitch-v2-latin-regular.svg#RubikGlitch') format('svg'); /* Legacy iOS */
}

/* unbounded-regular - latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/unbounded-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/unbounded-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/unbounded-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/unbounded-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/unbounded-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/unbounded-v3-latin-regular.svg#Unbounded') format('svg'); /* Legacy iOS */
}
/* unbounded-700 - latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/unbounded-v3-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/unbounded-v3-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/unbounded-v3-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/unbounded-v3-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/unbounded-v3-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/unbounded-v3-latin-700.svg#Unbounded') format('svg'); /* Legacy iOS */
}

/* zen-dots-regular - latin */
@font-face {
  font-family: 'Zen Dots';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/zen-dots-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/zen-dots-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zen-dots-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/zen-dots-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zen-dots-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zen-dots-v10-latin-regular.svg#ZenDots') format('svg'); /* Legacy iOS */
}


:root {
	--red: #da2c4d;
	--yellow: #f8ab37;
	--green: #2ecc71;
	--white: #ffffff;
	--grey-light: #f2f7f9;
	--grey: #ecedf3;
	--black: #080808;
	--black-blue: #1f2029;
	--black-blue-light: #353746;
	--black-blue-light-2: #404255;
	--black-blue-light-3: #4b4d64;
	--black-light: #424455;
  --bs-body-bg: #4b4b4b !important;
  --bs-body-font-size: 1.25rem !important;
  --bs-da-blue: #2a9fd6;
  --bs-body-font-family: 'Roboto Condensed' !important;
  --bs-dropdown-link-hover-bg: #2a9fd6 !important;
  --bs-breadcrumb-margin-bottom: 0 !important;
}

html {
  scroll-behavior: smooth;

}

.allison {
  font-family: 'Allison';
}

.blackpanther {
  font-family: 'Zen Dots';
}

.airfalcon {
  font-family:'Unbounded';
  text-transform: uppercase;
  font-style: italic;
}

.grey-qo {
  font-family: 'Grey Qo';
}

.beast {
  font-family: 'Rubik Glitch';
}

html, body, header {
  margin: 0;
  padding:0;
}

.bg-breadcrumb {
  background-color: var(--bs-da-blue);
  height:3rem !important;
}
.bg-breadcrumb ol {
  padding-top:0.4rem !important;
}

body {
  position: relative;
  background-color: var(--bs-body-bg);
  color:var(--grey-light);
}

section {
  scroll-margin-top: 92px;
}

.marker {
  background-image: url('/image/marker.svg');
  background-size: cover;
  background-color: #2a9fd6;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  }
  .mapboxgl-popup {
  max-width: 600px;
  }

  .mapboxgl-popup-content {
  text-align: center;
  }


.nav-item::after{content:'';display:block;width:0px;height:2px;background:#2a9fd6;transition: 0.2s;}
.nav-item:hover::after{width:100%;}
.navbar .navbar-nav .active > .nav-link,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.show,
.navbar .navbar-nav .show > .nav-link,
.navbark .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:hover
{color:#2a9fd6;}
.nav-link{padding:15px 5px;transition:0.2s;}
.nav-item.active::after {content:'';display:block;width:0px;height:2px;background:#2a9fd6;width:100%;}

.stage {
  min-height: 100vh;
  height:100vh;
  background-image: url(/image/bg_ctsv.jpg);
  background-size: cover;
  background-position: center center;   
}

.h-stage {
  min-height: 50vh;
  height:50vh;
  background-size: cover;
  background-position: center center;   
}

.h-leistungen {
  min-height: 33vh;
  height:33vh;
  background-image: url(/image/leistungen.jpg);
  background-size: cover;
  background-position: center center;   
}

.h-stage::after {
  position: absolute;
  width: 100%;
  height: 50vh;
  top: 0px;
  left: 0px;
  content: '';
  background: rgba(0, 0, 0, .5) url(/image/pattern.png) repeat top left;
  z-index:0;
}

.h-referenzen {
  min-height: 33vh;
  height:33vh;
  background-image: url(/image/slider-02-03.jpg);
  background-size: cover;
  background-position: center center;   
}

.h-impressum {
  min-height: 33vh;
  height:33vh;
  background-image: url(/image/slider-02-03.jpg);
  background-size: cover;
  background-position: center center;   
}

.h-datenschutz {
  min-height: 33vh;
  height:33vh;
  background-image: url(/image/slider-02-03.jpg);
  background-size: cover;
  background-position: center center;   
}

.on-top {
  z-index:100;
}

.h-leistungen::after, .h-referenzen::after, .h-impressum::after, .h-datenschutz::after {
  position: absolute;
  width: 100%;
  height: 33vh;
  top: 0px;
  left: 0px;
  content: '';
  background: rgba(0, 0, 0, .5) url(/image/pattern.png) repeat top left;
  z-index:0;
}

.home-carousel, .home-carousel-inner, .home-carousel-item {
  min-height: 100vh;
  height:100vh;
  overflow-y: hidden;
  z-index: 1;
  opacity: 1;
}

.scroll-down {
  width: 50px;
    height: 30px;
    position: absolute;
    top: 92vh;
    
    z-index: 30;
    left: calc(50% - 30px);
    color:white;
    align-content: center;
    align-items: center;
    text-align: center;
}

.home-carousel-indicators {
  margin-bottom:3rem !important;
}

.home-carousel-caption {
  bottom:5.5rem !important;
}

.bg-ctsv {
  background-image: url(/image/bg_ctsv.jpg);
  background-size: cover;
  background-position: center center;    
}

.bg-s3 {
  background-image: url(/image/bg_s3.jpg);
  background-size: cover;
  background-position: center center;    
}

.bg-scirocco
{  background-image: url(/image/bg_scirocco.jpg);
  background-size: cover;
  background-position: center center;    
}

.bg-q5 {
  background-image: url(/image/bg_q5.jpg);
  background-size: cover;
  background-position: center center;    
}

.blur {
  /* From https://css.glass */
background: rgba(26, 25, 25, 0.5);
border-radius: 0px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 0px solid rgba(255, 255, 255, 0.3);
}

.h-10 {
  height:40px !important;
}

.h-100 {min-height:100vh;}

.w-10 {
  width:10% !important;
}

.w-33 {
  width:30% !important;
}

.w-66 {
  width:66% !important;
}
.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}
.icon-scroll {
  width: 20px;
  height: 40px;
  margin-left: -5px;
  top: 50%;
  margin-top: -35px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
}
.icon-scroll:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 3px;
  border-radius: 4px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}
@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(22px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(22px);
  }
}



.blur-light {
  /* From https://css.glass */
background: rgba(184, 184, 184, 0.5);
border-radius: 0px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width : 992px) {
    .offcanvas {
      visibility      : visible;
      position        : relative;
      background      : none;
      border          : none;
      justify-content : end;
      color           : rgb(34, 38, 44);
      min-height: fit-content;
    }
}

@media (min-width: 1600px) {

  @-webkit-keyframes zoom-a {
    0% { background-size: 100% auto; }
    100% { background-size: 110% auto; }
  }
  @-moz-keyframes zoom-a {
    0% { background-size: 100% auto; }
    100% { background-size: 110% auto; }
  }
  @-o-keyframes zoom-a {
    0% { background-size: 100% auto; }
    100% { background-size: 110% auto; }
  }
  @keyframes zoom-a {
    0% { background-size: 100% auto; }
    100% { background-size: 110% auto; }
  }
  
  .type-a {
    -webkit-animation: zoom-a 10s linear infinite alternate; /* Safari 4+ */
    -moz-animation:    zoom-a 10s linear infinite alternate; /* Fx 5+ */
    -o-animation:      zoom-a 10s linear infinite alternate; /* Opera 12+ */
    animation:         zoom-a 10s linear infinite alternate; /* IE 10+, Fx 29+ */
  }    
  .home-carousel-caption h2 {
    font-size:2vw !important;
  }

  .home-carousel-caption a {
    font-size: 1.5em !important;
  }

}

@media (max-width : 992px) {
    .offcanvas {
      width : 290px !important;
      min-height: 100vh;
      overflow-y: auto;
    }

    section {
      scroll-margin-top: 70px;
    }

    
    .scroll-down {
      width: 50px;
        height: 30px;
        position: absolute;
        top: 83vh;
        
        z-index: 30;
        left: calc(50% - 30px);
        color:white;
        align-content: center;
        align-items: center;
        text-align: center;
    }
    .carousel-caption {
      bottom:9.5em !important;
    }

    .offcanvas-start-lg {
      top          : 0;
      left         : 0;
      border-right : 1px solid rgba(0, 0, 0, .2);
      transform    : translateX(-100%);
    }
    .bg-sm-dark {
      background-color: rgba(0, 0, 0, 0.8);
    }

    .h-10 {
      height:40px !important;
    }
    
    .w-33 {
      width:70% !important;
      margin:0 auto !important;
      position: absolute;
    }
  }
  @media (min-height: 1020px) {
    .scroll-down {
      width: 50px;
        height: 30px;
        position: absolute;
        top: 92vh;
        
        z-index: 30;
        left: calc(50% - 30px);
        color:white;
        align-content: center;
        align-items: center;
        text-align: center;
    }
    .carousel-caption {
      bottom:9rem !important;
    }
  }


.item-bg:after {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
      content: '';
      background: transparent url(/image/pattern.png) repeat top left;
      z-index:0;
}
  
  
  .navbar-nav li a {
    color: white;
  }

  svg {
    fill: currentColor;
  }


/* #Progress
================================================== */

.progress-wrap {
	position: fixed;
	right: 20px;
	bottom: 20px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
  background-color: rgba(255, 255, 255, 0.8);
}
.progress-wrap::after {
	position: absolute;
	font-family: 'unicons';
	content: '\e84b';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color:  rgba(42, 159, 214,0.5);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 0;
}
.progress-wrap::before {
	position: absolute;
	font-family: 'unicons';
	content: '\e84b';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
  color: #1f2029;
	-webkit-background-clip: text;
  background-clip: text;
	-webkit-text-fill-color: black;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
  color: #1f2029;

}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke:  rgba(42, 159, 214,0.5);
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap {
	box-shadow: inset  0 0 0 2px rgba(0,0,0,0.2);
}
.progress-wrap::after {
	color:  rgba(42, 159, 214,0.5);
}
.progress-wrap svg.progress-circle path {
	stroke:  rgba(42, 159, 214,0.5);
}


@-webkit-keyframes border-transform{
  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
@keyframes border-transform{
  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}


@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}


.circle-border {
  width: 150px;
  height: 150px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(42, 159, 214);
  background: linear-gradient(0deg, rgba(42, 159, 214,0.1) 33%, rgba(42, 159, 214,1) 100%);
  animation: spin .8s linear 0s infinite;
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #1d2630;
  border-radius: 50%;
}

a>img:hover {
  cursor:zoom-in;
}