/* Custom styles for the Elon Experiences page. (https://www.elon.edu/u/elon-experiences/) */
/* Required at the beginning of any and ALL individual theme SCSS
 * stylesheet builds. Contains all necessary variables, functions, 
 * and mixins (from Base) but does not output any CSS. */
/* ::Transitions */
/* ------------------------------------------------------------ */
/* ::Link Hover/Focus/Active Styles Grouped Together */
/* ------------------------------------------------------------ */
/* ::Opacity with IE support */
/* ------------------------------------------------------------ */
/* ::Align things vertically (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) */
/* ------------------------------------------------------------ */
/* ::Retina Images */
/* ------------------------------------------------------------ */
/* ::Hex to RGB */
/* ------------------------------------------------------------ */
/* ::Clearfix */
/* ------------------------------------------------------------ */
/* ::Placeholder Text */
/* ------------------------------------------------------------ */
/* ::List styles */
/* ------------------------------------------------------------ */
/* ::Main Elon Palette */
/* ------------------------------------------------------------ */
/* ::Elon Law Palette */
/* ------------------------------------------------------------ */
/* ::Grey Accents Palette */
/* ------------------------------------------------------------ */
/* ::Utility Colors */
/* ------------------------------------------------------------ */
/* ::Assign colors to variable roles */
/* ------------------------------------------------------------ */
/* ::Basic variables */
/* ------------------------------------------------------------ */
/* ::Assign fonts/weights to variable roles */
/* ------------------------------------------------------------ */
/* ::Type sizes/scale */
/* ------------------------------------------------------------ */
/*$alpha    : 88px;
$beta   : 48px;
$gamma    : 36px;
$delta    : 28px;
$epsilon  : 24px;
$zeta   : 22px;
$eta    : 18px;
$theta    : 16px;
$iota     : 14px;
$kappa    : 12px;*/
/* ::Type defaults for compass' rhythm */
/* ------------------------------------------------------------ */
article.main-content a:hover, article.main-content a:focus, article.main-content a:active {
  color: #527b82;
  border-bottom-color: #527b82;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Condensed", Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif, sans-serif;
  letter-spacing: 0;
}

p.lead {
  font-family: "Roboto Condensed", Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}

.lt-ie9 p.lead {
  font-size: 1.75em;
}

@media screen and (min-width: 801px) {
  p.lead {
    font-size: 1.75em;
  }
}

.animated-count-grid {
  margin-bottom: 0;
}

.animated-count-grid.grid-text-color-light-gold {
  color: #d4c59e;
}

.animated-count-grid .static-wrapper h2 {
  font-weight: 300;
  color: #d4c59e;
}

.animated-count-grid .static-wrapper + .animated-count {
  border-top: none !important;
}

.animated-count-grid .animated-count > span:not(.number) {
  font-family: "Roboto Condensed", Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif, sans-serif;
  text-transform: uppercase;
}

.lt-ie9 .animated-count-grid:not(.grid-no-borders) .animated-count-row + .animated-count-row {
  border-top-color: #95000d;
}

.lt-ie9 .animated-count-grid:not(.grid-no-borders) .animated-count + .animated-count,
.lt-ie9 .animated-count-grid:not(.grid-no-borders) .animated-count + .static-wrapper,
.lt-ie9 .animated-count-grid:not(.grid-no-borders) .static-wrapper + .animated-count,
.lt-ie9 .animated-count-grid:not(.grid-no-borders) .static-wrapper + .static-wrapper {
  border-left-color: #95000d;
}

@media screen and (min-width: 641px) {
  .animated-count-grid:not(.grid-no-borders) .animated-count-row + .animated-count-row {
    border-top-color: #95000d;
  }
  .animated-count-grid:not(.grid-no-borders) .animated-count + .animated-count,
  .animated-count-grid:not(.grid-no-borders) .animated-count + .static-wrapper,
  .animated-count-grid:not(.grid-no-borders) .static-wrapper + .animated-count,
  .animated-count-grid:not(.grid-no-borders) .static-wrapper + .static-wrapper {
    border-left-color: #95000d;
  }
}

blockquote {
  border-width: 2px 0 2px 0;
  border-color: #ededed;
}

blockquote:before, blockquote:after {
  color: #527b82;
  background-color: transparent;
}

blockquote:before {
  top: -6px;
}

blockquote:after {
  bottom: -6px;
}

blockquote footer {
  color: #a0a5ad;
}

blockquote img {
  border-radius: 50%;
  overflow: hidden;
}

blockquote img.aligncenter {
  margin-top: 0.15em;
}

.announcement-banner .hero-text {
  max-width: none;
}

.announcement-banner .hero-text h1 span.small-text {
  font-weight: 300;
  margin: 0;
}

