@charset "utf-8";

.img-produkty { position: relative; max-width: 100%; min-height: 300px; overflow: hidden;  }
.img-produkty > img { min-width: 100%; min-height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.img-produkty:before { content: ""; background: #2a2a2a; opacity: .7; filter: alpha(opacity=70); width: 100%; height: 100%; position: absolute; z-index: 500; }


.box { position: relative;  height:180px; }
.box a { padding: 25px;  background:#16242e url(../obr/blue_arrow_hover.png) repeat-x center -120px; height: 200px; display: block; position: absolute; top: -40%; z-index: 800; width: 100%; width:90%; left: 50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); background-size: contain; }
.box a.active, .box a:hover { background: #1f3a4d; }
.box a img { max-width:30%; display:block; position: absolute; top:40%; left:45%; transform: translate(-40%,-45%); -moz-transform: translate(-40%,-45%); -webkit-transform: translate(-40%,-45%); }
.box a h1 { position: absolute; bottom:20px; left: 50%; font-size: 150%; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); white-space: nowrap}

.box a:hover:before, .box a.active:before { content:""; position:absolute; bottom:-20px; left:50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 25px 30px 0 30px; border-color:#1f3a4d transparent transparent transparent;   }


ul.produkt-list { display:table; width: 100%; text-align: center; }
ul.produkt-list li { display:table-cell; text-align: center; padding-right: 1px }
ul.produkt-list li a { display: block; position: relative; background:url(../obr/blue_arrow.png) repeat-x center center; color: #fff; font-weight: bold; text-transform: uppercase; text-align: center; padding: 10px; }
ul.produkt-list li a:hover, ul.produkt-list li a.active  { background: url(../obr/blue_arrow_hover.png)  repeat-x center bottom; }
ul.produkt-list li a:hover:before, ul.produkt-list li a.active:before { content:""; position:absolute; bottom:-8px; left:50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 8px 10px 0 10px; border-color:#16242e transparent transparent transparent; }