/*=============================================>>>>>
= 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); }