body{
    width: 300px;
    height: 600px;
    overflow: hidden;
    margin: 0;
}

div{
    position:absolute;
    overflow: hidden;
}
img{
    width: 100%;
}

#banner {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000000;
  cursor: pointer;
  overflow: hidden;
  transform-origin: 0% 0%;
  background-color: #272727;
}
.border{
    pointer-events: none;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid white;
}

.logoContainer{
    width: 107px;
    height: 40px;
    top: 544px;
    left: 96px;
    overflow: visible;
}
.logo{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    
}
.shadow{
    top: 1px;
}

#interactionLayer{
    width: 100%;
    height: 100%;
}

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-sound {
    right:5px  
}

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

.blende{
    pointer-events: none;
    width: 100%;
    height: 100%;
    background-color: black;
}
.vidCover{
    pointer-events: none;
    top: 357px;
    width: 100%;
    height: 172px;
    background-color: #272727;
    -webkit-animation: vidCov 10s ease-in-out 1 forwards;
    -ms-animation: vidCov 10s ease-in-out 1 forwards;
    animation: vidCov 10s ease-in-out 1 forwards;
}

.L{
     -webkit-animation: animL 10s ease-in-out 1 forwards;
    -ms-animation: animL 10s ease-in-out 1 forwards;
    animation: animL 10s ease-in-out 1 forwards;
}
.R{
     -webkit-animation: animR 10s ease-in-out 1 forwards;
    -ms-animation: animR 10s ease-in-out 1 forwards;
    animation: animR 10s ease-in-out 1 forwards;
}
#Limg{
     -webkit-animation: animLop 10s ease-in-out 1 forwards;
    -ms-animation: animLop 10s ease-in-out 1 forwards;
    animation: animLop 10s ease-in-out 1 forwards;
}
#Rimg{
     -webkit-animation: animRop 10s ease-in-out 1 forwards;
    -ms-animation: animRop 10s ease-in-out 1 forwards;
    animation: animRop 10s ease-in-out 1 forwards;
}
.blende{
    -webkit-animation: b 10s ease-in-out 1 forwards;
    -ms-animation: b 10s ease-in-out 1 forwards;
    animation: b 10s ease-in-out 1 forwards;
}

.dt{
    transform-origin: 50% 8%;
    -webkit-animation: dt 1s ease-in-out 1 forwards;
    -ms-animation: dt 1s ease-in-out 1 forwards;
    animation: dt 1s ease-in-out 1 forwards;
}
.ankR{
    transform-origin: 75% 315px;
    -webkit-animation: ankR 10s ease-in-out 1 forwards;
    -ms-animation: ankR 10s ease-in-out 1 forwards;
    animation: ankR 10s ease-in-out 1 forwards;
}
.ankL{
    transform-origin: 25% 315px;
    -webkit-animation: ankL 10s ease-in-out 1 forwards;
    -ms-animation: ankL 10s ease-in-out 1 forwards;
    animation: ankL 10s ease-in-out 1 forwards;
}
.ankL_text{
    -webkit-animation: ankLtxt 2.8s ease-out 1 forwards;
    -ms-animation: ankLtxt 2.8s ease-out 1 forwards;
    animation: ankLtxt 2.8s ease-out 1 forwards;
}
.ankR_text{
    -webkit-animation: ankRtxt 4.3s ease-out 1 forwards;
    -ms-animation: ankRtxt 4.3s ease-out 1 forwards;
    animation: ankRtxt 4.3s ease-out 1 forwards;
}
#logo1{
    -webkit-animation: logoL 1s linear 1 forwards;
    -ms-animation: logoL 1s linear 1 forwards;
    animation: logoL 1s linear 1 forwards;
}
#logo2{
    -webkit-animation: logoL1 1s linear 1 forwards;
    -ms-animation: logoL1 1s linear 1 forwards;
    animation: logoL1 1s linear 1 forwards;
}
#logo3{
    transform-origin: 50% 80%;
    -webkit-animation: logoText 1s linear 1 forwards;
    -ms-animation: logoText 1s linear 1 forwards;
    animation: logoText 1s linear 1 forwards;
}
#logo4{
    -webkit-animation: logoL2 1s linear 1 forwards;
    -ms-animation: logoL2 1s linear 1 forwards;
    animation: logoL2 1s linear 1 forwards;
}
.topContainer{
    width: 100%;
    height: 355px;
}
.vidElemCont{
    width: 100%;
    height: 170px;
    top: 358px;
}
#videoElem{
    transform-origin: 50% 50%;
    top: 0px;
    width: 100%;
    height: 100%;
}

