.page-title {
    color: #0f347d;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.125;
    margin-bottom: .5em;
    text-align: center;
}

.page-heading-2 {
    color: #4c4c4c;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.125;
}

.text-red { color: #ed1d24 !important; }

@media (min-width: 768px) {
    .page-title { font-size: 5rem; }

    .page-heading-2 { font-size: 4.25rem; }
}

.calendar-sponsor {
    position: absolute;
    color: #0f347d;
    font-weight: 700;
    width: 13.5em;
    top: 6.75em;
    right: 2.25em;
}

.calendar-sponsor img {
    display: block;
    position: absolute;
    width: 7em;
    top: -2em;
    right: 0;
}

.banner-ad-block {
    width: 24.583em;
    margin: 2em auto 2em auto;
    display: none;
}

.captcha { margin: 1em 0 1em 0; }

.programs-section,
.forms-pubs-section { clear: both; }

.pI {
    display: block;
    text-align: justify;
}

#colRes .name { min-width: 16em; }

#colRes .loc { min-width: 14em; }

/* STAFF DIRECTORY */

.staff-directory {
    text-align: center;
    margin-top: 2%;
    margin-bottom: 5%;
}

.staff-directory .directory-name { font-weight: 700; }

@media only screen and (min-width: 769px) {
    .calendar-sponsor {
        top: 5.25em;
        right: 3em;
    }

    .calendar-sponsor img {
        top: -1.25em;
        right: 0;
    }

    .banner-ad-block {
        width: 42.727em;
        margin: 2em auto 2em auto;
    }

    .staff-directory {
        text-align: left;
        margin: 1% 0 1% 0;
    }
}

@media only screen and (min-width: 1000px) {
    /*    .calendar-sponsor {
        top: 9.125em;
    }

    .calendar-sponsor img {
        width:6em;
        top: -1.5em;
    }*/
}

@media only screen and (min-width: 1300px) {
    /*    .calendar-sponsor img {
        top: -1.85em;
    }*/
}

/*#colRes .contact {
    min-width: 15em;
}*/

/*RULEBOOK STYLES*/

.color-GR {
    background-color: #c93a29;
    color: #FFF;
}

.color-AL {
    background-color: #e9df3d;
    color: #555;
}

.color-AR {
    background-color: #e5e1a1;
    color: #555;
}

.color-CO {
    background-color: #516f3c;
    color: #FFF;
}

.color-CP {
    background-color: #548c4a;
    color: #FFF;
}

.color-DR {
    background-color: #91bf4e;
    color: #555;
}

.color-DC {
    background-color: #a9b044;
    color: #555;
}

.color-EN {
    background-color: #ccd68a;
    color: #555;
}

.color-EP {
    background-color: #99c6a7;
    color: #555;
}

.color-EQ {
    background-color: #437576;
    color: #FFF;
}

.color-EV {
    background-color: #57969e;
    color: #FFF;
}

.color-FR {
    background-color: #71b7b4;
    color: #FFF;
}

.color-HJ {
    background-color: #aed5cd;
    color: #555;
}

.color-HK {
    background-color: #94ccdd;
    color: #555;
}

.color-HU {
    background-color: #5da1d9;
    color: #FFF;
}

.color-JP {
    background-color: #85c8e9;
    color: #FFF;
}

.color-MO {
    background-color: #badef4;
    color: #555;
}

.color-NS {
    background-color: #bfccd4;
    color: #555;
}

.color-PH {
    background-color: #2e3f73;
    color: #FFF;
}

.color-PF {
    background-color: #4467ae;
    color: #FFF;
}

.color-RN {
    background-color: #7e9fd2;
    color: #FFF;
}

.color-RD {
    background-color: #7e9fd2;
    color: #FFF;
}

.color-SB {
    background-color: #422052;
    color: #FFF;
}

.color-Op {
    background-color: #c93a29;
    color: #FFF;
}

.color-SP {
    background-color: #65338e;
    color: #FFF;
}

.color-VA {
    background-color: #91509a;
    color: #FFF;
}

.color-WL {
    background-color: #796993;
    color: #FFF;
}

.color-WS {
    background-color: #baabc7;
    color: #555;
}

.color-WD {
    background-color: #ea9bc4;
    color: #555;
}

.color-I {
    background-color: #c93a29;
    color: #FFF;
}

.rulebook-tiles {
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: center;
}

.rulebook-tiles .tile {
    float: left;
    position: relative;
    width: 46%;
    height: 0;
    padding-bottom: 30%;
    margin: 2%;
}

.rulebook-tiles .tile a { text-decoration: none; }

.rulebook-tiles .tile .content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 0;
    padding: 5.10% 5.10% 62.142% 5.10%;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: 700;
    text-align: center;
}

