@-ms-viewport { width: device-width; }

html {
	color: #36525e;
	background: white;
	width: 100%;
	min-width: 100%;
	height: 100%;
	margin:0;
	padding:0;
	font-family: "Arial", sans-serif;
	font-size: 1em;
}

html, body {
  scroll-behavior: smooth;
} 

body {
	width: 100%;
	min-width: 100%;
	margin:0;
	padding:0;
	overflow-x: hidden;
}

#wrapper {
	width: 100%;
	max-width: 1000px;
	min-width: 200px;
	margin: 0 auto;
}

#wrapper-membership {
	width: 100%;
	max-width: 1000px;
	min-width: 200px;
	margin: 0 auto;
}	

header	{
	background: #213556;
	z-index: 99 !important;
	width: 100%;
	position: relative;
	line-height: 0;
	float: left;
	display: table; 
}

#weather {
	color: gold;
	font-size: 11px;
	white-space: nowrap;
	line-height: 9px;
	width: 14%;
	margin: 1% 4% .5em 0;
	border-left: thin solid grey;
	float: right;
}

@media screen and (max-width: 1050px) { 
	#weather { display: none; }
}
@media screen and (max-width: 780px) { 
	#weather { margin: 2% 12% 1% 0 !important; display: none; }
}
@media screen and (max-width: 600px) { 
	#weather { display: none; }
}


/* Navigation
--------------------------------------------- */

nav	{
	width: 410px;
	margin-top: 4.5%;
	float: right;
}

nav ul	{
	font-family: Arial, sans-serif;
	font-size: .80em;
	list-style: none;
	text-align: right;
	width: 100%;
	margin: 0; padding: 2% 0 0;
	position: relative;
	float: right;
}

nav ul ul {
	width: 230px;
	position: absolute;
	top: 2em; right: 0;
	z-index: 999;
	opacity: 0;
    visibility: hidden;
    transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -webkit-transition: all .25s ease-in;
}

li { cursor: pointer; }


nav ul li { display: inline-block; text-align: left; }

nav ul li:nth-of-type(1) { width: 60px; }
nav ul li:nth-of-type(2) { width: 60px; }
nav ul li:nth-of-type(3) { width: 80px; }
nav ul li:nth-of-type(4) { width: 60px; }
nav ul li:nth-of-type(5) { width: 75px; text-align: right; }

/*Make link stay a certain color when hovered over and left*/
nav ul li:nth-of-type(1):hover > a { color: white; }
nav ul li:nth-of-type(1).current > a { color: white; }

nav ul li:nth-of-type(2):hover > a { color: white; }
nav ul li:nth-of-type(2).current > a { color: white; }

nav ul li:nth-of-type(3):hover > a { color: white; }
nav ul li:nth-of-type(3).current > a { color: white; }

nav ul li:nth-of-type(4):hover > a { color: white; }
nav ul li:nth-of-type(4).current > a { color: white; }

nav ul li:nth-of-type(5):hover > a { color: white; }
nav ul li:nth-of-type(5).current > a { color: white; }

nav ul li a {
	color: silver;
	font-size: .90em; 
	font-weight: bold !important;
	text-decoration: none;
	text-align: right;
}

nav ul li.active-link { color: white; }

nav ul li:hover, nav ul li.current { color: white; }

nav ul ul li {
	font-size: 1.3em !important;
	display: block;
}

nav ul ul li:nth-of-type(1) { width: 100%; }
nav ul ul li:nth-of-type(2) { width: 100%; }
nav ul ul li:nth-of-type(3) { width: 100%; }

nav ul li:hover ul {
	background-color: #213556;	
	border-top: none;
	visibility: visible;
    opacity: 1;
	display: block;
}

nav ul ul li:hover {
	background-color: #6e7e97;
	display: block;
}

nav ul ul li.active-link { color: white; }

nav ul ul li.current { color: white; }


nav ul ul li a {
	color: silver;
	border: none;
	text-align: left;
	width: 96%;
	padding: 18px 0 20px 4%;
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	cursor: pointer;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox] { display: none; }

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { display: block; }


 
/* Navigation Media Queries
--------------------------------------------- */

@media all and (min-width: 781px) and (max-width: 1050px) {
	
	nav { width: 390px; margin-top: 3.75%; margin-right: 5%; }

	nav ul ul { width: 235px; }
	
	nav ul li:nth-of-type(1) { width: 60px; }
	nav ul li:nth-of-type(2) { width: 60px; }
	nav ul li:nth-of-type(3) { width: 80px; }
	nav ul li:nth-of-type(4) { width: 70px; }
	nav ul li:nth-of-type(5) { width: 70px; text-align: right; }

	nav ul li a { font-size: .90em; }
}

@media screen and (max-width: 780px) {

	nav {
		width: 100%;
		margin: 0; padding: 0; }

	nav img { width: 30px; }

	/*Make dropdown links appear inline*/
	nav ul {
		width: 94%;
		margin: 1em auto 0;
		padding: 0;
		display: none;
		float: none;
		border-bottom: none; }	
		
	/*Push down content*/
	nav ul ul {
		opacity: 1;
		visibility: visible;
		position: relative;
		top: 0;
		width: 100% !important;
		margin: 0; padding: 0;
		display: block !important;
		float: none; }

	nav ul li:hover ul {
		padding-left: 0; }

	nav ul li:hover li {
		background: #213556; }

	/*Create vertical spacing*/
	nav ul li {
		line-height: 30px;
		border-top: thin solid dimgrey; }

	nav ul li:nth-of-type(1) {
		border-top: none !important; }

	nav ul li:hover { background: #A2A4B1; }

	nav ul li a {
		color: white;
		font-family: "Arial", sans-serif;
		font-size: 1.1em;
		font-weight: normal !important;
		text-align: left !important;
		margin-left: 10px;
		display: block; }

	nav ul li a.active-link {
		color: white;
		font-size: 1.4em;
		text-decoration: none;
		border-bottom: none; }

	nav ul li a:hover {
		color: white !important;
		text-decoration: none;
		border-bottom: none; }

	nav ul li a:hover, nav ul li a.current {
		border-bottom: none; }

	nav ul li li {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-top: thin solid dimgrey;	}

	nav ul li li:nth-of-type(1) {
		border-top: thin solid dimgrey !important; }
		
	nav ul li li:hover {
		background-color: #6e7e97;
		text-decoration: none;
		border-bottom: none; }

	nav ul li li a {
		color: white;
		font-size: 1.1em;
		margin-left: 0;
		padding: 0 0 0 4%; }

	nav ul li li a.active-link {
		font-size: 1.4em;
		text-decoration: none;
		border-bottom: none; }

	label[for="show-menu"] {
		color: white !important;
		margin: 0 !important;
		margin: -4.5em 4% 0 0!important;
		float: right; }

	/*Display 'show menu' link*/
	.show-menu {
		display: block;
		margin: 0 !important;
		padding: 0 !important; }
		
	/*Make all menu links full width*/
	ul li, li a {
		width: 100% !important;
		text-align: center !important; }
}

@media screen and (max-width: 600px) {
	label[for="show-menu"] { margin: -4em 4% 0 0 !important; }
}
@media screen and (max-width: 480px) {
 	label[for="show-menu"] { margin: -3.25em 4% 0 0 !important; }
}
@media screen and (max-width: 400px) {
	label[for="show-menu"] { margin: -3.5em 4% 0 0 !important; }
}
@media screen and (max-width: 350px) {
	label[for="show-menu"] { margin: -3em 4% 0 0 !important; }
}


/* Logo
--------------------------------------------- */

#logo {
	text-align: left;
	width: 120px;
	margin: .5em 0 0;
	padding-bottom: .15em;
	float: left;
}

@media screen and (max-width: 1050px) { 
	#logo { width: 100px; margin: .5em auto 0; padding-left: 1.6em; }
}

@media screen and (max-width: 780px) { 
	#logo { width: 110px; margin: .75em auto 0; padding-left: 1.6em; }
}

@media screen and (max-width: 600px) { 
	#logo { width: 100px; margin: .5em auto 0; padding-left: 1.6em; }
}

@media screen and (max-width: 480px) { 
	#logo { width: 80px; margin: .5em auto 0; padding-left: 1em; }
}

@media screen and (max-width: 350px) {
	#logo { width: 70px; margin: .5em auto 0; padding-left: .65em; }
}

img {text-decoration: none; border: 0px}


/* Title
--------------------------------------------- */

#title-header {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}

a { text-decoration: none; color: white; }

#title {
	color: white;
	font-family: "Roboto", sans-serif;
	font-size: 1.1em;
	font-weight: 300;
	line-height: 26px;
	text-align: left;
	padding: 2.5% 0 0 0;
	float: left;
}

