/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none
}

@font-face {
  font-family: rubik;
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/rubik-light.woff2) format("woff2"), url(../fonts/rubik-light.woff) format("woff"), url(../fonts/rubik-light.ttf) format("truetype");
  font-display: swap
}

@font-face {
  font-family: rubik;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/rubik-regular.woff2) format("woff2"), url(../fonts/rubik-regular.woff) format("woff"), url(../fonts/rubik-regular.ttf) format("truetype");
  font-display: swap
}

@font-face {
  font-family: rubik;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/rubik-medium.woff2) format("woff2"), url(../fonts/rubik-medium.woff) format("woff"), url(../fonts/rubik-medium.ttf) format("truetype");
  font-display: swap
}

@font-face {
  font-family: rubik;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/rubik-bold.woff2) format("woff2"), url(../fonts/rubik-bold.woff) format("woff"), url(../fonts/rubik-bold.ttf) format("truetype");
  font-display: swap
}

body,
html {
  width: 100%;
  min-width: 1144px;
  margin: 0;
  padding: 0;
  font-family: rubik, arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.15;
  color: #383838;
  background-color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

*,
::after,
::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color .3s, opacity .3s;
  transition: color .3s, opacity .3s;
  cursor: pointer;
  outline: 0
}

textarea {
  resize: none
}

img {
  max-width: 100%;
  height: auto
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden
}

.container {
  width: 1144px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 58px;
  padding-right: 58px
}

.button {
  padding: 0;
  background: 0 0;
  border: none;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  text-align: center;
  word-break: break-word;
  word-wrap: wrap;
  overflow-wrap: break-word;
  -webkit-transition: color .3s, background-color .3s;
  transition: color .3s, background-color .3s;
  outline: 0
}

.page {
  background-color: #fff
}

.page--login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 1144px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, #f5f5f5 509px, transparent 509px), url(../img/amsterdam.jpg);
  background-position: top left, right top;
  height: 100vh;
  background-size: auto, auto 100%;
  background-repeat: no-repeat, no-repeat;
  overflow: hidden
}

@media (-webkit-min-device-pixel-ratio:1.5),
(min-resolution:144dpi),
(min-resolution:1.5dppx) {
  .page--login {
    background-image: linear-gradient(to right, #f5f5f5 509px, transparent 509px), url(../img/amsterdam@2x.jpg)
  }
}

@media (max-height:720px) {
  .page--login {
    background-size: auto, auto 715px
  }
}

.page--favorites-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh
}

.page--main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh
}

.page--gray {
  background-color: #f5f5f5
}

.page__main--property {
  padding-bottom: 129px
}

.page__main--login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}

.page__main--favorites {
  padding-top: 11px
}

.page__main--favorites-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}

.page__main--favorites-empty .page__favorites-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.page__main--index {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: hidden
}

.page__login-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.header__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 19px 16px 0
}

.header__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: auto
}

.header__logo-link {
  margin-bottom: 15px
}

.header__logo-link:not(.header__logo-link--active):focus,
.header__logo-link:not(.header__logo-link--active):hover {
  opacity: .5
}

.header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 11px;
  margin-left: 30px
}

.header__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: center
}

.header__nav-item {
  margin-bottom: 15px
}

.header__nav-item:not(:last-child) {
  margin-right: 15px
}

.header__nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
  line-height: 1.2143;
  -webkit-transition: text-shadow .3s;
  transition: text-shadow .3s
}

.header__nav-link:focus,
.header__nav-link:hover {
  text-shadow: .5px 0 0, -.5px 0 0
}

.header__avatar-wrapper {
  width: 20px;
  height: 20px;
  margin-right: 8px
}

.header__login {
  padding-top: 2px;
  padding-right: 8px
}

.header__user-name,
.header__signout {
  padding-top: 2px
}

.user__avatar-wrapper {
  background-image: url(../img/avatar.svg);
  background-size: 100%;
  background-repeat: no-repeat
}

.user__avatar {
  border-radius: 50%
}

.rating__stars {
  position: relative;
  display: block;
  font-size: 0
}

.rating__stars::before {
  content: "";
  display: inline-block;
  height: 100%;
  background: url(../img/stars.svg) transparent no-repeat center
}

