h1,
h2,
h3,
h4,
h5 {
    letter-spacing: 1px;
}


body.page-activities>.main>.section>.section__inner>.section__inner--horizontal>.section__inner-column--right>.section__body>.section__body__content>p {
    max-width: 100%;
}


.vote-intro-header-raceinfo {
    margin-top: 20px;
}


body.page-raceday-index .section__raceday__index__info-and-news .block__info .block__info__description,
body.page-raceday-index .section__raceday__index__info-and-news .block__news .block__info__description {
    margin-top: 0px;
    margin-bottom: 30px;
}


body.page-activities .section__event .event__items .event__item,
body.page-activity-single .section__event .event__items .event__item {
    position: relative;
}

.event__item__info>.section__action>.action-buttons {
    position: absolute;
    right: 0;
    bottom: 0;
}

body.page-raceday-index .section__raceday__index__vote .section__inner .section__inner--horizontal .section__inner-column--left .section__action {
    margin-top: 2rem;
}

.race-info-cup.section__inner--horizontal.section__inner--column-2 {
    width: 100%;
    margin-top: 0px;
}

.cup-mobile-view {
    display: none;
}

.cup-desktop-view {
    display: block;
}

.race-info-cup>.vote-intro-header h3 {
    height: 150px;
}

.vote-intro-header-raceinfo {
    font-size: 20px;
    color: var(--color-blue-4);
    font-weight: 600;
    line-height: 1.2em;
    max-width: 100%;
    height: 30px;
    margin-top: 10px;
}

.action-button--pill a {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

body.page-raceday-voting-result .section__leave-message .leave-message__control__terms .leave-message__control__terms__item label {
    position: absolute;
    margin-top: -6px;
    width: 80%;
    font-size: 14px;
}

body.page-raceday-voting-result .section__leave-message .leave-message__control--captcha .captcha__action .action-buttons .action-button--pill button {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

body.page-raceday-index .section__raceday__index__info-and-news .section__inner--horizontal .section__inner-column--right {
    width: 100%;
    margin-top: 60px;
}

body.page-raceday-index .section__raceday__index__info-and-news .block__info__items .block__news__item .block__news__inner .block__news__inner--column-2 .block__news__inner--column--left,
body.page-raceday-index .section__raceday__index__info-and-news .block__news__items .block__news__item .block__news__inner .block__news__inner--column-2 .block__news__inner--column--left {
    width: 120px;
}

body.page-raceday-index .section__raceday__index__info-and-news .block__info__items .block__news__item .block__news__inner .block__news__inner--column-2 .block__news__inner--column--right,
body.page-raceday-index .section__raceday__index__info-and-news .block__news__items .block__news__item .block__news__inner .block__news__inner--column-2 .block__news__inner--column--right {
    width: calc(100% - 2rem - 120px);
}

.block__info__header>h2 {
    font-size: 36px;
}



/* T&C  Start */
.modal .modal__wrapper .modal__body ol li,
.modal .modal__wrapper .modal__body ul li {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;


    padding-right: 10px;
    box-sizing: border-box;

}

/* T&C  End */

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2em;
}

.section__narrow-hero-banner .narrow-hero-banner__container .narrow-hero-banner__wrapper img {
    margin-left: 0;
    margin-right: 0;
    width: calc(100% - var(--padding)*2) !important;
}



body.page-raceday-index .section__raceday__index__info-and-news .block__info .block__info__description p,
body.page-raceday-index .section__raceday__index__info-and-news .block__news .block__info__description p {
    color: #666;
}

body.page-raceday-index .section__raceday__index__info-and-news .block__info__items .block__news__item .block__news__inner .block__news__inner--column-2 .block__news__inner--column--right .block__news__short-description a p,
body.page-raceday-index .section__raceday__index__info-and-news .block__news__items .block__news__item .block__news__inner .block__news__inner--column-2 .block__news__inner--column--right .block__news__short-description a p {
    color: #666;
}

.section__hero-banner .hero-banner__container {
    background-color: transparent !important;
    background-image: url("../../asset/image/raceday/hero-banner-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}


#component__accordion .accordion__item .accordion__item__header .cup__info__title__inner h3 {
    font-size: 24px;
}

.narrow-hero-banner__container {
    background-color: transparent !important;
    background-image: url("../../asset/image/raceday/hero-banner-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.secondary-menu__item__title h5 {
    font-size: 15px;
}

.secondary-menu .secondary-menu__inner .secondary-menu__items {
    margin-left: -1rem;
}

.breadcrumb .breadcrumb__inner .breadcrumb__items .breadcrumb__item a h5 {
    position: relative;
}

.breadcrumb .breadcrumb__inner .breadcrumb__items .breadcrumb__item a h5::after {
    position: relative;
    top: 1px;
}

.breadcrumb .breadcrumb__inner .breadcrumb__items .breadcrumb__item {
    padding: 1rem 1.5rem 0.7rem 1rem;
}

@media only screen and (max-width: 1500px) {

    .secondary-menu .secondary-menu__inner {
        padding-top: 6px;
        padding-bottom: 6px;
    }


    .section__narrow-hero-banner .narrow-hero-banner__container .narrow-hero-banner__wrapper img {
        margin-left: 0;
        margin-right: 0;
        width: calc(100% - var(--padding)*2) !important;
    }

}




.voting-list__numbering--mobile {
    display: none;
}

.voting-list__numbering--desktop {
    display: block;
}

@media only screen and (max-width: 1000px) {

    #component__voting-trend {
        min-height: 540px;
    }

}

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

    body.page-raceday-voting-result .section__leave-message .leave-message__control form .leave-message__control__terms .leave-message__control__terms__item label {
        margin-top: -6px;
    }

    .secondary-menu .secondary-menu__inner .secondary-menu__items {
        margin-left: -0.5rem;
    }

    .breadcrumb .breadcrumb__inner .breadcrumb__items {
        margin-left: 1rem;
    }


    .voting-list__numbering--desktop {
        display: none;
    }

    .voting-list__numbering--mobile {
        display: block;
    }
}

.section__hero-banner .hero-banner__container .hero-banner__wrapper img {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* Voting result Start */

#component__voted-item .voted-item__body--right .voted-item__image-container::before {
    background-image: none !important;
}

#component__voted-item .voted-item__body--left .voted-item__body .voted-item__info-container .voted-item__icon {
    display: none;
}


