/* Common to ALL designs */
.socs-features,
.socs-features * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Headline */
.socs-features .socs-feature > h3 {
  line-height: 1.25;
  margin: 0;
}

/* Tagline */
.socs-features .socs-feature > h4,
.socs-features .item > h4 {
  font-weight: normal;
  margin: 0;
}

.socs-features .socs-feature > p {
  margin-top: 1em;
}

.socs-features .socs-feature-read-more {
  margin-bottom: 0;
  text-align: center;
}

/* Common to Front Page ------------------------------------------------------- */
.socs-features.socs-features-fp .socs-feature {
  padding: 20px;
}

.socs-features.socs-features-fp .socs-feature a {
  color: #fff;
}

/* Force text to be white on front page */
.socs-features.socs-features-fp .socs-feature-text span[style] {
  color: #fff !important;
}

/* Front page overrides for mainPageContent_2col.tpl (span4 width column) ----- */
.span4 > .socs-features.socs-features-fp .socs-feature .socs-feature-img {
  display: block;
  float: none;
  margin: 0 0 1em 0;
}

/* Headline */
.span4 > .socs-features.socs-features-fp .socs-feature > h3 {
  font-size: 20px;
}

/* Tagline */
.span4 > .socs-features.socs-features-fp .socs-feature > h4 {
  font-size: 16px;
}

.span4 > #socs-feature-carousel.socs-features-fp .item,
.span4 > #socs-feature-scroll.socs-features-fp .als-item {
  height: 300px;
}

.span4 > #socs-feature-scroll.socs-features-fp .als-viewport {
  width: 89% !important;
}

.span4 > #socs-feature-scroll.socs-features-fp .als-prev,
.span4 > #socs-feature-scroll.socs-features-fp .als-next {
  right: 10px;
}

/* Stacked -------------------------------------------------------------------- */
.socs-features-stacked .socs-feature {
  margin-bottom: 2em;
  padding: .5em;
}
.socs-features-stacked.socs-features-fp .socs-feature { /* Front Page Override */
  margin-bottom: 0;
}

.socs-features-stacked .socs-feature:nth-child(even) {
  background-color: #f7f7f7;
}

.socs-features-stacked .socs-feature-img {
  float: right;
  margin: 0 0 1em 1em;
}

.socs-features-stacked .socs-feature-img.even {
  float: left;
  margin: 0 1em 1em 0;
}

/* Split - 1 = 100%, 2 & 3 = 50% ---------------------------------------------- */
.socs-features-split > .socs-feature {
  border-bottom: none;
  margin-bottom: 2em;
}

.socs-features-split > .socs-feature.one {
  background-color: #f7f7f7;
  clear: left;
  padding: .5em;
}
.socs-features-split > .socs-feature.one + .socs-feature.one {
  background-color: transparent;
}

.socs-features-split > .socs-feature.two,
.socs-features-split > .socs-feature.three {
  float: left;
  width: 50%;
}

.socs-features-split > .socs-feature.two {
  padding-right: 1em;
}

.socs-features-split > .socs-feature.two.bordered {
  border-right: 1px solid #ccc;
}

.socs-features-split > .socs-feature.three {
  padding-left: 1em;
}

.socs-features-split > .socs-feature.three.bordered {
  border-left: 1px solid #ccc;
}

.socs-features-split .socs-feature.one .socs-feature-img {
  float: left;
  margin: 0 1em 1em 0;
}

.socs-features-split .socs-feature.two .socs-feature-img,
.socs-features-split .socs-feature.three .socs-feature-img {
  display: block;
  float: none;
  margin: 0 0 1em 0;
}

/* Reduce left/right padding for "split" features in the same box on the front page (mainPageContent_option4.tpl) */
.span8 > .socs-features-split.socs-features-fp .split-in-one-box.two {
  padding-right: 5px;
}
.span8 > .socs-features-split.socs-features-fp .split-in-one-box.three {
  padding-left: 5px;
}

/* Carousel ------------------------------------------------------------------- */
#socs-feature-carousel {
  margin-bottom: 2em;
  padding-top: 35px; /* Make room for controls at top */
}
#socs-feature-carousel.socs-features-fp { /* Front Page Override */
  margin-bottom: 0;
  padding: 45px 20px 15px;
}

/* If carousel has a single item or not showing controls, remove top padding that made room for controls */
#socs-feature-carousel.carousel-single {
  padding-top: 0;
}

#socs-feature-carousel .carousel-indicators {
  position: static;
  text-align: center;
}

#socs-feature-carousel .carousel-indicators li {
  border: 1px solid #999;
  border-radius: 10px;
  cursor: pointer;
  display: inline-block;
  float: none;
  margin: 1px;
  text-indent: -99999em;
}
#socs-feature-carousel.socs-features-fp .carousel-indicators li { /* Front Page Override */
  border: 1px solid #fff;
}

#socs-feature-carousel .carousel-indicators .active {
  background-color: #999;
  border-color: #666;
  margin: 0;
  height: 12px;
  width: 12px;
}
#socs-feature-carousel.socs-features-fp .carousel-indicators .active { /* Front Page Override */
  background-color: #fff;
}