@media screen and (max-width: 1050px) {
	#title-header { width: 100%; }
	#title {
		font-size: 18px;
		line-height: 22px;
		width: 27%;
		padding-top: 2.25%; }
}
@media screen and (max-width: 780px) {
	#title {
		font-size: 18px;
		line-height: 22px;
		width: 27%;
		padding-top: 4%; }
}
@media screen and (max-width: 600px) {
	#title { font-size: 16px; padding-top: 3.75%; }
}
@media screen and (max-width: 480px) {
	#title { font-size: 14px; line-height: 20px; padding-top: 3.75%; }
}
@media screen and (max-width: 350px) {
	#title { font-size: 14px; line-height: 17px; padding-top: 5.25%; }
}
@media screen and (max-width: 300px) {
	#title { font-size: 12px; line-height: 17px; padding-top: 5.25%; }
}
@media screen and (max-width: 250px) {
	#title { font-size: 10px; line-height: 17px; padding-top: 5.25%; }
}

.text-nowrap { white-space: nowrap; }


/* Top Right Blurb
--------------------------------------------- */

#topright-blurb {
	width: 100%;
	max-width: 1000px;
	position: relative;
	margin: 0 auto;
}

#topright-blurb img {
	position: absolute;
	width: 15%; min-width: 130px;
	top: 2.5em; right: 0;
}
@media screen and (max-width: 1050px) { 
	#topright-blurb img { width: 8%; top: 2.25em; right: 2.5%; }
}
@media screen and (max-width: 780px) {
	#topright-blurb { display: none; }
}


/* Search
--------------------------------------------- */


/* Figure
--------------------------------------------- */

figure {
	width: 100%;
	display: block;
	margin: 0 auto;
	padding: 0; 
}


/* Home Page
--------------------------------------------- */

#section-main {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: table; 
}

#nhmha {
	font-family: 'Cinzel', serif;
	font-size: 2em;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: .25em 0 .15em;
	border-bottom: thin solid silver;
}

#column-left { margin: 1em 0; width: 65%; float: left; }

#homepic {
	line-height: 0;
	width: 100%;
	margin: 0;
	float: left;
}

#homepic img { width: 100%; border: thin solid gainsboro; }

#home-welcome {
	color: #36525e;
	width: 100%;
	margin: 0 auto;
	padding-top: 1%;
	float: left;
}

#home-title {
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.2em;
	width: 100%;
	margin: .5em 0 1em;
	padding-top: 1em;
	float: left;
}

#home-descr {
	font-size: .97em;
	line-height: 1.5;
	width: 100%;
	margin: 0 0 2.5em;
	float: left;
}

#home-video {
	color: #c49f46;
	font-size: 12pt;
	font-weight: bold;
	width: 100%;
	padding: 2.5em 0 1em;
	border-top: 1px solid silver;
	float: left;
}

#home-video-title {
	font-size: 1.3em;
	font-weight:bold;
	line-height: 1.2em;
	width: 100%;
	margin: 0 0 1.5em;
	float: left;
}

#ty-title {
	font-size: 1.1em;
	font-weight: bold;
	width: 100%;
	float: left;
}

#ty-nhmha {
	border: 1px solid #3e4562;
	line-height: 0;
	width: 100%;
	margin: 1em 0;
	float: left;	
}

#column-right {
	line-height: 1.3;
	width: 30%;
	margin-top: 1em;
	float: right;
}

#events-box {
	color: white;
	background-color: #444a5a;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	width: 100%;
	margin-bottom: 1em;
	padding: .25em 0;
}

#event-descr {
	font-size: .95em;
	line-height: 1.3;
	width: 100%;
	margin-bottom: 4em;
}

#event-descr p {
	color: #36525e;
	margin-top: 1.25em;
}

#event-descr p:nth-of-type(1) {
	margin-top: 2.25em;
}

#event-descr br {
	display: block;
	margin: 3px 0; }
	
	

video {
	top: 0; 
	left: 0;
	max-width: 800px;
	min-width: 200px;
	margin: 0 auto 4em;
}


.genmeeting {
	color: #0884bf;
	text-decoration: none;
	font-weight: bold; }

.genmeeting:hover { color: cornflowerblue; }

.burgundy-meeting {
	color: #420d15;
	font-weight: bold; }

.burgundy-meeting:hover { color: orange; }

.maroon-meeting {
	color: maroon;
	font-weight: bold; }

.maroon-meeting:hover { color: firebrick; }