#component__voted-item .voted-item__body--left .voted-item__body .voted-item__info-container .voted-item__title h3 {
    position: relative;
    z-index: 3;
}

#component__voted-item .voted-item__body--left .voted-item__body .voted-item__info-container .voted-item__title .section__body__heading__background-stoke {
    opacity: 1;
}

/* Voting result END */




/* Voting list Start */

#component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container::before {
    background-image: none !important;
}

#component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body {
    padding-left: 0px;
    padding-right: 0px;
}

.block__tool-icon {
    display: inline-block;
    float: right;
    position: relative;
    z-index: 3;
}

#component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container {
    z-index: 1;
}

#component__voting-list .voting-list__body--right {
    min-width: 100%;
    padding-left: 20px;
    padding-right: 10%;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    #component__voting-list .voting-list__body--right {
        min-width: 90%;
    }
}

@media screen and (max-width: 992px) {
    #component__voting-list .voting-list__body--right {
        min-width: 80%;
    }
}


.ValidationErrors {
    color: red;
    margin-top: 10px;
    padding-top: 10px;
    display: inline-block;
    width: 100%;
}


#component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container img {
    top: 40%;
}

#component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
    margin-top: -20px;
}

#component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container img {
    max-width: 700px;
    width: 100%;
}

#component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container::before {
    padding-top: 500px;
}

.voting-list__selected-item__captcha form {
    margin-top: -10px;
}

.voting-list__selected-item__captcha form .action-buttons {
    margin-top: 30px;
}

/* Voting list End */


/* Voting Intro Start */

.vote-intro-header {
    display: inline-block;
    width: 100%;
}

.vote-intro-header h2 {
    margin-bottom: 20px;
}

.vote-intro-header h3 {
    font-size: 24px;
    color: var(--color-blue-4);
    font-weight: 600;
    line-height: 1.2em;
    max-width: 100%;
}

.vote-intro-header p {
    color: var(--color-grey-5);
    line-height: 1.6em;
    max-width: 100%;
    margin-bottom: 40px;
}

.vote-intro-item {
    display: inline-block;
    float: left;
    width: 30%;
    padding-right: 30px;
    box-sizing: border-box;
}

.vote-intro-item2 {
    display: inline-block;
    float: left;
    width: 40%;
}

.vote-intro-item-step img {
    max-width: 96px;
    margin-bottom: 40px;
}

.vote-intro-item-vote-1 img {
    max-width: 221px;
}

.vote-intro-item-vote-2 img {
    max-width: 211px;
}

.vote-intro-item-vote-3 img {
    max-width: 337px;
}

.vote-intro-prizes p {
    color: var(--color-grey-5);
    line-height: 1.6em;
    margin-bottom: 20px;
}

p.vote-intro-term {
    color: var(--color-grey-5);
    line-height: 1.6em;
    margin-bottom: 20px;
}

p.vote-intro-term span {
    color: var(--color-grey-5)
}

p.vote-intro-term2 span {
    color: var(--color-grey-5);
    font-weight: normal;
}

p.vote-intro-term2 {
    color: var(--color-blue-4);
    line-height: 1.6em;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    margin-top: 0px;
}

.vote-intro-button {
    display: inline-block;
    width: 100%;
    margin-top: 40px !important;
    margin-bottom: 60px !important;
}


body.page-about-hkjc .section__header .section__inner .section__inner-column--right .section__key-video__container {
    height: auto !important;
}

/* Voting Intro End */


/* About HKJC Start */

.combined-track {
    position: absolute;

    left: 0% !important;
    /* top: -46px!important; */
    max-width: 960px;
    width: 100%;
    top: -27px;
}

body.page-about-hkjc .section__purpose .purpose__graphic__heading--aligned-center {
    display: none;
}


body.page-about-hkjc .section__community .section__inner .community__inner--horizontal .community__items .community__item .community__item__graphic img {
    max-height: 100px;
}

img.info-left-arrow {
    position: absolute;
    max-width: 30px;
    left: -2px;
    top: 40%;
}

.info-racing {
    z-index: 10;
}

.info-membership {
    z-index: 9;
}

.info-tax {
    z-index: 9;
}

.info-charities {
    z-index: 9;
}

img.horse1-m {
    display: none;
}

img.horse2-m {
    display: none;
}

img.info-arrow-m {
    display: none;
}

.info-content4 {
    top: 250px;
}

.info-heading4 {
    top: 210px;
}

.info-tax {
    top: 405px;
}

.info-membership.aos-init.aos-animate:hover {
    transform: scale(1.15);
}


.info-racing.aos-init.aos-animate:hover {
    transform: scale(1.15);
}


.info-charities.aos-init.aos-animate:hover {
    transform: scale(1.15);
}

.info-tax.aos-init.aos-animate:hover {
    transform: scale(1.15);
}

img.member-ani-pos {
    position: absolute;
    transform: scale(0.75) !important;
    top: -89px;
    cursor: pointer;
}

img.racing-ani-pos {
    position: absolute;
    transform: scale(1);
    top: -59px;
    cursor: pointer;
}

img.tax-ani-pos {
    position: absolute;
    transform: scale(0.75) !important;
    top: -130px;
    cursor: pointer;
}

img.charities-ani-pos {
    position: absolute;
    transform: scale(1);
    top: -45px;
    cursor: pointer;
}

img.horse1 {
    position: absolute;
    max-width: 100px;
    left: 35% !important;
    top: -46px !important;
    max-width: 270px;
}

img.horse2 {
    position: absolute;
    max-width: 270px;
    bottom: 140px;
    left: 36%;
}

.mover {
    animation: move 8s infinite ease-in-out;
}

