@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Collegiate+One&family=Lexend+Deca:wght@900&family=Noto+Serif+TC&display=swap');
@media screen and (min-width: 800px) {
    body {
        margin: 0;
        padding-top: 0px;
        font-family: 'Quicksand', sans-serif;
        font-weight: 300;
        width: 100%;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 500;
    }
    /*--------------------------------------------COLORS---------------------------------------*/
    blue {
        color: #0000ff;
    }
    red {
        color: #f00;
    }
    e {
        text-shadow: 1px 1px 1px rgb(141, 141, 141);
    }
    /*--------------------------------------------NAVBAR---------------------------------------*/
    .mobile-container {
        display: none;
    }
    .mbg_sec1 {
        display: none;
    }
    .mbfooter {
        display: none;
    }
    .mb_jcc {
        display: none;
    }
    .mb_events {
        display: none;
    }
    .mb_newsletters {
        display: none;
    }
    #mb_com_tab {
        display: none;
    }
    nav {
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        padding: 10px 100px;
        box-sizing: border-box;
        background: #fff;
        transition: .5s;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
    }
    nav .logo {
        float: left;
    }
    nav .logo img {
        height: 80px;
        transition: .5s;
    }
    nav ul {
        float: right;
        margin: 0;
        padding: 0;
        display: flex;
    }
    nav ul li {
        list-style: none;
    }
    nav ul li a {
        line-height: 80px;
        color: #262626;
        padding: 5px 10px;
        font-family: 'Oswald', sans-serif;
        font-size: 12pt;
        text-decoration: none;
        text-transform: uppercase;
        transition: .5s;
    }
    nav ul li a.active,
    nav ul li a:hover {
        color: #fff;
        background: #f00;
    }
    nav.smallNav {
        width: 100%;
        height: 50px;
        padding: 10px 100px;
        background: rgb(255, 255, 255);
        transition: .5s;
    }
    nav.smallNav img {
        height: 40px;
        transition: .5s;
    }
    nav.smallNav ul li a {
        line-height: 40px;
        font-size: 9pt;
        padding: 5px 20px;
        transition: .5s;
    }
    /*--------------------------------------------GRID---------------------------------------*/
    .grid {
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
        grid-template-areas: "sec1 sec1 sec1 sec1 sec1 " ". box1 box2 box3 ." ". content content content ." "footer footer footer footer footer ";
    }
    .note {
        width: 98vw;
        height: 100vh;
        padding: 10px;
        margin: 0% 0% 0% 0%;
        padding-top: 10vh;
        background: rgba(0, 0, 0, 0.3);
    }
    .note h2 {
        margin: 0;
        padding: 0;
        font-family: Arial;
        color: #fff;
        font-size: 100%;
    }
    .note h2 a {
        text-decoration: none;
        color: #fff;
        border-radius:10px;
    }
    .note h2 a:hover {
        opacity: 0.8;
        ;
    }
    .note h1 {
        color: rgb(255, 0, 0);
        font-family: 'Arial';
        /*animation: blinker 5s linear infinite;*/
        font-size: 120%;
        /*text-shadow: 1px 1px 1px rgb(247, 58, 58);*/
        margin: 0% 0% 0% 0%;
    }
    .note .noteH1A{font-family: 'Noto Serif TC';color:purple;font-size:80pt}
    .note .noteH1B{font-family: 'Lexend Deca';font-size:110pt;margin-top:-40px;color:#fff;letter-spacing:10px}
    .note .noteH1C{font-family: 'Lexend Deca';color:#fff;letter-spacing:35px;font-size:200pt;margin-top:-80px}
    
    @keyframes blinker {
        50% {
            opacity: 0.5;
        }
    }
    .eventsGrid {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-areas: "spacer spacer spacer" ". content . " "footer footer footer";
    }
    .newsGrid {
        display: grid;
        grid-template-columns: 1fr 5fr 2fr;
        grid-template-areas: "spacer spacer spacer" ". newsletters side1" ". newsletters side2" ". newsletters ." "footer footer footer";
    }
    .clubGrid {
        display: grid;
        grid-template-columns: 1fr 5fr 2fr;
        grid-template-areas: "spacer spacer spacer" ". content side1" ". content side2" ". content side3" ". content ." "footer footer footer";
    }
    .galGrid {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-areas: "spacer spacer spacer" ". gallery ." "footer footer footer";
    }
    .contactGrid {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-areas: "spacer spacer spacer" ". contacts ." "footer footer footer";
    }
    /*--------------------------------------------SECTION 1----------------------------------*/
    .sec1 {
        grid-area: sec1;

        margin-top: 10vh;
        background: url("./images/bg/bg.jpg");
        background-size: cover;
    background-position: center center;
    width: 100%;
    height: 900px;
        text-align: center;
    }
    .sec1 h3 {
        width: 50%;
        margin: 0% 25%;
        margin-top: 50vh;
        vertical-align: bottom;
        font-family: Verdana;
        font-size: 100%;
        color: rgba(0, 0, 0, 0.5);
    }
    .landing-note{width:50vw;height:50vh;position:absolute;left:45vw;top:25vh;}
    /*--------------------------------------------BOX-----------------------------------------*/
    .boxContainer {
        background: linear-gradient(180deg, #1a1a1a, #fff);
        grid-column: 1 / 6;
        grid-row: 2;
    }
    .box {
        background: #FFF;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0;
        margin-bottom: 50px;
        overflow: hidden;
        border-radius: 10px;
        height: 450px;
        padding: 0px;
        box-shadow: 5px 10px 18px rgb(110, 110, 110), inset 0 200px rgba(255, 255, 255, 0.1), inset 0 -60px 120px rgba(200, 200, 200, 0.8), 0 30px 40px rgba(200, 200, 200, 0.8);
    }
    .scrollbox {
        overflow-y: auto;
        margin-right: -16px;
        box-shadow: none;
        border-radius: 0%;
        height: 400px;
        padding: 0%;
        background: transparent;
    }
    .scrollbox table {
        width: 100%;
    }
    .box h1 {
        border-radius: 10px 10px 0 0;
        text-align: center;
        background: #FF0000;
        margin: 0;
        font-size: 16pt;
        text-shadow: 2px 2px 4px rgb(170, 170, 170);
        padding: 10px;
        line-height: 30px;
        color: #fff;
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
    }
    .box td {
        font-weight: bold;
        font-size: 90%;
        color: #0a4178;
        padding: 10px;
    }
    .box>a {
        text-decoration: none;
        font-size: 90%;
        color: #0a4178;
        font-weight: bold;
        padding: 20px;
    }
    .box>a:hover {
        text-decoration: none;
        padding: 10px;
        font-size: 90%;
        color: #FF0000;
        text-shadow: 2px 2px 4px #FF0000;
    }
    .box li {
        margin-left: 30px;
        padding-right: 10px;
    }
    /*--------------------------------------------BOX 1---------------------------------------*/
    .box1 {
        grid-area: box1;
        grid-column: 2 / 3;
        grid-row: 2;
        margin-top: 50px;
    }
    /*--------------------------------------------BOX 2---------------------------------------*/
    .box2 {
        margin-top: 50px;
        grid-area: box2;
        grid-column: 3 / 4;
        grid-row: 2;
    }
    /*--------------------------------------------BOX 3---------------------------------------*/
    .box3 {
        margin-top: 50px;
        grid-area: box3;
        grid-column: 4 / 5;
        grid-row: 2;
    }
    .box3 img {
        max-width: 50px;
        border: 2px solid rgb(182, 182, 182);
        border-radius: 50%;
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
    }
    .box3 h2 {
        color: #000;
        text-shadow: 2px 2px 2px #555;
    }
    /*--------------------------------------------CONTENET------------------------------------*/
    .content {
        grid-area: content;
        padding-top: 50px;
        text-align: center;
    }
    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        color: #C0C0C0;
        border-width: 1px;
    }
    .content p {
        text-align: justify;
        font-size: 14pt;
    }
    .content h1,
    .content h2 {
        text-shadow: 1px 1px 2px #666;
    }
    .content img {
        max-width: 50%;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
        border: 2px solid #777;
        border-radius: 10px;
    }
    .content a {
        color: #03009b;
        font-size: 12pt;
        font-weight: 500;
        text-decoration: none;
    }
    .content a:hover {
        color: #FF0000;
        text-shadow: 2px 2px 4px #FF0000;
    }
    .content li {
        text-align: justify;
        margin-left: 10%;
        margin-right: 10%;
    }
    .clubGrid h2 {
        margin-left: -50px;
        color: #020025;
        text-align: left;
        font-family: 'Just Another Hand', cursive;
        font-size: 28pt;
    }
    .clubGrid h3 {
        text-align: center;
        color: #DF0101;
        font-family: 'Just Another Hand', cursive;
        font-size: 24pt;
    }
    #spacerH1 {
        font-size: 16pt;
    }
    /*--------------------------------------------SPACER---------------------------------------*/
    .spacer {
        grid-area: spacer;
        padding: 40px;
        background: url("./images/bg/5.jpg");
        background-size: 200% 600%;
        animation: g-back 240s linear infinite;
        margin-top: 80px;
    }
    .spacer h1 {
        transition: 2s;
        animation: yourAnimation 2s forwards 0s ease;
        width: 30%;
        margin-left: 35%;
        margin-right: 35%;
        text-transform: uppercase;
        text-align: center;
        background: rgba(0, 0, 0, 0.8);
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
        border-radius: 10px;
        padding: 10px;
        color: rgba(255, 255, 255);
        font-weight: bold;
    }
    @keyframes yourAnimation {
        0% {
            transform: translateY(-100px);
            opacity: 0;
        }
        100% {
            transform: translateY(0px);
            opacity: 1;
        }
    }
    @keyframes g-back {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    /*--------------------------------------------SIDELINKS---------------------------------------*/
    .sideLinks {
        background: rgb(255, 255, 255);
        margin: 25px;
        animation: righttoleft .9s forwards 0s ease;
        height: auto;
        padding: 0px;
        box-shadow: 5px 10px 18px rgb(110, 110, 110), inset 0 200px rgba(255, 255, 255, 0.1), inset 0 -60px 120px rgba(200, 200, 200, 0.8), 0 30px 40px rgba(200, 200, 200, 0.8);
        border-radius: 10px;
    }
    .side1 {
        grid-area: side1;
        margin-top: 65px;
    }
    .side2 {
        grid-area: side2;
    }
    .side3 {
        grid-area: side3;
    }
    @keyframes righttoleft {
        0% {
            transform: translateX(1500px);
        }
        100% {
            transform: translateX(0px)
        }
    }
    .sideLinks div h1 {
        border-radius: 10px 10px 0 0;
        text-align: center;
        background: #000a35;
        line-height: 30px;
        font-size: 16pt;
        text-shadow: 2px 2px 4px rgb(255, 255, 255);
        padding: 10px;
        margin-top: 0;
        color: rgb(255, 255, 255);
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
    }
    .sideLinks div a {
        text-decoration: none;
        color: #020025;
        font-weight: normal;
        padding-bottom: 10px;
    }
    .sideLinks div a:hover {
        text-decoration: none;
        color: #FF0000;
        text-shadow: 2px 2px 4px #FF0000;
    }
    .sideLinks li {
        margin-left: 25px;
        margin-right: 10px;
        padding-bottom: 10px;
    }
    .sideLinks p {
        margin-left: 25px;
        margin-right: 10px;
        padding-bottom: 10px;
    }
    /*--------------------------------------------NEWSLETTERS---------------------------------------*/
    .newsletters {
        grid-area: newsletters;
        text-align: left;
        padding-left: 0%;
        padding-right: 0%;
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 10pt;
    }
    .docSec {
        border: 1px solid rgb(184, 184, 184);
        padding: 5px;
        margin: 5px;
        border-radius: 10px;
    }
    .newsletters h2 {
        color: #0B0B61;
        font-family: 'Just Another Hand', cursive;
        font-size: 36pt;
        margin-left: 5px;
        margin-bottom: 0;
        margin-top: 0;
        padding-top: 0;
    }
    .newsletters a {
        color: blue;
        padding-left: 20px;
        font-size: 10pt;
        font-weight: 0;
        text-decoration: none;
    }
    .newsletters a:hover {
        color: #1f1f1f;
        font-weight: bold;
    }
    .newsletters fieldset legend {
        font-size: 28pt;
        font-family: 'Just Another Hand', cursive;
        color: #DF0101;
    }
    /*--------------------------------------------GALLERY--------------------------------------*/
    .gallery {
        grid-area: gallery;
    }
    .gallery img {
        height: 145px;
        margin: 10px;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
    }
    .gallery video {
        margin: 10px;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
    }
    .gallery h2 {
        font-family: 'Just Another Hand';
        color: #0B0B61;
        font-size: 28pt;
    }
    .gallery h3 {
        font-family: 'Just Another Hand';
        font-size: 24pt;
        font-weight: normal;
        color: #DF0101;
        padding-right: 10%;
        text-align: center;
        padding-left: 10%;
    }
    /*--------------------------------------------MEMBERSHIP-----------------------------------*/
    #fees {
        text-align: center;
        box-shadow: 5px 10px 18px rgb(110, 110, 110), inset 0 200px rgba(255, 255, 255, 0.1), inset 0 -60px 120px rgba(200, 200, 200, 0.8), 0 30px 40px rgba(200, 200, 200, 0.8);
        border-radius: 10px;
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
    }
    #fees th,
    td {
        text-align: left;
        padding: 20px;
        border-bottom: 1px solid rgba(136, 136, 136, 0.582);
    }
    #regimg {
        border: none;
        box-shadow: none;
        margin-left: 25%;
        margin-right: 25%;
    }
    /*--------------------------------------------JCC--------------------------------------*/
    .jcc {
        width: 100%;
        height: auto;
        text-align: justify;
    }
    .jcc_img {
        width: auto;
        max-height: 300px;
        margin: 20px 0px;
        box-shadow: 5px 10px 18px rgb(0, 0, 0);
    }
    .legend {
        text-align: left;
        padding: 0px;
        margin: 0px;
    }
    .jcc h2 {
        color: #f1f1f1;
        font-family: Arial;
        font-size: 24pt;
        font-weight: bold;
    }
    .event_info {
        text-align: justify;
        margin: 0% 20%;
    }
    .profile_table {
        width: 70%;
        margin: auto auto;
        text-align: center;
        border: none;
        padding: 0;
    }
    .profile_table td {
        border: none;
        text-align: center;
        padding: 2px 0px;
        margin: 0px;
    }
    .profile_table .table_heading {
        background: url("./images/jacaranda_city_challenge/bnr5.png");
    }
    .jcc_img:hover {
        opacity: 0.8;
    }
    .parking {
        width: 100%;
        height: auto;
        box-shadow: 5px 10px 18px rgb(0, 0, 0);
        margin: 20px 0px;
    }
    .jcc_logo {
        width: 100%;
        height: auto;
        padding: 0%;
        margin: 0%;
    }
    cRed {
        color: red;
        font-weight: bold;
    }
    cGreen {
        color: #00b050;
        font-weight: bold;
    }
    cBlue {
        color: #4472c4;
        font-weight: bold;
    }
    cOrange {
        color: #ffc000;
        font-weight: bold;
    }
    cPurple {
        color: #b94fa5;
        font-weight: bold;
    }
    .jcc ul {
        text-align: center;
        margin: 0%;
    }
    .jcc li {
        text-align: left;
        padding: 10px;
        margin-left: 45%;
    }
    /*--------------------------------------------CONTACT--------------------------------------*/
    .contacts {
        grid-area: contacts
    }
    .contacts img {
        width: 145px;
        height: 145px;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
        border-radius: 50%;
        border: 5px double rgb(160, 160, 160);
    }
    .contacts table {
        width: 100%;
        text-align: left;
        padding: 0px;
        text-align: center;
        box-shadow: 5px 10px 18px rgb(110, 110, 110), inset 0 200px rgba(255, 255, 255, 0.1), inset 0 -60px 120px rgba(200, 200, 200, 0.8), 0 30px 40px rgba(200, 200, 200, 0.8);
        border-radius: 10px;
        margin-bottom: 50px;
    }
    .contacts h2 {
        font-family: 'Just Another Hand';
        color: #0B0B61;
        font-size: 28pt;
        text-align: center;
    }
    .contacts a {
        text-decoration: none;
        color: #9c9c9c;
        font-weight: normal;
        padding-bottom: 10px;
    }
    .contacts a:hover {
        text-decoration: none;
        color: #FF0000;
        text-shadow: 2px 2px 4px #FF0000;
    }
    .contacts td,
    th {
        text-align: left;
        padding: 20px;
        border-bottom: 1px solid rgba(136, 136, 136, 0.582);
    }
    .contacts tr:nth-child(odd) {
        background: rgb(230, 230, 230);
    }
    .contacts tr:nth-child(even) {
        background: rgb(241, 241, 241);
    }
    /*--------------------------------------------FOOTER---------------------------------------*/
    .footer {
        grid-area: footer;
        color: #C0C0C0;
        width: 100%;
        height: 110px;
    }
    .footer a {
        color: #fff;
        text-shadow: 1px 1px 2px #fff;
        text-decoration: none;
        font-family: Candara;
        font-weight: bold;
        font-size: 10pt;
        text-decoration: none;
    }
    .footer a:hover {
        transition: color .5s ease-out, background 5s ease-in;
        color: #0080FF;
        text-shadow: 1px 1px 2px #000;
        text-decoration: none;
    }
    .footer table {
        background: rgb(24, 24, 24);
        width: 100%;
        text-align: center;
    }
    .footer td {
        font-family: Gill Sans MT;
        text-shadow: 1px 1px 2px #000;
        font-weight: bold;
        font-size: 9pt;
        text-align: center;
        color: #777;
        min-width: 30%;
    }
    .footer img {
        width: 100px;
        height: auto;
    }
    #comrades_img {}
    #runawaysport_img {
        border: 1px solid #777;
    }
    .membership_h2 {
        font-size: 24pt;
        color: #DF0101;
        font-weight: normal;
    }
}

