body {
    background-color: #F5EEE9;
    color: #413d3d;
    font-family: 'Nunito';
    font-weight: 800;
    font-size: 12pt;
}

h1 {
    font-family: 'Anton';
    font-size: 72pt;
    font-weight: normal;
    margin-bottom: 0;
}

h2 {
    margin-top: -15px;
    font-size: 12pt;
    font-weight: 400;
    text-align: end;
    margin-bottom: 0;
}

.roadmap-marker {
    position: absolute;
    transform: translateX(-100%);
    border-bottom: 1px solid #413d3d;
    padding-right: 60px;
    left: 356px;
    top: 575px;
    font-weight: 800;
    font-size: 10pt;
    color: #413d3d;
    font-family: 'Nunito';
}

.roadmap-marker::after {
    content: url('/img/roadmap/marker.png');
    position: absolute;
    bottom: -10px;
    left: 0;
}

.headers {
    display: inline-block;
}

.feature-area a {
    text-decoration: none;
    color: unset;
}

.feature-area a:hover {
    text-decoration: none;
    color: unset;
}

#main-part-1 {
    position: relative;
    padding-top: 72px;
    min-height: calc(100% - 74px);
    overflow-y: hidden;
}

.vertical-line-position {
    width: 1420px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    position: absolute;
}

.vertical-line {
    width: 1px;
    position: absolute;
    top: -72px;
    left: 355px;
    background-color: #413d3d;
    height: 100%; 
}

