/* Topbar CSS */
#topbar {
  display: grid;
  width: 100%;
  background-color: #607bd1;
  justify-content: center;
}
#topbar a {
  display: grid;
  grid-gap: 8px;
  color: #fff !important;
  font-size: 14px;
}
.topbar-socials {
  display: grid;
  grid-gap: 16px;
}
@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: #E20613;
}
.topbar-item {
  transition: 0.5s ease all;
}
.topbar-item h4 {
  transition: 0.5s ease all;
}
.topbar-item:hover {
  color: #E20613;
}
.topbar-item:hover h4 {
  color: #E20613;
}
#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;
}