/* Variablen Difinition */

:root {
	
	--primary-color: #132e5d;
	--bs-primary-rgb: 19,46,93;   
	--secondary-color: #ef941d;
	--bs-secondary-rgb: 239,148,29;
	--menu-color: rgba(255,0,0,0.9);
	--menu2-color: rgba(255,0,0,0.75);
	--font-color: #132e5d;
	--font-md-color: #6c757d;	
	--font-light-color: #bbbbbb;	
	--shadow-color: rgba(0,0,0,0.20);	
	
 	--bs-body-font-family: Roboto, Helvetica, Arial, sans-serif;	
 	--bs-body-color: #132e5d;	  
 	--bs-body-font-size: 1.6vh;
  	--bs-body-font-weight: 300;
  	--bs-body-line-height: 1.50;	
	
  	--bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dde4ea;
    --bs-border-color-translucent: rgba(0,0,0,.175);
    --bs-border-radius: 0.35rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.45rem;
    --bs-border-radius-xl: 0.6rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
	--bs-nav-link-color: #132e5d;
    --bs-link-color: #ef941d;
    --bs-link-hover-color: #bb0000;
    --bs-highlight-bg: #bb0000;
	--bs-dropdown-link-hover-color: #ee0000;
	
}

@media only screen and (max-width: 768px) {	
	:root {
		--bs-body-font-size: 2vh;
	}
}

/* Basiselemente */

body {
	font-weight: 400;
}

	  

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6{	
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-weight: 900;
	color: var(--primary-color);
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.h1, h1 {
    font-size: 5vh;
}

.h2, h2 {
    font-size: 3.5vh;
	padding-bottom: 5vh;
}

.h3, h3 {
    font-size: 2.5vh;
}

#datenschutz .h2,#datenschutz h2 {
    font-size: 2.5vh;
	padding-bottom: 2vh;
	padding-top:3.5vh;
	color: var(--secondary-color);
}

#datenschutz .h3, #datenschutz h3 {
    font-size: 2.0vh;
	padding-bottom: 1.5vh;
	padding-top:3vh;
}

.h4, h4 {
    font-size: 1.8vh;
}

.bg-dark p {
    color: #ddd;
}

.mainheadline {
	margin-top: 4vh;
	margin-bottom: 1vh;
    font-size: 5.5vh!important;
    line-height: 1em;
	font-family: 'Passion One', SparkasseWebBold, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.01em
}

@media only screen and (max-width: 767px) {
    .mainheadline {
		margin-top: 0vh;
    }
}

.muted {
	color:#888888!important;
}

.uppercase {
	text-transform: uppercase!important;
}

.text-dark {
	color: var(--font-color);
}

.txt-durchgestrichen {
	text-decoration: line-through;
}

.fs-small {
	font-size: 1.3vh;
}

.fs-xs {
	font-size: 1.45vh;
}

.fs-sm {
	font-size: 1.8vh;
}

.fs-medium {
	font-size: 2.5vh;
}

.fs-big {
	font-size: 5.2vh;
	line-height: 1.2;
}

.fw-light {
	font-family: SparkasseWebLight, Helvetica, Arial, sans-serif;
}

.fw-bold, strong {
	font-family: SparkasseWebBold, Helvetica, Arial, sans-serif;
}

.fussnote {	
	font-family: SparkasseWebLight, Helvetica, Arial, sans-serif;
    top: -0.3em;
}

.schreibschrift {
	font-family: 'Passion One', SparkasseWebBold, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.01em
}

@media only screen and (max-width: 767px) {
    .text-primary-xs {
        color:var(--primary-color)!important;
    }
}
 
.text-primary {
	color:var(--primary-color)!important;
}

.text-secondary {
	color:var(--secondary-color)!important;
}

.text-color {
	color:var(--font-color)!important;
}

.text-highlight {
	color:var(--highlight-color)!important;
}

.text-highlight-2 {
	color:var(--highlight-2-color)!important;
}

.text-highlight-3 {
	color:var(--highlight-3-color)!important;
}

.text-white, .text-white>.dropdown-item>a {
	color:#fff!important;
}

/* Standardelemente */

.fs-1vh {
	font-size: 1vh!important;
}

.fs-2vh {
	font-size: 2vh!important;
}

.fs-2-1vh {
	font-size: 2.1vh!important;
}

.fs-2-2vh {
	font-size: 2.2vh!important;
}

