/* --------------------------------- SITE-WIDE CSS2 */

* {
	font-family: "Open Sans", sans-serif;
}

body {
	background-color: #0c1318;
}
/* These are standard margins and padding that may be applied as needed throughout at the website. */

.md-container-margin {
	margin-top: 25px;
	margin-bottom: 25px;
}

.lg-container-margin {
	margin-top: 50px;
	margin-bottom: 50px;
}

.md-container-padding {
	padding-top: 25px;
	padding-bottom: 25px;
}

.lg-container-padding {
	padding-top: 100px;
	padding-bottom: 100px;
}

/* --------------------------------- HEADER */

/* The header is defined by .header-container */

	.header-container {
		border-bottom: 1px solid #09506d;
		padding-bottom: 10px;
	}

/* --------------------------------- SIDEBAR */

/* The sidebar is defined by .sidebar-container */

.sidebar-container {
	padding: 20px 20px 0px 20px !important;	
	background-color: #0c1318;
	height: 100%;
}

.sidebar-container .phone-number a,
.sidebar-container .social-media-buttons a {
	font-weight: bold;
	color: #ffffff;
	font-size: 1.2rem;
}

.sidebar-container .phone-number a:hover, 
.sidebar-container .phone-number a:active,
.sidebar-container .phone-number a:focus,
.sidebar-container .social-media-buttons a:hover, 
.sidebar-container .social-media-buttons a:active,
.sidebar-container .social-media-buttons a:focus {
	text-decoration: none;
	color: #18b9ed;
}

.sidebar-container .phone-number {
	padding-top: 15px;
}

@media (max-width: 767.99px) {
	.sidebar-container .phone-number {
	padding-top: 5px;
	}

}


.sidebar-container .social-media-buttons {
	padding-top: 5px;
	padding-bottom: 15px;
}

@media (max-width: 767.99px) {
	
	.sidebar-container {
		border-bottom:  1px solid #adadad;
	}
	
	.sidebar-container .social-media-buttons {
		display: none;
	}
	
}
/* --------------------------------- LOGO */

/* The logo area is defined by .logo-container */

.logo-container {

}

/* --------------------------------- MAIN NAVIGATION */

.nav-container {
	padding-top: 10px;
	padding-bottom: 10px;
}


/* Top-level Nav Bar */
/* Set background color and border radius */
/* Extra Small and Small screens */
/* Must be a <nav> tag with the .navbar class */
nav.navbar {
  background-color: #0c1318;
  font-weight: bold;
  text-transform: uppercase; 
  color: #ffffff;
  letter-spacing: 1px;
  font-size: 1.2rem;
}

/* Top-level Nav Bar */
/* Tablet size and larger */
/* Must be a <nav> tag with the .navbar class */
@media (min-width: 768px) {
  nav.navbar {
    border-radius: 0px;
  }
}

/* Styles non-active nodes at all depths */
/* This styles all nodes that are not the current page's node, or an ancestor of current page */
.navbar-light .navbar-nav .nav-link {
  color: #ffffff;
  background-color: transparent;
  text-align: left;
}



/* Styles active node, at all depths */
/* This styles the current page's node, and its ancestor's nodes. */
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
  color: #09506d;
  background-color: transparent;
}

@media (max-width: 767.99px) {
	.navbar-light .navbar-nav .nav-link,
	.navbar-light .navbar-nav .active>.nav-link,
	.navbar-light .navbar-nav .nav-link.active,
	.navbar-light .navbar-nav .nav-link.show,
	.navbar-light .navbar-nav .show>.nav-link {
		text-align: left;
	}
}

nav.navbar li.nav-item>a.nav-link {
}

/* Styles node text on hover at all depths unless additional styling is in place for 2nd level and below.*/
nav.navbar li.nav-item>a.nav-link:hover {
	background-color: transparent;
   color: #18b9ed;
}


nav.navbar li.nav-item>a.nav-link:active,
nav.navbar li.nav-item>a.nav-link:focus {
  background-color: transparent;
  color: #09506d;
}

/* Styles background of the drop-down menus - all depths below the top level unless additional styling is in place for 2nd level and below. */
nav.navbar ul.dropdown-menu {
  background-color: #071b26;
}