.main-part-1-content {
    padding-top: 66px;
    width: 1420px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.main-part-1-content .main-header {
    margin-left: 356px;
    margin-bottom: 200px;
}

.feature-area {
    margin-left: 380px;
    border-style: solid;
    border-width: 1px;
    width: 945px;
    max-width: calc(100% - 10px);
    margin-bottom: 46px;
    padding: 20px;
}

@media only screen and (max-width: 1420px) {
    .feature-area {
        margin-left: 5px;
        margin-right: 5px;
    }

    .main-part-1-content .main-header {
        margin-left: 5px;
        margin-right: 5px;
        max-width: calc(100%-10px);
        margin-bottom: 75px;
    }

    .vertical-line {
        display: none;
    }

    .roadmap-marker {
        position: relative;
        padding-left: 10px;
        top: 0;
        left: 0;
        transform: translateX(0);
        width: 100%;
        max-width: 220px;
        margin-top: 50px;
        margin-bottom: -50px;
        margin-left: -5px;
        padding-right: 5px;
    }

    .roadmap-marker::after {
        left: unset;
        right: 0;
    }
}

@media only screen and (max-width: 478px) {
    h1 {
        font-size: 42pt;
    }

    h2 {
        margin-top: -12px;
    }
}

.feature-area.base-game {
    border-color: #58E3B8;
    color: #58E3B8;
}

span.base-game {
    color: #58E3B8;
}

.feature-area.roadpoint-1 {
    border-color: #E3A358;
    color: #E3A358;
}

.feature-area .header {
    border-style: solid;
    border-width: 1px;
    padding-left: 39px;
    margin-top: -1px;
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: -1px;
    padding-top: 9px;
    padding-bottom: -4px;
}

.feature-area .item-1-header {
    color: #413d3d;
    font-weight: 900;
    font-size: 20pt;
    height: 39px;
    width: 240px;
    padding-left: 44px;
    position: relative;
}

.feature-area .item-1-header-link.active {
    color: white;
}

.feature-area .item-1 {
    margin-top: 13px;
    margin-bottom: 28px;
}

.feature-area .item-1:last-of-type {
    margin-bottom: 22px;
}

.feature-area.base-game .item-1-header {
    background-color: #58E3B8;
}

.feature-area.roadpoint-1 .item-1-header {
    background-color: #E3A358;
}

.feature-area .item-1-header-link::after {
    position: absolute;
    right: -35px;
    width: 35px;
    height: 39px;
}

.feature-area.base-game .item-1-header-link::after {
    content: url('/img/roadmap/arrow_collapsed.png');
}

.feature-area.base-game .item-1-header-link.active::after {
    content: url('/img/roadmap/arrow_uncollapsed.png')
}

.feature-area.roadpoint-1 .item-1-header-link::after {
    content: url('/img/roadmap/arrow_collapsed_o.png');
}

.feature-area.roadpoint-1 .item-1-header-link.active::after {
    content: url('/img/roadmap/arrow_uncollapsed_o.png')
}

.feature-area .item-2-list {
    color: #413d3d;
    position: relative;
}

.feature-area .item-2 {
    padding-top: 5px;
    position: relative;
}

.feature-area .item-2-header {
    font-size: 14pt;
    margin-left: 111px;
    position: relative;
}

.feature-area .item-2-list .item-2-line {
    position: absolute;
    height: 100%;
    width: 1px;
    left: 39px;
}

.feature-area.base-game .item-2-list .item-2-line {
    background-color: #58E3B8;
}

.feature-area.roadpoint-1 .item-2-list .item-2-line {
    background-color: #E3A358;
}

.feature-area .item-2-header-link::before, .feature-area .item-3-header-link::before {
    position: absolute;
    left: -34px;
    top: 14px;
    transform: translateY(-50%);
}

.feature-area.base-game .item-2-header-link::before, .feature-area .item-3-header-link::before {
    content: url('/img/roadmap/tiny_arrows_green_circle.png');
}

.feature-area.roadpoint-1 .item-2-header-link::before, .feature-area .item-3-header-link::before {
    content: url('/img/roadmap/tiny_arrows_orange_circle.png');
}

.feature-area .item-3-header-link::before {
    top: 12px;
}

.feature-area.base-game .item-2-header-link.active::before, .feature-area .item-3-header-link.active::before {
    content: url('/img/roadmap/tiny_arrows_white_circle.png');
}

.feature-area.roadpoint-1 .item-2-header-link.active::before, .feature-area .item-3-header-link.active::before {
    content: url('/img/roadmap/tiny_arrows_white_orange_circle.png');
}

.feature-area .item-2-header-line {
    height: 1px;
    width: 46px;
    position: absolute;
    left: -72px;
    top: 14px;
}

.feature-area.base-game .item-2-header-line, .feature-area.base-game .item-3-header-line {
    background-color: #58E3B8;
}

.feature-area.roadpoint-1 .item-2-header-line, .feature-area.roadpoint-1 .item-3-header-line {
    background-color: #E3A358;
}

.feature-area .item-3-list {
    position: relative;
    margin-left: 90px;
}

.feature-area .item-3-line, .feature-area .item-4-line {
    position: absolute;
    height: 100%;
    width: 1px;
}

.feature-area .item-4-list {
    position: relative;
    margin-left: 17px;
    font-size: 10pt;
}

.feature-area .item-4-line {
    left: -32px;
}

.feature-area.base-game .item-3-list .item-3-line, .feature-area.base-game .item-4-line {
    background-color: #58E3B8;
}

.feature-area.roadpoint-1 .item-3-list .item-3-line, .feature-area.roadpoint-1 .item-4-line {
    background-color: #E3A358;
}

.feature-area .item-3 {
    margin-left: 49px;
    position: relative;
}
.feature-area .item-3-header {
    position: relative;
}

.feature-area .item-3-header-line {
    height: 1px;
    width: 24px;
    position: absolute;
    left: -48px;
    top: 12px;
}

.information-toggle {
    margin-left: 10px;
}

.information-icon {
    background-image: url("/img/roadmap/information_collapsed.png");
    background-repeat: no-repeat;
    width: 29px;
    height: 24px;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    vertical-align: top;
    /* transform: translateY(5px); */
}

@media only screen and (min-width: 881px) {
    .information-icon.active {
        background-image: url("/img/roadmap/information_uncollapsed.png");
    }


    .information-icon.active::after {
        height: 1px;
        width: 370px;
        content: "";
        position: absolute;
        left: 24px;
        top: 50%;
    }

    .base-game .information-icon::after {
        background-color: #58E3B8;
    }
}

.information-box {
    border-style: solid;
    border-width: 1px;
    position: absolute;
    z-index: 1;
    width: 346px;
    right: 45px;
    top: -10px;
    background-color: #F5EEE9;
    font-weight: 400;
    font-size: 12pt;
}

.information-box p {
    margin: 24px 18px;
}

.base-game .information-box {
    border-color: #58E3B8;
    color: #22CD98;
}

.collapsing {
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.stop-line {
    background: none;
}

.item-2:last-of-type .stop-line, .item-3:last-of-type .stop-line {
    background-color: #F5EEE9;
    width: 1px;
    position: absolute;
    left: 39px;
    top: 20px;
    height: calc(100% - 20px);
}

.item-3:last-of-type .stop-line {
    left: -49px;
    top: 13px;
    height: calc(100% - 13px);
}

@media only screen and (max-width: 880px) {
    .information-box {
        position: relative;
        right: unset;
        top: 0;
        left: -65px;
    }

    .item-3 .information-box {
        left: -100px;
    }
}

@media only screen and (max-width: 508px) {
    .information-box {
        width: calc(100% + 45px);
    }

    .item-3 .information-box {
        width: calc(100% + 84px);
    }
}