.close { 
  float: right;
  width: 22px;
  height: 22px;
  background-color: transparent;
  position: absolute;
  right: 3px;
  top: 3px;
  cursor: pointer;
  transition: background 0.5s;
}

.close:after,
.close:before {
  position: absolute;
  content:"";
  background-color: #7fb1fc;
}

.close:after {
  width: 2px;
  height: 10px;
  top: 6px;
  left: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close:before {
  width: 10px;
  height: 2px;
  top: 10px;
  left: 6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close:hover {
  box-shadow: none;
}

.close:hover:after,
.close:hover:before {
  background: blue;
}

/**
 *  Additional code
 */
/* 
html {
  background: #faf3d6;
  font: normal bold 16px/22px Helvetica;
  color: #121212;
  text-transform: uppercase;
  margin: 0px 200px auto;
}

.box {
  background: #faf3c6;
  padding: 50px 50px;
  height: 22px;
  line-height: 22px;
  position: relative; 
  top: 20px; 
} */