.red-meeting { color: #ff0000; font-weight: bold; }

.red-meeting:hover { color: #0884bf; font-weight: bold; }

.bluemeeting { color: #023a8f; }

.bluemeeting:hover { color: #7d96bc; }

.super-bluemeeting { color: #009ee2; }

.super-bluemeeting:hover { color: #3a76bc; }

.pinkmeeting { color: #be3758; }

.pinkmeeting:hover { color: #55232f; }

.brownmeeting { color: #ba874e; }

.brownmeeting:hover { color: #745133; }

.darkyellowmeeting {color: #b98e2a; }

.darkyellowmeeting:hover {color: #e6ae2a; }

.darkgreenmeeting { color: #565926; font-weight: bold; }

.darkgreenmeeting:hover { color: #7f8338; font-weight: bold; }

.greenmeeting { color: green; font-weight: bold; }

.greenmeeting:hover { color: limegreen; font-weight: bold; }

.greybluemeeting { color: #6d9ea2; font-weight: bold; }

.greybluemeeting:hover { color: #5a8285; font-weight: bold; }

.neonbluemeeting { color: #17b4d0; font-weight: bold; }

.neonbluemeeting:hover { color: #1397af; font-weight: bold; }



/* Home Page Media Queries
--------------------------------------------- */

@media screen and (max-width: 1050px) {
	#section-main { width: 94%; }
}

@media screen and (max-width: 780px) {
	#section-main { width: 94%; margin-bottom: 2em; }
	#nhmha { font-family: 'Cinzel', serif; font-size: 2em; }
	#column-left { width: 100%; margin: 0; padding: 0; display: block; }
	#homepic { width: 100%; margin: 0; padding: 0; border: none; }
	#homepic img { width: 100%; border: none; }
	#home-welcome { width: 100%; margin: 0 auto 1em; padding-top: 0; }
	#home-title {
		font-size: 1.4em;
		width: 100%;
		margin: 1em auto 1em;
		padding-top: 1.5em;
		float: none; }
	#home-descr { margin: 1em auto 2.5em; float: none; }
	#home-video { margin: 0; }
	#home-video-title { font-size: 1.4em; line-height: 1.2em; }
	#ty-title { margin-top: 1em; }
	#ty-nhmha { width: 100%; margin: 0; padding: 0; border: none; }
	#column-right { width: 100%; display: block; }
	#event-descr p:nth-of-type(1) { padding-top: .25em; }
	#event-descr p:nth-of-type(3) img { width: 20%; }
	#events-box {
		color: #58595b;
		background-color: transparent;
		font-size: 1.4em;
		border-bottom: 1px solid #58595b;
		padding: 0;
	}
	#event-descr { font-size: .97em; margin: 1.5em auto 2.5em; }
	
	video {
		top: 0; 
		left: 0;
		max-width: 800px;
		min-width: 200px;
		margin: 0 auto 1em; }
}

@media screen and (max-width: 480px) {
	#nhmha { font-family: 'Cinzel', serif; font-size: 2em; }
	#home-title { margin: .25em auto 1em; padding-top: 1.5em; border-top: transparent; float: none; }
	#events-box { padding: 0; }
}	

@media screen and (max-width: 350px) {
	#section-main { width: 94%; margin-bottom: 1.5em; }
	#nhmha { font-family: 'Cinzel', serif; font-size: 1.5em; }	

	#home-descr { line-height: 1.4; }
	#home-video { font-size: 10pt; }
	#home-video-title { padding-top: 1.5em; }
	#thankyou-title { font-size: .95em; width: 94%; }
	#column-right { margin-top: 1em; }
	#event-descr { margin: 1em auto 2.5em; }
	#event-descr p:nth-of-type(4) img { width: 40%; }
}



/* About Page
--------------------------------------------- */

#main {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 1.5em;
	display: table;
}

#about-left { width: 65%; margin: .5em 0 2em; float: left; }

#slides-container {
	width: 100%;
	margin: .5em 0; 
	display: inline-block;
	position: relative;
	left: 0;
}
	
#slides-container:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

#slides {
	height: auto;
	position: relative;
}

#slides img {
	width: 100%;
	position: absolute; 
	transition: opacity 1s;
	opacity: 0;
	  -webkit-transition: opacity 1s linear;
	  transform: translate3d(0,0,0);
	  -webkit-transform: translate3d(0,0,0);
	border: thin solid silver;
}

#slides img:first-child {
	z-index: 2; /* frontmost */
	opacity: 1;
}

#slides img:last-child {
	z-index: 1; /* behind current slide */
	opacity: 1;
}

#about {
	font-size: .95em;
	line-height: 1.3;
	width: 100%;
	margin: .5em auto;
	padding-top: 1.5em;
	border-top: thin solid silver;
	float: left;
}

#aboutnhmha-title {
	font-size: 1.2em;
	font-weight: bold;
	width: 100%;
	margin:  1em 0 .5em;
	float: left;
	line-height: .75em;
}

#aboutnhmha {
	line-height: 1.2;
	width: 100%;
	margin: .5em auto 2em;
	padding-top: .25em;
	float: left;
}

#aboutnhmha p { color: red; }

#mandate-title {
	font-size: 1.2em;
	font-weight: bold;
	width: 100%;
	margin: 1em 0 .5em;
	float: left;
	line-height: .75em;
}

#mandate {
	line-height: 1.2;
	width: 100%;
	margin: .5em auto;
	padding-top: .25em;
	float: left;
}

#about-right {
	width: 33%;
	margin: 1em 0 0;
	padding-bottom: 9em;
	border-left: thin solid silver;
	border-top: thin solid silver;
	float: right;
}

#didyouknow {
	color: #36525e;
	font-size: .80em;
	line-height: 1.3;
	width: 92%;
	margin: 1em 0 0 1em;
	padding: 0;
}

#didyouknow-title { font-size: 1.5em; margin: 0 0 .5em; }

#randy {
	width: 45%;
	min-width: 125px;
	margin: .25em 1em 0 0;
	float: left;
}


/* About Page Media Queries
--------------------------------------------- */

@media screen and (max-width: 1050px) {
	#main { width: 94%; }
	#about { font-size: .95em; }
}

@media screen and (max-width: 780px) {
	#main { width: 94%; }
	#about-left { width: 100%; margin-bottom: .5em; }
	#slides-container { width: 100%; margin: 0; padding: 0; }
	#slides img { border: none; }
	#about { font-size: .95em; margin: 0 auto 1.5em; padding: 0; border: none; }
	#aboutnhmha-title { font-size: 1.2em; line-height: 1em; }
	#mandate-title { font-size: 1.2em; line-height: 1em; }
	#about-right { width: 100%; margin: 0 0 1em; padding: 0; border: none; float: left; }
	#didyouknow-title { width: 100%; margin: .0; padding: 1.5em 0 0; border-top: thin solid silver; }
	#didyouknow { width: 98%; font-size: .90em; margin: 1em 0; }
	#randy { width: 210px; margin: .5em 1em 0 0; padding: 0; float: left; }
}

@media screen and (max-width: 480px) {
	#about { font-size: .95em; }
	#aboutnhmha-title { font-size: 1.25em; }
	#mandate-title { font-size: 1.25em; margin-top: 1.5em; }
	#about-right { margin-bottom: 0; }
	#didyouknow-title { padding-top: 1.5em; border-top: thin solid silver; }
	#didyouknow { font-size: .90em; line-height: 1.4; margin: 1em 0 2.5em; }
	#randy { display: none; }
}



/* What's Up 
--------------------------------------------- */



/* Events Page 
--------------------------------------------- */

#section-events {
	width: 100%;
	margin: 0 auto 1em;
	display: table;
}

#article-eventsleft {
	font-size: .95em;
	text-align: left;
	line-height: 1.3;
	width: 45%;
	margin-top: 2em;
	float: left;
}

#events-title {
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	line-height : .75em;
	width: 100%;
	margin: 0 0 .5em 0;
	float: left;
}

#meetings-title {
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	line-height : .75em;
	width: 100%;
	margin: 1em 0 .5em 0;
	float: left;
}

.meetings-link {
	color: #3d4d6e;
	font-weight: bold;
	text-decoration: none;
}

a.meetings-link:hover { color: cornflowerblue; }

.year-in-review-link {
	color: blue;
	font-weight: bold;
	text-decoration: none;
}

.year-in-review-link:hover { color: #7791c8; font-weight: bold; }

.calendar-link {
	color: #000080;
	font-weight: bold;
	text-decoration: none;
}

.calendar-link:hover { color: #6666b3; font-weight: bold; }

.year-in-review {
	color: #663A82;
	font-weight: bold;
	text-decoration: none;
}

.year-in-review:hover { color: #B491C8; font-weight: bold; }

#article-eventsright {
	font-size: 1.1em;
	width: 50%;
	margin: 0; padding: 0;
	position: relative;
	float: right;
}

/* Calendar
--------------------------------------------- */

#calendars-container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 4% 0 6%;
	position: relative;
	text-align: center;
	display: table;
}

.calendars {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: block;
}

.calendars input { display: none; }

.calendar-container { display: block; }

.calendar {
	top: 0;
	opacity: 0;
	width: 100%;
	display: block;
	position: absolute;
	opacity: 0;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    transition: all 1s ease;
}

.calendar img { width: 100%; height: 100%; }

.moveit label {
	color: #a7b5b7;
	font-size: 6em;
	text-align: center;
	width: 25%;
	height: 90%;
	padding-top: 23%;
	position: absolute;
	top: 0;
	display: none;
	opacity: 0;
	z-index: 9;
	cursor: pointer;
	transition: opacity .3s;
}

.moveit label:hover { opacity: .8; }

.moveit .next { right: 0; }

input:checked + .calendar-container .calendar {
	opacity: 1;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
}

input:checked + .calendar-container .moveit label { display: block; }

.moveit-dots {
	text-align: center;
	width: 100%;
	height: 15px;
	margin: 0 auto;
	padding-top: 71%;
	display: inline-block;
}

.moveit-dot {
	width: 8px;
	height: 8px;
	margin: 0 8px 0 8px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: grey;
}

.moveit-dots .moveit-dot:hover {
	cursor: pointer;
	background-color: #075673;
}

input#img-a:checked ~ .moveit-dots label#img-dot-a,
input#img-b:checked ~ .moveit-dots label#img-dot-b,
input#img-c:checked ~ .moveit-dots label#img-dot-c {

	background-color: #075673;
}


/* Upcoming Events
-------------------------------------------- */

#upcomingevents {
	width: 100%;
	margin: 3em auto 0;
	display: block;
}

#upcoming-events-title {
	font-family: 'Cinzel', serif;
	font-size: 2em;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: .25em 0 .15em;
	position: relative;
	border-top: thin solid silver;
	border-bottom: thin solid silver;
}

