/* cmsms stylesheet: boxworks - layout NEW modified: 07/20/26 10:02:41 */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/

body {font-family: Calibri, sans-serif; -webkit-text-size-adjust: 100%; }


/*
set font size for all divs,
this overrides some body rules
*/
div {
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link {
   text-decoration: underline;

/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #404040; 
}

a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #404040; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #404040;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {

   color: #000000;
}

.cellpad { padding-right:10px; }

.hidden{
position: absolute;
left: -1500em;
}
.hide{
position: absolute;
left: -2000em;
}

/*****************
basic layout 
*****************/
body {
   background: #ffffff url(/uploads/images/bg2.gif) repeat-x 0 0px;      
       color: #333;

   margin-top:0px;    /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {

    text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	width: 100%;
	max-width: 980px;
	height: 100%;
   border-left: 0px solid white;
   border-right: 0px solid white;

   color: black;

}


.wrapper { display: block; width: 100%; max-width: 940px; margin: auto; }


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
display: block;
background-color: transparent;

}

div#header h1 a {
/* you can set your own image here */
   background: url(uploads/images/header2.jpg) no-repeat 0 0px;     
   display: block;
   height: 170px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

/* position for the search box */
#search {
   background-color: #ffffff;
   width: 796px;    /* enough width for the search input box */
   text-align: right;
   padding: 20px 56px 5px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #818989;
}
#search a:link {
   text-decoration: underline;
  color: #818989;   
}

#search a:active {
   text-decoration: underline;
  color: #818989;   
}

#search a:visited {
   text-decoration: underline;
  color: #818989;         
}


#search a:hover {
   text-decoration: underline;
   color: #818989;
}

#header a:link {
   text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #404040;
font-size: 16px;
}

#header a:active {
   text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #404040;
font-size: 16px;

}

#header a:visited {
   text-decoration: none;
   background-color: inherit;
   color: #404040;      
font-size: 16px;
        /* a different color can be used for visited links */
}
#header a:hover {
   text-decoration: none;
   color: #404040;
font-size: 16px;
}

#logo-tel-row {
  display: block;
  padding: 20px 0px;
  font-size: 0;
}

#logo-tel-row .logo-block {
  display: inline-block;
  width: 45%;
  margin: 0px 2.5%;
  text-align: center;
  vertical-align: top;
}

#logo-tel-row .logo-block img {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 6px auto 0px;
}

#logo-tel-row .logo-block p {
  font-size: 18px; line-height: 22px; font-weight: bold; letter-spacing: 2.5px; margin: 0;
}

#logo-tel-row .callus-block {
  display: inline-block;
  width: 40%;
  margin: 0px 2.5%;
  text-align: center;
  vertical-align: top;
}

#logo-tel-row .callus-block p {
  font-size: 16px; line-height: 22px; letter-spacing: 0.5px; margin-bottom: 0px; 
}

#logo-tel-row .callus-block p:last-of-type {
  font-size: 12px; line-height: 16px;  
}

#logo-tel-row .callus-block p.telno {
  font-size: 40px;  line-height: 46px; font-weight: bold; letter-spacing: 1.5px;
}

.headerimg {
display: block;
width: 100%;
height: 380px;
max-width: 940px;
background-image: url(/uploads/images/header-pic.jpg);
background-size: 100% 100%;
margin: auto;
}

.headerimg .main-section {
display: inline-block;
width: 76.5%;
vertical-align: top;
}

.headerimg .convincers-section {
display: inline-block;
width: 205px;
vertical-align: top;
}

.headerimg .convincers-section .convincer {
display: block;
width: 100%;
padding: 20px 0 25px;
}



.headerimg h1 {
  font-size: 36px; color:#ffffff; background-color:#000000; width: 480px; padding: 5px 15px 5px 15px; opacity:0.6;
  margin-top: 25%;
}

.headerimg h5 {
  font-size: 24px; color:#ffffff; background-color:#985b44; width: 450px; padding: 5px 15px 5px 15px; opacity:0.8;
}

#mobile-convincers {
  display: none;
  font-size: 0;
      background-image: linear-gradient(#bf916d, #9b5f43);
  margin-bottom: 30px;
}

#mobile-convincers div {
  display: inline-block;
  vertical-align: top;
  padding: 15px 4% 20px;
  width: 41.9%;
  text-align: center;
}

#mobile-convincers div:first-of-type {
  border-right: 1px solid #ffffff;
}

#mobile-convincers div p {
font-size: 16px;
line-height: 18px;
letter-spacing: 0.5px;
color: #ffffff;
margin: 0;
}

#mobile-convincers div p.convincer-title {
font-size: 24px;
font-weight: bold;
line-height: 26px;
margin-bottom: 3px;
}

