:root {
  --thought-blue: #CBE4F9;
  --thought-turquoise: #CDF5F6;
  --thought-beige: #EFF9DA;
  --thought-brown: #F9EBDF;
  --thought-pink: #F9D8D6;
  --thought-purple: #D6CDEA;
}

.answerphone-list {
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  margin:0;
  align-items:center;
  align-content:center;
}

.thought {
  visibility: hidden;
  font-size: 0.8rem;
  display:flex;
  background-color:#fff;
  padding:20px;
  border-radius:30px;
  min-width:40px;
  max-width:260px;
  min-height:40px;
  margin:20px;
  position:relative;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.thought:before,
.thought:after {
  content:"";
  background-color:#fff;
  border-radius:50%;
  display:block;
  position:absolute;
  z-index:-1;
}
.thought:before {
  width:44px;
  height:44px;
  top:-12px;
  left:28px;
  box-shadow:-50px 30px 0 -12px #fff;
}
.thought:after {
  bottom:-10px;
  right:26px;
  width:30px;
  height:30px;
  box-shadow:40px -34px 0 0 #fff,
             -28px -6px 0 -2px #fff,
             -24px 17px 0 -6px #fff,
             -5px 25px 0 -10px #fff;
  
}

.thought.turquoise {
  background-color: var(--thought-turquoise);
}

.thought.turquoise:before,
.thought.turquoise:after {
  background-color: var(--thought-turquoise);
}

.thought.turquoise:before {
  box-shadow:-50px 30px 0 -12px var(--thought-turquoise);
}

.thought.turquoise:after {
  box-shadow:40px -34px 0 0 var(--thought-turquoise),
             -28px -6px 0 -2px var(--thought-turquoise),
             -24px 17px 0 -6px var(--thought-turquoise),
             -5px 25px 0 -10px var(--thought-turquoise);
  
}

.thought.pink {
  background-color: var(--thought-pink);
}

.thought.pink:before,
.thought.pink:after {
  background-color: var(--thought-pink);
}

.thought.pink:before {
  box-shadow:-50px 30px 0 -12px var(--thought-pink);
}

.thought.pink:after {
  box-shadow:40px -34px 0 0 var(--thought-pink),
             -28px -6px 0 -2px var(--thought-pink),
             -24px 17px 0 -6px var(--thought-pink),
             -5px 25px 0 -10px var(--thought-pink);
  
}

.thought.blue {
  background-color: var(--thought-blue);
}

.thought.blue:before,
.thought.blue:after {
  background-color: var(--thought-blue);
}

.thought.blue:before {
  box-shadow:-50px 30px 0 -12px var(--thought-blue);
}

.thought.blue:after {
  box-shadow:40px -34px 0 0 var(--thought-blue),
             -28px -6px 0 -2px var(--thought-blue),
             -24px 17px 0 -6px var(--thought-blue),
             -5px 25px 0 -10px var(--thought-blue);
  
}

.thought.beige {
  background-color: var(--thought-beige);
}

.thought.beige:before,
.thought.beige:after {
  background-color: var(--thought-beige);
}

.thought.beige:before {
  box-shadow:-50px 30px 0 -12px var(--thought-beige);
}

.thought.beige:after {
  box-shadow:40px -34px 0 0 var(--thought-beige),
             -28px -6px 0 -2px var(--thought-beige),
             -24px 17px 0 -6px var(--thought-beige),
             -5px 25px 0 -10px var(--thought-beige);
  
}

.thought.purple {
  background-color: var(--thought-purple);
}

.thought.purple:before,
.thought.purple:after {
  background-color: var(--thought-purple);
}

.thought.purple:before {
  box-shadow:-50px 30px 0 -12px var(--thought-purple);
}

.thought.purple:after {
  box-shadow:40px -34px 0 0 var(--thought-purple),
             -28px -6px 0 -2px var(--thought-purple),
             -24px 17px 0 -6px var(--thought-purple),
             -5px 25px 0 -10px var(--thought-purple);
  
}

.thought.brown {
  background-color: var(--thought-brown);
}

.thought.brown:before,
.thought.brown:after {
  background-color: var(--thought-brown);
}

.thought.brown:before {
  box-shadow:-50px 30px 0 -12px var(--thought-brown);
}

.thought.brown:after {
  box-shadow:40px -34px 0 0 var(--thought-brown),
             -28px -6px 0 -2px var(--thought-brown),
             -24px 17px 0 -6px var(--thought-brown),
             -5px 25px 0 -10px var(--thought-brown);
  
}