@media (min-width: 1121px){
    .hero.page g-col h1{
        padding-right: 30%;
    }
}
/********** PAGE LAYOUT **********/
.learning-area .partners {
    padding-top: 0 !important;
}

.learning-area .loadmore {
    display: table;
    margin: 0 auto;
}

@media (min-width: 1121px) {
    .learning-area .page_title grid-column {
        padding-right: 30%;
    }
}

.learning-area no-results {
    text-align: center;
}

.learning-area no-results h2 {
    padding-right: 0 !important;
}

/***** SEARCH *****/
search-field {
    border-radius: 3.125rem;
    box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.15);
    height: 6.25rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 1.188rem;
    width: 6.25rem;
    transition: width 350ms ease;
    z-index: 2;
}

search-field.search {
    width: calc(100% - 2.376rem);
}

search-field.search #search_btn {
    right: 6.25rem;
}

search-field.search #reset_btn {
    opacity: 1;
    transition: opacity 350ms ease 350ms;
}

search-field #search_btn:hover svg,
search-field #reset_btn:hover svg {
    opacity: 0.8;
}

search-field input {
    cursor: text;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

search-field #search_btn {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 0;
    transition: right 350ms ease;
    z-index: 2;
}

search-field #search_btn svg {
    fill: #042849;
    height: 1.375rem;
    width: 1.375rem;
    opacity: 0.35;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: opacity 350ms ease;
}

search-field #reset_btn {
    cursor: pointer;
    display: block;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 350ms ease;
    z-index: 1;
}

search-field #reset_btn:before {
    background-color: rgba(0, 0, 0, 0.2);
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.5rem;
    transform: translateY(-50%);
}

search-field #reset_btn svg {
    fill: #042849;
    height: 1.125rem;
    width: 1.125rem;
    opacity: 0.35;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: opacity 350ms ease;
}

search-field input {
    color: #231E20;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.375rem;
    font-weight: 300;
    height: 6.25rem;
    line-height: 6.25rem;
    padding: 0 3.125rem;
}

search-field label {
    height: 6.25rem;
    line-height: 6.25rem;
    width: 6.25rem;
}

search-field svg {
    height: 2.063rem;
    width: 2.063rem;
}

@media (max-width: 1024px) {
    search-field.search #search_btn {
        right: 4.5rem;
    }
}

/***** FILTER *****/
.learning-area .filter {
    display: table;
    list-style-type: none;
    left: 0;
    margin: 0 0 0 auto;
    overflow: hidden;
    position: relative;
    opacity: 1;
    padding: 0;
    transition: height 350ms ease, opacity 350ms ease 350ms, left 0ms linear 0ms;
}

search-field.search ~ .filter {
    opacity: 0;
    left: -9999px;
    transition: height 350ms ease, opacity 350ms ease 0ms, left 0ms linear 350ms;
}

.learning-area .filter li {
    display: block;
    float: left;
}

.learning-area .filter li + li {
    margin-left: 2rem;
}

.learning-area .filter a {
    background-color: #C2CD23;
    border-radius: 50%;
    display: block;
    height: 6.25rem;
    position: relative;
    transition: background-color ease 350ms;
    width: 6.25rem;
}

.learning-area .filter a:hover,
.learning-area .filter a.current {
    background-color: #012F5F;
}

.learning-area .filter a:before {
    display: none !important;
}

.learning-area .filter a img {
    height: 3.125rem;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.125rem;
    transform: translateX(-50%) translateY(-50%);
}

.learning-area .filter li span {
    color: #A7A9AD;
    cursor: default;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 1rem 0 0 0;
    text-align: center;
    text-transform: uppercase;
}

/***** FILTER *****/
@media (min-width: 1621px) {
    search-field {
        top: 6rem;
    }

    .filter_search {
        padding-top: 6rem;
    }
}

@media (min-width: 769px) and (max-width: 1620px) {
    search-field {
        top: 4.5rem;
    }

    .filter_search {
        padding-top: 4.5rem;
    }
}

@media (max-width: 1000px) {
    .learning-area .filter li + li {
        margin-left: 1rem;
    }

    .learning-area .filter a {
        height: 4.5rem;
        margin: 0 auto;
        width: 4.5rem;
    }

    .learning-area .filter a img {
        height: 2rem;
        width: 2rem;
    }

    .learning-area .filter li span {
        font-size: 0.625rem;
    }

    search-field {
        height: 4.5rem;
        width: 4.5rem;
    }

    search-field input {
        border-radius: 2.25rem;
        height: 4.5rem;
        line-height: 4.5rem;
        padding: 0 5.5rem 0 2.25rem;
    }

    search-field label {
        height: 4.5rem;
        line-height: 4.5rem;
        width: 4.5rem;
    }

    search-field svg {
        height: 1.875rem;
        width: 1.875rem;
    }
}

