.mainContent {
    max-width: 1070px;
}

.reliabilityHeading {
    width: 98%;
    margin: 24px auto; 
    text-align: center;
    line-height: 100%;
    font-size: 36px; 
    font-weight: 900;
    color: #4c9dd6;
}

.green {
    color: #00a546;
}

.gold {
    color: #ffb300;
}

.plainContent, .plainContentMed, .plainContentLarge {
    width: 74%;
    margin: 24px auto; 
    text-align: center;
    line-height: 125%;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.plainContentMed {
    font-size: 18px;
}

.plainContentLarge {
    font-size: 24px;
}

/* Road Target Image Map (box size here) */
.roadTargetBox {
    width: 20%;
    height: 20%;
    cursor: grab;
    position: absolute;
}

/* Positions of each box */
.roadTargetBoxPos1 { top: 38%; left: 14.5%; }
.roadTargetBoxPos2 { top: 19%; left: 60%; }
.roadTargetBoxPos3 { top: 55.5%; left: 73%; }

.roadTargetDropdownContent {
    width: 25%;
    padding: 12px;
    background-color: #333;
    color: #fff;
    position: absolute;
    top: 25%;
    opacity: 0.95;
    color: #000;
    border-radius: 8px;
    box-shadow: 5px 5px 10px -1px rgba(80,80,80,.7);
    z-index: 9999;
    display: none;
    color: #fff; /* Only works in this position */
    /* clip-path: polygon(0 1%, 77% 1%, 100% 100%, 0% 100%); */
}

.roadTargetDropdownContent a {
    color: yellow;
}

/* The position of each dropdown content box */
.roadTargetContentPos1 { top: 56.5%; left: 14.5%; }
.roadTargetContentPos2 { top: 39%; left: 57%; }
.roadTargetContentPos3 { top: 76%; left: 57%; }

.progressDashboard {
    max-width: 80%;
    margin: auto;
    text-align: center;
    position: relative;
}

.progressDashboard:hover {
    opacity: 0.8;
}

.fundingInfrastructureContainer {
    width: 95%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.fundingLeftContainer {
    width: 50%;
    margin-right: 32px;
    text-align: left;
}

/* Road Sign Image Map (box size here) */
.roadSignBox {
    width: 8.5%;
    height: 23%;
    position: absolute;
    cursor: grab;
    /* border: 2px solid black; */
}

/* Positions of each box within the years */
.roadSignBoxPos1 { top: 23%; left: 5%; }
.roadSignBoxPos2 { top: 12%; left: 21.5%; }
.roadSignBoxPos3 { top: 23%; left: 38%; }
.roadSignBoxPos4 { top: 12%; left: 54.5%; }
.roadSignBoxPos5 { top: 23%; left: 71.2%; }
.roadSignBoxPos6 { top: 12%; left: 87%; }

/* The 'content box' holding the dropdown content */
.roadSignDropdownContent {
    padding: 12px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    opacity: 0.95;
    color: #000;
    box-shadow: 5px 5px 10px -1px rgba(199,199,199,1);
    z-index: 9999;
    display: none;
} 

/* The position of each dropdown box */
.roadSignContentPos1 { top: 46%; left: 7.5%; }
.roadSignContentPos2 { top: 36%; left: 24%; }
.roadSignContentPos3 { top: 46%; left: 40%; }
.roadSignContentPos4 { top: 36%; left: 47%; }
.roadSignContentPos5 { top: 46%; left: 52%; }
.roadSignContentPos6 { top: 36%; left: 77%; }

/* The styles for the content in the dropdown */
.roadSignTextHeading { font-size: 16px; font-weight: 900; }
.roadSignTextRed { color: #f1706b; }
.roadSignTextGreen { color: #add34c; }

/* End Road Sign Image Map */

.fundingRightContainer { 
     width: 40%;
}

.treeTrimHeading {
    max-width: 100%; 
    margin: 48px auto 0px auto;
}

.treeTrimHeading:hover {
    opacity: 0.8;
}

.treeBrochureContainer {
    max-width: 70%;
    margin: 24px auto 0px auto;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.treeBrochureLeft, .treeBrochureRight{
    position: relative;
}

.treeBrochureGoalsTop {
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    top: 7px;
    left: 112px;
}

.treeBrochureGoalsBottom {
    position: absolute;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    top: 66px;
    left: 136px;
}

.treeBrochureClearanceTop {
    position: absolute;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    top: 7px;
    left: 111px;
}

.treeBrochureClearanceBottom {
    position: absolute;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    top: 66px;
    left: 136px;
}

.treeBrochureClearanceBottom a, .treeBrochureGoalsBottom a {
    color: #fff;
}

.treeBrochureClearanceBottom a:hover, .treeBrochureGoalsBottom a:hover {
    opacity: .30;
}

/* Efficiency Study Stuff */
.efficiencyStudyContainer {
    max-width: 95%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.efficiencyImageContainer {
    max-width: 367px;
    margin: auto;
    text-align: center;
    cursor: grab;
}

.efficiencyStudyContent {
    width: 67%;
    margin: auto;
    text-align: center;
    padding: 12px;
    background-color: #fff;
    position: absolute;
    top: 60px;
    left: 12%;
    opacity: 0.95;
    color: #000;
    z-index: 9999;
    display: none;
    box-shadow: 5px 5px 10px -1px rgba(199,199,199,1);
}

/* Responsive */
@media screen and (max-width: 954px) {
    .reliabilityHeading {
        font-size: 32px;
    }

    .fundingInfrastructureContainer {
         text-align: center;
         display: block;
    }

    .fundingLeftContainer, .fundingRightContainer {
        width: 85%;
        margin: auto;
    }

    .fundingRightContainer {
        width: 63%;
        margin-top: 29px;
        margin-bottom: 19px;
    }
}

@media screen and (max-width: 775px) {
    .roadTargetDropdownContent, .roadSignTextHeading, roadSignTextHeading a {
        width: 40%;
        font-size: 12px;
    }

    .roadSignDropdownContent {
        font-size: 12px;
    } 

    .fundingRightContainer {
        width: 75%;
        margin-top: 29px;
        margin-bottom: 19px;
    }
}