@charset "UTF-8";
@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.midTopicFont{
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 38px;
    line-height: 48px;
    align-items: center;
    padding-bottom: 5px;
}

.iphoneSize{
    position: relative;
    max-width: 663px;
    max-height: 1353px;
    width: 221px;
    height: auto;
}

.topicFont{
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 56px;
    line-height: 72px;
    align-items: center;
    
}
.featureInfoFont{
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 38px;
    color: #333333;
}
.bottomMore{
    font-size: 24px;
}
.bottomLinkFont{
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
}
.blueBoxFont{
    font-size: 36px;
    line-height: 60px;
}




@media screen and (max-width: 768px) and (min-width: 376px){
    .iphoneSize{
        width: 50%;
    }
}
@media screen and (max-width: 375px){
      .topicFont{
        font-size: 38px;
        line-height: 48px;
    }
    .iphoneSize{
        width: 60%
    }
       .bottomMore{
        font-size: 24px;
    }
    .blueBoxFont{
        font-size: 24px;
        line-height: 36px;
    }
   
}







.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}

.columns.is-mobile > .column.is-narrow {
    flex: none;
}

.columns.is-mobile > .column.is-full {
    flex: none;
    width: 100%;
}

.columns.is-mobile > .column.is-three-quarters {
    flex: none;
    width: 75%;
}

.columns.is-mobile > .column.is-two-thirds {
    flex: none;
    width: 66.6666%;
}

.columns.is-mobile > .column.is-half {
    flex: none;
    width: 50%;
}

.columns.is-mobile > .column.is-one-third {
    flex: none;
    width: 33.3333%;
}

.columns.is-mobile > .column.is-one-quarter {
    flex: none;
    width: 25%;
}

.columns.is-mobile > .column.is-one-fifth {
    flex: none;
    width: 20%;
}

.columns.is-mobile > .column.is-two-fifths {
    flex: none;
    width: 40%;
}

.columns.is-mobile > .column.is-three-fifths {
    flex: none;
    width: 60%;
}

.columns.is-mobile > .column.is-four-fifths {
    flex: none;
    width: 80%;
}

.columns.is-mobile > .column.is-offset-three-quarters {
    margin-left: 75%;
}

.columns.is-mobile > .column.is-offset-two-thirds {
    margin-left: 66.6666%;
}

.columns.is-mobile > .column.is-offset-half {
    margin-left: 50%;
}

.columns.is-mobile > .column.is-offset-one-third {
    margin-left: 33.3333%;
}

.columns.is-mobile > .column.is-offset-one-quarter {
    margin-left: 25%;
}

.columns.is-mobile > .column.is-offset-one-fifth {
    margin-left: 20%;
}

.columns.is-mobile > .column.is-offset-two-fifths {
    margin-left: 40%;
}

.columns.is-mobile > .column.is-offset-three-fifths {
    margin-left: 60%;
}

.columns.is-mobile > .column.is-offset-four-fifths {
    margin-left: 80%;
}

.columns.is-mobile > .column.is-1 {
    flex: none;
    width: 8.3333333333%;
}

.columns.is-mobile > .column.is-offset-1 {
    margin-left: 8.3333333333%;
}

.columns.is-mobile > .column.is-2 {
    flex: none;
    width: 16.6666666667%;
}

.columns.is-mobile > .column.is-offset-2 {
    margin-left: 16.6666666667%;
}

.columns.is-mobile > .column.is-3 {
    flex: none;
    width: 25%;
}

.columns.is-mobile > .column.is-offset-3 {
    margin-left: 25%;
}

.columns.is-mobile > .column.is-4 {
    flex: none;
    width: 33.3333333333%;
}

.columns.is-mobile > .column.is-offset-4 {
    margin-left: 33.3333333333%;
}

.columns.is-mobile > .column.is-5 {
    flex: none;
    width: 41.6666666667%;
}

.columns.is-mobile > .column.is-offset-5 {
    margin-left: 41.6666666667%;
}

.columns.is-mobile > .column.is-6 {
    flex: none;
    width: 50%;
}

.columns.is-mobile > .column.is-offset-6 {
    margin-left: 50%;
}

.columns.is-mobile > .column.is-7 {
    flex: none;
    width: 58.3333333333%;
}

.columns.is-mobile > .column.is-offset-7 {
    margin-left: 58.3333333333%;
}

.columns.is-mobile > .column.is-8 {
    flex: none;
    width: 66.6666666667%;
}

.columns.is-mobile > .column.is-offset-8 {
    margin-left: 66.6666666667%;
}

.columns.is-mobile > .column.is-9 {
    flex: none;
    width: 75%;
}

.columns.is-mobile > .column.is-offset-9 {
    margin-left: 75%;
}

.columns.is-mobile > .column.is-10 {
    flex: none;
    width: 83.3333333333%;
}

.columns.is-mobile > .column.is-offset-10 {
    margin-left: 83.3333333333%;
}

.columns.is-mobile > .column.is-11 {
    flex: none;
    width: 91.6666666667%;
}

.columns.is-mobile > .column.is-offset-11 {
    margin-left: 91.6666666667%;
}

.columns.is-mobile > .column.is-12 {
    flex: none;
    width: 100%;
}

.columns.is-mobile > .column.is-offset-12 {
    margin-left: 100%;
}

