.hosting-dashboard:after { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(91, 116, 173, 0.7); z-index: -1; } .hosting-dashboard:before { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: url(../../datacenterlight/img/pattern.jpg) no-repeat center center; background-size: cover; z-index: -2; height: 100%; } .hosting-dashboard .dashboard-container-head { color: #fff; } .hosting-dashboard-item { background: #e9ebee; box-shadow: 1px 3px 3px rgba(0,0,0,0.4); padding: 25px; color: rgba(124, 139, 175, 1); font-size: 19px; display: block; margin-bottom: 20px; } .hosting-dashboard-item:hover, .hosting-dashboard-item:focus, .hosting-dashboard-item:active { text-decoration: none; color: #7c8baf; background: #fff; } .hosting-dashboard-item h2 { margin: 0; font-size: 18px; padding-bottom: 15px; border-bottom: 2px solid #acb5cf; margin-bottom: 10px; } .hosting-dashboard-image { height: 120px; fill: #8b9bb7; display: flex; align-items: center; } .hosting-dashboard-item:hover .hosting-dashboard-image, .hosting-dashboard-item:focus .hosting-dashboard-image, .hosting-dashboard-item:active .hosting-dashboard-image { fill: #6D84AC; color: #6D84AC; } .hosting-dashboard-image img, .hosting-dashboard-image svg { width: 100%; height: 100%; max-height: 79px; } .hosting-dashboard-image img { opacity: 0.2; } @media (min-width: 768px) { .hosting-dashboard-content { display: flex; justify-content: space-between; flex-wrap: wrap; } .hosting-dashboard-item { width: 31.5%; } }