body {
  font-family: Roboto,sans-serif;
  margin: 0;
}
a {
  color: #0067DB;
  text-decoration: none;
}
.property_card {
  width: 613px;
  min-width: 320px;
  height: 523px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.15);
  -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.15);
  box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.15);
  /*background: url('../images/rental_src.png');*/
}
.image {
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: auto;
}
.image img {
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform 1s ease-out;
  -moz-transition: -moz-transform 1s ease-out;
  -o-transition: -o-transform 1s ease;
  -ms-transition: -ms-transform 1s ease;
  transition: transform 1s ease;
}
.image img.image2 {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  cursor: pointer;
  z-index: 2;
}
.control:hover svg{
  top: 25%;
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  -ms-transition: all .25s linear;
  transition: all .25s linear;

  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.control svg {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 34%;
  height: 60%;
  left: 50%;
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  -ms-transition: all .25s linear;
  transition: all .25s linear;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform:    translate(-50%, -50%);
  -ms-transform:     translate(-50%, -50%);
  -o-transform:      translate(-50%, -50%);
  transform:         translate(-50%, -50%);
}
.control svg path {
	fill: #fff;
}
.control.next {
  right: 0;
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  -ms-transition: all .25s linear;
  transition: all .25s linear;
}
.control.next.moveit {
  right: 10px;
}
.control.prev {
  left: 0;
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  -ms-transition: all .25s linear;
  transition: all .25s linear;
}
.control.prev:hover  svg{
  left: 25%
}
.control.prev.moveit {
  left: 10px;
}
.details {
  padding: 2% 3.5%;
  box-sizing: border-box;
  overflow: hidden;
}
.customer {
  overflow: hidden;
  width: 12.19%;
  height: auto;
  margin: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  float: left;
}
.customer img {
  width: 100%;
  height: auto;
}
.property_details {
  width: 69.31%;
  margin-left: 3.5%;
  float: left;
}
h3 {
  margin: 13px 0 5px;
  letter-spacing: .099em;
}
.location, .count {
  color: #343434;
  font-size: .88em;
  font-weight: 300;
  letter-spacing: 0.075em;
}
.stars_wrap {
  display: inline-block;
  width: 75px;
  height: 15px;
  margin-right: 30px;
  position: relative;
}
.stars_wrap .count {
  position: absolute;
}
.stars {
  display: inline-block;
  width: 100%;
  text-indent: -9999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' %3E%3Cpath id='top' fill='%23b2b2b2' d='M7.5,1.25l1.475,4.775l4.775,0l-3.863,2.95l1.476,4.775l-3.863,-2.951l-3.863,2.951l1.476,-4.775l-3.863,-2.95l4.775,0l1.475,-4.775Z' /%3E%3C/svg%3E") left center repeat-x transparent;
}
.price {
  float: right;
  width: 15%;
  margin-top: 12px;
  font-size: 1.6em;
  font-weight: 500;
  text-align: right;
}
.price .duration {
  display: block;
  font-size: .55em;
  font-weight: 300;
  letter-spacing: 0.09em;
}
.icon {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 13px;
  position: relative;
}
.icon .count {
  position: absolute;
  right: -14px;
  font-size: 1.3em;
  color: #676767;
}
.icons {
  clear: both;
  overflow: hidden;
  margin-top: 8px;
}
.icon.building {
  background: url('../images/icon_building.jpg')
}
.icon.sleeps {
  background: url('../images/icon_sleeps.jpg')
}
.icon.beds {
  background: url('../images/icon_beds.jpg')
}
.icon.baths {
  background: url('../images/icon_baths.jpg')
}
.property_card > footer {
  height: 50px;
  margin: 0 22px;
  box-sizing: border-box;
  border-top: 1px solid #D4D4D4;
}
.property_card > footer .icon {
  text-indent: -9999px;
  display: block;
  height: 30px;
  margin: 10px 3px;
}

footer .icon.favorite {
  text-indent: 0;
  cursor: pointer;
  float: left;
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 4;
}
footer .icon.favorite svg {
  width: 100%;
  height: 100%;
}
footer .icon.next {
  float: left;
  width: 24px;
  margin-left: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' %3E%3Cpath id='next_prop' fill='%23000000' d='M21.139,7.007l-5.774,-5.574l1.383,-1.433c0,0 6.024,5.815 7.091,6.846c0.103,0.099 0.161,0.236 0.161,0.379c0,0.384 -0.001,1.166 -0.001,1.55c0,0.142 -0.058,0.279 -0.16,0.378c-1.067,1.03 -7.091,6.847 -7.091,6.847l-1.383,-1.433l5.769,-5.569l-14.741,0c-2.464,0 -4.371,1.975 -4.371,4.402c0,0.568 -0.007,1.631 -0.007,1.631l-1.991,-0.007c0,0 -0.024,-1.068 -0.024,-1.624c0,-3.494 2.759,-6.34 6.294,-6.392l14.845,-0.001Z' /%3E%3C/svg%3E") center center no-repeat transparent;
}
footer .icon.more {
  float: right;
  width: 28px;
  /*background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='6' %3E%3Cellipse id='top' fill='%23d4d4d4' cx='2.984' cy='2.992' rx='2.984' ry='2.992' /%3E%3Cellipse fill='%23d4d4d4' cx='13.898' cy='2.992' rx='2.984' ry='2.992' /%3E%3Cellipse fill='%23d4d4d4' cx='25.016' cy='2.992' rx='2.984' ry='2.992' /%3E%3C/svg%3E") center center no-repeat transparent;*/
}

#favorites_box {
  background: white;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  padding: 116px;
  opacity: 0;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  -ms-transition: opacity .3s linear;
  transition: opacity .3s linear;
  /*background: url('../images/favorites_src.png') 0 0 white;*/
}
#favorites_box.active {
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  -ms-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: 1;
}