#twitter-feed a:link {
   text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #b89662;
font-size: 12px;
padding: 4px 0px ;
font-weight: normal;
}

#twitter-feed a:visited {

   color: #b89662;

}


div#twitter-feed a.tweetauthor {
   text-decoration: none;
   color: #404040;
font-size: 16px;
   margin: 0px;


}

div#twitter-feed {
width: 210px;


}

div#twitter-feed p.tweetwhen {
   text-decoration: none;
   color: #404040;
font-size: 10px;
   margin: 0 0 1.5em 0;

}

div.breadcrumbs {
   padding: 1em 0 1.2em 1em; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;        /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 0em;        /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
   background-color: #ffffff;
}

 div.breadcrumbs span.lastitem { 
   font-weight:bold; 
 } 

 div#content {
   margin: 0px auto 2em 0;   /* some air above and under menu and content */

   background: #ffffff url(uploads/images/contentbg.gif) 0 0px;    
}



div#main {
  display: inline-block;
    margin-top: 0px;
width: 69%;
height: 100%;
vertical-align: top;
}

div#main a {

color: #404040;

}


div#main .table-scale {
  display: block;
  width: 100%;
}

div#main .table-scale table {
  width: 100% !important;
}

body.moving-packs div#main .table-scale table td {
  position: relative;
  vertical-align: bottom;
}

div#main .table-scale table img {
  width: auto;
  max-width: 95%;
  height: auto;
}

body.moving-packs div#main .table-scale table img {
  margin-top: 0px;
}

div#main .table-scale table {
  width: 100% !important;
}

#main p.subtitle {
   font-size: 18px;
   color: #985b44;
   font-weight: bold;
   margin-bottom: 15px;
}

div#main-temp {
  display: inline-block;
    margin-top: 50px;
    margin-bottom: 150px;
width: 90%;
padding: 0 5%;
height: 100%;
vertical-align: top;
}

div#main-temp div.temp-message {
  display: block;
width: 90%;
max-width: 700px;
margin: 100px auto;
padding: 40px 5% 30px;
background-color:#fef0ce;
border: 2px solid #000000;
border-radius: 20px;
}

#main-temp h2 {
   margin-bottom: 50px !important;
}

#main-temp p.notice {
   font-size: 22px;
   color: #000000;
   font-weight: bold;
   margin-bottom: 25px;
text-align: center;
}

div#sidebar {
   width: 210px;     /* sidebar width, if you change this please also change #main margins */
   display: inline-block;  /* FIX IE double margin bug */
   margin-left: 22px;
    margin-top: 0px;
   margin-right: 30px; /* and some air on the right */  
}

div#sidebar.mobile { 
display: none;
width: 80%;
margin: auto;
text-align: center;
}

div#sidebar.mobile table { 
width: 90%;
max-width: 500px;
margin: auto;
}

div#sidebar.mobile table br { 
display: none;
}

div#sidebar.mobile h5 { 
width: 100%;
text-align: center;
}

div#sidebar.mobile div#twitter-feed {
width: 100%;
}


div#footer {
   clear: both;       /* keep footer below content and menu */
   color: #fff;
   background-color: #385C72; /* same bg color as in header */
}

div#footer .wrapper {
   display: block;
   width: 100%;
   max-width: 980px;
}



div#footer p {
   font-size: 0.8em;
   padding: 1.5em;       /* some air for footer */
   text-align: center;  /* centered text */
   margin: 0;
}

div#footer p a {
   color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   padding: 1em;
   border-bottom: 1px dotted black;
   margin: 1em;
}


div#conv {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 202px;     /* sidebar width, if you change this please also change #main margins */
margin-top: 0px;
   background: #155A9D url(uploads/images/conv-bg.gif);   
padding-left: 15px;
color: #ffffff;
   font-weight:bold;
height: 260px;
}

div#conv a {
   width: 150px;
/* specific font size, this could be larger or smaller than default font size */
	font-size: 1.2em;
font-family: arial;
/* make sure we keep the font normal */
	font-weight: normal;
/* set default link colors */
	color: #ffffff;
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
padding-left: 25px;
padding-right: 25px;
padding-top: 2px;
padding-bottom: 2px;
/* makes it hold a shape */
	display: block;
/* removes underline from default link setting */
	text-decoration: none;
/* you can set your own image here this is tall enough to cover text heavy links */
	background: url(uploads/images/convincers-bg.gif);


}

div#product-name {
   background: url(/uploads/images/product-bg.jpg);

	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #404040;
height: auto;

   color: #fef0ce;
