.bubble-wrap {
width: 740px;
height: 190px;
justify-content: center;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.bubbles {
width: 165px;
height: 165px;
background-color: #383838;
color: white;
margin: 10px;
border-radius: 50%;
float: left;
text-align: center;
border: 4px solid #383838;
}
.bubbles:hover {
border-color: #e20074;
}
.category-nav__icon {
height: 70px;
width: 70px;
margin: 20px auto 10px auto;
vertical-align: middle;
}
#smarthome path,
#roof,
#walls,
#blink,
#eye,
#smarthome rect {
fill: #ffffff;
}
.bubbles:hover .transparency,
.bubbles:hover .security,
.bubbles:hover .st01,
.bubbles:hover .iot,
.bubbles:hover .speaker,
.bubbles:hover #doorpage-festnetz-geraete path,
.bubbles:hover #speedbox-logo,
.bubbles:hover #speedbox-rec,
.bubbles:hover #world-icon,
.bubbles:hover #roof,
.bubbles:hover #walls,
.bubbles:hover #blink,
.bubbles:hover #eye,
.bubbles:hover #smarthome path,
.bubbles:hover #smarthome rect,
.bubbles:hover .svg-path {
fill: #e20074;
}
.bubbles:hover #speedbox-line {
stroke: #e20074;
}
@media (max-width: 980px) {
.bubble-wrap {
width: 660px;
height: 170px;
}
.bubbles {
width: 155px;
height: 155px;
margin: 5px;
}
.category-nav__icon {
height: 70px;
margin: 15px auto 15px auto;
}
}
@media (max-width: 685px) {
.bubble-wrap {
height: 310px;
width: 310px !important;
}
.bubbles {
width: 145px;
height: 145px;
}
.category-nav__icon {
height: 60px;
margin: 20px auto 10px auto;
}
.bubbles p {
font-size: 16px;
}
}