/* Topbar CSS */

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

    background: var(--topbarback-color);
    background-image: repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%);
    filter: drop-shadow(0 0 1px rgba(255, 200, 0, .3));
  animation: MoveBackgroundPosition 6s ease-in-out infinite;
   
    justify-content: center;
}

@keyframes MoveBackgroundPosition { 
  0% {
      background-position: 0% 50%
  }
  
  50% {
    background-position: 100% 50%
  }
  
  100% {
    background-position: 0% 50%
  }
}

#topbar a {
    display: grid;

    grid-gap: 8px;
    color: var(--topbarcontent-color);

    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;
    color: var(--topbarcontent-color);
      font-family: 'Lato', sans-serif;
    font-size: 1em;
}

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

}

.topbar-social {
    grid-row: 1;
    color: var(--topbarcontent-color);
    border-left: solid 1px var(--topbarcontent-color);
    padding: 0 0 0 16px;
    align-self: center;
}

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

        border-left: solid 1px var(--topbarcontent-color);
        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: var(--topbarcontent-color);
}

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

}

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

}

.topbar-item:hover {
    color: var(--topbarcontent-color);
}

.topbar-item:hover h4 {
    color: var(--topbarcontent-color);
}

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