/* GRID */

.grid { max-width: 940px; width: 100%; margin: 0 auto; }

.four {
    width: 32.26%;
}

/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

/* GENERAL STYLES FOR BOX AND OVERLAY */

.box-hover {
    display: block;
    width: 100%;
    height: 290px;
    overflow: hidden;
    background-color: white;
    text-align: center;
    position: relative;
    padding: 15px;
}
.overlay{
    width: 100%;
    height:100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/* SLIDE IN */

.slide-in .overlay {
    background-color: #f4b4cadb;
    line-height: 1em;
    color: #fff;
    transform: translateX(-100%);
    -webkit-transition: transform 0.5s ease-out;
    -o-transition: transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    margin-top: 16px;
    font-size: 0.8rem;
    text-align: left;
    /* z-index: 500; */
}

.instafeed {
    margin-top: 1rem;

}
.instafeed, .box-hover {
   font-size:0.8rem;

}
.instafeed .slide-in .overlay a{
    width: 290px !important;

}
.slide-in .box-hover:hover .overlay{
    transform: translateX(0);
}
.slide-in .box-hover:hover .overlay a{
    color: #000;
    text-decoration: none;
    font-size: 0.85em;
    padding: 15px;
}

/* SLIDE UP */

.slide-up .overlay{
    background-color: #3dcbe8;
    line-height: 200px;
    color: #fff;
    transform: translateY(100%);
    -webkit-transition: transform 0.5s ease-out;
    -o-transition: transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}

.slide-up .box-hover:hover .overlay{
    transform: translateY(0);
}

/* SLIDE DOWN DELAY */

.slide-down-delay .overlay{
    background-color: #ee6f8c;
    line-height: 200px;
    color: #fff;
    transform: translateY(-100%);
    -webkit-transition: transform 0.5s ease-out;
    -o-transition: transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}

.slide-down-delay .box-hover:hover .overlay{
    transform: translateY(0);
}

.slide-down-delay .overlay i{
    transform: translateY(-80%);
    opacity: 0;
    -webkit-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
    -o-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
    transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
}

.slide-down-delay .box-hover:hover .overlay i{
    transform: translateY(0);
    opacity: 1;
}

/* ROTATE */

.rotate .overlay{
    background-color: #6d94bb;
    line-height: 200px;
    color: #fff;
    transform-origin: 0 0;
    transform: rotate(90deg);
    -webkit-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

.rotate .box-hover:hover .overlay{
    transform: rotate(0deg);
}

/* SCALE */

.scale .overlay{
    background-color: #efcb5e;
    line-height: 200px;
    color: #fff;
    transform: translateX(210%) scale(3);
    -webkit-transition: transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
}

.scale .box-hover:hover .overlay{
    transform: translateX(0) scale(1);
}

/* FLIP */

.flip .overlay{
    background-color: #009688;
    line-height: 200px;
    color: #fff;
    opacity: 0;
    transform: rotateY(180deg);
    -webkit-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
    -o-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
    transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
}

.flip .box-hover:hover .overlay{
    opacity: 1;
    transform: rotateY(0deg);
}

/* SKEW */

.skew .overlay{
    background-color: #f44336;
    line-height: 200px;
    color: #fff;
    opacity: 0;
    transform: skewX(-10deg);
    -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.skew .box-hover:hover .overlay{
    transform: skewX(0deg);
    opacity: 1;
}

/* CORNER */

.corner-bottom .overlay{
    background-color: #9c27b0;
    line-height: 200px;
    color: #fff;
    transform: translate(100%, 100%);
    -webkit-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}

.corner-bottom .box-hover:hover .overlay{
    transform: translate(0, 0);
}

/* CORNER */

.corner-top .overlay{
    background-color: #ff5722;
    line-height: 200px;
    color: #fff;
    transform: translate(-100%, -100%);
    -webkit-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}

.corner-top .box-hover:hover .overlay{
    transform: translate(0, 0);
}
.instafeed .fitimg a {
    height: 280px !important;
    width: 280px !important;
    display: block;
}
.instafeed span.user-img,.instafeed .fitimg .user-username {
    display: none;
}
.instafeed span.user-img {
    /* display: flex; */
    border-radius: 50%;
    position: absolute;
    height: 32px;
    width: 32px;
    top: 0px;
    background-color: white;
    left: 3px;
    /* border-color: rgba(0, 0, 0, 0.3); */
    /* border-style: solid; */
    /* border-width: 1px; */
    padding: 0;
    z-index: 50;
    /* opacity: 0.5; */
}
.instafeed .fitimg .user-img img {
    height: 32px;
    width: 32px;
    border-radius: 50%;
}
.instafeed .fitimg .user-username {
    /* display: inline-block; */
    position: absolute;
    z-index: 49;
    /* opacity: 0.5; */
    left: 0;
    font-size: 12px;
    /* width: 100%; */
    padding-left: 40px;
    text-align: left;
    /* background-color: #ffffff21; */
    top: -7px;
    height: 23px;
    width: 100%;
}
.instafeed .fitimg .user-img a {
    height: 32px !important;
    width: 32px !important;
    display: inline-block;
}
.instafeed .fitimg .user-username a {
    /* padding-right: 35px; */
    /* display: inline-block; */
    /* text-align: right; */
    width: auto;
    height: 22px;
    /* background-color: #ffffff73; */
    /* padding-left: 44px; */
    /* margin-top: 7px; */
}