.communityEvents .communityEventFeatured:after {
    content: "";
    display: table;
    clear: both;
}

/* Micro Reset */
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html, body, div, form, fieldset, legend, label, ul, li {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    text-align: left;
    vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption {
    font-weight: normal;
    font-size: inherit;
    margin: 0;
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
    display: block;
}

ul, li {
    list-style: none;
}

.clear:after {
    content: '';
    display: block;
    clear: both;
}

/**
 * Index
 *
 * Structural styles associated with high level elements
 * like page background color, etc... Place any high level
 * typography within typography.scss please!
 */
/**
 * High level structural stuff
 */
html {
    -webkit-text-size-adjust: none;
}

body {
    background: #fff;
    padding-top: 145px;
}

.container {
    overflow: hidden;
    position: relative;
    margin: 20px auto;
    padding-left: 10px;
    padding-right: 10px;
    width: 1244px;
    font-size: 0;
}

    .container.firstContainer {
        margin-top: 10px;
    }

    .container > * {
        display: inline-block;
    }

/**
 * Media
 */
.thumbnail {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover !important;
    cursor: pointer;
    -webkit-transition: 500ms ease opacity;
    transition: 500ms ease opacity;
}

    .thumbnail:hover {
        opacity: 0.8;
    }

/**
 * Mobile
 */
html[data-responsive='phone'] body {
    padding-top: 54px;
}

html[data-responsive='phone'] .padded, html[data-responsive='phone'] .paddedTop, html[data-responsive='phone'] .paddedBottom, html[data-responsive='phone'] .paddedLeft, html[data-responsive='phone'] .paddedRight {
    padding: 16px;
}

    html[data-responsive='phone'] .padded .padded, html[data-responsive='phone'] .padded .paddedLeft, html[data-responsive='phone'] .padded .paddedRight, html[data-responsive='phone'] .paddedTop .padded, html[data-responsive='phone'] .paddedTop .paddedLeft, html[data-responsive='phone'] .paddedTop .paddedRight, html[data-responsive='phone'] .paddedBottom .padded, html[data-responsive='phone'] .paddedBottom .paddedLeft, html[data-responsive='phone'] .paddedBottom .paddedRight, html[data-responsive='phone'] .paddedLeft .padded, html[data-responsive='phone'] .paddedLeft .paddedLeft, html[data-responsive='phone'] .paddedLeft .paddedRight, html[data-responsive='phone'] .paddedRight .padded, html[data-responsive='phone'] .paddedRight .paddedLeft, html[data-responsive='phone'] .paddedRight .paddedRight {
        padding: 0;
    }

    html[data-responsive='phone'] .paddedLeft.alignBottom {
        padding-bottom: 0;
    }

    html[data-responsive='phone'] .paddedLeft.three {
        padding-bottom: 0;
    }

    html[data-responsive='phone'] .paddedLeft.sectionHeadline {
        padding-bottom: 0;
    }

html[data-responsive='phone'] .column.three.paddedLeft.alignBottom > br {
    display: none;
}

html[data-responsive='phone'] .group, html[data-responsive='phone'] .container {
    width: 100%;
    padding: 0;
}

    html[data-responsive='phone'] .group .column, html[data-responsive='phone'] .container .column {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    html[data-responsive='phone'] .group.firstContainer, html[data-responsive='phone'] .container.firstContainer {
        margin-top: 24px;
    }

    html[data-responsive='phone'] .group .borderHorizontal, html[data-responsive='phone'] .container .borderHorizontal {
        margin-left: 0;
        margin-right: 0;
    }

html[data-responsive='phone'] .column {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

html[data-responsive='phone'] .marginBottomBig {
    margin-bottom: 24px;
}

html[data-responsive='phone'] .hero .image {
    height: 360px;
}

html[data-responsive='phone'] h7, html[data-responsive='phone'] h6 {
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 30px;
    line-height: 1.875rem;
}

html[data-responsive='phone'] .individualEvent h7 {
    display: block;
    margin-bottom: 1em;
}

    html[data-responsive='phone'] .individualEvent h7 br {
        display: none;
    }

html[data-responsive='phone'] .table, html[data-responsive='phone'] .group.nine {
    padding: 16px;
}

html[data-responsive='phone'] .tableHead {
    display: none;
}

html[data-responsive='phone'] .imgBox {
    float: none !important;
}

html[data-responsive='phone'] .greyBox .group {
    padding-bottom: 36px;
}

html[data-responsive='phone'] #footer {
    margin-top: 0;
}

    html[data-responsive='phone'] #footer > .column .paddedRight {
        padding-left: 0;
        padding-right: 0;
    }

/**
 * Header
 * - Logo
 * - Primary navigation
 * - Search
 * - Contact
 */
.headerContainer {
    background: #fff;
    height: 145px;
    left: 0;
    position: fixed;
    margin: 0;
    right: 0;
    top: 0;
    z-index: 999;
}

    .headerContainer .container, .headerContainer .column {
        height: 100%;
    }

#header {
    overflow: visible;
    margin-bottom: 0;
    margin-top: 0;
}

    #header:after {
        position: absolute;
        bottom: -1px;
        left: 20px;
        right: 20px;
        content: '';
        display: block;
        height: 1px;
        background: rgba(0, 0, 0, 0.3);
    }

    #header .logo {
        display: inline-block;
        position: absolute;
        bottom: 20px;
        left: 0;
    }

        #header .logo .logoExpanded {
            background-image: url(./images/logo.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 105px;
            width: 171px;
        }

        #header .logo .logoCollapsed {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 339px;
            height: 13px;
            opacity: 0;
            background-image: url(./images/logoType.svg);
            background-repeat: no-repeat;
            background-size: contain;
            font-size: 0 !important;
        }

        #header .logo a {
            display: block;
        }

            #header .logo a:hover {
                opacity: 0.9;
            }

    #header .donate {
        font-size: 13px;
        font-size: 0.8125rem;
        line-height: 13px;
        line-height: 0.8125rem;
        color: #808080;
        height: 125px;
        position: absolute;
        left: 305px;
        bottom: 0;
    }

        #header .donate a {
            background: #3284bf;
            display: inline-block;
            color: #fff;
            padding: 0.65em 1em;
            margin: 0 10px 0 0;
        }

            #header .donate a:hover {
                background: #b3b3b3;
            }

    #header .search {
        position: absolute;
        right: 0;
        bottom: 10px;
        z-index: 9;
    }

        #header .search .searchIcon {
            background: url(images/search.svg) no-repeat center;
            position: absolute;
            top: 0px;
            right: -6px;
            height: 30px;
            width: 30px;
            pointer-events: none;
        }

        #header .search input {
            font-size: 16px;
            font-size: 1rem;
            line-height: 25px;
            line-height: 1.5625rem;
            margin-top: 4px;
            background: #fff;
            border: 0;
            outline: 0;
            padding: 0 25px 0 0;
            text-align: right;
            font-family: 'Atlas', Arial, Helvetica, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

    #header .initiative {
        font-size: 13px;
        font-size: 0.8125rem;
        line-height: 20px;
        line-height: 1.25rem;
        color: #808080;
        height: 128px;
        padding: 6px 0 0 0;
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: right;
    }

        #header .initiative strong {
            display: block;
            color: #3284bf;
            font-weight: 600;
            text-transform: uppercase;
        }

            #header .initiative strong:after {
                content: '';
                display: inline-block;
                position: relative;
                top: 2px;
                width: 14px;
                height: 14px;
                margin-left: 4px;
                -webkit-transform: rotate(-135deg);
                -ms-transform: rotate(-135deg);
                transform: rotate(-135deg);
                pointer-events: none;
                background-image: url('../assets/images/navArrow.svg');
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

    /**
 * Navigation
 */
    #header .navigation {
        font-size: 0;
        position: absolute;
        bottom: 7px;
        right: 0;
        width: 898px;
        pointer-events: none;
        z-index: 19;
    }

        #header .navigation a {
            font-size: 16px;
            font-size: 1rem;
            color: #262626;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 0;
            padding: 0 21px 0 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: auto;
            cursor: default;
        }

            #header .navigation a[data-section]:after {
                font-size: 13px;
                font-size: 0.8125rem;
                content: '';
                display: inline-block;
                width: 11px;
                height: 11px;
                margin-left: 4px;
                pointer-events: none;
                background-image: url('../assets/images/navArrow.svg');
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }

            #header .navigation a:hover, #header .navigation a:hover:after, #header .navigation a.active:after {
                color: #3284bf;
            }

