#carousel_container{
        position: relative;
        width: 98%;
    padding: 0px 1% 15px 1%;
        /*padding: 0px 1% 0px 1%; /*padding: 0px 1% 0px 1%;*/
        /*background: rgba(0,0,0,0.5);*/
        display: inline-block;
        margin: .5% 1%;
         height: 225px;

    }
    #carousel_inner {
        float:left; /* important for inline positioning */
        width:100%; /* important (this width = width of list item(including margin) * items shown */
        overflow: hidden;  /* important (hide the items outside the div) */
        /* non-important styling bellow */
        /*background: #F0F0F0;*/
height: 100%;
    }

    #carousel_ul {
        position:relative;
        left:-210px; /* important (this should be negative number of list items width(including margin) */
        list-style-type: none; /* removing the default styling for unordered list items */
        margin: 0px;
        padding: 0px;
        width:9999px; /* important */
        /* non-important styling bellow */
        /*padding-bottom:5px;*/
        display: inline-block;
  height: 100%;
    }

    #carousel_ul li{
        float: left; /* important for inline positioning of the list items */
        width:250px;  /* fixed width, important */
        /* just styling bellow*/
        /*background-color:white;*/
        /*box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.61);*/
        margin-top:10px;
        margin-bottom:5px;
        /*margin-left:5px;*/
        /*margin-right:5px;*/
        position: relative;
        display: inline-block;
        cursor: pointer;
        height: 100%;
    }

#carousel_ul li .event{
    position: absolute;
    background: rgba(0,0,0,0.4);
    height: 45%;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    margin-left: 2px;
    transition: all 0.5s ease-out;
}
.titre_slide{
    display: block;
    margin-top: 8px;
    padding: 10px;
    color: white;
    text-transform: capitalize;
    font-size: 12px;
}
#carousel_ul li:hover .event{
    height: 60%;
}




    /*#carousel_ul li .event{*/
        /*!*top: 60%;*!*/
        /*!*left: 1%;*!*/
        /*bottom: 0;*/
        /*right: 0;*/
        /*left: 0;*/
        /*position: absolute;*/
        /*!*background: rgba(255, 255, 255, 0.51);*!*/
        /*background: rgba(0, 0, 0, 0.3);*/
        /*color: white;*/
        /*padding: 1%;*/
        /*word-break: break-all;*/
        /*font-weight: 600;*/

    /*}*/
    #carousel_ul li .fontcolor{
        position: absolute;
        background: rgba(255, 255, 255, 0.21);
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        display: none;
    }
    #carousel_ul li:hover .fontcolor{
        display: block;
    }
    #carousel_ul li h3{
        font-size: 12px;
    }
    #carousel_ul li span{
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 8px;
        box-shadow: inset 0px -30px 40px #007f4c ;
        height: 40px;
        color: #ffffff;
        font-weight: bold;
    }

    #carousel_ul li img {
    .margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
        /* styling */
        cursor:pointer;
        border:0px;
        display: inline-block;
        width: 96.5%;
        height: 150px;
        margin: 1.5%;
    }
    #left_scroll{
        left: 0;
        top: 0;
        margin-left: 0px;
        margin-top: 100px;
        position: absolute;
        z-index: 1;
        text-decoration: none;
    }
    #right_scroll{
        right: 0;
        top: 0;
        margin-right: 0px;
        margin-top: 100px;
        position: absolute;
        z-index: 1;
        text-decoration: none;
    }

    #left_scroll img, #right_scroll img{
        border:0;
        width: 50px;
        cursor: pointer;
        cursor: hand;
        text-decoration: none;
    }