.static > .element-row {
    margin: 20px 0px;
}

@media (min-width: 576px) {
    .static > .element-row.elements-2 > .element:first-child {
        float: left;
        width: 48%;
    }

    .static > .element-row.elements-2 > .element:last-child {
        float: right;
        width: 48%;
    }
}
.cbox.cbox-element-package-selection {
    padding-bottom: 40px;
}


.package-selection__title {
    font-weight: 600;
    text-align: center;
    letter-spacing: -2px;
    margin: 25px 0;
    font-size: 43px;
    line-height: 1.1;
}

.package-selection__subtitle {
    text-align: center;
    margin: 10px 0;
    font-size: 30px;
    line-height: 1.05;
}

.package-selection__period-selection-container {
    padding: 0px;
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.package-selection__period-selection-container .btn {
    text-wrap: nowrap;
    border: solid 1px #ccc;
    background: #eee;
    border-radius: 8px;
    color: #000;
    cursor: pointer;
    padding: 8px 16px;
    margin-right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-selection__period-selection-container label:has(input:checked) .btn {
    background-color: var(--default-color-purple);
    border-color: var(--default-color-purple);
    color: #fff;
}

.package-selection__period-selection-container label:has(input:disabled) {
    opacity: 0.4;
}

.package-selection__period-selection-container input {
    display: none;
}

.package-selection__period-selection-container .sub {
    display: block;
    text-align: center;
    color: #999;
    font-size: 70%;
}

@media (min-width: 600px) {
    .package-selection__period-selection-container {
        flex-direction: row;
    }
}


.package-selection__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.package-selection__grid {
    flex: 1;
}

.package-selection__sub-title {
    font-size: 130%;
    font-weight: bold;
    margin: 0px 0px 10px 0px;
}

.package-selection__loyalty-platform {
    border: solid 1px #000;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.package-selection__loyalty-platform__header {
    background: #000;
    padding: 8px 16px;
    border-radius: 7px 7px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.package-selection__loyalty-platform__title {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

.package-selection__loyalty-platform__select select {
    background: var(--default-color-pink);
    border: solid 1px var(--default-color-pink);
    padding: 8px 12px;
    font-size: 14px;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.package-selection__loyalty-platform__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.package-selection__loyalty-platform__savings-badge {
    display: flex;
    justify-content: flex-end;
    flex: 0;
}

.package-selection__loyalty-platform__savings-badge span {
    background: #C800A1;
    color: #fff;
    border-radius: 50px;
    padding: 4px 15px;
    font-size: 14px;
}

.package-selection__loyalty-platform__savings-badge .savings-percentage-output {
    background: none;
    padding: 0;
    border-radius: 0;
}

.package-selection__loyalty-platform__left-column {
    display: flex;
    flex: 1;
}

.package-selection__loyalty-platform__left-column-content {
    display: none;
    flex: 1;
}

.package-selection__loyalty-platform__left-column-content.body-active {
    display: flex;
}

.package-selection__loyalty-platform__left-column-description {
    flex: 1;
}

.package-selection__loyalty-platform__left-column-description p {
    font-size: 14px;
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
}

.package-selection__loyalty-platform__left-column-description p:before {
    content: '';
    display: block;
    height: 9px;
    width: 5px;
    border-bottom: solid 2px var(--default-color-pink);
    border-right: solid 2px var(--default-color-pink);
    transform: rotate(45deg);
    position: absolute;
    left: 3px;
    top: 6px;
}

.package-selection__loyalty-platform__right-column {
    border-left: #000 solid 1px;
    padding-left: 16px;
    margin-left: 16px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    min-width: 200px;
}

.package-selection__mobile {
    padding-top: 20px;
}
.package-selection__mobile .ok .btn {
    display: block;
    width: 100%;
}

@media (min-width: 600px) {
    .package-selection__loyalty-platform__right-column {
        display: flex;
    }

    .package-selection__mobile {
        display: none;
    }
}

.package-selection__split-title {
    margin: 16px 0px 0px 0px;
    font-weight: bold;
    font-size: 14px;
    border-bottom: solid 2px #000000;
}

.package-selection__split-title:first-child {
    margin-top: 0;
}

.package-selection__prices {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0px;
}

.package-selection__prices td {
    padding: 2px;
    font-size: 14px;
}

.package-selection__prices td i {
    color: var(--default-color-pink);
}

.package-selection__full_price > span.price {
    font-size: 46px;
    font-weight: bold;
    margin-bottom: 0;
}

.package-selection__full_price {
    margin: 0;
    text-align: right;
}

.package-selection__info {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: #666;
    text-align: right;
}
.package-selection__tax {
    margin: 4px 0 0 0;
    font-size: 11px;
    font-weight: bold;
    text-align: right;
}

.ok {
    margin: 0;
}

.package-selection__full_price > span.unit {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0;
}

.package-selection__loyalty-platform-table-header td {
    font-weight: bold;
}

.package-selection__prices td:first-child {
    text-align: left;
    padding-left: 0px;
}

.package-selection__prices td:not(:first-child) {
    text-align: right;
    padding-right: 0px;
}

/* Monthly view - hide yearly column */
.package-selection__monthly-prices .package-selection__yearly_price,
.package-selection__monthly-prices .package-selection__2yearly_price {
    display: none;
}
/* Monthly view - hide yearly column */
.package-selection__yearly-prices .package-selection__2yearly_price {
    display: none;
}
/* Monthly view - hide yearly column */
.package-selection__2yearly-prices .package-selection__yearly_price {
    display: none;
}

/* Yearly view - show both columns, strike through monthly */
.package-selection__yearly-prices .package-selection__monthly_price,
.package-selection__2yearly-prices .package-selection__monthly_price {
    text-decoration: line-through;
    color: #999;
}

.package-selection__prices tbody tr:last-child td {
    padding-bottom: 8px;
}
.package-selection__prices tfoot td {
    border-top: solid 1px black;
    padding-top: 8px;
}

.package-selection__addons {
    flex: 1;
}

.package-selection__addon-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.package-selection__addon {
    display: none;
    flex: 1 calc(50% - 5px);
    min-width: 280px;
    border: #000 solid 1px;
    border-radius: 8px;
    padding: 16px;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.package-selection__addon.addon-active {
    display: flex;
}

.package-selection__addon.addon-highlighted {}

.package-selection__addon .text p {
    font-size: 14px;
    margin: 8px 0;
}

.package-selection__addon .text > *:first-child {
    margin-top: 0px;
}

.package-selection__addon .text > *:last-child {
    margin-bottom: 0px;
}

.package-selection__addon--highlighted {
    display: inline-block;
    margin-top: 8px;
}

.package-selection__addon--highlighted span {
    background: var(--default-color-pink);
    color: #fff;
    border-radius: 50px;
    padding: 4px 15px;
    font-size: 12px;
    display: inline-block;
}

.package-selection__addon--toggle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 12px;
}

.package-selection__addon--toggle .price-output .line {
    display: block;
}

.package-selection__addon--toggle .price-output .price {
    display: block;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: -8px;
}

.package-selection__addon--toggle .price-output .unit {
    font-size: 12px;
    color: #999;
}
.package-selection__addon--toggle .price-output .prefix {
    display: none;
}
.package-selection__addon--toggle .price-output .line-onetime.no-period .unit {
    font-weight: bold;
    color: black;
    text-decoration: underline;
}
.package-selection__addon--toggle .price-output .line-onetime.has-period {
    font-size: 12px;
    text-decoration: underline;
    font-weight: bold;
    color: black;
}
.package-selection__addon--toggle .price-output .line-onetime.has-period .prefix,
.package-selection__addon--toggle .price-output .line-onetime.has-period .price,
.package-selection__addon--toggle .price-output .line-onetime.has-period .unit {
    display: inline-block;
    font-size: inherit;
    text-decoration: inherit;
    font-weight: inherit;
    color: inherit;
}

.package-selection__addon--toggle .checkbox {
    display: block;
    width: 50px;
    height: 24px;
    border: solid 2px #000000;
    border-radius: 12px;
    position: relative;
    background: #000;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.package-selection__addon--toggle .checkbox:has(input:checked) {
    background: var(--default-color-pink);
    border-color: var(--default-color-pink);
}

.package-selection__addon--toggle .checkbox:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: left 0.2s ease;
}

.package-selection__addon--toggle .checkbox:has(input:checked):before {
    left: calc(100% - 20px);
}

.package-selection__addon--toggle .checkbox input {
    display: none;
}

@media (min-width: 900px) {
    .package-selection__content {
        flex-direction: row;
        gap: 20px;
    }

    .package-selection__grid {
        flex: 1 50%;
    }

    .package-selection__addons {
        flex: 1 50%;
    }
}

@media (min-width: 1400px) {
    .element-billing-package-selection {
        max-width: 1300px;
        margin: 0 auto;
    }
}




.package-selection-pricing-table {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 30px;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.pricing-item-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.pricing-item-prices {
    display: flex;
    gap: 15px;
    align-items: center;
}

.pricing-current {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.pricing-divider {
    height: 1px;
    background: #333;
    margin: 15px 0 20px 0;
}

.pricing-total-section {
    margin-top: 20px;
}

.pricing-total-large {
    font-size: 48px;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin-bottom: 5px;
}

.pricing-total-large .pricing-period {
    font-size: 24px;
    font-weight: 400;
}

.pricing-total-small {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.pricing-total-small .pricing-period {
    font-size: 18px;
    font-weight: 400;
}



.pricing-total-xsmall {
    font-size: 12px;
    color: #333;
    margin-top: 10px;
}




.payment-method-option label {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    margin: 20px 0px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    cursor: pointer;
}
.payment-method-option label:hover:not(:has(input:checked)) {
    background: rgba(255, 255, 255, 0.6);
}
.payment-method-option label:has(input:checked) {
    background: rgba(255, 255, 255, 0.8);
}

.payment-method-option img {
    width: 50px;
    display: block;
}


.element-billing-package-selection .info-box {
    position: relative;
}
.element-billing-package-selection .info-box .info-box-popup {
    display: none;
    position: absolute;
    min-width: 200px;
    max-width: 250px;
    left: 50%;
    top: -1px;
    transform: translate(-50%, -100%);

/*    border: solid 1px #000; */
    border-radius: 8px;
    background: #333;
    color: #fff;
    padding: 8px;
    font-size: 12px;
}
.element-billing-package-selection .info-box .info-box-popup:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translate(-50%, 0%) rotate(45deg);
    width: 5px;
    height: 5px;
/*    border-right: solid 1px #000; */
/*    border-bottom: solid 1px #000; */
    background: #333;
}
.element-billing-package-selection .info-box .info-box-popup > span {
    display: block;
}
.element-billing-package-selection .info-box:hover .info-box-popup {
    display: block;
}

.element-billing-package-selection .info-box .more-link a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}


.element-wysiwyg .media-container img {
    width: 100%;
    max-height: 100%;
    display: block;
}

/*THEMES /////*/


/*BACKGROUNDS and FONT COLOR ///*/

.cbox-element-wysiwyg.dark,
.cbox-element-wysiwyg.dark-center,
.cbox-element-wysiwyg.dark-text-left,
.cbox-element-wysiwyg.dark-text-right,
.cbox-element-wysiwyg.dark-buttons-right {
    background-color: #000000;
}
.cbox-element-wysiwyg.purple,
.cbox-element-wysiwyg.purple-center,
.cbox-element-wysiwyg.purple-text-left,
.cbox-element-wysiwyg.purple-text-right,
.cbox-element-wysiwyg.purple-buttons-right {
    background-color: var(--default-color-purple);
}

.cbox-element-wysiwyg.dark-gradient,
.cbox-element-wysiwyg.dark-gradient-center,
.cbox-element-wysiwyg.dark-gradient-text-left,
.cbox-element-wysiwyg.dark-gradient-text-right {
    background-image: url("/resources/css/shop/jolioo25/img/bg-gradient-03.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cbox-element-wysiwyg.light-gradient,
.cbox-element-wysiwyg.light-gradient-center,
.cbox-element-wysiwyg.light-gradient-text-left,
.cbox-element-wysiwyg.light-gradient-text-right {
    background: linear-gradient(0deg,var(--color-light-grey) 0%, var(--color-purple-20) 100%);
}

.cbox-element-wysiwyg.light-buttons-right {
    background: radial-gradient(circle at 90% 110%, rgba(255, 85, 255, 1) 0%, rgba(252, 252, 252, 1) 60%);

}

.cbox-element-wysiwyg.dark *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-center *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-text-left *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-text-right *:not(.btn.btn-white),
.cbox-element-wysiwyg.purple *:not(.btn.btn-white),
.cbox-element-wysiwyg.purple-center *:not(.btn.btn-white),
.cbox-element-wysiwyg.purple-text-left *:not(.btn.btn-white),
.cbox-element-wysiwyg.purple-text-right *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-gradient *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-gradient-center *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-gradient-text-left *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-gradient-text-right *:not(.btn.btn-white),
.cbox-element-wysiwyg.dark-buttons-right *:not(.btn.btn-white),
.cbox-element-wysiwyg.purple-buttons-right *:not(.btn.btn-white) {
    color: #ffffff;
}



/*TEXTBOX WITH JUST TEXT ///////

dark
light
purple
dark-gradient
*/



@media all and (min-width: 1900px) {
    .cbox-element-wysiwyg.dark .element-row,
    .cbox-element-wysiwyg.light .element-row,
    .cbox-element-wysiwyg.purple .element-row,
    .cbox-element-wysiwyg.light-gradient .element-row,
    .cbox-element-wysiwyg.dark-gradient .element-row {
        width: 1150px;
    }
}

/*TEXTBOX WITH JUST TEXT - CENTER///////


dark-center
light-center
purple-center
dark-gradient-center

*/

@media all and (min-width: 600px) {
    .cbox-element-wysiwyg.dark-center .element-row,
    .cbox-element-wysiwyg.light-center .element-row,
    .cbox-element-wysiwyg.purple-center .element-row,
    .cbox-element-wysiwyg.light-gradient-center .element-row,
    .cbox-element-wysiwyg.dark-gradient-center .element-row {
        width: 70%;
    }
}


@media all and (min-width: 800px) {
    .cbox-element-wysiwyg.dark-center .element-row,
    .cbox-element-wysiwyg.light-center .element-row,
    .cbox-element-wysiwyg.purple-center .element-row,
    .cbox-element-wysiwyg.light-gradient-center .element-row,
    .cbox-element-wysiwyg.dark-gradient-center .element-row {
        width: 60%;
    }
}


@media all and (min-width: 1200px) {
    .cbox-element-wysiwyg.dark-center .element-row,
    .cbox-element-wysiwyg.light-center .element-row,
    .cbox-element-wysiwyg.purple-center .element-row,
    .cbox-element-wysiwyg.light-gradient-center .element-row,
    .cbox-element-wysiwyg.dark-gradient-center .element-row {
        width: 55%;
    }
}


@media all and (min-width: 1900px) {
    .cbox-element-wysiwyg.dark-center .element-row,
    .cbox-element-wysiwyg.light-center .element-row,
    .cbox-element-wysiwyg.purple-center .element-row,
    .cbox-element-wysiwyg.light-gradient-center .element-row,
    .cbox-element-wysiwyg.dark-gradient-center .element-row {
        width: 800px;
    }
}




/* TEXTBOX WITH IMAGE ///////

light-text-left
light-text-right
dark-text-left
dark-text-right
light-gradient-text-left
light-gradient-text-right
dark-gradient-text-left
dark-gradient-text-right

*/



/*text-left and text-right positioning  */

.cbox-element-wysiwyg.light-text-left .element-wysiwyg,
.cbox-element-wysiwyg.light-text-right .element-wysiwyg,
.cbox-element-wysiwyg.dark-text-left .element-wysiwyg,
.cbox-element-wysiwyg.dark-text-right .element-wysiwyg,
.cbox-element-wysiwyg.purple-text-left .element-wysiwyg,
.cbox-element-wysiwyg.purple-text-right .element-wysiwyg,
.cbox-element-wysiwyg.light-gradient-text-left .element-wysiwyg,
.cbox-element-wysiwyg.light-gradient-text-right .element-wysiwyg,
.cbox-element-wysiwyg.dark-gradient-text-left .element-wysiwyg,
.cbox-element-wysiwyg.dark-gradient-text-right .element-wysiwyg {
    display: flex;
    flex-direction: column;
}

.element-wysiwyg .text-container {
    order: 1;
}

.element-wysiwyg .media-container {
    order: 2;
}

.cbox-element-wysiwyg.light-text-right:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.dark-text-right:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.purple-text-right:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.light-gradient-text-right:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.dark-gradient-text-right:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.light-text-left:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.dark-text-left:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.purple-text-left:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.light-gradient-text-left:not(.fullwidth) .element-wysiwyg .media-container,
.cbox-element-wysiwyg.dark-gradient-text-left:not(.fullwidth) .element-wysiwyg .media-container {
    border-radius: 15px;
    overflow: hidden;
}

@media all and (min-width: 850px) {

    .cbox-element-wysiwyg.light-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.light-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.dark-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.dark-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.purple-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.purple-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.light-gradient-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.light-gradient-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.dark-gradient-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.dark-gradient-text-right .element-wysiwyg {
        flex-direction: row;
        align-items: center;
        min-height: 400px;
    }

    .element-wysiwyg .text-container,
    .element-wysiwyg .media-container {
        flex:0 0 50%;
    }

    .cbox-element-wysiwyg.light-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.dark-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.purple-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.light-gradient-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.dark-gradient-text-right .element-wysiwyg .text-container {
        padding: 0px 0px 0px 50px;
    }

    .cbox-element-wysiwyg.light-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.dark-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.purple-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.light-gradient-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.dark-gradient-text-left .element-wysiwyg .text-container {
        padding: 0px 50px 0px 0px;
    }


    /*vrstni red pri text-right//*/

    .cbox-element-wysiwyg.light-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.dark-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.purple-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.light-gradient-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.dark-gradient-text-right .element-wysiwyg .text-container {
        order: 2;
    }

    .cbox-element-wysiwyg.light-text-right .element-wysiwyg .media-container,
    .cbox-element-wysiwyg.dark-text-right .element-wysiwyg .media-container,
    .cbox-element-wysiwyg.purple-text-right .element-wysiwyg .media-container,
    .cbox-element-wysiwyg.light-gradient-text-right .element-wysiwyg .media-container,
    .cbox-element-wysiwyg.dark-gradient-text-right .element-wysiwyg .media-container {
        order: 1;
    }

}


@media all and (min-width: 1200px) {

    .cbox-element-wysiwyg.light-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.light-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.dark-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.dark-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.purple-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.purple-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.light-gradient-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.light-gradient-text-right .element-wysiwyg,
    .cbox-element-wysiwyg.dark-gradient-text-left .element-wysiwyg,
    .cbox-element-wysiwyg.dark-gradient-text-right .element-wysiwyg {
        min-height: 500px;
    }

}

/*FULLWIDTH //*/

/*when fullwidth, no padding on .cbox, instead padding on text-container /*/

.cbox-element-wysiwyg.fullwidth {
    padding: 0px;
}

.cbox-element-wysiwyg.fullwidth .text-container {
    padding: 20px 20px;
}


/*breakpoint 2-columns */

@media all and (min-width: 850px) {

    .cbox-element-wysiwyg.fullwidth {
        position: relative;
    }

    .cbox-element-wysiwyg.fullwidth .element-wysiwyg {
        min-height: 600px;
    }

    .cbox-element-wysiwyg.fullwidth .media-container {
        position: absolute;
        width: 50%;
        top: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 1;
    }

    .cbox-element-wysiwyg.fullwidth .media-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*text-left*/

    .cbox-element-wysiwyg.fullwidth.light-text-left .media-container,
    .cbox-element-wysiwyg.fullwidth.dark-text-left .media-container,
    .cbox-element-wysiwyg.fullwidth.purple-text-left .media-container,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-left .media-container,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-left .media-container {
        left: 50%;
        right: 0;
    }

    .cbox-element-wysiwyg.fullwidth.light-text-left .media-container img,
    .cbox-element-wysiwyg.fullwidth.dark-text-left .media-container img,
    .cbox-element-wysiwyg.fullwidth.purple-text-left .media-container img,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-left .media-container img,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-left .media-container img {
        object-position: left center;
    }

    /*text-right*/

    .cbox-element-wysiwyg.fullwidth.light-text-right .media-container,
    .cbox-element-wysiwyg.fullwidth.dark-text-right .media-container,
    .cbox-element-wysiwyg.fullwidth.purple-text-right .media-container,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-right .media-container,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-right .media-container {
        left: 0;
        right: 50%;
    }

    .cbox-element-wysiwyg.fullwidth.light-text-right .media-container img,
    .cbox-element-wysiwyg.fullwidth.dark-text-right .media-container img,
    .cbox-element-wysiwyg.fullwidth.purple-text-right .media-container img,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-right .media-container img,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-right .media-container img {
        object-position: right center;
    }

    .cbox-element-wysiwyg.fullwidth.light-text-right .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-text-right .text-container,
    .cbox-element-wysiwyg.fullwidth.purple-text-right .text-container,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-right .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-right .text-container {
        margin-left: 50%;
    }

}

@media all and (min-width: 1200px) {
    .cbox-element-wysiwyg.fullwidth .element-wysiwyg {
        min-height: 800px;
    }
}


/* inner */

@media all and (min-width: 600px) {
    .cbox-element-wysiwyg.fullwidth .element-row {
        width: 100%;
    }
    .cbox-element-wysiwyg.fullwidth .text-container {
        padding: 20px 10%;
    }
}

@media all and (min-width: 850px) {
    .cbox-element-wysiwyg.fullwidth .element-row {
        width: 80%;
    }

    .cbox-element-wysiwyg.fullwidth.light-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.purple-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-right .element-wysiwyg .text-container {
        padding: 30px 0px 30px 50px;
    }

    .cbox-element-wysiwyg.fullwidth.light-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.purple-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-left .element-wysiwyg .text-container {
        padding: 30px 50px 30px 0px;
    }
}

@media all and (min-width: 1500px) {
    .cbox-element-wysiwyg.fullwidth .element-row {
        width: 1200px;
    }
}

@media all and (min-width: 1900px) {
    .cbox-element-wysiwyg.fullwidth .element-row {
        width: 1400px;
    }
}


@media all and (min-width: 1200px) {

    .cbox-element-wysiwyg.fullwidth.light-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.purple-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-right .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-right .element-wysiwyg .text-container {
        padding: 50px 0px 50px 50px;
    }

    .cbox-element-wysiwyg.fullwidth.light-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.purple-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.light-gradient-text-left .element-wysiwyg .text-container,
    .cbox-element-wysiwyg.fullwidth.dark-gradient-text-left .element-wysiwyg .text-container {
        padding: 50px 50px 50px 0px;
    }
}





/* TEXTBOX WITH BUTTONS RIGHT ///////

dark-buttons-right
light-buttons-right
purple-buttons-right

*/

.cbox-element-wysiwyg.dark-buttons-right .element-wysiwyg,
.cbox-element-wysiwyg.light-buttons-right .element-wysiwyg,
.cbox-element-wysiwyg.purple-buttons-right .element-wysiwyg {
    display: flex;
    flex-direction: column;
    gap: 0px;
}


@media all and (min-width: 850px) {

    .cbox-element-wysiwyg.dark-buttons-right .element-wysiwyg,
    .cbox-element-wysiwyg.light-buttons-right .element-wysiwyg,
    .cbox-element-wysiwyg.purple-buttons-right .element-wysiwyg {
        flex-direction: row;
        align-items: center;
        gap: 30px;
    }

    .cbox-element-wysiwyg .element-wysiwyg .wysiwyg-left {
        flex: 0 1 50%;
    }

    .cbox-element-wysiwyg .element-wysiwyg .wysiwyg-right {
        flex: 1 0 50%;
    }

    .cbox-element-wysiwyg .element-wysiwyg .wysiwyg-right {
        text-align: right;
    }


}

.animated .cbox-element-wysiwyg {
    overflow: hidden;
}


.animated .cbox-element-wysiwyg .text-container > *,
.animated .cbox-element-wysiwyg .media-container > * {
    opacity: 0;
}


.animated .cbox-element-wysiwyg.light-text-left .text-container > *,
.animated .cbox-element-wysiwyg.dark-text-left .text-container > *,
.animated .cbox-element-wysiwyg.purple-text-left .text-container > *,
.animated .cbox-element-wysiwyg.dark-gradient-text-left .text-container > *,

.animated .cbox-element-wysiwyg.dark-buttons-right .text-container > *,
.animated .cbox-element-wysiwyg.light-buttons-right .text-container > *,
.animated .cbox-element-wysiwyg.purple-buttons-right .text-container > * {
    transform: translateX(-50px);
}

.animated .cbox-element-wysiwyg.light-text-left .media-container > *,
.animated .cbox-element-wysiwyg.dark-text-left .media-container > *,
.animated .cbox-element-wysiwyg.purple-text-left .media-container > *,
.animated .cbox-element-wysiwyg.dark-gradient-text-left .media-container > * {
    transform: translateX(50px);
}


.animated .cbox-element-wysiwyg.light-text-right .text-container > *,
.animated .cbox-element-wysiwyg.dark-text-right .text-container > *,
.animated .cbox-element-wysiwyg.purple-text-right .text-container > *,
.animated .cbox-element-wysiwyg.dark-gradient-text-right .text-container > * {
    transform: translateX(50px);
}

.animated .cbox-element-wysiwyg.light-text-right .media-container > *,
.animated .cbox-element-wysiwyg.dark-text-right .media-container > *,
.animated .cbox-element-wysiwyg.purple-text-right .media-container > *,
.animated .cbox-element-wysiwyg.dark-gradient-text-right .media-container > * {
    transform: translateX(-50px);
}


.animated .cbox-element-wysiwyg.dark .text-container > *,
.animated .cbox-element-wysiwyg.light .text-container > *,
.animated .cbox-element-wysiwyg.purple .text-container > *,
.animated .cbox-element-wysiwyg.dark-gradient .text-container > *,
.animated .cbox-element-wysiwyg.dark-center .text-container > *,
.animated .cbox-element-wysiwyg.light-center .text-container > *,
.animated .cbox-element-wysiwyg.purple-center .text-container > *,
.animated .cbox-element-wysiwyg.dark-gradient-center .text-container > * {
    transform: translateY(50px);
}

.animated .cbox-element-wysiwyg.in-view .text-container > * {
    animation: wysiwygFlyIn 1s ease-out forwards;
    animation-delay: 1s;
}
.animated .cbox-element-wysiwyg.in-view .media-container > * {
    animation: wysiwygFlyIn 1s ease-out forwards;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(1) {
    animation-delay: 0ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(2) {
    animation-delay: 100ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(3) {
    animation-delay: 200ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(4) {
    animation-delay: 300ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(5) {
    animation-delay: 400ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(6) {
    animation-delay: 500ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(7) {
    animation-delay: 600ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(8) {
    animation-delay: 700ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(9) {
    animation-delay: 800ms;
}
.animated .cbox-element-wysiwyg.in-view .text-container > *:nth-child(10) {
    animation-delay: 900ms;
}

@keyframes wysiwygFlyIn {
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}