/*#stockTable table th, #stockTable table td {
        text-align: right;
        padding: 2px 12px;
    }*/

    #stockTable table td {
        text-align: right;
    }

#stockTable .loading td {
    text-align: left;
}
table {
    margin: auto;
    border-collapse: collapse;
    display: block;
    /*width: fit-content;*/
    /*max-width: 100%;*/
    /*box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);*/
}

#stockTicker {
    overflow: hidden;
    width: 450px;
    height: 24px;
    border: 1px solid #999;
}

    #stockTicker .inner {
        width: 9999px;
    }

    #stockTicker ul {
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #stockTicker li {
        display: inline-block;
        margin-right: 8px;
    }

    /*<li data-symbol="{Symbol}"><span class="symbol">{Symbol}</span><span class="price">{Price}</span><span class="change">{PercentChange}</span></li>*/
    #stockTicker .symbol {
        font-weight: bold;
    }

    #stockTicker .change {
        font-style: italic;
    }

.decrease {
    -webkit-animation: decrease_color_change 2.5s 2 alternate;
    -moz-animation: decrease_color_change 2.5s 2 alternate;
    -ms-animation: decrease_color_change 2.5s 2 alternate;
    -o-animation: decrease_color_change 2.5s 2 alternate;
    animation: decrease_color_change 2.5s 2 alternate;
}

@-webkit-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@-moz-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@-ms-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@-o-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}


.increase {
    -webkit-animation: increase_color_change 2.5s 2 alternate;
    -moz-animation: increase_color_change 2.5s 2 alternate;
    -ms-animation: increase_color_change 2.5s 2 alternate;
    -o-animation: increase_color_change 2.5s 2 alternate;
    animation: increase_color_change 2.5s 2 alternate;
}

@-webkit-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@-moz-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@-ms-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@-o-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}
.high {
    background: rgb(154,240,117);
    transition: background 1s;
}

/*body{
        background: #ddd;
    }*/

<----Waterfall---- >
#demo {
    margin: 10px;
    position: relative;
}

.box {
    float: left;
    /*padding: 10px;*/
    /*border: 1px solid #ccc;*/
    /*background: #f7f7f7;*/
    box-shadow: 0 0 8px #ccc;
    margin: 10px;
}

    .box:hover {
        box-shadow: 0 0 10px #999;
    }

    .box img {
        width: 300px;
    }

@media only screen and (max-width: 1500px) {
}
.hover-animation {
    width: 430px;
    height: 430px;
    display: inline-block;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    /*border: 1px solid #100;*/
    position: relative;
    overflow: hidden;
}


    .hover-animation:before,
    .hover-animation:after {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        content: '';
        position: absolute;
        background: inherit;
        transition: .3s;
    }

    .hover-animation:after {
        padding: 50px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
        text-align: center;
        color: #fff;
        background: #fab915;
        transform: translateY(100%);
        content: attr(data-text);
        line-height: 1.4;
    }

    .hover-animation:hover:before {
        transform: translateY(-50%);
    }

    .hover-animation:hover:after {
        transform: translateY(0);
    }

@media only screen and (max-width: 3000px)and (min-width: 1479px) {
    .hover-animation {
        width: 415px;
        height: 430px;
    }

    .box {
        margin: 17px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 16px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 1479px)and (min-width: 1200px) {
    .hover-animation {
        width: 520px;
        height: 520px;
    }

    .box {
        margin: 17px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 16px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 1200px) {
    .hover-animation {
        width: 700px;
        height: 650px;
    }

    .box {
        margin-left: 110px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 22px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 990px) {
    .hover-animation {
        width: 690px;
        height: 650px;
    }

    .box {
        margin-left: -6px;
    }

}

@media only screen and (max-width: 767px) {
    .hover-animation {
        width: 510px;
        height: 500px;
    }

    .box {
        margin-left: -5px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 18px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 574px) {
    .hover-animation {
        width: 544px;
        height: 500px;
    }

    .box {
        margin-left: -7px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 18px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 563px) {
    .hover-animation {
        width: 400px;
        height: 400px;
    }

    .box {
        margin-left: 60px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 15px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 563px) {
    .hover-animation {
        width: 400px;
        height: 400px;
    }

    .box {
        margin-left: 40px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 15px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 479px) {
    .hover-animation {
        width: 400px;
        height: 400px;
    }

    .box {
        margin-left: 20px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 15px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 414px) {
    .hover-animation {
        width: 380px;
        height: 400px;
    }

    .box {
        margin-left: -5px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 375px) {
    .hover-animation {
        width: 341px;
        height: 400px;
    }

    .box {
        margin-left: -5px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 360px) {
    .hover-animation {
        width: 326px;
        height: 400px;
    }

    .box {
        margin-left: -5px;
    }

    .hover-animation:after {
        color: #fff;
        font-size: 12px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 320px) {
    .hover-animation {
        width: 286px;
        height: 400px;
    }

    .box {
        margin-left: -5px;
    }

    .hover-animation:after {
        font-size: 12px;
    }
}