/** These should cover most breakpoints but more can be added if needed */
/** List of the screen sizes for @each statements */
/** List of the gutter sizes mainly for grids */
/* ---------------------------------------------- *\
    tools/mixins
\* ---------------------------------------------- */
/** Adds vendor specific prefixes for certain CSS3 properties */
/** Standard text sizing usually used for paragraphs, list, links, etc. */
/** Takes two colors and a direction to create a gradient background @include gradient-bg(#FFFFFF, #000000, vertical); */
/** Min-width breakpoint */
/** Max-width breakpoint We use $size - 1 so default sizes can be used. ex. $size--lap instead of 1023 */
a {
   color: #3877c7;
 }

 .btn-link {
   color: #3877c7;
 }

 /* --------------------------------------------- components/buttons ---------------------------------------------- */
 .bttn,
 .share {
   display: inline-block;
   vertical-align: middle;
   -webkit-appearance: none;
   outline: none;
   text-decoration: none;
   border: 1px solid transparent;
   background: none;
   text-transform: uppercase;
   padding: 8px 16px;
   cursor: pointer;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
 }

 /* --------------------------------------------- *\
    Sizes
 \* --------------------------------------------- */
 /** Small Button */
 .bttn--small {
   font-size: 13px;
   padding: 4px 16px;
 }

 /** Large Button */
 .bttn--large {
   font-size: 18px;
   padding: 12px 24px;
 }

 /** Extra Large Button */
 .bttn--xlarge {
   padding: 16px 48px;
 }

 /** Full Width */
 .bttn--full {
   width: 100%;
 }

 /* --------------------------------------------- *\
    Colors
 \* --------------------------------------------- */
 /** Default */
 .bttn--default,
 .share {
   background-color: #fff;
   border-color: #ddd;
   border-bottom-width: 2px;
 }

 .bttn--default:hover,
 .share:hover {
   background-color: #eee;
 }

 .bttn--default:active,
 .share:active {
   background-color: #ddd;
   border-color: #bbb;
 }

 /** Hollow Button */
 .bttn--hollow {
   background-color: transparent;
   border-color: #bbb;
   text-transform: uppercase;
   color: #333;
 }

 .bttn--hollow:hover {
   background-color: #bbb;
 }

 .bttn--hollow:active {
   background-color: #aeaeae;
   border-color: #aeaeae;
 }

 /** Solid Button - Based on $accent color in settings/_colors.scss */
 .bttn--solid {
   background-color: #000;
   color: #fff; /*&:active { background-color: darken($accent, 10%); }*/
 }

 .bttn--solid:hover {
   background-color: #333333;
   color: #fff;
   font-weight: bold;
 }

 /** Delete Button */
 .bttn--delete {
   background-color: red;
   color: #fff;
 }

 .bttn--delete:hover {
   background-color: #e60000;
 }

 .bttn--delete:active {
   background-color: #cc0000;
 }

 /* --------------------------------------------- *\
    Buttons with icons
 \* --------------------------------------------- */
 .bttn--icon,
 .share {
   position: relative;
   padding-left: 40px;
   font-weight: 600;
 }

 .bttn--icon.bttn--large,
 .bttn--large.share {
   padding-left: 48px;
 }

 .bttn--icon:before,
 .share:before {
   display: block;
   content: "";
   position: absolute;
   top: 50%;
   margin-top: -8px;
   left: 10px;
   width: 16px;
   height: 16px;
   background: #999;
 }

 /**
 *	Base: Simple, high-level styles
 */
 /* ---------------------------------------------- *\
     base/headlines
 \* ---------------------------------------------- */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .headline {
   margin-top: 0;
 }

 /* ---------------------------------------------- *\
     Sizes
 \* ---------------------------------------------- */
 .headline--xlarge {
   font-size: 1.3em;
 }

 @media screen and (min-width: 600px) {
   .headline--xlarge {
     font-size: 1.5em;
   }
 }

 @media screen and (min-width: 768px) {
   .headline--xlarge {
     font-size: 1.75em;
   }
 }

 @media screen and (min-width: 1024px) {
   .headline--xlarge {
     font-size: 2.3em;
   }
 }

 @media screen and (min-width: 1200px) {
   .headline--xlarge {
     font-size: 2.75em;
     margin-bottom: 32px;
   }
 }

 .headline--large {
   font-size: 1.6em;
   margin-bottom: 16px;
 }

 .headline--medium {
   font-size: 1.4em;
   margin-bottom: 16px;
 }

 @media screen and (min-width: 768px) {
   .headline--medium {
     font-size: 1.5em;
   }
 }

 @media screen and (min-width: 1024px) {
   .headline--medium {
     font-size: 1.75em;
   }
 }

 @media screen and (min-width: 1200px) {
   .headline--medium {
     font-size: 2em;
     margin-bottom: 24px;
   }
 }

 .headline--base {
   font-size: 1.4em;
 }

 .headline--small {
   font-size: 1em;
 }

 .headline--xsmall {
   font-size: 0.8em;
 }

 /* ---------------------------------------------- *\
     base/lists
 \* ---------------------------------------------- */
 /* ---------------------------------------------- *\
     1. So the numbers or dots line up
 \* ---------------------------------------------- */
 ol,
 ul {
   /*margin-left: 16px;*/ /* [1] */
   margin-bottom: 16px;
 }

 li a {
   color: #000;
   text-decoration: none;
 }

 li a:hover {
   text-decoration: underline;
 }

 /* ---------------------------------------------- *\
     base/page
 \* ---------------------------------------------- */
 /** Clearfix */
 .cf:after {
   display: block;
   content: "";
   height: 0;
   clear: both;
 }

 .main {
   padding: 16px 0;
 }

 @media screen and (min-width: 480px) {
   .main {
     padding: 16px 0;
   }
 }

 @media screen and (min-width: 600px) {
   .main {
     padding: 16px 0;
   }
 }

 @media screen and (min-width: 768px) {
   .main {
     padding: 20px 0;
   }
 }

 @media screen and (min-width: 1024px) {
   .main {
     padding: 24px 0;
   }
 }

 @media screen and (min-width: 1200px) {
   .main {
     padding: 28px 0;
   }
 }

 @media screen and (min-width: 1440px) {
   .main {
     padding: 32px 0;
   }
 }

 .hr-text {
   width: 100%;
   text-align: center;
   border-bottom: 1px solid #dde6e9;
   line-height: 0.1em;
   margin: 10px 0 20px;
   font-style: italic;
   text-transform: uppercase;
 }

 .hr-text span {
   background: #fff;
   padding: 0 10px;
 }

 /* ---------------------------------------------- *\
     base/quotes
 \* ---------------------------------------------- */
 blockquote {
   display: block;
   margin: 16px 0;
   text-align: center;
   color: #555;
   font-weight: 300;
   font-size: 18px;
 }

 @media screen and (min-width: 768px) {
   blockquote {
     font-size: 22px;
   }
 }

 @media screen and (min-width: 1024px) {
   blockquote {
     font-size: 24px;
   }
 }

 @media screen and (min-width: 1200px) {
   blockquote {
     margin: 24px 0;
     font-size: 26px;
   }
 }

 /**
 *	Components: Building blocks
 */
 /* --------------------------------------------- *\
    components/cards
 \* --------------------------------------------- */
 /* --------------------------------------------- *\
    1. Base
 \* --------------------------------------------- */
 .card {
   display: block;
   padding: 16px;
   border: 1px solid #ddd;
   background-color: #fff;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   -ms-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   -o-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
 }

 @media screen and (min-width: 1024px) {
   .card {
     padding: 20px;
   }
 }

 @media screen and (min-width: 1200px) {
   .card {
     padding: 24px;
   }
 }

 .card.is-first {
   margin-top: 0;
 }

 @media print {
   .card {
     border: 0 none;
     padding: 0;
   }
 }

 /* --------------------------------------------- *\
    Sidebar Cards
    - Content (Announcements, Events)
    - My Teams Scorecards
 \* --------------------------------------------- */
 .card--sidebar {
   display: block;
   position: relative;
   margin-bottom: 16px;
   padding: 0;
 }

 @media screen and (min-width: 480px) {
   .card--sidebar {
     margin-bottom: 16px;
   }
 }

 @media screen and (min-width: 600px) {
   .card--sidebar {
     margin-bottom: 16px;
   }
 }

 @media screen and (min-width: 768px) {
   .card--sidebar {
     margin-bottom: 20px;
   }
 }

 @media screen and (min-width: 1024px) {
   .card--sidebar {
     margin-bottom: 24px;
   }
 }

 @media screen and (min-width: 1200px) {
   .card--sidebar {
     margin-bottom: 28px;
   }
 }

 @media screen and (min-width: 1440px) {
   .card--sidebar {
     margin-bottom: 32px;
   }
 }

 /** Game scorecard */
 .card--game {
   padding: 16px;
   margin-bottom: 6px;
 }

 .card--game.is-last {
   margin-bottom: 16px;
 }

 .card--game__sport {
   color: #000;
 }

 .card--game__record {
   color: #777;
   font-weight: 300;
   font-size: 16px;
   margin-left: 4px;
   letter-spacing: 0.5px;
   vertical-align: top;
 }

 .card--game__score {
   display: block;
   padding: 12px;
   background: #efefef;
   margin-bottom: 16px;
 }

 .card--game__next {
   font-size: 12px;
   line-height: 16px;
   color: #444;
 }

 .card.video-channel iframe,
 .krossover-video {
   display: block;
   width: 100%;
   height: 400px;
 }

 @media screen and (min-width: 600px) {
   .card.video-channel iframe,
   .krossover-video {
     height: 500px;
   }
 }

 @media screen and (min-width: 900px) {
   .card.video-channel iframe,
   .krossover-video {
     height: 631px;
   }
 }

 @media screen and (min-width: 1024px) {
   .card.video-channel iframe,
   .krossover-video {
     height: 510px;
   }
 }

 @media screen and (min-width: 1200px) {
   .card.video-channel iframe,
   .krossover-video {
     height: 568px;
   }
 }

 @media screen and (min-width: 1440px) {
   .card.video-channel iframe,
   .krossover-video {
     height: 631px;
   }
 }

 /* --------------------------------------------- *\
    components/forms
 \* --------------------------------------------- */
 /** Error status message at top of form */
 .form-errors {
   display: block;
   margin-bottom: 16px;
   padding: 16px;
   background: rgba(255, 0, 0, 0.7);
   color: white;
   border-radius: 5px;
 }

 .form-field {
   display: block;
   margin-bottom: 16px;
 }

 .form-field.is-last {
   margin-bottom: 0;
 }

 .form-field__file {
   background: #eee;
   padding: 8px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
 }

 /** Error message */
 .form__error {
   display: none;
   font-size: 14px;
   color: red;
   margin-top: 4px;
 }

 /** For checkboxes with labels next to them */
 .form__table td:first-child {
   vertical-align: middle;
   padding-right: 12px;
 }

 .form__table td.top {
   vertical-align: top;
 }

 /* --------------------------------------------- *\
    components/grids
    1. Gutter size
 \* --------------------------------------------- */
 .grid {
   display: block;
   margin-left: -16px; /* [1] */
 }

 @media screen and (min-width: 480px) {
   .grid {
     margin-left: -16px; /* [1] */
   }
 }

 @media screen and (min-width: 600px) {
   .grid {
     margin-left: -16px; /* [1] */
   }
 }

 @media screen and (min-width: 768px) {
   .grid {
     margin-left: -20px; /* [1] */
   }
 }

 @media screen and (min-width: 1024px) {
   .grid {
     margin-left: -24px; /* [1] */
   }
 }

 @media screen and (min-width: 1200px) {
   .grid {
     margin-left: -28px; /* [1] */
   }
 }

 @media screen and (min-width: 1440px) {
   .grid {
     margin-left: -32px; /* [1] */
   }
 }

 .grid__item {
   display: inline-block;
   vertical-align: top;
   padding-left: 16px; /* [1] */
   padding-bottom: 16px;
   width: 100%;
 }

 @media screen and (min-width: 480px) {
   .grid__item {
     padding-left: 16px; /* [1] */
     padding-bottom: 16px;
   }
 }

 @media screen and (min-width: 600px) {
   .grid__item {
     padding-left: 16px; /* [1] */
     padding-bottom: 16px;
   }
 }

 @media screen and (min-width: 768px) {
   .grid__item {
     padding-left: 20px; /* [1] */
     padding-bottom: 20px;
   }
 }

 @media screen and (min-width: 1024px) {
   .grid__item {
     padding-left: 24px; /* [1] */
     padding-bottom: 24px;
   }
 }

 @media screen and (min-width: 1200px) {
   .grid__item {
     padding-left: 28px; /* [1] */
     padding-bottom: 28px;
   }
 }

 @media screen and (min-width: 1440px) {
   .grid__item {
     padding-left: 32px; /* [1] */
     padding-bottom: 32px;
   }
 }

 .grid.no-spacing .grid__item {
   padding-bottom: 0;
 }

 .grid--middle .grid__item {
   vertical-align: middle;
 }

 /** Creates column widths for each screen size. */
 .one-tenth {
   width: 10%;
 }

 .one-eighth {
   width: 12.5%;
 }

 .one-sixth {
   width: 16.6666%;
 }

 .one-fifth {
   width: 20%;
 }

 .one-fourth {
   width: 25%;
 }

 .one-third {
   width: 33.3333%;
 }

 .one-half {
   width: 50%;
 }

 .two-fifths {
   width: 40%;
 }

 .two-thirds {
   width: 66.6666%;
 }

 .three-fifths {
   width: 60%;
 }

 .three-fourths {
   width: 75%;
 }

 .four-fifths {
   width: 80%;
 }

 .five-sixths {
   width: 83.3333%;
 }

 .seven-eighths {
   width: 87.5%;
 }

 .nine-tenths {
   width: 90%;
 }

 .one-whole {
   width: 100%;
 }

 .no-spacing {
   padding-bottom: 0;
 }

 @media screen and (min-width: 480px) {
   .phone-land-one-eighth {
     width: 12.5%;
   }
   .phone-land-one-sixth {
     width: 16.6666%;
   }
   .phone-land-one-fifth {
     width: 20%;
   }
   .phone-land-one-fourth {
     width: 25%;
   }
   .phone-land-one-third {
     width: 33.3333%;
   }
   .phone-land-one-half {
     width: 50%;
   }
   .phone-land-two-fifths {
     width: 40%;
   }
   .phone-land-two-thirds {
     width: 66.6666%;
   }
   .phone-land-three-fifths {
     width: 60%;
   }
   .phone-land-three-fourths {
     width: 75%;
   }
   .phone-land-four-fifths {
     width: 80%;
   }
   .phone-land-five-sixths {
     width: 83.3333%;
   }
   .phone-land-seven-eighths {
     width: 87.5%;
   }
   .phone-land-one-whole {
     width: 100%;
   }
   .phone-land-auto {
     width: auto;
   }
   .phone-land-no-spacing {
     padding-bottom: 0;
   }
 }

 @media screen and (min-width: 600px) {
   .note-one-eighth {
     width: 12.5%;
   }
   .note-one-sixth {
     width: 16.6666%;
   }
   .note-one-fifth {
     width: 20%;
   }
   .note-one-fourth {
     width: 25%;
   }
   .note-one-third {
     width: 33.3333%;
   }
   .note-one-half {
     width: 50%;
   }
   .note-two-fifths {
     width: 40%;
   }
   .note-two-thirds {
     width: 66.6666%;
   }
   .note-three-fifths {
     width: 60%;
   }
   .note-three-fourths {
     width: 75%;
   }
   .note-four-fifths {
     width: 80%;
   }
   .note-five-sixths {
     width: 83.3333%;
   }
   .note-seven-eighths {
     width: 87.5%;
   }
   .note-one-whole {
     width: 100%;
   }
   .note-auto {
     width: auto;
   }
   .note-no-spacing {
     padding-bottom: 0;
   }
 }

 @media screen and (min-width: 768px) {
   .tab-one-eighth {
     width: 12.5%;
   }
   .tab-one-sixth {
     width: 16.6666%;
   }
   .tab-one-fifth {
     width: 20%;
   }
   .tab-one-fourth {
     width: 25%;
   }
   .tab-one-third {
     width: 33.3333%;
   }
   .tab-one-half {
     width: 50%;
   }
   .tab-two-fifths {
     width: 40%;
   }
   .tab-two-thirds {
     width: 66.6666%;
   }
   .tab-three-fifths {
     width: 60%;
   }
   .tab-three-fourths {
     width: 75%;
   }
   .tab-four-fifths {
     width: 80%;
   }
   .tab-five-sixths {
     width: 83.3333%;
   }
   .tab-seven-eighths {
     width: 87.5%;
   }
   .tab-one-whole {
     width: 100%;
   }
   .tab-auto {
     width: auto;
   }
   .tab-no-spacing {
     padding-bottom: 0;
   }
 }

 @media screen and (min-width: 900px) {
   .small-lap-one-eighth {
     width: 12.5%;
   }
   .small-lap-one-sixth {
     width: 16.6666%;
   }
   .small-lap-one-fifth {
     width: 20%;
   }
   .small-lap-one-fourth {
     width: 25%;
   }
   .small-lap-one-third {
     width: 33.3333%;
   }
   .small-lap-one-half {
     width: 50%;
   }
   .small-lap-two-fifths {
     width: 40%;
   }
   .small-lap-two-thirds {
     width: 66.6666%;
   }
   .small-lap-three-fifths {
     width: 60%;
   }
   .small-lap-three-fourths {
     width: 75%;
   }
   .small-lap-four-fifths {
     width: 80%;
   }
   .small-lap-five-sixths {
     width: 83.3333%;
   }
   .small-lap-seven-eighths {
     width: 87.5%;
   }
   .small-lap-one-whole {
     width: 100%;
   }
   .small-lap-auto {
     width: auto;
   }
   .small-lap-no-spacing {
     padding-bottom: 0;
   }
 }

 @media screen and (min-width: 1024px) {
   .lap-one-eighth {
     width: 12.5%;
   }
   .lap-one-sixth {
     width: 16.6666%;
   }
   .lap-one-fifth {
     width: 20%;
   }
   .lap-one-fourth {
     width: 25%;
   }
   .lap-one-third {
     width: 33.3333%;
   }
   .lap-one-half {
     width: 50%;
   }
   .lap-two-fifths {
     width: 40%;
   }
   .lap-two-thirds {
     width: 66.6666%;
   }
   .lap-three-fifths {
     width: 60%;
   }
   .lap-three-fourths {
     width: 75%;
   }
   .lap-four-fifths {
     width: 80%;
   }
   .lap-five-sixths {
     width: 83.3333%;
   }
   .lap-seven-eighths {
     width: 87.5%;
   }
   .lap-one-whole {
     width: 100%;
   }
   .lap-auto {
     width: auto;
   }
   .lap-no-spacing {
     padding-bottom: 0;
   }
 }

 @media screen and (min-width: 1200px) {
   .desk-one-eighth {
     width: 12.5%;
   }
   .desk-one-sixth {
     width: 16.6666%;
   }
   .desk-one-fifth {
     width: 20%;
   }
   .desk-one-fourth {
     width: 25%;
   }
   .desk-one-third {
     width: 33.3333%;
   }
   .desk-one-half {
     width: 50%;
   }
   .desk-two-fifths {
     width: 40%;
   }
   .desk-two-thirds {
     width: 66.6666%;
   }
   .desk-three-fifths {
     width: 60%;
   }
   .desk-three-fourths {
     width: 75%;
   }
   .desk-four-fifths {
     width: 80%;
   }
   .desk-five-sixths {
     width: 83.3333%;
   }
   .desk-seven-eighths {
     width: 87.5%;
   }
   .desk-one-whole {
     width: 100%;
   }
   .desk-auto {
     width: auto;
   }
   .desk-no-spacing {
     padding-bottom: 0;
   }
 }

 @media screen and (min-width: 1440px) {
   .wide-one-eighth {
     width: 12.5%;
   }
   .wide-one-sixth {
     width: 16.6666%;
   }
   .wide-one-fifth {
     width: 20%;
   }
   .wide-one-fourth {
     width: 25%;
   }
   .wide-one-third {
     width: 33.3333%;
   }
   .wide-one-half {
     width: 50%;
   }
   .wide-two-fifths {
     width: 40%;
   }
   .wide-two-thirds {
     width: 66.6666%;
   }
   .wide-three-fifths {
     width: 60%;
   }
   .wide-three-fourths {
     width: 75%;
   }
   .wide-four-fifths {
     width: 80%;
   }
   .wide-five-sixths {
     width: 83.3333%;
   }
   .wide-seven-eighths {
     width: 87.5%;
   }
   .wide-one-whole {
     width: 100%;
   }
   .wide-auto {
     width: auto;
   }
   .wide-no-spacing {
     padding-bottom: 0;
   }
 }

 /* ---------------------------------------------- *\
     components/icons
 \* ---------------------------------------------- */
 i {
   display: inline-block;
   font-style: normal;
   position: relative;
 }

 /* ---------------------------------------------- *\
     Arrows
     - Used for sliders and back buttons
 \* ---------------------------------------------- */
 .arrow {
   width: 10px;
   height: 10px;
   border-right: 0.2em solid #666;
   border-top: 0.2em solid #666;
 }

 .arrow--accent {
   border-color: #ee0000;
 }

 .arrow--white {
   border-color: #fff;
 }

 .arrow--left {
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
   margin-right: 4px;
 }

 /* BTPFS 1918:
    The left arrow has a 4px margin that the right arrow doesn't have, which interferes with consistent behavior for a double arrow.
    This is here to make the left double arrow look like the right one.
 */
 .arrow--left + .arrow--left {
   margin-left: -4px;
   margin-right: 0px;
 }

 .arrow--right {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 /* --------------------------------------------- *\
    components/labels
 \* --------------------------------------------- */
 .label {
   display: inline-block;
   vertical-align: middle;
   font-size: 15px;
   font-weight: bold;
   color: #000;
 }

 /** Sits on top of an input */
 .label--block {
   display: block;
   text-transform: uppercase;
   margin-bottom: 4px;
 }

 .link-no-underline {
   text-decoration: none !important;
 }

 .medium-login-link {
   font-weight: bold !important;
   color: #337ab7 !important;
 }

 .large-login-link {
   font-size: 1.5em !important;
   font-weight: bold !important;
   color: #337ab7 !important;
 }

 .login-td-container {
   padding-top: 17px !important;
   text-align: center !important;
 }

 .login-div-container {
   padding-top: 16px !important;
   padding-bottom: 4px !important;
   text-align: center !important;
 }

 .label--file {
   font-weight: normal;
   color: #444;
 }

 .fontSize-override {
   font-size: 1em !important;
 }

 .marginBottom-override {
   margin-bottom: 2px !important;
 }

 .blueText {
   color: #337ab7 !important;
 }

 /* --------------------------------------------- *\
    components/switches
 \* --------------------------------------------- */
 /* ---------------------------------------------- *\
     Checkboxes
 \* ---------------------------------------------- */
 ._checkbox {
   display: inline-block;
   vertical-align: middle;
   -webkit-appearance: none;
   outline: none;
   width: 24px;
   height: 24px;
   background-color: #fff;
   background-position: center;
   background-repeat: no-repeat;
   background-size: auto 60%;
   border: 1px solid #ddd;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
   border-radius: 2px; /** @checked */
 }

 ._checkbox:checked {
   background-color: #ee0000;
   border-color: #ee0000;
   background-image: url("images/checkbox-icon.png");
 }

 /* --------------------------------------------- *\
    Radios
 \* --------------------------------------------- */
 /** Base */
 ._radio {
   /** @checked */
 }

 /* --------------------------------------------- *\
    components/text-fields
 \* --------------------------------------------- */
 .text-field {
   display: block;
   width: 100%;
   -webkit-appearance: none;
   outline: none;
   border: 1px solid #ddd;
   padding: 8px 12px;
   background-color: #fff;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px; /** @focus */ /** @error 1. Older browsers that don't support calc() */
 }

 .text-field:focus {
   border-color: #ee0000;
 }

 .text-field.is-error {
   border-color: red;
   background-image: url("images/error-icon.png");
   background-repeat: no-repeat;
   background-position: 98% center; /* [1] */
   background-position: calc(100% - 10px) center;
 }

 .text-field.is-error + .form__error {
   display: block;
 }

 /**
  *  Select dropdown
  *  1. Older browsers that don't support calc()
 */
 .text-field--select {
   background-image: url("images/select-icon.png");
   background-repeat: no-repeat;
   background-position: 98% center; /* [1] */
   background-position: calc(100% - 10px) center;
 }

 /** Textarea */
 .text-field--area {
   height: 100px;
   resize: none;
 }

 /**
 *	Objects: Collection of components
 */
 /* --------------------------------------------- *\
    components/accordion
 \* --------------------------------------------- */
 .accordion {
   display: block;
   border-bottom: 1px solid #eee;
 }

 .accordion__header {
   display: block;
   padding: 8px 0;
   cursor: pointer;
 }

 .accordion__content {
   display: none;
   padding: 8px 0 8px 8px;
 }

 /* ---------------------------------------------- *\
     objects/ads
    1. Placeholder Copy - Remove this
 \* ---------------------------------------------- */
 .ad {
   display: block;
   position: relative;
   margin-top: 16px;
   margin-bottom: 16px;
   margin-left: auto;
   margin-right: auto;
   background-color: transparent; /* [1] */
 }

 @media screen and (min-width: 480px) {
   .ad {
     margin-top: 16px;
     margin-bottom: 16px;
   }
 }

 @media screen and (min-width: 600px) {
   .ad {
     margin-top: 16px;
     margin-bottom: 16px;
   }
 }

 @media screen and (min-width: 768px) {
   .ad {
     margin-top: 20px;
     margin-bottom: 20px;
   }
 }

 @media screen and (min-width: 1024px) {
   .ad {
     margin-top: 24px;
     margin-bottom: 24px;
   }
 }

 @media screen and (min-width: 1200px) {
   .ad {
     margin-top: 28px;
     margin-bottom: 28px;
   }
 }

 @media screen and (min-width: 1440px) {
   .ad {
     margin-top: 32px;
     margin-bottom: 32px;
   }
 }

 .ad:after {
   display: block; /*  content: 'AD';*/
   font-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -10px;
   margin-left: -5px;
   color: #fff;
 }

 .ad.is-first {
   margin-top: 0;
 }

 .ad.is-last {
   margin-bottom: 0;
 }

 /** Text that goes in the content slider. ex. "Thank you to our community sponsor" */
 .ad-text {
   text-align: center;
   font-size: 1.1em;
   color: #666;
 }

 /* ---------------------------------------------- *\
     ATF National Unit
     - 728 x 90 Desktop
     - Sticky footer mobile
 \* ---------------------------------------------- */
 .ad--atf {
   display: block;
   position: fixed;
   width: 100%;
   max-width: 728px;
   height: 45px;
   bottom: 0;
   left: 0;
   z-index: 4;
   margin-top: 0;
   margin-bottom: 0;
   background-color: transparent; /* [1] */
 }

 .ad--atf:after {
   content: "";
   margin-left: -75px;
 }

 @media screen and (min-width: 768px) {
   .ad--atf {
     position: relative;
     margin-top: 16px;
     margin-bottom: 16px;
     height: 90px;
   }
 }

 @media screen and (min-width: 1024px) {
   .ad--atf {
     margin-top: 32px;
     margin-bottom: 32px;
   }
 }

 /* ---------------------------------------------- *\
    Responsive National ATF Class
 \* ---------------------------------------------- */
 .ad--atf-National {
   display: none !important;
   position: fixed;
   width: 100%;
   max-width: 728px;
   height: 45px;
   bottom: 0;
   left: 0;
   z-index: 4;
   margin-top: 0;
   margin-bottom: 0;
   background-color: transparent; /* [1] */
 }

 .ad--atf-National:after {
   content: "";
   margin-left: -75px;
 }

 @media screen and (min-width: 480px) {
   .ad--atf-National .ad--atf-National {
     display: block !important;
     position: fixed;
     width: 100%;
     height: 50px;
     bottom: 0;
     left: 0;
     z-index: 4;
     margin-top: 0;
     margin-bottom: 65px;
     background-color: transparent;
     text-align: center;
   }
 }

 @media screen and (min-width: 768px) {
   .ad--atf-National {
     display: block !important;
     position: relative;
     margin-top: 16px;
     margin-bottom: 16px;
     height: 90px;
   }
 }

 @media screen and (min-width: 1024px) {
   .ad--atf-National {
     display: block !important;
     margin-top: 32px;
     margin-bottom: 32px;
   }
 }

 .ad--atf-Local_mobile {
   display: none !important;
   width: 100%;
   max-width: 480px;
 }

 @media screen and (max-width: 480px) {
   .ad--atf-Local_mobile {
     display: block !important;
   }
 }

 /** bottom banner*/
 .ad--atf-National-bottom {
   display: block;
   position: fixed;
   width: 100%;
   max-width: 728px;
   height: 70px;
   bottom: 68px;
   left: 0;
   z-index: 4;
   margin-top: 0;
   margin-bottom: 0;
   background-color: transparent; /* [1] */
 }

 .ad--atf-National-bottom:after {
   content: "";
   margin-left: -75px;
 }

 @media screen and (max-width: 767px) {
   display: none !important;
 }

 @media screen and (min-width: 768px) {
   .ad--atf-National-bottom {
     position: relative;
     margin-top: 16px;
     margin-bottom: 16px;
     bottom: 0;
     height: 90px;
   }
 }

 @media screen and (min-width: 992px) {
   .ad--atf-National-bottom {
     margin-top: 32px;
     margin-bottom: 32px;
   }
 }

 /* ---------------------------------------------- *\
    - Sticky Footer Mobile
     - Adhesion
 \* ---------------------------------------------- */
 .bt_mobile_advert {
   position: fixed !important;
   left: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
   display: block !important;
   text-align: center !important;
   width: 100% !important;
   height: 50px !important;
   margin: 0 auto 53px !important;
 }

 @media screen and (min-width: 480px) {
   .bt_mobile_advert {
     display: none !important;
   }
 }

 @media screen and (min-width: 768px) {
   .bt_mobile_advert {
     display: none !important;
   }
 }

 @media screen and (min-width: 1024px) {
   .bt_mobile_advert {
     display: none !important;
   }
 }

 /* ---------------------------------------------- *\
     Newsfeed National Unit And Mobile
     - 728 x 90 Desktop
     - 300 x 250 Mobile
    - 468 x 60 Other
 \* ---------------------------------------------- */
 .ad--newsfeedAll {
   display: block;
   background-color: transparent;
   text-align: center;
 }

 @media screen and (min-width: 321px) and (max-width: 496px) {
   .ad--newsfeedAll {
     display: block;
     height: 250px;
     margin-bottom: 15px;
   }
 }

 @media screen and (min-width: 497px) and (max-width: 767px) {
   .ad--newsfeedAll {
     display: block;
     height: 60px;
     margin-bottom: 15px;
   }
 }

 @media screen and (min-width: 768px) and (max-width: 991px) {
   .ad--newsfeedAll {
     display: block;
     height: 90px;
     overflow: hidden;
     margin-bottom: 15px;
   }
 }

 @media screen and (min-width: 992px) and (max-width: 1023px) {
   .ad--newsfeedAll {
     display: block;
     height: 90px;
     margin-bottom: 15px;
     overflow: hidden;
   }
 }

 @media screen and (min-width: 1024px) and (max-width: 1199px) {
   .ad--newsfeedAll {
     display: block;
     height: 90px;
     margin-bottom: 30px;
     overflow: hidden;
   }
 }

 @media screen and (min-width: 1200px) and (max-width: 1439px) {
   .ad--newsfeedAll {
     display: block;
     height: 90px;
     margin-bottom: 30px;
   }
 }

 /* ---------------------------------------------- *\
     Newsfeed National Unit
     - 728 x 90 Desktop
     - Hidden on mobile
 \* ---------------------------------------------- */
 .ad--newsfeed {
   display: none;
   max-width: 728px;
   background-color: transparent; /* [1] */
 }

 .ad--newsfeed:after {
   content: "";
   margin-left: -85px;
 }

 @media screen and (min-width: 768px) {
   .ad--newsfeed {
     display: block;
     height: 90px;
   }
 }

 @media screen and (max-width: 767px) {
   .ad--newsfeed {
     display: none !important;
   }
 }

 @media screen and (min-width: 768px) and (max-width: 991px) {
   .ad--newsfeed {
     margin-left: -21px !important;
   }
 }

 @media screen and (min-width: 1024px) and (max-width: 1199px) {
   .ad--newsfeed {
     display: none !important;
   }
 }

 @media screen and (min-width: 1200px) and (max-width: 1439px) {
   .ad--newsfeed {
     display: block;
     height: 90px;
     margin-left: -14px !important;
   }
 }

 .ad-text {
   display: none;
 }

 @media screen and (min-width: 768px) {
   .ad-text {
     display: block;
   }
 }

 /* ---------------------------------------------- *\
     Newsfeed National Unit
     - 728 x 90 Desktop
    - 300 x 250 Mobile
    - 468 x 60 Other
 \* ---------------------------------------------- */
 .ad--belownewsfeed {
   display: block;
   max-width: 767px;
   background-color: transparent;
   text-align: center; /* [1] */
 }

 .ad--belownewsfeed:after {
   content: "";
   margin-left: -85px;
 }

 @media screen and (min-width: 50px) {
   .ad--belownewsfeed {
     display: block;
     height: 90px;
   }
 }

 @media screen and (min-width: 768px) {
   .ad--belownewsfeed {
     display: none !important;
   }
 }

 @media screen and (min-width: 321px) and (max-width: 496px) {
   .ad--belownewsfeed {
     display: block;
     height: 250px;
     margin-bottom: 15px;
   }
 }

 @media screen and (min-width: 497px) and (max-width: 767px) {
   .ad--belownewsfeed {
     display: block;
     height: 60px;
     margin-bottom: 15px;
   }
 }

 .ad-belowtext {
   display: none;
 }

 /* ---------------------------------------------- *\
     Right Rail National Unit
     - 300 x 250 Desktop
 \* ---------------------------------------------- */
 .ad--rightrail {
   display: none;
   width: 300px;
   height: 250px;
   background-color: transparent; /* [1] */
 }

 .ad--rightrail:after {
   content: "";
   margin-left: -75px;
 }

 @media screen and (min-width: 480px) {
   .ad--rightrail {
     display: none !important;
   }
 }

 @media screen and (min-width: 768px) {
   .ad--rightrail {
     display: block !important;
   }
 }

 @media screen and (min-width: 1024px) {
   .ad--rightrail {
     display: block !important;
   }
 }

 /* ---------------------------------------------- *\
     Mobile Right Rail National Unit
     - Mobile
 \* ---------------------------------------------- */
 .ad--rightrail--mobile {
   display: block;
   height: 250px;
   background-color: transparent;
   text-align: center !important; /* [1] */
 }

 .ad--rightrail--mobile:after {
   content: "";
 }

 @media screen and (min-width: 480px) {
   .ad--rightrail--mobile {
     display: block !important;
     text-align: center !important;
   }
 }

 @media screen and (min-width: 768px) {
   .ad--rightrail--mobile {
     display: none !important;
   }
 }

 @media screen and (min-width: 1024px) {
   .ad--rightrail--mobile {
     display: none !important;
   }
 }

 .ad--rightrail--mobile--bottom {
   display: block;
   height: 250px;
   background-color: transparent;
   text-align: center !important;
   margin-top: 20px; /* [1] */
 }

 .ad--rightrail--mobile--bottom:after {
   content: "";
 }

 @media screen and (min-width: 480px) {
   .ad--rightrail--mobile--bottom {
     display: block !important;
     text-align: center !important;
     margin-top: 20px;
   }
 }

 @media screen and (min-width: 768px) {
   .ad--rightrail--mobile--bottom {
     display: none !important;
   }
 }

 @media screen and (min-width: 1024px) {
   .ad--rightrail--mobile--bottom {
     display: none !important;
   }
 }

 /* ---------------------------------------------- *\
     Portrait Ad
    - 300 x 600 Desktop
    - Hidden on mobile
 \* ---------------------------------------------- */
 .ad--portrait {
   display: block;
   width: 300px;
   height: 600px;
   background-color: transparent; /* [1] */
 }

 .ad--portrait:after {
   content: "";
   margin-left: -75px;
 }

 .rightrail--top--image {
   display: block;
   position: relative;
   margin-top: 16px;
   margin-bottom: 16px;
   margin-left: auto;
   margin-right: auto;
   background-color: transparent;
   text-align: center; /* [1] */
 }

 @media screen and (min-width: 480px) {
   .rightrail--top--image {
     margin-top: 16px;
     margin-bottom: 16px;
   }
 }

 @media screen and (min-width: 600px) {
   .rightrail--top--image {
     margin-top: 16px;
     margin-bottom: 16px;
   }
 }

 @media screen and (min-width: 768px) {
   .rightrail--top--image {
     margin-top: 20px;
     margin-bottom: 20px;
   }
 }

 @media screen and (min-width: 1024px) {
   .rightrail--top--image {
     margin-top: 24px;
     margin-bottom: 24px;
   }
 }

 @media screen and (min-width: 1200px) {
   .rightrail--top--image {
     margin-top: 28px;
     margin-bottom: 28px;
   }
 }

 @media screen and (min-width: 1440px) {
   .rightrail--top--image {
     margin-top: 32px;
     margin-bottom: 32px;
   }
 }

 .rightrail--top--image:after {
   display: block;
   font-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -10px;
   margin-left: -5px;
   color: #fff;
 }

 /* --------------------------------------------- *\
    components/albums
    1. Placeholder - Remove this
 \* --------------------------------------------- */
 .album {
   display: block;
   padding: 0;
   text-decoration: none;
   margin-bottom: 15px;
 }

 .album:hover {
   -webkit-box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.1);
   -ms-box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.1);
   -o-box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.1);
 }

 .album__photo {
   display: block;
   height: 100px;
   background-position: center center;
   background-size: cover;
 }

 @media screen and (min-width: 480px) {
   .album__photo {
     height: 150px;
   }
 }

 @media screen and (min-width: 1440px) {
   .album__photo {
     height: 200px;
   }
 }

 .album__info {
   padding: 16px;
   text-align: center;
 }

 .album__name {
   display: block;
   font-size: 17px;
   margin-bottom: 0;
   color: #000;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .album__description {
   display: block;
   font-size: 14px;
   margin-bottom: 0;
   color: #000;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .album__date {
   font-size: 13px;
   line-height: 18px;
   margin-bottom: 4px;
   text-transform: uppercase;
   color: #888;
   letter-spacing: 0.2px;
 }

 /* --------------------------------------------- Create an Album Card ---------------------------------------------- */
 .album--create {
   height: 173px;
   padding-top: 45px;
   background: transparent;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -ms-box-shadow: none;
   -o-box-shadow: none;
   box-shadow: none;
   border: 2px dashed #a4a4a4;
   text-align: center;
 }

 @media screen and (min-width: 480px) {
   .album--create {
     height: 223px;
     padding-top: 70px;
   }
 }

 @media screen and (min-width: 768px) {
   .album--create {
     padding-top: 50px;
   }
 }

 @media screen and (min-width: 1440px) {
   .album--create {
     height: 272px;
     padding-top: 65px;
   }
 }

 .album--create:hover {
   background-color: #fff;
   border: none;
 }

 .album--create__icon {
   display: block;
   height: 50px;
   background: url("images/create-album-icon.png") center/47px auto no-repeat;
 }

 @media screen and (min-width: 768px) {
   .album--create__icon {
     height: 100px;
     background-size: 93px auto;
   }
 }

 .album--create__text {
   font-size: 16px;
   color: #a4a4a4;
   font-weight: 600;
 }

 @media screen and (min-width: 768px) {
   .album--create__text {
     font-size: 18px;
   }
 }

 /* ---------------------------------------------- *\
     Album Page
 \* ---------------------------------------------- */
 .album__headline {
   margin-bottom: 0;
 }

 .album__num-photos {
   color: #555;
   text-transform: uppercase;
 }

 /* ---------------------------------------------- *\
     My Album
    1. Center aligns with actions
    2. Edge of screen on mobile
 \* ---------------------------------------------- */
 .album__subheader {
   display: block;
   margin-bottom: 8px;
 }

 @media screen and (min-width: 768px) {
   .album__subheader {
     margin-bottom: 16px;
   }
 }

 .album__subheader .breadcrumbs__item,
 .album__subheader .headline {
   line-height: 48px; /* [1] */
 }

 .album-controls {
   float: right;
   margin-right: -8px; /* [2] */
 }

 @media screen and (min-width: 768px) {
   .album-controls {
     margin-right: 0;
   }
 }

 .album-controls__item {
   width: 48px;
   height: 48px;
   padding: 0;
   border: none; /* Icon */ /* Button text */
 }

 @media screen and (min-width: 768px) {
   .album-controls__item {
     width: auto;
     padding: 12px 16px 12px 48px;
     border: 1px solid #ddd;
     border-bottom-width: 2px;
     margin-left: 8px;
   }
 }

 .album-controls__item:before {
   width: 24px;
   height: 24px;
   left: 12px;
   margin-top: -12px;
 }

 .album-controls__item span {
   display: none;
 }

 @media screen and (min-width: 768px) {
   .album-controls__item span {
     display: block;
   }
 }

 /* Edit Button */
 .album-controls__item--edit:before {
   background: url("images/edit-icon.png") center/24px auto no-repeat;
 }

 @media screen and (min-width: 768px) {
   .album-controls__item--edit:before {
     background-size: 16px auto;
   }
 }

 /* Cancel Button */
 .album-controls__item--cancel:before {
   background: url("images/close-dark-icon.png") center/auto 20px no-repeat;
 }

 /* Upload Button */
 .album-controls__item--upload {
   border: none;
 }

 .album-controls__item--upload:before {
   background: url("images/upload-icon.png") center/24px auto no-repeat;
 }

 /* Delete Button */
 .album-controls__item--delete {
   border: none;
 }

 .album-controls__item--delete:before {
   background: url("images/delete-icon.png") center/auto 20px no-repeat;
 }

 /* ---------------------------------------------- *\
     objects/article
 \* ---------------------------------------------- */
 @media screen and (min-width: 768px) {
   .article {
     padding-top: 64px;
   }
   .article .breadcrumbs {
     padding-top: 0;
     margin-top: 32px;
   }
 }

 @media screen and (min-width: 1024px) {
   .article {
     padding-top: 0;
   }
 }

 .article__more {
   display: block;
   margin: 16px 0;
   text-align: center;
 }

 .article__more p {
   margin-bottom: 16px;
 }

 /* ---------------------------------------------- *\
     objects/article-feed
     Feed in the sidebar.
 \* ---------------------------------------------- */
 .article-feed {
   padding: 0;
 }

 .article-feed .sidebar__headline {
   margin: 0;
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
   -ms-border-radius: 4px 4px 0 0;
   -o-border-radius: 4px 4px 0 0;
   border-radius: 4px 4px 0 0;
 }

 .article-feed__item {
   display: block;
   padding: 16px;
   border-bottom: 1px solid #eee;
 }

 .article-feed__item .grid {
   margin-left: -8px;
 }

 .article-feed__item .grid__item {
   padding-bottom: 0;
   padding-left: 12px;
 }

 /** Thumbnail */
 .article-feed__media {
   height: 75px;
   background-color: #8d207f;
 }

 @media screen and (min-width: 1440px) {
   .article-feed__media {
     height: 60px;
   }
 }

 /* --------------------------------------------- *\
    objects/breadcrumbs
 \* --------------------------------------------- */
 .breadcrumb {
   margin-left: 0;
 }

 .breadcrumbs {
   margin: 48px 0 32px;
   padding-top: 32px;
 }

 @media screen and (min-width: 768px) {
   .breadcrumbs {
     padding-top: 64px;
   }
 }

 @media screen and (min-width: 1024px) {
   .breadcrumbs {
     padding-top: 0;
   }
 }

 .breadcrumbs__item {
   color: #666;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: 600;
 }

 @media screen and (min-width: 1024px) {
   .breadcrumbs__item {
     font-size: 17px;
   }
 }

 /* --------------------------------------------- *\
     components/calendar
 \* --------------------------------------------- */
 /* ---------------------------------------------- *\
    Calendar Panel
    - This will slide in fullscreen on mobile and
    become a dropdown on tablet.
 \* ---------------------------------------------- */
 .calendar-panel {
   display: block;
   position: fixed;
   z-index: 10;
   width: 100%;
   height: 100%;
   background-color: #fff; /* Mobile */ /* Tablet & Up */
 }

 @media screen and (max-width: 767px) {
   .calendar-panel {
     top: 0 !important;
     left: 0 !important;
     transform: translateX(100%);
     -webkit-transform: translateX(100%);
     -webkit-transition: all 0.2s ease-in 0s;
     -moz-transition: all 0.2s ease-in 0s;
     -ms-transition: all 0.2s ease-in 0s;
     -o-transition: all 0.2s ease-in 0s;
     transition: all 0.2s ease-in 0s;
   }
   .calendar-panel.is-open {
     transform: translateX(0);
     -webkit-transform: translateX(0);
   }
 }

 @media screen and (min-width: 768px) {
   .calendar-panel {
     display: none;
     position: absolute;
     width: 300px;
     height: auto;
     max-height: 325px;
     border: 1px solid #ddd;
     -webkit-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);
     -ms-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     border-radius: 5px;
   }
   .calendar-panel.is-open {
     display: block;
   }
 }

 .calendar-panel__header {
   display: block;
   height: 48px;
   background-color: #000000;
 }

 @media screen and (min-width: 768px) {
   .calendar-panel__header {
     -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
     -ms-border-radius: 4px 4px 0 0;
     -o-border-radius: 4px 4px 0 0;
     border-radius: 4px 4px 0 0;
   }
 }

 /** Back button for mobile panel */
 .calendar-panel__back {
   display: inline-block;
   width: 48px;
   height: 48px;
   padding: 10px;
   text-align: center;
 }

 @media screen and (min-width: 768px) {
   .calendar-panel__back {
     display: none;
   }
 }

 /** Close button for desktop panel */
 .calendar-panel__close {
   display: none;
   float: right;
   width: 48px;
   height: 48px;
   background: url("/img/menu-close-icon.png") center/16px 16px no-repeat;
 }

 @media screen and (min-width: 768px) {
   .calendar-panel__close {
     display: block;
   }
 }

 .calendar-panel__day {
   display: inline-block;
   vertical-align: middle;
   color: #fff;
   font-weight: 600;
   font-size: 17px;
   line-height: 48px;
 }

 @media screen and (min-width: 768px) {
   .calendar-panel__day {
     padding-left: 16px;
   }
 }

 /** Content portion will show up to 3 items than will scroll. 1. Older browsers don't support calc() */
 .calendar-panel__content {
   display: block;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   height: 95%; /* [1] */
   height: calc(100% - 48px);
 }

 .calendar-panel__content .sidebar-list li:last-child {
   border-bottom: 1px solid #eee;
 }

 /* ---------------------------------------------- *\
     Calendar Sidebar
 \* ---------------------------------------------- */
 .calendar-sidebar {
   padding-top: 8px;
 }

 @media screen and (min-width: 768px) {
   .calendar-sidebar {
     padding-top: 12px;
   }
 }

 @media screen and (min-width: 1024px) {
   .calendar-sidebar {
     padding-top: 64px;
   }
 }

 /* --------------------------------------------- *\
    Header
 \* --------------------------------------------- */
 .calendar-top {
   margin-bottom: 16px;
 }

 @media screen and (min-width: 600px) {
   .calendar-top {
     text-align: left;
   }
 }

 .calendar-top__prev,
 .calendar-top__next {
   display: inline-block;
   vertical-align: middle;
   width: 30px;
   height: 40px;
   padding: 8px 3px;
   text-align: center;
   cursor: pointer;
 }

 .calendar-top__prev .arrow,
 .calendar-top__next .arrow {
   border-color: #999;
 }

 .calendar-top__prev:hover .arrow,
 .calendar-top__next:hover .arrow {
   border-color: #333;
 }

 .calendar-top__title {
   vertical-align: middle;
   font-size: 17px;
   font-weight: 600;
 }

 @media screen and (min-width: 600px) {
   .calendar-top__title {
     font-size: 18px;
   }
 }

 @media screen and (min-width: 768px) {
   .calendar-top__title {
     font-size: 22px;
     margin: 0 16px;
   }
 }

 @media screen and (min-width: 1024px) {
   .calendar-top__title {
     font-size: 28px;
   }
 }

 .calendar-top__today {
   display: none;
 }

 @media screen and (min-width: 600px) {
   .calendar-top__today {
     display: block;
     float: right;
   }
 }

 @media screen and (min-width: 600px) {
   .calendar-top__filter {
     display: block;
     float: right;
   }
 }

 /* --------------------------------------------- *\
    Body
    1. 1/7th for seven days
 \* --------------------------------------------- */
 .calendar {
   width: 100%;
 }

 .calendar__header {
   text-align: center;
   border-bottom: 1px solid #000;
 }

 .calendar__header td {
   text-transform: uppercase;
   color: #000;
   font-weight: 600;
   font-size: 17px;
   padding: 8px 0;
 }

 .calendar__week {
   text-align: right;
 }

 .calendar__day {
   background-color: #fff;
   width: 14.2857%; /* [1] */
   height: 55px;
   padding: 4px;
   vertical-align: top;
   border: 2px solid #f2f2f2;
   color: #000;
 }

 @media screen and (min-width: 600px) {
   .calendar__day {
     height: 75px;
     padding: 8px;
   }
 }

 @media screen and (min-width: 768px) {
   .calendar__day {
     height: 125px;
     padding: 12px;
   }
 }

 .calendar__day:hover {
   background-color: #f5f5f5;
   cursor: pointer;
 }

 /** Overflow days from prev and next months */
 .calendar__day.is-disabled {
   background-color: #e5e5e5;
   color: #999;
 }

 /** Current day */
 .calendar__day.is-selected {
   background-color: #ee0000;
   color: #fff;
 }

 .calendar__day.has-event {
   position: relative;
 }

 .calendar__date {
   font-size: 16px;
   line-height: 1;
 }

 @media screen and (min-width: 600px) {
   .calendar__date {
     font-size: 18px;
   }
 }

 @media screen and (min-width: 768px) {
   .calendar__date {
     font-size: 20px;
   }
 }

 /** Circle with number of events in it. 1. Adds 'events' text on tablet & up. */
 .calendar__marker {
   display: none;
   position: absolute;
   content: "";
   width: 26px;
   height: 26px;
   top: 22px;
   left: 50%;
   margin-left: -12px;
   background-color: #fff;
   text-align: center;
   font-weight: 600;
   color: #000;
   font-size: 13px;
   border: 2px solid #ee0000;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
 }

 @media screen and (min-width: 600px) {
   .calendar__marker {
     width: 28px;
     height: 28px;
     font-size: 14px;
     top: 30px;
   }
 }

 @media screen and (min-width: 768px) {
   .calendar__marker {
     width: 30px;
     height: 30px;
     left: 50%;
     margin-left: -40px;
     margin-top: 20px; /* [1] */
   }
   .calendar__marker:after {
     display: block;
     position: absolute;
     content: " events";
     top: 0;
     left: 36px;
   }
 }

 .calendar__marker_one {
   display: none;
   position: absolute;
   content: "";
   width: 26px;
   height: 26px;
   top: 22px;
   left: 50%;
   margin-left: -12px;
   background-color: #fff;
   text-align: center;
   font-weight: 600;
   color: #000;
   font-size: 13px;
   border: 2px solid #ee0000;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
 }

 @media screen and (min-width: 600px) {
   .calendar__marker_one {
     width: 28px;
     height: 28px;
     font-size: 14px;
     top: 30px;
   }
 }

 @media screen and (min-width: 768px) {
   .calendar__marker_one {
     width: 30px;
     height: 30px;
     left: 50%;
     margin-left: -40px;
     margin-top: 20px; /* [1] */
   }
   .calendar__marker_one:after {
     display: block;
     position: absolute;
     content: " event";
     top: 0;
     left: 36px;
   }
 }

 .calendar__day.has-event .calendar__marker {
   display: block;
 }

 .calendar__day.has-event .calendar__marker_one {
   display: block;
 }

 /* --------------------------------------------- *\
    Week View
 \* --------------------------------------------- */
 .calendar-top__day {
   float: right;
   text-align: center;
   font-size: 18px;
 }

 .calendar-top__day .calendar-top__prev,
 .calendar-top__day .calendar-top__next {
   width: 24px;
   height: 24px;
 }

 .calendar-top__day span {
   margin: 0 32px;
 }

 /** Non-Sports Events, Sports Events */
 .calendar__subheadline {
   color: #666;
   margin-top: 24px;
   margin-bottom: 16px;
   font-size: 16px;
 }

 @media screen and (min-width: 768px) {
   .calendar__subheadline {
     font-size: 18px;
     margin-top: 32px;
   }
 }

 @media screen and (min-width: 1024px) {
   .calendar__subheadline {
     font-size: 22px;
   }
 }

 @media screen and (min-width: 1200px) {
   .calendar__subheadline {
     font-size: 24px;
   }
 }

 .calendar__table {
   margin-bottom: 32px;
 }

 .calendar-key {
   display: block;
   text-align: center;
   margin: 32px 0;
 }

 .calendar-key__item {
   display: inline-block;
   vertical-align: top;
   font-size: 13px;
   color: #000;
   margin-right: 32px;
 }

 /* CAL VIEWS */
 .month-controls {
   display: block;
   margin: 0 0 20px;
   width: 100%;
   text-align: center;
   border-bottom: 1px solid #ddd;
 }

 .calendar-top__title {
   display: inline-block;
 }

 .calendar-top__view-controls {
   float: left;
   padding-bottom: 5px;
   padding-right: 10px;
 }

 .calendar-top__view-controls .btn-default.active {
   color: #fff;
   font-weight: normal;
   background: #f80000;
   -webkit-box-shadow: none;
   box-shadow: none;
 }

 .clr {
   clear: both;
   margin: 0;
   padding: 0;
   font-size: 0;
   height: 0;
   line-height: 0;
 }

 .calendar-top__keys {
   clear: both;
   margin: 10px 0;
   padding: 10px 0 0;
   width: 100%;
   font-size: 14px;
   color: #666;
 }

 .calendar-top__keys .calendar-top__keys-item {
   display: inline-block;
   padding: 0 5px;
 }

 .keyIcons a:hover {
   text-decoration: none;
 }

 .keyIcons .fa-home,
 .keyIcons .calendar__day-view__single .event.home,
 .keyIcons .calendar__day-view .event.home,
 .keyIcons .sidebar-list .event.home {
   color: #005ea6;
 }

 .keyIcons .fa-bus,
 .keyIcons .calendar__day-view__single .event.away,
 .keyIcons .calendar__day-view .event.away,
 .keyIcons .sidebar-list .event.away {
   color: #f38300;
 }

 .keyIcons .fa-clock-o,
 .keyIcons .calendar__day-view__single .event.practice,
 .keyIcons .calendar__day-view .event.practice,
 .keyIcons .sidebar-list .event.practice {
   color: #060;
 }

 .keyIcons .fa-graduation-cap,
 .keyIcons .calendar__day-view__single .event.school,
 .keyIcons .calendar__day-view .event.school,
 .keyIcons .sidebar-list .event.school {
   color: #7d0707;
 }

 .keyIcons .fa-circle-o,
 .keyIcons .calendar__day-view__single .event.other,
 .keyIcons .calendar__day-view .event.other,
 .keyIcons .sidebar-list .event.other {
   color: #660066;
 }

 .keyIcons .fa-star,
 .keyIcons .calendar__day-view__single .event.scrimmage,
 .keyIcons .calendar__day-view .event.scrimmage,
 .keyIcons .sidebar-list .event.scrimmage {
   color: gray;
 }

 .keyIcons .fa-bullhorn,
 .keyIcons .calendar__day-view__single .event.try-outs,
 .keyIcons .calendar__day-view .event.try-outs,
 .keyIcons .sidebar-list .event.try-outs {
   color: #d8c21c;
 }

 .keyIcons .fa-history,
 .keyIcons .calendar__day-view__single .event.postponed,
 .keyIcons .calendar__day-view .event.postponed,
 .keyIcons .sidebar-list .event.postponed {
   color: #f80000;
 }

 .keyIcons .fa-exclamation-triangle,
 .keyIcons .calendar__day-view__single .event.cancelled,
 .keyIcons .calendar__day-view .event.cancelled,
 .keyIcons .sidebar-list .event.cancelled {
   color: #f80000;
 }

 .calendar__day-view__single {
   font-size: 16px;
 }

 .col-md-2.calendar__day-view__single {
   padding: 0 0 0 10px;
   width: 20%;
 }

 .calendar__day-view__single .panel {
   min-height: 400px;
 }

 .calendar__day-view__single .panel-default > .panel-heading {
   font-size: 18px;
   text-align: center;
   text-transform: uppercase;
   background: #fff;
 }

 .calendar__day-view__single .event {
   cursor: pointer;
   display: block;
   width: 100%;
   padding: 10px 0;
   font-size: 14px;
   line-height: 1.25;
   border-bottom: 1px solid #ddd;
 }

 .calendar__day-view__single .event:last-child {
   border: none;
 }

 @media only screen and (max-width: 991px) {
   .col-sm-12.calendar__day-view__single {
     padding: 0 10px;
     width: 100%;
   }
   .calendar__day-view__single .panel {
     min-height: 1px;
   }
 }

 .calendar__day-view {
   font-size: 16px;
 }

 .calendar__day-view .event {
   cursor: pointer;
   display: block;
   width: 100%;
   margin: 0 0 10px;
 }

 .js-calendar-panel-list .event {
   cursor: pointer;
 }

 .calendar__day-view .event:last-child {
   margin: 0;
 }

 .calendar__day-view th {
   width: 95px;
 }

 .calendar__day-view .noTime {
   background-color: #e5e5e5;
 }

 .calendar__login_button {
   padding-top: 15px;
 }

 .calendar__body_text {
   line-height: 1;
   margin-bottom: 5px;
 }

 /* --------------------------------------------- modules/content-slider ---------------------------------------------- */
 .content-slider {
   display: block;
   position: relative;
   overflow: hidden;
   height: 178px;
 }

 .content-slider:hover .content-slider__prev,
 .content-slider:hover .content-slider__next {
   display: block;
 }

 @media screen and (min-width: 480px) {
   .content-slider {
     height: 256px;
   }
 }

 @media screen and (min-width: 600px) {
   .content-slider {
     height: 337px;
   }
 }

 @media screen and (min-width: 768px) {
   .content-slider {
     height: 457px;
   }
 }

 @media screen and (min-width: 1024px) {
   .content-slider {
     height: 400px;
   }
 }

 @media screen and (min-width: 1440px) {
   .content-slider {
     height: 510px;
   }
 }

 /* --------------------------------------------- Controls ---------------------------------------------- */
 .content-slider__prev,
 .content-slider__next {
   display: none;
   position: absolute;
   top: 50%;
   z-index: 1;
   background-color: rgba(0, 0, 0, 0.7);
   cursor: pointer;
   width: 20px;
   height: 28px;
   margin: -14px 0px;
   padding: 0px;
   text-align: center;
   -webkit-transition: background 0.1s ease-in 0s;
   -moz-transition: background 0.1s ease-in 0s;
   -ms-transition: background 0.1s ease-in 0s;
   -o-transition: background 0.1s ease-in 0s;
   transition: background 0.1s ease-in 0s;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
 }

 @media screen and (min-width: 480px) {
   .content-slider__prev,
   .content-slider__next {
     width: 50px;
     height: 60px;
     margin: -31px 0px;
     padding: 16px 20px;
   }
 }

 .content-slider__prev:hover,
 .content-slider__next:hover {
   background-color: #222;
 }

 .content-slider__prev {
   left: 0;
 }

 .content-slider__next {
   right: 0;
 }

 .content-slider__dots {
   display: block;
   position: absolute;
   bottom: 20px;
   left: 0;
   width: 100%;
   text-align: center;
   z-index: 1;
 }

 .content-slider__dot {
   display: inline-block;
   vertical-align: middle;
   width: 24px;
   height: 24px;
   background-color: #19191b;
   border: 4px solid #fff;
   cursor: pointer;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
 }

 .content-slider__dot.is-active {
   background-color: #ee0000;
 }

 /* ---------------------------------------------- *\
     Slides
     1. Placeholder - Remove this
 \* ---------------------------------------------- */
 .content-slider__container {
   display: block;
   height: inherit;
   position: relative;
 }

 .content-slider__item {
   display: block;
   float: left;
   position: absolute;
   top: 0px;
   bottom: 0px;
   width: 100%;
   height: inherit;
   z-index: 1;
   background: #ffffff;
   transition: left 0.5s;
 }

 .content-slider__item.is-previous {
   transition: left 0.5s !important;
 }

 .content-slider__item.left {
   left: -100%;
   transition: left 0s;
 }

 .content-slider__item.right {
   left: 100%;
   transition: left 0s;
 }

 .content-slider__item.is-current {
   left: 0%;
   transition: left 0.5s;
 }

 .content-slider__item:first-child {
   z-index: 2;
 }

 .content-slider__item .feed__header {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   height: auto;
   background: rgba(0, 0, 0, 0.5);
   color: #ffffff;
   z-index: 2;
   margin-bottom: 0px;
   padding: 10px 20px;
   text-shadow: 1px 1px 2px #000000;
   opacity: 0;
   transition: opacity 0.25s;
 }

 .content-slider__item.is-current .feed__header {
   opacity: 1;
   transition: opacity 0.5s 0.25s;
 }

 .content-slider__item .feed__header.empty {
   display: none !important;
 }

 .content-slider__item .feed__header * {
   color: #ffffff;
 }

 .content-slider__image {
   position: absolute;
   z-index: 1;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center top;
   background-color: black;
   display: block;
   height: inherit;
 }

 .content-slider__item .headline--xlarge {
   margin-bottom: 0px;
   font-size: 0.95em;
 }

 @media screen and (min-width: 480px) {
   .content-slider__item .headline--xlarge {
     font-size: 1.38em;
   }
 }

 @media screen and (min-width: 600px) {
   .content-slider__item .headline--xlarge {
     font-size: 1.82em;
   }
 }

 @media screen and (min-width: 768px) {
   .content-slider__item .headline--xlarge {
     font-size: 2.46em;
   }
 }

 @media screen and (min-width: 1024px) {
   .content-slider__item .headline--xlarge {
     font-size: 2.15em;
   }
 }

 @media screen and (min-width: 1200px) {
   .content-slider__item .headline--xlarge {
     font-size: 2.75em;
   }
 }

 .content-slider__item .feed__subtitle {
   display: block;
   font-size: 10px;
   line-height: 12px;
   text-align: justify;
 }

 @media screen and (min-width: 600px) {
   .content-slider__item .feed__subtitle {
     font-size: 12px;
     line-height: 14px;
   }
 }

 @media screen and (min-width: 768px) {
   .content-slider__item .feed__subtitle {
     font-size: 14px;
     line-height: 17px;
   }
 }

 @media screen and (min-width: 1024px) {
   .content-slider__item .feed__subtitle {
     font-size: 12px;
     line-height: 14px;
   }
 }

 @media screen and (min-width: 1200px) {
   .content-slider__item .feed__subtitle {
     font-size: 16px;
     line-height: 20px;
   }
 }

 /* --------------------------------------------- *\
    components/dropdowns
 \* --------------------------------------------- */
 .dropdown-old {
   display: none;
   position: absolute;
   top: 100%;
   z-index: 5;
   background-color: #fff;
   border: 1px solid #aaa;
   width: 700px;
   min-height: 284px;
   -webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   -ms-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   -o-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
   -ms-border-radius: 0 0 4px 4px;
   -o-border-radius: 0 0 4px 4px;
   border-radius: 0 0 4px 4px;
 }

 .dropdown-old:before {
   display: block;
   position: absolute;
   content: "";
   width: 0px;
   height: 0px;
   top: -12px;
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
   border-bottom: 12px solid #fff;
 }

 .dropdown--left {
   left: 50%;
   margin-left: -28px;
   padding: 16px 16px 0 0;
   overflow-y: auto;
 }

 .dropdown--left:before {
   left: 16px;
 }

 .dropdown--left .dropdown__item:hover {
   background-color: #a4a4a4;
   color: #fff;
 }

 .dropdown--left .dropdown__item:hover:after {
   display: block;
   position: absolute;
   content: "";
   right: -1px;
   margin-top: -22px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 10px solid #fff;
 }

 .dropdown--right {
   right: 50%;
   margin-right: -28px;
   padding: 16px 0 0 16px;
   overflow-y: auto;
 }

 .dropdown--right:before {
   right: 16px;
 }

 .dropdown--right .dropdown__item:hover {
   background-color: #a4a4a4;
   color: #fff;
 }

 .dropdown--right .dropdown__item:hover:after {
   display: block;
   position: absolute;
   content: "";
   left: -1px;
   margin-top: -22px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid #fff;
 }

 .dropdown--right .dropdown__item_parent:hover {
   background-color: #a4a4a4;
   color: #fff;
 }

 .dropdown--right .dropdown__item_parent:hover:after {
   display: block;
   position: absolute;
   content: "";
   left: -1px;
   margin-top: -22px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid #fff;
 }

 /* --------------------------------------------- *\
    Main Category
 \* --------------------------------------------- */
 .dropdown__items {
   display: block;
   position: relative;
   width: 25%;
 }

 .dropdown--left .dropdown__items {
   border-right: 1px solid #ddd;
 }

 .dropdown--right .dropdown__items {
   float: right;
   width: 27%;
   border-left: 1px solid #ddd;
 }

 .dropdown--noUnderline {
   text-decoration: none;
 }

 .dropdown--padding {
   padding: 0px;
 }

 .dropdown__item {
   display: block;
   color: #000;
   text-transform: none;
   text-decoration: none;
   padding: 4px 16px;
   font-size: 15px;
   font-weight: normal;
 }

 @media screen and (min-width: 1200px) {
   .dropdown__item {
     padding: 4px 16px;
   }
 }

 .dropdown__item:hover {
   background-color: #a4a4a4;
   color: #fff;
 }

 .dropdown__item_mod {
   display: block;
   color: #000;
   text-transform: none;
   text-decoration: none;
   font-size: 15px;
   font-weight: normal;
 }

 .dropdown__item_mod:hover {
   background-color: transparent;
   color: #fff;
   text-decoration: none;
 }

 .dropdown__item_parent {
   display: block;
   color: #000;
   text-transform: none;
   text-decoration: none;
   padding: 4px 16px;
   font-size: 15px;
   font-weight: normal;
 }

 @media screen and (min-width: 1200px) {
   .dropdown__item_parent {
     padding: 4px 16px;
   }
 }

 .dropdown__item_parent:hover {
   background-color: #a4a4a4;
   color: #fff;
 }

 .dropdown--left .dropdown__item:hover:after {
   display: block;
   position: absolute;
   content: "";
   right: -1px;
   margin-top: -22px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 10px solid #fff;
 }

 .dropdown__item:hover .dropdown-sub {
   display: block;
 }

 .dropdown__item_parent:hover .dropdown-sub {
   display: block;
 }

 .dropdown--right .dropdown__item:hover:after {
   display: block;
   position: absolute;
   text-transform: none;
   text-decoration: none;
   content: "";
   left: -1px;
   margin-top: -22px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid #fff;
   color: #fff;
 }

 .dropdown--right .dropdown__item_parent:hover:after {
   display: block;
   position: absolute;
   text-transform: none;
   text-decoration: none;
   content: "";
   left: -1px;
   margin-top: -22px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid #fff;
   color: #fff;
 }

 .dropdown--right .dropdown__item:hover a {
   color: #fff;
 }

 .dropdown--right .dropdown__item_parent:hover span {
   color: #fff;
 }

 .dropdown--right .dropdown__item_mod:hover:after {
   display: block;
   position: absolute;
   text-transform: none;
   text-decoration: none;
   content: "";
   left: -1px;
   margin-top: -22px;
   color: #fff;
 }

 /* --------------------------------------------- *\
    Sub Category
 \* --------------------------------------------- */
 .dropdown--left .dropdown-sub {
   display: none;
   position: absolute;
   top: 0;
   left: 100%;
   width: 100%;
   height: 100%;
 }

 .dropdown--right .dropdown-sub {
   display: none;
   position: absolute;
   top: 0;
   right: 100%;
   width: 100%;
   height: 100%;
 }

 .dropdown-sub__item {
   display: block;
   font-weight: 400;
   color: #666;
   padding: 4px 16px;
   text-decoration: none; /*&:hover { color: $accent; }*/
 }

 @media screen and (min-width: 1200px) {
   .dropdown-sub__item {
     padding: 8px 16px;
   }
 }

 /* --------------------------------------------- *\
    Ad
 \* --------------------------------------------- */
 .dropdown--left .dropdown__ad {
   right: 16px;
 }

 .dropdown--right .dropdown__ad {
   left: 16px;
 }

 /* --------------------------------------------- *\
    Feed
 \* --------------------------------------------- */
 .dropdown-feed {
   display: none;
   width: 325px;
   float: right;
   padding: 16px;
 }

 @media screen and (min-width: 1200px) {
   .dropdown-feed {
     display: block;
   }
 }

 .dropdown-feed__headline {
   padding-bottom: 8px;
   margin-bottom: 8px;
   font-size: 13px;
   font-weight: 600;
   color: #000;
   text-transform: uppercase;
   border-bottom: 2px solid #ccc;
 }

 .dropdown-feed__item {
   display: block;
   position: relative;
   padding: 8px 0 8px 24px;
   color: #666;
   text-decoration: none;
   text-transform: none;
   line-height: 20px;
 }

 .dropdown-feed__item:before {
   display: block;
   position: absolute; /*content: '\2192';*/
   content: "";
   left: 0;
   top: 8px;
   color: #ee0000;
 }

 /* ---------------------------------------------- *\
     objects/empty-state
 \* ---------------------------------------------- */
 .empty-state {
   padding: 32px;
 }

 @media screen and (min-width: 1200px) {
   .empty-state {
     padding: 48px;
   }
 }

 .empty-state__icon {
   display: block;
   width: 137px;
   height: 80px;
   margin: 0 auto 32px;
   background: url("images/empty-state-icon.png") center/100% auto no-repeat;
 }

 @media screen and (min-width: 1024px) {
   .empty-state__icon {
     width: 274px;
     height: 169px;
   }
 }

 .empty-state__headline {
   margin-bottom: 32px;
   font-weight: 300;
   text-align: center;
 }

 /* Upload button icon */
 .empty-state__upload:before {
   width: 28px;
   background: url("images/upload-icon.png") center/100% auto no-repeat;
 }

 /* ---------------------------------------------- *\
     objects/fan-account
 \* ---------------------------------------------- */
 .fan-account {
   margin-bottom: 16px;
   text-align: center;
 }

 .fan-account .btn {
   display: block;
 }

 .fan-account__headline {
   text-transform: uppercase;
 }

 /* ---------------------------------------------- *\
     objects/featured-post
 \* ---------------------------------------------- */
 .featured-post {
   text-decoration: none;
   margin-bottom: 6px;
 }

 .featured-post__media {
   display: block;
   height: 200px;
   margin-bottom: 16px;
   background-color: #8d207f;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
 }

 .featured-post__cat {
   color: #ee0000;
   margin-bottom: 4px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }

 .featured-post__title {
   line-height: 1.2;
   color: #000;
   font-weight: 600;
 }

 /* ---------------------------------------------- *\
     objects/feed
 \* ---------------------------------------------- */
 .feed {
   margin-bottom: 16px;
 }

 @media screen and (min-width: 1024px) {
   .feed {
     margin-bottom: 32px;
   }
 }

 .feed__header {
   display: block;
   margin-bottom: 8px;
 }

 @media screen and (min-width: 768px) {
   .feed__header {
     margin-bottom: 12px;
   }
 }

 @media screen and (min-width: 1024px) {
   .feed__header {
     margin-bottom: 16px;
   }
 }

 .feed__header--sponsors {
   margin-bottom: 16px;
 }

 @media screen and (min-width: 768px) {
   .feed__header--sponsors {
     padding: 8px 0;
   }
 }

 @media screen and (min-width: 1200px) {
   .feed__header--sponsors {
     margin-bottom: 32px;
   }
 }

 .feed__header--sponsors .feed__title {
   margin-bottom: 0;
 }

 .feed__team {
   float: left;
   font-size: 13px;
   margin-right: 8px;
   text-transform: uppercase;
   font-weight: 600;
   color: #333;
   letter-spacing: 0.5px;
 }

 @media screen and (min-width: 1024px) {
   .feed__team {
     font-size: 14px;
   }
 }

 a.feed__team {
   color: #ee0000;
   text-decoration: none;
 }

 .feed__date {
   position: relative;
   padding-left: 12px;
   float: left;
   font-size: 13px;
   color: #666;
 }

 @media screen and (min-width: 1024px) {
   .feed__date {
     font-size: 14px;
   }
 }

 .feed__date:before {
   display: block;
   position: absolute;
   content: "-";
   left: 0;
 }

 .feed__title {
   clear: both;
   margin-bottom: 16px;
   color: #000;
   font-weight: 700; /*white-space: nowrap;*/
 }

 @media screen and (min-width: 1024px) {
   .feed__title {
     margin-bottom: 24px;
   }
 }

 .feed__subtitle {
   clear: both;
   color: #000;
   font-weight: 500;
 }

 a.feed__title {
   color: #000;
   text-decoration: none;
 }

 .feed__subheadline {
   color: #666;
   font-weight: normal;
 }

 /** Social Sharing */
 .feed-social {
   display: block;
   margin: 16px 0 24px;
 }

 @media screen and (min-width: 768px) {
   .feed-social {
     margin: 32px 0 48px;
   }
 }

 .feed-social__item {
   display: inline-block;
   vertical-align: middle;
   width: 48px;
   height: 48px;
   margin-right: 4px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
   background-image: url("/assets/images/feed-social-sprite.png");
   background-repeat: no-repeat;
 }

 .feed-social__item--facebook {
   background-position: 0px 0px;
   background-color: #3b5998;
 }

 .feed-social__item--facebook:hover {
   background-color: #2d4373;
 }

 .feed-social__item--twitter {
   background-position: 0px -50px;
   background-color: #00aaef;
 }

 .feed-social__item--twitter:hover {
   background-color: #0086bc;
 }

 .feed-social__item--email {
   background-position: 0px -100px;
   background-color: #3dbd4f;
 }

 .feed-social__item--email:hover {
   background-color: #31963f;
 }

 /** Static image or video */
 .feed__media {
   display: block;
   position: relative;
   height: 250px;
   background-color: #8d207f;
   margin-bottom: 16px;
 }

 .feed__media:after {
   display: block;
   content: "MEDIA";
   color: #fff;
   font-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -10px;
   margin-left: -15px;
 }

 @media screen and (min-width: 1024px) {
   .feed__media {
     height: 275px;
   }
 }

 @media screen and (min-width: 1200px) {
   .feed__media {
     height: 300px;
   }
 }

 .feed__caption {
   display: block;
   font-size: 13px;
   color: #666;
   font-style: italic;
   margin-top: -8px;
   margin-bottom: 16px;
 }

 .feed__text p {
   margin-top: 16px;
   margin-bottom: 16px;
 }

 @media screen and (min-width: 1200px) {
   .feed__text p {
     margin-top: 24px;
     margin-bottom: 24px;
   }
 }

 .feed__text p.is-last {
   margin-bottom: 0;
 }

 .feed__more {
   display: inline-block;
   margin-top: 16px;
   color: #ee0000;
   font-size: 0.9em;
 }

 @media screen and (min-width: 768px) {
   .feed__more {
     font-size: 1em;
   }
 }

 /* --------------------------------------------- *\
    components/footer
 \* --------------------------------------------- */
 /* --------------------------------------------- *\
    Base
 \* --------------------------------------------- */
 .footer {
   display: block;
   background-color: #000000;
   border-top: 4px solid #ee0000;
   margin-top: 20px;
   padding-bottom: 120px;
 }

 @media screen and (min-width: 768px) {
   .footer {
     padding-bottom: 40px;
   }
 }

 /* --------------------------------------------- *\
    Top
 \* --------------------------------------------- */
 .footer-top {
   display: block;
   padding: 32px 0;
 }

 .footer__logo {
   display: none;
   float: left;
   width: 100px;
   height: 100px;
 }

 @media screen and (min-width: 768px) {
   .footer__logo {
     display: block;
   }
 }

 .footer__headline {
   margin-bottom: 8px;
   text-transform: uppercase;
   color: #fff;
   font-weight: 600;
 }

 .footer-nav {
   display: block;
   color: #fff;
   font-weight: 300;
   margin-bottom: 16px;
 }

 @media screen and (min-width: 600px) {
   .footer-nav {
     float: left;
   }
 }

 @media screen and (min-width: 768px) {
   .footer-nav {
     margin-left: 64px;
   }
 }

 @media screen and (min-width: 1200px) {
   .footer-nav {
     margin-left: 64px;
   }
 }

 .footer-nav ul {
   list-style: none;
   margin-left: 0;
   margin-bottom: 0;
 }

 .footer-nav__item a {
   color: #fff;
 }

 .footer-nav__item a:hover {
   color: #fff;
 }

 .footer__contact {
   display: block;
   margin-bottom: 16px;
   color: #fff;
 }

 @media screen and (min-width: 600px) {
   .footer__contact {
     float: left;
     margin-left: 64px;
   }
 }

 @media screen and (min-width: 1200px) {
   .footer__contact {
     margin-left: 64px;
   }
 }

 .footer__contact p {
   font-size: 14px;
   font-weight: 300;
   letter-spacing: 0.5px;
   margin-bottom: 16px;
   line-height: 1.4;
 }

 .footer__contact p.is-last {
   margin-bottom: 0;
 }

 .footer-social {
   display: block;
 }

 @media screen and (min-width: 600px) {
   .footer-social {
     float: left;
     margin-left: 64px;
   }
 }

 @media screen and (min-width: 768px) {
   .footer-social {
     margin-bottom: 0;
   }
 }

 .footer-social__item {
   display: inline-block;
   vertical-align: middle;
   width: 48px;
   height: 48px;
   background-repeat: no-repeat;
   background-position: center;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
   margin-right: 4px;
 }

 .footer-social__item--twitter {
   background-image: url("/img/twitter-icon-large.png");
 }

 .footer-social__item--twitter:hover {
   background-image: url("/img/twitter-icon-large-hover.png");
 }

 .footer-social__item--facebook {
   background-image: url("/img/facebook-icon-large.png");
 }

 .footer-social__item--facebook:hover {
   background-image: url("/img/facebook-icon-large-hover.png");
 }

 .footer-social__item--instagram {
   background-image: url("/img/instagram-icon-large.png");
 }

 .footer-social__item--instagram:hover {
   background-image: url("/img/instagram-icon-large-hover.png");
 }

 .footer__ad {
   display: none;
   float: right;
   width: 300px;
   height: 250px;
   margin: 0;
 }

 @media screen and (min-width: 1024px) {
   .footer__ad {
     display: block;
   }
 }

 /* --------------------------------------------- *\
    Bottom
 \* --------------------------------------------- */
 .footer-bottom {
   display: block;
   clear: both;
   padding: 16px 0;
   border-top: 1px solid #45426b;
   text-align: center;
 }

 @media screen and (min-width: 600px) {
   .footer-bottom {
     text-align: left;
   }
 }

 .footer__big-teams {
   display: block;
   margin: 0 auto 16px;
 }

 @media screen and (min-width: 600px) {
   .footer__big-teams {
     float: right;
     margin: 0;
   }
 }

 .footer__info {
   display: block;
 }

 @media screen and (min-width: 600px) {
   .footer__info {
     float: left;
   }
 }

 /* --------------------------------------------- *\
    components/header
 \* --------------------------------------------- */
 /* --------------------------------------------- *\
    Desktop Header
 \* --------------------------------------------- */
 /** Social Links */
 .header-social {
   display: block;
   float: right;
   padding-top: 12px;
 }

 .header-social__item {
   display: inline-block;
   width: 36px;
   height: 36px;
   margin-left: 8px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
   background-color: #222;
   background-repeat: no-repeat;
   background-position: center;
   color: white;
 }

 .header-social__item:hover {
   background-color: #ee0000;
 }

 .header-social__item--twitter {
   background-image: url("/img/twitter-icon.png");
 }

 .header-social__item--facebook {
   background-image: url("/img/facebook-icon.png");
 }

 .header-social__item--instagram {
   background-image: url("/img/instagram-icon.png");
 }

 /** Login */
 .header-login {
   display: block;
   position: relative;
   float: right;
   padding: 16px 24px 16px 8px;
   color: #ee0000;
   background: rgba(0, 0, 0, 0.4);
   margin-left: 54px;
 }

 .header-login:after {
   display: block;
   position: absolute;
   content: "";
   width: 0px;
   height: 0px;
   border-top: 54px solid transparent;
   border-bottom: 54px solid transparent;
   border-right: 54px solid rgba(0, 0, 0, 0.4);
   top: -54px;
   left: -54px;
 }

 .header-login__item {
   display: inline-block;
   vertical-align: middle;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   margin: 0 4px;
   font-size: 15px;
 }

 .header-login__item:hover {
   color: #ee0000;
 }

 /* --------------------------------------------- modules/image-gallery ---------------------------------------------- */
 .image-gallery {
   display: block;
 }

 .image-gallery .grid {
   margin-left: -6px;
 }

 .image-gallery .grid__item {
   padding-left: 6px;
   padding-bottom: 6px;
 }

 /* --------------------------------------------- Primary Photo ---------------------------------------------- */
 .image-gallery__primary {
   display: block;
   height: 200px;
   background: #8d207f;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
 }

 @media screen and (min-width: 768px) {
   .image-gallery__primary {
     height: 300px;
   }
 }

 @media screen and (min-width: 1024px) {
   .image-gallery__primary {
     height: 330px;
   }
 }

 @media screen and (min-width: 1440px) {
   .image-gallery__primary {
     height: 360px;
   }
 }

 /* --------------------------------------------- Secondary Photo ---------------------------------------------- */
 .image-gallery__secondary {
   display: block;
   height: 97px;
   background: #8d207f;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
 }

 @media screen and (min-width: 768px) {
   .image-gallery__secondary {
     height: 147px;
   }
 }

 @media screen and (min-width: 1024px) {
   .image-gallery__secondary {
     height: 162px;
   }
 }

 @media screen and (min-width: 1440px) {
   .image-gallery__secondary {
     height: 177px;
   }
 }

 /** Image Count */
 .image-gallery__num {
   font-size: 50px;
   color: #fff;
   text-align: center;
   line-height: 50px;
   padding: 30px 0;
 }

 .image-gallery__num:hover {
   text-decoration: none;
   color: #bfbfbf;
 }

 @media screen and (min-width: 768px) {
   .image-gallery__num {
     padding: 40px 0;
   }
 }

 @media screen and (min-width: 768px) {
   .image-gallery__num {
     padding: 48px 0;
   }
 }

 @media screen and (min-width: 1200px) {
   .image-gallery__num {
     padding: 56px 0;
   }
 }

 /* --------------------------------------------- *\
    objects/login
 \* --------------------------------------------- */
 .login {
   display: block;
   position: fixed;
   z-index: 5;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #000;
   overflow-y: auto;
 }

 .login__inner {
   display: block;
   position: relative;
   width: 85%;
   max-width: 1000px;
   top: 5%;
   left: 7.5%;
   padding: 16px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   background-color: #fff;
 }

 @media screen and (min-width: 768px) {
   .login__inner {
     top: 15%;
     padding: 32px;
   }
 }

 @media screen and (min-width: 1200px) {
   .login__inner {
     left: 50%;
     margin-left: -500px;
     padding: 64px;
   }
 }

 .login__close {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   width: 48px;
   height: 48px;
   font-size: 24px;
   line-height: 48px;
   text-align: center;
   text-decoration: none;
   color: #000;
   font-weight: bold;
 }

 @media screen and (min-width: 768px) {
   .login__close {
     top: 15px;
     right: 15px;
   }
 }

 .login__headline {
   color: #777;
   margin-bottom: 16px;
 }

 @media screen and (min-width: 768px) {
   .login__headline {
     margin-bottom: 32px;
   }
 }

 .login-alerts {
   display: block;
   padding: 16px;
   background-color: #ddd;
   text-align: center;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
 }

 @media screen and (min-width: 768px) {
   .login-alerts {
     padding: 32px;
   }
 }

 .login-alerts__headline {
   font-size: 1.2em;
   color: #777;
   margin-bottom: 32px;
 }

 @media screen and (min-width: 768px) {
   .login-alerts__headline {
     font-size: 1.4em;
   }
 }

 .create-account {
   margin-top: 80px;
 }

 @media screen and (min-width: 768px) {
   .create-account {
     margin-top: 90px;
   }
 }

 @media screen and (min-width: 1024px) {
   .create-account {
     margin-top: 0;
   }
 }

 .modal-modal1 {
   font-family: "Montserrat", sans-serif;
 }

 .modal-modal1 .modal-body {
   background: center center/cover no-repeat fixed, url("/public/img/modal_background.jpg");
   background-position: center 100%;
   padding-top: 7px;
 }

 .modal-modal1 .close {
   color: #ffffff;
 }

 .modal-modal1 h1 {
   color: #ffffff;
   font-size: 24px;
   font-weight: 900;
   text-align: center;
   text-transform: uppercase;
 }

 .modal-modal1 h2 {
   color: #ffffff;
   font-size: 18px;
   margin-top: 10px;
   text-align: center;
 }

 .modal-modal1 .modal-buttons {
   margin-bottom: 15px;
 }

 .modal-modal1 .modal-buttons a {
   font-size: 16px;
   font-weight: bold;
   text-shadow: 0 1px 1px #000000;
 }

 @media (min-width: 768px) {
   .modal-modal1 .modal-body {
     background-position: center 100%;
   }
   .modal-modal1 .modal-content {
     margin-top: 50px;
   }
   .modal-modal1 img {
     position: absolute;
     top: -25px;
     right: -25px;
   }
   .modal-modal1 .close {
     font-size: 30px;
   }
   .modal-modal1 h1 {
     font-size: 30px;
     margin-top: 60px;
     text-align: left;
   }
   .modal-modal1 h2 {
     margin-top: 20px;
     text-align: left;
   }
   .modal-modal1 .modal-buttons {
     margin-top: 20px;
     margin-bottom: 63px;
     text-align: left;
   }
   .modal-modal1 .modal-buttons a {
     font-size: 20px;
   }
 }

 @media (min-width: 992px) {
   .modal-modal1 img {
     top: -40px;
     right: -40px;
   }
   .modal-modal1 .close {
     font-size: 40px;
   }
   .modal-modal1 h1 {
     font-size: 50px;
     margin-top: 100px;
   }
   .modal-modal1 h2 {
     font-size: 22px;
     margin-top: 30px;
   }
   .modal-modal1 .modal-buttons {
     margin-top: 51px;
     margin-bottom: 96px;
   }
   .modal-modal1 .modal-buttons a {
     font-size: 24px;
   }
 }

 .modal-modal2 {
   font-family: "Montserrat", sans-serif;
 }

 .modal-modal2 .modal-header {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }

 .modal-modal2 .close {
   color: #ffffff;
   font-size: 30px;
   position: absolute;
   top: 5px;
   right: 10px;
 }

 .modal-modal2 h1 {
   font-size: 18px;
   text-align: center;
 }

 .modal-modal2 p {
   text-align: center;
 }

 .modal-modal2 .modal-buttons {
   margin-top: 35px;
   text-align: center;
 }

 @media (min-width: 768px) {
   .modal-modal2 h1 {
     font-size: 30px;
     margin-top: 10px;
   }
   .modal-modal2 p {
     font-size: 25px;
   }
   .modal-modal2 .modal-buttons {
     margin-top: 50px;
     margin-bottom: 25px;
   }
   .modal-modal2 .modal-buttons a {
     font-size: 20px;
   }
 }

 .modal-modal3 {
   font-family: "Montserrat", sans-serif;
 }

 .modal-modal3 .modal-body {
   background: center center/cover no-repeat fixed, url("/public/img/modal_background.jpg");
   background-position: center 100%;
   padding-top: 7px;
 }

 .modal-modal3 .close {
   color: #ffffff;
 }

 .modal-modal3 h1 {
   color: #ffffff;
   font-size: 24px;
   font-weight: 900;
   text-align: center;
   text-transform: uppercase;
 }

 .modal-modal3 p {
   color: #ffffff;
   text-align: center;
 }

 .modal-modal3 h2 {
   color: #ffffff;
   font-size: 16px;
   text-align: center;
 }

 .modal-modal3 .modal-buttons {
   margin-bottom: 15px;
 }

 .modal-modal3 .modal-buttons a {
   font-size: 16px;
   font-weight: bold;
   text-shadow: 0 1px 1px #000000;
 }

 @media (min-width: 768px) {
   .modal-modal3 .modal-body {
     background-position: center 100%;
   }
   .modal-modal3 .modal-content {
     margin-top: 50px;
   }
   .modal-modal3 img {
     position: absolute;
     top: -25px;
     right: -25px;
   }
   .modal-modal3 .close {
     font-size: 30px;
   }
   .modal-modal3 h1 {
     font-size: 30px;
     margin-top: 30px;
     text-align: left;
   }
   .modal-modal3 p {
     color: #cbcbcb;
     margin-top: 10px;
     text-align: left;
   }
   .modal-modal3 h2 {
     margin-top: 10px;
     text-align: left;
   }
   .modal-modal3 .modal-buttons {
     margin-top: 13px;
     margin-bottom: 37px;
     text-align: left;
   }
   .modal-modal3 .modal-buttons a {
     font-size: 20px;
   }
 }

 @media (min-width: 992px) {
   .modal-modal3 img {
     top: -40px;
     right: -40px;
   }
   .modal-modal3 .close {
     font-size: 40px;
   }
   .modal-modal3 h1 {
     font-size: 50px;
     margin-top: 50px;
   }
   .modal-modal3 p {
     font-size: 16px;
     margin-top: 20px;
   }
   .modal-modal3 h2 {
     font-size: 30px;
     margin-top: 25px;
   }
   .modal-modal3 .modal-buttons {
     margin-top: 30px;
     margin-bottom: 44px;
   }
   .modal-modal3 .modal-buttons a {
     font-size: 24px;
   }
 }

 .modal-modal4 {
   font-family: "Montserrat", sans-serif;
 }

 .modal-modal4 .modal-header {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }

 .modal-modal4 .close {
   color: #ffffff;
   font-size: 30px;
   position: absolute;
   top: 5px;
   right: 10px;
 }

 .modal-modal4 .modal-body {
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   background: linear-gradient(rgba(255, 255, 255, 0.75), white) center center/cover no-repeat fixed,
     url("https://s3.amazonaws.com/bigteamsstaging/background/default/background_footballField.jpg");
 }

 /* ---------------------------------------------- *\
     objects/mobile-header
 \* ---------------------------------------------- */
 .mobile-header {
   display: block;
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 5;
   height: 48px;
 }

 @media screen and (min-width: 768px) {
   .mobile-header {
     height: 64px;
   }
 }

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

 /** Header Bar */
 .mobile-header-top {
   position: relative;
   z-index: 6;
   background-color: #000000;
   height: 48px;
 }

 @media screen and (min-width: 768px) {
   .mobile-header-top {
     height: 64px;
   }
 }

 .mobile-header__logo {
   display: block;
   float: left;
   position: absolute;
   top: 4px;
   width: 60px;
   height: 60px;
   background: transparent;
 }

 @media screen and (min-width: 768px) {
   .mobile-header__logo {
     width: 75px;
     height: 75px;
     z-index: 1;
   }
 }

 .mobile-header__text {
   display: block;
   float: left;
   padding: 7px 4px 1px 66px;
 }

 @media screen and (min-width: 768px) {
   .mobile-header__text {
     padding-left: 91px;
     padding-top: 16px;
   }
 }

 .mobile-header__title,
 .mobile-header__school {
   margin: 0;
   line-height: 18px;
   text-transform: uppercase;
 }

 .mobile-header__title {
   font-size: 14px;
   color: #fff;
 }

 @media screen and (min-width: 768px) {
   .mobile-header__title {
     font-size: 20px;
   }
 }

 .mobile-header__school {
   font-size: 13px;
   color: #ccc;
 }

 @media screen and (min-width: 768px) {
   .mobile-header__school {
     font-size: 14px;
   }
 }

 .mobile-header__toggle-nav {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   width: 48px;
   height: 48px;
   background: url("/img/menu-icon.png") center no-repeat #ee0000;
   background-color: #ee0000;
 }

 @media screen and (min-width: 768px) {
   .mobile-header__toggle-nav {
     width: 64px;
     height: 64px;
   }
 }

 .mobile-header__toggle-nav:after {
   display: block;
   position: absolute;
   content: "";
   width: 0px;
   height: 0px;
   border-top: 34px solid transparent;
   border-bottom: 34px solid transparent;
   border-left: 34px solid #ee0000;
   top: -23px;
   left: -20px;
   -webkit-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }

 @media screen and (min-width: 768px) {
   .mobile-header__toggle-nav:after {
     border-top: 48px solid transparent;
     border-bottom: 48px solid transparent;
     border-left: 48px solid #ee0000;
     top: -37px;
     left: -27px;
   }
 }

 .nav-open .mobile-header__toggle-nav {
   background-image: url("/img/menu-close-icon.png");
 }

 /** Login/Register Links */
 .mobile-header__login {
   display: none;
   float: right;
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
   padding-right: 92px;
   line-height: 64px;
 }

 @media screen and (min-width: 768px) {
   .mobile-header__login {
     display: block;
   }
 }

 .mobile-header__login a {
   color: #fff;
   text-decoration: none;
 }

 /* ---------------------------------------------- *\
     objects/mobile-nav
 \* ---------------------------------------------- */
 .mobile-nav {
   display: none;
   position: fixed;
   overflow: hidden;
   z-index: 5;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   padding-top: 48px;
   background-color: #fff;
 }

 @media screen and (min-width: 768px) {
   .mobile-nav {
     padding-top: 64px;
     width: 400px;
     left: auto;
     right: 0;
     border-left: 1px solid #ddd;
   }
 }

 /** Screens */
 .mobile-nav__screens {
   display: block;
   width: 1200px;
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
   -webkit-transition: all 0.1s ease-in 0s;
   -moz-transition: all 0.1s ease-in 0s;
   -ms-transition: all 0.1s ease-in 0s;
   -o-transition: all 0.1s ease-in 0s;
   transition: all 0.1s ease-in 0s;
 }

 .nav-screen {
   display: block;
   width: 100%;
   height: 100%;
   float: left;
   background-color: #fff;
 }

 @media screen and (min-width: 768px) {
   .nav-screen {
     width: 400px;
     height: auto;
   }
 }

 .nav-screen__header {
   display: block;
   height: 56px;
   padding: 8px 16px 0;
   background-color: #eee;
 }

 .nav-screen__header ul {
   margin-bottom: 0;
 }

 .nav-screen__header-text {
   color: #111;
   font-size: 13px;
   line-height: 48px;
   font-weight: 600;
   text-transform: uppercase;
 }

 a.nav-screen__header-text {
   text-transform: uppercase;
   cursor: pointer;
 }

 .nav-screen__account {
   display: block;
   float: right;
   margin-top: 4px;
   margin-right: -12px;
 }

 .nav-screen__account span {
   display: block;
   float: left;
   line-height: 34px;
   color: #ee0000;
 }

 .nav-screen__header-btn {
   padding: 4px 8px;
   text-transform: uppercase;
   color: #111;
   font-size: 14px;
 }

 .nav-screen__content {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }

 /** Links */
 .mobile-nav__item {
   display: block;
   padding: 12px 16px;
   border-bottom: 1px solid #eee;
   text-transform: uppercase;
   color: #666;
   cursor: pointer;
   text-decoration: none;
   font-weight: 1.3rem;
 }

 .mobile-nav__item:hover {
   background-color: #fcfcfc;
 }

 .mobile-nav__item .arrow {
   float: right;
   margin-top: 6px;
 }

 .mobile-nav__item--cat {
   color: #333;
   font-weight: 600;
 }

 /* --------------------------------------------- *\
    objects/my-teams
 \* --------------------------------------------- */
 .my-teams__btn {
   color: #ee0000;
   border: 1px solid #ee0000;
   font-size: 11px;
   text-transform: uppercase;
   padding: 6px 8px;
   font-weight: bold;
 }

 .my-teams__btn:hover {
   background-color: #ee0000;
   color: #fff;
 }

 .my-teams__header {
   padding-bottom: 16px;
   text-transform: uppercase;
   border-bottom: 1px solid #666;
 }

 .my-teams__header .grid {
   margin-left: 0;
   line-height: 0;
 }

 .my-teams__header .grid__item {
   padding-left: 0;
 }

 .my-teams__headline {
   color: #666;
   text-transform: uppercase;
   margin-bottom: 0;
 }

 /* --------------------------------------------- *\
    Selection
 \* --------------------------------------------- */
 .my-teams-select .my-teams__header {
   margin-bottom: 16px;
 }

 .my-teams-select__seasons a {
   display: block;
   float: left;
   position: relative;
   padding: 8px;
   color: #333;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 13px;
   text-align: center;
   cursor: pointer;
 }

 @media screen and (min-width: 350px) {
   .my-teams-select__seasons a {
     margin-right: 10px;
   }
   .my-teams-select__seasons a:last-child {
     margin-right: 0;
   }
 }

 @media screen and (min-width: 425px) {
   .my-teams-select__seasons a {
     width: 25%;
     margin-right: 0;
   }
 }

 @media screen and (min-width: 600px) {
   .my-teams-select__seasons a {
     width: auto;
     text-align: left;
     float: none;
     padding: 12px 16px;
     font-size: 15px;
   }
 }

 .my-teams-select__seasons a.is-active {
   background-color: #ee0000;
   color: #fff;
 }

 .my-teams-select__seasons a.is-active:after {
   display: none;
   position: absolute;
   content: "";
   width: 0px;
   height: 0px;
   top: 50%;
   margin-top: -10px;
   right: -10px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid #ee0000;
 }

 @media screen and (min-width: 600px) {
   .my-teams-select__seasons a.is-active:after {
     display: block;
   }
 }

 .my-teams__add-team {
   padding-bottom: 8px;
 }

 /* --------------------------------------------- *\
    Favorites
 \* --------------------------------------------- */
 .my-teams-favorites {
   margin-top: 32px;
 }

 .my-teams-favorites__item {
   display: block;
   padding: 16px 0;
   border-bottom: 1px solid #eee;
 }

 .my-teams-favorites__item .grid__item {
   padding-bottom: 0;
 }

 /* --------------------------------------------- *\
    components/nav
 \* --------------------------------------------- */
 /* --------------------------------------------- *\
    Desktop Nav
 \* --------------------------------------------- */
 .mainnav {
   background-color: #000000;
 }

 .mainnav .wrapper {
   padding-left: 0;
   padding-right: 0;
 }

 .mainnav-primary {
   float: left;
   font-weight: 600;
 }

 .mainnav-secondary {
   float: right;
 }

 /** Links */
 .mainnav__item {
   display: block;
   position: relative;
   float: left;
   font-size: 16px;
   color: #fff;
   padding: 14px 12px;
   cursor: pointer;
   text-decoration: none;
   text-transform: uppercase;
   transition: color 0.2s;
 }

 .mainnav__item:hover {
   color: #a4a4a4;
 }

 .mainnav__item:hover .dropdown {
   display: block;
 }

 .nav-link-padded {
   padding-left: 10px !important;
   padding-right: 10px !important;
 }

 .navbar-fill {
   background-color: #f2f2f2 !important;
 }

 /* --------------------------------------------- *\
    components/person
 \* --------------------------------------------- */
 .person {
   padding: 0;
   text-decoration: none;
 }

 .person__photo {
   display: block;
   height: 200px;
   background: url("images/person-placeholder.png") bottom center no-repeat #ddd;
 }

 .person__info {
   padding: 16px;
   text-align: center;
 }

 .person__name {
   display: block;
   margin-bottom: 0;
   color: #000;
   font-size: 16px;
 }

 .person__category {
   font-size: 13px;
   line-height: 18px;
   margin-bottom: 4px;
   text-transform: uppercase;
   color: #888;
   letter-spacing: 0.2px;
 }

 .person__detail {
   font-size: 15px;
   line-height: 20px;
   color: #000;
 }

 /* --------------------------------------------- *\
    objects/photo
 \* --------------------------------------------- */
 .photo {
   display: block;
   height: 75px;
   background: #8d207f;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
 }

 @media screen and (min-width: 480px) {
   .photo {
     height: 100px;
   }
 }

 @media screen and (min-width: 600px) {
   .photo {
     height: 125px;
   }
 }

 @media screen and (min-width: 768px) {
   .photo {
     height: 175px;
   }
 }

 @media screen and (min-width: 1440px) {
   .photo {
     height: 220px;
   }
 }

 .photo--upload {
   text-align: center;
   font-size: 18px;
   line-height: 297px;
 }

 .photo--upload:after {
   display: block;
   position: absolute;
   content: "";
   top: 50%;
   left: 50%;
   margin: -48px 0 0 -24px;
   width: 48px;
   height: 48px;
   background-color: #999;
 }

 .photo__edit {
   display: none;
   height: 48px;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 11px;
   text-align: center;
   margin-top: -48px;
 }

 .photo.is-selectable + .photo__edit {
   display: block;
 }

 /* ---------------------------------------------- *\
     objects/resource
 \* ---------------------------------------------- */
 .resource {
   margin-bottom: 16px;
 }

 @media screen and (min-width: 1200px) {
   .resource {
     margin-bottom: 32px;
   }
 }

 .resource__header {
   display: block;
   padding-bottom: 16px;
   border-bottom: 1px solid #eee;
 }

 .resource__headline {
   display: inline-block;
   vertical-align: middle;
   color: #666;
   font-weight: 300;
   margin-bottom: 0;
 }

 .resource__select {
   display: inline-block;
   vertical-align: middle;
   margin-left: 16px;
   margin-bottom: 16px;
   padding-right: 32px;
   -webkit-appearance: none;
   outline: none;
   border: none;
   color: #666;
   font-size: 1.1em;
   font-weight: 300;
   background-image: url("images/select-icon.png");
   background-repeat: no-repeat;
   background-color: transparent;
   background-position: 98% center;
   background-position: calc(100% - 10px) center;
 }

 @media screen and (min-width: 600px) {
   .resource__select {
     font-size: 1.2em;
     line-height: 1;
   }
 }

 @media screen and (min-width: 768px) {
   .resource__select {
     font-size: 1.6em;
     line-height: 1;
   }
 }

 @media screen and (min-width: 1024px) {
   .resource__select {
     font-size: 1.9em;
   }
 }

 @media screen and (min-width: 1200px) {
   .resource__select {
     font-size: 2.3em;
     margin-bottom: 32px;
     margin-left: 32px;
   }
 }

 .resource__details {
   margin: 16px 0;
 }

 .resource__item {
   display: block;
   position: relative;
   padding: 16px 16px 16px 28px;
   border-bottom: 1px solid #eee;
   text-decoration: none;
 }

 .resource__item:hover {
   background-color: #f5f5f5;
 }

 .resource__item:before {
   display: block;
   position: absolute;
   content: "";
   width: 24px;
   height: 24px;
   top: 16px;
   left: 0;
   background-image: url("images/files-sprite.png");
   background-repeat: no-repeat;
 }

 .resource__item--doc:before {
   background-position: 0px 0px;
 }

 .resource__item--link:before {
   background-position: 0px -24px;
 }

 .resource__name {
   font-size: 17px;
   color: #000;
   font-weight: 600;
 }

 @media screen and (min-width: 1024px) {
   .resource__name {
     font-size: 18px;
   }
 }

 .resource__name span {
   font-weight: 400;
   color: #777;
   font-size: 14px;
 }

 @media screen and (min-width: 1024px) {
   .resource__name span {
     font-size: 15px;
   }
 }

 .resource__desc {
   font-size: 14px;
   color: #777;
 }

 @media screen and (min-width: 1024px) {
   .resource__desc {
     font-size: 15px;
   }
 }

 /* --------------------------------------------- *\
    components/schedule
 \* --------------------------------------------- */
 .schedule {
   display: block;
   overflow-y: hidden;
   overflow-x: auto;
   position: relative;
   margin-top: 48px;
   border-bottom: 1px solid #ddd;
   -webkit-overflow-scrolling: touch;
 }

 @media screen and (min-width: 768px) {
   .schedule {
     margin-top: 64px;
   }
 }

 @media screen and (min-width: 1024px) {
   .schedule {
     margin-top: 0;
     overflow-x: hidden;
   }
 }

 @media screen and (min-width: 1024px) {
   .schedule:hover .schedule__prev,
   .schedule:hover .schedule__next {
     display: block;
   }
 }

 .schedule__prev,
 .schedule__next {
   display: none;
   position: absolute;
   width: 50px;
   height: 100%;
   top: 0;
   z-index: 1;
   padding: 36px 20px;
   background-color: rgba(0, 0, 0, 0.7);
   cursor: pointer;
   -webkit-transition: background 0.1s ease-in 0s;
   -moz-transition: background 0.1s ease-in 0s;
   -ms-transition: background 0.1s ease-in 0s;
   -o-transition: background 0.1s ease-in 0s;
   transition: background 0.1s ease-in 0s;
 }

 .schedule__prev:hover,
 .schedule__next:hover {
   background-color: #222;
 }

 .schedule__prev {
   left: 0;
 }

 .schedule__next {
   right: 0;
 }

 .schedule__container {
   display: block;
   width: 10000px;
   -webkit-transition: all 0.1s ease-in 0s;
   -moz-transition: all 0.1s ease-in 0s;
   -ms-transition: all 0.1s ease-in 0s;
   -o-transition: all 0.1s ease-in 0s;
   transition: all 0.1s ease-in 0s;
 }

 @media screen and (max-width: 1023px) {
   .schedule__container {
     -webkit-transform: translateX(0) !important;
     -moz-transform: translateX(0) !important;
     -ms-transform: translateX(0) !important;
     -o-transform: translateX(0) !important;
     transform: translateX(0) !important;
   }
 }

 /* --------------------------------------------- *\
    Games
 \* --------------------------------------------- */
 /** Base */
 .schedule-game {
   display: block;
   float: left;
   height: 100px;
 }

 .schedule-game a {
   background-color: #fff;
   border-width: 1px 1px 2px;
   border-style: solid;
   border-color: #f2f2f2;
   padding: 12px;
   text-decoration: none;
   cursor: pointer;
   display: block;
   width: 200px;
   height: 100px;
 }

 @media screen and (min-width: 768px) {
   .schedule-game a {
     width: 225px;
   }
 }

 .schedule-game__sport {
   display: block;
   font-size: 13px;
   line-height: 1.1;
   color: #444;
   text-transform: uppercase;
   font-weight: 600;
   margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .schedule-game__opponent {
   display: block;
   font-size: 15px;
   line-height: 1.1;
   margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #444;
 }

 .schedule-game__time {
   display: block;
   font-size: 14px;
   margin-bottom: 4px;
   line-height: 1.1;
   color: #6a7981;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .schedule-game__status {
   display: block;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   color: #3877c7;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 /** Cancelled/Postponed */
 .schedule-game--cancelled a {
   border-bottom-color: #f00;
 }

 .text-blurred {
   color: transparent;
   text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px !important;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

 .text-blurred a,
 .text-blurred a:hover,
 .text-blurred a:focus {
   color: transparent !important;
   text-decoration: none !important;
 }

 .text-blurred .fa {
   color: transparent !important;
 }

 .schedule-list-title {
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 150px;
   display: block;
   overflow: hidden;
 }

 /* ---------------------------------------------- *\
     objects/settings
 \* ---------------------------------------------- */
 .settings__headline {
   margin-top: 32px;
 }

 @media screen and (min-width: 1024px) {
   .settings__headline {
     margin-top: 48px;
   }
 }

 .settings__headline:first-child {
   margin-top: 16px;
 }

 @media screen and (min-width: 1024px) {
   .settings__headline:first-child {
     margin-top: 32px;
   }
 }

 /* --------------------------------------------- *\
    components/share
 \* --------------------------------------------- */
 .share {
   float: right;
   font-size: 13px;
   padding: 4px 16px 4px 40px;
   text-transform: uppercase;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -ms-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 }

 .share:before {
   background: url("/assets/images/share-sprite.png") 0px 0px no-repeat;
 }

 .share:not(.js-subheader-item) span {
   display: none;
 }

 @media screen and (min-width: 600px) {
   .share:not(.js-subheader-item) span {
     display: block;
   }
 }

 @media screen and (max-width: 599px) {
   .share:not(.js-subheader-item) {
     background-color: transparent;
     border: none;
     width: 40px;
     height: 40px;
     padding: 0;
     margin-top: -4px;
     margin-right: -8px;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     -ms-box-shadow: none;
     -o-box-shadow: none;
     box-shadow: none;
   }
   .share:not(.js-subheader-item):hover {
     background-color: transparent;
   }
 }

 /* ---------------------------------------------- *\
     Share Dropdown
     - Bottom sheet on mobile
     - Dropdown on desktop
     1. Slides up from bottom.
 \* ---------------------------------------------- */
 .share-dropdown {
   display: block;
   position: fixed;
   background-color: #fff;
   z-index: 6;
   text-align: left;
   width: 100%;
   -webkit-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.4);
   -ms-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.4);
   -o-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.4);
   box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.4);
   transform: translateY(110%); /* [1] */
   -webkit-transform: translateY(110%); /* [1] */
   -webkit-transition: all 0.1s ease-in 0s;
   -moz-transition: all 0.1s ease-in 0s;
   -ms-transition: all 0.1s ease-in 0s;
   -o-transition: all 0.1s ease-in 0s;
   transition: all 0.1s ease-in 0s; /* White Triangle */
 }

 .share-dropdown:before {
   display: none;
   position: absolute;
   content: "";
   width: 12px;
   height: 12px;
   top: -12px;
   left: 50%;
   margin-left: -6px;
   background: url("/assets/images/share-triangle.png") center no-repeat;
 }

 @media screen and (min-width: 600px) {
   .share-dropdown:before {
     display: block;
   }
 }

 @media screen and (max-width: 599px) {
   .share-dropdown {
     top: auto !important;
     bottom: 0 !important;
     left: 0 !important;
   }
 }

 @media screen and (min-width: 600px) {
   .share-dropdown {
     display: none;
     position: absolute;
     bottom: auto;
     top: 48px;
     left: 50%;
     width: 150px;
     margin-left: -75px;
     -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
     -ms-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
     -o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;
     transform: translateY(0);
     -webkit-transform: translateY(0);
   }
 }

 .share-dropdown.is-visible {
   display: block;
   transform: translateY(0); /* [1] */
   -webkit-transform: translateY(0); /* [1] */
 }

 .share-dropdown__headline {
   display: block;
   color: #777;
   text-transform: uppercase;
   font-size: 15px;
   padding: 16px 16px 8px;
 }

 @media screen and (min-width: 600px) {
   .share-dropdown__headline {
     display: none;
   }
 }

 .share-dropdown__item {
   display: block;
   position: relative;
   padding: 12px 16px 12px 40px;
   text-transform: none;
   font-size: 16px;
   font-weight: normal;
   color: #000;
   text-decoration: none;
 }

 @media screen and (min-width: 600px) {
   .share-dropdown__item {
     font-size: 15px;
   }
 }

 .share-dropdown__item:hover {
   background-color: #f5f5f5;
 }

 .share-dropdown__item:before {
   display: block;
   position: absolute;
   content: "";
   left: 12px;
   top: 16px;
   width: 16px;
   height: 16px;
   background-image: url("/assets/images/share-sprite.png");
   background-repeat: no-repeat;
 }

 .share-dropdown__item:first-child {
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
   -ms-border-radius: 4px 4px 0 0;
   -o-border-radius: 4px 4px 0 0;
   border-radius: 4px 4px 0 0;
 }

 .share-dropdown__item:last-child {
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
   -ms-border-radius: 0 0 4px 4px;
   -o-border-radius: 0 0 4px 4px;
   border-radius: 0 0 4px 4px;
 }

 .share-dropdown__item--facebook:before {
   background-position: 0px -16px;
 }

 .share-dropdown__item--twitter:before {
   background-position: 0px -32px;
 }

 .share-dropdown__item--email:before {
   background-position: 0px -48px;
 }

 /* --------------------------------------------- Share overlay ---------------------------------------------- */
 .share-overlay {
   display: block;
   position: fixed;
   z-index: 5;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
 }

 @media screen and (min-width: 600px) {
   .share-overlay {
     display: none !important;
   }
 }

 /* --------------------------------------------- *\
    components/sidebar
 \* --------------------------------------------- */
 /* --------------------------------------------- *\
    Base
 \* --------------------------------------------- */
 .sidebar__headline {
   margin-top: 24px;
   margin-bottom: 6px;
   padding: 16px;
   background-color: #000000;
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 @media screen and (min-width: 768px) {
   .sidebar__headline {
     margin-top: 20px;
   }
 }

 @media screen and (min-width: 1024px) {
   .sidebar__headline {
     margin-top: 24px;
   }
 }

 @media screen and (min-width: 1200px) {
   .sidebar__headline {
     margin-top: 28px;
   }
 }

 @media screen and (min-width: 1440px) {
   .sidebar__headline {
     margin-top: 32px;
   }
 }

 .card .sidebar__headline {
   margin-top: 0;
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
   -ms-border-radius: 4px 4px 0 0;
   -o-border-radius: 4px 4px 0 0;
   border-radius: 4px 4px 0 0;
 }

 .sidebar__subheadline {
   color: #666;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .sidebar__media {
   display: block;
   height: 250px;
   margin-bottom: 32px;
   background: #8d207f;
 }

 .sidebar__link {
   display: block;
   color: #000;
   font-size: 18px;
   text-decoration: none;
   margin-bottom: 16px;
 }

 .sidebar__btn {
   width: 75%;
   padding: 12px 24px;
   font-size: 14px;
 }

 .sidebar__ad {
   display: none;
 }

 @media screen and (min-width: 1024px) {
   .sidebar__ad {
     display: block;
     width: 300px;
     margin-left: auto;
     margin-right: auto;
   }
 }

 .sidebar__album {
   padding: 16px;
 }

 .sidebar__album:hover {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -ms-box-shadow: none;
   -o-box-shadow: none;
   box-shadow: none;
 }

 /* ---------------------------------------------- *\
     Sidebar List
    1. No bullets so no margin
 \* ---------------------------------------------- */
 .sidebar-list {
   list-style: none;
   margin-left: 0; /* [1] */
   margin-bottom: 0; /* [1] */
   padding-left: 0;
 }

 .sidebar-list li {
   display: block;
   padding: 12px 16px;
   line-height: 1.2;
   border-bottom: 1px solid #eee;
   font-size: 16px;
 }

 .sidebar-list li:last-child {
   border-bottom: none;
 }

 .sidebar-list__name {
   color: #000;
   margin-bottom: 2px;
 }

 .sidebar-list__desc {
   font-size: 14px;
   color: #666;
 }

 /* --------------------------------------------- *\
    objects/slideshow
 \* --------------------------------------------- */
 .slideshow {
   display: block;
   position: fixed;
   z-index: 5;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
 }

 .slideshow__ad {
   display: none;
 }

 @media screen and (min-width: 1024px) {
   .slideshow__ad {
     display: block;
   }
 }

 /* --------------------------------------------- *\
    Controls
 \* --------------------------------------------- */
 .slideshow__close {
   display: block;
   position: absolute;
   width: 50px;
   height: 50px;
   top: 20px;
   right: 20px;
 }

 @media screen and (min-width: 1440px) {
   .slideshow__close {
     right: 10%;
   }
 }

 .slideshow__close:after {
   display: block;
   position: absolute;
   content: "";
   width: 16px;
   height: 16px;
   top: 16px;
   left: 16px;
   background: url("images/slideshow-sprite.png") 0px 0px no-repeat;
 }

 .slideshow__prev,
 .slideshow__next {
   display: block;
   position: absolute;
   padding: 7px;
   text-align: center;
   width: 40px;
   height: 100%;
   top: 0;
   cursor: pointer;
 }

 .slideshow__prev:hover,
 .slideshow__next:hover {
   background-color: #3d3b3b;
 }

 .slideshow__prev .arrow,
 .slideshow__next .arrow {
   top: 45%;
 }

 .slideshow__prev {
   left: -40px;
 }

 .slideshow__next {
   right: -40px;
 }

 /* --------------------------------------------- *\
    Photos
 \* --------------------------------------------- */
 .slideshow-photos {
   display: block;
   position: absolute;
   width: 75%;
   height: 50%;
   background: #8d207f;
   top: 25%;
   left: 12.5%;
 }

 .slideshow-photo {
   display: block;
 }

 .slideshow__bottom {
   display: block;
   position: absolute;
   width: 75%;
   left: 12.5%;
   bottom: 20px;
   text-align: center;
 }

 /* ---------------------------------------------- *\
     Photo info
 \* ---------------------------------------------- */
 .slideshow__info {
   display: block;
 }

 @media screen and (min-width: 1024px) {
   .slideshow__info {
     float: left;
   }
 }

 .slideshow__num,
 .slideshow__caption {
   display: inline-block;
   vertical-align: middle;
   line-height: 40px;
 }

 .slideshow__num {
   font-size: 17px;
   color: #444;
   margin-right: 10px;
 }

 .slideshow__caption {
   font-size: 15px;
   color: #aaa;
 }

 /* --------------------------------------------- *\
    Actions
 \* --------------------------------------------- */
 .slideshow-actions {
   display: block;
 }

 @media screen and (min-width: 1024px) {
   .slideshow-actions {
     float: right;
   }
 }

 .slideshow-actions__item {
   display: inline-block;
   vertical-align: middle;
   color: #a4a4a4;
   margin-bottom: 8px;
   margin-left: 8px;
   padding: 18px;
   height: 40px;
   font-size: 14px;
   border: 1px solid #a4a4a4;
 }

 .slideshow-actions__item:before {
   background: url("images/slideshow-sprite.png") 0px 0px no-repeat;
 }

 .slideshow-actions__item:hover {
   background-color: #fff;
 }

 @media screen and (min-width: 600px) {
   .slideshow-actions__item {
     padding: 8px 16px 8px 40px;
   }
 }

 .slideshow-actions__item span {
   display: none;
 }

 @media screen and (min-width: 600px) {
   .slideshow-actions__item span {
     display: inline-block;
   }
 }

 .slideshow-actions__item--download:before {
   background-position: 0px -16px;
 }

 .slideshow-actions__item--tweet:before {
   background-position: 0px -32px;
 }

 .slideshow-actions__item--share:before {
   background-position: 0px -48px;
 }

 /* ---------------------------------------------- *\
     objects/sponsors
 \* ---------------------------------------------- */
 .sponsors .ad {
   max-width: 100%;
   margin: 0;
 }

 /* --------------------------------------------- *\
    components/subheader
 \* --------------------------------------------- */
 /* --------------------------------------------- *\
    Base
 \* --------------------------------------------- */
 .subheader {
   display: block;
   margin-top: 48px;
   margin-bottom: 16px;
   padding: 16px 0 0;
   background-color: #fff;
   border-bottom: 1px solid #ddd;
 }

 @media screen and (min-width: 768px) {
   .subheader {
     margin-top: 64px;
     padding: 32px 0 0;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader {
     margin-top: 0;
   }
 }

 .subheader .ad {
   margin-top: 0;
 }

 @media screen and (min-width: 1024px) {
   .subheader .ad {
     display: block;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader .share {
     float: right;
     margin-top: 4px;
   }
 }

 @media print {
   .subheader {
     margin-top: 0;
   }
 }

 .subheader--cover {
   padding-top: 0;
   margin-bottom: 0;
   border-bottom: 0;
 }

 .subheader--cover .wrapper {
   position: relative;
   padding-top: 48px;
   padding-bottom: 16px;
 }

 @media screen and (min-width: 600px) {
   .subheader--cover .wrapper {
     padding-top: 64px;
   }
 }

 @media screen and (min-width: 768px) {
   .subheader--cover .wrapper {
     padding-top: 28px;
   }
 }

 @media screen and (min-width: 768px) {
   .subheader--cover .ad {
     margin-bottom: 100px;
   }
 }

 @media screen and (min-width: 900px) {
   .subheader--cover .ad {
     margin-bottom: 160px;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader--cover .ad {
     margin-bottom: 208px;
   }
 }

 .subheader--cover .subheader__headline,
 .subheader--cover .subheader__record {
   color: #fff;
 }

 .subheader--cover .subheader__select-year {
   background-color: transparent;
   color: #fff;
 }

 .subheader--cover__image {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: 0;
   left: 0;
   z-index: 0;
   background-size: cover;
   background-position: center;
 }

 @media screen and (min-width: 768px) {
   .subheader--cover__image {
     height: 140px;
   }
 }

 @media screen and (min-width: 900px) {
   .subheader--cover__image {
     height: 200px;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader--cover__image {
     height: 250px;
   }
 }

 .subheader__headline {
   display: inline-block;
   vertical-align: middle;
   margin-bottom: 0;
   text-transform: uppercase;
   font-size: 1em;
 }

 @media screen and (min-width: 768px) {
   .subheader__headline {
     font-size: 1.3em;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader__headline {
     font-size: 1.6em;
   }
 }

 @media screen and (min-width: 1200px) {
   .subheader__headline {
     font-size: 2em;
   }
 }

 .subheader__headline--controls {
   line-height: 36px;
 }

 @media screen and (min-width: 480px) {
   .subheader__headline--controls {
     float: left;
   }
 }

 .subheader__select-year {
   display: inline-block;
   vertical-align: middle;
   margin-left: 16px;
   padding-right: 24px;
   -webkit-appearance: none;
   outline: none;
   border: none;
   color: #666;
   font-size: 1em;
   font-weight: 300;
   background-image: url("images/select-icon.png");
   background-repeat: no-repeat;
   background-color: #fff;
   background-position: 98% center;
   background-position: calc(100% - 10px) center;
 }

 @media screen and (min-width: 768px) {
   .subheader__select-year {
     font-size: 1.3em;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader__select-year {
     font-size: 1.6em;
   }
 }

 @media screen and (min-width: 1200px) {
   .subheader__select-year {
     font-size: 2em;
   }
 }

 .subheader__record {
   font-size: 14px;
   color: #666;
   text-transform: uppercase;
 }

 @media screen and (min-width: 1024px) {
   .subheader__record {
     font-size: 15px;
   }
 }

 @media screen and (min-width: 1200px) {
   .subheader__record {
     font-size: 16px;
   }
 }

 /* --------------------------------------------- *\
    Navigation
 \* --------------------------------------------- */
 .subheader-nav {
   display: block;
 }

 @media screen and (min-width: 768px) {
   .subheader-nav {
     margin-top: 8px;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader-nav {
     margin-top: 16px;
   }
 }

 /** For the enhanced home page */
 .subheader-nav--cover {
   position: relative;
   -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   -ms-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   -o-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
   background-color: #fff;
   margin-bottom: 16px;
   margin-top: 0;
 }

 @media screen and (min-width: 1024px) {
   .subheader-nav--cover {
     margin-bottom: 32px;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader-nav--cover .share {
     margin-top: 8px;
   }
 }

 .subheader-nav__container {
   display: block;
 }

 .subheader-nav__item {
   display: block;
   float: left;
   padding: 8px 0;
   margin-right: 12px;
   color: #000;
   text-decoration: none;
   font-size: 0.9em;
   text-transform: uppercase;
   border-bottom: 2px solid transparent;
 }

 @media screen and (min-width: 768px) {
   .subheader-nav__item {
     padding: 8px 16px;
     margin-right: 0;
   }
 }

 @media screen and (min-width: 1024px) {
   .subheader-nav__item {
     padding: 12px 16px;
     font-size: 1em;
   }
 }

 @media screen and (min-width: 768px) {
   .subheader-nav__item:hover {
     background-color: #eee;
   }
 }

 .subheader-nav__item.is-active {
   font-weight: 600;
   border-color: #ee0000;
 }





 .subheader-nav__item--more {
   padding-right: 32px;
   background-image: url("images/select-icon.png");
   background-repeat: no-repeat;
   background-color: #fff;
   background-position: 98% center;
   background-position: calc(100% - 10px) center;
 }

 .subheader-nav__more {
   display: block;
 }

 @media screen and (min-width: 768px) {
   .subheader-nav__more {
     padding-top: 8px;
   }
 }

 .subheader-nav__more a {
   float: none;
   padding: 8px 0;
 }

 @media screen and (min-width: 768px) {
   .subheader-nav__more a {
     padding: 8px;
   }
 }

 .subheader-nav__more .share {
   display: inline-block;
   margin: 8px 0 16px 0;
 }

 @media screen and (min-width: 768px) {
   .subheader-nav__more .share {
     margin-left: 8px;
   }
 }

 .appCues-nav {
   font-size: 14px !important;
   padding-right: 7px !important;
 }

 .font-white {
   color: white !important;
 }

 /* --------------------------------------------- *\
    Filter
 \* --------------------------------------------- */
 .subheader-filter {
   display: block;
   float: right;
 }

 .subheader-filter span {
   font-weight: bold;
 }

 .subheader-filter__item {
   display: inline-block;
   vertical-align: middle;
   padding: 8px 16px;
   color: #000;
   text-decoration: none;
 }

 /* --------------------------------------------- *\
    Controls
 \* --------------------------------------------- */
 .subheader-controls {
   margin-bottom: 8px;
   margin-left: -8px;
 }

 @media screen and (min-width: 480px) {
   .subheader-controls {
     float: right;
     margin-top: 0;
   }
 }

 /* --------------------------------------------- *\
    objects/tables
 \* --------------------------------------------- */
 /* --------------------------------------------- *\
    Base
 \* --------------------------------------------- */
 .table-container {
   display: block;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }

 .table {
   width: 100%;
 }

 /* --------------------------------------------- *\
    Table Header
 \* --------------------------------------------- */
 .table__header {
   color: #000;
   font-size: 14px;
   font-weight: bold;
   border-bottom: 3px solid #eee;
 }

 @media screen and (min-width: 1024px) {
   .table__header {
     font-size: 15px;
   }
 }

 .table__header td {
   padding: 8px;
   line-height: 1;
 }

 /* --------------------------------------------- *\
    Table Rows
 \* --------------------------------------------- */
 .table__row {
   border-bottom: 1px solid #eee;
   font-size: 14px;
   color: #555;
 }

 @media screen and (min-width: 1024px) {
   .table__row {
     font-size: 15px;
   }
 }

 .table__row:hover {
   background-color: #f9f9f9;
 }

 .table__row td {
   padding: 12px 8px;
   min-width: 100px;
 }

 .table__row--select td:first-child {
   width: 40px;
 }

 .table-card {
   border: 1px solid #ddd;
   background-color: #fff;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   -ms-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   -o-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
 }

 /* --------------------------------------------- modules/tweet ---------------------------------------------- */
 .tweet {
   position: relative;
   margin-bottom: 16px;
 }

 @media screen and (min-width: 768px) {
   .tweet {
     width: calc(100% - 56px);
     margin-left: 56px;
   }
   .tweet:before {
     display: block;
     position: absolute;
     content: "";
     width: 48px;
     height: 48px;
     background: url("/assets/images/twitter-icon-large.png") center no-repeat;
     top: 16px;
     left: -56px;
   }
 }

 @media screen and (min-width: 1024px) {
   .tweet {
     margin-bottom: 32px;
   }
 }

 /* --------------------------------------------- Header ---------------------------------------------- */
 .tweet-header {
   display: block;
   margin-bottom: 12px;
 }

 .tweet__avatar {
   display: inline-block;
   vertical-align: middle;
   width: 35px;
   height: 35px;
   background: #8d207f;
 }

 .tweet-info {
   display: inline-block;
   vertical-align: middle;
   margin-left: 8px;
 }

 .tweet__name {
   text-transform: uppercase;
   font-weight: 700;
   font-size: 1em;
   line-height: 1;
   margin-bottom: 2px;
 }

 @media screen and (min-width: 768px) {
   .tweet__name {
     font-size: 1.1em;
   }
 }

 .tweet__handle {
   line-height: 1;
   font-size: 14px;
   color: #888;
 }

 /* --------------------------------------------- Body ---------------------------------------------- */
 .tweet__text {
   margin-bottom: 4px;
 }

 .tweet__date {
   font-size: 13px;
   color: #767676;
   margin-bottom: 4px;
 }

 /* --------------------------------------------- Actions ---------------------------------------------- */
 .tweet-actions {
   margin-left: -4px;
 }

 .tweet-actions__item {
   display: inline-block;
   position: relative;
   vertical-align: middle;
   width: 30px;
   height: 30px;
   cursor: pointer;
 }

 .tweet-actions__item:after {
   display: block;
   position: absolute;
   content: "";
   width: 24px;
   height: 24px;
   top: 4px;
   left: 4px;
   background-image: url("/assets/images/tweet-sprite.png");
   background-repeat: no-repeat;
   opacity: 0.5;
 }

 .tweet-actions__item:hover:after {
   opacity: 1;
 }

 .tweet-actions__item--reply:after {
   background-position: 0px 0px;
 }

 .tweet-actions__item--retweet:after {
   background-position: 0px -24px;
 }

 .tweet-actions__item--favorite:after {
   background-position: 0px -48px;
 }

 /* --------------------------------------------- *\
    objects/upload
 \* --------------------------------------------- */
 .upload {
   display: block;
   position: fixed;
   z-index: 5;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #000;
   overflow-y: auto;
 }

 .upload__inner {
   display: block;
   position: relative;
   width: 90%;
   max-width: 500px;
   top: 5%;
   left: 5%;
   padding: 32px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   background-color: #fff;
 }

 @media screen and (min-width: 768px) {
   .upload__inner {
     width: 80%;
     top: 15%;
     left: 50%;
     margin-left: -250px;
     padding: 64px;
   }
 }

 .upload__close {
   display: block;
   position: absolute;
   top: 15px;
   right: 15px;
   width: 48px;
   height: 48px;
   font-size: 24px;
   line-height: 48px;
   text-align: center;
   text-decoration: none;
   color: #000;
   font-weight: bold;
 }

 .upload__headline {
   color: #000;
   margin-bottom: 32px;
 }

 /**
 *	Utility: Single responsibility classes
 */
 /* ---------------------------------------------- *\
     utility/position
 \* ---------------------------------------------- */
 /** Hide/Show elements based on screen size. ex.  hide  lap-show  will hide an element until 1024px. */
 .hide {
   display: none;
 }

 @media screen and (min-width: 480px) {
   .phone-land-hide {
     display: none;
   }
   .phone-land-show {
     display: block;
   }
   .phone-land-show.grid__item {
     display: inline-block;
   }
 }

 @media screen and (min-width: 600px) {
   .note-hide {
     display: none;
   }
   .note-show {
     display: block;
   }
   .note-show.grid__item {
     display: inline-block;
   }
 }

 @media screen and (min-width: 768px) {
   .tab-hide {
     display: none;
   }
   .tab-show {
     display: block;
   }
   .tab-show.grid__item {
     display: inline-block;
   }
 }

 @media screen and (min-width: 900px) {
   .small-lap-hide {
     display: none;
   }
   .small-lap-show {
     display: block;
   }
   .small-lap-show.grid__item {
     display: inline-block;
   }
 }

 @media screen and (min-width: 1024px) {
   .lap-hide {
     display: none;
   }
   .lap-show {
     display: block;
   }
   .lap-show.grid__item {
     display: inline-block;
   }
 }

 @media screen and (min-width: 1200px) {
   .desk-hide {
     display: none;
   }
   .desk-show {
     display: block;
   }
   .desk-show.grid__item {
     display: inline-block;
   }
 }

 @media screen and (min-width: 1440px) {
   .wide-hide {
     display: none;
   }
   .wide-show {
     display: block;
   }
   .wide-show.grid__item {
     display: inline-block;
   }
 }

 .spacing--vertical {
   display: block;
   clear: both;
   height: 16px;
 }

 .float--left {
   float: left;
 }

 .float--right {
   float: right;
 }

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

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

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

 .middle {
   vertical-align: middle;
 }

 table.dataTable {
   clear: both;
   margin-top: 6px !important;
   margin-bottom: 6px !important;
   max-width: none !important;
 }

 table.dataTable td,
 table.dataTable th {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 }

 table.dataTable td.dataTables_empty,
 table.dataTable th.dataTables_empty {
   text-align: center;
 }

 table.dataTable.nowrap th,
 table.dataTable.nowrap td {
   white-space: nowrap;
 }

 div.dataTables_wrapper div.dataTables_length label {
   font-weight: normal;
   text-align: left;
   white-space: nowrap;
 }

 div.dataTables_wrapper div.dataTables_length select {
   width: 75px;
   display: inline-block;
 }

 div.dataTables_wrapper div.dataTables_filter {
   text-align: right;
 }

 div.dataTables_wrapper div.dataTables_filter label {
   font-weight: normal;
   white-space: nowrap;
   text-align: left;
 }

 div.dataTables_wrapper div.dataTables_filter input {
   margin-left: 0.5em;
   display: inline-block;
   width: auto;
 }

 div.dataTables_wrapper div.dataTables_info {
   padding-top: 8px;
   white-space: nowrap;
 }

 div.dataTables_wrapper div.dataTables_paginate {
   margin: 0;
   white-space: nowrap;
   text-align: right;
 }

 div.dataTables_wrapper div.dataTables_paginate ul.pagination {
   margin: 2px 0;
   white-space: nowrap;
 }

 div.dataTables_wrapper div.dataTables_processing {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200px;
   margin-left: -100px;
   margin-top: -26px;
   text-align: center;
   padding: 1em 0;
 }

 table.dataTable thead > tr > th.sorting_asc,
 table.dataTable thead > tr > th.sorting_desc,
 table.dataTable thead > tr > th.sorting,
 table.dataTable thead > tr > td.sorting_asc,
 table.dataTable thead > tr > td.sorting_desc,
 table.dataTable thead > tr > td.sorting {
   padding-right: 30px;
 }

 table.dataTable thead > tr > th:active,
 table.dataTable thead > tr > td:active {
   outline: none;
 }

 table.dataTable thead .sorting,
 table.dataTable thead .sorting_asc,
 table.dataTable thead .sorting_desc,
 table.dataTable thead .sorting_asc_disabled,
 table.dataTable thead .sorting_desc_disabled {
   cursor: pointer;
   position: relative;
 }

 table.dataTable thead .sorting:after,
 table.dataTable thead .sorting_asc:after,
 table.dataTable thead .sorting_desc:after,
 table.dataTable thead .sorting_asc_disabled:after,
 table.dataTable thead .sorting_desc_disabled:after {
   position: absolute;
   bottom: 8px;
   right: 8px;
   display: block;
   font-family: FontAwesome;
   opacity: 0.5;
 }

 table.dataTable thead .sorting:after {
   opacity: 0.2;
   content: "\f0dc"; /* sort */
 }

 table.dataTable thead .sorting_asc:after {
   content: "\f0de"; /* sort-by-attributes */
 }

 table.dataTable thead .sorting_desc:after {
   content: "\f0dd"; /* sort-by-attributes-alt */
 }

 table.dataTable thead .sorting_asc_disabled:after,
 table.dataTable thead .sorting_desc_disabled:after {
   color: #eee;
 }

 div.dataTables_scrollHead table.dataTable {
   margin-bottom: 0 !important;
 }

 div.dataTables_scrollBody table {
   border-top: none;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }

 div.dataTables_scrollBody table thead .sorting:after,
 div.dataTables_scrollBody table thead .sorting_asc:after,
 div.dataTables_scrollBody table thead .sorting_desc:after {
   display: none;
 }

 div.dataTables_scrollBody table tbody tr:first-child th,
 div.dataTables_scrollBody table tbody tr:first-child td {
   border-top: none;
 }

 div.dataTables_scrollFoot table {
   margin-top: 0 !important;
   border-top: none;
 }

 @media screen and (max-width: 767px) {
   div.dataTables_wrapper div.dataTables_length,
   div.dataTables_wrapper div.dataTables_filter,
   div.dataTables_wrapper div.dataTables_info,
   div.dataTables_wrapper div.dataTables_paginate {
     text-align: center;
   }
 }

 table.dataTable.table-condensed > thead > tr > th {
   padding-right: 20px;
 }

 table.dataTable.table-condensed .sorting:after,
 table.dataTable.table-condensed .sorting_asc:after,
 table.dataTable.table-condensed .sorting_desc:after {
   top: 6px;
   right: 6px;
 }

 table.table-bordered.dataTable {
   border-collapse: separate !important;
 }

 table.table-bordered.dataTable th,
 table.table-bordered.dataTable td {
   border-left-width: 0;
 }

 table.table-bordered.dataTable th:last-child,
 table.table-bordered.dataTable th:last-child,
 table.table-bordered.dataTable td:last-child,
 table.table-bordered.dataTable td:last-child {
   border-right-width: 0;
 }

 table.table-bordered.dataTable tbody th,
 table.table-bordered.dataTable tbody td {
   border-bottom-width: 0;
 }

 div.dataTables_scrollHead table.table-bordered {
   border-bottom-width: 0;
 }

 div.table-responsive > div.dataTables_wrapper > div.row {
   margin: 0;
 }

 div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
   padding-left: 0;
 }

 div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
   padding-right: 0;
 }

 @media print {
   a[href]:after {
     content: "";
   }
 }

 /* new styles - abstractred from bootstrap core */
 /* header */
 .header {
   display: none;
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
 }

 .header:after {
   display: block;
   position: absolute;
   content: "";
   width: 100%;
   height: calc(100% - 54px);
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.5);
 }

 @media screen and (min-width: 1024px) {
   .header {
     display: block;
   }
 }

 .header-top {
   display: block;
   position: relative;
   z-index: 1;
 }

 .header-bottom {
   display: block;
   position: relative;
   z-index: 1;
   padding-top: 37px;
   padding-bottom: 0px;
 }

 .header__title {
   font-size: 48px;
   margin: 0;
   color: #fff;
   text-transform: uppercase;
 }

 .header__school {
   font-size: 16px;
   text-transform: uppercase;
   color: #fff;
 }

 /* media */
 .media-object {
   /* default */
   width: 64px;
   height: 64px;
 }

 .media-object-xs {
   width: 16px;
   height: 16px;
 }

 .media-object-sm {
   width: 32px;
   height: 32px;
 }

 .media-object-md {
   width: 48px;
   height: 48px;
 }

 .media-object-lg {
   width: 96px;
   height: 96px;
 }

 .media-object-xl {
   width: 128px;
   height: 128px;
 }

 /* primaryNav */
 #primaryNav {
   background-color: #000000;
   margin: 0;
   border: 0 none;
   border-radius: 0;
 }

 #primaryNav .nav-item-level1:not(.dropdown):hover > a {
   text-decoration: underline;
 }

 #primaryNav .dropdown-menu {
   width: 800px;
   min-height: 284px;
   padding: 0;
 }

 #primaryNav .yamm-content {
   padding: 16px 16px 16px 0;
 }

 #primaryNav .dropdown-menu-right .yamm-content {
   padding: 16px 0;
   text-align: right;
 }

 #primaryNav .dropdown__ad {
   width: 300px;
   height: 250px;
   margin: 0;
 }

 #primaryNav .nav-item-level1.dropdown:not(.dropdown-more) .caret {
   visibility: hidden;
 }

 #primaryNav .nav-item-level1.dropdown:not(.dropdown-more):hover .caret {
   visibility: visible;
 }

 #primaryNav .nav-level2 > .nav-stacked {
   border-right: 1px solid #dddddd;
 }

 #primaryNav .dropdown-menu-right .nav-level2 > .nav-stacked {
   border-right: 0 none;
   border-left: 1px solid #dddddd;
 }

 #primaryNav .nav-item-level2 {
   margin: 0;
 }

 #primaryNav .nav-item-level2 a[data-toggle="collapse"]:after {
   content: "\0000a0\0000a0\0000a0";
 }

 #primaryNav .nav-item-level2:hover > a[data-toggle="collapse"]:after {
   content: "\0000a0\025B8";
 }

 #primaryNav .nav-item-level2 a[data-toggle="collapse"].active {
   background-color: #337ab7;
   color: #ffffff;
 }

 #primaryNav .nav-item-level2 a[data-toggle="collapse"].active:after {
   content: "\0000a0\025B8";
 }

 #primaryNav .dropdown-menu-right .nav-item-level2 a[data-toggle="collapse"]:after {
   content: "";
 }

 #primaryNav .dropdown-menu-right .nav-item-level2:hover > a[data-toggle="collapse"]:after {
   content: "";
 }

 #primaryNav .dropdown-menu-right .nav-item-level2 a[data-toggle="collapse"].active:after {
   content: "";
 }

 #primaryNav .dropdown-menu-right .nav-item-level2 a[data-toggle="collapse"]:before {
   content: "\0000a0\0000a0\0000a0";
 }

 #primaryNav .dropdown-menu-right .nav-item-level2:hover > a[data-toggle="collapse"]:before {
   content: "\0000a0\025C2";
 }

 #primaryNav .dropdown-menu-right .nav-item-level2 a[data-toggle="collapse"].active:before {
   content: "\0000a0\025C2";
 }

 #primaryNav .nav-level3 {
   padding-left: 0;
   padding-right: 0;
 }

 #primaryNav .navbar-collapse > ul > li > a {
   color: #ffffff;
   text-transform: uppercase;
   font-weight: 600;
   cursor: pointer;
   padding-left: 12px;
   padding-right: 12px;
 }

 #primaryNav .navbar-collapse > ul > li > a:hover {
   color: #a4a4a4;
 }

 #primaryNav .nav-pills > li > a {
   padding: 4px 16px;
   border-radius: 0;
 }

 #primaryNav .nav-pills > li > a:hover {
   background-color: #a4a4a4;
   color: #ffffff;
 }

 #primaryNav .nav-pills > li > a:hover > .nav-triangle {
   width: 0;
   height: 0;
   border-top: 11px solid transparent;
   border-right: 11px solid #ffffff;
   border-bottom: 11px solid transparent;
   right: -1px;
   top: calc(50%-10px);
   position: absolute;
 }

 #primaryNav .dropdown-menu-right .nav-pills > li > a:hover > .nav-triangle {
   width: 0;
   height: 0;
   border-right: 0 none;
   border-top: 11px solid transparent;
   border-left: 11px solid #ffffff;
   border-bottom: 11px solid transparent;
   left: -1px;
   top: calc(50%-10px);
   position: absolute;
 }

 #siteEditor {
   font-size: 14px;
   font-weight: normal;
   line-height: 1.52857143;
 }
 .at4-visually-hidden {
   color: #000 !important;
   display: block;
   font-size: 19px;
   background-color: #fff;
 }
 #skip-navigation {
   color: #000 !important;
 }
 .at4-share-label {
   color: #000 !important;
 }

 .x_twitter_label {
  display:inline-block;
  margin-bottom:9px;
  margin-right:5px;
}

.x_twitter_scroll {
  height: 100%;
  overflow: auto;
}


.bt-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bt-multiline-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bt-carousel-title{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sliderBtn {
  width: 96%;
  position: absolute;
  bottom: 12px;
  left: 2%;
  font-size: 12px !important;
}

@media (max-width: 767px) {
  .bt-carousel-subtext {
    font-size: 10px !important;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .bt-carousel-title {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sliderBtn {
    width: 96%;
    position: absolute;
    bottom: 10px;
    left: 2%;
    font-size: 9px
  }
}

.bt-carousel-subtext {
  font-size: 14px !important;
    font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html {
  position: relative;
  min-height: 100%;
}

@media (max-width: 767px) {
  .bt-carousel-subtext {
    font-size: 10px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .bt-carousel-title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sliderBtn {
    width: 96%;
    position: absolute;
    bottom: 10px;
    left: 2%;
    font-size: 9px
  }
}


 /*# sourceMappingURL=styles.css.map */