.header img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-right: 1rem;
}


.header {
    margin-bottom: 1rem;
}

.result {
    color: Red;
}
.win {
    color: Green;
}

td {
    font-size: 0.6rem;
    padding: 0.15rem 0.25rem;
}

tr.win td {
    background-color: lightgreen;
    color: #000;
}
tr.loss td {
    background-color: #fcc;
    color: #000;
}

.hero thead td {
    font-size: 1.2rem;
    padding: 0.25rem 0.7rem;
}
.hero tbody td {
    font-size: 1.1rem;
    padding: 0.25rem 0.75rem;
}

input:not([type=checkbox],[type=radio],[type=range],[type=file]), select, textarea {
    padding: 0.25rem 0.5rem;
    height: 2.5rem;
}
input:not([type=checkbox],[type=radio],[type=range]) {
    height: 2.5rem;
}
[type=checkbox], [type=radio] {
    width: 1.1em;
    height: 1.1em;
}

ul li ul {
    margin-bottom: 0;
}

.sizes {
    display: none;
    font-size: 0.7rem;
}

.sizes.hidden {
    display: none;
}
.sizes input {
    font-size: 0.6rem;
}

.expandSizes {
    display: block;
    padding-bottom: 1rem;
}

.padbtm {
    margin-bottom: 1rem;
}

.hidden {
    display:none;
}
.show {
    display: block;
}
.sparkline {
    fill: none;
  }
  

.sparkline--blue { stroke: #2060df; }
.sparkline--blue.sparkline--filled { fill: rgba( #2060df, .3); }


.how {
    margin-bottom: 1rem;
}

.howcard {
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.padtop {
    margin-top: 1rem;
}

.disclaimer {
    font-size: 0.7rem;
    margin-top: 1rem;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


@media screen and (min-width: 768px) {
    .sizes {
        display: block;
    }
    .expandSizes {
        display: none;
    }


    .header img {
        float: left;
        width: 100%;
        max-width: 200px;
        height: auto;
        margin-right: 1rem;
    }
    
    .header h1 {
        position: relative;
        margin-top: 1rem;
    }
}