section[role="banner"] {
    height: 250px;
    background-repeat: no-repeat;
    background-position: 50%;
}
body.FlySafair section[role="banner"] {
    background-color: var(--light-blue);
    background-image: url(/img/flysafair/header.svg);
}
section[role="banner"]:after {
    content: '';
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 30px;
    top: 30px;
    width: 150px;
    height: 50px;
}
body.pep section[role="banner"]:after {
    background-position: calc(100% - 4em) 0;
    right: unset;
    width: 100%;
    max-width: 1230px;
}
.content-page h4 {
    margin: 0 0 .8em;
    padding: 0;
    font-size: calc(var(--sub-heading) * 1.7);
    font-family: 'Caveat', sans-serif;
    line-height: 1em;
    transform: scaleX(var(--din-scale));
    font-weight: normal;
    transform-origin: center;
    text-transform: none;
}
.video.blue {
    background: var(--dark-blue);
    position: relative;
}
.video.light-blue,
.intro.light-blue {
    background: var(--light-blue);
    position: relative;
}
body.pep .intro.yellow {
    background: #ffd900;
    position: relative;
}
.video.yellow {
    background: var(--yellow);
    position: relative;
}
.light-blue h3 {
    color: var(--dark-blue);
}
body.FreeBeeCourse .intro:not(.content-page) {
    font-size: 1.3em;
    font-weight: 700;
}
.video.blue:before,
.video.light-blue:before,
.intro.light-blue:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeat 50% 0 url(/img/banner-bg-blue.png);
  z-index: 1;
}
.video.yellow:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeat 50% 0 url(/img/banner-bg-yellow.png);
  z-index: 1;
}
body.pep .intro.yellow:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeat 50% 0 url(/img/pep/banner-bg-yellow.png);
  z-index: 1;
}
.video.blue > div {
    position: relative;
    width: 58%;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
    background: var(--dark-blue);
    padding: 3em;
}
.intro.light-blue > div,
.video.light-blue > div {
    position: relative;
    width: 58%;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
    background: var(--light-blue);
    padding: 3em;
}
.video > div,
body.pep .intro.yellow > div {
    position: relative;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
}
body.pep .intro.yellow > div {
    font-weight:700
}
.video iframe {
    width: 100%;
    height: 100%;
}
body.pep #app .actions.primary:not(.first) {
    margin-bottom: 0;
}
@media ( max-width: 767px ) {
    .powered-by {
        margin: 1em auto 3em;
        width: calc(100% - 4em);
    }
    body.pep .modal {
        border-radius: 0;
        border: 0;
    }
    body.pep h4.modal-title {
        padding-left: 0;
        padding-right: 0;
        font-size: 1.6em;
    }
    .modal .modal-footer {
        padding: 2em 0em 2em;
    }
}
@media ( min-width: 768px ) {
    .powered-by {
        margin: 0 auto;
        width: 100%;
        max-width: 1316px;
    }
    body.pep .page-foot {
        min-height: 120px;
        position: relative;
    }
    body.pep .page-foot > p {
        max-width: 510px;
        padding-top: 1.2em;
    }
    .powered-by {
        margin-bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
}
.powered-by:after {
    content: '';
    display: block;
    clear: both;
}
.powered-by > p {
    float: right;
    font-size: 0.75em;
    width: 80px;
    text-align: center;
}
.powered-by img {
    display: block;
    float: right;
    width: 80px;
    height: auto;
    clear: right;
    image-rendering: -webkit-optimize-contrast;
}
body.pep #app {
    padding-bottom: 1em;
}
body.pep #app > p:nth-child(1) {
    font-size: 1.125em;
}
body.pep #app > p:nth-child(2) {
    font-size: 1.625em;
    font-family: "Lato Bold", sans-serif;
    color: #3578bc;
    text-align: center;
}
body.pep .actions.primary a.btn.btn-primary {
    background: #3578bc !important;
    border-color: #3578bc !important;
    color: #fff !important;
}
body.pep div:not(.bar) .actions.primary a.btn.btn-primary:hover {
    background: #ffd900 !important;
    border-color: #ffd900 !important;
    color: #000 !important;
}
body.pep div.bar .actions.primary a.btn.btn-primary:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}
body.pep #app h5 {
    font-size: 1.3125em;
}
body.pep #app em {
    color: #3578bc;
    font-style: normal;
    font-family: "Lato Bold", sans-serif;
}
@media ( max-width: 767px ) {
    .video > div,
    .intro.light-blue > div,
    body.pep .intro > div {
        padding: 3em !important;
        width: 100% !important;
    }
}
@media ( min-width: 768px ) {
    .video {
        height: 477px;
    }
    body.pep .video > div {
        width: 58%;
        margin: 0 auto;
        padding: 3em;
    }
    .video.yellow > div,
    body.pep .intro.yellow > div {
        width: 58%;
        background: var(--yellow);
        padding: 3em;
    }
    body.pep:not(.v2) .intro.yellow > div {
        background: #ffd900;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    body.pep.v2 .intro.yellow > div {
        background: #ffd900;
    }
    body.pep .cols {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    body.pep .intro.yellow > div > div,
    body.pep .cols > div {
        flex: 0 1 46%;
        position: relative;
    }
    body.pep .cols > div ol {
        padding-left: 1em;
    }
    body.pep:not(.v2) .intro.yellow > div > div:nth-child(1) {
        font-size: 1.75em;
        font-weight: 300;
    }
    body.pep:not(.v2) .intro.yellow > div > div:nth-child(2) {
        padding-top: 27%;
    }
    body.pep .bar {
        margin: 3em 0 2em;
    }
    body.pep .bar > div {
        position: relative;
        width: 100vw;
        left: 50%;
        transform: translate(-50%, 0);
        max-width: var(--max-width);
    }
    body.pep .bar > div > div {
        width: 64%;
        padding: 2em;
        margin: 0 auto;
        position: relative;
        z-index: 3;
    }
    body.pep .bar > div:before {
        content: '';
        background: #3578bc;
        position: absolute;
        height: 100%;
        width: 50%;
        z-index: 2;
        top: 0;
        left: 0;
        border-radius: 0 10em 10em 0 ;
    }
    body.pep .bar > div:after {
        content: '';
        background: #ffd900;
        position: absolute;
        height: 100%;
        width: 55%;
        z-index: 1;
        top: 0;
        right: 0;
        /* border-radius: 10em 0 0 10em; */
    }
    body.pep #app .bar h5 {
        font-size: 1.625em;
        color: #fff;
        width: 42%;
        margin: 0;
    }
    body.pep #app .bar >div > div > div {
        position: absolute;
        top: 50%;
        right: 0;
        width: 51.3%;
        transform: translate(0, -50%);
    }
    body.pep #app .bar >div > div > div .actions.primary {
        margin-top: 0;
    }
    body.pep:not(.v2) .intro.yellow iframe {
        position: absolute;
    }
    body.pep.v2 .intro.yellow > div > div:nth-child(1) p {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
    body.pep.v2 .intro.yellow > div > div:nth-child(2) {
        text-align: center;
    }
    body.pep.v2 .intro.yellow iframe {
        margin: 2em auto 0;
    }
}
body.pep .cols > div ol li {
    padding-bottom: .8em;
}
body.pep.v2 .intro.yellow > div > div:nth-child(1) {
    font-size: 1.125em
}
body.pep:not(.v2) .intro.yellow iframe {
    top: 0;
    width: 100%;
    height: 100%;
}
body.pep .cols > div img {
    display: block;
    width: 100%;
    border-radius: 15px;
}
@media ( max-width: 767px ) {
    body.pep .cols > div img {
        margin-bottom: 2em;
    }
    body.pep.v2 .intro.yellow iframe {
        margin-top: 1em;
        width: 100%;
        height: 100%;
    }
}
body.FlySafair.sub-page.Register .form > .actions {
    font-weight: bold;
}
body.FlySafair section[role="banner"]:after {
    background-image: url(/img/components/todos/flysafair-logo.svg);
}
body.CareSA section[role="banner"]:after {
    background-image: url(/img/components/todos/care-sa-logo.png);
}
body.B4i:not(.pep) section[role="banner"],
body.FreeBeeCourse section[role="banner"] {
    background-color: var(--dark-blue);
    background-image: url(/img/b4i/header.svg);
}
body.pep section[role="banner"] {
    background-color: #3578bc;
    background-image: url(/img/pep/header.svg);
}
body.B4i:not(.pep) section[role="banner"]:after,
body.FreeBeeCourse section[role="banner"]:after {
    background-image: url(/img/components/todos/b4i-logo.png);
}
body.pep section[role="banner"]:after {
    background-image: url(/img/pep/logo-pep.svg);
}

