/* GENERAL */
 :root {    
 	position: relative; margin:0px; padding: 0px; scroll-behavior: smooth;
 	width: 100vw; min-width: 100vw; max-width:100vw; min-height: calc(100vh - ( env(safe-area-inset-top) + env(safe-area-inset-bottom) ) ); max-height: inherit;
 	font-size:14px; line-height:1.6em; font-family: sans-serif;  background-color: var(--primary); color: var(--secundary);
 }
 * , *::before, *::after {
	 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
	 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; 
	 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 *::-webkit-scrollbar { width: 12px; height: 12px; }
 *::-webkit-scrollbar-thumb { background: var(--secundary); border:5px solid transparent; border-radius: 10px; background-clip: content-box; }
 *::-webkit-scrollbar-track { background: var(--primary); box-shadow:none; }
 *::-webkit-scrollbar-corner { background: var(--primary); }
 * { scrollbar-color: var(--secundary) var(--primary); scrollbar-width:thin; }
 * { scrollbar-face-color: var(--primary); scrollbar-track-color: var(--primary); scrollbar-shadow-color: var(--secundary); scrollbar-highlight-color: var(--secundary); }
 
 body {
	 position: relative; margin:0px; padding: 0px; overflow-x: hidden;
	 font-size: calc(14px + (16 - 14) * ((100vw - 576px) / (1088 - 576)));
	 width: 100vw; min-width: 100vw; max-width: 100vw; min-height: calc(100vh - ( env(safe-area-inset-top) + env(safe-area-inset-bottom) ) ); max-height: inherit;
 }
 body * { font-size:inherit; line-height:inherit;}
 @media screen and (max-width: 576px) { :root body { font-size: 14px; } } 
 @media screen and (min-width: 1088px) { :root body { font-size: 16px; } }

/* MARKUP */
  h1 {
		font-size: 1.5em; line-height: 1.2em;
	}
  h2 {
		font-size: 1.4em; line-height: 1.2em;
	}
  h3 {
		font-size: 1.3em; line-height: 1.2em;
	}
  h4 {
		font-size: 1.2em; line-height: 1.2em;
	}
  h5 {
		font-size: 1.1em; line-height: 1.2em;
	}
  h6 {
		font-size: 1.0em; line-height: 1.2em;
	}
  p {
		font-size: 1.0rem;
		line-height: 1.6em;
	}
	p a {
		margin:0px!important;
	}

/* A */
	a { 
		display:inline-block; position:relative; color: inherit; font-family:inherit; font-size: inherit; line-height: inherit; text-decoration: none; white-space: nowrap; 
		background-color: transparent; padding: 0px; margin: 4px; border-radius:42px; pointer-events:all; font-size:1rem; line-height: 1.2em; }
	a * { pointer-events: none;}
	a > i { display: inline-block; vertical-align: middle; width: 34px; height:34px; position: relative; z-index: 2; padding: 8px; margin: 4px; border-radius:50%; font-weight: 400;}
	a > i > * { display:block; max-width:100%; max-height:100%;}
	a > span {display: inline-block; vertical-align: middle; padding: 4px 8px; position: relative; z-index: 2; white-space: normal; font-weight:700;}
	a > span small { display:block; font-weight:400; white-space: normal; max-width: 100%; font-size:0.8em; line-height: 1em; margin-top:4px;}
	a > label {
		-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;  
		display: inline-block; padding: 6px 8px; 
		background-color: var(--black); color:var(--white); 
		position:absolute; z-index:3; bottom:calc(100% - 4px); left:50%; opacity: 0; transform: translate(-50%,8px); 
		transition: opacity 75ms linear, transform 175ms ease-in-out; font-size: 12px; line-height: 12px; border-radius: 4px; 
		}
	a > b { display: inline-block; vertical-align: middle; width: 34px; height:34px; position: relative; z-index: 2; padding: 8px; margin: 4px; border-radius:50%; font-weight: 400;}
	a > u { display:block; position: absolute; z-index: 0; left:0px; top:0px; bottom:0px; width:100%; height:100%; background-color: transparent; opacity: 1; transition: opacity 75ms linear, width 125ms ease-in-out; overflow: hidden; border-radius:56px;  }
	a > u::after { content:''; display:block; background-color: var(--white); opacity: 0; width:0px; height:100%; transition: opacity 75ms linear, width 125ms ease-in-out;}
	a > i + span { padding-left: 0px; padding-right: 12px; transform: translateX(-4px); max-width:calc(100% - 42px); white-space: nowrap;}
	a:focus { outline: none;}
	a:focus > u::after { width: 100%; opacity: 1;}
	a:hover {cursor: pointer;}
	a:hover > label { opacity: 1; transform: translate(-50%,0); }
	a:hover > u::after { width: 100%; opacity: 1;}

/* UL & OL */
	ul { list-style: none; padding:0px; margin: 0px; font-size:inherit; line-height: inherit;}
	ul > li { display:inline-block; vertical-align: top;}

/* BUTTON */
	button {
		-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; 
		display:inline-block; position: relative; color: inherit; background-color: transparent; border:none; font-family:inherit; font-size: inherit; font-weight: 500; 
		padding: 0px; margin: 4px; border-radius:40px; white-space: nowrap; font-size:1rem; line-height: 1.2em;}
	button * { pointer-events: none;}
	button > i {display: inline-block; vertical-align: middle; width: 34px; height:34px; position: relative; z-index: 2; padding: 8px; margin: 4px; border-radius:50%; font-weight: 400;}
	button > i > * { display:block; max-width:100%; max-height:100%;}
	button > span {display: inline-block; vertical-align: middle; padding: 4px 8px; position: relative; z-index: 2; white-space: normal; font-weight:700;}
	button > label { 
		-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
		display: inline-block; padding: 6px 8px; 
		background-color: var(--black); color:var(--white); 
		position:absolute; z-index:3; bottom:calc(100% - 4px); left:50%; opacity: 0; transform: translate(-50%,8px); 
		transition: opacity 75ms linear, transform 175ms ease-in-out; font-size: 12px; line-height: 12px; border-radius: 4px;}
	button > b {}
	button > u { display:block; position: absolute; z-index: 0; left:0px; top:0px; bottom:0px; width:100%; height:100%; background-color: transparent; opacity: 1; overflow: hidden; border-radius:56px; }
	button > u::after { content:''; display:block; background-color: var(--white); opacity: 0; width:0px; height:100%; transition: opacity 75ms linear, width 125ms ease-in-out; }
	button > i + span { padding-left: 0px; padding-right: 12px; transform: translateX(-4px);}
	button:focus { outline: none;}
	button:focus > u::after { width: 100%; opacity: 1;}
	button:hover { cursor: pointer;}
	button:hover > label { opacity: 1; transform: translate(-50%,0); }
	button:hover > u::after { opacity: 1; width: 100%;}
	
/* NAV */
	nav { position: relative;}
	nav > ul { list-style: none; padding: 0px; margin: 0px;}
	nav > ul > li { display: inline-block;}
	nav > button { position: relative;}
	nav > button > i {}
	nav > button > span {}
	nav > button + ul {display:block; position: absolute; top:100%; right:0px; padding: 0px; margin: 0px; opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity 75ms linear, transform 125ms ease-in-out; pointer-events: none;}
	nav > button + ul > li { display: block;}
  nav > button + ul > li > a { pointer-events: none;}
	nav > button.-trigger-show + ul {opacity: 1; transform: none; pointer-events: all;}
	nav > button.-trigger-show > i { }
	nav > button.-trigger-show > u::after { width: 100%; opacity: 1;}
	nav > button.-trigger-show + ul { opacity: 1; transform: none; pointer-events: all;}
  nav > button.-trigger-show + ul > li > a { pointer-events: all;}

/* FIGURE */
	figure { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; margin: 0px; padding: 0px; position: relative;}
	figure > picture { 
		display:block; position: relative; vertical-align: bottom;
		height:100%; min-height:100%; max-height: 100%;
		width:100%; min-width:100%; max-width: 100%;
	}
	figure > picture > * {
		display: block;
		-webkit-object-fit: cover;
		-moz-object-fit: cover;
		-o-object-fit: cover;
		object-fit: cover;
		background-size: cover;
		-webkit-object-position: center center;
		-moz-object-position: center center;
		-o-object-position: center center;
		object-position: center center;
		background-position: center center;
		height:100%; min-height:100%; max-height: 100%;
		width:100%; min-width:100%; max-width: 100%;
		max-height: inherit; vertical-align: bottom;
	}
	
/* DIALOG */
  dialog {
		/* Reset global button markup */
		-webkit-appearance: none; 
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none; 
		appearance: none;
		/* Remove border radius default for all devices */
		-webkit-border-radius: 0px; 
		-moz-border-radius: 0px;
		-ms-border-radius: 0px;
		-o-border-radius: 0px;
		border-radius: 0px;
		/* Remove text shadow default for all devices */
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		box-shadow: none;
		/* Default bounding box behaviour (include padding in width) */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		display:block; border:none; margin: 0px; padding: 0px; opacity:0; pointer-events: none; overflow: visible; background-color: transparent;
		position:fixed; z-index: 999; max-width:100vw; max-height: 100vh; overflow: visible;
		left:50%; top:50%; width:max-content; height:max-content; transform:translate(-50%, calc(-50% + .5px)) translateZ(0); transition: opacity 75ms linear 0ms;
  }
	dialog::after { content:''; display:block; width:100vw; height:100vh; position: fixed; z-index: 998; left:50%; top:50%; transform:translate(-50%,-50%); background-color: rgba(0,0,0,0.8);}
	dialog a, dialog button { pointer-events:none!important;}
	dialog > header { position: relative; max-width:100vw; max-height: 100vh; height:56px; padding:0px; margin:0px; z-index: 999; color:#fff; text-align: right; }
	dialog > section { position: relative; max-width:100vw; max-height: calc(100vh - 56px - 56px); max-width:calc(100vw - 32px); overflow: hidden; overflow-y: auto; padding:0px; margin:0px; z-index: 999; opacity:0; transform: translate(0,32px) translateZ(0); transition: opacity 75ms linear 175ms, transform 175ms ease-in-out 175ms; }
	dialog > footer { position: relative; max-width:100vw; max-height: 100vh; height:56px; padding:0px; margin:0px; z-index: 999; color:#fff; text-align: center; }
  dialog[open] { opacity: 1; pointer-events: all; }
	dialog[open] a, dialog[open] button { pointer-events:all!important; z-index: 999;}
	dialog[open] > section[role="presentation"] { opacity: 1; transform: none; }
	
/* ROWS */
  [class*="-rows"] {
		-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
		-webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
		-webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none;
		-webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px;
		display:block; z-index: 0; max-width:100%; text-align: inherit; padding: 0px; margin: 0px;
		
		display: -webkit-inline-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;
		-webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;
		-webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; -o-flex-grow: 1; flex-grow: 1;
		-webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-shrink: 0; -o-flex-shrink: 0; flex-shrink: 0;
		-webkit-flex-basis:64px; -moz-flex-basis: 64px; -ms-flex-basis: 64px; -o-flex-basis: 64px; flex-basis: 64px;
		align-items: center; align-content: center; justify-content: center;
		}
	[class*="-rows"] > *:not([class*="-rows"]):not([class*="-columns"]):not([class*="-grid"]):not(link):not(style):not(script):not(template):not(anchor) { display: block; width: 100%; min-width: 100%; max-width: 100%; padding: 0px; margin: 0px; height:auto; }
	[class*="-rows"] > *.-rows { flex-basis: auto!important; min-width: 100%;}
	[class*="-rows"] > *.-columns {  flex-basis: auto!important; min-width: 100%; }
	@media screen and (min-width: 512px) {
		/* small screen landscape */
	}
	@media screen and (min-width: 768px) {
		/* medium screen portrait */
	}
	@media screen and (min-width: 1024px) {
		/* medium screen landscape */
	}
	@media screen and (min-width: 1280px) {
		/* large screen laptop */
	}
	@media screen and (min-width: 1536px) {
		/* large screen desktop */
	}
	
/* COLUMNS */
  [class*="-columns"] {
		-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
		-webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
		-webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none;
		-webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px;
		display:block; z-index: 0; max-width:100%; text-align: inherit; padding: 0px; margin: 0px;
		
		display: -webkit-inline-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;
		-webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;
		-webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; -o-flex-grow: 1; flex-grow: 1;
		-webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-shrink: 0; -o-flex-shrink: 0; flex-shrink: 0;
		-webkit-flex-basis:64px; -moz-flex-basis: 64px; -ms-flex-basis: 64px; -o-flex-basis: 64px; flex-basis: 64px;
		align-items: center; align-content: center; justify-content: center;
		}
	[class*="-columns"] > *:not([class*="-rows"]):not([class*="-columns"]):not([class*="-grid"]):not(link):not(style):not(script):not(template):not(anchor) { display: block; padding: 0px; margin: 0px; flex-grow: 1; flex-basis: 32px;}
  [class*="-columns"].-stretch {align-items:stretch!important; }
  @media screen and (min-width: 512px) {
		/* small screen landscape */
	[class*="-columns"] {-webkit-flex-basis:128px; -moz-flex-basis: 128px; -ms-flex-basis: 128px; -o-flex-basis: 128px; flex-basis: 128px;}
		[class*="-columns"] > *:not([class*="-grid"]):not([class*="-rows"]):not([class*="-columns"]):not(link):not(style):not(script):not(template):not(anchor) {
			-webkit-flex-basis:128px; -moz-flex-basis: 128px; -ms-flex-basis: 128px; -o-flex-basis: 128px; flex-basis: 128px; flex-grow: 1;
		}
	}
	@media screen and (min-width: 768px) {
		/* medium screen portrait */
	[class*="-columns"] {-webkit-flex-basis:256px; -moz-flex-basis: 256px; -ms-flex-basis: 256px; -o-flex-basis: 256px; flex-basis: 256px;}
		[class*="-columns"] > *:not([class*="-grid"]):not([class*="-rows"]):not([class*="-columns"]):not(link):not(style):not(script):not(template):not(anchor) {
			-webkit-flex-basis:256px; -moz-flex-basis: 256px; -ms-flex-basis: 256px; -o-flex-basis: 256px; flex-basis: 256px; flex-grow: 0;
		}
	}
	@media screen and (min-width: 1024px) {
		/* medium screen landscape */
	}
	@media screen and (min-width: 1280px) {
		/* large screen laptop */
	}
	@media screen and (min-width: 1536px) {
		/* large screen desktop */
	}
	
/* GRID */
  [class*="-grid"] { display: grid; grid-column-gap: 8px; grid-row-gap: 8px; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); margin:0px; padding: 0px; }
	[class*="-grid"] > *:not([class*="-rows"]):not([class*="-columns"]):not([class*="-grid"]):not(link):not(style):not(script):not(template):not(anchor) { min-width: 224px;}
	[class*="-grid"].-small { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
	[class*="-grid"].-small > *:not([class*="-rows"]):not([class*="-columns"]):not([class*="-grid"]):not(link):not(style):not(script):not(template):not(anchor) { min-width: 128px;}
	[class*="-grid"].-stretch > *:not([class*="-rows"]):not([class*="-columns"]):not([class*="-grid"]):not(link):not(style):not(script):not(template):not(anchor) > * { height:100%;}
	
	[class*="-grid"].-highlight > *:first-child > details,
	[class*="-grid"].-highlight > *:first-child > details > article,
	[class*="-grid"].-highlight > *:last-child > details,
	[class*="-grid"].-highlight > *:last-child > details > article { height:100%!important;}
	[class*="-grid"].-highlight > *:first-child > article > figure img { max-height: none;}
	[class*="-grid"].-highlight > *:first-child h3 { font-size: 24px; line-height: 1.2em;}
	[class*="-grid"].-highlight > *:first-child p { display: block;}
	@media screen and (min-width: 768px) {
		[class*="-grid"].-highlight > *:first-child {
			grid-column: span 2; 
		}
	}
  @media screen and (min-width: 768px) {
		/* medium screen portrait */
	}
	@media screen and (min-width: 1024px) {
		/* medium screen landscape */
	}
	@media screen and (min-width: 1280px) {
		/* large screen laptop */
	}
	@media screen and (min-width: 1536px) {
		/* large screen desktop */
  }