@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,700,700i);

/* OVERRIDES */
body{width:100%; padding:0px; margin:0px auto; float:none; font-family: 'Montserrat', sans-serif; font-size: 14px; overflow-x: hidden;}
.container_12 {width: 100%!important; margin: 0px auto;}
.section, .footer, .fullWidthHeaderZone, .fullWidthFooterZone {margin: 0px auto; width: 85%; max-width: 1200px;}
.container_12 .grid_12 {width: 100%!important;}
.container_12 .grid_9 {width: 75%!important;}
.container_12 .grid_4 {width: 30%!important; margin-right: 2%;}
.container_12 .grid_8 {width: 66%!important;}
.container_12 .grid_3 {width: 23%!important; margin-right: 2%;}
.container_12 .grid_9.headerZone3 {width: 60%!important; padding-right: 100px; box-sizing: border-box;}
.container_12 .grid_3.headerZone2 {width: 38%!important; padding-left: 100px; box-sizing: border-box;}
.container_12 .grid_6 {width: 50%!important; box-sizing: border-box;}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {margin: 0px}
a, a:link, a:visited {color: #999999;}
a:hover, a:active, a:focus, a.selected {color: #000; text-decoration: none;}
h1, h2, h3, .attributesContainer h1 {color: #3a68ff;}
.Content {margin-top: 20px;}
.Home .Content {margin-top: 0px;}

/* HEADER */
.Logo .logo {height: 100px!important;}
.Logo .logo img {height: auto!important; width: auto!important; max-height: 100px;}
.menu {background: transparent; margin-bottom: 0px; line-height:inherit; height: auto!important;}
.menu ul {margin-bottom: 0px;}
.header {width: 100%; margin: 0px auto; box-shadow: 1px 1px 20px #999; position: relative; height: 165px; background-color: #fff;}
.Home .header {box-shadow: 1px 1px 20px #333;}
.header .address h3, .header .phone, .header .email, .header .fax {display: none;}
.grid_12.headerZone1 {width: 100%; float: left; background-color: #000000; padding: 5px 100px; box-sizing:border-box; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;}
.header .Address {width: 80%; float: left;}
.menu>ul li {padding: 0px 5px; color: #fff;}
.menu>ul li a {color: #fff;}
.menu>ul li a:hover {text-decoration: none; color: #b70000;}
.header .socialLinks {width: auto; float: left;}
.header .socialLinks h3 {display: none;}
.header .address {width: 60%; float: left; margin-left: 3%;}
.social-icon {background: none; margin: -3px 0px 0px 0px;}
.social-icon a {color: #fff; font-size: 18px;}
.FCBK:before { content:'\f09a'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.PINT:before { content:'\f231'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.TWTR:before { content:'\f099'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.LNKD:before { content:'\f0e1'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.BLOG:before { content:'\f09e'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.FLKR:before { content:'\f16d'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.GGLP:before { content:'\f0d5'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.YTBE:before { content:'\f167'; font-family:FontAwesome; color: #fff; font-size: 14px;}
.INST:before { content:'\f16d'; font-family:FontAwesome; color: #fff; font-size: 14px;}

/* SEARCH BAR */
.header .quickSearch {width: 60%; margin-top: 30px; display: block; float: right; margin-left: 5%;}
.header .QuickSearchBasic h2, .header .QuickSearchBasic label, .price-separator {display: none;}
.header input[type="text"], .header input[type="password"], .header input[type="search"], .header select {border: none; color: #999; font-family: 'Montserrat', sans-serif; font-size: 12px; text-transform: capitalize; width: 90%; padding-left: 5%;}
.header .quickSearch {border: none; box-shadow: 1px 1px 10px #e2e2e2;}
.header .price-to input, .header .price-from input {font-size: 10px; width: 40%;}
.header .search-keyword {width: 45%; float: left;}
.header .price {width: 40%; float: left;}
.header .buttons a.btn {float: right; border: none; background-color: #b70000; color: #fff; width: 24px; height: 20px; padding: 5px; font-size: 0px;}
.header .addressline {float: left;}
.header .ownerNameTitle {float: left; margin-right: 10px;}
.header .buttons a.btn:hover {background-color: #000; transition-duration: .5s;}
.header .buttons a.btn:before {font-family: FontAwesome; content: "\f002"; color: #fff; font-size: 16px;}

/* SHOPPING CART */
.header .btn-checkout {display: none;}
.header .ShoppingCart {margin-top: 29px; background-color: #3a68ff; float: right; margin-left: 10px;}
.header .ShoppingCart button {background-color: #3a68ff; padding: 4px 15px!important; font-size: 14px; color: #fff;}
.header .ShoppingCart button:hover {background-color: #000; transition-duration: .5s;}
.header .ShoppingCart button:before {font-family: FontAwesome; padding-right:5px; content: "\f07a"; color: #fff;}

/* NAVIGATION */
.headerZone3 .Menu {float: right; display: block; margin-top: 30px;}
.headerZone3 .menu a {font-weight: 500; color: #000; border-bottom: 5px solid #fff; padding: 10px 15px; font-size: 16px;}
.headerZone3 .menu a:hover {text-decoration: none; border-bottom: 5px solid #b70000; transition-duration: .5s;}
.headerZone3 .menu>ul li {padding: 0px!important;}
.headerZone3 .menu ul.dropdown {top: 37px; border: none; left: 0px; box-shadow: 1px 1px 10px #999;}
.headerZone3 .menu ul.dropdown ul {left: 100%; top: 0px;}
.headerZone3 .menu ul.dropdown li {padding: 3px 0px!important; border-bottom: 1px solid #e2e2e2;}
.headerZone3 .menu ul.dropdown li:hover {background-color: #e2e2e2;}
.headerZone3 .menu ul.dropdown a {border: none!important; font-size: 14px;}
.headerZone3 .menu ul.dropdown a:hover {border: none; color: #000;}

/* BANNER */
.Home .headerZone4 .Content:nth-of-type(1) {width: 100%; background: url('//cdn.asicentral.com/esp-websites/designstore/sublime/banner.jpg') no-repeat center center; background-size: cover; height: 500px; margin-top: -5px; margin-bottom: 40px; z-index: -1; position: relative;}
.Home .headerZone4 .Content:nth-of-type(1) img {width: 100%; height: auto; display: none;}
.Home .headerZone4 .Content:nth-of-type(2) {position: absolute; background-color: #3a68ff; opacity: 0.85; width: 30%; height: 350px; left: 100px; top: 165px; padding: 74px 2%;}
.Home .headerZone4 .Content:nth-of-type(2) p {font-size: 45px; line-height: 60px; text-align: center; color: #fff; font-weight: 500; opacity: 1.0;}
.Home .headerZone4 .Content:nth-of-type(2) p:after {width: 100px; height: 3px; content: ''; background-color: #b70000; margin: 20px auto; display: block;}

/* INTRO TEXT */
.Content h1 {font-size: 32px; color: #000; font-weight: 500; text-align: center;}
.Content h1:after {width: 100px; height: 3px; content: ''; background-color: #b70000; margin: 10px auto; display: block;}
.Home .grid_12.mainZone1 {text-align: center;}
.Home .grid_12.mainZone1 p {padding: 0px 12%; font-size: 16px; font-weight: 500;}
.button, a.btn, .btn {background-color: #b70000; color: #fff; border: none; text-transform: uppercase;}
 button.ui-state-default:hover, .ui-state-default.button:hover, a.btn:hover, .btn:hover {background-color: #000;}
.introContent h3 {font-size: 32px; color: #000; font-weight: 500; text-align: center;}
.introContent h3:after { width: 100px; height: 3px; content: ''; background-color: #b70000; margin: 10px auto;  display: block; }


/* SERVICES LIST */
.services .menuWrap:before {content: 'Our Services'; font-size: 32px; color: #fff; font-weight: 500; margin-bottom: 40px; display: block;}
.services .menuWrap {width: 110%; padding: 5%; background: url('//cdn.asicentral.com/esp-websites/designstore/sublime/services.png') #3a68ff center center fixed; text-align: center; background-size: cover; float: none!important; text-align: center; margin: 40px 0px; margin-left: -10%;}
.services .menuWrap li {border: 3px solid #fff; border-radius: 50%; width: 100px; height: 100px; margin: 0px 2%; display: inline-table; float: none!important; padding: 40px 20px 0px 20px!important;}
.services .menuWrap li a {color: #fff; font-size: 20px; line-height: 26px; font-weight: 500;}
.services .menuWrap li a:hover {text-decoration: none!important; color: #fff;}
.services .menuWrap li:hover {background-color: #b70000; transition-duration: .5s; border: 3px solid #b70000;}

/* POD */
.ProductOfTheDay {width: 86%!important; padding: 5%!important; border: 2px solid #e2e2e2; margin: 2%!important; height: 340px; overflow: hidden;}
.ProductOfTheDay h2 {color: #000; font-size: 28px; font-weight: 500;}
.ProductOfTheDay h2:after {width: 100px; height: 3px; background-color: #3a68ff; content: ''; display: block; margin-top: 10px;}
.ProductOfTheDay .prodImg {float: right; width: 30%; margin-left: 20px; margin-bottom: 20px;}
.ProductOfTheDay a#btnProductDetail {font-size: 16px;}
.ProductOfTheDay p {font-size: 11px; line-height: 14px; margin-top: 10px;}
.ProductOfTheDay .prodLink {font-weight: 600; font-size: 16px;}

/* NEWSLETTER */
.newsletter {width: 86%; padding: 5%; background-color: #999999; border: 2px solid #999999; margin: 2%; height: 340px; overflow: hidden;}
.newsletter h3 {color: #fff; font-size: 28px; font-weight: 500;}
.newsletter h3:after {width: 100px; height: 3px; background-color: #3a68ff; content: ''; display: block; margin-top: 10px;}
.newsletter .txt {color: #fff; margin-bottom: 0px; display: block; font-weight: 500;}
.newsletter input[type="text"], .newsletter input[type="password"], .newsletter input[type="search"], .newsletter select {padding: 2%; width: 96%!important; border: none; margin-bottom: 20px;}
.newsletter a.btn {background-color: #b70000; color: #fff; text-transform: uppercase; border: none; font-size: 16px; font-weight: 500; padding: 10px 30px;}
.newsletter a.btn:hover {background-color: #000; transition-duration: .5s; text-decoration: none!important;}

/* PRODUCT COLLECTIONS */
.ProductSetAutoUpdate {margin: 40px 0px;}
.ProductSetAutoUpdate .prodSet:before {content: 'Recommended Products'; color: #000; font-size: 32px; font-weight: 500; text-align: center; display: block;}
.ProductSetAutoUpdate h2 {font-size: 0px;}
.ProductSetAutoUpdate h2:before {content: ''; width: 100px; height: 3px; background-color: #b70000; font-size: 0px; display: block; margin: 10px auto;}
.prodSet li .prodImg {margin: 0px!important;}
.prodSet li img {height: 150px!important; width: 150px!important; border: 3px solid #e2e2e2!important; border-radius: 50%; max-width: 150px!important}
.prodSet li .prodName {background: transparent!important;}
.prodName .ellipsis {color: #222; text-shadow: none; margin-top: 40px; font-size: 14px; font-weight: 500;}
.allLinks {text-align: center; float: left; width: 100%; margin-top: 20px; font-weight: 600;}
.fg-toolbar.ui-widget-header {border-top: none; background: none;}
.borderRight {padding-right: 10px;}

/* PRODUCT RESULTS */
.prodTile {height: auto!important;}
.search-within {position: absolute; top: 30px; right: 270px; font-size: 12px; text-transform: uppercase; color: #999;}
.configOptions {width: 23%!important; float: right; display: none;}
.ProductDetailsBasic, .modProductResultsBasic {margin-top: 20px;}

/* PRODUCT DETAILS */
.YouMayAlsoLike._33 {width: 96%; margin-top: 20px; float: left;}
.prod-det ._50:nth-of-type(1) {width: 22%!important; margin-right: 2%;}
.prod-det ._50:nth-of-type(2) {width: 72%!important;}

/* FOOTER */
footer {background-color: #e2e2e2; -moz-box-shadow: inset 1px 1px 20px #999; margin-top: 30px; padding: 40px 0px 80px 0px;}
.footerWrap span.h3 {text-transform: uppercase; font-weight: 600; color: #666; font-size: 16px;}
.footerWrap .menu>ul {}
.footerWrap .menu>ul li {width: 100%; padding: 0px; line-height: 24px;}
.footerWrap .menu>ul li ul {display: none!important;}
.footerWrap .menu>ul li a {color: #666;}
.footerWrap .menu>ul li a:hover {color: #000;}
.footerWrap .Address h3 {display: none;}
.FooterZone4 {text-align: right; line-height: 24px; float: right;}
.footer .addressline span { display:block; }
.fullWidthFooterZone {width: 100%; text-align: center; background-color: #3a68ff; max-width: 100%; padding: 10px 0px; color: #fff;}
.fullWidthFooterZone a {color: #fff; font-weight: 600;}

@media screen and (min-width: 481px) and (max-width: 1024px) {
.header .Address {width: 60%;}
.container_12 .grid_5 {width: 25%!important;}
.services .menuWrap li {width: 90px; height: 90px; margin: 0px 1%;}
.services .menuWrap li a {font-size: 16px;}
.prodSet li img {width: 100px!important; height: 100px!important;}
}

@media screen and (max-width: 480px) {
.ProductOfTheDay {height: auto!important;}
.header .address {width: 100%; margin: 0px; display: none!important;}
.Address, .header .Address {color: #222;}
.Logo .logo {margin-top: 20px;}
body > nav.mobile-menu, nav.mobile-menu {position: absolute; top: 0px; background-color: #3a68ff;} 
.header {height: auto; box-shadow: none!important;}
.header .ShoppingCart {width: 45%!important;}
.QuickSearchBasic {width: 50%!important;}
.Home .headerZone4 .Content:nth-of-type(1) {height: 200px; background-position: top center; z-index: 1;}
.container_12 .grid_4, .container_12 .grid_6, .container_12 .grid_3, .container_12 .grid_3.headerZone2 {width: 98%!important; margin: 0px; padding: 0px;}
.container_12 .grid_8, .container_12 .grid_12 {width: 100%!important; padding: 0px 5%;}
.Home .container_12 .grid_12 {padding: 0px;}
.container_12 .grid_9 {width: 100%!important;}
footer {padding-bottom: 40px;}
.FooterZone4 {text-align: center;}
.footer .asiModule {margin-bottom: 10px;}
.services nav a:nth-of-type(1) {display: none;}
.services nav li a {display: block!important;}
.services .menuWrap li {margin-bottom: 20px;}
.Home .headerZone4 .Content:nth-of-type(1) {margin-bottom: 0px;}
.Home .headerZone4 .Content:nth-of-type(2) {position: relative; float: left; padding: 20px 0px; top: 0px; left: 0px; height: auto; margin-bottom: 20px;}
.Home .headerZone4 .Content:nth-of-type(2) p {font-size: 25px; line-height: 35px;}
.container_12 .grid_9.headerZone3 {width: 90%!important; padding: 0px; margin: 0px auto;}
.header .ShoppingCart, .header .buttons a.btn {margin-top: 0px;}
.NewsletterSignup .formLayout.inline input, .NewsletterSignup .formLayout.inline .btn {width: auto!important; height: auto!important;}
}

