#navigation {
  display: flex;
  position: fixed;
  left: 0px;
  top: 50vh;
  z-index: 10;
  flex-direction: column;
  -webkit-transform: translateY(calc((4 * (-50px)) / 1.65));
  -moz-transform: translateY(calc((4 * (-50px)) / 1.65));
  -ms-transform: translateY(calc((4 * (-50px)) / 1.65));
  -o-transform: translateY(calc((4 * (-50px)) / 1.65));
  transform: translateY(calc((4 * (-50px)) / 1.65));
}

@media only screen and (max-width: 535px) {
  #navigation {
    -webkit-transform: translateY(calc((4 * (-50px)) / 2));
    -moz-transform: translateY(calc((4 * (-50px)) / 2));
    -ms-transform: translateY(calc((4 * (-50px)) / 2));
    -o-transform: translateY(calc((4 * (-50px)) / 2));
    transform: translateY(calc((4 * (-50px)) / 2));
  }
}

.navigation-blck {
  display: table;
  position: absolute;
  left: 50px;
  overflow: hidden;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 0.3s all;
  -moz-transition: 0.3s all;
  -ms-transition: 0.3s all;
  -o-transition: 0.3s all;
  transition: 0.3s all;
}

.navigation-blck:hover {
  -webkit-transform: translateX(-50px);
  -moz-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  -o-transform: translateX(-50px);
  transform: translateX(-50px);
}

#navigation-blck-1 {
  top: 0px;
  background-color: #f1ac9d;
  border-radius: 0px 10px 0px 0px;
}

#navigation-blck-2 {
  top: calc(1 * 50px);
  background-color: #f06966;
}

#navigation-blck-3 {
  top: calc(2 * 50px);
  background-color: #dee2d1;
}

#navigation-blck-4 {
  top: calc(3 * 50px);
  background-color: #6abe83;
  border-radius: 0px 0px 10px 0px;
}

.navigation-blck a {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
}

.navigation-txt {
  color: #000;
  font-size: 1.02em;
  font-family: 'RobotoRegular';
  text-decoration: none;
  white-space: nowrap;
  padding: 0px 10px;
}

.navigation-icon {
  display: table;
  height: 50px;
  width: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
}

#navigation-icon-contacts {
  background-image: url(../icons/phone.svg);
}

#navigation-icon-photos {
  background-image: url(../icons/photo.svg);
}

#navigation-icon-map {
  background-image: url(../icons/location.svg);
}

#navigation-icon-technology {
  background-image: url(../icons/wash.svg);
}