.bio-card .bio-card__content p,
.bio-card-content p.small {
    font-size: .875rem;
    line-height: 1.4
}

@media(min-width:48em) {

    .bio-card .bio-card__content p,
    .bio-card-content p.small {
        font-size: 1rem
    }
}

.overlay-grey:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

[data-viewport=true] {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transition: translateX(-100px);
    -webkit-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1), opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    -moz-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1), opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    -ms-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1), opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    -o-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1), opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    transition: transform 1.2s cubic-bezier(.34, .41, .03, 1), opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    visibility: hidden
}

[data-viewport=true].inviewport,
[dir=rtl] [data-viewport=true].inviewport {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transition: translateX(0);
    visibility: visible
}

.scale-up {
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transition: scale(.9);
    -webkit-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1);
    -moz-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1);
    -ms-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1);
    -o-transition: transform 1.2s cubic-bezier(.34, .41, .03, 1);
    transition: transform 1.2s cubic-bezier(.34, .41, .03, 1)
}

.opacity-only {
    opacity: 0;
    -webkit-transition: opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    -moz-transition: opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    -ms-transition: opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    -o-transition: opacity 1.2s cubic-bezier(.34, .41, .03, 1);
    transition: opacity 1.2s cubic-bezier(.34, .41, .03, 1)
}

.opacity-only.inviewport {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transition: translateX(0)
}

.bio-card .bio-card__content :lang(my) p,
.bio-card-content :lang(my) p.small,
:lang(my) .bio-card .bio-card__content p,
:lang(my) .bio-card-content p.small {
    font-size: .75rem;
    line-height: 1.7
}

@media(min-width:48em) {

    .bio-card .bio-card__content :lang(my) p,
    .bio-card-content :lang(my) p.small,
    :lang(my) .bio-card .bio-card__content p,
    :lang(my) .bio-card-content p.small {
        font-size: .875rem
    }
}

.color-white {
    color: #fff
}

.color-black {
    color: #000
}

.show-large {
    display: none
}

@media(min-width:48em) {
    .show-large {
        display: block
    }
}

.show-small {
    display: block
}

@media(min-width:48em) {
    .show-small {
        display: none
    }
}

.height-full {
    height: 100%
}

.overlay-grey:before {
    background: rgba(0, 0, 0, .2)
}

.bio-card-wrapper,
.custom-scrollbar {
    overflow-x: auto;
    overflow-y: auto;
    scroll-behavior: smooth
}

.bio-card-wrapper::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

.bio-card-wrapper::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background: #000;
    background-clip: padding-box;
    border: 2px solid #fff
}

.bio-card-wrapper::-webkit-scrollbar-corner,
.custom-scrollbar::-webkit-scrollbar-corner {
    display: none
}

.bio-card-wrapper::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #000
}

.delay-1 {
    transition-delay: .1s
}

.delay-2 {
    transition-delay: .2s
}

.delay-3 {
    transition-delay: .3s
}

.delay-4 {
    transition-delay: .4s
}

.delay-5 {
    transition-delay: .5s
}

.scale-up.inviewport {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: scale(1)
}

.expand-to-size {
    max-width: calc(100% - 1rem)
}

@media(min-width:48em) {
    .expand-to-size {
        max-width: calc(100% - 3rem)
    }
}

[dir=rtl] [data-viewport=true] {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transition: translateX(100px)
}

.overflow-hidden {
    overflow: hidden
}

.background-yellow {
    background-color: #ffe17e
}

.background-red {
    background-color: #ffbcb7
}

.background-green {
    background-color: #b8ecb6
}

.background-blue {
    background-color: #b5d5f5
}

.background-gray {
    background-color: #fafafa
}

.background-white {
    background-color: #fff
}

.yellow .card-thumbnail__image:hover:before {
    background: linear-gradient(42deg, rgba(255, 235, 0, .8), transparent 80%)
}

.yellow .bio-card:hover .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, rgba(255, 235, 0, .8), transparent 61.11%);
    opacity: .75
}

.yellow .author__img:hover:before {
    background: linear-gradient(45deg, rgba(255, 235, 0, .8), transparent 53%)
}

