.carousel {
  .content { background-color: $carousel-background-color; padding: 30px 30px; }
  .caroufredsel_wrapper { background-color: $carousel-background-color; height: 286px !important; margin: 0px !important; overflow: hidden; width: 100% !important; }

  ul { height: 270px; list-style: none; overflow: hidden;
    li { background-color: $carousel-item-background-color; float: left; height: 286px; margin-right: 30px; width: auto !important;
      .image { margin-bottom: 10px; position: relative;
        a { @include transition(background-color .2s ease-in); background-color: rgba(0, 0, 0, 0); display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;
          &:hover { background-color: rgba(0, 0, 0, .5); background-image: url('../img/icons/eye.png'); background-position: center center; background-repeat: no-repeat; }
        }
      }
      h3 { line-height: 22px; margin: 3px 0px 0px 0px; padding: 0px 10px;
        a { @include transition(color .1s ease-in); color: $carousel-item-title-color; font-size: 18px; font-weight: normal;
          &:hover { color: darken($carousel-item-title-color, 10%); text-decoration: none; }
        }
      }
      .location { padding: 0px 10px; }
      .price { background-color: #ffffff; color: $carousel-item-price-color; font-size: 18px; padding: 5px 16px; position: absolute; right: -10px; top: 130px; }
      .area{ color: $carousel-item-area-color; float: left; margin-top: 8px;
        .key { display: inline; font-weight: bold; padding: 0px 0px 0px 10px; }
        .value { display: inline; }
      }
      .bedrooms { float: right; margin-right: 10px; padding-top: 8px; 
          .inner { background-image: url('../img/icons/bedrooms.png'); background-position: left center; background-repeat: no-repeat; background-size: 21px 12px; color: $carousel-item-bedrooms-color; padding-left: 30px;
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
              background-image: url('../img/icons/bedrooms@2x.png');
          }
        }
      }
      .bathrooms { float: right; margin-right: 10px; padding-top: 8px;  
        .inner { background-image: url('../img/icons/bathrooms.png'); background-position: left center; background-repeat: no-repeat; background-size: 14px 20px; color: $carousel-item-bedrooms-color; padding-left: 25px;
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            background-image: url('../img/icons/bathrooms@2x.png');
          }
        }
      }
    }    
  }

  .carousel-prev { @include transition(opacity .2s linear, background-color .2s linear); background-color: $carousel-button-background-color; background-image: url('../img/arrow-left-white.png'); background-position: center center; background-repeat: no-repeat; background-size: 8px 11px; cursor: pointer; height: 40px; margin-top: 10px; padding: 0px; position: absolute; left: 15px; text-indent: -9999px; top: 50%; width: 40px; z-index: 999;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/arrow-left-white@2x.png');
    }
    &:hover { background-color: darken($carousel-button-background-color, 20%)}
  }
  .carousel-next { @include transition(opacity .2s linear, background-color .2s linear); background-color: $carousel-button-background-color; background-image: url('../img/arrow-right-white.png'); background-position: center center; background-repeat: no-repeat; background-size: 8px 11px; cursor: pointer; height: 40px; margin-top: 10px; padding: 0px; position: absolute; right: 15px; text-indent: -9999px; top: 50%; width: 40px; z-index: 999;
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      background-image: url('../img/arrow-right-white@2x.png');
    }
    &:hover { background-color: darken($carousel-button-background-color, 10%)}
  }

  &.property {
    .content { background-color: transparent; position: relative; }
    .caroufredsel_wrapper { background-color: transparent; height: 75px !important; }

    ul { height: 75px;
      li { @include transition(opacity .2s ease-in); background-color: transparent; height: 75px; margin: 0px 5px; opacity: .3;
        &:hover, &.active { opacity: 1; }
        img { cursor: pointer; height: 75px; width: auto; }
      }
    }
    .carousel-prev { display: block; top: 37px; }
    .carousel-next { display: block; top: 37px; }
  }
}

.carousel-wrapper {
  .carousel { margin: 0px;
    .content { padding-left: 100px; padding-right: 100px;
      h2 { color: #fff; margin-bottom: 30px; margin-top: 0px; }
    }
    .carousel-prev { left: 50px; margin-left: -20px; }
    .carousel-next { margin-right: -20px; right: 50px; }
  }
}

@media (max-width: 767px) {
  .carousel-wrapper {
    .carousel {
      .content { padding-left: 80px; padding-right: 80px; }
    }
  }
}