/*======================================
  General
======================================*/
body {
    border-bottom: 10px solid var(--theme);
}

.button {
    text-transform: uppercase;
}

.block {
    padding: 10px 0;
}

/* class which is used by client in the RTE editor and added to a H2 for extra padding */
.alternative {
    padding-top:30px;
}

.block.theme-bg + .block.theme-bg, 
.block.theme-alt-bg + .block.theme-alt-bg, 
.block.dark-bg + .block.dark-bg, .block.white-bg + .block.white-bg, 
.block.gray-bg + .block.gray-bg {
    padding-top: 10px;
}
@media only screen and (max-width: 759px) {
    .block.theme-bg + .block.theme-bg,
    .block.theme-alt-bg + .block.theme-alt-bg,
    .block.dark-bg + .block.dark-bg, 
    .block.white-bg + .block.white-bg,
    .block.gray-bg + .block.gray-bg {
        padding-top: 10px;
    }
}

.block__background {
    background-size: cover;
    background-position: top;
    background-color:#ffffff;
}


@media only screen and (min-width: 1280px) {
    .block__background {
        background-size: 100% auto;
        background-position: top;
    }
}

.pre-head {
    margin-bottom: 0.2em;
}

.pre-top {
    background-color: transparent;
    box-shadow: none !important;
    border-bottom: 0;
}
.pre-top .container {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(55,55,55,0.1);
}

.top {
    background-color: transparent !important;
    box-shadow: none !important ;
}

.top-inner {
    background-color: #ffffff;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0 0 10px rgba(0,0,0,10%);
}

/* footer */

.footer {
    position: relative;
    overflow:hidden;
}
.footer::before {
    content: " ";
    position: absolute;   
    top:-30px;
    width: 100%;
    bottom:-30px;
    background-image: url(/images/bg-footer.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity:0.5;
}

.footer div[class*="col-"] {
    margin-bottom:20px;
}
@media only screen and (min-width: 992px) {
    .footer div[class*="col-"] {
        margin-bottom: 0;
    }

    .footer .footer-grid {
        padding-bottom: 20px;
    }

    .text-center .social-nav {
        z-index: 1;
        position: relative;
    }
}

.footer-item.footer-item--social-links {
    margin: 0;
}

.footer-item,
.footer-item .navigation {
    text-align: left;
}

.footer__bottom-info {
    z-index: 1;
    position: relative;
}
.footer__bottom-info a {
    color:inherit;
    text-decoration: none;
}

.footer .navigation ul li a {
    font-weight: 400;
    color:#fff;
}

/* navigation */

@media only screen and (min-width: 992px) {
    .main-nav__ul--first > .main-nav__li.selected > .main-nav__a {
        position: relative;
    }
    .main-nav__ul--first > .main-nav__li.selected > .main-nav__a:after {
        content: " ";
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 5px;
        background-color: var(--theme);
    }
}

.main-nav__a .fa-chevron-down, .top--light .main-nav__a .fa-chevron-right {
    color: var(--theme) !important;
}

.scroll .main-nav > ul > li > .main-nav__a i.fa-chevron-down {
    color: var(--theme) !important;
}

.main-nav__ul--first > .main-nav__li > .main-nav__a {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.main-nav__ul {
    border-radius: 0px 0px 4px 4px;
}

.main-nav__ul--third {
    border-radius: 0px 4px 4px 4px;
}

@media only screen and (max-width: 992px) {
    .main-nav__a .expand i {
        color: var(--theme);
    }

    .main-nav .main-nav__a {
        border-top: 1px solid rgba(0, 0, 0, 0.04);
    }

    .main-nav .main-nav__ul--second .main-nav__a {
        border-top: 1px solid rgba(255, 255, 255, 1);
    }
}

@media only screen and (min-width: 992px) {
    .main-nav__ul--second, 
    .main-nav__ul--third {
        width: 330px; 
    }
}

.top--light .main-nav__li:hover {
    background: var(--background-light);
}

/* subtext in navitems*/
.main-nav__a {
    white-space: normal;
}

.main-nav__a span {
    display: none;
}

@media only screen and (min-width: 992px) {
    .main-nav__a span {
        display: block;
        color: #b7b7b7;
        font-size: 0.85rem;
    }
}

.button, input[type="submit"], input[type="button"] {
    padding: 1.35em 2.5em;
}

.umbraco-forms-form textarea {
    height:100px !important;
}

.umbraco-forms-field.dataconsent label.umbraco-forms-label {
    display: none;
}


/*======================================
  Widget: Hero
======================================*/
.hero .pre-head {
    text-transform: none;
    font-size: 1.1rem;
    letter-spacing: 0;
}

.hero__inner h1, 
.hero__inner h2 {
    line-height: 1.2;
}

#content > .hero:first-child .hero__video {
    top: 0 !important;
}

.top.top--scroll-bg + #content > .hero:first-child {
    padding: calc(var(--header-height) + 80px) 0 80px;
}