padding: 3px 0px 7px 0px;
   margin:0em;    /* gives some air for the pagewrapper */
    text-align:center;
   
   
}
div#product-name a,
a:link  {
	color: #ffffff;
}
div#product-name a:hover  {
background-color: #fef0ce;
	color: #150905;
padding: 0px 5px 0px 5px;
}



div#newfooter {
clear: both;
   background: url(/uploads/images/footer-bg.gif);
   background-position: center;
height: 100px;
   color: #333;
background-color: #FFFFFF;
   margin:0em;    /* gives some air for the pagewrapper */
    text-align:center;
   
}

div#newfooter table {
   width: 100%;
   padding: 50px 0 0px;
}

div#newfooter td.footertext {
   display: inline-block;
   width: 66%;
}

div#newfooter td.footertext:last-of-type {
   width: 33%;
}

div#newfooter a,
a:link {
text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
color: #404040;

}


div#newfooter a:active {
text-decoration: none;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */

}

div#newfooter a:visited {
text-decoration: none;

            /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
div#newfooter a:hover {
text-decoration: none;
background: transparent;

}




/********************
CONTENT STYLING
*********************/
div#content {

}
.prices {  font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #ffffff}
/* HEADINGS */
div#content h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	margin: 0px 0px 0.7em 0px;

}
div#content h2 {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #404040;
	margin: 0px 0px 20px 0px;
	padding: 4px 0.5% 10px;
width: 99%;

/* set borders around header */
   background: url(uploads/images/h2bg.gif) ;      
border-bottom: 1px solid #985b44;

/* and some air under the border */
}

.headertext {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	letter-spacing: 0.7px;
   line-height: 1.3em;


/* set borders around header */

/* and some air under the border */
}


div#header h2 {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #000000;
	font-weight: bold;
	letter-spacing: 0.7px;
	margin: 0px 0px 20px 0px;
	padding: 6px 0px 5px 90px;
width: 650px;

/* set borders around header */


/* and some air under the border */
}

div#content h3 {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #000000;
	margin: 0px 0px 0.5em 0px;
   line-height: 1em;
}
div#content h4 {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000000;
	margin: 0.8em 0px 0.8em 0px;
}
div#content h5 {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	margin: 0px 0px 1.2em 0px;
   line-height: 1.3em;
}
div#sidebar h5 {
    color: #866350;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 0 10px;
margin: 0px;
border-bottom: 1px dashed #866350;
width: 210px;
}
div#twitter-feed p {

	font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   margin: 0 0 0.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
	color: #000000;
}
.packstable {
 font-size:16px;
}
h6 {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	margin: 0px 0px 1.2em 0px;
   line-height: 1.3em;
}
/* END HEADINGS */

/* TEXT */

@font-face {
    font-family: 'LaneNarrowRegular';
    src: url('LANENAR_-webfont.eot');
    src: url('LANENAR_-webfont.eot?#iefix') format('eot'),
         url('LANENAR_-webfont.woff') format('woff'),
         url('LANENAR_-webfont.ttf') format('truetype'),
         url('LANENAR_-webfont.svg#webfontWWvSDmxB') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LanePoshRegular';
    src: url('LANEPOSH-webfont.eot');
    src: url('LANEPOSH-webfont.eot?#iefix') format('eot'),
         url('LANEPOSH-webfont.woff') format('woff'),
         url('LANEPOSH-webfont.ttf') format('truetype'),
         url('LANEPOSH-webfont.svg#webfontyJUr7THB') format('svg');
    font-weight: normal;
    font-style: normal;

}

p {

	font-family: Calibri, Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
	color: #000000;
}

.similar {

	font-family: Calibri, Arial, Helvetica, sans-serif;
   font-size: 12px;
   padding: 0;
	color: #000000;
}



.convtext {
	font-family: Calibri, Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
	color: #000000;
}

.mainnews {
	font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;

	color: #000000;
}

blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}
td {
	font-family: Calibri, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

#links {
	height:auto;
 z-index:9;
}

div#links a {
   display: block; 
   padding: 0.6em 0.3em 0.3em 0.7em;  /* some air for it */
   color: #0a2d55;                                 /* this will be link color for all levels */
   margin: 0px;
   font-family: Calibri, Arial, Verdana, Geneva, Helvetica, sans-serif;
   font-size: 14px;

   text-decoration: none;
   }

#clients {
	height:auto;
 z-index:9;
}

div#clients a {
   display: block; 
   padding: 0.3em 0em 0.3em 0.6em;  /* some air for it */
   color: #0a2d55;                                 /* this will be link color for all levels */
   margin: 0px;
   font-family: Calibri, Arial, Verdana, Geneva, Helvetica, sans-serif;
   font-size: 14px;
   text-decoration: none;
   }

