@charset "utf-8";

/* ==========================================================================
 Photo Gallery
 ========================================================================== */
.gallery,
.album,
.photo {
	float: left;
	display: block;
	overflow: hidden;
	width: 100px;
	height: 140px;
	margin: 0 2rem 2rem;
	line-height: 1.5rem;
	text-align: center;
}

a.photo img {
	width: 100px;
	height: 100px;
	padding: 0.4rem;
	border: 1px solid #473019;
}

a.photo:hover img, a.photo:focus img { border-color: #000; }

a.photo p {
	margin: 0;
	text-align: center;
	color: #473019;
}

a.photo:hover p, a.photo:focus p { color: #000; }



/* ==========================================================================
 Banners
 ========================================================================== */
.banner_main {
	margin-bottom: 3rem;
	float: left;
	width: 100%;
}

.banner_main,
.banner_main .banners {
	position: relative;
	z-index: 1;
}

.banner_main .banners {
	position: relative;
	width: 100%;
	max-width: 1000px;
	max-height: 500px;
	z-index: 1;
}

.banners .banner {
	position: relative;
	float: left;
}

.banners .banner img {
	float: left;
	width: 100%;
}

.banners .banner a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
}

.banners .banner .bottom {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 10px;
	background: repeat url("/images/body/banner_bg.png");
}

.banners .banner .bottom .display_title {
	font-size: 2rem;
	color: #fff;
}

.banner_main .control {
	position: relative;
	width: 100%;
}

.banner_main .arrow {
	height: 3rem;
	width: 3rem;
	display: inline-block;
	cursor: pointer;
	opacity: .5;
	top: 45%;
	z-index: 1;
	-webkit-filter: drop-shadow(0px 2px 5px #222);
	-moz-filter: drop-shadow(0px 2px 5px #222);
	filter: drop-shadow(0px 2px 5px #222);
}

.banner_main .previous .arrow {
	border-top: 4px solid #fff;
	border-left: 4px solid #fff;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	left: 1.6rem;
}

.banner_main .next .arrow {
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right: 1.6rem;
}

.banner_main .control .nav { }

.banner_main .control .nav a,
.banner_main .control .stop_play {
	display: inline-block;
	float: left;
	height: 10px;
	background-color: #eaedef;
	cursor: pointer;
}

.banner_main .control.no_num,
.banner_main .control .stop_play {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.banner_main .control .nav a:hover,
.banner_main .control .nav a:focus,
.banner_main .control .nav a.active_slide,
.banner_main .control .stop_play:hover,
.banner_main .control .stop_play:focus { background-color: #7aba3e; }

.banner_main .control .nav a.active_slide:hover,
.banner_main .control .nav a.active_slide:focus { background-color: #007dc4; }

.banner_main .control .stop_play {
	display: none;
	background-image: url("/images/body/banner_stop_play.png");
	background-repeat: no-repeat;
}

.banner_main .control .stop { background-position: -16px 0; }
.banner_main .control .play { background-position: 0 0; }


/* ==========================================================================
 Banner with Hotspots
 ========================================================================== */
.banner_hotspot {
	cursor: pointer;
	z-index: 1000;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 6%;
	width: 3%;
}

.banner_textbox {
	cursor: pointer;
	z-index: 999;
	position: absolute;
	top: 0;
	left: 0;
	height: 29%;
	width: 24%;
	padding: .8rem 1.4rem;
	font-size: 1.4rem;
	color: #000;
}

.book_textbox {
	cursor: pointer;
	z-index: 999;
	position: absolute;
	top: 0;
	left: 0;
	height: 27%;
	line-height: 1.5rem;
	width: 22%;
	padding: .8rem 1.4rem;
	font-size: 1.4rem;
	color: #000;
}

.pkg_hs_one {
	right: 24%;
	left: auto;
	top: 63%;
}

.pkg_hs_one a {
	font-weight: bold;
	margin: 3% 0 0 7%;
	text-decoration: none;
}

.pkg_hs_one p {
	margin-top: 11%;
}

.pkg_hs_two {
	right: 32%;
	left: auto;
	top: 41%;
}

.pkg_hs_two a {
	font-weight: bold;
	margin: 9% 0 0 7%;
	text-decoration: none;
}

.pkg_hs_two p {
	margin-top: 11%;
}

.pkg_hs_three {
	right: 21.5%;
	left: auto;
	top: 34%;
}

.pkg_hs_three a {
	font-weight: bold;
	margin: 9% 0 0 7%;
	text-decoration: none;
}

.pkg_hs_three p {
	margin-top: 11%;
}

.bk_hs_one {
	right: 48.75%;
	left: auto;
	top: 30.75%;
}

.bk_text_one {
	right: 49%;
	left: auto;
	top: 31%;
}

.bk_text_one a {
	font-weight: bold;
	margin: 5% 0 0 7%;
	text-decoration: none;
}

.bk_text_one p {
	margin-top: 8%;
}

.bk_hs_two {
	right: 19.75%;
	left: auto;
	top: 14%;
}

.bk_text_two {
	right: 20%;
	left: auto;
	top: 14%;
}

.bk_text_two a {
	font-weight: bold;
	margin: 6% 0 0 7%;
	text-decoration: none;
}

.bk_text_two p {
	margin-top: 8%;
}

.bk_hs_three {
	right: 27.75%;
	left: auto;
	top: 34.5%;
}

.bk_text_three {
	right: 28%;
	left: auto;
	top: 35%;
}

.bk_text_three a {
	font-weight: bold;
	margin: 4% 0 0 7%;
	text-decoration: none;
}

.bk_text_three p {
	margin-top: 6%;
	line-height: 1.4rem;
}

.bk_hs_four {
	right: 18.125%;
	left: auto;
	top: 53%;
}

.bk_text_four {
	right: 18.5%;
	left: auto;
	top: 54%;
}

.bk_text_four span {
	font-weight: bold;
	text-decoration: none;
	color: #007dc4;
}

.bk_text_four p {
	margin-top: 7%;
	line-height: 1.4rem;
}

.bk_hs_five {
	right: 37.75%;
	left: auto;
	top: 62%;
}

.bk_text_five {
	right: 38%;
	left: auto;
	top: 62%;
}

.bk_text_five a {
	font-weight: bold;
	margin: 6% 0 0 7%;
	text-decoration: none;
}

.bk_text_five p {
	margin-top: 9%;
}

.bk_hs_six {
	right: 30.75%;
	left: auto;
	top: 21%;
}

.bk_text_six {
	right: 31%;
	left: auto;
	top: 21%;
}

.bk_text_six a {
	font-weight: bold;
	margin: 7% 0 0 7%;
	text-decoration: none;
}

.bk_text_six p {
	margin-top: 10%;
}


/* ==========================================================================
 News Articles listing
 ========================================================================== */
.news_articles { margin: 2rem 0; }

.news_article {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 2px solid #616f78;
}

.news_article:last-child { border-bottom-width: 0; }

.news_article .category {
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
}

.news_article .title { padding: 1rem 0; }

.news_article .title a {
	font-size: 2.6rem;
	text-decoration: none;
	font-weight: 300;
}

.news_article .image {
	float: left;
	width: 150px;
}

.news_article .image img { width: 100%; }

.news_article .with_image .intro {
	margin-left: 150px;
	padding-left: 2rem;
	font-size: 1.4rem;
}

.news_article .intro {
	font-size: 1.4rem;
}

.news_article .read_more {
	color: #000;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}

.news_article .read_more:hover { color: #7aba3e; }


/* ==========================================================================
 News Articles comments
 ========================================================================== */
.comment_contain {
	margin-top: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed #fff;
}

.comment_contain.last { border-bottom: 0; }

.comment_contain .avatar {
	float: left;
	width: 70px;
	height: 70px;
}

.comment_contain .comment {
	min-height: 70px;
	padding-left: 80px;
}

.comment_contain .comment .header {
	font-size: 1.3rem;
	margin-bottom: 1rem;
}

.comment_contain .comment .header a, 
.comment_contain .comment .header span { font-weight: bold; }


/* ==========================================================================
 News Articles comment submission form
 ========================================================================== */
textarea.news_comment_textarea { height: 300px; }


/* ==========================================================================
 Staff
 ========================================================================== */
.info_box {
	width: 50%;
	float: left;
	font-weight: 700;
	line-height: 1.35;
}

.staff_container .staff_member {
	width: 49%;
	float: left;
	border-right: 3px solid #a5afb6;
	margin-bottom: 3rem;
}

.staff.sidebar {
	min-height: 10rem;
	padding: 4.6rem 1.6rem 1.4rem 1.6rem;
}

.sidebar .member {
	float: left;
	width: 100%;
	margin-bottom: 1rem;
}

.sidebar .member:last-child {
	margin-bottom: 0;
}

.staff_member:nth-child(even) {
	border-right: none;
	margin-left: 2%;
}

.staff_member .staff_image,
.sidebar .staff_image {
	float: left;
	width: 45%;
	padding-right: 1rem;
	max-width: 150px;
}

.staff_member .staff_text {
	float: left;
	width: 55%;
}

.staff_member .staff_position,
.sidebar .staff_position {
	text-transform: uppercase;
	margin-bottom: .6rem;
	text-decoration: none;
	color: #000;
	font-weight: 700;
	font-size: 1.2rem;
	display: block;
}

.staff_member .staff_name,
.sidebar .staff_name {
	font-size: 2rem;
	color: #007dc4;
	display: block;
	margin-bottom: .6rem;
}

.staff_phone {
	font-size: 1.4rem;
}

.staff_container a { font-size: 1.4rem; }

.member .sidebar_content p {
	font-size: 1.4rem;
	margin: 0;
}



/* ==========================================================================
 Sub-Banners
 ========================================================================== */
.subbanners {
	padding: 2rem 0 2rem 0;
	float: left;
	width: 100%;
	margin-bottom: 2rem;
	margin-top: -35px;
}

.subbanner {
	position: relative;
	float: left;
	width: 25%;
	padding: 0 2%;
}

.subbanner_name {
	display: inline-block;
	width: 100%;
	padding: 1rem 0;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	color: #000;
	border-bottom: 2px solid #a5afb6;
}

.subbanner img {
	max-width: 125px;
	display: block;
	margin: 0 auto;
}

.subbanner a {
	position: relative;
	display: inline-block;
	font-size: 1.4rem;
	text-decoration: none;
}

.subbanner a:before {
	content: "Learn more";	
}

.subbanner a:after {
	content: "";
	display: inline-block;
	margin-left: .4rem;
	margin-bottom: .1rem;
	height: .6rem;
	width: .6rem;
	border-top: 1px solid #007dc4;
	border-right: 1px solid #007dc4;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.subbanner a:hover:after,
.subbanner a:focus:after {
	border-color: #7aba3e;
} 

.subbanner .subbanner_description { 
	display: inline-block;
	font-size: 1.4rem; 
	padding-top: 1rem;
	min-height: 14rem;
}

.subbanner .subbanner_description p { margin: 0 0 1rem; }


/* ==========================================================================
 YouTube Videos
 ========================================================================== */
.video_main .player {
	position: relative;
	float: left;
	width: 65%;
	max-width: 600px;
	padding-right: 1rem;
}

.video_main .video_loading {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
}

.video_main .video_loading img { width: 100%; }

.video_main .video_embed {
	position: relative;
	overflow: hidden;
	height: 0;
	padding: 30px 0 62.5%;
}

.video_main .video_embed iframe,
.video_main .video_embed object,
.video_main .video_embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_main h2,
.video_main h3 { margin-top: 0; }

.video_main .list {
	float: left;
	width: 35%;
	margin: 1rem 0;
	padding-left: 1rem;
}

.video_main .list ul {
	padding: 0;
	list-style: none;
}

.video_main .list li { padding: 0.2rem 0; }

.video_main .list .active {
	font-weight: bold;
	color: #000;
	text-decoration: none;
	cursor: default;
}

/* ==========================================================================
  Desktop view (1200 pixels)
 ========================================================================== */

@media all and (max-width: 1200px) {
	.video_main .player {
		float: none;
		width: 100%;
		padding-right: 0;
	}

	.video_main .list {
		float: none;
		width: 100%;
		padding-left: 0;
	}
}

/* ==========================================================================
  Desktop view (970 pixels)
 ========================================================================== */
@media all and (max-width: 970px) {
	.subbanners {
		padding: 1.6rem 4rem;
	}

	.subbanner {
		width: 50%;
		padding-bottom: 4rem;
	}
	
	.subbanner .subbanner_description {
		min-height: 5rem;
	}
	
	.staff.sidebar {
		margin-top: -20px;
	}
}

/* ==========================================================================
 Mobile view (less than 620 pixels)
 ========================================================================== */
 @media all and (max-width: 620px) {
 	.subbanners {
		padding: 0;
		margin: 0;
		margin-top: -15px;
 	}

	.subbanner {
		width: 100%;
		padding: .6rem 1.6rem;
		border-bottom: 2px solid #a5afb6;
		position: relative;
	}

	.subbanner:last-child {
		border-bottom: none;
	}

	.subbanner img {
		margin: 0 1rem 0 0;
		display: inline-block;
		max-width: 65px;
		width: 30%;
		vertical-align: middle;
	}

	.subbanner .subbanner_name {
		border-bottom: none;
		text-align: left;
		font-size: 1.8rem;
		padding: 0;
		display: inline-block;
		width: 60%;
		position: relative;
		vertical-align: middle;
		line-height: 1;
	}

	.subbanner .subbanner_description {
		display: none;
	}

	.subbanner a:before, .subbanner a:after {
		content: none;
	}
	
	.staff_group .staff_member {
		width: 100%;
		padding: 0;
		border: none;
		min-height: 1rem;
	}
	
	.staff_member:nth-child(even) {
		margin-left: 0;
	}

 }


/* ==========================================================================
  Mobile view (400 pixels)
 ========================================================================== */

@media all and (max-width: 400px) {
	.info_box {
		width: 100%;
		float: none;
	}
	
	.sidebar .member {
		margin-top: 1.5rem;
	}

	.staff_member .staff_image, .sidebar .staff_image {
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	
	.staff_member .staff_text, .sidebar .sidebar_content {
		width: 100%;
		text-align: center;
		padding: 0;
	}

	.news_article .image {
		float: none;
		width: 150px;
		margin: auto;
	}

	.news_article .with_image .intro {
		margin-left: 0;
		width: 100%;
		text-align: center;
		padding: 0;
	}
}