@media (max-width: 767.99px) {
	nav.navbar ul.dropdown-menu {
  		border: 0px; 
	}	
}


/* Styles nodes at 2nd level and below */
nav.navbar ul.dropdown-menu li.nav-item .nav-link:link {

}


@media (max-width: 767.99px) {
	nav.navbar ul.dropdown-menu li.nav-item .nav-link:link {
		margin-left: 20px; 
	}
}

/* Styles nodes on hover at 2nd-level and below.*/
nav.navbar ul.dropdown-menu li.nav-item .nav-link:hover,
nav.navbar ul.dropdown-menu li.nav-item .nav-link:active {
  background-color: transparent;
}


/* Styles nodes at 3nd level and below */
nav.navbar .dropdown-menu .dropdown-menu li.nav-item .nav-link:link {
	font-size: .9rem;
	letter-spacing: 1px;
}


@media (max-width: 767.99px) {
	nav.navbar .dropdown-menu .dropdown-menu li.nav-item .nav-link:link{
	margin-left: 40px;
	}

}


/* Overwrite default Bootstrap 4 classes on 2nd level links that lead to 3rd level navigation (i.e. from first dropdown to second dropdown) */ 

.text-dark {
    color: #ffffff !important;	
}

.bg-light {
    background-color: transparent !important;
}

a.text-dark:hover {
    color: #18b9ed !important;
}

a.text-dark:focus,
a.text-dark:active {
	color: #09506d !important;
}

a.bg-light:hover,
a.bg-light:active {
    background-color: transparent !important;
}


a.bg-light:focus {
	background-color: transparent !important;
}


/* Styles the caret or sub-arrow for links with dropdowns */
.navbar-nav.sm-collapsible .sub-arrow {
	
}


/* Styles the Toggler text (if present)*/
nav.navbar span.mcn-navbar-toggle-text {
}


/* Styles the Toggler icon (assuming Font Awesome icon, not default Bootstrap 4 monstrosity)*/
nav.navbar button.navbar-toggler i {
	
}

/* Styles the Toggler border*/
nav.navbar button.navbar-toggler {
  border-radius: 2px;
  border: solid 1px #ffffff;
  cursor: pointer;
  padding: 10px;
  color:#ffffff;
  letter-spacing: normal;
}


nav.navbar button.navbar-toggler:hover {
	color: #18b9ed;
    border: solid 1px #18b9ed;	
}

nav.navbar button.navbar-toggler:active,
nav.navbar button.navbar-toggler:focus {
	color: #09506d;
    border: solid 1px #09506d;	
}

/* Sticky Menu */ 

.notStuck {
	
}

.stuck {
  position: fixed;
  top:0;
  z-index: 9998;
  background-color: #0c1318;
}

@media (max-width: 767.99px) { 
	.stuck {
		width: 100%;
		height: auto; 
		border-bottom: 1px solid #adadad;
      position: relative;
	}
}


@media (min-width: 768px) { 
	.stuck {
		width: 25%;
		height: 100%;
	}
}

/* --------------------------------- PAGE CONTENT */

/* The page content area is defined by .page-content-container */

/* This section defines different reverse (dark color) backgrounds that can be utilized on the homepage and throughout the site
Be sure to check how paragraphs, headers and links look on the new background when introducing a new background color with your color scheme */ 

.reverse-content-container-background-1 {
   background-color: #09506d;
   color: #ffffff;
}

.page-content-container .reverse-content-container-background-1 p,
.page-content-container .reverse-content-container-background-1 ul li, 
.page-content-container .reverse-content-container-background-1 h1, 
.page-content-container .reverse-content-container-background-1 h2, 
.page-content-container .reverse-content-container-background-1 h3, 
.page-content-container .reverse-content-container-background-1 h4, 
.page-content-container .reverse-content-container-background-1 h5, 
.page-content-container .reverse-content-container-background-1 h6, 
.page-content-container .reverse-content-container-background-1 h7 {
	color: #ffffff;
}


ul.reverse-music-note {
    list-style-image: url("/images/white-music-note-icon.png");
    padding: 15px;
    margin: 0;
}

.page-content-container ul.reverse-music-note li { 
    padding-left: 10px; 
}


/* Sets a min-height for the .page-content-container to push the footer down below the fold. */ 

