.properties-grid {
	.property { @include clearfix-normal; @include shadow; background-color: $properties-grid-background-color; margin-bottom: 30px; padding-bottom: 10px; position: relative;
    .image { overflow: hidden; 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%; z-index: 200;
        &:hover { background-color: rgba(0, 0, 0, .5); background-image: url('../img/icons/eye.png'); background-position: center center; background-repeat: no-repeat; }
      }
      img { height: auto; width: 100%; }
    }
    h2 { line-height: 22px; margin: 10px 0px 0px 0px; padding: 0px 15px;
        a { @include transition(color .1s ease-in); color: $properties-grid-title-color; font-size: 18px; font-weight: normal;
            &:hover { color: darken($properties-grid-title-color, 10%); text-decoration: none; }
        }
    }    
		.location { padding: 0px 15px; }
		.price { background-color: $properties-grid-price-background-color; color: $properties-grid-price-color;; font-size: 18px; padding: 5px 16px; position: absolute; right: 15px; bottom: 15px; }
        .reduced { background-color: $properties-grid-reduced-background-color; color: $properties-grid-reduced-color; font-size: 18px; padding: 5px 16px; position: absolute; left: 15px; bottom: 15px; }
		.area { color: $properties-grid-area-color; float: left; margin-top: 8px; 
			.key { display: inline; font-weight: bold; padding: 0px 0px 0px 15px; }
			.value { display: inline; }
		}
		.bedrooms { float: right; margin-right: 10px; padding-top: 8px; 
			.content { background-image: url('../img/icons/bedrooms.png'); background-position: left center; background-repeat: no-repeat; background-size: 21px 12px; color: $properties-grid-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: 15px; padding-top: 8px;
			.content { background-image: url('../img/icons/bathrooms.png'); background-position: left center; background-repeat: no-repeat; background-size: 14px 20px; color: $properties-grid-bathrooms-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');
        }
      }
		}
    &:nth-last-child(1), &:nth-last-child(2), &:nth-last-child(3) { margin-bottom: 0px; }
	}  
}

@media (min-width: 768px) and (max-width: 1199px) {
  .properties-grid {
    .property {
      .reduced, .price { font-size: 14px; padding: 5px 8px; }
    }
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .properties-grid {
    .property {
      .reduced, .price { font-size: 11px; padding: 5px 4px; }
      h2 { 
        a { font-size: 14px; }
      }
      .location { font-size: 12px; }
      .area { float: none; margin: 0px; }
      .area, .bedrooms, .bathrooms { font-size: 12px; }
      .bedrooms, .bathrooms { float: left; margin-left: 16px; }
    }
  }
}

@media (max-width: 767px) {
  .properties-grid {
    .property {
      &:nth-last-child(1), &:nth-last-child(2), &:nth-last-child(3) { margin-bottom: 30px; }
      &:last-child { margin-bottom: 0px; }
    }
  }
}
.widget {
  &.properties {
    .content {
      .property { @include clearfix-normal; @include shadow; background-color: $properties-widget-background-color; display: block; margin-bottom: 15px;
        .image { float: left; margin-right: 10px; position: relative; width: 100px;
          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; }
          }
        }
        .wrapper { padding: 4px 0px; }
        .title { margin-bottom: 7px; margin-top: 5px; 
          h3 { line-height: 1; margin: 0px; 
            a { font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; }
          }
        }
        .location { font-size: 12px; line-height: 1; margin-bottom: 5px; }
        .price { color: $properties-widget-price-color; font-size: 12px; font-weight: bold; line-height: 1; }
        &:last-child { margin-bottom: 0px; }
      }
    }
  }
}

@media (max-width: 1199px) {
  .widget {
    &.properties {
      .content {
        .property {
          .image { width: 80px; }
          .title { margin-bottom: 3px; margin-top: 0px; 
            h3 { 
              a { font-size: 12px; }
            }
          }          
        }
      }
    }
  }
}

@media (max-width: 979px) {
    .widget {
    &.properties {
      .content {
        .property {
          .image { float: none; width: 100%; 
            img { width: 100%; }
          }
          .title { margin-bottom: 0px; padding: 0px 10px; 
            h3 { margin-bottom: 5px; margin-top: 5px; 
              a { font-size: 14px; }
            }
          }
          .location { padding: 0px 10px; }
          .price { margin-bottom: 5px; padding: 0px 10px; }
        }
      }
    }
  }
}

