@font-face {
	font-family: "flexslider-icon";
	 src: url('../assets/fonts/flexslider-icon.woff') format('woff'), /* Modern Browsers */
		 url('../assets/fonts/flexslider-icon.ttf') format('truetype'); /* Safari, Android, iOS */
	font-weight: normal;
	font-style: normal;
}

/* A11y Keyboard Focus style */
a[href]:not([tabindex='-1']):focus, a[href]:not([tabindex='-1']):hover, 
area[href]:not([tabindex='-1']):focus,area[href]:not([tabindex='-1']):hover, 
input:not([disabled]):not([tabindex='-1']):focus,
select:not([disabled]):not([tabindex='-1']):focus, 
textarea:not([disabled]):not([tabindex='-1']):focus, 
button:not([disabled]):not([tabindex='-1']):focus,button:not([disabled]):not([tabindex='-1']):hover, 
iframe:not([tabindex='-1']):focus,iframe:not([tabindex='-1']):hover, 
[tabindex]:not([tabindex='-1']):focus,[tabindex]:not([tabindex='-1']):hover, 
[contentEditable='true']:not([tabindex='-1']):focus,[contentEditable='true']:not([tabindex='-1']):hover,
.postHeader:focus,.postHeader:hover, 
#mainNavigation .active>a:focus,#mainNavigation .active>a:hover, 
#mainNavStatic .active>a:focus, #mainNavStatic .active>a:hover,
.blueBtn:hover, .blueBtn:active, .blueBtn:focus
{
	outline: dotted 1px #000000;
	background-color: #EFEFEF !important;
	color:#000 !important;
}

#donate_btn:hover, #volunteer_btn:hover, #donate_btn:focus, #volunteer_btn:focus {
	background-color: #68645D !important;
}

/* A11y slider control styles */
.metaslider-multi {
	padding-bottom: 48px;
	background-color: #cccccc;
}

.flex-pauseplay {
	bottom: -38px;
	left: 10px; 
	z-index: 3;
}

.flex-pauseplay a {
	display: block;
	width: 20px;
	height: 22px !important;
	position: absolute;
	bottom: 3px !important;
	left: 10px;
	opacity: 0.8;
	z-index: 10;
	overflow: hidden;
	cursor: pointer;
	color: #000;
	background: transparent;
}

.flex-pauseplay a:before {
	font-family: "flexslider-icon";
	font-size: 24px;
	display: inline-block;
	content: '\f004';
}
.flex-pauseplay a:hover {
	opacity: 1;
}
.flex-pauseplay a.flex-play:before {
	content: '\f003';
}

.metaslider .flexslider .flex-direction-nav li a {
	opacity: 1 !important;
	bottom: -38px !important;
	margin: 0px 30px 0 17px !important;
}

.flex-direction-nav {
	bottom: -13px;
	left: 33px;
	position: absolute;
}

.flex-direction-nav .flex-prev {
	left: 2px !important;
}

.flex-direction-nav .flex-next {
	left: 40px !important;
	right: 0 !important;
}

.flexslider .slides a:focus img {
	border: 2px solid #000;
}

@media (min-width: 769px) and (max-width: 998px) { 
	.metaslider .flexslider .flex-direction-nav li a {
		opacity: 1 !important;
		margin: 0px 30px 0 32px !important;
	}
}

@media (max-width: 768px) { 
	.flex-pauseplay {
		bottom: -44px;
		left: 10px;
		height: 48px;
		width: 48px;
	}

	.flex-pauseplay a {
		width: 48px !important;
		height: 40px !important;
		left: 0 !important;
		opacity: 1 !important;
	}

	.flex-pauseplay a:before {
		font-size: 24px !important;
		padding: 12px;
	}

	.metaslider .flexslider .flex-direction-nav {
		display: none;
	}
}
/* Skip Link Styles */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

.navbar-default {
	background: transparent;
	border: none;
}

.navbar-header {
	background-color: #4872ae;
}
#mainNavBar.navbar-default .navbar-toggle:focus,
#mainNavBar.navbar-default .navbar-toggle:hover {
	outline: 0;
	background-color: transparent!important;
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
}

.navbar-toggle .icon-bar+.icon-bar {
	margin-top: 4px;
}

.dropdown-menu > li > a {
	padding: 10px 20px;
}

