* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #5f259f;
    color: white;
    margin: 0;
    padding: 0;
}

*:focus {
    outline: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.white-header #black-logo {
    display: none !important;
    max-width: 140px
}

.menu-open .white-header #black-logo {
    display: block !important
}

.menu-open .white-header #white-logo {
    display: none !important;
    max-width: 140px
}

.et-db #et-boc .et-l .et_pb_sticky.et_pb_section_0_tb_header.et_pb_section.white-header {
    background-color: transparent !important;
}

.section-browse-resources-browser .link-sec a {
    padding-right: 20px;
    border-bottom: 1px solid;
    text-decoration: none;
}

.section-browse-resources-browser .link-sec .arrow-down::before {
    /*content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" fill="white"/></svg>');*/
    content: "";
    background-image: url(../images/down-arrow-white.svg);
    display: inline-block;
    margin-right: 8px;
    width: 12px;
    height: 10px;
    position: absolute;
    margin-left: 8px;
    background-position: center center;
    margin-top: 5px;
    background-repeat: no-repeat;
}

.section-browse-resources-browser .link-sec a:hover .arrow-down::before {
    background-image: url(../images/down-arrow-yellow.svg);
}

.section-browse-resources h2 {
    font-size: 64px;
    margin-bottom: 20px;
    margin-top: 0;
    font-weight: bold;
    color: #fff;
}

.year-section {
    margin-bottom: 10px;
    display: flex;
}

.year-sidebar {
    width: 25%;
    padding-right: 20px;
}

figure {
    padding-bottom: 58%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 40px;
}

.year-title {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
}

.year-description {
    font-size: 16px;
    margin-bottom: 10px;
}

.view-all {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.cards {
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 40px;
}

.card {
    padding: 0 15px;
}

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

.download-link {
    font-size: 16px;
    color: #ffdc00;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.download-link:hover {
    color: #fff;
}

.card-title {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.extra-content p {
    margin-bottom: 20px;
}

.card-description {
    font-size: 14px;
    margin-bottom: 10px;
}

figure {
    margin: 0 0 30px;
}

.section-browse-resources {
    padding: 100px 0;
}

.read-more {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.read-more:hover {
    color: #FFE800;
}

.read-more.read-less { font-size: 12px;}

.card-badge {
    background-color: #FFD700;
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 0 0 0 8px;
    position: absolute;
    top: 0;
    right: 0;
}

.extra-content {
    display: none;
}

hr {
    width: 1598px;
    height: 7px;
    background-color: #fff;
    margin: 0 auto;
    max-width: 100%;
}

.slick-arrow {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    background-color: #FFE800;
    border: none;
    padding: 7px 18px;
    cursor: pointer;
    color: #000;
}

.slick-arrow.slick-prev {
    right: 85px;
    background-color: #fff;
}

.slick-arrow.slick-prev::after {
    content: " ";
}

.slick-arrow.slick-prev::before {
    content: "<";
    margin-right: 4px;
}

.slick-arrow:after {
    content: ">";
    margin-left: 4px;
}

.form-container input.email-input {
    padding: 10px;
    width: 100%;
    border: none;
    height: 35px;
    margin-bottom: 20px;
}

.form-container label {
    display: flex;
    color: #252525;
    font-size: 16px;
    margin-bottom: 10px;
    gap: 6px;
}

#popup-content {
    width: 475px;
    background-color: #ffe800;
    padding: 50px;
    color: white;
    margin: 0 auto;
    position: relative;
    max-width: 94%;
}

#popup-content form.wpcf7-form.sent .wpcf7-response-output {
    display: none;
}

#popup-content .wpcf7 form.init .wpcf7-response-output, 
#popup-content .wpcf7 form.resetting .wpcf7-response-output, 
#popup-content .wpcf7 form.submitting .wpcf7-response-output { display: none !important;}


.form-container input[type="radio"] {
    margin: 0;
}

.button-container {
    margin-top: 40px;
}

#popup-content button:not(.mfp-close) {
    background-color: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border: none;
    outline: none;
    transition: 0.4s;
    cursor: pointer;
}

#popup-content button:hover:not(.mfp-close),
#popup-content button:focus:not(.mfp-close) {
    background-color: #252525;
}

#popup-content {
    width: 475px;
    background-color: #ffe800;
    padding: 36px 50px 25px;
    color: white;
    margin: 0 auto;
    position: relative;
}

.wpcf7-not-valid-tip {
    position: relative;
    top: -11px;
}

