/********************************************
FONTS
********************************************/
/* open-sans-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/open-sans-v35-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-300italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: url('/fonts/open-sans-v35-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/open-sans-v35-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/open-sans-v35-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/open-sans-v35-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 500;
    src: url('/fonts/open-sans-v35-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/open-sans-v35-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: url('/fonts/open-sans-v35-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/open-sans-v35-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/open-sans-v35-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('/fonts/open-sans-v35-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/********************************************
Declare Global Variables
********************************************/

:root {
    --gray-border-color: rgba(0, 0, 0, 0.175);
    --gray-border-light: #F3F3F3;
    --tool-card-bg: #F8F8F8;
    --headline-bubble-bg: #000;
    --headline-bubble-color: #fff;
    --headline-bubble-fontSize: 26px;
    --headline-bubble-bg-hover: #000;
    --headline-bubble-color-hover: #fff;
    --nwb-h1: 54px;
    --nwb-h2: 40px;
    --nwb-h3: 32px;
    --nwb-h4: 28px;
    --nwb-h5: 22px;
    --nwb-h6: 18px;
    --bs-breadcrumb-divider: ">";
    --cnvs-themecolor: #FFED00; /* NWB YELLOW*/
    --cnvs-themecolor-rgb: 255, 237, 0;
    --cnvs-body-bg: #eceff1 !important;
    --bs-btn-active-bg: #ffed00;
    --bs-btn-active-border-color: #ffed00;
    --bs-bg-opacity: 0.85;
    --cnvs-color-darkyellow: #bbad00;
    --cnvs-color-dark: #343A40;
    --cnvs-body-font: "Open Sans", serif;
    --cnvs-primary-font: "Open Sans", serif;
    --cnvs-secondary-font: monospace;
    --cnvs-fslider-dots-border-color: #000;
    --cnvs-header-boxshadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
    --color-grey: #898989;
    --cutoff-title-lines: 3;
    --owl-loader-height: 450px;
    --list-spacing: 10px;
}

/********************************************
Helpers
********************************************/

h1.nwb-h1 {
    font-family: var(--cnvs-primary-font), serif;
    font-size: var(--nwb-h1);
}

h2.nwb-h2, .entry-title h2.nwb-h2 {
    font-family: var(--cnvs-primary-font), serif;
    font-size: var(--nwb-h2);
    line-height: calc(var(--nwb-h2) + 8px);
}

h3.nwb-h3, h2.nwb-h3 {
    font-family: var(--cnvs-primary-font), serif;
    font-size: var(--nwb-h3);
    line-height: calc(var(--nwb-h3) + 8px);
}

h4.nwb-h4 {
    font-family: var(--cnvs-primary-font), serif;
    font-size: var(--nwb-h4);
}

h5.nwb-h5 {
    font-family: var(--cnvs-primary-font), serif;
    font-size: var(--nwb-h5);
}

h6.nwb-h6 {
    font-family: var(--cnvs-primary-font), serif;
    font-size: var(--nwb-h6);
}


.fontSize22 {
    font-size: 22px;
}

.fontWeight800 {
    font-weight: 800
}

.iconGrey {
    color: #6C757D;
}

b,
strong {
    font-weight: bold;
}

.top-right-15 {
    top: 15px;
    right: 15px;
}

.white-to-gray {
    background: rgb(231, 232, 234);
    background: linear-gradient(90deg, rgba(231, 232, 234, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(203, 204, 206, 1) 100%);
}

.cuff-off-tooltip {
    cursor: default;
}

.bs-tooltip-custom.tooltip {
    --bs-tooltip-bg: #000;
    --bs-tooltip-color: #fff;
    --bs-tooltip-max-width: 250px;
    --bs-tooltip-opacity: 1;
}

.logo-tooltip.tooltip {
    --bs-tooltip-bg: #fff;
    --bs-tooltip-max-width: 250px;
    --bs-tooltip-opacity: 1;
}

.bs-tooltip-organisation.tooltip {
    --bs-tooltip-bg: transparent !important;
    --bs-tooltip-color: #fff;
    --bs-tooltip-max-width: 100% !important;
    --bs-tooltip-opacity: 1;
    width: auto !important;
}

.bs-tooltip-organisation {
    font-size: 30px;
}

.tool-card-bg {
    background-color: var(--tool-card-bg);
}

.tool-card-border--thick {
    border: 3px solid var(--gray-border-light)
}

/* set column count of element */
.column-count-2 {
    column-count: 2;
}

/** cutoff helpers **/
/* mx-two-rows */
#wrapper .mx-rows {
    height: calc(var(--nwb-line-height, 28) * var(--nwb-rows, 2));
    line-height: var(--nwb-line-height) !important;
    display: -webkit-box;
    -webkit-line-clamp: var(--nwb-rows, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-one-rows {
    --nwb-line-height: 28px;
    --nwb-rows: 1;
}

.mx-two-rows {
    --nwb-line-height: 28px;
    --nwb-rows: 2;
}

.mx-three-rows {
    --nwb-line-height: 28px;
    --nwb-rows: 3;
}

/* set lines to render to 1 */
.cutoff-1 {
    --cutoff-title-lines: 1;
}

/* set lines to render to 2 */
.cutoff-2 {
    --cutoff-title-lines: 2;
}

/* set lines to render to 3 */
.cutoff-3 {
    --cutoff-title-lines: 3;
}

/* set lines to render to 4 */
.cutoff-4 {
    --cutoff-title-lines: 4;
}

/* set lines to render to 5 */
.cutoff-5 {
    --cutoff-title-lines: 5;
}

/* set lines to render to 6 */
.cutoff-6 {
    --cutoff-title-lines: 6;
}

/* background colors */
.bg-nwb {
    background-color: var(--cnvs-themecolor);
}

/*** Spacing ***/

/* Extra small devices (portrait phones, less than 576px) */
.py-7 {
    padding-bottom: 6rem !important;
    padding-top: 6rem !important;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .py-sm-7 {
        padding-bottom: 6rem !important;
        padding-top: 6rem !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .py-md-7 {
        padding-bottom: 6rem !important;
        padding-top: 6rem !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .py-lg-7 {
        padding-bottom: 6rem !important;
        padding-top: 6rem !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .py-xl-7 {
        padding-bottom: 6rem !important;
        padding-top: 6rem !important;
    }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .py-xxl-7 {
        padding-bottom: 6rem !important;
        padding-top: 6rem !important;
    }
}

/********************************************
Header
********************************************/

/**** MAIN MENU AND HEADER STYLE ****/
.dark #top-bar, #top-bar.dark {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background-color: #000000 !important;
}

.top-links-item {
    border-left: 0;
}

#top-bar .top-links li a {
    padding: 8px 12px;
    color: #fff;
    font-weight: 300;
}

#top-bar .top-links li a img {
    max-width: 65px;
    width: 100%;
}

@media (max-width: 427px) {
    .top-links-container {
        justify-content: start;
    }

    #top-bar .top-links li a {
        padding: 4px 6px;
    }
}

/** logo zoom + rotate animation */
.header-misc-icon a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


.header-misc-icon a:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.team-desc-wrapper {
    background: #fff;
    padding: 15px 25px;
    position: relative;
    left: -41px;
    z-index: 1;
    box-shadow: 1px 2px 3px #ccc;
}

.team-title span {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    color: #333;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: "Open Sans", serif;
    font-style: normal;
}

.tinyFsSlider .flex-control-nav, .tinyFsSlider .flex-prev {
    display: none;
}

.tinyFsSlider .flex-next, .tinyFsSlider .flex-next:hover {
    background: transparent !important;
}

.tinyFsSlider .flex-next i {
    color: #000 !important;
}

.tinyFsSlider .flex-next:hover i {
    color: #ffed00 !important;
}

.uranus.tparrows:before {
    color: #000;
}

/** Logo Color animation **/
/*.header-misc-icon a {*/
/*    padding: 2px;*/
/*    border: 2px solid transparent;*/
/*    transition: all .2s ease-in-out;*/
/*    border-radius: 5px;*/
/*}*/
/*.header-misc-icon a:hover {*/
/*    background: #FFED00;*/
/*    padding: 2px;*/
/*    border: 2px solid black;*/
/*}*/
/** Logo Color animation slider **/
/*.header-misc-icon a {*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*}*/
/*.header-misc-icon a::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: -100%;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-color: var(--cnvs-themecolor);*/
/*    transition: left 0.5s ease;*/
/*    z-index: -1;*/
/*}*/

.header-misc-icon a:hover::after {
    left: 0;
}

#header {
    position: relative;
    background-color: #e1e1e1;
}

