@font-face {
    font-family: 'metropolis-bold';
    src: url('../fonts/metropolis-bold-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-regular';
    src: url('../fonts/metropolis-regular-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Half-Page */
section {
	height: 100vh;
	position: relative;
}
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -320px 0 0 -150px;
}
#half-page {
	width:300px;
	height:600px;
	margin-bottom: 20px;
	border: .5px solid rgba(0, 0, 0, .25);
}
.text-link {
	float: right;
	text-decoration: none;
	font-family: 'metropolis-regular';
	color: rgba(236, 0, 140, .6);
	transition: all ease .5s;
}
.text-link:hover {
	color: rgba(40, 193, 241, .8);
}

/* Half-Page Ad */

#ad{
	width:300px;
	height:600px;
	position:relative;
	/*overflow: hidden;*/
}
.top-layer {
	background-color: #fff;
	height: 600px;
	width: 300px;
	position: absolute;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
	z-index: 99;
	animation: topReveal 2s forwards 7s,
			   removeFinal 1s forwards 8.5s;
}
.block-out {
	height: 600px;
	width: 240px;
	border-left: 30px solid #fff;
	border-right: 30px solid #fff;
	position: absolute;
	z-index: 999;
	animation: blockOut 5s forwards;
}
h1 {
	font-family: 'metropolis-bold';
	text-transform: uppercase;
	font-size: 36px;
	line-height: 50px;
}
.border-box {
	padding: 20px;
	border: 12px solid #000;
	position: relative;
	z-index: 9;
	animation: shrink 2s forwards,
			   removeFinal 1s forwards 8.25s;
}
.border-box-top {
	border-left: 12px solid #000;
	border-right: 12px solid #000;
	padding: 20px;
	width: 177px;
	position: absolute;
	height: 201px;
	top: 179.5px;
	left: 29.5px;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	animation: borderTop 2s forwards 3s,
			   removeFinal 1s forwards 8.25s;
}
.title-container {
	width: 177px;
	height: 177px;
	position: absolute;
	padding: 32px;
	top: 179.5px;
	left: 29.5px;
}
.title-first,
.title-second,
.title-third {
	position: absolute;
	animation-delay: 2s;
	z-index: 99;
}
.title-first {
	top: 20px;
	left: -200px;
	animation: leftMove 2s forwards;
	animation-delay: 2.5s;
}
.title-second {
	top: 70px;
	right: -200px;
	animation: rightMove 2s forwards;
	animation-delay: 2.5s;
}
.title-third {
	top: 120px;
	left: -200px;
	animation: leftMove 2s forwards;
	animation-delay: 2.5s;
}

.arrow {
	background-image: url(../images/arrow.png);
	height: 436px;
	width: 255px;
	position: absolute;
	left: 23px;
	bottom: -437px;
	z-index: 99;
	animation: bottomUp 9s forwards;
	animation-delay: 4.5s;
}

