@import url (http://fonts.googleapis.com/css?family=Khula:400,700,300);
html, body {
	height:100%;
}

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: 0 auto -150px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 150px; 
}


body 
		{
			background: rgba(33,33,33,1.00);
			background-attachment:absolute;
			margin:0; 
			padding:0; 
			font-family: 'Khula', sans-serif; font-weight: 300; line-height:25px;
			text-align: center; 
			overflow: visible;
		}
		h3, h4 {
			font-family: 'Khula', sans-serif; font-weight: 100; line-height:25px;
			text-align: center; 
		}
		nav{
			background-color:#000000;
			opacity: 0.5;
			position:fixed;
			width:100%;
			padding:10px;
			z-index:1000;
			font-family:Khula;
			
		}
		
		nav ul{
			padding:0;
			margin:0 auto;
		
		}
		
		nav li{
			list-style:none;
			display:inline;
			margin-right:20px;
		
		}
		
		nav a, nav a:active, nav a:visited {
			color:#ffffff;
			text-decoration:none;
		}
		nav a:hover {
			color:#ccc;
		}
		
		
		.selected{
			background-color:#5DFCFE;
		}
		
p {
	font-family: 'Khula', sans-serif; font-weight: 300; line-height:25px;
	color:#333;
	font-size:0.75em;
		}
	
	
	#backgroundchange
		{
			position:absolute;
			width:100%;
			height:100%;
			
		}
	.backgroundimg
		{
			position: fixed;
			margin:0; 
			padding:0; 
    		top: 0;
    		left: 0;
    		height: 100%;
	    	width: 100%;
		}
		
	#back1 
		{background:url("images/bg1.jpg") no-repeat fixed center;
		bacground-size:cover;
		 -webkit-background-size: cover;
 		 -moz-background-size: cover;
 		 -o-background-size: cover;
 		 background-size: cover;
 		 margin: 0px;
		}
	#back2 
		{background:url("images/bg2.jpg") no-repeat fixed center;
		bacground-size:cover;
		 -webkit-background-size: cover;
 		 -moz-background-size: cover;
 		 -o-background-size: cover;
 		 background-size: cover;
 		 margin: 0px;}
	#back3 
		{background:url("images/bg3.jpg") no-repeat fixed center;
		bacground-size:cover;
		 -webkit-background-size: cover;
 		 -moz-background-size: cover;
 		 -o-background-size: cover;
 		 background-size: cover;
 		 margin: 0px;}
	#back4
		{background:url("images/bg4.jpg") no-repeat fixed center;
		bacground-size:cover;
		 -webkit-background-size: cover;
 		 -moz-background-size: cover;
 		 -o-background-size: cover;
 		 background-size: cover;
 		 margin: 0px;}
	
@keyframes backgroundchangeFadeInOut {
  	0% {opacity: 1;}
    25% {opacity: 1;}
    33% {opacity: 0;}
    92% {opacity: 0;}
    100% {opacity:1;}
		}

@-webkit-keyframes backgroundchangeFadeInOut {
	0% {opacity: 1;}
    25% {opacity: 1;}
    33% {opacity: 0;}
    92% {opacity: 0;}
    100% {opacity: 1;}
		}
		
		
@-o-keyframes backgroundchangeFadeInOut {
	0% {opacity: 1;}
    25% {opacity: 1;}
    33% {opacity: 0;}
    92% {opacity: 0;}
    100% {opacity: 1;}
		}
		
		
