.iti-product-features {
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: "Apercu Pro Regular", Arial, Helvetica, sans-serif;

    .header {
        .headline {
            h2 {
                color: #2d1e73;
                font-size: 48px;
                letter-spacing: -2px;
                line-height: 1;
                text-align: left;
                margin-bottom: 1rem;
            }
        }

        .copy {
            font-size: 22px;
            letter-spacing: -.8px;
            line-height: 1.36;
        }
    }

    .feature {
        order: 2;
        display: none;
        width: 66%;
        position: relative;

        .bg-block {
            top: -50px;
            width: 76%;
            height: calc(100% + 75px);
            background-color: #f4f4f4;
            position: absolute;
            margin-left: 12%;
        }

        .asset {
            .et_pb_image_wrap {
                width: 100%;

                img {
                    width: 100%;
                }
            }
        }

        .tooltip {
            position: absolute;
            z-index: 10;
            color: white;
            font-size: 20px;
            line-height: 1.2;
            padding: 1.56rem 1rem 2rem;
            opacity: 0.4;
            transition: opacity linear .45s;

            &:not(.open) {
                width: 56px;
                height: 56px;

                .et_pb_text_inner {
                    display: none;
                }
            }

            &.open {
                width: 14rem;
                opacity: 1;
                &::after {
                    content: '-';
                }
            }

            &::after {
                content: '+';
                position: absolute;
                bottom: 0px;
                left: 0px;
                height: 56px;
                width: 56px;
                cursor: pointer;
                font-size: 45px;
                text-align: center;
            }
        }
    }

    .active-feature, .feature-switcher {
        display: block;
    }

    /* Prevent feature switch from continuing to move up after breakpoint */
    @media (min-width: 1440px) {
        .feature-switcher {
            margin-top: -500px !important;
        }
    }

    /** Desktop Interface **/
    @media (min-width:1065px) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: start;
        max-width: 1440px !important;
        margin: auto;
        padding-left: calc(20 * 1px + (60 - 20)/ (1440 - 375) * (100vw - 375 * 1px)) !important;
        padding-right: calc(20 * 1px + (60 - 20)/ (1440 - 375) * (100vw - 375 * 1px)) !important;

        .et_pb_row {
            margin: initial;
        }

        .header {
            order: 1;
            align-self: start;
            width: 33%;
        }

        .feature-switcher {
            order: 3;
            width: 33%;
            margin-top: calc(0px - ((100vw * 0.7) - 500px));

            .switcher {
                color: black;
                cursor: pointer;
                padding: 1.5625rem;
                touch-action: manipulation;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
                font-size: 20px;
                line-height: 1.2;
                max-width: 318px;
                height: 6.875rem;

                &.active {
                    color: white;
                    box-shadow: 0 14px 8px -10px rgba(74,90,100,.35);
                    transition: background-color .4s ease-in-out;
                }
                &:not(.active) {
                    background-color: transparent;
                    color: rgb(68, 86, 102);
                    border-bottom: 1px solid #d5dade;
                }
            }
        }

        .feature {
            .tooltip {
                &.top {
                    bottom: calc(100% - (56px + 90px));
                    right: 6.875rem;
                }

                &.left {
                    left: 6.875rem;
                    top: 10.375rem;
                }

                &.bottom {
                    bottom: 9rem;
                    left: 15.625rem;
                }

                &.right {
                    right: 7rem;
                    top: 45%;
                }
            }
        }

        .active-feature, .feature-switcher {
            display: block;
        }
    }

    /** Mobile Interface **/
    @media (max-width: 1064px) {
        background-color: #f4f4f4;

        .header {
            max-width: 290px;
            
            .headline h2 {
                font-size: calc(28 * 1px + (48 - 28)/ (1440 - 375) * (100vw - 375 * 1px));
                margin-bottom: 0.8rem;
            }

            .copy {
                font-size: 1rem;
                text-align: center;
                color: rgb(68, 86, 102);
            }
        }

        .feature {
            width: 90%;

            .tooltip {
                font-size: 18px;

                .open {
                    padding: 1.56rem 1rem 2rem;
                }

                &:not(.open) {
                    width: 41px;
                    height: 41px;
                    padding: 0rem;
                }

                &::after {
                    height: 41px;
                    width: 41px;
                    font-size: 30px;
                    text-align: center;
                }

                &.top {
                    left: 15%;
                    top: 5%;
                }

                &.left {
                    left: 5%;
                    bottom: 20%;
                }

                &.bottom {
                    bottom: 5%;
                    right: 15%;
                }

                &.right {
                    right: 5%;
                    top: 15%;
                }
            }
        }

        .feature-switcher {
            order: 3;
            width: 90%;
            padding-top: 0px;

            .switcher {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: start;
                justify-content: space-between;

                background-color: transparent;
                color: rgb(0, 120, 240);
                touch-action: manipulation;
                font-size: 20px;
                line-height: 1.2;
                text-align: center;

                &.active {
                    display: flex;
                }
    
                &:not(.active) {
                    display: none;
                }

                &::after {
                    content: '>';
                    width: 13px;
                    font-size: 40px;
                    color: #d5d5d5;
                    padding-left: 15px;
                }
    
                &::before {
                    content: '<';
                    width: 13px;
                    font-size: 40px;
                    color: #d5d5d5;
                    padding-right: 15px;
                }
            }
        }
    }
}