.header-misc-icon {
    display: flex;
    align-content: center;
    align-items: center;
}

/** hide tools logo in header **/
@media (max-width: 1500px) {
    #header .header-misc {
        margin-left: 0;
    }

    #header .primary-menu > ul {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
    }
}

@media (max-width: 1350px) {
    /** hide typewriter itself **/
    #logo > a > .anim-typewriter {
        font-size: 11px;
    }
}

/** hide typewriter **/
@media (max-width: 1200px) {
    /* adjust logo height that gets derived by --typewriter-height **/
    #logo {
        --typewriter-height: 40px;
    }

    /** remove padding used to create space between logo ant typewriter **/
    #logo:not(.tools-logo) > a > img {
        padding-bottom: 0 !important;
    }

    /** hide typewriter itself **/
    #logo > a > .anim-typewriter {
        display: none !important;
    }
}

/** burger menu showing */
@media (max-width: 1220px) {
    /** adjust the trigger gap wich also result in greater padding around the burger icon **/
    .primary-menu-trigger {
        --cnvs-menu-trigger-gap: 1.75rem;
    }
}

.nav:not(.primary-nav) .nav-link {
    --bs-nav-link-padding-x: 0;
}

.primary-nav .nav-link {
    --bs-nav-link-padding-y: 8px;
    --bs-nav-link-font-size: 1.25rem;
    --bs-nav-link-font-weight: 700;
    --bs-nav-link-color: var(--cnvs-contrast-900);
}

.primary-nav .nav-link:hover {
    font-style: italic;
}


.menu-item:hover a, .menu-item.active a, .menu-item:hover > .menu-link {
    color: #333;
}

.menu-link {
    font-family: "Open Sans", serif;
    font-weight: 600;
    font-size: 16px;
}

@media (max-width: 1550px) {
    .main-menu .menu-link {
        font-size: 15px;
        padding-left: 7px;
        padding-right: 7px;
    }
}


@media (max-width: 1350px) {
    .main-menu .menu-link {
        font-size: 15px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 1210px) {
    .main-menu .menu-link {
        padding-right: 4px;
    }
}

.highlightMenu {
    background-color: #333;
    color: #fff;
    padding: 5px 15px 5px 10px;
}

.header-misc-icon > a {
    width: auto;
    height: auto;
}

#logo img {
    margin-left: 0;
}

.is-expanded-menu .full-header #logo {
    border-right: 0 solid #fff;
}


.line-xs {
    margin: 12px 0 20px;
    border-bottom: 1px solid #EEE;
}

.line-xs::after {
    top: 100%;
    left: 30px;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(51, 51, 51, 0);
    border-top-color: #EEE;
    border-style: solid;
    border-width: 8px;
    margin-left: -8px;
    z-index: 1;
    background: none;
}

/** sticky Header shrunk styles **/
/* hide the typewriter element */
#header.sticky-header #logo > a > p {
    display: none;
}

/* adjust logo sizes */
#header.sticky-header-shrink .area-logos > img, #header.sticky-header-shrink .area-logos {
    height: 40px;
}

/* Line Colors */
.line-dark {
    border-bottom-color: var(--cnvs-color-dark, #343A40) !important;
}

.line-dark::after {
    border-top-color: var(--cnvs-color-dark, #343A40) !important;
}

.anim-typewriter {
    animation: typewriter 4s steps(25) 1s 1 normal both, blinkTextCursor 500ms steps(26, end) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 24em;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: rgba(0, 0, 0, 0.75);
    }

    to {
        border-right-color: transparent;
    }
}

/** define heights for main Master and Tool Master **/
:root:has(.main-area) {
    --cnvs-header-height: 123px;
    --typewriter-height: 24px;
    --tools-logo-url: url('/images/logo/Final/TAX_&_BYTES_Tools.png');
}

.header-wrap-clone {
    background-color: var(--cnvs-header-bg);
}

/* === Main Logo === */
#logo {
    min-width: 250px;
}

@media (max-width:465px) {
    #logo {
        min-width: 200px;
    }
}

@media (max-width:425px) {
    #logo {
        min-width: 75px;
    }
}


@media (max-width:350px) {
    #logo {
        width: 100px;
    }
}


@media (max-width:325px) {
    #logo {
        width: 70px;
        min-width: 70px;
    }
}


.main-area #header-wrap #logo img {
    height: auto;
    max-width: 220px;
    /*height: calc(calc(var(--cnvs-header-height) - var(--typewriter-height)) / 2);*/
}

@media (max-width: 767px) {
    body:not(.tool-section) #header {
        height: 56px;
    }

    body:not(.tool-section) .primary-menu-trigger {
        --cnvs-menu-trigger-gap: 1.25rem 1.75rem;
    }

    .main-area #header-wrap #logo img {
        height: 30px;
    }
}

.main-area #header:not(.sticky-header-shrink) #logo img {
    padding-bottom: 10px;
}

.main-area.is-expanded-menu #header.sticky-header-shrink #header-wrap #logo img {
    height: calc(var(--cnvs-sticky-header-height) / 2);
}

/* === Area Logos (Tools & Courses) === */

/* normal state */
.area-logos img {
    transition: height .3s ease;
    height: 50px;
}

@media (max-width: 1350px) {
    .area-logos img {
        height: 40px;
    }
}


@media (max-width: 425px) {
    .area-logos img {
        height: 30px;
    }
}


/* shrunk header state */
#header.sticky-header-shrink .area-logos img {
    height: 40px;
}

#tools-logo {
    background-image: var(--tools-logo-url);
}

/* preload the svg */
#tools-logo::after {
    background-image: var(--tools-logo-url);
}

#tools-logo:hover {
    /*animation: toolsLogo; <-- Disabled until zoomed logo is available */
    animation-duration: .8s;
    animation-iteration-count: infinite;
}

