#makeMeScrollable
{
    width:100%;
    height: 295px;
    position: relative;
    width: 100%;
    height: 295px;
    position: relative;
    box-shadow: 0px 4px 16px 4px rgba(0,0,0,0.09);
    -webkit-box-shadow: 0px 4px 16px 4px rgba(0,0,0,0.09);
    -moz-box-shadow: 0px 4px 16px 4px rgba(0,0,0,0.09);
}

/* Replace the last selector for the type of element you have in
   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
    position: relative;
    height: 295px;
    float: left;
    margin: 0;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
       block of code. It's just a nice feature that prevent the images from
       accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}






@media screen and (max-width: 1024px) {
    #makeMeScrollable
    {height: 217px;}
    #makeMeScrollable div.scrollableArea img {height: 217px;}

}

@media screen and (max-width: 800px) {
    #makeMeScrollable
    {height: 180px;}
    #makeMeScrollable div.scrollableArea img {height: 180px;}

}