.superbowl-container {
  background: url('https://crds-cms-uploads.imgix.net/content/images/starbgwide.gif');
}

.superbowl-title-mobile img {
  max-width: 200px;
  margin: 0 auto;
}

.superbowl-intro {
  background: #DFDDDD url('https://crds-cms-uploads.imgix.net/content/images/startrans2.png');
  overflow: visible;
  position: relative;

  &:before,
  &:after {
    display: block;
    content: ' ';
    left: 0;
    right: 0;
    background: #fff;
    position: absolute;
    z-index: 1;
  }

  &:before {
    top: 0;
    height: 15px;
  }

  &:after {
    bottom: 0;
    height: 30px;
  }

  h3,
  h4,
  h5 {
    color: #fff;
  }

  @media only screen and (min-width:  $screen-md-min){
    h3 {
      margin-top: $line-height-computed/2;
    }
  }

  .videoWrapper {
    margin-top: -$grid-gutter-width/2;
    margin-bottom: $grid-gutter-width;


    @media only screen and (min-width:  $screen-sm-min){
      margin-bottom: 0;
      margin-top: $line-height-computed;
    }

    @media only screen and (min-width:  $screen-md-min){
      margin-top: -$grid-gutter-width;
      //min-height: 320px;
    }
  }

  .home-series-img {
    @media only screen and (min-width:  $screen-sm-min){
      padding-right: 0px;
    }
  }

  .superbowl-desc {
    background: #464749;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#090f2a+0,356aa0+100 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#356aa0+1,090f2a+99 */

    background: rgb(53,106,160); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(53,106,160,1) 1%, rgba(9,15,42,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(53,106,160,1) 1%,rgba(9,15,42,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(53,106,160,1) 1%,rgba(9,15,42,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#356aa0', endColorstr='#090f2a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #fff;
    padding-bottom: $grid-gutter-width/2;
    position: relative;
    z-index: 2;

    ol {
      list-style-position: inside;
      padding-left: 0;
    }
  }
}

.superbowl-title {
  font-family: $brand-font-family;
  font-weight: 700;
  color: rgba(53,106,160,1);
  text-transform: uppercase;
}

.btn-superbowl {
  color: darken(#FFFFFF, 3%);
  font-weight: bold;
  font-family: $brand-font-family;
  @include transition(all .15s ease-in);
  line-height: 1;
  text-transform: uppercase;

  &:active,
  &:hover {
    color: darken(#FFFFFF, 1%);
  }

  span {
    font-size: 80%;
  }

  &.btn-superbowl-single {
    line-height: 54px;
  }

  &.btn-lg {
    height: 76px;
    font-size: 170%;
  }

  &.btn-superbowl-red {
    @include gradient(#851A19,#B5001B);
    text-shadow: 1px 1px 1px #5B0A0E;

    &:active,
    &:hover {
      @include gradient(darken(#851A19, 5%), darken(#B5001B, 5%));
    }
  }

  &.btn-superbowl-blue {
    @include gradient(#0C194D,#123082);
    text-shadow: 1px 1px 1px #08173E;

    &:active,
    &:hover {
      color: darken(#FFFFFF, 1%);
      @include gradient(darken(#0C194D, 8%), darken(#123082, 8%));
    }
  }
}

.addthis_superbowl_sharing {
  text-align: center;

  @media only screen and (min-width:  $screen-sm-min){
    text-align: left;
    float: left;
  }
  /*
  @media only screen and (min-width:  $screen-xs-max){
    margin-top: -18px;
  }
  */

  a {
    padding: 5px;
    background: $gray-lighter;
    border-radius: 4px;
    color: $gray-dark;
    width: 40px;
    height: 40px;
    text-align: center;
    @include transition(all .15s ease-in);
    float: none;

    .icon-facebook,
    .icon-twitter {
      color: $gray-dark;
    }

    &:hover {
      background: darken($gray-lighter, 15%);
    }
  }
}

.superbowl-share {
  text-align: center;

  @media only screen and (min-width:  $screen-sm-min){
    float: left;
    text-align: left;
  }

  h4.single-title {
    line-height: 2;
  }
}

.modal-backdrop.blurred-background.in {
  opacity: .7;
}