@keyframes toolsLogo {
    0% {
        background-image: url('/images/logo/TaxAndBytes/taxandtools_black.svg');
    }
    50% {
        background-image: url("/images/logo/TaxAndBytes/taxandtools_white_zoom.svg");
    }
    100% {
        background-image: url('/images/logo/TaxAndBytes/taxandtools_black.svg');
    }
}


/* === Main Typewriter === */

.linetext {
    height: var(--typewriter-height);
    display: block;
    font-family: monospace;
    position: relative;
    font-size: 14px;
    width: 22em;
    border-right: 2px solid rgba(0, 0, 0, 0.75);
    white-space: nowrap;
    overflow: hidden;
    border-top: 0px;
    margin: 0px !important;
    margin-bottom: 15px;
}


.sticky-header-shrink .linetext {
    display: none;
}

/* === Main Menu === */
.is-expanded-menu .menu-link {
    --cnvs-primary-menu-padding-y: calc(calc(var(--cnvs-sticky-header-height) - 25px) * 0.5);
}

/* === Main Search === */
.top-search-form {
    z-index: 2;
    bottom: 10px;
    width: 0;
    height: 30px;
    top: unset;
    padding: 0 15px;

}

@media (max-width: 1199px) {
    .top-search-form {
        left: auto;
        right: 0;
        top: 0;
        transform: translateY(-140%);
        width: 100%;
        max-width: calc(100% - 90px);
    }
}

#header .top-search-form input {
    padding-left: 30px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.7) !important;
    border-radius: 5px;
    transition: bottom .4s ease-in-out;
    background-color: #fff !important;
}

#header .top-search-form input::placeholder {
    color: #000;
}

.top-search-form.rendered {
    pointer-events: auto;
}

#header.sticky-header .top-search-form {
    bottom: 5px
}

#header.sticky-header-shrink .top-search-form {
    bottom: -32px;
}

.button.button-dark:hover {
    color: #000;
}


/********************************************
Typography
********************************************/

/* === Body === */
body {
    font-family: "Open Sans", serif;
}

p {
    font-family: "Open Sans", serif;
    font-weight: 300;
    color: #000;
}

/* normalize headline margins */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px;
}

blockquote {
    font-family: "Open Sans", serif;
    font-weight: 300;
    color: #000;
    font-size: 16px;
    line-height: var(--cnvs-line-height-content);
}

body:not(.tool-section) blockquote {
    font-size: 18px;
}

/* for example the entry category for an entry */

.small-font {
    font-weight: 400;
    font-size: 11px;
}

/* === Links === */
/** animations **/
/* icon hover offset */
a.icon-hover-offset > i {
    transition: transform .2s ease-in-out;
}

a.icon-hover-offset:hover > i {
    transform: translateX(3px);
}

/* === Bubble Headlines === */
/* small bubble helper */
.small-bubble {
    --headline-bubble-fontSize: 18px;
}

/** dark preset bubble **/
.headline-bubble.dark-bubble:before {
    border-top: 10px solid #000;
}

.headline-bubble.dark-bubble {
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
    font-size: var(--headline-bubble-fontSize, 22px);
}

.headline-bubble.dark-bubble:hover {
    background-color: var(--headline-bubble-bg-hover);
    color: var(--headline-bubble-color-hover);
}

.headline-bubble.pe-none a i {
    display: none;
}

.headline-bubble:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--headline-bubble-bg);
    bottom: -10px;
    left: 24px;
}

.headline-bubble.center-bubble:before {
    left: 50%;
    transform: translateX(-50%);
}

/** offset helpers **/
.bubble-offsetX-left {
    transform: translateX(-10px);
}

/** default needs vars to be passed in from within DOM */
.headline-bubble {
    position: relative;
    background-color: var(--headline-bubble-bg);
    border: 2px solid var(--headline-bubble-bg);
    color: var(--headline-bubble-color);
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    font-weight: 600;
    font-family: "Open Sans", serif;
    font-size: var(--headline-bubble-fontSize, 26px);
    border-radius: 5px;
    padding: 0 16px;
    width: fit-content;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

@media (max-width: 991px) {
    .headline-bubble:not(.small-bubble) {
        --headline-bubble-fontSize: 23px;
    }
}

@media (max-width: 767px) {
    .headline-bubble:not(.small-bubble) {
        --headline-bubble-fontSize: 20px;
    }
}

@media (max-width: 320px) {
    .headline-bubble {
        --headline-bubble-fontSize: 16px !important;
    }
}

.headline-bubble:hover, .headline-bubble:hover a {
    background-color: var(--headline-bubble-bg-hover);
    color: var(--headline-bubble-color-hover);
}

.headline-bubble:hover i {
    animation: bubbleWobble;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
}

@keyframes bubbleWobble {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

.headline-bubble i {
    font-size: var(--headline-bubble-fontSize, 20px);
    position: relative;
}

.headline-bubble a {
    color: var(--headline-bubble-color);
}

.contain-bubble {
    margin-bottom: 0;
    --vertical-offset: 10px;
    transform: translate(-10px, var(--vertical-offset));
    z-index: 1;
}

/********************************************
Breadcrumb
*********************************************/
.breadcrump-wrapper {
    margin-top: 0;
    background: #f3f3f3;
    padding: 5px 0px;
}

.breadcrumb {
    font-size: 14px;
}

.breadcrumb .breadcrumb-item {
    font-family: "Open Sans Regular";
    font-weight: 400;
}

.breadcrumb .breadcrumb-item.active:before {
    font-family: "Open Sans Regular";
    font-weight: 400;
}

.breadcrumb .breadcrumb-item.active {
    font-family: "Open Sans 700";
    font-weight: 700;
}

.breadcrumb a:hover {
    color: #333;
}

@media (max-width: 767px) {
    .breadcrumb {
        margin: 0px;
        justify-content: start;
    }

    .breadcrumb:first-child {
        padding-left: 15px;
    }
}

.breadcrumb-podcast-sorter {
    margin-bottom: 15px;
}

.breadcrumb-podcast-sorter li, .breadcrumb-podcast-sorter .small-font {
    font-size: 14px;
}

.podcast-headlines-bubble {
    left: 0px;
}

@media (max-width: 425px) {
    .podcast-headlines-bubble {
        left: 10px;
    }

    .breadcrumb-podcast-sorter {
        padding-bottom: 10px;
    }

    .breadcrumb-podcast-sorter li {
        font-size: 14px;
    }

    .breadcrumb-podcast-sorter .breadcrumb-item {
        padding-left: 2px;
    }

}

.sort-item::before {
    content: '|' !important;
}

.active-filter a {
    font-weight: 600;
}

/** tool breadcrumb **/
.breadcrump-wrapper.tools-breadcrump {
    position: relative;
    z-index: 1;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1320px;
    margin: 0 auto;
}

@media (max-width: 565px) {
    .breadcrump-wrapper.tools-breadcrump {
        margin-top: 5px;
    }
}

@media (min-width: 576px) and (max-width: 1400px) {
    .breadcrump-wrapper.tools-breadcrump {
        margin-top: 10px;
    }
}

@media (min-width: 1200px) {
    .breadcrump-wrapper.tools-breadcrump {
        max-width: var(--container-max-width, 1320px);
    }
}

@media (max-width: 991px) {
    .tools-breadcrump ol li {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .tools-breadcrump ol li {
        font-size: 14px;
    }

}

/********************************************
Lightbox / Images
********************************************/

.mfp-title {
    bottom: -55px;
    padding: 5px 20px;
    font-size: 20px;
}

figcaption {
    background: #ebebeb;
    padding: 3px 15px;
    font-size: 11px;
    font-style: italic;
    color: #000;
}

/********************************************
Custom Elements
********************************************/

/* === Cutoff Title === */
.cutoff-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--cutoff-title-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === Cutoff Element (like readmore) === */
.cutoff-area {
    --cutoff-blend-color: #fff;
    --cutoff-max-height: 500px;
    --cutoff-toggle-size: 20px;
    max-height: var(--cutoff-max-height);
    overflow-y: hidden;
    position: relative;
}

.cutoff-area.text-blend::after {
    content: "";
    position: absolute;
    height: calc(var(--cutoff-max-height) / 2);
    width: 100%;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--cutoff-blend-color));
}

/* expaned state */
.cutoff-area:has(+ div .toggle-cutoff input[type=checkbox]:checked) {
    --cutoff-max-height: auto !important;
}

/* toggle input field */
.toggle-cutoff {
    cursor: pointer;
}

.toggle-cutoff i {
    transition: transform .2s ease-in-out;
    font-size: 20px;
}

.toggle-cutoff input {
    appearance: none;
    -webkit-appearance: none;
}

.toggle-cutoff input[type=checkbox]:checked + i {
    transform: rotate(-180deg);
}

/* === Teaser Fullwidth === */

/** typo **/

.teaser-fw-section h2 {
    font-size: 46px;
    line-height: 50px;
    font-family: "Open Sans", serif;
    font-weight: 800;
}

.teaser-fw-section h4 {
    font-size: 24px;
    line-height: 32px;
    font-family: "Open Sans", serif;
    font-weight: 400;
    color: #000;
}

/********************************************
ICONS
********************************************/

/* category icon */
.entry .categoryIcon, .oc-item .categoryIcon {
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    text-align: center;
    border: 0px solid;
    border-radius: 2px;
    color: var(--cnvs-themecolor);
}


/* podcast category icon */
.categoryIcon .fa-podcast {
    font-size: 22px
}

/* organistion category icon */
.categoryIcon .fa-building {
    font-size: 21px;
}

/* event category icon */
.categoryIcon .fa-calendar-check {
    font-size: 22px;
}

/********************************************
Buttons
********************************************/

/* === Button Groups === */

/* cta group for detail page */
aside .cta-detail .button-group, .more-links .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

aside .cta-detail .button-group .btn, .more-links .button-group .btn {
    max-width: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

aside .cta-detail .button-group .btn i, .more-links .button-group .btn i {
    position: absolute;
    left: 10px;
}

aside .cta-detail .button-group .btn > span {
    display: flex;
}

/*=== Transparent Button === */
.btn-transparent {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--cnvs-themecolor);
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-font-size: 16px;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: "Open Sans", Sans-Serif;
}

/* === Yellow Button === */
.btn-yellow {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--cnvs-themecolor);
    --bs-btn-border-color: var(--cnvs-themecolor);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-font-size: 16px;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-font-weight: 700;
    --bs-btn-font-family: "Open Sans", Sans-Serif;
}

