:root, .theme-dark, .theme-light {
	--page-width: 1200px;
	--page-padding: 2em;

	--primary: #e22672;
	--primary-light: #f0307d;
	--primary-dark: #cf286b;

	/* gray scales */
	--gray-0: #fff;
	--gray-10: #f7fafb;
	--gray-20: #f3f6f7;
	--gray-30: #e3e8e8;
	--gray-40: #d9e0e4;
	--gray-50: #bcc9cc;
	--gray-60: #a9b4b7;
	--gray-70: #8ba0a5;
	--gray-80: #94A5A8;
	--gray-90: #3b5356;
	--gray-100: #2d3a3c;

	/* special colors */
	--border: /*#e4ebee; */ #dde6ea;
	--shadow: rgba(3, 30, 34, 0.07);

	/* LCH TEST */
	/*
	--kk-h: 220;
	--kk-c: 0.7;
	--gray-0: lch(100 calc(0 * var(--kk-c)) var(--kk-h));
	--gray-10: lch(98 calc(1 * var(--kk-c)) var(--kk-h));
	--gray-20: lch(96 calc(2 * var(--kk-c)) var(--kk-h));
	--gray-30: lch(92 calc(3 * var(--kk-c)) var(--kk-h));
	--gray-40: lch(88 calc(4 * var(--kk-c)) var(--kk-h));
	--gray-50: lch(80 calc(5 * var(--kk-c)) var(--kk-h));
	--gray-60: lch(72 calc(6 * var(--kk-c)) var(--kk-h));
	--gray-70: lch(64 calc(7 * var(--kk-c)) var(--kk-h));
	--gray-80: lch(66 calc(8 * var(--kk-c)) var(--kk-h));
	--gray-90: lch(33 calc(9 * var(--kk-c)) var(--kk-h));
	--gray-100: lch(23 calc(10 * var(--kk-c)) var(--kk-h));
	--border: lch(90 calc(3 * var(--kk-c)) var(--kk-h));
*/


	--frame: var(--gray-20);
	--frame-dark: var(--gray-80);
	--frame-outline: var(--page);
	--frame-light: var(--gray-10);
	--frame-border: 1px;
	--frame-shadow: none; /*0 0.1em 0.9em var(--shadow);*/

	--text: var(--gray-90);
	--dimmer: rgba(15, 36, 36, 0.08);
	--modal-backdrop: rgba(219, 226, 227, 0.86);
	--page: var(--gray-0);
	--input: var(--gray-0);
	--popover: var(--gray-0);
	--modal: var(--gray-0);

	--gray-lightest: var(--gray-10);
	--gray-light: var(--gray-20);
	--gray-medium: var(--gray-40);
	--gray-dark: var(--gray-90);

	/* stylings */
	--gradient-offset-x: 0deg;
	--gradient-offset-y: 0deg;
	--frame-radius: 8px;
	--input-radius: 4px;
	--btn-radius: 4px;
	--popover-radius: 4px;
	--badge-radius: 3px;
	--modal-radius: 8px;
	--pre-radius: 4px;
	--frame-nested-radius: 4px;
	--box-radius: 4px;

	/* other stuff */
	--article-image-filter: none;

	color: var(--text);
}

/* DARK THEME */
.theme-dark {
	--gradient-offset-x: 180deg;
	--gradient-offset-y: 180deg;
	--primary-dark: #f06ca1;
	--primary-light: #da5e8f;
	--primary: #e46498;
	--gray-100: #f7fafb;
	--gray-90: #d1dee1;
	--gray-80: #acbbbb;
	--gray-70: #95a6a8;
	--gray-60: #526468;
	--gray-50: #526468;
	--gray-40: #435255;
	--gray-30: #2F3C3E;
	--gray-20: #2e3b3c;
	--gray-10: #293637;
	--gray-0: #263233;
	--border: #b1ebf512;
	--shadow: rgba(0, 0, 0, 0.11);
	--dimmer: rgba(12, 17, 17, 0.36);
	--modal-backdrop: rgba(27, 39, 40, 0.86);
	--article-image-filter: contrast(60%) brightness(125%);
	--frame: var(--gray-10);
	--frame-outline: var(--gray-20);
	--frame-light: var(--gray-30);
	--gray-light: var(--gray-10);
}

::-moz-selection { background:var(--primary); color: var(--gray-0); text-shadow: none; }
::selection { background: var(--primary); color: var(--gray-0); text-shadow: none; }

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	padding: 0 1px;
}
 
::-webkit-scrollbar-track {
	background: var(--gray-40);
}

::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background: var(--gray-60);
}

::-webkit-scrollbar-thumb:hover{
	background: var(--primary);
}

::-webkit-input-placeholder {
	color: var(--gray);
}

:-moz-placeholder { /* Firefox 18- */
	color: var(--gray-60);
}

::-moz-placeholder {  /* Firefox 19+ */
	color: var(--gray-60);
}

:-ms-input-placeholder {  
	color: var(--gray-60);
}

*{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/*-webkit-backface-visibility: hidden;*/
}

html{
	-webkit-font-smoothing: antialiased;
	scrollbar-face-color: var(--gray-70);
	scrollbar-track-color: var(--gray-40);
	image-rendering: -webkit-optimize-contrast;
	background: var(--page);
}

body{
	-webkit-text-size-adjust:none;
	text-rendering: optimizeLegibility;
	background: var(--page);
}

body, 
.reset-font{
	text-shadow: none;
	color: var(--text);
	line-height: 1.5;
	font-weight: normal;
	font-size: 19px;
	/* automatic font size based on screen width: 14px min, 19px max, 1200px page width is 100% = 19px */
	font-size: max(14px, calc(19 * min(100vw, 1200px) / 1200));
	letter-spacing: normal;
	font-family: "Delicious", "Arial", sans-serif;
}

.clearall {
	-webkit-backface-visibility: visible;
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{
	font-weight: 800;
	padding: 0;
	/*color: var(--gray-dark);*/
	font-style: normal;
	font-family: "Delicious", "Open Sans", "Arial", sans-serif;
}

p{
	margin: 0.5em 0;
}

code {
	font-family: "Roboto Mono", "Inconsolata", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

#page{
	/*min-width: 980px;*/
	position: relative;
	overflow: hidden;
	background: var(--page);
}

#page-shadow{
	position: absolute;
	content: "";
	margin-top: 0;
	height: 40px;
	left: 0;
	width: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.29), rgba(0,0,0,0));
}

#page_wrapper{
	min-height: 90vh;
}

#content{
	padding: 0;
}

#content>h1, 
#contentmid>h1,
#kk-dropper-content-zone>h1,
*.page-title, 
*.center-heading {
	overflow: hidden;
	text-align: center;
	display: block;
	line-height: normal;
	margin: 1em 0;
}

#content>h1:before, 
#contentmid>h1:before,
#kk-dropper-content-zone>h1:before,
*.page-title:before, 
*.center-heading:before,
#content>h1:after, 
#contentmid>h1:after,
#kk-dropper-content-zone>h1:after,
*.page-title:after, 
*.center-heading:after
{
	background-color: var(--border);
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;
}

#content>h1:before, 
#contentmid>h1:before,
#kk-dropper-content-zone>h1:before,
*.page-title:before, 
*.center-heading:before {
	right: 0.5em;
	margin-left: -50%;
}

#content>h1:after, 
#contentmid>h1:after,
#kk-dropper-content-zone>h1:after,
*.page-title:after, 
*.center-heading:after {
	left: 0.5em;
	margin-right: -50%;
}

#content>h1, 
#contentmid>h1,
#kk-dropper-content-zone>h1,
*.page-title{
	/*color: var(--primary);*/
	font-size: 3.3em;
	letter-spacing: -.03em;
	margin: 0.5em 0;
	text-transform: uppercase;
}

*.center-heading-2,
*.feature-heading
{
	text-align: center;
	display: block;
	line-height: normal;
	text-transform: uppercase;
	margin: 1em 0;
}

*.center-heading-2 small,
*.feature-heading small{
	display: block;
	font-weight: normal;
	text-transform: none;
	font-size: 0.525em;
	margin: 0.5em 0;
	letter-spacing: 0;
	opacity: 0.7;
	line-height: 1.4;
}

*.center-heading-2:after,
*.feature-heading:after{
	content: "";
	display: block;
	margin: 0 auto;
	width: 65px;
	height: 1px;
	background: var(--border);
	margin-top: 0.75em;
}

.feature-heading.feature-heading-simple:after{
	display: none;
}

a{
	color: inherit;
}

a, 
a:visited, 
a:link
{
	/*transition: color 100ms ease-out;*/
	cursor: pointer;
	text-decoration: none;
}

a:hover{
	color: var(--primary);
}