/* for 'Inspiration page' above code doesn't work because .hero:first-child cannot match here: */
#content > template#highlighted-items-overview + .hero {
    padding: calc(var(--header-height) + 80px) 0 80px;
}

/*======================================
  Widget: Header
======================================*/
.grid-item--header .pre-head {
    text-transform: none;
    font-size: 1.1rem;
    color: var(--theme);
    letter-spacing: 0;
}

.grid-item--header .button-wrap {
    width: 100%;
    justify-content: flex-start;
}

.grid-item--header .button-wrap.button-center {
    justify-content: center;
}

.grid-item--header div.text-big p {
    font-size: 1rem;
    font-weight: var(--body-font-weight);
}

.grid-item--header p:last-of-type + ul,
.grid-item--header p:last-of-type + ol {
    margin-bottom: 1.5em;
}

.grid-item--header div.text-big ul,
.grid-item--header div.text-big ol {
    font-size: 1rem;
    font-weight: var(--body-font-weight);
    margin-bottom: 1.5em;
}

@media only screen and (min-width: 759px) {
    .grid .col-66 .grid-item--header {
        padding-right: 40px;
    }
}

/*======================================
  Widget: Navigation
======================================*/

.grid-item--links.grid-item--boxed {
    background-color: var(--background-light);
    border-radius: 4px;
    border: 0;
}

.navigation ul li a {
    font-weight: 700;
}

.grid-item--links h3 {
    text-transform: uppercase;
}

.h6.navigation-link-heading {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.h6.navigation-link-heading a {
    position: relative;
    padding-right: 15px;
    display:inline-block;
}

.h6.navigation-link-heading a:after {
    content:" ";
    position: absolute;
    right:0;
    width:6px;
    height:9px;
    background-image: url(/images/icon-arrow-right-orange.svg);
    background-repeat: no-repeat;
    background-size: 6px 9px;
    top: 0.4rem;
}

/*======================================
  Widget: Pod
======================================*/
.pod {
    border-radius: 4px;
}

.pod.grid-item--boxed {
    border: 0;
    box-shadow: none;
    background-color: var(--background-light);
}

.pod.grid-item--boxed .pod__text {
    background-color: var(--background-light);
    border-radius: 0 0 4px 4px;
}

.pod h3 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-h6);
}

.pod h3 a {
    color: var(--heading-dark);
    position:relative;
}

.pod h3 a:hover:after {
    content:" ";
    position: absolute;
    right:-12px;
    width:6px;
    height:9px;
    background-image: url(/images/icon-arrow-right-orange.svg);
    background-repeat: no-repeat;
    background-size: 6px 9px;
    bottom: 0.3rem;
}

.pod p {
    color: #b7b7b7;
    font-size: 0.9rem;
}

.pod .pod__image {
    border-radius: 4px 4px 0 0;
}