#upcoming-events-title:after {
		content: "";
		position: absolute;
		z-index: 1;
		bottom: -8px;
		left: calc(50% - 8px);
		width: 14px;
		height: 14px;
		transform: rotate(45deg);
		background-color: white;
		border-bottom: thin solid silver;
		border-right: thin solid silver;
}

#upcomingevents-left {
	width: 45%;
	margin-top: 4em;
	float: left;
}

#upcomingevents-right {
	font-size: .95em;
	width: 50%;
	margin-top: 4em;
	float: right;
}

#coming-up {
	font-size: .95em;
	width: 100%;
	padding: 0;
}

#coming-up p { line-height: 1.4; margin-bottom: 1.5em; }

#coming-up p:nth-of-type(2) { margin-bottom: 1.5em; }

#coming-up img {
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
	display: block;		
}

#coming-up-box {
	color: white;
	background-color: #213556;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	width: 100%;
	margin-bottom: 2em;
	padding: .25em 0;
}


/* Recent Events
-------------------------------------------- */

#recentevents {
	width: 100%;
	max-width: 1000px;
	margin: 7em auto 0;
	display: block;
}

#recent-events-title {
	font-family: 'Cinzel', serif;
	font-size: 2em;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: .25em 0 .15em;
	position: relative;
	border-top: thin solid silver;
	border-bottom: thin solid silver;
}

#recent-events-title:after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: -8px;
	left: calc(50% - 8px);
	width: 14px;
	height: 14px;
	transform: rotate(45deg);
	background-color: white;
	border-bottom: thin solid silver;
	border-right: thin solid silver;
}

.event-title {
	color: #36525e;
	font-size: 1.7em;
	font-weight: bold;
	text-align: center;
	margin-top: 0;
	padding-top: 0;
}

.event-title-special {
	color: #36525e;
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	margin-top: 2em;
	padding-top: 0;
}

.event-title-special-2 {
	color: #36525e;
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	margin-top: 2em;
	padding-top: 0;
}

.event-date {
	color: #182248;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	padding-top: .5em;
}

.event-location {
	color: #182248;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	padding-top: .5em;
	padding-bottom: .5em;	
}

.event {
	color: black;
	font-size: 1.1em;
	font-weight: bold;
	/*border: thin solid silver;*/
	margin: 0;
	line-height: 0; }
	
.event:nth-of-type(2) {
	margin-top: 2em;
}

.date { font-size: 1.1em; font-weight: bold; margin: 5% 0 0 0; }
.event-descr { color: black; font-size: .90em; margin: 1% 0 0 0; }
.coming-up-link { color: black; font-weight: bold; }
.coming-up-link:hover { color: grey; }
.event-link {color: #a15f14;}
.event-link:hover {color: #d8811e;}

.bottom-arrow { border-bottom: 5px solid #6A0136; }

.bottom-arrow:after {
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

strong { font-weight: bold; }



/* Upcoming and Recent Events Media Queries
--------------------------------------------- */

@media screen and (max-width: 1050px) {

	#section-events { width: 96%; }
	#article-eventsleft { font-size: .95em; padding-bottom: 2em; }
	#article-eventsright { margin: .5em auto 1em; }
	.year-in-review-link { font-size: 100%; }
	.calendar-link { font-size: 100%; }
	.moveit label { padding-top: 20%; }


	#upcomingevents { width: 96%; margin: 1em auto 0; }
	#upcomingevents-left { margin: 3em auto 0; }
	#upcomingevents-right { margin: 3em auto 0; }
	#recentevents {  width: 96%; margin: 5em auto 0; }
}

@media screen and (max-width: 780px) {

	#section-events { width: 94%; }
	
	#article-eventsleft {
		width: 100%;
		margin: 3em auto 0;
		padding-top: 0;
		float: none; }

	#article-eventsright {
		width: 100%;
		margin: 1em auto 1em;
		float: none; }

	#calendars-container { width: 100%; margin: 0 auto; padding: 0 0 4%; }
	.moveit label { padding-top: 28%; }


	#upcomingevents { width: 94%; margin: 3em auto 0; }
	#upcomingevents-left { width: 100%; margin: 0 !important; }
	#upcomingevents-right { width: 100%; margin: 0; }

	#coming-up-box { display: none; }

	.event { display: none; }
	.event img { width: 100%; }

	.event-title { margin-top:2.25em; }
	.event-title-special { margin-top: 2em; }
	.event-title-special-2 { margin-top: 2.25em; }

	#recentevents { width: 94%; margin: 5em auto 0; }

	#merry-christmas img { margin-top: 2em !important; width: 60% !important; }
	.page5 #nhmha { border-bottom: transparent; }

	.date { margin-top: 0; }
}

@media screen and (max-width: 600px) {

	#section-events { margin: 0 auto 1em; padding: 0; }
	#article-eventsleft {
		font-size: .90em;
		margin: 0 auto;
		padding: 0 0 1em;
		float: none; }
	#events-title { font-size: 1.3em; margin-top: 1em; }
	#meetings-title { font-size: 1.3em; }
	#article-eventsright { margin: .5em auto 1em; float: none; }
	.moveit label { padding-top: 18%; }

	#upcomingevents { width: 94%; margin: 2em auto 0 !important; }

	#coming-up { width: 100%; padding: 0; border: none; }
	#coming-up p { font-size: 1em; }

	.event { display: none; }
	
	.event-title { font-size: 1.5em; }
	.event-title-special { font-size: 1.5em; margin-top: 2.25em; }
	.event-title-special-2 { font-size: 1.5em; margin-top: 2.25em; }
	
	#recentevents { width: 94%; margin: 4em auto 1em; }
}

@media screen and (max-width: 375px) {
	#upcomingevents-left {
		font-size: 1em;
		width: 100%;
		margin: 0 !important;
		padding-bottom: 2em;
		float: none; }
	#upcomingevents-right { font-size: 1em; width: 100%; margin: 0; }
	#coming-up-title { font-size: 1em; margin-bottom: 1em; }
	#coming-up { width: 100%; padding: 0 0 1em; border: none; }
	#coming-up p { line-height: 1.3; }
	.event { display: none; }
	/* .event:nth-of-type(2) { margin-top: 1em; }
	.event-title { font-size: 1.5em !important; margin-top: .5em !important; }
	.event-title-special { font-size: 1.5em; padding-top: 1em !important; }*/

	.event-title { font-size: 1.5em; margin-top: .75em; }
	.event-title-special { font-size: 1.5em; margin-top: .5em; }
	.event-title-special-2 { font-size: 1.5em; margin-top: 2.25em; }

	#upcoming-events-title { font-size: 1.5em; }

	#recentevents { width: 94%; margin: 2.5em auto 1em; }
	#recent-events-title { font-size: 1.5em; margin-top: 0 !important; }
}



/* Recent Events Page Slideshows
--------------------------------------------- */


/* Leave border on this container or inner div will cause it to move. */
#slideshows-container {
	/*background-color: #f6f6f6 !important; */
	width: 100%;
	margin: 0; padding: 0;
	float: left;
}

#inner-container {
	/*background-color: #f6f6f6; */
	width: 720px;
	margin: 1em auto 0;
	padding: 0;
}

.slides-title {
	color: #182248;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	width: 100%;
	max-width: 1000px;
	margin: 2em auto .25em;
}

.slides-date {
	color: 	#182248;
	text-align: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 1em;
}

.slides-date:nth-child(-n+1 of .slides-date) {
	margin: 0 auto 1.5em;
}

.slides-date:nth-child(-n+2 of .slides-date) {
	margin: 0 auto 1.5em;
}	

.slideshow {
	color: 	#182248;
	text-align: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 1em;
}


/* Events Page Slideshow 1
--------------------------------------------- */

#slider1-container {
	width: 100%;
	display: inline-block;
	position: relative;
	left: 0;
}

.slides1 {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: block;
}

.slides1 input { display: none; }

.slide1-container { display: block; }

.slide1{
	top: 0;
	opacity: 0;
	width: 100%;
	display: block;
	position: absolute;
	opacity: 0;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    transition: all 1s ease;
}

