.container, .frame-container {
    width: calc( 100% - 40px );
    padding: 20px;
    max-width: 1340px;
    margin: 0 auto;

    margin-bottom: 40px;
  }

.octoplant-navigation {
    position: relative;
    margin: 40px 0 75px
}

.octoplant-navigation img,
.octoplant-navigation svg {
    width: 100%;
    height: auto
}

.octoplant-navigation__logo {
    width: 100%;
    max-width: 345px;
    height: auto
}

.octoplant-navigation__logo-anchor {
    display: block
}

.octoplant-navigation__logo-anchor:hover {
    transform: scale(1.01)
}

.octoplant-navigation__logo-anchor:active {
    margin-top: 1px
}

.octoplant-limb {
    display: block;
    text-decoration: none;
    color: #094679;
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-timing-function: ease-in-out;
    transition-duration: .2s;
    font-size: 16px
}

.octoplant-limb:hover {
    /* cursor: pointer; */
    text-decoration: none
}

.octoplant-limb:hover .octoplant-limb__limb {
    color: #e25f10
}

.octoplant-limb:hover .octoplant-limb__dot {
    background: #e25f10;
    transform: scale(1.15)
}

.octoplant-limb:hover .octoplant-limb__subtitle,
.octoplant-limb:hover .octoplant-limb__title {
    color: #e25f10
}

.octoplant-navigation--has-active-item .octoplant-limb {
    opacity: .3
}

.octoplant-navigation--has-active-item .octoplant-limb--is-selected {
    opacity: 1 !important;
    pointer-events: none !important
}

/* .octoplant-navigation--has-active-item .octoplant-limb--is-selected .octoplant-limb__limb {
    color: #094679
} */

.octoplant-navigation--has-active-item .octoplant-limb--is-selected .octoplant-limb__dot {
    background: #094679;
    transform: scale(1.25)
}

.octoplant-limb__icon {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    color: #094679;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}


.octoplant-navigation--has-active-item .octoplant-limb--is-selected .octoplant-limb__icon {
    color: #e25f10;
}

.octoplant-limb__title-label {
    font-size: 1.2em;
    line-height: 1em;
    font-weight: 800
}

.octoplant-limb__limb {
    width: 100%;
    color: #094679;
    display: none
}

.octoplant-limb__subtitle {
    font-size: 18px;
    line-height: 20px
}

.octoplant-limb__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #094679;
    position: absolute;
    will-change: transform;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: .2s
}

.octoplant-navigation--in-use .octoplant-limb {
    opacity: .33
}

.octoplant-navigation--in-use .octoplant-limb--hovered {
    opacity: 1
}

@media (min-width:0) and (max-width:374px) {
    .octoplant-navigation__logo {
        max-width: 250px
    }
}

@media (min-width:0) and (max-width:767px) {
    .octoplant-limb {
        padding: 20px 0 20px 60px;
        border-bottom: 1px solid #094679;
        position: relative
    }

    .octoplant-limb__dot {
        right: -7px;
        bottom: -7px
    }
}

