/* body { position: fixed !important; overflow-y: scroll; width: 100%; } */ /* GLOBAL */ #site-nav a { text-decoration: none; outline: 0; } #site-nav a:active { outline: 0; } #site-nav li { color: #000; } #site-nav ul { list-style: none; } #site-nav .img-responsive { max-width: 100%; height: auto; display: block; } /* MAIN NAVIGATION (LARGE INIT)*/ #site-nav .main.level-0 > li, #site-nav .logo, #site-nav .aid > li { display: inline-block; float: left; } #site-nav:after { content: ""; clear: both; display: table; } #site-nav { position: fixed; top: 0; right: 0; z-index: 6000 !important; width: calc(100% + 10px); height: 60px; background: #231f20; box-shadow: 0 0 3px 0 rgba(0,0,0,.3); z-index: 6000; /*transition: .25s; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0px,0px,0px); transform: translate3d(0px,0px,0px);*/ } #site-nav.unshackle { transition: 0.25s; transform: translateY(-60px); -webkit-transform: translateY(-60px); } #site-nav.chrome-fix { padding-right: 8px; } /* MAIN NAVIGATION (SHELL)*/ #site-nav .nav-shell:after { content: ""; clear: both; display: table; height: 60px; } #site-nav .nav-shell { max-width: 1280px; margin: 0 auto; display: block; height: 60px; background: #231f20; padding: 0 0 0 10px; } /*TAPE - BRAND*/ #site-nav .logo-img img { display: block !important; max-height: 30px; margin: 15px 0px; } #site-nav .logo-img img:hover { opacity: 0.7; } /*TAPE - MAIN MENUS */ #site-nav .main.level-0:after { content: ""; clear: both; display: table; } #site-nav .main.level-0 { margin: 0 0 0 60px; display: inline-block !important; } #site-nav .main.level-0 > li > a { color: #fff; height: 60px; line-height: 60px; margin: 0; padding: 0 10px; font-size: 14px; text-transform: uppercase; } #site-nav .main.level-0 > li.products ul.level-1 { display: flex; } #site-nav .main.level-0 > li.products ul.level-1.chrome-fix { left: -4px; } #site-nav .level-0 > li a { position: relative } #site-nav .level-0 > li.hassub:not(:first-child) .menu-wrap > div:nth-child(2) > div { display: block; } #site-nav .level-0 > li.hassub:not(:first-child) .menu-wrap > div:nth-child(2) > div > li { margin: 0 20px 0 0; } /*TAPE - AID MENUS */ #site-nav .aid { float: right; margin: 0; display: inline-block !important; } #site-nav .aid > li { height: 60px; line-height: 60px; width: 50px; text-align: center; margin: 0; cursor: pointer; } #site-nav .aid > li:last-child { margin-right: 0; } #site-nav .aid > li > a { color: #fff; font-size: 16px; display:block;} #site-nav .aid > li > button { border: none; background: transparent; color: #fff; font-size: 16px; width: 50px; text-align: center; } #site-nav .aid > li.nav-item-menu.cart-popup span { position: absolute; display: none; right: 6px; left: auto; top: 10px; bottom: auto; min-width: 10px; padding: 2px 6px; font-size: 12px; font-weight: bold; color: #fff; line-height: 1; vertical-align: baseline; white-space: nowrap; text-align: center; background-color: #ffcb05; border-radius: 10px; } /* responsive */ @media only screen and (max-width: 1300px) { #site-nav .nav-shell { max-width: 1170px; } } @media only screen and (max-width: 1200px) { #site-nav .nav-shell { max-width: 100%; padding: 0 20px; } #site-nav .main.level-0 { margin: 0 0 0 20px;} } @media only screen and (max-width: 991px) { #site-nav { display: none; } } /* GLOBAL LEVELS STYLE */ #site-nav ul.level-1 li { display: inline-block; float: left; } #site-nav ul.level-1 .menu-wrap:after { content: ""; clear: both; display: table; } #site-nav ul.level-1 .menu-wrap { width: 1280px; margin: 0 auto; height: 100%; } #site-nav ul.level-2 .menu-wrap li { cursor: default; width: 200px; background: #fff; border: 1px solid #f9f9f9; margin: 0 0 5px 0; border-radius: 10px; height: 29px; } #site-nav ul.level-2 .menu-wrap li.hassub > a::after { content: '\f054'; font-family: 'Font Awesome 5 Pro'; position: absolute; right: 10px; top: 0; z-index: 10; font-weight: 100; } #site-nav ul.level-2 .menu-wrap li.hassub.active > a::after { color: #ffc406; font-weight: 400; } #site-nav ul.level-1 > .menu-wrap > div:nth-child(2) > div { display: flex; justify-content: space-between; } #site-nav ul.level-0 > li.products > ul > div > div > div { display: flex; justify-content: space-between; } /* responsive */ @media only screen and (max-width: 992px) { #site-nav > div > div > ul.main.level-0 > li.products.hassub.active > ul > div > div { display: flex; justify-content: space-between; } } @media only screen and (max-width: 1170px) { #site-nav ul.level-1 > .menu-wrap { padding: 0 20px; } #site-nav ul.level-1 > .menu-wrap > div:nth-child(2) > div { padding: 0 20px; } } @media only screen and (max-width: 1300px) { #site-nav ul.level-1 > .menu-wrap { max-width: 1170px; } #site-nav ul.level-2 .menu-wrap li { width: 180px; } } /* LEVEL 1 ( ICONS ) */ #site-nav ul.level-1 { display: none; position: absolute; left: 0; margin: 0; background: #fff; width: 100%; box-shadow: 0px 5px 3px -5px #0000004d; height: 80px; } #site-nav ul.level-1 img { width: 52px; display: block; margin: 0 auto 5px auto; } #site-nav ul.level-1 a { display: block; font-size: 11px; line-height: 2.5; text-align: center; padding: 0 10px; outline: 0; color: #000; } #site-nav ul.level-0 > li:not(:first-child) ul.level-1 a { line-height: 60px; font-size: 12px; } #site-nav ul.level-1 li { margin: 0; } #site-nav ul.level-0 > li > ul > div > div > div > li { padding: 10px 0 0 0; cursor: pointer; } #site-nav ul.level-1 li:last-child { margin: 0 0 30px 0; } /* LEVEL 2 */ #site-nav ul.level-2 { position: absolute; background: #fbfbfb; left: 0; margin: 0; top: 80px; width: 100%; border-top: 4px solid #f9f9f9; box-shadow: 0px 5px 3px -5px #0000004d; height: 400px; padding: 0; overflow: hidden; cursor: default; } #site-nav ul.level-2 ul { position: relative; overflow: hidden; } #site-nav ul.level-2 li { display: block; float: initial; } #site-nav ul.level-2 a { text-align: left; font-size: 12px; line-height: 27px; } #site-nav ul.level-2 > .menu-wrap { padding: 10px 0; width: 215px; position: absolute; left: 0; right: 1060px; margin: 0 auto; } #site-nav ul.level-2 > .menu-wrap > .os-scrollbar-vertical { right: 5px; } #site-nav ul.level-2 > div > div.tse-scroll-content { height: 370px !important; } /* responsive */ @media only screen and (max-width: 1300px) { #site-nav ul.level-2 > .menu-wrap { right: 955px; } #site-nav ul.level-2 > .menu-wrap { width: 195px; } #site-nav ul.level-2 > .menu-wrap .os-scrollbar-vertical { right: 4px; } #site-nav ul.level-3 .menu-wrap .os-scrollbar-vertical { right: 15px; } } @media only screen and (max-width: 1170px) { #site-nav ul.level-2 > .menu-wrap { right: initial; left: 20px; } } /* LEVEL 3 */ #site-nav ul.level-3:after { content: ""; clear: both; display: table; } #site-nav ul.level-3 .menu-wrap { position: fixed; top: 135px; left: 0; right: 660px; margin: 10px auto 0 auto; padding: 10px 10px 10px 0; width: 210px; height: 379px; background: #fbfbfb; } #site-nav ul.level-3 .menu-wrap.overflow-fix { overflow: hidden !important; } #site-nav ul.level-3 .menu-wrap .os-scrollbar-vertical { right: 15px; } #site-nav ul.level-3 > div > div.tse-scroll-content { height: 370px !important; scrollbar-color: transparent transparent; } #site-nav ul.level-3 .menu-wrap li { width: 180px; margin-left: 9px; overflow: hidden; } /* responsive */ @media only screen and (max-width: 1300px) { #site-nav ul.level-3 > .menu-wrap { right: 574px; } } @media only screen and (max-width: 1170px) { #site-nav ul.level-3 > .menu-wrap { right: initial; left: 205px; } #site-nav ul.level-3 .menu-wrap .os-scrollbar-vertical { right: 15px; } } /* LEVEL 4 */ #site-nav ul.level-4 .menu-wrap { right: 260px; } /* responsive */ @media only screen and (max-width: 1300px) { #site-nav ul.level-4 > .menu-wrap { right: 190px; } } @media only screen and (max-width: 1170px) { #site-nav ul.level-4 > .menu-wrap { right: initial; left: 393px; } } /* PRODUCT INFO */ #site-nav #product-info { display: none; transition: transform .3s; border-radius: 15px; width: 620px; border: 4px solid #f9f9f9; height: 330px; background: #fff; top: 155px; z-index: 10; position: absolute; right: 0; left: 620px; margin: 0 auto; padding: 20px; } #site-nav #product-info.extend { transition: transform .3s; width: 855px; left: 425px; padding: 0; min-height: 371px; } /* responsive */ @media only screen and (max-width: 1300px) { #site-nav #product-info { width: 530px; left: 600px; overflow: hidden; } #site-nav #product-info.extend { width: 760px; left: 410px; } } @media only screen and (max-width: 1170px) { #site-nav #product-info { width: calc(100% - 620px); margin: 0; left: 595px; } #site-nav #product-info.extend { width: calc(100% - 435px); } } /* PRODUCT INFO - ROW.TITLE*/ #site-nav #product-info .row.title h2 { font-size: 18px; font-weight: 400; margin: 0; } /* PRODUCT INFO - ROW.IMG_DESC */ #site-nav #product-info .row.img-desc h2 { font-size: 18px; font-weight: 500; margin: 0 0 20px 20px; white-space: nowrap; } #site-nav #product-info .row.img-desc img { max-height: 350px; margin: -20px 0 0px 20px; transition: transform .3s; max-width: 100%; height: auto; display: block; } #site-nav #product-info .row.img-desc img.hovered-product-img { transition: transform .3s; transform: scale(1.0); } #site-nav #product-info .row.img-desc img:hover { transition: transform .3s; transform: scale(1.0); } #site-nav #product-info .row.img-desc p#menu-product-desc { padding: 0 0 0 20px; font-size: 13px; line-height: 1.4; } #site-nav #product-info .row.img-desc .filed { padding: 0; height: 310px; position: relative; } #site-nav #product-info .row.img-desc .filed.col-md-5 { padding: 0; height: 310px; z-index: 10; } /* responsive */ @media only screen and (max-width: 1170px) { #site-nav #product-info #menu-product-desc { display: none; } #site-nav #product-info .row.img-desc .filed { position: absolute; width: calc(100% - 40px); } #site-nav #product-info .row.img-desc img { margin: 0 auto; max-width: 260px; } } /* PRODUCT INFO - ROW.DETAILS */ #site-nav #product-info .row.details { position: absolute; right: 0; bottom: 0; left: 0; } #site-nav #product-info .row.details > div { padding: 0; font-size: 13px; } #site-nav #product-info .row.details > div:last-of-type { text-align: right; } #site-nav #product-info .row.details p { display: inline-block; padding: 0 0 0 30px; } /* responsive */ @media only screen and (max-width: 1170px) { #site-nav #product-info .row.details { left: 0; } } /* VIEWPORT FOR CLICKS AND OTHER PRODUCTS */ /* VIEWPORT style for clicks */ #site-nav #product-info-clicks { display: none; height: 365px; padding: 5px 0 0 0; margin: 0; overflow: hidden; justify-content: space-around; flex-wrap: wrap; direction: rtl; } #site-nav #product-info-clicks.second::after { content: ''; flex: auto; } #site-nav #product-info-clicks > div::after { content: ""; clear: both; display: table; } #site-nav #product-info-clicks > div > div { height: 145px; display: flex; justify-content: space-around; } #site-nav #product-info-clicks img { width: auto; height: 120px; border: 2px solid #fff; } #site-nav #product-info-clicks img:hover { border-radius: 7px; border-color: #f6f6f6; } #site-nav #product-info-clicks h2 { font-size: 13px; margin: 5px 10px; padding: 0; display: inline-block; color: #a8a8a8; font-weight: 300; } #site-nav #product-info-clicks span { font-size: 13px; margin: 5px 10px; padding: 0; position: relative; z-index: 100; } #site-nav #product-info-clicks .col-md-2 { text-align: center; padding: 0px; direction: rtl; height: 153px; } #site-nav #product-info-clicks .col-md-2::after { content: ''; flex: auto; } #site-nav #product-info-clicks .col-md-2 a { position: relative; display: inline-block; margin-bottom: -5px; border-radius: 3px; } #site-nav #product-info-clicks .col-md-2 a:hover { background: rgba(35, 31, 32, 0.4); left: 0; top: 0; right: 0; bottom: 0; } #site-nav #product-info-clicks .col-md-2 a:hover:before { content: 'More Info'; position: absolute; left: 0; right: 0; top: 45%; color: #fff; font-size: 18px; font-weight: 500; text-shadow: 0px 0px 2px #363839; } #site-nav #product-info-clicks .col-md-2.placeholder { cursor: default; } #site-nav #product-info-clicks .col-md-2.placeholder a { cursor: default; } #site-nav #product-info-clicks .col-md-2.placeholder a:hover:before { content: '';} #site-nav #product-info-clicks .col-md-2.placeholder a:hover { background: transparent; cursor: default; } #site-nav #product-info-clicks .col-md-2.placeholder a:hover + span { background: transparent; border-color: transparent; } #site-nav #product-info-clicks .col-md-2.placeholder span { opacity: 0.3; cursor: default; } #site-nav #product-info-clicks .col-md-2 a:hover img { position: relative; z-index: -1; } #site-nav #product-info-clicks .col-md-2 a:hover + span { background: #ebebeb; border-top-left-radius: 0; border-top-right-radius: 0; border-color: #ebebeb; } #site-nav #product-info-clicks .col-md-2 span { display: flex; justify-content: center; font-size: 12px; margin: 0 auto; padding: 0; max-width: 120px; height: 30px; overflow: hidden; background: #fbfbfb; border: 1px solid #f9f9f9; border-radius: 3px; position: relative; z-index: 10; width: 120px; } #site-nav #product-info-clicks .col-md-2 h2 { display: block; } #site-nav #product-info-clicks .sort-click-1 { width: 100%; direction: ltr; } #site-nav #product-info-clicks .sort-click-2 { width: 100%; direction: ltr; } /* responsive */ @media only screen and (max-width: 1170px) { #site-nav #product-info-clicks .col-md-2:nth-of-type(1n+5){ display: none; } #site-nav #product-info-clicks.second .col-md-2:nth-of-type(1n+5){ display: block; } #site-nav #product-info-clicks.second .col-md-2:nth-of-type(1n+11){ display: none; } #site-nav #product-info-clicks .col-md-2 { width: initial; } } /* APPLICATION INFO */ #application-info-wrap { display: none; position: absolute; left: 0; top: 60px; right: 0; height: 460px; background: #fff; overflow: hidden; box-shadow: 0px 5px 3px -5px #0000004d; } #application-info-wrap .app-search-wrap { max-width: 1280px; margin: 0 auto; height: 60px; display: flex; align-items: center; position: relative; } #application-info-wrap #app-search { border: none; background: transparent; width: 100%; z-index: 5; padding: 25px 0 10px 0; } #application-info-wrap #app-search:focus { outline: 0; color: #3399FF; } #app-search { border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent; } #app-search ~ .focus-border { position: absolute; bottom: 10px; left: 0; width: 0; height: 1px; background-color: #ffc406; transition: 0.4s; } #app-search.focused ~ .focus-border {width: 100%; transition: 0.4s;} #app-search ~ label { position: absolute; left: 0; width: 100%; top: 20px; color: #aaa; transition: 0.3s; letter-spacing: 0.5px; margin: 0; font-weight: 400; } #app-search.focused ~ label { top: 10px; font-size: 10px; transition: 0.3s; } #application-info-wrap .reload-value { display: none; cursor: pointer; padding: 10px 0 10px 10px; width: 112px; z-index: 20; } #application-info-wrap .reload-value:hover { color: #3399FF; } #application-info-wrap .reload-value i { margin: 0 0 0 10px; padding: 0; } /* responsive */ @media only screen and (max-width: 1300px) { #application-info-wrap .app-search-wrap { max-width: 1170px; } #application-info-wrap #application-info { max-width: 1170px; margin: 0 auto; } } @media only screen and (max-width: 1200px) { #app-search ~ label { max-width: 100%; padding: 0 20px; } #application-info-wrap .app-search-wrap { max-width: 100%; padding: 0 20px; } #application-info-wrap #application-info { max-width: 100%; padding: 0 20px; } } #application-info-container { position: relative; width: 100%; height: calc(100% - 80px); background: #fbfbfb; padding: 10px 0; border-top: 4px solid #f9f9f9; } #application-info { height: 100%; width: 1280px; margin: 0 auto; padding: 0 21px 0 0; } #application-info ul { width: 100%; height: auto; margin: 0; overflow: initial; } #application-info ul div.tse-scrollbar { top: -4px; right: -15px; bottom: 4px; } #application-info ul div.tse-scrollbar div.drag-handle { opacity: 0.7; } #application-info ul div.tse-scroll-content { width: 100% !important; height: 370px !important; } #application-info ul div.tse-scroll-content > div { display: flex; justify-content: space-between; /*flex-flow: row wrap;*/ flex-wrap: wrap; flex-direction: column; margin: 0 -8px 0 -8px; height: 600px;} #application-info ul div.tse-scroll-content div::after { content: ''; flex: auto; } #application-info ul div div a { width: 200px; background: #fff; border: 1px solid #f9f9f9; margin: 0 8px 5px 8px; border-radius: 10px; } #application-info ul div div a li { font-size: 12px; line-height: 2.3; padding: 0 10px; } #application-info ul div div a li i { position: relative; top: 0; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 12px; float: right; color: #ccc; font-style: normal; } /*more click*/ #site-nav #menu-product-more.more-click { float: right; padding: 0; margin: 5px 5px 0 0; } #site-nav #menu-product-more.more-category { position: absolute; z-index: 10; padding: 0; margin: 5px 5px 0 0; right: 0; } #site-nav #menu-product-more.more-category i { position: relative; float: left; margin: 3px 0 0 10px; } #site-nav .sort-click-2 #menu-product-more.more-click { display: none } #menu-product-more.rounded.more-click::before { width: 10%; min-width: 28px; } #site-nav #product-info-clicks .row { width: 100%; height: 12px; margin: 0; } /* VIEWPORT style for other products */ #site-nav #product-info-other { display: block; } /* AJAX LOADER */ #ajax-loader { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; text-align: center; font-size: 50px; color: #363839; padding: 150px 0; z-index: 15; } #ajax-loader-application { display: none; position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; background: #fff; text-align: center; font-size: 50px; color: #363839; padding: 205px 0; z-index: 15; } /* NAVMASK */ #navmask { display: none; } #navmask.active { display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(54, 56, 57, 0.7); z-index: 5000; } /* responsive */ @media only screen and (max-width: 991px) { #navmask.active { display: none; } } /* Djole : added hover to application links */ #application-info ul div div a { box-shadow: none; -moz-transition: box-shadow 0.3s ease-out; -webkit-transition: box-shadow 0.3s ease-out; -o-transition: box-shadow 0.3s ease-out; -ms-transition: box-shadow 0.3s ease-out; transition: box-shadow 0.3s ease-out; } #application-info ul div div a:hover { box-shadow: inset 200px 0 3px #ebebeb !important; } /* SEARCH */ #site-nav #instant-search-popup .search-wrap:after { content: ""; clear: both; display: table; } #site-nav #instant-search-popup { display: inline-block !important; float: right; width: calc(100% - 975px); } #site-nav #instant-search-popup #me-gn-label-input { background: #231f20; margin: 0; float: right; transform: skewX(-20deg); padding: 0 10px; transition: width .25s; width: 175px; } #site-nav #instant-search-popup #me-gn-label-input.focused { transition: width .25s; width: calc( 100% - 100px); } #site-nav #instant-search-popup #me-gn-label-input:focus-within { background: #231f20; } #site-nav #instant-search-popup #me-gn-instantsearch-input { border: none; height: 60px; margin: 0; color:#fff; background: #231f20; padding: 0; float: right; transition: width .25s; transform: translate3d(0,0,0) skewX(20deg); width: calc(100% - 25px); padding: 0 0 0 20px; position: absolute; right: -20px; font-size: 13px; } #site-nav #instant-search-popup #me-gn-instantsearch-input::placeholder { color: #ffcb05; } #site-nav #instant-search-popup #me-gn-instantsearch-input:focus { outline: none; transition: width .25s; background: #363839; height: 60px; box-shadow: inset 0.5px 0 2px #000000; } #site-nav #instant-search-popup .search-btn { background: #231f20; height: 60px; width: 50px; margin: 0; float: right; transform: skewX(-20deg); border: none; color: #ffcb05; border-left: 2px solid #ffcb05; position: relative; z-index: 10; outline: 0; cursor: pointer; } #site-nav #instant-search-popup .search-btn i { font-size: 16px; } #site-nav #instant-search-popup.extended .search-btn i { font-size: 18px; font-weight: 400; } #site-nav #instant-search-popup .search-btn:hover {color: #ffcb05; } #site-nav #instant-search-popup .search-btn .search-spinner-icon-wrapper{ transform: skewX(20deg) !important; } /* responsive */ @media only screen and (max-width: 1200px){ #site-nav #instant-search-popup { width: calc(100% - 755px);} } @media only screen and (max-width: 1040px){ #site-nav #instant-search-popup #me-gn-label-input { width: 130px; } #site-nav #instant-search-popup #me-gn-instantsearch-input { padding: 0 0 0 10px; } #site-nav #instant-search-popup #me-gn-label-input.focused { width: calc( 100% - 70px); } } /* mobile */ #instant-search-popup-mobile { position: fixed; z-index: 9999; background: #888; height: 60px; width: 100%; } #instant-search-popup-mobile.active { display: block !important; } #instant-search-popup-mobile { height: 60px; } #instant-search-popup-mobile #me-gn-label-input { width: calc(100% - 120px); position: absolute; margin: 0; } #instant-search-popup-mobile #me-gn-instantsearch-input-mobile { border: none; height: 60px; background: #888888; color: #fff; } #instant-search-popup-mobile #me-gn-instantsearch-input-mobile:focus{ outline: none; margin: 0; } #instant-search-popup-mobile #me-gn-instantsearch-input-mobile::placeholder{ color: #fff;} #instant-search-popup-mobile #main_search-mobile button { height: 60px; width: 60px; border: none; background: #888888; font-size: 20px; color: #fff; } #instant-search-popup-mobile #main_search-mobile button i { color: #fec805; } #instant-search-popup-mobile #close-search { position: absolute; height: 60px; right: 0; width: 60px; border: none; background: #888888; font-size: 20px; color: #fff; } #instant-search-popup-mobile #close-search:before { width: 60px; height: 60px; background: #fec805; position: absolute; text-align: center; line-height: 60px; right: 0; top: 0; } #instant-search-popup-mobile #close-search:before { content: url(https://cdn.mikroe.com/icons/close-regular-x20.png); font-size: 32px; } /* responsive */ @media only screen and (min-width: 992px){ #instant-search-popup-mobile { display: none !important; } } /* #instant-search-popup { display: block !important; position: fixed; right: 170px; top: 0; height: 60px; z-index: 6000; width: 250px; transition: .25s; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0px,0px,0px); transform: translate3d(0px,0px,0px); } #instant-search-popup.unshackle { transition: 0.25s; transform: translateY(-60px); -webkit-transform: translateY(-60px); } #instant-search-popup #me-gn-label-input { background: #231f20; margin: 0; float: right; transform: skewX(-20deg); padding: 0 10px; transition: .25s; width: 200px; } #instant-search-popup #me-gn-label-input.focused { transition: width .25s; width: calc( 100% - 50px); } #instant-search-popup #me-gn-label-input:focus-within { background: #231f20; } #instant-search-popup #me-gn-instantsearch-input { border: none; height: 60px; margin: 0; color:#fff; background: #231f20; padding: 0; float: right; transition: width .25s; transform: translate3d(0,0,0) skewX(20deg); width: 100%; padding: 0 0 0 20px; position: absolute; right: -20px; } #instant-search-popup #me-gn-instantsearch-input::placeholder { color: #ffcb05; } #instant-search-popup #me-gn-instantsearch-input:focus { outline: none; transition: width .25s; background: #363839; height: 60px; box-shadow: inset 0.5px 0 2px #000000; } #instant-search-popup .search-btn { background: #231f20; height: 60px; width: 50px; margin: 0; float: right; transform: skewX(-20deg); border: none; color: #ffcb05; border-left: 2px solid #ffcb05; position: relative; z-index: 10; } #instant-search-popup .search-btn i { font-size: 16px; } #instant-search-popup .search-btn:hover { color: #ffcb05; } #instant-search-popup .search-btn .search-spinner-icon-wrapper{ transform: skewX(20deg) !important; } /* responsive */ /*@media only screen and (min-width: 1200px){ #instant-search-popup { left: 617px; right: 0; margin: 0 auto; } #instant-search-popup.extended { left: 0; right: 163px; margin: 0 auto; width: 1030px; } } /* responsive */ /*@media only screen and (min-width: 1300px){ #instant-search-popup { left: 730px; } #instant-search-popup.extended { right: 169px; width: 1149px; } } /* BREADCRUMB */ #header #breadcrumb { display: none; height: 25px; background: #dedede; line-height: 25px; position: fixed; width: 100%; padding: 0 18px; box-shadow: 0 0 3px 0 rgba(0,0,0,.3) ; transition: .25s; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0px,0px,0px); transform: translate3d(0px,0px,0px); } @media only screen and (min-width: 900px){ .module-prestablog-blog #header #breadcrumb { display: block; } .category #header #breadcrumb { display: block; } .product #header #breadcrumb { display: block; top: 60px;} #header #breadcrumb.unshackle { transition: 0.25s; transform: translateY(-60px); -webkit-transform: translateY(-60px); } #header #breadcrumb .breadcrumb-item { padding: 4px 10px; font-size: 13px; cursor: pointer; } #header #breadcrumb .breadcrumb-item:hover { opacity: 0.5; } #header #breadcrumb .breadcrumb-item.active a:hover { opacity: 0.5; } #header #breadcrumb .breadcrumb-item:first-of-type { padding-left: 0; } #header #breadcrumb .breadcrumb-custom-divider { border-right: 1px solid #999; height: 25px; transform: skew(-20deg); position: absolute; } } @media only screen and (min-width: 1201px){ #header #breadcrumb { padding: 0; } #header #breadcrumb .breadcrumb-wrapper { max-width: 1170px; margin: 0 auto; } } @media only screen and (min-width: 1301px){ #header #breadcrumb .breadcrumb-wrapper { max-width: 1280px; } } /* footer aid nav */ #bottom-nav { display: block !important; } #bottom-nav.unshackle { position: fixed; display: block; background: transparent; z-index: 5050; bottom: 0; width: 100%; box-shadow: 0 0px 5px rgba(0,0,0,.2); -webkit-transform: translateY(0); transform: translateY(0); transition: .5s; } #bottom-nav.shackle { -webkit-transform: translateY(110%); transform: translateY(110%); transition: .5s; } #bottom-nav .bottom-nav-wrapp { background: #fff; } #bottom-nav ul { display: flex; margin: 0; } #bottom-nav li { flex: 1; height: 50px; text-align: center; border-right: 1px solid #eee; position: relative; } #bottom-nav li:active { background: #ebb705; } #bottom-nav li:last-child { border-right: none; } #bottom-nav li:last-child a { font-size: 14px; font-weight: 400; } #bottom-nav li i { padding: 13px 13px; color: #231F20; font-size: 24px; left: 0; right: 0; margin: 0 auto; position: absolute; width: 100%; } #bottom-nav li.active { background: #ffcb05; } #bottom-nav li.active i { font-weight: 500; } @media screen and (min-width: 992px) { #bottom-nav { display: none !important; } #site-nav .logo.mob-cat { margin: 0; } } @media (max-width: 490px) { #bottom-nav { max-height: 100%; transition: max-height .5s ease-in; } } /* USER AUTHENTICATION MENU */ #user-acc-popup { position: fixed; width: 100%; height: 100%; transform: translateY(-20px); } #user-acc-popup.show-acc { display: block !important; z-index: 6000; transform: translateY(0); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); overflow: hidden; } #user-acc-popup .user-acc-wrap { display: none; position: relative; float: right; width: 100%; height: 100%; background: #fff; box-shadow: 0 0px 5px rgba(0,0,0,.2); overflow: hidden; } #user-acc-popup.show-acc .user-acc-wrap { display: block; } /* #user-acc-popup.scroll-hide { transform: translateY(-700px); opacity: 0; transition: opacity 0.15s cubic-bezier(0.19, 1, 0.22, 1); } */ #user-acc-popup .user-acc-header { height: 60px; background: #888888; box-shadow: 0 0px 5px rgba(0,0,0,.2); } #user-acc-popup .user-acc-header span { line-height: 60px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #fff; text-align: center; width: calc(100% - 30px); position: absolute; } #user-acc-popup .acc-mob-close { width: 60px; height: 60px; position: absolute; border: none; right: 0; background: #ffcb05; } #user-acc-popup .acc-mob-close i { font-size: 32px; } /* user login in */ #user-acc-popup.logged-in { height:100%; } #user-acc-popup.logged-in .my-account-header { padding: 0; height: 60px; background: #888888; position: relative; box-shadow: 0 0px 5px rgba(0,0,0,.2); } #user-acc-popup.logged-in .my-account-avatar { padding: 8px 8px 8px 25px; } #user-acc-popup.logged-in .my-account-avatar img { background: #fff; } #user-acc-popup.logged-in .my-account-name-title { margin: 0; } #user-acc-popup.logged-in .my-account-name-title h1 { font-size: 14px; font-weight: 600; color: #fff; line-height: 60px; } #user-acc-popup.logged-in .my-account-container { padding: 0; height: 100%; } #user-acc-popup.logged-in .my-account-nav-container { height: calc(100% - 118px); overflow: auto;} #user-acc-popup.logged-in .my-account-nav-container .my-account-nav { margin-bottom:0px;} #user-acc-popup.logged-in .my-account-buttons { box-shadow: 0 0px 5px rgba(0,0,0,.2); } #user-acc-popup .acc-mobile { height: 60px; background: #888888; text-align: center; line-height: 60px; font-size: 14px; text-transform: uppercase; color: #fff; font-weight: 600; } #user-acc-popup .acc-mobile button { background: #ffcb05; border: none; width: 60px; height: 60px; position: absolute; right: 0; } #user-acc-popup .acc-mobile button:before { content: url(https://cdn.mikroe.com/icons/close-regular-x20.png); font-size: 32px; } /* responsive */ @media screen and (min-width: 992px) { #user-acc-popup .acc-mobile { display: none; } #bottom-nav { display: none !important; } #site-nav .logo.mob-cat { margin: 0; } } /* LOGIN AUTH START*/ #auth-login-container { height: calc(100% - 60px); } #auth-login-container #login_form .form-group { position: relative; margin: 0 auto 25px; max-width: 350px; } #auth-login-container #login_form .form-group .auth-form-input-icon { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); font-size: 20px; } #auth-login-container #login_form .form-group .form-control label { font-weight: 400; display: block; } #auth-login-container #login_form .form-group .form-control { max-width: 350px; border-style: none none solid none; border-radius: 0%; background-color: #fff !important; box-shadow: none !important; margin: 0 0 12px 0; padding-left: 25px; } #auth-login-container #login_form .auth-form-lost-password { font-weight: 400; text-align: right; font-size: 14px; line-height: 60px; } #auth-login-container #login_form .auth-form-lost-password a:hover { transition: all 0.3s ease-in-out; color: #ffcb05 !important; text-decoration: none; } #auth-login-container #login_form .auth-form-buttons { display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 410px; overflow: hidden; max-height: 60px; transition: none !important; } #auth-login-container #login_form .auth-form-button-wrapper { width: 50%; } #auth-login-container #login_form .auth-form-button-wrapper button { width: 100%; height: 60px; border-radius: 0px; color: #231f20; font-weight: 500; text-transform: uppercase; transition: all 0.3s ease-in-out; } #auth-login-container #login_form .auth-form-button-wrapper #auth-form-signup-btn { border-color: #231F20; background: #231F20; color: #fff; } #auth-login-container #login_form .auth-form-button-wrapper #auth-form-signup-btn:hover { background: #000; } #auth-login-container .auth-form-wrapper { height: calc(100% - 60px); } #auth-login-container #login_form .auth-form-content { padding: 20px; height: calc(100% - 120px); } #auth-login-container form { height: 100% } #user-acc-popup #auth-login-container h2 { line-height: 60px; font-size: 16px; text-align: center; font-weight: 400; margin: 0; } #auth-login-container #login_form .auth-form-buttons .auth-form-button-wrapper #auth-form-signup-btn { height: 60px; } #auth-login-container #login_form .auth-form-buttons .auth-form-button-wrapper button { height: 60px; } /* responsive */ @media screen and (max-width: 992px) { #user-acc-popup #auth-login-container h2 { opacity: 0; } } @media screen and (min-width: 991px) { #auth-login-container #login_form .auth-form-content { height: calc(100% - 120px); } } @media screen and (max-width: 490px) { #auth-login-container #login_form .auth-form-buttons{ width:100%; max-width:100%; } #auth-login-container #login_form .auth-form-content { height: calc(100% - 60px); } } @media screen and (min-width: 490px) { /* IE Support */ #user-acc-popup { top: auto; } #user-acc-popup { right: 0; bottom: 50px; top: initial; width: 360px; height: 640px; } #auth-login-container { height: calc(100% - 60px); } #auth-login-container form { height: 100% !important; } #auth-login-container .auth-form-wrapper { height: 100%; } /* user login in */ #user-acc-popup.logged-in { height: 640px; } } @media screen and (min-width: 992px) { #user-acc-popup { width: 360px; height: 360px; z-index: -1; right: 20px; top: 60px; } #user-acc-popup.show-acc { width: 360px; height: 360px; z-index: 6000; box-shadow: 0px 0px 3px 0px #0000004d; } #user-acc-popup .user-acc-header { display: none; } #auth-login-container { height: 100%; } #user-acc-popup #auth-login-container h2 { font-size: 14px; text-transform: uppercase; font-weight: 600; background: #f1f1f1; box-shadow: 0 0px 5px rgba(0,0,0,.2); } #auth-login-container #login_form .form-group { margin: 0 auto 30px; } #auth-login-container #login_form .auth-form-content { padding: 40px 20px 0 20px; } #auth-login-container #login_form .auth-form-lost-password { line-height: 2; margin: 0 auto; } /* IE Support */ #user-acc-popup.logged-in .my-account-nav-container { overflow: visible; } #user-acc-popup.logged-in .my-account-nav-container { overflow: initial; } /* user login in */ #user-acc-popup.logged-in { height: 640px; height: 480px !important; z-index: -1; } #user-acc-popup.logged-in.show-acc { z-index: 5000; } #user-acc-popup.logged-in .acc-mob-close { display: none; } #user-acc-popup.logged-in .my-account-header { background: #f1f1f1; } #user-acc-popup.logged-in .my-account-name-title h1 { color: #231f20; } #user-acc-popup.logged-in .my-account-nav-item-link { padding: 14px 25px; } } @media screen and (min-width: 1200px) { #user-acc-popup { left: 810px; right: 0; margin: 0 auto; } } @media screen and (min-width: 1300px) { #user-acc-popup { left: 920px; } } /* USER AUTHENTICATION MENU END */ li.our-messenger { pointer-events: none; } /* cart tab */ #cart { position: fixed; width: 100%; height: 100%; transform: translateY(-20px); } #cart.show-cart { display: block !important; z-index: 6000; transform: translateY(0); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } /* #cart.scroll-hide { transform: translateY(-700px); } */ #cart a { outline: 0; text-decoration: none; } #cart .cart-wrapper { display: none; position: relative; float: right; width: 100%; height: 100%; background: #fff; box-shadow: 0 0px 5px rgba(0,0,0,.2); overflow: hidden; } #cart .cart-wrapper.show-cart-wrap { display: block; } #cart .cart-body-wrapper { height: calc(100% - 282px); overflow-y:scroll; width: 100%;} /* cart tab - cart-header */ #cart .cart-header { height: 120px; background: #f1f1f1; z-index: 10; position: relative; box-shadow: 0 0px 5px rgba(0,0,0,.2); } #cart .cart-header > div { color: #58595B; text-align: center; } #cart .cart-header a { line-height: 60px; font-size: 16px; } #cart .cart-header p { line-height: 60px; font-size: 14px; font-weight: 600; text-transform: uppercase; margin: 0; } #cart .cart-header a:hover { opacity: 0.5; } #cart .cart-header .cart-top { height: 60px; width: 60px; float: right; } #cart .cart-header .cart-top .cart-mob-close { width: 60px; height: 60px; position: absolute; border: none; right: 0; background: #ffcb05; z-index: 10; } #cart .cart-header .cart-top .cart-mob-close i { font-size: 32px; } #cart .cart-header .empty-cart { width: 100%; float: left; } #cart .cart-header .item-cart { position: absolute; top: 0; width: calc(100% - 60px); background: #888888; color: #fff; box-shadow: 0 0px 5px rgba(0,0,0,.2) } /* cart tab - cart - body */ #cart .cart-body-wrapper .cart-body-empty { position: absolute; top: 80px; left: 0; right: 0; text-align: center; font-size: 16px; line-height: 80px; } #cart .cart-body { overflow: auto; height: 102px; border: 1px solid #fff; border-bottom: 1px solid #dedede; } #cart .cart-body:first-child { border-top: 1px solid #fff; } #cart .cart-body:last-child { border-bottom: 1px solid #fff; } #cart .cart-body::after { content: ""; clear: both; display: table; } #cart .cart-body > div { width: 50%; float: left; } #cart .cart-body > div > div { float: left; } #cart .cart-body > div > div.delete-img { width: 65%; } #cart .cart-body > div > div.delete-img img { max-width: 70px; } #cart .cart-body > div > div.title-price { width: 35%; } #cart .cart-body .right-sec > div { display: inline-block; float: left; width: auto; } /* cart tab - cart-body - left sec*/ #cart .cart-body .left-sec .delete-img button { border: none; background: transparent; color: #cecece; width: 30px; height: 100px; display: inline-block; float: left; } #cart .cart-body .left-sec .delete-img button i { font-size: 22px; width: 20px; float: right; } #cart .cart-body .title-price > div { height: 50px; position: relative; } #cart .cart-body .product-name:before, #cart .cart-body .product-name:after { display: table; content: " "; clear: both; } #cart .cart-body .product-name p { position: relative; font-size: 12px; font-weight: 500; top: 70px; right: 55px; line-height: 1; min-width: 100px; margin: 0;font-family: 'Montserrat',Arial,Helvetica, sans-serif; } #cart .cart-body .per-piece:before, #cart .cart-body .per-piece:after { display: table; content: " "; clear: both; } #cart .cart-body .per-piece span { line-height: 1; font-size: 14px; color: #231f20; position: relative; bottom: 27px; float: right; right: 5px; font-weight: 500; } #cart .cart-body .per-piece span.old { color: #a0a0a0; text-decoration: line-through; text-decoration-color: #58595b; position: absolute; bottom: 80px; right: 5px; font-size: 12px; } /* cart tab - cart-body - right sec*/ #cart .cart-body .right-sec { height: 100px; line-height: 99px; position: relative; padding-right: 5px; } #cart .cart-body .right-sec input { width: 55px; height: 40px; text-align: center; font-size: 14px; margin: 5px auto; display: block; border: 1px solid #e2e2e2; } #cart .cart-body .right-sec input:focus { outline: 0; } #cart .cart-body .right-sec input[type=number]::-webkit-inner-spin-button, #cart .cart-body .right-sec input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #cart .cart-body .right-sec .multiplication { width: 15%; float: left; text-align: center; } #cart .cart-body .right-sec .multiplication i { transform: scale(1.4, 2); font-size: 9px; color: #58595b; position: relative; left: 0; font-weight: 100; bottom: 22px; } #cart .cart-body .right-sec .imput-num-wrap { width: 131.75px; margin: 0 auto; display: block; position: relative; bottom: -5px; } #cart .cart-body .right-sec .imput-num { width: 85%; height: 50px; overflow: hidden; } #cart .cart-body .right-sec .imput-num a { width: 40px; height: 40px; position: absolute; bottom: 0; padding: 0; margin: 0; } #cart .cart-body .right-sec .imput-num a.button-minus { left: 0 } #cart .cart-body .right-sec .imput-num a.button-plus { right: 0 } #cart .cart-body .right-sec .imput-num a i { position: absolute; width: 40px; height: 40px; color: #fff; } #cart .cart-body .right-sec .imput-num a i:before { background: #e2e2e2; font-size: 18px; padding: 0 0 0 0; width: 40px; position: absolute; height: 40px; text-align: center; line-height: 40px; } #cart .cart-body .right-sec .imput-num a:active + #cart .cart-body .right-sec input { border: 1px solid #cecece; } /* IE & Safari Support */ #cart .cart-body .right-sec .imput-num .input_qty { line-height: normal; } #cart .cart-body .right-sec .multiply-price { width: 85%; height: 50px; overflow: visible; position: relative; } #cart .cart-body .right-sec .multiply-price span { font-size: 18px; font-weight: 500; position: absolute; line-height: 50px; text-align: center; width: 100%; } /* cart tab - width focus class*/ #cart .cart-body.focus { border: 1px solid #ffcb05; } #cart .cart-body.focus .per-piece span.old { text-decoration-color: #ffcb05; } #cart .cart-body.focus .right-sec .imput-num a i:before { background: #ffcb05; } #cart .cart-body.focus .right-sec .imput-num a:hover i:before { background: #ebb705; } #cart .cart-body.focus .right-sec .imput-num a:active i:before { font-weight: 400; } #cart .cart-body.focus .right-sec .imput-num .input_qty:focus { border-color :#FFCB05; } #cart .cart-body.focus .left-sec .delete-img button:hover { color: #231f20; } #cart .cart-body.focus .left-sec .delete-img button:hover i { font-weight: 900; } /* cart tab - cart-footer */ #cart .cart-footer { overflow: auto; box-shadow: 0 0px 5px rgba(0,0,0,.2); } #cart .cart-footer > div:before, #cart .cart-footer > div:after { display: table; content: " "; } #cart .cart-footer > div:after { clear: both; } #cart .cart-footer .top-sec { background: #888888; } #cart .cart-footer .top-sec > span { width: 50%; float: left; line-height: 54px; font-size: 18px; color: #fff;} #cart .cart-footer .top-sec .info-total { text-align: center; } #cart .cart-footer .top-sec .price-total { text-align: center; font-weight: 500; } #cart .cart-footer .bottom-sec { display: flex; } #cart .cart-footer .bottom-sec a { flex: 1; line-height: 60px; text-align: center; text-transform: uppercase; font-size: 14px; } #cart .cart-footer .bottom-sec a.btn-cart { background: #231F20; color: #fff; } #cart .cart-footer .bottom-sec a.btn-cart:hover { background: #000; } #cart .cart-footer .bottom-sec a.btn-checkout { background: #FFCB05; color: #231F20; } #cart .cart-footer .bottom-sec a.btn-checkout:hover { background: #ebb705; } /* cart - dinari*/ #cart.dinari .top-sec.din span { color: #231f20; } #cart.dinari .top-sec.din { background: #f1f1f1; } #cart.dinari .top-sec .info-total { width: 35%; } #cart.dinari .top-sec .tax-total, #cart.dinari .top-sec .price-total { width: 65%; } #cart.dinari .top-sec .info-total { text-align: left; padding-left: 20px; } #cart.dinari .top-sec span.tax-total, #cart.dinari .top-sec span.price-total { text-align: right; padding-right: 20px; transform: scale(0.9, 1); font-size: 16px; } #cart.dinari .cart-body-wrapper { height: calc(100% - 290px); } #cart.dinari .cart-body .left-sec { width: 60%; } #cart.dinari .cart-body .right-sec { width: 40%; } #cart.dinari .right-sec .imput-num-wrap { width: 105px; bottom: -10px; } #cart.dinari .right-sec .imput-num a { width: 35px; height: 35px; } #cart.dinari .right-sec .imput-num a i { width: 35px; height: 35px; } #cart.dinari .right-sec .imput-num a i:before { width: 35px; height: 35px; } #cart.dinari .right-sec .multiplication { text-align: left; } #cart.dinari .right-sec input { height: 35px; } #cart.dinari .right-sec .multiplication i { bottom: 17px; } #cart.dinari .right-sec .multiply-price span { font-size: 15px; text-align: right; transform: scale(0.9, 1); position: absolute; width: 116px; left: -6px; white-space: nowrap; } #cart.dinari .left-sec .per-piece span { transform: scale(0.9, 1); font-size: 13px; min-width: 100px; text-align: right; } #cart.dinari .left-sec .per-piece span.current { bottom: 23px; min-width: 100px; } #cart.dinari .left-sec .per-piece span.old { bottom: 75px; font-size: 12px; } /* IE Support */ #cart.dinari .left-sec .product-name p { right: auto; } #cart.dinari .left-sec .product-name p { position: absolute; right: initial; left: -85px; min-width: 180px; } /* cart responsive code - mobile first*/ @media screen and (min-width: 360px) { #cart .cart-body > div > div.delete-img img { float: right; max-width: initial; } #cart .cart-body .per-piece span { font-size: 16px; } #cart .cart-body .per-piece span.old { bottom: 50px; font-size: 13px; } #cart .cart-body .right-sec .multiplication { text-align: right; } #cart .cart-body .product-name p { top: 80px; right: 80px; width: 250%; } /* dinari */ #cart.dinari .cart-body .left-sec { width: 55%; } #cart.dinari .cart-body .right-sec { width: 45%; } #cart.dinari .left-sec .per-piece span { right: -5px; } #cart.dinari .delete-img img { padding-right: 10px; } #cart.dinari .right-sec .multiply-price span { width: 148px; left: -8px; padding-right: 15px; } } @media screen and (min-width: 490px) { #cart { width: 360px; height: 640px; right: 0; bottom: 50px; } #cart .cart-body-wrapper { height: calc(100% - 232px); } #cart.dinari .cart-body-wrapper { height: calc(100% - 288px); } } @media screen and (min-width: 900px) { #cart { height: 478px; right: 20px; top: 60px; z-index: -1 !important; } #cart.show-cart { z-index: 6000 !important; } #cart .cart-body { overflow: hidden; } #cart .cart-body-wrapper { height: calc(100% - 172px); } #cart .cart-header { height: 60px; } #cart .cart-header .cart-top { display: none; } #cart .cart-header .empty-cart { width: 50%; float: left; } #cart .cart-header .empty-cart a { width: 100%; } #cart .cart-header .item-cart { position: relative; width: 50%; box-shadow: none; float: right; background: #f1f1f1; color: #231f20; height: 59px; } #cart .cart-body .left-sec { width: 60%; } #cart .cart-body .right-sec { width: 40%; padding: 0; } #cart .cart-body .right-sec .imput-num a.button-minus { left: 19px; bottom: 7px; z-index: 10; } #cart .cart-body .right-sec .imput-num a.button-plus { right: 9px; bottom: 7px; } #cart .cart-body .right-sec .imput-num a { width: 25px; height: 25px; border-radius: 5px; overflow: hidden; } #cart .cart-body .right-sec .imput-num a i { width: 25px; height: 25px; z-index: 10; } #cart .cart-body .right-sec .imput-num a i:before { width: 25px; height: 25px; line-height: 25px; } #cart .cart-body .right-sec .imput-num { height: 60px; } #cart .cart-body .right-sec .multiply-price { height: 40px; } #cart .cart-body .right-sec .multiply-price span { line-height: 40px; left: 5px; } #cart .cart-body .per-piece span.old { bottom: 75px; } #cart .cart-body .right-sec input { width: 70px; margin: 15px auto 0 auto; left: 5px; position: relative; } #cart .cart-body .right-sec .imput-num-wrap { width: 100%; } #cart .cart-body .per-piece span { bottom: 22px; } #cart .cart-body .right-sec .multiplication i { bottom: 16px; } #cart .cart-body .left-sec .delete-img button { width: 40px; } /* IE Support */ #cart .cart-body .left-sec .delete-img button i { float: none; } #cart .cart-body .left-sec .delete-img button i { float: initial; } #cart .cart-body .product-name p, #cart .cart-body .per-piece span, #cart .cart-body .right-sec .multiplication i, #cart .cart-body .right-sec .multiply-price span { cursor: default; } #cart .cart-body .left-sec .delete-img button:hover {background: #e2e2e2; } #cart .cart-footer .bottom-sec { background: #231f20; } #cart .cart-header p, #cart .cart-footer .top-sec span { cursor: default; } #cart .cart-body .right-sec .multiply-price span { line-height: 2; left: 0; padding: 0; padding-left: 10px; } /* dinari */ #cart.dinari .cart-header .empty-cart { width: 40%; } #cart.dinari .cart-header .empty-cart a { width: 100%; } #cart.dinari .cart-header .item-cart { width: 60%; } #cart.dinari .right-sec input { margin: 5px auto 0 auto; } #cart.dinari .right-sec .imput-num a.button-plus { right: 12px; bottom: 5px; } #cart.dinari .right-sec .imput-num a.button-minus { left: 22px; bottom: 5px; } #cart.dinari .right-sec .multiplication { width: 20%; } #cart.dinari .right-sec .imput-num { width: 80%; } #cart.dinari .right-sec .multiply-price { width: 80%; } #cart.dinari .cart-body-wrapper { height: calc(100% - 228px); } #cart.dinari .delete-img img { padding: 0; } #cart.dinari .right-sec .multiply-price span { left: -27px; padding-left: 0; } } @media screen and (min-width: 1200px) { #cart { left: 810px; right: 0; margin: 0 auto; } } @media screen and (min-width: 1300px) { #cart { left: 920px; } } /* KAYAKO MESSENGER *//* KAYAKO MESSENGER *//* KAYAKO MESSENGER *//* KAYAKO MESSENGER *//* KAYAKO MESSENGER *//* KAYAKO MESSENGER *//* KAYAKO MESSENGER *//* KAYAKO MESSENGER *//* KAYAKO MESSENGER */ #kayako-messenger { width: 100% !important; height:100% !important; z-index: 6000 !important; bottom: 70px !important; top: -20px; transform: translateY(0); } #kayako-messenger.show-kayako-popup { transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important; transform: translateY(20px); box-shadow: 0 0px 5px rgba(0,0,0,.2); z-index: 6000 !important; } /* #kayako-messenger.hide-in-menu-on-scroll { transform: translateY(-700px); transition: 0.25s; display: none; z-index: -1 !important; opacity: 0; } */ @media screen and (min-width: 490px){ /* IE Support */ #kayako-messenger { top: auto;} #kayako-messenger { width: 360px !important; height: 640px !important; top: initial;} } @media screen and (min-width: 900px){ #kayako-messenger { width: 360px !important; height: 460px !important; z-index: -1 !important; top: 60px; right: 20px !important; } #kayako-messenger.show-kayako-popup { z-index: 5000 !important; top: 40px; } } @media screen and (min-width: 1200px){ #kayako-messenger { left: 811px !important; } #kayako-messenger { height: 440px !important; left: 820px; right: 0 !important; margin: 0 auto; } } @media screen and (min-width: 1300px) { #kayako-messenger { left: 920px !important; } } /* KAYAKO MESSENGER end*//* KAYAKO MESSENGER end*//* KAYAKO MESSENGER end*//* KAYAKO MESSENGER end*//* KAYAKO MESSENGER end*//* KAYAKO MESSENGER end*//* KAYAKO MESSENGER end*//* KAYAKO MESSENGER end*/ #page.hide-bg-for-popup { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #page.hide-bg-for-popup > div { display: none;} #page.hide-bg-for-popup footer { display: none;} .onKeyboardOnOffHide { transition: max-height .25s ease-in !important; max-height: 0 !important; } /* ( UNDERLINE ON HOVER) */ /* DEFINES ELEMENT*/ .main.level-0 li a.name, #site-nav .aid > li, #application-info > ul > div > div > a { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } /* LEVEL 0 - DEFINES FBEFORE ON ELEMENT - FROM MIDDLE */ .main.level-0 li a.name::before, #site-nav .aid > li::before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background: #ffc406; height: 4px; border-radius: 10px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } /* LEVEL 1 - DEFINES F:BEFORE ON ELEMENT - FROM LEFT TO RIGHT */ .level-2 .menu-wrap li a.name::before, #application-info > ul > div > div > a::before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: rgba(54, 56, 57, 0.10196078431372549); height: 27px; /*background: #ffc406; height: 4px;*/ -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } /* STAY ON HOVER */ .main.level-0 li:hover > a.name::before, #site-nav .aid > li:hover::before, #application-info > ul > div > div > a:hover::before { left: 0; right: 0; } /* IF IS ACTIVE - STAY COLORED */ .main.level-0 li.active > a.name::before, #site-nav .aid > li.active::before{ left: 0; right: 0; } #menu-product-more { margin: -5px auto 0 auto; border: none; padding: 5px 15px 5px 10px; font-size: 13px; position: relative; box-shadow: none; } #menu-product-more::before { transition: all 0.30s cubic-bezier(0.68, -0.55, 0.265, 1.55); content: ""; width: 50%; height: 100%; background: black; position: absolute; top: 0; left: 0; } #menu-product-more:hover::before { background: black; width: 100%; } #menu-product-more.rounded { border-radius: 50px; } #menu-product-more.rounded .text-green { color: #000; mix-blend-mode: darken; } #menu-product-more.rounded .text-green i { margin-right: 10px; } #menu-product-more.rounded::before { border-radius: 50px; width: 25%; background: #ffc406; min-width: 28px; } #menu-product-more.rounded:hover::before { background: #ffc406; width: 100%; } /* ONLY FOR IE (MORE INFO ARROW ON MENU) */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .rounded#menu-product-more .text-green { position: relative; } #menu-product-more.rounded .text-green i::before { content:url('https://cdn.mikroe.com/icons/arrow-right.png'); position: relative; bottom: 0.5px; right: 3px; } } #menu-product-more.hovered-product-img::before { background: black; width: 100%; } #menu-product-more.hovered-product-img.rounded::before { background: #ffc406; width: 100%; } /* MOBILE MENUUUUUUUUUUUUUU */ /* mobile top tape */ #mmenu-top { display: block !important; position: fixed; z-index: 5000; width: 100%; height: 60px; background: #231f20; box-shadow: 0 0 3px 0 rgba(0,0,0,.3); z-index: 6000; width: calc(100% - 60px); } #mmenu-top a { margin: 0 auto; display: block; width: 140px; } #mmenu-top img { max-height: 30px; margin: 15px auto; } #mmenu-top #mm-open { background: #ffcb05; font-size: 24px; position: absolute; top: 0; right: -60px; line-height: 60px; width: 60px; text-align: center; } #mmenu { display: none; } #mmenu .mm-navbars_bottom .mm-navbar { height: auto; } #mmenu .mm-navbars_top.mm-navbars_has-tabs .mm-navbar.mm-navbar_tabs a.mm-btn.mm-btn_prev.mm-navbar__btn.mm-navbar__tab_selected { display: none; } #mmenu .mm-navbars_top.mm-navbars_has-tabs .mm-navbar:first-child { display: none; } #mmenu .mm-navbars_top.mm-navbars_has-tabs .mm-navbar:last-child > a:last-child { position: absolute; top: 0; right: 0; padding: 22px; } @media only screen and (min-width: 1300px) { #mmenu-top { display: none !important; } #mmenu { display: none !important; } } /* TEMP HARDCODED - hidden application on mobile menu */ @media only screen and (max-width: 991px) { #panel-menu > ul > li:nth-child(3) { display: none; } } @media only screen and (max-width: 900px) { .mm-page {z-index:6000;} .mm-slideout { z-index:6000; } } /*test*/ /* safari menu fix*/ @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #site-nav .menu-wrap.tse-scrollable, #site-nav .menu-wrap .os-padding { overflow: visible !important; } } } #wrapheader { margin: 0 auto 0 auto; max-width: 100%; padding: 110px 0 0 0; } #wrapheader #datebar { margin: 15px 0 0 0; padding: 0 20px; } #wrapcentre { margin: 0 auto 60px auto; padding: 0 20px; max-width: 100%; overflow: hidden; } #wrapcentre table.legend { padding: 40px; position: relative; bottom: 6px; } #wrapcentre-wrapp { z-index: 10; position: relative; background: #fbfbfb; /* margin-bottom: 429px; */ } @media only screen and (min-width: 992px) { #wrapheader { margin: 110px auto 0 auto; padding: 0; } } body #new-menu-backdrop { background: rgba(0, 0, 0, 0.5); position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: 15; } #datebar .gensmall.left, #datebar .gensmall.right { width: 50%; margin: 0; padding: 0; display: inline-block; } #datebar .gensmall.left { float: left; } #datebar .gensmall.right { float: right; } @media screen and (min-width: 1200px) { #wrapheader { max-width: 1170px; } #wrapheader #datebar { margin: 15px 0 0 0 ; padding: 0; } #wrapcentre { max-width: 1170px; padding: 0;} } @media screen and (min-width: 1300px) { #wrapheader { max-width: 1280px; } #wrapcentre { max-width: 1280px; } } @media screen and (max-width: 900px) { #wrapcentre { padding: 0 10px; } #wrapcentre .main-table { overflow: auto; padding: 0; margin: 0; } } .mm-wrapper_sidebar-collapsed .mm-page, .mm-wrapper_sidebar-expanded .mm-page { min-height: auto !important; } #me-globalnav-banner { width: 100%; } @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* all col set correct for ie */ #site-nav ul.level-3 .menu-wrap.overflow-fix { overflow: auto !important; } #site-nav ul.level-2 { padding: 10px 0; } #site-nav ul.level-2 ul { position: absolute; } /* col 1 */ #site-nav ul.level-2 .menu-wrap { width: 205px; left: -20px; height: 379px; } #site-nav ul.level-2 .menu-wrap li { width: 180px } /* col 2 */ #site-nav ul.level-3 .menu-wrap { top: 145px; width: 200px; left: -7px; } #site-nav ul.level-3 .menu-wrap li { width: 180px; margin-left: 5px; } /* col 3 */ #site-nav ul.level-4 .menu-wrap { width: 205px; left: 20px; } #site-nav ul.level-4 .menu-wrap li { width: 180px } } @media only screen and (-ms-high-contrast:none) and (max-width: 1300px) { /* col 2 */ #site-nav ul.level-3 .menu-wrap { left: 6px; } /* col 3 */ #site-nav ul.level-4 .menu-wrap { left: 17px; } /* product-info extend */ #site-nav .extend#product-info { width: 750px; left: 420px; } } #wrap { padding-top: 150px; } body{ margin:0px; } @media only screen and (min-width: 1300px) { #mmenu-top { display: none !important; } #mmenu { display: none !important; } } @media only screen and (max-width: 1300px) { #panel-menu > ul > li:nth-child(3) { display: none; } #site-nav{display: none;} } @media only screen and (max-width: 1300px) { #navigation-container{ position: fixed; z-index: 6000; } } /* -------------------------------------------------------------------------- */ /* EASTER BLOCK START */ /* -------------------------------------------------------------------------- */ ._easter-egg { display: block; position: absolute; z-index: 105; cursor: pointer; opacity: 0.8; border-radius: 50%; transition: 0.3s ease-in-out; color: green !important; font-weight: 600; font-size: 20px; } ._easter-egg img { width: 100px; } ._easter-egg:hover { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important; opacity: 1; } ._easter-egg-reduction { position: absolute; transition: 1.3s ease-in-out !important; transform: translateY(-100px); opacity: 0; } #promotionGift a { position: relative; } #promotionGift img { width: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #promotionGift .easter-egg-icon { font-size: 12px; } .easter-egg-box{ display:none; } /* -------------------------------------------------------------------------- */ /* EASTER BLOCK END */ /* -------------------------------------------------------------------------- */ .bouncy-egg-animation { animation-duration: 2s; animation-iteration-count: infinite; transform-origin: bottom; animation-name: bounce-7; animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1); height: 60px; } @keyframes bounce-7 { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 30% { transform: scale(.9,1.1) translateY(-20px); } 50% { transform: scale(1.05,.95) translateY(0); } 57% { transform: scale(1,1) translateY(-3px); } 64% { transform: scale(1,1) translateY(0); } 100% { transform: scale(1,1) translateY(0); } } .easter-egg-edge-box { background: url(https://s3.us-west-2.amazonaws.com/dev.mikroe.com/img/cart_rule_incrementer/egg-hunt-shop.jpg); background-size: contain; margin-top: 15px; background-repeat: no-repeat; height: 259px; }