@-ms-keyframes backgroundchangeFadeInOut {
	0% {opacity: 1;}
    25% {opacity: 1;}
    33% {opacity: 0;}
    92% {opacity: 0;}
    100% {opacity: 1;}
		}
	
	#backgroundchange div:nth-of-type(1) 
		{
  			animation-delay: 16s;
  			-webkit-animation-delay: 16s;
			-moz-animation-delay: 16s;
			-ms-animation-delay: 16s;
			-o-animation-delay: 16s;
		}
	#backgroundchange div:nth-of-type(2) 
		{
  			animation-delay: 8s;
  			-webkit-animation-delay: 8s;
			-moz-animation-delay: 8s;
			-ms-animation-delay: 8s;
			-o-animation-delay: 8s;
		}
	#backgroundchange div:nth-of-type(3) 
		{
  			animation-delay: 4s;
			-webkit-animation-delay: 4s;
			-moz-animation-delay: 4s;
			-ms-animation-delay: 4s;
			-o-animation-delay: 4s;
		}
		#backgroundchange div:nth-of-type(4) 
		{
  			animation-delay: 0s;
			-webkit-animation-delay: 0s;
			-moz-animation-delay: 0s;
			-ms-animation-delay: 0s;
			-o-animation-delay: 0s;
		}
	#backgroundchange div 
		{
			animation-name: backgroundchangeFadeInOut;
			animation-timing-function: ease-in-out;
			animation-iteration-count: infinite;
			animation-duration: 22s;

			-webkit-animation-name: backgroundchangeFadeInOut;
			-webkit-animation-timing-function: ease-in-out;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-duration: 22s;
			
			-moz-animation-name: backgroundchangeFadeInOut;
			-moz-animation-timing-function: ease-in-out;
			-moz-animation-iteration-count: infinite;
			-moz-animation-duration: 22s;

			-ms-animation-name: backgroundchangeFadeInOut;
			-ms-animation-timing-function: ease-in-out;
			-ms-animation-iteration-count: infinite;
			-ms-animation-duration: 22s;
			
			-o-animation-name: backgroundchangeFadeInOut;
			-o-animation-timing-function: ease-in-out;
			-o-animation-iteration-count: infinite;
			-o-animation-duration: 22s;
		}
		
	/*Home*/
		#demographic {
		position:relative;
		top:0px;
		width:60%;
		margin:0 auto;
		padding:0;
		}
	
	/*Page 1 */
	
	#page1{
		position:relative;
		height:100%;
		width:100%;
		background-color:#73E1BA;
		border:1px dotted #fff;
		margin:0 auto;
		padding:0;
		opacity:0.9;
		
	}
		.title {
		border-bottom:1px dotted #fff;
		width:50%;
		positon:relative;
		z-index:200;
		margin:0 auto;
		padding-top:100px;
		font-size:4em;
		}
		#city {
		position:relative;
	
		width:100%;
		margin:0;
		padding:0;
		}
		
	#outerSunset {
		width:80%;
		text-align:left;
		margin:0 auto;
	}
		
	
	.columnizr {
		width:100%;
		text-align:left;
		color:#000;
		margin:0 auto;
   -webkit-column-count: 3;
	-moz-column-count: 3;
	-ms-column-count: 3;
	-o-column-count: 3;
	column-count: 3
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	-ms-column-gap: 20px;
	-o-column-gap: 20px;
	column-gap: 20px;

}
	#outerSunset {
		z-index:300;
	}
	#outerSunset a {
		position:relative;
		float:right;
		border:1px dotted white;
		padding:5px;
		z-index:300;
		color:#fff;
		text-decoration:none;
	}
	#outerSunset a:hover {
		color:#FF8E00;
		padding:2px;
	}
	#outerSunset a:visited, #outerSunset a:active  {
		color:#333;
	}
	/*page 2*/
	#page2 {
		position: relative;
		margin: 0 auto;
	}
	#schools {
		position:relative;
		margin:0 auto;
		height:50%;
		width:500px;
		margin:0 auto;
		padding:0;
		bottom:0;
		z-index:10;
		opacity: 1;
		
	}
	#schools:hover {
	-webkit-animation: mychange 5s; /* Chrome, Safari, Opera */
	-moz-animation: mychange 5s;
	-ms-animation: mychange 5s;
	-o-animation: mychange 5s;
	animation: mychange 5s;
	}
	@-webkit-keyframes mychange {
    25% {width:500px; opacity: 0.5}
    50% {width: 600px; opacity: 1}
	100% {width:500px; opacity: 0.5}
	}

/* Standard syntax */
	@keyframes mychange {
   25% {width:500px; opacity: 0.5}
    50% {width: 600px; opacity: 1}
	100% {width:500px; opacity: 0.5}
}


/*Page 3*/

 	#page3 {
		position: relative;
		margin: 0 auto;
		}
		
		#jobs {
		position:relative;
		margin:0 auto;
		margin:0 auto;
		padding:0;
		bottom:0;
		}
		/* #jobs:hover {
	-webkit-animation: mychange2 5s; /* Chrome, Safari, Opera 
	-moz-animation: mychange2 5s;
	-ms-animation: mychange2 5s;
	-o-animation: mychange2 5s;
	animation: mychange2 5s;
	}
	@-webkit-keyframes mychange2 {
    25% {opacity: 1; x:100}
    50% {opacity: 0; x:200}
	100% {opacity: 1; x:100}
	}

/* Standard syntax 
	@keyframes mychange2 {
  25% {opacity: 1}
    50% {opacity: 0}
	100% {opacity: 1}

}   */

	#page4 {
		position: relative;
		margin: 0 auto;
	}
	
 	#ourQuotes {
		position:relative;
		width:35%;
		margin:10% auto;
		padding:10px 10px 0px 30px;
		text-align:left;
		line-height:1.5em;
		font-size:2em;
	}

	#source {
		float:right;
		clear:both;
	}