#main-container *, #main-container *:before, #main-container *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.m0,
p.m0,
p.franklin.m0 {
    margin-top: 0;
    margin-bottom: 0;
}
.p0,
p.p0,
p.franklin.p0 {
    padding-top: 0;
    padding-bottom: 0;
}
.no-wrap {
    white-space: nowrap;
}
.screen-small,
.country-name.abbrev {
    display: none;
}
p.body {
    font-family: Georgia,serif;
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 3px 0 10px;
}
p.kicker {
    font-size: 1.1em;
    color: #1F78B4;
}
h1.title {
    margin-bottom: 10px;
    font-size: 5.4em;
}
p#byline {
    font-size: 1.1em;
}
.quote {
    text-align: center;
    font-size: 2.3em;
    font-style: italic;
    margin: 26px auto 6px;
    width: 100%;
    max-width: 650px;
}
.quoter {
    text-align: right;
    font-size: 1.5em;
    line-height: 1.3em;
    width: 100%;
    max-width: 780px;
    margin: 0 auto 14px;
}
.intro {
    max-width: 670px;
    margin: 0 auto 10px;
}
#heatmap,
#heatmap-transpose {
    width: 100%;
}
#heatmap thead tr,
#heatmap-transpose thead tr {
    background-color: transparent;
    border-bottom: none;
}
#heatmap thead td,
#heatmap-transpose thead td {
    padding-bottom: 3px;
}
#heatmap tbody td,
#heatmap-transpose tbody td {
    padding: 8px 10px;
    border: 1px solid #fff;
}
#heatmap tbody td {
    width: 10%;
}
#heatmap-transpose tbody td {
    width: 16.666666%;
}
#heatmap tbody td.team-cell,
#heatmap-transpose tbody td.team-cell {
    cursor: pointer;
    color: #000;
}
#heatmap tbody td.team-cell:hover p,
#heatmap-transpose tbody td.team-cell:hover p {
    color: #666;
}
#heatmap tbody td.team-cell.q-4:hover p,
#heatmap-transpose tbody td.team-cell.q-4:hover p {
    color: #fff;
}
#heatmap td.table-label,
#heatmap-transpose td.table-label {
    border: none;
    text-align: right;
}
#heatmap-transpose thead td.table-label {
    text-align: center;    
}
#heatmap td.table-label,
#heatmap-transpose td.table-label,
#heatmap thead,
#heatmap-transpose thead {
    font-size: 0.8em;
    line-height: 1.2em;
}
#heatmap .travel-unit,
#heatmap-transpose .travel-unit {
    display: none;
}
#heatmap tbody tr td.team-cell.group-A .travel-unit,
#heatmap-transpose tbody tr td.team-cell.group-A .travel-unit {
    display: inline;
}

#heatmap tbody tr td.q-0,
#heatmap-transpose tbody tr td.q-0 {
    background-color: #eee;
}
#heatmap tbody tr td.q-1,
#heatmap-transpose tbody tr td.q-1 {
    background-color: #edf8e9;
}
#heatmap tbody tr td.q-2,
#heatmap-transpose tbody tr td.q-2 {
    background-color: #bae4b3;
}
#heatmap tbody tr td.q-3,
#heatmap-transpose tbody tr td.q-3 {
    background-color: #74c476
}
#heatmap tbody tr td.q-4,
#heatmap-transpose tbody tr td.q-4 {
    background-color: #238b45;
    color: #eee;
}
.group {
    clear: both;
    border-bottom: 1px solid #ccc;
}
.group:last-child {
    border-bottom: none;
}
.team-wrapper {
    float: left;
    width: 25%;
}
.team {
    width: 100%;
    margin: 0 auto;
}
.team.highlight {
    -webkit-animation: flash 1s ease-in-out; /* Chrome, Safari, Opera */
    animation: flash 1s ease-in-out;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes flash {
    0%   {background: white;}
    50%  {background: #F7F5EF;}
    100% {background: white;}
}

/* Standard syntax */
@keyframes flash {
    0%   {background: white;}
    50%  {background: #F7F5EF;}
    100% {background: white;}
}
.team .title {
    text-align: center;
}
.team .map svg {
    display: block;
    margin: 0 auto;
}
.team .map .country {
    fill: #ccc;
    stroke: none;
}
.team .map .stadium {
    stroke: none;
    stroke: #333;
}
.team .map .stadium-1 {
    fill: #a6cee3;
}
.team .map .stadium-2 {
    fill: #1f78b4;
}
.team .map .stadium-3 {
    fill: #bae4b3;
}
.team .map .path {
    fill: none;
    stroke: #333;
    stroke-dasharray: 5 5;
}
.team .match {
    min-height: 68px;
}
.team .sidebar {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}
.team .one-col {
    width: 38%;
    float: left;
}
.team .three-col {
    width: 62%;
    float: left;
}
.team .half-col {
    width: 50%;
    float: left;
}
.team .distance {
    margin-top: 20%;
}
.team .distance p {
    line-height: 1.2em;
}
.team .map-label {
    fill: #444;
    font-size: 0.9em;
}
.team .border-left-dotted {
    border-left: 1px dashed #666;
    left: -4px;
    top: 10px;
    bottom: -5px;
}
.team .circle {
    width: 13px;
    height: 13px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #333;
    background-color: #eee;
    position: absolute;
    top: 5px;
    left: -10px;
}
.team .circle-1 {
    background-color: #a6cee3;
}
.team .circle-2 {
    background-color: #1f78b4;
}
.team .circle-3 {
    background-color: #bae4b3;
}
.team p.credit {
    font-size: 11px;
}
.credit {
    clear: both;
}
@media (max-width: 1200px){
    #heatmap tbody tr td.team-cell.group-A .travel-unit,
    #heatmap-transpose tbody tr td.team-cell.group-A .travel-unit {
        display: none;
    }
}
@media (max-width: 979px){
    .screen-big {
        display: none !important;
    }
    .screen-small {
        display: block;
    }
    #heatmap-transpose {
        width: 80%;
        margin: 0 auto;
        max-width: 600px;
    }
    .team-wrapper {
        width: 50%;
    }
}
@media (max-width: 767px){
    #heatmap-transpose {
        width: 100%;
    }
}
@media (max-width: 550px){
    .team-wrapper {
        width: 100%;
    }
}
@media (max-width: 465px){
    .country-name.long {
        display: none;
    }
    .country-name.abbrev {
        display: block;
    }
}
@media (max-width: 405px){
    h1.title {
        font-size: 4.5em;
        line-height: 1em;
    }
}

@media (max-width: 350px){
    #heatmap-transpose p {
        font-size: 0.9em;
        line-height: 1.2em;
    }
}