:root {
  /* Colores principales */
  --primary-color: #00b3b4;
  --secondary-color: #008489;
  --tertiary-color: #005c66;
  --background-color: #eff3f6;
  --background-light-color: #eff3f6;
  --background-nightly-color: #172e43;

  /* Colores de los textos */
  --primary-text-color: #21cae2;
  --primary-text-light-color: #21cae2;
  --primary-text-nightly-color: #d2e8ff;
  /*--secondary-text-color: #607d8b;*/
  --secondary-text-color: #000000;
  --secondary-text-light-color: #607d8b;
  --secondary-text-nightly-color: #546e7a;
  --tertiary-text-color: #e6f4f1;
  --quaternary-text-color: #000000;

  /* Colores del borde de los campos */
  --field-border-color: #ffffff;

  /* Colores de la barra de navegación */
  --navbar-border-color: #949494;
  --navbar-menu-dropdown-color: #eff3f6;
  --navbar-menu-section-text-color: #607d8b;
  --navbar-menu-option-text-color: #607d8b;
  --navbar-menu-option-background-color: #607d8b;

  --navbar-menu-option-hover-text-color: #ffffff;
  --navbar-menu-option-hover-background-color: #d4d1d1;

  --navbar-menu-text-light-color: #607d8b;
  --navbar-menu-text-nightly-color: #d2e8ff;

  --navbar-menu-background-color: #607d8b;

  /* Colores de PopOver */
  --popover-title-text-color: #607d8b;
  --popover-title-background-color: #ffffff;

  --popover-content-text-color: #ffffff;
  --popover-content-background-color: #21cae2;

  --popover-border-color: #005c66;

  /* Colores del reloj */
  --clock-color: #ff1e1e;
  --clock-border-color: #f77171;
  --clock-text-color: #ffffff;
  /*--clock-text-nightly-color: #D2E8FF;*/

  /* Colores de los botones */
  --button-enabled-color: #21cae2;
  --button-disabled-color: #7a888a;
  --button-selected-color: #005c66;
  --button-hover-color: #1a96a7;

  --button-enabled-text-color: #ffffff;
  --button-disabled-text-color: #bfbfbf;

  /* Colores de la calificación */
  --calification-star-color: #fbd474;
  --calification-star-disable-color: #d2e8ff;

  /* Tamaño de fuentes */
  --title-size: 3em; /* Title */
  --subtitle1-size: 2em; /* Subtitle */
  --subtitle2-size: 2.81em; /* Subtitle 2 */
  --subtitle4-size: 1.25em;

  --subtitle1-paragraph-size: 1.25em; /* Paragraph subtitle */
  --subtitle2-paragraph-size: 1.375em; /* Paragraph subtitle */
  --subtitle3-paragraph-size: 1.7em; /* Paragraph subtitle */
  --subtitle4-paragraph-size: 1em;

  --subtitle1-footer-size: 1.1em; /* Footer subtitle */
  --rights1-footer-size: 1.25em; /* Footer subtitle */
  --rights2-footer-size: 0.8em; /* Footer subtitle */

  --paragraph1-size: 1em; /* Paragraph */
  --paragraph2-size: 1.25em; /* Footer Rights */
  --paragraph3-size: 1.04em;
  --paragraph4-size: 1em;

  --links-map-size: 1em; /* Footer Links */
  --links1-footer-size: 1em; /* Footer Links */

  --text-navbar-size: 1em; /* Navbar */
  --text-button-size: 1em; /* Button */
  --text-button2-size: 1.2em; /* Button */
  --text-button3-size: 0.8em; /* Button */

  --text-clock-size: 2.5em;
  --text-clock-detail-size: 1.56em;

  --calification-star-size: 1.5em;

  /* Fuentes */
  --navbar-font: "Segoe UI";

  --clock-font: "Work Sans";
  --clock-detail-font: "Open Sans";

  --button-font: "Segoe UI";

  --title-font: "Work Sans";
  --subtitle1-font: "Poppins Medium";
  --subtitle2-font: "Work Sans";
  --subtitle4-font: "Poppins Medium";

  --subtitle1-paragraph-font: "Segoe UI Semibold";
  --paragraph1-font: "Segoe UI Regular";

  --subtitle2-paragraph-font: "Segoe UI Semibold";
  --paragraph2-font: "Segoe UI Regular";

  --subtitle3-paragraph-font: "Segoe UI Semibold";
  --paragraph3-font: "Segoe UI Regular";

  --subtitle4-paragraph-font: "Segoe UI Semibold";
  --paragraph4-font: "Segoe UI Regular";

  --subtitle1-footer-font: "Poppins Medium";
  --paragraph1-footer-font: "Poppins Medium";

  --rights1-footer-font: "Segoe UI Regular";
  --rights2-footer-font: "Segoe UI Regular";

  --links-map-font: "Segoe UI Regular";
  --links1-footer-font: "Segoe UI Regular";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color);
  width: 100%;
  height: 100%;
  /*margin-top: 6.5em;*/
}

