.mindmap {
    position: relative;

    @media (min-width: 540px) and (max-width: 767.98px) {
        &::before,
        &::after {
            content: " ";
            display: table;
        }
        &::after {
            clear: both;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        &::before,
        &::after {
            content: " ";
            display: table;
        }
        &::after {
            clear: both;
        }
    }

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

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

    .center {
        background-image: url(../../../Images/logo-grayscale.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        text-transform: uppercase;
        color: var(--abc-red);
        display: none;

        @media (min-width: 992px) {
            display: block;
            position: absolute;
            z-index: 5;
            height: 200px;
            width: 200px;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
        }

        h3 {
            text-align: center;
            line-height: 120%;
            padding-top: 40px;
            padding-bottom: 40px;

            @media (min-width: 992px) {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                right: 0;
                padding: 0;
            }
        }
    }

    .element {

        .icon {
            margin-bottom: 20px;
            text-align: center;
        }

        h3 {
            font-size: 1.5rem;
            margin-bottom: 0.625rem;
            color: var(--abc-red);
            font-family: DaxWeb;
        }

        &:hover {
            z-index: 10;
        }

        a, .a {
            display: block;
            padding: 20px;
            background-color: #fff;
            transform-origin: center center;
            transition: transform 500ms;
            text-align: center;

            &:hover {
                text-decoration: none;
                box-shadow: 0 0 10px 0 rgba(206, 211, 218, 1);
                transform: scale(1.05);
            }

            .teaser {
                color: var(--abc-font-color);
                font-size: 1.0625rem;
            }
        }

        a:hover {
            &::after {
                content: "";
                display: block;
                position: absolute;
                top: 20px;
                right: 20px;
                width: 44px;
                height: 44px;
                background-image: url(../../../Images/info-icon.svg);
            }
        }

        @media (min-width: 540px) and (max-width: 767.98px) {
            float: left;
            width: 50%;

            &:nth-child(even) {
                clear: both;
            }
        }

        @media (min-width: 768px) and (max-width: 991.98px) {
            float: left;
            width: 50%;

            &:nth-child(even) {
                clear: both;
            }
        }

        @media (min-width: 992px) {
            position: absolute;
            width: 375px;
            text-align: center;
        }

        @media (min-width: 992px) and (max-width: 1329.98px) {
            &.topleft,
            &.topright {
                top: 220px;
            }

            &.bottomleft,
            &.bottomright {
                top: 490px;
            }

            &.topleft,
            &.bottomleft {
                left: 0;
            }

            &.topright,
            &.bottomright {
                right: 0;
            }

            &.topcenter {
                top: 0;
            }

            &.bottomcenter {
                top: 735px;
            }

            &.topcenter,
            &.bottomcenter {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        @media (min-width: 1330px) {
            &.topleft,
            &.topright {
                top: 110px;
            }

            &.bottomleft,
            &.bottomright {
                top: 445px;
            }

            &.topleft,
            &.bottomleft {
                left: 55px;
            }

            &.topright,
            &.bottomright {
                right: 55px;
            }

            &.topcenter {
                top: 0;
            }

            &.bottomcenter {
                top: 525px;
            }

            &.topcenter,
            &.bottomcenter {
                left: 427px;
            }
        }
    }

    .mindmap-content {
        display: none;
    }
}

.mindmap-popup {
    padding: 20px;

    @media (min-width: 992px) {
        padding: 80px;
    }

    max-width: 600px;
    margin: 20px auto;
    background-color: #fff;
    position: relative;

    .icon {
        text-align: center;
        margin-bottom: 30px;
    }

    h3 {
        text-align: center;
    }
}