@media screen and (max-width: 768px) {
    .column.is-narrow-mobile {
        flex: none;
    }

    .column.is-full-mobile {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-mobile {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-mobile {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-mobile {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-mobile {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-mobile {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-mobile {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-mobile {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-mobile {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-mobile {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-mobile {
        margin-left: 75%;
    }

    .column.is-offset-two-thirds-mobile {
        margin-left: 66.6666%;
    }

    .column.is-offset-half-mobile {
        margin-left: 50%;
    }

    .column.is-offset-one-third-mobile {
        margin-left: 33.3333%;
    }

    .column.is-offset-one-quarter-mobile {
        margin-left: 25%;
    }

    .column.is-offset-one-fifth-mobile {
        margin-left: 20%;
    }

    .column.is-offset-two-fifths-mobile {
        margin-left: 40%;
    }

    .column.is-offset-three-fifths-mobile {
        margin-left: 60%;
    }

    .column.is-offset-four-fifths-mobile {
        margin-left: 80%;
    }

    .column.is-1-mobile {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-mobile {
        margin-left: 8.3333333333%;
    }

    .column.is-2-mobile {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-mobile {
        margin-left: 16.6666666667%;
    }

    .column.is-3-mobile {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-mobile {
        margin-left: 25%;
    }

    .column.is-4-mobile {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-mobile {
        margin-left: 33.3333333333%;
    }

    .column.is-5-mobile {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-mobile {
        margin-left: 41.6666666667%;
    }

    .column.is-6-mobile {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-mobile {
        margin-left: 50%;
    }

    .column.is-7-mobile {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-mobile {
        margin-left: 58.3333333333%;
    }

    .column.is-8-mobile {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-mobile {
        margin-left: 66.6666666667%;
    }

    .column.is-9-mobile {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-mobile {
        margin-left: 75%;
    }

    .column.is-10-mobile {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-mobile {
        margin-left: 83.3333333333%;
    }

    .column.is-11-mobile {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-mobile {
        margin-left: 91.6666666667%;
    }

    .column.is-12-mobile {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-mobile {
        margin-left: 100%;
    }
}

@media screen and (min-width: 769px),
print {

    .column.is-narrow,
    .column.is-narrow-tablet {
        flex: none;
    }

    .column.is-full,
    .column.is-full-tablet {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters,
    .column.is-three-quarters-tablet {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds,
    .column.is-two-thirds-tablet {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half,
    .column.is-half-tablet {
        flex: none;
        width: 50%;
    }

    .column.is-one-third,
    .column.is-one-third-tablet {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter,
    .column.is-one-quarter-tablet {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth,
    .column.is-one-fifth-tablet {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths,
    .column.is-two-fifths-tablet {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths,
    .column.is-three-fifths-tablet {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths,
    .column.is-four-fifths-tablet {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters,
    .column.is-offset-three-quarters-tablet {
        margin-left: 75%;
    }

    .column.is-offset-two-thirds,
    .column.is-offset-two-thirds-tablet {
        margin-left: 66.6666%;
    }

    .column.is-offset-half,
    .column.is-offset-half-tablet {
        margin-left: 50%;
    }

    .column.is-offset-one-third,
    .column.is-offset-one-third-tablet {
        margin-left: 33.3333%;
    }

    .column.is-offset-one-quarter,
    .column.is-offset-one-quarter-tablet {
        margin-left: 25%;
    }

    .column.is-offset-one-fifth,
    .column.is-offset-one-fifth-tablet {
        margin-left: 20%;
    }

    .column.is-offset-two-fifths,
    .column.is-offset-two-fifths-tablet {
        margin-left: 40%;
    }

    .column.is-offset-three-fifths,
    .column.is-offset-three-fifths-tablet {
        margin-left: 60%;
    }

    .column.is-offset-four-fifths,
    .column.is-offset-four-fifths-tablet {
        margin-left: 80%;
    }

    .column.is-1,
    .column.is-1-tablet {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1,
    .column.is-offset-1-tablet {
        margin-left: 8.3333333333%;
    }

    .column.is-2,
    .column.is-2-tablet {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2,
    .column.is-offset-2-tablet {
        margin-left: 16.6666666667%;
    }

    .column.is-3,
    .column.is-3-tablet {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3,
    .column.is-offset-3-tablet {
        margin-left: 25%;
    }

    .column.is-4,
    .column.is-4-tablet {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4,
    .column.is-offset-4-tablet {
        margin-left: 33.3333333333%;
    }

    .column.is-5,
    .column.is-5-tablet {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5,
    .column.is-offset-5-tablet {
        margin-left: 41.6666666667%;
    }

    .column.is-6,
    .column.is-6-tablet {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6,
    .column.is-offset-6-tablet {
        margin-left: 50%;
    }

    .column.is-7,
    .column.is-7-tablet {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7,
    .column.is-offset-7-tablet {
        margin-left: 58.3333333333%;
    }

    .column.is-8,
    .column.is-8-tablet {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8,
    .column.is-offset-8-tablet {
        margin-left: 66.6666666667%;
    }

    .column.is-9,
    .column.is-9-tablet {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9,
    .column.is-offset-9-tablet {
        margin-left: 75%;
    }

    .column.is-10,
    .column.is-10-tablet {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10,
    .column.is-offset-10-tablet {
        margin-left: 83.3333333333%;
    }

    .column.is-11,
    .column.is-11-tablet {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11,
    .column.is-offset-11-tablet {
        margin-left: 91.6666666667%;
    }

    .column.is-12,
    .column.is-12-tablet {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12,
    .column.is-offset-12-tablet {
        margin-left: 100%;
    }
}

@media screen and (max-width: 1087px) {
    .column.is-narrow-touch {
        flex: none;
    }

    .column.is-full-touch {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-touch {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-touch {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-touch {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-touch {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-touch {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-touch {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-touch {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-touch {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-touch {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-touch {
        margin-left: 75%;
    }

    .column.is-offset-two-thirds-touch {
        margin-left: 66.6666%;
    }

    .column.is-offset-half-touch {
        margin-left: 50%;
    }

    .column.is-offset-one-third-touch {
        margin-left: 33.3333%;
    }

    .column.is-offset-one-quarter-touch {
        margin-left: 25%;
    }

    .column.is-offset-one-fifth-touch {
        margin-left: 20%;
    }

    .column.is-offset-two-fifths-touch {
        margin-left: 40%;
    }

    .column.is-offset-three-fifths-touch {
        margin-left: 60%;
    }

    .column.is-offset-four-fifths-touch {
        margin-left: 80%;
    }

    .column.is-1-touch {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-touch {
        margin-left: 8.3333333333%;
    }

    .column.is-2-touch {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-touch {
        margin-left: 16.6666666667%;
    }

    .column.is-3-touch {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-touch {
        margin-left: 25%;
    }

    .column.is-4-touch {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-touch {
        margin-left: 33.3333333333%;
    }

    .column.is-5-touch {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-touch {
        margin-left: 41.6666666667%;
    }

    .column.is-6-touch {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-touch {
        margin-left: 50%;
    }

    .column.is-7-touch {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-touch {
        margin-left: 58.3333333333%;
    }

    .column.is-8-touch {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-touch {
        margin-left: 66.6666666667%;
    }

    .column.is-9-touch {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-touch {
        margin-left: 75%;
    }

    .column.is-10-touch {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-touch {
        margin-left: 83.3333333333%;
    }

    .column.is-11-touch {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-touch {
        margin-left: 91.6666666667%;
    }

    .column.is-12-touch {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-touch {
        margin-left: 100%;
    }
}

@media screen and (min-width: 1088px) {
    .column.is-narrow-desktop {
        flex: none;
    }

    .column.is-full-desktop {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-desktop {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-desktop {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-desktop {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-desktop {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-desktop {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-desktop {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-desktop {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-desktop {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-desktop {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-desktop {
        margin-left: 75%;
    }

    .column.is-offset-two-thirds-desktop {
        margin-left: 66.6666%;
    }

    .column.is-offset-half-desktop {
        margin-left: 50%;
    }

    .column.is-offset-one-third-desktop {
        margin-left: 33.3333%;
    }

    .column.is-offset-one-quarter-desktop {
        margin-left: 25%;
    }

    .column.is-offset-one-fifth-desktop {
        margin-left: 20%;
    }

    .column.is-offset-two-fifths-desktop {
        margin-left: 40%;
    }

    .column.is-offset-three-fifths-desktop {
        margin-left: 60%;
    }

    .column.is-offset-four-fifths-desktop {
        margin-left: 80%;
    }

    .column.is-1-desktop {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-desktop {
        margin-left: 8.3333333333%;
    }

    .column.is-2-desktop {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-desktop {
        margin-left: 16.6666666667%;
    }

    .column.is-3-desktop {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-desktop {
        margin-left: 25%;
    }

    .column.is-4-desktop {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-desktop {
        margin-left: 33.3333333333%;
    }

    .column.is-5-desktop {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-desktop {
        margin-left: 41.6666666667%;
    }

    .column.is-6-desktop {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-desktop {
        margin-left: 50%;
    }

    .column.is-7-desktop {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-desktop {
        margin-left: 58.3333333333%;
    }

    .column.is-8-desktop {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-desktop {
        margin-left: 66.6666666667%;
    }

    .column.is-9-desktop {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-desktop {
        margin-left: 75%;
    }

    .column.is-10-desktop {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-desktop {
        margin-left: 83.3333333333%;
    }

    .column.is-11-desktop {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-desktop {
        margin-left: 91.6666666667%;
    }

    .column.is-12-desktop {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-desktop {
        margin-left: 100%;
    }
}

@media screen and (min-width: 1280px) {
    .column.is-narrow-widescreen {
        flex: none;
    }

    .column.is-full-widescreen {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-widescreen {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-widescreen {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-widescreen {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-widescreen {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-widescreen {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-widescreen {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-widescreen {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-widescreen {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-widescreen {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-widescreen {
        margin-left: 75%;
    }

    .column.is-offset-two-thirds-widescreen {
        margin-left: 66.6666%;
    }

    .column.is-offset-half-widescreen {
        margin-left: 50%;
    }

    .column.is-offset-one-third-widescreen {
        margin-left: 33.3333%;
    }

    .column.is-offset-one-quarter-widescreen {
        margin-left: 25%;
    }

    .column.is-offset-one-fifth-widescreen {
        margin-left: 20%;
    }

    .column.is-offset-two-fifths-widescreen {
        margin-left: 40%;
    }

    .column.is-offset-three-fifths-widescreen {
        margin-left: 60%;
    }

    .column.is-offset-four-fifths-widescreen {
        margin-left: 80%;
    }

    .column.is-1-widescreen {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-widescreen {
        margin-left: 8.3333333333%;
    }

    .column.is-2-widescreen {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-widescreen {
        margin-left: 16.6666666667%;
    }

    .column.is-3-widescreen {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-widescreen {
        margin-left: 25%;
    }

    .column.is-4-widescreen {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-widescreen {
        margin-left: 33.3333333333%;
    }

    .column.is-5-widescreen {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-widescreen {
        margin-left: 41.6666666667%;
    }

    .column.is-6-widescreen {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-widescreen {
        margin-left: 50%;
    }

    .column.is-7-widescreen {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-widescreen {
        margin-left: 58.3333333333%;
    }

    .column.is-8-widescreen {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-widescreen {
        margin-left: 66.6666666667%;
    }

    .column.is-9-widescreen {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-widescreen {
        margin-left: 75%;
    }

    .column.is-10-widescreen {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-widescreen {
        margin-left: 83.3333333333%;
    }

    .column.is-11-widescreen {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-widescreen {
        margin-left: 91.6666666667%;
    }

    .column.is-12-widescreen {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-widescreen {
        margin-left: 100%;
    }
}

@media screen and (min-width: 1472px) {
    .column.is-narrow-fullhd {
        flex: none;
    }

    .column.is-full-fullhd {
        flex: none;
        width: 100%;
    }

    .column.is-three-quarters-fullhd {
        flex: none;
        width: 75%;
    }

    .column.is-two-thirds-fullhd {
        flex: none;
        width: 66.6666%;
    }

    .column.is-half-fullhd {
        flex: none;
        width: 50%;
    }

    .column.is-one-third-fullhd {
        flex: none;
        width: 33.3333%;
    }

    .column.is-one-quarter-fullhd {
        flex: none;
        width: 25%;
    }

    .column.is-one-fifth-fullhd {
        flex: none;
        width: 20%;
    }

    .column.is-two-fifths-fullhd {
        flex: none;
        width: 40%;
    }

    .column.is-three-fifths-fullhd {
        flex: none;
        width: 60%;
    }

    .column.is-four-fifths-fullhd {
        flex: none;
        width: 80%;
    }

    .column.is-offset-three-quarters-fullhd {
        margin-left: 75%;
    }

    .column.is-offset-two-thirds-fullhd {
        margin-left: 66.6666%;
    }

    .column.is-offset-half-fullhd {
        margin-left: 50%;
    }

    .column.is-offset-one-third-fullhd {
        margin-left: 33.3333%;
    }

    .column.is-offset-one-quarter-fullhd {
        margin-left: 25%;
    }

    .column.is-offset-one-fifth-fullhd {
        margin-left: 20%;
    }

    .column.is-offset-two-fifths-fullhd {
        margin-left: 40%;
    }

    .column.is-offset-three-fifths-fullhd {
        margin-left: 60%;
    }

    .column.is-offset-four-fifths-fullhd {
        margin-left: 80%;
    }

    .column.is-1-fullhd {
        flex: none;
        width: 8.3333333333%;
    }

    .column.is-offset-1-fullhd {
        margin-left: 8.3333333333%;
    }

    .column.is-2-fullhd {
        flex: none;
        width: 16.6666666667%;
    }

    .column.is-offset-2-fullhd {
        margin-left: 16.6666666667%;
    }

    .column.is-3-fullhd {
        flex: none;
        width: 25%;
    }

    .column.is-offset-3-fullhd {
        margin-left: 25%;
    }

    .column.is-4-fullhd {
        flex: none;
        width: 33.3333333333%;
    }

    .column.is-offset-4-fullhd {
        margin-left: 33.3333333333%;
    }

    .column.is-5-fullhd {
        flex: none;
        width: 41.6666666667%;
    }

    .column.is-offset-5-fullhd {
        margin-left: 41.6666666667%;
    }

    .column.is-6-fullhd {
        flex: none;
        width: 50%;
    }

    .column.is-offset-6-fullhd {
        margin-left: 50%;
    }

    .column.is-7-fullhd {
        flex: none;
        width: 58.3333333333%;
    }

    .column.is-offset-7-fullhd {
        margin-left: 58.3333333333%;
    }

    .column.is-8-fullhd {
        flex: none;
        width: 66.6666666667%;
    }

    .column.is-offset-8-fullhd {
        margin-left: 66.6666666667%;
    }

    .column.is-9-fullhd {
        flex: none;
        width: 75%;
    }

    .column.is-offset-9-fullhd {
        margin-left: 75%;
    }

    .column.is-10-fullhd {
        flex: none;
        width: 83.3333333333%;
    }

    .column.is-offset-10-fullhd {
        margin-left: 83.3333333333%;
    }

    .column.is-11-fullhd {
        flex: none;
        width: 91.6666666667%;
    }

    .column.is-offset-11-fullhd {
        margin-left: 91.6666666667%;
    }

    .column.is-12-fullhd {
        flex: none;
        width: 100%;
    }

    .column.is-offset-12-fullhd {
        margin-left: 100%;
    }
}

.columns {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}

.columns:last-child {
    margin-bottom: -0.75rem;
}

.columns:not(:last-child) {
    margin-bottom: calc(1.5rem - 0.75rem);
}

.columns.is-centered {
    justify-content: center;
}

.columns.is-gapless {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.columns.is-gapless > .column {
    margin: 0;
    padding: 0 !important;
}

.columns.is-gapless:not(:last-child) {
    margin-bottom: 1.5rem;
}

.columns.is-gapless:last-child {
    margin-bottom: 0;
}

.columns.is-mobile {
    display: flex;
}

.columns.is-multiline {
    flex-wrap: wrap;
}

.columns.is-vcentered {
    align-items: center;
}

@media screen and (min-width: 769px),
print {
    .columns:not(.is-desktop) {
        display: flex;
    }
}

@media screen and (min-width: 1088px) {
    .columns.is-desktop {
        display: flex;
    }
}

.columns.is-variable {
    --columnGap: 0.75rem;
    margin-left: calc(-1 * var(--columnGap));
    margin-right: calc(-1 * var(--columnGap));
}

.columns.is-variable .column {
    padding-left: var(--columnGap);
    padding-right: var(--columnGap);
}

.columns.is-variable.is-0 {
    --columnGap: 0rem;
}

.columns.is-variable.is-1 {
    --columnGap: 0.25rem;
}

.columns.is-variable.is-2 {
    --columnGap: 0.5rem;
}

.columns.is-variable.is-3 {
    --columnGap: 0.75rem;
}

.columns.is-variable.is-4 {
    --columnGap: 1rem;
}

.columns.is-variable.is-5 {
    --columnGap: 1.25rem;
}

.columns.is-variable.is-6 {
    --columnGap: 1.5rem;
}

.columns.is-variable.is-7 {
    --columnGap: 1.75rem;
}

.columns.is-variable.is-8 {
    --columnGap: 2rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.fade-in {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

.fade-out {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-name: fadeOutDown;
}

html.sr .load-hidden {
    visibility: hidden;
}

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=range]::-moz-focus-outer {
    border: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: relative;
}

@media only screen and (min-width: 666px) and (-webkit-min-device-pixel-ratio: 1) {
    img {
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
    }
}

a img {
    border: none;
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
}

img,
embed,
object,
video,
iframe {
    max-width: 100%;
    border: none;
}

::-moz-selection {
    background: #A3BECC;
    color: #143647;
    text-shadow: none;
}

::selection {
    background: #A3BECC;
    color: #143647;
    text-shadow: none;
}

html {
    color: #6E8B99;
    background: #fff;
    overflow-x: hidden;
}

a {
    color: #5CBBFF;
    text-decoration: none;
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
}

a:hover {
    color: #2979FF;
}

a:hover img {
    opacity: .7;
    transform: scale(0.98);
}

a:focus {
    outline: none;
}

a.link--blue {
    color: #0037FF;
}

a.link--blue:hover {
    color: #002CCC;
}

a.link--green {
    color: #00B395;
}

a.link--green:hover {
    color: #00806A;
}

.no-link-styling {
    color: #6E8B99;
}

hr {
    border: 1px solid #CEE1EB;
}

@font-face {
    font-family: "Calibre-Regular";
    font-weight: 500;
    src: url("/assets/fonts/three/CalibreWeb-Regular.woff2") format("woff2"), url("/assets/fonts/three/CalibreWeb-Regular.woff") format("woff");
}

@font-face {
    font-family: "Calibre-Semibold";
    font-weight: 600;
    src: url("/assets/fonts/three/CalibreWeb-Semibold.woff2") format("woff2"), url("/assets/fonts/three/CalibreWeb-Semibold.woff") format("woff");
}

@font-face {
    font-family: "Calibre-Bold";
    font-weight: 700;
    src: url("/assets/fonts/three/CalibreWeb-Bold.woff2") format("woff2"), url("/assets/fonts/three/CalibreWeb-Bold.woff") format("woff");
}

body {
    font-family: "Calibre-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.25;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
.text--h1 {
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 24px;
    color: #143647;
    z-index: 1;
    position: relative;
}

h2,
.text--h2 {
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 3rem;
    font-weight: 900;
    
    margin-bottom: 12px;
    color: #143647;
}

h3,
.text--h3 {
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.125em;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 8px;
    color: #143647;
}

h4 {
    font-size: 2.25em;
    color: #143647;
    font-family: "Calibre-Semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
}

a {
    font-family: "Calibre-Semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
}

li,
pre,
p {
    margin-bottom: 12px;
}

p {
    line-height: 1.25;
    margin-bottom: 24px;
}

ul,
ol {
    margin-left: 1em;
}

ol > li {
    counter-increment: item;
}

ol > li:first-child {
    counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

sup,
sub {
    vertical-align: baseline;
    position: relative;
    top: -0.2em;
}

sub {
    top: 0.2em;
}

strong,
b,
.text--bold {
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
}

strong {
    color: #143647;
}

.text--boldest,
.slider-number,
.slider-number .slider-number__input {
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    color: #355666;
}

.text--boldest--white {
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    color: #fff;
}

.text--uppercase {
    text-transform: uppercase;
}

.text--smallest {
    font-size: .625em;
}

.text--smaller {
    font-size: .875em;
}

.text--big,
.text--subheading {
    font-size: 1em;
    line-height: 1.4em;
}

.text--bigger {
    font-size: 1.375rem;
    line-height: 1.5rem;
}

.text--biggest {
    font-size: 1.5em;
    line-height: 1.6em;
}

.text--centre,
.text--center {
    text-align: center;
}

.text--right {
    text-align: right;
}

.text--left {
    text-align: left;
}

.text--darker {
    color: #355666;
}

.text--no-line-height {
    line-height: 1;
}

.text--white {
    color: #fff;
}

@media screen and (max-width: 768px) {

    h1,
    .text--h2,
    h2.heading {
        font-size: 2.75rem;
        line-height: 1;
        margin-bottom: 12px;
    }

    h2,
    .text--h2 {
        font-size: 2.25em;
        line-height: 1.2;
        letter-spacing: -0.015em;
    }

    h4 {
        font-size: 1.5em;
        line-height: 1.3;
    }

    .text--bigger {
        font-size: 1.125em;
    }

    .text--bigger + .text--bigger {
        margin-top: 12px;
    }

    .text-center-on-mobile,
    .text-centre-on-mobile {
        text-align: center;
    }

    .text-left-on-mobile {
        text-align: left;
    }
}

.button {
    font-family: "Calibre-Semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    display: inline-block;
    line-height: 1;
    text-align: center;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    color: #fff !important;
    border-radius: 12px;
    letter-spacing: -0.02em;
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
}

.button:active {
    opacity: .7;
}
.not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
}


@media screen and (max-width: 768px) {
    .button {
        width: 100%;
        min-width: 100%;
    }
}

.button.button--signup {
    background-repeat: no-repeat;
    background-position: center;
    height: 62px;
    text-indent: -9999px;
    width: 188px;
}

.button.button--signup.android-ab-test {
    width: 154px;
}

.button.button--messenger {
    background-image: url("/assets/images/three/buttons/btn_messenger.svg");
    background-color: #0037FF;
    background-size: 105%;
    margin-right: 3px;
}

.button.button--messenger:hover {
    background-color: #002CCC;
}

@media screen and (max-width: 768px) {
    .button.button--messenger {
        margin-right: 0;
        margin-bottom: 8px;
        background-size: inherit;
    }
}

.button.button--appstore {
    background-image: url("/assets/images/buttons/btn_appstore.svg");
    background-color: #000;
    background-size: 105%;
    margin-right: 3px;
}

.button.button--appstore:hover {
    opacity: 0.9;
}

@media screen and (max-width: 768px) {
    .button.button--appstore {
        margin-right: 0;
        margin-bottom: 8px;
        background-size: inherit;
    }
}

.button.button--playstore {
    background-image: url("/assets/images/buttons/btn_playstore.svg");
    background-color: #000;
    background-size: 88%;
    display: inline-block;
}

.button.button--playstore:hover {
    opacity: 0.9;
}

@media screen and (max-width: 768px) {
    .button.button--playstore {
        margin-right: 0;
        background-size: inherit;
    }
}

.button.button--nav {
    min-width: 0;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
}

@media screen and (max-width: 768px) {
    .button.button--nav {
        padding: 24px;
        margin-top: 24px;
        border-radius: 12px;
        font-size: .875rem;
    }
}

.button.button--has-icon {
    padding-right: 60px;
    position: relative;
}

.button.button--has-icon:after {
    content: '';
    min-width: 32px;
    position: absolute;
    height: 100%;
    top: 0;
    padding-left: 6px;
}

.button.button--has-icon.button--icon-messenger-white:after {
    background: url("/assets/images/three/icons/messenger-white.svg") no-repeat 100% 50%;
}

.button.button--has-icon.button--small {
    padding-right: 42px;
}

.button.button--has-icon.button--small:after {
    background-position: 50% 50%;
    background-size: 50% !important;
}

.button--blue {
    background: #0037FF;
    color: #fff;
}

.button--blue:hover {
    background: #002CCC;
}

.btn {
    cursor: pointer;
    border-radius: 8px;
    display: inline-block;
    font-size: 1rem;
    font-family: "CalibreSemibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 600;
    line-height: 1.5;
    padding: 8px 24px;
    text-align: center;
    text-decoration: none !important;
    transition: opacity 0.1s ease-in;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out, box-shadow .1s ease-in-out;
}

.btn-brand {
    color: #ffffff !important;
    background-color: #5CBBFF;
    border: 1px solid #5CBBFF;
}

.btn-brand-reverse {
    color: #5f0aff !important;
    background-color: #ffffff;
    border: 1px solid #5CBBFF;
}

.btn-brand:hover {
    color: #fff;
    background-color: #4D08CC;
    border-color: #4D08CC;
}

.btn-brand:active {
    color: #fff;
    background-color: #3A0699;
    border-color: #3A0699;
}

.btn-brand:focus {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(95, 10, 255, 0.2);
}

.btn-block {
    width: 100%;
    display: block;
}

.circular-icon {
    border-radius: 100%;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
}

.circular-icon--text {
    background: #fff;
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-size: 1.5em;
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: #355666;
}

.circular-icon--investments {
    background: url("/assets/images/three/icons/ic_investments.svg") no-repeat 50% 50%, #00B395;
}

.circular-icon--savings {
    background: url("/assets/images/three/icons/ic_savings.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--insights {
    background: url("/assets/images/three/icons/ic_insights.svg") no-repeat 50% 50%, #5CBBFF;
}

.circular-icon--mse {
    background: url("/assets/images/three/logos/mse_white.svg") no-repeat 50% 50%, #CA182B;
    background-size: inherit !important;
}

.circular-icon--FCA {
    background: url("/assets/images/three/icons/FCA.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--lock {
    background: url("/assets/images/three/icons/ic_lock.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--shield {
    background: url("/assets/images/three/icons/ic_shield.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--chat {
    background: url("/assets/images/three/icons/ic_chat.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--checkmark {
    background: url("/assets/images/three/icons/checkmark.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--privacy {
    background: url("/assets/images/three/icons/privacy.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--messenger {
    background: url("/assets/images/three/icons/messenger-colour-small@2x.png") no-repeat 50% 52%, #fff;
    background-size: 24px 24px;
}

.circular-icon--messenger-small {
    background: url("/assets/images/three/icons/messenger-white.svg") no-repeat 50% 50%, #0037FF;
    background-size: 20px !important;
}

.circular-icon--security {
    background: url("/assets/images/three/icons/security.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--ICO {
    background: url("/assets/images/three/icons/ICO.svg") no-repeat 50% 50%, #fff;
}

.circular-icon--percent {
    background: url("/assets/images/three/icons/ic_percent.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--2k {
    background: url("/assets/images/three/icons/ic_2k.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--pound {
    background: url("/assets/images/three/icons/ic_pound.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--glasses {
    background: url("/assets/images/three/icons/ic_glasses.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--round-ups {
    background: url("/assets/images/three/icons/ic_roundups.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--fifty-two {
    background: url("/assets/images/three/icons/ic_fifty_two.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--umbrella {
    background: url("/assets/images/three/icons/ic_umbrella.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--calendar {
    background: url("/assets/images/three/icons/ic_calendar.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--swag {
    background: url("/assets/images/three/icons/ic_swag.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--users {
    background: url("/assets/images/three/icons/ic_users.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--reviews {
    background: url("/assets/images/three/icons/ic_reviews.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--newspaper {
    background: url("/assets/images/three/icons/ic_newspaper.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--bubble {
    background: url("/assets/images/three/icons/ic_bubble.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--poundbis {
    background: url("/assets/images/three/icons/ic_poundbis.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--monetise {
    background: url("/assets/images/three/icons/ic_monetise.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--instant-access {
    background: url("/assets/images/three/icons/ic_instant_access.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--easy--access {
    background: url("/assets/images/three/icons/ic_easy_access.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--95days--access {
    background: url("/assets/images/three/icons/ic_95days_account.svg") no-repeat 50% 50%, #0037FF;
}

.circular-icon--mini {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-size: 20px;
    vertical-align: -35%;
}

.circular-icon--small {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-size: 24px;
    vertical-align: -32%;
}

.circular-icon--medium {
    width: 48px;
    height: 48px;
    padding-top: 12px;
    vertical-align: 0;
}

.circular-icon--big {
    width: 56px;
    height: 56px;
    line-height: 60px;
}

.circular-icon--bigger {
    width: 64px;
    height: 64px;
}

.circular-icon--biggest {
    width: 80px;
    height: 80px;
}

.circular-icon--blue {
    background-color: #B2C3FF;
    color: #0037FF;
}

.circular-icon--green {
    background-color: #BAF5EB;
    color: #00B395;
}

.circular-icon--purple {
    background-color: #CFB5FF;
    color: #5F0AFF;
}

.icon--messenger-colour {
    position: relative;
}

.icon--messenger-colour:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: -12px;
    right: -48px;
    width: 32px;
    height: 32px;
    background: url("/assets/images/three/icons/messenger-colour@2x.png") no-repeat;
    background-size: 100%;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.retina-img {
    zoom: 50%;
}

.z-index--1000 {
    z-index: 1000;
    position: relative;
}

.no-link-styling {
    color: #6E8B99;
}

.no-link-styling:hover {
    color: #0037FF;
}

.horizontal-centre,
.horizontal-center {
    margin-left: auto;
    margin-right: auto;
}

.no-list-styling {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.no-margin {
    margin: 0;
    padding: 0;
}

.hide-on-desktop {
    display: none;
}

.hide-on-mobile {
    display: none;
}

.border-bottom {
    border-bottom: solid 1px #143647;
}

.border-top {
    border-top: solid 1px #143647;
}

.no-tap-highlight {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.feature-title {
    font-family: "Calibre-Semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25em;
    letter-spacing: -0.03em;
    margin-bottom: 32px;
}

.feature-title i {
    margin-right: 6px;
    vertical-align: -8px;
}

.feature-title--savings {
    color: #0037FF;
}

.feature-title--investments {
    color: #00B395;
}

.feature-title--insights {
    color: #5F0AFF;
}

.feature-title--mse {
    color: #CA182B;
}

.trust-symbols {
    margin-top: 24px;
}

.trust-symbols .facebook-reviews {
    display: block;
    font-family: "Calibre-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #6E8B99;
}

.trust-symbols .facebook-reviews img {
    width: 14px;
}

.trust-symbols .facebook-reviews .rating {
    color: #143647;
    font-family: "Calibre-Semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin-left: 4px;
}

.pricing-features {
    height: 48px;
    display: flex;
    align-items: center;
}

.pricing-features i {
    margin-right: 5px;
}

.pricing-features .pricing-plus {
    width: 30px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    font-size: 1.5em;
}

.has-plus-pro-badges {
    zoom: 95%;
    position: relative;
    right: -8px;
    top: 3px;
}

.has-new-badge,
.has-coming-soon-badge,
.has-rolling-out-badge {
    position: relative;
    display: inline-block;
}

.has-new-badge:after,
.has-coming-soon-badge:after,
.has-rolling-out-badge:after {
    content: 'New';
    color: #fff;
    font-size: 10px;
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-style: normal;
    height: 18px;
    line-height: 20px;
    width: 30px;
    display: block;
    background: #143647;
    border-radius: 4px;
    text-align: center;
    position: absolute;
    top: -0.48px;
    right: -0.48px;
}

@media screen and (max-width: 768px) {

    .has-new-badge:after,
    .has-coming-soon-badge:after,
    .has-rolling-out-badge:after {
        top: -0.48px;
    }
}

.has-coming-soon-badge:after {
    content: 'Coming soon';
    width: 64px;
    right: -52px;
}

.has-rolling-out-badge:after {
    content: 'Rolling out';
    width: 54px;
    right: -38px;
}

.average-return {
    float: left;
}

.average-return .average-return__percentage {
    font-size: 1.1 em;
    color: #fff;
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.average-return:after {
    content: 'Avg. annual return';
    font-size: .6em;
    display: block;
    padding-top: 6px;
    margin-right: -24px;
    color: #fff;
}

.risk-level-pepper {
    float: right;
}

.risk-level-pepper > span {
    display: block;
}

.risk-level-pepper > span:before {
    content: attr(data-level);
    text-align: right;
    font-size: 1.0em;
    opacity: 25%;
}

.risk-level-pepper > span:after {
    content: 'Risk level';
    text-align: right;
    width: 140px;
    font-size: .6em;
    display: block;
    padding-top: 4px;
    color: #fff;
}

.risk-level {
    float: right;
    margin-left: 24px;
    margin-top: 9px;
    background-color: #fff;
    border-radius: 8px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 2px, transparent 1px);
    background-size: 18px;
}

.risk-level > span {
    background-color: #00B395;
    display: block;
    height: 8px;
    border-radius: 8px;
    position: relative;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 2px, transparent 1px);
    background-size: 18px;
    background-position: -2px;
}

.risk-level > span:before {
    content: attr(data-level);
    font-family: "Calibre-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .875em;
    position: absolute;
    right: -13px;
    top: -9px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: #006655;
    border-radius: 50%;
}

.risk-level > span:after {
    content: 'Risk level';
    width: 105px;
    font-size: .6em;
    display: block;
    padding-top: 23px;
    color: #fff;
}

.accordion .item {
    border-bottom: solid 1px #CEE1EB;
}

.item {
    position: relative;
    color: #355666;
    overflow: hidden;
}

.item input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.item label {
    position: relative;
    display: block;
    padding-top: 22px;
    padding-bottom: 18px;
    padding-right: 16px;
    cursor: pointer;
}

.item__content {
    max-height: 0;
    overflow: hidden;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
    transition: all .4s;
}

input:checked ~ .item__content {
    max-height: 100em;
    padding-bottom: 12px;
}

label::after {
    content: "+";
    position: absolute;
    font-size: 1.3em;
    font-family: "Calibre-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    right: 0;
    top: 12px;
    display: block;
    line-height: 2;
    -moz-transition: transform .3s;
    -webkit-transition: transform .3s;
    transition: transform .3s;
}

input[type=checkbox]:checked + label::after {
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.testimonial-video {
    position: relative;
}

.testimonial-video img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 96px;
    margin-top: -48px;
    width: 96px;
    margin-left: -48px;
    z-index: 10;
    transition: all .2s ease-in-out;
}

.testimonial-video img:hover {
    cursor: pointer;
    transform: scale(0.9);
}

.testimonial-video video {
    height: 100%;
    width: 100%;
}

.featured-on {
    padding: 48px 0;
    border-top: 1px solid #CEE1EB;
    border-bottom: 1px solid #CEE1EB;
    justify-content: space-between;
}

.featured-on img {
    max-width: 330px;
}

@media screen and (min-width: 1088px) {
    .section.numbers {
        padding-top: 60px;
    }
}

@media screen and (max-width: 768px) {
    .faq .column:nth-child(1) {
        padding-bottom: 0;
    }

    .faq .column:nth-child(2) {
        padding-top: 0;
    }
}

@media screen and (max-width: 768px) {
    .fix-shadow-space {
        margin-left: 2%;
    }
}

@media screen and (max-width: 768px) {
    .full-bleed-perspective-phone {
        width: 150%;
        max-width: 150%;
        margin-left: -29%;
    }
}

.flexbox-card-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.flexbox-card-container > .card {
    flex: 1 0 30%;
    margin: 12px;
}

.flexbox-card-container > .card--min-256 {
    min-width: 256px;
}

.flexbox-card-container > .card--half-width {
    flex: 1 0 calc(50% - 24px);
}

@media screen and (max-width: 768px) {
    .flexbox-card-container:not(.flexbox-card-container--scroll-hori-on-mobile) {
        justify-content: space-around;
    }

    .flexbox-card-container:not(.flexbox-card-container--scroll-hori-on-mobile) > .card {
        width: 100%;
        flex: none;
        margin: 12px;
    }

    .flexbox-card-container--scroll-hori-on-mobile {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        flex-flow: nowrap;
        width: 120%;
        margin-left: -10%;
        padding-left: 10%;
    }

    .flexbox-card-container--scroll-hori-on-mobile > .card {
        margin-right: 24px;
    }

    .flexbox-card-container .card {
        margin-bottom: 24px;
    }
}

.card {
    padding: 24px 0;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    -moz-box-shadow: 0 2px 16px 0 rgba(20, 54, 71, 0.07);
    -webkit-box-shadow: 0 2px 16px 0 rgba(20, 54, 71, 0.07);
    box-shadow: 0 2px 16px 0 rgba(20, 54, 71, 0.07);
    border: 1px solid #F0F6FA;
    position: relative;
    padding: 24px;
    word-wrap: break-word;
}

.card.card--text-left {
    text-align: left;
}

.card.card--is-clipped {
    overflow: hidden;
}

.card.card--blank {
    opacity: 0;
}

@media screen and (max-width: 768px) {
    .card.card--blank {
        display: none;
    }
}

.card .card__content > :last-child {
    position: absolute;
    bottom: 31.2px;
}

.card.card--has-item-fixed-to-bottom:not(.card--text-left) > .card__content > :last-child {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.card--fixed-height {
    min-height: 330px;
}

.card_fund_europe {
    background: #091180 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_uk {
    background: #2a0980 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_us {
    background: #0d63b3 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_ethical {
    background: #188009 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_health {
    background: #900a99 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_emerging {
    background: #cc720d linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_tech {
    background: #496583 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_slow_steady {
    background: #0daeb3 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_balanced {
    background: #550bb3 linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_growth {
    background: #0bb30b linear-gradient(-225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card_fund_extra {
    background: white;
    border: 2px solid #f0f6fa !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Container
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

.wrapper {
    position: relative;
}

.wrapper.is-clipped {
    position: fixed;
    overflow: hidden !important;
    z-index: 999;
}

.container {
    margin: 0 auto;
    width: 85%;
    max-width: 980px;
}

.container--wide {
    max-width: 1150px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Columns
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 768px) {
    .reversable-column-order {
        display: flex;
        flex-direction: column-reverse;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Section
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.section {
    padding: 30px 0;
    position: relative;
}

@media screen and (max-width: 768px) {
    .section {
        padding: 48px 0;
    }
}

.section--narrow {
    padding: 40px 0;
}

@media screen and (max-width: 768px) {
    .section--narrow {
        padding: 25px 0;
    }
}

.section--narrowest {
    padding: 20px 0;
}

@media screen and (max-width: 768px) {
    .section--narrowest {
        padding: 10px 0;
    }
}

.section--no-padding {
    padding: 0;
}

.section--hero {
    padding: 160px 0 32px;
}

@media screen and (max-width: 768px) {
    .section--hero {
        padding: 96px 0 32px;
    }
}

.section--hero .columns {
    position: relative;
}

@media screen and (max-width: 768px) {
    .section--hero img.full-bleed-perspective-phone {
        padding-top: 65px;
    }
}

.section--legal h2,
.section--legal h3 {
    margin-top: 72px;
    margin-bottom: 24px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Positioning
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.position--relative {
    position: relative;
}

.position--absolute {
    position: absolute;
}

.position--fixed {
    position: fixed;
    top: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Floating
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.float--left {
    float: left;
}

.float--right {
    float: right;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Alignment
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.vertical-align--middle {
    vertical-align: middle;
}

.max-width--500 {
    max-width: 500px;
}

@media screen and (max-width: 768px) {
    .max-width--500 {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {

    .horizontal-center-on-mobile,
    .horizontal-centre-on-mobile {
        margin: 0 auto;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Display
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.display--block {
    display: block;
}

.display--inline-block {
    display: inline-block;
}

.display--none {
    display: none !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Paddings
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.padding--zero {
    padding: 0 !important;
}

.padding--one-space {
    padding: 24px !important;
}

.padding--top-third-space {
    padding-top: 8px !important;
}

.padding--top-half-space {
    padding-top: 12px !important;
}

.padding--top-one-space {
    padding-top: 24px !important;
}

.padding--top-two-spaces {
    padding-top: 48px !important;
}

.padding--top-three-spaces {
    padding-top: 72px !important;
}

.padding--top-six-spaces {
    padding-top: 144px !important;
}

.padding--top-ten-spaces {
    padding-top: 240px !important;
}

.padding--bottom-one-space {
    padding-bottom: 24px !important;
}

.padding--bottom-two-spaces {
    padding-bottom: 48px !important;
}

.padding--bottom-three-spaces {
    padding-bottom: 72px !important;
}

.padding--top-bottom-half-space {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.padding--top-bottom-one-space {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.padding--top-bottom-two-spaces {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

.padding--left-half-space {
    padding-left: 12px !important;
}

.padding--left-one-space {
    padding-left: 24px !important;
}

.padding--left-two-spaces {
    padding-left: 48px !important;
}

.padding-left-right--half-space {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.padding--right-half-space {
    padding-right: 12px !important;
}

.padding--right-one-space {
    padding-right: 24px !important;
}

.padding--right-two-spaces {
    padding-right: 48px !important;
}

@media screen and (max-width: 768px) {
    .padding--right-two-spaces {
        padding-right: 24px !important;
    }

    .padding--left-half-space-on-mobile {
        padding-left: 16px !important;
    }

    .padding--top-half-space {
        padding-top: 6px !important;
    }

    .padding--top-one-space {
        padding-top: 12px !important;
    }

    .padding--top-two-spaces {
        padding-top: 12px !important;
    }

    .padding--top-six-spaces {
        padding-top: 72px !important;
    }

    .padding--top-ten-spaces {
        padding-top: 144px !important;
    }

    .margin--top-two-spaces-on-mobile {
        margin-top: 24px !important;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Margins
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.margin--top-one-space {
    margin-top: 24px !important;
}

.margin--top-two-spaces {
    margin-top: 48px !important;
}

.margin--top-ten-spaces {
    margin-top: 240px !important;
}

.margin--right-half-space {
    margin-right: 12px !important;
}

.margin--right-one-space {
    margin-right: 24px !important;
}

.margin--bottom-half-space {
    margin-bottom: 12px !important;
}

.margin--bottom-one-space {
    margin-bottom: 24px !important;
}

.margin--bottom-two-spaces {
    margin-bottom: 48px !important;
}

.margin--left-third-space {
    margin-left: 8px !important;
}

.margin--left-one-space {
    margin-left: 24px !important;
}

.margin--left-three-spaces {
    margin-left: 72px !important;
}

.margin--bottom-negative-two-spaces {
    margin-bottom: -48px !important;
}

@media screen and (max-width: 768px) {
    .margin--bottom-negative-two-spaces {
        margin-bottom: -144px !important;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Helpers
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hide-for-desktop {
    display: none;
}

@media screen and (max-width: 768px) {
    .disable-scroll-on-mobile {
        overflow: hidden;
    }

    .new-line-on-mobile {
        display: block;
    }

    .hide-for-mobile {
        display: none;
    }

    .hide-for-desktop {
        display: inline;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Swap positions on mobile
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.container--responsive-swap {
    display: table;
}

.on-top--on-mobile {
    display: table-footer-group;
}

.on-bottom--on-mobile {
    display: table-header-group;
}

@media screen and (max-width: 768px) {
    .on-top--on-mobile {
        display: table-header-group;
    }

    .on-bottom--on-mobile {
        display: table-footer-group;
    }
}

nav {
    font-family: "Calibre-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    position: fixed;
    width: 100vw;
    z-index: 999;
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
}

nav.nav-default {
    padding: 24px 0;
    background-color: rgba(255, 255, 255, 0.95);
}

nav.nav-scrolled {
    padding: 8px 0;
    background-color: #FFF;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 768px) {

    nav.nav-default,
    nav.nav-scrolled {
        padding: 18px 0;
    }
}

nav .nav-brand {
    display: inline-block;
    margin: 0;
}

nav div > a {
    padding: 12px;
    margin-right: 12px;
    font-family: "Calibre-Semibold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #355666;
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
}

@media screen and (min-width: 769px) and (max-width: 1087px) {
    nav div > a {
        padding: 12px 8px;
        margin-right: 12px;
    }
}

nav div > a:last-child {
    margin-right: 0;
}

nav div > a:hover {
    color: #5CBBFF;
}

nav .has-new-badge:after {
    top: 17px;
    left: 15em;
}

nav .has-coming-soon-badge:after {
    top: 17px;
    left: 12em;
}

@media screen and (max-width: 768px) {
    nav {
        padding: 24px 0px;
    }

    nav .has-coming-soon-badge:after {
        left: 13em;
    }

    nav .has-new-badge:after {
        left: 16em;
    }

    nav .faq-btn {
        display: none !important;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Hamburger
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hamburger {
    display: none;
    position: absolute;
    top: 20px;
    right: 24px;
    width: 24px;
    height: 24px;
    z-index: 19;
    background: url("/assets/images/icons/menu.svg") no-repeat 50% 50%;
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
}

.hamburger.close {
    background: url("/assets/images/icons/close.svg") no-repeat 50% 50%;
}

@media screen and (max-width: 768px) {
    .hamburger {
        display: block;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.menu {
    display: block;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

@media screen and (max-width: 768px) {
    .menu {
        position: fixed;
        z-index: 18;
        top: 0;
        bottom: 0;
        left: 1000px;
        width: 100%;
        right: 0;
        padding: 72px 8%;
        background: #fff;
        -moz-box-shadow: 0 12px 32px 0 rgba(163, 190, 204, 0.4);
        -webkit-box-shadow: 0 12px 32px 0 rgba(163, 190, 204, 0.4);
        box-shadow: 0 12px 32px 0 rgba(163, 190, 204, 0.4);
        -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
        -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
        transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    }

    .menu.open {
        transform-origin: 0% 0%;
        transform: translate(-1000px, 0);
    }

    .menu a:not(.button) {
        padding: 12px 0;
        font-size: 1.25em;
    }

    .menu a:not(.hide-for-mobile) {
        display: block;
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Navigation dropdown
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.dropdown {
    display: inline;
    position: relative;
}

.dropdown:hover {
    cursor: pointer;
    padding-bottom: 48px;
}

.dropdown .dropdown__content {
    visibility: hidden;
    transform-origin: 0% 0%;
    transform: translate(0, 10%);
    opacity: 0;
    display: inline-block;
    position: absolute;
    width: 230px;
    left: -75px;
    z-index: 1000;
    background: #fff;
    padding: 16px 12px;
    margin-top: 36px;
    border-radius: 12px;
    -moz-box-shadow: 0 12px 32px 0 rgba(163, 190, 204, 0.4);
    -webkit-box-shadow: 0 12px 32px 0 rgba(163, 190, 204, 0.4);
    box-shadow: 0 12px 32px 0 rgba(163, 190, 204, 0.4);
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition: all 0.3s cubic-bezier(0.6, 0.2, 0.1, 1);
}

.dropdown .dropdown__content:before {
    content: '';
    width: 0;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
}

.dropdown .dropdown__content > * {
    display: block;
}

.dropdown .dropdown__content--visible {
    visibility: visible;
    opacity: 1;
    transform: none;
}

@media screen and (max-width: 768px) {
    .dropdown .dropdown__content {
        visibility: visible;
        opacity: 1;
        transform: none;
        position: relative;
        width: 100%;
        margin-left: 0;
        left: 0;
        background: transparent;
        padding: 0 0 24px 0;
        margin-top: 0;
        border-radius: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .dropdown .dropdown__content:before {
        display: none;
    }

    .dropdown:hover .dropdown__content {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
}

.investment-calculator {
    margin: 0 auto;
}

.deposits .deposit__description {
    text-align: center;
    padding-bottom: 12px;
}

.deposits input[type=number]::-webkit-inner-spin-button,
.deposits input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.deposits input[type=number] {
    -moz-appearance: textfield;
}

.bar-chart {
    height: 230px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

.bar-chart span {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.bar-chart > * {
    margin-top: 110px;
    text-align: center;
    font-size: .875em;
    width: 80px;
    height: 80px;
    position: relative;
}

.bar-chart > *:not(:last-of-type) {
    margin-right: 24px;
}

.bar-chart > *:before {
    content: '';
    width: 140%;
    background: #A3BECC;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: -20%;
}

.bar-chart .bar-chart__green-bar {
    color: #355666;
    line-height: 0;
    background-color: #00B395;
    bottom: 2px;
    height: 20px;
    position: absolute;
    width: 100%;
    display: block;
}

.bar-chart .bar-chart__green-bar:before {
    content: "£"attr(data-amount-return);
    position: relative;
    top: -10px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 5px;
    background: #CEE1EB;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-scrollbar {
    display: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    overflow-x: scroll;
    cursor: pointer;
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #fff;
    overflow-x: scroll;
    cursor: pointer;
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.slider::-moz-range-progress {
    background-color: #00B395;
}

.slider-number {
    font-size: 1.125em;
}

.slider-number .slider-number__input {
    font-size: 1.125em;
    outline: none;
    width: 40px;
    background: transparent;
    border: 0;
}

.slider-number.deposit-duration__number input {
    text-align: right;
    width: 28px;
}

.footer {
    background: #143647;
    padding-top: 48px;
    padding-bottom: 24px;
    margin-top: 72px;
}

.footer h4 {
    color: #A3BECC;
    font-size: 1em;
    margin-bottom: 12px;
    font-family: "Calibre-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: normal;
}

.footer .links {
    margin-top: 48px;
    margin-bottom: 48px;
}

@media screen and (max-width: 768px) {
    .footer .links {
        margin-top: 24px;
        margin-bottom: 24px;
    }
}

.footer .phone {
    color: #A3BECC;
    font-size: 0.875em;
}

.footer a {
    color: #fff;
}

.footer a:hover {
    color: #A3BECC;
}

.footer span,
.footer a {
    font-family: "Calibre-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    padding-bottom: 12px;
}

.footer div.column:not(.social-links) > a {
    display: block;
}

.footer .social-links {
    text-align: right;
}

@media screen and (max-width: 768px) {
    .footer {
        padding-top: 36px;
        margin-top: 72px;
    }

    .footer .social-links {
        text-align: left;
    }
}

@keyframes float {
    0% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

.particle-scene--index .particle:nth-child(1) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2967ms;
    animation-duration: 5872ms;
    width: 320px;
    height: 320px;
    top: -285px;
    left: 29%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(1) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(2) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1743ms;
    animation-duration: 7394ms;
    width: 130px;
    height: 130px;
    top: 4%;
    left: -105px;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(2) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(3) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(6px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 957ms;
    animation-duration: 6217ms;
    width: 110px;
    height: 110px;
    top: 7%;
    left: 98%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(3) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(4) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(12px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1700ms;
    animation-duration: 6230ms;
    width: 65px;
    height: 65px;
    top: 18%;
    left: -2%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(4) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(5) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2463ms;
    animation-duration: 6116ms;
    width: 150px;
    height: 150px;
    top: 23%;
    left: 98%;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(5) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(6) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1596ms;
    animation-duration: 6406ms;
    width: 150px;
    height: 150px;
    top: 33%;
    left: -100px;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(6) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(7) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2903ms;
    animation-duration: 7282ms;
    width: 150px;
    height: 150px;
    top: 40%;
    left: 98%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(7) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(8) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(7px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2497ms;
    animation-duration: 7519ms;
    width: 240px;
    height: 240px;
    top: 60%;
    left: 97%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(8) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(9) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(10px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 372ms;
    animation-duration: 5923ms;
    width: 100px;
    height: 100px;
    top: 78%;
    left: -80px;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(9) {
        display: none;
    }
}

.particle-scene--index .particle:nth-child(10) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2138ms;
    animation-duration: 7185ms;
    width: 41px;
    height: 41px;
    top: 87%;
    left: 87%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--index .particle:nth-child(10) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(1) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2912ms;
    animation-duration: 7029ms;
    width: 320px;
    height: 320px;
    top: -285px;
    left: 29%;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(1) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(2) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(7px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 979ms;
    animation-duration: 7367ms;
    width: 70px;
    height: 70px;
    top: 2%;
    left: -35px;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(2) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(3) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1503ms;
    animation-duration: 6807ms;
    width: 35px;
    height: 35px;
    top: 2%;
    left: 90%;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(3) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(4) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(6px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2084ms;
    animation-duration: 7709ms;
    width: 65px;
    height: 65px;
    top: 20%;
    left: 97%;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(4) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(5) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2234ms;
    animation-duration: 5308ms;
    width: 200px;
    height: 200px;
    top: 29%;
    left: -160px;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(5) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(6) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(5px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2906ms;
    animation-duration: 6950ms;
    width: 50px;
    height: 50px;
    top: 41%;
    left: 80%;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(6) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(7) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(7px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2520ms;
    animation-duration: 7481ms;
    width: 240px;
    height: 240px;
    top: 60%;
    left: 97%;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(7) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(8) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(10px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 221ms;
    animation-duration: 7027ms;
    width: 100px;
    height: 100px;
    top: 70%;
    left: -80px;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(8) {
        display: none;
    }
}

.particle-scene--savings .particle:nth-child(9) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1602ms;
    animation-duration: 6548ms;
    width: 41px;
    height: 41px;
    top: 80%;
    left: 87%;
    background: #0037FF;
}

@media screen and (max-width: 768px) {
    .particle-scene--savings .particle:nth-child(9) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(1) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2102ms;
    animation-duration: 5869ms;
    width: 320px;
    height: 320px;
    top: -285px;
    left: 29%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(1) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(2) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(7px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1093ms;
    animation-duration: 5178ms;
    width: 70px;
    height: 70px;
    top: 2%;
    left: -35px;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(2) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(3) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2066ms;
    animation-duration: 7460ms;
    width: 35px;
    height: 35px;
    top: 2%;
    left: 90%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(3) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(4) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(12px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2872ms;
    animation-duration: 5995ms;
    width: 65px;
    height: 65px;
    top: 18%;
    left: -2%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(4) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(5) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2754ms;
    animation-duration: 6710ms;
    width: 260px;
    height: 260px;
    top: 28%;
    left: 98%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(5) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(6) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 397ms;
    animation-duration: 6231ms;
    width: 260px;
    height: 260px;
    top: 41%;
    left: -240px;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(6) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(7) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(7px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 799ms;
    animation-duration: 5886ms;
    width: 70px;
    height: 70px;
    top: 60%;
    left: 85%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(7) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(8) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(10px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2895ms;
    animation-duration: 5355ms;
    width: 100px;
    height: 100px;
    top: 75%;
    left: -50px;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(8) {
        display: none;
    }
}

.particle-scene--investments .particle:nth-child(9) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 694ms;
    animation-duration: 6152ms;
    width: 41px;
    height: 41px;
    top: 85%;
    left: 87%;
    background: #00B395;
}

@media screen and (max-width: 768px) {
    .particle-scene--investments .particle:nth-child(9) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(1) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(13px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 634ms;
    animation-duration: 5771ms;
    width: 40px;
    height: 40px;
    top: 2%;
    left: 31%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(1) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(2) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(7px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 207ms;
    animation-duration: 6447ms;
    width: 70px;
    height: 70px;
    top: 2%;
    left: -35px;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(2) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(3) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 59ms;
    animation-duration: 6893ms;
    width: 100px;
    height: 100px;
    top: -65px;
    left: 90%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(3) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(4) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(12px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 2777ms;
    animation-duration: 5222ms;
    width: 65px;
    height: 65px;
    top: 18%;
    left: -2%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(4) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(5) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 574ms;
    animation-duration: 5249ms;
    width: 260px;
    height: 260px;
    top: 28%;
    left: 98%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(5) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(6) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(14px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1457ms;
    animation-duration: 6739ms;
    width: 260px;
    height: 260px;
    top: 41%;
    left: -240px;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(6) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(7) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(10px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 579ms;
    animation-duration: 5815ms;
    width: 40px;
    height: 40px;
    top: 58%;
    left: 73%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(7) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(8) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(10px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 1901ms;
    animation-duration: 5621ms;
    width: 100px;
    height: 100px;
    top: 75%;
    left: -50px;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(8) {
        display: none;
    }
}

.particle-scene--insights .particle:nth-child(9) {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(3px);
    z-index: 900;
    animation: float ease-in-out infinite;
    animation-fill-mode: both;
    animation-delay: 854ms;
    animation-duration: 7242ms;
    width: 60px;
    height: 60px;
    top: 80%;
    left: 98%;
    background: #5CBBFF;
}

@media screen and (max-width: 768px) {
    .particle-scene--insights .particle:nth-child(9) {
        display: none;
    }
}



.drop-shadow {
    -webkit-filter: drop-shadow(0 12px 32px rgba(163, 190, 204, 0.65));
    filter: drop-shadow(0 12px 32px rgba(163, 190, 204, 0.65));
}

.pattern-shape-bg {
    position: absolute;
    float: left;
    z-index: -1;
    width: 40%;
    top: 20px;
}

.pattern-shape-bg:before {
    position: relative;
    content: "";
    display: block;
    padding-top: 100%;
}

@media screen and (max-width: 768px) {
    .pattern-shape-bg {
        top: 80px;
    }
}

.pattern-shape-bg--right {
    right: -30%;
}

.pattern-shape-bg--left {
    left: -30%;
}

@media screen and (max-width: 768px) {
    .pattern-shape-bg--left {
        left: inherit;
        right: -30%;
    }
}

.pattern-shape-bg--hero {
    right: -280px;
    width: 70%;
    max-width: 768px;
    top: -120px;
}

@media screen and (max-width: 768px) {
    .pattern-shape-bg--hero {
        display: none;
    }
}

.pattern-shape--pink:before {
    background-image: url("/assets/images/three/shape-patterns/img_pattern_pink.svg");
}

.pattern-shape--solid-purple:before {
    background: #5F0AFF;
}

.pattern-shape--solid-purple-fade:before {
    background: #CFB5FF;
}

.pattern-shape--solid-blue:before {
    background: #0037FF;
}

.pattern-shape--solid-green:before {
    background: #00B395;
}

.pattern-shape--person:before {
    clip-path: url(#path-person);
    -webkit-clip-path: url(#path-person);
}

.pattern-shape--savings:before {
    clip-path: url(#path-savings);
    -webkit-clip-path: url(#path-savings);
}

.pattern-shape--investments:before {
    clip-path: url(#path-investments);
    -webkit-clip-path: url(#path-investments);
}