:root {
    --primary-color: #C0BAAF;
    --primary-color-light: #C0BAAF;
    --text-color: #ced4da;
    --topnav-text-color: #fff;
    --topnav-hover-color: #144639;
}

/* ========================================================================
   Component: top-navbar
   ======================================================================== */
.topnavbar {
}

.topnavbar .navbar-header {
    background-color: var(--primary-color);
    background-image: -webkit-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: -o-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2b957a', endColorstr='#ff37bc9b', GradientType=1);
}

@media only screen and (min-width: 768px) {
    .topnavbar .navbar-header {
        background-image: none;
    }
}

.topnavbar .navbar-nav > li > .navbar-text {
    color: var(--primary-color);
}

.topnavbar .navbar-nav > li > a,
.topnavbar .navbar-nav > .open > a {
    color: var(--primary-color);
}

.topnavbar .navbar-nav > li > a:hover,
.topnavbar .navbar-nav > .open > a:hover,
.topnavbar .navbar-nav > li > a:focus,
.topnavbar .navbar-nav > .open > a:focus {
    color: var(--topnav-hover-color);
}

.topnavbar .navbar-nav > .active > a,
.topnavbar .navbar-nav > .open > a,
.topnavbar .navbar-nav > .active > a:hover,
.topnavbar .navbar-nav > .open > a:hover,
.topnavbar .navbar-nav > .active > a:focus,
.topnavbar .navbar-nav > .open > a:focus {
    background-color: transparent;
}

.topnavbar .nav-wrapper {
    background-color: var(--primary-color);
    background-image: -webkit-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: -o-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-image: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color-light) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2b957a', endColorstr='#ff37bc9b', GradientType=1);
}

@media only screen and (min-width: 768px) {
    .topnavbar {
        background-color: var(--primary-color);
        background-image: -webkit-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
        background-image: -o-linear-gradient(left, var(--primary-color) 0%, var(--primary-color-light) 100%);
        background-image: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color-light) 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2b957a', endColorstr='#ff37bc9b', GradientType=1);
    }
    .topnavbar .navbar-nav > .open > a,
    .topnavbar .navbar-nav > .open > a:hover,
    .topnavbar .navbar-nav > .open > a:focus {
        box-shadow: 0 -3px 0 rgba(255, 255, 255, 0.5) inset;
    }
    .topnavbar .navbar-nav > li > .navbar-text {
        color: var(--topnav-text-color);
    }
    .topnavbar .navbar-nav > li > a,
    .topnavbar .navbar-nav > .open > a {
        color: var(--topnav-text-color);
    }
    .topnavbar .navbar-nav > li > a:hover,
    .topnavbar .navbar-nav > .open > a:hover,
    .topnavbar .navbar-nav > li > a:focus,
    .topnavbar .navbar-nav > .open > a:focus {
        color: var(--topnav-hover-color);
    }
}