<style>
p {margin: 0; padding: 0; }
.iconul {margin: 30px 0 0 0; background-color: rgba(0, 0, 0, 0.0); }
.itembox_wrap {margin: 0 auto; text-align: center; }
.iconul .itembox {
    display: inline-block; width: 100px;height: 100px; margin: 10px 50px; 
    border: 1px solid #ff5722; border-radius: 50%;
    box-sizing: border-box;
    color: #555; text-align: center;
    background-color: rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.3s; transition: 0.3s;
    }

.item_icon_img {font-size: 35px; color: #ea7122; margin-top: 10px; }
.iconbar {height: 1px; border: 1px solid black; display: inline-block; width: 20%; margin-top: 4px; }
.iconul .itembox:hover {border: 1px solid #1c1759; color: #fff; background-color: #3f3b72; }
.iconul a:hover .iconbar {border: 1px solid #cddc39; width: 30%; }
.ds {padding-top: 0px; }

@media only screen and (max-width: 904px) {
 .iconul .itembox {margin: 10px 30px; }
}
@media only screen and (max-width: 730px) {
 .iconul .itembox {margin: 10px 20px; }
}
@media only screen and (max-width: 661px) {
 .iconul .itembox {margin: 10px 10px; }
 .iconul .itembox:hover {border: 0px solid #1c1759; color: #555; background-color: transparent;}	
}

@media only screen and (max-width: 600px) {            
 .iconul .itembox {width: 60px; height: 60px; margin: 10px 10px; background-color: rgba(0, 0, 0, 0.00); border: 0px; font-size: 14px; letter-spacing: -2px;  }
 .iconul .itembox:hover {            }
 .item_icon_img {font-size: 30px; color: #004175; }
 .iconbar {border: 1px solid #cddc39; }
	.iconul {margin: 15px 0 0 0; background-color: rgba(0, 0, 0, 0.0); }
}
@media only screen and (max-width: 500px) {        
 .iconul .itembox {width: 75px; height: 75px; margin: 10px 5px;  }
}
@media only screen and (max-width: 410px) {            
 .iconul .itembox {width: 75px; height: 75px; margin: 10px 0px; }
}