body, .horizontalHiddenImg{
    width: 1140px !important;
    height: 250px;
    overflow: hidden;
    margin: 0;
}
.adCont{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
#banner {
  position: relative;
  width: 1140px;
  height: 250px;
  background-color: transparent;
  cursor: pointer;
  overflow: hidden;
  transform-origin: 50% 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

#logo {
  position: absolute;
  z-index: 100;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}


#logo img{
  width: 100%;
  height: 100%;
}

#cta{
  width: 100%;
  height: 100%;
  transform-origin: 50% 34%;
  opacity: 0;
}

.background{
  
}



div{
    position:absolute;
    overflow: hidden;
    pointer-events: none;
}

.interactiveLayer{
  width: 100%;
  height: 100%;
  pointer-events: all;
  z-index: -1;
}

#videoElem{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#videoPlayer{
    width: 100%;
    height: auto;
     z-index: -1;
}
.text img{
    width: 100%;
    height: auto;
}

#blende{
    z-index: 999;
/*    background-color: #510005;*/
  background: rgb(1,107,165);
  background: -webkit-linear-gradient(left, rgb(1,107,165) 0%, rgb(3,184,218) 52%, rgb(3,184,218) 63%, rgb(2,141,189) 100%);
  background: -o-linear-gradient(left, rgb(1,107,165) 0%, rgb(3,184,218) 52%, rgb(3,184,218) 63%, rgb(2,141,189) 100%);
  background: linear-gradient(to right, rgb(1,107,165) 0%, rgb(3,184,218) 52%, rgb(3,184,218) 63%, rgb(2,141,189) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#016ba5', endColorstr='#028dbd',GradientType=1 );
  transform-origin: 100% 100%;
  top: 0;
  opacity: 1;
}
.blende{
    width: 100%;
    height: 100%;
}
#blendeBlack{
  background-color: #034579;
  opacity: 1;
}

#blendeGradient{
  height: 80px;
  opacity: 0.3;
  bottom: 0;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 29%, rgba(0,0,0,0.3) 52%, rgba(0,0,0,1) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 29%,rgba(0,0,0,0.3) 52%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 29%,rgba(0,0,0,0.3) 52%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

#textTop, #title1, #title2, #sendehinw{
   
    transform-origin: 100% 100%;
}



#ball {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    z-index: 9999;

}
#ball img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 62px;
    z-index: 999;
}


.faded{
  top: 15px;
  opacity: 0;
}


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

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

.ctaAnim {
  animation: ctaAnim 3s ease-in-out 1 forwards;
  -webkit-animation: ctaAnim 3s ease-in-out 1 forwards;
}

@keyframes ctaAnim {0%{opacity:0; transform: scale(0.5);}10%{opacity: 1; transform: scale(1.1);}15%{transform: scale(1);}40%{transform: scale(1);}45%{transform: scale(1.1);}53%{transform: scale(1);}78%{transform: scale(1);}83%{transform: scale(1.1);}91%{transform: scale(1);}100%{opacity:1;}}
@-webkit-keyframes ctaAnim {0%{opacity:0; -webkit-transform: scale(0.5);}10%{opacity: 1; -webkit-transform: scale(1.1);}15%{-webkit-transform: scale(1);}40%{-webkit-transform: scale(1);}45%{-webkit-transform: scale(1.1);}53%{-webkit-transform: scale(1);}78%{-webkit-transform: scale(1);}83%{-webkit-transform: scale(1.1);}91%{-webkit-transform: scale(1);}100%{opacity:1;}}

.textTopHidden{
  width: 0;
}

.textTopReveal {
    animation: horizontalReveal 0.5s ease-in-out 1 forwards;
    -webkit-animation: horizontalReveal 0.5s ease-in-out 1 forwards;
}

.blendeIn {
    animation: blendeIn 0.5s ease-in-out 1 forwards;
    -webkit-animation: blendeIn 0.5s ease-in-out 1 forwards;
}


.blendeBlackIn {
    animation: blendeBlackIn 0.5s ease-in-out 1 forwards;
    -webkit-animation: blendeBlackIn 0.5s ease-in-out 1 forwards;
}

.blendeOut {
    animation: blendeOut 0.5s ease-in-out 1 forwards;
    -webkit-animation: blendeOut 0.5s ease-in-out 1 forwards;
}

.blendeBlackOut {
    animation: blendeBlackOut 0.5s ease-in-out 1 forwards;
    -webkit-animation: blendeBlackOut 0.5s ease-in-out 1 forwards;
}