.pod .pod__image i {
    background: -webkit-linear-gradient(#db7500, #ffcb00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pod .pod__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 0 var(--grid-gutter);
    margin: 0;
    min-height:5.5em;
}
.pod .pod__text h3 {
    padding:0;
    margin:0;
}

.pod.grid-item--boxed .pod__text {
    margin: 0;
    padding: 0 var(--grid-gutter);
}


/*======================================
  Widget: Pod-Product: extra classes
======================================*/
.block .pod.pod-product .pod__text .pod__subtitle {
    color: #b7b7b7;
    font-weight: 400;
    font-size: 0.9rem;
}

.block .pod.pod-product .pod__image {
    position: relative;
}

.block .pod.pod-product .pod__image img {
    width: calc(100% - 8%);
    padding-top: 4%;
    padding-bottom: 4%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
}

.block .pod.pod-product .pod__image::after {
    content: "";
    position: absolute;
    left: 4%;
    bottom: 4%;
    width: 90px;
    height: 72px;
    background-image: url(/images/product-logo.png);
    background-repeat: no-repeat;
}

/*======================================
  Widget: Text&images (split)
======================================*/
.split__image {
    position:relative;
}

.split__image:after {
    content: " ";
    position: absolute;
    width: 75px;
    height: calc(100% + 2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: -1px;
    bottom: -1px;
}

.split-wrap-alt .split__image:after {
    content: none ;
}

.split--text-left .split__image:after {
    left: 0;
}

.split--text-right .split__image:after {
    right: 0;
}

/* MUST DO!!!: to be able to stretch a svg as a backgroundimage in a pseudo element: add: preserveAspectRatio="none" in the svg file in the svg tag */

/* gray*/
.split-wrap.gray-bg .split--text-left .split__image:after {
    background-image: url(/images/swirl-left-grey.svg);
}
.split-wrap.gray-bg .split--text-right .split__image:after {
    background-image: url(/images/swirl-right-grey.svg);
}
/* white*/
.split-wrap.white-bg .split--text-left .split__image:after {
    background-image: url(/images/swirl-left-white.svg);
}
.split-wrap.white-bg .split--text-right .split__image:after {
    background-image: url(/images/swirl-right-white.svg);
}
/* dark*/
.split-wrap.dark-bg .split--text-left .split__image:after {
    background-image: url(/images/swirl-left-dark.svg);
}
.split-wrap.dark-bg .split--text-right .split__image:after {
    background-image: url(/images/swirl-right-dark.svg);
}
/* theme*/
.split-wrap.theme-bg .split--text-left .split__image:after {
    background-image: url(/images/swirl-left-theme.svg);
}
.split-wrap.theme-bg .split--text-right .split__image:after {
    background-image: url(/images/swirl-right-theme.svg);
}

.split .pre-head {
    text-transform: none;
    font-size: 1.1rem;
    color: var(--theme);
    letter-spacing:0;
}

.split p,
.split ul,
.split ol {
    font-size: 1rem;
    font-weight: var(--body-font-weight);
}

.split .split__text .split__text-inner {
     max-width: 530px;
}

.split--text-right.split--full .split__text {
    justify-content: flex-start;
}

.split--text-left.split--full .split__text {
    justify-content: flex-end;
}

@media only screen and (max-width: 768px) {
    .split {
        min-height: 0 !important;
    }

    .split .split__text .split__text-inner {
        padding-top: calc(var(--grid-gutter) *2);
        padding-bottom: calc(var(--grid-gutter) *2);
    }

    .split .hide-image-mobile {
        display: none;
    }
}

/*======================================
  Widget: Quote
======================================*/
.grid-item--quote.grid-item--boxed {
    box-shadow: none;
    border-radius: 4px;
}

.grid-item--quote blockquote::before {
    top: -1.0em;
    font-size: 2.5rem;
}
.grid-item--quote blockquote {
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 2.5em 0 0;
}

.grid-item--quote blockquote::before {
    top: -1.2em;
}

.grid-item--quote footer div {
    color: var(--theme);
    letter-spacing: 0;
}

.grid-item--quote footer div div {
    color: #b7b7b7;
}

/*======================================
  Widget: Card
======================================*/
.card {
    border-bottom: 10px solid var(--theme);
    border-radius: 5px 5px 0 0;
}

.card a:hover{
    text-decoration: none;
}

.card .card__bg {
    border-radius: 5px 5px 0 0;
}

.card .card__text-inner span {
    color: var(--theme);
    font-weight: var(--font-weight-bold);
    font-size: 0.875rem;
}

.card .card__text-inner span.card__header {
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/*======================================
  Widget: Text
======================================*/

.grid-item--text h5,
.grid-item--text .h5
{
    letter-spacing:0.03em;
}

/*======================================
  Widget: Breadcrumbs
======================================*/
.breadcrumbs-block {
    padding: 25px 0;
}

ul.breadcrumbs {
    font-weight: 400;
    color: #b7b7b7;
}

ul.breadcrumbs li {
    font-size: 0.9rem;
}


/*======================================
  Widget: Umbraco Form + block.form
======================================*/
.grid-item--form form label,
.grid-item--form .form-label,
.block.form form label,
.block.form .form-label {
    margin-bottom: 0;
    letter-spacing: 0;
}

.grid-item--form .umbraco-forms-form fieldset,
.block.form .umbraco-forms-form fieldset {
    padding: 0;
    margin: 0 0 1.5em 0;
    border: none !Important;
}

.grid-item--form .umbraco-forms-field,
.block.form .umbraco-forms-field,
{
    padding-bottom: 8px;
}

.grid-item--form .umbraco-forms-field.fileupload,
.block.form .umbraco-forms-field.fileupload {
    padding: 15px 0 0 0;
}

label.umbraco-forms-label {
    dxxisplay: none !important;
}

::-webkit-input-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

::-moz-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

:-ms-input-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

:-moz-placeholder {
    font-style: normal !important;
    color: #bdbdbd;
}

.grid-item--form .umbraco-forms-form .umbraco-forms-field-wrapper input.text,
.grid-item--form .umbraco-forms-form .umbraco-forms-field-wrapper textarea,
.block.form .umbraco-forms-field-wrapper input.text,
.block.form .umbraco-forms-field-wrapper textarea {
    max-width: none !important;
    padding: 13px 20px !important;
    display: block;
    width: 100% !important;
    border-radius: 50px;
}

.grid-item--form .umbraco-forms-form .umbraco-forms-field-wrapper input.text,
.block.form .umbraco-forms-form .umbraco-forms-field-wrapper input.text {
    border-radius: 50px;
}

.grid-item--form .umbraco-forms-form .umbraco-forms-field-wrapper textarea,
.block.form .umbraco-forms-form .umbraco-forms-field-wrapper textarea {
    border-radius: 25px;
}

.grid-item--form .umbraco-forms-form .field-validation-error,
.block.form .umbraco-forms-form .field-validation-error {
    padding-left: 0;
    margin: 0;
}

.grid-item--form .umbraco-forms-submitmessage,
.block.form .umbraco-forms-submitmessage {
    margin-top: 1em;
    display:block;
    font-weight: bold;
}

.grid-item--form .help-block,
.block.form .help-block {
    padding: 1em 0 5px 0;
}

.grid-item--form .umbraco-forms-form .umbraco-forms-navigation,
.block.form .umbraco-forms-form .umbraco-forms-navigation {
    padding: 0 0 1em 0em;
}

/* css for input type file*/
input[type=file] {
    font-size: 1rem;
}

input[type=file]::file-selector-button {
    border: 2px solid #6c5ce7;
    padding: .2em .4em;
    border-radius: 50px;
    height: 50px;
    background-color: var(--background-light);
    transition: 1s;
    box-sizing: border-box;
    border: 1px solid rgb(187, 187, 187);
    padding: 13px 20px !important;
    font-size: 1rem;
    color: var(--text-dark);
    font-family: var(--body-font);
}


input[type=file]::file-selector-button:hover {
    background-color: #fff;
    border: 1px solid #666;
    outline: none;
    box-shadow: 0 0 6px rgba(var(--theme-rgb), 0.3);
}

.gray-bg input[type=file]::file-selector-button {
    background-color: #fff;
}


/*======================================
  Widget: Newsletter (in Footer)
======================================*/
.footer .newsletter {
    background-color: transparent !important;
    color: #ffffff !important;
    margin: 20px 0;
    padding: 0 0;
}

.footer .newsletter .newsletter__inner {
    text-align: left;
    padding:0 0;
}

.footer .newsletter .newsletter__inner h2 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-h6);
    margin-bottom: 1.1em;
}

.footer .text-big {
    font-weight: var(--text-big-font-weight);
    font-size: 0.9rem;
}

.footer .newsletter__disclaimer {
    color:rgba(255,255,255,0.4);
}

.footer-item--code  {
    position: relative;
}

.footer-item--code p {
    font-size: 0.875rem;
    padding: 10px 0 0.5em 0;
    line-height: 1.1em;
    position: relative;
    margin-bottom: 0;
}

#mc_embed_signup .indicates-required {
    text-align: left;
    font-size: 11px;
    margin-right: 0;
    display: none;
}

