html {
	font-family: 'Open Sans', sans-serif;
}

body {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	padding:0px;
	margin:0px;
	background-color:#6ACEF5;
}
#main-container  {
	position:absolute;
	width:100%;
	height:100%;
}

#animation-container .animation-layer {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 10000000px;
	background-repeat: no-repeat;
	background-size:contain;
}


#animation-container #animation-layer2 #l2-s2-content {
	position: relative;
	left: 520px;
	top:100px;
	height: 200px;
	width: 460px;
	background-color:rgba(41,114,140,0.54);
}

.l-content-padding {
	padding:20px;
	font-size:20px;
	color:rgba(255,255,255,1.00);
}
#animation-layer3 {
	background-image:url(../images/background.svg);
}
#animation-layer2 {
	background-image:url(../images/midground.svg);
}

#animation-layer1 {
	background-image:url(../images/foreground.svg);
	pointer-events: none;
}


#animation-container {
	position: relative;
	left: 0px;
	right: 0px;
	/*margin: 0 auto;*/
	overflow: hidden;
	top: 0%;
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
	display: block;
}

.nav-button {
	z-index:100;
	position:absolute;
	top:0px;
	bottom:0px;
	width:5%;
	opacity:0;
}

#animation-forward-button {
	right:0px;
	/*background-color:rgba(139,196,128,0.50);*/
	background-image:url(../images/right-arrow.svg);
	background-position:center;
	background-repeat:no-repeat;
}

#animation-back-button {
	left:0px;
	/*background-color:rgba(184,112,113,0.50);*/
	background-image:url(../images/left-arrow.svg);
	background-position:center;
	background-repeat:no-repeat;
}

a {
	color:#40A4EC;
	text-decoration:none;
}

a:hover {
	
	color:white;
}


#page-content{
	display:block;
	font-size:3.5em;
	opacity:0;
	width:100%;
	height:auto;
}

.content-title, .content-body {
	position:relative;
	display:block;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  	padding:.5em;
}

.content-body {
	top:-1em;
}

#page-content h2, #page-content span {
	color:white;
}

.content-title{
	font-size:1.2em;
}

.clear {
	clear:both;
}

#footer {
	position: absolute;
	left:0.5em;
	right:0px;
	display: block;
	font-size: 3em;
	font-weight:400;
	text-align: left;
	color:#40A4EC;
	opacity:0;
}

#popup {
	display:none;
	position:absolute;
	z-index:10000;
	margin: 0 auto;
	left:0em;
	right:0em;
	top:0em;
	bottom:0em;
	background-color:rgba(255,255,255,0.90);
	font-size:3.5em;
	color:rgba(0,0,0,1.00);
	overflow:scroll;
}
.popup-close {
	margin:.5em;
	padding:.5em;
	float:right;
	position: relative;
	width:1.2em;
	font: 1.2em;
	height: 1.2em;
	line-height:1.2em;
	text-align: right;
	cursor: pointer;
	background-image:url(../images/exit.svg);
	background-size: contain;
	background-repeat:no-repeat;
}

.popup-close:hover{
	color:white;
	background-image:url(../images/exit-invert.svg);
}

.popup-content {
	position: relative;
	font-size:1em;
	margin:0em;
	margin-top:3em;
	width:80%;
	max-width:1000px;
	padding:.5em;
	background-color:rgba(255,255,255,0.80); 

}



 .form{ 
    max-width: 100%; 
    min-width: 25%; 
    border-width: 0px; 
    border-color: #CCCCCC; 
    border-radius: 4px; 
    border-style: solid; 
    color: #000000; 
    font-size: 1em; 
    margin: 0px; 
    
    padding: 0px; 
} 
.content{ 
    margin: 0px; 
} 
.form label{ 
    color: #222222; 
    font-size:1em; 
    display: block; 
} 
.form div{ 
    display: block; 
} 
.form input, form textarea, form select{ 
    border-width: 1px; 
    border-style: solid; 
    border-color: #666666; 
    border-radius: 4px; 
	font-size:1em;
    padding: 6px; 
    width: 100%; 
		box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
} 
.form, .form h1, .form h2{ 
    font-family: 'Open Sans', sans-serif;; 
} 
.intro{ 
    margin-bottom: 1em; 
} 
.clear{ 
    clear: both; 
} 
/*.form textarea{ 
    height: 2em; 
	font-size:1em;
    width: 100%; 
} */
.form input[type=submit]{ 
    width: 100%; 
	font-size:1em;
	height: 3em;
    background-color: #40A4EC; 
    color: white; 
	cursor:pointer;
} 
.form input[type=submit]:hover{ 
    background-color: white; 
	color:#40A4EC; 
} 
.field{ 
    margin-bottom: .5em; 
} 




@media screen and (min-width:1300px){
	
	#page-content, #footer {
		font-size:5em;
		
	}
	
	.content-title, .content-body {
		padding:5%;
		display:inline-block;
		width:50%;
		float:left;
		top: 50%;
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		transform:translateY(-50%);	
	}
	
	#footer {
		text-align:center;
		left:0px;
	}
	

	
}

@media screen and (min-width:1000px){
	#page-content, #footer, #popup {
		font-size:2em;
	}
	
	.popup-content {
		position: relative;
		margin:0 auto;
		margin-top:auto;
		width:80%;
		max-width:1000px;
		padding-bottom:5%;
	
	}
	
}