x-modal {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

x-modal[hidden] {
  display: none;
}

x-modal[overlay] {
  -webkit-box-shadow: 0 0 10000px 10000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10000px 10000px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10000px 10000px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10000px 10000px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10000px 10000px rgba(0, 0, 0, 0.5);
}