.penci-topbar {
	background: $color__black;
	color: $color__white;
	z-index: 10000;
	position: relative;
	border: 0;
	width: 100%;
	min-height: 30px;

	&:after {
		content: "";
		display: table;
		clear: both;
	}

	.topbar-width-default,
	.penci-container-fullwidth {
		padding-left: 10px;
		padding-right: 10px;
	}
	&.penci-topbar_fullwidth .penci-container-fluid {
		max-width: 100%;
	}

	&.style-1 {
		.penci-topbar__right{
			float: right;
			text-align: right;
		}
	}

	&.style-2 {
		.penci-topbar__right{
			float: right;
			text-align: right;

		}

		.topbar__menu,
		.topbar_date,
		.topbar_weather,
		.topbar__trending {
			margin-right: 0;
			margin-left: 32px;
		}
	}

	&.style-4 {
		.penci-topbar__left,
		.penci-topbar__right {
			float: right;
		}
	}

	&.style-3 {
		.topbar__trending {
			margin-right: 32px;
		}
	}

	h3, & {
		@include font-size(1.2);
		line-height: 30px;
	}

	a {
		color: $color__white;

		&:hover {
			color: $color__blue;
		}
	}

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;

		li {
			margin-left: 10px;
			padding-left: 7px;
			margin-bottom: 0;
			line-height: 20px;
			position: relative;
			list-style: none;

			&:first-child {
				margin-left: 0;
				padding-left: 0;
			}

			&:hover {
				color: $color__blue;
			}

			.fa{
				padding-right: 5px;
			}

			a {
				text-decoration: none;
				color: $color__white;
				@include font-size(1.2);
				line-height: 30px;
				display: inline-block;

				&:hover {
					color: $color__blue;
				}
			}
			&.fa:before {
				margin-right: 5px;
				font-size: 15px;
			}
		}
	}

	ul.menu {
		li {
			&:hover > ul.sub-menu {
				visibility: visible;
				opacity: 1;

			}
			ul.sub-menu {
				white-space: normal;
				float: left;
				opacity: 0;
				display: block;
				visibility: hidden;
				background: #fff;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				position: absolute;
				transition: opacity 0.3s;
				top: 100%;
				z-index: 999;
				width: 160px;

				li {
					margin-left: 0;
					padding: 5px 12px;
					border-bottom: 1px solid #f1f1f1;
					height: auto;
					line-height: 1.7;
					width: 100%;
					a {
						color: #212121;
						transition: all 0.3s;
						font-size: 12px;
						display: block;
						line-height: 1.3;
						padding: 3px 0px;

						&:hover {
							color: $color__blue;
						}
					}

					&:last-child {
						border: none;
					}
				}

				li > ul.sub-menu {
					position: absolute;
					left: 100%;
					top: 0;
				}
			}
		}
	}
}
.penci-topbar .topbar__logout_login {

	ul li .fa {
		padding-right: 2px;
	}

	.avatar {
		display: inline-block;
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}
}

.topbar__menu,
.topbar_date,
.topbar_weather {
	display: inline-block;
	margin-right: 32px;
	float: left;
}

.topbar_weather {
	max-height: 30px;
	.penci-weather-icons {
		background: none;
		vertical-align: middle;
		position: relative;
		top: -1px;
		margin-right: 2px;
		font-size: 18px;
	}

	.penci-weather-now {
		line-height: inherit;
		padding: 0;
		float: none;
		width: auto;
		cursor: auto;
		display: inline-block;

		span {
			font-weight: 600;
		}
	}

	.penci-weather-degrees {
		font-size: 11px;
	}

	.penci-weather-unit {
		position: relative;
		font-weight: 400;
		line-height: 1;
		vertical-align: top;
		font-size: 8px;
		opacity: 1;
		left: 0;
		top: 4px;
	}

	.penci-weather-location {
		display: inline-block;
		padding-left: 6px;
	}

	.penci-weather-city {
		font-weight: 500;
		margin: 0;
		font-size: inherit;
	}
}

.topbar__menu {

}

.topbar__social-media {
	float: left;

	a {
		margin-right: 10px;
		line-height: inherit;
		font-size: 14px;
		vertical-align: top;
		display: inline-block;

		&:last-child {
			margin-right: 0;
		}
	}
}

.topbar__trending {
	display: inline-block;
	float: left;
	overflow: hidden;
	width: 500px;
	text-align: left;

	.penci-owl-carousel-slider .animated {
		animation-duration: 400ms;
	}

	.headline-title {
		height: 100%;
		line-height: inherit;
		padding: 0 15px;
		color: $color__white;
		background: $color__blue;
		float: left;
		text-transform: uppercase;
		z-index: 10;
		position: relative;
		display: inline-block;
		font-weight: 700;
	}

	&.penci-block-vc {
		background: transparent;
		padding: 0;
		margin: 0;
		border: 0;
	}

	.penci-trending-nav {
		float: left;
		position: relative;
		z-index: 1000;
		padding-left: 10px;
		padding-right: 10px;

		a {
			@include font-size(1.8);
			line-height: inherit;
			padding-left: 5px;
			padding-right: 5px;
			cursor: pointer;
			display: inline-block;
			vertical-align: top;
		}

		&.penci-pag-disabled a{
			color: #888;
			opacity: 0.5;
			cursor: default;
		}

	}
}

@media screen and (max-width: 1024px) {
	.topbar__trending {
		display: none;
	}
}

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

	.penci-topbar{
		padding-top: 10px;
		padding-bottom: 4px;

		ul.menu li ul.sub-menu {
			display: none;
		}
	}
	.penci-topbar__right,
	.penci-topbar__left {
		width: 100%;
		text-align: center;
	}

	.penci-topbar.style-2 .penci-topbar__right {
		width: 100%;
		text-align: center;
	}

	.penci-topbar {
		.penci-topbar__right,
		.penci-topbar__left {
			.topbar_item {

				&:first-child {
					margin-left: 0;
				}
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.topbar__menu,
	.topbar_date,
	.topbar_weather {
		margin-right: 28px;
		float: none;
	}

	.topbar__social-media {
		width: 100%;
		clear: both;
		text-align: center;
		display: block;

		a,li{
			text-align: center;
			float: none;
		}

		ul {
			width: 100%;
			justify-content: center;
			align-items: center;
		}
	}

	.penci-topbar.header--s7,
	.penci-topbar.header--s7 h3,
	.penci-topbar.header--s7 ul li,
	.penci-topbar ul li a {
		line-height: 1.5;
	}
}

@media screen and (max-width: 480px) {
	.topbar_weather,
	.topbar_date,
	.topbar__logout_login  {
		display: none;
	}
}