@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
img, object, embed, video {
	max-width:100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/* ------------------------- RESPONSIVE VIDEO/IFRAME ---------------------------- */
.video-container {position:relative; padding-bottom:56.25%; padding-top:10px; height:0; overflow:hidden}
.video-container iframe,
.video-container object,
.video-container embed {position:absolute; top:0; left:0; width:100%; height:100%}

/* ------------------------- COMMON ---------------------------- */
html {overflow-y: scroll; font:1em 'Montserrat', sans-serif; line-height:1.5em; color:#666; font-weight:400}
body {width:100%; height:auto; float:left; margin:0; padding:0; background-color:#d4d4d4}
img {border:0px}
.intro ul {list-style-type:none; position:relative; margin-left:1em; padding-left:0}
.intro li:before {content: "\2022"; position:absolute; font-size:1.5em; left:-1em; color:red; margin-right:5px}
.intro li {margin:0; padding:.5em}
.center {text-align:center}
.spacer {width:100%; height:40px; margin:0 auto}
.spacer1 {width:100%; height:20px; margin:0 auto}
.hline {width:80%; height:auto; border-bottom:3px solid #ccc; margin:2% 10%}
.fleft {width:100%; height:auto; float:left; text-align:left}
.txtright {text-align:right}
.wrapper {width:100%; height:auto; float:left}
.caption {font-size:.75em; text-align:center}
.indent {margin:0 0 0 30px}
.link {color:#06C}
.icon {vertical-align:middle; line-height:1.5em; padding:0 1% 0 0}
.msg {text-align:center}
.red {color:#f00}

/* ------------------------- CONTENT ---------------------------- */
nav {width:100%; height:auto; float:left; background-color:#e12726; color:#fff}
nav a {color:#fff; text-decoration:none}
h1 {font:2.5em 'Roboto Condensed', sans-serif; color:#000; line-height:1.25em; margin-bottom:.25em; font-weight:700; letter-spacing:-1px}
h1 span {border-bottom:10px solid #E8E8E8; padding-bottom:9px; display:inline-block}
h2 {font:1.5em 'Roboto Condensed', sans-serif; color:#000; line-height:1.25em; font-weight:700; text-align:center}
h3 {font:1.75em 'Roboto Condensed', sans-serif; color:#000; line-height:1.25em; margin-bottom:.25em; font-weight:700; letter-spacing:-1px}
footer {width:100%; height:auto; float:left; margin:0 auto; padding:3% 0; text-align:center; font-size:.75em}
aside {width:20%; height:auto; padding:0 0 0 2%; float:right; margin:0; min-width:240px; text-align:left; border-left:1px solid #ccc}

.page {width:100%; height:auto; float:left; box-sizing:border-box; background-color:#fff; padding:0 0 5% 0}
.logo {text-align:center; padding:2% 0}
.navlink {width:96%; height:auto; padding:1% 2%; max-width:1280px; margin:0 auto}
.navlink span {display:inline-block; padding:0 1.5%}
.welcome {width:96%; height:auto; padding:1% 2%; max-width:1280px; margin:0 auto; text-align:center}
.content {width:70%; height:auto; padding:1% 15%; float:left}
.videowrapper {width:50%; height:auto; margin:0 auto; min-width:240px}
.halfcolumn {width:46%; height:auto; padding:1% 2%; float:left}
.content-right {width:73%; height:auto; padding:0; float:right; margin:0 2%}
.content-left {width:73%; height:auto; padding:0; float:left; margin:0 2%}
.leftnav {width:18%; height:auto; padding:1%; float:left; margin:1% 0 0 2%; min-width:240px}
.breadcrumb {font-size:.75em; width:90%; height:auto; padding:.5% 5% 0 5%; float:left}
.breadcrumb a {text-decoration:none; color:#666}
.productwrapper {width:100%; height:auto; float:left; }
.productwrapper1 {width:100%; height:auto; float:left; min-height:495px}
.productcol {width:90%; height:auto; float:left; padding:1% 2%; } /*border:2px solid gray;-webkit-border-radius:13px;-moz-border-radius:13px;-ms-border-radius:13px;-o-border-radius:13px;border-radius:13px; */
.productcode {font-size:1.125em; font-weight:700}
.productcode1 {font-size:.75em; font-weight:700}
.productdescription {font-size:1.125em; font-weight:600; color:#fff;}
.productname a {font-size:.75em; color:#333; line-height:1.5em; float:left; width:100%; margin:1% 0 2% 0}
.productimg {width:46%; height:auto; float:left; padding:1% 2%}
.productdet {width:40%; height:auto; float:left; padding:1% 10% 1% 0}
.tablewrapper {width:100%; height:auto; float:left; padding:1% 0}
.tableline {width:100%; height:auto; float:left; border-bottom:4px solid #000; padding:1% 0}
.tablecol5 {width:5%; height:auto; float:left}
.tablecol10 {width:8%; height:auto; float:left; padding:0 1%}
.tablecol15 {width:13%; height:auto; float:left; padding:0 1%}
.tablecol50 {width:48%; height:auto; float:left; padding:0 1%; margin:-4px 0 0 0}
.tablecollast {width:10%; height:auto; float:right; text-align:center}
.tablecol40 {width:38%; height:auto; float:left; padding:1%}
.instructions {width:80%; height:auto; padding:1% 3%; border:1px solid #999; font:.75em Arial, Helvetica, sans-serif; line-height:1.25em; color:#666; background-color:#ffc}
.fundid {font:5em 'Roboto Condensed', sans-serif; color:#f00; line-height:1.25em; margin-bottom:.25em; font-weight:700; letter-spacing:-1px}
.tableliner {width:80%; height:auto; float:left; border-bottom:4px solid #f00; border-top:4px solid #f00; padding:1% 0; margin:2% 10%}
.trio {width:31%; float:left; padding:2% 0; }
.spinner {width:100%; height:auto; float:left; text-align:center; padding:1% 0}
/* ------------------------- ICONS ---------------------------- */
.step-list {padding:1.5% 0}
.step-off {display:inline-block; height:30px; width:30px; line-height:30px; -moz-border-radius:50%; border-radius:50%; background-color:fff; color:#000; text-align:center; font-size:1.5em; border:2px solid #ccc; margin:0 2% 0 0}
.step-on {display:inline-block; height:30px; width:30px; line-height:30px; -moz-border-radius:50%; border-radius:50%; background-color:#000; color:#fff; text-align:center; font-size:1.5em; margin:0 2% 0 0}
.step-big {display:inline-block; height:60px; width:60px; line-height:60px; -moz-border-radius:50%; border-radius:50%; background-color:#000; color:#fff; text-align:center; font-size:1.5em; margin:0 2% 0 0}
.delete {display:inline-block; height:30px; width:30px; line-height:30px; -moz-border-radius:50%; border-radius:50%; background-color:#F00; color:#fff; text-align:center; font-size:1.5em; margin:0 2% 0 0}
.delete a {color:#fff; text-decoration:none}
.add {display:inline-block; height:30px; width:30px; line-height:30px; -moz-border-radius:50%; border-radius:50%; background-color:#393; color:#fff; text-align:center; font-size:1.5em; margin:0 2% 0 0}
.add a {color:#fff; text-decoration:none}
.reload {font-family: Lucida Sans Unicode}
.newline a {display:block; background-color:#390; color:#fff; text-decoration:none; padding:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; font-size:.8em; font-weight:bold; line-height:1.5em}
.notallowed {min-height:450px}

/* ------------------------- FORM ---------------------------- */
input[type="text"] {display:block; margin:1% 0 5% 0; width:100%; font-family:sans-serif; font-size:1em; border:1px solid #999; padding:10px; box-sizing:border-box}
input[type="number"] {display:inline-block; margin:1% 0 5% 0; width:100%; font-family:sans-serif; font-size:1em; border:1px solid #999; padding:10px; box-sizing:border-box}
select {display:inline-block; margin:1% 0 5% 0; width:100%; font-family:sans-serif; font-size:1em; border:1px solid #999; padding:10px; box-sizing:border-box}
input[type="email"] {display:block; margin:1% 0 5% 0; width:100%; font-family:sans-serif; font-size:1em; border:1px solid #999; padding:10px; box-sizing:border-box}

.login {width:50%; height:auto; margin:0 auto; max-width:320px; text-align:center}
.action {width:50%; height:auto; margin:0 auto; max-width:320px; min-width:240px; text-align:center}
.details {width:50%; height:auto; margin:0 auto; text-align:center}
.steps {width:80%; height:auto; margin:0 auto; text-align:center}
.login label {float:left; text-align:left}
.button {text-align:center; text-decoration:none; color:#333; background-color:#d4d4d4; border:none; padding:4% 9% 4% 13%; border-left:10px solid #e12726; box-shadow:inset 10px 0 0 #fff; cursor:pointer; letter-spacing:2px; font-weight:bold}
.button:hover {background-color:#ccc}
.button a {text-decoration:none; color:#333}
.request {text-align:center; text-decoration:none; color:#fff; background-color:#131f48; border:none; padding:4% 9% 4% 13%; border-left:10px solid #e12726; box-shadow:inset 10px 0 0 #fff; cursor:pointer; letter-spacing:2px; font-weight:bold; margin:5% 0}
.request:hover {background-color:#003}
.request a {text-decoration:none; color:#ccc}
.qty {width:30%; height:auto; display:block; margin:0 auto; text-align:center}

.expandbutton {text-align:center; text-decoration:none; color:#333; background-color:#d4d4d4; border:none; padding:4% 9% 4% 13%; border-left:10px solid #e12726; box-shadow:inset 10px 0 0 #fff; cursor:pointer; letter-spacing:2px; font-weight:bold}
.expandbutton:hover {background-color:#ccc}
.expandbutton a {text-decoration:none; color:#333}

.menucategory {cursor:pointer;color:#f00;font-weight:bold;}
/* ------------------------- PAGE WIDTHS ---------------------------- */

@media screen and (min-width:120px) and (max-width:480px) {
.welcome {font-size:.75em}
.login {width:80%; height:auto; margin:0 auto}
.halfcolumn {width:96%; height:auto; padding:1% 2%; float:left}
.content-right {width:96%; height:auto; padding:0; float:left; margin:0 2%}
.content-left {width:96%; height:auto; padding:0; float:left; margin:0 2%}
aside {width:96%; height:auto; padding:1% 2%; float:left; border:none}
.leftnav {width:94%; height:auto; float:left; background-color:#e8e8e8; margin:2% 3%}
.productcol {width:96%; height:auto; padding:1% 2%; float:left; text-align:center}
.productimg {width:96%; height:auto; padding:1% 2%; float:left; text-align:center}
.productdet {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol5 {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol10 {width:46%; height:auto; padding:1% 2%; float:left}
.tablecol15 {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol50 {width:96%; height:auto; padding:1% 2%; float:left}
.tablecollast {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol40 {width:96%; height:auto; padding:1% 2%; float:left}
.trio {width:96%; height:auto; padding:1% 2%; float:left}
}

@media screen and (min-width:481px) and (max-width:768px) {
.halfcolumn {width:96%; height:auto; padding:1% 2%; float:left}
.content-left {width:96%; height:auto; padding:0; float:left; margin:0 2%}
.content-right {width:96%; height:auto; padding:0; float:left; margin:0 2%}
aside {width:96%; height:auto; padding:1% 2%; float:left; border:none}
.leftnav {width:94%; height:auto; float:left; background-color:#e8e8e8; margin:2% 3% 0 3%}
.productcol {width:96%; height:auto; padding:1% 2%; float:left; text-align:center}
.productimg {width:96%; height:auto; padding:1% 2%; float:left; text-align:center}
.productdet {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol5 {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol10 {width:46%; height:auto; padding:1% 2%; float:left}
.tablecol15 {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol50 {width:96%; height:auto; padding:1% 2%; float:left}
.tablecollast {width:96%; height:auto; padding:1% 2%; float:left}
.tablecol40 {width:96%; height:auto; padding:1% 2%; float:left}
.trio {width:46%; height:auto; padding:1% 2%; float:left}
}

@media screen and (min-width:769px) and (max-width:1280px) {
.leftnav {width:18%; height:auto; padding:1%; float:left; margin:1% 0 0 2%; min-width: 240px}
aside {width:18%; height:auto; padding:1%; float:right; margin:1% 0 0 2%; min-width: 240px}
.content-right {width:60%; height:auto; padding:0; float:right; margin:0 2%}
.content-left {width:60%; height:auto; padding:0; float:left; margin:0 2%}
.trio {width:31%; float:left; padding:2% 0; }
}

@media print {
img {max-width:100% !important;}
#leftnav ul {display:block}
#leftnav select {display:none}
.leftnav {visibility:visible; width:15%; height:auto; float:left}
.content-right {width:56%; height:auto; float:right}
.content-left {width:56%; height:auto; float:left}
aside {width:15%; height:auto; float:right; text-align:left; border-left:1px solid #ccc}
}

.error{color:#FA787E}
input.ng-invalid.ng-dirty { background-color: #FA787E; }
input.ng-valid.ng-dirty { background-color: #78FA89; }
span[ng-show]{ color: #FA787E; }
small[ng-show]{ color: #FA787E; }

.noproducts{color:#F00; width:100%; font-family:sans-serif; font-weight:bold; font-size:2em; align-content:center; height:auto; padding:0; text-align:center; margin:0 15% }

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }