#header {
    height: 500px;
    background-size: cover;

    @include media-breakpoint-down(md) {
        height: 350px;
    }

    @include media-breakpoint-down(sm) {
        height: 200px;
    }
}

#navigation {
    .dropdown {
        .dropdown-menu {
            background-color: $gray-800;
            padding: 0.5rem;

            .dropdown-sub .dropdown-item {
                padding-left: 1.5em;
            }

            a {
                padding: 0.5em;
                color: white;

                &:hover {
                    background-color: $gray-600;
                }
            }

            transition: all 0.3s;
            overflow: hidden;
            transform-origin: top center;
            transform: scale(1, 0);
            display: block;
        }

        &:hover {
            .dropdown-menu {
                transform: scale(1);
            }
        }
    }
}

.breadcrumb-item {
    & + .breadcrumb-item::before {
        color: $gray-400;
    }

    @include media-breakpoint-down(md) {
        font-size: 1rem;
    }
}

.btn-link span {
    transition: color 0.5s;

    &:hover {
        color: $secondary;
    }
}