#mc_embed_signup form {
    padding: 10px 0 !important;
}

#mc_embed_signup .mc-field-group {
    width: 96%;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

#mc_embed_signup .mc-field-group label {
    padding-bottom: 3px;
    font-family: var(--body-font) !important;
    font-weight: 400 !important;
}

#mc_embed_signup .mc-field-group input {
    padding: 8px 0;
    text-indent: 0;
    border-radius: 50px;
    padding: 13px 20px !important;
    border: 0 !important;
    height: 50px !important;
    box-sizing: border-box;
}

#mc_embed_signup .mc-field-group input[type="email"] {
    margin: 0 0 10px 0 !important;
    height: 50px !important;
    box-sizing: border-box;
}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    margin: 0 0 1em 0;
    padding: 5px 10px;
    background-color: #e85c41 !important;
    color: #fff !important;
    font-size: 0.875rem !important;
    font-family: var(--body-font) !important;
    border-radius: 50px !important;
}

#mc_embed_signup .button {
    clear: both;
    transition: all 0.23s ease-in-out 0s;
    -webkit-appearance: none;
    line-height: 1;
    padding: 1em 2em;
    letter-spacing: 0.04em !important;
    font-size: 0.9rem !important;
    font-weight: var(--font-weight-bold) !important;
    transition: all 0.3s ease;
    border-width: 2px !important;
    border-style: solid;
    text-align: center;
    text-decoration: none !important;
    border-radius: var(--button-border-radius) !important;
    background: var(--theme) !important;
    color: var(--theme-contrast) !important;
    border-color: var(--theme) !important;
    font-family: var(--body-font) !important;
    height: 50px !important;
    box-sizing: border-box;
}

