//Social Icons in Top Bat Styling

#chdp-top-bar {
	background-color: #000;
	padding: 0.35em 0;
	box-shadow: 0 1px #ccc;
	@extend %heading-font;
	#chdp-social {
		.icon {
			display: inline-block;
			float: left;
			margin-right: 0.75em;
			a {
				font-size: 1em;
				color: #fff;
				 i {
					&.fa-facebook-f:hover {
						color: #278EEA;
					}
					&.fa-twitter:hover {
						color: #33a4ec;
					}
					&.fa-rss:hover {
						color: #e66237;
					}
					&.fa-pinterest-p:hover {
						color: #c22532;
					}
					&.fa-vimeo:hover {
						color: #34b3df;
					}
					&.fa-youtube:hover {
						color: #f91628;
					}
					&.fa-instagram:hover {
						color: #c141a4;
					}
					&.fa-flickr:hover {
						color: black;
					}
					&.fa-linkedin:hover {
						color: #1d6abc;
					}
				}
			}
		}
	}
	#top-navigation {
		position: relative;

		a {
			color: #333;
			font-size: 0.8em;
			@media (min-width: 768px) {
				color: #fff;
			}
		}
		button {
			@extend %tertiary-btn;
			border-radius: 3px;
			letter-spacing: 0;
		}
		@media (min-width: 992px) {
			button {
				display: none;
			}
			ul {
				padding: 0;
				margin: 0;
				list-style: none;
				li {
					float: left;
					margin: auto 0.5em;

				}
			}
		}
		@media (max-width: 991px) {
			&.toggled {
				ul, .jumper {
					display: block;
				}
			}
			.jumper {
				display: none;
				position: absolute;
				clip: rect(1px, 1px, 1px, 1px);
			}
			#menu-top {
				border-radius: 5px;
			}
			ul {
				display: none;
				list-style: none;
				margin: 0.6em 0 0;
				padding: 0.24em 0;
				position: absolute;
				background-color: #eee;
				border: solid 1px #ddd;
				top: 100%;
				z-index: 99;
				min-width: 120px;
				left: 0;
				right: 0;
				li {
					margin: auto 0.6em;
					a {
						display: block;
						padding: 0.55em 0;
					}
					&:not(:last-child) {
						border-bottom: solid 1px rgba(0,0,0,0.1);
					}
					&:not(:first-child) {
						border-top: solid 1px rgba(255,255,255,0.6);
					}
				}
			}
		}
	}
}