@media (max-width: 540px) {
    search-field.search ~ .filter {
        height: 0 !important;
    }

    .learning-area .filter {
        display: block;
        margin: 0;
    }

    .learning-area .filter li {
        margin-left: 0 !important;
        margin-bottom: 1rem;
        margin-right: 1rem;
    }

    .learning-area .filter li span {
        margin: 0.25rem 0 0 0;
    }

    search-field {
        left: 0.938rem;
    }
}

@media (min-width: 469px) and (max-width: 768px) {
    search-field {
        top: 3rem;
    }

    .filter_search {
        padding-top: 3rem;
    }
}

@media (max-width: 468px) {
    search-field {
        top: 2rem;
    }

    .filter_search {
        padding-top: 2rem;
    }
}

/***** DETAIL *****/
.learning-area.list.small,
.delivered_by,
.supporters_partners {
    padding-top: 0 !important;
}

.learning-area.story_content {
    position: relative;
    z-index: 2;
}

.publication .image * {
    width: 100% !important;
    margin-left: 0 !important;
}

.publication .image img {
    position: relative;
}

.publication .image .btn {
    line-height: 4.375rem;
    height: 4.375rem;
    padding: 0;
    text-align: center;
}

.learning-area.story_content h1 + span {
    color: #231E20;
    display: block;
    font-size: 1.375rem;
    line-height: 1.5rem;
    margin-top: 1.375rem;
    margin-bottom: 1.56rem;
    padding-left: 2.5rem;
    position: relative;
}

.learning-area.story_content h1 + span img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.learning-area.story_content h1 + span:after {
    background-color: #ED973B;
    content: "";
    display: block;
    height: 2px;
    left: -2.5rem;
    margin-top: 2rem;
    margin-bottom: 1.56rem;
    position: relative;
    width: 3.125rem;
}

.learning-area.story_content .sidebar a.btn {
    padding: 0 !important;
    text-align: center;
    width: 100%;
    display: block;
}

@media (min-width: 1121px) {
    .learning-area.story_content .download {
        display: none;
    }
}

@media (max-width: 1120px) {
    .learning-area.story_content .download {
        margin-top: 2.25rem;
        line-height: 4.375rem;
        height: 4.375rem;
        padding: 0 2.5rem;
    }
}

@media (min-width: 1621px) {
    .learning-area.story_content .content:not(.blogs) {
        width: calc(100% - 19.99999999997% - 32rem);
        margin-left: 6.6666666667%;
    }

    .learning-area.story_content .content.blogs {
        width: 60%;
        margin-left: 13.3333333333%;
    }

    .learning-area.story_content .sidebar {
        width: 32rem;
        margin-left: 6.6666666667%;
    }

    .learning-area.story_content .content > * {
        margin-left: 11.08%;
        width: 88.92%;
    }

    .learning-area.story_content .content > blockquote,
    .learning-area.story_content .content > content-embed {
        margin-left: 0%;
        width: 100%;
    }

    .learning-area #floating-sidebar {
        width: 29.625rem;
    }
}

@media (min-width: 1321px) and (max-width: 1620px) {
    .learning-area.story_content .content:not(.blogs) {
        width: calc(100% - 19.99999999997% - 27rem);
        margin-left: 6.6666666667%;
    }

    .learning-area.story_content .content.blogs {
        width: 73.3333333333%;
        margin-left: 13.3333333333%;
    }

    .learning-area.story_content .sidebar {
        width: 27rem;
        margin-left: 6.6666666667%;
    }

    .learning-area.story_content .content > * {
        margin-left: 12.5%;
        width: 87.5%;
    }

    .learning-area.story_content .content > blockquote,
    .learning-area.story_content .content > content-embed {
        margin-left: 0%;
        width: 100%;
    }

    .learning-area #floating-sidebar {
        width: 24.625rem;
    }
}

@media (min-width: 971px) and (max-width: 1320px) {
    .learning-area.story_content .content:not(.blogs) {
        width: calc(93.33333333333% - 25rem);
    }

    .learning-area.story_content .content.blogs {
        width: 73.3333333333%;
        margin-left: 13.3333333333%;
    }

    .learning-area.story_content .sidebar {
        width: 25rem;
        margin-left: 6.6666666667%;
    }

    .learning-area #floating-sidebar {
        width: 22.625rem;
    }
}

@media (max-width: 970px) {
    .learning-area.story_content .content a.btn {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 970px) {
    .learning-area.story_content .content,
    .learning-area.story_content .sidebar {
        width: 86.66666666666%;
        margin-left: 6.6666666667%;
    }
}

@media (min-width: 971px) {
    .learning-area #floating-sidebar {
        opacity: 0;
        transition: opacity 750ms ease;
    }

    .learning-area #floating-sidebar.visible {
        opacity: 1;
    }
}

delivered-by {
    background-color: #ebebeb;
    display: block;
    position: relative;
}