strong, b, .strong{
	font-weight: 600;
}

.hidden{
	display: none !important;
}

table{
	line-height: normal;
}

table tr td{
	padding: 0.5em;
}

body *.center-page,
#page_wrapper{
	width: var(--page-width);
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--page-padding);
	display: block;
	float: none;
	position: relative;
}

body *.center-page:after,
#page_wrapper:after{
	content: "";
	display: block;
	clear: both;
}

.fa{
	margin-right: 3px;
}

.faded{
	opacity: 0.8;
}

.serif{
	font-family: TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif;
}

.relative{
	position: relative;
}

.toggle-popover{
	position: relative;
}

.toggle-popover .popover{
	position: absolute;
	bottom: 100%;
	margin-bottom: 10px;
	left: -10px;
	background: var(--popover);
	border-radius: var(--popover-radius);
	box-shadow: 0 1px 3px var(--shadow);
	border: 1px solid var(--border);
	color: var(--text);
	opacity: 0;
	visibility: collapse;
	text-align: left;
	font-weight: 500;
	line-height: normal;
	text-shadow: none;
	display: block;
	white-space: normal;
	padding: 1em;
	font-size: 15px;
	right: auto;
	width: auto;
	min-width: 150px;
	z-index: 10;
	cursor: default;
	-webkit-backface-visibility: hidden;
	transition: opacity 100ms 200ms, visibility 0ms 300ms;
	--frame-radius: var(--frame-nested-radius);
}

.toggle-popover:hover .popover,
.toggle-popover.click-toggle.active .popover{
	opacity: 1;
	visibility: visible;
	transition: opacity 300ms 200ms, visibility 0ms 300ms;
}

.toggle-popover.click-toggle.active .popover{
	transition: opacity 100ms;
}

.toggle-popover.click-toggle:hover .popover{
	opacity: 0;
	visibility: hidden;
}

.toggle-popover.click-toggle .popover{
	transition: opacity 100ms;
}

.toggle-popover.click-toggle:hover.active .popover{
	opacity: 1;
	visibility: visible;
}

.toggle-popover .popover:before,
.toggle-popover .popover:after,
.toggle-popover .popover-arrow:before,
.toggle-popover .popover-arrow:after{
	content: "";
	position: absolute;
	border: 7px solid rgba(0, 0, 0, 0);
	border-top-color: var(--gray-0);
	left: 10px;
	bottom: -13px;
}

.toggle-popover .popover:before,
.toggle-popover .popover-arrow:before{
	bottom: -14px;
	border-top-color: var(--border);
}

.toggle-popover .popover > *:first-child{
	margin-top: 0 !important;
}

.popover .body{
	display: table-cell;
	vertical-align: middle;
	padding: 1em;
	white-space: normal;
	text-align: left;
	border-radius: var(--popover-radius);
	overflow: hidden;
}

.popover.popover-bottom{
	top: 100%;
	bottom: auto;
	margin-top: 10px;
	margin-bottom: 0;
}

.popover.popover-bottom:before,
.popover.popover-bottom:after{
	top: -13px;
	bottom: auto;
	border-color: transparent;
	border-bottom-color: var(--gray-0);
}

.popover.popover-bottom:before{
	top: -14px;
	border-bottom-color: var(--border);
}

.popover.popover-right{
	right: -10px;
	left: auto;
}

.popover.popover-right:before,
.popover.popover-right:after{
	left: auto;
	right: 10px;
}

.toggle-dimmer + .dimmer{
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	opacity: 0;
	width: 0;
	height: 0;
	background: var(--dimmer);
	z-index: 9;
	visibility: hidden;
	transition: opacity 400ms, width 0ms 400ms, height 0ms 400ms, visibility 0ms 400ms;
}

.toggle-dimmer.active + .dimmer{
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	transition: opacity 400ms;
}

.toggle-dimmer.active{
	position: relative;
	z-index: 10;
}

/*********************
 HEADER Styling
**********************/
#header_wrapper {
	width: 100%;
	top: 0;
	z-index: 0;
}

.header-minimal #header_wrapper{
	padding-bottom: 1em;
}

#header{
	position: relative;
	z-index: 2;
	height: auto;
}

#header .nav{
	float: right;
	margin-top: -1px;
}

#header .nav > li{
	display: inline-block;
	margin-left: 1em;
}

#header .nav > li > a{
	display: inline-block;
	padding: 1.5em 0 1em 0;
}

#header .nav > li.menu-item-active > a{
	background: var(--primary);
	padding: 1.5em 1em 1em 1em;
	color: var(--gray-0);
	border-radius: 0 0 8px 8px;
	font-weight: bold;
}

#header .header-inner {
	margin-top: 38px;
}

.header-top{
	background: var(--frame);
	padding: 0.7em 0;
	font-size: 1em;
	border-bottom: var(--frame-border) solid var(--border);
}

.header-top .avatar{
	vertical-align: middle;
	margin-left: 0.45em;
}

.header-button, .kk-ajax-cart{
	vertical-align: middle;
	display: inline-block;
}

.header-button-info {
	background: var(--gray-0);
	padding: 0.4em 30px 0.2em 0.7em;
	position: relative;
	border-radius: 2px;
	cursor: pointer;
}

.header-button-text{
	font-family: "Delicious";
	font-weight: 300;
	color: rgb(20, 20, 20);
	font-size: 1em;
	line-height: normal;
}

.header-button:hover .header-button-info {
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.header-button-info:after{
	content: "";
	left: 0;
	right: 20px;
	bottom: -2px;
	height: 7px;
	background: var(--gray-0);
	position: absolute;
	z-index: 11;
	opacity: 0;
	transition: opacity 200ms 0ms;
}

.header-button:hover .header-button-info:after {
	opacity: 1;
	transition: opacity 200ms 100ms;
}

.header-button .header-button-desc {
	color: #888;
	font-size: 0.75em;
	line-height: normal;
	margin-bottom: 0.5em;
	white-space: nowrap;
}

.header-button .header-button-icon {
	background: var(--primary);
	background: linear-gradient(#A8C44B 0%, #84AD0F 100%);
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 20px;
	border-radius: 0 2px 2px 0;
	color: var(--gray-0);
	text-align: center;
	padding-top: 0.6em;
}

.header-button.empty .header-button-info:after{
	display: none !important;
}

#logo .logo-icon {
	background: url(images/kk_logo.svg) no-repeat left bottom;
	background-size: contain;
	width: 18px;
	height: 22px;
	display: inline-block;
	position: relative;
	top: 3px;
	margin-right: 0.1em;
}

/**
 * TEXT STYLING
 */

.strike{
	text-decoration: line-through;
}

.tjustify{
	text-align: justify;
}

.uppercase{
	text-transform: uppercase !important;
}

.strong{
	font-weight: 500 !important;
}

.nowrap{
	white-space: nowrap !important;
}

body .text{
	display: inline-block;
	border-radius: 0;
	width: 100%;
}

.h1, h1, body .text h1{
	margin: 1.25em 0 0.9em 0;
	line-height: normal;
	font-size: 2em;
	letter-spacing: -0.03em;
}

.h2, h2, body .text h2{
	margin: 1em 0 0.75em 0;
	line-height: normal;
	font-size: 1.3em;
}

.h3, h3, body .text h3 {
	font-size: 1.2em;
	line-height: normal;
	margin: 1em 0 0.8em 0;
}

.h4, h4, body .text h4{
	font-size: 1.1em;
	margin: 1em 0 0.65em 0;
}

.h5, h5, body .text h5{
	font-size: 1em;
	margin: 1em 0 0.65em 0;
}

.text h1,
.text h2{
	color: var(--primary);
}

.subline {
	font-size: 1.7em;
	font-weight: normal;
	display: block;
	max-width: 600px;
	margin: -0.5em auto 1.5em auto;
	line-height: 1.3;
	text-align: center;
	letter-spacing: -0.015em;
	font-style: italic;
	opacity: 0.8;
}

.subline strong{
	font-weight: inherit;
}

.offset-image{
	position: relative;
	left: 8px;
}

body .huge-header {
	font-weight: 500;
	text-transform: uppercase;
	color: inherit;
	letter-spacing: -1px;
	white-space: nowrap;
}


body .divider-header {
	width: auto !important;
	margin-right: auto !important;
	display: table !important;
	margin-left:  auto !important;
	background: var(--gray-0);
	padding-left: 0.5em;
	padding-right: 0.5em;
	white-space: nowrap;
}

body .divider-header:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	border-top: 1px dashed var(--border);
	margin-top: 0.7em;
	z-index: -1;
}

body .text p {
	text-shadow: none;
}

body .text .text-wrap{
	display: inline-block;
	width: 100%;
	padding-top: 1em; /* 1.5em;*/
	padding-bottom: 1em
}