.yellow .publication-thumbnail__image:hover:after {
    background: linear-gradient(42deg, rgba(255, 235, 0, .8), transparent 80%)
}

.yellow .download-card:hover .card-thumbnail__image:before,
.yellow .download-card:hover .publication-thumbnail__image:after,
.yellow .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(42deg, rgba(255, 235, 0, .8), transparent 80%);
    opacity: .75
}

.yellow .stats-panel:hover:after {
    background: linear-gradient(0deg, rgba(255, 235, 0, .8), transparent 140%)
}

.yellow .stats-panel:hover .stats-card {
    background-color: transparent
}

.yellow .wide-card__image a:hover:before {
    background: linear-gradient(42deg, rgba(255, 235, 0, .8), transparent 80%);
    opacity: .75
}

.yellow .feature__card-slide:before {
    background: linear-gradient(45deg, rgba(255, 235, 0, .8), transparent 67%)
}

.yellow .content-card .image:before {
    background: linear-gradient(42deg, rgba(255, 235, 0, .8), transparent 80%)
}

.yellow .image-reveal-card:hover .image:before {
    background: linear-gradient(67.76deg, rgba(255, 235, 0, .8), transparent 61.11%);
    opacity: .75
}

.red .card-thumbnail__image:hover:before {
    background: linear-gradient(42deg, rgba(230, 45, 45, .78), transparent 80%)
}

.red .bio-card:hover .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, rgba(230, 45, 45, .78), transparent 61.11%);
    opacity: .75
}

.red .author__img:hover:before {
    background: linear-gradient(45deg, rgba(230, 45, 45, .78), transparent 53%)
}

.red .publication-thumbnail__image:hover:after {
    background: linear-gradient(42deg, rgba(230, 45, 45, .78), transparent 80%)
}

.red .download-card:hover .card-thumbnail__image:before,
.red .download-card:hover .publication-thumbnail__image:after,
.red .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(42deg, rgba(230, 45, 45, .78), transparent 80%);
    opacity: .75
}

.red .stats-panel:hover:after {
    background: linear-gradient(0deg, rgba(230, 45, 45, .78), transparent 140%)
}

.red .stats-panel:hover .stats-card {
    background-color: transparent
}

.red .wide-card__image a:hover:before {
    background: linear-gradient(42deg, rgba(230, 45, 45, .78), transparent 80%);
    opacity: .75
}

.red .feature__card-slide:before {
    background: linear-gradient(45deg, rgba(230, 45, 45, .78), transparent 67%)
}

.red .content-card .image:before {
    background: linear-gradient(42deg, rgba(230, 45, 45, .78), transparent 80%)
}

.red .image-reveal-card:hover .image:before {
    background: linear-gradient(67.76deg, rgba(230, 45, 45, .78), transparent 61.11%);
    opacity: .75
}

.green .card-thumbnail__image:hover:before {
    background: linear-gradient(42deg, rgba(92, 222, 83, .82), transparent 80%)
}

.green .bio-card:hover .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, rgba(92, 222, 83, .82), transparent 61.11%);
    opacity: .75
}

.green .author__img:hover:before {
    background: linear-gradient(45deg, rgba(92, 222, 83, .82), transparent 53%)
}

.green .publication-thumbnail__image:hover:after {
    background: linear-gradient(42deg, rgba(92, 222, 83, .82), transparent 80%)
}

.green .download-card:hover .card-thumbnail__image:before,
.green .download-card:hover .publication-thumbnail__image:after,
.green .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(42deg, rgba(92, 222, 83, .82), transparent 80%);
    opacity: .75
}

.green .stats-panel:hover:after {
    background: linear-gradient(0deg, rgba(92, 222, 83, .82), transparent 140%)
}

.green .stats-panel:hover .stats-card {
    background-color: transparent
}

.green .wide-card__image a:hover:before {
    background: linear-gradient(42deg, rgba(92, 222, 83, .82), transparent 80%);
    opacity: .75
}

.green .feature__card-slide:before {
    background: linear-gradient(45deg, rgba(92, 222, 83, .82), transparent 67%)
}

.green .content-card .image:before {
    background: linear-gradient(42deg, rgba(92, 222, 83, .82), transparent 80%)
}

