/* 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: 1 columns */ .columngrid-adaptive.columngrid-1col .item { width:48%; clear:none !important; } .columngrid-adaptive.columngrid-1col .item:nth-child(2n+1) { clear:left !important; } /* 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; } /* Cart ======================================================================================= */ .cart-table .product-image { max-width:80px; } /* Misc ======================================================================================= */ /* Mini cart */ .after-mini-cart { clear:none; } } /* ******************************************************************************************** Design for a width of 1024-1280 px *********************************************************************************************** */ /* width <= 1024px */ @media only screen and (min-width: 1025px) and (max-width: 1279px) { /* Mega Menu ======================================================================================= */ #mega-nav > li > a { padding: 24px 8px;} } /* ******************************************************************************************** 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: 1024px) { /* Header ======================================================================================= */ .header-primary{padding-bottom:25px;} /* Mobile Quick Search */ .mobile-icons .quick-search {float:right;width:auto; position: relative;} .mobile-icons .quick-search #search_mini_form{display:none;} .mobile-icons .quick-search #search_mini_form.show{display:block;} .mobile-icons .search-icon{display:block;} .mobile-icons .form-search{position: absolute;right: 0px;width: 300px;margin-top: 15px;z-index:2;} .mobile-icons .form-search:before{content:"";border-bottom: 8px solid #f3f3f3;border-left: 8px solid transparent;border-right: 8px solid transparent;width: 0px;position: absolute;height: 0px;right: 10px;top: -7px;} /* Side Header ======================================================================================= */ .side-header .navmain-container{display: block;box-shadow:none;} .side-header .logo{display:none;} .side-header .navmain-container .logo{display:block;} .side-header .header-container, .side-header .header-container.fixed-header{position: relative;left: 0;top: 0;min-height: 0;width: auto;} .side-header .header-primary{padding:25px 0px;} .side-header .logo{margin-bottom: 0px;} .side-header .block-cart.dropdown-menu{top:100%;left:auto;right:0;} .side-header .currency.dropdown .dropdown-menu.left-hand{left:auto;right:0;} .side-header .custom-side-social{display:none;} .cms-index-index.cms-home.side-header .header-container{top: 0;} .side-header .main-container, .side-header .footer-container{margin-left:0px;} .side-header .footer-primary-container, .side-header .footer-secondary-container, .side-header .footer-bottom-container{margin-right:0px;} /* Products grid ======================================================================================= */ .products-grid .item .visible-onhover {visibility: visible !important;opacity: 1 !important;} /* Disable Hover Effect ======================================================================================= */ /* Show elements normally displayed only on hover */ .products-grid .item .display-onhover {display: block !important;} /* Show elements normally displayed only on hover (Add to links) */ .products-grid .item .actions, .products-grid .item:hover .actions{transform: translate(0%);-webkit-transform: translate(0%);-moz-transform: translate(0%);-o-transform: translate(0%);-ms-transform: translate(0%);} /* Product alter images normally displayed on hover */ .products-grid .item .product-image .small-image, .products-grid .item:hover .product-image .small-image{opacity: 1;visibility: visible;} .products-grid .item .product-image .thumbnail, .products-grid .item:hover .product-image .thumbnail{opacity: 0;visibility: hidden;} /* Menu ======================================================================================= */ .navigations{position: initial;} /* Sidenav ======================================================================================= */ /* Hide Sidenav */ .block.block-sidenav{display: none;} } /* ******************************************************************************************** Mobile, small old desktop - design for a width of less than 960px *********************************************************************************************** */ /* width < 960px */ @media only screen and (max-width: 959px) { /* Shopping Cart ======================================================================================= */ .cart .cart-left-column, .cart .cart-right-column{width:100% !important;margin-left:0% !important;margin-right:0% !important;} } /* ******************************************************************************************** Tablet (Portrait) - design for a width of 768px *********************************************************************************************** */ /* 768px <= width < 960px */ @media only screen and (min-width: 768px) and (max-width: 959px) { /* Cart ======================================================================================= */ .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) { /* Disable display banner with header ======================================================================================= */ body.cms-index-index .header-container, body.cms-index-defaultindex .header-container, body.cms-home .header-container{position: relative !important;margin-top:0px !important;} /* 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; } /* Other */ .header{text-align: center;} /* Header elements - align center */ .header .item-left, .header .item-right{display: inline-block;float: none;margin: 0px 5px;text-align: center;vertical-align: middle;} /* Category view ======================================================================================= */ .products-list .product-shop, .products-list .right-column, .products-list .product-image-wrapper { margin-left: auto !important;margin-right: auto !important;float:none;} .products-list .product-image-wrapper, .products-list .product-image{max-width:300px;display: block;} .products-list .product-shop{padding-top: 20px;float:left;} /* Toolbar ======================================================================================= */ /* Increase vertical spacing */ .my-account .pager{margin-top: 0px;} /* Page heading With Rss Link ======================================================================================= */ .page-title { position:relative; } .page-title .link-rss { float:none; display:block; position:static; margin:10px 0 0; } /* 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.button, .my-wishlist .buttons-set button.button{ display:inline-block; float:none !important; margin:0 0 3px; padding:0; } /* Products Page ======================================================================================= */ /* Product primary column */ .product-view .product-shop{padding: 30px 0px 0 0px;} /* Product third column */ .product-view .product-third-column{padding: 30px 0px 0 0px;} /* Tables ======================================================================================= */ .data-table thead .nobr { white-space:normal !important; } .data-table th, .data-table td { padding:10px; } /* 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{ text-align:left !important;border:none !important; background:transparent !important; display:block; width:100%; 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 #ECECEC !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;} .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; margin-right: 10px;vertical-align: middle;background-color: #F3F3F3;padding: 3px 5px;font-weight: bold;font-size: 11px;} /* Show item options */ .data-table .item-options{margin: 5px 0 0 0px;} /* Forms Elements ======================================================================================= */ .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%;} /* 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 col-left and col-right */ .col-left, .col-right{ margin-top:20px } /* Magento utility classes ======================================================================================= */ .nobr { white-space:normal !important; } /* Scroll Back To Top ======================================================================================= */ a.scrollup {display:none !important;} /* Banner Slider ======================================================================================= */ /* Banner Slider Pagination */ .banner .owl-theme .owl-controls .owl-pagination{ display:none !important; } /* Footer ======================================================================================= */ /* Custom Support Icon */ .custom-support [class*="grid_"] {border-left-width: 0px;;border-right-width: 0px;border-top-width: 1px;;border-bottom-width: 1px;} .custom-support [class*="grid_"]:first-child{border-top-width: 0px;} .custom-support [class*="grid_"]:last-child{border-bottom-width: 0px;} /* Footer Bottom */ .footer-bottom, .footer-bottom address{text-align: center;} .footer-bottom address{margin-top: 15px;} .customer-support .service .service-icon{left:44%;} .customer-support .service{display:inline-block;margin-top:50px;} } /* end: width < 768px */ /* ******************************************************************************************** Mobile (Landscape) - design for a width of 480px *********************************************************************************************** */ /* 480 <= width < 768px */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* end: 480 <= width < 768px */ /* ******************************************************************************************** Design for a width of 640px *********************************************************************************************** */ /* 640 <= width < 768px */ @media only screen and (min-width: 640px) and (max-width: 767px) { } /* end: 640 <= width < 768px */ /* ******************************************************************************************** Design for a width of less than 640px *********************************************************************************************** */ /* width < 640px */ @media only screen and (max-width: 639px) { /* Header ======================================================================================= */ /* Shopping Cart */ .shopping_cart .icon-cart{margin-right:0px;} .shopping_cart .dropdown-toggle .summary-container{line-height: 36px;} .shopping_cart .dropdown-toggle.cover > div > span{ display: none;} .side-header .shopping_cart .dropdown-toggle.cover > div{padding-right:15px;} /* Column Grid ======================================================================================= */ .columngrid.columngrid-adaptive .item { width:48%; clear:none !important; } .columngrid.columngrid-adaptive .item:nth-child(2n+1) { clear:left !important; } /* Title Buttons (Display Buttons Full Width) ======================================================================================= */ .title-buttons button.button{width: 100%;margin: 10px 0px 10px 0px;} .title-buttons button.button span{float:none;} /* Multiple Checkout Button Set (display backlink with button full width) ======================================================================================= */ .multiple-checkout .buttons-set .back-link, .multiple-checkout .buttons-set .back-link + button.button, .multiple-checkout .buttons-set .back-link + button.button span{float:none;} .multiple-checkout .buttons-set .back-link + button.button{width:100%;margin-right: 0px;} .customer-support .service .service-icon{left:41%;} } /* end: width < 640px */ /* ******************************************************************************************** Design for a width of 480px *********************************************************************************************** */ /* 480 <= width < 640px */ @media only screen and (min-width: 480px) and (max-width: 639px) { } /* 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-top-container > .container_12{width:100%;padding:0%;} /* Header elements - align center */ .header .mobile-inline-container { text-align:center; } .header .mobile-inline-container > * { float:none; display:inline-block; margin-left:5px; margin-right:5px; } /* Logo */ .logo {} /* Mobile Quick Search */ .mobile-icons .quick-search{position: initial;float:none;} .mobile-icons .form-search{ margin-top: 0px;width: 100%;} .mobile-icons .form-search:before{display:none;} /* Shopping Cart */ .shopping_cart {position: initial;} .shopping_cart .dropdown-menu{min-width: 100%;top:inherit;} /* Dropdown */ .dropdown-toggle.cover > div{padding:0px;} .header .dropdown, .mobile-icons > div{width: 33.333%;} .mobile-icons > div{border-top:1px solid #E4E4E4;} .mobile-icons{float:none !important; } .mobile-icons .dropdown{width:100%;} /* Toolbar ======================================================================================= */ .sorter, .pager{text-align: center !important;} .sorter > *, .pager > *{float:none !important;display:inline-block !important;margin:0px 5px !important;vertical-align: middle !important;} /* Product page ======================================================================================= */ /* Product Reviews */ .product-view .form-add .data-table th, .product-view .form-add .data-table td { padding: 10px 5px; } /* Account ======================================================================================= */ /* Product Review Detail*/ .product-review .product-img-box{width: auto;float: none;} .product-review .product-details{margin: 0 0px 20px 0px;} /* Grid elements ======================================================================================= */ .col2-set .col-1, .col2-set .col-2 { width:100%; margin-bottom: 20px;} /* Ajex Cart Popup ======================================================================================= */ div.alert-inner{margin-left: -48%;width: 96%;max-width: none;} div.alert-inner a{float: none !important;} div.alert-inner a.cart{margin-bottom:10px;} /* Caption ======================================================================================= */ .caption > * { display:none !important; } .caption .permanent { display:inline-block !important; } .caption .heading { font-size:16px; line-height: 22px;} .caption p { font-size: 14px; line-height: 20px;} } /* 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) { } /* end: 320px <= width < 480px */ /* ******************************************************************************************** Design for a width of less than 380px *********************************************************************************************** */ /* width < 380px */ @media only screen and (max-width: 380px) { /* Header ======================================================================================= */ /* Column Grid ======================================================================================= */ /* Show 1 column */ .columngrid.columngrid-adaptive .item { width:98%; clear:none !important; } /* Category Page Toolbar ======================================================================================= */ .toolbar .sorter label{display:none;} .sort-by select, .limiter select{margin:0px;} /* Button Set (Backlink With Button Display Full Width) ======================================================================================= */ .buttons-set .back-link, .buttons-set .back-link + button.button, .buttons-set .back-link + button.button span{float:none;} .buttons-set .back-link + button.button{width:100%;margin-right: 0px;} /* Opc Lorder */ .opc .buttons-set .back-link + button.button + .please-wait{width: 100%;text-align: center;margin-right: 0px;} /* Shopping Cart & Wishlist Button (Display same as button set) */ .cart-table tfoot button.button, .my-wishlist .buttons-set button.button{width: 100%;margin: 0 0 5px 0px !important;} .cart-table tfoot button.button span, .my-wishlist .buttons-set button.button span{float:none;} /* Testimonials ======================================================================================= */ .testimonial_image{float:none;text-align:center;margin: 0 auto;} .testimonial_text{margin-left:0px;margin-top:10px;} } /* end: width < 380px */ /* ******************************************************************************************** Design for a width of less than 320px *********************************************************************************************** */ /* width < 320px */ @media only screen and (max-width: 319px) { } /* 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*/ /* RTL RESPONIVE */ /* END RTL RESPONSIVE */