.tx-we-hotspot{display:block;position:relative;}
.tx-we-hotspot ul.nav{margin-bottom: 1px;}
.sMaincontent .tx-we-hotspot ul.nav > li{border-color: #fff;}
.sMaincontent{padding: 10px 40px 40px 40px!important;}
.tx-we-hotspot ul.nav-tabs{border: 0;}
.callout{background-color:#f0f0f0;border-left:3px solid #ccc;color:#333;margin:20px 0;padding:20px;}
.callout-warning{background-color:#fbefdd;border-color:#e8a33d;}
.flowchart__wrapper{position:relative;width:100%;}
.flowchart__container{position:relative;}
.flowchart__image{height:auto;width:100%;}
.flowchart__image-item{display:block;width:100%;}
.flowchart__hotspots{height:100%;left:0;position:absolute;top:0;width:100%;}
.flowchart__hotspots-item{cursor:pointer;display:flex;flex-direction:row;outline:none;position:absolute;}
.flowchart__hotspots-item:hover{z-index:11;}
/*.flowchart__hotspots-icon{background:#C6003B;color:#FFF;display:inline-block;height:30px;line-height:30px;opacity:.8;text-align:center;width:30px;}*/
.flowchart__hotspots-title{display:block;font-family:'Overpass',sans-serif;font-weight:700; font-size: 18px;color: #002851;}
.flowchart__hotspots-descr{display:block;}
.flowchart__hotspots>.flowchart__hotspots-icon,
.flowchart__hotspots>.flowchart__hotspots-line,
.flowchart__hotspots>.flowchart__hotspots-title{display:none;} /* Hotspots ohne Link werden nicht mit a-Tag gerendert und werden daher auch nicht angezeigt */
.js-flowchart__mobile,.flowchart__hotspots-mobileitem{display:none;}
.SliderMarker{position:absolute;}
.hotspot{background-image:url(/typo3conf/ext/we_hotspot/Resources/Public/Icons/hotspot.png);height:29px;position:absolute;width:29px;}
.hotspot:hover{cursor:pointer;}
.flowchart__popup{background:#FFF;bottom:50px;color:#343434;display:none;left:0;font-size:16px;line-height:20px;min-width:195px;padding:15px 15px 35px;position:absolute;z-index:10;}
.active>.flowchart__popup{display:block;}
.flowchart__popup.tl{left:auto;right:0;}
.flowchart__popup.bl{bottom:auto;top:100%;left:auto;right:0;}
.flowchart__popup.br{bottom:auto;top:100%;}
/* Hotspot mit Plus-Icon */
.flowchart__hotspots-text{background-color:transparent;box-sizing:border-box;color:#FFF;cursor:pointer;display:block;height:50px;line-height:50px;margin-right:-20px;overflow:hidden;padding:0 0 0 20px;white-space:nowrap;transition-duration:.5s;transition-property:width;transition-timing-function:ease;width:0;}
.flowchart__hotspots-close{
  position: relative;
  display: block;
  text-align: right;
  font-size: 28px;
}
.flowchart__popup a.hotspot-css-link{
  display: block;
  margin-top: 15px;
  text-decoration: underline;
}
.flowchart__hotspots-subtitle{
  display: block;
  margin-bottom: 5px;
  margin-top: 3px;
  font-weight:600;
}

.flowchart__hotspots-icon{
  background-color:#fff;
  border:1px solid #fff;
  color:inherit;
  cursor:pointer;
  display:inline-block;
  font:inherit;
  height:40px;
  margin:0;
  outline:none;
  overflow:visible;
  padding:0;
  text-transform:none;
  width:40px;
  border-radius: 10px;
}

.flowchart--white .flowchart__hotspots-icon{background-color:#FFF;}
a.flowchart__hotspots-link,.flowchart__hotspots-link:link,.flowchart__hotspots-link:visited{color:#C6003B;text-decoration:underline;}

.animation-box{
  display:inline-block;
  height:40px;
  padding:0;
  position:relative;
  width:40px;}

.animation-box img{
  position:relative;
  top:-1px;
  left:-1px;
  }


/*
.animation-inner{display:block;top:50%;transform:translate3d(0,0,0);}
*/

.ie11 .animation-inner{top:auto;}
.animation-inner,.animation-inner:after,.animation-inner:before{background-color:#FFF;height:2px;position:absolute;transition-duration:.15s;transition-property:bottom,top,transform;transition-timing-function:ease;width:20px;}
.flowchart--white .animation-inner,.flowchart--white .animation-inner:after,.flowchart--white .animation-inner:before{background-color:#C6003B;}

/*
.animation-inner:after,.animation-inner:before{content:"";display:block;}
.animation-inner:after{bottom:0;transform:translate3d(0,0,0) rotate(-90deg);}
.animation-inner:before{top:0;transform:translate3d(0,0,0) rotate(-90deg);}
 */

/* Pfeil */
/*
.flowchart__hotspots-item:hover .animation-inner,.flowchart__hotspots-item:hover .animation-inner:before,.flowchart__hotspots-item:hover .animation-inner:after{height:1px;}
.flowchart__hotspots-item:hover .animation-inner{transform:rotate(-180deg);width:22px;}
.flowchart__hotspots-item:hover .animation-inner:before{transform:translate3d(-6px,0,0) rotate(-45deg) scaleX(.7);top:-5px;}
.flowchart__hotspots-item:hover .animation-inner:after{bottom:-5px;transform:translate3d(-6px,0,0) rotate(45deg) scaleX(.7);}
.flowchart__hotspots-item:hover .flowchart__hotspots-icon{border-color:transparent;}
.flowchart__hotspots-item:hover .flowchart__hotspots-text{width:100%;padding-right:30px;}
*/



/* Geklickter Zustand/Aktiv */
.flowchart__hotspots-item.active .flowchart__hotspots-icon{background-color:#FFF;border-color:#FFF;}
.flowchart--white .flowchart__hotspots-item.active .flowchart__hotspots-icon{background-color:#C6003B;border-color:#C6003B;}
.flowchart__hotspots-item.active .animation-box{
  padding:0;
  }
.flowchart__hotspots-item.active .animation-inner,.flowchart__hotspots-item.active .animation-inner:after,.flowchart__hotspots-item.active .animation-inner:before{background-color:#C6003B;height:2px;width:25px;}
.flowchart--white .flowchart__hotspots-item.active .animation-inner,.flowchart--white .flowchart__hotspots-item.active .animation-inner:after,.flowchart--white .flowchart__hotspots-item.active .animation-inner:before{background-color:#FFF;}



/*
.flowchart__hotspots-item.active .animation-inner{transform:rotate(45deg);}
.flowchart__hotspots-item.active:hover .animation-inner{transform:translate3d(0,0,0) rotate(45deg);}
.flowchart__hotspots-item.active:hover .animation-inner:before {transform:translate3d(0,0,0) rotate(-90deg);top:0;}
.flowchart__hotspots-item.active:hover .animation-inner:after {bottom:0;transform:translate3d(0,0,0) rotate(-90deg);}
*/




.flowchart__hotspots-item.active:hover .flowchart__hotspots-text{width:0;padding-right:0;}

.flowchart__wrapper>header{background-color:#C6003B;bottom:0;padding:20px 20px 30px;position:absolute;}
.flowchart__wrapper>header h1,.flowchart__wrapper>header .h1,
.flowchart__wrapper>header h2,.flowchart__wrapper>header .h2,
.flowchart__wrapper>header h3,.flowchart__wrapper>header .h3{color:#FFF;margin-bottom:0;}

/* Extra Small Devices,Phones */
@media only screen and (min-width:480px){

}
@media only screen and (min-width:576px){
}
/* Small Devices,Tablets */
@media only screen and (min-width:768px){
  /*
  .flowchart--white .flowchart__hotspots-text{background-color:#FFF;color:#C6003B;}
  .flowchart--white .flowchart__popup{background:#C6003B;color:#FFF;}
  .flowchart__hotspots-link{background:#C6003B url(../../../../we_template/Resources/Public/Images/arrow-right-fff.svg) center center no-repeat;bottom:0;height:50px;overflow:hidden;position:absolute;right:0;text-indent:-99999px;width:50px;}
  .flowchart--white .flowchart__hotspots-link{background:#FFF url(../../../../we_template/Resources/Public/Images/arrow-right-c6003b.svg) center center no-repeat;}
  */

}
/* Medium Devices,Desktops */
@media only screen and (min-width:992px){
  .flowchart__popup{min-width:250px;}
}
/* Large Devices,Wide Screens */
@media only screen and (min-width:1280px){
  .flowchart__popup{min-width:300px;}
}
/* Explicit Mobile */
@media only screen and (max-width:767px){
  /*
  .js-flowchart__mobile{display:block;height:100%;left:0;position:absolute;top:0;width:100%;}
  .flowchart__image-item{margin-bottom:10px;}
  .flowchart__hotspots-mobileitem{background:#C6003B;color:#FFF;display:block;height:20px;margin:0;position:absolute;text-align:center;width:20px;}
  .flowchart__hotspots{height:auto;left:auto;position:static;top:auto;}
  .flowchart__hotspots-item{flex-direction:column;margin-bottom:5px;position:static;}
  .flowchart__hotspots-text,
  .flowchart__hotspots-item:hover .flowchart__hotspots-text,
  .flowchart__hotspots-item.active:hover .flowchart__hotspots-text{padding-right:30px;text-overflow:ellipsis;width:100%;}
  .flowchart__hotspots-icon{display:none;}
  .flowchart__popup{background:#F6F6F8;padding-bottom:15px;position:static;}
  .flowchart__hotspots-title{display:none;}
  .flowchart__hotspots-text .flowchart__hotspots-mobileitem{display:inline-block;height:auto;margin-left:-10px;position:static;}

   */
}