.slide1 img {
	width: 100%; height: 100%;
	border: 1px solid #3e4562;
}

.ctrl1 label {
	color: white;
	font-size: 10em;
	text-align: center;
	width: 25%;
	height: 90%;
	padding-top: 14%;

	position: absolute;
	top: 0;

	display: none;
	opacity: 0;
	z-index: 9;
	cursor: pointer;

	transition: opacity .3s;
}

.ctrl1 label:hover { opacity: .8; z-index: 1; }

.ctrl1 .next { right: 0; }

input:checked + .slide1-container .slide1 {
	opacity: 1;
	 -webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
	 -ms-transition: all 1s ease;
	 -o-transition: all 1s ease;
	 transition: all 1s ease;
}

input:checked + .slide1-container .ctrl1 label { display: block; }

.ctrl1-dots {
	text-align: center;
	width: 100%;
	height: 15px;
	margin: 0 auto;
	padding-top: 60%;
	display: inline-block;
}

.ctrl1-dot {
	width: 9px;
	height: 9px;
	margin: 0 9px 0 9px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: grey;
}

.ctrl1-dots .ctrl1-dot:hover {
	cursor: pointer;
	background-color: #d82817;
}

input#img-1:checked ~ .ctrl1-dots label#img-dot-1,
input#img-2:checked ~ .ctrl1-dots label#img-dot-2,
input#img-3:checked ~ .ctrl1-dots label#img-dot-3,
input#img-4:checked ~ .ctrl1-dots label#img-dot-4,
input#img-5:checked ~ .ctrl1-dots label#img-dot-5,
input#img-6:checked ~ .ctrl1-dots label#img-dot-6,
input#img-7:checked ~ .ctrl1-dots label#img-dot-7,
input#img-8:checked ~ .ctrl1-dots label#img-dot-8,
input#img-9:checked ~ .ctrl1-dots label#img-dot-9,
input#img-10:checked ~ .ctrl1-dots label#img-dot-10 {

	background: #d82817;
}


/* Events Page Slideshow 2
--------------------------------------------- */

#slider2-container {
	width: 100%;
	display: inline-block;
	position: relative;
	left: 0;
}

.slides2 {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: block;
}

.slides2 input { display: none; }

.slide2-container { display: block; }

.slide2 {
	top: 0;
	opacity: 0;
	width: 100%;
	display: block;
	position: absolute;
	opacity: 0;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    transition: all 1s ease;
}

.slide2 img {
	width: 100%; height: 100%;
	border: 1px solid #3e4562;
}

.ctrl2 label {
	color: white;
	font-size: 10em;
	text-align: center;
	width: 25%;
	height: 90%;
	padding-top: 14%;

	position: absolute;
	top: 0;

	display: none;
	opacity: 0;
	z-index: 9;
	cursor: pointer;

	transition: opacity .3s;
}

.ctrl2 label:hover { opacity: .8; z-index: 1; }

.ctrl2 .next { right: 0; }

input:checked + .slide2-container .slide2 {
	opacity: 1;
	 -webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
	 -ms-transition: all 1s ease;
	 -o-transition: all 1s ease;
	 transition: all 1s ease;
}

input:checked + .slide2-container .ctrl2 label { display: block; }

.ctrl2-dots {
	text-align: center;
	width: 100%;
	height: 15px;
	margin: 0 auto;
	padding-top: 60%;
	display: inline-block;
}

.ctrl2-dot {
	width: 9px;
	height: 9px;
	margin: 0 9px 0 9px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: grey;
}

.ctrl2-dots .ctrl2-dot:hover {
	cursor: pointer;
	background-color: #d82817;
}

input#img-11:checked ~ .ctrl2-dots label#img-dot-11,
input#img-12:checked ~ .ctrl2-dots label#img-dot-12,
input#img-13:checked ~ .ctrl2-dots label#img-dot-13,
input#img-14:checked ~ .ctrl2-dots label#img-dot-14,
input#img-15:checked ~ .ctrl2-dots label#img-dot-15,
input#img-16:checked ~ .ctrl2-dots label#img-dot-16,
input#img-17:checked ~ .ctrl2-dots label#img-dot-17,
input#img-18:checked ~ .ctrl2-dots label#img-dot-18,
input#img-19:checked ~ .ctrl2-dots label#img-dot-19,
input#img-20:checked ~ .ctrl2-dots label#img-dot-20 {
	
	background: #d82817;
}


Events Page Slideshow 3
--------------------------------------------- 

#slider3-container {
	width: 100%;
	display: inline-block;
	position: relative;
	left: 0;
}

.slides3 {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: block;
}

.slides3 input { display: none; }

.slide3-container { display: block; }

.slide3{
	top: 0;
	opacity: 0;
	width: 100%;
	display: block;
	position: absolute;
	opacity: 0;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    transition: all 1s ease;
}

.slide3 img {
	width: 100%; height: 100%;
	border: 1px solid #3e4562;
}

.ctrl3 label {
	color: white;
	font-size: 10em;
	text-align: center;
	width: 25%;
	height: 90%;
	padding-top: 14%;

	position: absolute;
	top: 0;

	display: none;
	opacity: 0;
	z-index: 9;
	cursor: pointer;

	transition: opacity .3s;
}

.ctrl3 label:hover { opacity: .8; z-index: 1; }

.ctrl3 .next { right: 0; }

input:checked + .slide3-container .slide3 {
	opacity: 1;
	 -webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
	 -ms-transition: all 1s ease;
	 -o-transition: all 1s ease;
	 transition: all 1s ease;
}

input:checked + .slide3-container .ctrl3 label { display: block; }

.ctrl3-dots {
	text-align: center;
	width: 100%;
	height: 15px;
	margin: 0 auto;
	padding-top: 60%;
	display: inline-block;
}

.ctrl3-dot {
	width: 9px;
	height: 9px;
	margin: 0 9px 0 9px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: grey;
}

.ctrl3-dots .ctrl3-dot:hover {
	cursor: pointer;
	background-color: #d82817;
}

input#img-21:checked ~ .ctrl3-dots label#img-dot-21,
input#img-22:checked ~ .ctrl3-dots label#img-dot-22,
input#img-23:checked ~ .ctrl3-dots label#img-dot-23,
input#img-24:checked ~ .ctrl3-dots label#img-dot-24,
input#img-25:checked ~ .ctrl3-dots label#img-dot-25,
input#img-26:checked ~ .ctrl3-dots label#img-dot-26,
input#img-27:checked ~ .ctrl3-dots label#img-dot-27,
input#img-28:checked ~ .ctrl3-dots label#img-dot-28,
input#img-29:checked ~ .ctrl3-dots label#img-dot-29,
input#img-30:checked ~ .ctrl3-dots label#img-dot-30 {

	background: #d82817;
}


/* Events Page Slideshow 4
--------------------------------------------- */

#slider4-container {
	width: 100%;
	display: inline-block;
	position: relative;
	left: 0;
}

.slides4 {
	width: 100%;
	margin: 0 auto 5em;
	padding: 0;
	position: relative;
	display: block;
}

.slides4 input { display: none; }

.slide4-container { display: block; }

.slide4 {
	top: 0;
	opacity: 0;
	width: 100%;
	display: block;
	position: absolute;
	opacity: 0;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    transition: all 1s ease;
}

.slide4 img {
	width: 100%; height: 100%;
	border: 1px solid #3e4562;
}

.ctrl4 label {
	color: white;
	font-size: 10em;
	text-align: center;
	width: 25%;
	height: 90%;
	padding-top: 14%;

	position: absolute;
	top: 0;

	display: none;
	opacity: 0;
	z-index: 9;
	cursor: pointer;

	transition: opacity .3s;
}

.ctrl4 label:hover { opacity: .8; z-index: 1; }

.ctrl4 .next { right: 0; }

input:checked + .slide4-container .slide4 {
	opacity: 1;
	 -webkit-transition: all 1s ease;
	 -moz-transition: all 1s ease;
	 -ms-transition: all 1s ease;
	 -o-transition: all 1s ease;
	 transition: all 1s ease;
}

