body {
  padding:0; margin:0;
  background-color:#172638;
  background-image: url(../img/bg.gif);
  background-repeat: repeat;
  background-attachment:fixed;
}

#wrapper {
	width:100%;
	max-width:900px;
	margin:auto;
	padding:42px 0 0 0;
}

@media screen and (max-width:680px){
  #wrapper {
	  width:100%;
	  max-width:680px;}}

.footer {
	width:100%;
	max-width:800px;
	margin:0 auto 16px auto;
	left:0;
	bottom:0;
	padding: 18px 0 18px 0;
	font-family:'Open Sans', Tahoma, Helvetica, Arial, sans-serif;
    color: #ebebeb;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
	line-height:22px;
    overflow: hidden;
	opacity:1;
	z-index:1;
}

.footer a {
	font-family:'Open Sans', Tahoma, Helvetica, Arial, sans-serif;
	color:#007578;
	text-decoration:underline;
}

.footer a:hover {
	color:#FFFFFF;
	cursor: pointer;
}

.nav {
	position:fixed;
	width:100%;
	margin:0;
	padding:0;
	left:0;
	top:0;
	opacity:1;
	z-index:5;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.29);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.29);
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
	width:100%;
    list-style-type:none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #8fa9b8;
	background-image:
    linear-gradient(rgba(0,0,0,.015) 1px, transparent 1px),
    linear-gradient(0, rgba(0,0,0,.015) 1px, transparent 1px);
  background-size:5px 5px;
  background-position:-1px -1px, -1px -1px;
}

/* Float the list items side by side */
ul.topnav li {float: center;
display:inline-block;}

/* Style the links inside the list items */
ul.topnav li a {
	font-family:'Palitoon', 'Open Sans', Tahoma, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
    display: inline-block;
    color: #172638;
    text-align: center;
    padding: 14px 18px;
    text-decoration: none;
    transition: 0s;
    font-size: 24px;
	line-height:18px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
	background-color: #d7e5e6;
	color:#333333;
	cursor:pointer;
	}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav {padding: 0 0 0 18px;}
  ul.topnav li {float:left;}
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
	padding:0 18px 0 0;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

.copy {
	margin:4px auto 0px auto;
	background-color:#d7e5e6;
	width:95%;
	max-width:900px;
	border: 2px dashed #172638;
	box-shadow: 0 0 0 4px #d7e5e6;
	opacity:1;
	background-image:
    linear-gradient(rgba(0,0,0,.015) 1px, transparent 1px),
    linear-gradient(0, rgba(0,0,0,.015) 1px, transparent 1px);
  background-size:5px 5px;
  background-position:-1px -1px, -1px -1px;
  z-index:1;
}

.copy p {
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	color:#172638;
	font-size:14px;
	line-height:18px;
	text-align:left;
	padding:0px 28px 18px 28px;

}

.copy a {
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
	color:#007578;
	text-decoration:underline;
	font-weight:bold;
}

.copy a:hover {
	color:#172638;
	cursor: pointer;
}

.copy h1 {
	font-family:'Palitoon', 'Open Sans', Tahoma, Helvetica, Arial, sans-serif;
	color:#172638;
	font-size:48px;
	line-height:48px;
	text-transform:uppercase;
	text-align:center;
	padding:0px 28px 0px 28px;
}

@media screen and (max-width:480px) {
	.copy h1 {
		letter-spacing:-1px;
}
}

@media screen and (max-width:320px) {
	.copy img {
		display:none !important;
}
}

.copy h1 img {
	float:none;
	margin:0;
	padding:0;
}

.photo {
	margin:18px auto 6px auto;
	padding:0px;
	width:100%;
}

.photo img {
	width:100%;
	max-width:400px;
	margin:0 auto 0;
	height:auto;
}

.bio1 {
	width:50%;
	float:left;
}

.bio2 {
	width:50%;
	float:right;
}

.biowrap {
	width:100%;
	display:block;
	padding:0;
	margin:0;
}

@media screen and (max-width:680px) {
  .bio1 {
	  width:100%;
	  display:block;
  }
  .bio2 {
	  width:100%;
	  display:block;
  }
}
	

.lights {
	margin:4px auto 0 auto;
	padding:0 0 0 0;
	width:100%;
	min-height:34px;
	background-image:url(../img/lights.png);
	background-repeat:no-repeat;
	background-position:top;
	position:relative;
	z-index:-1;
	transform:translateY(-75px);
	-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;	
}
	

/*
==============================================
slideDown
==============================================
*/


.slideDown {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function:ease;	
	-webkit-animation-timing-function:ease;	

	visibility: visible !important;	
	-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;			
}

@keyframes slideDown {
	0% {
		transform: translateY(-75px);
	}		
	100% {
		transform: translateY(0px);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}		
	100% {
		-webkit-transform: translateY(0%);
	}	
}


/*
==============================================
wiggleIn
==============================================
*/

.wiggleIn {
	animation-name: wiggleIn;
	-webkit-animation-name: wiggleIn;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;		

	visibility: visible !important;	
}

@keyframes wiggleIn {
	0% {
		transform: scale(1);	
	}
	40% {
		transform: scale(1);	
		transform:rotate(2deg);
	}
	80% {
		transform: scale(1);	
		transform:rotate(-2deg);
	}
	100% {
		transform: scale(1);
	}		
}

@-webkit-keyframes wiggleIn {
	0% {
		-webkit-transform: scale(1);	
	}
	40% {
		-webkit-transform: scale(1);	
		-webkit-transform:rotate(2deg);
	}
	80% {
		-webkit-transform: scale(1);	
		-webkit-transform:rotate(-2deg);
	}
	100% {
		-webkit-transform: scale(1);
	}
}

/* Fonts */

@font-face {
  font-family: 'Palitoon';
  src: url('../fonts/palitoon-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/palitoon-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/palitoon-webfont.woff') format('woff'), /* Pretty Modern Browsers */
	   url('../fonts/Palitoon-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/palitoon-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Palitoon-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}