#socs-feature-carousel .carousel-control {
  background: transparent;
  border: none;
  color: #333;
  font-size: 20px;
  line-height: 1;
  margin: 0;
  top: 8px;
  left: auto;
  height: auto;
  width: 5%;
  -webkit-transition: .5s all ease;
      -ms-transition: .5s all ease;
          transition: .5s all ease;
}
#socs-feature-carousel.socs-features-fp .carousel-control { /* Front Page Override */
  color: #fff;
  top: 18px;
  width: auto;
}

#socs-feature-carousel .carousel-control.right {
  right: 0;
}
#socs-feature-carousel.socs-features-fp .carousel-control.right { /* Front Page Override */
  right: 20px;
}

#socs-feature-carousel .carousel-control:hover,
#socs-feature-carousel .carousel-control:focus {
  opacity: 1;
  filter: alpha(opacity=100);
}

#socs-feature-carousel .carousel-inner {
  margin-bottom: 1em;
}

#socs-feature-carousel .carousel-inner .item {
  height: 250px;
  overflow: hidden;
}
#socs-feature-carousel.socs-features-fp .carousel-inner .item { /* Front Page Override */
  padding: 0;
}

@media print {
  #socs-feature-carousel .carousel-inner .item {
    height: auto !important;
  }
}

.socs-features.carousel .item .socs-feature-img {
  float: right;
  margin: 0 0 1em 1em;
}

#socs-feature-carousel .socs-feature-text {
  margin-top: 1em;
}

#socs-feature-carousel .socs-feature-text-fade {
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 80%, #fff 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 80%, #fff 100%); /* W3C */
  height: 100px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#socs-feature-carousel.socs-features-fp .socs-feature-text-fade { /* Front Page Override */
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #6a0d12 80%, #6a0d12 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #6a0d12 80%, #6a0d12 100%); /* W3C */
}

#socs-feature-carousel .socs-feature-read-more {
  position: absolute;
  bottom: 0;
  width: 100px;
  left: 50%; 
  margin-left: -50px;
}

/* Vertical Scroll ------------------------------------------------------------ */
#socs-feature-scroll.als-container {
  position: relative;
  width: 100%;
}
#socs-feature-scroll.als-container.socs-features-fp { /* Front Page Override */
  padding-left: 20px;
}

#socs-feature-scroll .als-viewport {
  overflow: hidden;
  position: relative;
  width: 95% !important;
}

#socs-feature-scroll .als-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100% !important;
}

#socs-feature-scroll .als-item {
  border-bottom: 1px solid #ccc;
  display: block;
  float: left;
  height: 250px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#socs-feature-scroll.socs-features-fp .als-item { /* Front Page Override */
  border-bottom: none;
  padding-left: 0;
  padding-right: 0;
}
#socs-feature-scroll.socs-features-fp .als-item + .als-item { /* Front Page Override */
  border-top: 1px solid #eee;
}

@media print {
  #socs-feature-scroll .als-item {
    height: auto !important;
  }
}

.socs-features.als-container .als-item .socs-feature-img {
  float: right;
  margin: 0 0 1em 1em;
}

#socs-feature-scroll .socs-feature-text {
  margin-top: 1em;
}

#socs-feature-scroll .socs-feature-text-fade {
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 80%, #fff 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 80%, #fff 100%); /* W3C */
  height: 100px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#socs-feature-scroll.socs-features-fp .socs-feature-text-fade { /* Front Page Override */
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #6a0d12 80%, #6a0d12 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #6a0d12 80%, #6a0d12 100%); /* W3C */
  height: 100px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

#socs-feature-scroll .socs-feature-read-more {
  margin: 0 0 5px -50px;
  position: absolute;
  bottom: 0;
  width: 100px;
  left: 50%;
}

#socs-feature-scroll .als-prev,
#socs-feature-scroll .als-next {
  color: #888;
  font-size: 20px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 5%;
  -webkit-transition: .5s color ease;
      -ms-transition: .5s color ease;
          transition: .5s color ease;
}
#socs-feature-scroll.socs-features-fp .als-prev,
#socs-feature-scroll.socs-features-fp .als-next { /* Front Page Override */
  color: #ddd;
}

#socs-feature-scroll .als-prev {
  top: 39%;
}

#socs-feature-scroll .als-next {
  bottom: 47%;
}

#socs-feature-scroll .als-prev:hover,
#socs-feature-scroll .als-prev:focus,
#socs-feature-scroll .als-next:hover,
#socs-feature-scroll .als-next:focus {
  color: #333;
  text-decoration: none;
}
#socs-feature-scroll.socs-features-fp .als-prev:hover,
#socs-feature-scroll.socs-features-fp .als-prev:focus,
#socs-feature-scroll.socs-features-fp .als-next:hover,
#socs-feature-scroll.socs-features-fp .als-next:focus { /* Front Page Override */
  color: #fff;
}

/* L-SOCSAPP - Update script appending... */
.socs-features .img-responsive {
  display: block;
  height: auto;
  max-height: 400px;
  max-width: 100%;
}

.socs-features-stacked .socs-feature-img,
.socs-features-split .socs-feature.one .socs-feature-img,
.socs-features.carousel .item .socs-feature-img,
.socs-features.als-container .als-item .socs-feature-img {
  max-width: 279px;
}

#socs-feature-carousel .carousel-inner .item,
#socs-feature-scroll .als-item {
  height: 450px;
}

#socs-feature-carousel .socs-feature-text-fade,
#socs-feature-scroll .socs-feature-text-fade {
  pointer-events: none;
}