/* Do not change this file it lost your changes. */ /* ******************************************************************************************** Desktop, laptop - design for a width of 1280px *********************************************************************************************** */ /* 1280px <= width */ @media only screen and (min-width: 1280px) { /* Column Grid ======================================================================================= */ /* Column Grid: 2 columns */ .columngrid-adaptive.columngrid-2col .item { width:31.3333%; clear:none !important; } .columngrid-adaptive.columngrid-2col .item:nth-child(3n+1) { clear:left !important; } /* Column Grid: 3 columns */ .columngrid-adaptive.columngrid-3col .item { width:23%; clear:none !important; } .columngrid-adaptive.columngrid-3col .item:nth-child(4n+1) { clear:left !important; } /* Column Grid: 4 columns */ .columngrid-adaptive.columngrid-4col .item { width:18%; clear:none !important; } .columngrid-adaptive.columngrid-4col .item:nth-child(5n+1) { clear:left !important; } /* Column Grid: 5 columns */ .columngrid-adaptive.columngrid-5col .item { width:14.6666%; clear:none !important; } .columngrid-adaptive.columngrid-5col .item:nth-child(6n+1) { clear:left !important; } /* Column Grid: 6 columns */ .columngrid-adaptive.columngrid-6col .item { width:12.2857%; clear:none !important; } .columngrid-adaptive.columngrid-6col .item:nth-child(7n+1) { clear:left !important; } /* Column Grid: 7 columns */ .columngrid-adaptive.columngrid-7col .item { width:10.5%; clear:none !important; } .columngrid-adaptive.columngrid-7col .item:nth-child(8n+1) { clear:left !important; } /* Header ======================================================================================= */ .header .logo { max-width:350px; } /* Cart ======================================================================================= */ .cart-table .product-image { max-width:110px; } /* Misc ======================================================================================= */ /* Mini cart */ .after-mini-cart { clear:none; } } /* ******************************************************************************************** Design for a width of 960-1280 px *********************************************************************************************** */ /* 960px <= width < 1280px */ @media only screen and (min-width: 960px) and (max-width: 1279px) { /* Cart ======================================================================================= */ .cart-table .product-image { max-width:80px; } } /* ******************************************************************************************** Design for a width of 1024 px *********************************************************************************************** */ /* width < 1024px */ @media only screen and (max-width: 1041px) { /* Quick Search ======================================================================================= */ .header-container .quick-search{margin-top: 10px;height: auto;} .header-container .form-search{visibility: visible !important;opacity: 1 !important;top: 10px;border-top: none;position: initial;} .header-container .form-button{padding-bottom: 0px;position: absolute;right: 0;} .header-container .form-button .button span{line-height: 40px;color: #5F5F5F;} .header-container .form-button .drop-active{display: none;} /* Products grid ======================================================================================= */ .products-grid .item .visible-onhover {visibility: visible;opacity: 1;} .products-grid .item .quick-view { display: none !important; } /* Disable hover effect ======================================================================================= */ /* Show elements normally displayed only on hover */ .category-products-grid .item .display-onhover {display: block !important;} /* Remove On Hover Change Alter Image */ .products-grid .item:hover .product-image .thumbnail, .products-list .item:hover .product-image .thumbnail, .products-list .item .product-image .thumbnail, .products-grid .item .product-image .thumbnail{display: none !important;} .products-grid .item:hover .product-image .small-image, .products-list .item:hover .product-image .small-image {visibility: visible;opacity: 1;filter: alpha(opacity="100");} } /* ******************************************************************************************** Mobile, small old desktop - design for a width of less than 960px *********************************************************************************************** */ /* width < 960px */ @media only screen and (max-width: 959px) { /* Data Table Thead Heading ======================================================================================= */ .data-table thead th {font-size: inherit;font-weight: bold !important;} /* Toolbar ======================================================================================= */ .my-account .pager .amount{display: none;} .sorter .sort-by, .pager .limiter, .sorter .limiter{margin-right: 10px;} } /* ******************************************************************************************** Tablet (Portrait) - design for a width of 768px *********************************************************************************************** */ /* 768px <= width < 960px */ @media only screen and (min-width: 768px) and (max-width: 959px) { /* Header ======================================================================================= */ /*Dropdown*/ .header-container1 .shopping_cart.dropdown, .header-container2 .shopping_cart.dropdown, .header-container1 .block.wishlist, .header-container2 .block.wishlist, .header-container1 .block.compare, .header-container2 .block.compare, .header-container1 .quick-search, .header-container2 .quick-search{margin: 0px 0px 5px 5px;} /* Cart ======================================================================================= */ .cart-table .product-name { font-size:1em; font-family: inherit; } .cart-table .product-image { max-width:80px; } /* Default Magento classes ======================================================================================= */ .nobr { white-space:normal !important; } } /* ******************************************************************************************** All desktop - design for a width of 768px and wider *********************************************************************************************** */ /* 768px <= width */ @media only screen and (min-width: 768px) { /* Mobile accordion ======================================================================================= */ .mobile-accordion .block-title { border-bottom:none; } /* Hide line when not on mobile */ .mobile-accordion .opener { display:none !important; } /* Always hide when not on mobile */ .mobile-accordion .block-content { display:block !important; } /* Always show when not on mobile */ .accordion .block-content{display: none;} } /* ******************************************************************************************** All mobile - design for a width of less than 768px *********************************************************************************************** */ /* width < 768px */ @media only screen and (max-width: 767px) { /* Header ======================================================================================= */ /* Global notices */ .global-site-notice .notice-inner { background:none; padding:10px 0; text-align:center; } .global-site-notice .notice-inner p { width:100%; padding:0 0 10px; } .global-site-notice .notice-inner .actions { padding-bottom:5px; } /* Logo ======================================================================================= */ .logo { width:70%; margin-left:auto; margin-right:auto; text-align:center;} /* Other ======================================================================================= */ /* Header Top */ .header-top, .top-links, .block_header_top{ text-align: center !important;} /*Header Primary*/ .header-primary .v-grid{margin-top: 10px;margin-bottom: 10px;float: left;} .header-container .language.dropdown, .header-container .currency.dropdown{float: left;} /* Header Container Style 1 ======================================================================================= */ /*Dropdown*/ .header-container1 .currency.dropdown, .header-container1 .language.dropdown{display: inline-block;float: none;} /*Quick Search*/ .header-container1 .quick-search{ height: auto; width: 320px; float: left; } .header-container1 .form-button{ padding-bottom: 0px; position: absolute; right: 0; top: 0; z-index: 1; } .header-container1 .form-button .button span{line-height: 40px;} .header-container1 .form-button .drop-active{display: none;} .header-container1 .form-search.visible-onhover{visibility: visible;opacity: 1;} .header-container1 .form-search .input-text{width: 100%;height: 36px;} .header-container1 .form-search{width: auto;float: none;position: inherit;} /* Header Container Style 2 ======================================================================================= */ /*logo*/ .header-container2 .logo{margin-bottom: 15px;} /*top links*/ .header-container2 .top-links{float: right;} .header-container2 .header-primary .clear{clear: none;} /*Quick Search*/ .header-container2 .quick-search{ height: auto; width: 320px; float: left; } .header-container2 .form-button{ padding-bottom: 0px; position: absolute; right: 0; top: 0; z-index: 1; } .header-container2 .form-button .button span{line-height: 40px;} .header-container2 .form-button .drop-active{display: none;} .header-container2 .form-search.visible-onhover{visibility: visible;opacity: 1;} .header-container2 .form-search .input-text{width: 100%;height: 36px;} .header-container2 .form-search{width: auto;float: none;position: inherit;} /* Header Container Style 3 ======================================================================================= */ .header-container3 .header-primary{text-align: center;} .header-container3 .currency.dropdown, .header-container3 .language.dropdown{display: inline-block;float: none;} .header-container3 .quick-search{ width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; float: none; display: inline-block; } .header-container3 .form-search{width: auto;} .header-container3 .form-button{position: absolute;right: 0;} /* Forms ======================================================================================= */ .form-list .field, .form-list input.input-text, .form-list textarea, .form-list select, .form-list li.wide .input-box, .form-list li.wide input.input-text, .form-list li.wide textarea, .form-list li.wide select { max-width:100%; width: 100%;} /* Tables ======================================================================================= */ .data-table thead .nobr { white-space:normal !important; } .data-table th, .data-table td { padding:10px; } /* Data tables formatting ======================================================================================= */ /* Basic formatting */ .cart .data-table thead, .my-wishlist .data-table thead, .my-account .data-table thead, .order-review .data-table thead, .multiple-checkout .data-table thead{ display:none; } .cart .data-table tbody, .my-wishlist .data-table tbody, .my-account .data-table tbody, .order-review .data-table tbody, .multiple-checkout .data-table tbody{ background:transparent !important; } .cart .data-table tr, .cart .data-table td, .my-wishlist .data-table tr, .my-wishlist .data-table td, .my-account .data-table tr, .my-account .data-table td, .order-review .data-table tr, .order-review .data-table td, .multiple-checkout .data-table tr, .multiple-checkout .data-table td{ border:none !important; background:transparent !important; display:block; width:100%; text-align:left !important; box-sizing: border-box;-webkit-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;-moz-box-sizing: border-box;} .cart .data-table tr, .my-wishlist .data-table tr, .my-account .data-table tr, .order-review .data-table tr, .multiple-checkout .data-table tr{ border-bottom:1px solid #E4E4E4 !important; margin-bottom:20px; } .cart .data-table tfoot tr.last, .my-wishlist .data-table tfoot tr.last, .my-account .data-table tfoot tr.last, .order-review .data-table tfoot tr.last, .multiple-checkout .data-table tfoot tr.last{border-bottom: none !important;margin-bottom: 0px;} .cart .data-table tfoot tr.last{margin-bottom: 20px;} .data-table .product-name{display: inline;} .order-items .price-excl-tax, .multiple-checkout td .cart-price{display: inline-block;} .multiple-checkout .data-table td select{width: 100%;} /* Highlight first cell in table footer */ .my-account .data-table tfoot tr td:first-child, .order-review .data-table tfoot tr td:first-child, .multiple-checkout .data-table tfoot tr td:first-child{ font-weight:bold; } /* Show cell label */ .data-table .cartlabel { display:inline-block; width:30%; min-width:100px; max-width:140px; margin-right:10px; font-weight:bold; } /* Footer ======================================================================================= */ /* Footer elements - align center */ /* Footer elements */ .footer-bottom .left, .footer-bottom .right{width: 100% !important;text-align: center;margin: 10px 0px; } /* Toolbar ======================================================================================= */ /* All elements - align center and increase vertical spacing */ .pager, .sorter { text-align:center; } .pager .limiter, .pager .pages, .sorter .amount, .sorter .limiter, .sorter .view-mode, .sorter .sort-by { display:inline-block;} .sorter .per-page, .pager .per-page { display:none; } /* Category view ======================================================================================= */ /* Page heading with RSS link */ .page-title { position:relative; } .page-title .link-rss { float:none; display:block; position:static; margin:10px 0 0; } /* Products grid: override size of elements (values like size-s) ======================================================================================= */ /* Product name */ .products-grid .product-name { font-size:1.1666em; line-height:1.2307em; } /* Cart ======================================================================================= */ /* Buttons below table: align center */ .cart-table tfoot tr.first td, .my-wishlist .buttons-set{ text-align:center !important; padding:0;} .cart-table tfoot button, .my-wishlist .buttons-set button.button{ display:inline-block; float:none !important; margin:0 0 3px; padding:0; } /* Products Page ======================================================================================= */ /*Display Tabs Full Width*/ .gen-tabs .tabs li{display: inherit;} /* Wrapper for collaterals - remove top margin (grid units already have bottom margin) .product-view .box-additional { margin-top:0; } */ /* Slideshow ======================================================================================= */ /* Slideshow navigation: move buttons to the top right corner */ .banner .owl-theme .owl-controls .owl-buttons .owl-prev { top: 10px;right: 45px;left: auto;width: 30px;height: 30px;line-height: 30px;font-size: 1.5em;} .banner .owl-theme .owl-controls .owl-buttons .owl-next { top: 10px;right: 10px;left: auto;width: 30px;height: 30px;line-height: 30px;font-size: 1.5em;} /* Pagination */ .banner .owl-pagination { display: none; } /* Mobile accordion ======================================================================================= */ .mobile-accordion .block-content { display:none; } /* Hide on mobile */ .accordion .block-content{display: none;} /* Hide on mobile */ .mobile-accordion { position:relative; } /* Always make "relative" when not on mobile (to avoid flickering on CSS transitions) */ /* Grid and basic layout ======================================================================================= */ /* Margin for basic Magento columns */ .col-main, .col-left, .col-right { margin-bottom:30px; } /* Product view: margin for all grid units */ .product-view .grid12-1, .product-view .grid12-2, .product-view .grid12-3, .product-view .grid12-4, .product-view .grid12-5, .product-view .grid12-6, .product-view .grid12-7, .product-view .grid12-8, .product-view .grid12-9, .product-view .grid12-10, .product-view .grid12-11, /* deprecated */ .product-view .grid4-1, .product-view .grid4-2, .product-view .grid4-3, .product-view .grid2-1 /* end:deprecated */ { margin-bottom:30px; } /* Remove additional margin for main sidebars */ .col-left > * { margin-right: 0; } .col-right > * { margin-left: 0; } /* Magento utility classes ======================================================================================= */ .nobr { white-space:normal !important; } } /* end: width < 768px */ /* ******************************************************************************************** Mobile (Landscape) - design for a width of 480px *********************************************************************************************** */ /* 480px <= width < 768px */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* Category view ======================================================================================= */ .products-list .product-shop, .products-list .right-column, .products-list .product-image-wrapper { width:48%; margin-left:1%; margin-right:1%; } /* Shrink and align center the main image */ .img-box { width:60.4651%;} /* Toolbar ======================================================================================= */ .limiter label + .dropdown + label{display: none;} } /* end: 480px <= width < 768px */ /* ******************************************************************************************** Design for a width of 640px *********************************************************************************************** */ /* 640px <= width < 768px */ @media only screen and (min-width: 640px) and (max-width: 767px) { /* Column Grid ======================================================================================= */ .columngrid.columngrid-adaptive .item { width:31.3333%; clear:none !important; } .columngrid.columngrid-adaptive .item:nth-child(3n+1) { clear:left !important; } } /* end: 640px <= width < 768px */ /* ******************************************************************************************** Design for a width of less than 640px *********************************************************************************************** */ /* width < 640px */ @media only screen and (max-width: 639px) { /* Header ======================================================================================= */ /*Quick Search*/ .header-container1 .quick-search, .header-container2 .quick-search{width: 171px;} /*Dropdown*/ .header-container .header-primary .dropdown{margin: 5px 0px 5px 5px;} .block.wishlist .dropdown-menu, .block.compare .dropdown-menu {width: 250px;} /* Headings ======================================================================================= */ h1 { font-size:2em;line-height:1.25em;} h2 { font-size:1.6666em;line-height:1.2em;} h3 { font-size:1.3333em;line-height:1.25em;} h4 { font-size:1.1666em;line-height:1.1428em;} h5 { font-size:1em;line-height:1em;} h6 { font-size:1em;line-height:1em;} } /* end: width < 640px */ /* ******************************************************************************************** Design for a width of 480px *********************************************************************************************** */ /* 480 <= width < 640px */ @media only screen and (min-width: 480px) and (max-width: 639px) { /* Column Grid ======================================================================================= */ .columngrid.columngrid-adaptive .item { width:48%; clear:none !important; } .columngrid.columngrid-adaptive .item:nth-child(2n+1) { clear:left !important; } /* Subcategories Category ======================================================================================= */ .subcategories .item{width:31.3333% !important;} .subcategories .item:nth-child(3n+1) { clear:left !important; } .subcategories .item:nth-child(4n+1) { clear:none !important; } } /* end: 480 <= width < 640px */ /* ******************************************************************************************** Design for a width of less than 480px (small mobile) *********************************************************************************************** */ /* width < 480px */ @media only screen and (max-width: 479px) { /* Header ======================================================================================= */ /* Header elements - align center */ .header-primary{text-align: center;} .header .mobile-inline-container { text-align:center; } .header .mobile-inline-container > * { float:none; display:inline-block; margin-left:5px; margin-right:5px; } /* Inside user menu */ .header-container .dropdown { float:none !important; display:inline-block !important; font-size: 13px;} /* Mini cart */ .shopping_cart.dropdown{position: initial;} .shopping_cart .dropdown-toggle{position: relative;} .shopping_cart .dropdown-menu { width: 94%;left: 0;right: 0;margin: 0 auto; } .shopping_cart .drop-active { bottom:0;} /* Compare dropdown */ .block.compare{display:none !important; } .block.compare .dropdown-menu{ display:none !important; } /* Wishlist dropdown */ .block.wishlist{display:none !important; } .block.wishlist .dropdown-menu{ display:none !important; } /* Quick Search */ .header-container .form-search {width: 200px;} /* Header Container Style 1 ======================================================================================= */ /*toplinks & Shooping Cart*/ .header-container1 .shopping_cart.dropdown{display: inline-block;float: none;} /*Quick Search*/ .header-container1 .quick-search{width: 100%;margin-top: 15px;} /* Header Container Style 2 ======================================================================================= */ /*Dropdown*/ .header-container2 .currency.dropdown, .header-container2 .language.dropdown{display: inline-block;float: none;} /*toplinks & Shooping Cart*/ .header-container2 .top-links, .header-container2 .shopping_cart.dropdown{display: inline-block;float: none;} /*Quick Search*/ .header-container2 .quick-search{width: 100%;margin-top: 15px;} /* Products list ======================================================================================= */ .products-list .product-image { margin-bottom:20px; } /* Product page ======================================================================================= */ /* Reviews */ .product-view .form-add .data-table th{font-size: inherit;font-weight: bold;} .product-view .form-add .data-table th, .product-view .form-add .data-table td { padding:6px 1px; } .product-view .form-add .form-list input.input-text, .product-view .form-add .form-list textarea { width:90%; } /* Add-to links */ .product-view .add-to-links { text-align: inherit; } /* Toolbar ======================================================================================= */ .sorter{height: 50px;} .toolbar .limiter { display:none; } .sorter .view-mode { display:none; } .sorter .sort-by, .pager .limiter{ background:none; margin-right:0; float: none;margin-left:0; padding-right:0; padding-left:0; } /* Remove right divider */ /* Pages */ .pager .amount, .sorter .amount{display: none;} .pager .pages{float: none;clear: both;width: 100%;} /* Account ======================================================================================= */ /* Account info + Order info */ .my-account .col2-set .col-1 { border-right:none; margin-bottom:20px; } .my-account .col2-set .col-1 .box { padding-right:0; } /* Order details */ .order-items .sub-title .separator { display:none; } /* Product Review Detail*/ .product-review .product-img-box{width: auto;float: none;} .product-review .product-details{margin: 0 0px 20px 0px;} /* Checkout ======================================================================================= */ .opc .step-title h2 { font-size:1em; line-height:2.8333em; } /* Ajex Cart Popup (Remove Add Image For Small Device) ======================================================================================= */ div.alert-inner{display: inherit;bottom: auto;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;margin-top: -112px;z-index: 10010;} div.alert-inner .product-image{display: none;} div.alert-inner p{padding-left: 0px;} div.alert-inner li.success-msg{margin-left: 0px;} div.alert-inner a{float: none !important;cursor: pointer;margin: 5px 5px;display: inline-block;vertical-align: top;} /* Grid elements ======================================================================================= */ .col2-set .col-1, .col2-set .col-2 { width:100%; margin-bottom: 20px;} /* Subcategories Category ======================================================================================= */ .subcategories .item{width:48% !important;} .subcategories .item:nth-child(2n+1) { clear:left !important; } .subcategories .item:nth-child(4n+1) { clear:none !important; } } /* end: width < 480px */ /* ******************************************************************************************** Design for a width of 320px (mobile - portrait) *********************************************************************************************** */ /* 320px <= width < 480px */ @media only screen and (min-width: 320px) and (max-width: 479px) { /* Column Grid ======================================================================================= */ .columngrid.columngrid-adaptive .item { width:48%; clear:none !important; } .columngrid.columngrid-adaptive .item:nth-child(2n+1) { clear:left !important; } } /* end: 320px <= width < 480px */ /* ******************************************************************************************** Design for a width of less than 320px *********************************************************************************************** */ /* width < 320px */ @media only screen and (max-width: 319px) { /* Quick Search ======================================================================================= */ .header-container .form-search {width: 165px;} /* Mini Cart ======================================================================================= */ /*.shopping_cart .dropdown-menu { width: 208px;left: 0; }*/ .shopping_cart .mini-products-list .product-image{display: none;} .shopping_cart .mini-products-list .product-details{margin-left:0px;} /* Column Grid ======================================================================================= */ /* Always show 1 column */ /* Important: added ".columngrid" class to override other styles */ .columngrid.columngrid-adaptive .item { width:98%; clear:none !important; } /* Slideshow ======================================================================================= */ .banner .owl-pagination { display:none; } /* Deprecated */ } /* end: width < 320px */ /* ******************************************************************************************** Design for a width of 240px (small mobile) *********************************************************************************************** */ /* 240px <= width < 320px */ @media only screen and (min-width: 240px) and (max-width: 319px) { } /* end: 240px <= width < 320px */ /* ******************************************************************************************** Design for a width of lass than 240px *********************************************************************************************** */ /* width < 240px */ @media only screen and (max-width: 239px) { } /* end: width < 240px */ /*Additional custom CSS*/