.sprite {
  background-image: url('../sprite-out/sprites.png');
  background-repeat: no-repeat;
  display: inline-block;
}


  .sprite.rekonstrukce {
    background-position: 0 0;
    width: 89px;
    height: 72px;
  }


  .sprite.oco-kruh {
    background-position: 0 -72px;
    width: 85px;
    height: 85px;
  }


  .sprite.oco-kniha {
    background-position: -89px 0;
    width: 76px;
    height: 85px;
  }


  .sprite.oco-hammer {
    background-position: -165px 0;
    width: 82px;
    height: 85px;
  }


  .sprite.new-grid {
    background-position: 0 -157px;
    width: 70px;
    height: 79px;
  }


  .sprite.new-kalendar {
    background-position: -165px -85px;
    width: 55px;
    height: 72px;
  }


    .sprite-container:hover .new-obcan20,
    .sprite-container.act .new-obcan20,

  .sprite.new-obcan20:hover {
    background-position: -89px -85px;
    width: 56px;
    height: 71px;
  }


  .sprite.new-obcan20 {
    background-position: -70px -157px;
    width: 56px;
    height: 71px;
  }


  .sprite.obcan {
    background-position: -126px -157px;
    width: 52px;
    height: 69px;
  }


    .sprite-container:hover .about-zarovka,
    .sprite-container.act .about-zarovka,

  .sprite.about-zarovka:hover {
    background-position: -178px -157px;
    width: 39px;
    height: 62px;
  }


  .sprite.about-zarovka {
    background-position: -247px 0;
    width: 39px;
    height: 62px;
  }


  .sprite.new-nic {
    background-position: -286px 0;
    width: 60px;
    height: 56px;
  }


  .sprite.new-lupa {
    background-position: -286px -56px;
    width: 60px;
    height: 60px;
  }


    .sprite-container:hover .media-down,
    .sprite-container.act .media-down,

  .sprite.media-down:hover {
    background-position: -286px -116px;
    width: 46px;
    height: 60px;
  }


  .sprite.media-down {
    background-position: -286px -176px;
    width: 46px;
    height: 60px;
  }


    .sprite-container:hover .icon-mapa,
    .sprite-container.act .icon-mapa,

  .sprite.icon-mapa:hover {
    background-position: 0 -236px;
    width: 60px;
    height: 39px;
  }


  .sprite.icon-mapa {
    background-position: -60px -236px;
    width: 60px;
    height: 39px;
  }

  .sprite.icon-mapa_2 {
background-position: 0 -389px;
width: 48px;
height: 61px;
      }
      .sprite-container:hover .icon-mapa_2,
      .sprite-container.act .icon-mapa_2,