@keyframes move {

    20%,
    100% {
        opacity: 0;
        transform: translate(190px, 0);
    }

    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
}

.mover01 {
    animation: move 8s infinite ease-in-out;
    animation-direction: reverse;
}

@keyframes move01 {

    20%,
    100% {
        opacity: 0;
        transform: translate(190px, 0);
    }

    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
}




@media only screen and (max-width: 1000px) {

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: -40px;
    }

}

@media only screen and (max-width: 960px) {

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: -50px;
    }

    body.page-about-hkjc .section__community .section__inner .community__inner--horizontal .community__inner-column--left {
        width: 100% !important;
    }

    body.page-about-hkjc .section__community .section__inner .community__inner--horizontal .community__inner-column--right {
        width: 100% !important;
    }

    img.member-ani-pos {
        top: -75px;
    }

    img.racing-ani-pos {
        top: -45px;
    }

    img.tax-ani-pos {
        top: -30px;
    }

    img.charities-ani-pos {
        top: -20px;
    }

    .info-tax {
        top: 268px;
    }

    img.horse1 {

        left: 30% !important;
        top: -40px !important;

    }

    img.horse2 {
        bottom: 100px;
    }

    img.info-arrow {
        position: absolute;
        max-width: 20px;
        right: 1px;
        top: 42%;
    }

    img.info-left-arrow {
        position: absolute;
        max-width: 20px;
        left: 2px;
        top: 42%;
    }

}


@media only screen and (max-width: 860px) {

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: -90px;
    }

}

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

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container {
        width: 100%;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container {
        margin-left: 0px;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container::before {
        padding-top: 400px;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: 20px;
    }

    #component__voting-list .voting-list__body--right {
        padding-left: 20px;
        padding-right: 20px;
    }

    .block__tool-icon {
        margin-top: 0px;
    }

    body.page-about-hkjc .section__purpose .purpose__graphic__heading--aligned-center {
        display: none;
    }

    .infographic-bg-mobile {
        margin-top: 20px !important
    }

    .info-content4 {
        top: 235px;
    }

    .tax-box2 {
        width: 310px;
        top: 335px;
    }

    .tax-box {
        width: 290px;
    }

    img.path1 {
        position: absolute;
        transform: rotate(10deg);
        top: 500px;
        right: 150px;
        width: 270px;
    }

    img.path2 {
        position: absolute;
        transform: rotate(-10deg);
        top: 960px;
        left: 120px;
        width: 270px;
    }

    img.path3 {}

    .info-membership-mobile {
        transform: scale(0.5);
    }

    .info-membership-mobile.aos-init.aos-animate {
        transform: scale(1);
    }

    .info-tax-mobile {
        transform: scale(0.5);
    }

    .info-tax-mobile.aos-init.aos-animate {
        transform: scale(1);
    }

    .info-charities-mobile {
        transform: scale(0.5);
    }

    .info-charities-mobile.aos-init.aos-animate {
        transform: scale(1);
    }

    .info-racing-mobile {
        transform: scale(0.5);
    }

    .info-racing-mobile.aos-init.aos-animate {
        transform: scale(1);
    }

    .member-ani-pos {
        transform: scale(0.5) !important;
    }

    .member-ani-pos.aos-init.aos-animate {
        transform: scale(0.8) !important;
        left: -30px;
        top: -10px;
    }

    .tax-ani-pos {
        transform: scale(0.5) !important;
    }

    .tax-ani-pos.aos-init.aos-animate {
        transform: scale(0.7) !important;
        left: -100px;
    }

    .charities-ani-pos {
        transform: scale(0.5) !important;
    }

    .charities-ani-pos.aos-init.aos-animate {
        transform: scale(1.1) !important;
    }

    .racing-ani-pos {
        transform: scale(0.5) !important;
    }

    .racing-ani-pos.aos-init.aos-animate {
        transform: scale(0.8) !important;
        left: -100px;
    }

    .member-ani-blank {
        width: 330px;
    }

    .racing-ani-blank {
        width: 330px;
    }

    .tax-ani-blank {
        width: 330px;
    }

    .charities-ani-blank {
        width: 330px;
    }

    img.member-ani-pos {
        position: absolute;
        transform: scale(1);
        top: 0px;
    }

    img.racing-ani-pos {
        position: absolute;
        transform: scale(1.2);
        top: 0px;
    }

    img.tax-ani-pos {
        position: absolute;
        transform: scale(1);
        top: -100px;
    }

    img.charities-ani-pos {
        position: absolute;
        transform: scale(1.2);
        top: 50px;
    }

    .info-membership-mobile {
        left: 30px;
    }

    .info-racing-mobile {
        right: 30px;
        top: 850px;
    }

    .info-tax-mobile {
        left: 100px;
    }

    .info-charities-mobile {
        top: 2060px;
        right: 80px;
    }

    .membership-mobile-text {
        position: absolute;
        top: 0px;
        left: -80px;
    }

    .tax-mobile-text {
        position: absolute;
        top: 0px;
        left: -80px;
    }

    .racing-mobile-text {
        position: absolute;
        top: 0px;
        left: -80px;
    }

    .charities-mobile-text {
        position: absolute;
        top: 140px;
        left: -80px;
    }

    .dashed-line1 {
        left: 33%;
        top: 1030px;
    }


    .info-tax-mobile {
        top: 1380px;
    }


}


@media only screen and (max-width: 700px) {

    .vote-intro-item {
        width: 50%;
        margin-bottom: 40px;
    }

    .vote-intro-item2 {
        width: 100%;
        margin-bottom: 40px;
    }

}

