html{line-height:1.15;text-size-adjust:100%;}
body{margin:0;overflow-x: hidden;}
h1{font-size:2em;margin:0.67em 0;}
hr{box-sizing:content-box;height:0;overflow:visible;}
pre{font-family:monospace, monospace;font-size:1em;}
a{background-color:transparent;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
b,
strong{font-weight:bolder;}
code,
kbd,
samp{font-family:monospace, monospace;font-size:1em;}
small{font-size:80%;}
sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-0.25em;}
sup{top:-0.5em;}
img{border-style:none;}
button,
input,
optgroup,
select,
textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}
button,
input{overflow:visible;}
button,
select{text-transform:none;}
button,
[type="button"],
[type="reset"],
[type="submit"]{-webkit-appearance:button;}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}
fieldset{padding:0.35em 0.75em 0.625em;}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
progress{vertical-align:baseline;}
textarea{overflow:auto;}
[type="checkbox"],
[type="radio"]{box-sizing:border-box;padding:0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{height:auto;}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
details{display:block;}
summary{display:list-item;}
template{display:none;}

.linkbuttons{display:grid;gap:0.5em;  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.linkbuttons a{
    padding:1em;
    background:#000;
    color:#fff!important;
    white-space:nowrap;
    border-radius:0.5em; 
    text-align: center; 
    text-overflow: ellipsis; 
    overflow: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

.linkbuttons a:hover,
.linkbuttons a:focus {
  background: #00f;  
    outline: none; 
}


.strike {
    text-decoration: line-through;
}
.explanation{font-size: 0.9em; line-height: 2em;}

.sale_text{font-weight: bold;}


#secondaryNavigation .right span {white-space: nowrap;}

.maxTable{width:100%;border-radius:0.5em;overflow:hidden;box-shadow:0 0 0 1px #222}


.maxTable ul{padding-top: 0; margin-top: 0}

.section dl {margin-left: 1em;}

table{border-collapse:collapse}
th,
td{padding:0.2em;text-align:left;vertical-align:top;border:1px solid #00f}
th{background:#000;color:#fff}
img {max-width: 100%; height: auto;}

.nobull,
.nobull li{
    list-style:none;
    padding:0;margin:0
}

ol.alpha,
ol.number,
ol.alpha li,
ol.number li
{
    list-style:none
}

ol.alpha
{
    counter-reset:alphacount
}

ol.number
{
    counter-reset:numbercount
}

ol.number li:before,
ol.alpha li:before
{
    background:#000;
    color:#fff;
    padding:0.5em;
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    height:2em;
    width:2em;
    line-height:2em;
    border-radius:1.5em;
    font-weight:bold
}

ol.number li,
ol.alpha li
{
    margin-bottom:0.5em
}

ol.alpha li:before
{
    counter-increment:alphacount;
    content:counter(alphacount,upper-alpha)
}

ol.number li:before
{
    counter-increment:numbercount;
    content:counter(numbercount)
}


body{padding: 0; margin: 0; font: 1em/1.8em arial, verdana, sans-serif; background: #eee; background: linear-gradient(#ddd, #999);}
header{background:#fff;padding-top: 4.5em}
a.nodec,
.nodec a 
{
text-decoration: none;
}

.maxWidth {
    margin-left: 40px;
    margin-right: 40px;
    position:relative;
}

.threeCol .col{width: 33%;}

.threeCol .col img{margin: auto; display: block;}


.wideCol {width: auto}

.wideCol .widecol,
.wideCol > .wideside{width: 64%; margin-right: 2%; float:left }

.wideCol > .col{width: 33%}


.twocol .content{width:80%}

.twocol .sidebar{width:20%}


.widecol,
.left,
.right,
.middle,
.col,
.twocol .sidebar,
.twocol .content,
.sidebar{float:left}

.wrapper{padding: 0.5em}


.clearfix:before,
.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}
.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}
.centerAlign{text-align:center}
.rightAlign{text-align:right}

.darkbg,
.darkbg  a:link,
.darkbg  a:visited
{
    color: #fff;
}

.lightbg,
.lightbg  a:link,
.lightbg  a:visited
{
    color: #111;
}


.bluelinks a:link,
.bluelinks a:visited{color:#00f}
.bluelinks a:hover,
.bluelinks a:active{color:#77f}


#top{
    background: #004;
    z-index: 6;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

#secondaryNavigation,
#breadcrumbs,
#listing .sidebar,
#listing .listbar{background:#111}

#top span{white-space: nowrap;}
#top a{vertical-align:middle;display:inline-block;padding:0.5em;white-space:nowrap}

#top .loading{background:url(../images/loading.gif) no-repeat center}

#top, 
#secondaryNavigation,
#navbar
{
    padding: 0.5em;
    line-height: 2.5em;
}

#secondaryNavigation .right,
#top .right,
#navWrapper .right 
  {
    position: absolute;
    right: 0.5em;
}

#navWrapper .right{display: none;}


#secondaryNavigation .right .email{background:url(../images/email.png) no-repeat;padding-left:33px;}
#secondaryNavigation .right .phone{background:url(../images/phone.png) no-repeat;padding-left:35px;padding-bottom:5px}


#deskbanner {
    display: none;
    position: relative;
}


/*SEARCH BAR*/

#search{background:#fff;display:block;width:100%;border-radius:0.5em;overflow:hidden}
#keywords{width:69%;padding:0;border:none;height:2.75em;padding-left:1%;float:left;outline: none;}
#searchActivity{display: inline-block; height:2.75em; width:15%; float:left; text-align: center; }



#searchActivity.loading{background:url(../images/loading.gif) no-repeat center; position: relative;}
#searchActivity.clearsearch:after{content:"x"; display: inline-block; color:#000; position: absolute;  cursor: pointer;}
#searchbutton{float:left;width:15%;padding:0;border:none;height:2.75em;background:url(../images/search.png) no-repeat center #eee;color:#000;text-align:right}


/* ICONS */
.additemform .submit_element input,
.login,
#top .right a,
#navbar .right a,
.addtocart
{
    padding-left:28px;
    background-position:left;
    background-repeat:no-repeat; 
    margin-left: 2px;
    white-space: nowrap;
}


/* breadcrumbs */


#breadcrumbs{padding:0.5em 0;border-top-left-radius:0.5em;border-top-right-radius:0.5em}
#breadcrumbs a,
#breadcrumbs span,
#breadcrumbs em{font-style:normal;padding:0.5em;}
#breadcrumbs a:after{content:'';width:0px;height:0px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid transparent;border-left:5px solid #fff;display:inline-block;margin-left:0.5em}
.crumb{float:left}


.additemform .submit_element input,
.addtocart{background-position: 5px;}
.adminPage{background-image:url(../images/settings.png)}

.addtocart,
.additemform .submit_element input,
.shoppingCart{background-image:url(../images/cart.png)}
.myAccount{background-image:url(../images/myaccountdark.png)}
.viewOrders{background-image:url(../images/orders.png)}
.helpIcon{background-image:url(../images/helpicon.png)}

.login,
.logIn{background-image:url(../images/login.png)}
.logOut{background-image:url(../images/logout.png)}

#top .createaccount{margin-left: -0.5em!important}

.createaccount{padding-left: 0!important}

h1,h2,h3,h4{text-transform: uppercase; color: #00f}

.topbanner h1 {
    color: #fff;
}

/* SEARCH PROMPT */

#searchPrompt{clear:both;padding-top:1em;}
#searchPrompt a{width:12.5%; float:left;}
#searchPrompt a span{display: block; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;}
#searchPrompt a.allresults{background:#777;width:100%!important;padding-bottom:1em; text-transform: uppercase; font-weight: bold; text-align:center; display:block; line-height:4em; height:4em; padding:0; border-radius:0.25em; margin-top:0.25em}


.whitebg{background: #fff}

.roundedBottom {border-bottom-left-radius: 1em;border-bottom-right-radius: 1em; margin-bottom: 1em !important}

.navlinks{color: #000}
.navlinks a{background: #004;padding: 0.5em; border-radius: 0.5em;color: #fff!important}

.nodec a,
.prod a{text-decoration: none;}
/*ALERTS AND WARNINGS */
html.js .jswarning{display: none}
.jswarning,
.alert_message
{
    background:yellow;
    padding:0.5em;
    padding-left:50px;
    padding-right:60px;
    position:relative;
    border-radius: 0.5em
}

.jswarning:before,
.alert_message:before
{
    content:"i";left:0.5em;font-family:serif
}

.alert_message .close{
    right:0.5em;
    text-decoration:none
}


#dialogueContainer .dialogueClose:before,
#hideCart:before{content: 'x'}


#dialogueContainer .dialogueClose:before,
#hideCart:before
{ 
    display: inline-block;
    line-height: 1em;
    background:#111;
    color:#fff!important;
    text-align:center;
    padding:0.5em;
    border-radius:0.5em; margin-right: 0.5em;  width:1em;
    height:1em;
}


.jswarning:before,
.alert_message .close,
.alert_message:before{
    position:absolute;
    top:0.5em;
    background:#111;
    color:#fff!important;
    display:block;
    text-align:center;
    padding:0.5em;
    border-radius:0.5em;
    width:1em;
    height:1em;
    line-height:1em;
    font-weight:bold;
    text-decoration: none;
}

.alert_message ul,
.alert_message p{
    margin:0;
    margin-top:0.25em
}



#home .banner  h1,
#home .banner  h2{
color:#fff;
text-shadow: 0 0 4px #00f   
}

.topbanner {
    color: #fff!important;
    padding-bottom: 125px;
    margin-bottom: -125px;
}

.banner, .topbanner {
    background: #00f;
}

#home h2, .bigtext {
    font-size: 2.4em;
    line-height: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
}

.banner {
    background: #00f;
    min-height: 250px;
    padding: 0.5em;
    position: relative;
    padding-bottom: 200px;
    margin-bottom: -200px;
}
.banner, .topbanner {
    background: #00f;
}



.roundedBottomnopad{border-bottom-left-radius: 0.5em;border-bottom-right-radius: 0.5em; overflow: hidden;}

.roundedBottomnopad{margin-bottom: 0.5em}


/* TRANS */
#toplink,
#navWrapper *,
#navWrapper,
.transitionMe,
#listPageResults, #listPageResults *,
#navbar *, .miniAdd,
.nestedSelect label,
.prod_slider_container *{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}


/*WHY BUY*/

#whybuyfromus ul li strong {color:#00f; text-transform: uppercase;}

#whybuyfromus ul li{font-weight:bold;}




.lozenge {
    overflow: hidden;
}
.lozenge, .roundedBottom {
    box-shadow: 0px 0px 30px -10px rgb(0, 0, 0,0.8);
}
.lozenge {
    background: #fff;
    border-radius: 0.5em;
    margin-bottom: 0.5em;
    position: relative;
}



/*SUBPAGES */
.grid,
.productGrid,
.subpages
{
    display : grid; 
    padding: 1em; 
    margin: auto;
     gap: 0.5em; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}




.subpages a 
{ 
    transition: all .5s ease-in-out !important;
    text-align: center;
    overflow: hidden;
    padding-top: 1em;
    position: relative;
    border-radius: 1em;
    padding-bottom: 4em; 
}

.subpages a span
{
    position: absolute; 
    bottom: 0; 
    display: block; 
    padding: 1em; 
    text-align: center; 
    left: 0; 
    right: 0; 
    color:#00f;
    text-transform: uppercase;  
    font-weight:bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subpages a  img
{
    transition: all .2s ease-in-out !important;
    width: 100%;
    height: auto;
    display: block;
    background: white; 
    max-width: 300px;
    margin: auto;
}




.funkyTabs .prod,
.subpages a,
.listitem,
.griditem
{   
    background: #fff;
    box-shadow: 0 0 10px #999;
}


/*404*/
#fourohfour .lozenge {
    background: url(../images/fourohfour.png) no-repeat bottom right #fff;
}



/* LIST PAGE */


/*FILTERS*/


.nestedSelect label.selected,
.nestedSelect label:hover
{
    background:#000;
    color:#fff;
    cursor:pointer
}

.nestedSelect > li > label:after
{
    content:"+";
    position:absolute;
    top:0.25em;
    right:0.25em;
    display:block;
    padding:0.25em;
    height:1.5em;
    width:1.5em;
    background:#000;
    color:#fff;
    line-height:1.6em;
    font-weight:bolder;
    text-align:center;
    border-radius:0.5em
}

.nestedSelect > li.expanded > label:after
{
    content:"-"
}

.nestedSelect > li > label:hover:after
{
    background:#fff;
    color:#000
}

.nestedSelect label
{
    position:relative;
    display:block; 
    padding-left:0.25em
}

.nestedSelect,
.nestedSelect ul,
.nestedSelect li
{
    list-style:none;
    margin:0;
    list-style-position:inside;
    padding:0
}

.nestedSelect li ul
{
    padding-left:0px
}

.nestedSelect .expand > ul
{
    display:none
}

.nestedSelect .expanded > ul
{
    display:block
}

.nestedSelect ul li label
{
    cursor:pointer;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:4em;
    overflow:hidden
}

.nestedSelect li ul 
{
    overflow:auto; 
    max-height:20em
}

.nestedSelect li ul li:nth-child(odd) 
{
    background:#eee
}

.nestedSelect li
{
    line-height:2.5em
}

.nestedSelect input
{
    margin-right: 0.25em
}

.nestedSelect .allSelected
{
    background:#bbb
}

.nestedSelect .someSelected
{
    background:#eee
}





#clear_filters 
{
    position: relative; 
    text-decoration: none;
    display: block; 
    padding: 0.25em;
    line-height: 2.5em;  
    border-radius: 0.5em; 
    background: #fff; 
    height: 2em; 
    margin-bottom: 0.25em
}

#clear_filters:after 
{
    content: "x";
    position: absolute;
    right: 0.25em;
    top: 0.25em;
    display: block;
    width: 2em;
    height: 2em;
    text-align: center;
    color: #fff;
    background: #000;
    line-height: 2em;
    border-radius: 0.5em;
}



#listPageFliters 
{
    border-bottom-right-radius: 0.5em;
    overflow: hidden; 
    font-size: 0.9em;
} 


.sidebar 
{
    width: 20%;
}


#listPageFliters > div
{
    background:#fff!important;
    border-radius:0.5em;
    overflow:hidden;margin:0.5em
}


#current_filters
{
    background: #fff
}


#current_filters a
{
    position: relative; 
    text-decoration: none;
    display: block; 
    padding: 0.25em;
    line-height: 2.5em;  
    border-radius: 0.5em; 
    background: #fff; 
    height: 2em; 
    margin-bottom: 0.25em
}

#current_filters a:after 
{
    content: "x";
    position: absolute;
    right: 0.25em;
    top: 0.25em;
    display: block;
    width: 2em;
    height: 2em;
    text-align: center;
    color: #fff;
    background: #000;
    line-height: 2em;
    border-radius: 0.5em;
}



#listing .sidebar .title
{
    text-align:left;
    color:#000;
    background:#fff;
    padding-bottom:0.5em;
    padding-top:0.5em;
    font-size:1.8em;
    text-transform:uppercase;
    font-weight:bold; 
    padding-left:40px; 
    background: url(../images/filters.png) no-repeat center left
}

#listing .listbar 
{
    color: #fff;
    padding: 0.65em 0;
    line-height: 4em;
}

#listing .listbar .left 
{
    width: 80%;
}

#listing .listbar .left  label {white-space: nowrap;}
#listing .listbar .right 
{
    width: 20%;
    text-align: right;
}

#listing .listbar a 
{
    text-decoration: none;
    background: #fff;
    color: #000;
    border: 0;
    padding: 0 0.4em;
    border-radius: 5px;
    height: 2em;
    display: inline-block;
    line-height: 2em;
}

#secondaryNavigation,
#breadcrumbs,
#listing .sidebar,
#listing .listbar 
{
    background: #111;
}

#listPageResults
{
    overflow: hidden
}

#listPageTopBar, #listPageResults 
{
    float: left;
    width: 80%;
}

#listing .listbar * 
{
    vertical-align: middle;
}


#listPageResults .list{padding-top: 1em}

.switch{overflow:hidden;padding:0.1em;background:#fff;border-radius:0.5em;height:1.9em; line-height: 1.8em;display:inline-block;}
.switch label{padding:0 0.5em;border-radius:0.5em;color:#000;margin:0}
.switch input{position:absolute;left:-9999em}
.switch .on{background-color:#000;color:#fff}

#listView{background-image:url(../images/list_view.png)}
#gridView{background-image:url(../images/grid_view.png)}
#gridView,
#listView{background-position:4px center;background-repeat:no-repeat;padding-left:23px;display:inline-block}
 

select.styled-select,
select.styled-select option{-webkit-appearance:none;-moz-appearance:none;background:#fff;color:#222;border:0;padding:0.4em;border-radius:0.5em;height:2.05em;padding-bottom:0.3em;line-height:1.05em;}

select.styled-select::before,
select.styled-select::after {
  --size: 0.3rem;
  position: absolute;
  content: "";
  right: 1rem;
  pointer-events: none;
}

select.styled-select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

select.styled-select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
}

/*LIST ITEM*/


.listitem{position: relative; box-shadow: 0px 0px 20px 4px #ddd; width: 98%; margin-left: 1%; border-radius: 0.5em; overflow: hidden; margin-bottom: 1em;}
.listitem h2{color: #00f}

.listitem .leftcol {
    float: left;
    width: 30%;
    position: relative;
    margin-right: 1%;
}

.listitem .description {
    width: 52%;
    float: left;
}

.listitem .controlls {
    float: left;
    width: 15%;
    text-align: right;
    margin-bottom: 1em;
}

/* GRID */



 

.grid .griditem,
.productGrid .griditem,
.productGrid .prod{

border-radius: 1em; 
overflow: hidden; 
position: relative; 

padding-top: 0.5em; 
text-align: center
}

.griditem .blue_button,
.listitem .blue_button,
.addtocart,
.additemform .submit_element input
{
width: 100%;
display: block;
}

#listPageResults .griditem{position: relative; }

.additemform .submit_element input,
.blue_button
{
background-color: #004;
color: #fff;
padding: 1em;
margin: 0;
text-transform: uppercase;
text-decoration: none;
border: none;
box-sizing: border-box;
border-radius: 0.5em;
color: #fff!important;
white-space: nowrap;
}


main input[type=submit]{
    background-color: #004 !important;
    border-radius: 0.5em;
    border: none;
    padding: 1em;
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
}

.vertical_form .submit_element input[type=submit],
.funkyTabs .prod,
.listitem .blue_button,
.additemform .submit_element input[type=submit],
 .funkyTabs .blue_button,
#youmightlike .blue_button{border-top-left-radius: 0; border-top-right-radius: 0;}

.smallgriditem .blue_button{margin-top: 2.7em; padding: 1.8em 0;
border-top-left-radius: 0;
    border-top-right-radius: 0;}

.hasquantityselect .submit_element input{padding-bottom: 1.5em}

.productGrid .prod .price, .griditem .price, .listitem .controlls .price {
    font-size: 2em;
    font-weight: bold;
    color: #f24;
}


.preorderflag {
    background-color: #f24;
    padding: 0.5em;
    z-index: 2;
    position: absolute;
    top: 20px;
    right: 10px;
    text-transform: uppercase;
    font-weight: bold;
    transform: rotate(-19deg);
    color: #fff;
    font-size: 0.8em;
    line-height: 1.2em;
}



.restrictedProduct{
    background-color: #222;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    position: absolute;
    top: 170px;
    left: 10px;
    transform: rotate(19deg);
    font-size: 0.8em;
    line-height: 1.2em;
    padding: 0.5em;
} 


.outofstock 
{
    background-color: #222;
    transform: rotate(19deg);
}



.prod span,
.griditem .title 
{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #000;
}

/*PRODUCT SLIDER */
.prod_slider_container{display:inline-block;position:relative;overflow:hidden;width:100%;height:233px}
.prod_slider_container .prod_slider_slides{width:400%;background:#fff;display:block;position:absolute;height:233px}
.prod_slider_container .prod_slider_slides a{float:left;width:25%;border:0;display:block;text-align:center}
.prod_slider_container .prod_slider_slides a img{height:auto;border:0;display:inline-block;width:100%;max-width:300px}
.prod_slider_container .slide_controlls a{margin:0;background:#000;color:#fff;text-decoration:none;font-weight:bold;padding:0.5em;cursor:pointer;position:absolute;top:50%;margin-top:-2em;border-radius:0.5em}
.prod_slider_container .slide_controlls a:hover{background:#000;color:#fff}
.prod_slider_container .slide_controlls .prev_slide{left:0; border-top-left-radius: 0; border-bottom-left-radius: 0}
.prod_slider_container .slide_controlls .next_slide{right:0; border-top-right-radius: 0; border-bottom-right-radius: 0}
.prod_slider_container .prod_slider_current{text-align:center;clear:both;position:absolute;bottom:-1px;width:100%;height:10px;line-height:10px}
.prod_slider_container .prod_slider_current em{background:#000;padding:5px;font-size:0px;height:0;width:0;display:inline-block;}
.prod_slider_container .prod_slider_current .current{background:#f24}


/*funkyTabs*/

.funkyTabs{margin-bottom: 1em}

.funkyTabs .nav a
{
    float:left;
    color:#000!important;
    display:block;
    height:2em;
    text-align:center;
    line-height:2em;
    background:#fff;
    margin-right:2px;
    padding:0 0.25em;
    border-bottom:2px solid #aaa;
    border-top-left-radius:0.5em;
    border-top-right-radius:0.5em;
    font-weight:bold;
    text-transform:uppercase
}

.funkyTabs .nav a.active
{
    background:#fff;
    border-bottom:2px solid #fff
}

.funkyTabs .tabs .tab
{
    display:none
}

.funkyTabs .tabs .active
{
    display:block
}

.funkyTabs .tabsContent
{
    border:10px solid #fff;
    background:#fff;
    overflow:hidden;
    border-top-right-radius:0.5em;
    border-bottom-right-radius:0.5em;
    border-bottom-left-radius:0.5em;
    box-shadow: 0px 0px 30px -10px rgb(0, 0, 0, 0.8);
}

.funkyTabs .prod{font-size: 0.9em;}



 

@media only screen and (min-width:100em){
    #navWrapper.sticky .right{display:block}
}
 
/*footer */


footer{background: #000; border-top: 10px solid #00f}
 footer .col{width: 33.3333%; text-align: center;}

footer .list a{display: block;}
footer .footerlogo{vertical-align:middle;margin-right:0.25em}





#black_friday_banner{background: #000; color: yellow; text-align: center;font-weight: bold; text-decoration: none;text-transform: uppercase;}
#black_friday_banner .heading{font-size: 3em; line-height: 2.5em;text-decoration: none}
#black_friday_banner .strapline{text-decoration: none; font-size:1.4em;}
#black_friday_banner:hover{background: yellow; color: black;}

  


.fiftyfifty .left,
.fiftyfifty .right,
.fiftyfifty .address,
.fiftyfifty .col
{
    width:50%
}
 

.twocol .sidebar{width:20%}
.twocol .content{width:80%}


.grey_rounded_square{
    background: #eee;
    padding: 0.5em;
    border-radius: 0.5em;
    display: block;
}

/* HTML FORMS */

.horizontal_form .elements,
.vertical_form .elements
{
    background:#efefef;
    padding:0.5em
}

fieldset
{
    border:none;
    padding:0
}

.vertical_form .submit_element input
{
    width:100%;
    border-top-left-radius:0;
    border-top-right-radius:0
}

.vertical_form label
{
    font-weight:bold;
    display:block;
    text-transform:uppercase;
    padding:0.5em 0
}

.horizontal_form .elements,
.vertical_form .elements
{
    border-top-left-radius:0.5em;
    border-top-right-radius:0.5em
}

.postcodelookup_element button,
.vertical_form .elements textarea,
.horizontal_form .element input[type=text],
.horizontal_form .element input[type=email],
.horizontal_form .element input[type=password],
.horizontal_form .element input[type=number],
.horizontal_form .element select,
.vertical_form .element input[type=text],
.vertical_form .element input[type=email],
.vertical_form .element input[type=password],
.vertical_form .element input[type=number],
.vertical_form .element select
{
    display:block;
    width:98%;
    padding:0.5em 1%;
    appearance:none;
    border:1px solid transparent;
    border-radius:0.5em;
    box-shadow:0 0 40px #aaa5
}

.vertical_form .element select
{
    width:100%!important
}

.vertical_form .element
{
    padding:0 0.5em 0 0.1em
}

.horizontal_form
{
    border-radius:0.5em;
    overflow:hidden;
    padding:0!important
}

.horizontal_form .submit_element
{
    background:#ddd;
    text-align:right
}

.horizontal_form .submit_element input
{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-top-right-radius:0
}

.horizontal_form .elements .element
{
    display:inline-block;
    padding:0 0.5em 0 0.1em;
    width:240px
}

.horizontal_form .elements .element label
{
    display:block
}


.invalid{background: #ff5;}

.invalid input[type=text],
.invalid input[type=email],
.invalid input[type=password],
.invalid select
{
    border:1px solid #f00!important
}

.dateRange input
{
    display:inline-block!important;
    width:46%!important
}

form .user_errors
{
    border:1px solid #00c7ff;
    border-radius:0.5em;
    overflow:hidden;
    margin-bottom:0.5em
}

form .user_errors .title
{
    font-size:1em;
    background:#00f;
    margin:0;
    padding:0.5em;
    color:#fff
}

.explaination
{
    clear:both
}

.checkbox_element 
{
    line-height: 3em
}

.checkbox_element label
{
    width:95%;float:left;padding: 0
}

.checkbox_element input
{
    vertical-align:middle;
    width: 2em;
    height:2em
}

.postcodelookup_element input[type=text]
{
    float:left;
    width:60%!important;
    border-top-right-radius:0!important;
    border-bottom-right-radius:0!important
}

.postcodelookup_element button
{
    float:left;
    width:37%!important;
    border-top-left-radius:0!important;
    border-bottom-left-radius:0!important;
    background:#222;
    color:#fff;
    border:none
}

.button_container
{
    line-height:4em
}

.element{padding-bottom: 1em}    

form .submit_element input[type=submit]{
    background-color: #004;
    color: #fff;
    border: none;
    border-radius: 0.5em;
    padding: 1em;

}

.additemform .submit_element input[type=submit]
{
    padding: 2.06em;
}


#login .submit_element input[type=submit],
#sign_up .submit_element input[type=submit],
.login {
    background: url(../images/login.png) 5px center no-repeat #004 !important;
}




#dialogueBG,#cartBG {
    background: #000;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}

#cartBG {z-index: 2; opacity: 0;   transition: all 1s ease-out;}

#cartBG.inactive{display: none}

#cartBG.active{opacity: 0.5;display: block}

 

#dialogueContainer
{
    background:#fff;
    position:fixed;
    top:0;
    bottom: 0;
    right:0;
    width:50%;
    border-left: 2px solid #00f;
    z-index:4;
    padding-top: 4em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    overflow:hidden;
    animation:prodSlideIn 1s;
    animation-iteration-count:1;
}

 



#dialogueContainer.inactive
{
    right: -55%;
    animation:prodSlideOut 1s;
    animation-iteration-count:1;
}



@keyframes prodSlideIn{
0%{right: -55%}
100%{right: 0}
}


@keyframes prodSlideOut{
0%{right: 0}
100%{right: -55%}
}


#dialogueContent .productGrid .prod .sale_text{    font-size: 0.8em;}

#dialogueContainer .wrapper
{
    padding:10px
}


#dialogueContainer .dialogueTitle
{
    background:url(../images/grad.png) repeat-y left #222;
    color:#eee;
    top:0;
    left:0;
    right:0;
    padding:0.5em;
    position:absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 30px
}

#dialogueContainer .dialogueClose
{ 
    padding:0.5em;
    background:yellow;
    display:block;
    color:#00F;
    text-decoration:none;
    position: relative;
}

 

#dialogueContainer .dialogueContinue,
#dialogueContainer .dialogueCancel
{
    position:absolute;
    bottom:0;
    padding-bottom:1em;
    padding-top:1em;
    background:#004;
    display:block;
    color:#fff;
    text-decoration:none;
    border:none;
    width: 50%;
    text-align: center;
}

.tabs .navlinks,
#dialogueContainer .navlinks {line-height: 2em}

.tabs .navlinks a,
#dialogueContainer .navlinks a {
    font-size: 1.2em;
    padding: 0.25em;
}


#dialogueContainer .dialogueContinue
{
left: 0;   background: #aaa; color: #000;
}
#dialogueContainer .dialogueCancel
{
right: 0;   
}

#dialogueContainer .dialogueContent
{
    position:absolute;
    top:4.5em;
    left:0.25em;
    bottom:0.25em;
    right:0.25em;
    overflow:auto;
    color: #000;
    box-shadow: 0px 0px 20px 4px #ddd;
    margin:0.5em;
    border-radius: 0.5em;
    padding: 0;
}

#dialogueContainer .dialogueLarge
{
    position:absolute;
    top:7em;
    left:0.5em;
    bottom:0.5em;
    right:0.5em;
    overflow:auto;
    background:#fff;
    border-radius:0.5em;
    color: #000;
}

#dialogueContainer table
{
    width:100%
}

#dialogueContainer table th
{
    background:#004;
    color: #fff!important;
}

#dialogueContainer table th,
#dialogueContainer table td
{
    text-align:left;
    padding:0.25em;
    border-color:#00f;
    color: #000;
}

#dialogueContainer label
{
    padding:0 1em;
    white-space:nowrap;
    display:block
}

#dialogueContainer .stockdetails input
{
    width:50px
}

#dialogueContainer .stockdetails
{
    margin-bottom:0.5em
}

#dialogueContainer .itemPrice
{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: #f24
}



#thumbs
{
    max-width:600px;
    background:#fff;
    margin:auto
}

#thumbs a img
{
    width:25%
}

#prodinfoFlag
{
    position: absolute; 
    top: 20px; 
    left: 0;
    background-color: #f24; 
    padding: 0.5em;
    text-transform: uppercase; 
    font-weight: bold; 
    transform: rotate(-19deg); 
    color: #fff; 
    font-size: 0.8em; 
    line-height: 1.2em
}

#prodinfoTitle
{
    margin: 0
}

#prodinfoTitle div
{
    color: #f24
}

#prodinfoLeftcol
{
    width: 55%; 
    position: relative
}

#prodinfoRightcol 
{
    width: 45%;
}

table.stockdetails,
table.stockdetails td,
table.stockdetails th 
{
    border: 1px solid #00f; 
    border-collapse: collapse
}

table.stockdetails th 
{
    color: #fff!important
}

#prodinfoadd .submit_element 
{
    line-height: 4em;
    text-align: right;
}

#prodinfoadd input[type=submit] 
{
    border: none;
    padding: 1em;
    background: url(../images/cart.png) no-repeat 5px center #004 !important;
    padding-left: 35px;
    color: #fff;
    border-radius: 0.25em;margin-right: 0.5em;   
}


.productGrid .prod{
    
    border-radius: 0.5em;
    overflow: hidden;
    position: relative;
}

.productGrid .prod .sale_text{position: absolute; top: 20px; right: 5px;  background: #f24; color: #fff; padding: 0.25em; transform: rotate(-19deg);}


#youmightlike .productGrid {    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));}
#youmightlike .prod{font-size: 0.7em;}


.button_container {
    line-height: 4em;
}

a.toggle {
    display: block;
    width: 100%;
    clear: both;
    height: 2em;
}

.prodDetails a.toggle span {
    display: inline-block;
    float: left;
}

.prodDetails .icon {
    display: none;
}


.pageSelect{line-height:3em; text-align:center}


.pageSelect a {
background: #000;
color: #fff;
padding: 0.5em;
text-decoration: none;
border-radius: 0.25em;
    white-space: nowrap;
}


.pageSelect a.current
{
background:#004
}




.whitebody{
    background:#fff!important;
}



#printOrders{background: #fff;}

#printOrders img{display: none;}

@media print{


body{background: #fff!important;}




main{font-size:0.6em;line-height:1.4em}
#listPageResults{width:100%}
#listPageResults .grid .product{width:23%;height:5em!important}
#listPageResults .grid .product .title{overflow:auto;text-overflow:ellipsis;white-space:normal;min-height:4em;font-size:0.8em;line-height:1.2em;text-align:center;font-weight:normal}
#listPageResults .grid .product .prices{text-align:center}
#listPageResults .grid .product{page-break-inside:avoid}
.preorderflag,
header,
.prod_slider_container .slide_controlls,
.ui-datepicker,
#listPageTopBar,
.supressPrint{display:none}
*,
*:before,
*:after{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
a,
a:visited{text-decoration:underline}
td,
th{vertical-align:top;border:1px solid #000!important}
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}
p,
h2,
h3{orphans:3;widows:3;}

.griditem{min-height:auto!important;page-break-inside:avoid}

.orderPage{page-break-inside:avoid}

}


.whitelink{color: #fff!important}
#sideTabs {display: none;}


  #cartHover {
        position: fixed;
        right: 0;
        top: 0;
        width: 40%;
        background: #fff;
        height: 100%;
        border-left: 2px solid #00f;
        margin-right:-100%;
        transition:all 0.5s ease-out;
        z-index:5;
            
    }

    #hideCart{position: relative; display: block}


#cartHeader {
    display: block;
    height: 2em;
    background: yellow;
    padding: 0.5em;margin-bottom: 0.5em;
}
#clearCart{margin-left: 0.5em}
  #cartHover .wrapper{
    background: #fff;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow-y: auto;
    display: block; 
    left: 1em;
    right: 1em;
    padding: 0;
    box-shadow: 0 0 40px #aaa5;
    border-radius: 0.5em;
    padding-bottom: 2em;
  }

    #cartHover .wrapper tfoot th{ padding-bottom: 2em;}
  #cartHover .checkout{display: block; padding: 2em; color: #fff; text-decoration: none; text-align: center; font-weight: bold; border-radius: 0.5em; margin-top: 0.5em; text-transform: uppercase;
background: #003  url(../images/cart.png)  no-repeat 0.5em; position: absolute; bottom: 0.5em; left: 1em; right: 1em; border-top-left-radius: 0; border-top-right-radius: 0;
  }
#cart_messages{font-weight: bold;}
#cart_messages li,
#order_footer li{padding-right: 0.5em}

 #bag_products{background: #fff}
 #bag_products .product{display: block; background: #444;}
#bag_products img.thumbnail{min-width: 100px; float: left;}
 
 
    #cartHover.active 
    {
       margin-right:0
    }

table.striped tbody tr:nth-child(odd) td {
    background-color: #eee;
}


/* DESKTOP BREAKPOINT */
@media only screen and (min-width:1124px)
{

    #createaccountform h2,
    #loginform h2{padding-top: 3em}
    
    #deskbanner{display:block;width:100%;height:140px;background:#fff;text-decoration:none;position:relative;margin-top:0.25em;margin-bottom:0.25em;}
    #deskbanner:after{content:" ";position:absolute;right:0;top:0;width:417px;height:140px;background:url(../images/internationaldelivery.png) center no-repeat;display:block;}
    #deskbanner:before{content:" ";position:absolute;left:0;top:0;width:450px;height:140px;background:url(../images/bbmainlogov2.png) center no-repeat;display:block;}



#home .banner .wrapper{background:url(../images/footballer.png) no-repeat right;min-height:200px; animation:footballer 2s;animation-iteration-count:1; text-shadow: 0 0 4px #00f}


@keyframes footballer{
0%{background-position:120% 0}
100%{background-position:right}
}


    #toplink.show{display:block;opacity:1;background:#fff}
    
    #navbar,
    #navWrapper{background:#111;}

    .upTri{
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #00f;
    margin:auto;
    display:block
    }

  
 
    .sticky #navbar,
    #navWrapper.sticky{
    background:#00f;
    }


    .sticky{
    position:fixed;
    top:0;
    width:100%;
    background:#fff;
    z-index:6;
    animation:slidein 1s;
    animation-iteration-count:1
    }

    @keyframes slidein
    {
        0%{margin-top:-100px}
        100%{margin-top:0}
    }

    .sticky #homeButton{
    padding-left:34px;
    background:url(/assets/images/bb-logos/bb-sports-logo-030-white.png) no-repeat center left
    }


    .sticky #navbar > ul > li >a{
    color:#fff;
    }

    #secondaryNavigation .left{
    width:20%
    }

    #mainnavButton{
    display:none
    }

    #navbar{
    position:relative;
    line-height:3em;
    height:3.5em;
    clear:both;
    }

    #navbar a:link,
    #navbar a:visited{
    color:#fff;
    }

    #navbar a:hover,
    #navbar a:active{
    color:#fff
    }

    #navbar ul,
    #navbar li{
    padding:0;
    margin:0;
    list-style:none
    }

    #navbar ul a{
    display:block;
    padding:0.25em 0.5em;
    position:relative;
    }

    #navbar > ul > li{
    float:left
    }

    #navbar > ul > li > a.has-submenu{
    padding-right:1em;
    }

    #navbar > ul > li > ul{
    display:none;
    position:absolute;
    left:0;
    z-index:3;
    width:100%;
    line-height:2em;
    columns:5;
    column-fill:auto;
    column-gap:0;
    overflow:hidden;
    opacity:0;
    padding-bottom:0.5em;
    background:#111;
    opacity:0
    }

    #navbar li ul li a{
    color:#fff;
    }

    #navbar li:hover ul{
    display:block;
    opacity:1;
    height:22em
    }


    #navbar > ul > li > a.has-submenu:after{
    position:absolute;
    top:1.5em;right:0;
    content:" ";
    height:0px;
    position:absolute;
    width:0px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #fff;
    }

    #navbar ul ul a:hover{
    background:#222;
    color:#fff
    }

    #sideTabs{
    display:block;
    }

    #sideTabs a{
    transform:rotate(90deg);
    transform-origin:top left;
    position:fixed;
    left:1.9em;
    top:24em;
    height:3.6rem;
    background:#111;
    color:#fff;
    padding:4px 14px;
    z-index:2;
    text-decoration:none;
    border-radius:0.5em
    }

    #sideTabs a:last-child{
    top:30em
    }

    #sideTabs a:hover{
    left:3em;
    background:#ddd;
    color:#000
    }
}




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

    header{padding-top: 3em;}


    #top #homeLink 
    {
        padding: 0;
        padding-left: 40px;
        height: 32px;
        display: inline-block;
        background: url(../images/bb-logos/bb-sports-logo-032.png) no-repeat center left;
    }

    #navWrapper
    {
        background:#111;
        padding:0.25em 0
    }

    #navbar a:link,
    #navbar a:visited
    {
        color:#000
    }

    #navbar a:hover,
    #navbar a:active{
        color:#000
    }

    #mainnavButton
    {
        display:block;
        padding:0.5em;
        position:relative;
        text-transform:uppercase;
        font-weight:bold
    }

    #mainnavButton:after
    {
        content:" ";
        background:url(../images/navicon.png) no-repeat center #000;
        display:block;
        position:absolute;
        top:0.6em;
        right:0.25em;
        display:block;
        padding:0.25em;
        height:1.5em;
        width:1.5em;
        border-radius:0.25em
    }

    #navbar
    {
        padding:0.25em 0;
        margin:0.5em;
        border-radius:0.5em;
        overflow:hidden;
        background:#fff;
  
    }


    #navbar > ul > li,
    #navbar > ul
    {
    padding:0
    }

    #navbar ul
    {
        display:none;
        background:#fff;
        line-height: 1.5em;
    }
    
    #navbar ul,
    #navbar li
    {
        list-style:none
    }
    
    #navbar ul.active
    {
        display:block
    }
    
    #navbar ul a
    {
        position:relative;
        display:block;
        padding:0.5em
    }
    
    #navbar ul a.has-submenu:after
    {
        content:"+";
        position:absolute;
        top:0.25em;
        right:0.25em;
        display:block;
        padding:0.25em;
        height:1.5em;
        width:1.5em;
        background:#111;
        color:#fff;
        line-height:1.5em;
        font-weight:bolder;
        text-align:center;
        border-radius:0.25em
    }
    
    #navbar ul a.active:after
    {
        content:"-"
    }
    
    #navbar ul a.active
    {
        background:#eee
    }

    #searchPrompt a
    {
        width:20%
    }

    #listPageTopBar,
    #listPageResults,
    #listing .sidebar
    {
        display:block;
        float:none;
        width:unset;
        border-radius:0 !important;
        clear:both;
        padding:0.5em!important
    }

    #listPageFliters > div
    {
        margin: 0
    }
    
    .maxWidth 
    {
        margin: 0
    }

    .lozenge
    {
        margin-top: 0.5em; 
        margin-bottom: 0.5em
    }
 


    #listPageFliters .title
    {
        cursor:pointer;
        text-align:left!important;
        padding:0.5em;
        position:relative;
        font-size:1em!important;
        margin:0!important
    }

    #listPageFliters .nestedSelect
    {
        max-height:0;
        overflow:hidden
    }
    
    #listPageFliters .nestedSelectExpand
    {
        max-height:9999em
    }
    
    #listPageFliters .title:after
    {
        content:" ";
        background:url(../images/navicon.png) no-repeat center #000;
        display:block;
        position:absolute;
        top: 0.25em;
        right:0.25em;
        display:block;
        padding:0.25em;
        height: 1.75em;
        width:1.5em;
        border-radius:0.5em
    }




}


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

    .funkyTabs .tabButtons {background:#666; padding: 0.5em}

    .funkyTabs .nav a{width: 100%; display: block; border-radius: 0.5em; margin-bottom: 0.2em; border-bottom: none; padding: 0;}

    .funkyTabs .nav a.active{background: #444; border-bottom: none; color: #fff!important}

}


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

    h1 {line-height: 2em;}
    .breakOneHidden
    {
        display:none
    }

    #top .logOut
    {
        padding:0;
        padding-left:40px;
        display:inline-block;
        color:transparent;
        max-width:0;
        height:1.7em;
        overflow:hidden
    }

    
 


    .threeCol .col,
    .wideCol .wideside,
    .wideCol .col,
    .wideCol .widecol,
    .fiftyfifty .col,
    .fiftyfifty .left,
    .fiftyfifty .right
    {width: 100%!important}

  
     

    h1{font-size: 1.4em}
    h1,h2,h3{text-align: center;}

    .strike {display: block;}
    #cartHover{border-left: 0; width: 100%; z-index: 6;}
    #cartHover .wrapper{top: 0.5em}
}


