@charset "UTF-8";
@font-face {
	font-family: 'SiemensSans-Black';
	src: url('../font/SiemensSans-Black.eot');
  src: local('☺'), url('../font/SiemensSans-Black.woff') format('woff'),
   url('../font/SiemensSans-Black.ttf') format('truetype'), url('../font/SiemensSans-Black.svg') format('svg'),
   url('../font/SiemensSans-Black.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'SiemensSans-BlackItalic';
	src: url('../font/SiemensSans-BlackItalic.eot');
  src: local('☺'), url('../font/SiemensSans-BlackItalic.woff') format('woff'),
  url('../font/SiemensSans-BlackItalic.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'SiemensSans-Bold';
	src: url('../font/SiemensSans-Bold.eot');
  src: local('☺'), url('../font/SiemensSans-Bold.woff') format('woff'),
  url('../font/SiemensSans-Bold.woff2') format('woff2');
	font-weight: bolder;
	font-style: normal;
}
@font-face {
	font-family: 'SiemensSans-BoldItalic';
	src: url('../font/SiemensSans-BoldItalic.eot');
  src: local('☺'), url('../font/SiemensSans-BoldItalic.woff') format('woff'),
  url('../font/SiemensSans-BoldItalic.woff2') format('woff2');
	font-weight: bolder;
	font-style: normal;
}
@font-face {
	font-family: 'SiemensSans-Italic';
	src: url('../font/SiemensSans-Italic.eot');
  src: local('☺'), url('../font/SiemensSans-Italic.woff') format('woff'),
   url('../font/SiemensSans-Italic.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SiemensSans-Roman';
	src: url('../font/SiemensSans-Roman.eot');
  src: local('☺'), url('../font/SiemensSans-Roman.woff') format('woff'),
  url('../font/SiemensSans-Roman.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
/*******************/
html,body,:fullscreen,.ratio {
          padding:0;
          margin:0;
          font-family:SiemensSans-Roman;
                 background-color: #4d217a;          
         background-image:radial-gradient(circle at 92% 26%, #4d217a 0%,#1B1534 30%);
         overflow: hidden;
padding:0;
margin:0;
color: #000;
text-align: initial;
  overflow-y: auto;
  max-width: 100%;
  width: 100%;
        }
       
   
     
       .ratio {
        position: relative;
        width: 100%;
    }
.ratio-16x9       
{--aspect-ratio: calc(9 / 16 * 100%);
}

ul {
    padding: 0
}
li{
    list-style:none;
    float: left
}
img {
    max-width: 100%
}
main {
  height: 66.75vh;
 /* overflow: hidden;*/}
  header {
    height: 12.25vh;
    padding: 22px 0!important;
    display: flex;
  justify-content: center;
  align-items: center;
}
footer {
  height: 21vh;
    overflow: hidden;
}

.scd-modal .open-form {
  margin-top: 25px;
}
.scd-modal .open-form.float-md-left {
  margin-left: 35px;
}
.scd-modal .open-form.float-md-right {
  margin-right: 35px;
}
/*********************************************************/
.visible {
  opacity: 1;
  transition: opacity 1s linear;
}
.collapse{
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}
.hidden10.float-md-right .hidden2 {
  opacity: 1!important;
  transition: visibility 0s 0s, opacity 0s linear;
}
.hidden10 h2{
  opacity: 1;
}
.sols .circle.dropdown-toggle.transition.hidden2 {
  opacity: .5;
}

.hidden10 *,.float-md-right .hidden2{
cursor: default!important
}
.hidden10 .show,.float-md-right .hidden2 + .navbar-collapse {
  display: none!important;
}

footer .hidden10 .show {
  display: block!important;
}
.show,.show2{
  opacity: 1;
  transition:  opacity 1s ease-in;
}
input,select,a,*:hover,a:focus,*:hover * ,a:active {
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in
}

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000!important
  }
  input::-moz-placeholder { /* Firefox 19+ */
    color: #000!important
  }
  input:-ms-input-placeholder { /* IE 10+ */
    color: #000!important
  }
  input:-moz-placeholder { /* Firefox 18- */
    color: #000!important
  }
 input:hover,select:hover{
  padding-left: 10px;
  border: 1px solid #768b87;
}
header, main, footer {
  padding: 0;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-width: 768px}
/********************************/
header .float-md-left{
  width: 100%;
  padding-left: 30px;
    margin: 0 auto;
    float: none!important;  text-align: center;
}
header p{
  margin-bottom: 4px;
    color: #fff;
  font-size: 18px;
}
/******************************/

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}
.show3 {display: block;}
#navbarContent0 {
    margin-top: 40px;
}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.navbar-collapse{
  margin-left: 113%;
  margin-top: 15px;
  z-index: 11;
  min-width: 225%;
  position: absolute;
display: none;
}

       .drive ul li .navbar-collapse {
        top: 0;
        margin-top: 0;
    }
  /*  .drive .navbar-collapse:after,.show2:after*/
    .selected-c .collapse-left:before,.selected-c-ag .collapse-left:before{
      content:""; 
      position: absolute;
      width: 30px;
      height: 40px;
      margin-left: 50%;
      top: -31px;
      z-index: 1;
      border-bottom: 1.5px solid #8a00e5;
      border-left: 4px solid #1b1534; }
    .collapse-left{
      display: none;
     height: 0;
      position: absolute;
      right: 6%;
      width: 18%;
      top: 7px;
        border-right: 1.5px solid #8A00E5;
  border-bottom: 1.5px solid #8A00E5;
}
.selected-c .collapse-left,.selected-c-ag .collapse-left{
  display: block;}
li:hover .collapse-right:after{
  content:""; 
  background: #8A00E5;
  position: absolute;
  width: 30px;
  height: 1.5px;
  margin-left: -30px;  }
.collapse-right{
  width: 30px;
  border-left: 1.5px solid #8A00E5;
  border-bottom: 1.5px solid #8A00E5;
  position: absolute;
    right: -8%;
}
.sols .navbar-collapse {
  min-width: 800px;}
  .sols .dropdown-item {
    width: auto;
    float: right;
}
  .dropdown-menu h2 {
    margin-bottom: 0px
}
.dropdown-item{
  background-color: #fff;
  background-clip: padding-box;
  border: 2px solid #578DDD;
  border-radius: 18px;
}

.demo .dropdown-item,
.sols .dropdown-item{
padding-left: .5rem;
padding-top: 9px;
border-radius: 0;
border: 0 none;
background: #1B1534;
color: #fff;
}
.sols h4,.demo h4{
  font-size: 24px;}
.sols p,.demo p{
  display: list-item;
  list-style: inside;
  padding-left: 3px;
  margin-bottom: 0;
  font-size: 1rem;
  color: #fff!important;
}
  .dropdown-submenu .dropdown-menu{
    display: block;
  }
  .dropdown-menu {
    width: 38%;
    background: transparent;
}
.navbar-nav .nav-link {
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
}
.dropdown-toggle::after{
  display: none;
}
.dropdown-item.active, .dropdown-item:active {
  color: #000;
  text-decoration: none;
  background-color: #fff;
}
ul>li:nth-child(even)>.dropdown-item,ul>li:nth-child(even)>.dropdown-item.active,ul>li:nth-child(even)>.dropdown-item:active {
  background: #D7E4EE
}
.dropdown-menu li {
  margin: 0 0 7px 18px;
  width: auto;
  line-height: 1.5;
  min-width: 100%;
}
.navbar-nav .dropdown-menu {
  width: 100%;
}
.show2 .nav-link:hover {
  padding: 6px 14px 7px 14px;
}
#dropdownMenu1 {
  line-height: 1;
  padding-right: 43px;
  box-sizing: border-box;}
  .show2 .dropdown-menu h2 {
    margin-left: 18px;
    margin-bottom: 5px
}
  .arrow {
    border: solid #8f0be6;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 9px;
    transform:rotate(-136deg);
    -ms-transform:rotate(-136deg);
    -webkit-transform:rotate(-136deg);
    margin-top: 2px;
    right: 15px;
    position: absolute;}
.arrow:hover{
      border-width: 0 6px 6px 0;
}
#navbarContent0.show .arrow,.arrow.down{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  margin-top: -8px;  }
.nav-item {
  padding-bottom: 10px;
  line-height: 1;
}
.nav-link:hover {
  border: 4px solid rgb(75 101 194 / 1);
  box-sizing: border-box;
  padding: 6px 13px}
.shadow .dropdown-item:hover {
    padding: 2px 6px 2px 22px;
    border: 4px solid rgb(75 101 194 / 1);
}

.absolute:hover {
  border-color: #cfcfd2;
}
/******************************/
.col-lg-1,footer .float-md-left,footer .float-md-right {
  padding: 0;
  width: 16.5%!important;
  max-width: 16.5%!important;}
.col-lg-1 main{display: flex;}
/********************************/
.circle,.circle3 {
  float: none;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  padding: 0 15px;
  line-height: 1;
  font-size: 21px;
}
.float-md-left .circle3{
  color: #fff;
  width: 100%;
  cursor: default;
}
.float-md-left .circle3.selected-c,.float-md-left .circle3.selected-c-ag{
  color: #8a00e5;
}

.float-md-left>ul>li, .float-md-right>ul>li {
  margin-bottom: 0;
  width: 100%;
  min-width: 95px;
  float: none;
  display: flex;
  min-height: 15.5vh;
  margin-top: .05vh;
}
.demo .circle img 
{
  margin-bottom: 9px!important;
  border: 3px solid #fff;
  box-sizing: content-box;
  width: 12vh;
  height: 12vh;
  background: #fff;
}
.data-trans
{border: 3px solid #a153f2;
color:#000}
.float-md-right>ul>li:hover>.navbar-collapse,.float-md-left>ul>li:hover>.navbar-collapse,.navbar-collapse:hover{
  display: block;
}
.circle img{   
margin-bottom: 5px!important;
  z-index: 1}
  .iconic svg path,.iconic svg polygon{
    stroke:#4D217A;
  }
.selected path,.selected polygon,.selected-ag path,.selected-ag polygon{
    stroke:#fff!important}
 .selected, .selected-ag{
      background: #8A00E5!important;
    }
    .hovered,.selected .notselect,.selected-ag .notselect
    {display: none;}
    .selected .hovered, .selected-ag .hovered {
display: block;    }
    

    .st0{fill:none;}

  .iconic{
    cursor: pointer;
    margin: 0 auto;
  line-height: 14px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 11vh;
    height: 11vh;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 50%;
    padding: 0;
  transition: none;}
    .circle img
        {z-index: 11;
          cursor: pointer;
}
.circle img,.circle2  {
  width: 11vh;
  height: 11vh;
  
border-radius: 50%;
  font-size: 12px;
  text-overflow: ellipsis;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
    text-align: center;
  line-height: 14px;
display: flex;
justify-content: center;
flex-direction: column;
}
main h2 {
  color: #fff;
  margin-bottom: 4px;
  line-height: 1;
  font-size: 1.75rem;
}
.circle.dropdown-toggle::after,.circle3.dropdown-toggle::after{
  display: none;
}
.circle.drag {
  border-color: #4d217a;
  left:50px;
  bottom:58px;
  position: absolute;
}

@-moz-document url-prefix() { 
  .demo li {
    bottom:  16%;
    }
}
.demo li {
  position: relative;
  bottom:  10%;
  right: 50%;
      z-index: 1;
    width: 200%;
}
.demo .circle.dropdown-toggle.transition.hidden2 {
  padding: 0;
  margin-bottom: -5px;
    height: 116px;
}

.demo .navbar-collapse {
  display: none;
  right:100%;
  top: 0!important;
   margin-top: 0!important;
}
.demo li:hover .navbar-collapse{
      display: block;
  opacity: 1;
    margin-left: -430%;
    text-align: left;
    position: absolute;
    right: 85%
}
main .float-md-left ul.shadow{
  overflow:visible;
}
main .float-md-right ul,main .float-md-left ul{
overflow-x: hidden;
    overflow-y: auto;
    margin: 0 auto;    
    box-sizing: border-box;
    height: 63vh}
    .float-md-left>ul>li:last-child, .float-md-right>ul>li:last-child {
      margin-bottom: 0;
  }
  .float-md-right .circle {
    float: none;
}
  .float-md-right .navbar-collapse {
    margin-left: 0;
  /*  margin-top: -90%;*/
        right:110%;
        z-index: 10
}

main .float-md-right  h2 {
  text-align: center;
}
.data-trans .hidden2.circle {
  margin-right: -150%;
  margin-bottom: 58%;
  cursor: pointer!important;
}
    /**********************************/
::-webkit-scrollbar {
  width: 5px;
  margin-left: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #4d217a; 
  border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #814eb4; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1b2036; 
}
.sol-cap{
font-size: 21px;
width: 100%;
    float: right;
}

.sols li{
  display: flex;
  align-items: center;
}
li:hover .item{
  display: inline-block;
  vertical-align: middle
}
/***************************************/
.col-lg-10, footer .centered, .col-lg-1,footer .float-md-left,footer .float-md-right {
  flex: auto;
  display: inline-block;
}
.col-lg-10 {
  height: 100%;}
.modal-open .modal,main .centered .col-lg-11,
#exampleModal3,#exampleModal
{
  background: url(../img/Energylandschaft.png) no-repeat center;
  background-size: cover;
}
main .centered .col-lg-11{
  padding: 0;
  height: 100%;
  margin: 0 auto;
}

.circle2.cancelled {
  position: absolute;
  bottom: 100px;
  left: 33%;
  border: 3px solid yellow;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
overflow: visible;
background: #fff;
}
.cancelled:before, .cancelled:after {
  position: absolute;
  left: 58px;
  content: ' ';
  height: 114px;
  width: 3px;
  background-color: #ef0a0a;
  margin-top: 2px;
}
.cancelled:before {
  transform: rotate(45deg);
  margin-left: -12px;
}
.cancelled:after {
  transform: rotate(-45deg);
  margin-left: -13px;
}
footer .float-md-right {
  text-align: center;
}
.demo .collapse-right{
  display: none;
}
.circle.demo {
  line-height: 17px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 13.5vh;
  height: 13.5vh;
  background-color: #1B1534;
  border-radius: 50%;
  padding: 0;
  position: absolute;
  bottom: 45px;
  left: 57.5%;
  border: 5px solid #8A00E5;
  color: #969696;
  z-index: 10;
  font-size: 12.5px;
  overflow: visible;}
  .circle.demo.full{
    border: 0 none;
        background-color: transparent;
    cursor: default;
        width: 12.5vh;
    height: 12.5vh;   
  }
  .full .place{
    display: none;
  }
#navbarContent0 {
  position: absolute;
  top: -25px;
  transform: translateY(-20%);
}
main .show2 h2 {
  margin-bottom: 8px;
}
.shadow {
  width: 100%;
}
.show2 {
    display: block;
    z-index: 10;
    transform: translateY(-42%);}

    .float-md-left ul li:nth-child(3) .navbar-collapse .nav-link:hover ,
   .float-md-left ul li:nth-child(4) .navbar-collapse .nav-link:hover {
  width: 100%; }
  .demo .dropdown-item {
    /*
    position: fixed;
    */
    width: auto;
    padding-right: 15px;
    right: 46%;
    padding-bottom: 15px;
    margin-top: 0!important;
}
.demo li:not(:last-child) {
  display: none;
}
.demo,.demo *{
  transition: none;
}
/*****************************/
.modal-btn {
  color: #fff;
  background: #8A00E5;
  border-radius: 50px;
  min-width: 60%;
  width: 60%;
  line-height: 35px;
  padding: 3px;
  text-align: center;
  margin: 0 auto;
  margin-top: 10vh!important;
  font-weight: bold;  
  font-size: 26px;
  min-height: 7vh;
}
.modal-btn.btn:focus{
  background: #CF9BFF;
  outline: none;
  box-shadow: none;
  transition: none;
}
.modal-btn.btn.hide-focus:focus{
  background: #8A00E5;
  transition: none;}
footer p {
  color: #fff;
}
.chart-ul {
  margin-bottom: 0;
}
footer .centered
{  transform: translateY(25%);
}

footer .float-md-left, footer .float-md-right{
  height: 100%;
}
footer .float-md-left div{
  margin: 0 auto;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  height: 14vh;
  transform: translateY(25%);
  justify-content: flex-end;  }
    footer .float-md-left div p:last-child {
      margin-bottom: 0;
  }
  .float-md-left p {
    font-size: 20px;
    line-height: 1;
}
.var {
  float: right;
}
.sols li:hover .collapse{
  display: block;
}
.sols .collapse.show{
  display: none;
}
.chart-ul li{
  height: 14vh;
  display: inline;
  margin: 0 3% 0 0;
  overflow: hidden;
  width: 22.75%;
  background: #fff;
cursor: pointer;}
  .chart-ul li:last-child {
    margin: 0;
}
.chart-ul li.greeny
{
  border-color:green;
}
.chart-ul h6 {
  color: red;
  padding: 5px 0 0 5px;
  font-size: 13px;
}
.chart-ul .greeny h6 {
  color: green;
}
footer canvas{margin-top: -15px}
.hide,.invisible,.invisible2,.hide2,.hide-modal{
  display: none;
}
footer .chart-ul p {
  color: #827f7f;
  text-align: center;
  line-height: 2.5}
  button.close {
    right: -18px;
        border: 3px solid #8a00e5;
    box-sizing: content-box;
    color: #8a00e5;
    font-family: 'SiemensSans-Roman';
    opacity: 1;
    box-shadow: 0 4px 4px 0 grey;
    position: absolute;
    cursor: pointer;
      background: #fff!important;
      width: 35px;
      margin-bottom: -20px;
      z-index: 7;
      line-height: 35px;
      top: auto;
      margin-top: -25px;}
    #exampleModal3 button.close {
      margin-top:-14px
    }

/********************************/
.num5 .collapse{
  margin-top: -19px
}
.num4 .collapse{
  margin-top: -3px
}
.num3 .collapse{
  margin-top: 4px
}

.num2 .collapse{
  margin-top: 15px
}
@-moz-document url-prefix() { 

  .num2 .collapse{
    margin-top: 65px;
  }
  }
.num1 .collapse{
  margin-top: 30px
}
.num6 .collapse{
  margin-top: -29px
}
.modal-content {
    background-color: rgba(255,255,255,.75);
    border-radius: 1.5rem;
    padding: 15px 7%;
    border: 0 none
 }
 .invalid .navbar-collapse,.invalid .navbar-collapse.show{
   display: none!important
 }
 .col-lg-10, footer .centered {
  width: 67%;
  margin: 0 auto;padding: 0}
.nav-link {
  width: 100%;
}
.col-lg-1 ul {
  margin: 0 auto;
}
.col-lg-1>h2{
  color: #fff;
  line-height: .75
}
.col-lg-1>h2,.modal h3{
      text-align: center;}
.modal .form-control {
  background: transparent;
  border-color: #676768}
.modal button{
  background: #8a00e5;
  border: #8a00e5;
  border-radius: 2rem;
}
.modal .form-group {
  width: 50%;
  float: left;
}
.modal input[type='checkbox']{
  box-shadow: 0 0 0 2px #8a00e5;
}
.modal-footer{
  width: 100%;
  border-top:0 none;
}
.modal-footer a,.modal h3{
  color: #4d217a
}
.modal-footer a:hover,.modal h3{
  font-weight: bold;
}
.modal-footer a{text-decoration: underline;}
.modal .form-control {
  width: 75%;}
@media (min-width: 576px){
  #exampleModal3 .modal-dialog {
    max-width: 21.5cm;}
.modal-dialog {
    max-width: 790px;}}

.modal div>.form-group:first-of-type {
      width: 100%;
  }
  .modal select{
    color:#000
  }
  .modal div>.form-group:first-of-type select{
    width: 20%;
    float: left!important;
}
footer .modal .float-md-right {
  width: 100%;
}
.modal-body div:nth-child(even) .form-control {
  float: right;
}
.fst-modal h3 {
  line-height: 2;
}
.scd-modal {
  margin: 100px 0;}
  .scd-modal h3 {
    line-height: 2;
}
.modal button.absolute,.modal button.open-form, .modal button.button-ifram{
  color: rgb(138 0 229);
  border: 4px solid #8a00e5;
  background: #fff;
  padding: 5px 13px;
  font-size: 20px;
}
#exampleModal2 p {
  text-align: center;
  color: rgb(77 33 122);
  font-size: 23px;
}
.open-form {
  min-width: 210px;
}
.absolute{
  position: absolute;
  margin-top:  10vh;
  width: 215px;
}
.left{
  left:-43%
}
.right{
  right: -43%
}
#exampleModal .modal-footer {
  padding: 0;
}


/* IE11 hide native button (thanks Matt!) */
#exampleModal select::-ms-expand {
display: none;
}