@media only screen and (max-width: 660px) {
    .dashed-line1 {
        left: 30%;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container img {
        top: 40%;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container::before {
        padding-top: 300px;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 630px) {
    .info-tax-mobile {
        left: 60px;
    }

    .info-charities-mobile {
        right: 30px;
        top: 2080px;
    }
}

@media only screen and (max-width: 600px) {
    .dashed-line1 {
        left: 27%;
    }


}

@media only screen and (max-width: 680px) {



    .dashed-line1 {
        top: 1010px;
    }


    .membership-mobile-text {

        top: 20px;

    }

    .racing-mobile-text {

        top: 20px;

    }

    .tax-mobile-text {


        top: 10px;

    }

    .charities-mobile-text {

        top: 90px;

    }

    .infographic-bg-mobile {
        min-height: 2700px;
    }

    .dashed-line1 {
        top: 990px;
    }

    .tax-box2 {
        width: 290px;
        top: 350px;
    }

    .tax-box {
        width: 290px;
    }

    img.path1 {
        position: absolute;
        transform: rotate(30deg);
        top: 400px;
        right: -50px;
        width: 300px;
    }

    img.path2 {
        position: absolute;
        transform: rotate(-10deg);
        top: 880px;
        left: -50px;
        width: 290px;
    }

    img.path3 {
        position: absolute;
        transform: rotate(5deg);
        top: 1490px;
        right: -90px;
        width: 300px;
    }

    .dashed-line1 {
        left: 10px;
    }

    .charities-mobile-text {
        position: absolute;
        top: 80px;
        left: -60px;
    }

    .info-membership-mobile {
        position: absolute;
        top: 250px;
        left: -30px;
        z-index: 2;
        max-width: 270px;
    }

    .membership-mobile-text {
        position: absolute;
        top: 0px;
        left: -55px;
    }

    .info-racing-mobile {
        position: absolute;
        right: -30px;
        top: 765px;
        z-index: 2;
        max-width: 270px;
    }

    .racing-mobile-text {
        position: absolute;
        top: 0px;
        left: -65px;
    }

    .info-tax-mobile {
        position: absolute;
        left: -20px;
        top: 1330px;
        z-index: 2;
        max-width: 270px;
    }

    .tax-mobile-text {
        position: absolute;
        top: 0px;
        left: -65px;
    }

    .info-charities-mobile {
        position: absolute;
        right: -15px;
        top: 2020px;
        z-index: 2;
        max-width: 270px;
    }

    .tax-charities-text {
        position: absolute;
        top: 0px;
        left: -65px;
    }
}

@media only screen and (max-width: 560px) {
    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: 0px;
    }

}

@media only screen and (max-width: 460px) {
    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: 20px;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container::before {
        padding-top: 200px;
    }


    body.page-raceday-voting-result .section__leave-message .leave-message__control__terms .leave-message__control__terms__item .message__control__terms__item__remark {
        margin-top: 40px;
        display: inline-block;
        width: 100%;
    }


}

@media only screen and (max-width: 414px) {

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: 10px;
    }

    .vote-intro-item {
        width: 100%;
        margin-bottom: 80px;
        padding-right: 0px;
        text-align: center;
    }

    .vote-intro-item2 {
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }


    .info-racing-mobile {
        right: 0px !important;
    }

    .info-membership-mobile {
        left: -20px !important;
    }

    .info-charities-mobile {
        right: 0px !important;
        top: 1820px !important;
    }

    .info-tax-mobile {
        left: 0px;
        top: 1330px;
    }


}

@media only screen and (max-width: 400px) {
    .tax-box {
        width: 260px;
    }

    .tax-box2 {
        width: 260px;
        margin-left: 65px !important;
    }

    .info-tax-mobile {
        left: 10px;

    }

}



.infographic-bg {
    margin-top: 150px !important;
    position: relative;
    background-image: url('https://res.hkjc.com/campaigns/wp-content/uploads/sites/536/infographic-bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    min-height: 830px;
}


.our-purpose-group {
    margin-top: 40px;
    padding-bottom: 40px;
}

.our-purpose {
    text-align: center;
    max-width: 768px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.our-purpose h2 {
    line-height: 44px;
    font-weight: 700;
    color: #022169;
    font-size: 28px;
}

.our-purpose p {
    color: #5B707C;
    font-size: 16px;
}

.infographic-bg-mobile {
    display: none;
}

.info-membership {
    position: absolute;
    top: -102px;
}

.info-membership img {
    max-width: 400px;
    width: 100%;
}

.info-racing {
    position: absolute;
    top: -93px;
    right: 0px;
}

.info-racing img {
    max-width: 400px;
    width: 100%;
}

.info-charities {
    position: absolute;
    top: 405px;
    left: 0;
}

.info-charities img {
    max-width: 400px;
    width: 100%;
}

.info-tax {
    position: absolute;
    right: 0px;
}

.info-tax img {
    max-width: 400px;
    width: 100%;
}

img.horse1 {
    position: absolute;
    max-width: 100px;
    left: 44%;
    top: -23px;
}



img.rule-player3 {
    position: absolute;
    right: 120px;
    top: -40px;
    width: 160px;

}


img.horse2 {
    position: absolute;
    max-width: 65px;
    bottom: 140px;
    left: 46%;
}


img.info-arrow {
    position: absolute;
    max-width: 30px;
    right: -2px;
    top: 40%;
}


.info-heading {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2em;
    position: absolute;
    top: 225px;
    width: 400px;
    text-align: center;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
    color: #000000;
}

.info-content {
    font-size: 13px;
    line-height: 1.5em;
    width: 400px;
    text-align: center;
    position: absolute;
    top: 245px;
    box-sizing: border-box;
    padding-left: 80px;
    padding-right: 80px;
    color: #5B707C;
}


.info-heading2 {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2em;
    position: absolute;
    top: 190px;
    width: 400px;
    text-align: center;
    box-sizing: border-box;
    padding-left: 60px;
    padding-right: 60px;
    color: #000000;
}

.info-content2 {
    font-size: 13px;
    line-height: 1.5em;
    width: 400px;
    text-align: center;
    position: absolute;
    top: 235px;
    box-sizing: border-box;
    padding-left: 80px;
    padding-right: 80px;
    color: #5B707C;
}


.info-heading3 {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2em;
    position: absolute;
    top: 210px;
    width: 400px;
    text-align: center;
    box-sizing: border-box;
    padding-left: 45px;
    padding-right: 45px;
    color: #000000;
}

.info-content3 {
    font-size: 13px;
    line-height: 1.5em;
    width: 400px;
    text-align: center;
    position: absolute;
    top: 230px;
    box-sizing: border-box;
    padding-left: 80px;
    padding-right: 80px;
    color: #5B707C;
}

.info-heading4 {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2em;
    position: absolute;
    top: 200px;
    width: 400px;
    text-align: center;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
    color: #000000;
}

.info-content4 {
    font-size: 13px;
    line-height: 1.5em;
    width: 400px;
    text-align: center;
    position: absolute;
    top: 245px;
    box-sizing: border-box;
    padding-left: 80px;
    padding-right: 80px;
    color: #5B707C;
}


.info-content-group {
    display: none;
}

.info-content-group2 {
    display: none;
}

.info-content-group3 {
    display: none;
}

.info-content-group4 {
    display: none;
}

.our-unique-model {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
    position: relative;
    top: 300px;
    left: -5px;
}

.our-unique-model h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 28px;
    color: #ffffff;
}

.our-unique-model p {
    margin-top: 10px;
    font-size: 16px;
    color: #ffffff;
}

.our-unique-model2 {
    display: none;
}


@media only screen and (max-width: 960px) {

    .infographic-bg {
        max-width: 860px;
        min-height: 800px;
    }

    .info-membership {
        top: -144px;
    }

    .info-racing {
        top: -135px;
    }

    .info-charities {
        top: 375px;
    }

    .info-tax {
        top: 310px;
    }

    img.info-arrow {
        right: -2px;
    }

    .infographic-bg {
        margin-top: 100px !important;
    }

    img.horse1 {
        display: none;
    }

    img.horse2 {
        display: none;
    }

    .our-unique-model {
        top: 270px;
        left: -5px;
    }


}


@media only screen and (max-width: 960px) {

    .bottom-group-container {
        margin-top: 40px;
    }

    .infographic-bg {
        max-width: 760px;
        min-height: 710px;
    }

    .info-membership {
        top: -42px;
    }

    .info-membership img {
        max-width: 300px;
    }

    .info-racing {
        top: -35px;
    }

    .info-racing img {
        max-width: 300px;
    }

    .info-charities {
        top: 315px;
    }

    .info-charities img {
        max-width: 300px;
    }



    .info-tax img {
        max-width: 300px;
    }

    img.info-arrow {
        right: -5px;
    }

    h2.info-heading {
        display: none;
    }

    p.info-content {
        display: none;
    }

    h2.info-heading2 {
        display: none;
    }

    p.info-content2 {
        display: none;
    }

    h2.info-heading3 {
        display: none;
    }

    p.info-content3 {
        display: none;
    }

    h2.info-heading4 {
        display: none;
    }

    p.info-content4 {
        display: none;
    }


    .info-content-group {
        display: block;
        width: 300px;
        position: absolute;
        border: 4px solid #203869;
        top: 170px;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        border-radius: 10px;
        padding-top: 10px;
    }

    .info-content-group2 {
        display: block;
        width: 300px;
        position: absolute;
        border: 4px solid #F7BE27;
        top: 150px;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        border-radius: 10px;
        z-index: 20;
        padding-top: 10px;
    }

    .info-content-group4 {
        display: block;
        width: 300px;
        position: absolute;
        border: 4px solid #1D70B7;
        top: 160px;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        border-radius: 10px;
        padding-top: 10px;
    }

    .info-content-group3 {
        display: block;
        width: 300px;
        position: absolute;
        border: 4px solid #57842F;
        top: 200px;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        border-radius: 10px;
        padding-top: 10px;
    }

    h2.info-heading-sm {
        font-weight: bold;
        font-size: 18px;
        line-height: 1.2em;
        text-align: center;
        box-sizing: border-box;
        padding-left: 40px;
        padding-right: 40px;
        color: #000000;
    }

    p.info-content-sm {
        font-size: 14px;
        line-height: 1.5em;
        text-align: center;
        box-sizing: border-box;
        color: #5B707C;
    }

    .our-unique-model2 {
        display: none;
        max-width: 380px;
        margin: 0 auto;
        text-align: center;
        color: #000000;
        position: relative;
        top: -160px;
        left: auto;
        border: 2px solid #F7BE27;
        padding: 20px;
        padding-bottom: 5px;
        border-radius: 10px;
    }

    .our-unique-model {
        display: none;
    }

    img.horse1 {
        display: block;
        top: -26px;
    }

    img.horse2 {
        display: block;
        bottom: 100px;
    }

    .our-unique-model2 h2 {
        color: #022169;
        font-size: 28px;
    }

    .our-unique-model2 p {
        color: #5B707C;
        font-size: 16px;
    }

}


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

    .dashed-line1 {
        width: 54px;
        top: 990px;
        left: 40px;
        position: absolute;
    }

    .symbol-group {
        padding-top: 0px !important;
    }

    .symbol-group-left {
        width: 100% !important;
        float: left;
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 20px;
    }


    .symbol-group-right {
        display: inline-block;
        width: 100% !important;
        float: right;
        box-sizing: border-box;
        padding-right: 40px;
        padding-left: 40px;
        text-align: center !important;
    }

    .symbol-item {
        width: 19.2%;
        display: inline-block;
        float: none !important;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: top;
    }



    .infographic-bg {
        display: none;
    }

    .bottom-group-container {
        display: none !important;
    }

    .infographic-bg-mobile {
        display: block;
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
        min-height: 2720px;
        position: relative;
    }

    .info-box {
        max-width: 375px;
        margin: 0 auto;
    }

    .our-unique-model-mobile {
        position: relative;
        text-align: center;
        max-width: 320px;
        margin: 0 auto;
        margin-top: -280px;
        color: #fff;
    }

    .our-unique-model-mobile h2 {
        color: #fff !important;
        font-size: 28px;
    }

    .our-unique-model-mobile p {
        font-size: 16px;
        color: #fff;
    }

    .info-membership-mobile {
        position: absolute;
        top: 320px;
        left: 0px;
        z-index: 2;
    }

    img.membership-mobile {
        max-width: 500px;
    }

    h2.info-heading {
        display: block;
    }

    .info-heading {
        display: block;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 350px;
        width: 500px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 100px;
        padding-right: 100px;
        color: #000000;
    }



    p.info-content {
        display: block;
    }

    .info-content {
        font-size: 14px;
        line-height: 1.5em;
        width: 500px;
        text-align: center;
        position: absolute;
        top: 370px;
        box-sizing: border-box;
        padding-left: 98px;
        padding-right: 98px;
        color: #5B707C;
    }


    h2.info-heading2 {
        display: block;
    }

    .info-heading2 {
        display: block;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 350px;
        width: 500px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 100px;
        padding-right: 100px;
        color: #000000;
    }



    p.info-content2 {
        display: block;
    }

    .info-content2 {
        font-size: 14px;
        line-height: 1.5em;
        width: 500px;
        text-align: center;
        position: absolute;
        top: 370px;
        box-sizing: border-box;
        padding-left: 100px;
        padding-right: 100px;
        color: #5B707C;
    }


    h2.info-heading3 {
        display: block;
    }

    .info-heading3 {
        display: block;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 350px;
        width: 500px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 100px;
        padding-right: 100px;
        color: #000000;
    }



    p.info-content3 {
        display: block;
    }

    .info-content3 {
        font-size: 14px;
        line-height: 1.5em;
        width: 500px;
        text-align: center;
        position: absolute;
        top: 370px;
        box-sizing: border-box;
        padding-left: 100px;
        padding-right: 100px;
        color: #5B707C;
    }

    .info-racing-mobile {
        position: absolute;
        right: 80px;
        top: 800px;
        z-index: 2;
    }

    img.racing-mobile {
        max-width: 500px;
    }


    .info-tax-mobile {
        position: absolute;
        top: 1330px;
        left: 0px;
        z-index: 2;
    }

    img.tax-mobile {
        max-width: 500px;
    }

    .tax-box {
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        margin-left: 100px;
        margin-right: 100px;
        padding-left: 20px;
        padding-right: 20px;
        top: 477px;
        border: 2px solid #F7BE27;
        box-sizing: border-box;
        border-radius: 20px;
    }

    .tax-box h2 {
        margin-bottom: 0px;
        margin-top: 20px;
        color: #006BB3;
    }

    .tax-box p {
        margin-top: 10px;
        margin-bottom: 20px;
        color: #5B707C;
        font-size: 15px;
    }


    .info-charities-mobile {
        position: absolute;
        top: 2000px;

        z-index: 2;
    }

    img.charities-mobile {
        max-width: 500px;
    }

    h2.info-heading4 {
        display: block;
    }

    .info-heading4 {
        display: block;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 210px;
        width: 500px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 100px;
        padding-right: 100px;
    }



    p.info-content4 {
        display: block;
    }

    .info-content4 {
        font-size: 14px;
        line-height: 1.5em;
        width: 500px;
        text-align: center;
        position: absolute;
        top: 235px;
        box-sizing: border-box;
        padding-left: 80px;
        padding-right: 80px;
    }

    .tax-box2 {
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        margin-left: 100px;
        margin-right: 100px;
        padding-left: 17px;
        padding-right: 17px;
        top: 320px;
        border: 2px solid #F7BE27;
        box-sizing: border-box;
        border-radius: 20px;
    }

    .tax-box2 h2 {
        margin-bottom: 0px;
        margin-top: 20px;
        color: #006BB3;
    }

    .tax-box2 p {
        margin-top: 10px;
        margin-bottom: 20px;
        color: #5B707C;
        font-size: 15px;
    }


    img.path1 {
        position: absolute;
        transform: rotate(10deg);
        top: 440px;
        right: 140px;
        width: 270px;
    }

    img.path2 {
        position: absolute;
        transform: rotate(-10deg);
        top: 1000px;
        left: 60px;
        width: 284px;
    }

    img.path3 {
        position: absolute;
        transform: rotate(-10deg) !important;
        top: 1530px;
        right: 130px;
        width: 270px;
    }

    img.horse1-m {
        position: absolute;
        max-width: 100px;
        right: 155px;
        top: 530px;
        transform: rotate(15deg);

    }


    img.horse2-m {
        position: absolute;
        max-width: 100px;
        top: 1700px;
        right: 140px;
        transform: rotate(20deg);

    }


    img.info-arrow-m {
        position: absolute;
        max-width: 50px;
        top: 1180px;
        left: 70px;

    }


}


@media only screen and (max-width: 620px) {

    img.path1 {
        right: 100px;
    }

    img.path3 {
        position: absolute;
        transform: rotate(20deg);
        top: 1590px;
        right: 100px;
        width: 270px;
    }

    img.horse1-m {
        position: absolute;
        max-width: 100px;
        right: 75px;
        top: 530px;
        transform: rotate(15deg);
    }



    img.horse2-m {
        position: absolute;
        max-width: 100px;
        top: 1700px;
        right: 90px;
        transform: rotate(20deg);
    }



}

@media only screen and (max-width: 680px) {

    .racing-ani-pos.aos-init.aos-animate {
        left: -120px;
        top: -40px;
        transform: scale(0.7) !important;
    }

    .tax-ani-pos.aos-init.aos-animate {
        transform: scale(0.5) !important;
        left: -120px;
        top: -120px;
    }

    .charities-ani-pos.aos-init.aos-animate {
        transform: scale(0.9) !important;
        left: -50px;
        top: 10px;
    }

    .racing-ani-blank {
        width: 270px !important;
    }

    .member-ani-blank {
        width: 270px !important;
    }

    .member-ani-pos.aos-init.aos-animate {
        transform: scale(0.7) !important;
        left: -60px !important;
        top: -50px !important;
    }

    .symbol-item {
        width: 24% !important;
        display: inline-block;
        float: none !important;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: top;
    }


    .infographic-bg-mobile {
        max-width: 360px;
        min-height: 2520px;
    }

    .dashed-line1 {
        position: absolute;
        width: 50px;
        top: 950px;
        left: 10px;
    }

    img.path1 {
        position: absolute;
        transform: rotate(30deg);
        top: 440px;
        right: 20px;
        width: 240px;
    }

    img.path2 {
        position: absolute;
        transform: rotate(-10deg);
        top: 800px;
        left: 0px;
        width: 274px;
    }

    img.path3 {
        position: absolute;
        transform: rotate(0deg) !important;
        top: 1440px;
        right: -80px;
        width: 270px;
    }



    img.info-box {
        width: 100%;
    }

    .info-box {
        max-width: 340px;
    }

    .our-unique-model-mobile {
        margin-top: -260px;
    }

    img.membership-mobile {
        max-width: 270px !important;
    }

    .info-membership-mobile {
        position: absolute;
        top: 280px;
        left: -60px;
        z-index: 2;
    }

    img.membership-mobile {
        max-width: 270px !important;
    }

    .info-racing-mobile {
        position: absolute;
        right: -40px;
        top: 740px;
        z-index: 2;
    }


    img.racing-mobile {
        max-width: 270px !important;
    }


    .info-tax-mobile {
        position: absolute;
        top: 1240px;
        left: 0px;
        z-index: 2;
    }


    img.tax-mobile {
        max-width: 270px !important;
    }


    .info-charities-mobile {
        position: absolute;
        top: 1920px;
        right: 0px;
        z-index: 2;
    }


    img.charities-mobile {
        max-width: 270px !important;
    }


    .info-heading4 {
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 210px;
        width: 390px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 60px;
        padding-right: 60px;
    }



    .info-content4 {
        font-size: 15px;
        line-height: 1.5em;
        width: 390px;
        text-align: center;
        position: absolute;
        top: 235px;
        box-sizing: border-box;
        padding-left: 60px !important;
        padding-right: 60px !important;
    }








    .info-heading3 {
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 290px;
        width: 390px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 60px;
        padding-right: 60px;
        color: #000000;
    }


    .info-content3 {
        font-size: 15px;
        line-height: 1.5em;
        width: 390px;
        text-align: center;
        position: absolute;
        top: 340px;
        box-sizing: border-box;
        padding-left: 64px !important;
        padding-right: 64px !important;
        color: #5B707C;
    }


    .tax-box {
        max-width: 390px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        margin-left: 60px;
        margin-right: 60px;
        padding-left: 20px;
        padding-right: 20px;
        top: 490px;
        border: 2px solid #F7BE27;
        box-sizing: border-box;
        border-radius: 20px;
        background-color: #fff;
    }

    .tax-box2 {
        max-width: 390px;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        margin-left: 50px;
        margin-right: 60px;
        padding-left: 20px;
        padding-right: 20px;
        top: 365px !important;
        border: 2px solid #F7BE27;
        box-sizing: border-box;
        border-radius: 20px;
        background-color: #fff;
    }







    .info-heading {
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 295px;
        width: 390px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 100px;
        padding-right: 100px;
        color: #000000;
    }

    .info-content {
        font-size: 15px;
        line-height: 1.5em;
        width: 390px;
        text-align: center;
        position: absolute;
        top: 320px;
        box-sizing: border-box;
        padding-left: 70px;
        padding-right: 70px;
        color: #5B707C;
    }


    .info-heading2 {
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2em;
        position: absolute;
        top: 290px;
        width: 390px;
        text-align: center;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        color: #000000;
    }

    .info-content2 {
        font-size: 15px;
        line-height: 1.5em;
        width: 390px;
        text-align: center;
        position: absolute;
        top: 340px;
        box-sizing: border-box;
        padding-left: 70px;
        padding-right: 70px;
        color: #5B707C;
    }


    img.horse1-m {
        position: absolute;
        max-width: 100px;
        right: -10px;
        top: 480px;
        transform: rotate(15deg);
    }




    img.horse2-m {
        position: absolute;
        max-width: 100px;
        top: 1450px;
        right: -20px;
        transform: rotate(20deg);
    }




    img.info-arrow-m {
        position: absolute;
        max-width: 50px;
        top: 1020px;
        left: 5px;
    }



}


@media only screen and (max-width: 480px) {


    .symbol-item {
        width: 30% !important;
    }
}


@media only screen and (max-width: 414px) {

    body.page-about-hkjc .section__purpose .purpose__graphic__heading--aligned-center {
        display: block;
        margin-top: 20px !important;
    }

    .info-membership-mobile {
        top: 180px;
    }

    .info-racing-mobile {
        top: 640px;
    }

    .info-tax-mobile {
        top: 1140px;
    }

    .our-unique-model-mobile {
        display: none;
    }

    .dashed-line1 {
        left: 0px;
        top: 900px;
    }

    img.path1 {
        position: absolute;
        transform: rotate(20deg) !important;
        top: 320px;
        right: -60px;
        width: 240px;
    }


    img.path2 {
        position: absolute;
        transform: rotate(-15deg) !important;
        top: 760px;
        left: -100px;
        width: 274px;
    }

    img.path3 {
        position: absolute;
        transform: rotate(10deg) !important;
        top: 1350px;
        right: -90px;
        width: 270px;
    }

}

@media only screen and (max-width: 380px) {

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__info-container {
        margin-top: 20px;
    }

    #component__voting-list .voting-list__body--right .voting-list__selected-item .voting-list__selected-item__body .voting-list__selected-item__image-container::before {
        padding-top: 150px;
    }


    .symbol-item {
        width: 45% !important;
    }
}