body .text .text-wrap > *:first-child {
	margin-top: 0 !important;
}

body .text .text-wrap > *:last-child {
	margin-bottom: 0 !important;
}

body .text .text-wrap.p25,
body .text .text-wrap.p33,
body .text .text-wrap.p50,
body .text .text-wrap.p66,
body .text .text-wrap.p75,
body .text .text-wrap.p100
{
	width: 50%;
	padding-left: 1.5em;
	padding-right: 1.5em;
	float: left;
}

body .text .text-wrap.p25.first,
body .text .text-wrap.p33.first,
body .text .text-wrap.p50.first,
body .text .text-wrap.p66.first,
body .text .text-wrap.p75.first,
body .text .text-wrap.p100.first
{
	padding-left: 0;
}

body .text .text-wrap.p25.last,
body .text .text-wrap.p33.last,
body .text .text-wrap.p50.last,
body .text .text-wrap.p66.last,
body .text .text-wrap.p75.last,
body .text .text-wrap.p100.last
{
	padding-right: 0;
}

body .text .description p{
	margin-top: 0;
}

body .text .image{
	width: 50%;
	line-height: 0;
	margin-bottom: 0px;
	display: inline-block;
	position: relative;
	transition: transform 300ms ease-out;
	cursor: pointer;
}

body .text .image img{
	width: 100%;
}

body .text .image.align-left{
	margin: 0px 40px 40px 0;
}

body .text .image.align-right{
	margin: 40px 0 40px 40px;
}

body .text strong,
body .text b{
	font-weight: bold;
	color: inherit;
}

body .text p{
	margin: 1em 0;
}

body .text p.hyphenate{
	text-align: justify;
}

/*body .text br + br,
body .text ul + br,
body .text p + br,
body .text h1 + br,
body .text h2 + br,
body .text h3 + br,
body .text h4 + br,
body .text h5 + br,
body .text p > br:first-child{
	display: none;
}
*/

body .text pre {
	font-size: 0.9em;
	line-height: 1.4;
	white-space: pre-wrap;
	background: var(--frame);
	padding: 1em;
	border: 0 none;
	border-radius: var(--pre-radius);
	display: inline-block;
	width: 100%;
}

body .text code{
	color: var(--gray-dark);
	background-color: var(--frame);
	font-size: 0.8em;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0 3px;
	word-wrap: break-word;
	overflow-x: auto;
}

body .text pre code{
	display: inline-block;
	width: 100%;
	max-width: 100%;
	float: left;
	margin: 0;
	padding: 0.5em;
	white-space: pre;
}

.docs .text h2{
	color: var(--gray-dark);
	letter-spacing: -0.01em;
}

.docs .text {
    counter-reset: h2counter;
}

.docs .text h1 {
    counter-reset: h2counter h3counter h4counter h5counter;
}
.docs .text h2{
    counter-increment: h2counter;
    counter-reset: h3counter h4counter h5counter;
}
.docs .text h2:before {
	/*content: counter(h2counter, upper-roman);*/
	margin-right: 0.5em;
	font-size: 1em;
	color: var(--primary);
	position: relative;
}

.docs .text img:not(.frameless),
.docs .text video:not(.frameless),
.docs .text .kk-online-video:not(.frameless),
img.framed,
video.framed,
iframe.framed {
	max-width: 100%;
	border: 6px solid var(--page);
	border-radius: 9px;
	outline: 1px solid var(--border);
	box-shadow: var(--frame-shadow);
}

/**************************
 Link Styles
***************************/
body .text a:not(.btn):not(.frame):not(.indicator):not(.thumbnail),
*.link,
*.popup,
.vat_info a {
	border-bottom: 1px dotted currentColor;
}

*.link.link-menu{
	border-bottom: 1px solid var(--border);
	padding: 0.5em 0;
	display: block;
	position: relative;
}

*.link.link-menu.last{
	border-bottom: 0 none;
}

*.link.link-menu:hover,
*.link.link-menu.active{
	color: var(--primary);
}

*.link.link-menu:before{
	content: "\00BB";
	font-family: "Delicious";
	position: relative;
	margin-right: 0.5em;
	font-size: 1.2em;
	color: var(--primary);
}

*.link.link-menu:hover:before,
*.link.link-menu.active:before{
	opacity: 1;
}

*.link.link-menu.no-children:before,
.no-children > *.link.link-menu:before{
	display: none;
}

*.link.link-menu.link-menu-right{
	padding-right: 20px;
}

*.link.link-menu.link-menu-right:before{
	position: absolute;
	right: 0;
	top: 50%;
	line-height: 0;
	margin-right: 0;
	opacity: 0.5;
	color: inherit;    
}

*.link.link-menu.link-menu-right:hover:before,
*.link.link-menu.link-menu-right.active:before{
	opacity: 1;
}

body hr, 
body .text hr{
	border: none;
	margin: 1em 0;
	clear: both;
	height: 0px;
	border-bottom: 1px solid var(--border);
	display: inline-block;
	opacity: 1;
	width: 100%;
}

body hr.dashed, 
body .text hr.dashed{
	border-bottom-style: dashed;
}

body hr.dotted, 
body .text hr.dotted{
	border-bottom-style: dotted;
}

body hr.short{
	width: 65px;
	margin-left: auto;
	margin-right: auto;
	display: table;
}

body .text hr+p {
	margin-top: 1em;
}

body .text blockquote,
body .text quote
{
	float: none;
	display: block;
	width: 100%;
	border-left: 2px solid var(--primary);
	padding: 0 0 0 1em;
	font-weight: normal;
	font-style: italic;
	text-align: left;
	margin: 1.5em 0;
}

body .text blockquote p{
	margin: 0 !important;
}

body .text ul,
body .text ol{
	margin: 1em 0;
}

body .text ul li {
	list-style: outside disc;
	margin-left: 1.2em;
}

body .text ul ul li{
	list-style-type: circle;
}

body .text ol > li {
	list-style: outside decimal;
	margin-left: 1.5em;
}

body *.thin{
	font-weight: 400 !important;
}

body *.thinner{
	font-weight: 300 !important;
}

body *.hair{
	font-weight: 200 !important;
}

body .text pre p{
	margin: 0;
}

body .text .frame{
	margin: 1em 0;
}

body .bright, 
body .text .bright {
	border-right: 1px solid var(--border);
}

body .bleft, 
body .text .bleft {
	border-left: 1px solid var(--border);
}

body .btop,
body .text .btop {
	border-top: 1px solid var(--border);
}

body .bbottom,
body .text .bbottom {
	border-bottom: 1px solid var(--border);
}

body .text img{
	max-width: 100%;
}

body .text img.left{
	margin-right: 1.5em;
}

body .text img.right{
	margin-left: 1.5em;
}

body .text .grouponly > h1:first-child,
body .text .grouponly > h2:first-child,
body .text .grouponly > h3:first-child,
body .text .grouponly > h4:first-child,
body .text .grouponly > h5:first-child
{
	display: none;
}

body .text .hyphenate p{
	text-align: justify;
}

.framed-image {
  box-shadow: 0 0 0 1px var(--border), 0 3px 11px var(--shadow);
  border-radius: 6px;
}

/**
 * TABLE STYLES
 */
.text table, table.tiny{
	border-top: 1px solid var(--border);
	border-left: 1px solid var(--border);
	border-bottom: 1px solid var(--border); 
}

.text *+table{
	margin: 1.5em 0;
}

.text table tr th,
.text table tr td,
table.tiny tr th,
table.tiny tr td{
	padding: 0.7em 1em;
	border-right: 1px solid var(--border);
	font-size: 0.95em;
}

.text table tr th,
table.tiny tr th{
	border-bottom: 1px solid var(--border);
	font-weight: 500;
	font-size: 0.9em;
	font-family: "Delicious";
	text-transform: uppercase;
	color: var(--text);
}

table.tiny tbody tr:nth-child(2n) td,
.text table tbody tr:nth-child(2n) td{
	background: var(--gray-lightest);
}

table.tiny tfoot tr:first-child td,
.text table tfoot tr:first-child td{
	border-top: 1px solid var(--border);
}

/**
 * BUTTON STYLES
 */
