.modal {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: hsla(0, 0%, 97%, .8)
}

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

.modal-close-button:hover {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none
}

[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)
}

.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)
}

.custom-scrollbar,
.modal-content {
    overflow-x: auto;
    overflow-y: auto;
    scroll-behavior: smooth
}

.custom-scrollbar::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

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

.custom-scrollbar::-webkit-scrollbar-corner,
.modal-content::-webkit-scrollbar-corner {
    display: none
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.modal-content::-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
}

.modal {
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    visibility: hidden;
    z-index: 99
}

@media(min-width:48em) {
    .modal {
        align-items: center
    }
}

.modal-content {
    background: #fff;
    max-width: 90rem;
    padding: 4rem .75rem .75rem;
    position: relative;
    width: 100%
}

@media(min-width:48em) {
    .modal-content {
        margin-left: 5rem;
        margin-right: 5rem;
        max-height: calc(100vh - 291px);
        padding: 4rem
    }
}

.modal-close-button {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIyLjUgNDRDMzQuOTI2IDQ0IDQ1IDM0LjE1IDQ1IDIyUzM0LjkyNiAwIDIyLjUgMCAwIDkuODUgMCAyMnMxMC4wNzQgMjIgMjIuNSAyMloiIGZpbGw9IiNGQUZBRkEiLz48cGF0aCBkPSJNMzEuMDY0IDEzLjY4NCAxNC40MzEgMzAuMzE2TTMxLjA2NCAzMC4zMTYgMTQuNDMyIDEzLjY4NCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=) no-repeat 0;
    border: 0;
    cursor: pointer;
    font-size: 0;
    height: 45px;
    position: absolute;
    right: .75rem;
    top: .75rem;
    width: 45px
}

@media(min-width:48em) {
    .modal-close-button {
        right: 1.5rem;
        top: 1.5rem
    }
}

.modal.open {
    opacity: 1;
    visibility: visible
}

[dir=rtl] .modal-close-button {
    left: 16px;
    right: unset
}

:lang(my) .modal-close-button {
    font-size: 0
}