/* === CANVAS Buttons - based on Selector 'button' === */

.button-standard {
    --cnvs-btn-padding-x: 1.375rem;
    --cnvs-btn-padding-y: 0.4rem;
    --cnvs-btn-fontsize: 14px;
    --cnvs-btn-color: #fff;
    --cnvs-btn-color-hover: #fff;
    --cnvs-btn-lineheight: calc(var(--cnvs-btn-fontsize) * 1.6);
    --cnvs-btn-border-width: 0px;
    border-radius: 5px;
    margin: 0px;
    padding: var(--cnvs-btn-padding-y) var(--cnvs-btn-padding-x);
    font-size: var(--cnvs-btn-fontsize);
    line-height: var(--cnvs-btn-lineheight);
    text-align: center !important;
    background-color: #000;
    color: #fff;
    font-weight: 600;
    border: 1px solid #000;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    width: 225px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Fügt am Ende abgeschnittener Texte "..." hinzu */
}

.button-standard-inverse {
    background-color: transparent !important;
    color: #000 !important;
    --cnvs-btn-color-hover: #000 !important;
}

.button-standard-yellow {
    background-color: #ffed00 !important;
    color: #000 !important;
    --cnvs-btn-color-hover: #ffed00 !important;
    border-color: #ffed00;
}


.special-action span {
    white-space: break-spaces;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button.button-reveal i {
    background-color: transparent !important;
}


/* === CALL To Action Buttons === */
.btn-cta {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-font-size: 14px;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: "Open Sans", Sans-Serif;
}

.btn-cta.inverse {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-font-size: 14px;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: "Open Sans", Sans-Serif;
}

/* === External Links ===*/
.btn.external-links {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--cnvs-themecolor);
    --bs-btn-hover-border-color: var(--cnvs-themecolor);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-font-size: 14px;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: "Open Sans", Sans-Serif;
    --bs-btn-border-width: 1px;
}

/* === Black Transparent Button ===*/
.btn-transparent-black {
    --bs-btn-color: #000;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #000;
    --bs-btn-font-size: 14px;
    --bs-btn-disabled-border-color: #000;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: "Open Sans", Sans-Serif;
}


/* === Small variant with less y-padding ===*/
.btn-small {
    --bs-btn-padding-y: .25rem;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    text-decoration: none !important;
}


/*******************************************
Lists
*******************************************/
ul.content-list {
    padding-left: 30px;
}

ul.content-list li:not(:last-of-type) {
    margin-bottom: 1.5rem;
}


/********************************************
Detail Sidebar 
********************************************/

/* === Sidebar General === */
aside.sidebar .card-wrapper:not(:last-of-type) {
    margin-bottom: 1.5rem;
}

/* === Profile === */

.detail-profile .fbox-plain {
    --cnvs-featured-box-plain-font-size: 2.25rem;
    --cnvs-featured-box-padding-x: 0px;
    --cnvs-featured-box-font-size: 15px;
    --cnvs-primary-font: "Open Sans", Sans-Serif;
    align-items: center;
}

.detail-profile .fbox-plain i {
    color: #000;
}

/* fbox title */
.detail-profile .fbox-plain .fbox-content h3 {
    font-weight: bold;
}

/* fbox description */
.detail-profile .fbox-plain .fbox-content p {
    color: #000;
    font-size: var(--cnvs-featured-box-font-size);
}


/* === Detail Feedback === */

.card-feedback {
    --bs-card-bg: #fff;
    --bubble-text-color: #000;
    border: 3px solid #f3f3f3;
    border-radius: 5px;
}

.card-feedback .quote-bubble {
    --cnvs-bubble-color: var(--cnvs-themecolor);
    padding: 1rem;
}

.card-feedback h6 {
    font-size: 18px;
    font-family: "Open Sans", serif;
    font-weight: 600;
    color: var(--bubble-text-color);
}

.card-feedback p {
    font-size: 14px;
}

/********************************************
Entries (Items like article, podcast etc) 
********************************************/
#moreArtikel > .row,
#moreVideos > .row {
    margin-bottom: calc(50px * -1);
}

