.stages-details {
    display: table;
    width: 100%;
}

.stages-details>div {
    display: table-cell;
}

.stages-details>div.left-stages,
.stages-details>div.right-stages {
    width: 200px;
}

.stages-details>div.current-stage h3 {
    font-size: 23px;
    position: relative;
    top: -17px;
}


.stages-details>div.left-stages .stage,
.stages-details>div.right-stages .stage {
    cursor: pointer;
    position: relative;
    top: -20px;
}

.stages-details>div.left-stages h3,
.stages-details>div.right-stages h3 {
    font-size: 19px;
}


.stages-details>div.right-stages .stage:not(:first-child),
.stages-details>div.left-stages .stage:not(:first-child),
.stages-details>div.right-stages .more .stage,
.stages-details>div.left-stages .more .stage {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAAAMCAMAAAB4DIA2AAAAP1BMVEUAAACyrIe3r5C0rY61ro+4sJC2ro+2ro+2ro+2ro+2ro62ro62ro+2ro62ro62ro62ro62ro62ro+2ro62ro4owpq2AAAAFXRSTlMABA0JFgcwEhwkWkUgKT9QN3CHZnt94cJjAAABbElEQVR42tXR646CMBCGYXqilFJQ8f6vdafDlK+AhyVrYvaZ4g8jwXdobNd1AwkhpdRml2zMIpuKfjX3c3Fd3Su3M+433HhdzdDDVMQpspFdWMsSCSEMQ5dZa733OjPGEbVovCUdoXaORz4bF1FMlR42q5ivdE7gG551QizGAr0ozoY6ep8tGu2JxMu7JwkbqJeQR8QxFtNWn+eEiU4eEfmKUCLzFO0qsSDBSM4QTVz9uonOfGYX3WLIwiJBW7kUWAq2Qh+/M0oa+qClQkgQxEBHYjfBTDNzrOZwZ4he+IW1WAIdMaxCLW21f5D2AuDp3ZYVHnRhFmhGN4Uzw3TFF5bOHvYBw0F4CUGoQhfkpx1JIlJhraWL1c00QjEnTEU/gWfWrLcf4F/QgEbpBLdSO82WAnAV8wo/XX+ekS6E7bmH1EHzjHq7BnBvmA1nznLvqNMoiQdAYfDdf/Io6TTuP/Hrr8OfxvkqdWK+4QcGJUJoXChnwQAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position-y: 22px;
    padding-top: 10px;
    background-size: 100%;
}

.stages-details>div.current-stage .stage-period {
    margin-top: -20px;
}


.stages-details .stage-period {
    color: #333333;
    font-size: 15px;
}