#favorites_box h3 {
  font-size: 1.5em;
  font-weight: 300;
  margin: 0;
  -ms-transform: translate(0, 100%);
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);

  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.friends {
  position: absolute;
  right: 0;
  width: 30%;
  top: 50%;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  transform: translateY(-50%);
}
.active .friends {
  width: 25%;
}
.friend {
  width: 36%;
  height: 0;
  padding-bottom: 36%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid white;
  overflow: hidden;
  float: right;
  margin-left: -7%;;
}
.active .friend {
  margin-left: -18%;
}
.friend img {
  width: 100%;
  hight: 100%;
}
#favorites_box h3, #favorites_box ul, #favorites_box li, .friend, #favorites_box footer, .friend {
  position: relative;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

#favorites_box.active h3 {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
#favorites_box.active h3, #favorites_box.active ul, #favorites_box.active footer {
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
#favorites_box.active li {
  margin: 30px 0;
}
#favorites_box ul, #favorites_box li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#favorites_box ul {
  margin-top: 57px;
  -ms-transform: translate(0, 70%);
  -webkit-transform: translate(0, 70%);
  transform: translate(0, 70%);
}
#favorites_box li {
  margin: 50px 0;
}
#favorites_box footer {
  border-top: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
  padding: 104px 0;
  font-size: 1.2em;
  -ms-transform: translate(0, 2%);
  -webkit-transform: translate(0, 2%);
  transform: translate(0, 2%);
}
#favorites_box.active footer {
  position: relative;
  top: 5px;
  padding: 33px 0 23px 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.new_list {
  display: block;
  height: 24px;
  line-height: 24px;
  padding-left: 35px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' %3E%3Cpath fill='%23d4d4d4' d='M0,10.008l10.008,0l0,-10.008l1.984,0l0,10.008l10.008,0l0,1.984l-10.008,0l0,10.008l-1.984,0l0,-10.008l-10.008,0l0,-1.984Z' /%3E%3C/svg%3E") left center no-repeat transparent;
}
input[type=checkbox] {
  display: none !important;
}
input[type=checkbox] + label {
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  display: inline-block;
  padding-left: 38px;
  text-align: left;
  font-size: 1.2em;
  font-weight: 300;
  position: relative;
}
input[type=checkbox] + label .checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #076cd8;
  position: absolute;
  left: 0;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}