delivered-by figure {
    background-size: cover !important;
    background-position: center !important;
    margin: 0;
}

delivered-by text-content {
    box-sizing: border-box;
    display: block;
    position: relative;
}


@media (min-width: 621px) {
    delivered-by figure {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 50%;
    }

    delivered-by text-content {
        margin-left: 50%;
        min-height: 16.25rem;
        padding: 3.125rem;
        width: 50%;
    }
}

@media (max-width: 620px) {
    delivered-by figure {
        display: block;
        position: relative;
        height: 0;
        padding-bottom: 50%;
    }

    delivered-by text-content {
        margin-left: 0%;
        padding: 3.125rem;
    }
}

@media (max-width: 468px) {
    delivered-by text-content {
        padding: 1.875rem;
    }
}

@media (min-width: 1621px) {
    .delivered_by grid-row:first-of-type {
        margin-bottom: 5.625rem;
    }
}

@media (min-width: 769px) and (max-width: 1620px) {
    .delivered_by grid-row:first-of-type {
        margin-bottom: 4.25rem;
    }
}

@media (min-width: 469px) and (max-width: 768px) {
    .delivered_by grid-row:first-of-type {
        margin-bottom: 3.5rem;
    }
}

@media (max-width: 468px) {
    .delivered_by grid-row:first-of-type {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 769px) {
    .supporters_partners ul {
        display: table;
        width: 100%;
    }

    .supporters_partners ul li {
        display: block;
        float: left;
        width: calc(50% - 1.5rem);
    }

    .supporters_partners ul li:nth-child(even) {
        margin-left: 3rem;
    }
}

/* delivered-by,
content-embed,
.supporters_partners li,
.learning-area.list.small .items a {
  visibility: hidden;
} */

#floating-sidebar {
    opacity: 0;
    position: relative;
    top: 0;
}

#floating-sidebar.fixed {
    position: fixed;
    top: 138px !important;
    transition: top 0ms linear, opacity 0ms linear;
}

@media (max-width: 970px) {
    #floating-sidebar {
        margin-top: 2rem;
        max-width: 500px;
        opacity: 1;
    }
}

@media (max-width: 970px) {
    #floating-sidebar {
        margin-left: auto;
        margin-right: auto;
    }
}


/***** AUTHOR *****/
post-author {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    min-height: 5.125rem;
    padding-left: 7.125rem;
    position: relative;
    width: 100%;
    z-index: 10;
}

post-author > figure {
    border-radius: 50%;
    display: block;
    float: left;
    height: 5.125rem;
    margin: 0;
    overflow: hidden;
    position: absolute;
    transform: translate3d(0, 0, 0);
    top: 0;
    left: 0;
    width: 5.125rem;
}

post-author img {
    display: block;
    width: 101%;
}

post-author text-content {
    display: block;
    position: relative;
}

post-author text-content strong {
    color: #000;
    display: block;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 100%;
    white-space: nowrap;
}

post-author text-content strong ~ span {
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

post-author text-content strong + span {
    font-weight: 500;
}

post-author text-content span:blank {
    display: none;
}

.learning-area.list .items a date {
    color: #231E20;
    display: block;
    font-size: 1.25rem;
    margin-top: 0.75rem;
}

.page_title {
    background-color: #000;
    display: block;
    position: relative;
}

.page_title figure {
    background-size: cover !important;
    background-position: center !important;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    transition: opacity 750ms ease;
    z-index: 1;
}

.page_title grid-container {
    position: relative;
    z-index: 10;
}

.page_title h1 {
    color: #FFF;
}

.page_title date {
    color: #FFF;
    font-size: 1.375rem;
    font-weight: 300;
}


.page_title.visible figure {
    opacity: 0.5;
}

@media (min-width: 1621px) {
    .page_title {
        padding: 21.25rem 0 6.688rem 0;
    }

    .page_title.with_submenu {
        padding-bottom: 9.375rem;
    }
}

@media (min-width: 1221px) and (max-width: 1620px) {
    .page_title {
        padding: 21% 0 8.25% 0;
    }

    .page_title.with_submenu {
        padding-bottom: 9.25%;
    }
}

@media (min-width: 971px) and (max-width: 1220px) {
    .page_title {
        padding: 16rem 0 5.063rem 0;
    }

    .page_title.with_submenu {
        padding-bottom: 7.063rem;
    }
}

@media (min-width: 769px) and (max-width: 970px) {
    .page_title {
        padding: 13rem 0 4rem 0;
    }

    .page_title.with_submenu {
        padding-bottom: 5rem;
    }
}

@media (min-width: 469px) and (max-width: 768px) {
    .page_title {
        padding: 12rem 0 3.5rem 0;
    }

    .page_title.with_submenu {
        padding-bottom: 4.5rem;
    }
}

@media (max-width: 468px) {
    .page_title {
        padding: 11rem 0 3rem 0;
    }
}