:root {
  --darkGreen: #00818a;
  --darkBlue: #0262a9;
  --body_backgroundImage: "none";
  --body_backgroundImageAttachment: inherit;
  --body_fontSize: 1em;
  --primary: var(--darkBlue);
  /* Elevation */
  --level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --mainWhite: ghostwhite;

  --nombre_fontSize: max(min(6vw, 48px), 36px);
  --nombre_color: var(--darkBlue);
  --tipo_fontSize: 26px;
  --tipo_color: var(--darkBlue);
  --tipo_margin: 1em auto;
  --autores_fontSize: 26px;
  --autores_color: var(--darkBlue);
  --autores_margin: 1em auto;
  --empresa_logo_margin: 0.5em auto;
  --empresa_logo_maxWidth: 90%;
  --empresa_logo_width: 300px;
  --datosEventoHeading_fontSize: 1.5em;
  --datosEventoHeading_color: var(--darkBlue);
  --datosEventoHeading_textShadow: 0 0 0px #fff;
  --datosEventoHeading_fontWeight: bold;
  --datosEventoHeading_transform: rotate(0);
  --formHeading_margin: 2em auto;
  --formHeadingH3_fontSize: 1.17em;
  --formHeadingH3_color: var(--darkBlue);
  --formLabel_color: var(--darkBlue);
  --formButton_color: #ffffff;
  --formButton_backgroundColor: var(--darkBlue);
  --caret_color: var(--darkBlue);
  --mainBorder: none;
}
p,
ul,
ol {
  font-size: 1.125em;
  line-height: 1.75;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  color: #333;
  /* background: var(--primary); */
  /* background: #92d5fe; */
  background: var(--body_backgroundImage);
  font-size: var(--body_fontSize);
  background-attachment: var(--body_backgroundImageAttachment);
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  font-family: Ubuntu, "Segoe UI", Roboto, Oxygen-Sans, "Helvetica Neue",
    sans-serif;
}

a {
  color: rgb(0, 100, 200);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: rgb(0, 80, 160);
}

label {
  display: block;
  color: var(--primary);
  font-weight: bold;
}

h1,
h2,
h3,
h4 {
  color: var(--primary);
}
h4 {
  margin-bottom: 0.7em;
}

p {
  margin-top: 0;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  -webkit-padding: 0.4em 0;
  padding: 0.4em;
  margin: 0 0 0.5em 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input:disabled {
  color: #ccc;
}

/* ==========================================================================
	 Author's custom styles
	 ========================================================================== */
.button-wrapper {
  display: flex;
  justify-content: center;
}

button {
  --buttonColor: var(--primary);

  appearance: none;
  /* color: var(--textColor); */
  color: #ffffff;
  background-color: var(--buttonColor);
  border: none;
  border-radius: 4px;
  padding: 15px 25px;
  box-shadow: var(--level-3);
  transition: 0.3s ease-in-out box-shadow;
  cursor: pointer;

  display: flex;
  align-items: center;
  width: clamp(10em, 100%, 22ch);
  font-size: 1.35em;
}

button svg {
  max-height: 1.5em;
  margin-left: 1em;
}

button:hover {
  box-shadow: var(--level-4);
}

button:active {
  box-shadow: var(--level-1);
}

button[disabled] {
  opacity: 0.4;
}

/* ==========================================================================
	 Helper classes
	 ========================================================================== */

/*
   * Hide visually and from screen readers
   */

.hidden,
[hidden] {
  display: none !important;
}

/*
	  * Hide only visually, but have it available for screen readers:
	  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
	  *
	  * 1. For long content, line feeds are not interpreted as spaces and small width
	  *    causes content to wrap 1 word per line:
	  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
	  */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
	  * Extends the .sr-only class to allow the element
	  * to be focusable when navigated to via the keyboard:
	  * https://www.drupal.org/node/897638
	  */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
	  * Hide visually and from screen readers, but maintain layout
	  */

.invisible {
  visibility: hidden;
}
/* 
	article header{
		flex-direction: column-reverse;
	}


@media  (min-width: 600px){
	article header{
		flex-direction: row-reverse ;
	}		
}
	 */