/* #region MAIN & CONTENT AREA STYLES */
#main
{
    background-color: #cfcfcf;
    background-size: cover;
    position: relative;
}
    /* color overlay */
    #main:before
    {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(255,255,255,0.85);
    }

    /* remove header spacing */
    #main h1, #main h2
    {
        margin-bottom: 5px !important;
        padding-bottom: 0 !important;
    }

    #main h5
    {
        margin-bottom: 5px !important;
        padding-bottom: 0 !important;
        font-weight:normal;
    }

    #main .header a
    {
        display:inline-block;
        background-color: #00d9d9;
        color:white !important;
        padding:10px;
        font-size:26px;
        margin:10px 0px;
    }

        #main .header a:hover
        {
            background-color: #00aaaa;
        }

.content
{
    position: relative;
    z-index: 1000;
}
 /* #endregion */

/* #region BACKGROUNDS */
.about, .mission
{
    background: url('../img/mission.jpg') 0 0 no-repeat;
    background-position: 50% 75%;
}
.standards, .email
{
    background: url('../img/men.jpg') 0 0 no-repeat;
    background-position: 50% 70%;
}
/* #endregion */

/* #region ABOUT PAGE */
.about p
{
    font-size:18px;
}
.about .big-button
{
    display:inline-block;
    padding:10px 25px;
}
/* #endregion */

/* #region EMERGING ELITE PAGE */
/* buttons */
.big-button
{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00d9d9;
    color: white !important;
    padding: 10px;
    font-size: 26px;
    margin: 10px 0px;
    text-align: center;
}

    /* button hover */
    .big-button:hover
    {
        background-color: #00aaaa;
    }

/* align text to center, remove header spacing */
.mission h1
{
    text-align: center;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
}

.mission h3
{
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
}

.mission section
{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
}

#homelight
{
    text-align:center;
}

#homelight img
{
    width:250px;
}
/* #endregion*/

/* #region MENS / WOMENS PAGES */
#men-grid, #women-grid
{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
}

    #men-grid section, #women-grid section
    {
        background-color: white;
        padding: 20px;
        overflow: hidden;
    }

        #men-grid section header, #women-grid section header
        {
            font-size: 26px;
            font-family: "Raleway", Helvetica, sans-serif;
        }

        #men-grid section img, #women-grid section img
        {
            width: 100%;
            height: 250px;
            object-fit: cover;
            object-position: 50% 20%;
            margin-bottom: 10px;
        }

        #men-grid section main, #women-grid section main
        {
            font-size: 18px;
            font-family: "Raleway", Helvetica, sans-serif;
        }

            /* first line is bigger and bold*/
            #men-grid section main span, #women-grid section main span
            {
                font-size: 22px;
                font-weight: bold;
            }

            /* new line is automatically added after each bold "<b>" tag */
            #men-grid section main b::before, #women-grid section main b::before
            {
                white-space: pre;
            }

/* record links */
.record:not(:link)
{
    cursor:default;
    color: black !important;
}
.record:link, .record:visited
{
    cursor:pointer;
    color:#00b0b0 !important;
}
.record:link:hover
{
    color:#007c7c !important;
}

/* error tag */
#error 
{
    z-index: 1000;
    position: relative;
    display: none;
}

/* button */
.athlete .big-button
{
    display:inline-block;
}

/* #endregion */

/* #region STANDARDS PAGE */
/* standards table columns  */
.standards section
{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
}
.standards table
{
    font-size: 18px;
    table-layout: fixed;
    border-collapse: separate;
    background-color:white;
}

/* header rows */
.standards article:not(#equipment) th:first-child
{
    background-color: #00bebe;
}

.standards th
{
    background-color: #00d9d9;
    border-left: 1px solid #00bebe;
    color: white;
}


/* alternating colors */
.standards article:not(#equipment) tr:nth-child(odd) td:first-child
{
    background-color: #e2e2e2;
    border-left: none;
}
.standards article:not(#equipment) tr:nth-child(even) td:first-child
{
    background-color: #f1f1f1;
    border-left: none;
}

/* data rows */
td
{
    text-indent: 3px;
    border-left: 1px solid #e8e6e6;
}

/* border fix */
.standards article:not(#equipment) td:nth-of-type(2), .standards article:not(#equipment) th:nth-of-type(2)
{
    border-left: none !important;
}

/* equipment table columns  */
#equipment
{
    grid-column: 1/3;
}

    #equipment tr th:first-child, #equipment tr td:first-child
    {
        border-left: none;
    }

/* #endregion */

/* #region EMAIL PAGE (testing) */
.email .form-item
{
    display:inline-block;
}
.email .content span, .email .content div
{
    font-family: "Raleway", Helvetica, sans-serif;
    font-size: 20px;
}
.email input
{
    margin-bottom:15px;
    margin-right:15px;
    width:400px;
}
.email textarea
{
    background-color:white;
    max-width:800px;
    margin-bottom:15px;
}
.email .big-button
{
    display: inline-block;
    padding: 10px 40px;
}
/* #endregion */

/* #region OTHER CLASSES */
/* qualify link */
.qualify
{
    font-size: 20px;
    margin-top: 20px;
    position: relative;
    z-index: 1000;
    text-align: center;
}
/* #endregion */

/* #region MEDIA TAGS */
@media screen and (max-width: 1200px)
{
    #men-grid, #women-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 1050px)
{
    .standards section
    {
        grid-template-columns: repeat(1, 1fr);
    }

    #equipment
    {
        grid-column: 1/2;
    }
}
@media screen and (max-width: 1000px)
{
    .mission section
    {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0px;
    }
}
    @media screen and (max-width: 900px)
{
    #men-grid, #women-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 700px)
{
    #men-grid, #women-grid
    {
        grid-template-columns: repeat(1, 1fr);
    }

    #men-grid img, #women-grid img
    {
        height:auto !important;
    }

    .athlete .big-button, .email .big-button, .about .big-button
    {
        display: block;
    }

    .email form span, .email form input
    {
        display:block;
        width:100%;
    }
}
/* #endregion */