.prods {
	font-family: Calibri, Arial, Helvetica, sans-serif;
   font-size: 14px;
	color: #0849f9;
   font-weight: bold;
}

.conv_header {
	font-family: Calibri, Arial, Helvetica, sans-serif;
   font-size: 16px;
	color: #000000;
}
.main {
	font-family: Calibri, Arial, Helvetica, sans-serif;
   font-size: 14px;
	color: #000000;
}
.mainlarge {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
}
.mainsmall {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
.bullethead {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #c00000;
   font-weight: bold;
}
.heading {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #1f4141;
   font-weight: bold;
}
.large {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
}
.sml {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
   font-weight: bold;
}

#topnav {
    position: relative;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 13px;
   font-weight: bold;
	color: #ffffff;
	z-index: 100;
	height: 34px;
	width: 600px;
    left: 40px;
	top: 0px;
}
#topnav a:link {
   text-decoration: none;
  color: #ffffff;   
}

#topnav a:active {
   text-decoration: none;
  color: #ffffff;   
}

#topnav a:visited {
   text-decoration: none;
  color: #ffffff;      
}


#topnav a:hover {
   text-decoration: underline;
   color: #000000;
}


/* END TEXT */

/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 14px;
   line-height: 1.4em;
margin: 0 0 25px 30px;
  color: #000000;   

}

div#enlargepics ul,
div#enlargepics ol,
div#enlargepics dl {
	font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   line-height: 1.4em;
margin: 0 0 0px 0px;
  color: #000000;   

}

div#main ul li,
div#main ol li {
   margin: 0 0 0em 0em;
}

/* definition lists topics on bold */
div#main dl dt {
   font-weight: bold;
   margin: 0 0 0 1em;
}
div#main dl dd {
   margin: 0 0 1em 1em;
}

div#main dl {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #c0c0c0;
}

#linkstop {
position:relative; width:255px; height:26px; z-index:7; left: 541px; top: 16px;
}


#CONTACT FORM

.formbuilderform {
	float: none;
	padding-top: 5px;
	padding-bottom: 15px;
	padding-left: 0px;
	width: 270px;
	padding-right: 0px;
	text-align: center;
	margin: 0px;
}


.formbuilderform .formheader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #4173A8;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 0px;
	margin-top: -5px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 0px;
	border: 1px solid #4173a8;
}
#m6fbrp__57 {
	width: 240px;
	margin-right: 10px;
	margin-left: 10px;
	height: 18px;
	margin-bottom: 8px;
}
#m6fbrp__58 {
	width: 240px;
	margin-right: 10px;
	margin-left: 10px;
	height: 18px;
	margin-bottom: 8px;
}
#m6fbrp__59 {
	width: 240px;
	margin-right: 10px;
	margin-left: 10px;
	height: 18px;
	margin-bottom: 8px;
}
#m6fbrp__60 {
	width: 240px;
	margin-right: 10px;
	margin-left: 10px;
	height: 18px;
	margin-bottom: 8px;
}
#m6fbrp__62 {
	width: 240px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 8px;
}


.formbuilderform .companyname {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
color: #DD6010;

	margin-right: 5px;
	padding-bottom: 10px;
	text-align: right;
}

.formbuilderform .name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
color: #DD6010;

	margin-right: 5px;
	padding-bottom: 10px;
	text-align: right;
}
.formbuilderform .email {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
color: #DD6010;

	margin-right: 5px;
	padding-bottom: 10px;
	text-align: right;
}
.formbuilderform .phone {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
color: #DD6010;

	margin-right: 5px;
	padding-bottom: 10px;
	text-align: right;
}
.formbuilderform .detailenq {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
color: #DD6010;
	margin-right: 5px;
	padding-bottom: 0px;
	text-align: right;
        vertical-align: top;
}


#formwrap {
	background-color: #F1F5FA;
	width: 270px;
	padding-bottom: 0px;
	border: 1px solid #CCCCCC;
        margin-bottom: 80px;
        margin-left: 10px;
}

#box {
/* you can set your own image here */
   background: url(uploads/images/boxbg.gif) 0 0px;     
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 10px;
border: 1px solid #b9cadd;

}

#box2 {
/* you can set your own image here */
   background: url(uploads/images/boxbg2.gif) 0 0px;     
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 10px;
border: 1px solid #c0cfe0;
}


div#prices {
 background-color: #ff0000;
 border:2px solid #ff0000;
 border-radius:25px;
 -moz-border-radius:25px; /* Old Firefox */
 width: 48px;
 height: 46px;
color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
padding-top: 2px;
text-align: center;
float: right;
margin-right: 10px
 } 


