@charset "utf-8";
/* CSS Document */

:root {
    /* brand colours */    
    --navy: #2c384a;
    --green: #4d7861;
    --mid-blue: #5d779d;
    /* brand colours - accessible with black/navy */
    --lime: #b1f0cf;
    --light-blue: #90b6f0;
    --orange: #f0ae81;
    --light-grey: #eee;
    
    /* utility colours */
    --mid-grey: #5c5e6e;
    --apricot: #efae81;
	--apricot-light: rgba(240,174,129,0.5);
    
    /* usage:
         color: var(--navy);
    */
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 100;
    src: url('../fonts/GilroyThin/font.woff2') format('woff2'), url('../fonts/GilroyThin/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 200;
    src: url('../fonts/GilroyUltraLight/font.woff2') format('woff2'), url('../fonts/GilroyUltraLight/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 300;
    src: url('../fonts/GilroyLight/font.woff2') format('woff2'), url('../fonts/GilroyLight/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 400;
    src: url('../fonts/GilroyRegular/font.woff2') format('woff2'), url('../fonts/GilroyRegular/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 500;
    src: url('../fonts/GilroyMedium/font.woff2') format('woff2'), url('../fonts/GilroyMedium/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 600;
    src: url('../fonts/GilroySemiBold/font.woff2') format('woff2'), url('../fonts/GilroySemiBold/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 700;
    src: url('../fonts/GilroyBold/font.woff2') format('woff2'), url('../fonts/GilroyBold/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 800;
    src: url('../fonts/GilroyExtraBold/font.woff2') format('woff2'), url('../fonts/GilroyExtraBold/font.woff') format('woff');
}
@font-face {
    font-family: 'Gilroy';
    font-weight: 900;
    src: url('../fonts/GilroyBlack/font.woff2') format('woff2'), url('../fonts/GilroyBlack/font.woff') format('woff');
}
@font-face {
    font-family: 'GilroyHeavy';
    font-weight: 900;
    src: url('../fonts/GilroyHeavy/font.woff2') format('woff2'), url('../fonts/GilroyHeavy/font.woff') format('woff');
}

body {
	font-family: 'Gilroy', sans-serif;
    font-size: 18px;
    font-weight: 300;
}
p.lead {
	font-size: 24px;
	font-weight: 400;
}
a {
	text-decoration: underline;
	color: var(--mid-blue);
}
h4 {
	font-size: 20px;
	font-weight: 600;
}

/*NAVIGATION*/
.nav-container {
	margin: 0;
	padding:0;
	background-color: var(--light-grey);
	/*position: absolute; <- pushes nav menu up into banner */
}
.nav-row {
	margin: 0!important;
	padding: 0!important;
}
#rh-nav {
	transition: top 1s;
	/*margin-top: 4rem;*/
	margin-bottom: -26rem;	
}
.nav {
	-webkit-box-shadow: -6px 7px 5px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: -6px 7px 5px 0px rgba(0,0,0,0.45);
	box-shadow: -6px 7px 5px 0px rgba(0,0,0,0.45);
}
.nav a.nav-link, .nav a {
	color: #fff;
	text-decoration: none;
}
.nav a.nav-link:hover, .nav a:hover {
	color: var(--light-blue);
	text-decoration: none;
}
.nav-pills {
	font-weight: 600;
	text-align: right;
	margin-right: 30px;
	padding-right: 20px;
	padding-bottom: 30px;
}
.nav-pills > .nav-link {
    position: relative;
    top: 2rem;
}
.nav-link {
	background-color: var(--navy-blue);
	margin-bottom: 8px;
	font-size: 16px;
}

.offset-anchor {
    /*padding-top: 156px;
    margin-top: -160px;*/
}

.wt-100 {
    font-weight: 100;
}
.wt-200 {
    font-weight: 200;
}
.wt-300 {
    font-weight: 300;
}
.wt-400 {
    font-weight: 400;
}
.wt-500 {
    font-weight: 500;
}
.wt-600 {
    font-weight: 600;
}
.wt-700 {
    font-weight: 700;
}
.wt-800 {
    font-weight: 800;
}
.wt-900 {
    font-weight: 900;
}
.wt-heavy {
    font-family: 'GilroyHeavy', sans-serif;
    font-weight: 900;
}
.mega-48 {
    font-size: 48px;
}
.mega-60 {
    font-size: 60px;
}

.banner, .jumbotron {
    background-color: var(--light-grey);
    padding: 0 10% 0;
}
.banner .form-control,
.search .form-control {
    height: calc(1.5em + 2px);
    border-radius: 0;
    border: none;
}
.banner .logo {
    max-height: 100px;
}
.banner .logo img {
    max-height: 60px;
}

.jumbotron h1 {
    font-size: 60px;
    font-weight: 700;
    color: var(--navy);
}
.jumbotron .lead {
    font-size: 2.25rem;
    font-weight: 400;
}

/* backgrounds - brand colours */
.bg-navy {
    color: #fff !important;
    background-color: var(--navy);
}
.bg-green {
    color: #fff !important;
    background-color: var(--green);
}
.bg-mid-blue {
    color: #fff !important;
    background-color: var(--mid-blue);
}
/* backgrounds - brand colours (accessible) */
.bg-lime {
    background-color: var(--lime);
}
.bg-light-blue {
    background-color: var(--light-blue);
}
.bg-orange {
    background-color: var(--orange);
}
/* backgrounds - utility colours */
.bg-apricot {
    background-color: var(--apricot);
}
.bg-apricot-light {
	background-color: var(--apricot-light);
}
.bg-black {
    background-color: #000;
}
.bg-light-grey {
    background-color: var(--light-grey);
}
.bg-white {
    background-color: #fff;
}

.left-tile {
    padding-right: 15px;
    margin-right: 15px;
}
.right-tile {
    padding-left: 15px;
    margin-left: 15px;
}
.br-8-grey {
    border-right: 8px solid var(--light-grey);
}
.bl-8-grey {
    border-left: 8px solid var(--light-grey);
}

.swatch {
    width: 100%;
    min-height: 160px;
    margin-bottom: 2rem;
}
.swatch:hover {
	/*background-color: #5D779D;*/
}
@media (max-width: 767.98px) {
	.swatch {
        margin-bottom: 0.25rem;
    }
}

.b-top-1 {
    border-top: 1px solid #000;
}
.b-right-1 {
    border-right: 1px solid #000;
}
.b-bottom-1 {
    border-bottom: 1px solid #000;
}
.b-left-1 {
    border-left: 1px solid #000;
}
.b-all-1 {
    border: 1px solid #000;
}
.capped-hr-top {
	min-height: 0.25rem;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
    border-right: 1px solid #000;
}
.capped-hr-btm {
	min-height: 0.25rem;
	border-left: 1px solid #000;
    border-right: 1px solid #000;
}

.hl-example {
    font-size: 2rem;
    font-weight: 800;
}
.highlight-orange-light {
    background: linear-gradient(0deg, transparent 0%, transparent 6%, var(--apricot-light) 6%, var(--apricot-light) 44%, transparent 44%, transparent 100%);
    padding: 0.5rem 0.6rem;
    margin-left: -0.25rem;
}
.highlight-orange {
    background: linear-gradient(0deg, transparent 0%, transparent 6%, var(--apricot) 6%, var(--apricot) 44%, transparent 44%, transparent 100%);
    padding: 0.5rem 0.6rem;
    margin-left: -0.25rem;
}
.highlight-light-blue {
    background: linear-gradient(0deg, transparent 0%, transparent 6%, #c7dbf8 6%, #c7dbf8 44%, transparent 44%, transparent 100%);
    padding: 0.5rem 0.6rem;
    margin-left: -0.25rem;
}
.highlight-lime {
    background: linear-gradient(0deg, transparent 0%, transparent 6%, #d0f6e2 6%, #d0f6e2 44%, transparent 44%, transparent 100%);
    padding: 0.5rem 0.6rem;
    margin-left: -0.25rem;
}
.highlight-mid-blue {
    background: linear-gradient(0deg, transparent 0%, transparent 6%, #ced6e2 6%, #ced6e2 44%, transparent 44%, transparent 100%);
    padding: 0.5rem 0.6rem;
    margin-left: -0.25rem;
}

.btn {
    font-weight: 700;
    border-radius: 0;
}

/* -------------------- show side nav only at 1650px or wider -------------------- */
@media all and (min-width: 1650px) {
    .d-1650-block {
        display: block !important;
    }
}

/* -------------------- unstick header if vertical space lacking -------------------- */
@media all and (max-height: 768px) {
    .banner {
        position: static!important;
    }
}