@charset "UTF-8";
/* CSS Document */

@charset "utf-8";
/* Twigs Standard CSS - For use with Bootstrap layouts
   Before creating custom CSS classes, please check this document - what you need may already be here. */
 
body { }
#main { background-color:#fff; -webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);padding:25px;min-height:490px;}

/* SIDEBAR */
#side-1, #side-2, #side-3 { min-height: 150px; margin: 0 25px 25px 15px; padding: 5px; background: #a08b78; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35); color: #f3efec; }
#side-1 p, #side-2 p, #side-3 p { font-size: 90%; }
#side-1 h3, #side-2 h3, #side-3 h3 { font-size: 155%; line-height: 95%; margin-top: 10px; color: #f3efec; }
#side-1 a, #side-2 a, #side-3 a, #side-1 h3 a, #side-2 h3 a, #side-3 h3 a { color: inherit; }
a
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 768px) and (orientation : portrait) {
/* Styles */
#side-1, #side-2, #side-3 { margin: 0; padding: 5px; text-align: center; }
#side-1 img, #side-2 img, #side-3 img { margin: -25px auto 5px auto; }
}


/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { }
h1 small, .h1 small { line-height: .75; margin-top: 0; }
.underline { text-decoration: underline }
.shadow { text-shadow: 2px 2px 1px #000; }
a, a:focus, a.h3 { color: #d96d00; }
/* IMAGE GRID */
#image-grid { padding-bottom: 4px; margin-left:-15px;margin-right:-15px;margin-bottom:25px; }
#image-grid .image { position: relative; width: 100%; /* for IE 6 */ }
#image-grid .caption { position: absolute; top: 180px; left: 10px; width: 60%; color: #fff; text-align: left; display: block; padding: 10px; }
#image-grid h6, #image-grid p { color: #fff; margin: 0; text-shadow: 2px 2px 2px rgba(150, 150, 150, 1); }
#img-3 { padding-top: 4px; padding-bottom: 4px; padding-right: 2px; height: 225px; overflow: hidden;}
#img-4 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; height: 225px; overflow: hidden;  }
#img-5 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; height: 225px; overflow: hidden; }
#img-6 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; height: 225px; overflow: hidden; }
.caption { position: absolute; width:160px; bottom: 15px; right: 25px; display: block; padding: 0 10px; font-size:.85em; line-height:1.1em;color: #fff; }
.caption h6 {font-size:2em;color: #fff;}
#ctl00_MainContent_HomePhotoGrid31_divCap3 { background:rgba(144, 198, 69, 0.9);}
#ctl00_MainContent_HomePhotoGrid31_divCap4 { background:rgba(11, 133, 131, 0.9);}
#ctl00_MainContent_HomePhotoGrid31_divCap5 { background:rgba(217, 109, 0, 0.9);}
#ctl00_MainContent_HomePhotoGrid31_divCap6 { background:rgba(125, 102, 120, 0.9);}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
#image-grid .captionRT { position: absolute; top: 115px; right: 10px; width: 60%; color: #fff; text-align: right; }
#image-grid .captionRTwide { position: absolute; top: 10px; right: 10px; width: 90%; color: #fff; text-align: right; }
#img-3 { padding-top: 4px; padding-bottom: 4px; padding-right: 2px; height: 150px; overflow: hidden; }
#img-4 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; height: 150px; overflow: hidden;}
#img-5 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; height: 150px; overflow: hidden; }
#img-6 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; height: 150px; overflow: hidden; }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 768px) {
/* Styles */
#image-grid .captionRT { position: absolute; top: 115px; right: 10px; width: 60%; color: #fff; text-align: right; }
#image-grid .captionRTwide { position: absolute; top: 10px; right: 10px; width: 90%; color: #fff; text-align: right; }
#img-3 { padding-top: 4px; padding-bottom: 4px; padding-right: 2px; height: 150px; overflow: hidden; }
#img-4 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; height: 150px; overflow: hidden;}
#img-5 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; height: 150px; overflow: hidden; }
#img-5 { padding-top: 4px; padding-bottom: 4px; padding-left: 2px; height: 150px; overflow: hidden; }
}
/* CAROUSEL */
.carousel-indicators { display: none; }
.carousel-caption { text-align:left; width: 72%; right: 0%; left: 0px; bottom: 0px; padding: 0px 30px 10px; }
.carousel-caption h1 { color: #fff; padding: 0; margin: 0; }
#experts p { margin-top: 0; color: white; }

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
#experts h3 { font-size: 18px; margin-bottom: 5px; margin-top: 15px; }
#experts p { font-size: 12px; line-height: 90%; margin-top: 0; }
.input-sm { height: 20px; }
}
/* LAYOUT */
.margin10 { margin: 10px; }
.mtopbot10 { margin: 10px 0; }
.mlr10 { margin: 0 10px; }
.mtop10 { margin-top: 10px; }
.mbot10 { margin-bottom: 10px; }
.mleft10 { margin-left: 10px; }
.mright10 { margin-right: 10px; }
.margin20 { margin: 20px; }
.mtopbot20 { margin: 20px 0; }
.mlr20 { margin: 0 20px; }
.mtop20 { margin-top: 20px; }
.mbot20 { margin-bottom: 20px; }
.mleft20 { margin-left: 20px; }
.mright20 { margin-right: 20px; }
.auto { margin: 0 auto; }
.margin0 { margin: 0; }
.pad10 { padding: 10px; }
.padtopbot10 { padding: 10px 0; }
.padlr10 { padding: 0 10px; }
.padtop10 { padding-top: 10px; }
.padbot10 { padding-bottom: 10px; }
.padleft10 { padding-left: 10px; }
.padright10 { padding-right: 10px; }
.pad20 { padding: 20px; }
.padtopbot20 { padding: 20px 0; }
.padlr20 { padding: 0 20px; }
.padtop20 { padding-top: 20px; }
.padbot20 { padding-bottom: 20px; }
.padleft20 { padding-left: 20px; }
.padright20 { padding-right: 20px; }
.pad0 { padding: 0; }
.padleft0 { padding-left: 10px; }
input, select, textarea { margin: 2px 0; }
.content { padding: 25px; }
/* HEADER */
#header { padding-bottom: 10px; padding-top: 10px; }
#header a { }
#header a:hover { }
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header .h1, #header .h2, #header .h3, #header .h4, #header .h5, #header .h6, #header
p { }
/* FULL-WIDTH MENU */
ul.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
ul.container:before, ul.container:after { display: table; content: " "; }
ul.container:after { clear: both; }
ul.container:before, .container:after { display: table; content: " "; }
ul.container:after { clear: both; }

@media (min-width: 768px) {
ul.container { max-width: 750px; }
}
@media (max-width: 767px) {
#header { width:100%; }
 #main {padding-top:20px;}
}

@media (min-width: 992px) {
ul.container { max-width: 970px; }
}

@media (min-width: 1024px) {
ul.container { max-width: 970px; }
}
ul.container { max-width: 1170px; }
/* FOOTER */
#footer { padding: 5px 0; }
#footer a, #footer p { color:inherit;font-weight:normal;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { }

/* IMAGES */
.img-responsive:hover { opacity: .75; }
img { max-width: 100% }
.noBorder { border: none !important }
.box-shadow { box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); }
/*Image Shadow Box Effects http://cssdeck.com/labs/different-css3-box-shadows-effects*/
.box { z-index: 0; }
.border { padding: 10px; background: #f1f1f1; }
/*Effect 1*/
.effect1 { -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }
/*Effect 2*/
.effect2 { position: relative; }
.effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); }
.effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; }
/*Effect 3*/
.effect3 { position: relative; }
.effect3:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); }
/*Effect 4*/
.effect4 { position: relative; }
.effect4:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }
/*Effect 5*/
.effect5 { position: relative; }
.effect5:before, .effect5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); }
.effect5:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; }
/*Effect 6*/
.effect6 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
.effect6:before, .effect6:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); top: 50%; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; }
.effect6:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); }
/*Effect 7*/
.effect7 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
.effect7:before, .effect7:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); top: 0; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; }
.effect7:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); }
/*Effect 8*/
.effect8 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
.effect8:before, .effect8:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); top: 10px; bottom: 10px; left: 0; right: 0; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; }
.effect8:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); }
.popup img { margin: 15px 0px; padding: 5px; border: 1px solid #ccc; background-color: #fff; -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2); -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2); box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.2); }
/* Repsonsive iframe */
.flex-video { position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0; margin-bottom: 16px; overflow: hidden; }
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
.flex-video iframe, .flex-video object, .flex-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Specials Box */
#specials { background-color: #FFFF73; padding: 10px 10px 5px 10px; text-align: center; margin-bottom:15px; }
#specials h1 {padding-left:15px;padding-right:15px;}
/* The ribbon */
.ribbon-box { position: absolute; margin: -10px; width: 100px; height: 100px; overflow: hidden; z-index: 999; }
.ribbon { background-color: #FF290B; white-space: nowrap; position: absolute; left: -40px; top: 10px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: 0 0 4px #888; -moz-box-shadow: 0 0 4px #888; box-shadow: 0 0 4px #888; border: 1px solid #faa; color: #fff; display: block; font: bold 110% 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 1px 0; padding: 5px 50px; text-align: center; text-decoration: none; text-shadow: 0 0 5px #444; }
@media (max-width: 768px) {
.table-responsive { width: 100%; margin-bottom: 15px; overflow-x: scroll; overflow-y: hidden; border: 0px solid #fff; }
}

/* PRODUCT DETAILS */
ul.product-details {Margin-left: 0px; padding-left:0 !important; list-style-type:none;}
ul.product-details li {margin-bottom:5px;border-bottom:1px solid#DDD;}
ul.product-details li strong {text-transform:uppercase;font-size:75%;margin-right:10px;color:#6cb82f;}
.datatabs .col-sm-6 {padding-left:0px;}
.tab-content {margin-left:5px}
.product-details {/*margin-left:-40px !important*/}
.form-group .col-sm-12 {padding-left:0px !important}

/* Background Image */
.main-wrapper { padding-top: 25px; padding-bottom:50px; background-image: url(../images/background-images/decking.gif); background-repeat: no-repeat; background-position: center 0%; }