/*Sturcture for media queries
-----------------------------
@media (max-width: 640px) {}
@media (min-width: 641px) and (max-width: 768px) {}
@media (min-width: 769px) and (max-width: 992px) {}
@media (min-width: 993px) {}
*/

/*********************************************************
  STYLE RESETS
*********************************************************/
/* style fix for FF */
@-moz-document url-prefix() {
    .input-sm select  {
      padding-top: 0px !important;
    }
    select {
      -moz-appearance: none;
      font-size: 14px!important;
      /* margin: 0; */
      padding-top: 0px !important;
      background: transparent;
    }
    select:-moz-focusring { color: transparent;
      text-shadow: 0 0 0 #000; }
    option {
      -moz-appearance: none;
      font-weight: 400!important;
      font-size: 14px!important;
    }
  }
  a {
    color: rgb(47, 116, 153);
    -webkit-transition: all 0.25s ease 0s;
      transition: all 0.25s ease 0s;
  }
  a:hover, a:focus {
      color: #005885;
      text-decoration: none;
  }
  h1, h2, h3, h4, h5 {
    font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-weight: 300;
  }
  h1 {
    font-weight: 200;
  }
  a:focus {
      outline: none;
  }
  .btn:focus, .btn:active:focus, .btn.active:focus {
      outline: none;
  }
  ._leadWidgetHeaderIntro .form-control {
    border-radius: 25px;
    border: 1px solid #dcdada;
    background: #fff;
    }

  ._leadWidgetHeaderIntro .form-control:focus {
    border: 2px solid #6d6d6d;
    outline: 0 none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .form-control {
    border-radius: 0px;
    border: 0px solid #dcdada;
    background: #fff;
  }
  input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
      outline: 0 none;
  }
  .form-control[disabled],
  .form-control[readonly],
  fieldset[disabled] .form-control {
      background-color: #dddddd !important;
      cursor: text;
      opacity: 1;
  }
  label.error {
    color: #f25454;
    display: block;
    font-size: 14px;
    font-weight: 300;
    margin-top: -15px;
  }
  .btn {
    border-radius: 3px;
    font-weight: 300;
    border: 0 none;
    padding: 6px 20px;
    -webkit-transition: all 0.25s ease 0s;
      transition: all 0.25s ease 0s;
  }
  .btn-carouselBack {
    margin-left: 4px;
    text-align: left;
  }
  .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 50px;
  }
  .btn-circle-small {
    font-size: 22px;
    background-color: #343c54;
    padding-top: 3px;
    padding-left: 1px;
    width: 40px;
    margin-left: 2px;
    margin-right: 2px;
    height: 40px
  }
  .btn-circle-small:hover {
    background-color: #d4d4d4
  }
  ._leadWidgetHeaderIntro .btn-hero {
    font-size: 13px;
  }
  @media (min-width: 641px){
    ._leadWidgetHeaderIntro .btn-hero {
      font-size: 16px;
    }
  }
  .btn-hero:hover {
      border-color: rgba(222, 222, 222, .54);
  }
  .btn-hero.active {
    background-color: rgba(222, 222, 222, 0.84);
    color: #515165;
    border: 2px solid transparent;
  }
