/**
   Karusell
*/

.carousel-indicators {
   bottom: -30px;
}

.carousel-indicators .active {
   background-color: #009ee0;
   border-color: #008cc7;
}

.carousel-indicators li {
   border-color: #008cc7;
}

/**
Stellenanzeige Tabelle
*/

#table_test th:first-child{width:400px;}
thead th:first-child select{display:none;}
.dataTables_wrapper table.dataTable thead th, .dataTables_wrapper table.dataTable thead td{padding-left:8px;}
table.dataTable thead th select, table.dataTable tfoot th{font-weight:normal;font-size:14px;}

/***************************/
/* VCARDS
/***************************/

.vcard .info-wrapper p {
   margin: 0 0 3px 0;
}

.vcard .info-wrapper p {
   margin-left: 100px;
}

.vcard .photo-wrapper {
   float: left;
   margin: 0 15px 10px 0;
}
.vcard .photo-wrapper a {
   border-radius: 50%;
   display: block;
   overflow: hidden;
}

.vcard a .photo:hover,
.vcard a .photo:focus {
   transform: scale(1.03, 1.03);
   -webkit-transform: scale(1.03, 1.03);
   -moz-transform: scale(1.03, 1.03);
   border-radius: 50%;
}

.vcard .title {
   margin-top: -5px;
   font-size: 85%;
   line-height: 1.5;
}

.vcard .org {
   display: none;
}

.vcard .fn {
   text-transform: uppercase;
   font-weight: bold;
}

.vcard .telwrapper {
   color: #009ee0;
   font-size: 24px;
   line-height: 24px;
   letter-spacing: -0.03em;
}

.vcard .tel.alt {   
   color: #009ee0;
   font-size: 9px;
   position: relative;
   top: -0.7em;
   margin-left: 2px;
   opacity: 0.6;   
}

.vcard .alt:hover {      
   opacity: 1;   
}

#outro .popover-title {
   background-color: #009ee0;
   letter-spacing: 0;
}

#outro .popover-content {
   letter-spacing: 0;
   font-weight: 600;
   font-size: 18px;
   line-height: 24px;   
}



/***************************/
/* TESTIMONIAL
/***************************/


.opinion .item,
.opinion .dtreviewed,
.opinion .rating {
   display: none;
}

.opinion blockquote { 
   border: 0;
   padding: 0;
   margin: 0;
}

.opinion blockquote p {
   font-size: 16px;
}

.successstory {
   margin-top: 30px;
}

.opinion .reviewer,
.opinion .successstory {
   margin-top: 25px;
}

.opinion .successstory i {
   color: #009ee0;
}

.opinion .reviewer .fn {
   font-weight: bold;   
}

.opinion .reviewer .title {
   font-style: italic;
   margin-top: -10px;
   font-size: 85%;
}

.opinion-company h3 {
   color: #595959;
   margin-top: 0px;
}

/* Testimonial small */

.opinion-small-box {
   float: left;
   max-width: 30%;
   margin: 19px;
}

.opinion-small {
   background-color: white;
   border: 1px solid #fafafa; 
   border-radius: 15px;
   box-shadow: 0px 15px 15px silver;
   min-height: 630px;
   padding: 20px;
}

.opinion-small .opinion-photo {
   width: 175px;
   height: 140px;
   display: inline-block;
   padding-top: 15px;
}


.opinion-small .opinion-info h3 {
   margin-top: 0;   
}

/* Testimonial small company */

.opinion-photo img {
   max-width: 120px;
   border-radius: 60px;
}

/* Testimonial small person */

.opinion-person .opinion-photo {
   border-radius: 50%;      
} 

.opinion-person .opinion-photo:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   border-radius: 50%; 
   -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.1);
   -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.1);
   box-shadow: inset 0px 0px 10px rgba(0,0,0,0.1);
}

/* Testimonial big */

.opinion-big {
   margin-bottom: -80px;
   display: table;
   table-layout: fixed;
}

.opinion-big .column {
   display: table-cell;
   border-collapse: seperate;
   vertical-align: top;
   width: 50%;   
}

.opinion-big .opinion-info {
   padding-right: 30px;
}

.opinion-big .opinion-photo {
   text-align: center;
   vertical-align: bottom;      
} 

.opinion-big .reviewer {
   margin-bottom: 80px;
}

.csc-default .opinion {
   width: 395px;
}

.csc-default .successstory {
   width: 395px;
}

.slick-slide .csc-default .opinion {
   width: auto;
}

.slick-slide .csc-default .successstory {
   width: auto;
}

/***************************/
/* SECTIONS
/***************************/

.section {
   padding: 80px 0 80px 0;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   overflow: hidden;
}

.section-white {
   background-color: white;
}

.section-cyan {
   background-color: #009ee0;
}

.section-darkblue { 
   background-color: #002f42;
}

.section-darkblue a:visited, 
.section-darkblue a:visited h2,
.section-darkblue a:visited h3,
.section-darkblue,
.section-darkblue p,
.section-darkblue h1,
.section-darkblue h2,
.section-darkblue h2.header,
.section-darkblue h3,
.section-darkblue header h3,
.section-darkblue h4,
.section-darkblue h5,
.section-darkblue h6,
.section-darkblue .tel,
.section-darkblue a {
   color: white;
}

#intro .section-darkblue p,
#intro .section-darkblue h1,
#intro .section-darkblue h2,
#intro .section-darkblue h3,
#intro .section-darkblue h4,
#intro .section-darkblue h5,
#intro .section-darkblue h6,
#intro .section-darkblue .tel,
#intro .section-darkblue a {
   text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

