@charset "UTF-8";

/*------------------------------------------------------------------
[Custom Stylesheet]

Project: 2020 Annual Report
Last update: March, 2020
-------------------------------------------------------------------*/

@import "heritage-fonts.css";
@import "heritage-icons.css";
@import "heritage-ar-icons.css";


/*------------------------------------------------------------------
# [Color codes]

# White #fff, rgb(255,255,255)
# Black #111d22, rgb(17,29,34)
# Dark Gray #4c4c4c, rgb(76,76,76)
# Bluemine #3b8696, rgb(59,134,150)
# Glacier Blue #73a4bf, rgb(115,164,191)
# Sail Blue #bfe7f7, rgb(191,231,247)
# Lime #c4d82d, rgb(196,216,45)
# Deep Red #a0242a, rgb(160,36,42)
# Focus #36a367, rgb(54,163,103)
# Alert #ee28c0, rgb(238,40,192), border rgba(238,40,192,.5)
# Success #36a367, rgb(54,163,103), border #a9e2c2
# Info #297ad3, rgb(41,122,211), border #9ecdfc
# Notice #e9a00a, rgb(233,160,10), border #f9ce75
# Error #e33131, rgb(227,49,49), border #ffbbbb
# Indicator #ee28c0, rgb(238,40,192)

# */

/*------------------------------------------------------------------

/* COMMON STYLES */

:root {
    --white: #fff;
    --black: #111d22;
    --darkgray: #4c4c4c;
    --bluemine: #3b8696;
    --glacierblue: #73a4bf;
    --sailblue: #bfe7f7;
    --lime: #c4d82d;
    --deepred: #a0242a;
    --focus: #36a367;
    --alert: #ee28c0;
    --success: #36a367;
    --info: #297ad3;
    --notice: #e9a00a;
    --error: #e33131;
    --indicator: #ee28c0;
    --font-family-sans-serif: 'gotham a', 'gotham b', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
    --font-family-sans-serif-alt: 'gotham narrow a', 'gotham narrow b', arial, sans-serif;
    --font-family-serif: 'chronicle display a', 'chronicle display b', 'TimesNewRoman', 'Times New Roman', 'Times', 'Baskerville', 'Georgia', serif;
}

/* PAGE STYLES */

textarea:focus,
select:focus,
input:focus,
button:focus {
    outline: none;
}

/* NORMALIZE BUTTONS */
/*
    1. Change the font styles in all browsers.
    2. Remove the margin and padding in Firefox and Safari.
    Show the overflow in IE.
    3. Show the overflow in Edge.
    Remove the inheritance of text transform in Edge, Firefox, and IE.
    4. Remove the inheritance of text transform in Firefox.
    5. Correct the inability to style clickable types in iOS and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 2 */
}

button,
input {
    /* 3 */
    overflow: visible;
}

button,
select {
    /* 4 */
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    /* 5 */
    -webkit-appearance: button;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type="button"] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.homepage-title {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    height: 120px;
}

.heritage-icon-heritage_bell.bug {
    color: rgba(76,76,76,.25);
    font-size: 1rem;
    padding-left: .5rem;
}

.heritage-icon-heritage_logo.THF-logo {
    font-size: 4rem;
    color: var(--white);
    transition: color .3s ease;
}

.heritage-icon-heritage_logo.THF-logo:hover {
    color: rgba(255,255,255,.8);
}

.run-in-head {
    color: var(--indicator);
    font-weight: 700;
}

.staff-awards,
.named-interns,
.named-fellows,
.thf-board, 
.financials {
    font-size: .875rem;
    line-height: 1.25;
}

.staff-awards h6,
.named-interns h6,
.thf-board h6, 
.financials h6 {
    font-weight: 400;
    color: var(--bluemine);
}

.staff-awards p,
.named-interns p,
.thf-board p, 
.financials p {
    margin-bottom: .25em;
}