.rulebook-tiles:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

/* Press Release Search */

#press-release-search { margin-bottom: 2em; }

#press-release-search .date-filter { max-width: 100px; }

@media only screen and (min-width: 769px) {
    .rulebook-tiles { width: 85.714%; }

    .rulebook-tiles .tile {
        width: 19.166%;
        padding-bottom: 13.333%;
        margin: 0.416%;
    }

    /* Press Release Search */

    #press-release-search { text-align: center; }
}

/*MAGAZINE STYLES*/

.magazine-tiles {
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: center;
}

.magazine-tiles .magazine-issue {
    float: left;
    position: relative;
    width: 29%;
    height: 0;
    padding-bottom: 37%;
    margin: 2%;
}

.magzine-tiles .magazine-issue a { text-decoration: none; }

@media only screen and (min-width: 769px) {
    .magazine-tiles { width: 85.714%; }

    .magzine-tiles .magazine-issue {
        width: 30%;
        padding-bottom: 13.333%;
        margin: 2.5%;
    }
}

#RolexGrandSlam .rolex-clock {
    width: 37.5%;
    height: 14em;
    text-align: center;
    border: 1px solid #cbcbcb;
    margin: 0 auto 0 auto;
}

#RolexGrandSlam .rolex-clock embed { display: none; }


@media only screen and (min-width: 769px) {
    #RolexGrandSlam .rolex-clock {
        width: 8.272em;
        height: 14em;
        margin: 0 auto 0 auto;
    }

    #RolexGrandSlam .rolex-clock .rolex-clock-static { display: none; }

    #RolexGrandSlam .rolex-clock embed {
        display: block;
        width: 5.863em;
        height: 9.636em;
        margin: 0 auto 0 auto;
    }
}

/* ROLEX UTILITIES */

.font-normal { font-weight: normal !important }

.normal-case { text-transform: none !important }

.tracking-wide { letter-spacing: 0.025em; }

.tracking-wider { letter-spacing: 0.05em; }

.text-white { color: white !important; }

