/* INTRO MODAL */
.intro-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}
.intro-modal.is-open { display: block; }

.intro-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255,255,255,1);
}

.intro-modal__panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.intro-modal__header {
  position: sticky;
  min-height: 80px;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 38px 18px;
}

.intro-modal__logo img {
  max-height: 42px;
  height: auto;
  width: auto;
  display: block;
}

.intro-modal__close {
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  padding: .5rem;
  background: transparent;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}

/* X simple (no depende de Bootstrap) */
.intro-x { width: 56px; height: 56px; position: relative; display:block; }
.intro-x::before,
.intro-x::after{
  content:"";
  position:absolute;
  left:27px;
  top:6px;
  width:3px;
  height:44px;
  background:#333333;
}
.intro-x::before { transform: rotate(45deg); }
.intro-x::after  { transform: rotate(-45deg); }

.intro-modal__close {
  padding: 1rem;
}

.intro-modal__body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 24px 18px;
  width: 100%;
  margin: 0 auto;

  display: grid;
  align-content: start; 
  justify-items: center;
}

.intro-modal__content {
  width: 100%;
  max-width: 980px;
}

.intro-modal__date {
  font-family: Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 300;
  line-height: 21px;
  color: #000000;
  margin: 8px 0 3em 0;
}

.intro-modal__text p { 
  font-family: Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 300;
  line-height: 21px;
  color: #000000;
  margin: 0 0 1.5em 0;
}

.intro-modal__text ul {
  
  margin: 10px 0 18px 0;
  padding-left: 1.25em;
}
.intro-modal__text li { 
  font-family: Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 300;
  line-height: 21px;
  color: #000000;
  margin: 0 0 .5em 0;
  list-style: disc;
  list-style-position: outside;
}
.intro-modal__text strong { font-weight: 600; }

@media (max-width: 680px) {
  .intro-modal__logo img { max-height: 34px; }
  .intro-modal__body { padding: 0 16px 20px 16px;padding-top: 12px;align-content: start; }
  .intro-modal__header {
    justify-content: flex-start;
    padding-top: 34px;
    padding-bottom: 16px;
  }
  .intro-modal__logo {
    margin-left: 0px; 
  }

  .intro-modal__close {
    top: 50%;
    transform: translateY(-70%);
    right: 8px;
  }
  .intro-modal__text ul {
    font-size: 15px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    line-height: 23px;
  }
}
@media (min-height: 920px) and (min-width: 681px) {
  .intro-modal__body{
    align-content: center;
  }
}