#mc_embed_signup .button:hover {
    background-color:var(--theme-darker) !important;
}



/*======================================
  Widget: Spacer
======================================*/
.desktop-spacer {
    display: none;
}
.mobile-spacer {
    display: block;
}

@media only screen and (min-width: 992px) {
    .desktop-spacer {
        display:block;
    }

    .mobile-spacer {
        display: none;
    }
}

.spacer--theme {
    background-color: var(--theme);
}
.spacer--theme-alt {
    background-color: var(--theme-alt);
}
.spacer--white {
    background-color: var(--white);
}
.spacer--background-dark {
    background-color: var(--background-dark);
}
.spacer--background-light {
    background-color: var(--background-light);
}
.spacer--gray {
    background-color: var(--background-light);
}
.spacer--dark {
    background-color: var(--background-dark);
}





/*======================================
  HistoryDetailPage
======================================*/
.history-item-collection {
    position: relative;
    padding: 0;
    margin-bottom: 80px;
}
@media only screen and (min-width: 992px) {
    .history-item-collection {
        margin-top: 40px;
    }
}

/*timeline*/ 
.history-item-collection .container .history-bg-timeline {
    position:absolute;
    top:0;
    bottom:0;
    width: 5px;
    margin-left:15px;
    height:100%;
    background-color: var(--theme);
}

.history-item-collection .container .history-bg-timeline::before,
.history-item-collection .container .history-bg-timeline::after {
    content: "";
    position: absolute;
    left: -11px;
    width: 26px;
    height: 26px;
    background-color: var(--theme);
    border-radius: 100px;
}

.history-item-collection .container .history-bg-timeline::before {
    top: 0;
}

.history-item-collection .container .history-bg-timeline::after {
    bottom: 0;
}

@media only screen and (min-width: 992px) {
    .history-item-collection .container .history-bg-timeline {
        left:0;
        right:0;
        margin-left: auto;
        margin-right: auto;
    }
}

/*end timeline*/ 

.history-item-collection .history-item {
    background-color: var(--background-light);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px;
    margin-left:50px;
    position: relative;
}

.history-item-collection .history-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 14px);
    width: 28px;
    height: 28px;
    border-radius: 5px;
    transform: translate(-50%) rotate(45deg);
    background: var(--background-light);
}