input[type=checkbox]:checked + label .checkbox {
  animation: squareToCircle .5s 0s 1 cubic-bezier(0.42,0,0.58,1) normal forwards;
}
input[type=checkbox]:not(:checked) + label .checkbox {
  animation: circleToSquare .5s 0s 1 cubic-bezier(0.42,0,0.58,1) normal forwards;
}
input[type=checkbox]:checked + label:before {
  width: 16px;
}
label:before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' %3E%3Cpath fill='%235c8614' d='M6.452,10.087l-5.029,-5.09l-1.423,1.406l5.029,5.089l1.423,-1.405l0,0Z' /%3E%3Cpath fill='%235c8614' d='M5.029,11.492l10.191,-10.069l-1.405,-1.423l-10.192,10.07l1.406,1.422Z' /%3E%3C/svg%3E") left center no-repeat transparent;
  content: "";
  width: 0;
  height: 12px;
  position: absolute;
  top: 6px;
  left: 4px;
  -webkit-transition: all 0.30s;
  -moz-transition: all 0.30s;
  -o-transition: all 0.30s;
  transition: all 0.30s;
}
@keyframes squareToCircle {
  0%  {
    -webkit-border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25%  {
    -webkit-border-radius: 0 0 25% 50%;
    -moz-border-radius: 0 0 25% 50%;
    border-radius: 0 0 25% 50%;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50%  {
    -webkit-border-radius: 0 25% 50% 50%;
    -moz-border-radius: 0 25% 50% 50%;
    border-radius: 0 25% 50% 50%;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);  }
  75%  {
    -webkit-border-radius: 25% 50% 50% 50%;
    -moz-border-radius: 25% 50% 50% 50%;
    border-radius: 25% 50% 50% 50%;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  100% {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes circleToSquare {
  0% {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  25%  {
    -webkit-border-radius: 25% 50% 50% 50%;
    -moz-border-radius: 25% 50% 50% 50%;
    border-radius: 25% 50% 50% 50%;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  50%  {
    -webkit-border-radius: 0 25% 50% 50%;
    -moz-border-radius: 0 25% 50% 50%;
    border-radius: 0 25% 50% 50%;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  75%  {
    -webkit-border-radius: 0 0 25% 50%;
    -moz-border-radius: 0 0 25% 50%;
    border-radius: 0 0 25% 50%;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  100%  {
    -webkit-border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}




@keyframes controlTrans {
  0%  {
    right: 24px;
    left: auto;
  }
  100% {
    left: 24px;
    right: auto;
  }
}

@media (max-width: 613px) {
  .property_card {
    width: 100%;
  }
  #favorites_box {
    padding: 19vw;
  }
  #favorites_box.active ul {
    margin-top: 9.3vw;
  }
  #favorites_box.active li {
    margin: 4.8vw 0;
  }
  #favorites_box.active footer {
    padding: 5.5vw 0;
  }
  input[type=checkbox] + label, .new_list {
    font-size: 3.12vw;
  }
  .property_details h3 {
    font-size: 3.05vw;
  }
  .price {
    font-size: 4.2vw;
  }
}
@media (max-width: 320px) {
  #favorites_box {
    padding: 60.8px;
  }
  #favorites_box.active ul {
    margin-top: 29.76px;
  }
  .property_details h3 {
    font-size: 9.76px;
  }
  .price {
    font-size: 13.44px;
  }
  input[type=checkbox] + label, .new_list {
    font-size: 9.984px;
  }
  #favorites_box.active li {
    margin: 15.36px 0;
  }
  #favorites_box.active footer {
    padding: 17.6px 0;
  }
}