@media screen and (min-width: 1px) and (max-width: 1300px) {

	#featured-topic-links {
		width: 70%;
	}

}


@media screen and (min-width: 1px) and (max-width: 1100px) {

	#main-container #banner #logo {
		width: 270px;
		margin-left: 0px;
	}

	#main-container #banner #tag-line {
		font-size: 0.7em;
	}

	#featured-topic-links {
		width: 100%;
	}
	
	

}

@media screen and (min-width: 1px) and (max-width: 900px) {
	#main-container #banner #tag-line {
		float: left;
		position: relative;
		top: 1.4em;
	}
}

@media screen and (min-width: 1px) and (max-width: 800px) {

	#main-container #banner-bg {
		height: 60px;
	}


	#main-container #banner {
		height: 60px;
	}


		#main-container #banner #logo {
			float: left;
			width: 205px;
			height: 60px;
			background-size: 200px;
		}


		#main-container #banner #menu-bar {
			margin-left: 10px;
			top: 1em;
		}
		
		#main-container #banner #tag-line {
			display: none;
		}
		
	#featured-topic-links span[data-icon] {
		display:none;
	}

	#featured-topic-links span {
		margin-right: 2em;
	}
}


@media screen and (min-width: 1px) and (max-width: 700px) {

	#main-container #banner #social-media {
		font-size: 1.75em;
	}
}

@media screen and (min-width: 1px) and (max-width: 600px) {
/* 
	#main-container #banner #social-media {
		float: left;
	}
 */

	#main-container #banner #mobileMenuButton {
		display: block;
		float: right;
		font-size: 3em;
		margin: 0.1em 0.3em 0 0;
	}
	
		#main-container #banner #mobileMenuButton a {
			display: block;
		}

			#main-container #banner #mobileMenuButton a,
			#main-container #banner #mobileMenuButton a:hover,
			#main-container #banner #mobileMenuButton a:visited,
			#main-container #banner #mobileMenuButton a:active,
			#main-container #banner #mobileMenuButton a:focus {
				color: white;
				text-decoration: none;
			}
	
/* 
				#main-container #banner #mobileMenuButton a:hover,
				#main-container #banner #mobileMenuButton a:focus {
					color: #1B8B78;
					color: rgba(27, 139, 120, 0.80);
				}
 */
			
				#main-container #banner #mobileMenuButton a span[data-icon] {
					display: block;
					width: 100%;
					height: 100%;
				}

	#main-container #banner #menu-bar {	
		display: none;
		float: none;
		position: absolute;
		right: 0;
		top: 60px;
		background-color: #000000;
		opacity: 0.75;
		filter: alpha(opacity=85);  /* For IE8 and earlier */			
		padding-top: 0.25em;
		width: 10em;
	}
	
		#main-container #banner #menu-bar .menu-item {
			display: block;
			float: right;
			clear: right;
			margin: 0;
			padding: 0;
			width: 100%;
		}

		#main-container #banner #menu-bar .menu-item a {
			display: block;
		}
		
			#main-container #banner #menu-bar .menu-item a:hover {
				color: #FFFFFF;
			}
	
			#main-container #banner #menu-bar .menu-item a span {
				display: block;
				width: 100%;
				padding: 0.3em 0 0.3em 1em;
			}
	
}