/* Topbar CSS */

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

    background-color: #FFB300;

    justify-content: center;
}

#topbar a {
    display: grid;

    grid-gap: 8px;

    color: #222 !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 {
    color: black;
    overflow-wrap: anywhere;
}

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

}

.topbar-social {
    grid-row: 1;

    border-left: solid 1px #222;
    padding: 0 0 0 16px;
    align-self: center;
}

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

        border-left: solid 1px #222;
        padding: 0 0 0 16px;
        align-self: center;
    }
}

.topbar-icon {
    grid-row: 1;
    align-self: center;
    transition: 0.5s ease all;
    font-size: 20px;

}

.topbar-icon:hover {
    color: rgb(201, 234, 238);
}

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

}

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

}

.topbar-item:hover {
    color: rgb(201, 234, 238);
}

.topbar-item:hover h4 {
    color: rgb(201, 234, 238);
}

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

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