@charset "UTF-8"; /* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── ─██████████████─████████──████████─████████████████───██████████████─██████████████─██████████─██████──────────██████─██████████████─ ─██░░░░░░░░░░██─██░░░░██──██░░░░██─██░░░░░░░░░░░░██───██░░░░░░░░░░██─██░░░░░░░░░░██─██░░░░░░██─██░░██████████──██░░██─██░░░░░░░░░░██─ ─██░░██████████─████░░██──██░░████─██░░████████░░██───██░░██████░░██─██░░██████████─████░░████─██░░░░░░░░░░██──██░░██─██░░██████████─ ─██░░██───────────██░░░░██░░░░██───██░░██────██░░██───██░░██──██░░██─██░░██───────────██░░██───██░░██████░░██──██░░██─██░░██───────── ─██░░██───────────████░░░░░░████───██░░████████░░██───██░░██████░░██─██░░██───────────██░░██───██░░██──██░░██──██░░██─██░░██───────── ─██░░██─────────────██░░░░░░██─────██░░░░░░░░░░░░██───██░░░░░░░░░░██─██░░██───────────██░░██───██░░██──██░░██──██░░██─██░░██──██████─ ─██░░██───────────████░░░░░░████───██░░██████░░████───██░░██████░░██─██░░██───────────██░░██───██░░██──██░░██──██░░██─██░░██──██░░██─ ─██░░██───────────██░░░░██░░░░██───██░░██──██░░██─────██░░██──██░░██─██░░██───────────██░░██───██░░██──██░░██████░░██─██░░██──██░░██─ ─██░░██████████─████░░██──██░░████─██░░██──██░░██████─██░░██──██░░██─██░░██████████─████░░████─██░░██──██░░░░░░░░░░██─██░░██████░░██─ ─██░░░░░░░░░░██─██░░░░██──██░░░░██─██░░██──██░░░░░░██─██░░██──██░░██─██░░░░░░░░░░██─██░░░░░░██─██░░██──██████████░░██─██░░░░░░░░░░██─ ─██████████████─████████──████████─██████──██████████─██████──██████─██████████████─██████████─██████──────────██████─██████████████─ ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */ /*-------------------------------------------------------------------*/ /*-------------------------Fonts for web use-------------------------*/ /*-------------------------------------------------------------------*/ @font-face { font-family: 'ClanWebW03-Book'; src: url('../fonts/ffclan/WOFF/FF Clan Book.woff'); } @font-face { font-family: 'ClanWebW03-Medium'; src: url('../fonts/ffclan/WOFF/FF Clan Medium.woff'); } @font-face { font-family: 'ClanWebW03-Bold'; src: url('../fonts/ffclan/WOFF/FF Clan Bold.woff'); } @font-face { font-family: 'ClanWebW03-Ultra'; src: url('../fonts/ffclan/WOFF/FF Clan Ultra.woff'); } @font-face { font-family: 'Material Icons'; src: url('../fonts/materialicons/MaterialIcons.woff'); } /*-------------------------------------------------------------------*/ /*-----------------------------Global--------------------------------*/ /*-------------------------------------------------------------------*/ *, *:focus, *:hover, *:active { outline: none; } * { box-sizing: border-box; } body { margin: 0; padding: 0; box-sizing: border-box; width: 100%; scroll-behavior: smooth; } header { display: block; } .navigation { display: block; position: relative; z-index: 900; } .nav-cookies { display: block; position: relative; background: #0072FF; background-size: cover; width: 100%; padding: 15px 15px 0 15px; margin: 0; z-index: 800; text-align: center; overflow: hidden; } .nav-cookies h3 { font-family: 'ClanWebW03-Medium'; font-size: 16px; font-weight: 400; color: #ffffff; padding: 0; margin: 0; } .nav-cookies p { color: #a7ceff; } .nav-cookies a { color: #FFF; } .expand { display: block !important; } .dissolve { display: none !important; } .overlay { display: none; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; position: fixed; z-index: 100; background: linear-gradient(to bottom, rgba(0, 52, 114, .8), rgba(0, 58, 78, 0.7)); overflow-x: hidden; scroll-behavior: none; } /*-------------------------------------------------------------------*/ /*---------------------------Navigation Bar--------------------------*/ /*-------------------------------------------------------------------*/ .navbar1 { width: 100%; margin: 0; padding: 0; height: 130px; background: #18191E; } /*-------------------------------------------------------------------*/ /*--------------------------Navigation Logo--------------------------*/ /*-------------------------------------------------------------------*/ .nav-logo { padding: 0; margin: 0 0 0 50px; } .nav-logo a img { margin: 37px 0 0 0; width: 150px; } /*-------------------------------------------------------------------*/ /*-----------------------------Search Bar----------------------------*/ /*-------------------------------------------------------------------*/ .search-bar { width: 1147px; padding: 0; margin: -40px auto; } .search-field { width: 1087px; border: none; margin: 0 -4px 0 0; padding: 12px 20px; border-radius: 10px 0 0 10px; font-family: 'ClanWebW03-Medium', sans-serif; font-size: 13px; outline: none; height: 44px; } .search-button1 { width: 60px; border: none; float: right; padding: 7px; border-radius: 0 10px 10px 0; background: #0072FF; font-family: 'Material Icons'; color: #FFF; font-size: 25px; line-height: inherit; cursor: pointer; outline: none; transition: all ease-in-out 0.1s; height: 44px; } .search-button1:hover { background: #005CCC; } /*-------------------------------------------------------------------*/ /*-----------------------NavCat Menu Button--------------------------*/ /*-------------------------------------------------------------------*/ .navcat-menu-button { position: absolute; float: left; width: auto; margin: 60px 0 0 50px; padding: 0; display: block; } .navcat-menu-button > a { text-decoration: none; color: #FFF; font-family: 'ClanWebW03-Medium', sans-serif; font-size: 13px; margin: 0; padding: 0; } #arrow-main { margin: -5px 0 0 0; } .navcat-menu-button > a:first-child::after { position: absolute; top: 0; left: 120px; display: inline-block; font-family: 'Material Icons'; font-size: 25px; color: #FFF; content: ''; } /*-------------------------------------------------------------------*/ /*-------------------------Navigation Quick--------------------------*/ /*-------------------------------------------------------------------*/ .nav-quick { position: relative; display: block; width: 1147px; margin: 70px auto 0 auto; padding: 0; cursor: pointer; } .nav-quick a { text-decoration: none; color: #BFBFBF; font-family: 'ClanWebW03-Medium', sans-serif; font-size: 13px; margin: 0 15px 0 0; padding: 0; } .nav-quick a:hover { color: #FFF; } /*-------------------------------------------------------------------*/ /*------------------------Navigation Tools---------------------------*/ /*-------------------------------------------------------------------*/ .nav-menu-tools { position: relative; float: right; width: auto; margin: -85px 0 0 0; padding: 0; } .nav-menu-tools a:hover { color: #DDD; } .nav-tools { text-decoration: none; color: #FFF; font-family: 'ClanWebW03-Medium', sans-serif; font-size: 13px; margin: 0 15px; } #nav-top { text-align: right; margin: 0 50px 0 0; padding: 0; display: block; } #nav-bottom { margin: 44px 50px 0 0; padding: 0; } .cart-item-count { padding: 9px 15px; margin: 0 0 0 15px; background: #0072FF; border-radius: 25px; font-size: 20px; transition: all ease-in-out 0.1s; } .cart-item-count:hover { background: #005CCC; } .mobile-icon { font-family: 'Material Icons'; font-size: 40px; margin: 0 15px; color: #FFF; text-decoration: none; display: none; } .mobile-cart-item-count { padding: 3px 7px; margin: -42px 0 0 98px; background: #FF001A; border-radius: 20px; font-size: 16px; color: #FFF; font-family: 'ClanWebW03-Medium', sans-serif; text-align: center; text-decoration: none; position: absolute; display: none; } #nav-bottom #sign-in-form::after { position: absolute; top: 62px; left: 77px; display: inline-block; font-family: 'Material Icons'; font-size: 25px; color: #FFF; content: ''; } /*-----------------------------------------------------------------------*/ /*-----------------------------Sign In Form------------------------------*/ /*-----------------------------------------------------------------------*/ .sign-in-form { margin: 0; padding: 0 10px 0 0; width: auto; float: left; z-index: 999; } #sign-in-form { padding: 0; margin: 0 30px 0 0; } /* #sign-in-form:hover { color: #FFF } */ .login-menu { width: 340px; margin: 0; padding: 20px; top: 88px; left: -105px; position: absolute; display: none; background: #FFF; border: 1px solid #EBEBEB; border-radius: 5px; filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, 0.3)); } .login-menu::after { position: absolute; top: -14px; left: 169px; display: inline-block; font-family: 'Material Icons'; font-size: 50px; color: #FFF; content: ''; } .login-menu .form-group a { display: block; font-family: 'ClanWebW03-Medium', sans-serif; font-size: 12px; font-weight: 500; text-align: center; margin: 0 0 20px 0; color: #0072FF; } .login-menu h2 { font-family: 'ClanWebW03-Medium', sans-serif; font-size: 20px; font-weight: 500; text-align: center; color: #505050; margin: 0 auto 20px auto; padding: 0; } .login-menu label, .login-menu input { display: block; width: 100%; padding: 0; margin: 0; } .login-menu label { font-family: 'ClanWebW03-Medium', sans-serif; font-size: 13px; font-weight: 500; color: #505050; margin-bottom: 15px; } .login-menu input { border: 1px solid #D8D8D8; border-radius: 10px; margin-bottom: 20px; padding: 11px 20px; } .login-menu .login-btn { font-family: 'ClanWebW03-Medium', sans-serif; font-size: 15px; font-weight: 500; text-align: center; color: #FFF; background: #FFC800; border: none; cursor: pointer; padding: 16px; transition: all ease-in-out 0.1s; } .login-menu .login-btn:hover { background: #EC9D00; } .login-menu p { font-family: 'ClanWebW03-Medium', sans-serif; font-size: 12px; font-weight: 500; text-align: center; margin: 0 auto; padding: 0; width: auto; color: #505050; } .login-menu a { color: #0072FF; } .login-menu .social-sign-in img { margin: 20px auto 0 auto; } login-button { width: 100%; height: 50px; } /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*---------------------------Desktop FlyMenu-----------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*--------------------------Global Adjustments---------------------------*/ /*-----------------------------------------------------------------------*/ #divider { display: block; height: 1px; width: auto; padding: 0; margin: 17px auto; background: #D8D8D8; } .divider { display: block; height: 1px; width: auto; padding: 0; margin: 12.5px auto 12.5px auto; background: #D8D8D8; } .desktop-menu ul, .desktop-menu li { margin: 0; padding: 0; text-decoration: none; list-style: none; } .desktop-menu h2 { font-family: 'ClanWebW03-Bold', sans-serif; font-weight: 500; font-size: 18px; margin: 0; padding: 0; color: #0072FF; cursor: pointer; } .desktop-menu li { font-family: 'ClanWebW03-Medium', sans-serif; font-size: 13px; margin: 0; padding: 0; } .desktop-menu a { display: block; text-decoration: none; color: #808080; transition: all ease-in-out 0.1s; } .desktop-menu a:hover { color: #0072FF; text-decoration: underline; } /*-----------------------------------------------------------------------*/ /*---------------------------Master Categories---------------------------*/ /*-----------------------------------------------------------------------*/ .desktop-menu { position: absolute; z-index: 1000; width: 350px; height: 606px; margin: 0; padding: 0; top: 24px; background: #FFF; border: 1px solid #EBEBEB; border-radius: 5px 0 0 5px; filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, 0.3)); display: none; } .desktop-menu .master-menu { width: auto; height: auto; margin: 21px 20px; padding: 0; } .master-li { width: auto; padding: 0; margin: 0; } a.mast-cat-nav { padding: 4.5px 0; margin: 0; width: 100%; cursor: default; } a.mast-cat-nav::after { content: '>'; font-size: 20px; color: #DBDBDB; height: 0; float: right; margin: -5px 0 0 0; padding: 0; transition: all ease-in-out 0.1s; } a.mast-cat-nav:hover { text-decoration: none; } a.mast-cat-nav:hover::after { color: #0072FF; } .desktop-menu::after { position: absolute; top: -14px; left: 107px; display: inline-block; font-family: 'Material Icons'; font-size: 50px; color: #FFF; content: ''; } /*-----------------------------------------------------------------------*/ /*----------------------------Sub Categories-----------------------------*/ /*-----------------------------------------------------------------------*/ .submenu { width: 500px; height: 606px; margin: 0 0 0 44px; padding: 20px 30px; border: 1px solid #EBEBEB; border-radius: 0 5px 5px 0; position: absolute; float: left; display: none; overflow: hidden; } #submenu-o.submenu, #submenu-p.submenu, #submenu-r.submenu { width: 250px; } #submenu-a { background: url('../image/nav/catnav/navcat-a.png') center center no-repeat #FFF; background-size: cover; } #submenu-b { background: url('../image/nav/catnav/navcat-b.png') center center no-repeat #FFF; background-size: cover; } #submenu-c { background: url('../image/nav/catnav/navcat-c.png') center center no-repeat #FFF; background-size: cover; } #submenu-d { background: url('../image/nav/catnav/navcat-d.png') center center no-repeat #FFF; background-size: cover; } #submenu-e { background: url('../image/nav/catnav/navcat-e.png') center center no-repeat #FFF; background-size: cover; } #submenu-f { background: url('../image/nav/catnav/navcat-f.png') center center no-repeat #FFF; background-size: cover; } #submenu-g { background: url('../image/nav/catnav/navcat-g.png') center center no-repeat #FFF; background-size: cover; } #submenu-h { background: url('../image/nav/catnav/navcat-h.png') center center no-repeat #FFF; background-size: cover; } #submenu-i { background: url('../image/nav/catnav/navcat-i.png') center center no-repeat #FFF; background-size: cover; } #submenu-j { background: url('../image/nav/catnav/navcat-j.png') center center no-repeat #FFF; background-size: cover; } #submenu-k { background: url('../image/nav/catnav/navcat-k.png') center center no-repeat #FFF; background-size: cover; } #submenu-l { background: url('../image/nav/catnav/navcat-l.png') center center no-repeat #FFF; background-size: cover; } #submenu-m { background: url('../image/nav/catnav/navcat-m.png') center center no-repeat #FFF; background-size: cover; } #submenu-n { background: url('../image/nav/catnav/navcat-n.png') center center no-repeat #FFF; background-size: cover; } #submenu-o { background: url('../image/nav/catnav/navcat-o.png') center center no-repeat #FFF; background-size: cover; } #submenu-p { background: url('../image/nav/catnav/navcat-p.png') center center no-repeat #FFF; background-size: cover; } #submenu-q { background: url('../image/nav/catnav/navcat-q.png') center center no-repeat #FFF; background-size: cover; } #submenu-r { background: url('../image/nav/catnav/navcat-r.png') center center no-repeat #FFF; background-size: cover; } .submenu a { padding: 4.5px 0; } .sub-cat { display: block; width: 200px; margin: 0; padding: 0; } .sub-cat-a-2 { float: right; top: 54px; right: 30px; position: absolute; } .sub-cat-b-3 { float: right; top: 19px; right: 30px; position: absolute; } .sub-cat-c-4 { float: right; top: 19px; right: 30px; position: absolute; } .sub-cat-d-3 { float: right; top: 19px; right: 30px; position: absolute; } .sub-cat-f-3 { float: right; top: 19px; right: 30px; position: absolute; } .sub-cat-h-3 { float: right; top: 19px; right: 30px; position: absolute; } .sub-cat-h-4 { float: right; top: 145px; right: 30px; position: absolute; } .sub-cat-i-5 { float: right; top: 19px; right: 30px; position: absolute; } .sub-cat-m-3 { float: right; top: 19px; right: 30px; position: absolute; } .sub-cat-m-4 { float: right; top: 170px; right: 30px; position: absolute; } .sub-cat-k-1 li:nth-child(2)::after { position: absolute; padding: 2px 6px; top: 91px; left: 194px; display: none; font-family: 'ClanWebW03-Medium', sans-serif; font-size: 10px; color: #FFF; content: 'NEW'; background: #FF002B; } .sub-cat-m-1 li:nth-child(10)::after { position: absolute; padding: 2px 6px; top: 322px; left: 90px; display: inline-block; font-family: 'ClanWebW03-Medium', sans-serif; font-size: 10px; color: #FFF; content: 'NEW'; background: #FF002B; } /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*----------------------------Mobile FlyMenu-----------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-----------------------------------------------------------------------*/ /*-------------------------------------------------------------------*/ /*------------------------Navigation Button--------------------------*/ /*-------------------------------------------------------------------*/ #nav-mobile { position: absolute; float: left; width: auto; height: auto; display: none; margin: 20px 0 0 20px; } #nav-mobile-button { width: 30px; float: left; margin: 0; padding: 0; cursor: pointer; } #nav-mobile-button span { display: block; height: 4px; border-radius: 3px; margin: 0 auto 7px auto; background: #FFF; } /*-------------------------------------------------------------------*/ /*------------------------Navigation Mobile--------------------------*/ /*-------------------------------------------------------------------*/ .mobile-menu { position: fixed; z-index: 99999999; width: 100%; height: 100vh; margin: 0; top: 0; padding: 0; background: linear-gradient(to bottom, rgba(0, 52, 114, .98), rgba(0, 58, 78, 0.9)); overflow: hidden; display: none; } .mobile-menu h1 { font-family: 'ClanWebW03-Medium', sans-serif; font-size: 15px; font-weight: 500; color: #FFF; margin: 30px auto; padding: 0; position: absolute; left: 7.5%; } .close-menu-btn { background: url('../image/nav/close-btn.svg'); width: 20px; height: 20px; border: none; margin: 0; padding: 0; position: absolute; top: 28px; right: 7.5%; cursor: pointer; } .mobile-menu-conta