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

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

.noOverflow{
    overflow: hidden;
}

body{
  width: 100%;
  height: 100%;
  background-color: #0b0b25;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
}


/*____________TO RESIZE________________*/

.banner {
	width: 300px;
	height: 600px;
  pointer-events: none;
}

#adVideo{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 300px;
    height: 1200px;
}

.ms_logo{
    
    position: absolute;
    
    width: 205px;
    height: 87px;
    left: 0;
    right: 0;
    
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    
}

.lineContainer{
    width: 250px;
    height: 4px;
    left: 25px;
    top: 491px;
}

/*____________TO RESIZE END________________*/

.banner{
	transform-origin: 50% 50%;
	position: absolute;
	top: 0;
  bottom: 0;
	left: 0;
  right: 0;
	cursor: pointer;
/*	background-color: black;*/
  margin: auto;
}

svg{
  z-index: 99;
}

.hidden{
	display: none;
}

.fullBg{
  transform-origin: 50% 50%;
  width: 650px;
  height: 650px;
  left: -175px;
  top: -25px;
}

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

.alternativeScale2{
  transform-origin: 0% 0% !important;
}
.alternativeScale3{
  transform-origin: 0% 100% !important;
}

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

/*________________________________NEW_______________________*/



.grad{
    height: 220px;
    top: auto;
    bottom: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0b0b25+0,0b0b25+100&0+0,0.3+8,0.7+33,1+86 */
background: -moz-linear-gradient(top,  rgba(11,11,37,0) 0%, rgba(11,11,37,0.3) 8%, rgba(11,11,37,0.7) 33%, rgba(11,11,37,1) 86%, rgba(11,11,37,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(11,11,37,0) 0%,rgba(11,11,37,0.3) 8%,rgba(11,11,37,0.7) 33%,rgba(11,11,37,1) 86%,rgba(11,11,37,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(11,11,37,0) 0%,rgba(11,11,37,0.3) 8%,rgba(11,11,37,0.7) 33%,rgba(11,11,37,1) 86%,rgba(11,11,37,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000b0b25', endColorstr='#0b0b25',GradientType=0 ); /* IE6-9 */


}

.gradOverlayBot{
    background-color: #0b0b25;
    top: 100%;
    height: 300%;
}

.gradTop{
    top: 0;
    height: 170px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0b0b25+0,0b0b25+100&1+25,0.7+82,0.3+95,0+100 */
background: -moz-linear-gradient(top,  rgba(11,11,37,1) 0%, rgba(11,11,37,1) 25%, rgba(11,11,37,0.7) 82%, rgba(11,11,37,0.3) 95%, rgba(11,11,37,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(11,11,37,1) 0%,rgba(11,11,37,1) 25%,rgba(11,11,37,0.7) 82%,rgba(11,11,37,0.3) 95%,rgba(11,11,37,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(11,11,37,1) 0%,rgba(11,11,37,1) 25%,rgba(11,11,37,0.7) 82%,rgba(11,11,37,0.3) 95%,rgba(11,11,37,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b0b25', endColorstr='#000b0b25',GradientType=0 ); /* IE6-9 */


}

.grad, .gradTop{
   width: 300%;
    left: -100%;
}

.dontTalk_container{
    width: 600px;
    left: -150px;
}

.dontTalk img{
    position: absolute;
    top: 0;
    left: 0;
}

.glitchImg{
    overflow: hidden;
}

.glitch{
    transform-origin: 100% 100%;
    opacity: 0;
}

.dontTalk_container.zoom{
    transform-origin: 50% 30%;
    -webkit-animation: dontTalkContainerAnim 3.5s ease-in-out forwards 1;
    animation: dontTalkContainerAnim 3.5s ease-in-out forwards 1;
}

@-webkit-keyframes dontTalkContainerAnim {
  0%{  -webkit-filter: brightness(100%); -webkit-transform: skewX(0deg); margin-left: 0; opacity: 1;}
  100%{-webkit-filter: brightness(100%); -webkit-transform: skewX(0deg);margin-left: 0%; opacity: 0;}
}

@keyframes dontTalkContainerAnim {
  0%{  transform: scale(1);}
  100%{transform: scale(1.1);}
}

.animated .glitch{
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    -webkit-animation: glitchContainerAnim 1s ease-in-out forwards 1;
      animation: glitchContainerAnim 1s ease-in-out forwards 1;
    animation-direction: normal;
}
.animated.animateBack .glitch{
    animation-direction: reverse;
}

@-webkit-keyframes glitchContainerAnim {
  0%{  -webkit-filter: brightness(100%); -webkit-transform: skewX(0deg); margin-left: 0; opacity: 1;}
  10%{ -webkit-filter: brightness(100%); -webkit-transform: skewX(0deg); margin-left: 0%;}
  11%{ -webkit-filter: brightness(190%); -webkit-transform: skewX(10deg); margin-left: 9%;}
  20%{ -webkit-filter: brightness(250%); -webkit-transform: skewX(10deg); margin-left: 10%;}
  21%{ -webkit-filter: brightness(100%); -webkit-transform: skewX(-10deg); margin-left: -10%;}
  50%{ -webkit-filter: brightness(300%); -webkit-transform: skewX(-10deg); margin-left: -8%;}
  51%{ -webkit-transform: skewX(0deg); margin-left: 0%; opacity: 1;}
  100%{-webkit-filter: brightness(100%); -webkit-transform: skewX(0deg);margin-left: 0%; opacity: 0;}
}

@keyframes glitchContainerAnim {
  0%{  filter: brightness(100%); transform: skewX(0deg); margin-left: 0; opacity: 1;}
  10%{ filter: brightness(100%); transform: skewX(0deg); margin-left: 0%;}
  11%{ filter: brightness(190%); transform: skewX(10deg); margin-left: 9%;}
  20%{ filter: brightness(250%); transform: skewX(10deg); margin-left: 10%;}
  21%{ filter: brightness(100%); transform: skewX(-10deg); margin-left: -10%;}
  50%{ filter: brightness(300%); transform: skewX(-10deg); margin-left: -8%;}
  51%{ transform: skewX(0deg); margin-left: 0%; opacity: 1;}
  100%{filter: brightness(100%); transform: skewX(0deg);margin-left: 0%; opacity: 0;}
}

.animated .glitchImg:nth-child(n){
  -webkit-animation: glitchAnim 1s ease-in-out forwards 1;
  animation: glitchAnim 1s ease-in-out forwards 1;
}
.animated .glitchImg:nth-child(2n){
  -webkit-animation: glitchAnim 0.9s ease-in-out forwards 0.2s 1;
  animation: glitchAnim 0.9s ease-in-out forwards 0.2s 1;
}
.animated .glitchImg:nth-child(3n){
  -webkit-animation: glitchAnim 0.8s ease-in-out forwards 0.1s 1;
  animation: glitchAnim 0.8s ease-in-out forwards 0.1s 1;
}
.animated .glitchImg:nth-child(5n){
  -webkit-animation: glitchAnim 0.6s ease-in-out forwards 0.3s 1;
  animation: glitchAnim 0.6s ease-in-out forwards 0.3s 1;
}

.animated.animateBack .glitchImg{
    opacity: 0;
    animation-direction: reverse;
}

@-webkit-keyframes glitchAnim {
  0%{opacity: 1; left: 0;}
  1%{opacity: 0.8; left: 100px;}
  10%{opacity: 0.8; left: 100px;}
  11%{opacity: 0.5; left: 120px;}
  12%{opacity: 0.3; left: -80px;}
  22%{opacity: 1; left: -80px;}
  23%{opacity: 0.4; left: 20px;}
  40%{opacity: 0.5; left: 20px;}
  41%{opacity: 0.5; left: 0px;}
  50%{opacity: 0.9; left: 0px;}
  51%{opacity: 0; left: 10px;}
  100%{opacity: 0; left: 10px;}
}

@keyframes glitchAnim {
  0%{opacity: 1; left: 0;}
  1%{opacity: 0.8; left: 100px;}
  10%{opacity: 0.8; left: 100px;}
  11%{opacity: 0.5; left: 120px;}
  12%{opacity: 0.3; left: -80px;}
  22%{opacity: 1; left: -80px;}
  23%{opacity: 0.4; left: 20px;}
  40%{opacity: 0.5; left: 20px;}
  41%{opacity: 0.5; left: 0px;}
  50%{opacity: 0.9; left: 0px;}
  51%{opacity: 0; left: 10px;}
  100%{opacity: 0; left: 10px;}
}

.animated #ms_logo linearGradient stop:first-child{
    -webkit-animation: logoColorAnimLeft 0.5s linear forwards 1;
    animation: logoColorAnimLeft 0.5s linear forwards 1;
}

.animated #ms_logo linearGradient stop:last-child{
    -webkit-animation: logoColorAnimRight 1s linear forwards 1;
    animation: logoColorAnimRight 1s linear forwards 1;
}

@-webkit-keyframes logoColorAnimLeft {
  0%{stop-color: #0c0b2a}
  50%{stop-color: #0c0b2a}
  100%{stop-color: #ccb88b}
}

@keyframes logoColorAnimLeft {
  0%{stop-color: #0c0b2a}
  50%{stop-color: #0c0b2a}
  100%{stop-color: #ccb88b}
}

@-webkit-keyframes logoColorAnimRight {
  0%{stop-color: #0c0b2a}
  50%{stop-color: #0c0b2a}
  100%{stop-color: #ccb88b}
}

@keyframes logoColorAnimRight {
  0%{stop-color: #0c0b2a}
  50%{stop-color: #0c0b2a}
  100%{stop-color: #ccb88b}
}

.textTop,.text,.text1,.date{
  opacity: 0;
}

.animated .textTop{
    -webkit-animation: textAnim 0.3s ease-in-out 3s forwards 1;
    animation: textAnim 0.3s ease-in-out 3s forwards 1;
}

.animated .text{
    -webkit-animation: textAnim 0.3s ease-out 4.5s forwards 1;
    animation: textAnim 0.3s ease-out 4.5s forwards 1;
}

.animated .text1{
    -webkit-animation: textAnim1 3s ease-out 1.5s forwards 1;
    animation: textAnim1 3s ease-out 1.5s forwards 1;
}

.animated .date{
    -webkit-animation: textAnim 0.3s ease-out 1.7s forwards 1;
    animation: textAnim 0.3s ease-out 1.7s forwards 1;
}

@-webkit-keyframes textAnim {
  0%{  top: 5px; opacity: 0; }
  50%{ opacity: 1; }
  100%{top: 0px; opacity: 1;}
}

@keyframes textAnim {
  0%{  top: 5px; opacity: 0; }
  50%{ opacity: 1; }
  100%{top: 0px; opacity: 1;}
}

@-webkit-keyframes textAnim1 {
  0%{  top: 5px; opacity: 0; }
  5%{ opacity: 1; }
  10%{top: 0px; opacity: 1;}
  90%{top: 0px; opacity: 1;}
  100%{top: 5px; opacity: 0;}
}

@keyframes textAnim1 {
  0%{  top: 5px; opacity: 0; }
  5%{ opacity: 1; }
  10%{top: 0px; opacity: 1;}
  90%{top: 0px; opacity: 1;}
  100%{top: 5px; opacity: 0;}
}


.lineBg{
    opacity: 0;
    background-color: #b7c4cd;
}

.animated .lineBg{
    -webkit-animation: lineBgAnim 1s ease-in-out 2.5s forwards 1;
    animation: lineBgAnim 1s ease-in-out 1.5s forwards 1;
}
@-webkit-keyframes lineBgAnim {
  0%{   width: 0%; opacity: 0;  }
  10%{   opacity: 1;  }
  100%{ width: 100%; opacity: 1;}
}

@keyframes lineBgAnim {
  0%{   width: 0%; opacity: 0;  }
  10%{   opacity: 1;  }
  100%{ width: 100%; opacity: 1;}
}

.line{
    background-color: #ccb88b;
    width: 0;
}


.animated .line{
    -webkit-animation: lineAnim 13s linear forwards 1;
    animation: lineAnim 13s linear forwards 1;
}

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

@keyframes lineAnim {
  0%{   width: 0%;  }
  100%{ width: 100%;}
}


/*OLD VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV*/


.blende{
  background-color: #292a68;
  position: absolute;
  width: 100%;
  height: 100%;
}

/*-------------------------------------------------------------ANIMATIONS-------------------------------------------------------------*/

.blende.animated{
  -webkit-animation: glowFadeIn1 0.8s ease-in forwards 1;
  animation: glowFadeIn1 0.8s ease-in forwards 1;
}
@-webkit-keyframes glowFadeIn1 {
  0%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes glowFadeIn1 {
  0%{opacity: 1;}
  100%{opacity: 0;}
}

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

.cta{
  transform-origin: 50% 64%;
  opacity: 0;
  top: 6px;
  width: 90%;
  height: 90%;
  left: 5%;
}
.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);}
}

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

.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);}
}

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

/*
@-webkit-keyframes blendeAnimOut {
  0%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes blendeAnimOut {
  0%{opacity: 1;}
  100%{opacity: 0;}
}
*/

@-webkit-keyframes blendeAnimOut {
  0%{top: 0%}
  100%{top: calc(100% + 200px);}
}
@keyframes blendeAnimOut {
  0%{top: 0%}
  100%{top: calc(100% + 200px);}
}

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

@-webkit-keyframes blendeAnimIn {
  100%{top: 0%}
  0%{top: calc(100% + 200px);}
}
@keyframes blendeAnimIn {
  100%{top: 0%}
  0%{top: calc(100% + 200px);}
}


/*________________________________VIDEO_______________________*/

.videoContainer{
  position: absolute;
  bottom: 0;
/*    display: none;*/
    pointer-events: none;
    height: 100%;;
    width: 100%;
    transform-origin: 50% 0%;
  
-webkit-transition: all 800ms cubic-bezier(0.675, 0.005, 0.235, 1); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.675, 0.005, 0.235, 1.310); 
   -moz-transition: all 800ms cubic-bezier(0.675, 0.005, 0.235, 1.310); 
     -o-transition: all 800ms cubic-bezier(0.675, 0.005, 0.235, 1.310); 
        transition: all 800ms cubic-bezier(0.675, 0.005, 0.235, 1.310); /* custom */
  
  
/*
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
  
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
*/
  
}

.videoContainer.videoHidden{
  -webkit-transform: scaleY(0.01) scaleX(0.5);
  transform: scaleY(0.01) scaleX(0.5);
  opacity: 0;
  pointer-events: none;
}
.videoContainer.videoVisible{
  -webkit-transform: scaleY(1) scaleX(1);
  transform: scaleY(1) scaleX(1);
  opacity: 1;
}

/*  VIDEO */ 


canvas{
    position: absolute;
    top: 0px;
    left: -46px;
    width: 130%;
    height: 100%;
}