@media (min-width:768px) {
    .octoplant-navigation {
        height: 630px
    }

    .octoplant-navigation__logo {
        position: absolute;
        z-index: 1;
        top: 47%;
        left: 50%;
        transform: translateX(-50%)
    }

    .octoplant-navigation__limb {
        position: absolute;
        z-index: 1
    }

    .octoplant-navigation__limb--01 {
        left: 0;
        top: 30%;
        width: 40%;
        z-index: 3
    }

    .octoplant-navigation__limb--02 {
        left: 20%;
        top: 11%;
        width: 25%;
        z-index: 2
    }

    .octoplant-navigation__limb--03 {
        right: 20%;
        top: 11%;
        width: 25%;
        z-index: 2
    }

    .octoplant-navigation__limb--04 {
        right: 0;
        top: 30%;
        width: 40%;
        z-index: 3
    }

    .octoplant-navigation__limb--05 {
        right: 0;
        top: 67%;
        width: 40%;
        z-index: 3
    }

    .octoplant-navigation__limb--06 {
        right: 20%;
        top: 61%;
        width: 25%;
        z-index: 2
    }

    .octoplant-navigation__limb--07 {
        left: 20%;
        top: 61%;
        width: 25%;
        z-index: 2
    }

    .octoplant-navigation__limb--08 {
        left: 0;
        top: 67%;
        width: 40%;
        z-index: 3
    }

    .octoplant-limb:hover {
        transform: scale(1.05)
    }

    .octoplant-limb:active {
        margin-top: 1px
    }

    .octoplant-limb__title {
        position: absolute;
        max-width: 150px
    }

    .octoplant-limb__icon {
        display: none
    }

    .octoplant-limb__limb {
        display: block
    }

    .octoplant-limb__subtitle {
        position: absolute;
        max-width: 150px
    }

    .octoplant-limb--01,
    .octoplant-limb--02 {
        transform-origin: bottom right
    }

    .octoplant-limb--01 .octoplant-limb__subtitle,
    .octoplant-limb--01 .octoplant-limb__title,
    .octoplant-limb--02 .octoplant-limb__subtitle,
    .octoplant-limb--02 .octoplant-limb__title {
        left: 0;
        text-align: left
    }

    .octoplant-limb--01 .octoplant-limb__dot,
    .octoplant-limb--02 .octoplant-limb__dot {
        right: -5px;
        bottom: -5px
    }

    .octoplant-limb--03,
    .octoplant-limb--04 {
        transform-origin: bottom left
    }

    .octoplant-limb--03 .octoplant-limb__subtitle,
    .octoplant-limb--03 .octoplant-limb__title,
    .octoplant-limb--04 .octoplant-limb__subtitle,
    .octoplant-limb--04 .octoplant-limb__title {
        right: 0;
        text-align: right
    }

    .octoplant-limb--03 .octoplant-limb__dot,
    .octoplant-limb--04 .octoplant-limb__dot {
        left: -5px;
        bottom: -5px
    }

    .octoplant-limb--05,
    .octoplant-limb--06 {
        transform-origin: top left
    }

    .octoplant-limb--05 .octoplant-limb__subtitle,
    .octoplant-limb--05 .octoplant-limb__title,
    .octoplant-limb--06 .octoplant-limb__subtitle,
    .octoplant-limb--06 .octoplant-limb__title {
        right: 0;
        text-align: right
    }

    .octoplant-limb--05 .octoplant-limb__dot,
    .octoplant-limb--06 .octoplant-limb__dot {
        left: -5px;
        top: -5px
    }

    .octoplant-limb--07,
    .octoplant-limb--08 {
        transform-origin: top right
    }

    .octoplant-limb--07 .octoplant-limb__subtitle,
    .octoplant-limb--07 .octoplant-limb__title,
    .octoplant-limb--08 .octoplant-limb__subtitle,
    .octoplant-limb--08 .octoplant-limb__title {
        left: 0;
        text-align: left
    }

    .octoplant-limb--07 .octoplant-limb__dot,
    .octoplant-limb--08 .octoplant-limb__dot {
        right: -5px;
        top: -5px
    }

    .octoplant-limb--02 .octoplant-limb__dot {
        right: -6px
    }

    .octoplant-limb--03 .octoplant-limb__dot,
    .octoplant-limb--06 .octoplant-limb__dot {
        left: -6px
    }

    .octoplant-limb--07 .octoplant-limb__dot {
        right: -6px
    }

    .octoplant-limb--05 .octoplant-limb__title,
    .octoplant-limb--08 .octoplant-limb__title {
        width: 100%;
        padding-top: 20px
    }

    .octoplant-limb--01 .octoplant-limb__title,
    .octoplant-limb--02 .octoplant-limb__title,
    .octoplant-limb--03 .octoplant-limb__title,
    .octoplant-limb--04 .octoplant-limb__title {
        bottom: 100%;
        padding-bottom: 10px
    }

    .octoplant-limb--01 .octoplant-limb__subtitle,
    .octoplant-limb--02 .octoplant-limb__subtitle,
    .octoplant-limb--03 .octoplant-limb__subtitle,
    .octoplant-limb--04 .octoplant-limb__subtitle {
        top: 10px
    }

    .octoplant-limb--05 .octoplant-limb__title,
    .octoplant-limb--06 .octoplant-limb__title,
    .octoplant-limb--07 .octoplant-limb__title,
    .octoplant-limb--08 .octoplant-limb__title {
        bottom: 10px
    }

    .octoplant-limb--05 .octoplant-limb__subtitle,
    .octoplant-limb--06 .octoplant-limb__subtitle,
    .octoplant-limb--07 .octoplant-limb__subtitle,
    .octoplant-limb--08 .octoplant-limb__subtitle {
        top: 100%;
        padding-top: 10px
    }
}

@media (min-width:768px) and (max-width:991px) {

    .octoplant-navigation__limb--06,
    .octoplant-navigation__limb--07 {
        top: 75%
    }
}

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

    .octoplant-limb--01 .octoplant-limb__title,
    .octoplant-limb--02 .octoplant-limb__title,
    .octoplant-limb--03 .octoplant-limb__title,
    .octoplant-limb--04 .octoplant-limb__title {
        padding-bottom: 20px
    }

    .octoplant-limb--01 .octoplant-limb__subtitle,
    .octoplant-limb--02 .octoplant-limb__subtitle,
    .octoplant-limb--03 .octoplant-limb__subtitle,
    .octoplant-limb--04 .octoplant-limb__subtitle {
        top: 20px
    }

    .octoplant-limb--05 .octoplant-limb__title,
    .octoplant-limb--06 .octoplant-limb__title,
    .octoplant-limb--07 .octoplant-limb__title,
    .octoplant-limb--08 .octoplant-limb__title {
        bottom: 20px
    }

    .octoplant-limb--05 .octoplant-limb__subtitle,
    .octoplant-limb--06 .octoplant-limb__subtitle,
    .octoplant-limb--07 .octoplant-limb__subtitle,
    .octoplant-limb--08 .octoplant-limb__subtitle {
        padding-top: 20px
    }
}

@media (min-width:1200px) {
    .octoplant-limb {
        font-size: 20px
    }

    .octoplant-limb__title {
        max-width: 200px
    }

    .octoplant-limb__subtitle {
        max-width: 205px
    }
}

@media (min-width:1500px) {
    .octoplant-navigation {
        margin: 75px 75px 125px
    }
}