input:checked + .slide4-container .ctrl4 label { display: block; }

.ctrl4-dots {
	text-align: center;
	width: 100%;
	height: 15px;
	margin: 0 auto;
	padding-top: 60%;
	display: inline-block;
}

.ctrl4-dot {
	width: 9px;
	height: 9px;
	margin: 0 9px 0 9px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: grey;
}

.ctrl4-dots .ctrl4-dot:hover {
	cursor: pointer;
	background-color: #d82817;
}

input#img-31:checked ~ .ctrl4-dots label#img-dot-31,
input#img-32:checked ~ .ctrl4-dots label#img-dot-32,
input#img-33:checked ~ .ctrl4-dots label#img-dot-33,
input#img-34:checked ~ .ctrl4-dots label#img-dot-34,
input#img-35:checked ~ .ctrl4-dots label#img-dot-35,
input#img-36:checked ~ .ctrl4-dots label#img-dot-36,
input#img-37:checked ~ .ctrl4-dots label#img-dot-37,
input#img-38:checked ~ .ctrl4-dots label#img-dot-38,
input#img-39:checked ~ .ctrl4-dots label#img-dot-39,
input#img-40:checked ~ .ctrl4-dots label#img-dot-40 {

	background: #d82817;
}


/* Events Slideshow Media Queries
--------------------------------------------- */

@media all and (max-width: 780px) {

	#inner-container { width: 94%; background: none; }

	#slides-title { font-size: 1.1em;  }
	#slides-date { font-size: .1em; }

	.ctrl1 label, .ctrl2 label, .ctrl3 label, .ctrl4 label, .ctrl5 label {
		font-size: 7em; padding-top: 16%; }	
}

@media all and (max-width: 650px) {
	#calendars-container { width: 100%; margin: 0 auto; padding-top: 0; }
	.moveit label { padding-top: 23%; }
}

@media all and (max-width: 480px) {

	#slideshows-container { margin: 0; }

	.slides-title { font-size: 1.25em; margin-top: 1.5em; }
	.slides-date { font-size: .95em; }
	.slides-date:nth-child(-n+1 of .slides-date) { margin: 0 auto 1em; }
	.slides-date:nth-child(-n+2 of .slides-date) { margin: 0 auto 1em; }

	#slider1-container { width: 100%; }	
	#slider2-container { width: 100%; }	
	#slider3-container { width: 100%; }
	#slider4-container { width: 100%; }
	#slider5-container { width: 100%; }

	.slides1 { width: 100%; height: 100%; margin: 0 auto 3em; }
	.slides2 { width: 100%; height: 100%; margin: 0 auto 3em; }	
	.slides3 { width: 100%; height: 100%; margin: 0 auto 4.5em; }
	.slides4 { width: 100%; height: 100%; margin: 0 auto 4em; }
	.slides5 { width: 100%; height: 100%; }

	.moveit-dot { width: 8px !important; height: 8px !important; margin: 0 8px 0 8px !important; }
	.ctrl1-dots { padding-top: 62%; }
	.ctrl2-dots { padding-top: 62%; }
	.ctrl3-dots { padding-top: 62%; }
	.ctrl4-dots { padding-top: 62%; }
	.ctrl5-dots { padding-top: 62%; }

	li.moveit-dots { text-align: center !important; }

	label.prev, label.next { font-size: 100px; }
	.ctrl1 label { height: 80%; padding-top: 15%; }
	li.ctrl1-dots { text-align: center !important; }

	label.prev, label.next { font-size: 100px; }
	.ctrl2 label { height: 80%; padding-top: 15%; }
	li.ctrl2-dots { text-align: center !important; }
	
	label.prev, label.next { font-size: 100px; }
	.ctrl3 label { height: 80%; padding-top: 15%; }
	li.ctrl3-dots { text-align: center !important; }	
	
	label.prev, label.next { font-size: 100px; }
	.ctrl4 label { height: 80%; padding-top: 15%; }
	li.ctrl4-dots { text-align: center !important; }

	label.prev, label.next { font-size: 100px; }
	.ctrl5 label { height: 80%; padding-top: 15%; }
	li.ctrl5-dots { text-align: center !important; }	
}

@media all and (max-width: 350px) {

	.moveit label { padding-top: 12%; }

	#inner-container { margin: 1em auto 0; }
	#slider1-container { padding-bottom: 0; }

	.slides1 { width: 100%; height: 100%; margin: 0 auto 3em; }
	.slides2 { width: 100%; height: 100%; margin: 0 auto 3em; }	
	.slides3 { width: 100%; height: 100%; margin: 0 auto 4.5em; }
	.slides4 { width: 100%; height: 100%; margin: 0 auto 4em; }
	.slides5 { width: 100%; height: 100%; }
	
	.moveit-dot { width: 8px !important; height: 8px !important; margin: 0 8px 0 8px !important; }
	.ctrl1-dots { padding-top: 65%; }
	.ctrl2-dots { padding-top: 65%; }
	.ctrl3-dots { padding-top: 65%; }
	.ctrl4-dots { padding-top: 65%; }
	.ctrl5-dots { padding-top: 65%; }

	.ctrl1 label { height: 80%; padding-top: 15%; }
	.ctrl2 label { height: 80%; padding-top: 15%; }
	.ctrl3 label { height: 80%; padding-top: 15%; }
	.ctrl4 label { height: 80%; padding-top: 15%; }
	.ctrl5 label { height: 80%; padding-top: 15%; }

	.slides-title { font-size: 1em; margin-top: 1.5em; }
	.slides-date { font-size: .95em; }
	
	.slide1 img { width: 100%; height: 100%; }	
	.slide2 img { width: 100%; height: 100%; }	
	.slide3 img { width: 100%; height: 100%; }
	.slide4 img { width: 100%; height: 100%; }
	.slide5 img { width: 100%; height: 100%; }

	.ctrl1-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	.ctrl2-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	.ctrl3-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	.ctrl4-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	.ctrl5-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	
	.ctrl1 label { height: 60%; padding-top: 7%; }
	.ctrl2 label { height: 60%; padding-top: 7%; }
	.ctrl3 label { height: 60%; padding-top: 7%; }
	.ctrl4 label { height: 60%; padding-top: 7%; }
	.ctrl5 label { height: 60%; padding-top: 7%; }
}

@media screen and (max-width: 300px) {
	.moveit-dot { width: 8px !important; height: 8px !important; margin: 0 8px 0 8px !important; }
	.ctrl1-dots { padding-top: 65%; }
	.ctrl2-dots { padding-top: 65%; }
	.ctrl3-dots { padding-top: 65%; }
	.ctrl4-dots { padding-top: 65%; }
	.ctrl5-dots { padding-top: 65%; }

	.ctrl1 label { height: 80%; padding-top: 15%; }
	.ctrl2 label { height: 80%; padding-top: 15%; }
	.ctrl3 label { height: 80%; padding-top: 15%; }
	.ctrl4 label { height: 80%; padding-top: 15%; }
	.ctrl5 label { height: 80%; padding-top: 15%; }
	
	.slide1 img { width: 100%; height: 100%; }	
	.slide2 img { width: 100%; height: 100%; }	
	.slide3 img { width: 100%; height: 100%; }
	.slide4 img { width: 100%; height: 100%; }
	.slide5 img { width: 100%; height: 100%; }

	.ctrl1-dot { width: 5px; height: 5px; margin: 0 7px 0 7x; }
	.ctrl2-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	.ctrl3-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	.ctrl4-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	.ctrl5-dot { width: 5px; height: 5px; margin: 0 7px 0 7px; }
	
	.ctrl1 label { height: 60%; padding-top: 5%; }
	.ctrl2 label { height: 60%; padding-top: 5%; }
	.ctrl3 label { height: 60%; padding-top: 5%; }
	.ctrl4 label { height: 60%; padding-top: 5%; }
	.ctrl5 label { height: 60%; padding-top: 5%; }
}

