/* CSS */
.close-icon {
  position: absolute; top: 10px; right: 10px; 
  /*position: relative;*/
  width: 30px;
  height: 30px;
  cursor: pointer;

}
.close-icon:before.close-icon:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #333;
  top: 50%;
  left: 0;
}
.close-icon:before {
  transform: rotate(45deg);
}
.close-icon:after {
  transform: rotate(-45deg);
}
.close-icon:hover:before.close-icon:hover:after {
  background-color: #f00; /* Muda a cor ao passar o rato */
}