.flex-container {
  display: flex;
  /* flex-wrap: wrap;*/
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.display {
  display: initial;
}

.undisplay {
  display: none;
}

/* Colors */

.primary-color {
  color: var(--primary-color);
}

.secondary-color {
  color: var(--secondary-color);
}

.primary-text-color {
  color: var(--primary-text-color);
}

.secondary-text-color {
  color: var(--secondary-text-color);
}

.tertiary-text-color {
  color: var(--tertiary-text-color);
}

.paragraph-text-color {
  color: var(--secondary-text-color);
}

.footer1-background-color {
  background: var(--primary-color);
}

.footer2-background-color {
  background: var(--secondary-color);
}

.footer3-background-color {
  background: var(--tertiary-color);
}

.navbar-menu {
  color: var(--navbar-menu-option-text-color);
  font-family: var(--navbar-font);
  font-size: var(--text-navbar-size);
  font-weight: 500;
}

.navbar-border-bottom {
  border-bottom: 1px solid var(--navbar-border-color);
}

.dropdown-item:hover {
  color: var(--navbar-menu-option-hover-text-color);
  background: var(--navbar-menu-option-hover-background-color);
}

.no-border {
  border: var(--field-border-color);
  /* border-color: 1px solid var(--field-border-color);*/
}

.card-border {
  border: 2px solid var(--primary-color);
  background-color: var(--background-color);
}

.brand-border {
  cursor: pointer;
  margin: 5px;
  border: 2px solid; /*#8f8d8e*/
  border-color: var(--navbar-border-color);
  -webkit-box-shadow: 0px 3px 5px 2px rgba(148, 148, 148, 0.5);
  box-shadow: 0px 3px 5px 2px rgba(148, 148, 148, 0.5);
}

.card-article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 1.5em;
  border: 2px solid var(--primary-color);
  background-color: var(--background-color);
  height: 400px;
  width: 16%;
}

.card-article-photo {
  display: flex;
  justify-content: center;
  padding-top: 1em;
  height: 50%;
  width: 100%;
}

.record-article {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  /*border: 1px solid var(--primary-color);*/
  height: 10%;
  width: 70%;
}

.record-article-photo {
  justify-content: center;
  height: 60px;
  width: 60px;
}

.clock {
  color: var(--clock-text-color);
  background: var(--clock-color);
  border-radius: 0.5em;
  border: 2px solid #f77171;
  display: inline-block;
  padding: 15px 15px;
  margin: 0.5em;
  /*align-content: center;*/
  /*text-align-all: center;*/
  text-align: center;
  text-decoration: none;
  font-family: var(--clock-font);
  font-size: var(--text-clock-size);
  width: 2.2em;
  height: 2.2em;
}

.clock-detail {
  color: var(--secondary-text-color);
  display: inline-block;
  text-align: center;
  font-family: var(--clock-detail-font);
  font-size: var(--text-clock-detail-size);
  /*width: 2.2em;
        height: 2.2em;*/
}

.title {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle2-font);
  font-size: var(--subtitle2-size);
  font-weight: bold;

}

.subtitle1 {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle1-font);
  font-size: var(--subtitle1-size);
}

.subtitle2 {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle2-font);
  font-size: var(--subtitle2-size);
}

.subtitle4 {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle4-font);
  font-size: var(--subtitle4-size);
}

.subtitle1-footer {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  /*line-height: 1.2;*/
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle1-footer-font);
  font-size: var(--subtitle1-footer-size);
}

