.content-text{
padding-bottom: 50px;
}
.produkty{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.produkty .produktP{
width: 33.333%;
box-sizing: border-box;
padding:8px;
}

.produkty .produktP>a{
display: block;
height: 100%;
background-color: #FFFFFF;
box-shadow: 0px 2px 15px #00000029;
border-radius: 4px;
position: relative;
transition: all 0.5s ease-out 0s;
}
.produkty .produktP>a:hover{
box-shadow: 0px 0px 0px #00000029;
}


.produkty .produktP>a .spImg{
display: block;
position: relative;
}

.produkty .produktP>a .spImg .spTlo {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,0.4);
transition: all 0.5s ease-out 0s;
opacity: 0;
z-index: 0;
}
.produkty .produktP>a .spImg .spTlo::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 0px;
height: 0px;
margin: auto;
background: url('../images/add-button.svg') 50% 50% no-repeat;
background-size: auto;
background-size: auto;
background-size: auto auto;
background-size: 100% 100%;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
opacity: 0.5;
}

.produkty .produktP>a:hover .spImg .spTlo::after {
width: 52px;
height: 52px;
}

.produkty .produktP>a:hover .spImg .spTlo {
transition: all 0.5s ease-out 0s;
opacity: 1;
}

.produkty .produktP>a .spImg img{
width: 100%;
height: auto;
transition: all 0.5s ease-out 0s;
position: relative;
z-index: 0;
}

.produkty .produktP>a .spImg::before {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-bottom: 1px solid
#FFFFFF;
border-right: 1px solid
#FFFFFF;
bottom: 0px;
right: 0px;
opacity: 0;
transition: all 0.5s ease-out 0s;
}

.produkty .produktP>a:hover .spImg::before {
transition: all 0.5s ease-out 0s;
bottom: 20px;
right: 20px;
opacity: 1;
width: 50px;
height: 50px;
z-index: 1;
}

.produkty .produktP>a .spImg::after {
content: "";
position: absolute;
width: 0px;
height: 0px;
border-top: 1px solid
#FFFFFF;
border-left: 1px solid
#FFFFFF;
top: 0px;
left: 0px;
transition: all 0.5s ease-out 0s;
opacity: 0;
}

.produkty .produktP>a:hover .spImg::after {
transition: all 0.5s ease-out 0s;
top: 20px;
left: 20px;
opacity: 1;
width: 50px;
height: 50px;
}




.produkty .produktP>a .title{
box-sizing: border-box;
padding: 20px 24px 0px 24px;
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
color: #707070;
font-weight: 500;
  transition: all 0.5s ease-out 0s;
}
.produkty .produktP>a:hover .title{
color: #65AA28;
}

.produkty .produktP>a .zajawka{
box-sizing: border-box;
display: block;
padding: 28px 24px 100px 24px;
color: #707070;
font-size: 14px;
font-weight: 400;
line-height: 1.7em;
}
.produkty .produktP>a .moreA{
box-sizing: border-box;
display: block;
padding: 20px 24px 23px 24px;
position: absolute;
bottom: 0px;
width: 100%;
}
.produkty .produktP>a .moreA>span{
display: block;
background-color: #65AA28;
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
border: 1px solid #65AA28;
padding: 20px 20px 20px 29px;
border-radius: 4px;
text-transform: uppercase;
position: relative;
transition: all 0.5s ease-out 0s;
}
.produkty .produktP>a .moreA:hover>span{
background-color: #FFFFFF;
color: #65AA28;
}

.produkty .produktP>a .moreA>span:after{
content: "";
position: absolute;
width: 29px;
height: 11px;
right: 29px;
top:0px;
bottom: 0px;
margin: auto;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAALCAYAAACDHIaJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMNJREFUeNpiTF2lwUAJmBV6HYWftlpzAZDyB+IGoNxEbHqYGKgPDgCxABBPADpgPRAL0NxSoO9APjUE4otAHADE54EWG9DapyCLLwApByBeCMQKUIvzYfKMwDidAKT1GWgHDKDBDQILgA5KZIG6xIGBPgAU7Aws0HCnWupFS8kNQKoeygUFdQHMUqoDaIpdDw3BjyDLoAmMgSaWQlPqfmg8glMw0MIHyGpo4dMGqIUTgZYV0KVwAFoESiOKuCwEAYAAAwBSkzdh6LwRaQAAAABJRU5ErkJggg==') 50% 50% no-repeat;
filter: brightness(0%) invert(100%);
transition: all 0.5s ease-out 0s;
}
.produkty .produktP>a .moreA:hover>span:after{
filter: brightness(100%) invert(0%);
}

@media screen and (max-width:1100px){
.produkty .produktP {width: 50%}
}
@media screen and (max-width:700px){
.produkty .produktP {width: 100%}
}