/* Topbar CSS */

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

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

.topbar-socials
{
	display:grid;
	grid-gap: 16px;
	text-align: end;
  /*  margin: auto; */ /* these centralise content in their columns */
}

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

}

.topbar-contacts
{
	display:grid;
	grid-gap: 16px;
	text-align: end;
   /* margin: auto; */ /* these centralise content in their columns */
}

.topbar-contacts h4, .topbar-contacts a
{
	overflow-wrap: anywhere;
}

@media( min-width: 992px )
{
	.topbar-contacts
	{
		grid-row: 1;
		padding-right: 16px;
	}

}

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

@media( min-width: 992px )
{
	#topbar a
	{
		grid-row: 1;
	
		border-left: solid 1px #111;
		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: #fff;
}

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

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

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

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

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

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

#topbar a:last-of-type
{
	border-right: none;
}

/* - */

@media( min-width: 768px )
{
	#topbar
	{
		grid-template-columns: auto 768px auto;
	}
	.topbar-socials {
		justify-self: center;
	}
	.topbar-contacts {
		justify-self: center;
	}
}

@media( min-width: 992px )
{
	#topbar
	{
		grid-template-columns: auto 992px auto;
	}
	.topbar-socials {
		justify-self: start;
	}
	.topbar-contacts {
		justify-self: end;
	}
}

@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-items: center;
}