/* Example CSS file */
:root {
    --main-color: #b48e12;
    --main-color-hover: #d4be18;
    --sub-color: #282722;
    --sub-color-hover: #21201d;
    --radius-20: 20px;
    --radius-10: 10px;
    --radius-5: 5px;
}

html {
    min-height: 100%;
}

body {
    font-family: 'Source Serif 4', sans-serif;
    font-size: 0.9rem;
    color: var(--sub-color);
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0px !important;
    font-weight: 500;
    background: rgb(255,255,255);
    background: linear-gradient(156deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
    min-height: 100%;
}

/* default styles */

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Source Serif 4', sans-serif;
    font-weight: 400;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
    color: #424251;
}

p {
    line-height: 150%;
}

h1 {
    font-size: 30px;
    line-height: 120%;
}

h2 {
    font-size: 20px;
    line-height: 120%;
}

h3 {
    font-size: 16px;
    line-height: 120%;
}

strong {
    font-weight: 700;
}

a {
    cursor: pointer;
    color: var(--main-color);
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.d4-button, .d4-button-current {
    cursor: pointer;
    color: #FFF;
    background: var(--main-color);
    font-weight: bold;
    border: none;
}

.d4-button:hover, .d4-button-current:hover {
    background: var(--main-color-hover);
    color: #FFF;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* end default styles */

#d4-toolbar {
    background-color: var(--sub-color);
    border-bottom: 1px solid var(--main-color);
    text-align: right;
    padding: 10px 0px;
}

#d4-toolbar i {
    color: #FFF;
}

#d4-toolbar a {
    color: #FFF;
    margin-left: 5px;
}

#d4-toolbar a:hover {
    background-color: #494949;
}

#d4-toolbar a.active {
    background-color: var(--main-color);
    color: #FFF;
    font-weight: 700;
}

#d4-toolbar a.active i {
    color: #FFFFFF;
}

#d4-toolbar a.button {
    color: #FFFFFF;
    border: none;
}

/* navigation */

#d4-navbar {
    padding: 0px 0px 0px 0px;
    position: relative;
    z-index: 1;
    background-color: var(--sub-color);
    color: #FFF;
}

#d4-navbar .logo {
    display: block;
    margin-top: 26px;
    background-repeat: no-repeat;
    background-position: top left;
    float: left;
    position: relative;
    width: 140px;
}


#d4-navbar .logo-text {
    display: block;
    margin-top: 26px;
    float: left;
    position: relative;
    font-family: "Tangerine", sans-serif;
    padding-top: 10px;
}
#d4-navbar .logo-text h1 {
    font-family: 'Tangerine', sans-serif;
    font-size: 40px;
    margin-bottom: 0px;
    line-height: 100%;
}

#d4-navbar .nav {
    float: right;
    padding-top: 40px;
    padding-bottom: 40px;
    color: var(--main-color);
}

#d4-navbar .nav a.btn.main {
    font-weight: bold;
    color: #FFF;
    margin-right: 5px;
}

#d4-navbar .nav a.btn.main:hover {
    color: var(--main-color-hover);
}

#d4-navbar .nav a.btn.main.current {
    cursor: pointer;
    color: #FFF;
    background: var(--main-color);
}


/* other-styles */

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(18,90,180);
    background: linear-gradient(180deg, rgba(18,90,180,0) 0%, rgba(18,90,180,0.30015756302521013) 60%, rgba(12,36,66,0.6643032212885154) 100%);
}

.under-layer {
    position: absolute;
    height: 360px;
    margin-top: -100px;
    width: 100%;
    background: var(--sub-color);
    z-index: -1;
    border-bottom: 10px solid var(--main-color);
}
.under-layer.lvl2 {
    opacity: 0.7;
    margin-top: -20px;
    z-index: -2;
    background: var(--main-color);
}
.under-layer.grey {
    margin-top: 100px;
    height: 200px;
    background: var(--sub-color);
    z-index: -3;
}
.under-layer.grey.lvl2 {
    opacity: 0.7;
    margin-top: 200px;
    z-index: -4;
}

footer {
    background-color: var(--sub-color);
}

footer a {
    color: #FFF;
}

footer .get-connected {
    background-color: var(--main-color);
}

.card {
    transition: transform .2s;
}

.card:hover {
    transform: scale(1.02);
}

.bg-warning {
    background-color: rgb(239 170 47) !important 
}