#exampleModal select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  -ms-word-break: normal;
  word-break: normal;
  background:url('../img/arrow.png') no-repeat 96%;
  background-size: 15px;}
  select#title {
    background-position: 92%;
}
/*****************/
#exampleModal button[type=submit] {
  min-width: 80px;
}
button:focus {
  outline: 0 none;
}
button {
  cursor: pointer;
}
.hide-frame .iframe{
  margin: 0 auto;
  text-align: center;
  width:100%;
  min-height: 525px;
  border-radius: 30px;
  border: 0 none;
  margin-bottom: 10px;
  overflow: hidden;
  height: 525px;}
.hide-frame .modal-content,.hide-frame .modal-body {
  background-color: transparent;
  padding: 0;
}
.hide-frame >div{
  text-align: center;
}

.modal.show .modal-dialog {
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;}
.modal p {
  line-height: 2.5;
}
.modal-footer .float-md-right{
  width: 100%;
}
.screen{
  width: 100%;
  right: 0;  height: 100%;background: transparent;
  z-index: 100;
  position: absolute;
}

      /**********************************/
      @media only screen and (max-width: 1400px) {
        .float-md-left>ul>li:first-child, .float-md-right>ul >li:first-of-type {
          margin-top: .9vh;
      }
      }
      @media only screen and (min-width: 1700px) {
        header {
          height: 11vh;
        }      
       
      main {
        height: 66.25vh;
    }
        .collapse-right {
          width: 8%;
          margin-right: -7%;}     
      .num6 .collapse {
        margin-top: 2%;
    }
      .num5 .collapse {
        margin-top: 8%;
    }
  .num4 .collapse {
    margin-top: 10%;
}
.num3 .collapse {
  margin-top: 15%;
}
.num1 .collapse {
  margin-top: 21%;
}

        main .float-md-right ul,main .float-md-left ul{
              height: 65.5vh!important}
              .place {
                font-size: 17px;
                text-align: center;
              }
              .sols>ul>li, .drive>ul>li {
                padding-top: 20px}
                .collapse-left {
                  top: -20px}
                  .selected-c .collapse-left:before, .selected-c-ag .collapse-left:before {
                    top: 0;}
                    li:hover .collapse-right:after {
                      width: 57px;
                      margin-left: -55px;
                  }
      }
    
      @media only screen and (max-width: 785px) {
        header .float-md-left{
    position: relative;
  }
}
@media (min-width: 992px){

.col-lg-11 {
    max-width: 100%;
}

}
@media only screen and (min-device-width: 280px) and (max-device-width: 812px) and (orientation:landscape){
  .ratio{
    height: 0;
  }
  html, body, :fullscreen, .ratio{
    background:  url(../img/Mobile_Screen_quer.png) center top;
    background-size: 100%;
}
  }