.stages-details>div.left-stages {
    background-image: url(/static/images/budgetProcess/border.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 10px;
}

.stages-details>div.right-stages {
    background-image: url(/static/images/budgetProcess/border.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 27px;
}

.stages-details>div.current-stage {
    padding: 0 40px;
}

.stages-details>div.current-stage.no-left {
    padding-left: 0;
}

.stages-details>div.current-stage.no-right {
    padding-right: 0;
}

.stages-details>div.current-stage>.stage-description {
    margin-top: 25px;
}

.stages-details>div.current-stage .substages>div,
.stages-details>div.current-stage .substages>a {
    display: table-cell;
}

.stages-details .substages {
    margin-top: 25px;
}

.stages-details .substages .substage-arrow {
    background-image: url(/static/images/budgetProcess/homeArrow.svg);
    background-size: 30px 65px;
    height: 65px;
    width: 65px;
    min-width: 65px;
    vertical-align: top;
    margin-top: 33px;
    background-repeat: no-repeat;
    background-position: center;
}

.stages-details>div.current-stage .substages>.substage {
    padding: 16px 28px;
    text-align: center;
    cursor: pointer;
    max-width: 400px;
    color: #494949 !important;
}

.stages-details>div.current-stage .substages>.substage.active {
    background-image: url(/static/images/budgetProcess/substages/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.stages-details>div.current-stage .substages>.substage .substage-descriprion {
    text-align: left;
    margin-top: 25px;
    display: inline-block;
}

.stages-details>div.current-stage .substages>.substage:hover {
    color: #076ba5 !important;
}

.stages-details>div.current-stage .documents {
    margin-top: 10px;
}

.stages-details>div.current-stage .documents .document {
    height: 36px;
    background-repeat: no-repeat;
    background-size: 100% 36px;
    font-size: 12px;
    color: white;
    margin-top: 10px;
    padding-left: 18px;
    cursor: pointer;
    padding-right: 100px;
    display: table;
}

.stages-details>div.current-stage .documents .document span {
    display: table-cell;
    vertical-align: middle;
}

.stages-details>div.current-stage .documents .document.folder {
    background-image: url(/static/images/budgetProcess/documents/doc_icon3.png), url(/static/images/budgetProcess/documents/doc_1_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 29px 34px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.file {
    background-image: url(/static/images/budgetProcess/documents/doc_icon1.png), url(/static/images/budgetProcess/documents/doc_1_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 29px 34px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.gerb {
    background-image: url(/static/images/budgetProcess/documents/doc_icon2.png), url(/static/images/budgetProcess/documents/doc_1_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 10px, top left;
    background-size: 29px 34px, 100% 36px;
}

.substages-container {
    display: table;
    margin: 0 auto;
}

span.show-more {
    margin-top: 10px;
    display: inline-block;
    color: #307FBA;
    border-bottom: 1px dashed #307FBA;
    font-size: 15px;
    cursor: pointer;
}

.budget-process {
    background: linear-gradient(to bottom, #E2DDC9 0%, #E5E0CD 100%);
    padding: 0 26px 20px;
}

@media(max-width: 1280px) {
    .budget-process {
        padding: 0 20px 20px;
    }
}

.budget-process-toggle {
    background: url(/static/images/content_top_shadow.png) repeat-x left top, linear-gradient(to bottom, #C7BF9B 0%, #C8BE9A 100%);
    height: 68px;
}

.budget-process-toggle span {
    position: relative;
    left: 26px;
    font-size: 23px;
    color: #72552B;
    cursor: pointer;
}

@media(max-width: 1280px) {
    .budget-process-toggle span {
        left: 20px;
    }
}

.budget-process-toggle.opened {
    background: url(/static/images/content_top_shadow.png) repeat-x left top, #E2DDC9;
}

.budget-process-toggle>span>img {
    margin-left: 10px;
    width: 30px;
}

.budget-process-toggle.opened>span>img {
    transform: rotate(270deg);
}

h3.nameplate {
    color: white;
    padding-left: 17px;
    display: inline-block;
    margin-left: 96px;
    vertical-align: middle;
    height: 37px;
    padding-right: 30px;
    position: relative;
    top: -14px;
    padding-top: 7px;
    /*cursor: pointer;*/
}

@media (max-width: 1280px) {
    h3.nameplate {
        margin-left: 40px;
    }
}

h3.nameplate.stage-1 {
    background: url(/static/images/budgetProcess/nameplates/1.png);
    background-repeat: no-repeat;
    background-position-x: -12px;
    background-position-y: -4px;
    background-size: 178px 46px;
}

h3.nameplate.stage-2 {
    background: url(/static/images/budgetProcess/nameplates/2.png);
    background-repeat: no-repeat;
    background-position-x: -12px;
    background-position-y: -4px;
    background-size: 178px 46px;
}

h3.nameplate.stage-3 {
    background: url(/static/images/budgetProcess/nameplates/3.png);
    background-repeat: no-repeat;
    background-position-x: -12px;
    background-position-y: -4px;
    background-size: 178px 46px;
}

h3.nameplate.stage-4 {
    background: url(/static/images/budgetProcess/nameplates/4.png);
    background-repeat: no-repeat;
    background-position-x: -12px;
    background-position-y: -4px;
    background-size: 168px 46px;
}

h3.nameplate.stage-5 {
    background: url(/static/images/budgetProcess/nameplates/5.png);
    background-repeat: no-repeat;
    background-position-x: -12px;
    background-position-y: -4px;
    background-size: 145px 46px;
}


@media (max-width: 1217px) {
    h3.nameplate {
        padding-left: 7px;
        margin-left: 30px;
    }
    h3.nameplate.stage-3 {
        background-size: 160px 46px;
    }
    h3.nameplate.stage-4 {
        background-size: 150px 46px;
    }
    h3.nameplate.stage-4[data-period="2017"] {
        margin-left: 0 !important;
    }
}

.budget-process[data-period='2018'] .right-stages .stage[data-stage='1'],
.budget-process[data-period='2017'] .right-stages .stage,
.budget-process[data-period='2016'] .right-stages .stage {
    opacity: 1;
}

.substage-image {
    max-width: inherit;
}

@media (max-width: 1430px) {
    .substage-image {
        max-width: 165px;
    }
}

@media (max-width: 1366px) {
    .budget-process-toggle span {
        font-size: 21px;
    }
    .stages-details>div.current-stage h3 {
        font-size: 20px;
    }
    .stages-details>div.left-stages,
    .stages-details>div.right-stages {
        width: 170px;
    }
    .stages-details>div.current-stage {
        padding: 0 20px;
    }
    .stages-details>div.current-stage .substages>.substage {
        padding: 16px 15px;
    }
}

.stages-details>div.current-stage .documents .document.bdg {
    background-image: url(/static/images/budgetProcess/bdg_min.png), url(/static/images/budgetProcess/documents/doc_2_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 11px, top left;
    background-size: 23px 30px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.folder.orange {
    background-image: url(/static/images/budgetProcess/documents/doc_icon4.png), url(/static/images/budgetProcess/documents/doc_4_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 23px 30px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.table.orange {
    background-image: url(/static/images/budgetProcess/documents/doc_icon5.png), url(/static/images/budgetProcess/documents/doc_4_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 23px 30px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.pen.blue {
    background-image: url(/static/images/budgetProcess/documents/doc_icon7.png), url(/static/images/budgetProcess/documents/doc_3_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 28px 30px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.file.blue {
    background-image: url(/static/images/budgetProcess/documents/doc_icon1.png), url(/static/images/budgetProcess/documents/doc_3_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 28px 35px, 100% 44px;
    line-height: 12px;
    height: 44px;
}

.stages-details>div.current-stage .documents .document.txt.blue {
    background-image: url(/static/images/budgetProcess/documents/doc_icon6.png), url(/static/images/budgetProcess/documents/doc_3_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 23px 30px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.folder.dark-orange {
    background-image: url(/static/images/budgetProcess/documents/doc_icon8.png), url(/static/images/budgetProcess/documents/doc_5_1.svg);
    background-repeat: no-repeat no-repeat;
    background-position: center right 30px, top left;
    background-size: 23px 30px, 100% 36px;
}

.stages-details>div.current-stage .documents .document.orange[doc-length='1'] {
    background-position: center right 9px, top left;
    padding-right: 50px;
}

.stages-details>div.current-stage .documents .document.blue[doc-length='1'] {
    background-position: center right 15px, top left;
}

.stages-details>div.current-stage .documents .document.dark-orange[doc-length='1'] {
    background-position: center right 20px, top left;
}

@media (max-width: 1366px) {
    .stages-details>div.current-stage .documents .document.file {
        background-position: center right 12px, top left;
        background-size: 29px 34px, 100% 64px;
        height: 64px
    }
    .stages-details>div.current-stage .documents .document.folder {
        background-position: center right 15px, top left;
    }

    .stages-details>div.current-stage .documents .document.bdg {
        background-position: center right 15px, top left;
    }
}

@media (max-width: 1280px) {
    .stages-details>div.current-stage .documents .document.file {
        background-position: center right 15px, top left;
        background-size: 29px 34px, 100% 50px;
        height: 50px
    }
    .stages-details>div.current-stage .documents .document.folder {
        background-position: center right 15px, top left;
    }

    .stages-details>div.current-stage .documents .document.bdg {
        background-position: center right 15px, top left;
    }
}

@media (max-width: 1190px) {
    .stages-details>div.current-stage .documents .document.file {
        background-position: center right 13px, top left;
        background-size: 29px 34px, 100% 50px;
        height: 50px;
    }
    .stages-details>div.current-stage .documents .document.folder {
        background-position: center right 13px, top left;
    }

    .stages-details>div.current-stage .documents .document.bdg {
        background-position: center right 13px, top left;
    }
}

.bdg-container {
    margin-top: 10px;
}

.bdg-container>a.bdg-link {
    color: #333333 !important;
    text-decoration: none;
}

.bdg-container span.bdg-text {
    padding-left: 15px;
    position: relative;
    top: -11px;
}

.bdg-container>a.bdg-link:hover {
    color: #076ba5 !important;
}

@media(max-width: 1189px) {
    h3.nameplate.stage-4[data-period="2017"] {
        margin-left: 35px !important;
    }
}