.rating__stars span {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  height: 100%;
  overflow: hidden
}

.rating__stars span::before {
  content: "";
  display: inline-block;
  height: 100%;
  background: url(../img/stars-active.svg) transparent no-repeat center
}

.cities {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: #fff;
  overflow-y: hidden;
  min-height: 520px;

}

.cities__places-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 0
}

.cities__places-container--empty {
  padding-right: 0
}

.cities__places-container--empty .cities__right-section {
  background-image: url(../img/no-places.png);
}

.cities__no-places {
  position: relative;
  width: 498px;
  padding-left: 18px
}

.cities__no-places::after {
  content: "";
  position: absolute;
  width: 12.06vh;
  min-width: 100px;
  max-width: 120px;
  height: 100%;
  bottom: 0;
  right: -48px;
  background-color: #fff;
  border-right: 6px solid #4481c3;
  -webkit-transform: skew(-6.5deg);
  transform: skew(-6.5deg)
}

.cities__places {
  width: 572px;
  margin-top: 2px;
  margin-right: 2px;
  padding-top: 29px;
  padding-bottom: 7px;
  padding-left: 9px;
  overflow-y: auto
}

.cities__places-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  padding-left: 5px
}

.cities__place-card {
  width: 260px;
  margin-left: 8px;
  margin-bottom: 24px
}

.page__main--index-empty .cities__right-section {
  background-image: url(../img/no-places@2x.png);
  background-size: auto 119%;
  background-repeat: no-repeat;
  background-position: right 100%
}

@media (-webkit-min-device-pixel-ratio:1.5),
(min-resolution:144dpi),
(min-resolution:1.5dppx) {
  .page__main--index-empty .cities__right-section {
    background-image: url(../img/no-places@2x.png)
  }
}

@media (max-height:780px) {
  .page__main--index-empty .cities__right-section {
    background-position: right center;
    background-size: 100% auto
  }
}

.cities__right-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}

.cities__map {
  width: 100%;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  background-image: url(../img/map.jpg);
  background-size: 682px auto;
  background-repeat: no-repeat;
  background-position: -170px center
}

@media (-webkit-min-device-pixel-ratio:1.5),
(min-resolution:144dpi),
(min-resolution:1.5dppx) {
  .cities__map {
    background-image: url(../img/map@2x.jpg);
    background-size: 682px 794px
  }
}

@media (min-height:980px) {
  .cities__map {
    background-size: cover
  }
}

.cities__status-wrapper {
  position: relative;
  z-index: 1;
  width: auto;
  margin-top: 25.4vh;
  margin-right: auto;
  margin-left: auto;
  padding-top: 62px;
  text-align: center;
  background-image: url(../img/ico-no-results.svg);
  background-size: 45px 47px;
  background-position: center top;
  background-repeat: no-repeat
}

.cities__status {
  display: block;
  margin-bottom: 5px;
  font-size: 32px;
  line-height: 1.1875
}

.cities__status-description {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 45px;
  font-size: 16px;
  line-height: 1.5
}

.locations--login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 0 51px 63px 130px
}

.locations--login .locations__item-link {
  padding: 9px 21px 6px 16px
}

.locations--current .locations__item {
  margin: 0
}

.locations--current .locations__item-link {
  color: #fff;
  background-color: #4481c3;
  text-shadow: 1px 0 0, .5px 0 0, -1px 0 0
}

.locations__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 16px 3px 33px
}

.locations__item {
  display: block;
  margin-right: 36px;
  margin-bottom: 19px
}

.favorites__locations .locations__item-link {
  min-width: 137px;
  padding: 9px 14px 6px 15px;
  text-align: center;
  letter-spacing: .9px
}

.locations__item-link {
  display: block;
  padding: 9px 21px 6px 11px;
  font-size: 19px;
  line-height: 1.211;
  font-weight: 300;
  font-style: oblique;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  border-radius: 3px;
  -webkit-transition: background .3s, color .3s, text-shadow .3s;
  transition: background .3s, color .3s, text-shadow .3s
}

.locations__item-link span {
  display: block;
  -webkit-transform: skew(15deg);
  transform: skew(15deg)
}