body.moving-packs div#prices {
float: none;
position: absolute;
top: 4px;
right: 4px;
margin: 0;
 }  

div#pricesbig {
 background-color: #ff0000;
 border:2px solid #ff0000;
 border-radius:50%;
 -moz-border-radius:50%; /* Old Firefox */
 width: 88px;
 height: 86px;
color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;

text-align: center;

margin-right: 10px
 } 

div#pricesbig a {
color: #ffffff !important;
text-decoration: underline;
 } 

div#home-links a {
color: #404040;
}
/* END LISTS */
/* cmsms stylesheet: boxworks - menu NEW modified: 12/14/20 09:48:11 */
/* by Alexander Endresen and mark and Nuno */
#menu_vert {
/* no margin/padding so it fills the whole div */
	margin: 0;
	padding: 0;

}
.clearb {
/* needed for some browsers */
	clear: both;
}
#menuwrapper {
/* set the background color for the menu here */
/* IE6 Hack */
	height: 1%;
	width: 100%;
	max-width: 940px;
/* one border at the top */
	border-top: 0px solid #3F565C;
	padding: 0;
        display: block;
	margin: auto;
      background-image: linear-gradient(#e1ddb0, #9b5f43);

}
ul#primary-nav, ul#primary-nav ul {
/* remove any default bullets */
	list-style-type: none;
	margin: 0;
	padding: 0;

}
ul#primary-nav {
/* pushes the menu div up to give room above for background color to show */
	padding-top: 6px;
/* keeps the first menu item off the left side */
	padding-left: 10px;
}
ul#primary-nav ul {
/* make the ul stay in place so when we hover it lets the drops go over the content below else it will push everything below out of the way */
	position: absolute;
/* top being the bottom of the li it comes out of */
	top: auto;
/* keeps it hidden till hover event */
	display: none;
/* same size but different color for each border */
	border-top: 0px solid #C8D3D7;
	border-right: 0px solid #C8D3D7;
	border-bottom: 1px solid #ADC0C7;
	border-left: 0px solid #A5B9C0;
}
ul#primary-nav ul ul {
/* now we move the next level ul down from the top a little for distinction */
	margin-top: 1px;
/* pull it in on the left, helps us not lose the hover effect when going to next level */
	margin-left: -1px;
/* keeps the left side of this ul on the right side of the one it came out of */
	left: 100%;
/* sets the top of it inline with the li it came out of */
	top: 0px;

}
ul#primary-nav li {
/* floating left will set menu items to line up left to right else they will stack top to bottom */
	float: left;
/* no margin/padding keeps them next to each other, the padding will be in the "a" */
	margin: 0px;
	padding: 0px;
font-size: 16px;

}
#primary-nav li li {
/* Set the width of the menu elements at second level. Leaving first level flexible. */
	width: 180px;
/* removes any left margin it may have picked up from the first li */
	margin-left: 0px;
/* keeps them tight to the one above, no missed hovers */
	margin-top: -1px;
/* removes the left float set in first li so these will stack from top down */
	float: none;
/* relative to the ul they are in */
	position: relative;
}
/* set the "a" link look here */
ul#primary-nav li a {
/* specific font size, this could be larger or smaller than default font size */
	font-size: 16px;
/* make sure we keep the font normal */
	font-weight: bold;
/* set default link colors */
	color: #404040;
/* pushes out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
	padding: 7px 13px 13px;
	display: block;
/* sets no underline on links */
	text-decoration: none;
}
ul#primary-nav li a:hover {
/* kind of obvious */
color: #000;

}
ul#primary-nav li li a:hover {
/* this is set to #000, black, below so hover will be white text */
color: #000;
}
ul#primary-nav li a.menuactive {
font-size: 16px;

	color: #000;
/* bold to set it off from non active */
	font-weight: bold;
/* set your image here */

}
ul#primary-nav li a.menuactive:hover {
	color: #000;
/* keep it the same */

}
#primary-nav li li a.menuparent span {
/* makes it hold a shape */
	display: block;
	font-size: 16px;
	font-weight: bold;
color: #404040;
/* set your image here, right arrow, 98% over from the left, 100% or 'right' puts it to far */

}
/* gif for IE6, as it can't handle transparent png */
* html #primary-nav li li a.menuparent span {
/* set your image here, right arrow, 98% over from the left, 100% or 'right' puts it to far */

}
ul#primary-nav li ul a {
/* insures alignment */
	text-align: left;
	margin: 0px;
/* keeps it relative to it's container */
	position: relative;
/* less padding than first level no need for large links here */
	padding: 2px 3px 2px 15px;
