.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%;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
}


/*____________TO RESIZE________________*/

.banner {
    overflow: hidden;
	width: 640px;
	height: 480px;
    pointer-events: none;
}

.ms_logo{
    position: absolute;
    width: 264px;
    height: 113px;
    left: 0;
    right: 0;
    margin-top: 43px;
    margin-left: 42px;
    margin-right: auto;
}

canvas{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 640px;
    height: 480px;
}

.lineContainer{
    width: 560px;
    height: 7px;
    left: 41px;
    top: 395px;
}

.cta{
  transform-origin: 76% 16%;
  opacity: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  left: 0%;
}

.gradTop{
    margin-top:-50px;
    height: 180px;
    opacity: 0.9
}

.grad{
    height: 300px;
    margin-bottom:-55px;
}

@-webkit-keyframes logoColorAnimLeft {
  0%{stop-color: #0c0b2a}
  50%{stop-color: #0c0b2a}  /* logo-color Right */
  100%{stop-color: #ccb88b} /* logo-color Left */
}

@keyframes logoColorAnimLeft {
  0%{stop-color: #0c0b2a}
  50%{stop-color: #0c0b2a}  /* logo-color Right */
  100%{stop-color: #ccb88b} /* logo-color Left */
}

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

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


/*____________TO RESIZE END________________*/

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

svg{
  z-index: 99;
}

.hidden{
	display: none;
}

.fullBg{
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.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{
    top: auto;
    bottom: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0b0b25+0,0b0b25+100&0+0,1+80 */
background: -moz-linear-gradient(top,  rgba(11,11,37,0) 0%, rgba(11,11,37,1) 80%, rgba(11,11,37,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(11,11,37,0) 0%,rgba(11,11,37,1) 80%,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,1) 80%,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;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#141331+0,141331+100&1+51,0+100 */
background: -moz-linear-gradient(top,  rgba(20,19,49,1) 0%, rgba(20,19,49,1) 51%, rgba(20,19,49,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(20,19,49,1) 0%,rgba(20,19,49,1) 51%,rgba(20,19,49,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(20,19,49,1) 0%,rgba(20,19,49,1) 51%,rgba(20,19,49,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141331', endColorstr='#00141331',GradientType=0 ); /* IE6-9 */


}

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

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



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

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


.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%{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_______________________*/


#adVideo{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}