.close-button, .close-button2, .close-button3 {
  height: 50px;
  width: 50px; cursor: pointer;
  position: relative;
  box-sizing: border-box;
  line-height: 0;
  display: inline-block;
}
.close-button:before, .close-button:after, .close-button2:before, .close-button2:after, .close-button3:before, .close-button3:after {
  transform: rotate(-45deg);
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: 0px;
  display: block;
  height: 3px;
  width: 50px;
  transition: all 0.25s ease-out;
}

.close-button:before, .close-button:after {background-color: var(--brown);}
.close-button2:before, .close-button2:after, .close-button3:before, .close-button3:after {background: var(--bg_b);}

.close-button:after, .close-button2:after, .close-button3:after {
  transform: rotate(-135deg);
}
.close-button:hover:before, .close-button:hover:after, .close-button2:hover:before, .close-button2:hover:after, .close-button3:hover:before, .close-button3:hover:after {
  transform: rotate(0deg);
}







@media screen and (max-width: 720px){
.close-button3 {width: 30px; height: 30px;}
.close-button3:before, .close-button3:after {width: 30px;}
}
@media screen and (max-width: 406px){
.close-button, .close-button2 {width: 30px; height: 30px;}
.close-button:before, .close-button:after, .close-button2:before, .close-button2:after {width: 30px;}
}

@media screen and (max-height: 720px){
.close-button3 {width: 30px; height: 30px;}
.close-button3:before, .close-button3:after {width: 30px;}
}
@media screen and (max-height: 595px){
.close-button, .close-button2 {width: 30px; height: 30px;}
.close-button:before, .close-button:after, .close-button2:before, .close-button2:after {width: 30px;}
}