input[type=text], select, textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 14px;
     resize: vertical;
}
 label {
     padding: 10px 0;
     display: inline-block;
}
.story-list{
     width: 100%;
     min-height: 94%;
     background-color: #e7e7e7;
     text-align: center;
     padding: 20px;
     display: block;
}

.hvr-sweep-to-top {
     display: inline;
     flex-direction: column;
     border-radius: 5px;
     padding: 20px;
     margin:20px;
     min-width:20%;
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 1px 1px 5px #000;
     background-color: #eee;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     position: relative;
     -webkit-transition-property: color;
     transition-property: color;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     text-decoration: none;
     cursor: pointer;
}
 .hvr-sweep-to-top:before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #fff;
     -webkit-transform: scaleY(0);
     transform: scaleY(0);
     -webkit-transform-origin: 50% 100%;
     transform-origin: 50% 100%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
}
 .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus{
     transition: .2s;
     box-shadow: 2px 2px 10px #aa5;
}
 .hvr-sweep-to-top:active{
     box-shadow: 0 0 0 #000;
}
 .hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
}

.story-list {  
    pointer-events: none;
    transition: .5s;
}

.story-blurb {
    pointer-events: auto;
}

.story-list:hover {
    background: #bbb;
    transition: .5s;
}    

.story-list:hover .story-blurb {
     background-color: #ccc;
     color:#555;
     transition: .5s;
}

.control-buttons{
     visibility: hidden;
     display: flex;
     width:auto;
}
 .story-blurb:hover .control-buttons{
     transition: 1s;
     visibility: visible;
}
 .canister{
     border-radius: 5px;
     border: #999 dashed 1px;

     background-color: #eee;
     padding: 2% 10%;
}
.story{
     border-radius: 25px;
     background-color: #fff;
     padding:30px;     
}
 .story-title-view{
     background-color: #fff;
     display: flex;
     flex-direction: column;
     border-radius: 20px;
     max-width:50%;
}
.story-row{
     text-align: justify;
}
.story-row p{
     color: #000;
}
 .col-25 {
     float: left;
     width: 10%;
     margin-top: 6px;
     font-size: 18px;
}
 .col-75 {
     float: left;
     width: 75%;
     margin-top: 6px;
}
/* Clear floats after the columns */
 .row:after {
     content: "";
     display: table;
     clear: both;
}
 .button{
     padding: 10px;
}
 .story{
     margin-left: 0%;
}