.btn,
.submit,
button,
input[type="button"],
input[type="submit"],
.qq-uploader .qq-upload-button{
	font-family: "Delicious"; 
	user-select: none;
	display: inline-block;
	color: var(--gray-dark);
	padding: 0.5em 1em;
	line-height: 1.4;
	cursor: pointer;
	border-radius: var(--btn-radius);
	border: 1px var(--gray-40) solid;
	border-style: solid !important;
	font-weight: normal;
	background-image: linear-gradient(calc(180deg + var(--gradient-offset-y)), var(--gray-10), var(--gray-20));
	font-size: 0.9em;
	white-space: nowrap;
	text-align: center;
	transition: background-image 200ms, color 200ms;
	vertical-align: top;
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.qq-uploader .qq-upload-button:hover{
	background-image: linear-gradient(calc(180deg + var(--gradient-offset-y)), var(--gray-0), var(--gray-10));
	color: var(--gray-90);
}

.btn:active,
.btn.active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
.qq-uploader .qq-upload-button:active{
	background-image: linear-gradient(calc(180deg + var(--gradient-offset-y)), var(--gray-10), var(--gray-0));
	color: var(--gray-100);
}

.qq-uploader .qq-upload-button{ width: auto !important; }

.btn strong,
input.submit strong,
button.submit strong{
	font-weight: 500 !important;
	color: inherit !important;
}

.btn.btn-important,
button.btn-important,
input.submit,
button.submit{
	background: var(--primary);
	background-image: linear-gradient(calc(180deg + var(--gradient-offset-y)), var(--primary-light) 0%, var(--primary) 100%);
	text-shadow: 0 1px 1px var(--primary-dark);
	color: var(--gray-0);
	border-color: var(--primary);
}

.btn.btn-important:hover,
button.btn-important:hover,
input.submit:hover,
button.submit:hover{
	color: var(--gray-0);
	background: var(--primary-light);
}

.btn.btn-important:active,
.btn.btn-important.active,
input.submit:active,
input.submit.active,
button.submit:active,
button.submit.active{
	color: var(--gray-0);
	background-image: linear-gradient(calc(180deg + var(--gradient-offset-y)), var(--primary) 0%, var(--primary-light) 100%);
	border-color: var(--primary-dark);
}

.btn.btn-ion,
button.btn-ion,
input[type="button"].btn-ion,
input[type="submit"].btn-ion{
	background: none;
	box-shadow: none !important;
	text-shadow: none !important;
	border-width: 1px;
	border-color: var(--gray-50);
	color: var(--gray-dark);
	transition: none;
}

.btn.btn-ion:hover,
button.btn-ion:hover,
input[type="button"].btn-ion:hover,
input[type="submit"].btn-ion:hover,
.btn.btn-ion:active,
button.btn-ion:active,
input[type="button"].btn-ion:active,
input[type="submit"].btn-ion:active,
.btn.btn-ion.active,
button.btn-ion.active,
input[type="button"].btn-ion.active,
input[type="submit"].btn-ion.active{
	background: var(--gray-70);
	color: var(--gray-0);
	text-shadow: none;
	border-color: rgba(0, 0, 0, 0);
}

.btn.btn-ion.btn-important{
	border-color: var(--primary);
	color: var(--primary) !important;
}

.btn.btn-ion.btn-important:hover,
.btn.btn-ion.btn-important:active,
.btn.btn-ion.btn-important.active{
	color: var(--gray-0) !important;
	border-color: transparent;
	background: var(--primary);
}

.btn.btn-ion.btn-ion-white {
	border-color: var(--gray-0);
	color: var(--gray-0);
}

.btn.btn-ion.btn-ion-white:hover,
.btn.btn-ion.btn-ion-white.active{
	background: var(--gray-0);
	color: var(--primary);
}

.btn.btn.btn-small,
button.btn.btn-small,
input[type="button"].btn.btn-small,
input[type="submit"].btn.btn-small {
	font-size: 0.75em;
	padding: 0.5em 0.75em;
}

.btn.btn.btn-large,
button.btn.btn-large,
input[type="button"].btn.btn-large,
input[type="submit"].btn.btn-large {
	font-size: 1.15em;
	padding: 0.5em 1.1em;
}

.btn.btn.btn-huge,
button.btn.btn-huge,
input[type="button"].btn.btn-huge,
input[type="submit"].btn.btn-huge {
	font-size: 1.3em;
	padding: 0.8em 1.3em;
	line-height: 1;
	font-weight: 400;
}

.btn.btn-append{
	margin-left: -2px !important;
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
}

.btn-arrow:after{
	font-family: "Delicious";
	content: "\00BB";
	margin-left: 0.3em;
	margin-right: -0.2em;
	font-size: 1.3em;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
	top: 0.07em;
}

.btn-arrow-left:before{
	font-family: "Delicious";
	content: "\00BB";
	margin-left: -0.1em;
	margin-right: 0.2em;
	font-size: 1.3em;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
	top: 0.05em;
}

.btn-group{
	display: inline-block;
}

.btn-group .btn{
	margin-right: -1px;
	display: block;
	float: left;
	border-radius: 0;
}

.btn-group .btn:first-child{
	border-top-left-radius: var(--btn-radius);
	border-bottom-left-radius: var(--btn-radius);
}

.btn-group .btn:last-child{
	border-top-right-radius: var(--btn-radius);
	border-bottom-right-radius: var(--btn-radius);
}


.btn-group .btn:last-child{
	margin-right: 0;
}

.circle-btn{
	font-size: 1.8em;
	border-radius: 100%;
	border: 1px solid var(--gray-50);
	line-height: 2em;
	width: 2em;
	height: 2em;
	text-align: center;
	padding: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	display: inline-block;
	position: relative;
	background: linear-gradient(calc(180deg + var(--gradient-offset-y)), var(--gray-0) 0%, var(--gray-20) 100%);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateY(-1px);
	text-shadow: none;
	transition: none;
}

.circle-btn span{
	font-size: 0.5em;
	font-weight: bold;
	margin-top: 1em;
	line-height: 0;
	display: block;
	white-space: nowrap;
	position: absolute;
	width: 300px;
	left: 50%;
	text-align: center;
	margin-left: -150px;
	top: 100%;
	pointer-events: none;
}

.circle-btn:hover{
	background: var(--gray-0);
	color: var(--primary);
}

.circle-btn.btn-important{
	background: var(--gray-0);
	color: var(--primary);	
	text-shadow: none;
}

.circle-btn.btn-important:hover{
	background: var(--primary);
	border-color: var(--primary);
	color: var(--gray-0);
}

.circle-btn.btn-important:hover span{
	color: var(--primary);
}

.circle-btn.btn-important:active{
	background: var(--primary-dark);
}

.circle-btn.btn-floating{
	position: absolute;
	top: -1em;
	left: 50%;
	margin-left: -1em;
}

.circle-btn.btn-floating,
.circle-btn.btn-shadow{
	box-shadow: 0 3px 8px var(--shadow); /*rgba(178, 192, 195, 0.31);*/
}

.circle-btn-group .circle-btn{
	margin: 0 1em 1em 1em;
}

.control-group .control{
	display: inline-block;
	margin-right: -6px;
	height: 51px;
	text-align: center;
}

.control-group .control:first-child{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: -1px;
}

.control-group .control:last-child{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.control-group input[type="text"]{
	min-width: 50px;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/************************************
 Form Styles
 ************************************/
body form .incorrect{
	border: 1px solid #E05954;
}

form em {
	color: var(--primary);
}

/**
 * LAYOUT OVERRIDE STYLES FOR BETTER ADJUSTMENTS
 */
.m-0{margin:0!important;}
.m-0-top{margin-top:0!important;}
.m-0-bottom{margin-bottom:0!important;}
.m-0-right{margin-right:0!important;}
.m-0-left{margin-left:0!important;}

.m-025{margin:0.25em!important;}
.m-025-top{margin-top:0.25em!important;}
.m-025-bottom{margin-bottom:0.25em!important;}
.m-025-right{margin-right:0.25em!important;}
.m-025-left{margin-left:0.25em!important;} 

.m-05{margin:0.5em!important;}
.m-05-top{margin-top:0.5em!important;}
.m-05-bottom{margin-bottom:0.5em!important;}
.m-05-right{margin-right:0.5em!important;}
.m-05-left{margin-left:0.5em!important;}

.m-075{margin:0.75em!important;}
.m-075-top{margin-top:0.75em!important;}
.m-075-bottom{margin-bottom:0.75em!important;}
.m-075-right{margin-right:0.75em!important;}
.m-075-left{margin-left:0.75em!important;} 

.m-1{margin:1em!important;}
.m-1-top{margin-top:1em!important;}
.m-1-bottom{margin-bottom:1em!important;}
.m-1-right{margin-right:1em!important;}
.m-1-left{margin-left:1em!important;}

.m-125{margin:1.25em!important;}
.m-125-top{margin-top:1.25em!important;}
.m-125-bottom{margin-bottom:1.25em!important;}
.m-125-right{margin-right:1.25em!important;}
.m-125-left{margin-left:1.25em!important;}

.m-15{margin:1.5em!important;}
.m-15-top{margin-top:1.5em!important;}
.m-15-bottom{margin-bottom:1.5em!important;}
.m-15-right{margin-right:1.5em!important;}
.m-15-left{margin-left:1.5em!important;}

.m-175{margin:1.75em!important;}
.m-175-top{margin-top:1.75em!important;}
.m-175-bottom{margin-bottom:1.75em!important;}
.m-175-right{margin-right:1.75em!important;}
.m-175-left{margin-left:1.75em!important;}

.m-2{margin:2em!important;}
.m-2-top{margin-top:2em!important;}
.m-2-bottom{margin-bottom:2em!important;}
.m-2-right{margin-right:2em!important;}
.m-2-left{margin-left:2em!important;}

.m-25{margin:2.5em!important;}
.m-25-top{margin-top:2.5em!important;}
.m-25-bottom{margin-bottom:2.5em!important;}
.m-25-right{margin-right:2.5em!important;}
.m-25-left{margin-left:2.5em!important;}

.m-3{margin:3em!important;}
.m-3-top{margin-top:3em!important;}
.m-3-bottom{margin-bottom:3em!important;}
.m-3-right{margin-right:3em!important;}
.m-3-left{margin-left:3em!important;}

.m-4{margin:4em!important;}
.m-4-top{margin-top:4em!important;}
.m-4-bottom{margin-bottom:4em!important;}
.m-4-right{margin-right:4em!important;}
.m-4-left{margin-left:4em!important;}

.m-5{margin:5em!important;}
.m-5-top{margin-top:5em!important;}
.m-5-bottom{margin-bottom:5em!important;}
.m-5-right{margin-right:5em!important;}
.m-5-left{margin-left:5em!important;}

.p-0{padding:0!important;}
.p-0-top{padding-top:0!important;}
.p-0-bottom{padding-bottom:0!important;}
.p-0-right{padding-right:0!important;}
.p-0-left{padding-left:0!important;}

.p-025{padding:0.25em!important;}
.p-025-top{padding-top:0.25em!important;}
.p-025-bottom{padding-bottom:0.25em!important;}
.p-025-right{padding-right:0.25em!important;}
.p-025-left{padding-left:0.25em!important;}

.p-05{padding:0.5em!important;}
.p-05-top{padding-top:0.5em!important;}
.p-05-bottom{padding-bottom:0.5em!important;}
.p-05-right{padding-right:0.5em!important;}
.p-05-left{padding-left:0.5em!important;}

.p-075{padding:0.75em!important;}
.p-075-top{padding-top:0.75em!important;}
.p-075-bottom{padding-bottom:0.75em!important;}
.p-075-right{padding-right:0.75em!important;}
.p-075-left{padding-left:0.75em!important;}

.p-1{padding:1em!important;}
.p-1-top{padding-top:1em!important;}
.p-1-bottom{padding-bottom:1em!important;}
.p-1-right{padding-right:1em!important;}
.p-1-left{padding-left:1em!important;}

.p-125{padding:1.25em!important;}
.p-125-top{padding-top:1.25em!important;}
.p-125-bottom{padding-bottom:1.25em!important;}
.p-125-right{padding-right:1.25em!important;}
.p-125-left{padding-left:1.25em!important;}

.p-15{padding:1.5em!important;}
.p-15-top{padding-top:1.5em!important;}
.p-15-bottom{padding-bottom:1.5em!important;}
.p-15-right{padding-right:1.5em!important;}
.p-15-left{padding-left:1.5em!important;}

.p-175{padding:1.75em!important;}
.p-175-top{padding-top:1.75em!important;}
.p-175-bottom{padding-bottom:1.75em!important;}
.p-175-right{padding-right:1.75em!important;}
.p-175-left{padding-left:1.75em!important;}

.p-2{padding:2em!important;}
.p-2-top{padding-top:2em!important;}
.p-2-bottom{padding-bottom:2em!important;}
.p-2-right{padding-right:2em!important;}
.p-2-left{padding-left:2em!important;}

.p-25{padding:2.5em!important;}
.p-25-top{padding-top:2.5em!important;}
.p-25-bottom{padding-bottom:2.5em!important;}
.p-25-right{padding-right:2.5em!important;}
.p-25-left{padding-left:2.5em!important;}

.p-3{padding:3em!important;}
.p-3-top{padding-top:3em!important;}
.p-3-bottom{padding-bottom:3em!important;}
.p-3-right{padding-right:3em!important;}
.p-3-left{padding-left:3em!important;}

.p-4{padding:4em!important;}
.p-4-top{padding-top:4em!important;}
.p-4-bottom{padding-bottom:4em!important;}
.p-4-right{padding-right:4em!important;}
.p-4-left{padding-left:4em!important;}

.p-5{padding:5em!important;}
.p-5-top{padding-top:5em!important;}
.p-5-bottom{padding-bottom:5em!important;}
.p-5-right{padding-right:5em!important;}
.p-5-left{padding-left:5em!important;}

.fs-0{font-size:0!important;}
.fs-01{font-size:0.1em!important;}
.fs-02{font-size:0.2em!important;} 
.fs-03{font-size:0.3em!important;}
.fs-04{font-size:0.4em!important;}
.fs-05{font-size:0.5em!important;}
.fs-06{font-size:0.6em!important;}
.fs-07{font-size:0.7em!important;}
.fs-075{font-size:0.75em!important;}
.fs-08{font-size:0.8em!important;}
.fs-09{font-size:0.9em!important;}
.fs-095{font-size:0.95em!important;}
.fs-1{font-size:1em!important;}
.fs-11{font-size:1.1em!important;}
.fs-12{font-size:1.2em!important;}
.fs-13{font-size:1.3em!important;}
.fs-14{font-size:1.4em!important;}
.fs-15{font-size:1.5em!important;}
.fs-16{font-size:1.6em!important;}
.fs-17{font-size:1.7em!important;}
.fs-18{font-size:1.8em!important;}
.fs-19{font-size:1.9em!important;}
.fs-2{font-size:2em!important;}
.fs-25{font-size:2.5em!important;}
.fs-3{font-size:3em!important;}
.fs-35{font-size:3.5em!important;}
.fs-4{font-size:4em!important;}
.fs-5{font-size:5em!important;}
.fs-6{font-size:6em!important;}
.fs-7{font-size:7em!important;} 

.fw-light{font-weight: 300!important;}
.fw-normal{font-weight: normal!important;}
.fw-bold{font-weight: bold!important;}
.fw-heavy{font-weight: 800!important;}

.ff-special, .ff-header{font-family: "Delicious", Arial, sans-serif !important}
.ff-normal, .ff-body{font-family: "Open Sans", Arial, sans-serif}

.lh-normal{line-height: normal!important;}
.lh-0{line-height: 0!important;}
.lh-1{line-height: 1!important;}
.lh-11{line-height: 1.1!important;}
.lh-12{line-height: 1.2!important;}
.lh-13{line-height: 1.3!important;}
.lh-14{line-height: 1.4!important;}
.lh-15{line-height: 1.5!important;}
.lh-2{line-height: 2!important;}

.secondary,.secondary-hover:hover{color: var(--primary)!important;}
.primary,.primary-hover:hover{color: var(--primary)!important;}
.dark-primary,.dark-primary-hover:hover{color: var(--primary)!important;}

.secondary-bg{background: var(--primary) !important;}
.primary-bg{background: var(--primary) !important;}

a.hover-title-box:hover {
	color: inherit;
}

a.hover-title-box:hover h1,
a.hover-title-box:hover .h1,
a.hover-title-box:hover h2,
a.hover-title-box:hover .h2,
a.hover-title-box:hover h3,
a.hover-title-box:hover .h3,
a.hover-title-box:hover h4,
a.hover-title-box:hover .h4,
a.hover-title-box:hover h5,
a.hover-title-box:hover .h5 {
	color: var(--primary);
}

.relative{position: relative;}
.absolute{position: absolute;}
.static{position: static;}

.d-block{display: block;}
.d-inline{display: inline;}
.d-inline-block{display: inline-block;}
.d-table{display: table;}
.d-table-row{display: table-row;}
.d-table-cell{display: table-cell;}
.overflow-hidden{overflow: hidden;}
.hcenter{display: table;margin-left: auto;margin-right: auto;}

.naked,
.naked:hover,
.naked:active,
.naked:visited{display:block!important;margin:0!important;padding:0!important;border:0 none!important;background:none!important;text-shadow:none!important;text-decoration:none!important;color:inherit!important;box-shadow:none!important;font-size:1em!important;}

.br-0{ border-radius: 0 !important; }
.br-2{ border-radius: 2px !important; }

.straight-top { border-top-left-radius: 0px!important; border-top-right-radius: 0px !important; }
.straight-right { border-top-right-radius: 0px!important; border-bottom-right-radius: 0px !important; }
.straight-bottom { border-bottom-left-radius: 0px!important; border-bottom-right-radius: 0px !important; }
.straight-left { border-top-left-radius: 0px!important; border-bottom-left-radius: 0px !important; }

.c-default{	cursor: default !important; }
.c-pointer{	cursor: pointer !important; }
.click-through{ pointer-events: none!important; }

.read-block{
	display: block;
	width: 980px;
	max-width: 100%;
}

.centered{
	display: block!important;
	margin-left: auto!important;
	margin-right: auto!important;
}

.avatar{
	border-radius: 600px;
}

/**
 * BOX STYLES
 */
.box_info, 
.box_error, 
.box_success,
.box_warning{
	padding: 1em 70px 1em 1em;
	background-image: none;
	margin: 1em 0;
	position: relative;
	border: 0 none;
	border-radius: var(--box-radius);
}

.box_info > *:first-child,
.box_error > *:first-child,
.box_success > *:first-child,
.box_warning > *:first-child{
	margin-top: 0 !important;
}

.box_info > *:last-child,
.box_error > *:last-child,
.box_success > *:last-child,
.box_warning > *:last-child{
	margin-bottom: 0 !important;
}

.box_info p, 
.box_error p, 
.box_success p,
.box_warning p{
	margin-bottom: 0;
}

.box_info *:not(.btn),
.box_error *:not(.btn),
.box_success *:not(.btn),
.box_warning *:not(.btn){
	color: inherit !important;
}

.box_info:before,
.box_error:before,
.box_success:before{
	position: absolute;
	right: 20px;
	top: 50%;
	font-size: 40px;
	line-height: 40px;
	margin-top: -20px;
	font-family: "Ionicons";
	user-select: none;
	pointer-events: none;
}

.box_info{
	color: rgb(158, 90, 27);
	background: rgb(255, 226, 182);
}

.box_info:before{
	content: "\f149";
}

.box_success{
	background: #90B328; /*#78AD2C;*/
	color: var(--gray-0);
}

.box_success:before{
	content: "\f120";
}

.box_error{
	color: var(--gray-0);
	background: var(--primary);
}

.box_error:before{
	content: "\f128";
}

.box_info.screen-width, 
.box_error.screen-width, 
.box_success.screen-width{
	border-left: 0 none;
	border-right: 0 none;
	border-radius: 0;
}

.box_warning{
	color: var(--gray-0);
	background: var(--primary);
}

/*********************************
 Modal Styling
*********************************/
.modal-backdrop{
	background: var(--modal-backdrop);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all 1000ms;
	z-index: 9998;
	backdrop-filter: blur(10px);
}

.modal-backdrop.in{
	opacity: 1;
	pointer-events: initial;
	visibility: visible;
}

.modal {
	--modal-width: 980px;
	--modal-height: 80vh;
	--modal-padding: min(4vw, 4em);
	position: fixed!important;
	z-index: 9999;
	background: var(--modal);
	width: var(--modal-width);
	height: auto;
	max-width: calc(100% - var(--modal-padding));
	max-height: min(100% - var(--modal-padding), var(--modal-height));
	border-radius: var(--modal-radius);
	display: block;
	left: calc((100% - min(100% - var(--modal-padding), var(--modal-width))) / 2);
	top: calc((100% - min(100% - var(--modal-padding), var(--modal-height))) / 2);
	margin-left: auto;
	margin-right: auto;
	overflow-y: auto;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0ms linear 300ms, opacity 0ms ease 300ms;
	-webkit-overflow-scrolling: touch;
}

.modal:not(.in){
	animation: fadeOutDown 300ms ease-in 0ms 1;
	-webkit-animation: fadeOutDown 300ms ease-in 0ms 1;
}

.modal.in{
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transition: initial;
	animation: bounceInDown 1000ms linear 0ms 1;
	-webkit-animation: bounceInDown 1000ms linear 0ms 1;
}

.modal.xfill{
	left: 0;
	right: 0;
	max-width: initial;
	min-width: initial;
	border-left: 0 none;
	border-right: 0 none;
	margin-left: 0;
	border-radius: 0;
	width: 100%;
}

.modal.yfill{
	top: 0;
	height: 100%;
	bottom: 0;
	border-top: 0 none;
	border-bottom: 0 none;
	border-radius: 0;
	max-height: none;
}


.modal .modal-close{
	position: absolute;
	font-size: 1.5em;
	right: 0;
	top: 0;
	padding: 0.75em;
	background: rgba(255,255,255,0.001);
	line-height: 1;
	z-index: 1;
	cursor: pointer;
}

.modal .modal-close:before{
	content: "\f405";	
	font-family: "Ionicons";
}

.modal .modal-close:hover:before{
	color: var(--primary);
	content: "\f406";
}


.modal .modal-body{
	padding: var(--modal-padding);
}

.modal .modal-body>*:first-child{
	margin-top: 0 !important;
}

.modal .modal-body>*:last-child{
	margin-bottom: 0 !important;
}

/*******************************
 FRAME STYLES
********************************/
.frame{
	background: var(--frame);
	display: inline-block;
	width: 100%;
	padding: 1em;
	border-radius: var(--frame-radius);
	border: var(--frame-border) solid var(--border);
}

.frame > *:first-child,
.frame > .center-page > *:first-child,
.screen-block > .center-page > *:first-child{margin-top: 0 !important;}

.frame > *:last-child,
.frame > .center-page > *:last-child,
.screen-block > .center-page > *:last-child{margin-bottom: 0 !important;}

.frame.frame-outline{
	background: var(--frame-outline);
	border: var(--frame-border) solid var(--border);
	box-shadow: var(--frame-shadow);
}

.frame.frame-double{
	background: none;
	border: 1em solid transparent;
	position: relative;
	contain: layout;
}

.frame.frame-double:before,
.frame.frame-double:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	border-radius: var(--frame-radius);
	background: var(--frame-outline);
	box-shadow: var(--frame-shadow);
	border: var(--frame-border) solid var(--border);
}

.frame.frame-double:before {
	left: -1em;
	top: -1em;
	right: -1em;
	bottom: -1em;
	background: var(--frame);
	box-shadow: none;
}

.frame.frame-double:after {
	border-radius: var(--frame-nested-radius);
}


.frame.frame-light{
	background: var(--frame-light);
	border: var(--frame-border) solid var(--border);
}

.frame.frame-primary{
	background: var(--primary);
	color: var(--gray-0);
	border: 0 none;
}

.frame.frame-primary a:hover {
	color: inherit;
}

.frame.frame-primary *{
	color: var(--gray-0);
}

.frame.frame-primary.c-inherit *{
	color: inherit;
}

.frame.frame-plain{
	background: none;
	border: 0 none;
}

.frame.frame-top{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.frame.frame-bottom{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.frame .frame.frame-top{
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
}

.frame .frame.frame-bottom{
	border-bottom-width: 0;
	border-left-width: 0;
	border-right-width: 0;
}

.frame:not(.screen-block):not(.modal) > * {
	--frame-radius: var(--frame-nested-radius);
}

/*******************************
 BADGE STYLES
********************************/
.badge,
.text .indicator{
	display: inline-block;
	padding: 0.25em 0.5em;
	background: var(--gray-light);
	font-size: 0.85em;
	font-weight: normal;
	line-height: 1;
	border-radius: var(--badge-radius);
	color: var(--text);
	text-decoration: none;
	border: 0 none;
}

.badge.badge-primary,
.text .indicator{
	color: var(--gray-0);
	background: var(--primary);
}

.text .indicator{
	border-radius: 50%;
	color: var(--gray-0);
	font-weight: bold;
}

.badge.badge-dark{
	color: var(--gray-0);
	background: var(--frame-dark);
}

.screen-block,
.screen-width {
	width: 100vw!important;
	position: relative!important;
	left: 50%!important;
	right: 50%!important;
	margin-left: -50vw!important;
	margin-right: -50vw!important;
	display: block!important;
	float: none!important;
	clear: both;
}

.screen-block{
	border-left: 0 none !important;
	border-right: 0 none !important;
	border-top: var(--frame-border) solid var(--border);
	border-bottom: var(--frame-border) solid var(--border);
	border-radius: 0 !important;
	padding: 4em var(--page-padding);
	margin-top: -1px;
}

.hero-header #header_wrapper {
	color: var(--gray-0);
	position: absolute;
	top: auto;
	z-index: 2;
}

.hero-header #header_wrapper .nav > li > a:hover{
	text-decoration: underline;
	color: var(--gray-0);
}
.hero-header #header_wrapper .nav > li.menu-item-active > a{
	background: var(--gray-light);
	color: var(--primary);
	border: 0 none;
}

.hero{
	background: var(--primary);
	border: 0 none;
	color: var(--gray-0);
}


.equal-height > .frame,
.full-height {
	height: 100% !important;
}

.feature{
	display: inline-block;
	padding: 1.5em;
	margin: 1em 0;
}

.feature i{
	color: var(--primary);
	float: left;
	font-size: 3em;
	margin-right: 0.35em;
	top: -0.25em;
	position: relative;
	height: 1em;
}

.feature i + * {
	margin-top: 0!important;
	margin-bottom: 0!important;
}

.feature i + * + p{
	opacity: 0.8;
	font-size: 0.85em;
	margin-top: 0!important;
	margin-bottom: 0!important;
}

.feature i + * + p + p {
	font-size: 0.95em;
	border-top: 1px solid var(--border);
	padding-top: 1em;
}

.feature hr{
	margin: 1em 0;
	display: block;
	clear: both;
}

.feature > p{
	opacity: 0.85;
}


.feature-quote{
	padding: 0 1.5em;
	margin: 0 0 2em 0;
}

.feature-quote > p:first-child{
	margin-top: 0;
}

.feature-quote > p:first-child:before {
	content: '"';
	font-size: 3.5em;
	opacity: 0.3;
	margin-right: 0.15em;
	display: inline;
	line-height: 1em;
	position: relative;
	top: 0.5em;
}

.feature-quote > p + hr{
	margin: 1em 0;
	display: block;
	clear: both;
}

.feature-quote > p + hr + *{
	margin-top: 0em!important;
	margin-bottom: 0!important;
}

.feature-quote > p + hr + * + p{
	opacity: 0.8;
	font-size: 0.95em;
	margin-top: 0.25em!important;
	margin-bottom: 0!important;
}

.flex-row {
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: row;
	-moz-flex-direction: row;
	-wekbit-flex-direction: row;
	flex-direction: row;
}

/*******************************
 ICONS
********************************/
.frame-primary .circle-icon {
	background: var(--gray-0);
	padding: 0.5em;
	border-radius: 400px;
	display: inline-block;
	line-height: 1;
}

.frame-primary .circle-icon i{
	color: var(--primary) !important;
}


.eat-lh{
	display: block !important;
	width: 100% !important;
	float: left;
}
.eat-lh:after{
	content: "";
	clear: both;
}
/*******************************
 Border Styles
********************************/
.bnone{
	border: 0 none !important;
}
.bnone-top{
	border-top: 0 none!important;
}
.bnone-right{
	border-right: 0 none !important;
}
.bnone-bottom{
	border-bottom: 0 none !important;
}
.bnone-left{
	border-left: 0 none !important;
}

.bleft{
	border-left: 1px solid var(--border) !important;
}
.bright{
	border-right: 1px solid var(--border) !important;
}
.btop{
	border-top: 1px solid var(--border) !important;
}
.bbottom{
	border-bottom: 1px solid var(--border) !important;
}
.ball{
	border: 1px solid var(--border) !important;
}


/*******************************
 HANDWRITING STYLES
********************************/
.handwritten{
	font-family: "Gloria Hallelujah", serif;
}

.handwritten-arrow{
	position: absolute;
	color: var(--primary);
	transform: rotate(5deg);
	margin-left: 1.5em;
	margin-top: -2em;
	letter-spacing: -0.02em;
	font-family: "Gloria Hallelujah", serif;
	line-height: 1.3;
}

.handwritten-arrow:before{
	content: "";
	display: block;
	width: 1.8em;
	height: 1.5em;
	background: url(images/arrow.png) no-repeat center center;
	position: absolute;
	right: 100%;
	margin-right: 0.3em;
	top: 50%;
	background-size: contain;
	transform: rotate(-9deg);
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	filter: var(--article-image-filter);
}

/*******************************
 FADE STYLES
*******************************/
.o-0{opacity: 0!important;}
.o-01{opacity: 0.1!important;}
.o-02{opacity: 0.2!important;}
.o-03{opacity: 0.3!important;}
.o-04{opacity: 0.4!important;}
.o-05{opacity: 0.5!important;}
.o-06{opacity: 0.6!important;}
.o-07{opacity: 0.7!important;}
.o-08{opacity: 0.8!important;}
.o-09{opacity: 0.9!important;}
.o-1{opacity: 1!important;}
.o-1-hover:hover{opacity: 1!important;}


.init-fadein{
	opacity: 0;
	transition: opacity 700ms ease;
}

.init-fadein.in{
	opacity: 1;
}

/********************************
 MENU STYLES
********************************/
.toggle-menu .menu{
	position: absolute;
	background: var(--gray-0);
	padding: 1em;
	display: inline-block;
	border-radius: 2px;
	box-shadow: 0 2px 7px rgba(0,0,0,0.3);
	visibility: hidden;
	opacity: 0;
	right: 0;
	width: auto;
	transition: opacity 200ms, visibility 0ms 200ms;
	z-index: 10;
}

.toggle-menu:hover .menu{
	opacity: 1;
	visibility: visible;
	transition: opacity 200ms 200ms, visibility 0ms 200ms;
}

/********************************
 TEXTBOX STYLES
 *******************************/
.textbox, 
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"]{
	font-family: inherit;
	font-size: 0.9em;
	outline: none;
	display: inline-block;
	padding: 0.5em;
	line-height: 1.4;
	border: 1px var(--gray-40) solid;
	border-radius: var(--input-radius);
	font-weight: 500;
	text-shadow: none;
	color: var(--text);
	background: var(--input);
	transition: border-color 200ms;
}