.locations__item-link:focus,
.locations__item-link:hover {
  text-shadow: 1px 0 0, .5px 0 0, -1px 0 0
}

.locations__item-link.tabs__item--active {
  text-shadow: 1px 0 0, .5px 0 0, -1px 0 0;
  color: #fff;
  background-color: #4481c3
}

.places__found {
  display: block;
  margin-bottom: 22px;
  padding-left: 2px;
  font-size: 24px;
  line-height: 1.167;
  font-weight: 700;
  font-style: oblique
}

.places__sorting {
  position: relative;
  margin-bottom: 33px;
  padding-left: 5px
}

.places__sorting-arrow {
  position: absolute;
  top: 55%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  fill: #0d0d0d
}

.places__options {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #dfdfdf;
  border-radius: 4px
}

.places__options--custom {
  position: absolute;
  top: calc(100% + 1px);
  left: 52px;
  z-index: 1;
  display: none
}

.places__options--opened {
  display: block
}

.places__option {
  min-width: 170px;
  padding: 14px 16px 10px;
  font-size: 14px;
  line-height: 1.2143;
  -webkit-transition: background .3s;
  transition: background .3s;
  outline: 0;
  cursor: pointer
}

.places__option--active,
.places__option:focus,
.places__option:hover {
  background-color: #f2f2f2
}

.places__option:selected {
  background-color: #f2f2f2
}

.places__sorting-caption {
  font-size: 12px;
  line-height: 1.167;
  font-weight: 700
}

.places__sorting-type {
  position: relative;
  display: inline-block;
  padding-right: 12px;
  font-size: 12px;
  line-height: 1.167;
  cursor: pointer
}

.place-card {
  position: relative
}

.place-card:hover {
  opacity: .6
}

.place-card__image-wrapper {
  margin-bottom: 9px
}

.place-card__image {
  display: block;
  border-radius: 4px
}

.place-card__info {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}

.place-card__price-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 5px
}

.place-card__price {
  margin-right: 20px
}

.favorites__card .place-card__bookmark-button {
  margin-top: 0;
  -webkit-transform: skew(10deg);
  transform: skew(10deg)
}

.place-card__bookmark-button {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 18px;
  height: 19px;
  margin-top: 2px
}

.place-card__bookmark-button:focus .place-card__bookmark-icon,
.place-card__bookmark-button:hover .place-card__bookmark-icon {
  stroke: #4481c3
}

.place-card__bookmark-button--active .place-card__bookmark-icon {
  stroke: #4481c3;
  fill: #4481c3
}

.place-card__bookmark-icon {
  fill: none;
  stroke: #979797;
  stroke-width: 2;
  -webkit-transition: fill .3s, stroke .3s;
  transition: fill .3s, stroke .3s
}

.place-card__price-value {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700
}

.place-card__price-text {
  font-size: 12px;
  line-height: 1.1667
}

.place-card__rating {
  margin-bottom: 6px
}

.place-card__stars {
  width: 73px;
  height: 12px
}

.place-card__stars::before {
  width: 73px;
  background-size: 73px 12px
}

.place-card__stars span {
  width: 0%
}

.place-card__stars span::before {
  width: 73px;
  background-size: 73px 12px
}

.place-card__name {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1.223;
  font-weight: 700;
  font-style: oblique
}

.place-card__name a {
  display: inline-block
}

.place-card__name a:focus,
.place-card__name a:hover {
  opacity: .7
}

.place-card__type {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.1667;
  text-transform: capitalize;
}

.place-card__mark {
  position: absolute;
  top: -5px;
  left: -3px;
  padding: 5px 15px 5px 9px;
  font-size: 12px;
  line-height: 1.1667;
  font-weight: 700;
  color: #fff;
  background-color: #4481c3;
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  border-radius: 3px
}

.place-card__mark span {
  display: block;
  -webkit-transform: skew(10deg);
  transform: skew(10deg)
}

.property__gallery-container {
  padding-left: 52px;
  padding-right: 52px
}

.property__gallery {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 784px;
  margin-right: auto;
  margin-left: auto;
  max-height: 452px;
  margin-bottom: 30px;
  overflow: hidden
}