.staff-awards p span,
.named-interns p span,
.thf-board p span, 
.financials p span {
    font-style: italic;
    color: var(--darkgray);
}

.named-interns_grid {
    column-width: 13em;
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
    column-gap: 1em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}

.named-interns_grid-item {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid var(--lime);
    padding-bottom: .75em;
}

.named-fellows p {
    font-size: .875rem;
    line-height: 1.25;
    margin-bottom: .25em;
}

.named-fellows p span {
    font-size: 1rem;
    line-height: 1.5;
}

/* CUSTOM ORDERED LIST */
/*

ol {
    counter-reset: ar-2019-counter;
    list-style: none;
}

ol li {
    margin: 0 0 1.5em 0;
    line-height: 1.25;
    counter-increment: ar-2019-counter;
    position: relative;
}

ol li::before {
    content: counter(ar-2019-counter);
    color: rgba(238,40,192,1);
    font-size: 2rem;
    position: absolute;
    --size: 2rem;
    left: calc(-.75 * var(--size) - .625em);
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    top: -2px;
    border-radius: 50%;
    text-align: center;
}
*/

.thf-bythenumbers {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    color:var(--indicator);
}

.thf-bythenumbers.title {
    font-size: 1rem;
    color: var(--indicator);
}

.thf-bythenumbers_alt {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color:var(--indicator);
}


/* MAIN NAV */

.main-nav_ar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-family-sans-serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--white);
    background-color: rgba(37, 42, 47, .95);
    height: 4.375rem;
}

.logo-cell {
    background-color: rgba(37, 42, 47, 1);
}

.logo-cell:focus,
.logo-cell:hover {
    color: var(--lime);
    text-decoration: none;
    transition: color .3s ease;
}

.heritage-brand {
    display: flex;
    align-items: center;
    font-size: 1.3125rem;
    line-height: 1rem;
    height: auto;
    background-color: transparent;
}

.heritage-brand span {
    font-size: 1rem;
    margin-left: 1rem;
}

.main-nav_ar-homepage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-family-sans-serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--white);
    height: 4.375rem;
}

.heritage-brand_ar-homepage {
    display: flex;
    align-items: center;
    font-size: 3.25rem;
    line-height: 1rem;
    height: auto;
    background-color: transparent;
}

.logo-cell_ar-homepage {
    background-color: transparent;
    padding-top: 1.75em;
    transition: color .3s ease-in-out;
}

.logo-cell_ar-homepage:focus,
.logo-cell_ar-homepage:hover {
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color .3s ease;
}

.page-title {
    background-color: transparent;
}

.page-title a {
    color: var(--white);
    text-decoration: none;
}

.page-title a:hover {
    border-bottom: 2px solid var(--lime);
    transition: color .3s ease;
}

.trigger-drawer {
    background-color: rgba(37, 42, 47, 1);
    border: none !important;
    border-radius: 0 !important;
    transition: color .3s ease;
}

.trigger-drawer:hover {
    color: var(--lime);
}

.heritage-hamburger-menu {
    background-color: transparent;
    font-size: 1.25rem;
}

.page-content {
    font-family: var(--font-family-sans-serif);
    font-size: 1.4375rem;
    color: var(--black);
}

.social_icon-container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: auto;
}

