/* This stylesheet is divided into sections as defined by SMACSS. http://smacss.com/ */

/** || Load WebFonts **/

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Open Sans Light'), local('OpenSans-Light'), url(/fonts/OpenSans-Light.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans'), local('OpenSans-Regular'), url(/fonts/OpenSans-Regular.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/** || Base Rules **/

html {
	scroll-behavior: smooth;
}

* {
	-ms-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	font-family: "Open Sans",sans-serif;
	font-size: 12pt;
	line-height: 1.15;
	margin: 0;
}

td, th, input, select, textarea, button {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}

main {
	display: block;
	position: relative;
}

form {
	margin: 0 0 1em 0;
}

template {
	display: none;
}

summary {
	cursor: pointer;
	text-decoration: dotted underline;
}

nav,
summary {
	user-select: none;
}

iframe {
	border: 0;
}

h1 {
	font-size: 140%;
	text-wrap: balance;
}

h2 {
	font-size: 120%;
	text-wrap: balance;
	clear: both;
}

h3 {
	font-size: 100%;
}

p {
	line-height: 1.4;
	margin: 0 0 1.4em 0;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

blockquote::before {
	content: open-quote;
}

blockquote::after {
	content: close-quote;
}

dt::after {
	content: ":";
}

dd {
	margin: 0 0 0 2em;
}

ol {
	margin: 1em 0;
	padding: 0 0 0 2em;
}

ul {
	margin: 1em 0;
	padding: 0 0 0 1.2em;
}

li {
	margin: 0.2em 0;
}

hr {
	height: 1px;
	color: #ccc;
	background-color: #ccc;
	border: 0;
	margin: 2em 0;
}

a:link,
a:visited,
a:active {
	color: currentColor;
}

img {
	max-width: 100%;
	height: auto;
	font-style: italic;
}

a img {
	border: 0;
}

img[onclick] {
	cursor: pointer;
}

button,
[role="button"] {
	position: relative;
	color: #333;
	background-color: #fff;
	display: inline-block;
	padding: 0.7rem 1rem;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-decoration: none;
	-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.175);
	box-shadow: 3px 3px 4px rgba(0,0,0,.175);
	margin: 0;
	line-height: 1;
}

button:hover,
[role="button"]:hover {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="password"],
select {
	background-color: #fff;
	border:1px solid #A0A0A0;
	border-radius: 3px;
	padding: 3px;
	margin: 2px 0;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
	background-color: #efefef;
	border: none;
	cursor: not-allowed;
}

select {
	cursor: pointer;
}

input[type="number"] {
	-moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spinner-button,
input[type="number"]::-webkit-inner-spinner-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="checkbox"] {
	margin: 0 2px 0 0;
	vertical-align: middle;
}

input[type="radio"] {
	margin: 0 2px 3px 0;
	vertical-align: middle;
}

input[type="file"] {
	cursor: pointer;
}

input[type="text"]::-ms-clear {
	display: none;
}

input::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

input[type="text"]::-ms-reveal {
	display: none;
}

input::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

textarea {
	-webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	transition: height 0.2s;
	background-color: #fff;
	border: 1px solid #A0A0A0;
	border-radius: 3px;
	box-sizing: border-box;
	padding: 3px;
	width: 100%;
}

/* Use button tags instead */
input[type="button"],
input[type="submit"] {
	background-color: orange;
}

input[required],
select[required] {
	border-color: #33f;
}

input[required]:invalid,
select[required]:invalid {
	border-color: #f33;
}

progress {
	width: 200px;
}

output {
	margin-left: 1em;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 1em 0;
	width: 100%;
}

th {
	font-weight: bold;
	text-align: left;
	background: white;
	white-space: nowrap;
}

td {
	padding: 0;
}

abbr {
	text-decoration-style: dotted;
}

/** || Layout Rules **/

#container {
	max-width: 960px;
	margin: 10px auto;
	padding-top: 1em;
	padding-bottom: 1em;
}
@media (min-width:960px) {
	#container {
		border-radius: 2em;
		box-shadow: 0 0 10px #010;
		margin: 20px auto;
	}
}

#container > * {
	padding-left: 20px;
	padding-right: 20px;
}

header {
	text-align: center;
}
header h1 {
	font-size: 400%;
	font-weight: normal;
	line-height: normal;
	margin: 1em 0 0 0;
}
header h2 {
	font-size: 200%;
	font-weight: normal;
	line-height: normal;
	margin: 0 0 1em 0;
}

#Curcumin {
	display: block;
	max-width: 250px;
	margin: 0 auto;
}

@media (min-width:630px) {
	#Curcumin {
		float: right;
		width: 30%;
		margin: 0;
	}
}