@media only screen and (min-device-width: 280px) and (max-device-width: 767px) and (orientation:portrait){
.ratio{
  height: 0;
}
html, body, :fullscreen, .ratio{
  background:  url(../img/Mobile_Screen_hochkant.png) center top;
  background-size: 100%;
}
}

  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait){
    .safari .circle img, .safari .circle2, .safari .iconic,.circle img, .circle2, .iconic,.circle.demo {
      width: 85px!important;
      height: 85px!important;
  }
    footer .float-md-left div {
    margin-top: 10px!important
}
.safari main .centered .col-lg-11,.centered .col-lg-11 {
  max-height: 293px!important;
  min-height: auto!important;} 
  main .centered .col-lg-11 {
    background-size: contain
  }
  .chart-ul li {
    height: 8vh;}
    footer ,footer .float-md-left div{
      height: auto;}
      footer {
        padding-bottom: 35px!important;
    }
    #exampleModal3 button.close {
      margin-right: 18px;
  }
    footer .float-md-left div {
      padding: 0 10px;}
      .modal-btn {
        line-height: 3;
        margin-top: 32px!important;
        font-size: 17px;
        min-height: auto;
    }
  main {
    height: 29vh!important;
}
.float-md-left>ul>li, .float-md-right>ul>li {
  min-height: 129px!important;}
  .circle, .circle3 {
    font-size: 18px!important;
}
main .float-md-right ul, main .float-md-left ul {
  height: 26vh!important;}
  }

