#grid-holder {
    position: relative;
}
.squaregrid{
    width:100%;
    /*display: table;*/
    box-sizing: border-box;  
}
.squaregrid > li {
    float:right;
    vertical-align: top;
    width:120px;
    height:160px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.20);
    border-radius: 2px;
    position: relative;
}
/* the grid*/
.grid{
    width:100%;
    /*display: table;*/
    box-sizing: border-box;
}
.grid > li.member, 
.grid > li.members,
.grid > li.content,
.grid > li.item,
.grid > li.form,
.grid > li.talking,
.grid > li.add,
.grid > li.photo {
    float:left;
    vertical-align: top;
    padding:0px;
    position: relative;
    /*overflow:hidden;*/
    transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
}
.homepage .grid .centeravatar {
    display:none;
}

.homepage .grid .eventholder {
    display:none;
}

.homepage .grid > li .contentinfo .avatar {
    height:60px!important;
    width:60px!important;
}
.homepage .grid > li .contentinfo
.title {
    padding-top:0px;
}

.homepage .grid > li .eventinfo
.title {
    padding-bottom:0px;
}

.homepage .grid > li.content .header {
    background: #fff;
    display: block;
    position: relative;
    max-height:100%!important;
    width:100%;
}

.homepage .small-comments {
    padding:10px 15px 10px 15px;
}
.homepage .grid>li.topic .text {
   margin-top:10px;
}
.homepage .grid>li.post .text {
   margin-top:10px;
}
.homepage .grid>li.post .text table{
   margin-top:18px;
   font-size:13px;
}
.homepage .grid>li.topic img {
    display:none!important;
}
.homepage .grid>li.post img {
    display:none!important;
}
.homepage .grid > li .contentinfo {
    text-align: left;
    padding: 15px 15px 5px 15px;
    font-size: 13px;
    overflow: hidden;
}
.homepage .grid > li .eventinfo {
    text-align: left;
    padding: 15px 15px 0px 15px;
    font-size: 13px;
    overflow: hidden;
    display:table;
    width:100%;
}
.homepage .grid > li .feed-table {
    width:100%;
    display:table;
    border-bottom:1px solid #eee;
    margin-bottom:10px;
    padding-bottom:5px;
}
.homepage .grid > li .feed-event {
    display:block;
}
.homepage .grid > li .event-location {
    display:none;
}
.homepage .grid > li .header img {
    width:100%!important;
} 
.homepage .grid > li .iteminfo{
    text-align:center;
    padding:10px 10px 0px;
    height:65px;
}

.homepage .grid > li .img-block {
    display:none;
}       
.homepage .grid > li.post .img-block {
    display:block;
}

.contentinfo table.grid-table {
    margin-top: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eeee;
}

.homepage .contentinfo td.thumbnail-preview {
    display:block!important;
}

.homepage .contentinfo td.thumbnail-preview img {
    margin-left:0px!important;
}

.contentinfo td.thumbnail-preview {
    display:none;
}

.grid > li.post .img-block {
    display:none;
}

.grid > li.blog .img-block {
    display:none;
}
.grid>li.content .img-block {
    display:none;
}

.event-location {
    display:block;
}
.feed-avatar {
    display:none;
}
.feed-event {
    display:none;
}

.homepage .member-initials {
    font-size:32px!important;
}

.homepage .grid > li .feed-avatar {
    width:15%;
    float:left;
    display:block;
}
.homepage .grid > li .feed-info {
    float:right;
    width:84%;
}
.homepage .grid > li {
    xwidth:100%;
    margin-bottom:15px;
}

.grid > li {
    xwidth:260px;
}

.grid > li.form {
    background-color: #fff;
}