.subtitle1-paragraph {
  border: none;
  display: block;
  padding: 0px 0px;
  margin: 10px 10px;
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle1-paragraph-font);
  font-size: var(--subtitle1-paragraph-size);
}

.subtitle2-paragraph {
  border: none;
  display: block;
  padding: 0px 0px;
  margin: 10px 10px;
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle2-paragraph-font);
  font-size: var(--subtitle2-paragraph-size);
}

.subtitle3-paragraph {
  border: none;
  display: block;
  padding: 0px 0px;
  margin: 10px 10px;
  text-align: left;
  text-decoration: none;
  font-family: var(--subtitle3-paragraph-font);
  font-size: var(--subtitle3-paragraph-size);
}

.subtitle4-paragraph {
  border: none;
  display: block;
  padding: 0px 0px;
  margin: 0px 0px;
  text-align: center;
  text-decoration: none;
  font-family: var(--subtitle4-paragraph-font);
  font-size: var(--subtitle4-paragraph-size);
}

.paragraph1 {
  display: inline-block;
  padding: 0px 0px;
  margin: 5px 5px;
  text-align: center;
  text-decoration: none;
  font-family: var(--paragraph1-font);
  font-size: var(--paragraph1-size);
}

.paragraph2 {
  display: inline-block;
  padding: 0px 0px;
  margin: 5px 5px;
  text-align: center;
  text-decoration: none;
  font-family: var(--paragraph1-font);
  font-size: var(--paragraph1-size);
}

.paragraph3 {
  display: none;
  padding: 0px 0px;
  margin: 5px;
  text-align: justify;
  text-decoration: none;
  font-family: var(--paragraph3-font);
  font-size: var(--paragraph3-size);
  width: 90%;
}

.paragraph4 {
  display: inline-block;
  padding: 0px 0px;
  margin: 1em 1em;
  text-align: center;
  text-decoration: none;
  font-family: var(--paragraph4-font);
  font-size: var(--paragraph4-size);
  font-style: italic;
}

.rights1-footer {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  font-family: var(--rights1-footer-font);
  font-size: var(--rights1-footer-size);
}

.rights2-footer {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  font-family: var(--rights2-footer-font);
  font-size: var(--rights2-footer-size);
}

.links-map {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  font-family: var(--links-map-font);
  font-size: var(--links-map-size);
  color: var(--secondary-text-color);
}

.links-map:hover {
  /*color: var(--secondary-text-color);
        font-weight: bold;*/
  color: var(--quaternary-text-color);
}

.links1-footer {
  border: none;
  display: inline-block;
  padding: 0px 0px;
  margin: 0px 0px;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  font-family: var(--links1-footer-font);
  font-size: var(--links1-footer-size);
  color: var(--tertiary-text-color);
}

.links1-footer:hover {
  color: white;
}

.text-bold {
  font-weight: bold;
}

.display-curve {
  color: var(--secondary-text-color);
  background: var(--background-color);
  border-radius: 0.5em;
  border: 1px solid var(--primary-color);
  cursor: pointer;
  display: inline-block;
  padding: 0.43em 1em;
  margin: 0.5em;
  align-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--button-font);
  font-size: var(--text-button-size);
  font-weight: 500;
}

.button-curve {
  color: var(--button-enabled-text-color);
  background: var(--button-enabled-color);
  border-radius: 0.5em;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0.43em 1.56em;
  margin: 0.5em;
  align-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--button-font);
  font-size: var(--text-button-size);
  font-weight: 500;
}

.button-curve:enabled {
  background-color: var(--button-enabled-color);
  cursor: pointer;
}

.button-curve:disabled {
  background-color: var(--button-disabled-color);
  cursor: pointer;
}

.button-curve:hover {
  background-color: var(--button-hover-color);
}

.button-curve:hover:disabled {
  background-color: var(--button-disabled-color);
  cursor: pointer;
}

.button-curve-right {
  color: var(--button-enabled-text-color);
  background: var(--button-enabled-color);
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0.43em 1.56em;
  align-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--button-font);
  font-size: var(--text-button2-size);
  font-weight: 500;
}