.navbar-toggle.navbar-left {
	float: left;
	margin-left: 10px;
}

@media only screen and (max-width : 480px) {
	#donateArea, #volunteerArea,
	#donate_btn, #volunteer_btn {
		padding: 0;
	}

	.callout-Inner {
		padding: 12px 0;
	}

	.footerCalloutTitle {
		font: 25px/34px 'Raleway',sans-serif;
	}
}

/* Chad updates */
.wpcf7-form label, .wpcf7-form input[type=text], .wpcf7-form input[type=tel], .wpcf7-form input[type=email], .wpcf7-form textarea {
	display:block;
	width: 100%;
}

#footerMiddle p {
	padding-left: 15px;
}

.no-padding{
	padding: 0;
}
.right-padding{
	padding: 0 10px 0 0 !important;
}

/* Slide out mobile menu */
/* adjust wrapper when menu is open */
#wrapper.slide-active {
	overflow-x: hidden;
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
	margin-top: 0px!important;
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#content, #rmhcLogoContainer, #breadcrumbs {
	position: relative;
	left: 0;
}
#content.slide-active {
	padding-top: 0;
}

/* put toggle bars on the left :: not using button */
#mainNavBar .navbar-toggle {
	cursor: pointer;
	position: relative;
	line-height: 0;
	float: left;
	margin: 0;
	width: 30px;
	height: 40px;
	padding: 10px 0 0 0;
	border: 0;
	background: transparent;
}
/* icon bar prettyup - optional */
#mainNavBar .navbar-toggle > .icon-bar {
	width: 100%;
	display: block;
	height: 3px;
	margin: 5px 0 0 0;
}
#mainNavBar .navbar-toggle.slide-active .icon-bar {
	background: #ffa;
}
.navbar-header {
	position: relative;
	
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-default.slide-active {
	position: relative
}

#search .navbar-form {
	padding: 0;
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) { 
	#mainNavBar .container {
		margin: 0!important;
		padding: 0!important;
		height:100%;
	}
	#mainNavBar .navbar-header {
		margin: 0 auto;
		padding: 0 15px;		min-height: 50px;
	}
	#mainNavBar .navbar.slide-active {
		position: absolute;
		width: 75%;
		top: -1px;
		z-index: 1000;
	}
	#mainNavBar #mainNavigation {
		background: #f7f7f7;
		left: -100%;
		width: 75%;
		min-width: 0;
		position: absolute;
		padding-left: 0;
		z-index: 2;
		top: -135px;
		margin: 0;
	}
	#mainNavBar #mainNavigation .nav-tabs {
		min-width: 0;
		width: 100%;
		margin: 0;
	}
	#mainNavBar #mainNavigation .nav-tabs .dropdown-menu li a {
		min-width: 0;
		white-space: normal;
	}
	#mainNavBar {
		border-top: 0;
	}
	#mainNavBar a, #mainNavigation .dropdown-menu .active > a {
		color: #fff;
	}
	.dropdown-menu {
		width: 100%;
	}
	#mainNavBar .dropdown-menu a {
		color: #68645d;
	}
	
	#mainNavBar.navbar-default #mainNavigation {
		background: #4872ae;
	}
	/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
	#navbar-height-col {
		position: fixed;
		top: 0;
		height: 100%;
		bottom:0;
		width: 75%;
		left: -75%;
		background: #f7f7f7;
	}
	#navbar-height-col.inverse {
		background: #4872ae;
		z-index: 1;
		border: 0;
	}

	.nav-tabs.nav-justified>li>a {
		text-align: left;
	}
	#mainNavBar .navbar-form {
		width: 100%;
		margin: 8px 0;
		text-align: center;
		overflow: hidden;
		/*fast clearfixer*/
	}
	#mainNavBar .navbar-form .form-control {
		text-align: center;
	}
	#mainNavBar .navbar-form .btn {
		width: 100%;
	}
	/* #rmhcLogoContainer.slide-active {
		position: relative;
		left: 75%;
	} */

	#footer.slide-active {
		left: 75%;
		position: relative;
	}
}
@media (min-width:768px) { 
	#content, #rmhcLogoContainer, #breadcrumbs {
		left: 0!important;
	}
	.slide-active {
		position: fixed;
	}
	.navbar-header {
		left: 0!important;
	}
}