@media only screen and (min-width: 992px) {
    /* style for EVEN items*/
    .history-item-collection .history-item {
        padding: 45px;
        margin-left: auto;
        margin-right: 0;
        margin-bottom: 0;
        width: 47%;
        margin-top:-40px;
    }

    /* style for ODD items*/
    .history-item-collection .history-item:nth-child(2n) {
        margin-left: 0;
        margin-right: auto;
    }

    .history-item-collection .history-item:nth-child(2n)::before {
        right: -28px;
        left: auto;
    }
}

.history-item-collection .history-item .item-title {
    font-size: var(--font-size-h2);
    font-family: var(--heading-font);
    line-height: var(--heading-line-height);
    margin-bottom: 0.5rem;
    font-weight: var(--heading-font-weight);
    color: var(--heading-dark);
}

.history-item-collection .history-item .item-content {
    font-size: 1rem;
}

.history-item-collection .history-item .item-content p:last-child {
    margin-bottom: 0;
}


/*======================================
  FEED 
======================================*/
.block.feed.gray-bg {
    background-color:transparent;
}

.block.feed .box {
    background-color: transparent;
    background-color: var(--background-light);
    border-radius: 0px 0px 4px 4px;
    box-shadow: none;
}

.box .box__image img {
    border-radius: 5px 5px 0 0;
}

.block.feed .box .box__text {
    text-align: center;
    border-top: 10px solid var(--theme);
}

.block.feed .box .box__text h3 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-h6);
}

.block.feed .box .box__text h3 a {
    color: var(--heading-dark) !important;
    position: relative;
}

.block.feed .box .box__text h3 a:hover:after {
    content: " ";
    position: absolute;
    bottom: 0.2rem;
    right: -15px;
    width: 8px;
    height: 12px;
    background-image: url(/images/icon-arrow-right-orange.svg);
    background-repeat: no-repeat;
    background-size: 8px 12px;
}

.block.feed .box .box__text .box__meta {
    color: #b7b7b7;
    font-weight: 400;
    font-size: 0.9rem;
}

.block.feed .box .box__text p {
    color: #b7b7b7;
    font-size: 0.9rem;
}

/*======================================
  FEED/BOX items on Inspiration-Overview-Page - bit different overruling coding
======================================*/

.inspiration-overview-page .box {
    background-color: transparent;
    background-color: var(--background-light);
    border-radius: 4px 4px 4px 4px;
    box-shadow: none;
    position: relative;
}

.inspiration-overview-page .box .box__text {
    text-align: center;
    border-top: 10px solid var(--theme);
}

.inspiration-overview-page .box .box__text h3 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-h6);
}

.inspiration-overview-page .box .box__text h3 a {
    color: var(--heading-dark) !important;
    position: relative;
}

.inspiration-overview-page .box .box__text h3 a:hover:after {
    content: " ";
    position: absolute;
    bottom: 0.2rem;
    right: -15px;
    width: 8px;
    height: 12px;
    background-image: url(/images/icon-arrow-right-orange.svg);
    background-repeat: no-repeat;
    background-size: 8px 12px;
}

.inspiration-overview-page .box .box__text .box__meta {
    color: #b7b7b7;
    font-weight: 400;
    font-size: 0.9rem;
}

.inspiration-overview-page .box .box__text p {
    color: #b7b7b7;
    font-size: 0.9rem;
}


.inspiration-overview-page .box a:hover .box__text h3 span {
    position: relative;
}

.inspiration-overview-page .box a:hover .box__text h3 span:after {
    content: " ";
    position: absolute;
    bottom: 0.2rem;
    right: -15px;
    width: 8px;
    height: 12px;
    background-image: url(/images/icon-arrow-right-orange.svg);
    background-repeat: no-repeat;
    background-size: 8px 12px;
}

.inspiration-overview-page img {
    border-radius: 4px 4px 0px 0px;
}

/*======================================
  CARD items on Inspiration-Overview-Page - bit different overruling coding
======================================*/

.inspiration-overview-page .block .card .card__text-inner span.card__companyname {
    color: #ffffff;
    font-weight: 400;
}

.inspiration-overview-page .block .card .card__bg img {
    object-fit: cover;
    height: 100% !important;
    width: 100%;
    border-radius: 4px;
}

/*======================================
  POD items on Inspiration-Overview-Page - bit different overruling coding
======================================*/

.inspiration-overview-page .block .pod .pod__text .pod__subtitle {
    color: #b7b7b7;
    font-weight: 400;
    font-size: 0.9rem;
}