.fs-2-3vh {
	font-size: 2.3vh!important;
}

.fs-3vh {
	font-size: 3vh!important;
}

.fs-3-5vh {
	font-size: 3.5vh!important;
}

.fs-4vh {
	font-size: 4vh!important;
}

.min-vh-7 {
    min-height: 7vh !important;
}

.min-vh-10 {
    min-height: 10vh !important;
}

.min-vh-12 {
    min-height: 12vh !important;
}

.min-vh-20 {
    min-height: 20vh !important;
}

.min-vh-30 {
    min-height: 30vh !important;
}

.min-vh-35 {
    min-height: 35vh !important;
}

.min-vh-40 {
    min-height: 35vh !important;
}

.h-100vh {
	height: 100vh!important;
	max-height: 100vh!important;
	min-height: 100vh!important;
}

.h-95vh {
	height: 95vh!important;
	max-height: 95vh!important;
	min-height: 95vh!important;
}

.h-90vh {
	height: 90vh!important;
	max-height: 90vh!important;
	min-height: 90vh!important;
}

.h-85vh {
	height: 85vh!important;
	max-height: 85vh!important;
	min-height: 85vh!important;
}

.h-80vh {
	height: 80vh!important;
	max-height: 80vh!important;
	min-height: 80vh!important;
}

.h-75vh {
	height: 75vh!important;
	max-height: 75vh!important;
	min-height: 75vh!important;
}

.h-70vh {
	height: 70vh!important;
	max-height: 70vh!important;
	min-height: 70vh!important;
}

.h-65vh {
	height: 65vh!important;
	max-height: 65vh!important;
	min-height: 65vh!important;
}

.h-60vh {
	height: 60vh!important;
	max-height: 60vh!important;
	min-height: 60vh!important;
}

.h-55vh {
	height: 55vh!important;
	max-height: 55vh!important;
	min-height: 55vh!important;
}	
	
.h-50vh {
	height: 50vh!important;
	max-height: 50vh!important;
	min-height: 50vh!important;
}


@media only screen and (max-width: 767px) {
	
	.h-30vh-xs {
		height: 30vh!important;
		max-height: 30vh!important;
		min-height: 30vh!important;
	} 
}

.w-800 {
	width: 800px;
}

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

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

.mr-3 {
	margin-right: 2rem!important;
}

.mr-4vw {
	margin-right: 4vw;
}
.ml-4vw {
	margin-left: 4vw;
}

.mt-n20vh {
	margin-top: -20vh;
}

.pb-20vh {
	padding-bottom: 20vh;
}

.pl-5 {
	padding-left: 5vw!important;
}

.pr-5 {
	padding-right: 5vw!important;
}

.pl-6 {
	padding-left: 6vw!important;
}

.pr-6 {
	padding-right: 6vw!important;
}

.pl-7 {
	padding-left: 7vw!important;
}

.pr-7 {
	padding-right: 7vw!important;
}

.hidden {
	display: none!important;
}

.rotate-180 {
	transform: rotate(180deg);
}

/* Header */

#js_header_spacer {
	height: 0!important;
}

.navbar-brand>img {
    max-height: 60px;
    max-width: 180px;
}
.navbar-toggler {
	border: none;
}

.nav-link {
	color: var(--primary-color);
	font-weight: 700;
	text-transform: uppercase;
}

.nav-link:hover {
	color: var(--secondary-color);
}


@media only screen and (min-width: 992px)
{
    nav.navbar:not(.h-auto) {
        min-height: 120px;
    }
}

@media only screen and (max-width: 991px) {
	
	.navbar-toggler {
    background: var(--secondary-color);
    margin-left: 0;
    margin-right: -12px;
	}
	
	.nav-link:before {
    content: "\f1ae";
    display: inline-block;
    font: normal normal normal 14px/1 Flaticon;
    padding-right: 10px;
}
	
    .navbar-collapse.show {
       background-color: rgba(0,0,0,0.3);
		
    }.navbar-xs {
        box-shadow: 0 0 15px rgba(0,0,0,0.9);       
	}
	
	.navbar-collapse.show>.navbar-nav {
        box-shadow: 0 0 15px rgba(0,0,0,0.9);   
		color: #fff;
	}
	
	.navbar-nav .nav-item.dropdown>.nav-link.dropdown-toggle {
        color: #fff;
        font-weight: 400;
		text-transform: uppercase;
        font-size: 3vh;	
	}
	
	.navbar-collapse.show>.navbar-nav {  
    padding: 2rem;
}
}

