/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
* { -moz-box-sizing: border-box; box-sizing: border-box; }
html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #d7c48c;
    text-shadow: none;
}

::selection {
    background: #d7c48c;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 0.5em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html,
label,
button,
input,
select,
textarea { font: 400 12px/1.231 'Open Sans', Arial, Helvetica, sans-serif; color: #fff; }
html {
 background-color: #000;
 background-image: url('../media/background-black-floral.png'), url('../media/glow.png');
 background-repeat: repeat, no-repeat;
 background-position: center top;
 background-size: 50%, 50%; }
header { position: relative; margin: 2em auto; padding: 0; text-align: center; }
header h1, header h2 {
 margin: 0 auto; padding: 0; color: #fff;
 font: 400 24px/1.231 'Amarante', Arial, Helvetica, sans-serif; text-transform: uppercase; }
header h2 { font-size: 14px; color: #bcab59; }
#nivag { position: relative; display: table; height: 160px; width: 248px; margin: 0 auto;
 background: url('../media/ring.png') center center no-repeat; background-size: contain; }
#nivag div { display: table-cell; vertical-align: middle; }

#items { width: 100%; margin: 0 auto; padding: 10px 0; color: #000; list-style: none; text-align: center; }
.item { display: inline-block; background: rgba(255,240,196,.5); width: 220px; margin: 0 .5rem 1rem;
 text-align: left; cursor: pointer; padding: 2px; vertical-align: top; }
#items.small .item { width: 160px; margin: 0 .4rem .8rem; }
.item h2 { font-size: 1.3em; margin: 1em 1rem 1em; }
.item a { color: #000; }
.item a:hover { color: #000; }
.item p { margin: .5rem 1rem; font-size: 1em !important; line-height: 1.2; }
.item .actions { top: auto; bottom: .4rem; right: .4rem; }
.item .actions li { margin: 0; }
.item .actions li:hover { background-color: rgba(128,128,128,.2); }
.item .ui-icon { background-image: url('../utils/jqueryui/css/custom-theme/images/ui-icons_000000_256x240.png'); }
.item:hover { box-shadow: 0 0 15px 5px #fff; }
#items.small .item:hover { box-shadow: 0 0 15px 5px #fff; }
.item:hover .actions { display: block; }
.pr { font-size: 1.3em; font-weight: bold; }
.sale { color: #900; font-weight: bold; font-size: 1.3em; text-align: center; }
.sale .pr { font-size: 1.6em; }
#subcats { width: 100%; margin: 0 auto; padding: 10px; color: #000; list-style: none; }
.subcat {
 background-color: #fff; border-radius: .5em; float: left; width: 215px; 
 padding: 5px 5px 1em; margin: 0 10px 20px; text-align: center; cursor: pointer;
}
.subcat h2 { font-size: 1.3em; margin: 1em auto .5em auto; padding: 0 1em; }
.subcat a { color: #000; }
.subcat a:hover { color: #000; }
.subcat img { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.subcat .actions { top: auto; bottom: .4rem; right: .4rem; }
.subcat .actions li { margin: 0; }
.subcat .actions li:hover { background-color: rgba(128,128,128,.2); }
.subcat .ui-icon { background-image: url('../utils/jqueryui/css/custom-theme/images/ui-icons_000000_256x240.png'); }
.subcat:hover { box-shadow: 0 0 35px 5px #fff; }
.subcat:hover .actions { display: block; }

.flexslider .slides > li { max-height: 370px; max-height: 80vh; position: relative; overflow: hidden; }
.objectfit .flexslider .slides > li img { object-fit: contain; max-height: 370px; max-height: 80vh; }
.no-objectfit .flexslider .slides > li img { max-height: 370px; max-height: 80vh; width: auto; margin-left: auto;
 margin-right: auto; }

#footer { margin: 1rem; color: #fff; font-size: 0.875rem; clear: both; }
footer p { margin: 0.8em auto; }
footer a { color: #d7b96c; }
footer a:hover { color: #fff; }


h1 { margin: .5rem 0; color: #ecd35e; font-weight: normal;
 font: 400 30px/1.231 'Oswald', Arial, Helvetica, sans-serif; }
#secondary h1 { font-size: 1.6em; }
#secondary form h1 { font-size: 1rem; }
h1 .small { font-size: 1.2rem; color: #fff; text-transform: uppercase; }
h2 { margin: 2rem 0 1rem; font: 700 1.4em/1.231 'Open Sans', Arial, Helvetica, sans-serif; font-weight: normal; }
h3 { font: 700 1.2em/1.231 'Open Sans', Arial, Helvetica, sans-serif; }
p { margin: 1rem 0; line-height: 1.6; font-size: 1.2rem; }
img,
iframe { width: 100%; height: auto; }
.g-recaptcha iframe { height: 78px; }
img.l { float: left; width: 30%; margin-right: 1em; }
img.r { float: right; width: 30%; margin-left: 1em; }
#secondary img.l, #secondary img.r { float: none; width: 100%; margin: 0; }
.c ul { list-style: none; padding-left: 0; }
a { text-decoration: none; font-weight: bold; color: #ecd35e; }
a:hover { color: #fff; }
table { border-collapse: separate; border-spacing: .3em; }
form { margin: 1rem auto; }
fieldset { padding: 1rem; background-color: #f0f0f0; color: #000; font-size: 1.2rem; }
fieldset.space { margin-top: 1em; }
form .ui-icon { background-image: url('../utils/jqueryui/css/custom-theme/images/ui-icons_000000_256x240.png'); }
form a { color: #000; font-weight: normal; border-bottom: 1px dotted #000; }
form a:hover { color: #aaa; border-bottom: 1px solid #aaa; }
form h1 { margin: 0 0 1em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 1rem;
 border-bottom: 1px solid #999; text-transform: uppercase; letter-spacing: .1em; color: #999; }
form#frmBasket h1 { margin: 0 0 .5rem; font: 400 30px/1.231 'Oswald', Arial, Helvetica, sans-serif; text-transform: none;
 letter-spacing: 0; }
form h2 { margin: .5rem 0 .3rem; font-size: 1rem; font-weight: bold; }
label {
 display: block; margin: .5rem 0 .3rem; vertical-align: top;
 font-weight: bold; text-transform: uppercase; color: #000; }
label.inline { display: inline-block; width: 30%; text-align: right; margin-right: 1%; }
label.inline2 { display: inline-block; vertical-align: baseline; width: auto; text-align: left;
 margin-left: .5rem; margin-right: 2rem; text-transform: none; }
textarea,
select,
input    { margin: .2em 0; border: 1px solid #ddd; background: #fdfdfd; color: #000; }
textarea,
input    { padding: .2em; }
textarea { height: 5em; }
input[type="button"],
input[type="submit"],
a.btn,
button, .chktoggle + label {
 position: relative; display: inline-block; margin: .3em 0; padding: .5em 1em; border: none;
 text-decoration: none; text-transform: uppercase; font-weight: normal; line-height: 1.2;
 background-color: #000; color: #fff; }
a.btn.yellow, button.yellow { background-color: #ecd35e; color: #000; }
.chktoggle { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden;
 padding: 0; position: absolute; width: 1px; }
.chktoggle + label { width: auto; background-color: #aaa; color: #000;
 box-shadow: none; text-align: center; }
.chktoggle:checked + label { background-color: #ecd35e; color: #000; }
input[type="button"]:enabled:hover,
input[type="submit"]:enabled:hover,
a.btn:hover, button:enabled:hover,
.chktoggle:enabled:hover + label { background-color: #999; color: #fff; box-shadow: 0 0 15px 5px #fff; border: none; }
input[type="button"]:enabled:active,
input[type="submit"]:enabled:active,
a.btn:active, button:enabled:active,
.chktoggle:enabled:active + label { background-color: #000 !important; color: #ecd35e; }
textarea:focus,
select:focus,
input:focus,
.chktoggle:focus + label { background: #fffbef; color: #000; box-shadow: 0 0 15px 5px #fff; }
input[type="image"],
input[type="checkbox"],
input[type="radio"] { border: none; }
button:disabled { background-color: #aaa; }
.iso-btnbar { display: inline-block; text-align: center; padding: .3em; margin: .5rem auto; border-radius: .5rem;
 line-height: 3; background-color: rgba(162,162,162,.75); }
.iso-btnbar label { color: #fff; width: auto; margin: 0; padding: .5em 0; line-height: 1.2;
 display: inline-block; vertical-align: baseline; }
.iso-btnset { display: inline-block; vertical-align: baseline; margin: 0 1em; }
.iso-btnset button { margin: 0 .3em; }
.iso-btnset button.is-checked { background-color: #ecd35e; color: #000; }
.iso-btnset button.is-checked:active { background-color: #000; color: #ecd35e; }
.form-ind { display: inline-block; width: 69%; }
.form-ind p { margin: 0.5rem 0 0.3rem; line-height: 1.2; }
.form-chk { display: inline-block; width: 30%; margin-top: .5rem; vertical-align: top; text-align: right; }
.form-btns { margin: 0 auto; padding: .8em; text-align: right; background-color: rgba(255,255,255,.4); }
.form-btns .btnCancel, .form-btns .btnBack { float: left; }
#previews { margin: 0; padding-left: 0; }
#previews li {
 display: inline-block; vertical-align: top; position: relative;
 max-width: 10rem; max-height: 10rem; margin: .3rem .6rem .3rem 0; padding: .3rem .3rem 1.6rem;
 background-color: #fff; text-align: center; }
#previews.lg li { max-width: 20rem; max-height: 15rem; }
#previews li img { max-width: 9.4rem; max-height: 8.1rem; width: auto; height: auto; image-orientation: from-image; }
#previews.lg li img { max-width: 19.4rem; max-height: 13.1rem; }
#previews .actions { display: block; bottom: .1rem; top: auto; }
#previews .actions li { padding: 0; margin: 0; background: none; }
#previews progress { position: absolute; bottom: 0.4rem; left: 0.3rem; right: 0.3rem;
 width: auto; height: .7rem; }

nav { color: #fff; margin: 1rem auto; }
nav ul { width: 100%; margin: 0 auto; padding: 0; text-align: center; list-style: none; }
nav li { display: inline-block; }
nav li a {
 padding: .5rem 1rem; color: #fff;
 font-size: .9em; font-weight: normal; text-decoration: none; text-transform: uppercase; }
nav a.active,
nav a:active,
nav li.active a { background-color: rgba(236,211,94,.7) !important; }
nav li a:hover { color: #fff; background-color: rgba(255,255,255,.2); }

nav.top { width: 100%; padding: .5rem 2%;
 background-color: rgba(255,255,255,.2);
 border-top: 3px solid rgba(236,211,94,.6); border-bottom: 3px solid rgba(236,211,94,.6); }
nav.top ul { width: auto; text-align: left; }
nav.top li { display: inline-block; width: 35%; vertical-align: top; }
nav.top li.wide { width: 65%; }
nav.top label { color: #fff; }
nav.top a:hover { text-decoration: none; }
nav.top a.btn.menu-trigger { width: 48%; margin: 0 2% 0 0; padding: .5rem 1%; font-size: 1.2rem; 
 display: inline-block; line-height: 1.5; text-align: center; vertical-align: top; }
nav.top a.btn.menu-trigger.selected { background-color: rgba(255,255,255,.4); color: #fff;
 padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ecd35e; }
nav.top a.btn.menu-trigger.selected:active { color: #fff; }
nav.top a.btn.menu-trigger.selected:hover { box-shadow: none; }
nav.top a.btn.menu-trigger:focus { outline: none; }
nav.top form { padding: 0; margin: 0; background: none; }
.inpbtn { width: 100%; position: relative; margin: .3rem 0 .5rem; }
.inpbtn input { border: none; margin: 0; padding: .5rem 1%; font-size: 1.2rem; width: 80%;
 line-height: 1.5; }
.inpbtn button { position: absolute; top: 0; right: 0; width: 20%; height: 100%; margin: 0; padding: 0; }
#btnsearch { background-image: url('../media/btn-search.png'); background-position: center center;
 background-repeat: no-repeat; background-size: 1.5rem 1.5rem; }
nav.top li.dd { float: none; width: 100%; }
nav.top li.dd a { display: block; font-weight: normal; font-size: 1.2rem;
 text-transform: none; }
nav.top .cat-list { -moz-columns: 4; -webkit-columns: 4; columns: 4;
 background-color: rgba(255,255,255,.2); }
nav.top .cat-list li { width: 100%; display: block;
 -webkit-column-break-inside: avoid; break-inside: avoid-column; }
nav.top .cat-list .cat-list { -moz-columns: 1; -webkit-columns: 1; columns: 1; background: none; }
nav.top .cat-list li a { padding-left: 3%; padding-right: 3%; color: #fff; }
nav.top .cat-list .cat-list li a { padding-left: 5%; padding-top: 0; padding-bottom: 0; }
nav.top .cat-list .cat-list .actions li { float: left; width: auto; }
nav.top .actions li { width: auto; }

#cookienotice { width: 100%; margin: 0; background-color: rgba(128,128,128,.5); text-align: center; font-size: .9rem;
 padding: .5rem 0;
 position: -webkit-sticky;
 position: -moz-sticky;
 position: -ms-sticky;
 position: -o-sticky;
 position: sticky;
 top: 0; z-index: 50; }

.sect { margin-bottom: 2em; }
.sect.white, .sect.lgrey, .sect.dgrey, .sect.red, .sect.black { padding: 2rem; }
#secondary .sect.white, #secondary .sect.lgrey, #secondary .sect.dgrey, #secondary .sect.red, #secondary .sect.black {
 padding: 1rem; }
.sect.white { background-color: #fff; color: #000; }
.sect.white h1 { color: #000; }
.sect.white a { color: #000; }
.sect.white a:hover { color: #999; }
.sect.lgrey { background-color: #f0f0f0; color: #000; }
.sect.lgrey h1 { color: #000; }
.sect.lgrey a { color: #000; }
.sect.lgrey a:hover { color: #999; }
.sect.dgrey { background-color: rgba(255,255,255,.4); color: #fff; }
.sect.red { background-color: rgba(255,0,0,.4); color: #fff; }
.sect.black { background-color: #000; }
#secondary .sect.lgrey h1 { margin: 0 0 1em; font-family: 'Open Sans', Arial, Helvetica, sans-serif;
 font-size: 1rem;  border-bottom: 1px solid #999; text-transform: uppercase;
 letter-spacing: .1em; color: #999; }
#secondary .sect.lgrey h2 { margin: .5rem 0 .3rem; font-size: 1rem; font-weight: bold; }

.general-list { list-style: none; margin: 10px 0; }
.general-list li { position: relative; padding: 5px 10px; border: 1px solid #ddd; background-color: #fdfdfd; border-radius: 8px; }
.general-list li li { padding: 0; border: none; }
.general-list h2    { margin: 0; }
.general-list p     { margin: 0; }
.general-list .photo { position: absolute; top: 5px; left: 8px; width: 64px; height: 64px; }
.general-list .photo img { width: 100%; }
.adm-list { list-style: none; margin: 1rem 0; padding: 0; }
.adm-list li { display: block; padding: .5em; margin: 10px 0; position: relative; font-size: 1.2rem;
 background-color: #fff; color: #000; border-radius: .5rem; }
form .adm-list li { background-color: rgba(255,255,255,.6); }
.cat-list.reorderable-list a { padding-right: 64px; }
.cat-list.reorderable-list .reorderable-list a { padding-right: 48px; }
.cat-list.reorderable-list .actions a { padding-right: 0; }
.adm-list h2 { font-size: 1.2em; font-weight: bold; margin: 0; }
.adm-list h2 a { color: #000; }
.adm-list li:hover .actions { display: block; }
.adm-list .actions { top: .4rem; right: .4rem; }
.adm-list .ui-icon { background-image: url('../utils/jqueryui/css/custom-theme/images/ui-icons_000000_256x240.png'); }
.adm-sect { list-style: none; margin: 1rem 0; padding: 0; }
.adm-sect > li { display: block; padding: 10px; margin: 5px -10px 0 -10px; position: relative; }
.adm-sect > li:hover { padding: 9px; border: 1px dashed #fff; border-radius: .5rem; }
.adm-sect > li:hover .actions { display: block; }
.adm-sect > li > .actions { top: .4rem; right: .4rem; }
.adm-sect .sect { margin-top: 1rem; margin-bottom: 0; }
.compact-list {list-style: none; margin: 0; padding: 0; }
.compact-list li { padding: .3em; margin: .2em 0; font-size: 1rem; border-radius: 0; position: relative; }
.compact-list li:hover .actions { display: block; }
.selectable-list li { cursor: pointer; }
.selectable-list li:hover { box-shadow: 0 0 15px 5px #fff; }
.reorderable-sect { min-height: 5em; }
.reorderable-list li, .reorderable-sect li { cursor: pointer; }
.reorderable-list li.inactive, .reorderable-sect li.inactive { opacity: .5 !important; }
.actions { position: absolute; top: 0; right: .1rem; display: none; }
.actions ul { margin: 0; padding: 0; list-style: none; }
.actions li { margin: 0; padding: 0; float: left; }
.actions a { padding: .1em 0 !important; }
.order-list a { border: none; font-weight: bold; }
.order-list.adm-list li:hover { background-color: #fff; box-shadow: none; }
.order-list .prdthumb { width: 5em; height: 4em; background: #fff; float: left; margin-right: .5em;
 padding: 2px; text-align: center; }
.order-list .prdthumb img { width: auto; height: auto; max-height: 100%; max-width: 100%; }
#tabs { background: none; border: none; }
#tab-list { height: 3rem; background-color: rgba(255,255,255,0.4); }
#tab-list .ui-state-active { color: #fff; background-color: rgba(236,211,94,.7); padding-bottom: 0; }
#tabs .ui-icon { display: inline-block; vertical-align: bottom;
 background-image: url('../utils/jqueryui/css/custom-theme/images/ui-icons_000000_256x240.png'); }
#tab-list a { font-weight: normal; color: #fff !important; }
.tab { background: #f0f0f0 !important; font-size: .9em; }
.tab .adm-list li { text-align: left; background-color: rgba(255,255,255,.6); }
.tab .adm-list li:hover { background-color: #fff; }
.tab .selectable-list li:hover { box-shadow: none; }

@-webkit-keyframes rotate-full {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes rotate-full {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.spin { -webkit-animation: rotate-full .5s infinite; animation: rotate-full .5s infinite;
 -webkit-animation-timing-function: linear; animation-timing-function: linear; }
.no-spin { -webkit-transform: none; transform: none; }
.ui-state-warning { padding: .5em; color: #000; box-shadow: 0 0 10px 1px #ccc; background: #fff;
 text-align: center; font-weight: 700; }
.prdphoto { -moz-box-sizing: border-box; box-sizing: border-box; border: 1rem solid #fff;
 width: auto; max-width: 100%; background-color: #fff; }
#prdintro { overflow: hidden; }
#prdphotobox { float: left; max-width: 50%; margin: 1rem 3% 1rem 0; }
#prdphotobox .prdphoto { max-height: 25rem; }
#prdphotobox + div { overflow: hidden; }

#page { margin-left: 10%; margin-right: 10%; margin-bottom: 1rem; min-height: 400px; padding: 1rem 2%; }
#page.wide { margin-left: 2%; margin-right: 2%; }
#page.mid { float: left; margin-left: 2%; margin-right: 2%; width: 70%; }
#page.blank { background: none; padding-left: 0; padding-right: 0; }
#crumb { margin: 0 0 1rem; }
.section  { clear: both; margin: 0; padding: 0; }
#secondary { float: left; width: 24%; margin-right: 2%; }
#secondary form { margin: 0 auto 1rem; }
#frmBasket img { border: .3em solid #fff; width: 7rem; }
#frmorderdet .form-ind { font-size: 1rem; margin-top: .5rem; line-height: 1.231; }
.inactive { opacity: .5; }
.warn       { background: rgba(255,255,255,.5); margin: 0.8em 0; padding: .3em; }
.content-box { color: #000; padding: 1rem; }
.content-box .warn { background: rgba(200,0,0,.7); color: #fff; }
.notice     { background: rgba(0,0,0,.7); color: #fff; padding: 0.8em; text-align: center; }
.notice.warn { background: rgba(200,0,0,.7); }
.notice .form-btns { margin: 1em -0.8em -0.8em; }
.notice a   { color: #fff; }
.spent { color: #0d0; font-weight: bold; font-size: 1.5em; position: absolute; top: .5em; left: 0;
 width: 100%; text-align: center; text-shadow: 1px 1px 5px rgba(128,128,128,.5); opacity: .8;
 -webkit-transform: rotate(355deg) translateZ(1px); transform: rotate(355deg) translateZ(1px); }
#wanted-list .mandes { display: inline-block; width: 40%; vertical-align: top; }
#wanted-list .manu, #wanted-list .design { font-weight: bold; display: inline-block; vertical-align: top; width: 50%; }
#wanted-list .design { padding-left: 1rem; width: calc(50% - 1rem); }
#wanted-list .dets { display: inline-block; width: calc(60% - 1rem); padding-left: 1rem; vertical-align: top; }
#wanted-list .cust { border-top: 1px solid #ddd; padding-top: .375rem; margin-top: .375rem; }
#wanted-list a { color: #000; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

.l { text-align: left; }
.r { text-align: right; }
.c { text-align: center; margin-left: auto; margin-right: auto; }
.j { text-align: justify; }
.fl { float: left; }
.fr { float: right; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.as { display: none; }
.w5  { width: 5%; }
.w10 { width: 10%; }
.w17p5 { width: 17.5%; }
.w20 { width: 20% !important; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w33 { width: 33%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w65 { width: 69%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w95 { width: 95%; }
.w100 { width: 100%; }
.w5rem { width: 5rem; }
.w8rem { width: 8rem; }
.h5em { height: 5em; }
.h10em { height: 10em; }
.h15em { height: 15em; }
.h30em { height: 30em; }
.mh120px { max-height: 120px; width: auto; }
.marl30 { margin-left: 30%; }
.mart2rem { margin-top: 1rem !important; }
.padr { padding-right: 1%; }
.brd { border: 1px solid #fff; }
.nobck { background: none !important; }
.disp-inbl { display: inline-block !important; }
.small { font-size: .8em; }
.smaller { font-size: .9em; }
.larger { font-size: 1.2em; }
.large  { font-size: 1.4em; }
.note { font-style: italic; }
.hide { display: none !important; }
.disappear { display: none !important; opacity: 0 !important; }
.dlg { display: none; }
.error { font-weight: bold; }
.strike { text-decoration: line-through; }
.hili-1 { background: rgba(128,128,128,.5); }
.hili-2 { color: #070; }
.hili-red { color: #d00; }
.sticky { position: -webkit-sticky;
 position: -moz-sticky;
 position: -ms-sticky;
 position: -o-sticky;
 position: sticky;
 top: 15px; z-index: 50; }

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 1600px) {
  html,
label,
button,
input,
select,
textarea { font-size: 102%; }
.item { width: 260px; }
}
@media only screen and (min-width: 2000px) {
.item { width: 300px; }
}

@media only screen and (min-width: 900px) {
}

@media only screen and (max-width: 950px) {
  .item { width: 185px; }
  nav.top .cat-list { -moz-columns: 3; -webkit-columns: 3; columns: 3; }
  h1 { font-size: 24px; }
  #wanted-list .mandes { width: 30%; }
  #wanted-list .manu, #wanted-list .design { display: block; width: auto; padding: 0; }
  #wanted-list .design { font-weight: normal; }
  #wanted-list .dets { display: inline-block; width: calc(70% - 1rem); padding-left: 1rem; }
}

@media only screen and (max-width: 820px) {
  nav.top a.btn.menu-trigger { font-size: 1.1rem; }
}

@media only screen and (max-width: 768px) {
  #page, #secondary { margin-left: 2%; margin-right: 2%; width: auto; float: none; }
  #page { margin-left: 0; margin-right: 0; background: none; }
  #page.mid { margin-left: 0; margin-right: 0; width: auto; float: none; }
  #secondary img.l { float: left; width: 30%; margin-right: 1em; }
  #secondary img.r { float: right; width: 30%; margin-left: 1em; }

  nav.top li { display: block; width: 100% !important; }
  nav.top a.btn.menu-trigger { width: 49%; font-size: 1rem; }
  nav.top a.btn.menu-trigger:last-of-type { margin-right: 0; }
  nav.top li.dd a { font-size: 1.1rem; padding-left: 2%; padding-right: 2%; }

  #prdphotobox { float: none; max-width: 100%; margin-right: 0; }
  #prdphotobox .prdphoto { max-height: 50rem; }
  #prdphoto1 { display: none; }
}

@media only screen and (max-width: 620px) {
  #nivag { height: 120px; width: 186px; }
  header { margin: 1em auto; }
  header h1 { font-size: 18px; }
  header h2 { font-size: 10.5px; }
  nav.top li.dd a { font-size: 1rem; }
  nav.top .cat-list { -moz-columns: 2; -webkit-columns: 2; columns: 2; }

  .sect.white, .sect.lgrey, .sect.dgrey, .sect.black { padding: 1rem; }
  .sect .form-btns.fill { margin: 0 -1rem -1rem; }
  form.w80 { width: 100%; }
  label.inline, label.inline2 { display: block; width: 90%; margin-left: 0; text-align: left; }
  input.w20, input.w25, input.w30, input.w50, input.w65,
  select, textarea.w65, span.qn, .form-ind { margin-left: 0; width: 100% !important; }
  .form-chk { width: 8%; float: left; display: block; margin-right: 2%; }
  .form-chk + .form-ind { width: 90% !important; }
  input.w10 { margin-left: 0; width: 50%; }
  #tab-list { font-size: .9em; }
}

@media only screen and (max-width: 480px) {
  header nav li a { padding: .2rem 1rem; }
  img.l, img.r { float: none !important; width: 100% !important; margin: 0 !important; }
  #frmBasket td.w8rem { width: 3rem; }
  #frmBasket td.w8rem img { width: 2.6rem; }
  #tab-list { font-size: .85em; }
  #tab-list li a { padding: .5em .6em !important; }
  .tab .adm-list .w5 { width: 15%; }
  .tab .adm-list .w25 { width: 75%; }
  .tab .adm-list .w40 { width: 80%; margin-left: 16%; }
  .tab .adm-list .w10 { width: 30%; margin-left: 15%; }
  #wanted-list .mandes { display: block; width: auto; }
  #wanted-list .manu, #wanted-list .design { display: block; }
  #wanted-list .design { margin-bottom: .375rem; padding-bottom: .375rem; border-bottom: 1px solid #ddd; }
  #wanted-list .dets { display: block; width: auto; padding-left: 0; }
}

@media only screen and (max-width: 240px) {
  nav li.hide span { margin-left: 0; }
  nav.left .cat-list { -moz-columns: 1; -webkit-columns: 1; columns: 1; }
  nav.left .actions li { width: auto; }
}


/* Print styles */
@media print {
  * {
      background: transparent !important;
      color: #000 !important; /* Black prints faster: h5bp.com/s */
      box-shadow: none !important;
      text-shadow: none !important;
      font-size: .9em;
    }

  a, a:visited { text-decoration: underline; }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after { content: ""; }

  pre,
  blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }

  #page { margin: 0 auto; padding: 0; }  
  
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  h1 { text-align: center; margin: 0.5em auto; padding: 0; font-size: 1.6em; }
  h2.large { font-size: 2em; }
  p { margin: .5rem 0; }
  header .addr { font-size: .8em; line-height: 4; }
  section, article { border: 1px solid #ddd; }
  #logo { width: 1cm; margin-top: -1em; }
  .prt-hide, nav, form { display: none; }
  .form-btns, input[type="button"], input[type="submit"], a.btn, button { display: none !important; }
  #tab-list li { display: none; }
  #tab-list li.ui-state-active { display: block; margin: 0 auto; float: none; text-align: center; }
  #tab-list li.ui-state-active a { float: none; }
  .prtform form { display: block; }
  .prtform form p { font-size: 1rem; }
  .prtform a { text-decoration: none; font-size: 1rem; }
  .prtform section { border: none !important; }
  .prtform { width: 96% !important; }
}