.sprite.icon-mapa_2:hover {
  background-position: -49px -389px;
width: 48px;
height: 61px;
}

    .sprite-container:hover .about-ruce,
    .sprite-container.act .about-ruce,

  .sprite.about-ruce:hover {
    background-position: 0 -275px;
    width: 60px;
    height: 56px;
  }


  .sprite.about-ruce {
    background-position: -60px -275px;
    width: 60px;
    height: 56px;
  }


    .sprite-container:hover .about-kolecko,
    .sprite-container.act .about-kolecko,

  .sprite.about-kolecko:hover {
    background-position: -346px 0;
    width: 60px;
    height: 59px;
  }


  .sprite.about-kolecko {
    background-position: -346px -59px;
    width: 60px;
    height: 59px;
  }


    .sprite-container:hover .about-faq,
    .sprite-container.act .about-faq,

  .sprite.about-faq:hover {
    background-position: -346px -118px;
    width: 60px;
    height: 51px;
  }


  .sprite.about-faq {
    background-position: -346px -169px;
    width: 60px;
    height: 51px;
  }


    .sprite-container:hover .about-srdce,
    .sprite-container.act .about-srdce,

  .sprite.about-srdce:hover {
    background-position: -346px -220px;
    width: 59px;
    height: 59px;
  }


  .sprite.about-srdce {
    background-position: 0 -331px;
    width: 59px;
    height: 59px;
  }


    .sprite-container:hover .about-kolac,
    .sprite-container.act .about-kolac,

  .sprite.about-kolac:hover {
    background-position: -120px -275px;
    width: 59px;
    height: 55px;
  }


  .sprite.about-kolac {
    background-position: -179px -275px;
    width: 59px;
    height: 55px;
  }


    .sprite-container:hover .about-aktovka,
    .sprite-container.act .about-aktovka,

  .sprite.about-aktovka:hover {
    background-position: -59px -331px;
    width: 59px;
    height: 58px;
  }


  .sprite.about-aktovka {
    background-position: -118px -331px;
    width: 59px;
    height: 58px;
  }


    .sprite-container:hover .icon-hammer,
    .sprite-container.act .icon-hammer,

  .sprite.icon-hammer:hover {
    background-position: -177px -331px;
    width: 56px;
    height: 57px;
  }


  .sprite.icon-hammer {
    background-position: -233px -331px;
    width: 56px;
    height: 57px;
  }


    .sprite-container:hover .icon-hammer-light,
    .sprite-container.act .icon-hammer-light,

  .sprite.icon-hammer-light:hover {
    background-position: -289px -331px;
    width: 56px;
    height: 57px;
  }


  .sprite.icon-hammer-light {
    background-position: -345px -331px;
    width: 56px;
    height: 57px;
  }


    .sprite-container:hover .new-elearning,
    .sprite-container.act .new-elearning,

  .sprite.new-elearning:hover {
    background-position: -238px -275px;
    width: 56px;
    height: 53px;
  }


  .sprite.new-elearning {
    background-position: -406px 0;
    width: 56px;
    height: 53px;
  }


    .sprite-container:hover .media-foto,
    .sprite-container.act .media-foto,

  .sprite.media-foto:hover {
    background-position: -406px -53px;
    width: 55px;
    height: 49px;
  }


  .sprite.media-foto {
    background-position: -406px -102px;
    width: 55px;
    height: 49px;
  }


    .sprite-container:hover .icon-document,
    .sprite-container.act .icon-document,

  .sprite.icon-document:hover {
    background-position: -406px -151px;
    width: 41px;
    height: 54px;
  }


  .sprite.icon-document {
    background-position: -406px -205px;
    width: 41px;
    height: 54px;
  }


    .sprite-container:hover .icon-document-light,
    .sprite-container.act .icon-document-light,

  .sprite.icon-document-light:hover {
    background-position: -406px -259px;
    width: 41px;
    height: 54px;
  }


  .sprite.icon-document-light {
    background-position: -406px -313px;
    width: 41px;
    height: 54px;
  }


  .sprite.kolecko-logo {
    background-position: -346px -279px;
    width: 46px;
    height: 46px;
  }


  .sprite.otaznicek {
    background-position: -447px -151px;
    width: 9px;
    height: 16px;
  }


  .sprite.vzory {
    background-position: -447px -167px;
    width: 13px;
    height: 14px;
  }


  .sprite.vzory-cervene {
    background-position: -447px -181px;
    width: 13px;
    height: 14px;
  }


  .sprite.vzory-cerne {
    background-position: -447px -205px;
    width: 13px;
    height: 14px;
  }


  .sprite.troj-up-cerveny {
    background-position: -447px -195px;
    width: 14px;
    height: 10px;
  }


  .sprite.troj-up-cerny {
    background-position: -447px -219px;
    width: 14px;
    height: 10px;
  }


  .sprite.troj-down-cerveny {
    background-position: -447px -229px;
    width: 14px;
    height: 10px;
  }


  .sprite.troj-down-cerny {
    background-position: -447px -239px;
    width: 14px;
    height: 10px;
  }


  .sprite.otaznicek-cerveny {
    background-position: -447px -259px;
    width: 8px;
    height: 14px;
  }


  .sprite.otaznicek-cerny {
    background-position: -447px -273px;
    width: 8px;
    height: 14px;
  }


    .sprite-container:hover .menu-tv,
    .sprite-container.act .menu-tv,

  .sprite.menu-tv:hover {
    background-position: -447px -287px;
    width: 13px;
    height: 12px;
  }


  .sprite.menu-tv {
    background-position: -447px -299px;
    width: 13px;
    height: 12px;
  }


    .sprite-container:hover .menu-contact,
    .sprite-container.act .menu-contact,

  .sprite.menu-contact:hover {
    background-position: -447px -249px;
    width: 13px;
    height: 9px;
  }


  .sprite.menu-contact {
    background-position: -447px -313px;
    width: 13px;
    height: 9px;
  }


    .sprite-container:hover .menu-about,
    .sprite-container.act .menu-about,

  .sprite.menu-about:hover {
    background-position: -447px -322px;
    width: 9px;
    height: 12px;
  }


  .sprite.menu-about {
    background-position: -447px -334px;
    width: 9px;
    height: 12px;
  }


    .sprite-container:hover .menu-aktovka,
    .sprite-container.act .menu-aktovka,

  .sprite.menu-aktovka:hover {
    background-position: -447px -346px;
    width: 11px;
    height: 11px;
  }


  .sprite.menu-aktovka {
    background-position: -406px -367px;
    width: 11px;
    height: 11px;
  }

  .sprite.student {
    background-image:url("../img/icon_student.png");
    width: 11px;
    height: 10px;
  }

  .sprite-container:hover .student {
    background-image:url("../img/icon_student_hover.png");
    width: 11px;
    height: 10px;
  }