@charset "UTF-8";

/* stylelint-disable at-rule-empty-line-before */

/*
 * Helper utilities
 * Mixins and utilities that are globally used
 */

.opacityZero {
  opacity: 0;
}

.opacityFull {
  opacity: 1.0;
}

/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/

/*
 * Grid parameter defaults
 * These are used to customize the grid layout
 * Feel free to overwrite them as necessary
 */

/* this is all from Bootstrap */

/*
1. The cookie policy for the gateway site is set to 365 days.
2. The cookie policy will display on any page if the user has not accepted the cookie policy.
3. The cookie policy will not display if the user has accepted the cookie policy
4. #cookie-policy and #cookie-policy-btn are IDs with attached jQuery functions that will pass acceptance of the cookie policy.

Example HTML Structure:
<section id="cookie-policy" aria-labelledby="cookie-policy-heading">
    <div class='cookie'>
        <h2 id="cookie-policy-heading" class="screenreader-only">Cookie Policy</h2>
        <p class="cookie__copy">We use cookies to understand how you use our site and to improve your experience, including personalizing content and to store your content preferences. If you would prefer, you may set your browser to refuse cookies or alert you when cookies are being sent; however, it is possible that some parts of our sites will not function properly if you do so. By continuing to use our sites, you accept our use of cookies and revised
            <a class="cookie__link light" href="/terms-of-use/">Privacy Policy</a>.
        </p>
        <button class="cookie__btn--accept" type="button" id="cookie-policy-btn">I&nbsp;Accept</button>
    </div>
</section>

More information about cookies.
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

*/

#cookie-policy {
  background: #003B5C;
  bottom: 0;
  margin: 0 auto;
  padding: 48px;
  position: fixed;
  width: 100%;
  z-index: 9999;
  opacity: 0.8;
  display: none;
}

.cookie {
  margin: 0 auto;
  max-width: 1200px;
}

.cookie__btn--accept {
  background-color: #003B5C;
  color: #FFFFFF;
  font-size: 1rem;
  border: 2px solid #FFFFFF;
  padding: 12px 16px;
  font-weight: normal;
  top: 64px;
  right: 10px;
  float: right;
  cursor: pointer;
}

@media (max-width: 600px) {
  .cookie__btn--accept {
    top: 0px;
    right: 0px;
  }
}

.cookie__btn--accept::after {
  display: none;
}

.cookie__btn--accept:hover {
  background-color: #0079BF;
}

.cookie__btn--accept:focus {
  outline: 2px dotted #0079BF;
  outline-offset: 2px;
  background-color: #0079BF;
}

.cookie__btn--accept:active {
  background-color: #003B5C;
}

.cookie__link {
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: underline;
}

.cookie__copy {
  width: 67%;
  color: #FFFFFF;
  display: inline-block;
}

@media (max-width: 600px) {
  .cookie__copy {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .cookie__copy {
    width: 85.6%;
  }
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.align-right {
  text-align: right;
}

body {
  background: #FFFFFF;
  font-family: "Helvetica", "Arial", sans-serif;
  -webkit-text-size-adjust: 100%;
  color: #333;
  height: auto;
}

body a.website-feedback {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  color: #00598C;
  text-decoration: underline;
  padding: 0;
  margin: 0;
}

body a.website-feedback::after {
  content: none;
}

body a.website-feedback:link {
  color: #00598C;
}

body a.website-feedback:focus {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

body a.website-feedback:hover {
  background-color: #0079BF;
}

body a.website-feedback:hover,
body a.website-feedback:active {
  color: #FFFFFF;
  text-decoration: none;
}

body a.website-feedback:active {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

body a.website-feedback:visited {
  color: #5223B0;
}

body a.website-feedback:visited:hover {
  color: #FFFFFF;
}

strong {
  font-weight: bold;
}

figure {
  margin: 0 0 24px 0;
}

figcaption {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Global Link Styles */

a:link {
  color: #00598C;
}

a:focus {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

a:hover {
  background-color: #0079BF;
}

a:hover,
a:active {
  color: #FFFFFF;
  text-decoration: none;
}

a:active {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

a:visited {
  color: #5223B0;
}

a:visited:hover {
  color: #FFFFFF;
}

a.light:link {
  color: #FFFFFF;
}

a.light:focus {
  color: #FFFFFF;
  outline: 2px dotted #FFE500;
}

a.light:hover {
  background-color: #FFE500;
  color: #333;
}

a.light:active {
  background-color: #FFBF0F;
  color: #333;
  outline: none;
}

a.light:visited {
  color: #FFFFFF;
}

a.light:visited:hover {
  color: #333;
}

code {
  font-family: Courier, monospace;
  font-size: 1rem;
  line-height: 1.5rem;
}

i,
em,
.italic {
  font-style: italic;
}

ins {
  background-color: #DAEBFE;
  text-decoration: none;
}

mark {
  background-color: #FFF0A5;
}

p {
  font-size: 1rem;
  line-height: 1.5rem;
}

p.lead {
  font-size: 1.33rem;
  line-height: 1.66rem;
}

.legal {
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: #333;
}

.website-feedback {
  cursor: pointer;
}

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
}

.mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none;
  }
}

a.external-link--blue span img {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 0 -1px 5px;
}

a.external-link--blue:hover span img {
  content: url(../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--white.svg);
}

a.external-link--white span img {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 0 -2px 5px;
}

a.external-link--white:hover span img {
  content: url(../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--black.svg);
}

/* Remove this later: only for wireframe */

span.box {
  border: 1px solid #000000;
}

.ucla a:focus {
  outline: 2px dotted #2774AE;
}

/*******
Hero
*******/

#hero {
  background: #005587;
  /* Fallback for older browsers */
  background: linear-gradient(180deg, #005587 0%, #2774AE 100%);
  margin-top: 64px;
  padding: 32px 0 90px;
}

@media (min-width: 768px) {
  #hero {
    padding: 32px 0 85px;
  }
}

@media (min-width: 1024px) {
  #hero {
    margin-top: 64px;
    padding-bottom: 0px;
  }
}

#hero .col.span_12_of_12.mb-n64 {
  margin-top: -64px;
}

@media (min-width: 1024px) {
  #hero .col.span_12_of_12.mb-n64 {
    display: flex;
    margin-bottom: 64px !important;
  }
}

@media (min-width: 1024px) {
  #hero .box-wrap {
    width: 66%;
  }
}

@media (min-width: 1024px) {
  #hero .box-wrap--2 {
    width: 33%;
  }
}

@media (min-width: 768px) {
  #hero .box-wrap--2 {
    display: flex;
  }
}

@media (min-width: 1024px) {
  #hero .box-wrap--2 {
    display: block;
  }
}

#hero a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  text-decoration: none;
  background: none;
}

@media (min-width: 768px) {
  #hero a {
    overflow: hidden;
  }
}

#hero a:focus h1,
#hero a:focus h3 {
  background: #FFFFFF;
  color: #2774AE;
  outline: 2px dotted #2774AE;
  outline-offset: -10px;
}

#hero a:hover h1,
#hero a:hover h3 {
  background: #0079BF;
  color: #FFFFFF;
}

#hero a:active h1,
#hero a:active h3 {
  background: #003B5C;
  color: #FFFFFF;
}

#hero a.box-1__link,
#hero a.box-2__link,
#hero a.box-3__link {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-bottom: 24px;
}

#hero a.box-1__link video,
#hero a.box-2__link video,
#hero a.box-3__link video {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

@media (min-width: 1024px) {
  #hero a.box-1__link video,
  #hero a.box-2__link video,
  #hero a.box-3__link video {
    height: 100%;
  }
}

@media (min-width: 768px) {
  #hero a.box-2__link,
  #hero a.box-3__link {
    margin-bottom: 15px;
  }
}

@media (min-width: 1024px) {
  #hero a.box-1__link,
  #hero a.box-3__link {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  #hero a.box-1__link {
    margin-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  #hero a.box-1__link.video {
    margin-bottom: 0px;
  }
}

@media (min-width: 1024px) {
  #hero a.box-1__link {
    display: block;
    height: 100%;
  }

  #hero a.box-1__link .box-1__img {
    display: block;
    height: 100%;
  }
}

@media (min-width: 1024px) {
  #hero a.box-2__link {
    margin-bottom: 24px;
  }
}

#hero img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 1;
  width: 100%;
}

#hero h1 {
  font-size: 24px;
  line-height: 27px;
  padding: 16px 32px 12px;
  width: 100%;
}

@media (min-width: 768px) {
  #hero h1 {
    font-size: 24px;
    line-height: 27px;
    width: auto;
  }
}

@media (min-width: 768px) {
  #hero h1 {
    padding: 16px 32px 12px;
    width: calc(100% - 24px);
  }
}

#hero h1,
#hero h3 {
  position: relative;
  bottom: 0;
  z-index: 1;
  background: #FFF;
  color: #00598C;
}

@media (min-width: 768px) {
  #hero h1,
  #hero h3 {
    position: absolute;
  }
}

#hero h1::before,
#hero h3::before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  left: 16px;
  width: 64px;
  height: 4px;
  background: #FFD100;
  margin-bottom: 24px;
}

#hero h3 {
  font-size: 16px;
  line-height: 20px;
  padding: 10px 16px;
  width: 100%;
}

@media (min-width: 768px) {
  #hero h3.box-1__title {
    font-size: 24px;
    line-height: 27px;
    max-width: 552px;
    padding: 18px 32px 12px;
  }

  #hero h3.box-2__title,
  #hero h3.box-3__title {
    max-width: 324px;
    padding: 12px 16px 8px;
  }
}

@media (min-width: 1024px) {
  #hero h3.box-1__title {
    padding: 16px 32px 12px;
  }

  #hero h3.box-2__title,
  #hero h3.box-3__title {
    max-width: 360px;
    width: calc(100% - 24px);
  }
}

/*******

Centennial

The HTML structure consists of:

I. Section Tag & Section Div - These are used to style the size of
the section across mobile, tablet and desktop platforms. It also
wraps the two child classes in section II and III below

<section id="hero" class="section group" aria-labelledby="hero-heading">
  <div class="section group promo">
    CONTENT FROM II and III BETWEEEN
    </div>
</section>

II. Image Wrapper - <div class="col span_6_of_12 promo__image-wrapper">
    a. Main Title of Section - <h2 id=”promo-section” class="promo__header">TITLE</h2>
    b. Main Image of Section - <img class="promo__image" src="IMAGE" alt="IMAGE DESCRIPTION" />

III. Copy Wrapper - <div class="col span_6_of_12 promo__copy-wrapper">

    a. Content Title - <h3 class="promo__copy-title">CONTENT TITLE</h3>
    b. Supporting Text of Content Title - <p class="mt-2 mb-4 mb-md-36 promo__copy-text">Excerpt about Title</p>
    c. Button to Navigate User to Content
        <a class="promo__copy-cta" href="URL TO CONTENT" data-width="1128" data-height="634">
          <button class="btn primary-blue promo__copy-cta-button">
              <span class="promo__copy-cta-text">BUTTON TEXT</span>
          </button>
        </a>

Example:

// I Section Tag & Section Div
<section id="promo" aria-labelledby=”promo-section”>
    <div class="section group promo">

    // II. Image Wrapper
        <div class="col span_6_of_12 promo__image-wrapper">
      // a. Main Title of Section
            <h2 id=”promo-section” class="promo__header">Centennial</h2>
      // b. Main Image of Section
            <img class="promo__image" src="img/homepage-100-img.jpg" alt="UCLA 100 Years" />
        </div>

    // III. Copy Wrapper
        <div class="col span_6_of_12 promo__copy-wrapper">
      // a. Content Title
            <h3 class="promo__copy-title">Celebrating One Century, Lighting the Way into Another.</h3>
      // b. Supporting Text of Content Title
      <p class="mt-2 mb-4 mb-md-36 promo__copy-text">Explore the moments and people who shaped UCLA’s first century, see how we move knowledge into action to make our world a better place, and join us for events happening throughout our yearlong celebration.</p>
      // c. Button to Navigate User to Content
      <a class="promo__copy-cta" href="http://100.ucla.edu" data-width="1128" data-height="634">
              <button class="btn primary-blue promo__copy-cta-button">
                  <span class="promo__copy-cta-text">Explore UCLA’s Centennial</span>
              </button>
            </a>
        </div>

    </div>
</section>

See example on Landing Page
*******/

section#promo {
  width: 100%;
  background: #005587;
  margin: 0;
}

@media only screen and (min-width: 599px) {
  section#promo {
    margin: 0 0 52px;
    width: auto;
  }
}

@media (min-width: 768px) {
  section#promo {
    margin: 0 0px 52px;
    width: auto;
  }
}

@media (min-width: 1024px) {
  section#promo {
    margin: 0 0 52px 0px;
  }
}

@media (min-width: 1280px) {
  section#promo {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 52px;
    padding: 0px;
  }
}

section#promo .promo {
  width: 100%;
  background-color: #005587;
  display: flex;
  align-items: center;
  justify-items: center;
}

@media (max-width: 1023.98px) {
  section#promo .promo {
    flex-direction: column;
  }
}

section#promo .promo__image-wrapper,
section#promo .promo__copy-wrapper {
  float: left;
  width: 100%;
  display: block;
}

@media (min-width: 1024px) {
  section#promo .promo__image-wrapper,
  section#promo .promo__copy-wrapper {
    width: 47%;
    display: inline-block;
    padding: 0 0 0 12px;
  }
}

section#promo .promo__image-wrapper {
  flex-grow: 1;
}

section#promo .promo__image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

section#promo .promo__copy-wrapper {
  background: #2774AE;
  color: #00598C;
  flex-grow: 1;
}

@media (max-width: 1023.98px) {
  section#promo .promo__copy-wrapper {
    width: 90%;
    margin-top: -16px;
  }
}

section#promo .promo__copy-title {
  display: block;
  text-transform: capitalize;
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: white;
}

@media (max-width: 767.98px) {
  section#promo .promo__copy-title {
    font-size: 28px;
    line-height: 32px;
  }
}

section#promo .promo__copy-text {
  color: white;
}

section#promo .promo__copy-cta {
  text-decoration: none;
}

/*
  todo: create helper class for gradient background
*/

section#events {
  border-bottom: 1px solid #CCC;
  overflow: hidden;
  position: relative;
}

@media only screen and (min-width: 768px) {
  section#events {
    padding-bottom: 84px;
  }
}

@media only screen and (min-width: 1280px) {
  section#events .ucla.campus {
    padding-right: 24px;
  }
}

section#events .background {
  background: #F2F2F2;
  position: absolute;
  height: 100%;
  top: 72px;
  width: 100%;
  z-index: -1;
}

@media only screen and (min-width: 768px) {
  section#events .background {
    top: 80px;
  }
}

@media only screen and (min-width: 600px) {
  section#events .events__section-title {
    display: inline-block;
  }
}

@media only screen and (min-width: 768px) {
  section#events .events__section-title {
    display: inline-block;
    padding-bottom: 32px;
  }
}

section#events #events-slider .splide__slider {
  margin-bottom: 28px;
}

section#events #events-slider .splide__slider .splide__slide {
  background-color: #FFFFFF;
  height: 100%;
}

section#events #events-slider .splide__slider .splide__slide .event-card {
  margin: 0 !important;
  max-width: none !important;
}

section#events #events-slider .splide__slider .splide__slide .event-card__link:active span {
  outline: none;
}

section#events #events-slider .splide__slider .splide__slide .event-card__link::before {
  height: auto;
}

section#events #events-slider .splide__slider .splide__slide .event-card__image-overlay {
  width: 100%;
  height: auto;
}

section#events #events-slider .splide__slider .splide__slide .event-card__image {
  display: block;
  max-width: none;
  max-height: none;
  width: 100%;
}

section#events #events-slider .splide__slider .splide__slide .event-card__wrapper {
  max-width: none;
}

section#events #events-slider .splide__pagination {
  padding: 0;
  width: 100%;
}

section#events #events-slider .splide__pagination li {
  margin: 0 2px;
}

section#events #events-slider .splide__pagination li button.splide__pagination__page {
  border-color: #CCC;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding: 0;
}

section#events .calendar {
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  section#events .calendar {
    display: none;
  }
}

section#events .calendar--desktop {
  display: none;
  position: absolute;
  right: 24px;
  top: 0px;
}

@media (min-width: 768px) {
  section#events .calendar--desktop {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
  }
}

section#events .calendar--desktop--nav,
section#events .calendar--desktop splide__arrow {
  margin: 1px;
  padding: 0px;
  transform: unset;
  width: 40px;
  height: 40px;
  background: #00598C;
}

section#events .calendar--desktop--nav:hover,
section#events .calendar--desktop splide__arrow:hover {
  background: #0079BF;
}

section#events .calendar--desktop--nav:hover > svg > path,
section#events .calendar--desktop splide__arrow:hover > svg > path {
  fill: #FFFFFF;
}

section#events .calendar--desktop--nav:focus,
section#events .calendar--desktop splide__arrow:focus {
  background: #0079BF;
}

section#events .calendar--desktop--nav:active,
section#events .calendar--desktop splide__arrow:active {
  background: #003B5C;
}

section#events .calendar__link {
  font-weight: bold;
  text-decoration: none;
  color: #00598C;
  margin-right: 24px;
}

section#events .calendar__link:hover {
  color: #FFFFFF;
  background: #0079BF;
}

section#events .calendar__link:focus {
  color: #FFFFFF;
  background: #0079BF;
  outline: 2px dotted #0079BF;
  outline-offset: 2px;
}

section#events .calendar__link:active {
  color: #FFFFFF;
  background: #003B5C;
}

section#events button.splide__arrow > svg {
  width: 40px;
  height: 40px;
  color: #FFFFFF;
}

#social-blade {
  background: #2774AE;
  padding: 42px 0;
}

@media (min-width: 768px) {
  #social-blade {
    margin-bottom: 96px;
    padding: 64px 0;
  }
}

#social-blade .btn--secondary--darkbg {
  background: #FFFFFF;
  color: #00598C;
  margin: 25px auto;
}

#social-blade .btn--secondary--darkbg:hover {
  background: #FFD100;
  color: #000000;
}

@media (min-width: 1280px) {
  #social-blade .ucla.campus {
    padding-right: 0px;
  }
}

@media (min-width: 768px) {
  #social-blade .social-post-container {
    position: relative;
  }
}

#social-blade .social-post-container .social-post__wrapper {
  padding: 0 24px !important;
}

#social-blade .social-post-container .social-post__wrapper .social-post__header {
  padding-bottom: 24px;
  color: #FFFFFF;
}

#social-blade .social-post__text {
  color: #FFFFFF;
  width: 100%;
  padding-bottom: 14px;
}

@media (min-width: 768px) {
  #social-blade .social-post__text {
    padding-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  #social-blade .social-post__text {
    width: 60%;
  }
}

#social-blade .social-tile-container {
  margin-bottom: 100px;
}

@media (min-width: 768px) {
  #social-blade .social-tile-container {
    margin-bottom: 150px;
  }
}

@media (min-width: 1024px) {
  #social-blade .social-tile-container {
    margin-bottom: 150px;
  }
}

#social-blade .social-tint-container {
  width: calc(100% + 24px);
  margin-left: -12px;
}

#social-blade .social-links-container--blue a {
  background: #00598C;
  margin: 2px 4px;
}

#social-blade .social-links-container--blue a:hover {
  background: #0079BF;
}

#social-blade .social-links-container--blue a:active {
  background: #003B5C;
}

#social-blade .social-links-container--blue a:focus {
  background: #0079BF;
}

#social-blade .social-links-container--blue a:hover .social-icon--facebook,
#social-blade .social-links-container--blue a:active .social-icon--facebook,
#social-blade .social-links-container--blue a:focus .social-icon--facebook {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/facebook--white.svg");
  background-size: cover;
}

#social-blade .social-links-container--blue a:hover .social-icon--twitter,
#social-blade .social-links-container--blue a:active .social-icon--twitter,
#social-blade .social-links-container--blue a:focus .social-icon--twitter {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/twitter--white.svg");
  background-size: cover;
}

#social-blade .social-links-container--blue a:hover .social-icon--instagram,
#social-blade .social-links-container--blue a:active .social-icon--instagram,
#social-blade .social-links-container--blue a:focus .social-icon--instagram {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/instagram--white.svg");
  background-size: cover;
}

#social-blade .social-links-container--blue a:hover .social-icon--snapchat,
#social-blade .social-links-container--blue a:active .social-icon--snapchat,
#social-blade .social-links-container--blue a:focus .social-icon--snapchat {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/snapchat--white.svg");
  background-size: cover;
}

#social-blade .social-links-container--blue a:hover .social-icon--linkedin,
#social-blade .social-links-container--blue a:active .social-icon--linkedin,
#social-blade .social-links-container--blue a:focus .social-icon--linkedin {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/linkedin--white.svg");
  background-size: cover;
}

#social-blade .social-links-container--blue a:hover .social-icon--youtube,
#social-blade .social-links-container--blue a:active .social-icon--youtube,
#social-blade .social-links-container--blue a:focus .social-icon--youtube {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/youtube--white.svg");
  background-size: cover;
}

#social-blade .social-links-container--blue a:hover .social-icon--tiktok,
#social-blade .social-links-container--blue a:active .social-icon--tiktok,
#social-blade .social-links-container--blue a:focus .social-icon--tiktok {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/tiktok--white.svg");
  background-size: cover;
}

#social-blade .social-links-container--blue .social-icon {
  background: #2774AE;
  border-radius: 24px;
  width: 48px;
  height: 48px;
}

#social-blade .social-links-container--blue .social-icon:hover span {
  width: 30px;
  height: 30px;
  background-size: cover;
}

#social-blade .social-links-container--blue .social-icon span {
  margin-top: 8px;
  width: 30px;
  height: 30px;
  background-size: cover;
  left: 0;
  right: 0;
  margin: auto;
}

#social-blade .social-links-container--blue .social-icon span.social-icon--twitter {
  margin-top: 10px;
}

.social-block {
  background: #FFFFFF;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  margin-bottom: 24px;
  display: none;
}

@media (min-width: 600px) {
  .social-block {
    width: calc(50% - 24px);
  }
}

@media (min-width: 1024px) {
  .social-block {
    width: calc(33.33% - 24px);
  }
}

@media (min-width: 1280px) {
  .social-block {
    width: calc(25% - 24px);
  }
}

.social-block a {
  text-decoration: none;
}

.social-block a:hover {
  background: none;
}

.social-block__media {
  width: 100%;
}

.social-block__container {
  display: flex;
  padding: 16px;
  justify-content: space-between;
  align-content: center;
}

.social-block__text {
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-block__handle {
  display: flex;
  align-items: center;
}

.social-block__handle img {
  margin-right: 8px;
  border-radius: 30px;
}

.social-block__handle,
.social-block__timestamp {
  color: #666;
  line-height: 20px;
}

.social-block__handle strong,
.social-block__timestamp strong {
  color: #000000;
}

.social-block__info {
  padding: 16px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: visible;
}

.emergency-alert {
  background-color: #FFFFFF;
  border: 8px solid #D60000;
}

.emergency-alert .wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 38px auto 4px;
}

@media only screen and (max-width: 1280px) {
  .emergency-alert .wrapper {
    padding: 0 25px;
  }
}

.emergency-alert .wrapper .h2 {
  font-size: 2rem;
  line-height: 1.6875rem;
  color: #D60000;
  margin-bottom: 4px;
  display: block;
}

.emergency-alert .wrapper p {
  font-size: 1rem;
  line-height: 1.5rem;
}

.emergency-alert .wrapper a {
  color: #D60000;
}

.emergency-alert .wrapper a:hover {
  background: none;
}

@media only screen and (max-width: 768px) {
  .emergency-alert .wrapper .col {
    width: 100%;
  }
}

.emergency-takeover {
  background-color: #FFFFFF;
  border: 8px solid #D60000;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 34px;
  margin-top: 42px;
  margin-bottom: 50px;
}

.emergency-takeover.nondangerous.blue {
  border-color: #8bb8e8;
}

.emergency-takeover.warning.orange {
  border-color: #f57f17;
}

.emergency-takeover.warning.yellow {
  border-color: #fdc031;
}

.emergency-takeover .col.title {
  padding-top: 24px;
  color: #D60000;
}

.emergency-takeover .col.title,
.emergency-takeover .col.body {
  padding-left: 50px;
}

.emergency-takeover .col.lead {
  padding-left: 50px;
  padding-right: 50px;
  margin-bottom: 28px;
}

@media only screen and (max-width: 1024px) {
  .emergency-takeover .col {
    width: 100%;
    margin: 0;
  }

  .emergency-takeover .col.title,
  .emergency-takeover .col.body {
    padding-right: 50px;
  }

  .emergency-takeover .col.title h1,
  .emergency-takeover .col.body h1 {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 768px) {
  .emergency-takeover .col.title h1,
  .emergency-takeover .col.body h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 25px;
  }

  .emergency-takeover .col.title p,
  .emergency-takeover .col.body p {
    margin-bottom: 15px;
  }
}

.emergency-takeover .information {
  background: #E5E5E5;
  margin: 0 46px;
  padding: 28px 50px 50px;
}

.emergency-takeover .information h3 {
  margin-bottom: 20px;
  padding-top: 20px;
}

.emergency-takeover .information p,
.emergency-takeover .information li,
.emergency-takeover .information strong {
  font-size: 1rem;
  line-height: 1.5rem;
}

.emergency-takeover .information .red {
  color: #D60000;
}

.emergency-takeover .information a {
  color: #D60000;
}

.emergency-takeover .information a:hover {
  background: none;
}

.emergency-takeover .information ol {
  margin: 0;
  padding: 0;
}

.emergency-takeover .information li {
  margin-left: 26px;
  counter-increment: li;
  position: relative;
  line-height: 2rem;
  list-style: none;
}

.emergency-takeover .information li::before {
  content: counter(li) ". ";
  color: #2774AE;
  display: block;
  position: absolute;
  left: -26px;
}

.emergency-takeover .information li::marker {
  display: none;
}

.emergency-confirm {
  padding: 10px;
  background-color: #F9FFBA;
  text-align: center;
}

.emergency-confirm .alert {
  width: 35%;
  margin: auto;
  font-size: 0.6875rem;
  padding: 8px 35px 8px 14px;
  color: #D60000;
  background: #F7CCCC;
  border: 1px solid #D60000;
}

.emergency-confirm .alert .label {
  background-color: #D60000;
  color: #FFFFFF;
  padding: 1px 4px 2px;
  font-weight: bold;
  font-size: 0.6875rem;
  line-height: 0.8125rem;
  position: relative;
  top: -1px;
  border-radius: 3px;
}

.emergency-confirm p {
  font-size: 1.4rem;
  line-height: 1.4rem;
  margin: 0 0 16px;
}

.emergency-confirm h3 {
  font-size: 1.25rem;
  line-height: 1.2rem;
  color: #2774AE;
  font-weight: 300;
  margin-bottom: 10px;
}

.emergency-confirm .btn {
  padding: 4px 10px 4px;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  cursor: pointer;
  text-decoration: none;
  background-color: #8BB8E8;
  color: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
}

.emergency-confirm .btn::after {
  background: none;
}

.emergency-confirm .btn:hover {
  background: #8BB8E8;
}

.emergency-confirm .btn:hover::after {
  background: none;
}

.emergency-confirm .btn-danger {
  background-color: #D60000;
  color: #FFFFFF;
}

.emergency-confirm .btn-danger:hover {
  background: #D60000;
}

.emergency-confirm #cancel_button {
  padding: 5px 10px;
}

.emergency-banner-wrapper {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 24px;
}

.emergency-banner-wrapper .alert {
  padding-top: 0;
  padding-bottom: 0;
  max-width: 1176px;
  margin-left: auto;
  margin-right: auto;
  border-width: 3px;
}

.emergency-banner-wrapper .alert.alert--warning2 {
  border-color: #fdc031;
}

.emergency-banner-wrapper .alert img {
  margin-top: 16px;
}

.featured {
  background-color: #F2F2F2;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  margin-bottom: 32px;
  padding-bottom: 20px;
  /***************
    .story__featured__tier1 is the top story that appears first, above the secondary stories.
    On mobile, the entire story card has 100% viewport width.
    On desktop, the story title, description, and source appear in a white overlay above the image.
  ****************/
  /***************
  .story__featured__tier2 include the secondary stories that appear below the top tier1 story.
  On mobile, all stories appear in one column, stacked.
  On desktop, stories appear in a 1x3 grid.
  ****************/
}

@media (min-width: 768px) {
  .featured {
    background: none;
    margin-bottom: 64px;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .featured {
    background: linear-gradient(to top, #F2F2F2 51.6%, #FFFFFF 42%);
  }
}

@media (min-width: 1280px) {
  .featured .ucla.campus {
    margin: 0px auto;
  }
}

@media (min-width: 1024px) {
  .featured .slick-dots {
    visibility: hidden;
  }
}

.featured .clear {
  clear: both;
}

.featured__view-more {
  color: #00598C;
  display: block;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 10px;
  text-align: center;
}

@media (min-width: 768px) {
  .featured__view-more {
    position: absolute;
    top: 70px;
    right: 36px;
  }
}

@media (min-width: 1024px) {
  .featured__view-more {
    right: 20px;
  }
}

.featured__view-more a {
  text-decoration: none;
}

.featured__view-more a:not(.page):visited {
  color: #00598C;
}

.featured__view-more a:not(.page):visited:hover {
  color: #FFFFFF;
}

.featured__wrapper {
  position: relative;
}

.featured__title {
  font-size: 32px;
  line-height: 1.69rem;
  margin: 43px 0px 32px;
  padding: 0px;
  /*&::before {
      margin-right: 8px;
      content: "";
    }*/
}

@media (min-width: 768px) {
  .featured__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin: 48px 0px 15px;
    padding: 10px 0;
  }
}

@media (min-width: 1024px) {
  .featured__title {
    height: 200px;
    margin-left: 0;
    padding: 0 0 0 0px;
    position: absolute;
    z-index: 1;
  }
}

.featured .story {
  padding: 0;
}

.featured .story .story__featured {
  background-color: #FFFFFF;
  margin: 0 -24px;
}

@media (min-width: 768px) {
  .featured .story .story__featured {
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .featured .story .story__featured {
    padding-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  .featured .story__featured__tier1 .story__featured-card .story__featured-image {
    margin-top: 124px;
    width: 675px;
    height: auto;
  }
}

@media (min-width: 1024px) {
  .featured .story__featured__tier1 .story__featured-card .story__featured-title {
    font-size: 36px;
    line-height: 40px;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
}

.featured .story__featured__tier1 .story__featured-card .story__featured-title .link:not(.page):visited {
  color: #00598C;
}

.featured .story__featured__tier1 .story__featured-card .story__featured-title .link:not(.page):visited:hover {
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .featured .story__featured__tier1 .story__featured-card .story__featured-date {
    color: #666;
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    padding-bottom: 0;
    margin-bottom: 8px;
  }
}

@media (min-width: 1024px) {
  .featured .story__featured__tier1 .story__featured-card .story__featured-blurb {
    color: #333;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
}

@media (min-width: 1024px) {
  .featured .story__featured__tier1 .story__featured-card .story__featured-source {
    font-size: 14px;
    line-height: 18px;
  }
}

.featured .story__featured__tier1 .story__featured-content {
  margin: 0 10px;
  padding: 24px 14px;
}

@media (min-width: 768px) {
  .featured .story__featured__tier1 .story__featured-content {
    margin: 0 15px;
    padding: 32px 32px;
    top: -36px;
  }
}

@media (min-width: 1024px) {
  .featured .story__featured__tier1 .story__featured-content {
    transform: none;
    top: 176px;
  }
}

.featured .story__featured__tier1 .story__featured-content .story__featured-source {
  padding-bottom: 0;
}

.featured .story__featured__tier1 .story__featured-content .story__featured-source a {
  text-decoration: none;
}

.featured .story__featured__tier1 .story__featured-content .story__featured-source a:not(.page):visited {
  color: #00598C;
}

.featured .story__featured__tier1 .story__featured-content .story__featured-source a:not(.page):visited:hover {
  color: #FFFFFF;
}

.featured .story__featured__tier2.story__secondary {
  background: #F2F2F2;
  margin: 0 -24px;
  padding: 0 24px;
}

@media (min-width: 1024px) {
  .featured .story__featured__tier2.story__secondary {
    background: none;
  }
}

.featured .story__featured__tier2.story__secondary a:visited {
  color: #00598C;
}

.featured .story__featured__tier2.story__secondary a:visited:hover {
  color: #FFFFFF;
}

.featured .story__featured__tier2.story__secondary #featured-slider {
  top: -24px;
}

.featured .story__featured__tier2.story__secondary #featured-slider #featured-slider-track .story__secondary-card {
  height: 100%;
  min-width: 0;
  max-width: none;
}

.featured .story__featured__tier2.story__secondary #featured-slider #featured-slider-track .story__secondary-card .story__secondary-card-link {
  display: block;
}

.featured .story__featured__tier2.story__secondary #featured-slider #featured-slider-track .story__secondary-card .story__secondary-card-link.source {
  display: inline;
}

.featured .story__featured__tier2.story__secondary #featured-slider #featured-slider-track .story__secondary-card .story__secondary-card-link:hover,
.featured .story__featured__tier2.story__secondary #featured-slider #featured-slider-track .story__secondary-card .story__secondary-card-link:active,
.featured .story__featured__tier2.story__secondary #featured-slider #featured-slider-track .story__secondary-card .story__secondary-card-link:focus {
  background-color: transparent;
}

.featured .story__featured__tier2.story__secondary #featured-slider #featured-slider-track .story__secondary-card .story__secondary-card-link .story__secondary-card-date {
  background-color: #FFF;
  position: relative;
}

.featured .story__featured__tier2.story__secondary #featured-slider .splide__slider {
  margin-bottom: 30px;
  overflow: hidden;
  transition: height 500ms ease 0s;
}

@media (min-width: 1024px) {
  .featured .story__featured__tier2.story__secondary #featured-slider .splide__slider {
    margin-bottom: 90px;
  }
}

.featured .story__featured__tier2.story__secondary #featured-slider .splide__pagination {
  padding: 0;
  width: 100%;
}

.featured .story__featured__tier2.story__secondary #featured-slider .splide__pagination li {
  margin: 0 2px;
}

.featured .story__featured__tier2.story__secondary #featured-slider .splide__pagination li button.splide__pagination__page {
  border-color: #CCC;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding: 0;
}

@media (min-width: 1024px) {
  .featured .story__featured__tier2.story__secondary #featured-slider .splide__pagination {
    display: none;
  }
}

/****

Stylesheet for the Search Results page (see resources/views/search.blade.php)
These styles overwrite the default styles of Google Custom Search results.

The order of the classes go from highest in the DOM to more specific classes.

*****/

#search-results {
  /*
  .gsc-control-cse is another Search Results container. The following styles aligns the dynamically generated search results content with the rest of the site. Also, makes the border and background colors transparent so that they don't affect the molecule graphic.
  */
  /*
  .gsc-above-wrapper-area is the container for total number of results info and Sort by drop-down that appear above the search results content
  */
  /*
  .gsc-wrapper is the container for the content appearing below the gray horizontal divider, including search results generated by Google and the pagination
  */
}

#search-results .gsc-control-cse {
  padding: 0;
  border-color: transparent;
  background-color: transparent;
}

#search-results .gsc-above-wrapper-area {
  border-bottom: none;
}

#search-results .gsc-above-wrapper-area tr {
  display: flex;
  flex-direction: column-reverse;
  height: auto !important;
}

@media (min-width: 768px) {
  #search-results .gsc-above-wrapper-area tr {
    display: table-row;
  }
}

@media (max-width: 599px) {
  #search-results .gsc-above-wrapper-area tr td {
    display: block;
  }
}

#search-results .gsc-above-wrapper-area tr td.gsc-result-info-container {
  height: auto !important;
}

#search-results .gsc-above-wrapper-area tr td.gsc-orderby-container {
  margin-bottom: 20px;
  text-align: left;
}

@media (min-width: 768px) {
  #search-results .gsc-above-wrapper-area tr td.gsc-orderby-container {
    margin-bottom: 0;
    text-align: right;
  }
}

#search-results .gsc-above-wrapper-area tr td.gsc-orderby-container .gsc-orderby {
  position: relative;
  top: 0px;
}

@media (min-width: 768px) {
  #search-results .gsc-above-wrapper-area tr td.gsc-orderby-container .gsc-orderby {
    top: -37px;
  }
}

#search-results .gsc-above-wrapper-area .gsc-result-info,
#search-results .gsc-above-wrapper-area .gsc-orderby-label {
  color: #333;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-left: 0;
}

#search-results .gsc-above-wrapper-area .gsc-selected-option-container {
  background-color: #EBEBEB;
  background-image: none;
  border: 1px solid #808080;
  border-radius: 2px;
  box-shadow: none;
  color: #333;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.25rem;
  height: 40px;
  width: 180px;
  max-width: 100%;
  padding: 8px 30px 10px 15px;
  margin-left: 16px;
  text-align: left;
}

@media (min-width: 1024px) {
  #search-results .gsc-above-wrapper-area .gsc-selected-option-container {
    padding: 7px 40px 9px 15px;
    width: 276px;
  }
}

#search-results .gsc-above-wrapper-area .gsc-selected-option-container .gsc-option-selector {
  background: url("../img/arrow-down.svg") center no-repeat;
  height: 18px;
  width: 18px;
  right: 10px;
  top: 14px;
}

#search-results .gsc-above-wrapper-area .gsc-option-menu {
  top: 38px !important;
  border: 1px solid #808080;
  border-top: 0;
  font-size: 0.75rem;
  line-height: 1.5rem;
  padding: 0;
  width: 180px;
}

@media (min-width: 1024px) {
  #search-results .gsc-above-wrapper-area .gsc-option-menu {
    width: 276px;
    font-size: 1rem;
  }
}

#search-results .gsc-above-wrapper-area .gsc-option-menu .gsc-option-menu-item {
  padding: 0 16px 0 21px;
  color: #333;
}

#search-results .gsc-above-wrapper-area .gsc-option-menu .gsc-option-menu-item:hover {
  background-color: #00598C;
  color: #FFFFFF;
  border: none;
}

@media (min-width: 1024px) {
  #search-results .gsc-above-wrapper-area .gsc-option-menu .gsc-option-menu-item {
    padding-left: 27px;
  }
}

#search-results .gsc-above-wrapper-area .gsc-option-menu .gsc-option-menu-item-highlighted {
  background-color: transparent;
}

#search-results .gsc-above-wrapper-area .gsc-option-menu .gsc-option-menu-item-highlighted::before {
  content: '';
  display: block;
  width: 6px;
  height: 12px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin: 4px 5px 0 -12px;
  float: left;
}

@media (min-width: 1024px) {
  #search-results .gsc-wrapper {
    width: 66%;
  }
}

#search-results .gsc-wrapper .gsc-result {
  border: none;
  border-bottom: 1px solid #CCC;
  padding: 0 0 20px 0;
  margin-bottom: 30px;
}

#search-results .gsc-wrapper .gsc-result .gs-spelling {
  display: none;
  padding: 0;
  color: #333;
}

#search-results .gsc-wrapper .gsc-result .gs-spelling:first-child {
  margin-bottom: 4px;
}

#search-results .gsc-wrapper .gsc-result .gs-spelling-original {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 20px 0 15px;
}

#search-results .gsc-wrapper .gsc-result .gs-spelling-original a {
  display: inline !important;
  text-decoration: underline;
}

#search-results .gsc-wrapper .gsc-result .gs-spelling-original a b {
  font-weight: normal;
}

#search-results .gsc-wrapper .gsc-result .gs-spelling-original a i {
  font-style: normal;
}

#search-results .gsc-wrapper .gsc-result .gs-result .gs-web-image-box {
  float: none;
  width: auto;
}

@media (min-width: 768px) {
  #search-results .gsc-wrapper .gsc-result .gs-result .gs-web-image-box {
    float: left;
  }
}

#search-results .gsc-wrapper .gsc-result .gs-result .gs-web-image-box.gs-web-image-box-landscape a.gs-image img {
  max-width: none;
  width: 180px;
}

#search-results .gsc-wrapper .gsc-result .gs-result .gs-web-image-box.gs-web-image-box-portrait a.gs-image img {
  max-width: 180px;
  width: auto;
}

#search-results .gsc-wrapper .gsc-result .gs-result a {
  color: #00598C;
  display: block;
}

#search-results .gsc-wrapper .gsc-result .gs-result a:hover {
  color: #FFFFFF;
  background-color: #0079BF;
}

#search-results .gsc-wrapper .gsc-result .gs-result a.gs-image {
  border: none;
  height: auto;
  max-height: none;
  max-width: none;
  width: auto;
}

#search-results .gsc-wrapper .gsc-result .gs-result a.gs-image:hover,
#search-results .gsc-wrapper .gsc-result .gs-result a.gs-image:active,
#search-results .gsc-wrapper .gsc-result .gs-result a.gs-image:focus {
  background-color: transparent;
}

#search-results .gsc-wrapper .gsc-result .gs-result a.gs-image img {
  border: none;
  display: inline-block;
  height: 120px;
  margin-bottom: 15px;
  max-height: none;
  max-width: none;
  -o-object-fit: contain;
     object-fit: contain;
  width: 180px;
}

@media (min-width: 768px) {
  #search-results .gsc-wrapper .gsc-result .gs-result a.gs-image img {
    display: block;
    margin-bottom: 0;
  }
}

#search-results .gsc-wrapper .gsc-result .gs-result .gsc-thumbnail-inside {
  padding-left: 0;
}

#search-results .gsc-wrapper .gsc-result .gs-result .gs-title {
  margin-bottom: 5px;
  line-height: 28px;
  min-height: 0;
}

#search-results .gsc-wrapper .gsc-result .gs-result a.gs-title,
#search-results .gsc-wrapper .gsc-result .gs-result a.gs-title * {
  font-size: 24px;
  font-weight: bold;
}

#search-results .gsc-wrapper .gsc-result .gs-result .gsc-url-top {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 20px;
  padding-left: 0;
}

#search-results .gsc-wrapper .gsc-result .gs-result .gsc-url-top .gs-visibleUrl {
  color: #777;
}

#search-results .gsc-wrapper .gsc-result .gs-result .gsc-table-result {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 0;
}

#search-results .gsc-wrapper .gsc-result .gs-result .gsc-table-result .gs-web-image-box {
  padding: 0;
  text-align: left;
}

@media (min-width: 768px) {
  #search-results .gsc-wrapper .gsc-result .gs-result .gsc-table-result .gs-web-image-box {
    margin-right: 30px;
    text-align: center;
  }
}

#search-results .gsc-wrapper .pagination-container {
  margin-top: 30px;
  text-align: center;
}

@media (min-width: 768px) {
  #search-results .gsc-wrapper .pagination-container {
    margin-top: 60px;
    text-align: left;
  }
}

#search-results .gsc-wrapper .pagination-container .arrow-left,
#search-results .gsc-wrapper .pagination-container .arrow-right {
  display: none;
}

#search-results .gsc-wrapper .gcsc-find-more-on-google-root,
#search-results .gsc-wrapper .gcsc-branding,
#search-results .gsc-wrapper .gcsc-branding-text:not(.gcsc-branding-text-name) {
  display: none;
}

#search-results .gsc-wrapper .gsc-cursor-box {
  border: none;
  display: inline;
  height: 29px;
  margin: 0;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-page {
  border: none;
  color: #00598C;
  font-size: 1rem;
  padding: 10px 7px;
  margin-right: 1px;
}

@media (min-width: 768px) {
  #search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-page {
    padding: 10px 14px;
  }
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-page:hover {
  background-color: #0079BF;
  color: #FFFFFF;
  text-decoration: none;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-page:active {
  background-color: #003B5C;
  color: #FFFFFF;
  text-decoration: none;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-page:focus {
  background-color: #0079BF;
  color: #FFFFFF;
  text-decoration: none;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page {
  color: #757575;
  cursor: default;
  font-weight: normal;
  pointer-events: none;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-previous,
#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-next {
  padding: 0;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-previous .gsc-cursor-chevron,
#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-next .gsc-cursor-chevron {
  border: 2px solid #00598C;
  border-radius: 2px;
  fill: #00598C;
  height: 40px;
  padding: 12px;
  width: 40px;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-previous:hover .gsc-cursor-chevron,
#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-next:hover .gsc-cursor-chevron {
  border-color: #0079BF;
  fill: #0079BF;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-previous:active .gsc-cursor-chevron,
#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-next:active .gsc-cursor-chevron {
  border-color: #003B5C;
  fill: #003B5C;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-previous:focus .gsc-cursor-chevron,
#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-container-next:focus .gsc-cursor-chevron {
  border-color: #0079BF;
  fill: #0079BF;
}

#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-previous-page,
#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-next-page,
#search-results .gsc-wrapper .gsc-cursor-box .gsc-cursor-numbered-page {
  color: #999;
  font-size: 15px;
  font-weight: bold;
}

#search-results .gsc-wrapper a[target="_blank"]::after {
  content: '';
}

#search.internal main .section-wrapper {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 32px;
}

@media (min-width: 768px) {
  #search.internal main .section-wrapper {
    padding-bottom: 60px;
  }
}

#search.internal main .section-wrapper > ::before {
  display: none;
}

#search.internal main .section-wrapper.results {
  padding-top: 32px;
  padding-bottom: 30px;
  border-top: 1px solid #CCCCCC;
}

@media (min-width: 768px) {
  #search.internal main .section-wrapper.results {
    padding-top: 66px;
    padding-bottom: 66px;
  }
}

#search .gsc-adBlock {
  display: none;
}

#search .gsc-above-wrapper-area {
  border-bottom: none;
  display: block !important;
}

#search #search-results .keyword {
  font-size: 24px;
  color: #333;
  letter-spacing: 0;
  line-height: 30px;
  margin-bottom: 15px;
  display: block;
}

@media (min-width: 768px) {
  #search #search-results .keyword {
    margin-bottom: 0;
  }
}

#search #search-results .keyword a {
  border-bottom: 2px solid #00598C;
  display: inline-block;
  height: 25px;
  text-decoration: none;
}

#search #search-results .keyword a:visited,
#search #search-results .keyword a:not(.page):visited {
  color: #00598C;
}

#search #search-results .keyword a:visited:hover,
#search #search-results .keyword a:visited:active,
#search #search-results .keyword a:visited:focus,
#search #search-results .keyword a:not(.page):visited:hover,
#search #search-results .keyword a:not(.page):visited:active,
#search #search-results .keyword a:not(.page):visited:focus {
  color: #FFFFFF;
}

#search .gcsc-more-maybe-branding-root {
  display: none;
}

.survey-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #333;
  opacity: 0.9;
  z-index: 2;
}

/*

If given a link to a video for the hero button, be sure to add "fancybox" to the classes for anchor tag and change the href attribute to the video link.
Also insert the play-button svg before the button text.

Example HTML structure:

<a class="copy__cta fancybox" href="https://www.youtube.com/watch?v=Kh0Y2hVe_bw" data-width="1128" data-height="634">
  <button class="copy__cta-button btn primary-blue">
    <img src="/img/play-button.svg" alt="">
    <span class="copy__cta-button-text">Watch the Video</span>
  </button>
</a>

See resources/views/inc/homepage/hero.blade.php, lines 13-18.

For additional documentation see: https://fancyapps.com/fancybox/3/

*/

.fancybox-container.fancybox-is-open .fancybox-toolbar {
  max-width: 100%;
  margin: 0 auto;
  margin-top: -20px;
  margin-bottom: 20px;
  position: relative;
  height: 40px;
}

@media (min-width: 1280px) {
  .fancybox-container.fancybox-is-open .fancybox-toolbar {
    max-width: 1128px;
  }
}

.fancybox-container.fancybox-is-open .fancybox-button--close {
  background: transparent;
  border: solid #CCCCCC 2px;
  border-radius: 2px;
  height: 40px;
  width: 40px;
  right: 0;
  position: absolute;
  vertical-align: middle;
}

.fancybox-container.fancybox-is-open .fancybox-button--close svg {
  width: 26px;
  right: 5px;
}

.fancybox-container.fancybox-is-open .fancybox-slide {
  height: inherit;
}

.fancybox-container.fancybox-is-open {
  height: 100%;
}

.fancybox-container.fancybox-is-open .fancybox-slide {
  max-height: 100%;
}

.fancybox-container.fancybox-is-open #fancybox-admission-takeover {
  padding: 0px;
  background: url("../img/UCLA_ImagePopUpBackground-1.png") 0 0 no-repeat;
  background-size: cover;
  border: 10px solid #FFFFFF;
  overflow: hidden;
}

@media (min-width: 768px) {
  .fancybox-container.fancybox-is-open #fancybox-admission-takeover {
    padding: 44px;
    margin-top: 50px;
  }
}

.fancybox-container.fancybox-is-open #fancybox-admission-takeover .fancybox-content {
  background: none;
}

.fancybox-container.fancybox-is-open #fancybox-admission-takeover .fancybox-close-small {
  background: #FFFFFF;
  opacity: 1;
  top: -10px;
  right: -10px;
}

body.fancybox-active,
html.fancybox {
  overflow: hidden;
}

/*******

Social Icons

The social icons are included within the footer. See views/inc/footer.blade.php

The HTML structure consists of:

I. Main Div and Nav

<div class="section group social">
  <nav class="col span_12_of_12 social__icons" aria-label="Social links">
    CONTENT FROM II BETWEEN
  </nav>
</div>

II. Anchor links with SVG (SVG Provided by Stevie)

<a class="social__link" href="URL">
  <svg ATTRIBUTES <title>TITLE FOR ADA</title></svg>
</a>

<div class="section group social">
  <nav class="col span_12_of_12 social__icons" aria-label="Social links">
    <a class="social__link" href="http://www.facebook.com/UCLA">
      SVG image generally created by Stevie. Properties set within SGV were added to be compliant with ADA standards
    </a>
    // SUBSEQUENT SOCIAL MEDIA ICONS MAY BE ADDED //

EXAMPLE

// Main Div and Nav
<div class="section group social">
  <nav class="col span_12_of_12 social__icons" aria-label="Social links">

    // Anchor link with SGV
    <a class="social__link" href="http://www.facebook.com/UCLA">
      <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="icon-facebook" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Desktop-(XL)-facebook" transform="translate(-524.000000, -5242.000000)"><g id="footer-facebook" transform="translate(1.000000, 4794.000000)"><g id="Social-Icons-facebook" transform="translate(515.000000, 440.000000)"><g id="Icon/Facebook"><rect id="Container-facebook" x="0" y="0" width="48" height="48"></rect><path d="M30.0793333,40 L30.0793333,27.608 L34.239,27.608 L34.8616667,22.7783333 L30.0793333,22.7783333 L30.0793333,19.695 C30.0793333,18.2966667 30.4676667,17.344 32.4726667,17.344 L35.0303333,17.3426667 L35.0303333,13.0233333 C34.5876667,12.9646667 33.0696667,12.833 31.3036667,12.833 C27.6163333,12.833 25.0923333,15.0836667 25.0923333,19.2166667 L25.0923333,22.7783333 L20.922,22.7783333 L20.922,27.608 L25.0923333,27.608 L25.0923333,40 L30.0793333,40 Z M9.766,40 C8.79033333,40 8,39.209 8,38.234 L8,9.766 C8,8.79033333 8.79033333,8 9.766,8 L38.2336667,8 C39.209,8 40,8.79033333 40,9.766 L40,38.234 C40,39.209 39.209,40 38.2336667,40 L9.766,40 Z" id="Shape-facebook" fill="#FFFFFF" fill-rule="evenodd"></path></g></g></g></g></g><title>UCLA Facebook</title></svg>
    </a>
    // Another Anchor link with SGV
    <a class="social__link" href="http://www.instagram.com/ucla">
      <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="icon-instagram" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Desktop-(XL)-instagram" transform="translate(-596.000000, -5242.000000)"><g id="footer-instagram" transform="translate(1.000000, 4794.000000)"><g id="Social-Icons-instagram" transform="translate(515.000000, 440.000000)"><g id="Icon/Instagram" transform="translate(72.000000, 0.000000)"><rect id="Container-instgram" x="0" y="0" width="48" height="48"></rect><path d="M24,8 C28.34528,8 28.89024,8.01856 30.5968,8.09632 C32.29984,8.17376 33.46272,8.44448 34.48064,8.84 C35.5328,9.24896 36.42496,9.79584 37.31456,10.68544 C38.20416,11.57504 38.75136,12.4672 39.16,13.51936 C39.55552,14.53728 39.82592,15.70016 39.90368,17.4032 C39.98144,19.10976 40,19.65472 40,24 C40,28.34528 39.98144,28.89024 39.90368,30.5968 C39.82592,32.29984 39.55552,33.46272 39.16,34.48064 C38.75136,35.5328 38.20416,36.42496 37.31456,37.31456 C36.42496,38.20416 35.5328,38.75104 34.48064,39.16 C33.46272,39.55552 32.29984,39.82624 30.5968,39.90368 C28.89024,39.98144 28.34528,40 24,40 C19.65472,40 19.10976,39.98144 17.4032,39.90368 C15.70016,39.82624 14.53728,39.55552 13.51936,39.16 C12.4672,38.75104 11.57504,38.20416 10.68544,37.31456 C9.79584,36.42496 9.24864,35.5328 8.84,34.48064 C8.44448,33.46272 8.17408,32.29984 8.09632,30.5968 C8.01856,28.89024 8,28.34528 8,24 C8,19.65472 8.01856,19.10976 8.09632,17.4032 C8.17408,15.70016 8.44448,14.53728 8.84,13.51936 C9.24864,12.4672 9.79584,11.57504 10.68544,10.68544 C11.57504,9.79584 12.4672,9.24896 13.51936,8.84 C14.53728,8.44448 15.70016,8.17376 17.4032,8.09632 C19.10976,8.01856 19.65472,8 24,8 Z M24,10.88288 C19.72768,10.88288 19.22176,10.8992 17.53472,10.976 C15.97472,11.04736 15.12736,11.30784 14.56384,11.52704 C13.81696,11.81728 13.28384,12.16416 12.72416,12.72384 C12.16416,13.28384 11.81728,13.81696 11.52704,14.56352 C11.30816,15.12736 11.04704,15.97472 10.97632,17.53472 C10.8992,19.22176 10.88288,19.72768 10.88288,24 C10.88288,28.27232 10.8992,28.77824 10.97632,30.46528 C11.04704,32.02528 11.30816,32.87264 11.52704,33.43648 C11.81728,34.18304 12.16416,34.71616 12.72416,35.27616 C13.28384,35.83584 13.81696,36.18272 14.56384,36.47296 C15.12736,36.69216 15.97472,36.95264 17.53472,37.024 C19.22144,37.1008 19.72736,37.11712 24,37.11712 C28.27264,37.11712 28.77856,37.1008 30.46528,37.024 C32.02528,36.95264 32.87264,36.69216 33.43616,36.47296 C34.18304,36.18272 34.71616,35.83584 35.27584,35.27616 C35.83584,34.71616 36.18272,34.18304 36.47296,33.43648 C36.69184,32.87264 36.95296,32.02528 37.02368,30.46528 C37.1008,28.77824 37.11712,28.27232 37.11712,24 C37.11712,19.72768 37.1008,19.22176 37.02368,17.53472 C36.95296,15.97472 36.69184,15.12736 36.47296,14.56352 C36.18272,13.81696 35.83584,13.28384 35.27584,12.72384 C34.71616,12.16416 34.18304,11.81728 33.43616,11.52704 C32.87264,11.30784 32.02528,11.04736 30.46528,10.976 C28.77824,10.8992 28.27232,10.88288 24,10.88288 Z M24,29.33328 C26.9456,29.33328 29.33344,26.94544 29.33344,23.99984 C29.33344,21.05456 26.9456,18.66672 24,18.66672 C21.0544,18.66672 18.66656,21.05456 18.66656,23.99984 C18.66656,26.94544 21.0544,29.33328 24,29.33328 Z M24,15.78384 C28.53792,15.78384 32.21632,19.46224 32.21632,23.99984 C32.21632,28.53776 28.53792,32.21616 24,32.21616 C19.46208,32.21616 15.78368,28.53776 15.78368,23.99984 C15.78368,19.46224 19.46208,15.78384 24,15.78384 Z M34.460928,15.459232 C34.460928,16.519392 33.601088,17.379232 32.540928,17.379232 C31.480448,17.379232 30.620928,16.519392 30.620928,15.459232 C30.620928,14.398752 31.480448,13.539232 32.540928,13.539232 C33.601088,13.539232 34.460928,14.398752 34.460928,15.459232 Z" id="Shape-instagram" fill="#FFFFFF" fill-rule="evenodd"></path></g></g></g></g></g><title>UCLA Instagram</title></svg>
    </a>

  </nav>
</div>


See Social Icons in Footer for example
*******/

.social__icons {
  margin: 1.75rem 0 0 0;
  padding: 0 24px;
  text-align: left;
  line-height: 3rem;
}

@media (min-width: 480px) {
  .social__icons {
    padding-left: 20px;
  }
}

@media (min-width: 600px) {
  .social__icons {
    text-align: center;
  }
}

.social__link {
  font-size: 0.75rem;
  font-weight: 400;
  text-decoration: none;
}

.social__link svg {
  background: none;
  height: 2rem;
  margin: 0 1% !important;
  width: 1.75rem;
  fill: #FFFFFF;
}

.social__link path.facebook--brand {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #3D5A98;
}

.social__link:first-child svg {
  margin-left: 0;
}

.social__link:last-child svg {
  margin-right: 0;
}

.social__link:hover {
  background: none;
}

.social__link:hover svg path {
  fill: #0079BF;
}

.social__link:active {
  background: none;
}

.social__link:active svg path {
  fill: #003B5C;
}

.footer__ucla-contact {
  font-size: 0.75em;
  line-height: 1.25em;
}

@media only screen and (min-width: 768px) {
  .footer__ucla-contact {
    display: inline;
    padding-left: 26px;
  }
}

.department__logo {
  width: 75px;
}

.department__contact {
  margin: 0;
  padding: 0;
  font-size: 12.8px;
  line-height: 16px;
}

@media only screen and (min-width: 768px) {
  .department__contact {
    display: inline-block;
    vertical-align: top;
    margin-top: 11px;
  }
}

.department__contact.phone {
  display: block;
}

@media only screen and (min-width: 768px) {
  .department__contact.phone {
    margin-top: 0;
    display: inline-block;
  }
}

@media only screen and (min-width: 768px) {
  .department__contact.phone::before {
    display: inline-block;
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 1.5px;
    background: #FFFFFF;
    margin: 0 8px 3px;
  }
}

.department__contact.phone a {
  color: #FFFFFF;
  text-decoration: none;
}

.department__contact.phone a:hover,
.department__contact.phone a:visited {
  text-decoration: none;
  color: #FFFFFF;
}

.department__contact.phone a:focus {
  outline: 2px dotted #FFFFFF;
}

@media only screen and (min-width: 1024px) {
  .li-links {
    display: flex;
    justify-content: space-between;
  }
}

.li-links__header {
  text-transform: uppercase;
  text-transform: none;
}

.li-links__header,
.li-links__list {
  max-width: 124px;
}

@media only screen and (min-width: 480px) {
  .li-links__header,
  .li-links__list {
    max-width: 140px;
  }
}

@media only screen and (min-width: 600px) {
  .li-links__header,
  .li-links__list {
    max-width: 140px;
  }
}

@media only screen and (min-width: 768px) {
  .li-links__header,
  .li-links__list {
    max-width: 140px;
  }
}

@media only screen and (min-width: 1024px) {
  .li-links__header,
  .li-links__list {
    max-width: 100%;
  }
}

.li-links__container {
  width: 48%;
  float: left;
  padding-bottom: 30px;
}

@media only screen and (min-width: 768px) {
  .li-links__container {
    width: 33%;
  }
}

@media only screen and (min-width: 1024px) {
  .li-links__container {
    float: none;
    width: auto;
  }
}

.li-links__container:nth-child(odd) {
  clear: both;
}

@media only screen and (min-width: 768px) {
  .li-links__container:nth-child(odd) {
    clear: none;
  }
}

@media only screen and (min-width: 768px) {
  .li-links__container:nth-child(4n) {
    clear: both;
  }
}

@media only screen and (min-width: 1024px) {
  .li-links__container:nth-child(4n) {
    clear: none;
  }
}

@media only screen and (min-width: 480px) {
  .li-links__mobile-break {
    display: inline;
  }
}

@media only screen and (min-width: 600px) {
  .li-links__mobile-break {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .li-links__mobile-break {
    display: none;
  }
}

@media only screen and (min-width: 1280px) {
  .li-links__mobile-break {
    display: none;
  }
}

.global-foot .social-links-container {
  justify-content: flex-start;
  padding: 0;
  margin-left: -8px;
}

@media only screen and (min-width: 768px) {
  .global-foot .social-links-container {
    justify-content: center;
    margin-left: 0;
  }
}

.global-foot .social-links-container a {
  width: 32px;
  height: 32px;
}

@media only screen and (min-width: 768px) {
  .global-foot .social-links-container a {
    width: 40px;
    height: 40px;
  }
}

.global-foot .social-links-container a .social-icon--facebook,
.global-foot .social-links-container a .social-icon--twitter,
.global-foot .social-links-container a .social-icon--instagram,
.global-foot .social-links-container a .social-icon--linkedin,
.global-foot .social-links-container a .social-icon--snapchat,
.global-foot .social-links-container a .social-icon--tiktok,
.global-foot .social-links-container a .social-icon--youtube,
.global-foot .social-links-container a .social-icon--threads {
  width: 32px;
  height: 32px;
  background-size: cover;
}

@media only screen and (min-width: 768px) {
  .global-foot .social-links-container a .social-icon--facebook,
  .global-foot .social-links-container a .social-icon--twitter,
  .global-foot .social-links-container a .social-icon--instagram,
  .global-foot .social-links-container a .social-icon--linkedin,
  .global-foot .social-links-container a .social-icon--snapchat,
  .global-foot .social-links-container a .social-icon--tiktok,
  .global-foot .social-links-container a .social-icon--youtube,
  .global-foot .social-links-container a .social-icon--threads {
    width: 40px;
    height: 40px;
  }
}

.global-foot .social-links-container a .social-icon--twitter {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/x--brand.svg");
  display: block;
  content: "";
  background-size: cover;
}

.global-foot .social-links-container a .social-icon--threads {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/threads--brand.svg");
  display: block;
  content: "";
  background-size: cover;
}

.global-foot .social-links-container a:hover .social-icon--twitter {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/x--white.svg");
  display: block;
  content: "";
  background-size: cover;
}

.global-foot .social-links-container a:hover .social-icon--threads {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/threads--white.svg");
  display: block;
  content: "";
  background-size: cover;
}

.global-foot__legal {
  display: block;
  width: 100%;
  font-size: 13px;
}

.global-foot__legal--copyright {
  display: block;
  width: 225px;
  font-size: 13px;
  line-height: 18px;
}

@media only screen and (min-width: 768px) {
  .global-foot__legal--copyright {
    width: 100%;
    text-align: center;
  }
}

@media only screen and (min-width: 1024px) {
  .global-foot__legal--copyright {
    display: inline-block;
    width: 30%;
    text-align: left;
  }
}

.global-foot__legal--list {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

@media only screen and (min-width: 768px) {
  .global-foot__legal--list {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-top: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .global-foot__legal--list {
    float: right;
    width: 63%;
  }
}

.global-foot__legal--list-item {
  list-style: none;
  line-height: 32px;
}

.global-foot__legal--link {
  text-decoration: none;
  color: #2774AE;
  font-weight: bold;
}

#footer .email {
  padding: 34px 0 40px;
}

@media (min-width: 768px) {
  #footer .email {
    padding: 34px 0;
  }
}

#footer .li-links a:visited {
  color: #FFFFFF !important;
}

#footer .li-links a:visited:hover {
  color: #333 !important;
}

#footer .global-foot__legal--list a:visited {
  color: #2774AE;
}

#footer .global-foot__legal--list a:hover {
  color: #FFFFFF;
}

#footer .copy__link-a.dark {
  text-decoration: none;
  display: block;
}

@media only screen and (min-width: 768px) {
  #footer .copy__link-a.dark {
    display: inline-block;
  }
}

#footer .copy__link-a.dark:visited {
  color: #2774AE;
}

#footer .copy__link-a.dark:visited:hover {
  color: #FFFFFF;
}

h4.li-links__header {
  font-size: 16px;
}

.email {
  padding: 0;
}

.email__heading {
  margin-bottom: 0 !important;
  padding-bottom: 24px;
  text-transform: none;
}

@media (min-width: 1024px) {
  .email__heading {
    padding-bottom: 32px;
  }
}

@media (min-width: 1280px) {
  .email {
    padding: 0 10px;
  }
}

.email__container {
  background: #005587;
  padding: 24px;
  width: calc(100% - 24px);
  margin: 0 12px;
}

@media (min-width: 768px) {
  .email__container {
    margin: 0 36px;
    width: calc(100% - 72px);
  }
}

@media (min-width: 1024px) {
  .email__container {
    margin: 0;
    padding: 24px;
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .email__container {
    height: auto;
    padding: 24px 24px 24px 0;
    min-height: auto;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

.email__header {
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  .email__header {
    margin-bottom: 0;
    margin-right: 24px;
  }
}

@media (min-width: 1024px) {
  .email__header {
    margin-bottom: 11px;
    margin-top: 0;
  }
}

.email__header-text {
  margin-bottom: 18px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .email__header-text {
    margin-bottom: 27px;
  }
}

@media (min-width: 1024px) {
  .email__header-text {
    max-width: none;
    margin-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .email__header-text {
    padding: 0 10px 0 0;
  }
}

@media (min-width: 1280px) {
  .email__form {
    padding: 0 10px 0 0;
  }
}

.email__form-error-msg {
  color: #FFD100;
  display: none;
  font-size: 16px;
  line-height: 20px;
  margin: 0 0 30px;
  text-align: left;
}

.email__form-error-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../img/Error.svg") no-repeat 0 0;
  position: relative;
  top: 5px;
}

.email__form-success-msg {
  color: #FFFFFF;
  display: none;
  font-size: 16px;
  line-height: 20px;
  margin: 0 0 30px;
  text-align: left;
}

.email__form-success-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../img/Success.svg") no-repeat 0 0;
  position: relative;
  top: 5px;
}

.email__legal-text {
  color: #FFFFFF;
  font-size: 12.8px;
  line-height: 18px;
  padding-bottom: 0;
  text-align: left;
}

@media (min-width: 1024px) {
  .email__legal-text {
    text-align: left;
    width: 67%;
  }
}

.email__legal-link {
  text-decoration: underline;
  color: #FFFFFF;
}

.email__legal-link:focus {
  color: #FFFFFF;
  outline: 2px dotted #FFE500;
}

.email__legal-link:visited,
.email__legal-link:link,
.email__legal-link:not(.page):visited {
  color: #FFFFFF !important;
}

.email__legal-link:hover {
  background-color: #FFE500;
  color: #333;
}

.email__legal-link:active {
  background-color: #FFBF0F;
  color: #333;
  outline: none;
}

.email__input {
  display: block;
  padding: 0px;
  margin-bottom: 36px;
}

@media (min-width: 1024px) {
  .email__input {
    display: table-cell;
    margin-bottom: 0;
    padding: 0 12px;
    vertical-align: top;
  }
}

.email__input-text {
  padding: 12px 30px 10px 12px;
  width: 100%;
  height: 40px;
  border: none;
  font-size: 1rem;
  background-color: #FFFFFF;
  opacity: 1;
  border-radius: 2px;
  color: #000000;
  margin-top: 12px;
}

.email__input-text::-moz-placeholder {
  color: #CCCCCC;
}

.email__input-text:-ms-input-placeholder {
  color: #CCCCCC;
}

.email__input-text::placeholder {
  color: #CCCCCC;
}

.email__input-text:focus {
  outline: 2px dotted #FFFFFF;
  outline-offset: -3px;
}

.email__input-text.checked {
  background-image: url("../img/Success.svg") !important;
  background-repeat: no-repeat;
  background-size: auto !important;
  background-position: 96% 51%;
}

@media (min-width: 768px) {
  .email__input-text.checked {
    background-position: 98% 50%;
  }
}

.email__input-text.error {
  background-image: url("../img/Error.svg") !important;
  background-repeat: no-repeat;
  background-size: auto !important;
  background-position: 98% 50%;
  border: 2px solid #FFD100;
}

.email__input-submit {
  background-color: #FFD100;
  height: 40px;
  border: none;
  border-radius: 2px;
  color: #333;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  padding: 10px 16px 14px;
  text-align: center;
  text-decoration: none;
  margin-top: 0;
  max-width: 120px;
  width: 93px;
}

@media (min-width: 1024px) {
  .email__input-submit {
    max-width: none;
    position: relative;
    top: 28px;
  }
}

.email__input-submit:hover {
  background: #FFE500;
}

@media (hover: none) {
  .email__input-submit:hover {
    background: #FFD100;
  }
}

.email__input-submit:active {
  background-color: #FFBF0F;
}

.email__input-submit:focus {
  background-color: #FFE500;
}

.email__input-container {
  display: block;
  padding: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .email__input-container {
    padding-bottom: 6px;
    display: table;
  }
}

.email__input-row {
  display: block;
}

@media (min-width: 1024px) {
  .email__input-row {
    display: table-row;
  }
}

.email__input-label {
  color: #FFF;
  display: block;
  font-weight: normal;
}

.email__input-email {
  width: auto;
}

@media (min-width: 1024px) {
  .email__input-email {
    width: 28.32%;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .email__input-email input[type="text"] {
    max-width: 100%;
  }
}

.email__input-firstname {
  width: auto;
}

@media (min-width: 768px) {
  .email__input-firstname {
    width: 47.5%;
    display: inline-block;
    margin-right: 15px;
  }
}

@media (min-width: 1024px) {
  .email__input-firstname {
    width: 23.89%;
    display: table-cell;
  }
}

.email__input-lastname {
  width: auto;
}

@media (min-width: 768px) {
  .email__input-lastname {
    width: 50%;
    display: inline-block;
  }
}

@media (min-width: 1024px) {
  .email__input-lastname {
    width: 290px;
    display: table-cell;
  }
}

.email__input-zipcode {
  width: auto;
}

@media (min-width: 768px) {
  .email__input-zipcode {
    width: 47.5%;
    display: inline-block;
    margin-right: 15px;
  }
}

@media (min-width: 1024px) {
  .email__input-zipcode {
    display: table-cell;
    width: 12.04%;
  }
}

.email__input-zipcode input[name="Zip"] {
  clear: both;
  max-width: none;
}

.email__input-button {
  width: auto;
  padding-right: 0;
  position: relative;
  margin-bottom: 28px;
}

@media (min-width: 1024px) {
  .email__input-button {
    width: 11.53%;
    margin-bottom: 0;
  }
}

.email__input-loading {
  position: absolute;
  bottom: 17px;
  left: 9px;
  display: none;
}

.email__input-loading.show {
  display: block;
}

@media (min-width: 1024px) {
  .email__input-loading.show {
    left: 16px;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

.poll .slido-poll {
  min-height: 1030px;
}

@media (min-width: 600px) {
  .poll .slido-poll {
    min-height: 865px;
  }
}

@media (min-width: 768px) {
  .poll .slido-poll {
    min-height: 865px;
  }
}

@media (min-width: 1024px) {
  .poll .slido-poll {
    min-height: 1000px;
  }
}

@-webkit-keyframes fall {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    top: 100vh;
    opacity: 1;
  }
}

@keyframes fall {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    top: 100vh;
    opacity: 1;
  }
}

@-webkit-keyframes sway {
  0% {
    margin-left: 0;
  }

  25% {
    margin-left: 50px;
  }

  50% {
    margin-left: -50px;
  }

  75% {
    margin-left: 50px;
  }

  100% {
    margin-left: 0;
  }
}

@keyframes sway {
  0% {
    margin-left: 0;
  }

  25% {
    margin-left: 50px;
  }

  50% {
    margin-left: -50px;
  }

  75% {
    margin-left: 50px;
  }

  100% {
    margin-left: 0;
  }
}

#holiday-container {
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 500ms;
  width: 100%;
  pointer-events: none;
}

.holiday-item {
  -webkit-animation: fall ease-in infinite, sway ease-in-out infinite;
          animation: fall ease-in infinite, sway ease-in-out infinite;
  background: #fefefe;
  width: 10px;
  height: 10px;
  -moz-filter: drop-shadow(0 0 10px #efefef) blur(1px);
  -o-filter: drop-shadow(0 0 10px #efefef) blur(1px);
  -ms-filter: drop-shadow(0 0 10px #efefef) blur(1px);
  filter: drop-shadow(0 0 10px #efefef) blur(1px);
  border-radius: 50%;
  position: absolute;
  z-index: 999;
}

#fireworks-container {
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 40;
}

/*******
Vote Blade
*******/

#vote {
  background-color: #FFFFFF;
}

#vote img {
  max-width: 100%;
  display: block;
}

#vote img.desktop {
  display: none;
}

@media (min-width: 767.98px) {
  #vote img.desktop {
    display: block;
  }
}

#vote img.mobile {
  display: block;
  width: 100%;
}

@media (min-width: 767.98px) {
  #vote img.mobile {
    display: none;
  }
}

#vote .ucla.campus > .col {
  padding: 48px 0px 64px;
}

@font-face {
  font-family: 'Karbon';
  src: url("../fonts/KarbonWeb-Medium.eot");
  src: url("../fonts/KarbonWeb-Medium.eot") format("embedded-opentype"), url("../fonts/KarbonWeb-Medium.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

.takeover {
  overflow: hidden;
  max-height: 0;
}

.takeover__wrapper {
  height: auto;
}

.takeover__wrapper .takeover__inner {
  margin-top: 1rem;
  background-image: url("../img/Royce_01.jpg");
  background-position: 0 0px;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.3s ease-in-out;
}

@media (min-width: 1024px) {
  .takeover__wrapper .takeover__inner {
    background-position: 0 0;
  }
}

.takeover__wrapper .takeover__inner > .ucla.campus {
  padding: 0 1.5rem;
}

.takeover__wrapper .takeover__inner .span_5_of_12 {
  position: absolute;
  right: 12px;
}

.takeover__wrapper.short .takeover__inner {
  background-position: 0 -15px;
}

@media (min-width: 360px) {
  .takeover__wrapper.short .takeover__inner {
    background-position: 0 -36px;
  }
}

@media (min-width: 500px) {
  .takeover__wrapper.short .takeover__inner {
    background-position: 0 -60px;
  }
}

@media (min-width: 690px) {
  .takeover__wrapper.short .takeover__inner {
    background-position: 0 -85px;
  }
}

@media (min-width: 840px) {
  .takeover__wrapper.short .takeover__inner {
    background-position: 0 -106px;
  }
}

@media (min-width: 1024px) {
  .takeover__wrapper.short .takeover__inner {
    background-position: 0 -142px;
  }
}

.takeover__wrapper.short .takeover__overlay {
  max-height: 80px;
  padding-top: 32px;
}

@media (min-width: 400px) {
  .takeover__wrapper.short .takeover__overlay {
    max-height: 85px;
  }
}

.takeover__wrapper.short .takeover__overlay-header {
  padding-bottom: 2.5rem;
}

.takeover__wrapper.short .takeover__overlay-header .chancellor-name {
  opacity: 1;
}

.takeover__wrapper .preload {
  height: 0px;
}

.takeover__overlay {
  padding: 2rem 28px 38px;
  background-color: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  height: auto;
  max-height: 2000px;
  padding-top: 168px;
  transition: all 0.3s ease-in-out;
}

.takeover__overlay a.btn {
  color: #FFFFFF;
  border-color: #FFFFFF;
  padding: 0.625rem 0.875rem;
  border-radius: 4px;
}

.takeover__overlay a.btn:hover {
  background-color: #ffe500;
  border-color: #ffe500;
  color: #000;
}

.takeover__overlay a.btn:hover:visited {
  color: #000;
}

.takeover__overlay a.btn:visited {
  color: #FFFFFF;
}

.takeover__overlay .takeover__overlay-btn {
  display: flex;
  font-size: 0.8rem;
  color: #FFFFFF;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  padding: 0;
  top: 8px;
  right: 8px;
}

.takeover__overlay .takeover__overlay-btn span {
  font-weight: bold;
  display: none;
}

.takeover__overlay .takeover__overlay-btn .takeover__overlay-expand-icon {
  display: none;
}

.takeover__overlay .takeover__overlay-btn .takeover__overlay-collapse-icon {
  display: unset;
}

.short .takeover__overlay .takeover__overlay-btn span {
  display: inline;
  margin-right: 0.1rem;
}

.short .takeover__overlay .takeover__overlay-btn .takeover__overlay-expand-icon {
  display: unset;
}

.short .takeover__overlay .takeover__overlay-btn .takeover__overlay-collapse-icon {
  display: none;
}

.takeover__overlay .takeover__overlay-header,
.takeover__overlay .takeover__overlay-description {
  color: #FFFFFF;
}

.takeover__overlay .takeover__overlay-header {
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 100%;
  text-transform: uppercase;
  padding-bottom: 1rem;
  transition: all 0.3s ease-in-out;
}

.takeover__overlay .takeover__overlay-header .chancellor-name {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

@media (min-width: 560px) {
  .takeover__overlay .takeover__overlay-header {
    font-size: 1.1rem;
  }
}

@media (min-width: 769px) {
  .takeover__overlay .takeover__overlay-header {
    font-size: 1.1rem;
  }
}

@media (min-width: 1024px) {
  .takeover__overlay .takeover__overlay-header {
    font-size: 1.1rem;
    padding-bottom: 2.125rem;
  }
}

@media (min-width: 1178px) {
  .takeover__overlay .takeover__overlay-header {
    font-size: 1.7rem;
  }
}

.takeover__overlay .takeover__overlay-name {
  font-family: 'Karbon', sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 100%;
  text-transform: uppercase;
  color: #FFD100;
  padding-bottom: 16px;
}

@media (min-width: 1024px) {
  .takeover__overlay .takeover__overlay-name {
    font-size: 82px;
    padding-bottom: 36px;
  }
}

.takeover__overlay .takeover__overlay-description {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
}

@media (min-width: 1024px) {
  .takeover__overlay .takeover__overlay-description {
    font-size: 1.5rem;
  }
}

.takeover__overlay .takeover__overlay-list {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  padding: 5px 0;
  margin: 0;
  color: #003B5C;
  list-style: none;
}

.takeover__overlay .takeover__overlay-list li {
  margin-bottom: 15px;
}

.takeover__overlay .takeover__overlay-list .letter {
  font-weight: bold;
}

@media (min-width: 1024px) {
  .takeover__overlay {
    max-height: 1000px;
  }

  .takeover__overlay .takeover__overlay-description {
    font-size: 1.5rem;
  }

  .takeover__overlay .takeover__overlay-list {
    font-size: 1.125rem;
  }

  .takeover__overlay > .takeover__overlay-btn {
    font-size: 0.875rem;
    top: 8px;
    right: 8px;
  }

  .short .takeover__overlay > .takeover__overlay-btn {
    top: 8px;
    right: 6px;
  }
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-12 {
  margin: 0.75rem !important;
}

.mt-12,
.my-12 {
  margin-top: 0.75rem !important;
}

.mr-12,
.mx-12 {
  margin-right: 0.75rem !important;
}

.mb-12,
.my-12 {
  margin-bottom: 0.75rem !important;
}

.ml-12,
.mx-12 {
  margin-left: 0.75rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-32 {
  margin: 2rem !important;
}

.mt-32,
.my-32 {
  margin-top: 2rem !important;
}

.mr-32,
.mx-32 {
  margin-right: 2rem !important;
}

.mb-32,
.my-32 {
  margin-bottom: 2rem !important;
}

.ml-32,
.mx-32 {
  margin-left: 2rem !important;
}

.m-36 {
  margin: 2.25rem !important;
}

.mt-36,
.my-36 {
  margin-top: 2.25rem !important;
}

.mr-36,
.mx-36 {
  margin-right: 2.25rem !important;
}

.mb-36,
.my-36 {
  margin-bottom: 2.25rem !important;
}

.ml-36,
.mx-36 {
  margin-left: 2.25rem !important;
}

.m-5 {
  margin: 2.5rem !important;
}

.mt-5,
.my-5 {
  margin-top: 2.5rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 2.5rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 2.5rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 2.5rem !important;
}

.m-6 {
  margin: 3rem !important;
}

.mt-6,
.my-6 {
  margin-top: 3rem !important;
}

.mr-6,
.mx-6 {
  margin-right: 3rem !important;
}

.mb-6,
.my-6 {
  margin-bottom: 3rem !important;
}

.ml-6,
.mx-6 {
  margin-left: 3rem !important;
}

.m-56 {
  margin: 3.5rem !important;
}

.mt-56,
.my-56 {
  margin-top: 3.5rem !important;
}

.mr-56,
.mx-56 {
  margin-right: 3.5rem !important;
}

.mb-56,
.my-56 {
  margin-bottom: 3.5rem !important;
}

.ml-56,
.mx-56 {
  margin-left: 3.5rem !important;
}

.m-58 {
  margin: 3.625rem !important;
}

.mt-58,
.my-58 {
  margin-top: 3.625rem !important;
}

.mr-58,
.mx-58 {
  margin-right: 3.625rem !important;
}

.mb-58,
.my-58 {
  margin-bottom: 3.625rem !important;
}

.ml-58,
.mx-58 {
  margin-left: 3.625rem !important;
}

.m-64 {
  margin: 4rem !important;
}

.mt-64,
.my-64 {
  margin-top: 4rem !important;
}

.mr-64,
.mx-64 {
  margin-right: 4rem !important;
}

.mb-64,
.my-64 {
  margin-bottom: 4rem !important;
}

.ml-64,
.mx-64 {
  margin-left: 4rem !important;
}

.m-7 {
  margin: 4.5rem !important;
}

.mt-7,
.my-7 {
  margin-top: 4.5rem !important;
}

.mr-7,
.mx-7 {
  margin-right: 4.5rem !important;
}

.mb-7,
.my-7 {
  margin-bottom: 4.5rem !important;
}

.ml-7,
.mx-7 {
  margin-left: 4.5rem !important;
}

.m-96 {
  margin: 6rem !important;
}

.mt-96,
.my-96 {
  margin-top: 6rem !important;
}

.mr-96,
.mx-96 {
  margin-right: 6rem !important;
}

.mb-96,
.my-96 {
  margin-bottom: 6rem !important;
}

.ml-96,
.mx-96 {
  margin-left: 6rem !important;
}

.m-124 {
  margin: 7.75rem !important;
}

.mt-124,
.my-124 {
  margin-top: 7.75rem !important;
}

.mr-124,
.mx-124 {
  margin-right: 7.75rem !important;
}

.mb-124,
.my-124 {
  margin-bottom: 7.75rem !important;
}

.ml-124,
.mx-124 {
  margin-left: 7.75rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-12 {
  padding: 0.75rem !important;
}

.pt-12,
.py-12 {
  padding-top: 0.75rem !important;
}

.pr-12,
.px-12 {
  padding-right: 0.75rem !important;
}

.pb-12,
.py-12 {
  padding-bottom: 0.75rem !important;
}

.pl-12,
.px-12 {
  padding-left: 0.75rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-32 {
  padding: 2rem !important;
}

.pt-32,
.py-32 {
  padding-top: 2rem !important;
}

.pr-32,
.px-32 {
  padding-right: 2rem !important;
}

.pb-32,
.py-32 {
  padding-bottom: 2rem !important;
}

.pl-32,
.px-32 {
  padding-left: 2rem !important;
}

.p-36 {
  padding: 2.25rem !important;
}

.pt-36,
.py-36 {
  padding-top: 2.25rem !important;
}

.pr-36,
.px-36 {
  padding-right: 2.25rem !important;
}

.pb-36,
.py-36 {
  padding-bottom: 2.25rem !important;
}

.pl-36,
.px-36 {
  padding-left: 2.25rem !important;
}

.p-5 {
  padding: 2.5rem !important;
}

.pt-5,
.py-5 {
  padding-top: 2.5rem !important;
}

.pr-5,
.px-5 {
  padding-right: 2.5rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 2.5rem !important;
}

.pl-5,
.px-5 {
  padding-left: 2.5rem !important;
}

.p-6 {
  padding: 3rem !important;
}

.pt-6,
.py-6 {
  padding-top: 3rem !important;
}

.pr-6,
.px-6 {
  padding-right: 3rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 3rem !important;
}

.pl-6,
.px-6 {
  padding-left: 3rem !important;
}

.p-56 {
  padding: 3.5rem !important;
}

.pt-56,
.py-56 {
  padding-top: 3.5rem !important;
}

.pr-56,
.px-56 {
  padding-right: 3.5rem !important;
}

.pb-56,
.py-56 {
  padding-bottom: 3.5rem !important;
}

.pl-56,
.px-56 {
  padding-left: 3.5rem !important;
}

.p-58 {
  padding: 3.625rem !important;
}

.pt-58,
.py-58 {
  padding-top: 3.625rem !important;
}

.pr-58,
.px-58 {
  padding-right: 3.625rem !important;
}

.pb-58,
.py-58 {
  padding-bottom: 3.625rem !important;
}

.pl-58,
.px-58 {
  padding-left: 3.625rem !important;
}

.p-64 {
  padding: 4rem !important;
}

.pt-64,
.py-64 {
  padding-top: 4rem !important;
}

.pr-64,
.px-64 {
  padding-right: 4rem !important;
}

.pb-64,
.py-64 {
  padding-bottom: 4rem !important;
}

.pl-64,
.px-64 {
  padding-left: 4rem !important;
}

.p-7 {
  padding: 4.5rem !important;
}

.pt-7,
.py-7 {
  padding-top: 4.5rem !important;
}

.pr-7,
.px-7 {
  padding-right: 4.5rem !important;
}

.pb-7,
.py-7 {
  padding-bottom: 4.5rem !important;
}

.pl-7,
.px-7 {
  padding-left: 4.5rem !important;
}

.p-96 {
  padding: 6rem !important;
}

.pt-96,
.py-96 {
  padding-top: 6rem !important;
}

.pr-96,
.px-96 {
  padding-right: 6rem !important;
}

.pb-96,
.py-96 {
  padding-bottom: 6rem !important;
}

.pl-96,
.px-96 {
  padding-left: 6rem !important;
}

.p-124 {
  padding: 7.75rem !important;
}

.pt-124,
.py-124 {
  padding-top: 7.75rem !important;
}

.pr-124,
.px-124 {
  padding-right: 7.75rem !important;
}

.pb-124,
.py-124 {
  padding-bottom: 7.75rem !important;
}

.pl-124,
.px-124 {
  padding-left: 7.75rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n12 {
  margin: -0.75rem !important;
}

.mt-n12,
.my-n12 {
  margin-top: -0.75rem !important;
}

.mr-n12,
.mx-n12 {
  margin-right: -0.75rem !important;
}

.mb-n12,
.my-n12 {
  margin-bottom: -0.75rem !important;
}

.ml-n12,
.mx-n12 {
  margin-left: -0.75rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n32 {
  margin: -2rem !important;
}

.mt-n32,
.my-n32 {
  margin-top: -2rem !important;
}

.mr-n32,
.mx-n32 {
  margin-right: -2rem !important;
}

.mb-n32,
.my-n32 {
  margin-bottom: -2rem !important;
}

.ml-n32,
.mx-n32 {
  margin-left: -2rem !important;
}

.m-n36 {
  margin: -2.25rem !important;
}

.mt-n36,
.my-n36 {
  margin-top: -2.25rem !important;
}

.mr-n36,
.mx-n36 {
  margin-right: -2.25rem !important;
}

.mb-n36,
.my-n36 {
  margin-bottom: -2.25rem !important;
}

.ml-n36,
.mx-n36 {
  margin-left: -2.25rem !important;
}

.m-n5 {
  margin: -2.5rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -2.5rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -2.5rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -2.5rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -2.5rem !important;
}

.m-n6 {
  margin: -3rem !important;
}

.mt-n6,
.my-n6 {
  margin-top: -3rem !important;
}

.mr-n6,
.mx-n6 {
  margin-right: -3rem !important;
}

.mb-n6,
.my-n6 {
  margin-bottom: -3rem !important;
}

.ml-n6,
.mx-n6 {
  margin-left: -3rem !important;
}

.m-n56 {
  margin: -3.5rem !important;
}

.mt-n56,
.my-n56 {
  margin-top: -3.5rem !important;
}

.mr-n56,
.mx-n56 {
  margin-right: -3.5rem !important;
}

.mb-n56,
.my-n56 {
  margin-bottom: -3.5rem !important;
}

.ml-n56,
.mx-n56 {
  margin-left: -3.5rem !important;
}

.m-n58 {
  margin: -3.625rem !important;
}

.mt-n58,
.my-n58 {
  margin-top: -3.625rem !important;
}

.mr-n58,
.mx-n58 {
  margin-right: -3.625rem !important;
}

.mb-n58,
.my-n58 {
  margin-bottom: -3.625rem !important;
}

.ml-n58,
.mx-n58 {
  margin-left: -3.625rem !important;
}

.m-n64 {
  margin: -4rem !important;
}

.mt-n64,
.my-n64 {
  margin-top: -4rem !important;
}

.mr-n64,
.mx-n64 {
  margin-right: -4rem !important;
}

.mb-n64,
.my-n64 {
  margin-bottom: -4rem !important;
}

.ml-n64,
.mx-n64 {
  margin-left: -4rem !important;
}

.m-n7 {
  margin: -4.5rem !important;
}

.mt-n7,
.my-n7 {
  margin-top: -4.5rem !important;
}

.mr-n7,
.mx-n7 {
  margin-right: -4.5rem !important;
}

.mb-n7,
.my-n7 {
  margin-bottom: -4.5rem !important;
}

.ml-n7,
.mx-n7 {
  margin-left: -4.5rem !important;
}

.m-n96 {
  margin: -6rem !important;
}

.mt-n96,
.my-n96 {
  margin-top: -6rem !important;
}

.mr-n96,
.mx-n96 {
  margin-right: -6rem !important;
}

.mb-n96,
.my-n96 {
  margin-bottom: -6rem !important;
}

.ml-n96,
.mx-n96 {
  margin-left: -6rem !important;
}

.m-n124 {
  margin: -7.75rem !important;
}

.mt-n124,
.my-n124 {
  margin-top: -7.75rem !important;
}

.mr-n124,
.mx-n124 {
  margin-right: -7.75rem !important;
}

.mb-n124,
.my-n124 {
  margin-bottom: -7.75rem !important;
}

.ml-n124,
.mx-n124 {
  margin-left: -7.75rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 480px) {
  .m-xs-0 {
    margin: 0 !important;
  }

  .mt-xs-0,
  .my-xs-0 {
    margin-top: 0 !important;
  }

  .mr-xs-0,
  .mx-xs-0 {
    margin-right: 0 !important;
  }

  .mb-xs-0,
  .my-xs-0 {
    margin-bottom: 0 !important;
  }

  .ml-xs-0,
  .mx-xs-0 {
    margin-left: 0 !important;
  }

  .m-xs-1 {
    margin: 0.25rem !important;
  }

  .mt-xs-1,
  .my-xs-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xs-1,
  .mx-xs-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xs-1,
  .my-xs-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xs-1,
  .mx-xs-1 {
    margin-left: 0.25rem !important;
  }

  .m-xs-2 {
    margin: 0.5rem !important;
  }

  .mt-xs-2,
  .my-xs-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xs-2,
  .mx-xs-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xs-2,
  .my-xs-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xs-2,
  .mx-xs-2 {
    margin-left: 0.5rem !important;
  }

  .m-xs-12 {
    margin: 0.75rem !important;
  }

  .mt-xs-12,
  .my-xs-12 {
    margin-top: 0.75rem !important;
  }

  .mr-xs-12,
  .mx-xs-12 {
    margin-right: 0.75rem !important;
  }

  .mb-xs-12,
  .my-xs-12 {
    margin-bottom: 0.75rem !important;
  }

  .ml-xs-12,
  .mx-xs-12 {
    margin-left: 0.75rem !important;
  }

  .m-xs-3 {
    margin: 1rem !important;
  }

  .mt-xs-3,
  .my-xs-3 {
    margin-top: 1rem !important;
  }

  .mr-xs-3,
  .mx-xs-3 {
    margin-right: 1rem !important;
  }

  .mb-xs-3,
  .my-xs-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xs-3,
  .mx-xs-3 {
    margin-left: 1rem !important;
  }

  .m-xs-4 {
    margin: 1.5rem !important;
  }

  .mt-xs-4,
  .my-xs-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xs-4,
  .mx-xs-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xs-4,
  .my-xs-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xs-4,
  .mx-xs-4 {
    margin-left: 1.5rem !important;
  }

  .m-xs-32 {
    margin: 2rem !important;
  }

  .mt-xs-32,
  .my-xs-32 {
    margin-top: 2rem !important;
  }

  .mr-xs-32,
  .mx-xs-32 {
    margin-right: 2rem !important;
  }

  .mb-xs-32,
  .my-xs-32 {
    margin-bottom: 2rem !important;
  }

  .ml-xs-32,
  .mx-xs-32 {
    margin-left: 2rem !important;
  }

  .m-xs-36 {
    margin: 2.25rem !important;
  }

  .mt-xs-36,
  .my-xs-36 {
    margin-top: 2.25rem !important;
  }

  .mr-xs-36,
  .mx-xs-36 {
    margin-right: 2.25rem !important;
  }

  .mb-xs-36,
  .my-xs-36 {
    margin-bottom: 2.25rem !important;
  }

  .ml-xs-36,
  .mx-xs-36 {
    margin-left: 2.25rem !important;
  }

  .m-xs-5 {
    margin: 2.5rem !important;
  }

  .mt-xs-5,
  .my-xs-5 {
    margin-top: 2.5rem !important;
  }

  .mr-xs-5,
  .mx-xs-5 {
    margin-right: 2.5rem !important;
  }

  .mb-xs-5,
  .my-xs-5 {
    margin-bottom: 2.5rem !important;
  }

  .ml-xs-5,
  .mx-xs-5 {
    margin-left: 2.5rem !important;
  }

  .m-xs-6 {
    margin: 3rem !important;
  }

  .mt-xs-6,
  .my-xs-6 {
    margin-top: 3rem !important;
  }

  .mr-xs-6,
  .mx-xs-6 {
    margin-right: 3rem !important;
  }

  .mb-xs-6,
  .my-xs-6 {
    margin-bottom: 3rem !important;
  }

  .ml-xs-6,
  .mx-xs-6 {
    margin-left: 3rem !important;
  }

  .m-xs-56 {
    margin: 3.5rem !important;
  }

  .mt-xs-56,
  .my-xs-56 {
    margin-top: 3.5rem !important;
  }

  .mr-xs-56,
  .mx-xs-56 {
    margin-right: 3.5rem !important;
  }

  .mb-xs-56,
  .my-xs-56 {
    margin-bottom: 3.5rem !important;
  }

  .ml-xs-56,
  .mx-xs-56 {
    margin-left: 3.5rem !important;
  }

  .m-xs-58 {
    margin: 3.625rem !important;
  }

  .mt-xs-58,
  .my-xs-58 {
    margin-top: 3.625rem !important;
  }

  .mr-xs-58,
  .mx-xs-58 {
    margin-right: 3.625rem !important;
  }

  .mb-xs-58,
  .my-xs-58 {
    margin-bottom: 3.625rem !important;
  }

  .ml-xs-58,
  .mx-xs-58 {
    margin-left: 3.625rem !important;
  }

  .m-xs-64 {
    margin: 4rem !important;
  }

  .mt-xs-64,
  .my-xs-64 {
    margin-top: 4rem !important;
  }

  .mr-xs-64,
  .mx-xs-64 {
    margin-right: 4rem !important;
  }

  .mb-xs-64,
  .my-xs-64 {
    margin-bottom: 4rem !important;
  }

  .ml-xs-64,
  .mx-xs-64 {
    margin-left: 4rem !important;
  }

  .m-xs-7 {
    margin: 4.5rem !important;
  }

  .mt-xs-7,
  .my-xs-7 {
    margin-top: 4.5rem !important;
  }

  .mr-xs-7,
  .mx-xs-7 {
    margin-right: 4.5rem !important;
  }

  .mb-xs-7,
  .my-xs-7 {
    margin-bottom: 4.5rem !important;
  }

  .ml-xs-7,
  .mx-xs-7 {
    margin-left: 4.5rem !important;
  }

  .m-xs-96 {
    margin: 6rem !important;
  }

  .mt-xs-96,
  .my-xs-96 {
    margin-top: 6rem !important;
  }

  .mr-xs-96,
  .mx-xs-96 {
    margin-right: 6rem !important;
  }

  .mb-xs-96,
  .my-xs-96 {
    margin-bottom: 6rem !important;
  }

  .ml-xs-96,
  .mx-xs-96 {
    margin-left: 6rem !important;
  }

  .m-xs-124 {
    margin: 7.75rem !important;
  }

  .mt-xs-124,
  .my-xs-124 {
    margin-top: 7.75rem !important;
  }

  .mr-xs-124,
  .mx-xs-124 {
    margin-right: 7.75rem !important;
  }

  .mb-xs-124,
  .my-xs-124 {
    margin-bottom: 7.75rem !important;
  }

  .ml-xs-124,
  .mx-xs-124 {
    margin-left: 7.75rem !important;
  }

  .p-xs-0 {
    padding: 0 !important;
  }

  .pt-xs-0,
  .py-xs-0 {
    padding-top: 0 !important;
  }

  .pr-xs-0,
  .px-xs-0 {
    padding-right: 0 !important;
  }

  .pb-xs-0,
  .py-xs-0 {
    padding-bottom: 0 !important;
  }

  .pl-xs-0,
  .px-xs-0 {
    padding-left: 0 !important;
  }

  .p-xs-1 {
    padding: 0.25rem !important;
  }

  .pt-xs-1,
  .py-xs-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xs-1,
  .px-xs-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xs-1,
  .py-xs-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xs-1,
  .px-xs-1 {
    padding-left: 0.25rem !important;
  }

  .p-xs-2 {
    padding: 0.5rem !important;
  }

  .pt-xs-2,
  .py-xs-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xs-2,
  .px-xs-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xs-2,
  .py-xs-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xs-2,
  .px-xs-2 {
    padding-left: 0.5rem !important;
  }

  .p-xs-12 {
    padding: 0.75rem !important;
  }

  .pt-xs-12,
  .py-xs-12 {
    padding-top: 0.75rem !important;
  }

  .pr-xs-12,
  .px-xs-12 {
    padding-right: 0.75rem !important;
  }

  .pb-xs-12,
  .py-xs-12 {
    padding-bottom: 0.75rem !important;
  }

  .pl-xs-12,
  .px-xs-12 {
    padding-left: 0.75rem !important;
  }

  .p-xs-3 {
    padding: 1rem !important;
  }

  .pt-xs-3,
  .py-xs-3 {
    padding-top: 1rem !important;
  }

  .pr-xs-3,
  .px-xs-3 {
    padding-right: 1rem !important;
  }

  .pb-xs-3,
  .py-xs-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xs-3,
  .px-xs-3 {
    padding-left: 1rem !important;
  }

  .p-xs-4 {
    padding: 1.5rem !important;
  }

  .pt-xs-4,
  .py-xs-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xs-4,
  .px-xs-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xs-4,
  .py-xs-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xs-4,
  .px-xs-4 {
    padding-left: 1.5rem !important;
  }

  .p-xs-32 {
    padding: 2rem !important;
  }

  .pt-xs-32,
  .py-xs-32 {
    padding-top: 2rem !important;
  }

  .pr-xs-32,
  .px-xs-32 {
    padding-right: 2rem !important;
  }

  .pb-xs-32,
  .py-xs-32 {
    padding-bottom: 2rem !important;
  }

  .pl-xs-32,
  .px-xs-32 {
    padding-left: 2rem !important;
  }

  .p-xs-36 {
    padding: 2.25rem !important;
  }

  .pt-xs-36,
  .py-xs-36 {
    padding-top: 2.25rem !important;
  }

  .pr-xs-36,
  .px-xs-36 {
    padding-right: 2.25rem !important;
  }

  .pb-xs-36,
  .py-xs-36 {
    padding-bottom: 2.25rem !important;
  }

  .pl-xs-36,
  .px-xs-36 {
    padding-left: 2.25rem !important;
  }

  .p-xs-5 {
    padding: 2.5rem !important;
  }

  .pt-xs-5,
  .py-xs-5 {
    padding-top: 2.5rem !important;
  }

  .pr-xs-5,
  .px-xs-5 {
    padding-right: 2.5rem !important;
  }

  .pb-xs-5,
  .py-xs-5 {
    padding-bottom: 2.5rem !important;
  }

  .pl-xs-5,
  .px-xs-5 {
    padding-left: 2.5rem !important;
  }

  .p-xs-6 {
    padding: 3rem !important;
  }

  .pt-xs-6,
  .py-xs-6 {
    padding-top: 3rem !important;
  }

  .pr-xs-6,
  .px-xs-6 {
    padding-right: 3rem !important;
  }

  .pb-xs-6,
  .py-xs-6 {
    padding-bottom: 3rem !important;
  }

  .pl-xs-6,
  .px-xs-6 {
    padding-left: 3rem !important;
  }

  .p-xs-56 {
    padding: 3.5rem !important;
  }

  .pt-xs-56,
  .py-xs-56 {
    padding-top: 3.5rem !important;
  }

  .pr-xs-56,
  .px-xs-56 {
    padding-right: 3.5rem !important;
  }

  .pb-xs-56,
  .py-xs-56 {
    padding-bottom: 3.5rem !important;
  }

  .pl-xs-56,
  .px-xs-56 {
    padding-left: 3.5rem !important;
  }

  .p-xs-58 {
    padding: 3.625rem !important;
  }

  .pt-xs-58,
  .py-xs-58 {
    padding-top: 3.625rem !important;
  }

  .pr-xs-58,
  .px-xs-58 {
    padding-right: 3.625rem !important;
  }

  .pb-xs-58,
  .py-xs-58 {
    padding-bottom: 3.625rem !important;
  }

  .pl-xs-58,
  .px-xs-58 {
    padding-left: 3.625rem !important;
  }

  .p-xs-64 {
    padding: 4rem !important;
  }

  .pt-xs-64,
  .py-xs-64 {
    padding-top: 4rem !important;
  }

  .pr-xs-64,
  .px-xs-64 {
    padding-right: 4rem !important;
  }

  .pb-xs-64,
  .py-xs-64 {
    padding-bottom: 4rem !important;
  }

  .pl-xs-64,
  .px-xs-64 {
    padding-left: 4rem !important;
  }

  .p-xs-7 {
    padding: 4.5rem !important;
  }

  .pt-xs-7,
  .py-xs-7 {
    padding-top: 4.5rem !important;
  }

  .pr-xs-7,
  .px-xs-7 {
    padding-right: 4.5rem !important;
  }

  .pb-xs-7,
  .py-xs-7 {
    padding-bottom: 4.5rem !important;
  }

  .pl-xs-7,
  .px-xs-7 {
    padding-left: 4.5rem !important;
  }

  .p-xs-96 {
    padding: 6rem !important;
  }

  .pt-xs-96,
  .py-xs-96 {
    padding-top: 6rem !important;
  }

  .pr-xs-96,
  .px-xs-96 {
    padding-right: 6rem !important;
  }

  .pb-xs-96,
  .py-xs-96 {
    padding-bottom: 6rem !important;
  }

  .pl-xs-96,
  .px-xs-96 {
    padding-left: 6rem !important;
  }

  .p-xs-124 {
    padding: 7.75rem !important;
  }

  .pt-xs-124,
  .py-xs-124 {
    padding-top: 7.75rem !important;
  }

  .pr-xs-124,
  .px-xs-124 {
    padding-right: 7.75rem !important;
  }

  .pb-xs-124,
  .py-xs-124 {
    padding-bottom: 7.75rem !important;
  }

  .pl-xs-124,
  .px-xs-124 {
    padding-left: 7.75rem !important;
  }

  .m-xs-n1 {
    margin: -0.25rem !important;
  }

  .mt-xs-n1,
  .my-xs-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-xs-n1,
  .mx-xs-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-xs-n1,
  .my-xs-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-xs-n1,
  .mx-xs-n1 {
    margin-left: -0.25rem !important;
  }

  .m-xs-n2 {
    margin: -0.5rem !important;
  }

  .mt-xs-n2,
  .my-xs-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-xs-n2,
  .mx-xs-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-xs-n2,
  .my-xs-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-xs-n2,
  .mx-xs-n2 {
    margin-left: -0.5rem !important;
  }

  .m-xs-n12 {
    margin: -0.75rem !important;
  }

  .mt-xs-n12,
  .my-xs-n12 {
    margin-top: -0.75rem !important;
  }

  .mr-xs-n12,
  .mx-xs-n12 {
    margin-right: -0.75rem !important;
  }

  .mb-xs-n12,
  .my-xs-n12 {
    margin-bottom: -0.75rem !important;
  }

  .ml-xs-n12,
  .mx-xs-n12 {
    margin-left: -0.75rem !important;
  }

  .m-xs-n3 {
    margin: -1rem !important;
  }

  .mt-xs-n3,
  .my-xs-n3 {
    margin-top: -1rem !important;
  }

  .mr-xs-n3,
  .mx-xs-n3 {
    margin-right: -1rem !important;
  }

  .mb-xs-n3,
  .my-xs-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xs-n3,
  .mx-xs-n3 {
    margin-left: -1rem !important;
  }

  .m-xs-n4 {
    margin: -1.5rem !important;
  }

  .mt-xs-n4,
  .my-xs-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xs-n4,
  .mx-xs-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-xs-n4,
  .my-xs-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xs-n4,
  .mx-xs-n4 {
    margin-left: -1.5rem !important;
  }

  .m-xs-n32 {
    margin: -2rem !important;
  }

  .mt-xs-n32,
  .my-xs-n32 {
    margin-top: -2rem !important;
  }

  .mr-xs-n32,
  .mx-xs-n32 {
    margin-right: -2rem !important;
  }

  .mb-xs-n32,
  .my-xs-n32 {
    margin-bottom: -2rem !important;
  }

  .ml-xs-n32,
  .mx-xs-n32 {
    margin-left: -2rem !important;
  }

  .m-xs-n36 {
    margin: -2.25rem !important;
  }

  .mt-xs-n36,
  .my-xs-n36 {
    margin-top: -2.25rem !important;
  }

  .mr-xs-n36,
  .mx-xs-n36 {
    margin-right: -2.25rem !important;
  }

  .mb-xs-n36,
  .my-xs-n36 {
    margin-bottom: -2.25rem !important;
  }

  .ml-xs-n36,
  .mx-xs-n36 {
    margin-left: -2.25rem !important;
  }

  .m-xs-n5 {
    margin: -2.5rem !important;
  }

  .mt-xs-n5,
  .my-xs-n5 {
    margin-top: -2.5rem !important;
  }

  .mr-xs-n5,
  .mx-xs-n5 {
    margin-right: -2.5rem !important;
  }

  .mb-xs-n5,
  .my-xs-n5 {
    margin-bottom: -2.5rem !important;
  }

  .ml-xs-n5,
  .mx-xs-n5 {
    margin-left: -2.5rem !important;
  }

  .m-xs-n6 {
    margin: -3rem !important;
  }

  .mt-xs-n6,
  .my-xs-n6 {
    margin-top: -3rem !important;
  }

  .mr-xs-n6,
  .mx-xs-n6 {
    margin-right: -3rem !important;
  }

  .mb-xs-n6,
  .my-xs-n6 {
    margin-bottom: -3rem !important;
  }

  .ml-xs-n6,
  .mx-xs-n6 {
    margin-left: -3rem !important;
  }

  .m-xs-n56 {
    margin: -3.5rem !important;
  }

  .mt-xs-n56,
  .my-xs-n56 {
    margin-top: -3.5rem !important;
  }

  .mr-xs-n56,
  .mx-xs-n56 {
    margin-right: -3.5rem !important;
  }

  .mb-xs-n56,
  .my-xs-n56 {
    margin-bottom: -3.5rem !important;
  }

  .ml-xs-n56,
  .mx-xs-n56 {
    margin-left: -3.5rem !important;
  }

  .m-xs-n58 {
    margin: -3.625rem !important;
  }

  .mt-xs-n58,
  .my-xs-n58 {
    margin-top: -3.625rem !important;
  }

  .mr-xs-n58,
  .mx-xs-n58 {
    margin-right: -3.625rem !important;
  }

  .mb-xs-n58,
  .my-xs-n58 {
    margin-bottom: -3.625rem !important;
  }

  .ml-xs-n58,
  .mx-xs-n58 {
    margin-left: -3.625rem !important;
  }

  .m-xs-n64 {
    margin: -4rem !important;
  }

  .mt-xs-n64,
  .my-xs-n64 {
    margin-top: -4rem !important;
  }

  .mr-xs-n64,
  .mx-xs-n64 {
    margin-right: -4rem !important;
  }

  .mb-xs-n64,
  .my-xs-n64 {
    margin-bottom: -4rem !important;
  }

  .ml-xs-n64,
  .mx-xs-n64 {
    margin-left: -4rem !important;
  }

  .m-xs-n7 {
    margin: -4.5rem !important;
  }

  .mt-xs-n7,
  .my-xs-n7 {
    margin-top: -4.5rem !important;
  }

  .mr-xs-n7,
  .mx-xs-n7 {
    margin-right: -4.5rem !important;
  }

  .mb-xs-n7,
  .my-xs-n7 {
    margin-bottom: -4.5rem !important;
  }

  .ml-xs-n7,
  .mx-xs-n7 {
    margin-left: -4.5rem !important;
  }

  .m-xs-n96 {
    margin: -6rem !important;
  }

  .mt-xs-n96,
  .my-xs-n96 {
    margin-top: -6rem !important;
  }

  .mr-xs-n96,
  .mx-xs-n96 {
    margin-right: -6rem !important;
  }

  .mb-xs-n96,
  .my-xs-n96 {
    margin-bottom: -6rem !important;
  }

  .ml-xs-n96,
  .mx-xs-n96 {
    margin-left: -6rem !important;
  }

  .m-xs-n124 {
    margin: -7.75rem !important;
  }

  .mt-xs-n124,
  .my-xs-n124 {
    margin-top: -7.75rem !important;
  }

  .mr-xs-n124,
  .mx-xs-n124 {
    margin-right: -7.75rem !important;
  }

  .mb-xs-n124,
  .my-xs-n124 {
    margin-bottom: -7.75rem !important;
  }

  .ml-xs-n124,
  .mx-xs-n124 {
    margin-left: -7.75rem !important;
  }

  .m-xs-auto {
    margin: auto !important;
  }

  .mt-xs-auto,
  .my-xs-auto {
    margin-top: auto !important;
  }

  .mr-xs-auto,
  .mx-xs-auto {
    margin-right: auto !important;
  }

  .mb-xs-auto,
  .my-xs-auto {
    margin-bottom: auto !important;
  }

  .ml-xs-auto,
  .mx-xs-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 600px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .m-sm-12 {
    margin: 0.75rem !important;
  }

  .mt-sm-12,
  .my-sm-12 {
    margin-top: 0.75rem !important;
  }

  .mr-sm-12,
  .mx-sm-12 {
    margin-right: 0.75rem !important;
  }

  .mb-sm-12,
  .my-sm-12 {
    margin-bottom: 0.75rem !important;
  }

  .ml-sm-12,
  .mx-sm-12 {
    margin-left: 0.75rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-32 {
    margin: 2rem !important;
  }

  .mt-sm-32,
  .my-sm-32 {
    margin-top: 2rem !important;
  }

  .mr-sm-32,
  .mx-sm-32 {
    margin-right: 2rem !important;
  }

  .mb-sm-32,
  .my-sm-32 {
    margin-bottom: 2rem !important;
  }

  .ml-sm-32,
  .mx-sm-32 {
    margin-left: 2rem !important;
  }

  .m-sm-36 {
    margin: 2.25rem !important;
  }

  .mt-sm-36,
  .my-sm-36 {
    margin-top: 2.25rem !important;
  }

  .mr-sm-36,
  .mx-sm-36 {
    margin-right: 2.25rem !important;
  }

  .mb-sm-36,
  .my-sm-36 {
    margin-bottom: 2.25rem !important;
  }

  .ml-sm-36,
  .mx-sm-36 {
    margin-left: 2.25rem !important;
  }

  .m-sm-5 {
    margin: 2.5rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 2.5rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 2.5rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 2.5rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 2.5rem !important;
  }

  .m-sm-6 {
    margin: 3rem !important;
  }

  .mt-sm-6,
  .my-sm-6 {
    margin-top: 3rem !important;
  }

  .mr-sm-6,
  .mx-sm-6 {
    margin-right: 3rem !important;
  }

  .mb-sm-6,
  .my-sm-6 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-6,
  .mx-sm-6 {
    margin-left: 3rem !important;
  }

  .m-sm-56 {
    margin: 3.5rem !important;
  }

  .mt-sm-56,
  .my-sm-56 {
    margin-top: 3.5rem !important;
  }

  .mr-sm-56,
  .mx-sm-56 {
    margin-right: 3.5rem !important;
  }

  .mb-sm-56,
  .my-sm-56 {
    margin-bottom: 3.5rem !important;
  }

  .ml-sm-56,
  .mx-sm-56 {
    margin-left: 3.5rem !important;
  }

  .m-sm-58 {
    margin: 3.625rem !important;
  }

  .mt-sm-58,
  .my-sm-58 {
    margin-top: 3.625rem !important;
  }

  .mr-sm-58,
  .mx-sm-58 {
    margin-right: 3.625rem !important;
  }

  .mb-sm-58,
  .my-sm-58 {
    margin-bottom: 3.625rem !important;
  }

  .ml-sm-58,
  .mx-sm-58 {
    margin-left: 3.625rem !important;
  }

  .m-sm-64 {
    margin: 4rem !important;
  }

  .mt-sm-64,
  .my-sm-64 {
    margin-top: 4rem !important;
  }

  .mr-sm-64,
  .mx-sm-64 {
    margin-right: 4rem !important;
  }

  .mb-sm-64,
  .my-sm-64 {
    margin-bottom: 4rem !important;
  }

  .ml-sm-64,
  .mx-sm-64 {
    margin-left: 4rem !important;
  }

  .m-sm-7 {
    margin: 4.5rem !important;
  }

  .mt-sm-7,
  .my-sm-7 {
    margin-top: 4.5rem !important;
  }

  .mr-sm-7,
  .mx-sm-7 {
    margin-right: 4.5rem !important;
  }

  .mb-sm-7,
  .my-sm-7 {
    margin-bottom: 4.5rem !important;
  }

  .ml-sm-7,
  .mx-sm-7 {
    margin-left: 4.5rem !important;
  }

  .m-sm-96 {
    margin: 6rem !important;
  }

  .mt-sm-96,
  .my-sm-96 {
    margin-top: 6rem !important;
  }

  .mr-sm-96,
  .mx-sm-96 {
    margin-right: 6rem !important;
  }

  .mb-sm-96,
  .my-sm-96 {
    margin-bottom: 6rem !important;
  }

  .ml-sm-96,
  .mx-sm-96 {
    margin-left: 6rem !important;
  }

  .m-sm-124 {
    margin: 7.75rem !important;
  }

  .mt-sm-124,
  .my-sm-124 {
    margin-top: 7.75rem !important;
  }

  .mr-sm-124,
  .mx-sm-124 {
    margin-right: 7.75rem !important;
  }

  .mb-sm-124,
  .my-sm-124 {
    margin-bottom: 7.75rem !important;
  }

  .ml-sm-124,
  .mx-sm-124 {
    margin-left: 7.75rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .p-sm-12 {
    padding: 0.75rem !important;
  }

  .pt-sm-12,
  .py-sm-12 {
    padding-top: 0.75rem !important;
  }

  .pr-sm-12,
  .px-sm-12 {
    padding-right: 0.75rem !important;
  }

  .pb-sm-12,
  .py-sm-12 {
    padding-bottom: 0.75rem !important;
  }

  .pl-sm-12,
  .px-sm-12 {
    padding-left: 0.75rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-32 {
    padding: 2rem !important;
  }

  .pt-sm-32,
  .py-sm-32 {
    padding-top: 2rem !important;
  }

  .pr-sm-32,
  .px-sm-32 {
    padding-right: 2rem !important;
  }

  .pb-sm-32,
  .py-sm-32 {
    padding-bottom: 2rem !important;
  }

  .pl-sm-32,
  .px-sm-32 {
    padding-left: 2rem !important;
  }

  .p-sm-36 {
    padding: 2.25rem !important;
  }

  .pt-sm-36,
  .py-sm-36 {
    padding-top: 2.25rem !important;
  }

  .pr-sm-36,
  .px-sm-36 {
    padding-right: 2.25rem !important;
  }

  .pb-sm-36,
  .py-sm-36 {
    padding-bottom: 2.25rem !important;
  }

  .pl-sm-36,
  .px-sm-36 {
    padding-left: 2.25rem !important;
  }

  .p-sm-5 {
    padding: 2.5rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 2.5rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 2.5rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 2.5rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 2.5rem !important;
  }

  .p-sm-6 {
    padding: 3rem !important;
  }

  .pt-sm-6,
  .py-sm-6 {
    padding-top: 3rem !important;
  }

  .pr-sm-6,
  .px-sm-6 {
    padding-right: 3rem !important;
  }

  .pb-sm-6,
  .py-sm-6 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-6,
  .px-sm-6 {
    padding-left: 3rem !important;
  }

  .p-sm-56 {
    padding: 3.5rem !important;
  }

  .pt-sm-56,
  .py-sm-56 {
    padding-top: 3.5rem !important;
  }

  .pr-sm-56,
  .px-sm-56 {
    padding-right: 3.5rem !important;
  }

  .pb-sm-56,
  .py-sm-56 {
    padding-bottom: 3.5rem !important;
  }

  .pl-sm-56,
  .px-sm-56 {
    padding-left: 3.5rem !important;
  }

  .p-sm-58 {
    padding: 3.625rem !important;
  }

  .pt-sm-58,
  .py-sm-58 {
    padding-top: 3.625rem !important;
  }

  .pr-sm-58,
  .px-sm-58 {
    padding-right: 3.625rem !important;
  }

  .pb-sm-58,
  .py-sm-58 {
    padding-bottom: 3.625rem !important;
  }

  .pl-sm-58,
  .px-sm-58 {
    padding-left: 3.625rem !important;
  }

  .p-sm-64 {
    padding: 4rem !important;
  }

  .pt-sm-64,
  .py-sm-64 {
    padding-top: 4rem !important;
  }

  .pr-sm-64,
  .px-sm-64 {
    padding-right: 4rem !important;
  }

  .pb-sm-64,
  .py-sm-64 {
    padding-bottom: 4rem !important;
  }

  .pl-sm-64,
  .px-sm-64 {
    padding-left: 4rem !important;
  }

  .p-sm-7 {
    padding: 4.5rem !important;
  }

  .pt-sm-7,
  .py-sm-7 {
    padding-top: 4.5rem !important;
  }

  .pr-sm-7,
  .px-sm-7 {
    padding-right: 4.5rem !important;
  }

  .pb-sm-7,
  .py-sm-7 {
    padding-bottom: 4.5rem !important;
  }

  .pl-sm-7,
  .px-sm-7 {
    padding-left: 4.5rem !important;
  }

  .p-sm-96 {
    padding: 6rem !important;
  }

  .pt-sm-96,
  .py-sm-96 {
    padding-top: 6rem !important;
  }

  .pr-sm-96,
  .px-sm-96 {
    padding-right: 6rem !important;
  }

  .pb-sm-96,
  .py-sm-96 {
    padding-bottom: 6rem !important;
  }

  .pl-sm-96,
  .px-sm-96 {
    padding-left: 6rem !important;
  }

  .p-sm-124 {
    padding: 7.75rem !important;
  }

  .pt-sm-124,
  .py-sm-124 {
    padding-top: 7.75rem !important;
  }

  .pr-sm-124,
  .px-sm-124 {
    padding-right: 7.75rem !important;
  }

  .pb-sm-124,
  .py-sm-124 {
    padding-bottom: 7.75rem !important;
  }

  .pl-sm-124,
  .px-sm-124 {
    padding-left: 7.75rem !important;
  }

  .m-sm-n1 {
    margin: -0.25rem !important;
  }

  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }

  .m-sm-n2 {
    margin: -0.5rem !important;
  }

  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }

  .m-sm-n12 {
    margin: -0.75rem !important;
  }

  .mt-sm-n12,
  .my-sm-n12 {
    margin-top: -0.75rem !important;
  }

  .mr-sm-n12,
  .mx-sm-n12 {
    margin-right: -0.75rem !important;
  }

  .mb-sm-n12,
  .my-sm-n12 {
    margin-bottom: -0.75rem !important;
  }

  .ml-sm-n12,
  .mx-sm-n12 {
    margin-left: -0.75rem !important;
  }

  .m-sm-n3 {
    margin: -1rem !important;
  }

  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }

  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }

  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }

  .m-sm-n4 {
    margin: -1.5rem !important;
  }

  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }

  .m-sm-n32 {
    margin: -2rem !important;
  }

  .mt-sm-n32,
  .my-sm-n32 {
    margin-top: -2rem !important;
  }

  .mr-sm-n32,
  .mx-sm-n32 {
    margin-right: -2rem !important;
  }

  .mb-sm-n32,
  .my-sm-n32 {
    margin-bottom: -2rem !important;
  }

  .ml-sm-n32,
  .mx-sm-n32 {
    margin-left: -2rem !important;
  }

  .m-sm-n36 {
    margin: -2.25rem !important;
  }

  .mt-sm-n36,
  .my-sm-n36 {
    margin-top: -2.25rem !important;
  }

  .mr-sm-n36,
  .mx-sm-n36 {
    margin-right: -2.25rem !important;
  }

  .mb-sm-n36,
  .my-sm-n36 {
    margin-bottom: -2.25rem !important;
  }

  .ml-sm-n36,
  .mx-sm-n36 {
    margin-left: -2.25rem !important;
  }

  .m-sm-n5 {
    margin: -2.5rem !important;
  }

  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -2.5rem !important;
  }

  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -2.5rem !important;
  }

  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -2.5rem !important;
  }

  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -2.5rem !important;
  }

  .m-sm-n6 {
    margin: -3rem !important;
  }

  .mt-sm-n6,
  .my-sm-n6 {
    margin-top: -3rem !important;
  }

  .mr-sm-n6,
  .mx-sm-n6 {
    margin-right: -3rem !important;
  }

  .mb-sm-n6,
  .my-sm-n6 {
    margin-bottom: -3rem !important;
  }

  .ml-sm-n6,
  .mx-sm-n6 {
    margin-left: -3rem !important;
  }

  .m-sm-n56 {
    margin: -3.5rem !important;
  }

  .mt-sm-n56,
  .my-sm-n56 {
    margin-top: -3.5rem !important;
  }

  .mr-sm-n56,
  .mx-sm-n56 {
    margin-right: -3.5rem !important;
  }

  .mb-sm-n56,
  .my-sm-n56 {
    margin-bottom: -3.5rem !important;
  }

  .ml-sm-n56,
  .mx-sm-n56 {
    margin-left: -3.5rem !important;
  }

  .m-sm-n58 {
    margin: -3.625rem !important;
  }

  .mt-sm-n58,
  .my-sm-n58 {
    margin-top: -3.625rem !important;
  }

  .mr-sm-n58,
  .mx-sm-n58 {
    margin-right: -3.625rem !important;
  }

  .mb-sm-n58,
  .my-sm-n58 {
    margin-bottom: -3.625rem !important;
  }

  .ml-sm-n58,
  .mx-sm-n58 {
    margin-left: -3.625rem !important;
  }

  .m-sm-n64 {
    margin: -4rem !important;
  }

  .mt-sm-n64,
  .my-sm-n64 {
    margin-top: -4rem !important;
  }

  .mr-sm-n64,
  .mx-sm-n64 {
    margin-right: -4rem !important;
  }

  .mb-sm-n64,
  .my-sm-n64 {
    margin-bottom: -4rem !important;
  }

  .ml-sm-n64,
  .mx-sm-n64 {
    margin-left: -4rem !important;
  }

  .m-sm-n7 {
    margin: -4.5rem !important;
  }

  .mt-sm-n7,
  .my-sm-n7 {
    margin-top: -4.5rem !important;
  }

  .mr-sm-n7,
  .mx-sm-n7 {
    margin-right: -4.5rem !important;
  }

  .mb-sm-n7,
  .my-sm-n7 {
    margin-bottom: -4.5rem !important;
  }

  .ml-sm-n7,
  .mx-sm-n7 {
    margin-left: -4.5rem !important;
  }

  .m-sm-n96 {
    margin: -6rem !important;
  }

  .mt-sm-n96,
  .my-sm-n96 {
    margin-top: -6rem !important;
  }

  .mr-sm-n96,
  .mx-sm-n96 {
    margin-right: -6rem !important;
  }

  .mb-sm-n96,
  .my-sm-n96 {
    margin-bottom: -6rem !important;
  }

  .ml-sm-n96,
  .mx-sm-n96 {
    margin-left: -6rem !important;
  }

  .m-sm-n124 {
    margin: -7.75rem !important;
  }

  .mt-sm-n124,
  .my-sm-n124 {
    margin-top: -7.75rem !important;
  }

  .mr-sm-n124,
  .mx-sm-n124 {
    margin-right: -7.75rem !important;
  }

  .mb-sm-n124,
  .my-sm-n124 {
    margin-bottom: -7.75rem !important;
  }

  .ml-sm-n124,
  .mx-sm-n124 {
    margin-left: -7.75rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .m-md-12 {
    margin: 0.75rem !important;
  }

  .mt-md-12,
  .my-md-12 {
    margin-top: 0.75rem !important;
  }

  .mr-md-12,
  .mx-md-12 {
    margin-right: 0.75rem !important;
  }

  .mb-md-12,
  .my-md-12 {
    margin-bottom: 0.75rem !important;
  }

  .ml-md-12,
  .mx-md-12 {
    margin-left: 0.75rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-32 {
    margin: 2rem !important;
  }

  .mt-md-32,
  .my-md-32 {
    margin-top: 2rem !important;
  }

  .mr-md-32,
  .mx-md-32 {
    margin-right: 2rem !important;
  }

  .mb-md-32,
  .my-md-32 {
    margin-bottom: 2rem !important;
  }

  .ml-md-32,
  .mx-md-32 {
    margin-left: 2rem !important;
  }

  .m-md-36 {
    margin: 2.25rem !important;
  }

  .mt-md-36,
  .my-md-36 {
    margin-top: 2.25rem !important;
  }

  .mr-md-36,
  .mx-md-36 {
    margin-right: 2.25rem !important;
  }

  .mb-md-36,
  .my-md-36 {
    margin-bottom: 2.25rem !important;
  }

  .ml-md-36,
  .mx-md-36 {
    margin-left: 2.25rem !important;
  }

  .m-md-5 {
    margin: 2.5rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 2.5rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 2.5rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 2.5rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 2.5rem !important;
  }

  .m-md-6 {
    margin: 3rem !important;
  }

  .mt-md-6,
  .my-md-6 {
    margin-top: 3rem !important;
  }

  .mr-md-6,
  .mx-md-6 {
    margin-right: 3rem !important;
  }

  .mb-md-6,
  .my-md-6 {
    margin-bottom: 3rem !important;
  }

  .ml-md-6,
  .mx-md-6 {
    margin-left: 3rem !important;
  }

  .m-md-56 {
    margin: 3.5rem !important;
  }

  .mt-md-56,
  .my-md-56 {
    margin-top: 3.5rem !important;
  }

  .mr-md-56,
  .mx-md-56 {
    margin-right: 3.5rem !important;
  }

  .mb-md-56,
  .my-md-56 {
    margin-bottom: 3.5rem !important;
  }

  .ml-md-56,
  .mx-md-56 {
    margin-left: 3.5rem !important;
  }

  .m-md-58 {
    margin: 3.625rem !important;
  }

  .mt-md-58,
  .my-md-58 {
    margin-top: 3.625rem !important;
  }

  .mr-md-58,
  .mx-md-58 {
    margin-right: 3.625rem !important;
  }

  .mb-md-58,
  .my-md-58 {
    margin-bottom: 3.625rem !important;
  }

  .ml-md-58,
  .mx-md-58 {
    margin-left: 3.625rem !important;
  }

  .m-md-64 {
    margin: 4rem !important;
  }

  .mt-md-64,
  .my-md-64 {
    margin-top: 4rem !important;
  }

  .mr-md-64,
  .mx-md-64 {
    margin-right: 4rem !important;
  }

  .mb-md-64,
  .my-md-64 {
    margin-bottom: 4rem !important;
  }

  .ml-md-64,
  .mx-md-64 {
    margin-left: 4rem !important;
  }

  .m-md-7 {
    margin: 4.5rem !important;
  }

  .mt-md-7,
  .my-md-7 {
    margin-top: 4.5rem !important;
  }

  .mr-md-7,
  .mx-md-7 {
    margin-right: 4.5rem !important;
  }

  .mb-md-7,
  .my-md-7 {
    margin-bottom: 4.5rem !important;
  }

  .ml-md-7,
  .mx-md-7 {
    margin-left: 4.5rem !important;
  }

  .m-md-96 {
    margin: 6rem !important;
  }

  .mt-md-96,
  .my-md-96 {
    margin-top: 6rem !important;
  }

  .mr-md-96,
  .mx-md-96 {
    margin-right: 6rem !important;
  }

  .mb-md-96,
  .my-md-96 {
    margin-bottom: 6rem !important;
  }

  .ml-md-96,
  .mx-md-96 {
    margin-left: 6rem !important;
  }

  .m-md-124 {
    margin: 7.75rem !important;
  }

  .mt-md-124,
  .my-md-124 {
    margin-top: 7.75rem !important;
  }

  .mr-md-124,
  .mx-md-124 {
    margin-right: 7.75rem !important;
  }

  .mb-md-124,
  .my-md-124 {
    margin-bottom: 7.75rem !important;
  }

  .ml-md-124,
  .mx-md-124 {
    margin-left: 7.75rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .p-md-12 {
    padding: 0.75rem !important;
  }

  .pt-md-12,
  .py-md-12 {
    padding-top: 0.75rem !important;
  }

  .pr-md-12,
  .px-md-12 {
    padding-right: 0.75rem !important;
  }

  .pb-md-12,
  .py-md-12 {
    padding-bottom: 0.75rem !important;
  }

  .pl-md-12,
  .px-md-12 {
    padding-left: 0.75rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-32 {
    padding: 2rem !important;
  }

  .pt-md-32,
  .py-md-32 {
    padding-top: 2rem !important;
  }

  .pr-md-32,
  .px-md-32 {
    padding-right: 2rem !important;
  }

  .pb-md-32,
  .py-md-32 {
    padding-bottom: 2rem !important;
  }

  .pl-md-32,
  .px-md-32 {
    padding-left: 2rem !important;
  }

  .p-md-36 {
    padding: 2.25rem !important;
  }

  .pt-md-36,
  .py-md-36 {
    padding-top: 2.25rem !important;
  }

  .pr-md-36,
  .px-md-36 {
    padding-right: 2.25rem !important;
  }

  .pb-md-36,
  .py-md-36 {
    padding-bottom: 2.25rem !important;
  }

  .pl-md-36,
  .px-md-36 {
    padding-left: 2.25rem !important;
  }

  .p-md-5 {
    padding: 2.5rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 2.5rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 2.5rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 2.5rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 2.5rem !important;
  }

  .p-md-6 {
    padding: 3rem !important;
  }

  .pt-md-6,
  .py-md-6 {
    padding-top: 3rem !important;
  }

  .pr-md-6,
  .px-md-6 {
    padding-right: 3rem !important;
  }

  .pb-md-6,
  .py-md-6 {
    padding-bottom: 3rem !important;
  }

  .pl-md-6,
  .px-md-6 {
    padding-left: 3rem !important;
  }

  .p-md-56 {
    padding: 3.5rem !important;
  }

  .pt-md-56,
  .py-md-56 {
    padding-top: 3.5rem !important;
  }

  .pr-md-56,
  .px-md-56 {
    padding-right: 3.5rem !important;
  }

  .pb-md-56,
  .py-md-56 {
    padding-bottom: 3.5rem !important;
  }

  .pl-md-56,
  .px-md-56 {
    padding-left: 3.5rem !important;
  }

  .p-md-58 {
    padding: 3.625rem !important;
  }

  .pt-md-58,
  .py-md-58 {
    padding-top: 3.625rem !important;
  }

  .pr-md-58,
  .px-md-58 {
    padding-right: 3.625rem !important;
  }

  .pb-md-58,
  .py-md-58 {
    padding-bottom: 3.625rem !important;
  }

  .pl-md-58,
  .px-md-58 {
    padding-left: 3.625rem !important;
  }

  .p-md-64 {
    padding: 4rem !important;
  }

  .pt-md-64,
  .py-md-64 {
    padding-top: 4rem !important;
  }

  .pr-md-64,
  .px-md-64 {
    padding-right: 4rem !important;
  }

  .pb-md-64,
  .py-md-64 {
    padding-bottom: 4rem !important;
  }

  .pl-md-64,
  .px-md-64 {
    padding-left: 4rem !important;
  }

  .p-md-7 {
    padding: 4.5rem !important;
  }

  .pt-md-7,
  .py-md-7 {
    padding-top: 4.5rem !important;
  }

  .pr-md-7,
  .px-md-7 {
    padding-right: 4.5rem !important;
  }

  .pb-md-7,
  .py-md-7 {
    padding-bottom: 4.5rem !important;
  }

  .pl-md-7,
  .px-md-7 {
    padding-left: 4.5rem !important;
  }

  .p-md-96 {
    padding: 6rem !important;
  }

  .pt-md-96,
  .py-md-96 {
    padding-top: 6rem !important;
  }

  .pr-md-96,
  .px-md-96 {
    padding-right: 6rem !important;
  }

  .pb-md-96,
  .py-md-96 {
    padding-bottom: 6rem !important;
  }

  .pl-md-96,
  .px-md-96 {
    padding-left: 6rem !important;
  }

  .p-md-124 {
    padding: 7.75rem !important;
  }

  .pt-md-124,
  .py-md-124 {
    padding-top: 7.75rem !important;
  }

  .pr-md-124,
  .px-md-124 {
    padding-right: 7.75rem !important;
  }

  .pb-md-124,
  .py-md-124 {
    padding-bottom: 7.75rem !important;
  }

  .pl-md-124,
  .px-md-124 {
    padding-left: 7.75rem !important;
  }

  .m-md-n1 {
    margin: -0.25rem !important;
  }

  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }

  .m-md-n2 {
    margin: -0.5rem !important;
  }

  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }

  .m-md-n12 {
    margin: -0.75rem !important;
  }

  .mt-md-n12,
  .my-md-n12 {
    margin-top: -0.75rem !important;
  }

  .mr-md-n12,
  .mx-md-n12 {
    margin-right: -0.75rem !important;
  }

  .mb-md-n12,
  .my-md-n12 {
    margin-bottom: -0.75rem !important;
  }

  .ml-md-n12,
  .mx-md-n12 {
    margin-left: -0.75rem !important;
  }

  .m-md-n3 {
    margin: -1rem !important;
  }

  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }

  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }

  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }

  .m-md-n4 {
    margin: -1.5rem !important;
  }

  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }

  .m-md-n32 {
    margin: -2rem !important;
  }

  .mt-md-n32,
  .my-md-n32 {
    margin-top: -2rem !important;
  }

  .mr-md-n32,
  .mx-md-n32 {
    margin-right: -2rem !important;
  }

  .mb-md-n32,
  .my-md-n32 {
    margin-bottom: -2rem !important;
  }

  .ml-md-n32,
  .mx-md-n32 {
    margin-left: -2rem !important;
  }

  .m-md-n36 {
    margin: -2.25rem !important;
  }

  .mt-md-n36,
  .my-md-n36 {
    margin-top: -2.25rem !important;
  }

  .mr-md-n36,
  .mx-md-n36 {
    margin-right: -2.25rem !important;
  }

  .mb-md-n36,
  .my-md-n36 {
    margin-bottom: -2.25rem !important;
  }

  .ml-md-n36,
  .mx-md-n36 {
    margin-left: -2.25rem !important;
  }

  .m-md-n5 {
    margin: -2.5rem !important;
  }

  .mt-md-n5,
  .my-md-n5 {
    margin-top: -2.5rem !important;
  }

  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -2.5rem !important;
  }

  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -2.5rem !important;
  }

  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -2.5rem !important;
  }

  .m-md-n6 {
    margin: -3rem !important;
  }

  .mt-md-n6,
  .my-md-n6 {
    margin-top: -3rem !important;
  }

  .mr-md-n6,
  .mx-md-n6 {
    margin-right: -3rem !important;
  }

  .mb-md-n6,
  .my-md-n6 {
    margin-bottom: -3rem !important;
  }

  .ml-md-n6,
  .mx-md-n6 {
    margin-left: -3rem !important;
  }

  .m-md-n56 {
    margin: -3.5rem !important;
  }

  .mt-md-n56,
  .my-md-n56 {
    margin-top: -3.5rem !important;
  }

  .mr-md-n56,
  .mx-md-n56 {
    margin-right: -3.5rem !important;
  }

  .mb-md-n56,
  .my-md-n56 {
    margin-bottom: -3.5rem !important;
  }

  .ml-md-n56,
  .mx-md-n56 {
    margin-left: -3.5rem !important;
  }

  .m-md-n58 {
    margin: -3.625rem !important;
  }

  .mt-md-n58,
  .my-md-n58 {
    margin-top: -3.625rem !important;
  }

  .mr-md-n58,
  .mx-md-n58 {
    margin-right: -3.625rem !important;
  }

  .mb-md-n58,
  .my-md-n58 {
    margin-bottom: -3.625rem !important;
  }

  .ml-md-n58,
  .mx-md-n58 {
    margin-left: -3.625rem !important;
  }

  .m-md-n64 {
    margin: -4rem !important;
  }

  .mt-md-n64,
  .my-md-n64 {
    margin-top: -4rem !important;
  }

  .mr-md-n64,
  .mx-md-n64 {
    margin-right: -4rem !important;
  }

  .mb-md-n64,
  .my-md-n64 {
    margin-bottom: -4rem !important;
  }

  .ml-md-n64,
  .mx-md-n64 {
    margin-left: -4rem !important;
  }

  .m-md-n7 {
    margin: -4.5rem !important;
  }

  .mt-md-n7,
  .my-md-n7 {
    margin-top: -4.5rem !important;
  }

  .mr-md-n7,
  .mx-md-n7 {
    margin-right: -4.5rem !important;
  }

  .mb-md-n7,
  .my-md-n7 {
    margin-bottom: -4.5rem !important;
  }

  .ml-md-n7,
  .mx-md-n7 {
    margin-left: -4.5rem !important;
  }

  .m-md-n96 {
    margin: -6rem !important;
  }

  .mt-md-n96,
  .my-md-n96 {
    margin-top: -6rem !important;
  }

  .mr-md-n96,
  .mx-md-n96 {
    margin-right: -6rem !important;
  }

  .mb-md-n96,
  .my-md-n96 {
    margin-bottom: -6rem !important;
  }

  .ml-md-n96,
  .mx-md-n96 {
    margin-left: -6rem !important;
  }

  .m-md-n124 {
    margin: -7.75rem !important;
  }

  .mt-md-n124,
  .my-md-n124 {
    margin-top: -7.75rem !important;
  }

  .mr-md-n124,
  .mx-md-n124 {
    margin-right: -7.75rem !important;
  }

  .mb-md-n124,
  .my-md-n124 {
    margin-bottom: -7.75rem !important;
  }

  .ml-md-n124,
  .mx-md-n124 {
    margin-left: -7.75rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1024px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .m-lg-12 {
    margin: 0.75rem !important;
  }

  .mt-lg-12,
  .my-lg-12 {
    margin-top: 0.75rem !important;
  }

  .mr-lg-12,
  .mx-lg-12 {
    margin-right: 0.75rem !important;
  }

  .mb-lg-12,
  .my-lg-12 {
    margin-bottom: 0.75rem !important;
  }

  .ml-lg-12,
  .mx-lg-12 {
    margin-left: 0.75rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-32 {
    margin: 2rem !important;
  }

  .mt-lg-32,
  .my-lg-32 {
    margin-top: 2rem !important;
  }

  .mr-lg-32,
  .mx-lg-32 {
    margin-right: 2rem !important;
  }

  .mb-lg-32,
  .my-lg-32 {
    margin-bottom: 2rem !important;
  }

  .ml-lg-32,
  .mx-lg-32 {
    margin-left: 2rem !important;
  }

  .m-lg-36 {
    margin: 2.25rem !important;
  }

  .mt-lg-36,
  .my-lg-36 {
    margin-top: 2.25rem !important;
  }

  .mr-lg-36,
  .mx-lg-36 {
    margin-right: 2.25rem !important;
  }

  .mb-lg-36,
  .my-lg-36 {
    margin-bottom: 2.25rem !important;
  }

  .ml-lg-36,
  .mx-lg-36 {
    margin-left: 2.25rem !important;
  }

  .m-lg-5 {
    margin: 2.5rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 2.5rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 2.5rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 2.5rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 2.5rem !important;
  }

  .m-lg-6 {
    margin: 3rem !important;
  }

  .mt-lg-6,
  .my-lg-6 {
    margin-top: 3rem !important;
  }

  .mr-lg-6,
  .mx-lg-6 {
    margin-right: 3rem !important;
  }

  .mb-lg-6,
  .my-lg-6 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-6,
  .mx-lg-6 {
    margin-left: 3rem !important;
  }

  .m-lg-56 {
    margin: 3.5rem !important;
  }

  .mt-lg-56,
  .my-lg-56 {
    margin-top: 3.5rem !important;
  }

  .mr-lg-56,
  .mx-lg-56 {
    margin-right: 3.5rem !important;
  }

  .mb-lg-56,
  .my-lg-56 {
    margin-bottom: 3.5rem !important;
  }

  .ml-lg-56,
  .mx-lg-56 {
    margin-left: 3.5rem !important;
  }

  .m-lg-58 {
    margin: 3.625rem !important;
  }

  .mt-lg-58,
  .my-lg-58 {
    margin-top: 3.625rem !important;
  }

  .mr-lg-58,
  .mx-lg-58 {
    margin-right: 3.625rem !important;
  }

  .mb-lg-58,
  .my-lg-58 {
    margin-bottom: 3.625rem !important;
  }

  .ml-lg-58,
  .mx-lg-58 {
    margin-left: 3.625rem !important;
  }

  .m-lg-64 {
    margin: 4rem !important;
  }

  .mt-lg-64,
  .my-lg-64 {
    margin-top: 4rem !important;
  }

  .mr-lg-64,
  .mx-lg-64 {
    margin-right: 4rem !important;
  }

  .mb-lg-64,
  .my-lg-64 {
    margin-bottom: 4rem !important;
  }

  .ml-lg-64,
  .mx-lg-64 {
    margin-left: 4rem !important;
  }

  .m-lg-7 {
    margin: 4.5rem !important;
  }

  .mt-lg-7,
  .my-lg-7 {
    margin-top: 4.5rem !important;
  }

  .mr-lg-7,
  .mx-lg-7 {
    margin-right: 4.5rem !important;
  }

  .mb-lg-7,
  .my-lg-7 {
    margin-bottom: 4.5rem !important;
  }

  .ml-lg-7,
  .mx-lg-7 {
    margin-left: 4.5rem !important;
  }

  .m-lg-96 {
    margin: 6rem !important;
  }

  .mt-lg-96,
  .my-lg-96 {
    margin-top: 6rem !important;
  }

  .mr-lg-96,
  .mx-lg-96 {
    margin-right: 6rem !important;
  }

  .mb-lg-96,
  .my-lg-96 {
    margin-bottom: 6rem !important;
  }

  .ml-lg-96,
  .mx-lg-96 {
    margin-left: 6rem !important;
  }

  .m-lg-124 {
    margin: 7.75rem !important;
  }

  .mt-lg-124,
  .my-lg-124 {
    margin-top: 7.75rem !important;
  }

  .mr-lg-124,
  .mx-lg-124 {
    margin-right: 7.75rem !important;
  }

  .mb-lg-124,
  .my-lg-124 {
    margin-bottom: 7.75rem !important;
  }

  .ml-lg-124,
  .mx-lg-124 {
    margin-left: 7.75rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .p-lg-12 {
    padding: 0.75rem !important;
  }

  .pt-lg-12,
  .py-lg-12 {
    padding-top: 0.75rem !important;
  }

  .pr-lg-12,
  .px-lg-12 {
    padding-right: 0.75rem !important;
  }

  .pb-lg-12,
  .py-lg-12 {
    padding-bottom: 0.75rem !important;
  }

  .pl-lg-12,
  .px-lg-12 {
    padding-left: 0.75rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-32 {
    padding: 2rem !important;
  }

  .pt-lg-32,
  .py-lg-32 {
    padding-top: 2rem !important;
  }

  .pr-lg-32,
  .px-lg-32 {
    padding-right: 2rem !important;
  }

  .pb-lg-32,
  .py-lg-32 {
    padding-bottom: 2rem !important;
  }

  .pl-lg-32,
  .px-lg-32 {
    padding-left: 2rem !important;
  }

  .p-lg-36 {
    padding: 2.25rem !important;
  }

  .pt-lg-36,
  .py-lg-36 {
    padding-top: 2.25rem !important;
  }

  .pr-lg-36,
  .px-lg-36 {
    padding-right: 2.25rem !important;
  }

  .pb-lg-36,
  .py-lg-36 {
    padding-bottom: 2.25rem !important;
  }

  .pl-lg-36,
  .px-lg-36 {
    padding-left: 2.25rem !important;
  }

  .p-lg-5 {
    padding: 2.5rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 2.5rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 2.5rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 2.5rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 2.5rem !important;
  }

  .p-lg-6 {
    padding: 3rem !important;
  }

  .pt-lg-6,
  .py-lg-6 {
    padding-top: 3rem !important;
  }

  .pr-lg-6,
  .px-lg-6 {
    padding-right: 3rem !important;
  }

  .pb-lg-6,
  .py-lg-6 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-6,
  .px-lg-6 {
    padding-left: 3rem !important;
  }

  .p-lg-56 {
    padding: 3.5rem !important;
  }

  .pt-lg-56,
  .py-lg-56 {
    padding-top: 3.5rem !important;
  }

  .pr-lg-56,
  .px-lg-56 {
    padding-right: 3.5rem !important;
  }

  .pb-lg-56,
  .py-lg-56 {
    padding-bottom: 3.5rem !important;
  }

  .pl-lg-56,
  .px-lg-56 {
    padding-left: 3.5rem !important;
  }

  .p-lg-58 {
    padding: 3.625rem !important;
  }

  .pt-lg-58,
  .py-lg-58 {
    padding-top: 3.625rem !important;
  }

  .pr-lg-58,
  .px-lg-58 {
    padding-right: 3.625rem !important;
  }

  .pb-lg-58,
  .py-lg-58 {
    padding-bottom: 3.625rem !important;
  }

  .pl-lg-58,
  .px-lg-58 {
    padding-left: 3.625rem !important;
  }

  .p-lg-64 {
    padding: 4rem !important;
  }

  .pt-lg-64,
  .py-lg-64 {
    padding-top: 4rem !important;
  }

  .pr-lg-64,
  .px-lg-64 {
    padding-right: 4rem !important;
  }

  .pb-lg-64,
  .py-lg-64 {
    padding-bottom: 4rem !important;
  }

  .pl-lg-64,
  .px-lg-64 {
    padding-left: 4rem !important;
  }

  .p-lg-7 {
    padding: 4.5rem !important;
  }

  .pt-lg-7,
  .py-lg-7 {
    padding-top: 4.5rem !important;
  }

  .pr-lg-7,
  .px-lg-7 {
    padding-right: 4.5rem !important;
  }

  .pb-lg-7,
  .py-lg-7 {
    padding-bottom: 4.5rem !important;
  }

  .pl-lg-7,
  .px-lg-7 {
    padding-left: 4.5rem !important;
  }

  .p-lg-96 {
    padding: 6rem !important;
  }

  .pt-lg-96,
  .py-lg-96 {
    padding-top: 6rem !important;
  }

  .pr-lg-96,
  .px-lg-96 {
    padding-right: 6rem !important;
  }

  .pb-lg-96,
  .py-lg-96 {
    padding-bottom: 6rem !important;
  }

  .pl-lg-96,
  .px-lg-96 {
    padding-left: 6rem !important;
  }

  .p-lg-124 {
    padding: 7.75rem !important;
  }

  .pt-lg-124,
  .py-lg-124 {
    padding-top: 7.75rem !important;
  }

  .pr-lg-124,
  .px-lg-124 {
    padding-right: 7.75rem !important;
  }

  .pb-lg-124,
  .py-lg-124 {
    padding-bottom: 7.75rem !important;
  }

  .pl-lg-124,
  .px-lg-124 {
    padding-left: 7.75rem !important;
  }

  .m-lg-n1 {
    margin: -0.25rem !important;
  }

  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }

  .m-lg-n2 {
    margin: -0.5rem !important;
  }

  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }

  .m-lg-n12 {
    margin: -0.75rem !important;
  }

  .mt-lg-n12,
  .my-lg-n12 {
    margin-top: -0.75rem !important;
  }

  .mr-lg-n12,
  .mx-lg-n12 {
    margin-right: -0.75rem !important;
  }

  .mb-lg-n12,
  .my-lg-n12 {
    margin-bottom: -0.75rem !important;
  }

  .ml-lg-n12,
  .mx-lg-n12 {
    margin-left: -0.75rem !important;
  }

  .m-lg-n3 {
    margin: -1rem !important;
  }

  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }

  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }

  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }

  .m-lg-n4 {
    margin: -1.5rem !important;
  }

  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }

  .m-lg-n32 {
    margin: -2rem !important;
  }

  .mt-lg-n32,
  .my-lg-n32 {
    margin-top: -2rem !important;
  }

  .mr-lg-n32,
  .mx-lg-n32 {
    margin-right: -2rem !important;
  }

  .mb-lg-n32,
  .my-lg-n32 {
    margin-bottom: -2rem !important;
  }

  .ml-lg-n32,
  .mx-lg-n32 {
    margin-left: -2rem !important;
  }

  .m-lg-n36 {
    margin: -2.25rem !important;
  }

  .mt-lg-n36,
  .my-lg-n36 {
    margin-top: -2.25rem !important;
  }

  .mr-lg-n36,
  .mx-lg-n36 {
    margin-right: -2.25rem !important;
  }

  .mb-lg-n36,
  .my-lg-n36 {
    margin-bottom: -2.25rem !important;
  }

  .ml-lg-n36,
  .mx-lg-n36 {
    margin-left: -2.25rem !important;
  }

  .m-lg-n5 {
    margin: -2.5rem !important;
  }

  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -2.5rem !important;
  }

  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -2.5rem !important;
  }

  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -2.5rem !important;
  }

  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -2.5rem !important;
  }

  .m-lg-n6 {
    margin: -3rem !important;
  }

  .mt-lg-n6,
  .my-lg-n6 {
    margin-top: -3rem !important;
  }

  .mr-lg-n6,
  .mx-lg-n6 {
    margin-right: -3rem !important;
  }

  .mb-lg-n6,
  .my-lg-n6 {
    margin-bottom: -3rem !important;
  }

  .ml-lg-n6,
  .mx-lg-n6 {
    margin-left: -3rem !important;
  }

  .m-lg-n56 {
    margin: -3.5rem !important;
  }

  .mt-lg-n56,
  .my-lg-n56 {
    margin-top: -3.5rem !important;
  }

  .mr-lg-n56,
  .mx-lg-n56 {
    margin-right: -3.5rem !important;
  }

  .mb-lg-n56,
  .my-lg-n56 {
    margin-bottom: -3.5rem !important;
  }

  .ml-lg-n56,
  .mx-lg-n56 {
    margin-left: -3.5rem !important;
  }

  .m-lg-n58 {
    margin: -3.625rem !important;
  }

  .mt-lg-n58,
  .my-lg-n58 {
    margin-top: -3.625rem !important;
  }

  .mr-lg-n58,
  .mx-lg-n58 {
    margin-right: -3.625rem !important;
  }

  .mb-lg-n58,
  .my-lg-n58 {
    margin-bottom: -3.625rem !important;
  }

  .ml-lg-n58,
  .mx-lg-n58 {
    margin-left: -3.625rem !important;
  }

  .m-lg-n64 {
    margin: -4rem !important;
  }

  .mt-lg-n64,
  .my-lg-n64 {
    margin-top: -4rem !important;
  }

  .mr-lg-n64,
  .mx-lg-n64 {
    margin-right: -4rem !important;
  }

  .mb-lg-n64,
  .my-lg-n64 {
    margin-bottom: -4rem !important;
  }

  .ml-lg-n64,
  .mx-lg-n64 {
    margin-left: -4rem !important;
  }

  .m-lg-n7 {
    margin: -4.5rem !important;
  }

  .mt-lg-n7,
  .my-lg-n7 {
    margin-top: -4.5rem !important;
  }

  .mr-lg-n7,
  .mx-lg-n7 {
    margin-right: -4.5rem !important;
  }

  .mb-lg-n7,
  .my-lg-n7 {
    margin-bottom: -4.5rem !important;
  }

  .ml-lg-n7,
  .mx-lg-n7 {
    margin-left: -4.5rem !important;
  }

  .m-lg-n96 {
    margin: -6rem !important;
  }

  .mt-lg-n96,
  .my-lg-n96 {
    margin-top: -6rem !important;
  }

  .mr-lg-n96,
  .mx-lg-n96 {
    margin-right: -6rem !important;
  }

  .mb-lg-n96,
  .my-lg-n96 {
    margin-bottom: -6rem !important;
  }

  .ml-lg-n96,
  .mx-lg-n96 {
    margin-left: -6rem !important;
  }

  .m-lg-n124 {
    margin: -7.75rem !important;
  }

  .mt-lg-n124,
  .my-lg-n124 {
    margin-top: -7.75rem !important;
  }

  .mr-lg-n124,
  .mx-lg-n124 {
    margin-right: -7.75rem !important;
  }

  .mb-lg-n124,
  .my-lg-n124 {
    margin-bottom: -7.75rem !important;
  }

  .ml-lg-n124,
  .mx-lg-n124 {
    margin-left: -7.75rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1280px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .m-xl-12 {
    margin: 0.75rem !important;
  }

  .mt-xl-12,
  .my-xl-12 {
    margin-top: 0.75rem !important;
  }

  .mr-xl-12,
  .mx-xl-12 {
    margin-right: 0.75rem !important;
  }

  .mb-xl-12,
  .my-xl-12 {
    margin-bottom: 0.75rem !important;
  }

  .ml-xl-12,
  .mx-xl-12 {
    margin-left: 0.75rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-32 {
    margin: 2rem !important;
  }

  .mt-xl-32,
  .my-xl-32 {
    margin-top: 2rem !important;
  }

  .mr-xl-32,
  .mx-xl-32 {
    margin-right: 2rem !important;
  }

  .mb-xl-32,
  .my-xl-32 {
    margin-bottom: 2rem !important;
  }

  .ml-xl-32,
  .mx-xl-32 {
    margin-left: 2rem !important;
  }

  .m-xl-36 {
    margin: 2.25rem !important;
  }

  .mt-xl-36,
  .my-xl-36 {
    margin-top: 2.25rem !important;
  }

  .mr-xl-36,
  .mx-xl-36 {
    margin-right: 2.25rem !important;
  }

  .mb-xl-36,
  .my-xl-36 {
    margin-bottom: 2.25rem !important;
  }

  .ml-xl-36,
  .mx-xl-36 {
    margin-left: 2.25rem !important;
  }

  .m-xl-5 {
    margin: 2.5rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 2.5rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 2.5rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 2.5rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 2.5rem !important;
  }

  .m-xl-6 {
    margin: 3rem !important;
  }

  .mt-xl-6,
  .my-xl-6 {
    margin-top: 3rem !important;
  }

  .mr-xl-6,
  .mx-xl-6 {
    margin-right: 3rem !important;
  }

  .mb-xl-6,
  .my-xl-6 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-6,
  .mx-xl-6 {
    margin-left: 3rem !important;
  }

  .m-xl-56 {
    margin: 3.5rem !important;
  }

  .mt-xl-56,
  .my-xl-56 {
    margin-top: 3.5rem !important;
  }

  .mr-xl-56,
  .mx-xl-56 {
    margin-right: 3.5rem !important;
  }

  .mb-xl-56,
  .my-xl-56 {
    margin-bottom: 3.5rem !important;
  }

  .ml-xl-56,
  .mx-xl-56 {
    margin-left: 3.5rem !important;
  }

  .m-xl-58 {
    margin: 3.625rem !important;
  }

  .mt-xl-58,
  .my-xl-58 {
    margin-top: 3.625rem !important;
  }

  .mr-xl-58,
  .mx-xl-58 {
    margin-right: 3.625rem !important;
  }

  .mb-xl-58,
  .my-xl-58 {
    margin-bottom: 3.625rem !important;
  }

  .ml-xl-58,
  .mx-xl-58 {
    margin-left: 3.625rem !important;
  }

  .m-xl-64 {
    margin: 4rem !important;
  }

  .mt-xl-64,
  .my-xl-64 {
    margin-top: 4rem !important;
  }

  .mr-xl-64,
  .mx-xl-64 {
    margin-right: 4rem !important;
  }

  .mb-xl-64,
  .my-xl-64 {
    margin-bottom: 4rem !important;
  }

  .ml-xl-64,
  .mx-xl-64 {
    margin-left: 4rem !important;
  }

  .m-xl-7 {
    margin: 4.5rem !important;
  }

  .mt-xl-7,
  .my-xl-7 {
    margin-top: 4.5rem !important;
  }

  .mr-xl-7,
  .mx-xl-7 {
    margin-right: 4.5rem !important;
  }

  .mb-xl-7,
  .my-xl-7 {
    margin-bottom: 4.5rem !important;
  }

  .ml-xl-7,
  .mx-xl-7 {
    margin-left: 4.5rem !important;
  }

  .m-xl-96 {
    margin: 6rem !important;
  }

  .mt-xl-96,
  .my-xl-96 {
    margin-top: 6rem !important;
  }

  .mr-xl-96,
  .mx-xl-96 {
    margin-right: 6rem !important;
  }

  .mb-xl-96,
  .my-xl-96 {
    margin-bottom: 6rem !important;
  }

  .ml-xl-96,
  .mx-xl-96 {
    margin-left: 6rem !important;
  }

  .m-xl-124 {
    margin: 7.75rem !important;
  }

  .mt-xl-124,
  .my-xl-124 {
    margin-top: 7.75rem !important;
  }

  .mr-xl-124,
  .mx-xl-124 {
    margin-right: 7.75rem !important;
  }

  .mb-xl-124,
  .my-xl-124 {
    margin-bottom: 7.75rem !important;
  }

  .ml-xl-124,
  .mx-xl-124 {
    margin-left: 7.75rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .p-xl-12 {
    padding: 0.75rem !important;
  }

  .pt-xl-12,
  .py-xl-12 {
    padding-top: 0.75rem !important;
  }

  .pr-xl-12,
  .px-xl-12 {
    padding-right: 0.75rem !important;
  }

  .pb-xl-12,
  .py-xl-12 {
    padding-bottom: 0.75rem !important;
  }

  .pl-xl-12,
  .px-xl-12 {
    padding-left: 0.75rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-32 {
    padding: 2rem !important;
  }

  .pt-xl-32,
  .py-xl-32 {
    padding-top: 2rem !important;
  }

  .pr-xl-32,
  .px-xl-32 {
    padding-right: 2rem !important;
  }

  .pb-xl-32,
  .py-xl-32 {
    padding-bottom: 2rem !important;
  }

  .pl-xl-32,
  .px-xl-32 {
    padding-left: 2rem !important;
  }

  .p-xl-36 {
    padding: 2.25rem !important;
  }

  .pt-xl-36,
  .py-xl-36 {
    padding-top: 2.25rem !important;
  }

  .pr-xl-36,
  .px-xl-36 {
    padding-right: 2.25rem !important;
  }

  .pb-xl-36,
  .py-xl-36 {
    padding-bottom: 2.25rem !important;
  }

  .pl-xl-36,
  .px-xl-36 {
    padding-left: 2.25rem !important;
  }

  .p-xl-5 {
    padding: 2.5rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 2.5rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 2.5rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 2.5rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 2.5rem !important;
  }

  .p-xl-6 {
    padding: 3rem !important;
  }

  .pt-xl-6,
  .py-xl-6 {
    padding-top: 3rem !important;
  }

  .pr-xl-6,
  .px-xl-6 {
    padding-right: 3rem !important;
  }

  .pb-xl-6,
  .py-xl-6 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-6,
  .px-xl-6 {
    padding-left: 3rem !important;
  }

  .p-xl-56 {
    padding: 3.5rem !important;
  }

  .pt-xl-56,
  .py-xl-56 {
    padding-top: 3.5rem !important;
  }

  .pr-xl-56,
  .px-xl-56 {
    padding-right: 3.5rem !important;
  }

  .pb-xl-56,
  .py-xl-56 {
    padding-bottom: 3.5rem !important;
  }

  .pl-xl-56,
  .px-xl-56 {
    padding-left: 3.5rem !important;
  }

  .p-xl-58 {
    padding: 3.625rem !important;
  }

  .pt-xl-58,
  .py-xl-58 {
    padding-top: 3.625rem !important;
  }

  .pr-xl-58,
  .px-xl-58 {
    padding-right: 3.625rem !important;
  }

  .pb-xl-58,
  .py-xl-58 {
    padding-bottom: 3.625rem !important;
  }

  .pl-xl-58,
  .px-xl-58 {
    padding-left: 3.625rem !important;
  }

  .p-xl-64 {
    padding: 4rem !important;
  }

  .pt-xl-64,
  .py-xl-64 {
    padding-top: 4rem !important;
  }

  .pr-xl-64,
  .px-xl-64 {
    padding-right: 4rem !important;
  }

  .pb-xl-64,
  .py-xl-64 {
    padding-bottom: 4rem !important;
  }

  .pl-xl-64,
  .px-xl-64 {
    padding-left: 4rem !important;
  }

  .p-xl-7 {
    padding: 4.5rem !important;
  }

  .pt-xl-7,
  .py-xl-7 {
    padding-top: 4.5rem !important;
  }

  .pr-xl-7,
  .px-xl-7 {
    padding-right: 4.5rem !important;
  }

  .pb-xl-7,
  .py-xl-7 {
    padding-bottom: 4.5rem !important;
  }

  .pl-xl-7,
  .px-xl-7 {
    padding-left: 4.5rem !important;
  }

  .p-xl-96 {
    padding: 6rem !important;
  }

  .pt-xl-96,
  .py-xl-96 {
    padding-top: 6rem !important;
  }

  .pr-xl-96,
  .px-xl-96 {
    padding-right: 6rem !important;
  }

  .pb-xl-96,
  .py-xl-96 {
    padding-bottom: 6rem !important;
  }

  .pl-xl-96,
  .px-xl-96 {
    padding-left: 6rem !important;
  }

  .p-xl-124 {
    padding: 7.75rem !important;
  }

  .pt-xl-124,
  .py-xl-124 {
    padding-top: 7.75rem !important;
  }

  .pr-xl-124,
  .px-xl-124 {
    padding-right: 7.75rem !important;
  }

  .pb-xl-124,
  .py-xl-124 {
    padding-bottom: 7.75rem !important;
  }

  .pl-xl-124,
  .px-xl-124 {
    padding-left: 7.75rem !important;
  }

  .m-xl-n1 {
    margin: -0.25rem !important;
  }

  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }

  .m-xl-n2 {
    margin: -0.5rem !important;
  }

  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }

  .m-xl-n12 {
    margin: -0.75rem !important;
  }

  .mt-xl-n12,
  .my-xl-n12 {
    margin-top: -0.75rem !important;
  }

  .mr-xl-n12,
  .mx-xl-n12 {
    margin-right: -0.75rem !important;
  }

  .mb-xl-n12,
  .my-xl-n12 {
    margin-bottom: -0.75rem !important;
  }

  .ml-xl-n12,
  .mx-xl-n12 {
    margin-left: -0.75rem !important;
  }

  .m-xl-n3 {
    margin: -1rem !important;
  }

  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }

  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }

  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }

  .m-xl-n4 {
    margin: -1.5rem !important;
  }

  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }

  .m-xl-n32 {
    margin: -2rem !important;
  }

  .mt-xl-n32,
  .my-xl-n32 {
    margin-top: -2rem !important;
  }

  .mr-xl-n32,
  .mx-xl-n32 {
    margin-right: -2rem !important;
  }

  .mb-xl-n32,
  .my-xl-n32 {
    margin-bottom: -2rem !important;
  }

  .ml-xl-n32,
  .mx-xl-n32 {
    margin-left: -2rem !important;
  }

  .m-xl-n36 {
    margin: -2.25rem !important;
  }

  .mt-xl-n36,
  .my-xl-n36 {
    margin-top: -2.25rem !important;
  }

  .mr-xl-n36,
  .mx-xl-n36 {
    margin-right: -2.25rem !important;
  }

  .mb-xl-n36,
  .my-xl-n36 {
    margin-bottom: -2.25rem !important;
  }

  .ml-xl-n36,
  .mx-xl-n36 {
    margin-left: -2.25rem !important;
  }

  .m-xl-n5 {
    margin: -2.5rem !important;
  }

  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -2.5rem !important;
  }

  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -2.5rem !important;
  }

  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -2.5rem !important;
  }

  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -2.5rem !important;
  }

  .m-xl-n6 {
    margin: -3rem !important;
  }

  .mt-xl-n6,
  .my-xl-n6 {
    margin-top: -3rem !important;
  }

  .mr-xl-n6,
  .mx-xl-n6 {
    margin-right: -3rem !important;
  }

  .mb-xl-n6,
  .my-xl-n6 {
    margin-bottom: -3rem !important;
  }

  .ml-xl-n6,
  .mx-xl-n6 {
    margin-left: -3rem !important;
  }

  .m-xl-n56 {
    margin: -3.5rem !important;
  }

  .mt-xl-n56,
  .my-xl-n56 {
    margin-top: -3.5rem !important;
  }

  .mr-xl-n56,
  .mx-xl-n56 {
    margin-right: -3.5rem !important;
  }

  .mb-xl-n56,
  .my-xl-n56 {
    margin-bottom: -3.5rem !important;
  }

  .ml-xl-n56,
  .mx-xl-n56 {
    margin-left: -3.5rem !important;
  }

  .m-xl-n58 {
    margin: -3.625rem !important;
  }

  .mt-xl-n58,
  .my-xl-n58 {
    margin-top: -3.625rem !important;
  }

  .mr-xl-n58,
  .mx-xl-n58 {
    margin-right: -3.625rem !important;
  }

  .mb-xl-n58,
  .my-xl-n58 {
    margin-bottom: -3.625rem !important;
  }

  .ml-xl-n58,
  .mx-xl-n58 {
    margin-left: -3.625rem !important;
  }

  .m-xl-n64 {
    margin: -4rem !important;
  }

  .mt-xl-n64,
  .my-xl-n64 {
    margin-top: -4rem !important;
  }

  .mr-xl-n64,
  .mx-xl-n64 {
    margin-right: -4rem !important;
  }

  .mb-xl-n64,
  .my-xl-n64 {
    margin-bottom: -4rem !important;
  }

  .ml-xl-n64,
  .mx-xl-n64 {
    margin-left: -4rem !important;
  }

  .m-xl-n7 {
    margin: -4.5rem !important;
  }

  .mt-xl-n7,
  .my-xl-n7 {
    margin-top: -4.5rem !important;
  }

  .mr-xl-n7,
  .mx-xl-n7 {
    margin-right: -4.5rem !important;
  }

  .mb-xl-n7,
  .my-xl-n7 {
    margin-bottom: -4.5rem !important;
  }

  .ml-xl-n7,
  .mx-xl-n7 {
    margin-left: -4.5rem !important;
  }

  .m-xl-n96 {
    margin: -6rem !important;
  }

  .mt-xl-n96,
  .my-xl-n96 {
    margin-top: -6rem !important;
  }

  .mr-xl-n96,
  .mx-xl-n96 {
    margin-right: -6rem !important;
  }

  .mb-xl-n96,
  .my-xl-n96 {
    margin-bottom: -6rem !important;
  }

  .ml-xl-n96,
  .mx-xl-n96 {
    margin-left: -6rem !important;
  }

  .m-xl-n124 {
    margin: -7.75rem !important;
  }

  .mt-xl-n124,
  .my-xl-n124 {
    margin-top: -7.75rem !important;
  }

  .mr-xl-n124,
  .mx-xl-n124 {
    margin-right: -7.75rem !important;
  }

  .mb-xl-n124,
  .my-xl-n124 {
    margin-bottom: -7.75rem !important;
  }

  .ml-xl-n124,
  .mx-xl-n124 {
    margin-left: -7.75rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

/**********

This _news.scss stylesheet applies to the "Featured" section on the home page. The purpose of the "News" section is to feature top UCLA research and news headlines from UCLA Newsroom on the Gateway homepage.

The corresponding HTML is located at www/resources/views/inc/homepage/news.blade.php. This blade contains both HTML, for structure, and PHP code, in order to pull from UCLA Newsroom's RSS feed for each story (see www/app/Model/Homepage.php for code) Contact Joseph Maddela (jmaddela@stratcomm.ucla.edu) or John Kim (johnkim@stratcomm.ucla.edu) if there is an error.


HTML structure: (see www/resources/views/inc/homepage/news.blade.php)

I. "Featured" Heading

II. Tier 1 story
  a. list of story (for accessibility)
    b. link to story
      - image
    c. content wrapper
      - title
        * link to story
      - description/blurb
      - source

III. Tier 2 stories
  a. list of stories (for accessibility)
    b. link to story
      - image/thumbnail
      - story title
        * span for the title text
    c. content wrapper
      - description/blurb
      - source

* Note about wrapping both the image and heading in an anchor tag: this is for accessibility to avoid redundant links with the same destination. Otherwise, when a screenreader iterates through the page, it will read out the links twice.

The spans in the tier 2 stories are for styling purposes.

***********/

.news {
  margin-bottom: 32px;
  /***************
	.news__see-all is a link to newsroom.ucla.edu. On mobile, it appears below the news stories. On tablet and desktop, it appears aligned with the News title.
	****************/
  /***************
	.news__featured is the first story that appears in News. On mobile, it takes 100% of the viewport width. On desktop, it appears as one column, on the left of the secondary stories.
	****************/
  /***************
  .news__more-stories include the secondary stories that appear below the featured story.
  On mobile and tablet, all stories appear in one column, stacked.
  On desktop, stories appear in a 1x3 grid.
  ****************/
}

@media (min-width: 768px) {
  .news {
    margin-bottom: 0px;
  }
}

@media (min-width: 1024px) {
  .news {
    margin: 0 24px 48px;
  }
}

@media (min-width: 1280px) {
  .news {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  }
}

.news__wrapper {
  position: relative;
}

.news__title {
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin: 0 24px 32px;
  border-left: 8px solid #FFD100;
}

.news__title::before {
  margin-right: 16px;
  content: "";
}

@media (min-width: 768px) {
  .news__title {
    width: 49.2%;
    display: block;
    float: left;
    margin-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  .news__title {
    margin-left: 0;
  }
}

.news__see-all {
  font-weight: bold;
  line-height: 1rem;
  margin: 0 0 12px 22px;
}

.news__see-all--mobile {
  float: left;
}

@media (min-width: 768px) {
  .news__see-all--mobile {
    display: none;
  }
}

.news__see-all--desktop {
  width: 49.2%;
  padding-top: 16px;
  position: absolute;
  right: 24px;
  text-align: right;
}

@media (max-width: 767.98px) {
  .news__see-all--desktop {
    display: none;
  }
}

.news__see-all a {
  text-decoration: none;
}

.news__see-all a:link {
  color: #00598C;
}

.news__see-all a:focus {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

.news__see-all a:hover {
  background-color: #0079BF;
}

.news__see-all a:hover,
.news__see-all a:active {
  color: #FFFFFF;
  text-decoration: none;
}

.news__see-all a:active {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

.news__see-all a:visited {
  color: #5223B0;
}

.news__see-all a:visited:hover {
  color: #FFFFFF;
}

.news__see-all a:visited {
  color: #00598C;
}

.news__see-all a:visited:focus {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

.news__see-all a:visited:focus:hover {
  color: #FFFFFF;
}

.news__see-all a:visited:active {
  color: #FFFFFF;
  background-color: #003B5C;
}

.news__featured {
  padding-bottom: 24px;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .news__featured {
    margin-bottom: 0;
    display: block;
    float: left;
  }
}

@media (min-width: 1024px) {
  .news__featured {
    width: 49.2%;
  }
}

.news__featured a {
  text-decoration: none;
}

.news__featured a:focus span {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

.news__featured a:focus span:hover {
  color: #FFFFFF;
  background-color: #0079BF;
}

.news__featured a:hover {
  background-color: transparent;
  color: #00598C;
}

.news__featured a:visited:hover {
  color: #5223B0;
}

.news__featured a:active {
  background-color: transparent;
}

.news__featured a:active span {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

.news__featured-image {
  width: 100%;
}

.news__featured-title {
  background: #FFFFFF;
  font-size: 2.25rem;
  line-height: 2.5rem;
  padding: 24px 24px 0 24px;
  position: relative;
  margin: 0 24px;
  top: -24px;
}

@media (min-width: 768px) {
  .news__featured-title {
    margin: 0 36px;
    padding: 24px 29px 0 29px;
  }
}

.news__featured-title span {
  /*
				pseudo-classes() is a SASS mixin located at www/resources/assets/sass/utilies/_mixins

				This was created because both the image and title are wrapped in the anchor element, but &-title is more specifically a span. Instead of duplicating the anchor link pseudo-classes, we can use a mixin.
				*/
}

.news__featured-title span:link {
  color: #00598C;
}

.news__featured-title span:focus {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

.news__featured-title span:hover {
  background-color: #0079BF;
}

.news__featured-title span:hover,
.news__featured-title span:active {
  color: #FFFFFF;
  text-decoration: none;
}

.news__featured-title span:active {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

.news__featured-title span:visited {
  color: #5223B0;
}

.news__featured-title span:visited:hover {
  color: #FFFFFF;
}

.news__featured-blurb {
  padding: 0 24px;
  margin: 0 24px;
  position: relative;
}

@media (min-width: 768px) {
  .news__featured-blurb {
    margin: 0 36px;
    padding: 0 29px;
  }
}

.news__more-stories {
  width: 100%;
  padding-top: 24px;
}

@media (min-width: 768px) {
  .news__more-stories {
    display: block;
    float: left;
  }
}

@media (min-width: 1024px) {
  .news__more-stories {
    width: 49.2%;
    margin: 0;
    padding-top: 0;
  }
}

.news__more-stories-card {
  margin: 0 24px;
  float: left;
}

@media (min-width: 768px) {
  .news__more-stories-card {
    margin: 32px 60px 24px 60px;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .news__more-stories-card {
    margin: 0;
    padding: 27px 24px 27px 48px;
  }
}

.news__more-stories a {
  text-decoration: none;
}

.news__more-stories a:focus span {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

.news__more-stories a:focus span:hover {
  color: #FFFFFF;
  background-color: #0079BF;
}

.news__more-stories a:hover {
  background-color: transparent;
  color: #00598C;
}

.news__more-stories a:visited:hover {
  color: #5223B0;
}

.news__more-stories a:active {
  background-color: transparent;
}

.news__more-stories a:active span {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

.news__more-stories-image {
  height: auto;
  width: 100%;
  max-width: 72px;
}

@media (min-width: 768px) {
  .news__more-stories-image {
    max-width: 168px;
  }
}

@media (min-width: 1024px) {
  .news__more-stories-image {
    max-width: 120px;
  }
}

.news__more-stories-image-wrapper {
  float: left;
  margin-right: 12px;
}

@media (min-width: 768px) {
  .news__more-stories-image-wrapper {
    display: block;
    margin-right: 48px;
  }
}

@media (min-width: 1024px) {
  .news__more-stories-image-wrapper {
    margin-right: 16px;
    margin-bottom: 5px;
  }
}

.news__more-stories-title {
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .news__more-stories-title {
    font-size: 1.5rem;
    line-height: 1.6875rem;
  }
}

.news__more-stories-title-text:link {
  color: #00598C;
}

.news__more-stories-title-text:focus {
  color: #0079BF;
  outline: 2px dotted #0079BF;
}

.news__more-stories-title-text:hover {
  background-color: #0079BF;
}

.news__more-stories-title-text:hover,
.news__more-stories-title-text:active {
  color: #FFFFFF;
  text-decoration: none;
}

.news__more-stories-title-text:active {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

.news__more-stories-title-text:visited {
  color: #5223B0;
}

.news__more-stories-title-text:visited:hover {
  color: #FFFFFF;
}

.news__more-stories-description {
  margin-bottom: 24px;
  float: left;
  width: 66.8%;
}

@media (min-width: 768px) {
  .news__more-stories-description {
    float: none;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .news__more-stories-description {
    margin-bottom: 0;
  }
}

.news__more-stories-description-text {
  font-size: 0.8rem;
  line-height: 1rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .news__more-stories-description-text {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .news__more-stories-description-text {
    font-size: 0.8rem;
    line-height: 1rem;
    margin: 0;
  }
}

.athletics {
  margin: 0 auto;
  margin-bottom: 64px;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 64px;
  padding-top: 32px;
  /***************
    .story__featured__tier1 is the top story that appears first, above the secondary stories.
    On mobile, the entire story card has 100% viewport width.
    On desktop, the story title, description, and source appear in a white overlay above the image.
  ****************/
  /***************
  .story__featured__tier2 include the secondary stories that appear below the top tier1 story.
  On mobile, all stories appear in one column, stacked.
  On desktop, stories appear in a 1x3 grid.
  ****************/
}

.athletics .ucla a:not(.page):visited {
  color: #FFFFFF;
}

.athletics .btn {
  clear: both;
  margin: auto;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .athletics {
    padding-top: 48px;
  }
}

@media (min-width: 1024px) {
  .athletics {
    padding-top: 64px;
  }
}

.athletics .clear {
  clear: both;
}

.athletics__wrapper {
  position: relative;
}

.athletics__subheading {
  color: #666666;
  font-weight: 700;
}

.athletics__text {
  padding-bottom: 36px;
}

@media (min-width: 1024px) {
  .athletics__text {
    width: 60%;
  }
}

.athletics .select__menu {
  padding: 12px 16px;
  background-color: transparent;
  border: 2px solid #00598C;
  color: #00598C !important;
  font-size: 16px;
  font-weight: bold;
  border-radius: 2px;
  line-height: 1.25;
  border-radius: 2px;
  background-image: url(../img/arrow-down.svg);
  background-repeat: no-repeat;
  min-width: 205px;
  margin-bottom: 5px;
}

.athletics .select__menu option {
  margin-left: 10px;
}

.athletics .select__menu:hover {
  background-color: #00598C;
  color: #FFFFFF !important;
  background-image: url(../img/arrow-down--white.svg);
}

.athletics .dropdown {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.athletics .dropdown-list-container {
  background: #FFFFFF;
  width: 150px;
  display: none;
  position: absolute;
  z-index: 9999;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  transition-duration: 0s;
  transition-timing-function: ease;
  padding: 16px;
}

.athletics .dropdown-list-container li {
  list-style-type: none;
  padding: 5px 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #2774AE;
  font-weight: 700;
  margin-bottom: 12px;
}

.athletics .dropdown-list-container li:hover {
  background-color: #2774AE;
  color: #FFFFFF;
  cursor: pointer;
}

.athletics .dropdown-list-container li:last-child {
  margin-bottom: 0;
}

.athletics .dropdown-list-container ul {
  padding: 0;
  margin: 0;
}

.athletics .dropdown:hover .dropdown-list-container {
  display: block;
}

.athletics .dropdown-btn {
  position: relative;
  padding: 12px 38px 12px 16px;
}

.athletics .dropdown-btn::after {
  content: "";
  display: block;
  position: absolute;
  background-image: url(../img/arrow-down.svg);
  right: 8px;
  top: 10px;
  height: 24px;
  width: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

.athletics .story {
  padding: 0;
  min-height: 970px;
}

@media (min-width: 768px) {
  .athletics .story {
    min-height: 1123px;
  }
}

@media (min-width: 1024px) {
  .athletics .story {
    min-height: 760px;
  }
}

.athletics .story .story__featured {
  background-color: #FFFFFF;
  margin: 0 -24px;
}

@media (min-width: 768px) {
  .athletics .story .story__featured {
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .athletics .story .story__featured {
    padding-bottom: 32px;
  }
}

.athletics .athletics-loading {
  display: none;
  position: relative;
  top: 148px;
  text-align: center;
}

.athletics .athletics-loading img {
  max-width: 100%;
  width: 48px;
}

@media (min-width: 768px) {
  .athletics .athletics-loading img {
    display: block;
    margin: 0 auto;
  }
}

.athletics .story__featured__tier1 .story__featured-card {
  min-height: 415px;
}

.athletics .story__featured__tier1 .story__featured-card a.img-link:hover {
  background: none;
}

.athletics .story__featured__tier1 .story__featured-card .story__featured-image {
  width: 100%;
  padding-top: 12px;
}

@media (min-width: 768px) {
  .athletics .story__featured__tier1 .story__featured-card .story__featured-image {
    padding-top: 53px;
  }
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier1 .story__featured-card .story__featured-image {
    padding-top: 36px;
    width: 675px;
    height: auto;
  }
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier1 .story__featured-card .story__featured-title {
    font-size: 36px;
    line-height: 40px;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
}

.athletics .story__featured__tier1 .story__featured-card .story__featured-title .link:not(.page):visited {
  color: #00598C;
}

.athletics .story__featured__tier1 .story__featured-card .story__featured-title .link:not(.page):visited:hover {
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier1 .story__featured-card .story__featured-date {
    color: #666;
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    padding-bottom: 0;
    margin-bottom: 8px;
  }
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier1 .story__featured-card .story__featured-blurb {
    color: #333;
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier1 .story__featured-card .story__featured-source {
    font-size: 14px;
    line-height: 18px;
  }
}

.athletics .story__featured__tier1 .story__featured-content {
  margin: 0 10px;
  padding: 24px 14px;
}

@media (min-width: 768px) {
  .athletics .story__featured__tier1 .story__featured-content {
    margin: 0 15px;
    padding: 32px 32px;
    top: -36px;
  }
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier1 .story__featured-content {
    transform: none;
    top: 88px;
  }
}

.athletics .story__featured__tier1 .story__featured-content .story__featured-source {
  padding-bottom: 0;
}

.athletics .story__featured__tier1 .story__featured-content .story__featured-source a {
  text-decoration: none;
}

.athletics .story__featured__tier1 .story__featured-content .story__featured-source a:not(.page):visited {
  color: #00598C;
}

.athletics .story__featured__tier1 .story__featured-content .story__featured-source a:not(.page):visited:hover {
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier2 {
    padding-bottom: 48px;
  }
}

.athletics .story__featured__tier2 .splide__slider {
  margin-bottom: 28px;
}

.athletics .story__featured__tier2 .splide__slide:focus > .story__secondary-card {
  outline: 2px dotted #ffffff;
  outline-offset: -3px;
}

.athletics .story__featured__tier2 #athletics-slider {
  width: 100%;
}

.athletics .story__featured__tier2 .game-container {
  display: none;
}

@media (min-width: 1024px) {
  .athletics .story__featured__tier2 .game-container {
    display: block;
  }
}

.athletics .story__featured__tier2 .splide__pagination {
  margin-bottom: 35px;
}

@media (min-width: 768px) {
  .athletics .story__featured__tier2 .splide__pagination {
    margin-bottom: 42px;
  }
}

.athletics .story__featured__tier2 .story__secondary-card {
  min-width: auto;
  background: #2774AE;
}

@media (min-width: 1280px) {
  .athletics .story__featured__tier2 .story__secondary-card {
    height: 100%;
    max-height: 240px;
  }
}

.athletics .story__featured__tier2 .story__secondary-card-title {
  font-size: 16px;
  margin: 0;
  padding: 9px 15px 12px;
  line-height: 20px;
}

.athletics .story__featured__tier2 .story__secondary-card-link:hover::before {
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
  height: 100%;
}

.athletics .story__featured__tier2 .story__secondary-card-link:focus > .story__secondary-card-title > span {
  outline: 2px dotted #ffffff;
}

.athletics .story__featured__tier2 .story__secondary-card-link span {
  color: #FFFFFF;
  font-weight: 700;
  line-height: 20px;
}

.athletics .story__featured__tier2 .story__secondary-card-image {
  height: 100%;
  width: auto;
}

.athletics .story__featured__tier2 .story__secondary-card.game-event {
  width: 100%;
  position: relative;
}

.athletics .story__featured__tier2 .story__secondary-card.game-event .story__secondary-card-container {
  padding: 10px;
  text-align: center;
  position: relative;
}

.athletics .story__featured__tier2 .story__secondary-card.game-event a::before,
.athletics .story__featured__tier2 .story__secondary-card.game-event .story__secondary-card-link span {
  background: none;
}

.athletics .story__featured__tier2 .story__secondary-card.game-event .tickets-container {
  background-color: #FFFFFF;
  border: 2px solid #00598C;
  color: #00598C;
  font-weight: 700;
  padding: 20px;
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.athletics .story__featured__tier2 .story__secondary-card-container {
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
}

.athletics .story__featured__tier2 .story__secondary-card-container .story__secondary-card-title {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 20px;
}

.athletics .story__featured__tier2 .story__secondary-card-container .event-info {
  color: #FFFFFF;
  line-height: 22px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  min-height: 75px;
}

.athletics .story__featured__tier2 .story__secondary-card-container .event-info span {
  color: #FFD100;
  font-size: 20px;
}

.athletics .story__featured__tier2 .story__secondary-card-container .event-location {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 18px;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 20px;
}

@media (min-width: 1280px) {
  .athletics .story__featured__tier2 .story__secondary-card-container .event-location {
    font-size: 12px;
  }
}

.athletics .story__featured__tier2 .story__secondary-card-container .event-location br {
  display: none;
}

.ham {
  padding: 0 6px;
  height: 32px;
  width: 32px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  cursor: pointer;
  position: absolute;
  right: 32px;
  margin-top: -5px;
}

@media (min-width: 1024px) {
  .ham {
    display: none;
  }
}

.ham.is-active {
  padding-top: 15px;
}

.ham.is-active .ham__middle {
  opacity: 0;
  height: 0;
  transition: 0.2s ease;
  -webkit-backface-visibility: hidden;
}

.ham.is-active::before {
  transform: rotate(45deg);
  margin-top: -7.5px;
  transition: margin-bottom 0.5s ease, transform 0.5s ease;
  -webkit-backface-visibility: hidden;
}

.ham.is-active::after {
  transform: rotate(-45deg);
  margin-top: -7.5px;
  transition: margin-top 0.5s ease, transform 0.5s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.ham__middle {
  background: #2774AE;
  height: 3px;
  width: 20px;
  display: block;
  position: absolute;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.ham::before {
  height: 3px;
  width: 20px;
  display: block;
  position: absolute;
  content: "";
  background: #2774AE;
  margin-top: -7.5px;
  transition: margin-bottom 0.5s ease, transform 0.5s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.ham::after {
  height: 3px;
  width: 20px;
  display: block;
  position: absolute;
  content: "";
  background: #2774AE;
  margin-top: 7px;
  transition: margin-top 0.5s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

::-webkit-search-cancel-button {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: #999;
  border-radius: 15px;
  background-origin: padding-box;
  background-position: center center;
  background-size: cover;
  /* Base64 background is the only version that works across the three major browsers on desktop and mobile devices. */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGJJREFUeNpiYBgFIxP8//8/AYjfA7EBEWoNoGoTSLEApOE/IUuQDAerJcUCA0KWEKOGbEsoNhyfQVQzHI8l1DMchyUkGc40GPIE7YKIppFM02RK84xGj6KCtoXdKBheACDAAKIFkkRiIzOGAAAAAElFTkSuQmCC);
}

html,
body {
  overflow-x: hidden;
  position: relative;
}

body.no-scroll {
  height: 100vh;
  overflow: hidden;
  overflow-x: inherit;
  scrollbar-width: none;
  -webkit-scrollbar-width: none;
  width: 100%;
  overflow: auto;
}

#header {
  border-top: 8px solid #2774AE;
  background: #FFFFFF;
}

@media (min-width: 1024px) {
  #header {
    height: 165px;
  }
}

#header a:focus {
  outline: 2px dotted #2774AE;
}

#header.is-active {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#header-wrap {
  max-width: 1174px;
  padding: 0 0 8px;
  position: relative;
  width: 100%;
  overflow: visible;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  #header-wrap {
    padding: 0;
    display: block;
  }
}

@media (min-width: 1024px) {
  #header-wrap {
    height: 165px;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    overflow: visible;
  }
}

@media (min-width: 1280px) {
  #header-wrap {
    padding: 0;
  }
}

#header-wrap.is-active .primary-nav__wrap {
  top: 0;
  position: absolute;
  display: block;
}

#header-wrap.is-active .primary-nav__top-level {
  position: absolute;
  display: block;
}

@media (min-width: 1024px) {
  #header-wrap.is-active .primary-nav__top-level {
    position: inherit;
    right: 0;
  }
}

#header-wrap.is-active .primary-nav__top-level li#search-li a.gsst_a::after {
  display: none;
}

@media (min-width: 768px) {
  #header .university-logo {
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

#header .university-logo a {
  background: #2774AE;
  display: block;
  width: 85px;
  height: 40px;
  margin: 16px 24px 24px;
  padding: 10px 13px;
}

@media (min-width: 768px) {
  #header .university-logo a {
    width: 119px;
    height: 56px;
    margin: 24px;
    padding: 14px 18px;
  }
}

@media (min-width: 1024px) {
  #header .university-logo a {
    margin: 24px 0 0;
  }
}

.header-components {
  height: 24px;
  display: flex;
  margin: 0 24px;
}

@media (min-width: 768px) {
  .header-components {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    float: right;
    margin: 45px 0 0;
  }
}

@media (min-width: 1024px) {
  .header-components {
    margin-top: 24px;
  }
}

.header-components__weather {
  height: 40px;
  display: flex;
}

@media (min-width: 768px) {
  .header-components__weather {
    margin-right: 104px;
  }
}

@media (min-width: 1024px) {
  .header-components__weather {
    margin-right: 0;
    min-width: 585px;
  }
}

.header-components__weather #weather {
  display: flex;
}

.header-components__weather p {
  font-size: 14px;
  color: #333333;
}

@media (min-width: 1024px) {
  .header-components__weather p {
    margin-right: 16px;
    padding-top: 8px;
  }
}

.header-components img {
  height: 24px;
  margin: 0 4px 0 0;
}

@media (min-width: 1024px) {
  .header-components img {
    margin: 8px 12px 0 0;
  }
}

.header-components__button {
  display: none !important;
  border: 0 !important;
}

@media (min-width: 1024px) {
  .header-components__button {
    display: inline-block !important;
    margin: 0 0 0 16px;
  }
}

.header-components__button.give {
  color: #FFFFFF !important;
  padding: 12px 16px 8px 16px;
}

.header-components__button::after {
  display: none !important;
}

.primary-nav {
  position: absolute;
  display: block;
  overflow: hidden;
  height: 100vh;
  width: 100%;
  scrollbar-width: none;
  -webkit-scrollbar-width: none;
  background: #FFFFFF;
  right: -100%;
  z-index: 12;
  transition: right 0.5s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

@media (min-width: 768px) {
  .primary-nav {
    height: calc(100vh - 106px);
    width: 320px;
  }
}

@media (min-width: 1024px) {
  .primary-nav {
    position: relative;
    right: unset;
    width: 100%;
    max-width: 1176px;
    margin: 0 auto;
    overflow: visible;
    height: 48px;
    top: -58px;
    transition-property: all;
    transition-duration: 0s;
    transition-timing-function: ease;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
  }
}

.primary-nav.is-active {
  position: absolute;
  display: block;
  overflow: hidden;
  height: 100vh;
  max-width: 100%;
  right: 0;
  scrollbar-width: none;
  -webkit-scrollbar-width: none;
  transition: right 0.5s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

@media (min-width: 1024px) {
  .primary-nav.is-active {
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-property: all;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
  }
}

.primary-nav__top-level-li,
.primary-nav__top-level-link,
.primary-nav__second-level-link,
.primary-nav__top-level-mobile-link {
  color: #00598C;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.primary-nav__top-level-li:hover,
.primary-nav__top-level-link:hover,
.primary-nav__second-level-link:hover,
.primary-nav__top-level-mobile-link:hover {
  color: #FFFFFF;
  background: #2774AE;
}

@media (hover: none) {
  .primary-nav__top-level-li:hover,
  .primary-nav__top-level-link:hover,
  .primary-nav__second-level-link:hover,
  .primary-nav__top-level-mobile-link:hover {
    color: #00598C;
    background: #FFFFFF;
  }
}

.primary-nav__top-level-li:focus,
.primary-nav__top-level-link:focus,
.primary-nav__second-level-link:focus,
.primary-nav__top-level-mobile-link:focus {
  outline: 2px dotted #00598C;
  color: #00598C;
}

.primary-nav__top-level-li:focus:hover,
.primary-nav__top-level-li:focus:active,
.primary-nav__top-level-link:focus:hover,
.primary-nav__top-level-link:focus:active,
.primary-nav__second-level-link:focus:hover,
.primary-nav__second-level-link:focus:active,
.primary-nav__top-level-mobile-link:focus:hover,
.primary-nav__top-level-mobile-link:focus:active {
  background: #003B5C;
  color: #FFFFFF;
}

.primary-nav__top-level-li:visited,
.primary-nav__top-level-link:visited,
.primary-nav__second-level-link:visited,
.primary-nav__top-level-mobile-link:visited {
  color: #00598C;
}

.primary-nav__top-level-li:visited:hover,
.primary-nav__top-level-link:visited:hover,
.primary-nav__second-level-link:visited:hover,
.primary-nav__top-level-mobile-link:visited:hover {
  color: #FFFFFF;
}

.primary-nav__top-level-li:active,
.primary-nav__top-level-link:active,
.primary-nav__second-level-link:active,
.primary-nav__top-level-mobile-link:active {
  background: #003B5C;
  color: #FFFFFF;
}

.primary-nav__wrap {
  border-top: 1px solid #CCCCCC;
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
  background: #FFFFFF;
  height: 100vh;
}

@media (min-width: 1024px) {
  .primary-nav__wrap {
    position: relative;
    border-top: 0;
    max-width: 1176px;
    height: auto;
  }
}

.primary-nav__top-level {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  position: absolute;
  display: block;
  width: 100%;
  z-index: 10;
  background: #FFFFFF;
  height: 80vh;
  padding-bottom: 80px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-scrollbar-width: none;
}

.primary-nav__top-level::-webkit-scrollbar {
  width: 0;
  -webkit-appearance: none;
}

@media (min-width: 1024px) {
  .primary-nav__top-level {
    position: absolute;
    right: 24px;
    background: rgba(0, 0, 0, 0);
    overflow: visible;
    width: auto;
    height: 50px;
    padding: 2px 0 0 48px;
  }

  .primary-nav__top-level:hover {
    height: auto;
  }
}

@media (min-width: 1200px) {
  .primary-nav__top-level {
    right: 0;
  }
}

.primary-nav__top-level .desktop-tools {
  display: none;
}

@media (min-width: 1024px) {
  .primary-nav__top-level .desktop-tools {
    display: inline-block;
  }
}

.primary-nav__top-level-li {
  border-bottom: 1px solid #CCCCCC;
}

@media (min-width: 1024px) {
  .primary-nav__top-level-li {
    float: left;
    display: inline-block;
    border-bottom: 0;
  }

  .primary-nav__top-level-li:hover > a {
    color: #FFFFFF;
    background: #2774AE;
  }

  .primary-nav__top-level-li:hover > a::after {
    background-image: url(../img/arrow-down--white.svg);
  }

  .primary-nav__top-level-li:hover .primary-nav__second-level-nav {
    display: block;
    background: #FFFFFF;
  }

  .primary-nav__top-level-li:hover .primary-nav__second-level-nav.desktop-searches {
    display: none;
  }

  .primary-nav__top-level-li:hover .primary-nav__second-level-nav.desktop-searches.is-active {
    display: block;
  }

  .primary-nav__top-level-li:active {
    background: #003B5C;
    color: #FFFFFF;
  }
}

@media (min-width: 1024px) {
  .primary-nav__top-level-li.select::after {
    content: "";
    height: 4px;
    width: 82%;
    display: block;
    background: #FFD100;
    position: inherit;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -12px;
    z-index: -1;
  }
}

.primary-nav__top-level-li a.open {
  color: #FFFFFF;
  background: #2774AE;
}

.primary-nav__top-level-li a.open::after {
  background-image: url(../img/arrow-down--white.svg);
}

.primary-nav__top-level-link,
.primary-nav__second-level-link {
  display: block;
  position: relative;
  width: 100%;
  padding: 11px 24px;
  color: #00598C;
}

@media (min-width: 1024px) {
  .primary-nav__top-level-link,
  .primary-nav__second-level-link {
    display: inline-block;
  }
}

.primary-nav__top-level-link::after,
.primary-nav__second-level-link::after {
  position: absolute;
  right: 24px;
  top: 15px;
  height: 14px;
  width: 14px;
  content: "";
  display: block;
  color: #8BB8E8;
  background-image: url(../img/arrow-next.svg);
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .primary-nav__top-level-link::after,
  .primary-nav__second-level-link::after {
    background-image: url(../img/arrow-down.svg);
    right: 8px;
    top: 12px;
    height: 24px;
    width: 24px;
    background-size: cover;
  }
}

.primary-nav__top-level-link:hover::after,
.primary-nav__second-level-link:hover::after {
  background-image: url(../img/arrow-next--white.svg);
}

@media (hover: none) {
  .primary-nav__top-level-link:hover::after,
  .primary-nav__second-level-link:hover::after {
    color: #8BB8E8;
  }
}

@media (min-width: 1024px) {
  .primary-nav__top-level-link:hover + .primary-nav__second-level-nav,
  .primary-nav__second-level-link:hover + .primary-nav__second-level-nav {
    display: block;
  }
}

.primary-nav__top-level-link:active,
.primary-nav__second-level-link:active {
  background: #003B5C;
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .primary-nav__top-level-link {
    padding: 12px 38px 12px 16px;
  }
}

.primary-nav__second-level-nav {
  position: absolute;
  display: block;
  right: -100%;
  width: 100%;
  top: 0;
  height: 80vh;
  z-index: 11;
  background: #FFFFFF;
  padding: 66px 0 81px;
  overflow-x: hidden;
  overflow-y: scroll !important;
  scrollbar-width: none;
  -webkit-scrollbar-width: none;
  transition: right 0.5s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

@media (min-width: 1024px) {
  .primary-nav__second-level-nav {
    display: none;
    border-top: 6px solid #2774AE;
    right: unset;
    left: 0;
    top: 50px;
    padding: 47px 25px;
    width: 100%;
    z-index: 11;
    height: auto;
    overflow: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    transition-duration: 0s;
    transition-timing-function: ease;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
  }
}

.primary-nav__second-level-nav.is-active {
  position: absolute;
  display: block;
  left: 0;
  transition: right 0.5s ease;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

@media (min-width: 1024px) {
  .primary-nav__second-level-nav.is-active {
    transition-duration: 0s;
    transition-timing-function: ease;
    transition-property: all;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
  }
}

.primary-nav__second-level-nav::-webkit-scrollbar {
  width: 0;
  -webkit-appearance: none;
}

.primary-nav__second-level-nav.desktop-searches {
  display: none;
}

.primary-nav__second-level-nav.desktop-searches.is-active {
  display: block;
}

.primary-nav__second-level-nav.desktop-searches li {
  height: 51px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .primary-nav__second-level-nav li {
    width: 100%;
  }
}

.primary-nav__second-level-nav li .primary-nav__second-level-link {
  padding: 0 0 2px;
  margin: 0 0 16px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 1024px) {
  .primary-nav__second-level-nav li .primary-nav__second-level-link {
    font-size: 14px;
  }
}

.primary-nav__second-level-nav li .primary-nav__second-level-link::after {
  display: none;
}

.primary-nav__overview-li {
  padding: 0 24px;
  margin: 0 0 20px;
}

@media (min-width: 1024px) {
  .primary-nav__overview-li {
    display: none;
  }
}

.primary-nav__go-back {
  display: block;
  position: fixed;
  top: -1px;
  right: -100%;
  padding: 11px 45px 4px;
  margin: 0 -25px 10px;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  background: #FFFFFF;
  color: #00598C;
  width: 100%;
  height: 41px;
  line-height: 20px;
  z-index: 1;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-property: all;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.primary-nav__go-back::before {
  position: absolute;
  display: block;
  content: "";
  color: #8BB8E8;
  left: 20px;
  top: 10px;
  width: 24px;
  height: 24px;
  background-image: url(../img/left-arrow--blue.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.primary-nav__go-back:focus,
.primary-nav__go-back:hover {
  cursor: pointer;
  color: #FFFFFF;
  background: #2774AE;
}

@media (hover: none) {
  .primary-nav__go-back:focus,
  .primary-nav__go-back:hover {
    color: #00598C;
    background: #FFFFFF;
  }
}

@media (focus: fine) {
  .primary-nav__go-back:focus,
  .primary-nav__go-back:hover {
    color: #FFFFFF;
    background: #2774AE;
  }
}

.primary-nav__go-back:focus::before,
.primary-nav__go-back:hover::before {
  color: #FFFFFF;
  background-image: url(../img/left-arrow--white.svg);
}

@media (hover: none) {
  .primary-nav__go-back:focus::before,
  .primary-nav__go-back:hover::before {
    color: #8BB8E8;
  }
}

.primary-nav__go-back:active {
  background: #003B5C;
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .primary-nav__go-back {
    top: -1px;
  }
}

@media (min-width: 1024px) {
  .primary-nav__go-back {
    display: none;
  }
}

.primary-nav__go-back.is-active {
  position: fixed;
  right: 25px;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-property: all;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.primary-nav__sub-title {
  color: #666666;
  border-bottom: 1px solid #CCCCCC;
  margin: 8px 0 16px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 30px;
}

@media (min-width: 1024px) {
  .primary-nav__sub-title {
    margin: 0 0 26px;
  }

  .primary-nav__sub-title.impact-li {
    margin-top: 29px;
  }
}

.primary-nav__sub-title.campus-title {
  margin-top: -10px;
}

@media (min-width: 1024px) {
  .primary-nav__sub-title.campus-title {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .primary-nav__top-level-mobile-li {
    display: none;
  }
}

.primary-nav__top-level-mobile-link {
  display: block;
  position: relative;
  width: 100%;
  padding: 11px 24px;
  font-size: 14px;
  line-height: 18px;
}

@media (min-width: 1024px) {
  .primary-nav__top-level-mobile-link {
    display: inline-block;
    padding: 10px 24px 13px 24px;
  }
}

.primary-nav__top-level-mobile-link:hover {
  color: #FFFFFF;
  background: #2774AE;
}

@media (hover: none) {
  .primary-nav__top-level-mobile-link:hover {
    color: #00598C;
    background: #FFFFFF;
  }
}

@media (min-width: 1024px) {
  .primary-nav__top-level-mobile-link:hover + .primary-nav__second-level-nav {
    display: block;
  }
}

.primary-nav__give-button-li {
  margin-bottom: 40px;
}

.primary-nav #give-btn {
  width: calc(100% - 48px);
  color: #FFFFFF;
}

.primary-nav #give-btn::after {
  display: none;
}

@media (min-width: 1024px) {
  .primary-nav #give-btn {
    padding: 12px 16px 8px 16px;
  }
}

main.active-menu {
  margin-top: 121px !important;
}

@media only screen and (min-width: 768px) {
  main.active-menu {
    margin-top: 113px !important;
  }
}

/************************
FireFox Only styles
************************/

@-moz-document url-prefix()  {
  .primary-nav .btn--lightbg {
    color: #FFFFFF;
  }

  .primary-nav__go-back {
    top: 120px;
  }

@media only screen and (min-width: 768px) {
    .primary-nav__go-back {
      margin-top: -8px;
      max-width: 320px;
    }
}
}

/************************
Safari Only styles
************************/

html.safari .primary-nav__top-level-li {
  line-height: 0;
}

html.safari .primary-nav .btn--lightbg {
  color: #FFFFFF;
}

html.safari .primary-nav__go-back {
  /*top: 120px;*/
  top: 0px;
}

@media (min-width: 768px) {
  html.safari .primary-nav__go-back {
    top: 112px;
    max-width: 320px;
  }
}

.primary-nav .select {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .primary-nav__stack-holder-wrap {
    display: block;
    max-width: 1220px;
    margin: 0 auto;
  }
}

.primary-nav__menu-stack {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  padding: 0 24px;
}

@media (min-width: 1024px) {
  .primary-nav__menu-stack {
    width: 25%;
    float: left;
    display: inline-block;
    padding: 0px 12px;
    margin: 0 0 16px 0;
  }
}

@media (min-width: 1024px) {
  .primary-nav__menu-stack li.menu-image-item {
    float: left;
    display: inline-block;
  }
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: 100%;
  font-size: 16px;
  line-height: 20px;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:hover {
  color: #FFFFFF;
  background: #FFFFFF;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:hover span {
  color: #0079BF;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:hover img {
  opacity: 0.4;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:hover::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: calc(100% - 29px);
  background: #0079BF;
}

@media (min-width: 768px) {
  .primary-nav__menu-stack li.menu-image-item .stack-img-link:hover::before {
    height: calc(100% - 48px);
  }
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:focus {
  outline: 2px dotted #0079BF;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:visited {
  color: #00598C;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:visited:hover {
  color: #FFFFFF;
  color: #0079BF;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:active {
  outline: 0 !important;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:active:focus {
  outline: 0 !important;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:active span {
  background: #FFFFFF;
  color: #003B5C;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link:active::before {
  background: #003B5C;
}

.primary-nav__menu-stack li.menu-image-item .stack-img-link img {
  max-width: 100%;
  display: block;
  margin-bottom: 9px;
}

.primary-nav__menu-stack li.menu-image-item .blurb {
  display: block;
  font-size: 12px;
  line-height: 18px;
  line-height: 1rem;
  margin: 0;
  color: #333;
  font-weight: 400;
}

.gsc-search-box {
  position: relative;
}

.gsc-input {
  width: 91%;
}

@media (min-width: 1024px) {
  .gsc-input {
    font-size: 16px;
    padding-right: 0 !important;
  }
}

.gsc-input::-moz-placeholder {
  font-size: 2.25rem;
}

.gsc-input:-ms-input-placeholder {
  font-size: 2.25rem;
}

.gsc-input::placeholder {
  font-size: 2.25rem;
}

.gsc-input .gsc-input-box {
  border-width: 0;
  height: auto;
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0);
}

.gsc-input .gsc-input-box input[name="search"] {
  height: 40px !important;
  margin: 0 !important;
  text-indent: 36px;
  font-size: 16px;
  width: 100% !important;
  border: 1px solid #808080 !important;
  background: #EBEBEB !important;
  border-radius: 2px 0 0 2px;
  /* clears the 'X' from Internet Explorer */
  /* clears the 'X' from Chrome */
}

.gsc-input .gsc-input-box input[name="search"]::-ms-clear,
.gsc-input .gsc-input-box input[name="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

.gsc-input .gsc-input-box input[name="search"]::-webkit-search-decoration,
.gsc-input .gsc-input-box input[name="search"]::-webkit-search-cancel-button,
.gsc-input .gsc-input-box input[name="search"]::-webkit-search-results-button,
.gsc-input .gsc-input-box input[name="search"]::-webkit-search-results-decoration {
  display: none;
}

.gsc-input .gsc-input-box input[name="search"]:focus {
  outline: 2px dotted #0079BF !important;
  outline-offset: 1px;
}

.gsc-input .gsc-input-box input[name="search"]::-moz-placeholder {
  font-size: 16px;
  top: -5px;
}

.gsc-input .gsc-input-box input[name="search"]:-ms-input-placeholder {
  font-size: 16px;
  top: -5px;
}

.gsc-input .gsc-input-box input[name="search"]::placeholder {
  font-size: 16px;
  top: -5px;
}

.gsc-input .gsib_b {
  position: absolute;
}

.gsc-search-button {
  display: none;
}

@media (min-width: 1024px) {
  .gsc-search-button {
    display: block;
  }
}

.gsc-search-button .gsc-search-button.gsc-search-button-v2 {
  background-color: #00598C;
  border: 0px;
  border-radius: 0 2px 2px 0;
  display: block;
  padding: 6px 0px;
  margin: 4px 0 0;
  min-width: 86px;
  min-height: 40px;
  text-align: center;
  width: 100%;
}

.gsc-search-button .gsc-search-button.gsc-search-button-v2 svg {
  display: none;
}

.gsc-search-button .gsc-search-button.gsc-search-button-v2::before {
  display: block;
  position: relative;
  visibility: visible;
  width: 100%;
  height: 16px;
  text-align: center;
  color: #FFFFFF;
  font-size: 1rem;
  content: "Search";
}

@media (min-width: 1024px) {
  .gsc-search-button .gsc-search-button.gsc-search-button-v2::before {
    font-size: 16px;
  }
}

.gsc-search-button .gsc-search-button.gsc-search-button-v2:hover {
  cursor: pointer;
  background: #0079BF;
}

.gsc-search-button .gsc-search-button.gsc-search-button-v2:focus {
  background: #0079BF;
  outline: 2px dotted #0079BF;
  outline-offset: 2px;
}

.gsc-search-button .gsc-search-button.gsc-search-button-v2:active {
  background: #003B5C;
}

td.gsc-search-button {
  display: block !important;
  margin-left: 0;
}

#gs_tti50::before,
#gs_tti51::before,
#gs_tti52::before {
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 12px;
  content: "";
  height: 18px;
  width: 18px;
  background-image: url(../img/search-icon-666.svg);
  background-size: cover;
}

#gs_tti50 .ada-hidden,
#gs_tti51 .ada-hidden,
#gs_tti52 .ada-hidden {
  left: -100000px;
  position: absolute;
  overflow: hidden;
}

#gs_tti51 {
  padding: 5px 0 4px;
}

#gsc-i-id1 {
  border-bottom: 0;
  height: 40px !important;
  padding: 0px !important;
  background: none !important;
  text-indent: 35px;
}

@media (min-width: 1024px) {
  #gsc-i-id1 {
    height: 33px !important;
  }
}

table.gsc-search-box {
  margin-top: -5px;
}

table.gsc-search-box td.gsib_a {
  padding-left: 0;
  padding-right: 0;
}

table.gsc-search-box .gsc-input {
  padding-right: 0 !important;
  width: 100%;
}

.gsib_b {
  padding-right: 20px;
}

.gsib_b a.gsst_a {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  margin: 10px 0 0 -37px;
}

.gsib_b a.gsst_a:hover {
  background: rgba(0, 0, 0, 0);
}

.gsib_b a.gsst_a span.gscb_a {
  color: #FFFFFF;
  background-color: #666;
  height: 20px;
  width: 20px;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -1px;
  border-radius: 14px;
  right: 5px;
  margin-top: 5px;
  position: absolute;
  text-align: center;
}

.gsib_b a.gsst_a span.gscb_a:hover {
  color: #FFFFFF;
}

#searchbox-mobile {
  height: 48px;
  z-index: 1;
  display: block;
  position: relative;
  background: #EBEBEB;
  padding: 10px 20px 48px 20px;
  width: 100%;
}

@media (min-width: 1024px) {
  #searchbox-mobile {
    display: none;
    padding: 10px 0 48px 0;
  }
}

#searchbox-desktop {
  height: 48px;
  margin-left: 0px;
}

#search-menu:hover,
#search-menu.is-active {
  background: #2774AE;
}

#search-menu:hover #search-button,
#search-menu.is-active #search-button {
  background-image: url("../img/search--white.svg");
}

#search-menu:hover.is-active #search-button,
#search-menu.is-active.is-active #search-button {
  background-image: url("../img/close--white.svg");
}

#search-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(0, 0, 0, 0);
  border: 0;
  width: 56px;
  height: 48px;
  background-image: url("../img/search--blue.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: center;
}

#search-button:hover {
  cursor: pointer;
  background-image: url("../img/search--white.svg");
}

#search-button img.search-button_image {
  margin-top: 5px;
  width: 24px;
  height: 24px;
}

.search-field {
  margin: 30px 0 0px 0;
}

/*
* This blockquote component is unique to Gateway
*/

#quote {
  display: block;
  border-bottom: 1px solid #CCCCCC;
  margin-top: -32px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  #quote {
    margin: 24px;
    margin-top: -40px;
  }
}

@media (min-width: 1024px) {
  #quote {
    margin: 0 auto;
    margin-bottom: 64px;
    padding-top: 0px;
  }
}

.block-quote {
  width: 100%;
  display: block;
  height: auto;
}

@media (min-width: 1024px) {
  .block-quote {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1174px;
    margin: 0 auto;
    padding: 64px 0;
    padding-top: 0px;
  }
}

.block-quote__img-wrapper {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .block-quote__img-wrapper {
    width: 524px;
    vertical-align: middle;
  }
}

@media (min-width: 1024px) and (max-width: 1230px) {
  .block-quote__img-wrapper {
    margin-left: 24px;
  }
}

.block-quote__img-wrapper img {
  width: 100%;
  position: relative;
  display: block;
}

.block-quote__content {
  padding: 32px 24px;
}

@media (min-width: 768px) {
  .block-quote__content {
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  .block-quote__content {
    padding: 72px 86px 72px 90px;
    margin-left: -22px;
    vertical-align: middle;
    width: calc(99% - 495px);
  }
}

@media (min-width: 1024px) and (max-width: 1230px) {
  .block-quote__content {
    margin-right: 24px;
  }
}

.block-quote__content .decoration-line::before {
  display: block;
  position: relative;
  content: '';
  width: 192px;
  height: 4px;
  background: #FFFF00;
  left: 80px;
}

@media (min-width: 768px) {
  .block-quote__content .decoration-line::before {
    width: 160px;
  }
}

.block-quote__content .decoration-line::after {
  display: block;
  position: relative;
  content: '';
  width: 192px;
  height: 4px;
  background: #FFD100;
}

@media (min-width: 768px) {
  .block-quote__content .decoration-line::after {
    width: 160px;
  }
}

.block-quote__content-quote,
.block-quote__content-quote > p {
  margin-top: 28px;
  padding-left: 24px;
  font-size: 24px;
  line-height: 27px;
  font-weight: bold;
  text-indent: -1em;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

@media (min-width: 768px) {
  .block-quote__content-quote,
  .block-quote__content-quote > p {
    padding-left: 14px;
    text-indent: -0.55em;
    font-size: 28px;
    line-height: 32px;
  }
}

.block-quote__content-quote::before,
.block-quote__content-quote > p::before {
  content: open-quote;
  margin-right: 11px;
}

@media (min-width: 768px) {
  .block-quote__content-quote::before,
  .block-quote__content-quote > p::before {
    margin-right: 0;
  }
}

.block-quote__content cite {
  font-style: italic;
  line-height: 24px;
  color: #FFFFFF;
}

.block-quote__content .btn.btn--secondary.btn--transparent {
  margin-top: 24px;
}

/*
* This blockquote component is unique to Gateway
*/

.blockquote-tall {
  margin: 0px;
}

@media (min-width: 1024px) {
  .blockquote-tall {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 0px;
    margin: 0px;
  }
}

.blockquote-tall__img {
  width: 100%;
  position: relative;
  display: block;
}

@media (min-width: 1024px) {
  .blockquote-tall__img {
    -o-object-fit: cover;
       object-fit: cover;
    background: #2774AE;
    display: block;
    height: 100%;
  }
}

@media (min-width: 1550px) {
  .blockquote-tall__img {
    max-height: 516px;
  }
}

@media (min-width: 1024px) {
  .blockquote-tall__img-wrapper {
    background: #2774AE;
    overflow: hidden;
    height: 384px;
  }
}

.blockquote-tall__content {
  margin-top: -3px;
  color: #FFFFFF;
  position: relative;
  padding: 32px 24px 32px 24px;
}

@media (min-width: 768px) {
  .blockquote-tall__content {
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  .blockquote-tall__content {
    padding: 48px 44px;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 384px;
  }
}

@media (min-width: 1280px) {
  .blockquote-tall__content {
    height: 384px;
  }
}

.blockquote-tall__content .decoration-line::before {
  display: block;
  position: relative;
  content: '';
  width: 192px;
  height: 4px;
  background: #FFFF00;
  right: -80px;
}

@media (min-width: 768px) {
  .blockquote-tall__content .decoration-line::before {
    width: 160px;
  }
}

.blockquote-tall__content .decoration-line::after {
  display: block;
  position: relative;
  content: '';
  width: 192px;
  height: 4px;
  background: #FFD100;
}

@media (min-width: 768px) {
  .blockquote-tall__content .decoration-line::after {
    width: 160px;
  }
}

.blockquote-tall__content-quote,
.blockquote-tall__content-quote > p {
  margin-top: 24px;
  padding-left: 14px;
  font-size: 20px;
  line-height: 22.5px;
  font-weight: bold;
  text-indent: -1em;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

@media (min-width: 768px) {
  .blockquote-tall__content-quote,
  .blockquote-tall__content-quote > p {
    padding-left: 14px;
    text-indent: -0.55em;
    font-size: 28px;
    line-height: 32px;
  }
}

@media (min-width: 1280px) {
  .blockquote-tall__content-quote,
  .blockquote-tall__content-quote > p {
    max-width: 511px;
  }
}

.blockquote-tall__content-quote::before,
.blockquote-tall__content-quote > p::before {
  content: open-quote;
  margin-right: 3px;
  margin-left: 8px;
}

@media (min-width: 768px) {
  .blockquote-tall__content-quote::before,
  .blockquote-tall__content-quote > p::before {
    margin-right: 0;
  }
}

.blockquote-tall__content-source {
  margin-left: 21px;
}

.blockquote-tall__content-source-year {
  display: block;
}

@media (min-width: 768px) {
  .blockquote-tall__content-source-year {
    display: inline-block;
  }
}

.blockquote-tall__content-source cite {
  display: flex;
  font-style: italic;
  line-height: 24px;
  color: #FFFFFF;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 0rem;
  margin-bottom: 0rem;
  list-style: none;
  border-radius: 0px;
}

.breadcrumb--fade {
  display: none;
}

.breadcrumb__item {
  line-height: 1.25rem;
}

.breadcrumb__item a {
  color: #00598C;
  text-decoration: none;
  font-weight: bold;
}

.breadcrumb__item a:hover {
  color: #FFFFFF;
}

.breadcrumb__item a:visited {
  color: #00598C;
}

.breadcrumb__item a:visited:hover {
  color: #FFFFFF;
}

.breadcrumb__item a:not(.page):visited {
  color: #00598C;
}

.breadcrumb__item a:not(.page):visited:hover {
  color: #FFFFFF;
}

.breadcrumb__item:first-of-type::before {
  content: '';
  padding: 0;
}

.breadcrumb__item::after {
  display: inline-block;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  color: #999;
}

.breadcrumb__item:last-child::after {
  content: '';
}

.breadcrumb__item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb__item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb__item--active {
  color: #757575;
  font-weight: bold;
  line-height: 1.25rem;
}

.breadcrumb__item--active::before {
  padding: 0 8px;
  font-weight: 400;
  color: #999;
  content: "/";
}

/*
*  Override button styles from Component Library
* TODO: migrate transparent / secondary button on dark bkgd to Component Library
*
*/

.btn--group {
  flex-direction: column;
}

a.btn,
button.btn {
  text-decoration: none;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

a.btn.inline,
button.btn.inline {
  display: inline-block;
}

a.btn--transparent,
button.btn--transparent {
  border: 2px solid #FFFFFF;
  background-color: transparent;
  color: #FFFFFF;
  text-align: left;
  font-size: 12.8px;
  line-height: 16px;
  padding: 8px 16px;
}

a.btn--transparent:visited,
button.btn--transparent:visited {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

a.btn--transparent:hover,
button.btn--transparent:hover {
  background-color: #FFE500;
  color: #000000;
  border-color: #FFE500;
}

a.btn--transparent:focus,
button.btn--transparent:focus {
  background-color: #FFE500;
  color: #000000;
  border-color: #FFE500;
  outline: 2px dotted #FFFFFF;
  outline-offset: 2px;
}

a.btn--transparent:active,
button.btn--transparent:active {
  background-color: #FFBF0F;
  color: #000000;
  border-color: #FFBF0F;
}

a.btn.btn--secondary--lightbg:visited,
a.btn.btn--group-left:visited,
a.btn.btn--group-right:visited,
button.btn.btn--secondary--lightbg:visited,
button.btn.btn--group-left:visited,
button.btn.btn--group-right:visited {
  color: #005587;
}

a.btn.btn--secondary--lightbg:visited:hover,
a.btn.btn--group-left:visited:hover,
a.btn.btn--group-right:visited:hover,
button.btn.btn--secondary--lightbg:visited:hover,
button.btn.btn--group-left:visited:hover,
button.btn.btn--group-right:visited:hover {
  color: #FFFFFF;
}

a.btn.btn--secondary--lightbg:focus,
a.btn.btn--group-left:focus,
a.btn.btn--group-right:focus,
button.btn.btn--secondary--lightbg:focus,
button.btn.btn--group-left:focus,
button.btn.btn--group-right:focus {
  color: #FFFFFF;
}

a.no-text-decoration {
  text-decoration: none;
}

/*******
IMAGE:
  1. The Image component consists entirely of class modifiers, prefaced by the .img block. They include:
    a.  --retina
    b.  --align-left
        --aign-right
        --align-center
    c.  --wide
    d.  --show-on-mobile-sm-only
        --hide-on-mobile-sm
        --show-on-mobile-only
        --hide-on-mobile
        --show-on-desktop-only
        --hide-on-desktop
        --hide-on-table
  2.  Some good to know breakpoints for viewport widths are:
    a.  Mobile (Including 0px and up to but not including 768px)
        - Mobile-sm (Including 0px and up to but not including 600px)
    b.  Tablet (Including 768px and up to but not including 1024px)
    c.  Desktop (including 1024px and up into infinity and beyond)

Code structure and classes:
  1. <img> tag - Should include .img class with applicable modifiers

Example #1:
  <img src="image.jpg" alt="alt" class="img--retina img--align-right" />

Example #2:
  <img src="image.jpg" alt="alt" class="img--retina img--wide" />

Example #3 (for using separate images between mobile and tablet/desktop - breakpoint 768px):
  <img src="image-tablet-and-desktop.jpg" alt="alt" class="img--retina img--align-left img--hide-on-mobile" />
  <img src="image-mobile.jpg" alt="alt" class="img--retina img--align-left img--show-on-mobile-only" />

Example #4 (for using separate images between mobile-sm and tablet/desktop - breakpoint 600px):
  <img src="image-tablet-and-desktop.jpg" alt="alt" class="img--retina img--hide-on-mobile-sm">
  <img src="image-mobile-sm.jpg" alt="alt" class="img--retina img--show-on-mobile-sm-only">

Examples in the wild:
- /academics/libraries
- /academics/graduate-and-professional-education

Other references:
- _variables.scss
- _breakpoints.scss

*******/

.img--retina {
  zoom: 50%;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .img--retina {
    width: auto;
    max-width: 100%;
  }
}

.img--align-left {
  float: left;
}

.img--align-right {
  float: right;
}

.img--align-center {
  margin: 0 auto;
}

.img--wide {
  max-width: 100%;
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 600px) {
  .img--show-on-mobile-sm-only {
    display: none;
  }
}

@media only screen and (max-width: 599.98px) {
  .img--hide-on-mobile-sm {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .img--show-on-mobile-only {
    display: none;
  }
}

@media only screen and (max-width: 767.98px) {
  .img--hide-on-mobile {
    display: none;
  }
}

@media only screen and (max-width: 1023.98px) {
  .img--show-on-desktop-only {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .img--hide-on-desktop {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .img--show-on-tablet-only {
    display: none;
  }
}

@media only screen and (max-width: 767.98px) {
  .img--show-on-tablet-only {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023.98px) {
  .img--hide-on-tablet {
    display: none;
  }
}

/*******

Related Lists

HTML structure:

<ul class="list">
  <li></li>
</ul>

*******/

ul.list {
  border-bottom: 1px solid #E5E5E5;
  -webkit-padding-start: 0px;
          padding-inline-start: 0px;
}

ul.list li {
  position: relative;
  border-top: 1px solid #E5E5E5;
  list-style-type: none;
}

ul.list li a {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #00598C;
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: 12px 80px 12px 16px;
}

ul.list li a:focus {
  background-color: #0079BF;
  color: #FFFFFF;
  outline: 2px dotted #FFFFFF;
  outline-offset: -3px;
}

ul.list li a:hover {
  background-color: #0079BF;
}

ul.list li a:hover,
ul.list li a:active {
  color: #FFFFFF;
  text-decoration: none;
}

ul.list li a:active {
  background-color: #003B5C;
  color: #FFFFFF;
  outline: none;
}

ul.list li a:visited {
  color: #5223B0;
}

ul.list li a:visited:hover {
  color: #FFFFFF;
}

ul.list li a:visited:focus {
  color: #FFFFFF;
}

@media only screen and (min-width: 768px) {
  ul.list {
    max-width: 576px;
  }
}

/*******

Links Lists - List Item

HTML structure:

<ul class="li-links__list">
  <li class="li-links__list-item"><a class="li-links__list-link--light"></a></li>
</ul>

*******/

.li-links__header {
  margin: 0;
  padding: 0;
}

.li-links__list {
  margin: 0;
  padding: 0;
}

.li-links__list-item {
  margin: 0;
  padding: 10px 0 0 0;
  line-height: 1.12rem;
}

.li-links__list-link--light {
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.li-links__list-link--light:link {
  color: #FFFFFF;
}

.li-links__list-link--light:focus {
  color: #FFFFFF;
  outline: 2px dotted #0079BF;
}

.li-links__list-link--light:hover {
  background-color: #0079BF;
  color: #333;
}

.li-links__list-link--light:active {
  background-color: #FFBF0F;
  color: #333;
  outline: none;
}

.li-links__list-link--light:visited {
  color: #FFFFFF;
}

.li-links__list-link--light:hover {
  color: #333;
}

.li-links__list-link--dark {
  font-size: 0.75rem;
  text-decoration: none;
}

.li-links__list-link--dark:link {
  color: #FFFFFF;
}

.li-links__list-link--dark:focus {
  color: #FFFFFF !important;
  outline: 2px dotted #FFFFFF !important;
}

.li-links__list-link--dark:hover {
  background-color: #FFE500 !important;
  color: #333 !important;
}

.li-links__list-link--dark:active {
  background-color: #FFBF0F !important;
  color: #333 !important;
  outline: none !important;
}

.li-links__list-link--dark:visited {
  color: #CFC3F3 !important;
}

/*******

Links Lists - Inline Block

HTML structure:

<ul class="ib-links__container">
  // item with screen reader
  <li class="ib-links__list-item"><a class="ib-links__link--light"></a><span class="screenreader-only"></span></li>
  // item without screen reader
  <li class="ib-links__list-item"><a class="ib-links__link--light"></a></li>
</ul>

*******/

.ib-links {
  margin-top: 0 !important;
}

.ib-links__container {
  line-height: 2rem;
  padding: 0 24px;
}

@media (min-width: 600px) {
  .ib-links__container {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 24px;
  }
}

@media (min-width: 768px) {
  .ib-links__container {
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .ib-links__container {
    margin-top: 20px;
    padding: 0;
  }
}

.ib-links__list-item {
  display: inline-block;
  margin: 0;
  width: 100%;
  text-align: left;
}

@media (min-width: 768px) {
  .ib-links__list-item {
    margin: 0 0.625rem;
    text-align: center;
    width: inherit;
  }

  .ib-links__list-item:first-child {
    margin-left: 0;
  }

  .ib-links__list-item:last-child {
    margin-right: 0px;
  }

  .ib-links__list-item::before {
    display: none;
  }
}

.ib-links__list-item .screenreader-only {
  position: absolute;
  /* fixes extra spacing by removing element from flow */
}

.ib-links__link--light {
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  font-size: 0.75rem;
}

.ib-links__link--light[target='_blank']::after {
  content: none;
}

.ib-links__link--light[target='_blank']::after {
  content: none;
}

.ib-links__link--light:link {
  color: #FFFFFF;
}

.ib-links__link--light:focus {
  color: #FFFFFF;
  outline: 2px dotted #FFFFFF;
}

.ib-links__link--light:hover {
  background-color: #FFE500;
  color: #333;
}

.ib-links__link--light:active {
  background-color: #FFBF0F;
  color: #333;
  outline: none;
}

.ib-links__link--light:visited {
  color: #FFFFFF;
}

.ib-links__link--light:visited:hover {
  color: #333;
}

.ib-links__link--dark {
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  font-size: 0.75rem;
}

.ib-links__link--dark[target='_blank']::after {
  content: none;
}

.ib-links__link--dark[target='_blank']::after {
  content: none;
}

.ib-links__link--dark:link {
  color: #00598C;
}

.ib-links__link--dark:focus {
  color: #00598C;
  outline: 2px dotted #FFFFFF;
}

.ib-links__link--dark:hover {
  background-color: #FFE500;
  color: #FFFFFF !important;
}

.ib-links__link--dark:active {
  background-color: #FFBF0F;
  color: #333;
  outline: none;
}

.ib-links__link--dark:visited {
  color: #00598C;
}

ul li::before {
  content: "";
}

/*

For lead in text, i.e makes text within a paragraph larger than default

Example HTML structure:
  <p class="p--lead-in">With 118 NCAA team Championships, UCLA Athletics is one of the most decorated programs in the nation. </p>
*/

.p--lead-in {
  font-size: 1.5rem;
  font-size: 1.25rem;
  line-height: 2rem;
  line-height: 1.5rem;
}

@media (min-width: 600px) {
  .p--lead-in {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/*

  These styles extend the existing stat tout styles from the Component Library

  Not sure if these should apply for all stat touts in the CL; keeping in Gateway only for now

*/

@media (min-width: 768px) {
  .stat-set {
    justify-content: space-between;
  }
}

.stat-wrapper {
  flex-grow: 1;
  flex-basis: 0;
  display: block;
  margin-bottom: 24px;
}

.stat-wrapper .stat-tout {
  padding-right: 2rem;
  padding-left: 2rem;
}

@media (min-width: 768px) {
  .stat-wrapper .stat-tout {
    display: block;
  }
}

@media (max-width: 600px) {
  .stat-wrapper .stat-tout__number {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 4px;
  }
}

@media (max-width: 600px) {
  .stat-wrapper .stat-tout__label {
    font-size: 16px;
    line-height: 20px;
  }
}

.stat-wrapper .stat-tout__label--extend {
  max-width: none;
}

.stat-wrapper .stat-tout--centered {
  max-width: 776px;
  margin: 0 auto;
}

a.stat-wrapper--link {
  text-decoration: none;
  margin-bottom: 12px !important;
}

a.stat-wrapper--link aside::after {
  content: '';
  display: block;
  position: relative;
  background: url("../img/arrow-small.svg") no-repeat 0 0;
  width: 24px;
  height: 12px;
  top: -60px;
  left: 90%;
}

@media (min-width: 768px) {
  a.stat-wrapper--link aside::after {
    top: -35px;
    left: 83%;
  }
}

a.stat-wrapper--link .stat-tout__info-wrap {
  max-width: 180px;
}

@media (min-width: 600px) {
  a.stat-wrapper--link .stat-tout__info-wrap {
    max-width: 240px;
  }
}

@media (min-width: 768px) {
  a.stat-wrapper--link .stat-tout__info-wrap {
    max-width: 280px;
  }
}

a.stat-wrapper--link .stat-tout__number,
a.stat-wrapper--link .stat-tout__label {
  color: #00598C;
}

a.stat-wrapper--link .stat-tout__label {
  max-width: 280px;
}

a.stat-wrapper--link:hover {
  background: transparent;
}

a.stat-wrapper--link:hover .stat-tout {
  background-color: #0079BF;
}

a.stat-wrapper--link:hover .stat-tout__number,
a.stat-wrapper--link:hover .stat-tout__label {
  color: #FFFFFF;
}

a.stat-wrapper--link:hover aside::after {
  background: url("../img/arrow-small-over.svg") no-repeat 0 0;
}

a.stat-wrapper--link:focus {
  outline: none;
}

a.stat-wrapper--link:focus .stat-tout {
  outline: 2px dotted #0079BF;
}

a.stat-wrapper--link:active {
  background: transparent;
}

a.stat-wrapper--link:active .stat-tout {
  background-color: #003B5C;
}

a.stat-wrapper--link:active .stat-tout__number,
a.stat-wrapper--link:active .stat-tout__label {
  color: #FFFFFF;
}

a.stat-wrapper--link:active aside::after {
  background: url("../img/arrow-small-over.svg") no-repeat 0 0;
}

/*******

FIXED FIRST ROW Table component

TABLE RULES:
1. To align text right add class "fixed-table__text-right" to td element.
2. NUMBERS MUST be aligned right using class="fixed-table__text-right".
3. Total or distinctive columns at bottom should be wrapped in <tfoot> tags.

HTML structure:

<div class="fixed-table">
  <div class="fixed-table__scroller">
      <table class="fixed-table__wrapper">
          <thead>
              <tr>
                <th class="fixed-table__sticky-col">Column One Title</th>
                <th>Column Two Title</th>
                <th>Column Three Title</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td class="fixed-table__sticky-col">First Row Title</td>
                <td class="fixed-table__text-right">First row second column info. Text right example.</td>
                <td>First row third column info.</td>
              </tr>
              <tr>
                <td class="fixed-table__sticky-col">Second Row Bold Title Example</td>
                <td>Second row second column info.</td>
                <td>Second row third column info.</td>
              </tr>
              <tr class="blue-total">
                <td class="fixed-table__sticky-col">Third Row Title</td>
                <td>Third row second column info.</td>
                <td>Third row third column info.</td>
              </tr>
              <tfoot>
                <tr class="yellow-total">
                  <td  class="fixed-table__sticky-col">Total Example</td>
                  <td class="fixed-table__text-right">99,999</td>
                  <td class="fixed-table__text-right">99,999</td>
                </tr>
              </tfoot>
          </tbody>
      </table>
  </div>
</div>

Responsive Table JSFiddle: https://jsfiddle.net/zinoui/BmLpV/
*******/

.fixed-table {
  position: relative;
  width: 100%;
  scrollbar-color: #00598C white;
}

.fixed-table:active {
  scrollbar-color: #0079BF white;
}

.fixed-table__scroller {
  margin-left: 60%;
  /* If you change this line you must also change the nested class ".fixed-table__sticy-col" width to match. */
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 5px;
}

@media (min-width: 768px) {
  .fixed-table__scroller {
    overflow-x: visible;
    margin-left: 0;
  }
}

.fixed-table__wrapper {
  border: none;
  border-spacing: 0;
  width: 100%;
}

.fixed-table__wrapper thead th {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: bold;
  text-transform: none;
  color: #333;
  padding: 12px 16px 8px;
  word-wrap: break-word;
  text-align: left;
}

.fixed-table__wrapper thead th.align-right {
  text-align: right;
}

@-moz-document url-prefix()  {
  .fixed-table__wrapper .fixed-table__sticky-col {
    margin-top: -24px;
    scrollbar-width: none;
  }
}

.fixed-table__wrapper tbody > tr:nth-child(odd),
.fixed-table__wrapper tbody > tr:nth-child(odd) td:nth-child(1) {
  background-color: #EBEBEB;
}

.fixed-table__wrapper tbody > tr:nth-child(even),
.fixed-table__wrapper tbody > tr:nth-child(even) td:nth-child(1) {
  background-color: #FFFFFF;
}

.fixed-table__wrapper tbody > tr.blue-total,
.fixed-table__wrapper tbody > tr.blue-total td:nth-child(1) {
  background-color: #DAEBFE;
  font-weight: bold;
}

.fixed-table__wrapper tbody > tr.yellow-total,
.fixed-table__wrapper tbody > tr.yellow-total td:nth-child(1) {
  background-color: #FFD100;
  font-weight: bold;
}

.fixed-table__wrapper tbody > tr.yellow-total > td,
.fixed-table__wrapper tbody > tr.yellow-total td:nth-child(1) > td {
  border: none;
}

.fixed-table__wrapper tbody td {
  font-size: 0.8rem;
  line-height: 1rem;
  color: #333;
  padding: 12px 16px 8px;
  word-wrap: break-word;
}

.fixed-table__wrapper tfoot > tr.blue-total,
.fixed-table__wrapper tfoot > tr.blue-total td:nth-child(1) {
  background-color: #DAEBFE;
  font-weight: bold;
}

.fixed-table__wrapper tfoot > tr.yellow-total,
.fixed-table__wrapper tfoot > tr.yellow-total td:nth-child(1) {
  background-color: #FFD100;
  font-weight: bold;
}

.fixed-table__wrapper tfoot > tr.yellow-total > td,
.fixed-table__wrapper tfoot > tr.yellow-total td:nth-child(1) > td {
  border: none;
}

.fixed-table__wrapper tfoot td {
  font-size: 0.8rem;
  line-height: 1rem;
  color: #333;
  padding: 12px 16px 8px;
  word-wrap: break-word;
}

.fixed-table #sortTable {
  opacity: 0;
  filter: alpha(opacity=0);
}

.fixed-table #sortTable tr th:nth-child(1) {
  position: absolute;
}

@media (min-width: 768px) {
  .fixed-table #sortTable tr th:nth-child(1) {
    position: relative;
  }
}

.fixed-table #sortTable tr th:nth-child(1) {
  width: 34%;
}

.fixed-table #sortTable th {
  position: relative;
  cursor: pointer;
  padding-left: 32px;
}

.fixed-table #sortTable th::before,
.fixed-table #sortTable th::after {
  content: '\25E4';
  font-size: 6px;
  color: #999;
  display: block;
  position: absolute;
  left: 18px;
  top: 12px;
  width: 6px;
  height: 9px;
  transform: rotate(45deg);
}

.fixed-table #sortTable th::after {
  left: 16px;
  top: 16px;
  transform: rotate(225deg);
}

.fixed-table #sortTable th.sorting-asc::after {
  color: #00598C;
}

.fixed-table #sortTable th.sorting-desc::before {
  color: #00598C;
}

.fixed-table__sticky-col {
  left: 0;
  position: absolute;
  top: auto;
  width: 60%;
  /* If you change this line change you must also change the parent class ".fixed-table__scroller" margin-left to match. */
  overflow-y: unset;
  font-weight: normal;
}

@media (min-width: 768px) {
  .fixed-table__sticky-col {
    min-width: 300px;
    position: relative;
  }
}

.fixed-table ::-webkit-scrollbar {
  width: 0;
  height: 8px;
}

.fixed-table ::-webkit-scrollbar-track {
  box-shadow: inset 0 -1px 0 0 #E5E5E5, inset 0 1px 0 0 #E5E5E5;
  border-radius: 4px;
}

.fixed-table ::-webkit-scrollbar-thumb {
  background: #00598C;
  border-radius: 4px;
}

.fixed-table ::-webkit-scrollbar-thumb:hover {
  background: #0079BF;
}

@supports (-webkit-touch-callout: none) {
  .fixed-table #sortTable tr th:nth-child(1),
  .fixed-table__sticky-col {
    position: relative;
  }

  .fixed-table__scroller {
    margin-left: 0;
  }
}

.searchbox {
  position: relative;
}

.searchbox input[name="keyword"] {
  background: #E5E5E5;
  border: none;
  font-size: 1rem;
  line-height: 1.25rem;
  padding: 12px 22px 8px 52px;
  width: 100%;
}

.searchbox input[type="submit"] {
  position: absolute;
  top: 12px;
  left: 18px;
  background: none;
  border: none;
  text-indent: -1000px;
  overflow: hidden;
  background: url("../img/search-icon-black.svg") no-repeat 0 0;
  display: block;
  width: 18px;
  height: 18px;
}

/*******
1. Accordion is a mobile only feature. Accordians are fully expanded on screens above 768px.
2. Grey backgrounds are a mobile only feature.
3. Numbers in IDs and aria-controls and aria-labelledby must be consecutive.
   (i.e. first one is id="accordion1id" second one is id="accordion2id" and so on.)

   HTML structure:

   1. Accordion main wrapper (wraps #2 and content after [i.e faculty cards in leadership page])
   2. Accordion title section and a button (used as a drop down mobile for mobile)
   3. Accordion content section

   Code:

   1. Accordion Main Wrapper - Should include 'section-wrapper accordion' class names - <div class="section-wrapper accordion">

   2. Accordion - Each accordion includes (letters denote levels of nesting):
    a. h2 class - <h2 class="accordion__title">
     b. button for accordion - <button id="accordion1id"...> <NAME OF SECTION> </button>

   Example case for the accordion:

   <div class="section-wrapper accordion">       <!-- 1. Accordion main wrapper -->

     <h2 class="accordion__title">       <!-- 2. Accordion title section and button -->
       <button id="accordion1id" class="accordion__title-button" type="button" aria-expanded="true" aria-controls="sect1">
         <TITLE HERE (i.e. Fields Medal in Mathematics)>
       </button>
     </h2>

     <div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion__content"> <!-- 3. Accordion content section -->
         <p>Add content here</p>
     </div>
   </div>

See examples on:
- Alumni & Student Honors Page
- Terms of Use
- Accessibility
- Site Information

Further documentation on ADA compliant accordions
- https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html
Other Resources
- aria-labelledby - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
- role = region - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role
*******/

.accordion {
  padding: 0;
}

@media (min-width: 1280px) {
  .accordion {
    min-width: 1366px;
  }
}

.accordion__title {
  font-size: 20px;
  line-height: 24px;
  padding: 18px 48px 16px 8px;
}

@media (min-width: 768px) {
  .accordion__title {
    padding-top: 20px;
  }
}

@media (min-width: 1024px) {
  .accordion__title {
    color: #000000;
    font-size: 36px;
    line-height: 40px;
    padding-top: 64px;
    padding-bottom: 8px;
  }
}

.accordion__title::after,
.accordion__title:focus::after {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/down--blue.svg");
  background-position: center;
  background-size: contain;
}

@media (min-width: 768px) {
  .accordion__title::after,
  .accordion__title:focus::after {
    background: none;
  }
}

.accordion__title:hover::after,
.accordion__title:hover:focus::after,
.accordion__title:active::after {
  background: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/down--white.svg");
  background-position: center;
  background-size: contain;
}

@media (hover) {
  .accordion__title.active {
    background-color: inherit;
    color: #00598C;
  }

  .accordion__title.active:hover {
    background-color: #0079BF;
    color: #FFFFFF;
  }
}

.accordion__title.active::after,
.accordion__title.active:focus::after,
.accordion__title.active:hover::after,
.accordion__title.active:hover:focus::after,
.accordion__title.active:active::after {
  transform: scaleY(-1);
}

.accordion__content {
  padding: 16px 0 32px 0;
  padding: 16px 0 0 0;
}

.accordion--card-content .accordion__content {
  display: none;
}

.accordion--card-content .accordion__content.show-me {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

@media (min-width: 600px) {
  .accordion--card-content .accordion__content.show-me {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 768px) {
  .accordion--mobile-only .accordion__title {
    color: #00598C;
    cursor: default;
  }

  .accordion--mobile-only .accordion__title:hover {
    background: inherit;
    color: #00598C;
  }
}

@media (min-width: 1024px) {
  .accordion--mobile-only .accordion__title {
    color: #000000;
    cursor: default;
  }

  .accordion--mobile-only .accordion__title:hover {
    background: inherit;
    color: #000000;
  }
}

.accordion__title:hover,
.accordion__title:active {
  background: white;
  color: #00598C;
}

@media (max-width: 767.98px) {
  .accordion__title:hover,
  .accordion__title:active {
    cursor: pointer;
  }

  .accordion__title:hover:hover::after,
  .accordion__title:hover:hover:focus::after,
  .accordion__title:hover:active::after,
  .accordion__title:active:hover::after,
  .accordion__title:active:hover:focus::after,
  .accordion__title:active:active::after {
    background-image: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/down--blue.svg");
  }
}

@media (hover) and (max-width: 767.98px) {
  .accordion__title:hover,
  .accordion__title:active {
    background: #0079bf;
    color: #fff;
    cursor: pointer;
  }

  .accordion__title:hover:hover::after,
  .accordion__title:hover:hover:focus::after,
  .accordion__title:hover:active::after,
  .accordion__title:active:hover::after,
  .accordion__title:active:hover:focus::after,
  .accordion__title:active:active::after {
    background-image: url("../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/down--white.svg");
  }

  .accordion__title:hover p,
  .accordion__title:active p {
    color: #fff;
  }
}

/*
* People cards - override Component Library styles
*/

.person-card,
.person-card-grey,
.person-card-gray {
  display: block;
  margin-top: -8px;
}

.person-card:first-child,
.person-card-grey:first-child,
.person-card-gray:first-child {
  margin-top: 0;
}

@media (min-width: 480px) {
  .person-card,
  .person-card-grey,
  .person-card-gray {
    margin: 0 24px 0 0;
  }
}

@media (min-width: 600px) {
  .person-card,
  .person-card-grey,
  .person-card-gray {
    width: 50%;
  }
}

.person-card__image {
  width: 160px;
  padding-left: 0;
  margin-left: 32px;
}

@media (min-width: 480px) {
  .person-card__image {
    height: auto;
  }
}

.person-card__info-wrapper {
  max-width: none;
}

.person-card__name {
  padding-bottom: 0;
}

.person-card__name a {
  text-decoration: none;
}

.person-card__name a:visited,
.person-card__name a:not(.page):visited {
  color: #00598C;
}

.person-card__name a:visited:hover,
.person-card__name a:not(.page):visited:hover {
  color: #FFFFFF;
}

.person-card__department {
  padding-bottom: 0;
  margin-bottom: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
}

.person-card__description {
  padding-bottom: 0;
  margin-top: 16px;
}

.person-card__photo-credit {
  padding-bottom: 0;
  margin-top: 16px;
  font-size: 12.8px;
  line-height: 19.2px;
  font-style: italic;
}

/*******

Faculty Card

HTML structure:

1. Individual Faculty Cards

I. Individual Faculty Cards - The structure includes (letters denote levels of nesting):
 a. main div class - <div class="faculty-card">
   b. card wrap - <div class="faculty-card__wrap">
     c. info wrap - <div class="faculty-card__info">
       - name - <p class="faculty-card__info-name">Yolanda J.<br/>Gorman</p>
       - title - <p class="faculty-card__info-title">Senior Advisor to the Chancellor</p>
     c. image wrap - <div class="faculty-card__image">
       - image - <img class="faculty-card__image-img" src="/img/about/leadership/leadership-img-gorman–yolanda.jpg"  alt="" />
       - (sometimes an) image cred - <p class="faculty-card__image-cred">Photo Credits: John D. &amp; Jane D. Foundation</p>

II. Example case for Single cards:

<!-- This is an individual use example -->

   <!-- divs should be used for single, non-grouped cards -->

   <div>

     <div class="faculty-card">
       <div class="faculty-card__wrap">
         <div class="faculty-card__info">
           <p class="faculty-card__info-name">Yolanda J.<br/>Gorman</p>
           <p class="faculty-card__info-title">Senior Advisor to the Chancellor</p>
         </div>
         <div class="faculty-card__image">
           <img class="faculty-card__image-img" src="/img/about/leadership/leadership-img-gorman–yolanda.jpg"  alt="" />
         </div>
       </div>
     </div>

   </div>

2. Grouped Faculty Cards

I.  Example case for Grouped Cards:

<!-- ul/li tags should be used for grouped cards -->

  <ul>

		<li class="faculty-card"> <!-- An individual card -->
			<div class="faculty-card__wrap">
		    <div class="faculty-card__info">
		      <p class="faculty-card__info-name"><a class="faculty-card__info-link" href="https://apo.ucla.edu/contact-information/vice-chancellor-michael-levine">Michael S.<br/>Levine</a></p>
		      <p class="faculty-card__info-title">Vice Chancellor,<br/>Academic Personnel</p>
		    </div>
		    <div class="faculty-card__image">
		      <img class="faculty-card__image-img" src="/img/about/leadership/leadership-img-levine.jpg"  alt="" />
		    </div>
		  </div>
		</li>

		<li class="faculty-card"> <!-- Another card -->
			<div class="faculty-card__wrap">
		    <div class="faculty-card__info">
		      <p class="faculty-card__info-name"><a class="faculty-card__info-link" href="https://www.adminvc.ucla.edu/biography">Michael J.<br/>Beck</a></p>
		      <p class="faculty-card__info-title">Administrative Vice Chancellor</p>
		    </div>
		    <div class="faculty-card__image">
		      <img class="faculty-card__image-img" src="/img/about/leadership/leadership-img-beck.jpg"  alt="Micheal J. Beck Headshot" >
		    </div>
		  </div>
		</li>

    <!-- Additional Cards May Be Added -->

  </ul>


See example on Leadership Page
*******/

.faculty-card {
  display: inline-block;
  position: relative;
  width: 47%;
  padding: 0 5px 10px 5px;
  vertical-align: top;
}

.faculty-card:nth-child(2n + 1) {
  margin-right: 4%;
}

@media (min-width: 768px) {
  .faculty-card {
    margin: 0 5px 40px 5px;
    background: #EBEBEB;
  }

  .faculty-card:nth-child(2n + 1) {
    margin-right: 3%;
  }
}

@media (min-width: 1024px) {
  .faculty-card {
    margin: 0 12px 30px 12px;
    width: 22.9%;
    min-height: 160px;
  }

  .faculty-card:nth-child(2n + 1) {
    margin-right: 4px;
    margin-left: 4px;
  }
}

@media (min-width: 1165px) {
  .faculty-card {
    width: 23.1%;
    min-height: 125px;
    padding: 0 5px;
  }
}

.faculty-card__wrap {
  position: relative;
  transform: scaleY(-1);
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .faculty-card__wrap {
    transform: none;
  }
}

.faculty-card__wrap > .faculty-card__info,
.faculty-card__wrap > .faculty-card__image {
  transform: scaleY(-1);
}

@media (min-width: 768px) {
  .faculty-card__wrap > .faculty-card__info,
  .faculty-card__wrap > .faculty-card__image {
    transform: none;
  }
}

.faculty-card__info {
  background: #EBEBEB;
  min-height: 130px;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .faculty-card__info {
    background: rgba(0, 0, 0, 0);
    min-height: 125px;
    max-width: 70%;
  }
}

@media (min-width: 1024px) {
  .faculty-card__info {
    max-width: 59%;
  }
}

@media (min-width: 1280px) {
  .faculty-card__info {
    max-width: 65%;
  }
}

.faculty-card__info-name {
  color: #333;
  font-weight: bold;
  font-size: 1rem;
  margin: 10px 0 8px 0;
  line-height: 1.25rem;
  padding: 0 10px;
}

@media (min-width: 768px) {
  .faculty-card__info-name {
    margin: 12px 0 16px 0;
  }
}

@media (min-width: 1024px) {
  .faculty-card__info-name {
    padding: 0 25px 0 10px;
  }
}

@media (min-width: 1165px) {
  .faculty-card__info-name {
    padding: 0 10px 0 10px;
  }
}

.faculty-card__info-title {
  font-size: 0.8rem;
  line-height: 1rem;
  padding: 0 10px 0 10px;
}

@media (min-width: 1024px) {
  .faculty-card__info-title {
    margin-bottom: 5px;
    padding: 0 25px 0 10px;
  }
}

@media (min-width: 1165px) {
  .faculty-card__info-title {
    padding: 0 10px 0 10px;
  }
}

.faculty-card__info-link {
  color: #00598C;
  text-decoration: none;
}

.faculty-card__info-link:hover {
  color: #FFFFFF;
}

.faculty-card__info-link:active,
.faculty-card__info-link:visited {
  color: #00598C;
  text-decoration: none;
}

.faculty-card__image {
  width: 100%;
  margin-top: -10px;
}

@media (min-width: 768px) {
  .faculty-card__image {
    position: absolute;
    right: 5px;
    top: 0;
    margin-top: 0;
  }
}

.faculty-card__image-img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 5px;
  margin-bottom: -10px;
}

@media (min-width: 768px) {
  .faculty-card__image-img {
    padding: 0;
    right: 0;
    top: -15px;
    width: 96px;
    height: 96px;
    position: absolute;
  }
}

@media (min-width: 1024px) {
  .faculty-card__image-img {
    margin-left: -27px;
  }
}

@media (min-width: 1165px) {
  .faculty-card__image-img {
    margin-left: -15px;
  }
}

.faculty-card__image-cred {
  color: #666666;
  font-style: oblique;
  font-size: 0.5625rem;
  line-height: 0.75rem;
  padding: 14px 10px 0 10px;
  margin-bottom: -1px;
  max-width: 100%;
  background: #EBEBEB;
}

@media (min-width: 768px) {
  .faculty-card__image-cred {
    position: absolute;
    max-width: 100px;
    right: 0;
    top: 70px;
    background: rgba(0, 0, 0, 0);
  }
}

@media (min-width: 1165px) {
  .faculty-card__image-cred {
    margin-left: -16px;
  }
}

/*******

Faculty Card Featured

HTML structure:

1. Individual Faculty Cards

I. Individual Faculty Cards - The structure includes (letters denote levels of nesting):
 a. main div class - <div class="faculty-card-featured">
  b. image - <img class="faculty-card-featured__image" src="/img/about/leadership/leadership-img-chancellor.jpg"  alt="" />
  c. info wrap - <div class="faculty-card-featured__info">
     - image credit - <p class="faculty-card-featured__info-cred">Photo Credit: Photo credit may or may not be on the faculty card.</p>
     - name - Name and link to individual's specific page - <p class="faculty-card-featured__info-name"><a class="faculty-card-featured__info-link" href="https://chancellor.ucla.edu/">Gene Block</a></p>
     - title - <p class="faculty-card-featured__info-title">Chancellor</p>

II. Example case for Single cards:

<!-- This is an individual use example -->

   <!-- divs should be used for single, non-grouped cards -->

   <div class="faculty-card-featured">
     <img class="faculty-card-featured__image" src="/img/about/leadership/leadership-img-chancellor.jpg"  alt="" />
     <div class="faculty-card-featured__info">
       <p class="faculty-card-featured__info-cred">Photo Credit: Photo credit may or may not be on the faculty card.</p>
       <p class="faculty-card-featured__info-name"><a class="faculty-card-featured__info-link" href="https://chancellor.ucla.edu/">Gene Block</a></p>
       <p class="faculty-card-featured__info-title">Chancellor</p>
     </div>
   </div>

2. Grouped Faculty Cards

I.  Example case for Grouped Cards:

<!-- ul/li tags should be used for grouped cards -->

  <ul>

    <li class="faculty-card-featured"> <!-- An individual card -->
      <img class="faculty-card-featured__image" src="/img/about/leadership/leadership-img-chancellor.jpg"  alt="" />
      <div class="faculty-card-featured__info">
        <p class="faculty-card-featured__info-cred">Photo Credit: Photo credit may or may not be on the faculty card.</p>
        <p class="faculty-card-featured__info-name"><a class="faculty-card-featured__info-link" href="https://chancellor.ucla.edu/">Gene Block</a></p>
        <p class="faculty-card-featured__info-title">Chancellor</p>
      </div>
    </li>

    <li class="faculty-card-featured"> <!-- Another card -->
      <img class="faculty-card-featured__image" src="/img/about/leadership/leadership-img-carter-emily.jpg"  alt="" />
      <div class="faculty-card-featured__info">
        <p class="faculty-card-featured__info-name"><a class="faculty-card-featured__info-link" href="http://newsroom.ucla.edu/releases/ucla-names-emily-a-carter-new-executive-vice-chancellor-and-provost">Emily A. Carter</a></p>
        <p class="faculty-card-featured__info-title">Executive Vice Chancellor and Provost</p>
      </div>
    </li>

        <div class="faculty-card-extended__image">
          <img class="faculty-card-extended__image-img" src="/img/about/faculty/10_MacArthur_Hallem.jpg"  alt="Elissa Hallem" >
          <p class="faculty-card-extended__image-cred">Photo Credit: John D. &amp; Catherine T. MacArthur Foundation</p>
        </div>
      </div>
    </li>

    <!-- Additional Cards May Be Added -->

  </ul>

See example on Leadership Page
*******/

.faculty-card-featured {
  width: 100%;
  display: block;
  margin: 24px 0 0 0;
  vertical-align: top;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .faculty-card-featured h3 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (min-width: 768px) {
  .faculty-card-featured {
    float: left;
    margin-right: 16px;
    margin-bottom: 0;
    width: calc((100% / 3) - 11px);
  }
}

@media (min-width: 1024px) {
  .faculty-card-featured {
    margin-right: 24px;
    width: calc((100% / 3) - 16px);
  }
}

.faculty-card-featured__image {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 768px) {
  .faculty-card-featured__image {
    aspect-ratio: 1/0.85;
  }
}

@media (min-width: 1024px) {
  .faculty-card-featured__image {
    aspect-ratio: initial;
  }
}

.faculty-card-featured__info {
  display: block;
  position: relative;
  z-index: 2;
  width: 90%;
  min-height: 79px;
  margin-top: -20px;
  background: #EBEBEB;
  padding: 32px 32px 40px 32px;
}

.faculty-card-featured__info-cred {
  color: #666666;
  font-style: oblique;
  font-size: 0.5625rem;
  line-height: 0.75rem;
  padding: 0 0 10px;
  margin-bottom: 0;
}

.faculty-card-featured__info-name {
  color: #2774AE;
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0 0 5px 0;
}

.faculty-card-featured__info-link {
  color: #00598C;
  text-decoration: none;
}

.faculty-card-featured__info-link:hover {
  color: #FFFFFF;
}

.faculty-card-featured__info-link:active,
.faculty-card-featured__info-link:visited {
  color: #00598C;
  text-decoration: none;
}

.faculty-card-featured__info-title {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0;
}

.faculty-card-featured.white .faculty-card-featured__info {
  background: #FFFFFF;
}

/*******

Faculty Card Extended

HTML structure:

1. Individual Faculty Cards

I. Individual Faculty Cards - The structure includes (letters denote levels of nesting):
 a. main div class - <div class="faculty-card-extended">
   b. card wrap - <div class="faculty-card-extended__wrap">
     c. info wrap - <div class="faculty-card-extended__info">
       - pre-title - Category and/or year - <p class="faculty-card-extended__info-pre-title mb-2">2006</p>
       - name - Name and link to individual's specific page - <p class="faculty-card-extended__info-name mb-2"><a class="faculty-card-extended__info-link" href="https://www.math.ucla.edu/~tao/" aria-label="Link to Terence Tao’s UCLA page">Terence Tao</a></p>
       - title - Department (and join date) - <p class="faculty-card-extended__info-title mb-1">Mathematics faculty, joined 1996</p>
     c. image wrap - <div class="faculty-card-extended__image">
       - image - <img class="faculty-card-extended__image-img" src="/img/about/faculty/08_Fields-Tao.jpg"  alt="Terence Tao" >
       - (sometimes an) image cred - <p class="faculty-card-extended__image-cred">Photo Credits: John D. &amp; Jane D. Foundation</p>

II. Example case for Single cards:

<!-- This is an individual use example -->

   <!-- divs should be used for single, non-grouped cards -->

    <div class="faculty-card-extended"> <!-- Individual Faculty Cards - single cards for each individual -->
      <div class="faculty-card-extended__wrap">

        <div class="faculty-card-extended__info">
          <p class="faculty-card-extended__info-pre-title mb-2">2006</p>
          <p class="faculty-card-extended__info-name mb-2"><a class="faculty-card-extended__info-link" href="https://www.math.ucla.edu/~tao/" aria-label="Link to Terence Tao’s UCLA page">Terence Tao</a></p>
          <p class="faculty-card-extended__info-title mb-1">Mathematics faculty, joined 1996</p>
        </div>

        <div class="faculty-card-extended__image">
          <img class="faculty-card-extended__image-img" src="/img/about/faculty/08_Fields-Tao.jpg"  alt="Terence Tao" >
          <p class="faculty-card-extended__image-cred">Photo Credits: John D. &amp; Jane D. Foundation</p>
        </div>

      </div>

    </div>

2. Grouped Faculty Cards

I.  Example case for Grouped Cards:

<!-- ul/li tags should be used for grouped cards -->

  <ul>

    <li class="faculty-card-extended"> <!-- An individual card -->
      <div class="faculty-card-extended__wrap">
        <div class="faculty-card-extended__info">
          <p class="faculty-card-extended__info-pre-title mb-2">Choreographer and Dancer<br/>2013</p>
          <p class="faculty-card-extended__info-name mb-2"><a class="faculty-card-extended__info-link" href="https://www.macfound.org/fellows/882/">Kyle Abraham</a></p>
          <p class="faculty-card-extended__info-title mb-1">World Arts and Cultures/Dance, joined faculty 2016</p>
        </div>

        <div class="faculty-card-extended__image">
          <img class="faculty-card-extended__image-img" src="/img/about/faculty/09_MacArthur_Abraham.jpg"  alt="Kyle Abraham" >
          <p class="faculty-card-extended__image-cred">Photo Credits: John D. &amp; Catherine T. MacArthur Foundation</p>
        </div>
      </div>
    </li>

    <li class="faculty-card-extended"> <!-- Another card -->
      <div class="faculty-card-extended__wrap">
        <div class="faculty-card-extended__info">
          <p class="faculty-card-extended__info-pre-title mb-2">Neurobiologist<br/>2012</p>
          <p class="faculty-card-extended__info-name mb-2"><a class="faculty-card-extended__info-link" href="https://www.macfound.org/fellows/867/">Elissa Hallem</a></p>
          <p class="faculty-card-extended__info-title mb-1">Microbiology, Immunology and Molecular Genetics, joined faculty 2011</p>
        </div>

        <div class="faculty-card-extended__image">
          <img class="faculty-card-extended__image-img" src="/img/about/faculty/10_MacArthur_Hallem.jpg"  alt="Elissa Hallem" >
          <p class="faculty-card-extended__image-cred">Photo Credit: John D. &amp; Catherine T. MacArthur Foundation</p>
        </div>
      </div>
    </li>

    <!-- Additional Cards May Be Added -->

  </ul>

See example on Leadership Page

*******/

.faculty-card-extended {
  display: inline-block;
  position: relative;
  width: 47%;
  padding: 0 5px 10px 5px;
  vertical-align: top;
}

.faculty-card-extended:nth-child(2n + 1) {
  margin-right: 4%;
}

@media (min-width: 650px) {
  .faculty-card-extended {
    width: 45%;
    margin: 0 5px 40px 5px;
    background: #EBEBEB;
    min-height: 180px;
  }

  .faculty-card-extended:nth-child(2n + 1) {
    margin-right: 3%;
  }
}

@media (min-width: 1024px) {
  .faculty-card-extended {
    margin: 0 5px 30px 5px;
    width: 32%;
    min-height: 170px;
  }

  .faculty-card-extended:nth-child(2n + 1) {
    margin-right: 5px;
  }
}

.faculty-card-extended__wrap {
  position: relative;
  margin-bottom: 15px;
  transform: scaleY(-1);
}

@media (min-width: 650px) {
  .faculty-card-extended__wrap {
    transform: none;
  }
}

.faculty-card-extended__wrap > .faculty-card-extended__info,
.faculty-card-extended__wrap .faculty-card-extended__image {
  transform: scaleY(-1);
}

@media (min-width: 650px) {
  .faculty-card-extended__wrap > .faculty-card-extended__info,
  .faculty-card-extended__wrap .faculty-card-extended__image {
    transform: none;
  }
}

.faculty-card-extended__info {
  background: #EBEBEB;
  padding: 15px 0 15px 0;
  width: 100%;
}

@media (min-width: 470px) {
  .faculty-card-extended__info {
    min-height: 190px;
  }
}

@media (min-width: 650px) {
  .faculty-card-extended__info {
    background: rgba(0, 0, 0, 0);
    min-height: 125px;
    width: 66.13%;
  }
}

@media (min-width: 768px) {
  .faculty-card-extended__info {
    padding: 10px 0 0 0;
  }
}

.faculty-card-extended__info-pre-title {
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 0.9rem;
  padding: 0 15px 0 10px;
  margin-bottom: 16px;
  color: #424242;
}

.faculty-card-extended__info-name {
  color: #00598C;
  font-weight: bold;
  font-size: 1rem;
  margin: 0 0 8px 0;
  line-height: 1.25rem;
  padding: 0 15px 0 10px;
}

@media (min-width: 650px) {
  .faculty-card-extended__info-name {
    margin: 12px 0 16px 0;
  }
}

@media (min-width: 1024px) {
  .faculty-card-extended__info-name {
    padding: 0 25px 0 10px;
  }
}

@media (min-width: 1165px) {
  .faculty-card-extended__info-name {
    padding: 0 10px 0 10px;
  }
}

.faculty-card-extended__info-title {
  font-size: 0.8rem;
  line-height: 1rem;
  padding: 0 10px 0 10px;
  word-break: word-break;
  margin: 0;
}

@media (min-width: 768px) {
  .faculty-card-extended__info-title {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .faculty-card-extended__info-title {
    padding: 0 25px 0 10px;
  }
}

@media (min-width: 1165px) {
  .faculty-card-extended__info-title {
    padding: 0 10px 0 10px;
  }
}

.faculty-card-extended__info-link {
  color: #00598C;
  text-decoration: none;
}

.faculty-card-extended__info-link:hover {
  color: #FFFFFF;
}

.faculty-card-extended__info-link:active,
.faculty-card-extended__info-link:visited {
  color: #00598C;
  text-decoration: none;
}

.faculty-card-extended__image {
  width: 100%;
  margin-top: -10px;
}

@media (min-width: 650px) {
  .faculty-card-extended__image {
    position: absolute;
    right: 5px;
    top: 0;
    margin-top: 0;
  }
}

.faculty-card-extended__image-img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 5px;
  margin-bottom: -10px;
}

@media (min-width: 650px) {
  .faculty-card-extended__image-img {
    padding: 0;
    right: 0;
    top: -15px;
    width: 96px;
    height: 96px;
    position: absolute;
  }
}

@media (min-width: 768px) {
  .faculty-card-extended__image-img {
    width: 124px;
    height: 124px;
  }
}

@media (min-width: 1024px) {
  .faculty-card-extended__image-img {
    margin-left: -27px;
  }
}

@media (min-width: 1165px) {
  .faculty-card-extended__image-img {
    margin-left: -10px;
  }
}

.faculty-card-extended__image-cred {
  color: #666666;
  font-style: oblique;
  font-size: 0.5625rem;
  line-height: 0.75rem;
  padding: 14px 10px 10px 10px;
  margin-bottom: -10px;
  max-width: 100%;
  background: #EBEBEB;
}

@media (min-width: 650px) {
  .faculty-card-extended__image-cred {
    position: absolute;
    max-width: 100px;
    right: 0;
    top: 70px;
    background: rgba(0, 0, 0, 0);
  }
}

@media (min-width: 768px) {
  .faculty-card-extended__image-cred {
    max-width: 130px;
    top: 100px;
  }
}

main .ribbon {
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: bold;
  margin-bottom: 2px;
  position: relative;
  left: 12px;
  top: 0;
}

main .ribbon::after {
  content: " ";
  display: table;
  clear: both;
}

main .ribbon span {
  background: #2774AE;
  float: left;
  font-size: 2rem;
  line-height: 2.625rem;
  padding: 0px 6px;
  margin-bottom: 4px;
  margin-left: -12px;
  margin-right: 12px;
}

@media (min-width: 768px) {
  main .ribbon span {
    font-size: 3rem;
    line-height: 4rem;
    margin-bottom: 3px;
  }
}

main .ribbon--yellow {
  font-weight: bold;
  margin-bottom: 2px;
  position: relative;
  left: 12px;
  top: 0;
  text-align: right;
  position: relative;
  left: unset;
  max-width: 100%;
  width: 100%;
}

main .ribbon--yellow::after {
  content: " ";
  display: table;
  clear: both;
}

@media (min-width: 1024px) {
  main .ribbon--yellow {
    max-width: 274px;
    position: absolute;
    right: -29px;
    top: 32px;
  }
}

main .ribbon--yellow span {
  margin-bottom: 4px;
  float: right;
  font-size: 1.25rem;
  line-height: 1.25rem;
  text-align: right;
  text-transform: none;
  display: inline-block;
  padding: 12px 9px 8px;
  color: #333;
  background: #FFD100;
}

@media (min-width: 342px) {
  main .ribbon--yellow span {
    margin-bottom: 3px;
    float: none;
  }
}

main .ribbon--narrow {
  max-width: 200px;
}

@media (min-width: 768px) {
  main .ribbon--narrow {
    max-width: 500px;
  }
}

.section-wrapper .card-wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 24px;
  position: relative;
  top: 0px;
  display: block;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper {
    display: table;
  }
}

.section-wrapper .card-wrapper.accordion {
  padding: 0px !important;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper.accordion {
    padding-top: 0 !important;
  }
}

.section-wrapper .card-wrapper .section {
  display: block;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section {
    display: table-row;
  }
}

.section-wrapper .card-wrapper .section .col {
  display: block;
  float: none;
  vertical-align: middle;
  margin: 0;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section .col {
    display: table-cell;
    margin: 1% 0 1% 1.6%;
  }
}

.section-wrapper .card-wrapper .section .col.span_4_of_12 {
  display: none;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section .col.span_4_of_12 {
    display: table-cell;
  }
}

.section-wrapper .card-wrapper .section.ribbon-card .card-img {
  display: inline-block;
  max-width: 376px;
  background: #CCCCCC;
  float: left;
}

.section-wrapper .card-wrapper .section.ribbon-card .card-img img {
  display: block;
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info {
  width: 100%;
  position: relative;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info {
    width: 66.13%;
  }
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container {
  position: relative;
  left: 0px;
  padding: 21px 16px 34px;
  width: 100%;
  background: #FFFFFF;
  overflow: hidden;
}

@media (min-width: 768px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container {
    overflow: unset;
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container {
    left: -43px;
    width: 103.5%;
    min-height: 264px;
    overflow: inherit;
    padding: 32px;
  }
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .accordion__title {
  position: unset;
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .accordion__title-arrow {
  border-radius: 0px;
  top: 0;
  right: 0;
  left: unset;
  width: 32px;
  height: 32px;
  transition: 0s;
  -webkit-transition: 0s;
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .school {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #333;
  display: block;
  margin-bottom: 3px;
  padding-right: 54px;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .school {
    font-weight: bold;
    margin-bottom: 0px;
    padding-right: 0;
  }
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container h2 {
  max-width: 100%;
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin-bottom: 12px;
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container h2 a {
  color: #00598C;
  text-decoration: none;
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container h2 a:hover {
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container h2 {
    max-width: calc(100% - 238px);
    margin-bottom: 0px;
  }
}

@media (min-width: 768px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container img.mobile {
    display: block;
    max-width: 240px;
    position: absolute;
    left: -68px;
    top: 0;
  }
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container img.mobile {
    display: none;
  }
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .degree {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: bold;
  color: #757575;
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .degree {
    margin-bottom: 16px;
    max-width: calc(100% - 238px);
    display: block;
  }
}

.section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .description {
  max-width: 100%;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .description {
    margin-left: 231px;
    margin-bottom: 33px;
    padding-top: 13px;
  }
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .description {
    max-width: calc(100% - 238px);
    margin-bottom: 0px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .accordion__content {
    margin-top: 32px;
  }
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .accordion__content {
    position: unset;
  }
}

@media (min-width: 768px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .accordion__content .ribbon--yellow {
    padding-left: 194px;
    right: -79px;
  }
}

@media (min-width: 1024px) {
  .section-wrapper .card-wrapper .section.ribbon-card .card-info .info-container .accordion__content .ribbon--yellow {
    padding-left: 0px;
    right: -60px;
  }
}

/*******
Skip Navigation necessary on every page of the site and should go above the header in your page template.

1. The href attribute should contain the ID name of the area you would like to skip to, preceeded by the "#" symbol.

<div id="skip-nav" class="skip-nav" role="navigation" aria-label="Skip navigation">
  <a class="button" href="#main-content">Skip to Main Content</a>
	<a class="button" href="#footer">Skip to Footer Links</a>
</div>
*******/

.skip-nav {
  display: block;
  position: fixed;
  top: 0;
  left: 5px;
  z-index: 500;
}

.skip-nav__desktop-search,
.skip-nav__desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .skip-nav__desktop-search,
  .skip-nav__desktop-nav {
    display: block;
  }
}

@media (min-width: 1024px) {
  .skip-nav__mobile-search,
  .skip-nav__mobile-nav {
    display: none;
  }
}

.skip-nav .button {
  position: absolute;
  left: -300px;
  top: -300px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  color: #00598C;
  text-decoration: underline;
}

.skip-nav .button:hover {
  color: #00598C;
}

.skip-nav .button:focus {
  position: absolute;
  outline: 1;
  left: 0;
  top: 0;
  padding: 8px;
  width: 200px;
  overflow: visible;
  background-color: #FFFFFF;
  border: 1px dotted #000000;
}

ul.slick-dots {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto 20px;
  padding: 0;
}

ul.slick-dots li {
  display: inline-block;
  position: relative;
  text-align: center;
  width: 23px;
}

@media (min-width: 768px) {
  ul.slick-dots li {
    width: 20px;
    height: 20px;
    padding: 8px 9px 0 0;
  }
}

ul.slick-dots li:hover {
  cursor: pointer;
}

ul.slick-dots li:hover::after {
  background: #FFD100;
}

ul.slick-dots li::after {
  display: block;
  position: absolute;
  top: -20px;
  content: '';
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  width: 16px;
  height: 16px;
  border-radius: 8px;
}

@media (min-width: 768px) {
  ul.slick-dots li::after {
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }
}

ul.slick-dots li.slick-active::after {
  background: #00598C;
  border: 1px solid #00598C;
}

ul.slick-dots li button {
  color: inherit;
  background: transparent;
  font-size: 11px;
}

@media (min-width: 768px) {
  ul.slick-dots li button {
    font-size: inherit;
    position: relative;
    top: 6px;
    left: 4px;
    z-index: -10;
  }
}

.slick-prev,
.slick-next {
  display: inline-block;
  position: absolute;
  top: -53px;
  right: 0;
  background: #00598C;
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  z-index: 2;
  border: 0;
  cursor: pointer;
}

.slick-prev:hover,
.slick-next:hover {
  background: #0079BF;
}

.slick-prev:focus,
.slick-next:focus {
  background: #0079BF;
  outline: 2px dotted #0079BF;
  outline-offset: 2px;
}

.slick-prev:active,
.slick-next:active {
  background: #003B5C;
}

.slick-prev {
  right: 42px;
  border-radius: 2px 0 0 2px;
}

.slick-next {
  border-radius: 0 2px 2px 0;
}

/*******
The weather is received through UCLA atmos. This is only suggested markup to match the gateway usage.

URL for datapoints: https://weather.atmos.ucla.edu/scripts/wx.php'

<div class="weather-module">
	<div class="weather-module__wrapper clearfix">
			<span id="weather" class="weather-module__text"></span>
  </div>
</div>
*******/

.weather-module__wrapper {
  display: inline-block;
}

.weather-module__text a img {
  height: 24px;
  width: auto;
}

/*
  Extending event-card styles from Component Library
*/

.slick-slide .event-card img {
  display: inline;
}

.event-card {
  position: relative;
  background: #FFFFFF;
}

.event-card .slick-slide img {
  display: inline;
}

.event-card:first-child {
  margin-top: 0;
}

.event-card__wrapper:focus .event-card {
  outline: 2px dotted #0079BF;
  outline-offset: -2px;
}

.event-card__title {
  margin: 0;
  padding: 8px 16px 16px;
  font-size: 24px;
  line-height: 27px;
}

.event-card__image {
  width: 100%;
}

.event-card__image-overlay {
  position: relative;
  width: 276px;
  height: 184px;
}

.event-card__image-overlay::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.event-card__link:hover .event-card__date-wrapper {
  background: #0079BF;
  color: #FFFFFF;
}

.event-card__link:hover .event-card__title {
  background: #0079BF;
  color: #FFFFFF;
}

.event-card__link:hover .event-card__image-overlay::after {
  background: rgba(0, 121, 191, 0.4);
  opacity: 1;
}

.event-card__link:hover:visited {
  background-color: #5223B0;
  color: #5223B0;
  text-decoration: none;
}

.event-card__link:focus span {
  background-color: transparent;
  color: #00598C;
  outline: 2px dotted #0079BF;
}

.event-card__link:focus .event-card__image {
  outline: 2px dotted #0079BF;
  outline-offset: 2px;
}

.event-card__link:focus:hover span,
.event-card__link:focus:active span {
  color: #FFFFFF;
}

.event-card__link:active .event-card__date-wrapper {
  background: #003B5C;
  color: #FFFFFF;
}

.event-card__link:active .event-card__title {
  background: #003B5C;
  color: #FFFFFF;
}

.event-card__link:active .event-card__image-overlay::after {
  opacity: 1;
  background: rgba(0, 59, 92, 0.4);
}

.event-card--no-image.event-card__image-overlay {
  height: 0;
}

.event-card-info {
  padding: 16px;
  border-top: 1px solid #CCCCCC;
}

.event-card-info__date {
  position: relative;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  height: auto;
  font-size: 12.8px;
  line-height: 16px;
  padding: 6px 8px 2px;
}

.event-card-info__description {
  font-size: 12.8px;
  line-height: 19.2px;
}

.event-card-info__location {
  width: 100%;
  word-break: break-word;
  line-height: 16px;
}

ul.slick-dots {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto 20px;
  padding: 0;
}

ul.slick-dots li {
  display: inline-block;
  position: relative;
  text-align: center;
  width: 23px;
}

@media (min-width: 768px) {
  ul.slick-dots li {
    width: 20px;
    height: 20px;
    padding: 8px 9px 0 0;
  }
}

ul.slick-dots li:hover {
  cursor: pointer;
}

ul.slick-dots li:hover::after {
  background: #FFD100;
}

ul.slick-dots li::after {
  display: block;
  position: absolute;
  top: -20px;
  content: '';
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  width: 16px;
  height: 16px;
  border-radius: 8px;
}

@media (min-width: 768px) {
  ul.slick-dots li::after {
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }
}

ul.slick-dots li.slick-active::after {
  background: #00598C;
  border: 1px solid #00598C;
}

ul.slick-dots li button {
  color: inherit;
  background: transparent;
  font-size: 11px;
}

@media (min-width: 768px) {
  ul.slick-dots li button {
    font-size: inherit;
    position: relative;
    top: 6px;
    left: 4px;
    z-index: -10;
  }
}

.slick-prev,
.slick-next {
  display: inline-block;
  position: absolute;
  top: -53px;
  right: 0;
  background: #00598C;
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  z-index: 2;
  border: 0;
  cursor: pointer;
}

.slick-prev:hover,
.slick-next:hover {
  background: #0079BF;
}

.slick-prev:focus,
.slick-next:focus {
  background: #0079BF;
  outline: 2px dotted #0079BF;
  outline-offset: 2px;
}

.slick-prev:active,
.slick-next:active {
  background: #003B5C;
}

.slick-prev {
  right: 42px;
  border-radius: 2px 0 0 2px;
}

.slick-next {
  border-radius: 0 2px 2px 0;
}

.landing main .section-wrapper,
.internal main .section-wrapper {
  width: 100%;
}

@media only screen and (min-width: 1280px) {
  .landing main .section-wrapper,
  .internal main .section-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.landing main .section-wrapper:first-child,
.internal main .section-wrapper:first-child {
  border: none;
}

.landing main .section-wrapper .section,
.internal main .section-wrapper .section {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 768px) {
  .landing main .section-wrapper .section .col,
  .internal main .section-wrapper .section .col {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .landing main .section-wrapper .section.reverse,
  .internal main .section-wrapper .section.reverse {
    transform: rotate(180deg);
  }
}

@media (max-width: 768px) {
  .landing main .section-wrapper .section.reverse .col,
  .internal main .section-wrapper .section.reverse .col {
    transform: rotate(180deg);
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 1024px) {
  .landing main .section-wrapper .section.reverse.tablet,
  .internal main .section-wrapper .section.reverse.tablet {
    transform: rotate(180deg);
  }
}

@media (max-width: 1024px) {
  .landing main .section-wrapper .section.reverse.tablet .col,
  .internal main .section-wrapper .section.reverse.tablet .col {
    transform: rotate(180deg);
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 1024px) {
  .landing main .section-wrapper .ucla.campus.reverse,
  .internal main .section-wrapper .ucla.campus.reverse {
    transform: rotate(180deg);
  }
}

@media (max-width: 1024px) {
  .landing main .section-wrapper .ucla.campus.reverse .col,
  .internal main .section-wrapper .ucla.campus.reverse .col {
    transform: rotate(180deg);
    width: 100%;
    margin: 0;
  }
}

.landing main .section-wrapper .ucla.campus h2,
.internal main .section-wrapper .ucla.campus h2 {
  font-size: 28px;
  line-height: 32px;
}

@media (min-width: 768px) {
  .landing main .section-wrapper .ucla.campus h2,
  .internal main .section-wrapper .ucla.campus h2 {
    font-size: 36px;
    line-height: 40px;
  }
}

.landing main .section-wrapper.grey,
.internal main .section-wrapper.grey {
  background: #F2F2F2;
}

.landing main .section-wrapper.block-quote-container,
.internal main .section-wrapper.block-quote-container {
  margin: 0;
  padding: 0;
}

.landing main .section-wrapper.block-quote-container .block-quote,
.internal main .section-wrapper.block-quote-container .block-quote {
  margin: 0;
}

@media only screen and (min-width: 1024px) {
  .landing main .section-wrapper.block-quote-container .block-quote,
  .internal main .section-wrapper.block-quote-container .block-quote {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .section-wrapper.block-quote-container .block-quote__img-wrapper,
  .internal main .section-wrapper.block-quote-container .block-quote__img-wrapper {
    background: #2774AE;
    overflow: hidden;
  }
}

.landing main .section-wrapper.block-quote-container .block-quote__img,
.internal main .section-wrapper.block-quote-container .block-quote__img {
  width: 100%;
  position: relative;
  display: block;
}

@media only screen and (min-width: 1024px) {
  .landing main .section-wrapper.block-quote-container .block-quote__img,
  .internal main .section-wrapper.block-quote-container .block-quote__img {
    -o-object-fit: cover;
    object-fit: cover;
    background: #2774AE;
    display: block;
    height: 100%;
  }
}

.landing main .section-wrapper.block-quote-container .block-quote__content,
.internal main .section-wrapper.block-quote-container .block-quote__content {
  margin-top: 0px;
  color: #FFFFFF;
  position: relative;
  padding: 32px 24px 32px 24px;
}

@media only screen and (min-width: 600px) {
  .landing main .section-wrapper.block-quote-container .block-quote__content,
  .internal main .section-wrapper.block-quote-container .block-quote__content {
    padding: 48px 48px 24px 48px;
  }
}

@media only screen and (min-width: 768px) {
  .landing main .section-wrapper.block-quote-container .block-quote__content,
  .internal main .section-wrapper.block-quote-container .block-quote__content {
    padding: 32px 40px 64px 32px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .section-wrapper.block-quote-container .block-quote__content,
  .internal main .section-wrapper.block-quote-container .block-quote__content {
    padding: 48px 44px;
    min-height: 516px;
    margin-top: 0px;
    padding-top: 122px;
  }
}

@media only screen and (min-width: 1280px) {
  .landing main .section-wrapper.block-quote-container .block-quote__content,
  .internal main .section-wrapper.block-quote-container .block-quote__content {
    max-height: 516px;
  }
}

.landing main .section-wrapper.block-quote-container .block-quote__content-quote,
.landing main .section-wrapper.block-quote-container .block-quote__content-quote > p,
.internal main .section-wrapper.block-quote-container .block-quote__content-quote,
.internal main .section-wrapper.block-quote-container .block-quote__content-quote > p {
  margin-top: 28px;
  padding-left: 24px;
  font-size: 24px;
  line-height: 27px;
  font-weight: bold;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

@media only screen and (min-width: 768px) {
  .landing main .section-wrapper.block-quote-container .block-quote__content-quote,
  .landing main .section-wrapper.block-quote-container .block-quote__content-quote > p,
  .internal main .section-wrapper.block-quote-container .block-quote__content-quote,
  .internal main .section-wrapper.block-quote-container .block-quote__content-quote > p {
    padding-left: 14px;
    text-indent: -0.55em;
    font-size: 28px;
    line-height: 32px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .section-wrapper.block-quote-container .block-quote__content-quote,
  .landing main .section-wrapper.block-quote-container .block-quote__content-quote > p,
  .internal main .section-wrapper.block-quote-container .block-quote__content-quote,
  .internal main .section-wrapper.block-quote-container .block-quote__content-quote > p {
    max-width: 511px;
  }
}

.ucla.campus {
  max-width: 1224px;
  padding: 0 24px;
}

@media only screen and (min-width: 600px) {
  .ucla.campus {
    padding: 0 36px;
  }
}

.landing main .landing-internal,
.landing-internal {
  position: relative;
  height: inherit;
  margin-bottom: 32px;
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal,
  .landing-internal {
    margin-bottom: 0px;
  }

  .landing main .landing-internal.hero,
  .landing-internal.hero {
    margin-bottom: 48px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal,
  .landing-internal {
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
  }

  .landing main .landing-internal.hero,
  .landing-internal.hero {
    width: 100%;
    max-width: none;
    margin-bottom: 0;
  }
}

.landing main .landing-internal.section-wrapper,
.landing-internal.section-wrapper {
  border-top: 1px solid #E5E5E5;
  padding-top: 32px;
  padding-right: 24px;
  padding-left: 24px;
  max-width: none;
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal.section-wrapper,
  .landing-internal.section-wrapper {
    padding: 48px 36px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal.section-wrapper,
  .landing-internal.section-wrapper {
    margin: 0;
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.landing main .landing-internal .ucla.campus,
.landing-internal .ucla.campus {
  margin: 0 auto;
  padding: 0;
  max-width: 1180px;
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal .ucla.campus,
  .landing-internal .ucla.campus {
    padding: 0px;
  }
}

@media only screen and (min-width: 1280px) {
  .landing main .landing-internal .ucla.campus,
  .landing-internal .ucla.campus {
    padding: 0;
  }
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal .ucla.campus .col.span_1_of_2,
  .landing-internal .ucla.campus .col.span_1_of_2 {
    width: 100%;
    margin: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal .ucla.campus .col.span_1_of_2,
  .landing-internal .ucla.campus .col.span_1_of_2 {
    width: 49.2%;
    margin: 0 0 0 1.6%;
  }

  .landing main .landing-internal .ucla.campus .col.span_1_of_2:first-child,
  .landing-internal .ucla.campus .col.span_1_of_2:first-child {
    margin: 0;
  }
}

.landing main .landing-internal .section-lead,
.landing-internal .section-lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #666;
  margin-bottom: 24px;
  padding: 0;
}

.landing main .landing-internal--image-wrap,
.landing-internal--image-wrap {
  height: 213px;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal--image-wrap,
  .landing-internal--image-wrap {
    height: 512px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal--image-wrap,
  .landing-internal--image-wrap {
    height: 514px;
    width: 56.5%;
    float: right;
  }
}

.landing main .landing-internal--image,
.landing-internal--image {
  display: block;
  position: relative;
  height: 213px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal--image,
  .landing-internal--image {
    height: 512px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal--image,
  .landing-internal--image {
    height: 514px;
    width: 100%;
  }
}

.landing main .landing-internal h1,
.landing-internal h1 {
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: normal;
}

.landing main .landing-internal h2,
.landing-internal h2 {
  font-size: 28px;
  font-weight: bold;
  line-height: 32px;
  font-size: 36px;
  line-height: 40px;
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal h2,
  .landing-internal h2 {
    margin-bottom: 8px;
    padding-bottom: 0;
    font-size: 36px;
    line-height: 40px;
    font-size: 48px;
    line-height: 54px;
  }
}

.landing main .landing-internal--copy-wrap,
.landing-internal--copy-wrap {
  margin: -16px 24px 0px;
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal--copy-wrap,
  .landing-internal--copy-wrap {
    margin: -16px 36px 0px;
  }
}

@media (min-width: 1024px) and (max-width: 1179px) {
  .landing main .landing-internal--copy-wrap,
  .landing-internal--copy-wrap {
    margin-left: 24px !important;
  }
}

@media (min-width: 1180px) and (max-width: 1280px) {
  .landing main .landing-internal--copy-wrap,
  .landing-internal--copy-wrap {
    margin-left: 54px !important;
  }
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal--copy-wrap,
  .landing-internal--copy-wrap {
    margin: -32px 36px 32px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal--copy-wrap,
  .landing-internal--copy-wrap {
    display: block;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    width: 1180px;
    max-width: 1180px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.landing main .landing-internal--copy,
.landing-internal--copy {
  display: block;
  position: relative;
  z-index: 2;
  padding: 16px;
  margin-top: -24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal--copy,
  .landing-internal--copy {
    margin-top: -32px;
    padding: 32px;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal--copy,
  .landing-internal--copy {
    max-width: 576px;
    padding: 32px 32px 16px;
    margin-top: 0px;
  }

  .landing main .landing-internal--copy h1,
  .landing-internal--copy h1 {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 20px;
    padding-bottom: 8px;
  }

  .landing main .landing-internal--copy h2,
  .landing-internal--copy h2 {
    font-size: 48px;
    line-height: 54px;
    padding-bottom: 16px;
  }

  .landing main .landing-internal--copy p,
  .landing-internal--copy p {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 24px;
  }
}

@media only screen and (min-width: 768px) {
  .landing main .landing-internal .img--align-right,
  .landing-internal .img--align-right {
    float: left;
  }
}

@media only screen and (min-width: 1024px) {
  .landing main .landing-internal .img--align-right,
  .landing-internal .img--align-right {
    float: right;
  }
}

.landing main .landing-internal .btn.btn--secondary--darkbg,
.landing-internal .btn.btn--secondary--darkbg {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #FFD100;
  color: #000000;
  margin-bottom: 16px;
  border-color: #FFD100;
}

.landing main .landing-internal .btn.btn--secondary--darkbg:hover,
.landing-internal .btn.btn--secondary--darkbg:hover {
  color: #000000;
}

.landing main .landing-internal .btn.btn--secondary--darkbg:visited,
.landing-internal .btn.btn--secondary--darkbg:visited {
  color: #000000;
}

.landing main .landing-internal .btn.btn--secondary--darkbg:visited:hover,
.landing-internal .btn.btn--secondary--darkbg:visited:hover {
  color: #000000;
}

.landing-internal.careers .landing-internal--image-wrap,
.landing-internal.careers .landing-internal--image {
  height: 550px;
}

.internal main,
.internal-narrow main {
  padding-top: 40px;
  margin: 0;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .internal main .col.span_7_of_12,
  .internal main .col.span_5_of_12,
  .internal-narrow main .col.span_7_of_12,
  .internal-narrow main .col.span_5_of_12 {
    width: 100%;
  }
}

.internal main .col.span_7_of_12 .internal-head-image,
.internal main .col.span_5_of_12 .internal-head-image,
.internal-narrow main .col.span_7_of_12 .internal-head-image,
.internal-narrow main .col.span_5_of_12 .internal-head-image {
  width: 100%;
  display: block;
  max-width: 376px;
}

@media (min-width: 1279.98px) {
  .internal main .col.span_7_of_12 .internal-head-image,
  .internal main .col.span_5_of_12 .internal-head-image,
  .internal-narrow main .col.span_7_of_12 .internal-head-image,
  .internal-narrow main .col.span_5_of_12 .internal-head-image {
    float: right;
  }
}

.internal main > div:nth-of-type(2) ::before,
.internal-narrow main > div:nth-of-type(2) ::before {
  display: none;
}

@media (min-width: 768px) {
  .internal main > div:last-of-type,
  .internal-narrow main > div:last-of-type {
    padding-bottom: 64px;
  }
}

@media (max-width: 767.98px) {
  .internal main > div:last-of-type,
  .internal-narrow main > div:last-of-type {
    padding-bottom: 32px;
  }
}

.internal main .enrollment-h2,
.internal-narrow main .enrollment-h2 {
  border-top: 1px solid #E5E5E5;
  width: 100%;
  padding-top: 64px;
}

.internal main .section-wrapper > ::before,
.internal-narrow main .section-wrapper > ::before {
  border-top: 1px solid #E5E5E5;
  margin: 32px 0px;
  width: 100%;
}

@media (min-width: 600px) {
  .internal main .section-wrapper > ::before,
  .internal-narrow main .section-wrapper > ::before {
    margin: 48px 0px;
  }
}

@media (min-width: 1024px) {
  .internal main .section-wrapper > ::before,
  .internal-narrow main .section-wrapper > ::before {
    margin: 64px 0px;
    width: 66%;
  }
}

.internal main .section-lead,
.internal-narrow main .section-lead {
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.5rem;
  color: #666666;
}

@media (max-width: 1023px) {
  body#accessibility main .span_7_of_12 {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  body#accessibility main .span_8_of_12 {
    width: 100%;
  }
}

#not-found header#header #main-nav .desktop .nav li {
  visibility: hidden;
}

#not-found header#header #main-nav .desktop .nav li[data-submenu="search"] {
  visibility: visible;
}

#not-found .section-wrapper.top {
  padding-bottom: 0px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  #not-found .section-wrapper.top {
    margin-bottom: 16px;
  }
}

@media (min-width: 1024px) {
  #not-found .section-wrapper.top {
    margin-bottom: 0px;
  }
}

#not-found .section-wrapper.top h1 {
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  #not-found .section-wrapper.top h1 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
}

@media (min-width: 1024px) {
  #not-found .section-wrapper.top h1 {
    position: inherit;
    margin-bottom: 32px;
  }
}

#not-found .section-wrapper.top .p--lead-in {
  margin-bottom: 33px;
}

#not-found .section-wrapper.top .p--lead-in.url {
  word-break: break-all;
}

@media (min-width: 768px) {
  #not-found .section-wrapper.top .p--lead-in.url {
    padding-top: 25px;
  }
}

@media (min-width: 1024px) {
  #not-found .section-wrapper.top .p--lead-in.url {
    padding-top: 0px;
  }
}

#not-found .section-wrapper.top .last-info {
  margin-bottom: 32px;
}

#not-found .section-wrapper.top .computer-blurb {
  font-size: 0.75rem;
  line-height: 1rem;
  display: block;
  background: #FFFFFF;
  margin: 0px 13px;
  padding: 12px;
  position: relative;
  top: -28px;
}

@media (min-width: 768px) {
  #not-found .section-wrapper.top .computer-blurb {
    margin: 0px 41px 0px 41px;
    top: -42px;
    padding: 15px 16px;
  }
}

@media (min-width: 1024px) {
  #not-found .section-wrapper.top .computer-blurb {
    top: -52px;
    padding: 20px 10px;
  }
}

@media (min-width: 1024px) {
  #not-found .section-wrapper.top .img-wrapper {
    margin-left: 56px;
  }
}

@media (min-width: 768px) {
  #not-found .section-wrapper.top .col {
    padding-top: 76px;
  }
}

@media (min-width: 1024px) {
  #not-found .section-wrapper.top .col {
    padding-top: 0;
  }
}

@media (min-width: 768px) {
  #not-found .section-wrapper.top .col.left {
    padding-right: 20px;
  }
}

@media (min-width: 1024px) {
  #not-found .section-wrapper.top .col.left {
    padding-right: 100px;
  }
}

@media (max-width: 1023px) {
  #site-information .span_7_of_12 {
    width: 100%;
  }
}

#site-information div p:last-child {
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  #site-information div p:last-child {
    margin-bottom: 0;
  }
}

#site-information .accordion__title {
  border-top: 0px;
}

#site-information sup {
  top: -0.3em;
}

#terms-of-use .accordion__title {
  border-top: 0px;
}

#about.landing main .section-wrapper.top p.intro {
  width: 100%;
}

@media (min-width: 768px) {
  #about.landing main .section-wrapper.top p.intro {
    max-width: 66%;
  }
}

@media (min-width: 1024px) {
  #about.landing main .section-wrapper.top p.intro {
    max-width: 100%;
  }
}

#about.landing main .section-lead {
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  color: #666666;
  margin-bottom: 24px;
  padding: 0;
}

#about-athletics-championships-and-medals ul.list {
  max-width: unset;
}

#about-awards-and-honors main .section-wrapper > ::before {
  border: 1px solid #E5E5E5;
  width: 100%;
  margin: 32px 0px;
}

@media (min-width: 768px) {
  #about-awards-and-honors main .section-wrapper > ::before {
    width: 100%;
    margin: 48px 0px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors main .section-wrapper > ::before {
    margin: 64px 0px;
  }
}

#about-awards-and-honors-alumni-and-student-honors main .section-wrapper > ::before {
  border: 1px solid #E5E5E5;
  width: 100%;
  margin: 0 0 32px;
}

@media (min-width: 768px) {
  #about-awards-and-honors-alumni-and-student-honors main .section-wrapper > ::before {
    margin: 16px 0 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-alumni-and-student-honors main .section-wrapper > ::before {
    margin: 32px 0 64px;
  }
}

@media (max-width: 1023px) {
  #about-awards-and-honors-alumni-and-student-honors main .span_8_of_12.tablet-md {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #about-awards-and-honors-alumni-and-student-honors main .col {
    border: 1px solid #000000;
    width: 48%;
    margin: 5px 3px;
  }
}

@media (max-width: 768px) {
  #about-awards-and-honors-alumni-and-student-honors main .col .col {
    border: 0;
    width: 100%;
    margin: 0;
  }
}

#about-awards-and-honors-alumni-and-student-honors main .col .col:nth-of-type(2) {
  min-height: 170px;
  padding: 10px;
}

#about-facts-and-figures h1 {
  padding-bottom: 24px;
}

#about-facts-and-figures h2 {
  padding-bottom: 24px;
  font-weight: bold;
  font-size: 36px;
  line-height: 40px;
}

#about-facts-and-figures p {
  margin: 0;
}

@media (min-width: 1280px) {
  #about-facts-and-figures div.intro {
    position: relative;
  }
}

@media (max-width: 1023px) {
  #about-facts-and-figures div.intro .span_9_of_12 {
    width: 100%;
  }
}

@media (max-width: 600px) {
  #about-facts-and-figures .stat-tout__number {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 4px;
  }
}

@media (max-width: 600px) {
  #about-facts-and-figures .stat-tout__label {
    font-size: 16px;
    line-height: 20px;
  }
}

@media (max-width: 1023px) {
  #about-facts-and-figures div.tables .span_11_of_12 {
    width: 100%;
  }
}

#about-facts-and-figures div.tables .table-data {
  margin-bottom: 48px;
}

#about-facts-and-figures div.tables h2:not(:first-of-type) {
  margin-top: 24px;
}

#about-facts-and-figures div.tables div.diversity th:first-child,
#about-facts-and-figures div.tables div.diversity td:first-child {
  width: 174px;
}

@media (min-width: 768px) {
  #about-facts-and-figures div.tables div.diversity th:first-child,
  #about-facts-and-figures div.tables div.diversity td:first-child {
    width: 54%;
  }

  #about-facts-and-figures div.tables div.diversity th,
  #about-facts-and-figures div.tables div.diversity td {
    width: 22%;
  }
}

#about-facts-and-figures div.tables div.enrollment th:first-child,
#about-facts-and-figures div.tables div.enrollment td:first-child {
  width: 174px;
}

@media (min-width: 768px) {
  #about-facts-and-figures div.tables div.enrollment th:first-child,
  #about-facts-and-figures div.tables div.enrollment td:first-child {
    width: 36%;
  }

  #about-facts-and-figures div.tables div.enrollment th,
  #about-facts-and-figures div.tables div.enrollment td {
    width: 21%;
  }
}

@media (min-width: 1024px) {
  #about-facts-and-figures div.tables div.enrollment th:first-child,
  #about-facts-and-figures div.tables div.enrollment td:first-child {
    width: 30%;
  }
}

.screenreader-only {
  position: absolute;
  /* fixes extra spacing by removing element from flow */
  top: 80px;
  left: 2000px;
}

#about-mission-and-values main h1 {
  border-bottom: 1px solid #E5E5E5;
  width: 100%;
  padding-bottom: 2rem;
}

#about-mission-and-values main h2 {
  padding-bottom: 24px;
}

#about-mission-and-values main h3 {
  font-size: 1.5rem;
}

#about-mission-and-values main .section-wrapper > ::before {
  border: 1px solid #E5E5E5;
  width: 100%;
  margin: 48px 0px;
}

@media (max-width: 1023.98px) {
  #about-mission-and-values main .section-wrapper > ::before {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  #about-mission-and-values main .section-wrapper > ::before {
    margin: 64px 0px;
  }
}

#about-mission-and-values main .col.span_4_of_12 {
  width: 100%;
  margin-left: 0;
}

#about-mission-and-values main .ucla.campus.no-left-padding {
  padding-left: 0;
}

#about-mission-and-values main .education_research_service {
  padding-top: 24px;
}

#about-mission-and-values main p i {
  color: #333333;
}

@media (max-width: 1023px) {
  #admission-financial-aid main .span_8_of_12 {
    width: 100%;
  }
}

#about-awards-and-honors-faculty-american-academy-of-arts-and-sciences #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-american-academy-of-arts-and-sciences #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-american-academy-of-arts-and-sciences #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-american-academy-of-arts-and-sciences h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-american-academy-of-arts-and-sciences td {
  font-weight: normal;
  white-space: nowrap;
}

#about-awards-and-honors-faculty h2 {
  font-size: 24px;
  line-height: 27px;
}

#about-awards-and-honors-faculty main .section-wrapper::before {
  border-top: 1px solid #E5E5E5;
  margin: 32px 0px;
  width: 100%;
}

@media (min-width: 600px) {
  #about-awards-and-honors-faculty main .section-wrapper::before {
    margin: 48px 0px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty main .section-wrapper::before {
    margin: 64px 0px;
  }
}

#about-awards-and-honors-faculty main .section-wrapper > ::before {
  margin-top: 0;
}

#about-awards-and-honors-faculty .stat-set {
  flex-wrap: wrap;
}

@media only screen and (min-width: 600px) {
  #about-awards-and-honors-faculty .stat-set {
    display: flex;
    justify-content: space-between;
  }

  #about-awards-and-honors-faculty .stat-set .stat-wrapper--link {
    flex-basis: 50%;
  }
}

@media only screen and (min-width: 768px) {
  #about-awards-and-honors-faculty .stat-set .stat-wrapper--link {
    flex-basis: 50%;
  }
}

@media only screen and (min-width: 1024px) {
  #about-awards-and-honors-faculty .stat-set .stat-wrapper--link {
    flex-basis: 33%;
  }
}

@media only screen and (min-width: 768px) {
  #about-awards-and-honors-faculty .faculty-card-extended {
    margin: 0 0 32px;
    padding: 6px 0px 10px 6px;
    display: block;
    float: left;
    margin-right: 24px;
    min-height: 165px;
    height: 165px;
  }
}

@media only screen and (min-width: 1024px) {
  #about-awards-and-honors-faculty .faculty-card-extended {
    width: 100%;
    max-width: calc(100% / 3 - 24px);
  }

  #about-awards-and-honors-faculty .faculty-card-extended:nth-child(3n) {
    margin-right: 0px;
  }
}

#about-awards-and-honors-faculty .faculty-card-extended__info {
  margin-top: 0;
}

#about-awards-and-honors-faculty .faculty-card-extended__info-pre-title {
  font-size: 0.8rem;
  line-height: 1rem;
}

#about-awards-and-honors-faculty .faculty-card-extended__info-title {
  padding-right: 23px;
  font-size: 0.8rem;
  line-height: 1rem;
  word-break: break-word;
}

#about-awards-and-honors-faculty .faculty-card-extended__info-link {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #00598C;
  text-decoration: none;
}

#about-awards-and-honors-faculty .faculty-card-extended__info-link:hover {
  color: #FFFFFF;
}

#about-awards-and-honors-faculty .faculty-card-extended__info-link::after {
  content: '';
}

@media only screen and (min-width: 768px) {
  #about-awards-and-honors-faculty .col.span_8_of_12 {
    width: 83%;
  }

  #about-awards-and-honors-faculty .section-wrapper.accordion {
    padding: 80px 35px !important;
  }

  #about-awards-and-honors-faculty .section-wrapper.accordion .accordion__content {
    padding-bottom: 0px;
    margin-bottom: -32px;
  }
}

@media only screen and (min-width: 1024px) {
  #about-awards-and-honors-faculty .col.span_8_of_12 {
    width: 66.13%;
  }
}

#about-awards-and-honors-faculty-national-academy-of-engineering #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-national-academy-of-engineering #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-national-academy-of-engineering #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-national-academy-of-engineering h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-national-academy-of-engineering td {
  font-weight: normal;
  white-space: nowrap;
}

#about-awards-and-honors-faculty-national-academy-of-inventors #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-national-academy-of-inventors #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-national-academy-of-inventors #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-national-academy-of-inventors h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-national-academy-of-inventors td {
  font-weight: normal;
  white-space: nowrap;
}

#about-awards-and-honors-faculty-national-academy-of-medicine #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-national-academy-of-medicine #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-national-academy-of-medicine #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-national-academy-of-medicine h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-national-academy-of-medicine td {
  font-weight: normal;
  white-space: nowrap;
}

#about-rankings h1 {
  padding-bottom: 45px;
}

@media (min-width: 600px) {
  #about-rankings h1 {
    padding-bottom: 24px;
  }
}

#about-rankings .video-wrap {
  cursor: pointer;
}

#about-rankings .youtube-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

#about-rankings .stat-tout {
  display: inline-flex;
  flex-wrap: wrap;
}

#about-rankings .stat-tout__info-wrap {
  padding-left: 20px;
}

#about-rankings .stat-tout__label {
  padding: 0;
}

@media (min-width: 768px) {
  #about-rankings .stat-tout__label {
    max-width: 425px;
  }
}

#contact h3 {
  font-size: 1.5rem;
  line-height: 27px;
  font-weight: bold;
}

#contact ul {
  -webkit-padding-start: 0px;
          padding-inline-start: 0px;
}

#contact li {
  list-style-type: none;
}

#contact .tile-wrapper {
  /* each tile */
}

#contact .tile-wrapper .col {
  background-color: #EBEBEB;
  border-top: 4px solid #FFD100;
  margin-bottom: 12px;
  margin-left: 0;
  margin-top: 0;
  padding: 1.25rem;
}

#contact .tile-wrapper .col .content {
  line-height: 1.5rem;
  margin-bottom: 0;
}

#contact .tile-wrapper .col .content ul li {
  margin-bottom: 2px;
}

@media (min-width: 1024px) {
  #contact .tile-wrapper .col.short {
    min-height: 0;
  }
}

#contact .tile-wrapper .col:nth-child(3n+1) {
  clear: both;
  margin-left: 0;
}

#contact .tile-wrapper .col:nth-child(3n) {
  margin-right: 0;
}

#contact .tile-wrapper .col.no-min-height {
  min-height: 0;
}

@media (min-width: 768px) {
  #contact .tile-wrapper .col {
    margin-right: 12px;
    min-height: 275px;
  }
}

@media (min-width: 1024px) {
  #contact .tile-wrapper .col {
    min-height: 247px;
  }
}

@media (min-width: 768px) {
  #contact .tile-wrapper .span_4_of_12 {
    width: 32.1%;
  }
}

#contact .link-list .col .content ul {
  margin-top: 0px;
}

#contact .link-list .col .content ul li {
  margin-bottom: 16px;
}

@media only screen and (min-width: 768px) {
  #admission main .section {
    padding: 0px;
  }
}

@media only screen and (min-width: 768px) {
  #admission main .section .col.span_1_of_2 {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

@media only screen and (min-width: 1024px) {
  #admission main .section .col.span_1_of_2 {
    width: 49.2%;
    margin: 1% 0 1% 1.6%;
  }

  #admission main .section .col:first-child {
    margin-left: 0px;
  }
}

@media only screen and (min-width: 768px) {
  #admission main .reverse {
    transform: rotate(180deg);
  }
}

@media only screen and (min-width: 1024px) {
  #admission main .reverse {
    transform: rotate(0deg);
  }
}

@media only screen and (min-width: 768px) {
  #admission main .reverse .col {
    transform: rotate(180deg);
  }
}

@media only screen and (min-width: 1024px) {
  #admission main .reverse .col {
    transform: rotate(0deg);
  }
}

@media only screen and (min-width: 768px) {
  #admission main .reverse .col.intro .ribbon {
    width: 75%;
  }

  #admission main .reverse .col.intro .ribbon span {
    margin-left: -13px;
  }
}

@media only screen and (min-width: 1024px) {
  #admission main .reverse .col.intro .ribbon {
    width: 100%;
  }

  #admission main .reverse .col.intro.span_1_of_2 {
    width: 49.2%;
    padding-right: 7.6%;
  }
}

@media only screen and (min-width: 768px) {
  #admission main .intro-content {
    width: 66.6%;
  }
}

@media only screen and (min-width: 1024px) {
  #admission main .intro-content {
    width: 100%;
  }
}

#admission main .img-wrapper {
  display: none;
}

@media only screen and (min-width: 768px) {
  #admission main .img-wrapper {
    display: block;
    width: 50%;
    margin-left: 8.4%;
    float: left;
  }

  #admission main .img-wrapper.left {
    margin-left: 0;
    margin-right: 8.4%;
  }
}

@media only screen and (min-width: 1024px) {
  #admission main .img-wrapper {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  #admission main .admission__img {
    width: 100%;
  }
}

@media (max-width: 1023.98px) {
  #admission main .admission__copy {
    width: 100%;
  }
}

#admission #rankings {
  font-size: 36px;
  line-height: 40px;
}

@media (max-width: 1023px) {
  #admission-apply .span_7_of_12 {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  #admission-undergraduate-admission .span_8_of_12 {
    width: 100%;
  }
}

#admission-undergraduate-admission h2 {
  font-size: 1.75rem;
  line-height: 2rem;
}

@media (min-width: 768px) {
  #admission-undergraduate-admission h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

#admission-undergraduate-admission h3 {
  font-size: 1rem;
  line-height: 1.25rem;
}

@media (max-width: 767px) {
  #admission-undergraduate-admission .application .col {
    width: 100%;
    margin: 0;
  }

  #admission-undergraduate-admission .application .col.tablet-md {
    float: right;
  }
}

@media (max-width: 1023px) {
  #admission-graduate-admission .span_8_of_12 {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  #admission-tuition-and-cost .span_7_of_12 {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  #admission-international-applicants .span_8_of_12 {
    width: 100%;
  }
}

#admission-international-applicants h3 {
  font-size: 20px;
  line-height: 24px;
}

@media (min-width: 768px) {
  #admission-international-applicants h3 {
    font-size: 24px;
    line-height: 28px;
  }
}

@media (max-width: 1024px) {
  #academics main .top .col {
    width: 100%;
    margin: 0;
    transform: rotate(180deg);
  }

  #academics main .top .col.tablet-md {
    float: right;
  }

  #academics main .top .ucla.campus {
    transform: rotate(180deg);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #academics main .academics__img {
    width: 66.7%;
    float: left;
  }
}

@media (max-width: 767.98px) {
  #academics main .academics__img {
    width: 100%;
  }
}

@media (min-width: 768px) {
  #academics main .tablet-md {
    max-width: 75%;
    width: 100%;
    float: left;
  }
}

@media (min-width: 1024px) {
  #academics main .tablet-md {
    max-width: 100%;
    float: left;
    width: 49.2%;
  }
}

@media (max-width: 767.98px) {
  #academics-undergraduate-education .p--lead-in {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  #academics-undergraduate-education main h2 {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

@media (max-width: 767.98px) {
  #academics-undergraduate-education main h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  #academics-undergraduate-education main .stat-wrapper.academic-experience .stat-tout__number {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 4px;
  }
}

@media (max-width: 767.98px) {
  #academics-undergraduate-education main .stat-wrapper.academic-experience .stat-tout__label--extend {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

#academics-undergraduate-education main h1 {
  word-break: break-all;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

@media only screen and (min-width: 768px) {
  #academics-undergraduate-education main h1 {
    word-break: normal;
  }
}

@media (max-width: 1023.98px) {
  #academics-undergraduate-education .span_8_of_12 {
    width: 100%;
  }
}

#academics-programs-and-majors .span_9_of_12 {
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .span_9_of_12 {
    width: 74.6%;
    margin: 0 0 0 1.6%;
  }
}

#academics-programs-and-majors .searchbox {
  margin-bottom: 14px;
  position: relative;
}

#academics-programs-and-majors .searchbox .close-btn-container {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  display: none;
}

#academics-programs-and-majors .searchbox .close-btn-container .close-btn {
  background-color: #000000;
}

#academics-programs-and-majors .searchbox .close-btn-container:focus .close-btn {
  background-color: #666;
}

#academics-programs-and-majors .searchbox .close-btn-container:hover {
  background: none;
}

#academics-programs-and-majors .searchbox .close-btn-container:hover .close-btn {
  background-color: #0079BF;
}

#academics-programs-and-majors .searchbox .close-btn-container:active .close-btn {
  background-color: #003B5C;
}

#academics-programs-and-majors .searchbox .close-btn {
  width: 20px;
  height: 20px;
  display: block;
  color: #FFFFFF;
  background-color: #666;
  font: 27px/13px arial, sans-serif;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -1px;
  border-radius: 14px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

#academics-programs-and-majors .searchbox .close-btn:actve {
  background-color: #003B5C;
}

#academics-programs-and-majors .searchbox .close-btn:hover {
  background-color: #0079BF;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .searchbox {
    margin-bottom: 40px;
  }
}

#academics-programs-and-majors .ucla.campus .col.section {
  width: calc(100% + 48px);
  padding: 0 24px;
  border-bottom: 1px solid #CCCCCC;
  position: relative;
  left: -24px;
  border-bottom: none;
  padding-bottom: 34px;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .ucla.campus .col.section {
    width: 23.8%;
    left: 0px;
    padding: 0px;
    border-bottom: 0;
    padding-bottom: 0;
  }
}

#academics-programs-and-majors .searchbox input[name="keyword"] {
  width: 100%;
  border: 1px solid #808080;
  border-radius: 2px;
  padding: 10px 22px 10px 36px;
}

#academics-programs-and-majors .searchbox input[name="keyword"]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #666;
}

#academics-programs-and-majors .searchbox input[name="keyword"]::-moz-placeholder {
  /* Firefox 19+ */
  color: #666;
}

#academics-programs-and-majors .searchbox input[name="keyword"]:-ms-input-placeholder {
  /* IE 10+ */
  color: #666;
}

#academics-programs-and-majors .searchbox input[name="keyword"]:-moz-placeholder {
  /* Firefox 18- */
  color: #666;
}

#academics-programs-and-majors .searchbox input[name="keyword"]:focus-visible {
  outline: 2px dotted #0079BF;
  outline-offset: 1px;
}

#academics-programs-and-majors .searchbox input[type="submit"] {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(49deg) brightness(99%) contrast(103%);
  left: 12px;
}

#academics-programs-and-majors .searchbox input[type="submit"]:focus {
  outline: 2px dotted #0079BF;
  outline-offset: 1px;
}

#academics-programs-and-majors .filter-container {
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .filter-container {
    margin-bottom: 32px;
  }
}

#academics-programs-and-majors .filter-container h2 {
  border: 2px solid #00598C;
  border-radius: 2px 2px 2px 2px;
  padding: 8px 8px 8px 16px;
  font-size: 16px;
  line-height: 20px;
  color: #00598C;
  position: relative;
}

#academics-programs-and-majors .filter-container h2::after {
  content: '';
  display: block;
  background-image: url("../img/arrow-down.svg");
  position: absolute;
  right: 8px;
  top: 6px;
  height: 24px;
  width: 24px;
  background-size: cover;
  transform: rotate(0deg);
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .filter-container h2 {
    border: none;
    color: #000000;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 16px;
  }

  #academics-programs-and-majors .filter-container h2::after {
    display: none;
  }
}

#academics-programs-and-majors .filter-container ul {
  margin: 0;
  padding: 0;
  display: block;
  padding: 0px;
  overflow: hidden;
  height: 0px;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .filter-container ul {
    height: auto;
    padding: 16px 16px 0px 16px;
    border: 2px solid #d9d9d9;
  }
}

#academics-programs-and-majors .filter-container.open h2 {
  border-radius: 2px 2px 0px 0px;
}

#academics-programs-and-majors .filter-container.open h2::after {
  transform: rotate(180deg);
}

#academics-programs-and-majors .filter-container.open ul {
  height: auto;
  padding: 16px 16px 8px 16px;
  border-left: 2px solid #E5E5E5;
  border-right: 2px solid #E5E5E5;
  border-bottom: 2px solid #E5E5E5;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .filter-container.open ul {
    border: 2px solid #E5E5E5;
  }
}

#academics-programs-and-majors .filter-container li {
  list-style: none;
}

#academics-programs-and-majors .filter-container .checkbox {
  position: relative;
  min-height: 24px;
  padding-top: 5px;
  padding-left: 32px;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .filter-container .checkbox {
    margin-bottom: 16px;
  }
}

#academics-programs-and-majors .filter-container .checkbox__input {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: none;
  border: 2px solid #00598C;
  cursor: pointer;
}

#academics-programs-and-majors .filter-container .checkbox__input:hover {
  background: #FFFFFF;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .filter-container .checkbox__input:hover {
    background: #0079BF;
  }
}

#academics-programs-and-majors .filter-container .checkbox__input:focus {
  outline: 2px dotted #0079BF;
  outline-offset: 1px;
}

#academics-programs-and-majors .filter-container .checkbox__input:checked {
  background: #003b5c url("../img/icons/denotive/check-baseline-white.svg") no-repeat 98.5% 50%;
}

#academics-programs-and-majors .filter-container .checkbox__label {
  margin-left: 0px;
  line-height: 24px;
  position: relative;
  top: -4px;
  cursor: pointer;
}

#academics-programs-and-majors .clear-filter {
  color: #00598C;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  display: none;
  text-align: center;
  margin: 0px;
  position: absolute;
  right: 0px;
  top: -7px;
}

#academics-programs-and-majors .clear-filter.show {
  display: block;
}

#academics-programs-and-majors .clear-filter .close-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../img/close.svg") no-repeat center;
  background-size: cover;
  filter: invert(16%) sepia(100%) saturate(2896%) hue-rotate(187deg) brightness(91%) contrast(102%);
  position: relative;
  top: 4px;
  right: -3px;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .clear-filter {
    margin-bottom: 0px;
    color: #00598C;
  }
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .clear-filter {
    right: 26px;
    text-align: left;
  }

  #academics-programs-and-majors .clear-filter:focus,
  #academics-programs-and-majors .clear-filter:active,
  #academics-programs-and-majors .clear-filter:hover {
    color: #757575;
  }

  #academics-programs-and-majors .clear-filter:focus .close-icon,
  #academics-programs-and-majors .clear-filter:active .close-icon,
  #academics-programs-and-majors .clear-filter:hover .close-icon {
    filter: invert(52%) sepia(0%) saturate(0%) hue-rotate(147deg) brightness(87%) contrast(95%);
  }
}

#academics-programs-and-majors .clear-filter:focus,
#academics-programs-and-majors .clear-filter:active,
#academics-programs-and-majors .clear-filter:hover {
  background: #FFFFFF;
}

#academics-programs-and-majors .results-container {
  position: relative;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .results-container .clear-filter {
    position: absolute;
  }
}

#academics-programs-and-majors .btn.load {
  display: none;
}

#academics-programs-and-majors .btn.load.more {
  display: block;
  width: 150px;
  margin: 0 auto;
}

#academics-programs-and-majors .ucla.campus.intro {
  margin-bottom: 40px;
}

#academics-programs-and-majors .ucla.campus.intro h1 {
  padding-bottom: 0px;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .ucla.campus.intro {
    margin-bottom: 56px;
  }
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .ucla.campus.intro {
    margin-bottom: 88px;
    max-width: none;
  }

  #academics-programs-and-majors .ucla.campus.intro .col {
    max-width: 1224px;
    margin: 0 auto;
    float: none;
    padding: 0 24px;
  }
}

#academics-programs-and-majors .program-loading img {
  max-width: 100%;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .program-loading img {
    display: block;
    margin: 0 auto;
    margin-top: 100px;
  }
}

#academics-programs-and-majors .program-results-num {
  margin-bottom: 14px;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 10px;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .program-results-num {
    margin-bottom: 10px;
    padding-bottom: 0px;
    border-bottom: none;
  }
}

#academics-programs-and-majors .search-container {
  position: relative;
  width: 100%;
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .search-container {
    margin-bottom: 0px;
    max-width: 376px;
  }
}

#academics-programs-and-majors .search-container .countwrapper {
  display: table;
  width: 100%;
  max-width: 375px;
  min-height: 60px;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .search-container .countwrapper {
    min-height: inherit;
  }
}

#academics-programs-and-majors .search-container .countwrapper .row {
  display: table-row;
}

#academics-programs-and-majors .search-container .countwrapper .row .col {
  display: table-column;
  width: 65%;
}

#academics-programs-and-majors .search-container .countwrapper .row .col + .col {
  width: 35%;
}

#academics-programs-and-majors .search-container .counter {
  display: block;
  position: relative;
  top: -14px;
  left: 0;
  color: #00598C;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .search-container .counter {
    display: block;
    top: 14px;
    left: 410px;
    position: absolute;
  }
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .search-container .counter {
    display: block;
    top: 62px;
    left: 410px;
  }
}

#academics-programs-and-majors .search-container .clear-btn {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #00598C;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 23px 12px 23px;
  display: none;
  position: relative;
  top: -28px;
  border-radius: 2px;
  float: right;
  cursor: pointer;
}

#academics-programs-and-majors .search-container .clear-btn:hover {
  background-color: #0079BF;
  color: #FFFFFF;
}

#academics-programs-and-majors .search-container .clear-btn:focus {
  background-color: #0079BF;
  color: #FFFFFF;
}

#academics-programs-and-majors .search-container .clear-btn.show {
  display: block;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .search-container .clear-btn.show {
    display: none;
  }
}

#academics-programs-and-majors .program-results {
  margin-top: 32px;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .program-results {
    margin-top: 48px;
  }
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .program-results {
    margin-top: 20px;
  }
}

#academics-programs-and-majors .list-wrapper {
  position: relative;
  overflow: hidden;
  /*max-height: 4252px;*/
  padding-left: 0px;
  /*&.more::before {
			content:'';
			width:100%;
			height:75px;
			position:absolute;
			right:0;
			bottom:0;
			z-index:1;

			background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(255,255,255,1) 100%);
			background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(255,255,255,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#ffffff',GradientType=0 );
		}*/
}

#academics-programs-and-majors .list-wrapper .row {
  border: 2px solid #D9D9D9;
  margin-bottom: 11px;
  overflow: hidden;
  position: relative;
  cursor: auto;
  display: none;
  border-radius: 2px;
  /*&:before {
				content:'';
				width:100px;
				height:100%;
				position:absolute;
				right:0;
				top:0;
				z-index:1;

				background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 83%);
				background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 83%);
				background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 83%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );

				@media (min-width: breakpoint-min(md)) {
					background:none;
				}
			}*/
}

#academics-programs-and-majors .list-wrapper .row.show {
  display: block;
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus {
  padding: 12px 16px 12px;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row .ucla.campus {
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .list-wrapper .row .ucla.campus {
    padding: 16px 0 16px;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus:hover {
    background: #F7F7F7;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus:hover .major-title {
    color: #000000;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus:hover .col.degree a {
    border-color: #00598C;
    color: #FFFFFF;
  }
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row {
    height: auto;
    padding: 0;
  }
}

#academics-programs-and-majors .list-wrapper .row a {
  display: inline-block;
  padding: 0;
  text-decoration: none;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row a {
    padding: 0;
  }
}

#academics-programs-and-majors .list-wrapper .row a.external-link--blue:hover .ucla.campus .major-title,
#academics-programs-and-majors .list-wrapper .row a.external-link--blue:focus .ucla.campus .major-title,
#academics-programs-and-majors .list-wrapper .row a.external-link--blue:active .ucla.campus .major-title {
  color: #FFFFFF;
}

#academics-programs-and-majors .list-wrapper .row a.external-link--blue:hover .ucla.campus .degree,
#academics-programs-and-majors .list-wrapper .row a.external-link--blue:focus .ucla.campus .degree,
#academics-programs-and-majors .list-wrapper .row a.external-link--blue:active .ucla.campus .degree {
  color: #FFFFFF;
}

#academics-programs-and-majors .list-wrapper .row a.external-link--blue:hover span img,
#academics-programs-and-majors .list-wrapper .row a.external-link--blue:focus span img,
#academics-programs-and-majors .list-wrapper .row a.external-link--blue:active span img {
  content: url(../../s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--white.svg);
}

#academics-programs-and-majors .list-wrapper .row a.external-link--blue:focus {
  background: #0079BF;
  outline: 2px dotted #FFFFFF;
  outline-offset: -3px;
}

#academics-programs-and-majors .list-wrapper .row a.external-link--blue:active {
  background: #003B5C;
}

#academics-programs-and-majors .list-wrapper .row a img[alt="external-link-icon"] {
  position: absolute;
  top: 20px;
  right: 24px;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row a img[alt="external-link-icon"] {
    right: 38px;
  }
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row .ucla.campus {
    width: inherit;
  }
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .col {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.25rem;
  color: #666666;
  width: auto;
  display: block;
  float: none;
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .col a {
  text-decoration: none;
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .col a:hover {
  background: none;
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree {
  margin-left: 0px;
  color: #757575;
  font-size: 12px;
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree a {
  display: inline-block;
  padding: 3px 6px 1px;
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
  background: #00598C;
  color: #FFFFFF;
  margin-right: 5px;
  border-radius: 2px;
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree a:visited {
  color: #FFFFFF;
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree a:focus {
  outline-offset: 2px;
  outline: 2px solid #0079BF;
  background-color: #0079BF;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree a {
    font-size: 14px;
    line-height: 16px;
    padding: 4px 8px;
    color: #FFFFFF;
  }
}

@media (min-width: 1024px) {
  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree a:hover {
    background: #0079BF;
    color: #FFFFFF;
    border-color: #0079BF;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree a:focus {
    color: #FFFFFF;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree a:active {
    background: #003B5C;
    border-color: #003B5C;
    color: #FFFFFF;
  }
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col {
    width: inherit;
    display: block;
    float: left;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col.degree {
    margin-left: 0px;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col.span_8_of_12 {
    width: 66.13%;
  }

  #academics-programs-and-majors .list-wrapper .row .ucla.campus .col.span_4_of_12 {
    width: 32.26%;
  }
}

#academics-programs-and-majors .list-wrapper .row .ucla.campus .major-title {
  margin-left: 0px;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  display: block;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  #academics-programs-and-majors .list-wrapper .row .ucla.campus .major-title {
    margin-left: 24px;
    margin-bottom: 0px;
    font-size: 16px;
    line-height: 20px;
    position: relative;
    top: 4px;
  }
}

@media (max-width: 1023.98px) {
  #academics-continuing-education .span_8_of_12 {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  #academics-libraries .p--lead-in {
    font-size: 1.25em;
    line-height: 1.2em;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #academics-libraries .stat-set {
    display: block;
  }
}

@media (max-width: 767.98px) {
  #academics-libraries .stat-wrapper .stat-tout__number {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 4px;
  }
}

@media (max-width: 767.98px) {
  #academics-libraries .stat-wrapper .stat-tout__label {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

#academics-libraries ul.list {
  max-width: none;
}

#academics-libraries ul.list li a {
  padding: 14px 16px;
}

#academics-libraries .ucla-library-archives .col.one,
#academics-libraries .ucla-library-archives .col.two {
  margin: 0;
}

@media (min-width: 768px) {
  #academics-libraries .ucla-library-archives .col.one,
  #academics-libraries .ucla-library-archives .col.two {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  #academics-libraries .ucla-library-archives .col.one,
  #academics-libraries .ucla-library-archives .col.two {
    width: 48.6%;
  }
}

@media (min-width: 768px) {
  #academics-libraries .ucla-library-archives .col.two {
    padding-left: 1.5rem;
  }
}

#academics-libraries .bt-0 {
  border-top: 0;
}

@media (min-width: 1024px) {
  #academics-libraries .bt-0 {
    border-top: 1px solid #E5E5E5;
  }
}

@media (max-width: 1023.98px) {
  #academics-college-and-schools .span_8_of_12 {
    width: 100%;
  }

  #academics-college-and-schools .span_4_of_12 {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  #academics-college-and-schools .p--lead-in {
    font-size: 1.25em;
    line-height: 1.2em;
  }
}

#academics-college-and-schools .school-card__img {
  overflow: hidden;
}

@media (min-width: 768px) {
  #academics-college-and-schools .school-card__img img {
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 1/1;
  }
}

#academics-college-and-schools .school-card__section {
  background-color: #EBEBEB;
  border-top: 0px;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #academics-college-and-schools .school-card__section {
    padding: 16px 36px 40px;
    display: grid;
    grid-template-columns: 50% 50%;
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}

#academics-college-and-schools .school-card__ribbon {
  background: white;
  top: -16px;
}

@media (max-width: 1023.98px) {
  #academics-college-and-schools .school-card__ribbon {
    padding: 0px 16px 12px 16px;
    top: 0;
  }
}

#academics-college-and-schools .school-card__ribbon > a {
  text-decoration: none;
}

#academics-college-and-schools .school-card__ribbon > a:hover div img {
  opacity: 30%;
}

#academics-college-and-schools .school-card__ribbon > a:hover .school-card__img {
  background-color: #0079BF;
}

#academics-college-and-schools .school-card__ribbon > a:hover h2 {
  background-color: #0079BF;
  color: white;
}

#academics-college-and-schools .school-card__ribbon > a:active div img {
  opacity: 30%;
}

#academics-college-and-schools .school-card__ribbon > a:active .school-card__img {
  background-color: #003B5C;
}

#academics-college-and-schools .school-card__ribbon > a:active h2 {
  color: white;
  background-color: #003B5C;
}

#academics-college-and-schools .school-card__ribbon > a:focus {
  outline: none;
}

#academics-college-and-schools .school-card__ribbon > a:focus h2 {
  outline: 2px dotted #0079BF;
}

#academics-college-and-schools .school-card__school,
#academics-college-and-schools .school-card__degree {
  font-weight: bold;
  line-height: 24px;
}

#academics-college-and-schools .school-card__school {
  color: #333333;
}

#academics-college-and-schools .school-card__degree {
  color: #666;
}

#academics-college-and-schools .school-card__title {
  display: grid;
}

#academics-college-and-schools .school-card__title h2 {
  color: #00598C;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (max-width: 1023.98px) {
  #academics-college-and-schools .school-card__title h2 {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

#academics-college-and-schools .ribbon--yellow {
  width: 80%;
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  #academics-college-and-schools .ribbon--yellow {
    right: 12px;
  }
}

#academics-college-and-schools .ribbon--yellow span {
  padding: 8px 2px 8px 8px;
  font-size: 1.125em;
}

#academics-college-and-schools .ribbon--yellow span:first-child {
  padding-left: 12px;
}

#academics-college-and-schools .ribbon--yellow span:last-child {
  padding-right: 12px;
}

@media (min-width: 1024px) {
  #academics-college-and-schools .ribbon--yellow span {
    padding: 8px;
    font-size: 1.5rem;
  }
}

@media (max-width: 1023.98px) {
  #academics-college-and-schools .ribbon--yellow {
    top: 0px;
    position: relative;
    text-align: left;
  }

  #academics-college-and-schools .ribbon--yellow span {
    float: none;
  }
}

@media (max-width: 1023.98px) {
  #academics-college-and-schools .col {
    margin: 0px;
  }
}

#academics-graduate-and-professional-education .section-wrapper.grey > ::before {
  border: none;
  margin: 0px;
}

@media (max-width: 767.98px) {
  #academics-graduate-and-professional-education .section-wrapper.grey {
    background: none;
  }
}

@media (min-width: 768px) {
  #academics-graduate-and-professional-education .section-wrapper.grey {
    padding: 64px 0;
  }
}

@media (max-width: 767.98px) {
  #academics-graduate-and-professional-education .p--lead-in {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  #academics-graduate-and-professional-education .stat-wrapper .stat-tout__number {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 4px;
  }
}

@media (max-width: 767.98px) {
  #academics-graduate-and-professional-education .stat-wrapper .stat-tout__label {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link {
  text-decoration: none;
}

#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:hover div img,
#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:focus div img {
  opacity: 30%;
}

#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:hover .faculty-card-featured,
#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:hover .faculty-card-featured__info,
#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:focus .faculty-card-featured,
#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:focus .faculty-card-featured__info {
  background-color: #0079BF;
}

#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:active div img {
  opacity: 30%;
}

#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:active .faculty-card-featured,
#academics-graduate-and-professional-education .section-wrapper .grad-and-prof-edu-card-link:active .faculty-card-featured__info {
  background-color: #003B5C;
}

@media (min-width: 768px) {
  #academics-graduate-and-professional-education .section-wrapper .faculty-card-featured {
    margin-top: -64px;
  }
}

@media (min-width: 1024px) {
  #academics-graduate-and-professional-education .section-wrapper .faculty-card-featured {
    margin-top: -32px;
  }
}

#academics-graduate-and-professional-education .section-wrapper .faculty-card-featured__info {
  background-color: #00598C;
  margin-top: -3px;
  width: 100%;
  min-height: 184px;
}

@media (min-width: 1024px) {
  #academics-graduate-and-professional-education .section-wrapper .faculty-card-featured__info {
    min-height: 160px;
  }
}

#academics-graduate-and-professional-education .section-wrapper .faculty-card-featured__info-link,
#academics-graduate-and-professional-education .section-wrapper .faculty-card-featured__info-title {
  color: #FFFFFF;
}

@media (max-width: 1023.98px) and (min-width: 768px) {
  #academics-graduate-and-professional-education .section-wrapper .span_3_of_12 {
    width: 42%;
    float: left;
  }
}

@media (max-width: 1023.98px) {
  #academics-graduate-and-professional-education .span_8_of_12 {
    width: 100%;
  }
}

#academics-support-entrepreneurship .landing-internal--copy {
  padding: 32px;
}

#academics-support-entrepreneurship .landing-internal--copy .h2 {
  font-size: 36px;
  line-height: 40px;
  text-transform: none;
  font-weight: 700;
  padding-bottom: 16px;
}

@media only screen and (min-width: 600px) {
  #academics-support-entrepreneurship .landing-internal--image {
    height: 512px;
  }
}

@media only screen and (min-width: 600px) {
  #academics-support-entrepreneurship .landing-internal--image-wrap {
    height: 512px;
  }
}

@media only screen and (min-width: 768px) {
  #academics-support-entrepreneurship .landing-internal .col.span_6_of_12 {
    max-width: 80%;
    width: 100%;
  }
}

@media only screen and (min-width: 1024px) {
  #academics-support-entrepreneurship .landing-internal .col.span_6_of_12 {
    max-width: none;
    width: 49.2%;
  }
}

@media only screen and (min-width: 1024px) {
  #academics-support-entrepreneurship .video-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
}

#academics-support-entrepreneurship .video-section .video-container {
  display: block;
  position: relative;
  padding-top: 56.25%;
}

#academics-support-entrepreneurship .video-section .video-container iframe {
  display: block;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#academics-support-entrepreneurship .video-section .video-description-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem 1.5rem;
}

@media only screen and (min-width: 1024px) {
  #academics-support-entrepreneurship .video-section .video-description-container {
    padding: 0 2.813rem;
  }
}

#academics-support-entrepreneurship .video-section .video-description-container .video-section-heading {
  padding-bottom: 0;
}

@media only screen and (min-width: 1024px) {
  #academics-support-entrepreneurship .video-section .video-description-container .video-section-heading {
    max-width: 480px;
  }
}

#academics-support-entrepreneurship .video-section .video-description-container .video-section-heading::after {
  content: "";
  width: 2.5rem;
  height: 0.25rem;
  background: #ffd300;
  display: block;
  margin: 2rem 0;
}

#academics-support-entrepreneurship .video-section .video-description-container .video-section-paragraph {
  max-width: 560px;
}

#academics-support-entrepreneurship .video-section .video-description-container .video-section-button {
  color: #000;
}

@media only screen and (min-width: 1024px) {
  #academics-support-entrepreneurship .img--align-left {
    padding-right: 6px;
  }

  #academics-support-entrepreneurship h3.h5 {
    line-height: 20px;
    padding: 10px 0 4px;
  }

  #academics-support-entrepreneurship h3.h5 a {
    text-decoration: none;
  }

  #academics-support-entrepreneurship h3.h5 a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    background-image: url(../img/arrow-next.svg);
    position: relative;
    left: 8px;
    top: -1px;
  }

  #academics-support-entrepreneurship h3.h5 a:visited {
    color: #00598C;
  }

  #academics-support-entrepreneurship h3.h5 a:hover {
    color: #FFFFFF;
  }
}

#about-awards-and-honors-faculty-american-association-for-the-advancement-of-science #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-american-association-for-the-advancement-of-science #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-american-association-for-the-advancement-of-science #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-american-association-for-the-advancement-of-science h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-american-association-for-the-advancement-of-science td {
  font-weight: normal;
  white-space: nowrap;
}

#about-awards-and-honors-faculty-american-philosophical-society #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-american-philosophical-society #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-american-philosophical-society #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-american-philosophical-society h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-american-philosophical-society td {
  font-weight: normal;
  white-space: nowrap;
}

#about-awards-and-honors-faculty-national-academy-of-education #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-national-academy-of-education #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-national-academy-of-education #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-national-academy-of-education h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-national-academy-of-education td {
  font-weight: normal;
  white-space: nowrap;
}

#about-awards-and-honors-faculty-national-academy-of-sciences #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-national-academy-of-sciences #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-national-academy-of-sciences #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-national-academy-of-sciences h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-national-academy-of-sciences td {
  font-weight: normal;
  white-space: nowrap;
}

#about-awards-and-honors-faculty-faculty-academy-membership #nas-heading {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E5E5;
}

@media (min-width: 768px) {
  #about-awards-and-honors-faculty-faculty-academy-membership #nas-heading {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  #about-awards-and-honors-faculty-faculty-academy-membership #nas-heading {
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
}

#about-awards-and-honors-faculty-faculty-academy-membership h2 {
  font-size: 28px;
  line-height: 32px;
}

#about-awards-and-honors-faculty-faculty-academy-membership td {
  font-weight: normal;
  white-space: nowrap;
}

#campus-life main .campus-life__header {
  max-width: 1200px;
}

#campus-life main .campus-life__header-wrapper {
  display: flex;
  align-items: center;
}

@media (max-width: 1023.98px) {
  #campus-life main .campus-life__header-wrapper {
    flex-direction: column-reverse;
    justify-content: center;
  }
}

#campus-life main .campus-life__header-copy {
  z-index: 1;
}

@media (min-width: 1024px) {
  #campus-life main .campus-life__header-copy {
    width: 41.66%;
    height: 100%;
  }
}

#campus-life main .campus-life__header-image img {
  width: 100%;
}

@media (max-width: 1023.98px) {
  #campus-life main .campus-life__header-image {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #campus-life main .campus-life__img {
    width: 66.7%;
    float: left;
  }
}

@media (max-width: 767.98px) {
  #campus-life main .campus-life__img {
    width: 100%;
  }
}

@media (max-width: 1023.98px) {
  #campus-life main .campus-life__copy {
    width: 100%;
  }
}

#campus-life main .landing-internal.section-wrapper.housing {
  border-top: none;
  padding-top: 0;
}

@media (min-width: 768px) {
  #campus-life main .landing-internal.section-wrapper.housing {
    padding-top: 64px;
  }
}

#campus-life main .bruin-resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 35px;
}

#campus-life main .bruin-resource-list h3 a {
  text-decoration: none;
}

#campus-life main .bruin-resource-list li {
  border-bottom: 1px solid #CCC;
  padding-bottom: 9px;
  margin-bottom: 25px;
}

#campus-life main .bruin-resource-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  #campus-life main .bruin-resource-list {
    margin-left: 90px;
  }
}

@media (max-width: 1023.98px) {
  #campus-life-clubs-organizations-and-recreation .span_8_of_12 {
    width: 100%;
  }
}

#research main .quote-bg {
  background-image: url(../img/research/research-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#research main .quote-bg .quote-container {
  max-width: 812px;
  width: 100%;
  margin: 0 auto;
}

#research main .quote-bg p {
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 15px;
}

#research main .quote-bg p:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#research main img {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1023.98px) {
  #research main img {
    width: auto;
  }
}

@media (max-width: 1023.98px) {
  #research main .section-wrapper .ucla.campus .col {
    width: 100%;
    margin: 0;
  }
}

.destinations-card-wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .destinations-card-wrapper {
    flex-direction: row;
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .destinations-card-wrapper {
    flex-wrap: nowrap;
  }
}

.destinations-card-wrapper .basic-card {
  max-width: none;
  flex-grow: 1;
  flex: 1;
}

.destinations-card-wrapper .basic-card .basic-card__image {
  max-width: none;
  max-height: none;
}

.destinations-card-wrapper .basic-card .basic-card__description {
  max-height: none;
}

.events-story-wrapper .story__featured {
  float: none;
}

@media (min-width: 1024px) {
  .events-story-wrapper .story__featured-content {
    transform: none;
    top: 25%;
  }
}

.events-story-wrapper .story__featured-date {
  padding: 0;
  color: #666;
}

.events-data-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 18px;
}

.events-data-list > .event-card__wrapper {
  margin: 0;
}

.events-data-list .event-card__link::before {
  content: none;
}

.events-list__email-form {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-direction: column;
}

.events-list__email-form > .text {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.events-list__email-form > .text .text__input {
  width: 100%;
}

.events-list__email-form .event-submit-wrapper {
  display: flex;
  align-items: center;
}

.events-list__email-form .events-list__email-form__submit {
  margin-top: 1rem;
}

@media (min-width: 1280px) {
  .events-list__email-form .events-list__email-form__submit {
    margin-top: 38px;
  }
}

@media (min-width: 768px) {
  .events-list__email-form {
    align-items: flex-start;
    flex-direction: row;
  }
}

.narrow-breadcrumbs-wrapper > .col > .ucla.campus {
  padding-left: 0;
}

.events-detail-featured-img > img {
  width: 100%;
  height: auto;
}

#events main {
  padding-top: 40px;
}

#events h1 {
  font-weight: 700;
  font-size: 48px;
  line-height: 54px;
  text-transform: none;
}

#events .right-blade {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  #events .right-blade {
    margin-top: 64px;
  }

  #events .right-blade .story__featured-image {
    float: left;
  }

  #events .right-blade .events-story-wrapper .story__featured-content {
    right: 0px;
  }

  #events .right-blade .story {
    padding-left: 0px;
  }
}

@media (min-width: 1024px) {
  #events .story__featured-image {
    width: 675px;
    height: auto;
  }
}

#events .story__featured-content {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

@media (min-width: 1024px) {
  #events .story__featured-content {
    margin-bottom: 25px;
    padding-bottom: 32px;
  }
}

#optimists .landing main .landing-internal.hero,
#optimists .landing-internal.hero {
  margin-bottom: 0px;
}

#optimists .ucla-banner__video {
  max-height: 693px;
  overflow: hidden;
  position: relative;
}

#optimists .ucla-banner__video_overlay {
  position: relative;
  display: block;
}

#optimists .ucla-banner__video_overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 59, 92, 0.8);
  /* Blue tint with 50% opacity */
  pointer-events: none;
  /* Allows clicks to pass through */
}

#optimists .ucla-banner__video video {
  width: 100%;
  height: 100%;
}

#optimists .ucla-banner__headline {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

#optimists .ucla-banner__headline img {
  margin-top: calc(21% - 15px);
  margin-left: 50px;
  width: 200px;
}

@media (min-width: 480px) {
  #optimists .ucla-banner__headline img {
    width: 248px;
  }
}

@media (min-width: 768px) {
  #optimists .ucla-banner__headline img {
    width: initial;
  }
}

@media (min-width: 1280px) {
  #optimists .ucla-banner__headline img {
    margin-left: 0px;
  }
}

#optimists #lead-copy {
  background-color: #0A7AD0;
  border: 0;
  padding-top: 50px;
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  #optimists #lead-copy {
    padding-top: 110px;
  }
}

#optimists #lead-copy .copy-container {
  max-width: 776px;
  margin: 0 auto;
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  #optimists #lead-copy .copy-container {
    margin-bottom: initial;
  }
}

#optimists #lead-copy .copy-container p {
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
}

@media (min-width: 768px) {
  #optimists #lead-copy .copy-container p {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 25px;
  }
}

#optimists #list,
#optimists #last {
  padding-bottom: 100px;
}

@media (min-width: 768px) {
  #optimists #list,
  #optimists #last {
    padding-bottom: 180px;
  }
}

#optimists #list h2,
#optimists #last h2 {
  text-align: center;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  #optimists #list h2,
  #optimists #last h2 {
    margin-bottom: 40px;
  }
}

#optimists #list .icon-container,
#optimists #last .icon-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Creates 5 equal columns */
  gap: 10px;
  /* Optional: Adds space between the grid items */
  max-width: 335px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  #optimists #list .icon-container,
  #optimists #last .icon-container {
    grid-template-columns: repeat(3, 1fr);
    max-width: 505px;
  }
}

@media (min-width: 1024px) {
  #optimists #list .icon-container,
  #optimists #last .icon-container {
    grid-template-columns: repeat(3, 1fr);
    max-width: 505px;
  }
}

#optimists #list .icon-item,
#optimists #last .icon-item {
  text-align: left;
  font-weight: bold;
  margin-bottom: 10px;
}

#optimists #list .icon-item img,
#optimists #last .icon-item img {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  height: 60px;
}

#optimists #list .icon-item .box,
#optimists #last .icon-item .box {
  width: 24px;
  height: 24px;
  display: inline-block;
  border-color: #666;
  border: 1px solid;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

#optimists #list .icon-item .label,
#optimists #last .icon-item .label {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 35px auto;
}

#optimists #list .icon-item .label li,
#optimists #last .icon-item .label li {
  display: inline-block;
  align-self: center;
}

#optimists #list .icon-item .label li .txt,
#optimists #last .icon-item .label li .txt {
  cursor: pointer;
}

#optimists #optimist-list {
  background-color: #F2F2F2;
  padding-top: 0px;
  border-top: none;
  overflow: unset;
  margin-bottom: 0px;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  #optimists #optimist-list {
    padding-bottom: 90px;
  }
}

#optimists #optimist-list .optimist-container {
  margin-top: -100px;
  overflow: hidden;
}

#optimists #optimist-list .optimist-container .btn-container a {
  margin: 0 auto;
}

#optimists #optimist-list .optimist-container .optimist-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 400px;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  #optimists #optimist-list .optimist-container .optimist-list {
    grid-auto-rows: 500px;
  }
}

@media (min-width: 600px) {
  #optimists #optimist-list .optimist-container .optimist-list {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 400px;
  }
}

@media (min-width: 768px) {
  #optimists #optimist-list .optimist-container .optimist-list {
    grid-auto-rows: 500px;
  }
}

@media (min-width: 1024px) {
  #optimists #optimist-list .optimist-container .optimist-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

#optimists #optimist-list .optimist-container .optimist-list li {
  background: #2673ad;
  background: radial-gradient(circle, #2673ad 50%, #00568c 100%);
  border: none;
  position: relative;
  opacity: 1;
  transition: opacity 0.5s;
}

#optimists #optimist-list .optimist-container .optimist-list li.hide {
  opacity: 0;
}

#optimists #optimist-list .optimist-container .optimist-list li a {
  text-decoration: none;
  height: 100%;
  display: block;
}

#optimists #optimist-list .optimist-container .optimist-list li .thumb-image {
  overflow: hidden;
  height: 170px;
}

@media (min-width: 480px) {
  #optimists #optimist-list .optimist-container .optimist-list li .thumb-image {
    height: 250px;
  }
}

@media (min-width: 600px) {
  #optimists #optimist-list .optimist-container .optimist-list li .thumb-image {
    height: 170px;
  }
}

@media (min-width: 768px) {
  #optimists #optimist-list .optimist-container .optimist-list li .thumb-image {
    height: 250px;
  }
}

#optimists #optimist-list .optimist-container .optimist-list li img {
  display: block;
  width: 100%;
}

#optimists #optimist-list .optimist-container .optimist-list li .card-info {
  padding: 20px;
}

#optimists #optimist-list .optimist-container .optimist-list li .card-info h3 {
  color: #FFD100;
  text-decoration: none;
}

#optimists #optimist-list .optimist-container .optimist-list li .card-info .title {
  color: #FFFFFF;
  line-height: 24px;
}

#optimists #optimist-list .optimist-container .optimist-list li .bio-link {
  position: absolute;
  padding: 20px;
  bottom: 0px;
}

#optimists #optimist-list .optimist-container .optimist-list li .bio-link span {
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
}

#optimists #last {
  padding-bottom: 10px;
}

@media (min-width: 1024px) {
  #optimists #last {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

#optimists #last a {
  color: #FFFFFF;
  margin: 0 auto;
}

#optimists #last p {
  text-align: center;
}

#optimists-detail #profile-image {
  margin-top: 12px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  #optimists-detail #profile-image {
    margin-top: 48px;
    margin-bottom: 60px;
  }
}

#optimists-detail #profile-image img {
  width: 100%;
}

#optimists-detail.internal main .section-wrapper > ::before {
  border: none;
  margin: 0;
}

#optimists-detail h1 {
  font-weight: bold;
  font-size: 32px;
  line-height: 44px;
  text-transform: uppercase;
  color: #005587;
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  #optimists-detail h1 {
    margin-bottom: 46px;
    font-size: 48px;
    line-height: 54px;
  }
}

#optimists-detail h2 {
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  #optimists-detail h2 {
    margin-bottom: 10px;
  }
}

#optimists-detail h3 {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  #optimists-detail h3 {
    margin-bottom: 45px;
  }
}

#optimists-detail .col.span_8_of_12 {
  margin: 0px;
}

#optimists-detail .btn.yellow {
  color: #000000;
  background-color: #FFD100;
  border-color: #FFD100;
}

#optimists-detail .btn.yellow:hover {
  background-color: #ffe500;
  border-color: #ffe500;
}

#optimists-detail .share {
  display: block;
  list-style: none;
  margin: 0;
  margin-top: 30px;
  padding: 0;
}

#optimists-detail .share li {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  color: #005587;
  padding-right: 10px;
}

@media (min-width: 768px) {
  #optimists-detail .share li {
    padding-right: 20px;
  }
}

#optimists-detail .share li::before {
  content: none;
}

#optimists-detail .share li a {
  display: inline-block;
  overflow: hidden;
  text-indent: -1000px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: relative;
  top: 4px;
}

#optimists-detail .share li a:hover {
  opacity: 0.8;
}

#optimists-detail .share li .facebook-share {
  background: url("../img/optimists/icon-facebook.svg") no-repeat 0 0;
}

#optimists-detail .share li .x-share {
  background: url("../img/optimists/icon-x.svg") no-repeat 0 0;
}

#optimists-detail .share li .linkedin-share {
  background: url("../img/optimists/icon-linkedin.svg") no-repeat 0 0;
}

#optimists-detail .return p {
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  #optimists-detail .return p {
    margin-top: 70px;
  }
}

#optimists-detail .return p a {
  color: #005587;
}

#optimists-detail .return p a:hover {
  background: none;
}

#optimists-detail .return .arrow-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../img/optimists/icon-arrow.svg") no-repeat 0 0;
  position: relative;
  top: 7px;
  margin-right: 5px;
}

/* stylelint-enable */


/*# sourceMappingURL=app.css.map*/