#popup-content button:not(.mfp-close):hover,
#popup-content button:not(.mfp-close):focus,
.form-container .leform-button-small:hover {
    background-color: #252525 !important;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    color: black;
}

#popup-content-series {
    padding: 36px 50px;
}

.form-container .et_pb_button:after,
.form-container .et_pb_button:before {
    display: none;
}

.no-post-found {
    color: #fff;
    padding: 0 15px 70px;
}

.form-container span.wpcf7-list-item {
    margin-bottom: 0px;
    gap: 0px;
    margin-left: 0;
}

.form-container .leform-form-10 .leform-element,
.leform-progress-10 {
    padding: 0 !important;
}

.form-container input[type="radio"] {
    margin: 0;
}

.form-container span.wpcf7-spinner {
    display: none;
}

.button-container {
    margin-top: 0px;
}

.form-container .leform-col.leform-col-6 {
    width: auto !important;
    padding: 0 !important;
}

.form-container .leform-row.leform-element.leform-element-7 {
    margin-top: 10px;
}

#popup-content button:not(.mfp-close),
.form-container .leform-button-small,
.form-container button {
    background-color: #000;
    color: #fff;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 20px 6px !important;
    border: none;
    outline: none;
    transition: 0.4s;
    border-radius: 0;
    cursor: pointer;
    height: auto !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    margin-right: 12px;
    margin-bottom: 5px;
}

.card-wrap.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    /*width: 100%;*/
}

.section-browse-resources-cat .card-wrap.row {
    width: 100%;
}

.section-browse figure {
    margin: 0 0 38px;
}

.col-4 {
    width: 25%;
    margin-bottom: 90px;
}

.section-browse-resources-cat {
    padding: 100px 0 10px;
}

.section-browse-resources-browser {
    padding: 160px 0 93px;
}

.section-browse-resources-browser h1 {
    font-size: 85px;
    margin-bottom: 13px;
    margin-top: 0;
    color: #fff;
    font-weight: 700;
}

.section-browse-resources-browser h2 {
    font-size: 64px;
    font-weight: 100;
    margin: 0;
    line-height: 1;
    color: #fff;
}

.section-browse-resources-browser p {
    margin: 14px 0 28px;
    font-size: 16px;
}

.section-browse-resources-browser p b {    
    font-weight: 600;
    font-size: 24px;
}

.link-sec a {
    font-size: 14px;
    color: #fff;
    word-break: auto-phrase;
    text-decoration: underline;
    text-underline-offset: 8px;
    display: inline-block;
    margin-right: 45px;
    text-transform: uppercase;
    white-space: break-spaces;
}

.link-sec a i {
    font-style: normal;
    transform: rotate(180deg);
}

.link-sec .dashicons {
    width: 13px;
    height: 13px;
    font-size: 16px;
    margin-left: -1px;
}

.link-sec .dashicons-arrow-down-alt2:before {
    margin-top: 16px;
    position: relative;
    top: 3px;
}

.link-sec a:hover {
    color: #ffdc00;
}

.section-browse-type .row {
    display: flex;
    flex-wrap: wrap;
}

.section-browse-type .col-7 {
    width: 66.66%;
}

.section-browse-type .col-5 {
    width: 33.33%;
}

section.section-browse-type {
    padding: 115px 0 300px;
}

.cta-box {
    background-color: #ffe800;
    color: #000;
    padding: 45px 36px 30px;
}

.cta-box h2 {
    margin-top: 0;
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 700;
    line-height: 1.2;
    padding-bottom: 6px;
}

.cta-box p {
    margin-bottom: 30px;
    font-size: 18px;
}

.cta-box .btn {
    font-size: 16px;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    padding: 7px 20px;
    background-color: #fff;
    transition: 0.4s;
}

.resource-search form {
    width: 516px;
    max-width: 100%;
    display: flex;
    margin-bottom: 54px;
    flex-wrap: wrap;
}

.resource-search input.search-button {
    color: #231f20;
    padding: 7px 18px;
    border: none;
    background-color: #FFE800;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: 0.4s;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 0;
}

.resource-search input.search-button:hover {
    background-color: #000;
    color: #ffdc00;
}

.resource-search input.search-input {
    font-size: 14px;
    height: 40px;
    padding: 0 24px;
    border: none;
    color: #7d7d7d;
    width: 80%;
    border-radius: 0;
}

.resource-search input.search-input::placeholder {
    color: #7d7d7d;
}

