@font-face {font-family:'butlermedium'; src:url('/fonts/butler_medium-webfont.woff2') format('woff2'),url('/fonts/butler_medium-webfont.woff') format('woff'); font-weight:normal; font-style:normal;}

html {
    /* COLOURS */
    --white: #fff;
    --black: #000;
    --mainBrandColour: #002F7F;
    --green: #45BE8B;
    --blue: #3F8EFC;
    --lightBlue: #EFF7FD;
    --grey: #777781;
    --darkGrey: #707070;
    /* FONTS */
    --baseFont: 'Roboto',sans-serif;
    --serifFont: 'butlermedium',serif;
    --fontSize12: 0.75rem;
    --fontSize14: 0.875rem;
    --fontSize15: 0.938rem;
    --fontSize16: 1rem;
    --fontSize17: 1.063rem;
    --fontSize18: 1.125rem;
    --fontSize20: 1.25rem;
    --fontSize22: 1.375rem;
    --fontSize24: 1.5rem;
    --fontSize25: 1.563rem;
    --fontSize26: 1.625rem;
    --fontSize28: 1.75rem;
    --fontSize30: 1.875rem;
    --regularFontWeight: 400;
    --boldFontWeight: 700;
    /* Borders */
    --borderRadius20: 20px;
    /* TRANSITIONS */
    --transition-default: all 0.3s ease-out;
    /* Media Queries */
    --mobile: max-width:576px;
    --tablet: max-width:768px;
    --desktop: max-width:992px;
}

* {box-sizing:border-box; padding:0; margin:0; min-height:0; min-width:0;}
html {scroll-behavior:smooth;}
body {color:var(--darkGrey); font-family:var(--baseFont); font-weight:var(--regularFontWeight); font-size:var(--fontSize18); line-height:26px;}

/* Grid */
.container {width:100%; max-width:1340px; margin:0 auto; padding:0 28px; display:grid; grid-template-rows:repeat(1, 1fr); grid-template-columns:repeat(12, 1fr); gap:1.5rem;}
.container.container-narrow {max-width:960px;}
.container.container-fluid {padding:0; max-width:100%;}
.container .col-12,
.container .col-10,
.container .col-9,
.container .col-8,
.container .col-7,
.container .col-6,
.container .col-5,
.container .col-4,
.container .col-3 {
    grid-column: 1/-1;
}
.container.no-pad {padding:0;}

/* Padding + Margins */
.pt-0 {padding-top:0!important;}
.pt-3 {padding-top:1rem!important;}
.pt-4 {padding-top:1.5rem!important;}
.pt-5 {padding-top:3rem!important;}

.pb-0 {padding-bottom:0!important;}
.pb-3 {padding-bottom:1rem!important;}
.pb-4 {padding-bottom:1.5rem!important;}
.pb-5 {padding-bottom:3rem!important;}

.mt-0 {margin-top:0!important;}
.mb-0 {margin-bottom:0!important;}
.mb-3 {margin-bottom:1rem!important;}
.mb-4 {margin-bottom:1.5rem !important;}
.mb-5 {margin-bottom:3rem!important;}
.mt-3 {margin-top:1rem!important;}
.mt-4 {margin-top:1.5rem !important;}
.mt-5 {margin-top:3rem!important;}

.section-narrow .container .col-8 {grid-column:1 / span 12;} 

/* Titles + Text */
.level1-title {color:var(--mainBrandColour); font-family:var(--serifFont); font-size:2.5rem; line-height:2.8rem; margin:0 0 2rem 0;}
.level2-title {color:var(--mainBrandColour); font-family:var(--serifFont); font-size:var(--fontSize30); line-height:2rem; margin:0 0 2rem 0;}
.level3-title {color:var(--blue); font-size:var(--fontSize20); line-height:1.75rem; margin:0 0 0.375rem 0; font-weight:var(--boldFontWeight);}
main p {margin:0 0 1.2rem 0;}
main ul {margin:0 0 1.2rem 1rem;}
main ul li {margin:0 0 0.4rem 0;}

/* Images */
img.img-fit {max-width:100%; max-height:100%; min-width:100%; min-height:100%; object-fit:cover; object-position:50% 50%;}
img.img-fluid {width:100%; max-width:100%; height:auto;}
img.img-corners {border-radius:var(--borderRadius20);}
img.img-square {aspect-ratio:1/1;}

/* Sections */
main {min-height:500px;}
section {padding:80px 0;}

/* Alignment */
.text-center {text-align:center;}
.text-right {text-align:right;}

/* Table */
.table-row {display:flex; flex-wrap:wrap; background:var(--lightBlue); margin-bottom:0.5rem; justify-content:space-between; border-radius:var(--borderRadius20);}
.table-row > div {padding:1rem; flex:0 0 100%;}
.table-row > div:last-child {font-weight:var(--boldFontWeight); padding-top:0;}

/* Links */
a {color:var(--mainBrandColour); text-decoration:none; transition:var(--transition-default);}
a:hover {color:var(--green);}
button {transition:var(--transition-default);}
a.reference {font-size:var(--fontSize12); display:inline-block; line-height:1.5;}

/* Buttons */
.btn {background:var(--white); font-size:var(--fontSize16); border:1px solid var(--blue); color:var(--blue); border-radius:var(--borderRadius20); padding:0.7rem 2rem 0.7rem 2rem; display:inline-block; line-height:1.25rem; border:none; cursor:pointer; white-space:nowrap;}
.btn:hover {color:var(--white); background:var(--blue);}
.btn-rev {color:var(--white);}
.btn-rev:hover {border-color:var(--blue);}
.btn-outline {background-color:transparent; border:1px solid var(--white);}

.btn-primary {background:var(--blue); color:var(--white);}
.btn-primary:hover {background:var(--mainBrandColour); color:var(--white);}
.btn-primary.btn-outline {color:var(--blue); background-color:transparent; border:1px solid var(--blue);}
.btn-primary.btn-outline:hover {color:var(--white); background-color:var(--mainBrandColour); border:1px solid var(--mainBrandColour);}

/* iFrame */
.video-container {position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}


@media (min-width:576px) {
    .section-narrow .container .col-8 {grid-column:2 / span 10;} 
    /* Table */
    .table-row {flex-wrap:nowrap;}
    .table-row > div {flex:0 0 auto;}
    .table-row > div:last-child {text-align:right; padding-top:1rem;}
}

@media (min-width:768px) {
    .container .col-12 {grid-column:1/-1;}
    .container .col-10 {grid-column:auto / span 10;}
    .container .col-9 {grid-column:auto / span 9;}
    .container .col-8 {grid-column:auto / span 8;}
    .container .col-8.col-8-offset-2 {grid-column:2 / span 10;}
    .container .col-7.col-7-offset-2 {grid-column:3 / span 8;}
    .container .col-7 {grid-column:auto / span 7;}
    .container .col-6 {grid-column:auto / span 6;}
    .container .col-5 {grid-column:auto / span 5;}
    .container .col-4 {grid-column:auto / span 4;}
    .container .col-3 {grid-column:auto / span 3;}
    .container .order-1 {order:1;}
    .container .order-2 {order:2;}
    .section-narrow .container .col-8 {grid-column:3 / span 8;}
}