.bottom-group {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
}

.tax-box-desktop {
    display: inline-block;
    float: left;
    width: 50%;
    border-right: 2px solid #9E9B9A;
    box-sizing: border-box;
    padding-right: 20px;
}

.tax-box-desktop h2 {
    color: #006BB3;
    font-size: 28px;
}

.tax-box-desktop p {
    font-size: 16px;
    color: #5B707C;
}

.charities-box-desktop {
    display: inline-block;
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-left: 20px;
}

.charities-box-desktop h2 {
    color: #006BB3;
    font-size: 28px;
}

.charities-box-desktop p {
    font-size: 16px;
    color: #5B707C;
}

.bottom-group-container {
    display: inline-block;
    width: 100%;
    margin-bottom: 0px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}






.symbol-group {
    width: 100%;
    box-sizing: border-box;
    max-width: 1170px;
    margin: 0 auto;
    padding-top: 40px;
}

.symbol-group-left {
    display: inline-block;
    width: 30%;
    float: left;
    padding-left: 40px;
    box-sizing: border-box;
}

.symbol-group-right {
    display: inline-block;
    width: 70%;
    float: right;
    box-sizing: border-box;
    padding-right: 40px;
    text-align: right;
}


.symbol-item {
    width: 19.2%;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
}

.symbol-item img {
    height: 80px;
    display: inline-block;
}

