@font-face {
  font-family: 'Gingham'; 
  src: url('../fonts/Gingham.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}



.varfonts p {
	font-family: Gingham, Helvetica, Arial, sans-serif;
	font-size: 1.1em;
  font-variation-settings: "wdth" 1, "wght" 300;
  letter-spacing: 0;
  transition: 2s font-variation-settings linear;
}
	@media only screen and (min-width: 35em) {
    .varfonts p {
      font-variation-settings: "wdth" 500, "wght" 300;
      letter-spacing: 0;
		}
	}

	@media only screen and (min-width: 81.25em) {
    .varfonts p {
	    font-size: 1.25em;
      font-variation-settings: "wdth" 500, "wght" 300;
      letter-spacing: 0;
		}
	}

.varfonts .article-detail.initial p:first-of-type:first-letter {
	font-size: 4em; 
	font-family: "Gingham", Helvetica, Arial, sans-serif;
  font-variation-settings: "wdth" 100, "wght" 900;
	line-height: 0.9em; 
	float: left; 
	padding-right: 0.1em; 
  transition: 2s font-variation-settings linear;
}
	@media only screen and (min-width: 35em) {
    .varfonts .article-detail.initial p:first-of-type:first-letter {
      font-variation-settings: "wdth" 500, "wght" 900;
      padding-right: 0.15em;
		}
	}
	@media only screen and (min-width: 81.25em) {
    .varfonts .article-detail.initial p:first-of-type:first-letter {
      font-size: 5em;
      font-variation-settings: "wdth" 600, "wght" 999;
      padding-right: 0.15em;
		}
	}

.varfonts .byline {
	
}
	@media only screen and (min-width: 35em) {
    .varfonts .byline {
      font-size: 1.3em;
		}
	}
	@media only screen and (min-width: 81.25em) {
    .varfonts .byline {
      font-size: 1.35em;
		}
	}

.varfonts h1 {
	font-family: Gingham, Helvetica, Arial, sans-serif;
	font-weight: normal;
  font-variation-settings: "wdth" 200, "wght" 100;
  letter-spacing: 0;
  transition: 2s font-variation-settings linear;
}
	@media only screen and (min-width: 41.25em) {
    .varfonts h1 {
      font-size: 3em;
			font-variation-settings: "wdth" 400, "wght" 300;
			letter-spacing: 0;
		}
	}

	@media only screen and (min-width: 56.25em) {
    .varfonts h1 {
      font-size: 3em;
			font-variation-settings: "wdth" 900, "wght" 999;
			letter-spacing: 0;
		}
	}

.varfonts h2 {
	font-family: Gingham, Helvetica, Arial, sans-serif;
	font-weight: normal;
  font-variation-settings: "wdth" 500, "wght" 600;
  letter-spacing: 0;
}
	@media only screen and (min-width: 56.25em) {
    .varfonts h2 {
      font-size: 2.45em;
		}
	}
	@media only screen and (min-width: 81.25em) {
    .varfonts h2 {
      font-size: 2.65em;
      max-width: 20.35em;
		}
	}

.varfonts .section-name {
	font-family: Gingham, Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: 0.825;
	padding-bottom: 0.02em;
	font-variation-settings: "wdth" 900, "wght" 999;
}

.varfonts .section-name.sport {
	font-size: 33.85vw;
  transition: 2s font-size;
}
	@media only screen and (min-width: 43.75em) {
    .varfonts .section-name.sport {
      font-size: 25.85vw;
		}
	}
	@media only screen and (min-width: 56.25em) {
    .varfonts .section-name.sport {
      font-size: 25.85vw;
		}
	}
	@media only screen and (min-width: 81.25em) {
    .varfonts .section-name.sport {
      font-size: 24.15vw;
		}
	}

.varfonts blockquote, 
.varfonts .footer-contact .name, 
.varfonts .nav-footer a, 
.varfonts .footer-social-links a,
.varfonts .menu-item a, 
.varfonts .nav-menu-toggle, 
.varfonts .font-notes {
	font-family: Gingham, Helvetica, Arial, sans-serif;
}

.varfonts .font-notes {
	width: 32vw;
	padding-left: 1vw;
}
.varfonts .download-amount {
	font-variation-settings: "wdth" 100, "wght" 100;
	font-size: 22vw;
}

.varfonts .download-amount em {
	font-variation-settings: "wdth" 500, "wght" 300;

}

.requirements {
	max-width: none;
	text-align: right;
}