/* === Global Entry === */

/* entry title */
.entry-title h4,
.entry-title h3 {
    font-family: "Open Sans", serif;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 24px;
    line-height: 30px;
    color: #000;
}

@media (max-width: 375px) {
    /* entry title */
    .entry-title h4,
    .entry-title h3 {
        font-size: 17px;
    }

    .influencer-entry-image .square-lg {
        --cnvs-square-size: 5rem;
    }
}

/****
Article Overview Flächen
****/

/* article title wrapper */

.entry .article-title-wrapper .headline-bubble {
    --headline-bubble-fontSize: 12px;
    font-size: var(--headline-bubble-fontSize) !important;
}


.article-title-wrapper .headline-bubble {
    transform: translateY(10px);
}

.article-title-wrapper {
    display: flex;
}

@media (max-width: 991px) {
    .article-title-wrapper .headline-bubble {
        --headline-bubble-fontSize: 18px;
    }
}


/* entry meta */
.entry .entry-meta {
    --cnvs-post-meta-margin: 10px;
}

/* remove the negativ row margin for the list element to be in line with other content*/
.entry-meta ul li:first-of-type::before {
    margin-right: calc(var(--cnvs-post-meta-margin) - 4px);

}

/* offset the the separator */
.entry-meta ul li::before {
    transform: translateY(-1px);
}

/* entry category */
.entry .entry-categories {
    margin-bottom: 4px;
}

/* category icon */
.entry .entry-categories a i {
    margin-left: 1px;
}

/* === Fullwidth Entry === */

/* entry image */
.entry-fullwidth .entry-image-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 300px;
}

.entry-fullwidth .event-logo {
    position: relative;
}

/* entry category */
.entry.entry-fullwidth .entry-categories a {
    margin-bottom: 0px !important;
}

.entry-fullwidth .entry-categories {
    margin-bottom: 5px !important;
}

/* === Timeline for Events === */

#posts.themed-timeline,
#organistions,
#literatures,
.full-width-spacer {
    margin-bottom: -3rem !important;
}


.postcontent .themed-timeline .entry-date {
    background-color: transparent;
}

.themed-timeline .entry:hover .entry-timeline, .themed-timeline .entry:hover .timeline-divider {
    border-color: #ced4da;
    color: #000;
}

.themed-timeline .entry .timeline-divider {
    border-color: #ced4da;
}

.themed-timeline .entry-timeline {
    --cnvs-post-timeline-border-color: var(--cnvs-themecolor);
    --cnvs-body-bg: #f8f9fa;
    --cnvs-contrast-500: #000;
    --cnvs-post-timeline-date-size: 90px;
    border: 0;
    height: auto;
    padding: 4px;
}

/* timeline date box */
.postcontent .themed-timeline .entry-timeline {
    --cnvs-post-timeline-date-size: 60px;
    top: -4px;
    border-radius: 10px;
    background-color: #f3f3f3;
}

/* date  day */
.themed-timeline .entry-date span.date-day {
    font-size: 30px;
    font-family: "Open Sans", serif;
    font-weight: 600;
}

/* date month */
.themed-timeline .entry-date span.date-month {
    color: #000;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 5px;
}

/* date year */
.themed-timeline .entry-date span.date-year {
    color: #8d8d8d;
    font-size: 13px;
    font-weight: 500;
}

/* date format string */
.themed-timeline .entry-date span {
    line-height: 1;
    margin-top: 0px;
    font-size: 14px;
}

/* highlight (top-event) */
.themed-timeline .highlight-button {
    position: absolute;
    left: -26px;
    bottom: -100px;
    font-size: 14px;
    border-radius: 2px;
    overflow: hidden;
    width: 100px;
}

.themed-timeline .highlight-button a {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 12px 5px;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    font-family: "Open Sans", serif;
    color: #000;
    background-color: var(--cnvs-themecolor);
}


.themed-timeline .highlight-over-image {
    left: 10px;
    bottom: inherit;
    top: 10px;
    z-index: 1;
}

.themed-timeline .highlight-over-image a {
    color: #000 !important;
}


/* event expired badge */
.expire-badge {
    z-index: 9;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    color: #fff;
}

.themed-timeline .highlight-button span {
    --highlight-border-color: #000;
}


/********************************************
Detail Page Stage (top part)
********************************************/

#detail-stage {
    --stage-text-color: #fff;
}

#detail-stage .entry-categories a {
    gap: 6px;
    display: flex;
    align-items: center;
}

.entry-categories {
    margin-bottom: 10px;
}

#detail-stage .entry-categories i, .entry-categories a i {
    font-size: 1rem;
    margin-right: 10px;
}

#detail-stage .entry-categories i {
    color: inherit;
}

.entry-categories a i {
    color: var(--cnvs-post-meta-color);
}

/* staged category */
#detail-stage .entry-categories {
    font-family: var(--cnvs-primary-font);
    font-size: 0.75rem;
    line-height: 1rem;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--stage-text-color, #fff);
}

/* staged headline */
#detail-stage .stage-entry-headline {
    font-family: var(--cnvs-primary-font);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3.5rem;
    height: auto;
    color: var(--stage-text-color, #fff);
}

@media (max-width: 425px) {
    #detail-stage .stage-entry-headline {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
}

/********************************************
EventsContactPerson Module (wrapper class =>  .contact-card)
********************************************/
.card-author .author-title {
    font-size: 18px;
    font-weight: 500;
}

.contact-card .card-author {
    height: 100%;
}

.contact-card .contact-description {
    font-size: 14px;
    font-family: "Open Sans", serif;
}


/********************************************
Person Module 
********************************************/

.persons .team-content p {
    font-size: 14px;
    font-family: "Open Sans", serif;
    line-height: 20px;
}

.persons .team-quote {
    font-size: 14px;
    line-height: 18px;
    font-family: "Open Sans", serif;
    margin: 1rem 0 0 0.75rem;
    position: relative;
}