.property__gallery::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 100%;
  background-image: url(../img/triangle.svg);
  background-repeat: no-repeat;
  background-size: 34px 452px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.property__gallery::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  width: 34px;
  height: 100%;
  background-image: url(../img/triangle.svg);
  background-repeat: no-repeat;
  background-size: 34px 452px
}

.property__image-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 2px;
  margin-right: 2px;
  width: 260px;
  height: 200px;
  overflow: hidden
}

.property__image-wrapper:nth-child(3n) {
  margin-right: 0
}

.property__image {
  display: block;
  min-width: 100%;
  min-height: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}

.property__container {
  position: relative;
  overflow-x: hidden
}

.property__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 613px;
  margin-right: auto;
  margin-left: auto
}

.property__mark {
  margin-bottom: 8px;
  padding: 7px 11px 3px 8px;
  font-size: 16px;
  line-height: 1.1875;
  font-weight: 700;
  font-style: oblique;
  color: #fff;
  background-color: #4481c3;
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  border-radius: 2px;
  background-color: #4481c3
}

.property__mark span {
  display: block;
  -webkit-transform: skew(10deg);
  transform: skew(10deg)
}

.property__name {
  margin-top: 0;
  margin-bottom: 7px;
  padding: 0 28px;
  font-size: 38px;
  line-height: 1.21053;
  font-weight: 700;
  font-style: oblique;
  text-align: center
}

.property__bookmark-button {
  position: absolute;
  top: 41px;
  right: 93px;
  width: 31px;
  height: 33px;
  margin-top: 2px
}

.property__bookmark-button--active .property__bookmark-icon {
  stroke: #4481c3;
  fill: #4481c3
}

.property__bookmark-icon {
  fill: none;
  stroke: #b8b8b8;
  stroke-width: 2;
  -webkit-transition: fill .3s, stroke .3s;
  transition: fill .3s, stroke .3s
}

.property__rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-bottom: 24px
}

.property__stars {
  width: 147px;
  height: 24px
}

.property__stars::before {
  width: 147px;
  background-size: 147px 24px
}

.property__stars span {
  width: 0%;
}

.property__stars span::before {
  width: 147px;
  background-size: 147px 24px
}

.property__star {
  width: 24px;
  height: 24px;
  content: "";
  display: inline-block;
  position: relative;
  background-size: 24px 24px;
  background:  no-repeat contain center;
}

.property__rating-value {
  margin-left: 5px;
  padding-top: 2px;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  font-style: oblique
}

.property__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 38px;
  margin-left: -64px
}

.property__feature {
  margin-left: 64px;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.3;
  background-repeat: no-repeat;
  text-transform: capitalize;
}

.property__feature--entire {
  background-image: url(../img/ico-place.svg);
  background-size: 13px 16px
}

.property__feature--bedrooms {
  background-image: url(../img/ico-bedrooms.svg);
  background-size: 14px 18px
}

.property__feature--adults {
  background-image: url(../img/ico-adults.svg);
  background-size: 13px 12px;
  background-position: left 3px
}

.property__price {
  position: relative;
  margin-bottom: 56px
}

.property__price::before {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(100% + 12px);
  width: 345px;
  height: 1px;
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, .01)), to(#7ca7d5));
  background-image: linear-gradient(to left, rgba(255, 255, 255, .01), #7ca7d5)
}

.property__price::after {
  content: "";
  position: absolute;
  top: 18px;
  right: calc(100% + 11px);
  width: 425px;
  height: 1px;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .01)), to(#6899ce));
  background-image: linear-gradient(to right, rgba(255, 255, 255, .01), #6899ce)
}

.property__price-value {
  position: relative;
  padding-right: 8px;
  padding-left: 6px;
  font-size: 32px;
  line-height: 1.1875;
  font-weight: 700;
  font-style: oblique
}

.property__price-value::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -2px;
  height: 52px;
  width: 2px;
  background-color: #4481c3;
  -webkit-transform: skew(-12deg);
  transform: skew(-12deg)
}

.property__price-text {
  font-size: 18px;
  line-height: 1.223;
  font-weight: 700;
  font-style: oblique;
  opacity: .48
}

.property__inside {
  width: 100%;
  margin-bottom: 52px
}

.property__inside-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
  line-height: 1.1667;
  font-weight: 700;
  font-style: oblique;
  text-align: center;
  color: #000
}

