.pt-brands {
  color: #fff;
  text-decoration: none;
}
.pt-brands > .pt-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-bottom: 2px solid #ccc;
}

.pt-brands > .pt-brand .background {
  width: 100%;
  height: 100%;
  background-color: #333;
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
  position: absolute;
  transition: 0.2s ease;
}


.pt-brands > .pt-brand:hover .background {
  transform: scale(1.05);
}

.pt-brands > .pt-brand .dark-hover {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  position: absolute;
  transition: 0.2s ease;
}

.pt-brands > .pt-brand:hover .dark-hover {
  opacity: 0.1;
}

.pt-brands > .pt-brand .primetech-name {
  width: 100%;
  height: 100%;
  position: absolute;
  color: #ccc;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
    transition: 0.2s ease;
}

.pt-brands > .pt-brand:hover .primetech-name {
color: #fff;
    
}

.pt-brands > .pt-brand .primetech-name span {
width: 83%
}

.ppt-circles {
    display: flex;
    flex-wrap: wrap;
}

.ppt-circles > div .description
{
 white-space: normal;   
}

.ppt-circles > div .description {
    font-size: 0.6em;
    height: 60px;
}


.ppt-circles > div {
    padding: 0 0;
    width: 12.5%
}


@media (max-width: 72em) and (min-width: 48em) {
    .ppt-circles > div {
        width: 25%
    }
}

@media (max-width: 62em) {
    .ppt-circles > div {
        width: 50%
    }
}