.adCont{
	height: 100%;
	width: 100%;
	position: absolute;
  z-index: 0;
    pointer-events: none;
}

.wrapper{
    overflow: hidden;
    background-color:#424959;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
}


.adCont img{
	height: 100%;
	width: 100%;
}

body{
  width: 100%;
  height: 100%;
  
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
}


#banner{
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
  bottom: 0;
	left: 0;
  right: 0;
	cursor: pointer;
  margin: auto;
    pointer-events: none;
}

svg{
  z-index: 999;
}

.bgImg{
	position: absolute;
}


.hidden{
	display: none;
}

#interactionLayer{
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: all;
  cursor: pointer;
}

.bg_container{
  transform-origin: 50% 90%;
  opacity:0.3;
}

.bg_responsive{
  transform-origin: 50% 50%;
}

.bgImg{

  overflow: hidden;

}


.main{
  transform-origin: 20% 60%;
  opacity: 0;
}

.mainOverlays{
    top: 0;
}

.title{
  position: absolute;
  margin-top: 0px;
  top: 0;
}

.title_container_mask{
  bottom: 0;
  overflow: hidden;
}

.title_container{
  overflow: hidden;
  -webkit-transition: all 1s cubic-bezier(0.495, 0.005, 0.165, 0.975);
  transition: all 1s cubic-bezier(0.495, 0.005, 0.165, 0.975);
}

.titleRevealAnim{
    margin-top: 0 !important;
}

.redLine{
  position: absolute;
  background-color: #e32d13;
}

.redLineTop{
  top: 0;
}

.redLineBot{
  bottom: 0;
}


.title_main_mask, .textTop_container{
  overflow: hidden;
  width: 0%;
}


.date_container{
  bottom: 0;
  overflow: hidden;
}
.date{
  bottom: 0px;
  -webkit-transition: all 1s cubic-bezier(0.495, 0.005, 0.165, 0.975);
  transition: all 1s cubic-bezier(0.495, 0.005, 0.165, 0.975);
}


.dateRevealAnim{
  	margin-bottom: 0 !important;
}


.ClippingRechts{
  transform: translateX(110px);
  -webkit-transform: translateX(110px);
}

.ClippingLinks{
  transform: translateX(110px);
  -webkit-transform: translateX(110px);
}

.AXX{
  transform: translateX(110px);
  -webkit-transform: translateX(110px);
}