/* if first level is set to bold this will reset this level */
	font-weight: normal;
/* first level is #FFF/white, we need black to contrast with light background */
	color: #FFF;
font-size: 12px;
	border-top: 0 none;
	border-right: 0 none;
	border-left: 0 none;
	border-bottom: 1px solid #ffffff;
	width: 152px;


}
ul#primary-nav li ul {
/* very lite grey color, by now you should know what the rest mean */
	background-color: #ba9674;
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 170px;
	height: auto;
	display: none;
	position: absolute;
	z-index: 999;
	border-top: 0px solid #FFFFFF;
	border-bottom: 0px solid #ffffff;
/*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)*/
	opacity: 0.95;
/* CSS 3 */
}
ul#primary-nav li ul ul {
/*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)*/
	opacity: 95;
/* CSS 3 */
	background-color: #9d9ca1;
	width: 320px;

margin-top: 1px;
}

ul#primary-nav li ul ul a {
/* insures alignment */
	text-align: left;
	margin: 0px;
/* keeps it relative to it's container */
	position: relative;
/* less padding than first level no need for large links here */
	padding: 2px 3px 2px 15px;
/* if first level is set to bold this will reset this level */
	font-weight: normal;
/* first level is #FFF/white, we need black to contrast with light background */
	color: #FFF;
font-size: 12px;
	border-top: 0 none;
	border-right: 0 none;
	border-left: 0 none;
	border-bottom: 1px solid #ffffff;
	width: 300px;


}



/* Styling the appearance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
/* set your image here, dark grey image */

	color: #000;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
	display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
	display: block;
}
/* IE6 Hacks */
#primary-nav li li {
	float: left;
	clear: both;
}
#primary-nav li li a {
	height: 1%;
}
#sidebar a {
	font-size: 16px;
/* make sure we keep the font normal */
	font-weight: bold;
/* set default link colors */
	color: #404040;
/* pushes out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
	padding: 5px 10px 10px 15px;
	display: block;
/* sets no underline on links */
	text-decoration: none;
}




/* ------------------------------------- */
/* ----- Mobile Navigation Styles ------ */
/* ------------------------------------- */

#hamburgerContainer {position:fixed; cursor:pointer; top:40px; right:0; z-index:350; width:30px; height:30px; background-color: #ffffff; padding:3px 6px 6px; margin-right:5%; display: none; }
#hamburgerContainer .hamburgerItem { position:absolute; width:30px; height:5px; background-color: #9b5f43; top:17px; transition: all 0.2s ease 0s; border-radius:3px;}
#hamburgerContainer .hamburgerItem:before { position:absolute; width:30px; height:5px; background-color: #9b5f43; content:''; top:-10px; transition: all 0.2s ease 0s; border-radius:3px;}
#hamburgerContainer .hamburgerItem:after { position:absolute; width:30px; height:5px; background-color: #9b5f43; content:''; top:10px; transition: all 0.2s ease 0s; border-radius:3px;}
#hamburgerContainer:hover .hamburgerItem , #hamburgerContainer:hover .hamburgerItem:after, #hamburgerContainer:hover .hamburgerItem:before {  }
#hamburgerContainer.active { }
#hamburgerContainer.active .hamburgerItem, #hamburgerContainer.active  .hamburgerItem:before, #hamburgerContainer.active  .hamburgerItem:after {  }
/*#hamburgerContainer.active:hover .hamburgerItem, #hamburgerContainer.active:hover  .hamburgerItem:before, #hamburgerContainer.active:hover  .hamburgerItem:after { background: #38bccc;}*/
.popupMenuContainer.active { left:0}

