.container .mix,
.container .gap{
  display: inline-block;
}

.container .mix{
	width: 33.3%;
	float: left;
	position: relative;
	text-align: left;
	margin-bottom: 16px;
	display: none;
	padding: 0 8px;
	cursor: pointer;
}

.container .mix:after{
  content: attr(data-myorder);
}

.blogroll-control {
	padding-left: 38px;
}

.blogroll-control .blogroll--filter {
	margin: 0 0 40px 0;
	padding: 0;
	list-style: none;
}

.blogroll-control .blogroll--filter li {
    letter-spacing: 1px;
}

.blogroll-control .blogroll--filter li span i {
    margin-left: 8px;
    opacity: 0;

	-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		    transition: all .3s ease-in-out;
}

    .blogroll-control .blogroll--filter li:hover span i {
        margin-left: 24px;
        opacity: 1;
    }


	.blogroll-control .blogroll--filter li:nth-child(2) span {
		color: #f75607;
	}

	.blogroll-control .blogroll--filter li:nth-child(2):hover span {
		color: #f75607;
	}

	.blogroll-control .blogroll--filter li:nth-child(3) span {
		color: #560d94;
	}

	.blogroll-control .blogroll--filter li:nth-child(3):hover span {
		color: #560d94;
	}

	.blogroll-control .blogroll--filter li:nth-child(4) span {
		color: #14bee8;
	}

	.blogroll-control .blogroll--filter li:nth-child(4):hover span {
		color: #14bee8;
	}

	.blogroll-control .blogroll--filter li:nth-child(5) span {
		color: #3d81f1;
	}

	.blogroll-control .blogroll--filter li:nth-child(5):hover span {
		color: #3d81f1;
	}

	.blogroll-control .blogroll--filter li:nth-child(6) span {
		color: #f30d13;
	}

	.blogroll-control .blogroll--filter li:nth-child(6):hover span {
		color: #f30d13;
	}

	.blogroll-control .blogroll--filter li:nth-child(7) span {
		color: #ffce09;
	}

	.blogroll-control .blogroll--filter li:nth-child(7):hover span {
		color: #ffce09;
	}

	.blogroll-control .blogroll--filter li:nth-child(8) span {
		color: #333;
	}

	.blogroll-control .blogroll--filter li:nth-child(8):hover span {
		color: #333;
	}

	.blogroll-control .blogroll--filter li:nth-child(9) span {
		color: #17c298;
	}

	.blogroll-control .blogroll--filter li:nth-child(9):hover span {
		color: #17c298;
	}

	.blogroll-control .blogroll--filter li:nth-child(10) span {
		color: #a28243;
	}

	.blogroll-control .blogroll--filter li:nth-child(10):hover span {
		color: #a28243;
	}

	.blogroll-control .blogroll--filter li:nth-child(11) span {
		color: #f311b1;
	}

	.blogroll-control .blogroll--filter li:nth-child(11):hover span {
		color: #f311b1;
	}

	.blogroll-control .blogroll--filter li span {
		display: block;
		padding-bottom: 12px;
		margin-bottom: 12px;
		background: transparent;
		border-bottom: 1px dashed rgba(0,0,0,.1);
		font-size: 14px;
		text-transform: uppercase;
		cursor: pointer;

		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
	}

	.blogroll-control .blogroll--filter li span:hover,
	.blogroll-control .blogroll--filter li span:focus,
	.blogroll-control .blogroll--filter li span:active {
		font-weight: 500;
		color: #1a1a1a;
	}

	.blogroll-control .blogroll--filter li:last-child span {
		margin: 0;
	}

.blog-img
{
    width: 100%;
    height: 145px;
    overflow: hidden;
    background: #000;
}

.item-img
{
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #000;
}

.mix img {
	max-width: 100%;
	opacity: 1;

	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}

.mix:hover img {
	opacity: .7;
}

.mix .blog-title {
    /*min-height: 103px;*/
    min-height: 120px;
	padding: 16px;
	background: #f5f5f5;
	border-bottom: 2px solid #EEE;	
}

	.mix .blog-title h2 {
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .6px;
        line-height: 20px;
	}

	.mix .blog-title small {
        display: block;
        margin-bottom: 8px;
		font-size: 10px;
		font-weight: 500;
		color: #AAA;
		text-transform: uppercase;
	}

.mix article {
    /*min-height: 160px;*/
	padding: 24px 16px;
	background: #FFF;
    border-bottom: 4px solid #f0f0f0;
	font-size: 14px;
	font-weight: 300;
    color: #888;
	letter-spacing: .2px;
}

	.mix article p {
		margin: 0;
	}

	.mix article a {
		margin-top: 16px;
		padding: 12px;
		display: block;
		border: 2px solid #666;
		font-size: 13px;
		font-weight: bold;
		color: #666;
		text-align: center;
		text-decoration: none;

		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
	}

	.mix article a:hover {
		background: #333;
		border: 2px solid #333;
		color: #FFF;
	}