.page-content-container {
	min-height: 900px;
	background-color: #ffffff;
}



@media (min-width: 576px) {

.page-content-wrapper {
	border-left: 1px solid #181818;
	height: 100%;
	}

}

/* Standard Headers */ 

.page-content-container h1 {
	font-size: 2.9rem;
	font-weight: bolder;
	color: #0b4f6c;	
	padding-bottom: 20px;
	border-bottom: 2px solid #09506d;
	margin-bottom: 30px; 
}

.page-content-container h2 {
	font-size: 2.3rem;
	font-weight: bold;
	padding-top: 15px;
	padding-bottom: 15px;
	color: #0b4f6c;	
}

.page-content-container h3 {
	font-weight: bold;
	color: #444444;
	padding-top: 15px;
	padding-bottom: 15px;
}

.page-content-container h4,
.page-content-container h5, 
.page-content-container h6,
.page-content-container h7 {
	color: #444444;
}


/* Standard Copy */ 
.page-content-container p,
.page-content-container ul,
.page-content-container table,
.page-content-container ol {
	color: #444444;
	font-size: 1.2rem;
}

.page-content-container p.lead {
	font-size: 1.5rem; 
	font-weight: bold;
   text-align: center;
}

/* Standard Links */ 
.page-content-container a {
	font-weight: bold;
	color: #0c1318;
}

.page-content-container a:hover, 
.page-content-container a:active,
.page-content-container a:focus {
	text-decoration: none;
	color: #18b9ed;
}

/* Standard Button (using .primary-btn class applied to an anchor tag) */ 

.page-content-container a.primary-btn {
	display: inline-block;
	text-align: center;
	font-weight: normal;
	padding: 10px 20px 10px 20px; 
	border-radius: 5px;
	background-color: #09506d;
	color: #ffffff;
}

.page-content-container a.primary-btn:hover, 
.page-content-container a.primary-btn:active,
.page-content-container a.primary-btn:focus { 
	text-decoration: none;
	background-color: #18b9ed;
	color: #ffffff;
}

.page-content-container a.secondary-btn {
	display: inline-block;
	text-align: center;
	font-weight: bold;
	padding: 5px 10px 5px 10px; 
	border-radius: 5px;
	border: 2px solid #09506d;
	color: #09506d;
}

.page-content-container a.secondary-btn:hover, 
.page-content-container a.secondary-btn:active,
.page-content-container a.secondary-btn:focus { 
	text-decoration: none;
	border: 2px solid #18b9ed;
	color: #18b9ed;
}


.page-content-container a.tertiary-btn {
	display: inline-block;
	text-align: center;
	font-weight: bold;
	padding: 5px 10px 5px 10px; 
	border-radius: 5px;
  	border: 2px solid #ffffff;
	color: #ffffff;
}

.page-content-container a.tertiary-btn:hover, 
.page-content-container a.tertiary-btn:active,
.page-content-container a.tertiary-btn:focus { 
	text-decoration: none;
	border: 2px solid #ffffff;
	color: #ffffff;
}
/* Change thumbnails */ 
.page-content-container img.img-anchor {
	border: 1px solid #D1D1D1;
	padding: 2px; 
   border-radius: 5px;

}

.page-content-container img.img-anchor:hover,
.page-content-container img.img-anchor:active,
.page-content-container img.img-anchor:focus {
	border: 1px solid #18b9ed;
	background-color: #18b9ed;
}


/* Center Text in 3-col layout on mobile-view */

@media (max-width: 991.99px) {
	.page-content-container .col-lg-4 {
		text-align: center;
	}
}


.page-content-container ul.music-note {
    list-style-image: url("/images/music-note-icon.png");
    padding: 15px;
    margin: 0;
}

.page-content-container ul.music-note li { 
    padding-left: 10px; 
}

/* --------------------------------- FOOTER */


/* The footer is defined by .footer-container */

.footer-container {
	background-color: #b62025;
	color: #f0f0f0;
	font-weight: lighter;
	padding-top: 25px;
	padding-bottom: 25px;
	font-size: 16px;
}

.footer-container p {
	padding: 0px;
	margin: 0px;
}

.footer-container a {
	font-weight: bold;
	color: #ffffff;
}

