.bump-animation { -webkit-animation: bumpAnimation ease-out 0.4s; animation: bumpAnimation ease-out 0.4s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } @-webkit-keyframes bumpAnimation { 0% { -webkit-transform: rotate(0deg) scaleX(1.35) scaleY(1.35) skewX(0deg) skewY(0deg); transform: rotate(0deg) scaleX(1.35) scaleY(1.35) skewX(0deg) skewY(0deg) } 100% { -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) } } @keyframes bumpAnimation { 0% { -webkit-transform: rotate(0deg) scaleX(1.35) scaleY(1.35) skewX(0deg) skewY(0deg); transform: rotate(0deg) scaleX(1.35) scaleY(1.35) skewX(0deg) skewY(0deg) } 100% { -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) } } #gn-main-placeholder { height: 84px } #gn-sub-placeholder { height: 50px; margin-bottom: 20px } .global-nav { position: fixed; z-index: 500; top: 0; right: 0; width: 100%; height: 134px; font-size: 16px; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif } @media only screen and (max-width: 999px) { .global-nav { position: absolute } } .global-nav a:hover { text-decoration: none; color: #036 } .global-nav.scrolling { position: fixed !important; top: 0 !important } .global-nav .selected a { font-weight: 700 } .chinese .global-nav,.japanese .global-nav,.korean .global-nav,.russian .global-nav { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .gn-burger { display: none } .gn-menu-state { display: none; position: absolute } .gn-overlay { display: none } .gn-main { position: relative; z-index: 500; width: 100%; background-color: #262626 } .gn-main-content { position: relative; width: calc(100% - 40px); max-width: 1200px; height: 84px; margin: 0 auto } .gn-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; visibility: visible; top: 0; left: 0; width: 100%; max-width: none; height: 84px; margin: 0; padding: 0; transition: none; background-color: transparent; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: -moz-scrollbars-none; -ms-overflow-style: none } @media only screen and (max-width: 999px) { .gn-list { overflow-y: scroll } } .gn-list::-webkit-scrollbar { width: 0; height: 0; background: transparent } .gn-list li { list-style-type: none } .gn-list li:not(:first-child) { margin-left: 30px } .gn-list a { display: block; box-sizing: border-box; height: 84px; font-size: .9375em; line-height: 84px; transition: border-bottom .2s linear; text-decoration: none; color: #fff; border-bottom: 3px solid rgba(245,166,35,0) } .gn-list a:hover { color: #fff } .gn-list .selected a { border-bottom: 3px solid #f5a623 } .gn-list li:not(.selected) a:hover { border-bottom: 3px solid #f5a623 } .gn-logo { position: absolute; top: 16px; right: 0; z-index: 490; overflow: -moz-scrollbars-none; -ms-overflow-style: none } @media only screen and (max-width: 999px) { .responsive .global-nav { position: fixed !important } .responsive .gn-main { overflow: visible } .responsive .gn-main-content { width: auto; max-width: 1000px; overflow: visible } .responsive .gn-list { display: none; position: absolute; z-index: 490; top: 84px; left: 0; box-sizing: border-box; max-width: 414px; height: calc(100vh - 84px); padding: 0 20px; background-color: #fff } .responsive .gn-list li { border-bottom: 1px solid #e8eff1 } .responsive .gn-list li:not(:first-child) { margin-left: 0; color: #abcabc } .responsive .gn-list a { height: 58px; line-height: 58px; transition: none; color: #0e303a } .responsive .gn-list a:hover { color: #0e303a } .responsive .gn-list .selected a { border-bottom: 0 } .responsive .gn-list li:not(.selected) a:hover { font-weight: 600; border: 0 } .responsive .gn-logo { right: 20px } .responsive .gn-menu-state:checked ~ .gn-list { left: 0; transition: left .4s } .responsive .gn-menu-state:checked ~ .gn-overlay { visibility: visible; opacity: .8 } .responsive .gn-list { display: block; left: -414px } .responsive .gn-list.click-closed { transition: left .4s } .responsive .gn-overlay { display: block; visibility: hidden; z-index: 489; left: 0; width: 100vw; height: 100vh; transition: opacity .4s, visibility .4s; opacity: 0; background: #1e1f26; top: 84px } .responsive .gn-burger { display: block; position: fixed; z-index: 490; top: 15px; left: 0; width: 59px; height: 56px; cursor: pointer } .responsive .gn-burger span { position: absolute; left: 20px; width: 19px; height: 2px; border-radius: 1px; background-color: #fff } .responsive .gn-burger .gn-burger-top { top: 20px; transition: top .2s linear .2s, -webkit-transform .2s linear; transition: transform .2s linear, top .2s linear .2s; transition: transform .2s linear, top .2s linear .2s, -webkit-transform .2s linear } .responsive .gn-burger .gn-burger-middle { top: 27px; transition: opacity .2s linear } .responsive .gn-burger .gn-burger-bottom { top: 34px; transition: top .2s linear .2s, -webkit-transform .2s linear; transition: transform .2s linear, top .2s linear .2s; transition: transform .2s linear, top .2s linear .2s, -webkit-transform .2s linear } .responsive .gn-menu-state:checked ~ .gn-burger .gn-burger-top { top: 27px; transition: top .2s linear, -webkit-transform .2s linear .2s; transition: top .2s linear, transform .2s linear .2s; transition: top .2s linear, transform .2s linear .2s, -webkit-transform .2s linear .2s; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .responsive .gn-menu-state:checked ~ .gn-burger .gn-burger-middle { transition: opacity .2s linear; opacity: 0 } .responsive .gn-menu-state:checked ~ .gn-burger .gn-burger-bottom { top: 27px; transition: top .2s linear, -webkit-transform .2s linear .2s; transition: top .2s linear, transform .2s linear .2s; transition: top .2s linear, transform .2s linear .2s, -webkit-transform .2s linear .2s; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } } .gn-sub { background-color: #f2f4f4; position: relative } .sub-content { position: relative; width: calc(100% - 40px); max-width: 1000px; height: 50px; margin: 0 auto } .sub-menu,.breadcrumbs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; float: left; height: 50px; max-height: initial; margin: 0; padding: 0; border-bottom: 0; background-color: initial; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .sub-menu li,.breadcrumbs li { list-style-type: none } .sub-menu a,.breadcrumbs a { font-size: .8125em; text-decoration: none; color: #0e303a } .jp .sub-menu { width: calc(100% - 150px) } .gn-home-divider { box-sizing: border-box; width: 1px; height: 24px; margin-right: 10px; margin-left: 10px; background-color: #bdbebe } .sub-menu li a { display: block; width: 100%; padding-top: 20px; padding-bottom: 20px } @media only screen and (min-width: 1000px) { .sub-menu li.selected a { margin-top: -2px } } .subnav-small-expand-arrow { position: relative; top: 6px; right: 0 } .subnav-location-changer-link { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; float: right; margin-top: 17px; text-decoration: none } .subnav-location-changer-link p { font-size: 12px; line-height: 13px } .subnav-location-flag { display: inline-block; width: 27px; height: 18px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags-sml.png?_v=1508124258); background-size: 135px 108px; box-shadow: 0 0 1px 0 #ccc } .subnav-location-flag.au { background-position: -0 -0 } .subnav-location-flag.at { background-position: -27px -0 } .subnav-location-flag.br { background-position: -54px -0 } .subnav-location-flag.ca { background-position: -81px -0 } .subnav-location-flag.cn { background-position: -108px -0 } .subnav-location-flag.dk { background-position: -0 -18px } .subnav-location-flag.fi { background-position: -27px -18px } .subnav-location-flag.fr { background-position: -54px -18px } .subnav-location-flag.de { background-position: -81px -18px } .subnav-location-flag.hk { background-position: -108px -18px } .subnav-location-flag.in { background-position: -0 -36px } .subnav-location-flag.it { background-position: -27px -36px } .subnav-location-flag.jp { background-position: -54px -36px } .subnav-location-flag.kr { background-position: -81px -36px } .subnav-location-flag.mx { background-position: -108px -36px } .subnav-location-flag.nl { background-position: -0 -54px } .subnav-location-flag.nz { background-position: -27px -54px } .subnav-location-flag.no { background-position: -54px -54px } .subnav-location-flag.pt { background-position: -81px -54px } .subnav-location-flag.ru { background-position: -108px -54px } .subnav-location-flag.sg { background-position: -0 -72px } .subnav-location-flag.sa { background-position: -27px -72px } .subnav-location-flag.es { background-position: -54px -72px } .subnav-location-flag.se { background-position: -81px -72px } .subnav-location-flag.tw { background-position: -108px -72px } .subnav-location-flag.tr { background-position: -0 -90px } .subnav-location-flag.ae { background-position: -27px -90px } .subnav-location-flag.uk { background-position: -54px -90px } .subnav-location-flag.us { background-position: -81px -90px } .subnav-location-changer { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; display: none; position: absolute; z-index: 300; top: 56px; right: calc(((100% - 1000px) / 2) - 1px); width: 583px; margin-top: 7px } .subnav-location-changer .lc-top-arrow { position: absolute; top: -7px; left: 560px; width: 16px; height: 7px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-top-arrow.png?_v=1507069450); background-size: 16px 7px } .subnav-location-changer .lc-top { height: 7px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-top.png?_v=1507069243); background-size: 586px 7px; background-position-x: center } .subnav-location-changer .lc-bottom { position: relative; height: 14px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-bottom.png?_v=1507069024); background-size: 586px 14px; background-position-x: center } .subnav-location-changer .lc-flags { padding: 15px 0 0 0px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-tile.png?_v=1507070402); background-size: 586px 10px; background-position-x: center } .subnav-location-changer .lc-flags:after { content: ''; display: table; clear: both } .subnav-location-changer .lc-flags div { float: left; width: 97px; height: 80px } .subnav-location-changer .lc-flags div:nth-child(n+25) { height: 65px; margin-top: 5px } .subnav-location-changer .lc-flags div a { display: block; width: 43px; height: 28px; margin: 0 auto; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags.png?_v=1507873145); background-size: 215px 168px; box-shadow: 0 0 1px 0 #ccc } .subnav-location-changer .lc-flags div a:hover { box-shadow: 0 0 2px 2px #64abd3 } .subnav-location-changer .lc-flags div a.au { background-position: -0 -0 } .subnav-location-changer .lc-flags div a.at { background-position: -43px -0 } .subnav-location-changer .lc-flags div a.br { background-position: -86px -0 } .subnav-location-changer .lc-flags div a.ca { background-position: -129px -0 } .subnav-location-changer .lc-flags div a.cn { background-position: -172px -0 } .subnav-location-changer .lc-flags div a.dk { background-position: -0 -28px } .subnav-location-changer .lc-flags div a.fi { background-position: -43px -28px } .subnav-location-changer .lc-flags div a.fr { background-position: -86px -28px } .subnav-location-changer .lc-flags div a.de { background-position: -129px -28px } .subnav-location-changer .lc-flags div a.hk { background-position: -172px -28px } .subnav-location-changer .lc-flags div a.in { background-position: -0 -56px } .subnav-location-changer .lc-flags div a.it { background-position: -43px -56px } .subnav-location-changer .lc-flags div a.jp { background-position: -86px -56px } .subnav-location-changer .lc-flags div a.kr { background-position: -129px -56px } .subnav-location-changer .lc-flags div a.mx { background-position: -172px -56px } .subnav-location-changer .lc-flags div a.nl { background-position: -0 -84px } .subnav-location-changer .lc-flags div a.nz { background-position: -43px -84px } .subnav-location-changer .lc-flags div a.no { background-position: -86px -84px } .subnav-location-changer .lc-flags div a.pt { background-position: -129px -84px } .subnav-location-changer .lc-flags div a.ru { background-position: -172px -84px } .subnav-location-changer .lc-flags div a.sg { background-position: -0 -112px } .subnav-location-changer .lc-flags div a.sa { background-position: -43px -112px } .subnav-location-changer .lc-flags div a.es { background-position: -86px -112px } .subnav-location-changer .lc-flags div a.se { background-position: -129px -112px } .subnav-location-changer .lc-flags div a.tw { background-position: -172px -112px } .subnav-location-changer .lc-flags div a.tr { background-position: -0 -140px } .subnav-location-changer .lc-flags div a.ae { background-position: -43px -140px } .subnav-location-changer .lc-flags div a.uk { background-position: -86px -140px } .subnav-location-changer .lc-flags div a.us { background-position: -129px -140px } .subnav-location-changer .lc-flags div span { display: block; margin: 6px 0 0 0; font-size: 12px; text-align: center; color: #333 } @media only screen and (max-width: 1040px) { .subnav-location-changer { right: calc(((100% - 1000px)) + (1018px - 100vw)) } .gn-sub .ui-effects-wrapper { right: calc(((100% - 1000px)) + (1018px - 100vw)) !important } .jp .gn-sub .ui-effects-wrapper { right: calc(((100% - 1000px)) + (1018px - 100vw)) !important } } .sub-menu .selected a { font-weight: 700 } .sub-menu li:not(.selected):not(.gn-home):not(.gn-page) a:hover { color: #7d9092 } .sub-menu li:not(:first-child):not(.gn-home-divider):not(.gn-page) { margin-left: 20px } .breadcrumbs { width: calc(100% - 115px); transition: opacity .4s } .breadcrumbs li a { display: inline-block } .breadcrumbs li div span:not(:last-child) a:hover { color: #7d9092 } .breadcrumbs li div span:last-child a { font-weight: 700 } .breadcrumbs .gn-divider { margin-right: 10px; margin-left: 10px } .store-menu-state { display: none; position: absolute } .store-menu-state:checked ~ .breadcrumbs { opacity: 0 } .store-menu-state:checked ~ .store-search { z-index: 500; width: 827px; background-color: #fff } .store-menu-state:checked ~ .store-search .search-icon { background-color: #fff } .store-menu-state:checked ~ .store-search .store-search-input input { display: inline-block; background-color: #fff } .store-menu-state:checked ~ .store-search .search-icon img { border-right: 0 } .store-menu-state:checked ~ .bmd-cart { opacity: 0 } .store-menu-state:checked ~ .store-search .results.show { display: block } .store-icon-label { position: absolute; z-index: 501; right: 138px; width: 40px; height: 51px } .store-search { position: absolute; right: 138px; width: 48px; height: 50px; transition: width .4s, background-color .4s, right .4s } .store-search .search-icon { float: left; position: relative; z-index: 3; padding-top: 14px; padding-left: 12px; background-color: #f2f4f4 } .store-search .search-icon img { padding-right: 15px; border-right: 1px solid #dbe0e1 } .store-search .store-search-input { float: left; width: calc(100% - 48px); padding-top: 4px } .store-search .store-search-input input { display: none; z-index: 492; box-sizing: border-box; width: 100%; height: 40px; padding-right: 60px; padding-left: 0; line-height: 40px; font-weight: 600; transition: background-color .4s; border: 0; outline: 0; background-color: #f2f4f4 } .store-search .store-search-input input::-webkit-input-placeholder { padding-left: 0; font-weight: 600; color: #ccc } .store-search .store-search-close { position: absolute; right: 0; width: 48px; height: 51px } .store-search .store-search-close span { position: absolute; top: 24px; left: 13px; width: 20px; height: 2px; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; border-radius: 1px; background-color: #000 } .store-search .store-search-close .close-line-top { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .store-search .store-search-close .close-line-bot { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .store-search .results { display: none; margin-top: 50px; padding: 15px 0 15px; border-top: 1px solid #ebecef; background-color: #fff } .store-search .results.show { display: none } .store-search .results a { display: block; margin: 0 20px; padding: 12px 0; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; font-weight: 400; text-decoration: none; color: #3c575f } .store-search .results a.on,.store-search .results a:hover { text-decoration: underline } .gn-sub .ui-effects-wrapper { right: calc(((100% - 1000px) / 2) - 1px) !important } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { .subnav-location-flag { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags-sml@2x.png?_v=1508124205) } .subnav-location-changer .lc-top-arrow { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-top-arrow@2x.png?_v=1507069450) } .subnav-location-changer .lc-top { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-top@2x.png?_v=1507069243) } .subnav-location-changer .lc-bottom { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-bottom@2x.png?_v=1507069024) } .subnav-location-changer .lc-flags { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-tile@2x.png?_v=1507070402) } .subnav-location-changer .lc-flags div a { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags@2x.png?_v=1507873094) } } .sub-overlay { display: none } .sub-menu-state,.sub-menu-location-state { display: none; position: absolute } .sub-dropdown { display: none } .sub-menu-location-dropdown { cursor: pointer } .sub-menu-location-dropdown.disabled { pointer-events: none; cursor: default } .sub-menu-location { display: none } .sub-menu-location-dropdown { float: right; position: relative; top: 15px } .sub-menu-location-arrow { float: right } @media only screen and (max-width: 999px) { .responsive .sub-overlay { position: absolute; top: 50px; left: 0; z-index: 489; display: block; width: 100vw; height: 100vh; visibility: hidden; opacity: 0; background: #1e1f26; transition: opacity .4s, visibility .4s } .responsive .sub-content { width: 100% } .responsive .sub-dropdown { display: block; float: left; height: 35px; padding-top: 15px; padding-left: 20px } .responsive .sub-menu-location-dropdown { position: absolute; right: 0; display: inline-block; float: right; height: 35px; padding-top: 15px; padding-left: 20px; margin-right: 15px; top: 0px } .responsive .sub-product { float: left; font-size: .875em; font-weight: 600; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-transform: capitalize; color: #0e303a } .responsive .sub-menu,.responsive .breadcrumbs { display: block; overflow: hidden; position: relative; z-index: 490; box-sizing: border-box; width: 100%; height: auto; padding: 0 20px; transition: max-height .4s } .responsive .sub-menu.home { width: calc(100% - 185px) } .responsive .sub-menu.home li a { padding: 0 } .responsive .sub-menu-location { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; display: block; overflow: hidden; position: relative; z-index: 490; box-sizing: border-box; width: 100%; height: auto; transition: max-height .4s; top: 0px } .responsive .subnav-location-changer { visibility: hidden } .responsive .sub-menu,.responsive .sub-menu-location { max-height: 0; background-color: #fff } .responsive .sub-menu.home,.responsive .sub-menu-location.home { max-height: none; background-color: #f2f4f4 } .responsive .sub-menu li,.responsive .sub-menu-location li { border-bottom: 1px solid #e8eff1 } .responsive .sub-menu li:last-child,.responsive .sub-menu-location li:last-child { border-bottom: none } .responsive .sub-menu li:not(:first-child):not(.gn-home-divider):not(.gn-page),.responsive .sub-menu-location li:not(:first-child):not(.gn-home-divider):not(.gn-page) { margin-left: 0 } .responsive .sub-menu.home li,.responsive .sub-menu-location.home li { padding: 12px 0 } .responsive .sub-menu .lc-flags,.responsive .sub-menu-location .lc-flags { background: #d4d4d4; padding: 25px 0px 15px 15px } .responsive .sub-menu .lc-flags:after,.responsive .sub-menu-location .lc-flags:after { content: ""; display: table; clear: both } .responsive .sub-menu .lc-flags div:hover,.responsive .sub-menu-location .lc-flags div:hover { background: #f2f4f4 } .responsive .sub-menu .lc-flags div,.responsive .sub-menu-location .lc-flags div { width: calc(47% - 5px); padding: 5px; margin-bottom: 15px; border-radius: 2px; margin-left: 1%; height: 28px; float: left } } @media only screen and (max-width: 999px) and (min-width: 605px) { .responsive .sub-menu .lc-flags div,.responsive .sub-menu-location .lc-flags div { width: 30% } } @media only screen and (max-width: 999px) and (min-width: 768px) { .responsive .sub-menu .lc-flags div,.responsive .sub-menu-location .lc-flags div { width: 22% } } @media only screen and (max-width: 999px) { .responsive .sub-menu .lc-flags div a,.responsive .sub-menu-location .lc-flags div a { display: inline-block; width: 43px; height: 28px; margin: 0px auto; vertical-align: middle; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags@2x.png?_v=1507873094); background-size: 215px 168px; box-shadow: 0 0 1px 0 #ccc } .responsive .sub-menu .lc-flags div a.au,.responsive .sub-menu-location .lc-flags div a.au { background-position: -0px -0px } .responsive .sub-menu .lc-flags div a.at,.responsive .sub-menu-location .lc-flags div a.at { background-position: -43px -0px } .responsive .sub-menu .lc-flags div a.br,.responsive .sub-menu-location .lc-flags div a.br { background-position: -86px -0px } .responsive .sub-menu .lc-flags div a.ca,.responsive .sub-menu-location .lc-flags div a.ca { background-position: -129px -0px } .responsive .sub-menu .lc-flags div a.cn,.responsive .sub-menu-location .lc-flags div a.cn { background-position: -172px -0px } .responsive .sub-menu .lc-flags div a.dk,.responsive .sub-menu-location .lc-flags div a.dk { background-position: -0px -28px } .responsive .sub-menu .lc-flags div a.fi,.responsive .sub-menu-location .lc-flags div a.fi { background-position: -43px -28px } .responsive .sub-menu .lc-flags div a.fr,.responsive .sub-menu-location .lc-flags div a.fr { background-position: -86px -28px } .responsive .sub-menu .lc-flags div a.de,.responsive .sub-menu-location .lc-flags div a.de { background-position: -129px -28px } .responsive .sub-menu .lc-flags div a.hk,.responsive .sub-menu-location .lc-flags div a.hk { background-position: -172px -28px } .responsive .sub-menu .lc-flags div a.in,.responsive .sub-menu-location .lc-flags div a.in { background-position: -0px -56px } .responsive .sub-menu .lc-flags div a.it,.responsive .sub-menu-location .lc-flags div a.it { background-position: -43px -56px } .responsive .sub-menu .lc-flags div a.jp,.responsive .sub-menu-location .lc-flags div a.jp { background-position: -86px -56px } .responsive .sub-menu .lc-flags div a.kr,.responsive .sub-menu-location .lc-flags div a.kr { background-position: -129px -56px } .responsive .sub-menu .lc-flags div a.mx,.responsive .sub-menu-location .lc-flags div a.mx { background-position: -172px -56px } .responsive .sub-menu .lc-flags div a.nl,.responsive .sub-menu-location .lc-flags div a.nl { background-position: -0px -84px } .responsive .sub-menu .lc-flags div a.nz,.responsive .sub-menu-location .lc-flags div a.nz { background-position: -43px -84px } .responsive .sub-menu .lc-flags div a.no,.responsive .sub-menu-location .lc-flags div a.no { background-position: -86px -84px } .responsive .sub-menu .lc-flags div a.pt,.responsive .sub-menu-location .lc-flags div a.pt { background-position: -129px -84px } .responsive .sub-menu .lc-flags div a.ru,.responsive .sub-menu-location .lc-flags div a.ru { background-position: -172px -84px } .responsive .sub-menu .lc-flags div a.sg,.responsive .sub-menu-location .lc-flags div a.sg { background-position: -0px -112px } .responsive .sub-menu .lc-flags div a.sa,.responsive .sub-menu-location .lc-flags div a.sa { background-position: -43px -112px } .responsive .sub-menu .lc-flags div a.es,.responsive .sub-menu-location .lc-flags div a.es { background-position: -86px -112px } .responsive .sub-menu .lc-flags div a.se,.responsive .sub-menu-location .lc-flags div a.se { background-position: -129px -112px } .responsive .sub-menu .lc-flags div a.tw,.responsive .sub-menu-location .lc-flags div a.tw { background-position: -172px -112px } .responsive .sub-menu .lc-flags div a.tr,.responsive .sub-menu-location .lc-flags div a.tr { background-position: -0px -140px } .responsive .sub-menu .lc-flags div a.ae,.responsive .sub-menu-location .lc-flags div a.ae { background-position: -43px -140px } .responsive .sub-menu .lc-flags div a.uk,.responsive .sub-menu-location .lc-flags div a.uk { background-position: -86px -140px } .responsive .sub-menu .lc-flags div a.us,.responsive .sub-menu-location .lc-flags div a.us { background-position: -129px -140px } .responsive .sub-menu .lc-flags div span,.responsive .sub-menu-location .lc-flags div span { display: inline-block; text-align: center; font-size: 14px; color: #333; margin-left: 57px; white-space: nowrap; margin-top: 5px } .responsive .sub-menu .lc-flags .selected-country,.responsive .sub-menu-location .lc-flags .selected-country { background: #f2f4f4 } .responsive .sub-menu-state:checked ~ .sub-menu { display: block; overflow-y: scroll; max-height: calc(100vh - 84px - 50px) } .responsive .sub-menu-state:checked ~ .sub-dropdown .sub-arrow-left { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .responsive .sub-menu-state:checked ~ .sub-dropdown .sub-arrow-right { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .responsive .sub-menu-state:checked ~ .sub-overlay { visibility: visible; opacity: .8 } .responsive .sub-menu-location-state:checked ~ .sub-menu-location { display: block; overflow-y: scroll; max-height: calc(100vh - 84px - 50px) } .responsive .sub-menu-location-state:checked ~ .sub-menu-location-dropdown .sub-menu-location-arrow-left { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .responsive .sub-menu-location-state:checked ~ .sub-menu-location-dropdown .sub-menu-location-arrow-right { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .responsive .sub-menu-location-state:checked ~ .sub-menu-location-overlay { visibility: visible; opacity: .8 } .responsive .sub-arrow { float: left; position: relative; width: 25px; height: 20px; margin-top: 9px; margin-left: 8px } .responsive .sub-arrow span { position: absolute; width: 10px; height: 2px; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; border-radius: 1px; background-color: #000 } .responsive .sub-arrow .sub-arrow-left,.responsive .sub-arrow .sub-menu-location-arrow-left { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .responsive .sub-arrow .sub-arrow-right,.responsive .sub-arrow .sub-menu-location-arrow-right { left: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .responsive .sub-menu-location-arrow { float: right; position: relative; width: 20px; height: 20px; margin-top: 9px; margin-left: 8px; display: inline-block } .responsive .sub-menu-location-arrow span { position: absolute; width: 10px; height: 2px; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; border-radius: 1px; background-color: #000 } .responsive .sub-menu-location-arrow .sub-arrow-left,.responsive .sub-menu-location-arrow .sub-menu-location-arrow-left { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .responsive .sub-menu-location-arrow .sub-arrow-right,.responsive .sub-menu-location-arrow .sub-menu-location-arrow-right { left: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .responsive .global-nav #gn-cart { position: relative; right: 87px; float: right; margin-left: 0px } .responsive .breadcrumbs li { display: none } .responsive .breadcrumbs>li:last-child { display: block } .responsive .breadcrumbs>li:last-child span { display: block; margin-top: 16px; font-size: 14px } .responsive .store-search { right: 170px } .responsive .store-menu-state:checked ~ .store-search { right: 0; width: 100% } .responsive .store-menu-state:checked ~ .store-icon-label { right: 0 } .store-icon-label { right: 170px } } @media only screen and (min-width: 1000px) { .sub-menu-location { display: none } .sub-menu-location-dropdown { float: right; position: relative; top: 15px } .sub-menu-location-arrow { float: right; display: none } } #gn-cart { padding-right: 0px; margin-left: 0px; width: 94px; right: 44px; position: absolute; z-index: 499; height: 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: visibility .2s, opacity .2s } #gn-cart .gn-cart-wrapper { position: static } #gn-cart:hover,#gn-cart.active { cursor: pointer; background-color: #fff } #gn-cart:hover .vertical-seperator,#gn-cart.active .vertical-seperator { background: #fff } #gn-cart.nocart { display: none !important } #gn-cart .cart-wrapper { position: absolute } #gn-cart .gn-cart-button { display: block; position: relative; box-sizing: border-box; width: 100%; height: 100%; margin-left: 0; font-size: 12px; line-height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #fff } #gn-cart .gn-cart-icon { position: absolute; top: 13px; right: 48px } #gn-cart .gn-cart-count { position: absolute; top: 14px; right: 18px; box-sizing: border-box; width: 22px; height: 22px; line-height: 20px; text-align: center; color: #fff; border-radius: 50%; background-color: #fc625d } .russian #gn-cart .gn-cart-count { line-height: 22px } #gn-cart div { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } #gn-cart .content { display: none; position: absolute; top: 50px; right: 0; box-sizing: border-box; width: 416px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; color: #000; border: 1px solid #f2f4f4; border-top: none; background-color: #fff } @media only screen and (max-width: 400px) { #gn-cart .content { width: 100vw } } #gn-cart .content .cart-container { margin: 0 20px 20px } #gn-cart .content .header { padding: 0; border-bottom: 1px solid #f2f4f4 } #gn-cart .content .header p { margin: 20px; margin-left: 0; font-size: 18px; line-height: 22px; font-weight: 600; color: #0e303a } @media only screen and (max-width: 400px) { #gn-cart .content .header p { margin-bottom: 16px } } #gn-cart .content .header p.empty { text-align: center } #gn-cart .content .footer { padding: 30px 0 0; border-top: 1px solid #f2f4f4 } #gn-cart .content .footer .label { float: left; margin: 7px 0 0 7px; font-family: 'effra', 'Open Sans', sans-serif !important; font-size: 18px; line-height: 30px; font-weight: 400; color: #292929 } #gn-cart .content .footer .price { top: 0; margin: 0; font-family: 'Radnika Condensed', 'effra', 'Open Sans', sans-serif !important; font-size: 30px; line-height: 30px; font-weight: 300; text-align: right; color: #292929 } #gn-cart .content .footer .jp-ex-tax { display: block; font-size: 67% !important; font-weight: 300 !important } #gn-cart .content .footer .checkout { display: block; width: 100%; height: 50px; margin-top: 20px; padding: 0; font-family: 'Sofia Pro', 'effra', 'Open Sans', sans-serif !important; font-size: 18px; line-height: 50px; border: none; border-radius: 2px; background: #28c891; box-shadow: none } #gn-cart .content .nav-help { display: table; width: 88%; margin: 0 15px; padding: 18px 10px; font-size: 13px; font-weight: 300; color: #363636; border-top: 1px solid #e8e8e8 } @media only screen and (max-width: 400px) { #gn-cart .content .nav-help { display: block; box-sizing: border-box; margin: 0 auto; padding: 15px 0 20px } } #gn-cart .content .nav-help span { display: table-cell } @media only screen and (max-width: 400px) { #gn-cart .content .nav-help span { display: block } } #gn-cart .content .nav-help span:first-child { font-weight: 600; text-align: left } @media only screen and (max-width: 400px) { #gn-cart .content .nav-help span:first-child { padding-bottom: 10px; text-align: center } } #gn-cart .content .nav-help span:nth-child(2) { text-align: center } @media only screen and (max-width: 400px) { #gn-cart .content .nav-help span:nth-child(2) { float: left } } @media only screen and (max-width: 400px) { #gn-cart .content .nav-help span:nth-child(2) a { text-decoration: none } } @media only screen and (max-width: 400px) { #gn-cart .content .nav-help span:nth-child(3) { float: right } } #gn-cart .content .nav-help span:last-child { text-align: right } #gn-cart .content .nav-help img { margin-right: 5px; vertical-align: middle } #gn-cart .content .nav-help a { text-decoration: underline; color: #363636 } @media only screen and (max-width: 400px) { #gn-cart .content .nav-help::after { content: ''; display: table; clear: both } } #gn-cart .content.empty .header p,#gn-cart .content.empty .header a,#gn-cart .content.empty .footer,#gn-cart .content.empty ul { display: none } #gn-cart .content.empty .header { border-bottom: 0 } #gn-cart .content.empty .header p.empty { display: block } #gn-cart .notifications { display: none; position: absolute; top: 50px; right: 0; box-sizing: border-box; width: 416px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; color: #000; border: 1px solid #f2f4f4; border-top: none; background-color: #fff } @media only screen and (max-width: 400px) { #gn-cart .notifications { width: 100vw } } #gn-cart .notifications .notifications-container { margin: 0 20px 0 } #gn-cart .notifications .header { border-bottom: 1px solid #f2f4f4 } #gn-cart .notifications .header p { margin: 0; padding: 20px 20px 20px 0; font-size: 18px; font-weight: 600; color: #0e303a } #gn-cart .notifications .header .icon-added { display: inline-block; width: 25px; height: 12px; background-image: url(https://images.blackmagicdesign.com/images/webstore/shared/added-icon.svg?_v=1482357982); background-repeat: no-repeat } #gn-cart .notifications .quantity,#gn-cart .notifications .delete-btn { display: none } #gn-cart .notifications .topRow { float: left; margin-top: 17px } #gn-cart .notifications .bottomRow { height: 80px; margin-top: 0 !important; line-height: 80px } #gn-cart ul.products { overflow-y: auto; width: calc(100% + 20px); min-height: 1px; max-height: 325px; margin: 0; padding: 0 } #gn-cart ul.products li { overflow: hidden; position: relative; width: calc(100% - 20px); padding: 20px 0; list-style-type: none; border-bottom: 1px solid #e7eef4 } #gn-cart ul.products li .thumbnail { display: none } @media only screen and (min-width: 417px) { #gn-cart ul.products li .thumbnail { display: block; float: left; box-sizing: border-box; width: 80px; height: 80px; padding: 10px } } #gn-cart ul.products li .desc { float: left; width: calc(100% - 12px); margin-left: 6px } @media only screen and (min-width: 417px) { #gn-cart ul.products li .desc { width: calc(100% - 90px) } } #gn-cart ul.products li .desc .topRow { position: relative } #gn-cart ul.products li .desc .bottomRow { position: relative; margin-top: 10px } #gn-cart ul.products li .desc h3 { max-width: 175px; margin: 0; margin-right: 60px; padding: 0; font-family: 'Sofia Pro', 'Open Sans', Helvetica, Arial, sans-serif !important; font-size: 18px; line-height: 24px; font-weight: 400; color: #0e303a } #gn-cart ul.products li .quantity { width: 109px; height: 35px; border: 1px solid #dbe0e1; border-radius: 2px } #gn-cart ul.products li .quantity .textbox { position: relative } #gn-cart ul.products li .quantity button { position: absolute; top: 0; width: 35px; height: 35px; border: none; background: #f2f4f4; background-repeat: no-repeat; box-shadow: none } #gn-cart ul.products li .quantity button:first-child { left: 0; border-radius: 2px 0 0 2px; background-image: url(https://images.blackmagicdesign.com/images/webstore/shared/minus-button.png?_v=1482961077) } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { #gn-cart ul.products li .quantity button:first-child { background-image: url(https://images.blackmagicdesign.com/images/webstore/shared/minus-button@2x.png?_v=1482961077); background-size: 35px 35px } } #gn-cart ul.products li .quantity button:last-child { right: 0; border-radius: 0 2px 2px 0; background-image: url(https://images.blackmagicdesign.com/images/webstore/shared/plus-button.png?_v=1482961077) } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { #gn-cart ul.products li .quantity button:last-child { background-image: url(https://images.blackmagicdesign.com/images/webstore/shared/plus-button@2x.png?_v=1482961077); background-size: 35px 35px } } #gn-cart ul.products li .quantity span { display: inline-block; position: absolute; left: 35px; width: 37px; height: 35px; font-family: 'effra', 'Open Sans', sans-serif !important; font-size: 18px; line-height: 34px; font-weight: 600; text-align: center; color: #0e303a; border-right: 1px solid #dbe0e1; border-left: 1px solid #dbe0e1 } #gn-cart ul.products li .total-price { position: absolute; right: 0; bottom: 2px; width: 150px; font-family: 'Radnika Condensed', 'effra', 'Open Sans', sans-serif !important; font-size: 24px; text-align: right; color: #0e303a } #gn-cart ul.products li .total-price .jp-ex-tax { display: block; padding-top: 4px; font-size: 67% !important; font-weight: 300 !important } #gn-cart ul.products li .delete-btn { position: absolute; top: 0; right: 0 } #gn-cart ul.products li .delete-btn button { padding: 0; font-family: 'Gibson', 'Open Sans', Helvetica, Arial, sans-serif !important; font-size: 14px; font-weight: 400; color: #4a90e2; border: none; background: none; box-shadow: none } #gn-cart ul.products li .jp-ex-tax { display: block } #gn-cart ul.products li:last-child { border: 0 } .vertical-seperator { float: right; display: inline-block; width: 1px; height: 21px; margin-top: 14px; margin-left: 0; background: #dbe0e1 } .bmd-cart .tally { color: #fff !important } .bmd-cart .cart-notification,.bmd-cart .gnc-empty,.bmd-cart .gnc-content,.bmd-cart .gnc-count { display: inherit !important } .bmd-cart .hide { display: none !important } #gn-cart .gnc-content,#gn-cart .gnc-empty,#gn-cart .gnc-count { display: block } .cart-notification { display: none; position: fixed; z-index: 501; right: 10%; width: 400px; height: 130px; background-color: white; box-shadow: 0 0 8px 0 rgba(0,0,0,0.15) } .cart-notification .header { height: 49px; padding-left: 32px; font-size: 16px; line-height: 49px; font-weight: 600; border-bottom: 1px solid #d2d2d2 } .cart-notification img { float: left; margin-top: 11px; margin-right: 20px; margin-left: 30px } .cart-notification p.name { float: left; width: 200px; margin-top: 23px; font-weight: 600 } .cart-notification p.price { float: left; width: auto; margin-top: 32px; font-weight: 600; text-align: right } .dropdown .wrapper.error { outline: 1px solid #f00 } .store .modal #popup .pop-content { overflow: scroll; padding: 0 40px } .store .modal #popup .pop-content a { white-space: nowrap; text-decoration: none; color: #00a9ec } .store .modal #popup .pop-content dl { display: table; width: 100%; margin: 0 auto } .store .modal #popup .pop-content h6 { position: absolute; top: 35px; left: 0; margin: 0; font-size: 40px; font-weight: 300; color: #00adef } .store .modal #popup .pop-content dt,.store .modal #popup .pop-content dd { float: left; position: relative; box-sizing: border-box; margin: 0; border-top: 1px solid #ececec } .store .modal #popup .pop-content dt:first-child,.store .modal #popup .pop-content dd:first-child { border-top: 0 } .store .modal #popup .pop-content dt { clear: both; width: 40%; padding: 25px 40px 20px 50px } .store .modal #popup .pop-content dt p { margin: 0; font-size: 14px; line-height: 22px; font-weight: 600 } .store .modal #popup .pop-content dd { width: 60%; padding: 25px 0 10px 60px } .store .modal #popup .pop-content dd a { left: 20px } .store .modal #popup .pop-content dd p { margin: 0 0 15px; font-size: 14px; font-size: 14px; line-height: 22px } .no-break,.nobreak,.nb { white-space: nowrap; display: inline-block } @media only screen and (max-width: 999px) { .no-scroll,.no-scroll body { overflow: hidden } } footer.big { display: block } footer.small { display: none } #global-footer { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; background-color: #e2e2e2 } .russian #global-footer { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .gf-links { position: relative; width: calc(100% - 40px); max-width: 1000px; margin: 0 auto 25px auto; padding-top: 53px } .gf-links:after { content: ''; display: table; clear: both } .gf-links h1,.gf-links a { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; margin: 0; padding: 0; font-size: 12px; line-height: 24px; font-weight: 400; text-decoration: none } .gf-links h1 { font-weight: 600; color: #363636 } .gf-links a { color: #363636 } .gf-links a:hover { text-decoration: underline; color: #363636 } .gf-links ul { margin: 0; padding: 0; list-style: none } .gf-links img { float: right; margin-left: 15px } .gf-links .gf-col { float: left; width: 28.5% } .gf-links .gf-col:nth-child(4) { width: 14.5% } .gf-baseline { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; width: calc(100% - 40px); max-width: 1000px; margin: 0 auto; padding: 27px 0 63px; border-top: 1px solid #d2d2d2 } .gf-baseline .gf-copyright { box-sizing: border-box; width: 57%; padding-right: 10px } .gf-baseline .gf-copyright p { font-size: 11px; line-height: 16px; color: #363636 } .gf-baseline .gf-copyright p .copyright-spacer { display: none } .gf-baseline .gf-copyright p a { font-weight: 400; color: #363636; text-decoration: underline } .gf-baseline .gf-actions { box-sizing: border-box; width: calc(43% - 145px); padding-right: 10px } .gf-baseline .gf-actions p { font-size: 12px; line-height: normal; color: #333; white-space: nowrap } .gf-baseline .gf-actions .gf-socials { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px } .gf-baseline .gf-actions .gf-socials .gf-social-item { margin-left: 10px } .gf-baseline .gf-actions .gf-sites { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .gf-baseline .gf-actions .gf-location-changer-link { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left: 10px; text-decoration: none } .gf-baseline .gf-actions .gf-location-changer-link p { color: #727272 } .gf-baseline .gf-actions .gf-location-flag { width: 27px; height: 18px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags.png?_v=1507873145); background-size: 135px 108px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .gf-baseline .gf-actions .gf-location-flag { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags@2x.png?_v=1507873094) } } .gf-baseline .gf-actions .gf-location-flag.au { background-position: -0 -0 } .gf-baseline .gf-actions .gf-location-flag.at { background-position: -27px -0 } .gf-baseline .gf-actions .gf-location-flag.br { background-position: -54px -0 } .gf-baseline .gf-actions .gf-location-flag.ca { background-position: -81px -0 } .gf-baseline .gf-actions .gf-location-flag.cn { background-position: -108px -0 } .gf-baseline .gf-actions .gf-location-flag.dk { background-position: -0 -18px } .gf-baseline .gf-actions .gf-location-flag.fi { background-position: -27px -18px } .gf-baseline .gf-actions .gf-location-flag.fr { background-position: -54px -18px } .gf-baseline .gf-actions .gf-location-flag.de { background-position: -81px -18px } .gf-baseline .gf-actions .gf-location-flag.hk { background-position: -108px -18px } .gf-baseline .gf-actions .gf-location-flag.in { background-position: -0 -36px } .gf-baseline .gf-actions .gf-location-flag.it { background-position: -27px -36px } .gf-baseline .gf-actions .gf-location-flag.jp { background-position: -54px -36px } .gf-baseline .gf-actions .gf-location-flag.kr { background-position: -81px -36px } .gf-baseline .gf-actions .gf-location-flag.mx { background-position: -108px -36px } .gf-baseline .gf-actions .gf-location-flag.nl { background-position: -0 -54px } .gf-baseline .gf-actions .gf-location-flag.nz { background-position: -27px -54px } .gf-baseline .gf-actions .gf-location-flag.no { background-position: -54px -54px } .gf-baseline .gf-actions .gf-location-flag.pt { background-position: -81px -54px } .gf-baseline .gf-actions .gf-location-flag.ru { background-position: -108px -54px } .gf-baseline .gf-actions .gf-location-flag.sg { background-position: -0 -72px } .gf-baseline .gf-actions .gf-location-flag.sa { background-position: -27px -72px } .gf-baseline .gf-actions .gf-location-flag.es { background-position: -54px -72px } .gf-baseline .gf-actions .gf-location-flag.se { background-position: -81px -72px } .gf-baseline .gf-actions .gf-location-flag.tw { background-position: -108px -72px } .gf-baseline .gf-actions .gf-location-flag.tr { background-position: -0 -90px } .gf-baseline .gf-actions .gf-location-flag.ae { background-position: -27px -90px } .gf-baseline .gf-actions .gf-location-flag.uk { background-position: -54px -90px } .gf-baseline .gf-actions .gf-location-flag.us { background-position: -81px -90px } .gf-baseline .gf-logo { width: 145px } .gf-baseline .gf-logo img { display: block } .gf-baseline .gf-actions .gf-location-flag { width: 27px; height: 18px; margin-right: 10px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags.png?_v=1507873145); background-size: 135px 108px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .gf-baseline .gf-actions .gf-location-flag { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags@2x.png?_v=1507873094) } } .gf-baseline .gf-actions .gf-location-flag.au { background-position: -0 -0 } .gf-baseline .gf-actions .gf-location-flag.at { background-position: -27px -0 } .gf-baseline .gf-actions .gf-location-flag.br { background-position: -54px -0 } .gf-baseline .gf-actions .gf-location-flag.ca { background-position: -81px -0 } .gf-baseline .gf-actions .gf-location-flag.cn { background-position: -108px -0 } .gf-baseline .gf-actions .gf-location-flag.dk { background-position: -0 -18px } .gf-baseline .gf-actions .gf-location-flag.fi { background-position: -27px -18px } .gf-baseline .gf-actions .gf-location-flag.fr { background-position: -54px -18px } .gf-baseline .gf-actions .gf-location-flag.de { background-position: -81px -18px } .gf-baseline .gf-actions .gf-location-flag.hk { background-position: -108px -18px } .gf-baseline .gf-actions .gf-location-flag.in { background-position: -0 -36px } .gf-baseline .gf-actions .gf-location-flag.it { background-position: -27px -36px } .gf-baseline .gf-actions .gf-location-flag.jp { background-position: -54px -36px } .gf-baseline .gf-actions .gf-location-flag.kr { background-position: -81px -36px } .gf-baseline .gf-actions .gf-location-flag.mx { background-position: -108px -36px } .gf-baseline .gf-actions .gf-location-flag.nl { background-position: -0 -54px } .gf-baseline .gf-actions .gf-location-flag.nz { background-position: -27px -54px } .gf-baseline .gf-actions .gf-location-flag.no { background-position: -54px -54px } .gf-baseline .gf-actions .gf-location-flag.pt { background-position: -81px -54px } .gf-baseline .gf-actions .gf-location-flag.ru { background-position: -108px -54px } .gf-baseline .gf-actions .gf-location-flag.sg { background-position: -0 -72px } .gf-baseline .gf-actions .gf-location-flag.sa { background-position: -27px -72px } .gf-baseline .gf-actions .gf-location-flag.es { background-position: -54px -72px } .gf-baseline .gf-actions .gf-location-flag.se { background-position: -81px -72px } .gf-baseline .gf-actions .gf-location-flag.tw { background-position: -108px -72px } .gf-baseline .gf-actions .gf-location-flag.tr { background-position: -0 -90px } .gf-baseline .gf-actions .gf-location-flag.ae { background-position: -27px -90px } .gf-baseline .gf-actions .gf-location-flag.uk { background-position: -54px -90px } .gf-baseline .gf-actions .gf-location-flag.us { background-position: -81px -90px } @media only screen and (max-width: 999px) { .responsive footer.big { display: none } .responsive footer.small { display: block } .responsive .gf-section { margin: 0 20px; border-bottom: 1px solid #d7d7d7 } .responsive .gf-section ul { overflow: hidden; max-height: 0; padding-left: 20px; transition: max-height .25s ease-in } .responsive .gf-section ul li:last-child { margin-bottom: 20px } .responsive .gf-section.open.products ul { max-height: 500px } .responsive .gf-section.open.support ul { max-height: 100px } .responsive .gf-section.open.community ul { max-height: 100px } .responsive .gf-section.open.company ul { max-height: 150px } .responsive .gf-links { width: 100%; margin: 0; padding-top: 10px } .responsive .gf-links h1 { position: relative; font-size: 16px; line-height: 52px; font-weight: 300; color: #333 } .responsive .gf-links h1:hover { font-weight: 400; cursor: pointer } .responsive .gf-links h1 .gf-small-expand-arrow { position: relative; top: 23px; right: 6px } .responsive .gf-links .gf-section.open h1 .gf-small-expand-arrow { -webkit-transform: rotate(-180deg); transform: rotate(-180deg) } .responsive .gf-baseline { display: block; width: 100% !important; padding: 0 !important; border-top: none !important } .responsive .gf-baseline .gf-actions { display: block; float: none !important; width: 100% !important; padding-right: 0; border-bottom: 1px solid #d7d7d7 } .responsive .gf-baseline .gf-actions .gf-follow-us { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 20px; border-top: 1px solid #d7d7d7; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .responsive .gf-baseline .gf-actions .gf-follow-us.desktop { display: none } .responsive .gf-baseline .gf-actions .gf-follow-us p { margin-right: 10px; font-size: 16px; line-height: 52px; font-weight: 300; color: #333 } .responsive .gf-baseline .gf-actions .gf-follow-us-icons { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .responsive .gf-baseline .gf-actions .gf-follow-us-icons a { display: block } .responsive .gf-baseline .gf-actions .gf-follow-us-icons a:not(:first-child) { margin-left: 10px } .responsive .gf-baseline .gf-actions .gf-location { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 20px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .responsive .gf-baseline .gf-actions .gf-location:hover { cursor: pointer } .responsive .gf-baseline .gf-actions .gf-location:hover p:nth-child(3) { font-weight: 400 } .responsive .gf-baseline .gf-actions .gf-location p { margin-right: 15px; font-size: 16px; line-height: 52px; font-weight: 300; color: #333 } .responsive .gf-baseline .gf-actions .gf-location .gf-small-expand-arrow { position: absolute; top: 23px; right: 26px } .responsive .gf-baseline .gf-actions .gf-location-flag { display: inline-block !important; float: none !important; margin-right: 10px } .responsive .countries-state { display: none; position: absolute } .responsive .countries-state:checked ~ .gf-countries { display: block; width: auto; max-height: 820px; border-top: 0 } .responsive .countries-state:checked ~ .gf-location .gf-small-expand-arrow { -webkit-transform: rotate(-180deg); transform: rotate(-180deg) } .responsive .countries-state:checked ~ .gf-follow-us { border-top: 0 } .responsive .gf-countries { overflow: hidden; width: 100%; max-height: 0; margin: 0 auto; transition: max-height .25s ease-in; background-color: #d4d4d4 } .responsive .gf-countries h4 { font-size: 16px; line-height: 19px; font-weight: 600; margin-top: 15px; margin-left: 28px } .responsive .gf-countries .gf-countries-container { overflow: hidden; position: relative; box-sizing: border-box; width: 100%; margin: 0 auto; padding: 13px 0px 20px 15px } .responsive .gf-countries .gf-countries-container a { float: left; box-sizing: border-box; width: 25%; margin-bottom: 10px; padding: 5px; cursor: pointer } .responsive .gf-countries .gf-countries-container a:hover { border-radius: 3px; background-color: #f2f4f4 } .responsive .gf-countries .flag-icon { display: inline-block; width: 43px; height: 28px; margin: 0 auto; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags.png?_v=1507873145); background-size: 215px 168px } } @media only screen and (max-width: 999px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 999px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (max-width: 999px) and (min-resolution: 120dpi) { .responsive .gf-countries .flag-icon { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags@2x.png?_v=1507873094) } } @media only screen and (max-width: 999px) { .responsive .gf-countries span { float: left; margin-left: 14px; font-size: 14px; line-height: 28px; color: #333 } .responsive .gf-baseline .gf-copyright { float: none !important; width: 100% !important; padding: 0 20px !important } .responsive .gf-baseline .gf-copyright p { width: 100% !important; padding: 20px 0; font-size: 11px !important; line-height: 13px } .responsive .gf-baseline .gf-copyright p .copyright-spacer { display: block !important } .responsive .gf-baseline .gf-logo { display: block; float: none !important; width: 100% !important; height: 77px; background-color: #292929 } .responsive .gf-baseline .gf-logo img { float: right; margin: 16px 21px 0 0 } .responsive .gf-countries div .flag-icon { background-color: #fff } .responsive .gf-countries div a.au .flag-icon { background-position: -0 -0 } .responsive .gf-countries div a.at .flag-icon { background-position: -43px -0 } .responsive .gf-countries div a.br .flag-icon { background-position: -86px 0 } .responsive .gf-countries div a.ca .flag-icon { background-position: -129px 0 } .responsive .gf-countries div a.cn .flag-icon { background-position: -172px 0 } .responsive .gf-countries div a.dk .flag-icon { background-position: 0px -28px } .responsive .gf-countries div a.fi .flag-icon { background-position: -43px -28px } .responsive .gf-countries div a.fr .flag-icon { background-position: -86px -28px } .responsive .gf-countries div a.de .flag-icon { background-position: -129px -28px } .responsive .gf-countries div a.hk .flag-icon { background-position: -172px -28px } .responsive .gf-countries div a.in .flag-icon { background-position: 0 -56px } .responsive .gf-countries div a.it .flag-icon { background-position: -43px -56px } .responsive .gf-countries div a.jp .flag-icon { background-position: -86px -56px } .responsive .gf-countries div a.kr .flag-icon { background-position: -129px -56px } .responsive .gf-countries div a.mx .flag-icon { background-position: -172px -56px } .responsive .gf-countries div a.nl .flag-icon { background-position: 0px -84px } .responsive .gf-countries div a.nz .flag-icon { background-position: -43px -84px } .responsive .gf-countries div a.no .flag-icon { background-position: -86px -84px } .responsive .gf-countries div a.pt .flag-icon { background-position: -129px -84px } .responsive .gf-countries div a.ru .flag-icon { background-position: -172px -84px } .responsive .gf-countries div a.sg .flag-icon { background-position: 0px -112px } .responsive .gf-countries div a.sa .flag-icon { background-position: -43px -112px } .responsive .gf-countries div a.es .flag-icon { background-position: -86px -112px } .responsive .gf-countries div a.se .flag-icon { background-position: -129px -112px } .responsive .gf-countries div a.tw .flag-icon { background-position: -172px -112px } .responsive .gf-countries div a.tr .flag-icon { background-position: 0px -140px } .responsive .gf-countries div a.ae .flag-icon { background-position: -43px -140px } .responsive .gf-countries div a.uk .flag-icon { background-position: -86px -140px } .responsive .gf-countries div a.us .flag-icon { background-position: -129px -140px } } .responsive .gf-countries .gf-countries-container a { float: left; box-sizing: border-box; width: 49%; margin-bottom: 12px; padding: 5px; cursor: pointer; margin-left: 1% } @media only screen and (min-width: 605px) { .responsive .gf-countries .gf-countries-container a { width: 32% } } @media only screen and (min-width: 768px) { .responsive .gf-countries .gf-countries-container a { width: 24% } .responsive .countries-state:checked ~ .gf-countries { display: block; width: auto; max-height: 740px; border-top: 0 } } .location-changer { display: none; position: absolute; z-index: 300; top: -398px; width: 584px; margin-bottom: 5px; left: calc(((100vw - 40px) - 584px) / 2) } @media only screen and (min-width: 1040px) { .location-changer { left: calc((1000px - 584px) / 2) } } .location-changer .lc-top { height: 7px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-top.png?_v=1507069243); background-size: 584px 7px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .location-changer .lc-top { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-top@2x.png?_v=1507069243) } } .location-changer .lc-bottom { position: relative; height: 14px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-bottom.png?_v=1507069024); background-size: 584px 14px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .location-changer .lc-bottom { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-bottom@2x.png?_v=1507069024) } } .location-changer .lc-bottom-arrow { position: absolute; top: 7px; width: 16px; height: 10px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-bottom-arrow.png?_v=1507070826); background-size: 16px 10px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .location-changer .lc-bottom-arrow { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-bottom-arrow@2x.png?_v=1507070826) } } .location-changer .lc-title { height: 35px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-tile.png?_v=1507070402); background-size: 584px 10px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .location-changer .lc-title { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-tile@2x.png?_v=1507070402) } } .location-changer .lc-title h4 { margin-left: 24px; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; font-size: 16px; line-height: 19px; font-weight: 600 } .location-changer .lc-flags { padding-top: 9px; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-tile.png?_v=1507070402); background-size: 584px 10px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .location-changer .lc-flags { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-tile@2x.png?_v=1507070402) } } .location-changer .lc-flags:after { content: ''; display: table; clear: both } .location-changer .lc-flags div { float: left; width: 95px; height: 80px } .location-changer .lc-flags div:nth-child(n+25) { height: 65px } .location-changer .lc-flags div a { display: block; width: 43px; height: 28px; margin: 0 auto; box-shadow: 0 0 1px 0 #ccc; background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags.png?_v=1507873145); background-size: 215px 168px } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .location-changer .lc-flags div a { background-image: url(https://images.blackmagicdesign.com/images/common/location-changer/lc-flags@2x.png?_v=1507873094) } } .location-changer .lc-flags div a:hover { box-shadow: 0 0 2px 2px #64abd3 } .location-changer .lc-flags div a.au { background-position: -0 -0 } .location-changer .lc-flags div a.at { background-position: -43px -0 } .location-changer .lc-flags div a.br { background-position: -86px -0 } .location-changer .lc-flags div a.ca { background-position: -129px -0 } .location-changer .lc-flags div a.cn { background-position: -172px -0 } .location-changer .lc-flags div a.dk { background-position: -0 -28px } .location-changer .lc-flags div a.fi { background-position: -43px -28px } .location-changer .lc-flags div a.fr { background-position: -86px -28px } .location-changer .lc-flags div a.de { background-position: -129px -28px } .location-changer .lc-flags div a.hk { background-position: -172px -28px } .location-changer .lc-flags div a.in { background-position: -0 -56px } .location-changer .lc-flags div a.it { background-position: -43px -56px } .location-changer .lc-flags div a.jp { background-position: -86px -56px } .location-changer .lc-flags div a.kr { background-position: -129px -56px } .location-changer .lc-flags div a.mx { background-position: -172px -56px } .location-changer .lc-flags div a.nl { background-position: -0 -84px } .location-changer .lc-flags div a.nz { background-position: -43px -84px } .location-changer .lc-flags div a.no { background-position: -86px -84px } .location-changer .lc-flags div a.pt { background-position: -129px -84px } .location-changer .lc-flags div a.ru { background-position: -172px -84px } .location-changer .lc-flags div a.sg { background-position: -0 -112px } .location-changer .lc-flags div a.sa { background-position: -43px -112px } .location-changer .lc-flags div a.es { background-position: -86px -112px } .location-changer .lc-flags div a.se { background-position: -129px -112px } .location-changer .lc-flags div a.tw { background-position: -172px -112px } .location-changer .lc-flags div a.tr { background-position: -0 -140px } .location-changer .lc-flags div a.ae { background-position: -43px -140px } .location-changer .lc-flags div a.uk { background-position: -86px -140px } .location-changer .lc-flags div a.us { background-position: -129px -140px } .location-changer .lc-flags div span { display: block; margin: 6px 0 0 0; font-size: 12px; text-align: center; color: #333 } .desktop #store-footer ul,.desktop #store-footer li,.desktopfamily #store-footer ul,.desktopfamily #store-footer li { margin: 0; padding: 0; list-style-type: none } .desktop #store-footer .dropdown-list-state,.desktopfamily #store-footer .dropdown-list-state { display: none; position: absolute } .desktop #store-footer .sf-links li,.desktopfamily #store-footer .sf-links li { margin-bottom: 10px } .desktop #store-footer .dropdown,.desktopfamily #store-footer .dropdown { display: none } .desktop #store-footer .container,.desktopfamily #store-footer .container { display: block; clear: both; position: relative; box-sizing: border-box; width: 1000px; margin: 0 auto; padding: 0 } .desktop #store-footer .column,.desktop #store-footer .columns,.desktopfamily #store-footer .column,.desktopfamily #store-footer .columns { box-sizing: border-box; width: 100% } .desktop #store-footer .columns,.desktopfamily #store-footer .columns { float: left } .desktop #store-footer .columns:after,.desktopfamily #store-footer .columns:after { content: ''; display: table; clear: both } .desktop #store-footer .column,.desktopfamily #store-footer .column { float: left; padding-right: 5px; padding-left: 5px; vertical-align: top } .desktop #store-footer .column.three-md,.desktopfamily #store-footer .column.three-md { width: 250px } .desktop #store-footer .sf-links,.desktopfamily #store-footer .sf-links { height: 380px; padding-top: 53px; padding-bottom: 42px } .desktop #store-footer .sf-baseline .container,.desktopfamily #store-footer .sf-baseline .container { height: 107px; padding: 22px 0 } .desktop #store-footer .sf-baseline .sf-copyright,.desktopfamily #store-footer .sf-baseline .sf-copyright { width: 64%; margin-bottom: 0; margin-bottom: 0; padding: 0 20px 0 0; border-bottom: none } .desktop #store-footer .sf-baseline .sf-location,.desktopfamily #store-footer .sf-baseline .sf-location { padding: 0 } .desktop #store-footer .sf-baseline .sf-copyright p,.desktopfamily #store-footer .sf-baseline .sf-copyright p { font-size: .75rem; line-height: 15px; color: #0e303a } .desktop #store-footer .sf-baseline .sf-social,.desktopfamily #store-footer .sf-baseline .sf-social { padding: 0; border-bottom: none } .desktop #store-footer .sf-links h4,.desktopfamily #store-footer .sf-links h4 { display: block } .desktop #store-footer .sf-links-details,.desktopfamily #store-footer .sf-links-details { display: inline-block } .desktop #store-footer .column.sf-actions,.desktopfamily #store-footer .column.sf-actions { width: 18% } .desktop #store-footer .sf-baseline .sf-social p,.desktop #store-footer .sf-baseline .sf-location p,.desktopfamily #store-footer .sf-baseline .sf-social p,.desktopfamily #store-footer .sf-baseline .sf-location p { display: block } .desktop #store-footer .sf-baseline .sf-social .sf-social-icons,.desktop #store-footer .sf-baseline .sf-location .sf-location-flag,.desktopfamily #store-footer .sf-baseline .sf-social .sf-social-icons,.desktopfamily #store-footer .sf-baseline .sf-location .sf-location-flag { float: left; margin-left: 17px } .desktop #store-footer .sf-baseline .sf-location span,.desktopfamily #store-footer .sf-baseline .sf-location span { display: none } .desktop #store-footer .sf-baseline .sf-social p,.desktop #store-footer .sf-baseline .sf-location p,.desktopfamily #store-footer .sf-baseline .sf-social p,.desktopfamily #store-footer .sf-baseline .sf-location p { font-size: .875rem; line-height: 1rem; font-weight: 400; color: #363636 } .desktop #store-footer .sf-social p,.desktop #store-footer .sf-location p,.desktopfamily #store-footer .sf-social p,.desktopfamily #store-footer .sf-location p { float: left; width: 62px; margin: 0 } .desktop #store-footer .sf-social-icons,.desktop #store-footer .sf-location-changer-link,.desktopfamily #store-footer .sf-social-icons,.desktopfamily #store-footer .sf-location-changer-link { width: 80px } .desktop #store-footer .sf-social-icons a:last-child,.desktopfamily #store-footer .sf-social-icons a:last-child { margin-top: 3px } .desktop #store-footer .sf-logo,.desktopfamily #store-footer .sf-logo { display: block; width: 18%; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end } .desktop #store-footer .newsletter-box,.desktopfamily #store-footer .newsletter-box { height: 53px; margin-bottom: 40px; padding-left: 15px; font-size: .875rem; line-height: 1em; color: #0e303a; border: 1px solid #0e303a; border-radius: 2px } .desktop #store-footer .newsletter-box::-webkit-input-placeholder,.desktopfamily #store-footer .newsletter-box::-webkit-input-placeholder { font-size: .875rem; line-height: 1em; color: #0e303a } .desktop .location-changer-new .lc-flags,.desktopfamily .location-changer-new .lc-flags { height: 72% } .desktop .location-changer-new .lc-flags h5,.desktopfamily .location-changer-new .lc-flags h5 { margin-top: 0 } .desktop .location-changer-new .lc-flags a,.desktopfamily .location-changer-new .lc-flags a { text-decoration: none } .desktop .flag-txt,.desktopfamily .flag-txt { display: inline-block !important } .desktop .location-changer-new,.desktopfamily .location-changer-new { display: none; position: fixed !important; z-index: 10000; bottom: 0 !important; left: 50% !important; width: 980px !important; height: 45% !important; margin-left: -492px } .desktop .location-changer-active,.desktopfamily .location-changer-active { display: inherit !important } .desktop .blackout-active,.desktopfamily .blackout-active { display: block } .dropdown { display: table; width: 100%; max-width: 100% } .dropdown select { position: absolute; width: 100%; height: 100%; outline: 0; border: 0; opacity: 0; z-index: 1; cursor: pointer; box-sizing: border-box } .dropdown .wrapper { position: relative; display: block; height: 40px; background-color: #F2F2F2; color: #000; border: 1px solid #EBEBEB; border-radius: 3px; box-sizing: border-box; overflow: hidden } .dropdown label ~ .wrapper { margin-left: 100px } .dropdown .wrapper:hover { cursor: pointer; border-color: #BBB } .dropdown .text { position: relative; display: inline-block; padding: 0 18px; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 40px; color: #2d2d2e; white-space: nowrap; overflow: hidden } .dropdown .arrow { position: absolute; width: 11px; height: 9px; right: 20px; top: 16px; background: url(https://images.blackmagicdesign.com/images/webstore/shared/store-icons.png?_v=1460999824) no-repeat 0 -30px } #product-main .dropdown label { width: 100%; font-size: 10px; color: #2e3133; text-align: center; height: 36px; font-weight: 700; text-transform: uppercase } #product-main .dropdown .wrapper { display: inline-block; width: 100%; height: 42px; margin-left: 0; border-color: #B1B1B1; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.15); background-color: #fff; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWYxZjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA="); background-size: 100%; background-image: linear-gradient(#fff 7%, #f9f9f9 8%, #f1f1f1 100%); border-radius: 5px } #product-main .dropdown .wrapper:hover { background: #EEE; border-color: #969696 } #product-main .dropdown .text { line-height: 42px; font-weight: 600; color: #000; padding: 0 20px } #product-main .dropdown .arrow { background: none; width: 0; height: 0; top: 17px; border-style: solid; border-width: 9px 6px 0 6px; border-color: #4f4f4f transparent transparent transparent } .dropdown.disabled select { cursor: default } .dropdown.disabled label,.dropdown.disabled .text { color: #E6E6E6 } .dropdown.disabled .wrapper { background: #FFF; border-color: #EBEBEB } .dropdown.disabled .arrow { opacity: 0.2 } .single-product { display: none } .single-product+p { margin-top: 9px } .textbox input,.textbox textarea,.textarea input,.textarea textarea { box-sizing: border-box; border-radius: 4px; display: block; width: 100%; height: 40px; padding: 6px 15px; margin-bottom: 14px; font-size: 14px; line-height: 140%; color: #494949; background-color: #f2f2f2; border: 1px solid #EBEBEB } .textbox input:focus,.textbox textarea:focus,.textarea input:focus,.textarea textarea:focus { box-shadow: 0 0 4px 0 #d1d1d1; border-color: #dbdbdb; background: white; outline: none } .textbox input:hover,.textbox textarea:hover,.textarea input:hover,.textarea textarea:hover { border-color: #BBB } .textbox label ~ .wrapper,.textbox label ~ .wrapper,.textarea label ~ .wrapper,.textarea label ~ .wrapper { margin-left: 100px } .textbox .wrapper,.textarea .wrapper { display: block } .textarea textarea { height: auto; resize: vertical; padding: 12px } .textbox.disabled input,.textbox.disabled textarea,.textarea.disabled input,.textarea.disabled textarea { background: #FFF; border-color: #EBEBEB; color: #E6E6E6; resize: none } .textbox.disabled label,.textarea.disabled label { color: #EBEBEB } .textbox.disabled input::-webkit-input-placeholder,.textarea.disabled input::-webkit-input-placeholder { color: #FFF } .textbox.disabled input:-moz-placeholder,.textarea.disabled input:-moz-placeholder { color: #FFF } .textbox.disabled input::-moz-placeholder,.textarea.disabled input::-moz-placeholder { color: #FFF } .textbox.disabled input:-ms-input-placeholder,.textarea.disabled input:-ms-input-placeholder { color: #FFF } .checkbox { position: relative; display: block; min-height: 30px; margin: 10px 0 10px 0; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 3px } .checkbox label { display: inline-block; float: none; width: 100%; max-width: 100%; min-height: 30px; padding: 9px 7px 7px 22px; margin-bottom: 0; font-weight: 400; cursor: pointer; box-sizing: border-box } .checkbox input { position: absolute; margin: 2px 0 0 -22px; cursor: pointer } .checkbox span { display: inline-block; float: none; width: 100%; max-width: 100%; min-height: 30px; padding: 9px 7px 7px 22px; margin-bottom: 0; font-weight: 400; cursor: pointer } .checkbox.disabled label { cursor: default; color: #EBEBEB } .checkbox.disabled input { opacity: 0.5 } .textbox label,.textarea label,.dropdown label { float: left; width: 100px; height: 40px; line-height: 40px; margin: 0; font-weight: 600; font-size: 13px } .error input,.error textarea,.dropdown.error .wrapper { background: #fff2f2; border-color: #ee0032 } .error label { color: #ee0032 } .button .error-msg { display: none; position: absolute; left: 0; top: -60px; background: #ee0032; border: 1px solid #ab0025; border-radius: 3px } .error-msg { display: block; width: 100%; background: #ee0032; color: #fff; border-radius: 3px; box-sizing: border-box; text-align: center; padding: 12px; font-size: 14px; font-weight: 600 } .error-msg.active { display: block } .error-message { padding: 0.5em 1em; background-color: red; color: #fff; font-weight: bold } .tooltip { position: relative; width: 19px; height: 19px; border: 1px solid #c6c6c6; border-radius: 10px; background-color: #fff; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjklIiBzdG9wLWNvbG9yPSIjZjlmOWY5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjFmMWYxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g"); background-size: 100%; background-image: linear-gradient(#fff 8%, #fff 8%, #f9f9f9 9%, #f1f1f1 100%); background: #f5f5f5; cursor: pointer } .tooltip>span { display: block; width: 20px; text-align: center; line-height: 19px; letter-spacing: -1px; font-weight: 600 } .tooltip>p { display: none; position: absolute; width: 200px; margin: 0; padding: 10px 14px 8px; left: -240px; top: -7px; color: #FFF; background: #4E4E4E; font-weight: 600 } .tooltip>p>span { position: absolute; right: -9px; top: 11px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #4e4e4e } .tooltip:hover p { display: block } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { .dropdown .arrow { background-image: url(https://images.blackmagicdesign.com/images/webstore/shared/store-icons@2x.png?_v=1460999824); background-size: 175px 356px !important } } .fr .textbox label { line-height: 13px; position: relative; top: 12px } .es .textbox label { line-height: 13px; position: relative; top: 12px } .button { display: inline-block; box-sizing: border-box; height: 27px; padding: 0 18px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 24px; font-weight: 600; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: pointer; text-align: center; vertical-align: top; text-decoration: none; color: #363636; border: 1px solid #c5c5c5; border-radius: 50px; outline: none; background-image: linear-gradient(to bottom, #fff 0%, #f1f1f1 100%); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.12) } .button:hover { color: #363636; background: #f1f1f1 } .button-flat { display: inline-block; min-height: 40px; padding: 10px 10px; height: auto; min-width: 138px; max-width: 200px; margin: 0 0 0 auto; line-height: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #FFF; text-decoration: none; background-image: none; border: 1px solid #0088cf; border-radius: 4px; margin-right: 5px; cursor: pointer; text-align: center; box-shadow: none; color: #0088cf; font-size: 16px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } @media only screen and (max-width: 560px) { .button-flat { width: 100%; max-width: none } } .button-flat:first-child:not(:only-child) { margin-bottom: 5px } .button-flat.primary { color: #0088cf; border-color: #0088cf } .button-flat.primary.solid { background: #0088cf; color: #fff } .button-flat.secondary { color: #666; border-color: #666 } .button-flat.secondary.solid { background: #666; color: #fff } .button-flat.tertiary { color: #f48c00; border-color: #f48c00 } .button-flat.tertiary.solid { background: #f48c00; color: #fff } .button-flat.success { color: #2eb665; border-color: #2eb665 } .button-flat.success.solid { background: #2eb665; color: #fff } .button.small { height: 21px; padding: 0 14px; font-size: 12px; line-height: 19px } .button.large { height: 42px; padding: 0 80px; line-height: 40px } .button.full-width { width: 100% } .button.primary { color: #fff; border-color: #0088cf; background-image: linear-gradient(to bottom, #00aeef 0%, #0099ea 100%); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25) } .button.primary:hover { color: #fff; background-color: #0092e0; background-image: none } .button.secondary { color: #fff; border-color: #f48c00; background-image: linear-gradient(to bottom, #f79b00 0%, #f18400 100%); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25) } .button.secondary:hover { color: #fff; background-color: #e77e00; background-image: none } .button.tertiary { color: #fff; border-color: #2a2a2a; background-image: linear-gradient(to bottom, #757576 0%, #363636 100%); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25) } .button.tertiary:hover { color: #fff; background-color: #313131; background-image: none } .button.success { color: #fff; border-color: #2eb665; background-image: linear-gradient(to bottom, #33cc72 0%, #32ba69 100%); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.12) } .button.success:hover { color: #fff; background-color: #30b264; background-image: none } .button.icon-arrow { padding: 0 14px 0 18px } .button.icon-arrow:after { content: ''; display: block; float: right; width: 7px; height: 100%; margin-left: 9px; background-image: url(https://images.blackmagicdesign.com/images/common/buttons/arrow.svg?_v=1480564070); background-repeat: no-repeat; background-size: 7px 7px; background-position: right center } .button.icon-arrow.primary:after,.button.icon-arrow.secondary:after,.button.icon-arrow.tertiary:after,.button.icon-arrow.success:after { background-image: url(https://images.blackmagicdesign.com/images/common/buttons/arrow-reverse.svg?_v=1480564070) } .button.icon-edit { padding: 0 14px 0 18px } .button.icon-edit:after { content: ''; display: block; float: right; width: 14px; height: 100%; margin-left: 9px; background-image: url(https://images.blackmagicdesign.com/images/common/buttons/edit.svg?_v=1480564070); background-repeat: no-repeat; background-size: 14px 15px; background-position: right center } .button.icon-edit.primary:after,.button.icon-edit.secondary:after,.button.icon-edit.tertiary:after,.button.icon-edit.success:after { background-image: url(https://images.blackmagicdesign.com/images/common/buttons/edit-reverse.svg?_v=1480564070) } .button.icon-print { padding: 0 14px 0 18px } .button.icon-print:after { content: ''; display: block; float: right; width: 14px; height: 100%; margin-left: 9px; background: url(https://images.blackmagicdesign.com/images/common/buttons/print.svg?_v=1480564070) no-repeat; background-repeat: no-repeat; background-size: 14px 13px; background-position: right center } .button.icon-print.primary:after,.button.icon-print.secondary:after,.button.icon-print.tertiary:after,.button.icon-print.success:after { background-image: url(https://images.blackmagicdesign.com/images/common/buttons/print-reverse.svg?_v=1480564070) } .button.disabled { color: #cacaca; border-color: #e3e3e3; background-color: #fff !important; background-image: none; box-shadow: none; cursor: default } .button.disabled:hover { color: #cacaca } .button.disabled.icon-arrow:after { opacity: .2; background-image: url(https://images.blackmagicdesign.com/images/common/buttons/arrow.svg?_v=1480564070) } .button.disabled.icon-edit:after { opacity: .2; background-image: url(https://images.blackmagicdesign.com/images/common/buttons/edit.svg?_v=1480564070) } .button.disabled.icon-print:after { opacity: .2; background-image: url(https://images.blackmagicdesign.com/images/common/buttons/print.svg?_v=1480564070) } .button.delete { width: 40px; height: 40px; padding: 0; border: 0; background: none; box-shadow: none } .button.delete span { position: absolute; top: 12px; right: 15px; width: 10px; height: 10px; background-image: url(https://images.blackmagicdesign.com/images/common/global-nav/gn-delete.svg?_v=1466645769); background-repeat: no-repeat; background-position: 0 0; background-size: 10px 20px } .button.delete:hover span { background-position: 0 -10px }