@xxs-max: 320px;
@xs-max: 767px;
@sm-min: 768px;
@sm-max: 991px;
@md-min: 992px;
@ipad-max: 1024px;
@md-max: 1199px;
@lg-min: 1200px;

@spacer: 15px;
@button-height: 54px;
@container: 1170px;

@color-1: #007FAA;
@color-2: #028844;
@color-3: #000;
@color-4: #fff; /* white */
@color-5: #018845; /* green */
@color-6: #ffcc00;
@color-7: #f5f5f5; /* gray-lighter */
@color-8: #c0c0c0; /* @gray_alt */
@header-color: #fff;
@footer-color: #fff;
@heading-color: #0099cc;
@link-color: #337ab7;
@link-hover-color: #23527c;
@link-visited-color: #800080;
@link-item-block-link-color: #337ab7;
@link-item-block-link-hover-color: #23527c;
@link-item-block-link-visited-color: #800080;

/* button schemes */
@primary-scheme-button-text-color: #000;
@primary-scheme-button-text-color-hover: #000;
@primary-scheme-button-background-color: #ffcc00;
@primary-scheme-button-background-color-hover: #ffcc00;
@primary-scheme-button-border: #ffcc00;
@primary-scheme-button-border-hover: #ffcc00;
@secondary-scheme-button-text-color: #fff;

/* button schemes extended */
@primary-scheme-button-extended-text-color: #000;
@primary-scheme-button-extended-text-color-hover: #000;
@primary-scheme-button-extended-background-color: #ffcc00;
@primary-scheme-button-extended-background-color-hover: #ffcc00;
@primary-scheme-button-extended-border: #ffcc00;
@primary-scheme-button-extended-border-hover: #ffcc00;
@secondary-scheme-button-extended-text-color: #000;
@secondary-scheme-button-extended-border: #000;
@white-scheme-button-extended-text-color: #000;
@white-scheme-button-extended-text-color-hover: #000;
@white-scheme-button-extended-background-color: #fff;
@white-scheme-button-extended-background-color-hover: #fff;
@white-scheme-button-extended-border: #000;
@white-scheme-button-extended-border-hover: #000;

/* info block */
@info-block-border: #028844;
@info-block-background: #fff;
@info-block-text: #000;
@info-block-title: #028844;

/* colour cta block */
@colour-cta-block-background-color: #028844;
@colour-cta-block-text-color: #fff;
@colour-cta-block-link-color: #fff;
@colour-cta-block-link-hover-color: #fff;
@colour-cta-block-link-visited-color: #fff;
@cta-heading-color: #ffffff;

/* fund table */
@colour-fund-table-title-background: #4194C2;
@colour-fund-table-title-font: #EEEEEE;
@colour-fund-table-strip: #4CA75E;
@colour-fund-table-tint: #F5F5F5;

/* risk table */
@colour-risk-table-title-background: #ffffff;
@colour-risk-table-title-font: #018845;
@colour-risk-table-border: #4194C2;

/* bottom-pension journey */
@bottom-pension-color: #028844;
@bottom-pension-text-color: #fff;

/* pricing-table */
@pricing-table-price-bg-color: #e6e6e6; /* @gray-light */
@colour-form-question: #000;

/* block bacgrounds */
@colour-box-block-none-background: #fff;
@colour-box-block-none-font: #000;
@colour-box-block-primary-background: #028844;
@colour-box-block-primary-font: #fff;
@colour-box-block-secondary-background: #0076d6;
@colour-box-block-secondary-font: #fff;

/* accordion icon backgrounds */
@accordion-icon-background: #f5f5f5;
@accordion-icon-hover-background: #e5f5fc;

/* Slider navigation */
@color-slider-nav-innert-sticky: rgba(255, 255, 255, 0.9);
@color-slider-nav-ul-li: #eee;
@color-slider-nav-ul-li-anchor: #4c4c4c;
@color-slider-nav-ul-li-anchor-hover: #3c3c3c;

/* ***********************   MIXINS   *********************** */
.background-size(@value) {
    -webkit-background-size: @value;
    -moz-background-size: @value;
    -o-background-size: @value;
    background-size: @value;
}

.box-shadow(@hor, @vert, @blur, @spread, @color) {
    -webkit-box-shadow: @hor @vert @blur @spread @color;
    -moz-box-shadow: @hor @vert @blur @spread @color;
    -o-box-shadow: @hor @vert @blur @spread @color;
    box-shadow: @hor @vert @blur @spread @color;
}

.clearfix {
    &:before, &:after {
        content: '';
        display: block;
        clear: both;
    }
}

@import './fonts.css';
@import './video-js.min.css';

/*  Icons */

.icon.accidental-damage:before, .box-icon-accidental-damage:before {
    content: "\e900"
}

.icon.account:before, .box-icon-account:before {
    content: "\e901"
}

.icon.arrow-right:before, .box-icon-arrow-right:before {
    content: "\e902"
}

.icon.article-circle:before, .box-icon-article-circle:before {
    content: "\e903"
}

.icon.balance:before, .box-icon-balance:before {
    content: "\e904"
}

.icon.basket:before, .box-icon-basket:before {
    content: "\e905"
}

.icon.buildings:before, .box-icon-buildings:before {
    content: "\e906"
}

.icon.burger:before, .box-icon-burger:before {
    content: "\e907"
}

.icon.cancel-btn:before, .box-icon-cancel-btn:before {
    content: "\e908"
}

.icon.careers:before, .box-icon-careers:before {
    content: "\e909"
}

.icon.cash:before, .box-icon-cash:before {
    content: "\e90a"
}

.icon.cat:before, .box-icon-cat:before {
    content: "\e90b"
}

.icon.chat:before, .box-icon-chat:before {
    content: "\e90c"
}

.icon.check:before, .box-icon-check:before {
    content: "\e90d"
}

.icon.chevron-down:before, .box-icon-chevron-down:before {
    content: "\e90e"
}

.icon.chevron-down-light:before, .box-icon-chevron-down-light:before {
    content: "\e90f"
}

.icon.chevron-left:before, .box-icon-chevron-left:before {
    content: "\e910"
}

.icon.chevron-right:before, .box-icon-chevron-right:before {
    content: "\e911"
}

.icon.chevron-up:before, .box-icon-chevron-up:before {
    content: "\e912"
}

.icon.chevron-up-light:before, .box-icon-chevron-up-light:before {
    content: "\e913"
}

.icon.circle-arrow-down:before, .box-icon-circle-arrow-down:before {
    content: "\e914"
}

.icon.circle-arrow-up:before, .box-icon-circle-arrow-up:before {
    content: "\e915"
}

.icon.circle-number-1:before, .box-icon-circle-number-1:before {
    content: "\e916"
}

.icon.circle-number-2:before, .box-icon-circle-number-2:before {
    content: "\e917"
}

.icon.circle-number-3:before, .box-icon-circle-number-3:before {
    content: "\e918"
}

.icon.coin-stack:before, .box-icon-coin-stack:before {
    content: "\e919"
}

.icon.contact:before, .box-icon-contact:before {
    content: "\e91a"
}

.icon.couple:before, .box-icon-couple:before {
    content: "\e91b"
}

.icon.cracked-mirror:before, .box-icon-cracked-mirror:before {
    content: "\e91c"
}

.icon.cross:before, .box-icon-cross:before {
    content: "\e91d"
}

.icon.digg:before, .box-icon-digg:before {
    content: "\e91e"
}

.icon.divide-bold:before, .box-icon-divide-bold:before {
    content: "\e91f"
}

.icon.docs:before, .box-icon-docs:before {
    content: "\e920"
}

.icon.docs-circle:before, .box-icon-docs-circle:before {
    content: "\e921"
}

.icon.dog:before, .box-icon-dog:before {
    content: "\e922"
}

.icon.droplets:before, .box-icon-droplets:before {
    content: "\e923"
}

.icon.empty-circle:before, .box-icon-empty-circle:before {
    content: "\e924"
}

.icon.envelope:before, .box-icon-envelope:before {
    content: "\e925"
}

.icon.equals-bold:before, .box-icon-equals-bold:before {
    content: "\e926"
}

.icon.external-link:before, .box-icon-external-link:before {
    content: "\e927"
}

.icon.facebook:before, .box-icon-facebook:before {
    content: "\e928"
}

.icon.facebook-solid:before, .box-icon-facebook-solid:before {
    content: "\e929"
}

.icon.family:before, .box-icon-family:before {
    content: "\e92a"
}

.icon.family-circle:before, .box-icon-family-circle:before {
    content: "\e92b"
}

.icon.fire:before, .box-icon-fire:before {
    content: "\e92c"
}

.icon.focus:before, .box-icon-focus:before {
    content: "\e92d"
}

.icon.furniture:before, .box-icon-furniture:before {
    content: "\e92e"
}

.icon.google:before, .box-icon-google:before {
    content: "\e92f"
}

.icon.heart:before, .box-icon-heart:before {
    content: "\e930"
}

.icon.home:before, .box-icon-home:before {
    content: "\e931"
}

.icon.home-solid:before, .box-icon-home-solid:before {
    content: "\e932"
}

.icon.info:before, .box-icon-info:before {
    content: "\e933"
}

.icon.info-circle:before, .box-icon-info-circle:before {
    content: "\e934"
}

.icon.instagram-solid:before, .box-icon-instagram-solid:before {
    content: "\e935"
}

.icon.investment:before, .box-icon-investment:before {
    content: "\e936"
}

.icon.linkedin:before, .box-icon-linkedin:before {
    content: "\e937"
}

.icon.linkedin-solid:before, .box-icon-linkedin-solid:before {
    content: "\e938"
}

.icon.logo-chevron:before, .box-icon-logo-chevron:before {
    content: "\e939"
}

.icon.meeting:before, .box-icon-meeting:before {
    content: "\e93a"
}

.icon.minus:before, .box-icon-minus:before {
    content: "\e93b"
}

.icon.minus-bold:before, .box-icon-minus-bold:before {
    content: "\e93c"
}

.icon.multiply-bold:before, .box-icon-multiply-bold:before {
    content: "\e93d"
}

.icon.pdf:before, .box-icon-pdf:before {
    content: "\e93e"
}

.icon.phone:before, .box-icon-phone:before {
    content: "\e93f"
}

.icon.plus:before, .box-icon-plus:before {
    content: "\e940"
}

.icon.plus-bold:before, .box-icon-plus-bold:before {
    content: "\e941"
}

.icon.plus-outlined:before, .box-icon-plus-outlined:before {
    content: "\e942"
}

.icon.powerpoint:before, .box-icon-powerpoint:before {
    content: "\e943"
}

.icon.print-checklist:before, .box-icon-print-checklist:before {
    content: "\e944"
}

.icon.print-icon:before, .box-icon-print-icon:before {
    content: "\e945"
}

.icon.question-circle:before, .box-icon-question-circle:before {
    content: "\e946"
}

.icon.returns:before, .box-icon-returns:before {
    content: "\e947"
}

.icon.running-tap:before, .box-icon-running-tap:before {
    content: "\e948"
}

.icon.search:before, .box-icon-search:before {
    content: "\e949"
}

.icon.settings-circle:before, .box-icon-settings-circle:before {
    content: "\e94a"
}

.icon.signposts:before, .box-icon-signposts:before {
    content: "\e94b"
}

.icon.snowflake:before, .box-icon-snowflake:before {
    content: "\e94c"
}

.icon.storm:before, .box-icon-storm:before {
    content: "\e94d"
}

.icon.television:before, .box-icon-television:before {
    content: "\e94e"
}

.icon.thunder-house:before, .box-icon-thunder-house:before {
    content: "\e94f"
}

.icon.tick-circle:before, .box-icon-tick-circle:before {
    content: "\e950"
}

.icon.tick-solid:before, .box-icon-tick-solid:before {
    content: "\e951"
}

.icon.twitter:before, .box-icon-twitter:before {
    content: "\e952"
}

.icon.twitter-solid:before, .box-icon-twitter-solid:before {
    content: "\e953"
}

.icon.umbrella-circle:before, .box-icon-umbrella-circle:before {
    content: "\e954"
}

.icon.user:before, .box-icon-user:before {
    content: "\e955"
}

.icon.user-2:before, .box-icon-user-2:before {
    content: "\e973"
}

.icon.video:before, .box-icon-video:before {
    content: "\e956"
}

.icon.video-2:before, .box-icon-video-2:before {
    content: "\e96b"
}

.icon.water-drop:before, .box-icon-water-drop:before {
    content: "\e957"
}

.icon.word:before, .box-icon-word:before {
    content: "\e958"
}

.icon.word-2:before, .box-icon-word-2:before {
    content: "\e96c"
}

.icon.worldwide:before, .box-icon-worldwide:before {
    content: "\e959"
}

.icon.youtube-solid:before, .box-icon-youtube-solid:before {
    content: "\e95a"
}

.icon.reload-icon:before, .box-icon-reload-icon:before {
    content: "\e95b"
}

.icon.clock:before, .box-icon-clock:before {
    content: "\e95c"
}

.icon.play-circle:before, .box-icon-play-circle:before {
    content: "\e95d"
}

.icon.audio:before, .box-icon-audio:before {
    content: "\e95e"
}

.icon.audio-2:before, .box-icon-audio-2:before {
    content: "\e96a"
}

.icon.avatar-book:before, .box-icon-avatar-book:before {
    content: "\e95f"
}

.icon.avatar-tick:before, .box-icon-avatar-tick:before {
    content: "\e960"
}

.icon.awards-badge:before, .box-icon-awards-badge:before {
    content: "\e961"
}

.icon.briefcase:before, .box-icon-briefcase:before {
    content: "\e962"
}

.icon.expert-toolcase:before, .box-icon-expert-toolcase:before {
    content: "\e963"
}

.icon.online-platform:before, .box-icon-online-platform:before {
    content: "\e964"
}

.icon.piggy-bank:before, .box-icon-piggy-bank:before {
    content: "\e965"
}

.icon.pound-in-hand:before, .box-icon-pound-in-hand:before {
    content: "\e966"
}

.icon.stocks-up:before, .box-icon-stocks-up:before {
    content: "\e967"
}

.icon.top-up-wallet:before, .box-icon-top-up-wallet:before {
    content: "\e968"
}

.icon.two-way-arrows:before, .box-icon-two-way-arrows:before {
    content: "\e969"
}

.icon.hand-right:before, .box-icon-hand-right:before {
    content: "\e96d"
}

.icon.coin-stack-no-circle:before, .box-icon-coin-stack-no-circle:before {
    content: "\e96e"
}

.icon.piggy-bank-2:before, .box-icon-piggy-bank-2:before {
    content: "\e96f"
}

.icon.comment:before, .box-icon-comment:before {
    content: "\e970"
}

.icon.pdf-2:before, .box-icon-pdf-2:before {
    content: "\e971"
}

.icon.comment-plus:before, .box-icon-comment-plus:before {
    content: "\e972"
}

.icon.puzzle-piece-circle:before, .box-icon-puzzle-piece-circle:before {
    content: "\e974"
}

.icon.comment-circle:before, .box-icon-comment-circle:before {
    content: "\e975"
}

.icon.book-circle:before, .box-icon-book-circle:before {
    content: "\e976"
}

.icon.audio-2-circle:before, .box-icon-audio-2-circle:before {
    content: "\e977"
}

.icon.video-2-circle:before, .box-icon-video-2-circle:before {
    content: "\e978"
}

.icon.puzzle-piece:before, .box-icon-puzzle-piece:before {
    content: "\e97a"
}

.icon.route66:before, .box-icon-route66:before {
    content: "\e979"
}

.icon.airplane-flying:before, .box-icon-airplane-flying:before {
    content: "\e97b"
}

.icon.cocktail:before, .box-icon-cocktail:before {
    content: "\e97c"
}

.icon.house-big:before, .box-icon-house-big:before {
    content: "\e97d"
}

.icon.champagne-glasses:before, .box-icon-champagne-glasses:before {
    content: "\e97e"
}

.icon.language:before, .box-icon-language:before {
    content: "\e97f"
}

.icon.house:before, .box-icon-house:before {
    content: "\e980"
}

.icon.guitar:before, .box-icon-guitar:before {
    content: "\e981"
}

.icon.kangaroo:before, .box-icon-kangaroo:before {
    content: "\e982"
}

.icon.island-tropical:before, .box-icon-island-tropical:before {
    content: "\e983"
}

.icon.calculator:before, .box-icon-calculator:before {
    content: "\e984"
}

.icon.about-you:before, .box-icon-about-you:before {
    content: "\e985"
}

.icon.money-bags:before, .box-icon-money-bags:before {
    content: "\e986"
}

.icon.choices:before, .box-icon-choices:before {
    content: "\e987"
}

.icon.cigar-pack:before, .box-icon-cigar-pack:before {
    content: "\e988"
}

.icon.cigarette:before, .box-icon-cigarette:before {
    content: "\e989"
}

.icon.cigars:before, .box-icon-cigars:before {
    content: "\e98a"
}

.icon.cigar:before, .box-icon-cigar:before {
    content: "\e98b"
}

.icon.scale:before, .box-icon-scale:before {
    content: "\e98c"
}

.icon.considerations:before, .box-icon-considerations:before {
    content: "\e98d"
}

.icon.corp:before, .box-icon-corp:before {
    content: "\e98e"
}

.icon.download:before, .box-icon-download:before {
    content: "\e98f"
}

.icon.entitlement:before, .box-icon-entitlement:before {
    content: "\e990"
}

.icon.equity-release:before, .box-icon-equity-release:before {
    content: "\e991"
}

.icon.erc:before, .box-icon-erc:before {
    content: "\e992"
}

.icon.family-new:before, .box-icon-family-new:before {
    content: "\e993"
}

.icon.wallet:before, .box-icon-wallet:before {
    content: "\e994"
}

.icon.get-advice:before, .box-icon-get-advice:before {
    content: "\e995"
}

.icon.glass-of-wine:before, .box-icon-glass-of-wine:before {
    content: "\e996"
}

.icon.guidance:before, .box-icon-guidance:before {
    content: "\e997"
}

.icon.health:before, .box-icon-health:before {
    content: "\e998"
}

.icon.impartial:before, .box-icon-impartial:before {
    content: "\e999"
}

.icon.insurance:before, .box-icon-insurance:before {
    content: "\e99a"
}

.icon.is-it-right-for-me:before, .box-icon-is-it-right-for-me:before {
    content: "\e99b"
}

.icon.key-features:before, .box-icon-key-features:before {
    content: "\e99c"
}

.icon.know-where-you-stand:before, .box-icon-know-where-you-stand:before {
    content: "\e99d"
}

.icon.laptop:before, .box-icon-laptop:before {
    content: "\e99e"
}

.icon.make-it-happen:before, .box-icon-make-it-happen:before {
    content: "\e99f"
}

.icon.notes:before, .box-icon-notes:before {
    content: "\e9a0"
}

.icon.pdf-dd:before, .box-icon-pdf-dd:before {
    content: "\e9a1"
}

.icon.pension-annuity:before, .box-icon-pension-annuity:before {
    content: "\e9a2"
}

.icon.pint-of-beer:before, .box-icon-pint-of-beer:before {
    content: "\e9a3"
}

.icon.pipe-tobacco:before, .box-icon-pipe-tobacco:before {
    content: "\e9a4"
}

.icon.print:before, .box-icon-print:before {
    content: "\e9a5"
}

.icon.product-options:before, .box-icon-product-options:before {
    content: "\e9a6"
}

.icon.product-options-02:before, .box-icon-product-options-02:before {
    content: "\e9a7"
}

.icon.ref-product-page:before, .box-icon-ref-product-page:before {
    content: "\e9a8"
}

.icon.retirement-lending:before, .box-icon-retirement-lending:before {
    content: "\e9a9"
}

.icon.retirement-savings:before, .box-icon-retirement-savings:before {
    content: "\e9aa"
}

.icon.rolling-tobacco-01:before, .box-icon-rolling-tobacco-01:before {
    content: "\e9ab"
}

.icon.rolling-tobacco-02:before, .box-icon-rolling-tobacco-02:before {
    content: "\e9ac"
}

.icon.share:before, .box-icon-share:before {
    content: "\e9ad"
}

.icon.shop:before, .box-icon-shop:before {
    content: "\e9ae"
}

.icon.shot-of-spirit:before, .box-icon-shot-of-spirit:before {
    content: "\e9af"
}

.icon.speak-to-us-mobile:before, .box-icon-speak-to-us-mobile:before {
    content: "\e9b0"
}

.icon.speak-to-us-phone:before, .box-icon-speak-to-us-phone:before {
    content: "\e9b1"
}

.icon.speak-with-us:before, .box-icon-speak-with-us:before {
    content: "\e9b2"
}

.icon.statement:before, .box-icon-statement:before {
    content: "\e9b3"
}

.icon.target:before, .box-icon-target:before {
    content: "\e9b4"
}

.icon.tax:before, .box-icon-tax:before {
    content: "\e9b5"
}

.icon.travel:before, .box-icon-travel:before {
    content: "\e9b6"
}

.icon.video-circle-play:before, .box-icon-video-circle-play:before {
    content: "\e9b7"
}

.icon.write-to-us:before, .box-icon-write-to-us:before {
    content: "\e9b8"
}

.icon.myth-card-arrow:before, .box-icon-myth-card-arrow:before {
    content: "\e9b9"
}

.icon.calendar:before, .box-icon-calendar:before {
    content: "\e9ba"
}

.icon.percentage:before, .box-icon-percentage:before {
    content: "\e9bb"
}

