/*
| --------------------------------------------------------
| TABLE OF CSS CONTENT
| --------------------------------------------------------
|  1. Layout Global CSS
|     	Body, 
|		Global Classes, 
|		Trypography, 
|		Colors,
|		Image, 
|		Line Divider
|		Margin & padding
|		Listing,
|		Links,
|		Alignment
|  2. Component CSS
|		Button
|		Forms
|		Alignment
|  3.   Homepage CSS
|  3.1. Homepage Static Header CSS
|  3.2. Homepage Particle Header CSS
|  3.3. Homepage Demo Landing CSS
*/

/* 01 : Website Global CSS BOC
========================================================== */
body { background:#ffffff; font-family: 'Raleway'; font-size:17px; line-height:1.8; font-weight:300; color:#333; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow-x:hidden; }	
*, html { margin:0px; padding:0px;  }
a { color:#333333; } /* Common color hyperlink */
a:hover, a:focus, a:active { color:#ff5e5e; text-decoration:none; } /* Common hover color hyperlink */
a, :focus, :hover, :active, *:hover, *:focus, *:active { text-decoration:none; outline:none !important; outline-offset:0 !important; }
a img, img { border:none; outline:none !important; outline-offset:0 !important; -moz-opacity:1; -webkit-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; }
a:hover img { -moz-opacity:.8; -webkit-opacity:.8; -o-opacity:.8; -ms-opacity:.8; opacity:.8; } 
ul { list-style:none; margin:0; padding:0; } 
ul li { display:inline-block; line-height:1.8; }
i { font-family:'FontAwesome'; } 
img { height:auto; max-width:100%; vertical-align: middle; line-height:normal; }

	/* Transition Effect CSS BOC */
	a, i, img { transition: all 0.6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -o-transition:all 0.6s ease-in-out 0s; -ms-transition:all 0.6s ease-in-out 0s; }
	
    /* Browser Selection CSS BOC */
	::selection { background:#FC875D; color:#fff; } ::-moz-selection { background:#FC875D; color:#fff; } ::-webkit-selection { background:#FC875D; color:#fff; }  ::-o-selection { background:#FC875D; color:#fff; } 
	::-ms-selection { background:#FC875D; color:#fff; }

/* 02 : Global Classes CSS BOC
==================================================== */	
.center-items * { text-align:center; margin-left:auto; margin-right:auto; display:block; } 
.center-block { text-align:center; } 
.display-table { display:table; }
.table-cell { display:table-cell; } 
.block { display:block; }
.style-none { background:transparent; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;  border:medium none; }
.cover-bg { background-size:cover; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; -ms-background-size:cover; }	
.shadow-none { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
.radius-none { -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }
.border-none { border:medium none; }
.none-transform { text-transform:none; }
.pos-relative { position:relative; }
.overflow { overflow:hidden; }
.flex { display:flex; }
.flex-content { height:100%; } 

/* Background & Color Style CSS BOC
=================================================== */
/* Text Color Style CSS BOC */
.grey-color-text { color:#333333; }
.white-color-text { color:#fff; }
.red-color-text { color:#ff5e5e; }

/* Background Color Style CSS BOC */
.grey-color-bg { background:#f1f1f1; }
.white-color-bg { background:#ffff; }
.red-color-bg { background:#ff5e5e; }
.darkgrey-color-bg { background:#333333; }

/* 03 : Trypography Style CSS BOC
=================================================== */
h1, h2, h3, h4, h5, h6 { margin:3px 0; padding:3px 0; line-height:1.8; font-family:'Raleway'; font-weight:600; text-transform:uppercase; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { font-weight:300; color:#ff5e5e; }
h1 { font-size:50px; }
h2 { font-size:45px; }
h3 { font-size:40px; }
h4 { font-size:35px; }
h5 { font-size:25px; } 	
h6 { font-size:20px; }

/* Font Size Variation CSS BOF */
.font-large { font-size:55px; }
.font-medium { font-size:40px; }
.font-small { font-size:35px; }
.font-xsmall { font-size:22px; }
.font-xx-small { font-size:16px; }

/* Font Style Variation CSS BOF */
.font-weight-light { font-weight:300; }
.font-weight-regular { font-weight:normal; }
.font-weight-semibold { font-weight:600; }
.font-weight-bold { font-weight:bold; }

/* 04 : Paragraph Style CSS BOC
=================================================== */
p { padding-top:0; padding-bottom:0; }
.lead { font-size:19px; line-height:1.8; }

/* 05 : Image Style CSS BOC
=================================================== */
img { margin-bottom:0; }
.img-left { float:left; margin-right:20px; margin-bottom:20px; }
.img-right { float:right; margin-left:20px; margin-bottom:20px; }
.img-center { margin-left:auto; margin-right:auto; display:block; text-align:center; } 

/* 06 : Listing Style CSS BOC
=================================================== */
ul.main-listing { margin-top:5px; margin-bottom:5px; }
ul.main-listing li { margin-bottom:5px; }
ul.common-listing li:before { content:""; font-family:'FontAwesome'; padding-right:15px; }

	/* Listing With Variation CSS BOC */
	ul.main-inline-block li { display:inline-block; }
	ul.main-listing-block li { display:block; }
		
/* 08 : Linedivider Style CSS BOC
=================================================== */	
hr { background:#333333; border-bottom:medium none; border-top:medium none; margin:20px auto 30px; width:83px; height:3px; position:relative; }
hr:before { content:""; background:#ff5e5e; width:22px; height:3px; position:absolute; left:0; right:0; margin:0 auto; }
		
/* 09 : Maring & Padding Style CSS BOC
=================================================== */	
/* Margin Style CSS BOC */
.mrg-left-right { margin-left:20px; margin-right:20px; } 
.mrg-top-bottom { margin-top:20px; margin-bottom:20px; }

/* Padding Style CSS BOC */
.pad-left-right { padding-left:20px; padding-right:20px; } 
.pad-top-btm { padding-top:20px; padding-bottom:20px; }
.pad-top-btm-zero { padding-top:0; padding-bottom:0; }

/* 10 : Button Style CSS BOC
=================================================== */	
.btn { background:none; padding:12px 20px; color:#ff5e5e; font-size:22px; font-weight:normal; border:solid 2px #ff5e5e; text-align:center; transition:all .8s ease-in-out 0s; 
	text-transform:uppercase; -moz-transition:all .8s ease-in-out 0s; -webkit-transition:all .8s ease-in-out 0s; -o-transition:all .8s ease-in-out 0s; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
	
	/* Button Style With Variation CSS BOC */
	.btn-full { width:100%; }
	.btn-center { margin:0px auto; text-align:center; }
	.btn-auto { width:auto; }
	.btn-left { float:left; }
	.btn-right { float:right; }
	
		/* Hover State CSS BOC */
		.btn:hover, .btn:focus, .btn:active, .btn.active { background:#ff5e5e; color:#fff; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; outline:none; outline-offset:0;
			border:solid 2px #ff5e5e5e; }

/* 11 : Form & Input Style BOC
==================================================== */	
form { margin-top:25px; }
	
/*** Label CSS BOC ***/
label { font-size:15px; }	
	
/*** Selectbox CSS BOC ***/
.form .select.form-control option { padding:10px 20px; border-bottom:solid 1px #c0cee0; transition:all .6s ease-in-out 0s;  -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s; -o-transition:all .6s ease-in-out 0s; }
	
	/* Input Reset Buttons Style BOC */
	input[type="reset"] { float:right; margin-right:15px; }
	
		/* Focus State CSS BOC */
		.form .form-control:focus { border-color:#ff5e5e; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } 
		
/* 12 : Go To Top CSS BOC
==================================================== */	
.back-top { position:relative; }
.back-top #toTop { position:absolute; left:0; right:0; margin:0 auto; bottom:0; z-index:50; background:#ff5e5e; width:58px; height:29px; -webkit-border-radius:100px 100px 0 0; -moz-border-radius:100px 100px 0 0; border-radius:100px 100px 0 0; }
.back-top #toTop i:before  { font-size:20px; color:#fff; transition:all .6s  ease-in-out 0s; -moz-transition:all .6s  ease-in-out 0s; -webkit-transition:all .6s  ease-in-out 0s; 		-o-transition:all .6s  ease-in-out 0s;  }
.back-top #toTop:hover { background:#596784; }

/* 13 : Preloader CSS BOC
==================================================== */	
.preloader { background-color: #343956; bottom: 0; display: table; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index:1050; overflow:hidden; }
.inner-cell { display: table-cell; margin: 0 auto; vertical-align: middle; }

	/*SVG CSS*/
	.preloader svg { display: block; height: 350px; margin: 0 auto; width: 350px; }
	
	/*SVG Path CSS*/
	.preloader svg path { -moz-animation: 6s linear 0s none infinite running dash; -webkit-animation: 6s linear 0s none infinite running dash; -o-animation: 6s linear 0s none infinite running dash; -ms-animation: 6s linear 0s none infinite running dash;
		animation: 6s linear 0s none infinite running dash; fill: none; stroke: #ffffff; stroke-dasharray: 1500; stroke-dashoffset: 1500; stroke-width: 2px; }
	
	/* SVG Animation CSS*/
	-moz-@keyframes dash { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } }
	-webkit-@keyframes dash { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } }
	-o-@keyframes dash { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } }
	@keyframes dash { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; } }

/*
| ========================================================
| INDEX PAGE CSS BOC
| ========================================================
*/
.page-wrapper { margin:0px auto; }

/* HEADER CSS BOC 
======================================================= */
header { position:relative; }

/*** Navigation CSS BOC ***/
header .navbar-default { background-color:rgba(19, 20, 22, .5); border-color:transparent; padding-top:20px; padding-bottom:20px; }
header .navbar-brand { padding:0 15px; }
header .navbar-default .navbar-nav > li > a { font-weight:300; color:#fff; position:relative; font-size:18px; text-transform:uppercase; }
header .navbar-default .navbar-nav > li > a:before, header .navbar-default .navbar-nav > li > a:after { bottom: 0; content: ""; height: 1px; left: 0; margin: 0 auto; position: absolute; right: 0; 
	top: auto; width:0; border-bottom:solid 2px #ff5e5e; -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s; -o-transition:all .6s ease-in-out 0s;
	-ms-transition:all .6s ease-in-out 0s; transition:all .6s ease-in-out 0s; }

	/* Hover State CSS BOC */
	header .navbar-default .navbar-nav > li > a:hover, header .navbar-default .navbar-nav > li > a:focus, header .navbar-default .navbar-nav > li > a:active { color:#ff5e5e; } 
	header .navbar-default .navbar-nav > li > a:hover::before, header .navbar-default .navbar-nav > li > a:hover::after  { width:100%; }
	
	/* Onscroll State CSS BOC */
	header .on-scroll-nav.animated.navbar-default { background:#131416; }
	header .navbar-default .navbar-nav > li > a.active, header .navbar-default .navbar-nav > .active > a, header .navbar-default .navbar-nav > .active > a:focus, header .navbar-default .navbar-nav > .active > a:hover { color:#ff5e5e; 
		background-color:transparent; }
	
header .navbar-nav { float:right; }

/*** Banner Carousel Version 1 CSS BOC ***/
header .banner { position:relative; }

	/*** Carousel Images CSS BOC ***/	
	header .banner .carousel .carousel-inner > .item { background-position:0 0; background-repeat:no-repeat; }
	header .banner .carousel .item:after { position:absolute; left:0; width:100%; height:100%; background-color:rgba(54, 57, 85, .7); content:""; top:0; z-index:-1; }
	header .banner .carousel .carousel-inner > .item-one { background-image:url(../img/Slider1.png); }
	header .banner .carousel .carousel-inner > .item.item-two { background-image:url(../img/Slider2.png);}
	
	
	
	
header .banner .carousel .carousel-inner > .item {
  background-position: center center; /* Zentriert das Bild */
  background-repeat: no-repeat; /* Keine Wiederholung */
  background-size: cover; /* Füllt den gesamten Bereich aus */
}

@media (max-width: 768px) {
  header .banner .carousel .carousel-inner > .item-one {
    background-image: url(../img/Slider1-mobile.png); /* Bild für mobile Geräte */
  }

  header .banner .carousel .carousel-inner > .item.item-two {
    background-image: url(../img/Slider2-mobile.png); /* Bild für mobile Geräte */
  }

  header .banner .carousel .carousel-inner > .item {
    background-size: contain; /* Passt das Bild besser an */
    background-position: center center;
  }
}




	/*** Banner Content CSS BOC ***/
	header .banner .display-table { margin:0 auto; height:100vh; position:relative; z-index:2; }
	header .banner .table-cell { vertical-align:middle; }
	header .banner .punchline { font-size:95px; background-color:rgba(0, 0, 0, .2); font-weight:700; color:#fff; line-height:normal; padding:15px; position:relative; margin:0 auto; }
	header .banner .punchline:before, header .banner .carousel .punchline:after { position:absolute; width:202px; height:1px; background:#ff5e5e; content:""; }
	header .banner .punchline:before { top:0; left:0; }
	header .banner .punchline:after { bottom:0; right:0; }
	header .banner h4 { margin:25px auto; text-transform:none; font-weight:normal; }

	/*** Carousel Conttrol CSS BOC ***/
	header .banner .carousel-indicators { width:35px; right:55px; left:auto; margin-left:0; top:50%; }
	header .banner .carousel-indicators li { width:20px; height:20px; border:solid 2px #ff5e5e; -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s; 
		-o-transition:all .6s ease-in-out 0s; -ms-transition:all .6s ease-in-out 0s; transition:all .6s ease-in-out 0s; margin:0 3px }
	
		/* Hover State CSS BOC */
		header .banner .carousel-indicators li:hover, header .banner .carousel-indicators li:focus, header .banner .carousel-indicators li:active, header .banner .carousel-indicators li.active { background:#ff5e5e; width:20px; height:20px; }

/*** Animated Arrow CSS BOC ***/
.arrow-action { background: #ff5e5e none repeat scroll 0 0; -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; display: block; height: 40px;
	margin: 0 auto;	position: absolute; text-align: center; width: 80px; font-size:35px; color:#fff; line-height:normal; z-index:10; bottom:0; left:0; right:0; }
.arrow-action:hover, .arrow-action:focus, .arrow-action:active { color:#fff; }

/* CONTENT CSS BOC 
======================================================= */
section { padding-top:75px; padding-bottom:75px; }/* Common Padding For Section */

/*** Why Us Section CSS BOC ***/
.why-us figure { padding-left:0; padding-right:0; background-image:url(../img/CC_ABOUT.png); background-position:0 0; background-repeat:no-repeat; }
.why-us article { padding:39px 35px; background:#f1f1f1; }

	/*** Key Listing BOC ***/
	.why-us .key-offer .item .icon { width:74px; height:74px; -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; float:left; background:#fff; margin-right:15px; 
		margin-top:15px; }
	.why-us .key-offer .item .icon svg { width:45px; height:45px; fill:#ff5e5e; display:block; margin:0 auto; position:relative; top:15px; }	
	.why-us .key-offer .item p { overflow:hidden; text-align:justify; }
	.why-us .key-offer .line-seprator { background: #bebebe; height: 1px; position: relative; width: 175px; margin:30px 0; }
	.why-us .key-offer .line-seprator::after { border: 1px solid #bebebe; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; content: ""; height: 10px; position:absolute;
		right: -10px; top: -5px; width: 10px; }	

/*** Feature Section CSS BOC ***/
.features ul.features-listing { margin:35px auto; }	

	/*** Feature Listing BOC ***/
	.features ul.features-listing li .item { border:solid 1px #f1f1f1; position:relative; height:183px; margin-bottom:50px; display:table; width:auto; width:100%; }
	.features ul.features-listing li .item svg { width:65px; height:65px; }	
	.features ul.features-listing li .item:after, .features ul.features-listing li .item:before { position:absolute; content: ""; width: 100px; height: 1px; background:#ff5e5e; }	
	.features ul.features-listing li .item, .features ul.features-listing li .item:after, .features ul.features-listing li .item:before, .features ul.features-listing li .item-hover { 
		-webkit-transition:all .6s ease-in-out 0s; -o-transition:all .6s ease-in-out 0s; -ms-transition:all .6s ease-in-out 0s; transition:all .6s ease-in-out 0s; }
	.features ul.features-listing li .item:after { top:0; right:0; }	
	.features ul.features-listing li .item:before { bottom:0; left:0; }	
	
	/* Normal State CSS BOC */
	.features ul.features-listing li .item-normal { overflow:hidden; padding:35px 15px; display:table-cell; vertical-align:middle; }		

		/* Hover State CSS BOC */
		.features ul.features-listing li .item-hover { position:absolute; top:0; left: 0; right:0; background:#fff; visibility:hidden; opacity:0; padding:15px; }
		.features ul.features-listing li .item-hover h6 { color:#ff5e5e }	
		.features ul.features-listing li .item-hover img { position:absolute; right:15px; top: 15px; opacity:.2; }
		.features ul.features-listing li .item:hover { -moz-box-shadow:0px 3px 3px rgba(0, 0, 0, .1); -webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, .1);box-shadow:0px 3px 3px rgba(0, 0, 0, .1); }	
		.features ul.features-listing li .item:hover:after, ul.features-listing li .item:hover:before { width:100%; }
		.features ul.features-listing li .item:hover .item-hover { opacity:1; visibility:visible; }
		.features ul.features-listing li a:hover, .features ul.features-listing li a:focus, .features ul.features-listing li a:active { color:inherit; }

/*** Service Section CSS BOC ***/
.service { padding-bottom:0; }
.service .lead { margin-bottom:40px; }
.service figure { padding-left:0; padding-right:0; background-image:url(../images/service-thumbnail.jpg); background-position:center 0; background-repeat:no-repeat; }

	/*** Service Listing CSS BOC ***/
	.service ul.service-listing li { padding:30px 15px; background:#ebebeb; }	
	.service ul.service-listing li:nth-child(2), .service ul.service-listing li:nth-child(3)  { background:#f7f7f7; }
	.service ul.service-listing li svg { width:55px; height:55px; fill:#ff5e5e; }	

/*** Portfolio Section CSS BOC ***/
.portfolio { padding-bottom:0; }
.portfolio ul.portfolio-listing li { padding-left:5px; padding-right:5px; margin-bottom:20px; }
.portfolio ul.portfolio-listing li.portfolio-items { padding-left:0px; padding-right:0px; }
.portfolio ul.portfolio-listing li a { display:block; position:relative; }
.portfolio ul.portfolio-listing li img {margin-bottom:0;}

	/*** Portfolio Listing CSS BOF ***/
	.portfolio ul.portfolio-listing li a .porfolio-content { opacity:0; visibility:visible; position:absolute; top:0; height:100%; width:100%; z-index:1; 
		transition:all .6s ease-in-out 0s; -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s; -o-transition:all .6s ease-in-out 0s;
		-ms-transition:all 0.6s ease-in-out 0s; text-align:center; overflow:hidden; -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0);  transform:scale(0); }
	.portfolio ul.portfolio-listing li .porfolio-content img { margin:25% auto 8px; } 

		/* Hover State CSS BOF */
		.portfolio ul.portfolio-listing li a:hover .porfolio-content { opacity:1; background:#ff5e5e; -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1);  		transform:scale(1); }
		.portfolio ul.portfolio-listing li a:hover, .portfolio ul.portfolio-listing li a:focus, .portfolio ul.portfolio-listing li a:active { color:#fff; }

	/*** Portfolio Filter Tab CSS BOF ***/
	.filter-tab { margin:15px 0 45px; }
	.filter-tab .btn { padding:7px 20px; font-size:18px; margin:0 5px; }
	.filter-tab .btn.is-checked { background:#ff5e5e; color:#fff; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; outline:none; outline-offset:0; border:solid 2px #ff5e5e5e; }

/*** Stastitics Section CSS BOF ***/
.statistics { margin-top:-20px; }
.statistics hr::before { background:#fff; }
	
	/*** Statistics Listing CSS BOF ***/
	.statistics ul.state-data { margin-top:25px; }
	.statistics ul.state-data li i { font-size:45px; margin-bottom:20px; }
	.statistics ul.state-data li .data { font-size:38px; font-weight:bold; font-family: 'Roboto'; }
	.statistics ul.state-data li .data::after { content: " +"; }
	
/*** Blog Section CSS BOC ***/
.blog ul.blog-listing li .item { background:#fff; }
.blog ul.blog-listing li .item, .blog ul.blog-listing li .item h6 { transition:all .6s ease-in-out 0s;  -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s;
	-o-transition:all .6s ease-in-out 0s; -ms-transition:all .6s ease-in-out 0s; }
.blog ul.blog-listing li .entry-content { padding:20px 15px; }

	/* Hover State CSS BOF */
	.blog ul.blog-listing li .item:hover { -moz-box-shadow:0px 5px 6px rgba(0, 0, 0, .1); -webkit-box-shadow:0px 5px 6px rgba(0, 0, 0, .1);box-shadow:0px 5px 6px rgba(0, 0, 0, .1); }
	.blog ul.blog-listing li .item:hover h6 { color:#ff5e5e; }
	.blog ul.blog-listing li a:hover, .blog ul.blog-listing li a:focus, .blog ul.blog-listing li a:active { color:#333; }

/*** Testimonial Section CSS BOF ***/	
.testimonial { background-image:url(../img/CC_TESTI.png); background-repeat:no-repeat; background-position:0 0; }

	/*** Carousel Content CSS BOC ***/	
	.testimonial .carousel-inner > .item { margin-top:20px; }
	.testimonial .carousel-inner > .item p { font-size:22px; }
	.testimonial .carousel-inner > .item .rating { margin-bottom:10px; }
	.testimonial .carousel-inner > .item i { color:#ff5e5e; font-size:20px; }	
	.testimonial .carousel-inner > .item h6 { font-size:17px; }
	.testimonial .carousel-inner { width:60%; margin:0 auto; }
	.testimonial .carousel-inner:before { content:""; font-size:100px; font-family:'FontAwesome'; color:rgba(255, 255, 255, .2); position:absolute; left:0; top:-42px; } 

	/*** Carousel Conttrol CSS BOC ***/
	.testimonial .carousel-indicators { width:35px; right:55px; left:auto; margin-left:0; top:10%; }
	.testimonial .carousel-indicators li { width:20px; height:20px; border:solid 2px #ff5e5e; -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s; 
		-o-transition:all .6s ease-in-out 0s; -ms-transition:all .6s ease-in-out 0s; transition:all .6s ease-in-out 0s; margin:0 3px }
	
		/* Hover State CSS BOC */
		.testimonial .carousel-indicators li:hover, .testimonial .carousel-indicators li:focus, .testimonial .carousel-indicators li:active, .testimonial .carousel-indicators li.active { background:#ff5e5e; width:20px; height:20px; }

/*** Contact Us Section CSS BOC ***/	
.contact-us { position:relative; padding-top:0; padding-bottom:0; }
.contact-us .padding-none { padding-left:0; padding-right:0; }

	/*** Leave Message Form CSS BOC ***/
	.contact-us .contact-form { padding:70px 40px; }
	.contact-us .contact-form .form-group { margin-bottom:5px; }
	.contact-us .contact-form .form-control { background:none; border-width:0 0 1px; border-style:solid; border-color:transparent transparent #bebebe transparent; height:50px; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;  
		-webkit-box-shadow:none; -moz-box-shadow:none; color:#333; -webkit-appearance: none; box-shadow:none; font-size:17px; padding:12px 0; }	
	.contact-us .contact-form textarea.form-control { padding-right:5px; resize:vertical; overflow:auto; height:150px; }
		
		/*** Placeholder CSS BOC ***/
		.contact-us .contact-form .form-control::placeholder { color: #545454; opacity:1; }
		.contact-us .contact-form .form-control::-moz-placeholder { color: #545454; opacity:1; }
		.contact-us .contact-form .form-control::-ms-input-placeholder { color: #545454; opacity:1; }
		.contact-us .contact-form .form-control::-webkit-input-placeholder { color: #545454; opacity:1; }
		.contact-us .contact-form .form-control::-o-input-placeholder { color: #545454; opacity:1; }

	/*** Label CSS BOC ***/
	.contact-us .contact-form label { font-size:15px; }	
	
	/*** Selectbox CSS BOC ***/
	.contact-us .contact-form select.form-control option { padding:10px 20px; border-bottom:solid 1px #c0cee0; transition:all .6s ease-in-out 0s;  -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s; 
	-o-transition:all .6s ease-in-out 0s; }
			
	/*** Input Buttons CSS BOC ***/
	.contact-us .contact-form .btn { width:50%; margin-top:40px; }
	input[type="reset"] { float:right; margin-right:15px; }
		
		/* Focus State CSS BOC */
		.contact-us .contact-form .form-control:focus { border-color:#ff5e5e; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } 

	/*** Our Team Carousel CSS BOF ***/
	.our-team { padding:70px 40px; background:#f7f7f7; }
	.our-team .carousel-inner > .item { padding:10px; }
	.our-team .carousel-inner > .item .team-thumbnail { width:240px; height:240px; display:block; background:#ededed; overflow:hidden; margin:0 auto 30px; -moz-box-shadow:0 3px 10px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 3px 10px 0 rgba(0, 0, 0, 0.2); 	
		box-shadow:0 3px 10px 0 rgba(0, 0, 0, 0.2); } 	
	
		/*** Carousel Control CSS BOF ***/
		.our-team .carousel-indicators li { width:20px; height:20px; display:block; margin:0 auto 10px; border:solid 2px #ff5e5e; }	 
		.our-team .carousel-indicators { width:auto; margin-left:0; right:15px; top:30%; left:auto; }
		
			/* Hover State CSS BOC */
			.our-team .carousel-indicators li:hover, .our-team .carousel-indicators li:focus, .our-team .carousel-indicators li:active, .our-team .carousel-indicators li.active { background:#ff5e5e; width:20px; height:20px; }

	/*** Get In Touch CSS BOF ***/
	.get-in-touch { background-image:url(../images/location-thumbnail.jpg); background-repeat:no-repeat; background-position:0 0; padding:90px 40px; }
	.get-in-touch ul.address-listing { padding:60px 0; background:#ff5e5e; }
	.get-in-touch ul.address-listing li { margin-bottom:15px; display:block; }	
	.get-in-touch ul.address-listing li .icon { width:60px; height:60px; background:#fff; margin:0 auto 7px; }
	.get-in-touch ul.address-listing li .icon svg { width:40px; height:40px; margin-top:10px; }
	.get-in-touch ul.address-listing li p { margin:0; }
	.get-in-touch ul.address-listing li p, .get-in-touch ul.address-listing li a { color:#fff; font-size:18px; font-weight:normal; font-size:19px; font-family:'Roboto'; line-height:30px; }
	
		/* Hover State CSS BOF */
		.get-in-touch ul.address-listing li a:hover { text-decoration:underline; }

/* FOOTER CSS BOC 
======================================================= */
footer { background:#273042; }

/*** Social Share CSS BOF ***/
footer ul.social-listing { border-bottom:solid 1px #3f495e; overflow:hidden; }
footer ul.social-listing li { padding:0; border-right:solid 1px #3f495e; }
footer ul.social-listing li:last-child { border-right:medium none; }
footer ul.social-listing li a { display:block; font-size:30px; color:#596784; -moz-transition:all .6s ease-in-out 0s; -webkit-transition:all .6s ease-in-out 0s; -o-transition:all .6s ease-in-out 0s; -ms-transition:all .6s ease-in-out 0s; 
	transition:all .6s ease-in-out 0s; }

	/* Hover State CSS BOC */
	footer ul.social-listing li a:hover { color:#ff5e5e; }

/*** Copyright CSS BOF ***/
footer .copyright { font-size:15px; color:#5a6885; padding:20px 0; }
footer .copyright p { margin-bottom:0; }
footer .summary p { text-align:right; }
footer .summary a { color:#ff5e5e; }

/*
| ========================================================
| 3.1 HOMEPAGE STATIC HEADER CSS BOC
| ========================================================
*/
.banner .banner-staic { background-position:0 0; background-color: rgba(54, 57, 85, 0.7); background-repeat:no-repeat; background-image:url(../img/CC_BREIT.png); }
.banner .banner-staic:after { position:absolute; left:0; width:100%; height:100%; background-color:rgba(54, 57, 85, .7); content:""; top:0; z-index:1; }

/*
| ========================================================
| 3.2 HOMEPAGE PARTICLE HEADER CSS BOC
| ========================================================
*/
.banner .banner-particle {
	background: #293289; /* Old browsers */
	background: -moz-linear-gradient(left,  #293289 0%, #dd5252 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #293289 0%,#dd5252 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #293289 0%,#dd5252 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#293289', endColorstr='#dd5252',GradientType=1 ); /* IE6-9 */
}
.banner .banner-particle canvas { width: 100%; height: 100%; }
.banner .banner-particle .banner-content { position:absolute; left:0; right:0; margin:0 auto; }

/*
| ========================================================
| 3.3 HOMEPAGE DEMO LANDING CSS BOC
| ========================================================
*/
.banner .intro-page-header { background-position:0 0; background-repeat:no-repeat; background-image:url(../images/banner-slider-two.jpg); }
.banner .intro-page-header:after { position:absolute; left:0; width:100%; height:100%; background-color:rgba(54, 57, 85, .7); content:""; top:0; z-index:1; }
.banner .intro-page-header .intro-header { position:relative; z-index:2; padding-top:80px; padding-bottom:80px; }
.banner .intro-page-header .intro-header h5 { text-transform:none; }
.banner .intro-page-header .intro-header p { font-weight:normal; }

	/*** Header Demo Listing CSS BOC ***/
	.page-info ul.header-option { margin-top:30px; }
	.page-info ul.header-option li a { display:block; box-shadow:0 5px 7px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow:0 5px 7px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 5px 7px 0 rgba(0, 0, 0, 0.5); background:#f1f1f1;
		transition:all 0.6s ease-in-out 0s; -moz-transition:all 0.6s ease-in-out 0s; -webkit-transition:all 0.6s ease-in-out 0s; -o-transition:all 0.6s ease-in-out 0s; -ms-transition:all 0.6s ease-in-out 0s; }
	.page-info ul.header-option li a h6 { padding:8px 0; font-weight:normal; }	
	
		/* Hover State CSS BOF */
		.page-info ul.header-option li a:hover { box-shadow:0 2px 30px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow:0 2px 30px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 2px 30px 0 rgba(0, 0, 0, 0.5); }

/**** Page Key Feature Listing CSS BOC ***/
.page-feature ul.key-feature { margin-top:30px; }
.page-feature ul.key-feature li { background:#fff; padding:5px 25px; box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2); border-left:solid 3px #ff5e5e; display:block; 
	margin-bottom:12px; text-align:left; font-weight:normal; font-family:'Roboto'; }

/*** Page Support Section CSS BOC ***/
.page-support ul.support-lisitng { margin-top:20px; }
.page-support ul.support-lisitng li { text-align:center; font-size:15px; }
.page-support ul.support-lisitng li i { color:#ff5e5e; font-size:25px; }
.page-support ul.support-lisitng li .item { box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2); padding:15px 10px; border-top:3px solid #ff5e5e; height:100%; }	
.page-support ul.support-lisitng li p { font-family:'Roboto'; margin-bottom:0; }	
.page-support ul.support-lisitng li .content h6 { margin:0; text-transform:none; padding:0; }
.page-support ul.support-lisitng li .content strong { font-weight:600; }

/*** Buy Section CSS BOC ***/
.page-buy { background-image:url(../images/testimonial-slider-bg.jpg); background-position:0 0; background-repeat:no-repeat; } 
.page-buy .btn { width:20%; margin-top:20px; }




/* Modal Styles */
.modal {
  display: none; /* Versteckt das Modal standardmäßig */
  position: fixed;
  z-index: 9999; /* Sehr hoher z-index, damit es alles überdeckt */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); /* Dunkler, semi-transparenter Hintergrund */
}

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Passt sich mobil gut an */
  max-width: 500px; /* Begrenzung der Breite für größere Bildschirme */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 10px; /* Abgerundete Ecken */
  position: relative;
  z-index: 10000; /* Noch höher als der Hintergrund */
}

/* Close-Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 10001; /* Sicherstellen, dass der Close-Button sichtbar bleibt */
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .modal-content {
    width: 95%; /* Fast volle Breite */
    max-height: 95%; /* Begrenzung der Höhe */
    overflow-y: auto; /* Scrollbar für lange Inhalte */
  }
}





.faq-item {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.faq-question {
  background-color: #f7f7f7;
  padding: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question i {
  transition: transform 0.3s ease;
}

.faq-answer {
  display: none;
  padding: 15px;
  background-color: #fff;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}