.persons .team-quote i {
    position: absolute;
    right: 0;
    transform: translateY(-30px);
    background-color: var(--cnvs-themecolor);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* quote carousel */
.persons .owl-carousel {
    --cnvs-owl-dots-sizes: 6px;
    --cnvs-owl-nav-bg: transparent;
    --cnvs-owl-full-nav-hover-bgcolor: #000;
}

/* dots */
.persons .owl-dots .owl-dot {
    margin-top: 0;
    border: 1px solid #000;
}

.persons .owl-dots .owl-dot:hover, .persons .owl-dots .owl-dot.active {
    --cnvs-owl-nav-bg: #000;
}

.persons .owl-dots {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}


/********************************************
Artikel/Item Carousels
********************************************/

/*    
TODO: make it clean! 
    we have currently two carousel types
        1. Staged (var-one)
        2. Not Stged (var-two) 
    make naming uniform and think about a good markup 
    for the staged variant it is important to animate the elements like icon and badge since it will else show on 
    the staged part of the slide. this can be achieved with animate.css but a better solution would probably 
    be to do it event based so you have to initilize owl-carousel with js.
    -----------------------------------------------
    Other variants can follow     
*/


/* === Staged example / var-one (/?alttemplate=eventOverview) === */

/* spacer */
.owl-loader {
    min-height: var(--owl-loader-height);
}

/* content overlay */
.staged-item-carousel .text-overlay-mask {
    opacity: 1;
}

.staged-item-carousel .portfolio-desc {
    background-color: rgba(255, 255, 255, .8);
}

.owl-var-one .owl-item img {
    filter: brightness(0.7);
}

.owl-var-one .owl-item .bg-overlay-content .portfolio-desc {
    display: none;
}

.owl-var-one .owl-item.active .bg-overlay-content .portfolio-desc {
    animation: fadeInUp;
    animation-duration: 1s;
    display: block;
}

.owl-var-one .owl-item .sale-flash .badge,
.owl-var-one .owl-item .oc-item > .categoryIcon {
    display: none;
}

.owl-var-one .owl-item.active .sale-flash .badge {
    animation: fadeIn;
    animation-duration: 1s;
    display: inline-block;
}

.owl-var-one .owl-item.active .oc-item > .categoryIcon {
    animation: fadeIn;
    animation-duration: 1s;
    display: flex;
}

@media (max-width: 1100px) {
    .max-width-owl-nav .owl-prev {
        transform: translateX(100%);
    }

    .max-width-owl-nav .owl-next {
        transform: translateX(-100%);
    }
}

@media (max-width: 991px) {
    .max-width-owl-nav .owl-prev,
    .max-width-owl-nav:hover .owl-prev {
        opacity: 1 !important;
        transform: translateX(80%);
        left: calc(-3 * var(--cnvs-owl-nav-sizes) / 2) !important;
    }

    .max-width-owl-nav .owl-next,
    .max-width-owl-nav:hover .owl-next {
        opacity: 1 !important;
        transform: translateX(-80%);
        right: calc(-3 * var(--cnvs-owl-nav-sizes) / 2) !important;
    }
}

@media (max-width: 576px) {
    #content .max-width-owl-nav .owl-nav > button {
        top: 46%;
    }

    .max-width-owl-nav .owl-prev,
    .max-width-owl-nav:hover .owl-prev {
        transform: translateX(75%);
        left: calc(-1 * var(--cnvs-owl-nav-sizes)) !important;
    }

    .max-width-owl-nav .owl-next,
    .max-width-owl-nav:hover .owl-next {
        transform: translateX(-75%);
        right: calc(-1 * var(--cnvs-owl-nav-sizes)) !important;
    }
}

.next-slide {
    animation: fadeInUp;
    animation-duration: 1s;
    display: block;
}

.last-slide {
    animation: fadeOutDown;
    animation-duration: 1s;
    display: block;
}

/* image */
.person-image {
    max-width: 90px;
    margin: 1rem auto 0 auto;
}

.person-subtitle {
    font-size: 12px;
    font-family: "Open Sans", Sans-serif;
    color: #333;
    font-weight: normal;
    letter-spacing: 1px;
}

/***************************************
Countdown Timer
***************************************/

#flipdown {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#flipdown .rotor-group-heading {
    font-size: 12px;
}

.flipdown .rotor {
    font-size: 2.5rem !important;
}

.flipdown .rotor {
    margin: 0 2px 0 0 !important;
}

.flipdown .rotor,
.flipdown .rotor-leaf,
.flipdown .rotor-leaf-front,
.flipdown .rotor-leaf-rear,
.flipdown .rotor-top,
.flipdown .rotor-bottom,
.flipdown .rotor:after {
    width: 30px !important;
}

.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    left: 76px !important;
}

.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
    bottom: 19px !important;
    height: 8px !important;
    width: 8px !important;
}

.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    bottom: 35px !important;
    height: 8px !important;
    width: 8px !important;
}

.flipdown .rotor-leaf-front,
.flipdown .rotor-top {
    line-height: 60px !important;
}

.flipdown .rotor-leaf,
.flipdown .rotor {
    height: 60px !important;
}

.flipdown .rotor-leaf-front,
.flipdown .rotor-leaf-rear,
.flipdown .rotor-top,
.flipdown .rotor-bottom,
.flipdown .rotor:after {
    height: 30px !important;
}

@media (max-width: 550px) {
    .timer-wrapper {
        margin: 0px -50px;
    }

    .flipdown .rotor-group {
        padding-right: 10px;
    }

    .flipdown .rotor {
        font-size: 1.5rem !important;
    }

    .flipdown .rotor, .flipdown .rotor-leaf, .flipdown .rotor-leaf-front, .flipdown .rotor-leaf-rear, .flipdown .rotor-top, .flipdown .rotor-bottom, .flipdown .rotor:after {
        width: 22px !important;
    }

    .flipdown .rotor-group-heading:before {
        font-size: .6rem !important;
        height: 20px;
        line-height: 20px;
        text-align: left !important;
    }
}

/********************************************
Youtube Video
********************************************/

/* === Youtube Video Poster === */
.poster {
    height: 100%;
    background-position: center;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
}


@media (min-width: 992px) {
    .video-content .overlapp {
        --overlapp-offset: 80px;
    }
}

@media (min-width: 1400px) {
    .video-content .overlapp {
        --overlapp-offset: 120px;
    }
}

.video-content .overlapp {
    margin-top: calc(var(--overlapp-offset) * -1);
}


/*****************************************
Searches
*****************************************/

/* === Tools Search === */
/*************************
TOOL SEARCH
*************************/

/** search **/
#inputSearchMenuForm {
    --search-height: 50px;
    --space-between: 0;
    --search-icon-offset: 10px;
    --search-icon-width: 20px;
    --search-icon-height: 25px;
    height: var(--search-height);
    position: relative;
}

/** icons **/
/* search */
#inputSearchMenuForm .search-icon {
    left: var(--search-icon-offset, 10px)
}

/* close */
.search-clear-icon {
    right: 10px;
    cursor: pointer;
}

#inputSearchMenuForm input {
    border: 0;
    --cnvs-input-focus-box-shadow: 0 0 0 0.25rem var(--cnvs-themecolor);
    --cnvs-input-btn-font-size-lg: 1rem;
    height: 100%;
}

body:not(:has(#hero-slider #inputSearchMenuForm)) #inputSearchMenuForm input,
#header.sticky-header #inputSearchMenuForm input {
    border: 1px solid var(--gray-border-color);
    height: 45px;
    margin-left: 0px;
}

#inputSearchMenuForm input {
    border-radius: 5px;
    padding-left: calc(calc(var(--search-icon-offset) * 2) + var(--search-icon-width));
}

body:not(:has(#hero-slider #inputSearchMenuForm)) #inputSearchMenuForm input:focus-within,
body:not(:has(#hero-slider #inputSearchMenuForm)) #inputSearchMenuForm input:focus,
#header.sticky-header #inputSearchMenuForm input:focus-within,
#header.sticky-header #inputSearchMenuForm input:focus {
    border: 1px solid var(--cnvs-themecolor, #000);
    box-shadow: none;
}

/** search results **/
#inputSearchMenuForm .search-results {
    position: absolute;
    top: calc(var(--search-height) + var(--space-between));
    left: 11px;
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
}

#inputSearchMenuForm .search-results {
    padding: 20px 0;
    max-height: 425px;
    overflow-y: auto;
}

#inputSearchMenuForm .result-list {
    padding: 0;
    list-style: none;
}

#inputSearchMenuForm .result-list span {
    font-family: "Open Sans", serif;
}