.dropdown-menu {
	--bs-dropdown-border-radius: 0.0rem;}

.dropdown-link {
    color: var(--font-color);
}

.dropdown-link:hover, .dropdown-menu-clean:not(.prefix-link-icon) a:not(.btn):hover {
    color: var(--primary-color);
}



.dropdown-menu a.dropdown-item {
    padding: 15px;
}

.whats-app-ico {
	margin-bottom: 21px;
    margin-top: 16px;
}

.dropdown-item>span+span {
    margin-left: 0px;
}


.offcanvas-header {
    padding: 4vh 5vh 0vh 5vh;
}

.offcanvas-body {
    padding: 0vh 4vh 4vh 4vh;
}

.offcanvas-close {
	position: absolute;
	top: 1.5vh;
	right: 2vh;
	background-image: none;
}
@media only screen and (max-width: 767px) {
    .border-0-xs {
        border: 0px !important;	
    }
	.dropdown-menu a:not([data-bs-toggle=dropdown]) {
    	padding: 0vh 10px 0 0;
	}
}

.text-white>.dropdown-item>a:hover {
    color: #ee0000!important;
}


/* Footer */
	
#footer li {
	font-size: 1.5vh;
}

#footer a {
    color: var(--primary-color);
}
#footer a:hover {
    color: var(--secondary-color);
}


#footer ul.footer-links>li>a:before {
    content: "\f1ae";
    display: inline-block;
    font: normal normal normal 14px/1 Flaticon;
    padding-right: 10px;
}


@media only screen and (max-width: 768px) {	
	
	#footer li {
        font-size: 2.0vh;
    }
	
	#footer ul.footer-links>li>a:before {
        display: none;
    }
}

#footer.footer-dark {
	background-image: url("../images/footer/people.svg");
	background-color: #313131;
	background-position: bottom;
	background-size: 100% auto;	
	background-repeat: no-repeat;
}

@media only screen and (min-width: 768px) {	
	#footer.footer-dark {
		background-image: url("../images/footer/people_desktop.svg");
	}
}
	
/* Section */

body:not(.layout-admin) .section, body:not(.layout-admin) section {
		padding: 20vh 0vh;
	}

.section-small {
		padding: 5vh 0!important;
	}

.section-sm {
		padding: 10vh 0!important;
	}

.section-top-sm {
		padding: 10vh 0 20vh!important;
	}

.section-bottom-sm {
		padding: 20vh 0 10vh!important;
	}

.section-xs {
		padding: 5vh 0!important;
	}

.section-xs-sm {
		padding: 5vh 0 10vh!important;
	}

.section-top-xs {
		padding: 5vh 0 20vh!important;
	}

.section-bottom-xs {
		padding: 20vh 0 5vh!important;
	}

.bg-primary {
    background-color: var(--primary-color)!important;
}	

.bg-secondary {
    background-color: var(--secondary-color)!important;
}	
	
.bg-theme-color-light {
    background-color: rgba(200,200,200,.08)!important;
}	
	
.bg-grey {
	background-color: #999;
}

.bg-bottom {
	 background-position: bottom center!important;
}
.bg-top {
	 background-position: top center!important;
}

.bg-right {	
	 background-position: right!important;
}


@media only screen and (max-width: 768px) {	
	
	body:not(.layout-admin) .section, body:not(.layout-admin) section {
		padding: 8vh 0;
	}
	
	.section-small {
		padding: 3vh 0!important;
	}

	
	.container {
		padding: 3vh 8vw;
	}
	
	header .container {
		padding: 0 3vw;
	}
	
	.row {
    --bs-gutter-x: 0;
	}

	.bg-bottom {
	 	background-position: bottom right!important;
	}
}

@media only screen and (min-width: 768px) {
	.container-sm {
		max-width: 520px!important;
	}
	.container-xs {
		max-width: 400px!important;
	}
}

@media only screen and (min-width: 1028px) {
	.container-sm {
		max-width: 700px!important;
	}
	.container-xs {
		max-width: 500px!important;
	}
}

/*** Section Shadow ***/

.section-shadow
{
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	height: 140px;
	z-index: 2;
	background-position: top; 
	background-size: 100% auto; 
	background-repeat: no-repeat;
	pointer-events: none;
}