.properties-rows {      
    .filter { @include clearfix-normal; @include shadow; background-color: $properties-filter-horizontal-background-color; display: block; margin: 0px 0px 30px 0px; height: auto; padding: 10px;
      form { float: right; margin: 0px;
        .control-group { float: right; margin-bottom: 0px;
          label { color: $properties-filter-horizontal-label-color; font-weight: bold; line-height: 30px; }
          select { width: 100px; }
          .control-label { width: 100px; }
          .controls { margin-left: 120px; }
          .chzn-container { @include box-sizing(border-box); }
        }
      }   
    }   

  .property { @include clearfix-normal; @include shadow; background-color: $properties-rows-background-color; margin-bottom: 30px; padding: 0px; position: relative;
    &:last-child { margin-bottom: 0px; }
    .title-price { padding-bottom: 3px; padding-top: 17px;
      .title {
        h2 { line-height: 1; margin: 0px; 
          a { @include transition(color .2s ease-in); color: $properties-rows-h2-color; font-size: 24px; font-weight: normal;
            &:hover { color: darken($properties-rows-h2-color, 10%); text-decoration: none; }
          }   
        }
      }   
      .price { clear: right; color: $properties-rows-price-color; float: right; font-size: 24px; margin-top: 3px; padding-right: 30px; text-align: right; }
    }
    .body { padding-bottom: 7px;
      p { padding-right: 30px; }
    }
    .image { position: relative; text-align: center;
      .content {
        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; }
        }
      }
    }
    .location { background-image: url('../img/border.png'); background-position: left bottom; background-repeat: repeat-x; color: $properties-rows-location-color; font-size: 18px; line-height: 1; margin-bottom: 12px; margin-right: 30px; padding-bottom: 12px; }

    .area {
      .key { @include border-radius(0px); @include text-shadow(none); background-color: transparent; font-size: 14px; padding: 0px; }
      display: inline-block; margin-right: 10px;
    }
    .bedrooms { background-image: url('../img/icons/bedrooms.png'); background-position: left center; background-repeat: no-repeat; background-size: 21px 12px; display: inline-block; margin-right: 10px; 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 { background-image: url('../img/icons/bathrooms.png'); background-position: left center; background-repeat: no-repeat; background-size: 14px 20px; display: inline-block; margin-right: 10px; padding-left: 25px;
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        background-image: url('../img/icons/bathrooms@2x.png');
      }
    } 
    
    .views-field-field-bedrooms { margin: 0px; padding: 0px;
      .field-content { padding-left: 0px; }
    }        
  }
}
@media (max-width: 979px) {
  .properties-rows {
    .property {
      .title-price {
        .title {
          h2 {
            a { font-size: 18px; }
          }
        }
        .price { font-size: 18px; }
      }
      .location { font-size: 14px; }
    }
  }
}

@media (max-width: 767px) {
  .properties-rows {
    .filter {
      form {
        .control-group {
          label { float: left; line-height: 40px; }
          &:last-child { margin: 0px; }
        }
      }
    }
    .property {
      .body { padding: 20px; }
      .title-price { padding: 0px;
        .title { float: left; width: auto;
          h2 {
            a { font-size: 16px; line-height: 1; vertical-align: top; }
          }
        }
        .price { float: right; font-size: 16px; line-height: 1; width: auto; }
      }
      .location { font-size: 14px; margin-right: 0px; }
    }
  }
}

.property-filter { @include box-sizing(border-box); @include clearfix-normal; background-color: $properties-filter-vertical-background-color; display: block; padding: 20px; width: 100%;
  form { margin: 0px; }
  label { color: $properties-filter-vertical-label-color; font-weight: bold; }
  select { width: 100%; }
  input[type=text] { @include box-sizing(border-box); border: 0px; height: 40px; width: 100%; }
  .chzn-container { @include box-sizing(border-box); width: 100% !important;
    .chzn-single { border: 0px; }
    .chzn-drop { border: 0px; }
  }
  .beds, .baths { float: left; width: 48%; }
  .baths { float: right; }
  .rent, .sale { width: 48%; }
  .rent { clear: left; float: left; }
  .sale { clear: right; float: right; }
  .price-value { clear: both; color: $properties-filter-vertical-label-color; float: left; font-weight: bold; margin: 5px 0px 5px 0px; text-align: center; width: 100%; }
  .price-slider { @include clearfix-normal; clear: both; display: block; float: left; margin: 15px 0px 20px 0px; width: 100%; }
  .price-from, .price-to { display: none; }
  .form-actions { background-color: transparent; border: 0px; margin: 0px; padding: 0px;
    .btn { background-color: $properties-filter-vertical-button-background-color; font-weight: bold; width: 100%;
      &:hover { background-color: darken($properties-filter-vertical-button-background-color, 3%)}
    }
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .property-filter {
    .rent, .sale {
      label { font-size: 12px; }
    }
  }
}