@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
/* @-ms-viewport{width:device-width} */
@-o-viewport{width:device-width}
@viewport{width:device-width}

/* 
Nobel Light: font-weight: 200;
Nobel Book: font-weight: 300;
Nobel Regular: font-weight: 400;
Nobel Bold: font-weight: 700;
Brandon Grotesque Light: font-weight: 300;
Brandon Grotesque Regular: font-weight: 400;
Brandon Grotesque Medium: font-weight: 500;
Brandon Grotesque Bold: font-weight: 700; 
Brandon Grotesque Black: font-weight: 900; 
*/

:root {
	/* fonts */
	--nobel-font: "nobel", sans-serif;
	--brandon-font: "brandon-grotesque", sans-serif;
	/* colors */
	--green: rgba(44, 113, 79, 1);
	--green-2: rgba(30, 134, 73, 1);
	--light-green: rgba(136, 195, 110, 1);
	--med-green: rgba(113, 167, 78, 1);
	--filters-green: rgba(115, 168, 78, 1);
	--gold: rgba(223, 141, 19, 1);
	--white: rgba(255, 255, 255, 1);
	--black: rgba(0, 0, 0, 1);
	--grey: rgba(87, 87, 87, 1);
    --light-grey: rgba(175, 175, 175, 1);
	--soft-grey: rgba(243, 243, 243, 1);
    --soft-white: rgba(217, 217, 217, 1);
	--header-color: rgba(63, 63, 64, 1);
	--streetsense: rgba(254, 245, 219, 1);
	--grey-o-45: rgba(87, 87, 87, 0.45);
	--light-grey-o-50: rgba(175, 175, 175, .5);
	/* state colors */
	--error: rgba(218, 86, 59, 1);
	--warning: rgba(253, 215, 59, 1);
	--success: rgba(6, 194, 112, 1);
	/* font styles */
	--body-desktop: 400 2em / 1.4em var(--nobel-font);
	--enphasis: 500 2em / 1.6em var(--brandon-font);
	--enphasis-desktop: 200 2.4em / 1.4em var(--nobel-font);
	--header: 700 3em / 1.2em var(--nobel-font);
	--header-desktop: 700 3.3em / 1.085em var(--nobel-font);
	--header-letterspacing: .15em;
	--tag: 700 1.4em / 1.2em var(--nobel-font);
	--tag-letterspacing: .17em;
    /* Animations */
    --fade: fade 1.5s forwards;
	--fadeUp-long: fadeUp 1.5s forwards;
	--fadeUp: fadeUp 0.9s forwards;

	--leaf-left: leaf-fade-up-left 1.5s forwards;
	--leaf-right: leaf-fade-up-right 1.5s forwards;
	--leaf-down-left: leaf-fade-down-left 1.5s forwards;
	--leaf-down-right: leaf-fade-down-right 1.5s forwards;

	--dashLine: dash 1.5s linear forwards;

	--delay: 0.25s;
	--delay-short: 0.125s;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
main, article, aside, figure, footer, header, nav, section, details, summary, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
  	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
sup { font-size: .6em; line-height: 1em; vertical-align: super; }
sub { font-size: .6em; line-height: 1em; vertical-align: sub; }

main, article, aside, figure, footer, header, nav, section, details, summary, figcaption {
	display: block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

textarea,
select,
input,
option,
button {
	background: none;
	font-family: var(--nobel-font);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 4px;
	border: none;
	padding: 0;
}
select::-ms-expand,
::-ms-clear { display: none; } /* X en campos */

html { 
	color: var(--black);
  	font: 62.5% var(--nobel-font);
	line-height: 1;
	margin: 0px;
	padding: 0px;
	-webkit-font-smoothing: antialiased;
}
ol, ul { list-style: none; }
ol li { list-style: decimal inside none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
*::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* remember to define focus styles! */
:focus { outline: 0; border: 0px none; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: var(--green); display: inline-block; }
* { -webkit-tap-highlight-color: transparent; }


@media only screen
and (min-width : 961px)
and (max-width : 1727px) {
  html { font-size: calc(5px + (10 - 5) * ((100vw - 961px) / (1727 - 961))); }
}
@media only screen
and (min-width : 0)
and (max-width : 429px) {
  html { font-size: calc(7px + (10 - 7) * ((100vw - 300px) / (429 - 300))); }
}