@font-face{font-display:swap;src:url("/fonts/Roboto-Light.ttf");font-family:"Roboto-Light";}
@font-face{font-display:swap;src:url("/fonts/Roboto-Regular.ttf");font-family:"Roboto-Regular";}
@font-face{font-display:swap;src:url("/fonts/Roboto-Bold.ttf");font-family:"Roboto-Bold";}
@font-face{font-display:swap;src:url("/fonts/Roboto-Medium.ttf");font-family:"Roboto-Medium";}
@font-face{font-display:swap;src:url("/fonts/Roboto-LightItalic.ttf");font-family:"Roboto-LightItalic";}
@font-face{font-display:swap;src:url("/fonts/Montserrat-Regular.otf");font-family:"Montserrat";}
@font-face{font-display:swap;src:url("/fonts/Montserrat-ExtraLight.otf");font-family:"Montserrat";font-weight:100;}
@font-face{font-display:swap;src:url("/fonts/Montserrat-Light.otf");font-family:"Montserrat";font-weight:200;}
@font-face{font-display:swap;src:url("/fonts/Montserrat-Regular.otf");font-family:"Montserrat";font-weight:300;}
@font-face{font-display:swap;src:url("/fonts/Montserrat-Medium.otf");font-family:"Montserrat";font-weight:400;}
@font-face{font-display:swap;src:url("/fonts/Montserrat-SemiBold.otf");font-family:"Montserrat";font-weight:500;}
@font-face{font-display:swap;src:url("/fonts/Montserrat-Bold.otf");font-family:"Montserrat";font-weight:700;}
@font-face{font-display:swap;src:url("/fonts/Montserrat-Black.otf");font-family:"Montserrat";font-weight:900;}
@font-face{font-weight:normal;font-style:normal;font-family:'FontAwesome';src:url('/fonts/fontawesome-webfont.eot?v=4.6.3');src:url('/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg')}

:root {
	--primary: #505050;
	--primary-darker: #303030;
	--primary-selected: #101010;
	--primary-light: #b4b4b4;
	--primary-lighter: #edecec;

	--secondary: #4dc4c0;
	--secondary-complement: #fefefe;
}

html,body {
	margin:0;
	padding:0;
	font-size:16px;
	font-family:"Roboto-Light", "Arial";
	font-weight:100;
	color:var(--primary);
	line-height:24px;
}

h1,h2,h3,h4,h5,h6,ul,ol,li,p{margin:0;padding:0;}

a {
	color:var(--primary-darker);
	text-decoration:none;
}
a:hover {
	color:var(--primary-selected);
	text-decoration:underline;
}



main {
	padding:20px 0;
}

main article {
	max-width:1280px;
	margin:0 auto;
}

.header section,
.sub-header section,
.footer section {
	max-width:1280px;
	margin:0 auto;
}

.header {
	background:var(--secondary);
	padding:20px 0;
	color:var(--secondary-complement);
}
.header section {
	display:flex;
	justify-content:space-between;
}
.header nav {
	display:flex;
	align-items:stretch;
}
.header a {
	color:var(--secondary-complement);
	font-size:14px;
	text-transform:uppercase;
	text-align:center;
	padding:0 12px;
}
.header a:hover {
	color:var(--secondary-complement);
}
.account-menu ul {
	display:none;
}

.footer{padding:20px 0;}
.flexed nav {display:inline-block;width:33.33%;vertical-align:top;}
.footer a {font-size:14px;font-weight:300;display:table;text-decoration:none;color:var(--primary-selected);padding:2px 0;position:relative;-webkit-transition:ease-out 0.3s;-webkit-transition-delay:0.1s;transition:ease-out 0.3s 0.1s;}
.footer a::before {height:1px;width:100%;background:var(--secondary);content:"";position:absolute;left:0px;bottom:0;transform:scaleX(0);transition:0.3s;}
.footer a:hover::before {transform:scaleX(1);}
.footer a::after{content:"";display:block;clear:both;}
.footer h2 {font-weight:100;padding-bottom:15px;color:var(--secondary);font-family:Roboto-Light;}

.footer-nav {
	padding:20px 0;
	display:flex;
	justify-content:center;
}
.footer-nav a {
	padding:0 10px;
	color:var(--primary);
	position:relative;
}
.footer-nav a:after {
	content:"•";
	position:absolute;
	right:-2px;
	top:0px;
	color:var(--primary);
	font-size:10px;
}
.footer-nav a:last-child:after {
	content:"";
}
.connect {
	background:var(--secondary);
	padding:20px 0;
	text-align:center;
}
.copyright {
	font-size:0.8em;
	text-align:center;
	padding:20px 0;
}

.flexed {display:flex;justify-content: space-between;}
.ingredient-category{padding:20px 10px;}
.ingredient-category h4{padding-top:20px;}
.filtering-ingredients a {display:inline-block;padding:4px;}
.filtering-ingredients {padding:10px 0;}