@import "normalize.css";
@import "skeleton.css";

body {	
	font-weight:300;
	color: #333;	
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;	
}
/*font size: html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So 1.5rem = 15px :) body font-size is set to 1.5em*/
/* heading styles over-riding skeleton */
h1 { font-size: 1.75em; color:#015284; font-weight: 700; font-family: 'Nixie One', cursive; }
h1.page-title {margin-top: 1em;}
h2 { font-size: 1.25em; color:#0077c1; font-weight: 700;  margin: 2em 0; padding: 0 2% 1em; font-family: 'Nixie One', cursive; border-bottom: 1px solid #e2e2e2; }
h2 span {color:#0c60b9;}
h3 { font-size: 1.25em; color: #0c60b9; font-weight: 400;	margin-top: 30px;}

p { margin: 0 0 1.5em 0; }
em { font-style: italic; }
strong { font-weight: bold;}
img, object, video {max-width: 100%; height: auto; display:block;}
img { max-width: 100%; width: auto; border: 0; -ms-interpolation-mode: bicubic;}
hr { border: solid #ff7a00; border-width: 1px 0 0; clear: both; margin: 30px auto; height: 0; width:80%;}

/* links */
a:link, a:visited { 
	color: #0077c1; 
	text-decoration: none; 
	outline: 0;
}
a:hover, a:active { color: #0099f8; }

.align-left{text-align: left;}
.align-center{text-align: center;}
.align-right{text-align: right;}
.imageLeft {float: left;	margin: 2%;}
.imageRight {float:right; margin: 2%;}
.imageCenter {margin:2% auto;}

header {
  margin:0 auto;
  padding: 0;
	width: 100%;
	z-index: 4;
}
#logo {	height: 140px; padding-left:1em;}
.social {text-align:right; padding: 1em 1em 0 0;}
.social img{display:inline;}
nav {	
	width: 100%;
	text-align:right;	
	font-size: 1em;	
	position: relative;	
	z-index: 10;
	margin-top:3em;
	font-weight:bold;
	text-transform:uppercase;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
}
nav li {
	display: inline;	
	padding:0 2.5%;
	margin:0; 
}
nav a {	
	display: inline-block;
	padding: 1em 0;
	text-decoration: none;		
}

nav ul li a:link, nav ul li a:visited {color:#0077c1;} 
nav ul li a:hover, nav ul li a:active {color:#0099f8;}
nav ul li.active a { color: #f371b0;}

nav a#pull {display: none;}

/* hero */
#hero {width:100%; max-height: 575px; overflow:hidden; position:relative; z-index:1; margin-top:2px;}
.photoSlide  {width:100%; height: 250px;	background: #cdcdcd url(../images/bg2.jpg) center bottom no-repeat; padding-top:325px;}
.text {background: rgba(0, 0, 0, 0.7); width:60%; margin: 0 auto; padding:2em .5em 3em .5em; text-align:center; border-radius:20px;}
.photoSlide h2 { color: #fff; font-size: 1.5em;  margin: 1em 0; padding: 0; font-family: 'Nixie One', cursive; border:0;}
.photoSlide h1 { color: #fff; font-size: 2.5em; margin: 0; padding: 0;  text-transform:uppercase; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 400; display:none;}
.title  {width:100%; padding: 4em 0;	background: #0077c1; text-align:center; margin-bottom:0; }
.title h1 {color:#fff; margin:0;}

a.button:link, a.button:visited { 
	color: #fff; 
	text-decoration: none; 
	outline: 0;
}
a.button:hover, a.button:active { color: #fff; background:#0077c1; border: 1px solid #0077c1; }
.button {border: 1px solid #fff; border-radius:10px; font-size: .875em;}
.gallery {background:#0077c1; border: 1px solid #0077c1;}



.content {padding: 2.5em 0;}
.content.home {padding-bottom: 5em;}
.content.inner {padding: 2.5em 0 0 0;}
.fb-page {margin-top: 1.5em; border: 1px solid #e2e2e2;  border-radius: 5px; padding:1%;}
.feature {margin-top: 1.5em; text-align:center;}
.feature img { border: 1px solid #e2e2e2;  border-radius: 5px; padding:1%; margin: 0 auto 1.5em; max-width:97%;}
.feature img:hover {border: 1px solid #ccc;}
h2.featureTitle { font-size: 1.25em; border-bottom: 1px solid #e2e2e2; margin: 1em 0; padding: 0 2% 1em;}
h2.featureTitle a {color:#404041;}
h2.featureTitle a:hover {color:#ccc;}
.featureDesc {  padding: 0 2% 1.5em;}

.dark {background:#404041; padding: 2.5em 0;}
.dark h2 {color:#57bcfa; border:0; padding:0;}
.dark p {color:#fff;}
.blue {background:#0077c1; padding: 4em 0;}
.blue h2 {color:#fff; border:0;  padding:0; margin:1em 0;}
.blue p {color:#fff;}
.affiliations {text-align:center;}
.affiliations img{display:inline; margin:1em;}
.photos img{display:inline;}
.testimonial {padding: 5em 0 4em; background: #8b8e91; color:#fff;}

.video-container {position: relative; padding-bottom: 56.25%;  padding-top: 35px; height: 0; overflow: hidden; margin-bottom: 3rem; }
.video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.swipebox img { display: inline; margin: 1%; max-width: 98%;}

footer {width: 100%;	display: block;	background-color:#8b8e91;	color:#000;}
footer a:link, footer a:visited {color:#013352;}
footer a:hover, footer a:active {border-bottom: 1px solid #015284;}
.footerBottomText {	min-height: 60px; position: relative;}
#copyright { margin: 1.5em 0; font-size: .85em;}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/*media queries*/
@media screen and (max-width: 1240px) {
/* ipad portrait */

  #logo {padding:0;}
  nav li {padding:0 1.5%; }
  nav  {margin-top:0em;}
	nav a {padding:.5em 0;}
	.content {-webkit-overflow-scrolling : touch;}	
	header {-webkit-overflow-scrolling : touch;}
	
}


/* mobile devices */
@media only screen and (max-width: 767px) {
#logo img{margin:0 auto;}
.social {text-align:center; padding: 1em 0 0 0;}
.photoSlide  {	}
.photoSlide h2 {font-size: 1.25em; }
.photoSlide h1 {font-size: 2em; }
.text { width:80%; margin: 0 auto; padding:2em .5em 3em .5em; text-align:center; border-radius:20px;}
	nav {
		
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav li {
		display: block;		
		width: 96%;
	}
	nav a {
    width: 100%;
		border-bottom: 1px solid #576979;
		text-align: left;	
	}
	nav a#pull {
		display: block;
		width: 100%;
		position: relative;
		border-bottom: 0;
	}
	nav a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	
.imageLeft {float: none;	margin: 2% auto; max-width:96%;}
.imageRight {float:none; margin: 2% auto; max-width:96%;}

.testimonial {background-image:none;}
.footerMiddle .column {text-align:center;}
.footerMiddle .column img {margin:0 auto;}
.call-to-action-button {float:none;}
#copyright {text-align:center;}


}