@media only screen and (min-width: 1024px) {
  main .float-md-right ul,main .float-md-left ul{
        height: 63.25vh}
  .dropdown:hover .dropdown-content {display: block;}
}
@media only screen and (max-width: 1024px) {
  button.close {
    right: 0px;}
    .left {
      left: 0;
  }
  .right {
    right: 0;
}
}
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape){

  .safari .ratio-16x9,.ratio-16x9 {
    background-color: #4d217a!important;          
    background-image:radial-gradient(circle at 123% 26%, #4d217a 0%,#1B1534 30%)!important;
}
footer .float-md-left {
  padding: 0 15px;
}
  .modal-btn {
    margin-top: 7.5vh!important;}
  .circle, .circle3 {
    padding: 0 5px;}
  .safari .circle img,.safari .circle2, .safari .iconic,
  .circle img, .circle2, .iconic ,.circle.demo {
    width: 85px!important;
    height: 85px!important;
}
.float-md-right .circle {
 margin-top: -10px;
}
.float-md-left>ul>li:first-child, .float-md-right>ul >li:first-of-type {
  margin-top: 1vh;
}
  main .float-md-right ul,main .float-md-left ul{
       height: 67vh;
      max-height:511px;}
      .safari main .centered .col-lg-11,.centered .col-lg-11 {
        min-height: 535px!important;    }
  footer .float-md-left div{
    height: auto;
    margin-top: 46px;
  }
  .chart-ul li {
    height: 90px;}
    main {
      height: 52.5vh;}
  
    header {
      max-height: 90px; 
      padding: 15px 0 0 0

  }
  footer {
    max-height: 130px;
  }
    .col-lg-1,footer .float-md-left,footer .float-md-right {
       min-width: auto; 
       max-width: max-content; 
  }
.col-lg-9 {
  max-width: 63%;
  right: -4%;
}
.demo li:hover .navbar-collapse,.demo li .navbar-collapse {
  margin-left: -300%;}
.navbar-collapse {
  margin-top: 4%;
  width: 300%}
  .demo li .navbar-collapse {
    width: auto;
}
footer .btn{
  margin-left: -10%
}
}

@media (max-width: 1165px){
header h1{
  font-size: 30px;
}
}
@media (max-width: 935px){
  header .float-md-left {
    max-width: 30%;
    margin-top: -12px;
  }
  .drive li:hover .circle3 {
    background-size: 50%;
}
}

:-webkit-full-screen,:fullscreen {
	position: fixed;
	width: 100%;
	top: 0;
}

:-ms-fullscreen,:fullscreen {
  width: auto;
  height: auto;
  margin: auto;
}

#toggle{
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
}
.unshown{
  display: none;
}
.header {
  background-color: transparent!important;
}
.modal .content{height: 526px}
.modal .screen2.screenfst {
  padding-left: 0;
}
@media (min-width: 800px){
  .modal .screen2.screenfst {
     height: auto
}}
@media (min-width: 1025px){
h3,h4,h2,h1,h5,h6 {
    max-width: 100%!important
}
}
a span#sp_bussinessCaseName,a:hover span#sp_bussinessCaseName {
  border-bottom: 0 none!important;
}
/*
header,footer{

         background-color: #4d217a;          
}
main{
  background-color: #4d217a;          

  background-image:radial-gradient(circle at 92% 26%, #4d217a 0%,#1B1534 30%);
}
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{main {
  height: 100%;
  float: left;
  }
}

*/
#exampleModal3 button.close {
  margin-top: -20px;
  margin-right: -4px;
}
/*************************/
.dc-container .content.main {
  background: transparent;
}
.selectric-label{
  width: 100%;
  border: 0.07142857142857142857142857142857em solid #5D596E!important;
  border-radius: 5px;
  color: #1B1534;
  position: relative;
  outline: 0;
  outline-offset: 0;
  box-sizing: border-box;
  min-height: 26px;
}
.datacapture-form:hover label.checkbox-text.toggle-active:before,
.datacapture-form:hover label.checkbox-text:before {
  border-color: #8A00E5!important;
}
.datacapture-form label.checkbox-text.toggle-active:before,
.datacapture-form label.checkbox-text:before {
  border-color: #5D596E!important;
  border-radius: 5px;
}
.dc-container select,.dc-container input,.dc-container select
{
  line-height: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.78571428571428571428571428571429em;
  padding-bottom: 0.78571428571428571428571428571429em;
  width: 100%;
  border: 0.07142857142857142857142857142857em solid #5D596E;
  border-radius: 5px;
  color: #1B1534;
  position: relative;
  outline: 0;
  outline-offset: 0;
  box-sizing: border-box;
  -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    padding: 1px 2px;
    border-image: initial;
    font-family: "Siemens Sans",Arial,sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-height: 26px;
}
.datacapture-form label.checkbox-text a {
  color: #000;
}
.checkboxgroup.left {
  left: auto;
}
.datacapture-form label.checkbox-text.toggle-active:after {
  content: ' ';
  border-left: 0.21428571428571428571428571428571em solid #8A00E5!important;
  border-bottom: 0.21428571428571428571428571428571em solid #8A00E5!important;
}
.datacapture-form .error p.error-label{
  color: red;
  background-color: transparent;
  font-size: 12px !important;
    padding-left: 20px !important;
}
.input-div   {
  padding-bottom: 1.4285714285714285714285714285714em;
}
.dc-container .row {
  margin-right: -15px;
  margin-left: -15px;
  font-size: 18px;
  max-width: none;
  width: 150%;
}
.dc-container textarea{
  width: 100%;
border-radius: 5px;
    border-color: #5D596E !important;
    color: #1B1534 !important;
    height: 7.1428571428571428571428571428571em;
    resize: none;
    display: block;
}
 .input-div input:hover, .input-div textarea:hover, span.selectric-label:hover,.input-div input:focus, .input-div textarea:focus, span.selectric-label:focus {
  border-color: #8A00E5 !important;
}
.submit-wrapper.col-lg-3.col-md-12 {
  margin-left: -227px;
}
.nts-button-container.col-lg-12{
  background: #8A00E5;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 25px;
  width: 120px;
  outline: none;
  display: table;
  color: #fff;
  line-height: 45px;
  font-weight: 700;
  font-size: 22px;
}
.datacapture-form .input-div.error input, .datacapture-form .input-div.error textarea, .datacapture-form .input-div.error span.selectric-label, .datacapture-form .input-div.error::after {
  color: #dc0000!important;
}