.social_icon {
    position: relative;
    display: inline-block;
    height: 3.125rem;
    width: 3.125rem;
    background-color: transparent;
    border: 1px solid var(--white);
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 2.5;
    color: var(--white);
    text-align: center;
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    cursor: pointer;
    z-index: 999;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.social_icon.mobile {
    height: 2.8125rem;
    width: 2.8125rem;
    font-size: 1.15rem;
}

.social_icon:hover,
.social_icon.mobile:hover {
    text-decoration: none;
    color: var(--bluemine);
    background-color: rgba(255,255,255,.8);
}

.social_icon:active,
.social_icon.mobile:active {
    animation: gradient 100ms;
    background: var(--lime);
    border: 1px solid var(--lime);
    color: var(--bluemine);
}

@keyframes gradient {
    0% {
        background: radial-gradient(circle at center, rgba(196, 216, 45, 0) 0%, #fff 0%, #fff 100%);
    }

    25% {
        background: radial-gradient(circle at center, rgba(196, 216, 45, 0.3) 24%, #fff 25%, #fff 100%);
    }

    50% {
        background: radial-gradient(circle at center, rgba(196, 216, 45, 0.5) 49%, #fff 50%, #fff 100%);
    }

    75% {
        background: radial-gradient(circle at center, rgba(196, 216, 45, 0.8) 74%, #fff 75%, #fff 100%);
    }

    100% {
        color: #fff;
        background: radial-gradient(circle at center, rgba(196, 216, 45, 1) 99%, #fff 100%, #fff 100%);
    }
}

/* NAV SIDEBAR */

#sidebar {
    font-family: var(--font-family-sans-serif);
    font-weight: 500;
    line-height: 1.25;
    color: var(--white);
    position: fixed;
    width: 20.9375rem;
    right: -20.9375rem;
    height: 100vh;
    z-index: 9999;
    padding: 1.25rem 3.125rem 3.4375rem 1.25rem;
    background: var(--bluemine);
    transition: all 0.3s;
    overflow-y: scroll;
}

#sidebar.active {
    right: 0;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

#dismiss {
    color: var(--lime);
    font-size: 1.5rem;
    text-align: right;
    margin-bottom: 1.75rem;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#dismiss:hover {
    color: var(--white);
}

#sidebar .components {
    border-bottom: 2px solid var(--white);
    margin-bottom: 1.25rem;
    padding-bottom: .3125rem;
}

#sidebar .components em {
    font-family: var(--font-family-serif);
    font-size: 1.1875rem;
    font-weight: 400;
    font-style: italic;
}

#sidebar .sidebar-header {
    font-size: .875rem;
    letter-spacing: -.00625rem;
    color: var(--lime);
    margin-bottom: 1.25rem;
    padding-top: .625rem;
}

#sidebar ul, #sidebar
li {
    list-style: none;
}

#sidebar li {
    margin: 0;
    padding: 0;
}

#sidebar ul li a {
    display: block;
    font-weight: 500;
    color: var(--white);
    font-size: 1rem;
    list-style: none;
    margin-bottom: 1.5625rem;
}

#sidebar ul li a:hover,
#sidebar ul li a:active,
#sidebar ul li a.active {
    color: var(--lime);
    text-decoration: none;
}

#sidebar .homelink {
    margin: 1.5625rem 0;
}

#sidebar .homelink a {
    color: var(--white);
}

#sidebar .homelink a:hover,
#sidebar .homelink a:active,
#sidebar .homelink a.active {
    border-bottom: 2px solid var(--lime);
    text-decoration: none;
    transition: color .3s ease;
}

#sidebar .homelink-circle {
    border: .09375rem solid rgba(229, 231, 232, .2);
    border-radius: 50%;
    text-align: center;
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.05;
    display: inline-block;
}

#sidebar .homelink i {
    margin-right: .9375rem;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.overlay.active {
    display: block;
    opacity: 1;
}

/* RESPONSIVE STYLES ALL */

@media all and (min-width: 1024px) {}

@media all and (min-width: 1200px) {}

@media all and (max-width: 1024px) {

    .main-nav_ar {
        height: 3.6875rem;
    }

    .main-nav_ar .heritage-brand span,
    .main-nav_ar .page-title {
        font-size: .875rem;
    }

}

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

    .main-nav_ar {
        height: 3.125rem;
    }

    .main-nav_ar .heritage-brand span {
        display: none !important;
    }

    .main-nav_ar .heritage-hamburger-menu {
        font-size: 1rem;
    }

}

@media all and (max-width: 576px) {}