.inspiration-overview-page .block .pod .pod__image {
    position: relative;
}

.inspiration-overview-page .block .pod .pod__image::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 90px;
    height: 72px;
    background-image: url(/images/product-logo.png);
    background-repeat: no-repeat;
}

.inspiration-overview-page .block .pod .pod__image img {
    object-fit: contain;
    aspect-ratio: 1 / 1;
    width: calc(100% - 8%);
    padding-top: 4%;
    padding-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
}

/*======================================
  Inspiration-Overview-Page
======================================*/
.inspiration-overview-page .block {
    padding:25px 0;
}

.inspiration-overview-page h2 {
    font-size:1.8rem;
    border-bottom: 1px solid #c5c5c5;
    margin-bottom: 1em;
}

.inspiration-overview-page button.button--default {
    background-color: var(--background-dark);
    border-color: var(--background-dark);
}

.inspiration-overview-page button.button--default:hover {
    background-color: var(--theme);
    border-color: var(--theme);
}

/*======================================
  filters on Inspiration-Overview-Page
======================================*/

.inspiration-overview-page .filters-wrapper {
    background-color: var(--background-light);
    border-radius: 5px;
    padding: 35px;
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 992px) {
    .inspiration-overview-page .filters-wrapper {
        flex-direction: row;
    }
}

.inspiration-overview-page .inspiration-filters {
    display: flex;
    flex-direction: column;
    padding-bottom:20px;
}
@media only screen and (min-width: 992px) {
    .inspiration-overview-page .inspiration-filters {
        padding-bottom:0;
        width:60%;
    }
}
.inspiration-overview-page .inspiration-filters-inner {
    display: flex;
    flex-direction: column;
}
@media only screen and (min-width: 750px) {
    .inspiration-overview-page .inspiration-filters-inner {
        flex-direction: row;
        padding-right: 15px;
    }
}

.inspiration-overview-page .inspiration-filters-inner > div {
    padding-bottom:15px;
}

@media only screen and (min-width: 750px) {
    .inspiration-overview-page .inspiration-filters-inner > div {
        padding-bottom: 0;
        padding-right: 15px;
        flex: 1 0 auto;
    }
}

.inspiration-overview-page .inspiration-filters-inner select {
    padding-left: 1.5rem;
    padding-right: 2.5rem;
    border-radius: 100px;
    background-color: #ffffff;
    border-color: #ffffff;
    margin-bottom: 0;
    font-size: 14px;
}

.inspiration-overview-page .inspiration-search {
    display: flex;
    flex-direction: column;
}
@media only screen and (min-width: 992px) {
    .inspiration-overview-page .inspiration-search {
        padding-bottom: 0;
        width: 40%;
    }
}

.inspiration-overview-page .inspiration-search-inner {
    display: flex;
    flex-direction: row;
}

.inspiration-overview-page .inspiration-search-inner input {
    border-radius: 100px;
    background-color: #ffffff;
    border-color: #ffffff;
    margin-bottom: 0;
    font-size: 14px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: 1px solid #ffffff;
    height: 3.3125em;
    flex: 1 0 auto;
}

.inspiration-overview-page .inspiration-search-inner input:focus,
.inspiration-overview-page .inspiration-search-inner input:focus-visible {
    box-shadow: 0 0 6px rgba(240,125,0, 0.3);
    border: 1px solid rgba(240,125,0, 0.2);
    outline: none;
}

.inspiration-overview-page .filter-header {
    text-transform: uppercase;
    font-family: var(--heading-font);
    line-height: var(--heading-line-height);
    margin-bottom: 0.5em;
    font-weight: var(--heading-font-weight);
    color: var(--heading-dark);
    font-size:1.0rem;
    letter-spacing: 0.05rem;
    padding-bottom:10px;
}

.inspiration-overview-page .filters-wrapper button.button--default {
    background-color: var(--theme);
    border-color: var(--theme);
    margin-left: 15px;
}

.inspiration-overview-page .filters-wrapper button.button--default:hover {
    background-color: var(--theme-darker);
    border-color: var(--theme-darker);
}

/*======================================
  Highlighted items on Inspiration-Overview-Page
======================================*/