.textbox:focus, 
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus{
	border-color: #93AAAE;
}

/* Hack to change autofill color in Webkit */
.textbox:-webkit-autofill, 
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill{
	box-shadow: inset 0 0 0 3000px #fff7ea;
}

input[name="kk-captcha"] {
	width: 100%;
}

select{
	padding: 0.4em 0 0.5em 0.5em;
}

.popover-box {
	display: none;
	border: 1px solid #CCC;
	background-color: var(--gray-0);
	width: 240px;
	padding: 1em;
	position: absolute;
	font-size: 1em;
	z-index: 999;
	margin: 0;
	color: #444;
	right: 0;
	top: 89%;
	border-radius: 3px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	border-bottom-color: #BBB;
}

/********************************
 FOOTER STYLES
********************************/
.hidden-footer-placeholder{
	position: relative;
	z-index: -2;
}

.hidden-footer-placeholder,
.hidden-footer{
	height: 720px;
}

.hidden-footer{
	position: fixed;
	bottom: 0; left: 0;
	right: 0; z-index: -1;
	background: #403F3D;
	width: 100%;
	color: #8B8B8B;
	padding-top: 3em;
}

.hidden-footer hr{
	height: 0;
	border: 0 none;
	position: relative;
	margin: 1.5em 0;
	padding: 0;
	border-bottom: 1px solid #555;
}