#inputSearchMenuForm .result-list strong {
    font-weight: 800;
}

#inputSearchMenuForm .search-results:not(.loading-skeleton) .result-list:not(:last-of-type) {
    margin-bottom: 18px;
}

#inputSearchMenuForm .search-results:not(.loading-skeleton) .result-list a:not(:last-of-type) {
    margin-bottom: 5px;
}

#inputSearchMenuForm .search-results .result-list h5 {
    font-family: "Open Sans", serif;
    font-weight: 800;
    font-size: 11px;
    color: #000;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#inputSearchMenuForm .search-results .result-list a {
    font-family: "Open Sans", serif;
    font-weight: 500;
    font-size: 15px;
    color: #000;
    padding: 5px 0;
    transition: background-color .4s ease-in-out;
}

#inputSearchMenuForm .search-results .result-list a:hover {
    background-color: #f3f3f3;
}

#inputSearchMenuForm .search-results .result-list h5, #inputSearchMenuForm .search-results .result-list a {
    padding-left: 10px;
    padding-right: 10px;
}

/** sekelton **/
.skeleton-text, .skeleton-img {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-text {
    height: 15px;
    width: 100%;
    margin: 10px 0;
    border-radius: 5px;
}

.skeleton-img {
    height: 45px;
    width: 45px;
    border-radius: 5px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* === Main Search === */

#main-search .search-results .result .toggle-title {
    font-family: "Open Sans", serif;
    font-weight: 500;
    font-size: 20px;
}

#main-search .search-results .result .result-grid {
    display: grid;
    margin: 16px 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(100px, min-content);
    gap: 72px;
}

#main-search .search-results .result a {
    transition: all .2s ease-in-out;
}

#main-search .search-results .result .search-entry {
    transition: box-shadow .2s ease-in-out, transform .2s ease;
}

/** typo **/
#main-search .search-results .result .search-entry h4 {
    font-family: "Open Sans", serif;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-results h2 {
    font-family: "Open Sans", serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
}

.search-results-meta {
    font-family: "Open Sans", serif;
    font-weight: 400;
}

#main-search .search-results .result .search-entry p {
    font-family: "Open Sans", serif;
    font-weight: 300;
}

.search-entry--description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* swiper grid slider */
#grid-slider + .swiper-pagination {
    --cnvs-swiper-dots-position-bottom: -25px;
    --cnvs-slider-arrow-color: #000;
}

/*****************************************
Preview 
*****************************************/

/** bar **/
#preview-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: var(--cnvs-themecolor);
    width: 100%;
    z-index: 99;
}

/** disable links in preview mode **/
.preview-mode a:not(.is-play, #tool-nav .swiper-slide > a, .social-icon, #allowed-sites a, [rel], [target='_blank'], [data-lightbox]) {
    pointer-events: none;
    cursor: pointer;
}

/*** Advertising Customer Login Page ***/

/** Validation Summary **/
.validation-summary {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.validation-summary ul {
    margin-left: 15px;
    margin-bottom: 0;
}

.validation-summary ul li {
    font-weight: bold;
    font-size: 16px;
}

/*****************************************
Footer
*****************************************/

.widget_links li,
#copyrights a {
    color: rgba(255, 255, 255, .75);
}

.widget_links li a {
    color: inherit;
    padding-left: 7px;
}

.widget > h4 {
    display: inline-block;
    background-image: linear-gradient(rgba(243, 152, 135, 0.3), rgba(243, 152, 135, 0.3));
    background-repeat: no-repeat;
    background-size: 100% 6px;
    background-position: 0 95%;
}

#footer {
    background-color: rgba(255, 234, 230, 0.32);
    border-top: 0;
}

#footer .footer-logo-text {
    font-family: var(--cnvs-primary-font), serif;
    font-weight: 400;
    color: #fff;
    font-size: 15px;
}

.dark #footer {
    background-color: #000;
}

#copyrights {
    background-color: #FFF;
}

#copyrights a:hover {
    color: #fff;
}

.dark #copyrights {
    background-color: rgba(255, 255, 255, 0.08);
}

/** copyright **/
.copyrights-menu a {
    font-family: "Open Sans", serif;
    font-weight: 400;
}

@media (max-width: 991px) {
    #footer .footer-logo-tax {
        max-width: 100px;
    }
}

/**********************
Tools 9er - Grid
***********************/

/* === Popular Categories === */
#vertical-scroll-swiper {
    height: 500px;
    margin: 30px 0;
}

@media (max-width: 991px) {
    #vertical-scroll-swiper {
        height: 30px;
        margin: 15px auto 15px auto;
        width: calc(100% - calc(var(--swiper-navigation-size) * 1.25));
    }

    #vertical-scroll-swiper .swiper-slide i {
        display: none !important;
    }

    #vertical-scroll-swiper .swiper-slide {
        width: auto;
    }
}

/* active category */
#active-category a {
    color: #000;
}

#active-category a:hover {
    color: #000;
    text-decoration: underline !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-weight: 800;
    --swiper-navigation-size: 22px;
}

#filter-tools .swiper-button-prev, #filter-tools .swiper-button-next {
    color: #000;
}

@media (min-width: 992px) {
    #filter-tools .swiper-button-next {
        bottom: 0;
        top: auto;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        margin: 0;
    }

    #filter-tools .swiper-button-prev {
        bottom: auto;
        top: 0;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        margin: 0;
    }
}

#filter-tools .swiper-button-disabled {
    display: none;
}

#filter-tools .swiper-slide {
    font-family: "Open Sans", serif;
    font-weight: 400;
    font-size: 18px;
    cursor: pointer;
}

#filter-tools .swiper-slide > div {
    position: relative;
    line-height: 1.1;
}

#filter-tools .swiper-slide.active > div > span {
    transition: margin-left .2s ease-in-out;
}

@media (min-width: 992px) {
    #filter-tools .swiper-slide.active > div > span {
        margin-left: 30px;
    }
}

@media (max-width: 991px) {
    #filter-tools .swiper-slide {
        padding: .5rem 1rem;
        background-color: var(--gray-border-light);
        border-radius: 10px;
        transition: background-color 200ms ease-in-out;
    }

    #filter-tools .swiper-slide.active {
        background-color: var(--cnvs-themecolor);
    }

    #filter-tools .swiper-slide span {
        font-size: 15px;
        font-weight: 500;
    }
}

@media (min-width: 992px) {
    #filter-tools .swiper-slide.active > div, #filter-tools .swiper-slide:hover > div {
        font-weight: 700;
    }
}

#filter-tools .swiper-slide > div > i {
    display: none;
    position: absolute;
    left: 0;
    transform: translateY(-50%);
}