#intro .section-darkblue .btn {
   box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.section-darkblue .btn-primary {
   border-color: #fff;
   background-color: transparent;
}

.section-darkblue .btn-primary:hover,
.section-darkblue .btn-primary:focus {
   background-color: rgba(255,255,255,0.2);
}

.section-darkblue .btn-default {
   border-color: #fff;
   background-color: #0075a4; 
}

.section-darkblue .btn-default:hover,
.section-darkblue .btn-default:focus {
   color: #fff;
   background-color: #002f42;
}



.section-darkblue-2 { 
   background-color: #0075a4;
}

.section-darkblue-2 a:visited, 
.section-darkblue-2 a:visited h2,
.section-darkblue-2 a:visited h3,
.section-darkblue-2,
.section-darkblue-2 p,
.section-darkblue-2 h1,
.section-darkblue-2 h2,
.section-darkblue-2 h2.header,
.section-darkblue-2 h3,
.section-darkblue-2 header h3,
.section-darkblue-2 h4,
.section-darkblue-2 h5,
.section-darkblue-2 h6,
.section-darkblue-2 .tel,
.section-darkblue-2 a {
   color: white;
}

#intro .section-darkblue-2 p,
#intro .section-darkblue-2 h1,
#intro .section-darkblue-2 h2,
#intro .section-darkblue-2 h3,
#intro .section-darkblue-2 h4,
#intro .section-darkblue-2 h5,
#intro .section-darkblue-2 h6,
#intro .section-darkblue-2 .tel,
#intro .section-darkblue-2 a {
   text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

#intro .section-darkblue-2 .btn {
   box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.section-darkblue-2 .btn-primary {
   border-color: #fff;
   background-color: transparent;
}

.section-darkblue-2 .btn-primary:hover,
.section-darkblue-2 .btn-primary:focus {
   background-color: rgba(255,255,255,0.2);
}

.section-darkblue-2 .btn-default {
   border-color: #fff;
   background-color: transparent;
}

.section-darkblue-2 .btn-default:hover,
.section-darkblue-2 .btn-default:focus {
   color: #fff;
   background-color: #0075a4;
}







.section-lightcyan {
   background-color: rgba(0, 157, 224, 0.15);        
}

.section-cyan a, 
.section-cyan a:visited, 
.section-cyan a:visited h2,
.section-cyan a:visited h3,
.section-cyan,
.section-cyan p,
.section-cyan h1,
.section-cyan h2,
.section-cyan h3,
.section-cyan h4,
.section-cyan h5,
.section-cyan h6,
.section-cyan .tel,
.section-cyan a {
   color: white;
}

#intro .section {
   padding: 50px 0 40px 0;     
}

#intro .section-cyan p,
#intro .section-cyan h1,
#intro .section-cyan h2,
#intro .section-cyan h3,
#intro .section-cyan h4,
#intro .section-cyan h5,
#intro .section-cyan h6,
#intro .section-cyan .tel,
#intro .section-cyan a {
   text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

#intro .section-cyan .btn {
   box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.section-cyan .btn-primary {
   border-color: #fff;
   background-color: transparent;
}

.section-cyan .btn-primary:hover,
.section-cyan .btn-primary:focus {
   background-color: rgba(255,255,255,0.2);
}

.section-cyan .btn-default {
   border-color: #fff;
   background-color: transparent;
}

.section-cyan .btn-default:hover,
.section-cyan .btn-default:focus {
   color: #fff;
   background-color: #007aad;
}

.cookie-buttons a.btn-secondary{
	color: #009ee0;
    border: 1px solid #009ee0;
}

.cookie-buttons .btn-secondary:hover,
.cookie-buttons .btn-secondary:focus {
   background-color: rgb(0, 158, 224, 0.2)
}

.section-silver {
   background: #f4f4f4;
   /*
   background: -moz-linear-gradient(top,  #f4f4f4 0%, #ffffff 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#ffffff));
   background: -webkit-linear-gradient(top,  #f4f4f4 0%,#ffffff 100%);
   background: -o-linear-gradient(top,  #f4f4f4 0%,#ffffff 100%);
   background: -ms-linear-gradient(top,  #f4f4f4 0%,#ffffff 100%);
   background: linear-gradient(to bottom,  #f4f4f4 0%,#ffffff 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 );
   
   Als Fehler von Heidrun gemeldet:
   background: linear-gradient(to bottom,  #f4f4f4 0%,#ffffff 100%);
   */
   background-color: #f4f4f4;
   border-bottom: 1px solid #e0e0e0;
}

.csc-frame-rulerBefore > section {
   border-top: 1px solid #e0e0e0;
}

.csc-frame-rulerAfter > section {
   border-bottom: 1px solid #e0e0e0;
}


/***************************/
/* TEASER
/***************************/

.fce_kachel_liste h2{
    position: absolute;
    top: 0px;
    background: white;
    background-color: rgb(255,255,255,0.7);
    width: 100%;
    margin-top: 0px;

    padding:15px;
    color: #009ee0;  
}
.fce_kachel_liste.active h2{color:white;background:none;}

.fce_kachel_liste.active img{
  /*opacity:0.3;*/
}

.fce_kachel_liste{
  position:relative;
  background:#009ee0;  
}