@media only screen and (max-width:50em)
{
 


      header{padding-top: 7.5em}

      

    #listing .listbar .left, 
    #listing .listbar .right, 
    #secondaryNavigation .left, 
    #secondaryNavigation .right, 
    #top .left, 
    #top .right 
    {
        text-align: center!important;
        width: 100%!important;
        margin: 0.25em 0;
    }

    #secondaryNavigation .right, 
    #top .right 
    {
        position: initial;
    }

    
    #top .viewOrders,
    #top .helpIcon
    {
        padding:0;
        padding-left:40px;
        display:inline-block;
        color:transparent;
        max-width:0;
        height:1.7em;
        overflow:hidden
    } 

 
    .productGrid .prod .price
    {font-size: 1em}



    .controlls{padding-bottom: 30px}

 

#home .banner{text-align: center;}
    #home .banner h2{font-size: 1.8em}
    .bigtext{font-size: 1em;}
#black_friday_banner .heading{font-size: 1.8em}
}






@media only screen and (max-width:35em)
{

    .crumb{float: none}

 

    .listitem .leftcol,
    .listitem .description,
    .listitem .controlls,
    .listitem .rightAlign{
        width:100%;
        clear:both;
        text-align:center
    }

    .listitem .features{
        padding:0;
        list-style:none
    }

    .listitem .leftcol{
        text-align:center
    }

    .listitem .rightAlign{
        padding-top: 0.5em
    }
    
    .listitem input[type=submit],
    .listitem .blue_button{
        display:block;
        text-align:center;
        width:100%;
        padding-left:0!important;
        padding-right:0!important; 
        border-top-left-radius: 0; 
        margin-top: 0.5em; 
        border-bottom-left-radius: 0.5em
    }

    footer .col{
        width: 100%!important 
    }


    #top .myAccount
    {
        padding:0;
        padding-left:40px;
        display:inline-block;
        color:transparent;
        max-width:0;
        height:1.7em;
        overflow:hidden
    } 

#secondaryNavigation .right .email,
#secondaryNavigation .right .phone{font-size: 0.8em}

}

 
@media only screen and (max-width:540px)
{
            header{padding-top: 8em}

    .subpages a,
    .griditem 
    {
        width: 98%!important;
    }

    #home .productGrid .griditem
    {
        width: 98%!important;
    }
}