.datacapture-form .input-div.error input, .datacapture-form .input-div.error textarea, .datacapture-form .input-div.error span.selectric-label {
  border-color: #dc0000!important;
}
.nts-button.B.generic-button.submit.pull-right {
  align-self: flex-end;
  margin-bottom: 20px;
}
.selectric-scroll li {
  width: 100%;
}
.safari .ratio-16x9       
{ background: url(../img/color.png)}

 .safari main .centered .col-lg-11{
    min-height: 500px;
  }
  .safari .col-lg-10,.safari footer .centered {
    width: 66.5%;}
  .safari .circle img,.safari .circle2,.safari .iconic {
    width: 140px;
    height: 140px;}
    .disEnergy .datacapture-form label.checkbox-text:before {
      margin-left: -38px!important;
  }
  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation:portrait){
    .safari .circle img, .safari .circle2, .safari .iconic {
      width: 100px!important;
      height: 100px!important;
  }
  main .centered .col-lg-11 {
    background-size: cover;
  }
  .safari main .centered .col-lg-11, .centered .col-lg-11 {
    max-height: 100%!important;}
  }
  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation:landscape){
    .safari li:first-child .circle img, .safari li:first-child .circle2, .safari .iconic {
      margin-top: 0;
    }
    .safari .circle img, .safari .circle2, .safari .iconic {
      width: 100px!important;
      height: 100px!important;
      margin: 15px 35px 0 35px;
  }
}
.safari .selected-c .collapse-left:before,.safari .selected-c-ag .collapse-left:before {
  border-left: 4px solid #3c1d62;
}
.safari #navbarContent0.show .arrow,.safari .arrow.down {
  margin-top: -16px;
}
.safari .arrow {
  margin-top: -7px;}