body{
    
    width: 300px;
    height: 250px;
    overflow: hidden;
    margin: 0;
}
.image, .text, .spot, .interactionLayer
.cont, #videoElem, #blende, #ball{
    position:absolute;
    overflow: hidden;
    pointer-events: none;
}
#logo1, #logo2, .text, .shadow{
    pointer-events: none;
    top: 0;
    left: 0;
}
.interactionLayer{
    height: 100%;
    width: 100%;
    pointer-events: all;
}

#banner {
  position: relative;
  width: 300px;
  height: 250px;
  background-color: #000000;
  cursor: pointer;
  overflow: hidden;
    transform-origin: 0% 0%;
}

.text img, .image img{
    width: 300px;
    height: auto;
}

#blende{
    width: 100%;
    height: 100%;
/*    display: none;*/
    background-color: #401f42;
    transform-origin: 100% 100%;
    -webkit-animation: blende 10s forwards 1;
    animation: blende 10s forwards 1;
    bottom: 0;
}

.p1{
    -webkit-animation: p1 10s ease-in-out forwards 1;
    animation: p1 10s ease-in-out forwards 1;
}

.p2{
/*    display: none;*/
    left: -30px;
    -webkit-animation: p2 10s ease-in-out forwards 1;
    animation: p2 10s ease-in-out forwards 1;
}

.p3{
/*    display: none;*/
    right: -20px;
    -webkit-animation: p3 10s ease-in-out forwards 1;
    animation: p3 10s ease-in-out forwards 1;
}

.cta{
    width: 100%;
    height: 100%;
    transform-origin: 38% 86%;
    -webkit-animation: cta 10s ease-in-out forwards 1;
    animation: cta 10s ease-in-out forwards 1;
}
.cta img{
    position: absolute;
}


#textTop{
  
    transform-origin: 100% 100%;
    -webkit-animation: textTop 10s linear forwards 1;
    animation: textTop 10s linear forwards 1;
}

#sendehinw1{
    
    transform-origin: 100% 100%;
    -webkit-animation: sh1 10s linear forwards 1;
    animation: sh1 10s linear forwards 1;
}

#sendehinw2{
    
    transform-origin: 100% 100%;
    -webkit-animation: sh2 10s linear forwards 1;
    animation: sh2 10s linear forwards 1;
}

#sendehinw3{
    
    transform-origin: 100% 100%;
    -webkit-animation: sh3 10s linear forwards 1;
    animation: sh3 10s linear forwards 1;
}


#ball {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    -webkit-animation: ball 10s linear forwards 1;
    animation: ball 10s linear forwards 1;
    pointer-events: none;
}
#ball img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 35%;
}

.hidden{
    display: none;
}
.playBtn{
    position: absolute;
    width: 35px;
    height: 35px;
    top: 103px;
    left: 11px;
    -webkit-animation: playBtn 10s ease-in-out forwards 1;
    animation: playBtn 10s ease-in-out forwards 1;
}
.playBtn img{
    width: 100%;
    height: 100%;
}
.videoContainer{
    position: absolute;
    top: 0;
    top: 57px;
    width: 0;
    height: 170px;
    pointer-events: none;
    -webkit-transition: .4s;
    transition: .4s;
}
#videoContainer{
    
}
#videoElem{
    position: absolute;
    width: 300px;;
    height: 170px;
    top: 0;
    right: 0;
}

adform-video-seek-bar-border,
.adform-video-seek-bar-border,
.adform-video-seek-bar-background,
.adform-video-seek-bar-loaded,
.adform-video-seek-bar-played,
.adform-video-full-screen{
    display: none;
}

.adform-video-play-pause, .adform-video-stop, .adform-video-rewind, .adform-video-full-screen, .adform-video-sound {
    width: 15px;
    height: 15px;
}
.adform-video-play-pause {
    left: 5px;
    bottom: 14px;
    pointer-events: all;
}

.adform-video-sound {
    right:5px;
    bottom: 14px;
    pointer-events: all;
}

.adform-video-big-play{
    display: none;
}

.video-container video{
    width: 300px;
    height: auto;
    pointer-events: none;
}

#vidShadow{
    top: 0;
    -webkit-transition: .4s;
    transition: .4s;
    opacity: 0;
}

.fadeOut{
    -webkit-animation: fadeOut 10s ease-in-out forwards 1;
    animation: fadeOut 10s ease-in-out forwards 1;
}

.fadeIn{
    -webkit-animation: fadeIn 0.4s ease-in-out forwards 1;
    animation: fadeIn 0.4s ease-in-out forwards 1;
}


@-webkit-keyframes fadeOut {0%{opacity:1;}100%{opacity:0;}}
@keyframes fadeOut {0%{opacity:1;}100%{opacity:0;}}

@-webkit-keyframes fadeIn {0%{opacity:0;}100%{opacity:1;}}
@keyframes fadeIn {0%{opacity:0;}100%{opacity:1;}}

