/* body */
body {
	margin: 0;
}

.plu-social-wall {
	margin: 0;
	background: #fff;
	width: 100%;
}

/*-------------------------------
 * social box items ------------
 * -----------------------------*/

/* set the main wrapper to a set width */
.plu-social-box-wrapper {
	margin: 0 auto;
}
.plu-social-box-grid {
	width: 100%;
}

/* items */
.plu-social-box-item {
	display: inline-block;
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	transition: ease-in-out all 0.2s;
	margin: 0 0 2% 0;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 18px;
}

/* item spacer */
.plu-social-box-item-spacer {
	width: 2%;
}

/* images */
.plu-social-box-item .media-content img {
	border-bottom: 1px solid #e8e8e8;
	width: 100%;
}

/* videos */
.plu-social-box-item video {
	width: 100%;
}

/* user image, name/link, post time */
.plu-social-box-item .user-time {
	padding: 1em;
}
.plu-social-box-item .user-time .avatar {
	float: left;
}
.plu-social-box-item .user-time .avatar > img {
	margin-right: 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4x;
}
.plu-social-box-item .user-time .link {
	text-decoration: none;
	color: #212121;
	font-weight: bold;
}
.plu-social-box-item .user-time .name {
	display: block;
	color: #999;
	font-size: 12px;
}

/* post text */
.plu-social-box-item .post-text {
	padding: 0 1em 1em 1em;
	word-wrap: break-word;
}

/* remove 'expand' icon */
.plu-social-box-item .media-content .expand {
	display: none;
}

/* footer */
.plu-social-box-item .plu-social-footer {
	padding: 0.75em 1em;
	color: #fff;
	font-size: 12px;
	clear: both;
}
.plu-social-box-item .plu-social-footer .timestamp {
	text-align: left;
	margin: 0;
	padding: 0;
	display: inline;
}
.plu-social-box-item .plu-social-footer .link-share {
	float: right;
	margin: 0;
	padding: 0;
	display: inline;
}
.plu-social-box-item .plu-social-footer a {
	color: #fff;
	text-decoration: none;
}
.plu-social-box-item .plu-social-footer a:hover {
	text-decoration: underline;
}
.plu-social-box-item .plu-social-footer.twitter {
	background: #00aced url(../images/twitter.png) no-repeat center center;
}
.plu-social-box-item .plu-social-footer.facebook {
	background: #3b5998 url(../images/facebook.png) no-repeat center center;
}
.plu-social-box-item .plu-social-footer.instagram {
	background: #517fa4 url(../images/instagram.png) no-repeat center center;
}
.plu-social-box-item .plu-social-footer.youtube {
	background: #CE1312 url(../images/youtube.png) no-repeat center center;
}
.plu-social-box-item .plu-social-footer.vimeo {
	background: #00B6EC url(../images/vimeo.png) no-repeat center center;
}

/* share box */
.plu-social-box-item .share-box {
    background: #333;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}
.plu-social-box-item .share-box .share {
	padding: 2em 0;
	width: 28%;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #444;
    margin-right: -6px;
}
.plu-social-box-item .share-box .share:hover {
	text-decoration: none;
}
.plu-social-box-item .share-box .share.facebook:hover {
	background: #3b5998;
}
.plu-social-box-item .share-box .share.twitter:hover {
	background: #00aced;
}
.plu-social-box-item .share-box .share.email:hover {
	background: #27ae60;
}
.plu-social-box-item .share-box .share > span {
	display: block;
}
.plu-social-box-item .share-box .close-share {
	position: absolute;
	font-size: 14px;
	top: 0;
	right: 0;
	width: 25px;
	text-align: center;
	padding: 5px 0;
	color: #ccc;
}
.plu-social-box-item .share-box .close-share:hover {
	text-decoration: none;
	color: #fff;
	background: #555;
}



/* 128 site embed */
[data-id="social-128-embed"] .plu-social-box-item {
        width: 48%;
}

/* 128 site embed */
[data-id="social-128-embed"] .plu-social-box-item {
        width: 23.34%;
}

/* styling additions for embed on 128 site
 * they don't have a regular id or class name
 * ability, so I have to target the data attribute */

[data-id="social-128-embed"] .plu-social-box-item .user-time .avatar > img {
       height: 33px !important;
       background: #555;
}

/* styling additions for embed on 128 site
 * they don't have a regular id or class name
 * ability, so I have to target the data attribute */

[data-id="social-128-embed"] .plu-social-box-item .user-time .avatar > img {
       height: 33px !important;
}


/*-------------------------------
 * responsive styling -----------
 * -----------------------------*/

.mobile-only {
	display: none !important;
}
.non-mobile {
	display: block !important;
}
 
@media screen and (min-width: 320px) {
	/* 1 column for small screens */
	.plu-social-box-item {
		width: 100%;
	}
	.mobile-only {
		display: block !important;
	}
	.non-mobile {
		display: none !important;
	}  
}
@media only screen and (min-width: 48em) {
	/* 2 columns for medium screens */
	.plu-social-box-item {
		width: 49%;
		/* width: 31.5%;  this is for 3 columns */
	}
}
@media only screen and (min-width: 71.563em) {
	/* 3 columns for larger and up screens */
	.plu-social-box-item {
		/*width: 31.5%;*/
		width: 23.501%;  /*this is for 4 columns */
	}
}