/*  GRID  */
.grid-container {
	margin-bottom: 80px;
	vertical-align: top;
    margin-left: 15px;
    margin-right: 15px;
}
.grid-container.no-grid {
	text-align: center;
}

.grid-container.no-grid .pin{
	float: none !important;
}

.grid-loading {
	height: 150px;
	text-align: center;
	position: relative;
}
.grid-loading .fa {
	font-size: 40px;
	display: block;
	color: #888;
	position: absolute;
	left: 50%;
	top: 0;
}

.grid-no-results {
	text-align: center;
	margin: 40px;
	font-size: 18px;
	color: #999;
}

.grid-container .pin {
	width: 25%;
	display: inline-block;
	float: left;
	padding: 12px;
	text-align: left;
}

.grid-container .pin.__x2 {
	width: 50%;
}

div.pin {
	display: inline-block;
}

div.pin > div.wrapper > div.inner {
	width: 100%;
	display: block;
	position: relative;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: #fff;
	padding: 0px;
	webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
}
    div.pin.__clean {
        padding: 9px;
        margin-bottom: 15px;
    }
    div.pin.__clean > div.wrapper {
        padding: 8px;
        /* background-color: rgba(0,0,0,0.02); */
    }
    div.pin.__clean > div.wrapper  > div.inner {
        box-shadow: none;
        background-color: transparent;
    }
    div.pin.__clean > div.wrapper > div.inner > div.cotton > a > img.image {
        border-radius: 6px !important;
    }

