/*==========================================================
colour pallette
==========================================================*/
:root {
    --locallia-gold: #D8A24A;

    --locallia-bg: #1B1F24;
    --locallia-bg-alt: #252B33;

    --locallia-text: #FFFFFF;
    --locallia-text-muted: #B8BEC6;

    --locallia-border: #3A424C;
}


/* ==========================================================
   Layout
   ========================================================== */

.container{

    max-width:var(--site-width);

}

/* ==========================================================
   TOP BAR
   ========================================================== */

.top-bar {
    background: var(--colour-dark-grey);
    border-bottom: 1px solid var(--colour-gold);
    min-height: 32px;
    font-size: 0.8rem;
    color: var(--colour-light-grey);
}

.top-bar .container,
.top-bar .row,
.top-bar .col {
    height: 32px;
}

.top-bar .col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.top-bar a {
    color: var(--colour-light-grey);
    text-decoration: none;
    margin-left: 1rem;
    transition: color .2s ease;
}

.top-bar a:hover {
    color: var(--colour-gold);
}

.top-bar .separator {
    margin: 0 .6rem;
    color: var(--colour-light-grey);
    opacity: .6;
}

/* ==========================================================
   HEADER
   ========================================================== */

#header {

    background: #01060d;
    padding: 0;

}

#header .container {

    min-height: 100px;
    padding-left: 0;
    padding-right: 0;

}

#header .row {

    min-height: 100px;
    align-items: center;

}

.brand-image {

    display: block;
    max-height: 100px;
    width: auto;

}


#breadcrumb{

    padding:.5rem 0;

}

#highlighted{

    padding:1rem 0;

}

#main-content{

    padding:2rem 0;

}

#footer{

    margin-top:4rem;

    padding:2rem 0;

    background:#222;

    color:white;

}


/* ==========================================
   Fonts
   ========================================== */

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
    font-weight: 600;
}