.fourhItem div {
    /* background-color: #6b9256 !Important; */
}
/*IMAGE ROLL*/

.imgRoll {
    text-align: center;
    z-index: 1000;
    width: 100%;
}

    .imgRollBars {
        display: none;
    }
.imgRoll h2 {
    color: #fff;
    font-weight: 500;
    font-size: 17px;
    line-height: 47px;
    margin: 0px 0px 0px 0px;
    font-family: 'Noto Sans', sans-serif;
    text-transform: uppercase;
}

.imgRoll li {
    width: 18%;
    display: inline-block;
}

.imgRoll a {
    width: 100%;
    background-color: #461d7c;
    height: auto;
    margin-right: 1px;
    display: inline-block;
    position: relative;
}
.imgRoll a:hover {
    z-index: 10;
}
.imgRoll img {
    width: 100%;
    height: auto;
}
.zooming {
    border: none;
    margin: 0 auto;
    /* opacity: 0.5; */
    
    width: 100%;
    height: auto;
    color: #fff;
}
.zooming:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    opacity: 1;
    color:#FBC229;
    text-decoration:none;
}
.zooming div {
    width: 100%;
    height: auto;
    /* background-color: #461d7c; */
    position: absolute;
    z-index: 1;
    top: 56%;
}

@media (max-width: 1328px) {
    .imgRoll h2 {
        font-size: 13px;
        line-height: 29px;
    }
}

@media (max-width: 1070px) {
    .imgRoll h2 {
        font-size: 11px;
        line-height: 29px;
    }
}
@media (max-width: 1030px) {

    .fourhItem div {
    background-color: #6b9256 !Important; 
}

    .zooming div {
  width:100%;
}

.zooming div {
  background-color: #461d7c;
  width:100%;
}
    .imgRoll {
        padding: 0;
        display: none;
    }

    .imgRollBars {
        padding: 0;
        display: block;
        width:100%;
    }
    .imgRoll img {
        display: none;
    }
    .imgRoll a {
        width: 100%;
        color:#fff;
    }
    .imgRoll a:hover {
        z-index: 10;
        /*background-color: #eceaf1;*/
        text-decoration: none;
    }
    .imgRoll h2 {
        padding: 20px;
    }
    .imgRoll h2:hover {
        color: #fff;
        text-decoration: none;
    }
    .zooming div {
        position: relative;
        /*background-color: rgba(0, 0, 0, 0);*/
    
        padding: 20px;
        border-bottom: 1px solid #fff;
}

    .zooming div:hover {
    color:#FBC229;
}
    .zooming:hover {
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
        transition: none;
        -webkit-transition: none;
        opacity: 1;
        background-color: #eceaf1;
    }

    .imgRollBars h2 {
        margin:0px;
          text-transform: uppercase;
          text-align:center;
    }
        .imgRollBars {
        margin-top: 101px;
    }

      
}