body{ 
   
    background-color: black;
     }
    img {
        max-width: 100%;
        height: auto;
    }

    
#content {
    min-height: 1200px;
    background:url(/static/images/stockmarket3.png) fixed;
    background-size:cover;

  }
  #topBar {
    background:rgba(0, 0, 0, 0.938);
  }


#title{
    color : gainsboro;
   
  }
  #logo {
    width: 40px;
    height: 40px;
  }


    ul li {
        list-style: none
    }
    a, a:hover {
        text-decoration: none;
        box-shadow: none;
        outline: none;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }
    h1{ text-align:center; margin:30px 0; color:#fff;}
    .hls_sol li {
        width: 20%;
        max-width: 100%;
        display: inline-block;
        float: left;
        text-align: center;
        overflow: hidden;
        position: relative;
        height: 425px;
    }
    .hls_sol li img {
        height: 100%;
    }
    .hls_sol ul {
        padding: 0;
        display: flow-root;
    }
    .hls_sol li:hover img {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }
    .hls_sol li img {
        -webkit-transition: transform 0.5s ease;
        -o-transition: transform 0.5s ease;
        transition: transform 0.5s ease;
    }
    .hls_sol .hls_sol_data {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        transition: 0.3s ease-in-out;
        background: rgba(0,0,0,0.28);
        visibility: hidden
    }
    .hls_sol ul li:hover .hls_sol_data {
        background: rgba(255,0,4,0.46);
        transition: 0.3s ease-in-out;
        visibility: visible
    }
    .hls_data {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 60px 20px;
    }
    .hls_data a {
        display: block;
    }
    .hls_title {
        text-align: right;
        font-size: 22px;
        border-bottom: 2px solid blue;
        padding: 10px 0;
        margin: 10px 0;
        color: #fff;
    }
    .hls_title:hover {
        color: #fff;
    }
    .hls_sol_data h3 {
        color: #fff;
        transition: 0.5s
    }
    .hls_sol_data:hover h3 {
        transition: 0.5s ease;
        margin-top: 100px;
    }
    .btn-pro {
        border-radius: 0;
        color: #222;
        background: #fff;
        display: inline-block !important;
        float: right;
    }
    .btn-pro:hover {
        color: #fff;
        background: #222;
    }
    .sec_title {
        text-align: center;
        margin: 30px 0 30px;
    }
    .hls_data {
        left: unset;
        right: -310px;
        transition: 1s ease
    }
    .hls_sol_data:hover .hls_data {
        left: 0;
        right: 0;
        transition: 1s ease
    }