.fce_kachel_liste p{
  position:absolute;
  bottom:0px;
  padding:15px;
  color:white;
  display:none;
}

.fce_kachel_liste.active p{
  display:block;
}

.fce_teaser {
   margin: 0 0 30px 0;

}

.fce_teaser a {
   text-decoration: none;
}

.fce_teaser a:hover {
   text-decoration: underline;
}

.fce_teaser.fce_kachel_liste img {   
  width:100%;
}

.fce_teaser img {   
   display: block;
   
   -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
   -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
   box-shadow: 0px 0px 3px rgba(0,0,0,0.2);   
}

.fce_teaser a:hover img {
   -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
   box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}

.fce_teaser p {
   word-wrap: break-word;
}              

.csc-frame-indent .fce_teaser {
   float: left;
   margin-right: 30px;
}                                                                                                        


/***************************/
/* TEXT WITH ICON
/***************************/

.fce_textwithicon {
   margin: 10px 0 25px 0;  
}

.fce_textwithicon h3 {
   text-transform: uppercase;
   line-height: 1.71428571;
   font-size:14px;
}

.fce_textwithicon img {
   margin: 0 0 5px 0;
}


/***************************/
/* INFOBOX
/***************************/

.infobox {         
   padding: 20px 30px;   
   margin: 40px 0 50px 0;   
   border-left: 3px solid #009ee0;     
   background: #f4f4f4;    
}

.infobox > div > header:first-child h2,
.infobox > div > h2:first-child,
.infobox > div:first-child > div:first-child > .csc-textpic-text > h3:first-child,
.infobox > div > header:first-child h3,
.infobox > div > h3:first-child {
   margin-top: 10px;
}


/***************************/
/* BUTTONS
/***************************/

/* Call-To-Action Button */

#intro .btn {
   margin: 25px 20px 0 0;
   min-width: 220px;
}

#call-to-action .btn {
   margin: 10px 6px 10px 0;
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.71428571;
   border-radius: 4px;
}


/***************************/
/* SLIDER
/***************************/

.carousel {
   /*background-color: #f4f4f4;*/
}

.carousel-control.right,
.carousel-control.left {
   color: #fff;
   background-image: none;
   filter: none;
   line-height: 1;
   text-decoration: none;
}

.carousel-control i {
   margin-top: -35px;
   font-size: 70px;
   position: absolute;
   top: 50%;
   z-index: 5;
   display: inline-block;
   color: rgba(0,158,224,0.97);
}

.carousel-control.left i {
   left: 50%;
   margin-left: -15px;
}

.carousel-control.right i {
   right: 50%;
   margin-right: -15px;
}

.carousel-control.left:hover {
   /*
   background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.0001) 100%);
   background-image: -o-linear-gradient(left, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.0001) 100%);
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.3)), to(rgba(0,0,0,0.0001)));
   background-image: linear-gradient(to right, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.0001) 100%);   
   */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
   opacity: 1;
}

.carousel-control.right:hover {
   /*background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.3) 100%);
   background-image: -o-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.3) 100%);
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.3)));
   background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.3) 100%);   
   */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
   opacity: 1;
}

/* Intro Slider */

#intro .carousel .item {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 540px;
}

#intro .carousel .item-inner {
   padding: 100px 15%;            
}

#intro .carousel .orientation-bottom {
   position: absolute;
   bottom: 0;
   width: 100%;   
}

#intro .carousel h1,
#intro .carousel h2 {
   max-width: 1200px;   
}

#intro .carousel .btn {
   margin-top: 20px;   
}

#intro .carousel .align-right h1,
#intro .carousel .align-right h2 {    
   margin-left: auto;
   margin-right: 0;  
}

#intro .carousel .align-center h1,
#intro .carousel .align-center h2 {   
   margin-left: auto;
   margin-right: auto;
}

/* Screenshot Slider */

.screenshotslider {
   margin: 40px 0;
   padding: 35px 115px 50px 115px;
   /*
   -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2) inset;
   -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2) inset;
   box-shadow: 0px 0px 5px rgba(0,0,0,0.2) inset;*/
}

.screenshotslider .item {
   padding: 5px;
}

.screenshotslider img {
   /*-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
   box-shadow: 0px 0px 5px rgba(0,0,0,0.3);*/
   margin: 0 auto;
}

.screenshotslider .carousel-control {
   width: 150px;
}

.screenshotslider .carousel-indicators {
   bottom: 10px;
}

.screenshotslider .carousel-indicators .active {
   background-color: #009ee0;
}

.screenshotslider .carousel-indicators li {
   border: 1px solid #009ee0;
}

.screenshotslider .carousel-caption {
   text-align: left;
   position: static;
   left: 0;
   right: 0;
   bottom: 0;
   padding-top: 15px;
   padding-bottom: 0;
   color: inherit;
   text-shadow: none;
}

.screenshotslider .carousel-caption h3 {
   text-transform: uppercase;
   margin-top: 10px;
   line-height: 1.71428571;
}


/***************************/
/* HIGHLIGHTS
/***************************/

.highlights {
   color: #fff;
   margin: 40px 0;      
}

.highlights .col-sm-4,
.highlights .col-md-6,
.highlights .col-sm-6,
.highlights .row {
   padding: 0;
   margin: 0;
}

.highlights .highlights-col {
   padding: 30px;
   /*text-align: center;*/
}   

.highlights-col-1 {
   background-color: #009ee0;
}

.highlights-col-2 {
   background-color: #12a5e2;
}

