:root {
	--sans-serif: system-ui,-apple-system, sans-serif;
	--body-font: system-ui,-apple-system, sans-serif;
	--body-font-size: medium;

	--smaller: 0.875em;
	--small: 0.875em;
	--x-small: 0.8125em;
	--xx-small: 0.75em;
	--larger: 1.0625em;
	--large: 1.125em;
	--x-large: 1.1875em;
	--xx-large: 1.25em;

	--body-color: rgb(46, 50, 54);
	--body-alt-color: rgb(109, 112, 115);
	
	--background-color: rgb(255,255,255);
	--background-lite-color: rgba(255,255,255,.5);
	--background-lite-alt-color: rgba(255,255,255,.9);
	--background-alt-color: rgba(245,245,245,1);
	--background-shadow-color: rgba(0,0,0,.2);
	--background-lite-shadow-color: rgba(0,0,0,.1);
	
	--border-color: rgba(122, 125, 128,.5);
	--border-hover-color: rgba(122, 125, 128,1);
	--border-alt-color: rgba(122, 125, 128,.2);
	--border-radius:4px;
	--border-radius-full:7px;
	
	--icon-color: rgb(140,140,140);
	--icon-hover-color: rgb(70,70,70);
	--icon-alt-color: rgb(120,120,120);
	
	--vendo-color: #008CF6; /* rgb(0, 140, 246) */
	--vendo-color-dark: #006AF0; /* rgb(0, 118, 241) */
	--vendo-color-darker: #005fc2; /* rgb(0, 95, 194) */
	--vendo-color-bg: rgba(0, 140, 246, .1); /* rgb(0, 140, 246) */
	--vendo-color-bg-light: rgba(0, 140, 246, .05); /* rgb(0, 140, 246) */
	--vendo-color-light: #02A3FC; /* rgb(2, 163, 252) */
	--vendo-color-lighter: #2bb4ff; /* rgb(43, 180, 255) */
	--vendo-color-lightest: #4fc1ff; /* rgb(79, 193, 255) */
	--vendo-background-color: rgba(0, 140, 246,.06);
	--vendo-background-hover-color: rgba(0, 140, 246,.16);
	
	--delete-color: rgb(255,0,0);
	
	--ok-color: rgb(0,128,0);
	--ok-color-light: rgba(0,128,0,.8);
	
	--padding: 27px;
	

}
/*
@font-face {
	font-family: Garner;
    src: url(/fonts/LHFgarnerbold.otf);
}
*/
body {
	background: var(--background-color);
	font-family: var(--body-font);
	color: var(--body-color);
	font-size:var(--body-font-size);
	line-height: 1.4;
	margin:0;
	padding:0;
}

h1 {
	/*font-family: Garner, var(--body-font);
	font-size:medium;
	letter-spacing:1px;
	color:rgb(68, 84, 88);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
	}

h1 {
	color:rgb(68, 84, 88);
	text-shadow:2px 2px 0px #FFF;
	}
h2 {
	font-size:1.2em;
	}
h3, h4 {
	font-size:1em;
	}
select, input, textarea {
	font-size:var(--body-font-size);
	}

.skip {
	position:absolute;
	top:-4em;
	}

a {
	color: var(--vendo-color-dark);
	text-decoration:none;
	}
a:hover {
	color: var(--vendo-color);
	}
.highlight-price {
	color:var(--price-color);
	}
	

header {
	/*border-top:7px solid #eef3f4;
	border-bottom:1px solid var(--border-color);*/
	text-align:center;
	display:block;
	}

	
#brand {
	padding:35px var(--padding) 0px var(--padding);
	display:block;
	}
#brand img {
	height:45px;
	width:auto
	}

.msg-sm {
	font-weight:bold;
	border:1px solid var(--border-color);
	border-radius:var(--button-border-radius);
	}

main {
 	background:var(--background-color);
 	padding:10px var(--padding) var(--padding) var(--padding);
 	min-height:20vh;
 	}