.property__inside-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}

.property__inside-item {
  position: relative;
  width: 100%;
  max-width: 174px;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: #000
}

.property__inside-item::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 12px;
  height: 1px;
  background-color: #000
}

.property__host-title {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 24px;
  line-height: 1.1667;
  font-weight: 700;
  font-style: oblique;
  text-align: center;
  color: #000
}

.property__host-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px;
  padding-right: 16px
}

.property__avatar-wrapper {
  position: relative;
  width: 74px;
  min-width: 74px;
  height: 74px;
  margin-bottom: 7px
}

.property__avatar-wrapper--pro::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -16px;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: #ff9000;
  background-image: url(../img/star-white.svg);
  background-size: 20px 19px;
  background-position: center 6px;
  background-repeat: no-repeat
}

.property__user-name {
  font-size: 16px;
  line-height: 1.187;
  font-weight: 700;
  color: #000
}

.property__user-status {
  font-size: 12px;
  line-height: 1.167;
  color: #696969
}

.property__description {
  margin-bottom: 52px
}

.property__text {
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.75;
  color: #000
}

.property__reviews {
  width: 100%;
  margin-bottom: 55px
}

.property__map {
  width: 100%;
  height: 579px;
  margin-bottom: 50px;
  background-image: url(../img/map-big.jpg);
  background-repeat: no-repeat;
  background-size: 1144px auto;
  background-position: center top
}

@media (-webkit-min-device-pixel-ratio:1.5),
(min-resolution:144dpi),
(min-resolution:1.5dppx) {
  .property__map {
    background-image: url(../img/map-big@2x.jpg);
    background-size: 1144px auto
  }
}

.reviews__title {
  margin-top: 0;
  margin-bottom: 37px;
  font-size: 24px;
  line-height: 1.1667;
  font-weight: 700;
  font-style: oblique;
  color: #000;
  text-align: center
}

.reviews__avatar-wrapper {
  min-width: 54px;
  width: 54px;
  height: 54px;
  margin-bottom: 10px
}

.reviews__avatar {
  display: block
}

.reviews__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 54px;
  margin-right: 22px
}

.reviews__user-name {
  font-size: 14px;
  line-height: 1.2143;
  color: #000;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word
}

.reviews__list {
  margin: 0;
  padding: 0;
  list-style: none
}

.reviews__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-bottom: 22px
}

.reviews__text {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 1.75;
  color: #000
}

.reviews__rating {
  margin-bottom: 7px
}

.reviews__stars {
  width: 98px;
  height: 16px
}

.reviews__stars::before {
  width: 98px;
  background-size: 93px 16px
}

.reviews__stars span {
  width: 0%
}

.reviews__stars span::before {
  width: 98px;
  background-size: 98px 16px
}

.reviews__time {
  font-size: 14px;
  line-height: 1;
  color: #5d5d5d
}

.reviews__form {
  margin-right: -30px;
  padding-left: 76px
}

.reviews__label {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.2143;
  font-weight: 700;
  font-style: oblique;
  color: #000
}

.reviews__textarea {
  width: 568px;
  height: 92px;
  margin-bottom: 12px;
  padding: 15px 16px
}

.reviews__rating-form {
  margin-bottom: 21px
}

.reviews__button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.reviews__help {
  width: 402px;
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.334
}

.reviews__star {
  padding-left: 15px;
  background-image: url(../img/star-active.svg);
  background-size: 12px 11px;
  background-repeat: no-repeat
}

.reviews__text-amount {
  font-weight: 700
}

.reviews__submit {
  width: 143px;
  font-size: 16px;
  line-height: 1.1875
}

.form__rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}

.form__rating-label {
  display: block;
  width: 37px;
  height: 33px;
  margin-right: 4px;
  cursor: pointer
}

.form__rating-label:first-child {
  margin-right: 0
}

.form__rating-input--active~.form__rating-label .form__star-image,
.form__rating-label:hover .form__star-image,
.form__rating-label:hover~.form__rating-label .form__star-image {
  fill: #ff9000
}

.form__star-image {
  fill: #c7c7c7;
  -webkit-transition: fill .3s;
  transition: fill .3s
}

