//sizing
$unit: 1vmin;
$w: 80*$unit;
$h: $w*.75;
//colors
$bg-darker: #0b0b0b;
$bg-lighter: #404040;
$blue: #0f7ae2;
$pink: #c60a61;
$orange: #db650b;
$purple: #791ea1;
$indigo: #7448d1;
$indigo2: #0c0e59;
$whitey: #ceced0;
$whitey2: #a1a1a3;
$teal: #1b686e;
$yellow: #cfac68;
$red-yeah: #824f4e;
$h-line: rgba(50, 27, 56, .7);
$v-line: rgba(36, 29, 37, .7);
$line-box-1: #2a282b;
$line-box-2: #d8b396;
//easing-func
$cubic-out: cubic-bezier(0, 0, 0.2, 1);
//segment delays
$sdel-1: 11.5s;
$sdel-2: 37.1s;
$sdel-3: 56.9s;
$sdel-4: 66.6s;
$sdel-5: 81.7s;
$sdel-6: 105.4s;
$sdel-7: 125.1s;
$sdel-8: 134.8s;
$sdel-9: 144s;
$sdel-10: 154s;
$sdel-11: 168.8s;
$sdel-12: 173.8s;
$sdel-13: 193.1s;
$sdel-14: 205.1s;
$sdel-15: 220s;
//centered-box
.cbox{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
//bg-one triangles
@mixin bg-one-trg($subclass, $del){
	&#{$subclass}{
		animation-delay: $del;
		.triangles{
			animation-delay: $del + .75s;
		}
		.triangle{
			$ad: .5s;
			&:nth-child(1){
				animation-delay: $del + $ad*2;
			}
			&:nth-child(2){
				animation-delay: $del + $ad*3;
			}
			&:nth-child(3){
				animation-delay: $del;
			}
			&:nth-child(4){
				animation-delay: $del + $ad;
			}
		}
	}
}
body{
	background-color: #222;
	font-family: 'Lusitana', serif;
}
*, *:after, *:before{
	box-sizing: border-box;
}
.container{
	@extend .cbox;
}
.wraper{
	@extend .cbox;
	width: $w;
	height: $h;
	background-color: $bg-darker;
}
.triangle{
	position: absolute;
	width: 0;
	height: 0;
	color: $bg-darker;
	border: $w*.05 solid transparent;							
}
.heart {
	@extend .cbox;
	width: $w;
	height: $w;
	&:before, &:after {
		position: absolute;
		content: "";
		left: 50%;
		top: 0;
		width: 50%;
		height: 80%;
		background-color: $pink;
		border-radius: $w $w 0 0;
		transform: rotate(-45deg);
		transform-origin: 0 100%;
	}
	&:after {
		left: 0;
		transform: rotate(45deg);
		transform-origin :100% 100%;
	}
}
.bg-one{
	@extend .cbox;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: $bg-darker;
	animation: show-box 0s steps(1) forwards;
	@include bg-one-trg(".first", 0s);
	@include bg-one-trg(".second", $sdel-10);
	@include bg-one-trg(".third", $sdel-14);
	.triangles{
		@extend .cbox;
		width: 90%;
		height: 90%;
		background: $bg-lighter;
		animation: tr-splash 2s linear 30;
	}
	.triangle{
		animation: tr1 2s linear 30;
		$ad: .5s;
		&:nth-child(1){
			left: 50%;
			border-top: $w*.1 solid;
			transform: translateX(-50%);
		}
		&:nth-child(2){
			top: 50%;
			right: 0;
			border-right: $w*.1 solid;
			transform: translateY(-50%);
		}
		&:nth-child(3){
			left: 50%;
			bottom: 0;
			border-bottom: $w*.1 solid;
			transform: translateX(-50%);
		}
		&:nth-child(4){
			top: 50%;
			border-left: $w*.1 solid;
			transform: translateY(-50%);
		}
	}
}
.box{
		@extend .cbox;
		width: $w*.7;
		height: $h*.65;
		background: $bg-darker;
}
.o-yeah{
	.box{
		div{
			@extend .cbox;
		}
		.o{
			color: $bg-lighter;
			font-size: $h*.8;
			animation: o-in 8.5s $cubic-out forwards;
			p{
				animation: oy-out .8s linear 10.8s forwards;
			}
		}
		.yeah{
			color: $red-yeah;
			opacity: 0;
			font-size: $h*.5;
			animation: p-zoom-out 1s $cubic-out 8.5s forwards;
		}
	}
}
.tri-hear{
	animation: show-box 0s steps(1) $sdel-1 forwards;
	opacity: 0;
	.box{
		overflow: hidden;
		.lines{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			box-shadow: 0px 0px 2px 2px transparentize($purple, .7);
			&.hor{
				animation: lines-1 5s linear $sdel-1 forwards;
			}
			&.ver{
				animation: lines-2 5s linear $sdel-1 forwards;
			}
		}
		.yellow-triangle{
			@extend .cbox;
			animation: ytr 5s $cubic-out ($sdel-1 + 6s) forwards;
			opacity: 0;
			transform: translateX(-33%) translateY(-56%) rotate(-24deg) scale(1.4);
			border-style: solid;
			border-width: .65*$w 0 .375*$w 1.1*$w;
			border-color: transparent transparent transparent $yellow;
		}
		.heart{
			animation: heart-out 5s $cubic-out ($sdel-1 + 11s);
			opacity: 0;
			transform: translateX(-35%) translateY(-40%) rotate(-40deg) scale(1.2);
		}
	}
}
.ver-1{
	$v1-del: 27.7s;
	@extend .cbox;
	opacity: 0;
	animation: show-box 0s steps(1) $v1-del forwards;
	.box{
		background-color: $whitey;
		overflow: hidden;
		p{
			@extend .cbox;
			font-size: $h*.3;
			opacity: 0;
			color: $bg-darker;
			animation: p-zoom-out 350ms linear forwards;
			@for $i from 0 to 29{
				$ii: $i+1;
				$dl: if($i<14, $v1-del, $v1-del + 330ms);
				&:nth-child(#{$ii}){
					animation-delay: $dl + 300ms*$i;
				}
			}
		}
	}
}
.ver-2{
	@extend .cbox;
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-2 forwards;
	.box{
		$del: 0s;
		background-color: #ceced0;
		overflow: hidden;
		.line-box{
			@extend .cbox;
			width: 0;
			height: 0;
			animation: lines 9s linear ($sdel-2 + 10.6s) both;
			z-index: 1000;
			&:after{
				content: "";
				@extend .cbox;
				width: 100%;
				height: 100%;
				background-color: $line-box-1;
				animation: line-box-flash 3s 3 linear ($sdel-2 + 10.6s) both;
			}
		}
		&:before, &:after{
			content: "";
			@extend .cbox;
			box-shadow: 0px 0px 2px 2px transparentize($purple, .7);
			z-index: -10;
			animation: lines 9.1s linear ($sdel-2 + 10.6s) both;
		}
		&:before{
			width: 100%;
			height: 0;
		}
		&:after{
			width: 0%;
			height: 100%;
		}
		p{
			@extend .cbox;
			font-size: $h*.2;
			color: $bg-darker;
			opacity: 0;
			text-align: center;
			animation: p-flash linear;
			$dls: 5,13,4,3,3,2,8,15,9,11,4,15,10,26,3,10,1,3,11,11,20,4,14,15,6,7,6,12,12;
			$td: 0ms;
			@for $i from 0 to 29{
				$ii: $i+1;
				$dl: if($i<14, 0, .710);
				&:nth-child(#{$ii}){
					$dur: 40ms * nth($dls, $ii);
					animation-delay: $sdel-2 + $del + $td;
					animation-duration: $dur;
					$td: $td + $dur;
				}
			}
		}
	}
}
.bridge{
	@extend .cbox;
	opacity: 0;
	width: $w;
	height: $h;
	animation: show-box 0s steps(1) forwards;
	&.first{
		animation-delay: $sdel-3;
		.time-box{
			p{
				&:first-child, &:last-child{
					animation-delay: $sdel-3;
				}
			}
		}
		.bridge-bg{
			animation-delay: $sdel-3;
		}
	}
	&.second{
		animation-delay: $sdel-7;	
		.time-box{
			p{
				&:first-child, &:last-child{
					animation-delay: $sdel-7;
				}
			}
		}
		.bridge-bg{
			animation-delay: $sdel-7;
		}
	}
	&.third{
		animation-delay: $sdel-12;	
		.time-box{
			p{
				&:nth-child(odd), &:nth-child(even){
					animation-delay: $sdel-12;
				}
				&:nth-child(3){
					left: $w*2.2;
					animation-delay: $sdel-12;
					animation-duration: 22s;
				}
				&:nth-child(4){
					left: $w*1.6;
					animation-delay: $sdel-12;
					animation-duration: 22s;
				}
			}
		}
		.bridge-bg{
			animation-delay: $sdel-12;
			animation-iteration-count: 16;
		}
	}
	.bridge-bg{
		@extend .cbox;
		width: $w;
		height: $h;
		background-color: $bg-darker;
		animation: pulse-two 1.2s 8;	
	}
	.time-box{
		@extend .cbox;
		width: 100%;
		height: 70%;
		overflow: hidden;
		background-color: $bg-lighter;
		color: $bg-darker;
		font-size: $h*.5;
		text-shadow: 1px -1px 0px transparentize($pink, 0.8);
		p{
			@extend .cbox;
			&:nth-child(odd){
				left: $w*.7;
				top: $h*.25;
				transform: scale(1.65);
				animation: big-time 11s linear forwards;
				z-index: 10;
			}
			&:nth-child(even){
				left: $w*.55;
				top: 0;
				transform: scale(.6);
				animation: small-time 11s linear forwards;
			}
		}
	}
}
.bg-three{
	animation: show-box 0s steps(1) $sdel-4 forwards;
	opacity: 0;
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: $bg-lighter;
	.green-bar{
		@extend .cbox;
		left: 15%;
		top: 20%;
		animation: green-bar-r 2s 8 linear $sdel-4;
		&:after{
			content: "";
			position: absolute;
			height: $h*.2;
			bottom: 0;
			left: 0;
			background: #00f;
			box-shadow: 4px 0 8px 6px #2e953a;
			transform-origin: bottom;
			animation: green-bar-a 2s 8 steps(4) $sdel-4;
		}
	}
}
.ver-3{
	animation: show-box 0s steps(1) $sdel-4 forwards;
	opacity: 0;
	.box{
		background-color: $pink;
		&:before, &:after{
			content: "";
			position: absolute;
			width: 50%;
			height: 50%;
			background-color: $orange;
		}
		&:after{
			bottom: 0;
			right: 0;
			animation: switch-bg-after 0s steps(1) ($sdel-4 + 9.6) forwards;
		}
		&:before{
			animation: switch-bg-before 0s steps(2) ($sdel-4 + 9.6) forwards;
		}
	}
	.cross{
		@extend .cbox;
		width: 12%;
		height: 15%;
		z-index: 100;
		color: #f5c4a4;
		animation: switch-bg-before 0s steps(2) ($sdel-4 + 9.6) forwards;
		&:before, &:after{
			content: "";
			@extend .cbox;
			border: thin solid;
		}
		&:after{
			height: 100%;
		}
		&:before{
			width: 100%;
		}
	}
	.words{
		@extend .cbox;
		width: $w*.7;
		height: $h*.65;
		color: $bg-darker;
		p{
				position: absolute;
				opacity: 0;
				font-size: $h*.14;
				line-height: $h*.3;
				text-align: center;
				animation: flash-p-3 linear;
		}
		&.part-1{
			p{
				width: 50%;
				height: 50%;
				&:nth-child(4n+2){
					left: 50%;
					top: 0%;
				}
				&:nth-child(4n+3){
					left: 50%;
					top: 50%;
				}
				&:nth-child(4n+4){
					left: 0%;
					top: 50%;
				}
				$dels: 6,7,8,7,7,3,3,4,1,3,12,1,12,5,7,9,26,5,5,7,1,1,1,10,7,13,8,4,9,4,6,10,5,10,2;
				$del: 0s;
				@for $i from 0 to 32{
					$ii: $i+1;
					&:nth-child(#{$ii}){
						animation-delay: $sdel-4 + $del;
						$dur: (nth($dels, $ii)+nth($dels, $ii+1)+nth($dels, $ii+2)+nth($dels, $ii+3))*40ms;
						animation-duration: $dur;
						$del: $del + 43ms * nth($dels, $ii);
					}
				}
			}	
		}
		&.part-2{
			p{
				width: 100%;
				height: 50%;
				&:nth-child(even){
					bottom: 0;
				}
				$dels: 20,28,22,20,26,25,26,19,22,15,15,15;
				$del: 0ms;
				@for $i from 0 to 11{
					$ii: $i+1;
					&:nth-child(#{$ii}){
						animation-delay: $sdel-4 + 9.6 + $del;
						$dur: (nth($dels, $ii)+nth($dels, $ii+1))*20ms;
						animation-duration: $dur;
						$del: $del + 20ms * nth($dels, $ii);
					}
				}
			}
		}
	}
}
.bg-four{
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: $bg-lighter;
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-5 forwards;
	.box{
		width: 100%;
		height: 100%;	
		background-color: $bg-lighter;
		animation: tr2-splash 1s linear 24 $sdel-5;
	}
	.triangles{
		@extend .cbox;
		width: 100%;
		height: 70%;
		background: $yellow;
		animation: tr2-end 4s ease-in-out ($sdel-5 + 6.5s) alternate 4;
		.triangle{
			border: $w*.2 solid transparent;
			animation: tr2 1s linear 24 $sdel-5;
			&:nth-child(1){
				left: 50%;
				top: -$w*.4;
				border-top: $w*.4 solid;
				transform: translateX(-50%);
			}
			&:nth-child(2){
				bottom: -$w*.4;
				left: 50%;
				border-bottom: $w*.4 solid;
				transform: translateX(-50%);
			}
		}
	}
}
.ver-4{
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-5 forwards;
	.words{
		@extend .cbox;
		p{
			@extend .cbox;
			opacity: 0;
			font-size: $h*.2;
			line-height: $h*.3;
			text-align: center;
			white-space: nowrap;
			animation: flash-p-3 .5s linear;
			$dels: 10,17,12,20,34,7,28,20;
			$del: 0ms;
			@for $i from 0 to 8{
				$ii: $i+1;
				&:nth-child(#{$ii}){
					animation-delay: $sdel-5 + $del;
					animation-duration: nth($dels, $ii)*45ms;
					$del: $del + 45ms * nth($dels, $ii);
				}
			}
		}
	}
}
.bg-five{
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-6 forwards;
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: $bg-lighter;
	.triangles{
		@extend .cbox;
		width: 100%;
		height: 100%;
		z-index: 1;
		.triangle{
			border: $w*.1 solid transparent;
			animation: tr3 .5s linear 40 $sdel-6;
			&:nth-child(1){
				left: 0;
				top: 50%;
				border-left: $w*.2 solid;
				transform: translateY(-50%);
			}
			&:nth-child(2){
				top: 50%;
				right: 0%;
				border-right: $w*.2 solid;
				transform: translateY(-50%);
			}
		}
	}
	.time-box{
		@extend .cbox;
		width: $h*.6;
		height: $h*.6;
		background-color: $indigo;
		overflow: hidden;
		animation: time-flash 1s linear ($sdel-6 + 7.7s);
		&:before{
			content: "time";
			position: absolute;
			font-size: $h;
			top: -37%;
			left: 100%;
			animation: time-2 20s linear $sdel-6;
		}
	}
}
.chor{
	.words{
		@extend .cbox;
		width: 100%;
		height: 17%;
		background-color: $bg-lighter;
		p{
			position: absolute;
			top: 18%;
			left: 100%;
			color: #818183;
			font-size: $h*.11;
			animation: chor-run linear forwards;
			white-space: nowrap;
			&:first-child{
				left: 75%;
				animation-duration: 8s;
				animation-delay: $sdel-6;
			}
			&:nth-child(2){
				animation-duration: 19.2s;
				animation-delay: $sdel-6 + 6s;
			}
			&:last-child{
				animation-duration: 19.2s;
				animation-delay: $sdel-6 + 16s;
			}
		}
	}
}
.bg-six{
	@extend .cbox;
	width: 100%;
	height: 100%;
	background: $bg-darker;
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-8 forwards;
	.triangles{
		@extend .cbox;
		width: 90%;
		height: 90%;
		background: $indigo2;
	}
	.triangle{
		animation: tr4 2s linear 5;
		$ad: .5s;
		&:nth-child(1){
			left: 50%;
			border-top: $w*.1 solid;
			transform: translateX(-50%);
			animation-delay: $sdel-8;
		}
		&:nth-child(2){
			top: 50%;
			right: 0;
			border-right: $w*.1 solid;
			transform: translateY(-50%);
			animation-delay: $sdel-8 + $ad;
		}
		&:nth-child(3){
			left: 50%;
			bottom: 0;
			border-bottom: $w*.1 solid;
			transform: translateX(-50%);
			animation-delay: $sdel-8 + $ad*2;
		}
		&:nth-child(4){
			top: 50%;
			border-left: $w*.1 solid;
			transform: translateY(-50%);
			animation-delay: $sdel-8 + $ad*3;
		}
	}
}
.ver-5{
	opacity: 0;
	animation: show-box 0s steps(1) $sdel-8 forwards;
	.box{
		overflow: hidden;
		.star-pulse{
			@extend .cbox;
			width: $w*.06;
			height: $h*.07;
			opacity: 1;
			animation: pulse-star 100ms steps(2) 80 $sdel-8 forwards;
			z-index: -10;
			&:before, &:after{
				content: "";
				@extend .cbox;
				box-shadow: 1px 1px 4px 2px transparentize($pink, .5);
			}
			&:before{
					width: 100%;				
			}
			&:after{
					height: 100%;				
			}
		}
		p{
			position: absolute;
			font-size: $h*.2;
			color: $whitey2;
			text-align: center;
			white-space: nowrap;
			animation: v5-run linear forwards;
			left: 110%;
			$delays: 0,.8,1.8,2.4,3.4,3.8,6.5,7.4;
			$durations: 1.3,1.5,1.2,1.3,1.8,1.8,2,2.4;
			$tops: 60,25,55,30,-20,60,25,15;
			$sizes: .2,.08,.18,.12,.08,.2,.12,.06;
			&:first-child{
				left: 65%;
			}
			&:nth-child(5){
				left: 18%;
				animation: v5-fall linear forwards;
			}
			@for $i from 0 to 8{
				$ii: $i+1;
				&:nth-child(#{$ii}){
					top: nth($tops,$ii)*1%;
					font-size: nth($sizes,$ii)*$h;
					animation-delay: $sdel-8 + nth($delays,$ii);
					animation-duration: nth($durations,$ii)*1.5s;
				}
			}
		}
	}
}
.bridge-alt{
	@extend .cbox;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-9;
	.bridge-bg{
		@extend .cbox;
		width: $w;
		height: $h;
		background-color: $bg-darker;
		animation: pulse-two 1.2s 8 $sdel-9;	
	}
	.time-box{
		@extend .cbox;
		width: 80%;
		height: 100%;
		overflow: hidden;
		background-color: $bg-lighter;
		color: $bg-darker;
		font-size: $h*.5;
		text-shadow: 1px -1px 0px transparentize($pink, 0.8);
		p{
			@extend .cbox;
			&:first-child{
				transform: rotate(-30deg) translate(50%, -145%) scale(1.6);
				animation: big-time-alt 10s linear $sdel-9;
				z-index: 10;
			}
			&:last-child{
				transform: rotate(-30deg) translate(30%, -140%) scale(.6);
				animation: small-time-alt 10s linear $sdel-9;
			}
		}
	}
}
.chor2{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-10;
	.box{
		$del: 0s;
		background-color: $whitey;
		overflow: hidden;
		&:before, &:after{
			content: "";
			@extend .cbox;
			border: thin solid;
			color: #9c90bd;
			z-index: -10;
		}
		&:before{
			width: 100%;
			height: 0;
		}
		&:after{
			width: 0%;
			height: 100%;
		}
		p{
			@extend .cbox;
			font-size: $h*.13;
			color: $bg-darker;
			opacity: 0;
			text-align: center;
			animation: p-flash linear;
			white-space: nowrap;
			$dls: 9,9,19,35,21,26,17,22,50,17,50,50,40;
			$td: 0ms;
			@for $i from 0 to 13{
				$ii: $i+1;
				$dl: if($i<14, 0, .710);
				&:nth-child(#{$ii}){
					$dur: 40ms * nth($dls, $ii);
					animation-delay: $sdel-10 + $del + $td;
					animation-duration: $dur;
					$td: $td + $dur;
				}
			}
		}
	}
}
.img-box{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-11;
	@extend .cbox;
	width: $w*.7;
	height: $h*.65;
	background: $bg-darker;
	.img-holder{
		@extend .cbox;
		width: 25%;
		height: 25%;
		background-image: url('https://dl.dropboxusercontent.com/u/23293226/codepen-portfolio/sot.jpg');
		background-size: cover;
    background-position: center;
		animation: zoom-img 3.5s steps(2) $sdel-11 forwards;
	}
}
.bg-seven{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-13;
	@extend .cbox;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: $bg-darker;
	.triangles{
		@extend .cbox;
		width: 90%;
		height: 90%;
		animation: bg-7-flash 1s steps(1) forwards 13 $sdel-13;
	}
	.triangle{
			animation: tr5 1s steps(1) forwards 13 $sdel-13;
			&:nth-child(1){
				left: 50%;
				border-top: $w*.1 solid;
				transform: translateX(-50%);
			}
			&:nth-child(2){
				top: 50%;
				right: 0;
				border-right: $w*.1 solid;
				transform: translateY(-50%);
			}
			&:nth-child(3){
				left: 50%;
				bottom: 0;
				border-bottom: $w*.1 solid;
				transform: translateX(-50%);
			}
			&:nth-child(4){
				top: 50%;
				border-left: $w*.1 solid;
				transform: translateY(-50%);
			}
		}
}
.ver-6{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-13;
	.box{
		overflow: hidden;
		.heart{
			animation: heart-zoom-in 8.5s linear $sdel-13 forwards;
			transform: translate(-50%, -50%) scale(0);
			z-index: 1;
		}
		.words{
			p{
				@extend .cbox;
				color: $whitey;
				//opacity: 0.6;
				white-space: nowrap;
			}
			&.p1{
				p{
					animation: v5-run linear forwards;
					font-size: $h*.2;
					left: 210%;
					$delays: 0,1,2.4,4.6,5.8;
					$durations: 1,1.5,1.4,1.2,2.4;
					@for $i from 0 to 5{
						$ii: $i+1;
						&:nth-child(#{$ii}){
							animation-delay: $sdel-13 + nth($delays,$ii);
							animation-duration: nth($durations,$ii)*1.5s;
						}
					}
				}	
			}
			&.p2{
				p{
					opacity: 0;
					animation: show-box 0s steps(1) forwards;
					background-color: $pink;
					padding: $w*.01 $w*.002;
					transform: none;
					font-size: $h*.1;
					text-align: center;
					width: 20%;
					height: 20%;
					$delays: 9.8,9.9,10,10.2;
					$lefts: 0,1,1,0;
					$tops: 0,0,1,1;
					@for $i from 0 to 4{
						$ii: $i+1;
						&:nth-child(#{$ii}){
							top: nth($tops,$ii)*80%;
							left: nth($lefts,$ii)*80%;
							animation-delay: $sdel-13 + nth($delays,$ii);
						}
					}
				}	
			}
			&.nate{
				p{
					opacity: 0;
					top: 40%;
					font-size: $h*.2;
					animation: show-box 0s steps(1) ($sdel-13 + 8.5s) forwards;
					z-index: 10;
				}
			}
		}
	}
}
.outro{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-14;
	.box{
		overflow: hidden;
		.lines{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			&.hor{
				animation: lines-1 7s linear $sdel-14 forwards reverse;
				border-top: medium solid $h-line;
				border-bottom: medium solid $h-line;
			}
			&.ver{
				animation: lines-2 7s linear $sdel-14 forwards reverse;
				border-left: medium solid $v-line;
				border-right: medium solid $v-line;
			}
		}
	}
	p{
		@extend .cbox;
		font-size: $h*.35;
		color: $bg-darker;
		animation: outro-text 1.5s steps(1) ($sdel-14 + .5) 5;
	}
	.img-box{
		animation: show-box 0s steps(1) forwards ($sdel-14 + 7s);
		.img-holder{
			@extend .cbox;
			width: 100%;
			height: 100%;
			animation: none;
		}
	}
}
.credits{
	opacity: 0;
	animation: show-box 0s steps(1) forwards $sdel-15;
	@extend .cbox;
	width: 100%;
	height: 100%;
	background-color: transparentize($bg-darker, .2);
	padding: $w*.1;
	p{
		text-align: center;
		font-family: Arial;
		color: $whitey;
		padding: $w*.02;
		font-size: $h*.05;
	}
	a{
		color: $yellow;
	}
}
/////////  keyframes ///////////////
@keyframes outro-text{
	from{
		text-shadow: -1px 1px 0px transparentize($yellow, .7);
	}
	50%{
		text-shadow: 1px -1px 0px transparentize($yellow, .7);
	}
}
@keyframes show-box{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes tr1{
	0%{
		color: $blue;
	}
	3%{
		color: $blue;
	}
	5%{
		color: $bg-darker;
	}
}
@keyframes tr-splash{
	0%{
		background-color: $pink;
	}
	3%{
		background-color: $pink;
	}
	5%{
		background-color: $bg-lighter;
	}
}
@keyframes o-in{
	from{
		transform: translateX(-50%) translateY(-45%) scale(.5);
	}
	to{
		transform: translateX(-50%) translateY(-45%) scale(1);
	}
}
@keyframes oy-out{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@keyframes lines-1{
	to{
		height: 0;
	}
}
@keyframes lines-2{
	to{
		width: 0%;
	}
}
@keyframes ytr{
	0%{
		opacity: 0;
		transform: translateX(-33%) translateY(-56%) rotate(-24deg) scale(1.4);
	}
	5%{
		opacity: 1;
		transform: translateX(-33%) translateY(-56%) rotate(-24deg) scale(1.4);
	}
	to{
		opacity: 1;
		transform: translateX(-50%) translateY(-50%) rotate(-4deg) scale(0);
	}
}
@keyframes heart-out{
	0%{
		opacity: 0;
		transform: translateX(-35%) translateY(-40%) rotate(-40deg) scale(1.2);
	}
	5%{
		opacity: 1;
		transform: translateX(-35%) translateY(-40%) rotate(-40deg) scale(1.2);
	}
	to{
		opacity: 1;
		transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(0);
	}
}
@keyframes p-zoom-out{
	0%{
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
	5%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(.01);
	}
}
@keyframes p-flash{
	15%{
		opacity: 1;
	}
	85%{
		opacity: 1;
	}
}
@keyframes lines{
	to{
		width: 100%;
		height: 100%;
	}
}
@keyframes line-box-flash{
	0%{
		background-color: $line-box-1;
	}
	10%{
		background-color: $line-box-1;
	}
	11%{
		background-color: $line-box-2;
	}
	15%{
		background-color: $line-box-2;
	}
	18%{
		background-color: $line-box-1;
	}
	50%{
		background-color: $line-box-1;
	}
	60%{
		background-color: $line-box-1;
	}
	61%{
		background-color: $line-box-2;
	}
	65%{
		background-color: $line-box-2;
	}
	68%{
		background-color: $line-box-1;
	}
}
@keyframes pulse-two{
	from{
		background-color: $bg-darker
	}
	90%{
		background-color: $bg-darker;
	}
	to{
		background-color: $pink;
	}
}
@keyframes big-time{
	to{
		left: -$w*1.2;
	}
}
@keyframes small-time{
	to{
		left: -$w*.8;
	}
}
@keyframes green-bar-a{
	to{
		transform: rotate(1turn);
	}
}
@keyframes green-bar-r{
	0%{
		left: 15%;
		top: 20%;
	}
	25%{
		left: 85%;
		top: 20%;
	}
	50%{
		left: 85%;
		top: 80%;
	}
	75%{
		left: 15%;
		top: 80%;
	}
}
@keyframes flash-p-3{
	from{
		opacity: 0;
	}
	10%{
		opacity: .9;
	}
	80%{
		opacity: .7;
	}
	to{
		opacity: 0;
	}
}
@keyframes switch-bg-before{
	100%{
		background-color: transparent;
		color: transparent;
	}
}
@keyframes switch-bg-after{
	100%{
		width: 100%;
	}
}
@keyframes tr2{
	0%{
		color: $purple;
	}
	30%{
		color: $bg-darker;
	}
}
@keyframes tr2-splash{
	0%{
		background-color: $bg-lighter;
	}
	70%{
		background-color: $teal;
	}
}
@keyframes tr2-end{
	to{
		height: 1%;
	}
}
@keyframes tr3{
	0%{
		color: $purple;
	}
	30%{
		color: $bg-darker;
	}
}
@keyframes time-flash{
	0%{
		background-color: white;
	}
	8%{
		background-color: $indigo;
	}
	30%{
		background-color: $indigo;
	}
	32%{
		background-color: $whitey;
	}
	40%{
		background-color: $indigo;
	}
	70%{
		background-color: $indigo;
	}
	72%{
		background-color: $whitey;
	}
	80%{
		background-color: $indigo;
	}
}
@keyframes time-2{
	to{
		left: -350%;
	}
}
@keyframes chor-run{
	to{
		left: -280%;
	}
}
@keyframes tr4{
	0%{
		color: $teal;
	}
	3%{
		color: $teal;
	}
	5%{
		color: $bg-darker;
	}
}
@keyframes v5-run{
	to{
		left: -280%;
	}
}
@keyframes v5-fall{
	to{
		top: 110%;
	}
}
@keyframes pulse-star{
	to{
		opacity: 0;
	}
}
@keyframes big-time-alt{
	to{
		transform: rotate(-30deg) translate(-125%, -110%) scale(1.6);
	}
}
@keyframes small-time-alt{
	to{
		transform: rotate(-30deg) translate(-55%, -45%) scale(.6);
	}
}
@keyframes zoom-img{
	to{
		width: 100%;
		height: 100%;
	}
}
@keyframes tr5{
	from{
		color: $yellow;
	}
	50%{
		color: $purple;
	}
}
@keyframes bg-7-flash{
	from{
		background-color: $purple;
	}
	50%{
		background-color: $yellow;
	}
}
@keyframes heart-zoom-in{
	to{
		transform:  translate(-50%, -46%) scale(.4);
	}
}