.P7M{
  transform: translateX(110px);
  -webkit-transform: translateX(110px);
}
.claim{
  transform: scaleX(0.01) translateX(50px);
  -webkit-transform: scaleX(0.01) translateX(50px);
}
.logo{
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.alternativeScale{
  transform-origin: 0% 50% !important;
}

.blende{
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  transition-duration: 1.2s;
  opacity: 1;
  
}
.blende_main{
  left: 0;
  top: 0;
}

.blende_top, .blende_bot{
  position: absolute;
  transform: skewX(35deg);
}

.blende_gray{
  background-color: #3d3d39;
  background-color: #edebdc;
  background-color: #5c757c;
  background-color: #e32d13;
}

.cta{
  opacity: 0;
}
/*-------------------------------------------------------------ANIMATIONS-------------------------------------------------------------*/


.blendeTopAnim{
  	-webkit-animation: blendeTopAnim 0.8s linear forwards 1;
    animation: blendeTopAnim 0.8s linear forwards 1;
}
@-webkit-keyframes blendeTopAnim {
  0%{opacity: 1; margin-right: 0%;background-color: #e32d13;}
  80%{opacity: 1;}
  100%{opacity: 0; margin-right: -300%;background-color: #000000;}
}
@keyframes blendeTopAnim {
  0%{opacity: 1; margin-right: 0%;background-color: #e32d13;}
  80%{opacity: 1;}
  100%{opacity: 0; margin-right: -300%;background-color: #000000;}
}

.blendeBotAnim{
  	-webkit-animation: blendeBotAnim 0.8s linear forwards 1;
    animation: blendeBotAnim 0.8s linear forwards 1;
}
@-webkit-keyframes blendeBotAnim {
  0%{opacity: 1; margin-left: 0%;background-color: #e32d13;}
  80%{opacity: 1;}
  100%{opacity: 0; margin-left: -300%;background-color: #000000;}
}
@keyframes blendeBotAnim {
  0%{opacity: 1; margin-left: 0%;background-color: #e32d13;}
  80%{opacity: 1;}
  100%{opacity: 0; margin-left: -300%;background-color: #000000;}
}

.blendeTopAnimClose{
  	-webkit-animation: blendeTopAnimClose 0.8s linear forwards 1;
    animation: blendeTopAnimClose 0.8s linear forwards 1;
}
@-webkit-keyframes blendeTopAnimClose {
  100%{opacity: 1; margin-right: 0%;background-color: #e32d13;}
  20%{opacity: 1;}
  0%{opacity: 0; margin-right: -300%;background-color: #000000;}
}
@keyframes blendeTopAnimClose {
  100%{opacity: 1; margin-right: 0%;background-color: #e32d13;}
  20%{opacity: 1;}
  0%{opacity: 0; margin-right: -300%;background-color: #000000;}
}

.blendeBotAnimClose{
  	-webkit-animation: blendeBotAnimClose 0.8s linear forwards 1;
    animation: blendeBotAnimClose 0.8s linear forwards 1;
}
@-webkit-keyframes blendeBotAnimClose {
  100%{opacity: 1; margin-left: 0%;background-color: #e32d13;}
  20%{opacity: 1;}
  0%{opacity: 0; margin-left: -300%;background-color: #000000;}
}
@keyframes blendeBotAnimClose {
  100%{opacity: 1; margin-left: 0%;background-color: #e32d13;}
  20%{opacity: 1;}
  0%{opacity: 0; margin-left: -300%;background-color: #000000;}
}

.ctaAnim{
  	-webkit-animation: ctaAnim 0.5s ease-in-out forwards 1;
    animation: ctaAnim 0.5s ease-in-out forwards 1;
}
@-webkit-keyframes ctaAnim {
  0%{opacity: 0; -webkit-transform: scale(0.5);}
  50%{opacity: 1; -webkit-transform: scale(1.1);}
  100%{opacity: 1; -webkit-transform: scale(1);}
}
@keyframes ctaAnim {
  0%{opacity: 0; transform: scale(0.5);}
  50%{opacity: 1; transform: scale(1.1);}
  100%{opacity: 1; transform: scale(1);}
}

.ctaBounce{
  	-webkit-animation: ctaBounce 2s ease-in-out forwards 1;
    animation: ctaBounce 2s ease-in-out forwards 1;
}
@-webkit-keyframes ctaBounce {
  0%{opacity: 1; -webkit-transform: scale(1);}
  12%{opacity: 1; -webkit-transform: scale(1.1);}
  25%{opacity: 1; -webkit-transform: scale(1);}
  75%{opacity: 1; -webkit-transform: scale(1);}
  87%{opacity: 1; -webkit-transform: scale(1.1);}
  100%{opacity: 1; -webkit-transform: scale(1);}
}
@keyframes ctaBounce {
  0%{opacity: 1; transform: scale(1);}
  12%{opacity: 1; transform: scale(1.1);}
  25%{opacity: 1; transform: scale(1);}
  75%{opacity: 1; transform: scale(1);}
  87%{opacity: 1; transform: scale(1.1);}
  100%{opacity: 1; transform: scale(1);}
}


.horizontalReveal{
  	-webkit-animation: horizontalReveal 1s cubic-bezier(0.495, 0.005, 0.165, 0.975) forwards 1;
    animation: horizontalReveal 1s cubic-bezier(0.495, 0.005, 0.165, 0.975) forwards 1;
}
@-webkit-keyframes horizontalReveal {
  0%{width: 0%;}
  100%{width: 100%;}
}
@keyframes horizontalReveal {
  0%{width: 0%;}
  100%{width: 100%;}
}

.bg_container.animated{
	-webkit-animation: bgAnim 1.5s cubic-bezier(0.110, 0.440, 0.000, 1.000) forwards 1;
  animation: bgAnim 1.5s cubic-bezier(0.110, 0.440, 0.000, 1.000) forwards 1;
}

@-webkit-keyframes bgAnim {
    0%{-webkit-transform: scale(1.2);opacity:0.3;}
    50%{opacity: 1;}
    100%{-webkit-transform: scale(1); opacity: 1;}
}
@keyframes bgAnim {
    0%{transform: scale(1.2);opacity:0.3;}
    50%{opacity: 1;}
    100%{transform: scale(1); opacity: 1;}
}

.bgGradAnim{
  	-webkit-animation: bgGradAnim 1s linear forwards 1;
    animation: bgGradAnim 1s linear forwards 1;
}
@-webkit-keyframes bgGradAnim {0%{opacity:1;}100%{opacity: 0;}}
@keyframes bgGradAnim {0%{opacity:1;}100%{opacity: 0;}}


.main.animated{
  -webkit-animation: mainAnimIn 0.9s cubic-bezier(0.110, 0.440, 0.000, 1.000) forwards 1;
   animation: mainAnimIn 0.9s cubic-bezier(0.110, 0.440, 0.000, 1.000) forwards 1;
}

@-webkit-keyframes mainAnimIn {
  0%{-webkit-transform: scale(0.1); opacity: 0;}
  50%{opacity: 1;}
  100%{-webkit-transform: scale(1); opacity: 1;}
}
@keyframes mainAnimIn {
  0%{transform: scale(0.1); opacity: 0;}
  50%{opacity: 1;}
  100%{transform: scale(1); opacity: 1;}
}

.overlay1, .overlay2, .overlay3, .overlay4{
    position: absolute;
    top: 0;
}

.animated .overlay1, .animated .overlay2, .animated .overlay3,.animated .overlay4{
  -webkit-animation: overLayAnim 1.5s cubic-bezier(0.110, 0.440, 0.000, 1.000) forwards 1;
   animation: overLayAnim 1.5s cubic-bezier(0.110, 0.440, 0.000, 1.000) forwards 1;
}

@-webkit-keyframes overLayAnim {
  0%{-webkit-transform: scale(0.1); opacity: 0;}
  50%{opacity: 1;}
  100%{-webkit-transform: scale(1); opacity: 1;}
}
@keyframes overLayAnim {
  0%{transform: scale(0.5); opacity: 0;}
  20%{opacity: 1;}
  100%{transform: scale(1); opacity: 1;}
}

.logoAnim_Left{
  animation: logoAnim_Left .5s ease-in-out 1 forwards;
  -webkit-animation: logoAnim_Left .5s ease-in-out 1 forwards; 
}
@keyframes logoAnim_Left {
  0%{transform: translate(110px,0px);}
  100%{transform: translate(0px,0px);}
}
@-webkit-keyframes logoAnim_Left {
  0%{-webkit-transform: translate(110px,0px);}
  100%{-webkit-transform: translate(0px,0px);};
}

.logoAnim_Right{
  animation: logoAnim_Right .5s ease-in-out 1 forwards;
  -webkit-animation: logoAnim_Right .5s ease-in-out 1 forwards; 
}
@keyframes logoAnim_Right {
  0%{transform: translate(-110px,0px);}
  100%{transform: translate(0px,0px);}
  }
@-webkit-keyframes logoAnim_Right {
  0%{-webkit-transform: translate(-110px,0px);}
  100%{-webkit-transform: translate(0px,0px);}

  }

.logoAnim_Claim{
  animation: logoAnim_Claim .4s ease-out 1 forwards;
  -webkit-animation: logoAnim_Claim .4s ease-out 1 forwards; 
}
@keyframes logoAnim_Claim {
  0%{transform: translate(0px,-10px);}
  100%{transform: translate(0px,0px);}
  }
@-webkit-keyframes logoAnim_Claim {  
  0%{-webkit-transform: translate(0px,-10px);}
  100%{-webkit-transform: translate(0px,0px);}
  }


.videoContainer{
    overflow: hidden;
}

.videoElem{
    top: 100%;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#videoPlayer{
    pointer-events: all;
}

.videoElem.visible{
    top: 0;
}

#playPause, #muteOnOff{
    pointer-events: all;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 10;
    -webkit-transform:  translate3d(0px, 0px, 0px);
    transform:  translate3d(0px, 0px, 0px);
    
}

#playPause:hover, #muteOnOff:hover{
    opacity: 0.7;
}

#playPause{
    background-image: url(2019_7MAXX_RanNFL_Flight1_Sitebar_300x600_pause.svg);
}

#muteOnOff{
    background-image: url(2019_7MAXX_RanNFL_Flight1_Sitebar_300x600_mute_on.svg);
}

#playPause.paused{
    background-image: url(2019_7MAXX_RanNFL_Flight1_Sitebar_300x600_play.svg);
}

#muteOnOff.muted{
    background-image: url(2019_7MAXX_RanNFL_Flight1_Sitebar_300x600_mute_off.svg);
}

.playBtn{
    -webkit-transition: .2s;
    transition: .2s;
    pointer-events: none;
    cursor: pointer;
    opacity: 0;
}

.playBtn.active{
    opacity: 1;
    pointer-events: all;
}

.playBtn:hover img{
	opacity: 0.8;
}

.gradBot{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5c757c+0,5c757c+44,424959+84&0+0,1+44 */
background: -moz-linear-gradient(top,  rgba(92,117,124,0) 0%, rgba(92,117,124,1) 44%, rgba(66,73,89,1) 84%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(92,117,124,0) 0%,rgba(92,117,124,1) 44%,rgba(66,73,89,1) 84%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(92,117,124,0) 0%,rgba(92,117,124,1) 44%,rgba(66,73,89,1) 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005c757c', endColorstr='#424959',GradientType=0 ); /* IE6-9 */

}
.gradBot{
    opacity: 0.4;
    height: 254px;
    top: auto;
    bottom: -80px;
    width: 1200px;
    left: -450px;
/*background-color: red;*/

}

.gradBot2{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#424959+0,424959+100&1+0,0+15,0+85,1+100 */
background: -moz-linear-gradient(left,  rgba(66,73,89,1) 0%, rgba(66,73,89,0) 15%, rgba(66,73,89,0) 85%, rgba(66,73,89,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(66,73,89,1) 0%,rgba(66,73,89,0) 15%,rgba(66,73,89,0) 85%,rgba(66,73,89,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(66,73,89,1) 0%,rgba(66,73,89,0) 15%,rgba(66,73,89,0) 85%,rgba(66,73,89,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.flash{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+14,0.6+23,0.2+27,0.4+36,0+66 */
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 14%, rgba(255,255,255,0.6) 23%, rgba(255,255,255,0.2) 27%, rgba(255,255,255,0.4) 36%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 14%,rgba(255,255,255,0.6) 23%,rgba(255,255,255,0.2) 27%,rgba(255,255,255,0.4) 36%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 14%,rgba(255,255,255,0.6) 23%,rgba(255,255,255,0.2) 27%,rgba(255,255,255,0.4) 36%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


    opacity: 0.5;
}


.flash{
    opacity: 0;
    width: 100px;
    height: 100px;
/*
        opacity: 1;
    border: 1px solid red;
*/
    top: 0;
    left: 0;
}
.flash_1{
    top: 235px;
    left: 170px;
    -webkit-transform: scale(3);
    transform: scale(3);
}
.flash_2{
    top: 280px;
    left: 470px;
     -webkit-transform: scale(2);
    transform: scale(2);
}
.flash_3{
    top: 174px;
    left: 456px;
     -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.flash_4{
    top: 135px;
    left: 150px;
     -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


/*
.animated .flash_1{
  -webkit-animation: flashAnim 1s ease-in-out 0.5s 1 forwards;
  animation: flashAnim 1s ease-in-out 0.5s 1 forwards;
}
.animated .flash_2{
  -webkit-animation: flashAnim 1.5s ease-in-out 1 forwards;
  animation: flashAnim 1.5s ease-in-out 1 forwards;
}

.animated .flash_3{
  -webkit-animation: flashAnim 1.2s ease-in-out 0.3s 1 forwards; 
  animation: flashAnim 1.2s ease-in-out 0.3s 1 forwards;
}

.animated .flash_4{
  -webkit-animation: flashAnim 1.3s ease-in-out 0.2s 1 forwards; 
  animation: flashAnim 1.3s ease-in-out 0.2s 1 forwards;
}
*/

@-webkit-keyframes flashAnim {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes flashAnim {
     0%{opacity: 0;}
    10%{opacity: 0.3;}
    30%{opacity: 0;}
    35%{opacity: 0;}
    45%{opacity: 0.2;}
    55%{opacity: 0;}
    65%{opacity: 0;}
    75%{opacity: 0.2;}
   100%{opacity: 0;}
}

/* ------------------------------------------- FÜR MUTATIONEN ------------------------------------------- */

/*MAXIMALE-BREITE FÜR RESPONSIVE ADS*/
.wrapper{
   max-width: 900px; /* AUCH IN SCRIPT ÄNDERN*/
}

/*--------------------------------------------------------*/
/*-------------------------START AUTO---------------------*/
/*--------------------------------------------------------*/

#banner, .title, .textTop, .bg, .date{
width: 300px;
height: 600px;
  }
  
  .title_container_mask{
height: 225px;
  }
  
  .title_container{
margin-top: -52px;
top: -375px;
height: 427px;
  }
  
  .date_container{
height: 173px;
  }
  
  .date{
margin-bottom: 26px;
  }

/*--------------------------------------------------------*/
/*-------------------------END AUTO---------------------*/
/*--------------------------------------------------------*/




/* ----------- GRÖSSEN ----------- */
/* ------------------------------ */

.logo{
  width: 124px;
  height: 24px;
  bottom: 41px;
}

.bgImg{
  width: 700px;
  height: 800px;
  margin-left: -200px;
  margin-top: -100px;
}

.main .mainImg{
    width: 395px;
    height: 650px;
    margin-left: -95px;
}

.redLine{
  height: 2px;
  width: 260px;
  left: 20px;
}

/* ------------------------------ */





/* ----------- BLENDE ----------- */
/* ------------------------------ */

.blende_top, .blende_bot{
  width: 1000%;
  height: 100%;
}

.blende_top{
  right: -949%;
}
.blende_bot{
  left: -949%;
}

/* ------------------------------ */




/* ----- TRANSFORM-ORIGINS ------ */
/* ------------------------------ */

.cta{
  transform-origin: 50% 82%;
}

.overlay1{
    transform-origin: 7% 55%;
    top: 0;
    margin-left: -35px;
}

.overlay2{
    transform-origin: 66% 28%;
}

.overlay3{
    transform-origin: 50% 64%;
}

.overlay4{
    transform-origin: 16% 50%;
}

/* ------------------------------ */




/* ------- VIDEO-RELATED -------- */
/* ------------------------------ */

.videoContainer{
    width: 252px;
    height: 141px;
    left: 0;
    right: 0;
    margin: auto;
    top: 190px;
}
#playPause, #muteOnOff{
   
    width: 15px;
    height: 15px;
    bottom: 4px;
    
}
#playPause{
    left: 5px;
}

#muteOnOff{
    right: 5px;
}

.playBtn{
    width: 10px;
    height: 10px;
    left: 0;
    right: 0;
    margin: auto;
    top: 320px;
}

.playBtn.active{
    width: 35px;
	height: 50px;
}

/* ------------------------------ */

/* ------------------------- DEBUG MODE ------------------------- */

/*
.title_container_mask, .title_main_mask, .title_container{overflow: visible;}
.title_container{background-color: rgba(0, 69, 255, 0.26);}
.title_container_mask{background-color: rgba(255, 0, 0, 0.31);}
.title_main_mask{background-color: rgba(0, 255, 29, 0.19);}
*/