.wrapProdukty{
background: url("../images/bg_produkty.png") 50% 50% no-repeat;
background-size: auto 100%;
padding: 48px 0px 88px 0px;
}
.wrapProdukty .boxProdukty{

}
.boxProdukty .title{
padding: 48px 32px;
display: block;
font-size: 30px;
font-weight: 500;
}

.scrollP{
position: relative;
padding: 0px 51px;
}

.scrollP>.scrollNavig a.prev{
left: 0px;
background-image: url('../images/arrow_left.svg');
background-position: 100% 50%;
background-size:28px auto; 
}
.scrollP>.scrollNavig a.next{
right: 0px;
background-image: url('../images/arrow_right.svg');
background-position: 0% 50%;
background-size:28px auto; 
}

.scrollP>.scrollNavig a.prev, .scrollP>.scrollNavig a.next{
width: 21px;
height: 21px;
top: 50%;
position: absolute;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-size: 11px 21px;
background-repeat: no-repeat;
display: none;
}

.scrollP>.scrollNavig a.prev, .scrollP>.scrollNavig a.next{
cursor: pointer;
display: block;
z-index: 20;
}

.scrollP>.scrollNavig a.prev:hover{background-position: 0% 50%;}
.scrollP>.scrollNavig a.next:hover{background-position: 100% 50%;}

.scroll{
width: 100%;
max-width: 100%;
box-sizing:border-box;
overflow: hidden;
}
.scroll>ul{
list-style: none;
white-space: nowrap;
transition: transform 0s ease-out 0s;
z-index: 0;
}
.scroll>ul.shift{
transition: transform 0.5s cubic-bezier(.57,.58,.4,.98) 0s;
}

.scroll>ul.shiftTouch{
transition: all 0.5s ease-out 0s;
}

.scroll>ul>li{
display: inline-block;
width: 33.333%;
box-sizing: border-box;
left: 0%;
transform: translateX(-50%) scale(0);
z-index: -1;
transition: all 0s ease-out 0s;
position: relative;
}

.scroll > ul > li.visible {
z-index: 1;
left: 0;
opacity: 1;
}

.scroll > ul > li.back {
opacity: 0;
}
.scroll > ul.shift > li{
transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}

.scroll>ul>li>a{
display: block;
box-sizing:border-box;
position: relative;
}

.scroll>ul>li>a .spImg{
display: block;
text-align: center;
}

.scroll>ul>li>a img{
max-width: 100%;
height: auto;
}

.scroll>ul>li>a>span.titleImg{
display: block;
position: relative;
bottom: 0px;
width: 100%;
text-align: center;
font-size: 22px;
color: #FFFFFF;
padding: 32px 96px 0px;
box-sizing: border-box;
transition: all 0.5s ease-out 0s;
white-space: normal;
font-weight: 500;
}


@media screen and (max-width:1200px){
.scroll > ul > li > a > span.titleImg {padding: 32px 60px 0px;}
}
@media screen and (max-width:1150px){
}

@media screen and (max-width:1000px){	
}

@media screen and (max-width:940px){
.scrollP > .scrollNavig a.prev, .scrollP > .scrollNavig a.next { width: 32px;height: 32px;}
}
@media screen and (max-width:820px){
.scroll>ul>li{width: 100%;}
}


@media screen and (max-width:540px){
.scrollP {padding: 0px 12px;}
}

@media screen and (max-width:400px){
.boxProdukty .title {text-align: center;}
}