.grid > li.photo_thumb {
    width:165px;
    height:165px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
}
.grid > li.album-cover {
    width:165px;
    height:240px;
    position: relative;
    background-color: #fff;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
    cursor: pointer;
}
.grid > li .album-cover-img {
    width:165px;
    height:165px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.grid > li.album-cover .bottom-gradient {
    position: absolute;
    bottom:0;
}

.grid > li.album-row {
    width:100%;
    height: 224px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background-color: #fff;
}

.grid > li.album-row > div {
    white-space: nowrap;
}

.grid > li.album-row .album-title {
    padding: 20px 10px;
}

.grid > li.album-row .thumb {
    margin-left: 2px;
    width: 160px;
    height: 160px;
    display: inline-block;
}

.grid > li .initiator {
    position: relative;
    text-align:left;
    color:#999;
    font-size:12px;
    text-shadow:1px 1px rgba(255,255,255,0.5);
    padding:0em;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.grid > li > div.holder .photos {
    display:none;
}

.grid > li > div.holder {
    position: relative;
    background-color: #fff;
}
.grid > li a.contents-title{
    font-family: 'Gudea', sans-serif;
    font-size: 1.2em;
    line-height:1.1em;
    color: #333;
    padding:0px;
    margin:0px;
    text-transform: uppercase;
    display:block;
}
.grid > li span.type {
    color:#E81E39;
    font-weight:800;
    margin-right:2px;
    text-transform: uppercase; 
}
.grid > li a.hashtag {
    color:#E81E39;
}
.grid > li .name {
    font-family:'Gudea',sans-serif;
    font-size:1.4em;
    cursor:pointer;
}

.grid > li .header img {
    width: 100%;
    display:block;
}

/* grid item item (hotspot, brand, charity etc) */

.grid > li.item .header {
    background:#fff;
    cursor:pointer;
    width:100%;
    background-size: cover;
    background-position: center center;
}
.grid > li .iteminfo{
    text-align:center;
    padding:25px 10px 0px;
    height:75px;
}
.grid > li .iteminfo .title{
    font-family:'Gudea',sans-serif;
    font-size:16px;
    color:#444;
    font-weight:bold;
    padding-top:5px;
}
.grid > li.item .holder .buttons{
    text-align:center;
    padding:0px 0px 10px 0px;
}
.grid > li.item .header .centeravatar{
    height:50px;
    position:absolute;
    right:0px;
    bottom:135px;
    left:0px;
    text-align:center;
}
.grid > li.item .header .centeravatar .avatar{
    width:60px;
    height:60px;
    margin:0 auto;
    background-color:#fff;
    border:1px solid #f1f1f1;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.grid > li.item .header .author {
    display:block;
    margin-top:10px;
    margin-left:60px;
}
.grid > li.item .header .author h2{
    font-family: 'Gudea', sans-serif;
    font-size: 1em;
    line-height: 1.2em;
    color: #222;
    padding: 0px;
    margin: 0;
    text-transform: uppercase;
}
.grid > li.item .header .author h4{
    font-size:.7em; 
    line-height: 1.3em;
    color:#888;
}
.grid > li.item .about{
    font-size:13px;
    padding:0px 10px;
    display:block;
    clear:both;
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    max-height: 125px;
    /*box-shadow:inset 0px -5px 7px -5px rgba(0,0,0,0.4);*/
}

.grid > li.item .itemcard .avatar{
    float:left;
    width:50px;
    height:50px;
    margin-right:10px;
}

.grid > li.item .img {
    background-position: center center;
    height:100%;
    position: relative;
}

.grid > li.item .info {
    position: absolute;
    overflow: hidden;
    bottom:0px;
    width:100%;
    box-sizing:border-box;
    height:55px;
    line-height: 20px;
}
.grid > li.content .location,
.grid > li.item .location {
    color: #777;
    font-weight:400;
    font-size: 13px;
}
.grid > li .buttons {
    padding:5px;
    text-align: center;
}
.grid > li .upcomming-birthday{
    padding:10px 0px;
    border-top:1px solid #eee;
    line-height:1em;
    height:50px;
    clear:both;
}
.grid > li .upcomming-birthday h2{
    padding:5px;
    font-size: 16px;
}
.grid > li .upcomming-birthday .avatar{
    width:50px;
    height:50px;
    margin-right:10px;
    float:left;
}
/* event member item */

.grid > li .categories {
    float:right;
}
.grid > li .categories li {
    display:inline-block;
    padding:10px 0px 0px 10px;
    color:#333;
}
.grid > li.member.activity .avatars .avatar{
    width:40px;
    height:40px;
}
.grid > li.member .ribbon-wrapper {
    width: 85px;
    height: 88px;
    font-size:10px;
    overflow: hidden;
    position: absolute;
    top:-1px;
    right:1px;
    z-index: 3;
}
.grid > li.member{

}
.grid > li.member.activity{
    width:260px;
}
.grid > li.member.activity .avatar{
    /*width:260px;*/
    height:260px;
}
.grid > li.member .avatar{
    width:100%;
    height:204px;
    position:relative;
}

.grid > li.member .info{
    display:block;
}
.grid > li.member .title{
    font-family:'Gudea',sans-serif;
    font-size:16px;
    color:#444;
    font-weight:bold;
    text-align:center;
    padding:5px 0px;
    height:120px;
}
.grid > li.member .info h3{
    font-size:12px;
    font-weight:normal;
    max-height:34px;
    overflow:hidden;
    line-height:16px;
}
.grid > li.member .connectionsnr{
    position:absolute;
    left:0;
    bottom:0;
    padding:10px;
    color:#ddd;
    font-size:.7em;
}
.grid > li.member .bottom-gradient{
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
}
.grid > li.member .buttons{
    position:absolute;
    color:#333;
    left:0px;
    right:0px;
    bottom:0px;
    padding:10px 0px;
    text-align:center;
}
.grid > li.member h2 {
    color:#444;
    font-size:1em;
    line-height:1em;
}
.grid > li.member h4 {
    color:#4f9fcf;
    font-size:.7em;
    line-height:1.2em;
}
.grid > li.member h3 {
    color:#444;
    font-size:.8em;
    padding-top:5px;
    line-height:1em;
}

/* new friends grid */

.friends-grid > li.member .info{
    display:block;
}
.friends-grid > li.member .title{
    font-family:'Gudea',sans-serif;
    font-size:16px;
    color:#444;
    font-weight:bold;
    text-align:center;
    padding:5px 0px;
    height:130px;
}
.friends-grid > li.member .info h3{
    font-size:12px;
    font-weight:normal;
    max-height:34px;
    overflow:hidden;
    line-height:16px;
}
.friends-grid > li.member .connectionsnr{
    position:absolute;
    left:0;
    bottom:0;
    padding:10px;
    color:#ddd;
    font-size:.7em;
}
.friends-grid > li.member .bottom-gradient{
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
}
.friends-grid > li.member .buttons{
    position:absolute;
    color:#333;
    left:0px;
    right:0px;
    bottom:0px;
    padding:10px 0px;
    text-align:center;
}
.friends-grid > li.member h2 {
    color:#444;
    font-size:1em;
    line-height:1em;
}
.friends-grid > li.member h4 {
    color:#4f9fcf;
    font-size:.7em;
    line-height:1.2em;
}
.friends-grid > li.member h3 {
    color:#444;
    font-size:.8em;
    padding-top:5px;
    line-height:1em;
}


/* grid album preview */

.grid > li.album .header .avatar{
    width:50px;
    height:50px;
    float:left;
    margin:0;
}
.grid > li.album .author h2{
    font-family: 'Gudea', sans-serif;
    line-height:1.2em;
    font-size:1em; 
}
.grid > li.album .author h4{
    font-family: 'Gudea', sans-serif;
    line-height: 1.3em;
    font-size:.7em; 
}
/* grid content item (blog, post, interview) */
.grid > li.content .header {
    background:#fff;
    display:block;
    max-height: 500px;
    position:relative;
}
.grid > li.content.album .header .centeravatar,
.grid > li.content .header .centeravatar{
    height:60px;
    position:absolute;
    right:0px;
    bottom:-20px;
    left:0px;
    text-align:center;
}
.grid > li.content.album .header .centeravatar .avatar,
.grid > li.content .header .centeravatar .avatar{
    width:60px;
    height:60px;
    margin:0 auto;
    background-color:#fff;
    border:1px solid #f1f1f1;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.grid > li .contentinfo{
    text-align:center;
    padding:25px 10px 0px;
    font-size:13px;
    overflow:hidden;
}
.grid > li .contentinfo .title{
    font-family:'Gudea',sans-serif;
    font-size:16px;
    color:#444;
    font-weight:bold;
    padding-top:10px;
}
.grid > li .eventinfo{
    text-align:center;
    padding:30px 10px 5px;
    max-height:200px;
    font-size:13px;
    overflow:hidden;
}
.grid > li .eventinfo .title{
    font-family:'Gudea',sans-serif;
    font-size:16px;
    color:#444;
    font-weight:bold;
    padding-top:0px;
}
.grid > li .author{
    position:relative;
    left:0px;
    right:0px;
    bottom:30px;
    text-align:center;
}
.grid > li .author .avatar{
    width:40px;
    height:40px;
}
.grid > li .author .title{
    padding:10px;
    font-size:16px;
    margin-left:40px;
    line-height: 1em;
    color: #666;
    text-transform: capitalize;
}

.grid > li.content .header img {
    display:block;   
}

#homepage-grid.grid > li.content .header img.absolute.play-btn {
    display:block;   
}

.homepage .grid > li.content .header img.absolute.play-btn {
    display:block;   
}
.grid > li.content .header img.absolute.play-btn {
    display:none;  
}

.grid > li.content.event .header h2 {
    font-family: 'Gudea', sans-serif;
    font-size: 1em;
    line-height:1.2em;
    color: #222;
    padding: 0px;
    margin: 0;
    text-transform: uppercase;
}

.grid > li.content.event .header h4 {
    font-family: 'Gudea', sans-serif;
    font-size: .8em;
    line-height:1.3em;
    color: #222;
    padding: 0px;
    margin: 0;
    text-transform: uppercase;
}

.grid .header .eventholder{
    position:absolute;
    left:0px;
    right:0px;
    bottom:-10px;
    height:50px;
}
.grid .event-date {
    background-color:#fff;
    border:1px solid #f1f1f1;
    padding:5px;
    width:50px;
    height:50px;
    margin:0 auto;
    box-shadow:none;
    border-radius:0px;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.grid .event-date .month {
    display: block;
    font-size:15px;
    text-align: center;
    color:#444!important;
}
.grid .event-date .day {
    font-family: 'Gudea', sans-serif;
    display: block;
    font-size:26px;
    font-weight:bold;
    line-height:24px;
    color:#E81E39;
    text-align: center;
}
.grid li.add img{
    width:100%;
}
.holder {
    position: relative;
    background-color: #fff;
    padding-bottom:8px;
}
.holder .location {
    color: #4f9fcf;
    font-weight: 400;
    font-size: 12px;
}
.holder .upcomming-birthday {
    padding: 10px 0px;
    border-top: 1px solid #eee;
    line-height: 1em;
    height: 70px;
    clear: both;
}
.holder .upcomming-birthday .avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    float: left;
}

li.talking{
    background:#fff;
    width:100%;
}
li.talking .pearlsHorizontalTitle{
    font-family: 'Gudea', sans-serif;
    color: #555;
    margin: 0px;
    display: inline-block;
    padding: 15px 0 5px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
li.talking .comments a.pearlsHorizontalTitle{
    font-size:12px;
    padding:10px 0px 0px;
}
li.talking .comments a.pearlsHorizontalTitle strong,
li.talking a strong{
    color:#4E6B86;
}
li.talking .ptext{
    overflow:hidden;
    padding-top:0px;
}
.grid > li.content .img{
    background-color:#fff;
    width:80px;
    height:80px;
    float: left;
    border:3px solid #fff;
    cursor:pointer;
    margin:0px 10px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
    position: relative;
    z-index: 10;
}
.grid > li.content .info {
    height:35px;
    padding:0px;
    line-height: 25px;
}
.grid > li.content .date{
    font-size:11px;
    color:#999;
    text-shadow:none;
}
.grid > li.no-cover .author {
    margin-top:0;
}

.nothing-found {
    background-color: #fff;
    padding:.4em 1em;
    width:353px;
    text-align: center;
    font-size: 12px;
    color:#aaa;
}

/* end grid content items */

.grid > li.photogrid .name {
    position:absolute;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
    font-size: 1em;
    font-weight:bold;
}

/* end grid photos */

.grid-filters .extra-filters{
    position:absolute;
    top:10px;
    right:10px;

}
.grid-filters .extra-filters > a{
    width:auto;
    display:inline-block;
    padding:3px 8px;
    border-radius:3px;
    font-size:11px;
    text-align:center;
    color:#333;
    background:rgba(0,0,0,.1);
    border:1px solid #ccc;
}
.grid-filters .extra-filters a.active{
    background:#4f9fcf;
    border:1px solid #699;
    color:#fff;
    font-weight:300;
}
.grid-filters{
    width:30%;
    float:left;
    margin:0;
    padding:0;
    font-size: 14px;
    display:block;
}
.grid-filters h4{
    padding:1em 0 .2em 0;
}
.grid-filters input {
    display:block;
    margin:0em auto;
    padding:1em;
    background:#fff;
    color:#444;
    width:100%;
}
.grid-filters select {
    appearance: none;
    border: none;
    box-shadow: none;
    font-size: 13px;
    position: relative;
}
.grid-filters ul li {
    background:#fff;
    display:block;
    width:100%;
    margin:0px;
    padding:1em;
    border-bottom:1px solid #eee;
    border-left:2px solid #eee;
}
.grid-filters ul li:hover {
    border-left:2px solid #4f9fcf;
}
.grid-filters ul li a {
    display:block;
    margin:0em auto;
    padding:0em;
    color:#aaa;
    width:100%;
}
.grid-filters ul li a.active {
    color:#222;
    position: relative;
    font-weight: bold;
}

#select-post-type {
    display:inline-block;
    width:100%;
    box-sizing: border-box;
    border-bottom:1px solid #ddd;
    margin-bottom: -1px;/* prevent double shadows */
}
#select-post-type > li {
    padding:3px 10px 2px 10px;
    border-right: 1px solid rgba(0,0,0,0.1);
    color:#777;
    cursor: pointer;
    display: inline-block;
    text-align:center;
    font-size: 18px;
    line-height: 30px;
}
#select-post-type > li:last-of-type {
    border-right: none;
}
#select-post-type > li.active,
#select-post-type > li:hover {
    color:#333;
}

