/*****************************
*  CREATING ANIMATIONS
******************************/

@keyframes introText {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	30% {
		opacity: 1;
	}
	35% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes canvas {
	0% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes overlay {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	62% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes overlayText {
	0% {
		opacity: 0;
	}
	62% {
		opacity: 0;
	}
	64% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes buttonOne {
	0% {
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	67% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes buttonTwo {
	0% {
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	67% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}




/*****************************
*  DECLARING FONTS
******************************/
@font-face {
  font-family: 'Bourgeois-Book';
  src: url('fonts/Bourgeois-BookCond.eot');
  src: url('fonts/Bourgeois-BookCond.eot?#iefix') format('embedded-opentype'),
       url('fonts/Bourgeois-BookCond.woff') format('woff'),
       url('fonts/Bourgeois-BookCond.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Bourgeois-Bold';
  src: url('fonts/Bourgeois-BoldCond.eot');
  src: url('fonts/Bourgeois-BoldCond.eot?#iefix') format('embedded-opentype'),
       url('fonts/Bourgeois-BoldCond.woff') format('woff'),
       url('fonts/Bourgeois-BoldCond.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}


/*****************************
*  STRUCTURE AND POSITION
******************************/

/* Set height/width of container */
.half-page {
	height: 250px;
	width: 970px;

	position: relative;
	text-align: center;
	overflow: hidden;
}

canvas {
    position: relative;
    transform: rotate(-90deg);
    display: block;
    z-index: 1;
    position: absolute;
    top: -360px;
    left: 360px;
    opacity: 0;
}

p {
	color: #ffffff;
	text-transform: uppercase;
	font-family: 'Bourgeois-Book', sans-serif;
	font-size: 54px;
}

/* Align all layers absolutely and on top of each other */

.background,
.train,
.overlay
 {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
	background-repeat: no-repeat;
}

.overlay { padding-left: 6rem; }

.background { z-index: -1; background-size: cover;}
.train { z-index: 100; background-position: 20px bottom;}
.overlay { z-index: 10; opacity: 0; background-color: rgba(8, 29, 88, .65);}
#intro-text,
#overlay-text,
#button1,
#button2 { opacity: 0; display: inline-block; vertical-align: top;}

#intro-text { margin-top: 4.5rem; margin-left: 10rem; }

#overlay-text { 
	color: #fcd403; 
	font-family: 'Bourgeois-Bold', sans-serif;
	font-size: 51px;
	line-height: .9;
	margin-top: 1.5rem;
	margin-bottom: 2.5rem;
	width: 100%;
	margin-bottom: 1rem;
}
.overlay-text-white { 
	color: #ffffff !important; 
	font-family: 'Bourgeois-Book', sans-serif; 
}
#button1 { 
	background-color: #fcd403; 
	border: 1px solid #5d93b9; 
	color: #032c4f; 
	font-family: 'Bourgeois-Book', sans-serif; 
	width: 150px;
	margin: 0 auto 2rem;
	font-size: 18px;    
	line-height: .85;
    padding: .5rem 0;
    font-weight: bold;
    cursor: pointer;
    transition: all .25s ease-in-out;
}

#button1:hover { 
	background-color: #fcee45; 
}


/*****************************
*  ASSIGNING ANIMATIONS
******************************/

canvas { animation: canvas 15s 1; animation-fill-mode: forwards; }
#intro-text { animation: introText 15s 1; animation-fill-mode: forwards; }
.overlay { animation: overlay 15s 1; animation-fill-mode: forwards; }
#overlay-text { animation: overlayText 15s 1; animation-fill-mode: forwards; }
#button1 { animation: buttonOne 15s 1; animation-fill-mode: forwards; }
#button2 { animation: buttonTwo 15s 1; animation-fill-mode: forwards; }