/* obrazek 1-4 */

.title1 {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title1 img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title1:before, .title1:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title1:before {
    height: 170px;
}
 
.title1:after {
    background: #bdbdbd;
    color: #fff;
    content: attr(data-title1);
	line-height: 170px;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: ellipsis;
    white-space: pre;
}
 
.title1.fade-in1:after {
    opacity: 0;
    top: 0;
}
 
.title1.fade-in1.bottom1:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title1.fade-in1:hover:after {
    opacity: 0.5;
}

/* obrazek 2-2 */

.title2 {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title2 img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title2:before, .title2:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title2:before {
    height: 170px;
}
 
.title2:after {
    background: #bdbdbd;
    color: #fff;
    content: attr(data-title2);
    line-height: 170px;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: ellipsis;
    white-space: pre;
}
 
.title2.fade-in2:after {
    opacity: 0;
    top: 0;
}
 
.title2.fade-in2.bottom2:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title2.fade-in2:hover:after {
    opacity: 0.5;
}

/* obrazek 3-1 */

.title3 {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title3 img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title3:before, .title3:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title3:before {
    height: 170px;
}
 
.title3:after {
    background: #bdbdbd;
    color: #fff;
    content: attr(data-title3);
	line-height: 170px;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: ellipsis;
    white-space: pre;
}
 
.title3.fade-in3:after {
    opacity: 0;
    top: 0;
}
 
.title3.fade-in3.bottom3:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title3.fade-in3:hover:after {
    opacity: 0.5;
}
/* obrazek 3-3 */

.title4 {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title4 img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title4:before, .title4:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title4:before {
    height: 170px;
}
 
.title4:after {
    background: #bdbdbd;
    color: #fff;
    content: attr(data-title4);
	line-height: 170px;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: clip;
    white-space: pre;
}
 
.title4.fade-in4:after {
    opacity: 0;
    top: 0;
}
 
.title4.fade-in4.bottom4:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title4.fade-in4:hover:after {
    opacity: 0.5;
}
/* obrazek 3-5 */

.title5 {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title5 img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title5:before, .title5:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title5:before {
    height: 170px;
}
 
.title5:after {
    background: #bdbdbd;
    color: #fff;
    content: attr(data-title5);
	line-height: 170px;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: ellipsis;
    white-space: pre;
}
 
.title5.fade-in5:after {
    opacity: 0;
    top: 0;
}
 
.title5.fade-in5.bottom5:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title5.fade-in5:hover:after {
    opacity: 0.5;
}

/* obrazek dla budynkow przemyslowych */

.title_p {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title_p img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title_p:before, .title_p:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title_p:before {
    height: 170px;
}
 
.title_p:after {
    background: #8f0097;
    color: #fff;
    content: attr(data-title_p);
	line-height: 170px;
    overflow: hidden;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: ellipsis;
    white-space: pre;
}
 
.title_p.fade-in_p:after {
    opacity: 0;
    top: 0;
}
 
.title_p.fade-in_p.bottom_p:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title_p.fade-in_p:hover:after {
    opacity: 0.5;
}

/* obrazek dla budynkow uslugowych */

.title_u {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title_u img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title_u:before, .title_u:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title_u:before {
    height: 170px;
}
 
.title_u:after {
    background: #c2004f;
    color: #fff;
    content: attr(data-title_u);
	line-height: 170px;
    overflow: hidden;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: ellipsis;
    white-space: pre;
}
 
.title_u.fade-in_u:after {
    opacity: 0;
    top: 0;
}
 
.title_u.fade-in_u.bottom_u:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title_u.fade-in_u:hover:after {
    opacity: 0.5;
}

/* obrazek dla budynkow przemyslowych */

.title_i {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 0;
    background: #151515;
    width: 220px;
	font-size:16px;
	text-shadow:1px 1px black;
}
 
.title_i img {
    display: block;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title_i:before, .title_i:after {
    content: '';
    position: absolute;
    text-align: left;
    transition: all .6s ease-in-out;
    width: 220px;
}
 
.title_i:before {
    height: 170px;
}
 
.title_i:after {
    background: #00c1e6;
    color: #fff;
    content: attr(data-title_i);
	line-height: 170px;
    overflow: hidden;
	text-align: center;
    padding: 0 0 60px 0;
    text-overflow: ellipsis;
    white-space: pre;
}
 
.title_i.fade-in_i:after {
    opacity: 0;
    top: 0;
}
 
.title_i.fade-in_i.bottom_i:after {
    top: auto;
    bottom: 0;
	width: 220px;
}
 
.title_i.fade-in_i:hover:after {
    opacity: 0.5;
}