/* obrazek 1-2 */

.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: #8f0097;
    color: #fff;
    content: attr(data-title1);
	line-height: 170px;
    overflow: hidden;
	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 1-3 */

.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: #c2004f;
    color: #fff;
    content: attr(data-title2);
    line-height: 170px;
    overflow: hidden;
	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 1-4 */

.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: #8f0097;
    color: #fff;
    content: attr(data-title3);
	line-height: 170px;
    overflow: hidden;
	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 1-5 */

.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: #8f0097;
    color: #fff;
    content: attr(data-title4);
	line-height: 170px;
    overflow: hidden;
	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 2-1 */

.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: #c2004f;
    color: #fff;
    content: attr(data-title5);
	line-height: 170px;
    overflow: hidden;
	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 2-2 */

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

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

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

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

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

/* obrazek 3-3 */

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

/* obrazek 3-4 */

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

/* obrazek 3-5 */

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