.green .image-reveal-card:hover .image:before {
    background: linear-gradient(67.76deg, rgba(92, 222, 83, .82), transparent 61.11%);
    opacity: .75
}

.blue .card-thumbnail__image:hover:before {
    background: linear-gradient(42deg, rgba(94, 232, 246, .82), transparent 80%)
}

.blue .bio-card:hover .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, rgba(94, 232, 246, .82), transparent 61.11%);
    opacity: .75
}

.blue .author__img:hover:before {
    background: linear-gradient(45deg, rgba(94, 232, 246, .82), transparent 53%)
}

.blue .publication-thumbnail__image:hover:after {
    background: linear-gradient(42deg, rgba(94, 232, 246, .82), transparent 80%)
}

.blue .download-card:hover .card-thumbnail__image:before,
.blue .download-card:hover .publication-thumbnail__image:after,
.blue .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(42deg, rgba(94, 232, 246, .82), transparent 80%);
    opacity: .75
}

.blue .stats-panel:hover:after {
    background: linear-gradient(0deg, rgba(94, 232, 246, .82), transparent 140%)
}

.blue .stats-panel:hover .stats-card {
    background-color: transparent
}

.blue .wide-card__image a:hover:before {
    background: linear-gradient(42deg, rgba(94, 232, 246, .82), transparent 80%);
    opacity: .75
}

.blue .feature__card-slide:before {
    background: linear-gradient(45deg, rgba(94, 232, 246, .82), transparent 67%)
}

.blue .content-card .image:before {
    background: linear-gradient(42deg, rgba(94, 232, 246, .82), transparent 80%)
}

.blue .image-reveal-card:hover .image:before {
    background: linear-gradient(67.76deg, rgba(94, 232, 246, .82), transparent 61.11%);
    opacity: .75
}

[dir=rtl] .yellow .card-thumbnail__image:hover:before {
    background: linear-gradient(297deg, rgba(255, 235, 0, .8), transparent 61.11%)
}

[dir=rtl] .yellow .bio-card:hover .card-thumbnail__image:before,
[dir=rtl] .yellow .download-card:hover .card-thumbnail__image:before {
    background: linear-gradient(297deg, rgba(255, 235, 0, .8), transparent 61.11%);
    opacity: .75
}

[dir=rtl] .yellow .download-card:hover .publication-thumbnail__image:after,
[dir=rtl] .yellow .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(318deg, rgba(255, 235, 0, .8), transparent 70.49%);
    opacity: .75
}

[dir=rtl] .yellow .wide-card__image a:hover:before {
    background: linear-gradient(318deg, rgba(255, 235, 0, .8), transparent 80%);
    opacity: .75
}

[dir=rtl] .yellow .feature__card-slide:before {
    background: linear-gradient(318deg, rgba(255, 235, 0, .8), transparent 67.25%)
}

[dir=rtl] .red .card-thumbnail__image:hover:before {
    background: linear-gradient(297deg, rgba(230, 45, 45, .78), transparent 61.11%)
}

[dir=rtl] .red .bio-card:hover .card-thumbnail__image:before,
[dir=rtl] .red .download-card:hover .card-thumbnail__image:before {
    background: linear-gradient(297deg, rgba(230, 45, 45, .78), transparent 61.11%);
    opacity: .75
}

[dir=rtl] .red .download-card:hover .publication-thumbnail__image:after,
[dir=rtl] .red .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(318deg, rgba(230, 45, 45, .78), transparent 70.49%);
    opacity: .75
}

[dir=rtl] .red .wide-card__image a:hover:before {
    background: linear-gradient(318deg, rgba(230, 45, 45, .78), transparent 80%);
    opacity: .75
}

[dir=rtl] .red .feature__card-slide:before {
    background: linear-gradient(318deg, rgba(230, 45, 45, .78), transparent 67.25%)
}

[dir=rtl] .green .card-thumbnail__image:hover:before {
    background: linear-gradient(297deg, rgba(92, 222, 83, .82), transparent 61.11%)
}

