.tray{
  position:relative;
  display:inline-block;
  margin:0;
  padding:10px;
  background-color: #fefefe;
  white-space: nowrap;
  width:100%;
  min-height:125px;
  box-sizing:border-box;
  overflow-x:auto;
}
.tray-item{
  display: inline-block;
  width: 85px;
  height: 85px;
  border-radius: 85px;
  position: relative;
  overflow:hidden;
  box-sizing:border-box;
  padding: 2.5px;
  margin:10px;
}
.tray-item:before{
  content: '';
  display: inline-block;
  position: absolute;
  box-sizing:border-box;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: radial-gradient(ellipse at bottom left, rgb(255,220,0) 0%, rgb(255,0,127) 70%, rgb(150,40,255) 100%);
}
.tray-item.seen:before{
  background: #d0d0d0;
}
.tray-item img{
  position:relative;
  width: 80px;
  border-radius:80px;
  border: 2.5px solid #fefefe;
  box-sizing:border-box;
}
.bounce {
   animation-duration: 1.25s;
   animation-name: bounce-story;
   animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
@keyframes bounce-story {
        0%   { transform: scale(1,1) }
        50%  { transform: scale(.90,.90) }
        100% { transform: scale(1,1) }
}

/****** STORY MODAL STYLES *******/
.story-modal{
    z-index: 10001;
    background: rgba(0, 0, 0, 0.85);
}
.story-modal .modal-dialog{
    max-width: 100%;
}
.story-modal .modal-content{
    background-color: transparent;
    box-shadow: none;
}
.story-modal .modal-title{
    color: white;
}

.story-modal .modal-body{
    color: white;
}

.fade-scale {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
}

.fade-scale.show {
  opacity: 1;
  transform: scale(1);
}