.tlist-wrapper-x22{
	
	margin: 50px auto;
	font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #4c4c4c;
}
.tlist-holder-x22{

}
.single-item-x22{
    float: left;
	min-height: 200px;
	padding: 0px 20px;
	width: 100%;
}
.single-item-x22:nth-child(even){
	padding: 40px 20px;
    background: #e2f2ff;
	box-shadow: none;
}
.single-item-x22:nth-child(even):hover{
box-shadow: -5px 8px 16px 0 rgba(0,0,0,0.2);
}

.single-item-x22:hover{

box-shadow: 5px 8px 16px 0 rgba(0,0,0,0.2), 5px 6px 20px 0 rgba(0,0,0,0.19);
}

.slope {
  background: #b4d5f1;
  position: relative;
  z-index: 1;
 
} 
.slope:before{
	top: 0;
    transform: skewY(2deg);
    transform-origin: 100% 0;		
}
.slope:after, .slope:before{
    background: inherit;
    content: '';
    display: block;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;	
}

.slope:after{
	bottom: 0;
    transform: skewY(-2deg);
    transform-origin: 100%;
}

.item-text {
	width: 90%;
	float: left;
	padding-right: 20px;
}
.item-icon {
	width: 10%;
	float: left;
	margin-top: 0;
	margin-left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.item-icon i{
	font-size: 5em;
}

.single-item-x22 h2{
	margin-bottom: 5px;
	margin-top: 18px;
}
.single-item-title{
	width: 85%;
	float: left;
}
.upvote-section {
	width: 10%;
	float: right;
	margin-top: 2%;
	text-align: center;
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.tlist-holder-x22 *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	
	-webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

/* Responsive Styles */

@media only screen and (max-width: 1000px){
	
} 
@media only screen and (max-width: 800px){
	
} 
@media only screen and (max-width: 600px){
	.tlist-wrapper-x22{
		width: 100%;
	}
	.item-text{
		width: 100%;
	}
	.item-icon{
		width: 100%;
		float: left;
		margin-top: 2%;
		text-align: center;
		justify-content: flex-start;
	}	
} 
@media only screen and (max-width: 500px){
	.tlist-wrapper-x22{
		width: 100%;
	}
	.item-text{
		width: 100%;
	}
	.item-icon{
		width: 100%;
		float: left;
		margin-top: 2%;
		text-align: center;
		justify-content: flex-start;
	}	
}