.form__textarea {
  font-size: 16px;
  line-height: 1.1875;
  color: #383838;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 2px
}

.form__textarea::-webkit-input-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #9b9b9b
}

.form__textarea::-moz-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #9b9b9b
}

.form__textarea::-ms-input-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #9b9b9b
}

.form__textarea::placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #9b9b9b
}

.form__textarea::-ms-input-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #9b9b9b
}

.form__input {
  padding: 15px 14px 13px;
  font-size: 16px;
  line-height: 1.1875;
  color: #383838;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 2px
}

.form__input::-webkit-input-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #818181
}

.form__input::-moz-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #818181
}

.form__input::-ms-input-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #818181
}

.form__input::placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #818181
}

.form__input::-ms-input-placeholder {
  font-size: 16px;
  line-height: 1.1875;
  color: #818181
}

.form__submit {
  padding: 16px 20px 13px;
  color: #fff;
  background-color: #4481c3;
  border-radius: 3px
}

.form__submit:focus,
.form__submit:hover {
  background-color: #3069a6
}

.form__submit:disabled {
  background-color: #c7c7c7
}

.near-places {
  margin: 0 16px 0 12px;
  padding-bottom: 27px;
  border-bottom: 2px solid rgba(222, 222, 222, .5)
}

.near-places__title {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 24px;
  line-height: 1.1667;
  font-weight: 700;
  font-style: oblique;
  text-align: center;
  color: #000
}

.near-places__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -8px;
  padding-left: 3px
}

.near-places__card {
  width: 260px;
  margin-left: 8px;
  margin-bottom: 24px
}

.login {
  position: relative;
  width: 520px;
  padding-top: 19.6vh;
  padding-right: 60px;
  padding-left: 13px
}

.login::after {
  content: "";
  position: absolute;
  width: 12.03vh;
  min-width: 195px;
  height: 100vh;
  min-height: 450px;
  bottom: 0;
  right: -2px;
  background-color: #f5f5f5;
  border-right: 6px solid #4481c3;
  -webkit-transform: skew(-6.5deg);
  transform: skew(-6.5deg)
}

.login__title {
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 32px;
  line-height: 1.1875;
  font-weight: 700;
  font-style: oblique
}

.login__form {
  position: relative;
  z-index: 1;
  width: 341px
}

.login__input-wrapper {
  margin-right: 2px
}

.login__input {
  width: 100%;
  margin-bottom: 24px
}

.login__submit {
  width: 100%
}

.favorites {
  padding: 0 15px 93px;
  border-bottom: 2px solid rgba(222, 222, 222, .5)
}

.favorites--empty {
  width: 100%;
  padding: 0 0 93px 38px
}

.favorites__title {
  margin-top: 0;
  margin-bottom: 49px;
  font-size: 32px;
  line-height: 1.1429;
  font-weight: 700;
  font-style: oblique;
  text-align: center
}

.favorites__list {
  margin: 0;
  padding: 0;
  list-style: none
}

.favorites__locations-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-bottom: 52px
}

.favorites__locations-items:last-child {
  margin-bottom: 0
}

.favorites__locations {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 244px;
  margin-right: 20px
}

.favorites__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 421px;
  margin-bottom: 32px
}

.favorites__card:last-child {
  margin-bottom: 0
}

.favorites__image-wrapper {
  min-width: 150px;
  margin-right: 16px;
  margin-bottom: 0
}

.favorites__card-info {
  padding-top: 1px
}

.favorites__status-wrapper {
  width: 420px;
  margin-top: 16.7vh;
  margin-right: auto;
  margin-left: auto;
  padding-top: 94px;
  text-align: center;
  background-image: url(../img/ico-saved.svg);
  background-size: 60px 73px;
  background-position: center top;
  background-repeat: no-repeat
}

.favorites__status {
  display: block;
  margin-bottom: 5px;
  font-size: 32px;
  line-height: 1.1875
}

.favorites__status-description {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 30px;
  font-size: 16px;
  line-height: 1.5
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 52px
}

.header__logo-link:not(.header__logo-link--active):focus,
.header__logo-link:not(.header__logo-link--active):hover {
  opacity: .5
}

/*# sourceMappingURL=main.css.map */