@media (max-width 567px) and (min-width 1100px) {.hero-slider
        {
            width: 100%;
            height: 400px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }
       
        .hero-style-3
        {
            width: 100%;
            background-color: red;
            height: 400px;
            clear: both;
            position: relative;
           
            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }
       
        .slide-bg-image
        {
            float: middle;
            margin: 0px;
            padding: 15px;
            position: relative;
            width: 100%;
        }}