.widget-xxss-loading { left: 50%; margin: 0 0 0 -12.5px; position: absolute; }

#xxss_container { max-width: 1142px; min-width: 314px; /*width: 100%;*/ width: 1142px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -602px; padding: 0; font-family: 'Source Sans Pro', sans-serif; }
#xxss_container a:link, #xxss_container a:visited { text-decoration: inherit; color: inherit; cursor: pointer; }

#cpi_xxss #header { /*margin: 0 0 14px 62px;*/ margin: 35px 0 5px; padding: 0; width: 100%; height: 30px; /*border-bottom: 1px solid #e1e3e3;*/ display: block; }
#cpi_xxss #header div.h2 { display: none; color: #000; font-size: 28px; font-weight: 300; line-height: 28px; margin: 0; padding: 0; float: left; }
#cpi_xxss #header #menu_btn { display: none; }
#cpi_xxss #header .menu { margin: 0; padding: 0; height: 100%; float: right; }
#cpi_xxss #header .menu li { display: inline-block; margin: 0 0 0 20px; }
#cpi_xxss #header .menu .facebook, #header .menu .twitter { margin-top: 2px; }

#cpi_xxss #filter { list-style: none; margin: 0 20px 0 0; padding: 0; width: 100%; float: left; }
#cpi_xxss #filter li { margin: 0 0 10px; }
#cpi_xxss #filter li a { display: block; text-indent: -9999em; width: 42px; height: 42px; background-repeat: no-repeat; background-position: top left; background-size: cover; }
#cpi_xxss #filter li .all { background-image: url(../img/all.png); }
#cpi_xxss #filter li .facebook { background-image: url(../img/facebook.png); }
#cpi_xxss #filter li .instagram { background-image: url(../img/instagram.png); }
#cpi_xxss #filter li .twitter { background-image: url(../img/twitter.png); }
#cpi_xxss #filter li .youtube { background-image: url(../img/youtube.png); }
#cpi_xxss #filter li a.active, #filter li a:hover { background-position: bottom left; }

#grid { position: relative; }

#grid .item { max-width: 252px; min-width: 187.833px; /*width: 23.3333%;*/ width: 252px; height: 252px; background: #ebebeb; float: left; /*margin: 0 2.22222% 2.22222% 0;*/ margin: 0 24px 24px 0; color: #000; font-size: 12px; font-weight: 400; line-height: 12px; cursor: default; overflow: hidden; }

#grid .item .from { background: #ebebeb; color: #666; width: 232px; height: 59px; overflow: hidden; margin: 10px 0 0 10px; }
#grid .item .from .image { margin: 6px 0 0 6px; float: left; }
#grid .item .from .image img { width: 47px; border: none; }
#grid .item .from .user { line-height: 20px; margin: 6px 0 0 10px; float: left; }
#grid .item .from .user .name { font-size: 14px; line-height: 23px; margin: 0; float: left; width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#grid .item .from .user .time { background: url(../img/clock.png) no-repeat left bottom; margin: 0; padding: 0 0 0 23px; float: left; clear: left; }
#grid .item .from .user .icon { display: block; text-indent: -9999em; margin: 0 0 0 8px; float: left; }

#grid .item .content { margin: 0; padding: 0; }
#grid .item .content a { color: #666; }

#grid .item .actions { width: 100%; height: 42px; line-height: 40px; position: absolute; bottom: 0; margin: 0; padding: 0; }
#grid .item .actions > div { float: left; margin: 0 0 0 10px; }
#grid .item .actions > div a, #grid .item .actions > div .bubble { float: left; }
#grid .item .actions > div .bubble { margin: 11px 0 0 2px; }
#grid .item .actions > div .bubble .num { background: #fff; border: 1px solid #fff; border-radius: 2px; color: #666; display: inline-block; font-size: 14px; height: auto; line-height: 18px; margin-left: 6px; min-width: 15px; padding: 0 3px; text-align: center; white-space: nowrap; }
#grid .item .actions > div .bubble .nub { height: 0; left: 2px; position: relative; top: -15px; width: 5px; z-index: 2; }
#grid .item .actions > div .bubble .nub s { border-color: transparent #fff; border-style: solid; border-width: 4px 5px 4px 0; display: block; position: relative; top: 1px; }