.button-rect {
  color: var(--button-enabled-text-color);
  background: var(--button-enabled-color);
  border: none;
  cursor: pointer;
  display: block;
  margin-left: 1px;
  margin-right: 1px;
  padding: 0.43em 1.56em;
  align-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--button-font);
  font-size: var(--text-button3-size);
  font-weight: 500;
}

.button-rect:enabled {
  background-color: var(--button-enabled-color);
  cursor: pointer;
}

.button-rect:disabled {
  background-color: var(--button-disabled-color);
  cursor: pointer;
}

.button-rect:hover {
  background-color: var(--button-hover-color);
}

.button-rect:hover:disabled {
  background-color: var(--button-disabled-color);
  cursor: pointer;
}

.button-rounded {
  color: var(--button-enabled-text-color);
  background: var(--button-enabled-color);
  border-radius: 1em;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0.43em 1.56em;
  margin: 1.5em;
  align-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--button-font);
  font-size: var(--text-button-size);
  font-weight: 500;
}

.button-float {
  display: block;
  position: fixed;
  right: 10px;
  bottom: 5%;
  /*transform: translate(0%, -20%);*/
  line-height: 80px;
  text-align: center;
  z-index: 999;
}

.gauge-float {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  line-height: 80px;
  text-align: center;
  z-index: 999;
}

/*.button-float:hover {
        background-color: var(--button-hover-color);
}*/

.separator2x {
  width: 100%;
  display: inline-block;
  border-bottom: 2px solid var(--tertiary-text-color);
  /*margin: 1.5em;*/
  align-content: center;
}

.separator1x {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid var(--secondary-text-color);
  align-content: center;
}

.img-round {
  width: 228px;
  height: 228px;
  border-radius: 114px;
}

.img-responsive {
  max-width: 100%;
  width: auto;
  height: auto;
}

/*Efectos*/

.infinite {
  animation-iteration-count: infinite;
}

.effect-content {
  overflow: hidden;
}

.effect-backInUp {
  animation: backInUp;
  animation-duration: 1.5s;
}

.effect-backInDown {
  animation: backInDown;
  animation-duration: 1.5s;
}

.effect-backInLeft {
  animation: backInLeft;
  animation-duration: 1.5s;
}

.effect-backInRight {
  animation: backInRight;
  animation-duration: 1.5s;
}

.effect-bounceIn {
  animation: bounceIn;
  animation-duration: 1.5s;
}

/*.effect-bounceIn:hover {
        animation: bounceIn;
        animation-duration: 2s
}*/

.effect-bounceInDown {
  animation: bounceInDown;
  animation-duration: 1.5s;
}

.effect-fadeInLeft {
  animation: fadeInLeft;
  animation-duration: 1.5s;
}

.effect-fadeInRight {
  animation: fadeInRight;
  animation-duration: 1.5s;
}

.effect-fadeInDown {
  animation: fadeInDown;
  animation-duration: 1.5s;
}

.effect-fadeInUp {
  animation: fadeInUp;
  animation-duration: 1.5s;
}

.effect-flip {
  animation: flip;
  animation-duration: 1.5s;
}

.effect-pulse {
  animation: pulse;
  animation-duration: 1s;
}

.effect-pulse-infinite {
  animation: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.effect-pulse-infinite-avion {
  animation: pulse;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.effect-scale {
  /*overflow: hidden;*/
  transition: all 0.5s ease-in-out;
}

.effect-scale:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  background-color: var(--background-color);
  /*z-index: 999;*/
}

.effect-scale-transparent {
  /*overflow: hidden;*/
  transition: all 0.5s ease-in-out;
}

.effect-scale-transparent:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  /*background-color: var(--background-color);*/
  /*z-index: 999;*/
}

.effect-zoomIn {
  animation: zoomIn;
  animation-duration: 1.5s;
}

/* Tool Tip & PopOver*/

.popover {
  /*background-color: var(--button-enabled-color);*/
  //background: var(--popover-content-background-color);
  //color: var(--background-color);
  //color: var(--button-enabled-text-color);
}

.popover-header {
  color: var(--popover-title-text-color);
  background: var(--popover-title-background-color);
}

.popover-body {
  color: var(--popover-content-text-color);
  background: var(--popover-content-background-color);
}

.popover .arrow::after {
  border-top-color: var(--popover-content-background-color);
}

.popover .arrow::before {
  border-top-color: var(--popover-content-background-color);
}