@charset "UTF-8";
/* Fixed do prawej na środku ekranu, Cały blok*/
.block--type-custom-icons-block {
  --block--type-custom-icons-block-width: 50px;
  /* Szerokość bazowa */
  --block--type-custom-icons-block-hover-width: 75px;
  /* Szerokość hover */
  /* Różnica szerokości */
  --block--type-custom-icons-block-diff-hover-width: calc(var(--block--type-custom-icons-block-hover-width) - var(--block--type-custom-icons-block-width));
  width: var(--block--type-custom-icons-block-width);
  /* By right: 0 dobrze działało */
  height: 0;
  /* By nie psuć tego co już jest na stronie */
  position: fixed;
  right: 0;
  top: 50vh;
  transition: 300ms;
  z-index: 100;
}
/* Tak na zaś by wielkość elementów nie ograniczały */
.block--type-custom-icons-block > .content, .block--type-custom-icons-block > .content > .field--name-field-side-icon {
  width: var(--block--type-custom-icons-block-width);
  height: min-content;
}
/* Wielkość obrazku */
.block--type-custom-icons-block > .content > .field--name-field-side-icon > .field__item {
  width: var(--block--type-custom-icons-block-width);
  /* Szerokość stała */
  height: auto;
  /* Automatyczna wysokość tak by proporcje zachować */
  background-color: white;
  position: relative;
  top: 0;
  right: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  box-shadow: -1px 0px 20px 1px rgba(0, 0, 0, 0.48);
  -webkit-box-shadow: -1px 0px 20px 1px rgba(0, 0, 0, 0.48);
  -moz-box-shadow: -1px 0px 20px 1px rgba(0, 0, 0, 0.48);
}
.block--type-custom-icons-block > .content > .field--name-field-side-icon > .field__item img {
  width: var(--block--type-custom-icons-block-width);
}
.block--type-custom-icons-block > .content > .field--name-field-side-icon > .field__item:hover {
  width: var(--block--type-custom-icons-block-hover-width);
  top: 0;
  right: var(--block--type-custom-icons-block-diff-hover-width);
}
/*# sourceMappingURL=block--type-custom-icons-block.css.map */