.shutterBallInit{
    -webkit-animation: shutterBallInit 0.5s ease-in-out 1 forwards;
  animation: shutterBallInit 0.5s ease-in-out 1 forwards;
  
}
@-webkit-keyframes shutterBallInit {0%{opacity:0;}100%{opacity: 1;}}
@keyframes shutterBallInit {0%{opacity:0;}100%{opacity: 1;}}


.shutterBallOut {
    -webkit-animation: shutterBallOut 1.2s ease-in-out 1 forwards;
    animation: shutterBallOut 1.2s ease-in-out 1 forwards;
    
}
@-webkit-keyframes shutterBallOut {
    0%{-webkit-transform: rotate(-10deg);opacity:1;top: 0;}
    60%{top: 0;}70%{-webkit-transform: rotate(0deg);opacity:1;}
    100%{opacity: 0;top: -100%;}
}
@keyframes shutterBallOut {
    0%{transform: rotate(-10deg);opacity:1;top: 0;}
    30%{top: 0;}60%{transform: rotate(0deg);opacity:1;}
    100%{opacity: 0; top: -100%;}
}



.shutterBallIn {
    animation: shutterBallIn 0.5s ease-out 1 forwards;
    -webkit-animation: shutterBallIn 0.5s ease-out 1 forwards;
}
@-webkit-keyframes shutterBallIn {
    0%{-webkit-transform: rotate(-30deg) translateZ(0);opacity: 0; top: 10%;}
    100%{-webkit-transform: rotate(-10deg) translateZ(0);opacity:1; top: 0%;}
}
@keyframes shutterBallIn {
    0%{transform: rotate(-30deg) translateZ(0) scale(1);opacity: 0; top: 10%;}
    100%{transform: rotate(-10deg) translateZ(0) scale(1);opacity:1; top: 0%;}
}


@keyframes blendeIn {0%{top: 100%}100%{top: 0}}
@-webkit-keyframes blendeIn {0%{top: 100%}100%{top: 0}}

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

@keyframes blendeOut {0%{top: 0}100%{top: -100%}}
@-webkit-keyframes blendeOut {0%{top: 0}100%{top: -100%}}

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

@-webkit-keyframes blende {0%{opacity:1;transform: scaleY(1);}7%{opacity:1;transform: scaleY(1);}9%{opacity:1;}14%{opacity:0;transform: scaleY(0);}90%{opacity:0;transform: scaleY(0);}95%{opacity:1;}100%{opacity:1;transform: scaleY(1);}}
@-moz-keyframes blende {0%{opacity:1;transform: scaleY(1);}7%{opacity:1;transform: scaleY(1);}9%{opacity:1;}14%{opacity:0;transform: scaleY(0);}90%{opacity:0;transform: scaleY(0);}95%{opacity:1;}100%{opacity:1;transform: scaleY(1);}}
@-o-keyframes blende {0%{opacity:1;transform: scaleY(1);}7%{opacity:1;transform: scaleY(1);}9%{opacity:1;}14%{opacity:0;transform: scaleY(0);}90%{opacity:0;transform: scaleY(0);}95%{opacity:1;}100%{opacity:1;transform: scaleY(1);}}
@keyframes blende {0%{opacity:1;transform: scaleY(1);}7%{opacity:1;transform: scaleY(1);}9%{opacity:1;}14%{opacity:0;transform: scaleY(0);}90%{opacity:0;transform: scaleY(0);}95%{opacity:1;}100%{opacity:1;transform: scaleY(1);}}

@-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;}96%{opacity: 1;}100%{-webkit-transform: rotate(-12deg);opacity:1}}
@-moz-keyframes ball {0%{-moz-transform: rotate(-12deg);opacity:1;}7%{-moz-transform: rotate(0deg);opacity:1;}10%{opacity: 0;}92%{-moz-transform: rotate(-25deg);opacity: 0;}96%{opacity: 1;}100%{-moz-transform: rotate(-12deg);opacity:1}}
@-o-keyframes ball {0%{-o-transform: rotate(-12deg);opacity:1;}7%{-o-transform: rotate(0deg);opacity:1;}10%{opacity: 0;}92%{-o-transform: rotate(-25deg);opacity: 0;}96%{opacity: 1;}100%{-o-transform: rotate(-12deg);opacity:1}}
@keyframes ball {0%{transform: rotate(-12deg);opacity:1;}7%{transform: rotate(0deg);opacity:1;}10%{opacity: 0;}92%{transform: rotate(-25deg);opacity: 0;}96%{opacity: 1;}100%{transform: rotate(-12deg);opacity:1}}


/*TEXT*/

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

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

@keyframes horizontalReveal {0%{width:0;}100%{width:100%;}}
@-webkit-keyframes horizontalReveal {0%{width:0;}100%{width:100%;}}


