/**Убираем у списков ul маркеры и задаем отступ сверху 60 пикселей.**/

 .box ul {
    list-style: none;
/**    margin-top: 10px;**/
}  


/**Прорисовываем блоки списка с заданной шириной и высотой, нужного цвета с рамкой под цвет фон. Она не должна быть видна в обычном состоянии, а будет появляться более темного цвета только при наведении курсора.**/

 .box ul li {
    width: 30px;
    height: 30px;
    background: #555555;
    border: solid 4px #e1e1e1;
    text-align: center;
    border-radius: 50%;
    display: inline-block; /**Вот здесь отображаем список в строку!!!**/
}


/**Опускаем иконки на 15% вниз**/

 .icon {

    margin-top: 15%;
    
}

/** В этом классе  fa меняем цвет шрифта т.к. он внутри тегов а    **/

.fa {

color: white;

}


 .icon{
  font-size: 1.7em;
  display: inline-block;

}


/**Уменьшается размер иконки при наведении**/

.box ul li:hover {
   /** font-size: 0.8em;Изменяется размер и происходит сдвижка**/
  /**   color: #118EC7;  это не работает**/
   background: #118EC7;
}
 

/**#vk_community_messages { **/
/**padding-bottom: 120px; **/
/**padding-right: 640px; **/
} **/