body.KingPrice section[role="banner"] {
    background-color: var(--orange);
    background-image: url(/img/king-price/header.svg);
}
body.KingPrice section[role="banner"]:after {
    background-image: url(/img/components/todos/king-price-logo.png);
}

body.CareSA section[role="banner"] {
    background-color: var(--purple);
    background-image: url(/img/care-sa/header.svg);
}
.ctt {
    font-family: 'Caveat', sans-serif;
    font-size: 1.9em;
    position: absolute;
    transform: translate(3px, 1px) skewY(-1deg);
}
@media ( max-width: 767px ) {
    .ctt {
        display: block;
        text-align: center;
        width: 100%;
        position: relative;
    }
}
@media ( min-width: 768px ) {
    .ctt {
        display: inline-block;
    }
}
h4.break {
    margin-top: 1em
}
.content-page li {
    margin: 0 0 .5em
}
.ctt span:nth-child(1),
span.light-blue {
    color: var(--light-blue);
}
.ctt span:nth-child(3),
span.orange,
p.orange {
    color: var(--orange);
}
#signupForm {
    text-align: center;
    padding: 1em 0 0
}
body.B4i.welcome h3 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
body.FreeBeeCourse .todos,
body.B4i.welcome .todos {
    display: none;
}
body.FlySafair .form h3 + p {
    font-family: 'Lato Bold', Arial, Helvetica, sans-serif;
    text-align: center;
}
h3 {
    font-family: 'Caveat', Arial, Helvetica, sans-serif;
    color: var(--orange);
    transform: skewY(-0.2deg);
}
body.FlySafair #amount {
    margin-top: .3em
}
body.FlySafair #amount + .field-validation-error + button {
    margin: 2em auto;
    display: block;
}
body.FlySafair.showing-results #amount + button {
    display: none;
}
.safair-results {
    display: none;
}
body.showing-results .safair-results {
    display: block;
}
body.showing-results .safair-results > div > h4 {
    font-family: 'Caveat', sans-serif;
    text-align: center;
    font-size: 1.9em;
    line-height: 1.4em;
}
body.showing-results .safair-results > div > h3 span {
    display: block;
}
.FlySafair .form {
    padding: 2em;
}
.FlySafair .form > h4 {
    text-align: center;
    margin-bottom: 3em;
}
@media ( max-width: 767px ) {
    body.FlySafair #amount + button {
        margin-bottom: 2em;
    }
    .safair-results {
        padding: 2em 0 0;
    }
}
.FlySafair[data-step="1"] #app > div > h3 {
    margin-bottom: .2em;
}
@media ( min-width: 768px ) {
    body.sub-page.FlySafair  #app {
        max-width: 1130px;
    }
}
.enter-amount {
    margin: 0 auto;
    display: inline-block;
    left: 50%;
    position: relative;
    transform: translate(-50%,0);
}
.FlySafair #app > div > h3 + h4 {
    text-align: center;
    margin-bottom: 3em;
}
.safair-results {
    padding: 2em 0 0;
}
.safair-results .items > div {
    text-align: center;
    position: relative;
    margin: 0 0 3em;
}
.safair-results .items > div:after {
    content: '+';
    position: absolute;
    color: var(--orange);
    font-family: 'Lato Bold', sans-serif;
    font-size: 3em;
}
.safair-results .items > div:nth-last-child(1):after {
    display: none;
}
.safair-results .items > div > span {
    display: block;
    max-width: 340px;
    margin: 0.9em auto 0.6em;
}
.safair-results .items > div > div {
    color: var(--orange);
    font-size: 2em;
    font-family: 'Lato Bold', Arial, Helvetica, sans-serif;
    line-height: 1.2em;
}
body.FlySafair .claim:before {
    content: '';
    display: block;
    background: url(/img/flysafair/icon-bee-claim.svg) 50% no-repeat;
    background-size: contain;
    width: 75px;
    height: 75px;
    margin: 0 auto .6em;
}
body.FlySafair .credits:before {
    content: '';
    display: block;
    background: url(/img/flysafair/icon-credits.svg) 50% no-repeat;
    background-size: contain;
    width: 75px;
    height: 75px;
    margin: 0 auto .6em;
}
body.FlySafair .insurance:before {
    content: '';
    display: block;
    background: url(/img/flysafair/icon-travel-insurance.svg) 50% no-repeat;
    background-size: contain;
    width: 75px;
    height: 75px;
    margin: 0 auto .6em;
}
body.FlySafair .purchase-price:before {
    content: '';
    display: block;
    background: url(/img/flysafair/icon-purchase-price.svg) 50% no-repeat;
    background-size: contain;
    width: 75px;
    height: 75px;
    margin: 0 auto .6em;
}
.safair-results .total-value {
    text-align: center;
    position: relative;
}
input[type="checkbox"]:not(.mx-toggle__input):checked + label::before {
    content: "" !important;
    background: no-repeat 50% / contain #56C568 url(/img/icon-checkmark-green.svg) !important;
    color: inherit !important;
}
.todos {
    border-bottom: 7px solid #fff;
    border-top: 7px solid #fff;
}
.todos h3 {
    background: var(--yellow);
    color: var(--dark-blue);
    text-align: left;
    padding: 0.3em;
    margin: 0;
    position: relative;
}
.todos a > span {
    position: relative;
}
.todos a > span:before {
    content: '';
    background: url(/img/components/todos/checkmark.svg) 0 50% no-repeat;
    background-size: contain;
    display: block;
    height: 100%;
    position: absolute;
    left: -52px;
    top: -3px;
}
.todos a {
    display: block;
    position: relative;
    border-top-width: 3px;
    background: var(--dark-blue);
}
.todos a:hover {
    background: var(--yellow);
}
body.sub-page .todos a > span > span {
    text-transform: uppercase;
    font-family: 'Lato Bold', sans-serif;
    font-size: 1.4rem;
}
body.sub-page .todos a > span > span em {
    text-transform: none;
    font-size: 2.3rem;
    padding: 0 0.2em 0 0;
}
.todos a em {
  color: var(--yellow);
}
.todos a:hover em {
  color: var(--dark-blue);
}
.todos a:after {
    content: '';
    position: absolute;
    background: url(/img/components/todos/sign-me-up.svg) 50% no-repeat;
    background-size: contain;
    right: 30px;
    width: 87px;
    height: 45px;
}
.todos a:hover:after {
    background-image: url(/img/components/todos/sign-me-up-white.svg);
}
.todos a[href*="FlySafair"]:before {
    background-image: url(/img/components/todos/flysafair-logo.svg);
}
.todos a[href*="KingPrice"]:before {
    background-image: url(/img/components/todos/king-price-logo.png);
}
.todos a[href*="B4i"]:before {
    background-image: url(/img/components/todos/b4i-logo.png);
}
.todos a[href*="CareSA"]:before {
    background-image: url(/img/components/todos/care-sa-logo.png);
}
.todos a[href*="FlySafair"]:hover:before {
    background-image: url(/img/components/todos/flysafair-logo-black.svg);
}
.todos a[href*="KingPrice"]:hover:before {
    background-image: url(/img/components/todos/king-price-logo-black.png);
}
.todos a[href*="B4i"]:hover:before {
    background-image: url(/img/components/todos/b4i-logo-black.png);
}
.todos a[href*="CareSA"]:hover:before {
    background-image: url(/img/components/todos/care-sa-logo-black.png);
}
body.FlySafair .todos a[href*="FlySafair"],
body.CareSA .todos a[href*="CareSA"],
body.KingPrice .todos a[href*="KingPrice"],
body.B4i .todos a[href*="B4i"] {
    display: none;
}
.take-action {
    position: relative;
}
.take-action .btn-primary {
    color: var(--purple) !important;
    border-color: var(--purple) !important;
}
.take-action .btn-primary:hover {
    background: var(--purple) !important;
    color: var(--light-blue) !important;
}
.terms.small {
    font-size: .8em;
    line-height: 1.7em;
}
.content.action {
    padding: 1.5em 0;
    text-align: center;
}

