.navigation-wrapper {
  background-color: #ffffff;
}
.navigation {
  display: flex;
  flex-direction: row;
  height: 3.5rem;
  text-align: center;
}
.navigation > li {
  flex: 1;
  padding-top: 0.5rem;
  font-size: 0;
  transition: all 300ms linear;
}
.navigation a {
  height: 100%;
}

.navigation .icon.icon-home,
.navigation .icon.icon-search,
.navigation .icon.icon-heart,
.navigation .icon.icon-user {
  background-position-y: -21px !important;
  transition: all 200ms linear;
}
.navigation .icon.icon-home:hover,
.navigation .icon.icon-search:hover,
.navigation .icon.icon-heart:hover,
.navigation .icon.icon-user:hover {
  background-position-y: -27px !important;
}


.profiles-wrapper {
  margin: 0 -0.3em;
  padding-top: 0.2em;
}
.profiles {
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}
.profiles > li {
  flex: 1;
  padding: 0.3em;
  min-width: 5em;
}
.profiles > li.new-profile > div {
  position: relative;
}
.profiles > li.new-profile .btn-plus {
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1rem;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background-color: #ce3d6d;
  font-size: 1rem;
  text-align: center;
  color: #ffffff;
}
.profiles > li.new-profile .btn-plus:hover {
  text-decoration: none;
}
.profiles > li h3 {
  width: 4.5em;
  font-size: 0.75em;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
}
.profiles > li div {
  padding: 0.2rem;
  border-radius: 50%;
  border: 1px solid #cfcfcf;
  font-size: 0;
  cursor: pointer;
  transition: padding 200ms linear;
}
.profiles > li div img {
  border-radius: 50%;
}
.profiles > li div:hover {
  padding: 0;
}

@media (max-width: 320px) {
  .profiles > li:nth-child(n + 5) {
      display: none;
  }
}
@media (max-width: 414px) {
  .profiles > li:nth-child(n + 6) {
      display: none;
  }
}
@media (max-width: 568px) {
  .profiles > li:nth-child(n + 9) {
      display: none;
  }
}
@media (max-width: 667px) {
  .profiles > li:nth-child(n + 10) {
      display: none;
  }
}
@media (max-width: 736px) {
  .profiles > li:nth-child(n + 11) {
      display: none;
  }
}
@media (max-width: 768px) {
  .profiles > li:nth-child(n + 9) {
      display: none;
  }
}
@media (max-width: 823px) {
  .profiles > li:nth-child(n + 12) {
      display: none;
  }
}
@media (max-width: 960px) and (min-height: 480px) {
  .profiles > li:nth-child(n + 14) {
      display: none;
  }
}
@media (max-width: 1024px) {
  .profiles > li:nth-child(n + 15) {
      display: none;
  }
}
@media (max-width: 1100px) and (min-height: 550px) {
  .profiles > li:nth-child(n + 16) {
      display: none;
  }
}
@media (max-width: 1280px) and (min-height: 630px) {
  .profiles > li:nth-child(n + 18) {
      display: none;
  }
}
@media (max-width: 1280px) and (min-height: 900px) {
  .profiles > li:nth-child(n + 16) {
      display: none;
  }
}
@media (max-width: 1440px) {
  .profiles > li:nth-child(n + 21) {
      display: none;
  }
}