.close { 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  display: inline-block; 
  float: right; width: 22px; 
  height: 22px; 
  background-color: transparent; 
  box-shadow: inset 0px 0px 0px 2px #006e93; 
  border-radius: 50%; 
  position: relative;  
  cursor: pointer;
  transition: background 0.5s;
}

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

.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 {
  background: #e60500;
  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; 
}