.FlySafair .content.action {
    background: var(--light-blue);
}
.FlySafair .content.action h3 {
    color: var(--dark-blue);
    margin-bottom: .4em;
}
.CareSA .content.action {
    background: var(--purple);
}
.CareSA .content.action h3 {
    color: #fff;
    display: inline-block;
    margin: 0;
}
.CareSA .content.action .btn.btn-primary {
    color: #fff !important;
    border-color: #fff !important;
    margin-left: 2em;
}
.CareSA .step-1 h4 + p {
    text-align: center
}
h4.script {
    color: var(--dark-blue);
    font-size: 2.1rem;
    text-align: left;
    font-family: 'Caveat', sans-serif;
    line-height: 1.1em;
    transform: skewY(-0.1deg);
}
.script {
    font-family: 'Caveat', sans-serif;
    font-size: 2.1rem;
}
.Legal .content h4 {
    margin-top: 2.5em;
}
.Legal .content a {
    color: var(--orange);
}
.Legal .content table {
    margin: 1em 0;
    border-collapse: collapse;
}
.Legal .content ol li {
    line-height: 1.4em;
    margin: 0 0 .5em
}
.terms td {
    vertical-align: top;
    line-height: 1.4em;
}
.terms table td:nth-child(1) {
    width: 50px;
    white-space: nowrap;
    padding-right: 1em;
}
.Legal .content table.companies th,
.Legal .content table.companies td {
    padding: .5em 0;
    border-bottom: 1px solid var(--field-grey)
}
.Legal .content table.companies th {
    text-align: left;
}
.Legal .content table.companies tr:nth-last-child(1) td {
    border: 0;
}
.Legal .content table.companies th:nth-last-child(1),
.Legal .content table.companies td:nth-last-child(1),
.Legal .content table.companies th:nth-last-child(2),
.Legal .content table.companies td:nth-last-child(2) {
    text-align: center;
}
body.CareSA .take-action {
    background: var(--light-blue) url(/img/care-sa/take-action.svg) 41% 31% no-repeat;
}
body.KingPrice .take-action {
    background: var(--dark-blue) no-repeat 50% 31%/20% url(/img/king-price/take-action.svg);
    padding: 200px 0 2em;
    height: auto;
    color: #fff;
}
@media ( max-width: 767px ) {
    body.KingPrice .take-action {
        background-size: 50%
    }
    section[role="banner"] {
        background-size: 80%;
        background-position: 50% 74%;
    }
    .todos h3 {
        font-size: 3em;
        text-align: center;
    }
    .todos a {
        padding: 1em 1em 3.5em 77px;
        line-height: 1.4em;
    }
    .todos a:before {
        width: 130px;
        height: 50px;
        left: 75px;
        bottom: 14px;
        background-position: 0 50%;
    }
    .todos a:after {
        bottom: 19px;
    }
    .todos a > span {
        padding: 20px 0;
    }
    .todos a > span:before {
        width: 40px;
    }
    #codeSelect + button {
        margin: 2em auto;
        display: block;
    }
    .total-value > div {
        margin: 0 -2em;
    }
    .safair-results .items > div:after {
        bottom: -30px;
        right: calc(50% - 9px);
    }
    body.CareSA .intro {
        padding: 1em;
        position: relative;
    }
    .take-action {
        text-align: center;
        height: 260px;
        padding-top: 200px;
    }
    body.B4i.welcome div.selection a,
    body.CareSA .step-1 .selection label,
    body.FlySafair .step-1 .blocked {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .actions .btn {
        margin-bottom: 1em;
    }
    body.pep .business-units {
        padding-left: 2em
    }
}
body.KingPrice .take-action p {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
body.pep .business-units {
    padding-top: 1em;
}
body.pep .business-units label {
    font-size: 1em;
    padding-bottom: 1.5em;
}
    body.pep .logos {
        padding-bottom: 2.1em;
    }
body.pep .logos img {
    display: block;
    margin: 0 auto;
}
@media ( min-width: 768px ) {
    body.pep .logos {
        display: flex;
        flex-flow: row nowrap;
    }
    body.pep .logos img {
        flex: 1 1 33%;
    }
    body.pep .business-units {
        display: flex;
        flex-flow: row wrap;
    }
    body.pep .business-units > div {
        flex: 1 1 30%;
    }
    .CareSA .content.action .btn.btn-primary {
        transform: translate(0, -6px);
    }
    .take-action {
        text-align: center;
        height: 200px;
    }
    .take-action .btn-primary {
        position: absolute;
        left: 59%;
        top: 41%;
    }
    .content-page {
        width: 64%;
        padding: 3em 0;
    }
    #codeSelect {
        width: 70%;
        display: inline-block;
        margin-right: 2em;
    }
    body.CareSA .intro {
        padding: 4em;
    }
    body.CareSA .intro h4,
    body.CareSA .intro p {
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    section[role="banner"] {
        background-size: 300px;
    }
    .todos h3 {
        font-size: 4em;
    }
    .todos h3:after {
        right: 40px;
        width: 280px;
        height: 70px;
    }
    .todos a {
        padding: 1em 1em 1em 77px;
    }
    .todos a:before {
        width: 20%;
        height: 55%;
        right: 170px;
        top: 20px;
    }
    .todos a:after {
        bottom: 25%;
    }
    .todos a > span {
        padding: 20px 15px;
    }
    .todos a > span:before {
        width: 50px;
    }
    .safair-results .items {
        display: flex;
        flex-flow: row nowrap;
    }
    .safair-results .items > div {
        flex: 1;
    }
    .safair-results .items > div:after {
        top: 42%;
        right: -10px;
    }
    body.B4i.intro .selection a,
    body.B4i.welcome .selection a,
    body.CareSA .step-1 .selection label,
    body.FlySafair .step-1 .blocked {
        margin-left: 1em;
        margin-right: 1em;
    }
}
div[form-group-validation="Turnover"].populated input {
    padding-left: 0.6em
}
div[form-group-validation="Turnover"] label {
    position: relative;
}
div[form-group-validation="Turnover"].populated label:before {
    content: 'R';
    position: absolute;
    left: 0;
    font-size: 1rem;
    margin-top: 1.8em;
}
body.B4i.business-registration .steps {
    display: none;
}
.CareSA .steps {
    max-width: 250px;
}
.FlySafair[data-step="2"] section[role="banner"],
.FlySafair[data-step="2"] .content.video,
.FlySafair[data-step="2"] .content.intro,
.FlySafair[data-step="2"] .content.action,
form[action="/FlySafair/Register"] section[role="banner"] {
    display: none;
}
.safair-results > h3:nth-child(2) {
    position: relative;
    margin-bottom: .5em;
}
.FlySafair.welcome .todos,
.FlySafair[data-step="2"] .todos,
.Register .todos,
.no-todos .todos {
    display: none;
}
.safair-results > h3:nth-child(2):before {
    content: '';
    position: absolute;
    background: white;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    left: 50%;
    bottom: -0.7em;
    z-index: 2;
}
/* .safair-results .total-value h3 {
    margin-bottom: .3em;
} */
body.showing-results .safair-results > div > h3 {
    font-size: 2.4rem;
}
.safair-results .total-value > div > div:nth-child(1),
body.showing-results .safair-results > div > h3 span {
    font-size: 2.6rem;
    font-family: 'Lato Bold', Arial, Helvetica, sans-serif;
    line-height: 1em;
    margin-bottom: 1em;
    color: var(--dark-blue);
}
.safair-results .total-value .btn-primary {
    margin-bottom: 3em;
}
.safair-results .total-value > div > div:nth-child(1) {
    color: var(--orange);
}
body.showing-results .total-value > div > div:nth-child(1) h3 {
    color: var(--dark-blue);
    display: inline-block;
    padding-right: 0.3em;
    margin-bottom: 0;
}
.safair-results .notice {
    color: #808080;
    font-size: .8em;
    text-align: center;
    margin: 0 0 3em;
}
label[for="financialName"] {
    margin-top: 2em;
}
.questions .field-validation-error {
    position: absolute;
    margin-top: 2.9em;
    opacity:0;
    transition:opacity .23s
}
.summary {
    margin-top: 2em
}
.summary .actions {
    margin-top: 0
}
.summary table {
  overflow: hidden;
  width: 80%;
  margin-bottom: 0
}
.summary table th {
  background: var(--dark-blue);
  color: #fff;
  padding: 1em 2em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.summary table td {
  padding: 1em 2em;
}
/* body.CareSA .step-1 .actions {
    display: none;
} */
body.CareSA div.step-1 div.selection {
    text-align: center;
    margin:0 0 3em
}
body.B4i.welcome div.selection {
    text-align: center;
    margin: 3em 0
}
body.FlySafair .step-1 .selection {
    text-align: center;
    margin: 2em 0 0;
}
body.B4i.intro .selection a,
body.B4i.welcome .selection a,
body.CareSA .step-1 .selection label,
body.FlySafair .step-1 .blocked {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 3px solid var(--orange);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    padding: 0;
    text-decoration: none;
    color: inherit;
    transition: border .23s, background .23s;
}
body.B4i.intro .selection a,
body.B4i.welcome .selection a {
    height: 200px;
}
.esd-target-actual {
    display: none;
}
.esd-target-actual.visible {
    display: block;
}
#quoteModal .modal-body h4 {
    text-align: left;
}
.modal-body a {
    color: var(--orange);
}
.modal .modal-body p em {
    font-style: normal;
    color: var(--light-blue)
}
p.script {
    line-height: 1.1em;
}
body.B4i.business-registration aside {
    display: none;
}
body.B4i.intro .selection a:hover,
body.B4i.welcome .selection a:hover,
body.CareSA div.step-1 div.selection label:hover,
body.CareSA div.step-1 div.selection label.selected {
    border-color: var(--purple);
    background: var(--purple)
}
body.FlySafair .step-1 .blocked:hover,
body.FlySafair .step-1 .blocked.selected {
    border-color: var(--light-blue);
    background: var(--light-blue)
}
body.B4i.intro div.selection a span,
body.B4i.welcome div.selection a span,
body.CareSA div.step-1 div.selection label span,
body.FlySafair .step-1 .blocked span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6em .6em 0;
    transition: background .23s, color .23s;
    text-transform: uppercase;
    line-height: 1.3em;
    text-align: center;
}
body.B4i.intro div.selection a[href="/FlySafair"] span,
body.B4i.welcome div.selection a[href="/FlySafair"] span {
    padding-left: 1em;
    padding-right: 1em;
}
body.B4i.intro div.selection a[href="/B4i/FreeCourse"] span,
body.B4i.welcome div.selection a[href="/B4i/FreeCourse"] span {
    padding-left: 1.5em;
    padding-right: 1.5em;
}
.CareSA div[form-group-validation="Amount"]:last-child input + span + .field-validation-error {
    opacity: 0;
    transition: opacity .23s;
}
.CareSA div[form-group-validation="Amount"]:last-child input.error + span + .field-validation-error {
    opacity: 1;
}
.no-titles h4 {
    display: none;
}
body.B4i div.videos {
    position: relative;
    padding-top: 1em;
}
main section a {
    color: var(--orange);
    text-decoration: none;
}
@media ( min-width: 768px ) {
    body.B4i div.videos {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    body.B4i div.videos.single {
        justify-content: center;
    }
    body.B4i div.video-previews {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
}
body.B4i div.video-previews img {
    display: block;
    width: 100%;
    cursor: pointer;
    
}
body.B4i div.video-previews > div > div {
    position: relative;
    z-index: 1;
}
body.B4i div.video-previews > div > div:after,
body.B4i div.video-previews > div > div:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity .15s;
    cursor: pointer;
}
body.B4i div.video-previews > div > div:before {
    background-image: url(/img/b4i/thumbs/yt-play-icon.png);
    z-index: 2;
}
body.B4i div.video-previews > div > div:after {
    background-image: url(/img/b4i/thumbs/yt-play-overlay.png);
    opacity: 0;
    z-index: 3;
}
body.B4i div.video-previews > div > div:hover:after {
    opacity: 1;
}
body.B4i div.videos > div,
body.B4i div.video-previews > div {
    flex: 0 1 46%;
    position: relative;
    padding-bottom: 4%;
}
@media ( max-width: 767px ) {
    body.B4i div.videos > div, 
    body.B4i div.video-previews > div {
        padding-bottom: 2em;
    }
}
body.B4i.sub-page.welcome form .form {
    text-align: center;
}
body.B4i div.videos > div > div {
    position: relative;
    padding-top: 56.25%;
    margin: 1em 0;
}
body.B4i div.videos > div > div > iframe:before {
    width: 100%;
    height: 56.25%;
    position: relative;
    content: '';
    display: block;
}
body.B4i div.videos > div > div > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
form[action="/CareSA/SaveDonations"] span[data-valmsg-for="AcceptTermsConditions"] {
    padding-top: 0.3em;
    display: block;
}
body.B4i.free-course-videos #app {
    padding: 3em !important
}
body.B4i.free-course-videos .content p {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
body.FlySafair .step-1 .blocked span {
    padding-top: 7em;
}
body.CareSA .step-1 .selection label span strong {
    display: block;
}
body.CareSA .step-1 .selection label input {
    display: none;
}
body.B4i.welcome .selection a[href="/FlySafair"] span {
    background: no-repeat 50% 20% / 37% url(/img/flysafair/icon-credits.svg);
}
body.B4i.welcome .selection a[href="/B4i/FreeCourse"] span {
    background: no-repeat 50% 11% / 40% url(/img/icon-video.svg);
}
body.B4i.welcome .selection a[href="/FlySafair"]:hover span {
    background: no-repeat 50% 20% / 37% url(/img/flysafair/icon-credits-white.svg);
}
body.B4i.welcome .selection a[href="/B4i/FreeCourse"]:hover span {
    background: no-repeat 50% 11% / 40% url(/img/icon-video-white.svg);
}
body.CareSA .step-1 .selection label[for="one"] span {
    background: url(/img/icon-building-orange.svg) 50% 20% no-repeat;
    background-size: 30%;
}
body.CareSA .step-1 .selection label[for="one"]:hover span,
body.CareSA .step-1 .selection label[for="one"].selected span {
    background-image: url(/img/icon-building-white.svg);
}
body.B4i.intro .selection a.blocked.one span,
body.B4i.welcome .selection a.blocked.one span,
body.CareSA .step-1 .selection label[for="two"] span,
body.FlySafair .step-1 .blocked.one span {
    background: url(/img/icon-user-orange.svg) 50% 22% no-repeat;
    background-size: 31%;
}
body.B4i.intro .selection a.blocked span {
    padding-left: 1.9em;
    padding-right: 1.9em;
}
body.B4i.intro .selection a.blocked.two span {
    background: url(/img/icon-learn-orange.svg) 50% 22% no-repeat;
    background-size: 27%;
    
}
body.B4i.intro .selection a.blocked.two:hover span {
    background-image: url(/img/icon-learn-white.svg);
}
body.B4i.intro .selection a.blocked.one:hover span,
body.B4i.welcome .selection a.blocked.one:hover span,
body.CareSA .step-1 .selection label[for="two"]:hover span,
body.CareSA .step-1 .selection label[for="two"].selected span,
body.FlySafair .step-1 .blocked.one.selected span,
body.FlySafair .step-1 .blocked.one:hover span {
    background-image: url(/img/icon-user-white.svg);
}
body.B4i.welcome .selection a.blocked.two span,
body.FlySafair .step-1 .blocked.two span {
    background: url(/img/icon-contributor-orange.svg) 50% 26% no-repeat;
    background-size: 29%;
}
body.B4i.welcome .selection a.blocked.two:hover span,
body.FlySafair .step-1 .blocked.two:hover span,
body.FlySafair .step-1 .blocked.two.selected span {
    background-image: url(/img/icon-contributor-white.svg);
}
body.B4i .selection a:hover span,
body.CareSA .step-1 .selection label input:checked + span,
body.CareSA .step-1 .selection label:hover span,
body.CareSA .step-1 .selection label.selected input + span {
    background-color: var(--purple);
    color: #fff;
}
body.FlySafair .step-1 .blocked:hover span {
    background-color: var(--light-blue);
    color: #fff;
}
a[data-target="#contributorModal"]:not(.blocked) {
    background: no-repeat 0 50%/contain url(/img/icon-contributor-orange.svg);
    padding: 0 0 0 1.8em;
    color: var(--orange);
    float: right;
}
.invite {
    background: no-repeat 0 50%/contain url(/img/icon-contributor-orange.svg);
    padding: 0 0 0 2.4em;
}
.modal .invite {
    font-family: 'Lato Bold', sans-serif;
}
.modal-header .icon.checkmark {
    background: no-repeat 50%/contain url(/img/icon-checkmark-green.svg);
    height: 70px;
    margin: 2em 0 0;
    display: none;
}
.modal #messageSent {
    font-family: Caveat, sans-serif;
    color: var(--orange);
    font-size: 1.6em;
    display: none;
}
.modal.submitted #initial,
.modal.submitted .modal-header h4,
#contributorModal #closeButton,
.modal.submitted .btn-primary {
    display: none !important;
}
.modal.submitted #messageSent,
.modal.submitted .modal-header .icon {
    display: block !important;
}
#contributorModal.submitted #closeButton {
    display: inline-block !important;
}
.modal.submitted .modal-body {
    padding-top: 2em;
    padding-bottom: 3em;
}
.transaction-details {
    display: flex;
    flex-flow: row nowrap;
    padding: 3em 0 1em;
}
.transaction-details > div {
    flex: 1 1 50%;
    position: relative;
}
.transaction-details > div:nth-child(2) {
    padding-left: 3em;
}
.transaction-details > div:nth-child(2):before {
    content: '';
    position: absolute;
    left: -3em;
    top: 0;
    height: 100%;
    border-left: 1px solid var(--field-grey);
}
.transaction-details p {
    margin-bottom: .3em
}
.transaction-details .gross-amount {
    color: var(--orange);
    font-size: 1.4em;
    font-family: 'Lato Bold', sans-serif;
    line-height: 1em;
}
.row:after {
    content: '';
    clear: both;
    display: block;
}
body.FlySafair[data-step="1"] #app .actions.primary button {
    pointer-events: none;
    color: var(--field-grey) !important;
    border-color: var(--field-grey) !important;
}
.CareSA label[for="Amount"] {
    font-size: 1.1em;
    color: var(--purple);
    font-family: 'Lato Bold', sans-serif;
}
.po-number {
    display: none;
}
.minimum-contribution {
    position: absolute;
    opacity: 0;
    transition: opacity .23s;
}
.sector-help {
    padding: 0.8em 0 0;
    opacity: 0;
    transition: opacity .23s;
}
.est-esd-target {
    color: var(--orange);
    font-family: 'Caveat', sans-serif;
    font-size: 2rem;
    margin: 0 0 .4em;
    line-height: .9em;
}
.esd-target-value {
    color: var(--light-blue);
    font-size: 1.5rem;
    font-family: 'Lato Bold', sans-serif;
    padding: 0 0 0.9em;
}
.actual-esd-contribution.row {
    margin-top: 1em;
}
body.pep .todos {
    display: none;
}
.modal .confirmation,
.modal.sent #initial {
    display: none;
}
.modal.sent .confirmation {
    display: block;
}
.modal.sent .btn-primary {
    display: none;
}
.transaction-amount {
    text-align: center;
    padding-top: 3em;
}
.transaction-amount div div {
    color: var(--orange);
    font-size: 2rem;
    line-height: 1em;
    font-family: 'Lato Bold', sans-serif;
    padding-top: 0.2em;
    padding-bottom: 2em;
}
.transaction-amount div div span {
    font-size: 1.5rem;
}
.FlySafair #app.content.step-1 h4 {
    margin-bottom: 1em;
}
.FlySafair #app.content.step-1 ol {
    list-style: none;
    max-width: 440px;
    margin: 0 auto 3em;
    position: relative;
}
.FlySafair #app.content.step-1 ol li {
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
    font-family: 'Lato Bold', sans-serif;
}
.FlySafair #app.content.step-1 ol:before {
    content: '';
    position: absolute;
    left: 11px;
    top: 22px;
    height: calc(100% - 43px);
    border-left: 1px solid var(--light-blue);
}
.FlySafair #app.content.step-1 li:before {
    content: attr(data-content);
    position: absolute;
    left: -40px;
    top: 50%;
    height: 24px;
    font-family: 'Lato Regular', sans-serif;
    width: 24px;
    border-radius: 50%;
    transform: translate(0, -50%);
    color: var(--dark-blue);
    background: var(--light-blue);
    text-align: center;
    padding: 4px 0 0;
    line-height: 1em;
}
.FlySafair form[action*="SaveESDContribution"] .terms.small {
    margin-top: 6em;
}