#buddypress .photo, .photo {
  width:350px;
  max-width:100%;
  height:auto;
  position:relative;
  z-index:1;
}
#buddypress .photo .photo-link, .photo .photo-link {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-align:center;
  white-space:nowrap;
}
#buddypress .photo .photo-link:before, .photo .photo-link:before {
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
  margin-right:-0.25em;
}
#buddypress .photo .photo-link .photo-title-wrapper, .photo .photo-link .photo-title-wrapper {
  display:inline-block;
  vertical-align:middle;
  width:100%;
  text-align:center;
  white-space:normal;
  padding:0 20px;
}
#buddypress .photo .photo-link .photo-title, .photo .photo-link .photo-title {
  font-size:26px;
  line-height:30px;
  font-weight:900;
  text-align:center;
  color:#ffffff;
  position:relative;
  padding:20px 10px;
}
#buddypress .photo .photo-link .photo-title:before, .photo .photo-link .photo-title:before {
  content:'';
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  height:calc(100% - 40px);
  right:100%;
  opacity:0;
  -webkit-transform:translate3d(0,10px,0);
  transform:translate3d(0,10px,0);
  -webkit-transition:right 0s ease-out 0.3s, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transition:right 0s ease-out 0.3s, opacity 0.3s ease-out, transform 0.3s ease-out;
  background-color:#f50057;
  mix-blend-mode:multiply;
  z-index:1;
}
#buddypress .photo .photo-link .photo-title .text, .photo .photo-link .photo-title .text {
  position:relative;
  opacity:0;
  top:20px;
  z-index:2;
  -webkit-transition:top 0.3s ease-out, opacity 0.3s ease-out;
  transition:top 0.3s ease-out, opacity 0.3s ease-out;
}
#buddypress .photo .photo-figure, .photo .photo-figure {
  display:block;
  width:100%;
  height:auto;
  -webkit-transition:opacity 0.3s ease-out;
  transition:opacity 0.3s ease-out;
}
#buddypress .photo .photo-figure:after, .photo .photo-figure:after {
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:rgba(4,4,24,0.3);
  opacity:0;
  -webkit-transition:opacity 0.3s ease-out;
  transition:opacity 0.3s ease-out;
}
#buddypress .photo .photo-figure img, .photo .photo-figure img { width:100%; }
#buddypress .photo .photo-footer, .photo .photo-footer {
  position:absolute;
  left:0;
  bottom:4px;
  padding:0 0 6px 20px;
  opacity:0;
  -webkit-transform:translate3d(0,10px,0);
  transform:translate3d(0,10px,0);
  -webkit-transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transition:opacity 0.3s ease-out, transform 0.3s ease-out;
  -webkit-transition-delay:0.1s;
  transition-delay:0.1s;
}
#buddypress .photo .photo-footer .photo-author, .photo .photo-footer .photo-author {
  color:#ffffff;
  display:block;
  font-size:16px;
  line-height:30px;
  font-weight:500;
  margin-bottom:-4px;
  -webkit-transition:color 0.3s ease-out;
  transition:color 0.3s ease-out;
}
#buddypress .photo .photo-footer .photo-author:hover, .photo .photo-footer .photo-author:hover {
  color:#f50057;
  -webkit-transition:color 0.2s ease-out;
  transition:color 0.2s ease-out;
}
#buddypress .photo .photo-footer .photo-author:active, .photo .photo-footer .photo-author:active {
  color:#ffffff;
  -webkit-transition:color 0.1s ease-out;
  transition:color 0.1s ease-out;
}
#buddypress .photo .photo-footer .extra-count, .photo .photo-footer .extra-count {
  color:#ffffff;
  margin-right:20px;
  position:relative;
  -webkit-transition:top 0.3s ease-out;
  transition:top 0.3s ease-out;
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
}
#buddypress .photo .photo-footer .extra-count .icon *, .photo .photo-footer .extra-count .icon * { fill:#ffffff; }
#buddypress .photo .photo-footer .photo-like-count, .photo .photo-footer .photo-like-count { top:10px; }
#buddypress .photo .photo-footer .photo-view-count, .photo .photo-footer .photo-view-count { top:20px; }
#buddypress .photo .photo-footer .photo-comment-count, .photo .photo-footer .photo-comment-count { top:30px; }
#buddypress .photo a.edit-button, #buddypress .photo button.like-button, .photo a.edit-button, .photo button.like-button {
  position:absolute;
  top:10px;
  right:10px;
  display:block;
  width:70px;
  height:70px;
  padding:0;
  z-index:3;
  background-color:transparent;
  color:#040418;
  border:none;
  opacity:0;
  transform:translate3d(0,10px,0);
}
#buddypress .photo:active .photo-title:before, #buddypress .photo:hover .photo-title:before, .photo:active .photo-title:before, .photo:hover .photo-title:before {
  right:0;
  opacity:1;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  -webkit-transition:right 0.5s ease-out 0.1s, opacity 0s ease-out, -webkit-transform 0s ease-out;
  transition:right 0.5s ease-out 0.1s, opacity 0s ease-out, transform 0s ease-out;
}
#buddypress .photo:active .photo-title .text, #buddypress .photo:hover .photo-title .text, .photo:active .photo-title .text, .photo:hover .photo-title .text {
  opacity:1;
  top:0;
}
#buddypress .photo:active .photo-figure:after, #buddypress .photo:hover .photo-figure:after, .photo:active .photo-figure:after, .photo:hover .photo-figure:after { opacity:1; }
#buddypress .photo:active .photo-footer, #buddypress .photo:hover .photo-footer, .photo:active .photo-footer, .photo:hover .photo-footer {
  opacity:1;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}
#buddypress .photo:active .photo-footer .extra-count, #buddypress .photo:hover .photo-footer .extra-count, .photo:active .photo-footer .extra-count, .photo:hover .photo-footer .extra-count { top:0; }
#buddypress .photo:hover .edit-button, .photo:hover .edit-button {
  opacity:1;
  transform:translate3d(0,0,0);
}
#buddypress .photo:hover .like-button, #buddypress .photo.photo-liked .like-button, .photo:hover .like-button, .photo.photo-liked .like-button {
  opacity:1;
  transform:translate3d(0,0,0);
}
#buddypress .photo .icon-award, .photo .icon-award {
  display:block;
  width:150px;
  height:100px;
  position:absolute;
  top:-5px;
  left:-6px;
  opacity:0;
  transition:0.2s opacity ease-out;
}
#buddypress .photo .extra-responsive-image-loaded ~ .icon-award, .photo .extra-responsive-image-loaded ~ .icon-award { opacity:1; }
@media only screen and (max-width: 1200px) {
  #buddypress .photo .photo-link .photo-title .text, .photo .photo-link .photo-title .text {
    opacity:1;
    top:0;
  }
  #buddypress .photo .photo-link .photo-figure:after, .photo .photo-link .photo-figure:after { opacity:1; }
  #buddypress .photo .photo-footer, .photo .photo-footer {
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }
  #buddypress .photo .photo-footer .extra-count, .photo .photo-footer .extra-count { top:0; }
  #buddypress .photo a.edit-button, .photo a.edit-button {
    opacity:1;
    transform:translate3d(0,0,0);
  }
  #buddypress .photo button.like-button, .photo button.like-button {
    opacity:1;
    transform:translate3d(0,0,0);
  }
}
@media only screen and (max-width: 470px) {
  #buddypress .photo .photo-link .photo-title, .photo .photo-link .photo-title {
    font-size:22px;
    line-height:25px;
  }
}