.section-shadow-top
{
	bottom: 0px;
	top: auto;
	transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}


.shadow-01 {
	background-image: url('../images/shadow/shadow_01.png'); 
}

.shadow-02 {
	background-image: url('../images/shadow/shadow_02.png'); 
}

.shadow-03 {
	background-image: url('../images/shadow/shadow_03.png'); 
}

.shadow-04 {
	background-image: url('../images/shadow/shadow_04.png'); 
}

.shadow-05 {
	background-image: url('../images/shadow/shadow_05.png'); 
}

.shaddow-dark {
	box-shadow: 1px 1px 10px rgba(0,0,0,.3)!important;
}


@media (max-width: 767px) {
	
	.section-shadow {	
        height: 50px;	
        background-position: center top; 
        background-size: cover; 
    }
}
	

/* Buttondefinitionen */

.btn {
    --bs-btn-padding-x: 2.5rem;
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 0rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
}

.btn-primary {
	--bs-btn-color: #fff;
    --bs-btn-bg: #132e5d;
    --bs-btn-border-color: #132e5d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef941d;
    --bs-btn-hover-border-color: #ef941d;
    --bs-btn-focus-shadow-rgb: 100,100,100;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ef941d;
    --bs-btn-active-border-color: #ef941d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #444;
    --bs-btn-disabled-border-color: #444;
}


.btn-secondary {
	--bs-btn-color: #fff;
    --bs-btn-bg: #ef941d;
    --bs-btn-border-color: #ef941d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #132e5d;
    --bs-btn-hover-border-color: #132e5d;
    --bs-btn-focus-shadow-rgb: 100,100,100;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #132e5d;
    --bs-btn-active-border-color: #132e5d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #444;
    --bs-btn-disabled-border-color: #444;
}


.btn-grey {
	--bs-btn-color: #fff;
    --bs-btn-bg: #777;
    --bs-btn-border-color: #777;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #222;
    --bs-btn-hover-border-color: #222;
    --bs-btn-focus-shadow-rgb: 100,100,100;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #bb0000;
    --bs-btn-active-border-color: #bb0000;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #444;
    --bs-btn-disabled-border-color: #444;	
}

.btn-white {
	background-color: #fff;
	border-color:#fff;
	color: var(--secondary-color);
}

.btn-white:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.btn-white-outline {
	background-color: transparent;
	border-color:#fff;
	color: #fff;
	padding: 0.25rem 0.7rem !important;
}

.btn-white-outline:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--primary-color);
}

.btn.active, :not(.btn-check)+.btn:active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--highligt-color);
}

.btn-primary:not(.btn-noshadow):hover, .btn-primary:not(.btn-noshadow):not(.btn-soft):active, .btn-primary:not(.btn-noshadow):not(.btn-soft):focus {
    box-shadow: 0 4px 11px rgba(0,0,0,0.3)!important;
}
	
.btn-xs {
    --bs-btn-padding-y: 0.23rem;
    --bs-btn-padding-x: 0.9rem;
	--bs-btn-font-size: 0.9rem;;
}
	
.btn-social {
	background-color: transparent!important;
    border-color:#fff!important;
    color: #fff;
}

.btn-social {
	background-color: transparent!important;
    border-color:#fff!important;
    color: #fff;
}

.btn-social:hover {
	background-color: var(--primary-color)!important;		
	border-color: var(--primary-color)!important;		
}	

#btnScrollTo {
	background-color: var(--primary-color)!important;
	border-color: var(--primary-color)!important;
	color: #fff;
	padding: 5px 10px;
    right: 8px!important;
    bottom: 8px!important;
}

.btn.rounded-circle>svg {
    margin: auto!important;
}

.btn.rounded-circle>span:not(.badge) {
	font-size: 2.4vh!important;
}

.btn:not(.rounded-circle)>i, .i-mr {
    display: inline-block;
    margin-right: 0;
}
.btn.rounded-circle-big {
	padding: 2.4rem!important;
	line-height: 1.32;
}
.btn.rounded-circle-big>i {
    font-size: 2.8rem!important;
}

.btn.btn-lg>i {
    font-size: 1.6rem!important;   
}

@media (max-width: 767px) {
    .btn+.btn {
        margin-left: 0;
    }
	.btn-social {
        margin: 0 3.5vw;
    }

    .btn-home {
        margin-left:28vw;	
    }
	
	.btn:not(.rounded-circle)>i, .i-mr {
    display: inline-block;
    margin-right: 1.5vw;
}

	.btn.rounded-circle>span:not(.badge) {
	font-size: 3vh!important;
}

}


