html {
  font-size: 4vw;
}
body {
  margin: 0;
  height: 100vh;
}
.photo {
  width: 100vw;
  height: 90vh;
  display: grid;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.photo .imgBox {
  width: 100vw;
  height: 100%;
  transition: 0.5s;
  text-align: center;
  display: flex;
  align-items: center;
}
.photo .imgBox .filterColor {
  position: absolute;
}
.photo .imgBox .filterColor.transparent {
  background: none;
}
.photo .imgBox .filterColor.red {
  background: rgba(255, 54, 54, 0.3);
}
.photo .imgBox .filterColor.yellow {
  background: rgba(255, 255, 54, 0.3);
}
.photo .imgBox .filterColor.green {
  background: rgba(54, 255, 54, 0.3);
}
.photo .imgBox .filterColor.blue {
  background: rgba(54, 54, 255, 0.3);
}
.photo .imgBox .filterColor.skyBlue {
  background: rgba(54, 255, 255, 0.3);
}
.photo .imgBox .filterColor.violet {
  background: rgba(255, 54, 255, 0.3);
}
.photo img {
  transition: 0.5s;
}
.photo.active .imgBox {
  transform: scale(1.2) translate3d(0, 0, 0.1px);
}
.menu {
  width: 100vw;
  height: 3.33333333rem;
  background: #d8f3ef;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  transition: 0.5s;
}
.menu.active {
  height: 11.33333333rem;
  background: rgba(216, 243, 239, 0.79);
}
.menu .nav {
  width: 100%;
  height: 2.66666667rem;
  align-self: flex-start;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.66666667rem;
}
.menu .nav input {
  display: none;
}
.menu .nav span {
  display: inline-block;
  width: 2.66666667rem;
  color: #39363d;
  line-height: 2.66666667rem;
}
.menu .nav span i {
  font-size: 1.6em;
}
.menu .regulator {
  width: 100%;
  height: 0rem;
  transition: 0.5s;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: space-around;
  overflow: hidden;
}
.menu .regulator.active {
  height: 8.33333333rem;
}
.menu .regulator .line {
  width: 80%;
  height: 2.66666667rem;
  position: relative;
}
.menu .regulator .line .lineMain {
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
}
.menu .regulator .line .btn {
  width: 1.33333333rem;
  height: 1.33333333rem;
  border-radius: 50%;
  border: 1px solid #0b2e13;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-0.66666667rem);
  font-size: 0.6rem;
  text-align: center;
  line-height: 1.33333333rem;
}
.menu .regulator .regMenu {
  height: 2.66666667rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: linear-gradient(rgba(57, 54, 61, 0), rgba(57, 54, 61, 0.2), rgba(57, 54, 61, 0));
}
.menu .regulator .regMenu span {
  width: 4.66666667rem;
  color: #39363d;
  text-align: center;
  line-height: 1.66666667rem;
  font-size: 0.8em;
}
.menu .regulator .regMenu span.active {
  color: #e15671;
}
.menu .filterMenu {
  width: 100%;
  height: 0rem;
  transition: 0.5s;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: space-around;
  overflow: hidden;
}
.menu .filterMenu.active {
  height: 5rem;
}
.menu .filterMenu .filterBlock {
  width: 2.66666667rem;
  height: 4rem;
  background: url("../img/girl.jpg") no-repeat;
  background-size: cover;
  border-radius: 0.33333333rem;
  position: relative;
  margin: 0 0.33333333rem;
}
.menu .filterMenu .filterBlock:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.menu .filterMenu .transparent:after {
  background: none;
}
.menu .filterMenu .red:after {
  background: rgba(255, 54, 54, 0.3);
}
.menu .filterMenu .yellow:after {
  background: rgba(255, 255, 54, 0.3);
}
.menu .filterMenu .green:after {
  background: rgba(54, 255, 54, 0.3);
}
.menu .filterMenu .blue:after {
  background: rgba(54, 54, 255, 0.3);
}
.menu .filterMenu .skyBlue:after {
  background: rgba(54, 255, 255, 0.3);
}
.menu .filterMenu .violet:after {
  background: rgba(255, 54, 255, 0.3);
}