.browse-type h2 {
    font-size: 56px;
    margin-top: 0;
    margin-bottom: 40px;
    color: #fff;
    font-weight: 700;
}

.cta-box .btn:hover {
    background-color: #000;
    color: #fff;
}

.cta-box p {
    margin-top: 0px;
}

#popup-content button[disabled],
.form-container button[disabled],
#popup-content button[disabled]:hover,
.form-container button[disabled]:hover {
    cursor: not-allowed !important;
    background-color: #7d7d7d !important
}

.section-browse-resources-browser + hr,
.section-browse-resources-cat + hr { max-width: 1160px; width: calc(80% - 40px);}


@media (max-width: 1400px) {
    .section-browse-resources-browser {
        padding: 70px 0 80px;
    }

    .section-browse-resources-browser h1 {
        font-size: 74px;
    }

    .section-browse-resources-browser h2 {
        font-size: 54px;
    }

    .section-browse-resources-browser p {
        font-size: 20px;
    }

    .section-browse-resources-cat {
        padding: 70px 0 10px;
    }

    .section-browse figure {
        margin: 0 0 20px;
    }

    .col-4 {
        margin-bottom: 45px;
    }

    .card-title {
        font-size: 18px;
    }

    .link-sec a {
        margin-right: 25px;
    }

    .browse-type h2 {
        font-size: 46px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    section.section-browse-type {
        padding: 80px 0 160px;
    }
}

@media (max-width: 1199px) {
    .col-4 {
        width: 33.33%;
    }

    .section-browse-resources-browser h1 {
        font-size: 70px;
    }

    .section-browse-resources-browser h2 {
        font-size: 42px;
    }

    .resource-search input.search-input {
        width: 64%;
    }

    .resource-search form {
        margin-bottom: 35px;
    }

    .link-sec a {
        margin-right: 30px;
        margin-bottom: 15px;
    }
}

@media (max-width: 991px) {
    .section-browse-type .col-7 {
        width: 100%;
        margin-bottom: 30px;
    }

    section.section-browse-type {
        padding: 60px 0 100px;
    }

    .section-browse-type .col-5 {
        width: 100%;
    }

}

@media (max-width: 768px) {

    .year-section {
        flex-direction: column;
    }

    .year-sidebar,
    .cards {
        width: 100%;
    }

    .col-4 {
        width: 50%;
    }

    .section-browse-resources-browser h1 {
        font-size: 52px;
    }

    .section-browse-resources-browser h2 {
        font-size: 32px;
    }

    .section-browse-resources-browser {
        padding: 45px 0 45px;
    }

    .section-browse-resources-browser p {
        font-size: 18px;
    }

    .section-browse-resources-cat {
        padding: 60px 0 10px;
    }

    .browse-type h2 {
        font-size: 42px;
    }

    .link-sec a {
        margin-right: 25px;
        margin-bottom: 15px;
    }

}

@media (max-width: 640px) {
    .col-4 {
        width: 100%;
    }

    .section-browse-resources-browser {
        padding: 15px 0 40px;
    }

    .section-browse-resources-browser h1 {
        font-size: 30px;
        padding-bottom: 0;
    }

    .section-browse-resources-browser h2 {
        font-size: 30px;
        padding-bottom: 0;
    }

    .section-browse-resources-browser p {
        font-size: 16px;
        font-weight: 400;
    }

    .section-browse-resources-browser p {
        margin: 14px 0 20px;
    }

    .card-title {
        font-size: 20px;
    }

    .col-4 {
        margin-bottom: 35px;
    }

    .browse-type h2 {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .resource-search input.search-button {
        padding: 3px 15px;
        border: none;
        cursor: pointer;
        transition: 0.4s;
        font-size: 16px;
        height: 45px;
    }

    .resource-search input.search-input {
        width: calc(100% - 100px);
        margin-bottom: 10px;
        padding: 0 10px;
        height: 45px;
    }

    .resource-search form {
        margin-bottom: 20px;
    }

    .cta-box {
        padding: 30px 15px 30px;
        display: flex;
        flex-wrap: wrap;
    }

    .cta-box h2 {
        font-size: 18px;
    }

    .cta-box .btn {
        font-size: 16px;
        font-weight: 600;
        padding: 7px 14px;
    }

    .cta-box p {
        margin-bottom: 10px;
        font-size: 16px;
        /*width: calc(100% - 101px);*/
    }

    .cta-box {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .col-4 {
        width: 100%;
    }

    .container {
        width: 100%;
    }
}