/**
 * Sub navigation
 */
.subNavigation {
    line-height: 20px;
    line-height: 1.25rem;
    background: #fff;
    border-top: 1px solid #b3b3b3;
    display: none;
    height: 156px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    /**
   * Used on subpages
   */
}

    .subNavigation.open {
        display: block;
        border-top: 1px solid transparent;
        position: relative;
        top: auto;
        right: auto;
        left: auto;
    }

        .subNavigation.open:after {
            width: 1204px;
        }

    .subNavigation:after {
        position: absolute;
        bottom: -1px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
    }

    .subNavigation .subSection {
        display: block;
    }

    .subNavigation .container {
        margin-top: 30px;
        margin-bottom: 30px;
    }

#header.headerTop .subNavigation:after {
    background: #bbb;
}

#header .subSection {
    margin-left: -20px;
    margin-right: -20px;
}

.subNavigation a {
    font-size: 16px;
    font-size: 1rem;
    color: #000;
    display: block;
    font-weight: 600;
}

    .subNavigation a:hover, .subNavigation a.active {
        color: #3284bf;
    }

.subNavigation span {
    font-weight: normal;
}

a.external {
    position: relative;
}

    a.external::after {
        content: '';
        display: inline-block;
        position: relative;
        top: 2px;
        width: 14px;
        height: 14px;
        margin-left: 4px;
        -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        transform: rotate(-135deg);
        pointer-events: none;
        background-image: url('../assets/images/navArrow.svg');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

/**
 * Mobile Navigation
 */
.navigationMobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .navigationMobile .mobileBar {
        background: #fff;
        height: 53px;
        line-height: 53px;
        padding-top: 3px;
        position: relative;
        z-index: 9;
    }

        .navigationMobile .mobileBar:after {
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            content: '';
            display: block;
            height: 1px;
            background: rgba(0, 0, 0, 0.3);
        }

        .navigationMobile .mobileBar .logoMobile {
            float: left;
            margin: 18px 0 0 15px;
            width: 139px;
            height: 14px;
            background-image: url(./images/logoTypeMobile.svg);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            font-size: 0 !important;
        }

        .navigationMobile .mobileBar .menuLink {
            display: block;
            cursor: pointer;
            padding: 0 15px;
            text-align: right;
            width: 100%;
        }

    .navigationMobile .navigation {
        position: fixed;
        top: 53px;
        bottom: -1px;
        left: 0;
        right: 0;
        overflow: auto;
        display: none;
    }

    .navigationMobile .links {
        display: none;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

        .navigationMobile .links:after {
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            content: '';
            display: block;
            height: 1px;
            background: rgba(0, 0, 0, 0.3);
        }

        .navigationMobile .links > a {
            font-size: 16px;
            font-size: 1rem;
            color: #262626;
            background: #eee;
            border-top: 1px solid #fff;
            font-weight: 600;
            display: block;
            margin-bottom: 0;
            height: 53px;
            padding: 15px 0 0 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: auto;
        }

            .navigationMobile .links > a.active {
                background: #3284bf;
                border-top: 1px solid #3284bf;
                color: #fff;
            }

        .navigationMobile .links div[data-section] {
            background: #fff;
            display: none;
            padding: 15px 0 10px;
        }

            .navigationMobile .links div[data-section] > * {
                display: block;
            }

            .navigationMobile .links div[data-section] a {
                color: #000;
            }

html[data-responsive='phone'] .headerContainer {
    display: none;
}

html[data-responsive='phone'] .navigationMobile {
    display: block;
}

html[data-responsive='phone'] .subNavigation {
    display: none;
}

@media only screen and (max-width: 1250px) {
    .headerContainer {
        position: absolute;
    }
}

/**
 * Grid
 */
.column {
    font-size: 16px;
    font-size: 1rem;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    vertical-align: top;
}

    .column.one {
        width: 82px;
    }

    .column.two {
        width: 184px;
    }

    .column.three {
        width: 286px;
    }

    .column.four {
        width: 388px;
    }

    .column.five {
        width: 490px;
    }

    .column.six {
        width: 592px;
    }

    .column.seven {
        width: 694px;
    }

    .column.eight {
        width: 796px;
    }

    .column.nine {
        width: 898px;
    }

    .column.ten {
        width: 1000px;
    }

    .column.eleven {
        width: 1102px;
    }

    .column.twelve {
        width: 1204px;
    }

    .column.center {
        width: 796px;
        margin-left: 214px;
    }

/**
 * Groups contain columns of columns
 */
.group {
    position: relative;
    vertical-align: top;
}

    .group.two {
        width: 184px;
    }

    .group.three {
        width: 296px;
    }

    .group.four {
        width: 408px;
    }

    .group.five {
        width: 510px;
    }

    .group.six {
        width: 612px;
    }

    .group.six-half {
        width: 658px;
    }

    .group.seven {
        width: 714px;
    }

    .group.eight {
        width: 816px;
    }

    .group.nine {
        width: 918px;
    }

    .group.ten {
        width: 1020px;
    }

    .group.eleven {
        width: 1122px;
    }

    .group.twelve {
        width: 1204px;
    }

.alignTop {
    vertical-align: top;
}

.alignBottom {
    vertical-align: bottom;
}

.alignMiddle {
    vertical-align: middle;
}

.paddedTop {
    padding-top: 30px;
}

.paddedLeft {
    padding-left: 30px;
}

.paddedRight {
    padding-right: 30px;
}

.paddedBottom {
    padding-bottom: 30px;
}

.padded {
    padding: 30px;
}

.marginBottom {
    margin-bottom: 20px;
}

.marginBottomMedium {
    margin-bottom: 40px;
}

.marginBottomMediumHeading {
    margin-bottom: 34px;
}

.marginBottomBig {
    margin-bottom: 80px;
}

/**
 * Aspect ratios
 */
.square {
    background-color: #eee;
    height: 0;
    padding-bottom: 100%;
    width: 100%;
}

/**
 * Misc
 */
.borderHorizontal {
    background: #b3b3b3;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    vertical-align: top;
    height: 1px;
}

.coverLink {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.imageDimmer {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

/**
 * Global Typography
 *
 * Here we declare the root font size in PX, which is then
 * used to define the rest of the site with REM.
 *
 * Base styles for commonly used elements such as headings
 * are defined here too. Context-specific adjustments will
 * be contained within the top level of each sub section.
 */
body {
    color: #000;
    font-family: 'Atlas', Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16px;
    font-size: 1rem;
    line-height: 25px;
    line-height: 1.5625rem;
    -webkit-font-smoothing: antialiased;
}

.japanese {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a {
    color: #000;
}

h1, h2, h3, h4, h5, h6, h7 {
    display: block;
}

h2 {
    font-size: 68px;
    font-size: 4.25rem;
    line-height: 72px;
    line-height: 4.5rem;
    font-weight: 600;
}

h3 {
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 30px;
    line-height: 1.875rem;
    font-weight: 600;
    margin-bottom: 2px;
}

    h3.heading {
        margin-bottom: 34px;
    }

.marginBottomMediumHeading h3 {
    line-height: 26px;
    line-height: 1.625rem;
}

a h3 {
    color: #000;
}

a:hover h3 {
    color: #808080;
}

h4 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 21px;
    line-height: 1.3125rem;
    font-weight: 600;
}

h5 {
    font-size: 32px;
    font-size: 2rem;
    line-height: 40px;
    line-height: 2.5rem;
}

h6 {
    font-size: 32px;
    font-size: 2rem;
    line-height: 36px;
    line-height: 2.25rem;
    font-weight: 600;
}

h7 {
    font-size: 32px;
    font-size: 2rem;
    line-height: 40px;
    line-height: 2.5rem;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: capitalize;
}

    h7 a.grey {
        border-bottom: 1px solid #808080;
        padding-bottom: 5px;
    }

        h7 a.grey:hover {
            color: #000;
            border-bottom-color: #000;
        }

a h8 {
    color: #000;
}

a:hover h8 {
    color: #808080;
}




/**
 * Paragraph styles
 */
p {
    margin: 0;
    margin-bottom: 25px;
    margin-bottom: 1.5625rem;
}

    p:last-child {
        margin-bottom: 0;
    }

    p a {
        border-bottom: 1px solid #000;
        color: #000;
    }

        p a:hover {
            border-bottom-color: #3284bf;
            color: #3284bf;
        }

a {
    text-decoration: none;
}

/**
 * Sections
 */
.typeSmall {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 21px;
    line-height: 1.3125rem;
}

.typeMicro {
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 16px;
    line-height: 1rem;
}

.typeRegular {
    font-size: 16px;
    font-size: 1rem;
    line-height: 25px;
    line-height: 1.5625rem;
}

.typeLarge {
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 30px;
    line-height: 1.875rem;
    font-weight: 600;
}

.typeBold {
    font-weight: 600;
}

.typeLight {
    font-weight: 400;
}

.typeSmallBaseline {
    margin-top: 6px;
}

.sectionHeadline {
    position: absolute;
    top: 10px;
    left: 20px;
}

.borderBottomGrey {
    display: block;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 5px;
    font-weight: 600;
}

/**
 * Content
 */
.content > * {
    margin: 25px 0;
}

    .content > *:first-child {
        margin-top: 0;
    }

    .content > *:last-child {
        margin-bottom: 0;
    }

/**
 * Colors
 */
.greyDark {
    color: #262626;
}

.grey {
    color: #808080;
}

a.grey {
    border-bottom: 1px solid #b3b3b3;
}

.greyLight {
    color: #b3b3b3;
}

a.greyLight {
    border-bottom: 1px solid #b3b3b3;
}

.greyMed {
    color: #b3b3b3;
}

a.greyMed {
    border-bottom: 1px solid #b3b3b3;
}

.offWhite {
    color: #ddd;
}

a.offWhite {
    border-bottom: 1px solid #ddd;
}

.blue {
    color: #3284bf;
}

.white {
    color: #fff;
}

a.white {
    color: #fff;
    border-bottom-color: #fff;
    padding-bottom: 1px;
}

.greyBG {
    background: #b3b3b3;
}

.blueBG {
    background: #3284bf;
}

.hidden {
    display: none;
    opacity: 0;
}

/**
 * Transforms
 */
.uppercase {
    text-transform: uppercase;
}

.underline {
    border-bottom: 1px solid #000;
}

/**
 * Webfonts
 */
/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2013 Schwartzco Inc.
        License: 1409-XMXRZB     
*/
@font-face {
    font-family: 'Atlas';
    src: url('fonts/AtlasGrotesk-Light-Web.eot');
    src: url('fonts/AtlasGrotesk-Light-Web.eot?#iefix') format('embedded-opentype'), url('fonts/AtlasGrotesk-Light-Web.woff') format('woff'), url('fonts/AtlasGrotesk-Light-Web.ttf') format('truetype'), url('fonts/AtlasGrotesk-Light-Web.svg#Atlas Grotesk Web') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Atlas';
    src: url('fonts/AtlasGrotesk-Medium-Web.eot');
    src: url('fonts/AtlasGrotesk-Medium-Web.eot?#iefix') format('embedded-opentype'), url('fonts/AtlasGrotesk-Medium-Web.woff') format('woff'), url('fonts/AtlasGrotesk-Medium-Web.ttf') format('truetype'), url('fonts/AtlasGrotesk-Medium-Web.svg#Atlas Grotesk Web') format('svg');
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Atlas';
    src: url('fonts/AtlasGrotesk-Bold-Web.eot');
    src: url('fonts/AtlasGrotesk-Bold-Web.eot?#iefix') format('embedded-opentype'), url('fonts/AtlasGrotesk-Bold-Web.woff') format('woff'), url('fonts/AtlasGrotesk-Bold-Web.ttf') format('truetype'), url('fonts/AtlasGrotesk-Bold-Web.svg#Atlas Grotesk Web') format('svg');
    font-weight: 800;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Faktt';
    src: url('fonts/FaktSmConPro-Bold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

/**
 * Hero image
 *  - Overlayed text
 *  - Single image
 *  - Slick slideshow
 */
.hero {
    margin-top: 0;
    position: relative;
    overflow: visible;
}

    .hero .heroText {
        color: #fff;
        margin: 0 20px;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 29;
    }

    .hero .heroTitle {
        color: #fff;
        display: block;
        text-transform: uppercase;
        font-weight: 600;
        position: absolute;
        top: -40px;
        left: 0;
        right: 0;
        font-size: 16px;
        font-size: 1rem;
        line-height: 25px;
        line-height: 1.5625rem;
    }

    .hero .heroHeadline {
        font-size: 68px;
        font-size: 4.25rem;
        line-height: 72px;
        line-height: 4.5rem;
        color: #fff;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        text-align: center;
        text-transform: capitalize;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
    }

    .hero a.heroHeadline:hover {
        opacity: 0.8;
    }

    .hero .heroHeadlineSmall {
        font-size: 32px;
        font-size: 2rem;
        line-height: 36px;
        line-height: 2.25rem;
        font-weight: 400;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70%;
        text-align: center;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

        .hero .heroHeadlineSmall a {
            color: #fff;
            border-bottom: 2px solid white;
        }

    .hero .heroSubHeadline {
        font-size: 44px;
        font-size: 2.75rem;
        line-height: 48px;
        line-height: 3rem;
        font-weight: 400;
    }

    .hero .heroCell {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .hero .heroDimmer {
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        bottom: 0;
        z-index: 19;
    }

    .hero .heroLabel {
        position: absolute;
        left: 50px;
        top: 20px;
        z-index: 20;
        color: white;
    }

    .hero .slick-slide {
        background: no-repeat center;
        background-size: cover !important;
        display: block;
        height: 550px;
        width: 1204px;
    }

    .hero .slick-progress {
        background: #3284bf;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 10px;
        z-index: 99;
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
    }

        .hero .slick-progress.slick-animate {
            -webkit-transition: -webkit-transform 5s linear;
            transition: transform 5s linear;
            -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
            transform: scaleX(1);
        }

    .hero .slick-dots {
        z-index: 29;
    }

        .hero .slick-dots li {
            margin: 0 7px;
            height: 25px;
            width: 25px;
        }

            .hero .slick-dots li button {
                border: 1px solid #fff;
                height: 25px;
                width: 25px;
                -webkit-transition: background 250ms ease;
                transition: background 250ms ease;
            }

                .hero .slick-dots li button:before {
                    content: '';
                }

            .hero .slick-dots li.slick-active button {
                background: #fff;
            }

    .hero .image {
        background: no-repeat center;
        background-size: cover !important;
        display: block;
        height: 550px;
        width: 1204px;
    }

        .hero .image.blue {
            background-color: #3284bf;
        }

    .hero h4 {
        position: absolute;
        top: 30px;
        left: 30px;
    }

/**
 * Events Carousel
 */
.eventsCarousel {
    height: 310px;
}

    .eventsCarousel .eventsTitle {
        background: #3284bf;
        color: #fff;
        line-height: 310px;
        height: 100%;
        text-align: center;
        text-transform: uppercase;
    }

        .eventsCarousel .eventsTitle h3 {
            line-height: 25px;
            line-height: 1.5625rem;
            display: inline-block;
            vertical-align: middle;
        }

        .eventsCarousel .eventsTitle a {
            display: block;
            color: #fff;
        }

            .eventsCarousel .eventsTitle a:hover {
                background: #b3b3b3;
            }

            .eventsCarousel .eventsTitle a h3 {
                color: #fff;
            }

    .eventsCarousel .eventsCarousel {
        font-size: 0;
        display: inline-block;
        margin: 0;
        position: relative;
        width: 1020px;
    }

        .eventsCarousel .eventsCarousel:before, .eventsCarousel .eventsCarousel:after {
            background: #fff;
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 10px;
            z-index: 99;
        }

        .eventsCarousel .eventsCarousel:before {
            left: 0;
        }

        .eventsCarousel .eventsCarousel:after {
            right: 0;
        }

        .eventsCarousel .eventsCarousel .thumbnail {
            margin-bottom: 10px;
        }

        .eventsCarousel .eventsCarousel p {
            font-size: 13px;
            font-size: 0.8125rem;
            line-height: 19px;
            line-height: 1.1875rem;
            margin: 5px 0 0 0;
            height: 57px;
            overflow: hidden;
        }

        .eventsCarousel .eventsCarousel .grey {
            text-transform: lowercase;
        }

    .eventsCarousel .eventsArrow {
        font-size: 32px;
        font-size: 2rem;
        background-color: #3284bf;
        color: #fff;
        cursor: pointer;
        height: 145px;
        line-height: 150px;
        overflow: hidden;
        text-align: center;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .eventsCarousel .eventsArrow:before {
            background-image: url(../assets/images/eventsArrow.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -10px 0 0 -13px;
            height: 20px;
            width: 26px;
        }

        .eventsCarousel .eventsArrow.eventsPrev:before {
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

        .eventsCarousel .eventsArrow:hover {
            background: #b3b3b3;
        }

        .eventsCarousel .eventsArrow:first-child {
            margin-bottom: 20px;
        }

/**
 * Images
 */
.imageFeatured {
    background: no-repeat center;
    background-size: cover !important;
    height: 100%;
}

.imageDimmer {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

/**
 * Events blocks
 */
.eventExternal {
    background: #b3b3b3;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 10px;
    margin-right: 10px;
    color: #fff;
}

    .eventExternal .grey {
        color: #E6E6E6;
    }

    .eventExternal .column:first-child {
        margin-left: 0;
    }

    .eventExternal .column.three {
        padding-bottom: 0;
    }

    .eventExternal .column.nine {
        margin-right: 0;
    }

    .eventExternal .column.imageFeatured {
        margin-right: 0;
        width: 868px;
    }

.eventExternalLink {
    background: #fff;
    color: #b3b3b3;
    display: inline-block;
    text-transform: uppercase;
    margin-top: 10px;
    position: relative;
    padding: 10px 10px 6px;
    font-weight: 600;
    width: 100%;
}

    .eventExternalLink:before {
        background-image: url(../assets/images/externalArrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        content: '';
        position: absolute;
        top: 13px;
        right: 10px;
        height: 10px;
        width: 10px;
    }

/**
 * Community Events
 */
.communityEventsContainer {
    margin-bottom: -21px;
}

.communityEvent:hover .imageFeatured {
    background: white !important;
    color: black;
    font-size: auto;
}

.communityEvent:hover .flexVertical {
    opacity: 1;
}

.communityEvent .flexVertical {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
}

.communityEvent .linkPlaceholder {
    text-decoration: underline;
}

.communityEvent:not(.last) .eventExternal {
    padding-bottom: 0;
}

.communityEvents {
    background: #b3b3b3;
    border-left: 0;
    margin-left: 10px;
    padding: 20px 0;
    color: #fff;
}

    .communityEvents .grey {
        color: #E6E6E6;
    }

    .communityEvents .column.three {
        margin-left: 0;
    }

    .communityEvents .firstColumn, .communityEvents .secondColumn {
        width: 50%;
    }

    .communityEvents .firstColumn {
        margin-left: 0;
        margin-right: 0;
        padding-right: 10px;
    }

    .communityEvents .secondColumn {
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
    }

    .communityEvents .communityEventFeatured {
        background: #fff;
        color: #000;
    }

    .communityEvents h4 {
        margin-right: 10%;
    }

    .communityEvents .communityEventImage {
        background-color: #eee;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover !important;
        height: 183px;
        width: 183px;
        float: right;
    }

    .communityEvents .communityEventContent {
        padding: 20px;
        float: left;
        height: 183px;
        width: 379px;
        position: relative;
    }

    .communityEvents .communityDate {
        font-size: 11px;
        font-size: 0.6875rem;
        line-height: 11px;
        line-height: 0.6875rem;
        text-transform: uppercase;
    }

    .communityEvents .eventExternalLink {
        font-size: 11px;
        font-size: 0.6875rem;
        line-height: 11px;
        line-height: 0.6875rem;
        padding-bottom: 10px;
        background: #b3b3b3;
        color: #fff;
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        width: auto;
    }

        .communityEvents .eventExternalLink:before {
            background-image: url(../assets/images/externalEventArrow.svg);
            top: 11px;
        }

.eventUpcoming:not(.communityEvent) .eventExternal .column.three h4:after {
    display: block;
    font-size: 16px;
    font-size: 1rem;
    line-height: 21px;
    line-height: 1.3125rem;
    font-weight: 400;
    content: 'News from Community';
}

/**
 * Pagination
 */
.pagination a {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 13px;
    line-height: 0.8125rem;
    border: #b3b3b3 1px solid;
    color: #808080;
    display: inline-block;
    padding: 5px 8px;
    position: relative;
    margin-right: 4px;
}

    .pagination a.active {
        background: #b3b3b3;
        border-color: #b3b3b3;
        color: #fff;
    }

    .pagination a.prev {
        padding-left: 25px;
    }

        .pagination a.prev:before {
            background-image: url(../assets/images/paginationArrow.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            content: '';
            display: block;
            position: absolute;
            top: 7px;
            left: 9px;
            height: 8px;
            width: 10px;
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

    .pagination a.next {
        padding-right: 25px;
    }

        .pagination a.next:before {
            background-image: url(../assets/images/paginationArrow.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            content: '';
            display: block;
            position: absolute;
            height: 8px;
            width: 10px;
            position: absolute;
            top: 7px;
            right: 7px;
        }

    .pagination a.last {
        padding-right: 28px;
    }

        .pagination a.last:after {
            content: '';
            display: block;
            width: 1px;
            background: #999;
            position: absolute;
            top: 7px;
            right: 7px;
            bottom: 7px;
        }

        .pagination a.last:before {
            background-image: url(../assets/images/paginationArrow.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
            content: '';
            display: block;
            position: absolute;
            height: 8px;
            width: 10px;
            position: absolute;
            top: 7px;
            right: 10px;
        }

/**
 * Breadcumbs
 */
.breadcrumbs {
    margin-top: 10px;
    margin-bottom: 0;
    text-transform: capitalize;
}

    .breadcrumbs .column.padded {
        padding-top: 15px;
        padding-bottom: 20px;
    }

/**
 * Table
 */
.tableHead {
    padding-top: 5px;
}

    .tableHead .column {
        font-size: 13px;
        font-size: 0.8125rem;
        line-height: 19px;
        line-height: 1.1875rem;
        color: #808080;
        text-transform: uppercase;
        cursor: pointer;
    }

.tableRow {
    padding: 20px 0 0;
}

    .tableRow .typeSmall {
        line-height: 19px;
        line-height: 1.1875rem;
        padding-top: 8px;
    }

    .tableRow a {
        color: #000;
        display: block;
    }

    .tableRow:after {
        background: #b3b3b3;
        display: block;
        content: '';
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        height: 1px;
    }

    .tableRow.noBorder:after {
        display: none;
    }

.column.tableType {
    width: 123px;
    text-transform: uppercase;
}

/**
 * Side Navigation
 */
.sideNav li {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 19px;
    line-height: 1.1875rem;
    cursor: pointer;
    margin-bottom: 10px;
    position: relative;
    -webkit-transition: color 75ms ease, background 75ms ease;
    transition: color 75ms ease, background 75ms ease;
}

.sideNav .filterType {
    background: #e3e3e3;
    padding: 5px;
    padding-left: 30px;
    display: block;
    width: 100%;
    text-transform: uppercase;
}

.sideNav .filterDesc {
    display: none;
    padding: 5px;
    padding-left: 30px;
    width: 100%;
}

.sideNav li:after {
    content: attr(data-count);
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;
}

.sideNav li:hover:before, .sideNav li:hover:after {
    color: #fff;
}

.sideNav li:hover .filterType {
    color: #fff;
    background: #808080;
}

.sideNav li.active:before, .sideNav li.active:after {
    color: #fff;
}

.sideNav li.active .filterType {
    color: #fff;
    background: #3284bf;
}

.sideNav li.active .filterDesc {
    display: block;
}

.sideNav li.active:before {
    content: '';
    width: 15px;
    height: 20px;
    top: 4px;
    left: 6px;
    position: absolute;
    background-image: url('../assets/images/filterArrow.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.externalFunding .sideNav li.active .filterType {
    background: #b3b3b3;
}

.fundingExternalLink {
    background: #b3b3b3;
    color: #fff !important;
    display: inline-block;
    text-transform: uppercase;
    margin-top: 10px;
    position: relative;
    padding: 10px 10px 6px;
    font-weight: 800;
    width: 180px;
}

    .fundingExternalLink:before {
        background-image: url(../assets/images/externalEventArrow.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        position: absolute;
        top: 13px;
        right: 10px;
        height: 8px;
        width: 8px;
    }

/**
 * Map
 */
.mapContainer {
    margin-top: 0;
    margin-bottom: 30px;
}

.globalMap {
    padding-bottom: 50%;
    width: 100%;
    position: relative;
}

    .globalMap iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
    }

/**
 * Lists
 */
ul.bulleted li {
    list-style-type: disc;
}

/**
 * Jump navigation
 */
.jumpNav {
    text-transform: uppercase;
}

    .jumpNav .jumpLabel {
        display: inline-block;
        margin-right: 20px;
    }

    .jumpNav a {
        border-bottom: 1px solid #000;
        color: #000;
        margin-right: 20px;
        line-height: 24px;
        font-weight: 500;
    }

/**
 * Annual Newsletter
 */
.annualNewsletter .imageDimmer:hover {
    background: rgba(0, 0, 0, 0.5);
}

/**
 * Mobile
 */
html[data-responsive='phone'] {
    /* Home */
    /* Center Events */
    /* Individual Event */
    /* Individual News */
    /* Individual Grant */
    /* Japanese Studies */
    /* Newsletter */
    /* People */
    /* Funding */
    /* Bio */
    /* Event Carousel */
    /* Global Hub */
    /* GLobal Japan Initiative */
}

    html[data-responsive='phone'] .heroHeadline {
        font-size: 28px;
        font-size: 1.75rem;
        line-height: 36px;
        line-height: 2.25rem;
        width: 90%;
    }

    html[data-responsive='phone'] .heroSubHeadline {
        font-size: 16px;
        font-size: 1rem;
        line-height: 21px;
        line-height: 1.3125rem;
        font-weight: 400;
        text-transform: lowercase;
    }

    html[data-responsive='phone'] .heroHeadlineSmall {
        font-size: 16px;
        font-size: 1rem;
        line-height: 21px;
        line-height: 1.3125rem;
        font-weight: 400;
        width: 90%;
    }

    html[data-responsive='phone'] .heroDimmer {
        left: 0;
        right: 0;
    }

    html[data-responsive='phone'] .hero .slick-slide {
        height: 360px;
    }

    html[data-responsive='phone'] .hero .slick-dots {
        bottom: 23px;
    }

    html[data-responsive='phone'] .communityEventsContainer {
        margin-top: 0;
    }

    html[data-responsive='phone'] .communityEvents {
        margin-left: 0;
        padding-top: 24px;
    }

        html[data-responsive='phone'] .communityEvents .column.eight {
            padding-left: 16px;
            padding-right: 16px;
        }

        html[data-responsive='phone'] .communityEvents .communityEventFeatured {
            position: relative;
            padding: 10px;
        }

        html[data-responsive='phone'] .communityEvents .communityEventContent {
            padding: 0;
            width: 75%;
            width: 100%;
            height: auto;
        }

            html[data-responsive='phone'] .communityEvents .communityEventContent h4 {
                margin-right: 5%;
            }

        html[data-responsive='phone'] .communityEvents .communityEventImage {
            width: 100%;
            height: 100%;
            margin-top: 10px;
            background-size: cover !important;
            background-position: center !important;
        }

            html[data-responsive='phone'] .communityEvents .communityEventImage:after {
                content: '';
                display: block;
                padding-top: 100%;
            }

        html[data-responsive='phone'] .communityEvents .eventExternalLink {
            position: relative;
            left: auto;
            right: auto;
            bottom: auto;
            width: 100%;
        }

    html[data-responsive='phone'] .communityEvent + .communityEvent > .group {
        padding-top: 36px;
    }

    html[data-responsive='phone'] .heroLabel {
        width: 100%;
        left: 0;
        top: 16px;
        text-align: center;
    }

        html[data-responsive='phone'] .heroLabel h3 {
            font-size: 16px;
            font-size: 1rem;
            line-height: 21px;
            line-height: 1.3125rem;
            font-weight: 600;
        }

    html[data-responsive='phone'] .sectionHeadline {
        position: static;
        padding-left: 16px !important;
    }

    html[data-responsive='phone'] .eventUpcoming {
        margin-top: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

        html[data-responsive='phone'] .eventUpcoming .imageFeatured {
            height: 140px;
        }

        html[data-responsive='phone'] .eventUpcoming .column.three {
            padding-top: 16px;
        }

        html[data-responsive='phone'] .eventUpcoming h3 {
            margin-bottom: 0;
        }

        html[data-responsive='phone'] .eventUpcoming h4 {
            margin-bottom: 6px;
        }

        html[data-responsive='phone'] .eventUpcoming .group {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
        }

        html[data-responsive='phone'] .eventUpcoming .eventExternal {
            position: relative;
            padding: 0;
            margin: 0;
        }

            html[data-responsive='phone'] .eventUpcoming .eventExternal .column {
                padding: 18px;
            }

    html[data-responsive='phone'] .eventsArchive .column.six {
        padding-top: 16px;
    }

    html[data-responsive='phone'] .communityEventHeadline {
        color: black;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    html[data-responsive='phone'] .individualEvent {
        padding-top: 16px;
    }

        html[data-responsive='phone'] .individualEvent .column.three {
            padding-left: 16px;
            padding-right: 16px;
        }

        html[data-responsive='phone'] .individualEvent .column.nine h3:first-child, html[data-responsive='phone'] .individualEvent .column.nine h3.grey:nth-child(2) {
            font-size: 16px;
            font-size: 1rem;
            line-height: 21px;
            line-height: 1.3125rem;
        }

    html[data-responsive='phone'] .heroCaption {
        padding: 0 16px;
    }

    html[data-responsive='phone'] .greyBox .group {
        margin: 0;
    }

    html[data-responsive='phone'] .column.nine.alignBottom.twoLine.typeSmall {
        padding-left: 16px;
        padding-right: 16px;
    }

    html[data-responsive='phone'] .annualNewsletter {
        margin: 0;
    }

        html[data-responsive='phone'] .annualNewsletter .column {
            margin-bottom: 0;
        }

    html[data-responsive='phone'] .ourStaff.marginBottomBig, html[data-responsive='phone'] .boardOfAdvisors.marginBottomBig {
        margin-top: 30px;
    }

    html[data-responsive='phone'] .ourStaff .column, html[data-responsive='phone'] .boardOfAdvisors .column {
        margin-left: 0;
        margin-right: 0;
    }

        html[data-responsive='phone'] .ourStaff .column.paddedLeft.three h3, html[data-responsive='phone'] .boardOfAdvisors .column.paddedLeft.three h3 {
            text-transform: uppercase;
        }

    html[data-responsive='phone'] .ourStaff .group, html[data-responsive='phone'] .boardOfAdvisors .group {
        margin-top: 12px;
    }

    html[data-responsive='phone'] .marginBottomMedium {
        margin-bottom: 12px;
    }

    html[data-responsive='phone'] .marginBottomMediumHeading {
        margin-bottom: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

        html[data-responsive='phone'] .marginBottomMediumHeading .paddedLeft {
            padding: 0 0 16px 0;
        }

        html[data-responsive='phone'] .marginBottomMediumHeading:not(.centerFunding) {
            padding-top: 30px;
        }

    html[data-responsive='phone'] .marginBottomBig .column.nine.alignBottom.typeSmall, html[data-responsive='phone'] .marginBottomMedium .column.nine.alignBottom.typeSmall, html[data-responsive='phone'] .marginBottomBig .column.nine.alignBottom.typeSmall .jumpNav, html[data-responsive='phone'] .centerFunding .column.nine.alignBottom.typeSmall, html[data-responsive='phone'] .boardOfAdvisors[data-jump-target] > .column.three h3 {
        padding-left: 16px;
        padding-right: 16px;
    }

    html[data-responsive='phone'] .centerFunding .column.three h3 {
        margin-top: 24px;
    }

    html[data-responsive='phone'] .centerFunding .column.five {
        padding: 10px 0;
    }

    html[data-responsive='phone'] .centerFunding .column.six h3 {
        margin-bottom: 16px;
    }

    html[data-responsive='phone'] .centerFunding .source {
        margin-bottom: 8px;
    }

    html[data-responsive='phone'] .centerFunding.externalFunding .fundingExternalLink {
        width: 100%;
    }

    html[data-responsive='phone'] .bio {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

        html[data-responsive='phone'] .bio .column.nine {
            padding: 0 16px;
        }

        html[data-responsive='phone'] .bio .column.three {
            padding: 0 16px;
            margin-bottom: 24px;
        }

            html[data-responsive='phone'] .bio .column.three .typeMicro {
                display: none;
            }

    html[data-responsive='phone'] .eventsCarousel {
        height: auto;
        margin-bottom: 0;
    }

        html[data-responsive='phone'] .eventsCarousel:before, html[data-responsive='phone'] .eventsCarousel:after {
            display: none;
        }

        html[data-responsive='phone'] .eventsCarousel h4 {
            padding-left: 8px;
            padding-right: 8px;
        }

        html[data-responsive='phone'] .eventsCarousel p {
            padding-left: 8px;
            padding-right: 8px;
        }

        html[data-responsive='phone'] .eventsCarousel .eventsTitle {
            margin-top: 16px;
            margin-top: 1rem;
            line-height: 48px;
            line-height: 3rem;
            background-color: white;
        }

            html[data-responsive='phone'] .eventsCarousel .eventsTitle h3 {
                display: block;
                padding-top: 12px;
                font-size: 0;
            }

                html[data-responsive='phone'] .eventsCarousel .eventsTitle h3:after {
                    font-size: 23px;
                    content: 'EVENTS';
                }

            html[data-responsive='phone'] .eventsCarousel .eventsTitle a:hover {
                background-color: white;
            }

            html[data-responsive='phone'] .eventsCarousel .eventsTitle a h3 {
                color: #383838;
            }

            html[data-responsive='phone'] .eventsCarousel .eventsTitle br {
                display: none;
            }

        html[data-responsive='phone'] .eventsCarousel .slick-slider {
            margin-bottom: 16px;
            margin-bottom: 1rem;
        }

        html[data-responsive='phone'] .eventsCarousel .slick-slide .grey {
            text-transform: lowercase;
        }

        html[data-responsive='phone'] .eventsCarousel .slick-slide .grey, html[data-responsive='phone'] .eventsCarousel .slick-slide .greyDark {
            font-size: 14px;
            font-size: 0.875rem;
            line-height: 21px;
            line-height: 1.3125rem;
        }

        html[data-responsive='phone'] .eventsCarousel .eventsArrow {
            width: 50%;
            height: 48px;
            margin-bottom: 0;
            float: right;
        }

            html[data-responsive='phone'] .eventsCarousel .eventsArrow:first-child {
                border-left: 1px solid white;
            }

            html[data-responsive='phone'] .eventsCarousel .eventsArrow:before {
                width: 20px;
                height: 16px;
                margin: -8px 0 0 -10px;
                background-size: contain;
            }

            html[data-responsive='phone'] .eventsCarousel .eventsArrow:hover {
                background-color: #3284bf;
            }

    html[data-responsive='phone'] .eventUpcoming ~ .eventsCarousel .eventsTitle h3:after {
        content: 'PAST EVENTS';
    }

    html[data-responsive='phone'] .mapContainer {
        display: none;
    }

    html[data-responsive='phone'] .column.ten.paddedLeft.marginBottomMedium {
        padding: 16px;
    }

    html[data-responsive='phone'] h5 {
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 24px;
        line-height: 1.5rem;
    }

    html[data-responsive='phone'] .globalHub.greyBox .group {
        margin-left: 0;
    }

    html[data-responsive='phone'] .globalHub.greyBox .column {
        font-size: 16px;
        font-size: 1rem;
        line-height: 22px;
        line-height: 1.375rem;
    }

    html[data-responsive='phone'] .globalHub.greyBox .bulleted {
        padding-left: 16px;
    }

    html[data-responsive='phone'] .container .nine img {
        margin: 0;
    }

    html[data-responsive='phone'] .tableRow:not(:last-child):after {
        margin-left: 0;
        margin-right: 0;
    }

    html[data-responsive='phone'] [class*='event'] .group .column.three.alignBottom {
        max-height: none;
    }

    html[data-responsive='phone'] .programSchedule {
        padding: 6px 16px 6px 16px;
        border: 1px solid #b3b3b3;
        overflow-x: scroll;
    }

    html[data-responsive='phone'] .filterNavigation a {
        display: block;
    }

/**
 * Footer
 */
#footer {
    color: #808080;
    padding-bottom: 30px;
}

    #footer > * {
        font-size: 13px;
        font-size: 0.8125rem;
        line-height: 19px;
        line-height: 1.1875rem;
    }

    #footer a {
        color: #808080;
    }

.newsletterForm table {
    width: 100%;
    margin-top: 7px;
}

.newsletterForm tr[id*="Selection"] {
    display: none;
}

.newsletterForm td {
    padding: 2px;
}

.newsletterForm input {
    display: block;
    width: 100% !important;
    height: 31px !important;
    padding: 6px 7px 5px 7px;
    background-color: white;
    border: 1px solid #b3b3b3;
    font-family: 'Atlas', sans-serif;
    font-weight: normal;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 11px;
    line-height: 0.6875rem;
    -webkit-font-smoothing: antialiased;
    color: #808080;
}

    .newsletterForm input[type="submit"]:hover {
        cursor: pointer;
        background-color: #b3b3b3;
        color: white;
    }

.newsletterForm span {
    display: none !important;
}

.fbFooter {
    position: relative;
    left: 12px;
}

    .fbFooter:before {
        position: absolute;
        top: -1px;
        left: -16px;
        content: '';
        width: 12px;
        height: 12px;
        display: block;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../assets/images/facebook.svg');
    }

/**
 * Mobile
 */
html[data-responsive='phone'] #footer {
    padding-bottom: 20px;
}

    html[data-responsive='phone'] #footer > .column {
        padding-top: 1em;
        padding-left: 14px;
        padding-right: 14px;
    }

    html[data-responsive='phone'] #footer .six br:nth-of-type(3), html[data-responsive='phone'] #footer .six br:nth-of-type(4) {
        display: none;
    }

/**
 * Upcoming events
 */
.eventUpcoming .imageFeatured {
    height: 370px;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.eventUpcoming.last .column.three {
    padding-bottom: 10px;
}

.eventUpcoming h4 {
    margin-bottom: 10px;
}

.eventUpcoming p {
    margin-top: 0.5em;
}

.eventUpcoming:not(.communityEvent) {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

    .eventUpcoming:not(.communityEvent):hover {
        opacity: 0.8;
    }

.eventUpcomingHeadline {
    overflow: visible;
    z-index: 9;
}

.communityEventHeadline {
    color: #fff;
    overflow: visible;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 9;
}

    .communityEventHeadline .sectionHeadline {
        top: 25px;
        margin-left: 0;
    }

/**
 * Annual Newsletter
 */
.annualNewsletter {
    color: #fff;
    padding-bottom: 5px;
}

    .annualNewsletter .imageFeatured {
        height: 270px;
    }

/**
 * Community events
 */
.communityEvent {
    margin-top: 0;
    margin-bottom: 0;
}

    .communityEvent .eventExternal:not(.last) {
        border-bottom: 0;
    }

/**
 * Staff
 */
.ourStaff .column:not(.alignBottom) h3 {
    margin-top: 10px;
}

/**
 * Japan Initiative
 */
.container.initiativeEntry {
    margin-top: 10px;
    margin-bottom: 0;
}

    .container.initiativeEntry h5:first-child {
        margin-top: -8px;
    }

.programList li {
    padding-top: 25px;
    padding-top: 1.5625rem;
    padding-bottom: 25px;
    padding-bottom: 1.5625rem;
    overflow: hidden;
    border-top: 1px solid #b3b3b3;
}

    .programList li:last-child {
        border-bottom: 1px solid #b3b3b3;
    }

    .programList li > div {
        float: left;
    }

.programList h3 {
    margin-bottom: 0;
}

.programList h4 {
    margin-top: 6px;
    margin-top: 0.375rem;
}

.programList_thumbnail img {
    width: 120px;
    height: 120px;
    margin: 0 !important;
    margin-right: 30px !important;
}

/**
 * Japanese Studies
 */
.twoLine {
    padding-bottom: 6px;
}

/**
 * Grants
 */
.greyBox {
    margin-top: 0;
    margin-bottom: -21px;
    position: relative;
    z-index: 2;
}

    .greyBox strong {
        font-weight: 600;
    }

    .greyBox .padded {
        padding-bottom: 45px;
        padding-top: 30px;
    }

    .greyBox .paddedTop {
        padding-top: 45px;
    }

    .greyBox .paddedBottom {
        padding-bottom: 60px;
    }

    .greyBox .group {
        font-size: 0;
        margin: 0 10px;
    }

        .greyBox .group :first-child {
            margin-left: 0;
        }

        .greyBox .group :last-child {
            margin-right: 0;
        }

    .greyBox .meta {
        line-height: 25px;
        line-height: 1.5625rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .greyBox .groupContact {
        white-space: nowrap;
    }

    .greyBox span.label {
        display: inline-block;
        width: 50%;
    }

.blueBox {
    padding-left: 20px;
}

.blueBG .column.three {
    margin-left: 0;
}

/**
 * Mission
 */
.missionLogo {
    background-image: url(./images/logo.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 0;
    padding-bottom: 61.40351%;
    width: 100%;
}

/**
 * Global Hub
 */
.globalHub .greyBG:last-child {
    padding-bottom: 30px;
}

.globalHub .column {
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 30px;
    line-height: 1.875rem;
}

.globalHub li {
    color: #e6e6e6;
    margin-bottom: 4px;
}

.globalHub a {
    border-bottom: 1px solid #e6e6e6;
    color: #e6e6e6;
    padding-bottom: 2px;
}

    .globalHub a:hover {
        color: #fff;
        border-bottom-color: #fff;
    }

.globalHub .jumpNav {
    font-size: 14px;
    font-size: 0.875rem;
}

    .globalHub .jumpNav a {
        font-size: 14px;
        font-size: 0.875rem;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        padding-bottom: 1px;
        font-weight: 600;
        margin-right: 15px;
    }

/**
 * Events archive
 */
.eventsArchive .tableRow h3 {
    margin-top: 0.25em;
}

/**
 * Individual Program
 */
.individualProgramArticle.hero {
    margin-bottom: 0;
}

[data-program-section] {
    display: none;
}

    [data-program-section].active {
        display: block;
    }

.programInfo .meta {
    margin-bottom: 32px;
    margin-bottom: 2rem;
}

    .programInfo .meta:last-child {
        margin-bottom: 0;
    }

.programInfo .button {
    background-color: white;
    border: 1px solid white;
    padding: 16px 30px 12px 30px;
    color: #3284bf;
}

    .programInfo .button:hover {
        background-color: #3284bf;
        color: white;
    }

.programInfo a {
    color: white;
}

.programSchedule table {
    width: 100%;
    min-width: 1174px;
    margin-left: -10px;
    border-spacing: 10px;
    border-collapse: separate;
    table-layout: fixed;
}

    .programSchedule table th {
        font-weight: inherit;
        height: 32px;
    }

    .programSchedule table td {
        vertical-align: middle;
        white-space: nowrap;
    }

    .programSchedule table .scheduleLabel {
        width: 150px;
    }

    .programSchedule table .scheduleUnit {
        background-color: #e5e5e5;
        font-size: 10px;
        font-size: 0.625rem;
        line-height: 16px;
        line-height: 1rem;
        text-transform: uppercase;
        padding: 22px 0 20px 14px;
    }

        .programSchedule table .scheduleUnit:hover {
            background-color: #3284bf;
            color: white;
            font-size: 0;
            line-height: 0;
        }

            .programSchedule table .scheduleUnit:hover:after {
                content: attr(data-time);
                font-size: 10px;
                font-size: 0.625rem;
                line-height: 16px;
                line-height: 1rem;
            }

.filterNavigation a {
    margin-right: 30px;
    display: inline-block;
}

    .filterNavigation a.active {
        color: #3284bf;
    }

        .filterNavigation a.active .underline {
            border-color: #3284bf;
        }

    .filterNavigation a:hover, .filterNavigation a:hover .underline {
        border: none;
        cursor: pointer;
    }

    .filterNavigation a.external:after {
        width: 16px;
        height: 16px;
    }

.initiativeEntry a:hover {
    color: #808080;
}

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

.slick-loading .slick-list {
    background: #fff url("/./ajax-loader.gif") center center no-repeat;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    zoom: 1;
}

    .slick-track:before, .slick-track:after {
        content: "";
        display: table;
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

    .slick-slide img {
        display: block;
    }

    .slick-slide.slick-loading img {
        display: none;
    }

    .slick-slide.dragging img {
        pointer-events: none;
    }

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

/* Icons */
@font-face {
    font-family: "slick";
    src: url("./fonts/slick.eot");
    src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Arrows */
.slick-prev, .slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    margin-top: -10px;
    padding: 0;
    border: none;
    outline: none;
}

    .slick-prev:focus, .slick-next:focus {
        outline: none;
    }

    .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
        opacity: 0.25;
    }

    .slick-prev:before, .slick-next:before {
        font-family: "slick";
        font-size: 20px;
        line-height: 1;
        color: white;
        opacity: 0.85;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.slick-prev {
    left: -25px;
}

    .slick-prev:before {
        content: '\2190';
    }

.slick-next {
    right: -25px;
}

    .slick-next:before {
        content: '\2192';
    }

/* Dots */
.slick-dots {
    position: absolute;
    bottom: 45px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0px;
    width: 100%;
    z-index: 9;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0px 5px;
        padding: 0px;
        cursor: pointer;
    }

        .slick-dots li button {
            border: 0;
            background: transparent;
            display: block;
            height: 20px;
            width: 20px;
            outline: 0;
            line-height: 0;
            font-size: 0;
            color: transparent;
            padding: 5px;
            cursor: pointer;
        }

            .slick-dots li button:focus {
                outline: 0;
            }

            .slick-dots li button:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '\2022';
                width: 20px;
                height: 20px;
                font-family: "slick";
                font-size: 20px;
                line-height: 20px;
                text-align: center;
                color: white;
                opacity: 0.25;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

        .slick-dots li.slick-active button:before {
            opacity: 0.75;
        }

/* add a little extra right padding to people blocks */
.group.nine .column.three {
    padding-right: 15px;
}

/* add extra space between bio meta info and body of text */
.container.bio .column.nine p:first-of-type {
    margin-bottom: 32px;
}

/* Make paging ellipses grey */
.Paging {
    color: #b3b3b3;
}

    /* Hide paging dropdown */
    .Paging.PerPage {
        display: none !important;
    }

/* limit height of event/news text in archive */
/* Image captions */
.heroCaption {
    padding-left: 40px;
    position: absolute;
    bottom: -24px;
}

.container .nine img {
    margin: 24px 24px 16px 24px;
}

.imgBox {
    margin: 24px 24px 16px 24px;
    text-align: center;
}

    .imgBox img {
        display: inline-block;
        margin: 0 !important;
        float: none !important;
    }

    .imgBox .imgCaption {
        margin: 0 auto;
    }

/* footer International Institute branding */
ul.footerBranding {
    /*margin-bottom:5px;*/
    margin-left: 0;
}

    ul.footerBranding li {
        display: inline;
        margin-left: 2px;
    }

        ul.footerBranding li a {
            color: white;
            text-decoration: none;
        }

            ul.footerBranding li a:hover {
                color: #858585;
            }

        ul.footerBranding li:after {
            content: "•";
            margin-left: 6px;
        }

        ul.footerBranding li:last-of-type:after {
            content: none;
        }