/** NOTES ********************************
Z-INDEX


COLORS
Blue, light:	var(--colHl1)
Gray, light:	var(--colGrayLight)
*/

/** FONTS ********************************/
@font-face {
	font-family: 'Outfit';
	src: url('Outfit-ExtraLight.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('Outfit-SemiBold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'LibreBaskerville';
	src: url('LibreBaskerville-Regular.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'LibreBaskerville';
	src: url('LibreBaskerville-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'LibreBaskerville';
	src: url('LibreBaskerville-Italic.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Kaufmann';
	src: url('kaufmann_regular.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'KaufmannBold';
	src: url('kaufmann_bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}


/** STYLES RESET *************************/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center,cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form,h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup,table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video {
	margin: 0; padding: 0; border: 0;
	font-family: 'Outfit', Arial; font-weight: inherit; font-style: normal;
	font-size: inherit; font: inherit;
	vertical-align: baseline;
}

/** STYLES RESET > HTML5 display-role reset for older browsers **/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q		{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after	{content: ''; content: none;}
table					{border-collapse: collapse; border-spacing: 0;}
tr, td				{vertical-align: top;}

/** STYLES RESET > BROWSERS FIXES **********/
a:focus				{-moz-outline-style: none;}
:focus				{outline: 1;}
a:hover, a:active	{outline: none;}
html					{overflow-y: scroll;}
::selection			{background: #c3effd; color: #000;}
::-moz-selection	{background: #c3effd; color: #000;}
*:focus				{outline: none;}
body, div {
	/* scrollbar-color: dark; */
	scrollbar-color: rgba(0, 0, 0, 0.2) rgba(198, 35, 119, 0.5);
}
::-webkit-scrollbar {
	background-color: rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(198, 35, 119, 0.5);
	-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}

/** ELEMENTS DEFINITIONS *********************/
:root {
	color-scheme: light dark; /* both supported */
}

html {
	/*--colGrayLight: #F5F6F7;	--colGrayLightRGB: rgba(65, 81, 90, 0.1);*/
	/*--colGrayMed: #9BA3A8;		--colGrayMedRGB: rgba(65, 81, 90, 0.5);*/
	/*--colGrayDark: #41515a;		--colGrayDarkRGB: rgba(65, 81, 90, 1);*/

	--colBlueLightU: #cdd8dd;
	--colBlueLight: #36aeef;
	--colBlueMed: #007ec3;
	--colBlueDark: #036ca8;
	--colBlueDarkU: #084977;

	/*--colHl1: #007ec3;			--colHl1RGB: rgba(0, 126, 195, 1);*/
	/*--colHl2: #f26522;			--colHl2RGB: rgba(242, 101, 34, 1);*/
/*
	--colGrayLight: #a8a6a1;
	--colGrayMed: #38383b;		--colGrayMedRGB: rgba(56, 56, 59, 1);
	--colGrayDark: #222222;

	--colHl1: #997255;			--colHl1RGB: rgba(198, 35, 119, 1);
	--colHl2: #8c7758;			--colHl2RGB: rgba(240, 105, 175, 1);
*/
	--colLight: rgba(255,255,255);
	--colGrayLightest: rgba(204,204,204);
	--colGrayLight: rgba(165,165,165);
	--colGrayMed: rgba(127,127,127);
	--colGrayDark: rgba(34,34,34);
	--colDark: rgba(0,0,0);
	--colHl1: rgba(240,105,175);
	--colHl2: rgba(198,35,119);

	--boxShadow: 0 0 10px 0 rgba(0,0,0,0.2);

	margin: 0; padding: 0;
}
body {
	margin: 0; padding: 0;
	font-family: 'Outfit'; font-weight: 100; letter-spacing: 0.05em;
	font-size: 18px; color: #fff; /*letter-spacing:-0.4px;*/
	line-height: 1.3em; color: var(--colDark); background: var(--colLight);
}

a:link				{color: var(--colHl1); text-decoration-color: transparent; text-underline-offset: 0.15em; text-shadow: none;}							/* NOTE: Underlined patch */
a:visited			{color: var(--colHl1);}									/* NOTE: Underlined patch */
a:hover, a:active	{color: var(--colHl1);}									/* NOTE: Underlined patch */
a.no-underline		{text-decoration-color: transparent; /*text-decoration: none !important;*/}	/* NOTE: Underlined patch */

a, input[type='submit'], input[type='button'], input[type='reset'], input[type='image'], label[for], select, button, .button, .pointer	{
	cursor: pointer; appearance: none; border: none; color: var(--colHl1);
}

input, select, textarea	{
	padding: 5px 10px; color: #fff; background: var(--colGrayMed); border: none; font-size: 0.9em; text-shadow: none;
}
input[type=email], input[type=text], select, textarea	{
	width: calc(100% - 20px);
}
option		{background: var(--colGrayMed);}
textarea		{min-width: 250px; min-height: 100px;}
label			{cursor: pointer;}
::placeholder {
	color: var(--colGrayLight);
}

.button, .button_hl, .button_hl_2, .button_transparent, button, input[type='submit'], input[type='reset'], input[type='button'] {
	width: auto; padding: 0.8em 1.6em; text-transform: uppercase; font-size: 0.7em;
	color: var(--colLight) !important; background-color: var(--colGrayLight); font-weight: 500; letter-spacing: 0.1em;
}
.button:hover, button:hover, input[type='submit']:hover, input[type='reset']:hover, .button:hover, input[type=button]:hover	{
	background-color: var(--colHl1); transform: scale(1.1);
}
a.button		{display: inline-block; padding: 0.8em 1.6em;}

.disabled	{opacity: 0.5; pointer-events: none;}
.readonly	{opacity: 0.5;}

/*
select, input[type='text'], input[type='url'], input[type='tel'], input[type='date'], input[type='email'], input[type='password'], input[type='number'], textarea	{
	padding: 6px 6px 6px 8px; border: 1px solid #cccccc;
	font-size: 13px; color: var(--colGrayDark); letter-spacing: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

button	{padding-top: 7px !important;}

.button, .button_hl, .button_hl_2, .button_orange, .button_blue, .button_blue_light, .button_blue_med, .button_white, .button_gray, .button_transparent, button, input[type='submit'], input[type='reset'], input[type='button'] {
	margin: 0px; padding: 13px 25px 13px 25px; border: none; text-decoration-color: transparent;
	font-family: 'Outfit', Arial; font-weight: 400; font-style: normal; color: #fff;
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; line-height: 1.3em;
	background-color: var(--colHl1);
}

.button:hover, button:hover, input[type='submit']:hover, input[type='button']:hover			{

}
line-height: 1.25em;

*/

h1, h2, h3, h4, h5	{font-family: 'LibreBaskerville'; font-weight: 500; line-height: 1.25em; padding-bottom: 1em;}
h1, .h1, .huge			{font-size: 3em; opacity: 0.9;}
h2, .h2, .biggest		{font-size: 2.5em;}
h3, .h3, .bigger		{font-size: 2.0em;}
h4, .h4, .big			{font-size: 1.5em;}
h5, .h5, .large			{font-size: 1em;}
/*
.normal					{font-size: 18px !important;}
.small					{font-size: 13px !important;}
.smaller					{font-size: 10px !important; letter-spacing: 0.05em;}
.smallest				{font-size: 10px !important; letter-spacing: 0.05em;}
*/
.small					{font-size: 0.85em !important;}


p, .p						{padding: 0px 0px 1em 0px; line-height: 1.6em;}

.underline				{border-bottom: 1px solid var(--colGrayDark); display: inline-block; line-height: 0.85em;}
i, em, blockquote, .italic, .blockquote	{font-weight: 300; font-style: italic;}
.bold-extra, .bolder	{font-weight: 700 !important; font-style: normal;}
b, strong, .bold		{font-weight: 500 !important; font-style: normal;}
.normal-weight			{font-weight: 300 !important; font-style: normal;}
.light					{font-weight: 100 !important; font-style: normal;}

hr, hr.white	{height: 1px; border: none; color: #dce8ee; background: #dce8ee;}

table th, .label	{font-weight: bold; text-align: left; padding: 1px 20px 1px 1px;}
table td				{padding: 1px;}
/*table.zebra th							{background: rgba(0, 0, 0, 0.25);}*/
table.zebra th, table.zebra td {padding: 5px;}
table.zebra tr:nth-child(even) {}
table.zebra tr:nth-child(odd) {background: rgba(255, 255, 255, 0.1);}

/*** Lists ***/
ol, ul					{padding: 0px 0px 1em 0px; margin: 0px;}
ol li, ul li	{
	padding: 0px 0px 0.4em 1em; margin: 0px; position: relative;
	background: transparent !important; /*color: var(--colGrayDark);*/ line-height: 1.6em;
}
ul li	{
	 list-style: none;
}
ol li::before, ol.bullets li::before, ul li::before, ul.bullets li::before	{
	color: var(--colHl1); position: absolute; left: 0px; font-size: 2.5em;
}
ul li::before, ul.bullets li::before	{
	content: '\2022'
}

/*** Lists Size ***/
/* Can use any size classes in styles.css */

/*** Lists Types ***/
ul.checkmarks li, li.checkmarks 		{padding-left: 23px;}
ul.checkmarks li::before				{content: url(/res/img/commons/html/li_checkmark_orange.png); top: 0.1em;}

ul.alphas li, li.alphas, ul.numbers li, li.numbered 				{padding-left: 5em;}
ul.alphas li::before, ul.numbers li::before {
	content: "1"; top: 0; color: var(--colHl1); /*border: 1px solid var(--colGrayLight); border-radius: 50%;*/
	height: 1em; width: 1em; line-height: 1em; text-align: center; font-weight: 500;
}
ul.numbers li:nth-child(2)::before {content: "2";}
ul.numbers li:nth-child(3)::before {content: "3";}
ul.numbers li:nth-child(4)::before {content: "4";}
ul.numbers li:nth-child(5)::before {content: "5";}
ul.numbers li:nth-child(6)::before {content: "6";}
ul.numbers li:nth-child(7)::before {content: "7";}
ul.numbers li:nth-child(8)::before {content: "8";}
ul.numbers li:nth-child(9)::before {content: "9";}

ul.alphas li:nth-child(1)::before {content: "A";}
ul.alphas li:nth-child(2)::before {content: "B";}
ul.alphas li:nth-child(3)::before {content: "C";}
ul.alphas li:nth-child(4)::before {content: "D";}
ul.alphas li:nth-child(5)::before {content: "E";}

/*** Lists Colors ***/
ul.gray li::before						{color: var(--colGrayDark);}
ul.hl, ul.blue li::before				{color: var(--colHl1);}
ul.hl_2, ul.orange li::before			{color: var(--colHl2);}
ul.white li, ul.white li::before		{color: #FFF;}

/*** Lists Paddings ***/
ul.compact li				{padding-bottom: 0px;}
ol.padded, ul.padded		{padding: 1em 0px 0px 0;}
ol.padded li, ul.padded li				{padding: 0px 0px 1.5em 1.75em;}
ul.padded li::before		{left: 5px;}

ul.checkmarks.padded		{left: 1.5em;}
ul.alphas.padded li, li.alphas.padded, ul.checkmarks.padded li, li.checkmarks.padded, ul.numbers.padded li, li.numbered.padded	{padding-left: 4em;}


/** MAIN CLASSES *****************************/
.clear, .spacer, .spacer_mid, .spacer_small	{clear: both;}
.spacer			{height: 50px;}
.spacer_mid		{height: 25px;}
.spacer_small	{height: 10px;}

.bad			{color: #CC0000 !important;}	.bad_bg		{background-color: #CC0000 !important;}	.bad_brd	{border: 2px solid #CC0000 !important;}
.good			{color: #339900 !important;}	.good_bg	{background-color: #339900 !important;}	.good_brd	{border: 2px solid #339900 !important;}
.warn			{color: #CCCC00 !important;}	.warn_bg	{background-color: #CCCC00 !important;}	.warn_brd	{border: 2px solid #CCCC00 !important;}

.hl				{color: var(--colHl1); border-color: var(--colHl1);}
.hl_2			{color: var(--colHl2); border-color: var(--colHl2);}
.hl_bg			{color: var(--colLight) !important; background-color: var(--colHl1) !important; border-color: var(--colHl1);}
.hl_bg_2		{color: var(--colLight) !important; background-color: var(--colHl2); border-color: var(--colHl2);}

.uppercase, .upper		{text-transform: uppercase;}
.capitalize, .caps		{text-transform: capitalize;}
.nobr			{white-space: nowrap; text-overflow: ellipsis;}
.nowrap			{white-space: nowrap; overflow-x: hidden; overflow-y: auto;}

.hide			{display: none;}
.show			{display: inline;}

.align_left		{text-align: left;}
.align_center	{text-align: center; margin-left: auto; margin-right: auto;}
.align_right	{text-align: right;}

.center			{text-align: center; margin-left: auto; margin-right: auto;}
.longdesc		{display: none;}
.no-scroll		{overflow: hidden;}

.tablet_on		{visibility: hidden; display: none;}
.tablet_off		{visibility: visible; display: inline;}
.mobile_on		{visibility: hidden; display: none;}
.mobile_off		{visibility: visible; display: inline;}
.cell_on		{visibility: hidden; display: none;}
.cell_off		{visibility: visible; display: inline;}

.block_25, .block_33, .block_50, .block_66, .block_75, .block_100	{display: inline-block; vertical-align: top; padding: 0px; margin: 0px;}
.block_25		{width: 25%;}
.block_33		{width: 33%;}
.block_50		{width: 49%; max-width: 545px;}
.block_66		{width: 66%;}
.block_75		{width: 75%;}
.block_100		{width: 100%;}

.block_pad					{padding: 0px 20px 0px 20px; line-height: 1.6em;}
.block_pad img				{max-width: 100%; height: auto;}
.block_pad.left				{padding: 0px 40px 0px 0px;}
.block_pad.right			{padding: 0px 0px 0px 40px;}
.block_66 .block_pad.left	{padding: 0px 80px 0px 0px;}
.block_33 .block_pad.right	{padding: 0px 0px 0px 0px;}


/** SITE STYLES ******************************/
#header				{
	width: calc(100% - 20px); padding: 10px; position: fixed; top: 0; z-index: 100; text-align: center;
	background:var(--colLight); box-shadow: var(--boxShadow); transition: background 300ms ease-in 200ms;
	/*background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); */
}
#header a			{color: inherit;}
#header.scrolled	{background: var(--colLight);}
#header .block_33	{vertical-align: middle;}

#header_logo	{
	line-height: 1.5em; position: relative; /*margin-left: 35px;*/
	height: 40px; color: var(--colHl1); font-size: 1.25em; display: flex;
	background-position: left center; background-repeat: no-repeat; background-size: auto 100%;
	background-image: url(/images/commons/logo.webp);
}

#header_center > div		{display: inline-block; vertical-align: top; padding: 5px 10px; transition: background-color 200ms ease-in 100ms;}

#header_center > div:hover	{
	background-color: rgba(198, 35, 119, 0.66);
	.header_nav_head	{color: var(--colLight);}
}
/*#header_center > div:hover */

#header_right		{text-align: right;}
#header_right > i	{padding-left: 10px; font-size: 1.25em;}

.header_nav			{display: inline-block; position: relative; color: inherit; border-radius: 5px;}
.header_nav_subs	{
	padding: 0px 20px 20px 20px; margin: 18px 0 0 -30px; position: absolute; display: none; /*transform: translateX(-50%);*/ opacity: 0; 
	background: rgba(255, 255, 255, 1);	transition: opacity 300ms ease-in 200ms, background 300ms ease-in 200ms; 
	border-radius: 0 0 10px 10px; white-space: nowrap; box-shadow: 0px -10px #FFFFFF, 0 0px 10px 0 rgba(0,0,0,0.2);
}
.header_nav.selected	.header_nav_subs	{opacity: 1; display: block;}
/*#header.scrolled .header_nav_subs			{border: none; background: rgba(255, 255, 255, 0.9);}*/
.header_nav_sub			{min-width: 100px; padding: 3px 10px; border-radius: 5px; text-align: left;}
.header_nav_sub:hover	{color: var(--colLight); background-color: rgba(198, 35, 119, 0.66);}

#header_nav_mobile	{display: none; line-height: 2em; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.9); padding: 20px;}
.share				{cursor: pointer;}

#footer				{color: var(--colLight); background-color: var(--colGrayDark);}
#footer a			{color: inherit;}
#footer_left		{}
#footer_left img	{width: 130px; height: auto; margin-right: 20px; float: left;}
#footer_left i		{padding: 5px 5px 0px 0px;}
#footer_center		{text-align: center;}
#footer_center > div		{display: inline-block; vertical-align: top; padding: 0px 10px;}
#footer_right		{text-align: right;}

.layer				{position: relative; padding: 50px 0px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.layer_wrapper		{width: 1120px; max-width: 100%; margin: 0 auto; position: relative; clear: both;}
.layer_content		{padding: 50px 0px 50px 0px; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25);}
.layer_content .layer_content		{padding: 0px;}
.layer_compact		{padding: 25px 0px; /*min-height: 250px;*/}
#footer .layer_content {padding-bottom: 50px;}

.layer_mainfeature	{
	padding: 4rem 0 0 0; min-height: 500px; position: relative; z-index: +1;
	display: flex; justify-content: center; align-items: center; background-size: cover;

	.layer_content	{text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.25);}
	.layer_header	{padding: 50px 0 !important;}

}

#home .layer_mainfeature			{height: 100vh;}
.layer_mainfeature.layer_compact	{min-height: 250px; /*padding-top: 30px;*/}

.layer_mainfeature::before	{
	content: " "; height: 100%; position: absolute; top: 0; left: 0; width: 100%;
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,1) 100%);
}

.layer_imaged				{background-size: cover;}

.layer_shadowed::before	{
	content: " "; height: 100%; position: absolute; top: 0; left: 0; width: 100%;
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,1) 100%);
}
.layer_shadowed.left::before	{
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
.layer_shadowed.right::before	{
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}

.layer_light.layer_shadowed::before	{
	/*background: rgb(168,166,161);*/
	background: linear-gradient(90deg, rgba(168,166,161,0) 0%, rgba(168,166,161,1) 50%, rgba(168,166,161,1) 100%);
}

.layer_header			{padding-bottom: 45px;}
.layer_tagline			{padding-bottom: 45px; font-size: 1.25em; font-style: italic; opacity: 0.8;}
.layer_footer			{padding-top: 45px;}
.block_pad .layer_header	{padding-bottom: 35px;}


.layer_slide_togg		{position: relative; border-bottom: 1px dashed var(--colHl1); cursor: help;}
.layer_slide_toggs li:hover::before	{content: '\f061'; font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 1em; left: -5px;}

.layer_slide_panns			{position: relative; width: 100%; height: 100px; overflow-y: auto;}
.layer_slide_pann			{position: absolute; width: 100%; height: 100%; left: -1000px;}
.layer_slide_pann > div		{padding: 20px;}
.layer_slide_pann:first-child {left: 0;}
.layer_slide_pann.selected	{z-index: +5;}


.tile				{
	width: 100%; padding-bottom: 4rem; position: relative; box-shadow: var(--boxShadow); overflow: hidden; 
	color: var(--colDark); background-color: var(--colLight);
	
	.image			{width: 100%; height: 175px; background-size: cover; background-position: center;}
	.header			{padding: 0.75rem 1.5rem; color: var(--colLight); background-color: var(--colGrayLight); font-weight: 700; font-size: 1.25rem;}
	.content		{padding: 0.75rem 1.5rem;}
	.more			{position: absolute; right: 0; bottom: 0;}
}
.tile:hover			{
	.header			{background-color: var(--colHl1);}
}

.card				{
	background-color: transparent; /*width: calc(33% - 52px);*/ width: 100%; /*max-width: 300px;*/ /*margin: 0px 25px 50px 10px;*/ height: 275px; perspective: 1000px; display: inline-block;

	.header			{padding: 20px; /*color: var(--colHl1);*/ font-weight: 700; font-size: 1.25em;}
	.content		{padding: 20px;}
}
.card-inner			{position: relative; width: 100%; height: 100%; text-align: left; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.card:hover .card-inner {transform: rotateY(180deg);}
.card-front, .card-back	{position: absolute; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden;}
.card-front			{background-color: var(--colLight);}
.card-back			{background-color: var(--colLight); transform: rotateY(180deg);}

.card .prod_tile		{width: 100%; height: 450px; display: inline-block; position: relative;}
.card .prod_tile_head	{padding: 20px 20px 10px 20px;}
.card .prod_tile_desc	{padding: 0px 20px 10px 20px;}
.card-front .prod_tile_desc	{max-height: 85px; overflow: hidden;}
.card .prod_tile_foot	{position: absolute; bottom: -55px; right: 0; padding: 0px;}

.fa-desc			{margin: 0 auto; font-size: 7.5em; color: var(--colGrayMed); display: block; transition-duration: 0.5s;}
.fa-desc:hover		{color: var(--colHl1) !important; opacity: 1;}

#popbox				{position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.85); z-index: 200; display: none;}
.popbox				{cursor: pointer;}
.popbox_wrap		{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%;}
/*.popbox_close		{cursor: pointer; position: absolute; top: -20px; right: -20px; opacity: 0.75;}*/
.popbox_close		{position: absolute; top: 10px; right: 10px; opacity: 0.66; font-size: 1.5em; cursor: pointer;}
.popbox_close:hover {font-weight: 700;}
.popbox_cont		{}
#popboxes			{display: none;}

.dropper				{padding-left: 15px; position: relative; text-shadow: none; cursor: pointer;}
.dropper::before	{content: "\f063"; left: -10px; position: relative; font-family: "Font Awesome 5 Free"; font-weight: 700;}
.button.dropper	{padding-left: 25px;}
.dropped				{margin-top: -750px; opacity: 0; padding-top: 25px; max-heigth: 750px; transition: margin-top 600ms ease-in 000ms, opacity 600ms ease-in 500ms; pointer-events: none;}
.dropped.selected	{margin-top: 0px; opacity: 1; max-heigth: auto; pointer-events: auto;}

.caroussel				{width: 100%;}
.caroussel_main			{position: relative; height: 250px; max-width: 100%;}
.caroussel_arrow	{
	width: 75px; height: 100%; line-height: 275px; position: absolute; /*position: fixed;*/ cursor: pointer; display: none;
	font-size: 3em; text-align: center; opacity: 0.75; transition-duration: 0.5s; z-index: +1; color: var(--colLight);
}
.caroussel_arrow:hover	{opacity: 1; color: var(--colHl1);}
.caroussel_prev			{left: 0px; /*padding-right: 50px;*/}
.caroussel_next			{right: 0px; /*padding-left: 50px;*/}
.caroussel_zoom			{position: absolute; top: 10px; right: 10px; font-size: 1.5em; opacity: 0.5; cursor: pointer; z-index: +1;}
.caroussel_zoom:hover	{opacity: 0.75; color: var(--colHl1);}
.caroussel_content		{width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute;}
.caroussel_thumbs					{height: 125px; /*padding: 5px;*/ margin: 15px 0px 0px 0px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; /*background: rgba(0, 0, 0, 0.25);*/}
.caroussel_thumb					{
	width: 100px; height: 100px; margin: 0px 10px 10px 0px; display: inline-block; 
	background-size: cover; background-position: center; cursor: pointer; opacity: 0.5;
}
.caroussel_thumb:last-child	{margin: 0px 0px 10px 0px;}
.caroussel_thumb.selected		{box-sizing: border-box; border: 3px solid var(--colHl1); opacity: 1;}

.popbox_cont {
	.caroussel_main		{height: 500px;}
	.caroussel_arrow	{line-height: 550px;}
	.caroussel_zoom		{display: none;}
}


.slider {
	position: relative;

	*				{transition-duration: 0.33s;}

	.arrow			{display: none;}
	
	.slider_slides			{overflow: hidden; position: relative;}
	.slider_slide			{display: none;}
	.slider_slide.selected	{display: block;}

	.slider_thumbs			{display: none;}
}
.slider.arrowed {
	.arrow	{
		color: var(--colGrayLightest); position: relative; cursor: pointer; z-index: +1;
		width: 50px; height: 100%; cursor: pointer; display: block;
		font-size: 3em; text-align: center; /*opacity: 0.5;*/  z-index: +1;
		position: absolute; top: 0; /*top: 50%; transform: translateY(-60%);*/
	}
	.arrow:hover		{color: var(--colHl1); opacity: 1;}
	.arrow .fas			{position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-60%);}

	.previous			{left: 0px; background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, var(--colLight) 50%, var(--colLight) 100%);}
	.next				{right: 0px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--colLight) 50%, var(--colLight) 100%);}

	.slider_slides		{padding: 0 75px;}
}
.slider.thumbed {
	.slider_thumbs			{padding: 1.5rem 0 0 0; text-align: center; display: block;}

	.slider_thumb			{
		padding: 0 0.5rem; display: inline-block; cursor: pointer;
		color: var(--colGrayLightest);
	}

	.slider_thumb:hover, .slider_thumb.selected	{color: var(--colHl1);}
}


.layer_gray-light, .layer_gray-med, .layer_gray-dark, .layer_dark, .layer_hl1, .layer_hl2		{color: var(--colLight);}

.layer_light {
	.button			{background-color: var(--colGrayMed);}
	.card-front		{background-color: var(--colGrayMed);}
	.card-back		{background-color: var(--colGrayMed);}
}

.layer_gray-light {
	.button		{background-color: var(--colHl1) !important;}
	.fa-desc	{color: var(--colLight);}
}
.layer_gray-light.layer_shadowed::before	{
	background: linear-gradient(90deg, rgba(165,165,165,0) 0%, var(--colGrayLight) 50%, var(--colGrayLight) 100%);
}
.layer_gray-light.layer_shadowed.right::before	{
	background: linear-gradient(90deg, var(--colGrayLight) 0%, var(--colGrayLight) 50%, rgba(165,165,165,0) 100%);
}

.layer_gray-med	{
	.fa-desc	{color: var(--colLight);}
}

.layer_hl1 {
	.button:hover		{background-color: var(--colGrayMed);}
}


.fadeIn		{opacity: 0; animation: fadeIn 1s ease-in-out 0s forwards;}
.fadeOut	{opacity: 1; animation: fadeOut 2s ease-in-out 3s forwards;}
@keyframes fadeIn {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeOut {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}

.pulse			{color: inherit; animation: pulsing 15s infinite;}
.pulse-gray		{color: var(--colGrayMed); animation: pulseGray 15s infinite;}
@keyframes pulsing {
	0%   {color: inherit;}
	25%  {color: inherit;}
	50%  {color: var(--colHl1);}
	75%  {color: var(--colHl1);}
	100% {color: inherit;}
}
@keyframes pulseGray {
	0%   {color: var(--colHl1);}
	25%  {color: var(--colHl1);}
	50%  {color: var(--colGrayMed);}
	75%  {color: var(--colGrayMed);}
	100% {color: var(--colHl1);}
}

.scroll-in-left				{opacity: 0; animation: scrollInLeft 1s ease-out 0s forwards;}
@keyframes scrollInLeft {
	0%   {opacity: 0; transform: translateX(-110%);}
	100% {opacity: 1; transform: translateX(0);}
}
.scroll-in-right			{opacity: 0; animation: scrollInRight 1s ease-out 0s forwards;}
@keyframes scrollInRight {
	0%   {opacity: 0; transform: translateX(110%);}
	100% {opacity: 1; transform: translateX(0);}
}
.scroll-out-left	{opacity: 1; animation: scrollOutLeft 1s ease-out 0s forwards;}
@keyframes scrollOutLeft {
	0%   {opacity: 1; transform: translateX(0);}
	100% {opacity: 0; transform: translateX(-110%);}
}
.scroll-out-right	{opacity: 1; animation: scrollOutRight 1s ease-out 0s forwards;}
@keyframes scrollOutRight {
	0%   {opacity: 1; transform: translateX(0);}
	100% {opacity: 0; transform: translateX(110%);}
}

/*
.fadeIn, .fade-in			{opacity: 0; animation: fadeIn 0.5s ease-in-out 0s forwards;}
@keyframes fadeIn {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
.fadeOut, .fade-out			{opacity: 1; animation: fadeOut 1s ease-in-out 0s forwards;}
@keyframes fadeOut {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}
.fadeLoop, .fade-loop		{opacity: 0; animation: fadeLoop 3s ease-in-out 0s infinite;}
@keyframes fadeLoop {
	0%   {opacity: 0.25;}
	50%  {opacity: 1;}
	100% {opacity: 0.25;}
}
*/


/** DARK *************************************/
.dark {
	/*
	--colLight: rgba(255,255,255);
	--colGrayLight: rgba(165,165,165);
	--colGrayMed: rgba(127,127,127);
	--colGrayDark: rgba(34,34,34);
	--colDark: rgba(0,0,0);
	--colHl1: rgba(240,105,175);
	--colHl2: rgba(198,35,119);

	38383b
	*/

	--colLight: rgba(0, 0, 0, 1);
	--colDark:  rgba(245, 245, 245, 1);

	/*--colTextHex: #EEEEEE;			--colText: rgba(238, 238, 238, 1);*/

	--colGrayLightHEX: #a8a6a1;		--colLight: rgba(168, 166, 161, 1);
	--colGrayMedHEX: #38383b;		--colGrayMed: rgba(56, 56, 59, 1);
	--colGrayDarkHEX: #222222;		--colGrayDark: rgba(34, 34, 34, 1);

	background: var(--colGrayDark);

	*, input[type="button"]			{color: var(--colDark) !important;}
	.hl								{color: var(--colHl1) !important;}
	.hl_2							{color: var(--colHl2) !important;}
	input[type=text], select, textarea {background: rgba(56, 56, 59, 0.75);}

	#header, .header_nav_subs		{background: rgba(0, 0, 0, 0.75) !important;}
	#header_logo					{background-image: url(/images/commons/logo_inv.webp);}

	.layer_mainfeature::before {
		background: var(--colGrayMed);
		background: linear-gradient(90deg, var(--colGrayDark) 0%, rgba(34,34,34,0.25) 50%, var(--colGrayDark) 100%);
	}
	.layer_shadowed::before			{background: linear-gradient(90deg, var(--colGrayDark) 0%, rgba(34,34,34,0.25) 50%, var(--colGrayDark) 100%);}
	.layer_shadowed.right::before	{background: linear-gradient(90deg,var(--colGrayDark) 0%, var(--colGrayDark) 50%, rgba(34,34,34,0) 100%);}
	.layer_shadowed.left::before 	{background: linear-gradient(90deg, rgba(34,34,34,0) 0%, var(--colGrayDark) 50%, var(--colGrayDark) 100%);}

	.layer_gray-light.layer_shadowed::before	{background: linear-gradient(90deg, rgba(165,165,165,0) 0%, var(--colGrayMed) 50%, var(--colGrayMed) 100%);}
	.layer_gray-light.layer_shadowed.left::before	{background: linear-gradient(90deg, rgba(165,165,165,0) 0%, var(--colGrayMed) 50%, var(--colGrayMed) 100%);}
	.layer_gray-light.layer_shadowed.right::before	{background: linear-gradient(90deg, var(--colGrayMed) 0%, var(--colGrayMed) 50%, rgba(165,165,165,0) 100%);}

	.tile		{background: var(--colGrayMed); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);}

	/*#footer		{color: var(--colDark);}*/
}

/** RESPONSIVENESS ***************************/
@media (max-width: 1040px) {
}

@media (max-width: 980px) {
	.tablet_on		{visibility: visible; display: inline;}
	.tablet_off		{visibility: hidden; display: none;}
}

@media (max-width: 675px) {
	.block_25, .block_33, .block_50, .block_66, .block_75, .block_100		{width: 100%;}
	.block_pad, .block_pad_left, .block_pad_right								{padding: 0px 0px 50px 0px !important;}
	.mobile_on		{visibility: visible !important; display: inline-block !important;}
	.mobile_off		{visibility: hidden !important; display: none !important;}
	.mobile_wide	{max-width: calc(100% - 20px) !important; width: calc(100% - 20px) !important; padding: 0px 10px 45px 10px !important; clear: both !important;}


	#header_left	{width: 32% !important;}
	#header_right	{width: 65% !important;}
	#footer .layer_content {padding-bottom: 25px !important;}
	#footer_left	{width: 65% !important;}
	#footer_right	{width: 32% !important;}

	.layer			{padding: 0px;}
	.layer_content	{padding-bottom: 5px;}

	.card 			{width: calc(100% - 30px);}
}

@media (max-width: 340px) {
	/*div			{background-image: none !important;}*/
	.cell_on		{visibility: visible; display: inline;}
	.cell_off		{visibility: hidden; display: none;}
	.cell_wide		{max-width: calc(100% - 20px) !important; width: calc(100% - 20px) !important; padding-left: 10px !important; padding-right: 10px !important; clear: both !important;}
}