.product-chooser {
    position: relative;

    @media (max-width: 1329.98px) {
        margin-bottom: 30px;
    }

    @media (min-width: 1330px) {
        height: 600px;
    }

    .mobile-detector {
        @media (min-width: 768px) {
            display: none;
        }
    }

    .navigation {
        box-shadow: 0 0 10px 0 #ced4da;
        background-color: #fff;
        position: relative;
        z-index: 3;
        padding-bottom: 30px;

        @media (min-width: 1330px) {
            max-width: 400px;
            height: 600px;
            padding-bottom: 10px;
        }
    }

    .navigation-header {
        padding: 20px 30px;

        h3 {
            font-size: 1.5rem;
            margin-bottom: 0;

            @media (min-width: 1330px) {
                font-size: 1.875rem;
            }
        }
    }

    .navigation-item {
        padding: 20px 30px;
        margin-top: 20px;
        opacity: 0.40;
        cursor: pointer;
        position: relative;

        background-color: #232323;
        color: #fff;

        h4 {
            font-size: 1.25rem;
            margin-bottom: 0.625rem;
            color: #fff;

            @media (min-width: 1330px) {
                font-size: 1.625rem;
            }
        }

        @media (max-width: 1329.98px) {
            &:after {
                content: "";
                position: absolute;
                display: block;
                background-image: url(../../../Icons/btn-large-white.svg);
                background-position: 50% 50%;
                background-repeat: no-repeat;
                width: 40px;
                height: 40px;
                top: 50%;
                right: 10px;
                margin-top: -20px;
                transform-origin: center center;
                transform: rotate(90deg);
            }
        }

        &:hover {
            background-color: var(--abc-red);
            color: #fff;

            h4 {
                color: #fff;
            }
        }

        &.active {
            background-color: var(--abc-red);
            color: #fff;
            cursor: default;
            opacity: 1;

            h4 {
                color: #fff;
            }

            &:after {
                transform: rotate(-90deg);
            }
        }

        /* remove margin for first item in list */
        &:first-child {
            margin-top: 0;
        }

        p:last-child {
            margin-bottom: 0;
        }
    }

    .content-mobile {
        @media (min-width: 768px) and (max-width: 991.98px) {
            display: flex;
        }

        @media (min-width: 992px) and (max-width: 1329.98px) {
            display: flex;
        }

        @media (min-width: 1330px) {
            display: none !important;
        }
    }

    .content-mobile-image {
        @media (min-width: 768px) and (max-width: 991.98px) {
            flex: 50%;
        }
        @media (min-width: 992px) and (max-width: 1329.98px) {
            flex: 50%;
        }
    }

    .content-mobile-text {
        padding: 20px 30px 1px 30px;

        @media (min-width: 768px) and (max-width: 991.98px) {
            flex: 50%;
        }
        @media (min-width: 992px) and (max-width: 1329.98px) {
            flex: 50%;
        }

        img {
            display: block;
            margin: 0 auto;
            max-width: 200px;
            height: auto;

            @media (min-width: 768px) and (max-width: 991.98px) {
                position: relative;
                margin: -120px 0 0 auto;
                max-width: 120px;
            }

            @media (min-width: 992px) and (max-width: 1329.98px) {
                position: relative;
                margin: -150px 0 0 auto;
                max-width: 160px;
            }
        }

        h4 {
            color: var(--abc-red);
        }
    }

    .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        @media (max-width: 1329.98px) {
            display: none;
        }
    }

    .content-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 600px;
        background-repeat: no-repeat;
        background-position: top right;
        background-size: auto 600px;
        opacity: 0;
        transition: opacity 400ms linear;

        &.show {
            opacity: 1;
            z-index: 1;
        }

        &.no-bgimage {
            background-color: var(--abc-light-gray);
        }

        &.has-bgimage:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to right, rgba(245, 245, 245, 1) 60%, rgba(245, 245, 245, 0) 70%);
        }
    }

    .content-text {
        /* width of navigation + 30px padding */
        margin-left: 430px;
        margin-right: 35%;
        padding-top: 3.75rem;
        position: relative;
        z-index: 2;

        h4 {
            color: var(--abc-red);
        }
    }

    .content-image {
        position: absolute;
        top: 190px;
        height: 420px;
        left: 54%;
        z-index: 2;

        img {
            max-height: 100%;
            width: auto;
        }

        @media (min-width: 1600px) {
            position: absolute;
            height: 682px;
            top: -35px;
            left: 58%;
        }
    }
}