.title-bar {
    display: flex;
    flex-direction: column;
    padding: 36px 0;
    min-height: 180px;
}

@media (min-width: 980px) {
    .title-bar {
        min-height: 220px;
    }
}

.title-bar.default {
	color: #1a1a1a;
	background-color: #FDB924;
}

.title-bar.purple {
	color: #fff;
	background-color: hsl(286, 79%, 30%);
}

.title-bar.yellow {
	color: #1a1a1a;
	background-color: #FDB924;
}

.title-bar.green {
	color: #fff;
	background-color: #94C73D;
}

.title-bar.blue {
	color: #fff;
	background-color: #00A5E5;
}

.title-bar.red {
	color: #fff;
	background-color: #D9531E;
}

.title-bar.black {
	color: #fdb924;
	background-color: #1a1a1a;
}

.title-bar.white {
	color: #1a1a1a;
	background-color: #f5f5f5;
}

.title-bar .breadcrumb {
    margin: 0 auto 30px;
    padding: 0 35px;
    max-width: 596px;
    color: #fff;
    box-sizing: content-box;
}

@media (min-width: 980px) {
    .title-bar .breadcrumb {
        padding: 0 84px;
    }
}

.title-bar .breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.title-bar .breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.title-bar .breadcrumb li + li::before {
    content: "›";
    display: inline-block;
    margin-top: -4px;
    padding: 0 8px;
}

.title-bar .breadcrumb a {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.title-bar .breadcrumb a:hover {
    text-decoration: underline;
}

.title-bar h1 {
    margin: auto auto 0;
    padding: 0 35px;
    max-width: 1000px;
    font-size: 40px;
    font-weight: 100;
    text-align: center;
    box-sizing: content-box;
}

@media (min-width: 980px) {
    .title-bar h1 {
        font-size: 66px;
    }
}