/*full background: http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php */

@font-face {
		font-family: 'archivo_blackregular';
		src: url('fonts/archivoblack/archivoblack-regular-webfont.eot');
		src: url('fonts/archivoblack/archivoblack-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/archivoblack/archivoblack-regular-webfont.woff') format('woff'),
		url('fonts/archivoblack/archivoblack-regular-webfont.ttf') format('truetype'),
		url('fonts/archivoblack/archivoblack-regular-webfont.svg#archivo_blackregular') format('svg');
		font-weight: normal;
		font-style: normal;

}

body {
		margin:0;
		font-family: 'archivo_blackregular', Impact, Arial, sans-serif;
}

#bg {
		position:fixed; 
		top:-50%; 
		left:-50%; 
		width:200%; 
		height:200%;
}
#bg img {
		position:absolute; 
		top:0; 
		left:0; 
		right:0; 
		bottom:0; 
		margin:auto; 
		min-width:50%;
		min-height:50%;
}

#page-wrap { position: relative; z-index: 2; width: 100%; height:1000px; margin: 50px auto; overflow:hidden;}


p { 
		position:relative;
		width:90%;
		margin:30px auto;
		text-align:center;
		font-family:serif;
		font-size:36px;
		color:#eaf6ff;
		
 }


h2 {
		position:relative;
		margin: 0;
		font-size:146px;
		line-height:130px;
		color:#fff;
		text-align:center;
}

.one {
    margin-top:115px;
    position:relative;
}

.two {
    margin-top:30px;
    position:relative;
}

#nav {
		text-align:center;
        position: absolute;
        top: 85%;
        left: 15%;
        float:left;
        clear:both;

       
}
.button {

		cursor:pointer;
		background-color:#b65651;
		padding:20px;
		display:inline-block;
		color:#efefef;
		font-family:Arial, Helvetica, Verdana;
		font-size:20px;
		letter-spacing: 0.05em;
		margin: 0 10px 30px 0;
}

#play, #pause, #reverse, #resume, #restart, #fastSpeed, #normalSpeed {
    /*
    width: auto;
    margin: 5;
    height: auto;
    padding: 3px;
    */
    background-color: darkblue;
    color:aliceblue;
  
}

.progress {
		position:relative;
		z-index:3;
		width:100%;
		height:8px;
		background-color:#fff;
}

h2, p {
		text-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);
}



/*Controller styles */

button {
		cursor:pointer;
}

#controller {
		z-index:2;
		position:absolute;
		display:inline:block;
		padding:20px;
		background-color:rgba(0, 0, 0, 0.4);
}

#slider{
		margin-top:20px;
}


/* map styles */

#mapContainer {
		text-align:left;
		position:relative;
		display:inline-block;
}

#mapPanel {
		position:absolute;
		background-color:#b8d7ea;
		width:287px;
		height:204px;
		top:-204px;
		/* top / right / bottom / left */
		clip:rect(0px 287px 204px 0px);
}

#map {
		position:absolute;
		margin:4px;
}

.pin{
		position:absolute;
		width:33px;
		height:46px;
		background:url(../images/pin.png);
}

#pin1 {
		top:104px;
		left:23px;
}

#pin2 {
		top:18px;
		left:45px;
}

#pin3 {
		top:67px;
		left:106px;
}

#pin4 {
		top:88px;
		left:226px;
}

input[type="text"] {
	font-weight: lighter;
	color: #4d4a4d;
	padding: .3em .5em; 
	font-size:14px;
}

input[type="submit"] {
	text-transform: uppercase;
	color: #fff;
	padding: .3em 1em;
	border: 1px solid #145412;
	background: #217e1f; 
	float:right;
	font-size:14px;
}

#form{
	position:absolute;
	top:155px;
	left:10px;
	font-weight: lighter;
	display: inline-block;
	padding: 5px; 
	border: 1px solid #ccc; 
	background: #ffffff;
	width:255px;
}

#form input[type="text"] {
	padding-left: 0;
	border: none; 
}

#form input[type="text"]:focus {
		outline: none; 
}
/* media queries */
@media (max-width: 830px) {
	h2 {
		font-size: 120px;
		line-height: 106px;
	}
	p {
		font-size: 26px;
	}
    
    #nav {
		text-align:center;
        position: absolute;
        top: 50%;
        left: 15%;
        float:left;
        clear:both;

       
        }
}

@media (max-width: 700px) {
	#page-wrap { 
		margin-top: 20px;
        overflow: visible;
	}
	h2 {
		font-size: 90px;
		line-height: 80px;
	}
	p {
		font-size: 24px;
	}
    
    #nav {
		text-align:center;
        position: absolute;
        top: 50%;
        left: 15%;
        float:left;
        clear:both;

       
        }
}

@media (max-width: 699px) {
	#page-wrap { 
		margin-top: 20px;
        height: 800px;
        overflow: visible;
	}
    
    #controller {
		z-index:2;
		position:absolute;
        top: 2%;
		display:inline:block;
		padding:20px;
        margin-top: -75px;
		background-color:rgba(0, 0, 0, 0.4);
    }
    
    .one {
    margin-top:120px;
    position:relative;
    }

    .two {
    margin-top:30px;
    position:relative;
    }
	
    #nav {
		text-align:center;
        position: absolute;
        top: 70%;
        left: 8%;
        float:left;
        clear:both;

       
        }

    
    h2 {
		font-size: 90px;
		line-height: 80px;
	}

   
	p {
		font-size: 24px;
	}
    
}