* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@media screen { body { background: #fff; font-family: "Merriweather", Georgia, serif; margin: 0; line-height: 1.5em; }
  body#techfar_landing_page { background: #323A45; }
  a { color: inherit; font-family: inherit; font-weight: inherit; text-decoration: none; }
  a.anchor_offset { display: block; position: relative; top: -60px; visibility: hidden; }
  a:hover { text-decoration: underline; }
  ol, ul { list-style-type: decimal; list-style-position: inside; }
  ol li, ul li { margin: 1em 0; color: #323A45; }
  h1 { font-size: 52px; font-weight: 300; border-bottom: 1px solid #fff; padding-bottom: 0.25em; margin-bottom: 20px; line-height: 1.375em; } }
@media screen and (min-width: 0px) and (max-width: 640px) { h1 { font-size: 28px; } }

@media screen { h2 { font-family: "Merriweather", Georgia, serif; font-size: 30px; line-height: 1.375em; font-weight: 300; }
  h2.display { font-family: "Merriweather", Georgia, serif; font-size: 54px; line-height: 1.3em; font-weight: 300; margin-top: 0; color: #323A45; } }
@media screen and (min-width: 0px) and (max-width: 640px) { h2.display { font-size: 32px; } }

@media screen { h3 { font-family: "Merriweather", Georgia, serif; font-size: 20px; font-weight: 700; }
  h4 { font-family: "Merriweather", Georgia, serif; font-size: 17px; font-weight: 700; line-height: 1.5em; color: #046B99; margin-bottom: 0; }
  h6 { font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5em; margin-bottom: 15px; }
  p { color: #323A45; font-weight: 400; font-size: 17px; line-height: 2.0em; }
  .outer_container { max-width: 68em; margin-left: auto; margin-right: auto; padding: 40px; }
  .outer_container:after { content: ""; display: table; clear: both; } }
@media screen and (min-width: 0px) and (max-width: 640px) { .outer_container { padding: 20px; } }

@media screen { .inner_container { margin-left: 8.5298%; float: left; display: block; margin-right: 2.35765%; width: 82.94039%; }
  .inner_container:last-child { margin-right: 0; } }
@media screen and (min-width: 0px) and (max-width: 640px) { .inner_container { margin-left: 0%; float: left; display: block; margin-right: 7.42297%; width: 100%; }
  .inner_container:last-child { margin-right: 0; } }
@media screen and (min-width: 641px) and (max-width: 980px) { .inner_container { margin-left: 0%; float: left; display: block; margin-right: 2.35765%; width: 100%; }
  .inner_container:last-child { margin-right: 0; } }

@media screen { .button { font-size: 17px; font-family: "Source Sans Pro", sans-serif; font-weight: 700; line-height: 1.5em; display: inline-block; margin-top: 40px; margin-right: 20px; }
  .button a { display: inline-block; border-radius: 3px; padding: 10px 20px; text-decoration: none; border: 2px solid #fff; min-width: 172px; text-align: center; }
  .button a:hover { background: #fff; color: #323A45; text-decoration: none; } }
@media screen and (min-width: 0px) and (max-width: 640px) { .button { margin-top: 20px; display: block; margin-right: 0; text-align: left; } }

@media screen { #alpha_tag { float: right; background: green; color: #fff; padding: 10px; font-family: "Source Sans Pro", sans-serif; }
  #introduction { background: #323A45; color: #fff; padding-bottom: 60px; }
  #introduction a { text-decoration: underline; }
  #introduction a:hover { background: #fff; color: #323A45; }
  #introduction #usds_logo { display: inline-block; }
  #introduction #usds_logo img { max-height: 100%; max-width: 100%; width: 200px; }
  #introduction #usds_logo:hover { background: none; opacity: 0.7; }
  #introduction .button a { text-decoration: none; }
  #introduction p { max-width: 700px; font-family: "Merriweather", Georgia, serif; font-size: 20px; font-weight: 300; line-height: 2.0em; margin-top: 40px; color: #fff; }
  #introduction p.download_links { font-size: 16px; } }
@media screen and (min-width: 0px) and (max-width: 640px) { #introduction { padding-bottom: 20px; }
  #introduction p { font-size: 16px; line-height: 24px; margin-top: 20px; } }

@media screen { #navigation_bar { visibility: hidden; display: none; position: fixed; width: 100%; height: 0; background: #323A45; color: #fff; }
  #navigation_bar .outer_container { padding: 0 40px; }
  #navigation_bar h3 { padding: 20px 0; margin-top: 0; font-weight: 300; color: #fff; display: inline-block; }
  #navigation_bar h3:hover { text-decoration: underline; }
  #navigation_bar ul { float: right; display: inline; padding: 0; list-style-position: outside; }
  #navigation_bar .active a { background: #046B99; color: #fff; text-decoration: none; }
  #navigation_bar li { display: inline; margin-left: 5px; list-style-type: none; }
  #navigation_bar li a { display: inline-block; height: 24px; width: 24px; line-height: 22px; text-align: center; font-family: "Merriweather", Georgia, serif; font-weight: lighter; color: #fff; border: 1px solid #046B99; }
  #navigation_bar li a:hover { background: #046B99; color: #fff; text-decoration: none; }
  #navigation_bar #menu_icon { display: none; height: 14px; width: 16px; margin-top: 16px; float: right; background-image: url("../images/menu_icon.svg"); background-size: contain; }
  #navigation_bar #menu_icon a { display: block; height: 100%; width: 100%; } }
@media screen and (min-width: 0px) and (max-width: 640px) { #navigation_bar ul { display: none; }
  #navigation_bar #menu_icon { display: inline-block; }
  #navigation_bar .outer_container { padding: 0 20px; }
  #navigation_bar h3 { font-size: 16px; padding: 16px 0; line-height: 16px; } }
@media screen and (min-width: 641px) and (max-width: 980px) { #navigation_bar ul { display: none; }
  #navigation_bar #menu_icon { display: inline-block; margin-top: 20px; height: 18px; width: 20px; } }

@media screen { #navigation_bar.show { visibility: visible; display: block; height: 60px; } }
@media screen and (min-width: 0px) and (max-width: 640px) { #navigation_bar.show { height: 48px; visibility: visible; display: block; } }

@media screen { #plays_index { background: #046B99; padding-bottom: 60px; color: #fff; }
  #plays_index h2 { margin-bottom: 38px; }
  #plays_index .columns { -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; }
  #plays_index ol { list-style-position: inside; padding-left: 0px; margin-top: 0px; }
  #plays_index ol a { vertical-align: top; color: #fff; margin-top: 0; display: inline-block; width: 85%; }
  #plays_index ol, #plays_index li { font-size: 20px; font-weight: 300; line-height: 1.5em; margin: 0; color: #fff; }
  #plays_index li { padding-bottom: 20px; }
  #plays_index .button a { color: white; }
  #plays_index .button a:hover { color: #323A45; } }
@media screen and (min-width: 0px) and (max-width: 640px) { #plays_index { padding-bottom: 20px; }
  #plays_index h2 { font-size: 18px; margin-bottom: 20px; }
  #plays_index ol, #plays_index li { font-size: 16px; line-height: 24px; } }
@media screen and (min-width: 641px) and (max-width: 980px) { #plays_index .columns { -moz-column-count: 1; -moz-column-gap: 0px; -webkit-column-count: 1; -webkit-column-gap: 0px; column-count: 1; column-gap: 00px; } }
@media screen and (min-width: 0px) and (max-width: 640px) { #plays_index .columns { -moz-column-count: 1; -moz-column-gap: 0px; -webkit-column-count: 1; -webkit-column-gap: 0px; column-count: 1; column-gap: 00px; } }

@media screen { #plays h2, #plays h3, #techfar h2, #techfar h3 { float: left; display: block; margin-right: 2.35765%; width: 65.88078%; }
  #plays h2:last-child, #plays h3:last-child, #techfar h2:last-child, #techfar h3:last-child { margin-right: 0; }
  #plays h3, #techfar h3 { color: #323A45; }
  #plays h2, #techfar h2 { margin-bottom: 24px; }
  #plays p, #techfar p { float: left; display: block; margin-right: 2.35765%; width: 74.41059%; }
  #plays p:last-child, #techfar p:last-child { margin-right: 0; }
  #plays ol, #plays ul, #techfar ol, #techfar ul { float: left; display: block; margin-right: 2.35765%; width: 65.88078%; list-style-position: outside; padding-left: 25px; }
  #plays ol:last-child, #plays ul:last-child, #techfar ol:last-child, #techfar ul:last-child { margin-right: 0; }
  #plays ol, #techfar ol { list-style-image: url("../images/bullet-sq.svg"); margin-top: 0px; }
  #plays li, #techfar li { padding-left: 5px; font-size: 15px; }
  #plays ul, #techfar ul { list-style-image: url("../images/bullet-circle.svg"); }
  #plays a, #techfar a { color: #0071bc; text-decoration: underline; display: inline-block; }
  #plays a:visited, #techfar a:visited { color: #4c2c92; } }
@media screen and (min-width: 0px) and (max-width: 640px) { #plays p, #techfar p { font-size: 16px; }
  #plays ol, #plays li, #techfar ol, #techfar li { font-size: 16px; }
  #plays h2, #plays h3, #plays p, #plays ol, #plays ul, #techfar h2, #techfar h3, #techfar p, #techfar ol, #techfar ul { float: left; display: block; margin-right: 7.42297%; width: 100%; }
  #plays h2:last-child, #plays h3:last-child, #plays p:last-child, #plays ol:last-child, #plays ul:last-child, #techfar h2:last-child, #techfar h3:last-child, #techfar p:last-child, #techfar ol:last-child, #techfar ul:last-child { margin-right: 0; } }
@media screen and (min-width: 641px) and (max-width: 980px) { #plays h2, #plays h3, #techfar h2, #techfar h3 { float: left; display: block; margin-right: 2.35765%; width: 74.41059%; }
  #plays h2:last-child, #plays h3:last-child, #techfar h2:last-child, #techfar h3:last-child { margin-right: 0; }
  #plays p, #techfar p { float: left; display: block; margin-right: 2.35765%; width: 82.94039%; }
  #plays p:last-child, #techfar p:last-child { margin-right: 0; } }

@media screen { #techfar em { font-size: 12px; line-height: 0; vertical-align: super; }
  #techfar h2, #techfar h4 { margin-top: 20px; }
  #techfar img { max-width: 100%; } }
@media print { body { background: white; font-family: "Merriweather", Georgia, serif; font-weight: lighter; line-height: 1.5em; font-size: 12px; margin-left: 16.5%; margin-right: 16.5%; }
  #plays_index ol { list-style-type: decimal; }
  #plays_index a { text-decoration: none; }
  #navigation_bar { display: none; }
  a { color: #323A45; text-decoration: underline; }
  ol, ul { width: 80%; }
  ol { list-style-type: square; }
  p { width: 100%; }
  h2, h4 { width: 66%; }
  h2 { margin-top: 0px; }
  h5 { margin-top: 60px; margin-bottom: 0px; }
  .button { display: none; } }
