/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container-yes {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.column, .columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}

.center {
	text-align: center;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
.container-yes {
	width: 85%;
	padding: 0;
}
}

/* For devices larger than 550px */
@media (min-width: 550px) {
.container-yes {
	width: 80%;
}
.column, .columns {
	margin-left: 4%;
}
.column:first-child, .columns:first-child {
	margin-left: 0;
}
.one.column, .one.columns {
	width: 4.66666666667%;
}
.two.columns {
	width: 13.3333333333%;
}
.three.columns {
	width: 22%;
}
.four.columns {
	width: 30.6666666667%;
}
.five.columns {
	width: 39.3333333333%;
}
.six.columns {
	width: 48%;
}
.seven.columns {
	width: 56.6666666667%;
}
.eight.columns {
	width: 65.3333333333%;
}
.nine.columns {
	width: 74.0%;
}
.ten.columns {
	width: 82.6666666667%;
}
.eleven.columns {
	width: 91.3333333333%;
}
.twelve.columns {
	width: 100%;
	margin-left: 0;
}
.one-third.column {
	width: 30.6666666667%;
}
.two-thirds.column {
	width: 65.3333333333%;
}
.one-half.column {
	width: 48%;
}
/* Offsets */
.offset-by-one.column, .offset-by-one.columns {
	margin-left: 8.66666666667%;
}
.offset-by-two.column, .offset-by-two.columns {
	margin-left: 17.3333333333%;
}
.offset-by-three.column, .offset-by-three.columns {
	margin-left: 26%;
}
.offset-by-four.column, .offset-by-four.columns {
	margin-left: 34.6666666667%;
}
.offset-by-five.column, .offset-by-five.columns {
	margin-left: 43.3333333333%;
}
.offset-by-six.column, .offset-by-six.columns {
	margin-left: 52%;
}
.offset-by-seven.column, .offset-by-seven.columns {
	margin-left: 60.6666666667%;
}
.offset-by-eight.column, .offset-by-eight.columns {
	margin-left: 69.3333333333%;
}
.offset-by-nine.column, .offset-by-nine.columns {
	margin-left: 78.0%;
}
.offset-by-ten.column, .offset-by-ten.columns {
	margin-left: 86.6666666667%;
}
.offset-by-eleven.column, .offset-by-eleven.columns {
	margin-left: 95.3333333333%;
}
.offset-by-one-third.column, .offset-by-one-third.columns {
	margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
	margin-left: 69.3333333333%;
}
.offset-by-one-half.column, .offset-by-one-half.columns {
	margin-left: 52%;
}
}
/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
	font-family: Brown-Pro-Italic;
	src: url(/asset/fonts/lineto-brown-pro-Italic.eot);
	src: url(/asset/fonts/lineto-brown-pro-Italic.eot?#iefix) format("embedded-opentype"), url(/asset/fonts/lineto-brown-pro-Italic.woff) format("woff"), url(/asset/fonts/lineto-brown-pro-Italic.ttf) format("truetype"), url(/asset/fonts/lineto-brown-pro-Italic.svg#lineto-brown-pro-Italic) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: Brown-Pro-Bold;
	src: url(http://media.4at5.net/email_domains/log/234190/lineto-brown-pro-bold.woff) format("woff");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: Brown-Pro-Thinitalic;
	src: url(/asset/fonts/lineto-brown-pro-thinItalic.eot);
	src: url(/asset/fonts/lineto-brown-pro-thinItalic.eot?#iefix) format("embedded-opentype"), url(/asset/fonts/lineto-brown-pro-thinItalic.woff) format("woff"), url(/asset/fonts/lineto-brown-pro-thinItalic.ttf) format("truetype"), url(/asset/fonts/lineto-brown-pro-thinItalic.svg#lineto-brown-pro-thinItalic) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: Brown-Pro-Bolditalicalt;
	src: url(/asset/fonts/lineto-brown-pro-bolditalicalt.eot);
	src: url(/asset/fonts/lineto-brown-pro-bolditalicalt.eot?#iefix) format("embedded-opentype"), url(/asset/fonts/lineto-brown-pro-bolditalicalt.woff) format("woff"), url(/asset/fonts/lineto-brown-pro-bolditalicalt.ttf) format("truetype"), url(/asset/fonts/lineto-brown-pro-bolditalicalt.svg#lineto-brown-pro-bolditalicalt) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: Brown-Pro-Lightitalic;
	src: url(/asset/fonts/lineto-brown-pro-lightItalic.eot);
	src: url(/asset/fonts/lineto-brown-pro-lightItalic.eot?#iefix) format("embedded-opentype"), url(/asset/fonts/lineto-brown-pro-lightItalic.woff) format("woff"), url(/asset/fonts/lineto-brown-pro-lightItalic.ttf) format("truetype"), url(/asset/fonts/lineto-brown-pro-lightItalic.svg#lineto-brown-pro-lightItalic) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: Brown-Pro-Thin;
	src: url(/asset/fonts/lineto-brown-pro-thin.eot);
	src: url(/asset/fonts/lineto-brown-pro-thin.eot?#iefix) format("embedded-opentype"), url(/asset/fonts/lineto-brown-pro-thin.woff) format("woff"), url(/asset/fonts/lineto-brown-pro-thin.ttf) format("truetype"), url(/asset/fonts/lineto-brown-pro-thin.svg#lineto-brown-pro-thin) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: Brown-Pro-Light;
	src: url(/asset/fonts/lineto-brown-pro-light.eot);
	src: url(http://media.4at5.net/email_domains/log/234190/lineto-brown-pro-light.woff) format("woff");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: Brown-Pro-Regular;
	src: url(/asset/fonts/lineto-brown-pro-regular.eot);
	src: url(/asset/fonts/lineto-brown-pro-regular.eot?#iefix) format("embedded-opentype"), url(http://media.4at5.net/email_domains/log/234190/lineto-brown-pro-regular.woff) format("woff"), url(/asset/fonts/lineto-brown-pro-regular.ttf) format("truetype"), url(/asset/fonts/lineto-brown-pro-regular.svg#lineto-brown-pro-regular) format("svg");
	font-weight: 400;
	font-style: normal
}
@font-face {
	font-family: brown;
	src: url(/asset/fonts/lineto-brown-pro-thin.woff) format("woff");
	font-weight: 100;
	font-style: normal
}
@font-face {
	font-family: brown;
	src: url(/asset/fonts/lineto-brown-pro-light.woff) format("woff");
	font-weight: 200;
	font-style: normal
}
@font-face {
	font-family: brown;
	src: url(/asset/fonts/lineto-brown-pro-regular.woff) format("woff");
	font-weight: 300;
	font-style: normal
}
@font-face {
	font-family: brown;
	src: url(/asset/fonts/lineto-brown-pro-bold.woff) format("woff");
	font-weight: 800;
	font-style: normal
}
@font-face {
	font-family: logitech-icons;
	src: url(/asset/fonts//logitech-icons.eot?9xeaqq);
	src: url(/asset/fonts//logitech-icons.eot?9xeaqq#iefix) format("embedded-opentype"), url(/asset/fonts//logitech-icons.ttf?9xeaqq) format("truetype"), url(/asset/fonts//logitech-icons.woff?9xeaqq) format("woff"), url(/asset/fonts//logitech-icons.svg?9xeaqq#logitech-icons) format("svg");
	font-weight: 400;
	font-style: normal
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
	font-size: 62.5%;
}
.yes, body {
	font-size: 1.57em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.6;
	font-weight: 400;
	font-family: Brown-Pro-Light, Helvetica, Arial, sans-serif;
	color: #676767;
	background-color: #ffffff;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300;
}
h1 {
	font-size: 4.0rem;
	line-height: 1.2;
	letter-spacing: -.1rem;
}
h2 {
    font-family: Brown-Pro-Bold, Helvetica, Arial, "sans-serif";	
	font-size: 3.6rem;
	line-height: 1.25;
	letter-spacing: -.1rem;
    color: #fff;	
}
h3 {
	font-family: Brown-Pro-Bold, Helvetica, Arial, "sans-serif";
	font-size: 3rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
	text-transform: uppercase;
	color: #2F3132;
}
h4 {
	font-family: Brown-Pro-Bold, Helvetica, Arial, "sans-serif";
	font-size: 1.8rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
	color: #2F3132;
}
h5 {
	font-family: Brown-Pro-Light, Helvetica, Arial, "sans-serif";
	font-size: 1.25rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
	color: #2F3132;
}
h6 {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
h1 {
	font-size: 5.0rem;
}
h2 {
	font-size: 4.8rem;
}
h3 {
	font-size: 3.0rem;
}
h4 {
	font-size: 1.8rem;
}
h5 {
	font-size: 2.4rem;
}
h6 {
	font-size: 1.5rem;
}
}
p {
	margin-top: 0;
	font-size: 1.6rem;
	font-family: Brown-Pro-Light, Helvetica, Arial, "sans-serif";
	color: #676767;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: #676767;
}
a:hover {
	color: #676767;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
	display: inline-block;
	height: 50px;
	padding: 0 30px;
	color: #555;
	text-align: center;
	font-family: Brown-Pro-Bold, Helvetica, Arial, "sans-serif";
	font-size: 13px;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box;
}

.button-yes {
	border-radius: 4px;	
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
	color: #333;
	border-color: #888;
	outline: 0;
}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
	color: #000;
	background-color: #00B8FC;
	border-color: #33C3F0;
}
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
	color: #FFF;
	background-color: #1EAEDB;
	border-color: #1EAEDB;
}
textarea, select {
	height: 38px;
	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #fff;
	border: 1px solid #D1D1D1;
	box-shadow: none;
	box-sizing: border-box;
	margin-bottom: 4.0rem;
	margin-left: 2.0rem;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– 

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit 
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
*/
  

/* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
textarea {
	min-height: 65px;
	padding-top: 6px;
	padding-bottom: 6px;
}
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
	border: 1px solid #33C3F0;
	outline: 0;
}
label, legend {
	display: block;
	margin-bottom: .5rem;
	font-weight: 600;
}
fieldset {
	padding: 0;
	border-width: 0;
}
input[type="checkbox"], input[type="radio"] {
	display: inline;
}
label > .label-body {
	display: inline-block;
	margin-left: .5rem;
	font-weight: normal;
 font-family:
}
.formPadding {
	padding-left: 120px;
}
*/ /* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
 list-style: circle inside;
}
ol {
	list-style: decimal inside;
}
ol, ul {
	padding-left: 0;
	margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
	margin: 1.5rem 0 1.5rem 3rem;
	font-size: 90%;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
	padding: .2rem .5rem;
	margin: 0 .2rem;
	font-size: 90%;
	white-space: nowrap;
	background: #F1F1F1;
	border: 1px solid #E1E1E1;
	border-radius: 4px;
}
pre > code {
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #E1E1E1;
}
th:first-child, td:first-child {
	padding-left: 0;
}
th:last-child, td:last-child {
	padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– 
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }

*/
/* Utilities

–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section-break {
	margin-top: 1rem;
	margin-bottom: 6.5rem;
}
.u-full-width {
	width: 100%;
	box-sizing: border-box;
}
.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
}
.u-pull-right {
	float: right;
}
.u-pull-left {
	float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
	width: 100px;
	margin-top: 2.5rem;
	margin-left: 0;
	margin-bottom: 3rem;
	border-width: 0;
	border-top: 6px solid #000000;
	opacity: 1;
}
.notification-bar {
padding: 1rem 0;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after, .row:after, .u-cf {
	content: "";
	display: table;
	clear: both;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
}

/* Larger than tablet */
@media (min-width: 750px) {
}

/* Larger than desktop */
@media (min-width: 1000px) {
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
}
/* Logitech G Footer CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face { font-family: "logi-gaming-icons"; src: url("http://media.4at5.net/email_domains/log/234190/logi-gaming-icons.woff2") format("woff2"); font-weight: normal; font-style: normal } [class^="icon-"]::after, [class*=" icon-"]:after { font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .icon-logo-logi-g-localeaware-horizontal::after { content: "" } .icon-logo-logi-g-localeaware-vertical::after { content: "" } html[lang="ja-JP"] .icon-logo-logi-g-localeaware-horizontal:after, html[lang="ja-jp"] .icon-logo-logi-g-localeaware-horizontal:after, html[lang="ja"] .icon-logo-logi-g-localeaware-horizontal:after, html[lang="JA"] .icon-logo-logi-g-localeaware-horizontal:after { content: "" } html[lang="ja-JP"] .icon-logo-logi-g-localeaware-vertical:after, html[lang="ja-jp"] .icon-logo-logi-g-localeaware-vertical::after, html[lang="ja"] .icon-logo-logi-g-localeaware-vertical::after, html[lang="JA"] .icon-logo-logi-g-localeaware-vertical::after { content: "" } html[lang="zh-CN"] .icon-logo-logi-g-localeaware-horizontal::after, html[lang="zh-cn"] .icon-logo-logi-g-localeaware-horizontal::after, html[lang="zh"] .icon-logo-logi-g-localeaware-horizontal::after, html[lang="ZH"] .icon-logo-logi-g-localeaware-horizontal::after { content: "" } html[lang="zh-CN"] .icon-logo-logi-g-localeaware-vertical::after, html[lang="zh-cn"] .icon-logo-logi-g-localeaware-vertical::after, html[lang="zh"] .icon-logo-logi-g-localeaware-vertical::after, html[lang="ZH"] .icon-logo-logi-g-localeaware-vertical::after { content: "" } .icon-ff::after { content: "" } .icon-youku::after { content: "" } .icon-logo-gaming::after { content: "" } .icon-logo-logi-g-horizontal::after { content: "" } .icon-logo-logi-g-vertical::after { content: "" } .icon-logo-logi-g-japan-horizontal::after { content: "" } .icon-logo-logi-g-japan-vertical::after { content: "" } .icon-logo-logi-g-china-horizontal::after { content: "" } .icon-logo-logi-g-china-vertical::after { content: "" } .icon-logo-logitech::after { content: "" } .icon-logo-astro::after { content: "" } .icon-logo-jaybird::after { content: "" } .icon-logo-ue::after { content: "" } .icon-facebook::after { content: "\E906" } .icon-instagram::after { content: "\E91C" } .icon-twitter::after { content: "\E90E"; } .icon-twitch-no-status::after { content: "" } .icon-youtube::after { content: "\E910" } .icon-tribe::after { content: "" } .icon-cart::after { content: "\E904" } .icon-chevron-down::after { content: "" } .icon-chevron-left::after { content: "" } .icon-chevron-right::after { content: "" } .icon-chevron-up::after { content: "" } .icon-download::after { content: "" } .icon-equals::after { content: "" } .icon-link::after { content: "" } .icon-play-circled::after { content: "" } .icon-plus::after { content: "" } .icon-plus-circled::after { content: "" } .icon-quote::after { content: "" } .icon-search::after { content: "\E90C" } .icon-triangle-down::after { content: "" } .icon-triangle-right::after { content: "" } .icon-triangle-up::after { content: "" } .icon-user::after { content: "" } .icon-x::after { content: "" } .main-footer { background-color: white; overflow: auto; color: #2f3132; position: relative } @media(min-width:1025px) { .main-footer { background-color: #f4f4f4 } } .main-footer hr { display: none } .footer-nav { display: flex; flex-wrap: wrap; align-items: stretch; margin-right: -24px; margin-top: 0; margin-bottom: 0; padding: 0; list-style-type: none; padding-top: 15px; padding-bottom: 12px } @media(min-width:720px) { .footer-nav { margin-right: -24px } } @media(min-width:1025px) { .footer-nav { margin-right: -20px } } @media(min-width:1490px) { .footer-nav { margin-right: -20px } } @media(min-width:720px) { .footer-nav { padding-top: 50px; padding-bottom: 16px } } .footer-nav-item { width: calc(50% - 24px); margin-right: 24px; margin-bottom: 14px } @media(min-width:720px) { .footer-nav-item { width: calc(25% - 24px); margin-right: 24px } } @media(min-width:1025px) { .footer-nav-item { width: calc(25% - 20px); margin-right: 20px } } @media(max-width:719px) { .footer-nav-item { width: auto; margin-bottom: 0; margin-right: 9px; display: flex } } .footer-link { font-weight: normal; font-size: 14px; line-height: 1.28571; letter-spacing: 0; text-transform: none; color: #2f3132 !important; text-transform: uppercase; text-decoration: none; font-size: 12px; padding: 15px; margin-left: -15px } @media(min-width:720px) { .footer-link { font-size: 14px; padding: 0; margin-left: 0 } } .footer-link span { border-bottom: 1px solid transparent } .footer-link:hover, .footer-link:active, .footer-link:not(.focus--mouse):focus { color: #2f3132 !important } .footer-link:hover span, .footer-link:active span, .footer-link:not(.focus--mouse):focus span { border-color: #2f3132 } .footer-bottom-row { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; align-items: center; background-repeat: repeat-x; background-position: left top; background-image: url(gaming-pagelibs/resources/images/dotted-line-black.gif) } @media(min-width:720px) { .footer-bottom-row { margin-bottom: 50px; background-image: none } } @media(max-width:719px) { .footer-bottom-row .social-tool-bar-aem { display: flex; width: 100% } .footer-bottom-row .footer-social-links { justify-content: flex-start } } .copyright { font-weight: normal; font-size: 12px; line-height: 1.16667; letter-spacing: 0; text-transform: none; order: 2; margin-left: -30px; margin-right: -30px; width: calc(100% + 60px); padding: 30px; text-align: center } @media(min-width:720px) { .copyright { padding: 0; margin: 0; text-align: left; padding-right: 24px; order: 0; width: auto } } @media(min-width:1025px) { .copyright { padding-right: 20px } } .footer-social-links { padding: 0; margin-top: 0; margin-bottom: 0; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: calc(100% + 36px); margin-left: -18px; margin-right: -18px; padding-top: 12px; padding-bottom: 12px } @media(min-width:720px) { .footer-social-links { width: auto; margin-left: 0; margin-right: 0; justify-content: flex-end; padding-top: 0; padding-bottom: 0 } } .footer-social-links a { color: #2f3132 !important; transition: color .2s linear; display: block; padding: 18px; text-decoration: none } .footer-social-links a::after { display: block } .footer-social-links .icon-facebook { font-size: 22px } .footer-social-links .icon-facebook:active, .footer-social-links .icon-facebook:hover, .footer-social-links .icon-facebook:not(.focus--mouse):focus { color: #3b5998 !important } .footer-social-links .icon-twitter { font-size: 18px } .footer-social-links .icon-twitter:active, .footer-social-links .icon-twitter:hover, .footer-social-links .icon-twitter:not(.focus--mouse):focus { color: #1da1f2 !important } .footer-social-links .icon-youtube { font-size: 18px } .footer-social-links .icon-youtube:active, .footer-social-links .icon-youtube:hover, .footer-social-links .icon-youtube:not(.focus--mouse):focus { color: #f00 !important } .footer-social-links .icon-tribe { font-size: 20px } .footer-social-links .icon-tribe:active, .footer-social-links .icon-tribe:hover, .footer-social-links .icon-tribe:not(.focus--mouse):focus { color: #df0a17 !important } .footer-social-links .icon-instagram { font-size: 22px } .footer-social-links .icon-instagram:active, .footer-social-links .icon-instagram:hover, .footer-social-links .icon-instagram:not(.focus--mouse):focus { color: #e1306c !important } .footer-social-links .icon-youku { font-size: 19px; padding: 18px 14px; position: relative; top: 1px } .footer-social-links .icon-youku:active, .footer-social-links .icon-youku:hover, .footer-social-links .icon-youku:not(.focus--mouse):focus { color: #ee4022 !important } .modal-ctn { position: absolute; width: 0; height: 100vh; top: 0; left: 0; overflow: auto; background-color: rgba(38,38,38,0.97); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s linear } .footer-social-links { padding: 0; margin-top: 0; margin-bottom: 0; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: calc(100% + 36px); margin-left: -18px; margin-right: -18px; padding-top: 12px; padding-bottom: 12px } @media(min-width:720px) { .footer-social-links { width: auto; margin-left: 0; margin-right: 0; justify-content: flex-end; padding-top: 0; padding-bottom: 0 } } .footer-social-links a { color: #2f3132 !important; transition: color .2s linear; display: block; padding: 18px; text-decoration: none } .footer-social-links a::after { display: block } .footer-social-links .icon-facebook { font-size: 22px } .footer-social-links .icon-facebook:active, .footer-social-links .icon-facebook:hover, .footer-social-links .icon-facebook:not(.focus--mouse):focus { color: #3b5998 !important } .footer-social-links .icon-twitter { font-size: 18px } .footer-social-links .icon-twitter:active, .footer-social-links .icon-twitter:hover, .footer-social-links .icon-twitter:not(.focus--mouse):focus { color: #1da1f2 !important } .footer-social-links .icon-youtube { font-size: 18px } .footer-social-links .icon-youtube:active, .footer-social-links .icon-youtube:hover, .footer-social-links .icon-youtube:not(.focus--mouse):focus { color: #f00 !important } .footer-social-links .icon-tribe { font-size: 20px } .footer-social-links .icon-tribe:active, .footer-social-links .icon-tribe:hover, .footer-social-links .icon-tribe:not(.focus--mouse):focus { color: #df0a17 !important } .footer-social-links .icon-instagram { font-size: 22px } .footer-social-links .icon-instagram:active, .footer-social-links .icon-instagram:hover, .footer-social-links .icon-instagram:not(.focus--mouse):focus { color: #e1306c !important } .footer-social-links .icon-youku { font-size: 19px; padding: 18px 14px; position: relative; top: 1px } .footer-social-links .icon-youku:active, .footer-social-links .icon-youku:hover, .footer-social-links .icon-youku:not(.focus--mouse):focus { color: #ee4022 !important }
/* Logitech G Top Nav CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.main-nav-util-bar { height: 46px; background-color: #1c1c1c; overflow: hidden; display: none; max-width: 100vw } @media(min-width:1025px) { .main-nav-util-bar { display: block } } .main-nav-util-bar>.container, .main-nav-util-bar>.container-xl, .img-banner[data-img-size^="col-"] .main-nav-util-bar>.img-banner-img-ctn, .main-nav-util-bar>.carousel-slide-copy-ctn { height: 100% } .main-nav-util-bar .left, .main-nav-util-bar .right, .main-nav-util-bar .banner-copy-block.copy-align-right .mini-hr, .banner-copy-block.copy-align-right .main-nav-util-bar .mini-hr { display: flex; align-items: center } .main-nav-util-bar .other-brands, .main-nav-util-bar .brand-nav-left, .main-nav-util-bar .utility-items, .main-nav-util-bar .xfpage .brand-nav-left { list-style-type: none; padding-left: 0; margin: 0; display: flex; flex-wrap: nowrap; align-items: center } .main-nav-util-bar .other-brands, .main-nav-util-bar .brand-nav-left, .main-nav-util-bar .xfpage .brand-nav-left { margin-left: -18px; left: 0 } .main-nav-util-bar .other-brands .light-logo, .main-nav-util-bar .brand-nav-left .light-logo, .main-nav-util-bar .xfpage .brand-nav-left .light-logo { visibility: visible; opacity: .5; transition: visibility .2s linear, opacity .2s linear } .main-nav-util-bar .other-brands .dark-logo, .main-nav-util-bar .brand-nav-left .dark-logo, .main-nav-util-bar .xfpage .brand-nav-left .dark-logo { visibility: hidden; opacity: 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: visibility .2s linear, opacity .2s linear } .main-nav-util-bar .other-brands li, .main-nav-util-bar .brand-nav-left li, .main-nav-util-bar .xfpage .brand-nav-left li { padding: 0 3px } .main-nav-util-bar .other-brands li:first-child, .main-nav-util-bar .brand-nav-left li:first-child, .main-nav-util-bar .xfpage .brand-nav-left li:first-child { padding-left: 0 } .main-nav-util-bar .other-brands li:first-child a, .main-nav-util-bar .brand-nav-left li:first-child a, .main-nav-util-bar .xfpage .brand-nav-left li:first-child a { padding-left: 0; margin-left: -1px } .main-nav-util-bar .other-brands li:first-child .dark-logo, .main-nav-util-bar .brand-nav-left li:first-child .dark-logo, .main-nav-util-bar .xfpage .brand-nav-left li:first-child .dark-logo { left: 0 } .main-nav-util-bar .other-brands a:hover .dark-logo, .main-nav-util-bar .other-brands a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .brand-nav-left a:hover .dark-logo, .main-nav-util-bar .brand-nav-left a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .xfpage .brand-nav-left a:hover .dark-logo, .main-nav-util-bar .xfpage .brand-nav-left a:not(.focus--mouse):focus .dark-logo { visibility: visible; opacity: 1; transition: visibility .2s linear, opacity .2s linear } .main-nav-util-bar .other-brands a:hover .light-logo, .main-nav-util-bar .other-brands a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .brand-nav-left a:hover .light-logo, .main-nav-util-bar .brand-nav-left a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .xfpage .brand-nav-left a:hover .light-logo, .main-nav-util-bar .xfpage .brand-nav-left a:not(.focus--mouse):focus .light-logo { visibility: hidden; opacity: 0; transition: visibility .2s linear, opacity .2s linear } .main-nav-util-bar .utility-items { margin-right: -18px } .main-nav-util-bar li, .main-nav-util-bar .other-brand-item, .main-nav-util-bar .utility-item { height: 26px; border-right: 1px solid rgba(255,255,255,0.2) } .main-nav-util-bar li:last-child, .main-nav-util-bar .other-brand-item:last-child, .main-nav-util-bar .utility-item:last-child { border-right: 0 } .main-nav-util-bar li a, .main-nav-util-bar li .other-brand, .main-nav-util-bar .other-brand-item a, .main-nav-util-bar .other-brand-item .other-brand, .main-nav-util-bar .utility-item a, .main-nav-util-bar .utility-item .other-brand { display: flex; align-items: center; margin: 0 18px; height: 26px; transition: opacity .15s linear; position: relative } .main-nav-util-bar li a:hover .light-logo, .main-nav-util-bar li a:hover .dark-logo, .main-nav-util-bar li a:active .light-logo, .main-nav-util-bar li a:active .dark-logo, .main-nav-util-bar li a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar li a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar li .other-brand:hover .light-logo, .main-nav-util-bar li .other-brand:hover .dark-logo, .main-nav-util-bar li .other-brand:active .light-logo, .main-nav-util-bar li .other-brand:active .dark-logo, .main-nav-util-bar li .other-brand:not(.focus--mouse):focus .light-logo, .main-nav-util-bar li .other-brand:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .other-brand-item a:hover .light-logo, .main-nav-util-bar .other-brand-item a:hover .dark-logo, .main-nav-util-bar .other-brand-item a:active .light-logo, .main-nav-util-bar .other-brand-item a:active .dark-logo, .main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .other-brand-item .other-brand:hover .light-logo, .main-nav-util-bar .other-brand-item .other-brand:hover .dark-logo, .main-nav-util-bar .other-brand-item .other-brand:active .light-logo, .main-nav-util-bar .other-brand-item .other-brand:active .dark-logo, .main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .utility-item a:hover .light-logo, .main-nav-util-bar .utility-item a:hover .dark-logo, .main-nav-util-bar .utility-item a:active .light-logo, .main-nav-util-bar .utility-item a:active .dark-logo, .main-nav-util-bar .utility-item a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .utility-item a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .utility-item .other-brand:hover .light-logo, .main-nav-util-bar .utility-item .other-brand:hover .dark-logo, .main-nav-util-bar .utility-item .other-brand:active .light-logo, .main-nav-util-bar .utility-item .other-brand:active .dark-logo, .main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .dark-logo { transition: none } .main-nav-util-bar li a:hover .light-logo, .main-nav-util-bar li a:active .light-logo, .main-nav-util-bar li a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar li .other-brand:hover .light-logo, .main-nav-util-bar li .other-brand:active .light-logo, .main-nav-util-bar li .other-brand:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .other-brand-item a:hover .light-logo, .main-nav-util-bar .other-brand-item a:active .light-logo, .main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .other-brand-item .other-brand:hover .light-logo, .main-nav-util-bar .other-brand-item .other-brand:active .light-logo, .main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .utility-item a:hover .light-logo, .main-nav-util-bar .utility-item a:active .light-logo, .main-nav-util-bar .utility-item a:not(.focus--mouse):focus .light-logo, .main-nav-util-bar .utility-item .other-brand:hover .light-logo, .main-nav-util-bar .utility-item .other-brand:active .light-logo, .main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .light-logo { opacity: 0 } .main-nav-util-bar li a:hover .dark-logo, .main-nav-util-bar li a:active .dark-logo, .main-nav-util-bar li a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar li .other-brand:hover .dark-logo, .main-nav-util-bar li .other-brand:active .dark-logo, .main-nav-util-bar li .other-brand:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .other-brand-item a:hover .dark-logo, .main-nav-util-bar .other-brand-item a:active .dark-logo, .main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .other-brand-item .other-brand:hover .dark-logo, .main-nav-util-bar .other-brand-item .other-brand:active .dark-logo, .main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .utility-item a:hover .dark-logo, .main-nav-util-bar .utility-item a:active .dark-logo, .main-nav-util-bar .utility-item a:not(.focus--mouse):focus .dark-logo, .main-nav-util-bar .utility-item .other-brand:hover .dark-logo, .main-nav-util-bar .utility-item .other-brand:active .dark-logo, .main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .dark-logo { opacity: 1 } .main-nav-util-bar li a .light-logo, .main-nav-util-bar li a .dark-logo, .main-nav-util-bar li .other-brand .light-logo, .main-nav-util-bar li .other-brand .dark-logo, .main-nav-util-bar .other-brand-item a .light-logo, .main-nav-util-bar .other-brand-item a .dark-logo, .main-nav-util-bar .other-brand-item .other-brand .light-logo, .main-nav-util-bar .other-brand-item .other-brand .dark-logo, .main-nav-util-bar .utility-item a .light-logo, .main-nav-util-bar .utility-item a .dark-logo, .main-nav-util-bar .utility-item .other-brand .light-logo, .main-nav-util-bar .utility-item .other-brand .dark-logo { transition: opacity .15s linear } .main-nav-util-bar li a .light-logo, .main-nav-util-bar li .other-brand .light-logo, .main-nav-util-bar .other-brand-item a .light-logo, .main-nav-util-bar .other-brand-item .other-brand .light-logo, .main-nav-util-bar .utility-item a .light-logo, .main-nav-util-bar .utility-item .other-brand .light-logo { display: block; opacity: .5; height: 20px; width: auto; max-width: none } .main-nav-util-bar li a .dark-logo, .main-nav-util-bar li .other-brand .dark-logo, .main-nav-util-bar .other-brand-item a .dark-logo, .main-nav-util-bar .other-brand-item .other-brand .dark-logo, .main-nav-util-bar .utility-item a .dark-logo, .main-nav-util-bar .utility-item .other-brand .dark-logo { position: absolute; left: 0; width: 100%; height: 100%; opacity: 0 } .locale-selector, .login { display: block; color: white !important; text-transform: uppercase; font-weight: normal; font-size: 13px; line-height: 26px; padding: 0 18px; text-decoration: none; opacity: .5; transition: opacity .15s linear } .locale-selector:active, .locale-selector:hover, .locale-selector:not(.focus--mouse):focus, .login:active, .login:hover, .login:not(.focus--mouse):focus { opacity: 1; color: white !important; transition: none } .login:before { content: "\E90F"; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; line-height: 26px; padding-right: 9px; position: relative } .locale-selector { position: relative; display: flex; flex-wrap: nowrap; height: 100%; align-items: center; opacity: 1 } .locale-selector:active .flag-grayscale .flag, .locale-selector:active .flag-grayscale .flag-grayscale, .locale-selector:hover .flag-grayscale .flag, .locale-selector:hover .flag-grayscale .flag-grayscale, .locale-selector:not(.focus--mouse):focus .flag-grayscale .flag, .locale-selector:not(.focus--mouse):focus .flag-grayscale .flag-grayscale { visibility: visible } .locale-selector:active .lang, .locale-selector:hover .lang, .locale-selector:not(.focus--mouse):focus .lang { opacity: 1; transition: none } .locale-selector .lang { padding-left: 10px; opacity: .5; transition: opacity .15s linear } .locale-selector .flag-grayscale { margin-left: -12px; margin-right: -12px; transform: scale(0.41667) } .locale-selector .flag-grayscale .flag, .locale-selector .flag-grayscale .flag-grayscale { visibility: hidden } .main-nav { width: 100%; position: absolute; z-index: 100 } body.wcm-edit .main-nav, body.wcm-design .main-nav, body.wcm-preview .main-nav { position: relative } .mobile-nav-open .main-nav { pointer-events: none } .main-nav .left, .main-nav .right, .main-nav .banner-copy-block.copy-align-right .mini-hr, .banner-copy-block.copy-align-right .main-nav .mini-hr, .main-nav .center, .main-nav .banner-copy-block.copy-align-center .mini-hr, .banner-copy-block.copy-align-center .main-nav .mini-hr { display: flex; align-items: center } .main-nav a { text-decoration: none } .main-nav.hide:not(.pinned) { display: none } .search-icon-ctn { width: 43px; height: 58px; position: relative; z-index: 4; margin-right: -13px } @media(min-width:720px) { .search-icon-ctn { width: 64px; height: 58px; margin-right: -23px } } @media(min-width:1025px) { .search-icon-ctn { width: 64px; height: 64px; margin-right: -20px } } .search-icon-ctn.open .icon-search, .search-icon-ctn.open .icon-x { color: #00b8fc !important } .search-icon-ctn.open .icon-search:hover, .search-icon-ctn.open .icon-search:active, .search-icon-ctn.open .icon-search:not(.focus--mouse):focus, .search-icon-ctn.open .icon-x:hover, .search-icon-ctn.open .icon-x:active, .search-icon-ctn.open .icon-x:not(.focus--mouse):focus { color: #0090bf !important } .search-icon-ctn.typing .icon-search { display: none } .search-icon-ctn.typing .icon-x { display: block } .search-icon-ctn .icon-search, .search-icon-ctn .icon-x { background: 0; outline: 0; border: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 18px; color: white; display: block; transform: translate3d(0, 0, 0); transition: color .2s linear, opacity .2s linear } body:not(.desktop-menu-open) .main-nav.theme-light:not(.pinned) .search-icon-ctn .icon-search, body:not(.desktop-menu-open) .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-search, .carousel-controls.theme-light body:not(.desktop-menu-open) .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-search, body:not(.desktop-menu-open) .main-nav.theme-light:not(.pinned) .search-icon-ctn .icon-x, body:not(.desktop-menu-open) .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-x, .carousel-controls.theme-light body:not(.desktop-menu-open) .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-x { color: black } .search-icon-ctn .icon-search:after, .search-icon-ctn .icon-x:after { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } body.mobile-nav-open .search-icon-ctn .icon-search, body.mobile-nav-open .search-icon-ctn .icon-x { pointer-events: auto } @media(min-width:1025px) { .search-icon-ctn .icon-search, .search-icon-ctn .icon-x { font-size: 24px; opacity: .7 } .search-icon-ctn .icon-search:hover, .search-icon-ctn .icon-search:active, .search-icon-ctn .icon-search:not(.focus--mouse):focus, .search-icon-ctn .icon-x:hover, .search-icon-ctn .icon-x:active, .search-icon-ctn .icon-x:not(.focus--mouse):focus { opacity: 1; transition: none } body.desktop-menu-open .search-icon-ctn .icon-search, body.desktop-menu-open .search-icon-ctn .icon-x { color: #676767; opacity: 1 } body.desktop-menu-open .search-icon-ctn .icon-search:hover, body.desktop-menu-open .search-icon-ctn .icon-search:active, body.desktop-menu-open .search-icon-ctn .icon-search:not(.focus--mouse):focus, body.desktop-menu-open .search-icon-ctn .icon-x:hover, body.desktop-menu-open .search-icon-ctn .icon-x:active, body.desktop-menu-open .search-icon-ctn .icon-x:not(.focus--mouse):focus { color: #00b8fc } } .search-icon-ctn .icon-x { display: none } .main-nav-inner { position: relative; top: 0; background-color: transparent; transition: background-color .15s linear } body:not(.desktop-menu-open):not(.mobile-nav-open):not(.search-open) .main-nav.pinned .main-nav-inner { background-color: rgba(38,38,38,0.95) } .main-nav-main-bar { padding: 0; position: relative; transition: padding .3s ease-out } .main-nav.no-transition .main-nav-main-bar { transition: none } @media(min-width:1025px) { .main-nav-main-bar { padding: 31px 0 } body:not(.desktop-menu-open) .main-nav.pinned .main-nav-main-bar { padding: 10px 0 } } .main-nav-logo { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); color: white !important; font-size: 44px; line-height: 1; transform-origin: center; transition: color .2s linear, opacity .2s linear .2s, transform .2s ease-in; z-index: 2; margin-top: 2px } .main-nav-logo::after { color: white !important } .main-nav.theme-light::not(.pinned) .main-nav-logo, .carousel-controls.theme-light .main-nav.pagination-dots::not(.pinned) .main-nav-logo { color: black !important } .main-nav.theme-light::not(.pinned) .main-nav-logo::after, .carousel-controls.theme-light .main-nav.pagination-dots::not(.pinned) .main-nav-logo::after { color: black !important } body.mobile-nav-open .main-nav-logo { pointer-events: auto } body.desktop-menu-open .main-nav-logo { z-index: 0; pointer-events: none; opacity: 0 } .main-nav-logo::after { content: "\E91D"; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block } @media(min-width:720px) { .main-nav-logo::after { content: "\E91D"; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } } @media(min-width:720px) { .main-nav-logo { margin-top: 0; font-size: 30px } .main-nav.pinned .main-nav-logo { transform: translate3d(-50%, -50%, 0) scale(0.8); transition: none !important } } @media(min-width:1025px) { .main-nav-logo { font-size: 40px } } @media(max-width:719px) { html[lang="ja-JP"] .main-nav-logo, html[lang="ja-jp"] .main-nav-logo, html[lang="ja"] .main-nav-logo, html[lang="JA"] .main-nav-logo { font-size: 50px } } html[lang="ja-JP"] .main-nav-logo:after, html[lang="ja-jp"] .main-nav-logo:after, html[lang="ja"] .main-nav-logo:after, html[lang="JA"] .main-nav-logo:after { content: "\E91D"; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block } @media(min-width:720px) { html[lang="ja-JP"] .main-nav-logo:after, html[lang="ja-jp"] .main-nav-logo:after, html[lang="ja"] .main-nav-logo:after, html[lang="JA"] .main-nav-logo:after { content: "\E91D"; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } } @media(max-width:719px) { html[lang="zh-CN"] .main-nav-logo, html[lang="zh-cn"] .main-nav-logo, html[lang="zh"] .main-nav-logo, html[lang="ZH"] .main-nav-logo { font-size: 46px } } html[lang="zh-CN"] .main-nav-logo:after, html[lang="zh-cn"] .main-nav-logo:after, html[lang="zh"] .main-nav-logo:after, html[lang="ZH"] .main-nav-logo:after { content: ""; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block } @media(min-width:720px) { html[lang="zh-CN"] .main-nav-logo:after, html[lang="zh-cn"] .main-nav-logo:after, html[lang="zh"] .main-nav-logo:after, html[lang="ZH"] .main-nav-logo:after { content: ""; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } } .main-nav-categories { max-height: 0; min-height: 0; background-color: #f4f4f4; position: absolute; top: 0; width: 100%; transition: .3s ease-in-out; overflow: hidden; display: none; z-index: 0 } @media(min-width:1025px) { .main-nav-categories { display: block } } .main-nav-categories .container, .main-nav-categories .container-xl, .main-nav-categories .img-banner[data-img-size^="col-"] .img-banner-img-ctn, .img-banner[data-img-size^="col-"] .main-nav-categories .img-banner-img-ctn, .main-nav-categories .carousel-slide-copy-ctn { width: 100%; position: relative } .main-nav-header-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: white; height: 126px; position: relative; overflow: hidden; transition: height .3s ease-out } .main-nav-header-wrapper>.container, .main-nav-header-wrapper>.container-xl, .img-banner[data-img-size^="col-"] .main-nav-header-wrapper>.img-banner-img-ctn, .main-nav-header-wrapper>.carousel-slide-copy-ctn { height: 100% } .main-nav-header { color: #676767; display: flex; width: calc(100% - 160px); height: 100%; justify-content: space-around; align-items: center; position: relative; left: 44px; list-style-type: none; margin: 0; padding: 0; z-index: 2 } .nav-category { height: 100% } .nav-category.no-sub-category a:after { display: none } .nav-category a { text-decoration: none; color: inherit; font-weight: normal; display: block; text-transform: uppercase; text-align: center; padding: 15px; color: #676767; height: 100%; display: flex; align-items: center; position: relative } .nav-category a:hover, .nav-category a:active, .nav-category a:focus:not(.focus--mouse) { color: #00b8fc } .nav-category a:hover:after, .nav-category a:active:after, .nav-category a:focus:not(.focus--mouse):after { color: #00b8fc } .nav-category a:after { content: ""; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #c3c6c8; position: absolute; font-size: 7px; bottom: 25px; left: 50%; transform: translateX(-50%); transition: bottom .3s ease-in-out } .nav-category a span { color: #2f3132 } .nav-category a span:after { content: ""; display: flex } .nav-category.selected a { color: #2f3132 } .nav-category.selected a:after { color: #00b8fc } .nav-category.selected a span { position: relative; padding-bottom: 1px; color: #262626 } .nav-category.selected a span:after { content: ''; display: block; position: absolute; bottom: -2px; left: 0; right: 0; border-bottom: 2px solid #00b8fc } .main-nav-content { width: 100%; position: relative } .blade { position: absolute; width: 100%; z-index: -1; transition: opacity .2s linear; opacity: 0; overflow-y: auto } .blade>.container, .blade>.container-xl, .img-banner[data-img-size^="col-"] .blade>.img-banner-img-ctn, .blade>.carousel-slide-copy-ctn { padding-top: 20px; padding-bottom: 20px } @media(min-height:900px) { .blade>.container, .blade>.container-xl, .img-banner[data-img-size^="col-"] .blade>.img-banner-img-ctn, .blade>.carousel-slide-copy-ctn { padding-top: 32px; padding-bottom: 32px } } .blade.selected { opacity: 1; z-index: 1 } .blade[data-num-items="4"] .nav-category-level-1, .blade[data-num-items="7"] .nav-category-level-1, .blade[data-num-items="8"] .nav-category-level-1, .blade[data-num-items="10"] .nav-category-level-1, .blade[data-num-items="11"] .nav-category-level-1, .blade[data-num-items="12"] .nav-category-level-1, .blade[data-num-items="13"] .nav-category-level-1, .blade[data-num-items="14"] .nav-category-level-1, .blade[data-num-items="15"] .nav-category-level-1, .blade[data-num-items="16"] .nav-category-level-1 { margin-left: -16px; margin-right: -16px } .blade[data-num-items="4"] .category-item, .blade[data-num-items="7"] .category-item, .blade[data-num-items="8"] .category-item, .blade[data-num-items="10"] .category-item, .blade[data-num-items="11"] .category-item, .blade[data-num-items="12"] .category-item, .blade[data-num-items="13"] .category-item, .blade[data-num-items="14"] .category-item, .blade[data-num-items="15"] .category-item, .blade[data-num-items="16"] .category-item { width: calc(75%); width: 75%; margin-right: 0 } @media(min-width:720px) { .blade[data-num-items="4"] .category-item, .blade[data-num-items="7"] .category-item, .blade[data-num-items="8"] .category-item, .blade[data-num-items="10"] .category-item, .blade[data-num-items="11"] .category-item, .blade[data-num-items="12"] .category-item, .blade[data-num-items="13"] .category-item, .blade[data-num-items="14"] .category-item, .blade[data-num-items="15"] .category-item, .blade[data-num-items="16"] .category-item { width: calc(37.5%); width: 37.5%; margin-right: 0 } } @media(min-width:1025px) { .blade[data-num-items="4"] .category-item, .blade[data-num-items="7"] .category-item, .blade[data-num-items="8"] .category-item, .blade[data-num-items="10"] .category-item, .blade[data-num-items="11"] .category-item, .blade[data-num-items="12"] .category-item, .blade[data-num-items="13"] .category-item, .blade[data-num-items="14"] .category-item, .blade[data-num-items="15"] .category-item, .blade[data-num-items="16"] .category-item { width: calc(25%); width: 25%; margin-right: 0 } } .blade[data-num-items="4"] .category-item a, .blade[data-num-items="7"] .category-item a, .blade[data-num-items="8"] .category-item a, .blade[data-num-items="10"] .category-item a, .blade[data-num-items="11"] .category-item a, .blade[data-num-items="12"] .category-item a, .blade[data-num-items="13"] .category-item a, .blade[data-num-items="14"] .category-item a, .blade[data-num-items="15"] .category-item a, .blade[data-num-items="16"] .category-item a { padding-left: 16px; padding-right: 16px } .nav-promo a { display: block; margin: 16px 0 } @media(min-height:900px) { .nav-promo a { margin: 32px 0 } } .nav-promo img { width: 100%; display: block } .nav-category-level-1 { padding-left: 0; list-style-type: none; margin-left: -32px; margin-right: -32px; margin-top: 0; margin-bottom: 0 } .nav-category-level-1.centered { justify-content: center } .category-item { width: calc(100%); width: 100%; margin-right: 0 } @media(min-width:720px) { .category-item { width: calc(50%); width: 50%; margin-right: 0 } } @media(min-width:1025px) { .category-item { width: calc(33.33333%); width: 33.33333%; margin-right: 0 } } .category-item a { text-align: center; display: block; padding: 20px 32px } @media(min-height:900px) { .category-item a { padding-top: 32px; padding-bottom: 32px } } .category-item .img-ctn { display: block; height: 108px; position: relative; overflow: hidden; transition: opacity .2s cubic-bezier(0.22, 0.61, 0.36, 1) } .category-item .img { background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100% } .category-item .title { display: block; font-weight: normal; position: relative; margin-top: 15px; text-transform: uppercase } @media(min-height:900px) { .category-item .title { margin-top: 26px } } .category-item .title:after { content: ""; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 9px; margin-left: 7px; margin-top: 5px; position: absolute; visibility: hidden } .category-item .desc { display: block; font-weight: normal; color: #676767; font-size: 14px; margin-top: 0 } @media(min-height:900px) { .category-item .desc { margin-top: 5px } } .category-item .desc:after { content: none } .category-item.selected .title:after { visibility: visible } .category-item.unselected .img-ctn { opacity: .75 } .blade-0 .nav-category-level-1 { margin-left: 0; margin-right: -20px } .blade-0[data-num-items="1"] .category-item { width: calc(300% - 24px); margin-right: 24px } @media(min-width:720px) { .blade-0[data-num-items="1"] .category-item { width: calc(150% - 24px); margin-right: 24px } } @media(min-width:1025px) { .blade-0[data-num-items="1"] .category-item { width: calc(100% - 20px); margin-right: 20px } } .blade-0[data-num-items="2"] .category-item { width: calc(150% - 24px); margin-right: 24px } @media(min-width:720px) { .blade-0[data-num-items="2"] .category-item { width: calc(75% - 24px); margin-right: 24px } } @media(min-width:1025px) { .blade-0[data-num-items="2"] .category-item { width: calc(50% - 20px); margin-right: 20px } } .blade-0[data-num-items="5"] .category-item, .blade-0[data-num-items="9"] .category-item, .blade-0[data-num-items="10"] .category-item { width: calc(60% - 24px); margin-right: 24px } @media(min-width:720px) { .blade-0[data-num-items="5"] .category-item, .blade-0[data-num-items="9"] .category-item, .blade-0[data-num-items="10"] .category-item { width: calc(30% - 24px); margin-right: 24px } } @media(min-width:1025px) { .blade-0[data-num-items="5"] .category-item, .blade-0[data-num-items="9"] .category-item, .blade-0[data-num-items="10"] .category-item { width: calc(20% - 20px); margin-right: 20px } } .blade-0[data-num-items="3"] .category-item, .blade-0[data-num-items="6"] .category-item { width: calc(100% - 24px); margin-right: 24px } @media(min-width:720px) { .blade-0[data-num-items="3"] .category-item, .blade-0[data-num-items="6"] .category-item { width: calc(50% - 24px); margin-right: 24px } } @media(min-width:1025px) { .blade-0[data-num-items="3"] .category-item, .blade-0[data-num-items="6"] .category-item { width: calc(33.33333% - 20px); margin-right: 20px } } .blade-0[data-num-items="4"] .category-item, .blade-0[data-num-items="7"] .category-item, .blade-0[data-num-items="8"] .category-item { width: calc(75% - 24px); margin-right: 24px } @media(min-width:720px) { .blade-0[data-num-items="4"] .category-item, .blade-0[data-num-items="7"] .category-item, .blade-0[data-num-items="8"] .category-item { width: calc(37.5% - 24px); margin-right: 24px } } @media(min-width:1025px) { .blade-0[data-num-items="4"] .category-item, .blade-0[data-num-items="7"] .category-item, .blade-0[data-num-items="8"] .category-item { width: calc(25% - 20px); margin-right: 20px } } .blade-0 .category-item { width: calc(50% - 24px); margin-right: 24px } @media(min-width:720px) { .blade-0 .category-item { width: calc(25% - 24px); margin-right: 24px } } @media(min-width:1025px) { .blade-0 .category-item { width: calc(16.66667% - 20px); margin-right: 20px } } .blade-0 .category-item .img-ctn { height: 60px; position: relative; transition: opacity .2s linear; overflow: visible } @media(min-height:900px) { .blade-0 .category-item .img-ctn { height: 85px } } .blade-0 .category-item.selected .img-ctn { transform: translate3d(0, 0, 0) } .blade-0 .category-item.selected .img { transform: translate3d(0, 0, 0) scale(1.26829) } .blade-0 .category-item .img { right: 0; bottom: 0; margin: auto; width: auto; height: auto; transition: transform .2s cubic-bezier(0.65, 0.05, 0.36, 1); transform: translate3d(0, 0, 0) scale(1) } .blade-0 .category-item .title { font-size: 14px; margin-top: 20px } @media(min-height:900px) { .blade-0 .category-item .title { margin-top: 40px } } .main-nav-search { opacity: 0; background-color: #f4f4f4; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .1s linear } .main-nav-search .container, .main-nav-search .container-xl, .main-nav-search .img-banner[data-img-size^="col-"] .img-banner-img-ctn, .img-banner[data-img-size^="col-"] .main-nav-search .img-banner-img-ctn, .main-nav-search .carousel-slide-copy-ctn { height: 100% } .main-nav-search input { padding: 0; border: 0; background-color: #f4f4f4; color: #2f3132; font-size: 24px; font-weight: bold; width: calc(100% - 30px); height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; visibility: hidden } @media(min-width:1025px) { .main-nav-search input { font-size: 30px } } .main-nav-search input::-ms-clear { display:none; height:0; width:0 } .main-nav-search input:-ms-input-placeholder { color:#676767 !important } .main-nav-search.open { z-index: 3; opacity: 1 } .main-nav-search.open input { visibility: visible } .side-nav-wrapper { position: fixed; height: 100vh; top: 0; left: -10000px; background-color:
#c3c6c8 } .side-nav-wrapper a { -webkit-user-select: none !important; -webkit-touch-callout: none !important } .mobile-nav-open .side-nav-wrapper { left: 0 } @media(min-width:1025px) { .side-nav-wrapper { display: none } } .side-nav { width: calc(100vw - 64px); max-width: 400px; height: 100%; overflow: hidden } .side-nav .side-nav-link, .side-nav .side-nav-back-link, .side-nav .side-utility-item a, .side-nav .side-close-menu a { font-weight: bold; font-size: 14px; line-height: 1.28571; text-transform: uppercase; color: white; text-decoration: none; display: block; padding: 24px 24px 23px; position: relative } .side-nav .side-close-menu { display: none; background-color: #f4f4f4 } .side-nav .side-close-menu a { color: black } .side-nav .side-close-menu .icon-x:after { float: right } .side-nav .side-nav-link, .side-nav .side-nav-back-link { color: black } .side-nav .side-nav-link:focus, .side-nav .side-nav-back-link:focus { outline: 1px solid black; box-shadow: inset 0 0 10px black } .side-nav .side-nav-link:after { content: "\E905"; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%) } .side-nav .side-nav-link.no-subnav:after { content: none } .side-nav .side-nav-back-link { text-align: center; padding-left: 44px; padding-right: 44px } .side-nav .side-nav-back-link:after { content: ""; font-family: "logi-gaming-icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-decoration: none !important; line-height: 1; vertical-align: top; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; position: absolute; left: 24px; top: 50%; transform: translateY(-50%) rotate(180deg) } .side-nav .side-nav-back-link.login:before { left: auto; margin-bottom: -9px; position: relative; top: -5px } .side-nav .side-nav-back-link.login span { left: 10px } .side-nav .side-other-brand { display: flex; width: 100%; align-items: center; justify-content: center; color: white; padding: 30px 0; text-decoration: none } .side-nav .side-other-brand .light-logo { display: block; height: 36px; width: auto; max-width: 120px } .side-nav .login { opacity: 1 } .side-nav .login:before { left: 24px; position: absolute; top: 18px } .side-nav .login span { left: 30px; position: relative; top: 0 } .side-nav .myacc-authenticated, .side-nav .myacc-unauthenticated { display: none } .side-nav .my-account-links-wrapper { padding: 20px } .side-nav .my-account-links-wrapper .my-account-mobile-view { margin-bottom: 10px } .side-nav .my-account-links-wrapper .my-account-mobile-logout { background-color: #fff; color: #2f3132 !important } .side-nav .my-account-links-wrapper .my-account-mobile-logout:hover { background-color: #0090bf } .side-nav .my-account-links-wrapper .my-account-mobile-logout:hover span { color: #fff } .side-nav .my-account-links-wrapper .btn { border-radius: 0; font-size: 13px; width: 100% } .side-nav-content-wrapper { height: 100%; position: relative } .side-nav-content { height: 100vh; padding-bottom: 60px; overflow-x: hidden; overflow-y: auto } .side-nav-content:not(.next-depth) { -webkit-overflow-scrolling: touch } .side-nav-content ul { list-style: none; margin: 0; padding-left: 0 } .side-nav-content .side-nav-back, .side-nav-content .side-nav-category { background-color: #00b8fc } .side-nav-content .side-nav-category:last-of-type { background-image: none } .side-nav-subnav { position: absolute; top: 0; left: 100%; visibility: hidden; width: 100%; height: 100vh; background-color: #f4f4f4; transition: all .2s ease-in } .side-nav-subnav.show { visibility: visible } .side-nav-subnav.show .side-subnav-scroll-ctn { -webkit-overflow-scrolling: touch } .side-nav-subnav .side-nav-category { background-color: #f4f4f4; background-image: url(http://media.4at5.net/email_domains/log/234190/dotted-line-grey.gif) } .side-nav-subnav .side-nav-link { color: #0090bf } .side-nav-subnav .side-nav-link:focus { outline: 1px solid #00b8fc; box-shadow: 0 0 10px #00b8fc; box-shadow: inset 0 0 10px #00b8fc } .theme-astro .side-nav-subnav .side-nav-link:focus, [data-design-theme="theme-astro"] .side-nav-subnav .side-nav-link:focus { box-shadow: 0 0 10px #ff3600 } .side-nav-subnav .side-nav-link.overview { background-color: white } .side-subnav-scroll-ctn { height: calc(100vh - 65px); padding-bottom: 44px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: auto } .side-utility-items { background-color: #676767 } .side-utility-items>.myacc { background-repeat: repeat-x; background-position: left bottom; background-image: url(http://media.4at5.net/email_domains/log/234190/dotted-line-white.gif) } .side-utility-items>.myacc:before { background-image: url(http://media.4at5.net/email_domains/log/234190/dotted-line-white.gif); background-position: left top; background-repeat: repeat-x; content: ''; display: block; height: 1px; width: 100% } .side-utility-item { background-repeat: repeat-x; background-position: left bottom; background-image: url(http://media.4at5.net/email_domains/log/234190/dotted-line-white.gif) } .side-utility-item:last-of-type { background-image: none } .side-utility-item a { font-weight: bold; font-size: 14px; line-height: 1.28571; text-transform: uppercase; padding-left: 54px !important; position: relative } .side-utility-item a:after { content: none } .side-utility-item .login { color: white; opacity: 1 } .side-utility-item .login:before { opacity: .5; font-size: 18px; line-height: 1; padding-right: 0; position: absolute; left: 34px; top: 50%; margin-top: -1px; transform: translate(-50%, -50%) } .side-utility-item .locale-selector .flag-grayscale { position: absolute; left: 34px; top: 50%; margin: 0; margin-top: -1px; transform: translate(-50%, -50%) scale(0.41667) } .side-utility-item .locale-selector .flag-grayscale .flag, .side-utility-item .locale-selector .flag-grayscale .flag-grayscale { visibility: visible } .side-utility-item .locale-selector .lang { opacity: 1; display: block; padding-left: 0 } .side-other-brands { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; list-style-type: none; padding: 10px 0 } .side-other-brands .logo-cell { text-align: center; padding: 0; height: 100%; width: 100%; margin: 0 auto } .side-other-brands .logo-cell .img-responsive { display: inline-block; opacity: 1; max-height: 36px } .side-other-brands .logo-cell a { padding: 30px 0; width: 50%; height: 100%; display: inline-block; font-size: 16px; max-height: 36px; box-sizing: content-box } .side-other-brand-item { display: flex; flex: 50%; align-items: stretch } .side-promo a { padding: 0; display: block; text-decoration: none } .side-promo a:after { content: none } .side-promo img { display: block; width: 100%; max-width: none } .main-nav-secondary-bar { padding: 12px 0; visibility: hidden; opacity: 0 } .main-nav-secondary-bar .product-shipping-message { display: none } .main-nav-secondary-bar .product-cta .btn-add-to-cart { text-align: left !important; line-height: 14px !important } .main-nav-secondary-bar .product-cta .btn-add-to-cart:before { font-size: 12px !important; line-height: 14px !important } .main-nav-secondary-bar .product-cta .product-cta-note { font-weight: bold; font-size: 14px; line-height: 1.28571; letter-spacing: 0; text-transform: uppercase; font-size: 14px !important } @media(min-width:1025px) { .main-nav-secondary-bar .product-cta .product-cta-note { font-size: 18px; line-height: 1.22222; letter-spacing: 0 } } .main-nav-secondary-bar .product-cta .product-cta-note.out-of-stock.backorderable { display: none } .main-nav-secondary-bar .title { font-weight: bold; font-size: 18px; line-height: 1.22222; letter-spacing: 0; text-transform: uppercase; margin: 0 } @media(min-width:1025px) { .main-nav-secondary-bar .title { font-size: 24px; line-height: 1; letter-spacing: 0 } } .main-nav-util-bar>.container, .main-nav-util-bar>.container-xl, .img-banner[data-img-size^="col-"] .main-nav-util-bar>.img-banner-img-ctn, .main-nav-util-bar>.carousel-slide-copy-ctn, .main-nav-main-bar>.container, .main-nav-main-bar>.container-xl, .img-banner[data-img-size^="col-"] .main-nav-main-bar>.img-banner-img-ctn, .main-nav-main-bar>.carousel-slide-copy-ctn, .main-nav-secondary-bar>.container, .main-nav-secondary-bar>.container-xl, .img-banner[data-img-size^="col-"] .main-nav-secondary-bar>.img-banner-img-ctn, .main-nav-secondary-bar>.carousel-slide-copy-ctn { display: flex; width: 100%; justify-content: space-between; align-items: center; position: relative } .hamburger { background: 0; outline: 0; border: 0; padding: 0; width: 64px; height: 64px; position: relative; left: -26px; transform: translate3d(0, 0, 0); transition: background-color .2s linear, opacity .2s linear, left .2s ease-in-out; z-index: 2 } @media(min-width:1025px) { .hamburger { left: -20px !important; opacity: .7 } .hamburger:hover, .hamburger:active, .hamburger:not(.focus--mouse):focus { opacity: 1 } } .hamburger .lines { position: absolute; top: 50%; left: 50%; margin-top: -1px } .hamburger span { transition: transform .15s ease-in, top .15s ease-out .15s } .hamburger .top-bar, .hamburger .middle-bar, .hamburger .bottom-bar { width: 23px; height: 3px; position: absolute; top: 0; left: 0; background-color: white; transform: translateX(-50%); transform-origin: center; transition: background-color .2s linear } .main-nav.theme-light:not(.pinned) .hamburger .top-bar, .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .hamburger .top-bar, .main-nav.theme-light:not(.pinned) .hamburger .middle-bar, .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .hamburger .middle-bar, .main-nav.theme-light:not(.pinned) .hamburger .bottom-bar, .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .hamburger .bottom-bar { background-color: black } .hamburger .top-bar { top: -8px } .hamburger .bottom-bar { top: 8px } .hamburger:focus:not(.focus--mouse) { border: 1px solid white } body:not(.desktop-menu-open) .main-nav.theme-light:not(.pinned) .hamburger:focus:not(.focus--mouse), body:not(.desktop-menu-open) .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .hamburger:focus:not(.focus--mouse), .carousel-controls.theme-light body:not(.desktop-menu-open) .main-nav.pagination-dots:not(.pinned) .hamburger:focus:not(.focus--mouse) { border-color: black } body.desktop-menu-open .hamburger, body.mobile-nav-open .hamburger { background-color: #676767; opacity: 1 } body.desktop-menu-open .hamburger:hover, body.desktop-menu-open .hamburger:active, body.desktop-menu-open .hamburger:not(.focus--mouse):focus, body.mobile-nav-open .hamburger:hover, body.mobile-nav-open .hamburger:active, body.mobile-nav-open .hamburger:not(.focus--mouse):focus { background-color: #00b8fc } body.desktop-menu-open .hamburger span, body.mobile-nav-open .hamburger span { background-color: white !important; transition: top .15s ease-in, transform .15s ease-out .15s } body.desktop-menu-open .hamburger span.top-bar, body.desktop-menu-open .hamburger span.middle-bar, body.mobile-nav-open .hamburger span.top-bar, body.mobile-nav-open .hamburger span.middle-bar { top: 0; transform: translateX(-50%) rotate(45deg) } body.desktop-menu-open .hamburger span.bottom-bar, body.mobile-nav-open .hamburger span.bottom-bar { top: 0; transform: translateX(-50%) rotate(-45deg) } body.mobile-nav-open .hamburger { pointer-events: auto; background-color: #0090bf !important; left: -30px } @media(min-width:720px) { body.mobile-nav-open .hamburger { left: -40px } } /*! * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) * * (slightly edited. Do not replace with a direct copy-paste from that site) * * https://en.wikipedia.org/wiki/ISO_3166-2 */.flag,.flag-grayscale{display:inline-block;width:48px;height:48px;background:url("http://media.4at5.net/email_domains/log/234190/flags-color.png") no-repeat} .flag-grayscale{background-image:url("http://media.4at5.net/email_domains/log/234190/flags-bw.png")} .flag-cz{background-position:-144px -144px} .flag-ne{background-position:-528px -432px} .flag-jm{background-position:-432px -288px} .flag-ae{background-position:-48px 0} .flag-im{background-position:-96px -288px} .flag-sh{background-position:-672px -528px} .flag-gm{background-position:0 -240px} .flag-bm{background-position:-480px -48px} .flag-tr{background-position:-288px -624px} .flag-ga{background-position:-384px -192px} .flag-bz{background-position:-96px -96px} .flag-vg{background-position:-144px -672px} .flag-kg{background-position:-624px -288px} .flag-uz{background-position:-720px -624px} .flag-ke{background-position:-576px -288px} .flag-il{background-position:-48px -288px} .flag-sn{background-position:-144px -576px} .flag-ai{background-position:-192px 0} .flag-ba{background-position:0 -48px} .flag-hr{background-position:-528px -240px} .flag-lr{background-position:-576px -336px} .flag-gb{background-position:-432px -192px} .flag-no{background-position:0 -480px} .flag-sr{background-position:-240px -576px} .flag-tl{background-position:-96px -624px} .flag-py{background-position:-96px -528px} .flag-zw{background-position:-624px -672px} .flag-sy{background-position:-432px -576px} .flag-mv{background-position:-192px -432px} .flag-ar{background-position:-432px 0} .flag-kn{background-position:-48px -336px} .flag-as{background-position:-480px 0} .flag-ms{background-position:-48px -432px} .flag-sb{background-position:-432px -528px} .flag-kw{background-position:-192px -336px} .flag-bh{background-position:-288px -48px} .flag-ge{background-position:-528px -192px} .flag-dk{background-position:-288px -144px} .flag-tg{background-position:-672px -576px} .flag-kh{background-position:-672px -288px} .flag-tc{background-position:-528px -576px} .flag-nz{background-position:-192px -480px} .flag-do{background-position:-384px -144px} .flag-gu{background-position:-288px -240px} .flag-tf{background-position:-624px -576px} .flag-eg{background-position:-576px -144px} .flag-td{background-position:-576px -576px} .flag-br{background-position:-624px -48px} .flag-ph{background-position:-480px -480px} .flag-mr{background-position:0 -432px} .flag-tk{background-position:-48px -624px} .flag-ci{background-position:-384px -96px} .flag-cv{background-position:0 -144px} .flag-sl{background-position:-48px -576px} .flag-ee{background-position:-528px -144px} .flag-md{background-position:-192px -384px} .flag-cg{background-position:-288px -96px} .flag-jo{background-position:-480px -288px} .flag-ec{background-position:-480px -144px} .flag-ng{background-position:-624px -432px} .flag-lu{background-position:-720px -336px} .flag-ag{background-position:-144px 0} .flag-bd{background-position:-96px -48px} .flag-sm{background-position:-96px -576px} .flag-ax{background-position:-672px 0} .flag-mm{background-position:-528px -384px} .flag-pr{background-position:-672px -480px} .flag-rs{background-position:-240px -528px} .flag-fr{background-position:-336px -192px} .flag-us{background-position:-624px -624px} .flag-cl{background-position:-480px -96px} .flag-mc{background-position:-144px -384px} .flag-de{background-position:-192px -144px} .flag-tt{background-position:-336px -624px} .flag-va{background-position:0 -672px} .flag-lb{background-position:-384px -336px} .flag-mo{background-position:-624px -384px} .flag-to{background-position:-240px -624px} .flag-ki{background-position:-720px -288px} .flag-nf{background-position:-576px -432px} .flag-lc{background-position:-432px -336px} .flag-tn{background-position:-192px -624px} .flag-ir{background-position:-240px -288px} .flag-bo{background-position:-576px -48px} .flag-cf{background-position:-240px -96px} .flag-za{background-position:-528px -672px} .flag-dm{background-position:-336px -144px} .flag-my{background-position:-336px -432px} .flag-ug{background-position:-576px -624px} .flag-mw{background-position:-240px -432px} .flag-tv{background-position:-384px -624px} .flag-ss{background-position:-288px -576px} .flag-bb{background-position:-48px -48px} .flag-ca{background-position:-144px -96px} .flag-ni{background-position:-672px -432px} .flag-ad{background-position:0 0} .flag-fo{background-position:-288px -192px} .flag-so{background-position:-192px -576px} .flag-gt{background-position:-240px -240px} .flag-id{background-position:-720px -240px} .flag-si{background-position:-720px -528px} .flag-np{background-position:-48px -480px} .flag-hk{background-position:-432px -240px} .flag-me{background-position:-240px -384px} .flag-bg{background-position:-240px -48px} .flag-cm{background-position:-528px -96px} .flag-rw{background-position:-336px -528px} .flag-bl{background-position:-432px -48px} .flag-pt{background-position:0 -528px} .flag-ic{background-position:-672px -240px} .flag-cd{background-position:-192px -96px} .flag-ck{background-position:-432px -96px} .flag-mt{background-position:-96px -432px} .flag-pl{background-position:-576px -480px} .flag-ch{background-position:-336px -96px} .flag-ve{background-position:-96px -672px} .flag-sk{background-position:0 -576px} .flag-ye{background-position:-432px -672px} .flag-mh{background-position:-384px -384px} .flag-pa{background-position:-288px -480px} .flag-hu{background-position:-624px -240px} .flag-vu{background-position:-288px -672px} .flag-nr{background-position:-96px -480px} .flag-vc{background-position:-48px -672px} .flag-qa{background-position:-144px -528px} .flag-sc{background-position:-480px -528px} .flag-an{background-position:-336px 0} .flag-mk{background-position:-432px -384px} .flag-je{background-position:-384px -288px} .flag-fi{background-position:-96px -192px} .flag-af{background-position:-96px 0} .flag-be{background-position:-144px -48px} .flag-ma{background-position:-96px -384px} .flag-am{background-position:-288px 0} .flag-bt{background-position:-720px -48px} .flag-cu{background-position:-720px -96px} .flag-pn{background-position:-624px -480px} .flag-al{background-position:-240px 0} .flag-kp{background-position:-96px -336px} .flag-eu{background-position:-48px -192px} .flag-es{background-position:-720px -144px} .flag-cy{background-position:-96px -144px} .flag-bj{background-position:-384px -48px} .flag-gd{background-position:-480px -192px} .flag-nu{background-position:-144px -480px} .flag-km{background-position:0 -336px} .flag-ua{background-position:-528px -624px} .flag-ls{background-position:-624px -336px} .flag-fj{background-position:-144px -192px} .flag-bs{background-position:-672px -48px} .flag-bw{background-position:0 -96px} .flag-mx{background-position:-288px -432px} .flag-pe{background-position:-336px -480px} .flag-wf{background-position:-336px -672px} .flag-sg{background-position:-624px -528px} .flag-pk{background-position:-528px -480px} .flag-nc{background-position:-480px -432px} .flag-ht{background-position:-576px -240px} .flag-bf{background-position:-192px -48px} .flag-au{background-position:-576px 0} .flag-kr{background-position:-144px -336px} .flag-gw{background-position:-336px -240px} .flag-gq{background-position:-96px -240px} .flag-la{background-position:-336px -336px} .flag-bn{background-position:-528px -48px} .flag-gn{background-position:-48px -240px} .flag-mf{background-position:-288px -384px} .flag-aw{background-position:-624px 0} .flag-lt{background-position:-672px -336px} .flag-fk{background-position:-192px -192px} .flag-pw{background-position:-48px -528px} .flag-eh{background-position:-624px -144px} .flag-sa{background-position:-384px -528px} .flag-kz{background-position:-288px -336px} .flag-gy{background-position:-384px -240px} .flag-er{background-position:-672px -144px} .flag-in{background-position:-144px -288px} .flag-ml{background-position:-480px -384px} .flag-cr{background-position:-672px -96px} .flag-at{background-position:-528px 0} .flag-iq{background-position:-192px -288px} .flag-ky{background-position:-240px -336px} .flag-gh{background-position:-624px -192px} .flag-uy{background-position:-672px -624px} .flag-az{background-position:-720px 0} .flag-nl{background-position:-720px -432px} .flag-ru{background-position:-288px -528px} .flag-it{background-position:-336px -288px} .flag-jp{background-position:-528px -288px} .flag-st{background-position:-336px -576px} .flag-gr{background-position:-144px -240px} .flag-pf{background-position:-384px -480px} .flag-is{background-position:-288px -288px} .flag-mn{background-position:-576px -384px} .flag-ro{background-position:-192px -528px} .flag-gg{background-position:-576px -192px} .flag-cw{background-position:-48px -144px} .flag-et{background-position:0 -192px} .flag-mu{background-position:-144px -432px} .flag-om{background-position:-240px -480px} .flag-ie{background-position:0 -288px} .flag-sz{background-position:-480px -576px} .flag-fm{background-position:-240px -192px} .flag-vn{background-position:-240px -672px} .flag-th{background-position:-720px -576px} .flag-bi{background-position:-336px -48px} .flag-ao{background-position:-384px 0} .flag-sv{background-position:-384px -576px} .flag-lk{background-position:-528px -336px} .flag-li{background-position:-480px -336px} .flag-na{background-position:-432px -432px} .flag-se{background-position:-576px -528px} .flag-by{background-position:-48px -96px} .flag-pg{background-position:-432px -480px} .flag-ps{background-position:-720px -480px} .flag-yt{background-position:-480px -672px} .flag-tm{background-position:-144px -624px} .flag-ly{background-position:-48px -384px} .flag-sd{background-position:-528px -528px} .flag-mz{background-position:-384px -432px} .flag-tj{background-position:0 -624px} .flag-gs{background-position:-192px -240px} .flag-dj{background-position:-240px -144px} .flag-gi{background-position:-672px -192px} .flag-tz{background-position:-480px -624px} .flag-zm{background-position:-576px -672px} .flag-lv{background-position:0 -384px} .flag-dz{background-position:-432px -144px} .flag-co{background-position:-624px -96px} .flag-cn{background-position:-576px -96px} .flag-mq{background-position:-720px -384px} .flag-vi{background-position:-192px -672px} .flag-gl{background-position:-720px -192px} .flag-tw{background-position:-432px -624px} .flag-mp{background-position:-672px -384px} .flag-ws{background-position:-384px -672px} .flag-hn{background-position:-480px -240px} .flag-mg{background-position:-336px -384px} /* Logitech G Banner Nav and Search –––––––––––––––––––––––––––––––––––––––––––––––––– */ .section{position:relative;background-size:cover;background-repeat:no-repeat;background-position:center} .main-nav-util-bar{height:46px;background-color:#1c1c1c;overflow:hidden;display:none;max-width:100vw} @media(min-width:1025px){.main-nav-util-bar{display:block} } .main-nav-util-bar>.container,.main-nav-util-bar>.container-xl,.img-banner[data-img-size^="col-"] .main-nav-util-bar>.img-banner-img-ctn,.main-nav-util-bar>.carousel-slide-copy-ctn{height:100%} .main-nav-util-bar .left,.main-nav-util-bar .right,.main-nav-util-bar .banner-copy-block.copy-align-right .mini-hr,.banner-copy-block.copy-align-right .main-nav-util-bar .mini-hr{display:flex;align-items:center} .main-nav-util-bar .other-brands,.main-nav-util-bar .brand-nav-left,.main-nav-util-bar .utility-items,.main-nav-util-bar .xfpage .brand-nav-left{list-style-type:none;padding-left:0;margin:0;display:flex;flex-wrap:nowrap;align-items:center} .main-nav-util-bar .other-brands,.main-nav-util-bar .brand-nav-left,.main-nav-util-bar .xfpage .brand-nav-left{margin-left:-18px;left:0} .main-nav-util-bar .other-brands .light-logo,.main-nav-util-bar .brand-nav-left .light-logo,.main-nav-util-bar .xfpage .brand-nav-left .light-logo{visibility:visible;opacity:.5;transition:visibility .2s linear,opacity .2s linear} .main-nav-util-bar .other-brands .dark-logo,.main-nav-util-bar .brand-nav-left .dark-logo,.main-nav-util-bar .xfpage .brand-nav-left .dark-logo{visibility:hidden;opacity:0;position:absolute;top:50%;left:0;transform:translateY(-50%);transition:visibility .2s linear,opacity .2s linear} .main-nav-util-bar .other-brands li,.main-nav-util-bar .brand-nav-left li,.main-nav-util-bar .xfpage .brand-nav-left li{padding:0 3px} .main-nav-util-bar .other-brands li:first-child,.main-nav-util-bar .brand-nav-left li:first-child,.main-nav-util-bar .xfpage .brand-nav-left li:first-child{padding-left:0} .main-nav-util-bar .other-brands li:first-child a,.main-nav-util-bar .brand-nav-left li:first-child a,.main-nav-util-bar .xfpage .brand-nav-left li:first-child a{padding-left:0;margin-left:-1px} .main-nav-util-bar .other-brands li:first-child .dark-logo,.main-nav-util-bar .brand-nav-left li:first-child .dark-logo,.main-nav-util-bar .xfpage .brand-nav-left li:first-child .dark-logo{left:0} .main-nav-util-bar .other-brands a:hover .dark-logo,.main-nav-util-bar .other-brands a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .brand-nav-left a:hover .dark-logo,.main-nav-util-bar .brand-nav-left a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .xfpage .brand-nav-left a:hover .dark-logo,.main-nav-util-bar .xfpage .brand-nav-left a:not(.focus--mouse):focus .dark-logo{visibility:visible;opacity:1;transition:visibility .2s linear,opacity .2s linear} .main-nav-util-bar .other-brands a:hover .light-logo,.main-nav-util-bar .other-brands a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .brand-nav-left a:hover .light-logo,.main-nav-util-bar .brand-nav-left a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .xfpage .brand-nav-left a:hover .light-logo,.main-nav-util-bar .xfpage .brand-nav-left a:not(.focus--mouse):focus .light-logo{visibility:hidden;opacity:0;transition:visibility .2s linear,opacity .2s linear} .main-nav-util-bar .utility-items{margin-right:-18px} .main-nav-util-bar li,.main-nav-util-bar .other-brand-item,.main-nav-util-bar .utility-item{height:26px;border-right:1px solid rgba(255,255,255,0.2)} .main-nav-util-bar li:last-child,.main-nav-util-bar .other-brand-item:last-child,.main-nav-util-bar .utility-item:last-child{border-right:0} .main-nav-util-bar li a,.main-nav-util-bar li .other-brand,.main-nav-util-bar .other-brand-item a,.main-nav-util-bar .other-brand-item .other-brand,.main-nav-util-bar .utility-item a,.main-nav-util-bar .utility-item .other-brand{display:flex;align-items:center;margin:0 18px;height:26px;transition:opacity .15s linear;position:relative} .main-nav-util-bar li a:hover .light-logo,.main-nav-util-bar li a:hover .dark-logo,.main-nav-util-bar li a:active .light-logo,.main-nav-util-bar li a:active .dark-logo,.main-nav-util-bar li a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar li a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar li .other-brand:hover .light-logo,.main-nav-util-bar li .other-brand:hover .dark-logo,.main-nav-util-bar li .other-brand:active .light-logo,.main-nav-util-bar li .other-brand:active .dark-logo,.main-nav-util-bar li .other-brand:not(.focus--mouse):focus .light-logo,.main-nav-util-bar li .other-brand:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .other-brand-item a:hover .light-logo,.main-nav-util-bar .other-brand-item a:hover .dark-logo,.main-nav-util-bar .other-brand-item a:active .light-logo,.main-nav-util-bar .other-brand-item a:active .dark-logo,.main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .other-brand-item .other-brand:hover .light-logo,.main-nav-util-bar .other-brand-item .other-brand:hover .dark-logo,.main-nav-util-bar .other-brand-item .other-brand:active .light-logo,.main-nav-util-bar .other-brand-item .other-brand:active .dark-logo,.main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .utility-item a:hover .light-logo,.main-nav-util-bar .utility-item a:hover .dark-logo,.main-nav-util-bar .utility-item a:active .light-logo,.main-nav-util-bar .utility-item a:active .dark-logo,.main-nav-util-bar .utility-item a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .utility-item a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .utility-item .other-brand:hover .light-logo,.main-nav-util-bar .utility-item .other-brand:hover .dark-logo,.main-nav-util-bar .utility-item .other-brand:active .light-logo,.main-nav-util-bar .utility-item .other-brand:active .dark-logo,.main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .dark-logo{transition:none} .main-nav-util-bar li a:hover .light-logo,.main-nav-util-bar li a:active .light-logo,.main-nav-util-bar li a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar li .other-brand:hover .light-logo,.main-nav-util-bar li .other-brand:active .light-logo,.main-nav-util-bar li .other-brand:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .other-brand-item a:hover .light-logo,.main-nav-util-bar .other-brand-item a:active .light-logo,.main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .other-brand-item .other-brand:hover .light-logo,.main-nav-util-bar .other-brand-item .other-brand:active .light-logo,.main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .utility-item a:hover .light-logo,.main-nav-util-bar .utility-item a:active .light-logo,.main-nav-util-bar .utility-item a:not(.focus--mouse):focus .light-logo,.main-nav-util-bar .utility-item .other-brand:hover .light-logo,.main-nav-util-bar .utility-item .other-brand:active .light-logo,.main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .light-logo{opacity:0} .main-nav-util-bar li a:hover .dark-logo,.main-nav-util-bar li a:active .dark-logo,.main-nav-util-bar li a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar li .other-brand:hover .dark-logo,.main-nav-util-bar li .other-brand:active .dark-logo,.main-nav-util-bar li .other-brand:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .other-brand-item a:hover .dark-logo,.main-nav-util-bar .other-brand-item a:active .dark-logo,.main-nav-util-bar .other-brand-item a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .other-brand-item .other-brand:hover .dark-logo,.main-nav-util-bar .other-brand-item .other-brand:active .dark-logo,.main-nav-util-bar .other-brand-item .other-brand:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .utility-item a:hover .dark-logo,.main-nav-util-bar .utility-item a:active .dark-logo,.main-nav-util-bar .utility-item a:not(.focus--mouse):focus .dark-logo,.main-nav-util-bar .utility-item .other-brand:hover .dark-logo,.main-nav-util-bar .utility-item .other-brand:active .dark-logo,.main-nav-util-bar .utility-item .other-brand:not(.focus--mouse):focus .dark-logo{opacity:1} .main-nav-util-bar li a .light-logo,.main-nav-util-bar li a .dark-logo,.main-nav-util-bar li .other-brand .light-logo,.main-nav-util-bar li .other-brand .dark-logo,.main-nav-util-bar .other-brand-item a .light-logo,.main-nav-util-bar .other-brand-item a .dark-logo,.main-nav-util-bar .other-brand-item .other-brand .light-logo,.main-nav-util-bar .other-brand-item .other-brand .dark-logo,.main-nav-util-bar .utility-item a .light-logo,.main-nav-util-bar .utility-item a .dark-logo,.main-nav-util-bar .utility-item .other-brand .light-logo,.main-nav-util-bar .utility-item .other-brand .dark-logo{transition:opacity .15s linear} .main-nav-util-bar li a .light-logo,.main-nav-util-bar li .other-brand .light-logo,.main-nav-util-bar .other-brand-item a .light-logo,.main-nav-util-bar .other-brand-item .other-brand .light-logo,.main-nav-util-bar .utility-item a .light-logo,.main-nav-util-bar .utility-item .other-brand .light-logo{display:block;opacity:.5;height:20px;width:auto;max-width:none} .main-nav-util-bar li a .dark-logo,.main-nav-util-bar li .other-brand .dark-logo,.main-nav-util-bar .other-brand-item a .dark-logo,.main-nav-util-bar .other-brand-item .other-brand .dark-logo,.main-nav-util-bar .utility-item a .dark-logo,.main-nav-util-bar .utility-item .other-brand .dark-logo{position:absolute;left:0;width:100%;height:100%;opacity:0} .locale-selector,.login{display:block;color:white !important;text-transform:uppercase;font-weight:normal;font-size:13px;line-height:26px;padding:0 18px;text-decoration:none;opacity:.5;transition:opacity .15s linear} .locale-selector:active,.locale-selector:hover,.locale-selector:not(.focus--mouse):focus,.login:active,.login:hover,.login:not(.focus--mouse):focus{opacity:1;color:white
!important;transition:none} .login:before{content:"\E90F";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:26px;padding-right:9px;position:relative} .locale-selector{position:relative;display:flex;flex-wrap:nowrap;height:100%;align-items:center;opacity:1} .locale-selector:active .flag-grayscale .flag,.locale-selector:active .flag-grayscale .flag-grayscale,.locale-selector:hover .flag-grayscale .flag,.locale-selector:hover .flag-grayscale .flag-grayscale,.locale-selector:not(.focus--mouse):focus .flag-grayscale .flag,.locale-selector:not(.focus--mouse):focus .flag-grayscale .flag-grayscale{visibility:visible} .locale-selector:active .lang,.locale-selector:hover .lang,.locale-selector:not(.focus--mouse):focus .lang{opacity:1;transition:none} .locale-selector .lang{padding-left:10px;opacity:.5;transition:opacity .15s linear} .locale-selector .flag-grayscale{margin-left:-12px;margin-right:-12px;transform:scale(0.41667)} .locale-selector .flag-grayscale .flag,.locale-selector .flag-grayscale .flag-grayscale{visibility:hidden} .main-nav{width:100%;position:absolute;z-index:100} body.wcm-edit .main-nav,body.wcm-design .main-nav,body.wcm-preview .main-nav{position:relative} .mobile-nav-open .main-nav{pointer-events:none} .main-nav .left,.main-nav .right,.main-nav .banner-copy-block.copy-align-right .mini-hr,.banner-copy-block.copy-align-right .main-nav .mini-hr,.main-nav .center,.main-nav .banner-copy-block.copy-align-center .mini-hr,.banner-copy-block.copy-align-center .main-nav .mini-hr{display:flex;align-items:center} .main-nav a{text-decoration:none} .main-nav.hide:not(.pinned){display:none} .search-icon-ctn{width:43px;height:58px;position:relative;z-index:4;margin-right:-13px} @media(min-width:720px){.search-icon-ctn{width:64px;height:58px;margin-right:-23px} } @media(min-width:1025px){.search-icon-ctn{width:64px;height:64px;margin-right:-20px} } .search-icon-ctn.open .icon-search,.search-icon-ctn.open .icon-x{color:#00b8fc !important} .search-icon-ctn.open .icon-search:hover,.search-icon-ctn.open .icon-search:active,.search-icon-ctn.open .icon-search:not(.focus--mouse):focus,.search-icon-ctn.open .icon-x:hover,.search-icon-ctn.open .icon-x:active,.search-icon-ctn.open .icon-x:not(.focus--mouse):focus{color:#0090bf !important} .search-icon-ctn.typing .icon-search{display:none} .search-icon-ctn.typing .icon-x{display:block} .search-icon-ctn .icon-search,.search-icon-ctn .icon-x{background:0;outline:0;border:0;padding:0;position:absolute;top:0;left:0;width:100%;height:100%;font-size:18px;color:white;display:block;transform:translate3d(0,0,0);transition:color .2s linear,opacity .2s linear} body:not(.desktop-menu-open) .main-nav.theme-light:not(.pinned) .search-icon-ctn .icon-search,body:not(.desktop-menu-open) .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-search,.carousel-controls.theme-light body:not(.desktop-menu-open) .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-search,body:not(.desktop-menu-open) .main-nav.theme-light:not(.pinned) .search-icon-ctn .icon-x,body:not(.desktop-menu-open) .carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-x,.carousel-controls.theme-light body:not(.desktop-menu-open) .main-nav.pagination-dots:not(.pinned) .search-icon-ctn .icon-x{color:black} .search-icon-ctn .icon-search:after,.search-icon-ctn .icon-x:after{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)} body.mobile-nav-open .search-icon-ctn .icon-search,body.mobile-nav-open .search-icon-ctn .icon-x{pointer-events:auto} @media(min-width:1025px){.search-icon-ctn .icon-search,.search-icon-ctn .icon-x{font-size:24px;opacity:.7} .search-icon-ctn .icon-search:hover,.search-icon-ctn .icon-search:active,.search-icon-ctn .icon-search:not(.focus--mouse):focus,.search-icon-ctn .icon-x:hover,.search-icon-ctn .icon-x:active,.search-icon-ctn .icon-x:not(.focus--mouse):focus{opacity:1;transition:none} body.desktop-menu-open .search-icon-ctn .icon-search,body.desktop-menu-open .search-icon-ctn .icon-x{color:#676767;opacity:1} body.desktop-menu-open .search-icon-ctn .icon-search:hover,body.desktop-menu-open .search-icon-ctn .icon-search:active,body.desktop-menu-open .search-icon-ctn .icon-search:not(.focus--mouse):focus,body.desktop-menu-open .search-icon-ctn .icon-x:hover,body.desktop-menu-open .search-icon-ctn .icon-x:active,body.desktop-menu-open .search-icon-ctn .icon-x:not(.focus--mouse):focus{color:#00b8fc} } .search-icon-ctn .icon-x{display:none} .main-nav-inner{position:relative;top:0;background-color:transparent;transition:background-color .15s linear} body:not(.desktop-menu-open):not(.mobile-nav-open):not(.search-open) .main-nav.pinned .main-nav-inner{background-color:rgba(38,38,38,0.95)} .main-nav-main-bar{padding:0;position:relative;transition:padding .3s ease-out} .main-nav.no-transition .main-nav-main-bar{transition:none} @media(min-width:1025px){.main-nav-main-bar{padding:0px 0} body:not(.desktop-menu-open) .main-nav.pinned .main-nav-main-bar{padding:10px 0} } .main-nav-logo{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);color:white !important;font-size:44px;line-height:1;transform-origin:center;transition:color .2s linear,opacity .2s linear .2s,transform .2s ease-in;z-index:2;margin-top:2px} .main-nav-logo:after{color:white !important} .main-nav.theme-light:not(.pinned) .main-nav-logo,.carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .main-nav-logo{color:black !important} .main-nav.theme-light:not(.pinned) .main-nav-logo:after,.carousel-controls.theme-light .main-nav.pagination-dots:not(.pinned) .main-nav-logo:after{color:black !important} body.mobile-nav-open .main-nav-logo{pointer-events:auto} body.desktop-menu-open .main-nav-logo{z-index:0;pointer-events:none;opacity:0} .main-nav-logo:after{content:"\E91D";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block} @media(min-width:720px){.main-nav-logo:after{content:"\E91D";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} } @media(min-width:720px){.main-nav-logo{margin-top:0;font-size:30px} .main-nav.pinned .main-nav-logo{transform:translate3d(-50%,-50%,0) scale(0.8);transition:none !important} } @media(min-width:1025px){.main-nav-logo{font-size:40px} } @media(max-width:719px){html[lang="ja-JP"] .main-nav-logo,html[lang="ja-jp"] .main-nav-logo,html[lang="ja"] .main-nav-logo,html[lang="JA"] .main-nav-logo{font-size:50px} } html[lang="ja-JP"] .main-nav-logo:after,html[lang="ja-jp"] .main-nav-logo:after,html[lang="ja"] .main-nav-logo:after,html[lang="JA"] .main-nav-logo:after{content:"";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block} @media(min-width:720px){html[lang="ja-JP"] .main-nav-logo:after,html[lang="ja-jp"] .main-nav-logo:after,html[lang="ja"] .main-nav-logo:after,html[lang="JA"] .main-nav-logo:after{content:"";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} } @media(max-width:719px){html[lang="zh-CN"] .main-nav-logo,html[lang="zh-cn"] .main-nav-logo,html[lang="zh"] .main-nav-logo,html[lang="ZH"] .main-nav-logo{font-size:46px} } html[lang="zh-CN"] .main-nav-logo:after,html[lang="zh-cn"] .main-nav-logo:after,html[lang="zh"] .main-nav-logo:after,html[lang="ZH"] .main-nav-logo:after{content:"";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block} @media(min-width:720px){html[lang="zh-CN"] .main-nav-logo:after,html[lang="zh-cn"] .main-nav-logo:after,html[lang="zh"] .main-nav-logo:after,html[lang="ZH"] .main-nav-logo:after{content:"";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} } .main-nav-categories{max-height:0;min-height:0;background-color:#f4f4f4;position:absolute;top:0;width:100%;transition:.3s ease-in-out;overflow:hidden;display:none;z-index:0} @media(min-width:1025px){.main-nav-categories{display:block} } .main-nav-categories .container,.main-nav-categories .container-xl,.main-nav-categories .img-banner[data-img-size^="col-"] .img-banner-img-ctn,.img-banner[data-img-size^="col-"] .main-nav-categories .img-banner-img-ctn,.main-nav-categories .carousel-slide-copy-ctn{width:100%;position:relative} .main-nav-header-wrapper{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:white;height:126px;position:relative;overflow:hidden;transition:height .3s ease-out} .main-nav-header-wrapper>.container,.main-nav-header-wrapper>.container-xl,.img-banner[data-img-size^="col-"] .main-nav-header-wrapper>.img-banner-img-ctn,.main-nav-header-wrapper>.carousel-slide-copy-ctn{height:100%} .main-nav-header{color:#676767;display:flex;width:calc(100% - 160px);height:100%;justify-content:space-around;align-items:center;position:relative;left:44px;list-style-type:none;margin:0;padding:0;z-index:2} .nav-category{height:100%} .nav-category.no-sub-category a:after{display:none} .nav-category a{text-decoration:none;color:inherit;font-weight:normal;display:block;text-transform:uppercase;text-align:center;padding:15px;color:#676767;height:100%;display:flex;align-items:center;position:relative} .nav-category a:hover,.nav-category a:active,.nav-category a:focus:not(.focus--mouse){color:#00b8fc} .nav-category a:hover:after,.nav-category a:active:after,.nav-category a:focus:not(.focus--mouse):after{color:#00b8fc} .nav-category a:after{content:"";font-family:"logi-gaming-icons" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-decoration:none !important;line-height:1;vertical-align:top;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#c3c6c8;position:absolute;font-size:7px;bottom:25px;left:50%;transform:translateX(-50%);transition:bottom .3s ease-in-out} .nav-category a span{color:#2f3132} .nav-category a span:after{content:"";display:flex} .nav-category.selected a{color:#2f3132} .nav-category.selected a:after{color:#00b8fc} .nav-category.selected a span{position:relative;padding-bottom:1px;color:#262626} .nav-category.selected a span:after{content:'';display:block;position:absolute;bottom:-2px;left:0;right:0;border-bottom:2px solid #00b8fc} .main-nav-content{width:100%;position:relative} .blade{position:absolute;width:100%;z-index:-1;transition:opacity .2s linear;opacity:0;overflow-y:auto} .blade>.container,.blade>.container-xl,.img-banner[data-img-size^="col-"] .blade>.img-banner-img-ctn,.blade>.carousel-slide-copy-ctn{padding-top:20px;padding-bottom:20px} @media(min-height:900px){.blade>.container,.blade>.container-xl,.img-banner[data-img-size^="col-"] .blade>.img-banner-img-ctn,.blade>.carousel-slide-copy-ctn{padding-top:32px;padding-bottom:32px} } .blade.selected{opacity:1;z-index:1} .blade[data-num-items="4"] .nav-category-level-1,.blade[data-num-items="7"] .nav-category-level-1,.blade[data-num-items="8"] .nav-category-level-1,.blade[data-num-items="10"] .nav-category-level-1,.blade[data-num-items="11"] .nav-category-level-1,.blade[data-num-items="12"] .nav-category-level-1,.blade[data-num-items="13"] .nav-category-level-1,.blade[data-num-items="14"] .nav-category-level-1,.blade[data-num-items="15"] .nav-category-level-1,.blade[data-num-items="16"] .nav-category-level-1{margin-left:-16px;margin-right:-16px} .blade[data-num-items="4"] .category-item,.blade[data-num-items="7"] .category-item,.blade[data-num-items="8"] .category-item,.blade[data-num-items="10"] .category-item,.blade[data-num-items="11"] .category-item,.blade[data-num-items="12"] .category-item,.blade[data-num-items="13"] .category-item,.blade[data-num-items="14"] .category-item,.blade[data-num-items="15"] .category-item,.blade[data-num-items="16"] .category-item{width:calc(75%);width:75%;margin-right:0} @media(min-width:720px){.blade[data-num-items="4"] .category-item,.blade[data-num-items="7"] .category-item,.blade[data-num-items="8"] .category-item,.blade[data-num-items="10"] .category-item,.blade[data-num-items="11"] .category-item,.blade[data-num-items="12"] .category-item,.blade[data-num-items="13"] .category-item,.blade[data-num-items="14"] .category-item,.blade[data-num-items="15"] .category-item,.blade[data-num-items="16"] .category-item{width:calc(37.5%);width:37.5%;margin-right:0} } @media(min-width:1025px){.blade[data-num-items="4"] .category-item,.blade[data-num-items="7"] .category-item,.blade[data-num-items="8"] .category-item,.blade[data-num-items="10"] .category-item,.blade[data-num-items="11"] .category-item,.blade[data-num-items="12"] .category-item,.blade[data-num-items="13"] .category-item,.blade[data-num-items="14"] .category-item,.blade[data-num-items="15"] .category-item,.blade[data-num-items="16"] .category-item{width:calc(25%);width:25%;margin-right:0} } .blade[data-num-items="4"] .category-item a,.blade[data-num-items="7"] .category-item a,.blade[data-num-items="8"] .category-item a,.blade[data-num-items="10"] .category-item a,.blade[data-num-items="11"] .category-item a,.blade[data-num-items="12"] .category-item a,.blade[data-num-items="13"] .category-item a,.blade[data-num-items="14"] .category-item a,.blade[data-num-items="15"] .category-item a,.blade[data-num-items="16"] .category-item a{padding-left:16px;padding-right:16px} .nav-promo a{display:block;margin:16px 0} @media(min-height:900px){.nav-promo a{margin:32px 0} } .nav-promo img{width:100%;display:block} .nav-category-level-1{padding-left:0;list-style-type:none;margin-left:-32px;margin-right:-32px;margin-top:0;margin-bottom:0} .nav-category-level-1.centered{justify-content:center}