.body-container {
 padding:0!important; 
}

.join-conference {
 width:100%;
 position:relative;
 line-height: 1;

}
.preview-top{
 width:100%;
  position:fixed;
  clear:both;
  z-index:50;
   background:white;
 height:8vh;
  overflow:hidden;
 
  
}
.heyde-logo, .heyde-slogan{
 float:left;
}
.heyde-slogan {
 border-left:1px solid #ccc;
 padding:5px;
 margin:2vh 0px 0px 0px;
 color:#9f8fbc;

  font-weight:bold;
}

.heyde-logo img{
 max-width:10vw;
 margin:10px 20px 10px 50px;

}

.preview-menu{
 float:right; 
  min-width:400;
}

.preview-menu ul li{
 float:left;
 padding:5px;
 margin: 20px 20px;
 text-transform: uppercase;
 font-size:1.5em;
  color:#888;
  text-shadow: none;
  transition: all 1s ease-out;
}

.preview-menu ul li:hover{
text-shadow: 0.1em 0.1em 0.2em #999;
  transition: all 0.3s ease-out;
}
.top-underlay {
 position:absolute;
 width:100%;
 height:88vh;
 top:0;
 left:0;
  background-repeat: no-repeat!important;
 background-size:cover!important;
    -webkit-filter: blur(1px) brightness(0.9);
    filter: blur(1px) brightness(0.9);
  -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
  overflow:hidden;
}

.top-overlay {
  position:absolute;
 width:100%;
 height:88vh;
 top:0;
 left:0; 
 opacity: 0.4;

}

.top {
  width:100%;
 height:88vh;
 overflow:hidden; 
 top:0;
 position:relative;
}

.top-content {
 width:60%;
 float:left;
 padding-left:8vw;
 padding-right:13vw;
 margin-top: 10vh;

}

.preview-content {
 width:40%;
 float:left;
 background: rgba(243, 246, 247, 0.85);
 position:relative;
  height:100%;
 
}



.titletop {
     text-align: left!important;
   font-size:4em!important;
   color:white!important;
  padding-top:5vh!important;
}

.titletop h1 {
 font-weight:800;
}

.logo {
 text-align: left;
    padding-top: 8vh;
   display:none;
}

.logo img {
max-height: 5vh;
    margin-left: auto;
    margin-right: auto;
}

.welcome-message {
  text-align: left;
    color: white;
    font-size: 1.8em;
   margin-top:25px;
}

.actual-callout {
 text-align: left;
    color: white;
    font-size: 1.3em;
  margin-top:25px;
  
}

.cta {
 text-align: left; 
 margin-top:25px;
 margin-bottom: 25px;
}

.cta a {
    /*transform: translate(-50%, -50%);
    mix-blend-mode: screen;*/
    margin-top: 40px;
}

button.cta-button {
     width: 90%;
    cursor: pointer;
    padding: 20px 30px;
    text-align: center;
    display: inline-block;
    letter-spacing: 4px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.8em;
    border-radius: 30px; 
    background:#4b2c7b!important;
    color:white!important;
    border:2px solid white!important;
    height: 100%;
    min-width: 20vw;
    margin:0 3vw 0 3vw;
}

button.cta-button:hover {
 background:white!important;
 color:#4b2c7b!important;
 border:2px solid #4b2c7b!important;
}
button.cta-button-top {
    width: auto;
    cursor: pointer;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    letter-spacing: 4px;
    font-weight: 800;
    text-transform: uppercase;
    
    border-radius: 30px; 
    background:transparent!important;
    color:#4b2c7b;
    border:none!important;
    height: 100%;
    margin:-20px 30px 0px 0px;
}
button.cta-button-top:hover {
 background:transpartent!important;
 color:#60498b!important;
 border:none!important;
}

.dotter {
 margin-left: -3vw;
 margin-top: 8vh;
 position: absolute; 
}

.dotter ul li {
 margin-bottom:10px; 
 color: #4b2c7b;
 font-size:1.5em;
 font-weight:700;
 background: #7d7e80;
}

