/* Topbar CSS */

#topbar {
	display: grid;
	width: 100%;

	background-color: #1c2776;

	justify-content: center;
}

#topbar a {
	display: grid;

	grid-gap: 8px;

	color: #efefef !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 #efefef;
	padding: 0 0 0 16px;
	align-self: center;
}

@media (min-width: 992px) {
	#topbar a {
		grid-row: 1;

		border-left: solid 1px #efefef;
		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;
	color: #1d2776;
}

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

.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;
}