@media screen and (max-width: 250px) {

	.slides-title { font-size: .95em; margin-top: 1.5em; }
	.slides-date { font-size: .90em; }

	.slide1 img { width: 100%; height: 100%; }	
	.slide2 img { width: 100%; height: 100%; }	
	.slide3 img { width: 100%; height: 100%; }
	.slide4 img { width: 100%; height: 100%; }
	.slide5 img { width: 100%; height: 100%; }
	
	.ctrl1-dot { width: 4px; height: 4px; margin: 0 6px 0 6px; }
	.ctrl2-dot { width: 4px; height: 4px; margin: 0 6px 0 6px; }
	.ctrl3-dot { width: 4px; height: 4px; margin: 0 6px 0 6px; }
	.ctrl4-dot { width: 4px; height: 4px; margin: 0 6px 0 6px; }
	.ctrl5-dot { width: 4px; height: 4px; margin: 0 6px 0 6px; }

	.ctrl1 label { height: 60%; padding-top: 5%; }
	.ctrl2 label { height: 60%; padding-top: 5%; }
	.ctrl3 label { height: 60%; padding-top: 5%; }
	.ctrl4 label { height: 60%; padding-top: 5%; }
	.ctrl5 label { height: 60%; padding-top: 5%; }

	.ctrl1 label, .ctrl2 label, .ctrl3 label, .ctrl4 label, .ctrl5 label {
		font-size: 5em; padding-top: 8%; }	
}



/* Meetings Page
--------------------------------------------- */

#section-meetings {
	width: 100%;
	margin: 0 auto;
	display: table;
}

#meetings-about {
	font-size: .95em;
	text-align: left;
	line-height: 1.3;
	width: 48%;
	margin: 2em 0 2em;
	float: left;
}

#meetings-heading {
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	line-height : .75em;
	width: 100%;
	margin: 0 0 1em 0;
	float: left;
}

#image-box {
	width: 42%;
	margin: 2em 0 4em;
	padding: 0;
	line-height: 0;
	border: thin solid silver;
	float: right;
}

#image-box img { width: 100%; }

#northernlights {
	font-weight: bold;
	margin-left: 5%;
}


/* Meetings Drop Down Menu
--------------------------------------------- */

.menu-wrap { width: 100%; }

.minutes-menu ul { padding-left: 0; }

.minutes-menu li {
	font-size: 18px;
	width: 100%;
	margin: 0; padding: 0;
	list-style: none;
	display: block;
	position: relative;
}

.minutes-menu a {
	transition: all linear 0.15s;
	color: blue;
}

.minutes-menu li:hover .sub-menu {
	z-index: 1;
	opacity: 1;
}

.sub-menu {
	background: white;
	width: 100%;
	margin: 0; padding: 0;
	position: relative;
	top: 10px;
	left: 0px;
	z-index: -1;
	opacity: 0;
	transition: opacity linear 0.15s;

	height: 138px;
	max-height: 138px;
	overflow: hidden;
	overflow-y: auto;

	-webkit-box-shadow: 7px 7px 20px -3px rgba(0,0,0,0.75);
	-moz-box-shadow: 7px 7px 20px -3px rgba(0,0,0,0.75);
	box-shadow: 7px 7px 20px -3px rgba(0,0,0,0.75);
}

.sub-menu li {
	font-size: 16px;
	display: block;
}

.sub-menu li:hover { background: lightgrey; width: 100%; }

.sub-menu li a { margin-left: 5%; padding: 2px 0; display: block; }



/* Meetings Page Media Queries
--------------------------------------------- */

@media all and (min-width: 781px) and (max-width: 1050px) {
	#section-meetings { width: 94%; }
	#meetings-about { width: 52%; padding: 0; }
	.minutes-menu li { font-size: 16px; }
	.sub-menu li a { font-size: 16px;  }
	#image-box { margin-right: 0; }
}

@media screen and (max-width: 780px) {
	#section-meetings { width: 94%; }
	#section-meetings ul > * { text-align: left !important; }
	#section-meetings li > * { text-align: left !important; }
	#meetings-about { width: 100%; display: block; }
	#image-box { display: none; }
	.minutes-menu li { font-size: 16px; }
	.sub-menu li { font-size: 16px; }
}

@media screen and (max-width: 480px) {
	#section-meetings ul > * { text-align: left !important; }
	#section-meetings li > * { text-align: left !important; }
	.minutes-menu li { font-size: 16px; }
	.sub-menu li { font-size: 16px; }
	#image-box { display: none; }
}

@media screen and (max-width: 350px) {
	#meetings-heading { font-size: 1.2em; }
	#meetings-about { font-size: .90em; }
	#meetings-about ul { width: 100%; }
	.minutes-menu li { font-size: 15px; }
	.sub-menu li { font-size: 14px; }
	#image-box { display: none; }
}



/* Membership Page
--------------------------------------------- */

#section-membership {
	color: #323232;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: block;
}

#section-membership img { line-height: 0; width: 100%; max-width: 1900px; }

#member-title-and-img {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

#member-title-and-img-heading {
	font-family: "Times New Roman", serif;
	font-size: 1.8em;
	text-align: left;
	line-height : .75em;
	margin-top: 1.25em;
	float: left;
}

#member-title-and-img img {
	opacity: .1;
	max-width: 150px !important;
	margin-left: -3em;
	padding-top: 1em;
	border-bottom: none;
	float: left;
}

#column-container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: table;
}

#member-benefits {
	width: 46%;
	margin: 0 0 4%;
	padding: 0;
	line-height: 1.3;
	float: left;
}

#member-benefits ul { margin-left: 1em; padding: 0; }

#member-steps {
	width: 46%;
	margin: 0;
	line-height: 1.3;
	float: right;
}

.step	{
	font-weight: normal;
	font-size: 1em;
	margin: 0; padding: 0;
	text-align: left;	
}

.club-benefits li {
	margin-right: 2%;
	padding-bottom: 2%;
}

.club-benefits li:nth-child(5) { padding-bottom: 0; }

#cheques { text-align: center; margin-bottom: 1em; }

.hcbclink {
	color: #2b4f7b;
	font-weight: bold;
	text-decoration: none;
}

.hcbclink:hover { color: #356eb3; }

.individual-family {
	color: #2b4f7b;
	font-weight: bold;
	text-decoration: none;
}	

.individual-family:hover { color: #356eb3; }

.membershiplink {
	color: #2b4f7b;
	font-weight: bold;
	text-decoration: none;
}	

.membershiplink:hover { color: #356eb3; }


/* Membership Page Media Queries
--------------------------------------------- */

@media all and (min-width: 781px) and (max-width: 1050px) {
	#wrapper-membership { width: 92%; padding: 0; display: block; }
	#member-title-and-img { padding: 0 2em; width: 92%; }
	#member-title-and-img-heading { font-size: 1.75em; }
	#member-title-and-img img { max-width: 100px !important; margin-left: -2em; }
	#column-container { font-size: .95em; padding: 0 2em; width: 92%; }
	#member-benefits { width: 47%; }	
	#member-steps { width: 47%; }	
}

@media screen and (max-width: 780px) {
	#wrapper-membership { width: 90%; padding: 0; display: block; }
	#member-title-and-img { padding: 0 2em; width: 90%; }
	#member-title-and-img-heading { font-size: 1.5em; }
	#member-title-and-img img { max-width: 100px !important; }
	#column-container { font-size: .95em; padding: 0 2em; width: 90%; }
	#member-benefits { width: 100%; margin: 0; }
	.club-benefits li { margin: 0; text-align: left !important; }
	#member-steps { width: 100%; margin: 0; }
}

@media screen and (max-width: 480px) {
	#wrapper-membership { width: 90%; padding-top: 20%: 0; position: relative; display: block; }
	#member-title-and-img-heading { font-size: 1.3em; }
	#member-title-and-img { padding: 0 2em 0 1em; width: 88%; }
	#column-container { font-size: .95em; width: 88%; padding: 0 2em 0 1em; }	
}

@media screen and (max-width: 350px) {	
	#wrapper-membership { width: 90%; padding-top: 20%; position: relative; display: block; }
}


/* Contact Page
--------------------------------------------- */

#section-contact {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: block;
}

#contact-left {
	font-size: .95em;
	text-align: left;
	line-height: 1.4;
	width: 60%;
	margin: 1em 0 3em;
	float: left;
}

#contact-title {
font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	width: 100%;
	margin: 0 0 .5em 0;
	float: left;
}

