@font-face 	{font-family: Roboto; src: url('fonts/Roboto-Regular.ttf'); font-display: block}
@font-face 	{font-family: RobotoSB; src: url('fonts/Roboto-Medium.ttf'); font-display: block}

* 			{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
*		 	{-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent}
*			{margin: 0; padding: 0}
*			{overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto}

html,body 	{font-family: Roboto; font-size: 14px; margin: 0; padding: 0; height: 100%}
img			{max-width: 100%; height: auto; border: none}

strong, b	{font-family: RobotoSB; font-weight: normal}
h1,h2,h3,h4,h5,h6 {font-family: RobotoSB; font-weight: normal}
ul.ul-none li {list-style: none}
/*ul li::before {content: '\203A'; margin-left: -15px; margin-right: 10px}*/
ul			{margin-bottom: 1.5em; margin-top: 1.5em}
ul li		{list-style: square; padding-left: 0px; margin-left: 40px}
ol li		{margin-left: 40px; padding-left: 5px}
/*li			{padding-bottom:0.7em}*/
button		{outline: none}
.hidden		{display: none}
.visible	{display: block}
.pointer	{cursor: pointer}
.upp		{text-transform: uppercase}
.no-results	{text-align: center; font-size: 15px; padding: 10px; margin: auto}

.aname		{padding-bottom: 50px}
.border777	{border: 1px solid #777}
.red		{color: #ff0000; padding-left: 5px}
.orange		{color: #f8C715}
.orange-bg	{background: #f8C715}
.square		{background: #fff; padding: 0 13px; color: #222; margin-right: 10px; margin-left: -5px}
.w50		{width: 50%}
.w30		{width: 30%}
.w35		{width: 35%}
.w65		{width: 65%}
.w70		{width: 70%}
.w75		{width: 75%}
.w95		{width: 95%}
.w100		{width: 100%}
.f20		{font-size: 20px}
.bg-777		{background: #777}
.bg-eee		{background: #eee}
.bg-222		{background: #222; color: #fff}
.f-fff		{color: #fff}
.center		{display: inline-block; text-align: center; width: 100%}
.left		{text-align: left}
.right		{text-align: right}
.hide		{display: none}
.viditelne 	{display: inline-block}
#show-card	{background: green}
.pad0		{padding: 0}
.pad5		{padding: 5px}
.pad10		{padding: 10px}
.pad20		{padding: 20px}
.pad-top-10	{padding-top: 10px}
.pad-bot-10	{padding-bottom: 10px}
.marginLR15	{margin-left: 15px; margin-right: 15px}

.cart-top,.cart-null	{display: inline-block; padding: 0 7px; color: #000; font-size: 12px}
.cart-top	{background: #ffdb15}
.cart-null	{background: none; color: #fff}

.bold		{font-family: RobotoSB}
.table		{display: table; width: 100%; height: 100%}
.tr			{display: table-row}
.td			{display: table-cell; vertical-align: middle; text-align: center; position: relative}
.banner-left	{display: table-cell; width: 50%; vertical-align: middle; text-align: left; padding-left: 20px; position: relative}
.banner-right	{display: table-cell; width: 50%; vertical-align: middle; text-align: right; position: relative}

/* ADMIN */

#admin-body	{width: 95%; margin: auto; margin-top: 40px; text-align: center; padding-bottom: 140px; position: relative}

.aa-block					{display: block; color: #000; text-align: center}
.aa-table 					{display: table; width: 99%; border-collapse: collapse; margin: auto; font-size: 11px}
.aa-user-table 				{display: table; width: 50%; border-collapse: collapse; margin: auto}

.aa-th						{display: table-row; background: #222; color: #fff}
.aa-tr						{display: table-row; color: #000; text-decoration: none}
.aa-tr:nth-of-type(odd)		{background: #f2f2f2; color: #000; text-decoration: none}
.aa-tr:nth-of-type(even)	{background: #e2e2e2; color: #000; text-decoration: none}
.aa-tr:hover				{background: #fdfd82; color: #000}

a.aa-tr						{display: table-row; color: #000; text-decoration: none}
a.aa-tr:nth-of-type(odd)	{background: #f2f2f2; color: #000; text-decoration: none}
a.aa-tr:nth-of-type(even)	{background: #e2e2e2; color: #000; text-decoration: none}
a.aa-tr:hover				{background: #fdfd82; color: #000}

.aa-tdid, .aa-tdl,
.aa-tdlc, .aa-tdr,
.aa-tdc, .aa-tdcp, .aa-tds	{display: table-cell; border: 1px solid #fff; font-size: 11px; font-family: Roboto; vertical-align: middle; height: 35px; white-space: nowrap}
.aa-tdid					{width: 80px}
.aa-tdl 					{text-align: left; padding: 5px 10px}
.aa-tdlc					{text-align: center; padding: 0}
.aa-tdr						{text-align: right; padding: 2px 10px; width: 90px}
.aa-tdc						{text-align: center; padding: 0}
.aa-tdcp					{width: 80px; padding: 5px}
.aa-tds						{text-align: center; padding: 0; width: 70px}
.aa-title					{display: none; font-size: 10px; font-family: Roboto}

/* ADMIN - order */

.aa-block-table	{display: table; width: 100%}
.aa-block-L		{display: table-cell; width: 35%; padding: 10px 5px}
.aa-block-R		{display: table-cell; width: 65%; padding: 10px 5px}

.aa-o-header	{display: table-header; font-size: 18px; padding: 5px 10px; border: 1px solid #bbb; color: #777; font-family: RobotoSB; text-align: left}

.aa-o-table 	{display: table; width: 100%; border-collapse: collapse; border: none; margin-top: 10px}

.aa-o-tr		{display: table-row; color: #000; text-decoration: none}

.aa-o-th		{display: table-row; background: #222; color: #fff; font-size: 14px}
.aa-o-th-L,
.aa-o-th-C,
.aa-o-th-R		{display: table-cell; padding: 5px 10px; border: 1px solid #fff}
.aa-o-th-L		{text-align: left}
.aa-o-th-C		{text-align: center}
.aa-o-th-R		{text-align: right}

.aa-o-td1,
.aa-o-td2,
.aa-o-td2-form	{display: table-cell; border: 1px solid #fff; font-size: 12px; text-align: left; vertical-align: middle}
.aa-o-td1		{background: #555; color: #fff; width: 30%; padding: 5px 10px}
.aa-o-td2		{background: #dfdfdf; text-align: left; font-size: 12px; padding: 5px; padding-left: 10px}
.aa-o-td2-form	{background: #ccc; text-align: left; font-size: 12px; padding: 5px; padding-left: 10px}

input[type=text].aai	{margin: 0; padding: 6px; text-align: left; font-family: Roboto; font-size: 12px; color: #000; width: 100%; height: 100%}
input[type=text].aai	{background: rgba(255, 255, 255, 0.9); border: none}
/*input[type=text].aai:focus {background: #fdfd82}*/

.aa-odt-table 	{display: table; width: 100%; border-collapse: collapse; border: none; margin-top: 10px}

.aa-odt-tr						{display: table-row; color: #000}
.aa-odt-tr:nth-of-type(odd)		{background: #f2f2f2}
.aa-odt-tr:nth-of-type(even)	{background: #e2e2e2}
.aa-odt-tr:hover				{background: #fdfd82}
.aa-odt-tr:last-child			{border-top: 3px double #bbb}

.aa-odt-td-L,
.aa-odt-td-C,
.aa-odt-td-R	{display: table-cell; border: 1px solid #fff; font-size: 11px; text-align: left; padding: 5px 10px; vertical-align: middle; width: auto}

.aa-odt-td-L	{text-align: left}
.aa-odt-td-C	{text-align: center}
.aa-odt-td-R	{text-align: right}

/* -------------------- */

#input1,
#input2,
#input3,
#input4				{background: rgba(255, 255, 255, 0.9); border: 1px solid #aaa; position: relative; margin-left: -5px}
.aa-button			{position: absolute; right: 3px; background: url('pics/button_play.svg') no-repeat center center / 18px; border: none; width: 20px; height: 100%; cursor: pointer}
.aa-button:hover 	{background: url('pics/button_play_hover.svg') no-repeat center center / 18px; width: 20px; height: 100%}
.aa-button:hover	{-webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s}
.aa-button-x		{position: absolute; right: 3px; background: url('pics/button_close.svg') no-repeat center center / 18px; border: none; width: 20px; height: 100%; cursor: pointer}
.aa-button-x:hover 	{background: url('pics/button_close_hover.svg') no-repeat center center / 18px; width: 20px; height: 100%}
.aa-button-x:hover	{-webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s}
.aa-open			{background: #dfdfdf}
.aa-in-progress		{background: #fdfd82}
.aa-closed			{background: #90ee90}
.aa-in-progress:hover,aa-closed:hover	{background: #ffdb15}

.crop 				{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px; width: 100px}​

/* ADMIN - page */

.aa-page-table	{display: block; width: 100%; border-collapse: collapse; margin: auto; margin-bottom: 22px}
.aa-page-tr		{display: block; color: #000; text-decoration: none}
.aa-page-td		{display: block; border: none; padding: 0; text-align: center; font-size: 11px; font-family: Roboto}

a.page:link,
a.page:active,
a.page:visited	{display: inline-block; padding: 8px 0; margin: 2px; background: #33cd33; cursor: pointer; color: #fff; text-decoration: none; width: 30px; border-radius: 3px}
a.page:hover	{background: #555; color: #fff}

.page-selected	{display: inline-block; padding: 8px 0; margin: 2px; background: #000; color: #fff; width: 30px; border-radius: 3px}

.a-product-form	{display: table-row; color: #000; text-decoration: none}
.a-product-form:nth-of-type(odd)		{background: #f2f2f2; color: #000; text-decoration: none}
.a-product-form:nth-of-type(even)	{background: #e2e2e2; color: #000; text-decoration: none}
.a-product-form:hover				{background: #fdfd82; color: #000}

input[type=text].input-price	{margin: 0; padding: 0 10px; border: 1px solid #bbb; text-align: right; font-family: Roboto; font-size: 12px; color: #000; width: 100%; height: 100%}
input[type=text].input-price	{background: rgba(255, 255, 255, 0.5)}

input[type=text].input-order	{margin: 0; padding: 0 10px; border: 1px solid #bbb; text-align: center; font-family: Roboto; font-size: 12px; color: #000; width: 100%; height: 100%}
input[type=text].input-order	{background: rgba(255, 255, 255, 0.5)}

select.select-price 	{margin: 0; padding: 0 5px; border: 1px solid #bbb; font-family: Roboto; font-size: 12px; color: #000; width: 100%; height: 100%}
select.select-price		{background: rgba(255, 255, 255, 0.5)}

select.select-order 	{margin: 0; padding: 5px; border: none; font-family: Roboto; font-size: 12px; color: #000; width: calc(100% - 26px); height: 100%}
select.select-order		{background: rgba(255, 255, 255, 0.5)}

input[type=submit].submit-price					{background: #999; font-size: 11px; text-align: center; padding: 0; margin: 0; border: none; width: 100%; height: 100%}
input[type=submit].submit-price:hover			{background: #555}

/* ADMIN - order details */

.order-details-table {display: block; font-size: 11px; font-family: Roboto}

/* ACCOUNT */

table 	{border-collapse: collapse; margin: auto}
td,th	{border: 1px solid #d2d2d2; padding: 0 10px}
th		{text-align: left; font-weight: normal; background: #888; font-family: RobotoSB; color: #fff}
td		{vertical-align: top; text-align: center; min-width: 50px}

.account-td		{display: block; text-align: left; padding-left: 5px; padding-right: 5px; font-size: 14px}

.cart-head-table	{display: table; width: 100%; margin-bottom: 30px}
.cart-head-td		{display: table-cell; padding: 0 5px}
.cart-head-0,.cart-head-1,a.cart-head-2:link,a.cart-head-2:active,a.cart-head-2:visited {font-size: 18px; padding: 5px 10px; display: block; text-align: center}
.cart-head-0		{background: #fff; color: #e5e5e5; border: 2px solid #e5e5e5}
.cart-head-1		{background: #555; color: #fff; border: 2px solid #555}
a.cart-head-2:link,a.cart-head-2:active,a.cart-head-2:visited	{background: #eee; color: #555; border: 2px solid #bbb; text-decoration: none}
a.cart-head-2:hover {background: #999; color: #fff; border-color: #999; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s}

/* -webkit-transition: width 0.5 ease-out 5s; -moz-transition: width 0.5s ease-out 5s; -o-transition: width 0.5s ease-out 5s; transition: width 0.5s ease-out 5s */
/* -webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease; -o-transition: width 0.5s ease; transition: width 0.5s ease} */

.cart-order		{display: block; margin: auto; width: 100%}
.cart-order h3	{display: block; background: #222; border-width: 1px 1px 0 1px; border-style: solid; border-color: #e2e2e2; padding: 2px 10px; color: #fff; margin-bottom: 1px}
.cart-table		{display: table; width: 100%; border-collapse: collapse}
.cart-tr		{display: table-row}

.cart-theadL,.cart-theadC,.cart-theadR {display: table-cell; vertical-align: middle; background: #e5e5e5; color: #000; padding: 4px 10px}
.cart-theadL	{text-align: left}
.cart-theadC	{text-align: center}
.cart-theadR	{text-align: right; padding: 2px 10px 2px 0}

.cart-cellI,.cart-cellL,.cart-cellC,.cart-cellR {display: table-cell; border-top: 1px solid #e5e5e5; padding: 10px 0; vertical-align: middle; font-size: 15px}
.cart-cellI		{text-align: left}
.cart-cellL		{text-align: left}
.cart-cellC		{text-align: center}
.cart-cellR		{text-align: right; padding-right: 30px}
.cart-cellI img	{vertical-align: top; width: 60px; border: 1px solid #ccc}

.cart-foot		{width: 100%; color: #222; margin: 0 0 30px 0; padding: 0; font-size: 18px; text-align: right; border-style: double; border-width: 4px 0 0 0; border-color: #bbb}
.cart-footL		{display: inline-block; padding: 5px 12px; width: 30%; text-align: left}
.cart-footR		{display: inline-block; padding: 5px 30px; text-align: right; width: 70%}

.cart-button	{width: 100%; text-align: right}

.ship-table		{display: table; margin: auto; margin-bottom: 30px; width: 100%; border-spacing: 20px 0}
.ship-tr		{display: table-row}
.ship-td		{display: table-cell; width: 50%}
.ship-td label	{font-size: 14px}
.ship-td h1		{background: none; color: #222; border: none; font-size: 22px; margin-bottom: 15px}

.pay-table		{display: table; margin: auto; margin-bottom: 50px; border-spacing: 10px; font-size: 16px}
.pay-tr			{display: table-row}
.pay-td			{display: table-cell; vertical-align: top}

.pay-total-table	{display: table; background: #777; color: #fff; border-collapse: collapse; width: 100%}
.pay-total-tr		{display: table-row}
.pay-total-td		{display: table-cell; vertical-align: middle; width: 50%}

.pay-td-L		{display: table-cell; text-align: left; vertical-align: middle; padding: 10px; margin: 0; font-size: 18px}
.pay-td-R		{display: table-cell; text-align: right; vertical-align: middle; padding: 10px; margin: 0; font-size: 18px; width: 50%}

.remove {margin: auto; background-image: url('pics/remove.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain}
a.remove:link, a.remove:visited, a.remove:active {display: block; width: 20px; height: 20px; padding: 0; text-decoration: none}
a.remove:hover {background-image: url('pics/remove_hover.svg'); background-repeat: no-repeat; background-position: center center}

a.checkout:link, a.checkout:visited, a.checkout:active {background: #ffdb15; color: #000; font-size: 18px; padding: 10px}
a.checkout:hover {background: #555; color: #fff}

#form-address {width: 60%; padding-left: 20px; margin: auto}

.account-td h2	{font-size: 22px; margin: 40px auto 2px auto; width: 80%; background: #555; color: #fff; padding: 5px 10px}
.account-td h3	{font-size: 20px; margin-bottom: 20px; background: #bbb; color: #fff; padding: 5px 10px}
.account-td h4	{font-size: 18px; margin-bottom: 20px; background: #bbb; color: #fff; padding: 5px 10px}
.account-td h5	{font-size: 16px; margin-bottom: 20px; background: #eee; padding: 5px 10px}

.account-td p		{margin-bottom: 20px; padding-left: 10px; padding-right: 10px; text-align: justify}
.account-td ul li	{text-indent: 5px}
.account-td ul	{margin-bottom: 20px}
.account-td ol	{margin-bottom: 20px}

p.ordered	{font-size: 20px; color: #fff; margin: auto; padding: 20px; text-align: center; width: 100%; background: #32cd32; margin-bottom: 2px}
p.ordered2	{font-size: 16px; margin: auto; padding: 20px; text-align: center; width: 100%; background: #eee; margin-bottom: 2px}

.o-inprog-table 	{display: table; width: 100%; border-collapse: collapse; font-size: 13px}
.o-inprog-tr 		{display: table-row}
.o-inprog-th 		{display: table-cell; vertical-align: middle; padding: 2px 10px; border: 1px solid #ddd; background: #555; color: #fff; text-align: center}
.o-inprog-td 		{display: table-cell; vertical-align: middle; padding: 2px 10px; border: 1px solid #ddd; text-align: center}

.o-old-table 	{display: table; width: 100%; border-collapse: collapse; font-size: 13px}
.o-old-tr 		{display: table-row}
.o-old-th 		{display: table-cell; vertical-align: middle; padding: 2px 10px; border: 1px solid #ddd; background: #555; color: #fff; text-align: center}
.o-old-td 		{display: table-cell; vertical-align: middle; padding: 2px 10px; border: 1px solid #ddd; text-align: center}


/* link*/

a:link, a:visited, a:active {color: #ffdb15; text-decoration: underline; color: #888}
a:hover {color: #000}

a.rmore:link, a.rmore:visited, a.rmore:active {color: #ffdb15; text-decoration: underline; font-size: 14px; color: #888; position: absolute; right: 10px; bottom: 10px}
a.rmore:hover {color: #000}

a.rmore:link,
a.rmore:visited,
a.rmore:active
	{background: #777; padding: 2px 5px; text-decoration: none; font-size: 0.9em; color: #fff; position: absolute; right: 10px; bottom: 10px; border: 1px solid #777}
a.rmore:hover {background: none; color: #333}

/*next*/

#container,#head,#menu,#footer {width: 100%}
#container	{display: block; width: 100%; min-height: 100%; position: relative; text-align: center}

/* ABOVE */

#above	{display: block; vertical-align: middle; background: #444; text-align: right; height: auto; padding: 8px; padding-right: 20px; color: #FFF; width: 100%; font-size: 14px}
#above	{position: -webkit-sticky; position: sticky}
#above img {vertical-align: middle}
a.above:link, a.above:visited, a.above:active {color: #fff; text-decoration: none}
a.above:hover {color: #ffdb15}
a.user:link, a.user:visited, a.user:active {color: #fff; text-decoration: none; padding: 2px 0 2px 30px; background: url('pics/user.svg') no-repeat left center}
a.user:hover {color: #ffdb15; background: url('pics/user-hover.svg') no-repeat left center}

#header {
	background-color: #ffdb15; 
	color: #000; 
	height: auto; 
	padding: 10px; 
	text-align: left; 
	position: relative;
	background: #ffdb15; 
	background: -moz-linear-gradient(left, #ffdb15 0%, #f7c616 46%, #fffb91 82%, #ffdb15 100%);
	background: -webkit-linear-gradient(left, #ffdb15 0%,#f7c616 46%,#fffb91 82%,#ffdb15 100%);
	background: linear-gradient(to right, #ffdb15 0%,#f7c616 46%,#fffb91 82%,#ffdb15 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdb15', endColorstr='#ffdb15',GradientType=1 )
}

#headerin	{max-width: 1170px; margin: auto}
#menu		{background-color: #222; color: #fff; text-align: left; height: auto; position: relative}
#menuin		{max-width: 1170px; margin: auto}
#banner		{margin: auto; position: relative}
#body		{width: 1170px; margin: auto; margin-top: 40px; text-align: center; padding-bottom: 140px; position: relative}
#footer		{background-color: #222; height: 100px; color: #FFF; text-align: center; position: absolute; bottom: 0}
#ftext		{font-size: 13px; font-weight: normal; letter-spacing: 1px}

.logopic	{margin-top: 10px; width: 200px}
.fixed		{position: absolute; top:0; left: 0}
.cart		{display: inline-block; height: 20px; width: auto; vertical-align: middle}

/* ==================== BANNER - FADE ==================== */

.mySlides {display: none;}
.slideshow-container {max-width: 1170px; position: relative; margin: auto; display: hidden}
.active {background-color: #717171}
.fade {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s}

@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
  
/* ==================== TOP - MENU ==================== */

.topnav 		{background-color: #222; overflow: hidden; text-align: left; margin: auto; letter-spacing: 1.5px}
.topnav a 		{float: center; display: inline-block; color: #eee; text-align: center; padding: 7px 20px; text-decoration: none; font-size: 14px; border-top: 3px solid #222}
.topnav a:hover	{background-color: #222; border-top: 3px solid #fff}
.topnav .icon 	{display: none}
.error			{color: #FF0000; text-align: center}

/* ==================== MAIN ==================== */

#tdMenu,#tdContactMenu,#tdBody	{display: table-cell; text-align: left; vertical-align: top}
#tdMenu,#tdContactMenu			{width: 270px}
#tdBody							{width: auto; padding-left: 10px; text-align: center; font-size: 0}

/* ==================== SIDE MENU ==================== */

.sideNavHead	{color: #fff; padding: 6px 12px; font-size: 20px; background: #555; position: relative; margin-bottom: 15px; border-bottom: 4px solid #bbb; letter-spacing: 2px}
.sideNavWrap	{margin: 0; padding: 0}

.accordion, .gi-menu, .gi-selected {
	display: block;
	background: #ebebeb;
	border-left: 4px solid #ddd;
	color: #222; 
	cursor: pointer; 
	width: 100%; 
	font-size: 15px; 
	padding: 7px;
	padding-left: 10px;
	margin-bottom: 2px;
}
.accordion.active, .accordion:hover, .gi-menu:hover {
	border-left: 4px solid #777;
	color: #555
}

a.gi-menu		{color: #000; text-decoration: none}
.gi-menu 		{text-decoration: none}
.gi-selected	{border-left: 4px solid #777}

a.accordion:after {background: red; position: absolute; left: 0; top: 0; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; z-index: -1;}
.accordion:hover:after {width: 100%}

.panel 			{background-color: #fff; width: 100%; display: none; position: relative}
.panel.show 	{display: block; position: relative}

a.sidenavin	{
	padding: 10px 0 7px 0; 
	padding-left: 10px; 
	text-decoration: none; 
	display: block; 
	background: #fff;
	cursor: pointer; 
	margin-bottom: 1px;
	font-family: Roboto;
	font-size: 14px;
	color: #000;
	border-bottom: 1px solid #fff;
	border-left: 4px solid #fff;
}

a.sidenavin:hover	{color: #555; border-left: 4px solid #dedede}

/* ==================== BODY ========================= */

.b-crbs			{display: block; width: 100%; color: #222; background: #fff; font-size: 22px; padding: 5px 10px; text-align: left; margin-bottom: 15px}
.b-crbs-in		{font-size: 14px}
.b-crbs-active	{font-family: RobotoSB}

hr 				{width: 90%; border: none; border-top: 1px solid #e5e5e5; margin: auto; margin-bottom: 10px}
hr.hr-admin		{width: 90%; border: none; border-top: 1px solid #e5e5e5; margin: auto; margin-top: 10px; margin-bottom: 10px}

.body-title		{display: block; width: 99%; background: #eee; color: #888; font-size: 18px; padding: 9px 12px 5px 12px; text-align: left; margin: auto; margin-bottom: 15px}
.body-title		{border-bottom: 4px solid #bbb}

.cat			{display: inline-block; padding-right: 8px}
.scat			{display: inline; color: #222}
a.scat-link:link,a.scat-link:active,a.scat-link:visited	{color: #222; text-decoration: none}
a.scat-link:hover {color: #555}

.main-menu-table	{display: block; width: 100%; margin-bottom: 10px; text-align: justify; padding-left: 5px; padding-right: 5px; font-size: 14px}
.main-menu-td		{display: block; text-align: left}
.main-menu-td h3	{font-size: 20px; margin-bottom: 20px; border-bottom: 2px solid #ddd; color: #888; padding: 5px 10px}
.main-menu-td h4	{font-size: 18px; margin-bottom: 20px; border-bottom: 2px solid #ddd; color: #888; padding: 5px 10px}
.main-menu-td h5	{font-size: 16px; margin-bottom: 20px; background: #eee; padding: 5px 10px}

.main-menu-td p		{margin-bottom: 20px; padding-left: 10px; padding-right: 10px; text-align: justify; text-justify: distribute; text-align-last: left}
.main-menu-td ul li	{text-indent: 0}
.main-menu-td ul	{margin-bottom: 20px}
.main-menu-td ol	{margin-bottom: 20px}
.main-menu-td a		{color: #777; text-decoration: underline}
.main-menu-td a:hover	{text-decoration: none; color: #f7c616}

.sh-title 	{display: inline-block; background: #555; color: #fff; padding: 5px 10px 5px 5px; margin-left: 20px; margin-bottom: 5px}
.sh-block	{padding: 10px; margin-left: 20px; margin-bottom: 5px}

/* TOPICS table */

div.t-prev			{text-align: center; padding-top: 10px}
a.t-prev:link,
a.t-prev:active,
a.t-prev:visited	{display: inline-block; padding: 10px 40px; background: #555; cursor: pointer; color: #fff; text-decoration: none; border-radius: 3px}
a.t-prev:hover		{background: #ffdb15; color: #222}

.t-table			{display: block; margin: auto; margin-bottom: 10px; text-align: justify; width: 99%}
.t-td,.t-td-full	{display: inline-block; border: 1px solid #e1e1e1; padding: 10px; overflow: none; margin-bottom: 10px; position: relative; font-size: 14px}
.t-td				{padding: 10px; text-align: left}
.t-td p				{margin-bottom: 20px; font-size: 14px}
.t-td h3			{font-size: 18px; font-family: RobotoSB; margin-bottom: 10px}
.t-td img			{width: 50%; float: left; margin-right: 10px; pointer-events: none}
.t-td-L,.t-td-R		{display: inline-block; width: 50%; padding: 10px}
.t-td-L				{background: green}
.t-td-right			{margin-right: 0; bottom: 0}

.t-td-full img		{width: 100%; height: auto; margin-bottom: 15px; pointer-events: none}
.t-td-full p		{margin-bottom: 20px; font-size: 14px}
.t-td-full h3		{margin-bottom: 20px; font-size: 18px; text-align: left; font-family: RobotoSB}

.t-td-R h3			{margin-bottom: 0; font-weight: normal; font-family: RobotoSB; text-align: left; font-size: 20px}

.t-dtls				{display: inline-block; border: 1px solid #e1e1e1; padding: 10px; overflow: none}
.t-dtls img			{width: 100%; height: auto}

.calendar,
.calendar-full		{font-size: 13px; background: url('pics/calendar.svg'); background-size: 13px auto; background-repeat: no-repeat; padding-left: 22px}
.calendar 			{margin: 0 0 30px 2px}
.calendar-full		{margin: 10px 0 30px 2px}


/* ITEM table */

.i-table		{display: block; width: 100%; font-size: 0.1px; margin-bottom: 10px; text-align: left}

.i-td			{display: inline-block; width: 210px; margin: 0 0.7% 10px 0.7%; border: 1px solid #e1e1e1; vertical-align: bottom; text-align: center}
.i-pic			{width: 100%; height: auto}

.i-title		{display: inline-block; font-size: 15px; height: 55px; padding-top: 10px; font-family: RobotoSB; color: #000}
.i-volume		{font-size: 14px; color: #777}
.i-brand		{font-size: 12px; color: #777; padding-bottom: 10px}

.i-price-old 		{color: #ff0000; font-size: 14px; padding-top: 15px; padding-bottom: 10px; font-family: RobotoSB}
.i-price-old-hidden	{color: #a5a5a5; font-size: 14px; padding-top: 15px; padding-bottom: 10px; visibility: hidden}
.i-price-save		{color: #222; font-family: RobotoSB; color: #ff0000}

.i-price, .i-price-new	{color: #777; font-size: 22px; font-family: RobotoSB; width: 90%; margin: auto; padding: 0}
.i-price		{color: #555555; border: 1px solid #dedede}
.i-price-new	{color: #f7c616; border: 1px solid #f7c616}

.i-qty			{font-size: 14px}

a.add-to-cart, a.id-add-to-cart {
	display: inline-block; 
	padding: 4px 7px;
	color: #fff; 
	width: 50%; 
	margin: 10px auto 10px 10px; 
	font-size: 16px;
	background: #888;
	text-decoration: none;
	text-align: center;
	cursor: pointer
}

a.add-to-cart:hover, a.id-add-to-cart:hover {background: #ffdb15; color: #000}

a.item-list		{text-decoration: none; color: #222}
a.link-to-cart	{text-decoration: none}

a.in-cart {display: block; padding: 7px; background: #ffdb15; color: #000; width: 90%; margin: 10px auto 10px auto; font-size: 16px}
a.in-cart {text-decoration: none; text-align: center; cursor: auto; border-radius: 50px}

/* ITEM details table*/

.id-table	{display: block; width: 99%; margin: auto; text-align: left; padding: 10px; border: 1px solid #e1e1e1}

.id-in-table		{display: block; width: 100%; padding-top: 20px}
.id-in-tdL			{display: inline-block; width: 40%; vertical-align: top}
.id-in-tdL img		{vertical-align: top}
.id-in-tdR			{display: inline-block; width: 59%; vertical-align: top; padding-left: 40px; font-size: 18px}
.id-in-tdR-in1		{display: block; padding-bottom: 30px; color: #555}
.id-in-tdR-in2		{display: block; padding-top: 10px; color: #555}
.id-in-tdR-in1 h2 	{font-size: 25px; padding-bottom: 10px}
.id-in-tdR-in1 h3 	{color: #777; font-weight: normal; padding-bottom: 5px}
.id-in-tdR-in2 h1 	{color: #f7c616; font-size: 35px; padding-top: 20px; padding-bottom: 20px}
.id-in-td			{display: block; width: 100%; padding-top: 20px}
.secname			{font-size: 20px; font-weight: normal; color: #777}

.id-price-old 			{color: #a5a5a5; font-size: 18px}
.id-price-old-hidden	{color: #a5a5a5; font-size: 18px; visibility: hidden}
.id-price-save			{color: #222; font-family: RobotoSB; color: #ff0000; display: inline-block}

.id-price, .id-price-new	{color: #777; font-size: 32px; font-family: RobotoSB; margin: auto}
.id-price					{color: #555555}
.id-price-new				{color: #f7c616}

a.id-add-to-cart		{min-width: 200px; margin-left: 0}

a.in-cartD {display: block; padding: 7px; background: #ffdb15; color: #000; width: 135px; margin: 10px 0; font-size: 16px}
a.in-cartD {text-decoration: none; text-align: center; cursor: auto}

input[type=submit].add-submitD	{display: block; padding: 7px 14px; background: #888; color: #fff; margin: 10px 0; font-size: 16px; font-family: Roboto; float: none}
input[type=submit].add-submitD	{text-decoration: none; text-align: center; cursor: pointer; white-space: normal}
input[type=submit].add-submitD:hover	{background: #ffdb15; color: #000}

/* ==================== READ MORE - expand ========================= */

.t-table,
.readmore,
.readmore2,
.expand-tab,
.expand-content,
.product-desc-title,
.main-menu-td p,
.main-menu-td ul,
.main-menu-td ol {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}

.readmore,.readmore2	{display: block; width: 99%; margin: auto; margin-bottom: 15px; padding: 10px; border: 1px solid #e1e1e1; font-size: 15px}
.readmore2				{border: none; padding: 0; padding-top: 20px}
#rd1,#rd2 				{display: none /*position: absolute; opacity: 0; z-index: -1*/}
.expand-tab 			{display: block; width: 100%; margin: auto; overflow: hidden; text-align: justify; padding: 0}

.expand-label,.expand-close		{display: block; width: 100%; text-align: right; cursor: pointer; color: #888; margin-bottom: 0; text-decoration: underline}
.expand-label:hover,.expand-close:hover		{color: #000}

.expand-content 		{max-height: 0; transition: all 0.1s}
input:checked + .expand-label 			{display: none}
input:checked ~ .expand-content 		{max-height: 100%}

.expand-tab p,.expand-content p {margin-bottom: 1.5em}
.expand-tab h3,.expand-content h3 {margin-bottom: 1em; font-weight: normal; font-family: RobotoSB; font-size: 20px; color: #222}
.expand-tab h4,.expand-content h4 {margin-bottom: 1em; font-weight: normal; font-family: RobotoSB; font-size: 18px; color: #333}
.expand-sub {color: #ababab; font-family: Roboto; font-size: 14px}

.product-desc-title		{font-family: Roboto; font-size: 14px}

/* ============================================== */
/* ================= MAX - 1170 ================= */
/* ============================================== */

@media only screen and (max-width: 1170px) {

	#header		{padding-left: 20px}
	#menu		{padding-left: 0}
	#body		{width: 100%}
	#tdMenu,#tdBody	{padding-left: 10px; padding-right: 10px}

}

/* ==================== FORM =================== */

#form {margin: auto; text-align: center; color: #888; font-size: 14px}

label												{margin-bottom: 20px; color: #999}

input[type=text],input[type=password],textarea		{background: #fff; border: 1px solid #888; outline: none; padding: 7px; font-family: Roboto; font-size: 13px}
input[type=text],input[type=password],textarea		{margin-bottom: 10px; width: 100%}
input[type=text]:focus,input[type=password]:focus	{background: #efefef}

input[type=submit]									{background: #222; border: none; color: #fff; padding: 15px 80px; outline: none; cursor: pointer}
input[type=submit]:hover							{transition-timing-function: ease; transition: 0.2s; background: #777}

input[type=number] 									{height: 30px; text-align: center}
input[type=number]:hover::-webkit-inner-spin-button {width: 14px; height: 30px}

textarea											{resize: none}

/* ============== CUSTOMIZED FIELDS ============= */

input[type=submit].submit-update					{width: 290px; height: 55px; margin-bottom: 5px; font-size: 20px; border-radius: 0; text-align: center; padding: 0}
input[type=submit].submit-update					{background: url('') center center/ 0 0 no-repeat #222}
input[type=submit].submit-update:hover				{background: url('pics/update-fff.svg') center center/40px 40px no-repeat #555; font-size: 0}

input[type=submit].submit-checkout					{width: 290px; height: 55px; color: #222; font-size: 20px; border-radius: 0; text-align: center; padding: 0}
input[type=submit].submit-checkout					{background: url('') center center/ 0 0 no-repeat #ffdb15}
input[type=submit].submit-checkout:hover			{background: url('pics/checkout-fff.svg') center center/40px 40px no-repeat #32cd32; font-size: 0}

input[type=submit].submit-next						{color: #222; font-size: 20px; border-radius: 0; padding: 20px 30px; background: #ffdb15; width: 85%; margin: 20px auto;  text-align: center}
input[type=submit].submit-next:hover				{background: #32cd32; color: #fff}

input[type=submit].submit-back						{width: 100%; color: #555; background: #eee; font-size: 18px; font-family: Roboto; padding: 5px 10px; text-align: center; text-align: center}
input[type=submit].submit-back						{border-radius: 0; border: 2px solid #bbb}
input[type=submit].submit-back:hover				{background: #999; color: #fff; border-color: #999; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s}




/*display: block; text-align: center*/

input[type=submit].submit-place-order				{display: block; width: 100%; height: 75px; color: #222; font-size: 20px; border-radius: 0; margin: auto; margin-bottom: 50px}
input[type=submit].submit-place-order				{background: url('') center center/ 0 0 no-repeat #ffdb15}
input[type=submit].submit-place-order:hover			{background: url('pics/confirm-fff.svg') center center/50px 50px no-repeat #32cd32; font-size: 0}

select 			{background: #fff; border: 1px solid #888; outline: none; padding: 7px; font-family: Roboto; font-size: 13px; margin-bottom: 10px; width: 100%}
select 			{background: #f5f5f5}

input[type=submit].signup-submit		{background: #222; border: none; color: #fff; padding: 10px; width: 50%; float: right; font-size: 14px; outline: none; cursor: pointer; margin-top: 20px}
input[type=submit].signup-submit:hover	{background-color: #c2c2c2; color: #000}

input[type=submit].add-submit	{display: inline-block; padding: 7px; color: #fff; width: 90%; margin: 10px; font-size: 16px; background: #888; font-family: Roboto}
input[type=submit].add-submit	{text-decoration: none; text-align: center; cursor: pointer; white-space: normal}
input[type=submit].add-submit:hover	{background: #ffdb15; color: #000}

label.add-label {display: inline-block; font-size: 14px}
input[type=number].add-number	{display: inline-block; height: 30px; margin-top: 10px; text-align: center}
input[type=text].add-number	{display: inline-block; height: 30px; margin: 0; border: 0; margin-top: 10px; text-align: center; color: #777; font-family: RobotoSB; font-size: 14px}


/* ============== CUSTOMIZED CHECKBOX ============= */

.chb-wrap									{display: table; text-align: center; margin: auto; margin-bottom: 30px; width:95%; border-spacing: 20px}
.chb-tr										{display: table-row}
.chb-block 									{display: table-cell; position: relative; cursor: pointer; padding: 10px; border: 1px solid #aaa; font-size: 18px}
.chb-block									{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 100px; width: 50%}
.chb-block									{vertical-align: top; text-align: center}

.chb-block input 							{position: relative; opacity: 0; cursor: pointer}
.checkmark 									{position: absolute; height: 24px; width: 24px; background-color: #ddd; border-radius: 100%; bottom: 10px; margin-left: -20px}
.chb-block:hover input ~ .checkmark 		{background-color: #999}
.chb-block input:checked ~ .checkmark 		{background-color: #ffdb15}
.checkmark:after 							{content: ""; position: absolute; display: none}
.chb-block input:checked ~ .checkmark:after	{display: block}
.chb-block .checkmark:after 				{top: 6px; left: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; color: #000}
.chb-block input:checked ~ .chb-block 		{background: #fff; color: #000}
input#test:checked {background: green}

/* ============== TABS ============= */

.tabs 										{width: 100%; display: table; border-spacing: 10px 0}
.tab 										{display: table-cell; width: calc(100% / 3)}
.pay-label 									{cursor: pointer; width: 100%; display: block; padding: 10px; text-align: center; margin: 0; background: #ddd; color: #222; font-size: 14px}
.pay-label:hover							{background: #ffdb15}
#payment1,#payment2,#payment3				{padding: 40px 20px; text-align: center; border: 1px solid #777; margin: 10px 10px 0 10px}
#payment1									{display: block}
#payment2									{display: none}
#payment3									{display: none}
.checkboxtab 								{display: none}
.checkboxtab:checked ~ .pay-label 			{color: #ab70ff; background: #222; color: #fff}

.contact-tabs								{width: 100%; display: table; border-spacing: 10px 0}
.contact-tab 								{display: table-cell; width: calc(100% / 2)}
.contact-label 								{cursor: pointer; width: 100%; display: block; padding: 10px; text-align: center; margin: 0; background: #ddd; color: #222}
.contact-label:hover						{background: #ffdb15}
#contact1,#contact2							{padding: 5px; text-align: left; margin: 0; margin-bottom: 10px}
#contact1									{display: block}
#contact2									{display: none}
.checkboxtab:checked ~ .contact-label		{color: #ab70ff; background: #222; color: #fff}



a.def:link, a.def:visited {color: #ff0000; text-decoration: none; font-weight: bold}
a.def:hover, a.def:active {color: #888888}

a.def2:link, a.def2:visited {color: #fff; text-decoration: none; font-weight: bold; background-color: #ff0000; padding: 5px 30px}
a.def2:hover, a.def2:active {background-color: #fff; color: #ff0000; border: 1px solid #ff0000}

.f-table	{display: block; margin: auto; text-align: left; padding: 30px 10px 0 10px}
.f-table h3	{font-size: 26px; margin-bottom: 40px; background: #888; padding-left: 10px; color: #fff}
.f-table p	{text-align: center; font-size: 16px; margin: auto}
.form-table {display: table; width: 70%; margin: auto}
.register-table {display: table; width: 40%; margin: auto}
.form-tr	{display: table-row}
.form-td-L	{display: table-cell; text-align: left; vertical-align: top; padding-top: 5px}
.form-td-R	{display: table-cell; text-align: left}
.reg-td {display: table-cell; text-align: left}

.show-pass	{display: inline; margin-left: -34px; cursor: pointer; font-size: 12px; text-align: right}
.show-pass:hover	{color: #000}
.show-pass img	{width: 27px; height: auto; vertical-align: middle}

p.reg-error	{width: 100%; margin: 0; padding: 0; color: #ff0000}

.bookNow				{font-size: 20px; text-align: right; margin: auto; margin-top: 40px}

.pics		{display: inline-block; margin: 5px; max-width: 100%}

/* ==================== SEARCH AREA ==================== */

.search-area						{background: #fff; width: 292px; height: 40px; text-align: center; position: absolute; right: 0}
input[type=text].search-field:focus	{background: #fff}
.dropdown							{background: #fff}
input[type=text].search-field		{padding-left: 10px; border: none; width: 250px; height: 40px; background: #fff; font-family: Roboto; font-size: 16px}
button[type=submit].search-submit	{padding: 4px; border: none; width: 30px; height: 30px; background: none; cursor: pointer; vertical-align: middle}
.search-submit:hover				{background: #222}

/* SEARCH RESULTS = 0 */

.search-empty {height: 100px; margin-top: 50px; font-size: 15px; color: #000; text-align: center}

::-moz-selection 	{color: #000; background: #CCC}
::selection 		{color: #000; background: #CCC}
::-webkit-inner-spin-button {width: 14px; height: 30px}

#myCookieConsent {font-family: Roboto; font-weight: normal; font-size: 16px; display: table-cell; vertical-align: middle}
#myCookieConsent {z-index: 999; padding: 7px 20px 7px 20px; background: rgba(0,0,0,0.9); width: 100%; position: fixed; color: #fff; bottom: 0; display: none; text-align: center}
#myCookieConsent div {padding: 10px}
#myCookieConsent a {color: #ffdb15; padding: 0; padding-left: 20px; text-decoration: underline}
#myCookieConsent a:hover {text-decoration: none}
#myCookieConsent a#cookieButton {display: inline; width: 100px; color: #000; background: #ffdb15; text-decoration: none; cursor: pointer; padding: 0; padding: 5px 20px; margin: 0 20px}
#myCookieConsent a#cookieButton:hover {background: #fda016;	color: #000}
#lCanvas {display: none; background: rgba(0, 0, 0, 0.5); width: 100vw; height: 100vh; position: fixed; z-index: 999; top: 0; left: 0}
#lBlock {display: none; background: #777; margin-top: 300px}