.overlay,
html.noscroll {
height: 100%;
width: 100%
}
body.noscroll,
html.noscroll,
nav .wordmark {
overflow: hidden
}
html {
margin: 0;
padding: 0;
border: 0
}
a,
abbr,
acronym,
address,
article,
aside,
blockquote,
body,
caption,
code,
dd,
del,
dfn,
dialog,
div,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
iframe,
img,
label,
legend,
li,
nav,
object,
ol,
p,
pre,
q,
section,
span,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
display: block
}
table {
border-collapse: separate;
border-spacing: 0
}
caption,
td,
th {
text-align: left;
font-weight: 400;
float: none!important
}
table,
td,
th {
vertical-align: middle
}
nav .language span,
nav .menu {
vertical-align: top
}
blockquote after,
blockquote before,
q after,
q before {
content: ''
}
a img {
border: none
}
b,
i {
display: none
}
:root {
font-size: 16px
}
@media screen and (max-width: 767px) {
:root {
font-size: 16px
}
}
body{
line-height: 1.5;
font-family: Roboto,Helvetica,Arial,sans-serif;
font-weight: 300;
background: #000
}
a.btn {
background: #00a000
}
.btn:hover,
a.btn:hover,
input[type=submit]:hover {
background: #00a000!important
}
h1,
h2,
h3,
h4,
h5 {
font-family: Conv_RazerF5Thin, Arial
}
h1 {
font-size: 2.25rem;
line-height: 2.25rem;
letter-spacing: .0625rem
}
h2 {
font-size: 1.75rem;
line-height: 1.875rem
}
@media screen and (max-width: 767px) {
h1,
h2 {
font-size: 1.75rem;
line-height: 1.875rem
}
}
h3,
h4 {
font-size: 1.125rem;
line-height: 1.25rem;
text-transform: none
}
h3 {
font-family: Conv_RazerF5Bold, Arial
}
h4 {
font-family: Conv_RazerF5Thin, Arial
}
.btn,
a.btn,
input[type=submit] {
display: inline-block!important;
border-left: 0!important;
border-radius: .1875rem;
text-align: center
}
.overlay {
background: #000;
display: none;
position: fixed;
z-index: 101;
bottom: auto;
opacity: 0;
-webkit-transition: .5s opacity ease-in-out;
transition: .5s opacity ease-in-out
}
.overlay.opened {
opacity: 1
}
.scroll-hide {
background: #111;
height: 10px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 100
}
nav {
height: 3.125rem;
background: #222;
position: fixed;
top: 0;
width: 100%;
z-index: 105;
-webkit-transition: 1s all ease;
transition: 1s all ease
}
nav .menu.level-one {
padding: 1.125rem .625rem
}
nav .menu.level-one::after {
display: block;
content: "";
clear: both
}
nav .menu.level-one li {
display: block;
padding: 0 1.25rem;
float: left;
line-height: 1
}
nav .menu.level-one li a {
font-family: Conv_RazerF5, Arial;
font-size: 1rem;
/*text-transform: uppercase;*/
letter-spacing: .0625rem
}
nav .menu.level-one li a.active {
color: #44D62C
}
nav .menu.level-one li a span {
display: none
}
nav .menu .level-two {
-webkit-transition: .5s all ease;
transition: .5s all ease;
overflow: hidden;
top: 50px;
padding: 0 .625rem 0 0
}
nav .menu .level-two::after {
display: block;
content: "";
clear: both
}
nav .menu .level-two li {
float: none;
padding: 1.25rem;
background: #000
}
nav .menu .level-two li:last-child {
padding-bottom: 2.5rem
}
nav .wordmark {
width: 6.25rem;
height: 1.875rem;
margin: .625rem auto;
display: inline-block
}
nav .wordmark figure.one,
nav .wordmark figure.two {
background-size: contain;
background-repeat: no-repeat;
height: 100%;
width: 100%
}
nav .wordmark figure.one {
-webkit-transition: .5s all ease;
transition: .5s all ease;
margin-top: -3.75rem;
margin-left: .9375rem
}
nav .wordmark figure.two {
margin-top: 38px
}
nav .wordmark.menu-open figure.one {
margin-top: 0
}
nav .icon-holder {
position: absolute;
right: 1.25rem;
top: .625rem;
-webkit-transition: .2s all ease;
transition: .2s all ease
}
nav .icon-holder ul li {
display: inline-block;
float: left
}
nav .icon-holder ul li:first-child {
padding: 0
}
@media screen and (min-width: 767px) {
nav .icon-holder ul li {
padding: 0 0 0 1.875rem
}
}
@media screen and (max-width: 480px) {
nav .icon-holder ul li {
padding: 0 0 0 .625rem
}
nav .icon-holder ul li:first-child {
padding: 0
}
}
nav .icon-holder.overlay-open {
position: absolute;
right: -10rem
}
nav .language {
display: block
}
nav .language span {
display: inline-block;
/*margin-top: 0.250rem*/
}
nav .desktop-country {
margin-top: .1875rem
}
nav .account-mobile {
position: fixed;
padding: .625rem;
bottom: 0;
border-top: .0625rem solid #444;
width: 100%;
opacity: 0;
z-index: 101;
-webkit-transition: .5s opacity ease;
transition: .5s opacity ease;
background: #222
}
nav .account-mobile ul li {
display: inline-block;
padding: 0 .625rem;
text-align: center;
min-width: 49%
}
nav .account-mobile .menu-link span {
vertical-align: super;
font-family: Conv_RazerF5Light, Arial;
font-size: .9375rem;
color: #888;
text-transform: uppercase
}
nav .container-main {
position: relative;
height: 3.125rem
}
nav .container-main.open,
nav .container-main::hover {
overflow: visible
}
nav .bag-links {
max-height: 80vh;
/* -webkit-transition: .2s all ease;
transition: .2s all ease; */
background: #000;
margin-left: 0;
right: 1.5625rem;
padding: 0 .625rem;
overflow-x: hidden;
overflow-y: auto;
min-width: 8.125rem;
position: absolute;
top: 3.125rem;
display: none;
}
nav .bag-links li {
display: block;
width: 100%;
float: none!important;
padding: .625rem 0!important
}
nav .bag-links li:first-child {
padding: 1.25rem 0 .625rem!important;
display: inline-block;
}
nav .bag-links li:last-child {
padding: .625rem 0 1.25rem!important
}
nav .bag-links li a {
text-align: center!important;
display: block
}
nav .bag-links.open {
/* max-height: 12.5rem; */
display: block;
}
nav .menu-icon {
width: 24px;
height: 24px;
display: inline-block
}
nav .menu-icon.cart {
background: url(/images/icons/cart.svg) center no-repeat
}
nav .menu-icon.account {
background: url(/images/icons/account.svg) center no-repeat;
background-size: 12px
}
nav .menu-icon.search {
background: url(/images/icons/search.svg) center no-repeat;
background-size: 20px
}
nav .menu-icon.support {
background: url(/images/icons/support.svg) center no-repeat;
background-size: 20px
}
nav .menu-icon.language {
background: url(/images/menu/flag.jpg) center no-repeat
}
nav .search-container {
display: none
}
nav .search-container .search-form {
position: absolute;
width: 87%;
right: 0;
display: block;
top: .3125rem;
z-index: 100
}
nav .search-container .search-form input {
-webkit-transition: .5s opacity ease-in-out;
transition: .5s opacity ease-in-out;
width: 0;
opacity: 0;
display: block;
background: url(/images/icons/search.svg) left no-repeat #000;
background-position-x: .625rem;
background-size: 20px;
padding-left: 2.5rem
}
nav .search-container .search-form input.opened {
opacity: 1;
width: 100%
}
nav.large {
max-height: 3.125rem;
height: 3.125rem
}
nav.large .wordmark figure.one {
margin-top: -3.75rem
}
nav.large .container-main {
height: 5rem;
}
@media screen and (min-width: 767px) {
nav .menu,
nav .menu li {
display: inline-block
}
nav .menu li {
max-height: 1.5rem;
overflow: hidden
}
nav .menu li:hover .level-two,
nav .menu li ul.open {
position: absolute;
max-height: 31.25rem
}
nav .menu.level-one li {
padding: 0 .625rem
}
nav .menu.level-one .level-two::after {
display: block;
content: "";
clear: both
}
nav .menu.level-one .level-two li {
padding: 1.25rem
}
nav .menu.level-one .level-two li:last-child {
padding-bottom: 2.5rem
}
nav .level-two {
-webkit-transition: .5s all ease;
transition: .5s all ease;
position: absolute;
max-height: 0;
overflow: hidden
}
nav .level-two li {
display: block
}
nav .icon-holder {
position: relative;
right: 0;
top: .75rem;
float: right;
display: inline-block
}
nav .search-mobile {
display: none
}
}
@media screen and (min-width: 1024px) {
nav .menu.level-one li {
padding: 0 1.25rem
}
}
@media screen and (max-width: 767px) {
nav.large .wordmark figure.one {
margin-top: 0
}
nav {
text-align: center;
max-height: 3.125rem;
max-width: 100vw;
-webkit-transition: .3s all ease-in-out;
overflow:hidden;
transition: .3s all ease-in-out
}
nav.flow{overflow:visible;}
nav.large {
height: 5rem;
max-height: 5rem
}
nav.large .navbar-toggle {
top: 1.875rem;
padding: 0;
}
nav.large .icon-holder {
top: 1.5625rem
}
nav.open {
height: 100vh;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
max-width: 100vh;
max-height: 100%
}
nav .bag-links {
width: 100%;
left: 0
}
nav .search-mobile {
padding: 1.25rem 2.5rem;
display: block
}
nav .search-mobile input {
border: 1px solid #444;
border-radius: .1875rem;
width: 100%;
padding: .3125rem 1.25rem;
color: #fff;
background: url(/images/icons/search.svg) right no-repeat;
background-position-x: 98%;
background-size: 24px
}
nav .wordmark {
height: 3.75rem
}
nav .wordmark figure.two {
margin-top: .4375rem
}
nav .search-container .search-form {
width: 100%;
margin: 0 auto;
right: 0;
left: 0
}
nav .search-container .search-form input.opened {
opacity: 1;
width: 80%;
margin: 0 auto
}
nav .menu {
background: #222;
font-family: Conv_RazerF5Thin, Arial;
padding: 0!important;
max-height: 0;
overflow: hidden
}
nav .menu.open {
max-height: 100vh
}
nav .menu.level-one li {
display: inline-block;
padding: .625rem 0;
float: left;
line-height: 1;
min-width: 33.33333%;
background: #000
}
nav .menu.level-one li:last-child {
border: 0
}
nav .menu.level-one li a {
font-family: Conv_RazerF5, Arial;
font-size: 1rem;
text-transform: none;
letter-spacing: 0;
display: block;
padding-bottom: .3125rem
}
nav .menu.level-one li a.active {
color: #44D62C
}
nav .menu.level-one li a.active span {
display: block
}
nav .menu.level-one li a.active span.mobile-icon {
height: 35px;
width: 35px;
margin: 0 auto .3125rem
}
nav .menu.level-one li a.active span figure {
width: 100%;
height: 100%
}
nav .menu.level-one li a.active span figure.products {
background-image: url(/images/icons/mouse_icon.svg);
background-repeat: no-repeat
}
nav .menu.level-one li a.active span figure.software {
background-image: url(/images/icons/software.svg);
background-repeat: no-repeat
}
nav .menu.level-one li a.active span figure.community {
background-image: url(/images/icons/community_icon.svg);
background-repeat: no-repeat;
background-size: 2.5rem
}
nav .menu.level-one li a span {
display: block
}
nav .menu.level-one li a span.mobile-icon {
height: 35px;
width: 35px;
margin: 0 auto .3125rem
}
nav .menu.level-one li a span figure {
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
nav .menu.level-one li a span figure.products {
background-image: url(/images/icons/mouse_icon_gray.svg);
background-repeat: no-repeat
}
nav .menu.level-one li a span figure.software {
background-image: url(/images/icons/software_gray.svg);
background-repeat: no-repeat;
background-position-x: .375rem
}
nav .menu.level-one li a span figure.community {
background-image: url(/images/icons/community_icon_gray.svg);
background-repeat: no-repeat;
background-size: 2.5rem
}
nav .menu .level-two {
margin: 0;
padding: 1.875rem 0 0;
position: absolute;
left: 0;
width: 100%;
top: auto;
max-height: 0
}
nav .menu .level-two::after {
display: block;
content: "";
clear: both
}
nav .menu .level-two li {
display: block;
border: 0;
opacity: 0;
text-align: left;
padding: .625rem 0;
background: #222;
width: 100%
}
nav .menu .level-two li:first-child {
-webkit-transition: .3s all ease;
transition: .3s all ease
}
nav .menu .level-two li:nth-child(2) {
-webkit-transition: .4s all ease;
transition: .4s all ease
}
nav .menu .level-two li:nth-child(3),
nav .menu .level-two li:nth-child(4) {
-webkit-transition: .5s all ease;
transition: .5s all ease
}
nav .menu .level-two li:nth-child(5) {
-webkit-transition: .6s all ease;
transition: .6s all ease
}
nav .menu .level-two li:nth-child(6) {
-webkit-transition: .7s all ease;
transition: .7s all ease
}
nav .menu .level-two li:nth-child(7) {
-webkit-transition: .8s all ease;
transition: .8s all ease
}
nav .menu .level-two li:nth-child(8) {
-webkit-transition: .9s all ease;
transition: .9s all ease
}
nav .menu .level-two li a {
font-family: Conv_RazerF5Thin, Arial;
font-size: 1.125rem;
color: #fff;
font-weight: 200;
text-transform: none
}
nav .menu .level-two.open {
max-height: 80vh
}
nav .menu .level-two.open li {
opacity: 1;
padding: .5625rem 2.5rem
}
}
.h1style,
.secondary,
.stdHolder h2,
.text-uppercase {
letter-spacing: .0625rem
}
.site-wide-banner,
footer .slogan {
text-align: center
}
nav .navbar-toggle {
width: 20px;
height: 20px;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
background: 0 0;
border: 0;
min-width: 0;
display: none;
border-radius: 3px;
position: absolute;
left: 10px;
top: 18px
}
@media screen and (max-width: 767px) {
nav .navbar-toggle {
display: block
}
}
nav .navbar-toggle.hide {
position: absolute;
left: -1.875rem
}
nav .navbar-toggle .icon-bar {
background: #000;
opacity: 1;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out
}
nav .navbar-toggle span {
display: block;
position: absolute;
height: 2px;
width: 50%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out
}
nav .navbar-toggle span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0
}
nav .navbar-toggle span:nth-child(odd) {
left: 0;
border-radius: 9px 0 0 9px
}
nav .navbar-toggle span:nth-child(1),
nav .navbar-toggle span:nth-child(2) {
top: 0
}
nav .navbar-toggle span:nth-child(3),
nav .navbar-toggle span:nth-child(4) {
top: 6px
}
nav .navbar-toggle span:nth-child(5),
nav .navbar-toggle span:nth-child(6) {
top: 12px
}
nav .navbar-toggle.open span:nth-child(1),
nav .navbar-toggle.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
nav .navbar-toggle.open span:nth-child(2),
nav .navbar-toggle.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
nav .navbar-toggle.open span:nth-child(1) {
left: 1px;
top: 1px
}
nav .navbar-toggle.open span:nth-child(2) {
left: 8px;
top: 1px
}
nav .navbar-toggle.open span:nth-child(3) {
left: -50%;
opacity: 0
}
nav .navbar-toggle.open span:nth-child(4) {
left: 100%;
opacity: 0
}
.close,
.close:hover {
opacity: 1
}
nav .navbar-toggle.open span:nth-child(5) {
left: 1px;
top: 8px
}
nav .navbar-toggle.open span:nth-child(6) {
left: 8px;
top: 8px
}
.site-wide-banner {
background: green;
width: 100%;
position: fixed;
top: 3.125rem;
padding: .3125rem;
color: #fff;
z-index: 100
}
main {
margin-top: 3.125rem
}
main.with-banner-wide {
margin-top: 7.125rem
}
main.large {
margin-top: 3.125rem
}
main.large .collapsible-header.fixed ,
main.large .scrollable-nav {
top: 5rem
}
main.with-banner {
margin-top: 6.875rem
}
@media screen and (max-width: 767px) {
nav .navbar-toggle {
display: block
}
main.with-nav {
padding-top: 6.75rem!important
}
}
.collapsible-menu {
white-space: nowrap;
padding: 0 1.25rem;
overflow-x: auto
}
.page-nav {
margin-top: 1.25rem
}
.page-nav h2 i {
margin: 0;
position: absolute;
top: .875rem
}
.page-nav .header {
display: none!important
}
@media screen and (max-width: 1024px) {
.page-nav {
margin-top: 0;
padding: 0 .625rem
}
.page-nav .header {
display: inline-block!important
}
}
.page-nav .container.active ul {
max-height: 25rem
}
.page-nav .collapsible-menu {
padding: .625rem 0;
border-bottom: .0625rem solid #333
}
@media screen and (max-width: 1024px) {
.page-nav .collapsible-menu {
max-height: 0;
overflow: hidden;
padding: 0;
border: 0
}
}
.page-nav .collapsible-menu li {
height: 100%;
display: inline-block;
padding: 0 1.25rem;
border-left: .0625rem solid #888
}
@media screen and (max-width: 1024px) {
.page-nav .collapsible-menu li {
display: block;
border: 0;
padding: .625rem
}
}
.page-nav .collapsible-menu li:first-child {
padding-left: 0;
border: 0
}
.page-nav .collapsible-menu li a.active,
.page-nav .collapsible-menu li a:hover {
color: #fff
}
#hero .tagline h1,
.stdHolder h2,
.tagline h1,
footer .slogan {
text-transform: uppercase;
color: #44D62C
}
.page-nav.fixed {
margin-top: 0
}
#hero {
height: 95vh;
min-height:800px;
overflow: hidden;
position: relative
}
#hero #hero-logo {
margin: 0 auto;
}
#hero #hero-logo svg {
max-width: 100%
}
@media screen and (max-width: 1024px) {
.page-nav .collapsible-menu li:first-child {
padding-left: .625rem
}
#hero {
min-height: 0;
height: 70vh
}
#hero #hero-logo {
width: 70%;
margin: 1.25rem
}
}
#hero .tagline {
position: absolute;
bottom: 2vh;
width: 100%
}
#hero .tagline h1,
.tagline h1 {
font-weight: 200;
text-align: center
}
footer {
padding: 3.125rem .625rem
}
@media screen and (max-width: 767px) {
footer {
padding: 1.25rem .625rem
}
footer .slogan {
text-align: left;
padding: 1.25rem 0
}
}
footer .links {
margin: 0 auto;
text-align: center
}
footer .links li {
display: inline-block;
padding: .625rem 0
}
footer .links li a {
border-right: .0625rem solid #333;
vertical-align: top;
padding: 0 .625rem;
display: block;
line-height: 1rem
}
footer .links li a.last-child {
border: 0
}
@media screen and (max-width: 767px) {
footer .links {
text-align: left
}
footer .links li {
display: block
}
footer .links li a {
padding: 0;
border: 0
}
}
footer .divider {
display: none;
height: .0625rem;
background: #2c2c2c;
margin-top: 1.25rem;
margin-bottom: 1.25rem
}
@media screen and (max-width: 767px) {
footer .divider {
margin-left: -.625rem;
margin-right: -.625rem;
display: block
}
}
footer .back-to-top {
display: none
}
.stdHolder h2 {
font-family: Conv_RazerF5Thin, Arial
}
.pdb-20 {
padding-bottom: 1.25rem
}
.regular-text-large {
font-size: 1.125rem;
line-height: 1.75rem;
color: #888
}
.regular-text {
font-size: 1.125em;
line-height: 1.5em
}
.text-white {
color: #fff!important
}
.text-razer-green {
color: #44D62C!important
}
.text-homeheader-gray {
color: #444!important
}
.text-gray8 {
color: #888
}
.text-center,
.text-centered {
text-align: center
}
.text-16 {
font-size: 1rem;
line-height: 1.25rem
}
@media screen and (max-width: 767px) {
footer .back-to-top {
display: block
}
.text-centered {
text-align: left
}
.text-16 {
font-size: 1.125rem;
line-height: 1.375rem
}
}
.no-text-tranform {
text-transform: none!important
}
.merchandising .open-merch,
.secondary,
.text-upper,
.text-uppercase,
article.gallery div.homepage-gallery h1 span {
text-transform: uppercase
}
.text-14 {
font-size: .875rem;
line-height: 1.125rem
}
.text-24 {
font-size: 1.5rem;
line-height: 1.75rem
}
@media screen and (max-width: 767px) {
.text-24 {
font-size: 1.25rem;
line-height: 1.5rem
}
}
.text-12 {
font-size: .75rem;
line-height: 1rem
}
.text-bold {
font-weight: 700
}
.text-light {
font-family: Conv_RazerF5Light, Arial
}
.text-thin {
font-family: Conv_RazerF5Thin, Arial
}
.text-semi-gray {
color: #aaa
}
.h1style {
font-size: 2.25rem;
line-height: 2.25rem
}
@media screen and (max-width: 767px) {
.h1style {
font-size: 1.75rem;
line-height: 1.875rem
}
.mobile-padl30 {
padding-left: 1.875rem!important
}
}
.secondary {
width: 100%;
color: #000;
font-size: 1.5rem;
line-height: 1.5rem;
text-align: center;
font-family: Conv_RazerF5Light, Arial;
padding-bottom: .3125rem
}
@media screen and (max-width: 767px) {
.secondary {
font-size: 1.25rem;
line-height: 1.5rem
}
}
.btn-small {
padding: .3125rem .625rem;
font-size: .75rem;
line-height: 1rem;
vertical-align: middle;
width: auto;
min-width: 0
}
.close {
position: absolute;
right: 10px;
top: 7px;
width: 25px;
height: 25px
}
.close:after,
.close:before {
position: absolute;
left: 15px;
content: ' ';
height: 25px;
width: 2px;
background-color: #333
}
.stdHolder .cta-list li a p::after,
.stdHolder .icon-list li a p::after {
content: " >"
}
.close:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.close:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
i.arrow {
border: solid gray;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
-webkit-transition: .2s ease all;
transition: .2s ease all;
vertical-align: top;
margin-top: 10%
}
i.down {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.icon-container {
padding-right: 1.25rem;
display: inline-block;
position: relative;
line-height: 1.625rem
}
.icon-container i {
position: absolute;
right: 0
}
.bdrgray {
border-right: 1px solid #333
}
@media screen and (max-width: 767px) {
.no-xs {
display: none!important
}
}
.gradientOne {
background-image: -webkit-radial-gradient(45px 45px farthest-corner, #151515 0, #3a3a3a 100%);
background-image: radial-gradient(farthest-corner at 45px 45px, #151515 0, #3a3a3a 100%)
}
.bg-gray {
background-color: #222
}
.img-centered {
margin: 0 auto;
display: block
}
.block {
display: block!important
}
.pads20 {
padding: 1.25rem
}
.padt20 {
padding-top: 1.25rem
}
.padt10 {
padding-top: .625rem
}
.padb10 {
padding-bottom: .625rem
}
.padt30 {
padding-top: 1.875rem
}
.padt50 {
padding-top: 3.125rem
}
.marginl20 {
margin-left: 1.25rem!important
}
.image-fluid {
width: 100%
}
.stdHolder h2.fluid {
padding: .625rem
}
.stdHolder.stacked {
background-color: #000
}
@media screen and (max-width: 767px) {
.hide-small {
display: none!important
}
.show-small {
display: block!important
}
.stdHolder h2.fluid {
padding: 1.25rem .625rem
}
.stdHolder.stacked .regular-text.centered {
text-align: left
}
.stdHolder.stacked h2 {
padding: 0 0 .625rem
}
.stdHolder .textContent {
padding: 1.25rem .625rem
}
}
@media screen and (max-width: 480px) {
.stdHolder .img-lifeStyle {
width: 150%;
max-width: 150%;
margin-left: -50%
}
}
.stdHolder .icon-list {
padding: .625rem 0
}
.stdHolder .icon-list li {
text-align: center;
vertical-align: top;
width: 8.75rem;
display: inline-block;
padding: 0 .3125rem
}
.stdHolder .icon-list li p {
margin: 0 auto
}
.stdHolder .icon-list li a {
display: block;
color: #44D62C
}
.stdHolder .icon-list li a img {
display: block;
margin: 0 auto
}
.stdHolder .icon-list li a p {
padding: .625rem 0;
line-height: 1
}
@media screen and (max-width: 1024px) {
.stdHolder .icon-list {
text-align: center
}
.stdHolder .icon-list li {
width: 7.1875rem
}
.stdHolder .cta-list {
text-align: center
}
}
@media screen and (max-width: 767px) {
.stdHolder .icon-list li {
width: 49%
}
}
.stdHolder .cta-list {
padding: .625rem 0
}
.stdHolder .cta-list li {
vertical-align: top;
padding: 0 .3125rem;
width: 8.125rem;
display: inline-block;
text-align: center
}
.stdHolder .cta-list li a {
display: block;
color: #44D62C
}
.gallery .p-gallery::after,
section.news .highlights::after,
section.touts .highlights::after {
content: "";
clear: both
}
.uspLeftRight {
background-size: cover;
background-repeat: no-repeat
}
.uspLeftRight .container {
position: relative
}
.uspLeftRight .textContent {
margin-top: 20%;
max-width: 33%;
position: absolute;
text-align: left
}
@media screen and (max-width: 1024px) {
.uspLeftRight .textContent {
padding: 1.25rem .625rem;
max-width: 33%
}
}
@media screen and (max-width: 767px) {
.stdHolder .cta-list li {
width: 49%
}
.uspLeftRight {
background-image: none!important;
background-color: #000!important;
min-height: 0!important
}
.uspLeftRight .textContent {
max-width: 100%;
position: relative;
margin: 0
}
}
.uspLeftRight.with-icons .textContent {
max-width: 50%;
margin-top: 10%
}
.uspLeftRight.text-right {
background-position-x: 60% !important;
}
.uspLeftRight.text-right .textContent {
right: 1.25rem
}
.uspLeftRight.text-left {
background-position-x: 40%
}
.uspLeftRight.text-left .textContent {
left: 1.25rem
}
.uspTextCenter {
background-position-x: 60%;
position: relative
}
.uspTextCenter .container {
position: absolute;
width: 100%;
max-width: 100%
}
.uspTextCenter.bottom-text .container {
bottom: 2.5rem
}
.uspTextCenter.top-text .container {
top: 2.5rem
}
@media screen and (max-width: 767px) {
.uspLeftRight.with-icons .textContent {
margin-top: 0;
max-width: 100%
}
.uspLeftRight.text-right .textContent {
right: 0
}
.uspLeftRight.text-left .textContent {
left: 0
}
.uspTextCenter {
background-image: none!important;
background-color: #000!important;
min-height: 0!important
}
.uspTextCenter .container {
position: relative
}
.uspTextCenter.bottom-text .container {
bottom: 0
}
.uspTextCenter.top-text .container {
top: 0
}
}
.uspTextCenter .textContent {
margin: 0 auto;
max-width: 700px;
text-align: center
}
@media screen and (max-width: 767px) {
.uspTextCenter .textContent {
text-align: left;
position: relative;
margin: 0
}
}
.textImageInGrid .textContent {
max-width: 600px;
text-align: center;
margin: 0 auto;
float: none
}
.textImageInGrid .mainImg.bottom {
padding-top: 1.875rem
}
@media screen and (max-width: 767px) {
.textImageInGrid .textContent {
text-align: center;
margin-top: 0
}
.textImageInGrid .mainImg.bottom {
padding-top: 0
}
}
@media screen and (max-width: 480px) {
.textImageInGrid .mainImg {
padding: 0 1.25rem
}
}
.panels {
text-align: center
}
.twoPanel {
padding: 1.25rem 0
}
@media screen and (max-width: 767px) {
.twoPanel {
padding: 1.25rem .625rem
}
}
.twoPanel .textContent {
max-width: 25rem;
margin: 0 auto;
padding-top: 0;
padding-bottom: 1.25rem
}
@media screen and (max-width: 1024px) {
.uspTextCenter .icon-list li {
width: 8.75rem
}
.twoPanel .textContent {
max-width: 21.875rem
}
}
.threePanel {
padding: 1.25rem 0
}
@media screen and (max-width: 767px) {
.threePanel {
padding: 1.25rem .625rem
}
}
.threePanel .textContent {
max-width: 17.5rem;
margin: 0 auto;
padding-top: 0;
padding-bottom: 1.25rem
}
@media screen and (max-width: 1024px) {
.threePanel .textContent {
max-width: 21.875rem
}
}
.fourPanel {
padding: 1.25rem 0
}
@media screen and (max-width: 767px) {
.fourPanel {
padding: 1.25rem .625rem
}
}
.fourPanel .textContent {
max-width: 14.375rem;
margin: 0 auto;
padding-top: 0;
padding-bottom: 1.25rem
}
@media screen and (max-width: 1024px) {
.fourPanel .textContent {
max-width: 21.875rem
}
}
.gallery .p-gallery::after {
display: block
}
.gallery .p-gallery img {
max-width: 25%;
background: #111;
float: left
}
.gallery .p-gallery img:nth-child(1) {
background: #111
}
.gallery .p-gallery img:nth-child(2) {
background: #1a1a1a
}
.gallery .p-gallery img:nth-child(3) {
background: #1d1d1d
}
.gallery .p-gallery img:nth-child(5) {
background: #1a1a1a
}
.gallery .p-gallery img:nth-child(6) {
background: #1d1d1d
}
.gallery .p-gallery img:nth-child(8) {
background: #1a1a1a
}
.gallery .p-gallery .owl-item {
opacity: .8;
-webkit-transition: .4s ease all;
transition: .4s ease all;
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95)
}
.gallery .p-gallery .owl-next,
.gallery .p-gallery .owl-prev {
color: #44D62C;
font-family: Conv_RazerF5Thin, Arial;
border-radius: 50%;
background: #4a4a4a;
opacity: .7;
text-align: center
}
.gallery .p-gallery .owl-nav {
top: 47%;
position: absolute;
width: 100%
}
.gallery .p-gallery .owl-prev {
float: left;
margin-left: .9375rem;
font-size: 3rem;
width: 3rem;
height: 3rem;
line-height: 3rem
}
@media screen and (max-width: 1024px) {
.gallery .p-gallery img {
max-width: 100%
}
.gallery .p-gallery .owl-prev {
font-size: 2.375rem;
line-height: 2.375rem;
width: 2.375rem;
height: 2.375rem
}
}
@media screen and (max-width: 480px) {
.gallery .p-gallery .owl-prev {
font-size: 20px;
line-height: 30px;
width: 25px;
height: 25px
}
.gallery .p-gallery .owl-dots{
display:none !important;
}
}
.gallery .p-gallery .owl-next {
float: right;
margin-right: .9375rem;
font-size: 3rem;
width: 3rem;
height: 3rem;
line-height: 3rem;
vertical-align: middle
}
@media screen and (max-width: 1024px) {
.gallery .p-gallery .owl-next {
font-size: 2.375rem;
line-height: 2.375rem;
width: 2.375rem;
height: 2.375rem
}
}
@media screen and (max-width: 480px) {
.gallery .p-gallery .owl-next {
font-size: 20px;
line-height: 30px;
width: 25px;
height: 25px
}
}
.gallery .p-gallery .active.owl-item {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.awards {
padding: 2.5rem .625rem;
background: #2a2a2a;
text-align: center
}
@media screen and (max-width: 767px) {
.awards {
padding: 1.25rem 0
}
}
.awards .award-holder {
padding: .0625rem;
float: left;
width: 20%;
text-align: center
}
.awards .award-holder img {
vertical-align: middle;
width: 100%
}
@media screen and (max-width: 1024px) {
.awards .award-holder {
width: auto;
float: none
}
}
@media screen and (max-width: 767px) {
.awards .award-holder {
width: auto
}
}
.awards .owl-nav,.awards .owl-dots {
display: none !important;
}
.tech-specs-pns {
background-color: #181818!important;
padding: 1.25rem .625rem;
position: relative;
-webkit-transition: .25s all ease-in-out;
transition: .25s all ease-in-out
}
.tech-specs-pns.expanded .see-more i {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
top: .3125rem
}
.tech-specs-pns .specs-list {
list-style-type: disc;
margin-left: 1.25rem
}
.tech-specs-pns .row {
text-align: left
}
.tech-specs-pns .row.bordered {
padding-bottom: 1.25rem;
border-bottom: .0625rem solid #444;
padding-top: 1.25rem
}
.tech-specs-pns .see-more {
background: #212121;
height: 1.5625rem;
text-align: center;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
cursor: pointer
}
.overlay-video {
position: absolute;
background: #000;
z-index: 100
}
.overlay-video .container {
text-align: center;
min-width: 0;
max-width: 37.5rem;
padding-top: 20vh
}
@media screen and (max-width: 767px) {
.overlay-video .container,
.overlay-video .container iframe {
max-width: 100%;
height: 315px
}
}
.pns-video {
text-align: center
}
.pns-video h2 {
padding: 1.25rem 0
}
.pns-video a {
margin-top: 4%;
display: block
}
.wide-video {
background: #111;
padding: 1.25rem 0 .625rem;
text-align: center
}
.wide-video iframe {
height: 400px;
width: 1024px
}
@media screen and (max-width: 1024px) {
.pns-video a {
margin-top: 10%
}
.wide-video {
padding: 0
}
.wide-video iframe {
width: 100%;
height: 25rem
}
}
.merchandising {
width: 100%;
background: #000;
-webkit-transition: .2s all ease;
transition: .2s all ease;
margin-top: cal-rem(0);
top: 0
}
.merchandising .cta-with-price {
padding: .625rem 0;
text-align: left
}
#usp1,
.merchandising .add-item,
article.gallery div.homepage-gallery .full-width .container,
article.gallery div.homepage-gallery h1 {
text-align: center
}
@media screen and (max-width: 767px) {
.wide-video iframe {
width: 100%;
height: 12.5rem
}
.merchandising .cta-with-price {
padding: 0 .625rem;
margin-top: 0;
height: 2.5rem
}
}
@media screen and (max-width: 1024px) {
.merchandising .cta-with-price {
max-width: 100%;
padding: .625rem
}
.merchandising .cta-with-price ul li {
font-size: .875rem
}
}
@media screen and (max-width: 767px) {
.merchandising .cta-with-price {
max-width: 100%;
padding: 0 .625rem
}
.merchandising .cta-with-price .btn-small,
.merchandising .cta-with-price .open-merch {
margin: .375rem 0 0
}
}
.merchandising .cta-with-price i {
position: absolute;
top: 13px;
margin: 0
}
.merchandising .cta-with-price.active ul {
max-height: 25rem
}
.merchandising .cta-with-price ul {
float: left;
margin: .1875rem 0;
-webkit-transition: .5s all ease;
transition: .5s all ease
}
@media screen and (max-width: 767px) {
.merchandising .cta-with-price ul {
background: #000;
width: 100%;
padding: 0 1.25rem;
margin: .5rem 0 0;
max-height: 0;
overflow: hidden;
position: relative
}
}
.merchandising .cta-with-price ul li {
display: inline-block;
border-right: .0625rem solid #888;
padding: 0 .625rem;
line-height: .875rem
}
@media screen and (max-width: 767px) {
.merchandising .cta-with-price ul li {
line-height: 1.5rem;
display: block;
border: 0;
padding: .3125rem 0
}
}
.merchandising .cta-with-price ul li:first-child {
padding-left: 0
}
.merchandising .cta-with-price ul li:last-child {
padding-right: 0;
border: 0
}
.merchandising .cta-with-price ul li a {
color: #fff;
text-transform:uppercase;
}
.merchandising.fixed {
position: fixed;
top: 3.125rem;
z-index: 100;
border-top: 0
}
.merchandising .starts-info {
display: inline-block;
border-right: 1px solid #fff;
padding: 0 .625rem;
margin-right: .625rem;
line-height: 1rem
}
.merchandising .add-item {
background: #00a200;
width: 1rem;
height: 1rem;
display: inline-block;
border-radius: .625rem;
color: #fff;
line-height: .8125rem;
margin-left: .3125rem
}
#usp4,
#usp5 {
background-size: cover;
min-height: 790px
}
.merchandising .open-merch {
color: #fff
}
.merchandising .merch-image {
display: none
}
.merchandising .merch-image.hidden-xs.shown {
display: block
}
.compare-row {
padding: 1.5625rem 0
}
.compare-row .col-xs-6 {
padding: 0 .625rem 1.25rem;
margin-top: 1.25rem
}
.compare-row .col-xs-6.divider {
border-right: .0625rem solid #3d3d3d
}
.compare-row .col-xs-4 {
padding: 0 .625rem 1.25rem;
margin-top: 1.25rem
}
.compare-row .col-xs-4.divider {
border-right: .0625rem solid #3d3d3d
}
.compare-row .col-xs-3 {
padding: 0 .625rem 1.25rem;
margin-top: 1.25rem
}
.compare-row .col-xs-3.divider {
border-right: .0625rem solid #3d3d3d
}
.compare-row h2 {
padding-bottom: 1.25rem;
border-bottom: .0625rem solid #3d3d3d
}
#hero {
/* background: url(../images/hammerhead-pro-hero.jpg) center no-repeat;
background-size: cover */
}
@media screen and (max-width: 767px) {
.merchandising .merch-image.visible-xs.shown {
display: block
}
#hero {
/* background: url(../images/hammerhead-pro-hero_small.jpg) center no-repeat;
background-size: cover */
}
}
@media screen and (max-width: 1024px) {
#hero {
/* background: url(../images/hammerhead-pro-hero_small.jpg) center no-repeat;
background-size: cover */
}
}
#hero #hero-logo {
max-width: 50%
}
#usp1 {
padding: 2.5rem 1.25rem
}
#usp2 {
background-image: url(../images/hammerhead-pro-u2_large.jpg);
min-height: 650px
}
#usp3 {
background-image: url(../images/hammerhead-pro-u3_large.jpg);
min-height: 720px
}
#usp4 {
background-image: url(../images/hammerhead-pro-u4_large.jpg)
}
#usp5 {
background-image: url(../images/hammerhead/usp5.jpg)
}
#twoPanel {
background: #1b1b1b
}
#fourPanel {
background: #333
}
article.gallery {
height: -webkit-calc(100vh - 200px);
height: calc(100vh - 200px);
background: #fff;
min-height: 540px
}
article.gallery div.homepage-gallery .owl-stage-outer,
article.gallery div.homepage-gallery .owl-stage-outer .owl-stage,
article.gallery div.homepage-gallery .owl-stage-outer .owl-stage .owl-item,
article.gallery div.homepage-gallery .owl-stage-outer .owl-stage .owl-item .item {
height: 100%
}
@media screen and (max-width: 480px) {
#hero #hero-logo {
max-width: 90%;
width: 90%;
margin: 1.25rem
}
article.gallery {
min-height: 80vh
}
}
article.gallery div.homepage-gallery {
height: 100%;
overflow: hidden;
position: relative
}
article.gallery div.homepage-gallery .gallery-item {
opacity: 0;
-webkit-transition: 1s opacity ease;
transition: 1s opacity ease
}
article.gallery div.homepage-gallery .owl-stage-outer .owl-stage .owl-item .gallery-item {
opacity: 1
}
article.gallery div.homepage-gallery .item img {
display: block;
height: auto;
width: auto
}
article.gallery div.homepage-gallery .gallery-slide-wrapper {
height: 100%;
overflow: hidden
}
article.gallery div.homepage-gallery .gallery-slide-wrapper .gallery-item {
display: block;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0
}
article.gallery div.homepage-gallery .gallery-slide-wrapper .gallery-item .gallery-content {
display: block;
height: 100%
}
article.gallery div.homepage-gallery #homepage-gallery-one {
background-image: url(/images/home/1920x700_raiju.jpg);
background-size: cover
}
@media screen and (max-width: 480px) {
article.gallery div.homepage-gallery #homepage-gallery-one {
background-image: url(/images/home/450x580-mobile-raiju.jpg)
}
}
article.gallery div.homepage-gallery #homepage-gallery-two {
background-image: url(/images/home/1920x700_hammerheadbt.jpg);
background-size: cover
}
@media screen and (max-width: 767px) {
article.gallery div.homepage-gallery #homepage-gallery-two {
background-image: url(/images/home/768x930-hammerheadBT.jpg)
}
}
@media screen and (max-width: 480px) {
article.gallery div.homepage-gallery #homepage-gallery-two {
background-image: url(/images/home/450x580-mobile-hammerhead.jpg)
}
}
article.gallery div.homepage-gallery #homepage-gallery-three {
background-image: url(/images/home/1920x700_bladepro.jpg);
background-size: cover
}
@media screen and (max-width: 767px) {
article.gallery div.homepage-gallery #homepage-gallery-three {
background-image: url(/images/home/768x930-bladepro.jpg)
}
}
@media screen and (max-width: 480px) {
article.gallery div.homepage-gallery #homepage-gallery-three {
background-image: url(/images/home/450x580-mobile-bladepro.jpg)
}
}
article.gallery div.homepage-gallery #homepage-gallery-four {
background-image: url(/images/home/1920x700_backpack.jpg);
background-size: cover
}
article.gallery div.homepage-gallery h1 span {
line-height: 1.1;
font-size: 1.25rem;
display: block;
text-align: center
}
article.gallery div.homepage-gallery h1 .bigger {
text-transform: uppercase;
line-height: 1.1;
display: block;
font-size: 4.5rem
}
article.gallery div.homepage-gallery .contained {
height: 100%;
position: relative
}
article.gallery div.homepage-gallery .contained .container {
position: relative;
height: 100%
}
article.gallery div.homepage-gallery .contained .product-logo {
max-width: 20%;
padding: 1.25rem 0
}
article.gallery div.homepage-gallery .contained .product-logo .cls-1,
article.gallery div.homepage-gallery .contained .product-logo svg {
fill: #fff
}
@media screen and (max-width: 767px) {
article.gallery div.homepage-gallery #homepage-gallery-four {
background-image: url(/images/home/768x930-roguebackpack.jpg)
}
article.gallery div.homepage-gallery .contained .product-logo {
max-width: 30%;
padding: 1.25rem 1.25rem 0
}
}
article.gallery div.homepage-gallery .contained .hero {
position: absolute;
width: 100%;
height: 80%;
top: 0
}
@media screen and (max-width: 480px) {
article.gallery div.homepage-gallery #homepage-gallery-four {
background-image: url(/images/home/450x580-mobile-rogue-backpack.jpg)
}
article.gallery div.homepage-gallery .contained .product-logo {
padding: 1.25rem 1.25rem 0
}
article.gallery div.homepage-gallery .contained .product-logo img {
max-width: 30vw
}
article.gallery div.homepage-gallery .contained .hero {
height: 60%;
position: relative
}
}
@media screen and (max-width: 360px) {
article.gallery div.homepage-gallery .contained .product-logo img {
max-width: 30vw
}
article.gallery div.homepage-gallery .contained .hero {
height: 17.5rem
}
}
article.gallery div.homepage-gallery .contained h1 {
position: absolute;
bottom: 10%
}
article.gallery div.homepage-gallery .full-width {
background-size: cover;
background-repeat: no-repeat;
background-position: center
}
article.gallery div.homepage-gallery .full-width .tagline-container {
position: absolute;
width: 100%;
top: 2.5rem;
left: 0
}
article.gallery div.homepage-gallery .full-width h1 {
max-width: 60%;
margin: 0 auto;
padding-top: 4.375rem
}
article.gallery div.homepage-gallery .full-width h1 span {
font-family: Conv_RazerF5SemiBold, Arial;
font-size: 1.125rem;
line-height: 1.5
}
article.gallery div.homepage-gallery .full-width h1 span.bigger {
font-family: Conv_RazerF5Light, Arial;
font-size: 2.5rem;
text-transform: none;
color: #999;
line-height: 1
}
article.gallery div.homepage-gallery .full-width h1 span.arrow {
display: inline-block;
color: #44D62C
}
article.gallery div.homepage-gallery .full-width h1 span.title {
margin-top: .625rem
}
article.gallery div.homepage-gallery .full-width .cta {
padding: .5rem 1.25rem;
display: inline-block;
border: 1px solid #44D62C;
color: #44D62C;
margin-top: 1.25rem;
border-radius: .125rem;
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .0625rem
}
@media screen and (max-width: 767px) {
article.gallery div.homepage-gallery .contained h1 {
bottom: 15%
}
article.gallery div.homepage-gallery .full-width h1 {
max-width: 90%;
margin: 0 auto;
padding-top: 3.125rem
}
article.gallery div.homepage-gallery .full-width h1 span {
font-family: Conv_RazerF5SemiBold, Arial;
font-size: 1rem;
line-height: 1.5
}
article.gallery div.homepage-gallery .full-width h1 span.bigger {
font-family: Conv_RazerF5Light, Arial;
font-size: 1.375rem;
text-transform: none;
color: #999;
line-height: 1.2;
letter-spacing: 0;
width: 17.5rem;
margin: 0 auto
}
article.gallery div.homepage-gallery .full-width .cta {
margin-top: 1.25rem
}
}
article.gallery div.homepage-gallery .full-width-text-left .container {
text-align: left;
position: relative;
height: 100%
}
article.gallery div.homepage-gallery .full-width-text-left .container .content-holder {
position: absolute;
top: 30%
}
article.gallery div.homepage-gallery .full-width-text-left h1 {
max-width: 60%;
text-align: left;
padding-top: 3.75rem
}
article.gallery div.homepage-gallery .full-width-text-left h1 span {
font-family: Conv_RazerF5SemiBold, Arial;
font-size: 1.125rem;
line-height: 1.5;
text-align: left
}
article.gallery div.homepage-gallery .full-width-text-left h1 span.bigger {
font-family: Conv_RazerF5Light, Arial;
font-size: 2.5rem;
text-transform: none;
color: #999;
line-height: 1
}
article.gallery div.homepage-gallery .full-width-text-left .cta {
padding: .5rem .625rem;
display: inline-block;
border: 1px solid #44D62C;
color: #44D62C;
margin-top: 1.25rem;
border-radius: .125rem;
text-transform: uppercase;
font-size: .875rem
}
@media screen and (max-width: 767px) {
article.gallery div.homepage-gallery .full-width-text-left .container {
text-align: center;
position: relative;
height: 100%
}
article.gallery div.homepage-gallery .full-width-text-left .container .content-holder {
position: relative;
top: 0;
width:100%
}
article.gallery div.homepage-gallery .full-width-text-left h1 {
max-width: 90%;
margin: 0 auto;
padding-top: 3.125rem;
text-align: center
}
article.gallery div.homepage-gallery .full-width-text-left h1 span {
font-family: Conv_RazerF5SemiBold, Arial;
text-align: center;
font-size: 1rem;
line-height: 1.5
}
article.gallery div.homepage-gallery .full-width-text-left h1 span.bigger {
font-family: Conv_RazerF5Light, Arial;
font-size: 1.375rem;
text-transform: none;
color: #999;
line-height: 1.2;
letter-spacing: 0;
width: 17.5rem;
margin: 0 auto
}
article.gallery div.homepage-gallery .full-width-text-left h1 span.arrow {
display: inline-block;
color: #44D62C
}
article.gallery div.homepage-gallery .full-width-text-left h1 span.title {
margin-top: .625rem
}
article.gallery div.homepage-gallery .full-width-text-left .cta {
margin-top: 1.25rem
}
}
@media screen and (max-width: 1024px) {
article.gallery div.homepage-gallery .full-width-text-left {
background-position-x: 52%
}
article.gallery div.homepage-gallery .full-width-text-right {
background-position-x: 40%
}
}
@media screen and (max-width: 480px) {
article.gallery div.homepage-gallery .full-width-text-right {
background-position-x: 0
}
}
article.gallery div.homepage-gallery .full-width-text-right .container {
text-align: left;
position: relative;
height: 100%
}
article.gallery div.homepage-gallery .full-width-text-right .container .content-holder {
position: absolute;
top: 30%;
right: 0;
left: 58%
}
article.gallery div.homepage-gallery .full-width-text-right h1 {
text-align: left;
padding-top: 3.75rem
}
article.gallery div.homepage-gallery .full-width-text-right h1 span {
font-family: Conv_RazerF5SemiBold, Arial;
font-size: 1.125rem;
line-height: 1.5;
text-align: left
}
article.gallery div.homepage-gallery .full-width-text-right h1 span.bigger {
font-family: Conv_RazerF5Light, Arial;
font-size: 2.5rem;
text-transform: none;
color: #999;
line-height: 1
}
article.gallery div.homepage-gallery .full-width-text-right h1 span.arrow {
display: inline-block;
color: #44D62C
}
article.gallery div.homepage-gallery .full-width-text-right h1 span.title {
margin-top: .625rem
}
article.gallery div.homepage-gallery .full-width-text-right .cta {
padding: .5rem .625rem;
display: inline-block;
border: 1px solid #44D62C;
color: #44D62C;
margin-top: 1.25rem;
border-radius: .125rem;
text-transform: uppercase;
font-size: .875rem
}
@media screen and (max-width: 767px) {
article.gallery div.homepage-gallery .full-width-text-right .container {
text-align: center;
position: relative;
height: 100%
}
article.gallery div.homepage-gallery .full-width-text-right .container .content-holder {
position: relative;
top: 0;
right: 0;
left: 0
}
article.gallery div.homepage-gallery .full-width-text-right h1 {
max-width: 90%;
margin: 0 auto;
padding-top: 2.5rem
}
article.gallery div.homepage-gallery .full-width-text-right h1 span {
font-family: Conv_RazerF5SemiBold, Arial;
font-size: 1rem;
line-height: 1.5;
text-align: center
}
article.gallery div.homepage-gallery .full-width-text-right h1 span.bigger {
font-family: Conv_RazerF5Light, Arial;
font-size: 1.375rem;
text-transform: none;
color: #999;
line-height: 1.2;
letter-spacing: 0;
width: 17.5rem;
margin: 0 auto
}
article.gallery div.homepage-gallery .full-width-text-right .cta {
margin-top: 1.25rem
}
}
article.gallery .owl-dots {
margin-top: -2.5rem;
text-align: center;
background: #000
}
article.gallery .owl-dot span {
display: inline-block;
width: 1.875em;
height: .3125em;
margin: .3125em .1875em;
opacity: .8;
border-radius: 20px;
background: #869791
}
article.gallery .owl-dot.active span {
background: #44D62C !important;
}
article.gallery .owl-carousel .owl-dot {
display: inline-block
}
section.touts .highlights {
background-color: #222
}
section.touts .highlights::after {
display: block
}
@media screen and (max-width: 767px) {
section.touts .highlights {
padding: .625rem;
margin: 0
}
}
section.touts .highlights .single {
width: 25%;
display: inline-block;
margin: 0;
height: 18.75rem;
float: left;
padding: .15625em
}
@media screen and (max-width: 1024px) {
section.touts .highlights .single {
width: 50%
}
}
@media screen and (max-width: 767px) {
section.touts .highlights .single {
width: 100%;
padding: .625em 0 0;
height: auto
}
section.touts .highlights .single:first-child {
padding-top: 0
}
}
section.touts .highlights .single .tout {
width: 100%;
min-height: 12.5rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center
}
section.touts .highlights .single .text {
padding: .625rem;
background: #111
}
section.about .about-container,
section.news .highlights #news-1,
section.news .highlights #news-2 {
background-repeat: no-repeat;
background-position: center
}
section.touts .highlights .single .text .regular-text {
text-align: center;
color: #999;
max-width: 17.5rem;
margin: 0 auto
}
section.touts .highlights .single .text .cta {
text-align: center;
display: inline-block;
color: #44D62C
}
section.touts .highlights .single .text .cta span {
color: #44D62C
}
section.touts .highlights .single #tout-1 {
background-image: url(/images/home/tout/768x200-manowar.jpg)
}
section.touts .highlights .single #tout-2 {
background-image: url(/images/home/tout/768x200-kb.jpg)
}
section.touts .highlights .single #tout-3 {
background-image: url(/images/home/tout/768x200-zvault.jpg)
}
section.touts .highlights .single #tout-4 {
background-image: url(/images/home/tout/768x200-esport.jpg)
}
section.about .header {
background-color: #1e1e1e;
padding: .625rem 0
}
section.about h2 {
font-size: 1rem;
text-transform: uppercase;
font-family: Conv_RazerF5Bold, Arial;
color: #888;
padding: .625rem
}
section.about .about-container {
height: 15.625rem;
background-image: url(/images/home/about-bg.jpg);
background-size: cover;
position: relative;
color: #fff
}
@media screen and (max-width: 767px) {
section.about .about-container {
padding: 1.25rem .625rem
}
}
section.about .about-container .info-content {
padding: .625rem
}
section.about .about-container .info-content h3 {
font-size: 1rem;
text-transform: uppercase;
color: #44D62C
}
section.news {
background-color: #111;
padding: 1.25rem 0
}
section.news .highlights .single {
width: 25%;
padding: .15625rem;
display: inline-block;
vertical-align: top;
float: left
}
@media screen and (max-width: 1024px) {
section.news .highlights .single {
width: 50%
}
}
section.news .highlights .single figure {
height: 200px;
background-size: cover
}
section.news .highlights .single aside {
height: 12.5rem;
background-color: #222;
padding: .625rem
}
section.news .highlights .single aside h3 {
margin: 0 0 1.25rem
}
section.news .highlights .single aside .details {
max-height: 6.25rem;
min-height: 6.25rem;
text-overflow: ellipsis;
overflow: hidden
}
section.news .highlights::after {
display: block
}
section.news .highlights #news-1 {
background-image: url(../images/home/news-1.jpg)
}
section.news .highlights #news-2 {
background-image: url(../images/home/news-2.jpg)
}
main.with-nav {
padding-top: 3.125rem;
background: #222
}
.scrollable-nav {
background: #111;
-webkit-transition: .2s all ease;
transition: .2s all ease;
position: fixed;
width: 100%;
text-align: center;
z-index: 100;
top: 50px
}
.scrollable-nav ul li a {
display: block
}
.scrollable-nav ul li a:hover {
color: #888
}
.scrollable-nav ul li a.active {
color: #44D62C
}
.scrollable-nav .owl-nav {
display: none
}
.collapsible-header a,
.collapsible-header a h1,
.collapsible-header p.header {
display: inline-block
}
@media screen and (max-width: 767px) {
section.news .highlights .single {
width: 100%
}
section.news .highlights .single aside {
height: auto
}
section.news .highlights .single aside .details {
max-height: inherit;
min-height: 0
}
.collapsible-header.merchandising .cta-with-price ul li {
width: 100%;
padding: .625rem 0
}
}
.collapsible-header p.header span {
padding-right: 1.25rem;
display: inline-block;
line-height: 2.5rem;
letter-spacing: .0625rem;
text-transform: uppercase;
font-size: .875rem;
color: #999
}
.collapsible-header p.header.active i {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg)
}
.collapsible-header a ul li {
padding: .625rem 0;
background: #000
}
@media screen and (max-width: 767px) {
.collapsible-header a ul {
max-height: 0;
overflow: hidden;
position: absolute;
-webkit-transition: 50ms all ease;
transition: 50ms all ease;
width: 100%;
z-index: 100;
color: #fff
}
.collapsible-header a ul li {
width: 100%;
padding: .625rem 0
}
}
.collapsible-header a h1 {
position: relative;
padding: 1.25rem
}
.collapsible-header a h1 i {
position: absolute;
top: 0;
right: 0;
-webkit-transition: .1s all ease;
transition: .1s all ease
}
.collapsible-header a.active h1 i {
position: absolute;
top: 32px;
right: 0;
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg)
}
.collapsible-header a.active p i {
-webkit-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg)
}
.collapsible-header.fixed {
position: fixed;
top: 3.125rem;
z-index: 100;
border-top: 0;
background: #000;
width: 100%
}
@media screen and (max-width: 767px) {
.collapsible-header a.active ul {
max-height: 25rem;
padding: 0 20px 20px;
border-bottom: 1px solid #333;
background: #000
}
.collapsible-header.fixed .cta-with-price ul {
position: absolute;
top: 2rem;
left: 0
}
.categorised-content p.header {
font-size: 1.125rem;
line-height: 1.375rem
}
}
.categorised-content {
background: #222
}
.categorised-content .all-content .black,
.categorised-content.categorised-old {
background: #000
}
.categorised-content p.header {
color: #fff;
font-size: 1.125rem;
line-height: 1.375rem
}
@media screen and (max-width: 767px) {
.categorised-content .container {
padding: 0 .625rem
}
}
.categorised-content .all-content .col-sm-12 {
text-align: center
}
.categorised-content .all-content .text {
padding-bottom: 1.25rem
}
.categorised-content .all-content .col-sm-8 {
padding: 1.25rem 0 1.25rem .625rem
}
@media screen and (max-width: 767px) {
.categorised-content .all-content .col-xs-12 {
padding: .625rem
}
.categorised-content .all-content h2 {
font-size: 1.5rem;
line-height: 1.75rem
}
}
.categorised-content .all-content h2 {
font-size: 1.5rem;
line-height: 1.75rem;
text-transform: uppercase;
letter-spacing: .0625rem;
padding-top: 1.25rem
}
.categorised-content .all-content ul {
list-style: disc;
margin-left: 1rem
}
.categorised-content .all-content .row {
border-bottom: .0625rem solid #44D62C;
padding: 0;
margin-bottom: .625rem;
background: #111
}
.categorised-content .individual-item {
background: #000;
padding: 1.25rem;
margin: 1.25rem;
border-radius: .1875rem
}
.categorised-content .information {
padding: 2.5rem 0;
min-height: 7.5rem
}
.categorised-content .usps li {
text-align: left;
padding: .625rem 0;
border-top: 1px solid #333
}
.categorised-content .usps li.five-g {
background: url(/images/wired/i1.jpg) right no-repeat
}
.categorised-content .usps li.scroll-wheel {
background: url(/images/wired/i2.jpg) right no-repeat
}
.categorised-content .usps li.chroma {
background: url(/images/wired/i3.jpg) right no-repeat
}
.categorised-content .usps li:last-child {
border-bottom: 1px solid #333
}
.categorised-content a.btn {
margin-top: 1.25rem
}
.bw-family #usp1 {
background: url(/images/family/bw1.jpg) no-repeat;
position: relative;
padding-top: 7.5rem
}
@media screen and (max-width: 767px) {
.categorised-content .all-content ul {
display: none
}
.bw-family #usp1 {
padding-top: 0
}
}
.bw-family #usp1 .textContent.nonImage {
margin-top: 4%;
text-align: center
}
.bw-family #usp1 .textContent.nonImage .video {
margin-top: 1.25rem;
display: block
}
.bw-family #usp2 {
background: url(/images/family/bw2.jpg) no-repeat
}
.bw-family #usp2 .logo {
margin: 1.25rem 0
}
.bw-family #usp2 .textContent.nonImage {
margin-top: 43%
}
.bw-family .categorised-content .logo {
max-width: 40%
}
@media screen and (max-width: 767px) {
.bw-family #usp2 .textContent.nonImage {
margin-top: 0;
text-align: center;
padding: 0
}
.bw-family #usp2 .textContent.nonImage h2 {
padding: 0
}
.bw-family #usp2 .container {
text-align: center
}
.bw-family .categorised-content .logo {
max-width: 80%
}
}
.bw-family #usp3 {
background: url(/images/family/bwx1.jpg) no-repeat
}
.bw-family #usp3 .logo {
margin: 1.25rem 0
}
.bw-family #usp3 .textContent.nonImage {
margin-top: 43%
}
.bw-family #usp4 {
background: url(/images/family/ks-1.jpg) no-repeat
}
@media screen and (max-width: 767px) {
.bw-family #usp3 .textContent.nonImage {
margin-top: 0;
text-align: center;
padding: 0
}
.bw-family #usp3 .textContent.nonImage h2 {
padding: 0
}
.bw-family #usp3 .container {
text-align: center
}
.bw-family #usp4 {
background: url(/images/family/ks-4-small.jpg) no-repeat
}
}
.bw-family #usp4 .textContent.nonImage {
margin-top: 10%
}
.bw-family #usp5 {
background: #171717;
text-align: center;
padding: 2.5rem
}
.bw-family #usp6 {
background: url(/images/family/ks-3.jpg) no-repeat;
text-align: center;
min-height: 510px
}
.bw-family #usp6 .textContent.nonImage {
margin-top: 5%
}
@media screen and (min-width: 767px) {
.scrollable-nav .owl-carousel .owl-item {
width: 120px!important
}
}
.scrollable-nav .owl-carousel .owl-item li {
padding: .625rem 1.25rem
}
.scrollable-nav ul li {
display: inline-block;
font-family: Conv_RazerF5, Arial;
font-size: 1rem;
padding: .625rem;
text-transform: capitalize
}
.scrollable-nav ul li a .nav-icon {
display: block;
text-indent: -9999px;
width: 33px;
height: 33px;
background-size: 33px 33px;
margin: 0 auto .1875rem
}
.scrollable-nav ul li a .nav-icon.icon-keypads,
.scrollable-nav ul li a .nav-icon.icon-mecha-membrane,
.scrollable-nav ul li a .nav-icon.icon-mechanical,
.scrollable-nav ul li a .nav-icon.icon-membrane {
background: url(/images/icons/software_gray.svg) center top no-repeat
}
.scrollable-nav ul li a.active .nav-icon.icon-keypads,
.scrollable-nav ul li a.active .nav-icon.icon-mecha-membrane,
.scrollable-nav ul li a.active .nav-icon.icon-mechanical,
.scrollable-nav ul li a.active .nav-icon.icon-membrane {
background: url(/images/icons/software.svg) center top no-repeat
}
.categorised-content .categorised-content-latest {
background: #111;
border-bottom: 1px solid #44D62C;
height: 700px;
max-height: 700px;
margin-bottom: .3125rem;
position: relative;
background-position: center bottom;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.categorised-content .container {
padding: 0
}
.categorised-content .categorised-content-latest {
height: 530px;
max-height: 530px;
background-size: cover!important
}
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest {
background: #111;
height: 480px;
background-size: cover
}
}
@media screen and (max-width: 360px) {
.categorised-content .categorised-content-latest {
background: #111;
height: 360px;
background-size: cover!important
}
}
.categorised-content .categorised-content-latest .content {
max-width: 980px;
margin: 0 auto;
height: 100%;
position: relative
}
.categorised-content .categorised-content-latest .content h2 {
font-family: Conv_RazerF5Light, Arial;
font-size: 1.75rem;
text-transform: none;
padding: 4.0625rem 0 0;
width: 100%;
line-height: 1.75rem;
color: #fff
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest .content h2 {
width: 17.6875rem;
margin: 0 auto;
padding: 2.5rem 0 0
}
}
@media screen and (max-width: 360px) {
.categorised-content .categorised-content-latest .content h2 {
padding: 1.25rem 0 0
}
}
.categorised-content .categorised-content-latest .content .regular-text {
width: 100%;
font-size: 1.125rem;
line-height: 1.125rem;
padding: .4375rem 0 1.25rem;
font-family: Roboto, Arial;
font-weight: 300;
font-style: normal
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest .content .regular-text {
width: 17.6875rem;
margin: 0 auto
}
}
.categorised-content .categorised-content-latest .content .cta {
width: 100%
}
.categorised-content .categorised-content-latest .content .cta a {
color: #44D62C;
padding-right: 1rem
}
.categorised-content .categorised-content-latest .content .cta a:last-of-type {
padding-right: 0
}
.categorised-content .categorised-content-latest .content .cta a:after,
.categorised-content .categorised-content-latest .content .cta span:after,
.categorised-content .categorised-content-listing-item .cta a:after
{
content: '>';
padding-left: .3em
}
.categorised-content .categorised-content-latest .content .logo-left {
position: absolute;
bottom: 1.875rem;
left: 0
}
.categorised-content .categorised-content-latest .content .logo-right {
position: absolute;
bottom: 1.875rem;
right: 0
}
@media screen and (max-width: 1024px) {
.categorised-content .categorised-content-latest .content .logo-left {
padding-left: .625rem
}
.categorised-content .categorised-content-latest .content .logo-right {
padding-right: .625rem
}
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest .content .cta {
width: 17.6875rem;
margin: 0 auto
}
.categorised-content .categorised-content-latest .content .logo-left,
.categorised-content .categorised-content-latest .content .logo-right {
/* display: none */
max-width: 15%;
}
}
.categorised-content .categorised-content-listing:after,
.categorised-content .column-2:after {
content: '';
clear: both;
display: block;
visibility: none
}
.categorised-content .categorised-content-latest.text-white h2,
.categorised-content .categorised-content-latest.text-white p {
color: #FFF
}
.categorised-content .categorised-content-latest.text-gray8 h2,
.categorised-content .categorised-content-latest.text-gray8 p {
color: #888
}
.categorised-content .column-2 {
position: relative;
padding-top: .8125rem;
padding-bottom: .8125rem
}
@media screen and (max-width: 768px) {
.categorised-content .column-2 {
width: 500px;
margin: 0 auto
}
}
@media screen and (max-width: 480px) {
.categorised-content .column-2 {
width: inherit;
margin: 0 auto
}
.categorised-content .column-2.container {
padding: 0
}
}
@media screen and (max-width: 360px) {
.categorised-content .column-2 {
width: 100%;
margin: 0 auto
}
}
@media screen and (max-width: 320px) {
.categorised-content .column-2 {
width: 320px;
margin: 0 auto
}
}
.categorised-content .column-2 .categorised-content-latest {
float: left;
width: 480px;
height: 587px;
max-height: 587px;
margin-right: 1.25rem
}
.categorised-content .column-2 .categorised-content-latest:last-of-type {
margin-right: 0
}
@media screen and (max-width: 768px) {
.categorised-content .column-2 .categorised-content-latest {
float: none;
margin: .8125rem auto!important
}
}
@media screen and (max-width: 480px) {
.categorised-content .column-2 .categorised-content-latest {
float: none;
margin: .8125rem auto!important;
width: 320px;
height: 372px;
max-height: 372px
}
}
@media screen and (max-width: 360px) {
.categorised-content .column-2 .categorised-content-latest {
width: 100%
}
}
@media screen and (max-width: 320px) {
.categorised-content .column-2 .categorised-content-latest {
width: 320px
}
}
.categorised-content .column-2 .categorised-content-latest .logo-left {
padding-left: .625rem
}
.categorised-content .categorised-content-listing {
background: #222;
padding: 0 0 2.5rem;
width: 100%;
max-width: 980px;
margin: 0 auto
}
@media screen and (max-width: 640px) {
.categorised-content .categorised-content-listing {
width: 100%;
max-width: 100%
}
}
@media screen and (max-width: 768px) {
.categorised-content .categorised-content-listing {
width: 640px;
margin: 0 auto
}
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-listing {
width: 320px;
margin: 0 auto
}
}
/* .categorised-content .categorised-content-listing.carousel-content .owl-dots {
height: 1.25rem;
text-align: center
}
.categorised-content .categorised-content-listing.carousel-content .owl-dots .owl-dot {
height: .0625rem;
width: 1.875rem;
margin-top: .625rem;
background: #444;
display: inline-block;
margin-right: .625rem
}
.categorised-content .categorised-content-listing.carousel-content .owl-dots .owl-dot.active {
background: #0f0
}
.categorised-content .categorised-content-listing.carousel-content .owl-dots .owl-dot:after {
margin-right: 0
} */
.categorised-content .categorised-content-listing .categorised-content-listing-item {
float: left;
width: 300px;
height: 410px;
margin: 2.1875rem 1.25rem 0 0
}
@media screen and (max-width: 640px) {
.categorised-content .categorised-content-listing .categorised-content-listing-item {
float: none;
margin: 2.1875rem auto 0;
height: 445px;
}
}
@media screen and (max-width: 360px) {
.categorised-content .categorised-content-listing .categorised-content-listing-item {
float: none;
margin: .625rem auto 0;
width: 100%
}
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-image {
height: 300px;
background: #000;
position: relative
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-image img.logo-right {
width: initial;
position: absolute;
bottom: 1.25rem;
padding: 0 1.875rem;
right: 0
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-image img.logo-left {
width: initial;
position: absolute;
bottom: 1.25rem;
padding: 0 1.875rem;
left: 0
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-info {
background: #111;
height: 145px;
position: relative;
padding: .625rem 1.125rem;
border-bottom: 1px solid #44D62C
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-info h2 {
padding-top: .212rem;
font-size: 1.125rem;
line-height: 1.5rem;
text-transform: none;
color: #fff
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-info p {
font-size: .75rem;
line-height: 1rem;
font-weight: 400;
padding: 0.5rem 0;
color: #888;
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-info .cta {
position: absolute;
bottom: .75rem
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-info .cta a {
font-size: .75rem;
color: #44D62C;
padding: 0 .625rem;
border-right: 1px solid #888;
line-height: 0
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-info .cta a:first-of-type {
padding-left: 0
}
.categorised-content .categorised-content-listing .categorised-content-listing-item .categorised-content-listing-item-info .cta a:last-of-type {
border-right: none;
padding-right: 0
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-listing.carousel-content {
margin: 0 auto;
width: 100%
}
}
.categorised-content .categorised-content-listing.carousel-content .owl-stage {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box
}
.categorised-content .categorised-content-listing.carousel-content .owl-item img {
width: initial
}
.categorised-content .categorised-content-listing.carousel-content .owl-dots {
height: 1.25rem;
text-align: center
}
.categorised-content .categorised-content-listing.carousel-content .owl-dots .owl-dot {
height: .0625rem;
width: 1.875rem;
background: #444;
display: inline-block;
max-width: 20px;
margin: 0 .125rem
}
.categorised-content .categorised-content-listing.carousel-content .owl-dots .owl-dot.active {
background: #0f0
}
.categorised-content .categorised-content-listing.carousel-content .owl-dots .owl-dot:after {
margin-right: 0
}
@media screen and (max-width: 360px) {
.categorised-content .categorised-content-listing.carousel-content .categorised-content-listing-item {
float: none;
margin: .625rem auto 0;
width: 300px
}
}
.categorised-content .categorised-content-ads {
background: #222;
margin: 0 auto .3125rem
}
.categorised-content .categorised-content-ads a {
text-align: center
}
.categorised-content .categorised-content-ads a img {
display: block;
margin: 0 auto
}
.categorised-content .categorised-content-ads .show-ads-small {
display: none
}
.categorised-content .categorised-content-latest#blackwidow-chroma-v2 {
background: url(/images/keyboards/blackwidow-chroma-v2-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-ads a img {
display: none;
margin: .625rem auto
}
.categorised-content .categorised-content-ads .show-ads-small {
display: block;
margin: 0 auto;
padding: .625rem 0
}
.categorised-content .categorised-content-latest#blackwidow-chroma-v2 {
background: url(/images/keyboards/blackwidow-chroma-v2.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#blackwidow-chroma-v2-2 {
background: url(/images/keyboards/blackwidow-chroma-v2-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#blackwidow-chroma-v2-2 {
background: url(/images/keyboards/blackwidow-chroma-v2.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#ornata-chroma {
background: url(/images/keyboards/ornata-chroma-large.jpg) center bottom no-repeat #111;
background-size: cover
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#ornata-chroma {
background: url(/images/keyboards/ornata-chroma.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#ornata {
background: url(/images/keyboards/ornata-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#ornata {
background: url(/images/keyboards/ornata-large.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#orbweaver-chroma {
background: url(/images/keyboards/orbweaver-chroma-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#orbweaver-chroma {
background: url(/images/keyboards/orbweaver-chroma.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#tartarus-chroma {
background: url(/images/keyboards/tartarus-chroma-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#tartarus-chroma {
background: url(/images/keyboards/tartarus-chroma.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#turret {
background: url(/images/keyboards/turret-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#turret {
background: url(/images/keyboards/turret.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#mehanical-keyboard-case {
background: url(/images/keyboards/mehanical-keyboard-case-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#mehanical-keyboard-case {
background: url(/images/keyboards/mehanical-keyboard-case.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#test-1 {
background: url(/images/keyboards/mehanical-keyboard-case-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#test-1 {
background: url(/images/keyboards/test01.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#test-2 {
background: url(/images/keyboards/mehanical-keyboard-case-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#test-2 {
background: url(/images/keyboards/test02.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#test-3 {
background: url(/images/keyboards/mehanical-keyboard-case-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#test-3 {
background: url(/images/keyboards/test03.jpg) center bottom no-repeat #000
}
}
.categorised-content .categorised-content-latest#test-4 {
background: url(/images/keyboards/mehanical-keyboard-case-large.jpg) center bottom no-repeat #111
}
@media screen and (max-width: 480px) {
.categorised-content .categorised-content-latest#test-4 {
background: url(/images/keyboards/test04.jpg) center bottom no-repeat #000
}
}
/**
*
*Born FED CSS
*
**/
body {
/* font-family: Conv_RazerF5,Sans-Serif; */
}
nav .language span.sprite {
margin-right: 6px;
margin-top: 5px;
}
nav .language span.sprite + span{
text-transform: uppercase;
}
/* nav .icon-holder ul li {
font-family: Conv_RazerF5Light, Arial;
} */
nav .search-container {
position: relative;
z-index: 99;
}
nav .menu.level-one li a span {
display: block;
}
nav.large .wordmark figure.one img {
height: 3.75rem;
}
main.large .collapsible-header.fixed{
top:3.125rem;
}
#login-dropdown{
top:50px !important;
right:25px !important;
}
main.large .scrollable-nav{
top:3.125rem;
}
nav .menu.level-one li a.active {
color: #FFF;
}
nav .menu.level-one li a.community{
color: #888;
}
nav .menu.level-one li a.community.active,
nav .menu.level-one li a.community:hover{
color: #FFF;
}
.master-main{
z-index:104;
}
.sec-nav .sprite.ie.phi{background-position: -108px -372px;}
.sec-nav .sprite.ie.thai{background-position: -108px -407px;}
nav .language span.sprite.ie{ vertical-align:text-top; background-position: 0 -2px; margin-right:5px;}
nav .language span.sprite.us-en{background-position: 0 -2px; }
nav .language span.sprite.au-en {background-position: -108px 0; vertical-align: text-top;}
nav .language span.sprite.sg-en {background-position: -108px -171px;}
nav .language span.sprite.hk-en {background-position: -108px -238px;}
nav .language span.sprite.ca-en{background-position: 0px -35px;}
nav .language span.sprite.be-en{background-position: -36px -2px; vertical-align: text-top;}
nav .language span.sprite.dk-en {background-position: -36px -138px;}
nav .language span.sprite.fi-en{background-position: -36px -272px;}
nav .language span.sprite.fr-fr {background-position: -36px -306px;}
nav .language span.sprite.ie-en {background-position: -36px -408px;}
nav .language span.sprite.gb-en {background-position: -72px -442px;}
nav .language span.sprite.se-en {background-position: -72px -374px;}
nav .language span.sprite.lu-en {background-position: -72px -36px;}
nav .language span.sprite.nl-en {background-position: -72px -103px;}
nav .language span.sprite.no-en {background-position: -72px -138px;}
nav .language span.sprite.pl-en {background-position: -72px -204px;}
nav .language span.sprite.pt-en {background-position: -72px -238px;}
nav .language span.sprite.se-en {background-position: -72px -374px;}
nav .language span.sprite.at-en {background-position: -74px -171px;}
nav .language span.sprite.de-de {background-position: -36px -171px;}
nav .language span.sprite.hk-zh {background-position: -108px -239px;}
nav .language span.sprite.eu-en {background-position: -108px -340px;}
nav .language span.sprite.phi-en {background-position: -108px -372px;}
nav .language span.sprite.thai-en {background-position: -108px -407px;}
@media (max-width: 767px) {
body.large #login-dropdown{
top:80px !important;
}
.menu.level-one.open {
display: block !important;
}
nav .menu.level-one li a.active span figure:first-child {
display:none;
}
nav .menu.level-one li a.active span figure:last-child {
display:block;
}
nav .menu.level-one li a span figure:first-child {
display:block;
}
nav .menu.level-one li a span figure:last-child {
display:none;
}
main.large .collapsible-header.fixed{
top: 5rem;
z-index:102;
}
/* nav.open{
z-index: 9999;
} */
.merchandising .merch-image.hidden-xs.shown {
display: block !important;
overflow-y: auto;
height: 100vh;
}
.product-sec2.fixed{
top:5rem;
}
main.large .product-sec2.fixed{
top: 7.500rem;
}
nav.large .bag-links{
top: 5rem;
}
.scrollable-nav{
top:3.125rem;
transition: .3s all ease-in-out;
z-index: 104;
}
.master-main{
height: 100vh;
overflow-y: auto;
z-index: 106;
top: 0;
}
main.large .scrollable-nav{
top:5rem;
}
#login-dropdown{
right:0 !important;
}
#minicart{
display: block !important;
}
nav .account-mobile .menu-icon{
width: 18px;
height: 18px;
vertical-align: text-top;
}
nav .language span.sprite{
margin-top: -1px;
}
nav .account-mobile .menu-link span{
vertical-align: bottom;
}
nav .menu.level-one li a.active,
nav .menu.level-one li a.community.active{
color: #44D62C;
}
nav .language span.sprite.ie{
vertical-align: middle;
}
nav .account-mobile span.text-uppercase {
font-family: Conv_RazerF5Light, Arial;
font-size: .9375rem;
}
.global-alerts .alert-dismissable{
margin: 30px 0 10px 0;
}
.bx-wrapper .bx-controls-direction a {
z-index:99 !important;
}
}
@media screen and (max-width: 480px) {
.gallery .p-gallery .owl-nav{
top: 50%;
transform: translateY(-50%);
}
.gallery .p-gallery .owl-prev, .gallery .p-gallery .owl-next {
font-size: 20px !important;
line-height: 30px !important;
width: 25px !important;
height: 25px !important;
background: #4a4a4a !important;
color: #44D62C !important;
border-radius: 50% !important;
padding: 0 !important;
}
.categorised-content .categorised-content-listing .owl-dots .owl-dot span{
display: none;
}
}
@media screen and (min-width: 768px) {
article.gallery .owl-dot.active span ,
article.gallery .owl-dot:hover span {
width: 1.875em !important;
height: .3125em !important;
margin: .3125em .1875em !important;
background: #0f0 !important;
}
nav .language span.sprite + span{
margin-top:1px;
}
}
@media screen and (min-width: 767px) {
nav .menu .level-two{
margin-left: -1.25rem;
}
.show-second-menu {
position: absolute;
max-height: 31.25rem !important;
}
section#homepage-gallery-uspChildComponent {
min-height: 650px;
}
.merchandising .cta-with-price ul li a{
font-size: 14px;
}
.merchandising .cta-with-price ul{
padding-left: 0px;
}
}
@media (min-width: 768px) and (max-width: 979px){
nav .search-container .search-form {
width: 85%;
}
.master-main{
width:750px !important;
}
.master-main .main .container_main{
width:auto;
margin-left:0 !important;
}
#ui-id-1.ui-front{
left: 122px !important;
width:83% !important;
}
}
.left-top {
position: absolute;
top: 10px;
left: 0;
}
.left-bottom {
position: absolute;
bottom: 10px;
left: 0;
}
.top-right {
position: absolute;
top: 10px;
right: 0;
}
.top-bottom {
position: absolute;
bottom: 30px;
right: 0;
}
article.gallery .owl-dot span {
width: 1.875em !important;
height: .3125em !important;
border-radius: 10px;
margin: .3125em .1875em !important;
opacity: .8;
}
.bag-links .padding-r--40 {padding: 0;}
.bag-links .ct-block--grey {
background: none;
padding: 16px 18px 0 18px;
margin-bottom: 0;
}
.bag-links .ct-block--grey .ct-block--title {
padding-bottom: 10px;
margin-bottom: 10px;
}
.gallery-content a{
pointer-events:none;
}
.scrollable-nav ul li a i:first-child{
display:none;
}
.scrollable-nav ul li a i:last-child{
display:block;
}
.scrollable-nav ul li a.active i:first-child{
display:block;
}
.scrollable-nav ul li a.active i:last-child{
display:none;
}
.scrollable-nav .owl-controls{
display:none;
}
article.gallery div.homepage-gallery .owl-stage-outer .owl-stage .owl-item .gallery-item {
background-size:cover;
height: 100%;
}
section.about .about-container .content-holder{
padding: .625rem;
}
section.touts .highlights .single .text .regular-text{
font-family: roboto;
}
.collapsible-header.fixed{
z-index:102;
}
.about .info-content .bigger p{
font-family:Roboto;
font-size:16px;
}
.about .info-content .bigger .h1style{
font-size: 2.25rem;
}
.carousel-cta{
color:#FFF;
}
article.gallery div.homepage-gallery .full-width-text-right h1 span.arrow,
article.gallery div.homepage-gallery .full-width-text-left h1 span.arrow{
display: inline-block;
color: #44D62C
}
footer .links li.last a{
border: 0
}
nav .menu-icon{
background-repeat: no-repeat;
}
nav .search-container .search-form input{
background: url(../images/icons/search.svg) left no-repeat #000;
background-position-x: .625rem;
background-size:20px
}
.close{
cursor: pointer;
}
.close .fa-times{
display: none;
}
/*
.categorised-content .categorised-content-latest .content h2{
padding: 5.0625rem 0 0;
} */
.cd-top{
display:none !important;
}
.header-2{
display: inline-block;
padding: .625rem .625rem;
vertical-align: top;
}
footer{
background-color: #222;
}
.categorised-content a:hover{
color:#888;
}
.categorised-content-latest .cta span{
color: #44D62C;
}
#login-dropdown .checkbox.styled{
margin-left: 0;
opacity: 0;
}
.login-wrapper{
display: none !important;
}
nav .bag-links #minicart li{
padding:0 !important;
}
#minicart .ct-grey--s2{
margin: 0;
}
nav .bag-links #minicart li:first-child{
padding:0 !important;
}
nav .bag-links #minicart li a{
text-align: left!important;
}
.cart-container .checkout-shipping .content ul li{
text-indent: -15px;
}
.checkout-indent .btn:disabled{
display:none !important;
}
.co-payment .co-credit .btn{
margin-bottom:10px;
}
.cart-product tr td,
.checkout-summary .subtotal td,
.checkout-summary td{
border:none !important;
}
.cart-product tr td{
padding: 0 3px 10px 0;
}
a.link-1,
a.logOutmobile {
color: #999 !important;
}
a.link-1::after,
a.logOutmobile::after {
content: '>';
padding-left: .3em;
color: #44D62C;
}
.ct-block--body{
text-align: center;
padding: 10px 0;
}
section#homepage-gallery-uspChildComponent {
min-height: 650px;
}
.product-sec2 .container .cont .block-1, .product-sec2 .container .cont .block-2, .product-sec2 .container .cont .block-3,
.product-sec2 .container .cont .block-1 p, .product-sec2 .container .cont .block-2 p, .product-sec2 .container .cont .block-3 p
{
vertical-align: top;
margin-top: 10px;
}
nav .bag-links li:first-child {
padding: 1.25rem 0 0 0 !important;
margin-bottom: -7px;
}
.plp-banner.owl-carousel .owl-item img{
display: inline-block;
width: auto;
}
footer .footer-social-icons{
text-align: center;
padding-bottom: 5px;
}
footer .footer-social-icons li{
width:3rem;
display: inline-block;
padding: 0 .3125rem;
}
.about .main-div {
background: none !important;
}
.about h1.text-white.text-left {
padding-top: 1rem;
}
.account-container .acc-link li {
line-height: 20px;
}
.bag-links #closelink {
display: none;
}
.usp-tagline{
padding: 2.5rem 1.25rem;
}
iframe#cr_fonts_frame {
display: none;
}
.product-description .product-description-top .prod-details .product-features .out-stock .btn:hover{
background: #222!important;
}
.product-category .plp-right .product-list .product-cred .original-cost p{
padding-bottom: 3px;
}
.compare-group{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
clear:both;
}
.cta-list .link{
text-align: center;
}
#order-container .order-rightcont .mobi-scroll .item-row.cont .item-price p,
#order-container .order-rightcont .mobi-scroll .item-row.cont .item-quan p,
#order-container .order-rightcont .mobi-scroll .item-row.cont .item-total p,
#order-container .order-rightcont .mobi-scroll .item-row.cont .itemdes .item-title{
margin-top: 0;
}