#grid .first-box { background: #aab0b0; }
#grid .first-box div.h2 { font-size: 33px; font-weight:200; letter-spacing: -1px; line-height: 30px; color: #fff; margin: 0; position: absolute; left: 10px; bottom: 10px; width: 232px; }

#grid .facebook .from .user .icon { background: url(../img/fb.png) no-repeat bottom; width: 9px; }
#grid .facebook .content { width: 222px; height: 114px; margin: 5px 15px; font-size: 14px; line-height: 16px; overflow: hidden; }
#grid .facebook .actions { color: #fff; background: #aab0b0; }
#grid .facebook .actions .likes a { background: url(../img/like.png) no-repeat left; padding: 0 0 0 20px; }
#grid .facebook .actions .shares { float: right; margin: 0 10px 0 0; }
#grid .facebook .actions .shares a { background: url(../img/share.png) no-repeat left; padding: 0 0 0 20px; }

#grid .instagram .from { position: absolute; left: 50%; bottom: 10px; margin: 0 0 0 -116px; }
#grid .instagram .from .user .icon { background: url(../img/insta.png) no-repeat bottom; width: 18px; }
#grid .instagram .content img { width: 100%; }
#grid .instagram .actions { display: none; }

#grid .twitter .from .user .icon { background: url(../img/tuit.png) no-repeat bottom; width: 23px; }
#grid .twitter .content { width: 222px; height: 142px; margin: 5px 15px; font-size: 18px; line-height: 20px; overflow: hidden; }
#grid .twitter .actions .replies a { display: block; text-indent: -9999em; background: url(../img/reply.png) no-repeat center; width: 16px; }
#grid .twitter .actions .retweets, #grid .twitter .actions .favorites { margin: 0 0 0 50px; }
#grid .twitter .actions .retweets a { display: block; text-indent: -9999em; background: url(../img/retweet.png) no-repeat center; width: 21px; }
#grid .twitter .actions .favorites a { display: block; text-indent: -9999em; background: url(../img/favorite.png) no-repeat center; width: 15px; }

#grid .youtube .from .user .icon { background: url(../img/yt.png) no-repeat bottom; width: 22px; }
#grid .youtube .content { position: absolute; bottom: 0; }
#grid .youtube .content img, #grid .youtube .content iframe { width: 252px; height: 176px; }
#grid .youtube .content .play { position: absolute; bottom: 0; left: 0; width: 78px; height: 58px; }
#grid .youtube .actions { display: none; }

#cpi_xxss #footer { text-align: center; }
#cpi_xxss #footer a.more { display: block; width: auto; height: 42px; margin: 0 auto;  padding: 0; background: #aab0b0; border-radius: 20px; font-size: 16px; font-weight: 400; line-height: 42px; text-transform: uppercase; color: #fff; }

@media screen and (max-width: 1024px) {
	#xxss_container { width: 954px; margin: 0 0 0 -500px; }
	
	#filter { margin: 0 10px 0 0; width: 37px; }
	#filter li a { width: 37px; height: 37px; }
		
	#grid .item { width: 212px; height: 212px; margin: 0 20px 20px 0; font-size: 10px; }
	#grid .item .from { width: 192px; height: 50px; }
	#grid .item .from .image { margin: 5px 0 0 5px; }
	#grid .item .from .image img { width: 40px; }
	#grid .item .from .user { margin: 0 0 0 10px; }
	#grid .item .from .user .name { font-size: 12px; width: 136px; }
	#grid .item .actions > div { margin: 0 0 0 5px; }
	#grid .item .actions > div .bubble { margin: 11px 0 0 0; }
	
	#grid .first-box div.h2 { width: 190px; font-size: 26px; line-height: 25px; }
	#grid .facebook .content { width: 182px; font-size: 12px; line-height: 14px; }
	#grid .facebook .actions .likes a { padding: 0 0 0 16px; }
	#grid .facebook .actions .shares { margin: 0 5px 0 0; }
	#grid .instagram .from { margin: 0 0 0 -96px; }
	#grid .twitter .content { width: 182px; font-size: 14px; line-height: 18px; }
	#grid .twitter .actions .retweets, #grid .twitter .actions .favorites { margin: 0 0 0 40px; }
	#grid .youtube .content img, #grid .youtube .content iframe { width: 212px; height: 152px; }
}