.symbol-item p {
    margin-top: 10px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4em;
}

.symbol-group-left p {
    color: #5B707C;
    font-size: 16px;
}

.symbol-group-left h2 {
    color: #022169;
    font-size: 24px;
    line-height: 1.2em;
}




@media only screen and (max-width: 350px) {

    .symbol-group-left h2 {
        margin-top: 30px;
    }

    .info-tax-mobile {
        left: -20px !important;
    }

    .tax-box {
        width: 250px;
        left: 10px;
    }

    .tax-box2 {
        width: 250px;
    }

    .info-racing-mobile {
        right: -30px !important;
    }

    .info-membership-mobile {
        left: -35px !important;
    }

    img.path1 {
        right: -80px;
    }

    img.path3 {
        right: -130px;
    }

    .info-charities-mobile {
        right: -20px !important;
    }

    .dashed-line1 {
        display: none;
    }

}

/* About HKJC End */



/* race info */

#component__accordion .accordion__item .accordion__item__header .cup__info__title__inner h3 {
    font-size: 24px;
    color: var(--color-blue-4);
    font-weight: 600;
    text-transform: capitalize;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row {
    justify-content: unset;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--horse {
    width: calc(45%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--brand-no {
    width: calc(20%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--trainer {
    width: calc(25%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column {
    padding: 10px 1%;
    border-bottom: 0px;
}

.table__body .table__column--horse,
.table__body .table__column--trainer,
.table__body .table__column--jockey {
    color: #00326F;
    text-decoration: underline;
    cursor: pointer;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--horse-no {
    width: 5%;
    text-align: center;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--last-6-runs {
    width: 5%;
    text-align: center;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--colour {
    width: 8%;
    text-align: center;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--racecard-horse {
    width: 15%;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--wt {
    width: 5%;
    text-align: center;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--jockey {
    width: 15%;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--draw {
    width: 5%;
    text-align: center;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--racecard-trainer {
    width: 15%;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--gear {
    width: 8%;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--weights {
    width: calc(10%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--age-and-sex {
    width: calc(35%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--nh-brd-horse {
    width: calc(20%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--sh-bred-horse {
    width: calc(20%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--year {
    width: calc(10%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--horse-pw {
    width: calc(20%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--trainer-pw {
    width: calc(25%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--jockey-pw {
    width: calc(25%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--Replay {
    width: calc(10%);
}

#raceday-horse-table .table .table__row .table__column {
    padding: 5px 2px;
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-plc {
    width: calc(5%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-horseno {
    width: calc(5%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-horse {
    width: calc(10%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-jockey {
    width: calc(10%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-trainer {
    width: calc(10%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-actualwt {
    width: calc(6%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-declar {
    width: calc(8%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-draw {
    width: calc(5%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-lbw {
    width: calc(5%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-run {
    width: calc(6%);
}

#component__accordion .cup__info__table .cup__info__table__inner .table .table__row .table__column--result-finish {
    width: calc(7%);
}

body.page-activity-single .table .table__wrapper:before {
    background-color: transparent;
    background-image: none;
}




@media screen and (max-width: 1024px) {
    body.page-raceday-index .section__raceday__index__vote .section__inner .section__inner--horizontal .section__inner-column--left {
        width: 100%;
        max-width: 100%;
    }

    body.page-raceday-index .section__raceday__index__vote .section__inner .section__inner--horizontal .section__inner-column--right {
        margin: 0 auto;
    }

    #component__accordion .accordion__item .cup__info__table .cup__info__table__inner .table {
        min-width: 1024px;
        position: relative;
    }

    #component__accordion .cup__info__table .cup__info__table__inner .table .table__row .media--desktop-1024-above-only {
        display: block;
    }
}

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

    body.page-raceday-voting-result .section__leave-message .leave-message__control form .leave-message__control__terms .leave-message__control__terms__item label {
        padding-right: 2rem;
        box-sizing: border-box;
    }
}


#component__accordion .accordion__item .cup__info__table .cup__info__table__inner .table {
    min-width: 1024px;
    position: relative;
}

body.page-activity-single .table .table__wrapper:before {
    background-color: transparent;
    background-image: none;
}

body.page-raceday-voting-result .section__leave-message .leave-message__control__terms .leave-message__control__terms__item .message__control__terms__item__remark {
    margin-top: 2rem;
    display: inline-block;
    width: 100%;
}

}

#component__accordion .accordion__item .cup__info__table .cup__info__table__inner .table.racecard-remark-table-left .table__body .table__row {
    width: 49%;
    float: left;
    margin-right: 2%;
}

.racecard-remark-table-right .table__body {
    width: 49%;
    float: left;
}

.racecard-remark-table-left .col-1 {
    width: 20%;
    padding: 5px 5px 10px 5px;
}

.racecard-remark-table-left .col-2 {
    width: 70%;
    padding: 5px 5px 10px 0px;
}

.racecard-remark-table-right .col-1 {
    width: 20%;
    padding: 5px 5px 10px 5px;
}

.racecard-remark-table-right .col-2 {
    width: 70%;
    padding: 5px 5px 10px 0px;
}


/* race info end */