:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1600px
}

.widget-stock-price {
    background-color: #fff;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.07),0 6px 10px 0 rgba(0,0,0,.05),0 1px 18px 0 rgba(0,0,0,.03);
    margin: 0 0 24px;
    padding: 30px 30px 35px;
    position: relative
}

@media(max-width: 767px) {
    .widget-stock-price {
        margin-bottom:64px
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .widget-stock-price {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: -40px
    }
}

@media(min-width: 1200px) {
    .widget-stock-price {
        margin-top:86px
    }
}

.widget-stock-price h3 {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 0
}

@media(min-width: 992px) {
    .widget-stock-price h3 {
        font-size:28px
    }
}

@media(min-width: 768px)and (max-width:1199px) {
    .widget-stock-price h3 {
        flex:0 1 50%
    }
}

.widget-stock-price h3 em {
    display: block;
    font-size: 30px;
    line-height: 1.3
}

@media(min-width: 768px) {
    .widget-stock-price h3 em {
        font-size:32px
    }
}

@media(min-width: 992px) {
    .widget-stock-price h3 em {
        font-size:44px;
        line-height: 1.2
    }
}

.widget-stock-price-data {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin: 24px 0 0
}

@media(min-width: 768px)and (max-width:1199px) {
    .widget-stock-price-data {
        align-items:flex-end;
        flex: 0 1 50%;
        margin-top: 0
    }
}

@media(min-width: 1200px) {
    .widget-stock-price-data {
        margin-top:32px
    }
}

.widget-stock-price-data a.icon {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 4px;
    padding-right: 20px
}

@media(min-width: 768px)and (max-width:1199px) {
    .widget-stock-price-data a.icon {
        bottom:35px;
        position: absolute
    }
}

.widget-stock-price-price {
    font-size: 28px;
    line-height: 1.3;
    opacity: 0;
    transition: all .1s ease
}

@media(min-width: 992px) {
    .widget-stock-price-price {
        font-size:36px;
        line-height: 1.2
    }
}

.widget-stock-price-trend {
    align-items: center;
    display: inline-flex;
    font-size: 24px;
    line-height: 1.4;
    opacity: 0;
    transition: all .1s ease
}

.widget-stock-price-trend .icon {
    margin-left: 12px
}

.widget-stock-price-date-time {
    font-size: 16px;
    margin-top: 4px;
    opacity: 0;
    transition: all .1s ease
}

.widget-stock-price a.btn {
    margin-top: 32px
}

@media(min-width: 768px)and (max-width:991px) {
    .widget-stock-price a.btn {
        font-size:14px;
        height: 32px;
        margin-top: 0
    }

    .widget-stock-price a.btn .icon {
        font-size: 18px
    }
}

@media(min-width: 992px)and (max-width:1199px) {
    .widget-stock-price a.btn {
        font-size:18px;
        height: 40px;
        margin-top: 8px
    }

    .widget-stock-price a.btn .icon {
        font-size: 22px
    }
}

@media(min-width: 1200px) {
    .widget-stock-price a.btn {
        margin-top:48px
    }
}

.widget-stock-price.initialised .widget-stock-price-date-time,.widget-stock-price.initialised .widget-stock-price-price,.widget-stock-price.initialised .widget-stock-price-trend {
    opacity: 1
}