/*********************************
 Rating Style
**********************************/
.ion-rating i{
	margin: 0 -0.1em;
}

/*********************************
 Article (LIST) Styling
**********************************/
.article{
	display: inline-block;
	width: 33%;
	text-align: center;
	position: relative;
}

.article.last .article-wrap, .article.kk-last-in-view .article-wrap{
	border-right-color: transparent !important;
}

.article .article-wrap{
	padding: 0.5em 1em 50px 1em;
	min-height: 100%;
}

.article.no-border .article-wrap{
	border-right: 0 none !important;
}

.article-image,
.transformable-image,
.offset-image {
	filter: var(--article-image-filter);
}

.article .article-image{
	width: 100%;
	max-width: 220px;
	position: relative;
	left: 8px;
}

.article .article-name{
	line-height: 1.3;
	margin: -0.75em 0 0 0;
}

.article:hover .article-name{
	color: var(--primary);
}

.article .article-set{
	background: var(--primary);
	font-size: 1.5em;
	width: 3em;
	height: 3em;
	line-height: 3em;
	border-radius: 3em;
	color: var(--gray-0);
	font-family: "Delicious";
	font-weight: 300;
	text-transform: uppercase;
	position: absolute;
	top: 0.75em;
	left: 0.75em;
	box-shadow: -1px 2px 0 1px rgba(0,0,0,0.13);
	transform: rotate(-6deg);
}

