DBrand Inspired Header
How do I make an dbrand inspired header?
What is a dbrand inspired header? How do you make a dbrand inspired header? This script and codes were developed by Umar Hamza on 27 December 2022, Tuesday.
DBrand Inspired Header Previews
DBrand Inspired Header - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DBrand Inspired Header </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="l-header" role="banner"> <div class="inner"> <nav id="block-menu-menu-toggle-menu" role="navigation" class="block block--menu block--menu-menu-toggle-menu"> <ul class="list"><li class="first last leaf itm itm--btn-menu-toggle"><a href="#menu" id="btn-menu-toggle" class="btn-menu-toggle"><span class="inner"><i class="icn" aria-hidden="true">≡</i><span class="title">Toggle Menu</span></span></a></li>
</ul></nav>
<nav id="block-menu-menu-cart" role="navigation" class="block block--menu block--menu-menu-cart"> <ul class="list"><li class="first last leaf itm itm--btn-menu-cart"><a href="/cart" id="btn-menu-cart" class="btn-menu-cart"><span class="inner"><i class="icn" aria-hidden="true">7</i><span class="title">Cart</span></span></a></li>
</ul></nav>
<nav id="block-block-3" class="block block--block block--block-3 block--brand"> <a href="/" title="Home" rel="home" class="site-logo"> <span class="inner title"><span class="delicious-seo">dbrand inc.</span></span> </a>
</nav> <div id="nav-vertical-wrapper" class="wrapper nav-vertical-wrapper"> <div class="inner"> <nav id="block-system-main-menu" role="navigation" class="block block--system block--menu block--system-main-menu"> <ul class="list"><li class="first leaf itm itm--btn-menu-info"><a href="/skins" class="btn-menu-info"><span class="inner"><i class="icn" aria-hidden="true">1</i><span class="title">Skins</span></span></a></li>
<li class="leaf active-trail itm itm--btn-menu-shop itm--active-trail"><a href="/shop" class="btn-menu-shop active-trail"><span class="inner"><i class="icn" aria-hidden="true">2</i><span class="title">Shop</span></span></a></li>
<li class="leaf itm itm--btn-menu-customs"><a href="/skins" class="btn-menu-customs"><span class="inner"><i class="icn" aria-hidden="true">3</i><span class="title">Customs</span></span></a></li>
<li class="leaf itm itm--btn-menu-contact"><a href="/contact" id="btn-menu-contact" class="btn-menu-contact"><span class="inner"><i class="icn" aria-hidden="true">4</i><span class="title">Contact</span></span></a></li>
<li class="leaf itm itm--btn-menu-howto"><a href="/skins/how-to-apply" class="btn-menu-howto"><span class="inner"><i class="icn" aria-hidden="true">8</i><span class="title">How To</span></span></a></li>
<li class="last leaf itm itm--btn-menu-shipping"><a href="/shipping" id="btn-menu-shipping" class="btn-menu-shipping"><span class="inner"><i class="icn" aria-hidden="true">9</i><span class="title">Shipping</span></span></a></li>
</ul></nav> <nav id="block-menu-menu-side-menu" role="navigation" class="block block--menu block--menu-menu-side-menu"> <ul class="list"><li class="first leaf itm itm--btn-menu-search"><a href="/feature/404-error" class="btn-menu-search"><span class="inner"><i class="icn" aria-hidden="true">5</i><span class="title">Find</span></span></a></li>
<li class="last leaf itm itm--btn-menu-account"><a href="/humans" class="btn-menu-account"><span class="inner"><i class="icn" aria-hidden="true">6</i><span class="title">Account</span></span></a></li>
</ul></nav> </div> </div> </div> </header>
</body>
</html>
DBrand Inspired Header - Script Codes CSS Codes
body.dbrand-v3-local:after { content: 'subatomar'; position: fixed; z-index: 9999; right: 0; bottom: 0; color: #fff; padding: 0.5em 1em; font-size: 14px; background: #111; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5; pointer-events: none
}
@media (min-width: 20em) { body.dbrand-v3-local:after { content: 'nano' }
}
@media (min-width: 23em) { body.dbrand-v3-local:after { content: 'micro' }
}
@media (min-width: 27em) { body.dbrand-v3-local:after { content: 'dust' }
}
@media (min-width: 30em) { body.dbrand-v3-local:after { content: 'asteroid' }
}
@media (min-width: 34em) { body.dbrand-v3-local:after { content: 'asteroid2' }
}
@media (min-width: 40em) { body.dbrand-v3-local:after { content: 'comet' }
}
@media (min-width: 48em) { body.dbrand-v3-local:after { content: 'planet' }
}
@media (min-width: 51em) { body.dbrand-v3-local:after { content: 'exoplanet' }
}
@media (min-width: 55em) { body.dbrand-v3-local:after { content: 'star' }
}
@media (min-width: 61.25em) { body.dbrand-v3-local:after { content: 'scluster' }
}
@media (min-width: 70em) { body.dbrand-v3-local:after { content: 'galaxy' }
}
@media (min-width: 80em) { body.dbrand-v3-local:after { content: 'gcluster' }
}
@media (min-width: 90em) { body.dbrand-v3-local:after { content: 'gscluster' }
}
@media (min-width: 100em) { body.dbrand-v3-local:after { content: 'universe' }
}
.l-header .itm--btn-menu-info,
.l-header .itm--btn-menu-customs,
.l-header .itm--btn-menu-search { display: none !important
}
@-webkit-keyframes rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@-webkit-keyframes framerunner { 0% { top: 0%; left: 0% } 25% { top: 0%; left: 100% } 50% { top: 100%; left: 100% } 75% { top: 100%; left: 0% } 100% { top: 0%; left: 0% }
}
@keyframes framerunner { 0% { top: 0%; left: 0% } 25% { top: 0%; left: 100% } 50% { top: 100%; left: 100% } 75% { top: 100%; left: 0% } 100% { top: 0%; left: 0% }
}
@-webkit-keyframes crossfill-front { 0% { top: 0%; right: 0%; bottom: 100%; left: 0%; background-color: #fb0 } 25% { top: 0%; right: 0%; bottom: 0%; left: 0% } 50% { top: 0%; right: 100%; bottom: 0%; left: 0%; background-color: #fb0 } 50.1% { top: 100%; right: 0%; bottom: 0%; left: 0%; background-color: #E51717 } 75% { top: 0%; right: 0%; bottom: 0%; left: 0% } 99.9% { top: 0%; right: 0%; bottom: 0%; left: 100%; background-color: #E51717 }
}
@keyframes crossfill-front { 0% { top: 0%; right: 0%; bottom: 100%; left: 0%; background-color: #fb0 } 25% { top: 0%; right: 0%; bottom: 0%; left: 0% } 50% { top: 0%; right: 100%; bottom: 0%; left: 0%; background-color: #fb0 } 50.1% { top: 100%; right: 0%; bottom: 0%; left: 0%; background-color: #E51717 } 75% { top: 0%; right: 0%; bottom: 0%; left: 0% } 99.9% { top: 0%; right: 0%; bottom: 0%; left: 100%; background-color: #E51717 }
}
@-webkit-keyframes crossfill-back { 0% { background-color: #fff } 50% { background-color: #179FE5 }
}
@keyframes crossfill-back { 0% { background-color: #fff } 50% { background-color: #179FE5 }
}
@-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 }
}
@keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 }
}
@-webkit-keyframes negativeNod { 0% { -webkit-transform: translateX(0em); transform: translateX(0em) } 20% { -webkit-transform: translateX(-0.2em); transform: translateX(-0.2em) } 40% { -webkit-transform: translateX(.2em); transform: translateX(.2em) } 60% { -webkit-transform: translateX(-0.2em); transform: translateX(-0.2em) } 80% { -webkit-transform: translateX(.2em); transform: translateX(.2em) } 100% { -webkit-transform: translateX(0em); transform: translateX(0em) }
}
@keyframes negativeNod { 0% { -webkit-transform: translateX(0em); transform: translateX(0em) } 20% { -webkit-transform: translateX(-0.2em); transform: translateX(-0.2em) } 40% { -webkit-transform: translateX(.2em); transform: translateX(.2em) } 60% { -webkit-transform: translateX(-0.2em); transform: translateX(-0.2em) } 80% { -webkit-transform: translateX(.2em); transform: translateX(.2em) } 100% { -webkit-transform: translateX(0em); transform: translateX(0em) }
}
.royalSlider { width: 600px; height: 400px; position: relative; direction: ltr
}
.royalSlider>* { float: left
}
.rsWebkit3d .rsSlide { -webkit-transform: translateZ(0)
}
.rsWebkit3d .rsSlide,
.rsWebkit3d .rsContainer,
.rsWebkit3d .rsThumbs,
.rsWebkit3d .rsPreloader,
.rsWebkit3d img,
.rsWebkit3d .rsOverflow,
.rsWebkit3d .rsBtnCenterer,
.rsWebkit3d .rsAbsoluteEl,
.rsWebkit3d .rsABlock,
.rsWebkit3d .rsLink { -webkit-backface-visibility: hidden
}
.rsFade.rsWebkit3d .rsSlide,
.rsFade.rsWebkit3d img,
.rsFade.rsWebkit3d .rsContainer { -webkit-transform: none
}
.rsOverflow { width: 100%; height: 100%; position: relative; overflow: hidden; float: left; -webkit-tap-highlight-color: transparent
}
.rsVisibleNearbyWrap { width: 100%; height: 100%; position: relative; overflow: hidden; left: 0; top: 0; -webkit-tap-highlight-color: transparent
}
.rsVisibleNearbyWrap .rsOverflow { position: absolute; left: 0; top: 0
}
.rsContainer { position: relative; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent
}
.rsArrow,
.rsThumbsArrow { cursor: pointer
}
.rsThumb { float: left; position: relative
}
.rsArrow,
.rsNav,
.rsThumbsArrow { opacity: 1; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear
}
.rsHidden { opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s linear; transition: visibility 0s linear 0.3s, opacity 0.3s linear
}
.rsGCaption { width: 100%; float: left; text-align: center
}
.royalSlider.rsFullscreen { position: fixed !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 2147483647 !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important
}
.royalSlider .rsSlide.rsFakePreloader { opacity: 1 !important; -webkit-transition: 0s; transition: 0s; display: none
}
.rsSlide { position: absolute; left: 0; top: 0; display: block; overflow: hidden; height: 100%; width: 100%
}
.royalSlider.rsAutoHeight,
.rsAutoHeight .rsSlide { height: auto
}
.rsContent { width: 100%; height: 100%; position: relative
}
.rsPreloader { position: absolute; z-index: 0
}
.rsNav { -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none
}
.rsNavItem { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25)
}
.rsThumbs { cursor: pointer; position: relative; overflow: hidden; float: left; z-index: 22
}
.rsTabs { float: left; background: none !important
}
.rsTabs,
.rsThumbs { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent
}
.rsVideoContainer { width: auto; height: auto; line-height: 0; position: relative
}
.rsVideoFrameHolder { position: absolute; left: 0; top: 0; background: #141414; opacity: 0; -webkit-transition: .3s
}
.rsVideoFrameHolder.rsVideoActive { opacity: 1
}
.rsVideoContainer iframe,
.rsVideoContainer video,
.rsVideoContainer embed,
.rsVideoContainer .rsVideoObj { position: absolute; z-index: 50; left: 0; top: 0; width: 100%; height: 100%
}
.rsVideoContainer.rsIOSVideo iframe,
.rsVideoContainer.rsIOSVideo video,
.rsVideoContainer.rsIOSVideo embed { box-sizing: border-box; padding-right: 44px
}
.rsABlock { left: 0; top: 0; position: absolute; z-index: 15
}
img.rsImg { max-width: none
}
.grab-cursor { cursor: url(grab.png) 8 8, move
}
.grabbing-cursor { cursor: url(grabbing.png) 8 8, move
}
.rsNoDrag { cursor: auto
}
.rsLink { left: 0; top: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 20; background: url(blank.gif)
}
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary { display: block
}
audio,
canvas,
video { display: inline-block
}
audio:not([controls]) { display: none; height: 0
}
[hidden],
template { display: none
}
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%
}
body { margin: 0
}
a { background: transparent
}
a:focus { outline: thin dotted
}
a:active,
a:hover { outline: 0
}
h1 { font-size: 2em; margin: 0.67em 0
}
abbr[title] { border-bottom: 1px dotted
}
b,
strong { font-weight: bold
}
dfn { font-style: italic
}
hr { box-sizing: content-box; height: 0
}
mark { background: #ff0; color: #000
}
code,
kbd,
pre,
samp { font-family: monospace, serif; font-size: 1em
}
pre { white-space: pre-wrap
}
q { quotes: "\201C" "\201D" "\2018" "\2019"
}
small { font-size: 80%
}
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline
}
sup { top: -0.5em
}
sub { bottom: -0.25em
}
img { border: 0
}
svg:not(:root) { overflow: hidden
}
figure { margin: 0
}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em
}
legend { border: 0; padding: 0
}
button,
input,
select,
textarea { font-family: inherit; font-size: 100%; margin: 0
}
button,
input { line-height: normal
}
button,
select { text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: button; cursor: pointer
}
button[disabled],
html input[disabled] { cursor: default
}
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0
}
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0
}
textarea { overflow: auto; vertical-align: top
}
table { border-collapse: collapse; border-spacing: 0
}
@font-face { font-family: 'dbicons'; src: url("fonts/db-icons/db-icons.eot"); src: url("fonts/db-icons/db-icons.eot?#iefix") format("embedded-opentype"), url("fonts/db-icons/db-icons.ttf") format("truetype"), url("fonts/db-icons/db-icons.woff") format("woff"), url("fonts/db-icons/db-icons.svg#db-icons") format("svg"); font-weight: normal; font-style: normal
}
.icn { font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none
}
.icn.icn-pseudo { font-family: EurostileNext, Eurostile, Arial, Verdana, san-serif; display: inline-block; font-size: 1.8em; line-height: 0.555em; vertical-align: top; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1
}
.icn-font { font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
}
@font-face { font-family: 'LeagueGothic'; src: url("fonts/league_cothic/leaguegothic-regular-webfont.eot"); src: url("fonts/league_cothic/leaguegothic-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/league_cothic/leaguegothic-regular-webfont.woff") format("woff"), url("fonts/league_cothic/leaguegothic-regular-webfont.ttf") format("truetype"), url("fonts/league_cothic/leaguegothic-regular-webfont.svg#league_gothicregular") format("svg"); font-weight: normal; font-style: normal
}
@font-face { font-family: 'LeagueGothic'; src: url("fonts/league_cothic/leaguegothic-italic-webfont.eot"); src: url("fonts/league_cothic/leaguegothic-italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/league_cothic/leaguegothic-italic-webfont.woff") format("woff"), url("fonts/league_cothic/leaguegothic-italic-webfont.ttf") format("truetype"), url("fonts/league_cothic/leaguegothic-italic-webfont.svg#league_gothic_italicregular") format("svg"); font-weight: normal; font-style: italic
}
@font-face { font-family: 'LeagueGothicCondensed'; src: url("fonts/league_cothic/leaguegothic-condensed-regular-webfont.eot"); src: url("fonts/league_cothic/leaguegothic-condensed-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/league_cothic/leaguegothic-condensed-regular-webfont.woff") format("woff"), url("fonts/league_cothic/leaguegothic-condensed-regular-webfont.ttf") format("truetype"), url("fonts/league_cothic/leaguegothic-condensed-regular-webfont.svg#league_gothic_condensed-Rg") format("svg"); font-weight: normal; font-style: normal
}
@font-face { font-family: 'LeagueGothicCondensed'; src: url("fonts/league_cothic/leaguegothic-condensed-italic-webfont.eot"); src: url("fonts/league_cothic/leaguegothic-condensed-italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/league_cothic/leaguegothic-condensed-italic-webfont.woff") format("woff"), url("fonts/league_cothic/leaguegothic-condensed-italic-webfont.ttf") format("truetype"), url("fonts/league_cothic/leaguegothic-condensed-italic-webfont.svg#league_gothic_condensed_itaRg") format("svg"); font-weight: normal; font-style: italic
}
@font-face { font-family: "EurostileNext"; src: url("fonts/eurostile_next/e9ef705d-e81d-4c12-a636-da03f0d94538.eot?#iefix"); src: url("fonts/eurostile_next/e9ef705d-e81d-4c12-a636-da03f0d94538.eot?#iefix") format("eot"), url("fonts/eurostile_next/cb72719e-4216-4659-891b-f36a9c6e79c0.woff") format("woff"), url("fonts/eurostile_next/0f770563-2f55-43bc-9836-95cf9bdb867d.ttf") format("truetype"), url("fonts/eurostile_next/c6398340-fc54-4743-9c18-84b1c1444ca9.svg#c6398340-fc54-4743-9c18-84b1c1444ca9") format("svg"); font-weight: 100; font-style: normal
}
@font-face { font-family: "EurostileNext"; src: url("fonts/eurostile_next/10f542b3-9979-490e-bb67-f3e662cedfa9.eot?#iefix"); src: url("fonts/eurostile_next/10f542b3-9979-490e-bb67-f3e662cedfa9.eot?#iefix") format("eot"), url("fonts/eurostile_next/91cd8b4d-6789-4d4b-9ed3-c6b52e9cb0ae.woff") format("woff"), url("fonts/eurostile_next/83b619ca-db67-4f42-84c9-25dec6351887.ttf") format("truetype"), url("fonts/eurostile_next/fe22b722-9a8d-4645-be39-4bb8f0b048ac.svg#fe22b722-9a8d-4645-be39-4bb8f0b048ac") format("svg"); font-weight: 200; font-style: normal
}
@font-face { font-family: "EurostileNext"; src: url("fonts/eurostile_next/6bed8cad-cd15-4b82-9ff4-0efd0b173852.eot?#iefix"); src: url("fonts/eurostile_next/6bed8cad-cd15-4b82-9ff4-0efd0b173852.eot?#iefix") format("eot"), url("fonts/eurostile_next/a4a37370-12ae-4b1e-838e-cc18e6390d9f.woff") format("woff"), url("fonts/eurostile_next/f751566a-35f7-41b7-90df-e4f8fe5dccbf.ttf") format("truetype"), url("fonts/eurostile_next/7745b755-2aae-4a8a-a7c7-b48387a9b37e.svg#7745b755-2aae-4a8a-a7c7-b48387a9b37e") format("svg"); font-weight: normal; font-style: normal
}
@font-face { font-family: "EurostileNext"; src: url("fonts/eurostile_next/b064692f-59f1-4d8b-a899-a82a486028a4.eot?#iefix"); src: url("fonts/eurostile_next/b064692f-59f1-4d8b-a899-a82a486028a4.eot?#iefix") format("eot"), url("fonts/eurostile_next/f5e1f63d-a59b-4f88-a0c5-55f863443051.woff") format("woff"), url("fonts/eurostile_next/63768ea5-be6a-400b-b964-f7469df9bf0b.ttf") format("truetype"), url("fonts/eurostile_next/6ac4ebbc-7e05-49a5-a85f-ffb747cb05a2.svg#6ac4ebbc-7e05-49a5-a85f-ffb747cb05a2") format("svg"); font-weight: 600; font-style: normal
}
@font-face { font-family: "EurostileNext"; src: url("fonts/eurostile_next/bc835265-5330-42c8-9919-852df90dcc4a.eot?#iefix"); src: url("fonts/eurostile_next/bc835265-5330-42c8-9919-852df90dcc4a.eot?#iefix") format("eot"), url("fonts/eurostile_next/2ffb2ca5-bb3a-40ab-bd73-8e3f9e01d3c5.woff") format("woff"), url("fonts/eurostile_next/e5280698-d618-49c0-a0bb-2f0efcd511d9.ttf") format("truetype"), url("fonts/eurostile_next/84078a65-4d26-48c3-ba2f-7a7485f8f427.svg#84078a65-4d26-48c3-ba2f-7a7485f8f427") format("svg"); font-weight: bold; font-style: normal
}
@font-face { font-family: "EurostileNextCondensed"; src: url("fonts/eurostile_next/a5f7e471-706d-4fb9-a94e-6c67035d0fb4.eot?#iefix"); src: url("fonts/eurostile_next/a5f7e471-706d-4fb9-a94e-6c67035d0fb4.eot?#iefix") format("eot"), url("fonts/eurostile_next/06891dfe-9776-43db-886f-a1b24647a3d3.woff") format("woff"), url("fonts/eurostile_next/74acfc2a-a8d2-423c-a8b2-7313e95d41af.ttf") format("truetype"), url("fonts/eurostile_next/e93caabb-b206-4178-a06e-cfcd3c4800ab.svg#e93caabb-b206-4178-a06e-cfcd3c4800ab") format("svg"); font-weight: 100; font-style: normal
}
@font-face { font-family: "EurostileNextCondensed"; src: url("fonts/eurostile_next/ea0c14f3-c84b-4425-a7db-4b800df049ad.eot?#iefix"); src: url("fonts/eurostile_next/ea0c14f3-c84b-4425-a7db-4b800df049ad.eot?#iefix") format("eot"), url("fonts/eurostile_next/2103fcc5-5043-4473-913f-ce0999ac5373.woff") format("woff"), url("fonts/eurostile_next/5527d27b-143f-4c29-8611-ead29aeb2a11.ttf") format("truetype"), url("fonts/eurostile_next/ec50486d-8dcd-4089-a0ab-93dfcc8fa9a4.svg#ec50486d-8dcd-4089-a0ab-93dfcc8fa9a4") format("svg"); font-weight: 200; font-style: normal
}
@font-face { font-family: "EurostileNextCondensed"; src: url("fonts/eurostile_next/ffcdba74-d836-44e4-9590-4654083445f1.eot?#iefix"); src: url("fonts/eurostile_next/ffcdba74-d836-44e4-9590-4654083445f1.eot?#iefix") format("eot"), url("fonts/eurostile_next/88718722-4d61-4abb-b9ba-43d93ac9a7a4.woff") format("woff"), url("fonts/eurostile_next/7125337f-a363-4767-a350-6ac8a6719ab0.ttf") format("truetype"), url("fonts/eurostile_next/2194e090-23dc-43b2-a4c3-a532880efd48.svg#2194e090-23dc-43b2-a4c3-a532880efd48") format("svg"); font-weight: normal; font-style: normal
}
@font-face { font-family: "EurostileNextCondensed"; src: url("fonts/eurostile_next/389ef3c9-0b13-43b7-ac42-311a8f1e26a1.eot?#iefix"); src: url("fonts/eurostile_next/389ef3c9-0b13-43b7-ac42-311a8f1e26a1.eot?#iefix") format("eot"), url("fonts/eurostile_next/6e6ff8b9-1f72-427b-820f-c57026fed380.woff") format("woff"), url("fonts/eurostile_next/b5d336e6-e8dd-4219-bf02-db67704f61cb.ttf") format("truetype"), url("fonts/eurostile_next/db4bb45c-6a2d-49e3-bd38-fe32ae585a4b.svg#db4bb45c-6a2d-49e3-bd38-fe32ae585a4b") format("svg"); font-weight: 600; font-style: normal
}
@font-face { font-family: "EurostileNextCondensed"; src: url("fonts/eurostile_next/fbb01178-8100-4d6e-ba35-6a05b240a659.eot?#iefix"); src: url("fonts/eurostile_next/fbb01178-8100-4d6e-ba35-6a05b240a659.eot?#iefix") format("eot"), url("fonts/eurostile_next/303183a5-b0c7-4b4e-8afd-1ab6343205cb.woff") format("woff"), url("fonts/eurostile_next/36315209-477b-4aa5-92ad-e44b7e0352b5.ttf") format("truetype"), url("fonts/eurostile_next/a60d75b9-7a0a-4114-a2b6-90eddfe2401c.svg#a60d75b9-7a0a-4114-a2b6-90eddfe2401c") format("svg"); font-weight: bold; font-style: normal
}
@font-face { font-family: "EurostileNextExtended"; src: url("fonts/eurostile_next/d1950356-4c31-47b1-a67b-9552574e2e6f.eot?#iefix"); src: url("fonts/eurostile_next/d1950356-4c31-47b1-a67b-9552574e2e6f.eot?#iefix") format("eot"), url("fonts/eurostile_next/d82f7907-5a42-408a-b479-fb495b9369e5.woff") format("woff"), url("fonts/eurostile_next/716836ab-871f-4aba-acc4-898fa8b65164.ttf") format("truetype"), url("fonts/eurostile_next/2de71f7a-0ca5-4a1b-a8bd-987baf29104b.svg#2de71f7a-0ca5-4a1b-a8bd-987baf29104b") format("svg"); font-weight: 100; font-style: normal
}
@font-face { font-family: "EurostileNextExtended"; src: url("fonts/eurostile_next/6be414c2-3b91-4d13-83cc-48f8c7912d9e.eot?#iefix"); src: url("fonts/eurostile_next/6be414c2-3b91-4d13-83cc-48f8c7912d9e.eot?#iefix") format("eot"), url("fonts/eurostile_next/9990b66c-b104-4530-b033-d7915655e857.woff") format("woff"), url("fonts/eurostile_next/e4cbd06e-07d8-47ad-9175-a2d5523e91b6.ttf") format("truetype"), url("fonts/eurostile_next/b8b30acc-df32-4d44-89f7-e7c8f21dd13a.svg#b8b30acc-df32-4d44-89f7-e7c8f21dd13a") format("svg"); font-weight: 200; font-style: normal
}
@font-face { font-family: "EurostileNextExtended"; src: url("fonts/eurostile_next/bb9f8bd4-ba5f-4322-85f0-0fbae2ee11c2.eot?#iefix"); src: url("fonts/eurostile_next/bb9f8bd4-ba5f-4322-85f0-0fbae2ee11c2.eot?#iefix") format("eot"), url("fonts/eurostile_next/a9e934be-ccaf-4ef9-8da7-128c86e41d7b.woff") format("woff"), url("fonts/eurostile_next/bf36a607-ef60-4f61-91de-448992be155f.ttf") format("truetype"), url("fonts/eurostile_next/5a0c3ba9-19f9-45ec-a49c-e03d8ed4a3eb.svg#5a0c3ba9-19f9-45ec-a49c-e03d8ed4a3eb") format("svg"); font-weight: normal; font-style: normal
}
@font-face { font-family: "EurostileNextExtended"; src: url("fonts/eurostile_next/b3894d01-d226-459c-874c-054ae4c20973.eot?#iefix"); src: url("fonts/eurostile_next/b3894d01-d226-459c-874c-054ae4c20973.eot?#iefix") format("eot"), url("fonts/eurostile_next/d4377c90-7249-46cf-9e1d-bfb43c1a58a1.woff") format("woff"), url("fonts/eurostile_next/bcd4d152-bef1-4470-b05c-dd5a8a485e69.ttf") format("truetype"), url("fonts/eurostile_next/096c9f76-145f-4fba-a5e7-610b150b504f.svg#096c9f76-145f-4fba-a5e7-610b150b504f") format("svg"); font-weight: 600; font-style: normal
}
@font-face { font-family: "EurostileNextExtended"; src: url("fonts/eurostile_next/b62578e2-99a4-4c2c-a5d8-bbe60e8a3686.eot?#iefix"); src: url("fonts/eurostile_next/b62578e2-99a4-4c2c-a5d8-bbe60e8a3686.eot?#iefix") format("eot"), url("fonts/eurostile_next/a6bf4171-008f-47d7-a210-b450dc6b2f88.woff") format("woff"), url("fonts/eurostile_next/2781e8b9-8650-412c-8fa4-f4e4e113b05d.ttf") format("truetype"), url("fonts/eurostile_next/ff7a2311-cc92-40aa-8a50-05d78ed06796.svg#ff7a2311-cc92-40aa-8a50-05d78ed06796") format("svg"); font-weight: bold; font-style: normal
}
.l-header { padding: 0; position: static; background: #000; font-size: 1em; color: #fff; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none
}
@media (max-width: 19.99em) { .l-header { position: relative }
}
.l-header * { margin: 0; padding: 0; line-height: 1em
}
.l-header ul { list-style: none outside none
}
.l-header>.inner { height: 4em; margin: 0 auto; font-size: 0.84em; text-align: center; max-width: 1376px; max-width: 86rem
}
@media (min-width: 27em) { .l-header>.inner { font-size: 1em }
}
@media (min-width: 30em) { .l-header>.inner { font-size: 1.1em }
}
@media (min-width: 40em) { .l-header>.inner { font-size: 1.2em }
}
.l-header a { display: table; vertical-align: middle; height: 100%; color: #fff; text-decoration: none; cursor: pointer
}
.l-header a>.inner { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center
}
.l-header a:hover,
.l-header a.active { height: 110%
}
.l-header .block--brand { height: 100%; display: inline-block; text-align: center; white-space: nowrap; font-family: "dbicons", Arial, Verdana, san-serif; font-size: 1.4em; font-weight: normal; letter-spacing: -0.02em
}
.l-header .block--brand .title:before { content: 'DBrand'
}
.l-header .block--brand .delicious-seo { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.l-header .block--brand a { padding: .5em 1em .5em
}
@media (max-width: 26.99em) { .l-header .block--brand a { padding-right: 0.4em; padding-left: 0.4em }
}
.l-header .block--brand a:hover,
.l-header .block--brand a.active { background: #fb0; color: #fff
}
.l-header .list,
.l-header .itm { height: 100%
}
.l-header .block--menu-menu-toggle-menu { float: left
}
.l-header .block--menu-menu-cart { float: right
}
.l-header .block--menu-menu-cart .itm { position: relative
}
.l-header .block--menu-menu-cart .cart-quantity { display: block; position: absolute; top: 0; right: 100%; padding: 0.2em; font-size: 0.6em; line-height: 2.95em; text-align: center; background: #fb0; cursor: default; pointer-events: none
}
@media (max-width: 29.99em) { .l-header .block--menu-menu-cart .cart-quantity.cart-quantity-double-d { font-size: 0.55em; line-height: 1em; border-radius: 0 0 0 0.4em }
}
@media (min-width: 30em) { .l-header .block--menu-menu-cart .cart-quantity { position: absolute; right: 100%; bottom: 0; padding: 0.2em 0.6em; line-height: 3em }
}
@media (min-width: 48em) { .l-header .block--menu-menu-cart .cart-quantity { right: 0; left: 0; bottom: auto; padding-top: 0.3em; font-size: 0.8em; line-height: 1.2em }
}
@media (max-width: 47.99em) { .l-header .block--menu-menu-toggle-menu, .l-header .block--menu-menu-cart { display: block; z-index: 8200; height: 100%; font-size: 2em; cursor: pointer } .l-header .block--menu-menu-toggle-menu a, .l-header .block--menu-menu-cart a { padding: .5em } .l-header .block--menu-menu-toggle-menu a .icn, .l-header .block--menu-menu-cart a .icn { font-size: 0.8em; vertical-align: middle } .l-header .block--menu-menu-toggle-menu a .title, .l-header .block--menu-menu-cart a .title { display: none } .js .l-header .nav-vertical-wrapper { display: block; width: 20em; cursor: default; position: absolute; z-index: 134; top: 0; left: auto; right: 100%; bottom: 0; overflow: hidden; white-space: nowrap; border-top: 4em solid #000 } .js .l-header .nav-vertical-wrapper.semi { width: 0em } .js .l-header .nav-vertical-wrapper.semi .icn { padding-left: 0.2em; padding-right: 1em } .js .l-header .nav-vertical-wrapper>.inner { display: block; position: relative; z-index: 7500; height: 100%; margin-right: -24px; overflow-x: hidden; overflow-y: scroll; background: #222 } .js .l-header .nav-vertical-wrapper a { display: inline-block; width: 100%; border-bottom: 1px solid #222; margin-top: 1px; font-size: 1.4em; padding: 0.7em 1.4em; background: #1A1A1A; -webkit-transition: background-color 80ms; transition: background-color 80ms } .js .l-header .nav-vertical-wrapper a .icn { display: inline-block; font-size: 1.6em; vertical-align: top; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: -webkit-transform 80ms; transition: -webkit-transform 80ms; transition: transform 80ms; transition: transform 80ms, -webkit-transform 80ms } .js .l-header .nav-vertical-wrapper a .title { padding-left: 0.9em; line-height: 1.6em; -webkit-transition: padding-left 80ms; transition: padding-left 80ms } .js .l-header .nav-vertical-wrapper a:hover .title { padding-left: 1.1em }
}
@media (max-width: 47.99em) and (max-width: 26.99em) { .js .l-header .nav-vertical-wrapper a { font-size: 1.4em }
}
@media (max-width: 47.99em) and (max-width: 29.99em) { .js .l-header .nav-vertical-wrapper { width: 60% }
}
@media (max-width: 47.99em) and (min-width: 40em) { .js .l-header .nav-vertical-wrapper.active { width: 18em } .js .l-header .nav-vertical-wrapper a { font-size: 1.2em }
}
@media (max-width: 47.99em) { .no-js .l-header { background: #1A1A1A; position: static; overflow: visible } .no-js .l-header>.inner { height: auto } .no-js .l-header>.inner:before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4em; background: #000 } .no-js .l-header .block--menu-menu-toggle-menu { cursor: default } .no-js .l-header .block--menu-menu-toggle-menu:after { content: ''; padding: 0.8em; color: blue } .no-js .l-header .block--menu-menu-toggle-menu .list { display: none } .no-js .l-header .nav-vertical-wrapper { display: block; width: 100%; position: static } .no-js .l-header .nav-vertical-wrapper:after { content: none } .no-js .l-header .nav-vertical-wrapper>.inner { display: block; position: static; margin: 0; height: auto; overflow: hidden; background: none; font-size: 1.4em } .no-js .l-header .nav-vertical-wrapper .block .itm { float: left; width: 50%; border-bottom: 1px solid #262626 } .no-js .l-header .nav-vertical-wrapper .block .itm a { width: 100%; padding: 0.4em } .no-js .l-header .nav-vertical-wrapper .block .itm:nth-of-type(2n+1) a>.inner { text-align: left } .no-js .l-header .nav-vertical-wrapper .block .itm:nth-of-type(2n+1) a .icn { float: left; margin-right: 0.4em } .no-js .l-header .nav-vertical-wrapper .block .itm:nth-of-type(2n) { border-left: 1px solid #262626 } .no-js .l-header .nav-vertical-wrapper .block .itm:nth-of-type(2n) a>.inner { text-align: right } .no-js .l-header .nav-vertical-wrapper .block .itm:nth-of-type(2n) a .icn { float: right; margin-left: 0.4em }
}
@media (min-width: 48em) { .l-header { position: relative } .l-header>.inner { height: 6em; font-size: 1.1em } .l-header .block--menu-menu-toggle-menu { display: none; width: 0; height: 100%; overflow: hidden; visibility: hidden; cursor: default } .l-header .wrapper, .l-header .inner .inner, .l-header .block--menu { height: 100% } .l-header .itm { display: block; float: left } .l-header .block--system-main-menu { float: left } .l-header .block--menu-menu-side-menu { float: right } .l-header a { -webkit-transition: height 180ms, color 180ms, background-color 180ms; transition: height 180ms, color 180ms, background-color 180ms } .l-header .block--brand { float: left; margin: 0 0.4% 0 0; font-size: 2em; text-align: left } .l-header .block--brand .title:before { content: 'DB' } .l-header .block--brand a { padding: 0 0.8em 0.08em } .l-header .block--menu a { padding: 0.2em 0.7em 0; overflow: hidden; text-align: center; white-space: normal; font-family: "EurostileNextCondensed", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-size: 1.34em; font-weight: 600 } .l-header .block--menu a>.inner { text-transform: uppercase } .l-header .block--menu a .icn { display: block; text-transform: none } .l-header .block--menu a .title { display: block; line-height: 1.8em } .l-header .block--system-main-menu a .icn { margin: -4em 0 3em; font-size: 1.4em; -webkit-transition: margin 180ms; transition: margin 180ms } .l-header .block--system-main-menu a:hover .icn { margin: 0em } .l-header .block--menu-menu-side-menu a, .l-header .block--menu-menu-cart a { position: relative; overflow: visible } .l-header .block--menu-menu-side-menu a .title, .l-header .block--menu-menu-cart a .title { display: inline; position: absolute; top: 6.8em; right: 34%; z-index: 32; padding: 0.4em 1.2em; line-height: 1em; pointer-events: none; white-space: nowrap; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: top 180ms, opacity 180ms; transition: top 180ms, opacity 180ms } .l-header .block--menu-menu-side-menu a .title:before, .l-header .block--menu-menu-cart a .title:before { position: absolute; bottom: 100%; right: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 .5em .5em .5em; border-color: transparent transparent transparent transparent; -webkit-transform: rotate(360deg) } .l-header .block--menu-menu-side-menu a:hover .title, .l-header .block--menu-menu-cart a:hover .title { top: 5.8em; filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1 }
}
@media (min-width: 48em) and (min-width: 51em) { .l-header .block--menu a { padding: 0.2em 0.84em 0 } .l-header .block--brand { margin-right: 0.1% } .l-header .block--brand a { padding: 0 0.5em 0.08em }
}
@media (min-width: 48em) and (min-width: 55em) { .l-header .block--menu a { padding: 0.2em 0.92em 0 }
}
@media (min-width: 48em) and (min-width: 61.25em) { .l-header .block--brand { font-size: 1.6em } .l-header .block--brand .title:before { content: 'DBrand' } .l-header .block--brand a { padding: 0 0.8em 0.08em }
}
@media (min-width: 48em) and (min-width: 70em) { .l-header .block--menu a { padding: 0.2em 1.1em 0 } .l-header .block--brand { margin-right: 0.1% } .l-header .block--brand a { padding: 0 0.9em 0.08em }
}
@media (min-width: 48em) { .l-header .block--menu-menu-side-menu .btn-menu-search .title { background: #179FE5; color: #fff } .l-header .block--menu-menu-side-menu .btn-menu-search .title:before { border-bottom-color: #179FE5 } .l-header .block--menu-menu-side-menu .btn-menu-account .title { background: #8ce517; color: #fff } .l-header .block--menu-menu-side-menu .btn-menu-account .title:before { border-bottom-color: #8ce517 } .l-header .block--menu-menu-cart .btn-menu-cart .title { background: #fb0; color: #fff } .l-header .block--menu-menu-cart .btn-menu-cart .title:before { border-bottom-color: #fb0 }
}
.js .l-header .btn-menu-info:hover,
.js .l-header .btn-menu-info.active,
.no-js .l-header .btn-menu-info:hover,
.no-js .l-header .btn-menu-info.active { background: #E51717; color: #fff
}
.js .l-header .btn-menu-shop:hover,
.js .l-header .btn-menu-shop.active,
.no-js .l-header .btn-menu-shop:hover,
.no-js .l-header .btn-menu-shop.active { background: #fb0; color: #fff
}
.js .l-header .btn-menu-customs:hover,
.js .l-header .btn-menu-customs.active,
.no-js .l-header .btn-menu-customs:hover,
.no-js .l-header .btn-menu-customs.active { background: #fff; color: #000
}
.js .l-header .btn-menu-howto:hover,
.js .l-header .btn-menu-howto.active,
.no-js .l-header .btn-menu-howto:hover,
.no-js .l-header .btn-menu-howto.active { background: #8ce517; color: #fff
}
.js .l-header .btn-menu-shipping:hover,
.js .l-header .btn-menu-shipping.active,
.no-js .l-header .btn-menu-shipping:hover,
.no-js .l-header .btn-menu-shipping.active { background: #fb0; color: #fff
}
.js .l-header .btn-menu-contact:hover,
.js .l-header .btn-menu-contact.active,
.no-js .l-header .btn-menu-contact:hover,
.no-js .l-header .btn-menu-contact.active { background: #179FE5; color: #fff
}
.js .l-header .btn-menu-search:hover,
.js .l-header .btn-menu-search.active,
.no-js .l-header .btn-menu-search:hover,
.no-js .l-header .btn-menu-search.active { background: #179FE5; color: #fff
}
.js .l-header .btn-menu-account:hover,
.js .l-header .btn-menu-account.active,
.no-js .l-header .btn-menu-account:hover,
.no-js .l-header .btn-menu-account.active { background: #8ce517; color: #fff
}
.js .l-header .btn-menu-toggle:hover,
.js .l-header .btn-menu-toggle.active,
.no-js .l-header .btn-menu-toggle:hover,
.no-js .l-header .btn-menu-toggle.active { background: #179FE5; color: #fff
}
.js .l-header .btn-menu-cart:hover,
.js .l-header .btn-menu-cart.active,
.no-js .l-header .btn-menu-cart:hover,
.no-js .l-header .btn-menu-cart.active { background: #fb0; color: #fff
}
.l-header .nav-searchform-wrap { display: none
}
.l-footer { padding: 0; background: #000; color: #AFAFB2; line-height: 1
}
.l-footer * { margin: 0; padding: 0
}
.l-footer ul { list-style: none outside none
}
.l-footer .l-region { font-size: 1em
}
.l-footer .l-region>.inner { max-width: 1280px; max-width: 80rem; margin: 0 auto; padding: 2em 0; font-size: 0.95em; text-align: center; vertical-align: middle
}
@media (min-width: 55em) { .l-footer .l-region>.inner { padding: 1em 0; text-align: left; vertical-align: middle; overflow: hidden }
}
.l-footer a { color: #484848
}
.l-footer a:hover,
.l-footer a:active { color: #A0A0A2; background: transparent
}
.l-footer .l-region--interact { background: #000; color: #fff
}
.l-footer .l-region--interact>.inner { padding: 2.3em 0
}
@media (min-width: 55em) { .l-footer .l-region--interact>.inner { padding: 1.3em 0; text-align: center }
}
.l-footer .l-region--interact .block__title,
.l-footer .l-region--interact label { display: block; margin-bottom: 0.5em; vertical-align: middle; font-size: 1.3em; font-weight: normal; color: #88888A
}
.l-footer .l-region--interact .block__title { cursor: default
}
.l-footer .l-region--interact .block--menu-menu-social-connection .itm { display: inline-block
}
.l-footer .l-region--interact .block--menu-menu-social-connection a { display: inline-block; padding: 1.2em; color: #AFAFB2; background-color: transparent; -webkit-transition: color 150ms, background-color 150ms; transition: color 150ms, background-color 150ms
}
.l-footer .l-region--interact .block--menu-menu-social-connection a:hover { color: #fff
}
.l-footer .l-region--interact .block--menu-menu-social-connection a.facebook:hover { background-color: #3B5998
}
.l-footer .l-region--interact .block--menu-menu-social-connection a.twitter:hover { background-color: #55ACEE
}
.l-footer .l-region--interact .block--menu-menu-social-connection a.youtube:hover { background-color: #E52D27
}
.l-footer .l-region--interact .block--menu-menu-social-connection .icn { font-size: 2.8em
}
.l-footer .l-region--interact .block--menu-menu-social-connection .title { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; font-size: 1px
}
.l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form { margin-top: 0.8em
}
.l-footer .l-region--interact .block--newsletter .form-item-mailchimp-lists-mailchimp-newsletter-guests-mergevars-NAME,
.l-footer .l-region--interact .block--newsletter .mailchimp--already-subscribed { display: none !important
}
.l-footer .l-region--interact .block--newsletter #edit-mailchimp-lists-mailchimp-newsletter-guests-title { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.l-footer .l-region--interact .block--newsletter .form-item { margin-bottom: 1.1em
}
.l-footer .l-region--interact .block--newsletter label,
.l-footer .l-region--interact .block--newsletter .block__title { min-height: 0; margin-bottom: 0.1em; padding-top: 0; padding-right: 0; padding-bottom: 0; line-height: 2.3em; text-align: center
}
.l-footer .l-region--interact .block--newsletter label:hover { color: #fb0
}
.l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form-newsletter-guests label { display: block; width: 100%; position: static; padding: 0
}
.l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form-newsletter-guests label:before,
.l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form-newsletter-guests label:after { content: none
}
.no-js .l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form-newsletter-users label:before { box-shadow: 0 0 0 0.05em #222
}
.js .l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form-newsletter-users label { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form-newsletter-users .description { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.l-footer .l-region--interact .block--newsletter .form-type--text .form-item__inner { display: inline-block; width: 14em; max-width: 100%; margin-left: 0
}
.l-footer .l-region--interact .block--newsletter .form-text { border-left: none; font-size: 1.2em; text-align: center; background: #1A1A1A
}
.l-footer .l-region--interact .block--newsletter .form-text:hover { background: #111
}
.l-footer .l-region--interact .block--newsletter .form-text:focus { background: #fb0; color: #222
}
.l-footer .l-region--interact .block--newsletter .form-submit { display: inline-block; width: auto
}
.l-footer .l-region--interact .block--newsletter .form-submit:hover { background: #111
}
.l-footer .l-region--interact .block--newsletter .form-submit:active { background: #fb0
}
@media (min-width: 27em) { .l-footer .l-region--interact .block--newsletter .form-type--text .form-item__inner { width: 15em } .l-footer .l-region--interact .block--newsletter .form-text { font-size: 1.3em }
}
@media (min-width: 48em) { .l-footer .l-region--interact .block--newsletter { text-align: left; display: inline-block; vertical-align: middle } .l-footer .l-region--interact .block--newsletter .mailchimp-newsletter-wrapper { float: left; width: auto } .l-footer .l-region--interact .block--newsletter .form-item { float: right; clear: both; display: block; width: auto; margin: 0 } .l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form label, .l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form .block__title { float: left; width: auto; margin-bottom: 0; padding-right: 1em; background: none } .l-footer .l-region--interact .block--newsletter .form-type--text .form-item__inner { float: right; width: 14em } .l-footer .l-region--interact .block--newsletter .form-text { padding: 0.65em 1.2em; font-size: 1.1em; line-height: 1.4em } .l-footer .l-region--interact .block--newsletter .form-text:focus { text-align: left } .l-footer .l-region--interact .block--newsletter .form-submit { float: right; margin: 0; padding: 0.65em 1.2em; font-size: 1.1em; line-height: 1.4em }
}
@media (min-width: 70em) and (max-width: 79.99em) { .l-footer .l-region--interact .block--newsletter .form-type--text .form-item__inner { width: 12em }
}
@media (min-width: 70em) { .l-footer .l-region--interact .block__title, .l-footer .l-region--interact label { display: inline-block; margin-bottom: 0; padding-right: 0.2em; font-size: 1.2em; line-height: 2.7em } .l-footer .l-region--interact .block--menu-menu-social-connection { float: left } .l-footer .l-region--interact .block--menu-menu-social-connection a { padding: 0.7em } .l-footer .l-region--interact .block--menu-menu-social-connection .icn { font-size: 1.7em } .l-footer .l-region--interact .block--menu-menu-social-connection .block { white-space: nowrap } .l-footer .l-region--interact .block--menu-menu-social-connection .list { display: inline-block; vertical-align: middle } .l-footer .l-region--interact .block--newsletter { float: right; text-align: right } .l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form { margin: 0.12em 0 0 } .l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form label, .l-footer .l-region--interact .block--newsletter .mailchimp-lists-user-subscribe-form .block__title { line-height: 2.46em }
}
@media (min-width: 70em) { .l-footer .l-region--interact .block__title, .l-footer .l-region--interact label { padding-right: 0.5em; font-size: 1.2em } .l-footer .l-region--interact .block--menu-menu-social-connection a { padding: 0.8em } .l-footer .l-region--interact .block--newsletter { float: right } .l-footer .l-region--interact .block--newsletter form { margin: 0.2em 0 0 }
}
.l-footer .l-region--resources { background: #1A1A1A
}
.l-footer .l-region--resources .block { margin: 0 auto; width: 90%; vertical-align: top
}
.l-footer .l-region--resources .block__title { display: block; border-bottom: 1px solid #343434; padding: 0.5em; background: #222; font-size: 1.4em; font-weight: normal; line-height: 1.5em; color: #DBDBDD
}
.l-footer .l-region--resources .block__title+.list { padding: 0.5em 0 1em; background: #111
}
@media (max-width: 54.99em) { .js .l-footer .l-region--resources .block__title { cursor: pointer; -webkit-transition-property: background, color; transition-property: background, color; -webkit-transition-duration: 100ms; transition-duration: 100ms } .js .l-footer .l-region--resources .block__title:hover { background: #343434 } .js .l-footer .l-region--resources .block__title+.list { display: none } .js .l-footer .l-region--resources .block__title.active { background: #DBDBDD; color: #222 }
}
.l-footer .l-region--resources a { display: block; font-size: 1.12em; padding: 0.8em 0.8em; color: #be972d; letter-spacing: 0.08em
}
.l-footer .l-region--resources a:hover { background: #000; color: #fb0
}
@media (max-width: 54.99em) { .l-footer .l-region--resources a:before, .l-footer .l-region--resources a:after { content: '' }
}
@media (min-width: 48em) and (max-width: 54.99em) { .l-footer .l-region--resources .list { overflow: hidden } .l-footer .l-region--resources .itm { width: 50%; float: left } .l-footer .l-region--resources .itm:nth-of-type(2n+1) a { text-align: right; padding-right: 2em } .l-footer .l-region--resources .itm:nth-of-type(2n+1) a:after { content: '>'; padding-right: 0.6em } .l-footer .l-region--resources .itm:nth-of-type(2n) a { text-align: left; padding-left: 2em } .l-footer .l-region--resources .itm:nth-of-type(2n) a:before { content: '<'; padding-left: 0.6em }
}
@media (min-width: 55em) { .l-footer .l-region--resources>.inner { text-align: center } .l-footer .l-region--resources .block { display: inline-block; margin: 0 1.5%; width: 30%; text-align: left } .l-footer .l-region--resources .block:first-of-type { margin-left: 0 } .l-footer .l-region--resources .block:last-of-type { margin-right: 0 } .l-footer .l-region--resources .block__title { background: none; line-height: 1em; cursor: default } .l-footer .l-region--resources .block__title:before { content: '// '; font-family: Arial, Verdana, san-serif } .l-footer .l-region--resources .block__title+.list { display: block !important; padding: 0.8em 0 1.5em; background: none } .l-footer .l-region--resources a { display: inline-block; padding: 0.34em 0.8em } .l-footer .l-region--resources a:hover { background: none }
}
.l-footer .l-region--footer { background: #000; color: #484848
}
.l-footer .l-region--footer>.inner { font-size: 0.9025em
}
.l-footer .l-region--footer .block--copyright { display: black; padding: 0 1em 1em
}
.l-footer .l-region--footer .block--menu-menu-footer { padding: 0.2em; line-height: 2.6em
}
.l-footer .l-region--footer .block--menu-menu-footer .list { display: inline
}
.l-footer .l-region--footer .block--menu-menu-footer .itm { display: inline
}
.l-footer .l-region--footer .block--menu-menu-footer .itm:before { content: '// '; padding: 0 0.5em; font-family: Arial, Verdana, san-serif
}
.l-footer .l-region--footer .block--menu-menu-footer .itm:first-child:before { content: none
}
.l-footer .l-region--footer a { padding: 1em 0
}
@media (min-width: 55em) { .l-footer .l-region--footer .block--copyright { display: block; float: left; padding: 1em } .l-footer .l-region--footer .block--menu-menu-footer { float: right; padding: 0 1em } .l-footer .l-region--footer .block--menu-menu-footer .list { display: inline } .l-footer .l-region--footer .block--menu-menu-footer .itm { display: inline } .l-footer .l-region--footer .block--menu-menu-footer .itm:before { content: '// '; padding: 0 0.5em; font-family: Arial, Verdana, san-serif } .l-footer .l-region--footer .block--menu-menu-footer .itm:first-child:before { content: none } .l-footer .l-region--footer a { padding: 1em 0 }
}
* { box-sizing: border-box
}
html { font-family: EurostileNext, Eurostile, Arial, Verdana, san-serif; height: 100%; overflow-x: hidden; overflow-y: scroll
}
body { background: #000; color: #fff; font-size: 1.05em; font-family: EurostileNext, Eurostile, Arial, Verdana, san-serif; height: 100%
}
@media (max-width: 47.99em) { body.popup--menu .l-page-overlay { visibility: visible; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5; -webkit-transition: opacity 200ms; transition: opacity 200ms; cursor: pointer } body.popup--menu .l-page { margin-left: 21.6em; right: auto }
}
@media (max-width: 29.99em) { body.popup--menu .l-page { margin-left: 60% }
}
@media (max-width: 61.24em) { body.popup--popup-textures .l-page-overlay { visibility: visible; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5; -webkit-transition: opacity 200ms; transition: opacity 200ms; cursor: pointer } body.popup--popup-textures .l-page { right: 20em }
}
@media (max-width: 22.99em) { body { font-size: 0.9em }
}
::-moz-selection { color: #fff; background: #fb0
}
::selection { color: #fff; background: #fb0
}
::-moz-selection { color: #fff; background: #fb0
}
img { max-width: 100%; height: auto
}
.l-page { position: relative; right: 0; margin: 0; width: 100%; background: #222; -webkit-transition: margin-left 200ms, right 200ms; transition: margin-left 200ms, right 200ms
}
.l-page .l-page-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 134; visibility: hidden; background-color: #000; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: opacity 200ms, visibility 0ms 200ms; -o-transition: opacity 200ms, visibility 0ms 200ms; -webkit-transition: opacity 200ms, visibility 0ms; -webkit-transition-delay: 0s, 200ms; -webkit-transition: opacity 200ms, visibility 0ms 200ms; transition: opacity 200ms, visibility 0ms 200ms
}
.l-content>.node,
.l-content>.view,
.l-content>form { font-size: 1em
}
.group__inner,
.view__inner,
.entity__inner,
.block__header__inner,
.taxonomy__content,
.profile__inner,
.tabs__inner,
.l-content>form>div,
.l-content>div>form>div,
.tabs-wrapper__inner,
.action-links__inner { max-width: 1280px; max-width: 80rem; margin: 0 auto; padding-top: 1.6em; padding-bottom: 2.5em
}
.group__inner:after,
.view__inner:after,
.entity__inner:after,
.block__header__inner:after,
.taxonomy__content:after,
.profile__inner:after,
.tabs__inner:after,
.l-content>form>div:after,
.l-content>div>form>div:after,
.tabs-wrapper__inner:after,
.action-links__inner:after { content: ''; display: table; line-height: 0; clear: both
}
.l-content>form>div .view-content { padding-top: 0
}
.block__header__inner { padding-top: 2em; padding-bottom: 2em
}
.group--borderless>.group__inner { max-width: none; padding-top: 0; padding-bottom: 0
}
.group--max>.group__inner { max-width: 1280px; max-width: 80rem
}
.l-main-title { margin: 0 auto; padding: 0; background: #DBDBDD; font-size: 1em
}
.l-main-title>.inner { max-width: 1280px; max-width: 80rem; display: block; margin: 0 auto; padding: 0.3em 0; text-align: center; font-size: 2.1em; font-weight: 200; color: #222
}
@media (min-width: 27em) { .l-main-title>.inner { font-size: 2.4em }
}
@media (min-width: 30em) { .l-main-title>.inner { font-size: 3em }
}
@media (min-width: 40em) { .l-main-title>.inner { padding: 0.34em 0; font-size: 3.45em; font-weight: 100; text-align: left } .l-main-title>.inner:after { content: '//'; color: #AFAFB2 }
}
@media (min-width: 48em) { .l-main-title>.inner { font-size: 4.2em }
}
.l-messages { margin: 0 auto; padding: 0; background: #343434
}
.l-content>.l-messages { margin-bottom: 0
}
.l-messages>.inner { max-width: 1280px; max-width: 80rem; margin: 0 auto; font-size: 1em; line-height: 1.2em; text-align: left
}
.l-messages .message-list { margin: 0; padding: 0; list-style: none outside none
}
.l-messages .message { display: block; padding: 0.6em 0; vertical-align: top; line-height: 1.4em; -webkit-transition: height 200ms, padding-top 200ms, padding-bottom 200ms; transition: height 200ms, padding-top 200ms, padding-bottom 200ms
}
.l-messages .message ul { margin: 0; padding: 0 0 0 0.4em; list-style: none
}
.l-messages .message li:before { content: '>'; font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.9em; line-height: normal; padding-right: 0.34em
}
.l-messages .message p { margin: 0.5em 0
}
.l-messages.messages--common .message { position: relative; padding-right: 0.5em; padding-left: 3.2em; text-align: left
}
.l-messages.messages--common .message:before,
.l-messages.messages--common .message .message-dismiss { position: absolute; top: 0; left: 0; display: block; width: 2.6em; font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 2.6em; text-align: center
}
.l-messages.messages--common .message .message-dismiss,
.l-messages.messages--common .message .message-dismiss:hover { background: none
}
.l-messages.messages--status { color: #14190C; background: #B2DA48
}
.l-messages.messages--status .message:before { content: '\221A'; color: #B2DA48; background: #709108
}
.l-messages.messages--status a,
.l-messages.messages--status .btn { color: #B2DA48; background: #709108
}
.l-messages.messages--warning { color: #242212; background: #F5EA86
}
.l-messages.messages--warning .message:before { content: '!'; font-family: EurostileNext, Eurostile, Arial, Verdana, san-serif; font-size: 1.6em; width: 1.625em; line-height: 1.625em; font-weight: 600; color: #F5EA86; background: #E0D56B
}
.l-messages.messages--warning a,
.l-messages.messages--warning .btn { color: #000; background: #E0D56B
}
.l-messages.messages--warning a:hover,
.l-messages.messages--warning .btn:hover { color: #000; background: #EEEEF0; color: #fb0; background: #080808; color: #000; background: #FFD45D
}
.l-messages.messages--warning-alt { font-size: 0.9em; color: #000; background: #fb0
}
.l-messages.messages--warning-alt .message { padding: 0.8em 0 0
}
.l-messages.messages--warning-alt .message:after { content: ''; display: block; width: 50%; height: 0.8em
}
.l-messages.messages--warning-alt .message:before,
.l-messages.messages--warning-alt .message .message-dismiss { font-size: 1.25em; top: 0; right: 0; bottom: auto; left: auto; width: 2.5em; line-height: 2.4em; text-align: center; color: #9E7400; background: #FFD45D
}
.l-messages.messages--warning-alt .message:before { content: 'x'; position: relative; float: right; margin-left: 1.2em; width: 3.125em; font-size: 1em; line-height: 2.2em; visibility: hidden
}
.l-messages.messages--warning-alt .message .message-dismiss:hover { color: #1C0603; background: #E82C0C
}
.l-messages.messages--warning-alt .hover-info { border-bottom-color: #C70
}
.l-messages.messages--warning-alt a { color: #705509; font-weight: 600
}
.l-messages.messages--error { color: #1C0603; background: #E82C0C
}
.l-messages.messages--error .message:before { content: 'x'; font-size: 1.6em; width: 1.625em; line-height: 1.625em; color: #E82C0C; background: #691a0d
}
.l-messages.messages--error a,
.l-messages.messages--error .btn { color: #691a0d; background: #E82C0C
}
.l-messages .message-item.hasCustomDismiss .message { padding: 1.2em 0.5em
}
.l-messages .message-item.hasCustomDismiss .message:before { content: none
}
.l-messages .message-item.hasCustomDismiss .message-dismiss--btn { padding-bottom: 1.2em; text-align: center; font-size: 0.84em
}
@media (min-width: 61.25em) { .l-messages .message-item.hasCustomDismiss .message-dismiss--btn { text-align: left }
}
.l-messages .message-item.hasCustomDismiss .message-dismiss--btn .btn { display: inline-block; width: auto; margin-top: 0
}
.l-messages.messages--common .message a:hover,
.l-messages.messages--common .message a:active,
.l-messages.messages--common .message .btn:hover,
.l-messages.messages--common .message .btn:active { color: #000; background: #fb0
}
.l-messages .message.dismissed { overflow: hidden; height: 0; padding-top: 0; padding-bottom: 0
}
.l-messages .message.sliding { overflow: hidden
}
.l-messages .btn { margin: 0.5em 0 0.6em
}
form>div>.messages.error { position: relative; color: #1C0603; background: #E82C0C; padding: 1em 1.8em 1.2em
}
.taxonomy-tag-list { margin: 0; padding: 0; list-style: none outside none
}
.taxonomy-tag-list:after { content: ''; display: table; line-height: 0; clear: both
}
.l-breadcrumb { position: relative; font-size: 1em; background: #161616; clear: both
}
.l-breadcrumb:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: #080808
}
.breadcrumb { max-width: 1280px; max-width: 80rem; display: block; position: relative; margin: 0 auto; padding: 0; list-style: none outside none; text-align: left; background: #161616
}
.breadcrumb .itm { display: inline-block; padding: 0; font-size: 0.9em; line-height: 2.4em; letter-spacing: 0.04em; vertical-align: top; background: #161616
}
.breadcrumb a,
.breadcrumb .custom-breadcrumbs-none,
.breadcrumb .nolink { display: inline-block; padding: 0 0.3em 0 0.9em; white-space: nowrap; position: relative
}
.breadcrumb a:before,
.breadcrumb .custom-breadcrumbs-none:before,
.breadcrumb .nolink:before { content: ''; position: absolute; top: 0; left: 0; width: 0px; height: 0px; border-style: solid; border-width: 2.4em 0.8em 0 0; border-color: #161616 transparent transparent transparent
}
.breadcrumb a:after,
.breadcrumb .custom-breadcrumbs-none:after,
.breadcrumb .nolink:after { content: '/'; position: absolute; top: 0; left: 0.15em; color: #343434
}
.breadcrumb a { color: #DBDBDD
}
.breadcrumb .custom-breadcrumbs-none,
.breadcrumb .nolink { color: #646464
}
.breadcrumb .itm:hover a { color: #fb0; background: #080808
}
.breadcrumb .itm:hover+.itm a:before,
.breadcrumb .itm:hover+.itm .custom-breadcrumbs-none:before,
.breadcrumb .itm:hover+.itm .nolink:before { border-top-color: #080808
}
.breadcrumb .breadcrumb-start a { padding-left: 0; background: #080808
}
.breadcrumb .breadcrumb-start a:before,
.breadcrumb .breadcrumb-start a:after { content: none
}
.breadcrumb .breadcrumb-start+.itm a:before,
.breadcrumb .breadcrumb-start+.itm .custom-breadcrumbs-none:before,
.breadcrumb .breadcrumb-start+.itm .nolink:before { border-top-color: #080808
}
.breadcrumb .breadcrumb-start+.itm a:after,
.breadcrumb .breadcrumb-start+.itm .custom-breadcrumbs-none:after,
.breadcrumb .breadcrumb-start+.itm .nolink:after { content: none
}
.breadcrumb .icn { font-size: 0.88em; padding-right: 0.6em; line-height: inherit
}
@media (max-width: 47.99em) { .breadcrumb .title { display: none }
}
.group-theme--bright { color: #000; background: #EEEEF0
}
.l-header { padding-left: 2.4%; padding-right: 2.4%
}
.l-breadcrumb,
.l-footer>.l-region,
.l-tabs,
.node-groupless,
.node>.group,
.node>.field,
.group--full,
.group--borderless>.group__inner>.group,
.group--borderless>div>.group,
.taxonomy-term>.group,
.l-content>.view>.view-content,
.l-content>div>.view>.view-content,
.l-content>.block>.view>.view-content,
.l-content>.block>.block__header,
.l-content>form,
.l-content>div>form,
.l-content>.entity,
.l-content>.profile,
.taxonomy-page,
.l-main-title,
.l-messages,
.field--name-title-field,
.l-tabs-wrapper,
.l-action-links { padding-left: 8%; padding-right: 8%
}
.node .group--borderless { padding-left: 0; padding-right: 0
}
@media (max-width: 47.99em) { .l-breadcrumb { padding-left: 1.1em; padding-right: 1.1em }
}
@media (min-width: 70em) { .l-content>form { padding-left: 12%; padding-right: 12% }
}
@media (min-width: 80em) { .l-content>form { padding-left: 16%; padding-right: 16% }
}
.element-invisible { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.nowrap { white-space: nowrap
}
.hfx-sbracks,
.login-password { position: relative
}
.hfx-sbracks:before,
.login-password:before { content: '['; position: absolute; left: 1em; opacity: 0; -webkit-transition: all 100ms; transition: all 100ms
}
.hfx-sbracks:after,
.login-password:after { content: ']'; position: absolute; right: 1em; opacity: 0; -webkit-transition: all 100ms; transition: all 100ms
}
.hfx-sbracks:hover:before,
.login-password:hover:before { left: 0.1em; opacity: 1
}
.hfx-sbracks:hover:after,
.login-password:hover:after { right: 0.1em; opacity: 1
}
.hfx-dualframe-h { position: relative
}
.hfx-dualframe-h:before { content: ''; position: absolute; top: 0.5em; left: 0; width: 0%; height: 1px; opacity: 0; -webkit-transition: all 100ms; transition: all 100ms; background: #343434
}
.hfx-dualframe-h:after { content: ''; position: absolute; bottom: 0.5em; right: 0; width: 0%; height: 1px; opacity: 0; -webkit-transition: all 100ms; transition: all 100ms; background: #343434
}
.hfx-dualframe-h:hover:before,
.hfx-dualframe-h:hover:after { width: 100%; opacity: 1
}
[data-title] { position: relative; overflow: visible
}
[data-title]:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 .7em .7em .7em; border-color: transparent transparent #fff transparent; -webkit-transform: rotate(360deg); position: absolute; top: 150%; left: 0; z-index: 134; margin-top: -0.3em; pointer-events: none; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: top 100ms, opacity 100ms; transition: top 100ms, opacity 100ms
}
[data-title]:after { content: attr(data-title); position: absolute; top: 150%; left: 0; z-index: 135; margin-top: 0.3em; padding: 0.5em 0.7em; font-family: EurostileNext, Eurostile, Arial, Verdana, san-serif; text-align: center; line-height: 1.2em; white-space: normal; font-weight: normal; color: #000; background: #fff; pointer-events: none; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: top 100ms, opacity 100ms; transition: top 100ms, opacity 100ms
}
[data-title]:hover:before,
[data-title]:hover:after { top: 100%; filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1
}
.csstransitions [data-title]:before,
.csstransitions [data-title]:after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%)
}
.data-title-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0
}
.hover-info { border-bottom: 0.1em dashed #000; border-bottom: 0.1em dashed rgba(0, 0, 0, 0.5); cursor: help
}
.hover-info--nowrap:after { white-space: nowrap
}
a,
.btn { background: transparent; color: #fb0; text-decoration: none; -webkit-transition: color 120ms, background 120ms; transition: color 120ms, background 120ms
}
a:hover,
a:active,
.btn:hover,
.btn:active { color: #000; background: #fb0
}
.btn,
.form-submit,
.login-account,
.login-register { position: relative; top: 0; display: block; width: 100%; margin: 1.6em 0 0; padding: 0.8em 1.6em; border-radius: 0; background: #343434; border: none; cursor: pointer; color: #AFAFB2; font-size: 1.2em; line-height: 1.4em; font-weight: normal; text-align: center; vertical-align: middle; text-decoration: none; text-shadow: none; -webkit-transition: top 120ms; transition: top 120ms
}
.btn:hover,
.form-submit:hover,
.login-account:hover,
.login-register:hover { color: #fb0; background: #000
}
.btn:active,
.form-submit:active,
.login-account:active,
.login-register:active { top: .1666em; color: #2B2B2B; background: #fb0
}
.btn:active:before,
.form-submit:active:before,
.login-account:active:before,
.login-register:active:before { content: ''; position: absolute; top: -0.1666em; left: 0; right: 0; bottom: 100%
}
.btn.btn-wip,
.form-submit.btn-wip,
.login-account.btn-wip,
.login-register.btn-wip { top: 0; cursor: wait; color: #705509; background: #080808; -webkit-transition: color 640ms, background 640ms; transition: color 640ms, background 640ms
}
.btn.btn-denied,
.form-submit.btn-denied,
.login-account.btn-denied,
.login-register.btn-denied { -webkit-animation: negativeNod 640ms ease-in-out 0ms 1; animation: negativeNod 640ms ease-in-out 0ms 1
}
.btn .inner,
.form-submit .inner,
.login-account .inner,
.login-register .inner { display: inline-block; line-height: inherit
}
.btn .icn,
.form-submit .icn,
.login-account .icn,
.login-register .icn { display: inline-block; line-height: inherit; vertical-align: top
}
.btn .icn+.inner,
.form-submit .icn+.inner,
.login-account .icn+.inner,
.login-register .icn+.inner { padding-left: 0.6em
}
.btn-relative { position: relative
}
.btn-inactive { filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5; cursor: not-allowed
}
.btn-inactive:hover,
.btn-inactive:active { background: #343434; color: #AFAFB2
}
.btn-inactive:active { top: 0; -webkit-animation: negativeNod 640ms ease-in-out 100ms 1; animation: negativeNod 640ms ease-in-out 100ms 1
}
.theme--bright .btn,
.theme--bright .form-submit,
.theme--bright .login-account,
.theme--bright .login-register { color: #343434; background: #CCCCCE
}
.theme--bright .btn:hover,
.theme--bright .form-submit:hover,
.theme--bright .login-account:hover,
.theme--bright .login-register:hover { color: #080808; background: #FFD45D
}
.theme--bright .btn:active,
.theme--bright .form-submit:active,
.theme--bright .login-account:active,
.theme--bright .login-register:active { color: #080808; background: #fff
}
.theme--bright .btn.btn-wip,
.theme--bright .form-submit.btn-wip,
.theme--bright .login-account.btn-wip,
.theme--bright .login-register.btn-wip { color: #000; background: #A0A0A2
}
.interactions,
.form-actions,
.checkout-buttons { clear: both; text-align: center; padding-top: 0.2em
}
.form-actions .form-submit:last-of-type,
.checkout-buttons .form-submit.checkout-continue,
.btn--main-action,
.btn-highlighted { color: #000; background: #fb0
}
@media (min-width: 27em) { .form-actions .form-submit:last-of-type, .checkout-buttons .form-submit.checkout-continue, .btn--main-action, .btn-highlighted { padding-left: 2.4em; padding-right: 2.4em }
}
.form-actions .form-submit:last-of-type:hover,
.checkout-buttons .form-submit.checkout-continue:hover,
.btn--main-action:hover,
.btn-highlighted:hover { color: #fb0; background: #000
}
.form-actions .form-submit:last-of-type.btn-wip,
.checkout-buttons .form-submit.checkout-continue.btn-wip,
.btn--main-action.btn-wip,
.btn-highlighted.btn-wip { color: #9E7400; background: #080808
}
.theme--bright .form-actions .form-submit:last-of-type,
.theme--bright .checkout-buttons .form-submit.checkout-continue,
.theme--bright .btn--main-action,
.theme--bright .btn-highlighted { color: #080808; background: #FFD45D
}
.theme--bright .form-actions .form-submit:last-of-type:hover,
.theme--bright .checkout-buttons .form-submit.checkout-continue:hover,
.theme--bright .btn--main-action:hover,
.theme--bright .btn-highlighted:hover { color: #080808; background: #fb0
}
.theme--bright .form-actions .form-submit:last-of-type:active,
.theme--bright .checkout-buttons .form-submit.checkout-continue:active,
.theme--bright .btn--main-action:active,
.theme--bright .btn-highlighted:active { color: #080808; background: #fff
}
.theme--bright .form-actions .form-submit:last-of-type.btn-wip,
.theme--bright .checkout-buttons .form-submit.checkout-continue.btn-wip,
.theme--bright .btn--main-action.btn-wip,
.theme--bright .btn-highlighted.btn-wip { color: #000; background: #fb0
}
.button-operator { display: block; width: 100%; margin: 1.6em 0; text-align: center; font-weight: 200; color: #A0A0A2
}
label.btn-disguise .btn,
label.btn-disguise+input { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
label,
.fieldset-legend { display: block; width: 100%; text-align: center; padding: 0.6em 0.2em 0.5em 0; font-size: 1.2em; font-weight: 200
}
label { cursor: pointer
}
label .form-required { display: none
}
label:hover { color: #fb0
}
fieldset { display: block; border: none; margin: 2.8em 0 0; padding: 0
}
fieldset legend { display: block; margin: 0; width: 100%
}
fieldset .fieldset-wrapper { margin: 0; padding: 0.01em 0 0
}
form.form-wip { cursor: wait
}
form.form-wip * { cursor: inherit
}
.field-widget-options-buttons,
fieldset legend { margin-top: 2.8em; border-top: 0.2em solid #161616; padding-top: 1.8em
}
form>div>fieldset:first-child,
form>div>div>fieldset:first-child { margin-top: 0.5em
}
form>div>fieldset:first-child legend,
form>div>div>fieldset:first-child legend { margin: 0; border-top: none; padding: 0
}
.form-type--radiochecks>label,
fieldset legend .fieldset-legend { font-size: 1.4em; font-weight: 100; color: #AFAFB2; cursor: default
}
.field-group--label-hidden .field-widget-options-buttons { margin-top: 1.8em
}
.field-group--label-hidden .field-widget-options-buttons:first-child { margin: 0; border-top: none; padding: 0
}
.field-group--label-hidden .form-wrapper>.form-item>label { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.form-type--radiochecks>label,
.fieldset-legend { border-bottom: 0.4em solid transparent
}
.form-type--text,
.form-type-select { margin-bottom: 1.4em
}
.checkout-buttons .checkout-processing { display: inline
}
.description,
.form-description { display: block; width: 100%; margin: 1.5em 0 1.2em; padding: 0 0.2em; line-height: 1.34em; letter-spacing: 0.02em; text-align: left; color: #DBDBDD
}
.form-text,
.form-textarea { position: relative; display: block; width: 100%; margin: 0; padding: 0.6em; border: none; border-left: 0.18em solid transparent; cursor: pointer; outline-color: #000; font-size: 1.1em; line-height: 1.4em; text-align: center; color: #fb0; background: #0C0C0C; -webkit-transition: color 120ms, background 120ms; transition: color 120ms, background 120ms
}
.form-text::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder { color: #646464
}
.form-text:-moz-placeholder,
.form-textarea:-moz-placeholder { color: #646464
}
.form-text::-moz-placeholder,
.form-textarea::-moz-placeholder { color: #646464
}
.form-text:-ms-input-placeholder,
.form-textarea:-ms-input-placeholder { color: #646464
}
.form-text.required,
.form-textarea.required { border-left-color: #fb0
}
.form-text:hover,
.form-textarea:hover { background: #000; color: #fb0
}
.form-text:hover::-webkit-input-placeholder,
.form-textarea:hover::-webkit-input-placeholder { color: #fb0
}
.form-text:hover:-moz-placeholder,
.form-textarea:hover:-moz-placeholder { color: #fb0
}
.form-text:hover::-moz-placeholder,
.form-textarea:hover::-moz-placeholder { color: #fb0
}
.form-text:hover:-ms-input-placeholder,
.form-textarea:hover:-ms-input-placeholder { color: #fb0
}
.form-text:focus:active,
.form-textarea:focus:active { top: .1666em
}
.form-text:focus:active:before,
.form-textarea:focus:active:before { content: ''; position: absolute; top: -0.1666em; left: 0; right: 0; bottom: 100%
}
.form-text:focus,
.form-textarea:focus { background: #fb0; color: #222
}
.form-text:focus::-webkit-input-placeholder,
.form-textarea:focus::-webkit-input-placeholder { color: #484848
}
.form-text:focus:-moz-placeholder,
.form-textarea:focus:-moz-placeholder { color: #484848
}
.form-text:focus::-moz-placeholder,
.form-textarea:focus::-moz-placeholder { color: #484848
}
.form-text:focus:-ms-input-placeholder,
.form-textarea:focus:-ms-input-placeholder { color: #484848
}
@media (min-width: 27em) { .form-text, .form-textarea { padding: 0.6em 1.2em; font-size: 1.2em }
}
@media (min-width: 30em) { .form-text, .form-textarea { font-size: 1.3em }
}
.form-text.error,
.form-textarea.error { border-left-color: #E82C0C
}
.form-textarea { min-width: 50%; max-width: 100%; width: 100% !important; resize: vertical; text-align: left; font-size: 1.05em
}
.form-textarea:focus { background: #FFD45D; background: #EEEEF0
}
.form-checkbox,
.form-radio { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.form-checkbox+label,
.form-radio+label { margin: 0 0 0.2em; padding: 0.44em 0.8em 0.4em 2.4em; text-align: left; line-height: 1.34em; position: relative; -webkit-transition: color 200ms; transition: color 200ms
}
.form-checkbox+label:before,
.form-checkbox+label:after,
.form-radio+label:before,
.form-radio+label:after { content: ''; display: block; position: absolute; top: 50%; left: 1.2em; width: 1.2em; height: 1.2em; margin: -0.6em 0 0 -0.6em; padding: 0; text-align: center; vertical-align: middle; font-weight: normal; color: #646464; background: #0C0C0C
}
.form-checkbox+label:after,
.form-radio+label:after { width: 0.6em; height: 0.6em; margin: -0.3em 0 0 -0.3em; background: transparent
}
.form-checkbox+label:hover,
.form-radio+label:hover { background: #1A1A1A
}
.form-checkbox:checked+label:after,
.form-radio:checked+label:after { background: #fb0
}
.form-checkbox:focus+label,
.form-radio:focus+label { color: #fb0
}
.form-checkbox:focus+label:before,
.form-radio:focus+label:before { background: #000
}
.form-checkbox+label:hover:before,
.form-radio+label:hover:before { background: #000
}
.form-checkbox[disabled]+label,
.form-radio[disabled]+label { color: #88888A; cursor: default; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none
}
.form-checkbox[disabled]+label:before,
.form-radio[disabled]+label:before { background: #161616
}
.form-checkbox[disabled]:checked+label:after,
.form-radio[disabled]:checked+label:after { background: #997e33
}
.form-checkbox.error+label:before,
.form-radio.error+label:before { background: #000
}
.form-checkbox.error+label:after,
.form-radio.error+label:after { box-shadow: 0 0 1em 0.05em #E82C0C
}
.form-radio+label:before,
.form-radio+label:after { border-radius: 50%
}
.form-select { display: block; margin: 0; padding: 0.6em 1.2em; width: 100%; height: auto; border: none; outline: none; border-radius: 0; font-size: 1.2em; line-height: 1.4em; text-align: center; overflow: hidden; -moz-appearance: none; -webkit-appearance: none; color: #fff; background: #0C0C0C; cursor: pointer; border-left: 0.18em solid transparent
}
.form-select.required { border-left-color: #fb0
}
.form-select:hover { color: #fb0; background: #000
}
.form-select:active,
.form-select:focus { color: #fb0
}
.form-select option { padding: 0; color: #fff; background: #0C0C0C
}
@media (min-width: 27em) { .form-select { padding: 0.6em 1.2em; font-size: 1.2em }
}
@media (min-width: 30em) { .form-select { font-size: 1.3em }
}
.form-select.error { border-left-color: #E82C0C
}
.form-type-select .form-item__inner { position: relative
}
.form-type-select .form-item__inner:before { content: ''; position: absolute; right: 0; bottom: 0; width: 3em; height: 2.8em; pointer-events: none; background: #0C0C0C
}
.form-type-select .form-item__inner:hover:before { background: #000
}
.form-type-select .form-item__inner:after { position: absolute; right: 1.2em; bottom: 1.284em; pointer-events: none; content: ''; width: 0; height: 0; border-style: solid; border-width: .6em .5em 0 .5em; border-color: #646464 transparent transparent transparent; -webkit-transform: rotate(360deg)
}
.form-type-select .form-item__inner:hover:after { border-color: #fb0 transparent transparent transparent
}
.l-content>.user-login { padding-left: 8%; padding-right: 8%
}
.l-content>.user-login .create-account { display: block; margin: 2.4em 0 0; border-top: 0.2em solid #080808; padding: 2em; text-align: center; background: #161616
}
.l-content>.user-login .create-account h2 { display: block; margin: 0; padding: 0 0 1.2em; font-size: 1.6em; font-weight: 600; text-align: center
}
@media (min-width: 40em) { .l-content>.user-login .create-account { padding-bottom: 3em }
}
@media (min-width: 80em) { .l-content>.user-login #user_login_form { float: left; width: 64% } .l-content>.user-login .create-account { float: right; width: 31%; margin: 0; border-top: none; border-left: 0.2em solid #0C0C0C; padding: 2em 3% 4em }
}
#user_pass_form { text-align: center
}
.login-password { display: block; float: right; margin: -1.2em 0 0; padding: 0.4em 0.8em; font-size: 1.1em
}
.login-password:hover { color: #fb0; background: none
}
.back-to-login { display: inline-block; width: auto
}
.interact-wip { position: relative; cursor: wait; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none
}
.interact-input { display: block; width: 0em; height: 0; margin: 0; overflow: visible
}
.interact-input .interact-progress-throbber { min-width: 2.8em; min-height: 3.6em; margin: 1.92em 0 0; pointer-events: none; background-color: #000; background-color: rgba(0, 0, 0, 0.1)
}
@media (min-width: 40em) { .interact-input { left: 0.72em; display: inline-block; min-height: 3.6em; margin: 1.2em 0 0; vertical-align: middle } .interact-input .interact-progress-throbber { margin: 0 }
}
.btn-wip .interact-progress-throbber { font-size: 0.84em; background-color: #000; background-color: rgba(0, 0, 0, 0.2)
}
.interact-progress-throbber { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 34; background-color: #000; background-color: rgba(0, 0, 0, 0.5); vertical-align: center; -webkit-animation: fadeIn 120ms linear 0ms 1; animation: fadeIn 120ms linear 0ms 1
}
.interact-progress-throbber>.inner { position: absolute; top: 50%; left: 0; z-index: 128; width: 100%; min-height: 1.8em; margin-top: -0.9em; text-align: center; overflow: visible
}
.interact-progress-throbber .throbber { position: relative; display: inline-block; width: 1.8em; height: 1.8em; padding: 0.4em; background-clip: content-box; vertical-align: middle
}
.interact-progress-throbber .throbber:before,
.interact-progress-throbber .throbber:after { content: ''; position: absolute; top: 0%; left: 0%; display: block; width: 12%; height: 12%; margin: -6% 0 0 -6%; background: #fb0; -webkit-animation: framerunner 1.4s ease infinite; animation: framerunner 1.4s ease infinite
}
.interact-progress-throbber .throbber:after { -webkit-animation-delay: -0.7s; animation-delay: -0.7s
}
.interact-progress-throbber .throbber>.inner { position: relative; display: block; width: 100%; height: 100%; background: #484848; -webkit-animation: rotate 1.4s ease infinite; animation: rotate 1.4s ease infinite; overflow: hidden
}
.interact-progress-throbber .throbber>.inner:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation: crossfill-back 2.8s steps(1) 0.7s infinite; animation: crossfill-back 2.8s steps(1) 0.7s infinite
}
.interact-progress-throbber .throbber>.inner:after { content: ''; position: absolute; top: 0%; right: 0%; bottom: 100%; left: 0%; background: #fff; -webkit-animation: crossfill-front 2.8s ease infinite; animation: crossfill-front 2.8s ease infinite
}
.interact-progress-throbber .message { display: inline-block; padding: 0 1em; vertical-align: middle; text-transform: lowercase
}
.form-checkbox+label .interact-progress-throbber,
.form-radio+label .interact-progress-throbber { background-color: #000; background-color: rgba(0, 0, 0, 0.5)
}
.form-checkbox+label .interact-progress-throbber>.inner,
.form-radio+label .interact-progress-throbber>.inner { top: 0; bottom: 0; margin: 0
}
.form-checkbox+label .interact-progress-throbber .throbber,
.form-radio+label .interact-progress-throbber .throbber { position: absolute; top: 50%; left: 0.45em; margin-top: -0.9em; padding: 0.55em; font-size: 0.9em
}
.form-checkbox+label .interact-progress-throbber .throbber>.inner,
.form-radio+label .interact-progress-throbber .throbber>.inner { background: #fb0; -webkit-animation: rotate 1.4s ease infinite; animation: rotate 1.4s ease infinite
}
.form-checkbox+label .interact-progress-throbber .throbber>.inner:before,
.form-checkbox+label .interact-progress-throbber .throbber>.inner:after,
.form-radio+label .interact-progress-throbber .throbber>.inner:before,
.form-radio+label .interact-progress-throbber .throbber>.inner:after { content: none; -webkit-animation: none; animation: none
}
.form-checkbox+label .interact-progress-throbber .message,
.form-radio+label .interact-progress-throbber .message { position: absolute; top: 0; right: 0; bottom: 0; left: 2.4em; padding: 0; text-align: left; color: #fff; visibility: hidden
}
.form-checkbox+label .interact-progress-throbber .message>.inner,
.form-radio+label .interact-progress-throbber .message>.inner { position: absolute; top: 50%; left: 0; margin-top: -0.67em
}
.form-radio+label .interact-progress-throbber .throbber>.inner { border-radius: 50%
}
.form-checkbox.progress-disabled+label,
.form-radio.progress-disabled+label { color: #484848
}
.form-checkbox.progress-disabled+label:after,
.form-radio.progress-disabled+label:after { display: none
}
@-webkit-keyframes interact-progress-throbber-fadein { 0% { background-color: #000; background-color: transparent } 100% { background-color: #000; background-color: rgba(0, 0, 0, 0.5) }
}
@keyframes interact-progress-throbber-fadein { 0% { background-color: #000; background-color: transparent } 100% { background-color: #000; background-color: rgba(0, 0, 0, 0.5) }
}
@media (min-width: 30em) and (max-width: 39.99em) { .form-type--radiochecks { padding-left: 8%; padding-right: 8% }
}
@media (min-width: 40em) { .btn, .form-submit, .button-operator, .login-account, .login-register { display: inline-block; width: auto; margin: 1em 0.6em 0; vertical-align: middle } .interactions, .form-actions, .checkout-buttons { margin-bottom: 1em } .form-type--text, .form-type--selectbox { margin: 1.4em 0 2.4em; clear: both } .form-type--text label, .form-type--selectbox label { width: 30%; min-height: 2.6em; padding: 0.8em 0.8em 0 0; float: left; text-align: left; line-height: normal } .form-type--text .description, .form-type--selectbox .description { width: auto; margin: 1em 2% 1.2em 32% } .form-type--text .form-item__inner, .form-type--selectbox .form-item__inner { display: block; width: 70%; margin-left: 30%; text-align: left } .field-group--label-hidden .form-type--text .form-item__inner, .field-group--label-hidden .form-type--selectbox .form-item__inner { width: 100% } .form-text, .form-select { text-align: left } .field-group--label-hidden .form-type--text, .field-group--label-hidden .form-type-select, .form-type--radiocheck { width: 80%; display: block; margin-top: 0; margin-left: auto; margin-right: auto } .field-group--label-hidden .form-type--text .description, .field-group--label-hidden .form-type-select .description, .form-type--radiocheck .description { width: auto; margin-left: 4%; margin-right: 4% } .form-description { width: auto; margin-left: 4%; margin-right: 4% }
}
@media (min-width: 48em) { .form-type-checkboxes { text-align: left } .form-type-checkbox { display: inline-block; width: 49%; vertical-align: middle } .field-group--label-hidden .form-type--text, .field-group--label-hidden .form-type-select, .form-type-radio, .form-type-checkbox:only-of-type { display: block; width: 72%; text-align: center; margin-left: auto; margin-right: auto } .field-group--label-hidden .form-type--text .form-checkbox+label, .field-group--label-hidden .form-type-select .form-checkbox+label, .form-type-radio .form-checkbox+label, .form-type-checkbox:only-of-type .form-checkbox+label { display: inline-block; width: auto; text-align: left } .form-type--radiochecks>label, fieldset legend .fieldset-legend { font-size: 1.8em; font-weight: 100 }
}
@media (min-width: 55em) { .form-type-checkboxes { display: block; width: 72%; margin-left: auto; margin-right: auto }
}
@media (min-width: 61.25em) { .form-type--text, .form-type-select { position: relative; display: inline-block; width: 48%; margin: 2.8em 0 1.6em; padding: 0; vertical-align: top } .form-type--text label, .form-type-select label { float: none; position: absolute; bottom: 100%; left: 0; width: 100%; width: auto; min-height: 0; padding: 0 1em 0 2.2em; font-size: 1.1em; line-height: 1.8em; background: #1A1A1A; overflow: hidden; white-space: nowrap } .form-type--text label:active, .form-type-select label:active { margin-bottom: -0.2em; z-index: -8 } .form-type--text label:before, .form-type-select label:before { position: absolute; top: 0; left: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 1.8em 1.8em 0 0; border-color: #222 transparent transparent transparent; -webkit-transform: rotate(360deg) } .form-type--text label:after, .form-type-select label:after { content: '//'; padding-left: 0.26em; color: #484848 } .form-type--text .description, .form-type-select .description { width: auto; margin-left: 2%; margin-right: 2%; margin-bottom: 0 } .fieldset-wrapper .form-wrapper>.form-type--text:only-of-type, .fieldset-wrapper .form-wrapper>.form-type-select:only-of-type { display: block; width: 64%; margin-left: auto; margin-right: auto } .form-item+.form-type--text-monoline:nth-child(2n), .form-item+.form-type-select:nth-child(2n) { margin-left: 3% } .form-type--text .form-item__inner, .form-type--selectbox .form-item__inner { display: block; width: 100%; margin-left: 0 } .form-type--text-polyline { width: 100%; clear: both } .form-type-radio, .form-type-checkbox:only-of-type { width: 64% } .form-type-checkboxes { width: 100% } .form-type-checkbox { width: 33% } .form-type--radiochecks>label, fieldset legend .fieldset-legend { padding: 0.5em 2em 0.4em }
}
.view .more-link { text-align: right
}
.view .more-link .btn { margin-right: 0
}
.views-table .views-row { clear: both
}
.views-table .views-row:after { content: ''; display: table; line-height: 0; clear: both
}
.views-table .views-column-field { display: block; float: left
}
._views-table-header { background: red
}
.entity-commerce-order .view-commerce-cart-content .view__inner { padding-top: 0; padding-bottom: 0
}
.entity-commerce-order .commerce-price-formatted-components { margin-bottom: 2em
}
.commerce-checkout-form--checkout-page .checkout-help { padding: 0.8em 0 1.4em; font-size: 1.5em; font-weight: 200; color: #F8F8FA
}
@media (min-width: 55em) { .commerce-checkout-form--checkout-page .checkout-help { margin: 0 auto; width: 80% }
}
@media (min-width: 70em) { .commerce-checkout-form--checkout-page .checkout-help { width: 70% }
}
.commerce-checkout-form-review .review--data-wrapper { display: block; clear: both
}
.commerce-checkout-form-review .review--data-wrapper:after { content: ''; display: table; line-height: 0; clear: both
}
.commerce-checkout-form-review .form-items-wrapper label { padding: 0.2em 0 0.1em; padding: 0; font-size: 0.85em; text-align: left; letter-spacing: 0.02em; color: #AFAFB2
}
.commerce-checkout-form-review .form-items-wrapper label:before { content: '//'; color: #646464; padding-right: 0.4em
}
.commerce-checkout-form-review .view-commerce-cart-summary,
.commerce-checkout-form-review .commerce_shipping legend { padding-top: 3em
}
.commerce-checkout-form-review .view-commerce-cart-summary:before,
.commerce-checkout-form-review .commerce_shipping legend:before { content: ''; display: block; margin-bottom: 2em; height: 0.2em; background: #111
}
@media (min-width: 55em) { .commerce-checkout-form-review .view-commerce-cart-summary, .commerce-checkout-form-review .commerce_shipping legend { padding-top: 2em }
}
.commerce-checkout-form-review .component-type-commerce-price-formatted-amount .component-title { color: #fff
}
.commerce_payment .fieldset-wrapper { text-align: center
}
.commerce_payment #edit-commerce-payment-payment-method { display: inline-block
}
.commerce_payment #edit-commerce-payment-payment-method>.form-item { width: auto; float: left; clear: both; text-align: left
}
.commerce_payment #payment-details { margin-top: 2em; text-align: left
}
.commerce_payment .commerce-paypal-ec-info { text-align: left
}
.commerce_payment .shipping-warning { padding: 0.8em 1.2em 1.2em; font-weight: normal; color: #000; background-color: #EEEEF0
}
.commerce_payment .shipping-warning strong { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important; font-size: 0.7em; line-height: 0.7em; font-weight: bold; color: #646464
}
.commerce_payment .form-number { -moz-appearance: textfield
}
.commerce_payment .commerce-credit-card-expiration:after { content: ''; display: table; line-height: 0; clear: both
}
@media (max-width: 39.99em) { .commerce_payment .commerce-credit-card-expiration { padding-top: 2.7em } .commerce_payment .commerce-credit-card-expiration label { position: absolute; bottom: 100%; left: 0; width: 222.222% }
}
.commerce_payment .commerce-credit-card-expiration .form-type-select { float: left; width: 45%
}
.commerce_payment .commerce-credit-card-expiration .commerce-month-year-divider { float: left; display: block; width: 10%; margin: 0 0 1.4em; padding: 0; font-size: 1em; line-height: 3.12em; text-align: center
}
.commerce_payment .commerce-credit-card-expiration .form-item-commerce-payment-payment-details-credit-card-exp-year .form-item__inner { border-left-color: #fb0
}
@media (min-width: 40em) and (max-width: 61.24em) { .commerce_payment .commerce-credit-card-expiration .commerce-month-year-divider { width: 10%; font-size: 1em; margin: 1.4em 0 2.4em } .commerce_payment .commerce-credit-card-expiration .form-item-commerce-payment-payment-details-credit-card-exp-month { width: 60% } .commerce_payment .commerce-credit-card-expiration .form-item-commerce-payment-payment-details-credit-card-exp-month label { width: 50% } .commerce_payment .commerce-credit-card-expiration .form-item-commerce-payment-payment-details-credit-card-exp-month .form-item__inner { width: 50%; margin-left: 50% } .commerce_payment .commerce-credit-card-expiration .form-item-commerce-payment-payment-details-credit-card-exp-year { width: 30%; clear: right } .commerce_payment .commerce-credit-card-expiration .form-item-commerce-payment-payment-details-credit-card-exp-year .form-item__inner { width: 100%; margin-left: 0 }
}
@media (min-width: 61.25em) { .commerce_payment .form-item-commerce-payment-payment-details-credit-card-number, .commerce_payment .form-item-commerce-payment-payment-details-credit-card-code { margin-left: 3% } .commerce_payment #payment-details:after { content: ''; display: table; line-height: 0; clear: both } .commerce_payment #payment-details>.form-item, .commerce_payment .commerce-credit-card-expiration { display: block; width: 48%; float: left; clear: none } .commerce_payment .commerce-credit-card-expiration { clear: left } .commerce_payment .commerce-credit-card-expiration .form-item { width: 47% } .commerce_payment .commerce-credit-card-expiration .commerce-month-year-divider { margin: 2.8em 0 1.6em; width: 6% } .commerce_payment .commerce-credit-card-expiration .form-item-commerce-payment-payment-details-credit-card-exp-year { clear: right }
}
.commerce_payment+.checkout-buttons { margin-top: 1em
}
._logo-disguiser,
._logo-disguiser--paypal,
.commerce-paypal-ec-payment-mark .paypal-ec--paypal,
.btn--paypal-ec .paypal-ec--paypal,
._logo-disguiser--cc,
.commerce-payment--submethod--visa,
.commerce-payment--submethod--mastercard { display: inline-block; vertical-align: middle; letter-spacing: 0.1em; line-height: 1em; overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: center center
}
._logo-disguiser .inner,
._logo-disguiser--paypal .inner,
.commerce-paypal-ec-payment-mark .paypal-ec--paypal .inner,
.btn--paypal-ec .paypal-ec--paypal .inner,
._logo-disguiser--cc .inner,
.commerce-payment--submethod--visa .inner,
.commerce-payment--submethod--mastercard .inner { position: relative; top: 2em
}
._logo-disguiser--paypal,
.commerce-paypal-ec-payment-mark .paypal-ec--paypal,
.btn--paypal-ec .paypal-ec--paypal { width: 3.8em; color: #1C3664; background-image: url("../img/misc/PayPal-logo.svg")
}
._logo-disguiser--cc,
.commerce-payment--submethod--visa,
.commerce-payment--submethod--mastercard { width: 1.6em; color: #1C3664; background-image: url("../img/misc/PayPal-logo.svg")
}
.commerce-payment--method--paypal-wppcommerce-payment-paypal-wpp { display: inline-block
}
.commerce-payment--method--paypal-wppcommerce-payment-paypal-wpp .commerce-payment--label { font-size: 0.8em; line-height: 1em; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.commerce-payment--method--paypal-wppcommerce-payment-paypal-wpp .commerce-payment--submethods { padding: 0.4em 0.62em 0.4em 0.55em; background: #E8E8EA; border-radius: .2em
}
.commerce-paypal-ec-payment-mark { display: inline-block; border: 0.1em solid #f9a818; padding: 0.68em 0.05em 0.68em 0.2em; vertical-align: middle; font-family: "Verdana", Arial, Verdana, san-serif; font-weight: bold; font-style: italic; background-color: #ffedcc; border-radius: .2em
}
.commerce-paypal-ec-payment-mark .paypal-ec--paypal { display: block; font-size: 0.9em
}
.commerce-payment--submethod { margin-right: 0.3em; vertical-align: text-bottom; font-size: 1.8em
}
.commerce-payment--submethod:last-of-type { margin-right: 0
}
.commerce-payment--submethod--visa { color: #004686; background-image: url("../img/misc/Visa-logo.svg")
}
.commerce-payment--submethod--mastercard { color: #fff; background-image: url("../img/misc/MasterCard-logo.svg")
}
.btn--checkout-pay .icn--lock { padding-right: 0.3em; font-size: 1.2em
}
.commerce-checkout-form-paypal-ec #commerce-shipping-service-ajax-wrapper { clear: both
}
.commerce-checkout-form-paypal-ec .commerce_shipping legend { padding-top: 3em
}
.commerce-checkout-form-paypal-ec .commerce_shipping legend:before { content: ''; display: block; margin-bottom: 2em; height: 0.2em; background: #111
}
@media (min-width: 55em) { .commerce-checkout-form-paypal-ec .commerce_shipping legend { padding-top: 2em }
}
.commerce-checkout-form-paypal-ec .btn--checkout-pay { margin-top: 1.6em
}
.commerce-checkout-form-complete .checkout-completion-message p { margin: 1em 0 1.4em; font-size: 1.3em; font-weight: 200
}
.commerce-checkout-form-complete .checkout-completion-message p+p { margin: 0.8em 0 1em
}
.commerce-checkout-form-complete .checkout-completion-message p:last-of-type { margin-bottom: 2em
}
.paypal-ec-order-form { text-align: center
}
@media (min-width: 40em) { .paypal-ec-order-form .btn { margin-top: 0.5em }
}
.btn--paypal-ec { display: inline-block; width: auto; white-space: nowrap; line-height: 1em; padding: 0.45em 1.34em 0.45em; font-family: "Verdana", Arial, Verdana, san-serif; font-weight: bold; font-style: italic; color: #1C3664; background: #fb0; border-radius: 2em
}
.btn--paypal-ec .interact-progress-throbber { border-radius: 2em
}
.btn--paypal-ec>.inner { font-size: 1.34em
}
.btn--paypal-ec:hover,
.btn--paypal-ec:active { color: #369; background: #FFD45D
}
.boxshadow .btn--paypal-ec { background: #FFDC78; box-shadow: 0 -1em 0 #fb0 inset
}
.boxshadow .btn--paypal-ec:hover,
.boxshadow .btn--paypal-ec:active { box-shadow: 0 -1em 0 #fb0 inset, 0 0 2em -0.5em #FFD45D
}
.btn--paypal-ec .paypal-ec--btn-block { display: inline-block; vertical-align: top; word-spacing: 0em; line-height: 1em
}
.btn--paypal-ec .paypal-ec--check-out-with { font-size: 0.5em; letter-spacing: -0.01em
}
.btn--paypal-ec .paypal-ec--with { display: block
}
.btn--paypal-ec .paypal-ec--paypal { margin-top: 0.05em
}
.no-svg .btn--paypal-ec .paypal-ec--btn-block { position: static
}
.no-svg .btn--paypal-ec .paypal-ec--paypal { margin: 0; padding-bottom: 0.1em; background: none; letter-spacing: normal; position: static
}
.no-svg .btn--paypal-ec .paypal-ec--paypal .inner { position: static
}
.paypal-ec--description { font-size: 0.9em; line-height: 2em; color: #A0A0A2; cursor: default
}
.field--name-commerce-customer-shipping,
.field--name-commerce-customer-billing,
.review--data-order,
.user-profile-item--info { margin: 1.6em 0 0
}
.field--name-commerce-customer-shipping .field__label,
.field--name-commerce-customer-billing .field__label,
.review--data-order .field__label,
.user-profile-item--info .field__label { display: block; line-height: 2em; font-size: 1.4em; font-weight: 200; text-align: center; color: #000; background: #DBDBDD
}
.field--name-commerce-customer-shipping .field__label .inner,
.field--name-commerce-customer-billing .field__label .inner,
.review--data-order .field__label .inner,
.user-profile-item--info .field__label .inner { display: block; padding: 0.2em 1em
}
.field--name-commerce-customer-shipping>.field,
.field--name-commerce-customer-shipping>.field__items,
.field--name-commerce-customer-shipping .form-items-wrapper,
.field--name-commerce-customer-billing>.field,
.field--name-commerce-customer-billing>.field__items,
.field--name-commerce-customer-billing .form-items-wrapper,
.review--data-order>.field,
.review--data-order>.field__items,
.review--data-order .form-items-wrapper,
.user-profile-item--info>.field,
.user-profile-item--info>.field__items,
.user-profile-item--info .form-items-wrapper { margin-top: 0.26em; font-size: 1.2em; line-height: 1.2em; padding: 1em 1.2em; background: #111
}
.field--name-commerce-customer-shipping p,
.field--name-commerce-customer-billing p,
.review--data-order p,
.user-profile-item--info p { margin: 0
}
@media (min-width: 40em) { .field--name-commerce-customer-shipping .field__label, .field--name-commerce-customer-billing .field__label, .review--data-order .field__label, .user-profile-item--info .field__label { position: relative; float: left; text-align: left; font-size: 1.3em } .field--name-commerce-customer-shipping .field__label .inner, .field--name-commerce-customer-billing .field__label .inner, .review--data-order .field__label .inner, .user-profile-item--info .field__label .inner { position: relative; padding-right: 3.4em; overflow: hidden } .field--name-commerce-customer-shipping .field__label .inner:after, .field--name-commerce-customer-billing .field__label .inner:after, .review--data-order .field__label .inner:after, .user-profile-item--info .field__label .inner:after { position: absolute; top: 0; right: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 2.5em 2.5em 0; border-color: transparent #222 transparent transparent; -webkit-transform: rotate(360deg) } .field--name-commerce-customer-shipping .field__label:after, .field--name-commerce-customer-billing .field__label:after, .review--data-order .field__label:after, .user-profile-item--info .field__label:after { position: absolute; top: 100%; left: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 2em 2em 0; border-color: transparent #88888A transparent transparent; -webkit-transform: rotate(360deg) } .field--name-commerce-customer-shipping>.field, .field--name-commerce-customer-shipping>.field__items, .field--name-commerce-customer-shipping .form-items-wrapper, .field--name-commerce-customer-billing>.field, .field--name-commerce-customer-billing>.field__items, .field--name-commerce-customer-billing .form-items-wrapper, .review--data-order>.field, .review--data-order>.field__items, .review--data-order .form-items-wrapper, .user-profile-item--info>.field, .user-profile-item--info>.field__items, .user-profile-item--info .form-items-wrapper { clear: both; position: relative; width: 96%; margin-left: 4% }
}
@media (min-width: 55em) { .field--name-commerce-customer-shipping, .field--name-commerce-customer-billing, .review--data-order, .user-profile-item--info { float: left; width: 50%; margin: 1em 0; padding-right: 5% } .field--name-commerce-customer-shipping:nth-of-type(2n+1), .field--name-commerce-customer-billing:nth-of-type(2n+1), .review--data-order:nth-of-type(2n+1), .user-profile-item--info:nth-of-type(2n+1) { clear: left } .field--name-commerce-customer-shipping+.review--data-customer-profile-shipping, .field--name-commerce-customer-shipping+.field--name-commerce-customer-shipping, .field--name-commerce-customer-billing+.review--data-customer-profile-shipping, .field--name-commerce-customer-billing+.field--name-commerce-customer-shipping, .review--data-order+.review--data-customer-profile-shipping, .review--data-order+.field--name-commerce-customer-shipping, .user-profile-item--info+.review--data-customer-profile-shipping, .user-profile-item--info+.field--name-commerce-customer-shipping { padding-right: 0; padding-left: 5%; clear: right } .field--name-commerce-customer-shipping>.field, .field--name-commerce-customer-shipping>.field__items, .field--name-commerce-customer-shipping .form-items-wrapper, .field--name-commerce-customer-billing>.field, .field--name-commerce-customer-billing>.field__items, .field--name-commerce-customer-billing .form-items-wrapper, .review--data-order>.field, .review--data-order>.field__items, .review--data-order .form-items-wrapper, .user-profile-item--info>.field, .user-profile-item--info>.field__items, .user-profile-item--info .form-items-wrapper { width: 91.1111%; margin-left: 8.8889% } .field--name-commerce-customer-shipping.review--data-commerce-fieldgroup-pane--group-order-notes, .field--name-commerce-customer-billing.review--data-commerce-fieldgroup-pane--group-order-notes, .review--data-order.review--data-commerce-fieldgroup-pane--group-order-notes, .user-profile-item--info.review--data-commerce-fieldgroup-pane--group-order-notes { width: 100%; padding-right: 0 } .field--name-commerce-customer-shipping.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .field--name-commerce-customer-shipping.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper, .field--name-commerce-customer-billing.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .field--name-commerce-customer-billing.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper, .review--data-order.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .review--data-order.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper, .user-profile-item--info.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .user-profile-item--info.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper { width: 96%; margin-left: 4% }
}
@media (min-width: 70em) { .field--name-commerce-customer-shipping>.field, .field--name-commerce-customer-shipping>.field__items, .field--name-commerce-customer-shipping .form-items-wrapper, .field--name-commerce-customer-billing>.field, .field--name-commerce-customer-billing>.field__items, .field--name-commerce-customer-billing .form-items-wrapper, .review--data-order>.field, .review--data-order>.field__items, .review--data-order .form-items-wrapper, .user-profile-item--info>.field, .user-profile-item--info>.field__items, .user-profile-item--info .form-items-wrapper { width: 93, 3333%; margin-left: 6.6667% } .field--name-commerce-customer-shipping.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .field--name-commerce-customer-shipping.review--data-commerce-fieldgroup-pane--group-order-notes>.field__items, .field--name-commerce-customer-shipping.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper, .field--name-commerce-customer-billing.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .field--name-commerce-customer-billing.review--data-commerce-fieldgroup-pane--group-order-notes>.field__items, .field--name-commerce-customer-billing.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper, .review--data-order.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .review--data-order.review--data-commerce-fieldgroup-pane--group-order-notes>.field__items, .review--data-order.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper, .user-profile-item--info.review--data-commerce-fieldgroup-pane--group-order-notes>.field, .user-profile-item--info.review--data-commerce-fieldgroup-pane--group-order-notes>.field__items, .user-profile-item--info.review--data-commerce-fieldgroup-pane--group-order-notes .form-items-wrapper { width: 97%; margin-left: 3% }
}
.user-profile .user-profile-category { clear: both
}
.user-profile .user-profile-category:after { content: ''; display: table; line-height: 0; clear: both
}
.user-profile .header--user-profile>.inner { padding: 0.5em 2em 0.4em; font-size: 1.4em; font-weight: 100; text-align: center; color: #AFAFB2; cursor: default
}
.user-profile .user-profile-item--info a { position: relative; top: 0.5em; display: inline-block; margin-top: -0.5em; margin-left: -0.7em; padding: 0.5em 0.7em
}
@media (min-width: 48em) { .user-profile .header--user-profile>.inner { font-size: 1.8em; font-weight: 100 }
}
.view-commerce-backoffice-user-orders .view-empty { padding: 1em 1.6em 1.1em; background: #111
}
.view-commerce-backoffice-user-orders .view-empty:before { content: '//'; padding-right: 0.2em; color: #A0A0A2
}
.view-commerce-backoffice-user-orders .views-column-field { width: 100%
}
.view-commerce-backoffice-user-orders .views-table-header { margin-bottom: .9em; color: #646464
}
.view-commerce-backoffice-user-orders .views-table-header .views-field { font-size: 1.1em
}
.view-commerce-backoffice-user-orders .views-table-header .views-field a { display: block; padding: 0.5em 0.6em; line-height: 1.6em; color: #be972d
}
.view-commerce-backoffice-user-orders .views-table-header .views-field a:hover,
.view-commerce-backoffice-user-orders .views-table-header .views-field a:active { color: #000
}
.view-commerce-backoffice-user-orders .views-table-header .views-field.active a { color: #fb0
}
.view-commerce-backoffice-user-orders .views-table-header .views-field.active a:hover,
.view-commerce-backoffice-user-orders .views-table-header .views-field.active a:active { color: #000
}
.view-commerce-backoffice-user-orders .views-table-header .views-field .icn { padding-left: 0.3em; line-height: inherit; vertical-align: top
}
.view-commerce-backoffice-user-orders .views-table-header .views-field-order-number { width: 50%
}
.view-commerce-backoffice-user-orders .views-table-header .views-field-status { width: 50%; text-align: right
}
.view-commerce-backoffice-user-orders .views-table-header .views-field-created,
.view-commerce-backoffice-user-orders .views-table-header .views-field-order-id,
.view-commerce-backoffice-user-orders .views-table-header .views-field-commerce-order-total { display: none
}
.view-commerce-backoffice-user-orders .views-table-content .views-row { margin-bottom: .6em
}
.view-commerce-backoffice-user-orders .views-table-content .views-field { white-space: nowrap; background: #161616
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-created { width: 100%; padding-top: 0.2em; padding-bottom: .6em; text-align: center; line-height: 1.8em; color: #646464; background: none
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-created>.inner { font-size: 1.2em; font-weight: 200
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-number,
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-id { height: 5em
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-number { width: 74%
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-number a { display: block; padding: 0.6em 0 0.4em 0.5em; font-size: 2.5em; line-height: 1em
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-number a:before { content: '#'; padding-right: 0.1em; color: #484848
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-id { width: 26%; padding: 0; text-align: center
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-id a { display: block; width: 100%; padding: 1.2em 1em 0.8em; font-size: 1.25em; line-height: 2em; color: #343434
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-id a:hover,
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-id a:active { color: #fb0; background: none
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-id .icn { vertical-align: top; line-height: inherit
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-order-id .text { line-height: inherit; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-status,
.view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total { height: 2.8em; padding: 0 1.4em 1.34em; color: #646464
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-status>.inner,
.view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total>.inner { font-size: 1.2em
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-status { width: 56%; padding-right: 0
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-status .inner:before { font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 0.3em; vertical-align: middle; speak: none
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-status.status--Pending .inner:before,
.view-commerce-backoffice-user-orders .views-table-content .views-field-status.status--Processing .inner:before { content: '\2248'; color: #be972d; vertical-align: top
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-status.status--Shipped .inner:before { content: '\221A'; color: #fb0
}
.view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total { width: 44%; padding-left: 0; text-align: right
}
@media (min-width: 30em) { .view-commerce-backoffice-user-orders .views-table-content .views-field-order-number { width: 80% } .view-commerce-backoffice-user-orders .views-table-content .views-field-order-id { width: 20% }
}
@media (min-width: 40em) { .view-commerce-backoffice-user-orders .views-table-header .views-field { width: auto } .view-commerce-backoffice-user-orders .views-table-header .views-field-order-number { border-right: 0.1em solid #3B3B3B } .view-commerce-backoffice-user-orders .views-table-content .views-field { height: 6em } .view-commerce-backoffice-user-orders .views-table-content .views-field-created { height: auto; line-height: 2.4em } .view-commerce-backoffice-user-orders .views-table-content .views-field-created>.inner { font-size: 1.4em } .view-commerce-backoffice-user-orders .views-table-content .views-field-order-number { width: 44%; line-height: 1em; line-height: 1.2em; position: relative; z-index: 1 } .view-commerce-backoffice-user-orders .views-table-content .views-field-order-number a { display: inline-block; padding: 0.6em 0.4em 0.6em 0.5em; font-size: 2.5em; line-height: 1.2em } .view-commerce-backoffice-user-orders .views-table-content .views-field-order-id { float: right; width: 10% } .view-commerce-backoffice-user-orders .views-table-content .views-field-order-id a { padding: 1.2em 0; font-size: 1.25em; line-height: 2.4em } .view-commerce-backoffice-user-orders .views-table-content .views-field-status, .view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total { padding: 2.3em 0 } .view-commerce-backoffice-user-orders .views-table-content .views-field-status>.inner, .view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total>.inner { font-size: 1.2em } .view-commerce-backoffice-user-orders .views-table-content .views-field-status { width: 26% } .view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total { width: 20%; text-align: center }
}
@media (min-width: 61.25em) { .view-commerce-backoffice-user-orders .views-table-content .views-row { background: #111 } .view-commerce-backoffice-user-orders .views-table-content .views-field { height: 6em; background: none } .view-commerce-backoffice-user-orders .views-table-content .views-field-order-number a { padding-left: .5em; padding-right: .5em } .view-commerce-backoffice-user-orders .views-table-content .views-field-created, .view-commerce-backoffice-user-orders .views-table-content .views-field-status, .view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total { padding: 2.3em 0; text-align: left } .view-commerce-backoffice-user-orders .views-table-content .views-field-created>.inner, .view-commerce-backoffice-user-orders .views-table-content .views-field-status>.inner, .view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total>.inner { font-size: 1.2em; line-height: 1em } .view-commerce-backoffice-user-orders .views-table-content .views-field-created { width: 28%; padding-left: 2em } .view-commerce-backoffice-user-orders .views-table-content .views-field-status { width: 18% } .view-commerce-backoffice-user-orders .views-table-content .views-field-commerce-order-total { width: 14%; text-align: center } .view-commerce-backoffice-user-orders .views-table-content .views-field-order-number { width: 30% }
}
.user-profile-form .form-item-pass>.description { margin-top: 0
}
.user-profile-form .password-indicator .indicator { width: 0%; height: 0.2em; background-color: #fb0; -webkit-transition: width 200ms; transition: width 200ms
}
.user-profile-form .password-strength-info,
.user-profile-form .password-confirm-info { margin-top: 0.5em; text-align: right; color: #646464; visibility: visible; filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition: visibility 0ms 0ms, opacity 200ms; -o-transition: visibility 0ms 0ms, opacity 200ms; -webkit-transition: visibility 0ms, opacity 200ms; -webkit-transition-delay: 0ms, 0s; -webkit-transition: visibility 0ms 0ms, opacity 200ms; transition: visibility 0ms 0ms, opacity 200ms
}
.user-profile-form .password-strength-info.hidden,
.user-profile-form .password-confirm-info.hidden { visibility: hidden; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: visibility 200ms 0ms, opacity 200ms; -o-transition: visibility 200ms 0ms, opacity 200ms; -webkit-transition: visibility 200ms, opacity 200ms; -webkit-transition-delay: 0ms, 0s; -webkit-transition: visibility 200ms 0ms, opacity 200ms; transition: visibility 200ms 0ms, opacity 200ms
}
.user-profile-form .password-suggestions { display: block
}
.user-profile-form .password-suggestions.hidden { display: none
}
.user-profile-form .password-suggestions ul { margin: 0; padding: 0 0 0 0.8em; list-style: none
}
.user-profile-form .password-suggestions ul li:before { content: '>'; padding-right: 0.5em; color: #484848
}
@media (min-width: 40em) and (max-width: 61.24em) { .user-profile-form .form-item-pass-pass2 { margin-bottom: 1em } .user-profile-form .password-suggestions { width: 70%; margin-left: 30% }
}
.action-link--add-an-address,
.commerce-addressbook-billing-list { display: none
}
.commerce-addressbook-profile-options-delete-form .field--type-addressfield { width: 100%; margin: 1em 0; padding: 1em 1.2em; font-size: 1.34em; line-height: 1.2em; background: #111
}
.commerce-addressbook-profile-options-delete-form p { margin: 0; padding: 1em 1.6em 1.1em; background: #111
}
.commerce-addressbook-profile-options-delete-form p:after { content: '//'; padding-left: 0.34em; color: #484848
}
@media (min-width: 55em) { .commerce-addressbook-profile-options-delete-form p { float: right; width: 48.5%; margin: 0 0 1.34em } .commerce-addressbook-profile-options-delete-form .field--type-addressfield { float: left; width: 48.5%; margin: 0 3% 1em 0 }
}
.l-action-links .action-links__inner { padding-bottom: 0
}
.action-links { margin: 0; padding: 0; list-style: none
}
.action-links .btn { margin-top: 0; margin-left: 0
}
.action-links .action-link--add-an-address a { color: #2B2B2B; background: #fb0
}
.action-links .action-link--add-an-address a:hover { color: #fb0; background: #000
}
.action-links .action-link--add-an-address a>.inner:before { content: '+'; font-family: EurostileNext, Eurostile, Arial, Verdana, san-serif; display: inline-block; font-size: 1.8em; line-height: 0.555em; vertical-align: top; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; padding-top: 0.09em; padding-right: 0.2em; font-weight: 200; speak: none
}
.l-tabs-wrapper .tabs-wrapper__inner { padding-top: 0
}
@media (max-width: 79.99em) { .l-tabs-wrapper { padding-left: 0; padding-right: 0 }
}
@media (min-width: 80em) { .l-tabs-wrapper .l-content-tabbed { float: left; width: 70%; margin-left: 6% } .l-tabs-wrapper .l-breadcrumb, .l-tabs-wrapper .l-footer>.l-region, .l-tabs-wrapper .l-tabs, .l-tabs-wrapper .node-groupless, .l-tabs-wrapper .node>.group, .l-tabs-wrapper .node>.field, .l-tabs-wrapper .group--full, .l-tabs-wrapper .group--borderless>.group__inner>.group, .l-tabs-wrapper .group--borderless>div>.group, .l-tabs-wrapper .taxonomy-term>.group, .l-tabs-wrapper .l-content>.view>.view-content, .l-tabs-wrapper .l-content>div>.view>.view-content, .l-tabs-wrapper .l-content>.block>.view>.view-content, .l-tabs-wrapper .l-content>.block>.block__header, .l-tabs-wrapper .l-content>form, .l-tabs-wrapper .l-content>div>form, .l-tabs-wrapper .l-content>.entity, .l-tabs-wrapper .l-content>.profile, .l-tabs-wrapper .taxonomy-page, .l-tabs-wrapper .l-main-title, .l-tabs-wrapper .l-messages, .l-tabs-wrapper .field--name-title-field, .l-tabs-wrapper .l-tabs-wrapper, .l-tabs-wrapper .l-action-links { padding-left: 0; padding-right: 0 }
}
.l-tabs { text-align: center
}
.l-tabs .tabs__inner { padding-bottom: 0
}
.l-tabs .tabs-wrapper { position: relative; margin: 0; padding: .5em; font-size: 1.1em; background: #111; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none
}
.l-tabs .tabs-wrapper:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 1em 2em 0 2em; border-color: #111 transparent transparent transparent; -webkit-transform: rotate(360deg); position: absolute; top: 100%; left: 50%; margin-left: -2em
}
.l-tabs .tabs-wrapper--secondary { margin-top: 1.8em
}
.l-tabs ul { list-style: none outside none
}
.l-tabs .tabs { width: 100%; margin: 0; padding: 0; background: #111
}
.l-tabs .tabs-list { margin: 0; padding: 0
}
.l-tabs li { display: block; margin: 0; padding: 0
}
.l-tabs li a,
.l-tabs .tab--toggler { display: block; margin: 0; padding: 0.55em 0.5em; font-weight: normal; color: #fff; background: none; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none
}
.l-tabs li a:hover,
.l-tabs .tab--toggler:hover { color: #000; background: #fb0
}
.l-tabs li.active a { color: #000; background: #EEEEF0; cursor: default
}
.l-tabs .tabs-wrapper--toggle { position: relative
}
.l-tabs .tabs-wrapper--toggle .tabs { position: absolute; top: 0; right: 0; left: 0; z-index: 84; height: 0; overflow: hidden; background: #080808; -webkit-transition: height 200ms; transition: height 200ms
}
.l-tabs .tabs-wrapper--toggle .tabs--secondary { z-index: 83
}
.l-tabs .tabs-wrapper--toggle .tabs-list { padding: .5em
}
.l-tabs .tabs-wrapper--toggle.open .tabs { height: auto
}
.l-tabs .tab--toggler { position: relative; cursor: pointer; padding-left: 2em
}
.l-tabs .tab--toggler:before { content: '\2261'; font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; position: absolute; top: 46%; left: 0; width: 2em; height: 2em; margin-top: -1em; line-height: 2em; padding: 0; text-align: center
}
@media (min-width: 40em) { .l-tabs { text-align: justify } .l-tabs .element-invisible { display: inline } .l-tabs .tabs-wrapper { display: inline-block; width: 48%; text-align: center; vertical-align: bottom } .l-tabs .tabs-wrapper:after { content: ''; display: table; line-height: 0; clear: both } .l-tabs .tabs-wrapper+.element-invisible { display: none } .l-tabs .tabs-wrapper--secondary { margin-top: 0; margin-left: 4% }
}
@media (min-width: 40em) and (max-width: 79.99em) { .l-tabs.l-tabs--has-secondary .tabs-wrapper--primary:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 1.25em 0 1.25em .625em; border-color: transparent transparent transparent #111; -webkit-transform: rotate(360deg); top: 51%; left: 100%; margin-top: -1.25em; margin-left: 0 }
}
@media (min-width: 80em) { .l-tabs { float: left; width: 24%; padding: 0 } .l-tabs:not(.l-tabs--has-secondary) .tabs-wrapper--primary:before, .l-tabs .tabs-wrapper--secondary:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 2em 0 2em 1em; border-color: transparent transparent transparent #111; -webkit-transform: rotate(360deg); top: 51%; left: 100%; margin-top: -2em; margin-left: 0 } .l-tabs .tabs-wrapper { width: 100% } .l-tabs .tabs-wrapper--secondary { margin-top: 1.8em; margin-left: 0 } .l-tabs .tabs, .l-tabs .tabs-wrapper--toggle .tabs { overflow: visible } .l-tabs .tabs-wrapper--toggle .tabs { position: static; height: auto; background: none } .l-tabs .tabs-wrapper--toggle .tabs-list { padding: 0 } .l-tabs .tab--toggler { display: none; cursor: default }
}
.block--views-shop-popular-devices { background-color: #1A1A1A; background-image: url("../img/block__popular-devices/popular-devices-bg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover
}
.block--views-shop-popular-devices .block__header__inner { padding-top: 2.8em; padding-bottom: 1em
}
.block--views-shop-popular-devices .block__title { margin: 0; font-size: 1.8em; font-weight: 200
}
.block--views-shop-popular-devices .block__title:after { content: '//'; padding-left: 0.24em; color: #646464
}
.block--views-shop-popular-devices .view-content .view__inner { padding-top: 2.4em; padding-bottom: 2.8em
}
@media (min-width: 40em) { .block--views-shop-popular-devices .block__title { font-size: 2em }
}
@media (min-width: 55em) { .block--views-shop-popular-devices .taxonomy-tag-item--device-variation { font-size: 1.2em }
}
@media (min-width: 61.25em) { .block--views-shop-popular-devices .taxonomy-tag-item--device-variation { font-size: 0.94em }
}
@media (min-width: 70em) { .block--views-shop-popular-devices .taxonomy-tag-item--device-variation { font-size: 1.03em }
}
@media (min-width: 80em) { .block--views-shop-popular-devices .taxonomy-tag-item--device-variation { font-size: 1.12em }
}
@media (min-width: 90em) { .block--views-shop-popular-devices .taxonomy-tag-item--device-variation { font-size: 1.5em }
}
.view-commerce-cart-content { clear: both
}
.view-commerce-cart-content .view-content { padding-bottom: 0
}
.view-commerce-cart-content .view-grouping { margin-bottom: 1.5em
}
.view-commerce-cart-content .view-grouping-header { margin: 0; padding: 0; font-size: 1.34em; font-weight: normal; text-align: center
}
.view-commerce-cart-content .view-grouping-header .inner { display: block; margin: 0; padding: 0.2em 1em; line-height: 2em; color: #080808; background: #fb0
}
.view-commerce-cart-content .view-grouping-header a.inner:hover { color: #fb0; background: #000
}
.view-commerce-cart-content.theme--bright .view-grouping-header .inner { color: #080808; background: #FFD45D
}
.view-commerce-cart-content.theme--bright .view-grouping-header a.inner:hover { color: #fb0; background: #000
}
.view-commerce-cart-content .view-title { clear: both; display: block; margin: 0.2em 0 0; padding: 0; width: 100%; font-size: 1.1em; line-height: 1.6em; text-align: center; font-weight: normal; color: #080808; background: #BEBEC0
}
.view-commerce-cart-content .view-title>.inner:before { content: '–\00a0\00a0'
}
.view-commerce-cart-content .view-title>.inner:after { content: '\00a0\00a0–'
}
.view-commerce-cart-content .views-row { clear: both
}
.view-commerce-cart-content .field-content { margin: 0; padding: 0
}
.view-commerce-cart-content .views-field-inventory-wrapper { padding: 0.6em; text-align: center; background: #080808
}
.view-commerce-cart-content.theme--bright .views-field-inventory-wrapper { background: #D8D8DA
}
.view-commerce-cart-content .views-field-inventory { line-height: 1.3em; font-size: 1.14em
}
.view-commerce-cart-content .views-field-field-coverage-auto { font-weight: 600
}
.view-commerce-cart-content .views-field-field-texture { font-size: 1.2em; font-weight: 200
}
.view-commerce-cart-content .cutout-option-auto { font-size: 0.7em; line-height: 1.1em; color: #88888A
}
.view-commerce-cart-content .cutout-option-auto .icn { display: none
}
.view-commerce-cart-content.theme--bright .views-field-field-texture { font-weight: normal
}
.view-commerce-cart-content .views-field-details-wrapper { position: relative; display: block; width: 100%; margin: 0; padding: 0; background: #111; text-align: center
}
.view-commerce-cart-content .views-field-details-wrapper:after { content: ''; display: table; line-height: 0; clear: both
}
.view-commerce-cart-content.theme--bright .views-field-details-wrapper { background: #E0E0E2
}
.view-commerce-cart-content .views-field-details { padding: 0.8em 0 0.9em
}
.view-commerce-cart-content .views-field-price { float: left; width: 50%; font-family: "EurostileNextCondensed", EurostileNext, Eurostile, Arial, Verdana, san-serif
}
.view-commerce-cart-content .views-field-price .field-content { font-size: 1.2em; line-height: 2.3em
}
.view-commerce-cart-content .views-field-price .commerce-price-savings-formatter-prices-count-1 { display: block
}
.view-commerce-cart-content .views-field-price .commerce-price-savings-formatter-prices-count-1 tbody,
.view-commerce-cart-content .views-field-price .commerce-price-savings-formatter-prices-count-1 tr,
.view-commerce-cart-content .views-field-price .commerce-price-savings-formatter-prices-count-1 td { display: block
}
.view-commerce-cart-content .views-field-commerce-unit-price { padding-right: 3em; color: #88888A
}
.view-commerce-cart-content.theme--bright .views-field-commerce-unit-price { color: #646464
}
.view-commerce-cart-content .views-field-commerce-total { padding-left: 3em; font-weight: 600
}
.view-commerce-cart-content .views-field-edit { position: absolute; top: 0; width: 3em
}
.view-commerce-cart-content .views-field-edit .form-item__inner { width: 100%; margin: 0
}
.view-commerce-cart-content .views-field-edit .form-text,
.view-commerce-cart-content .views-field-edit .form-submit,
.view-commerce-cart-content .views-field-edit .btn { display: inline-block; width: 2.5em; margin: 0 auto; height: 2.3em; padding: 0; float: none; font-size: 1.2em; line-height: 2.3em; text-align: center; background: #000
}
.view-commerce-cart-content.theme--bright .views-field-edit .form-text,
.view-commerce-cart-content.theme--bright .views-field-edit .form-submit,
.view-commerce-cart-content.theme--bright .views-field-edit .btn { color: #000; background: #FFD45D
}
.view-commerce-cart-content .views-field-edit-quantity { right: 50%; margin-right: 0.1em
}
.view-commerce-cart-content .views-field-edit-quantity .form-type-numberfield { position: static; display: block; width: 100%; margin: 0; padding: 0; float: none
}
.view-commerce-cart-content .views-field-edit-quantity .form-text::-webkit-inner-spin-button,
.view-commerce-cart-content .views-field-edit-quantity .form-text::-webkit-outer-spin-button { position: absolute; visibility: hidden; margin: 0
}
.view-commerce-cart-content .views-field-edit-quantity .form-text:hover::-webkit-inner-spin-button,
.view-commerce-cart-content .views-field-edit-quantity .form-text:hover::-webkit-outer-spin-button,
.view-commerce-cart-content .views-field-edit-quantity .form-text:active::-webkit-inner-spin-button,
.view-commerce-cart-content .views-field-edit-quantity .form-text:active::-webkit-outer-spin-button,
.view-commerce-cart-content .views-field-edit-quantity .form-text:focus::-webkit-inner-spin-button,
.view-commerce-cart-content .views-field-edit-quantity .form-text:focus::-webkit-outer-spin-button { position: static; visibility: visible; margin: 0
}
.view-commerce-cart-content .views-field-edit-quantity .form-text:hover { background: #080808
}
.view-commerce-cart-content .views-field-edit-quantity .form-text:focus { color: #000; background: #fb0
}
.view-commerce-cart-content .views-field-edit-delete { left: 50%; margin-left: 0.1em
}
.view-commerce-cart-content .views-field-edit-delete .field-content { position: relative
}
.view-commerce-cart-content .views-field-edit-delete .form-submit,
.view-commerce-cart-content .views-field-edit-delete .btn--delete { color: #484848
}
.view-commerce-cart-content .views-field-edit-delete .form-submit:hover,
.view-commerce-cart-content .views-field-edit-delete .btn--delete:hover { color: #fff; background: #E82C0C
}
.view-commerce-cart-content .views-field-edit-delete .form-submit.btn-wip,
.view-commerce-cart-content .views-field-edit-delete .btn--delete.btn-wip { color: #000; background: #691a0d
}
.view-commerce-cart-content .views-field-edit-delete .interact-input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; min-height: 0; margin: 0
}
.view-commerce-cart-content .views-field-edit-delete .interact-input .interact-progress-throbber { min-width: 0; min-height: 0; margin: 0
}
.view-commerce-cart-content.theme--bright .views-field-edit-quantity .form-text:hover,
.view-commerce-cart-content.theme--bright .views-field-edit-quantity .form-text:focus { color: #000; background: #F8F8FA
}
.view-commerce-cart-content.theme--bright .views-field-edit-delete .form-submit,
.view-commerce-cart-content.theme--bright .views-field-edit-delete .btn--delete { color: #A0A0A2; background: #CCCCCE
}
.view-commerce-cart-content.theme--bright .views-field-edit-delete .form-submit:hover,
.view-commerce-cart-content.theme--bright .views-field-edit-delete .btn--delete:hover { color: #fff; background: #E82C0C
}
.view-commerce-cart-content.view-commerce-cart-summary .views-field-details { position: static; width: 26%; float: left; padding-left: 0; padding-right: 0
}
.view-commerce-cart-content.view-commerce-cart-summary .views-field-commerce-unit-price { margin-left: 11%
}
.view-commerce-cart-content.view-commerce-cart-summary .views-field-commerce-total { margin-right: 11%
}
.view-commerce-cart-content.view-commerce-cart-summary .views-field-quantity { font-family: "EurostileNextCondensed", EurostileNext, Eurostile, Arial, Verdana, san-serif; color: #88888A
}
.view-commerce-cart-content.view-commerce-cart-summary .views-field-quantity .field-content { font-size: 1.2em; line-height: 2.3em
}
.view-commerce-cart-content.view-commerce-cart-summary .views-field-quantity .field-content:before { content: 'x '; position: relative; top: -0.05em
}
.view-commerce-cart-content.view-commerce-cart-summary.theme--bright .views-field-quantity { color: #484848
}
.view-commerce-cart-content.view-id-commerce_cart_summary .view-grouping-header:after { border-color: transparent #88888A transparent transparent
}
.view-commerce-cart-content.view-id-commerce_cart_summary .view-grouping-header .inner { color: #000; background-color: #DBDBDD
}
@media (min-width: 27em) { .view-commerce-cart-content .views-field-inventory-wrapper { padding: 0.8em } .view-commerce-cart-content .views-field-inventory { display: inline-block; font-size: 1.2em } .view-commerce-cart-content .views-field-field-coverage-auto { white-space: nowrap } .view-commerce-cart-content .views-field-field-coverage-auto .field-content:after { content: '\00a0//'; padding: 0 0.2em; letter-spacing: -0.1em; color: #646464 } .view-commerce-cart-content .views-field-field-texture { display: inline } .view-commerce-cart-content .views-field-field-texture .field-content { display: inline } .view-commerce-cart-content .cutout-option-auto { line-height: 0.8em } .view-commerce-cart-content.theme--bright .views-field-field-coverage-auto .field-content:after { color: #A0A0A2 }
}
@media (max-width: 39.99em) { .view-commerce-cart-content.view-commerce-cart-summary .views-row { background: #111 } .view-commerce-cart-content.view-commerce-cart-summary .views-row:nth-child(2n) { background: #080808 } .view-commerce-cart-content.view-commerce-cart-summary .views-field-inventory-wrapper { padding-top: 0.8em; padding-bottom: 0; background: transparent } .view-commerce-cart-content.view-commerce-cart-summary .views-field-details-wrapper { padding-bottom: 0.6em; background: transparent } .view-commerce-cart-content.view-commerce-cart-summary .views-field-details { padding: 0 } .view-commerce-cart-content.view-commerce-cart-summary .views-field-details .field-content { line-height: 1.8em }
}
@media (min-width: 40em) { .view-commerce-cart-content .view-grouping-header { position: relative; z-index: 1; float: left; text-align: left; font-size: 1.3em } .view-commerce-cart-content .view-grouping-header .inner { position: relative; padding-right: 3.2em; overflow: hidden } .view-commerce-cart-content .view-grouping-header .inner:after { position: absolute; top: 0; right: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 2.5em 2.5em 0; border-color: transparent #222 transparent transparent; -webkit-transform: rotate(360deg) } .view-commerce-cart-content .view-grouping-header:after { position: absolute; top: 100%; left: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 2em 2em 0; border-color: transparent #9E7400 transparent transparent; -webkit-transform: rotate(360deg) } .view-commerce-cart-content.theme--bright .view-grouping-header .inner:after { border-color: transparent #EEEEF0 transparent transparent } .view-commerce-cart-content.theme--bright .view-grouping-header:after { border-color: transparent #be972d transparent transparent } .view-commerce-cart-content .view-title { position: relative; float: right; margin: 0 0 0.2em; width: 48%; font-size: 0.9em; line-height: 1.8em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis } .view-commerce-cart-content .view-title:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 1.8em 1.8em 0 0; border-color: #222 transparent transparent transparent; -webkit-transform: rotate(360deg); position: absolute; top: 0; left: 0 } .view-commerce-cart-content .view-title:first-child { margin-top: -2em } .view-commerce-cart-content .views-row { position: relative; z-index: 4; width: 96%; margin-left: 4% } .view-commerce-cart-content .views-row:after { content: ''; display: table; line-height: 0; clear: both } .view-commerce-cart-content .views-field-inventory-wrapper { width: 50%; min-height: 5em; margin-top: 0; margin-bottom: 0.2em; padding-left: 4%; float: left; clear: left } .view-commerce-cart-content .views-field-inventory { display: block; font-size: 1.3em; text-align: left } .view-commerce-cart-content .views-field-details-wrapper { width: 50%; min-height: 5em; margin-bottom: 0.2em; float: left } .view-commerce-cart-content .views-field-details { padding-top: 1.1em; padding-bottom: 1.1em } .view-commerce-cart-content .views-field-field-texture { display: block } .view-commerce-cart-content .views-field-field-texture .field-content { display: block } .view-commerce-cart-content .cutout-option-auto { position: relative; display: inline-block; font-size: 1em; line-height: inherit; cursor: context-menu } .view-commerce-cart-content .cutout-option-auto .icn { display: inline-block; padding: 0 0.2em; vertical-align: text-bottom; line-height: inherit; color: #3B3B3B } .view-commerce-cart-content .cutout-option-auto .field { position: absolute; top: 50%; left: 3em; z-index: 2; display: block; margin-top: -0.96em; padding: 0.5em 0.8em 0.5em 0.6em; font-size: 0.8em; font-weight: normal; line-height: 1em; white-space: nowrap; color: #000; background: #EEEEF0; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -moz-transition: left 200ms, opacity 200ms, visibility 0s 200ms; -o-transition: left 200ms, opacity 200ms, visibility 0s 200ms; -webkit-transition: left 200ms, opacity 200ms, visibility 0s; -webkit-transition-delay: 0s, 0s, 200ms; -webkit-transition: left 200ms, opacity 200ms, visibility 0s 200ms; transition: left 200ms, opacity 200ms, visibility 0s 200ms } .view-commerce-cart-content .cutout-option-auto .field:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 1em .6em 1em 0; border-color: transparent #EEEEF0 transparent transparent; -webkit-transform: rotate(360deg); position: absolute; top: 50%; right: 100%; margin-top: -1em } .view-commerce-cart-content .cutout-option-auto:hover .field { left: 1.4em; filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible; -moz-transition: left 200ms, opacity 200ms, visibility 0s 0s; -o-transition: left 200ms, opacity 200ms, visibility 0s 0s; -webkit-transition: left 200ms, opacity 200ms, visibility 0s; -webkit-transition-delay: 0s, 0s, 0s; -webkit-transition: left 200ms, opacity 200ms, visibility 0s 0s; transition: left 200ms, opacity 200ms, visibility 0s 0s }
}
@media (min-width: 70em) { .view-commerce-cart-content .view-title { width: 48.5% } .view-commerce-cart-content .views-row { width: 97%; margin-left: 3% } .view-commerce-cart-content .views-field-inventory-wrapper { padding-left: 3% }
}
.commerce-order-handler-area-order-total { padding: 0 0 1em
}
.commerce-price-formatted-components { width: 100%; margin: 0; padding: 0; list-style: none outside none
}
.commerce-price-formatted-components .component-item { position: relative; width: 100%; clear: both; background: #111
}
.commerce-price-formatted-components .component-item:after { content: ''; display: table; line-height: 0; clear: both
}
.commerce-price-formatted-components .component-entry { display: block; padding: 0.8em 0; font-size: 1.2em; line-height: 1em; vertical-align: bottom
}
.commerce-price-formatted-components .component-title { width: 50%; padding-left: 1em; float: left; font-weight: 200; color: #88888A
}
.commerce-price-formatted-components .component-total { float: right; width: 50%; padding-left: 2.5em; text-align: center; font-family: "EurostileNextCondensed", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-weight: 600
}
@media (min-width: 40em) { .commerce-price-formatted-components { width: 96%; margin-left: 4% } .commerce-price-formatted-components .component-title { width: 75%; padding-left: 4% } .commerce-price-formatted-components .component-total { width: 25% }
}
@media (min-width: 70em) { .commerce-price-formatted-components { width: 97%; margin-left: 3% } .commerce-price-formatted-components .component-title { padding-left: 3% }
}
.view-commerce-cart-summary .commerce-price-formatted-components .component-title,
.field--type-commerce-line-item-reference+.commerce-price-formatted-components .component-title { width: 52%; padding-left: 1.2em
}
.view-commerce-cart-summary .commerce-price-formatted-components .component-total,
.field--type-commerce-line-item-reference+.commerce-price-formatted-components .component-total { box-sizing: content-box; width: 26%; padding-left: 11%; padding-right: 11%
}
@media (min-width: 40em) { .view-commerce-cart-summary .commerce-price-formatted-components .component-title, .field--type-commerce-line-item-reference+.commerce-price-formatted-components .component-title { width: 76%; padding-left: 4% } .view-commerce-cart-summary .commerce-price-formatted-components .component-total, .field--type-commerce-line-item-reference+.commerce-price-formatted-components .component-total { width: 13%; padding-left: 5.5%; padding-right: 5.5% }
}
@media (min-width: 70em) { .view-commerce-cart-summary .commerce-price-formatted-components .component-title, .field--type-commerce-line-item-reference+.commerce-price-formatted-components .component-title { padding-left: 3% }
}
.commerce-price-formatted-components .component-item+.component-type-commerce-price-formatted-amount { margin-top: 1.5em
}
.theme--bright .commerce-price-formatted-components .component-entry { background: #CCCCCE
}
.theme--bright .commerce-price-formatted-components .component-title { color: #080808
}
.node--feature-article { background-repeat: no-repeat; background-position: center center; background-size: cover
}
.node--feature-article .group__inner { padding-top: 3em; padding-bottom: 4em
}
.node--feature-article .field--headline { margin: 0 0 0.45em; font-size: 2.4em; text-align: left; font-weight: 200; color: inherit
}
.node--feature-article .field--headline .sub { display: block; margin-top: -0.2em; width: 100%; font-size: 0.5em
}
.node--feature-article .group-copy { direction: ltr
}
.node--feature-article .field--name-field-subheadline { display: inline-block; margin: 0 0 1.34em; padding: 0.8em 1.2em; border-left: 0.2em solid #fff; font-size: 1.2em; font-weight: normal; color: inherit; background-color: #000; background-color: rgba(0, 0, 0, 0.06)
}
.node--feature-article .field--name-body { margin: 0 0 1.34em; padding: 0; letter-spacing: 0.012em
}
.node--feature-article .field--name-body p { margin: 0; padding: 0; font-size: 1.05em
}
.node--feature-article .field--name-body p+p { margin-top: 1em
}
.node--feature-article .field--name-field-link { margin-top: 2.1em; display: block; text-align: center
}
.node--feature-article .field--name-field-link .btn { display: inline-block; width: auto; margin: 0; font-size: 1.3em
}
.node--feature-article .field--name-field-link .btn:after { content: '>'; position: relative; left: 0.3em; padding-left: 0.2em; font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: inherit
}
.node--feature-article .group-figure { line-height: 0; text-align: center
}
.node--feature-article .group-copy+.group-figure { padding-top: 2em
}
.node--feature-article .field:last-child { margin-bottom: 0
}
.feature-article--img--nospace .group__inner { padding-bottom: 0
}
.feature-article--img--overlaps .group__inner { padding-bottom: 0
}
.feature-article--img--overlaps .group-figure { margin-top: -1.34em; position: relative; top: 1.34em; z-index: 2
}
@media (min-width: 48em) { .feature-article--img--hasImage { direction: rtl } .feature-article--img--hasImage .group-copy { display: inline-block; width: 60%; padding-left: 3em; direction: ltr; vertical-align: middle } .feature-article--img--hasImage .group-copy .field--name-field-link { text-align: left } .feature-article--img--hasImage .group-figure { display: inline-block; width: 40%; direction: ltr; vertical-align: middle } .feature-article--img--hasImage .group-copy+.group-figure { padding-top: 0em } .feature-article--img--hasImage:nth-of-type(2n), .feature-article--img--hasImage.node--feature-article--full { direction: ltr } .feature-article--img--hasImage:nth-of-type(2n) .group-copy, .feature-article--img--hasImage.node--feature-article--full .group-copy { padding-right: 3em; padding-left: 0 }
}
@media (min-width: 48em) and (max-width: 69.99em) { .feature-article--img--hasImage .group__inner { padding-bottom: 4em } .feature-article--img--hasImage .group-figure { margin-top: 0; position: static }
}
@media (min-width: 70em) { .feature-article--img--hasImage .group-copy { padding-top: 2em; padding-bottom: 5.8em; width: 50%; vertical-align: top } .feature-article--img--hasImage .group-figure { width: 50%; vertical-align: bottom }
}
.feature-article--var--short { text-align: center
}
.feature-article--var--short .group__inner { padding-top: 1.8em; padding-bottom: 2em
}
.feature-article--var--short .group-title,
.feature-article--var--short .field--name-field-subheadline,
.feature-article--var--short .field--name-body,
.feature-article--var--short .field--name-field-link { display: block; float: none; width: 100%; color: inherit; background: none
}
.feature-article--var--short .group-title strong,
.feature-article--var--short .field--name-field-subheadline strong,
.feature-article--var--short .field--name-body strong,
.feature-article--var--short .field--name-field-link strong { font-weight: bold
}
.feature-article--var--short .field--headline { display: inline-block; margin: 0; padding: 0.6em; font-family: EurostileNextExtended, EurostileNext, Eurostile, Arial, Verdana, san-serif; font-size: 1.34em; font-weight: 100; text-align: center; vertical-align: middle
}
.feature-article--var--short .field--headline strong { font-weight: normal; color: #fb0
}
.feature-article--var--short .field--name-field-subheadline { margin: 0; padding: 0.6em; vertical-align: middle
}
.feature-article--var--short .field--name-field-link { display: inline-block; width: auto; margin: 0; padding: 0.8em; font-size: 0.8em; vertical-align: middle
}
.feature-article--var--short .btn { margin: 0
}
@media (min-width: 40em) { .feature-article--var--short .field--headline { font-size: 1.55em }
}
@media (min-width: 48em) { .feature-article--var--short .field--headline { font-size: 1.7em }
}
@media (min-width: 55em) { .feature-article--var--short .field--headline { font-size: 2em }
}
.feature-article--theme--bright { color: #000; background: #EEEEF0
}
.feature-article--theme--bright .field--name-field-subheadline { border-left-color: #000; background-color: #fff; background-color: rgba(255, 255, 255, 0.06)
}
.feature-article--theme--dbrand-colored { color: #000; background: #fb0
}
.feature-article--theme--dbrand-colored .field--headline { color: #000
}
.feature-article--theme--dbrand-colored .field--name-field-subheadline { border-left-color: #000; background-color: #fff; background-color: rgba(255, 255, 255, 0.06)
}
.feature-article--theme--dbrand-colored .btn { color: #fb0; background-color: #000
}
.feature-article--theme--dbrand-colored .btn:hover { color: #000; background: #FFD45D
}
.feature-article--theme--dbrand-colored .btn:active { color: #000; background: #F8F8FA
}
.feature-article--theme--wip { color: #fff; background-color: #000; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMxNjE2MTYiLz48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMxNjE2MTYiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIvPjxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-linear-gradient(135deg, #161616 25%, #000000 25%, #000000 50%, #161616 50%, #161616 75%, #000000 75%, #000000); background: linear-gradient(-45deg, #161616 25%, #000000 25%, #000000 50%, #161616 50%, #161616 75%, #000000 75%, #000000); background-size: 10%; background-size: 3.4em 3.4em; background-repeat: repeat
}
.no-touch .feature-article--theme--wip { box-shadow: 0 0 10em 2em #000 inset
}
.feature-article--theme--wip .field--headline { font-weight: 600; color: #fb0
}
.feature-article--theme--wip .field--name-field-subheadline { border-left-color: #fb0; background-color: #000; background-color: rgba(0, 0, 0, 0.5)
}
.feature-article--theme--wip.feature-article--var--short .group__inner { padding: 2em 0
}
.feature-article--theme--wip.feature-article--var--short .field--headline { font-weight: 200
}
.no-touch .feature-article--theme--wip.feature-article--var--short { box-shadow: 0 0 5em #000 inset
}
.feature-article--theme--tripattern1 { color: #000; background-color: #F8F8FA; background-image: url("../img/feature-articles/tripattern1.jpg")
}
.feature-article--theme--tripattern1 .field--name-field-subheadline { border-left-color: #000; background-color: #fff; background-color: rgba(255, 255, 255, 0.06)
}
.feature-article--theme--tripattern1dark { color: #fff; background-color: #080808; background-image: url("../img/feature-articles/tripattern1dark.jpg")
}
.feature-article--theme--tripattern1dark .field--name-field-subheadline { border-left-color: #fff; background-color: #000; background-color: rgba(0, 0, 0, 0.06)
}
.feature-article--dbrand-introduction { background: #000
}
.feature-article--dbrand-introduction .group__inner { padding-top: 0.6em; background-image: url("../img/feature-articles/db-intro-bg.jpg"); background-repeat: no-repeat; background-size: 90%; background-position: center bottom
}
.feature-article--dbrand-introduction .field--headline { margin-bottom: 0.52em; font-weight: bold; color: #fb0
}
.feature-article--dbrand-introduction .field--headline .sub { padding-top: 0.2em; font-size: 0.45em; font-weight: normal; color: #fff
}
.feature-article--dbrand-introduction .field--headline .sub:after { content: '//'; padding-left: 0.4em; color: #646464
}
.feature-article--dbrand-introduction .group-copy { padding-bottom: 90%
}
.feature-article--dbrand-introduction .field--name-field-subheadline { border-left: 0.2em solid #fb0; padding: 0.1em 0.7em 0.2em; font-weight: normal; color: #fff; background: none
}
.feature-article--dbrand-introduction .field--name-field-subheadline .sub { display: block; line-height: 1em; color: #646464
}
.feature-article--dbrand-introduction .field--type-link-field { text-align: left
}
.feature-article--dbrand-introduction .field--type-link-field .btn--main-action { border-radius: .3em
}
@media (min-width: 40em) { .feature-article--dbrand-introduction .field--headline { font-size: 3em } .feature-article--dbrand-introduction .field--name-field-subheadline { border-left-width: 0.3em; font-size: 1.4em }
}
@media (min-width: 48em) { .feature-article--dbrand-introduction .group__inner { background-size: 60%; background-position: right 30% } .feature-article--dbrand-introduction .field--headline { margin-bottom: 1em } .feature-article--dbrand-introduction .group-copy { padding-bottom: 30% }
}
@media (min-width: 61.25em) { .feature-article--dbrand-introduction .group__inner { padding-top: 1.5em; background-size: 50%; background-position: right bottom } .feature-article--dbrand-introduction .field--headline { font-size: 3.6em } .feature-article--dbrand-introduction .field--headline .sub { font-size: 0.4em }
}
.feature-article--shipping { box-shadow: 0 0 3em #000 inset
}
.feature-article--50-off .field--headline { display: inline-block; font-weight: bold; font-size: 3.4em
}
.feature-article--50-off .field--name-body { font-size: 1.4em
}
.feature-article--50-off .field--name-field-link { font-size: 1.2em
}
.feature-article--50-off .group-figure { padding-right: 12%; padding-left: 8%
}
.device-catalog-wrapper .catalog-title { margin: 0; text-align: center; font-weight: 100; text-transform: lowercase; font-size: 1.5em; line-height: 1em; color: #A0A0A2
}
.device-catalog-wrapper .catalog-title:before,
.device-catalog-wrapper .catalog-title:after { content: ''; width: 0; height: 0; border-style: solid; border-width: .25em .25em 0 .25em; border-color: #484848 transparent transparent transparent; -webkit-transform: rotate(360deg); display: inline-block; vertical-align: middle; margin: 0 0.5em; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: .8
}
.device-catalog-wrapper .devices-list { margin: 2.5em 0 0; padding: 0; list-style: none
}
.device-catalog-wrapper .devices-list:after { content: ''; display: table; line-height: 0; clear: both
}
.device-catalog-wrapper .devices-list.devices-list--no-grouping { margin-top: 1em
}
.device-catalog-wrapper .group-itm { margin-top: 2.5em
}
.device-catalog-wrapper .group-itm:first-of-type { margin-top: 0
}
.device-catalog-wrapper .grouper { margin-bottom: 1.5em; text-align: center; pointer-events: none
}
.device-catalog-wrapper .grouper>.inner { display: inline-block; width: 1.8em; line-height: 1.8em; font-size: 1.8em; font-weight: 100; border-radius: 50%; color: #997e33; background: #000
}
.device-catalog-wrapper .devices-sublist { margin: 0; padding: 0; list-style: none
}
.device-catalog-wrapper .device-itm { width: 100%; margin-bottom: 1em; font-size: 1em
}
.device-catalog-wrapper .device { display: block; margin: 0; border-left-width: 0.6em; padding: 1.2em; font-size: 1em; text-align: left; color: #fff; background: #111; border-radius: .5em
}
.device-catalog-wrapper .device:after { content: ''; display: table; line-height: 0; clear: both
}
.device-catalog-wrapper .device:hover,
.device-catalog-wrapper .device:focus { color: #000; background: #fb0
}
.device-catalog-wrapper .device:hover .device-manufacturer,
.device-catalog-wrapper .device:focus .device-manufacturer { color: inherit; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: .8
}
.device-catalog-wrapper .device:hover .device-title-wrapper,
.device-catalog-wrapper .device:focus .device-title-wrapper { color: inherit
}
.device-catalog-wrapper .device .device-title-wrapper { padding: 0.84em 0 1.2em; color: #fb0
}
.device-catalog-wrapper .device .device-manufacturer { margin: 0; font-size: 0.96em; line-height: 1.25em; font-weight: 200; color: #88888A
}
.device-catalog-wrapper .device .device-name { margin: 0; font-size: 1.56em; line-height: 1em; font-weight: normal
}
.device-catalog-wrapper .device .device-figure { display: block; margin-right: 0.6em; float: left; width: 4.8em; height: 4.8em; text-align: center; line-height: 4.8em; vertical-align: middle; background-position: center center; background-size: contain; background-repeat: no-repeat
}
.device-catalog-wrapper .device .device-thumb { width: auto; height: auto; max-width: 100%; max-height: 100%; line-height: inherit; vertical-align: inherit
}
@media (max-width: 26.99em) { .device-catalog-wrapper .device { font-size: 0.9em }
}
@media (min-width: 34em) and (max-width: 47.99em) { .device-catalog-wrapper>.inner { padding-left: 10%; padding-right: 10% }
}
@media (min-width: 48em) { .device-catalog-wrapper .group-itm { margin-top: 1em } .device-catalog-wrapper .grouper { margin-bottom: 2em } .device-catalog-wrapper .devices-sublist:after { content: ''; display: table; line-height: 0; clear: both } .device-catalog-wrapper .devices-sublist, .device-catalog-wrapper .devices-list--no-grouping { margin-left: -0.75em; margin-right: -0.75em } .device-catalog-wrapper .device-itm { float: left; width: 50%; margin-bottom: 1.5em; padding-left: .75em; padding-right: .75em }
}
@media (min-width: 61.25em) { .device-catalog-wrapper .catalog-title { margin-left: 2em; padding-left: 4%; font-size: 1.8em; text-align: left; position: relative } .device-catalog-wrapper .catalog-title:after { content: none } .device-catalog-wrapper .catalog-title:before { content: ''; width: 0; height: 0; border-style: solid; border-width: .3em .3em 0 .3em; border-color: #484848 transparent transparent transparent; -webkit-transform: rotate(360deg); display: block; position: absolute; top: 0.4em; left: -0.3em; margin: 0; margin-left: -1em } .device-catalog-wrapper .group-itm { position: relative; margin-top: 4% } .device-catalog-wrapper .group-itm .devices-sublist { position: relative } .device-catalog-wrapper .group-itm .devices-sublist:before { content: ''; position: absolute; top: 0; left: 4%; right: 0; margin-top: -4%; border-top: 1px solid #343434 } .device-catalog-wrapper .group-itm:first-of-type .devices-sublist:before { display: none } .device-catalog-wrapper .grouper { position: absolute; top: 0; left: 0; margin-bottom: 0; text-align: left; line-height: 7.2em } .device-catalog-wrapper .grouper>.inner { margin-top: 0.95em; text-align: center; vertical-align: top } .device-catalog-wrapper .devices-sublist { width: auto; margin-left: 3.6em; margin-right: 0 } .device-catalog-wrapper .devices-sublist .device-itm { width: 46%; margin-left: 4%; margin-bottom: 4%; padding: 0 } .device-catalog-wrapper .devices-list--no-grouping { margin-left: -1em; margin-right: -1em } .device-catalog-wrapper .devices-list--no-grouping .device-itm { margin-bottom: 2em; padding-left: 1em; padding-right: 1em }
}
@media (min-width: 80em) { .device-catalog-wrapper .devices-list--no-grouping { margin-left: -1em; margin-right: -1em } .device-catalog-wrapper .devices-list--no-grouping .device-itm { width: 33.3333%; margin-bottom: 2em; padding-left: 1em; padding-right: 1em }
}
.device-catalog-interface .group__inner { padding-top: 2.5em; padding-bottom: 3.5em
}
.device-catalog-interface .group--top-device-collectives { background: #2B2B2B
}
.device-catalog-interface .group--top-device-collectives .grouper>.inner { font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-weight: normal
}
.device-catalog-interface .group--device-finder>.group__inner { padding-top: 1.4em; padding-bottom: 1.5em
}
.device-catalog-interface .group--device-finder .pli-finder-label { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0
}
.device-catalog-interface .group--device-finder .pli-finder-label>.inner { font-size: 0.8em
}
.device-catalog-interface .group--device-finder .input-wrapper { position: relative; margin: 0.6em 0 0
}
.device-catalog-interface .group--device-finder .pli-finder-input { display: block; width: 100%; margin: 0; padding: 0.8em; border: 0.05em solid #3B3B3B; font-size: 1.2em; font-weight: 200; line-height: 1em; color: #fff; background: #000; border-radius: .3em
}
.device-catalog-interface .group--device-finder .pli-finder-input:-moz-placeholder { padding-top: 0.05em; color: #484848
}
.device-catalog-interface .group--device-finder .pli-finder-input::-moz-placeholder { padding-top: 0.05em; color: #484848
}
.device-catalog-interface .group--device-finder .pli-finder-input:-ms-input-placeholder { padding-top: 0.05em; color: #484848
}
.device-catalog-interface .group--device-finder .pli-finder-input::-webkit-input-placeholder { padding-top: 0.05em; color: #484848
}
.device-catalog-interface .group--device-finder .pli-finder-input:focus { border-color: #fff; outline-color: #fff
}
.device-catalog-interface .group--device-finder .pli-finder-cancel { visibility: hidden; position: absolute; top: 50%; right: 0.5em; width: 2em; height: 2em; margin: -1em 0 0; padding: 0; line-height: 2em; border: none; font-size: 1.2em; text-align: center; color: #fff; background: none
}
.device-catalog-interface .group--device-finder .pli-finder-cancel .icn { line-height: inherit
}
.device-catalog-interface .group--device-finder .empty-result-message { display: none; margin-top: 1.8em; padding: 0 0.4em; line-height: 1.34em; text-align: center
}
.device-catalog-interface .group--device-finder .empty-result-message p { font-size: 1.2em
}
@media (min-width: 40em) { .device-catalog-interface .group--device-finder .empty-result-message { text-align: left }
}
@media (min-width: 48em) { .device-catalog-interface .group--device-finder .label-wrapper { margin-top: 0.75em; float: left } .device-catalog-interface .group--device-finder .pli-finder-label>.inner { font-size: 1em } .device-catalog-interface .group--device-finder .pli-finder-label:before { content: none } .device-catalog-interface .group--device-finder .pli-finder-label:after { content: ''; width: 0; height: 0; border-style: solid; border-width: .25em 0 .25em .25em; border-color: transparent transparent transparent #484848; -webkit-transform: rotate(360deg) } .device-catalog-interface .group--device-finder .input-wrapper { margin: 0; padding-left: 12em } .device-catalog-interface .group--device-finder .empty-result-message { padding-left: 12.4em }
}
@media (min-width: 61.25em) { .device-catalog-interface .group--device-finder .label-wrapper { margin-top: 0.5em } .device-catalog-interface .group--device-finder .pli-finder-label { margin-left: 0; padding-left: 0 } .device-catalog-interface .group--device-finder .pli-finder-label>.inner { font-size: 0.8em }
}
.device-catalog-interface.pli-mode--search .group--top-device-collectives { display: none
}
.device-catalog-interface.pli-mode--search .group--devices>.group__inner { padding-top: 0
}
.device-catalog-interface.pli-mode--search .group--devices .catalog-title { display: none
}
.device-catalog-interface.pli-mode--search .group--devices .devices-list { margin-top: 0
}
@media (max-width: 61.24em) { .device-catalog-interface.pli-mode--search .group--devices .grouper { display: none } .device-catalog-interface.pli-mode--search .group--devices .group-itm+.group-itm { margin-top: 0 }
}
.device-catalog-interface.pli-mode--search .group--devices .group-itm.hidden,
.device-catalog-interface.pli-mode--search .group--devices .device-itm.hidden { display: none
}
@media (min-width: 61.25em) { .device-catalog-interface.pli-mode--search .group--devices .group-itm:first-of-type .devices-sublist { margin-top: 4% } .device-catalog-interface.pli-mode--search .group--devices .group-itm:first-of-type .devices-sublist:before { display: block }
}
.device-catalog-interface.pli-mode--search .group--device-finder .pli-finder-cancel { visibility: visible
}
.device-catalog-interface.pli-mode--search.pli-mode--search--empty .group--device-finder .empty-result-message { display: block
}
.device-catalog-interface.pli-mode--search.pli-mode--search--empty .group--devices { display: none
}
.device-collective-page .group--back-to-shop { background: #2B2B2B
}
.device-collective-page .group--back-to-shop>.group__inner { padding: 0.6em 0
}
.device-collective-page .group--back-to-shop .link { display: inline-block; padding: 0.6em 0.8em 0.7em; text-transform: lowercase
}
.device-collective-page .group--back-to-shop .link .icn { vertical-align: text-top
}
.device-collective-page .group--devices .devices-excerpt { font-size: 0.95em; color: #DBDBDD
}
.device-collective-page .group--device-collective-text-block { font-size: 1.2em; letter-spacing: 0.04em; font-weight: 200; background-repeat: no-repeat; background-position: center center; background-size: cover
}
.device-collective-page .group--device-collective-text-block>.group__inner { padding-top: 2em; padding-bottom: 2.2em
}
.device-collective-page .group--device-collective-text-block .text { padding: 1em 1.2em 1.2em; background-color: #fff; background-color: rgba(255, 255, 255, 0.88); color: #000
}
.device-collective-page .group--device-collective-text-block .text a { color: #9E7400
}
@media (min-width: 48em) { .device-collective-page .group--device-collective-text-block .text { width: 55%; margin-left: 45% } .device-collective-page .group--device-collective-text-block:nth-of-type(2n+1) .text { margin-right: 45%; margin-left: 0 }
}
@media (min-width: 70em) { .device-collective-page .group--device-collective-text-block .text { width: 45%; margin-left: 0%; margin-right: 55% } .device-collective-page .group--device-collective-text-block:nth-of-type(2n) .text { margin-left: 55%; margin-right: 0% }
}
.view-shop .view__inner { padding-top: 1em
}
.view-shop .view__inner:after { content: ''; display: table; line-height: 0; clear: both
}
.view-shop .category-figure { overflow: hidden; max-height: 340em; background-image: url("../img/shop-figures/categories.png?1zws1p"); background-position: 0% 0%; -moz-transition: max-height 0ms 200ms; -o-transition: max-height 0ms 200ms; -webkit-transition: max-height 0ms; -webkit-transition-delay: 200ms; -webkit-transition: max-height 0ms 200ms; transition: max-height 0ms 200ms; background-size: 500% 200%
}
.view-shop .taxonomy-term--smartphones .category-figure { background-position: 0% 0%
}
.view-shop .taxonomy-term--smartphones:hover .category-figure { background-position: 0% 100%
}
.view-shop .taxonomy-term--tablets .category-figure { background-position: 25% 0%
}
.view-shop .taxonomy-term--tablets:hover .category-figure { background-position: 25% 100%
}
.view-shop .taxonomy-term--macbooks .category-figure { background-position: 50% 0%
}
.view-shop .taxonomy-term--macbooks:hover .category-figure { background-position: 50% 100%
}
.view-shop .taxonomy-term--gaming .category-figure { background-position: 75% 0%
}
.view-shop .taxonomy-term--gaming:hover .category-figure { background-position: 75% 100%
}
.view-shop .taxonomy-term--wearables .category-figure { background-position: 100% 0%
}
.view-shop .taxonomy-term--wearables:hover .category-figure { background-position: 100% 100%
}
.view-shop .category-action--back { display: inline-block; margin: 0; padding: 0; width: 0.6em; visibility: hidden; overflow: hidden; font-size: 1.6em; line-height: 2.5em; vertical-align: bottom; background: transparent; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 0ms, color 200ms, background 200ms; -o-transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 0ms, color 200ms, background 200ms; -webkit-transition: width 0ms, visibility 0ms, opacity 200ms, color 200ms, background 200ms; -webkit-transition-delay: 200ms, 200ms, 0ms, 0s, 0s; -webkit-transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 0ms, color 200ms, background 200ms; transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 0ms, color 200ms, background 200ms
}
.view-shop .category-action--back:hover { background: #000
}
.view-shop .category-action--back:active { background: #fb0
}
.view-shop .field--name-name-field { display: inline-block; margin: 0; font-size: 1.5em; font-weight: normal; line-height: 2.8em; color: #fb0; -moz-transition: font-size 0ms 200ms, line-height 0ms 200ms, color 0ms 200ms; -o-transition: font-size 0ms 200ms, line-height 0ms 200ms, color 0ms 200ms; -webkit-transition: font-size 0ms, line-height 0ms, color 0ms; -webkit-transition-delay: 200ms, 200ms, 200ms; -webkit-transition: font-size 0ms 200ms, line-height 0ms 200ms, color 0ms 200ms; transition: font-size 0ms 200ms, line-height 0ms 200ms, color 0ms 200ms
}
.view-shop .field--name-name-field a { letter-spacing: 0.02em; color: inherit; background: none
}
.view-shop .taxonomy-term-description { max-height: 340em; overflow: hidden; margin-top: -0.44em; font-size: 1em; line-height: 1.24em; padding-left: 0.2em; color: #fff; -moz-transition: max-height 0ms 200ms; -o-transition: max-height 0ms 200ms; -webkit-transition: max-height 0ms; -webkit-transition-delay: 200ms; -webkit-transition: max-height 0ms 200ms; transition: max-height 0ms 200ms
}
.view-shop .taxonomy-term-description p { margin: 0
}
.view-shop .taxonomy-term--device-category { display: block; padding: 5%; -moz-transition: padding 0ms 200ms, background 200ms; -o-transition: padding 0ms 200ms, background 200ms; -webkit-transition: padding 0ms, background 200ms; -webkit-transition-delay: 200ms, 0s; -webkit-transition: padding 0ms 200ms, background 200ms; transition: padding 0ms 200ms, background 200ms
}
.view-shop .taxonomy-term--device-category:hover { background: #1A1A1A
}
.view-shop .device-category { width: 100%; max-height: 340em; overflow: hidden; cursor: pointer; -moz-transition: opacity 200ms, max-height 0ms 200ms, width 0ms 200ms; -o-transition: opacity 200ms, max-height 0ms 200ms, width 0ms 200ms; -webkit-transition: opacity 200ms, max-height 0ms, width 0ms; -webkit-transition-delay: 0s, 200ms, 200ms; -webkit-transition: opacity 200ms, max-height 0ms 200ms, width 0ms 200ms; transition: opacity 200ms, max-height 0ms 200ms, width 0ms 200ms
}
.view-shop .device-category .taxonomy-tag-list { max-height: 0; overflow: hidden; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transform: scale(.84, .84); transform: scale(.84, .84); -moz-transition: max-height 0ms 200ms, opacity 200ms 0ms, -moz-transform 200ms 0ms; -o-transition: max-height 0ms 200ms, opacity 200ms 0ms, -o-transform 200ms 0ms; -webkit-transition: max-height 0ms, opacity 200ms, -webkit-transform 200ms; -webkit-transition-delay: 200ms, 0ms, 0ms; -webkit-transition: max-height 0ms 200ms, opacity 200ms 0ms, -webkit-transform 200ms 0ms; transition: max-height 0ms 200ms, opacity 200ms 0ms, -webkit-transform 200ms 0ms; transition: max-height 0ms 200ms, opacity 200ms 0ms, transform 200ms 0ms; transition: max-height 0ms 200ms, opacity 200ms 0ms, transform 200ms 0ms, -webkit-transform 200ms 0ms
}
.view-shop .device-category.open { width: 100%; cursor: default; background: none; -moz-transition: width 0ms 200ms, background 0ms 200ms; -o-transition: width 0ms 200ms, background 0ms 200ms; -webkit-transition: width 0ms, background 0ms; -webkit-transition-delay: 200ms, 200ms; -webkit-transition: width 0ms 200ms, background 0ms 200ms; transition: width 0ms 200ms, background 0ms 200ms; -webkit-animation: shopCategoryOpenCatWrapper 200ms ease-in-out 0ms 1; animation: shopCategoryOpenCatWrapper 200ms ease-in-out 0ms 1
}
.view-shop .device-category.open .taxonomy-term--device-category { padding: 0% 0% 1.2em; background: none
}
.view-shop .device-category.open .category-figure,
.view-shop .device-category.open .taxonomy-term-description { max-height: 0
}
.view-shop .device-category.open .category-action--back { width: 2.8em; visibility: visible; filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 200ms, color 200ms, background 200ms; -o-transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 200ms, color 200ms, background 200ms; -webkit-transition: width 0ms, visibility 0ms, opacity 200ms, color 200ms, background 200ms; -webkit-transition-delay: 200ms, 200ms, 200ms, 0s, 0s; -webkit-transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 200ms, color 200ms, background 200ms; transition: width 0ms 200ms, visibility 0ms 200ms, opacity 200ms 200ms, color 200ms, background 200ms
}
.view-shop .device-category.open .field--name-name-field { font-size: 2em; line-height: 2em; color: #A0A0A2; -webkit-animation: shopCategoryOpenCatTitle 200ms ease-in-out 200ms 1; animation: shopCategoryOpenCatTitle 200ms ease-in-out 200ms 1
}
.view-shop .device-category.open .field--name-name-field a { cursor: default
}
.view-shop .device-category.open .taxonomy-tag-list { filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); max-height: 340em; -moz-transition: max-height 0ms 200ms, opacity 200ms 200ms, -moz-transform 200ms 200ms; -o-transition: max-height 0ms 200ms, opacity 200ms 200ms, -o-transform 200ms 200ms; -webkit-transition: max-height 0ms, opacity 200ms, -webkit-transform 200ms; -webkit-transition-delay: 200ms, 200ms, 200ms; -webkit-transition: max-height 0ms 200ms, opacity 200ms 200ms, -webkit-transform 200ms 200ms; transition: max-height 0ms 200ms, opacity 200ms 200ms, -webkit-transform 200ms 200ms; transition: max-height 0ms 200ms, opacity 200ms 200ms, transform 200ms 200ms; transition: max-height 0ms 200ms, opacity 200ms 200ms, transform 200ms 200ms, -webkit-transform 200ms 200ms
}
.view-shop.ready .device-category.closed { -webkit-animation: shopCategoryCloseCatWrapper 200ms ease-in-out 200ms 1; animation: shopCategoryCloseCatWrapper 200ms ease-in-out 200ms 1
}
.view-shop.ready .device-category.closed .field--name-name-field { -webkit-animation: shopCategoryCloseCatTitle 200ms ease-in-out 0ms 1; animation: shopCategoryCloseCatTitle 200ms ease-in-out 0ms 1
}
.view-shop.active .device-category.closed { max-height: 0; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-animation: none; animation: none
}
.taxonomy-tag-item--device-variation,
.taxonomy-tag-item--how-to { display: block; width: 100%; font-size: 1.2em
}
.node--device-variation--teaser,
.node--how-to--teaser { display: block; margin: 0 0 0.8em; border-left: 0.2em solid #fb0; padding: 1em; font-size: 1em; text-align: left; color: #fb0; background-color: #000; background-color: rgba(0, 0, 0, 0.34)
}
.node--device-variation--teaser:after,
.node--how-to--teaser:after { content: ''; display: table; line-height: 0; clear: both
}
.node--device-variation--teaser:hover,
.node--how-to--teaser:hover { background: #000
}
.node--device-variation--teaser:active,
.node--how-to--teaser:active { color: #000; background: #fb0
}
.node--device-variation--teaser:active .field,
.node--how-to--teaser:active .field { color: inherit
}
.node--device-variation--teaser.active,
.node--how-to--teaser.active { -webkit-animation: shopCategoryDeviceTrigger 200ms ease-out 0ms 2 alternate; animation: shopCategoryDeviceTrigger 200ms ease-out 0ms 2 alternate
}
.node--device-variation--teaser>.group-inner,
.node--how-to--teaser>.group-inner { padding: 0.7em 0 1em
}
.node--device-variation--teaser .field--name-field-device-manufacturer,
.node--how-to--teaser .field--name-field-device-manufacturer { margin: 0; font-size: 0.8em; line-height: 1.25em; font-weight: 200; color: #88888A
}
.node--device-variation--teaser .field--name-field-device-name,
.node--how-to--teaser .field--name-field-device-name { margin: 0; font-size: 1.3em; line-height: 1em; font-weight: normal
}
.node--device-variation--teaser .device-figure,
.node--how-to--teaser .device-figure { display: block; margin-right: 0.5em; float: left; width: 4em; height: 4em; text-align: center; line-height: 4em; vertical-align: middle; background-position: center center; background-size: contain; background-repeat: no-repeat
}
.node--device-variation--teaser .device-thumb,
.node--how-to--teaser .device-thumb { width: auto; height: auto; max-width: 100%; max-height: 100%; line-height: inherit; vertical-align: inherit
}
@media (max-width: 26.99em) { .view-shop .device-category.open .taxonomy-term--device-category { font-size: 0.9em }
}
@media (min-width: 40em) { .view-shop .taxonomy-term--device-category { padding: 6% } .view-shop .device-category { float: left; width: 50%; margin-left: 0% } .view-shop .device-category:nth-of-type(n) { margin-left: 0%; clear: none } .view-shop .device-category:nth-of-type(2n+1) { margin-left: 0%; clear: left }
}
@media (min-width: 51em) { .taxonomy-tag-item--device-variation, .taxonomy-tag-item--how-to { float: left; width: 48%; margin-left: 4% } .taxonomy-tag-item--device-variation:nth-of-type(n), .taxonomy-tag-item--how-to:nth-of-type(n) { margin-left: 4%; clear: none } .taxonomy-tag-item--device-variation:nth-of-type(2n+1), .taxonomy-tag-item--how-to:nth-of-type(2n+1) { margin-left: 0%; clear: left }
}
@media (min-width: 55em) { .view-shop .taxonomy-tag-list { text-align: center } .taxonomy-tag-item--device-variation, .taxonomy-tag-item--how-to { float: none; margin-left: .3em; display: inline-block; width: 11em; margin-right: .3em; margin-left: .3em } .taxonomy-tag-item--device-variation:nth-of-type(n), .taxonomy-tag-item--how-to:nth-of-type(n) { margin-left: .3em } .node--device-variation--teaser, .node--how-to--teaser { border-left: none; padding: 1em; text-align: center; word-spacing: normal } .node--device-variation--teaser>.group-inner, .node--how-to--teaser>.group-inner { padding: 0 } .node--device-variation--teaser .field--name-field-device-manufacturer, .node--how-to--teaser .field--name-field-device-manufacturer { font-size: .8em; line-height: 1em; margin-bottom: .1em } .node--device-variation--teaser .field--name-field-device-name, .node--how-to--teaser .field--name-field-device-name { font-size: 1.2em; line-height: 1em } .node--device-variation--teaser .device-figure, .node--how-to--teaser .device-figure { float: none; margin: 0 auto .5em; width: 9em; height: 6.42em; line-height: 6.42em }
}
@media (min-width: 61.25em) { .view-shop .view__inner { padding-left: 4%; padding-right: 4% }
}
@media (min-width: 70em) { .view-shop .view__inner { padding-left: 6%; padding-right: 6% }
}
@media (min-width: 80em) { .view-shop .view__inner { padding-left: 8%; padding-right: 8% }
}
@media (min-width: 90em) { .view-shop .view__inner { padding-left: 0; padding-right: 0 } .view-shop .device-category { float: left; width: 25%; margin-left: 0%; width: 25% } .view-shop .device-category:nth-of-type(n) { margin-left: 0%; clear: none } .view-shop .device-category:nth-of-type(4n+1) { margin-left: 0%; clear: left }
}
@-webkit-keyframes shopCategoryOpenCatWrapper { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1 } 100% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0 }
}
@keyframes shopCategoryOpenCatWrapper { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1 } 100% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0 }
}
@-webkit-keyframes shopCategoryCloseCatWrapper { 0% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0; background: none } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; background: none }
}
@keyframes shopCategoryCloseCatWrapper { 0% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); opacity: 0; background: none } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; background: none }
}
@-webkit-keyframes shopCategoryOpenCatTitle { 0% { opacity: 0; -webkit-transform: translateX(2em); transform: translateX(2em) } 100% { opacity: 1; -webkit-transform: translateX(0em); transform: translateX(0em) }
}
@keyframes shopCategoryOpenCatTitle { 0% { opacity: 0; -webkit-transform: translateX(2em); transform: translateX(2em) } 100% { opacity: 1; -webkit-transform: translateX(0em); transform: translateX(0em) }
}
@-webkit-keyframes shopCategoryCloseCatTitle { 0% { opacity: 1 } 100% { opacity: 0 }
}
@keyframes shopCategoryCloseCatTitle { 0% { opacity: 1 } 100% { opacity: 0 }
}
@-webkit-keyframes shopCategoryDeviceTrigger { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1 } 100% { -webkit-transform: scale(.9, .9); transform: scale(.9, .9); opacity: .5 }
}
@keyframes shopCategoryDeviceTrigger { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1 } 100% { -webkit-transform: scale(.9, .9); transform: scale(.9, .9); opacity: .5 }
}
.group--device-features { color: #000; background: #EEEEF0
}
.group--device-features-header { font-size: 1em
}
.group--device-features-header .group__inner { padding: 1.0em 0
}
.device-features-header { margin: 0; padding: 0.75em 0 0.5em; font-size: 1.4em; text-align: center; font-weight: normal
}
.device-features-header .logo { display: block; margin-bottom: 0.14em; font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-size: 1.72em; font-weight: normal; cursor: default
}
.device-features-header .logo>.inner { display: inline-block; padding: 0 0.3em 0.24em; border-bottom: 0.08em solid #fb0; letter-spacing: -0.01em
}
.taxonomy-term--device-features { color: #000; background: #EEEEF0
}
.taxonomy-term--device-features>.group>.group__inner { padding-bottom: 0
}
.taxonomy-term--device-features .field--name-title-field { position: relative; margin: 0 0 0.6em; border-left: 0.5em solid #000; padding: 0.3em 0 0.2em 0.4em; font-size: 1.8em; font-weight: 200
}
.taxonomy-term--device-features .taxonomy-term-description { font-size: 1em; padding-bottom: 1em; text-align: left
}
.taxonomy-term--device-features .field--name-field-image { display: block; text-align: center; line-height: 0; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none
}
.taxonomy-term--device-features--quality { background: #E0E0E2
}
.taxonomy-term--device-features--quality .field--name-title-field { border-left-color: #FA0505
}
.taxonomy-term--device-features--precision .field--name-title-field { border-left-color: #3D55A3
}
.taxonomy-term--device-features--variety { background: #E0E0E2
}
.taxonomy-term--device-features--variety .field--name-title-field { border-left-color: #1E8E2E
}
.taxonomy-term--device-features--mission .field--name-title-field { border-left-color: #fb0
}
@media (min-width: 27em) { .device-features-header { font-size: 1.6em }
}
@media (min-width: 30em) { .device-features-header { font-size: 1.7em } .device-features-header .logo>.inner { padding-left: .45em; padding-right: .45em }
}
@media (min-width: 34em) { .device-features-header { font-size: 1.9em } .taxonomy-term--device-features .taxonomy-term-description { font-size: 1.1em }
}
@media (min-width: 40em) { .device-features-header { font-size: 2.1em; font-weight: 200 } .device-features-header .logo>.inner { border-bottom-width: 0.07em; padding-left: .55em; padding-right: .55em }
}
@media (min-width: 48em) { .device-features-header { font-size: 2.5em } .taxonomy-term--device-features { overflow: hidden } .taxonomy-term--device-features .group__inner { position: relative } .taxonomy-term--device-features .group__inner:after { content: ''; display: table; line-height: 0; clear: both } .taxonomy-term--device-features .field--name-title-field { font-weight: normal } .taxonomy-term--device-features .text-body { float: right; width: 60%; padding-top: 1em; padding-bottom: 2em } .taxonomy-term--device-features .taxonomy-term-description { font-size: 1em } .taxonomy-term--device-features .field--name-field-image { float: left; width: 40%; padding-top: 25% } .taxonomy-term--device-features .field--name-field-image img { position: absolute; left: 0; bottom: 0; width: 40%; height: auto } .taxonomy-term--device-features:nth-of-type(2n+1) .text-body { float: left } .taxonomy-term--device-features:nth-of-type(2n+1) .field--name-field-image { float: right } .taxonomy-term--device-features:nth-of-type(2n+1) .field--name-field-image img { left: auto; right: 0 }
}
@media (min-width: 61.25em) { .taxonomy-term--device-features .text-body { width: 50% } .taxonomy-term--device-features .field--name-field-image { width: 50%; padding-top: 31.25% } .taxonomy-term--device-features .field--name-field-image img { width: 50% }
}
@media (min-width: 70em) { .taxonomy-term--device-features .text-body { padding-top: 1.5em } .taxonomy-term--device-features .taxonomy-term-description { font-size: 1.1em }
}
@media (min-width: 80em) { .taxonomy-term--device-features .text-body { padding-top: 2em } .taxonomy-term--device-features .taxonomy-term-description { font-size: 1.2em }
}
.texture-wrapper,
.skin-item+label { background-position: center center; background-repeat: repeat
}
.texture-wrapper--carbon-black,
.skin-item--carbon-black+label { background-color: #101010 !important; background-image: url("../img/texture-tiles/carbon-black.png") !important
}
.texture-wrapper--carbon-white,
.skin-item--carbon-white+label { background-color: #F4F4F4 !important; background-image: url("../img/texture-tiles/carbon-white.png") !important
}
.texture-wrapper--carbon-red,
.skin-item--carbon-red+label { background-color: #DB0000 !important; background-image: url("../img/texture-tiles/carbon-red.png") !important
}
.texture-wrapper--carbon-blue,
.skin-item--carbon-blue+label { background-color: #2222C8 !important; background-image: url("../img/texture-tiles/carbon-blue.png") !important
}
.texture-wrapper--carbon-pink,
.skin-item--carbon-pink+label { background-color: #FF63B6 !important; background-image: url("../img/texture-tiles/carbon-pink.png") !important
}
.texture-wrapper--matte-black,
.skin-item--matte-black+label { background-color: #101010 !important
}
.texture-wrapper--matte-white,
.skin-item--matte-white+label { background-color: #F4F4F4 !important
}
.texture-wrapper--metal-regular,
.skin-item--metal-regular+label { background-color: #B4B4B4 !important; background-image: url("../img/texture-tiles/metal-regular.png") !important
}
.texture-wrapper--metal-black,
.skin-item--metal-black+label { background-color: #101010 !important; background-image: url("../img/texture-tiles/metal-black.png") !important
}
.texture-wrapper--metal-copper,
.skin-item--metal-copper+label { background-color: #3F2D26 !important; background-image: url("../img/texture-tiles/metal-copper.png") !important
}
.texture-wrapper--metal-gold,
.skin-item--metal-gold+label { background-color: #D0A549 !important; background-image: url("../img/texture-tiles/metal-gold.png") !important
}
.texture-wrapper--leather-black,
.skin-item--leather-black+label { background-color: #101010 !important; background-image: url("../img/texture-tiles/leather-black.png") !important
}
.texture-wrapper--leather-white,
.skin-item--leather-white+label { background-color: #F4F4F4 !important; background-image: url("../img/texture-tiles/leather-white.png") !important
}
.texture-wrapper--tc-red,
.skin-item--tc-red+label { background-color: #C60808 !important; background-image: url("../img/texture-tiles/tc-red.png") !important
}
.texture-wrapper--tc-orange,
.skin-item--tc-orange+label { background-color: #FF680A !important; background-image: url("../img/texture-tiles/tc-orange.png") !important
}
.texture-wrapper--tc-yellow,
.skin-item--tc-yellow+label { background-color: #FFBE0A !important; background-image: url("../img/texture-tiles/tc-yellow.png") !important
}
.texture-wrapper--tc-green,
.skin-item--tc-green+label { background-color: #226C34 !important; background-image: url("../img/texture-tiles/tc-green.png") !important
}
.texture-wrapper--tc-blue,
.skin-item--tc-blue+label { background-color: #182286 !important; background-image: url("../img/texture-tiles/tc-blue.png") !important
}
.texture-wrapper--tc-purple,
.skin-item--tc-purple+label { background-color: #512B4F !important; background-image: url("../img/texture-tiles/tc-purple.png") !important
}
.texture-wrapper--tc-pink,
.skin-item--tc-pink+label { background-color: #9B3B50 !important; background-image: url("../img/texture-tiles/tc-pink.png") !important
}
.texture-wrapper--wood-mahogany,
.skin-item--wood-mahogany+label { background-color: #502d22 !important; background-image: url("../img/texture-tiles/wood-mahogany.png") !important
}
.texture-wrapper--wood-zebra,
.skin-item--wood-zebra+label { background-color: #8A5532 !important; background-image: url("../img/texture-tiles/wood-zebra.png") !important
}
.texture-wrapper---float { float: left; width: 4.54545%
}
.dbMainSlider-wrapper { position: relative; width: 100%; height: auto
}
.dbMainSlider-wrapper:before { content: ''; display: block; padding-top: 42%
}
.dbMainSlider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: #000; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none
}
.dbMainSlider .rsOverflow { width: 100% !important; height: 100% !important
}
.dbMainSlider .rsContent img.rsImg { width: 100%; height: auto; margin: 0 !important
}
.dbMainSlider>.rsContent { position: static; float: left; width: 50%; height: auto; border: 0.1em solid #111; background-color: #1A1A1A; text-align: center
}
.dbMainSlider>.rsContent a { display: block; width: 100%; padding: 1em
}
.dbMainSlider .rsArrow { position: absolute; top: 0; bottom: 0; z-index: 8; display: block; min-width: 4em; width: 10%; color: #fff; cursor: pointer; visibility: visible; filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition: opacity 340ms, visibility 340ms 0ms, color 340ms; -o-transition: opacity 340ms, visibility 340ms 0ms, color 340ms; -webkit-transition: opacity 340ms, visibility 340ms, color 340ms; -webkit-transition-delay: 0s, 0ms, 0s; -webkit-transition: opacity 340ms, visibility 340ms 0ms, color 340ms; transition: opacity 340ms, visibility 340ms 0ms, color 340ms
}
.dbMainSlider .rsArrow:hover { color: #fb0
}
.dbMainSlider .rsArrow .rsArrowIcn { position: absolute; top: 50%; left: 50%; margin-top: -0.5em; margin-left: -0.5em; width: 1em; font-size: 3em; line-height: 1em; font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; text-align: center
}
.dbMainSlider .rsArrowLeft { left: 0
}
.dbMainSlider .rsArrowLeft .rsArrowIcn:before { content: '<'
}
.dbMainSlider .rsArrowRight { right: 0
}
.dbMainSlider .rsArrowRight .rsArrowIcn:before { content: '>'
}
.dbMainSlider:not(:hover) .rsArrow { visibility: hidden; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0
}
.dbMainSlider .rsBullets { position: absolute; right: 0; bottom: 0; width: auto; z-index: 10; height: auto; padding: 0.2em 1.2em 0; font-size: 0.5em; line-height: 4em; text-align: right; white-space: nowrap
}
.dbMainSlider .rsBullet { display: inline-block; padding: 0 0.8em; cursor: pointer; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=34); opacity: .34; -webkit-transition: opacity 340ms; transition: opacity 340ms
}
.dbMainSlider .rsBullet span { display: inline-block; width: 1em; height: 1em; overflow: hidden; border-radius: 50%; background: #fff; -webkit-transition: background 340ms; transition: background 340ms
}
.dbMainSlider .rsBullet:hover { filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1
}
.dbMainSlider .rsBullet.rsNavSelected { filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1
}
.dbMainSlider:hover .rsBullets .rsBullet.rsNavSelected span { background: #fb0
}
.dbMainSlider .grab-cursor { cursor: url(../img/misc/cursor-grab.png) 8 8, move
}
.dbMainSlider .grabbing-cursor { cursor: url(../img/misc/cursor-grabbing.png) 8 8, move
}
.dbMainSlider .rsLink { background: url(../img/misc/blank.gif)
}
.youtube-container--responsive { overflow: hidden; position: relative; padding-bottom: 56.25%; height: 0
}
.youtube-container--responsive:before { content: 'y'; font-family: "dbicons", EurostileNext, Eurostile, Arial, Verdana, san-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-rendering: optimizeLegibility; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -1em; font-size: 8em; display: block; width: 2em; height: 1em; text-align: center; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=34); opacity: .34
}
.youtube-container--responsive iframe { border: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%
}
.ratio-box { display: block
}
.ratio-box--2_1 { padding-top: 50%
}
.ratio-box--1_1 { padding-top: 100%
}
| Developer | Umar Hamza |
| Username | umarhamza |
| Uploaded | December 27, 2022 |
| Rating | 3 |
| Size | 30,441 Kb |
| Views | 6,072 |
Do you need developer help for DBrand Inspired Header?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Umar Hamza (umarhamza) Script Codes
| Name | Size |
| Form | 3,223 Kb |
| Image Hover | 2,029 Kb |
| Directory | 22,312 Kb |
| JS Prototypes | 2,093 Kb |
| Vanila JS Accordion | 2,524 Kb |
| React Playground | 3,472 Kb |
| Image Hover 2 | 1,958 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| 3D flipping card | Ssaakkaa | 2,238 Kb |
| Pure CSS Dial | Lukewatts | 3,018 Kb |
| Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
| Speech bubbles | Something | 1,547 Kb |
| Sass Radar | Jlong | 6,887 Kb |
| Video mute | Leon9208 | 2,131 Kb |
| Funny menu | AxeLVaisper | 4,671 Kb |
| Fullscreen audio play button | 72 | 2,148 Kb |
| Print element on a page | Mrs_snow | 2,081 Kb |
| Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!