.dotter ul li:hover {

 color:white;
 background: #4b2c7b;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


.badge-info {
 background: #9f8fbc!important;
}

.preview-video{
 width:50vw;
 max-width:850px;
 overflow:hidden;
 margin-left:-11vw;
 background:white;
 height:calc(50vw * 0.5625);
 max-height:calc(850px * 0.5625);
 -moz-box-shadow: 1px 1px 6px #a0a0a0;
    -webkit-box-shadow: 1px 1px 6px #a0a0a0;
    -khtml-box-shadow: 1px 1px 6px #a0a0a0;
    box-shadow: 1px 1px 6px #a0a0a0;
  margin-top:22vh;
}

.pvv-start {
 width:50%;
 background:black;
 float:left;
 height:100%;
 background-size:cover!important;
      cursor: pointer;
 
}

.pvv-start img {
   border: 3px solid white;
    border-radius: 30%;
    padding: 20px;
    margin-left: 40%;
    margin-top: 40%;
    min-width: 20%;
    max-height:30%
}

.pvv-start-text {
    overflow: scroll;
    overflow-x: hidden;
 height:100%;
}

.vid{
   width:50%;
 float:right;
}

.vorteile ul{
  margin-left:5vw;
  list-style-image: url('https://www.heyde.ch/hubfs/icons/003-send-v.png');
 font-size:1.8em;
}

.vorteile li{
 padding-left: 10px;
    margin-bottom: 3px;
    line-height: 1.5em;
}




.pvv-start-text h2 {
      font-size: 2em;
    letter-spacing: 3px;
    color: #60498b;
    
    margin-bottom: 2%;
    padding-left: 30px;
}

.vid h2{
  margin-top: 20%;
}

.vorteile h2{
 margin-top: 7%; 
}
.pvv-start-text p {
      color: #333;
    letter-spacing: 1px;
    padding-left: 30px;
    padding-right: 40px;
    font-size:1.2em;
}

.pvv-start-text button {
     
     height:auto!important;
     /*max-width:50%!important;*/
     font-size:1em!important;
     padding: 2% 2%!important;
     min-width:180px!important;
}

.vid button {
  margin: 10% 0px 0px 10% !important; 
}

.vorteile button{
 margin: 3% 0px 0px 60%!important; 
}

.video-cta {
    
    width: 50vw;
    max-width: 760px;
    /* height: 50px; */
    text-align: center;
    font-size: 3em;
    color: white;
    font-weight: bold;
    margin-top: -200px;
    position: absolute;
  
}

.vc {
 background:#dc3545; 
 border:2px solid white; 
 border-radius:20px;
 padding: 20px; 
}

.vc:hover {
 color: #dc3545;
 border-color: #dc3545;
 background:white!important;
}

.slidebar {
    height: 3vh;
    width: 35vw;
    position: absolute;
    max-width: 850px;
    /*top: calc(24vh + 50vw * 0.5625);*/
    margin-top:3vh;
    color:black!important;
    mix-blend-mode: screen;
}

.slidebar ul {
     justify-content: space-around;
    display: flex;
}

.slidebar-inner{
 
    padding: 5px;
    background: white;
    border-radius: 5px;
    /* margin-right: 10px; */
    margin-top: 10px;
    min-width: 20%;
    text-align: center;
  cursor: pointer;
  font-weight:700;
letter-spacing:1px;
}

.slidebar-inner:hover, .active-item{
 background: #4b2c7b;  
 color:white!important;
}


.logo-bar {
position: relative;
bottom: 0px;
display:flex;
bottom:1.5vh;
align-items : center;  
    justify-content: space-evenly;
  width:100%;
height:8vh;

}


.logo-bar p {
position:relative;
  float:left;
  margin-left:20px;
  
}

.logo-bar img {
      width: 6vw!important;
      min-width:120px;
    
}


/*Form */
.modal-outer {
 display: none; 
      width: 100vw;
    height: 100vh;
    position: absolute;
    margin-left: auto;
    z-index: 999;
    background: white;
    opacity: 0.95;
    
}
/* The Modal (background) */
.modal {
    position: fixed;
    z-index: 999;
    top: 20%!important;
    left: 50%!important;
    margin-left: -175px;
    display: block !important;

    height: 61%!important;
    border-radius: 20px;
    outline: 0;
    background-color: rgba(96,73,139);
    width: 350px !important;
    padding: 60px 30px 20px 30px;
    color: white;
    text-align: left;
    font-size: 1.2em;
    text-align: left;
  overflow:scroll!important;
  overflow-x:hidden!important;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  float: right;
  font-size: 3em!important;
  font-weight: 700!important;
  line-height: 1;
  color: white!important;
}

.modal .hs-form-field {
  text-align:left!important;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

.close {
 font-size:2em!important; 
}

input[type=submit] {
 background: #60498b!important; 
      border-radius: 10px;
    box-shadow: none; 
  border:2px solid white!important;
}

input[type=submit]:hover {
 box-shadow: 0 0 1em white!important; 
}

.submitted-message {
 color:white!important; 
}


.ls {
  top: 0;
    width: calc(88vh * 0.3683);
    height: 88vh;

    position: absolute;
    background: url("https://www.heyde.ch/hubfs/Nicht%20zugewiesen/background-v-white-ht.png");
    background-size: cover;
}


/*sprungmarken */

@media (max-width:1100px){
 .top{
   font-size: 0.7em!important;
  }
}


@media (max-width: 800px) {
 .preview-asset {
   display:none;
  }
.logo {
  display:block;
  }
.join-conference{
  top:0px;
  }
.preview-top{
  display:none;
  }

.top-content {
  width:100%;
  }
.actual-callout {
padding-left:10px;
margin:0px;
  }
  
.top {
  height:100%;
  }

.slidebar {
width:100%;
position:relative;
top: unset;
margin-bottom:4vh;

  }
.slidebar-inner{
  margin-right:10px;
  }
  
.preview-content{
  width:100%;
  margin-bottom: 2vh;
  background:white;
  }

.preview-content span {
 
 font-weight:bolder;
 margin: 3vh 0 2vh 10vw!important;
  
  }
  
.preview-video {
  width: 96%;
  margin: auto;
  height:calc(100vw * 0.5625);
  margin-top:0;
  }

.vid h2{
  margin-top:10%;
  }
  
.vid button {
    margin: 5% 0px 0px 10% !important;
  min-width: 150px !important;
}
  
button.cta-button-top {
  letter-spacing: 2px;
  }
  
.pvv-start img {
  display:none;
  }
  
.logo-bar {
  position:relative;
  margin-top:30px;
     
  
  }
 
.logo-bar img{
  min-width:100px!important;
  }
  
  .logo img {
   max-width:350px; 
  }
  
.titletop, .welcome-message {
 padding: 10px!important; 
  }

  
  .top, .top-underlay, .top-overlay
 {
  
  }

  .modal {
       height: 80% !important; 
  }
  
  .cta {▼
   animation:none!important;
   -webkit-animation:none!important;
  }
  
}

/* Animations*/

.slide-in-right{-webkit-animation:slide-in-right 1s cubic-bezier(.25,.46,.45,.94) 4s both;animation:slide-in-right 1s cubic-bezier(.25,.46,.45,.94) 4s both}
.slide-out-left{-webkit-animation:slide-out-left 6s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-left 6s cubic-bezier(.55,.085,.68,.53) both}
.slide {-webkit-animation:slide 5s cubic-bezier(.55,.085,.68,.53) 2s infinite both;animation:slide 5s cubic-bezier(.55,.085,.68,.53) 2s infinite both}
.active-item {
	-webkit-animation: pulsate-fwd 5s ease-in-out both;
	        animation: pulsate-fwd 5s ease-in-out both;
}
.preview-video {
	-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.cta {
	-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}



@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(10000px);transform:translateX(10000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@keyframes slide-in-right{0%{-webkit-transform:translateX(10000px);transform:translateX(10000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}

@-webkit-keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}
@keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}

@-webkit-keyframes slide {
  0%{-webkit-transform:translateX(10000px);transform:translateX(10000px);opacity:0}
  50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
  80%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
   100%{-webkit-transform:translateX(10000px);transform:translateX(10000px);opacity:0}
}

@keyframes slide{
  0%{-webkit-transform:translateX(10000px);transform:translateX(10000px);opacity:0}
  50%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
  80%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
  100%{-webkit-transform:translateX(10000px);transform:translateX(10000px);opacity:0}
}


@-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}


@-webkit-keyframes flip-out-hor-top {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(70deg);
            transform: rotateX(70deg);
    opacity: 0;
  }
}


@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}