#Bestil {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em 2em;
}

#Bestil > p img {
	margin-top: 2rem;
	max-width: clamp(200px, 100%, 480px);
}

@media (min-width:770px) {
	main section:first-of-type {
		columns: 2;
		column-gap: 2em;
	}
	#Bestil {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas:
			"headline headline"
			"article1 article2"
			"image article2"
			"empty article2"
		;
		gap: 0 2em;
	}
	#Bestil > h2 {
		grid-area: headline;
	}
	#Bestil > article:nth-of-type(1) {
		grid-area: article1;
	}
	#Bestil > article:nth-of-type(2) {
		grid-area: article2;
	}
	#Bestil > p {
		grid-area: image;
	}
	#Bestil > p img {
		margin-top: 0;
	}
}

#Bestil aside {
	border: 2px solid gold;
	margin-top: calc(1.4rem - 4px);
	margin-bottom: calc(1.4rem - 4px);
	padding: 1.4rem 1rem;
}
#xBestil aside::before {
	content: "!";
	font-size: 3em;
	font-weight: bold;
	float: left;
	padding-right: 1rem;
}
#Bestil aside p:last-of-type {
	margin-bottom: 0;
}

.welcome_quote {
	width: 270px;
	margin: 1em auto;
}

@media (min-width: 520px) {
	.welcome_quote {
		float: right;
		clear: right;
		margin: 0 0 2em 2em;
	}
}

#TenDrops {
	float: right;
	margin: 0 0 1em 1em;
	max-width: 70px;
	shape-outside: polygon(0 0, 0 50%, 45% 100%, 100% 100%, 100% 0);
}

#Bestil article:nth-of-type(2) > *:last-child {
	margin-bottom: 0;
}

main .cta:first-of-type {
	margin-block: 0 1em;
	text-align: right;
}

/** || Module Rules **/

.NutritionFacts {
	border: 2px solid currentColor;
	max-width: 400px;
	width: 100%;
}
.NutritionFacts thead {
	border-bottom: 1px solid currentColor;
}
.NutritionFacts tbody tr:nth-child(even) {
	background-color: #eee;
}
.NutritionFacts td,
.NutritionFacts th {
	padding: 0.2em 0.5em 0.15em;
}
.NutritionFacts td + td {
	text-align: right;
	text-wrap: nowrap;
}
.NutritionFacts tfoot td {
	font-size: 0.8em;
}

.btn-toolbar {
	margin: 1em 0;
}
.btn-toolbar > * + * {
	margin-left: 1em;
}
.btn-group {
	display: inline-block;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.btn-group input[type="radio"] {
	display: none;
}

.btn-group input[type="radio"]:checked + label,
.btn-group [role="button"].selected {
	background-color: #ccc;
	-webkit-box-shadow: inset 2px 2px 2px;
	box-shadow: inset 2px 2px 2px;
	padding: 6px 10px 2px 14px;
}

.btn-group [role="button"]:not(:first-child):not(:last-child),
.btn-group button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
	border-radius: 0;
}

.btn-group [role="button"]:first-child:not(:last-child),
.btn-group button:first-child:not(:last-child):not(.dropdown-toggle) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.btn-group [role="button"]:last-child:not(:first-child),
.btn-group button:last-child:not(:first-child),
.btn-group button.dropdown-toggle:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn-group [role="button"] + [role="button"],
.btn-group button + button {
	margin-left: -1px;
}

.btn-group [role="button"]:active,
.btn-group [role="button"]:focus,
.btn-group button:active,
.btn-group button:focus {
	outline: 0;
}

.caret {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: middle;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

button.open .caret {
	border-top: 0;
	border-bottom: 4px dashed;
}

button.open {
	background-color: #ccc;
}

/** || State Rules **/


/** || Theme Rules **/

body {
	background-color: #f9880f;
}

#container {
	background-color: #fff;
}
header {
	color: #f9880f;
}


button.primary,
[role="button"].primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}
button.success,
[role="button"].success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
}
button.info,
[role="button"].info {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}
button.warning,
[role="button"].warning {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #eea236;
}
button.danger,
[role="button"].danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}

/** || Print Rules **/

@media print {
	aside,
	nav,
	button,
	[role="button"],
	.btn-group {
		display: none;
	}

	h1, h2, h3 {
		page-break-after: avoid;
	}

	img, p {
		page-break-inside: avoid;
	}

	a:link,
	a:visited {
		color: inherit;
		text-decoration: none;
	}

	input:not(:invalid),
	textarea:not(:invalid),
	select:not(:invalid) {
		border: 0;
		padding: 0;
	}

	textarea {
		height: auto;
	}

	section {
		border: 0 none;
		page-break-inside: avoid;
	}
}