@media screen and (max-width: 800px) {
	#xxss_container { width: 741px; margin: 0 0 0 -390px; }
	
	#filter { margin: 0 3px 0 0; }
		
	#grid .item { width: 222px; height: 222px; margin: 0 17px 17px 0; }
	#grid .item .from { width: 202px; }
	
	#grid .first-box div.h2 { width: 200px; }
	#grid .facebook .content { width: 192px; }
	#grid .instagram .from { margin: 0 0 0 -101px; }
	#grid .twitter .content { width: 192px; }
	#grid .twitter .actions .retweets, #grid .twitter .actions .favorites { margin: 0 0 0 40px; }
	#grid .youtube .content img, #grid .youtube .content iframe { width: 222px; height: 159px; }
}

@media screen and (max-width: 768px) {
	#xxss_container { width: 725px; margin: 0 0 0 -374px; }
	
	#filter { width: 21px; }
	#filter li a { width: 21px; height: 21px; }
}

@media screen and (max-width: 600px) {
	#xxss_container { width: 572px; margin: 0 0 0 -290px; }
	
	#filter { width: 42px; margin: 0 10px 0 0; }
	#filter li a { width: 42px; height: 42px; }
	
	#grid .item { width: 252px; height: 252px; margin: 0 15px 15px 0; font-size: 12px; }
	#grid .item .from { width: 232px; height: 59px; }
	#grid .item .from .image { margin: 6px 0 0 6px; }
	#grid .item .from .image img { width: 47px; }
	#grid .item .from .user { margin: 6px 0 0 10px; }
	#grid .item .from .user .name { font-size: 14px; width: 168px; }
	#grid .item .actions > div { margin: 0 0 0 10px; }
	#grid .item .actions > div .bubble { margin: 11px 0 0 2px; }
	
	#grid .first-box div.h2 { width: 232px; font-size: 33px; line-height: 30px; }
	#grid .facebook .content { width: 222px; font-size: 14px; line-height: 16px; }
	#grid .facebook .actions .likes a { padding: 0 0 0 20px; }
	#grid .facebook .actions .shares { margin: 0 10px 0 0; }
	#grid .instagram .from { margin: 0 0 0 -116px; }
	#grid .twitter .content { width: 222px; font-size: 18px; line-height: 20px; }
	#grid .twitter .actions .retweets, #grid .twitter .actions .favorites { margin: 0 0 0 50px; }
	#grid .youtube .content img, #grid .youtube .content iframe { width: 252px; height: 176px; }
}

@media screen and (min-width: 480px) {
	#cpi_xxss #header #menu_btn { display: none; }
	#cpi_xxss #header .menu { display: block !important; background: none; border: none; margin: 0; padding: 0; width: auto; height: 100%; position: static; z-index: auto; float: right; }
}

@media screen and (max-width: 480px) {
	#xxss_container { width: 452px; margin: 0 0 0 -230px; }
	
	#cpi_xxss #header #menu_btn {
		background: #aab0b0;
		border-bottom: 1px solid #000;
    	border-right: 1px solid #000;
		display: block;
		font-size: 16px;
		color: #fff;
		line-height: 30px;
		text-align: center;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 35px;
		right: 14px;
		z-index: 11;
		cursor: pointer;
	}
	#cpi_xxss #header .menu {
		display: none;
		background: #aab0b0;
		border-bottom: 1px solid #000;
    	border-right: 1px solid #000;
		margin: 0;
		padding: 10px;
		width: 174px;
		height: auto;
		position: absolute;
		top: 35px;
		right: 44px;
		z-index: 10;
	}
	
	#filter { margin: 0 60px 0 14px; }
}

@media screen and (max-width: 320px) {
	#xxss_container { width: 300px; margin: 0 0 0 -150px; }
	
	#filter { margin: 0 6px 0 0; }
}