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

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

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

.image img{
    width: 300px
}
*/
#blende{
    width: 100%;
    height: 100%;
/*    display: none;*/
    background-color: #401f42;
    transform-origin: 100% 100%;
    -webkit-animation: blende 1.4s forwards 1;
    animation: blende 1.4s 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{
    transform-origin: 50% 30%;
    -webkit-animation: cta 10s ease-in-out forwards 1;
    animation: cta 10s ease-in-out forwards 1;
}

#spot1{
    left: 7px;
    top: 14px;
    -webkit-animation: spot1 4s ease-in-out forwards infinite;
    animation: spot1 4s ease-in-out forwards infinite;
}

#spot2{
    left: 153px;
    top: 51px;
    -webkit-animation: spot2 5s ease-in-out forwards infinite;
    animation: spot2 5s ease-in-out forwards infinite;
}

#spot3{
    left: 264px;
    top: 14px;
     -webkit-animation: spot1 6s ease-in-out forwards infinite;
    animation: spot1 6s ease-in-out forwards infinite;
}

#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: sh2 10s linear forwards 1;
    animation: sh2 10s linear forwards 1;
}

#logo {
}

#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;
}
.videoContainer{
/*    display: none;*/
    pointer-events: none;
    height: 100%;
    width: 100%;
    
}
#videoElem{
    pointer-events: all;
    transform-origin: 50% 50%;
    bottom: 210px;
    width: 100%;
    height: 170px;
    margin-bottom: 0px
    -webkit-animation: vid 10s ease-in-out forwards 1;
    animation: vid 10s ease-in-out forwards 1;
    
}
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;
}

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

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

/*BLENDE*/

@-webkit-keyframes blende {0%{opacity:1;height: 100%;}50%{opacity:1;height: 100%;}62%{opacity:1;}100%{opacity:0; height:0;}}
@keyframes blende {0%{opacity:1;height: 100%;}50%{opacity:1;height: 100%;}62%{opacity:1;}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 vid {0%{opacity: 0;}60%{ height: 0px; opacity: 0;}65%{height: 170px; opacity: 1;}}
@keyframes vid {0%{opacity: 0;}60%{ height: 0px; opacity: 0;}65%{height: 170px; opacity: 1;}}


@-webkit-keyframes spot1 {0%{opacity: 1;}20%{opacity: 0.6;}30%{opacity: 0.85;}40%{opacity: 1;}60%{opacity: 0.9;}80%{opacity: 0.7;}100%{opacity: 1;}}
@keyframes spot1 {0%{opacity: 1;}20%{opacity: 0.6;}30%{opacity: 0.85;}40%{opacity: 1;}60%{opacity: 0.9;}80%{opacity: 0.7;}100%{opacity: 1;}}

@-webkit-keyframes spot2 {0%{opacity: 0.6;}10%{opacity: 0.85;}20%{opacity: 1;}40%{opacity: 0.9;}60%{opacity: 0.7;}80%{opacity: 1;}100%{opacity: 0.6;}}
@keyframes spot2 {0%{opacity: 0.6;}10%{opacity: 0.85;}20%{opacity: 1;}40%{opacity: 0.9;}60%{opacity: 0.7;}80%{opacity: 1;}100%{opacity: 0.6;}}

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

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

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

@-webkit-keyframes textTop {0%{opacity: 0;}20%{top:10px; opacity: 0;}25%{top: 0; opacity: 1;}100%{top: 0; opacity: 1;}}
@keyframes textTop {0%{opacity: 0;}20%{top:10px; opacity: 0;}25%{top: 0; opacity: 1;}100%{top: 0; opacity: 1;}}

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

@-webkit-keyframes sh2 {0%{opacity:0;}45%{opacity:0;}50%{opacity:1;}100%{opacity:1;}}
@keyframes sh2 {0%{opacity:0;}45%{opacity:0;}50%{opacity:1;}100%{opacity:1;}}

@-webkit-keyframes cta {0%{opacity: 0; -webkit-transform: scale(0.5);}70%{opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5);}73%{-webkit-transform: scale(1.1);transform: scale(1.1); opacity: 1;}75%{-webkit-transform: scale(1);transform: scale(1);}96%{-webkit-transform: scale(1);transform: scale(1);}98%{-webkit-transform: scale(1.1);transform: scale(1.1);}100%{-webkit-transform: scale(1);transform: scale(1);opacity: 1;}}
@keyframes cta {0%{opacity: 0; transform: scale(0.5);}70%{opacity: 0; transform: scale(0.5);}73%{transform: scale(1.1); opacity: 1;}75%{transform: scale(1);}96%{transform: scale(1);}98%{transform: scale(1.1);}100%{transform: scale(1);opacity: 1;}}