.highlights-col-3 {
   background-color: #24ace4;
}

.highlights-col-4 {
   background-color: #36b3e7;
}

.highlights-col-5 {
   background-color: #47b9e9;
}

.highlights-col-6 {
   background-color: #59c0eb;
}

.highlights-6 {
   background-color: #24ace4;
}

.highlights img {
   margin: 0 0 5px 0;
   max-width: 50px;
}

.highlights h3 {
   color: #fff;
   text-transform: uppercase;
   text-overflow: ellipsis;
   overflow: hidden;
}

.col-sm-5-cells{width:20%;float:left;}

.cells-5 .col-sm-5-cells{padding-left:15px;padding-right:15px;}

/***************************/
/* TARGETGROUPS
/***************************/

.targetgroups {
   color: #fff;
   margin: 40px 0;      
}

.targetgroups .col-sm-4,
.targetgroups .col-md-6,
.targetgroups .col-sm-6,
.targetgroups .row {
   padding: 0;
   margin: 0;
} 

.targetgroups .targetgroups-col {
   text-align: center;   
}   

.targetgroups-3 .targetgroups-col,
.targetgroups-4 .targetgroups-col {
   max-width: 500px;
}   

.targetgroups-col-1 .targetgroups-text {
   background-color: #009ee0;
}

.targetgroups-col-2 .targetgroups-text {
   background-color: #12a5e2;
}

.targetgroups-col-3 .targetgroups-text {
   background-color: #24ace4;
}

.targetgroups-col-4 .targetgroups-text {
   background-color: #36b3e7;
}

.targetgroups img {
   margin: 0;
}

.targetgroups-image {
   position: relative;
   z-index: 50;   
}

.targetgroups-text {
   padding: 15px 30px;  
   position: relative; 
   z-index: 51;
}

.targetgroups-image h3 {   
   margin: 0;
   padding: 15px 30px 15px 30px;
   color: #fff;
   text-transform: uppercase;
   text-overflow: ellipsis;
   overflow: hidden;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #38b3e7;
   background-color: rgba(56, 179, 231, 0.7);
}

.targetgroups-text ul ,.targetgroups-text h4{
   text-align: left;
}

.targetgroups-text h4{
  margin-top:10px;
}

/***************************/
/* STEP Element
/***************************/

.step-element {
   color: #fff;
   margin: 40px 0;      
}

.step-element .col-sm-4,
.step-element .col-md-6,
.step-element .col-sm-6,
.step-element .row {
   padding: 0;
   margin: 0;
} 

.step-element .step-element-col {
   text-align: center;   
}   

.step-element-3 .step-element-col,
.step-element-4 .step-element-col {
   max-width: 500px;
}   

.step-element-col-1 .step-element-text {
   background-color: #009ee0;
}

.step-element-col-2 .step-element-text {
   background-color: #12a5e2;
}

.step-element-col-3 .step-element-text {
   background-color: #24ace4;
}

.step-element-col-4 .step-element-text {
   background-color: #36b3e7;
}

.step-element img {
   margin: 0;
}

.step-element-image {
   position: relative;
   z-index: 50;   
}

.step-element-text {
   padding: 15px 30px;  
   position: relative; 
   z-index: 51;
}

.step-element-image h3 {   
   margin: 0;
   padding: 15px 30px 15px 30px;
   color: #fff;
   text-transform: uppercase;
   text-overflow: ellipsis;
   overflow: hidden;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #38b3e7;
   background-color: rgba(56, 179, 231, 0.7);
}

.step-element-text ul ,.step-element-text h4{
   text-align: left;
}

.step-element-text h4{
  margin-top:10px;
}


/***************************/
/* PIE CHARTS
/***************************/

.piechart {
   position: relative; 
   width: 300px;  
   max-width: 100%;
   margin: 30px auto;
}

.piechart-text {
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
}

.piechart canvas {  
   max-width: 100%;
   height: auto;
   display: block;
}

.piechart-text > div {
   position: absolute;
   top: 50%; 
   left: 0;
   width: 100%;
   padding: 0 30px;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);    
}

.piechart-value {
   display: block;
   font-weight: 300;
   letter-spacing: -0.05em;
   font-size: 48px;
   line-height: 1.1;
   color: #009ee0;
}

.piechart-line1,
.piechart-line2 {
   display: block;
   text-transform: uppercase;
   font-style: italic;
}



/***************************/
/* FEATURE SHORTLISTS
/***************************/

.featureshortlist .fa {
   color: #009ee0;
}

.featureshortlist h3 {
   margin-bottom: 15px;   
}

.featureshortlist li {
   margin-bottom: 10px;
}


/***************************/
/* ACCORDIONS
/***************************/

.panel-heading .panel-heading-link {
   text-decoration: none;
}

.accordion .panel-heading {
   padding: 0;
}

.accordion .panel-heading a,
.accordion .panel-heading a:visited,
.accordion .panel-heading a:visited h3 {
   display: block;
   padding: 10px 15px 10px 32px;
   text-decoration: none;
   color: #009ee0;
   position: relative;
}

.accordion .panel-heading h3 {
   font-size: inherit;
}

.accordion .panel-heading span {
   width: 16px;
   height: 16px;
   position: absolute;
   left: 10px;
   top: 50%;
   margin-top: -12px;
   text-align: center;
}