.inspiration-overview-page .highlighted-items-overview .pod,
.inspiration-overview-page .highlighted-items-overview .box,
.inspiration-overview-page .highlighted-items-overview .card {
    position: relative;
    height:100%;
    overflow: hidden;
}

.inspiration-overview-page .highlighted-items-overview .pod::after,
.inspiration-overview-page .highlighted-items-overview .box::after,
.inspiration-overview-page .highlighted-items-overview .card::after {
    content: "";
    position: absolute;
    left: -35px;
    top: -35px;
    background-image: url(/images/fenix-star-white.svg);
    background-size: 15px 15px;
    background-position: 47px;
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    transform: rotate(45deg);
    background-color: var(--theme);
}

/* Styling for cookie code*/
.cc_root {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

.cc_root .cc_text {
    text-align: left;
}

.cc_text > svg {
    display: none !important;
}

.cc_text {
    padding-left: 0 !important;
    margin: 25px 25px 0 !important;
}

.cc_text::before {
    content: "";
    display: block;
    background-image: url(https://www.fenixindustries.eu/media/ob1pi1dz/logo_fenix_rgb_alt_payoff.svg);
    width: 175px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.cc_buttons {
    grid-template-columns: 1fr 2fr !important;
    grid-template-areas: "button_settings button_allowall" !important;
    margin: 20px 25px 25px !important;
}

button.cc_button_allowall {
    color: white !important;
}

@media only screen and (min-width: 600px) {
    .cc_buttons button.cc_button_settings {
        border: 1px solid var(--text-color);
    }

    .cc_root > div {
        border-radius: 10px !important;
        min-width: 650px !important;
    }

    .cc_buttons button {
        height: 46px;
        max-height: 46px;
    }

    .cc_text {
        padding-left: 0 !important;
        margin: 35px 35px 0 !important;
    }

    .cc_buttons {
        grid-template-columns: 1fr 2fr !important;
        grid-template-areas: "button_settings button_allowall" !important;
        margin: 30px 35px 35px !important;
    }
}

@media only screen and (max-width: 600px) {
    .cc_buttons button {
        padding: 8px 8px !important;
    }

    .cc_buttons button:nth-child(2) {
        margin-top: 5px;
    }

    .cc_text > span:nth-child(2) {
        display: none !important;
    }

    .cc_text > span {
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
    main#content {
        display: flex;
        flex-direction: column;
    }

    .hero ~ .split-wrap.order-2 .split__text {
        order: 1 !important;
    }

    .hero ~ .split-wrap.order-2 split__image {
        order: 2 !important;
    }

    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

    .order-3 {
        order: 3;
    }

    .order-4 {
        order: 4;
    }

    .order-5 {
        order: 5;
    }

    .order-6 {
        order: 6;
    }

    .order-7 {
        order: 7;
    }

    .order-8 {
        order: 8;
    }

    .order-9 {
        order: 9;
    }

    .order-10 {
        order: 10;
    }

    .order-11 {
        order: 11;
    }

    .order-12 {
        order: 12;
    }

    .order-13 {
        order: 13;
    }

    .order-14 {
        order: 14;
    }

    .order-15 {
        order: 15;
    }

    .order-16 {
        order: 16;
    }

    .order-17 {
        order: 17;
    }

    .order-18 {
        order: 18;
    }

    .order-19 {
        order: 19;
    }

    .order-20 {
        order: 20;
    }

    .order-21 {
        order: 21;
    }

    .order-22 {
        order: 22;
    }

    .order-23 {
        order: 23;
    }

    .order-24 {
        order: 24;
    }

    .order-25 {
        order: 25;
    }

    .order-26 {
        order: 26;
    }

    .order-27 {
        order: 27;
    }

    .order-28 {
        order: 28;
    }

    .order-29 {
        order: 29;
    }

    .order-30 {
        order: 30;
    }
}


/* Content icons use Igloo 17's icon picker (Phosphor) since the v17 migration. Give .ph the box model Font Awesome's
   .fa had (display: inline-block), so margins/padding on icons (e.g. boxed pods) apply exactly as before. vertical-align compensates Phosphor's
   larger glyph descent vs FontAwesome (measured on /over-fenix: pod and icon box match production to 0.01px). */
.ph {
    display: inline-block;
    vertical-align: -0.07em;
}