.icon.tick-pro:before, .box-icon-tick-pro:before {
    content: "\e9bc"
}

.icon.cross-con:before, .box-icon-cross-con:before {
    content: "\e9bd"
}

.icon.exclamation_mark:before, .box-icon-exclamation_mark:before {
    content: "\e9be"
}

.icon.signs:before, .box-icon-signs:before {
    content: "\e9c0"
}

.icon.finding-care:before, .box-icon-finding-care:before {
    content: "\e9c1"
}

.icon.funding-calculator:before, .box-icon-funding-calculator:before {
    content: "\e9c2"
}

.icon.care-assistant:before, .box-icon-care-assistant:before {
    content: "\e9c3"
}

.icon.battery:before, .box-icon-battery:before {
    content: "\e9c4"
}

.icon.c02:before, .box-icon-c02:before {
    content: "\e9c5"
}

.icon.car:before, .box-icon-car:before {
    content: "\e9c6"
}

.icon.cloud:before, .box-icon-cloud:before {
    content: "\e9c7"
}

.icon.fish:before, .box-icon-fish:before {
    content: "\e9c8"
}

.icon.house-eco:before, .box-icon-house-eco:before {
    content: "\e9c9"
}

.icon.leaf:before, .box-icon-leaf:before {
    content: "\e9ca"
}

.icon.light-bulb:before, .box-icon-light-bulb:before {
    content: "\e9cb"
}

.icon.plug:before, .box-icon-plug:before {
    content: "\e9cc"
}

.icon.recycling:before, .box-icon-recycling:before {
    content: "\e9cd"
}

.icon.solar-panel:before, .box-icon-solar-panel:before {
    content: "\e9ce"
}

.icon.sun:before, .box-icon-sun:before {
    content: "\e9cf"
}

.icon.tree:before, .box-icon-tree:before {
    content: "\e9d0"
}

.icon.turbine:before, .box-icon-turbine:before {
    content: "\e9d1"
}

.icon.waste:before, .box-icon-waste:before {
    content: "\e9d2"
}

.icon.water:before, .box-icon-water:before {
    content: "\e9d3"
}

.rotate(@value) {
    -webkit-transform: rotate(@value);
    -moz-transform: rotate(@value);
    -ms-transform: rotate(@value);
    -o-transform: rotate(@value);
    transform: rotate(@value);
}

.padding-wrapper {
    padding: 45px 100px;

    @media screen and (max-width: @xs-max) {
        padding: 25px;
    }
}

.block-width {

    &.small-width {
        width: calc(33.3333% - 15px);
        &.cta-block {
            h2{ 
                font-size: 19px;
            }
        }
    }

    &.medium-width {
        width: calc(50% - 15px);
        &.cta-block {
            h2 {
                font-size: 27px;
            }
        }
    }

    &.large-width {
        width: calc(66.66% - 15px);
        &.cta-block {
            h2 {
                font-size: 32px;
            }
        }
    }

    &.full-width {
        width: 100%;
        &.cta-block {
            h2 {
                font-size: 32px;
            }
        }
    }

    &.large-width.smart-carousel {
        width: 860px;

        .content-left & {
            width: 570px;
        }
    }

    &.full-width.smart-carousel {
        .content-left & {
            width: 570px;
        }
    }

    &.full-width.table,
    &.full-width.accordion {
        clear: both;
    }
    /* video */
    &.small-width iframe,
    &.medium-width iframe,
    &.large-width iframe,
    &.full-width iframe {
        width: 100% !important;
    }

    &.small-width,
    &.medium-width,
    &.large-width,
    &.full-width {
        @media screen and (max-width: @xs-max) {
            /* mobile */
            width: 100%;
        }
    }
}

/*  Fund Table mixins */
.small-table( @background, @color, @strip ) {
    border-spacing: 0;
    width: 100%;
    height: 100%;

    thead tr {
        background-color: @background;
        color: @color;
        text-align: left;

        th {
            padding: 5px;
        }

        th:first-child {
            border-radius: 5px 0 0 5px;
        }

        th:last-child {
            border-radius: 0 5px 5px 0;
        }
    }

    tbody tr {
        &:nth-child(odd) {
            background: @colour-fund-table-tint;
        }

        td {
            padding: 8px 5px;
            border-bottom: solid 2px @strip;
        }
    }

    a {
        text-decoration: underline;
        color: inherit;
    }
}

.center-column(@col) {
    thead tr th:nth-child(@{col}),
    tbody tr td:nth-child(@{col}) {
        text-align: center;
    }
}

.responsive-table( @size, @border-color ) {
    @media screen and (max-width: @size) {
        thead {
            display: none;
        }

        tbody tr {
            display: block;
            border: 1px solid @border-color;

            &:nth-child(odd) {
                background: none;
            }

            td {
                display: flex;
                flex-direction: row;
                text-align: left !important;
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;

                &:nth-child(odd) {
                    background: @colour-fund-table-tint;
                }

                &::before {
                    content: attr(data-label);
                    width: 50%;
                    display: block;
                }

                .inline-content {
                    width: 50%;
                    display: block;
                }
            }
        }
    }
}

.border-table( @background, @color, @border-color, @padding ) {
    thead th {
        text-align: center;
        background-color: @background;
        color: @color;
    }

    border-spacing: 0;
    border-collapse: collapse;

    td, th {
        border: solid 1px @border-color;
    }

    td {
        padding: 10px;
    }
}

.colored( @color ) {
    color: @color;
}

.heading( @color ) {
    .colored(@color);
    margin-bottom: 5px;
    margin-top: 10px;

    + p {
        margin-top: 0;
    }
}

.heading-image(@size) {
    max-height: @size;
    margin-right: 10px;
    width: auto;
    display: inline;
    float: left;
}



/* ***********************   WORK   *********************** */
.responsive {
    width: 100%;
    height: auto;
}

/* checkboxes */
.lng-label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    font-weight: normal;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &:first-of-type {
        margin-top: @spacer;
    }

    &:last-of-type {
        margin-bottom: 0;
    }

    input {
        position: absolute;
        opacity: 0;
        cursor: pointer;

        &:checked ~ .lng-checkmark:after {
            display: block;
        }
    }

    &:hover input ~ .lng-checkmark {
        background-color: @color-7;
    }

    .lng-checkmark {
        position: absolute;
        top: 0;
        left: 0px;
        height: 21px;
        width: 21px;
        background-color: @color-4;
        border: 2px solid @color-3;

        &:after {
            content: "";
            position: absolute;
            display: none;
            left: 0;
            top: 0;
            right: 0;
            bottom: 5px;
            margin: auto;
            width: 4px;
            height: 12px;
            border: solid @color-3;
            border-width: 0 3px 3px 0;
            box-sizing: content-box;
            .rotate(45deg);
        }
    }
}

/* color widget */
.color-widget {
    position: fixed;
    width: 120px;
    z-index: 99999;
    top: 120px;
    right: 28px;
    border: 1px solid black;

    @media screen and (max-width: @xs-max) {
        top: 400px;
    }

    .color-style {
        width: 50%;
        float: left;
        padding: 18px;
        cursor: pointer;
        border: 4px solid black;

        &:hover {
            opacity: 0.8;
        }
    }

    .color-1 {
        background-color: #bae050;
    }

    .color-2 {
        background-color: #4c2a00;
    }

    .color-3 {
        background-color: #5b83a0;
    }

    .color-4 {
        background-color: #e0bf1c;
    }

    .color-5 {
        padding: 5px;
        text-align: center;
        width: 100%;
        background-color: white;
        color: black;
    }
}

/* ***********************   HELPERS   *********************** */

.m-1 {
    margin: @spacer;
}

.mt-1 {
    margin-top: @spacer;
}

.mb-1 {
    margin-bottom: @spacer;
}

.ml-1 {
    margin-left: @spacer;
}

.mr-1 {
    margin-right: @spacer;
}

.mv-1 {
    margin-top: @spacer;
    margin-bottom: @spacer;
}

.mh-1 {
    margin-left: @spacer;
    margin-right: @spacer;
}

.d-iblock {
    display: inline-block;
}

@media screen and (min-width: @md-min) {
    .col-md-pull-right {
        float: right !important;
    }
}

.tab-clicker {
    display: block;

    &:hover {
        text-decoration: none;
    }
}

ul,
ol {
    padding-left: 17px;
}

.colored-dots-list {
    ul {
        li {
            text-indent: -.7em;

            &::marker {
                color: @color-1;
            }
        }
    }
}

.colored-number-list {
    li {
        font-weight: bold;
        color: @color-1;

        span {
            font-weight: normal;
            color: @color-3;
        }
    }
}

.lng-heading {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
}

.container {
    max-width: 100%;
}

/* ***********************   GENERAL   *********************** */

body {
    font-size: 16px;
    color: @color-3;
    -webkit-font-smoothing: antialiased;
    width:100%;
}

body,
p,
span,
a,
h1,
h2,
h3,
h4,
input,
button {
    font-family: 'Roboto', sans-serif;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: @heading-color;
}

h4 {
    margin-bottom: 5px;
}

h1 {
    font-size: 56px;
    line-height: 1;
}

h2 {
    font-size: 48px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 20px;
}

p a,
.tinymce-wrapper a {
    color: @link-color;
    text-decoration: underline;

    &:hover {
        color: @link-hover-color;
    }

    &:visited {
        color: @link-visited-color;
    }
}

@media screen and (max-width: @sm-max) {
    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 48px;
    }
}

@media screen and (max-width: @xs-max) {
    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 48px;
    }

    h3 {
        font-size: 28px;
    }
}