.background-color {
	/*background-color: #74cbf03d;*/
	background-color: #fff;
	height: 600px;
	width: 300px;
}
/*.bottom-layer {
	height: 600px;
	width: 300px;
	position: absolute;
}
.amp-bottom-nub {
	background-image: url(../images/amp-bottom-nub.png);
	background-size: cover;
	background-position: center;
	height: 72.26px;
	width: 66.57px;
	position: absolute;
	top: 354px;
	left: 81px;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	animation: nubsAppear .5s forwards 8.25s;
}
.amp-top-nub {
	height: 62.84px;
	width: 49.21px;
	position: absolute;
	top: 153px;
	left: 245px;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	animation: nubsAppear .5s forwards 8.25s;
}
.amp-top-nub img {
	height: 85px;
	width: 115px;
	top: -20px;
	position: absolute;
	animation: topNubImgGrow 1.5s forwards 9s;
}
.amp-full {
	background-image: url(../images/amp-full.png);
	background-size: cover;
	background-position: center;
	height: 441px;
	width: 561px;
	position: absolute;
	top: 125px;
	left: -151px;
}
*/
.logo-full {
	background-image: url(../images/logo-full.png);
	background-position: center;
	background-repeat: no-repeat;
	height: 439.54px;
	width: 559.94px;
	position: absolute;
	top: 126px;
	left: -150px;
	animation: logoSlideUp 2s forwards 10.5s;
}
h3 {
	font-family: 'metropolis-bold';
	font-size: 18px;
	text-transform: uppercase;
	width: 300px;
	position: absolute;
	left: 300px;
	bottom: 235px;
	z-index: 9;
	animation: textSlideRight 1s forwards 13s;
}
h4 {
	font-family: 'metropolis-bold';
	font-size: 14px;
	text-transform: uppercase;
	width: 300px;
	position: absolute;
	right: 300px;
	bottom: 210px;
	z-index: 9;
	animation: textSlideLeft 1s forwards 13s;
}
p {
	font-family: 'metropolis-bold';
	font-size: 12px;
	text-transform: uppercase;
	width: 300px;
	position: absolute;
	left: 300px;
	bottom: 170px;
	z-index: 9;
	animation: textSlideRight 1s forwards 13s;
}
ul {
	width: 300px;
	position: absolute;
	z-index: 9;
	right: 300px;
	bottom: 90px;
	animation: textSlideLeft 1s forwards 13s;
}
ul li {
	font-family: 'metropolis-regular';
	font-size: 11.5px;
	line-height: 18px;
	padding-left: 10px;
}
li:before {
	content: "";
	display: inline-block;
	height: 5px;
	width: 5px;
	background-color: #e659a0;
	border-radius: 25px;
	margin: 0 9px 0.5px 0;
}
.btn {
	font-family: 'metropolis-bold';
	font-size: 14px;
	position: absolute;
	bottom: -50px;
	left: 86px;
	color: #000;
	text-decoration: none;
	background-color: transparent;
	border: 4px solid #000;
	padding: 10px;
	text-align: center;
	animation: btnSlideUp 1s forwards 15s;
	transition: all ease .5s;
}
.btn:hover {
	color: #fff;
	background-color: #74cbf0;
	border: 4px solid #74cbf0;
}


@keyframes textSlideRight {
	0% {
		left: 300px;
	}
	100% {
		left: 29px;
	}
}

@keyframes textSlideLeft {
	0% {
		right: 300px;
	}
	100% {
		right: -29px;
	}
}

@keyframes btnSlideUp {
	0% {
		bottom: -50px;
	}
	100% {
		bottom: 25px;
	}
}


@keyframes blockOut {
	0%, 32.5% {
		opacity: 0;
		visibility: hidden;
	}
	33%, 90% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes shrink {
	0% {
		width: 300px;
		height: 600px;
		top: -50px;
		left: -50px;
	}
	100% {
		width: 177px;
		height: 177px;
		top: 179.5px;
		left: 29.5px;
	}
}

@keyframes borderTop {
	0%, 100%  {
		opacity: 1;
		visibility: visible;
	}
}
/*
@keyframes nubsAppear {
	0%, 100%  {
		opacity: 1;
		visibility: visible;
	}
}*/

@keyframes removeFinal {
	0%, 100%  {
		opacity: 0;
		visibility: hidden;
	}
}
/*@keyframes showFinalLogo {
	0%, 100%  {
		opacity: 1;
		visibility: visible;
	}
}
*/
@-webkit-keyframes leftMove {
  	0% {
		left: -115px;
	}
	80% {
		z-index: 9;
	}
	100% {
		left: 31px;
		z-index: 999;
	}
}
@-webkit-keyframes rightMove {
  	0% {
		right: -145px;
	}
	80% {
		z-index: 9;
	}
	100% {
		right: 73px;
		z-index: 999;
	}
}
@-webkit-keyframes bottomUp {
  	0% {
		bottom: -437px;
	}
	25% {
		bottom: 0px;
	}
	35% {
		bottom: -20px;
	}
	43%, 100% {
		bottom: 0px;
	}
}

@-webkit-keyframes topReveal {
  	0% {
		height: 600px;
	}
	100% {
		height: 0px;
	}
}


@-webkit-keyframes logoSlideUp {
  	0% {
		top: 126px;
	}
	100% {
		top: -35px;
		transform: rotate(-360deg);
	}
}

/*@-webkit-keyframes backgroundRotate {
  	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	/*100% {
		transform: rotate(-360deg);
		transform-origin: 250px 100px;
	}
	100% {
		top: 30px;
	}
}*/