.grid .content .show-count:before {
    font-weight: bold;
    float: right;
    font-size: 13px;
    margin-right: 0;
}

.grid .content-stats {
    padding:10px;
    background-color: #fff;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
    font-size: 12px;
    color:#333;
    text-align: center;
}
.grid .content-stats .number {
    font-weight: bold;
}
@media screen and (max-width: 1100px){
    .grid > li{
        width:229px;
    }
    .grid > li.member{
        width:229px;
    }
    .grid > li.member.activity{
        width:229px;
    }
    .grid > li.member .avatar{
        width:100%;
        height:229px
    }
    .grid > li.member.activity .avatar{
        width:229px;
        height:229px
    }
    .grid > li .header img {
        width: 230px;
        display: block;
    }
}
@media screen and (min-width: 1500px){
    .grid > li{
        width:278px;
    }
    .grid > li .header img{
        width:278px;
    }
    .grid > li.member{
        width:229px;
    }
    .grid > li.member .avatar{
        width:100%;
        height:229px
    }
    .grid > li.member.activity{
        width:278px;
    }
    .grid > li.member.activity .avatar{
        width:278px;
        height:278px
    }
    .grid > li .member{
        xwidth:100%;
    }
    .homepage .grid > li .feed-avatar {
    width:14%;
    float:left;
    display:block;
}
    .homepage .grid > li .feed-info {
    float:right;
    width:85%;
}
.homepage .grid > li .contentinfo .avatar {
    height:80px!important;
    width:80px!important;
}
}