/* Tooltip */

.tooltip {
    --bs-tooltip-font-size: 1.8vh;
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: #ee0000;
	font-family: SparkasseWebBold, Helvetica, Arial, sans-serif;
}

@media (max-width: 767px) {
	.tooltip {
		display: none;
	}
}

/* Swiper */

.slider-h {
    height: 88vh!important;
}

.slider-30 {
    height: 30vh!important;
}

.slider-40 {
    height: 40vh!important;
}

.slider-50 {
    height: 50vh!important;
}

.slider-60 {
    height: 60vh!important;
}

.slider-70 {
    height: 70vh!important;
}

.slider-80 {
    height: 80vh!important;
}

.slider-90 {
    height: 90vh!important;
}

.slider-100 {
    height: 100vh!important;
}


@media (max-width: 767px) {
    .slider-30-xs {
        height: 30vh!important;
    }

    .slider-40-xs {
        height: 40vh!important;
    }

    .slider-50-xs {
        height: 50vh!important;
    }

    .slider-60-xs {
        height: 60vh!important;
    }

    .slider-70-xs {
        height: 70vh!important;
    }

    .slider-80-xs {
        height: 80vh!important;
    }

    .slider-90-xs {
        height: 90vh!important;
    }

    .slider-100-xs {
        height: 100vh!important;
    }
}


.swiper-btn-group-end .swiper-button-next, .swiper-btn-group-end .swiper-button-prev {
        display: block;
    }


.slideheadline {
	color:#fff;
	font-size: 2.5vh;
	letter-spacing: 0.2vh;
	text-transform: uppercase;
}

.slideheadline-dark {
	color:var(--highlight-color);
	font-size: 2.5vh;
	letter-spacing: 0.2vh;
	text-transform: uppercase;
}

.slideheadline a {
	color:#fff;
}

.slideheadline-dark a {
	color: var(--highlight-color);
}


.slideheadlinebold {
	font-family: 'SparkasseWebBold', Helvetica, Arial, sans-serif;
	color:var(--highlight-color);
	font-size: 3vh;
	letter-spacing: 0;
	text-transform: uppercase;
}

.slider-girocard {
	background-image: url("../images/content/womit/girocard_nfc_desktop.jpg");
}

.swiper-themen {
	height: 57vh!important;
}

.swiper-womit {
    height: 43vh!important;
}

.swiper-wofuer {
    height: 57vh!important;
}

.swiper-click {
	padding: 225px;
}

.swiper-light span {
    background: var(--highlight-color)!important;  
    opacity: 1!important;
}

.swiper-light .swiper-pagination-bullet-active {
    opacity: 1!important;
}

.swiper-dark span {
    background: rgba(255,255,255,0.5)!important;  
    opacity: 1!important;
}

.swiper-dark .swiper-pagination-bullet-active {
    opacity: 1!important;
}

.swiper-btn-group .swiper-button-next {
    right: 0px!important;
	margin-top: -50px;
}

.swiper-btn-group .swiper-button-prev {
    left: 0px!important;
	margin-top: -50px;
}


@media (max-width: 767px) {

    .swiper-btn-group-end .swiper-button-next, .swiper-btn-group-end .swiper-button-prev {
        display: none;
    }
	
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    	bottom: 0vh!important;
	}
	
	.slider-girocard {
		background-image: url("../images/content/womit/girocard_nfc_mobile_halb.jpg");
	}

	
	.swiper-themen {
		height: 51vh!important;
	}
	
	.swiper-womit {
		height: 39vh!important;
	}
	
	
	.swiper-click {
		padding: 165px;
	}
}

.overlay-carousel:after {
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0;
}

.overlay-verlauf:after {
	background-color: transparent;
	background-image: linear-gradient(transparent 40%, rgba(0,0,0,0.6) 90%);
}

.overlay-verlauf-light:after {
	background-color: transparent;
	background-image: linear-gradient(transparent 60%, rgba(0,0,0,0.4) 90%);
}

.overlay-verlauf-dark:after {
	background-color: transparent;
	background-image: linear-gradient(transparent 40%, rgba(0,0,0,0.8) 90%);
}
 
/* Carousel */	

.carousel-caption {
	z-index: 9;
    bottom: 1.75rem;
    padding-bottom: 0;
    padding-top: 0;
	
}

