* {
        box-sizing: border-box;
    }

    html,
    body {
        background-color: $222;
        margin: 0;
        height: 100%;
    }

    html {
        background: url(../img/hands.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    body {
        font: 16px "Lato", sans-serif;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    .caption {
        width: 100%;
        text-align: center;
        color: #000;
        margin-top: 4em;
    }
    .caption span{
		line-height: 1.5em;
	}
	
    .caption span.border {
        background-color: #111;
        color: #fff;
        padding: 18px;
        font-size: 20px;
        letter-spacing: 10px;
    }

    h1 {
        font: 40px "Lato", sans-serif;
        text-align: center;
        text-transform: uppercase;
        padding: .5em;
        color: #fff;
    }

    h3 {
        letter-spacing: 5px;
        text-transform: uppercase;
        font: 20px "Lato", sans-serif;
        color: #111;
    }

    #logo {
        text-align: center;
        margin: 1.5em 1em;
    }

    #logo img {
        max-width: 50%;
        height: auto;
    }

    table a {
        color: #3366ff;
    }

    table {
        background: #fff;
        border-spacing: 0;
        width: 100%;
        border: 0 solid #ddd;
        margin-top: 1em;
    }

    th {
        cursor: pointer;
    }

    th {
        text-align: left;
        padding: 10px;
        border: solid 1px #777;
    }
    td {
        text-align: left;
        padding: 10px;
        border: solid 1px #efefef;
    }

    /* tr:nth-child(even) { */
    /* background-color: #fff; */
    /* } */

    .disappear {
        display: none;
    }

    .list {
        font-family: sans-serif;
    }

    input {
        width: 275px;
        border: solid 1px #ccc;
        border-radius: 5px;
        padding: 7px 14px;
        margin-bottom: 10px
    }

    input:focus {
        outline: none;
        border-color: #aaa;
    }

    .sort {
        font: 16px "Lato", sans-serif;
        font-weight: bold;
        border: none;
        color: #fff;
        text-decoration: none;
        background-color: #083f69;

    }

    .sort:hover {
        text-decoration: none;
    }

    .sort:focus {
        outline: none;
    }

    .sort.asc:after {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #999;
        content: "";
        position: relative;
        top: 4px;
        right: -5px;
    }

    .sort.desc:after {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #999;
        content: "";
        position: relative;
        top: -4px;
        right: -5px;
    }

    #content {
        width: 90%;
        margin: auto;
    }

    .tableHeader {
        color: #fff;
        background-color: #083f69;
        padding: 0;
        font-weight: bold;
    }

    button {
        font-weight: bold;
        background-color: #fff;
        font: 16px "Lato", sans-serif;
        padding: .3em;
        margin: .3em;
        border-radius: 12px;
    }

    .buttonHeader {
        color: #fff;
        margin-left: 6px;
        font: 1.2em "Lato", sans-serif;
        font-weight: bold;
    }

    .buttonRed {
        color: #fff;
        font-weight: bold;
        background-color: #882222;
        border: solid 1px #fff;
        border-radius: 8px;
    }

    ul {
        float: left;
        margin-right: .5em;
        margin-bottom: 2em;

    }

    ul li {
        list-style-type: none;
        margin-bottom: .4em;
    }

    .filterLists {
        display: block;
        text-align: left;
        padding: .5em;
    }

    #filterTitle {
        font: 1.5em "Lato", sans-serif;
        width: 100%;
        padding: 1em;
        text-align: center;
        color: #fff;
    }
		
	#note {
		width: 100%;
		font: 16px "Lato", sans-serif;
		margin: 0 auto;
		text-align: center;
		padding: .5em 0 0 0;
		color: #999;
	}
	
	#affiliate {
		width: 90%;
		font: 16px "Lato", sans-serif;
		margin: 0 auto;
		text-align: center;
		padding-bottom: 3em;
		color: #888;
	}
		
    #myTable {
        clear: both;
    }

    section[data-filter="on"] tr:not(.tableHeader) {
        display: none;
    }

    section[data-filter="on"].p0to49 tr.p0to49,
    section[data-filter="on"].p50to99 tr.p50to99,
    section[data-filter="on"].p100to199 tr.p100to199,
    section[data-filter="on"].p200to299 tr.p200to299,
    section[data-filter="on"].p300to399 tr.p300to399,
    section[data-filter="on"].p400to499 tr.p400to499,
    section[data-filter="on"].p500to1000 tr.p500to1000,
    section[data-filter="on"].p1000plus tr.p1000plus,
    section[data-filter="on"].r0star tr.r0star,
    section[data-filter="on"].r1star tr.r1star,
    section[data-filter="on"].r2star tr.r2star,
    section[data-filter="on"].r3star tr.r3star,
    section[data-filter="on"].r4star tr.r4star,
    section[data-filter="on"].r5star tr.r5star,
    section[data-filter="on"].v0star tr.v0star,
    section[data-filter="on"].v1star tr.v1star,
    section[data-filter="on"].v2star tr.v2star,
    section[data-filter="on"].v3star tr.v3star,
    section[data-filter="on"].v4star tr.v4star,
    section[data-filter="on"].v5star tr.v5star,
    section[data-filter="on"].showDD tr.showDD,
    section[data-filter="on"].showBA tr.showBA,
    section[data-filter="on"].showEST tr.showEST,
    section[data-filter="on"].showPlanar tr.showPlanar,
    section[data-filter="on"].showNeutral tr.showNeutral,
    section[data-filter="on"].showNeutral-Bright tr.showNeutral-Bright,
    section[data-filter="on"].showNeutral-Bassy tr.showNeutral-Bassy,
    section[data-filter="on"].showV-Shaped tr.showV-Shaped,
    section[data-filter="on"].showBassy tr.showBassy,
    section[data-filter="on"].showBright tr.showBright,
    section[data-filter="on"].showGarbage tr.showGarbage,
    section[data-filter="on"].showHybrid tr.showHybrid {
        display: table-row;
    }

    section.p0to49 button.p0to49,
    section.p50to99 button.p50to99,
    section.p100to199 button.p100to199,
    section.p200to299 button.p200to299,
    section.p300to399 button.p300to399,
    section.p400to499 button.p400to499,
    section.p500to1000 button.p500to1000,
    section.p1000plus button.p1000plus,
    section.r0star button.r0star,
    section.r1star button.r1star,
    section.r2star button.r2star,
    section.r3star button.r3star,
    section.r4star button.r4star,
    section.r5star button.r5star,
    section.v0star button.v0star,
    section.v1star button.v1star,
    section.v2star button.v2star,
    section.v3star button.v3star,
    section.v4star button.v4star,
    section.v5star button.v5star,
    section.showDD button.showDD,
    section.showBA button.showBA,
    section.showEST button.showEST,
    section.showPlanar button.showPlanar,
    section.showNeutral button.showNeutral,
    section.showNeutral-Bright button.showNeutral-Bright,
    section.showNeutral-Bassy button.showNeutral-Bassy,
    section.showV-Shaped button.showV-Shaped,
    section.showBassy button.showBassy,
    section.showBright button.showBright,
    section.showGarbage button.showGarbage,
    section.showHybrid button.showHybrid {
        border: 2px solid #3388ff;
        background-color: #99bbff;
    }

    .menuTitle {
        display: none;
    }

    .top-nav {
        display: flex;
        height: 50px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: rgba(20, 20, 20, 0.97);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        color: #FFF;
        padding: 1em;
    }

    .menu {
        display: flex;
        flex-direction: row;
        list-style-type: none;
        width: 90%;
        margin: 0;
        padding: 0;
    }

    .menu>li {
        margin: 0 1rem;
        overflow: hidden;
    }

    .menu-button-container {
        display: none;
        height: 100%;
        width: 30px;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #menu-toggle {
        display: none;
    }

    .menu-button,
    .menu-button::before,
    .menu-button::after {
        display: block;
        background-color: #fff;
        position: absolute;
        height: 4px;
        width: 30px;
        /* transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1); */
        border-radius: 2px;
    }

    .menu-button::before {
        content: '';
        margin-top: -8px;
    }

    .menu-button::after {
        content: '';
        margin-top: 8px;
    }

    #menu-toggle:checked+.menu-button-container .menu-button::before {
        margin-top: 0;
        transform: rotate(405deg);
    }

    #menu-toggle:checked+.menu-button-container .menu-button {
        background: rgba(255, 255, 255, 0);
    }

    #menu-toggle:checked+.menu-button-container .menu-button::after {
        margin-top: 0;
        transform: rotate(-405deg);
    }

    .menu-button-container {
        display: flex;
    }

    .menu {
        position: absolute;
        top: 0;
        margin-top: 50px;
        left: 25%;
        flex-direction: column;
        width: 50%;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    #menu-toggle~.menu li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        /* transition: height 100ms cubic-bezier(0.23, 1, 0.32, 1); */
    }

    #menu-toggle:checked~.menu li {
        border: 1px dotted #111;
        height: 100%;
        padding: 0.2em;
        /* transition: height 100ms cubic-bezier(0.23, 1, 0.32, 1); */
    }

    .menu>li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        background: rgba(20, 20, 20, 0.97);
    }

    .menu>li:not(:last-child) {
        border-bottom: 1px solid #444;
    }
    .filterLists {
        text-align: center;
        padding: 1em;
    }

    .menuTitle {
        display: block;
        margin-right: 1em;
    }

    #filterTitle {
        display: none;
    }

    @media (max-width: 1000px) {
		
		.caption span{
			line-height: 2.5em;
		}

        table, thead, tbody, td, tr {
            display: block;
        }
        .hideMobile {
            display: none;
        }

        thead th {
            border: none;
        }

        tr {
            border: 8px solid #222;
        }
        td {
            border: none;
            border-bottom: 1px solid #f1f1f1;
            position: relative;
            padding: 4px 4px 4px 50px;
            margin-left: 80px;
        }
        td:before {
            position: absolute;
            border-bottom: 1px solid #f1f1f1;
            top: 0;
            left: 6px;
            width: 50px;
            font-weight: bold;
            padding: 4px 40px 4px 4px;
            white-space: nowrap;
            margin-left: -80px;
        }
        td:nth-of-type(1):before {
            content: "Name";
        }
        td:nth-of-type(2):before {
            content: "Rating";
        }
        td:nth-of-type(3):before {
            content: "Value";
        }
        td:nth-of-type(4):before {
            content: "Drivers";
        }
        td:nth-of-type(5):before {
            content: "Signature";
        }
        td:nth-of-type(6):before {
            content: "Description";
        }
        td:nth-of-type(7):before {
            content: "Source";
        }
        td:nth-of-type(8):before {
            content: "Price";
        }
        td:nth-of-type(9):before {
            content: "Purchase";
        }

        section[data-filter="on"].p0to49 tr.p0to49,
        section[data-filter="on"].p50to99 tr.p50to99,
        section[data-filter="on"].p100to199 tr.p100to199,
        section[data-filter="on"].p200to299 tr.p200to299,
        section[data-filter="on"].p300to399 tr.p300to399,
        section[data-filter="on"].p400to499 tr.p400to499,
        section[data-filter="on"].p500to1000 tr.p500to1000,
        section[data-filter="on"].p1000plus tr.p1000plus,
        section[data-filter="on"].r0star tr.r0star,
        section[data-filter="on"].r1star tr.r1star,
        section[data-filter="on"].r2star tr.r2star,
        section[data-filter="on"].r3star tr.r3star,
        section[data-filter="on"].r4star tr.r4star,
        section[data-filter="on"].r5star tr.r5star,
        section[data-filter="on"].v0star tr.v0star,
        section[data-filter="on"].v1star tr.v1star,
        section[data-filter="on"].v2star tr.v2star,
        section[data-filter="on"].v3star tr.v3star,
        section[data-filter="on"].v4star tr.v4star,
        section[data-filter="on"].v5star tr.v5star,
        section[data-filter="on"].showDD tr.showDD,
        section[data-filter="on"].showBA tr.showBA,
        section[data-filter="on"].showEST tr.showEST,
        section[data-filter="on"].showPlanar tr.showPlanar,
        section[data-filter="on"].showNeutral tr.showNeutral,
        section[data-filter="on"].showNeutral-Bright tr.showNeutral-Bright,
        section[data-filter="on"].showNeutral-Bassy tr.showNeutral-Bassy,
        section[data-filter="on"].showV-Shaped tr.showV-Shaped,
        section[data-filter="on"].showBassy tr.showBassy,
        section[data-filter="on"].showBright tr.showBright,
        section[data-filter="on"].showGarbage tr.showGarbage,
        section[data-filter="on"].showHybrid tr.showHybrid {
            display: block;
        }

        #search {
            width: 100%;
            font: 16px "Lato", sans-serif;
            display: inline-block;
            margin: 0 auto;
            text-align: center;
        }
		
        .menu {
            position: absolute;
            top: 0;
            margin-top: 50px;
            left: 0;
            flex-direction: column;
            width: 100%;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

    }