@-webkit-keyframes vidCov {0%{opacity: 1;}20%{opacity: 0;}100%{opacity: 0;}}
@-ms-keyframes vidCov {0%{opacity: 1;}20%{opacity: 0;}100%{opacity: 0;}}
@keyframes vidCov {0%{opacity: 1;}15%{opacity: 0;}100%{opacity: 0;}}

@-webkit-keyframes b {0%{opacity: 1;}5%{opacity: 0;}100%{opacity: 0;}}
@-ms-keyframes b {0%{opacity: 1;}5%{opacity: 0;}100%{opacity: 0;}}
@keyframes b {0%{opacity: 1;}5%{opacity: 0;}100%{opacity: 0;}}

@-webkit-keyframes animL {0%{-webkit-transform: translate(0px,150px);}5%{-webkit-transform: translate(0px,150px);}10%{-webkit-transform: translate(0,0);}100%{-webkit-transform: translate(0,0);}}
@-ms-keyframes animL {0%{-ms-transform: translate(0px,150px);}5%{-ms-transform: translate(0px,150px);}10%{-ms-transform: translate(0,0);}100%{-moz-transform: translate(0,0);}}
@keyframes animL {0%{transform: translate(0px,150px);}5%{transform: translate(0px,150px);}10%{transform: translate(0,0);}100%{transform: translate(0,0);}}

@-webkit-keyframes animR {0%{-webkit-transform: translate(0px,150px);}5%{-webkit-transform: translate(0px,150px);}11%{-webkit-transform: translate(0,0);}100%{-webkit-transform: translate(0,0);}}
@-ms-keyframes animR {0%{-ms-transform: translate(0px,150px);}5%{-ms-transform: translate(0px,150px);}11%{-ms-transform: translate(0,0);}100%{-moz-transform: translate(0,0);}}
@keyframes animR {0%{transform: translate(0px,150px);}5%{transform: translate(0px,150px);}11%{transform: translate(0,0);}100%{transform: translate(0,0);}}

@-webkit-keyframes animLop {0%{opacity: 0;}5%{opacity: 0;}7%{opacity: 1;}100%{opacity: 1;}}
@-ms-keyframes animLop {0%{opacity: 0;}5%{opacity: 0;}7%{opacity: 1;}100%{opacity: 1;}}
@keyframes animLop {0%{opacity: 0;}5%{opacity: 0;}7%{opacity: 1;}100%{opacity: 1;}}

@-webkit-keyframes animRop {0%{opacity: 0;}6%{opacity: 0;}7%{opacity: 1;}100%{opacity: 1;}}
@-ms-keyframes animRop {0%{opacity: 0;}6%{opacity: 0;}7%{opacity: 1;}100%{opacity: 1;}}
@keyframes animRop {0%{opacity: 0;}6%{opacity: 0;}7%{opacity: 1;}100%{opacity: 1;}}

@-webkit-keyframes dt {0%{opacity: 0;}50%{opacity: 0;-webkit-transform: scale(0.5);}100%{opacity: 1; -webkit-transform: scale(1);}}
@-ms-keyframes dt {0%{opacity: 0;}50%{opacity: 0;-ms-transform: scale(0.5);}100%{opacity: 1; -ms-transform: scale(1);}}
@keyframes dt {0%{opacity: 0;}50%{opacity: 0;transform: scale(0.5);}100%{opacity: 1; transform: scale(1);}}

@-webkit-keyframes ankL {0%{opacity: 0;}9%{opacity: 0;-webkit-transform: translate(80px,0px); -webkit-filter: blur(3px);}11%{opacity: 1; -webkit-transform: translate(0px,0px); -webkit-filter: blur(0px);}25%{-webkit-transform: scale(1);}26%{-webkit-transform: scale(1.2);}27%{-webkit-transform: scale(1.2);}28%{-webkit-transform: scale(1);}}
@-ms-keyframes ankL {0%{opacity: 0;}9%{opacity: 0;-ms-transform: translate(80px,0px); -ms-filter: blur(3px);}11%{opacity: 1; -ms-transform: translate(0px,0px); -ms-filter: blur(0px);}25%{-ms-transform: scale(1);}26%{-ms-transform: scale(1.2);}27%{-ms-transform: scale(1.2);}28%{-ms-transform: scale(1);}}
@keyframes ankL {0%{opacity: 0;}9%{opacity: 0;transform: translate(80px,0px); filter: blur(3px);}11%{opacity: 1; transform: translate(0px,0px); filter: blur(0px);}25%{transform: scale(1);}26%{transform: scale(1.2);}27%{transform: scale(1.2);}28%{transform: scale(1);}}

