@charset "UTF-8";
/* CSS Document */
/*
	Dark Blue: #006fa5
	light blue: #B9E4F8
	lighter blue: #C9EBFB
	lightest blue: #D7F0FC
*/
/* all pages */
#slide {
	width:1100px; 
	height:800px;
	/*
	border:1px solid #000;		
	*/
}
/*animation of main slide div */
.invis {
	opacity:0;
}
.fadein1 {
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s; /* Firefox < 16 */
	-ms-animation: fadein 2s; /* Internet Explorer */
	-o-animation: fadein 2s; /* Opera < 12.1 */
	animation: fadein 2s;
}
.fadein2 {
	-webkit-animation: fadein 2s 2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s 2s; /* Firefox < 16 */
	-ms-animation: fadein 2s 2s; /* Internet Explorer */
	-o-animation: fadein 2s 2s; /* Opera < 12.1 */
	animation: fadein 2s 2s;
	opacity:1;
	
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.f1 {
  -webkit-animation: fade-in-item 1s .2s ease-out forwards;
  -moz-animation: fade-in-item 1s .2s ease-out forwards;
  -ms-animation: fade-in-item 1s .2s ease-out forwards;
  -o-animation: fade-in-item 1s .2s ease-out forwards;
  animation: fade-in-item 1s .2s ease-out forwards;
}
.f2 {
  -webkit-animation: fade-in-item 1s .6s ease-out forwards;
  -moz-animation: fade-in-item 1s .6s ease-out forwards;
  -ms-animation: fade-in-item 1s .6s ease-out forwards;
  -o-animation: fade-in-item 1s .6s ease-out forwards;
  animation: fade-in-item 1s .6s ease-out forwards;
}
.f3 {
  -webkit-animation: fade-in-item 1s 1s ease-out forwards;
  -moz-animation: fade-in-item 1s 1s ease-out forwards;
  -ms-animation: fade-in-item 1s 1s ease-out forwards;
  -o-animation: fade-in-item 1s 1s ease-out forwards;
  animation: fade-in-item 1s 1s ease-out forwards;
}
.f4 {
  -webkit-animation: fade-in-item 1s 1.4s ease-out forwards;
  -moz-animation: fade-in-item 1s 1.4s ease-out forwards;
  -ms-animation: fade-in-item 1s 1.4s ease-out forwards;
  -o-animation: fade-in-item 1s 1.4s ease-out forwards;
  animation: fade-in-item 1s 1.4s ease-out forwards;
}



body {margin:0;padding:0;}
h1, h2, h3 {color:#B9E4F8; text-align: center}
h1 {font-size:5em;}
h2 {font-size: 1.67em;}
img {border:none;box-shadow:none;margin:auto;}

/*
#bottomline {position:absolute;top:800px;height:1px;background-color:#f00;width:100%}
#midline {position:absolute;top:400px;height:1px;background-color:#f00;width:100%}
#baseline {position:absolute;top:655px;height:1px;background-color:#f00;width:100%}
#lowerline {position:absolute;top:483px;height:1px;background-color:#f00;width:100%}
*/

/* title page */
#titleback {
		border-radius: 100%;
		width:800px;
		height:800px;
		background-color: #006fa5;
		margin: auto;
	}
#titlepage  {
	background-color: black; 
	margin: 0; 
	padding: 0;
}

#titlepage h1 {
	padding-top: 276px;
}
/* diagram page */
#diagrampage {
	background-color: #006fa5; 
	margin: 0; 
	padding: 0;
}
#diagrampage #back {
	border-radius: 100%;
	width:1200px;
	height:1200px;
	background-color: #fff;
	margin: -200px -50px;
	position:relative;
}
#diagrampage p {
	text-align: center;
	color: #666;
	font-size: 1.5em;
	line-height: 1.2em;
	padding-top: 3px;
}

/* tween1 page */
#tween1 {
	background-color:#C9EBFB;
	text-align:center;	
}
#tween1 p {
	color:#006fa5;
	font-size:2.5em;
	line-height: 1.2em;
	
}
/* tween2 page */
#tween2 {
	background-color:#006fa5;
	text-align:center;	
}
#tween2 p {
	color:#fff;
	font-size:2.5em;
	line-height: 1.2em;
}

.line-1  {
	padding-top:320px;
}
.line-3  {
	padding-top: 252px;
}
.sub-1 {position:absolute;top:800px;width:100%}