﻿ /* CSS FOR THE SLIDESHOW */
 
 /* Resets */

 html, body {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	max-width: 100%;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
 header, section, footer, aside, nav, main, article, figure {
 	display: block;
 }
 /* margin hack for IE8 */

 * {
 	margin: 0;
 }
 /* responsive image hack for IE8 */


 @media \0screen {
 	img {}
 }
 img {
 	border-width: 0px;
 	max-width: 100%;
 	border-style: none;
 }
 body {
 	
 	color: #202020;
 	font-size: 100%;
 	background: #F4F7FB
 }
 a {
 	outline: 0;
 	/* removes those irritating dots from around visited links */
 }
 a img {
 	outline: none;
 }
 a, a:hover, a:active, a:focus, a img, object, embed {
 	outline: none;
 	ie-dummy: expression(this.hideFocus=true);
 	/* MSIE - Microsoft Internet Explorer 9 remove outline */
 }
 /* == Universal selector (box-sizing: border-box;
 ) required for image gallery but not topnav == */

 * {
 	box-sizing: border-box;
 }
 /* ============== LINK STYLE for <p> ============= */

 /* unvisited link */

 a.p-link:link {
 	color: blue;
 }
 /* visited link */

 a.p-link:visited {
 	color: blue;
 }
 /* hover */

 a.p-link:hover {
 	text-decoration: underline;
 }
 /* active */

 a.p-link:active {
 	color: red;
 }
 /* ============== 'EXPLORE' button ============= */

 .button-link {
 	display: inline-block;
 	margin-top: 20px;
 	margin-left: auto;
 	margin-right: auto;
 	padding-left: 10px;
 	padding-right: 10px;
 	padding-top: 7px;
 	padding-bottom: 7px;
 	background: #425cbb;
 	letter-spacing: 1px;
 	color: white;
 	font-size: 0.8em;
 	font-weight: 600;
 	text-decoration: none;
 	border: solid 1px #ebebeb;
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
 	-webkit-transition-duration: 0.3s;
 	-moz-transition-duration: 0.3s;
 	transition-duration: 0.3s;
 }
 .button-link:hover {
 	-webkit-transition-duration: 0.10s;
 	-moz-transition-duration: 0.10s;
 	transition-duration: 0.10s;
 	background: transparent;
 }
 .button-link:active {
 	background: red;
 }
 /* ============== Back to top of page anchor style ============= */

 a.back-to-top {
 	display: none;
 	width: 50px;
 	height: 50px;
 	border: 1px solid #C0C0C0;
 	text-indent: -9999px;
 	position: fixed;
 	z-index: 999;
 	right: 20px;
 	bottom: 20px;
 	background: white url("../images/back-to-top-button.jpg") no-repeat center 43%;
 	-webkit-border-radius: 25px;
 	-moz-border-radius: 25px;
 	border-radius: 5px;
 }
 a:hover.back-to-top {
 	border: 1px solid #565656;
 	-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
 	-moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
 	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
 }
 /* ============== FONTS ============= */

 b, strong {
 	font-weight: bold;
 }
 /* FONT COLOR CLASSES */

 .white {
 	color: #fff;
 }
 .gray {
 	color: #dfdfdf;
 }
 .black {
 	color: #333333;
 	text-shadow: 0px 1px 0px rgba(255, 255, 255, .5);
 }
 H1 {
 	font-family: Times, sans-serif;
 	color: #202020;
 	font-weight: 400;
 	margin-bottom: 8px;
 }
 @media all and (max-width:320px) {
 	H1 {
 		font-size: 100%;
 	}
 }
 @media all and (min-width:321px) and (max-width: 540px) {
 	H1 {
 		font-size: 180%;
 	    font-weight: 500;
 	}
 }
 @media all and (min-width:641px) and (max-width: 960px) {
 	H1 {
 		font-size: 220%;
 	
 	}
 }
 @media all and (min-width:961px) and (max-width: 1200px) {
 	H1 {
 		font-size: 300%;
 	}
 }
 @media all and (min-width: 1201px) {
 	H1 {
 		font-size: 300%;
 	}
 	
 	
 	H2 {
 		font-family: Times, sans-serif;
 		color: #202020;
 		font-weight: 200;

 	}
 }
 @media all and (max-width:320px) {
 	H2 {
 		font-family: Times, sans-serif;
 		font-size: 150%;
 		color: #202020;
 		font-weight: 100;
 	}
 }
 @media all and (min-width:321px) and (max-width: 540px) {
 	H2 {
 		font-family: Times, sans-serif;
 		font-size: 170%;
 		color: #202020;
 		font-weight: 100;
 	}
 }
 @media all and (min-width:641px) and (max-width: 960px) {
 	H2 {
 		font-family: Times, sans-serif;
 		font-size: 180%;
 		color: #202020;
 		font-weight: 100;
 	}
 }
 @media all and (min-width:961px) and (max-width: 1200px) {
 	H2 {
 		font-family: Times, sans-serif;
 		font-size: 200%;
 		color: #202020;
 		font-weight: 200;
 	}
 }
 @media all and (min-width: 1201px) {
 	H2 {
 		font-family: Times, sans-serif;
 		font-size: 220%;
 		color: #202020;
 	}
 	H4 {
 		font-family: Arial, sans-serif;
 		color: #202020;
 		font-weight: 600;
 		margin-top: 10px;
 	}
 }
 @media all and (max-width:320px) {
 	H4 {
 		font-size: 95%;
 	}
 }
 @media all and (min-width:321px) and (max-width: 640px) {
 	H4 {
 		font-size: 100%;
 	}
 }
 @media all and (min-width:641px) and (max-width: 960px) {
 	H4 {
 		font-size: 100%;
 	}
 }
 @media all and (min-width:961px) and (max-width: 1200px) {
 	H4 {
 		font-size: 110%;
 	}
 }
 @media all and (min-width: 1201px) {
 	H4 {
 		font-size: 120%;
 	}
 	H5 {
 		font-size: 100%;
 		font-family: Arial, sans-serif;
 		font-weight: 400;
 		color: #565656;
 	}
 }
 @media all and (max-width:320px) {
 	H5 {
 		font-size: 75%;
 	}
 }
 @media all and (min-width:321px) and (max-width: 960px) {
 	H5 {
 		font-size: 80%;
 	}
 }
 @media all and (min-width:961px) and (max-width: 1200px) {
 	H5 {
 		font-size: 90%;
 	}
 }
 @media all and (min-width: 1201px) {
 	H5 {
 		font-size: 100%;
 	}
 	p {
 		font-size: 116%;
 		font-family: "lato Medium", Arial, sans-serif;
 		
 		font-weight: 300;
 		/* Improve Lato rendering in Safari */
 		-webkit-text-stroke: rgba(255, 255, 255, 0.01) 0.1px;
 	}
 }
 @media all and (max-width:320px) {
 	p {
 		font-size: 80%;
 	}
 }
 @media all and (min-width:321px) and (max-width: 960px) {
 	p {
 		font-size: 100%;
 	}
 }
 @media all and (min-width:961px) and (max-width: 1200px) {
 	p {
 		font-size: 114%;
 	}
 }
 @media all and (min-width: 1201px) {
 	p {
 		font-size: 116%;
 	}
 }
 .small {
 	font-size: 0.75em;
 	font-weight: 400;
 	padding-left: 15px;
 	letter-spacing: 1px;
 }
 h1, h2, h3, h4, h5, h6, p {
 	line-height: 1.45;
 }
 /* Paragraph list */

 ul {
 	list-style-type: none;
 	padding: 0;
 	margin: 0;
 }
 li.bullet {
 	background-image: url("../images/bullet.gif");
 	background-repeat: no-repeat;
 	/* background position: horizontal px, vertical px */
 	background-position: 15px 9px;
 	font-size: 116%;
 	font-family: "lato Medium", Arial, sans-serif;
 	color: #252525;
 	padding-left: 32px;
 	/* positions text in the list */
 	line-height: 1.45;
 }
 @media all and (max-width:320px) {
 	li.bullet {
 		font-size: 90%;
 		background-position: 15px 7px;
 	}
 }
 @media all and (min-width:321px) and (max-width: 960px) {
 	li.bullet {
 		font-size: 100%;
 		background-position: 15px 6px;
 	}
 }
 @media all and (min-width:961px) and (max-width: 1200px) {
 	li.bullet {
 		font-size: 114%;
 	}
 }
 @media all and (min-width: 1201px) {
 	li.bullet {
 		font-size: 116%;
 	}
 }
 /* Hyphen with extra indent */

 li.hyphen {
 	background-image: url("../images/hyphen.gif");
 	background-repeat: no-repeat;
 	background-position: 45px 60px;
 	font-size: 116%;
 	font-family: "lato Medium", Arial, sans-serif;
 	color: #252525;
 	line-height: 1.45;
 	padding-left: 55px;
 	/* left hand text position relative to the hyphen */
 	padding-right: 30px;
 }
 @media all and (max-width:320px) {
 	li.hyphen {
 		font-size: 90%;
 		background-position: 35px 7px;
 	}
 }
 @media all and (min-width:321px) and (max-width: 960px) {
 	li.hyphen {
 		font-size: 100%;
 		background-position: 35px 9px;
 	}
 }
 @media all and (min-width:961px) and (max-width: 1200px) {
 	li.hyphen {
 		font-size: 114%;
 		background-position: 35px 9px;
 	}
 }
 @media all and (min-width: 1201px) {
 	li.hyphen {
 		font-size: 116%;
 		background-position: 35px 9px;
 	}
 }
 /* wrapper for the heading and article content */

 #container {
 	width: 100%;
 	margin: 0 auto 32 auto;
 	display: block;
 }
 #section {
 	width: 100%;
 }
 #heading {
 	max-width: 1200px;
 }
 #wrapper {
 	max-width: 1200px;
 	height: 100%;
 	margin: 0 auto;
 	padding-left: 100px;
 	padding-right: 100px;
 }
  @media all and (max-width:900px) {
 	#wrapper {
 		padding-left: 80px;
 		padding-right: 80px;
 	}
 }

 @media all and (max-width:800px) {
 	#wrapper {
 		padding-left: 30px;
 		padding-right: 30px;
 	}
 }
  @media all and (max-width:600px) {
 	#wrapper {
 		padding-left: 10px;
 		padding-right: 10px;
 	}
 }

 
 div.row-b {
 	/* div row with left aligned content */
 	width: 100%;
 	margin-bottom: 20px;
 }
 div.pic-row-gray {
 	/* div row with left aligned content-gray */
 	width: auto;
 	background-color: #ebebeb;
 	margin-bottom: 2%;
 	min-height: 400px;
 	padding-top: 2%;
 	padding-left: 2%;
 	padding-right: 2%;
 }
 /* ALIGNMENT */

 .valign-wrapper .valign {
 	display: block;
 }
 /* div row with centered content */

 div.center {
 	position: absolute;
 	top: 40%;
 	width: 95%;
 	margin: 0 auto;
 	text-align: center;
 	padding-left: 15px;
 	padding-right: 15px;
 }
 .right-align {
 	text-align: right;
 }
 /* ============== HOME PAGE STYLE ============= */

 img.bg {
 	width: 1600px;
 	height: 1069px;
 	background-color: #252525;
 	min-height: 100%;
 	min-width: 100%;
 	/* Set up proportionate scaling */
 	width: 100%;
 	height: auto;
 	/* Set up positioning */
 	position: fixed;
 	top: 1px;
 	left: 0px;
 	z-index: -10;
 }
 /* ============== Brochure ============= */

 div.brochure-content {
 	max-width: 100%;
 	margin: 0 auto;
 	margin-top: 5%;
 	margin-bottom: 5%;
 	padding-top: 2%;
 	padding-left: 2%;
 	padding-right: 2%;
 	border: 1px solid #C0C0C0;
 	border-radius: 5px;
 	background: #FFFFFF;
 }
 .pic-frame-brochure {
 	float: left;
 	table-layout: fixed;
 	display: block;
 	margin-top: 10px;
 	margin-bottom: 30px;
 	margin-left: 10px;
 	margin-right: 40px;
 }
 @media all and (max-width:650px) {
 	.pic-frame-brochure {
 		width: 100%;
 		margin-left: auto;
 		margin-right: auto;
 	}
 }
 /* ============== Pic Text Row ============= */

 #image-gallery {
 	max-width: 1200px;
 	height: 100%;
 	margin: 0 auto;
 }
 div.img-single {
 	border: 1px solid #ccc;
 	margin-bottom: 10px;
 	border-radius: 5px;
 	overflow: hidden;
 	margin-right: 30px;
 	margin-top: 15px;
 	-webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
 	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
 	background: white;
 }
 div.img img {
 	width: 100%;
 	height: auto;
 }
 div.desc-single {
 	padding: 0px;
 	text-align: center;
 	margin-bottom: 5px;
 }
 .responsive-single {
 	padding: 0 6px;
 	float: left;
 }
 @media only screen and (max-width: 1800px) {
 	.responsive-single {
 		width: 70%;		
 		margin-top: 10px;
 		margin-right: 10px;
 		margin-bottom: 5px;
 	}
 	div.img-single {
 		margin-right: 10px;
 	}
 }
 @media only screen and (max-width: 400px) {
 	.responsive-single {
 		width: 100%;
 	}
 	div.img-single {
 		margin-top: 10px;
 		margin-right: 0px;
 		margin-bottom: 30px;
 	}
 }
 /* ============== Pic Table Row ============= */

 div.img-single-table {
 	border: 1px solid #ccc;
 	margin-bottom: 10px;
 	border-radius: 5px;
 	overflow: hidden;
 	margin-right: 30px;
 	margin-top: 15px;
 	-webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
 	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
 }
 .responsive-single-table {
 	padding: 0 6px;
 	float: left;
 }
 @media only screen and (max-width: 900px) {
 	.responsive-single-table {
 		width: 49.99999%;
 		margin: 6px 0;
 	}
 }
 @media only screen and (max-width: 500px) {
 	.responsive-single-table {
 		width: 100%;
 		padding: 0px;
 	}
 	div.img-single-table {
 		margin-right: 0px;
 		margin-bottom: 30px;
 	}
 }
 .clearfix:after {
 	content: "";
 	display: table;
 	clear: both;
 }
 div.pic-text-content {
 	width: auto;
 	margin-bottom: 2%;
 	min-height: 400px;
 	padding-top: 2%;
 }
 div.pic-table-content {
 	width: auto;
 	margin-bottom: 2%;
 	min-height: 400px;
 	padding-right: 2%;
 	padding-left: 2%;
 	padding-bottom: 7%;
 	border: 1px solid #C0C0C0;
 	border-radius: 8px;
 	background: white;
 }
 .pic-frame-style1 {
 	float: left;
 	table-layout: fixed;
 	display: block;
 	border-radius: 4px;
 	border: 1px solid #C0C0C0;
 	background-color: #f6f6f6;
 	margin-top: 10px;
 	margin-bottom: 30px;
 	margin-left: 10px;
 	margin-right: 40px;
 	-webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.15);
 	-moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.15);
 	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.15);
 }
 @media all and (max-width:800px) {
 	.pic-frame-style1 {
 		margin-left: 20%;
 		margin-right: 20%;
 	}
 }
 @media all and (max-width:650px) {
 	.pic-frame-style1 {
 		margin-left: 15%;
 		margin-right: 15%;
 	}
 }
 @media all and (max-width:475px) {
 	.pic-frame-style1 {
 		max-width: 100%;
 		margin-left: auto;
 		margin-right: auto;
 	}
 }
 .text-center {
 	text-align: center;
 }
 .pic-frame-style1-img {
 	max-width: 100%;
 	border-radius: 3px;
 }
 /* ============== One Pic Row ============= */

 .one-pic-content {
 	display: block;
 	max-width: 100%;
 }
 .pic-frame-style3 {
 	border-radius: 4px;
 	border: 1px solid #C0C0C0;
 }
 .pic-frame-style3, img {
 	max-width: 100%;
 	border-radius: 3px;
 	margin-left: auto;
 	margin-right: auto;
 }
 /* ============== Two Pic Row ============= */

 .two-pic-content {
 	display: inline-block;
 	width: 100%;
 }
 .pic-frame-style2-left {
 	float: left;
 	border-radius: 4px;
 	border: 1px solid #C0C0C0;
 	margin-left: 8%;
 	width: 400px;
 }
 .pic-frame-style2-right {
 	float: right;
 	border-radius: 4px;
 	border: 1px solid #C0C0C0;
 	margin-right: 8%;
 	width: 400px;
 }
 .text-center {
 	text-align: center;
 }
 @media all and (max-width:1100px) {
 	.pic-frame-style2-left, .pic-frame-style2-right {
 		margin-left: 0%;
 		margin-right: 0%;
 	}
 }
 @media all and (max-width:950px) {
 	.two-pic-content {
 		content: "";
 		display: table;
 		clear: both;
 		width: 400px;
 		margin: 0 auto;
 	}
 	.pic-frame-style2-right {
 		float: left;
 		margin-top: 20px;
 	}
 }
 @media all and (max-width:450px) {
 	.pic-frame-style2-left, .pic-frame-style2-right {
 		width: auto;
 	}
 	.two-pic-content {
 		width: 100%;
 	}
 	.pic-frame-style2-img {
 		max-width: 100%;
 		height: auto;
 		border-radius: 3px;
 	}
 	.table-content {
 		display: block;
 		max-width: 100%;
 	}
