h1 {
   font-family: brandon-grotesque, sans-serif;
   font-weight: inherit;
   font-style: inherit;
 }

 h2 {
   font-family: brandon-grotesque, sans-serif;
   font-weight: inherit;
   font-style: inherit;
 }

 h3 {
   font-family: brandon-grotesque, sans-serif;
   font-weight: inherit;
   font-style: inherit;
 }

 h4 {
   font-family: brandon-grotesque, sans-serif;
   font-weight: inherit;
   font-style: inherit;
 }

 h5 {
   font-family: brandon-grotesque, sans-serif;
   font-weight: in;
   font-style: inherit;
 }

 p {
   font-family: brandon-grotesque, sans-serif;
   font-weight: inherit;
   font-style: inherit;
 }

 a {
   text-decoration: inherit;
   color: black;
 }

 .center {
   display: center;
   margin-left: auto;
   margin-right: center;
   box-align: center;
 }

 text {
   font-family: brandon-grotesque, sans-serif;
   font-weight: 500;
 }

 .axis path, .axis line {
   fill: none;
   stroke: black;
 }

 .x.axis path {
   display: ruby-base-container;
 }

 .y.axis path {
   stroke: black;
 }

 .line {
   fill: none;
   stroke-width: 3px;
   stroke-linecap: round;
 }

 .rect {
   fill: inherit;
   stroke-width: 1;
 }

 .header {
   margin-top: 60px;
   text-align: inherit;
   font-family: brandon-grotesque, sans-serif;
   font-weight: inherit;
 }

 .dotButtons {
   font-family: brandon-grotesque, sans-serif;
   font-weight: 500;
 }

 .selectbox {
   font-family: brandon-grotesque, sans-serif;
   font-weight: 700;
   font-size: 2vw;
   text-align: center;
   padding: 10%;
 }

 @font-face {
   font-family: "sf-mono";
   font-weight: 500;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SFMono-Regular.otf);
 }

 @font-face {
   font-display: fallback;
   font-family: "fs-industrie";
   font-style: regular;
   src: url("//sports.cbsimg.net/fonts/fs-industrie/variable/narrow/FSIndustrieVFNw.woff2") format("woff2");
   font-weight: 100 900
 }

 @font-face {
   font-family: "decima-mono";
   font-weight: 500;
   font-style: normal;
   src: url(https://jhkforecasts.com/decimamonopro-webfont.woff2);
 }

 @font-face {
   font-family: "sf-mono";
   font-weight: 100;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SFMono-Light.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 200;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-Light.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 200;
   font-style: italic;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-LightItalic.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 400;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-Regular.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 400;
   font-style: italic;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-RegularItalic.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 500;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-Medium.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 500;
   font-style: italic;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-MediumItalic.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 600;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-Semibold.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 600;
   font-style: italic;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-SemiboldItalic.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 700;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-Bold.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 700;
   font-style: italic;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-BoldItalic.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 800;
   font-style: normal;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-Heavy.otf);
 }

 @font-face {
   font-family: "sf-compact";
   font-weight: 800;
   font-style: italic;
   src: url(https://jhkforecasts.com/fonts/SF-Compact-Display-HeavyItalic.otf);
 }

 input {
   margin-right: 10px;
   font-family: brandon-grotesque, sans-serif;
   font-weight: 500;
   font-size: 10;
 }

 .form-check-label {
   font-size: 0.8em;
   margin-right: 20px;
 }

 .radio-toolbar {
   margin: 10px;
 }

 .radio-toolbar input[type="radio"] {
   opacity: 0;
   position: fixed;
   width: 0;
 }

 .radio-toolbar label {
   border: none;
   color: black;
   padding: 10px 10px;
   font-size: 16px;
   font-family: brandon-grotesque;
   border-radius: 10px;
   cursor: pointer;
   ;
 }

 .radio-toolbar label:hover {
   background-color: #ddd;
 }

 .radio-toolbar input[type="radio"]:checked+label {
   background-color: #e7e7e7;
   stroke: rgb(0, 0, 0);
   stroke-width: 1px;
 }

 .d3-tip {
   line-height: 1;
   font-family: brandon-grotesque, sans-serif;
   padding: 0px;
   background: none;
   border-radius: 8px;
   border-color: black;
   border-width: 1px;
   border: black;
   font-size: 12px;
   stroke-width: 2px;
 }

 @media only screen and (max-width:650px) {
   #bigmenu {
     display: none;
   }
   #smallmenu {
     display: block;
   }
   #winbuttonphone {
     display: block;
   }
   #votebuttonphone {
     display: block;
   }
   #winbutton {
     display: none;
   }
   #votebutton {
     display: none;
   }
   .computer {
     display: none;
   }
   .phone {
     display: block;
   }
   .special {
     display: block;
   }
   .tableFont {
     font-size: 2.5vw;
   }
   #computerBanner {
     display: none;
   }
   #phoneBanner {
     display: block;
   }
 }

 @media only screen and (min-width:651px) {
   #bigmenu {
     display: block;
   }
   #smallmenu {
     display: none;
   }
   .computer {
     margin-left: 7.5%;
     width: 80%;
     display: block;
   }
   .special {
     margin-left: 7.5%;
     width: 85%
   }
   .phone {
     display: none;
   }
   #winbuttonphone {
     display: none;
   }
   #votebuttonphone {
     display: none;
   }
   #winbutton {
     display: block;
   }
   #votebutton {
     display: block;
   }
   .tableFont {
     font-size: 1.5vw;
   }
   #computerBanner {
    display: flex;
   }
   #phoneBanner {
     display: none;
   }
 }

 div.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   background-color: white;
 }

 .overlay {
   fill: none;
   pointer-events: all;
 }

 .statesover {
   fill: none;
   pointer-events: all;
 }

 .btn {
   border: none;
   color: white;
   padding: 10px 10px;
   font-size: 2vw;
   font-family: sf-mono;
   border-radius: 10px;
   cursor: pointer;
   text-transform: uppercase;
   color: black;
   width: 95%;
 }

 .default {
   background-color: #e7e7e7;
 }

 .default:hover {
   background: #ddd;
 }

 .other {
   color: black;
   font-size: 2vw;
 }

 .hovertext {
   text-decoration: underline;
 }

 .selectbox {
   font-family: sf-mono;
   font-weight: 100;
   font-size: 2vw;
   text-align: center;
   text-transform: uppercase;
 }

 hr {
   height: 1px;
   background-color: black;
   border: none;
 }

 div.banner {
   top: 0;
   background-color: white;
   border-bottom: black solid 1px;
   margin-left: -8px;
   margin-right: -8px;
 }

 div.sticky {
   top: 0;
   background-color: white;
   border-bottom: black solid 1px;
   margin-left: -8px;
   margin-right: -8px;
   position: sticky
 }

 .computer {
   width: 85%;
   margin-left: 7.5%;
 }

 .ads {
   width: 80%;
   margin-left: 10%;
   margin: 10px, 10px;
 }

 text {
   font-family: sf-mono;
   text-transform: uppercase;
   font-size: 100;
 }

 /* Add a black background color to the top navigation */

 .topnav {
   overflow: hidden;
   height: 7vw;
   width: 100%;
   margin: auto;
   border-bottom: black solid 1px;
 }

 /* Style the links inside the navigation bar */

 .topnav h1 {
   float: right;
   color: black;
   text-align: center;
   padding: 1vw 16px;
   text-decoration: none;
   font-size: 1.5vw;
   font-family: sf-mono;
   vertical-align: middle;
 }

 /* Change the color of links on hover */

 .topnav a:hover {
   background-color: #ddd;
   color: black;
 }

 .topnav h1:hover {
   background-color: #ddd;
   color: black;
 }

 /* Add a color to the active/current link */

 .topnav a.active {
   background-color: #4CAF50;
   color: white;
 }

 .pollth {
   border-bottom: black solid 1px;
   padding: 5px;
 }

 .pollTable {
   width: 100%;
   border-collapse: collapse;
   font-family: sf-mono;
   font-weight: 100;
   text-transform: uppercase;
 }

 .polltd {
   padding: 5px;
 }

 .button {
   background-color: white;
   font-size: 16px;
   font-family: sf-mono;
   font-weight: 100;
   text-transform: uppercase;
   border: none;
   padding: 5px;
   vertical-align: middle;
 }