@charset "utf-8";
@font-face {
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/biko-black.woff");
}

svg#videomask {
  width: 100%;
  min-height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 0;
}

svg text {
  font-family: Gotham_Bold;
  font-weight: 749;
  font-size: .5vmin;
  text-anchor: middle;
  dominant-baseline: middle;
}

.textzoomanimate {
    animation-name: moveDown, growText;
    animation-duration: 5s;
    animation-delay: 3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;  
    transition-timing-function: ease-in;
    transform: translate(0px, 0px);
}

#rect2, #rect3, #rect4{
	fill:#1c2e53;
    transform:translate3d(0,0,0); 
}

.rectanimate {
	animation: fadeout 6s;
	animation-delay: 3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0, 0.7,0.7,1);
}

#whiteText{
	fill: white;
}

#filledText {
	fill: #eba904;
    transform: translate3d(0,0,0); 
}

.textfadeoutanimate {
	animation-name: filledTextFadeout;
	animation-duration: 3s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;    
}

@keyframes filledTextFadeout {
	from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes filledTextGrowtext {
	from {font-size: .5vmin;}
	to {font-size: 7vmin;}
}

@keyframes growText {
	from {font-size: .5vmin;}
	to {font-size: 7vmin;}
}

/*
@keyframes filledTextMovedown {
	0%{
		transform: translate(0px, 0px);
	}
	100%{
		transform: translate(0px, 26px);
	}
}
*/
/*
@keyframes moveDown {
	0%{
		transform: translate(0px, 0px);
	}
	100%{
		transform: translate(0px, 26px);
	}
}
*/

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

svg rect {
  fill:rgb(255,255,255,1);
}


svg > rect {
    -webkit-mask: url(#mask);
    mask: url(#mask);
}