@keyframes play22 {
  0% {
    background-position: 0px 0px; }
  100% {
    background-position: -528px 0px; } }

@keyframes play24 {
  0% {
    background-position: 0px 0px; }
  100% {
    background-position: -576px 0px; } }

@keyframes play42 {
  0% {
    background-position: 0px 0px; }
  100% {
    background-position: -1008px 0px; } }

@keyframes play120 {
  0% {
    background-position: 0px 0px; }
  100% {
    background-position: -20040px 0px; } }

@keyframes play400 {
  0% {
    background-position: 0px 0px; }
  100% {
    background-position: -48000px 0px; } }

.svg-22, .svg-24, .svg-42 {
  animation-duration: 400ms;
  animation-timing-function: steps(24);
  animation-fill-mode: forwards;
  background-repeat: no-repeat; }

.svg-22 {
  width: 22px;
  height: 22px; }

.svg-24 {
  width: 24px;
  height: 24px; }

.svg-40 {
  width: 40px;
  height: 40px; }

.svg-42 {
  width: 42px;
  height: 42px; }

.svg-42:hover {
  animation-name: play42; }

.login-svg {
  background-image: url(../podklady/ikony/login-svg.svg);
  margin-left: 1rem; }

.logout-svg {
  background-image: url(../podklady/ikony/logout-svg.svg);
  margin-left: 1rem; }

.add-svg {
  background-image: url(../podklady/ikony/add-svg.svg);
  margin-right: 1rem; }

.hledat-svg {
  background-image: url(../podklady/ikony/hledat-svg.svg);
  margin-right: 1rem; }

.save-svg {
  background-image: url(../podklady/ikony/save-svg.svg);
  margin-right: 1rem; }

.calculate {
  background-image: url("../podklady/ikony/calculate.svg");
  cursor: pointer; }

.logo-400 {
  background-image: url(../podklady/ikony/logo-400-svg.svg);
  animation-duration: 2000ms;
  animation-timing-function: steps(120);
  animation-fill-mode: forwards;
  animation-name: play400;
  width: 400px;
  height: 105px;
  background-repeat: no-repeat;
  transform: scale(0.7) translateX(-80px); }

@media (min-width: 574px) {
  .logo-400 {
    transform: scale(1) translateX(0);
    margin-right: 0; } }