[dir=rtl] .green .bio-card:hover .card-thumbnail__image:before,
[dir=rtl] .green .download-card:hover .card-thumbnail__image:before {
    background: linear-gradient(297deg, rgba(92, 222, 83, .82), transparent 61.11%);
    opacity: .75
}

[dir=rtl] .green .download-card:hover .publication-thumbnail__image:after,
[dir=rtl] .green .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(318deg, rgba(92, 222, 83, .82), transparent 70.49%);
    opacity: .75
}

[dir=rtl] .green .wide-card__image a:hover:before {
    background: linear-gradient(318deg, rgba(92, 222, 83, .82), transparent 80%);
    opacity: .75
}

[dir=rtl] .green .feature__card-slide:before {
    background: linear-gradient(318deg, rgba(92, 222, 83, .82), transparent 67.25%)
}

[dir=rtl] .blue .card-thumbnail__image:hover:before {
    background: linear-gradient(297deg, rgba(94, 232, 246, .82), transparent 61.11%)
}

[dir=rtl] .blue .bio-card:hover .card-thumbnail__image:before,
[dir=rtl] .blue .download-card:hover .card-thumbnail__image:before {
    background: linear-gradient(297deg, rgba(94, 232, 246, .82), transparent 61.11%);
    opacity: .75
}

[dir=rtl] .blue .download-card:hover .publication-thumbnail__image:after,
[dir=rtl] .blue .publication-card:hover .publication-thumbnail__image:after {
    background: linear-gradient(318deg, rgba(94, 232, 246, .82), transparent 70.49%);
    opacity: .75
}

[dir=rtl] .blue .wide-card__image a:hover:before {
    background: linear-gradient(318deg, rgba(94, 232, 246, .82), transparent 80%);
    opacity: .75
}

[dir=rtl] .blue .feature__card-slide:before {
    background: linear-gradient(318deg, rgba(94, 232, 246, .82), transparent 67.25%)
}

.yellow .stats-card:hover {
    background-color: #ffeb00
}

.yellow .progress-bar {
    background: #ffeb00
}

.yellow .blockquote,
.yellow .content-card.card:hover {
    background-color: #ffeb00
}

.yellow .content-card.card:hover .cta--space:after {
    filter: invert(0) brightness(0)
}

.yellow .content-card.card-color:hover,
.yellow .content-card.card-emphasize:hover {
    background-color: #ffeb00
}

.yellow .feature__card-slide {
    background: #ffeb00
}

.red .stats-card:hover {
    background-color: #ee402d
}

.red .progress-bar {
    background: #ee402d
}

.red .blockquote,
.red .content-card.card:hover {
    background-color: #ee402d
}

.red .content-card.card:hover .cta--space:after {
    filter: invert(0) brightness(0)
}

.red .content-card.card-color:hover,
.red .content-card.card-emphasize:hover {
    background-color: #ee402d
}

.red .feature__card-slide {
    background: #ee402d
}

.green .stats-card:hover {
    background-color: #6de354
}

.green .progress-bar {
    background: #6de354
}

.green .blockquote,
.green .content-card.card:hover {
    background-color: #6de354
}

.green .content-card.card:hover .cta--space:after {
    filter: invert(0) brightness(0)
}

.green .content-card.card-color:hover,
.green .content-card.card-emphasize:hover {
    background-color: #6de354
}

.green .feature__card-slide {
    background: #6de354
}

.blue .stats-card:hover {
    background-color: #60d4f2
}

.blue .progress-bar {
    background: #60d4f2
}

.blue .blockquote,
.blue .content-card.card:hover {
    background-color: #60d4f2
}

.blue .content-card.card:hover .cta--space:after {
    filter: invert(0) brightness(0)
}

.blue .content-card.card-color:hover,
.blue .content-card.card-emphasize:hover {
    background-color: #60d4f2
}

.blue .feature__card-slide {
    background: #60d4f2
}

.yellow .content-card.card-emphasize {
    background-color: #ffe17e
}

.red .content-card.card-emphasize {
    background-color: #ffbcb7
}

.green .content-card.card-emphasize {
    background-color: #b8ecb6
}

.blue .content-card.card-emphasize {
    background-color: #a2daf3
}