.popupMenuContainer { background-color: #9b5f43 ; display: block; position:fixed; top: 0; width: 100%; padding: 25px 0; left:-100vw; bottom:0; overflow:auto; transition: all 0.2s ease-in-out 0s; z-index:325;}
.popupMenuContainer div#menuwrapper { background: none; }
.popupMenuContainer .wrapper { width: 90%;}
.popupMenuContainer nav#menu { width: 100%; background: none; display:block; float: none; margin-bottom: 75px; text-align:left}
.popupMenuContainer nav#menu img { width: 100%; max-width: 180px; margin-top: 15px; }
.popupMenuContainer nav#menu ul { float: none; text-align: left; display:block;}
.popupMenuContainer nav#menu ul#primary-nav { padding-left: 0; }
.popupMenuContainer nav#menu ul div.menuimg { display:none;}
.popupMenuContainer nav#menu ul li { display: block; margin: 0px; border-bottom: 1px solid #ffffff; padding: 0 0 2px; text-align: left; width:100%; max-width:initial;}
.popupMenuContainer nav#menu ul li.menuparent { padding-bottom: 10px; }
.popupMenuContainer nav#menu ul li a.menuparent { padding-bottom: 5px; }
.popupMenuContainer nav ul li + li::after {display:none;}
.popupMenuContainer nav#menu ul li ul {top:0; left:0; display:block; background:none; margin:0px 0 10px 5px; max-height:100%; border-top:0; border-left:0px solid ; position:relative; visibility:visible; padding: 0 !important; border-radius:0; width:90%; transition: border 0.25s ease-in-out 0s;}
.popupMenuContainer nav#menu ul li:hover ul { }
.popupMenuContainer nav#menu ul li ul li { padding:0; margin:0px; border:0;}
.popupMenuContainer nav#menu ul li ul li a { font-size:1rem; border: 0;  }
.popupMenuContainer nav#menu ul li a { color:#fff; display: block; font-weight:bold; text-decoration:none; padding: 15px 5px; height:auto; font-size: 18px; line-height: 26px;  }
.popupMenuContainer nav#menu ul li ul li a { padding: 10px 5px 10px 15px; }
.popupMenuContainer nav#menu ul li a:hover {}
.popupMenuContainer nav#menu ul li:last-child {margin:0 0 0; border:0; padding:0}
.popupMenuContainer nav#menu ul li ul li ul {margin:0px 0 10px 20px; border-left: 0px solid #00589b;}
.popupMenuContainer nav#menu ul li ul li ul li a { border-left: 5px solid #084787;}
/* cmsms stylesheet: boxworks - enlarge images modified: 12/14/20 09:48:11 */
ul.enlarge{
 list-style-type:none; /*remove the bullet point*/
 margin-left:0;
 }
 ul.enlarge li{
 display:inline-block; /*places the images in a line*/
 position: relative;
 z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
 margin:10px 40px 0 20px;
 }
 ul.enlarge img{
 background-color:#ffffff;
 padding: 0px;
 -webkit-box-shadow: 0 0 0px rgba(132, 132, 132, .75);
 -moz-box-shadow: 0 0 0px rgba(132, 132, 132, .75);
 box-shadow: 0 0 0px rgba(132, 132, 132, .75);
 -webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
border-radius: 0px; 
}
 ul.enlarge span{
 position:absolute;
 left: -9999px;
 background-color:#eae9d4;
 padding: 10px;
 font-family: 'Droid Sans', sans-serif;
 font-size:.9em;
 text-align: center; 
color: #495a62; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
 -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
 box-shadow: 0 0 20px rgba(0,0,0, .75);
 -webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
 }
 ul.enlarge li:hover{
 z-index: 50;
 cursor:pointer;
 }
 ul.enlarge span img{
 padding:2px;
 background:#ccc;
 }
 ul.enlarge li:hover span{ 
top: -225px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
 left: -120px; /*distance from the left of the thumbnail to the left of the popup image*/
 }
 ul.enlarge li:hover:nth-child(2) span{
 left: -100px; 
}
 ul.enlarge li:hover:nth-child(3) span{
 left: -200px; 
}
 /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
 ul.enlarge img, ul.enlarge span{
 behavior: url(pie/PIE.htc); 
}
/* cmsms stylesheet: boxworks - media styles NEW modified: 07/20/26 10:03:54 */
/* ------------------------------------- */
/* ----------- Media Queries ----------- */
/* ------------------------------------- */


@media(max-width:1300px){



} /* -- /max-width:1300px -- */



@media(max-width:1200px){


} /* -- /max-width:1200px -- */



@media(max-width:1100px){



} /* -- /max-width:1100px -- */


@media(max-width:950px){

div#main { width: 68%; }
body.rc-pages div#main { width: 100%; }
div#main table { width: 100%; 
    -webkit-transform: scale(0.99);
    -webkit-transform-origin: 0 50%;
    transform: scale(0.99);
    transform-origin: 0 50%;
}
div#newfooter .wrapper { width: 95%; }

} /* -- /max-width:950px -- */



@media(max-width:900px){


  div#menuwrapper { display:none; }
  #hamburgerContainer, .popupMenuContainer { display: block; }
  .popupMenuContainer div#menuwrapper { display:block; }

#logo-tel-row .logo-block { width: 40%; }
#logo-tel-row .callus-block { width: 35%; }
#logo-tel-row .callus-block p.telno { line-height: 40px; }

.headerimg { background-image: url(/uploads/images/header-pic-mobile.jpg);
background-size: 100% 100%; height: 340px;}
.headerimg h1 { font-size: 30px; width: 490px; }
.headerimg h5 { font-size: 20px; }
.headerimg td { display: block; width: 100%; }
.headerimg td:last-of-type { display: none; }
.headerimg .main-section { width: 99%; }
.headerimg .convincers-section { display: none; }
#mobile-convincers { display: block; }


} /* -- /max-width:900px -- */


