@font-face {
    font-family: "Benton-Sans";
    src: url("../libraries/font/benton.eot");
    src: url("../libraries/font/benton.eot")
        format("embedded-opentype"),
      url("../libraries/font/benton.woff")
        format("woff"),
      url("../libraries/font/benton.ttf")
        format("truetype");
    font-style: normal;
    font-weight: 900;
  }
  
  @font-face {
    font-family: "Benton-Sans-Book";
    src: url("../libraries/font/bentonsans-book.eot");
    src: url("../libraries/font/bentonsans-book.eot")
        format("embedded-opentype"),
      url("../libraries/font/bentonsans-book.woff")
        format("woff"),
      url("../libraries/font/bentonsans-book.ttf")
        format("truetype");
    font-style: normal;
  }
  
  @font-face {
    font-family: "Benton-Medium";
    src: url("/libraries/font/benton-medium.eot");
    src: url("/libraries/font/benton-medium.eot")
        format("embedded-opentype"),
      url("/libraries/font/benton-medium.woff")
        format("woff"),
      url("/libraries/font/benton-medium.ttf")
        format("truetype");
    font-style: normal;
    font-weight: 900;
  }
  
  @font-face {
    font-family: "Benton-Cond-Black";
    src: url("https://../libraries/font/benton-cond-black.eot");
    src: url("../libraries/font/benton-cond-black.eot")
        format("embedded-opentype"),
      url("../libraries/font/benton-cond-black.woff")
        format("woff"),
      url("../libraries/font/benton-cond-black.ttf")
        format("truetype");
    font-style: normal;
    font-weight: 900;
  }
  
  @font-face {
    font-family: "Benton-Regular";
    src: url("../libraries/font/benton-regular.eot");
    src: url("../libraries/font/benton-regular.eot")
        format("embedded-opentype"),
      url("../libraries/font/benton-regular.woff")
        format("woff"),
      url("../libraries/font/benton-regular.ttf")
        format("truetype");
    font-style: normal;
    font-weight: 900;
  }
  
  h1, h2, h3, h4, h5, h6, body {
    font-family: "Benton-Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
  
  h4, h3 {
    margin: 0; }
  
  h3 {
    font-size: 16px; }
  
  p {
    font-family: Georgia, Times New Roman, serif; }
  
  .copy {
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    max-width: 34em;
  }

    /* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body {
  padding-top: 70px;
}

main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}

.footer > .container {
padding-right: 15px;
padding-left: 15px;
}

.headline-space {
padding-top: 40px;
padding-bottom: 20px;
}

code {
font-size: 80%;
}

.make-red {
color: #d3242c;
}

.published-date {
margin-right: 10px;
}

a.pagelink:link,
a.pagelink:visited,
a.pagelink:active { color: #d3242c; text-decoration: none; }

a.pagelink:hover { text-decoration: underline;  }

.btn-info {
background-color: #00acee;
border-color: #00acee;
}

.btn-primary {
background-color: #3b5998;
border-color: #3b5998;
}

.btn-danger {
background-color: #d3242c;
border-color: #d3242c;
}

.ad {
width: 768px;
margin: 0 auto; }

#ad1, #ad2 {
padding-bottom: 60px;
padding-top: 60px;
}

#observablehq-ceede6a3 h2 {
padding-top: 40px;
padding-bottom: 20px;
}

#observablehq-ceede6a3 p {
padding-bottom: 20px;
}

.hide-me {
  display: none;
}

.img-full {
   display:block;
 }

.img-mobile {
  display:none;
}

@media (max-width: 885px) and (min-width: 100px) {
 .img-full {
   display:none;
 }

 .img-mobile {
   display:block;
 }
}


@media only screen and (min-width: 100px) and (max-width: 768px) {
.ad {
  width: 320px;
  padding-top: 70px;
  margin: 0 auto; } 
}