footer {
	padding:10px;
	text-align:center;
	color:var(--body-alt-color);
	font-size:small;
	position:sticky;
	bottom:0;
	z-index:9999999;
 	background:var(--background-color);
	}
footer ul,footer li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
	}
footer li a {
	padding:2px 5px;
	display:inline-block;
	color:var(--icon-color);
	}
footer .current a,
.section-login footer .link-login a,
.section-account footer .link-account a {
	color:var(--body-color);
	}
footer img {
	max-height:28px;
	width:auto;
	margin:0 1em
	}
footer #footer_vendo img {
	max-height:35px;
	}

form .password,
form .text,
form .textarea {
	-webkit-appearance: none;
	appearance: none;
	padding-left: 4px;
	min-height: 1.4em;
	line-height: 1.4em;
	border-radius: var(--border-radius);
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.1);
	border: 1px solid var(--border-color);
	background-color: var(--background-color);
	font-size: 100%;
	box-sizing: border-box;
}

.button-start,
.button-next,
.button-create,
.button-createaccount,
.button-login,
.button-nextpayment,
.button-paynow,
.button-enable,
.section-purchase .box-action > .submit,
.form-addtocart .button-addtocart,
.form-addtocart .button-placebid,
.form-addtocart .button-update,
.form-admin .box-action .button-update,
.form-standard .box-action .button-update,
.form-standard .box-action .margin + .submit {
	line-height: 1.4em;
	padding: .3em 1.3em;
	vertical-align: top;
	-webkit-appearance: none;
	border-radius: var(--border-radius);
	font-weight: 500;
	outline: none;
	margin: 0;
	color: var(--background-color);
	background-color: var(--vendo-color);
	background-image: linear-gradient(var(--vendo-color-light),var(--vendo-color));
	border: 1px solid var(--vendo-color-dark);
}

.button-start:hover,
.button-next:hover,
.button-create:hover,
.button-createaccount:hover,
.button-login:hover,
.button-nextpayment:hover
.button-paynow:hover,
.button-enable:hover,
.section-purchase .box-action > .submit:hover,
.form-addtocart .button-addtocart:hover,
.form-addtocart .button-placebid:hover,
.form-addtocart .button-update:hover,
.form-admin .box-action .button-update:hover,
.form-standard .box-action .button-update:hover,
.form-standard .box-action .margin + .submit:hover {
	background-color: var(--vendo-color-dark);
	background-image: linear-gradient(var(--vendo-color-lighter),var(--vendo-color));
}

.button-start:active,
.button-next:active,
.button-create:active,
.button-createaccount:active,
.button-login:active,
.button-nextpayment:active,
.button-paynow:active,
.button-enable:active,
.section-purchase .box-action > .submit:active,
.form-addtocart .button-addtocart:active,
.form-addtocart .button-placebid:active,
.form-addtocart .button-update:active,
.form-admin .box-action .button-update:active,
.form-standard .box-action .button-update:active,
.form-standard .box-action .margin + .submit:active  {
	box-shadow: inset 0 12px 24px var(--vendo-color-darker);
	border: 1px solid var(--vendo-color-darker);
	background-image: linear-gradient(var(--vendo-color-dark),var(--vendo-color));
}

main {
 	text-align:center;
 	}
#content {
 	text-align:left;
  	max-width:700px;
  	margin:auto;
	}
#page-home h1 {
	font-size:large;
	font-weight:normal;
  	margin:auto auto 1em auto;
	}
#page-home #content {
  	max-width:420px;
 	text-align:center;
	}
#page-home .text,
#page-home .password,
#page-home #vendor_name,
#page-home #vendor_name_url {
	width: 100%;
	font-size: var(--body-font-size);
	margin: 15px 1px 0 -1px;
	padding: 8px 16px 8px 16px;
	border-radius: var(--border-radius);
	box-sizing: border-box;
}
#page-home .text,
#page-home .text::placeholder,
#page-home .submit {
	width: 100%;
	margin-top:.9em;
	text-align:center;
}
#page-home .submit {
	padding:.6em;
}
	
/* - MOBILE - */

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

	
}

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

}