/* Author : Vyacheslav Shmal Date: 9-5-17 Web02 Team Most Used Colors Grey : #383637; Light Grey : #d7d6d6; Yellow : #f9c60f; Yellow Button : #f9c709; */ /*-------Generals ---------*/ .header-top-bar { background-color: #383637; color: #fff; } .form-language { display: inline-block; margin-right: 30px;} p.welcome-msg { display: inline-block; font-size: 19px; margin-bottom: 0; position: relative; bottom: -4px;} p.welcome-msg a { cursor: pointer; color: #f9c60f; } .store-language-container { padding: 15px 20px;} .nopadding { padding: 0 !important; } .header-language-container.row {line-height: 3;} .form-language label { margin-right: 10px; font-weight: 100; font-size: 19px; margin-bottom: 0;position: relative; bottom: -2px;} .form-language .select2-container--default .select2-selection--single { border-radius: 200px; background-color: #383637; border-color: #fff; height: 35px;} .form-language .select2-container--default .select2-selection--single .select2-selection__arrow { top: 5px; } .form-language .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; padding-left: 15px; font-size: 19px; color: #fff;} .form-language .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #f9c709 transparent transparent transparent; } .form-language .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .form-language .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 200px; border-bottom-right-radius: 200px;} .w2-header-right {padding: 15px 20px; text-align: right;} .w2-login-container { display: inline-block;} .w2-login-container a { background-color: transparent; font-size: 19px; text-transform: none; padding: 0; } .w2-login-container a:hover span { text-decoration: none; border-bottom: solid 1px #F9C709; } .w2-login-container a:hover {text-decoration: none;} .w2-login-container a span { font-weight: 100; font-size: 19px; border-radius: 0; } .w2-login-container > span { font-size: 19px; color: #f9c709;} div.footer address { font-size: 15px } @media only screen and (min-width: 1024px) { #header-nav { transition: all 0.4s ease;} #header-nav.sticky-menu-top { position: fixed; top: 0; left: 0; width: 100%; z-index: 600; background-color: #383637; margin: 0; transition: all 0.4s ease;} } @media only screen and (min-width: 771px) { a.logo{ max-width: 450px; display: inline-block; float: none;} div.page-header-container { text-align: center; } ol.nav-primary li.level0 ul { top: 60px; width: 80vw; left:50%; transform: translate(-50%,0); z-index: 100;} } div#w2-topmenu .first-level { display: inline-block; margin-right: 5px; padding: 15px; font-size: 22px;} ul.sub-cat-electro { display: none;} div#w2-topmenu a { color: #fff; text-decoration: none;} ul.sub-cat-electro { position: absolute; width: 100vw; left: 50%; transform: translate(-50%,0); background-color: #ccc; z-index: 200; padding: 20px 0; border-top: 2px solid #f9c709; margin-left: -9px;} div#w2-topmenu { position: relative;} ul.sub-cat-electro li { display: inline-block; height: auto; padding: 20px; vertical-align: middle; width: 15%; background-color: #383637; margin: 5px;} div#w2-topmenu ul.sub-cat-electro a { color: #fff; font-size: 90%; } ul.sub-cat-electro img { margin: 0 auto; padding-bottom: 15px;} li.second-level:hover { box-shadow: 0 0 0 3px #ffed00 inset;} div#w2-topmenu .first-level a { cursor: pointer;} ul.sub-cat-electro.why-elect li img { display: inline; width: 30px; margin-right: 10px;} div#w2-topmenu ul.sub-cat-electro.why-elect li a { font-family: "Roboto"; font-weight: 100; text-transform: initial; border-bottom: 1px solid #f9c709; padding-bottom: 15px; } ul.sub-cat-electro.why-elect li { height: auto; padding: 40px; width: 18%;} .w2-menu-inside-banner {position: relative; margin-top: 20px;} .w2-menu-inside-banner img {border: 2px solid #f9c709; width: 100%; max-width: 1425px;} .w2-menu-inside-banner h5 { position: absolute; bottom: 40px; color: #fff; left: 13%; background-color: rgba(249,199,9,0.5); padding: 10px 20px; font-family: "Roboto"; font-weight: 100;text-transform: initial;font-size: 35px;} .compare-button { position: fixed; z-index: 5000;top: 40%; right: 0; background-color: #f7c413; padding: 5px;transition: transform 0.5s; } .compare-button:hover { transform: scale(1.1); transition: transform 0.5s;} .compare-button a { text-align: center; display: block;} .compare-button a:hover { color: #000; text-decoration: none;} .compare-button img { width: 70px;} ul.messages { position: fixed; top: 62px; z-index: 50000; left: 0px;} ul.messages li.success-msg li { padding-top: 10px; padding-bottom: 10px;} ul.sub-cat-electro.products-menu-tab li {height: 210px; width: 13%; overflow: hidden;} @media only screen and (min-width: 1024px) { div#w2-topmenu .first-level { font-size: 1.2vw; } } /*---------Home Page --------*/ #main-slider-container.main { position: relative;} #main-slider-container .swiper-pagination-bullet { width: 20px; height: 20px; background-color: #fff; } #main-slider-container .swiper-pagination-bullet-active { background-color: #f9c60f; } .row.home-first-row { text-align: center; background-color: #d7d6d6;} .row.home-first-row { padding: 15px 0; margin-bottom: 20px;} .home-first-row img { display: inline-block; width: 90px;} .row.home-first-row h2, .row.home-first-row h3 { text-transform: none; font-size: 27px; color: #000;} .row.home-first-row h2{ font-weight: 400; margin-bottom: 30px; } a.w2-button {background-color: #f9c709;padding: 6px 100px;display: inline-block;font-size: 25px;border-radius: 100px;color: #fff;font-weight: 500;} a.w2-button:hover { text-decoration: none; color: #383637;} .catalog-product-view a.w2-button:hover { color: #f7c413; } #header + .container-fluid { background-color: #d7d6d6; } div#main-slider-container video { width: 100%; height: 100%; } /* Product Slider */ .w2-product-slider h3 {text-align: center; text-transform: none; font-size: 35px; color: #000;} .w2-product-slider { background-color: #d7d6d6;padding-top: 10px; margin-bottom: 20px; padding-bottom: 15px;} .w2-product-slider .swiper-slide { padding: 10px 15px; background-color: #fff; text-align: center; border: 2px solid #fff; transition: border 0.5s;} .w2-product-slider .swiper-slide img {display: inline-block;} .slider-product-title { text-align: left; line-height: 25px; font-weight:400; font-size: 18px; border-bottom: 1px solid #000; padding: 0 20px 5px; position: relative; top: -15px;} .w2-product-slider .slider-product-title p { margin-bottom: 0;} .slider-product-title p {color: #000;} .slider-product-title .slider-product-sku { opacity: 0.5; font-size: 15px;} .product-slider .slider-products-attributes p { font-size: 18px; margin-bottom: 5px;} .product-slider-pagination .fa-chevron-right:before, .product-slider-pagination .fa-chevron-left:before{ -webkit-text-stroke: 2px #d7d6d6; } .product-slider-pagination { text-align: center; margin-bottom: 15px; } .product-slider-pagination span { border: 1px solid #696969;padding: 3px 7px; border-radius: 50%; margin: 0 5px;} .product-slider-button { margin-top: 12px;} .slider-products-attributes { height: 80px; transition: transform 0.5s , background-color 0.5s; background-color: transparent; } .slider-product-title { transition: transform 0.5s, background-color 0.5s ; background-color: transparent; padding-top: 5px;} .product-slider .swiper-slide:hover .slider-products-attributes { transform:translateY(-70%); transition: transform 0.5s;} .product-slider .swiper-slide:hover .slider-product-title { transform: translateY(-45%); transition: transform 0.5s, background-color 0.5s; background-color: rgba(255,255,255,0.6);} .product-slider-button a.w2-button { text-transform: uppercase;} .product-slider-image { position: relative;} span.new-product-label { position: absolute; right: 15px; top: 5px; font-size: 20px; font-weight: bold; color: #f9c709; z-index: 80;} .product-slider-top { text-align: left; transform: translateY(-140%); position: absolute; transition: transform 0.5s; padding: 0 10px 5px; border-bottom: 1px solid #000; width: 92%; background-color: rgba(255,255,255,0.5); z-index: 10;} .product-slider .swiper-slide:hover .product-slider-top { transform: translateY(0%); transition: transform 0.5s;} .product-slider-top img { margin: 0 5px;} .w2-product-slider .swiper-slide:hover, .w2-product-wrapper:hover {border: 2px solid #f9c709; transition: border 0.5s; } .slider-product-title > p:nth-child(2) { height: 55px; overflow: hidden;} .product-slider-top a { color: #000;} .product-slider-top a:hover{ color: #000; text-decoration: none; } /*customer slider */ .customer-slider .swiper-slide img {max-height: 90px; display: inline-block; filter: grayscale(1); transition: filter 0.5s;} .customer-slider .swiper-slide { text-align: center;} .customer-slider .swiper-slide img:hover { -webkit-filter: grayscale(0); filter: grayscale(0); transition: filter 0.5s;} .w2-customer-slider { padding: 35px 0; border-top: 3px solid #f9c709; border-bottom: 3px solid #f9c709;} .w2-footer-topper {height: 50px;border-top: 15px solid #383637;} .customer-slider.swiper-container{ margin: 0 20px;} .customer-next {position: absolute; top: 50%; transform: translateY(-50%); right: 15px; border: 1px solid #696969; padding: 5px 12px; border-radius: 50%; z-index: 50; font-size: 17px;} .customer-prev{ position: absolute; top: 50%; transform: translateY(-50%); left : 15px; border: 1px solid #696969; padding: 5px 12px; border-radius: 50%; z-index: 50;font-size: 17px; } .customer-next .fa-chevron-right:before { -webkit-text-stroke: 2px #ffffff;} .customer-prev .fa-chevron-left:before {-webkit-text-stroke: 2px #ffffff;} /*--------------- Catalog Category ------------------*/ .row.w2-catalog-grid { background-color: #d7d6d6;} a.product-image { border: none; } .w2-product-wrapper { text-align: center; background-color: #fff; margin-bottom: 30px; overflow: hidden; padding: 10px 15px; border: 2px solid #fff; transition: border 0.5s;} .w2-product-wrapper .product-slider-image img { display: inline-block;} .slider-products-attributes img { display: inline-block;} .w2-product-container { overflow: hidden;} .catalog-category-view .main-page-container { background-color: #d7d6d6;} .w2-product-wrapper .product-slider-image { height: 260px;} .w2-product-container .slider-product-title p { margin-bottom: 0;} .w2-product-container:hover .slider-products-attributes { transform:translateY(-70%); transition: transform 0.5s;} .w2-product-container:hover .slider-product-title { transform:translateY(-45%); transition: transform 0.5s, background-color 0.5s; background-color: rgba(255,255,255,0.6);} .w2-product-container .product-slider-top { width: 86%; } .w2-product-container:hover .product-slider-top { transform: translateY(0%); transition: transform 0.5s;} .w2-product-container .product-slider-top img { display: inline-block; } .slider-products-attributes .row {min-height: 90px;} .page-title.category-title, .category-description.std { display: none;} .slider-product-title a, .slider-product-title a:hover { text-decoration: none;} .hide-filters { z-index: 500; } .hide-filters p { display: inline-block; cursor: pointer;} .amshopby-cat a:hover { color: #fff; transition: color 0.5s;} .amshopby-cat a{ transition: color 0.5s; } .category-accesories .slider-product-title a p { display: inline-block; overflow: hidden; } @media only screen and (max-width: 770px){ div.block-layered-nav dl ol > li > a { background-color: transparent; } div.block-layered-nav dl ol > li > a:hover { background-color: transparent; } } @media only screen and (max-width: 1200px){ #narrow-by-list { display: none; } } /*-------------- Catalog Category View ---------*/ .catalog-product-view .main-page-container { background-color: #d7d6d6;} .catalog-product-view .product-view .product-shop, .catalog-product-view .product-view .add-to-cart-wrapper { width: 100%; } .slider-product-title a p { height: 50px; display: table-cell; vertical-align: bottom;} .slider-product-title > p { opacity: 0.5;} .catalog-product-view .product-img-box .product-image { padding: 50px; background-color: #fff; } .catalog-product-view .product-view .product-shop .product-name .h1, .catalog-product-view .product-view .product-img-box .product-name h1 { color: #383637; } .catalog-product-view .product-img-box .product-image img { max-height: 600px; height: auto;} .catalog-product-view .product-view .product-shop .product-name .h1 { font-size: 36px;} .w2-product-type, .w2-product-sku { clear: both;} .w2-product-type span { font-size: 20px;} .w2-product-sku { margin-bottom: 15px;} .catalog-product-view .product-view .product-shop .short-description { font-size: 15px; } .w2-product-attributes .cert-image { max-height: 120px; } .w2-product-attributes img {display: inline-block;} .w2-product-attributes { text-align: center;} .speed-attribute img { width: 100%; max-width: 95px;} .tow-weight-attribute img { width: 100%; max-width: 95px; padding: 10px;} .speed-attribute p, .tow-weight-attribute p { color: #000;font-size: 17px; margin-bottom: 0;} .row.w2-product-price .product-price {font-size: 7em; font-weight: 600; color: #f9c709;} .row.w2-offer-button { text-align: center;} .w2-offer-button .product-slider-button a { background-color: #383637;} #product-thumbs .swiper-slide a img {background-color: #fff;padding: 5px;} #product-thumbs .swiper-button-prev, #product-thumbs .swiper-container-rtl .swiper-button-next { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwb2x5Z29uIHBvaW50cz0iMzUsNDcuMjUgMzcuMDg2LDQ1LjE2NCAxNi45MjIsMjUgMzcuMDg2LDQuODM2IDM1LDIuNzUgMTIuNzUsMjUgIi8+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSI1MCIgd2lkdGg9IjUwIi8+PC9zdmc+); } #product-thumbs .swiper-button-next, #product-thumbs .swiper-container-rtl .swiper-button-prev { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwb2x5Z29uIHBvaW50cz0iMTUsMi43NSAxMi45MTQsNC44MzYgMzMuMDc4LDI1IDEyLjkxNCw0NS4xNjQgMTUsNDcuMjUgMzcuMjUsMjUgIi8+PC9zdmc+); } .breadcrumbs.w2-breadcramps { padding: 2vw; margin: 0;} ol.nav-primary a{ font-size: 24px; color: #fff;} ol.nav-primary li.level0 > a { text-transform: none; } .extra-images img { width: 100%; height: 100%;} .row.extra-images { margin-top: 20px;} .row.w2-video-wrapper iframe { min-height: 300px;} /*.row.w2-product-price { min-height: 100px;}*/ .row.w2-actions { margin-bottom: 30px;} .download p { display: inline;} .catalog-product-view.catalog-product-view .w2-actions .download img { border-radius: 10px; width: 30px; padding: 6px; transition: all 0.5s; display: inline; } .tab-content.col-lg-6.col-lg-offset-3 img { width: 100%;} @media only screen and (min-width: 1200px) and (max-width: 1368px) { .w2-product-container.col-lg-3 { width: 33.3333% } div#product-thumbs img { width: 100%; height: 100%;} .w2-product-attributes .cert-image { width: 100%; } } @media screen and (min-width: 1280px){ .catalog-product-view .breadcrumbs.w2-breadcramps { padding-left: 11%;} } @media screen and (min-width: 1300px){ .extra-images, .row.w2-video-wrapper { width: 100%; margin: 0 auto; max-width: 1300px;} } @media screen and (max-width: 1300px){ #product-thumbs .swiper-slide a img { height: 100%; width: 100%; } } @media only screen and (min-width: 771px) { ol.nav-primary {background-color: #404041; padding: 15px 0;} div#header-nav { border-bottom: none; } div.product-collateral > dl > dd{ border: none; } div.product-collateral .toggle-tabs li.current { border-left: none; } } /*-----------------------Mobile theme Styling ----------------*/ @media screen and (max-width: 1024px) { #header .skip-link.skip-nav { border-right: none; float: right; width: 100px; margin-top: 9px; cursor: pointer; display: block;background: transparent;} #header a.logo { width: 200px; } #header .skip-link.skip-nav span { font-size: 16px; padding: 0;} #header .skip-link.skip-nav span.icon { position: relative; top: -2px;} #header { position: sticky; top: 0; z-index: 50002; } .customer-slider .swiper-slide img { filter: grayscale(0); } .promotion-banner1 span { font-size: 2em; } .product-slider-top { transform: translateY(0); } #header-nav.off-canvas {position: fixed; background-color: #383637; z-index: 50001; right: 0; width: 300px; height: 100%; top: 53px; display: none;} #header-nav.off-canvas li.first-level { display: block; font-size: 20px; } .catalog-product-view .product-img-box .product-image img{ height: 100%; width: 100%; } .product-img-box .product-name h1 { margin-top: 10px;} .catalog-product-view a.w2-button { padding: 6px 80px;} a.skip-link.skip-nav .bars i { font-size: 30px; color: #f9c709;} .skip-nav .label { position: relative; top: -5px; margin-left: 10px;} div.page-header-container { text-align: left; } .sub-cat-electro-mobile{ display: none; } .sub-cat-electro-mobile li { padding-left: 16px; } div#w2-topmenu .sub-cat-electro-mobile li a{ color: #d7d6d6; font-family: 'Century Gothic'; font-size: 16px; } .w2-sub-wrapper li:nth-child(even), .sub-cat-electro-mobile li:nth-child(even) { background-color: #565656;} .w2-product-container:hover .slider-products-attributes { transform: translateY(0%); } .w2-product-container:hover .slider-product-title { transform: translateY(0%); } .product-slider .swiper-slide:hover .slider-products-attributes { transform: translateY(0%); } .product-slider .swiper-slide:hover .slider-product-title { transform: translateY(0%); } #header .skip-link.skip-nav { margin-top: 18px; } #header a.logo { width: 240px; min-height: 60px;} ul.messages { position: fixed; top: 62px; z-index: 50000; left: 0px;} ul.messages li.success-msg li { padding-top: 10px; padding-bottom: 10px;} .promo-lines { font-size: 24px; line-height: 38px; } } @media screen and (max-width: 600px) { #header a.logo { width: 200px; } #header .skip-link.skip-nav { margin-top: 13px; } } @media screen and (min-width: 771px) { }