.accordion .panel-heading a span:before {
   content: "\f0d7";
   font: normal normal normal 14px/1 FontAwesome;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.accordion .panel-heading .collapsed span:before {
   content: "\f0da";
}

.panel-group .panel+a+.panel {
   margin-top: 5px;
}

/* Blue Layout */ 
.accordion-layout-blau .panel-default>.panel-heading{color:white;background:#009ee0;}
.accordion-layout-blau .panel-default>.panel-heading h3{color:white;}
.accordion-layout-blau .panel-default{border-color:#009ee0;}
.accordion-layout-blau.accordion .panel-heading a, .accordion-layout-blau.accordion .panel-heading a:visited, .accordion-layout-blau.accordion .panel-heading a:visited h3{color:white;}

.accordion .panel.panel-default{position:relative;}
.accordion .panel-heading span.faicon{top:25px;right:15px;left:auto;position:absolute;}

/***************************/
/* TOGGLES
/***************************/

.toggle {
   margin: 0 0 10px 0;
}

.toggle_header {
   border: 1px solid #e0e0e0;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   margin: 0;
   background-color: white;
   position: relative;
}

.toggle_header:hover {
   background-color: #009ee0;
}

.toggle_header a {
   padding: 7px 50px 7px 32px;   
   text-decoration: none;
   display: block;
   overflow: hidden;
   color: #009ee0;   
   word-wrap: break-word;
}

.toggle_header:hover a {
   color: white;
}

.open .toggle_header:hover a {
   color: #009ee0;
}

.open .toggle_header {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   border-bottom: 0;
   background: #f6f6f6;   
}

.toggle_body {
   padding: 5px;
   border: 1px solid #e0e0e0;
   border-top: 0;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;   
}

.toggle_triangle {
   width: 16px;
   height: 16px;
   position: absolute;
   left: 10px;
   top: 50%;
   margin-top: -9px;
   text-align: center;
}

.toggle_triangle:before {
   content: "\f0da";
   font: normal normal normal 14px/1 FontAwesome;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.open .toggle_header .toggle_triangle:before {
   content: "\f0d7";
}


/***************************/
/* POPOVERS
/***************************/

table div.hoverpopover {
   display: inline-block;
}

.popover {
   text-align: left;
   font-size: 12px;
   line-height: 18px;
}

.popover h3.popover-title {
   font-size: 12px;
   line-height: 18px;
   font-weight: bold;
}

.popover-content p {
   margin: 0;
}

.popover-content p + p {
   margin-top: 10px;
}


/***************************/
/* ISOTOPE
/***************************/

/* Isotope Filtering */

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/* Isotope CSS3 transitions */

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/* Disabling Isotope CSS3 transitions */

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}


/***************************/
/* LOGOS
/***************************/

.logoitem {
   width: 175px;
   height: 175px;
   position: relative;
   background-color: #009ee0;   
}

.logoitem a {
   display: block;
   height: 100%;
   text-decoration: none;
   cursor: pointer;     
}

.logoitemimage {   
   text-align: center;
   width: 173px;
   height: 173px;
   display: table;
   table-layout: fixed;
   border: 1px solid #e0e0e0;
   background: white;   
   -moz-transition: opacity 0.3s ease 0s;
	-webkit-transition: opacity 0.3s ease 0s;
	transition: opacity 0.3s ease 0s;
}

.logoitemimage div {   
   width: 173px;
   height: 173px;
   display: table-cell;
   border-collapse: separate;
   vertical-align: middle;
   *padding-top: 10px;
}

.logoitem h3, .logoitem a:visited h3 {
   color: white;
   text-align: center;
   margin: 0;
   position: absolute;
   width: 175px;
   padding: 0 10px;
   line-height: 20px;
   top: 20px;
   left: 0;
   opacity: 0;
   *visibility: hidden; /* ie6 ie7 */
   visibility: hidden\9; /* ie8 */
   -moz-transition: background 0.3s ease 0s;
	-webkit-transition: background 0.3s ease 0s;
	transition: background 0.3s ease 0s;
}

.logoitem p {
   word-wrap: break-word;
   font-size: 12px;
   text-align: center;
   margin: 0;
   position: absolute;
   bottom: 20px;
   left: 0;      
   width: 175px;
   padding: 0 10px;
   color: white;
   line-height: 20px;
   opacity: 0;
   *visibility: hidden; /* ie6 ie7 */
   visibility: hidden\9; /* ie8 */
   -moz-transition: opacity 0.3s ease 0s;
	-webkit-transition: opacity 0.3s ease 0s;
	transition: opacity 0.3s ease 0s;
}

.logoitem:hover .logoitemimage {
   border: 1px solid white;
   opacity: 0.1;
   *visibility: hidden; /* ie6 ie7 */
   visibility: hidden\9; /* ie8 */
}

.logoitem:hover h3 {
   opacity: 1;
   *visibility: visible; /* ie6 ie7 */
   visibility: visible\9; /* ie8 */
}

.logoitem:hover p {
   opacity: 1;
   *visibility: visible; /* ie6 ie7 */
   visibility: visible\9; /* ie8 */
}

/* Logolist */

.logolist .logoitem {   
   margin: 10px;    
}

.logolist {
   position: relative;
   margin: 0 -10px 30px -10px;
}

.logolistunlinked .logoitem:hover {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}

.logolistunlinked .logoitem:hover .logoitemimage {
   border: 1px solid #e0e0e0;
   opacity: 1;
   *visibility: visible; /* ie6 ie7 */
   visibility: visible\9; /* ie8 */
}

/* Success story */

a.logosuccessstory {
   display: block;
   width: 40px;
   height: 35px;
   position: absolute;
   top: -1px;
   right: 0;
   background-image: url(../img/success_story.png);
   background-repeat: no-repeat;
   background-position: center top;
   font-size: 0;
   line-height: 0;
   text-indent: -9999px;
}

.slick-slide a.logosuccessstory {
  right:20px;
}

.logolistlinked .logoitem:hover .logosuccessstory {
   opacity: 0;
   *visibility: visible; /* ie6 ie7 */
   visibility: visible\9; /* ie8 */
}

.logolistlinked .logoitem:hover .logosuccessstory:hover {
   opacity: 1;
   *visibility: visible; /* ie6 ie7 */
   visibility: visible\9; /* ie8 */
   background-image: url(../img/success_story_hover.png);
}

/* Filter */

.logofilter {
   margin: 25px 0;
   text-align: center;
}


/*************************************/
/* METRO ELEMENT
/*************************************/

.metro {
   margin: 0 -5px 30px -5px;
   clear: both;
}

.metro .item {
   width: 183px;
   height: 183px;
   background-color: #009ee0;
   margin: 5px;
   overflow: hidden;  
}

.metro .double {
   width: 376px;
}

.metro .quad {
   width: 376px;
   height: 376px;
}

.metro .upright {
   height: 376px;
}

.metro a {
   display: block;
   height: 100%;
   text-decoration: none;
   cursor: pointer;
}

.metro img {
   position: absolute;
   top: 0;
   left: 0;
   -moz-transition: opacity 0.3s ease 0s;
	-webkit-transition: opacity 0.3s ease 0s;
	transition: opacity 0.3s ease 0s;
}

.metro h2 {
   word-wrap: break-word;
   margin: 0;
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   background: white;
   background: rgba(255,255,255,0.8);
   -moz-transition: background 0.3s ease 0s;
	-webkit-transition: background 0.3s ease 0s;
	transition: background 0.3s ease 0s;
}

.metro h2 span {
   display: block;
   padding: 9px 15px 10px 15px;
}

.metro p {
   word-wrap: break-word;
   margin: 0;
   text-align: left;
   position: absolute;
   bottom: 12px;
   left: 0;   
   padding: 0 15px;
   color: white;   
   font-size: 16px;
   line-height: 22px;
   opacity: 0;
   *visibility: hidden; /* ie6 ie7 */
   visibility: hidden\9; /* ie8 */
   -moz-transition: opacity 0.3s ease 0s;
	-webkit-transition: opacity 0.3s ease 0s;
	transition: opacity 0.3s ease 0s;
}

.metro .item:hover {
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.4);
   -moz-box-shadow: 0 0 2px rgba(0,0,0,0.4);
   box-shadow: 0 0 2px rgba(0,0,0,0.4);
}

.metro .item:hover img {
   opacity: 0.1;
   *visibility: hidden; /* ie6 ie7 */
   visibility: hidden\9; /* ie8 */
}

.metro .item:hover h2 {
   background: transparent;
   background: rgba(0,0,0,0);
   color: white;
}

.metro .item:hover h3 {
   background: transparent;
   background: rgba(0,0,0,0);
   color: white;
}

.metro .item:hover p {
   opacity: 1;
   *visibility: visible; /* ie6 ie7 */
   visibility: visible\9; /* ie8 */
}

/*************************************/
/* SOLUTIONWORLD
/*************************************/

.solutionworld {
   position: relative;
}

.solutionworld .sw_module {
   width: 90px;
   height: 90px;
   margin: 5px;
   overflow: hidden;     
}

.solutionworld .sw_module div {
   text-align: center;
   display: table-cell;
   border-collapse: separate;
   vertical-align: middle;
   *padding-top: 10px;   
   width: 90px;
   height: 90px;
   padding: 0 3px;
   border: 1px solid #e0e0e0;    
   word-wrap: break-word;
   font-size: 12px;
   line-height: 18px;
   overflow: hidden;
   position: relative;
}

.solutionworld .sw_optional div {
   border: 1px dashed #d0d0d0;
}

.solutionworld a {
   text-decoration: none;
   cursor: pointer;     
   color: #595959;
   display: block;
}

.solutionworld a div:hover {
   border: 1px solid #009ee0;
   background: #009ee0;
   color: white;
}

.solutionworld a[href^="javascript:"] div:hover {
   border: 1px solid #e0e0e0;
   background: transparent;
   color: #595959;
   cursor: default;
}

.solutionworld .sw_module_marker {
   position: absolute;
   bottom: 6px;
   left: 0;
   display: block;
   width: 90px;
   font-size: 9px;
   line-height: 12px;
   text-align: center;
   opacity: 0.5;
}

.sw_layers {
   float: left;
   width: 73%;     
}


/* INTERFACES */

.sw_interfaces {
   float: left;
   width: 27%;   
   position: relative;
}

.sw_interfaces_inner {
   margin-left: 20px;   
}

.sw_interfaces .toggle {
   margin-left: 21px;
}

.sw_interfaces .toggle:last-child {   
   margin-bottom: 0;
}

.sw_interfaces .toggle_header a {
   padding-right: 15px;
}

.sw_bus {
   background: #e0e0e0;   
   height: 100%;  
   width: 1px;
   float: left;
   position: absolute;
}

.sw_bus:after {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.sw_bus:after {
	border-color: rgba(224, 224, 224, 0);
	border-right-color: #e0e0e0;
	border-width: 10px;
	top: 50%;
	margin-top: -10px;
}

.sw_interfaces h3.toggle_header {
   color: #595959;
   background: #ebebeb; 
}

.sw_interfaces h3.toggle_header:hover {
   background: #009ee0;
}

.sw_interfaces .open h3.toggle_header:hover {
   background: #ebebeb;  
}

.sw_interfaces .toggle_body {
   background: #f6f6f6;
}

.sw_interfaces .sw_module div,
.sw_interfaces a[href^="javascript:"] div:hover {
   background: white;
}


/* CUSTOMER */

.sw_customer {
   background-color: #ebebeb;
   text-transform: uppercase;
   font-weight: bold;
   text-align: center;
   padding: 3px 10px;
   margin: 0 0 20px 0;
   position: relative;
   clear: both;
}

.sw_customer:after {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.sw_customer:after {
	border-color: rgba(0, 158, 224, 0);
	border-top-color: #ebebeb;
	border-width: 10px;
	left: 50%;
	margin-left: -10px;
}



/* FILTER */

.sw_filter {
   margin: 25px 0;
   text-align: center;
}


/* SELECTION */

.sw_selection {
   background: #009ee0;
   color: white;
   border-radius: 4px;
   font-size: 12px;
   line-height: 18px;
   margin: 0 0 35px 0;
}

.sw_selection > div > div {
   padding: 5px 15px;
}

.sw_selection a, .sw_selection a:visited {
   color: white;
}


/* ICONS */

.toggle_header .icon_puzzle,
.open .toggle_header:hover .icon_puzzle {
   background-image: url(../img/sw_icon_puzzle.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header .icon_accounting,
.open .toggle_header:hover .icon_accounting {
   background-image: url(../img/sw_icon_accounting.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header .icon_billing,
.open .toggle_header:hover .icon_billing {
   background-image: url(../img/sw_icon_billing.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header .icon_contract,
.open .toggle_header:hover .icon_contract {
   background-image: url(../img/sw_icon_contract.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header .icon_customer,
.open .toggle_header:hover .icon_customer {
   background-image: url(../img/sw_icon_customer.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header .icon_process,
.open .toggle_header:hover .icon_process {
   background-image: url(../img/sw_icon_process.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header .icon_product,
.open .toggle_header:hover .icon_product {
   background-image: url(../img/sw_icon_product.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header .icon_risk,
.open .toggle_header:hover .icon_risk {
   background-image: url(../img/sw_icon_risk.png);
   background-repeat: no-repeat;
   background-position: right center;
}

.toggle_header:hover .icon_puzzle {
   background-image: url(../img/sw_icon_puzzle_white.png);
}

.toggle_header:hover .icon_accounting {
   background-image: url(../img/sw_icon_accounting_white.png);
}

.toggle_header:hover .icon_billing {
   background-image: url(../img/sw_icon_billing_white.png);
}

.toggle_header:hover .icon_contract {
   background-image: url(../img/sw_icon_contract_white.png);
}

.toggle_header:hover .icon_customer {
   background-image: url(../img/sw_icon_customer_white.png);
}

.toggle_header:hover .icon_process {
   background-image: url(../img/sw_icon_process_white.png);
}

.toggle_header:hover .icon_product {
   background-image: url(../img/sw_icon_product_white.png);
}

.toggle_header:hover .icon_risk {
   background-image: url(../img/sw_icon_risk_white.png);
}


/***************************/
/* PROJECT
/***************************/


.project {
   margin: 40px 0;
}

.project .successstory {
   margin-top: 20px;
}

.project .successstory i {
   color: #009ee0;
}

.project .project-photo {
   float: left;        
   overflow: hidden;   
   position: relative; 
   width: 175px;
}

.project .project-info {
   margin-left: 205px;   
}

.project .project-info h3 {
   margin-top: 0;   
}

/* Testimonial small company */

.project-photo .logoitemimage img {
   max-width: 120px;
}


/***************************/
/* MODULLIST
/***************************/

.modullist {
	margin: 30px -5px;
}

.modulouter {
	perspective: 1200px;
	-ms-perspective: none;
	width: 280px;
	height: 280px;
	margin: 5px;
	float: left;
	position: relative;
}

.modul {	
	width: 100%;
	height: 100%;				
	color: #fff;	
}

.modul a {
	color: #fff;
}

.preserve3d .modul {
	transition: transform .4s;		
	transform-style: preserve-3d;	
	transform: rotateX(0deg) translateZ(-140px);
}

.preserve3d .modul:hover {	
	transform: rotateX(90deg) translateY(-140px);		
}

.no-preserve3d .modul:hover .modulfront {
	opacity: 0;
	z-index: 47;
}

.modulfront {
	transition: opacity .4s;	
	width: 280px;
	height: 280px;
	background: #009ee0;				
}

.preserve3d .modulfront {
	transform: translateZ(140px);	   
	backface-visibility: hidden;
}

.no-preserve3d .modulfront {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 49;
}

.modulback {		
	width: 280px;
	height: 280px;
	background: #009ee0;	              
}

.preserve3d .modulback {
	transform: rotateX(-90deg) translateZ(-140px);
}

.no-preserve3d .modulback {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 48;
}

.modulimg {
	position: absolute;
	z-index: 50;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: .5;
}

.modulback .modulimg {	
	opacity: .1;
}

.modulcontent {
	position: absolute;
	padding: 20px 30px;
	z-index: 51;	
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;	
}

.modulback .modulcontent {
	padding: 10px 20px;
}

.modulfront h2 {
	margin: 10px 0;
}


/***************************/
/* contentfilter 
/***************************/

.csc-default.contentfilter{
  padding: 25px 0;
  background:#edf7fc;
}
.contentfilter .btn-group a.btn.btn-default{
  border-color: #009ee0;
  background-color: transparent;
  /*color: #009ee0;*/
  color: #595959;
  width: 100%;
}

.contentfilter .btn-group a.btn.btn-default:hover{
		color:#009ee0;
}

.contentfilter .btn-group a.btn.btn-default:focus,
.contentfilter .btn-group a.btn.btn-default:active{
  background-color: #009ee0;
  border-color: #009ee0;
  color: #fff;
}

.contentfilter .btn-group a.btn.btn-default.active,
.contentfilter .btn-group a.btn.btn-default.active:focus,
.contentfilter .btn-group a.btn.btn-default.active:active{
  border-color: #009ee0;
  box-shadow: none;
  background-color: #009ee0;
  color: #fff;
}

.contentfilter > div {
    padding: 0 20px;
}

.contentfilter .nav-tabs li a{border-radius:0;}
.contentfilter .nav-tabs li:first-child a{border-bottom-left-radius:4px;border-top-left-radius:4px;}
.contentfilter .nav-tabs li:last-child a{border-bottom-right-radius:4px;border-top-right-radius:4px;}

@media only screen and (max-width: 1200px) {
    .fce_teaser.fce_kachel_liste img{width:100%;}
}

@media only screen and (max-width: 980px) {
    .kachelitem .col-sm-3{width:50%;}
}

@media only screen and (max-width: 680px) {
    .kachelitem .col-sm-3{width:100%;}
}

/***************************/
/* Pop-up Fenster 
/***************************/

body .ui-dialog {
  background-color: rgba(0,159,227,0.95);
  border: none !important;
  width: 600px !important;
  }

.ui-dialog .ui-dialog-titlebar {
   background-color: rgba(0,0,0,0);
   border: none;
  }


.ui-widget.ui-widget-content {
  border: none;
  
  }

#ui-id-1 {
  display: none;
  }

body .ui-dialog .ui-dialog-titlebar-close {
  margin-top: 0px;
  border: none;
  background: none;
  -webkit-transform: scale(1.2);
  }
body #ui-dialog-icon {
  color: white;
  font-size: 60px;
  text-align: center;
  margin: -10px;
  }

body .ui-widget-content {
  color: white;
  margin: 15px;
  }

body .ui-widget-content a{
  color: white;
  }

body #button-umfrage{
  border-color: white;
  background-color: white;
  color: #009FE3;
  border-width: 3px;
  }
  
body .ui-widget {
  font-family: Open Sans;
  text-align: center;
  }

body .pop-up {
  display:none;
  
  }

body .ui-button .ui-icon {
  background-image: url(images/ui-icons_ffffff_256x240.png);
  }

body #button-umfrage:hover {
    color: white;
    background-color: #009FE3;
    border-color: white;
    border-width: 3px;
}

.btn-no-border {
   border-width: 0px;
   padding: 0px;
}

.btn-no-border:hover{
   text-decoration: underline !important;
   background-color: rgba(255,255,255,0) !important;
}

.btn-no-border:hover i{
   text-decoration: underline !important;
}

/* MOUSE OVER BILD */

.mouse-over-image-container {
   position: relative;
   display: inline-block;
   width: 100%;
   max-width: 400px; /* Anpassen nach Bedarf */
   overflow: hidden;
   border-radius: 15px;
}

.mouse-over-image-container img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.3s ease-in-out; /* Weiche Animation */
}

.mouse-over-image-container:hover img {
   transform: scale(1.1); /* Zoom-Effekt */
}

.mouse-over-image-container:hover .overlay .mouse-over-text {
   display: block;
}

.mouse-over-image-container:hover .overlay {
   opacity: 1;
}

.mouse-over-image-container h3 {
   color: white;
   margin-left: 15px;
   margin-right: 15px;
   margin-top: 50px;
   font-size: 24px;
   line-height: 30px;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 47, 66, 0.5);
   display: flex;
   color: white;
   font-size: 16px;
   transition: opacity 0.3s ease-in-out;
}

.overlay .mouse-over-text {
   display: none;
   padding: 20px;
}

.mouse-over-header {
   width: 365px;
   text-align: center;
}

.mouse-over-text {
   padding-left: 5px;
   position: absolute;
   bottom: 0px;
}

.zoom-element-5 {
  background-color: #3498db;
  transition: transform 0.3s ease;
}
.zoom-element-5:hover {
  transform: scale(1.05); /* 5 % größer */
}

.feature-hover-2 {
  position: relative;
  margin-left: 20px;
  margin-right: 20px;  
  margin-bottom: 10px;
  overflow: hidden; }
  .feature-hover-2 .feature-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 8%; }
    .feature-hover-2 .feature-content .btn-bar {
      position: relative;
      margin-bottom: -30px;
      opacity: 0;
      transition: ease all 0.35s; }
  .feature-hover-2:hover .feature-content .btn-bar {
    opacity: 1;
    margin-bottom: 0; }

.align-items-end {
  align-items: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.d-flex {
  display: flex !important;
}

.opacity-5 {
  opacity: 0.5;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bg-dark {
  background-color: #171347 !important;
}

.text-white {
   color: white !important;
}