.label-text {
  color: #919193;
  margin-top: 13px;
  padding-left: 0px;
}
 .active > .labeltext  {
    border-bottom: 1.5px solid #919193;
  }
  .ProductNoneContentSwitch .active > .labeltext  {
    border-bottom: none;
  }
  .btn-lg {
    font-size: 16px;
    padding: 12px 12px;
  }
  .btn-sm {
    padding: 6px 20px;
  }
  .btn-white.btn-lg {
    padding: 12px 30px;
  }
  .btn-white {
    border: 1px solid rgba(255, 255, 255, 0.878);
    color: #838282;
  }
  .btn-default.active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .btn-anrede{
    max-width: 130px;
  }
  .btn-primaryBright {
    background: #1db5ff;
  }
  .btn-round-lg{
  border-radius: 122.5px;
  }
  .btn-round{
  border-radius: 122px;
  }
  .btn-round-sm{
  border-radius: 115px;
  }
  .btn-round-xs{
  border-radius: 111px;
  padding-left: 10px;
  padding-right: 10px;
  }
  .btn-success {
    background: #00BF6F;
    color: #ffffff;
  }
  .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    background: #13945a !important;
  }
  .btn-teal {
    background: #1abc9c;
    color: #ffffff;
  }
  .btn-danger {
    background: #f25454;
    color: #fff;
  }
  .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    background: #d64a4a;
  }
  #_leadWidget .btn-info{
    background-color: #4f6971;
  }
  #_leadWidget .btn-info:hover{
    background-color: #597b85;
  }
  .btn-warning {
    background: #ea8825;
    color: #ffffff;
  }
  .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    background: #ce7721;
  }
  .alert {
    border-radius: 3px;
  }
  .modal {
    z-index: 10000;
  }
  .modal-header {
    background: #2f7499;
    color: #ffff;
  }
  .table-bottom-radius {
      border-collapse: separate;
  }
  .table-bottom-radius {
      border: solid #dddddd 1px;
      border-radius: 0 0 3px 3px;
      border-left:0px;
      border-top-width: 0;
  }
  .table-bottom-radius td, .table-curved th {
      border-left: 1px solid #dddddd;
      border-top: 1px solid #dddddd;
  }
  .table-bottom-radius tr:last-child td:first-child {
      border-radius: 0 0 0 3px;
  }
  .table-bottom-radius tr:last-child td:last-child {
      border-radius: 0 0 3px 0;
  }
  .table-curved {
      border-collapse: separate;
  }
  .table-curved {
      border: solid #ccc 1px;
      border-radius: 6px;
      border-left:0px;
  }
  .table-curved td, .table-curved th {
      border-left: 1px solid #ccc;
      border-top: 1px solid #ccc;
  }
  .table-curved th {
      border-top: none;
  }
  .table-curved th:first-child {
      border-radius: 3px 0 0 0;
  }
  .table-curved th:last-child {
      border-radius: 0 3px 0 0;
  }
  .table-curved th:only-child{
      border-radius: 3px 3px 0 0;
  }
  .table-curved tr:last-child td:first-child {
      border-radius: 0 0 0 3px;
  }
  .table-curved tr:last-child td:last-child {
      border-radius: 0 0 3px 0;
  }
  .ui-tooltip a{
    color: rgb(47, 116, 153) !important;
    -webkit-transition: all 0.25s ease 0s;
      transition: all 0.25s ease 0s;
  }
  .ui-tooltip a:hover, .ui-tooltip a:focus {
    color: #005885 !important;
    text-decoration: none;
  }
  .progress-bar {
    -moz-transition: none;
      -webkit-transition: none;
      transition: none;
  }
  /*********************************************************
    GENERAL
  *********************************************************/
  :root {
    --pink: #a42fc1;
    --defaultBlue: #2f7499;
  }
  .blue {
    color: #3479bc;
  }
  .pink {
    color: var(--pink);
  }
  .defaultColorBlue {
    color: var(--defaultBlue);
  }
  .defaultBgBlue {
    background-color: var(--defaultBlue);
  }
  .inline {
    display: inline;
  }
  .minHeight20 {
    min-height: 20px;
  }
  .autoHyp {
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
  }
  .noHyp {
    -moz-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none; 
  }
  /*********************************************************
    STYLES
  *********************************************************/
  body {
    /* Schrift raus? */
    font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
    color: #565656;
    max-width: 100%;
    overflow-x: hidden;
  }
  html.preview,
  body.preview {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  html.preview {
    padding-top: 60px;
  }
  h1 {
    margin-top: 0px;
  }
  @media(max-width:480px) {
    h1 {
      font-size: 30px
    }
    h2 {
      font-size: 25px
    }
  }
  @media(min-width:992px){
    body {
      min-width: 970px;
    }
    .container {
      max-width: none !important;
      width: 992px;
    }
  }
  blockquote {
      font-size: 16px;
      padding: 0px 0px 0px 28px;
      margin: 0px 0px 16px 26px;
  }
  blockquote footer, blockquote small, blockquote .small {
      background-color: transparent;
  }
  pre {
      font-size: 16px;
  }
  code {
      font-family: 'AvenirNextLTPro-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px;
      color: #565656;
  }
  code .highlight {
      font-weight: bold;
  }
  .fa-colorgrey {
      color: #EEF1F2;
  }
  .fa-small {
      font-size: 20px
  }
  .ui-widget-content {
      border: 1px solid #A6C9E2;
      overflow: hidden;
  }
  .ui-autocomplete {
      border-top: 0px none;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      position: absolute;
      z-index: 10000 !important;
  }
  .popover {
      /* z-index: 100000; */
      border-color: transparent;
      border-style: solid;
      padding: 0px;
      max-width: 100%;
  }
  .popover-content {
      color: #ffffff !important;
      font-size: 14px;
      line-height: 1.4;
      background-color: #f53737;
      font-weight: 350;
  }
  .popover a {
    color: rgb(11, 40, 57);
  } 
  .red.popover>.arrow:after{
    border-bottom-color: #f53737;
    border-top-color: #f53737;
  }
  .popover-hint {
    color: #ffffff;
    background-color: #00BF6F;
  }
  .popover-hint.popover>.arrow:after{
    border-bottom-color: #00BF6F;
    border-top-color: #00BF6F;
  }
  .popover-content-colored{
    font-size: 15px;
    line-height: 1.4;
    color: rgb(40, 40, 40);
    font-weight: 350;
  }
  .fa-help {
      float: right;
      margin-right: -26px;
      margin-top: -28px;
  }
  .fa-stack-xs {
      font-size: 0.75em;
  }
  .standard-button {
      padding: 17px 50px;
      text-transform: uppercase;
      background-color: #3686BE;
      color: #FFF;
      letter-spacing: 1.5px;
      border-radius: 3px;
      transition: all 0.2s ease-in-out 0s;
      text-decoration: none;
      font-weight: 600;
      display: inline-block;
      text-align: center;
  }
  #home {
      padding-bottom: 50px;
  }
  ._leadWidgetOverlay ul > li {
    padding-bottom: 10px;
  }
  /*********************************************************
    _general
  *********************************************************/
  #loadAnimation {
    border: 10px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 1.5s linear infinite; /* Safari */
    animation: spin 1.5s linear infinite;
    position: fixed; /* Sit on top of the page content */
    display: none;
    top: 25%; 
    left: calc(50% - 60px);
    bottom: 50%;
    /* background-color: rgba(0,0,0,0.2); Black background with opacity */
    z-index: 20000; /* Specify a stack order in case you're using a different order for other elements */
  }
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .video-label {
    font-size: 11px;
    position: relative;
    top: -6px;
    color: #2f7499;
  }
  /*********************************************************
    _leadWidget PANEL
  *********************************************************/
  .ansprechpartner {
      color: #fafafa;
      font-size: 1.2em;
      text-decoration: underline;
    }
  .ansprechpartnerWrapper {
      /* color: #fafafa;
      margin-top: 8px;*/
      font-size: 0.85em;
      margin-top: 30px;
      margin-bottom: 0px;
  }
  .ansprechpartnerWrapper .jobtitle a {
    color: #c0e2ec;
  }
  ._leadWidgetHeader input[type="radio"] {
      opacity: 0;
      height: 0px;
      width: 0px;
  }
  .btn.outline {
    background: none;
  }
  .btn-heroProductSelection {
    height: 150px;
    width: 150px;
    text-align: center;
    background-color: #ff5970;
  }
  .heroProductSelection {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
  }
  .btn-heroProductSelection .labeltext{
    margin: auto;
  }
  #Ergebnis {
    text-align: left;
    hyphens: auto;
  }
  #Ergebnistabelle {
    background-color: #fff;
  }
  .small {
    font-size: 0.8em;
  }
  .nopadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .nopadding-right {
    padding-right: 0 !important;
  }
  .nomarginbottom {
    margin-bottom: 0px;
  }
  .nopaddingTD {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .nopaddingL {
    padding-left: 0 !important;
  }
  .nopaddingR {
    padding-right: 0 !important;
  }
  .nomargin {
    margin-top: 0 !important;
    margin-bottom: 0px!important;
  }
  .smallpadding {
    padding-left: 2px;
    padding-right: 2px;
  }
  .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
    color: #dd3334;
  }
  ._leadWidgetHeader {
    text-align: center;
    /* papam */
    position: relative;
    text-align: center;
    vertical-align: middle;
    text-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 0px;
    overflow: hidden;
  }
  ._leadWidgetHeader h1 {
    margin: 17px 0px 13px;
  }
  ._leadWidgetHeader .ProductNoneSelected h1 {
    font-size: 25px;
  }
  .row .ProductNoneSelected {
    margin-bottom: 10px;
  }
  ._leadWidgetHeader h2, h3 {
    padding: 9px 0px 9px;
    margin: 0px;
  }
  ._leadWidgetHeader p {
    font-size: 15px;
    padding: 5px 2px 5px;
    margin: 0px;
  }
  ._leadWidgetHeader .subtext a {
    font-weight: bold;
  }
  ._leadWidgetHeader .subtext {
    margin-top: 0;
    font-size: 13px;/
    text-align: center;
    line-height: 1.2;
  }
  @media (min-width: 640px) {
    ._leadWidgetHeader .subtext {
      margin-top: 0;
      /* 20px; */
      font-size: 14px;
      text-align: center;
      line-height: 1.5;
    }
  }
   ._leadWidgetHeader .ProductNoneSelected h1 {
    text-indent: -0.7em;
    margin: auto 0;
   }

  /*///////////////////////////////////////////////////////*/
  /* 
  ////////////////////////////////////////////////////////*/
  @media (max-width: 640px) {
    ._leadWidgetHeader {
      padding: 5vh 0 5px;
    }
    ._leadWidgetSpaceNoneContent{
      padding: 15vh 0 100px;
    }
    .row .ProductNoneSelected {
      margin-bottom: 30px;
    }
    ._leadWidgetHeader h1 {
      font-size: 26px;
    }
    ._leadWidgetHeader .ProductNoneSelected h1 {
      font-size: 24px;
    }
    ._leadWidgetHeader h2,
    ._leadWidgetHeader h3 {
      font-size: 20px;
    }
    ._leadWidgetHeader p {
      font-size: 15px;
    }
    .btn-heroProductSelection {
      height: 100px;
      width: 100px;
    }
    .heroProductSelection {
      height: 100px;
    }
  }
  @media (min-width: 641px) and (max-width: 768px) {
    ._leadWidgetHeader {
      padding: 8vh 0 80px;
    }
    ._leadWidgetHeader h1 {
      font-size: 32px;
    }
    ._leadWidgetHeader h2,
    ._leadWidgetHeader h3 {
      font-size: 20px;
      padding: 10px 0px 10px;
    }
  }
  @media (min-width: 769px) and (max-width: 992px) {
    ._leadWidgetHeader {
      padding: 8vh 0 2px;
    }
    ._leadWidgetHeader h1 {
      font-size: 40px;
    }
    ._leadWidgetHeader .ProductNoneSelected h1 {
      font-size: 30px;
    }
    ._leadWidgetHeader h2,
    ._leadWidgetHeader h3 {
      font-size: 23px;
    }
  }
  @media (min-width: 993px) {
    ._leadWidgetHeader {
      padding: 10vh 0 0px; /*280*/
    }
    ._leadWidgetHeader h1 {
      margin-top: 13px;
      margin-bottom: 15px;
      font-size: 48px;
    }
    ._leadWidgetHeader .ProductNoneSelected h1 {
      font-size: 30px;
    }
    ._leadWidgetHeader h2,
    ._leadWidgetHeader h3 {
      font-size: 23px;
    }
    ._leadWidgetHeader p {
      font-size: 17px;
      /* padding: 15px 2px; */
    }
  }
  ._leadWidgetHoverMove:hover {
    /*background-color: #bcbebf;*/
    margin-top: -2px
  }
  
  .ProductBulletHeight{
    min-height: 10px;
  }
  @media (min-width: 641px) {
    .ProductBulletHeight{
    min-height: 121px;
    }
  }
  ._leadWidgetSpace{
    padding-top: 25px;
  }
  @media (min-width: 641px){
    ._leadWidgetSpace{
      padding-top: 5px;
      padding-bottom: 0px;
    }
  }
  .overlayBright {
    overflow: hidden;
    background:rgba(48, 52, 60, 0.95);
  }
  .overlayDark {
    padding-top: 25px;
    background: rgba(20, 20, 20, .5);
  }
  .progress {
    height: 7px;
    background: rgba(222, 222, 222, 0.3);
  }
  .progress-hero {
    background: var(--primary-bg-color);
  }
  .progress-hero-done {
    background: #00BF6F;
  }
  ._leadWidgetOverlay {
    overflow: hidden;
  }
  ._leadWidgetOverlay .immobilientyp img {
    margin-bottom: 6px;
    /* margin-left: 2px; */
  }
  ._leadWidgetOverlay h2{
    font-size: 28px;
  }
  ._leadWidgetOverlay p.contactDataDesc {
    margin: 0px !important;
    padding:  0px;
    line-height: 1em;
  }
  ._leadWidgetOverlay p {
    margin: 0 0 5px !important;
  }
  @media(max-width:480px) {
    ._leadWidgetOverlay {
      margin-left: 2px;
      margin-right: 2px;
      padding-top: 20px;
    }
  }
  ._leadWidgetOverlay .immobilientyp {
    min-height: 380px;
  }
  ._leadWidgetOverlay .immobiliendetails {
    line-height: 1.4em;
    min-height: 380px;
    padding-right: 25px;
  }
  @media(max-width:768px) {
    ._leadWidgetOverlay {
      margin-left: 5px;
      /*padding-top: 0px;*/
      margin-right: 5px;
    }
  }
  ._leadWidgetHeaderIntro {
    padding: 0px 5px 10px 5px;
  }
  ._leadWidgetOverlayBtn {
      width: 190px;
      margin-top: 10px;
      margin-bottom: 15px;
  }
  @media (min-width: 993px){
    ._leadWidgetOverlayBtn {
      width: 200px;
    }
  }
  ._leadWidgetOverlayMultiActionPadding {
    padding: 3px;
  }
  @media(max-width:480px) {
    .HideOnXS {
      display: none;
      visibility: hidden;
      height: 0px !important;
    }
    ._leadWidgetOverlayActionEstimateHausWohnungHeight {
    height: 160px;
    }
    ._leadWidgetOverlayActionEstimateHaus {
    max-height: 160px;
    }
    ._leadWidgetOverlayActionEstimateWohnung {
    max-height: 160px;
    }
  }
  @media(max-width:991px) {
    .HideOnSM {
      visibility: hidden;
      height: 0px !important;
      min-height: 0px !important;
      padding: 0px !important;
      margin: 0px !important;
    }
  }
  @media(min-width:991px) {
    .HideFromSM {
      visibility: hidden;
      height: 0px !important;
      min-height: 0px !important;
      padding: 0px !important;
      margin: 0px !important;
    }
  }
  @media(min-width:992px) {
    .HideOnMD {
      visibility: hidden;
      height: 0px !important;
      min-height: 0px !important;
      padding: 0px !important;
      margin: 0px !important;
    }
  }
  @media(min-width:768px) and (max-width: 992px) {
    ._leadWidgetOverlayActionEstimateHausWohnungHeight {
    height: 435px;
    }
    ._leadWidgetOverlayActionEstimateHaus {
    height: 320px;
    }
    ._leadWidgetOverlayActionEstimateWohnung {
    height: 320px;
    }
  }
  @media(min-width:993px) {
    ._leadWidgetOverlayActionEstimateHausWohnungHeight {
    height: 390px;
    }
    ._leadWidgetOverlayActionEstimateHaus {
    height: 264px;
    }
    ._leadWidgetOverlayActionEstimateWohnung {
    height: 289px;
    }
  }
  ._leadWidgetHeader .btnGroup .btn {
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    box-shadow: none;
    color: #ffffff;
    /* font-family: 'AvenirNextLTPro-Regular','Helvetica Neue',Helvetica,Arial,sans-serif; */
    font-size: 16px;
    font-weight: 700;
    margin: 5px 10px;
    padding: 14px 30px;
    /*ext-transform: uppercase;*/
  }
  ._leadWidgetHeader .btnGroup .btn:focus,
  ._leadWidgetHeader .btnGroup .btn:hover {
    border-color: #fff;
  }
  [hidden] {
    display: none !important;
  }
  .is-not-showing {
      display: none;
      content: '';
  }
  .ObjectAddressStartBtn {
    width: 335px;
    margin-top: 15px;
  }
  .ObjectAddressInput {
    position: relative;
    margin-top: 20px;
  }
  .triangle .active:before{
      content: '';
      position: absolute;
      left: 42%;
      top: 50%;
      width: 30%;
      height: 10px;
      border-left: 2px solid transparent;
      border-right: 1px solid transparent;
      border-top: 1px solid transparent;
      border-bottom: 1px solid #FFFFFF;
      margin-bottom: 1px;
      margin-top: 1px;
      clear: both;
      z-index: 9999;
      /*start animation part*/
      -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
      /* -webkit-animation-duration: 1.5s; */
      -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
      -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
      -webkit-animation-timing-function: ease;
      animation-name: example;
      animation-timing-function: cubic-bezier(0.15,-0.01, 0.58, 1);
      animation-timing-function: ease;
      animation-duration: 2.5s;
      animation-iteration-count: infinite;
  }
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes example {
      0%   {left:25%;}
      50%  {left:45%;}
      100% {left:25%;}
  }
  
  /* Standard syntax */
  @keyframes example {
      0%   {left:25%;}
      50%  {left:45%;}
      100% {left:25%;}
  }
  /* triangel 100 70 100 */
  
  
  /*********************************************************
  
  /*********************************************************
    _homeBenefits PANEL
  *********************************************************/
  .benefit {
    overflow: hidden;
    padding-left: 0px;
  }
  .benefit p{
    font-weight: 200px;
  }
  .benefitSeller {
    height: 35vh;
    color: #eeeeee;
    background: #325468; 
    padding-left: 70px;
    padding-right: 60px;
    padding-bottom: 15px;
  }
  .benefitSeller a {
    text-decoration: underline;
    color: #eeeeee;
    padding-bottom: 10px;
  }
  .benefitSeller a:hover{
    color: #cccccc;
  }
  .benefitEstimate {
    height: 35vh;
    color: #325468; 
    background: #f7f7f7;
    padding-right: 50px;
    padding-left: 60px;
    padding-bottom: 15px;
  }
  .benefitEstimate a{
    text-decoration: underline;
    color: #2f7499;
    padding-bottom: 10px;
  }
  .benefitEstimate a:hover{
    color: #008cd0;
  }
  .benefitCMA {
    height: 35vh;
    color: #eeeeee;
    background: #3c5a67;
    padding-right: 50px;
    padding-left: 60px;
    padding-bottom: 15px;
  }
  .benefitCMA a{
    text-decoration: underline;
    color: #ebebeb;
    padding-bottom: 10px;
  }
  .benefitCMA a:hover{
    color: #aaaaaa;
  }
  .benefitCMAImg {
    background: #4c7688;
    padding: 20px 20px 30px 100px; 
  }
  .benefitCMAImg img {
    border: 1px solid #4c7688;
    top: 25px;
    left: 25px;
  }
  .benefitCMAImg .first {
    z-index: 4;
  }
  .benefitCMAImg .second {
    z-index: 3;
  }
  .benefitCMAImg .third {
    z-index: 2;
  }
  .benefitCMAImg .fourth {
    z-index: 1;
  }
  @media (min-width: 451px) {
    .benefitCMAImg {
      padding: 20 px;
    }
  }
  @media (max-width: 767px) {
    .benefit {
      height: auto;
      min-height: 320px;
      min-width: 100vw;
    }
  }
  @media (min-width: 768px) and (max-width: 1150px) {
    .benefit {
      height: calc(870px - 35vw);
      min-height: 180px;
      max-height: 525px;
    }
    .benefitCMAImg{
      padding-left: 50px;
      padding-top: 50px;
    }
  
    .benefitCMAImg img {
      max-width: calc(100vw / 5 + 20px);
    }
  }
  @media (min-width: 1151px) {
    .benefit {
      height: 415px;
    }
    .benefitCMAImg img {
      max-height: 300px;
    }
  }
 
  /*********************************************************
    _homeTeam PANEL
  *********************************************************/
  #team {
    padding-top: 20px;
    padding-bottom: 50px;
    background-color:#3d4858;
    color: #cccccc;
    /* #6d9db712; */
  }
  #team h2.home {
    padding-bottom: 50px;
  }
  .trustImg {
    height: 110px;
  }
  .teammemberImg {
    height: 150px;
  }
  .teammemberImg img, .trustImg img {
    max-height: 100%;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    filter: gray;
    -webkit-filter: grayscale(1);
  }
  .teammember {
    color: #7eaec7;
    margin-top: 8px;
    font-size: 1.08em;
  }
  .jobtitle {
    padding-bottom: 16px;
    font-style: italic;
  }

  /*********************************************************
    preisentwicklungs PANEL
  *********************************************************/
  .preisentwicklung {
    font-size: 1.5rem;
  }
  /*********************************************************
    _homeOpenStreetMap PANEL
  *********************************************************/
  .mapText h2{
    font-size: 24px;
    text-decoration: underline;
  }
  #homeMap h2.home {
    padding-bottom: 10px;
  }
  .mapText h3{
    color: #434b5c;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 18px;
    padding: 0px;
    line-height: 1;
  }
  #homeMap h4{
    /* font-size: 16px; */
    margin-bottom: 5px;
  }
  .mapText p, #homeMap p{
    padding-top: 10px;
    font-size: 0.9em;
  }
  #homeMap {
    /* padding-top: 15px; */
    padding-bottom: 50px;
  }
  /*********************************************************
    ONLINE RECHNER PAGE
  *********************************************************/
  .online-rechner-example img{
    height: 170px;
    /* border: 1px solid; */
    border-color: #fff;
  }  
  .login-example img{
    height: 150px;
    /* border: 1px solid; */
    border-color: #fff;
  }
  @media(max-width:768px) {
    .login-example img{
      height: 23.4vw; 
      /* 75px; */
      /* border: 1px solid; */
      border-color: #fff;
    }
  }
  
  /* ==========================================================================
     ANIMATION
     ========================================================================== */
  
  /* Hide element before animation */
  /*.transparent{
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity = 0 );
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 0);
      filter: alpha(opacity = 0);
      -moz-opacity: 0;
      -khtml-opacity: 0;
  }*/
  /* Show element after animation */
  /*.opaque{
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity = 100 );
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 100);
      filter: alpha(opacity = 100);
      -moz-opacity: 1;
      -khtml-opacity: 1;
  }*/
  
  
  .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}
  @-webkit-keyframes flipInX{
      0%{
          -webkit-transform: perspective(400px) rotateX(90deg);
          opacity: 0;
      } 40%{
          -webkit-transform: perspective(400px) rotateX(-10deg);
      }
  
      70%{
          -webkit-transform: perspective(400px) rotateX(10deg);
      }
  
      100%{
          -webkit-transform: perspective(400px) rotateX(0deg);
          opacity: 1;
      }
  }
  @-moz-keyframes flipInX{
      0%{
          -moz-transform: perspective(400px) rotateX(90deg);
          opacity: 0;
      }
  
      40%{
          -moz-transform: perspective(400px) rotateX(-10deg);
      }
  
      70%{
          -moz-transform: perspective(400px) rotateX(10deg);
      }
  
      100%{
          -moz-transform: perspective(400px) rotateX(0deg);
          opacity: 1;
      }
  }
  @-o-keyframes flipInX{
      0%{
          -o-transform: perspective(400px) rotateX(90deg);
          opacity: 0;
      }
  
      40%{
          -o-transform: perspective(400px) rotateX(-10deg);
      }
  
      70%{
          -o-transform: perspective(400px) rotateX(10deg);
      }
  
      100%{
          -o-transform: perspective(400px) rotateX(0deg);
          opacity: 1;
      }
  }
  @keyframes flipInX{
      0%{
          transform: perspective(400px) rotateX(90deg);
          opacity: 0;
      }
  
      40%{
          transform: perspective(400px) rotateX(-10deg);
      }
  
      70%{
          transform: perspective(400px) rotateX(10deg);
      }
  
      100%{
          transform: perspective(400px) rotateX(0deg);
          opacity: 1;
      }
  }
  .flipInX{
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
  }
  @-webkit-keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
  }
  
  @-moz-keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
  }
  
  @-o-keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
  }
  
  @keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
  }
  
  .fadeIn{
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  @-webkit-keyframes fadeInUp{
    0%{
      opacity: 0;
      -webkit-transform: translateY(20px);
    }
  
    100%{
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }
  @-moz-keyframes fadeInUp{
    0%{
      opacity: 0;
      -moz-transform: translateY(20px);
    }
  
    100%{
      opacity: 1;
      -moz-transform: translateY(0);
    }
  }
  @-o-keyframes fadeInUp{
    0%{
      opacity: 0;
      -o-transform: translateY(20px);
    }
  
    100%{
      opacity: 1;
      -o-transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp{
    0%{
      opacity: 0;
      transform: translateY(20px);
    }
  
    100%{
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fadeInUp{
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  @-webkit-keyframes fadeInUpBig {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInUpBig {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
  }
  @-webkit-keyframes fadeInDown{
    0%{
      opacity: 0;
      -webkit-transform: translateY(-20px);
    }
  
    100%{
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }
  
  @-moz-keyframes fadeInDown{
    0%{
      opacity: 0;
      -moz-transform: translateY(-20px);
    }
  
    100%{
      opacity: 1;
      -moz-transform: translateY(0);
    }
  }
  @-webkit-keyframes fadeInLeftBig {
    -webkit-animation-duration:10s;
    -moz-animation-duration:10s;
    -ms-animation-duration:10s;
    -o-animation-duration:10s;
    animation-duration:10s;
    0% {
       opacity: 0;
       -webkit-transform: translateX(2000px);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateX(0);
    }
  }
  
  @keyframes fadeInLeftBig {
    0% {
       opacity: 0;
       transform: translateX(2000px);
    }
    100% {
       opacity: 1;
       transform: translateX(0);
    }
  }
  
  .fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
  }
  
  @-o-keyframes fadeInDown{
    0%{
      opacity: 0;
      -o-transform: translateY(-20px);
    }
  
    100%{
      opacity: 1;
      -o-transform: translateY(0);
    }
  }
  
  @keyframes fadeInDown{
    0%{
      opacity: 0;
      transform: translateY(-20px);
    }
  
    100%{
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fadeInDown{
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }
  @-webkit-keyframes fadeInLeft{
    0%{
      opacity: 0;
      -webkit-transform: translateX(-20px);
    }
  
    100%{
      opacity: 1;
      -webkit-transform: translateX(0);
    }
  }
  
  @-moz-keyframes fadeInLeft{
    0%{
      opacity: 0;
      -moz-transform: translateX(-20px);
    }
  
    100%{
      opacity: 1;
      -moz-transform: translateX(0);
    }
  }
  
  @-o-keyframes fadeInLeft{
    0%{
      opacity: 0;
      -o-transform: translateX(-20px);
    }
  
    100%{
      opacity: 1;
      -o-transform: translateX(0);
    }
  }
  
  @keyframes fadeInLeft{
    0%{
      opacity: 0;
      transform: translateX(-20px);
    }
  
    100%{
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .fadeInLeft{
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }
  @-webkit-keyframes fadeInRight{
    0%{
      opacity: 0;
      -webkit-transform: translateX(20px);
    }
  
    100%{
      opacity: 1;
      -webkit-transform: translateX(0);
    }
  }
  
  @-moz-keyframes fadeInRight{
    0%{
      opacity: 0;
      -moz-transform: translateX(20px);
    }
  
    100%{
      opacity: 1;
      -moz-transform: translateX(0);
    }
  }
  
  @-o-keyframes fadeInRight{
    0%{
      opacity: 0;
      -o-transform: translateX(20px);
    }
  
    100%{
      opacity: 1;
      -o-transform: translateX(0);
    }
  }
  
  @keyframes fadeInRight{
    0%{
      opacity: 0;
      transform: translateX(20px);
    }
  
    100%{
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .fadeInRight{
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }
  .animated.delay-0_5s {
    animation-delay: 0.5s;
  }
  .animated.delay-1s {
    animation-delay: 1s;
  }
  .animated.delay-1_5s {
    animation-delay: 1.5s;
  }
  .animated.delay-2s {
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    animation-delay: 5s;
  }
  /*********************************************************
    glossarEntry
  *********************************************************/
  .glossarEntry th, .glossarEntry td{
    border: 1px solid #aaaaaa;
    padding: 1px;
  }
  .glossarEntry table {
      width: 100%;
  }
  .glossarEntry th {
      height: 50px;
      text-align: center;
      vertical-align: middle;
      background-color: #565656;
      color: #ffffff;
  }
  .glossarEntry {
    text-align: justify-all;
    hyphens: auto;
  }
  .glossarEntry h2 {
    hyphens: none;
  }
  /*********************************************************
    OTHERS
  *********************************************************/
  @font-face {
    font-family:'Glyphicons Halflings';
    /* src:url(../fonts/glyphicons-halflings-regular.eot);
    src:url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),
    url(../fonts/glyphicons-halflings-regular.woff) format('woff'),
    url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),
    url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg'); */
    font-display: swap; }
  
  /* @font-face {
    font-family: 'Open-Sans';
    font-style: normal;
    font-weight: normal;
    src: url('/static/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-display: swap; }
  
  @font-face {
    font-family: 'AvenirNextLTPro-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('/static/fonts/AvenirNextLTPro-Regular.eot');
    src: url('/static/fonts/AvenirNextLTPro-Regular.woff') format('woff'),
      url('/static/fonts/AvenirNextLTPro-Regular.ttf') format('truetype');
    font-display: swap; }
  
  @font-face {
    font-family: 'AvenirNextLTPro-Medium';
    font-style: normal;
    font-weight: normal;
    src: url('/static/fonts/AvenirNextLTPro-Medium.eot');
    src: url('/static/fonts/AvenirNextLTPro-Medium.woff') format('woff'),
      url('/static/fonts/AvenirNextLTPro-Medium.ttf') format('truetype');
    font-display: swap; }
  
  @font-face {
    font-family: 'AvenirNextLTPro-UltLt';
    font-style: normal;
    font-weight: normal;
    src: url('/static/fonts/AvenirNextLTPro-UltLt.eot');
    src: url('/static/fonts/AvenirNextLTPro-UltLt.woff') format('woff'),
      url('/static/fonts/AvenirNextLTPro-UltLt.ttf') format('truetype');
    font-display: swap; } */
  
  /*********************************************************
    Bootstrap 3 grid for 480-767px layout
  *********************************************************/
  /**
    * Custom Bootstrap 3 grid for 480-767px layout
    * Author: Iftakhar Hasan
    *
    * A new set of column classes (with class prefix .col-ms- ) for Bootstrap 3
    * to make Medium Small grids for supporting 480-767px
    *
    * This will push the default Bootstrap 3 Extra Small column (class prefix .col-xs- )
    * to support 1-479px instead of 1-767px
    */
  
  /*.col-ms-1,
  .col-ms-2,
  .col-ms-3,
  .col-ms-4,
  .col-ms-5,
  .col-ms-6,
  .col-ms-7,
  .col-ms-8,
  .col-ms-9,
  .col-ms-10,
  .col-ms-11,
  .col-ms-12 {position:relative; padding-left:15px; padding-right:15px;}
  @media (min-width: 480px) and (max-width: 767px) {
    .container {max-width:748px;}
    .col-ms-1,
    .col-ms-2,
    .col-ms-3,
    .col-ms-4,
    .col-ms-5,
    .col-ms-6,
    .col-ms-7,
    .col-ms-8,
    .col-ms-9,
    .col-ms-10,
    .col-ms-11 {float:left;}
    .col-ms-1 {width:8.33333333%;}
    .col-ms-2 {width:16.66666667%;}
    .col-ms-3 {width:25%;}
    .col-ms-4 {width:33.33333333%;}
    .col-ms-5 {width:41.66666667%;}
    .col-ms-6 {width:50%;}
    .col-ms-7 {width:58.33333333%;}
    .col-ms-8 {width:66.66666667%;}
    .col-ms-9 {width:75%;}
    .col-ms-10 {width:83.33333333%;}
    .col-ms-11 {width:91.66666667%;}
    .col-ms-12 {width:100%;}
    .col-ms-pull-0 {right:auto;}
    .col-ms-pull-1 {right:8.33333333%;}
    .col-ms-pull-2 {right:16.66666667%;}
    .col-sm-pull-3 {right:25%;}
    .col-sm-pull-4 {right:33.33333333%;}
    .col-sm-pull-5 {right:41.66666667%;}
    .col-sm-pull-6 {right:50%;}
    .col-sm-pull-7 {right:58.33333333%;}
    .col-ms-pull-8 {right:66.66666667%;}
    .col-ms-pull-9 {right:75%;}
    .col-ms-pull-10 {right:83.33333333%;}
    .col-ms-pull-11 {right:91.66666667%;}
    .col-ms-pull-12 {right:100%;}
    .col-ms-push-0 {left:auto;}
    .col-ms-push-1 {left:8.33333333%;}
    .col-ms-push-2 {left:16.66666667%;}
    .col-sm-push-3 {left:25%;}
    .col-sm-push-4 {left:33.33333333%;}
    .col-sm-push-5 {left:41.66666667%;}
    .col-sm-push-6 {left:50%;}
    .col-sm-push-7 {left:58.33333333%;}
    .col-ms-push-8 {left:66.66666667%;}
    .col-ms-push-9 {left:75%;}
    .col-ms-push-10 {left:83.33333333%;}
    .col-ms-push-11 {left:91.66666667%;}
    .col-ms-push-12 {left:100%;}
    .col-ms-offset-0 {margin-left:0;}
    .col-ms-offset-1 {margin-left:8.33333333%;}
    .col-ms-offset-2 {margin-left:16.66666667%;}
    .col-ms-offset-3 {margin-left:25%;}
    .col-ms-offset-4 {margin-left:33.33333333%;}
    .col-ms-offset-5 {margin-left:41.66666667%;}
    .col-ms-offset-6 {margin-left:50%;}
    .col-ms-offset-7 {margin-left:58.33333333%;}
    .col-ms-offset-8 {margin-left:66.66666667%;}
    .col-ms-offset-9 {margin-left:75%;}
    .col-ms-offset-10 {margin-left:83.33333333%;}
    .col-ms-offset-11 {margin-left:91.66666667%;}
    .col-ms-offset-12 {margin-left:100%;}
  }
  */
  /*********************************************************
    ElegantIcons
  *********************************************************/
  /* Use the following CSS code if you want to have a class per icon */
  /*
  Instead of a list of all class selectors,
  you can use the generic selector below, but it's slower:
  [class*="your-class-prefix"] {
  */
  .ef-icon_clock_alt, .ef-icon_clock, .ef-icon_building, .ef-icon_building_alt {
    font-family: 'ElegantIcons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-display: swap;
  }
  .ef-icon_clock_alt:before {
    content: "\7d";
  }
  .ef-icon_clock:before {
    content: "\e06b";
  }
  .ef-icon_building:before {
    content: "\e0ef";
  }
  .ef-icon_building_alt:before {
    content: "\e0fd";
  }
  .ef-glyph {
    float: left;
    text-align: center;
    padding: .75em;
    margin: .4em 1.5em .75em 0;
    width: 6em;
    text-shadow: none;
  }
  .ef-glyph_big {
    font-size: 128px;
    color: #59c5dc;
    float: left;
    margin-right: 20px;
  }
  .ef-glyph div { padding-bottom: 10px;}
  .ef-glyph input {
    font-family: consolas, monospace;
    font-size: 12px;
    width: 100%;
    text-align: center;
    border: 0;
    box-shadow: 0 0 0 1px #ccc;
    padding: .2em;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  .ef-centered {
    margin-left: auto;
    margin-right: auto;
  }
  .ef-glyph .ef-fs1 {
    font-size: 2em;
  }