a,
button {
    transition-property: background-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

a {
    &:focus {
        text-decoration: none;
    }

    &.underline-link {
        text-decoration: underline;
    }

    &.not-underline-link {
        text-decoration: none;

        &:hover {
            text-decoration: none;
        }
    }

    &.hover-yellow {
        &:hover, &:focus {
            color: #ffcc00 !important;
        }
    }

    &.hover-white {
        &:hover, &:focus {
            color: white !important;
        }
    }
}

button {
    border: none;
    background: none;
}

p {
    margin: 0;
}




.lng-button {
    display: inline-block;
    min-height: @button-height;
    line-height: @button-height;
    background-color: @color-6;
    padding-left: @spacer;
    padding-right: @spacer;
    color: @color-3;
    text-align: center;
    font-size: 16px;
    font-weight: bold;

    &._stick-right {
        position: absolute;
        right: 0;
        bottom: 30%;

        &:visited {
            color: inherit;
        }

        @media screen and (max-width: @xs-max) {
            width: auto;
            height: auto;
            background: none;
            color: @color-6;
            padding: 0;
            display: inline-block;
            position: static;

            &:hover {
                color: darken(@color-6, 12%);
                background: transparent;
            }
        }
    }

    &:hover {
        background-color: darken(@color-6, 12%);
        text-decoration: none;
    }

    &:hover, &:focus {
        color: @color-3;
    }

    @media screen and (max-width: @xs-max) {
        font-size: 20px;
    }
}

.lng-link {
    position: relative;
    color: @color-3;

    &:hover,
    &:focus {
        color: @color-3;
    }
}

@yellow-box-size: 21px;

.yellow-box-chevron {
    position: absolute;
    color: @color-3;
    font-weight: bold;
    text-align: center;
    right: 6px;
    font-size: 1.2em;
    width: @yellow-box-size;
    height: @yellow-box-size;
    background-color: @color-6;
    line-height: @yellow-box-size;

    &:before {
        content: '>';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

.divider-xxxl {
    margin-top: 110px;
}

/* ***********************   HEADER   *********************** */
@header-height: 100px;
@header-mobile-height: 64px;

header {
    border-bottom: 4px solid @color-1;
    background-color: @header-color;
    .clearfix();

    @media screen and (min-width: @sm-min) {
        min-height: @header-height;

        .header-menu-wrapper {
            float: right;
        }
    }

    @media screen and (max-width: @xs-max) {
        /* mobile */
        .header-menu-wrapper {
            margin-top: -75px;
        }
    }

    @media screen and (max-width: @xs-max) {
        height: @header-mobile-height;
        border-width: 2px;

        &.opened {
            height: auto;

            .header-links.mobile {
                display: block;
            }

            .navbar-collapsable {
                display: block;
            }

            .header-menu {
                border-top: 2px solid @color-1;
                margin-top: calc(@header-mobile-height + 18px);
            }
        }

        &.search-active {
            .search-mobile-wrapper {
                max-height: 500px;
                padding: @spacer;
                top: @header-mobile-height;
                position: absolute;
                width: 100%;
                z-index: 100;
            }
        }
    }

    .header-links.mobile {
        display: none;

        .header-link {
            display: block;
            text-align: left;
            font-size: 16px;
            padding: 0 20px 10px;

            &:first-of-type {
                padding-top: 10px;
            }
        }
    }

    a,
    .navbar-nav > li > a,
    .nav > li > a,
    .nav-link {
        position: relative;

        &:hover,
        &:focus {
            background-color: transparent;
            text-decoration: none;
        }
    }

    .logo-wrapper {
        display: inline-block;
        vertical-align: bottom;
    }

    .logo-wrapper + .logo-wrapper {
        margin-left: 10px;

        @media (min-width: @xs-max) and (max-width: @ipad-max) {
            margin-left: 5px;
        }
    }

    .container {
        .lng-logo {
            background-color: @header-color;
            margin-top: @spacer;
            margin-left: @spacer;
            max-height: 70px;
            min-height: 60px;

            @media (min-width: @xs-max) and (max-width: @ipad-max) {
                max-height: 50px;
                min-height: 40px;
                margin-top: calc(@spacer * 2);
                margin-left: 0;
            }

            &_second {
                background-color: @header-color;
            }

            @media screen and (max-width: @xs-max) {
                max-height: 45px;
                min-height: 35px;
                margin: 5px;
            }
        }

        &.fiveItems {
            .logo-wrapper {
                .lng-logo {
                    background-color: @header-color;
                    max-height: 70px;
                    min-height: 60px;

                    @media (min-width: @xs-max) and (max-width: @ipad-max) {
                        max-height: 50px;
                        min-height: 40px;
                        margin-top: calc(@spacer * 2);
                        margin-left: 0;
                    }

                    @media screen and (max-width: @xs-max) {
                        max-height: 45px;
                        min-height: 35px;
                        margin: 5px;
                    }
                }
            }
        }

        &.sixItems {
            .logo-wrapper {
                .lng-logo {
                    background-color: @header-color;
                    max-height: 70px;
                    min-height: 60px;
                    margin-top: @spacer;
                    margin-left: @spacer;

                    @media (min-width: @xs-max) and (max-width: @ipad-max) {
                        max-height: 50px;
                        min-height: 40px;
                        margin-top: calc(@spacer * 2);
                        margin-left: 0;
                    }

                    @media screen and (max-width: @xs-max) {
                        max-height: 45px;
                        min-height: 35px;
                        margin: 5px;
                    }
                }
            }
        }
    }

    div[class^="col"] {
        position: inherit;
    }

    .header-link {
        padding-right: @spacer;
        font-size: 13px;
        color: @color-5;
        background-color: @color-4 !important;

        &:last-child {
            padding-right: 0;
        }
    }

    .header-options-wrapper {
        float: right;
        display: inline-block;
        padding-bottom: 10px;

        .header-links {
            position: relative;
            top: -8px;
            display: inline-block;
            margin-top: 28px;
            min-width: 1px;
        }
    }

    .navbar {
        position: inherit;
        padding: 0;
        border: none;

        &-toggler {
            position: absolute;
            top: 13px;
            right: 20px;
            padding: 0;
            border: none;
            width: 32px;
            height: 24px;
            background-color: transparent;
            cursor: pointer;
            transition: all 0.3s;

            &.active {
                span {
                    background: none;

                    &::before,
                    &::after {
                        transition-delay: 0s, 0.3s;
                    }

                    &::before {
                        top: 0;
                        transform: rotate(45deg);
                    }

                    &::after {
                        bottom: 0;
                        transform: rotate(-45deg);
                    }
                }
            }

            span {
                position: absolute;
                display: block;
                width: 32px;
                top: 10px;
                left: 0;
                right: 0;
                height: 4px;
                background: @color-3;
                color: transparent;

                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    display: block;
                    left: 0;
                    width: 100%;
                    height: 4px;
                    background-color: @color-3;
                    transition-duration: 0.3s, 0.3s;
                    transition-delay: 0.3s, 0s;
                }

                &::before {
                    top: -10px;
                    transition-property: top, transform;
                }

                &::after {
                    bottom: -10px;
                    transition-property: bottom, transform;
                }
            }
        }
    }

    .clickable-item

    ~ .sub-menu-collapsable {
        &._expanded {
            z-index: 90 !important;
            display: block !important;
            max-height: 100% !important;
            opacity: 1 !important;
        }

        @media screen and (min-width: @sm-min) {
            &.first-level {
                max-height: 0;
                opacity: 0;
                overflow: hidden;
                z-index: -9;
            }
        }

        @media screen and (min-width: @sm-min) {
            &.active {
                + .sub-menu-collapsable,
                .triangle-with-shadow {
                    opacity: 0.9;
                }

                .triangle-with-shadow {
                    z-index: 100;
                }

                + .sub-menu-collapsable {
                    z-index: 90;
                    display: block;
                    max-height: 100%;
                }
            }
        }
    }
}

/* ***********************   NAVBAR   *********************** */
.navbar-collapsable {
    @media screen and (max-width: @xs-max) {
        background-color: @header-color;
        border-bottom: 2px solid @color-1;
        padding: 0;
        display: none;

        .nav-link,
        .nav-heading {
            padding: 10px 20px;

            &.clickable-item {
                padding-right: 60px;
            }
        }

        .nav-link:not(.third-level),
        .nav-heading:not(.third-level),
        .header-links.mobile {
            border-top: 1px solid @color-8;
        }
    }

    @media screen and (min-width: @md-min) {
        /* desktop */
        overflow: hidden;
        float: right;
        width: @container;
    }

    .nav-link {
        cursor: pointer;

        @media screen and (min-width: @md-min) {
            &:not(.header-menu-link) {
                padding: 0;
                font-size: 14px;
            }
        }
    }

    .header-menu {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;

        @media screen and (min-width: @sm-min) {
            display: table;
            float: right;
            width: auto;
        }

        @media screen and (max-width: @xs-max) {
            padding: 0;
            margin-right: 0;
            margin-left: 0;
            margin-top: 0;
        }

        .header-menu-link:hover,
        .header-link:hover {
            color: lighten(@color-1, 5%) !important;
        }
    }
}

.nav-item {
    list-style-type: none;
    text-align: left;

    @media screen and (max-width: @xs-max) {
        position: relative;
    }


    &:first-of-type {
        .nav-link {
            @media screen and (max-width: @xs-max) {
                border: none;
            }
        }
    }

    @media screen and (min-width: @sm-min) {
        margin-left: 50px;
        display: table-cell;

        @media (min-width: @xs-max) and (max-width: @md-max) {
            margin-left: 25px;
        }

        .clickable-item {
            padding: 0 0 15px 0;

            &:after {
                content: none;
            }
        }

        &:first-child {
            margin-left: 0;
        }

        &:hover {
            .sub-menu-collapsable,
            .triangle-with-shadow {
                opacity: 1 !important;
            }

            .triangle-with-shadow {
                z-index: 100 !important;
            }

            .sub-menu-collapsable {
                z-index: 90 !important;
                display: block !important;
                max-height: 100% !important;
            }
        }
    }


    .header-menu-link {
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
        color: @color-3;
        display: inline-block;


        @media screen and (max-width: @sm-max) {
            font-size: 16px;
        }

        @media screen and (min-width: @sm-min) {
            height: 100%;
        }

        @media screen and (max-width: @xs-max) {
            font-size: 24px;
            display: block;
        }
    }

    .sub-menu-section {
        width: 100%;
        z-index: 99;
        text-align: inherit;
        border-radius: 0;
        border: 0;
        padding: 0;
        margin: 0;
        background-color: @header-color;

        @media screen and (min-width: @sm-min) {
            position: absolute;
            left: 0;
            border-top: 4px solid @color-1;
            opacity: 0.9;
            .box-shadow(0px, 9px, 21px, -2px, rgba(0, 0, 0, 0.5));
        }

        .nav-link {
            &:not(.sub-menu-collapsable) {
                display: block;
            }

            &:not(.info-block__heading) {
                color: @color-3;
            }

            &.additional {
                padding-bottom: 12px;

                @media screen and (min-width: @sm-min) {
                    &:last-of-type {
                        padding-bottom: 0 !important;
                    }
                }
            }

            &:hover {
                color: @color-6;
            }
        }

        .sub-menu-content {
            &:first-of-type {
                border-right: 2px solid @color-8;
            }

            @media screen and (max-width: @xs-max) {
                padding: 0;

                &:first-of-type {
                    border-width: 0;
                }
            }
        }

        .sub-menu-wrapper {
            line-height: 1.1;
            max-width: 950px;
            margin: auto;

            @media screen and (min-width: @sm-min) {
                padding: 20px 0;
            }

            .top-line {
                margin-top: 0px;
                margin-bottom: 10px;
            }

            .nav-heading {
                @media screen and (min-width: @sm-min) {
                    &:hover {
                        cursor: default;
                        color: @color-5;
                    }
                }

                font-size: 13px;
                text-transform: uppercase;
                color: @color-5 !important;
                background-color: @color-4 !important;
            }

            @media screen and (min-width: @sm-min) {
                .nav-heading,
                .nav-link {
                    padding-bottom: @spacer;
                }
            }

            .sub-menu-column {
                text-align: left;
            }
        }
    }
}

.clickable-item {
    position: relative;
    padding: 10px 60px 10px @spacer;

    ~ .sub-menu-collapsable {
        transition: all 0.3s ease-out;

        &.second-level {
            font-size: 14px;
        }

        .nav-item > & {
            @media screen and (max-width: @xs-max) {
                display: none;
            }
        }
    }

    &.active ~ .sub-menu-collapsable {
        display: block;
        max-height: 100%;
    }

    &.active {
        ~ .expand-button {
            background: url('img/minus-black.png') no-repeat;
            .background-size(cover);
        }

        > .lng-chevron {
            display: none;
        }
    }

    .triangle-with-shadow {
        position: absolute;
        width: 39px;
        height: 18px;
        margin: auto;
        bottom: -4px;
        left: 0;
        right: 0;
        z-index: 9999;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s ease-out;
        .box-shadow(0, 16px, 10px, -17px, rgba(0, 0, 0, 0.5));

        &:after {
            content: "";
            position: absolute;
            width: 27px;
            height: 27px;
            background: @header-color;
            transform: rotate(45deg);
            top: 6px;
            left: 6px;
            .box-shadow(-2px, -2px, 10px, -2px, rgba(0, 0, 0, 0.5));
        }
    }
}

/* ***********************   SEARCH   *********************** */
.search {
    position: relative;
    display: inline-block;
    height: 30px;
    border: 1px solid @color-8;

    &_fullwidth {
        width: 100%;
        height: 45px;
        margin-top: calc(@spacer * 2);

        @media screen and (max-width: @xs-max) {
            margin-top: @spacer;
        }

        .search__button {
            right: 10px;
        }
    }

    &-mobile-wrapper {
        max-height: 0;
        overflow: hidden;
        padding: 0;
        background-color: @header-color;
        transition: margin-top 0.3s ease-in;
        .box-shadow(0, 5px, 10px, -2px, #b0b0b0);

        @media screen and (min-width: @sm-min) {
            display: none;
        }
    }

    &__input {
        padding: 0 30px 0 10px;
        height: 100%;
        border: none;
        width: 100%;
    }

    &.header-search {
        .search__input {
            width: 100px;
            transition: width 0.3s ease-out;

            &:focus {
                @media screen and (max-width: @xs-max) {
                    width: 150px;
                }

                @media screen and (min-width: @sm-min) {
                    width: 130px;
                }

                @media screen and (min-width: @md-min) {
                    width: 200px;
                }
            }
        }
    }

    &__button {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 5px;
        width: 20px;
        height: 20px;
        background: url('img/search.png') no-repeat;
        background-attachment: scroll;
        .background-size(contain);
    }
}

.search-opener {
    margin-right: 55px;
    margin-top: 12px;
    width: 30px;
    height: 30px;
    background: url('img/search_blue.png') no-repeat;
}

.refine-search {
    border: 1px solid @color-3;
    padding: @spacer;
    margin-top: calc(@spacer * 2);
    cursor: pointer;
    transition: max-height 0.3s ease-out;

    @media screen and (max-width: @sm-max) {
        &_margin-before-md {
            margin-top: calc(@spacer * 2);
        }
    }

    @media screen and (max-width: @sm-max) {
        &__wrapper {
            max-height: 0;
            overflow: hidden;
        }

        &__title {
            margin: 0;
            border: none;

            &.active {
                border-bottom: 1px solid @color-8;

                & + .refine-search__wrapper {
                    max-height: 600px;
                }
            }
        }
    }
}

.search-results {
    &__count {
        margin-top: 15px;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: bold;
        color: @color-1;
    }

    &__item {
        border-bottom: 2px solid @color-8;
        padding: 25px 50px;

        &:last-of-type {
            border: none;
        }

        @media screen and (max-width: @xs-max) {
            padding: 15px 30px;
        }
    }

    &__heading {
        font-size: 18px;
        font-weight: bold;
    }

    &__link {
        font-weight: bold;

        &,
        &:hover,
        &:focus {
            color: @color-3;
        }
    }

    &__text {
        margin-top: 5px;
    }

    &__theme {
        display: inline-block;
        font-weight: bold;

        &:after {
            content: ",";
        }

        &:last-of-type:after {
            content: none;
        }
    }
}

/* ***********************   INFO-BLOCK   *********************** */
@piggy-width: 50px;

.info-block {
    max-width: 300px;
    min-height: 140px;
    padding: @spacer;
    box-sizing: border-box;
    border: 4px solid @info-block-border;
    background-color: @info-block-background;
    text-align: left;
    margin-top: @spacer;
    margin-bottom: @spacer;

    &__heading {
        color: @info-block-title;
        padding: 0;

        &:after {
            content: none;
        }
    }

    &__title {
        font-weight: bold;
        color: @info-block-text;
    }

    &__content {
        &.sub-menu-collapsable {
            display: block;
        }

        position: relative;
        padding-top: 12px;
        padding-left: @piggy-width + 12px;

        .nav-link {
            margin-top: 5px;
        }
    }

    &__image {
        position: absolute;
        left: 0;
        width: @piggy-width;
    }

    &__link {
        color: @link-color;
    }

    &__link:hover {
        text-decoration: none;
        color: @link-hover-color;
    }

    &__link:visited {
        color: @link-visited-color;
    }

    &__link:focus {
        .info-block__text {
            text-decoration: underline;
        }
    }
}

.sub-menu-content {
    .info-block {
        @media screen and (min-width: @sm-min) {
            &__heading {
                &:hover {
                    cursor: default !important;
                }
            }
        }

        @media screen and (max-width: @xs-max) {
            max-width: 100%;
            min-height: auto;
            padding: 0;
            border: 0;

            &__heading {
                color: @color-5;
                font-size: 13px;
                background-color: @color-4 !important;

                &:after {
                    content: '';
                    width: 25px;
                    height: 25px;
                    top: 0;
                    bottom: 0;
                    position: absolute;
                    margin-top: auto;
                    margin-bottom: auto;
                    right: 20px;
                }

                + .info-block__content {
                    display: block;
                }
            }

            &__content {
                display: none;
                padding: 0;

                &:before {
                    content: none;
                }

                .nav-link {
                    margin-top: 0;
                }
            }

            &__image {
                display: none;
            }

            p {
                padding-left: 20px;
            }
        }
    }
}

/* ***********************   GREETING-WINDOW   *********************** */
@triangle-separator-sm-width: 60px;
@triangle-separator-sm-height: 30px;
@triangle-separator-xs-width: 16px;
@triangle-separator-xs-height: 7px;

main {
    position: relative;
}

.greetings-window {
    background-color: @color-4;
    position: relative;
    opacity: 0.9;
    text-align: center;
    padding: 35px;
    z-index: 50;

    &__info-buttons {
        display: none;

        .cta-button {
            margin: 0 2px;
        }

        .cta-button.btn-block-secondary {
            color: #000;
            padding: 12px 40px 12px 15px;
            text-align: center;
        }

        .btn-subtitle {
            font-weight: normal;
            color: #000;
            font-size: inherit;
            display: block;
        }

        @media (max-width: 767px) {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 15px 20px;
            align-items: center;
        }
    }
    .box {
        box-sizing: border-box;
    }

    &--left,
    &--right {
        background-color: transparent;
        height: fit-content!important;
        padding: 0;
        text-align: left;

        .row {
            margin: 0;
            @media (min-width: 768px) {
                .cta-button:not(:last-child) {
                    margin-right: 15px;
                }
                .cta-button + .cta-button {
                    margin-left: 0;
                }
            }
        }

        @media (max-width: 768px) {
            width: 100%;
        }

        .box {
            padding: 25px;
            max-width: 450px;
            background-color: #fff;

            @media (max-width: 767px) {
                padding: 0;
                max-width: none;
            }
        }
    }

    &--right {
        .box {
            margin-left: auto;
        }
    }

    @media screen and (max-width: @xs-max) {
        position: relative;
        opacity: 1;
        padding: 25px;
        top: 0;

        .question-text {
            /*
            position: absolute;
            top: 175px;
            left: 0;
            right: 0;
            */
        }
    }

    @media screen and (min-width: @sm-min) and (max-width: @sm-max) {
        top: 16%;
        height: 320px;
    }

    @media screen and (min-width: @md-min) {
        height: 330px;
    }

    @media screen and (max-width: @sm-max) {
        transform: translateY(0);
    }

    h1 {
        color: @color-1;
        font-weight: bold;
        font-size: 40px;
        @media screen and (max-width: @xxs-max) {
            font-size: 56px;
        }
    }

    .question-text {
        font-size: 24px;
        margin-top: @spacer;
    }
}

.preview-block,
.hero-preview-block {
    position: relative;
    max-height: 640px;
    overflow: hidden;
    margin-bottom: -@triangle-separator-sm-height;

    @media screen and (max-width: @xs-max) {
        margin-bottom: -@triangle-separator-xs-height;
    }


    .button-action-div {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 1;
        background-color: @color-4;
        opacity: 0.8;
        padding: 0 6px;

        .action-video {
            padding: 0;
            border: 0;
            background: transparent;
            box-sizing: border-box;
            width: 0;
            height: 24px;
            border-color: transparent transparent transparent @primary-scheme-button-text-color;
            /* transition: 100ms all ease; */
            cursor: pointer;
            /* play state */
            border-style: double;
            border-width: 0px 0 0px 24px;
            margin-top: 7px;
            margin-bottom: 7px;

            &.paused {
                border-style: solid;
                border-width: 11px 0 11px 24px;
                margin-bottom: 5px;
                height: 24px;
            }

            &:hover {
                border-color: transparent transparent transparent #404040;
            }
        }
    }
}

.triangle-row-wrapper {
    width: 50%;
    background-color: transparent;

    &.first {
        padding-right: @triangle-separator-sm-width;
    }

    &.second {
        padding-left: @triangle-separator-sm-width;
    }

    .triangle-row {
        position: relative;
        height: @triangle-separator-sm-height;
        background-color: white;

        &:after {
            content: '';
            position: absolute;
            top: 0;
            width: 0;
            height: 0;
            border-bottom: @triangle-separator-sm-height solid white;
        }
    }

    &.first {
        .triangle-row {
            &:after {
                right: -@triangle-separator-sm-width;
                border-right: @triangle-separator-sm-width solid transparent;
            }
        }
    }

    &.second {
        .triangle-row {
            &:after {
                left: -@triangle-separator-sm-width;
                border-left: @triangle-separator-sm-width solid transparent;
            }
        }
    }

    @media screen and (max-width: @xs-max) {
        &.first {
            padding-right: @triangle-separator-xs-width;
        }

        &.second {
            padding-left: @triangle-separator-xs-width;
        }

        .triangle-row {
            height: @triangle-separator-xs-height;

            &:after {
                border-bottom-width: @triangle-separator-xs-height;
            }
        }

        &.first {
            .triangle-row {
                &:after {
                    right: -@triangle-separator-xs-width;
                    border-right: @triangle-separator-xs-width solid transparent;
                }
            }
        }

        &.second {
            .triangle-row {
                &:after {
                    left: -@triangle-separator-xs-width;
                    border-left: @triangle-separator-xs-width solid transparent;
                }
            }
        }
    }
}

.button-wrapper {
    padding: 0 20px;
    margin: @spacer 0 35px;

    .cta-button {
        width: 100%;
    }
}

/* ***********************   STEPS   *********************** */
@step-item-header-border-width: 3px;
@steps-header-button-width: 216px;
@steps-header-button-height: 37px;
@steps-photo-height: 472px;
@steps-photo-message-height: 214px;
@steps-photo-message-width: 390px;

.steps-section-wrapper {
    margin-bottom: -15px;
}

.steps-section {
    padding: 0 20px;

    @media screen and (max-width: @xs-max) {
        padding: 0;
    }

    @media screen and (min-width: @sm-min) {
        .steps-photo, .step-items {
            width: 50%;
            min-height: @steps-photo-height;
        }

        .step-items {
            float: right;
        }
    }

    .steps-header,
    .steps-footer {
        position: relative;
        width: 50%;
        height: 65px;
        margin-left: -5px;
        left: 50%;
        border-left: 10px solid lighten(@color-1, 5%);

        @media screen and (max-width: @xs-max) {
            width: 100%;
            height: auto;
            left: 0;
            margin-left: 0;
        }
    }

    .steps-header {
        &__board {
            width: @steps-header-button-width;
            height: @steps-header-button-height;
            background-color: darken(@color-1, 12%);
            color: @color-4;
            text-transform: uppercase;
            line-height: @steps-header-button-height;
            text-align: center;
            font-size: 16px;

            @media screen and (min-width: @sm-min) {
                position: absolute;
                bottom: 0;
                left: -@steps-header-button-width / 2;
            }
        }

        &__text {
            padding: @spacer;
            font-size: 18px;
            font-weight: bold;
            line-height: 1.2;
            margin-bottom: 0;
        }
    }

    .steps-photo {
        position: relative;
        border-right: 10px solid lighten(@color-1, 5%);
        right: -5px;
        overflow: hidden;

        &__message-wrapper {
            position: absolute;
            height: @steps-photo-height;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
        }

        &__message {
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            padding: 30px 25px;
            width: @steps-photo-message-width;
            background: #fff;
            opacity: 0.9;
            font-size: 30px;
            line-height: 1;

            @media screen and (min-width: @sm-min) and (max-width: @sm-max) {
                width: 100%;
                font-size: 28px;
                overflow: hidden;
            }
        }

        &__first,
        &__second {
            position: relative;
            width: auto;
            right: 0;
        }

        &__first {
            height: 472px;
        }

        &__second {
            display: none;
            height: 430px;
            margin-top: 10px;

            &.active {
                display: block;
            }

            @media screen and (min-width: @sm-min) and (max-width: @sm-max) {
                height: 395px;
            }

            @media screen and (min-width: @md-min) and (max-width: @md-max) {
                height: 452px;
            }
        }
    }

    .step-items {
        position: relative;
        border-left: 10px solid lighten(@color-1, 5%);

        @media screen and (min-width: @sm-min) {
            left: -5px;
        }

        .step-item {
            outline: none;

            &:last-of-type {
                .step-item__header {
                    margin-bottom: 0;

                    @media screen and (max-width: @xs-max) {
                        margin-bottom: 30px;
                    }
                }
            }

            &__header {
                position: relative;
                max-width: 270px;
                padding: 25px 0 25px 95px;
                height: 112px;
                margin-bottom: 8px;
                border-top: @step-item-header-border-width solid lighten(@color-1, 5%);
                border-bottom: @step-item-header-border-width solid lighten(@color-1, 5%);
                transition: all 0.3s ease-out;

                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    width: @step-item-header-border-width;
                }

                &:before {
                    width: 0;
                    top: -3px;
                    right: 0;
                    height: 0;
                    border-left: 32px solid transparent;
                    border-top: 56px solid white;
                }

                &:after {
                    width: 0;
                    bottom: -3px;
                    right: 0;
                    height: 0;
                    border-left: 32px solid transparent;
                    border-bottom: 56px solid white;
                }

                &:hover {
                    cursor: pointer;
                }

                @media screen and (max-width: @xs-max) {
                    max-width: 100%;
                    max-height: 104px;
                }
            }

            &__header-image {
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                left: 30px;

                &.step-1-image {
                    width: 48px;
                    height: 51px;
                    background: url('img/step_1.png') no-repeat;
                    .background-size(cover);
                }

                &.step-2-image {
                    width: 50px;
                    height: 63px;
                    background: url('img/step_2.png') no-repeat;
                    .background-size(cover);
                }

                &.step-3-image {
                    left: 22px;
                    width: 62px;
                    height: 72px;
                    background: url('img/step_3.png') no-repeat;
                    .background-size(cover);
                }

                &.step-4-image {
                    left: 18px;
                    width: 72px;
                    height: 72px;
                    background: url('img/step_4.png') no-repeat;
                    .background-size(cover);
                }
            }

            &__triangle-helper {
                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    width: @step-item-header-border-width;
                    height: 64px;
                    right: 16px;
                    background-color: lighten(@color-1, 5%);
                }

                &:before {
                    top: -6px;
                    transform: rotate(-30deg);
                }

                &:after {
                    bottom: -6px;
                    transform: rotate(30deg);
                }

                @media screen and (max-width: @xs-max) {
                    &:before,
                    &:after {
                        height: 60px;
                        right: 17px;
                    }
                }
            }

            &__heading {
                font-size: 28px;
                line-height: 1;
                margin-bottom: 0;

                @media screen and (max-width: 360px) {
                    font-size: 22px;
                }
            }

            &__heading,
            &__main-text {
                font-weight: bold;
            }

            &__about-text {
                letter-spacing: -0.3px;
            }

            &__heading,
            &__about-text {
                color: @color-1;

                .lng-chevron {
                    color: @color-6;
                }
            }

            &__about-text {
                position: relative;
                font-size: 24px;

                @media screen and (max-width: 360px) {
                    font-size: 18px;
                }
            }

            &__close-button {
                position: relative;
            }

            &__content {
                height: 0px;
                display: none;
                overflow: hidden;
                padding: 0;
                transition: all 0.3s ease-out;

                .cta-button {
                    margin-bottom: 18px;
                }
            }

            .lng-chevron {
                margin-left: 5px;
            }

            &.active {
                .step-item__content {
                    display: block;
                    padding: 25px 55px 65px 100px;
                    height: auto;

                    @media screen and (max-width: @sm-max) {
                        padding: @spacer 0 18px @spacer;
                    }
                }

                .step-item__close-button {
                    &:after {
                        content: '';
                        display: inline-block;
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        right: -38px;
                        top: -1px;
                        bottom: 0;
                        background: url('img/close-button.png') no-repeat;
                        .background-size(cover);

                        @media screen and (max-width: 360px) {
                            top: -3px;
                        }
                    }
                }
            }

            &:hover,
            &.hover,
            &.active {
                .step-item__header {
                    background-color: lighten(@color-1, 5%);
                    max-width: 100%;
                }

                .step-item__triangle-helper {
                    border-left-color: lighten(@color-1, 5%);
                }

                .step-item__heading,
                .step-item__about-text {
                    color: @color-4;

                    .lng-chevron {
                        color: @color-6;
                    }
                }

                .step-1-image {
                    background: url('img/step_1_alt.png') no-repeat;
                    .background-size(cover);
                }

                .step-2-image {
                    background: url('img/step_2_alt.png') no-repeat;
                    .background-size(cover);
                }

                .step-3-image {
                    background: url('img/step_3_alt.png') no-repeat;
                    .background-size(cover);
                }

                .step-4-image {
                    background: url('img/step_4_alt.png') no-repeat;
                    .background-size(cover);
                }
            }
        }
    }
}

/* ***********************   CONTENT   *********************** */

@main-content-horizontal-paddings: 100px;

.content {
    @media screen and (max-width: @xs-max) {
        margin-top: @header-mobile-height;
    }
}

.content-top {
    .block-width();
    position: relative;
    overflow: hidden;

    &_max-height {
        max-height: 465px;
    }

    &__step-image {
        position: absolute;
        left: @spacer;
        top: 25px;
        width: auto;
        height: 64px;
        object-fit: cover;
        object-position: 0 0;

        @media screen and (max-width: @xs-max) {
            width: auto;
            height: 45px;
            top: 15px;
            left: 25px;
        }
    }

    &__heading {
        position: relative;
        font-size: 56px;
        font-weight: bold;
        color: @color-1;

        @media screen and (max-width: @xs-max) {
            padding-left: 25px;
            font-size: 28px;
        }
    }

    &__image {
        @media screen and (min-width: @sm-min) {
            transform: translateY(-7%);
        }

        @media screen and (min-width: @md-min) {
            transform: translateY(-12%);
        }
    }

    &__step-window {
        position: absolute;
        padding: 30px @main-content-horizontal-paddings;
        bottom: 0;
        left: 0;
        right: 0;
        background: @color-4;
        opacity: 0.9;
        z-index: 9;

        @media screen and (max-width: @xs-max) {
            /* height: 200px; */
            padding: 20px 40px;
            text-align: center;
            position: static;

            &:first-of-type {
                top: 0;
                bottom: auto;
            }
        }
    }

    &__greetings-text {
        font-size: 24px;
        margin-top: @spacer;
        line-height: 1.1;
        font-weight: bold;

        &.padding-right-from-sm {
            @media screen and (min-width: @sm-min) {
                padding-right: 100px;
            }
        }

        @media screen and (max-width: @xs-max) {
            margin: @spacer 0;
            font-size: 18px;
        }
    }

    .btn-wrapper {
        position: absolute;
        right: 0;
        bottom: 30px;
        z-index: 100;

        .cta-button {
            margin-left: 10px;
        }

        @media screen and (max-width: @xs-max) {
            width: auto;
            height: auto;
            position: static;

            .cta-button {
                padding: 10px 12px;
                min-height: 48px;
                font-size: 16px;
                text-align: center;

                &:hover {
                    color: darken(@primary-scheme-button-text-color, 12%);
                    background: transparent;
                }
            }
        }

        @media screen and (max-width: @sm-min) {
            .cta-button {
                padding: 10px 40px;
            }
        }
    }
}

.content-center {
    .block-width();

    p {
        margin-bottom: 16px;
    }

    li:not(.homepage-list__item, .tabs-module__tab-wrapper, .accordion__list-item) {
        margin-bottom: 8px;

        &::marker {
            color: @heading-color;
        }
    }

    &__heading {
        color: @color-1;
    }
}

.stacking-container {
    width: calc(100% + @spacer);
    clear: both;
    overflow: hidden;
    margin-left: -(@spacer);

    @media screen and (max-width: @xs-max) {
        margin-bottom: calc(@spacer * 2);
    }

    & > div,
    & > ul,
    & > section {
        margin: @spacer 0 0 @spacer;

        @media screen and (max-width: @xs-max) {
            clear: both;
            width: 100% !important;
        }
    }

    & > .pricing:nth-child(4) {
        padding-right: @spacer;
    }

    & > .video-block iframe {
        width: 100% !important;
        padding: @spacer;
    }

    display: flex;
    flex-wrap: wrap;
}

.content-bottom {
    .block-width();

    &__top-text {
        color: @color-1;
        font-size: 20px;
        font-weight: bold;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 65px;

        @media screen and (max-width: @xs-max) {
            text-align: center;
            padding-top: 25px;
        }
    }
}

/* ***********************   BOOTSTRAP-CAROUSEL   *********************** */

.image-carousel {
    .carousel-indicators {
        width: auto;
        left: auto;
        right: 30px;
    }

    .carousel-control {
        cursor: pointer;
        background-image: none;
    }

    .item {
        max-height: 465px;

        @media screen and (max-width: @xs-max) {
            max-height: 390px;
        }
    }

    &-control {
        opacity: 0.6;
    }

    .arrow {
        &-left,
        &-right {
            position: absolute;
            top: 40%;
            width: 34px;
            height: 60px;

            &::before {
                content: none;
            }
        }

        &-left {
            left: 40px;
            background: url('img/arrow_left_white.png') no-repeat;
            .background-size(cover);
        }

        &-right {
            right: 40px;
            background: url('img/arrow_right_white.png') no-repeat;
            .background-size(cover);
        }
    }

    @media screen and (max-width: @xs-max) {
        .carousel-control {
            bottom: 30px;
            top: unset;
            height: 160px;

            .arrow {
                &-left,
                &-right {
                    top: auto;
                    bottom: 20px;
                    width: 20px;
                    height: 35px;
                }

                &-left {
                    left: 25px;
                    background: url('img/arrow_left_gray.png') no-repeat;
                    .background-size(cover);
                }

                &-right {
                    right: 25px;
                    background: url('img/arrow_right_gray.png') no-repeat;
                    .background-size(cover);
                }
            }
        }
    }
}

/* ***********************   SMART-CAROUSEL   *********************** */

.smart-carousel,
.section-block {
    .block-width();

    .content-bottom &,
    .content-top & {
        @media screen and (min-width: @md-min) {
            width: @container;
        }
    }

    .clearfix();

    .stacking-container & {
        width: 700px !important;
        margin-right: 40px;
    }

    position: relative;
    margin: 30px auto;
    padding: 0;
    clear: both;

    &__outer-wrapper {
        overflow: hidden;
        min-height: 250px;
    }

    &__inner-wrapper {
        position: relative;
        left: 0;
        transition: left 0.2s ease-in-out;
    }

    &__left-button,
    &__right-button {
        display: none;
        color: transparent;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: 66px auto;
        width: 34px;
        height: 60px;
        cursor: pointer;
        z-index: 100;

        &.appeared {
            display: block;
        }
    }

    &__left-button {
        left: 0;
        background: url('img/arrow_left_blue.png') no-repeat;
        .background-size(cover);
    }

    &__right-button {
        right: -25px;
        background: url('img/arrow_right_blue.png') no-repeat;
        .background-size(cover);

        .stacking-container & {
            right: -38px;
        }
    }

    &__item {
        max-width: 292px;
        padding: 0 50px;
        float: left;

        .stacking-container & {
            padding: 0 40px;
            max-width: 234px;
        }
    }

    &__image {
        width: 192px;
        height: 192px;
        border-radius: 50%;
        object-fit: cover;
    }

    &__link-main {
        display: block;
        margin-top: 10px;
        font-size: 20px;
        line-height: 1;
        color: @color-3;

        &:hover,
        &:focus {
            color: @color-6;
            text-decoration: none;
        }
    }

    &__link-section {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        color: @color-3;
        margin: 16px 0;
    }

    &__link-sheet {
        display: block;
        font-size: 14px;
        text-align: left;
        color: @color-3;

        &:hover,
        &:focus {
            color: @color-3;
        }
    }

    &__link {
        display: block;
        font-size: 14px;
        text-align: left;

        &,
        &:hover,
        &:focus {
            color: @color-3;
        }
    }

    &__link-description,
    &__link-ritch-description {
        margin-top: 20px;
        margin-bottom: @spacer;
        font-size: 14px;
        line-height: 1.4;
    }

    &__link-ritch-description {
        display: block;

        .tinymce-wrapper {
            margin: 0 !important;
        }
    }

    &__link-cta {
        display: block;
        margin-top: 20px;
        margin-bottom: @spacer;
    }

    .vertical-line {
        display: none;
        position: absolute;
        width: 5px;
        background-color: @color-1;
        top: 0;
        left: 58px;
        height: 100%;
    }

    .cta-button {
        font-size: 16px !important;
        padding-top: 13px !important;
        text-align: center;
    }

    @media screen and (min-width: @md-min) and (max-width: @md-max) {
        &__item {
            max-width: 322px;
            padding: 0 65px;
        }
    }

    @media screen and (max-width: @sm-max) {
        margin-bottom: 0;

        .vertical-line {
            display: block;
        }

        &__outer-wrapper {
            padding: 0 20px;
        }

        &__inner-wrapper {
            width: 100% !important;
        }

        &__item {
            max-width: 100%;
            padding: 0;
            float: none;
            text-align: left;
            margin-bottom: 50px;
            .clearfix();
        }

        &__left-button,
        &__right-button {
            display: none !important;
        }

        &__image {
            width: 80px;
            height: 80px;
            float: left;
        }

        &__link-main,
        &__link,
        &__link-description,
        &__link-section,
        &__link-ritch-description,
        &__link-sheet,
        &__link-cta {
            width: 80%;
            float: right;
            padding-left: 25px;
        }

        &__link-section {
            display: block;
            float: right;
            padding-left: 25px;
        }

        &__link-description,
        &__link-ritch-description {
            margin-top: 5px;
        }
    }

    @media screen and (max-width: @xs-max) {
        &__link-main,
        &__link,
        &__link-description,
        &__link-section,
        &__link-ritch-description,
        &__link-sheet,
        &__link-cta {
            width: 68%;
        }

        &__link-section {
            display: block;
            float: right;
            padding-left: @spacer;
        }
    }
}

/* *****************************   CTA BUTTON  ****************************** */

.cta-button {

    @media screen and (max-width: @xs-max) {
        & + & {
            margin-bottom: @spacer;
        }
    }

    @media screen and (min-width: @sm-min) {
        & + & {
            margin-left: @spacer;
        }
    }

    .greetings-window &,
    .info & {
        margin-top: @spacer;
    }

    &.btn-block-primary {
        background-color: @primary-scheme-button-background-color;
        color: @primary-scheme-button-text-color;
        border: 1px solid @primary-scheme-button-border;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.2;
        padding: 12px @spacer;
        min-height: @button-height;
        display: inline-block;

        @media (min-width: @xs-max) and (max-width: @ipad-max) {
            font-size: 17px;
            padding: 7px 10px;
            min-height: 40px;
        }

        &._chevron {
            position: relative;
        }

        .btn-subtitle {
            font-weight: normal;
            color: @primary-scheme-button-text-color;
            font-size: inherit;
            display: block;
        }

        &:hover, &:focus {
            background-color: darken(@primary-scheme-button-background-color, 12%);
            color: @primary-scheme-button-text-color-hover;
            text-decoration: none;
            background-color: @primary-scheme-button-background-color-hover;
            border: 1px solid @primary-scheme-button-border-hover;
        }
    }

    &.btn-block-secondary {
        display: inline-block;
        line-height: 1;
        margin-top: 23px;
        font-size: 16px;
        color: @secondary-scheme-button-text-color;
        text-align: center;
    }

    @media screen and (max-width: @xs-max) {
        font-size: 16px;
    }

    &.cta-button-chevron{
        position: relative;
        padding-right: 40px;
        padding-left: 40px;

        &:hover{
            position: relative;
        }

        &.hover-fade{
            &:hover{
                opacity: 0.8;
                -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
                box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
            }
        }

        &:before{
            position: absolute;
            left: calc(100% - 34px);
            top: calc(50% - 12px);
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
            font-family: "new-icons", "roboto-light", arial, sans-serif !important;
            font-weight: normal;
            content: "\e911";
            text-decoration: none;
        }

        &:hover:before{
            position: absolute;
            left: calc(100% - 29px);
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }
    }
}


/* *****************************   CTA BUTTON Extended  ****************************** */

.cta-button-extended {

    @media screen and (max-width: @xs-max) {
        & + & {
            margin-bottom: @spacer;
        }
    }

    @media screen and (min-width: @sm-min) {
        & + & {
            margin-left: @spacer;
        }
    }

    .greetings-window &,
    .info & {
        margin-top: @spacer;
    }

    &.btn-block-primary {
        background-color: @primary-scheme-button-extended-background-color;
        color: @primary-scheme-button-extended-text-color;
        border: 1px solid @primary-scheme-button-extended-border;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.2;
        padding: 12px @spacer;
        min-height: @button-height;
        display: inline-block;

        @media (min-width: @xs-max) and (max-width: @ipad-max) {
            font-size: 17px;
            padding: 7px 10px;
            min-height: 40px;
        }

        &._chevron {
            position: relative;
        }

        &:hover, &:focus {
            background-color: darken(@primary-scheme-button-extended-background-color, 12%);
            color: @primary-scheme-button-extended-text-color-hover;
            text-decoration: none;
            background-color: @primary-scheme-button-extended-background-color-hover;
            border: 1px solid @primary-scheme-button-extended-border-hover;
        }
    }

    &.btn-block-secondary {
        color: @secondary-scheme-button-extended-text-color;
        border: 1px solid @secondary-scheme-button-extended-border;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.2;
        padding: 12px @spacer;
        min-height: @button-height;
        display: inline-block;

        @media (min-width: @xs-max) and (max-width: @ipad-max) {
            font-size: 17px;
            padding: 7px 10px;
            min-height: 40px;
        }

        &._chevron {
            position: relative;
        }
    }

    &.btn-block-white {
        background-color: @white-scheme-button-extended-background-color;
        color: @white-scheme-button-extended-text-color;
        border: 1px solid @white-scheme-button-extended-border;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.2;
        padding: 12px @spacer;
        min-height: @button-height;
        display: inline-block;

        @media (min-width: @xs-max) and (max-width: @ipad-max) {
            font-size: 17px;
            padding: 7px 10px;
            min-height: 40px;
        }

        &._chevron {
            position: relative;
        }

        &:hover, &:focus {
            background-color: darken(@white-scheme-button-extended-background-color, 12%);
            color: @white-scheme-button-extended-text-color-hover;
            text-decoration: none;
            background-color: @white-scheme-button-extended-background-color-hover;
            border: 1px solid @white-scheme-button-extended-border-hover;
        }
    }

    @media screen and (max-width: @xs-max) {
        font-size: 20px;
    }

    &.cta-button-chevron {
        position: relative;
        padding-right: 40px;

        &:hover {
            position: relative;
        }

        &.hover-fade {
            &:hover {
                opacity: 0.8;
                -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
                box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
            }
        }

        &:before {
            font-family: "new-icons","roboto-light",arial,sans-serif !important;
            position: absolute;
            left: calc(100% - 34px);
            top: calc(50% - 12px);
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
            font-weight: normal;
            content: "\e911";
            text-decoration: none;
        }

        &:hover:before {
            position: absolute;
            left: calc(100% - 29px);
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }
    }
}


@font-face {
    font-family: "icons";
    font-display: block;
    src: url("../assets/fonts/iconmoon/icomoon.e82c2ff6.woff")
    format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "new-icons";
    font-display: block;
    src: url("../assets/fonts/iconmoon/icomoon.10b8d0be.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
  }

/* ********************** ICON CTA BLOCK ************************************ */
.icon-cta-block {
    margin-top: @spacer+10;
    margin-bottom: @spacer+10;
    clear: both;
    min-height: 200px;
    border: 1px solid #d5d5d5;
    width: 100%;

    &.box-block-none {
        background-color: @colour-box-block-none-background;

        .title, p, .icon, li {
            color: @colour-box-block-none-font;
        }
    }

    &.box-block-primary {
        background-color: @colour-box-block-primary-background;

        .title, p, .icon, li, li::marker {
            color: @colour-box-block-primary-font;
        }
    }

    &.box-block-secondary {
        background-color: @colour-box-block-secondary-background;

        .title, p, .icon, li, li::marker {
            color: @colour-box-block-secondary-font;
        }
    }

    .icon-section, .info-section, .button-list-section {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
    }

    .icon-section {
        .icon {
            &:before {
                font-size: 80px;
                -webkit-transition: all 0.2s linear;
                -o-transition: all 0.2s linear;
                transition: all 0.2s linear;
                font-family: "icons", "roboto-light", arial, sans-serif !important;
                font-weight: normal;
                text-decoration: none;
            }
        }

        .cta-img {
            height: 100px;
        }
    }

    .info-section {
        .content {
            text-align: left;
            padding: 10px;
            width: 100%;

            .title {
                font-size: 32featurepx;
                margin-bottom: 15px;
            }
        }
    }

    .button-list-section {
        .buttons-wrapper {
            padding: 5px;

            button {
                width: 100%;
                display: list-item;
                margin-left: 0;
                margin-right: 0;
                margin-top: 5px;
                margin-bottom: 0;
                font-size: 16px;
            }
        }
    }

    @media screen and (max-width: @sm-max) {
        &, .icon-section, .info-section, .button-list-section {
            min-height: 100px;
            justify-content: left;
        }

        .icon-section {
            padding: 30px;
        }

        .info-section {
            .content {
                margin: 0;
                padding-right: 30px;
                padding-left: 30px;
                padding-top: 0;
                padding-bottom: 0;
                text-align: left;

                p, .title {
                    padding: 5px;
                    margin-bottom: 0;
                }
            }
        }

        .button-list-section {
            .buttons-wrapper {
                width: 100%;
                padding: 30px;
            }
        }
    }
}

/* ***********************   BOTTOM PENSIONS (INFO)   *********************** */
.info, .cta-block {
    clear: both;
    margin-top: @spacer;
    background-color: @bottom-pension-color;

    .stacking-container & {
        clear: none;
    }

    text-align: center;

    &__first-part {
        padding: 30px 20px 40px;
    }

    &__second-part {
        padding: 40px 20px;
    }

    &__heading {
        padding-top: 20px;

        &.heading-color {
            color: @heading-color !important;
        }
    }

    a,
    p,
    h3,
    ol,
    ul {
        color: @bottom-pension-text-color;
    }

    &__inner {
        background-color: @bottom-pension-color;
        padding: 30px 30px 30px 30px;
    }

    &__text {
        padding-top: 5px;
        margin-bottom: 0px !important;
        .tinymce-wrapper{
            margin-top: 2px !important;
        }
    }

    &__image {
        width: 50px;
        height: 50px;
        margin: auto;
    }

    &__separator {
        width: 100%;
        height: 3px;
        background-color: @bottom-pension-text-color;
    }

    &__contacts-text {
        padding-bottom: 20px;
    }

    &__email-link,
    &__phone-link {
        display: inline-block;
        font-weight: bold;
        position: relative;
        letter-spacing: 0.03em;

        &:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
        }
    }

    &__email-link {
        padding-left: 40px;

        &:before {
            content: '';
            top: 3px;
            width: 27px;
            height: 16px;
            background: url('img/mail.png') no-repeat;
            .background-size(cover);
        }
    }

    &__phone-link {
        padding-left: 33px;

        &:before {
            content: '';
            top: -3px;
            width: 23px;
            height: 24px;
            background: url('img/phone.png') no-repeat;
            .background-size(cover);
        }
    }

    @media screen and (min-width: @sm-min) {
        &__email-link {
            padding-right: 60px;
        }
    }

    @media screen and (max-width: @sm-max) {
        .cta-button {
            margin-top: 25px;
        }
    }

    @media screen and (max-width: @xs-max) {
        &__first-part {
            padding-top: 20px;
            padding-bottom: 30px;
        }

        &__second-part {
            padding-top: 14px;
            padding-bottom: 14px;
        }

        &__text {
            padding-top: @spacer;
            font-size: 18px;
            line-height: 1.1;
        }

        &__contacts-text {
            padding-bottom: 12px;
        }

        &__email-link {
            padding-bottom: 16px;
            word-break: break-all;
        }
    }
}

/* *********************** Image Hero Banner Block ************* */
.image-hero-banner-block {
    .img-wrapper {
        .box {
            .row {
                .cta-button {
                    font-size: 16px;
                }

                text-align: left;

                .cta-button {
                    font-size: 16px;
                }

                .cta-button:not(:last-child) {
                    margin-right: 15px;
                }

                .cta-button + .cta-button {
                    margin-left: 0;
                }
            }
        }
    }
    .img-wrapper{
        width: 100%;
        min-height: 500px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top: 80px;
        padding-bottom: 80px;

        .box {
            max-width: 550px;
            padding: 25px;
            background-color: #fff;

            &.right {
                float: right;
            }

            .content-top__heading {
                font-size: 56px;
            }

            .cta-button {
                margin-top: @spacer;
                font-size: 16px;
                display: inline-block;
                padding: 12px 40px 12px 15px;

                &.btn-block-secondary {
                    color: black;
                }
            }

            .cta-button-chevron {
                &::before {
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }

        .responsive-img {
            display: none;
            width: 100%;
        }
    }
    // .video-wrapper {
    //     height: auto;
    //     max-height: 640px;
    //     overflow: hidden;
    //     position: relative;
    //     padding-top: 0;

    //     &__inner {
    //         width: 100%;
    //         max-width: 1170px;
    //         position: absolute;
    //         top: 50%;
    //         transform: translateY(-50%);
    //         width: 100%;
    //     }

    //     .box {
    //         width: 100%;
    //         max-width: none;
    //     }
    // }

    @media screen and (max-width: @xs-max) {
        .img-wrapper {
            padding: 0;
            background: none !important;
            height: auto;

            .container {
                padding: 0;

                .responsive-img {
                    display: block;
                }
            }

            .box {
                max-width: 100%;

                .content-top__heading {
                    padding-left: 0;
                }
            }
        }
    }
}

.video-hero-block {
    position: relative;
    min-height: 640px;

    @media (max-width: 1024px) {
        min-height: auto;
    }

    .greetings-window {
        height: fit-content!important;
    }

    .hero-preview-block {
        min-height: 640px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .btn-block-secondary {
            padding: 12px 40px 12px 15px;
            color: black;
        }

        @media (max-width:1024px) {
            min-height: 582px;
        }

        @media (max-width: 768px) {
            min-height: 500px;
        }
        
        
        @media (max-width: 767px) {
            max-height: none;
            min-height: auto;
        }
    }

    .greetings-window {
        @media (max-width: 768px) {
            &--right {
                margin-right: 0;
            }

            &--left {
                margin-left: 0;
            }
        }
    }

    video {
        position: absolute;
        top: 0;
        @media (max-width: 1024px) {
            height: 100%;
            width: auto;
        }
    }

    .cta-button.cta-button-chevron {
    }

    .cta-button.cta-button-chevron:before {
        font-family: "new-icons","roboto-light",arial,sans-serif !important;

        content: "\e911";
    }
}

/* ***********************   CTA-BLOCK   *********************** */
.cta-block {
    .block-width();
    background-color: transparent !important;

    &__inner {
        background-color: @colour-cta-block-background-color !important;
    }

    &__separator {
        background-color: @colour-cta-block-background-color !important;
    }

    &__heading {
        color: @cta-heading-color !important;
    }

    ul > li, ol > li,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: @colour-cta-block-text-color;
    }

    a {
        color: @colour-cta-block-link-color !important;

        &:hover {
            color: @colour-cta-block-link-hover-color !important;
        }

        &:visited {
            color: @colour-cta-block-link-visited-color !important;
        }
    }

    .cta-button._chevron {
        display: inline-block;
        font-size: 16px !important;
    }

    ul, ol {
        li {
            &::marker {
                color: @colour-cta-block-text-color !important;
            }
        }
    }
}


/* ***********************   Box Block   *********************** */
.box-block {
    padding: 100px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    &.box-centered {
        text-align: center;
    }

    .img-wrapper {
        img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }
    }

    .content-wrraper {
        margin-bottom: 30px;
    }

    .buttons-wrapper {
        .cta-button-extended {
            width: 100%;
            margin-bottom: 10px;
            margin-left: 0;
        }
    }

    h3 {
        font-size: 28px;
        font-weight: 400;
        margin-bottom: 10px
    }

    h2 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    p {
        font-size: 16px;
    }

    &.box-block-none {
        border: 1px solid #d9d9d9;
        background-color: @colour-box-block-none-background;

        p, li, .title {
            color: @colour-box-block-none-font;
        }

        .title {
            color: @heading-color;
        }
    }

    &.box-block-primary {
        background-color: @colour-box-block-primary-background;

        p, li, li::marker, .title, h3 {
            color: @colour-box-block-primary-font;
        }
    }

    &.box-block-secondary {
        background-color: @colour-box-block-secondary-background;

        p, li, li::marker, .title, h3 {
            color: @colour-box-block-secondary-font;
        }
    }

    @media screen and (max-width: @sm-max) {
        padding: 30px;
    }
}
/* ***********************   /Box Block   *********************** */

/* ***********************   Dual Box Block   *********************** */

.dual-box-block {
    margin-top: @spacer+10;
    margin-bottom: @spacer+10;
    padding: 0;

    .aligned-row {
        display: flex;
        flex-flow: row wrap;

        &::before {
            display: block;
        }
    }

    .left-side {
        padding-right: 0;
    }

    .right-side {
        padding-left: 0;
    }

    .heading {
        h2 {
            font-size: 32px;
            font-weight: 100;
            line-height: 34px;
            margin: 0;
            margin-bottom: 20px
        }

        .separator {
            margin: @spacer 0;
            background-color: @heading-color;
            width: 90px;
            height: 3px;
            border-radius: 1.5px;
            display: inline-block;
        }
    }

    .box-block {
        h3.title {
            font-size: 28px;
        }

        @media screen and (max-width: @xs-max) {
            h3.title {
                font-size: 28px;
            }
        }
    }

    .infographic {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    @media screen and (max-width: @sm-min) {
        .aligned-row {
            display: block;
            flex-flow: nowrap;

            &::before {
                display: block;
            }
        }

        .left-side {
            padding-right: 15px;
        }

        .right-side {
            padding-left: 15px;
        }
    }
}


/* ***********************   Grid Box Block   *********************** */
.grid-box-block {
    margin-top: @spacer+10;
    margin-bottom: @spacer+10;
    padding: 0;

    .col-sm-12, .col-sm-6, .col-sm-4, .col-sm-3, .col-sm-2 {
        margin-bottom: 0;
    }

    .aligned-row {
        display: flex;
        flex-flow: row wrap;

        &:not(:last-child) {
            margin-bottom: @spacer;
        }

        &::before {
            display: block;
        }
    }

    .heading {
        text-align: center;
        padding-top: 10px;
        padding-bottom: 20px;
        max-width: 80%;
        margin: 0 auto;

        h2 {
            font-size: 48px;
            font-weight: 100;
            line-height: 34px;
            margin: 0;
            margin-bottom: 20px;
        }

        .separator {
            margin: @spacer 0;
            background-color: @heading-color;
            width: 90px;
            height: 3px;
            border-radius: 1.5px;
            display: inline-block;
        }
    }

    .box-block {
        padding: 0;

        .img-wrapper {
            width: 100%;

            img {
                height: 150px;
                width: 100%;
                object-fit: cover;
            }
        }

        .content-wrraper, .buttons-wrapper {
            padding: 15px;
        }


        .content-wrraper {
            margin-bottom: auto;
        }
    }

    @media screen and (max-width: @sm-min) {
        .aligned-row {
            display: block;
            flex-flow: nowrap;

            &::before {
                display: block;
            }
        }
    }
}
/* ***********************   /Grid Box Block   *********************** */

/* ***********************   OPTIONS   *********************** */

.options {
    clear: both;
    background-color: @bottom-pension-color;
    max-width: 100%;
    margin-top: @spacer;

    &__heading,
    &__text,
    &__link {
        color: @bottom-pension-text-color;
    }

    &__heading a,
    &__text a {
        color: @link-item-block-link-color;

        &:hover {
            color: @link-item-block-link-hover-color;
        }

        &:visited {
            color: @link-item-block-link-visited-color;
        }
    }

    &__image {
        img {
            margin-bottom: @spacer;
        }
    }

    &__content {
        padding: 30px 20px 40px;
        max-width: 100%;
    }

    &__item {
        position: relative;
        .block-width();

        .cta-button {
            margin-top: @spacer;
            font-size: 16px;
            display: inline-block;
            padding-top: 16px;
        }

        .cta-button-chevron {
            &:before {
                top: calc(50% - 8px);
            }
        }

        @media all and (-ms-high-contrast: none) {
            *::-ms-backdrop, .cta-button {
                padding-top: 16px;
            }
        }
    }

    &__heading {
        font-size: 20px;
        line-height: 1.5;
    }

    &__text {
        font-size: 14px;
        margin-top: 10px;
    }

    &__link {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;

        &:hover, &:focus {
            color: @bottom-pension-text-color;
        }
    }

    @media screen and (min-width: @sm-min) and (max-width: @sm-max) {
        &__item {
            margin-bottom: @spacer;

            &:last-of-type {
                margin-bottom: 0;
            }

            .clearfix();
        }
    }

    @media screen and (max-width: @xs-max) {
        &__heading {
            padding-top: 10px;
        }

        &__item {
            margin-bottom: 30px;

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }

    @media screen and (min-width: @sm-min) {
        &__image {
            padding-right: @spacer;
            float: left;
        }

        &__image,
        &__text-block {
            width: 50%;
        }

        &__text-block {
            float: right;
        }
    }

    @media screen and (min-width: @md-min) {
        &__item {
            float: left;
            width: 33.3%;
            padding-right: 20px;

            &:last-of-type {
                padding-right: 0;
                padding-left: 20px;
            }

            &:nth-of-type(2) {
                padding-right: 10px;
                padding-left: 10px;
            }
        }
    }
}

/* ***********************   NEWS-SECTION   *********************** */

@latest-news-color: @color-7;
@news-block-border-color: @color-8;
@news-text-padding: @spacer * 2;
@latest-news-block-paddings: 45px 0 30px 30px;

.news-section {
    &_m-top {
    }

    .lng-blue-heading {
        margin-top: @spacer;
    }

    .lng-heading {
        color: @color-1;
        margin-top: @spacer;
    }

    .latest-news,
    .news-block {
        position: relative;
        .clearfix;
        border-bottom: 2px solid @news-block-border-color;

        &:nth-last-of-type(-n+4) {
            border: 0;
        }

        &._small {
            width: 33.33%; /* fallback if calc unsupported */
            width: calc(100% / 3);
            float: left;
            height: 530px;

            .news-block__heading {
                @media screen and (min-width: @md-min) {
                    padding-right: 20px;
                }
            }

            .news-block__date {
                @media screen and (min-width: @md-min) {
                    padding-right: 20px;
                }
            }
        }

        .lng-link {
            display: inline-block;

            @media screen and (max-width: @xs-max) {
            }

            @media screen and (min-width: @md-min) {
            }
        }

        &__date {
            color: @color-1;
            min-height: 23px;
        }

        &__text {
            height: 134px;
            overflow: hidden;
            margin-bottom: 0;

            @media screen and (min-width: @sm-min) {
                padding-right: 25px;
            }

            @media screen and (min-width: @md-min) {
                padding-bottom: 35px;
            }
        }

        &__bottom {
            position: absolute;
            bottom: 0;
            margin-bottom: 10px;

            .lng-link {
                font-weight: bold;
            }
        }
    }

    .latest-news {
        padding: @latest-news-block-paddings;
        background-color: @latest-news-color;
        margin-bottom: 25px;

        @media screen and (max-width: @xs-max) {
            padding-right: 30px;

            &__heading {
                margin-top: @spacer;
            }
        }

        @media screen and (min-width: @md-min) {
            .lng-link {
                left: 30px;
            }
        }

        @media screen and (min-width: @sm-min) and (max-width: @sm-max) {
            .lng-link {
            }
        }

        @media screen and (min-width: @sm-min) {
            &__content-wrapper {
                width: 65%;
                float: left;
                padding-right: @news-text-padding;
            }

            &__image {
                width: 35%;
                float: left;
                margin-right: @spacer;
                margin-bottom: @spacer;
            }
        }
    }

    .news-block {
        padding: 25px 0 10px;

        &:last-of-type {
        }

        &._small .news-block__image {
            @media screen and (min-width: @sm-min) {
                width: calc(100% - 20px);
            }
        }

        &__image-wrap {
            max-height: 240px;
            min-height: 240px;
            overflow: hidden;
            margin-bottom: @spacer;
        }

        @media screen and (min-width: @sm-min) {
            &__image {
                float: left;
                width: calc(33.33% - 20px);
                margin-right: @spacer;
                margin-bottom: @spacer;
            }

            &__content-wrapper {
                width: 77%;
                float: right;
                padding-left: @news-text-padding;
            }

            .lng-link {
                margin-top: @spacer;
            }
        }

        @media screen and (max-width: @sm-max) {
            &._small {
                /* 2 columns */
            width: 50% !important;
        }
    }

    @media screen and (max-width: @xs-max) {

        &._small {
            /* 1 columns */
            width: 100% !important;
        }

        &__heading {
            margin-top: @spacer;
        }
    }
}

    .show-more-news {
        display: block;
        margin: @spacer auto;
        clear: both;

        @media screen and (max-width: @xs-max) {
            width: 100%;
        }
    }
}
/* ***********************   REPORTS AND PRESENTATION   *********************** */
@pointer-width: 45px;
@pointer-height: 12px;


.years-filter {
    position: relative;
    border-bottom: 2px solid @color-1;
    margin-top: @spacer;

    &__item {
        display: inline-block;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease-out;
        padding: 0 32px @spacer;
        position: relative;

        &:first-letter {
            text-transform: uppercase;
        }

        @media screen and (max-width: @xs-max) {
            padding: 5px @spacer;
        }

        &:first-of-type {
            padding-left: 0;

            @media screen and (max-width: @xs-max) {
                padding: 5px @spacer 5px 0;
            }
        }

        &:last-of-type {
            padding-right: 0;

            @media screen and (max-width: @xs-max) {
                padding: 5px 0 5px @spacer;
            }
        }

        &:hover, &.active {
            color: @color-1;
        }

        &.active {
            @media screen and (max-width: @xs-max) {
                padding: 5px @spacer;
                background: @color-1;
                color: @color-4;
            }
        }

        &.active:after {
            content: "";
            width: 45px;
            height: 12px;
            background: @color-1;
            position: absolute;
            bottom: -6px;
            left: 0;
            right: 0;
            margin: 0 auto;

            @media screen and (max-width: @xs-max) {
                display: none;
            }
        }

        &.active:first-child:after {
            left: -17px;
        }

        &.active:last-child:after {
            right: -32px;
        }
    }
}

.presentation {
    padding: 25px 0;
    border-bottom: 2px solid @color-1;

    &__date {
        text-transform: uppercase;
        color: @color-1;
    }

    &__name {
        font-size: 24px;
        line-height: 1;
        margin-top: 10px;
        display: inline-block;
        color: @color-1;
    }

    &__image {
        display: inline-block;
        width: 28px;
        height: 29px;
        margin-right: 10px;
    }

    &__description {
        margin: 10px 0;
    }

    &.separator {
        font-size: 35px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    @media screen and (max-width: @xs-max) {
        margin-top: 0;
    }
}
/* ***********************   PAGINATION   *********************** */
.paging {
    margin-top: 45px;
    padding-top: @spacer;
    text-align: center;
    clear: both;
    border-top: 2px solid #c0c0c0;

    .yellow-box-chevron {
        top: -3px;
    }

    &__overview, &__page, &__link {
        color: @color-5;
        background-color: @color-4;
    }

    &__overview {
        padding-right: @spacer;
    }

    &__page,
    &__link {
        padding: 0 5px;
        font-weight: bold;

        &:hover {
            color: @color-1;
        }

        &:hover,
        &:focus {
            text-decoration: none;
        }

        &:focus {
            color: @color-5;
            background-color: @color-4;
        }
    }
}
/* ***********************   FEATURE-BOX   *********************** */
@document-img-width: 26px;
@document-img-height: 33px;

.feature-box {
    clear: both;

    &__image-wrapper {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        max-height: 350px;
    }

    &__item {
        .block-width();
        border-bottom: 2px solid @color-1;
        background-color: @color-7;

        @media screen and (min-width: @sm-min) {
            width: 100%;

            &:nth-last-child(2) {
                & + div, & + section {
                    float: left;
                }
            }

            &.half-width {
                width: 49%;
                width: -webkit-calc(50% - 12.5px);
                width: calc(50% - 12.5px);

                .feature-box__image-wrapper {
                    max-height: 300px;
                }

                &:nth-of-type(even) {
                    float: right;
                }
            }

            &.one-third-width {
                width: 33.33%;
                float: left;

                &:nth-of-type(3n) {
                    padding-left: @spacer;
                }

                &:nth-of-type(3n+1) {
                    padding-right: @spacer;
                }

                &:nth-of-type(3n+2) {
                    padding-left: @spacer / 2;
                    padding-right: @spacer / 2;
                }

                .feature-box__image-wrapper {
                    max-height: 200px;
                }
            }

            &:nth-of-type(odd) {
                float: left;
            }
        }

        margin-top: @spacer;
        margin-bottom: @spacer;
    }

    &__link {
        display: inline-block;
        line-height: 1;
        font-weight: bold;
        font-size: 28px;

        a {
            &,
            &:hover,
            &:focus {
                color: @color-1;
            }
        }
    }

    &__text-block {
        padding: 25px;
        background-color: @color-7;

        &__links {
            padding: 0 25px 25px 25px;
            background-color: @color-7;
        }
    }

    &__description {
        font-size: 18px;
        margin-top: @spacer;
    }

    &__form-image {
        display: inline-block;
        width: 26px;
    }

    &__form-text {
        position: relative;
        margin-top: 10px;
    }
}
/* ***********************   TABS-MODULE   *********************** */
.tabs-module {
    .block-width();
    margin-bottom: @spacer;

    &__title {
        padding: @spacer @spacer 0 @spacer;
        font-weight: bold;
    }

    &__mainbody {
        padding: 0 @spacer @spacer @spacer;
    }

    &__tabs-block {
        border: none;

        .tabs-module__tab-wrapper {
            cursor: pointer;

            .tabs-module__tab-item {
                color: @color-3;
                margin-right: 0;
                border-radius: 0;

                @media screen and (max-width: @xs-max) {
                    font-size: 14px;
                    margin-right: 0;
                    padding-left: 10px;
                    padding-right: 10px;
                }

                &:hover {
                    background-color: lighten(@color-7, 1%);
                }
            }
        }

        .tabs-module__tab-wrapper {
            border-right: 1px solid grey;
        }

        .tabs-module__tab-wrapper:last-of-type {
            border-right: none;
        }

        li, li.active {
            .tabs-module__tab-item {
                border: none;

                &:hover, &:focus {
                    border: none;
                }
            }
        }

        li.active {
            .tabs-module__tab-item {
                font-weight: bold;
                color: @color-1;

                &,
                &:hover {
                    background-color: @color-7 !important;
                }

                &:hover, &:focus {
                    color: @color-1;
                }
            }
        }
    }

    &__content-wrapper {
        padding-top: 50px;
        padding-bottom: 25px;
        background-color: @color-7;

        &.small-paddings {
            padding-left: 5%;
            padding-right: 5%;
        }

        &.medium-paddings {
            padding-left: 12%;
            padding-right: 12%;
        }

        &.large-paddings {
            padding-left: 20%;
            padding-right: 20%;
        }

        @media screen and (max-width: 450px) {
            padding-left: 5% !important;
            padding-right: 5% !important;
        }
    }

    &__heading {
        font-size: 26px;
        color: @color-1;
        font-weight: bold;
        line-height: 1;
    }

    &__inner-text {
        margin-top: 30px;
    }

    &__image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 275px;
        height: 275px;
        border-radius: 50%;
        object-fit: cover;
        margin-top: 40px;

        @media screen and (max-width: 450px) {
            width: 100%;
        }
    }
}
/* ***********************   SIDEBAR   *********************** */
.content-left {
    .block-width();
    float: left;
    padding-top: @spacer;
    padding-right: @spacer;
    .clearfix();

    &__heading {
        font-size: 30px;
        font-weight: bold;
        color: @color-1;
    }

    &__text {
        margin-top: 25px;
    }

    @media screen and (min-width: @md-min) {

        .tabs-module {
            padding-right: @spacer * 2;
        }

        &.padding-right {
            padding-right: @spacer;
        }
    }

    &__item {
        float: left;
        width: 33.3%;
        padding-right: 25px;
        margin-bottom: 50px;
        margin-top: @spacer;

        @media screen and (min-width: @sm-min) and (max-width: @sm-max) {
            &:nth-of-type(odd) {
                padding-right: 12.5px;
                clear: left;
            }

            &:nth-of-type(even) {
                padding-right: 0;
                padding-left: 12.5px;
            }

            &:nth-last-child(1), &:nth-last-child(2) {
            }
        }

        @media screen and (max-width: @sm-max) {
            width: 50%;
        }

        @media screen and (max-width: @xs-max) {
            width: 100%;
            padding-right: 0;

            &:last-of-type {
                margin-bottom: @spacer;
            }
        }

        @media screen and (min-width: @md-min) {
            &:nth-last-child(1),
            &:nth-last-child(2),
            &:nth-last-child(3) {
            }

            &:nth-of-type(3n + 4) {
                clear: left;
            }
        }
    }

    &__image {
        margin-bottom: 25px;

        &_rounded {
            border-radius: 50%;
        }
    }

    &__article-info {
        padding-right: 5px;
        border-right: 1px solid @color-1;
        font-size: 14px;
        color: @color-1;

        &:last-of-type {
            padding-right: 0;
            border-right: 0;
        }
    }

    &__heading-article {
        margin: 20px 0;
        font-weight: bold;
        color: @color-1;
    }
}

.sidebar {
    position: relative;
    float: right;
    padding: @spacer 0 0 @spacer;

    &.small-width {
        width: 66.67%;
    }

    &.medium-width {
        width: 50%;
    }

    &.large-width {
        width: 33.34%;
    }

    &__item {
        padding: @spacer;
        background-color: @color-7;
        margin-bottom: 25px;

        @media screen and (min-width: @sm-min) {
            &:first-of-type {
                margin-top: @spacer;
            }
        }

        &:last-of-type {
            margin-bottom: 0;
        }
    }

    &__heading {
        font-weight: bold;
        color: @color-1;
    }

    &__text {
        font-weight: bold;
    }

    &__text,
    a {
        display: block;
    }

    .tinymce-wrapper a,
    .text-block a {
        display: inline;
    }

    .clearfix();

    @media screen and (min-width: @md-min) {
        left: -2px;
        border-left: 2px solid @color-8;
    }
}

@media screen and (max-width: @sm-max) {
    .content-left,
    .sidebar {
        float: none;
        width: 100% !important;
    }

    .sidebar {
        padding-left: 0;
        margin-top: @spacer;
    }
}
/* ***********************   VIDEO-LIGHTBOX PAGE   *********************** */
@video-width: 722px;
@video-height: 404px;

.v-lightbox {
    position: relative;
    padding: 50px 120px 30px;
    background: url('img/video-lightbox-cover.jpg') no-repeat;
    background-position-x: center;
    background-position-y: center;
    margin: @spacer 0;
    text-align: right;

    @media screen and (max-width: @sm-min) {
        background-size: 100%;
    }

    main > .content-top > div > div:first-child > &:first-child,
    main > .content-center:first-child > div > div:first-child > &:first-child {
        margin-top: 0px;
    }

    &__content-wrapper, &__links-wrapper {
        float: none;
    }

    &__wrapper {
        .content-top & {

            @media screen and (min-width: @md-min) {
                width: 970px;
                margin: 0 auto;
                position: relative;
                height: 100%;
            }

            @media screen and (min-width: @lg-min) {
                width: calc(@container - @spacer * 2);
                margin: 0 auto;
                position: relative;
                height: 100%;
            }
        }
    }

    .content-top & {
        @media screen and (min-width: @md-min) {
            padding-left: 0;
            padding-right: 0;
        }
    }

    &__links-wrapper {
        position: absolute;
        width: 500px;
        margin-left: auto;
        margin-right: auto;
        left: unset;
        right: 120px;
        bottom: 50px;

        @media screen and (max-width: @sm-min) {
            right: @spacer;
            width: calc(100% - @spacer * 2);
            margin-top: 10px;
            bottom: auto;
        }

        .content-top & {
            @media screen and (min-width: @md-min) {
                right: 0;
            }
        }
    }

    .background-size(cover);

    .v-lightbox__content-wrapper {
        float: right;
        background-color: #fff;
        opacity: 0.9;
    }

    &__heading {
        display: block;
        padding: 10px 20px;
        font-size: 45px;
        color: @color-1;

        @media screen and (max-width: @md-max) {
            font-size: 30px;
        }

        @media screen and (max-width: @sm-min) {
            font-size: 26px;
        }
    }

    &__watch-link {
        display: inline-block;
        padding: 0px 20px 20px 20px;
        text-transform: uppercase;
        line-height: 1;
        font-weight: bold;
        color: @color-1;

        &:hover {
            text-decoration: none;
            color: darken(@color-1, 12%);
        }

        .lng-chevron {
            font-size: 1.2em;
            margin-left: 4px;
        }
    }

    .cta-button {
        display: inline-block;
        position: relative;
        width: 80%;
        padding: 5px 6px;
        font-weight: bold;
        text-align: left;
        min-height: inherit;
        line-height: inherit;
        font-size: 16px;
        margin-top: 10px;
        margin-left: 0;
        margin-right: 0;

        .lng-chevron {
            position: absolute;
            font-weight: bold;
            text-align: center;
            right: 7px !important;
            font-size: 1.2em;
            line-height: 21px;
        }

        .yellow-box-chevron {
            right: 3px;
        }

        @media screen and (max-width: @sm-min) {
            width: 100%;
            margin: 4px 0;
        }
    }

    &__modal {
        text-align: left;

        .modal-dialog {
            width: @video-width;
            transform: translateY(25%) !important;
            margin: 0 auto;

            @media screen and (max-width: @sm-min) {
                width: auto;
                display: block !important;
                margin: 0;
            }
        }

        .modal-content {
            height: @video-height;
            position: relative;
            overflow: hidden;

            @media screen and (max-width: @sm-min) {
                height: auto;
                min-height: 300px;
            }
        }

        .modal-body {
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

            iframe {
                width: 100% !important;
            }
        }

        .modal-close {
            position: absolute;
            opacity: 1;
            width: 30px;
            height: 30px;
            top: -40px;
            right: 0;
            background: url('img/close-button.png') no-repeat;
            .background-size(cover);
        }
        /*        @media screen and (max-width: @sm-min) {
    .modal,
    .modal-backdrop {
        display: none !important;
    }
}*/
    }

    @media screen and (max-width: @sm-min) {
        padding: @spacer;
        height: 250px !important;

        &__link {
            font-size: 14px;
            padding: 3px 4px;
        }
    }

    @media screen and (min-width: @sm-min) {
        height: 400px !important;
    }

    @media screen and (min-width: @md-min) {
        height: 450px !important;
    }
}
/* ***********************   VIDEO BLOCK   *********************** */
.video-block {
    .block-width();
    margin: @spacer auto;
    height: auto;
    overflow: hidden;

    .jsBrightTALKEmbedWrapper {
        text-align: center;
    }

    @media screen and (min-width: @sm-min) {
        height: auto;
        padding-bottom: 0;
    }

    & > iframe {
        width: 100% !important;
    }
}
/* ***********************   PROMOTIONAL BOX   *********************** */
@promotional-box-width-default: 275px;
@promotional-box-width-vertical: 178px;

.promotional-box {
    display: block;
    width: @promotional-box-width-default;
    border: 2px solid @color-1;
    padding: 20px !important;
    margin-top: @spacer;
    margin-bottom: @spacer;
    margin-right: @spacer;
    clear: both;
    .clearfix();

    .stacking-container & {
        clear: none;
    }

    &.promotional-block-secondary {
        background-color: @color-1;
        color: @color-4;

        .promotional-box__title {
            color: @color-4;
        }
    }

    &.vertical {
        width: @promotional-box-width-vertical;

        .promotional-box__heading {
            margin-bottom: @spacer;
        }
    }

    p,
    &__link {
        font-size: 14px;
        line-height: 1.3;
    }

    &__content {
        margin-top: 5px;
    }

    &__heading {
        font-size: 14px;
        text-transform: uppercase;
        margin-bottom: 25px;

        .promotional-block-secondary & {
            color: @color-4;
        }
    }

    &__title {
        color: @color-1;
    }

    &__link {
        display: block;
        margin-top: 20px;
        color: @color-1;

        .promotional-block-secondary & {
            color: @color-4;
        }
    }

    @media screen and (max-width: @xs-max) {
        margin-left: auto;
        margin-right: auto;
    }
}
/* ***********************   HIGHLIGHTED NUMBERS   *********************** */
.highlighted-numbers {
    .block-width();

    .text-primary {
        color: @color-1;
    }

    .text-secondary {
        color: @color-2;
    }

    margin-bottom: 50px;
    text-align: center;

    @media screen and (max-width: @xs-max) {
        margin-left: auto;
        margin-right: auto;
    }

    @media screen and (min-width: @sm-min) {
    }

    &__number {
        font-size: 60px;
        line-height: 1.2;
    }

    &__text {
        font-size: 14px;
    }
}
/* ***********************   PROGRESS BAR   *********************** */

@progress-bg-primary: desaturate((mix(@color-1, white, 25%)), 10%);
@progress-bg-secondary: desaturate((mix(@color-2, white, 25%)), 10%);

.progress-wrapper {
    .block-width();
}

.progress-bg-primary {
    background-color: @progress-bg-primary;

    .progress-bar {
        background-color: @color-1;
    }
}

.progress-bg-secondary {
    background-color: @progress-bg-secondary;

    .progress-bar {
        background-color: @color-2;
    }
}

.progress {
    height: 26px;
    margin-top: 5px;
    box-shadow: none;
    border-radius: 0;

    &:last-of-type {
        margin-bottom: 0;
    }

    &-bar {
        position: relative;
        line-height: 26px;
        box-shadow: none;
        min-width: 10%;
    }

    &-text {
        font-size: 14px;
    }

    &__value {
        position: absolute;
        right: 5px;
    }
}
/* ***********************   PAGE DIVIDER   *********************** */
.page-divider {
    margin: 25px 0;
    padding: 25px 0;
    border-top: 2px solid @color-8;
    border-bottom: 2px solid @color-8;

    &__heading {
        font-weight: bold;
        font-size: 20px;
        color: @color-1;
    }

    &__text {
        font-size: 14px;
    }
}
/* ***********************   SOCIAL BUTTONS   *********************** */
@social-button-size: 36px;

.social-buttons {
    margin-top: @spacer;

    @media screen and (max-width: @xs-max) {
        text-align: center;
    }

    .social-button {
        display: inline-block;
        width: @social-button-size;
        height: @social-button-size;
        opacity: 1;

        &:hover {
            opacity: 0.6;
        }

        &.facebook {
            background: url('img/facebook.png') no-repeat;
            .background-size(cover);
        }

        &.google {
            background: url('img/google.png') no-repeat;
            .background-size(cover);
        }

        &.linkedin {
            background: url('img/linkedin.png') no-repeat;
            .background-size(cover);
        }

        &.twitter {
            background: url('img/twitter.png') no-repeat;
            .background-size(cover);
        }

        &.youtube {
            background: url('img/youtube.png') no-repeat;
            .background-size(cover);
        }

        &.instagram {
            background: url('img/instagram.png') no-repeat;
            .background-size(cover);
        }
    }
}
/* ***********************   TESTIMONIAL   *********************** */
@testimonial-image-width: 28px;
@testimonial-image-height: 23px;

.testimonial {
    &__inner {
        background-color: @color-7;
        padding: @spacer*2 45px @spacer*2;
    }

    &__img {
        float: left;
    }

    &__content {
        padding-left: 144px;

        @media (min-width: @xs-max) and (max-width: @ipad-max) {
            .small-width &,
            .medium-width & {
                clear: both;
                padding-left: 0;
                padding-top: @spacer*2;
            }
        }

        @media screen and (max-width: @xs-max) {
            clear: both;
            padding-left: 0;
            padding-top: @spacer*2;
        }
    }

    &__item {
        .block-width();
        margin-top: @spacer;
        margin-bottom: @spacer;

        &.fullwidth {
            padding: 25px 80px;
            clear: left;
            margin-bottom: 0;
            .clearfix();

            @media screen and (min-width: @sm-min) {
                .testimonial__image {
                    float: left;
                    margin: 0;
                }

                .testimonial__text-wrapper {
                    width: 75%;
                    float: right;
                }
            }

            @media screen and (min-width: @md-min) {
                .testimonial__text-wrapper {
                    width: 80%;
                }
            }
        }
    }

    &__title {
        color: @color-1;
    }

    &__image {
        display: block;
        margin: auto;
        width: 94px;
        border-radius: 50%;
    }

    p {
        font-size: 14px;
    }

    &__text {
        position: relative;
        margin: 20px 0;

        &:before, &:after {
            content: '';
            width: @testimonial-image-width;
            height: @testimonial-image-height;
            position: absolute;
            background: url('img/quotes.png') no-repeat;
            .background-size(cover);
        }

        &:before {
            top: -@testimonial-image-height - 10px;
            left: -@testimonial-image-width;
        }

        &:after {
            .rotate(180deg);
            bottom: -@testimonial-image-height - 10px;
            right: -@testimonial-image-width;
        }
    }

    &__link {
        display: inline-block;
        font-size: 14px;
    }
}
/* ***********************   ARTICLE   *********************** */
.article {
    padding: @spacer;
    .block-width();

    &__info {
        padding-right: 5px;
        border-right: 1px solid @color-1;
        font-size: 14px;
        color: @color-1;

        &:last-of-type {
            border: none;
        }
    }

    h4 {
        color: @color-1;
    }
}
/* ***********************   SNAP POOL   *********************** */
.snap-poll {
    .block-width();
    margin-top: @spacer;
    background-color: @color-7;
    padding: 40px;
    text-align: center;

    &__heading {
        color: @color-1;
    }

    &__text {
        text-align: center;
        padding: 0 16%;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 16px;

        @media screen and (max-width: @xs-max) {
            font-size: 20px;
        }
    }

    &__form {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-right: 10px;
        margin-bottom: 0;
    }

    &__group-input {
        width: 30%;
        margin: 0 auto;
        position: relative;
        margin-top: 30px;

        &:before {
            content: '£';
            position: absolute;
            top: 0;
            left: 5px;
            width: 20px;
            font-weight: bold;
            line-height: 34px;
            margin: auto;
            z-index: 1;
        }

        @media screen and (max-width: @md-max) {
            width: 45%;
        }

        @media screen and (max-width: @xs-max) {
            width: 60%;
        }
    }

    &__input {
        padding: 12px 35px;
        font-size: 18px;
        border-radius: 0;
        border: 1px solid #00A352;
        line-height: 1;
        margin: 0 auto;

        &, &:focus {
            box-shadow: none;
        }
    }

    &__submit {
        .yellow-box-chevron;
        cursor: pointer;
        top: 0;
        right: -45px;
        width: 34px;
        height: 34px;
        line-height: 30px;
        font-size: 2em;

        &, &:hover, &:focus {
            color: @color-3;
            text-decoration: none;
        }
    }

    &__modal {
        border: 1px solid #000;

        .modal-content {
            border-radius: 0;
            font-size: 14px;
        }

        .modal-body {
            padding: 25px;
            padding-top: 45px;
        }

        p {
            text-align: left;
        }
    }

    &__popup-rule {
        margin: 0 auto 20px auto;
        border-radius: 50%;
        height: 250px;
        width: 250px;
        background-color: @color-7;
    }

    &__title {
        vertical-align: middle;
        display: table-cell;
        text-align: center;
        padding: 46px 22px 14px 22px;
        line-height: 1;
        color: @color-1;
        width: 250px;
        height: 142px;
        margin: 0 auto;
        font-size: 34px;
    }

    &__content {
        text-align: center;
        color: @color-5;
        padding: 0 20px;
        background-color: @color-4;
    }

    &__footer {
        border: 1px solid;
        padding: 23px;
        background-color: @color-7;

        > p > strong {
            color: @color-1;
        }
    }

    .close.modal-close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 14px;
        opacity: 1;
    }
}
/* ***********************   PRICING   *********************** */
.pricing {
    .block-width();
    position: relative;
    top: 0;
    margin: 0;
    transition: all .2s ease-out;
    cursor: pointer;
    height: 500px;

    &:hover {
        z-index: 100;
        top: -30px;

        .pricing__wrapper {
            .box-shadow(0px, 0px, 14px, 0px, rgba(50, 50, 50, 0.75));
        }

        h4 {
            color: @color-4;
        }

        .pricing__header {
            background-color: @color-1 !important;
            color: @color-4;
        }
    }

    .colored-dots-list {
        overflow: hidden;
        height: 170px;
    }

    @media screen and (max-width: @xs-max) {
        clear: both;
        width: 100% !important;
        border: 0 !important;
        margin: @spacer 0;
    }

    &__header {
        padding: 20px;
        text-align: center;
        background-color: @color-7;
    }

    &__price {
        text-align: center;
        font-size: 65px;
        line-height: 1;
        padding: 20px 0;
        background-color: @pricing-table-price-bg-color;
    }

    &__content {
        text-align: center;
        padding: 20px 40px 40px;
        position: relative;
        height: 290px;
        background-color: @color-7;
    }

    .blue-dots-list {
        text-align: justify;

        @media screen and (max-width: @xs-max) {
            text-align: center;
        }
    }

    .cta-button {
        font-size: 16px;
        padding-top: 17px;
        bottom: -20px;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        white-space: nowrap;

        @media (min-width: @xs-max) and (max-width: @ipad-max) {
            padding-top: 10px;
        }
    }

    &__value {
        position: relative;
        margin-left: -14px;
        color: @color-1;
    }

    &__currency {
        color: @color-3;
        font-size: 18px;
        vertical-align: top;
    }

    &__timespan {
        color: @color-3;
        font-size: 18px;
        vertical-align: bottom;
        margin-left: -14px;
    }
}
/* ***********************   POPUP-BLOCK   *********************** */
.popup {

    &__modal {
        .modal-dialog {
            top: 10%;
        }
    }

    &__inner-wrapper {
        .clearfix();
    }

    &__title,
    &__content {
        padding: 5px @spacer;
    }

    &__close,
    &__remider {
        height: auto;
        line-height: 40px;
        font-size: 20px;
        width: 47%;
        overflow: visible;

        @media screen and (max-width: @xs-max) {
            font-size: 18px !important;
        }
    }

    .modal-dialog {
        @media screen and (max-width: @xs-max) {
            margin: 0;
        }
    }

    .modal-close {
        position: absolute;
        opacity: 1;
        width: 30px;
        height: 30px;
        top: -40px;
        right: 0;
        background: url('img/close-button.png') no-repeat;
        .background-size(cover);
    }

    &__close {
        float: left;
    }

    &__remider {
        float: right;
        margin-left: 0;
    }
}

.modal-dialog {
    @media screen and (max-width: @xs-max) {
        margin: 0 !important;
    }
}

.modal-backdrop {
    @media screen and (max-width: @xs-max) {
        transition: height 999999s; /* block overlay scroll in chrome mobile */
    }
}
/* ***********************   TABLE   *********************** */
.table {
    .block-width();
    clear: both;
    margin-top: @spacer;
    margin-bottom: @spacer;

    .container {
        padding-right: 0;
        padding-left: 0;
    }

    &__text {
        flex: 1;
        padding: 0 @spacer;

        @media screen and (max-width: @xs-max) {
            flex: none;
            width: 100%;
            margin: @spacer 0;
        }
        /* desktop */
        @media screen and (min-width: @sm-min) {
            &._mobile b {
                display: none;
            }
        }

        a {
            text-decoration: underline;
        }
    }




    &__header {
        display: flex;
        background-color: @color-1;
        padding: calc(@spacer / 2) 0;

        .table__text {
            color: @color-4;
            flex: 1;
        }
    }

    &__heading {
        padding: 0 @spacer;
        color: @color-1;
        width: 100%;
    }

    &__item {
        .block-width();
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: @color-7;
        padding: @spacer 0;
        border-bottom: 1px solid @color-1;

        &:last-of-type {
            border: none;
        }

        a {
            color: @link-color;

            &:hover {
                color: @link-hover-color;
            }

            &:visited {
                color: @link-visited-color;
            }
        }
    }

    &__link {
        width: 100%;
        text-align: right;
        padding: 0 @spacer;
        display: inline-block;
    }
}
/* ***********************   HOMEPAGE-LIST   *********************** */
.microsites-heading {
    padding-bottom: @spacer;
    border-bottom: 2px solid @color-1;
}

.homepage-list {
    padding: @spacer 0 20px;
    list-style-type: none;
    .clearfix();

    &__item {
        display: inline-block;

        @media screen and (max-width: @xs-max) {
            font-size: 14px;
        }
    }

    &__link {
        &,
        &:hover {
            color: @color-3;
        }

        &:focus {
        }
    }
}
/* ***********************   ACCORDION   *********************** */
.accordion {
    &-block {
        margin-top: @spacer;
    }
    .block-width();
    list-style-type: none;
    padding-left: 0;
    margin-bottom: @spacer;

    .stacking-container & {
        margin-bottom: 0;
    }

    &__list-item {
        position: relative;
    }

    &__toggle-expand-collapse {
        display: block;
        text-align: right;
        margin-bottom: @spacer;
        margin-top: @spacer;

        a {
            color: @color-1;
        }
    }

    &__item {
        .block-width();
        display: block;
        background-color: @color-7;
        font-size: 20px;
        font-weight: bold;

        &, &:focus {
            color: @color-3;
        }

        &, &:hover, &:focus {
            text-decoration: none;
        }

        &.active,
        &:hover {
            color: @color-4;
            background-color: @color-1;
        }

        ~ .sub-menu-collapsable {
            display: none;
        }

        &.active {
            + .sub-menu-collapsable {
                display: block;
            }
        }
    }

    li {
        border-bottom: 1px solid @color-4;

        &:last-of-type {
            border: none;
        }
    }

    ul {
        list-style-type: disc;
    }

    .sub-menu-collapsable {
        background-color: @color-4;
        padding: @spacer;
    }

    .tinymce-wrapper {
        ul {
            margin-bottom: 10px;
        }
    }
}
/* ***********************   TINYMCE-WRAPPER   ****************** */
.tinymce-wrapper {
    margin: @spacer 0;

    .content-top &,
    .content-bottom & {
        margin: @spacer;
    }

    img {
        width: auto;
        height: auto;
        max-width: 100%;
        margin: 0 @spacer;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    li {
        margin-bottom: 16px;
    }

    p {
        margin-bottom: 16px;
    }
}
/* ***********************   TEXT-BLOCK   *********************** */
.text-block {
    .block-width();
    margin: @spacer 0;

    .content-top &,
    .content-bottom & {
        margin: 0;
        padding: @spacer;
    }

    h1, h2, h3, h4, h5 {
        color: @color-1;
        margin-bottom: .5em;
    }

    h2 {
        font-size: 48px;
    }
}

.tinymce-wrapper {

    h1, h2, h3, h4, h5 {
        margin-top: .6em;
        margin-bottom: .5em;
    }

    h2 {
        font-size: 48px;
        font-weight: normal;
    }

    h3 {
        font-size: 28px;
        font-weight: bold;
    }

    h4 {
        font-size: 20px;
        font-weight: normal;
    }


    h5 {
        font-size: 16px;
        font-weight: normal;
    }

    h6 {
        font-size: 14px;
        font-weight: normal;
    }
}

.sidebar {
    .text-block {
        @media screen and (min-width: @sm-min) {
        }

        @media screen and (min-width: @md-min) {
            padding: @spacer 0;
            padding-top: 0;
        }
    }
}
/* ***********************   IMAGE-BLOCK   *********************** */
.infographic {
    .block-width();
    overflow: hidden;
    margin: @spacer 0;

    .content-top & {
        margin: @spacer;
    }

    img {
        object-fit: cover;
        object-position: 0 0;
        width: auto;
        max-width: 100%;
    }
}
/* ***********************   SEPARATOR   *********************** */
.separator {
    .block-width();

    hr {
        border-top: 2px solid @color-8;
    }
}
/* ***********************   FOOTER   *********************** */


footer {
    background-color: @footer-color;
    margin-top: @spacer;

    .footer-top {
        display: block;
        position: relative;
        left: calc(50% - 25px);
        height: 50px;
        width: 45px;
        padding-top: 30px;
        padding-left: 3px;
        background: url('img/arrow_up_black.png') no-repeat;
        background-color: white;
        background-position: 0px 10px;
        background-size: 45px;
        cursor: pointer;
        color: black;
        font-size: 14px;
        text-align: center;
        text-decoration: none;

        &:hover, &:visited {
            color: black;
        }
    }

    .footer-top-line {
        border-top: 1px solid #e3e3e3;
        width: 100%;
        height: 1px;
        margin-top: 20px;
    }

    .container.footer-main {
        .upper-footer {
            padding: 20px 0;
            margin-bottom: 30px;
        }

        p, a {
            color: #000 !important;
            text-decoration: none !important;
            margin-bottom: 12px;
        }

        .upper-footer a {
            display: block;
        }

        .upper-footer p {
            font-weight: 600;
        }

        .footer-logo div {
            display: flex;
            justify-content: flex-end;

            img {
                margin: 10px;
                height: 100px;
                width: auto;
            }
        }

        @media only screen and (max-width: 768px) {
            .side {
                margin-bottom: 20px;
            }
        }
    }

    .container.footer-bottom {
        .disclaimer {
            font-size: 14px;
            font-weight: 500;
            line-height: 1.1;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }

    .lower-footer {
        .container {
            display: flex;
            align-items: center;

            p {
                margin-bottom: 0;
                margin-left: auto;
                padding-left: 50px;
                white-space: nowrap;
            }

            .items a {
                margin-right: 12px;
                color: #000;
                display: inline-block;

                &:hover, &:visited {
                    color: #000;
                }
            }
        }

        &.gray {
            background-color: #f6f6f6;
            padding: 10px
        }
    }

    @media only screen and (max-width: 768px) {

        .lower-footer {
            display: block;

            .container {
                flex-direction: column;

                .items {
                    width: 100%;
                    margin-bottom: 20px;
                    text-align: center;

                    a {
                        display: list-item;
                        list-style: none;
                    }
                }

                p {
                    margin-left: 0;
                    padding-left: 0;
                }
            }
        }
    }
}

.st_box {
    width: 100%;
    z-index: 99;
    margin-left: 0;
    left: 0;
    right: 0;
    border: 0;
    background-color: #f2f2f2;
    box-shadow: none;
    border-top: 1px solid #cfcfcf;
    overflow: hidden;

    @media screen and (max-width: @xs-max) {
        position: absolute;
        top: 0;
        width: auto;
        border: 1px solid #888;
    }

    &_inner {
        display: flex;
        align-items: center;
        margin: 0 auto;
        width: 535px;

        @media screen and (max-width: @xs-max) {
            width: auto;
        }
    }

    &_text {
        z-index: 10;
        font-size: 12px !important;
        line-height: 1.3;
        -webkit-text-size-adjust: 100%;
        width: 470px;
        float: left;
        overflow: hidden;
        padding: 7px;
        color: #585858;

        a {
            color: black;
            text-decoration: underline;
            font-weight: bold;

            &:hover, &:visited {
                color: black;
            }
        }

        @media screen and (max-width: @xs-max) {
            padding-right: 86px;
            width: auto;
        }
    }

    &_button {
        color: white !important;
        text-decoration: none !important;
        z-index: 100;

        @media screen and (max-width: @xs-max) {
            width: 85px;
            position: absolute;
            margin-right: 10px;
            right: 0;
        }
    }

    &_button {
        background: url(img/button_overlay.png) -8px 0 no-repeat #003d53;
        width: 56px;
        height: 21px;
        float: right;
        font: bold 12px/18px 'Roboto', sans-serif;
        color: #fff;
        text-decoration: none;
        text-align: center;
        padding: 0 9px 0 0;
    }
}

.expand-button,
.expand-button-accordion {
    width: 32px;
    height: 32px;
    top: 5px;
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    right: 20px;
    background: url('img/plus-black.png') no-repeat;
    .background-size(cover);

    .active ~ & {
        background: url('img/minus-black.png') no-repeat;
        .background-size(cover);
    }
}

.expand-button-accordion {
    font-family: "new-icons","roboto-light",arial,sans-serif !important;
    font-weight: normal;
    text-decoration: none;
    position: absolute;
    height: 19px;
    width: 19px;
    right: 17px;
    top: calc(50% - 10px);
    background-image: none;

    &::before {
        display: flex;
        align-items: center;
        height: 19px;
        width: 19px;
        content: "\e90e";
        font-size: 19px;
        display: flex;
        align-items: center;
        transition: 0.3s ease transform;
    }

}

.active .expand-button-accordion {
    background-image: none;

    &::before {
        transform: rotate(180deg);
    }
}

a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    left: 10px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
    text-align: left;

    &:hover {
        border: 2px solid #FFFF00 !important;
    }

    &:focus, &:active {
        left: 10px;
        top: auto;
        width: auto;
        height: auto;
        overflow: auto;
        margin: 10px 10px;
        padding: 5px;
        text-align: center;
        z-index: 999;
        border: 1px solid #FFFF00;
    }
}

.open-new-tab {
    position: relative;
}

.open-new-tab span.visually-hidden {
    visibility: hidden;
    width: 120px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    background-color: #f5f5f5;
    color: @color-3 !important;
    font-size: 13px;
}

.open-new-tab:hover, .open-new-tab:focus {
    .visually-hidden {
        visibility: visible;
    }
}
/* ***********************   Forms   *********************** */

.EPiServerForms {
    margin-left: 35px;

    .Form__Element__Caption {
        color: @colour-form-question;
        min-width: 20% !important;
    }

    .Form__Title {
        margin-top: 35px;
        margin-bottom: 35px;
    }

    button {
        background-color: @primary-scheme-button-background-color;
        border-color: @primary-scheme-button-border;
        color: @primary-scheme-button-text-color;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 18px;
        padding-right: 18px;
        border-radius: 3px;
        font-size: 16px;
        border-style: solid;
        text-align: center;

        &:hover {
            filter: brightness(0.65);
            background-color: @primary-scheme-button-background-color-hover;
            border-color: @primary-scheme-button-border-hover;
            color: @primary-scheme-button-text-color-hover;
        }
    }

    textarea {
        width: 500px;
        height: 150px;
    }

    input.FormTextbox__Input, textarea {
        min-width: 250px;
    }

    label, select, fieldset, input, button {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    select, textarea, input, button {
        &:focus {
            outline-style: solid;
            outline-width: 3px;
            outline-color: black;
        }
    }



    label, legend {
        font-weight: bold !important;
    }

    label, legend, select, input {
        font-size: 16px;
        color: @color-3;
    }

    .Form__Element__ValidationError {
        font-weight: normal !important;
        background-color: #ffeaec;
        color: #B50005 !important;
        padding: calc(0.75*1rem);
        font-size: 16px;
    }

    .FormChoice {
        fieldset {
            legend {
                margin-bottom: 3px;
            }

            label {
                margin-left: 20px;
                margin-top: 3px;
                margin-bottom: 3px;
                display: block;
            }

            input[type=checkbox], input[type=radio] {
                height: 20px;
                width: 20px;
                margin-right: 7px;
                display: table-cell;
                vertical-align: middle;

                &:after {
                    border-color: blue;
                }

                &:checked:after {
                    background-color: blue;
                }
            }
        }
    }

    .FormCaptcha {
        label.Form__Element__Caption {
            font-weight: normal !important;
        }

        .Form__Element__Caption, .FormCaptcha__Image, .FormCaptcha__Input, .FormCaptcha__Refresh {
            display: block !important;
        }

        .FormCaptcha__Image {
            max-width: 170px !important;
        }

        .FormCaptcha__Input {
            margin-left: 0px;
        }
    }

    .Form__Element.FormParagraphText.Form__Element--NonData {
        .text-block;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .Form__Element.FormParagraphText.Form__Element--NonData > div {
        .tinymce-wrapper;
        margin: @spacer 0;

        ol, ul, li {
            margin: 8px;
        }
    }

    .FormSubmitButton {
        margin-top: 40px !important;
    }

    .g-recaptcha-response {
        display: none !important;
    }

    fieldset.Form__Element.Form__CustomElement.FormAddressElement {
        width: 600px;

        legend {
            position: relative !important;
            visibility: visible !important;
            overflow: visible !important;
            color: @colour-form-question !important;
            border: none;
            margin-bottom: 30px;
        }

        label.Form__Element__Caption {
            min-width: 250px;
            margin-left: 20px;
        }

        input {
            margin-top: 10px;
            margin-left: 20px;
            min-width: 250px;
        }

        input::after {
            content: "\a";
            white-space: pre;
        }
    }

    div.Form__Element {
        label.Form__Element__Caption, .FormTextbox__Input, .Form__CustomInput, .FormRange__Input, .FormChoice__Input {
            display: block;
        }

        .FormTextbox__Input, .Form__CustomInput, .FormRange__Input {
            margin-top: 0px;
            margin-bottom: 25px;
        }

        .FormTextbox__Input[type="number"]::-webkit-outer-spin-button, .FormTextbox__Input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .FormTextbox__Input[type="number"] {
            -moz-appearance: textfield;
        }

        label.Form__Element__Caption {
            margin-bottom: 5px;
        }

        .FormChoice__Input {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        select {
            margin-top: 0px;
            margin-bottom: 15px;
        }
    }

    div.FormSelection {
        margin-bottom: 0px;
    }
}
/* ***********************   Fund Table   *********************** */
@color-border: #0000ff;

.fund-table-block {
    padding: 1rem;
    table {
        width: 100%;
        .center-column(1);
        .center-column(3);
        .center-column(6);
        .center-column(7);
        .center-column(8);
        .responsive-table(768px, @colour-fund-table-strip)
    }
    td, th {
        padding: 1rem;
        cursor: pointer;
    }

    table tbody tr td {
        @media (max-width: 768px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
    }

    td:first-child {
        font-weight: bold;
    }

    th {
        border-bottom: solid 0.125rem #333;
    }

    tr:nth-child(2n) {
        background-color: #f6f6f6;
    }
    
    margin-top: 40px;
    margin-bottom: 40px;
}

.fund-text-block {
    .logo-img {
        .heading-image(40px);
    }

    table {
        .border-table( @colour-risk-table-title-background, @colour-risk-table-title-font, @colour-risk-table-border, 5px);
        .center-column(1);
        .center-column(2);
    }

    h1, h2, h3, h4, h5, h6 {
        .heading(@heading-color);

        &.green-heading {
            .heading(@color-5);
        }
    }

    .tinymce-wrapper {
        margin: 0;
    }

    margin-top: 40px;
    margin-bottom: 40px;
}

/* ***********************   Slider Navigation   *********************** */
.in-page-nav {
    min-height: 55px;
    position: relative;
    z-index: 1;

  .in-page-nav-inner {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: @color-4;
    z-index: 100;

    &.sticky {
        position: fixed;
        top: 0;
        width: 100%;
      }
  } 

  ul {
    position: absolute;
    padding-top: 55px;
    width: 100%;
    background-color: @color-slider-nav-innert-sticky;

    li {
        border-top: 1px solid @color-slider-nav-ul-li;
        display: none;
        width: 100%;

        &:before {
            display: none;
          }

        &.active {
            border-top: 0;
            display: block;
            position: absolute;
            top: 0;
            left: 0;

            a {
                position: relative;

                &:before {
                    font-family: "icons", "roboto-light", arial, sans-serif !important;
                    font-weight: normal;
                    content: "\2228";
                    text-decoration: none;
                    position: absolute;
                    font-size: 1.243rem;
                    height: 18px;
                    width: 18px;
                    right: 25px;
                    top: 0;
                    color: @color-slider-nav-ul-li-anchor;
                    transform: scaleX(2); 
                }
              }
          }

          a {
            color: @color-slider-nav-ul-li-anchor;
            display: block;
            height: 55px;
            line-height: 55px;
            text-decoration: none;
            position: relative;
            padding-left: 40px;
            outline-offset: -3px;
            white-space: nowrap;

            &.icon:before {
                height: 55px/2;
                width: 55px/2;
                font-size: 1.71875rem;
                position: absolute;
                top: calc(50% - 13.75px);
                left: 3px;
              }

              &:hover {
                color: @color-slider-nav-ul-li-anchor-hover;
              }
          }
      }

      &.open li {
        display: block;

        &.active a {
            position: relative;

            &:before {
                font-family: "icons", "roboto-light", arial, sans-serif !important;
                font-weight: normal;
                content: "\2227";
                text-decoration: none;
                position: absolute;
                font-size: 1.243rem;
                height: 18px;
                width: 18px;
                right: 25px;
                top: 0;
                color: @color-slider-nav-ul-li-anchor;
              }
          }
      }
  }
}
  
  @media screen and (min-width: @sm-min) {
    .in-page-nav {
      min-height: 75px;

      .in-page-nav-inner {
        padding-left: 0;
      }

      ul {
        padding-top: 0;
        text-align: center;

        li {
            border-top: 0;
            border-bottom: 3px solid transparent;
            display: inline-block;
            list-style: none;
            width: auto;
            margin: 0 5px;
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;

            &:before {
                display: none;
              }

            &.active {
            border-bottom: 3px solid @link-color;
            display: inline-block;
            position: relative;
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
            }

            &:hover {
                border-bottom: 3px solid @link-color;
                -webkit-transition: all 0.2s linear;
                -o-transition: all 0.2s linear;
                transition: all 0.2s linear;
              }

            a {
            padding-right: 10px;
            padding-left: 10px;
            height: 75px;
            line-height: 75px;

            &.has-icon {
                padding-left: 45px;
            }

            &.icon:before {
                height: 75px/2.35;
                width: 75px/2.35;
                font-size: 1.9946808511rem;
                top: calc(50% - 15.9574468085px);
                left: 5px;
              }
          }

          &.active a:before {
            display: none;
          }
      }
    }    
    }
  }

  @media screen and (min-width: @ipad-max) {
    .in-page-nav ul li {
      margin: 0 20px;
    }
  }
  @media screen and (min-width: @lg-min) {
    .in-page-nav ul li {
      margin: 0 25px;
    }
  }

  @media screen and (max-width: 1023px) {
    .generic .in-page-nav .in-page-nav-inner {
      padding-left: 15px;
    }
    .generic .in-page-nav .in-page-nav-inner.sticky {
      padding-left: 15px;
    }
    .generic .in-page-nav ul li a {
      padding-left: 35px;
    }
    .generic .in-page-nav ul li a .icon:before {
      left: 0;
    }
  }

  @media screen and (max-width: 1023px) {
    .generic .container .in-page-nav .in-page-nav-inner {
      padding-left: 0;
    }
    .generic .container .in-page-nav .in-page-nav-inner.sticky {
      padding-left: 15px;
    }
    .generic .container .in-page-nav ul li a {
      padding-left: 35px;
    }
    .generic .container .in-page-nav ul li a .icon:before {
      left: 0;
    }
  }
  @media screen and (min-width: @sm-min) {
    .generic-rhc .in-page-nav .sticky ul {
      max-width: 1170px;
      margin: 0 auto;
    }
  }
  @media screen and (min-width: @sm-min) and (min-width: @ipad-max) {
    .generic-rhc .in-page-nav .sticky ul {
      max-width: 970px;
      padding-right: 333px;
    }
  }
  @media screen and (min-width: @sm-min) and (max-width: @lg-min) {
    .generic-rhc .in-page-nav .sticky ul {
      max-width: 1170px;
      padding-right: 400px;
    }
  }
  @media screen and (min-width: @sm-min) {
    .generic-rhc .in-page-nav ul {
      display: table;
      text-align: left;
      table-layout: fixed;
    }
    .generic-rhc .in-page-nav ul li {
      display: table-cell;
      overflow: hidden;
    }
    .generic-rhc .in-page-nav ul li a {
      padding-left: 30px;
    }
    .generic-rhc .in-page-nav ul li a .icon:before {
      height: 29px;
      width: 29px;
      font-size: 1.8125rem;
      top: calc(50% - 14px);
      left: 4px;
    }
  }
  @media screen and (min-width: @sm-min) {
    .touch-device .in-page-nav ul li:hover {
      border-color: transparent;
    }
    .touch-device .in-page-nav ul li.active {
      border-color: @link-color;
    }
  }
  @media screen and (min-width: @sm-min) {
    .in-page-nav.in-page-nav-hub {
      min-height: 80px;
    }
  }
  .in-page-nav.in-page-nav-hub .in-page-nav-inner {
    padding: 0 30px;
  }
  .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav {
    max-width: 1140px;
    margin: 0 auto;
  }
  @media screen and (min-width: @sm-min) {
    .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav {
      max-width: 738px;
    }
  }
  @media screen and (min-width: @lg-min) {
    .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav {
      max-width: 1140px;
    }
  }
  .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav ul {
    padding-top: 0;
  }
  @media screen and (min-width: @sm-min) {
    .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: space-evenly;
      -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
      justify-content: space-evenly;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding-top: 0;
    }
  }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav ul {
      -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
      justify-content: space-around;
    }
  }
  .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav ul li {
    margin: 0;
    position: relative;
  }
  .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav ul li:hover {
    border-bottom-width: 2px;
  }
  .in-page-nav.in-page-nav-hub
    .in-page-nav-inner
    .container-hub-nav
    ul
    li
    .icon:after {
    height: 30px;
    width: 30px;
    background-size: 30px;
    background-position: left center;
  }
  @media screen and (min-width: @sm-min) {
    .in-page-nav.in-page-nav-hub
      .in-page-nav-inner
      .container-hub-nav
      ul
      li
      .icon:after {
      padding-top: 0;
      top: 43px;
    }
  }
  @media screen and (min-width: @sm-min) {
    .in-page-nav.in-page-nav-hub
      .in-page-nav-inner
      .container-hub-nav
      ul
      li.active:after {
      content: "";
      display: block;
      height: 3px;
      width: 100%;
      border-bottom: 2px solid @link-color;
      position: absolute;
      bottom: 0;
    }
  }
  @media screen and (min-width: @sm-min) {
    .in-page-nav.in-page-nav-hub
      .in-page-nav-inner
      .container-hub-nav
      ul
      li.active {
      border: 0;
    }
  }
  .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav ul li a {
    font-size: 1rem;
    font-family: "roboto-regular", arial, Sans-Serif;
    font-weight: 300;
    color: @color-slider-nav-ul-li-anchor;
    padding-left: 37px;
    height: 48px;
    line-height: 48px;
  }
  @media screen and (min-width: @sm-min) {
    .in-page-nav.in-page-nav-hub .in-page-nav-inner .container-hub-nav ul li a {
      padding-left: 40px;
      font-size: 1.25rem;
      height: 77px;
      line-height: 77px;
    }
  }
  .in-page-nav.in-page-nav-hub
    .in-page-nav-inner
    .container-hub-nav
    ul
    li
    a:after {
    right: 5px;
  }
  .in-page-nav.in-page-nav-hub
    .in-page-nav-inner
    .container-hub-nav
    ul
    li
    a
    .icon:after {
    left: 0;
  }
  .in-page-nav.in-page-nav-hub
    .in-page-nav-inner
    .container-hub-nav
    ul
    li
    a
    .icon:before {
    color: @color-slider-nav-ul-li-anchor;
  }

.header-options-wrapper {
    min-height: 60px;
}

@media screen and (min-width: @sm-min) {
    header .container.fiveItems .navbar-nav.header-menu .nav-item .header-menu-link {
        font-size: 20px !important;
    }

    header .container.sixItems .navbar-nav.header-menu .nav-item {
        margin-left: 25px !important;
    }
}

@media screen and (max-width: @lg-min) {
    header .container.fiveItems .navbar-nav.header-menu .nav-item {
        margin-left: 50px !important;
    }

    header container.sixItems .navbar-nav.header-menu .nav-item {
        margin-left: 30px !important;
    }

    header .container.fiveItems .navbar-nav.header-menu .nav-item .header-menu-link,
    header .container.sixItems .navbar-nav.header-menu .nav-item .header-menu-link {
        font-size: 16px !important;
    }
}

@media screen and (max-width: @md-min) {
    header .container.fiveItems .navbar-nav.header-menu .nav-item .header-menu-link {
        font-size: 14px !important;
    }

    header .container.fiveItems .navbar-nav.header-menu .nav-item,
    header .container.sixItems .navbar-nav.header-menu .nav-item {
        margin-left: 10px !important;
    }

    header .container.sixItems .navbar-nav.header-menu .nav-item .header-menu-link {
        font-size: 15px !important;
    }

    header .container.sixItems .header-link {
        font-size: 15px !important;
    }
}

@media screen and (max-width: @sm-max) {
    .navbar-collapsable {
        overflow: hidden;
        float: right;
        width: 100%;
    }
}

.video-container-buto {
    .video-js {
        width: 100%;

        @media (min-width: 767px) {
            max-width: 720px;
        }

        @media (min-width: 992px) {
            max-width: 940px;
        }

        @media (min-width: 1200px) {
            max-width: 1140px;
        }
    }

    .video-js .vjs-mute-control .vjs-icon-placeholder::before, .vjs-icon-volume-high::before {
        content: "";
        height: 40px;
        width: 100%;
        display: block;
        background-repeat: no-repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAoCAYAAADpE0oSAAAAAXNSR0IArs4c6QAAAMFJREFUWAntlNEJAjEQRE+5BvywBSuxhbMI+7EJW7ASW1CwgfuIbw4Cy7EffsQgMgMD2blkZzNwGQbDCTgBJ+AE/j6BUsoIL10viuEO3mDpZozXAd5lKnQxxucIXzKsiMbSYt1kTc8znNU8IjaXHutsPWbiWvukkc5o3wasz2f1NhN7aDbukfLi4ah/K2r9mxVMdoLPbELtyfRmGu/EHl71YFTE5tJi3XxN/wk+vm6UTY7pcvvsmzUn4AScgBNoksAbvtCEpl02+z0AAAAASUVORK5CYII=');
        background-position: center;
    }

    .video-js .vjs-control-bar {
        height: 4em;
        background-color: rgba(0,0,0,0.72);
        padding-right: 6px;
    }

    .vjs-button>.vjs-icon-placeholder::before {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
    }

    .vjs-menu-button.vjs-menu-button-popup.vjs-button {
        width: 30px;
        height: 40px;
    }
    
    .vjs-playback-rate .vjs-playback-rate-value {
        color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;

        &::before {
            content:'';
            height: 25px;
            width: 25px;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD2klEQVRoge1ZSWgUQRSdTNRgFhU3gii5JOISPSgIChHFCBrEKIpbIIpxN0aFqElEIS4Xl4OCoCiuEYOIgh6C4kHRk6DEEEREcUlcMMYNFffv+3QP/pmpnq7uqRlB5sE7ZLre/+93d/2qrgQCKaSQglEQUWaMa8PBrGT6cQUMpYPF4CHwPlloUIw7YF/7Ad4E14H9/4XnkKFMcC34lKLxO/JJ4O8WxbhP4O6kF4KEpeAThSHGT3CfQjMZvOug4UI2gmnJMD/JvsMS78EjYAnYw0WfB64EbykKuZzwp4EEs0XCt+AGMMdnrBJFIS/AoaZ9RyaeQ4YmIVlNYAtZkzuE52C+Ca9JAwwX2U80BG4OA0wEHguOM+BRJ9cY8IMooimuiQ3xPBGs1KDXWDnHR7xOy/wG6gm+FIEqDXuNlbte5P0I9vMTZKsIwoXEbI8mgVxdwTsif73XAN3BDhFgsaauG1gFnrA7i/c79zfWNJH/DXnZQ2HwXCFu4zuioQmCVykc3FUqwXQfBaSBrV5vYkh8Xgi3a2qKyRnNYJGPIlaLGI26oiCF9+ORmroVQnMdfBBRBG8/GshDb8fYfKF/TTotFYMKhKhTS2TpVgndXjADrCFroybBXaWaNF5LO+5joS3UEWSBz2zBHp0kqgLE7wPBMxSNe+AojbgXhGaWrpkccJiu+VgFiOsTKPqbgLtLH5e4B8X4Ki+ePMGtAHtMF7La7DsxdqFL3G1ibF1i3AfiKqDcJe4OMbY2Me4Dvl+hDo1X6LAY776dIWsBOQ2+AhfFWwA5T2JepHQm8SWhmaFjRPbedr8FkHMb5c/P9aS3uvPNlBvKITpGOPEXISrQLGC50DgtZMfBXJ14dswRQs9faXrfBhS+p6nW1IwnZ9wmHx9FZJ1UhHDSi1DezRadyu3H3RRhnPs8bzH8bOa4Y8mjmzIv4t7gZyGeoqnjfTzPBd5ObyaXDuMSq0zk55OKDK8B9osAzX7uol8gVzb4SOSv8ROE25/sIPMT4NUpt9w+8Iayl99Am0SgmEu+KZB15iRP/hbEE4wn5hKwAgwa9OmUbzr4XZg/l+icxmBP2q/CPB/V901EIn4qM8GpZOA0mazvj2MUjoc8B034VSWsEImugaN9xuEVn7952xTm80z7lonXUDSucJcCs120fJDLK/YusF0Rp5ESff5E1gq5E/ymMMBHgjfAiQodd7ROhYbBK/bShBpXGBoMnqLwc8wQWiPGBh3G8fdALfn8/4IRIPkgsI6so8BftrGjinFn7Wt8KnERLHd75ZIOsvZQheTQnfB7Lr+CyfaVQgr/M/4AZy4C9wzSEDwAAAAASUVORK5CYII=')
        }
    }

    .vjs-quality-selector .vjs-icon-placeholder::before {
        content: ""!important;
        height: 40px;
        width: 30px;
        display: block;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAoCAYAAADpE0oSAAAAAXNSR0IArs4c6QAAAUBJREFUWAntVUsKwkAMbcWFC3VfwZvUi3gjj6B7vYh6Ab2Bgu7Vhbv63jADaVoYWwuKJJA235fm9ZckJsaAMWAMGAN/yUBRFEtokGWbJXvvNGHCELqADnz9UPQ5mzlfI3OirKEJMA7dQil76MFZ5QNjzFFY+/lwgHDTprJouF+1HBNJYdhGXsAFDlULa8MtqQL6SPQep2n6RO1YIJxhzxCfUGlDGQsy8j3Bb37GlfPpXauVco2EfK5q2NPqaXfYCozuRQ8NPnO6PuTqzlGq65q6iPUjICvk+WrMfV2GrXLcw53sYwx+JmIb2A/htzMBfBQ0nvwgB0YbyliQwztTYhsnQOOrcRNgU9j8SFx9TG7K0J09XTzZX/uAfOeTSe5AXeknAV++22tf0+1PgqBaMPjj36LGNN8YMAaMAWPg9xh4AS+D9rR5HMX1AAAAAElFTkSuQmCC);
        background-position: center;
    }

    .video-js .vjs-fullscreen-control .vjs-icon-placeholder::before, .vjs-icon-fullscreen-enter::before {
        content: "";
        height: 40px;
        width: 30px;
        display: block;
        background-repeat: no-repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAoCAYAAADpE0oSAAAAAXNSR0IArs4c6QAAAHlJREFUWAntlEEKwCAMBLX0/19uDb1tu+ChGCGTW4Ib3dHYGgEBCEAAArsT6HrAa4TWIu8jvupam9UfKlyVn26jWYeqV50jkOa43sZ6ReQFCMTcRfxl9en27ldvnNIc279a71n/YPcGVOfWpTl2B6IOAQhAAAL7ELgBJywkCu+M8RwAAAAASUVORK5CYII=');
        background-position: center;
    }

    .video-js .vjs-fullscreen-control {
        width: 30px;
        height: 40px;
    }

    .video-js .vjs-play-control {
        width: 70px;
    }
    
    .video-js .vjs-play-control.vjs-paused .vjs-icon-placeholder:before, .vjs-icon-play:before {
        content:'';
        height: 40px;
        width: 70px;
        display: block;
        background-repeat: no-repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAANlJREFUWAntkOkKwjAQhItv4NN4VFQ8qG+s4n2gjxXHH4UlbFKKdBNhAksns9nuxxQFDxNgAkyACTABJvBXCTjnLqhZttCAq88ZYpodaE0nvifoSTagAsyXRxhlclCfSrkf4I2TgSpAIWuPxsgcNEQT8XfoDc1AIyBNrS0eDNqC9toO/PC+j9lvdXuaYlL6b3ibbqnE3xWAkPVCoxKjNjJEI/wn9NqGRtkiQHz5gLFSRmwtnwr3O2ppSxHZJgBv0IvI0zQtQF1R8zTbuZUJMAEmwASYABOwTuADM3HvNeO4kWQAAAAASUVORK5CYII=');
        background-position: center;
    }

    .video-js .vjs-play-control:hover {
        .vjs-icon-placeholder:before, .vjs-icon-play:before {
            filter: none;
        }
    }

    .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-play:before {
        content:'';
        height: 40px;
        width: 70px;
        display: block;
        background-repeat: no-repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAF9JREFUWAnt0jEKwCAMBVD1/ndudQg41eEPUnhZDCRBeaY1QYAAAQIECNwU6Mnlz4ya7zMqX+dXbe875ePUcLvugekPECSYCqTzdpBgKpDO20GCqYB5AgQIECBA4N8CLyfwCCAr8y7BAAAAAElFTkSuQmCC');
        background-position: center;
    }

    .video-js .vjs-play-progress {
        background-color: #0076D6;
    }

    .vjs-remaining-time.vjs-time-control.vjs-control {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .video-js .vjs-progress-control .vjs-progress-holder {
        background: #222;
    }

    .vjs-play-control.vjs-control {
        transition: background-color 200ms linear;

        &:hover,
        &:focus {
            background-color: #0076D6;
        }
    }

    .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
        max-height: 18em;
    }

    .video-js:hover .vjs-big-play-button {
        background-color: #0076D6;
    }

    .video-js .vjs-big-play-button {
        width: 91px;
        height: 51px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 100ms linear;
        background-color: #0076D6;
        border-radius: 0;
        border-style: none;
        cursor: pointer;

        &:hover {
            background-color: rgba(0, 118, 214, 0.85);
        }

        .vjs-icon-placeholder::before {
            content: '';
            height: 100%;
            width: 100%;
            display: block;
            background-repeat: no-repeat;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAARNJREFUWAntkFcOAjEMRFfcAW5CR4AootyXJmCpopxqmZ9IUeSUXeJ8eaVonbEzfposk08SkAQkAUlAEkiSQFEUF5xRkmVVlgBOfTmKYRUP1jeKTvufUQ9Yl5Yx18DM8gShX8aLZdakIu5HaD2W5SGmBJBNOqDRDfGMOmOjceh79DpRIVxmDhBfa4eBtss7Ss9HEdDfYqYVBYYyCQAIHdlgsEntoLQaJTJrdfg3ou8Ijccx90VvHR1MGToW+1ofDKyUD9vfR0H039CWbECmMQFgk15oLMz37HcbjaY/Uc/ZQWwLNBCzfECY2d4l000q3O8402QAvkUa4A31xDefvA+oK844+WJZKAlIApKAJCAJ/JXAD9gFCj54vjBIAAAAAElFTkSuQmCC');
            background-position: center;
        }
    }

    .vjs-load-progress {
        background: rgb(33, 50, 71);
    }

    @media (min-width: 1200px) {
        .vjs-control-bar {
            position: absolute;
            bottom: -20px;
            transition: 100ms linear all;
            opacity: 0;   
        }
    
        .vjs-video:hover,
        .vjs-video:focus {
            .vjs-control-bar {
                  position: absolute;
                  bottom: 0;
                  opacity: 1;
                  transition: 100ms linear opacity, 100ms linear bottom;    
              }
        }
    }
    
    .video-js.vjs-video {
        overflow: hidden;
    }

    .vjs-paused {
        .vjs-big-play-button { 
            display: block;
        }
    }

    .vjs-volume-panel {
        &:hover {

        }
    }

    .vjs-volume-level {
        background-color: #0076D6;
    } 
    
    .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
        height: 100px;
    }

    .video-js .vjs-volume-vertical {
        bottom: 10em;
    }

    .vjs-slider-vertical .vjs-volume-level {
        width: 0.4em;
        height: 100%;
    }

    .video-js .vjs-volume-level:before {
        font-size: 1em;
    }

    .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
        right: 0px;
        background: rgb(0,0,0);
        background: rgba(0,0,0,.72);
        padding: 0px;
        height: 0;
        overflow: hidden;
        max-height: auto;
        transition: height 200ms 
    }

    .vjs-quality-selector .vjs-menu {
        left: -6em;
    }

   .vjs-menu .vjs-menu-item {
        &:hover,
        &:focus {
            background-color: transparent;
            color:#0076D6;
        }
        &.vjs-selected {
            background-color: transparent;
            color: #fff;
            &:hover,
            &:focus {
                background-color: transparent;
                color:#0076D6;
            }
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAAXNSR0IArs4c6QAAAIVJREFUGBljZCAA/v//nw1UoopXGVBROhD/A+LHOBUCJZOhip4CaRUGIGEPxFOBmBGmC8iOB+K/QPwciNXA4kDGdiAGgVlAzAjE0UAMUvQSiDVhmkEm8gLxMSAGgV1A/AeIXwGxNlwRjAEU5APik0AMAm+AWA8mh0EDJQWAGGSiIYYkUAAA11GHU8nrQmYAAAAASUVORK5CYII=');
            background-repeat: no-repeat;
            background-position: 10px center;
        }
    }

    .vjs-playback-rate, .vjs-quality-selector {
        &:hover {
            .vjs-menu .vjs-menu-content  {
                height: fit-content;
                bottom: 25px;
            }
        }

        .vjs-menu-item {
            padding-left: 30px;
            padding: 0 14px 0 20px;
            cursor: pointer;
            color: #BBBBBB;
            font-size: 13.3px;
            line-height: 30px;
        }
    }

    .vjs-playback-rate .vjs-menu {
        width: 7.6em;
    }

    .vjs-quality-selector {
        .vjs-icon-placeholder::before  {
            transform: rotate(0deg);
            transition: transform 200ms linear;
        }

        &:hover {
            .vjs-icon-placeholder::before {
                transform: rotate(28deg);
            }
        }
        
    }

    .vjs-control:hover {
        .vjs-icon-placeholder::before {
            filter: invert(57%) sepia(93%) saturate(6176%) hue-rotate(190deg) brightness(91%) contrast(101%);
        }

        .vjs-menu-button-popup .vjs-menu {
            display: block;
        }
    }

    .vjs-playback-rate:hover {
        .vjs-playback-rate-value::before {
            filter: invert(57%) sepia(93%) saturate(6176%) hue-rotate(190deg) brightness(91%) contrast(101%);
        }
    }

    .vjs-volume-bar.vjs-slider-vertical {
        height: 80%;
    }

    .video-js.vjs-ended {
        .vjs-control-bar .vjs-play-control .vjs-icon-placeholder {
            &::before {
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAXJJREFUWAntlr1qAkEURv0rIgSCqQzB2jJgEwRbm5SxCUmRQvANBNF3SB9JY54gDxCsFcQyRSwtUiUhCAYiup6RWQm6u6yTzIJwLxxnd+bO3s9vl5mJxSTEAXFAHBAHxAFxYK8dcBznHO5hBFP4gB604Nj9c1xfudeRtBRMQweC4ovBa6jAzERY3GQSxQ6Y14Winj+g7cAIslCAWzgCFXNIxonVne0fBD6Aih9oQGKzJn0n0Id1bOZYuafaGSx01bpfEcbL8K3zVo1fblB/KmjQZ6xKv3pVQ7jzykHNIf0X8Og1brWP4i/alZbVQvrhW99OiKI5naMctB4mAq2L+l3AROBYP0AtJdbDROCzVnXJt5i0rnDXAogKtczs+tx/zUdkmIX6lLwnKP2luNHWQ1G/re4VMWlQW2ANMjCBPLvcG210gcgwh4VP8m6iU+VRCQHquNUG97j1zrU6bjVhfdzymCpd4oA4IA6IA+KAOLAHDiwBWXoxF+X8USYAAAAASUVORK5CYII=');
            }
        }
    }

    .vjs-remaining-time.vjs-time-control.vjs-control.vjs-hidden {
        display: flex!important;
    }

    @media (max-width: 1024px) {
        button + div.vjs-control:not(.visible) {
            opacity: 0!important;
            visibility: hidden!important;
        }
    
        button + div.vjs-control.visible {
            opacity: 1!important;
            visibility: visible!important;
        }
    
        div.vjs-menu:not(.visible) {
            display: none!important;
        }
    
        button + div.vjs-menu.visible {
            display: block!important; 
        
            .vjs-menu-content  {
                height: fit-content;
                bottom: 25px;
            }
        }
    }

    h2 {
        padding-top: 30px;
        font-size: 48px;
        margin: 30px 0 10px;
    }

    .caption {
        margin-top: 15px;
        font-size: 14px;
        p {
            font-size: 14px;
        }
    }

    p {
        margin-top: 15px;
        font-size: 18px;
    }

    .accordion {
        margin-top: 15px;
        >.outer-panel .trigger {

            &::before {
                font-family: "new-icons"!important;
                font-weight: normal;
                content: "\e90e";
                text-decoration: none;
                position: absolute;
                font-size: 1.1875rem;
                height: 19px;
                width: 19px;
                right: 17px;
                top: calc(50% - 14px);
            }
            border: 1px solid #ddd;
            cursor: pointer;
            position: relative;

            h2.title {
                font-family: 'Lyon Display Web Bold';
                font-size: 16px;
                font-weight: bold!important;
                padding: 17px 40px 17px 20px;
                margin: 0;
            }
        }

        .trigger {
            &.expanded {
                &::before {    
                    font-weight: normal;
                    content: "\e912";
                }
            }
            
        }

        .panel {
            display: none;
            border: 1px solid #ddd;
            padding: 20px;
        
            &.visible {
                display: block
            }

            .duration {
                font-family: "roboto-regular",arial,Sans-Serif;
                p {
                    font-size: 14px;

                }
            }
        }
    }
}

.dd-section {
   background-color:  @color-4;
   padding-bottom: 30px;
    .js-dd-accordion-row {
        position: relative;
        min-height: 112px;
        padding-bottom: 20px;
    }

    .dd-accordion__trigger {
        display: block;
        text-decoration: none;
        text-align: left;
        background: 0;
        border: 0;
        padding: 0;
        cursor: pointer;
        width: 100%;
    }


    .dd-accordion__icon,
    svg {
        width: 68px;
        height: 96px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dd-accordion__row--active .dd-accordion__icon,
    .dd-accordion__row--active svg {
        fill: #fff;
        filter: brightness(3);

        * {
            fill: #fff;
        }
    }

    .dd-accordion__icon-circle {
        display: none;
        z-index: 1;
        position: relative;
        margin: 10px 20px 0 10px;
        background: @color-4;
        height: 80px;
        width: 80px;
        border-radius: 50%;
        color: #aaa;
        -webkit-box-shadow: 0 0 0 10px @color-4;
        box-shadow: 0 0 0 10px @color-4;
        background: @accordion-icon-background;

        @media (min-width: 768px) {
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
        }

        &:hover {
            background: @accordion-icon-hover-background;
            color: #949494;
        }
    }

    .dd-accordion__header {
        display: block;
        min-height: 112px;
        background: @color-4;
        padding: 15px 50px 15px 20px;
        border-radius: 5px;

        @media screen and (min-width: 768px) {
            padding: 20px 50px 20px 30px;
            margin-left: 110px;
            display: flex;
            align-items: center;
        }
        
    }
    .dd-accordion__title {

        @media screen and (min-width: 768px) {
            font-size: 24px;
            line-height: 1.1666666667;
        }

        font-size: 18px;
        line-height: 1.1666666667;
        font-family: "roboto-regular",arial,Sans-Serif;
        margin: 0 0 10px;
        display: block;
        color: #333;
    }

    .dd-accordion__row::after {
        content: "";
        display: none;
        position: absolute;
        background: @color-4;
        top: 0;
        bottom: -20px;
        width: 10px;
        left: 45px;
    }

    @media screen and (min-width: 768px) {
        .dd-accordion__row:not(:last-child) {
            &::after { 
                display: inline-block;
            }
        }
    }

    .dd-accordion__row--active .dd-accordion__content-container {
        display: block;
    }
    
   
    .dd-accordion__content-container {
        font-size: 16px;
        display: none;
        background: @color-4;
        padding: 0 20px 15px;
        border-radius: 0 0 5px 5px;
        font-family: "roboto-regular",arial,Sans-Serif;
        color: #333;
    }

    @media screen and (min-width: 768px) {
        .dd-accordion__content-container {
            margin-left: 110px;
            padding: 0 30px 20px;
        }
    }

    .dd-accordion__content-container::before {
        content: "";
        display: block;
        height: 2px;
        background-color: #ededed;
        margin-bottom: 15px;
    }

    .dd-accordion__header::after {
        position: absolute;
        right: 20px;
        top: 40px;
    }
    
    .dd-accordion__header:after {
        font-family: "new-icons","roboto-light",arial,sans-serif !important;
        font-weight: normal;
        content: "\e90e";
    }


    .dd-accordion__row--active .dd-accordion__header:after {
        font-weight: normal;
        content: "\e912";
    }

    .dd-accordion__row--active .dd-accordion__icon-circle {
        background: @colour-box-block-secondary-background;
        color: @color-4;
        -webkit-box-shadow: 0 0 0 10px @color-4;
        box-shadow: 0 0 0 10px @color-4;
    }
}

.leg-table-block {
    table {
        width: 100%;
        .center-column(1);
        .center-column(3);
        .center-column(6);
        .center-column(7);
        .center-column(8);
        .responsive-table(768px, @colour-fund-table-strip)
    }
}

.leg-table-block,
.fund-text-block {
    padding: 1rem;
    td, th {
        padding: 1rem;
    }

    th {
        border-bottom: solid 0.125rem #333;
    }

    tr:nth-child(2n) {
        background-color: #f6f6f6;
    }

    .leg-table-block-select {
        margin-bottom: 20px;
    }
}

.fund-text-block {
    tr:first-child {
        border-style: none;
        th {
            border-style: none;
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            border-bottom: solid 0.125rem #333;
            text-align: center;
        }
    } 

    tr {
        td {
            padding: 15px 5px;
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            border-bottom: 1px solid transparent;
            font-size: 1.2rem;

            @media (min-width: 768px) {
                font-size: 1.6rem;
            }
        }
    }
}

h1, h2, h1 > *, h2 > * {
    font-family: 'Lyon Display Web Bold'!important;
    font-weight: bold!important;
}

.hero-banner-container {
    @media (min-width: 1025px) {
        padding-right: 32px;
    }

    .text-block.small-width,
    .text-block.large-width {
        margin-top: 0;
    }

    .text-block.small-width { 
        margin-left: 32px;
        width: calc(33.3333% - 32px);
    }

    .text-block.small-width {
        padding-right: 15px;
        margin-top: -20px;
        @media (min-width: 400px) {
            margin-top: -50px;
        }


        @media (min-width: 768px) {
            padding-right: 0;
            margin-top: 0;
        }
    }
}

.text-block {
    .quick-links-block {
        height: calc(100% - 2px);
        width: calc(100% - 2px);
        @media (min-width: 1025px) {
            width: calc(100% - 5px);
            height: auto;
        }
    }
}

.quick-links-block {
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.0392);
    border-radius: 8px;
    background-color: @color-4;

    // .quick-links-block__title

    &__title {
        padding: 24px 32px;   
        font-size: 24px; 
        line-height: 36px;  
        border-bottom: 1px solid transparent;  
        @media (min-width: 1025px) {
            border-bottom: 1px solid #E3E3E3;   
            margin-bottom: 0.5rem!important;
        } 
        display: flex;
        margin-bottom: 0!important;
        transition: 0.3s margin ease-in-out, 0.3s ease-in-out border-color;

        img {
            display: block;
            margin-left: auto;
            transition: 0.3s ease-in-out transform;
            transform: rotate(180deg);
            @media (min-width: 1025px) {
                display: none;
            }
        }

        &.active {
            margin-bottom: 0.5rem!important;
            border-bottom: 1px solid #E3E3E3;   

            img {
                transform: rotate(0deg);
            }

            + .quick-links-block-list-container {
                grid-template-rows: 1fr;
                padding: 32px;
                padding-bottom: 40px;
                height: 100%;
            }

            .quick-links-block-list {
                overflow: hidden;
            }
        }
    }
}
.quick-links-block-list {
    list-style: none;
    overflow: hidden;
    &-container {
        height: 0;
        padding: 0 32px;
        display: grid;
        grid-template-rows: 0fr;
        -webkit-transition: 300ms grid-template-rows ease-in-out,padding 300ms ease-in-out, height 300ms ease-in-out;
        transition: 300ms grid-template-rows ease-in-out,padding 300ms ease-in-out, height 300ms ease-in-out;
        transition: 300ms grid-template-rows ease-in-out,padding 300ms ease-in-out,300ms -ms-grid-rows ease-in-out, height 300ms ease-in-out;

        @media (min-width: 1025px) {
            display: block;
            height: auto;
            padding: 32px;
        }
    }

    

    img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        margin-left: 8px;
    }
}
.quick-links-block-item {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(227, 227, 227, 1);
}
.quick-links-block-link {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #333;

    &:hover {
        text-decoration: none;
    }
}

//One Trust Cookie Banner fixes
#onetrust-group-container {
    #onetrust-policy-text {
        font-size: 14px !important;
    }
    
    #onetrust-policy-title {
       font-size: 22px !important;
    }

    #onetrust-pc-btn-handler {
        font-size: 14px !important;
    }

    #onetrust-accept-btn-handler {
        font-size: 14px !important;
    }
}