.wbi-rows{
	max-width: 1440px;
	width: 90%;
	margin: auto;
	font-size: 0;
	/*padding-bottom: 108px;*/
}
.wbi-row
{
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.wbi-rows-inner
{
	margin: -10px;
}

.wbi-rows .wbi-row{
	display: inline-block;
	width: 33.3333333%;
	padding: 10px;
	box-sizing: border-box;
	z-index:0;
}

.wbi-rows.four-rows .wbi-row{
	display: inline-block;
	width: 25%;
	padding: 10px;
	box-sizing: border-box;
	z-index:0;
}

.wbi-rows .wbi-row:hover
{
	z-index: 10;
	transform: scale(1.07);
}

.wbi-rows .wbi-row .wbi-row-inner{
	height: 0;
	padding-bottom: 70%;
	position: relative;
	overflow: hidden;
	z-index: 0;
	border: 1px solid transparent;
	
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}

.wbi-rows .wbi-row:hover .wbi-row-inner
{
	box-shadow: 0 0 20px 0px black;
	border: 1px solid #fff;
}
.wbi-rows .wbi-row:hover .wbi-title a
{
	font-size: 1.875rem;
}

.wbi-row-inner-click
{
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 3;
}

.wbi-row-background
{
	position: absolute;
    top: 50%;
    left: 50%;

    width: auto;
    height: auto;

    max-height: none;
    max-width: 100%;

    min-height: 100%;
    min-width: 100%;

    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.wbi-rows .wbi-row .wbi-row-inner:before
{
	content: "";
	display: inline-block;
	vertical-align: middle;
	padding-bottom: 100%;
	height: 0;
	width: 0;
}

.wbi-rows .wbi-row .wbi-row-inner:after
{
	content: "";
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
	background: #000000;
	opacity: 0.25;
}

.wbi-row-details
{
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	text-align: center;
	padding: 6% 20px 34%;
	box-sizing: border-box;
	width: 100%;
	z-index: 2;
	background-color: rgba(0,0,0,0.2);

	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.wbi-row-hover-details
{
	position: absolute;
	top:0;
	left:0;
}

.wbi-title a
{
	font-weight: 600;
	font-size: 1.625rem;
	line-height: 30px;
	text-transform: uppercase;
	color: #ffffff;
	
	
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.wbi-text
{
	margin-top: 10px;
	position:absolute;
	top: 29%;
	left:60px;
	right:60px;
	opacity: 0;
	font-weight: 400;
	font-size: 1.25rem;
	color: #ffffff;

	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.wbi-rows.four-rows .wbi-text
{
	font-size: 1rem;
	line-height: 1.5;
}

.wbi-text p
{
	line-height: 1.5;
}
.wbi-font-icon
{
	position:absolute;
	top: 13%;
	left:60px;
	right:60px;
	color:#fff;
	opacity:0;
	font-weight: 400;
	font-size: 40px;

	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
}

.wbi-row-details.no-text .wbi-font-icon
{
	top:20%;
}
.wbi-title{
	line-height: 1.5;
}

.wbi-rows.four-rows .wbi-title a{
	font-size: 1.25rem;
	line-height: 1.5;
}
.wbi-rows.four-rows .wbi-row:hover .wbi-title a
{
	font-size: 1.25rem;
}

.wbi-title + .wbi-text
{
	margin-top: 32px;
	/*position: relative;*/
}

.wbi-title + .wbi-text:before
{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #fff;
	top: -17px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;

}
.wbi-row-background
{
	z-index:0;
}
.wbi-row-inner:hover .wbi-row-details
{
	background-color: rgba(123, 123, 123, 0.3);
	/* PADDING DLA IKON */
	/*padding: 26.5% 20px 65%;*/
	padding: 20.5% 20px 70%;
}

.wbi-rows.four-rows .wbi-row-inner:hover .wbi-row-details
{
	background-color: rgba(123, 123, 123, 0.3);
	/* PADDING DLA IKON */
	/*padding: 26.5% 20px 65%;*/
	padding: 19.5% 20px 70%;
}


.wbi-row-inner:hover .wbi-row-background
{
	z-index: 1;
}
.wbi-row-inner:hover .wbi-row-details.no-text
{
    padding: 33.5% 20px 58%;
}
.wbi-row-inner:hover .wbi-font-icon,
.wbi-row-inner:hover .wbi-text
{
    opacity:1;
}

.wbi-row-icon
{
	font-size: 100px;
	margin-bottom: 20px;
}

@media all and (max-width: 1400px){
	.wbi-font-icon
	{
		top: 8%;
	}

	.wbi-row-details.no-text .wbi-font-icon
	{
		top: 15%;
	}

}

@media all and (max-width: 1280px){
	.wbi-title a
	{
		font-size: 1.25rem;
	}
	.wbi-text
	{
		font-size: 1rem;
	}

	.wbi-text
	{
		/*font-size: 19px;*/
	}

	.wbi-rows
	{
		/*padding-bottom: 68px;*/
	}
	.wbi-rows.four-rows .wbi-row
	{
		width: 33.33333%;
	}
}

@media all and (max-width: 1024px){
	.wbi-rows-inner
	{
		text-align: center;
	}

	.wbi-rows .wbi-row, .wbi-rows.four-rows .wbi-row
	{
		width: 50%;
		max-width: 420px;
	}

	.wbi-rows
	{
		padding-bottom: 48px;
	}
}

@media all and (max-width: 680px){
	.wbi-rows .wbi-row, .wbi-rows.four-rows .wbi-row
	{
		width: 100%;
	}

}
@media all and (max-width: 400px){
	.wbi-row-inner:hover .wbi-row-details.no-text
	{
		padding: 33% 20px 58%;
	}

	.wbi-row-inner:hover .wbi-row-details
	{
		padding: 19% 20px 67%;
	}
	.wbi-rows .wbi-row:hover .wbi-title a
	{
		font-size: 1.25rem;
	}
	.wbi-title + .wbi-text
	{
		margin-top: 20px;
	}
	.wbi-text
	{
		left: 40px;
		right: 40px;
	}

}