.mainpageContainer.w-1920 #block-dkmlight-dkm-system-main {
  margin-bottom: 0;
  padding-bottom: 0;
}
.mainpageContainer.w-1920 {
  margin-top: 0;
}
.w-1920 {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.w-1280 {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.dyellow {
  color: #ffcc00 !important;
}
.dblue {
  color: #123a5d !important;
}
.white {
  color: #ffffff !important;
}
.grey {
  color: #313131 !important;
}
.inline-blok {
  display: inline-block;
  vertical-align: top;
}
.mb-40 {
  margin-bottom: 40px !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.fnt-normal {
  font-weight: normal !important;
}
.algn-cntr {
  text-align: center !important;
}
.loc-container,
.strat-container,
.lp-slick-container,
.ticket-container {
  margin-top: 50px;
  margin-bottom: 50px;
}

.lpage-container,
.kontakt-banner,
.kontakt-box {
  position: relative;
}
.kontakt-banner-top-hover-img {
  position: absolute;
  bottom: 0;
  left: 0;
}
.kontakt-box {
  top: 244px;
  top: 180px;
  left: 234px;
  width: 752px;
  height: 780px;
  background: #005795 0% 0% no-repeat padding-box;
  mix-blend-mode: multiply;
  mix-blend-mode: hard-light;
  position: absolute;

  padding-top: 35px;
  padding-left: 65px;
}
.kontakt-title {
  text-align: left;
  font: normal normal 800 102px/127px Encode Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
  
}
.kontakt-datum {
  text-align: left;
  font: normal normal bold 30px/22px Encode Sans;
  letter-spacing: 0px;
  color: #FFCC00;
  
  margin: 30px 0;
}
.kotakt-para {
  text-align: left;
  font: normal normal normal 25px/30px Encode Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
  
  margin-bottom: 20px;
}
.kontakt-btn-container {
  margin: 30px 0;
}
.kontakt-btn {
  width: 367px;
  height: 62px;
  background: #FFCC00 0% 0% no-repeat padding-box;
  

  padding: 16px 40px;
  text-align: center;
  font: normal normal 600 23px/29px Encode Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
  
  margin: 20px 0;
  text-decoration: none;
}
.kontakt-btn:hover,
.kn-box .form-submit:hover {
  /*color: #123a5d;*/
  background-color: #92C1E3;
}
.lpage-counter {
  position: absolute;
  top: 862px;
  right: 0;
  width: 600px;
  width: 690px;
  height: 138px;

  background: #005795 0% 0% no-repeat padding-box;
  mix-blend-mode: multiply;
  mix-blend-mode: hard-light;
  padding: 12px 0px 12px 50px;
  padding: 18px 0px 12px 35px;
  box-sizing: border-box;
}
.lpage-counter .countdown-title {
  display: none;
}
.cd-days, .cd-hours, .cd-minutes, .cd-seconds {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  font: normal normal 600 68px/85px Encode Sans;
  color: #fff;
  line-height: 0.7;
}
.lpage-counter .cd-label {
  font: normal normal 600 34px/42px Encode Sans;
}
.cd-seconds {
  margin-right: 0;
}
.k-days-container {
  margin-right: 30px;
  display: inline-block;
  vertical-align: top;
}
.k-days-num {
  text-align: left;
  font: normal normal 600 68px/85px Encode Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
  width: 113px;
  height: 85px;
}
.k-days {
  width: 84px;
  height: 42px;
  text-align: left;
  font: normal normal 600 34px/42px Encode Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
}

.lp-main {
  margin-top: 70px;
  margin-bottom: 70px;
  min-height: 810px;
}
.lp-col-lft,
.lp-col-rgt {
  width: 49%;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}
.lp-main-img.second {
  position: absolute;
  top: 350px;
  left: 130px;
}
.lp-main-h1 {
  text-align: left;
  font: normal normal bold 60px/75px Encode Sans;
  letter-spacing: 0px;
  color: #123A5D;
}
.fnt-20-30 {
  text-align: left;
  font: normal normal 300 20px/30px Encode Sans;
  letter-spacing: 0px;
  color: #313131;
}
.lp-main-h2 {
  text-align: left;
  font: normal normal bold 30px/22px Encode Sans;
  letter-spacing: 0px;
  color: #FFCC00;
  margin: 24px 0;
  line-height: 1;
}
.lp-main-list li {
  font: normal normal 300 25px/50px Encode Sans;
  letter-spacing: 0px;
  color: #313131;
}
.sp-box {
  width: 369px;
  width: 359px;
  height: 509px;
  height: 495px;
  margin-right: 18px;
  margin-bottom: 18px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.sp-box.title-info {
  background-color: #123a5d;
  padding: 70px 40px;
  width: 279px;
  height: 355px;
}
.sp-box img {
  width: 100%;
  height: auto;
}
.sp-box:nth-child(5),
.sp-box:nth-child(10) {
  margin-right: 0;
}
.sp-box img:hover {
  filter: sepia(100%) saturate(200%) brightness(90%);
}
.sp-box .sp-name {
  position: absolute;
  bottom: 40px;
  left: 20px;
  display: none;
  width: 175px;
  filter: sepia(0) saturate(0) brightness(100%);
}
.sp-box:hover .sp-name {
  display: block;
}

.programm-btn-container {
  margin: 30px 0;
}


.loc-info {
  width: 480px;
  width: 445px;
  height: 480px;
  background: #123A5D 0% 0% no-repeat padding-box;
  padding: 80px;
}
.fnt-30-2 {
  font: normal normal 300 30px/40px Encode Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
}
.st-col-lft {
  width: 25%;
  width: 28%;
  margin-right: 24%;
  margin-right: 21%;
}
.st-col-rgt {
  width: 49%;
}
.st-graph-bar {
  margin: 40px 0;
  position: relative;
}
.wg-55 {
  width: 55%;
}
.wg-65 {
  width: 65%;
}
.wg-75 {
  width: 75%;
}
.wg-85 {
  width: 85%;
}
.st-graph-bar .golden-bar {
  height: 25px;
  border-radius: 25px;
  background: #FFCC00;
  position: absolute;
  top: -12px;
  left: 0;
}
.st-graph-bar hr {
  background-color: #123a5d;
  height: 2px;
}


.dabei-container {
  height: 821px;
  background: transparent url('/sites/dkmstage.bbg-online.de/files/landing_page_neu/ticket-bg.png') 0% 0% no-repeat padding-box;
  object-fit: cover;
  padding-top: 1px;
}

.db-container {
  height: 494px;
  background: #005795 0% 0% no-repeat padding-box;
  mix-blend-mode: multiply;
  mix-blend-mode: hard-light;
  padding: 60px 80px;
  box-sizing: border-box;
  margin-top: 180px;
}

.db-xl-50 {
  font: normal normal 800 50px/62px Encode Sans;
  letter-spacing: 0px;
}
.blank-spacer-30 {
  height: 30px;
}

.col-ticket {
  width: 394px;
  height: 911px;
  background: #123A5D 0% 0% no-repeat padding-box;
  margin-right: 43px;
  box-sizing: border-box;
  padding: 30px 50px;
  text-align: center;
  position: relative;
}
.col-ticket .programm-btn-container {
  position: absolute;
  bottom: 50px;
  bottom: 40px;
}

.col-kontakt-lft {
  width: 49%;
  margin-right: 30px;
}
.col-kontakt-rgt {
  width: 48%;
}
.subcol-kontakt-lft {
  width: 30%;
  width: 33%;
  margin-right: 20px;
}
.subcol-kontakt-rgt {
  width: 65%;
  width: 62%;
}
.kn-box {
  width: 611px;n
  height: 485px;
  height: 550px;
  background: #123A5D 0% 0% no-repeat padding-box;
  box-shadow: 6px 3px 6px #00000029;
  padding: 40px 60px 60px 60px;
  box-sizing: border-box;
}
.kn-box .form-item {
  margin-right: 0;
  max-width: 450px;
}
.kn-box .form-item input.form-text, 
.kn-box .form-item input.form-email {
  width: 119px;
  height: 25px;
  font: normal normal normal 16px/20px Encode Sans;
  letter-spacing: 0px;
  color: #FFFFFF;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  padding: 4px 14px 0 0;
  width: 95%;
  max-width: 410px;
}
.kn-box .form-textarea-wrapper textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  color: #ffffff;
  width: 95%;
  max-width: 410px;
  max-width: 420px;
  height: 90px;
}
.kn-box .form-submit {
  background-color: #ffcc00;
  width: 250px;
  height: 62px;
  padding: 16px 80px;
  margin-left: 100px !important;
  margin-top: 25px;
  box-sizing: border-box;
  font: normal normal 600 23px/29px Encode Sans;
  border: none;
}
.kn-img-container img,
.lp-main-img img {
  margin-left: 0;
}
.kn-box .webform-confirmation,
.kn-box .webform-confirmation a {
  color: #fff;
  font-size: 18px;
}
.banner-bottom {
  position: relative;
  z-index: -1;
  margin-top: -350px;
}

.content .lp-slick-container ul {
  padding-left: 0;
}
.lp-slick-container .lps-box {
  width: 482px;
  height: 311px;
  height: 200px;
  height: auto;
  position: relative;
  margin-top: 130px;
}
.landing-page-slick {
  margin-top: 80px;
}
.lp-slick-container .slick-slide {
    width: 630px;
	margin-right: 150px;
}
.lp-slick-container .lps-appos {
  text-align: center;
  font: normal normal bold 160px/221px Articulat CF;
  letter-spacing: 16px;
  color: #2581C4;
  position: absolute;
  font: normal normal normal 356px/64px Encode Sans;
  color: #FFCC00;
}
.lp-slick-container .lps-appos.top-appos {
  top: -260px;
  left: 40%;
}
.lp-slick-container .lps-box-title {
  text-align: center;
  margin-top: 20px;
}
.lp-slick-container .lps-box-text {
  text-align: center;
}
.lp-slick-container .slick-dots li button::before {
  font-size: 16px;
  color: #123a5d;
  margin-top: 20px;
  opacity: 1;
}
.lp-slick-container .slick-dots li.slick-active button::before {
  color: #ffcc00;
}

/* type writer animation */
.heading-1,
.subhead-1,
.title-mate,
.video-title-mate,
.graph-bar-mate {
    overflow: hidden;
}
.title-mate {
  overflow: hidden;
  height: 60px;
}
.video-title-mate  {
  height: 130px;
}
.locmatedort {
  overflow: hidden;
  white-space: wrap;
  height: 160px;
}
.locmate {
  overflow: hidden;
  white-space: nowrap;
}
/* Animation */
/*
.heading-1.in-view,
.subhead-1.in-view {
  animation: headtypewriter 4s steps(44) 1s 1 normal both,
  blinkTextCursor 500ms steps(44) infinite normal;
}
*/
@keyframes headtypewriter{
  from{width: 0;}
  to{width: 400px;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

@keyframes headtypewriter-100{
  from{width: 0;}
  to{width: 100%;}
}
.graph-bar55-mate.in-view {
  animation: typewriter-bar55 4s steps(44) 1s 1 normal both;
}
.graph-bar65-mate.in-view {
  animation: typewriter-bar65 4s steps(44) 1s 1 normal both;
}
.graph-bar75-mate.in-view {
  animation: typewriter-bar75 4s steps(44) 1s 1 normal both;
}
.graph-bar85-mate.in-view {
  animation: typewriter-bar85 4s steps(44) 1s 1 normal both;
}
@keyframes typewriter-bar55 {
  from{width: 0;}
  to{width: 55%;}
}
@keyframes typewriter-bar65 {
  from{width: 0;}
  to{width: 65%;}
}
@keyframes typewriter-bar75 {
  from{width: 0;}
  to{width: 75%;}
}
@keyframes typewriter-bar85 {
  from{width: 0;}
  to{width: 85%;}
}

.heading-1.in-view,
.subhead-1.in-view,
.locmate.in-view,
.locmatedort.in-view,
.video-title-mate.in-view {
  color:#0000;
  background:
    linear-gradient(-90deg,#00DFFC 5px,#0000 0) 10px 0,
    linear-gradient(#00DFFC 0 0) 0 0;
  background: linear-gradient(-90deg,#0000 5px,#0000 0) 10px 0, linear-gradient(#fff 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 200%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  animation: 
   b .7s infinite steps(1),   
   t calc(var(--n)*.1s) steps(var(--n)) forwards;
}
.loczent.in-view,
.title-mate.in-view {
  color:#0000;
  background:
    linear-gradient(-90deg,#00DFFC 5px,#0000 0) 10px 0,
    linear-gradient(#00DFFC 0 0) 0 0;
  background: linear-gradient(-90deg,#0000 5px,#0000 0) 10px 0, linear-gradient(#ffcc00 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 200%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  animation: 
   b .7s infinite steps(1),   
   t calc(var(--n)*.1s) steps(var(--n)) forwards;
}
@keyframes t{
  from {background-size:0 200%}
}
@keyframes b{
  50% {background-position:0 -100%,0 0}
}
/* End type writer animation */






/* media queries */
/* @media (min-width: 320px) and (max-width: 480px) */
@media (min-width: 320px) and (max-width: 767px) {
  .lp-col-lft,
  .banner-bottom {
    display: none;
  }
  .kontakt-box {
    position: relative;
	left: 0;
	top: 20px;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	width: calc(100% - 20px);
	height: auto;
  }
  .kontakt-title {
    font: normal normal 800 52px/60px Encode Sans;
  }
  .kontakt-datum {
    font: normal normal bold 24px/24px Encode Sans;
  }
  .kotakt-para {
    font: normal normal normal 20px/26px Encode Sans;
  }
  .lpage-counter {
    position: relative;
	top: 15px;
	right: 0;
    width: 100%;
    height: auto;
  }
  .cd-days, .cd-hours, .cd-minutes, .cd-seconds {
    width: 40%;
	margin-bottom: 30px;
  }
  .lpage-counter .cd-label {
    font: normal normal 600 34px/42px Encode Sans;
  }
  .lp-col-rgt {
    width: 100%;
  }
  .lp-main-h1 {
    font: normal normal bold 40px/50px Encode Sans;
	word-wrap: break-word;
  }
  .fnt-30-2 {
    font: normal normal 300 20px/30px Encode Sans;
  }
  .loc-item {
    width: 100%;
	height: auto;
    padding: 0 10px;
  }
  .loc-info {
    padding: 10px;
  }
  .lp-slick-container .lps-appos.top-appos {
    left: 25%;
  }
  .lp-slick-container .slick-slide {
    width: 300px;
	height: auto;
	margin-right: 50px;
  }
  .st-col-lft,
  .st-col-rgt,
  .col-kontakt-lft,
  .col-kontakt-rgt,
  .subcol-kontakt-lft,
  .subcol-kontakt-rgt {
    width: 100%;
	margin-right: 0;
  }
  .db-container {
    padding: 10px 20px;
  }
  .db-xl-50 {
    font: normal normal 800 30px/35px Encode Sans;
  }
  .kontakt-btn {
    padding: 16px; 
  }
  .col-ticket {
    width: 100%;
	height: auto;
	margin-bottom: 20px;
  }
  .col-ticket .programm-btn-container {
    position: relative;
	bottom: 0;
  }
  .kn-box {
    width: 100%;
	height: auto;
	margin: 20px 0;
  }
  .kn-box .form-submit {
    margin: 0 !important;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  
}
@media (min-width: 768px) and (max-width: 1024px) {
  .lp-col-lft,
  .banner-bottom {
    display: none;
  }
  .kontakt-box {
    position: relative;
	left: 0;
	top: 20px;
	padding: 20px;
	margin-bottom: 20px;
	width: calc(100% - 40px);
	height: auto;
  }
  .kontakt-title {
    font: normal normal 800 52px/60px Encode Sans;
  }
  .kontakt-datum {
    font: normal normal bold 24px/24px Encode Sans;
  }
  .kotakt-para {
    font: normal normal normal 20px/26px Encode Sans;
  }
  .lpage-counter {
    position: relative;
	top: 15px;
	right: 0;
    width: 100%;
    height: auto;
	padding-top: 40px;
  }
  .cd-days, .cd-hours, .cd-minutes, .cd-seconds {
    width: 40%;
	margin-bottom: 30px;
  }
  .lpage-counter .cd-label {
    font: normal normal 600 34px/42px Encode Sans;
  }
  .lp-col-rgt {
    width: 100%;
  }
  .lp-main-h1 {
    font: normal normal bold 40px/50px Encode Sans;
	word-wrap: break-word;
  }
  .fnt-30-2 {
    font: normal normal 300 24px/32px Encode Sans;
  }
  .loc-item {
    width: 100%;
	height: auto;
    padding: 0;
  }
  .lpage-container .loc-item img {
    width: 100%;
  }
  .loc-info {
    padding: 40px;
	width: calc(100% - 80px);
  }
  .lp-slick-container .lps-appos.top-appos {
    left: 25%;
  }
  .lp-slick-container .slick-slide {
    width: 400px;
	height: auto;
	margin-right: 50px;
  }
  .st-col-lft,
  .st-col-rgt,
  .col-kontakt-lft,
  .col-kontakt-rgt,
  .subcol-kontakt-lft,
  .subcol-kontakt-rgt {
    width: 100%;
	margin-right: 0;
  }
  .db-container {
    padding: 60px 50px;
  }
  .db-xl-50 {
    font: normal normal 800 40px/45px Encode Sans;
  }
  .kontakt-btn {
    padding: 16px; 
  }
  .col-ticket {
    width: 100%;
	height: auto;
	margin-bottom: 20px;
	width: 320px;
	margin-right: 20px;
  }
  .col-ticket .programm-btn-container {
    position: relative;
	bottom: 0;
  }
  .kn-box {
    width: 100%;
	height: auto;
	margin: 20px 0;
  }
  .kn-box .form-submit {
    margin: 0 !important;
  }

  .lp-main {
    min-height: unset;
  }
  .locmatedort {
    height: 70px;
  }
  .sp-box.title-info {
    height: 302px;
	width: 242px;
  }
  .sp-box {
    width: 320px;
	height: 450px;
  }
}

@media (min-width: 1025px) and (max-width: 1524px) {
   .w-1920 {
    position: relative;
  }
  .kontakt-box {
    width: 450px;
	height: 530px;
	top: 5px;
	left: 10px;
  }
  .kontakt-title {
    font: normal normal 800 51px/63px Encode Sans;
  }
  .kontakt-datum {
    font: normal normal bold 26px/22px Encode Sans;
  }
  .kotakt-para {
    font: normal normal normal 22px/30px Encode Sans;
  }
  .cd-days, .cd-hours, .cd-minutes, .cd-seconds {
    font: normal normal 600 36px/42px Encode Sans;
  }
  .lpage-counter .cd-label {
    font: normal normal 600 24px/30px Encode Sans;
  }
  .lpage-counter {
    top: 730px;
	top: 50%;
	width: 560px;
	width: 500px;
	height: 128px;
  }
  .lp-main-h1 {
    font: normal normal bold 40px/45px Encode Sans;
  }
  .fnt-30-2 {
    font: normal normal 300 22px/36px Encode Sans;
  }
  .loc-items {
    display: flex;
  }
  .loc-item {
    box-sizing: border-box;
  }
  .loc-info {
    padding: 40px;
	width: 480px;
	height: auto;
  }
  .loc-city, .loc-dir {
    width: 33%;
	height: auto;
  }
  .loc-city img, .loc-dir img {
   height: 100vh;
  }
  .col-ticket {
    width: 30%;
	height: auto;
	min-height: 980px;
  }
  .kn-img-container {
    margin-bottom: 100px;
  }
  .sp-box:nth-child(5), .sp-box:nth-child(10) {
    margin-right: 18px;
  }
  .st-col-lft {
    margin-right: 20%;
    margin-left: 20px;
  }
  .kontakt-btn {
    padding: 16px 20px;
  }
  .col-kontakt-rgt {
    width: 46%;
  }
}
@media (min-width: 1236px) and (max-width: 1536px) {
  .w-1920 {
    position: relative;
  }
  .kontakt-box {
    width: 500px;
	height: 550px;
	top: 100px;
	left: 100px;
  }
  .kontakt-title {
    font: normal normal 800 51px/63px Encode Sans;
  }
  .kontakt-datum {
    font: normal normal bold 26px/22px Encode Sans;
  }
  .kotakt-para {
    font: normal normal normal 22px/30px Encode Sans;
  }
  .cd-days, .cd-hours, .cd-minutes, .cd-seconds {
    font: normal normal 600 36px/42px Encode Sans;
  }
  .lpage-counter .cd-label {
    font: normal normal 600 24px/30px Encode Sans;
  }
  .lpage-counter {
    top: 730px;
	top: 50%;
	width: 560px;
	width: 510px;
	height: 128px;
  }
  .lp-main-h1 {
    font: normal normal bold 40px/45px Encode Sans;
  }
  .fnt-30-2 {
    font: normal normal 300 26px/36px Encode Sans;
  }
  .sp-box:nth-child(5), .sp-box:nth-child(10) {
    margin-right: 18px;
  }

}
/* End media queries */