.bio-card a {
    background: #f7f7f7;
    display: block;
    -webkit-transition: .6s ease;
    -moz-transition: .6s ease;
    -ms-transition: .6s ease;
    -o-transition: .6s ease;
    transition: .6s ease
}

.bio-card .card-thumbnail__image img {
    height: auto;
    width: 100%
}

.bio-card:hover .cta--arrow i {
    width: 5rem
}

.bio-card:hover .cta--arrow i:before {
    display: unset
}

.bio-card:hover .card-thumbnail__image:before,
.bio-card:hover.yellow .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, #ffeb00, transparent 61.11%);
    opacity: .75
}

.bio-card:hover.red .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, #ee402d, transparent 61.11%);
    opacity: .75
}

.bio-card:hover.green .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, #6de354, transparent 61.11%);
    opacity: .75
}

.bio-card:hover.blue .card-thumbnail__image:before {
    background: linear-gradient(67.76deg, #60d4f2, transparent 61.11%);
    opacity: .75
}

.bio-card .bio-card__content {
    background: #fafafa;
    flex-direction: column;
    order: 2;
    overflow: hidden;
    position: relative
}

@media(min-width:48em) {
    .bio-card .bio-card__content {
        background: none;
        display: flex;
        order: inherit
    }
}

.bio-card .bio-card__content .bio-card__description {
    padding: 2rem 1.5rem 0
}

.bio-card .bio-card__content .card-thumbnail__image {
    order: 1
}

@media(min-width:48em) {
    .bio-card .bio-card__content .card-thumbnail__image {
        order: inherit
    }
}

.bio-card .bio-card__content .card-thumbnail__image:before {
    opacity: 0
}

.bio-card .bio-card__content h5 {
    margin-bottom: 1.125rem
}

@media(min-width:48em) {
    .bio-card .bio-card__content h5 {
        margin-bottom: .75rem
    }
}

.bio-card .bio-card__content p {
    margin-bottom: 2.063rem
}

@media(min-width:48em) {
    .bio-card .bio-card__content p {
        margin-bottom: 1.5rem
    }
}

.bio-card .bio-card__content .cta__link {
    margin-bottom: 0;
    margin-top: 1.5rem;
    padding: 0 1.5rem 2rem
}

@media(min-width:48em) {
    .bio-card .bio-card__content .cta__link {
        margin-top: auto
    }
}

.modal {
    visibility: hidden
}

.modal.open {
    visibility: visible
}

.bio-card-wrapper {
    display: block;
    height: 100%;
    overflow-y: scroll;
    overflow-y: auto
}

@media(min-width:48em) {
    .bio-card-wrapper {
        display: flex
    }
}

.bio-card-image {
    width: 100%
}

@media(min-width:48em) {
    .bio-card-image {
        min-width: 338px
    }
}

.bio-card-image img {
    width: 100%
}

@media(min-width:48em) {
    .bio-card-image img {
        width: auto
    }
}

.bio-card-content {
    padding: 2rem 1.5rem
}

@media(min-width:48em) {
    .bio-card-content {
        padding: 0 1.5rem
    }
}

.bio-card-content p {
    margin-bottom: 2rem
}

[dir=rtl] .bio-card:hover .cta--arrow:after {
    -webkit-transform: translate(0) rotate(180deg);
    -moz-transform: translate(0) rotate(180deg);
    -ms-transform: translate(0) rotate(180deg);
    -o-transform: translate(0) rotate(180deg);
    transition: translate(0, 0) rotate(180deg)
}

[dir=rtl] .bio-card:hover .card-thumbnail__image:before,
[dir=rtl] .bio-card:hover.yellow .card-thumbnail__image:before {
    background: linear-gradient(297deg, #ffeb00, transparent 61.11%)
}

[dir=rtl] .bio-card:hover.red .card-thumbnail__image:before {
    background: linear-gradient(297deg, #ee402d, transparent 61.11%)
}

[dir=rtl] .bio-card:hover.green .card-thumbnail__image:before {
    background: linear-gradient(297deg, #6de354, transparent 61.11%)
}

[dir=rtl] .bio-card:hover.blue .card-thumbnail__image:before {
    background: linear-gradient(297deg, #60d4f2, transparent 61.11%)
}