@media only screen and (max-width:25em)
{

    #top .adminPage
    {
        padding:0;
        padding-left:40px;
        display:inline-block;
        color:transparent;
        max-width:0;
        height:1.7em;
        overflow:hidden
    }
}



 


@media screen and (max-height:800px)
{

    #prodinfoTitle
    {
    text-align: left!important
    }
    
    #prodinfoLeftcol,
    #prodinfoRightcol,
    #prodinfoBottom{
    width: 98%!important;
    padding: 0 1%;
    }
 
}






#callout{display: none;}
@media only screen and (min-width:2000px){
#callout{position:fixed;bottom:0;right:0;width:250px;height:186px;background:url(../images/teamshirts.png);text-decoration:none;display:block;z-index: 2}
#callout:hover{animation:lookatme 0.5s;animation-iteration-count:infinite;}
@keyframes lookatme{0%{transform:rotate(0deg)}
25%{transform:rotate(-10deg)}
75%{transform:rotate(10deg)}
100%{transform:rotate(0deg)}
}
}



.quickorderitemimgwrapper{width:7%!important; float: left}

.quickorderitemimgwrapper img{padding: 0.5em; background: #fff; border-radius: 0.5em;}
.quickorderitem{width: 90%!important; float: left; padding-left: 1%; padding-right: 0;}

.vertical_form .element .element{padding: 0!important}



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

    
    #dialogueContainer{width: 98%; z-index: 6}

#cartHover{ z-index: 6}
    #dialogueContainer.inactive
    {
        right: -105%;
    }

    #dialogueContainer .dialogueContent{top: 0.25em}    

    @keyframes prodSlideIn{
    0%{right: -105%}
    100%{right: 0}
    }


    @keyframes prodSlideOut{
    0%{right: 0}
    100%{right: -105%}
    }

    #prodinfoLeftcol,
    #prodinfoRightcol
    {
        width: 100%;
    }


}



@media only screen and (max-width: 360px) {
   .checkoutpage header {
        padding-top: 10em;
    }
}

@keyframes fadeIt{0%{background-color:#FFFF00;}
100%{background-color:#FFFFFF;}
}
.highlight{animation:fadeIt 10s;}



#top_prods {background: #eee; padding-top: 0.5em;padding-bottom: 0.5em; border-radius: 0.5em; width:auto; margin-right:auto }

#top_prods li {background: #fff; margin: 0.5em; border-radius: 0.5em;}

#top_prods li div{display: grid; grid-gap: 0.5em; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}

#top_prods li div > * {text-align: center;}
#top_prods li div .product span{display: block}

#top_prods li::marker {
  font-size: 1.5em;
  font-weight: bold;
  background: #555;
}