/* Topbar CSS */

#topbar
{
	display: grid;
	width: 100%;
	
	background-color: #BBBBBB;
	
	justify-content: center;
}

#topbar a
{
	display: grid;
	
	grid-gap:8px;
	
	color: #fff!important;
	font-size: 14px;
}

.topbar-socials
{
	display:grid;
	grid-gap: 16px;
	    text-align: end;
    margin: auto;
}

@media( min-width: 992px )
{
	.topbar-socials
	{
		grid-row: 1;
		border-right: solid 1px #fff;
		padding-right: 16px;
	}

}

.topbar-social
{
	grid-row: 1;
	
	border-left: solid 1px #fff;
	padding: 0 0 0 16px;
	align-self: center;
}

@media( min-width: 992px )
{
	#topbar a
	{
		grid-row: 1;
	
		border-left: solid 1px #fff;
		padding: 0 0 0 16px;
		align-self: center;
	}
}

.topbar-icon
{
	grid-row: 1;
	align-self: center;
	transition:0.5s ease all;
		
}

.topbar-icon:hover
{
	color: #BBBBBB;
}

.topbar-item
{
	transition:0.5s ease all;
		
}

.topbar-item h4
{
	transition:0.5s ease all;
		
}

.topbar-item:hover
{
	color: #BBBBBB;
}

.topbar-item:hover h4
{
	color: #BBBBBB;
}

#topbar h4
{
	grid-row: 1;
	align-self: center;
	margin: 0;
}

#topbar a:first-of-type
{
	border: none;
	padding: 0;
}

/* - */

@media( min-width: 768px )
{
	#topbar
	{
		grid-template-columns: auto 768px auto;
	}
}

@media( min-width: 992px )
{
	#topbar
	{
		grid-template-columns: auto 992px auto;
	}
}

@media( min-width: 1200px )
{
	#topbar
	{
		grid-template-columns: auto 1200px auto;
	}
}

@media( min-width: 1600px )
{
	#topbar
	{
		grid-template-columns: auto 1500px auto;
	}
}

#topbar-inner
{
	display: grid;
	grid-gap: 16px;
	padding: 12px 0;
	grid-column: 2;
	justify-self: start;
	justify-items: center;
}