/*ADFORM VIDEOPLAYER*/
/*---------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------*/
.playbtn{
  pointer-events: all;
	opacity: 1;
	position: absolute;
	width: 62px;
	height: 62px;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: pointer;
  -webkit-transition: .4s;
  transition: .4s;
}

.playbtnImg, .playbtnImgWrapper{
	pointer-events: all;
	transform-origin: 50% 50%;
}

.playbtnImg:hover{
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.playbtnImg{
	-webkit-transition: .4s;
  transition: .4s;
}
.playbtn img{
	width: 100%;
}

#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);
}
.videoControls{
    margin-top: 0;
    opacity: 1;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.videoControls.controlsHidden{
    margin-top: 10%;
    opacity: 0;
}

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

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

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

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

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

#playPause, #muteOnOff{
    width: 20px;
    height: 20px;
    top: 5px;
}

#playPause{
    left: 5px;
}

#muteOnOff{
    left: 28px;
}


#ballSmall{
    position: absolute;
    top: auto;
    bottom: 22px;
    left: auto;
    right: 23px;
    width: 62px;
    height: 62px;
    z-index: 99;
}
#ballSmall img{
   width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
}

.ball_iced{
    opacity: 1;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

.ball_iced.fadeOut {
    animation: fadeOut 1.5s ease-in-out 1 forwards;
    -webkit-animation: fadeOut 1.5s ease-in-out 1 forwards;
}
.gradContainerBot{
     z-index: -1;
}
.gradBot{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#034579+0,034579+100&0+0,1+64 */
background: -moz-linear-gradient(top,  rgba(3,69,121,0) 0%, rgba(3,69,121,1) 64%, rgba(3,69,121,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(3,69,121,0) 0%,rgba(3,69,121,1) 64%,rgba(3,69,121,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(3,69,121,0) 0%,rgba(3,69,121,1) 64%,rgba(3,69,121,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00034579', endColorstr='#034579',GradientType=0 ); /* IE6-9 */
    height: 45%;
    top: 55%;
    opacity: 0.1;
    position: absolute;
     z-index: -1;
    
}
#textTop, #textTop img{
    opacity: 1;
}

.muteHintWrapper{
    overflow: visible;
    position: absolute;
/*    background-color: blue;*/
    width: 100%;
    height: 100%;
}
.muteHintContainer{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0%;
    left: 100%;
    overflow: visible;
    -webkti-transform: rotate(90deg);
    transform: rotate(90deg);
}

.muteHintArrow{
    opacity: 0;
    border: 1px solid white;
    border-top-color: transparent;
    border-right-color: transparent;
    width: 30%;
    left: -1px;
    right: 0;
    margin: auto;
    height: 0;
    padding-bottom: 30%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 0;
    bottom: 30%;
}

@-webkit-keyframes hintArrowAnim {
    0%{opacity: 0;}
    25%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 0;}
}
@keyframes hintArrowAnim {
    0%{opacity: 0;}
    20%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 0;}
}

.muteHintArrow1,.muteWave3{
    bottom: 20%;
    animation: hintArrowAnim 1s ease-in-out 0.24s infinite forwards;
    -webkit-animation: hintArrowAnim 1s ease-in-out 0.24s infinite forwards;
}.muteHintArrow2,.muteWave2{
    bottom: 60%;
    animation: hintArrowAnim 1s ease-in-out 0.12s infinite forwards;
    -webkit-animation: hintArrowAnim 1s ease-in-out 0.12s infinite forwards;
}.muteHintArrow3,.muteWave1{
    bottom: 100%;
    animation: hintArrowAnim 1s ease-in-out infinite forwards;
    -webkit-animation: hintArrowAnim 1s ease-in-out infinite forwards;
}

.muteHintWrapper.clicked{
    display: none;
}

.bigMuteContainer{
        pointer-events: all;
    width: 100px;
    height: 100px;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
/*    background-color: red;*/
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    opacity: 0.7;
}
.bigMuteContainer:hover{
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.bigMuteContainer.controlsHidden{
   opacity: 0;
    pointer-events: none;
}
.bigMuteContainer.clicked{
   display: none;
}
.bigMute{
    background-image: url(2019_Sat1_DOI_Flight1_mute_on.svg);
    width: 60%;
    background-size: 170% 100%;
}

.muteWave{
    border: 5px solid white;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 999;
    border-radius: 50%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.muteWave1{
    width: 35%;
    height: 35%;
}
.muteWave2{
    width: 55%;
    height: 55%;
}
.muteWave3{
    width: 75%;
    height: 75%;
}