#contact-left img { margin-top: .5em }

#contact-right {
	width: 33%;
	padding-top: 0;
	margin: 3.2em 0 7em 0;
	float: right;
}

#contactinfo {
	font-size: .90em;
	font-family: "Roboto", sans-serif;
	text-align: left;
	line-height: 1.6;
	margin: 0 auto;
	padding: .25em 0 1.5em;
}

#contactinfo::first-line {
     letter-spacing: -.02em;
}

#captcha { width: 130px; }



/* Contact Page - Contact Form
--------------------------------------------- */

#contactform {
	width: 100%;
	font-size: .90em;
	text-align: left;
}

#fieldset {
	background-color: white;
	border: thin solid silver;
}

#fieldset legend {
	color: #5d7da4;
	background: white;
 	font-size: 1.5em;
}

#fieldset label { line-height: 1em; padding-left: .5em; display: block; }

#fieldset input {
	background-color: white;
	border: thin solid lightgray;
	line-height: 1.5em;
	width: 96.5%;
	margin: .75em 0;
	padding: .5em;
	display: block;
	float: left;
}

#fieldset textarea {
	font-family: "Arial", sans-serif;
	font-size: .90em;
	background-color: white;
	border: thin solid lightgray;
	width: 96%;
	margin-top: .75em;
	padding: .5em;
}

#fieldset input[type=submit] {
	background-color: #e2ecf7;
	border: none;
	width: 100%;
	margin: 1.25em 0 1em 0;
	padding: .5em 0;
	float: none;
}

#fieldset input[type=submit]:hover { background-color: #182248; border: none; }

.ghost {
	background-color: transparent;
	border: none;
	position: absolute;
	left: 0;
	top: 0;
	cursor: default;
	color: transparent;
}
.ghost:hover{
	height: 0px;
	cursor: default;
}
.ghost:blur{
	height: 22px;
	cursor: default;
}
.ghost:focus{
	height: 0px;
	outline: none;
	cursor: default;
}

.send	{
	width: 10%;
	color: #58595b;
	font-weight: bold;
	cursor: pointer;
	float: right;
}

.send:hover {
	color: white;
	border: thin solid gray;
	font-weight: bold;
	width: 11%;
	cursor: pointer;    
}

/* Contact Page Media Queries
--------------------------------------------- */

@media all and (min-width: 941px) and (max-width: 1050px) {
	#section-contact { width: 94%; margin: 0 auto; }
	#contact-left { width: 57%; }
	#contact-right { width: 37%; }
	#contactinfo { font-size: .90em; }
}

@media screen and (max-width: 940px) {
	#section-contact { width: 94%; margin: 0 auto; }
	#contact-left { width: 57%; }
	#contact-right { width: 37%; }
	#contactinfo { font-size: .80em; }
}

@media screen and (max-width: 780px) {
	#section-contact { width: 94%; margin: 0 auto; }
	#contact-left { font-size: .95em; width: 100%; 	margin: 1em 0 1.5em; }
	#contact-right { width: 100%; margin: 0 0 5em 0; padding: 0; }
	#contactform { margin-top: 1em; }
	#fieldset input[type=submit] { width: 97.75%; }
	#contactinfo { font-size: .90em; text-align: left; padding: 1em 0 1em 0; }
}

@media screen and (max-width: 660px) {
	#fieldset input[type=submit] { width: 98.5%; }
}	

@media screen and (max-width: 480px) {
	#section-contact { margin: 0 auto; }
	#contact-left { font-size: .90em; line-height: 1.3; margin: 1.5em 0 1em 0; }
	#contact-title { font-size: 1.25em; }
	#contact-right {margin-bottom: 3em; }
	#contactinfo { font-size: .90em; text-align: left; }
	#fieldset input[type=submit] { width: 98.75%; }
}

@media screen and (max-width: 350px) {
	#section-contact { width: 92%; margin: 0 auto; }
	#contact-title { font-size: 1.1em; }
	#contact-left { font-size: .90em; margin: 1.5em 0; }
	#contact-left img { padding-top: 0; }
	#contactinfo { font-size: .78em; text-align: left; padding-left: 0; }
	#fieldset legend { font-size: 1.2em; }
}

@media screen and (max-width: 300px) {
	#section-contact { width: 92%; margin: 0 auto; }
	#contact-title { font-size: 1.1em; }
	#contact-left { font-size: .90em; margin: 1.5em 0; }
	#contact-left img { padding-top: 0; }
	#contactinfo { font-size: .70em; text-align: left; padding-left: 0; }
	#fieldset legend { font-size: 1.2em; }
}

@media screen and (max-width: 250px) {
	#section-contact { width: 92%; margin: 0 auto; }
	#contact-title { font-size: 1.1em; }
	#contact-left { font-size: .90em; margin: 1.5em 0; }
	#contact-left img { padding-top: 0; }
	#contactinfo { font-size: .68em; text-align: left; padding-left: 0; }
	#fieldset legend { font-size: 1.2em; }
}



/* Footer
------------------------------------------------------- */

#footer {
	background: #182248;
	width: 100%;
	float: left;
	display: table;
}

#tagline {
	color: white;
	background-color: #182248;
	font-family: "Roboto", sans-serif;
	font-size: 1.25em;
	font-weight: 300;
	text-align: center;
	margin: 0;
	padding: .5em 0;
	border-top: 4px solid #3b3d5b;
}

#footer-content {
	font-size: .90em;
	line-height: 1.3em;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	display: table;
}

#bottomimage {
	text-align: center;
	width: 8%;
	min-width: 80px;
	margin: .5em auto 0;
	padding: 0;
}

#footercontact {
	color: white;
	font-size: .90em;
	text-decoration: none;
	margin: -4em 0 1em;
	padding: 0 !important;
	float: left;
}

#footercontact a { color: white; }

#back-to-top {
	text-align: right;
	width: 100%;
	position: absolute;
	bottom: 1em; right: 0;
	float: right;
}

#copyright {
	color: silver;
	background-color: #121F3A;
	width: 100%;
	height: 100%;
	padding: .5em 0;
}

#copyright p {
	font-size: .70em;
	line-height: 1.3em;
	text-align: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}


/* Footer Media Queries
------------------------------------------------------- */

@media all and (min-width: 901px) and (max-width: 1100px) {
	#footer-content { width: 92%; margin: 0 auto; }
	#footercontact { margin-top: -4em; }
	#copyright p { width: 92%; margin: 0 auto; }
}

@media screen and (max-width: 900px) {
	#footer-content {
		font-size: .82em;
		width: 92%;
		margin: 0 auto; }
	#copyright p { width: 92%; margin: 0 auto; }
}

@media screen and (max-width: 780px) {
	#footer, #footercontact, #copyright { border: none; }
	
	#tagline { font-size: 1em !important; }
	
	#footer-content {
		font-size: .90em;
		width: 92%;
		margin: 0 auto; }
		
	#footercontact { margin: -1em 0 1em; }

	#copyright { border-top: thin solid #3b3d5b; }	
	#copyright p { width: 92%; margin: 0 auto; }	

	#tagline { font-size: 1.25em; }
	#bottomimage { width: 75px; }
}

@media screen and (max-width: 480px) {
	#tagline { font-size: 1em !important; }
	#footercontact { font-size: .85em; }
	#copyright p { font-size: .60em; }
}

@media screen and (max-width: 400px) {
	#footercontact { font-size: .75em !important; margin: -2em 0 1em; }
}

@media screen and (max-width: 300px) {
	#footercontact { font-size: .75em !important; margin: 1.5em 0 1em; }
	#back-to-top { bottom: 6em; }
	#copyright p { font-size: .58em; }
}

.clear { clear: both; }

/* For modern browsers */
.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}

.clearfix:after { clear: both; }