.announcement-banner .hero-text h1 span.large-text {
  font-size: 65px;
  font-size: 5vw;
}

@media (max-width: 640px) {
  .announcement-banner .hero-text h1 span.large-text {
    font-size: 32px;
  }
}

@media (min-width: 2400px) {
  .announcement-banner .hero-text h1 span.large-text {
    font-size: 120px;
  }
}

.lt-ie9 .announcement-banner .hero-text.with-borders {
  padding-top: 12px;
  padding-bottom: 12px;
}

.lt-ie9 .announcement-banner .hero-text.bottom-left, .lt-ie9 .announcement-banner .hero-text.bottom-center, .lt-ie9 .announcement-banner .hero-text.bottom-right {
  bottom: 12%;
}

.lt-ie9 .announcement-banner .hero-text h1 {
  white-space: nowrap;
}

@media screen and (min-width: 801px) {
  .announcement-banner .hero-text.with-borders {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .announcement-banner .hero-text.bottom-left, .announcement-banner .hero-text.bottom-center, .announcement-banner .hero-text.bottom-right {
    bottom: 12%;
  }
  .announcement-banner .hero-text h1 {
    white-space: nowrap;
  }
}

.lt-ie9 .announcement-banner.banner-type--image:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

@media screen and (min-width: 801px) {
  .announcement-banner.banner-type--image:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  }
}

.page--featured-links.gold-bg {
  background-color: #f0ebde;
}

.page--featured-links.gold-bg li + li {
  border-left-color: #e1d6ba;
}

.page--featured-links.gold-bg a {
  color: #73000a;
}

.page--featured-links.gold-bg a:hover, .page--featured-links.gold-bg a:focus, .page--featured-links.gold-bg a:active {
  color: #527b82;
}

.lt-ie9 .flex-row {
  display: block;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  align-content: stretch;
}

@media screen and (min-width: 801px) {
  .flex-row {
    display: block;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    align-content: stretch;
  }
}

.flex-item.flex-item--main {
  margin-bottom: 5.25em;
}

.flex-item.flex-item--main h2 {
  font-size: 2.25em;
  font-weight: 700;
}

.lt-ie9 .flex-item {
  max-width: 50%;
}

.lt-ie9 .flex-item.flex-item--main {
  margin-bottom: 0;
}

.lt-ie9 .flex-item.flex-item--main h2 {
  font-size: 2.5em;
}

.lt-ie9 .flex-item.flex-item--aside.flex-item--aside-right {
  order: 2;
  padding-left: 30px;
}

.lt-ie9 .flex-item.flex-item--aside.flex-item--aside-left {
  order: -1;
  padding-right: 30px;
}

@media screen and (min-width: 801px) {
  .flex-item {
    max-width: 50%;
  }
  .flex-item.flex-item--main {
    margin-bottom: 0;
  }
  .flex-item.flex-item--main h2 {
    font-size: 2.5em;
  }
  .flex-item.flex-item--aside.flex-item--aside-right {
    order: 2;
    padding-left: 30px;
  }
  .flex-item.flex-item--aside.flex-item--aside-left {
    order: -1;
    padding-right: 30px;
  }
}

.lt-ie9 .flex-item.flex-item--main {
  margin-bottom: 0;
}

.lt-ie9 .flex-item.flex-item--main h2 {
  font-size: 3.25em;
}

.lt-ie9 .flex-item.flex-item--aside.flex-item--aside-right {
  padding-left: 120px;
}

.lt-ie9 .flex-item.flex-item--aside.flex-item--aside-left {
  padding-right: 120px;
}

@media screen and (min-width: 1025px) {
  .flex-item.flex-item--main {
    margin-bottom: 0;
  }
  .flex-item.flex-item--main h2 {
    font-size: 3.25em;
  }
  .flex-item.flex-item--aside.flex-item--aside-right {
    padding-left: 120px;
  }
  .flex-item.flex-item--aside.flex-item--aside-left {
    padding-right: 120px;
  }
}

.section-component {
  overflow: hidden;
}

.section-component a:hover, .section-component a:focus, .section-component a:active {
  color: #527b82;
  border-bottom-color: #527b82;
}

.section-component.maroon-bg {
  background-color: #620009;
}

.section-component.black-bg {
  color: #cccacc;
}

.section-component.black-bg h2 {
  color: #d4c59e;
}

.section-component.black-bg blockquote {
  color: #ededed;
  border-color: rgba(83, 89, 97, 0.5);
}

.section-component.black-bg a {
  color: #d4c59e;
}

.section-component.black-bg a:hover, .section-component.black-bg a:focus, .section-component.black-bg a:active {
  color: #68979f;
  border-bottom-color: #68979f;
}

.section-component .bg-image {
  filter: blur(2px);
  height: 103%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