@-webkit-keyframes ankR {0%{opacity: 0;}9%{opacity: 0;-webkit-transform: translate(-80px,0px); -webkit-filter: blur(3px);}11%{opacity: 1; -webkit-transform: translate(0px,0px); -webkit-filter: blur(0px);}40%{-webkit-transform: scale(1);}41%{-webkit-transform: scale(1.2);}42%{-webkit-transform: scale(1.2);}43%{-webkit-transform: scale(1);}}
@-ms-keyframes ankR {0%{opacity: 0;}9%{opacity: 0;-ms-transform: translate(-80px,0px); -ms-filter: blur(3px);}11%{opacity: 1; -ms-transform: translate(0px,0px); -ms-filter: blur(0px);}40%{-ms-transform: scale(1);}41%{-ms-transform: scale(1.2);}42%{-ms-transform: scale(1.2);}43%{-ms-transform: scale(1);}}
@keyframes ankR {0%{opacity: 0;}9%{opacity: 0;transform: translate(-80px,0px); filter: blur(3px);}11%{opacity: 1; transform: translate(0px,0px); filter: blur(0px);}40%{transform: scale(1);}41%{transform: scale(1.2);}42%{transform: scale(1.2);}43%{transform: scale(1);}}

@-webkit-keyframes ankLtxt {0%{opacity: 0;}94%{opacity: 0;-webkit-transform: translate(0px,5px);}100%{opacity: 1; -webkit-transform: translate(0px,0px)}}
@-ms-keyframes ankLtxt {0%{opacity: 0;}94%{opacity: 0;-ms-transform: translate(0px,5px);}100%{opacity: 1; -ms-transform: translate(0px,0px);}}
@keyframes ankLtxt {0%{opacity: 0;}94%{opacity: 0;transform: translate(0px,5px);}100%{opacity: 1; transform: translate(0px,0px);}}

@-webkit-keyframes ankRtxt {0%{opacity: 0;}96%{opacity: 0;-webkit-transform: translate(0px,5px);}100%{opacity: 1; -webkit-transform: translate(0px,0px)}}
@-ms-keyframes ankRtxt {0%{opacity: 0;}96%{opacity: 0;-ms-transform: translate(0px,5px);}100%{opacity: 1; -ms-transform: translate(0px,0px);}}
@keyframes ankRtxt {0%{opacity: 0;}96%{opacity: 0;transform: translate(0px,5px);}100%{opacity: 1; transform: translate(0px,0px);}}


@-webkit-keyframes logoL1 {0%{opacity: 0;}70%{opacity: 0;-webkit-transform: translate(-50px,0px);}100%{opacity: 1; -webkit-transform: translate(0px,0px)}}
@-ms-keyframes logoL1 {0%{opacity: 0;}70%{opacity: 0;-ms-transform: translate(-50px,0px);}100%{opacity: 1; -ms-transform: translate(0px,0px);}}
@keyframes logoL1 {0%{opacity: 0;}70%{opacity: 0;transform: translate(-50px,0px);}100%{opacity: 1; transform: translate(0px,0px);}}

@-webkit-keyframes logoL2 {0%{opacity: 0;}70%{opacity: 0;-webkit-transform: translate(50px,0px);}100%{opacity: 1; -webkit-transform: translate(0px,0px)}}
@-ms-keyframes logoL2 {0%{opacity: 0;}70%{opacity: 0;-ms-transform: translate(50px,0px);}100%{opacity: 1; -ms-transform: translate(0px,0px);}}
@keyframes logoL2 {0%{opacity: 0;}70%{opacity: 0;transform: translate(50px,0px);}100%{opacity: 1; transform: translate(0px,0px);}}

@-webkit-keyframes logoText {0%{opacity: 0;}70%{opacity: 0;}100%{opacity: 1;}}
@-ms-keyframes logoText {0%{opacity: 0;}70%{opacity: 0;}100%{opacity: 1;}}
@keyframes logoText {0%{opacity: 0;}70%{opacity: 0;}100%{opacity: 1;}}

@-webkit-keyframes logoL {0%{opacity: 0;}30%{opacity: 0;}100%{opacity: 1;}}
@-ms-keyframes logoL {0%{opacity: 0;}30%{opacity: 0;}100%{opacity: 1;}}
@keyframes logoL {0%{opacity: 0;}30%{opacity: 0;}100%{opacity: 1;}}