.article .article-link{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=") 0 0 repeat;
}

.article .price{
	color: var(--primary);
	font-family: "Delicious";
	font-size: 1.4em;
	line-height: 1;
	font-weight: 800;
}

.article .old-price{
	display: block;
	line-height: normal;
	opacity: 0.8;
	font-family: "Delicious";
}

.article .price_label {
	color: var(--primary);
	font-size: 0.7em;
	vertical-align: text-bottom;
}

.article .article-combi{
	margin: 0.5em 0;
}

.article .article-combi li {
	display: inline-block;
	border: 1px solid var(--border);
	line-height: 0;
}

.article .article-combi li:hover{
	border-color: #888;
}

.article-listing{
	display: inline-block;
	position: relative;
	width: 100%;
}

.article-listing .article{
	float: left;
	width: 33%;
	padding: 10px 0;
}

.article .article-extension {
	position: absolute;
	top: 100%;
	z-index: 2;
	background: var(--gray-0);
	left: -1px;
	right: 0;
	border: 1px solid var(--border);
	border-top: 0 none;
	opacity: 0;
	visibility: hidden;
	padding: 0 1em 0 1em;
	margin-top: -1em;
}

.article:hover .article-extension{
	opacity: 1;
	visibility: visible;
}

.article .article-info{
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	display: block;
	text-align: center;
	z-index: 1;
	opacity: 0;
}

