.section-header {
    height: 66.666666vh;
    width: 100%;
    background-position-x: center;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-title-wrapper {
    height: 100%;
    width: 100%;
}

.section-title {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    color: black;
}

.section-title > table {
    width: 100%;
}

.section-title td {
    vertical-align: middle;
    text-align: center;
}

.section-title .top-line {
    margin-top: 20px;
}

.section-title .top-line > div {
    background-color: black;
    height: 2px;
    width: 100%;
}

.section-title .icon {
    width: 1%;
    white-space: nowrap;
    padding: 0 5px;
}

.section-title .icon .font-icon {
    font-size: 40px;
    line-height: 1;
}

.section-title .section-row > div {
    float: left;
}

.section-title .title {
    font-family: Montserrat-Bold, sans-serif;
    font-size: 70px;
    text-transform: uppercase;
    line-height: 1.2;
}

.section-title .bottom-line {
    width: 15%;
}

.section-title .bottom-line > div {
    background-color: black;
    height: 2px;
    width: 100%;
}

.section-title .subtitle {
    font-size: 18px;
    line-height: 1;
}

.section-title .icon.false {
    font-size: 16px;
    text-transform: uppercase;
    padding: 0 15px;
}

/* ------> Colors */
/* grey */
.section-header.grey .section-title .bottom-line > div,
.section-header.grey .section-title .top-line > div {
    background-color: #353749;
}
.section-header.grey .section-title {
    color: #353749;
}

/* white */
.section-header.white .section-title .bottom-line > div,
.section-header.white .section-title .top-line > div {
    background-color: #edeffe;
}
.section-header.white .section-title {
    color: #edeffe;
}

/* black */
.section-header.black .section-title .bottom-line > div,
.section-header.black .section-title .top-line > div {
    background-color: #20222E;
}
.section-header.black .section-title {
    color: #20222E;
}

/* black */
.section-header.white-on-black {
    background-color: #393D50;
}

.section-header.white-on-black .section-title .bottom-line > div,
.section-header.white-on-black .section-title .top-line > div {
    background-color: #edeffe;
}

.section-header.white-on-black .section-title {
    color: #edeffe;
}

.section-header.white-on-transparent {
    background-color: transparent;
}

.section-header.white-on-transparent .section-title .bottom-line > div,
.section-header.white-on-transparent .section-title .top-line > div {
    background-color: #edeffe;
}

.section-header.white-on-transparent .section-title {
    color: #edeffe;
}

/* ------> title sizes */
.section-header.title-size-2 .section-title .title {
    font-size: 66px;
}

.section-header.title-size-3 .section-title .title {
    font-size: 58px;
}

.section-header.title-size-4 .section-title .title {
    font-size: 52px;
}

.section-header.title-size-5 .section-title .title {
    font-size: 48px;
}

.section-header.title-size-6 .section-title .title {
    font-size: 32px;
}

.section-header.title-size-7 .section-title .title {
    font-size: 26px;
}

/* ------> title padding */
.section-header.title-padding-2 .section-title .title {
    padding: 15px 0;
}

.section-header.title-padding-3 .section-title .title {
    padding: 25px 0;
}

/* ------> icon padding */
.section-header.icon-padding-10 .section-title .icon {
    padding: 0 10px;
}

.section-header.icon-padding-30 .section-title .icon {
    padding: 0 30px;
}

/* ------> container sizes */
.section-header.wrap-size-1 {
    height: 400px;
}

.section-header.wrap-size-2 {
    height: 250px;
}

.section-header.wrap-size-3 {
    height: 200px;
}

.section-header.wrap-size-4 {
    height: 150px;
}

.section-header.wrap-size-4-5 {
    height: 125px;
}

/* ------> strictly representative */
.section-header.representative {
    height: 150px;
    background-color: #393d50;
}

/* -----> voucher */
.section-header.voucher {
    height: 100%;
}

.section-header.voucher .section-title {
    color: #353749;
    width: 100%;
}

/* ----> subtitle weight */
.section-header.subtitle-weight-3 .subtitle.noto-sans-bold {
    font-weight: 300;
}

/* ----> font icon size */
.section-header.font-icon-size-1 .section-title .icon .font-icon {
    font-size: 36px;
}

.section-header.font-icon-size-2 .section-title .icon .font-icon {
    font-size: 34px;
}

.section-header.font-icon-size-3 .section-title .icon .font-icon {
    font-size: 32px;
}

/* ---> mini title size */
.section-header.mini-title-size-18 .section-title .icon.false {
    font-size: 18px;
}

@media (max-width: 659px) {
    .section-header {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (max-width: 600px) {
    .section-header {
        height: 400px;
    }

    .section-title {
        width: 100%;
    }

    .section-title .title {
        font-size: 12vw;
    }

    .section-header.smaller-title .section-title .title {
        font-size: 10vw;
    }
}