/*#event-pricing-table h2 {
    font-family: "DM Sans", Sans-serif;
    font-size: 32px;
    line-height: 44px;
    font-weight: 500;
    color: #1D1F20;
    margin: 0 0 5px 0;
}*/

#event-pricing-table table {
    margin: 0 0 15px 0;
}

#event-pricing-table th, #event-pricing-table td {
    font-family: "DM Sans", Sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #1D1F20;
}

#event-pricing-table th {
    font-weight: 600;
}

#event-pricing-table td {
    text-align: left!important;
}

/*
        Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
        */
@media
    only screen
        and (max-width: 760px), (min-device-width: 768px)
        and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        #event-pricing-table table, #event-pricing-table thead, #event-pricing-table tbody, #event-pricing-table th, #event-pricing-table td, #event-pricing-table tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        #event-pricing-table thead tr {
            /*position: absolute;
            top: -9999px;
            left: -9999px;*/
            display: none;
        }

        #event-pricing-table tr {
            /*margin: 0 0 1rem 0;*/
            margin: 0 0 15px 0;
        }

        #event-pricing-table tr:nth-child(odd) {
            background: #ECEFF1;
        }

        #event-pricing-table td {
            /* Behave  like a "row" */
            border: none;
            /*border-bottom: 1px solid #eee;*/
            border-bottom: 1px solid #B1BEC7;
            position: relative;
            /*padding-left: 50%;*/
            /*padding-left: 35%;*/
            padding: 5px;
        }

        #event-pricing-table td:before {
            /* Now like a table header */
            /*position: absolute;*/
            /* Top/left values mimic padding */
            /*top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;*/
        }

        /*
        Label the data
        You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
        */
        /*td:nth-of-type(1):before { content: "Ticket Type: "; }
        td:nth-of-type(2):before { content: "Price: "; }
        td:nth-of-type(3):before { content: "Includes: "; }*/

        #event-pricing-table .td-header {
            display: inline-block;
            /*width: 25%;*/
            width: 35%;
            max-width: 100px;
        }
}

@media only screen and (min-width : 761px) {
        #event-pricing-table .td-header {
            display: none;
        }
        #event-pricing-table table {
            width: 100%;
        }
        #event-pricing-table table, #event-pricing-table th, #event-pricing-table td {
            border: 1px solid #1D1F20;
        }
        #event-pricing-table th {
            text-align: left;
        }
        #event-pricing-table th, #event-pricing-table td {
            padding: 5px;
        }
        #event-pricing-table td:nth-of-type(1) { width:25%; }
        #event-pricing-table td:nth-of-type(2) { width:10%; }
        #event-pricing-table td:nth-of-type(3) { width:65%; }
}

@media only screen and (min-width : 1025px) {
        /*#event-pricing-table h2 {
            font-size: 48px;
            line-height: 60px;
        }*/
        #event-pricing-table th, #event-pricing-table td {
            font-size: 20px;
            line-height: 30px;
        }
}