.article:hover .article-info{
	display: block;
	opacity: 1;
}

.article .article-badges{
	display: inline-block;
	cursor: default;
}

.article .article-badges .badge{
	font-family: "Delicious";
	display: inline-block;
	padding: 0 0.25em;
	background: #eee;
	font-size: 0.8em;
	font-weight: normal;
	line-height: 20px;
	height: 20px;
}

.article .article-badges .badge.badge-lower-uvp {
	color: var(--gray-0);
	background: var(--primary);
}

.article .article-badges .badge.badge-onstock {
	color: var(--gray-0);
	background: var(--primary);
}
.article .ion-rating {
	background: #FAAC10;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	padding: 0 0.5em;
	font-size: 0.9em;
	color: var(--gray-0);
	cursor: default;
	position: relative;
	top: 1px;
}

/*********************************
 Article Listing Frames
*********************************/
.article-listing .article-wrap,
.article-listing .article-listing-box .inner{
	/*height: 430px;*/
	height: 18em;
}

.article-listing .article-listing-box {
	float: left;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	position: relative;
}

.article-listing .article-listing-box .inner{
	border-right: 1px solid var(--border);
	font-size: 0.9em;
	padding: 0 2em;
	color: #666;
}

.article-listing .listing-info-box .inner{
	overflow-y: hidden !important;
	overflow: hidden;
	cursor: default;
}

.article-listing .listing-info-box.scrollable .inner{
	overflow-y: auto !important;
	cursor: initial;
}

.article-listing .listing-info-box:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 1px;
	right: 1px;
	height: 60px;
	pointer-events: none;
	background: linear-gradient(rgba(255,255,255,0), #fff 80%);
}

.article-listing .article-listing-box .box-support.inner{
	padding: 0 1em 0 0;
}

.article-listing .article-listing-box .box-bestseller{
	position: relative;
	z-index: 3;
}

#listing-banner > div,
#listing-footer > div {
	margin: 0px 0px 2em;
}

/*********************************
 Article Page Styling
*********************************/

.page_type_1 h1 {
	text-transform: none;
}

#article input.quantity {
	padding: 0.4em 0;
	display: inline-block;
	width: 51px;
	text-align: center;
	font-size: 1.2em;
	margin-right: 0.5em;
}

#article .tabber-nav{
	margin-bottom: 1px;
}

/*********************************
 Navigation
*********************************/
.page_navigation {
	margin: 2em 0;
	width: 100%;
	height: 3.333em;
	position: relative;
	z-index: 1;
	display: inline-block;
	font-size: 0.8em;
	color: var(--gray-90);
}

.page_navigation .navi-bg {
	height: 1px;
	border-bottom: 1px solid var(--border);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
}

.page_navigation .pagenavi {
	margin: 0 auto;
	display: table;
	position: relative;
	background: var(--page);
	padding: 0 0.5em;
}

.page_navigation .pagenavi a, .page_navigation .pagenavi div {
	font-family: 'Delicious',Arial,sans-serif;
	font-size: 1.5em;
	line-height: 2em;
	vertical-align: top;
	padding: 0 0.333em;
	display: inline-block;
	font-weight: 300;
}

.page_navigation .pagenavi a:hover {
	text-decoration: none;
}

.page_navigation .pagenavi .next,
.page_navigation .pagenavi .prev {
	font-size: 2em;
	position: relative;
	top: -0.2em;
	font-weight: 300;
}

.page_navigation .pagenavi .next:hover, 
.page_navigation .pagenavi .prev:hover {
	color: var(--primary);
}

.page_navigation .pagenavi .selected {
	color: var(--primary);
}

.page_navigation .pagenavi .outlined {
	border: 1px solid rgba(87, 108, 112, 0.48);
	width: 2em;
	text-align: center;
	border-radius: 1em;
	height: 2em;
	line-height: 2em;
	margin: 0 0.33em;
}

.page_navigation .pagenavi .outlined:hover {
	border: 0 none;
	background: var(--primary);
	color: var(--gray-0);
}

.page_navigation .pagenavi .disabled {
	opacity: .5;
	text-decoration: none!important;
	pointer-events: none;
}

.page_navigation .pagenavi .disabled:hover{
	text-decoration: none!important;
}

.page_navigation .navi-label {
	text-align: center;
	opacity: 0.7;
	clear: both;
	margin-top: -0.5em;
}

/**********************************
 Cart Summary
***********************************/
.cart-summary table.basket{
	border: 0 none;
}
.cart-summary table.basket td{
	padding: 1em 1.5em;
	border: 0 none;
	border-bottom: 1px solid var(--border);
}

.cart-summary table.basket td select.quantity_sel {
	width: 6.0em;
}

.cart-summary table.basket td.img {
	padding: 0.5em;
}

.cart-summary table.basket td.qty {
	width: 80px;
}

.cart-summary table.basket td.price {
	width: 100px;
}

.cart-summary table.basket td a {
	text-decoration: none;
}

.cart-summary table.basket td p.price_overall,
.cart-summary table.basket td span.price_value {
	white-space: nowrap;
}

.cart-summary table.basket td p.price_overall {
	font-size: 1em;
}

.cart-summary table.basket td div.config {
	padding: 5px;
	background-color: #FAF9F8;
	border-radius: 2px;
}

.cart-summary strong,
.cart-summary b{
	font-weight: normal;
	color: var(--gray-100);
}

.cart-summary table.basket td.price{
	color: var(--primary);
	font-size: 1.3em;
	font-family: "Delicious";
	font-weight: 300;
}

.cart-summary .basket_price_wrapper {
	margin: 0;
	position: relative;
	font-family: "Delicious";
	font-size: 1.2em;
	font-weight: 300;
	padding: 0.5em 0;
	border-bottom: 1px solid var(--border);
}

.cart-summary .basket_price_wrapper p {
	color: #333;
}

.cart-summary .basket_price_wrapper span.price_value,
.cart-summary .basket_price_wrapper span.price_label {
	font-size: 1.4em;
	color: var(--primary);
	font-weight: 800;
	white-space: nowrap;
}

.cart-summary .basket_price_wrapper span.tax_label {
	font-size: 0.95em;
}

.cart-summary .basket_price_wrapper div.info_base  {
	float: left;
	padding: 12px 0 0 5px;
}

.cart-summary .basket_price_wrapper div.total_amount  {
	float: right;
	width: 350px;
	text-align: right;
	padding: 5px;
}

.cart-summary .basket_price_wrapper div.total_amount table tr td {
	text-align: right;
}

.data-line{
	display: inline-block;
	vertical-align: middle;
	width: 64%;
	margin: 0;
}

.data-line li{
	float: left;
}

.data-line li,
.data-line-label{
	display: inline-block;
	padding: 0.4em 0.4em;
}

.data-line-label{
	display: inline-block;
	width: 34%;
	font-size: 0.95em;
	padding-top: 0.5em;
	white-space: nowrap;
	margin: 0;
	clear: both;
	vertical-align: middle;
}

.data-line-label.active{
	color: var(--gray-100);
}

.data-line-label em{
	color: inherit;
	font-size: 0.8em;
	margin-left: 2px;
	position: relative;
	top: -2px;
}

.data-line li input[type="text"],
.data-line li input[type="password"],
.data-line li input[type="submit"],
.data-line li input[type="email"],
.data-line li textarea,
.data-line li select,
.data-line li button{
	width: 100%!important;
}

.data-line .error_text {
	font-size: 0.75em;
	color: var(--primary);
}

.data-line .error_block input,
.data-line .error_block select,
.data-line .error_block textarea{
	border-color: var(--primary)!important;
}

/*********************************
 CHECKOUT
*********************************/
.payment-options .payment-image{
	display: inline-block;
	width: 160px;
	height: 170px;
	background-position: top center;
}

.payment-options .selected .payment-image{
	background-position: bottom center;
}

.payment-options .payment-name{
	font-weight: bold;
	margin-top: 0;
}

.payment-options .selected .payment-name{
	color: var(--primary);
	font-weight: 800;
}