@media (max-width: 1200px) { .nav-bar-title--tagline { font-size: small; } } @media (max-width: 1050px) { .nav-bar-title--tagline { display: none; } } @media (max-width: 750px ) { body, button, input, textarea, label, select, option, p, h3 { font-size: medium; } .instructions-text--large, .pull-quote { font-size: 1.5rem; } .column--med-10 { width: 100%; } .column--sml-10 { width: 100%; } .h2--top { margin-top: 1em; } .nav-bar-title-section { width:100%; padding: 0px; } .nav-bar-title { width: calc(25% - 2rem); padding: 1rem; } .nav-bar-logo { height: 1.5rem; } .nav-bar-link-section { width: 75%; padding: 0px; } .nav-bar-link { float: left; text-align: center; width: calc(25% - 2rem); padding: 1rem; margin: 0px; } } @media (max-width: 500px) { .nav-bar-logo { height: 1rem; } .nav-bar-link { font-size: small; width: calc(25% - 1rem); padding: 1rem 0.5rem 1rem 0.5rem; } body, button, input, textarea, label, select, option, p, h3, .fine-print { font-size: small; } .instructions-text--large, .pull-quote, .input-text--large, .button--large { font-size: medium; } .grid-item { width: calc(100% - 2em); float: none; padding: 1em; margin: 0px; } .info-message-placeholder { height: 2em; } .info-message { font-size: small; } } @media (max-width: 360px) { .nav-bar-link { font-size: x-small; } body, button, input, textarea, label, select, option, p, h3, .fine-print, .instructions-text--large { font-size: x-small; } .pull-quote, .input-text--large, .button--large { font-size: small; } }