.footer-container a:hover, 
.footer-container a:active,
.footer-container a:focus {
	text-decoration: none;
	color: #18b9ed;
}

.footer-container .footer-utilities-menu {
	text-align: right;
}

@media (max-width: 991.98px) { 
  .footer-container .footer-utilities-menu {
  	 text-align: left;
  }
}

/* --------------------------------- PAGE-SPECIFIC: HOME */

/* .hero-img-container {
	margin-bottom: 50px;
}

.hero-img {
	position: relative;
}

.hero-img-copy {
	position: absolute;
   top: 45%;
   left: 0;
   width: 100%;
}

.hero-img-copy h1 {
	color: #ffffff;
	font-size: 3.0rem; 
	font-weight: bolder;
	text-align: center; 
	border-bottom: 0px;
	padding-bottom: 0px;
}

.hero-img-copy p {
	color: #ffffff;
	font-size: 1.5rem;
	text-align: center;
}

@media (max-width: 991px) { 
	
	.hero-img-copy h1 {
		font-size: 2.0rem;
	}
	
	.hero-img-copy p {
		display: none;
	}
}

@media (max-width: 575px) {
	.hero-img-copy {
		display: none;
	}
	
}

*/ 


ul.home-page-ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
	text-align: center;
   font-size: 1.5rem;
}


/* Read More / Read Less */

.paragraph-block,
.show-less {
  display: none;
}

.show-less,
.show-more {
  color: #f47d23; 
  cursor: pointer;
  opacity:0.9;
  padding-left: 20px;
  padding-right: 20px;
}

.show-less:hover,
.show-less:active,
.show-less:focus,
.show-more:hover
.show-more:active,
.show-more:hover {
	color: #d94b1f;
}

.read-more {
  font-size: .8rem;
}

.rotatorRandomImage {
	box-shadow: 0px 2px 15.12px 2.88px rgba(0, 0, 0, 0.35);
}


/* --------------------------------- PAGE-SPECIFIC: CONTACT PAGE */

.page-content-container span.contact-spacer {
	font-weight: bold;
	display: inline-block;
	width: 100px;
}


/* --------------------------------- PAGE-SPECIFIC: OFFICERS PAGE */



.page-content-container ul.list-of-officers {
	list-style: none;
   margin: 0px;
   padding: 0px;
   
}

.page-content-container ul.list-of-officers li {
	padding-top: 5px;
   padding-bottom: 5px;
}

.page-content-container span.officer-position {
	font-weight: bold;
	display: inline-block;
	width: 200px;
}


/* --------------------------------- SITE COMPONENT: ROTATOR */

.page-content-container .carousel {

}


/* --------------------------------- SITE COMPONENT: PHOTO GALLERY */

.photoAlbumGridAlbumContainer {
	width: 100%;
}

img.photoAlbumGridStandardImg {
	padding: 4px;
	border-radius: 2px;
	border: 1px solid #adadad;
	margin-top: 20px;
  	margin-bottom: 20px;
}

/* --------------------------------- SITE COMPONENT: FORMS */

.form-container {

}

small.help-block {
  color:red;
  display:block;
  font-size:0.9em;
  font-weight:600;
  line-height:1.85em;
}

.formct1_86 {
	display:none;
}
.formStatusSuccess {
	color:#bb2025;
	font-size:16px;
	font-weight:bold;
}

.formStatusFail {
	color:red;
	font-size:16px;
}

form button.btn-default{
	display: inline-block;
	text-align: center;
	font-weight: normal;
	padding: 10px 20px 10px 20px; 
	border-radius: 5px;
	background-color: #09506D;
	color: #ffffff;
   font-family: "Barlow Condensed", sans-serif;
}

form button.btn-default:hover,
form button.btn-default:active,
form button.btn-default:focus { 
	text-decoration: none;
	background-color: #B62025;
	color: #ffffff;
}

/* --------------------------------- SITE COMPONENT: LISTS  */

#McnList_72 {
	width: 100%;
}

table.listTable tr {
   padding-top: 15px;
   padding-bottom: 15px;
   width: 100%;
   
}

tr.listColumnHeaderContainer {
	font-weight: bold;
}

table.listTable tr td {
	padding-left: 10px;
   padding-right: 10px;
}


.newsletters-list > li {
  margin-bottom:15px;
}