.text-rolex-gold { color: #a37e2c !important; }

.text-rolex-light-gold { color: #e6b147 !important; }

.text-rolex-green { color: #006039 !important; }

.text-rolex-light-green { color: #00a862 !important; }

.bg-rolex-gold { background-color: #a37e2c !important; }

.bg-rolex-light-gold { background-color: #e6b147 !important; }

.bg-rolex-green { background-color: #006039 !important; }

.bg-rolex-light-green { background-color: #00a862 !important; }

.border-rolex-gold { border-color: #a37e2c !important; }

.border-rolex-green { border-color: #006039 !important; }

.border-black { border-color: #000000 !important; }

.border-transparent { border-color: transparent !important; }

.hover-increase-brightness:hover { filter: brightness(1.125) }

.transition-duration-300 { transition: all 300ms ease-out }

.flex-button {
    display: flex;
    flex-direction: row;
    word-wrap: break-spaces;
    white-space: pre-wrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}

/* Regulation */

/* HERO SECTION */

.reg-hero-container { position: relative; }

.reg-hero-image {
    position: relative;
    z-index: 10;
    width: 100%;
}

.reg-hero-text-container {
    position: absolute;
    top: 4em;
    left: 4em;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 50%;
}

.reg-hero-title {
    font-size: 7rem;
    font-weight: 900;
    text-transform: uppercase;
    color: white !important;
    text-align: left;
    line-height: 6.5rem;
    padding: 0;
    margin: 0;
}

.reg-hero-subtitle {
    font-size: 3rem;
    font-weight: 600;
    color: white !important;
    text-align: left;
    line-height: 4.5rem;
    padding: 0;
    margin: 0;
}

/* MAIN CONTENT */

.reg-content-container {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.reg-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: start;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
    padding: 4rem;
    background: white;
    text-align: center;
    width: 600px;
}

.reg-card h3, .info-card h3 { margin: 0; }

.info-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: start;
    align-items: start;
    box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
    padding: 4rem;
    background: white;
    text-align: left;
    width: 600px;
}

.icon-grid {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

.icon-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: start;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
    padding: 4rem;
    background: white;
    text-align: center;
    width: 400px;
}

.report-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: start;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
    padding: 4rem;
    background: white;
    text-align: center;
    width: 360px;
}

.reg-h2 {
    margin-top: 0;
    text-align: left;
}

.reg-content-image {
    max-height: 450px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.reg-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
    row-gap: 3rem;
    padding: 4rem 12rem;
}

.reg-number-title {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: start;
    align-items: center;
    width: 100%;
    color: #14377d !important;
}

.reg-number-title i { color: #14377d !important; }

.reg-number-title h3 {
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
}

.grievances-opp-participate-image {
    height: 500px;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    margin-top: 2rem;
}

.hw-card-grid {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
}

.hw-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: start;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
    padding: 4rem;
    background: white;
    text-align: center;
    width: 600px;
}

/* REG COLOR BLOCK */

.reg-color-block {
    width: 100%;
    padding: 6rem 8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.reg-color-block h3 { line-height: 1.65em; }

.reg-color-block.light { background: #cce8f4 !important; }

.reg-color-block.dark { background: #14377d !important; }

.reg-color-block.dark h2, .reg-color-block.dark a, .reg-color-block.dark p { margin: 0; }

.reg-color-block.dark a { text-decoration: underline; }

.reg-arrow-block {
    background: white;
    width: 460px;
    padding: 3rem 5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 6rem;
    font-weight: 700;
    box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
}

.reg-arrow-block i { transition: transform 222ms ease-out; }

.reg-arrow-block a:hover + i { transform: translate(1rem, 0) }

.text-image-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding: 0 15px;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem 1rem;
}

.card-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4rem 1rem;
}

.card-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem 1rem;
}

.card-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4rem 1rem;
    justify-content: center;
}

.info-grid {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

.addi-r-flex {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* REG UTILITIES */

.m-0 { margin: 0; }

.w-680 { width: 680px; }

.w-920 { width: 920px; }

.text-lightblue { color: #cce8f4 !important; }

.text-blue { color: #14377d !important; }

.text-white { color: white !important; }

.text-6rem { font-size: 6rem; }

.text-3rem { font-size: 3rem; }

.text-2rem { font-size: 2rem; }

.external-link {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: baseline;
}

/* REG RESPONSIVE */

@media (max-width: 1300px) {
    .reg-hero-text-container {
        top: 6rem;
        left: 6rem;
        gap: 3rem;
        width: 524px;
    }

    .reg-hero-title {
        font-size: 5rem;
        font-weight: 900;
        text-transform: uppercase;
        color: white !important;
        text-align: left;
        line-height: 4.5rem;
        padding: 0;
        margin: 0;
    }

    .reg-hero-subtitle {
        font-size: 2.25rem;
        font-weight: 600;
        color: white !important;
        text-align: left;
        line-height: 3.5rem;
        padding: 0;
        margin: 0;
    }

    .info-card {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: start;
        align-items: start;
        box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
        padding: 4rem;
        background: white;
        text-align: left;
        width: 400px;
    }

    .reg-card {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: start;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
        padding: 4rem;
        background: white;
        text-align: center;
        width: 400px;
    }

    .icon-card {
        width: 300px;
    }
}

@media (max-width: 1020px) {
    .reg-hero-text-container {
        top: 5rem;
        left: 5rem;
        gap: 3rem;
        width: 420px;
    }

    .reg-hero-title {
        font-size: 3.5rem;
        font-weight: 900;
        text-transform: uppercase;
        color: white !important;
        text-align: left;
        line-height: 3.5rem;
        padding: 0;
        margin: 0;
    }

    .reg-hero-subtitle {
        font-size: 1.75rem;
        font-weight: 600;
        color: white !important;
        text-align: left;
        line-height: 2.5rem;
        padding: 0;
        margin: 0;
    }

    .card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem;
    }

    .card-grid-4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4rem 1rem;
    }

    .card-grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem 1rem;
    }

    .reg-arrow-block {
        padding: 3rem 4rem;
        gap: 4rem;
        font-weight: 700;
        box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
    }
}

@media (max-width: 768px) {
    .reg-content-container { gap: 4rem; }

    .reg-hero-text-container {
        top: 2em;
        left: 2em;
        gap: 2rem;
        width: 60%;
    }

    .reg-hero-image {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .reg-hero-title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .reg-hero-subtitle {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }

    .reg-color-block {
        width: 100%;
        padding: 3rem 4rem;
    }

    .text-image-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .card-grid-4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem 1rem;
    }

    .reg-arrow-block {
        width: 100%;
        padding: 1rem 2rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-card {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: start;
        align-items: start;
        box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
        padding: 4rem;
        background: white;
        text-align: left;
        width: 100%;
    }

    .reg-card {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: start;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
        padding: 4rem;
        background: white;
        text-align: center;
        width: 100%;
    }

    .icon-card {
        width: 100%;
    }
}

.font-bold { font-weight: bold; }