/* General Controls */
.controls {
  display: flex;
  margin: 0;
}
.controls div {
  width: 100%;
  margin-bottom: 0;
}
.controls div label,
.controls div select {
  font-size: 12px;
  font-family: 'Titillium Web', sans-serif;
}
.controls div select {
  max-width: 100%;
}

.select {
  border-radius: 5px;
  border: none;
  box-shadow: 1px 1px 2px rgba(109, 100, 100, 0.5);
  cursor: pointer;
}
.select:focus {
  box-shadow: 1px 1px 2px rgba(109, 100, 100, 1);
}

/* Line Colors */
.line_colors {
  font-family: 'Titillium Web', sans-serif;
}
.line_colors p {
  margin: 0;
  display: flex;
  align-items: center;
}
.line_colors p span {
  width: 20px;
  height: 2px;
  margin-right: 5px;
  display: inline-block;
}
.line_azul,
.line_entidad {
  font-size: 16px;
}
.line_azul span {
  background-color: #005eff;
}
.line_entidad span {
  background-color: #969696;
}

/* Scroll Panels */
#sp_panels_scroll #sp_panels-container_scroll {
  height: calc(100vh - 142px);
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.firsts {
  background-color: #c3b298;
  color: #291502;
}
.seconds {
  background-color: #e1d0b5;
  color: #291502;
}

.sp_panel_scroll {
  position: relative;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  display: flex;
}
.sp_panel_scroll .content,
.sp_panel_scroll .col_txt,
.sp_panel_scroll .col_img,
.sp_panel_scroll .cont_img {
  display: grid;
  place-items: center;
}

/* Text and Links */
.sp_panel_scroll p {
  font-size: 25px;
  font-family: 'Titillium Web', sans-serif;
  text-align: justify;
  margin: 0;
}
.sp_panel_scroll p strong {
  font-size: 36px;
  background-color: transparent;
  border-bottom: 1px dotted #393939;
}
.sp_panel_scroll p a:link,
.sp_panel_scroll p a:visited {
  border-bottom: 1px dotted #393939;
  color: #393939;
}

.sp_panel_scroll .cite {
  font-size: 18px;
  justify-self: start;
}

/* Images */
.cont_img {
  height: 580px;
}
.sp_panel_scroll img,
.img_llave {
  max-width: 86%;
  max-height: 100%;
  display: block;
  padding-right: 30px;
}
.img_diagrama {
  width: 150%;
  height: 120%;
  display: block;
}

/* Responsive */
@media screen and (orientation: portrait) {
  .sp_panel_scroll .content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .sp_panel_scroll .content .row {
    height: 100%;
  }
  .cont_img {
    height: 100%;
    width: 100%;
  }
  .img_diagrama {
    width: 150%;
    height: 120%;
    display: block;
  }
  .sp_panel_scroll img {
    max-width: 50%;
    margin: auto;
  }
}

@media (max-width: 576px) {
  .sp_panel_scroll {
    height: calc(100vh - 137px);
  }
  .sp_panel_scroll .cite {
    font-size: 10px;
  }
  .sp_panel_scroll p {
    font-size: 16px;
  }
  .sp_panel_scroll p {
    font-size: 18px;
    font-family: 'Titillium Web', sans-serif;
    text-align: justify;
    margin: 0;
  }
  .sp_panel_scroll p strong {
    font-size: 20px;
    background-color: transparent;
    border-bottom: 1px dotted #3c3c3c;
  }
}