@media(max-width:850px){

div#main { width: 65%; }


} /* -- /max-width:850px -- */



@media(max-width:767px){

#hamburgerContainer { top:34px; }
#logo-tel-row .logo-block { display: block; width: 80%; margin: 0 auto 10px; }
#logo-tel-row .callus-block { display: block; width: 80%; margin: auto; }
#logo-tel-row .callus-block p { line-height: 18px; }
#logo-tel-row .callus-block p.telno { font-size: 26px; line-height: 26px; }
.headerimg { height: 290px; }
.headerimg h1 { margin-top: 160px; }
#mobile-convincers { padding: 5px 0px; }
#mobile-convincers div { display: block; width: 80%; padding: 5px 0 10px; margin: auto; }
#mobile-convincers div:first-of-type { border-right: 0; border-bottom: 1px solid #ffffff; }
div#sidebar { display: none; }
div#sidebar.mobile { display: block; }
div#main { display: block; width: 95%; margin: auto; }
div#newfooter .wrapper { width: 95%; }
div#newfooter table { width: 100%; }
div#newfooter table td { display: inline-block; width: 49%; }
div#main .table-scale table td:first-of-type ul.enlarge li:hover span { left: 0; width: 250px; }

} /* -- /max-width:767px -- */



@media(max-width:700px){

div#newfooter td.footertext { display: block; width: 95%; margin: 0 auto 10px; text-align: center;  }



} /* -- /max-width:700px -- */



@media(max-width:600px){

.headerimg { height: 225px; }
.headerimg h1 { font-size: 30px; width: 400px; margin-top: 100px; }
.headerimg h5 { font-size: 20px; width: 370px; }

div#product-name { font-size: 12px !important; }
div#main .table-scale table.sbs td { display: block; width: 90%; margin: 0 auto 20px; text-align: center; }
div#main .table-scale table td table { display: table; border-collapse: collapse; }
div#main .table-scale table td table td { border: 1px solid #d9cca0; padding: 5px 0px; }
.packstable { font-size: 12px !important; }
div#main-temp { margin-top: 30px; margin-bottom: 80px; }
div#main-temp div.temp-message { margin: 50px auto; }

} /* -- /max-width:600px -- */


@media(max-width:480px){

#hamburgerContainer { top:20px; }
#logo-tel-row { padding: 10px 0px; }
#logo-tel-row .logo-block { display: block; width: 60%; margin: 0 auto 5px; }
#logo-tel-row .logo-block p  { font-size: 16px; line-height: 18px; }
#logo-tel-row .callus-block { display: block; width: 60%; margin: auto; }
#logo-tel-row .callus-block p { font-size: 12px; line-height: 16px; }
#logo-tel-row .callus-block p.telno { font-size: 22px; line-height: 20px; }
.headerimg { height: 185px; }
.headerimg h1 { font-size: 20px; width: 320px; margin-top: 85px; }
.headerimg h5 { font-size: 13px; width: 290px; }
#mobile-convincers div { width: 90%; }
#mobile-convincers div p.convincer-title { font-size: 20px; line-height: 24px; }
#mobile-convincers div p  { font-size: 14px; line-height: 16px; }
div#content h2 { font-size: 20px; }
body.rc-pages div#content h2,
body.rc-pages div#content h2 strong { font-size: 11px !important; }
body.rc-pages div#main .table-scale table td { width: 55.5% !important; }
body.rc-pages div#main .table-scale table td:first-of-type,
body.rc-pages div#main .table-scale table td:last-of-type { background: none !important; padding: 0 !important; width: 22.5% !important; }
body.rc-pages div#content h1 { font-size: 16px !important; }
body.rc-pages div#content table td p { font-size: 12px !important; }
ul.enlarge span { font-size: 10px; line-height: 14px; }
div#main .table-scale table td { height: auto; }
body.moving-packs div#main .table-scale table tr img { margin: 0px 0 10px; }
body.moving-packs div#main .table-scale table tr:first-of-type ul.enlarge img { margin: 25px 0 10px; }
body.moving-packs div#main .table-scale table tr ul.enlarge span img { margin: 0px; }
body.moving-packs div#main .table-scale table tr:first-of-type ul.enlarge span img { margin: 0px; }

} /* -- /max-width:480px -- */



@media(max-width:380px){

body.moving-packs div#main .table-scale table tr:first-of-type ul.enlarge img { margin-top: 15px; }

} /* -- /max-width:320px -- */