div.pin.__clean > div.wrapper > div.inner > div.metadata { padding: 10px 15px; font-weight: 400; color: #82919b; position: relative; }
div.pin.__clean > div.wrapper > div.inner > div.metadata .meta-user { font-size: 14px; display: block; margin-bottom: 4px; color: #6d757a; }
div.pin.__clean > div.wrapper > div.inner > div.metadata .meta-board { font-size: 12px; display: block; color: #82919b; }
div.pin.__clean > div.wrapper > div.inner > div.metadata .meta-board-link { color: #19AFF3; }
div.pin.__clean > div.wrapper > div.inner > div.metadata .meta-tags { display: none; font-weight: 400; margin-top: 10px; margin-left: -2px;}
div.pin.__clean > div.wrapper > div.inner > div.metadata .meta-tags .label { font-weight: 400; background-color: #f0f0f0; padding: 5px 11px; text-transform: capitalize; color: #333; border-radius: 40px; }
div.pin.__clean:hover > div.wrapper > div.inner > div.metadata .meta-tags .label { background-color: #19AFF3; color: #FFF; }

.pin .tooltip-inner {
    width: 80px;
}

.pin.faved .favedIcon {
    display: inline-block;
}
    div.pin:hover > div.wrapper {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }

div.pin > div.wrapper > div.inner > div.cotton {
	position: relative;
}
div.pin > div.wrapper > div.inner > div.cotton > a > img.image {
	width: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

div.pin > div.wrapper > div.inner > div.cotton > a > img.image:hover {
	cursor:zoom-in;
}

.btn-more-dropdown {
    display: inline-block;
    position: absolute;
    top: 14px;
    right: 13px;
    height: 36px;
    width: 36px;
}
div.pin .btn-more {
    height: 36px;
    width: 36px;
    padding: 0 2px;
    cursor: pointer;
    opacity: 1;
    background-color: rgba(255,255,255,.85);
    border-radius: 18px;
    border: 0;
    font-size: 19px;
}


div.pin .pin-options-dropdown {
    top: 8px;
    left: auto;
    right: 0 !important;
    min-width: 140px;
    width: 140px;
}
div.pin .pin-options-dropdown >li>a {
    font-size: 12px !important;
    padding: 10px 12px 12px;
}
div.pin .pin-options-dropdown >li > a > i {
    margin-right: 5px;
}

.grid-item {
	margin-bottom: 19px;
}
.pin .delete {
	position: absolute;
	right: 15px;
	top: 13px;
	padding: 5px 10px;
	background-color: #FFF;
	color: #f00;
	border-radius: 50%;
	box-shadow: 1px 1px 0px rgba(0,0,0,.1);
}
.pin .delete:hover {
	box-shadow: 1px 1px 0px rgba(0,0,0,.3);
	background-color: #f00;
	color: #fff;
}

div.pin > div.wrapper > div.inner > div.user {
	padding: 8px 8px 8px 8px;
	position: relative;
}

div.pin > div.wrapper > div.inner > div.interaction {
	padding: 10px 12px;
    padding-top: 0;
	/* border-top: 1px solid rgba(0,0,0,.05); */
}
div.pin > div.wrapper > div.inner > div.user .board-link {
	text-decoration: none;
	display: block;
	padding: 4px 8px;
}
div.pin > div.wrapper > div.inner > div.user span.board  {
	font-style: italic;
	font-size: 10px;
	margin-top: 1px;
	display: block;
	color: #999;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
div.pin > div.wrapper > div.inner > div.user .board-link:hover {
	background-color: #f0f0f0;
	border-radius: 4px;
}
div.pin > div.wrapper > div.inner > div.user .name {
	margin-bottom: 3px;
	display: block;
	font-size: 12px;
    padding: 3px 5px 0px;
    color: #6c757c;
}


div.pin > div.wrapper > div.inner > div.layout {
	padding: 8px 8px 8px 8px;
	position: relative;
	border-top: 1px solid rgba(0,0,0,.07);
}
div.pin > div.wrapper > div.inner > div.layout .label {
	font-size: 11px;
	color: #888;
	font-weight: 300;
}


div.pin > div.wrapper > div.inner > div.cotton >  div.overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
div.pin:hover > div.wrapper > div.inner > div.cotton > div.overlay {
	display: block;
}

div.pin:hover > div.wrapper > div.inner > div.cotton > a > img.image {
    /*filter: blur(3px);*/
}


div.pin > div.wrapper > div.inner > div.cotton >  div.overlay .overlay-link {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.45);
	/*cursor: zoom-in;*/
	display: block;
	z-index: 99;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
div.pin > div.wrapper > div.inner > div.cotton >  div.overlay .overlay-edit-btn {
    width: 100px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px 15px 0;
    color: #fff;
    font-size: 20px;
    background-repeat: no-repeat;
    background-image: url(../icon-edit-pencil.html);
    background-size: 34px auto;
    background-position: center 1px;
    z-index: 102;
    text-decoration: none;
}
div.pin > div.wrapper > div.inner > div.cotton >  div.overlay .overlay-edit-btn .icon-edit {
    background-repeat: no-repeat;
    background-image: url(../icon-edit-pencil.html);
    background-size: 34px auto;
    background-position: center;
    width: 34px;
    height: 34px;
}


div.pin > div.wrapper > div.inner > div.cotton >  div.overlay .overlay-buttons {
	position: absolute;
	width: 100%;
	padding: 10px;
	top: 0px;
	left: 0px;
	z-index: 105;
}

div.pin.__social > div.wrapper > div.inner > div.cotton >  div.overlay {
    display: none !important;
}

div.pin.__social > div.wrapper > div.inner > div.cotton >  div.social-overlay {
    display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.pin.__social:hover > div.wrapper > div.inner .favIcon {
    display: block !important;
}

.list-reactions {
    font-size: 11px;
}

.list-reactions {
	display: inline-block;
	margin-left: 5px;
	margin-right: 2px;
	font-size: 12px;
	color: #444;
	color: #9aa6af;
}

.list-reactions._lg  {
    display: inline-block;
	font-size: 15px;
}

.list-reactions._lg li {
    margin-right: 15px;
}


.actions {
    position: absolute;
    right: 12px;
    bottom: 6px;
}
.actions .action-icon {
    color: #999;
    font-size: 15px;
    cursor: pointer;
    margin-left: 10px;
}

.favIcon {
    position: absolute;
    top: 20px;
    right: 20px;
    display: none;
    width: 37px;
    height: 37px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    /* opacity: .7; */
}

.favIcon > i { position: relative; top: 9px; left: 9px; font-size: 19px; }
.favIcon:hover {color: #f77f88; cursor: pointer; }
.favIcon.faved {
    color: #ED4956;
    display: block !important;
    opacity: 1;

}

.favIcon.loading i,
.btn-fav.loading i {
    -webkit-animation: fa-spin 1.5s infinite linear;
    animation: fa-spin 1.5s infinite linear;
}
.favIcon.loading i:before,
.btn-fav.loading i:before {
    content: '\f1ce' !important;
}


.pin .avatar {
    position: absolute;
    top: -19px;
    right: 16px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    border: 2px solid #fff;
    z-index: 99;
}

.pin .share {
	display: inline-block;
	font-size: 10px;
    top: -1px;
    position: relative;
}

.pin .date {
	font-style: italic;
	/*float: right;*/
	font-size: 9px;
	margin-top: -1px;
	display: block;
	color: #999;
    font-weight: 400;
}





/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) and (max-width : 479px) {
        .grid-container .pin {
        	width: 50%;
            padding: 5px;
        }
        .grid-container {
            margin-left: 0px;
            margin-right: 0px;
        }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
        .grid-container .pin {
        	width: 50%;
        }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .grid-container .pin {
        	width: 33.3333%;
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .grid-container .pin {
        	width: 25%;
        }
        .grid-container.not-full-width .pin {
        	width: 33%;
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .grid-container .pin {
        	width: 25%;
        }
        .grid-container.not-full-width .pin {
        	width: 33%;
        }
    }


    @media (max-width: 1949px) and (min-width: 1625px) {
        .grid-container .pin {
        	width: 20%;
        }
        .grid-container.not-full-width .pin {
        	width: 25%;
        }
    }