/*BLENDE*/

@-webkit-keyframes blende {0%{opacity:1;height: 100%;}7%{opacity:1;height: 100%;}9%{opacity:1;}14%{opacity:0;height:0;}90%{opacity:0;height: 0;}100%{opacity:0;height: 0;}}
@keyframes blende {0%{opacity:1;height: 100%;}7%{opacity:1;height: 100%;}9%{opacity:1;}14%{opacity:0;height:0;}90%{opacity:0;height: 0;}100%{opacity:0;height: 0;}}



@-webkit-keyframes ball {0%{-webkit-transform: rotate(-12deg);opacity:1;}7%{-webkit-transform: rotate(0deg);opacity:1;}10%{opacity: 0;}92%{-webkit-transform: rotate(-25deg);opacity: 0;}100%{opacity:0}}
@keyframes ball {0%{transform: rotate(-12deg);opacity:1;}7%{transform: rotate(0deg);opacity:1;}10%{opacity: 0;}92%{transform: rotate(-25deg);opacity: 0;}100%{opacity:0}}

/*MAIN*/

@-webkit-keyframes p1 {0%{top:100%;}16%{top:0px;}100%{top:0;}}
@keyframes p1 {0%{top:100%;}16%{top:0px;}100%{top:0;}}

@-webkit-keyframes p2 {0%{opacity: 0;}8%{left:40px; top: 100px; opacity: 0;}16%{left:-30px; top:0px; opacity: 1;}}
@keyframes p2 {0%{opacity: 0;}8%{left:40px; top: 100px; opacity: 0;}16%{left:-30px; top:0px; opacity: 1;}}

@-webkit-keyframes p3 {0%{opacity: 0;}8%{right:50px; top: 100px; opacity: 0;}16%{right:-20px; top:0px; opacity: 1;}}
@keyframes p3 {0%{opacity: 0;}8%{right:50px; top: 100px; opacity: 0;}16%{right:-20px; top:0px; opacity: 1;}}

/*TEXT*/
@-webkit-keyframes textTop {0%{opacity: 0;}10%{top:10px; opacity: 0;}13%{top: 0; opacity: 1;}100%{top: 0; opacity: 1;}}
@keyframes textTop {0%{opacity: 0;}10%{top:10px; opacity: 0;}13%{top: 0; opacity: 1;}100%{top: 0; opacity: 1;}}

@-webkit-keyframes sh1 {0%{opacity:0;}13%{opacity:0; top:10px;}16%{opacity:1; top:0px}100%{opacity:1;}}
@keyframes sh1 {0%{opacity:0;}13%{opacity:0; top:10px;}16%{opacity:1; top:0px}100%{opacity:1;}}

@-webkit-keyframes sh2 {0%{opacity:0;}13%{opacity:0; top:10px;}16%{opacity:1; top:0px}34%{opacity: 1;}36%{opacity: 0}100%{opacity:0;}}
@keyframes sh2 {0%{opacity:0;}13%{opacity:0; top:10px;}16%{opacity:1; top:0px}34%{opacity: 1;}36%{opacity: 0}100%{opacity:0;}}

@-webkit-keyframes sh3 {0%{opacity:0;}40%{opacity:0;}43%{opacity:1;}63%{opacity:1;}65%{opacity:0;}100%{opacity:0;}}
@keyframes sh3 {0%{opacity:0;}40%{opacity:0;}43%{opacity:1;}63%{opacity:1;}65%{opacity:0;}100%{opacity:0;}}

@-webkit-keyframes cta {0%{opacity: 0; -webkit-transform: scale(0.5);}65%{opacity: 0; -webkit-transform: scale(0.5);}68%{-webkit-transform: scale(1.1); opacity: 1;}70%{-webkit-transform: scale(1);}85%{-webkit-transform: scale(1);}87%{-webkit-transform: scale(1.1);}89%{-webkit-transform: scale(1);opacity: 1;}100%{-webkit-transform: scale(1);opacity: 1;}}
@keyframes cta {0%{opacity: 0; transform: scale(0.5);}65%{opacity: 0; transform: scale(0.5);}68%{transform: scale(1.1); opacity: 1;}70%{transform: scale(1);}85%{transform: scale(1);}87%{transform: scale(1.1);}89%{transform: scale(1);opacity: 1;}100%{transform: scale(1);opacity: 1;}}

@-webkit-keyframes playBtn {0%{opacity: 0; -webkit-transform: scale(0.5);}25%{opacity: 0; -webkit-transform: scale(0.5);}28%{-webkit-transform: scale(1.1); opacity: 1;}30%{-webkit-transform: scale(1);}100%{-webkit-transform: scale(1);opacity: 1;}}
@keyframes playBtn {0%{opacity: 0; transform: scale(0.5);}25%{opacity: 0; transform: scale(0.5);}28%{transform: scale(1.1); opacity: 1;}30%{transform: scale(1);}100%{transform: scale(1);opacity: 1;}}