/** tool grid **/
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 767px) {
    .tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .tool-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Individual grid item */
.tool-grid-item {
    border: 1px solid #e0e0e0;
    padding: 10px;
    text-align: center;
    transition: all .2s ease-in-out;
}

.tool-grid-item img {
    border: 1px solid #e0e0e0;
}

/* Tool Name */
.tool-grid-item .tool-name {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    color: #000;
}


/* Tool Provider Name */
.tool-grid-item .tool-provider {
    font-size: 14px;
    line-height: 18px;
    color: #888;
    display: flex;
    justify-content: center;
    gap: 5px;
}


/* === All Categories === */
.category-links {
    --cat-padding-vertical: 18px;
    --cat-line-height: 24px;
    --cat-border-width: 2px;
    --cat-items-show: 8;
}

.category-links > div {
    --cutoff-max-height: calc(calc(var(--cat-line-height) + calc(var(--cat-padding-vertical) * 2) + var(--cat-border-width)) * var(--cat-items-show))
}

.category-links a {
    color: #000;
    font-size: 18px;
    line-height: var(--cat-line-height);
    font-family: "Open Sans", serif;
    font-weight: 400;
    padding: var(--cat-padding-vertical) 10px var(--cat-padding-vertical) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--cat-border-width) solid var(--gray-border-color);
}

.category-links a:hover {
    font-weight: 600;
}

.category-links a:hover i {
    animation: bubbleWobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

/*** Advert Sections ***/
.ad-section img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.ad-section, .ad-entry {
    display: none;
}

.ad-section:has(div[id^="adBanner"]),
.ad-entry:has(div[id^="adBanner"]) {
    display: block;
}

/*** Tag Detail Pages ***/

/** General **/
.cutoff-text {
    --max-lines: 5;
    --line-height: 1.65;
    --cutton-text-size: 1em;
    --fade-away-color: #fff;
    height: calc(var(--max-lines) * var(--cutton-text-size) * var(--line-height));
    line-height: var(--line-height);
    overflow: hidden;
    position: relative;
}

.cutoff-text > p {
    line-height: var(--line-height);
}

.cutoff-text.fade-away::before {
    background: linear-gradient(to bottom, transparent, var(--fade-away-color, #fff));
    position: absolute;
    width: 100%;
    bottom: 0;
    content: "";
    pointer-events: none;
    height: calc(var(--cutton-text-size) * var(--line-height));
}

.cutoff-text.fade-away.disable-fade::before {
    content: none;
}

.cutoff-text:has(+ div > .expand-btn:not(.expand))::before {
    background: linear-gradient(to bottom, transparent, var(--fade-away-color, #fff));
    position: absolute;
    width: 100%;
    bottom: 0;
    content: "";
    pointer-events: none;
    height: calc(var(--cutton-text-size) * var(--line-height));
}

#category-title .cutoff-text > *:last-child {
    margin-bottom: 0;
}

.cutoff-text:has(+ div > .toggle-cutoff input:checked) {
    height: auto;
}

.cutoff-text:has(+ div > .toggle-cutoff input:checked)::before {
    display: none;
}

.expand-btn {
    appearance: none;
    border: 0;
    background-color: transparent;
}

.expand-btn i {
    transition: tranform .2s ease-in-out;
}

.expand-btn.expand i {
    transform: rotateX(-180deg);
}

.cutoff-text:has(+ div > .expand-btn.expand) {
    height: auto;
}

/*********************
Hero Area 
*********************/

.hero-after-spacing:has(+ .row) {
    padding-bottom: 5rem;
}


/******************
Cookie First ContentBlocker 
 *****************/
/** content blocker Tag-Box **/
.content-blocker.widget-box-blocker {
    position: relative;
}

.content-blocker.widget-box-blocker .blocker-unlock {
    position: absolute;
    left: 50%;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 550px;
    background: #F8F8F8;
    padding: 1.5rem;
    border-radius: 5px;
}

/** content blocker YouTube **/
.content-blocker.yt-blocker {
    position: absolute;
    left: 50%;
    right: 0;
    top: 50%;
    width: 100%;
    max-width: 550px;
    transform: translate(-50%, -50%);
}

.content-blocker.yt-blocker {
    background-color: #F8F8F8;
    padding: 1.5rem;
    border-radius: 5px;
    z-index: 99;
}

.content-blocker .blocker-unlock .blocker-form {
    width: fit-content;
    margin: 0 auto;
}

.content-blocker .blocker-unlock .blocker-form label {
    font-size: 13px;
    font-weight: lighter;
}

.content-blocker .blocker-unlock .blocker-form p {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.content-blocker .blocker-unlock .blocker-form label,
.content-blocker .blocker-unlock .blocker-form p {
    font-family: "Open Sans", serif;
    color: #000;
}

.widget-box-blocker .blocker-background {
    background-image: url("/images/contentBlocker/social-media-content-block-background.png");
    padding-top: 56.25%;
    filter: blur(20px);
    background-position: center top;
}


@media (max-width: 767px) {
    .content-blocker.yt-blocker {
        width: 95%;
        padding: 1rem;
    }
}

/***************************************************
Common Highlight 
****************************************************/
/* === Highlight Logo === */

.highlight-logo img {
    max-height: 60px;
}

@media (min-width: 992px) {
    .highlight-logo img {
        max-height: 75px;
    }
}

/***************************************************
 Carousel Highlight
****************************************************/
.carousel-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/***************************************************
Staged Padding Carousel Highlight
****************************************************/
.carousel-padding-img {
    aspect-ratio: 14 / 9;
    object-fit: cover;
    object-position: center;
}

/***************************************************
Fullwidth Area Highlight
****************************************************/
.fullwidth-image-highlight {
    aspect-ratio: 432 / 325;
    object-fit: cover;
    object-position: center;
}

/***************************************************
Page Protect Partial
****************************************************/

#unlock .card {
    width: 100%;
    max-width: 500px;
}

#unlock .unlock-logo {
    aspect-ratio: 100/21;
    max-height: 35px;
}

/***************************************************
RTE-Content
****************************************************/
.rte-content p,
.rte-content pre,
.rte-content ul,
.rte-content ol,
.rte-content dl,
.rte-content dd,
.rte-content blockquote,
.rte-content address,
.rte-content table,
.rte-content fieldset,
.rte-content form {
    margin-bottom: 20px;
}

.rte-content > *:last-child {
    margin-bottom: 0;
}

/*** Lists ***/

/** event data list **/
.event-data-list,
.event-data-list--increased-spacing {
    display: flex;
    flex-flow: column wrap;
    padding-left: 1.3rem;
    --data-list-basis: 50%;
}

.event-data-list {
    --list-spacing: 10px;
}

.event-data-list--increased-spacing {
    --list-spacing: 20px;
}

.event-data-list strong,
.event-data-list--increased-spacing strong {
    font-family: "Open Sans", serif;
    font-weight: 600;
}

.event-data-list li > strong:first-of-type,
.event-data-list--increased-spacing li > strong:first-of-type {
    display: block;
}

.event-data-list li,
.event-data-list--increased-spacing li {
    flex-basis: var(--data-list-basis, 50%);
}

.event-data-list li:not(:last-of-type),
.event-data-list--increased-spacing li:not(:last-of-type),
.rte-content ul li:not(:last-of-type),
.rte-content ol li:not(:last-of-type) {
    margin-bottom: var(--list-spacing);
}

.event-data-list li > ul,
.event-data-list--increased-spacing li > ul {
    margin-top: 10px;
    margin-bottom: 5px;
}

/* normal list */
.rte-content ul:not(.event-data-list, .event-data-list--increased-spacing),
.rte-content ol:not(.event-data-list, .event-data-list--increased-spacing) {
    padding-left: 1.3rem;
}