.shadow-carousel {
	box-shadow: 0px 0px 20px 6px rgba(0,0,0,0.25)!important;
}


/* Icons */

.front-icon {
	margin-top: -1vh;
    margin-right: 2vh;
}    


/* Modals */


.modal-title {
	font-size: 1.25rem;
	line-height: 1.1!important;
}

.modal-dark {
	background-color: #2e2e2e!important;
	color:#fff;	
}

.modal-header-dark  {
	border-bottom: 0px solid #777;
	text-transform: uppercase;
	background-color: #2e2e2e!important;
	text-align: center;
}

.modal-header-grey  {
	border-bottom: 0px solid #777;
	text-transform: uppercase;
	color:#fff;
	background-color: #777!important;
	text-align: center;
}

.modal-footer-dark {
	text-align: center;
    background-color: #1f1e1d!important;
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-top: 0px solid #777;
	padding: 0 0 20px 0;
}

.modal-dark h2, .modal-dark h3, .modal-dark h4, .modal-dark h5, .modal-dark button,
.modal-header-grey h2,.modal-header-grey h3,.modal-header-grey h4,.modal-header-grey h5{
	color:#fff;
}


/** Accordion **/

.card-body {
    padding: 0 var(--bs-card-spacer-x);
}

.icon-accordion {
	margin-right: 20px;
}

@media only screen and (max-width: 767px) {	
	.icon-accordion {
	margin-top: 2px;
    margin-bottom: 20px;
    float: left;
}
}

/** Count **/

.zahl {
	color: #fff;
	font-size: 5vh;
	font-weight: 900;
	margin: 0;
}

.beschreibung {
	color: #fff;
	font-size: 2vh;
	font-weight: 700;
	margin-top: -0.8rem;
	margin-bottom: 1rem;
}

/** Timeline **/

.timeline-container i.badge {
    left: 180px;
}

.timeline-container:before {
    left: 187px;
}

@media only screen and (max-width: 767px) {	
	.timeline-container i.badge {
    left: -30px;
}

.timeline-container:before {
    left: -23px;
}
}

/** Aufzählungen **/

ul.lebenslauf, #projekte ul, #kernkompetenzen ul {
  --icon-space: 1.8em;
  list-style: none;
  padding: 0;
}

ul.lebenslauf>li,  #projekte ul>li,  #kernkompetenzen ul>li{
  padding-left: var(--icon-space);
    margin-bottom: 0.5rem;
}

ul.lebenslauf>li:before,  #projekte ul>li:before,  #kernkompetenzen ul>li:before{
    content: "\f1ae";
    display: inline-block;
    font: normal normal normal 14px/1 Flaticon;
    margin-left: calc( var(--icon-space) * -1 );
  	width: var(--icon-space);
	color: var(--secondary-color);
}

ul.lebenslauf>li.li-sec,  #projekte ul>li.li-sec,  #kernkompetenzen ul>li.li-sec{
  padding-left: calc( var(--icon-space) * 2);
}

ul.lebenslauf>li.li-sec:before,  #projekte ul>li.li-sec:before,  #kernkompetenzen ul>li.li-sec:before{
    content: "\f117";
    display: inline-block;
    font: normal normal normal 14px/1 Flaticon;
    margin-left: calc( var(--icon-space) * -1 );
  	width: var(--icon-space);
	color: var(--secondary-color);
}

/** Empfehlungen **/


.avatar-xxl {
    font-size: 1.3rem;
    height: 15rem !important;
    width: 15rem !important;
}

.arrow-lg.arrow-left{
    border-right: 20px solid #fff;
    left: -48px;
}

.arrow-lg.arrow-right{
    border-left: 20px solid var(--primary-color);
    right: -48px;
}

/** Profilbild Freisteller **/


.profilbild-freisteller {
	position: absolute;
	bottom: 0;
	right:5vw;
	width:20vw;
}
.profilbild-freisteller-2 {
	position: absolute;
	bottom: 0;
	left:5vw;
	width:20vw;
	
}

.bg-portfolio {
	background-image: url('../images/bg/skc_bg_produktion_v5.jpg');
}

.bg-projekte {
	background-image: url('../images/bg/skc_bg_projekte_002.jpg');
}


@media only screen and (max-width: 767px) {	
	.bg-portfolio, .bg-projekte {
	background-image: none;
	}
}