body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
}

.xray {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  will-change: mask-position;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.xray * {
  will-change: mask-position;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.xray .mask {
  -webkit-mask-image: url("img/xray-mask.png");
          mask-image: url("img/xray-mask.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 40%;
          mask-size: 40%;
  -webkit-transition: 0.3s opacity;
  transition: 0.3s opacity;
  will-change: mask-position;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.xray .mask-size {
  width: 40%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  display: none;
}
.xray .xray-header {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.xray .xray-header img {
  width: 100%;
}
.xray .xray-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
}
.xray .xray-dots.hide {
  opacity: 0;
  pointer-events: none;
}
.xray .xray-dots .punto {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  opacity: 0.6;
}
.xray .xray-dots .punto:hover {
  opacity: 1;
}
.xray .xray-dots .punto.active {
  opacity: 1 !important;
}
.xray .xray-dots .punto img {
  max-width: 100%;
  height: auto;
}
.xray .xray-dots .punto-1 {
  width: 18%;
  top: 26.5%;
  left: 8.6%;
}
.xray .xray-dots .punto-2 {
  top: 35%;
  left: 17.7%;
  z-index: 50;
  width: 10%;
}
.xray .xray-dots .punto-3 {
  top: 30.8%;
  left: 26.6%;
  width: 20%;
}
.xray .xray-dots .punto-4 {
  top: 33.3%;
  left: 36.6%;
  width: 10%;
}
.xray .xray-dots .punto-5 {
  top: 32.5%;
  left: 45.9%;
  width: 14%;
}
.xray .xray-dots .punto-6 {
  top: 34.75%;
  left: 64.5%;
  width: 13%;
}
.xray .xray-dots .punto-7 {
  top: 34.8%;
  left: 78.7%;
  width: 10%;
}
.xray .xray-dots .punto-8 {
  top: 28.7%;
  left: 87.3%;
  width: 10%;
}
.xray .xray-info-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.xray .xray-info-close .btn-close {
  width: 6%;
  height: 4%;
  background-image: url("img/cerrar.png");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  z-index: 5000;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 0.5s opacity;
  transition: 0.5s opacity;
}
.xray .xray-info-close .btn-close.active {
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: 0.5s opacity 0.5s;
  transition: 0.5s opacity 0.5s;
}
.xray .xray-info-close .btn-close.close-1 {
  top: 91%;
  left: 46%;
}
.xray .xray-info-close .btn-close.close-2 {
  top: 20.5%;
  left: 46%;
}
.xray .xray-info-close .btn-close.close-3 {
  top: 21.5%;
  left: 46%;
}
.xray .xray-info-close .btn-close.close-4 {
  top: 20.5%;
  left: 47%;
}
.xray .xray-info-close .btn-close.close-5 {
  top: 19%;
  left: 46%;
}
.xray .xray-info-close .btn-close.close-6 {
  top: 16.8%;
  left: 47%;
}
.xray .xray-info-close .btn-close.close-7 {
  top: 86.5%;
  left: 48%;
}
.xray .xray-info-close .btn-close.close-8 {
  top: 14.5%;
  left: 47%;
}
.xray .xray-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4000;
}
.xray .xray-info .info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.5s opacity 0s;
  transition: 0.5s opacity 0s;
}
.xray .xray-info .info.active {
  opacity: 1;
  -webkit-transition: 0.5s opacity 0.5s;
  transition: 0.5s opacity 0.5s;
}
.xray .xray-info .info img {
  width: 100%;
  pointer-events: none;
  height: auto;
}
.xray .xray-content {
  width: 100%;
  height: 100%;
}
.xray .xray-content .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.xray .xray-content .layer-1 {
  background-image: url("img/layer-1.jpg");
  z-index: 700;
  -webkit-transition: 0.4s opacity 0.5s;
  transition: 0.4s opacity 0.5s;
}
.xray .xray-content .layer-1.hide {
  opacity: 0;
  -webkit-transition: 0.4s opacity;
  transition: 0.4s opacity;
}
.xray .xray-content .layer-2 {
  background-image: url("img/layer-2.jpg");
  z-index: 1000;
  -webkit-transition: 0.4s opacity;
  transition: 0.4s opacity;
}
.xray .xray-content .layer-2.hide {
  opacity: 0;
}
.xray .xray-content .layer-3 {
  background-image: url("img/layer-3.jpg");
  z-index: 500;
}
.xray .xray-content .layer-main img {
  max-width: 100%;
  height: auto;
}