:root {
    --site-color: #0E4FB5;
    --site-color2: #b02b2c;
    
    /* Either navitem inherits or set colours */
    --navitem-background-color: inherit;
    --navitem-color: inherit;
    --navitem-border: 2px solid var(--site-color);

    --carousel-height: 300px;
 
}



/* Extra small devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap */

body {
    font-size: 0.8em; /* 0.8x default size */
}

/* Small devices (landscape phones, 576px and up) */
@media all and (min-width: 576px) {
    body {
        font-size: 1.0em; /* 1.0x default size */
    }
}

/* Medium devices (tablets, 768px and up) */
@media all and (min-width: 768px) { 
    body {
        font-size: 1.0em; /* 1.0x default size */
    }
}

/* Large devices (desktops, 992px and up) */
@media all and (min-width: 992px) {
    body {
        font-size: 1.0em; /* 1.1x default size */
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media all and (min-width: 1200px) { 
    body {
        font-size: 1.0em; /* 1.0x default size */
    }
}



.bg {
    /* The image used */
    background-image: url("../img/bg.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


nav li.nav-item.active a {
    background-color: var(--navitem-background-color);
    color: var(--site-color);
}
nav li.nav-item a:hover {
    background-color: var(--navitem-background-color);
    color: var(--site-color);
}

ul li.nav-item.active a {
    background-color: var(--navitem-background-color);
    color: var(--navitem-color);
    border-bottom: var(--navitem-border);
}
ul li.nav-item a:hover {
    background-color: var(--navitem-background-color);
    color: var(--navitem-color);
    border-bottom: var(--navitem-border);
}

.carousel-item {
    max-height: var(--carousel-height);
}

.jjl.border-bottom {
    border-color: var(--site-color) !Important;
}

.site-color {
    color: var(--site-color);
    display: inline-block;
}

.site-color2 {
    color: var(--site-color2);
    display: inline-block;
}

.jjl-wrap {
    overflow-wrap:break-word;
}
.jjl-div-hdr {
    background-color: var(--site-color);
    color: white;
}

div.jjl-div-bg {
    border-radius: 25px;
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: lightgrey !Important; 
    box-shadow: 10px 10px 5px var(--site-color) !Important;
}

/* Gradient transparent - color - transparent */

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.sitesolid1{
	border-top: 1px solid var(--site-color);
}
hr.sitesolid2{
	border-top: 1px solid var(--site-color2);
}

hr.sitefade1 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--site-color), rgba(0, 0, 0, 0));
}

hr.sitefade2 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--site-color2), rgba(0, 0, 0, 0));
}

hr.dashfade1 {
	border-top: 1px dashed #8c8b8b;
}