@media screen and (max-width: 799px) {
    .navbar {
        display: none;
    }
    .jcc {
        display: none;
    }
    .jcc_logo {
        display: none;
    }
    .eventsGrid {
        display: none;
    }
    .newsletters {
        display: none;
    }
    .sideLinks {
        display: none;
    }
    #com_tab {
        display: none;
    }
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 100;
        background: #1d477b;
        padding: 0;
        margin: 0;
        padding-top: 80px;
    }
    .mobile-container {
        width: 100%;
        margin: auto;
        background-color: #333;
        height: auto;
        color: white;
        position: fixed;
        top: 0;
        z-index: 1;
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
    }
    .topnav {
        overflow: hidden;
        background-color: #fff;
        position: relative;
    }
    .topnav #myLinks {
        display: none;
    }
    .topnav a {
        color: #1f1f1f;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
    }
    .topnav img {
        width: auto;
        height: 50px;
    }
    .topnav a.icon {
        background: url("./images/icons/menu.png");
        display: block;
        position: absolute;
        right: 10px;
        top: 20px;
    }
    #myLinks a:hover {
        background-color: #FF0000;
        color: #fff;
    }
    .Active {
        background-color: #fff;
        color: #1f1f1f;
    }
    .sec1 {
        height: auto;
        width: 100%;
        background: #a5268d;
        margin: 0;
        padding: 0%;
    }
    .mbg_sec1 {
        width: 100%;
        height: auto;
        margin: 0px;
        padding: 0% 0% 25% 0%;
    }
    .note {
        width: 100%;
        height: auto;
        padding: 0px;
        margin: 0% 0%;
        background: #1a1a1a;
        text-align: center;
    }
    .note h2 {
        margin: 0;
        padding: 0% 0% 40% 0%;
        font-family: Arial;
        color: #fff;
        font-size: 100%;
    }
    .note a {
        text-decoration: none;
        margin-top:50px;
        color: #fff;
    }
    .note a:hover {
        opacity: 0.5;
    }
    .note h1 {
        font-family: Arial;
        /*animation: blinker 5s linear infinite;*/
        font-size: 120%;
        /*text-shadow: 1px 1px 1px rgb(247, 58, 58);*/
        margin: 0% 0% 0% 0%;
        padding: 10px;
    }
    
    .note .noteH1A{font-family: 'Noto Serif TC';color:purple;font-size:30pt;}
    .note .noteH1B{font-family: 'Lexend Deca';font-size:40pt;margin-top:-40px;color:#fff;letter-spacing:0px}
    .note .noteH1C{font-family: 'Lexend Deca';color:#fff;letter-spacing:5px;font-size:80pt;margin-top:-60px}
    
    @keyframes blinker {
        50% {
            opacity: 0.5;
        }
    }
    /*--------------------------------------------BOX-----------------------------------------*/
    .box {
        background: #FFF;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0;
        margin-bottom: 50px;
        overflow: hidden;
        border-radius: 10px;
        height: 450px;
        padding: 0px;
        box-shadow: 5px 10px 18px rgb(70, 70, 70), inset 0 200px rgba(255, 255, 255, 0.1), inset 0 -60px 120px rgba(200, 200, 200, 0.8), 0 30px 40px rgba(0, 0, 0, 0.8);
    }
    .scrollbox {
        overflow-y: auto;
        margin-right: -16px;
        box-shadow: none;
        border-radius: 0%;
        height: 400px;
        padding: 0%;
        background: transparent;
    }
    .box h1 {
        border-radius: 10px 10px 0 0;
        text-align: center;
        background: #FF0000;
        margin: 0;
        font-size: 16pt;
        text-shadow: 2px 2px 4px rgb(170, 170, 170);
        padding: 10px;
        line-height: 30px;
        color: #fff;
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
    }
    .box td {
        font-weight: bold;
        font-size: 90%;
        color: #0a4178;
        padding: 10px;
    }
    .box>a {
        text-decoration: none;
        font-size: 90%;
        color: #0a4178;
        font-weight: bold;
        padding: 20px;
    }
    .box>a:hover {
        text-decoration: none;
        padding: 10px;
        font-size: 90%;
        color: #FF0000;
        text-shadow: 2px 2px 4px #FF0000;
    }
    .box li {
        margin-left: 30px;
        padding-right: 10px;
    }
    /*--------------------------------------------BOX 1---------------------------------------*/
    .box1 {
        margin-top: 50px;
    }
    /*--------------------------------------------BOX 2---------------------------------------*/
    .box2 {
        margin-top: 50px;
    }
    /*--------------------------------------------BOX 3---------------------------------------*/
    .box3 {
        margin-top: 50px;
    }
    .box3 img {
        max-width: 50px;
        border: 2px solid rgb(182, 182, 182);
        border-radius: 50%;
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
    }
    .box3 h2 {
        color: #000;
        text-shadow: 2px 2px 2px #555;
    }
    /*--------------------------------------------CONTENT---------------------------------------*/
    .content {
        padding: 50px 20px 10px 20px;
        text-align: center;
        background: #fff;
    }
    hr {
        display: none;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        color: #C0C0C0;
        border-width: 1px;
    }
    .content p {
        text-align: justify;
        font-size: 10pt;
        padding: 20px;
    }
    .content h1,
    .content h2 {
        text-shadow: 1px 1px 2px #666;
    }
    .content img {
        max-width: 50%;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
        border: 2px solid #777;
        border-radius: 10px;
    }
    .content a {
        color: #03009b;
        font-size: 12pt;
        font-weight: 500;
        text-decoration: none;
    }
    .content a:hover {
        color: #FF0000;
        text-shadow: 2px 2px 4px #FF0000;
    }
    .content li {
        text-align: justify;
        margin-left: 10%;
        margin-right: 10%;
        font-size: 10pt;
    }
    /*--------------------------------------------FOOTER---------------------------------------*/
    .footer {
        display: none;
    }
    .mbfooter {
        color: #C0C0C0;
        width: 100%;
        height: auto;
        padding: 0px 0px 0px 0px;
    }
    .mbfooter a {
        color: #fff;
        text-shadow: 1px 1px 2px #fff;
        text-decoration: none;
        font-family: Candara;
        font-weight: bold;
        font-size: 7pt;
        text-decoration: none;
    }
    .mbfooter a:hover {
        transition: color .5s ease-out, background 5s ease-in;
        color: #0080FF;
        text-shadow: 1px 1px 2px #000;
        text-decoration: none;
    }
    .mbfooter table {
        background: rgb(24, 24, 24);
        width: 100%;
        text-align: center;
    }
    .mbfooter td {
        font-family: Gill Sans MT;
        text-shadow: 1px 1px 2px #000;
        font-weight: bold;
        font-size: 7pt;
        text-align: center;
        color: #777;
        min-width: 30%;
    }
    .mbfooter img {
        width: 100px;
        height: auto;
    }
    /*--------------------------------------------MB_JCC--------------------------------------*/
    .mb_jcc {
        width: 100%;
        height: auto;
        text-align: center;
    }
    .jcc_img {
        width: 100%;
        max-height: auto;
        margin: 10px 0px;
        box-shadow: 5px 10px 18px rgb(0, 0, 0);
    }
    .legend {
        text-align: left;
        padding: 0px;
        margin: 0px;
    }
    .mb_jcc h2 {
        color: #FFF;
        text-align: center;
        font-family: Arial;
        font-size: 24pt;
        font-weight: bold;
    }
    .event_info {
        text-align: justify;
        margin: 0% 10%;
    }
    .profile_table {
        width: 100%;
        margin: auto auto;
        text-align: center;
        border: none;
        padding: 0px;
    }
    .profile_table td {
        border: none;
        text-align: center;
        padding: 2px 0px;
        margin: 0px;
    }
    .table_heading {
        text-align: center;
        background: url("./images/jacaranda_city_challenge/bnr5.png");
        padding: 0px;
        width: 100%;
    }
    .jcc_img:hover {
        opacity: 0.8;
    }
    .parking {
        width: 100%;
        height: auto;
        box-shadow: 5px 10px 18px rgb(0, 0, 0);
        margin: 20px 0px;
    }
    .mb_jcc_logo {
        width: 100%;
        height: auto;
        padding: 0%;
        margin: 0%;
    }
    cRed {
        color: red;
        font-weight: bold;
    }
    cGreen {
        color: #00b050;
        font-weight: bold;
    }
    cBlue {
        color: #4472c4;
        font-weight: bold;
    }
    cOrange {
        color: #ffc000;
        font-weight: bold;
    }
    cPurple {
        color: #b94fa5;
        font-weight: bold;
    }
    blue {
        color: #0000ff;
    }
    red {
        color: #f00;
    }
    .mb_jcc ul {
        text-align: center;
        margin: 0%;
        padding: 0%;
    }
    .mb_jcc h3 {
        padding: 0%;
        margin: 0%;
        text-align: center;
        font-size: 14pt;
    }
    .mb_jcc li {
        text-align: left;
        padding: 10px;
        margin-left: 15%;
    }
    /*--------------------------------------------SPACER---------------------------------------*/
    .spacer {
        padding: 0px;
        margin: 0px;
    }
    .spacer h1 {
        transition: 2s;
        animation: yourAnimation 2s forwards 0s ease;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        text-transform: uppercase;
        text-align: center;
        background: rgba(255, 0, 0, 0.8);
        box-shadow: inset 0 25px rgba(255, 255, 255, 0.1), inset 0 -7px 15px rgba(0, 0, 0, 0.8), 0 3px 5px rgba(0, 0, 0, 0.8);
        border-radius: 10px;
        font-size: 12pt;
        color: rgba(255, 255, 255);
        font-weight: bold;
        z-index: -1;
    }
    @keyframes yourAnimation {
        0% {
            transform: translateY(-100px);
            opacity: 0;
        }
        100% {
            transform: translateY(0px);
            opacity: 1;
        }
    }
    @keyframes g-back {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    .content {
        padding: 0%;
        margin: 0%;
        text-align: center;
    }
    .content h1,
    h2,
    h3 {
        font-size: 12pt;
        padding: 10px 0px;
    }
    .clubGrid .content p {
        padding: 20px;
        font-size: 10pt;
    }
    .clubGrid .content img {
        width: 100%;
        height: auto;
    }
    #runawaysport_img {
        min-width: 90%;
        height: auto;
        border-radius: 0px;
        border: 0px;
        box-shadow: none;
    }
    #comrades_img {
        min-width: 90%;
        height: auto;
        border-radius: 0px;
        border: 0px;
        box-shadow: none;
    }
    .clubGrid .content center {
        font-size: 10pt;
    }
    .clubGrid .content ul {
        text-align: left;
    }
    .clubGrid .content li {
        margin-left: 0px;
        font-size: 10pt;
    }
    .clubGrid .content a {
        font-size: 12pt;
        text-decoration: none;
        color: #a21e1e;
    }
    .clubGrid .content a:hover {
        color: #ddd;
    }
    .mb_events {
        padding: 0%;
        margin: 0%;
    }
    /*--------------------------------------------NEWSLETTERS---------------------------------------*/
    .mb_newsletters {
        grid-area: newsletters;
        text-align: left;
        padding-left: 0%;
        padding-right: 0%;
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 10pt;
    }
    .docSec {
        border: 1px solid rgb(184, 184, 184);
        padding: 5px;
        margin: 5px;
        border-radius: 10px;
    }
    .mb_newsletters h2 {
        color: #0B0B61;
        font-family: 'Just Another Hand', cursive;
        font-size: 36pt;
        margin-left: 5px;
        margin-bottom: 0;
        margin-top: 0;
        padding-top: 0;
    }
    .mb_newsletters a {
        color: blue;
        padding-left: 20px;
        font-size: 10pt;
        font-weight: 0;
        text-decoration: none;
    }
    .mb_newsletters a:hover {
        color: #1f1f1f;
        font-weight: bold;
    }
    .mb_newsletters fieldset legend {
        font-size: 28pt;
        font-family: 'Just Another Hand', cursive;
        color: #DF0101;
    }
    .mb_newsletters {
        background: #fff;
    }
    /*--------------------------------------------GALLERY--------------------------------------*/
    .gallery {
        background: #fff;
    }
    .gallery img {
        width: 100%;
        height: auto;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
    }
    .gallery video {
        margin: 10px;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
    }
    .gallery h2 {
        font-family: 'Just Another Hand';
        color: #0B0B61;
        font-size: 28pt;
    }
    .gallery h3 {
        font-family: 'Just Another Hand';
        font-size: 24pt;
        font-weight: normal;
        color: #DF0101;
        padding-right: 10%;
        text-align: center;
        padding-left: 10%;
    }
    /*--------------------------------------------MEMBERSHIP-----------------------------------*/
    #fees {
        text-align: center;
        box-shadow: 5px 10px 18px rgb(110, 110, 110), inset 0 200px rgba(255, 255, 255, 0.1), inset 0 -60px 120px rgba(200, 200, 200, 0.8), 0 30px 40px rgba(200, 200, 200, 0.8);
        border-radius: 10px;
        margin: 0%;
        width: 100%;
    }
    #fees th,
    td {
        text-align: left;
        padding: 20px;
        border-bottom: 1px solid rgba(136, 136, 136, 0.582);
    }
    #regimg {
        border: none;
        box-shadow: none;
        margin-left: 25%;
        margin-right: 25%;
    }
    #regimg {
        min-width: 90%;
        height: auto;
        border-radius: 0px;
        border: 0px;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }
    .membership_h2 {
        font-size: 14pt;
        color: #DF0101;
        font-weight: normal;
        padding: 20px;
    }
    /*--------------------------------------------CONTACT--------------------------------------*/
    .contacts {
        background: #fff;
        padding-bottom: 50px;
    }
    .contacts img {
        width: 45px;
        height: 45px;
        box-shadow: 5px 10px 18px rgb(110, 110, 110);
        border-radius: 50%;
        border: 5px double rgb(160, 160, 160);
    }
    .contacts table {
        width: 100%;
        text-align: left;
        padding: 0px;
        text-align: center;
        box-shadow: none;
        border-radius: 10px;
        margin-bottom: 50px;
    }
    .contacts h2 {
        font-family: 'Just Another Hand';
        color: #0B0B61;
        font-size: 28pt;
        text-align: center;
    }
    .contacts a {
        text-decoration: none;
        color: #9c9c9c;
        font-weight: normal;
        padding-bottom: 10px;
    }
    .contacts a:hover {
        text-decoration: none;
        color: #FF0000;
        text-shadow: 2px 2px 4px #FF0000;
    }
    .contacts td,
    th {
        font-size: 10pt;
        text-align: left;
        padding: 20px;
        border-bottom: 1px solid rgba(136, 136, 136, 0.582);
    }
    .contacts tr:nth-child(odd) {
        background: rgb(230, 230, 230);
    }
    .contacts tr:nth-child(even) {
        background: rgb(241, 241, 241);
    }
}