/*=============================================>>>>>
= Body font colour =
===============================================>>>>>*/
/*=============================================>>>>>
= Brand colours =
===============================================>>>>>*/
/*=============================================>>>>>
= Additional =
===============================================>>>>>*/
/*=============================================>>>>>
= Black/white =
===============================================>>>>>*/
/*=============================================>>>>>
= User noticiation colours =
===============================================>>>>>*/
/*Clean up*/
.bg_primary { background: red; }

.bg_secondary { background: red; }

.bg_highlight { background: var(--highlight); }

.color_primary { color: red; }

.color_secondary { color: var(--secondary); }

/*=============================================>>>>>
= Breakpoints =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Up =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Down =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Between =
===============================================>>>>>*/
/*=============================================>>>>>
= Placeholder =
===============================================>>>>>*/
/*=============================================>>>>>
= Animations =
===============================================>>>>>*/
/*=============================================>>>>>
= Ellipsis =
===============================================>>>>>*/
/*=============================================>>>>>
= Position =
===============================================>>>>>*/
/*=============================================>>>>>
= Clearfix =
===============================================>>>>>*/
/** Convert font-size from px to rem with px fallback  @param $size - the value in pixel you want to convert  e.g. p {@include fontSize(12px);}  */
.col-one { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-one > * { width: calc(100% / 1 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 699px) { .col-one > * { width: 100%; box-sizing: inherit; } }

.col-two { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-two > * { width: calc(100% / 2 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 699px) { .col-two > * { width: 100%; box-sizing: inherit; } }

.col-three { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-three > * { width: calc(100% / 3 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 1079px) { .col-three > * { width: calc(100% / 2 - 20px); } }
@media (max-width: 699px) { .col-three > * { width: 100%; box-sizing: inherit; } }

.col-four { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-four > * { width: calc(100% / 4 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 1079px) { .col-four > * { width: calc(100% / 2 - 20px); } }
@media (max-width: 699px) { .col-four > * { width: 100%; box-sizing: inherit; } }

/* ------------------------------------------------------ Fonts
------------------------------------------------------ */
/*=============================================>>>>>
= Typography Mixins and Variables =
===============================================>>>>>*/
/* generated with grunt-sass-globbing */
/* generated with grunt-sass-globbing */
/*=============================================>>>>>
= Breakpoints =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Up =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Down =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Between =
===============================================>>>>>*/
/*=============================================>>>>>
= Placeholder =
===============================================>>>>>*/
/*=============================================>>>>>
= Animations =
===============================================>>>>>*/
/*=============================================>>>>>
= Ellipsis =
===============================================>>>>>*/
/*=============================================>>>>>
= Position =
===============================================>>>>>*/
/*=============================================>>>>>
= Clearfix =
===============================================>>>>>*/
/** Convert font-size from px to rem with px fallback  @param $size - the value in pixel you want to convert  e.g. p {@include fontSize(12px);}  */
.col-one { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-one > * { width: calc(100% / 1 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 699px) { .col-one > * { width: 100%; box-sizing: inherit; } }

.col-two { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-two > * { width: calc(100% / 2 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 699px) { .col-two > * { width: 100%; box-sizing: inherit; } }

.col-three { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-three > * { width: calc(100% / 3 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 1079px) { .col-three > * { width: calc(100% / 2 - 20px); } }
@media (max-width: 699px) { .col-three > * { width: 100%; box-sizing: inherit; } }

.col-four { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-four > * { width: calc(100% / 4 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 1079px) { .col-four > * { width: calc(100% / 2 - 20px); } }
@media (max-width: 699px) { .col-four > * { width: 100%; box-sizing: inherit; } }

footer .footer-main .inner .wrap .contact-details { width: auto; }

footer .footer-main .wrap .inner .footer-logo a { width: 247px; height: 91px; }
footer .footer-main .wrap .inner .footer-logo a svg path { fill: white; }

/*=============================================>>>>>
= Breakpoints =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Up =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Down =
===============================================>>>>>*/
/*=============================================>>>>>
= Media Between =
===============================================>>>>>*/
/*=============================================>>>>>
= Placeholder =
===============================================>>>>>*/
/*=============================================>>>>>
= Animations =
===============================================>>>>>*/
/*=============================================>>>>>
= Ellipsis =
===============================================>>>>>*/
/*=============================================>>>>>
= Position =
===============================================>>>>>*/
/*=============================================>>>>>
= Clearfix =
===============================================>>>>>*/
/** Convert font-size from px to rem with px fallback  @param $size - the value in pixel you want to convert  e.g. p {@include fontSize(12px);}  */
.col-one { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-one > * { width: calc(100% / 1 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 699px) { .col-one > * { width: 100%; box-sizing: inherit; } }

.col-two { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-two > * { width: calc(100% / 2 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 699px) { .col-two > * { width: 100%; box-sizing: inherit; } }

.col-three { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-three > * { width: calc(100% / 3 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 1079px) { .col-three > * { width: calc(100% / 2 - 20px); } }
@media (max-width: 699px) { .col-three > * { width: 100%; box-sizing: inherit; } }

.col-four { display: flex; flex-flow: wrap; margin: 0 -10px; }
.col-four > * { width: calc(100% / 4 - 20px); padding: 10px 10px; box-sizing: content-box; }
@media (max-width: 1079px) { .col-four > * { width: calc(100% / 2 - 20px); } }
@media (max-width: 699px) { .col-four > * { width: 100%; box-sizing: inherit; } }

header.header .bottom .wrap .brand { position: relative; z-index: 10; }
header.header .bottom .wrap .brand:before { content: ''; background: white; position: absolute; top: 50%; transform: translateY(-50%); left: -20px; width: 125px; height: 125px; border-radius: 200px; }
@media (max-width: 1079px) { header.header .bottom .wrap .brand:before { display: none; } }
header.header .bottom .wrap .brand svg { width: 287px; height: 104px; z-index: 2; }
@media (max-width: 1079px) { header.header .bottom .wrap .brand svg { width: 154px; height: 48px; } }
header.header .bottom .wrap .brand svg path { transition: ease-in-out 0.3s fill; }
header.header .bottom .wrap .brand:hover svg path { fill: var(--primary); }
header.header .bottom .wrap .nav-wrap nav.primary-navigation > ul > li > ul { background: white; }
header.header .bottom .wrap .nav-wrap nav.primary-navigation > ul > li > ul li a { color: var(--textcolor); }