html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:1em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;color:#222; max-width:100%}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]
{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto} fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
em{font-style:normal}
html, *, *:before, *:after{-moz-box-sizing:border-box;box-sizing:border-box;}
html, body{max-width:100%;overflow-x:hidden;}
html{color:#222;font-size:1em;line-height:1.4;}
::-moz-selection{background:#b3d4fc;text-shadow:none;}
::selection{background:#b3d4fc;text-shadow:none;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
audio,
canvas,
iframe,
img,
svg,
video{vertical-align:middle;}
fieldset{border:0;margin:0;padding:0;}
textarea{resize:vertical;}
.browserupgrade{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0;}
.slider{overflow:hidden}
.slider .slidecontainer{width:400%;text-align:left;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.slider .slidecontainer img{float:left;width:25%}
.shadow{webkit-box-shadow:5px 5px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow:5px 5px 5px rgba(0, 0, 0, 0.2);box-shadow:5px 5px 5px rgba(0, 0, 0, 0.2);}
#homepage .slider{max-width:1200px;}
.triLinks li,
.triLinks{list-style-type: none; padding:0; margin:0;}
.triLinks li{position:relative;width:100%; }
.triLinks a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1em;padding-right:3em;margin-bottom:1px}
.triLinks a:after{content:" ";position:absolute;top:1em;right:0.5em;display:block;border-top:0.5em solid transparent;border-left:0.5em solid #222;border-bottom:0.5em solid transparent;}

.grid{
  display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1em;
}
.grid a {text-align: center;}

.grid a span,
.grid a span em{display: block;}


@font-face {
    font-family: 'Berlin Sans FB Demi';
    src: url('../fonts/BerlinSansFBDemi-Bold.woff2') format('woff2'),
        url('../fonts/BerlinSansFBDemi-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


#mainlogo{text-transform:uppercase;font-family: 'Berlin Sans FB Demi';font-weight: bold;font-style: normal;display:inline-block;height: 46px;line-height: 46px;padding: 0 0.25em!important;font-size: 2.4em;color:#111;}

footer .col{text-align:center; width:33.3333%;}

#mainBanner{background-image:url(/assets/images/homepage.jpg);background-position:center 0;height: 1000px;}

#splash{background-image:url(/assets/images/splash.jpg);background-position:center 0; height: 1000px; }

#beach{background-image:url(/assets/images/beach.jpg);background-position:center 0; height: 1000px; }
.parallax { 
background-attachment:fixed; 
background-position: top center;
background-repeat: no-repeat;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;  
position:relative;
margin-bottom:150px
}

.parallax:before{
content:"SANOSAN";
position:absolute;
top:0.25em;
right:0.25em; 
text-align:right; 
font:4em/1em 'Berlin Sans FB Demi'; 
color:#fff;
text-shadow: 5px 5px 10px rgba(0,0,0,0.5); 
}

.parallax:after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:300px;
background-image:linear-gradient(transparent 0, white,transparent);
margin-bottom:-150px
}

 
.parallax
{
box-shadow: 10px 10px 10px rgba(0,0,0,0.1)
}

#homepage h1{font-size:2em;}

.grid a span{display:block;}
.important{font-weight:bold}

.Multi{background:url(../images/multi.jpg);}
.promo {
    background:  #904eb1;
    text-align: center;
    padding: 0.5em;
    font-size: 2.89em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Berlin Sans FB Demi';
}
#funkyDialogueBG{position:fixed;top:0;left:0;width:100%;height:100%;z-index:8;background:rgba(255,255,255,0.8)}
#funkyDialogue{width:30em;height:40em;background:#fff;position:absolute;top:50%;left:50%;margin-top:-20em;margin-left:-15em;-webkit-box-shadow:10px 10px 18px 0px rgba(0,0,0,0.25);-moz-box-shadow:10px 10px 18px 0px rgba(0,0,0,0.25);box-shadow:10px 10px 18px 0px rgba(0,0,0,0.25);z-index:9;font-size:0.9em}
#funkyDialogue.hidden{display:none}
#funkyDialogue.small{width:35em;height:15em;margin-top:-7.5em;margin-left:-17.5em;}
#funkyDialogue nav{background:#222;color:#fff;padding:1em;}
#funkyDialogue nav a{position:absolute;right:0;top:0;padding:1em;background:#201;color:#fff}
#funkyDialogue .funkyDialogueFooter{position:absolute;bottom:0.8em;left:0;width:100%;background:#fff}
#funkyDialogue .funkyDialogueFooter .left,
#funkyDialogue .funkyDialogueFooter .right{width:50%}
#funkyDialogue .dialogueContent{position:absolute;top:3em;left:0;right:0;bottom:3.2em;background:#fff;padding:0em;overflow:auto}
#funkyDialogue.small .dialogueContent{overflow:auto;padding:0.5em}
#funkyDialogue .reset,#funkyDialogue .confirm{padding:1em;}
#funkyDialogue .reset{background:#CCA;color:#222;border-top-right-radius:1em;}
#funkyDialogue .confirm{background:#00374D;color:#fff;border-top-left-radius:1em;}
#funkyDialogue .dialogueContent .element select{width:100%;border:none}
#funkyDialogue .dialogueContent .element label{color:#222;background:#ccc;text-transform:capitalize;}
#funkyDialogue .dialogueContent .element select option,
#funkyDialogue .dialogueContent .element textarea,
#funkyDialogue .dialogueContent .element input,
#funkyDialogue .dialogueContent .element label{width:100%;padding:0.5em;display:block;border:none;}
#funkyDialogue .dialogueContent .radioGroup{background:#fff;padding:0.5em}
#funkyDialogue .dialogueContent .radioGroup label{padding:0.5em;width:50%;float:left}
#funkyDialogue .dialogueContent .radioGroup label input{position:absolute;}
#funkyDialogue .dialogueContent .radioGroup label.active{background:#222;color:#eee}
@media only screen and (max-width:40em){#funkyDialogue.small,
#funkyDialogue{position:absolute;left:0;top:0;width:100%;height:100%;margin-top:0;margin-left:0}
}
@media only screen and (max-height:30em){#funkyDialogue.small,
#funkyDialogue{position:absolute;left:0;top:0;width:100%;height:100%;margin-top:0;margin-left:0}
}


@keyframes driveIn {
  0% {
    margin-left:0; 
  }

  100% {
  	margin-left:50%; 
  }
}

.drveIn
{
  animation: driveIn 4s;
  margin-left:50%; 
} 

.submitElement{text-align:right}
#content input[type=button],
#content input[type=submit],
input[type=reset],
a.simple_button:active, a.simple_button{background:#222;font-weight:normal;color:#fff!important;border:none;padding:0.8em;text-transform:capitalize;text-decoration:none; border-radius: 0.5em;}
input[type=reset]{background:#f0f0f0;color:#000;border-top-right-radius:1em}

#alert_message{position:fixed;top:47.5%;left:50%;width:500px;height:30px;margin-top:-16px;margin-left:-250px;z-index:900000000000000;display:none;padding:15px;line-height:30px;font:1.2em/2em 'Quantico', verdana, arial, sans-serif;}
#alert_message .left{width:60%}
#alert_message .right{width:40%}
#alert_message,
#alert_message button{color:#fff;background:#111}
#alert_message button{border:none;background:#00374D;text-decoration:none;font:1.2em/2em 'Quantico', verdana, arial, sans-serif}
#dynamicResults{position:absolute;top:3em;left:0;background:#fff;width:100%;display:none;margin:auto;border-bottom:1px solid #333}
#dynamicResults .prod,
#dynamicResults .more{width:20%;display:block;overflow:hidden;background:white;float:left;height:7em;padding:2px;white-space:nowrap}
#dynamicResults .prod{font-size:0.8em}
#dynamicResults .more{background:#0AF;text-align:center;color:#fff;text-decoration:none;font:1.9em/2.4em 'Quantico', verdana, arial;padding:0;height:2.4em;}
#alert_message{position:fixed;top:47.5%;left:50%;width:500px;height:30px;margin-top:-16px;margin-left:-250px;z-index:900000000000000;display:none;padding:15px;line-height:30px;font:1.2em/2em 'Quantico', verdana, arial, sans-serif;}
#alert_message .left{width:60%}
#alert_message .right{width:40%}
#alert_message,
#alert_message button{color:#fff;background:#111}
#alert_message button{border:none;background:#00374D;text-decoration:none;font:1.2em/2em 'Quantico', verdana, arial, sans-serif}
#dynamicResults .more:hover{background:#F70;}


h1,h2,h3,h4{text-transform:uppercase; font-family: 'Berlin Sans FB Demi'; font-weight: bold; font-style: normal; color:#000}
footer{background:#000;display:block;min-height:20em;padding-top:1em; padding-top:5em;  border-top:10px solid #666;}

footer .maxWidth .col{width:33.3333%;text-align:center;}
.linklist a{display:block}
blockquote{padding:0.5em;margin-top:1em;margin-bottom:1em;margin-left:10%;margin-right:5%;padding-left:2em;border-left:10px solid #ccc;color:#444;font:1.5em/1.8em "medium-content-serif-font",Georgia,Cambria,"Times New Roman",Times,serif;font-style:italic;}
.fancytext{font:1.2em/1.8em "medium-content-serif-font",Georgia,Cambria,"Times New Roman",Times,serif;font-style:italic;color:#444}
.maxWidth{padding: 0.25em;margin:auto}
.wrapper{padding: 0.25em}
.deviceWidth{width:100%;display:block}
main{padding-bottom:1em}
header{display:block;margin-top:3em!important;}
#mainBanner .slider{margin:auto;}
.left,.middle,.right,.widecol,.col{float:left}
#widecol{padding:0.5em}
#widecol .widecol{width:60%}
#widecol .col{width:40%}
.wideCol{padding:0.5em}
.wideCol .widecol{width:60%}
.wideCol .col{width:40%}
.threeColasym .widecol{width:46%}
.threeColasym .col{width:46%}
.threeColasym .thincol{width:4%}
.twoCol .col{width:50%}
.fiveCols .col{width:20% !important}
.thincol{float:left}

.threeCol{  grid-template-columns: repeat(3, 1fr);}

.threeCol .col{width:33.33333333333333%}
.rightAlign,
.right_align{text-align:right}
.centerAlign{text-align:center}
.nodec,
.nodec a{text-decoration:none;outline:0}
.darkbg{color:#eee}
.darkbg a:link,
.darkbg a:visited{color:#eee}
.darkbg a:hover,
.darkbg a:active{color:#fff}
.lightbg{color:#222}
.lightbg a:link,
.lightbg a:visited{color:#222}
.lightbg a:hover,
.lightbg a:active{color:#333}
.bluelinks a:link,.bluelinks a:visited{color:#00f}
.bluelinks a:hover,.bluelinks a:active{color:#77f}
.square{display:inline-block;width:1em;height:1em;background:#111;margin-right:0.5em;border:1px solid #111;-webkit-print-color-adjust:exact;}
.linkList a{display:block;background:#222;color:#fff;float:left;width:22%;margin-right:1%;margin-bottom:0.5em;padding:0.5em 1%;text-decoration:none;text-align:center;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.linkList a:hover{background:#17273e}
.ui-menu-item,
.productGrid a span,
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.alpha{list-style:none;counter-reset:alphacount;}
.alpha li{margin-bottom:0.5em}
.alpha li:before{content:counter(alphacount , upper-latin);counter-increment:alphacount;display:inline-block;background:#111;color:#fff;padding:0.5em;margin-right:0.5em;border-radius:0.5em}
.number{list-style:none;counter-reset:numbercount;}
.number li{margin-bottom:0.5em}
.number li:before{content:counter(numbercount);counter-increment:numbercount;display:inline-block;background:#111;color:#fff;padding:0.5em;margin-right:0.5em;border-radius:0.5em}
.materials{margin-top:0.5em}
.nobs,
.nobs li{list-style:none;margin:0;padding:0}
.nobs li.title{text-transform:uppercase;background:#222;color:#fff;border-bottom:1px solid #111}
.nobs li.price{font-weight:bold}
.nobs .title{border-bottom:1px solid #111}
.materials .nobs{float:left;width:25%}
.vertical_form label{display:inline-block;width:35%;color:#17273e;font-weight:bold;vertical-align:top}
.vertical_form .explaination{line-height:2.8em}
.horizontal_form{clear:both;}
.horizontal_form > .element{float:left;width:16%;padding-right:0.5%;padding-bottom:0.5em}
.horizontal_form > .element input,
.horizontal_form > .element select{width:100%;background:#fff;}
.horizontal_form .submit_element{clear:both;width:100%}
.vertical_form{padding-bottom:1.5em}
.vertical_form input[type=text],
.vertical_form input[type=email],
.vertical_form input[type=password],
.vertical_form select,
.vertical_form textarea{width:60%;border:1px solid #aaa;background:#fff;height:1.5em;padding-left:0.5em;}
.vertical_form textarea{height:auto;}
.vertical_form .element{padding:0.5em;padding-left:0;}
.submit_element{padding-top:0.5em;text-align:right}
.submit_element input{background:#222;padding:0.5em;border:none;color:#fff}
.element .prompt{text-align:right;margin:0;margin-right:3.5%;background:#eee;padding:0.5em;color:#1A6BC4;font-weight:bold;display:none}
.invalid .prompt{display:block;}
.twocol .col{width:50%;}
.twocol .col .wrapper{padding:0 0.5em}
.productGrid a{float:left;width:20%;padding-bottom:20%;height:0;text-align:center;overflow:hidden;position:relative}
.productGrid a span{display:block;background:#222;color:#fff;padding:0.5em 2%;position:absolute;bottom:0;left:0;width:96%;}
.date label{float:left}
.date span{display:block}
.date .day{width:50px}
.date .y input{width:80px}
.date input,
.date select{margin-right:0.25em}
.dateRange label{float:left;width:100% !important;margin:0}
.dateRange input{float:left;width:48% !important;margin:0}
.grid .product{float:left;text-align:center;width:20%;}
.grid .product span{display:block;}

#subpages{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
}

#subpages a{ position:relative;overflow:hidden;color:#fff;background:#fff;text-align:center;}
#subpages a img{height:auto;max-width:100%}
#subpages a span{
  display:block; 
  font-weight:bold;
  width:100%;background:rgba(255,255,255,0.4);padding:10px 0;text-transform:uppercase;color:#666; font-family: 'Berlin Sans FB Demi';
    font-size: 1.5em;}
#subpages a:hover span{background:#eee;border-radius:0.25em;}
.scrollbox{width:100%;overflow:auto}
caption{color:#fff;background:#fa0;text-transform:uppercase;text-align:right;padding:0.5em}
table{width:100%;border-collapse: collapse; border-radius: 0.5em; overflow: hidden;}
table th,
table td{padding:0.5em;border-collapse:collapse;border:1px solid #eee;font-size:0.9em;text-align:left;vertical-align:top}
table th{background:#eee;color:#000;font-weight:normal;text-transform:uppercase;vertical-align:top;}
.colourbox{width:5%;}
main img{max-width:100%}

#breadcrumbs{font: 1.2em/1.8em "medium-content-serif-font",Georgia,Cambria,"Times New Roman",Times,serif;font-style: italic;}
#breadcrumbs a,
#breadcrumbs span,
#breadcrumbs em{font-style:italic;padding:0.5em;padding-left:0; color:#444!important;}
#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 #00374d;display:inline-block;margin-left:0.5em}
#breadcrumbs .crumb{float:left;}

#mainnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  line-height: 3.5em;
  height: 3.5em;
  z-index: 3;
  transition: all 0.25s linear 0.25s;
  display: flex;
  align-items: center;
  padding:0;
  box-shadow: 0 0 50px #000e;
}

#mainsearch {
  margin-left: 1em;
  display: flex;
  align-items: center;
  background:#eee;
  padding:0.5em;
  border-radius: 0.5em;
}
#mainsearch input{border:none}
#mainsearch input[type="search"] {
  padding: 0.4em;
}

#mainsearch input[type="submit"] {
  
  padding: 0.4em 0.8em;;
  background:#222;
  color:#fff;
     border-top-right-radius: 0.5em; 
    border-bottom-right-radius: 0.5em;
}

#mainnav .right {
  margin-left: auto;
  display: flex;
  align-items: center; 
}
#mainnav .right a{margin-left:0.5em;}

#menuLink {
    background: url(../images/navicon.png) no-repeat left #fff;
    padding-left: 30px !important;
    border-radius: 0.25em;
    color: #000;
 
}


#keywords{padding-left:30px!important; background:url(../images/search.png) no-repeat left #fff; border-top-left-radius: 0.5em;border-bottom-left-radius: 0.5em;}

#mainMenu{height:100%;width:100%;background:#fff;position:fixed;top:0;left:100%;z-index:2;transition:all 0.25s linear 0.25s;}
#mainMenu.active{left:0%}
#mainMenu .maxWidth{position:absolute;top:3em;bottom:0;width:100%;overflow:auto}
#mainMenu ul,
#mainMenu li{list-style:none;padding:0;margin:0}
#mainMenu li li a:before{content:"-"}
#mainMenu a{text-decoration:none;display:block;padding:0.5em;border-left: 10px solid #a4a4a4;position:relative;}
#mainMenu a:hover{border-left:10px solid #f88;background:#eee}
#mainMenu a.currentPage{border-left:10px solid #f04}
#mainMenu .maxWidth > ul > li > a{background: #f3f3f3;}
.share{display:inline-block}
.share span{text-decoration:none;display:inline-block;width:0;overflow:hidden;padding-left:32px;height:32px;float:left}
.share > .facebook{background:url(/assets/images/share-icons.png) no-repeat -42px 0px;}
.share > .twitter{background:url(/assets/images/share-icons.png) no-repeat -42px -34px;}

#sidebar ul,
#sidebar ul li
{margin:0;padding:0; list-style-type: none}
#sidebar ul.padded{padding-left:1.5em}
#product_price{font-weight:bold;text-transform:uppercase;font-size:1.5em;}
#product_related{display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.5em;}
#product_related a{text-align:center;background:#fff}
#product_related a img{width:100%;max-width:190px;height:auto}
.sizeGuideBorder{border-collapse:collase}
.sizeGuideBorder th,
.sizeGuideBorder td{border:1px solid #aaa}#product_left_col{width:50%;float:left;}



/*FUNKY ZOOM */

#funkyZoom{
width:100%;
background:#fff;
padding:0;
overflow: hidden; 
height: 0;
padding-bottom: 74.3%;
position: relative
}
#funkyZoom .slides{
width:400%;
height:100%
}

#funkyZoom .slides a{
width:25%;
float: left;
text-align: center;
}
#funkyZoom .slides a img{
width:100%;
height:auto;
cursor:crosshair;
max-width: 780px;
}

#funkyZoom .prevIm,
#funkyZoom .nextIm
{
position: absolute;
top:50%;
background: #000;
color:#fff;
font-weight: bold;
padding:1em;
text-decoration: none;
border-radius: 0.5em;
z-index:2;
margin-top:-25px
}

#funkyZoom .prevIm
{
left:0.5em
}

#funkyZoom .nextIm
{
right:0.5em
}


#zoomcontroll {
position: absolute;
background: #fff;
z-index: 1; 
color: #fff;
display: none;
background-repeat: no-repeat;
cursor: crosshair; 
}

#preload{
display:block;
width:100%;
height:100%;
background:url('/assets/images/ajax-loader.gif') no-repeat center #000
}


#zoomstate {position: absolute; z-index: 2; background-color: #111; color:#fff; right:0.5em; top:0.5em;  height:20px; width:20px;background-image:url(../images/zoomstate.jpg); background-repeat: no-repeat;border-radius: 0.25em}

#zoomstate.out{background-position: 1px 0}
#zoomstate.in{background-position: -19px 0}



#product_content{width:50%;height:auto;float:left;}
#product_content h2{font-size:1.8em;line-height:1.8em;font-weight:bold;}
#product_content .fb-like{margin-left:208px;margin-top:40px;}
#product_features em{font-size:1.3em;font-weight:bold;color:#F70;}
#prod_box{height:200px}
#prod_box .center_align{font-size:1.3em;font-weight:bold;clear:both;}
#product_prices th{white-space:nowrap}
#product_prices{width:100%;border-collapse:collapse;margin-bottom:10px}
#product_prices th, #product_prices td{text-align:left;border:1px solid #eee;padding-left:5px;padding-right:5px}
#product_prices th{background:#eee;color:#000;font-weight:normal;}
#product .features ul li{display:inline-block;padding-left:15px;background:url('../images/bullet.jpg') no-repeat top left;}
#product_slides,
.transitionMe,
.transitionMe *{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
#product .moreInfo{font-size:1.2em;font-weight:bold}
#product_prices td{padding-top:10px;padding-bottom:5px}
#productSubpages a{background:#fff;text-align:center; text-decoration: none;}
#productSubpages a img{height:auto;max-width:100%} 

#productSubpages a:hover span{background:#eee;border-radius:0.25em;}
#fourteendays{color:#fff;background:#222;padding:10px;text-align:center}
.socialBar{margin-top:10px;padding:5px}
.socialBar .col{margin-right:5px;vertical-align:middle}
#addtobagform{clear:both;background:#EEE;border-radius:0.5em;overflow:hidden;}
#addtobagform .elements{width:75%}
#addtobagform .submit_element{padding:0;width:25%}
#addtobagform .elements,
#addtobagform .submit_element{float:left}
#addtobagform .submit_element input{width:100%}
#addtobagform .element{display:block;width:46%;float:left;padding-left:4%;}
#addtobagform .element select{background:#fff}
#addtobagform .element select,
#addtobagform .element input{display:block;width:100%;}
#addtobagform label{font-weight:normal;display:blotype_selectck;color:#000}
#addtobagform .elements{float:left}
#addtobagform .submit_element input{height:4em}
#p_add{text-align:right}
#free_Del{font:1.2em/2em 'Quantico',verdana,helvetica,arial,sans-serif;font-weight:bold;color:#fff;background:#F70;}
#size_selector{clear:both;line-height:2.32em;}
#size_selector em{border:1px solid white;width:31px;text-align:center;float:left;display:block;margin-right:-1px;margin-bottom:-1px;}
.out_of_stock{background-color:#eee;color:#777}
.in_stock{background-color:#1f1f1f;color:#fff;cursor:pointer}
.in_stock:hover,
.selected{background-color:#98C5EB;color:#222}
#selected_price{font-size:1.7em;line-height:3em;padding-top:1px;}
#sizeKey{vertical-align:middle;height:1em;line-height:1em}
#sizeKey strong{vertical-align:middle;display:inline-block;width:8px;height:8px;border:1px solid #000;}
.tabs{width:100%;overflow:hidden;}
.tabs .tabsnav{height:24px}
.tabs a:link,
.tabs a:visited{color:#222;text-decoration:underline}
.tabs .tabsnav a{background:#111;text-decoration:none;height:18px;border-bottom:2px solid #1f1f1f;margin-right:2px;padding-top:2px;padding-left:1em;padding-right:1em;display:block;float:left;color:#fff;padding-bottom:2px;}
.tabs .tabcontainer{display:block;height:515px;color:#fff;background:#111}
.tabs .tabcontainer .tab{display:block;padding:10px;color:#222;}
.tabs .tab_bottom{padding:5px}
.tabs table{width:100%}
.tabs th{color:#222;text-align:left}
.tabs .tabContent{background:#fff;color:#222;border:1px solid #eee;padding:10px;height:470px;overflow:auto}
.tabs .tabContent ul{padding-left:20px}
.tabs .grid .icon{width:132px;height:150px;float:left;line-height:1.5em;text-decoration:none;font-weight:normal;margin-right:16px;}
.tabContent .title{font-size:1.5em}
.tabContent .subtitle{font-family:verdana, arial, sans-serif;font-size:1.1em;font-weight:bold}
#top{margin-bottom:1px}
#bag_message{position:fixed;top:50%;left:50%;width:818px;height:198px;margin-left:-435px;margin-top:-115px;z-index:95555555545;display:none;color:#fff;padding:15px;text-align:center;font:1em/2em 'Quantico', verdana, arial, sans-serif;}
#bag_message .left,
#bag_message .right,
#bag_message .middle{width:33.3%}
#bag_message .left{text-align:left}


form#listfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* sidebar: fixed width on larger screens */
#sidebar {
  flex: 0 0 343px; /* do not grow/shrink, fixed at 250px */
  box-sizing: border-box;
} 
#current_filters{display: grid;gap:5px}

#current_filters a{
    display: block;
    text-decoration: none;
    color:#000;
    padding:0.5em;
    margin-right: 0.5em;   
    border-radius: 0.25em;
    border: 1px solid #aaa;
    background: #fff;
    }

 

#current_filters a::before{
 
  content:"X";
  margin-right: 10px;
  background:#000;
  color:#fff;
  padding:0.25em;
  border-radius: 0.25em;

}

.filtergroup label{display: block; padding:0.5em}

.filtergroup label:hover{cursor: pointer;}
.filtergroup label input{margin-right: 0.5em;}
/* Content: take up the rest of the space */
#content {
  flex: 1 1 0;
  min-width: 0; /* prevent overflow issues */
  box-sizing: border-box;
}

/* On smaller screens, stack */
@media (max-width: 1500px) {
  form#listing {
    flex-direction: column;
  }

  #sidebar,
  #content {
    flex: 1 1 100%;
  }
}
#size_filter,
#color_select {
  display: grid;
  grid-template-columns: repeat(auto-fit, 50px);
  gap: 5px; /* Optional: adds spacing between squares */
}

#size_filter > *,
#color_select > * {
  width: 50px;
  height: 50px;
  border-radius: 0.25em;
  border:1px solid #999;
  text-align: center;
  line-height: 30px;
}



.filtergroup > *{background-color:#fff}

#type_select {display: grid; gap: 5px; }
#type_select label{
  border:1px solid #999;
  border-radius: 0.25em;
}
#type_select label input,
#size_filter label input,
#color_select label span,
#color_select label input{position: absolute; left:-400px}



 label:hover,
 label.active 
  {
  color:#fff;
  background-color: #000;
}
 
 
.listbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  border-radius: 0.5em;
  font-family: sans-serif;
  margin-bottom: 1em;
}

.listbar label {
  font-weight: bold;
  margin-right: 0.5em;
}

.listbar select {
  padding: 0.5em;
  border: 1px solid #aaa;
  border-radius: 0.25em;
  background: #fff;
  font-size: 1em;
}

.pageSelect {
  display: flex;
  gap: 0.5em;
  margin-top: 1em;
}

.pageSelect a {
  padding: 0.5em 0.75em;
  text-decoration: none; 
  color: #333;
  border: 1px solid #aaa;
  border-radius: 0.25em;
  transition: all 0.2s ease-in-out;
}

.pageSelect a:hover {
  background-color: #ddd;
  color: #000;
}

.pageSelect a.active {
  background-color: #222;
  color: #fff;
  border-color: #000;
}

.pageSelect a.prevpg,
.pageSelect a.nextpg {
  font-weight: bold;
}

#grid{
  display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap:1em
}


#grid .product {
    text-decoration: none;
    text-align: center;
    overflow: hidden;
    
}


#grid .product span{display:block; padding: 0.5em;}

.filtergroup .title,
#grid .product span .price {
    display: block;
    font-weight: bold;
    font-family: 'Berlin Sans FB Demi';
    font-size: 1.4em;
    text-transform: uppercase;
}

#listing label{
  font-weight: bold;
    font-family: 'Berlin Sans FB Demi';
}

#grid .product img{max-width:100%;height:auto}





.fiftyfifty .left, .fiftyfifty .right, .fiftyfifty .col{width:50%}
#bagbuttons{line-height:4em}
#checkoutStart,
#billing_form,
#bagform,
#shoppingbag {padding:3em}
#shoppingbag .item *{display:inline-block;padding:0.25em}
#shoppingbag .item .remove{background:#222;color:#fff;padding:0.25em 0.5em;border-radius:0.25em}
.linetotal{text-align:right}
#newIn a img{display:inline-block}
#newIn a span{display:block}
.button{background:#222;border:none;padding:1em;color:#fff !important;text-decoration:none; border-radius: 0.5em;}
#updatebagbutton.active{background:#fa0;}
.qselect{display:inline-block;background:#222;}
.qselect span{display:inline-block;background:#222;color:#fff;padding:0em 0.5em;cursor:pointer;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;}
.qselect input{text-align:center}
@media only screen and (min-width:65em){#mainMenu{width:30%;}
#mainMenu.active{left:70%!important;}
.showmobile{display:none;}
#mainnav .hidemobile{display:inline-block;}
}
@media only screen and (max-width:65em){

.parallax{background-attachment: scroll; background-position: top center;}

	#menuLink{width:30%;}
	#mainMenu .maxWidth{top:6em;}
#mainnav{height:auto;}
#mainnav .left{width:100%; text-align:center;}
#mainnav .right{width:100%;}
.promo{margin-top:3em;}
 
 
#productSubpages a{width:33.3333%;padding-bottom:25%}
#productTopPanel,
#product_left_col,
#product_content{width:100%;}

#mainsearch{width:70%}
.hidemobile{display:none;}
#product_price,
h1, h2{text-align:center}
#breadcrumbs .crumb{display:block;width:100%}
#breadcrumbs a:after{position:absolute;right:0.5em}
#addtobagform .element,
#addtobagform .submit_element{width:100%;padding:0}
#addtobagform .elements{width:95%;margin-left:2.5%;padding-bottom:1em}
.fiftyfifty .left, .fiftyfifty .right{width:100%;text-align:center}
.buttoncontainer{line-height:4em}
#deliveryOptions a{display:block}
.vertical_form input,
.vertical_form select{padding:1em!important}
.vertical_form label,
.vertical_form input,
.vertical_form select,
.vertical_form button{width:100%!important;text-align:center}
#mainnav.out{top:-3em}
#mainnav.in{top:0}
}
@media only screen and (max-width:55em){#mainnav.out{top:-3em}
#mainnav.in{top:0}
#upsell .col,
#upsell .col a{text-align:center;display:block;width:100%}



footer .maxWidth .col,
.listbar .left,
.listbar .right,
#sidebar,#content{width:100%}
}
@media only screen and (max-width:30em){


#productSubpages a,
footer .col{width:100%;}


.vertical_form .explaination{margin-left: 0; padding:0} 
.vertical_form label{text-align:left; width:100%!important; }

.vertical_form button,
.vertical_form select,
.vertical_form input{width:100%!important
}
.fiftyfifty .col
{width:100%; float:none; padding-bottom: 2em;}


  
#checkoutoptions a{width:100%;}

 

}
@media print{.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;}
#listPageResults{width:100%}
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;}
h2,
h3{page-break-after:avoid;}
}
.hidden{display:none !important;visibility:hidden;}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
.invisible{visibility:hidden;}
.clearfix:before,
.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
@media print{*,
*:before,
*:after{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;}
img{max-width:100%}
.colourbox,
.square{display:none}
.fancytext,.nobs{font-size:0.9em;line-height:2em}
.nobs .title{font-weight:bold}
.pbreak{page-break-after:always;}
#breadcrumbs,
footer,
#mainnav,
#mainMenu{display:none}
.ppage{page-break-inside:avoid;}
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;}
h2,
h3{page-break-after:avoid;}
}

#yumcookies
{position:fixed;bottom:0em;left:0;width:100%;padding:0.5em 0;color:#fff;background:#222;z-index:20;font-size: 0.9em;}
 
 .linkbuttons {line-height: 3em}
.linkbuttons a{background:#111; padding:0.25em; color:#fff; border-radius:0.25em;}


.Black{background-color:#000;}
.Red{background-color:#f00;}
.Brown{background-color:#841;}
.Cherry{background-color:#f15;}
.DarkBrown{background-color:#521;}
.Fuchsia{background-color:#f08;}
.Green{background-color:#4a4;}
.Lime{background-color:#8f8;}
.Navy{background-color:#004;}
.Gold{background-color:gold;}
.Orange{background-color:#fa0;}
.Silver{background-color:silver;}
.Yellow{background-color:yellow;}
.Royal{background-color:#00f;}
.Ivory{background-color:#feb;}
.Taupe{background-color:#B37343;}