@import url("../../../../../css-1");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: 0;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: "";
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir="rtl"] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.youtube iframe,
.youtube object,
.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.youtube img,
.youtube iframe,
.youtube object,
.youtube embed {
    max-width: 100%;
}
.constrain-width {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.cf::after {
    content: "";
    display: table;
    clear: both;
}
@font-face {
    font-family: "f37_jagger";
    src: url("../fonts/f37jagger-bold-webfont.eot");
    src: url("../fonts/f37jagger-bold-webfont.eot@") format("embedded-opentype"), url("../fonts/f37jagger-bold-webfont.woff2") format("woff2"), url("../fonts/f37jagger-bold-webfont.woff") format("woff"),
        url("../fonts/f37jagger-bold-webfont.ttf") format("truetype"), url("../fonts/f37jagger-bold-webfont.svg") format("svg");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "f37_jagger";
    src: url("../fonts/f37jagger-bolditalic-webfont.eot");
    src: url("../fonts/f37jagger-bolditalic-webfont.eot@") format("embedded-opentype"), url("../fonts/f37jagger-bolditalic-webfont.woff2") format("woff2"), url("../fonts/f37jagger-bolditalic-webfont.woff") format("woff"),
        url("../fonts/f37jagger-bolditalic-webfont.ttf") format("truetype"), url("../fonts/f37jagger-bolditalic-webfont.svg") format("svg");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "f37_jagger";
    src: url("../fonts/f37jagger-regular-webfont.eot");
    src: url("../fonts/f37jagger-regular-webfont.eot@") format("embedded-opentype"), url("../fonts/f37jagger-regular-webfont.woff2") format("woff2"), url("../fonts/f37jagger-regular-webfont.woff") format("woff"),
        url("../fonts/f37jagger-regular-webfont.ttf") format("truetype"), url("../fonts/f37jagger-regular-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "f37_jagger";
    src: url("../fonts/f37jagger-regularitalic-webfont.eot");
    src: url("../fonts/f37jagger-regularitalic-webfont.eot@") format("embedded-opentype"), url("../fonts/f37jagger-regularitalic-webfont.woff2") format("woff2"), url("../fonts/f37jagger-regularitalic-webfont.woff") format("woff"),
        url("../fonts/f37jagger-regularitalic-webfont.ttf") format("truetype"), url("../fonts/f37jagger-regularitalic-webfont.svg") format("svg");
    font-weight: normal;
    font-style: italic;
}
body {
    font-family: "f37_jagger", "Roboto", sans-serif;
}
.animate-in-lines > * {
    display: block;
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animate-in-lines > *:nth-child(1) {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms;
}
.animate-in-lines > *:nth-child(2) {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}
.animate-in-lines > *:nth-child(3) {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms;
}
.animate-in-lines > *:nth-child(4) {
    -webkit-animation-delay: 700ms;
    animation-delay: 700ms;
}
.animate-in-lines > *:nth-child(5) {
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms;
}
.animate-in-lines > *:nth-child(6) {
    -webkit-animation-delay: 900ms;
    animation-delay: 900ms;
}
.animate-in-lines > *:nth-child(7) {
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}
.animate-in-lines > *:nth-child(8) {
    -webkit-animation-delay: 1100ms;
    animation-delay: 1100ms;
}
.animate-in-fade {
    -webkit-animation: fadeIn 500ms 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 500ms 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes menuToggleClose1 {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        width: 100%;
    }
    100% {
        -webkit-transform: translateY(0) rotate(45deg);
        transform: translateY(0) rotate(45deg);
        width: 100%;
    }
}
@keyframes menuToggleClose1 {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        width: 100%;
    }
    100% {
        -webkit-transform: translateY(0) rotate(45deg);
        transform: translateY(0) rotate(45deg);
        width: 100%;
    }
}
@-webkit-keyframes menuToggleClose2 {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}
@keyframes menuToggleClose2 {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}
@-webkit-keyframes menuToggleClose3 {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes menuToggleClose3 {
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
}
@-webkit-keyframes menuToggleOpen1 {
    0% {
        -webkit-transform: translateY(0) rotate(45deg);
        transform: translateY(0) rotate(45deg);
    }
    50% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-400%);
        transform: translateY(-400%);
    }
}
@keyframes menuToggleOpen1 {
    0% {
        -webkit-transform: translateY(0) rotate(45deg);
        transform: translateY(0) rotate(45deg);
    }
    50% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-400%);
        transform: translateY(-400%);
    }
}
@-webkit-keyframes menuToggleOpen2 {
    0% {
        -webkit-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
    50% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes menuToggleOpen2 {
    0% {
        -webkit-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
    50% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes menuToggleOpen3 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(400%);
        transform: translateY(400%);
        opacity: 1;
    }
}
@keyframes menuToggleOpen3 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(400%);
        transform: translateY(400%);
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fadeInTo75 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.75;
    }
}
@keyframes fadeInTo75 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.75;
    }
}
@-webkit-keyframes wipeIn {
    0% {
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%);
    }
    100% {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
    }
}
@keyframes wipeIn {
    0% {
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%);
    }
    100% {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
    }
}
@-webkit-keyframes rotateCW {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@keyframes rotateCW {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@-webkit-keyframes rotateCCW {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}
@keyframes rotateCCW {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}
@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(1rem);
        transform: translateX(1rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(1rem);
        transform: translateX(1rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-1rem);
        transform: translateX(-1rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-1rem);
        transform: translateX(-1rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes slideOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-1rem);
        transform: translateX(-1rem);
    }
}
@keyframes slideOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-1rem);
        transform: translateX(-1rem);
    }
}
@-webkit-keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes slideOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-1rem);
        transform: translateY(-1rem);
    }
}
@keyframes slideOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-1rem);
        transform: translateY(-1rem);
    }
}
@-webkit-keyframes slideInUpCentred {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(calc(-50% + 1rem));
        transform: translateX(-50%) translateY(calc(-50% + 1rem));
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
}
@keyframes slideInUpCentred {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(calc(-50% + 1rem));
        transform: translateX(-50%) translateY(calc(-50% + 1rem));
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
}
@-webkit-keyframes slideOutUpCentred {
    0% {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(calc(-50% - 1rem));
        transform: translateX(-50%) translateY(calc(-50% - 1rem));
    }
}
@keyframes slideOutUpCentred {
    0% {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(calc(-50% - 1rem));
        transform: translateX(-50%) translateY(calc(-50% - 1rem));
    }
}
@-webkit-keyframes hero-shade-appear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
    }
}
@keyframes hero-shade-appear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
    }
}
@-webkit-keyframes dots {
    0% {
        opacity: 0.35;
    }
    5% {
        opacity: 1;
    }
    10% {
        opacity: 0.35;
    }
    100% {
        opacity: 0.35;
    }
}
@keyframes dots {
    0% {
        opacity: 0.35;
    }
    5% {
        opacity: 1;
    }
    10% {
        opacity: 0.35;
    }
    100% {
        opacity: 0.35;
    }
}
@-webkit-keyframes searchpulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes searchpulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes expand-width {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes expand-width {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@-webkit-keyframes play-grow {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1.08);
        transform: translate(-50%, -50%) scale(1.08);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes play-grow {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1.08);
        transform: translate(-50%, -50%) scale(1.08);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}
.scroll-anim-block .sa-slide {
    opacity: 0;
}
.scroll-anim-block .sa-slide.triggered {
    -webkit-animation: sa-slide 600ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: sa-slide 600ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.scroll-anim-block .sa-slide-right {
    opacity: 0;
}
.scroll-anim-block .sa-slide-right.triggered {
    -webkit-animation: sa-slide-right 600ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: sa-slide-right 600ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.scroll-anim-block .sa-slide-up {
    opacity: 0;
}
.scroll-anim-block .sa-slide-up.triggered {
    -webkit-animation: sa-slide-up 600ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: sa-slide-up 600ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@-webkit-keyframes sa-slide {
    0% {
        opacity: 0;
        -webkit-transform: translateX(3rem);
        transform: translateX(3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes sa-slide {
    0% {
        opacity: 0;
        -webkit-transform: translateX(3rem);
        transform: translateX(3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes sa-slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-3rem);
        transform: translateX(-3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes sa-slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-3rem);
        transform: translateX(-3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes sa-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes sa-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes growIn {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}
@keyframes growIn {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        opacity: 1;
    }
}
@-webkit-keyframes spin-center {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotateZ(360deg);
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}
@keyframes spin-center {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotateZ(360deg);
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}
@-webkit-keyframes spin-center-ccw {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotateZ(-360deg);
        transform: translate(-50%, -50%) rotateZ(-360deg);
    }
}
@keyframes spin-center-ccw {
    0% {
        -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotateZ(-360deg);
        transform: translate(-50%, -50%) rotateZ(-360deg);
    }
}
@-webkit-keyframes quarter-spin {
    0% {
        -webkit-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
    100% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
@keyframes quarter-spin {
    0% {
        -webkit-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
    100% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}
html {
    min-height: 100%;
    font-size: 10pt;
    background-color: #000;
    overflow-x: hidden;
}
body {
    min-width: 320px;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000;
    position: relative;
    overflow-x: hidden;
}
body.locked {
    height: 100%;
    height: 100vh;
    overflow: hidden;
}
.foreground {
    position: relative;
    z-index: 1;
}
input:invalid {
    box-shadow: none;
}
h1,
h2 {
    color: #fff;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
h2 {
    font-size: 100%;
    position: relative;
    color: #fff;
    padding-bottom: 1.75em;
    margin: 3.75em 0 2.75em 0;
    line-height: 1.6;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
}
h2.notopmargin {
    margin-top: 0;
}
h2::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 2.5em;
    height: 0.4em;
    background-color: #cf0;
}
@media (min-width: 720px) {
    h2 {
        font-size: 115%;
    }
}
input,
textarea,
button {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    padding: 0;
    border: none;
    letter-spacing: 0;
    font-family: inherit;
}
.treat-as-link {
    cursor: pointer;
}
.pagebody {
    line-height: 1.6;
}
.pagebody h2:first-child {
    margin-top: 0;
}
.pagebody p {
    font-size: 1rem;
    margin: 1.5em 0;
}
.pagebody li {
    font-size: 1rem;
    padding-left: 2.5em;
    margin: 0.5em 0;
}
.pagebody strong,
.pagebody b {
    font-weight: bold;
}
.pagebody em,
.pagebody i {
    font-style: italic;
}
.pagebody ul li {
    position: relative;
}
.pagebody ul li::before {
    position: absolute;
    top: 0.5em;
    left: 1em;
    width: 6px;
    height: 6px;
    content: "";
    border-radius: 50%;
}
.pagebody ul li li::before {
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
}
.pagebody ol li {
    position: relative;
    counter-increment: step-counter;
}
.pagebody ol li::before {
    content: counter(step-counter);
    position: absolute;
    top: 0.125em;
    right: calc(100% - 1.4em);
    font-size: 90%;
    font-style: italic;
}
.pagebody a {
    text-decoration: underline;
    transition: color 125ms ease-out;
}
.pagebody blockquote {
    padding-left: 2em;
    margin: 4em 0;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
    border-left: solid 0.4em #cf0;
}
@media (min-width: 900px) {
    .pagebody blockquote {
        margin-left: -0.4em;
    }
}
.pagebody .youtube {
    margin: 4em 0;
}
.pagebody.white {
    background-color: #fff;
}
.pagebody.grey {
    background-color: #f6f6f6;
}
.pagebody.white,
.pagebody.grey {
    color: #4e4e4e;
}
.pagebody.white h2,
.pagebody.grey h2 {
    color: #000;
    width: 100%;
}
.pagebody.white a,
.pagebody.grey a {
    color: #4e4e4e;
}
.pagebody.white a:hover,
.pagebody.white a:focus,
.pagebody.grey a:hover,
.pagebody.grey a:focus {
    color: #000;
}
.pagebody.white ul li::before,
.pagebody.grey ul li::before {
    background-color: #aaa;
}
.pagebody.white ul li li::before,
.pagebody.grey ul li li::before {
    background-color: transparent;
    border-color: #aaa;
}
.pagebody.white ol li::before,
.pagebody.grey ol li::before {
    color: #aaa;
}
@media (min-width: 720px) {
    .pagebody p,
    .pagebody li {
        font-size: 1.15rem;
    }
    .pagebody ul li::before {
        top: 0.6em;
        width: 7px;
        height: 7px;
    }
}
.pseudo-select {
    background-color: #fff;
    line-height: 1;
    position: relative;
}
.pseudo-select > a {
    display: block;
    position: relative;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 80%;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.3em 0 1.5em 0;
    border-bottom: solid 1px #aaa;
    background-color: #fff;
}
.pseudo-select > a span {
    color: #4e4e4e;
    transition: color 125ms ease-out;
}
.pseudo-select > a svg {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1rem;
    height: 1rem;
    fill: #000;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: -webkit-transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pseudo-select > a:hover span {
    color: #000;
}
.pseudo-select ul {
    position: absolute;
    z-index: 3;
    top: 100%;
    left: 0;
    width: 100%;
    font-style: italic;
    letter-spacing: 0.1em;
    padding: 0 1.5rem;
    font-size: 0.9rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 85%;
    border-left: solid 1px #aaa;
    border-right: solid 1px #aaa;
    background-color: #fff;
}
.pseudo-select li {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    padding: 1.125rem 0;
    margin: 0;
    color: #000;
    font-size: inherit;
    position: relative;
    cursor: pointer;
    transition: padding-left 125ms ease-out;
}
.pseudo-select li::before {
    display: none;
}
.pseudo-select li:first-child {
    border-top: none;
    padding-top: 1.875rem;
}
.pseudo-select li:last-child {
    padding-bottom: 1.875rem;
}
.pseudo-select li:hover {
    padding-left: 1rem;
}
.pseudo-select.open svg {
    -webkit-transform: translateY(-50%) rotateX(180deg);
    transform: translateY(-50%) rotateX(180deg);
}
.pseudo-select.open ul {
    max-height: 22.5rem;
    border-bottom: solid 1px #aaa;
}
section.carousel-section {
    position: relative;
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    section.carousel-section {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
section.carousel-section .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
section.carousel-section .carousel {
    margin: 0 -0.75rem;
}
section.carousel-section .slide {
    margin: 0 0.75rem;
}
@media (min-width: 900px) {
    section.carousel-section .carousel {
        margin: 0 -1rem;
    }
    section.carousel-section .slide {
        margin: 0 1rem;
    }
}
a.carousel-arrow {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background-color: #000;
    transition: background-color 125ms ease-out;
}
a.carousel-arrow.left {
    left: 0;
}
a.carousel-arrow.right {
    right: 0;
}
a.carousel-arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    fill: #fff;
    transition: fill 125ms ease-out;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
a.carousel-arrow:hover {
    background-color: #cf0;
}
a.carousel-arrow:hover svg {
    fill: #000;
}
@media (min-width: 600px) {
    a.carousel-arrow {
        width: 3.5rem;
        height: 3.5rem;
    }
}
.pagination {
    padding-top: 3rem;
    text-align: center;
}
.pagination .arrow {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 3rem;
    height: 3rem;
    background-color: #000;
    transition: background-color 125ms ease-out;
}
.pagination .arrow svg {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 1rem;
    height: 1rem;
    fill: #fff;
    transition: fill 125ms ease-out;
}
.pagination .arrow.left {
    margin-right: 1.25em;
}
.pagination .arrow.right {
    margin-left: 1.25em;
}
.pagination .arrow:hover {
    background-color: #cf0;
}
.pagination .arrow:hover svg {
    fill: #000;
}
.pagination .arrow.inactive {
    background-color: #dedede;
    cursor: default;
}
.pagination .arrow.inactive svg {
    fill: #fff;
}
.pagination .num {
    display: inline-block;
    vertical-align: middle;
    font-style: italic;
    letter-spacing: 0.1em;
    font-size: 100%;
    margin: 0 0.6em;
    text-decoration: none;
    border-bottom: solid 1px #cf0;
    color: #000;
    line-height: 1;
    padding: 0.3em 0 0.1em 0;
}
.pagination .num.active {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
}
.pagination .num:hover {
    border-bottom-color: #000;
}
@media (min-width: 600px) {
    .pagination {
        text-align: right;
    }
    .pagination .arrow {
        width: 3.5rem;
        height: 3.5rem;
    }
    .pagination .arrow svg {
        top: 1.25rem;
        left: 1.25rem;
    }
}
.breadcrumbs {
    background-color: #fff;
    border-bottom: solid 1px #dedede;
    color: #4e4e4e;
    font-size: 85%;
    padding: 3rem 1.5rem;
    padding-top: 0.67em;
    padding-bottom: 0.8em;
    line-height: 1.5;
}
@media (min-width: 900px) {
    .breadcrumbs {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color 125ms ease-out;
}
.breadcrumbs a:hover {
    text-decoration: underline;
    color: #000;
}
@media (min-width: 900px) {
    .breadcrumbs {
        font-size: 90%;
        padding-top: 0.75em;
        padding-bottom: 0.8em;
    }
}
a.std-button, input.std-button {
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 90%;
    text-transform: uppercase;
    border: solid 1px #aaa;
    padding: 1em 2.67em;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
}
a.std-button:hover, input.std-button:hover {
    background-position: 0% 0%;
}
a.std-button.white-to-lime, input.std-button.white-to-lime {
    color: #fff;
    border-color: #fff;
}
a.std-button.white-to-lime:hover, input.std-button.white-to-lime:hover {
    color: #000;
    border-color: #cf0;
}
a.std-button.white, input.std-button.white {
    color: #fff;
    border-color: #fff;
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out, color 125ms ease-out;
}
a.std-button.white:hover, input.std-button.white:hover {
    background-position: 0% 0%;
}
a.std-button.white:hover, input.std-button.white:hover {
    color: #000;
}
a.std-button.solidwhite, input.std-button.solidwhite {
    color: #000;
    background-color: #fff;
    border: none;
}
a.std-button.solidwhite:hover, input.std-button.solidwhite:hover {
    color: #000;
}
a.std-button.solidblack, input.std-button.solidblack {
    color: #fff;
    background-color: #000;
    border: none;
}
a.std-button.solidblack:hover, input.std-button.solidblack:hover {
    color: #000;
}
a.std-button.solidwhitetoblack, input.std-button.solidwhitetoblack {
    color: #000;
    background-color: #fff;
    border: none;
    background-image: linear-gradient(-30deg, transparent 50%, #000 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out, color 125ms ease-out;
}
a.std-button.solidwhitetoblack:hover, input.std-button.solidwhitetoblack:hover {
    background-position: 0% 0%;
}
a.std-button.solidwhitetoblack:hover, input.std-button.solidwhitetoblack:hover {
    color: #fff;
}
a.std-button.outlinetoblack, input.std-button.outlinetoblack {
    color: #000;
    background-color: transparent;
    border-color: #000;
    background-image: linear-gradient(-30deg, transparent 50%, #000 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out, color 125ms ease-out;
}
a.std-button.outlinetoblack:hover, input.std-button.outlinetoblack:hover {
    background-position: 0% 0%;
}
a.std-button.outlinetoblack:hover, input.std-button.outlinetoblack:hover {
    color: #fff;
}
a.std-button.solidgreentowhite, input.std-button.solidgreentowhite {
    color: #000;
    background-color: #cf0;
    border: none;
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out, color 125ms ease-out;
}
a.std-button.solidgreentowhite:hover, input.std-button.solidgreentowhite:hover {
    background-position: 0% 0%;
}
a.std-button.solidgreentowhite:hover, input.std-button.solidgreentowhite:hover {
    color: #000;
}
a.std-button.to-white, input.std-button.to-white {
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out, color 125ms ease-out;
}
a.std-button.to-white:hover, input.std-button.to-white:hover {
    background-position: 0% 0%;
}
a.std-button.smaller, input.std-button.smaller {
    font-size: 75%;
    padding: 1em 1.33em;
}
@media (min-width: 400px) {
    a.std-button.smaller, input.std-button.smaller {
        font-size: 80%;
        padding: 1em 2.5em;
    }
}
a.explore {
    display: inline-block;
    font-size: 0.9rem;
    color: #fff;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}
a.explore svg {
    position: relative;
    display: block;
    margin: 0.6em auto 0.7em auto;
    top: 0;
    width: 0.9em;
    height: 0.9em;
    fill: #fff;
    transition: top 100ms ease-out;
}
a.explore .dots {
    margin: 0 auto;
}
a.explore:hover svg {
    top: 0.2em;
}
.dots {
    width: 3px;
    overflow: visible;
}
.dots i {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 50%;
    -webkit-animation-name: dots;
    animation-name: dots;
    -webkit-animation-duration: 4000ms;
    animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.dots i:nth-child(2),
.dots i:nth-child(3) {
    margin-top: 5px;
}
.dots i:nth-child(1) {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}
.dots i:nth-child(2) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}
.dots i:nth-child(3) {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}
.padder {
    background-color: #fff;
    height: 3rem;
}
.padder.grey {
    background-color: #f6f6f6;
}
@media (min-width: 900px) {
    .padder {
        height: 6rem;
    }
}
.grid {
    margin-bottom: -1.5rem;
    margin-right: -1.5rem;
}
.grid::after {
    content: "";
    display: table;
    clear: both;
}
.grid > * {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
    .grid {
        margin-bottom: -2rem;
        margin-right: -2rem;
    }
    .grid > * {
        margin-right: 2rem;
        margin-bottom: 2rem;
    }
}
.biggergutter {
    margin-bottom: -3rem;
}
.biggergutter > * {
    margin-bottom: 3rem;
}
@media (min-width: 900px) {
    .biggergutter {
        margin-bottom: -6rem;
    }
    .biggergutter > * {
        margin-bottom: 6rem;
    }
}
.biggestgutter {
    margin-bottom: -4rem;
}
.biggestgutter > * {
    margin-bottom: 4rem;
}
@media (min-width: 900px) {
    .biggestgutter {
        margin-bottom: -6rem;
    }
    .biggestgutter > * {
        margin-bottom: 6rem;
    }
}
.body-screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.8);
    transition: opacity 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.body-screen.show {
    display: block;
    -webkit-animation: fadeIn 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.body-screen.hide {
    display: block;
    -webkit-animation: fadeOut 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeOut 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
header {
    position: relative;
    z-index: 15;
    padding: 0.67rem 1.5rem;
    background-color: #121212;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
header .logo {
    position: relative;
    z-index: 30;
    display: block;
    width: 2.33rem;
    height: 2.49rem;
}
header .logo svg {
    display: block;
    fill: #fff;
    width: 100%;
    height: 100%;
}
@media (min-width: 950px) {
    header {
        padding-top: 0.95rem;
        padding-bottom: 0.95rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
@media (min-width: 950px) and (min-width: 900px) {
    header {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
@media (min-width: 950px) {
    header .logo {
        width: 3.0989rem;
        height: 3.3117rem;
    }
}
.overscroll-mask {
    position: absolute;
    z-index: 15;
    bottom: calc(100% - 1px);
    left: 0;
    right: 0;
    width: 100%;
    height: 15rem;
    background-color: #000;
}
header .mobile-icons {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
header .mobile-icons a {
    float: left;
}
header .mobile-icons .search-toggle {
    display: block;
    width: 1.4rem;
    height: 1.28rem;
    margin-right: 1.5rem;
}
header .mobile-icons .search-toggle svg {
    display: block;
    fill: #fff;
    width: 100%;
    height: 100%;
    transition: fill 125ms ease-out;
}
header .mobile-icons .search-toggle:hover svg {
    fill: #cf0;
}
header .mobile-icons .menu-toggle {
    display: block;
    width: 23px;
    height: 15.341px;
    position: relative;
}
header .mobile-icons .menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: #fff;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 250ms;
    animation-duration: 250ms;
    transition: background-color 125ms ease-out;
}
header .mobile-icons .menu-toggle .bar-1 {
    width: 86%;
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
}
header .mobile-icons .menu-toggle .bar-3 {
    width: 75%;
    -webkit-transform: translateY(7px);
    transform: translateY(7px);
}
header .mobile-icons .menu-toggle.expanded .bar-1 {
    -webkit-animation-name: menuToggleClose1;
    animation-name: menuToggleClose1;
}
header .mobile-icons .menu-toggle.expanded .bar-2 {
    -webkit-animation-name: menuToggleClose2;
    animation-name: menuToggleClose2;
}
header .mobile-icons .menu-toggle.expanded .bar-3 {
    -webkit-animation-name: menuToggleClose3;
    animation-name: menuToggleClose3;
}
header .mobile-icons .menu-toggle.animated:not(.expanded) .bar-1 {
    -webkit-animation-name: menuToggleOpen1;
    animation-name: menuToggleOpen1;
}
header .mobile-icons .menu-toggle.animated:not(.expanded) .bar-2 {
    -webkit-animation-name: menuToggleOpen2;
    animation-name: menuToggleOpen2;
}
header .mobile-icons .menu-toggle.animated:not(.expanded) .bar-3 {
    -webkit-animation-name: menuToggleOpen3;
    animation-name: menuToggleOpen3;
}
header .mobile-icons .menu-toggle:hover .bar {
    background-color: #cf0;
}
@media (min-width: 950px) {
    header .mobile-icons {
        display: none;
    }
}
.navigation-mobile {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #1a1a1a;
    overflow: hidden;
    max-height: 0;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.navigation-mobile svg {
    display: block;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    fill: #fff;
    width: 1rem;
    height: 1rem;
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.navigation-mobile > li {
    border-bottom: solid 1px #000;
}
.navigation-mobile > li a {
    position: relative;
    display: block;
    background-color: #1a1a1a;
    color: #fff;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 90%;
    padding: 2rem 1.5rem;
    opacity: 0;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 125ms;
}
.navigation-mobile > li a:hover {
    background-color: #272727;
}
.navigation-mobile > li a.expanded {
    transition-delay: 0;
    background-color: #dedede;
    color: #000;
}
.navigation-mobile > li a.expanded svg {
    fill: #000;
    -webkit-transform: translateY(-50%) rotateX(180deg);
    transform: translateY(-50%) rotateX(180deg);
}
.navigation-mobile > li:last-child {
    border-bottom: none;
}
.navigation-mobile > li > ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: #313131;
}
.navigation-mobile > li > ul > li {
    border-bottom: solid 1px #4e4e4e;
}
.navigation-mobile > li > ul > li > a {
    background-color: #313131;
    font-weight: normal;
    font-style: italic;
    letter-spacing: 0.1em;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.navigation-mobile > li > ul > li > a:hover {
    background-color: #3e3e3e;
}
.navigation-mobile > li > ul > li > a.expanded:hover {
    background-color: #dedede;
}
.navigation-mobile > li > ul > li:first-child > a {
    border-top: solid 1px #313131;
}
.navigation-mobile > li > ul > li:first-child > a.expanded {
    border-top-color: #fff;
}
.navigation-mobile > li > ul > li:last-child {
    border-bottom: none;
}
.navigation-mobile > li > ul > li > ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: #fff;
}
.navigation-mobile > li > ul > li > ul > li {
    border-bottom: none;
}
.navigation-mobile > li > ul > li > ul > li > a {
    background-color: #fff;
    color: #000;
    font-weight: normal;
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: none;
    padding: 1.33rem 2.5rem;
}
.navigation-mobile > li > ul > li > ul > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background-color: #dedede;
}
@media (min-width: 900px) {
    .navigation-mobile > li > ul > li > ul > li > a::after {
        left: 3rem;
    }
}
@media (min-width: 900px) {
    .navigation-mobile > li > ul > li > ul > li > a::after {
        right: 3rem;
    }
}
.navigation-mobile > li > ul > li > ul > li > a:hover {
    background-color: #fff;
    padding-left: 3rem;
}
.navigation-mobile > li > ul > li > ul > li:first-child {
    padding-top: 0.5rem;
}
.navigation-mobile > li > ul > li > ul > li:last-child {
    border-bottom: none;
    padding-bottom: 0.5rem;
}
.navigation-mobile > li > ul > li > ul > li:last-child > a {
    border-bottom: none;
}
.navigation-mobile > li > ul > li > ul > li:last-child > a::after {
    display: none;
}
.navigation-mobile > li > ul > li > ul.opening {
    max-height: 19.98rem;
}
.navigation-mobile > li > ul > li > ul.opening > li > a {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.navigation-mobile > li > ul > li > ul.opening > li:nth-child(1) > a {
    transition-delay: 0ms;
}
.navigation-mobile > li > ul > li > ul.opening > li:nth-child(2) > a {
    transition-delay: 41.6666666667ms;
}
.navigation-mobile > li > ul > li > ul.opening > li:nth-child(3) > a {
    transition-delay: 83.3333333333ms;
}
.navigation-mobile > li > ul > li > ul.opening > li:nth-child(4) > a {
    transition-delay: 125ms;
}
.navigation-mobile > li > ul > li > ul.opening > li:nth-child(5) > a {
    transition-delay: 166.666666667ms;
}
.navigation-mobile > li > ul > li > ul.opening > li:nth-child(6) > a {
    transition-delay: 208.333333333ms;
}
.navigation-mobile > li > ul > li > ul.open {
    transition: none;
    max-height: none;
}
.navigation-mobile > li > ul > li > ul.open > li:nth-child(1n + 1) > a {
    transition-delay: 0s;
}
.navigation-mobile > li > ul > li > ul.closing {
    transition-delay: 125ms;
}
.navigation-mobile > li > ul > li > ul.closing > li:nth-child(6) > a {
    transition-delay: 0ms;
}
.navigation-mobile > li > ul > li > ul.closing > li:nth-child(5) > a {
    transition-delay: 41.6666666667ms;
}
.navigation-mobile > li > ul > li > ul.closing > li:nth-child(4) > a {
    transition-delay: 83.3333333333ms;
}
.navigation-mobile > li > ul > li > ul.closing > li:nth-child(3) > a {
    transition-delay: 125ms;
}
.navigation-mobile > li > ul > li > ul.closing > li:nth-child(2) > a {
    transition-delay: 166.666666667ms;
}
.navigation-mobile > li > ul > li > ul.closing > li:nth-child(1) > a {
    transition-delay: 208.333333333ms;
}
.navigation-mobile > li > ul.opening {
    max-height: 25rem;
}
.navigation-mobile > li > ul.opening > li > a {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.navigation-mobile > li > ul.opening > li:nth-child(1) > a {
    transition-delay: 0ms;
}
.navigation-mobile > li > ul.opening > li:nth-child(2) > a {
    transition-delay: 50ms;
}
.navigation-mobile > li > ul.opening > li:nth-child(3) > a {
    transition-delay: 100ms;
}
.navigation-mobile > li > ul.opening > li:nth-child(4) > a {
    transition-delay: 150ms;
}
.navigation-mobile > li > ul.opening > li:nth-child(5) > a {
    transition-delay: 200ms;
}
.navigation-mobile > li > ul.open {
    transition: none;
    max-height: none;
}
.navigation-mobile > li > ul.open > li:nth-child(1n + 1) > a {
    transition-delay: 0s;
}
.navigation-mobile > li > ul.closing {
    transition-delay: 125ms;
}
.navigation-mobile > li > ul.closing > li:nth-child(5) > a {
    transition-delay: 0ms;
}
.navigation-mobile > li > ul.closing > li:nth-child(4) > a {
    transition-delay: 50ms;
}
.navigation-mobile > li > ul.closing > li:nth-child(3) > a {
    transition-delay: 100ms;
}
.navigation-mobile > li > ul.closing > li:nth-child(2) > a {
    transition-delay: 150ms;
}
.navigation-mobile > li > ul.closing > li:nth-child(1) > a {
    transition-delay: 200ms;
}
.navigation-mobile > li.language a {
    background-color: #000;
}
.navigation-mobile > li.language a:hover {
    background-color: #1a1a1a;
}
.navigation-mobile > li.language a.expanded {
    background-color: #dedede;
}
.navigation-mobile > li.language > ul > li > a {
    background-color: #313131;
}
.navigation-mobile > li.language > ul > li > a:hover {
    background-color: #3e3e3e;
}
.navigation-mobile.opening {
    max-height: 36em;
}
.navigation-mobile.opening > li > a {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
.navigation-mobile.opening > li:nth-child(1) > a {
    transition-delay: 0ms;
}
.navigation-mobile.opening > li:nth-child(2) > a {
    transition-delay: 41.6666666667ms;
}
.navigation-mobile.opening > li:nth-child(3) > a {
    transition-delay: 83.3333333333ms;
}
.navigation-mobile.opening > li:nth-child(4) > a {
    transition-delay: 125ms;
}
.navigation-mobile.opening > li:nth-child(5) > a {
    transition-delay: 166.666666667ms;
}
.navigation-mobile.opening > li:nth-child(6) > a {
    transition-delay: 208.333333333ms;
}
.navigation-mobile.open {
    transition: none;
    max-height: none;
}
.navigation-mobile.open > li:nth-child(1n + 1) > a {
    transition-delay: 0s;
    transition-duration: 125ms;
    transition-timing-function: ease-out;
}
.navigation-mobile.closing {
    transition-delay: 125ms;
}
.navigation-mobile.closing > li:nth-child(6) > a {
    transition-delay: 0ms;
}
.navigation-mobile.closing > li:nth-child(5) > a {
    transition-delay: 41.6666666667ms;
}
.navigation-mobile.closing > li:nth-child(4) > a {
    transition-delay: 83.3333333333ms;
}
.navigation-mobile.closing > li:nth-child(3) > a {
    transition-delay: 125ms;
}
.navigation-mobile.closing > li:nth-child(2) > a {
    transition-delay: 166.666666667ms;
}
.navigation-mobile.closing > li:nth-child(1) > a {
    transition-delay: 208.333333333ms;
}
header .wide {
    display: none;
    font-size: 80%;
    position: absolute;
    top: 50%;
    line-height: 3em;
    margin-top: -0.05em;
}
header .wide a {
    color: #fff;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
}
header .wide a span {
    position: relative;
}
header .wide a span::after {
    content: "";
    position: absolute;
    bottom: -0.66em;
    left: 0;
    height: 2.5px;
    right: 100%;
    background-color: #fff;
    transition: right 125ms ease-out;
}
header .wide a:hover span::after {
    right: 0;
}
header .main-nav {
    z-index: 1;
    width: 100%;
    left: 9rem;
    text-align: left;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
header .main-nav a {
    margin-right: 2.5em;
}
header .main-nav a:last-child {
    margin-right: 0;
}
header .main-nav svg {
    width: 0.9em;
    height: 0.7em;
    fill: #fff;
    opacity: 0.75;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 0.75em;
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
header .main-nav a.open svg {
    fill: #cf0;
    opacity: 1;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
header .rhs-links {
    z-index: 2;
    right: 1.5rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    white-space: nowrap;
}
@media (min-width: 900px) {
    header .rhs-links {
        right: 3rem;
    }
}
header .rhs-links svg {
    display: inline-block;
}
header .rhs-links .search-toggle svg {
    vertical-align: middle;
    width: 1.33em;
    height: 1.33em;
    fill: #fff;
    margin-left: 1.5em;
}
header .rhs-links .language-toggle {
    margin-left: 3.5em;
    position: relative;
}
header .rhs-links .language-toggle::before {
    position: absolute;
    content: "";
    left: -1.75em;
    top: 50%;
    width: 1px;
    height: 3em;
    background-color: #dedede;
    opacity: 0.5;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
header .rhs-links .language-toggle svg {
    vertical-align: baseline;
    width: 0.9em;
    height: 0.7em;
    fill: #fff;
    opacity: 0.75;
    margin-left: 0.75em;
}
header .dropdown {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    width: 100%;
    height: 435px;
    max-height: 0;
    overflow: hidden;
    background-color: #000;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
header .dropdown .inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%) scaleX(1.1);
    transform: translateY(-50%) scaleX(1.1);
    opacity: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    transition-property: all;
    transition-duration: 83.3333333333ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (min-width: 900px) {
    header .dropdown .inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
header .dropdown.open {
    max-height: 435px;
}
header .dropdown.open .inner {
    -webkit-transform: translateY(-50%) scaleX(1);
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
    transition-duration: 250ms;
    transition-delay: 125ms;
}
header .dropdown.sports,
header .dropdown.team {
    font-size: 100%;
}
header .dropdown.sports .blocks,
header .dropdown.team .blocks {
    display: inline-block;
}
header .dropdown.sports .blocks::after,
header .dropdown.team .blocks::after {
    content: "";
    display: table;
    clear: both;
}
header .dropdown.sports a,
header .dropdown.team a {
    display: block;
    float: left;
    position: relative;
    width: 14rem;
    height: 14rem;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    color: #fff;
    text-transform: uppercase;
    background-size: 200% 200%, cover;
    background-position: 100% 100%, 50% 50%;
    background-repeat: no-repeat;
    margin-left: 3px;
    transition: color 125ms ease-out, background-position 125ms ease-out;
}
header .dropdown.sports a span,
header .dropdown.team a span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: inherit;
}
header .dropdown.sports a:first-child,
header .dropdown.team a:first-child {
    margin-left: 0;
}
header .dropdown.sports a:hover,
header .dropdown.team a:hover {
    color: #000;
    background-position: 0% 0%, 50% 50%;
}
header .dropdown.sports {
    font-size: 120%;
}
header .dropdown.sports a.tennis {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-tennis.jpg");
}
header .dropdown.sports a.squash {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-squash.jpg");
}
header .dropdown.sports a.padel {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-padel.jpg");
}
header .dropdown.sports a.badminton {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-badminton.jpg");
}
header .dropdown.team a {
    color: #cf0;
}
header .dropdown.team a::before,
header .dropdown.team a::after {
    position: absolute;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 9rem;
    height: 3.2412587413rem;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: opacity 125ms ease-out;
}
header .dropdown.team a::before {
    background-image: url("../img/team-dunlop-logo.svg");
}
header .dropdown.team a::after {
    background-image: url("../img/team-dunlop-logo-black.svg");
    opacity: 0;
}
header .dropdown.team a:hover::before {
    opacity: 0;
}
header .dropdown.team a:hover::after {
    opacity: 1;
}
header .dropdown.team a span {
    top: 75%;
}
header .dropdown.team a.tennis {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-alt-tennis.jpg");
}
header .dropdown.team a.squash {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-alt-squash.jpg");
}
header .dropdown.team a.padel {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-alt-padel.jpg");
}
header .dropdown.team a.badminton {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-alt-badminton.jpg");
}
header .dropdown .list {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin-left: 8.5em;
}
header .dropdown .list:first-child {
    margin-left: 0;
}
header .dropdown .list h4 {
    position: relative;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 1.75em;
    margin-bottom: 2.25em;
    font-size: 100%;
}
header .dropdown .list h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5em;
    height: 4px;
    background-color: #fff;
}
header .dropdown .list a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-style: italic;
    letter-spacing: 0.1em;
    margin-top: 1.5em;
    font-size: 90%;
    transition: color 125ms ease-out;
}
header .dropdown .list a:hover {
    color: #cf0;
}
@media (min-width: 950px) {
    header .wide {
        display: block;
    }
}
@media (min-width: 1150px) {
    header .main-nav {
        left: 50%;
        text-align: center;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}
@media (min-width: 1250px) {
    header .main-nav a {
        margin-right: 4.33em;
    }
}
.search-panel {
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: #000;
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.search-panel .search-toggle {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    transition-property: all;
    transition-duration: 83.3333333333ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
}
.search-panel .search-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff;
    transition: fill 125ms ease-out;
}
.search-panel .search-toggle:hover svg {
    fill: #cf0;
}
.search-panel form {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 50%;
    border-bottom: solid 1px #dedede;
    font-size: 150%;
    -webkit-transform: translateY(-50%) scaleX(1.1);
    transform: translateY(-50%) scaleX(1.1);
    opacity: 0;
    transition-property: all;
    transition-duration: 83.3333333333ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.search-panel form input {
    width: 100%;
    width: calc(100% - 2.15em);
    color: #fff;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-style: italic;
    margin-bottom: 0.85em;
}
.search-panel form input::-webkit-input-placeholder {
    color: #dedede;
}
.search-panel form input:-ms-input-placeholder {
    color: #dedede;
}
.search-panel form input::-ms-input-placeholder {
    color: #dedede;
}
.search-panel form input::placeholder {
    color: #dedede;
}
.search-panel form a {
    position: absolute;
    top: 0;
    right: 0;
}
.search-panel form a svg {
    width: 1.15em;
    height: 1.15em;
    fill: #cf0;
    transition: fill 125ms ease-out;
}
.search-panel form a:hover svg {
    fill: #fff;
}
.search-panel.open {
    height: 100vh;
}
.search-panel.open .search-toggle {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    transition-duration: 250ms;
    transition-delay: 125ms;
}
.search-panel.open form {
    -webkit-transform: translateY(-50%) scaleX(1);
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
    transition-duration: 250ms;
    transition-delay: 125ms;
}
@media (min-width: 500px) {
    .search-panel form {
        font-size: 170%;
        left: 50%;
        right: initial;
        width: 75%;
        max-width: 940px;
        -webkit-transform: translate(-50%, -50%) scaleX(1.1);
        transform: translate(-50%, -50%) scaleX(1.1);
    }
    .search-panel.open form {
        -webkit-transform: translate(-50%, -50%) scaleX(1);
        transform: translate(-50%, -50%) scaleX(1);
    }
}
@media (min-width: 720px) {
    .search-panel form {
        font-size: 200%;
        width: 70%;
    }
}
@media (min-width: 900px) {
    .search-panel .search-toggle {
        top: 2.5rem;
        right: 3rem;
    }
    .search-panel .search-toggle svg {
        width: 1.75rem;
        height: 1.75rem;
    }
    .search-panel form {
        font-size: 250%;
    }
}
.languages-panel {
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: #000;
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.languages-panel .language-toggle {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    transition-property: all;
    transition-duration: 83.3333333333ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
}
.languages-panel .language-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff;
    transition: fill 125ms ease-out;
}
.languages-panel .language-toggle:hover svg {
    fill: #cf0;
}
.languages-panel ul {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scaleX(1.1);
    transform: translate(-50%, -50%) scaleX(1.1);
    opacity: 0;
    transition-property: all;
    transition-duration: 83.3333333333ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
    font-size: 160%;
}
.languages-panel ul li {
    padding: 0.75em 0;
}
.languages-panel ul a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    padding-bottom: 0.2em;
    border-bottom: solid 0.1em transparent;
    font-size: inherit;
    transition: border-color 125ms ease-out;
}
.languages-panel ul a:hover {
    border-bottom-color: #fff;
}
.languages-panel ul a.active {
    color: #cf0;
    border-bottom-color: transparent;
}
.languages-panel.open {
    height: 100vh;
}
.languages-panel.open .language-toggle {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    transition-duration: 250ms;
    transition-delay: 125ms;
}
.languages-panel.open ul {
    -webkit-transform: translate(-50%, -50%) scaleX(1);
    transform: translate(-50%, -50%) scaleX(1);
    opacity: 1;
    transition-duration: 250ms;
    transition-delay: 125ms;
}
@media (min-width: 600px) {
    .languages-panel ul {
        font-size: 200%;
    }
}
@media (min-width: 900px) {
    .languages-panel .language-toggle {
        top: 2.5rem;
        right: 3rem;
    }
    .languages-panel .language-toggle svg {
        width: 1.75rem;
        height: 1.75rem;
    }
}
footer.mobile {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media (min-width: 900px) {
    footer.mobile {
        display: none;
    }
}
footer.mobile .menu {
    font-size: 90%;
    background-color: #1a1a1a;
}
footer.mobile .menu a {
    display: block;
    position: relative;
    padding: 1.8rem 1.5rem;
    color: #fff;
    text-decoration: none;
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 125ms ease-out;
}
footer.mobile .menu a.expandable svg {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 1rem;
    height: 1rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    fill: #fff;
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu a:hover {
    background-color: #272727;
}
footer.mobile .menu a.expanded:hover {
    background-color: #1a1a1a;
}
footer.mobile .menu a.expanded svg {
    -webkit-transform: translateY(-50%) rotateX(180deg);
    transform: translateY(-50%) rotateX(180deg);
}
footer.mobile .menu > li {
    position: relative;
}
footer.mobile .menu > li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background-color: #4e4e4e;
}
footer.mobile .menu > li:last-child::after {
    display: none;
}
footer.mobile .menu li ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 125ms;
}
footer.mobile .menu li ul a {
    padding: 1.125rem;
    padding-left: 2.5rem;
    text-transform: none;
    -webkit-transform: scaleX(1.1);
    transform: scaleX(1.1);
    transition-property: all;
    opacity: 0;
}
footer.mobile .menu li ul a:hover {
    background-color: transparent;
    padding-left: 3rem;
}
footer.mobile .menu li ul li:first-child a {
    padding-top: 0.495rem;
}
footer.mobile .menu li ul li:last-child {
    padding-bottom: 1.35rem;
}
footer.mobile .menu li ul li:nth-child(5) a {
    transition-delay: 0ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul li:nth-child(4) a {
    transition-delay: 50ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul li:nth-child(3) a {
    transition-delay: 100ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul li:nth-child(2) a {
    transition-delay: 150ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul li:nth-child(1) a {
    transition-delay: 200ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul.open {
    transition-delay: 0;
}
footer.mobile .menu li ul.open.three {
    max-height: 14.25em;
}
footer.mobile .menu li ul.open.four {
    max-height: 19em;
}
footer.mobile .menu li ul.open.five {
    max-height: 23.75em;
}
footer.mobile .menu li ul.open a {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
footer.mobile .menu li ul.open li:nth-child(1) a {
    transition-delay: 0ms;
    transition-duration: 125ms;
    transition-timing-function: ease-out;
}
footer.mobile .menu li ul.open li:nth-child(2) a {
    transition-delay: 0ms;
    transition-duration: 125ms;
    transition-timing-function: ease-out;
}
footer.mobile .menu li ul.open li:nth-child(3) a {
    transition-delay: 0ms;
    transition-duration: 125ms;
    transition-timing-function: ease-out;
}
footer.mobile .menu li ul.open li:nth-child(4) a {
    transition-delay: 0ms;
    transition-duration: 125ms;
    transition-timing-function: ease-out;
}
footer.mobile .menu li ul.open li:nth-child(5) a {
    transition-delay: 0ms;
    transition-duration: 125ms;
    transition-timing-function: ease-out;
}
footer.mobile .menu li ul.opening {
    transition-delay: 0;
}
footer.mobile .menu li ul.opening li:nth-child(1) a {
    transition-delay: 0ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul.opening li:nth-child(2) a {
    transition-delay: 50ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul.opening li:nth-child(3) a {
    transition-delay: 100ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul.opening li:nth-child(4) a {
    transition-delay: 150ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu li ul.opening li:nth-child(5) a {
    transition-delay: 200ms;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu .social p {
    padding: 1.8rem 1.5rem 1.5rem 1.5rem;
    color: #fff;
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
footer.mobile .menu .social .icons {
    padding: 0 1.5rem;
}
footer.mobile .menu .social .icons a {
    display: inline-block;
    margin-left: 1.4em;
    padding: 0 0 1.05rem 0;
    border-bottom: solid 2px transparent;
    background-color: transparent;
    transition: background-color 125ms ease-out;
}
footer.mobile .menu .social .icons a:first-child {
    margin-left: 0;
}
footer.mobile .menu .social .icons a::after {
    display: none;
}
footer.mobile .menu .social .icons a svg {
    width: 1.5em;
    height: 1.5em;
    fill: #fff;
    transition: fill 125ms ease-out;
}
footer.mobile .menu .social .icons a:hover,
footer.mobile .menu .social .icons a.active {
    background-color: transparent;
}
footer.mobile .menu .social .icons a:hover svg,
footer.mobile .menu .social .icons a.active svg {
    fill: #cf0;
}
footer.mobile .menu .social .icons a.active {
    border-color: #cf0;
}
footer.mobile .menu .social .links {
    position: relative;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), padding-left 62.5ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.mobile .menu .social .links .inner {
    padding: 1.2rem 0 1.8rem 0;
}
footer.mobile .menu .social .links.open {
    max-height: 4rem;
    opacity: 1;
}
footer.mobile .menu .social .links a {
    padding: 0;
    display: none;
    margin-left: 1.35em;
    transition: color 125ms ease-out;
}
footer.mobile .menu .social .links a::last-child {
    margin-left: 0;
}
footer.mobile .menu .social .links a:hover {
    color: #cf0;
}
footer.mobile .menu .social .links.facebook a.facebook {
    display: inline-block;
}
footer.mobile .menu .social .links.twitter a.twitter {
    display: inline-block;
}
footer.mobile .menu .social .links.instagram a.instagram {
    display: inline-block;
}
@media (min-width: 400px) {
    footer.mobile .menu .social .links.twitter {
        padding-left: 3.2em;
    }
    footer.mobile .menu .social .links.instagram {
        padding-left: 6.4em;
    }
}
footer.mobile .bottom {
    padding: 1.5rem;
    background-color: #000;
}
footer.mobile .bottom svg {
    width: 8.6em;
    height: 0.8em;
    fill: #fff;
    margin-top: 0.9em;
}
footer.mobile .bottom .copy {
    display: inline-block;
    color: #aaa;
    font-size: 80%;
    margin-left: 1em;
}
footer.mobile .bottom .small-links {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-size: 80%;
    margin-top: 2.25rem;
}
footer.mobile .bottom .small-links p {
    padding: 0 1em;
    border-right: solid 1px #4e4e4e;
    color: #fff;
    line-height: 1.25;
}
footer.mobile .bottom .small-links p:first-child {
    padding-left: 0;
}
footer.mobile .bottom .small-links p:last-child {
    border-right: none;
    padding-right: 0;
}
footer.mobile .bottom .small-links p a {
    color: inherit;
    text-decoration: none;
}
footer.mobile .bottom .small-links p a:hover {
    text-decoration: underline;
}
footer.desktop {
    display: none;
    padding: 0 3rem;
    color: #fff;
    background-color: #121212;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
footer.desktop .constrain-width {
    position: relative;
    padding-top: 5.25rem;
    padding-bottom: 4.5rem;
}
footer.desktop .grid div {
    width: calc((100% - 6rem) / 4);
}
@media (min-width: 900px) {
    footer.desktop .grid div {
        width: calc((100% - 8rem) / 4);
    }
}
footer.desktop h4,
footer.desktop a {
    color: inherit;
    text-transform: uppercase;
}
footer.desktop h4 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 90%;
    margin-bottom: 2em;
}
footer.desktop a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-decoration: none;
    font-size: 80%;
    transition: color 125ms ease-out;
}
footer.desktop a:hover {
    color: #cf0;
}
footer.desktop li {
    margin-bottom: 1.25em;
}
footer.desktop li:last-child {
    margin-bottom: 0;
}
footer.desktop .social {
    position: relative;
}
footer.desktop .social .icons {
    width: 7.5em;
}
footer.desktop .social .icons::after {
    content: "";
    display: table;
    clear: both;
}
footer.desktop .social .icons a {
    float: left;
    margin-right: 1.5em;
    padding-bottom: 1.05rem;
    border-bottom: solid 2px transparent;
    transition: border-color 125ms ease-out;
}
footer.desktop .social .icons a:last-child {
    margin-right: 0;
}
footer.desktop .social .icons svg {
    width: 2em;
    height: 2em;
    fill: #fff;
    transition: fill 125ms ease-out;
}
footer.desktop .social .icons a:hover svg,
footer.desktop .social .icons a.active svg {
    fill: #cf0;
}
footer.desktop .social .icons a.active {
    border-color: #cf0;
}
footer.desktop .social .links {
    position: absolute;
    left: 0;
    top: 100%;
    top: calc(100% + 0.1em);
    width: 7.5em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), left 62.5ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.desktop .social .links .inner {
    padding-top: 1em;
    opacity: 0;
    transition: opacity 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
footer.desktop .social .links.open {
    max-height: 7.5rem;
}
footer.desktop .social .links.open .inner {
    opacity: 1;
}
footer.desktop .social .links a {
    display: none;
    margin-bottom: 1em;
    transition: color 125ms ease-out;
}
footer.desktop .social .links a:hover {
    color: #cf0;
}
footer.desktop .social .links.facebook a.facebook {
    display: block;
}
footer.desktop .social .links.twitter {
    left: 2.75em;
}
footer.desktop .social .links.twitter a.twitter {
    display: block;
}
footer.desktop .social .links.instagram {
    left: 5.65em;
}
footer.desktop .social .links.instagram a.instagram {
    display: block;
}
footer.desktop .wordmark {
    position: absolute;
    bottom: 4.5rem;
    right: 0;
    width: 10.7em;
    height: 1em;
    fill: #fff;
}
footer.desktop-bottom {
    display: none;
    padding: 2.25rem 3rem;
    color: #aaa;
    background-color: #000;
}
footer.desktop-bottom .constrain-width {
    font-size: 90%;
}
footer.desktop-bottom .constrain-width p {
    display: inline-block;
    margin-right: 2.25em;
}
footer.desktop-bottom .constrain-width a {
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
    font-size: inherit;
    text-decoration: none;
    color: #fff;
}
footer.desktop-bottom .constrain-width a:hover {
    text-decoration: underline;
}
@media (min-width: 900px) {
    footer.desktop,
    footer.desktop-bottom {
        display: block;
    }
}
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 320px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.video-modal .inner {
    position: relative;
    height: calc(56.25vw + (1.5rem * 5.5));
    min-height: 100%;
}
.video-modal a.close {
    position: absolute;
    z-index: 100;
    top: 1.5rem;
    right: 1.5rem;
    width: 1.875rem;
    height: 1.875rem;
}
.video-modal a.close svg {
    width: 100%;
    height: 100%;
    fill: #fff;
    transition: fill 125ms ease-out;
}
.video-modal a.close:hover svg {
    fill: #cf0;
}
.video-modal .vid-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 0 1.5rem;
    text-align: center;
}
.video-modal .vid-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-modal .vid-container iframe,
.video-modal .vid-container object,
.video-modal .vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-modal.show {
    -webkit-animation: fadeIn 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.video-modal.hide {
    -webkit-animation: fadeOut 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeOut 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 900px) {
    .video-modal .inner {
        height: calc(56.25vw - (3rem * 1));
    }
    .video-modal a.close {
        top: 3rem;
        right: 3rem;
    }
    .video-modal .vid-wrapper {
        padding: 0 7.5rem;
    }
}
.c-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
}
.c-modal .panel {
    position: relative;
    margin: 4.5rem 1.5rem;
    background-color: #fff;
    padding: 1.5rem;
}
.c-modal.show {
    display: block;
    -webkit-animation: fadeIn 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.c-modal.show .panel {
    -webkit-animation: slideInUp 400ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideInUp 400ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.c-modal.hide {
    display: block;
    -webkit-animation: fadeOut 400ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeOut 400ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.c-modal.hide .panel {
    -webkit-animation: slideOutUp 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideOutUp 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.c-modal h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
    font-size: 150%;
}
.c-modal .form h3 {
    position: relative;
    padding-bottom: 0.75em;
}
.c-modal .form h3::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 1.5em;
    height: 0.233em;
    background-color: #cf0;
}
.c-modal .close {
    position: absolute;
    z-index: 1;
    top: 1.7rem;
    right: 1.5rem;
    width: 1.1rem;
    height: 1.1rem;
}
.c-modal .close svg {
    fill: #aaa;
    width: 100%;
    height: 100%;
    transition: fill 125ms ease-out;
}
.c-modal .close:hover svg {
    fill: #4e4e4e;
}
.c-modal p {
    color: #4e4e4e;
    line-height: 1.5;
    margin: 1.5em 0 2.5em 0;
}
.c-modal p.recaptcha-text {
    color: #aaa;
    font-size: 90%;
    margin: 1.5em 0 0 0;
}
.c-modal p.recaptcha-text a {
    color: inherit;
    transition: color 125ms ease-out;
}
.c-modal p.recaptcha-text a:hover {
    color: #4e4e4e;
}
.c-modal .inputholder {
    display: block;
    position: relative;
}
.c-modal .inputholder .label {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    font-size: 120%;
    color: #4e4e4e;
    transition: all 125ms ease-out;
}
.c-modal .inputholder.textarea .label {
    font-size: 110%;
    top: 1.2em;
    left: 1em;
}
.c-modal .inputholder.populated .label {
    top: -1.66em;
    font-size: 100%;
    left: 0;
}
.c-modal input[type="text"],
.c-modal input[type="number"],
.c-modal textarea {
    display: block;
    font-family: inherit;
    color: #000;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: none;
    transition: border-color 125ms ease-out;
}
.c-modal input[type="text"]:focus,
.c-modal input[type="number"]:focus,
.c-modal textarea:focus {
    border-color: #000;
}
.c-modal input[type="text"].error,
.c-modal input[type="number"].error,
.c-modal textarea.error {
    border-color: #ff7171;
}
.c-modal input[type="text"],
.c-modal input[type="number"],
.c-modal label.select,
.c-modal p.faux-input {
    border-bottom: solid 1px #dedede;
    margin: 3.5rem 0 0 0;
}
.c-modal input[type="text"],
.c-modal input[type="number"],
.c-modal p.faux-input {
    padding: 0 0 0.5em 0;
    font-size: 120%;
}
.c-modal p.faux-input strong {
    font-weight: bold;
}
.c-modal textarea {
    font-size: 110%;
    resize: none;
    border: solid 1px #dedede;
    padding: 1em;
    height: 7em;
    margin-top: 4rem;
}
.c-modal label.select .value {
    display: block;
    font-size: 120%;
    color: #000;
    padding: 0 0 0.6em 0;
}
.c-modal label.select select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.c-modal label.select svg {
    position: absolute;
    top: 0.05em;
    right: 0;
    width: 0.9em;
    height: 0.9em;
    fill: #aaa;
    transition: fill 125ms ease-out;
}
.c-modal label.select:hover svg {
    fill: #4e4e4e;
}
.c-modal .inputholder.radio p.faux-input {
    padding: 0;
    border: none;
    margin-bottom: 1rem;
}
.c-modal .inputholder.radio label {
    font-size: 120%;
    color: #4e4e4e;
    cursor: pointer;
}
.c-modal .inputholder.radio label input {
    display: none;
}
.c-modal .inputholder.radio label span {
    display: inline-block;
    vertical-align: -33%;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: solid 1px #dedede;
    margin-left: 0.67em;
    margin-right: 1.5em;
    transition: border-color 125ms ease-out;
}
.c-modal .inputholder.radio label input:checked + span {
    border-color: #aaa;
    background: radial-gradient(#ccc 50%, #fff 50%);
    background: radial-gradient(#ccc 50%, #fff calc(50% + 1px));
}
.c-modal .submit {
    display: block;
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
.c-modal .inputholder.error input[type="text"],
.c-modal .inputholder.error input[type="number"],
.c-modal .inputholder.error textarea,
.c-modal label.select.error {
    border-color: #ff7171;
}
.c-modal .errormsg {
    display: block;
    color: #ff7171;
    margin-top: 0.5em;
}
.c-modal label.select .errormsg {
    position: absolute;
    bottom: -1.6em;
    left: 0;
}
.c-modal label.select.error {
    margin-bottom: 5.2rem;
}
.c-modal .twocolssmall::after {
    content: "";
    display: table;
    clear: both;
}
.c-modal .twocolssmall p.faux-input {
    margin-bottom: 2.25rem;
    padding: 0;
    border: none;
}
.c-modal .twocolssmall .inputholder {
    float: left;
    width: 8em;
    margin-left: 6%;
}
.c-modal .twocolssmall .inputholder input {
    margin-top: 0;
}
.c-modal .twocolssmall .inputholder:first-of-type {
    margin-left: 0;
}
@media (min-width: 600px) {
    .c-modal .panel {
        width: 90%;
        max-width: 700px;
        margin: 10rem auto 0 auto;
        padding: 3rem;
    }
    .c-modal .close {
        top: 3.5rem;
        right: 3rem;
    }
    .c-modal h3 {
        font-size: 200%;
    }
    .c-modal p {
        font-size: 110%;
    }
    .c-modal .submit {
        margin-top: 3rem;
    }
    .c-modal .twocols {
        margin-top: 3.5rem;
    }
    .c-modal .twocols::after {
        content: "";
        display: table;
        clear: both;
    }
    .c-modal .twocols .inputholder {
        width: 47%;
    }
    .c-modal .twocols .inputholder input {
        margin-top: 0;
    }
    .c-modal .twocols .inputholder.select {
        margin-top: 0;
    }
    .c-modal .twocols .inputholder.select.error {
        margin-bottom: 0;
    }
    .c-modal .twocols .inputholder:first-child {
        float: left;
    }
    .c-modal .twocols .inputholder:last-child {
        float: right;
    }
}
.c-modal .success {
    display: none;
    text-align: center;
}
.c-modal .success p {
    margin: 2.5em 0 3.5em 0;
}
.c-modal .success svg {
    display: block;
    margin: 0 auto 1.25rem auto;
    width: 3.75rem;
    height: 3.75rem;
    fill: #000;
}
.grecaptcha-badge {
    display: none;
}
.us-modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 1.5rem;
    -webkit-animation: fadeIn 400ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 400ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.us-modal .panel {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 1.5rem;
    width: 90%;
    width: calc(100% - 3rem);
    max-width: 37rem;
    -webkit-animation: slideInUpCentred 400ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideInUpCentred 400ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 900px) {
    .us-modal .panel {
        padding: 2.5rem;
        max-width: 38rem;
    }
}
.us-modal.hide {
    -webkit-animation: fadeOut 400ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeOut 400ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.us-modal.hide .panel {
    -webkit-animation: slideOutUpCentred 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideOutUpCentred 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.us-modal .flag {
    display: block;
    width: 3rem;
    height: auto;
}
.us-modal h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
    font-size: 130%;
    line-height: 1.5;
    margin: 0.75rem 0 0 0;
}
@media (min-width: 460px) {
    .us-modal h3 {
        font-size: 150%;
    }
}
.us-modal p {
    color: #4e4e4e;
    line-height: 1.5;
    margin: 1.5em 0 2.5em 0;
}
.us-modal .btns a {
    float: left;
    padding: 1.5em 0;
    font-size: 80%;
    width: 48.5%;
    width: calc(50% - 0.5rem);
    text-align: center;
}
.us-modal .btns a:last-child {
    float: right;
}
.us-modal .close {
    position: absolute;
    z-index: 1;
    top: 1.7rem;
    right: 1.5rem;
    width: 1.1rem;
    height: 1.1rem;
}
.us-modal .close svg {
    fill: #aaa;
    width: 100%;
    height: 100%;
    transition: fill 125ms ease-out;
}
.us-modal .close:hover svg {
    fill: #4e4e4e;
}
.series-tabs {
    position: absolute;
    z-index: 3;
    top: 1.5rem;
    left: 1.5rem;
}
@media (min-width: 900px) {
    .series-tabs {
        top: 3rem;
    }
}
@media (min-width: 900px) {
    .series-tabs {
        left: 3rem;
    }
}
.series-tabs a {
    display: inline-block;
    margin-right: 0.5em;
}
.series-tabs a svg {
    width: 3.33rem;
    height: auto;
}
.series-tabs a #outline,
.series-tabs a #bg {
    transition: opacity 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.series-tabs a #letters {
    transition: fill 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.series-tabs a:last-child {
    margin-right: 0;
}
.series-tabs a.active #outline,
.series-tabs a:hover #outline {
    opacity: 0;
}
.series-tabs a.active #letters,
.series-tabs a:hover #letters {
    fill: #1e1e1e;
}
.series-tabs a.active #bg,
.series-tabs a:hover #bg {
    opacity: 1;
}
@media (min-width: 1000px) {
    .series-tabs a {
        margin-right: 0.75em;
    }
    .series-tabs a svg {
        width: 5.5rem;
    }
    .series-tabs a:last-child {
        margin-right: 0;
    }
}
@media (min-width: calc(1200px + 6rem)) {
    .series-tabs {
        left: calc((100vw - 1200px) / 2);
    }
}
@media (min-width: 1400px) {
    .series-tabs {
        top: 5.01rem;
    }
}
.herobgimage {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.herobgimage.vtop {
    background-position-y: 5%;
}
.herobgimage.vbottom {
    background-position-y: 95%;
}
.herobgimage.vcustom-tennis {
    background-position-y: 22%;
}
.herobgimage.vcustom-squash {
    background-position-y: 56%;
}
.herobgimage.hleft {
    background-position-x: 20%;
}
.herobgimage.hright {
    background-position-x: 80%;
}
.herobgimage.mid,
.herobgimage.large {
    display: none;
}
@media (min-width: 720px) {
    .herobgimage.small {
        display: none;
    }
    .herobgimage.mid {
        display: block;
    }
}
@media (min-width: 1300px) {
    .herobgimage.mid {
        display: none;
    }
    .herobgimage.large {
        display: block;
    }
}
.hero {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 10rem;
    min-height: 19rem;
    position: relative;
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 3rem 1.5rem;
    padding-left: 3.75rem;
    padding-right: 2.25rem;
}
.hero.vtop {
    background-position-y: 5%;
}
.hero.vbottom {
    background-position-y: 95%;
}
.hero.vcustom-tennis {
    background-position-y: 22%;
}
.hero.vcustom-squash {
    background-position-y: 56%;
}
.hero.hleft {
    background-position-x: 20%;
}
.hero.hright {
    background-position-x: 80%;
}
@media (min-width: 900px) {
    .hero {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.hero.slim {
    min-height: 12.75rem;
}
.hero.mid {
    min-height: 14rem;
}
.hero.tall {
    min-height: 28.5rem;
}
.hero.bgtennis {
    background-color: #008f41;
}
.hero.bgsquash {
    background-color: #be152d;
}
.hero.bgpadel {
    background-color: #e94e17;
}
.hero .inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.hero .shade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #000;
    background-image: linear-gradient(90deg, #000, transparent);
    -webkit-animation: hero-shade-appear 1000ms 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: hero-shade-appear 1000ms 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    mix-blend-mode: multiply;
}
.hero.parallax {
    background-color: transparent;
}
.hero::after {
    position: absolute;
    z-index: 2;
    content: "";
    left: 0;
    top: 50%;
    width: 1.5rem;
    height: 6px;
    background-color: #cf0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.hero h1 {
    line-height: 1.5;
    font-size: 160%;
}
.hero h1.category {
    font-size: 90%;
    color: #cf0;
    margin-bottom: 0.2em;
}
.hero .intro {
    font-size: 90%;
    line-height: 2;
    margin: 1em 0 0 0;
    color: #fff;
    max-width: 31em;
}
@media (min-width: 500px) {
    .hero {
       /* min-height: 21rem;*/
        padding-right: 3.75rem;
    }
    .hero.slim {
        min-height: 14rem;
    }
    .hero.mid {
        min-height: 18rem;
    }
    .hero.tall {
        min-height: 31.5rem;
    }
    .hero h1 {
        font-size: 210%;
    }
}
@media (min-width: 720px) {
    .hero {
        min-height: 14rem;
    }
    .hero.slim {
        min-height: 16rem;
    }
    .hero.mid {
        min-height: 24rem;
    }
    .hero.tall {
        min-height: 36rem;
    }
    .hero h1 {
        font-size: 250%;
        max-width: 90%;
    }
    .hero h1.category {
        font-size: 110%;
    }
    .hero .intro {
        font-size: 100%;
    }
}
@media (min-width: 900px) {
    .hero {
        min-height: 22rem;
        padding-left: 6rem;
        padding-right: 6rem;
    }
    .hero.slim {
        min-height: 21.5rem;
    }
    .hero.mid {
        min-height: 34rem;
    }
    .hero.tall {
        min-height: 613px;
    }
    .hero::after {
        width: 3rem;
        height: 10px;
    }
    .hero h1 {
        font-size: 380%;
    }
    .hero h1.category {
        font-size: 150%;
        margin-bottom: 0;
    }
}
@media (min-width: 1200px) {
    .hero h1 {
        max-width: 80%;
    }
}
@media (min-width: 1200px) {
    .hero h1 {
        max-width: 75%;
    }
}
.super-graphic {
    display: none;
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    left: calc(100% - 24rem);
    right: 0;
}
.super-graphic.tennis.one {
    background-image: url("../img/pattern-tennis-1.svg");
    bottom: 0;
    height: 80%;
    background-position: 0% 0%;
    background-size: auto 120%;
}
.super-graphic.tennis.two {
    background-image: url("../img/pattern-tennis-2.svg");
    top: 0;
    height: 80%;
    background-position: 0% 100%;
    background-size: auto 110%;
}
.super-graphic.tennis.three {
    background-image: url("../img/pattern-tennis-2.svg");
    bottom: 0;
    height: 90%;
    background-position: 0% 100%;
    background-size: auto 120%;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.super-graphic.tennis.four {
    background-image: url("../img/pattern-tennis-3.svg");
    bottom: 0;
    height: 80%;
    background-position: 0% 0%;
    background-size: auto 120%;
}
.super-graphic.squash.one {
    background-image: url("../img/pattern-squash-1.svg");
    top: 0;
    height: 90%;
    background-size: auto 100%;
    background-position: 0% 0%;
}
.super-graphic.squash.two {
    background-image: url("../img/pattern-squash-2.svg");
    top: 0;
    height: 100%;
    background-size: auto 123%;
    background-position: 0% 20%;
}
.super-graphic.squash.three {
    background-image: url("../img/pattern-squash-1.svg");
    top: 0;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    background-size: auto 130%;
    background-position: 0% 0%;
    height: 80%;
}
.super-graphic.squash.four {
    background-image: url("../img/pattern-squash-3.svg");
    top: 0;
    height: 45%;
    background-size: auto 163%;
    background-position: 0% 100%;
    -webkit-transform: translateX(-4rem);
    transform: translateX(-4rem);
}
.super-graphic.padel.one {
    background-image: url("../img/pattern-padel-1.svg");
    height: 90%;
    bottom: 0;
    background-size: auto 133%;
    background-position: 0% 0%;
}
.super-graphic.padel.two {
    background-image: url("../img/pattern-padel-1.svg");
    top: 0;
    height: 75%;
    background-size: auto 170%;
    background-position: 0% 100%;
}
.super-graphic.padel.three {
    background-image: url("../img/pattern-padel-1.svg");
    height: 75%;
    bottom: 0;
    background-size: auto 150%;
    background-position: 0% 0%;
}
.super-graphic.padel.four {
    background-image: url("../img/pattern-padel-2.svg");
    height: 70%;
    top: 0;
    background-size: auto 125%;
    background-position: 0% 100%;
}
.super-graphic.cat-tennis,
.super-graphic.cat-squash,
.super-graphic.cat-padel,
.super-graphic.cat-badminton {
    top: 0;
    height: 100%;
    background-size: auto 175%;
}
.super-graphic.cat-tennis {
    background-image: url("../img/pattern-tennis-4.svg");
    background-position: 0% 25%;
}
.super-graphic.cat-squash {
    background-image: url("../img/pattern-squash-4.svg");
    background-position: 0% 99%;
}
.super-graphic.cat-padel {
    background-image: url("../img/pattern-padel-1.svg");
    background-size: auto 250%;
    background-position: 0% 5%;
}
.super-graphic.cat-badminton {
    background-image: url("../img/pattern-badminton-1.svg");
    background-size: auto 200%;
    background-position: 0% 75%;
}
@media (min-width: 720px) {
    .super-graphic {
        display: block;
    }
}
@media (min-width: 900px) {
    .super-graphic {
        left: calc(100% - 32rem);
    }
}
.instafeed {
    background-color: #121212;
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .instafeed {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.instafeed .column {
    width: calc((100% - 3rem) / 2);
    position: relative;
    background-color: #121212;
}
.instafeed .column:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
@media (min-width: 900px) {
    .instafeed .column {
        width: calc((100% - 4rem) / 2);
    }
}
.instafeed .column a {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: fadeIn 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: fadeIn 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.instafeed .column a.vtop {
    background-position-y: 5%;
}
.instafeed .column a.vbottom {
    background-position-y: 95%;
}
.instafeed .column a.vcustom-tennis {
    background-position-y: 22%;
}
.instafeed .column a.vcustom-squash {
    background-position-y: 56%;
}
.instafeed .column a.hleft {
    background-position-x: 20%;
}
.instafeed .column a.hright {
    background-position-x: 80%;
}
@media (min-width: 600px) {
    .instafeed .column {
        width: calc((100% - 6rem) / 4);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .instafeed .column {
        width: calc((100% - 8rem) / 4);
    }
}
.signup {
    padding: 3rem 1.5rem;
    border-top: solid 1px #dedede;
}
@media (min-width: 900px) {
    .signup {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.signup .grid.fadeout {
    -webkit-animation: fadeOut 250ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeOut 250ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.signup h2 {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .signup h2 {
        width: calc((100% - 2rem) / 1);
    }
}
.signup form {
    position: relative;
    width: calc((100% - 1.5rem) / 1);
    padding-top: 0.5rem;
}
.signup form::after {
    content: "";
    display: table;
    clear: both;
}
@media (min-width: 900px) {
    .signup form {
        width: calc((100% - 2rem) / 1);
    }
}
.signup p {
    margin-bottom: 2.5em;
}
.signup .fields {
    position: relative;
}
.signup .fields::after {
    content: "";
    display: table;
    clear: both;
}
.signup input,
.signup .submit {
    float: left;
    line-height: 4rem;
    height: 4rem;
    margin: 0;
    box-sizing: border-box;
}
.signup input {
    border: solid 1px #aaa;
    font-family: inherit;
    font-size: 110%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: calc(100% - 4rem);
    max-width: 32em;
    color: #000;
}
.signup input::-webkit-input-placeholder {
    color: #aaa;
}
.signup input:-ms-input-placeholder {
    color: #aaa;
}
.signup input::-ms-input-placeholder {
    color: #aaa;
}
.signup input::placeholder {
    color: #aaa;
}
.signup input:invalid {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}
.signup .disclaimer {
    font-size: 85%;
    margin-top: 2em;
    margin-bottom: 0;
}
.signup .error {
    position: absolute;
    top: -1.67rem;
    left: 0;
    margin: 0;
    color: #e4002b;
    font-weight: bold;
    font-size: 100%;
    opacity: 0;
    transition: opacity 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.signup .error.show {
    opacity: 1;
}
.signup a.submit {
    display: block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    border-top: solid 1px #aaa;
    border-right: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
    width: 4rem;
    text-align: center;
    font-size: 95%;
    color: #000;
    background-color: #fff;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
}
.signup a.submit span {
    display: none;
}
.signup a.submit svg {
    width: 1em;
    height: 1em;
    padding-top: 0.2em;
    padding-left: 0.15em;
    fill: #000;
}
.signup a.submit:hover {
    background-position: 0% 0%;
}
@media (min-width: 550px) {
    .signup input {
        width: calc(100% - 10rem);
    }
    .signup a.submit {
        width: 10rem;
    }
    .signup a.submit span {
        display: inline;
    }
    .signup a.submit svg {
        display: none;
    }
}
@media (min-width: 1100px) {
    .signup h2 {
        width: calc((100% - 6rem) / 4);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .signup h2 {
        width: calc((100% - 8rem) / 4);
    }
}
@media (min-width: 1100px) {
    .signup form {
        width: calc((100% - 2rem) / 1.3333333333);
        padding-top: 0;
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .signup form {
        width: calc((100% - 2.6666666667rem) / 1.3333333333);
    }
}
@media (min-width: 1100px) {
    .signup p {
        margin-top: 0;
    }
}
.signup .thanks {
    display: none;
    position: relative;
    padding: 3rem 0 3rem 3.5rem;
    -webkit-animation: fadeIn 250ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 250ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.signup .thanks .tick {
    position: absolute;
    font-size: 150%;
    top: 3rem;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    background-color: #cf0;
    border-radius: 50%;
}
.signup .thanks .tick svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    fill: #000;
    width: 0.6em;
    height: 0.6em;
}
.signup .thanks h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #000;
    text-transform: uppercase;
    font-size: 150%;
    margin: 0;
}
.signup .thanks p {
    margin: 0.75em 0 0 0;
}
@media (min-width: 720px) {
    .signup .thanks {
        padding: 3rem 0 3rem 4.5rem;
    }
    .signup .thanks .tick,
    .signup .thanks h3 {
        font-size: 180%;
    }
    .signup .thanks .tick {
        top: 3.1rem;
    }
}
.find-retailer {
    padding: 3rem 1.5rem;
    background-color: #000;
    background-repeat: no-repeat;
}
@media (min-width: 900px) {
    .find-retailer {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.find-retailer .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 0 2em 0;
}
.find-retailer h2 {
    max-width: 12em;
    font-size: 120%;
    line-height: 1.8;
    padding-bottom: 1.25em;
}
.find-retailer h2::after {
    width: 1.5em;
    height: 0.2em;
}
.find-retailer .retailer-search-form {
    border-bottom-color: #fff;
}
.find-retailer .retailer-search-form svg {
    fill: #fff;
}
.find-retailer .retailer-search-form input {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    width: calc(100% - 2.5em);
    font-size: 80%;
}
.find-retailer .retailer-search-form input::-webkit-input-placeholder {
    color: #fff;
    opacity: 1;
}
.find-retailer .retailer-search-form input:-ms-input-placeholder {
    color: #fff;
    opacity: 1;
}
.find-retailer .retailer-search-form input::-ms-input-placeholder {
    color: #fff;
    opacity: 1;
}
.find-retailer .retailer-search-form input::placeholder {
    color: #fff;
    opacity: 1;
}
.find-retailer.far-sx {
    border-top: solid 1px #dedede;
}
.find-retailer.far-nanoblade h2:after {
    background-color: #be152d;
}
.find-retailer.far-graviton h2:after {
    background-color: #f9ff44;
}
.find-retailer.far-fx h2:after {
    background-color: #009fe1;
}
@media (min-width: 550px) {
    .find-retailer .inner {
        padding: 2em 0 4em 0;
    }
    .find-retailer h2 {
        font-size: 150%;
    }
}
@media (min-width: 700px) {
    .find-retailer.far-sx {
        background-image: url("../img/far-sx.jpg");
        background-size: auto 80%;
        background-position: 93% 100%;
    }
    .find-retailer.far-galactica {
        background-image: url("../img/far-galactica.jpg");
        background-size: auto 90%;
        background-position: 90% 100%;
    }
    .find-retailer.far-nanoblade {
        background-image: url("../img/far-nanoblade.jpg");
        background-size: auto 90%;
        background-position: 85% 100%;
    }
    .find-retailer.far-graviton {
        background-image: url("../img/far-graviton.jpg");
        background-size: auto 90%;
        background-position: 90% 100%;
    }
    .find-retailer.far-xt {
        background-image: url("../img/far-xt.jpg");
    }
    .find-retailer.far-sc {
        background-image: url("../img/far-sc.jpg");
    }
    .find-retailer.far-xt,
    .find-retailer.far-sc {
        background-size: auto 85%;
        background-position: 85% 100%;
    }
    .find-retailer.far-fx {
        background-image: url("../img/far-fx.jpg");
        background-size: auto 85%;
        background-position: 95% 100%;
    }
    .find-retailer .inner {
        padding: 4em 0 6em 0;
    }
    .find-retailer h2 {
        font-size: 200%;
    }
    .find-retailer form {
        width: 24rem;
    }
}
@media (min-width: 900px) {
    .find-retailer h2 {
        font-size: 250%;
    }
    .find-retailer.far-fx {
        background-position: 92% 100%;
    }
}
@media (min-width: 1000px) {
    .find-retailer.far-sx {
        background-size: auto 85%;
        background-position: 85% 100%;
    }
    .find-retailer.far-galactica {
        background-size: auto 85%;
        background-position: 80% 100%;
    }
    .find-retailer.far-nanoblade {
        background-position: 75% 100%;
    }
    .find-retailer.far-graviton {
        background-position: 80% 100%;
    }
    .find-retailer.far-xt,
    .find-retailer.far-sc,
    .find-retailer.far-fx {
        background-size: auto 92.5%;
        background-position: 85% 100%;
    }
}
@media (min-width: 1200px) {
    .find-retailer.far-fx {
        background-position: 75% 100%;
    }
}
.page-error .pagebody {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-error .pagebody {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-error .pagebody .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-error .minheight {
    min-height: 50vh;
}
.hero-carousel {
    position: relative;
    padding: 0;
    display: block;
    height: auto;
}
.hero-carousel::after {
    display: none;
}
.hero-carousel .slide {
    position: relative;
    display: block;
    width: 100%;
    /*height: 28.5rem;*/
    background-size: 100% auto;
    background-repeat: no-repeat;
    overflow: hidden;
}
.hero-carousel .slide.hideonload {
    display: none;
}
.hero-carousel .slide.invisibleonload {
    visibility: hidden;
}
.hero-carousel .content {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 3rem;
    padding-right: 3rem;

}
.slide>div {
    height: 254px !important;
} 
@media (min-width: 900px) {
    .hero-carousel .content {
        padding-left: 6rem;
        padding-right: 6rem;
    }
}
.hero-carousel .content .content-inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.hero-carousel .carousel-arrow {
    display: none;
    top: initial;
    bottom: 1px;
    -webkit-transform: none;
    transform: none;
}
.hero-carousel .carousel-arrow.right {
    right: 0;
}
.hero-carousel .carousel-arrow.left {
    left: initial;
    right: 3.5rem;
    right: calc(3.5rem + 1px);
}
.hero-carousel a.explore {
    position: absolute;
    z-index: 4;
    bottom: 1.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: fadeIn 1000ms 3000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 3000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 720px) {
    .hero-carousel a.explore {
        bottom: 3rem;
    }
}
@media (min-width: 1000px) {
    .hero-carousel a.explore {
        bottom: 4rem;
    }
}
@media (min-width: 500px) {
    .hero-carousel .slide {
        min-height: 180px;
    }
    .hero-carousel .carousel-arrow {
        display: block;
    }
}
@media (min-width: 720px) {
    .hero-carousel .slide {
        min-height: 420px;
    }
}
@media (min-width: 900px) {
    .hero-carousel .slide {
        min-height: 420px;
    }
}
@media (min-width: 1100px) {
    .hero-carousel .carousel-arrow {
        width: 4rem;
        height: 4rem;
    }
    .hero-carousel .carousel-arrow.left {
        right: 4rem;
        right: calc(4rem + 1px);
    }
}
.hslide-template1 .content {
    z-index: 2;
    top: 80%;
}
.hslide-template1 .content h1 {
    font-size: 220%;
    margin-bottom: 0.75em;
}
.hslide-template1 .content p {
    color: #fff;
    font-size: 100%;
    margin: 1em 0;
    -webkit-animation: fadeIn 800ms 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    max-width: 29em;
    line-height: 1.8;
}
.hslide-template1 .content .buttons {
    text-align: center;
    -webkit-animation: fadeIn 800ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-template1 .content .buttons a {
    font-size: 80%;
    padding: 1.25em 2.5em;
    margin: 0 0.67em;
}
.hslide-template1 .content h1,
.hslide-template1 .content p,
.hslide-template1 .content .buttons a {
    display: none;
}
.hslide-template1 .content .buttons a:first-child {
    display: inline-block;
}
@media (min-width: 500px) {
    .hslide-template1 .content .buttons a {
        display: inline-block;
    }
    .slide>div {
        height: 254px !important;
    }    
}
@media (min-width: 720px) {
    .hslide-template1 .content {
        top: 50%;
    }
    .hslide-template1 .content h1,
    .hslide-template1 .content p {
        display: block;
    }
    .hslide-template1 .content h1,
    .hslide-template1 .content p,
    .hslide-template1 .content .buttons {
        width: 55%;
    }
    .hslide-template1 .content .buttons {
        text-align: left;
        margin-top: 3.75rem;
    }
    .hslide-template1 .content .buttons a {
        margin: 0 1em 0 0;
    }
    .hslide-template1 .content .buttons a:last-child {
        margin: 0;
    }
    .slide>div {
        height: 420px !important;
    }
}
@media (min-width: 900px) {
    .hslide-template1 .content .buttons a {
        font-size: 86%;
    }
    .hslide-template1 .content p span {
        display: block;
    }
}
@media (min-width: 1000px) {
    .hslide-template1 .content h1 {
        font-size: 280%;
        margin-bottom: 0.67em;
    }
}
@media (min-width: 1200px) {
    .hslide-template1 .content h1 {
        font-size: 320%;
        margin-bottom: 0.5em;
    }
}
.hslide-ao {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #002b6f;
}
.hslide-ao .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    height: calc(100% + 20px);
    background-repeat: no-repeat;
    background-size: 140% auto;
    background-position-x: 50%;
    background-position-y: -5vw;
    background-image: url("../img/ao-hero-bg.jpg");
    -webkit-animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.hslide-ao .overlay {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.hslide-ao .title {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 225px;
    margin-bottom: 2rem;
    -webkit-animation: slideInUp 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideInUp 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-ao .balls {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 33%;
    height: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-ao .std-button {
    display: inline-block;
    font-size: 86%;
    margin-top: 0.5rem;
    transition: all 125ms ease-out;
    padding: 1.33em 2.5em;
    color: #fff;
    border-color: #fff;
    background-color: transparent;
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
    -webkit-animation: fadeIn 2000ms 1500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 2000ms 1500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.hslide-ao .std-button:hover {
    border-color: #fff;
    color: #000;
    background-color: #fff;
}
.hslide-ao .ball {
    position: absolute;
    display: none;
    z-index: 2;
    width: auto;
    -webkit-animation: fadeIn 8000ms 500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 8000ms 500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.hslide-ao .ball1 {
    width: 20rem;
    top: -10rem;
    left: -2%;
}
.hslide-ao .ball2 {
    width: 18rem;
    top: 5rem;
    right: -13rem;
}
.hslide-ao .ball3 {
    width: 28rem;
    bottom: -18.5rem;
    left: 57%;
}
@media (min-width: 600px) {
    .hslide-ao .bg {
        background-size: 100% auto;
        background-position-y: 80%;
    }
    .hslide-ao .overlay {
        width: 420px;
        text-align: left;
        padding-left: 170px;
    }
    .hslide-ao .balls {
        display: block;
    }
    .hslide-ao .title {
        margin: 0;
        width: 100%;
    }
    .hslide-ao .std-button {
        margin: 3rem 0 0 4%;
    }
}
@media (min-width: 720px) {
    .hslide-ao .overlay {
        width: 480px;
        padding-left: 180px;
    }
    .hslide-ao .std-button {
        margin-left: 10%;
    }
}
@media (min-width: 850px) {
    .hslide-ao .ball {
        display: block;
    }
}
@media (min-width: 900px) {
    .hslide-ao .overlay {
        width: 620px;
        padding-left: 248px;
    }
    .hslide-ao .std-button {
        margin-top: 4rem;
        margin-left: 15%;
    }
}
@media (min-width: 1100px) {
    .hslide-ao .ball1 {
        left: 8%;
    }
}
.hslide-cx {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.hslide-cx::before,
.hslide-cx::after {
    display: none;
    content: "";
    position: absolute;
    z-index: 1;
    background: url("../img/jfp-line.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 10rem;
    height: 6px;
}
.hslide-cx::before {
    top: 80%;
    left: -4rem;
    background-position: 100% 50%;
}
.hslide-cx::after {
    top: 34%;
    right: -5rem;
    background-position: 0% 50%;
}
.hslide-cx .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 1710px;
    height: 118%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-image: url("../img/jfp-hero-bg.jpg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 44% 50%;
    -webkit-animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-cx .overlay {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 90%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    text-align: center;
}
.hslide-cx .overlay img {
    width: 100%;
    height: auto;
}
.hslide-cx .overlay .std-button {
    display: inline-block;
    font-size: 86%;
    margin-top: 0.5rem;
    transition: all 125ms ease-out;
    padding: 1.33em 2.5em;
    color: #fff;
    border-color: #fff;
    background-color: transparent;
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
}
.hslide-cx .overlay .std-button:hover {
    border-color: #fff;
    color: #000;
    background-color: #fff;
}
@media (min-width: 400px) {
    .hslide-cx .overlay {
        width: 370px;
    }
    .hslide-cx .overlay .std-button {
        margin-top: 0;
    }
}
@media (min-width: 500px) {
    .hslide-cx .overlay {
        width: 430px;
    }
}
@media (min-width: 720px) {
    .hslide-cx::before,
    .hslide-cx::after {
        display: block;
    }
    .hslide-cx .overlay {
        width: 500px;
    }
}
@media (min-width: 900px) {
    .hslide-cx .bg {
        left: -450px;
        right: 0;
        width: auto;
        -webkit-transform: none;
        transform: none;
        background-position-x: 0;
    }
    .hslide-cx .overlay {
        width: 600px;
    }
    .hslide-cx .overlay .std-button {
        margin-top: -1rem;
    }
}
@media (min-width: 1100px) {
    .hslide-cx .overlay {
        width: 660px;
        left: auto;
        right: 2%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
@media (min-width: 1300px) {
    .hslide-cx .overlay {
        width: 750px;
        right: auto;
        left: 50%;
        -webkit-transform: translate(-14%, -50%);
        transform: translate(-14%, -50%);
    }
}
@media (min-width: 1200px) {
    .hslide-cx .bg {
        left: calc(-450px + ((100vw - 1200px) / 2));
    }
}
.hslide-template1-cx .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-image: url("../img/hslide-jfp-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: fadeIn 800ms 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-template1-cx .overlay {
    position: absolute;
    z-index: 1;
    -webkit-animation: fadeIn 800ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 440px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-image: url("../img/hslide-jfp-overlay-small.svg");
    background-position: 50% 53%;
    background-size: 85% auto;
    background-repeat: no-repeat;
}
@media (min-width: 720px) {
    .hslide-template1-cx .bg {
        left: 75%;
        background-size: contain;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .hslide-template1-cx .overlay {
        left: 75%;
        max-width: none;
        background-size: 345px auto;
        background-position: 50% 47.5%;
    }
}
@media (min-width: 900px) {
    .hslide-template1-cx .overlay {
        background-image: url("../img/hslide-jfp-overlay-large.svg");
        background-size: 645px auto;
        background-position: 50% 54%;
    }
}
@media (min-width: 1100px) {
    .hslide-template1-cx .overlay {
        background-size: 675px auto;
        background-position: 50% 56%;
    }
}
.hslide-template1-ao {
    background-color: #002b6f;
}
.hslide-template1-ao .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-image: url("../img/hslide-ao-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: fadeIn 800ms 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-template1-ao .overlay {
    position: absolute;
    z-index: 1;
    -webkit-animation: fadeIn 800ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    top: 42%;
    left: 50%;
    width: 75%;
    height: auto;
    max-width: 300px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media (min-width: 720px) {
    .hslide-template1-ao .bg {
        background-position: 50% -20vw;
    }
    .hslide-template1-ao .overlay {
        top: 50%;
        left: auto;
        right: 2.5rem;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        max-width: none;
        width: 300px;
    }
}
@media (min-width: 900px) {
    .hslide-template1-ao .overlay {
        width: 330px;
    }
    .hslide-template1-ao .content p {
        width: 64%;
        max-width: none;
    }
}
@media (min-width: 1000px) {
    .hslide-template1-ao .overlay {
        right: 25%;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }
}
@media (min-width: 1100px) {
    .hslide-template1-ao .overlay {
        width: 350px;
    }
    .hslide-template1-ao .content p {
        width: 64%;
    }
}
@media (min-width: 1300px) {
    .hslide-template1-ao .overlay {
        width: 375px;
        right: calc(33rem + (50vw - 650px));
    }
}
.hslide-template1-nt {
    background-color: #000;
}
.hslide-template1-nt .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-image: url("../img/hslide-nt-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    -webkit-animation: fadeIn 800ms 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-template1-nt .screen {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.67);
}
.hslide-template1-nt .content {
    top: 50%;
}
.hslide-template1-nt .content h1 {
    display: block;
    text-align: center;
}
@media (min-width: 720px) {
    .hslide-template1-nt .bg {
        background-size: auto 100%;
        background-position: 100% 50%;
    }
    .hslide-template1-nt .screen {
        display: none;
    }
    .hslide-template1-nt .content h1 {
        text-align: left;
    }
}
.hslide-atp {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.hslide-atp .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-image: url("../img/atp-hhero-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-position: 30% 50%;
    -webkit-animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-atp .bg.vtop {
    background-position-y: 5%;
}
.hslide-atp .bg.vbottom {
    background-position-y: 95%;
}
.hslide-atp .bg.vcustom-tennis {
    background-position-y: 22%;
}
.hslide-atp .bg.vcustom-squash {
    background-position-y: 56%;
}
.hslide-atp .bg.hleft {
    background-position-x: 20%;
}
.hslide-atp .bg.hright {
    background-position-x: 80%;
}
.hslide-atp .overlay {
    display: block;
    position: absolute;
    z-index: 1;
    top: 48%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    text-align: center;
}
.hslide-atp .overlay img {
    display: block;
    width: 8rem;
    height: auto;
    margin: 0 auto;
}
.hslide-atp .overlay h1 {
    font-size: 200%;
    color: #cf0;
    margin: 0.2rem auto 1.5rem auto;
    max-width: 10em;
    line-height: 1.3;
}
.hslide-atp .overlay .std-button {
    display: inline-block;
    font-size: 86%;
    transition: all 125ms ease-out;
    width: 15em;
    padding: 1.33em 0;
    text-align: center;
    color: #fff;
    border-color: #fff;
    background-color: transparent;
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
}
.hslide-atp .overlay .std-button:hover {
    border-color: #fff;
    color: #000;
    background-color: #fff;
}
.hslide-atp .overlay .std-button:last-of-type {
    display: none;
    margin-left: 1rem;
}
@media (min-width: 500px) {
    .hslide-atp .bg {
        background-position-x: 20%;
    }
    .hslide-atp .overlay img {
        width: 9rem;
    }
    .hslide-atp .overlay h1 {
        font-size: 250%;
        margin-top: 0;
    }
}
@media (min-width: 600px) {
    .hslide-atp .bg {
        background-position-x: 0%;
    }
}
@media (min-width: 720px) {
    .hslide-atp .bg {
        background-position: 50% 12%;
    }
    .hslide-atp .overlay {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: left;
        width: 40rem;
        padding-left: 13rem;
    }
    .hslide-atp .overlay img {
        position: absolute;
        z-index: 1;
        top: 58%;
        left: 0;
        width: 18rem;
        -webkit-transform: translate(-32%, -50%);
        transform: translate(-32%, -50%);
    }
    .hslide-atp .overlay h1,
    .hslide-atp .overlay .std-button {
        position: relative;
        z-index: 2;
    }
    .hslide-atp .overlay h1 {
        font-size: 300%;
        margin: 0 0 3rem 0;
    }
}
@media (min-width: 900px) {
    .hslide-atp .overlay {
        width: 46.5rem;
        padding-left: 15rem;
    }
    .hslide-atp .overlay img {
        top: 58%;
        width: 23rem;
        -webkit-transform: translate(-32%, -50%);
        transform: translate(-32%, -50%);
    }
    .hslide-atp .overlay h1 {
        font-size: 350%;
    }
}
@media (min-width: 420px) {
    .page-tennis .hslide-atp .overlay .std-button:last-of-type {
        display: inline-block;
    }
}
@media (min-width: 720px) {
    .page-tennis .hslide-atp .overlay .std-button:last-of-type {
        margin-left: 1.5rem;
    }
    .page-tennis .hslide-atp .overlay {
        width: 41rem;
    }
}
@media (min-width: 900px) {
    .page-tennis .hslide-atp .overlay {
        width: 46.5rem;
    }
}
.hslide-sx {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #000;
}
.hslide-sx .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url("../img/sx-hero-bg-small.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
}
.hslide-sx .fg {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
.hslide-sx img {
    display: block;
    width: 65%;
    max-width: 290px;
    margin: 0 auto;
}
.hslide-sx h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #fff;
    margin: 2em 0 2.5em;
}
.hslide-sx .std-button {
    display: inline-block;
    font-size: 86%;
    transition: all 125ms ease-out;
    padding: 1.33em 1.67em;
    text-align: center;
    color: #fff;
    border-color: #fff;
    background-color: transparent;
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
}
.hslide-sx .std-button:hover {
    border-color: #fff;
    color: #000;
    background-color: #fff;
}
@media (min-width: 500px) {
    .hslide-sx img {
        max-width: 340px;
    }
    .hslide-sx h3 {
        margin: 1.75em 0 2em;
        font-size: 120%;
    }
}
@media (min-width: 720px) {
    .hslide-sx img {
        max-width: 420px;
    }
}
@media (min-width: 900px) {
    .hslide-sx img {
        max-width: 500px;
    }
    .hslide-sx h3 {
        font-size: 150%;
    }
}
@media (min-width: 1200px) {
    .hslide-sx .bg {
        height: 118%;
        background-image: url("../img/sx-hero-bg-large.jpg");
        background-size: cover;
    }
}
.hslide-sx .tab {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 40px;
    height: auto;
}
.hslide-sx video {
    width: 80%;
    max-width: 345px;
    height: auto;
    opacity: 0.01;
    margin-bottom: 1rem;
}
.hslide-sx video.show {
    opacity: 1;
}
.hslide-sx .buttons .std-button {
    padding-left: 0;
    padding-right: 0;
    width: 14.5em;
}
.hslide-sx .buttons .std-button:last-child {
    display: none;
    margin-left: 1em;
}
@media (min-width: 500px) {
    .hslide-sx video {
        width: 400px;
        max-width: none;
    }
    .hslide-sx .buttons .std-button:last-child {
        display: inline-block;
    }
}
@media (min-width: 720px) {
    .hslide-sx {
        background-image: url("../img/sx-blocks.svg");
        background-repeat: no-repeat;
        background-size: auto 130% !important;
        background-position: 2vw 50%;
    }
    .hslide-sx .tab {
        width: 65px;
    }
}
@media (min-width: 900px) {
    .hslide-sx {
        background-size: auto 125% !important;
        background-position: 2.5vw 50%;
    }
    .hslide-sx .fgmain {
        top: 48%;
    }
    .hslide-sx video {
        width: 575px;
    }
}
@media (min-width: 1100px) {
    .hslide-sx {
        background-position: 6vw 50%;
    }
}
.hslide-gal {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #000;
}
.hslide-gal::before,
.hslide-gal::after {
    content: "";
    position: absolute;
    z-index: 2;
    background-image: url("../img/gal-shape-3.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.hslide-gal::before {
    top: -3rem;
    left: -5rem;
    width: 10rem;
    height: 10rem;
}
.hslide-gal::after {
    bottom: -5rem;
    right: -7rem;
    width: 14rem;
    height: 14rem;
}
.hslide-gal .bg,
.hslide-gal .fade {
    position: absolute;
    bottom: 0;
}
.hslide-gal .bg {
    z-index: 0;
    left: 0;
    width: 100%;
    height: 118%;
    background-image: url("../img/gal-hslide-small.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-gal .fade {
    display: none;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 1120px;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.33), #000);
}
.hslide-gal .overlay {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 75%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    text-align: center;
}
.hslide-gal .logo {
    width: 95%;
    height: auto;
    margin: 0 auto;
}
.hslide-gal p {
    color: #fff;
    line-height: 1.8;
    margin: 1.5em auto 3em auto;
    max-width: 24em;
}
.hslide-gal .std-button {
    display: inline-block;
    font-size: 86%;
    transition: all 125ms ease-out;
    padding: 1.33em 2.5em;
    color: #fff;
    border-color: #fff;
    background-color: transparent;
    background-image: linear-gradient(-30deg, transparent 50%, #fff 50%);
}
.hslide-gal .std-button:hover {
    border-color: #fff;
    color: #000;
    background-color: #fff;
}
.hslide-gal .std-button:last-child {
    display: none;
    margin-left: 1em;
}
@media (min-width: 500px) {
    .hslide-gal .std-button:last-child {
        display: inline-block;
    }
}
@media (min-width: 720px) {
    .hslide-gal::before {
        top: -3rem;
        left: -6rem;
        width: 12rem;
        height: 12rem;
    }
    .hslide-gal::after {
        bottom: -5rem;
        right: -8rem;
        width: 16rem;
        height: 16rem;
    }
}
@media (min-width: 800px) {
    .hslide-gal .bg {
        background-image: url("../img/gal-hslide-large.jpg");
        background-position: 0% 50%;
        background-size: auto 100%;
    }
    .hslide-gal .fade {
        display: block;
    }
    .hslide-gal .overlay {
        top: 45%;
        width: 100%;
        max-width: 1200px;
    }
    .hslide-gal .inner {
        width: 60%;
        margin: 0 0 0 auto;
        text-align: left;
    }
    .hslide-gal .logo {
        width: 100%;
        -webkit-transform: translateX(-8%);
        transform: translateX(-8%);
    }
    .hslide-gal p {
        max-width: 27em;
        margin: 3em 0 4em;
    }
    .hslide-gal .std-button:last-child {
        margin-left: 2.5em;
    }
}
@media (min-width: 900px) {
    .hslide-gal::before {
        top: -5rem;
        left: -9rem;
        width: 18rem;
        height: 18rem;
    }
    .hslide-gal::after {
        bottom: -11rem;
        right: -15rem;
        width: 30rem;
        height: 30rem;
    }
    .hslide-gal .inner {
        width: 55%;
    }
    .hslide-gal .fade {
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000);
    }
}
@media (min-width: 1000px) {
    .hslide-gal .inner {
        width: 45%;
    }
}
@media (min-width: 1100px) {
    .hslide-gal .fade {
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 25%, #000);
    }
}
@media (min-width: 1300px) {
    .hslide-gal::after {
        bottom: -14rem;
        right: -18rem;
        width: 36rem;
        height: 36rem;
    }
}
.hslide-template1-nb .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-color: #000;
    background-image: url("../img/nanoblade-hero-bg.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 47.5% 50%;
}
.hslide-template1-nb .content {
    top: auto;
    bottom: 10%;
    -webkit-transform: none;
    transform: none;
    text-align: center;
}
.hslide-template1-nb .content .logo {
    width: 14rem;
    height: auto;
    margin: 0 auto 1.5rem auto;
    -webkit-animation: fadeIn 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-template1-nb .content h1 {
    display: block;
}
.hslide-template1-nb .content h1 span {
    color: #000;
}
.hslide-template1-nb .content h1 span:last-child {
    color: #fff;
}
.hslide-template1-nb .content .buttons {
    margin-top: 4rem;
}
.hslide-template1-nb .player {
    display: none;
    position: absolute;
    top: 0;
    left: 360px;
    right: 0;
    bottom: 0;
    background-size: auto 120%;
    background-position: 50% 25%;
    background-repeat: no-repeat;
    background-image: url("../img/nanoblade-player.png");
}
@media (min-width: 720px) {
    .hslide-template1-nb .bg {
        background-position: 50% 50%;
    }
    .hslide-template1-nb .content {
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: left;
    }
    .hslide-template1-nb .content .logo {
        width: 12rem;
        margin: 0 0 1.5rem 0;
        -webkit-transform: translateX(0.5rem);
        transform: translateX(0.5rem);
    }
    .hslide-template1-nb .content h1 {
        margin-bottom: 0;
    }
    .hslide-template1-nb .content p {
        max-width: 22em;
    }
    .hslide-template1-nb .content .buttons {
        margin-top: 3rem;
    }
    .hslide-template1-nb .player {
        display: block;
    }
}
@media (min-width: 775px) {
    .hslide-template1-nb .player {
        right: 3%;
    }
}
@media (min-width: 900px) {
    .hslide-template1-nb .content {
        top: 45%;
    }
    .hslide-template1-nb .content .logo {
        width: 14rem;
        margin-bottom: 2rem;
    }
    .hslide-template1-nb .content h1 {
        font-size: 280%;
        margin-bottom: 0;
    }
    .hslide-template1-nb .content p {
        font-size: 110%;
    }
    .hslide-template1-nb .player {
        left: 450px;
    }
}
@media (min-width: 1100px) {
    .hslide-template1-nb .player {
        left: 280px;
    }
}
@media (min-width: 1200px) {
    .hslide-template1-nb .content {
        top: 47%;
    }
    .hslide-template1-nb .content .logo {
        width: 16rem;
        margin-bottom: 2.5rem;
    }
    .hslide-template1-nb .content h1 {
        font-size: 320%;
    }
}
.hslide-template1-gravi .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background-color: #000;
    background-image: url("../img/graviton-hero-bg.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 47.5% 50%;
}
.hslide-template1-gravi .content {
    top: auto;
    bottom: 10%;
    -webkit-transform: none;
    transform: none;
    text-align: center;
}
.hslide-template1-gravi .content .logo {
    width: 14rem;
    height: auto;
    margin: 0 auto 1.5rem auto;
    -webkit-animation: fadeIn 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-template1-gravi .content h1 {
    display: block;
}
.hslide-template1-gravi .content h1 span {
    color: #fff506;
}
.hslide-template1-gravi .content h1 span:last-child {
    color: #fff;
}
.hslide-template1-gravi .content .buttons {
    margin-top: 4rem;
}
.hslide-template1-gravi .player {
    display: none;
    position: absolute;
    top: 0;
    left: 330px;
    right: 0;
    bottom: 0;
    background-size: auto 140%;
    background-position: 50% -10%;
    background-repeat: no-repeat;
    background-image: url("../img/graviton-player.png");
}
@media (min-width: 720px) {
    .hslide-template1-gravi .bg {
        background-position: 50% 50%;
    }
    .hslide-template1-gravi .content {
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: left;
    }
    .hslide-template1-gravi .content .logo {
        width: 12rem;
        margin: 0 0 1.5rem 0;
        -webkit-transform: translateX(0.5rem);
        transform: translateX(0.5rem);
    }
    .hslide-template1-gravi .content h1 {
        margin-bottom: 0;
    }
    .hslide-template1-gravi .content p {
        max-width: 22em;
    }
    .hslide-template1-gravi .content .buttons {
        margin-top: 3rem;
    }
    .hslide-template1-gravi .player {
        display: block;
    }
}
@media (min-width: 775px) {
    .hslide-template1-gravi .player {
        right: -5%;
    }
}
@media (min-width: 900px) {
    .hslide-template1-gravi .content {
        top: 45%;
    }
    .hslide-template1-gravi .content .logo {
        width: 14rem;
        margin-bottom: 2rem;
    }
    .hslide-template1-gravi .content h1 {
        font-size: 280%;
        margin-bottom: 0;
    }
    .hslide-template1-gravi .content p {
        font-size: 110%;
    }
}
@media (min-width: 1200px) {
    .hslide-template1-gravi .content {
        top: 47%;
    }
    .hslide-template1-gravi .content .logo {
        width: 16rem;
        margin-bottom: 2.5rem;
    }
    .hslide-template1-gravi .content h1 {
        font-size: 320%;
    }
}
.hslide-nl {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #0d2343;
}
.hslide-nl .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 118%;
    background-image: url("../img/sc-pixel-fade-1.png"), linear-gradient(#11111c, #0d2343);
    background-repeat: repeat-x, no-repeat;
    background-position: 50% 0%, 50% 50%;
    background-size: 16px auto, 100% 100%;
}
.hslide-nl .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.hslide-nl::before,
.hslide-nl::after {
    position: absolute;
    z-index: 4;
    content: "";
    width: 50%;
    width: calc(50% + 1px);
    max-width: 440px;
    height: 50%;
    bottom: 0;
    background-size: 100% auto;
    background-position: 50% 100%;
    background-repeat: no-repeat;
}
.hslide-nl::before {
    left: 0;
    background-image: url("../img/nl-green-blocks-1.svg");
}
.hslide-nl::after {
    right: 0;
    background-image: url("../img/nl-red-blocks-1.svg");
}
.hslide-nl .mid {
    position: absolute;
    z-index: 5;
    top: 48%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
.hslide-nl p {
    font-size: 90%;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    text-transform: uppercase;
}
.hslide-nl .logo {
    display: block;
    width: 50%;
    max-width: 320px;
    height: auto;
    margin: 2rem auto;
}
.hslide-nl a {
    font-size: 85%;
    display: inline-block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.7em 1em 0.8em;
    margin: 0 0.25em;
    border-radius: 2em;
    min-width: 9em;
}
.hslide-nl a:first-of-type {
    background-color: #02ff02;
    color: #000;
}
.hslide-nl a:last-of-type {
    background-color: #d51b16;
    color: #fff;
}
.hslide-nl .side {
    position: absolute;
    z-index: 1;
    width: 50%;
    height: 100%;
    top: 0;
}
.hslide-nl .side .arrow {
    position: absolute;
    z-index: 1;
    top: 7.5%;
    width: 2.25rem;
    height: auto;
    -webkit-animation: xt-sc-arrow 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite alternate;
    animation: xt-sc-arrow 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite alternate;
}
.hslide-nl .side .player {
    position: absolute;
    z-index: 1;
    top: 17.5%;
    width: auto;
    height: 80%;
}
.hslide-nl .side .rackets {
    display: none;
    position: absolute;
    z-index: 2;
    bottom: 22%;
    width: auto;
    height: 45%;
}
.hslide-nl .side.left {
    left: 0;
}
.hslide-nl .side.left .arrow,
.hslide-nl .side.left .player {
    left: 20%;
}
.hslide-nl .side.left .player {
    -webkit-transform: translateX(-48%);
    transform: translateX(-48%);
}
.hslide-nl .side.left .rackets {
    left: 125px;
}
.hslide-nl .side.right {
    right: 0;
}
.hslide-nl .side.right .arrow,
.hslide-nl .side.right .player {
    left: 80%;
}
.hslide-nl .side.right .player {
    -webkit-transform: translateX(-52%);
    transform: translateX(-52%);
}
.hslide-nl .side.right .rackets {
    right: 125px;
}
.hslide-nl .fade {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background-image: linear-gradient(rgba(13, 35, 67, 0), #0d2343 40%);
}
.hslide-nl .logos {
    display: none;
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    max-width: 1440px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.hslide-nl .logos img {
    position: absolute;
    top: 505px;
}
.hslide-nl .logos img:first-child {
    left: 220px;
    width: 155px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.hslide-nl .logos img:last-child {
    right: 220px;
    width: 130px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}
@media (min-width: 400px) {
    .hslide-nl p {
        font-size: 100%;
    }
    .hslide-nl a {
        font-size: 90%;
    }
}
@media (min-width: 450px) {
    .hslide-nl .mid {
        top: 42%;
    }
}
@media (min-width: 550px) {
    .hslide-nl .bg {
        background-size: 18px auto, 100% 100%;
    }
    .hslide-nl p {
        font-size: 110%;
    }
    .hslide-nl a {
        font-size: 100%;
    }
    .hslide-nl .logo {
        margin: 2.25rem auto;
    }
    .hslide-nl .side.left .arrow,
    .hslide-nl .side.left .player {
        left: 15%;
    }
    .hslide-nl .side.right {
        right: 0;
    }
    .hslide-nl .side.right .arrow,
    .hslide-nl .side.right .player {
        left: 85%;
    }
    .hslide-nl::before,
    .hslide-nl::after {
        width: 44.75%;
    }
}
@media (min-width: 650px) {
    .hslide-nl::before,
    .hslide-nl::after {
        width: 39%;
    }
}
@media (min-width: 720px) {
    .hslide-nl .bg {
        background-size: 29px auto, 100% 100%;
    }
    .hslide-nl::before {
        background-image: url("../img/nl-green-blocks-2.svg");
    }
    .hslide-nl::after {
        background-image: url("../img/nl-red-blocks-2.svg");
    }
    .hslide-nl .side .arrow {
        position: absolute;
        top: 3%;
        width: 2.5rem;
    }
    .hslide-nl .side .player {
        top: 10%;
        height: 80%;
    }
    .hslide-nl .side.left .arrow,
    .hslide-nl .side.left .player {
        left: 10%;
    }
    .hslide-nl .side.right .arrow,
    .hslide-nl .side.right .player {
        left: 90%;
    }
    .hslide-nl .fade {
        height: 45%;
        background-image: linear-gradient(rgba(13, 35, 67, 0), #0d2343 50%);
    }
    .hslide-nl p {
        font-size: 130%;
    }
    .hslide-nl .logo {
        margin: 2.5rem auto;
    }
    .hslide-nl a {
        border: solid 1.5px #fff;
        min-width: 11em;
        margin: 0 1em;
        transition: background-color 125ms ease-out, color 125ms ease-out, border-color 125ms ease-out;
    }
    .hslide-nl a:first-of-type,
    .hslide-nl a:last-of-type {
        color: #fff;
        background-color: transparent;
    }
    .hslide-nl a:first-of-type:hover {
        background-color: #02ff02;
        border-color: #02ff02;
        color: #000;
    }
    .hslide-nl a:last-of-type:hover {
        background-color: #d51b16;
        border-color: #d51b16;
        color: #fff;
    }
}
@media (min-width: 900px) {
    .hslide-nl .bg {
        background-size: 36px auto, 100% 100%;
    }
}
@media (min-width: 1050px) {
    .hslide-nl .bg {
        background-size: 35px auto, 100% 100%;
    }
    .hslide-nl .mid {
        top: 40%;
    }
    .hslide-nl .side .arrow {
        position: absolute;
        top: 140px;
        width: 3rem;
    }
    .hslide-nl .side .player {
        top: 3%;
        height: 75%;
        -webkit-transform: none;
        transform: none;
    }
    .hslide-nl .side .rackets {
        display: block;
    }
    .hslide-nl .side.left .player {
        left: -133px;
        -webkit-transform: none;
        transform: none;
    }
    .hslide-nl .side.left .arrow {
        left: 225px;
    }
    .hslide-nl .side.right .player {
        left: auto;
        right: -140px;
        -webkit-transform: none;
        transform: none;
    }
    .hslide-nl .side.right .arrow {
        left: auto;
        right: calc(225px - 3rem);
    }
    .hslide-nl .logos {
        display: block;
    }
    .hslide-nl p {
        font-size: 140%;
    }
}
@media (min-width: 1220px) {
    .hslide-nl .bg {
        background-size: 37px auto, 100% 100%;
    }
    .hslide-nl .mid {
        top: 44%;
    }
    .hslide-nl .side .rackets {
        height: 58%;
    }
    .hslide-nl .side .arrow {
        width: 3.5rem;
        top: 60px;
    }
    .hslide-nl .side.left .rackets {
        left: 145px;
    }
    .hslide-nl .side.left .arrow {
        left: 270px;
    }
    .hslide-nl .side.right .rackets {
        right: 145px;
    }
    .hslide-nl .side.right .arrow {
        right: calc(270px - 3.5rem);
    }
    .hslide-nl .logos img {
        top: 500px;
    }
    .hslide-nl .logos img:first-child {
        left: 275px;
        width: 234px;
    }
    .hslide-nl .logos img:last-child {
        right: 275px;
        width: 190px;
    }
}
@media (min-width: 1330px) {
    .hslide-nl .bg {
        background-size: 40px auto, 100% 100%;
    }
    .hslide-nl .mid {
        top: 48%;
    }
    .hslide-nl p {
        font-size: 150%;
    }
    .hslide-nl .logo {
        width: 400px;
        max-width: none;
        margin: 3rem auto;
    }
    .hslide-nl a {
        font-size: 120%;
    }
}
.hslide-fx {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: #000;
}
.hslide-fx .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    height: 100%;
    height: calc(100% + 25px);
    background-repeat: no-repeat;
    -webkit-animation: fadeIn 5000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 5000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-fx .overlay {
    position: absolute;
    z-index: 1;
    top: 0;
}
.hslide-fx .tab {
    width: 40px;
    height: auto;
    -webkit-animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 720px) {
    .hslide-fx .tab {
        width: 65px;
    }
}
.hslide-fx .fxtitleanim svg {
    width: 100%;
    height: auto;
    -webkit-animation: fadeIn 1000ms 1250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 1250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-fx a {
    display: inline-block;
    font-size: 86%;
    padding: 1.33em 2em;
    -webkit-animation: fadeIn 1000ms 2750ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 2750ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hslide-fx .prelaunch .bg {
    left: 0;
    right: 0;
    background-image: url("../img/fx-bg-1.jpg");
    background-size: 400px auto;
    background-position: 50% 0;
}
.hslide-fx .prelaunch .bg::after {
    position: absolute;
    content: "";
    top: 175px;
    left: 0;
    right: 0;
    height: 150px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), #000 50%);
}
.hslide-fx .prelaunch .overlay {
    left: 0;
    right: 0;
    text-align: center;
}
.hslide-fx .prelaunch .tab {
    margin: 0 auto;
}
.hslide-fx .prelaunch .fxcs {
    width: 275px;
    margin: 130px auto 42px auto;
}
.hslide-fx .prelaunch .fxcs img {
    display: block;
    width: 50%;
    height: auto;
    margin: 20px auto 0 auto;
    -webkit-animation: fadeIn 1000ms 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 420px) {
    .hslide-fx .prelaunch .bg {
        background-size: 410px auto;
    }
    .hslide-fx .prelaunch .bg::after {
        top: 180px;
    }
    .hslide-fx .prelaunch .fxcs {
        width: 330px;
        margin-top: 135px;
        margin-bottom: 27px;
    }
}
@media (min-width: 500px) {
    .hslide-fx .prelaunch .bg {
        background-size: 450px auto;
    }
    .hslide-fx .prelaunch .bg::after {
        top: 190px;
        height: 180px;
    }
    .hslide-fx .prelaunch .fxcs {
        width: 350px;
        margin-top: 154px;
        margin-bottom: 35px;
    }
}
@media (min-width: 720px) {
    .hslide-fx .prelaunch .bg {
        background-size: 520px auto;
    }
    .hslide-fx .prelaunch .bg::after {
        top: 220px;
        height: 200px;
    }
    .hslide-fx .prelaunch .fxcs {
        width: 400px;
        margin-top: 163px;
    }
    .hslide-fx .prelaunch .fxcs img {
        margin-top: 25px;
    }
}
@media (min-width: 900px) {
    .hslide-fx .prelaunch .bg {
        background-size: auto 105%;
        background-position: 33vw 0;
    }
    .hslide-fx .prelaunch .bg::after {
        display: none;
    }
    .hslide-fx .prelaunch .overlay {
        left: 3rem;
        right: auto;
    }
    .hslide-fx .prelaunch .fxcs {
        width: 450px;
        margin-top: 130px;
        margin-bottom: 110px;
    }
    .hslide-fx .prelaunch .fxcs img {
        margin-top: 35px;
    }
}
@media (min-width: 1100px) {
    .hslide-fx .prelaunch .fxcs {
        width: 500px;
        margin-top: 110px;
    }
}
@media (min-width: 1280px) {
    .hslide-fx .prelaunch .bg {
        background-position: calc(((100vw - 1280px) / 2) + 450px) 0;
    }
    .hslide-fx .prelaunch .overlay {
        left: calc(((100vw - 1280px) / 2) + 3rem);
    }
    .hslide-fx .prelaunch .fxcs {
        width: 550px;
        margin-top: 110px;
    }
}
.hslide-fx .postlaunch .bg {
    left: 72.5%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-image: url("../img/fx-bg-3.jpg");
    background-size: 640px auto;
    background-position: 50% 0;
}
.hslide-fx .postlaunch .bg::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), #000 50%);
}
.hslide-fx .postlaunch .overlay {
    left: 2rem;
    right: 2rem;
}
.hslide-fx .postlaunch .fxtitleanim {
    width: 180px;
    margin: 50px 0 120px 0;
}
.hslide-fx .postlaunch a:last-of-type {
    display: none;
    margin-left: 1.5em;
}
@media (min-width: 420px) {
    .hslide-fx .postlaunch .fxtitleanim {
        width: 200px;
        margin-bottom: 100px;
    }
}
@media (min-width: 500px) {
    .hslide-fx .postlaunch .bg {
        left: 75%;
        background-size: 700px auto;
    }
    .hslide-fx .postlaunch .fxtitleanim {
        width: 260px;
        margin-bottom: 110px;
    }
    .hslide-fx .postlaunch a:last-of-type {
        display: inline-block;
    }
}
@media (min-width: 720px) {
    .hslide-fx .postlaunch .bg {
        background-size: auto 108%;
        background-position: 50% 33%;
    }
    .hslide-fx .postlaunch .bg:after {
        display: none;
    }
    .hslide-fx .postlaunch .overlay {
        left: 3rem;
        right: auto;
        text-align: center;
    }
    .hslide-fx .postlaunch .tab {
        margin: 0 auto;
    }
    .hslide-fx .postlaunch .fxtitleanim {
        width: 330px;
        margin: 75px auto 50px auto;
    }
}
@media (min-width: 800px) {
    .hslide-fx .postlaunch .bg {
        left: 72%;
    }
}
@media (min-width: 900px) {
    .hslide-fx .postlaunch .bg {
        left: 75%;
    }
    .hslide-fx .postlaunch .overlay {
        left: 10vw;
    }
    .hslide-fx .postlaunch .fxtitleanim {
        width: 356px;
        margin: 100px auto 67px auto;
    }
    .hslide-fx .postlaunch a {
        padding-left: 2.5em;
        padding-right: 2.5em;
    }
}
@media (min-width: 1150px) {
    .hslide-fx .postlaunch .bg {
        left: 0;
        right: 0;
        -webkit-transform: none;
        transform: none;
    }
    .hslide-fx .postlaunch .overlay {
        left: 3rem;
    }
}
@media (min-width: 1280px) {
    .hslide-fx .postlaunch .overlay {
        left: calc(((100vw - 1280px) / 2) + 3rem);
    }
}
.fxtitleanim svg {
    transform-box: fill-box;
    overflow: visible;
}
.fxtitleanim svg #corners {
    -webkit-animation: fxblink 1800ms linear infinite;
    animation: fxblink 1800ms linear infinite;
}
.fxtitleanim svg #atop {
    -webkit-animation: fxatop 1800ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
    animation: fxatop 1800ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
}
.fxtitleanim svg #abottom {
    -webkit-animation: fxabottom 1800ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
    animation: fxabottom 1800ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
}
.fxtitleanim svg #aleft {
    -webkit-animation: fxaleft 1800ms 700ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
    animation: fxaleft 1800ms 700ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
}
.fxtitleanim svg #aright {
    -webkit-animation: fxaright 1800ms 700ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
    animation: fxaright 1800ms 700ms cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
}
@-webkit-keyframes fxblink {
    0%,
    10% {
        opacity: 0;
    }
    10.01%,
    100% {
        opacity: 1;
    }
}
@keyframes fxblink {
    0%,
    10% {
        opacity: 0;
    }
    10.01%,
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fxatop {
    0%,
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }
}
@keyframes fxatop {
    0%,
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
    }
}
@-webkit-keyframes fxabottom {
    0%,
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }
}
@keyframes fxabottom {
    0%,
    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(5%);
        transform: translateY(5%);
    }
}
@-webkit-keyframes fxaleft {
    0%,
    75% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-1.5%);
        transform: translateX(-1.5%);
    }
}
@keyframes fxaleft {
    0%,
    75% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-1.5%);
        transform: translateX(-1.5%);
    }
}
@-webkit-keyframes fxaright {
    0%,
    75% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(1.5%);
        transform: translateX(1.5%);
    }
}
@keyframes fxaright {
    0%,
    75% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(1.5%);
        transform: translateX(1.5%);
    }
}
.page-home .choose-sport {
    padding: 3rem 1.5rem;
    background-color: #f6f6f6;
}
@media (min-width: 900px) {
    .page-home .choose-sport {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-home .choose-sport .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1.5rem;
}
.page-home .choose-sport a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    position: relative;
    width: calc((100% - 3rem) / 2);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    background-size: 200% 200%, cover;
    background-position: 100% 100%, 50% 25%;
    background-repeat: no-repeat;
    transition: color 125ms ease-out, background-position 125ms ease-out;
}
.page-home .choose-sport a:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
@media (min-width: 900px) {
    .page-home .choose-sport a {
        width: calc((100% - 4rem) / 2);
    }
}
.page-home .choose-sport span {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-home .choose-sport span::before {
    display: none;
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1em;
    height: 0.2em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #cf0;
    transition: background-color 125ms ease-out;
}
.page-home .choose-sport a:hover {
    color: #000;
    background-position: 0% 0%, 50% 25%;
}
.page-home .choose-sport a:hover span::before {
    background-color: #000;
}
.page-home .choose-sport .tennis {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-tennis.jpg");
}
.page-home .choose-sport .squash {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-squash.jpg");
}
.page-home .choose-sport .padel {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-padel.jpg");
}
.page-home .choose-sport .badminton {
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-square-badminton.jpg");
    background-position: 100% 100%, 50% 75%;
}
.page-home .choose-sport .badminton:hover {
    background-position: 0% 0%, 50% 75%;
}
@media (min-width: 350px) {
    .page-home .choose-sport a {
        font-size: 100%;
    }
}
@media (min-width: 375px) {
    .page-home .choose-sport a {
        font-size: 110%;
    }
}
@media (min-width: 420px) {
    .page-home .choose-sport span {
        padding-left: 1.8em;
    }
    .page-home .choose-sport span::before {
        display: block;
    }
}
@media (min-width: 500px) {
    .page-home .choose-sport a {
        font-size: 130%;
    }
}
@media (min-width: 600px) {
    .page-home .choose-sport .inner {
        padding-bottom: 2.01rem;
    }
    .page-home .choose-sport a {
        font-size: 150%;
    }
    .page-home .choose-sport a:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 66.6666666667%;
    }
}
@media (min-width: 800px) {
    .page-home .choose-sport a {
        font-size: 110%;
        width: calc((100% - 6rem) / 4);
        background-position: 100% 100%, 50% 50%;
    }
}
@media (min-width: 800px) and (min-width: 900px) {
    .page-home .choose-sport a {
        width: calc((100% - 8rem) / 4);
    }
}
@media (min-width: 800px) {
    .page-home .choose-sport a:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 151.724137931%;
    }
    .page-home .choose-sport a:hover {
        background-position: 0% 0%, 50% 50%;
    }
    .page-home .choose-sport .tennis {
        background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-rect-tennis.jpg");
    }
    .page-home .choose-sport .squash {
        background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-rect-squash.jpg");
    }
    .page-home .choose-sport .padel {
        background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-rect-padel.jpg");
    }
    .page-home .choose-sport .badminton {
        background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%), url("../img/nav-rect-badminton.jpg");
    }
}
@media (min-width: 900px) {
    .page-home .choose-sport a {
        font-size: 120%;
    }
}
@media (min-width: 1000px) {
    .page-home .choose-sport a {
        font-size: 140%;
    }
}
@media (min-width: 1050px) {
    .page-home .choose-sport a {
        font-size: 150%;
    }
}
@media (min-width: 1250px) {
    .page-home .choose-sport span {
        left: 3rem;
        padding-left: 2em;
    }
}
.page-home .about {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 3rem 1.5rem;
    position: relative;
    background-color: #000;
    background-image: url("../img/hero-our-story-small.jpg");
    background-position: 100% 20%;
}
.page-home .about.vtop {
    background-position-y: 5%;
}
.page-home .about.vbottom {
    background-position-y: 95%;
}
.page-home .about.vcustom-tennis {
    background-position-y: 22%;
}
.page-home .about.vcustom-squash {
    background-position-y: 56%;
}
.page-home .about.hleft {
    background-position-x: 20%;
}
.page-home .about.hright {
    background-position-x: 80%;
}
@media (min-width: 900px) {
    .page-home .about {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-home .about .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    min-height: 20rem;
}
.page-home .about .content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-home .about p {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    text-transform: uppercase;
    line-height: 2;
    font-size: 130%;
    margin: 0;
    width: 90%;
}
.page-home .about a {
    width: 100%;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 0.67em;
}
@media (min-width: 500px) {
    .page-home .about {
        padding-left: 4.5rem;
    }
    .page-home .about::after {
        position: absolute;
        z-index: 2;
        content: "";
        left: 0;
        top: 50%;
        width: 1.5rem;
        height: 6px;
        background-color: #cf0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-home .about .inner {
        min-height: 22rem;
    }
    .page-home .about p {
        line-height: 2.25;
        width: initial;
    }
    .page-home .about p span {
        display: block;
    }
    .page-home .about a {
        width: initial;
        margin-bottom: 0;
    }
}
@media (min-width: 720px) {
    .page-home .about {
        background-image: url("../img/hero-our-story-large.jpg");
    }
    .page-home .about .inner {
        min-height: 26rem;
    }
}
@media (min-width: 900px) {
    .page-home .about {
        padding-left: 9rem;
        padding-right: 9rem;
    }
    .page-home .about::after {
        width: 3rem;
        height: 10px;
    }
    .page-home .about .inner {
        min-height: 30rem;
    }
    .page-home .about p {
        font-size: 150%;
    }
}
@media (min-width: 1100px) {
    .page-home .about .inner {
        min-height: 35rem;
    }
}
.page-home .news .button {
    text-align: right;
}
.page-home .news .button a {
    margin-top: 1.5rem;
    width: 100%;
    text-align: center;
}
@media (min-width: 500px) {
    .page-home .news .button a {
        margin-top: 3rem;
        width: initial;
    }
}
.s-p-types {
    padding: 3rem 1.5rem;
    background-size-x: auto 50%;
    background-position: 100% 0%;
    background-repeat: no-repeat;
}
@media (min-width: 900px) {
    .s-p-types {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-tennis .s-p-types {
    background-size: auto 50%;
}
.page-squash .s-p-types {
    background-size: auto 35%;
}
.page-padel .s-p-types {
    background-size: auto 40%;
}
.page-badminton .s-p-types {
    background-size: auto 95%;
}
.s-p-types .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.s-p-types .blocks {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.s-p-types .blocks a {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #000;
    position: relative;
    color: #fff;
}
.s-p-types .blocks a.vtop {
    background-position-y: 5%;
}
.s-p-types .blocks a.vbottom {
    background-position-y: 95%;
}
.s-p-types .blocks a.vcustom-tennis {
    background-position-y: 22%;
}
.s-p-types .blocks a.vcustom-squash {
    background-position-y: 56%;
}
.s-p-types .blocks a.hleft {
    background-position-x: 20%;
}
.s-p-types .blocks a.hright {
    background-position-x: 80%;
}
.page-badminton .s-p-types .blocks a {
    background-size: auto 100%;
}
.s-p-types .blocks .swipe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
}
.s-p-types .blocks span {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 80%;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.s-p-types .blocks span::before {
    display: none;
    content: "";
    width: 1em;
    height: 0.25em;
    margin-right: 0.8em;
    vertical-align: 15%;
    background-color: #cf0;
    transition: background-color 125ms ease-out;
}
.s-p-types .blocks a:hover .swipe {
    background-position: 0% 0%;
}
.s-p-types .blocks a:hover span {
    color: #000;
}
.s-p-types .blocks a:hover span::before {
    background-color: #000;
}
.s-p-types .blocks.num3 a {
    -ms-flex-preferred-size: calc(50% - 0.5px);
    flex-basis: calc(50% - 0.5px);
}
.s-p-types .blocks.num3 a:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 119.718309859%;
}
.s-p-types .blocks.num3 a:nth-child(1) {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    margin-bottom: 1px;
}
.s-p-types .blocks.num3 a:nth-child(1):before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 59.8591549296%;
}
.s-p-types .blocks.num3 a:nth-child(2) {
    margin-right: 1px;
}
.s-p-types .blocks.num4 a {
    -ms-flex-preferred-size: calc(50% - 0.5px);
    flex-basis: calc(50% - 0.5px);
}
.s-p-types .blocks.num4 a:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 119.718309859%;
}
.s-p-types .blocks.num4 a:nth-child(2n + 1) {
    margin-right: 1px;
}
.s-p-types .blocks.num4 a:nth-child(1),
.s-p-types .blocks.num4 a:nth-child(2) {
    margin-bottom: 1px;
}
.s-p-types .btn {
    margin-top: 1.5rem;
}
.s-p-types .btn a {
    width: 100%;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 375px) {
    .s-p-types .blocks span {
        font-size: 90%;
    }
}
@media (min-width: 500px) {
    .s-p-types .btn {
        margin-top: 2.25rem;
        text-align: right;
    }
    .s-p-types .btn a {
        width: 50%;
    }
}
@media (min-width: 600px) {
    .s-p-types .blocks.num3 a,
    .s-p-types .blocks.num3 a:nth-child(1) {
        -ms-flex-preferred-size: calc(33.3333% - 0.67px);
        flex-basis: calc(33.3333% - 0.67px);
        margin: 0;
    }
    .s-p-types .blocks.num3 a:before,
    .s-p-types .blocks.num3 a:nth-child(1):before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 90%;
    }
    .s-p-types .blocks.num3 a:nth-child(2) {
        margin: 0 1px;
    }
}
@media (min-width: 660px) {
    .page-tennis .s-p-types {
        background-size: auto 70%;
    }
    .page-squash .s-p-types {
        background-size: auto 50%;
    }
    .page-padel .s-p-types {
        background-size: auto 60%;
    }
    .s-p-types .blocks.num4 a {
        -ms-flex-preferred-size: calc(25% - 0.75px);
        flex-basis: calc(25% - 0.75px);
        margin-right: 1px;
        margin-bottom: 0;
    }
    .s-p-types .blocks.num4 a:last-child {
        margin-right: 0;
    }
    .s-p-types .blocks.num4 a:nth-child(1),
    .s-p-types .blocks.num4 a:nth-child(2) {
        margin-bottom: 0;
    }
}
@media (min-width: 800px) {
    .s-p-types .blocks span {
        font-size: 100%;
    }
}
@media (min-width: 900px) {
    .s-p-types .blocks span {
        font-size: 110%;
        left: 0;
        right: 0;
    }
    .s-p-types .blocks span::before {
        display: inline-block;
    }
    .s-p-types .btn {
        margin-top: 3rem;
    }
}
@media (min-width: 1000px) {
    .s-p-types .btn a {
        width: 25%;
    }
}
@media (min-width: 1150px) {
    .s-p-types .blocks span {
        font-size: 120%;
    }
}
@media (min-width: 1150px) {
    .s-p-types .blocks span {
        font-size: 130%;
    }
}
.s-otherprods {
    background-color: #f6f6f6;
}
.s-otherprods .inner {
    max-width: 1560px;
    margin: 0 auto;
}
.s-otherprods a {
    display: block;
    position: relative;
    width: 100%;
    color: #fff;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-top: solid 1px #f6f6f6;
    overflow: hidden;
    font-size: 90%;
}
.s-otherprods a:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 33.3333333333%;
}
.s-otherprods .bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #000;
    transition: -webkit-transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.s-otherprods .bg.vtop {
    background-position-y: 5%;
}
.s-otherprods .bg.vbottom {
    background-position-y: 95%;
}
.s-otherprods .bg.vcustom-tennis {
    background-position-y: 22%;
}
.s-otherprods .bg.vcustom-squash {
    background-position-y: 56%;
}
.s-otherprods .bg.hleft {
    background-position-x: 20%;
}
.s-otherprods .bg.hright {
    background-position-x: 80%;
}
.s-otherprods span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-left: 0;
    transition: padding 125ms ease-out;
}
.s-otherprods span::before {
    position: absolute;
    content: "";
    left: -1em;
    top: 50%;
    width: 0;
    height: 0.25em;
    background-color: #cf0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: left 125ms ease-out, width 125ms ease-out;
}
.s-otherprods a:hover .bg {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
@media (min-width: 440px) {
    .s-otherprods {
        border-top: solid 1px #f6f6f6;
    }
    .s-otherprods.firstrow {
        border-top: 0;
    }
    .s-otherprods a {
        float: left;
        height: 33vw;
        margin-right: 1px;
        border-top: 0;
    }
    .s-otherprods a:before {
        display: none;
    }
    .s-otherprods a:last-child {
        margin-right: 0;
    }
    .s-otherprods a.half {
        width: 50%;
        width: calc(50% - 0.5px);
    }
    .s-otherprods a.third {
        width: 33.33%;
        width: calc(33.33% - 0.75px);
    }
}
@media (min-width: 600px) {
    .s-otherprods a {
        font-size: 100%;
    }
}
@media (min-width: 720px) {
    .s-otherprods a {
        font-size: 110%;
        height: 22vw;
    }
}
@media (min-width: 800px) {
    .s-otherprods a {
        font-size: 110%;
    }
}
@media (min-width: 900px) {
    .s-otherprods a {
        font-size: 120%;
        letter-spacing: 0.25em;
    }
    .s-otherprods a:hover .bg {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    .s-otherprods a:hover span {
        padding-left: 1.8em;
    }
    .s-otherprods a:hover span::before {
        width: 1em;
        left: 0;
    }
}
@media (min-width: 1150px) {
    .s-otherprods a {
        font-size: 130%;
    }
}
@media (min-width: 1150px) {
    .s-otherprods a {
        font-size: 140%;
    }
}
@media (min-width: 1560px) {
    .s-otherprods a {
        height: 25.3rem;
    }
}
.page-sport .news .button {
    text-align: right;
}
.page-sport .news .button a {
    margin-top: 1.5rem;
    width: 100%;
    text-align: center;
}
@media (min-width: 500px) {
    .page-sport .news .button a {
        margin-top: 3rem;
        width: initial;
    }
}
.page-range .hero {
    display: block;
    height: auto;
    padding: 0;
}
.page-range .hero::after {
    display: none;
}
.page-range .hero img.small {
    display: block;
    width: 100%;
    height: 100%;
}
.page-range .hero .img-large,
.page-range .hero .img-mid {
    display: none;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
.page-range .hero .copy {
    position: relative;
    padding: 2.25rem 1.5rem 3rem 1.5rem;
    z-index: 1;
    background-color: #000;
}
.page-range .hero .intro {
    margin-top: 2em;
    font-size: 100%;
    max-width: none;
}
.page-range .hero a.explore {
    display: none;
    position: absolute;
    z-index: 2;
    bottom: 3rem;
    left: 0;
}
.page-range .hero h1 {
    max-width: 15em;
}
.page-range .hero h1 .separate {
    display: none;
}
.page-range .hero a.youtube-modal {
    display: block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    margin-top: 1.5em;
}
.page-range .hero a.youtube-modal span {
    position: relative;
    margin-left: 1em;
}
.page-range .hero a.youtube-modal span::after {
    position: absolute;
    content: "";
    bottom: -0.4em;
    left: 0;
    right: 100%;
    height: 2px;
    background-color: #fff;
    transition: right 125ms ease-out;
}
.page-range .hero a.youtube-modal svg {
    display: inline-block;
    vertical-align: -32%;
    width: 2em;
    height: 2.1em;
    fill: #fff;
}
.page-range .hero a.youtube-modal:hover span::after {
    right: 0;
}
@media (min-width: 720px) {
    .page-range .hero {
        padding: 0 3.75rem;
    }
    .page-range .hero .inner {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        min-height: inherit;
    }
    .page-range .hero img.small {
        display: none;
    }
    .page-range .hero .img-large {
        display: block;
    }
    .page-range .hero .img-large,
    .page-range .hero .img-mid {
        right: -18rem;
    }
    .page-range .hero::after {
        display: block;
    }
    .page-range .hero .copy {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        padding: 0 0 6.5rem 0;
        background-color: transparent;
    }
    .page-range .hero .intro {
        max-width: 31em;
    }
    .page-range .hero a.explore {
        display: inline-block;
    }
}
@media (min-width: 800px) {
    .page-range .hero .img-large,
    .page-range .hero .img-mid {
        right: -14rem;
    }
    .page-range .hero .intro {
        max-width: 31em;
    }
}
@media (min-width: 900px) {
    .page-range .hero {
        padding: 0 6rem;
    }
    .page-range .hero h1 {
        font-size: 320%;
        max-width: 90%;
    }
    .page-range .hero h1 .joined {
        display: none;
    }
    .page-range .hero h1 .separate {
        display: block;
    }
    .page-range .hero .copy {
        padding: 0 0 7.5rem 0;
    }
    .page-range .hero .img-large,
    .page-range .hero .img-mid {
        right: -20rem;
    }
}
@media (min-width: 1000px) {
    .page-range .hero .img-large,
    .page-range .hero .img-mid {
        right: -15rem;
    }
    .page-range .hero a.explore {
        bottom: 4rem;
    }
}
@media (min-width: 1100px) {
    .page-range .hero .img-large,
    .page-range .hero .img-mid {
        right: -7.5rem;
    }
}
@media (min-width: 1200px) {
    .page-range .hero .img-large,
    .page-range .hero .img-mid {
        right: 0;
    }
}
@media (min-width: 1250px) {
    .page-range .hero .intro {
        max-width: 35em;
    }
}
.zz {
    position: relative;
    overflow: hidden;
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .zz {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.zz .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.zz h3,
.zz p,
.zz .std-button {
    color: #fff;
}
.zz h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 140%;
    line-height: 1.8;
    max-width: 10em;
}
.zz h3.sub {
    font-size: 80%;
    color: #cf0;
}
.zz p {
    margin: 1.67em 0;
    line-height: 1.8;
    max-width: 36em;
}
.zz p strong {
    display: block;
}
.zz .std-button {
    width: 100%;
    text-align: center;
    transition: all 125ms ease-out;
}
.zz .std-button:hover {
    color: #000;
    border-color: #cf0;
}
.zz .row {
    position: relative;
    margin-bottom: 8em;
}
.zz .row:last-of-type {
    margin-bottom: 4em;
}
.zz .image {
    margin-bottom: 0.5rem;
}
.zz .image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 400px;
    margin: 0 auto;
    height: auto;
}
.zz.wide .row {
    margin-bottom: 6em;
}
.zz.wide .row:last-of-type {
    margin-bottom: 2em;
}
.zz.wide .image {
    margin: 0 -1.5rem 1.5rem -1.5rem;
}
.zz.wide .image img {
    max-width: none;
}
.zz.wide p {
    margin-bottom: 0;
}
.zz.wide .std-button {
    margin-top: 3rem;
}
@media (min-width: 400px) {
    .zz .row {
        margin-bottom: 12rem;
    }
    .zz .std-button {
        width: auto;
    }
}
@media (min-width: 720px) {
    .zz .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 10rem 0;
    }
    .zz .row:first-of-type {
        margin-top: 4rem;
    }
    .zz .row:last-of-type {
        margin-bottom: 4rem;
    }
    .zz .row:nth-of-type(2n + 2) .image {
        -ms-flex-order: 1;
        order: 1;
    }
    .zz .row:nth-of-type(2n + 2) .copy {
        -ms-flex-order: 0;
        order: 0;
    }
    .zz.alt .row:nth-of-type(2n + 1) .image {
        -ms-flex-order: 1;
        order: 1;
    }
    .zz.alt .row:nth-of-type(2n + 1) .copy {
        -ms-flex-order: 0;
        order: 0;
    }
    .zz.alt .row:nth-of-type(2n + 2) .image {
        -ms-flex-order: 0;
        order: 0;
    }
    .zz.alt .row:nth-of-type(2n + 2) .copy {
        -ms-flex-order: 1;
        order: 1;
    }
    .zz .image {
        position: relative;
        width: 50%;
        margin-bottom: 0;
    }
    .zz .image img {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        max-width: none;
    }
    .zz .copy {
        width: 50%;
        width: calc(50% - (1.5rem * 0.5));
    }
    .zz h3 {
        font-size: 150%;
    }
    .zz h3.sub {
        font-size: 100%;
        margin-bottom: 0.67em;
    }
    .zz p {
        margin: 2em 0 2.5em 0;
        max-width: none;
    }
    .zz.wide .image {
        width: 66.6%;
    }
    .zz.wide .copy {
        width: 33.3%;
    }
    .zz.wide .row {
        margin: 24vw 0;
    }
    .zz.wide .row:first-of-type {
        margin-top: 10vw;
    }
    .zz.wide .row:last-of-type {
        margin-bottom: 10vw;
    }
}
@media (min-width: 900px) {
    .zz .copy {
        width: calc(50% - (2rem * 0.5));
    }
    .zz p {
        padding-right: 4em;
    }
    .zz.moretext p {
        padding-right: 2em;
    }
    .zz.wide .image {
        margin: 0 -3rem;
    }
}
@media (min-width: 1100px) {
    .zz .row:first-of-type {
        margin-top: 8rem;
    }
}
@media (min-width: 1200px) {
    .zz.wide .image {
        margin: 0;
    }
    .zz.wide .row {
        margin: 25rem 0;
    }
    .zz.wide .row:first-of-type {
        margin-top: 15rem;
    }
    .zz.wide .row:last-of-type {
        margin-bottom: 5rem;
    }
    .zz.wide .row:nth-of-type(2n + 1) .image img {
        left: calc(0px - ((100vw - 1200px) / 2));
    }
    .zz.wide .row:nth-of-type(2n + 2) .image img {
        left: auto;
        right: calc(0px - ((100vw - 1200px) / 2));
    }
    .zz.wide.alt .row:nth-of-type(2n + 1) .image img {
        left: auto;
        right: calc(0px - ((100vw - 1200px) / 2));
    }
    .zz.wide.alt .row:nth-of-type(2n + 2) .image img {
        right: auto;
        left: calc(0px - ((100vw - 1200px) / 2));
    }
}
.page-nt .zz .ntdecor {
    display: none;
    position: absolute;
    z-index: 3;
    height: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-nt .zz .ntdecor.one {
    width: 41%;
    top: 30%;
    right: 0;
}
.page-nt .zz .ntdecor.two {
    width: 30%;
    top: 68%;
    left: 0;
}
.page-nt .zz .ntdecor.three {
    width: 15%;
    top: 75%;
    right: 0;
}
@media (min-width: 720px) {
    .page-nt .zz .ntdecor {
        display: block;
    }
}
@media (min-width: 1200px) {
    .page-nt .zz .ntdecor.one {
        width: 492px;
    }
    .page-nt .zz .ntdecor.two {
        width: 360px;
    }
    .page-nt .zz .ntdecor.three {
        width: 180px;
    }
}
.page-cx .video-swap {
    position: relative;
}
.page-cx .video-swap a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
}
.page-cx .video-swap a .screen {
    display: block;
    width: 100%;
    height: auto;
}
.page-cx .video-swap a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.5rem;
    height: 3.5rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.page-cx .video-swap a svg #l,
.page-cx .video-swap a svg #r {
    transition: -webkit-transform 150ms ease-out;
    transition: transform 150ms ease-out;
    transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
}
@media (min-width: 420px) {
    .page-cx .video-swap a svg {
        width: 4.5rem;
        height: 4.5rem;
    }
}
@media (min-width: 720px) {
    .page-cx .video-swap a svg {
        width: 5.5rem;
        height: 5.5rem;
    }
}
.page-cx .video-swap a:hover svg #l,
.page-cx .video-swap a:hover svg #r {
    transition: -webkit-transform 50ms ease-out;
    transition: transform 50ms ease-out;
    transition: transform 50ms ease-out, -webkit-transform 50ms ease-out;
}
.page-cx .video-swap a:hover svg #l {
    -webkit-transform: translate(2px, 10px);
    transform: translate(2px, 10px);
}
.page-cx .video-swap a:hover svg #r {
    -webkit-transform: translate(-2px, -10px);
    transform: translate(-2px, -10px);
}
.page-cx .video-swap a.hide {
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}
.page-cx .video-swap .vid-container {
    position: relative;
    z-index: 1;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.page-cx .video-swap .vid-container iframe,
.page-cx .video-swap .vid-container object,
.page-cx .video-swap .vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-cx .video-swap .youtube {
    margin: 0;
    padding-top: 0;
}
.page-cx .top {
    position: relative;
}
.page-cx .top:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 114%;
}
.page-cx .top .bg,
.page-cx .top .bg-hand {
    position: absolute;
    background-repeat: no-repeat;
    -webkit-animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-cx .top .bg {
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 140%;
    background-size: 100% auto;
    background-position: 50% 0%;
    background-image: url("../img/jfp-kevin-small.jpg");
}
.page-cx .top .bg-hand {
    display: none;
    z-index: 2;
    top: 54%;
    left: 49%;
    width: 5.29%;
    height: 25%;
    background-image: url("../img/jfp-kevin-hand.png");
    background-position: 0% 0%;
    background-size: contain;
}
.page-cx .top .header-small,
.page-cx .top .header-large {
    position: absolute;
    z-index: 1;
    height: auto;
    -webkit-animation: fadeIn 1000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 1000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-cx .top .header-small {
    display: block;
    bottom: 16vw;
    left: 50%;
    width: 88%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.page-cx .top .header-large {
    display: none;
    top: 39%;
    left: 1.5rem;
    width: 55.25%;
}
@media (min-width: 900px) {
    .page-cx .top .header-large {
        left: 3rem;
    }
}
.page-cx .top .explore {
    display: none;
    position: absolute;
    z-index: 2;
    top: 95%;
    top: calc(95% + (9vw - 144px));
    left: 8.75rem;
    -webkit-animation: fadeIn 3000ms 4000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 4000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@media (min-width: 550px) {
    .page-cx .top {
        max-width: 1440px;
        margin: 0 auto;
    }
    .page-cx .top:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 36%;
    }
    .page-cx .top .bg {
        height: 200%;
        background-image: url("../img/jfp-kevin-large.jpg");
    }
    .page-cx .top .bg-hand {
        display: block;
    }
    .page-cx .top .header-small {
        display: none;
    }
    .page-cx .top .header-large {
        display: block;
    }
}
@media (min-width: 900px) {
    .page-cx .top .header-large {
        width: 53.5%;
        top: 40%;
    }
}
@media (min-width: 1360px) {
    .page-cx .top .header-large {
        -webkit-transform: translateX(calc(50vw - 680px));
        transform: translateX(calc(50vw - 680px));
    }
}
@media (min-width: 1400px) {
    .page-cx .top .header-large {
        width: 52%;
    }
}
@media (min-width: 1440px) {
    .page-cx .top .explore {
        display: block;
    }
    .page-cx .top .header-large {
        -webkit-transform: translateX(36px);
        transform: translateX(36px);
    }
}
.page-cx .intro {
    position: relative;
    z-index: 1;
    background-image: url("../img/jfp-angle-2.svg"), url("../img/jfp-angle-1.svg");
    background-size: 100% auto;
    background-position: 0% 100.25%, 0% 0%;
    background-repeat: no-repeat;
    padding-top: 25vw;
    padding-bottom: 11rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .page-cx .intro {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-cx .intro .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-cx .intro p {
    color: #fff;
    font-weight: bold;
    line-height: 1.8;
}
.page-cx .intro p:first-of-type {
    margin-top: 3rem;
}
.page-cx .intro .tagline {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 110%;
    max-width: 18em;
}
@media (min-width: 550px) {
    .page-cx .intro {
        padding-top: 14.75vw;
    }
    .page-cx .intro p {
        width: 70%;
    }
}
@media (min-width: 720px) {
    .page-cx .intro .video-swap {
        margin: 0 auto;
        width: 80%;
    }
    .page-cx .intro p {
        width: 50%;
    }
}
@media (min-width: 1000px) {
    .page-cx .intro {
        padding-bottom: 22vw;
    }
    .page-cx .intro .tagline {
        max-width: none;
    }
}
@media (min-width: 1200px) {
    .page-cx .intro {
        padding-bottom: 19vw;
    }
}
.page-cx .tech {
    position: relative;
    z-index: 1;
    margin-top: -3.25rem;
    padding-top: 0;
    padding-bottom: 5rem;
    overflow: visible;
}
.page-cx .tech h2 {
    margin-top: 0;
    font-size: 180%;
    padding-bottom: 1em;
    margin-bottom: 0.5em;
}
.page-cx .tech h2::after {
    background-color: #e4002b;
    height: 0.2em;
    width: 1.5em;
}
.page-cx .tech .row:first-of-type {
    margin-top: 0;
}
.page-cx .tech .row:nth-of-type(2)::after,
.page-cx .tech .row:nth-of-type(3)::after {
    content: "";
    position: absolute;
    background: url("../img/jfp-line.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 11.75rem;
    height: 6px;
}
.page-cx .tech .row:nth-of-type(2)::after {
    top: -1.5rem;
    right: -10rem;
    background-position: 0% 50%;
}
.page-cx .tech .row:nth-of-type(3)::after {
    top: 30vw;
    left: -10rem;
    background-position: 100% 50%;
}
.page-cx .tech p {
    line-height: 1.8;
    max-width: none;
}
.page-cx .tech .image img {
    display: block;
    max-width: 400px;
    margin: 0 auto;
    opacity: 0;
}
.page-cx .tech .image img.triggered {
    -webkit-animation: fadeIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-cx .tech .copy {
    z-index: 1;
}
.page-cx .tech .copy img {
    display: block;
    height: 1.9rem;
    width: auto;
}
@media (min-width: 550px) {
    .page-cx .tech {
        padding-bottom: 11vw;
        padding-bottom: calc(8vw + 3rem);
    }
    .page-cx .tech .copy img {
        height: 2.3rem;
    }
    .page-cx .tech .copy h3 {
        font-size: 160%;
    }
}
@media (min-width: 720px) {
    .page-cx .tech {
        margin-top: -3.7rem;
    }
    .page-cx .tech h2 {
        font-size: 250%;
    }
    .page-cx .tech h2::after {
        height: 0.15em;
        width: 1em;
    }
    .page-cx .tech .image {
        width: 40%;
    }
    .page-cx .tech .image img {
        max-width: none;
    }
    .page-cx .tech .copy {
        width: 60%;
    }
    .page-cx .tech .row:first-of-type {
        margin-top: 6rem;
    }
    .page-cx .tech .row:first-of-type .copy img {
        display: inline-block;
        vertical-align: middle;
    }
    .page-cx .tech .row:nth-of-type(2) .copy {
        text-align: right;
    }
    .page-cx .tech .row:nth-of-type(2) .copy img {
        margin: 0 0 0 auto;
    }
    .page-cx .tech .row:nth-of-type(2) .image {
        left: 2%;
        width: 38%;
    }
    .page-cx .tech .row:nth-of-type(3) .image img {
        -webkit-transform: translateY(-42%);
        transform: translateY(-42%);
    }
    .page-cx .tech .row:nth-of-type(2)::after,
    .page-cx .tech .row:nth-of-type(3)::after {
        top: -6.5rem;
    }
    .page-cx .tech .row:nth-of-type(2n + 1) .image img {
        right: 0 !important;
    }
    .page-cx .tech .row:nth-of-type(2n + 2) .image img {
        left: 0 !important;
    }
}
@media (min-width: 900px) {
    .page-cx .tech {
        padding-bottom: 8rem;
    }
    .page-cx .tech .copy p {
        max-width: 33em;
    }
    .page-cx .tech .image {
        width: 55%;
    }
    .page-cx .tech .row:nth-of-type(2) .copy p {
        padding-left: 4em;
        padding-right: 0;
        margin-left: auto;
        margin-right: 0;
    }
}
@media (min-width: 1000px) {
    .page-cx .tech {
        margin-top: -5.7vw;
    }
    .page-cx .tech .row:nth-of-type(1) .image img {
        right: auto !important;
        left: -7vw;
        -webkit-transform: translateY(-60%);
        transform: translateY(-60%);
        width: 125%;
        max-width: 800px;
    }
    .page-cx .tech .row:nth-of-type(2) .image img {
        left: 0vw !important;
        width: 140%;
    }
    .page-cx .tech .row:nth-of-type(3) .image img {
        left: auto !important;
        right: -3vw !important;
        width: 105%;
    }
    .page-cx .tech .copy img {
        height: 2.9rem;
    }
    .page-cx .tech .copy h3 {
        font-size: 210%;
    }
}
@media (min-width: 1200px) {
    .page-cx .tech {
        margin-top: calc(-19vw + 170px);
    }
    .page-cx .tech .row {
        margin: 30rem 0;
    }
    .page-cx .tech .row:nth-of-type(2)::after,
    .page-cx .tech .row:nth-of-type(3)::after {
        top: -12rem;
    }
    .page-cx .tech .row:nth-of-type(1) .image img {
        left: -4vw !important;
    }
    .page-cx .tech .row:nth-of-type(2) .image img {
        left: -3vw !important;
        width: 145%;
    }
    .page-cx .tech .row:nth-of-type(3) .image img {
        left: auto !important;
        right: -6vw !important;
        width: 110%;
    }
}
@media (min-width: 1200px) {
    .page-cx .tech {
        padding-bottom: 14rem;
    }
    .page-cx .tech .row:nth-of-type(2)::after {
        right: calc(-4rem - ((100vw - 1200px) / 2));
    }
    .page-cx .tech .row:nth-of-type(3)::after {
        left: calc(-8rem - ((100vw - 1200px) / 2));
    }
}
@media (min-width: 1400px) {
    .page-cx .tech .row:nth-of-type(1) .image img {
        left: -2rem !important;
    }
    .page-cx .tech .row:nth-of-type(2) .image img {
        left: -5rem !important;
        width: 150%;
    }
    .page-cx .tech .row:nth-of-type(3) .image img {
        right: -6rem !important;
    }
}
@media (min-width: 1500px) {
    .page-cx .tech .row:nth-of-type(2) .image img {
        left: -8rem !important;
        width: 160%;
    }
}
.page-cx .ranges {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-top: 2rem;
    clear: both;
    width: 100%;
    max-width: 24rem;
    margin: 0;
}
.page-cx .ranges::after {
    content: "";
    display: table;
    clear: both;
}
.page-cx .ranges div {
    position: relative;
    display: inline-block;
    width: 44%;
}
.page-cx .ranges div:first-child {
    float: left;
}
.page-cx .ranges div:last-child {
    float: right;
}
.page-cx .ranges .key {
    display: block;
    font-size: 60%;
    color: #4e4e4e;
}
.page-cx .ranges .val {
    display: block;
    font-size: 120%;
}
.page-cx .ranges .bar {
    position: absolute;
    bottom: 0.5em;
    left: 2.7em;
    right: 0;
    height: 3px;
}
.page-cx .which {
    position: relative;
    background-color: #121212;
    padding: 3rem 1.5rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 2;
    color: #fff;
}
@media (min-width: 900px) {
    .page-cx .which {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-cx .which:after {
    display: none;
    content: "";
    position: absolute;
    background: url("../img/jfp-line.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 4rem;
    height: 6px;
    top: 50%;
    right: 0;
    background-position: 0% 50%;
}
.page-cx .which .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.page-cx .which .inner::after {
    content: "";
    display: table;
    clear: both;
}
.page-cx .which h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 140%;
    line-height: 1.5;
}
.page-cx .which p {
    line-height: 1.8;
}
.page-cx .which .chart-small {
    display: block;
    width: 100%;
    height: auto;
    margin: 3rem auto;
    max-width: 450px;
}
.page-cx .which .chart-large {
    display: none;
    width: 47.5%;
    height: auto;
}
.page-cx .which ul {
    margin: 0;
    font-size: 80%;
}
.page-cx .which ul li {
    font-size: inherit;
    margin: 0 0 1em 0;
    padding: 0;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.page-cx .which ul li:last-child {
    margin-bottom: 0;
}
.page-cx .which ul i {
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    background-color: #e4002b;
    border-radius: 50%;
    text-align: center;
    font-style: normal;
    margin-right: 1.25em;
}
@media (min-width: 550px) {
    .page-cx .which h3 {
        font-size: 160%;
    }
}
@media (min-width: 600px) {
    .page-cx .which {
        padding-bottom: 8rem;
    }
}
@media (min-width: 720px) {
    .page-cx .which {
        padding-bottom: 10rem;
    }
}
@media (min-width: 900px) {
    .page-cx .which {
        padding-top: 7rem;
        padding-bottom: 12rem;
    }
    .page-cx .which:after {
        display: block;
    }
    .page-cx .which .chart-small {
        display: none;
    }
    .page-cx .which .chart-large {
        display: block;
    }
    .page-cx .which .copy {
        position: absolute;
        left: 60%;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-cx .which p {
        max-width: 26em;
        margin-bottom: 2.5em;
    }
}
@media (min-width: 1000px) {
    .page-cx .which h3 {
        font-size: 210%;
    }
}
@media (min-width: 1100px) {
    .page-cx .which {
        padding-bottom: 14rem;
    }
}
@media (min-width: 1300px) {
    .page-cx .which {
        padding-top: 9rem;
        padding-bottom: 18rem;
    }
}
.page-cx .racket {
    background-color: #efefef;
    padding-bottom: 3.5rem;
    position: relative;
    z-index: 3;
    padding-top: 4rem;
}
.page-cx .racket .video-swap svg g {
    fill: #fff;
}
.page-cx .racket h2 {
    position: absolute;
    z-index: 2;
    padding: 0;
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 350%;
    line-height: 1.55;
    opacity: 0;
    top: -0.82em;
    left: 0;
    width: 100%;
}
.page-cx .racket h2::after {
    display: none;
}
.page-cx .racket h2.triggered {
    -webkit-animation: jfp-slide-up 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: jfp-slide-up 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-cx .racket h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 130%;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #000;
    position: relative;
    padding: 0.8em 0;
}
.page-cx .racket h3::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: -100px;
    right: -100px;
    height: 1px;
    background-color: #dedede;
}
.page-cx .racket .racket {
    display: block;
    float: left;
    padding: 0;
    width: 28%;
    height: auto;
    margin-top: 2rem;
}
.page-cx .racket .details::after {
    content: "";
    display: table;
    clear: both;
}
.page-cx .racket .desc {
    float: right;
    width: 67%;
}
.page-cx .racket .desc::after {
    content: "";
    display: table;
    clear: both;
}
.page-cx .racket p {
    font-weight: bold;
    line-height: 1.8;
    color: #464646;
    margin-bottom: 0;
}
.page-cx .racket p span {
    display: block;
}
@media (min-width: 450px) {
    .page-cx .racket p span {
        margin-bottom: 1em;
    }
}
.page-cx .racket .std-button {
    width: 100%;
    background-color: #000;
    border: none;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(-30deg, transparent 50%, #e4002b 50%);
}
.page-cx .racket .btn-small {
    display: block;
    margin: 3rem auto 0 auto;
}
.page-cx .racket .btn-large {
    display: none;
    float: right;
}
.page-cx .racket .slide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    outline: none;
}
@media (min-width: 900px) {
    .page-cx .racket .slide {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-cx .racket .slide .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}
.page-cx .racket .carousel-arrow {
    background-color: #e4002b;
    top: calc((100vw - 3rem) * 0.28);
}
.page-cx .racket .carousel-arrow svg {
    fill: #000;
}
.page-cx .racket .carousel-arrow:hover {
    background-color: #000;
}
.page-cx .racket .carousel-arrow:hover svg {
    fill: #fff;
}
.page-cx .racket .invisibleonload {
    visibility: hidden;
}
.page-cx .racket .hideonload {
    display: none;
}
@media (min-width: 440px) {
    .page-cx .racket .btn-small {
        max-width: 260px;
    }
}
@media (min-width: 600px) {
    .page-cx .racket {
        padding-top: 12vw;
    }
    .page-cx .racket .btn-small {
        margin-top: 2.25rem;
    }
    .page-cx .racket h2 {
        font-size: 16vw;
    }
}
@media (min-width: 720px) {
    .page-cx .racket {
        padding-bottom: 12rem;
    }
    .page-cx .racket .slide {
        padding: 0;
    }
    .page-cx .racket .carousel-arrow {
        top: 21.5vw;
    }
    .page-cx .racket .video-swap,
    .page-cx .racket .details {
        width: 96%;
        margin: 0 auto;
    }
    .page-cx .racket .details {
        margin-top: 4rem;
        opacity: 0;
        transition: opacity 200ms linear;
    }
    .page-cx .racket .video-swap {
        background-color: rgba(0, 0, 0, 0.2);
    }
    .page-cx .racket .video-swap a,
    .page-cx .racket .video-swap div {
        opacity: 0;
        transition: opacity 200ms linear;
    }
    .page-cx .racket .racket {
        width: 16%;
        margin-top: 0;
    }
    .page-cx .racket h3 {
        font-size: 180%;
        padding: 0;
    }
    .page-cx .racket h3::after {
        display: none;
    }
    .page-cx .racket p {
        font-weight: 400;
    }
    .page-cx .racket p span {
        font-weight: bold;
        margin-bottom: 0;
    }
    .page-cx .racket h3,
    .page-cx .racket .desc {
        float: right;
        width: 80%;
    }
    .page-cx .racket .ranges .key {
        font-size: 80%;
    }
    .page-cx .racket .ranges .val {
        font-size: 150%;
    }
    .page-cx .racket .btn-small {
        margin-top: 3.25rem;
    }
    .page-cx .racket .slick-current .details {
        opacity: 1;
    }
    .page-cx .racket .slick-current .video-swap a,
    .page-cx .racket .slick-current .video-swap div {
        opacity: 1;
    }
}
@media (min-width: 1000px) {
    .page-cx .racket .details {
        margin-top: 5rem;
    }
    .page-cx .racket h3 {
        width: 56%;
        font-size: 200%;
    }
    .page-cx .racket .btn-small {
        display: none;
    }
    .page-cx .racket .btn-large {
        display: block;
        width: 24%;
        padding-left: 0;
        padding-right: 0;
    }
    .page-cx .racket .desc .ranges {
        float: right;
        width: 47%;
        clear: none;
        margin-top: 2rem;
    }
    .page-cx .racket .desc p {
        float: left;
        width: 47%;
    }
}
@media (min-width: 1300px) {
    .page-cx .racket .carousel-arrow {
        top: 19vw;
    }
}
@media (min-width: 1200px) {
    .page-cx .racket {
        padding-top: 12rem;
    }
    .page-cx .racket h2 {
        font-size: 192px;
    }
}
@media (min-width: 1500px) {
    .page-cx .racket .carousel-arrow {
        top: 17.33vw;
    }
}
.page-cx .quote {
    display: none;
    position: relative;
    z-index: 4;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("../img/jfp-quote-bg.jpg");
}
@media (min-width: 900px) {
    .page-cx .quote {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-cx .quote.vtop {
    background-position-y: 5%;
}
.page-cx .quote.vbottom {
    background-position-y: 95%;
}
.page-cx .quote.vcustom-tennis {
    background-position-y: 22%;
}
.page-cx .quote.vcustom-squash {
    background-position-y: 56%;
}
.page-cx .quote.hleft {
    background-position-x: 20%;
}
.page-cx .quote.hright {
    background-position-x: 80%;
}
.page-cx .quote .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 6rem 0;
}
.page-cx .quote .inner::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -11%;
    right: 0;
    bottom: 0;
    width: 66%;
    background-image: url("../img/jfp-quote-kevin.png");
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
}
.page-cx .quote .inner.triggered::after {
    -webkit-animation: jfp-flicker-in 600ms 300ms ease-in both;
    animation: jfp-flicker-in 600ms 300ms ease-in both;
}
.page-cx .quote blockquote,
.page-cx .quote .attribution {
    position: relative;
    z-index: 1;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 0.35em;
    margin: 0;
    padding: 0;
    opacity: 0;
}
.page-cx .quote blockquote {
    border: none;
    font-weight: 400;
    line-height: 2.3;
    width: 50%;
    max-width: 31em;
    font-size: 120%;
    position: relative;
    padding: 1.67em 0;
    margin-top: 2em;
}
.page-cx .quote blockquote::before,
.page-cx .quote blockquote::after {
    position: absolute;
    content: "";
    background-color: #e4002b;
    width: 2.75em;
    height: 5px;
    left: 0;
}
.page-cx .quote blockquote::before {
    top: 0;
}
.page-cx .quote blockquote::after {
    bottom: 0;
}
.page-cx .quote blockquote.triggered {
    -webkit-animation: slideInLeft 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideInLeft 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-cx .quote .attribution {
    font-weight: bold;
    font-size: 150%;
    margin-top: 2.5em;
}
.page-cx .quote .attribution.triggered {
    -webkit-animation: slideInLeft 600ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideInLeft 600ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 720px) {
    .page-cx .quote {
        display: block;
    }
}
@media (min-width: 900px) {
    .page-cx .quote .inner {
        width: 80%;
    }
    .page-cx .quote .inner::after {
        right: -10%;
    }
}
@media (min-width: 1000px) {
    .page-cx .quote .inner {
        padding: 10rem 0;
    }
}
@media (min-width: 1100px) {
    .page-cx .quote .inner {
        padding: 11.5rem 0;
    }
    .page-cx .quote blockquote {
        font-size: 135%;
    }
    .page-cx .quote .attribution {
        font-size: 170%;
    }
}
@media (min-width: 1300px) {
    .page-cx .quote .inner {
        padding: 13rem 0;
    }
    .page-cx .quote blockquote {
        font-size: 150%;
    }
    .page-cx .quote .attribution {
        font-size: 190%;
    }
}
.page-cx .cxdot {
    position: absolute;
    z-index: 2;
    width: 9px;
    height: 9px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #e4002b;
    -webkit-animation: jfp-pulse-1 3s linear infinite;
    animation: jfp-pulse-1 3s linear infinite;
}
.page-cx .cxplus {
    position: absolute;
    z-index: 2;
    width: 28px;
    height: 28px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #e4002b;
    -webkit-animation: jfp-pulse-2 3s 1s linear infinite;
    animation: jfp-pulse-2 3s 1s linear infinite;
}
.page-cx .cxplus::after {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "+";
    color: #fff;
    font-size: 36px;
    line-height: 25px;
}
.page-cx .cxline {
    position: absolute;
    z-index: 1;
    background-color: #e4002b;
}
@-webkit-keyframes jfp-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 0.7;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes jfp-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 0.7;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes jfp-flicker-in {
    0% {
        opacity: 0;
    }
    0.1% {
        opacity: 1;
    }
    5% {
        opacity: 1;
    }
    5.1% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    30.1% {
        opacity: 1;
    }
    35% {
        opacity: 1;
    }
    35.1% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    60.1% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    65.1% {
        opacity: 0;
    }
    99.9% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes jfp-flicker-in {
    0% {
        opacity: 0;
    }
    0.1% {
        opacity: 1;
    }
    5% {
        opacity: 1;
    }
    5.1% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    30.1% {
        opacity: 1;
    }
    35% {
        opacity: 1;
    }
    35.1% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    60.1% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    65.1% {
        opacity: 0;
    }
    99.9% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes jfp-pulse-1 {
    95% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    97.5% {
        -webkit-transform: translate(-50%, -50%) scale(1.3);
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes jfp-pulse-1 {
    95% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    97.5% {
        -webkit-transform: translate(-50%, -50%) scale(1.3);
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}
@-webkit-keyframes jfp-pulse-2 {
    95% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    97.5% {
        -webkit-transform: translate(-50%, -50%) scale(1.15);
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes jfp-pulse-2 {
    95% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    97.5% {
        -webkit-transform: translate(-50%, -50%) scale(1.15);
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}
.page-sx .teaser {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 4rem;
    text-align: center;
}
@media (min-width: 900px) {
    .page-sx .teaser {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-sx .teaservid {
    width: 100%;
    height: auto;
    margin: 6rem auto 0 auto;
    max-width: 680px;
    opacity: 0.01;
}
.page-sx .teaservid.show {
    opacity: 1;
}
.page-sx .countdown {
    display: inline-block;
    border: solid 1px #979797;
    border-radius: 0.5rem;
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    letter-spacing: 0.25em;
    padding: 0.5em 0.75em 1em;
    margin: 2rem 0 0 0;
    font-size: 90%;
}
.page-sx .countdown span {
    display: inline-block;
    font-size: 200%;
    min-width: 1.33em;
    margin: 0 0.33em;
}
.page-sx .countdown span::after {
    display: block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #cf0;
    font-size: 33%;
}
.page-sx .countdown .days::after {
    content: "Days";
}
.page-sx .countdown .hours::after {
    content: "Hours";
}
.page-sx .countdown .mins::after {
    content: "Minutes";
}
.page-sx .countdown .secs::after {
    content: "Seconds";
}
.page-sx .sxform {
    text-align: left;
    margin: 4rem 0 0 0;
}
.page-sx .sxform h2 {
    padding-bottom: 1em;
    margin: 0 0 2em 0;
}
.page-sx .sxform h2::after {
    width: 1.75em;
}
.page-sx .sxform input {
    width: 100%;
    background-color: transparent;
    border-bottom: solid 1px #979797;
    color: #fff;
    font-size: inherit;
    margin-bottom: 2em;
    padding-bottom: 0.5em;
}
.page-sx .sxform input::-webkit-input-placeholder {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #dedede;
}
.page-sx .sxform input:-ms-input-placeholder {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #dedede;
}
.page-sx .sxform input::-ms-input-placeholder {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #dedede;
}
.page-sx .sxform input::placeholder {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #dedede;
}
.page-sx .sxform a.std-button, input.std-button {
    display: block;
    text-align: center;
}
.page-sx .sxform .message,
.page-sx .sxform .disclaimer {
    margin: 1.5em 0 0 0;
    font-size: 95%;
}
.page-sx .sxform .message {
    display: none;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #cf0;
}
.page-sx .sxform .disclaimer {
    color: #aaa;
}
.page-sx .sxform .disclaimer a {
    color: #aaa;
}
@media (min-width: 450px) {
    .page-sx .sxform {
        margin: 5rem 0 2rem 0;
    }
    .page-sx .sxform input {
        float: left;
        width: 66%;
        line-height: 3.5rem;
        padding: 0;
        margin: 0;
    }
    .page-sx .sxform a.std-button, input.std-button {
        float: right;
        width: 30%;
        line-height: 3.5rem;
        padding: 0;
    }
    .page-sx .sxform .disclaimer {
        margin-top: 2.33em;
    }
}
@media (min-width: 600px) {
    .page-sx .teaser {
        padding-bottom: 6rem;
    }
    .page-sx .sxform {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .page-sx .countdown {
        font-size: 100%;
    }
}
@media (min-width: 720px) {
    .page-sx .teaservid {
        margin-top: 4rem;
    }
    .page-sx .countdown {
        margin-top: 1rem;
    }
}
@media (min-width: 1000px) {
    .page-sx .teaser {
        padding-bottom: 8rem;
    }
    .page-sx .teaservid {
        margin-top: 9rem;
    }
    .page-sx .countdown {
        position: absolute;
        top: 3rem;
        right: 3rem;
        margin: 0;
    }
    .page-sx .sxform {
        margin-top: 2rem;
    }
}
@media (min-width: 1100px) {
    .page-sx .teaser {
        background-image: url("../img/sx-blocks.svg");
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: -6rem 50%;
    }
}
@media (min-width: 1200px) {
    .page-sx .teaser {
        background-position-x: -3rem;
    }
    .page-sx .teaservid {
        margin-top: 6rem;
    }
}
@media (min-width: 1400px) {
    .page-sx .teaser {
        padding-bottom: 10rem;
        background-position-x: 5vw;
    }
    .page-sx .teaservid {
        margin-top: 4.5rem;
    }
    .page-sx .countdown {
        top: 5.01rem;
    }
}
@media (min-width: 1540px) {
    .page-sx .teaser {
        background-position-x: 10vw;
    }
    .page-sx .countdown {
        right: calc(((100vw - 1540px) / 2) + 3rem);
    }
}
.page-sx sup {
    position: relative;
    top: -0.3em;
    font-size: 70%;
}
.page-sx .video-swap {
    position: relative;
}
.page-sx .video-swap a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
}
.page-sx .video-swap a .screen {
    display: block;
    width: 100%;
    height: auto;
}
.page-sx .video-swap a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media (min-width: 420px) {
    .page-sx .video-swap a svg {
        width: 5rem;
        height: 5rem;
    }
}
@media (min-width: 720px) {
    .page-sx .video-swap a svg {
        width: 6rem;
        height: 6rem;
    }
}
@media (min-width: 1000px) {
    .page-sx .video-swap a svg {
        width: 8rem;
        height: 8rem;
    }
}
.page-sx .video-swap a:hover svg #circ > g {
    -webkit-animation: sx-p-segment 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
    animation: sx-p-segment 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}
.page-sx .video-swap a:hover svg #circ #c1 {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
}
.page-sx .video-swap a:hover svg #circ #c2 {
    -webkit-animation-delay: 30ms;
    animation-delay: 30ms;
}
.page-sx .video-swap a:hover svg #circ #c3 {
    -webkit-animation-delay: 60ms;
    animation-delay: 60ms;
}
.page-sx .video-swap a:hover svg #circ #c4 {
    -webkit-animation-delay: 90ms;
    animation-delay: 90ms;
}
.page-sx .video-swap a:hover svg #circ #c5 {
    -webkit-animation-delay: 120ms;
    animation-delay: 120ms;
}
.page-sx .video-swap a:hover svg #circ #c6 {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
}
.page-sx .video-swap a:hover svg #circ #c7 {
    -webkit-animation-delay: 180ms;
    animation-delay: 180ms;
}
.page-sx .video-swap a:hover svg #circ #c8 {
    -webkit-animation-delay: 210ms;
    animation-delay: 210ms;
}
.page-sx .video-swap a:hover svg #circ #c9 {
    -webkit-animation-delay: 240ms;
    animation-delay: 240ms;
}
.page-sx .video-swap a:hover svg #circ #c10 {
    -webkit-animation-delay: 270ms;
    animation-delay: 270ms;
}
.page-sx .video-swap a:hover svg #circ #c11 {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}
.page-sx .video-swap a:hover svg #circ #c12 {
    -webkit-animation-delay: 330ms;
    animation-delay: 330ms;
}
.page-sx .video-swap a:hover svg #circ #c13 {
    -webkit-animation-delay: 360ms;
    animation-delay: 360ms;
}
.page-sx .video-swap a:hover svg #circ #c14 {
    -webkit-animation-delay: 390ms;
    animation-delay: 390ms;
}
.page-sx .video-swap a:hover svg #circ #c15 {
    -webkit-animation-delay: 420ms;
    animation-delay: 420ms;
}
.page-sx .video-swap a.hide {
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}
.page-sx .video-swap .vid-container {
    position: relative;
    z-index: 1;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.page-sx .video-swap .vid-container iframe,
.page-sx .video-swap .vid-container object,
.page-sx .video-swap .vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-sx .video-swap .youtube {
    margin: 0;
    padding-top: 0;
}
@-webkit-keyframes sx-p-segment {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.33;
    }
}
@keyframes sx-p-segment {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.33;
    }
}
.page-sx .top {
    position: relative;
    padding-top: 6rem;
}
.page-sx .top .bg {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto -12% auto;
    background-size: 100% auto;
    background-position: 50% 0%;
    background-image: url("../img/sx-hero-racket.jpg");
    background-repeat: no-repeat;
    -webkit-animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-sx .top h1 {
    position: absolute;
    z-index: 1;
    text-align: center;
    top: calc(6rem + 38vw);
    left: 0;
    right: 0;
    margin: 0;
    letter-spacing: 0.75em;
    font-size: 5vw;
    line-height: 1.4;
    -webkit-animation: fadeIn 3000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-sx .top h1 span {
    display: block;
    color: #cf0;
}
.page-sx .top .explore {
    display: none;
    position: absolute;
    z-index: 2;
    top: 62%;
    left: 50%;
    -webkit-transform: translateX(-130px);
    transform: translateX(-130px);
    -webkit-animation: fadeIn 3000ms 3000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 3000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@media (min-width: 600px) {
    .page-sx .top {
        padding-top: 2rem;
    }
    .page-sx .top .bg {
        width: 540px;
        margin-bottom: -25%;
    }
    .page-sx .top h1 {
        font-size: 30px;
        top: 265px;
    }
}
@media (min-width: 1000px) {
    .page-sx .top .explore {
        display: block;
    }
}
@media (min-width: 1200px) {
    .page-sx .top {
        padding-top: 1rem;
    }
    .page-sx .top .bg {
        width: 700px;
        margin-bottom: -30%;
    }
    .page-sx .top h1 {
        top: 340px;
    }
    .page-sx .top .explore {
        -webkit-transform: translateX(-160px);
        transform: translateX(-160px);
    }
}
@media (min-width: 1400px) {
    .page-sx .top {
        padding-top: 1rem;
    }
    .page-sx .top .bg {
        width: 860px;
        margin-bottom: -32%;
    }
    .page-sx .top h1 {
        top: 420px;
    }
    .page-sx .top .explore {
        -webkit-transform: translateX(-175px);
        transform: translateX(-175px);
    }
}
@media (min-width: 1600px) {
    .page-sx .top .bg {
        margin-bottom: -25%;
    }
}
.page-sx .intro {
    position: relative;
    z-index: 1;
    background-image: url("../img/sx-angle-2.svg"), url("../img/sx-angle-1.svg");
    background-size: 100% auto;
    background-position: 0% 100.25%, 0% 0%;
    background-repeat: no-repeat;
    padding-top: 25vw;
    padding-bottom: 11rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .page-sx .intro {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-sx .intro .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-sx .intro p {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #000;
    text-transform: uppercase;
    line-height: 1.9;
    margin-top: 3rem;
}
@media (min-width: 400px) {
    .page-sx .intro {
        padding-bottom: 40vw;
    }
}
@media (min-width: 475px) {
    .page-sx .intro {
        padding-bottom: 45vw;
    }
}
@media (min-width: 550px) {
    .page-sx .intro {
        padding-top: 14.75vw;
        padding-bottom: 35vw;
    }
    .page-sx .intro p {
        width: 70%;
    }
}
@media (min-width: 720px) {
    .page-sx .intro {
        padding-bottom: 25vw;
    }
    .page-sx .intro .video-swap {
        margin: 0 auto;
        width: 80%;
    }
    .page-sx .intro p {
        width: 50%;
    }
}
@media (min-width: 1200px) {
    .page-sx .intro {
        padding-bottom: 22vw;
    }
}
.page-sx .tech {
    position: relative;
    z-index: 1;
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-sx .tech {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-sx .tech .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-sx .tech h2 {
    margin-top: 0;
    font-size: 180%;
    padding-bottom: 1em;
    margin-bottom: 0.5em;
}
.page-sx .tech h2::after {
    height: 0.2em;
    width: 1.5em;
}
.page-sx .tech .racketgraphic {
    background-image: url("../img/sx-tech-racket.png");
    background-size: contain;
    margin: 3rem -25% 0 -25%;
}
.page-sx .tech .racketgraphic:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 120.288362513%;
}
.page-sx .tech .copy {
    margin: 4rem 0;
}
.page-sx .tech .copy p {
    line-height: 1.8;
    color: #fff;
    margin-bottom: 0;
}
.page-sx .tech .copy img {
    display: block;
    width: auto;
    height: 1.9rem;
}
.page-sx .tech .spinboost {
    margin-top: 0;
}
.page-sx .tech .spinboost img {
    height: 3.25rem;
}
.page-sx .tech .powergrid {
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}
.page-sx .tech .powergrid::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5em;
    height: 0.25em;
    background-color: #cf0;
}
.page-sx .tech .sonic-core {
    margin-top: 3rem;
    margin-bottom: 0;
}
.page-sx .tech .trajectory {
    position: relative;
    z-index: 2;
    background-image: url("../img/sx-trajectory-base.jpg");
    background-size: contain;
    margin: 0 -1.5rem;
}
.page-sx .tech .trajectory img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.page-sx .tech .trajectory .layer-1 {
    position: relative;
    display: block;
    height: auto;
}
.page-sx .tech .trajectory.animate .layer-1 {
    opacity: 1;
    -webkit-animation: wipeIn 13265ms 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: wipeIn 13265ms 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .tech .trajectory.animate .layer-2 {
    opacity: 1;
    -webkit-animation: wipeIn 1841ms 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: wipeIn 1841ms 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .tech .trajectory.animate .layer-3 {
    opacity: 1;
    -webkit-animation: wipeIn 4606ms 1841ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: wipeIn 4606ms 1841ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .tech .trajectory.animate .layer-4 {
    opacity: 1;
    -webkit-animation: wipeIn 2576ms 1841ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: wipeIn 2576ms 1841ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .tech .trajectory.animate .layer-5 {
    -webkit-animation: fadeIn 1106ms 3129ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1106ms 3129ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .tech .trajectory.animate .layerset-1 {
    -webkit-animation: fadeOut 1841ms 4053ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeOut 1841ms 4053ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .tech .trajectory.animate .layer-6 {
    -webkit-animation: fadeIn 1841ms 5159ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1841ms 5159ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 500px) {
    .page-sx .tech .racketgraphic {
        width: 415px;
        margin: 3rem auto 0 auto;
    }
}
@media (min-width: 550px) {
    .page-sx .tech .copy img {
        height: 2.3rem;
    }
    .page-sx .tech .spinboost img {
        height: 4.25rem;
    }
}
@media (min-width: 720px) {
    .page-sx .tech h2 {
        font-size: 250%;
    }
    .page-sx .tech h2::after {
        height: 0.15em;
        width: 1em;
    }
    .page-sx .tech .racketgraphic {
        position: absolute;
        z-index: 1;
        top: -9vw;
        right: -12vw;
        width: 60vw;
    }
    .page-sx .tech .spinboost {
        margin-top: 4rem;
        margin-bottom: 6rem;
        width: 40%;
    }
}
@media (min-width: 800px) {
    .page-sx .tech {
        padding-bottom: 0;
    }
    .page-sx .tech .racketgraphic {
        top: -20vw;
    }
    .page-sx .tech .powergrid,
    .page-sx .tech .sonic-core {
        width: 45%;
        margin: 10rem 0;
    }
    .page-sx .tech .powergrid {
        float: left;
        padding: 0;
    }
    .page-sx .tech .powergrid::before {
        bottom: auto;
        top: -3rem;
    }
    .page-sx .tech .sonic-core {
        float: right;
    }
}
@media (min-width: 900px) {
    .page-sx .tech .racketgraphic {
        top: -25vw;
    }
    .page-sx .tech .trajectory {
        margin: 0 -3rem;
    }
}
@media (min-width: 1000px) {
    .page-sx .tech .racketgraphic {
        width: 70%;
        top: -30vw;
    }
    .page-sx .tech .powergrid,
    .page-sx .tech .sonic-core {
        width: 42.5%;
    }
    .page-sx .tech .spinboost {
        margin-top: 6rem;
        width: 35%;
        min-height: 30vw;
    }
}
@media (min-width: 1280px) {
    .page-sx .tech .racketgraphic {
        top: -383px;
    }
    .page-sx .tech .spinboost {
        min-height: 390px;
    }
    .page-sx .tech .trajectory {
        margin: 0 calc(-3rem - ((100vw - 1280px) / 2));
    }
}
@media (min-width: 1440px) {
    .page-sx .tech .trajectory {
        margin: 0 -120px;
    }
}
.page-sx .which {
    position: relative;
    background-color: #121212;
    padding: 3rem 1.5rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 2;
    color: #fff;
}
@media (min-width: 900px) {
    .page-sx .which {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-sx .which .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.page-sx .which .inner::after {
    content: "";
    display: table;
    clear: both;
}
.page-sx .which h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 140%;
    line-height: 1.5;
}
.page-sx .which p {
    line-height: 1.8;
}
.page-sx .which .chart-small {
    display: block;
    width: 100%;
    height: auto;
    margin: 3rem auto;
    max-width: 450px;
}
.page-sx .which .chart-large {
    display: none;
    width: 47.5%;
    height: auto;
}
.page-sx .which ul {
    margin: 0;
    font-size: 80%;
}
.page-sx .which ul li {
    font-size: inherit;
    margin: 0 0 1em 0;
    padding: 0;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.page-sx .which ul li:last-child {
    margin-bottom: 0;
}
.page-sx .which ul i {
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    color: #000;
    background-color: #cf0;
    border-radius: 50%;
    text-align: center;
    font-style: normal;
    margin-right: 1.25em;
}
@media (min-width: 550px) {
    .page-sx .which h3 {
        font-size: 160%;
    }
}
@media (min-width: 600px) {
    .page-sx .which {
        padding-bottom: 8rem;
    }
}
@media (min-width: 720px) {
    .page-sx .which {
        padding-bottom: 10rem;
    }
}
@media (min-width: 900px) {
    .page-sx .which {
        padding-top: 7rem;
        padding-bottom: 12rem;
    }
    .page-sx .which .chart-small {
        display: none;
    }
    .page-sx .which .chart-large {
        display: block;
    }
    .page-sx .which .copy {
        position: absolute;
        left: 60%;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-sx .which p {
        max-width: 26em;
        margin-bottom: 2.5em;
    }
}
@media (min-width: 1000px) {
    .page-sx .which h3 {
        font-size: 210%;
    }
}
@media (min-width: 1100px) {
    .page-sx .which {
        padding-bottom: 14rem;
    }
}
@media (min-width: 1300px) {
    .page-sx .which {
        padding-top: 9rem;
        padding-bottom: 18rem;
    }
}
.page-sx .racket {
    background-color: #fff;
    padding-bottom: 3.5rem;
    position: relative;
    z-index: 3;
    padding-top: 4rem;
}
.page-sx .racket h2 {
    position: absolute;
    z-index: 2;
    padding: 0;
    margin: 0;
    color: #cf0;
    text-align: center;
    font-size: 350%;
    line-height: 1.55;
    opacity: 0;
    top: -0.82em;
    left: 0;
    width: 100%;
}
.page-sx .racket h2::after {
    display: none;
}
.page-sx .racket h2.triggered {
    -webkit-animation: sx-slide-up 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: sx-slide-up 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-sx .racket h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 130%;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #000;
    position: relative;
    padding: 0.8em 0;
}
.page-sx .racket h3::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: -100px;
    right: -100px;
    height: 1px;
    background-color: #dedede;
}
.page-sx .racket .racket {
    display: block;
    float: left;
    padding: 0;
    width: 28%;
    height: auto;
    margin-top: 2rem;
}
.page-sx .racket .details::after {
    content: "";
    display: table;
    clear: both;
}
.page-sx .racket .desc {
    float: right;
    width: 67%;
}
.page-sx .racket .desc::after {
    content: "";
    display: table;
    clear: both;
}
.page-sx .racket p {
    font-weight: bold;
    line-height: 1.8;
    color: #464646;
    margin-bottom: 0;
}
.page-sx .racket p span {
    display: block;
}
@media (min-width: 450px) {
    .page-sx .racket p span {
        margin-bottom: 1em;
    }
}
.page-sx .racket .btn-small {
    display: block;
    margin: 3rem auto 0 auto;
    text-align: center;
}
.page-sx .racket .btn-large {
    display: none;
    float: right;
    text-align: center;
}
.page-sx .racket .slide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    outline: none;
}
@media (min-width: 900px) {
    .page-sx .racket .slide {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-sx .racket .slide .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}
.page-sx .racket .carousel-arrow {
    background-color: #cf0;
    top: calc((100vw - 3rem) * 0.28);
}
.page-sx .racket .carousel-arrow svg {
    fill: #000;
}
.page-sx .racket .carousel-arrow:hover {
    background-color: #000;
}
.page-sx .racket .carousel-arrow:hover svg {
    fill: #fff;
}
.page-sx .racket .invisibleonload {
    visibility: hidden;
}
.page-sx .racket .hideonload {
    display: none;
}
@media (min-width: 440px) {
    .page-sx .racket .btn-small {
        max-width: 260px;
    }
}
@media (min-width: 600px) {
    .page-sx .racket {
        padding-top: 12vw;
    }
    .page-sx .racket .btn-small {
        margin-top: 2.25rem;
    }
    .page-sx .racket h2 {
        font-size: 16vw;
    }
}
@media (min-width: 720px) {
    .page-sx .racket {
        padding-bottom: 6rem;
    }
    .page-sx .racket .slide {
        padding: 0;
    }
    .page-sx .racket .carousel-arrow {
        top: 21.5vw;
    }
    .page-sx .racket .video-swap,
    .page-sx .racket .details {
        width: 96%;
        margin: 0 auto;
    }
    .page-sx .racket .details {
        margin-top: 4rem;
        opacity: 0;
        transition: opacity 200ms linear;
    }
    .page-sx .racket .video-swap {
        background-color: rgba(0, 0, 0, 0.2);
    }
    .page-sx .racket .video-swap a,
    .page-sx .racket .video-swap div {
        opacity: 0;
        transition: opacity 200ms linear;
    }
    .page-sx .racket .racket {
        width: 16%;
        margin-top: 0;
    }
    .page-sx .racket h3 {
        font-size: 180%;
        padding: 0;
    }
    .page-sx .racket h3::after {
        display: none;
    }
    .page-sx .racket p {
        font-weight: 400;
    }
    .page-sx .racket p span {
        font-weight: bold;
        margin-bottom: 0;
    }
    .page-sx .racket h3,
    .page-sx .racket .desc {
        float: right;
        width: 80%;
    }
    .page-sx .racket .ranges .key {
        font-size: 80%;
    }
    .page-sx .racket .ranges .val {
        font-size: 150%;
    }
    .page-sx .racket .btn-small {
        margin-top: 3.25rem;
    }
    .page-sx .racket .slick-current .details {
        opacity: 1;
    }
    .page-sx .racket .slick-current .video-swap a,
    .page-sx .racket .slick-current .video-swap div {
        opacity: 1;
    }
}
@media (min-width: 1000px) {
    .page-sx .racket .details {
        margin-top: 5rem;
    }
    .page-sx .racket h3 {
        width: 56%;
        font-size: 200%;
    }
    .page-sx .racket .btn-small {
        display: none;
    }
    .page-sx .racket .btn-large {
        display: block;
        width: 24%;
        padding-left: 0;
        padding-right: 0;
    }
    .page-sx .racket .desc .ranges {
        float: right;
        width: 47%;
        clear: none;
        margin-top: 2rem;
    }
    .page-sx .racket .desc p {
        float: left;
        width: 47%;
    }
}
@media (min-width: 1300px) {
    .page-sx .racket .carousel-arrow {
        top: 19vw;
    }
}
@media (min-width: 1200px) {
    .page-sx .racket {
        padding-top: 12rem;
    }
    .page-sx .racket h2 {
        font-size: 192px;
    }
}
@media (min-width: 1500px) {
    .page-sx .racket .carousel-arrow {
        top: 17.33vw;
    }
}
.page-sx .ranges {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-top: 2rem;
    clear: both;
    width: 100%;
    max-width: 24rem;
    margin: 0;
}
.page-sx .ranges::after {
    content: "";
    display: table;
    clear: both;
}
.page-sx .ranges div {
    position: relative;
    display: inline-block;
    width: 44%;
}
.page-sx .ranges div:first-child {
    float: left;
}
.page-sx .ranges div:last-child {
    float: right;
}
.page-sx .ranges .key {
    display: block;
    font-size: 60%;
    color: #4e4e4e;
}
.page-sx .ranges .val {
    display: block;
    font-size: 120%;
}
.page-sx .ranges .bar {
    position: absolute;
    bottom: 0.5em;
    left: 2.7em;
    right: 0;
    height: 3px;
}
.page-sx .quote {
    position: relative;
    padding: 3rem 1.5rem;
    padding-bottom: 105vw;
    background-image: linear-gradient(150deg, #000 30%, #232323 80%);
}
@media (min-width: 900px) {
    .page-sx .quote {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-sx .quote .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-sx .quote blockquote,
.page-sx .quote .attribution {
    position: relative;
    z-index: 2;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
.page-sx .quote blockquote {
    position: relative;
    color: #fff;
    line-height: 2.3;
    font-size: 100%;
    border: none;
    padding: 2em 0;
    max-width: 25em;
    letter-spacing: 0.25em;
}
.page-sx .quote blockquote::before,
.page-sx .quote blockquote::after {
    position: absolute;
    content: "";
    background-color: #cf0;
    width: 2.75em;
    height: 5px;
    left: 0;
}
.page-sx .quote blockquote::before {
    top: 0;
}
.page-sx .quote blockquote::after {
    bottom: 0;
}
.page-sx .quote blockquote.triggered {
    -webkit-animation: slideInLeft 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideInLeft 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .quote .attribution {
    color: #cf0;
    font-weight: bold;
    font-size: 80%;
    margin-top: 2.5em;
    line-height: 2.25em;
    letter-spacing: 0.35em;
}
.page-sx .quote .attribution.triggered {
    -webkit-animation: slideInLeft 600ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slideInLeft 600ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-sx .quote .pm-small {
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 0;
    width: 95%;
    height: auto;
}
@media (min-width: 530px) {
    .page-sx .quote {
        padding-bottom: 560px;
    }
    .page-sx .quote .pm-small {
        width: 500px;
    }
}
@media (min-width: 720px) {
    .page-sx .quote {
        background-color: #000;
        background-image: url("../img/sx-pm-large.jpg");
        background-position: 100% 50%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .page-sx .quote .pm-small {
        display: none;
    }
}
@media (min-width: 900px) {
    .page-sx .quote {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .page-sx .quote blockquote {
        font-size: 110%;
    }
    .page-sx .quote .attribution {
        font-size: 90%;
    }
}
@media (min-width: 1100px) {
    .page-sx .quote {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
    .page-sx .quote blockquote {
        font-size: 120%;
    }
}
@media (min-width: 1200px) {
    .page-sx .quote {
        padding-top: 14rem;
        padding-bottom: 14rem;
    }
    .page-sx .quote blockquote {
        font-size: 150%;
    }
    .page-sx .quote .attribution {
        font-size: 110%;
    }
}
@-webkit-keyframes sx-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes sx-slide-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.page-fx .teaser {
    padding: 0 2.5rem 2.5rem 2.5rem;
    background-image: url("../img/fx-bg-2.jpg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 80% auto;
}
.page-fx .teaser .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60.5vw;
}
.page-fx .teaser .fxcs {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}
.page-fx .teaser .fxcs svg {
    width: 100%;
    height: auto;
    -webkit-animation: fadeIn 1000ms 1250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 1250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-fx .teaser .fxcs img {
    display: block;
    width: 50%;
    height: auto;
    margin: 30px auto 0 auto;
    -webkit-animation: fadeIn 1000ms 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1000ms 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-fx .teaser .panels {
    max-width: 300px;
    margin: 0 auto;
}
.page-fx .teaser .countdown,
.page-fx .teaser .fxform {
    border: solid 1px #009fe1;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0.5rem;
    width: 100%;
}
.page-fx .teaser .countdown {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    letter-spacing: 0.25em;
    padding: 0.5em 0.75em 1em;
    font-size: 90%;
    margin-top: 3rem;
}
.page-fx .teaser .countdown span {
    font-size: 200%;
}
.page-fx .teaser .countdown span::after {
    display: block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #009fe1;
    font-size: 33%;
}
.page-fx .teaser .countdown .days::after {
    content: "Days";
}
.page-fx .teaser .countdown .hours::after {
    content: "Hours";
}
.page-fx .teaser .countdown .mins::after {
    content: "Minutes";
}
.page-fx .teaser .countdown .secs::after {
    content: "Seconds";
}
.page-fx .teaser .fxform {
    margin-top: 1.5rem;
    padding: 2rem 1.5rem;
}
.page-fx .teaser .fxform h2 {
    padding: 0;
    margin: 0;
}
.page-fx .teaser .fxform h2::after {
    display: none;
}
.page-fx .teaser .fxform h2 img {
    display: block;
    width: 0.75em;
    height: auto;
    margin: 0.75em 0;
}
.page-fx .teaser .fxform input {
    width: 100%;
    background-color: transparent;
    border-bottom: solid 1px #979797;
    color: #fff;
    font-size: 95%;
    margin-bottom: 2em;
    padding-bottom: 0.5em;
}
.page-fx .teaser .fxform input::-webkit-input-placeholder {
    font-style: italic;
    color: #dedede;
}
.page-fx .teaser .fxform input:-ms-input-placeholder {
    font-style: italic;
    color: #dedede;
}
.page-fx .teaser .fxform input::-ms-input-placeholder {
    font-style: italic;
    color: #dedede;
}
.page-fx .teaser .fxform input::placeholder {
    font-style: italic;
    color: #dedede;
}
.page-fx .teaser .fxform a.std-button, input.std-button {
    display: block;
    text-align: center;
}
.page-fx .teaser .fxform .message,
.page-fx .teaser .fxform .disclaimer {
    margin: 1.5em 0 0 0;
    color: #dedede;
}
.page-fx .teaser .fxform .message {
    display: none;
    font-size: 90%;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #009fe1;
}
.page-fx .teaser .fxform .disclaimer {
    font-size: 80%;
    color: #aaa;
}
.page-fx .teaser .fxform .disclaimer a {
    color: #aaa;
}
@media (min-width: 600px) {
    .page-fx .teaser {
        background-size: 480px auto;
    }
    .page-fx .teaser .inner {
        padding-top: 360px;
    }
    .page-fx .teaser .fxcs {
        max-width: 400px;
    }
}
@media (min-width: 900px) {
    .page-fx .teaser {
        background-size: 680px auto;
    }
    .page-fx .teaser .inner {
        padding-top: 535px;
        padding-bottom: 200px;
    }
    .page-fx .teaser .panels {
        width: 280px;
        position: absolute;
        top: 3rem;
        right: 0;
    }
    .page-fx .teaser .countdown {
        font-size: 100%;
        margin-top: 0;
    }
    .page-fx .teaser .fxform {
        margin-top: 2.5rem;
    }
    .page-fx .teaser .fxform input {
        font-size: 100%;
    }
    .page-fx .teaser .fxcs {
        max-width: none;
        width: 500px;
    }
    .page-fx .teaser .fxcs img {
        margin-top: 50px;
    }
}
@media (min-width: 1200px) {
    .page-fx .teaser {
        background-position: 50% -70px;
    }
    .page-fx .teaser .inner {
        padding-top: 465px;
    }
}
@media (min-width: 1400px) {
    .page-fx .teaser .panels {
        top: 5rem;
    }
}
.page-fx sup {
    position: relative;
    top: -0.3em;
    font-size: 70%;
}
.page-fx .video-swap {
    position: relative;
}
.page-fx .video-swap a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
}
.page-fx .video-swap a .screen {
    display: block;
    width: 100%;
    height: auto;
}
.page-fx .video-swap a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5rem;
    height: 5rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: -webkit-transform 75ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 75ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 75ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 75ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-fx .video-swap a svg #corners {
    -webkit-animation: fxblink 1800ms linear infinite;
    animation: fxblink 1800ms linear infinite;
}
@media (min-width: 420px) {
    .page-fx .video-swap a svg {
        width: 7rem;
        height: 7rem;
    }
}
@media (min-width: 900px) {
    .page-fx .video-swap a svg {
        width: 10rem;
        height: 10rem;
    }
}
.page-fx .video-swap a:hover svg {
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    transform: translate(-50%, -50%) scale(1.05);
}
.page-fx .video-swap a.hide {
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}
.page-fx .video-swap .vid-container {
    position: relative;
    z-index: 1;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.page-fx .video-swap .vid-container iframe,
.page-fx .video-swap .vid-container object,
.page-fx .video-swap .vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-fx .video-swap .youtube {
    margin: 0;
    padding-top: 0;
}
.page-fx .top {
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.page-fx .top:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 114%;
}
@media (min-width: 900px) {
    .page-fx .top {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-fx .top .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}
.page-fx .top .bg {
    position: absolute;
    background-repeat: no-repeat;
    z-index: 0;
    top: -4vw;
    left: 0;
    width: 100%;
    height: 250%;
    background-size: 200% auto;
    background-position: 50% 0%;
    background-image: url("../img/fx-bg-4-small.jpg");
    -webkit-animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-fx .top .fxtitleanim {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    width: 60%;
    height: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: fadeIn 1000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 1000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-fx .top .fxtitleanim svg {
    display: block;
    width: 100%;
    height: auto;
}
.page-fx .top .tagline {
    display: none;
    position: absolute;
    left: 0;
    bottom: 4.5vw;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    font-size: 1.6vw;
    -webkit-animation: fadeIn 1000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 1000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-fx .top .explore {
    display: none;
    position: absolute;
    z-index: 2;
    bottom: -8vw;
    right: 10%;
    -webkit-animation: fadeIn 3000ms 4000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 4000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@media (min-width: 500px) {
    .page-fx .top:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 97.5%;
    }
    .page-fx .top .bg {
        top: -15vw;
    }
    .page-fx .top .fxtitleanim {
        width: 50%;
    }
}
@media (min-width: 720px) {
    .page-fx .top:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 45%;
    }
    .page-fx .top .bg {
        height: 185%;
        top: -4vw;
        background-image: url("../img/fx-bg-4-large.jpg");
        background-size: auto 100%;
    }
    .page-fx .top .fxtitleanim {
        left: 0;
        -webkit-transform: none;
        transform: none;
        width: 36vw;
        bottom: 9.5vw;
    }
    .page-fx .top .tagline {
        display: block;
    }
    .page-fx .top .explore {
        display: block;
    }
}
@media (min-width: 900px) {
    .page-fx .top .fxtitleanim {
        bottom: 8.5vw;
        width: 33vw;
    }
    .page-fx .top .tagline {
        bottom: 3.5vw;
        font-size: 1.5vw;
    }
}
@media (min-width: 1200px) {
    .page-fx .top {
        height: 490px;
    }
    .page-fx .top:before {
        display: none;
    }
    .page-fx .top .bg {
        top: -50px;
    }
    .page-fx .top .fxtitleanim {
        width: 395px;
        bottom: 100px;
    }
    .page-fx .top .tagline {
        font-size: 18px;
        bottom: 35px;
    }
}
@media (min-width: 1400px) {
    .page-fx .top .fxtitleanim {
        bottom: 90px;
    }
    .page-fx .top .tagline {
        bottom: 25px;
    }
}
@media (min-width: 1550px) {
    .page-fx .top .fxtitleanim {
        width: 440px;
        bottom: 65px;
    }
    .page-fx .top .tagline {
        font-size: 20px;
        bottom: 0;
    }
    .page-fx .top .explore {
        bottom: -10vw;
    }
}
.page-fx .intro {
    position: relative;
    z-index: 1;
    background-image: url("../img/fx-angle-2.svg"), url("../img/fx-angle-1.svg");
    background-size: 100% auto;
    background-position: 0% 100.25%, 0% 0%;
    background-repeat: no-repeat;
    padding-top: 25vw;
    padding-bottom: 11rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .page-fx .intro {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-fx .intro .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-fx .intro p {
    color: #fff;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.8;
    margin-top: 3rem;
}
@media (min-width: 420px) {
    .page-fx .intro {
        padding-bottom: 42vw;
    }
}
@media (min-width: 550px) {
    .page-fx .intro {
        padding-top: 14.75vw;
        padding-bottom: 33vw;
    }
    .page-fx .intro p {
        width: 70%;
    }
}
@media (min-width: 900px) {
    .page-fx .intro {
        padding-bottom: 25vw;
    }
    .page-fx .intro .video-swap {
        margin: 0 auto;
        width: 80%;
    }
    .page-fx .intro p {
        margin-top: 4em;
        width: 50%;
    }
}
@media (min-width: 1000px) {
    .page-fx .intro {
        padding-bottom: 22vw;
    }
}
.page-fx .tech {
    position: relative;
    z-index: 1;
    margin-top: -3.25rem;
    padding-top: 0;
    padding-bottom: 5rem;
    overflow: hidden;
}
.page-fx .tech .inner {
    position: relative;
}
.page-fx .tech h2 {
    margin-top: 0;
    font-size: 180%;
    padding-bottom: 1em;
    margin-bottom: 0.5em;
}
.page-fx .tech h2::after {
    background-color: #009fe1;
    height: 0.2em;
    width: 1.5em;
}
.page-fx .tech h3 {
    color: #009fe1;
    max-width: none;
    margin: 2em 0 3em 0;
}
.page-fx .tech .image {
    position: relative;
    z-index: 0;
    margin: 0 -1.5rem;
}
.page-fx .tech .image .glow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
}
.page-fx .tech .image .glow.triggered {
    -webkit-animation: fxglow 1500ms 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both, fxpulse 1500ms 1500ms cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
    animation: fxglow 1500ms 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both, fxpulse 1500ms 1500ms cubic-bezier(0.455, 0.03, 0.515, 0.955) alternate infinite;
}
.page-fx .tech .dotholder {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-fx .tech .dotholder:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 109.727164887%;
}
.page-fx .tech .dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-image: url("../img/fx-dot.svg"), radial-gradient(closest-side, rgba(177, 232, 255, 0.5), rgba(177, 232, 255, 0));
    background-size: 33% 33%, 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.page-fx .tech .dot.triggered {
    -webkit-animation: fadeIn 1500ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 1500ms 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-fx .tech .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 33%;
    height: 33%;
    border: solid 3px #009fe1;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: fxring 4s ease-out infinite backwards;
    animation: fxring 4s ease-out infinite backwards;
}
.page-fx .tech .ring:nth-child(2) {
    -webkit-animation-delay: 1.333s;
    animation-delay: 1.333s;
}
.page-fx .tech .ring:nth-child(3) {
    -webkit-animation-delay: 2.667s;
    animation-delay: 2.667s;
}
.page-fx .tech .pbg-small .dotholder:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 174.358974359%;
}
.page-fx .tech .pbg-small .dot {
    top: 19.5%;
    left: 19.5%;
}
.page-fx .tech .pbg-large .dot {
    top: 10%;
    left: 21%;
}
.page-fx .tech .pbfg .dot {
    top: 56%;
    left: 52%;
}
.page-fx .tech .ftr .dot {
    top: 54%;
    left: 39%;
}
.page-fx .tech .pbg-large {
    display: none;
}
.page-fx .tech .copy {
    position: relative;
    z-index: 1;
    background-image: url("../img/fx-triangle.svg");
    background-size: 1.1rem auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    padding-top: 1.9rem;
}
.page-fx .tech .copy img {
    width: 13rem;
    height: auto;
}
.page-fx .tech .copy p {
    max-width: 20em;
}
.page-fx .tech .row:nth-of-type(1) .pbg-small {
    margin: 0 auto;
    width: 90%;
}
.page-fx .tech .row:nth-of-type(1) .copy {
    margin-top: -2rem;
}
.page-fx .tech .row:nth-of-type(2) {
    padding-top: 3rem;
}
.page-fx .tech .row:nth-of-type(2) .copy {
    margin-top: 2rem;
}
.page-fx .tech .row:nth-of-type(3) {
    padding-top: 1rem;
}
.page-fx .tech .row:nth-of-type(3) .copy {
    margin-top: -3rem;
}
.page-fx .tech .row:nth-of-type(2)::before,
.page-fx .tech .row:nth-of-type(3)::before,
.page-fx .tech .row:nth-of-type(2)::after,
.page-fx .tech .row:nth-of-type(3)::after {
    content: "";
    position: absolute;
    z-index: 2;
}
.page-fx .tech .row:nth-of-type(2)::before,
.page-fx .tech .row:nth-of-type(3)::before {
    display: none;
    background: url("../img/fx-triangle-design.svg");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 22vw;
    height: 22vw;
    top: -28vw;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.page-fx .tech .row:nth-of-type(2)::after,
.page-fx .tech .row:nth-of-type(3)::after {
    background: url("../img/fx-line.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    top: 0;
    width: 60vw;
    height: 70px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-fx .tech .row:nth-of-type(2)::after {
    right: -10vw;
    background-position: 0% 50%;
}
.page-fx .tech .row:nth-of-type(3)::after {
    left: -10vw;
    background-position: 100% 50%;
}
@media (min-width: 550px) {
    .page-fx .tech .dot {
        width: 130px;
        height: 130px;
    }
}
@media (min-width: 720px) {
    .page-fx .tech {
        margin-top: -6rem;
    }
    .page-fx .tech h2 {
        font-size: 250%;
    }
    .page-fx .tech h2::after {
        height: 0.15em;
        width: 1em;
    }
    .page-fx .tech h3 {
        position: absolute;
        z-index: 1;
        top: 1.5em;
        right: 0;
        text-align: right;
        margin: 0;
    }
    .page-fx .tech .pbg-small {
        display: none;
    }
    .page-fx .tech .pbg-large {
        display: block;
    }
    .page-fx .tech .image {
        width: 55%;
    }
    .page-fx .tech .image .glow {
        top: 50%;
    }
    .page-fx .tech .dot {
        width: 100px;
        height: 100px;
    }
    .page-fx .tech .copy {
        width: 45%;
        background-size: 1.5rem auto;
        padding-top: 2.6rem;
    }
    .page-fx .tech .copy img {
        width: 16rem;
    }
    .page-fx .tech .row {
        margin: 30vw 0;
    }
    .page-fx .tech .row:nth-of-type(1) {
        margin-top: 25vw;
    }
    .page-fx .tech .row:nth-of-type(1),
    .page-fx .tech .row:nth-of-type(2),
    .page-fx .tech .row:nth-of-type(3) {
        padding-top: 0;
    }
    .page-fx .tech .row:nth-of-type(1) .copy,
    .page-fx .tech .row:nth-of-type(2) .copy,
    .page-fx .tech .row:nth-of-type(3) .copy {
        margin-top: 0;
    }
    .page-fx .tech .row:nth-of-type(2)::after,
    .page-fx .tech .row:nth-of-type(3)::after {
        top: -12vw;
        width: 30vw;
        height: 90px;
    }
}
@media (min-width: 900px) {
    .page-fx .tech {
        margin-top: -7rem;
    }
    .page-fx .tech h2 {
        font-size: 300%;
    }
    .page-fx .tech h3 {
        font-size: 175%;
    }
    .page-fx .tech .image {
        width: 60%;
    }
    .page-fx .tech .dot {
        width: 130px;
        height: 130px;
    }
    .page-fx .tech .copy {
        width: 40%;
    }
    .page-fx .tech .copy p {
        padding-right: 0;
    }
    .page-fx .tech .row {
        margin: 55vw 0;
    }
    .page-fx .tech .row:nth-of-type(1) {
        margin-top: 30vw;
    }
    .page-fx .tech .row:nth-of-type(2)::after,
    .page-fx .tech .row:nth-of-type(3)::after {
        top: -28vw;
        height: 100px;
    }
    .page-fx .tech .row:nth-of-type(2)::before,
    .page-fx .tech .row:nth-of-type(3)::before {
        display: block;
    }
}
@media (min-width: 1100px) {
    .page-fx .tech .image {
        width: 66%;
    }
    .page-fx .tech .dot {
        width: 140px;
        height: 140px;
    }
    .page-fx .tech .copy {
        width: 33%;
        background-size: 1.75rem auto;
        padding-top: 3rem;
    }
    .page-fx .tech .copy img {
        width: 20rem;
    }
    .page-fx .tech .row {
        margin: 65vw 0;
    }
    .page-fx .tech .row:nth-of-type(2)::after,
    .page-fx .tech .row:nth-of-type(3)::after {
        top: -32vw;
        height: 120px;
    }
    .page-fx .tech .row:nth-of-type(2)::before,
    .page-fx .tech .row:nth-of-type(3)::before {
        top: -32vw;
    }
}
@media (min-width: 1200px) {
    .page-fx .tech .row:nth-of-type(1) .image img,
    .page-fx .tech .row:nth-of-type(2) .image img,
    .page-fx .tech .row:nth-of-type(3) .image img {
        left: auto !important;
        right: auto !important;
    }
}
@media (min-width: 1280px) {
    .page-fx .tech .row {
        margin: 830px 0;
    }
    .page-fx .tech .row:nth-of-type(1) {
        margin-top: 380px;
    }
    .page-fx .tech .row:nth-of-type(2) {
        margin-top: 900px;
    }
    .page-fx .tech .row:nth-of-type(2)::before,
    .page-fx .tech .row:nth-of-type(2)::after {
        top: -450px;
    }
    .page-fx .tech .row:nth-of-type(3)::before,
    .page-fx .tech .row:nth-of-type(3)::after {
        top: -409px;
    }
    .page-fx .tech .row:nth-of-type(2)::before,
    .page-fx .tech .row:nth-of-type(3)::before {
        width: 280px;
        height: 280px;
    }
    .page-fx .tech .row:nth-of-type(2):after {
        width: 300px;
        right: calc(0px - ((100vw - 1200px) / 2));
    }
    .page-fx .tech .row:nth-of-type(3):after {
        width: 300px;
        left: calc(0px - ((100vw - 1200px) / 2));
    }
}
@media (min-width: 1400px) {
    .page-fx .tech {
        margin-top: -9rem;
    }
}
.page-fx .racket {
    background-color: #000;
    position: relative;
}
.page-fx .racket h2 {
    position: relative;
    z-index: 2;
    padding: 0;
    margin: 0;
    color: #009fe1;
    text-align: center;
    font-size: 450%;
    line-height: 1;
    opacity: 0;
}
.page-fx .racket h2::after {
    display: none;
}
.page-fx .racket h2.triggered {
    -webkit-animation: fxslideup 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fxslideup 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-fx .racket .carousel {
    position: relative;
    z-index: 1;
    margin-top: -25px;
}
.page-fx .racket .carousel-arrow {
    top: 37%;
    background-color: #009fe1;
}
.page-fx .racket .carousel-arrow svg {
    fill: #000;
}
.page-fx .racket .carousel-arrow:hover {
    background-color: #fff;
}
.page-fx .racket .invisibleonload {
    visibility: hidden;
}
.page-fx .racket .hideonload {
    display: none;
}
.page-fx .racket .slide {
    background-color: #000;
    opacity: 0.6;
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-fx .racket .slide.slick-current {
    opacity: 1;
}
.page-fx .racket .slide img {
    display: block;
    width: 70%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
}
.page-fx .racket .details {
    background-color: #009fe1;
    position: relative;
}
.page-fx .racket .details div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 0;
    padding: 2.25rem 1.5rem 1.875rem 1.5rem;
    transition: opacity 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.page-fx .racket .details div.show {
    opacity: 1;
    z-index: 1;
    transition: opacity 200ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-fx .racket .details h3,
.page-fx .racket .details p {
    color: #fff;
}
.page-fx .racket .details h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    font-size: 150%;
    line-height: 1;
}
.page-fx .racket .details p {
    margin: 1em 0 1.75em 0;
}
.page-fx .racket .details strong {
    display: block;
}
.page-fx .racket .details .std-button {
    width: 100%;
    text-align: center;
}
@media (min-width: 440px) {
    .page-fx .racket h2 {
        font-size: 15vw;
    }
    .page-fx .racket .carousel {
        margin-top: -6.5vw;
    }
}
@media (min-width: 720px) {
    .page-fx .racket .carousel {
        margin-top: -5vw;
    }
    .page-fx .racket .slide img {
        width: 100%;
    }
    .page-fx .racket .details h3 {
        font-size: 180%;
    }
}
@media (min-width: 900px) {
    .page-fx .racket {
        padding-top: 5vw;
    }
    .page-fx .racket .slide img {
        width: 90%;
    }
    .page-fx .racket .details {
        position: absolute;
        z-index: 2;
        background-color: transparent;
        bottom: 3rem;
        left: 3rem;
        width: 40%;
    }
    .page-fx .racket .details div {
        padding: 0;
    }
    .page-fx .racket .details p {
        max-width: 22em;
        margin-top: 1.25em;
        margin-bottom: 2.25em;
    }
    .page-fx .racket .details strong {
        color: #009fe1;
        font-size: 115%;
    }
    .page-fx .racket .details .std-button {
        width: auto;
        background-color: #009fe1;
        padding: 1em 3.5em;
    }
}
@media (min-width: 1000px) {
    .page-fx .racket .details {
        bottom: 6rem;
        left: 6rem;
    }
    .page-fx .racket .details h3 {
        font-size: 250%;
    }
}
@media (min-width: 1100px) {
    .page-fx .racket {
        padding-top: 8vw;
    }
}
@media (min-width: 1200px) {
    .page-fx .racket {
        padding-top: 14rem;
    }
    .page-fx .racket .details {
        left: auto;
        right: 50%;
        width: 40rem;
        bottom: 11rem;
    }
    .page-fx .racket .details h3 {
        font-size: 275%;
    }
}
@media (min-width: 1200px) {
    .page-fx .racket h2 {
        font-size: 192px;
    }
    .page-fx .racket .carousel {
        margin-top: -60px;
    }
}
.page-fx .which {
    position: relative;
    background-color: #121212;
    padding: 3rem 1.5rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 2;
    color: #fff;
}
@media (min-width: 900px) {
    .page-fx .which {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-fx .which .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.page-fx .which .inner::after {
    content: "";
    display: table;
    clear: both;
}
.page-fx .which h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 140%;
    line-height: 1.5;
}
.page-fx .which p {
    line-height: 1.8;
}
.page-fx .which .chart-small {
    display: block;
    width: 100%;
    height: auto;
    margin: 3rem auto;
    max-width: 450px;
}
.page-fx .which .chart-large {
    display: none;
    width: 47.5%;
    height: auto;
}
.page-fx .which ul {
    margin: 0;
    font-size: 80%;
}
.page-fx .which ul li {
    font-size: inherit;
    margin: 0 0 1em 0;
    padding: 0;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.page-fx .which ul li:last-child {
    margin-bottom: 0;
}
.page-fx .which ul i {
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    background-color: #009fe1;
    border-radius: 50%;
    text-align: center;
    font-style: normal;
    margin-right: 1.25em;
}
@media (min-width: 550px) {
    .page-fx .which h3 {
        font-size: 160%;
    }
}
@media (min-width: 600px) {
    .page-fx .which {
        padding-bottom: 6rem;
    }
}
@media (min-width: 900px) {
    .page-fx .which {
        padding-top: 8rem;
    }
    .page-fx .which .chart-small {
        display: none;
    }
    .page-fx .which .chart-large {
        display: block;
    }
    .page-fx .which .copy {
        position: absolute;
        left: 60%;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-fx .which p {
        max-width: 26em;
        margin-bottom: 2.5em;
    }
}
@media (min-width: 1000px) {
    .page-fx .which h3 {
        font-size: 210%;
    }
}
@media (min-width: 1100px) {
    .page-fx .which {
        padding-bottom: 10rem;
    }
}
@media (min-width: 1300px) {
    .page-fx .which {
        padding-top: 10rem;
        padding-bottom: 12rem;
    }
}
.page-fx .picgrid img {
    display: none;
    width: 100%;
    height: auto;
}
.page-fx .picgrid img:nth-child(1) {
    display: block;
}
@media (min-width: 600px) {
    .page-fx .picgrid img:nth-child(1) {
        display: none;
    }
    .page-fx .picgrid img:nth-child(2) {
        display: block;
    }
}
@media (min-width: 900px) {
    .page-fx .picgrid img:nth-child(2) {
        display: none;
    }
    .page-fx .picgrid img:nth-child(3) {
        display: block;
    }
}
@-webkit-keyframes fxglow {
    0% {
        opacity: 0;
        -webkit-filter: blur(5px) saturate(0%);
        filter: blur(5px) saturate(0%);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-filter: blur(0px) saturate(100%);
        filter: blur(0px) saturate(100%);
    }
}
@keyframes fxglow {
    0% {
        opacity: 0;
        -webkit-filter: blur(5px) saturate(0%);
        filter: blur(5px) saturate(0%);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-filter: blur(0px) saturate(100%);
        filter: blur(0px) saturate(100%);
    }
}
@-webkit-keyframes fxpulse {
    0% {
        opacity: 1;
        -webkit-filter: blur(0px) saturate(100%);
        filter: blur(0px) saturate(100%);
    }
    100% {
        opacity: 0.67;
        -webkit-filter: blur(1px) saturate(50%);
        filter: blur(1px) saturate(50%);
    }
}
@keyframes fxpulse {
    0% {
        opacity: 1;
        -webkit-filter: blur(0px) saturate(100%);
        filter: blur(0px) saturate(100%);
    }
    100% {
        opacity: 0.67;
        -webkit-filter: blur(1px) saturate(50%);
        filter: blur(1px) saturate(50%);
    }
}
@-webkit-keyframes fxring {
    0% {
        width: 33%;
        height: 33%;
        border-color: rgba(0, 159, 225, 0.8);
    }
    100% {
        width: 80%;
        height: 80%;
        border-color: rgba(0, 159, 225, 0);
    }
}
@keyframes fxring {
    0% {
        width: 33%;
        height: 33%;
        border-color: rgba(0, 159, 225, 0.8);
    }
    100% {
        width: 80%;
        height: 80%;
        border-color: rgba(0, 159, 225, 0);
    }
}
@-webkit-keyframes fxslideup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 0.75;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes fxslideup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
    }
    100% {
        opacity: 0.75;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.page-ao h2.aoh2 {
    font-size: 160%;
    margin: 0 0 1em 0;
    padding: 0;
    color: #fff;
    letter-spacing: 0.2em;
}
.page-ao h2.aoh2:after {
    display: none;
}
@media (min-width: 380px) {
    .page-ao h2.aoh2 {
        font-size: 190%;
    }
}
@media (min-width: 720px) {
    .page-ao h2.aoh2 {
        font-size: 220%;
    }
}
@media (min-width: 900px) {
    .page-ao h2.aoh2 {
        font-size: 270%;
    }
}
.page-ao p.aop {
    color: #fff;
    font-size: 100%;
    line-height: 1.9;
}
@media (min-width: 380px) {
    .page-ao p.aop {
        font-size: 110%;
    }
}
.page-ao .video-swap {
    position: relative;
}
.page-ao .video-swap a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
}
.page-ao .video-swap a .screen {
    display: block;
    width: 100%;
    height: auto;
}
.page-ao .video-swap a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.5rem;
    height: 3.5rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.page-ao .video-swap a svg #l,
.page-ao .video-swap a svg #r {
    transition: -webkit-transform 150ms ease-out;
    transition: transform 150ms ease-out;
    transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
}
@media (min-width: 420px) {
    .page-ao .video-swap a svg {
        width: 4.5rem;
        height: 4.5rem;
    }
}
@media (min-width: 720px) {
    .page-ao .video-swap a svg {
        width: 5.5rem;
        height: 5.5rem;
    }
}
.page-ao .video-swap a:hover svg #l,
.page-ao .video-swap a:hover svg #r {
    transition: -webkit-transform 50ms ease-out;
    transition: transform 50ms ease-out;
    transition: transform 50ms ease-out, -webkit-transform 50ms ease-out;
}
.page-ao .video-swap a:hover svg #l {
    -webkit-transform: translate(2px, 10px);
    transform: translate(2px, 10px);
}
.page-ao .video-swap a:hover svg #r {
    -webkit-transform: translate(-2px, -10px);
    transform: translate(-2px, -10px);
}
.page-ao .video-swap a.hide {
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}
.page-ao .video-swap .vid-container {
    position: relative;
    z-index: 1;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.page-ao .video-swap .vid-container iframe,
.page-ao .video-swap .vid-container object,
.page-ao .video-swap .vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-ao .video-swap .youtube {
    margin: 0;
    padding-top: 0;
}
.page-ao .top {
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: #002b6f;
    overflow: hidden;
}
@media (min-width: 900px) {
    .page-ao .top {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-ao .top .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4.5rem;
    padding-bottom: 28.125vw;
    padding-bottom: calc(((100vw - 3rem) * 0.5625) * 0.5);
}
.page-ao .top .bg {
    position: absolute;
    z-index: 0;
    top: -5%;
    left: 0;
    width: 100%;
    height: 105%;
    height: calc(100% + 50px);
    background-repeat: no-repeat;
    background-size: 220% auto;
    background-position-x: 50%;
    background-position-y: -30vw;
    background-position-y: calc(50px - 28vw);
    background-image: url("../img/ao-hero-bg.jpg");
    -webkit-animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-ao .top .fabric-small,
.page-ao .top .fabric-large,
.page-ao .top .balls,
.page-ao .top p,
.page-ao .top .explore {
    position: relative;
    z-index: 1;
}
.page-ao .top .fabric-small,
.page-ao .top .balls {
    display: block;
    margin: 0 auto;
    height: auto;
}
.page-ao .top .fabric-small {
    width: 75%;
    max-width: 290px;
    -webkit-animation: slideInUp 1000ms 1500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: slideInUp 1000ms 1500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-ao .top .fabric-large {
    display: none;
    width: 100%;
    height: auto;
    padding-top: 8%;
    -webkit-animation: slideInRight 1000ms 1500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: slideInRight 1000ms 1500ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-ao .top .balls {
    width: 60%;
    max-width: 230px;
    margin-top: 3rem;
    margin-bottom: 4rem;
    -webkit-animation: slideInUp 1000ms 1650ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: slideInUp 1000ms 1650ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-ao .top p {
    margin: 0 0 5rem 0;
    font-weight: bold;
    -webkit-animation: fadeIn 3000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 3000ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-ao .top .explore {
    display: none;
}
@media (min-width: 720px) {
    .page-ao .top .bg {
        background-size: 100% auto;
        background-position-y: -10.5vw;
        background-position-y: calc(50px - 14.5vw);
    }
    .page-ao .top .inner {
        padding-top: 5rem;
        padding-bottom: 11.25vw;
        padding-bottom: calc(((100vw - 3rem) * 0.5625) * 0.2);
    }
    .page-ao .top .wrap {
        position: relative;
        margin-bottom: 1.5rem;
    }
    .page-ao .top .wrap::after {
        content: "";
        display: table;
        clear: both;
    }
    .page-ao .top .left {
        position: absolute;
        width: 62.5%;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-ao .top .fabric-small {
        display: none;
    }
    .page-ao .top .fabric-large {
        display: block;
    }
    .page-ao .top p {
        margin: 2em 0 0 0;
        font-weight: normal;
        -webkit-animation: slideInRight 1000ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: slideInRight 1000ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
    .page-ao .top .balls {
        float: right;
        max-width: none;
        width: 22.5%;
        margin: 0;
        -webkit-animation: slideInUp 1000ms 1900ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: slideInUp 1000ms 1900ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
    .page-ao .top .explore {
        display: inline-block;
        margin-bottom: 3rem;
        -webkit-animation: fadeIn 1000ms 3000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: fadeIn 1000ms 3000ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
}
@media (min-width: 850px) {
    .page-ao .top p span {
        display: block;
    }
}
@media (min-width: 900px) {
    .page-ao .top .bg {
        background-position-y: -7.5vw;
        background-position-y: calc(50px - 11.5vw);
    }
    .page-ao .top .inner {
        padding-top: 7rem;
        padding-bottom: 9vw;
        padding-bottom: calc((((100vw - 6rem) * 0.8) * 0.5625) * 0.2);
    }
    .page-ao .top .wrap {
        margin-bottom: 0;
    }
    .page-ao .top .left {
        width: 60%;
    }
    .page-ao .top .balls {
        margin-right: 6%;
    }
    .page-ao .top .explore {
        margin-bottom: 2rem;
    }
}
@media (min-width: 1280px) {
    .page-ao .top .inner {
        padding-bottom: 108px;
    }
}
.page-ao .history,
.page-ao .endorsed {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: #008ecf;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (min-width: 900px) {
    .page-ao .history,
    .page-ao .endorsed {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-ao .history .inner,
.page-ao .endorsed .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-ao .history h2,
.page-ao .endorsed h2 {
    max-width: 12em;
    margin-bottom: 0.5em;
}
.page-ao .history p,
.page-ao .endorsed p {
    font-weight: bold;
    margin: 0;
}
.page-ao .history .images,
.page-ao .endorsed .images {
    position: relative;
}
.page-ao .history .images img,
.page-ao .endorsed .images img {
    position: absolute;
    height: auto;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
}
.page-ao .history .images img:nth-of-type(2),
.page-ao .endorsed .images img:nth-of-type(2) {
    z-index: 1;
}
.page-ao .history .images img:nth-of-type(1),
.page-ao .endorsed .images img:nth-of-type(1) {
    z-index: 2;
}
@media (min-width: 720px) {
    .page-ao .history p,
    .page-ao .endorsed p {
        font-weight: normal;
    }
}
.page-ao .history {
    background-image: url("../img/ao-circles-1.svg");
}
.page-ao .history .inner {
    padding-top: 28.125vw;
    padding-top: calc(((100vw - 3rem) * 0.5625) * 0.5);
    padding-bottom: 6rem;
}
.page-ao .history h2 {
    margin-top: 4rem;
}
.page-ao .history .video-swap {
    position: absolute;
    left: 0;
    top: -28.125vw;
    top: calc(0vw - (((100vw - 3rem) * 0.5625) * 0.5));
    width: 100%;
}
.page-ao .history .images {
    margin: 1.25rem auto 3.5rem auto;
}
.page-ao .history .images:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.page-ao .history .images p {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    color: rgba(255, 255, 255, 0.2);
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 34vw;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1;
}
.page-ao .history .images p span {
    opacity: 0;
    display: inline-block;
}
.page-ao .history .images p.triggered span {
    -webkit-animation: growIn 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: growIn 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-ao .history .images p.triggered span:nth-child(1) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}
.page-ao .history .images p.triggered span:nth-child(2) {
    -webkit-animation-delay: 275ms;
    animation-delay: 275ms;
}
.page-ao .history .images p.triggered span:nth-child(3) {
    -webkit-animation-delay: 350ms;
    animation-delay: 350ms;
}
.page-ao .history .images p.triggered span:nth-child(4) {
    -webkit-animation-delay: 425ms;
    animation-delay: 425ms;
}
.page-ao .history .images img:nth-of-type(2) {
    top: 22%;
    left: 9%;
    width: 43%;
}
.page-ao .history .images img:nth-of-type(1) {
    bottom: 0;
    right: 4%;
    width: 55%;
}
@media (min-width: 440px) {
    .page-ao .history .images {
        width: 370px;
    }
    .page-ao .history .images p {
        font-size: 1020%;
    }
}
@media (min-width: 720px) {
    .page-ao .history .inner {
        padding-top: 45vw;
        padding-top: calc(((100vw - 3rem) * 0.5625) * 0.8);
        padding-bottom: 0;
    }
    .page-ao .history .video-swap {
        top: -11.25vw;
        top: calc(0vw - (((100vw - 3rem) * 0.5625) * 0.2));
    }
    .page-ao .history .wrap {
        position: relative;
        padding: 16vw 0 16vw 62%;
    }
    .page-ao .history .images {
        position: absolute;
        top: 47.5%;
        left: 0;
        width: 55%;
        margin: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-ao .history .images p {
        font-size: 16.5vw;
    }
    .page-ao .history .images img:nth-of-type(2) {
        top: 14%;
        left: 20%;
        width: 51%;
    }
    .page-ao .history .images img:nth-of-type(1) {
        right: 0;
        width: 66%;
    }
    .page-ao .history h2 {
        margin: 0 0 0.5em 0;
    }
}
@media (min-width: 900px) {
    .page-ao .history .inner {
        padding-top: 36vw;
        padding-top: calc((((100vw - 6rem) * 0.8) * 0.5625) * 0.8);
    }
    .page-ao .history .video-swap {
        left: 10%;
        width: 80%;
        top: -9vw;
        top: calc(0vw - ((((100vw - 6rem) * 0.8) * 0.5625) * 0.2));
    }
    .page-ao .history .wrap {
        padding: 19vw 0 19vw 60%;
    }
    .page-ao .history p {
        max-width: 27em;
    }
    .page-ao .history .images p {
        font-size: 16vw;
    }
}
@media (min-width: 1000px) {
    .page-ao .history .wrap {
        padding: 19vw 0 20vw 61%;
    }
    .page-ao .history .images {
        left: 6%;
        width: 50%;
    }
    .page-ao .history .images p {
        font-size: 15vw;
    }
}
@media (min-width: 1280px) {
    .page-ao .history .inner {
        padding-top: 432px;
    }
    .page-ao .history .video-swap {
        top: -108px;
    }
    .page-ao .history .wrap {
        padding: 19rem 0 20rem 61%;
    }
    .page-ao .history .images p {
        font-size: 1420%;
    }
}
.page-ao .cgi {
    padding: 3rem 1.5rem;
    background-color: #000;
}
@media (min-width: 900px) {
    .page-ao .cgi {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-ao .cgi .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-ao .cgi video {
    display: block;
    width: 100%;
    height: auto;
}
.page-ao .cgi .pos {
    display: block;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 3rem auto 0 auto;
    background: transparent;
}
.page-ao .cgi .pos::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
}
.page-ao .cgi .pos:focus {
    outline: none;
}
.page-ao .cgi .pos::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.page-ao .cgi .pos::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.page-ao .cgi .pos::-moz-range-thumb {
    border: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.page-ao .cgi .pos::-ms-thumb {
    border: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.page-ao .cgi .pos::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: #888;
    border-radius: 5px;
    -webkit-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-ao .cgi .pos:hover::-webkit-slider-runnable-track {
    background: #cf0;
    -webkit-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
.page-ao .cgi .pos::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    border-radius: 5px;
    background: #888;
    -moz-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-ao .cgi .pos:hover::-moz-range-track {
    background: #cf0;
    -moz-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
.page-ao .cgi .pos::-ms-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: transparent;
    color: transparent;
}
.page-ao .cgi .pos::-ms-fill-lower {
    background: #888;
    border-radius: 5px;
    -ms-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-ao .cgi .pos:hover::-ms-fill-lower {
    background: #cf0;
    -ms-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
.page-ao .cgi .pos::-ms-fill-upper {
    background: #888;
    border-radius: 5px;
    -ms-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-ao .cgi .pos:hover::-ms-fill-upper {
    background: #cf0;
    -ms-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
@media (min-width: 720px) {
    .page-ao .cgi h2 {
        text-align: center;
    }
    .page-ao .cgi .pos {
        width: 85%;
    }
}
@media (min-width: 900px) {
    .page-ao .cgi {
        padding-bottom: 4.5rem;
    }
    .page-ao .cgi video {
        width: 80%;
        margin: 0 auto;
    }
    .page-ao .cgi .pos {
        width: 67%;
        margin: 4.5rem auto 0 auto;
    }
}
.page-ao .techs {
    background-color: #121212 !important;
}
.page-ao .techs p {
    line-height: 1.9;
    color: #fff !important;
    margin-top: 0.5em !important;
}
@media (min-width: 550px) {
    .page-ao .techs p {
        margin-top: 1em !important;
    }
    .page-ao .techs .t:first-child p {
        padding-right: 1em;
    }
}
@media (min-width: 900px) {
    .page-ao .techs .t:first-child {
        margin-left: calc(((100% - 6rem) / 6) + 1rem);
    }
}
.page-ao .endorsed {
    background-image: url("../img/ao-circles-2.svg");
}
.page-ao .endorsed .inner {
    padding-bottom: 28.125vw;
    padding-bottom: calc(((100vw - 3rem) * 0.5625) * 0.5);
    padding-top: 4rem;
}
.page-ao .endorsed .images {
    margin: 3rem auto 2.5rem auto;
}
.page-ao .endorsed .images:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 140%;
}
.page-ao .endorsed .images img:nth-of-type(2) {
    top: 0;
    left: 6%;
    width: 65%;
}
.page-ao .endorsed .images img:nth-of-type(1) {
    bottom: 0;
    right: 2%;
    width: 58%;
    box-shadow: none;
}
.page-ao .endorsed .std-button {
    display: block;
    width: 100%;
    margin: 4rem auto;
    text-align: center;
}
@media (min-width: 380px) {
    .page-ao .endorsed .images {
        width: 340px;
    }
}
@media (min-width: 440px) {
    .page-ao .endorsed .std-button {
        width: 200px;
    }
}
@media (min-width: 720px) {
    .page-ao .endorsed .wrap {
        position: relative;
        padding: 19vw 0 19vw 62%;
    }
    .page-ao .endorsed .images {
        position: absolute;
        top: 48%;
        left: 0;
        width: 55%;
        margin: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-ao .endorsed .images:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 148%;
    }
    .page-ao .endorsed .images img:nth-of-type(2) {
        left: 0%;
    }
    .page-ao .endorsed .images img:nth-of-type(1) {
        right: 0;
        width: 63%;
    }
    .page-ao .endorsed .std-button {
        margin-left: 0;
    }
}
@media (min-width: 800px) {
    .page-ao .endorsed .wrap {
        padding: 22vw 0 22vw 62%;
    }
}
@media (min-width: 900px) {
    .page-ao .endorsed .inner {
        padding-bottom: 36vw;
        padding-bottom: calc((((100vw - 6rem) * 0.8) * 0.5625) * 0.5);
    }
    .page-ao .endorsed .wrap {
        padding: 22vw 0 22vw 60%;
    }
    .page-ao .endorsed p {
        max-width: 27em;
    }
}
@media (min-width: 950px) {
    .page-ao .endorsed .wrap {
        padding: 25vw 0 25vw 60%;
    }
    .page-ao .endorsed .std-button {
        width: 300px;
    }
}
@media (min-width: 1000px) {
    .page-ao .endorsed .wrap {
        padding: 27vw 0 23vw 61%;
    }
    .page-ao .endorsed .images {
        left: 10%;
        width: 50%;
    }
}
@media (min-width: 1280px) {
    .page-ao .endorsed .inner {
        padding-bottom: 270px;
    }
    .page-ao .endorsed .wrap {
        padding: 28rem 0 20rem 61%;
    }
}
.page-ao .rod {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: #002b6f;
}
@media (min-width: 900px) {
    .page-ao .rod {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-ao .rod .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 28.125vw;
    padding-top: calc(((100vw - 3rem) * 0.5625) * 0.5);
    padding-bottom: 6rem;
}
.page-ao .rod .video-swap {
    position: absolute;
    left: 0;
    top: -28.125vw;
    top: calc(0vw - (((100vw - 3rem) * 0.5625) * 0.5));
    width: 100%;
}
.page-ao .rod .wrap {
    position: relative;
    margin-top: 1.5rem;
}
.page-ao .rod h2 {
    margin: 0 0 0.8em 0;
}
.page-ao .rod p {
    margin: 0;
    font-weight: bold;
}
.page-ao .rod .ball {
    display: block;
    width: 260px;
    margin: 4rem auto 2rem auto;
}
.page-ao .rod .ao-logo {
    display: block;
    width: 150px;
    margin: 0 auto;
}
@media (min-width: 720px) {
    .page-ao .rod .wrap {
        margin-top: 5rem;
        padding-bottom: 2rem;
    }
    .page-ao .rod p {
        font-weight: normal;
        width: 60%;
        max-width: 35.8em;
    }
    .page-ao .rod .ball {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }
    .page-ao .rod .ao-logo {
        margin: 8rem 0 0 0;
        width: 200px;
    }
}
@media (min-width: 900px) {
    .page-ao .rod .inner {
        padding-top: 36vw;
        padding-top: calc((((100vw - 6rem) * 0.8) * 0.5625) * 0.5);
    }
    .page-ao .rod .video-swap {
        left: 10%;
        width: 80%;
        top: -9vw;
        top: calc(0vw - ((((100vw - 6rem) * 0.8) * 0.5625) * 0.5));
    }
    .page-ao .rod .wrap {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .page-ao .rod .ball {
        right: -40px;
    }
}
@media (min-width: 1100px) {
    .page-ao .rod .ball {
        right: 0;
    }
}
@media (min-width: 1280px) {
    .page-ao .rod .inner {
        padding-top: 270px;
    }
    .page-ao .rod .video-swap {
        top: -270px;
    }
}
.page-atp .foreground {
    background-color: #171416;
}
.page-atp .atphero .locations {
    position: relative;
    height: 350px;
    overflow: hidden;
    background-color: #cf0;
}
.page-atp .atphero .bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -1rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0;
}
.page-atp .atphero .bg.vtop {
    background-position-y: 5%;
}
.page-atp .atphero .bg.vbottom {
    background-position-y: 95%;
}
.page-atp .atphero .bg.vcustom-tennis {
    background-position-y: 22%;
}
.page-atp .atphero .bg.vcustom-squash {
    background-position-y: 56%;
}
.page-atp .atphero .bg.hleft {
    background-position-x: 20%;
}
.page-atp .atphero .bg.hright {
    background-position-x: 80%;
}
.page-atp .atphero .bg.nyc {
    background-position: 50% 15%;
}
.page-atp .atphero .bg.madrid {
    background-position: 50% 5%;
}
.page-atp .atphero .bg.shanghai {
    background-position: 50% 25%;
}
.page-atp .atphero .bg.london {
    background-position: 50% 80%;
}
.page-atp .atphero .bg.animate {
    opacity: 1;
    -webkit-animation-name: atp-slide;
    animation-name: atp-slide;
    -webkit-animation-duration: 2400ms;
    animation-duration: 2400ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
@-webkit-keyframes atp-slide {
    0% {
        -webkit-transform: translateX(-1rem) rotateZ(0.0001deg);
        transform: translateX(-1rem) rotateZ(0.0001deg);
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    10% {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        -webkit-transform: translateX(0) rotateZ(0.0001deg);
        transform: translateX(0) rotateZ(0.0001deg);
    }
}
@keyframes atp-slide {
    0% {
        -webkit-transform: translateX(-1rem) rotateZ(0.0001deg);
        transform: translateX(-1rem) rotateZ(0.0001deg);
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    10% {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        -webkit-transform: translateX(0) rotateZ(0.0001deg);
        transform: translateX(0) rotateZ(0.0001deg);
    }
}
@-webkit-keyframes atp-slide-noclip {
    0% {
        -webkit-transform: translateX(-1rem) rotateZ(0.0001deg);
        transform: translateX(-1rem) rotateZ(0.0001deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0) rotateZ(0.0001deg);
        transform: translateX(0) rotateZ(0.0001deg);
        opacity: 1;
    }
}
@keyframes atp-slide-noclip {
    0% {
        -webkit-transform: translateX(-1rem) rotateZ(0.0001deg);
        transform: translateX(-1rem) rotateZ(0.0001deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0) rotateZ(0.0001deg);
        transform: translateX(0) rotateZ(0.0001deg);
        opacity: 1;
    }
}
.page-atp.no-clip-path .atphero .bg.animate {
    -webkit-animation-name: atp-slide-noclip;
    animation-name: atp-slide-noclip;
}
.page-atp .atphero .flip {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: auto;
    opacity: 0;
}
.page-atp .atphero .flip.rome,
.page-atp .atphero .flip.nyc {
    width: 40%;
}
.page-atp .atphero .flip.milan,
.page-atp .atphero .flip.montecarlo {
    width: 50%;
}
.page-atp .atphero .flip.london,
.page-atp .atphero .flip.madrid,
.page-atp .atphero .flip.sydney {
    width: 60%;
}
.page-atp .atphero .flip.shanghai {
    width: 80%;
}
.page-atp .atphero .flip.animate {
    -webkit-animation: atp-flip 2400ms linear both;
    animation: atp-flip 2400ms linear both;
}
@media (min-width: 600px) {
    .page-atp .atphero .flip {
        left: 46.5%;
    }
    .page-atp .atphero .flip.rome,
    .page-atp .atphero .flip.nyc {
        width: 35%;
        max-width: 300px;
    }
    .page-atp .atphero .flip.milan,
    .page-atp .atphero .flip.montecarlo {
        width: 43.75%;
        max-width: 375px;
    }
    .page-atp .atphero .flip.london,
    .page-atp .atphero .flip.madrid,
    .page-atp .atphero .flip.sydney {
        width: 52.5%;
        max-width: 450px;
    }
    .page-atp .atphero .flip.shanghai {
        width: 70%;
        max-width: 600px;
    }
}
@media (min-width: 900px) {
    .page-atp .atphero .flip {
        left: 48%;
    }
}
@-webkit-keyframes atp-flip {
    0% {
        opacity: 0;
        left: 49.5%;
    }
    6.66% {
        opacity: 0;
        left: 49.5%;
    }
    11% {
        opacity: 1;
        left: 50%;
    }
    100% {
        opacity: 1;
        left: 50%;
    }
}
@keyframes atp-flip {
    0% {
        opacity: 0;
        left: 49.5%;
    }
    6.66% {
        opacity: 0;
        left: 49.5%;
    }
    11% {
        opacity: 1;
        left: 50%;
    }
    100% {
        opacity: 1;
        left: 50%;
    }
}
.page-atp .atphero .copy {
    position: relative;
    background-color: #cf0;
    padding: 1.5rem;
    padding-top: 17rem;
    text-align: center;
}
.page-atp .atphero .copy img {
    position: absolute;
    opacity: 0;
    z-index: 3;
    top: -4rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 15.5rem;
    height: auto;
}
.page-atp .atphero .copy img.show {
    -webkit-animation: fadeIn 1400ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 1400ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-atp .atphero .copy h1,
.page-atp .atphero .copy h2 {
    color: #000;
}
.page-atp .atphero .copy h1 {
    font-size: 180%;
    margin: 1.2em auto;
    max-width: 13em;
    letter-spacing: 0.33em;
    line-height: 1.5;
}
.page-atp .atphero .copy h1 span {
    position: relative;
    font-size: 60%;
    top: -0.5em;
}
.page-atp .atphero .copy h2 {
    margin: 0;
    padding: 0;
    font-size: 120%;
    letter-spacing: 0.33em;
}
.page-atp .atphero .copy h2::after {
    display: none;
}
@media (min-width: 500px) {
    .page-atp .atphero .copy h1 {
        font-size: 230%;
    }
    .page-atp .atphero .copy h2 {
        font-size: 160%;
    }
}
@media (min-width: 600px) {
    .page-atp .atphero::after {
        content: "";
        display: table;
        clear: both;
    }
    .page-atp .atphero .locations,
    .page-atp .atphero .copy {
        float: left;
        width: 50%;
    }
    .page-atp .atphero .locations {
        height: auto;
    }
    .page-atp .atphero .locations:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 100%;
    }
    .page-atp .atphero .locations::after {
        position: absolute;
        z-index: 4;
        content: "";
        left: 0;
        top: 50%;
        width: 1.5rem;
        height: 6px;
        background-color: #cf0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-atp .atphero .copy {
        padding: 0;
    }
    .page-atp .atphero .copy:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 100%;
    }
    .page-atp .atphero .copy img {
        left: 0;
        top: 9vw;
        width: 35vw;
    }
    .page-atp .atphero .copy h1 {
        position: absolute;
        top: 50%;
        left: 56%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 150%;
        width: 100%;
        max-width: 12em;
        margin: 0 auto;
    }
    .page-atp .atphero .copy h2 {
        position: absolute;
        width: 100%;
        left: 56%;
        bottom: 2rem;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-size: 90%;
    }
}
@media (min-width: 800px) {
    .page-atp .atphero .copy h1 {
        font-size: 180%;
    }
    .page-atp .atphero .copy h2 {
        font-size: 100%;
    }
}
@media (min-width: 900px) {
    .page-atp .atphero .locations::after {
        width: 3rem;
        height: 10px;
    }
}
@media (min-width: 1000px) {
    .page-atp .atphero .copy h1 {
        font-size: 220%;
    }
    .page-atp .atphero .copy h2 {
        font-size: 120%;
        bottom: 2.5rem;
    }
}
@media (min-width: 1200px) {
    .page-atp .atphero .locations,
    .page-atp .atphero .copy {
        height: 600px;
    }
    .page-atp .atphero .locations:before,
    .page-atp .atphero .copy:before {
        display: none;
    }
    .page-atp .atphero .copy img {
        top: 108px;
        width: 420px;
    }
    .page-atp .atphero .copy h1,
    .page-atp .atphero .copy h2 {
        left: calc(50% + 33px);
    }
    .page-atp .atphero .copy h1 {
        font-size: 240%;
    }
    .page-atp .atphero .copy h2 {
        font-size: 140%;
    }
}
@media (min-width: 1250px) {
    .page-atp .atphero .copy h1 {
        font-size: 290%;
    }
    .page-atp .atphero .copy h2 {
        font-size: 180%;
    }
}
.page-atp .intro {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-atp .intro {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-atp .intro .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-atp .intro p {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    line-height: 2;
    font-size: 90%;
    margin: 0 auto;
    max-width: 41.75em;
}
@media (min-width: 600px) {
    .page-atp .intro {
        padding-top: 9vw;
        padding-bottom: 0;
    }
    .page-atp .intro p {
        padding-top: 1rem;
        padding-bottom: 4rem;
    }
}
@media (min-width: 700px) {
    .page-atp .intro p {
        padding-bottom: 6rem;
        font-size: 110%;
    }
}
@media (min-width: 1200px) {
    .page-atp .intro {
        padding-top: 108px;
    }
}
.page-atp .cgi {
    padding: 3rem 1.5rem;
    padding-top: 0;
}
@media (min-width: 900px) {
    .page-atp .cgi {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-atp .cgi .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-atp .cgi video {
    display: block;
    width: 100%;
    height: auto;
}
.page-atp .cgi .pos {
    display: block;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 3rem auto 0 auto;
    background: transparent;
}
.page-atp .cgi .pos::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
}
.page-atp .cgi .pos:focus {
    outline: none;
}
.page-atp .cgi .pos::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.page-atp .cgi .pos::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.page-atp .cgi .pos::-moz-range-thumb {
    border: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.page-atp .cgi .pos::-ms-thumb {
    border: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.page-atp .cgi .pos::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: #888;
    border-radius: 5px;
    -webkit-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-atp .cgi .pos:hover::-webkit-slider-runnable-track {
    background: #cf0;
    -webkit-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
.page-atp .cgi .pos::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    border-radius: 5px;
    background: #888;
    -moz-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-atp .cgi .pos:hover::-moz-range-track {
    background: #cf0;
    -moz-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
.page-atp .cgi .pos::-ms-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: transparent;
    color: transparent;
}
.page-atp .cgi .pos::-ms-fill-lower {
    background: #888;
    border-radius: 5px;
    -ms-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-atp .cgi .pos:hover::-ms-fill-lower {
    background: #cf0;
    -ms-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
.page-atp .cgi .pos::-ms-fill-upper {
    background: #888;
    border-radius: 5px;
    -ms-transition: background 250ms ease-out;
    transition: background 250ms ease-out;
}
.page-atp .cgi .pos:hover::-ms-fill-upper {
    background: #cf0;
    -ms-transition: background 50ms ease-out;
    transition: background 50ms ease-out;
}
@media (min-width: 720px) {
    .page-atp .cgi .pos {
        width: 85%;
    }
}
@media (min-width: 900px) {
    .page-atp .cgi {
        padding-top: 0;
        padding-bottom: 4.5rem;
    }
    .page-atp .cgi video {
        width: 80%;
        margin: 0 auto;
    }
    .page-atp .cgi .pos {
        width: 67%;
        margin: 4.5rem auto 0 auto;
    }
}
.page-atp .gr {
    position: relative;
    margin-top: 2rem;
}
.page-atp .gr img {
    position: relative;
    z-index: 2;
    width: 29rem;
    height: auto;
    -webkit-transform: translateX(-56%);
    transform: translateX(-56%);
    opacity: 0;
}
.page-atp .gr img.triggered {
    -webkit-animation: fadeIn 1400ms 0ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: fadeIn 1400ms 0ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-atp .gr .bg {
    position: absolute;
    top: 7.5%;
    bottom: 20%;
    left: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("../img/atp-court-small.jpg");
}
.page-atp .gr .bg.vtop {
    background-position-y: 5%;
}
.page-atp .gr .bg.vbottom {
    background-position-y: 95%;
}
.page-atp .gr .bg.vcustom-tennis {
    background-position-y: 22%;
}
.page-atp .gr .bg.vcustom-squash {
    background-position-y: 56%;
}
.page-atp .gr .bg.hleft {
    background-position-x: 20%;
}
.page-atp .gr .bg.hright {
    background-position-x: 80%;
}
.page-atp .gr .bg::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(1, 113, 184, 0.75);
}
.page-atp .gr .copy {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 44%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 5.5rem;
    padding-right: 1.5rem;
}
.page-atp .gr h2 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    font-size: 140%;
    margin: 0;
    padding: 0;
}
.page-atp .gr h2::after {
    display: none;
}
.page-atp .gr p {
    color: #fff;
}
.page-atp .gr .std-button {
    width: 100%;
    margin-top: 1rem;
    text-align: center;
}
@media (min-width: 400px) {
    .page-atp .gr img {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .page-atp .gr .copy {
        padding-left: 6.75rem;
        padding-right: 2rem;
    }
    .page-atp .gr h2 {
        font-size: 180%;
    }
    .page-atp .gr .std-button {
        width: 18em;
    }
}
@media (min-width: 500px) {
    .page-atp .gr img {
        width: 32rem;
    }
    .page-atp .gr .copy {
        padding-left: 9.25rem;
        padding-right: 3.5rem;
    }
    .page-atp .gr h2 {
        font-size: 220%;
    }
    .page-atp .gr p {
        line-height: 1.8;
        max-width: 28em;
    }
}
@media (min-width: 600px) {
    .page-atp .gr {
        margin-top: 3rem;
    }
    .page-atp .gr .copy {
        top: 47.5%;
        padding-left: 12rem;
    }
}
@media (min-width: 720px) {
    .page-atp .gr {
        margin-top: 5rem;
    }
    .page-atp .gr img {
        display: block;
        -webkit-transform: translateX(-30vw);
        transform: translateX(-30vw);
        margin: 0 auto;
        width: 44rem;
    }
    .page-atp .gr .bg {
        top: 15%;
        bottom: 13.5%;
        background-image: url("../img/atp-court-large.jpg");
    }
    .page-atp .gr .bg::after {
        left: 20%;
    }
    .page-atp .gr .copy {
        left: 20%;
        top: 42.5%;
        padding-left: 12rem;
        padding-right: 3rem;
    }
    .page-atp .gr h2 {
        font-size: 250%;
    }
    .page-atp .gr .std-button {
        width: 20em;
    }
}
@media (min-width: 900px) {
    .page-atp .gr img {
        -webkit-transform: none;
        transform: none;
        width: 45rem;
    }
    .page-atp .gr .bg::after {
        left: 50%;
    }
    .page-atp .gr .copy {
        left: 50%;
        top: 42%;
        padding-left: 11rem;
    }
    .page-atp .gr h2 {
        font-size: 220%;
    }
}
@media (min-width: 1200px) {
    .page-atp .gr img {
        width: 44rem;
    }
    .page-atp .gr h2 {
        font-size: 250%;
    }
    .page-atp .gr .copy {
        padding-left: 13rem;
        padding-right: 5rem;
    }
}
.page-atp .techs {
    background-color: transparent !important;
}
.page-atp .techs p {
    line-height: 1.9;
    color: #fff !important;
    margin-top: 0.5em !important;
}
@media (min-width: 550px) {
    .page-atp .techs {
        padding-top: 1rem !important;
    }
    .page-atp .techs p {
        margin-top: 1em !important;
    }
    .page-atp .techs .t:first-child p {
        padding-right: 1em;
    }
}
@media (min-width: 900px) {
    .page-atp .techs {
        padding-top: 3rem !important;
    }
    .page-atp .techs .t {
        width: calc((100% - 6rem) / 12 * 5) !important;
    }
    .page-atp .techs .t:first-child {
        margin-left: calc(((100% - 6rem) / 12) + 1rem);
    }
}
.page-atp .quote {
    padding: 3rem 1.5rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("../img/atp-quote-bg.jpg");
}
@media (min-width: 900px) {
    .page-atp .quote {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-atp .quote.vtop {
    background-position-y: 5%;
}
.page-atp .quote.vbottom {
    background-position-y: 95%;
}
.page-atp .quote.vcustom-tennis {
    background-position-y: 22%;
}
.page-atp .quote.vcustom-squash {
    background-position-y: 56%;
}
.page-atp .quote.hleft {
    background-position-x: 20%;
}
.page-atp .quote.hright {
    background-position-x: 80%;
}
.page-atp .quote .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.page-atp .quote img {
    display: block;
    margin: 1rem auto 2.5rem auto;
    width: 8rem;
    height: auto;
}
.page-atp .quote .content {
    color: #fff;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 29em;
}
.page-atp .quote .attribution {
    color: #cf0;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.5;
    margin-top: 1.25rem;
}
@media (min-width: 400px) {
    .page-atp .quote .content {
        font-size: 120%;
    }
}
@media (min-width: 600px) {
    .page-atp .quote .content {
        font-size: 140%;
    }
    .page-atp .quote .attribution {
        font-size: 110%;
    }
}
@media (min-width: 900px) {
    .page-atp .quote img {
        width: 10rem;
        margin: 2rem auto 3.5rem auto;
    }
    .page-atp .quote .content {
        font-size: 175%;
    }
    .page-atp .quote .attribution {
        font-size: 120%;
        margin-top: 1.7rem;
    }
}
.page-atp .insta {
    background-color: #fff;
    display: none;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 900px) {
    .page-atp .insta {
        padding-top: 5.01rem;
        padding-bottom: 6rem;
    }
}
.page-atp .insta .title {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .page-atp .insta .title {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-atp .insta h2 {
    color: #000;
    padding: 0;
    margin: 0 auto 2em auto;
    max-width: 1200px;
    letter-spacing: 0.15em;
    font-size: 130%;
}
.page-atp .insta h2::after {
    display: none;
}
.page-atp .insta .slider {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    transition-property: left;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.page-atp .insta .slides {
    position: relative;
    white-space: nowrap;
    text-align: center;
}
.page-atp .insta a {
    display: inline-block;
    width: 160px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 4px;
    margin: 0 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-atp .insta a:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.page-atp .insta a.vtop {
    background-position-y: 5%;
}
.page-atp .insta a.vbottom {
    background-position-y: 95%;
}
.page-atp .insta a.vcustom-tennis {
    background-position-y: 22%;
}
.page-atp .insta a.vcustom-squash {
    background-position-y: 56%;
}
.page-atp .insta a.hleft {
    background-position-x: 20%;
}
.page-atp .insta a.hright {
    background-position-x: 80%;
}
@media (min-width: 500px) {
    .page-atp .insta h2 {
        font-size: 160%;
        margin-top: 2em;
        margin-bottom: 2em;
    }
    .page-atp .insta .slider {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
    .page-atp .insta a {
        width: 220px;
        margin: 0 0.75rem;
    }
}
@media (min-width: 720px) {
    .page-atp .insta h2 {
        font-size: 220%;
    }
    .page-atp .insta a {
        width: 300px;
    }
}
@media (min-width: 1100px) {
    .page-atp .insta h2 {
        margin-top: 3em;
    }
    .page-atp .insta .slider {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .page-atp .insta a {
        width: 360px;
        margin: 0 1rem;
    }
}
.page-atp .atp-disc {
    padding: 3rem 1.5rem;
    background-color: #fff;
    padding-bottom: 1.5rem;
}
@media (min-width: 900px) {
    .page-atp .atp-disc {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-atp .atp-disc .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-atp .atp-disc p {
    color: #4e4e4e;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.05em;
}
@media (min-width: 900px) {
    .page-atp .atp-disc {
        padding-bottom: 1.5rem;
    }
    .page-atp .atp-disc p {
        font-size: 110%;
    }
}
@-webkit-keyframes xt-sc-flicker {
    0% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    10% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    10.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    10.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    10.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    11% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    11.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    11.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    11.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    50% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    50.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    51.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    51.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    70% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    70.1% {
        color: #000;
        -webkit-text-stroke-color: transparent;
    }
    70.6% {
        color: #000;
        -webkit-text-stroke-color: transparent;
    }
    70.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    73% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    73.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    73.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    73.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    100% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
}
@keyframes xt-sc-flicker {
    0% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    10% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    10.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    10.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    10.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    11% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    11.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    11.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    11.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    50% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    50.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    51.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    51.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    70% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    70.1% {
        color: #000;
        -webkit-text-stroke-color: transparent;
    }
    70.6% {
        color: #000;
        -webkit-text-stroke-color: transparent;
    }
    70.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    73% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    73.1% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    73.6% {
        color: transparent;
        -webkit-text-stroke-color: transparent;
    }
    73.7% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
    100% {
        color: #000;
        -webkit-text-stroke-color: #fff;
    }
}
@-webkit-keyframes xt-shadow {
    0% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    16% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    16.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    16.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    16.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    50% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    50.1% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    50.6% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    50.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    63% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    63.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    63.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    63.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    100% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
}
@keyframes xt-shadow {
    0% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    3.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    6.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    16% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    16.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    16.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    16.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    50% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    50.1% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    50.6% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    50.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    62.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    63% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    63.1% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    63.6% {
        text-shadow: 0 0 0 rgba(2, 141, 70, 0.9), 0 0 0 rgba(216, 0, 29, 0.9);
    }
    63.7% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
    100% {
        text-shadow: 0.07em 0 0 rgba(2, 141, 70, 0.9), -0.07em 0 0 rgba(216, 0, 29, 0.9);
    }
}
@-webkit-keyframes sc-shadow {
    0% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    16% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    16.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    16.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    16.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    50% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    50.1% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    50.6% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    50.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    63% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    63.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    63.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    63.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    100% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
}
@keyframes sc-shadow {
    0% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    3.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    6.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    16% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    16.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    16.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    16.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    50% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    50.1% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    50.6% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    50.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    62.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    63% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    63.1% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    63.6% {
        text-shadow: 0 0 0 rgba(0, 174, 239, 0.9), 0 0 0 rgba(2, 255, 2, 0.9);
    }
    63.7% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
    100% {
        text-shadow: 0.07em 0 0 rgba(0, 174, 239, 0.9), -0.07em 0 0 rgba(2, 255, 2, 0.9);
    }
}
@-webkit-keyframes xt-sc-glitch-1 {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    2% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    4% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    6% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    8% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    10% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    12% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    14% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    16% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    18% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    21.9% {
        opacity: 1;
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    22%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}
@keyframes xt-sc-glitch-1 {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    2% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    4% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    6% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    8% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    10% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    12% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    14% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    16% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    18% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    21.9% {
        opacity: 1;
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    22%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}
@-webkit-keyframes xt-sc-glitch-2 {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }
    3% {
        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }
    5% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }
    7% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    9% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }
    11% {
        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }
    13% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    15% {
        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }
    17% {
        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }
    19% {
        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }
    20% {
        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }
    21.9% {
        opacity: 1;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    22%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}
@keyframes xt-sc-glitch-2 {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }
    3% {
        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }
    5% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }
    7% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    9% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }
    11% {
        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }
    13% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    15% {
        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }
    17% {
        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }
    19% {
        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }
    20% {
        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }
    21.9% {
        opacity: 1;
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    22%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}
@-webkit-keyframes xt-sc-glitch-3 {
    0%,
    5% {
        opacity: 0.5;
        -webkit-transform: translate3d(10px, 5px, 0);
        transform: translate3d(10px, 5px, 0);
    }
    5.5%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes xt-sc-glitch-3 {
    0%,
    5% {
        opacity: 0.5;
        -webkit-transform: translate3d(10px, 5px, 0);
        transform: translate3d(10px, 5px, 0);
    }
    5.5%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes xt-sc-arrow {
    0% {
        -webkit-transform: translate(-50%, 0) rotateZ(0.0001deg);
        transform: translate(-50%, 0) rotateZ(0.0001deg);
    }
    100% {
        -webkit-transform: translate(-50%, 15%) rotateZ(0.0001deg);
        transform: translate(-50%, 15%) rotateZ(0.0001deg);
    }
}
@keyframes xt-sc-arrow {
    0% {
        -webkit-transform: translate(-50%, 0) rotateZ(0.0001deg);
        transform: translate(-50%, 0) rotateZ(0.0001deg);
    }
    100% {
        -webkit-transform: translate(-50%, 15%) rotateZ(0.0001deg);
        transform: translate(-50%, 15%) rotateZ(0.0001deg);
    }
}
@media (min-width: 1100px) {
    .page-xt p.bigger,
    .page-sc p.bigger {
        font-size: 20px;
    }
}
.page-xt .carousel-arrow,
.page-sc .carousel-arrow {
    background-color: #d51b16;
    transition: background-color 125ms ease-out, opacity 200ms ease-out;
}
.page-xt .carousel-arrow:hover,
.page-sc .carousel-arrow:hover {
    background-color: #000;
}
.page-xt .carousel-arrow:hover svg,
.page-sc .carousel-arrow:hover svg {
    fill: #fff;
}
.page-xt .carousel-arrow.slick-disabled,
.page-sc .carousel-arrow.slick-disabled {
    opacity: 0;
    cursor: default;
}
.page-xt .invisibleonload,
.page-sc .invisibleonload {
    visibility: hidden;
}
.page-xt .hideonload,
.page-sc .hideonload {
    display: none;
}
.page-xt .video-swap-v2,
.page-sc .video-swap-v2 {
    position: relative;
}
.page-xt .video-swap-v2:before,
.page-sc .video-swap-v2:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
}
.page-xt .video-swap-v2 a,
.page-sc .video-swap-v2 a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-xt .video-swap-v2 a svg,
.page-sc .video-swap-v2 a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: visible;
}
.page-xt .video-swap-v2 a svg #red,
.page-xt .video-swap-v2 a svg #green,
.page-sc .video-swap-v2 a svg #red,
.page-sc .video-swap-v2 a svg #green {
    transition: -webkit-transform 150ms ease-out;
    transition: transform 150ms ease-out;
    transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
}
.page-xt .video-swap-v2 a svg #red,
.page-sc .video-swap-v2 a svg #red {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
}
.page-xt .video-swap-v2 a svg #green,
.page-sc .video-swap-v2 a svg #green {
    -webkit-transform: translate(1px);
    transform: translate(1px);
}
@media (min-width: 420px) {
    .page-xt .video-swap-v2 a svg,
    .page-sc .video-swap-v2 a svg {
        width: 4rem;
        height: 4rem;
    }
}
@media (min-width: 720px) {
    .page-xt .video-swap-v2 a svg,
    .page-sc .video-swap-v2 a svg {
        width: 5.5rem;
        height: 5.5rem;
    }
}
@media (min-width: 1100px) {
    .page-xt .video-swap-v2 a svg,
    .page-sc .video-swap-v2 a svg {
        width: 7rem;
        height: 7rem;
    }
}
.page-xt .video-swap-v2 a:hover svg #red,
.page-xt .video-swap-v2 a:hover svg #green,
.page-sc .video-swap-v2 a:hover svg #red,
.page-sc .video-swap-v2 a:hover svg #green {
    transition: -webkit-transform 50ms ease-out;
    transition: transform 50ms ease-out;
    transition: transform 50ms ease-out, -webkit-transform 50ms ease-out;
}
.page-xt .video-swap-v2 a:hover svg #red,
.page-sc .video-swap-v2 a:hover svg #red {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
}
.page-xt .video-swap-v2 a:hover svg #green,
.page-sc .video-swap-v2 a:hover svg #green {
    -webkit-transform: translate(-2px);
    transform: translate(-2px);
}
.page-xt .video-swap-v2 a.hide,
.page-sc .video-swap-v2 a.hide {
    opacity: 0;
}
.page-xt .video-swap-v2 iframe,
.page-xt .video-swap-v2 object,
.page-xt .video-swap-v2 embed,
.page-sc .video-swap-v2 iframe,
.page-sc .video-swap-v2 object,
.page-sc .video-swap-v2 embed {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}
.page-xt .glitch,
.page-sc .glitch {
    position: relative;
    font-size: 220%;
    padding: 0;
    margin: 0 0 0.5em 0;
    color: #000;
    letter-spacing: 0.25em;
    line-height: 1.15;
    -webkit-text-stroke: 0.03em #fff;
    -webkit-animation: xt-shadow 10s infinite linear, xt-sc-flicker 8.3s infinite linear;
    animation: xt-shadow 10s infinite linear, xt-sc-flicker 8.3s infinite linear;
}
.page-xt .glitch.no-outline,
.page-sc .glitch.no-outline {
    -webkit-text-stroke-width: 0;
}
.page-xt .glitch::after,
.page-sc .glitch::after {
    display: none;
}
@media (min-width: 720px) {
    .page-xt .glitch,
    .page-sc .glitch {
        font-size: 275%;
    }
}
@media (min-width: 900px) {
    .page-xt .glitch,
    .page-sc .glitch {
        font-size: 360%;
    }
}
.page-xt .pixelblock,
.page-sc .pixelblock {
    background-size: 100% auto;
    background-size: calc(100% + 1px) auto;
    background-position: 50% 50%;
    background-repeat: repeat-x;
}
.page-xt .pixelblock.ontop,
.page-sc .pixelblock.ontop {
    position: relative;
    z-index: 2;
}
.page-xt .pixelblock.one-row:before,
.page-sc .pixelblock.one-row:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 10%;
}
.page-xt .pixelblock.two-rows:before,
.page-sc .pixelblock.two-rows:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 20%;
}
.page-xt .pixelblock.three-rows:before,
.page-sc .pixelblock.three-rows:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 30%;
}
.page-xt .pixelblock.red-1,
.page-sc .pixelblock.red-1 {
    background-image: url("../img/xt-pixels-red-1.svg");
}
.page-xt .pixelblock.red-2,
.page-sc .pixelblock.red-2 {
    background-image: url("../img/xt-pixels-red-2.svg");
    margin-top: -0.5px;
}
.page-xt .pixelblock.red-3,
.page-sc .pixelblock.red-3 {
    background-image: url("../img/xt-pixels-red-3.svg");
    -webkit-transform: translateY(-0.5px);
    transform: translateY(-0.5px);
}
.page-xt .pixelblock.red-4,
.page-sc .pixelblock.red-4 {
    background-image: url("../img/xt-pixels-red-4.svg");
    -webkit-transform: translateY(0.5px);
    transform: translateY(0.5px);
}
.page-xt .pixelblock.blue-1,
.page-sc .pixelblock.blue-1 {
    background-image: url("../img/xt-pixels-blue-1-alt.svg");
}
.page-xt .pixelblock.sc-blue-1,
.page-sc .pixelblock.sc-blue-1 {
    background-image: url("../img/sc-pixels-blue-1.svg");
}
.page-xt .pixelblock.green-1,
.page-sc .pixelblock.green-1 {
    background-image: url("../img/sc-pixels-green-1.svg");
}
.page-xt .pixelblock.green-2,
.page-sc .pixelblock.green-2 {
    background-image: url("../img/sc-pixels-green-2.svg");
    margin-top: -0.5px;
}
.page-xt .pixelblock.green-3,
.page-sc .pixelblock.green-3 {
    background-image: url("../img/sc-pixels-green-3.svg");
    -webkit-transform: translateY(-0.5px);
    transform: translateY(-0.5px);
}
.page-xt .pixelblock.green-4,
.page-sc .pixelblock.green-4 {
    background-image: url("../img/sc-pixels-green-4.svg");
    -webkit-transform: translateY(0.5px);
    transform: translateY(0.5px);
}
@media (min-width: 1440px) {
    .page-xt .pixelblock,
    .page-sc .pixelblock {
        background-size: auto 100%;
    }
    .page-xt .pixelblock:before,
    .page-sc .pixelblock:before {
        display: none;
    }
    .page-xt .pixelblock.one-row,
    .page-sc .pixelblock.one-row {
        height: 144px;
    }
    .page-xt .pixelblock.two-rows,
    .page-sc .pixelblock.two-rows {
        height: 288px;
    }
    .page-xt .pixelblock.three-rows,
    .page-sc .pixelblock.three-rows {
        height: 432px;
    }
}
.page-sc .carousel-arrow {
    background-color: #67ff67;
}
.page-sc .carousel-arrow svg {
    fill: #000;
}
.page-sc .carousel-arrow:hover {
    background-color: #000;
}
.page-sc .carousel-arrow:hover svg {
    fill: #67ff67;
}
.page-sc .glitch {
    -webkit-animation: sc-shadow 10s infinite linear, xt-sc-flicker 8.3s infinite linear;
    animation: sc-shadow 10s infinite linear, xt-sc-flicker 8.3s infinite linear;
}
.page-sc .video-swap-v2 a svg #red {
    fill: rgba(2, 255, 2, 0.9);
    opacity: 0.5;
}
.page-sc .video-swap-v2 a svg #green {
    fill: rgba(0, 174, 239, 0.9);
    opacity: 0.5;
}
.page-xt .top,
.page-sc .top {
    position: relative;
    z-index: 1;
    margin-bottom: -10vw;
    background-color: #0a1b35;
    background-image: url("../img/xt-pixel-fade-2-taller.svg"), radial-gradient(circle at bottom left, #2a2c3c, #040e14);
    background-repeat: repeat-x, no-repeat;
    background-position: 50% 0%, 50% 50%;
    background-size: 22px auto, 100% 100%;
    overflow: hidden;
}
.page-xt .top .inner,
.page-sc .top .inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    height: 143.5vw;
}
.page-xt .top::after,
.page-sc .top::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 33vw;
    background: linear-gradient(rgba(0, 21, 39, 0), #000911);
}
.page-xt .top .choose,
.page-sc .top .choose {
    position: absolute;
    text-align: center;
    font-size: 70%;
    top: 15vw;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-xt .top .choose p,
.page-xt .top .choose a,
.page-sc .top .choose p,
.page-sc .top .choose a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    text-transform: uppercase;
}
.page-xt .top .choose p,
.page-sc .top .choose p {
    font-size: 140%;
    margin: 0 0 0.75em 0;
}
.page-xt .top .choose a,
.page-sc .top .choose a {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 100%;
    text-decoration: none;
    width: 12em;
    line-height: 3.6;
    transition: color 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-xt .top .choose .switch,
.page-sc .top .choose .switch {
    position: relative;
    display: inline-block;
    background-color: #000;
    border-radius: 2em;
}
.page-xt .top .choose .switch::after,
.page-sc .top .choose .switch::after {
    position: absolute;
    z-index: 0;
    content: "";
    width: 47%;
    height: 74%;
    top: 13%;
    border-radius: 2em;
    transition: left 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-xt .top .choose .switch.p1::after,
.page-sc .top .choose .switch.p1::after {
    background-color: #e53620;
    left: 2%;
}
.page-xt .top .choose .switch.p1 a:last-child,
.page-sc .top .choose .switch.p1 a:last-child {
    color: #fff;
}
.page-xt .top .choose .switch.p2::after,
.page-sc .top .choose .switch.p2::after {
    background-color: #02ff02;
    left: 51%;
}
.page-xt .top .choose .switch.p2 a:last-child,
.page-sc .top .choose .switch.p2 a:last-child {
    color: #000;
}
.page-xt .top .choose .switch.h1::after,
.page-sc .top .choose .switch.h1::after {
    background-color: #e53620;
    left: 2%;
}
.page-xt .top .choose .switch.h1 a:last-child,
.page-sc .top .choose .switch.h1 a:last-child {
    color: #fff;
}
.page-xt .top .choose .switch.h2::after,
.page-sc .top .choose .switch.h2::after {
    background-color: #02ff02;
    left: 51%;
}
.page-xt .top .choose .switch.h2 a:last-child,
.page-sc .top .choose .switch.h2 a:last-child {
    color: #000;
}
.page-xt .top .title,
.page-sc .top .title {
    position: absolute;
    top: 32.5vw;
    left: 52%;
    width: 50vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.page-xt .top .title img,
.page-sc .top .title img {
    display: block;
    width: 100%;
    height: auto;
}
.page-xt .top .title h1,
.page-sc .top .title h1 {
    text-align: center;
    color: #e53620;
    margin: 1.25em auto 0 auto;
    max-width: 14em;
    line-height: 1.75;
    font-size: 3.5vw;
}
.page-xt .top .player,
.page-sc .top .player {
    position: absolute;
    bottom: 0;
    height: 80vw;
    width: auto;
}
.page-xt .top .player img,
.page-sc .top .player img {
    display: block;
    width: auto;
    height: 100%;
}
.page-xt .top .player.ali,
.page-xt .top .player.diego,
.page-sc .top .player.ali,
.page-sc .top .player.diego {
    left: 0;
    -webkit-transform: translateX(-12vw);
    transform: translateX(-12vw);
}
.page-xt .top .player.nour,
.page-xt .top .player.declan,
.page-sc .top .player.nour,
.page-sc .top .player.declan {
    right: 0;
    -webkit-transform: translateX(12vw);
    transform: translateX(12vw);
}
.page-xt .top .l1,
.page-sc .top .l1 {
    position: relative;
    z-index: 1;
}
.page-xt .top .l2,
.page-xt .top .l3,
.page-xt .top .l4,
.page-sc .top .l2,
.page-sc .top .l3,
.page-sc .top .l4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.page-xt .top .l2,
.page-sc .top .l2 {
    z-index: 2;
    -webkit-filter: hue-rotate(230deg) saturate(500%);
    filter: hue-rotate(230deg) saturate(500%);
    -webkit-animation-name: xt-sc-glitch-1;
    animation-name: xt-sc-glitch-1;
}
.page-xt .top .l3,
.page-sc .top .l3 {
    z-index: 3;
    -webkit-filter: hue-rotate(160deg) saturate(600%);
    filter: hue-rotate(160deg) saturate(600%);
    -webkit-animation-name: xt-sc-glitch-2;
    animation-name: xt-sc-glitch-2;
}
.page-xt .top .l4,
.page-sc .top .l4 {
    z-index: 4;
    -webkit-filter: hue-rotate(10deg) saturate(700%);
    filter: hue-rotate(10deg) saturate(700%);
    -webkit-animation-name: xt-sc-glitch-3;
    animation-name: xt-sc-glitch-3;
    mix-blend-mode: overlay;
}
.page-xt .top .nour img,
.page-xt .top .declan img,
.page-sc .top .nour img,
.page-sc .top .declan img {
    -webkit-animation-duration: 2.128s;
    animation-duration: 2.128s;
}
.page-xt .top .playerlabel,
.page-sc .top .playerlabel {
    position: absolute;
    top: 55vw;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-size: 80%;
}
.page-xt .top .playerlabel .p,
.page-sc .top .playerlabel .p {
    font-size: 70%;
    margin-top: 1em;
}
.page-xt .top .playerlabel .n,
.page-xt .top .playerlabel .p,
.page-sc .top .playerlabel .n,
.page-sc .top .playerlabel .p {
    display: none;
}
.page-xt .top .playerlabel::after,
.page-sc .top .playerlabel::after {
    content: "";
    position: absolute;
    top: 120%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2em;
    height: 2em;
    background-size: contain;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    -webkit-animation: xt-sc-arrow 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite alternate;
    animation: xt-sc-arrow 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite alternate;
}
.page-xt .top .playerlabel.ali,
.page-sc .top .playerlabel.ali {
    left: 17vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.page-xt .top .playerlabel.ali .p,
.page-xt .top .playerlabel.ali .n,
.page-sc .top .playerlabel.ali .p,
.page-sc .top .playerlabel.ali .n {
    -webkit-animation: slideInRight 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: slideInRight 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-xt .top .playerlabel.ali .p,
.page-sc .top .playerlabel.ali .p {
    color: #e53620;
}
.page-xt .top .playerlabel.ali::after,
.page-sc .top .playerlabel.ali::after {
    background-image: url("../img/xt-triangle-red.png");
}
.page-xt .top .playerlabel.nour,
.page-sc .top .playerlabel.nour {
    right: 13vw;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}
.page-xt .top .playerlabel.nour .p,
.page-xt .top .playerlabel.nour .n,
.page-sc .top .playerlabel.nour .p,
.page-sc .top .playerlabel.nour .n {
    -webkit-animation: slideInLeft 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: slideInLeft 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-xt .top .playerlabel.nour .p,
.page-sc .top .playerlabel.nour .p {
    color: #cf0;
}
.page-xt .top .playerlabel.nour::after,
.page-sc .top .playerlabel.nour::after {
    background-image: url("../img/xt-triangle-green.png");
}
.page-xt .top .playerlabel.diego,
.page-sc .top .playerlabel.diego {
    left: 14.5vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.page-xt .top .playerlabel.diego .p,
.page-xt .top .playerlabel.diego .n,
.page-sc .top .playerlabel.diego .p,
.page-sc .top .playerlabel.diego .n {
    -webkit-animation: slideInRight 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: slideInRight 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-xt .top .playerlabel.diego .p,
.page-sc .top .playerlabel.diego .p {
    color: #e8ff00;
}
.page-xt .top .playerlabel.diego::after,
.page-sc .top .playerlabel.diego::after {
    background-image: url("../img/sc-triangle-yellow.png");
}
.page-xt .top .playerlabel.declan,
.page-sc .top .playerlabel.declan {
    right: 16.5vw;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}
.page-xt .top .playerlabel.declan .p,
.page-xt .top .playerlabel.declan .n,
.page-sc .top .playerlabel.declan .p,
.page-sc .top .playerlabel.declan .n {
    -webkit-animation: slideInLeft 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
    animation: slideInLeft 600ms 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.page-xt .top .playerlabel.declan .p,
.page-sc .top .playerlabel.declan .p {
    color: #02ff02;
}
.page-xt .top .playerlabel.declan::after,
.page-sc .top .playerlabel.declan::after {
    background-image: url("../img/sc-triangle-green.png");
}
.page-xt .top .explore,
.page-sc .top .explore {
    display: none;
    position: absolute;
    z-index: 2;
    bottom: 12vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
@media (min-width: 450px) {
    .page-xt .top .inner,
    .page-sc .top .inner {
        height: 138.5vw;
    }
    .page-xt .top .choose,
    .page-sc .top .choose {
        font-size: 80%;
        top: 12.5vw;
    }
    .page-xt .top .title,
    .page-sc .top .title {
        top: 27.5vw;
    }
    .page-xt .top .playerlabel,
    .page-sc .top .playerlabel {
        top: 50vw;
    }
}
@media (min-width: 550px) {
    .page-xt .top .inner,
    .page-sc .top .inner {
        height: 136vw;
    }
    .page-xt .top .choose,
    .page-sc .top .choose {
        font-size: 90%;
        top: 11vw;
    }
    .page-xt .top .title,
    .page-sc .top .title {
        top: 25vw;
    }
    .page-xt .top .playerlabel,
    .page-sc .top .playerlabel {
        top: 47.5vw;
    }
}
@media (min-width: 650px) {
    .page-xt .top .inner,
    .page-sc .top .inner {
        height: 780px;
    }
    .page-xt .top::after,
    .page-sc .top::after {
        height: 200px;
    }
    .page-xt .top .choose,
    .page-sc .top .choose {
        top: 35px;
        -webkit-transform: none;
        transform: none;
    }
    .page-xt .top .title,
    .page-sc .top .title {
        top: 170px;
        left: 50%;
        width: 250px;
    }
    .page-xt .top .title h1,
    .page-sc .top .title h1 {
        font-size: 17px;
    }
    .page-xt .top .player,
    .page-sc .top .player {
        height: 480px;
    }
    .page-xt .top .player.ali,
    .page-sc .top .player.ali {
        -webkit-transform: translateX(-16%);
        transform: translateX(-16%);
    }
    .page-xt .top .player.nour,
    .page-sc .top .player.nour {
        -webkit-transform: translateX(7%);
        transform: translateX(7%);
    }
    .page-xt .top .player.diego,
    .page-sc .top .player.diego {
        -webkit-transform: translateX(-13%);
        transform: translateX(-13%);
    }
    .page-xt .top .player.declan,
    .page-sc .top .player.declan {
        -webkit-transform: translateX(14%);
        transform: translateX(14%);
    }
    .page-xt .top .playerlabel,
    .page-sc .top .playerlabel {
        font-size: 120%;
        top: 260px;
    }
    .page-xt .top .playerlabel.ali,
    .page-sc .top .playerlabel.ali {
        left: 122px;
    }
    .page-xt .top .playerlabel.nour,
    .page-sc .top .playerlabel.nour {
        right: 130px;
    }
    .page-xt .top .playerlabel.diego,
    .page-sc .top .playerlabel.diego {
        left: 115px;
    }
    .page-xt .top .playerlabel.declan,
    .page-sc .top .playerlabel.declan {
        right: 123px;
    }
}
@media (min-width: 720px) {
    .page-xt .top,
    .page-sc .top {
        background-size: 26px auto, 100% 100%;
    }
}
@media (min-width: 760px) {
    .page-xt .top .choose,
    .page-sc .top .choose {
        top: 40px;
    }
    .page-xt .top .title,
    .page-sc .top .title {
        top: 180px;
        width: 280px;
    }
    .page-xt .top .title h1,
    .page-sc .top .title h1 {
        font-size: 18px;
    }
}
@media (min-width: 900px) {
    .page-xt .top,
    .page-sc .top {
        background-size: 36px auto, 100% 100%;
    }
    .page-xt .top .inner,
    .page-sc .top .inner {
        height: 900px;
    }
    .page-xt .top::after,
    .page-sc .top::after {
        height: 248px;
    }
    .page-xt .top .choose,
    .page-sc .top .choose {
        top: 50px;
        font-size: 100%;
    }
    .page-xt .top .title,
    .page-sc .top .title {
        top: 290px;
        width: 30vw;
    }
    .page-xt .top .title h1,
    .page-sc .top .title h1 {
        max-width: none;
        font-size: 1.5vw;
        margin: 2em 0 0 0;
        line-height: 1.5;
        text-align: left;
    }
    .page-xt .top .title span,
    .page-sc .top .title span {
        display: inline-block;
        color: #fff;
        border: solid 0.1em #fff;
        border-radius: 2em;
        padding: 0 0.6em;
    }
    .page-xt .top .player,
    .page-sc .top .player {
        height: 600px;
    }
    .page-xt .top .playerlabel,
    .page-sc .top .playerlabel {
        font-size: 150%;
        top: 190px;
    }
    .page-xt .top .playerlabel .n,
    .page-xt .top .playerlabel .p,
    .page-sc .top .playerlabel .n,
    .page-sc .top .playerlabel .p {
        display: block;
    }
    .page-xt .top .playerlabel.ali,
    .page-sc .top .playerlabel.ali {
        left: 150px;
    }
    .page-xt .top .playerlabel.nour,
    .page-sc .top .playerlabel.nour {
        right: 160px;
    }
    .page-xt .top .playerlabel.diego,
    .page-sc .top .playerlabel.diego {
        left: 143px;
    }
    .page-xt .top .playerlabel.declan,
    .page-sc .top .playerlabel.declan {
        right: 154px;
    }
    .page-xt .top .explore,
    .page-sc .top .explore {
        display: block;
    }
}
@media (min-width: 1200px) {
    .page-xt .top .inner,
    .page-sc .top .inner {
        height: 1040px;
    }
    .page-xt .top::after,
    .page-sc .top::after {
        height: 290px;
    }
    .page-xt .top .choose,
    .page-sc .top .choose {
        font-size: 120%;
        top: 60px;
    }
    .page-xt .top .title,
    .page-sc .top .title {
        top: 470px;
        width: 32vw;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .page-xt .top .title h1,
    .page-sc .top .title h1 {
        font-size: 1.625vw;
    }
    .page-xt .top .player,
    .page-sc .top .player {
        height: 700px;
    }
    .page-xt .top .playerlabel,
    .page-sc .top .playerlabel {
        font-size: 200%;
        top: 195px;
    }
    .page-xt .top .playerlabel .n,
    .page-xt .top .playerlabel .p,
    .page-sc .top .playerlabel .n,
    .page-sc .top .playerlabel .p {
        display: block;
    }
    .page-xt .top .playerlabel.ali,
    .page-sc .top .playerlabel.ali {
        left: 175px;
    }
    .page-xt .top .playerlabel.nour,
    .page-sc .top .playerlabel.nour {
        right: 188px;
    }
    .page-xt .top .playerlabel.diego,
    .page-sc .top .playerlabel.diego {
        left: 169px;
    }
    .page-xt .top .playerlabel.declan,
    .page-sc .top .playerlabel.declan {
        right: 179px;
    }
}
@media (min-width: 1440px) {
    .page-xt .top,
    .page-sc .top {
        margin-bottom: -144px;
    }
    .page-xt .top .title,
    .page-sc .top .title {
        width: 500px;
    }
    .page-xt .top .title h1,
    .page-sc .top .title h1 {
        font-size: 25px;
    }
    .page-xt .top .explore,
    .page-sc .top .explore {
        bottom: 175px;
    }
}
.page-sc .top {
    background-image: url("../img/sc-pixel-fade-2-taller.png"), radial-gradient(circle at bottom left, #11111c, #012d5d);
}
.page-sc .top .title {
    left: 50%;
}
.page-sc .top .title h1 {
    color: #02ff02;
    font-size: 3vw;
}
.page-sc .top .l2 {
    -webkit-filter: hue-rotate(230deg) saturate(500%);
    filter: hue-rotate(230deg) saturate(500%);
}
.page-sc .top .l3 {
    -webkit-filter: hue-rotate(350deg) saturate(200%) brightness(150%);
    filter: hue-rotate(350deg) saturate(200%) brightness(150%);
}
@media (min-width: 900px) {
    .page-sc .top .title h1 {
        font-size: 1.4vw;
    }
}
@media (min-width: 1200px) {
    .page-sc .top .title h1 {
        font-size: 1.525vw;
    }
}
@media (min-width: 1400px) {
    .page-sc .top .title h1 {
        font-size: 21px;
    }
}
@media (min-width: 1440px) {
    .page-sc .top .title h1 {
        font-size: 23.5px;
    }
}
.xtvid,
.scvid {
    position: relative;
    z-index: 3;
    background-color: #e53620;
    text-align: center;
    padding-bottom: 3rem;
}
.xtvid::after,
.xtvid .video-swap-v2::after,
.scvid::after,
.scvid .video-swap-v2::after {
    content: "";
    position: absolute;
    background-color: #000911;
    width: 10vw;
    height: 10vw;
}
.xtvid::after,
.scvid::after {
    left: 0;
    bottom: 0;
}
.xtvid .video-swap-v2::after,
.scvid .video-swap-v2::after {
    top: 100%;
    left: 100%;
}
.xtvid .video-swap-v2 a,
.scvid .video-swap-v2 a {
    background-color: #000911;
}
.xtvid .video-swap-v2 a svg,
.scvid .video-swap-v2 a svg {
    width: 4rem;
    height: 4rem;
}
.xtvid p,
.scvid p {
    color: #fff;
    padding: 0 2em;
    margin: 3rem auto;
    max-width: 38em;
    line-height: 1.6;
}
.xtvid a.scroll-to,
.scvid a.scroll-to {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}
.xtvid a.scroll-to img,
.scvid a.scroll-to img {
    display: block;
    width: 12em;
    height: 1.6em;
    margin: 1em auto;
}
.xtvid a.scroll-to svg,
.scvid a.scroll-to svg {
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    fill: #fff;
}
@media (min-width: 600px) {
    .xtvid .video-swap-v2 a svg,
    .scvid .video-swap-v2 a svg {
        width: 6.5rem;
        height: 6.5rem;
    }
}
@media (min-width: 720px) {
    .xtvid,
    .scvid {
        background-image: url("../img/xt-pixels-red-5.svg");
        background-position: 50% 0%;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    .xtvid .video-swap-v2,
    .scvid .video-swap-v2 {
        margin-left: 10vw;
        margin-right: 10vw;
    }
}
@media (min-width: 900px) {
    .xtvid p,
    .scvid p {
        margin-bottom: 4.5rem;
    }
    .xtvid a.scroll-to,
    .scvid a.scroll-to {
        font-size: 110%;
    }
    .xtvid a.scroll-to img,
    .scvid a.scroll-to img {
        width: 20em;
        height: 2.63em;
        margin: 2em auto;
    }
}
@media (min-width: 1100px) {
    .xtvid .video-swap-v2 a svg,
    .scvid .video-swap-v2 a svg {
        width: 10.5rem;
        height: 10.5rem;
    }
}
@media (min-width: 1440px) {
    .xtvid,
    .scvid {
        background-size: 1440px auto;
    }
    .xtvid .video-swap-v2,
    .scvid .video-swap-v2 {
        width: 1152px;
        margin: 0 auto;
    }
    .xtvid::after,
    .xtvid .video-swap-v2::after,
    .scvid::after,
    .scvid .video-swap-v2::after {
        width: 144px;
        height: 144px;
    }
    .xtvid::after,
    .scvid::after {
        left: calc((100vw - 1440px) / 2);
    }
}
.scvid {
    background-color: #02ff02;
}
.scvid p {
    color: #000;
}
.scvid a.scroll-to {
    color: #000;
}
.scvid a.scroll-to img {
    height: auto;
}
.scvid a.scroll-to svg {
    fill: #000;
}
@media (min-width: 720px) {
    .scvid {
        background-image: url("../img/sc-pixels-green-5.svg");
    }
}
.page-xt .sr,
.page-sc .sr {
    position: relative;
    z-index: 1;
    background-color: #1c212e;
    background-image: url("../img/xt-pixel-fade-1.svg"), radial-gradient(circle at bottom right, #303345, #06141c);
    background-repeat: repeat-x, no-repeat;
    background-position: 50% 0%, 50% 50%;
    background-size: 22px auto, 100% 100%;
    margin-top: -20vw;
}
.page-xt .sr .pad,
.page-sc .sr .pad {
    padding: 3rem 1.5rem;
    padding-bottom: 0.5rem;
}
@media (min-width: 900px) {
    .page-xt .sr .pad,
    .page-sc .sr .pad {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-xt .sr .inner,
.page-sc .sr .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vw;
}
.page-xt .sr::after,
.page-sc .sr::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4vw;
    background-color: #e53620;
}
.page-xt .sr .carousel,
.page-sc .sr .carousel {
    position: relative;
    z-index: 1;
}
.page-xt .sr .slide,
.page-sc .sr .slide {
    position: relative;
    outline: none;
}
.page-xt .sr .box,
.page-sc .sr .box {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.75);
    transform: translate(-50%, -50%) scale(0.75);
    opacity: 0.5;
    width: 100%;
    max-width: 407px;
    margin: 0 auto;
    background-color: #000;
    overflow: visible;
    transition: all 200ms ease;
}
.page-xt .sr .box:before,
.page-sc .sr .box:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.page-xt .sr .box-inner,
.page-sc .sr .box-inner {
    position: absolute;
    top: 6.5%;
    left: 6.5%;
    bottom: 6.5%;
    right: 6.5%;
    background-color: #11111c;
    background-position: 7% 50%;
    background-size: auto 86%;
    background-repeat: no-repeat;
}
.page-xt .sr img.racket,
.page-sc .sr img.racket {
    display: block;
    position: relative;
    z-index: 2;
    width: 53%;
    max-width: 216px;
    height: auto;
    margin: 0 auto;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.5;
    transition: all 200ms ease;
}
.page-xt .sr .box-inner a,
.page-sc .sr .box-inner a {
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 22%;
    height: 22%;
    background-image: url("../img/xt_plus.png");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    outline: none;
    -webkit-transform: rotateZ(0.001deg);
    transform: rotateZ(0.001deg);
}
.page-xt .sr .box-inner a:hover,
.page-sc .sr .box-inner a:hover {
    -webkit-animation: quarter-spin 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: quarter-spin 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-xt .sr .slick-current .box,
.page-sc .sr .slick-current .box {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.page-xt .sr .slick-current img.racket,
.page-sc .sr .slick-current img.racket {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
@media (min-width: 450px) {
    .page-xt .sr .box-inner a,
    .page-sc .sr .box-inner a {
        width: 18%;
        height: 18%;
    }
}
@media (min-width: 720px) {
    .page-xt .sr,
    .page-sc .sr {
        background-size: 26px auto, 100% 100%;
    }
    .page-xt .sr .box-inner a,
    .page-sc .sr .box-inner a {
        width: 13%;
        height: 13%;
    }
}
@media (min-width: 800px) {
    .page-xt .sr::after,
    .page-sc .sr::after {
        height: 3vw;
    }
}
@media (min-width: 900px) {
    .page-xt .sr,
    .page-sc .sr {
        background-size: 36px auto, 100% 100%;
    }
    .page-xt .sr .pad,
    .page-sc .sr .pad {
        padding-bottom: 0.5rem;
    }
}
@media (min-width: 1100px) {
    .page-xt .sr::after,
    .page-sc .sr::after {
        height: 28px;
    }
}
@media (min-width: 1440px) {
    .page-xt .sr,
    .page-sc .sr {
        margin-top: -288px;
    }
    .page-xt .sr .inner,
    .page-sc .sr .inner {
        margin-top: 144px;
    }
}
.page-xt .ranges,
.page-sc .ranges {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    clear: both;
    width: 100%;
    margin: 0;
}
.page-xt .ranges::after,
.page-sc .ranges::after {
    content: "";
    display: table;
    clear: both;
}
.page-xt .ranges div,
.page-sc .ranges div {
    position: relative;
    display: inline-block;
    width: 45%;
}
.page-xt .ranges div:first-child,
.page-sc .ranges div:first-child {
    float: left;
}
.page-xt .ranges div:last-child,
.page-sc .ranges div:last-child {
    float: right;
}
.page-xt .ranges .key,
.page-sc .ranges .key {
    display: block;
    font-size: 60%;
    color: #fff;
}
.page-xt .ranges .val,
.page-sc .ranges .val {
    display: block;
    font-size: 120%;
}
.page-xt .ranges .bar,
.page-sc .ranges .bar {
    position: absolute;
    bottom: 0.5em;
    left: 3em;
    right: 0;
    height: 4px;
}
.page-xt .sr-details,
.page-sc .sr-details {
    position: relative;
    z-index: 0;
    padding: 3rem 1.5rem;
    background-color: #e53620;
}
@media (min-width: 900px) {
    .page-xt .sr-details,
    .page-sc .sr-details {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-xt .sr-details .inner,
.page-sc .sr-details .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -4vw;
}
.page-xt .sr-details .racket,
.page-sc .sr-details .racket {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
}
.page-xt .sr-details .racket::after,
.page-sc .sr-details .racket::after {
    content: "";
    display: table;
    clear: both;
}
.page-xt .sr-details h3,
.page-sc .sr-details h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 140%;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 200ms 50ms ease-out;
}
.page-xt .sr-details h3 span,
.page-sc .sr-details h3 span {
    display: block;
    color: #fff;
}
.page-xt .sr-details p,
.page-sc .sr-details p {
    color: #fff;
    opacity: 0;
    transition: opacity 200ms 0ms ease-out;
}
.page-xt .sr-details .ranges,
.page-sc .sr-details .ranges {
    margin: 1rem 0 1.5rem 0;
    opacity: 0;
}
.page-xt .sr-details a,
.page-sc .sr-details a {
    width: 100%;
    text-align: center;
    opacity: 0;
}
.page-xt .sr-details .ranges,
.page-xt .sr-details a,
.page-sc .sr-details .ranges,
.page-sc .sr-details a {
    transition: opacity 1ms 200ms linear;
}
.page-xt .sr-details .racket.show,
.page-sc .sr-details .racket.show {
    z-index: 2;
}
.page-xt .sr-details .racket.show h3,
.page-xt .sr-details .racket.show p,
.page-xt .sr-details .racket.show .ranges,
.page-xt .sr-details .racket.show a,
.page-sc .sr-details .racket.show h3,
.page-sc .sr-details .racket.show p,
.page-sc .sr-details .racket.show .ranges,
.page-sc .sr-details .racket.show a {
    opacity: 1;
}
.page-xt .sr-details .racket.show h3,
.page-sc .sr-details .racket.show h3 {
    transition: opacity 200ms 250ms ease-in;
}
.page-xt .sr-details .racket.show p,
.page-sc .sr-details .racket.show p {
    transition: opacity 200ms 300ms ease-in;
}
@media (min-width: 600px) {
    .page-xt .sr-details .lhs,
    .page-sc .sr-details .lhs {
        float: left;
        width: 55%;
    }
    .page-xt .sr-details .rhs,
    .page-sc .sr-details .rhs {
        float: right;
        width: 35%;
    }
    .page-xt .sr-details .ranges,
    .page-sc .sr-details .ranges {
        font-size: 130%;
        margin: 0 0 1.5em 0;
    }
    .page-xt .sr-details .ranges div,
    .page-sc .sr-details .ranges div {
        display: block;
        width: 100%;
        float: none;
    }
    .page-xt .sr-details .ranges div:first-child,
    .page-sc .sr-details .ranges div:first-child {
        margin-bottom: 1em;
    }
    .page-xt .sr-details .ranges .bar,
    .page-sc .sr-details .ranges .bar {
        height: 6px;
    }
    .page-xt .sr-details a,
    .page-sc .sr-details a {
        width: auto;
    }
    .page-xt .sr-details p,
    .page-sc .sr-details p {
        max-width: 30em;
    }
}
@media (min-width: 720px) {
    .page-xt .sr-details h3,
    .page-sc .sr-details h3 {
        font-size: 180%;
    }
    .page-xt .sr-details .ranges,
    .page-sc .sr-details .ranges {
        font-size: 150%;
    }
    .page-xt .sr-details .rhs,
    .page-sc .sr-details .rhs {
        width: 30%;
        max-width: 250px;
    }
}
@media (min-width: 800px) {
    .page-xt .sr-details .inner,
    .page-sc .sr-details .inner {
        margin-top: -3vw;
    }
}
@media (min-width: 900px) {
    .page-xt .sr-details,
    .page-sc .sr-details {
        padding: 4.5rem 3rem;
    }
    .page-xt .sr-details h3,
    .page-sc .sr-details h3 {
        font-size: 210%;
    }
    .page-xt .sr-details a,
    .page-sc .sr-details a {
        font-size: 100%;
    }
}
@media (min-width: 1100px) {
    .page-xt .sr-details .inner,
    .page-sc .sr-details .inner {
        margin-top: -28px;
    }
    .page-xt .sr-details h3,
    .page-sc .sr-details h3 {
        font-size: 240%;
    }
    .page-xt .sr-details p,
    .page-sc .sr-details p {
        font-size: 18px;
    }
}
.page-sc .sr {
    background-color: #0a1b35;
    background-image: url("../img/sc-pixel-fade-1.png"), radial-gradient(circle at top left, #11111c, #012d5d);
    background-position: 50% -46px, 50% 50%;
}
.page-sc .sr::after {
    background-color: #02ff02;
}
.page-sc .sr .box {
    background-color: #000811;
}
.page-sc .sr .box-inner {
    background-color: #0f1626;
}
.page-sc .sr .box-inner a {
    background-image: url("../img/sc_plus.png");
}
.page-sc .ranges .key {
    color: #000;
}
.page-sc .ranges .val {
    color: #012d5d;
}
.page-sc .ranges .bar {
    position: absolute;
    bottom: 0.5em;
    left: 3em;
    right: 0;
    height: 4px;
}
.page-sc .sr-details {
    background-color: #02ff02;
}
.page-sc .sr-details h3 {
    color: #012d5d;
}
.page-sc .sr-details h3 span {
    color: #000;
}
.page-sc .sr-details p {
    color: #000;
}
.page-sc .sr-details p strong {
    display: block;
}
.page-sc .sr-details .std-button {
    background-color: #012d5d;
}
@media (min-width: 720px) {
    .page-sc .sr {
        background-position: 50% -30px, 50% 50%;
    }
}
@media (min-width: 900px) {
    .page-sc .sr {
        background-position: 50% -58px, 50% 50%;
    }
}
.page-xt .cp,
.page-sc .cp {
    position: relative;
    z-index: 1;
    padding: 3rem 1.5rem;
    background-color: #1c212e;
    transition: background-color 75ms ease-out;
    background-image: url("../img/xt-pixel-fade-1.svg"), linear-gradient(#000911, rgba(0, 9, 17, 0));
    background-repeat: repeat-x, no-repeat;
    background-position: 50% 0%, 50% 0%;
    background-size: 22px auto, 100% 250px;
    margin-bottom: -20vw;
    padding-bottom: 20vw;
}
@media (min-width: 900px) {
    .page-xt .cp,
    .page-sc .cp {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-xt .cp .inner,
.page-sc .cp .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-xt .cp .nav,
.page-sc .cp .nav {
    font-size: 90%;
    margin: 4em 0 2em 0;
    text-align: center;
}
.page-xt .cp .nav .align,
.page-sc .cp .nav .align {
    position: relative;
    display: inline-block;
    padding-bottom: 2.25rem;
}
.page-xt .cp .nav a,
.page-sc .cp .nav a {
    display: inline-block;
    margin: 0 0.75em;
    width: 6em;
    height: 6em;
    border-radius: 50%;
    border: solid 3px #3a3e49;
    background-color: #000;
    transition: border-color 100ms ease-out;
}
.page-xt .cp .nav a img,
.page-sc .cp .nav a img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.6;
    transition: opacity 100ms ease-out;
}
.page-xt .cp .nav a:hover img,
.page-sc .cp .nav a:hover img {
    opacity: 1;
}
.page-xt .cp .nav .align::after,
.page-sc .cp .nav .align::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1rem;
    background-image: url("../img/xt-pointer-horizontal.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: background-position 300ms ease;
}
.page-xt .cp .nav.active-1 a:nth-child(1),
.page-sc .cp .nav.active-1 a:nth-child(1) {
    border-color: #e53620;
}
.page-xt .cp .nav.active-1 a:nth-child(1) img,
.page-sc .cp .nav.active-1 a:nth-child(1) img {
    opacity: 1;
}
.page-xt .cp .nav.active-1 .align::after,
.page-sc .cp .nav.active-1 .align::after {
    background-position-x: 60%;
}
.page-xt .cp .nav.active-2 a:nth-child(2),
.page-sc .cp .nav.active-2 a:nth-child(2) {
    border-color: #cf0;
}
.page-xt .cp .nav.active-2 a:nth-child(2) img,
.page-sc .cp .nav.active-2 a:nth-child(2) img {
    opacity: 1;
}
.page-xt .cp .nav.active-3 a:nth-child(3),
.page-sc .cp .nav.active-3 a:nth-child(3) {
    border-color: #f75101;
}
.page-xt .cp .nav.active-3 a:nth-child(3) img,
.page-sc .cp .nav.active-3 a:nth-child(3) img {
    opacity: 1;
}
.page-xt .cp .nav.active-3 .align::after,
.page-sc .cp .nav.active-3 .align::after {
    background-position-x: 40%;
}
.page-xt .cp .vidholder,
.page-sc .cp .vidholder {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 520px;
}
.page-xt .cp .vidholder:before,
.page-sc .cp .vidholder:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.page-xt .cp .vidholder::after,
.page-sc .cp .vidholder::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    background-image: url("../img/xt-loader.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: spin-center 1s linear infinite;
    animation: spin-center 1s linear infinite;
}
.page-xt .cp canvas,
.page-xt .cp video,
.page-sc .cp canvas,
.page-sc .cp video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.page-xt .cp video,
.page-sc .cp video {
    z-index: 1;
    height: auto;
}
.page-xt .cp canvas,
.page-sc .cp canvas {
    z-index: 2;
    height: 100%;
}
.page-xt .cp .stats,
.page-sc .cp .stats {
    font-size: 120%;
    margin: 2.5rem 0 6rem 0;
}
.page-xt .cp .stats p,
.page-xt .cp .stats li,
.page-sc .cp .stats p,
.page-sc .cp .stats li {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    font-size: inherit;
}
.page-xt .cp .stats ul,
.page-sc .cp .stats ul {
    list-style: none;
    margin: 2em 0;
}
.page-xt .cp .stats li,
.page-sc .cp .stats li {
    padding: 0;
    font-size: 80%;
    margin: 0.75em 0;
    transition: color 100ms ease-out;
}
.page-xt .cp .stats li span,
.page-sc .cp .stats li span {
    display: inline-block;
    margin-left: 0.2em;
    color: #fff;
}
.page-xt .cp .stats p span,
.page-sc .cp .stats p span {
    display: inline-block;
}
.page-xt .cp .stats p:nth-child(1) span,
.page-sc .cp .stats p:nth-child(1) span {
    font-size: 120%;
    background-color: #000;
    padding: 0.4em 0.8em;
    text-shadow: 0.1em 0 0 rgba(2, 141, 70, 0.9), -0.1em 0 0 rgba(216, 0, 29, 0.9);
}
.page-xt .cp .stats p:nth-child(2) span,
.page-sc .cp .stats p:nth-child(2) span {
    font-size: 100%;
    color: #000;
    padding: 0.48em 0.96em;
    transition: background-color 100ms ease-out;
}
.page-xt .cp .stats.player1 p:nth-child(2) span,
.page-sc .cp .stats.player1 p:nth-child(2) span {
    background-color: #e53620;
}
.page-xt .cp .stats.player1 li,
.page-sc .cp .stats.player1 li {
    color: #e53620;
}
.page-xt .cp .stats.player2 p:nth-child(2) span,
.page-sc .cp .stats.player2 p:nth-child(2) span {
    background-color: #cf0;
}
.page-xt .cp .stats.player2 li,
.page-sc .cp .stats.player2 li {
    color: #cf0;
}
.page-xt .cp .stats.player3 p:nth-child(2) span,
.page-sc .cp .stats.player3 p:nth-child(2) span {
    background-color: #f75101;
}
.page-xt .cp .stats.player3 li,
.page-sc .cp .stats.player3 li {
    color: #f75101;
}
@media (min-width: 600px) {
    .page-xt .cp .nav,
    .page-sc .cp .nav {
        font-size: 110%;
    }
    .page-xt .cp .nav.active-1 .align::after,
    .page-sc .cp .nav.active-1 .align::after {
        background-position-x: 63%;
    }
    .page-xt .cp .nav.active-3 .align::after,
    .page-sc .cp .nav.active-3 .align::after {
        background-position-x: 37%;
    }
    .page-xt .cp .stats,
    .page-sc .cp .stats {
        font-size: 130%;
    }
}
@media (min-width: 720px) {
    .page-xt .cp,
    .page-sc .cp {
        background-size: 26px auto, 100% 300px;
    }
    .page-xt .cp .inner,
    .page-sc .cp .inner {
        margin-top: 20px;
    }
}
@media (min-width: 720px) {
    .page-xt .cp .vidholder,
    .page-sc .cp .vidholder {
        margin: 0;
        -webkit-transform: translateX(-17.5%);
        transform: translateX(-17.5%);
    }
    .page-xt .cp .stats,
    .page-sc .cp .stats {
        position: absolute;
        top: 430px;
        left: 57%;
        right: 0;
        margin: 0;
    }
}
@media (min-width: 850px) {
    .page-xt .cp .vidholder,
    .page-sc .cp .vidholder {
        -webkit-transform: translateX(-10%);
        transform: translateX(-10%);
    }
    .page-xt .cp .stats,
    .page-sc .cp .stats {
        left: 60%;
    }
}
@media (min-width: 900px) {
    .page-xt .cp,
    .page-sc .cp {
        background-size: 36px auto, 100% 300px;
        background-position: 50% -30px, 50% 0%;
        padding-bottom: 20vw;
    }
}
@media (min-width: 950px) {
    .page-xt .cp .vidholder,
    .page-sc .cp .vidholder {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@media (min-width: 1000px) {
    .page-xt .cp,
    .page-sc .cp {
        background-size: 36px auto, 100% 180px;
        background-position: 50% -130px, 50% 0%;
    }
    .page-xt .cp .row,
    .page-sc .cp .row {
        position: relative;
        margin-top: 6rem;
    }
    .page-xt .cp .nav,
    .page-sc .cp .nav {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0;
    }
    .page-xt .cp .nav a,
    .page-sc .cp .nav a {
        display: block;
        margin: 1.5em 0;
    }
    .page-xt .cp .nav .align,
    .page-sc .cp .nav .align {
        padding: 0 3.25rem 0 0;
    }
    .page-xt .cp .nav .align::after,
    .page-sc .cp .nav .align::after {
        top: 0;
        left: auto;
        width: 1rem;
        height: auto;
        background-image: url("../img/xt-pointer-vertical.svg");
        background-size: 100% auto;
        background-position: 50% 50%;
    }
    .page-xt .cp .nav.active-1 .align::after,
    .page-sc .cp .nav.active-1 .align::after {
        background-position: 50% 60.9%;
    }
    .page-xt .cp .nav.active-3 .align::after,
    .page-sc .cp .nav.active-3 .align::after {
        background-position: 50% 39.1%;
    }
    .page-xt .cp .stats,
    .page-sc .cp .stats {
        z-index: 1;
        left: auto;
        top: 50%;
        width: 17em;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-xt .cp .stats ul,
    .page-sc .cp .stats ul {
        margin-bottom: 0;
    }
    .page-xt .cp .vidholder,
    .page-sc .cp .vidholder {
        z-index: 0;
        left: 42%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
@media (min-width: 1440px) {
    .page-xt .cp,
    .page-sc .cp {
        margin-bottom: -288px;
    }
}
.page-sc .cp {
    background-color: #012d5d;
    background-image: url("../img/sc-pixel-fade-1.png"), linear-gradient(#11111c, rgba(17, 17, 28, 0));
}
.page-sc .cp .nav {
    font-size: 66%;
}
.page-sc .cp .nav .align::after {
    background-image: url("../img/sc-pointer-horizontal.svg");
}
.page-sc .cp .nav a {
    border-color: #0052ad;
}
.page-sc .cp .nav.active-1 a:nth-child(1) {
    border-color: #02ff02;
}
.page-sc .cp .nav.active-1 a:nth-child(1) img {
    opacity: 1;
}
.page-sc .cp .nav.active-1 .align::after {
    background-position-x: 61%;
}
.page-sc .cp .nav.active-2 a:nth-child(2) {
    border-color: #00aeef;
}
.page-sc .cp .nav.active-2 a:nth-child(2) img {
    opacity: 1;
}
.page-sc .cp .nav.active-2 .align::after {
    background-position-x: 53.5%;
}
.page-sc .cp .nav.active-3 a:nth-child(3) {
    border-color: #9ffea1;
}
.page-sc .cp .nav.active-3 a:nth-child(3) img {
    opacity: 1;
}
.page-sc .cp .nav.active-3 .align::after {
    background-position-x: 46.5%;
}
.page-sc .cp .nav.active-4 a:nth-child(4) {
    border-color: #e8ff00;
}
.page-sc .cp .nav.active-4 a:nth-child(4) img {
    opacity: 1;
}
.page-sc .cp .nav.active-4 .align::after {
    background-position-x: 39%;
}
.page-sc .cp .stats p:nth-child(1) span {
    text-shadow: 0.1em 0 0 rgba(0, 174, 239, 0.9), -0.1em 0 0 rgba(2, 255, 2, 0.9);
}
.page-sc .cp .stats.player1 p:nth-child(2) span {
    background-color: #02ff02;
}
.page-sc .cp .stats.player1 li {
    color: #02ff02;
}
.page-sc .cp .stats.player2 p:nth-child(2) span {
    background-color: #00aeef;
}
.page-sc .cp .stats.player2 li {
    color: #00aeef;
}
.page-sc .cp .stats.player3 p:nth-child(2) span {
    background-color: #9ffea1;
}
.page-sc .cp .stats.player3 li {
    color: #9ffea1;
}
.page-sc .cp .stats.player4 p:nth-child(2) span {
    background-color: #e8ff00;
}
.page-sc .cp .stats.player4 li {
    color: #e8ff00;
}
@media (min-width: 420px) {
    .page-sc .cp .nav {
        font-size: 90%;
    }
    .page-sc .cp .nav.active-1 .align::after {
        background-position-x: 66.5%;
    }
    .page-sc .cp .nav.active-2 .align::after {
        background-position-x: 55.5%;
    }
    .page-sc .cp .nav.active-3 .align::after {
        background-position-x: 44.5%;
    }
    .page-sc .cp .nav.active-4 .align::after {
        background-position-x: 33.5%;
    }
}
@media (min-width: 600px) {
    .page-sc .cp .nav {
        font-size: 110%;
    }
    .page-sc .cp .nav.active-1 .align::after {
        background-position-x: 72.5%;
    }
    .page-sc .cp .nav.active-2 .align::after {
        background-position-x: 57.75%;
    }
    .page-sc .cp .nav.active-3 .align::after {
        background-position-x: 42.5%;
    }
    .page-sc .cp .nav.active-4 .align::after {
        background-position-x: 27.5%;
    }
}
@media (min-width: 1000px) {
    .page-sc .cp .nav .align::after {
        background-image: url("../img/sc-pointer-vertical.svg");
    }
    .page-sc .cp .nav.active-1 .align::after {
        background-position: 50% 68%;
    }
    .page-sc .cp .nav.active-2 .align::after {
        background-position: 50% 56%;
    }
    .page-sc .cp .nav.active-3 .align::after {
        background-position: 50% 44%;
    }
    .page-sc .cp .nav.active-4 .align::after {
        background-position: 50% 32%;
    }
}
.page-xt .pb,
.page-sc .pb {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-xt .pb,
    .page-sc .pb {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-xt .pb .inner,
.page-sc .pb .inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-xt .pb p,
.page-sc .pb p {
    color: #fff;
    margin-bottom: 0;
}
.page-xt .pb .hyperfibre,
.page-sc .pb .hyperfibre {
    display: block;
    width: 13em;
    height: 1.71em;
    margin-top: 2em;
}
.page-xt .pb .racket-small,
.page-sc .pb .racket-small {
    display: block;
    width: 100%;
    height: auto;
    max-width: 400px;
    margin: 0 auto;
}
.page-xt .pb .racket-large,
.page-sc .pb .racket-large {
    display: none;
    height: auto;
}
.page-xt .pb svg,
.page-sc .pb svg {
    overflow: visible;
    position: absolute;
    z-index: 2;
    top: 97vw;
    right: 0;
    width: 14px;
    height: auto;
}
.page-xt .pb svg path,
.page-sc .pb svg path {
    fill: #242a3b;
    -webkit-filter: drop-shadow(0 0 10px transparent);
    filter: drop-shadow(0 0 10px transparent);
    transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page-xt .pb svg path:nth-child(1),
.page-sc .pb svg path:nth-child(1) {
    transition-delay: 200ms;
}
.page-xt .pb svg path:nth-child(2),
.page-sc .pb svg path:nth-child(2) {
    transition-delay: 220ms;
}
.page-xt .pb svg path:nth-child(3),
.page-sc .pb svg path:nth-child(3) {
    transition-delay: 240ms;
}
.page-xt .pb svg path:nth-child(4),
.page-sc .pb svg path:nth-child(4) {
    transition-delay: 260ms;
}
.page-xt .pb svg path:nth-child(5),
.page-sc .pb svg path:nth-child(5) {
    transition-delay: 280ms;
}
.page-xt .pb svg path:nth-child(6),
.page-sc .pb svg path:nth-child(6) {
    transition-delay: 300ms;
}
.page-xt .pb svg path:nth-child(7),
.page-sc .pb svg path:nth-child(7) {
    transition-delay: 320ms;
}
.page-xt .pb svg path:nth-child(8),
.page-sc .pb svg path:nth-child(8) {
    transition-delay: 340ms;
}
.page-xt .pb svg path:nth-child(9),
.page-sc .pb svg path:nth-child(9) {
    transition-delay: 360ms;
}
.page-xt .pb svg path:nth-child(10),
.page-sc .pb svg path:nth-child(10) {
    transition-delay: 380ms;
}
.page-xt .pb svg path:nth-child(11),
.page-sc .pb svg path:nth-child(11) {
    transition-delay: 400ms;
}
.page-xt .pb svg path:nth-child(12),
.page-sc .pb svg path:nth-child(12) {
    transition-delay: 420ms;
}
.page-xt .pb svg path:nth-child(13),
.page-sc .pb svg path:nth-child(13) {
    transition-delay: 440ms;
}
.page-xt .pb svg path:nth-child(14),
.page-sc .pb svg path:nth-child(14) {
    transition-delay: 460ms;
}
.page-xt .pb svg path:nth-child(15),
.page-sc .pb svg path:nth-child(15) {
    transition-delay: 480ms;
}
.page-xt .pb svg path:nth-child(16),
.page-sc .pb svg path:nth-child(16) {
    transition-delay: 500ms;
}
.page-xt .pb svg path:nth-child(17),
.page-sc .pb svg path:nth-child(17) {
    transition-delay: 520ms;
}
.page-xt .pb svg path:nth-child(18),
.page-sc .pb svg path:nth-child(18) {
    transition-delay: 540ms;
}
.page-xt .pb svg path:nth-child(19),
.page-sc .pb svg path:nth-child(19) {
    transition-delay: 560ms;
}
.page-xt .pb svg path:nth-child(20),
.page-sc .pb svg path:nth-child(20) {
    transition-delay: 580ms;
}
.page-xt .pb svg path:nth-child(21),
.page-sc .pb svg path:nth-child(21) {
    transition-delay: 600ms;
}
.page-xt .pb svg path:nth-child(22),
.page-sc .pb svg path:nth-child(22) {
    transition-delay: 620ms;
}
.page-xt .pb svg path:nth-child(23),
.page-sc .pb svg path:nth-child(23) {
    transition-delay: 640ms;
}
.page-xt .pb svg path:nth-child(24),
.page-sc .pb svg path:nth-child(24) {
    transition-delay: 660ms;
}
.page-xt .pb svg.triggered path,
.page-sc .pb svg.triggered path {
    fill: #ff1c00;
    -webkit-filter: drop-shadow(0 0 10px #ff1c00);
    filter: drop-shadow(0 0 10px #ff1c00);
}
.page-xt .pb svg.triggered path:nth-child(25),
.page-xt .pb svg.triggered path:nth-child(26),
.page-xt .pb svg.triggered path:nth-child(27),
.page-xt .pb svg.triggered path:nth-child(28),
.page-xt .pb svg.triggered path:nth-child(29),
.page-sc .pb svg.triggered path:nth-child(25),
.page-sc .pb svg.triggered path:nth-child(26),
.page-sc .pb svg.triggered path:nth-child(27),
.page-sc .pb svg.triggered path:nth-child(28),
.page-sc .pb svg.triggered path:nth-child(29) {
    fill: #242a3b;
    -webkit-filter: drop-shadow(0 0 10px transparent);
    filter: drop-shadow(0 0 10px transparent);
}
@media (min-width: 440px) {
    .page-xt .pb svg,
    .page-sc .pb svg {
        top: 420px;
        width: 18px;
        right: 15%;
    }
}
@media (min-width: 720px) {
    .page-xt .pb,
    .page-sc .pb {
        overflow: hidden;
    }
    .page-xt .pb .left,
    .page-sc .pb .left {
        width: calc((100% - 3.6rem) / 2.4);
        position: relative;
        z-index: 2;
    }
}
@media (min-width: 720px) and (min-width: 900px) {
    .page-xt .pb .left,
    .page-sc .pb .left {
        width: calc((100% - 4.8rem) / 2.4);
    }
}
@media (min-width: 720px) {
    .page-xt .pb .hyperfibre,
    .page-sc .pb .hyperfibre {
        width: 17em;
        height: 2.24em;
        margin-top: 5em;
    }
    .page-xt .pb .racket-small,
    .page-sc .pb .racket-small {
        display: none;
    }
    .page-xt .pb .racket-large,
    .page-sc .pb .racket-large {
        display: block;
        position: absolute;
        z-index: 1;
        top: 53%;
        right: 0;
        width: 55%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-xt .pb p,
    .page-sc .pb p {
        max-width: 21em;
    }
    .page-xt .pb svg,
    .page-sc .pb svg {
        top: auto;
        bottom: 0;
        right: 0;
    }
}
@media (min-width: 840px) {
    .page-xt .pb .inner,
    .page-sc .pb .inner {
        padding: 1.5rem 0;
    }
}
@media (min-width: 900px) {
    .page-xt .pb .inner,
    .page-sc .pb .inner {
        padding: 3rem 0;
    }
    .page-xt .pb .left,
    .page-sc .pb .left {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-xt .pb .left,
    .page-sc .pb .left {
        width: calc((100% - 6rem) / 3);
    }
}
@media (min-width: 900px) {
    .page-xt .pb .racket-large,
    .page-sc .pb .racket-large {
        right: 3%;
        width: 60%;
    }
}
@media (min-width: 1000px) {
    .page-xt .pb .racket-large,
    .page-sc .pb .racket-large {
        right: 8%;
        width: 55%;
    }
    .page-xt .pb svg,
    .page-sc .pb svg {
        width: 22px;
    }
}
@media (min-width: 1100px) {
    .page-xt .pb .racket-large,
    .page-sc .pb .racket-large {
        top: 56%;
        width: 52%;
        right: 10%;
    }
}
.page-sc .pb ul {
    margin-top: 1.5em;
}
.page-sc .pb li {
    color: #fff;
    margin: 0.25em 0;
}
.page-sc .pb li::before {
    background-color: #fff;
}
.page-sc .pb .logo {
    display: block;
    width: 20em;
    height: auto;
    margin-top: 4em;
}
@media (min-width: 720px) {
    .page-sc .pb .logo {
        margin-top: 4em;
    }
    .page-sc .pb .racket-large {
        top: 55%;
        width: 52.5%;
    }
    .page-sc .pb ul {
        max-width: 21em;
        margin-top: 4em;
    }
}
@media (min-width: 840px) {
    .page-sc .pb .logo {
        width: 24em;
    }
}
@media (min-width: 900px) {
    .page-sc .pb .left {
        width: calc((100% - 3.6rem) / 2.4);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-sc .pb .left {
        width: calc((100% - 4.8rem) / 2.4);
    }
}
@media (min-width: 900px) {
    .page-sc .pb ul {
        max-width: 30em;
    }
    .page-sc .pb .racket-large {
        right: -5%;
        width: 60%;
    }
}
@media (min-width: 1100px) {
    .page-sc .pb .logo {
        width: 28em;
    }
    .page-sc .pb .inner {
        padding-bottom: 6rem;
    }
    .page-sc .pb .racket-large {
        top: 50%;
    }
}
@media (min-width: 1300px) {
    .page-sc .pb .inner {
        padding-bottom: 8rem;
    }
}
.page-xt .nl,
.page-sc .nl {
    padding: 3rem 1.5rem;
    background-color: #e53620;
    margin-top: -10vw;
    margin-top: calc(-10vw - 0.5px);
}
@media (min-width: 900px) {
    .page-xt .nl,
    .page-sc .nl {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-xt .nl .inner,
.page-sc .nl .inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-xt .nl h2,
.page-sc .nl h2 {
    margin: 0 0 0.5em 0;
}
.page-xt .nl h3,
.page-sc .nl h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #fff;
    font-size: 90%;
}
.page-xt .nl .carousel,
.page-sc .nl .carousel {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
    .page-xt .nl .carousel,
    .page-sc .nl .carousel {
        margin-left: -3rem;
        margin-right: -3rem;
    }
}
@media (min-width: 1280px) {
    .page-xt .nl .carousel,
    .page-sc .nl .carousel {
        margin-left: calc((-100vw + 1200px) / 2);
        margin-right: calc((-100vw + 1200px) / 2);
    }
}
.page-xt .nl .carousel .slide,
.page-sc .nl .carousel .slide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    outline: none;
}
@media (min-width: 900px) {
    .page-xt .nl .carousel .slide,
    .page-sc .nl .carousel .slide {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-xt .nl .carousel .slide .in,
.page-sc .nl .carousel .slide .in {
    margin: 0 auto;
    max-width: 870px;
    border-left: solid 5px rgba(216, 0, 29, 0.9);
    border-right: solid 5px rgba(2, 141, 70, 0.9);
}
.page-xt .nl .carousel .slide a,
.page-sc .nl .carousel .slide a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}
.page-xt .nl .carousel .slide .drill,
.page-xt .nl .carousel .slide .title,
.page-xt .nl .carousel .slide .details,
.page-sc .nl .carousel .slide .drill,
.page-sc .nl .carousel .slide .title,
.page-sc .nl .carousel .slide .details {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}
.page-xt .nl .carousel .slide .drill,
.page-xt .nl .carousel .slide em,
.page-sc .nl .carousel .slide .drill,
.page-sc .nl .carousel .slide em {
    display: block;
    color: #e53620;
}
.page-xt .nl .carousel .slide .drill,
.page-sc .nl .carousel .slide .drill {
    top: 12%;
    font-size: 90%;
}
.page-xt .nl .carousel .slide .title,
.page-sc .nl .carousel .slide .title {
    font-size: 100%;
    top: 25%;
}
.page-xt .nl .carousel .slide .details,
.page-sc .nl .carousel .slide .details {
    top: 80%;
    font-size: 80%;
}
.page-xt .nl .carousel .slide .time,
.page-xt .nl .carousel .slide .level,
.page-xt .nl .carousel .slide .divider,
.page-sc .nl .carousel .slide .time,
.page-sc .nl .carousel .slide .level,
.page-sc .nl .carousel .slide .divider {
    display: inline-block;
    vertical-align: middle;
}
.page-xt .nl .carousel .slide .divider,
.page-sc .nl .carousel .slide .divider {
    position: relative;
    margin-left: 1.5em;
    margin-right: 1.5em;
    width: 2px;
    height: 3.5em;
    background-color: #fff;
    -webkit-transform: rotateZ(10deg);
    transform: rotateZ(10deg);
}
.page-xt .nl .carousel .slide .divider::before,
.page-xt .nl .carousel .slide .divider::after,
.page-sc .nl .carousel .slide .divider::before,
.page-sc .nl .carousel .slide .divider::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5px;
    content: "";
}
.page-xt .nl .carousel .slide .divider::before,
.page-sc .nl .carousel .slide .divider::before {
    background-color: rgba(216, 0, 29, 0.9);
    right: 100%;
}
.page-xt .nl .carousel .slide .divider::after,
.page-sc .nl .carousel .slide .divider::after {
    background-color: rgba(2, 141, 70, 0.9);
    left: 100%;
}
.page-xt .nl .carousel .slide .soon,
.page-sc .nl .carousel .slide .soon {
    position: relative;
    background-color: #000;
    background-image: url("../img/xt-nl-soon.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.page-xt .nl .carousel .slide .soon:before,
.page-sc .nl .carousel .slide .soon:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
}
.page-xt .nl .carousel .slide .soon .text,
.page-sc .nl .carousel .slide .soon .text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-size: 100%;
}
.page-xt .nl .carousel .slide .soon .text h3,
.page-sc .nl .carousel .slide .soon .text h3 {
    color: #fff;
    font-size: 120%;
}
.page-xt .nl .carousel .slide .soon .text h4,
.page-sc .nl .carousel .slide .soon .text h4 {
    color: #e53620;
    font-size: 70%;
}
.page-xt .nl .progress,
.page-sc .nl .progress {
    margin: 0;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    color: #fff;
    text-align: right;
    line-height: 2;
}
.page-xt .nl .progress span:first-child,
.page-sc .nl .progress span:first-child {
    display: inline-block;
    position: relative;
    padding-right: 1em;
    margin-right: 1em;
}
.page-xt .nl .progress span:first-child::after,
.page-sc .nl .progress span:first-child::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    opacity: 0.3;
    -webkit-transform: rotateZ(10deg);
    transform: rotateZ(10deg);
}
@media (min-width: 430px) {
    .page-xt .nl .carousel .slide,
    .page-sc .nl .carousel .slide {
        padding: 0 0.75rem;
    }
    .page-xt .nl .carousel .slide .soon,
    .page-sc .nl .carousel .slide .soon {
        font-size: 120%;
    }
    .page-xt .nl .progress,
    .page-sc .nl .progress {
        padding-right: calc((1.5rem * 0.5) + 2%);
    }
}
@media (min-width: 500px) {
    .page-xt .nl .carousel .slide .drill,
    .page-sc .nl .carousel .slide .drill {
        font-size: 120%;
        top: 13%;
    }
    .page-xt .nl .carousel .slide .title,
    .page-sc .nl .carousel .slide .title {
        font-size: 150%;
        top: 26%;
    }
    .page-xt .nl .carousel .slide .details,
    .page-sc .nl .carousel .slide .details {
        font-size: 100%;
    }
    .page-xt .nl .carousel .slide .divider,
    .page-sc .nl .carousel .slide .divider {
        margin-left: 2.5em;
        margin-right: 2.5em;
    }
}
@media (min-width: 600px) {
    .page-xt .nl .carousel .slide,
    .page-sc .nl .carousel .slide {
        padding: 0 1.5rem;
    }
    .page-xt .nl .carousel .slide .soon,
    .page-sc .nl .carousel .slide .soon {
        font-size: 150%;
    }
    .page-xt .nl .progress,
    .page-sc .nl .progress {
        padding-right: calc(1.5rem + 6%);
    }
}
@media (min-width: 720px) {
    .page-xt .nl,
    .page-sc .nl {
        background-color: transparent;
        background-image: linear-gradient(90deg, transparent 50%, #e53620 50%);
        padding-top: 0;
        position: relative;
    }
    .page-xt .nl::before,
    .page-xt .nl::after,
    .page-sc .nl::before,
    .page-sc .nl::after {
        position: absolute;
        content: "";
        top: 0;
        right: 50%;
    }
    .page-xt .nl::before,
    .page-sc .nl::before {
        position: absolute;
        z-index: 1;
        left: 0;
        bottom: 0;
        background-image: url("../img/xt-nm.jpg");
        background-position: 50% 5%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .page-xt .nl::after,
    .page-sc .nl::after {
        z-index: 2;
        width: 10vw;
        height: 10vw;
        max-width: 144px;
        max-height: 144px;
        background-color: #e53620;
    }
    .page-xt .nl .rhs,
    .page-sc .nl .rhs {
        margin-left: 50%;
        margin-right: -1.5rem;
        padding-top: 2.625rem;
    }
    .page-xt .nl .rhs h2,
    .page-xt .nl .rhs h3,
    .page-sc .nl .rhs h2,
    .page-sc .nl .rhs h3 {
        padding-left: 2.25rem;
    }
    .page-xt .nl .carousel .slide .in,
    .page-sc .nl .carousel .slide .in {
        border-left-width: 8px;
        border-right-width: 8px;
    }
    .page-xt .nl .carousel .slide .drill,
    .page-sc .nl .carousel .slide .drill {
        top: 15%;
    }
    .page-xt .nl .carousel .slide .title,
    .page-sc .nl .carousel .slide .title {
        font-size: 220%;
        top: 26%;
    }
    .page-xt .nl .carousel .slide .divider,
    .page-sc .nl .carousel .slide .divider {
        margin-left: 3.5em;
        margin-right: 3.5em;
    }
    .page-xt .nl .carousel .slide .soon,
    .page-sc .nl .carousel .slide .soon {
        font-size: 180%;
    }
}
@media (min-width: 900px) {
    .page-xt .nl,
    .page-sc .nl {
        padding-bottom: 3.75rem;
    }
    .page-xt .nl .carousel .slide,
    .page-sc .nl .carousel .slide {
        padding: 0 3rem;
    }
    .page-xt .nl .carousel .slide .soon,
    .page-sc .nl .carousel .slide .soon {
        font-size: 200%;
    }
    .page-xt .nl .progress,
    .page-sc .nl .progress {
        padding-top: 1.125rem;
        padding-right: calc(1.5rem + 12%);
    }
}
@media (min-width: 1000px) {
    .page-xt .nl .rhs h2,
    .page-xt .nl .rhs h3,
    .page-sc .nl .rhs h2,
    .page-sc .nl .rhs h3 {
        padding-left: 4.5rem;
    }
}
@media (min-width: 1140px) {
    .page-xt .nl .rhs,
    .page-sc .nl .rhs {
        padding-top: 5.25rem;
        padding-bottom: 2.1rem;
    }
    .page-xt .nl .rhs h2,
    .page-xt .nl .rhs h3,
    .page-sc .nl .rhs h2,
    .page-sc .nl .rhs h3 {
        padding-left: 7.5rem;
    }
    .page-xt .nl .rhs h3,
    .page-sc .nl .rhs h3 {
        font-size: 110%;
    }
}
@media (min-width: 1200px) {
    .page-xt .nl .progress,
    .page-sc .nl .progress {
        padding-right: calc(1.5rem + 17%);
    }
}
@media (min-width: 1440px) {
    .page-xt .nl,
    .page-sc .nl {
        margin-top: -144.5px;
    }
    .page-xt .nl .progress,
    .page-sc .nl .progress {
        padding-right: 165px;
    }
}
.page-sc .nl {
    background-color: #02ff02;
}
.page-sc .nl h3 {
    color: #000;
}
.page-sc .nl .carousel .slide .in {
    border-left-color: #67ff67;
    border-right-color: #00aeef;
}
.page-sc .nl .carousel .slide .drill,
.page-sc .nl .carousel .slide em {
    color: #02ff02;
}
.page-sc .nl .carousel .slide .divider::before {
    background-color: rgba(2, 255, 2, 0.9);
    opacity: 0.5;
}
.page-sc .nl .carousel .slide .divider::after {
    background-color: rgba(0, 174, 239, 0.9);
    opacity: 0.5;
}
.page-sc .nl .carousel .slide .soon {
    background-image: url("../img/sc-drills-soon.jpg");
}
.page-sc .nl .carousel .slide .soon .text h4 {
    color: #02ff02;
}
.page-sc .nl .progress {
    color: #000;
}
.page-sc .nl .progress span:first-child::after {
    background-color: #000;
}
@media (min-width: 720px) {
    .page-sc .nl {
        background-image: linear-gradient(90deg, transparent 50%, #02ff02 50%);
        padding-top: 0;
        position: relative;
    }
    .page-sc .nl h3 {
        padding-right: 2.25em;
    }
    .page-sc .nl .soon h3 {
        padding-right: 0;
    }
    .page-sc .nl::before {
        background-image: url("../img/sc-player.jpg");
    }
    .page-sc .nl::after {
        background-color: #02ff02;
    }
}
@-webkit-keyframes gal-pulse {
    0% {
        box-shadow: 0 0 0.5rem #f9ff44;
    }
    100% {
        box-shadow: 0 0 1.5rem #f9ff44;
    }
}
@keyframes gal-pulse {
    0% {
        box-shadow: 0 0 0.5rem #f9ff44;
    }
    100% {
        box-shadow: 0 0 1.5rem #f9ff44;
    }
}
.page-galactica .video-swap {
    position: relative;
    z-index: 1;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}
.page-galactica .video-swap a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
}
.page-galactica .video-swap a .screen {
    display: block;
    width: 100%;
    height: auto;
}
.page-galactica .video-swap a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.5rem;
    height: 3.5rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: -webkit-transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    fill: #f9ff44;
}
@media (min-width: 420px) {
    .page-galactica .video-swap a svg {
        width: 4.5rem;
        height: 4.5rem;
    }
}
@media (min-width: 720px) {
    .page-galactica .video-swap a svg {
        width: 6rem;
        height: 6rem;
    }
}
@media (min-width: 1000px) {
    .page-galactica .video-swap a svg {
        width: 8rem;
        height: 8rem;
    }
}
.page-galactica .video-swap a:hover svg {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
    transform: translate(-50%, -50%) scale(1.1);
}
.page-galactica .video-swap a.hide {
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}
.page-galactica .video-swap .vid-container {
    position: relative;
    z-index: 1;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.page-galactica .video-swap .vid-container iframe,
.page-galactica .video-swap .vid-container object,
.page-galactica .video-swap .vid-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-galactica .video-swap .youtube {
    margin: 0;
    padding-top: 0;
}
.page-galactica .invisibleonload {
    visibility: hidden;
}
.page-galactica .hideonload {
    display: none;
}
.page-galactica .carousel-arrow {
    background-color: transparent;
    border: solid 1px #f9ff44;
}
.page-galactica .carousel-arrow svg {
    fill: #f9ff44;
}
.page-galactica .carousel-arrow:hover {
    background-color: #f9ff44;
}
.page-galactica .top {
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 66vw;
    text-align: center;
    background-color: #000;
    overflow: hidden;
}
@media (min-width: 900px) {
    .page-galactica .top {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-galactica .top .bg {
    position: absolute;
    z-index: 0;
    top: -11.7vw;
    left: 0;
    right: 0;
    background-image: url("../img/gal-hero-small.jpg");
    background-size: 100% auto;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}
.page-galactica .top .bg:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 106.35451505%;
}
.page-galactica .top .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-galactica .top .logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 85%;
    height: auto;
    margin: 0 auto;
    -webkit-animation: fadeIn 600ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 600ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-galactica .top p {
    position: relative;
    z-index: 2;
    color: #fff;
    line-height: 1.8;
}
.page-galactica .top .intro {
    margin: 1.5em auto 6em auto;
    max-width: 24em;
}
.page-galactica .top .video-swap {
    z-index: 2;
}
.page-galactica .top .undervid {
    margin: 3em auto 4em auto;
    max-width: 38em;
    opacity: 0;
}
.page-galactica .top .undervid.triggered {
    -webkit-animation: slideInUp 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slideInUp 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.page-galactica .top .explore {
    display: none;
}
.page-galactica .top::before,
.page-galactica .top::after {
    position: absolute;
    z-index: 1;
    content: "";
    background-repeat: no-repeat;
}
.page-galactica .top::before {
    top: 0;
    left: 0;
    width: 25vw;
    height: 25vw;
    background-image: url("../img/gal-shape-1.svg");
    background-position: 0% 0%;
    background-size: contain;
    -webkit-animation: gal-t1-in 600ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: gal-t1-in 600ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-galactica .top::after {
    top: 54%;
    right: 0;
    width: 20vw;
    height: 100rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url("../img/gal-shape-2.svg");
    background-position: 0% 50%;
    background-size: initial;
    -webkit-animation: gal-t2-in 600ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: gal-t2-in 600ms 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 420px) {
    .page-galactica .top::after {
        top: 57%;
    }
}
@media (min-width: 720px) {
    .page-galactica .top {
        padding-top: 20vw;
        text-align: left;
    }
    .page-galactica .top .bg {
        background-image: url("../img/gal-hero-large.jpg");
        width: 78%;
        top: -9.5vw;
        left: auto;
    }
    .page-galactica .top .bg:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 89.2857142857%;
    }
    .page-galactica .top::before {
        width: 15vw;
        height: 15vw;
    }
    .page-galactica .top:after {
        top: 45%;
        width: 30vw;
    }
    .page-galactica .top .logo {
        width: 44%;
        margin: 0;
    }
    .page-galactica .top .intro {
        width: 44%;
        max-width: 34em;
        margin: 3.5rem 0 0 0;
    }
    .page-galactica .top .undervid {
        text-align: center;
        margin-top: 5em;
        margin-bottom: 7em;
    }
    .page-galactica .top .video-swap {
        margin-top: 15vw;
    }
}
@media (min-width: 900px) {
    .page-galactica .top:after {
        top: 47%;
        width: 32vw;
    }
}
@media (min-width: 1000px) {
    .page-galactica .top {
        padding-top: 17.5vw;
    }
    .page-galactica .top .intro {
        margin: 3.5rem 0 4.5rem 0;
    }
    .page-galactica .top .explore {
        display: inline-block;
    }
    .page-galactica .top .video-swap {
        margin-top: 12.5vw;
    }
}
@media (min-width: 1100px) {
    .page-galactica .top:after {
        top: 52%;
        width: 400px;
    }
}
@media (min-width: 1150px) {
    .page-galactica .top {
        padding-top: 20vw;
    }
}
@media (min-width: 1350px) {
    .page-galactica .top {
        padding-top: 240px;
    }
    .page-galactica .top .bg {
        top: -120px;
        width: 1040px;
    }
    .page-galactica .top::before {
        width: 210px;
        height: 210px;
    }
    .page-galactica .top:after {
        top: 57%;
        width: 450px;
    }
    .page-galactica .top .logo {
        width: 50%;
        margin-left: -42px;
    }
    .page-galactica .top .intro {
        margin-top: 5rem;
    }
    .page-galactica .top .video-swap {
        margin-top: 155px;
    }
}
.page-galactica .bats {
    background-color: #121212;
    background-image: url("../img/gal-carbon-bg-small.png");
    background-repeat: repeat-x;
    background-position: 50% 100%;
    padding-bottom: 10rem;
}
.page-galactica .bats .title {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-galactica .bats .title {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-galactica .bats .title h2 {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.25em;
    font-size: 125%;
    padding: 0;
    margin: 0 auto;
    opacity: 0;
}
.page-galactica .bats .title h2::after {
    display: none;
}
.page-galactica .bats .title h2.triggered {
    -webkit-animation: slideInRight 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slideInRight 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.page-galactica .bats .carousel {
    margin-top: -1.5rem;
}
.page-galactica .bats .slide {
    text-align: center;
}
.page-galactica .bats .slide img {
    display: inline-block;
    vertical-align: bottom;
}
.page-galactica .bats .slide .large {
    display: none;
}
.page-galactica .bats .slide .front {
    width: 50vw;
}
.page-galactica .bats .slide .side {
    width: 15.5vw;
}
.page-galactica .bats .description {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
}
@media (min-width: 900px) {
    .page-galactica .bats .description {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-galactica .bats .description .inner {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
}
.page-galactica .bats .description .bat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.page-galactica .bats .description .bat.show {
    opacity: 1;
    z-index: 1;
    transition: opacity 200ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-galactica .bats .description h3,
.page-galactica .bats .description h4 {
    text-transform: uppercase;
}
.page-galactica .bats .description h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    font-size: 125%;
    color: #f9ff44;
}
.page-galactica .bats .description h4 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    margin-top: 1em;
    font-size: 90%;
}
.page-galactica .bats .description p {
    color: #fff;
    margin-top: 0.25em;
    line-height: 1.8;
}
.page-galactica .bats .description a {
    margin-top: 1.5em;
    padding-left: 3.5em;
    padding-right: 3.5em;
}
@media (min-width: 400px) {
    .page-galactica .bats .title h2 {
        font-size: 150%;
    }
    .page-galactica .bats .description h3 {
        font-size: 150%;
    }
    .page-galactica .bats .description h4 {
        font-size: 100%;
    }
}
@media (min-width: 720px) {
    .page-galactica .bats .title h2 {
        font-size: 200%;
    }
    .page-galactica .bats .description {
        padding-top: 0;
    }
    .page-galactica .bats .description h3 {
        font-size: 175%;
    }
    .page-galactica .bats .description h4 {
        font-size: 110%;
    }
    .page-galactica .bats .description p {
        float: left;
        width: 60%;
        margin-bottom: 0;
    }
    .page-galactica .bats .description a {
        float: right;
        margin-top: 0.9em;
    }
}
@media (min-width: 800px) {
    .page-galactica .bats {
        background-image: url("../img/gal-carbon-bg-large.png");
    }
    .page-galactica .bats .slide .inner {
        -webkit-transform: scale(0.5) translateY(22%);
        transform: scale(0.5) translateY(22%);
        opacity: 0.5;
        transition: opacity 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    .page-galactica .bats .slide .front {
        width: 30vw;
        transition: -webkit-transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    .page-galactica .bats .slide .side {
        position: absolute;
        bottom: 0;
        left: 78%;
        width: 9.25vw;
        opacity: 0;
        transition: opacity 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    .page-galactica .bats .slide.slick-current .inner {
        -webkit-transform: scale(1) translateY(0);
        transform: scale(1) translateY(0);
        opacity: 1;
        transition: opacity 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .page-galactica .bats .slide.slick-current .front {
        -webkit-transform: translateX(-17%);
        transform: translateX(-17%);
        transition: -webkit-transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .page-galactica .bats .slide.slick-current .side {
        opacity: 1;
        transition: opacity 100ms 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}
@media (min-width: 900px) {
    .page-galactica .bats .carousel {
        margin-top: -3.5rem;
    }
}
@media (min-width: 1000px) {
    .page-galactica .bats .title h2 {
        font-size: 250%;
    }
    .page-galactica .bats .description .inner {
        max-width: 800px;
    }
    .page-galactica .bats .description h3 {
        font-size: 225%;
    }
    .page-galactica .bats .description p {
        width: 66%;
    }
    .page-galactica .bats .carousel {
        margin-top: -11%;
        margin-bottom: -5%;
    }
    .page-galactica .bats .slide .inner {
        -webkit-transform: scale(0.45) translateY(22%);
        transform: scale(0.45) translateY(22%);
    }
    .page-galactica .bats .slide.slick-current .inner {
        -webkit-transform: scale(0.75) translateY(0);
        transform: scale(0.75) translateY(0);
    }
}
@media (min-width: 1200px) {
    .page-galactica .bats {
        padding-bottom: 13rem;
    }
    .page-galactica .bats .title h2 {
        font-size: 300%;
    }
    .page-galactica .bats .description h3 {
        font-size: 250%;
    }
}
@media (min-width: 1300px) {
    .page-galactica .bats .slide .small {
        display: none;
    }
    .page-galactica .bats .slide .large {
        display: inline-block;
    }
}
@media (min-width: 1500px) {
    .page-galactica .bats .carousel {
        margin-top: -13%;
        margin-bottom: -8%;
    }
    .page-galactica .bats .slide .inner {
        -webkit-transform: scale(0.33) translateY(22%);
        transform: scale(0.33) translateY(22%);
    }
    .page-galactica .bats .slide.slick-current .inner {
        -webkit-transform: scale(0.6) translateY(0);
        transform: scale(0.6) translateY(0);
    }
}
.page-galactica .tech {
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 8rem;
    padding-bottom: 5rem;
    color: #fff;
}
@media (min-width: 900px) {
    .page-galactica .tech {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-galactica .tech::before,
.page-galactica .tech::after {
    position: absolute;
    content: "";
    z-index: 1;
    width: 6rem;
    height: 12rem;
    background-image: url("../img/gal-shape-2.svg");
    background-position: 0% 50%;
    background-size: initial;
}
.page-galactica .tech::before {
    top: 0;
    left: 0;
    -webkit-transform: translateY(-50%) rotateZ(180deg);
    transform: translateY(-50%) rotateZ(180deg);
}
.page-galactica .tech::after {
    bottom: 0;
    right: 0;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}
.page-galactica .tech .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-galactica .tech h2 {
    letter-spacing: 0.25em;
    font-size: 125%;
    padding: 0;
    margin: 0;
}
.page-galactica .tech h2::after {
    display: none;
}
.page-galactica .tech h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    font-size: 100%;
    text-transform: uppercase;
    border-bottom: solid 1px #fff;
    margin-top: 8rem;
    padding-bottom: 0.66em;
}
.page-galactica .tech p {
    line-height: 1.8;
}
.page-galactica .tech .intro h2,
.page-galactica .tech .intro p {
    opacity: 0;
}
.page-galactica .tech .intro h2.triggered,
.page-galactica .tech .intro p.triggered {
    -webkit-animation: slideInRight 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slideInRight 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.page-galactica .tech .bat {
    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 0 auto;
}
.page-galactica .tech .maintechs .t {
    margin-top: 4rem;
}
.page-galactica .tech .maintechs .t.tm {
    margin-top: -3rem;
}
.page-galactica .tech .maintechs .circ {
    position: relative;
    width: 65%;
    max-width: 280px;
    margin: 2rem auto;
}
.page-galactica .tech .maintechs .circ:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.page-galactica .tech .maintechs .circ img,
.page-galactica .tech .maintechs .circ::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.page-galactica .tech .maintechs .circ img {
    z-index: 1;
    height: auto;
}
.page-galactica .tech .maintechs .circ::after {
    z-index: 0;
    content: "";
    height: 100%;
    border-radius: 50%;
    background-color: #000;
}
.page-galactica .tech .maintechs a {
    display: none;
    position: absolute;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    background-color: #f9ff44;
    border-radius: 50%;
    -webkit-animation: gal-pulse 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
    animation: gal-pulse 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
    transition: background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-galactica .tech .maintechs a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 45%;
    height: 45%;
    fill: #000;
}
.page-galactica .tech .maintechs a.active {
    background-color: #fff;
    -webkit-animation: none;
    animation: none;
}
.page-galactica .tech .maintechs a:nth-of-type(1) {
    top: 58%;
    left: 71%;
}
.page-galactica .tech .maintechs a:nth-of-type(2) {
    top: 60%;
    left: 81%;
}
.page-galactica .tech .maintechs a:nth-of-type(3) {
    top: 41%;
    left: 90%;
}
.page-galactica .tech .maintechs a:nth-of-type(4) {
    top: 48%;
    left: 80%;
}
.page-galactica .tech .maintechs .line {
    display: none;
    position: absolute;
    z-index: 0;
    height: auto;
}
.page-galactica .tech .maintechs .line.tm {
    top: 58%;
    left: 59%;
    width: 12%;
}
.page-galactica .tech .maintechs .line.bg {
    top: 60%;
    left: 47.25%;
    width: 33.7%;
}
.page-galactica .tech .maintechs .line.jc {
    top: 34.5%;
    left: 47.25%;
    width: 42.8%;
}
.page-galactica .tech .maintechs .line.six {
    top: 34.5%;
    left: 47.25%;
    width: 32.8%;
}
.page-galactica .tech .parallax-sizer {
    position: relative;
}
.page-galactica .tech .progress-indicator {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 8%;
    height: 100%;
}
.page-galactica .tech .progress-indicator div {
    position: absolute;
    bottom: 20%;
    right: 0;
}
.page-galactica .tech .progress-indicator i {
    display: block;
    width: 6px;
    height: 6px;
    margin: 16px 0;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.33;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-galactica .tech .progress-indicator i.active {
    opacity: 0.85;
}
.page-galactica .tech .other div {
    margin-top: 3rem;
}
.page-galactica .tech .other .logo {
    opacity: 0;
}
.page-galactica .tech .other .triggered .logo {
    -webkit-animation: fadeIn 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-galactica .tech.fixed .para {
    position: fixed;
    width: calc(100% - 3rem);
    max-width: 1200px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.page-galactica .tech.fixedbottom .para {
    position: absolute;
    bottom: 0;
}
@media (min-width: 400px) {
    .page-galactica .tech h2 {
        font-size: 150%;
    }
}
@media (min-width: 600px) {
    .page-galactica .tech {
        padding-bottom: 6rem;
    }
    .page-galactica .tech h3 {
        margin-bottom: 2rem;
    }
    .page-galactica .tech .other .container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .page-galactica .tech .other div {
        margin-top: 1rem;
        -ms-flex-preferred-size: calc(50% - 1.25rem);
        flex-basis: calc(50% - 1.25rem);
    }
    .page-galactica .tech .other .logo {
        width: auto;
        height: 3.5rem;
    }
}
@media (min-width: 720px) {
    .page-galactica .tech {
        padding-top: 11rem;
        padding-bottom: 8rem;
    }
    .page-galactica .tech::before,
    .page-galactica .tech::after {
        width: 10rem;
        height: 20rem;
    }
    .page-galactica .tech h2 {
        font-size: 200%;
    }
    .page-galactica .tech h3 {
        margin-top: 6rem;
        font-size: 150%;
    }
    .page-galactica .tech .intro {
        position: relative;
        z-index: 1;
        margin-bottom: -15vw;
    }
    .page-galactica .tech .intro p {
        max-width: 32em;
    }
    .page-galactica .tech .parallax-sizer {
        padding-top: 5vw;
    }
    .page-galactica .tech .maintechs {
        position: relative;
    }
    .page-galactica .tech .maintechs .bat {
        max-width: none;
        width: 47%;
        margin: 0 -9% 0 auto;
    }
    .page-galactica .tech .maintechs a {
        display: block;
    }
    .page-galactica .tech .maintechs .t {
        position: absolute;
        z-index: 1;
        top: 60%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
        margin: 0;
        width: 60%;
    }
    .page-galactica .tech .maintechs .t.tm {
        margin: 0;
    }
    .page-galactica .tech .maintechs p {
        width: 50%;
    }
    .page-galactica .tech .maintechs .circ {
        position: absolute;
        z-index: 1;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0;
        width: 42%;
        max-width: none;
    }
    .page-galactica .tech .maintechs .t.show {
        display: block;
    }
    .page-galactica .tech .maintechs .t.show .circ img {
        -webkit-animation: fadeIn 300ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: fadeIn 300ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .page-galactica .tech .maintechs .t.show .logo,
    .page-galactica .tech .maintechs .t.show p {
        -webkit-animation: slideInRight 500ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: slideInRight 500ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .page-galactica .tech .maintechs .t.hide {
        display: block;
    }
    .page-galactica .tech .maintechs .t.hide .circ img {
        -webkit-animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .page-galactica .tech .maintechs .t.hide .logo,
    .page-galactica .tech .maintechs .t.hide p {
        -webkit-animation: slideOutLeft 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: slideOutLeft 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .page-galactica .tech .maintechs .line.show {
        display: block;
        -webkit-animation: fadeIn 300ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: fadeIn 300ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .page-galactica .tech .maintechs .line.hide {
        display: block;
        -webkit-animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
}
@media (min-width: 900px) {
    .page-galactica .tech.fixed .para {
        width: calc(100% - 6rem);
    }
}
@media (min-width: 1000px) {
    .page-galactica .tech {
        padding-bottom: 10rem;
    }
    .page-galactica .tech h2 {
        font-size: 250%;
    }
    .page-galactica .tech h3 {
        font-size: 175%;
        margin-top: 3rem;
        margin-bottom: 4rem;
        color: #969696;
        border-bottom: solid 2px #4d4d4d;
    }
    .page-galactica .tech .other div {
        margin: 0;
        -ms-flex-preferred-size: calc(25% - 2rem);
        flex-basis: calc(25% - 2rem);
    }
    .page-galactica .tech .other .logo {
        height: 3.75rem;
    }
    .page-galactica .tech .other .triggered .logo {
        -webkit-animation: fadeInTo75 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: fadeInTo75 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
}
@media (min-width: 1100px) {
    .page-galactica .tech .parallax-sizer {
        padding-top: 3rem;
    }
    .page-galactica .tech .maintechs .logo {
        width: 13rem;
    }
    .page-galactica .tech .maintechs .bg .logo {
        width: 24rem;
    }
}
@media (min-width: 1200px) {
    .page-galactica .tech {
        padding-top: 15rem;
    }
    .page-galactica .tech .intro {
        position: absolute;
        top: 3rem;
        left: 0;
        width: 50%;
        margin: 0;
    }
    .page-galactica .tech::before,
    .page-galactica .tech::after {
        width: 18rem;
        height: 36rem;
    }
    .page-galactica .tech h2 {
        font-size: 300%;
    }
    .page-galactica .tech h3 {
        font-size: 225%;
    }
}
@media (min-width: 1400px) {
    .page-galactica .tech .progress-indicator {
        left: -3.33rem;
        right: auto;
        height: 100vh;
        max-height: 100%;
    }
    .page-galactica .tech .progress-indicator div {
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
@media (min-width: 1450px) {
    .page-galactica .tech .progress-indicator {
        left: -5.5rem;
    }
}
.page-galactica .quotes img {
    display: block;
    width: 80%;
    height: auto;
}
.page-galactica .quotes img.large {
    display: none;
}
.page-galactica .quotes .carousel-arrow {
    top: calc(32vw + 3rem);
    transition: opacity 125ms ease-out, background-color 125ms ease-out;
}
.page-galactica .quotes .carousel-arrow.left {
    border-color: #fe671f;
}
.page-galactica .quotes .carousel-arrow.left svg {
    fill: #fe671f;
}
.page-galactica .quotes .carousel-arrow.left:hover {
    background-color: #fe671f;
}
.page-galactica .quotes .carousel-arrow.left:hover svg {
    fill: #000;
}
.page-galactica .quotes .carousel-arrow.slick-disabled {
    opacity: 0;
    cursor: default;
}
.page-galactica .quotes .slide {
    position: relative;
    padding: 3rem 0;
}
.page-galactica .quotes blockquote {
    margin-top: -1em;
    font-size: 110%;
}
.page-galactica .quotes p {
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #fff;
    line-height: 1.9;
    font-size: inherit;
    padding: 0 1.5rem;
    opacity: 0;
}
.page-galactica .quotes p:last-child {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 1em;
    font-size: 90%;
}
.page-galactica .quotes p.triggered {
    -webkit-animation: slideInRight 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slideInRight 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.page-galactica .quotes .juani img {
    margin: 0 auto 0 0;
}
.page-galactica .quotes .juani blockquote {
    padding-right: 20%;
}
.page-galactica .quotes .juani p:last-child {
    color: #f9ff44;
}
.page-galactica .quotes .patty img {
    margin: 0 0 0 auto;
}
.page-galactica .quotes .patty blockquote {
    padding-left: 20%;
}
.page-galactica .quotes .patty p:last-child {
    color: #fe671f;
}
@media (min-width: 450px) {
    .page-galactica .quotes blockquote {
        font-size: 120%;
    }
}
@media (min-width: 720px) {
    .page-galactica .quotes {
        margin-bottom: 4rem;
    }
    .page-galactica .quotes .carousel-arrow {
        top: 78%;
    }
    .page-galactica .quotes .slide {
        padding: 0;
    }
    .page-galactica .quotes img {
        width: 60%;
        max-width: 900px;
    }
    .page-galactica .quotes img.small {
        display: none;
    }
    .page-galactica .quotes img.large {
        display: block;
    }
    .page-galactica .quotes blockquote {
        position: absolute;
        top: 65%;
        width: 17em;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-galactica .quotes p {
        padding: 0;
    }
    .page-galactica .quotes .juani blockquote {
        left: 50%;
        padding: 0;
    }
    .page-galactica .quotes .patty blockquote {
        padding: 0;
        right: 50%;
    }
}
@media (min-width: 800px) {
    .page-galactica .quotes blockquote {
        font-size: 140%;
    }
}
@media (min-width: 900px) {
    .page-galactica .quotes .juani blockquote {
        left: 55%;
    }
    .page-galactica .quotes .patty blockquote {
        right: 55%;
    }
}
@media (min-width: 1000px) {
    .page-galactica .quotes blockquote {
        font-size: 160%;
    }
    .page-galactica .quotes p:last-child {
        font-size: 75%;
        margin-top: 1.5em;
    }
}
@media (min-width: 1200px) {
    .page-galactica .quotes blockquote {
        font-size: 180%;
    }
}
@media (min-width: 1400px) {
    .page-galactica .quotes blockquote {
        font-size: 200%;
    }
}
@media (min-width: 1500px) {
    .page-galactica .quotes .carousel-arrow {
        top: 560px;
    }
    .page-galactica .quotes .juani blockquote {
        left: 825px;
    }
    .page-galactica .quotes .patty blockquote {
        right: 825px;
    }
}
@-webkit-keyframes gal-t1-in {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes gal-t1-in {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes gal-t2-in {
    0% {
        -webkit-transform: translateY(-50%) translateX(100%);
        transform: translateY(-50%) translateX(100%);
    }
    100% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
@keyframes gal-t2-in {
    0% {
        -webkit-transform: translateY(-50%) translateX(100%);
        transform: translateY(-50%) translateX(100%);
    }
    100% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
.page-nanoblade .top,
.page-graviton .top {
    position: relative;
    overflow: hidden;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .page-nanoblade .top,
    .page-graviton .top {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-nanoblade .top .bg,
.page-graviton .top .bg {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 107%;
    background-repeat: no-repeat;
}
.page-nanoblade .top .inner,
.page-graviton .top .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vw;
}
.page-nanoblade .top .logo,
.page-graviton .top .logo {
    width: 9rem;
    height: auto;
    margin: 4rem 0 1rem;
}
.page-nanoblade .top h1,
.page-graviton .top h1 {
    font-size: 170%;
    letter-spacing: 0.15em;
    line-height: 1.5;
}
.page-nanoblade .top h1 span:last-child,
.page-graviton .top h1 span:last-child {
    color: #fff;
}
.page-nanoblade .top .explore,
.page-graviton .top .explore {
    display: none;
}
.page-nanoblade .top p,
.page-graviton .top p {
    color: #fff;
    width: 50%;
    max-width: 32em;
    display: none;
    margin: 0;
}
.page-nanoblade .top .player,
.page-graviton .top .player {
    position: absolute;
    z-index: 1;
    bottom: 0;
    height: auto;
}
.page-nanoblade .top::after,
.page-graviton .top::after {
    position: absolute;
    z-index: 2;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    height: 10rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0), #000);
}
.page-nanoblade .top-mobile-intro,
.page-graviton .top-mobile-intro {
    padding: 3rem 1.5rem;
    padding-top: 0;
}
@media (min-width: 900px) {
    .page-nanoblade .top-mobile-intro,
    .page-graviton .top-mobile-intro {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-nanoblade .top-mobile-intro .inner,
.page-graviton .top-mobile-intro .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-nanoblade .top-mobile-intro p,
.page-graviton .top-mobile-intro p {
    color: #fff;
    margin: 1em 0 0 0;
}
.page-nanoblade .top .bg {
    background-image: url("../img/nanoblade-top-bg-small.png");
    background-size: 110% auto;
}
.page-nanoblade .top h1 span {
    color: #000;
}
.page-nanoblade .top .player {
    right: 8%;
    width: 55%;
}
.page-graviton .top .bg {
    background-image: url("../img/graviton-top-bg-small.png");
    background-size: 100% auto;
}
.page-graviton .top h1 span {
    color: #f9ff44;
}
.page-graviton .top p {
    width: 37.5%;
}
.page-graviton .top .player {
    right: -3%;
    width: 56%;
}
@media (min-width: 400px) {
    .page-nanoblade .top .logo,
    .page-graviton .top .logo {
        width: 10rem;
        margin-top: 4rem;
    }
    .page-nanoblade .top h1,
    .page-graviton .top h1 {
        font-size: 200%;
    }
}
@media (min-width: 500px) {
    .page-nanoblade .top .logo,
    .page-graviton .top .logo {
        width: 11rem;
        margin-top: 6rem;
    }
    .page-nanoblade .top h1,
    .page-graviton .top h1 {
        font-size: 220%;
    }
}
@media (min-width: 600px) {
    .page-nanoblade .top .logo,
    .page-graviton .top .logo {
        width: 14rem;
        margin-top: 9rem;
    }
    .page-nanoblade .top h1,
    .page-graviton .top h1 {
        font-size: 260%;
    }
}
@media (min-width: 720px) {
    .page-nanoblade .top .inner,
    .page-graviton .top .inner {
        min-height: 75vw;
    }
    .page-nanoblade .top .logo,
    .page-graviton .top .logo {
        margin: 4rem 0 0 0;
    }
    .page-nanoblade .top h1,
    .page-graviton .top h1 {
        margin: 0.67em 0;
    }
    .page-nanoblade .top p,
    .page-graviton .top p {
        display: block;
    }
    .page-nanoblade .top-mobile-intro,
    .page-graviton .top-mobile-intro {
        display: none;
    }
    .page-nanoblade .top .bg {
        background-size: 100% auto;
        background-image: url("../img/nanoblade-top-bg-large.jpg");
    }
    .page-nanoblade .top .player {
        right: 4%;
        width: 44%;
        bottom: -6%;
    }
    .page-graviton .top .bg {
        background-size: 100% auto;
        background-position: 50% 50%;
        background-image: url("../img/graviton-top-bg-large.jpg");
    }
    .page-graviton .top .player {
        bottom: -18%;
        width: 46%;
        right: 10%;
    }
}
@media (min-width: 900px) {
    .page-nanoblade .top .logo,
    .page-graviton .top .logo {
        width: 16rem;
        margin-top: 5rem;
    }
    .page-nanoblade .top h1,
    .page-graviton .top h1 {
        font-size: 320%;
    }
    .page-nanoblade .top .player {
        right: 6%;
    }
    .page-graviton .top .player {
        width: 49%;
        right: 8%;
    }
}
@media (min-width: 1000px) {
    .page-nanoblade .top .explore,
    .page-graviton .top .explore {
        display: inline-block;
        margin-top: 3rem;
    }
    .page-nanoblade .top .player {
        right: 8%;
    }
}
@media (min-width: 1120px) {
    .page-nanoblade .top .inner,
    .page-graviton .top .inner {
        min-height: 850px;
    }
    .page-nanoblade .top h1,
    .page-graviton .top h1 {
        font-size: 420%;
        margin: 0.5em 0;
    }
    .page-nanoblade .top .logo {
        margin-top: calc(10vw - 3rem);
    }
    .page-nanoblade .top .player {
        right: 10%;
        width: 460px;
    }
    .page-graviton .top .logo {
        margin-top: 7rem;
    }
    .page-graviton .top .player {
        width: 510px;
    }
}
@media (min-width: 1700px) {
    .page-nanoblade .top .logo {
        margin-top: 130px;
    }
}
.nb-g-t {
    position: relative;
    padding: 3rem 1.5rem;
    padding-bottom: 0;
    color: #fff;
}
@media (min-width: 900px) {
    .nb-g-t {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.nb-g-t .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.nb-g-t h2 {
    letter-spacing: 0.25em;
    font-size: 125%;
    padding: 0;
    margin: 0;
    line-height: 1.8;
    padding-bottom: 1.25em;
}
.nb-g-t h2::after {
    width: 1.5em;
    height: 0.2em;
}
.nb-g-t.nano h2::after {
    background-color: #be152d;
}
.nb-g-t.grav h2::after {
    background-color: #f9ff44;
}
.nb-g-t p {
    line-height: 1.8;
}
.nb-g-t p strong {
    display: block;
}
.nb-g-t .racket {
    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 3rem auto -3rem auto;
}
.nb-g-t .maintechs .t {
    margin-top: 4rem;
}
.nb-g-t .maintechs .circ {
    position: relative;
    width: 65%;
    max-width: 280px;
    margin: 2rem auto;
}
.nb-g-t .maintechs .circ:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.nb-g-t .maintechs .circ img,
.nb-g-t .maintechs .circ::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.nb-g-t .maintechs .circ img {
    z-index: 1;
    height: auto;
}
.nb-g-t .maintechs .circ::after {
    z-index: 0;
    content: "";
    height: 100%;
    border-radius: 50%;
    background-color: #000;
}
.nb-g-t .maintechs .logo {
    height: 1.4rem;
    width: auto;
}
.nb-g-t .maintechs a {
    display: none;
    position: absolute;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    transition: background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: #fff;
    box-shadow: 0 0 1.33rem #fff;
    transition: background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nb-g-t .maintechs a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 45%;
    height: 45%;
    fill: #000;
    transition: fill 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nb-g-t .maintechs .dot,
.nb-g-t .maintechs .line {
    display: none;
    position: absolute;
}
.nb-g-t .maintechs .dot.fadein,
.nb-g-t .maintechs .line.fadein {
    -webkit-animation: fadeIn 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.nb-g-t .maintechs .dot.fadeout,
.nb-g-t .maintechs .line.fadeout {
    -webkit-animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.nb-g-t .maintechs .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.nb-g-t.nano .maintechs .dot,
.nb-g-t.nano .maintechs .line {
    background-color: #be152d;
}
.nb-g-t.grav .maintechs .dot,
.nb-g-t.grav .maintechs .line {
    background-color: #f9ff44;
}
.nb-g-t.nano .maintechs a.active {
    background-color: #be152d;
    box-shadow: 0 0 1.33rem #be152d;
}
.nb-g-t.nano .maintechs a.active svg {
    fill: #fff;
}
.nb-g-t.nano .maintechs a:nth-of-type(1) {
    top: 4%;
    left: 33%;
}
.nb-g-t.nano .maintechs a:nth-of-type(2) {
    top: 54%;
    left: 43%;
}
.nb-g-t.nano .maintechs a:nth-of-type(3) {
    top: 59%;
    left: 74%;
}
.nb-g-t.nano .maintechs a:nth-of-type(4) {
    top: 73%;
    left: 86%;
}
.nb-g-t.grav .maintechs a.active {
    background-color: #f9ff44;
    box-shadow: 0 0 1.33rem #f9ff44;
}
.nb-g-t.grav .maintechs a:nth-of-type(1) {
    top: 44%;
    left: 10%;
}
.nb-g-t.grav .maintechs a:nth-of-type(2) {
    top: 56.5%;
    left: 31%;
}
.nb-g-t.grav .maintechs a:nth-of-type(3) {
    top: 63%;
    left: 76%;
}
.nb-g-t.grav .maintechs a:nth-of-type(4) {
    top: 78%;
    left: 88%;
}
.nb-g-t .parallax-sizer {
    position: relative;
}
.nb-g-t .progress-indicator {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    height: 100%;
}
.nb-g-t .progress-indicator div {
    position: absolute;
    bottom: 27%;
    right: 0;
}
.nb-g-t .progress-indicator i {
    display: block;
    width: 6px;
    height: 6px;
    margin: 16px 0;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.33;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nb-g-t .progress-indicator i.active {
    opacity: 0.85;
}
.nb-g-t.nano .progress-indicator div {
    bottom: 30%;
}
.nb-g-t.fixed .para {
    position: fixed;
    width: calc(100% - 3rem);
    max-width: 1200px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.nb-g-t.fixedbottom .para {
    position: absolute;
    width: 100%;
    bottom: 0;
}
.nb-g-t .othertechs {
    padding-top: 3rem;
    padding-bottom: 5rem;
}
.nb-g-t .othertechs h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 100%;
}
.nb-g-t .othertechs img {
    display: block;
    width: auto;
    height: 2.33rem;
    opacity: 0.5;
    margin-top: 2rem;
}
.nb-g-t .othertechs img.wide {
    height: 1.33rem;
}
@media (min-width: 500px) {
    .nb-g-t .othertechs {
        padding-top: 5rem;
    }
    .nb-g-t .othertechs h3 {
        font-size: 120%;
    }
    .nb-g-t .othertechs img {
        height: 2.75rem;
        margin-top: 2.5rem;
    }
    .nb-g-t .othertechs img.wide {
        height: 1.66rem;
    }
}
@media (min-width: 600px) {
    .nb-g-t .othertechs {
        padding-top: 10rem;
        padding-bottom: 2rem;
    }
    .nb-g-t .othertechs img {
        display: inline-block;
        vertical-align: middle;
        margin-left: 3.5rem;
        height: 2rem;
    }
    .nb-g-t .othertechs img:first-of-type {
        margin-left: 0;
    }
    .nb-g-t .othertechs img.wide {
        height: 1rem;
    }
}
@media (min-width: 850px) {
    .nb-g-t .othertechs {
        padding-bottom: 4rem;
    }
    .nb-g-t .othertechs h3 {
        font-size: 140%;
    }
    .nb-g-t .othertechs img {
        margin-left: 4.5rem;
        height: 2.66rem;
    }
    .nb-g-t .othertechs img:first-of-type {
        margin-left: 0;
    }
    .nb-g-t .othertechs img.wide {
        height: 1.4rem;
    }
}
@media (min-width: 1100px) {
    .nb-g-t .othertechs {
        padding-bottom: 5rem;
    }
    .nb-g-t .othertechs img {
        margin-left: 5.5rem;
        height: 2.75rem;
    }
    .nb-g-t .othertechs img:first-of-type {
        margin-left: 0;
    }
    .nb-g-t .othertechs img.wide {
        height: 1.66rem;
    }
}
@media (min-width: 400px) {
    .nb-g-t h2 {
        font-size: 150%;
    }
}
@media (min-width: 720px) {
    .nb-g-t h2 {
        font-size: 200%;
        position: absolute;
        z-index: 1;
    }
    .nb-g-t .parallax-sizer {
        padding-top: 3rem;
    }
    .nb-g-t .maintechs {
        position: relative;
        height: 550px;
    }
    .nb-g-t .maintechs .racket-contain {
        position: absolute;
        right: 0;
        top: 50%;
        width: 440px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .nb-g-t .maintechs .racket {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .nb-g-t .maintechs a {
        display: block;
    }
    .nb-g-t .maintechs .t {
        position: absolute;
        z-index: 1;
        top: 10.5rem;
        left: 0;
        display: none;
        margin: 3rem 0 0 0;
        width: 60%;
    }
    .nb-g-t .maintechs .t.tm {
        margin: 0;
    }
    .nb-g-t .maintechs p {
        max-width: 24em;
    }
    .nb-g-t .maintechs .circ {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        width: 165px;
        max-width: none;
    }
    .nb-g-t .maintechs .logo {
        margin-top: 15.5rem;
        height: 1.6rem;
        width: auto;
    }
    .nb-g-t .maintechs .t.show {
        display: block;
    }
    .nb-g-t .maintechs .t.show .circ img {
        -webkit-animation: fadeIn 300ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: fadeIn 300ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .nb-g-t .maintechs .t.show .logo,
    .nb-g-t .maintechs .t.show p {
        -webkit-animation: slideInRight 500ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: slideInRight 500ms 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .nb-g-t .maintechs .t.hide {
        display: block;
    }
    .nb-g-t .maintechs .t.hide .circ img {
        -webkit-animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: fadeOut 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .nb-g-t .maintechs .t.hide .logo,
    .nb-g-t .maintechs .t.hide p {
        -webkit-animation: slideOutLeft 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: slideOutLeft 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .nb-g-t .maintechs .dot,
    .nb-g-t .maintechs .line {
        display: block;
    }
}
@media (min-width: 900px) {
    .nb-g-t {
        padding-bottom: 0;
    }
    .nb-g-t .maintechs {
        height: 575px;
    }
    .nb-g-t .maintechs .racket-contain {
        width: 550px;
    }
    .nb-g-t .maintechs .circ {
        width: 200px;
    }
    .nb-g-t .maintechs .t {
        top: 9.5rem;
    }
    .nb-g-t .maintechs .logo {
        margin-top: 18rem;
        height: 2rem;
    }
    .nb-g-t.fixed .para {
        width: calc(100% - 6rem);
    }
}
@media (min-width: 1000px) {
    .nb-g-t h2 {
        font-size: 250%;
    }
    .nb-g-t .maintechs {
        height: 615px;
    }
    .nb-g-t .maintechs .t {
        top: 12rem;
    }
    .nb-g-t .maintechs .racket-contain {
        width: 600px;
    }
}
@media (min-width: 1100px) {
    .nb-g-t .maintechs {
        height: 645px;
    }
    .nb-g-t .maintechs .racket-contain {
        width: 700px;
    }
    .nb-g-t .maintechs .circ {
        width: 230px;
    }
    .nb-g-t .maintechs .logo {
        margin-top: 20.5rem;
    }
}
@media (min-width: 1200px) {
    .nb-g-t .parallax-sizer {
        padding-top: 4rem;
    }
}
@media (min-width: 1400px) {
    .nb-g-t .progress-indicator {
        left: -3.33rem;
        right: auto;
        height: 100vh;
        max-height: 100%;
    }
    .nb-g-t .progress-indicator div {
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}
@media (min-width: 1450px) {
    .nb-g-t .progress-indicator {
        left: -5.5rem;
    }
}
.nb-g-r {
    position: relative;
    margin-top: 200px;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}
.nb-g-r::before {
    position: absolute;
    z-index: 0;
    content: "";
    bottom: 100%;
    right: 0;
    width: 300px;
    height: 400px;
    background-size: 100% auto;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
.nb-g-r .push-in {
    padding: 3rem 1.5rem;
    padding-bottom: 0;
}
@media (min-width: 900px) {
    .nb-g-r .push-in {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.nb-g-r h2 {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.nb-g-r h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 120%;
}
.nb-g-r.nano {
    border-bottom: solid 7px #be152d;
}
.nb-g-r.nano::before {
    background-image: url("../img/nanoblade-tech-bg-small.png");
}
.nb-g-r.nano h3 {
    color: #be152d;
}
.nb-g-r.grav {
    border-bottom: solid 7px #0146e4;
}
.nb-g-r.grav::before {
    background-image: url("../img/graviton-tech-bg-small.png");
}
.nb-g-r.grav h3 {
    color: #f9ff44;
}
.nb-g-r .carousel-arrow {
    display: none;
    border: solid 1px #fff;
    background-color: transparent;
}
.nb-g-r .carousel-arrow:hover {
    background-color: #fff;
}
.nb-g-r .carousel-small {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.nb-g-r .carousel-small .slide {
    padding: 3rem 1.5rem;
    outline: none;
}
.nb-g-r .carousel-small .constrain {
    position: relative;
    max-width: 450px;
    margin: 0 auto;
}
.nb-g-r .carousel-small img {
    display: block;
    width: 30%;
    height: auto;
}
.nb-g-r .carousel-small .copy {
    position: absolute;
    left: 38%;
    right: 0;
    bottom: 0;
}
.nb-g-r .carousel-small p {
    margin: 0.75em 0 1.5em 0;
}
.nb-g-r .carousel-small a {
    font-size: 80%;
}
.nb-g-r .carousel-large {
    display: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: 5rem;
}
.nb-g-r .carousel-large .slide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    outline: none;
}
@media (min-width: 900px) {
    .nb-g-r .carousel-large .slide {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.nb-g-r .carousel-large .slide::after {
    content: "";
    display: table;
    clear: both;
}
.nb-g-r .carousel-large .constrain {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.nb-g-r .carousel-large .card {
    background-color: #121212;
    width: calc(50% - 0.75rem);
    float: left;
    position: relative;
    padding: 3rem;
}
.nb-g-r .carousel-large .card:nth-child(2) {
    float: right;
}
.nb-g-r .carousel-large img {
    display: block;
    width: 30%;
    height: auto;
}
.nb-g-r .carousel-large .copy {
    position: absolute;
    left: 40%;
    bottom: 3rem;
    right: 3rem;
}
@media (min-width: 380px) {
    .nb-g-r .carousel-arrow {
        display: block;
    }
    .nb-g-r .carousel-small .slide {
        padding: 3rem;
    }
    .nb-g-r .carousel-small .copy {
        left: 39%;
        right: 1rem;
    }
}
@media (min-width: 420px) {
    .nb-g-r .carousel-small h3 {
        font-size: 140%;
    }
    .nb-g-r .carousel-small a {
        font-size: 90%;
    }
}
@media (min-width: 460px) {
    .nb-g-r .carousel-small .slide {
        padding: 3rem 4rem;
    }
    .nb-g-r .carousel-small img {
        width: 33.3%;
    }
    .nb-g-r .carousel-small .copy {
        left: 44%;
        bottom: 3rem;
    }
    .nb-g-r .carousel-small h3 {
        font-size: 160%;
    }
    .nb-g-r .carousel-small p {
        margin: 1.5rem 0 3rem 0;
    }
}
@media (min-width: 540px) {
    .nb-g-r .carousel-small h3 {
        font-size: 180%;
    }
    .nb-g-r .carousel-small p {
        margin: 1.75rem 0 5rem 0;
    }
}
@media (min-width: 850px) {
    .nb-g-r {
        background-size: auto 100%;
        background-position: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 5vw;
        padding-bottom: 6rem;
        margin-top: -2vw;
    }
    .nb-g-r::before {
        display: none;
    }
    .nb-g-r.nano {
        border-bottom: none;
        background-image: url("../img/nanoblade-tech-bg-large.png");
    }
    .nb-g-r.grav {
        border-bottom: none;
        background-image: url("../img/graviton-tech-bg-large.png");
    }
    .nb-g-r .carousel-small {
        display: none;
    }
    .nb-g-r .carousel-large {
        display: block;
    }
}
@media (min-width: 900px) {
    .nb-g-r {
        margin-left: -3rem;
        margin-right: -3rem;
        padding-bottom: 8rem;
    }
    .nb-g-r .carousel-large {
        margin-top: 0;
    }
    .nb-g-r .carousel-large h3 {
        font-size: 130%;
    }
}
@media (min-width: 1000px) {
    .nb-g-r .carousel-large h3 {
        font-size: 160%;
    }
    .nb-g-r .carousel-large p {
        margin-bottom: 3em;
    }
}
@media (min-width: 1100px) {
    .nb-g-r .carousel-large .copy {
        left: 41%;
    }
    .nb-g-r .carousel-large h3 {
        font-size: 180%;
    }
    .nb-g-r .carousel-large p {
        margin-bottom: 4em;
    }
}
@media (min-width: 1150px) {
    .nb-g-r .carousel-large .card {
        padding: 3rem 4rem;
    }
    .nb-g-r .carousel-large img {
        width: 33.3%;
    }
    .nb-g-r .carousel-large .copy {
        left: 45%;
        right: 4rem;
        bottom: 5rem;
    }
}
@media (min-width: 1200px) {
    .nb-g-r .carousel-large .copy {
        bottom: 6rem;
    }
    .nb-g-r .carousel-large h3 {
        font-size: 190%;
    }
}
@media (min-width: 1280px) {
    .nb-g-r {
        margin-left: calc(-3rem - ((100vw - 1280px) / 2));
        margin-right: calc(-3rem - ((100vw - 1280px) / 2));
    }
}
.nb-g-wr {
    position: relative;
    background-color: #121212;
    padding: 3rem 1.5rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 2;
    color: #fff;
}
@media (min-width: 900px) {
    .nb-g-wr {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.nb-g-wr .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.nb-g-wr .inner::after {
    content: "";
    display: table;
    clear: both;
}
.nb-g-wr h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 140%;
    line-height: 1.5;
    margin-top: 0.5em;
}
.nb-g-wr p {
    line-height: 1.8;
}
.nb-g-wr .chart-small {
    display: block;
    width: 100%;
    height: auto;
    margin: 4rem auto;
    max-width: 450px;
}
.nb-g-wr .chart-large {
    display: none;
    width: 47.5%;
    height: auto;
}
.nb-g-wr ul {
    margin: 0;
    font-size: 80%;
}
.nb-g-wr ul li {
    font-size: inherit;
    margin: 0 0 1em 0;
    padding: 0;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.nb-g-wr ul li:last-child {
    margin-bottom: 0;
}
.nb-g-wr ul i {
    font-style: inherit;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 50%;
    text-align: center;
    font-style: normal;
    margin-right: 1.25em;
}
.nb-g-wr.nano ul i {
    color: #fff;
    background-color: #be152d;
}
.nb-g-wr.grav ul i {
    color: #000;
    background-color: #f9ff44;
}
@media (min-width: 550px) {
    .nb-g-wr h3 {
        font-size: 160%;
    }
}
@media (min-width: 600px) {
    .nb-g-wr {
        padding-bottom: 8rem;
    }
    .nb-g-wr .chart-small {
        margin: 5rem auto;
    }
}
@media (min-width: 900px) {
    .nb-g-wr {
        padding-top: 8rem;
        padding-bottom: 9rem;
    }
    .nb-g-wr .chart-small {
        display: none;
    }
    .nb-g-wr .chart-large {
        display: block;
    }
    .nb-g-wr .copy {
        position: absolute;
        left: 60%;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .nb-g-wr h3 {
        margin-top: 0;
    }
    .nb-g-wr p {
        max-width: 26em;
        margin-bottom: 2.5em;
    }
}
@media (min-width: 1000px) {
    .nb-g-wr h3 {
        font-size: 210%;
    }
}
@media (min-width: 1100px) {
    .nb-g-wr {
        padding-top: 9.5rem;
        padding-bottom: 9.5rem;
    }
}
.page-products .pagebody {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-products .pagebody {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-products .pagebody .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-products .desk-cats {
    display: none;
    padding-top: 1.995rem;
    padding-bottom: 1.995rem;
}
.page-products .desk-cats a {
    display: inline-block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 75%;
    width: 12em;
    line-height: 3.5em;
    text-align: center;
    color: #000;
    border: solid 1px #aaa;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
    margin-right: 1.3em;
}
.page-products .desk-cats a:hover {
    background-position: 0% 0%;
}
.page-products .desk-cats a:last-child {
    margin-right: 0;
}
.page-products .desk-cats a.active {
    background-color: #000;
    background-image: none;
    border-color: #000;
    color: #fff;
}
@media (min-width: 1000px) {
    .page-products .desk-cats a {
        font-size: 85%;
    }
}
@media (min-width: 1100px) {
    .page-products .desk-cats a {
        font-size: 90%;
    }
}
.page-products .desk-filters {
    display: none;
    background-color: #f6f6f6;
    padding: 1.995rem 3rem 3.375rem 3rem;
    color: #4e4e4e;
}
.page-products .desk-filters .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-products .desk-filters .filter {
    width: calc((100% - 6rem) / 4);
    position: relative;
}
@media (min-width: 900px) {
    .page-products .desk-filters .filter {
        width: calc((100% - 8rem) / 4);
    }
}
.page-products .desk-filters .filter .head {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.2em 1em 1em 1em;
    transition: background-color 125ms ease-out, box-shadow 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-products .desk-filters .filter .head svg {
    position: absolute;
    right: 1em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0.75em;
    height: 0.75em;
    fill: #4e4e4e;
    transition: -webkit-transform 125ms ease-out;
    transition: transform 125ms ease-out;
    transition: transform 125ms ease-out, -webkit-transform 125ms ease-out;
}
.page-products .desk-filters .filter .head:hover {
    background-color: #e9e9e9;
}
.page-products .desk-filters .filter .head::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #aaa;
    transition: background-color 125ms ease-out, height 125ms ease-out;
}
.page-products .desk-filters .filter .current {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    font-size: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 1em;
}
.page-products .desk-filters .filter ul {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 0 1em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease-out, box-shadow 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-products .desk-filters .filter li {
    padding: 0.5em 0;
    border-bottom: solid 1px #dedede;
}
.page-products .desk-filters .filter li:first-child {
    padding-top: 1em;
}
.page-products .desk-filters .filter li:last-child {
    border-bottom: none;
    padding-bottom: 1em;
}
.page-products .desk-filters .filter .clear {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    font-size: 70%;
    margin-top: 0.5em;
    margin-bottom: 1.25em;
}
.page-products .desk-filters .filter .clear:hover {
    text-decoration: underline;
}
.page-products .desk-filters .filter.open a.head {
    background-color: #e9e9e9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}
.page-products .desk-filters .filter.open a.head svg {
    -webkit-transform: translateY(-50%) rotateX(180deg);
    transform: translateY(-50%) rotateX(180deg);
}
.page-products .desk-filters .filter.open ul {
    max-height: 42em !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}
.page-products .desk-filters .filter.active .head::after {
    background-color: #cf0;
    height: 3px;
}
@media (min-width: 1100px) {
    .page-products .desk-filters .filter {
        width: calc((100% - 9rem) / 6);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-products .desk-filters .filter {
        width: calc((100% - 12rem) / 6);
    }
}
@media (min-width: 1100px) {
    .page-products .desk-filters .filter ul {
        width: 160%;
    }
}
.page-products .mob-filters {
    font-size: 80%;
}
.page-products .mob-filters .button {
    float: left;
    width: 50%;
    background-color: #f6f6f6;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
    transition: background-position 125ms ease-out, color 125ms ease-out;
    color: #4e4e4e;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1.5rem;
    text-align: center;
}
.page-products .mob-filters .button:hover {
    background-position: 0% 0%;
}
.page-products .mob-filters .button svg {
    display: inline-block;
    vertical-align: -20%;
    margin-left: 1em;
    width: 1.25em;
    height: 1.25em;
    fill: #4e4e4e;
    transition: fill 125ms ease-out;
}
.page-products .mob-filters .button:hover {
    color: #000;
}
.page-products .mob-filters .button:hover svg {
    fill: #000;
}
.page-products .mob-filters .filter {
    border-left: solid 1px #dedede;
}
.page-products .mob-filters .category {
    position: relative;
}
.page-products .mob-filters select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.page-products .mob-filters.nofilters .button {
    float: none;
    display: block;
    width: 100%;
}
.page-products .modal {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 100%;
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
    min-width: 320px;
    background-color: #fff;
    color: #4e4e4e;
    transition: left 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-products .modal.open {
    left: 0;
}
.page-products .modal > .inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.page-products .modal h3,
.page-products .modal .clearall,
.page-products .modal .button,
.page-products .modal .filter .head {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
}
.page-products .modal h3 {
    position: relative;
    background-color: #000;
    color: #fff;
    padding: 1.5rem;
}
.page-products .modal h3 a {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-products .modal h3 svg {
    fill: #fff;
    width: 1.33em;
    height: 1.33em;
}
.page-products .modal .clearall {
    display: block;
    font-size: 90%;
    padding: 1.5rem;
    color: inherit;
    background-color: #f6f6f6;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
    transition: background-position 125ms ease-out, color 125ms ease-out;
}
.page-products .modal .clearall:hover {
    background-position: 0% 0%;
}
.page-products .modal .clearall:hover {
    color: #000;
}
.page-products .modal .clearall.hide {
    display: none;
}
.page-products .modal .button {
    display: block;
    font-size: 90%;
    color: #4e4e4e;
    border: solid 1px #4e4e4e;
    margin: 1.5rem;
    padding: 1.25em 0;
    text-align: center;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
    transition: background-position 125ms ease-out, color 125ms ease-out, border-color 125ms ease-out;
}
.page-products .modal .button:hover {
    background-position: 0% 0%;
}
.page-products .modal .button:hover {
    color: #000;
    border-color: #000;
}
.page-products .modal .filter {
    padding: 0.75rem 1.5rem;
    border-bottom: solid 1px #dedede;
}
.page-products .modal .filter .head {
    font-size: 90%;
    padding: 0.75rem 0;
}
.page-products .modal .filter .head .current {
    font-size: 1rem;
    display: block;
    font-weight: normal;
    color: rgba(78, 78, 78, 0.8);
    text-transform: none;
    letter-spacing: 0;
    padding: 0.5em 0;
    margin-bottom: -0.5em;
    width: calc(100% - 2.25em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-products .modal .filter .head .current:empty {
    display: none;
}
.page-products .modal .filter a.head {
    display: block;
    position: relative;
    color: inherit;
    transition: color 125ms ease-out;
}
.page-products .modal .filter a.head svg {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.25em;
    height: 1.25em;
    fill: #4e4e4e;
    transition: fill 125ms ease-out, -webkit-transform 125ms ease-out;
    transition: fill 125ms ease-out, transform 125ms ease-out;
    transition: fill 125ms ease-out, transform 125ms ease-out, -webkit-transform 125ms ease-out;
}
.page-products .modal .filter a.head:hover {
    color: #000;
}
.page-products .modal .filter a.head:hover svg {
    fill: #000;
}
.page-products .modal .filter ul {
    font-size: 110%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-products .modal .filter ul li:first-child {
    margin-top: 0.5em;
}
.page-products .modal .filter ul li:last-child {
    margin-bottom: 1em;
}
.page-products .modal .filter .clear {
    display: none;
}
.page-products .modal .filter.open a.head svg {
    -webkit-transform: translateY(-50%) rotateX(180deg);
    transform: translateY(-50%) rotateX(180deg);
}
.page-products .modal .filter.open ul {
    max-height: 24em;
}
.page-products input[type="radio"],
.page-products input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}
.page-products input[type="radio"] ~ label,
.page-products input[type="checkbox"] ~ label {
    display: block;
    position: relative;
    padding: 0.6em 0 0.6em 2.1em;
    cursor: pointer;
}
.page-products input[type="radio"] ~ label::before,
.page-products input[type="checkbox"] ~ label::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 1.33em;
    height: 1.33em;
    border: 1px solid #aaa;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: border-color 125ms ease-out;
    background-color: #fff;
}
.page-products input[type="radio"] ~ label:hover::before,
.page-products input[type="checkbox"] ~ label:hover::before {
    border-color: #4e4e4e;
}
.page-products input[type="radio"] ~ label::before {
    border-radius: 50%;
    background-image: radial-gradient(#cf0 40%, #a3cc00, 45%, #fff 50%);
    background-size: 0% 0%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: border-color 125ms ease-out, background-size 125ms ease-out;
}
.page-products input[type="radio"]:checked ~ label::before {
    background-size: 100% 100%;
}
.page-products input[type="checkbox"] ~ label::before {
    background-position: 50% 50%;
    background-size: 65% auto;
    background-repeat: no-repeat;
    transition: border-color 125ms ease-out, background-color 125ms ease-out;
}
.page-products input[type="checkbox"]:checked ~ label::before {
    background-color: #cf0;
    background-image: url("../img/icons/tick.svg");
}
@media (min-width: 900px) {
    .page-products .mob-filters {
        display: none;
    }
    .page-products .desk-cats,
    .page-products .desk-filters {
        display: block;
    }
}
.page-products .p-grid {
    min-height: 50vh;
    padding-top: 1.5rem;
}
.page-products .p-grid .grid {
    padding: 2em 0 4em 0;
}
.page-products .p-grid .top p {
    margin-top: 0;
}
.page-products .p-grid .top p:last-child {
    margin-bottom: 0.75em;
}
.page-products .p-grid .top .num-products {
    font-weight: bold;
}
.page-products .p-grid .top .compare {
    margin-top: 1.5em;
}
.page-products .p-grid .top .compare::after {
    content: "";
    display: table;
    clear: both;
}
.page-products .p-grid .top .compare span {
    float: left;
    width: 10em;
}
.page-products .p-grid .top .compare span.error {
    color: #e4002b;
    font-weight: bold;
}
.page-products .p-grid .top .compare a {
    float: right;
    margin-top: 0.1em;
    color: #000;
    transition: background-position 125ms ease-out, opacity 125ms ease-out;
}
.page-products .p-grid .top .compare a.inactive {
    opacity: 0.33;
    background: #fff;
    cursor: default;
}
.page-products .product-storage {
    display: none;
}
.page-products .no-products.hidden {
    display: none;
}
.page-products .p-grid .product {
    width: calc((100% - 1.5rem) / 1);
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
}
@media (min-width: 900px) {
    .page-products .p-grid .product {
        width: calc((100% - 2rem) / 1);
    }
}
.page-products .p-grid .product.compare {
    padding-bottom: 3.75em;
}
.page-products .p-grid .product img {
    width: 100%;
    height: auto;
}
.page-products .p-grid .product img.over {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 187.5ms ease-out;
    transition-delay: 125ms;
}
.page-products .p-grid .product h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.page-products .p-grid .product h3 {
    position: relative;
    color: #000;
    font-size: 120%;
    line-height: 1.8;
    margin: 1em 0 0.75em 0;
    width: 90%;
    width: calc(100% - 2em);
    left: 0;
    transition: left 187.5ms ease-out;
    transition-delay: 0ms;
}
.page-products .p-grid .product h3 a {
    color: inherit;
    text-decoration: none;
}
.page-products .p-grid .product h3:before {
    content: "";
    position: absolute;
    left: -2em;
    top: 50%;
    width: 1.25em;
    height: 0.33em;
    background-color: #cf0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-products .p-grid .product p {
    line-height: 1.8;
}
.page-products .p-grid .product .subtitle {
    font-weight: bold;
    margin: 0 0 0.15em 0;
}
.page-products .p-grid .product .desc {
    margin: 0;
}
.page-products .p-grid .product .bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
.page-products .p-grid .product .compare {
    font-weight: bold;
    margin-bottom: 0;
}
.page-products .p-grid .product:hover img.over {
    opacity: 1;
    transition-delay: 0ms;
}
.page-products .p-grid .product:hover h3 {
    left: 2em;
    transition-delay: 125ms;
}
@media (min-width: 400px) {
    .page-products .p-grid .top .compare a {
        margin-top: 0;
    }
}
@media (min-width: 475px) {
    .page-products .p-grid .top .compare span {
        width: auto;
    }
    .page-products .p-grid .top .compare a {
        margin-top: -1.1em;
    }
}
@media (min-width: 550px) {
    .page-products .p-grid {
        padding-bottom: 5em;
    }
    .page-products .p-grid .product {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 550px) and (min-width: 900px) {
    .page-products .p-grid .product {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 550px) {
    .page-products .p-grid .product.compare {
        padding-bottom: 3.75em;
    }
    .page-products .p-grid .product p {
        max-width: 95%;
    }
}
@media (min-width: 650px) {
    .page-products .p-grid {
        padding-top: 2.625rem;
    }
    .page-products .p-grid .top::after {
        content: "";
        display: table;
        clear: both;
    }
    .page-products .p-grid .top p:first-child {
        float: left;
        margin: 0;
    }
    .page-products .p-grid .top p.compare {
        float: right;
        width: 70%;
        text-align: right;
        margin: 0;
    }
    .page-products .p-grid .top p.compare a,
    .page-products .p-grid .top p.compare span {
        float: none;
    }
    .page-products .p-grid .top p.compare a {
        margin-left: 1em;
    }
}
@media (min-width: 720px) {
    .page-products .pagebody p {
        font-size: 1rem;
    }
}
@media (min-width: 1000px) {
    .page-products .p-grid .product {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 1000px) and (min-width: 900px) {
    .page-products .p-grid .product {
        width: calc((100% - 6rem) / 3);
    }
}
.page-product .main {
    background-color: #fff;
}
.page-product .main h1 {
    color: #000;
    font-size: 140%;
    margin-bottom: 0.9em;
}
.page-product .main p {
    line-height: 1.75;
}
.page-product .main .details {
    padding: 1.5rem;
}
.page-product .main .details .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-product .main .cell {
    width: calc((100% - 1.5rem) / 1);
    width: 100%;
}
@media (min-width: 900px) {
    .page-product .main .cell {
        width: calc((100% - 2rem) / 1);
    }
}
.page-product .main .subtitle {
    font-weight: bold;
    margin: 0;
}
.page-product .main .product-data {
    color: #747474;
}
.page-product .main .colour {
    display: inline-block;
    vertical-align: -18%;
    width: 18px;
    height: 18px;
    border: solid 1px #747474;
    border-radius: 50%;
    margin-left: 0.45em;
}
.page-product .main .desc {
    margin-top: 0;
}
.page-product .main .ranges {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 2.5rem;
}
.page-product .main .ranges div {
    position: relative;
    display: inline-block;
    width: 35%;
    margin-right: 3rem;
    max-width: 16em;
}
.page-product .main .ranges.num3 div {
    display: block;
}
.page-product .main .ranges.num3 div:nth-child(1),
.page-product .main .ranges.num3 div:nth-child(2) {
    margin-bottom: 2rem;
}
@media (min-width: 600px) {
    .page-product .main .ranges.num3 div {
        display: inline-block;
        width: 25%;
        margin-bottom: 0;
    }
}
.page-product .main .ranges.num4 div:nth-child(1),
.page-product .main .ranges.num4 div:nth-child(2) {
    margin-bottom: 2rem;
}
.page-product .main .ranges .key {
    display: block;
    font-size: 90%;
}
.page-product .main .ranges .val {
    display: block;
    font-size: 160%;
    color: #000;
}
.page-product .main .ranges .bar {
    position: absolute;
    bottom: 0.5em;
    left: 3.3em;
    right: 0;
    height: 4px;
}
.page-product .main .pb {
    margin-top: 2rem;
}
.page-product .main a.button {
    display: inline-block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background-color: black;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
    padding: 1em 2.67em;
    text-decoration: none;
    font-size: 90%;
    margin-top: 2.5rem;
    transition: background-position 125ms ease-out, color 125ms ease-out;
}
.page-product .main a.button:hover {
    background-position: 0% 0%;
}
.page-product .main a.button:hover {
    color: #000;
}
.page-product .main .scroll-links {
    margin: 3rem 0 2rem 0;
    font-size: 90%;
}
.page-product .main .scroll-links a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
}
.page-product .main .scroll-links a:nth-child(2) {
    margin-top: 1em;
}
.page-product .main .scroll-links a svg {
    display: inline-block;
    vertical-align: -10%;
    width: 1em;
    height: 1em;
    fill: #4e4e4e;
    margin-left: 0.6em;
    transition: fill 125ms ease-out;
}
.page-product .main .scroll-links a:hover {
    color: #000;
}
.page-product .main .scroll-links a:hover svg {
    fill: #000;
}
@media (min-width: 500px) {
    .page-product .main .scroll-links a {
        display: inline-block;
    }
    .page-product .main .scroll-links a:nth-child(2) {
        margin-top: 0;
        margin-left: 4em;
    }
}
.page-product .image-single {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #efefef;
}
.page-product .image-single:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.page-product .image-single.vtop {
    background-position-y: 5%;
}
.page-product .image-single.vbottom {
    background-position-y: 95%;
}
.page-product .image-single.vcustom-tennis {
    background-position-y: 22%;
}
.page-product .image-single.vcustom-squash {
    background-position-y: 56%;
}
.page-product .image-single.hleft {
    background-position-x: 20%;
}
.page-product .image-single.hright {
    background-position-x: 80%;
}
.page-product .image-carousel {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    overflow: hidden;
}
.page-product .image-carousel .carousel {
    width: 175%;
    background-color: #000;
}
.page-product .image-carousel .slick-slide {
    opacity: 0.6;
    transition: opacity 200ms ease-out;
    transition-delay: 250ms;
    height: auto;
}
.page-product .image-carousel .slick-current {
    opacity: 1;
}
.page-product .image-carousel .carousel-arrow {
    width: 3.5rem;
    height: initial;
}
.page-product .image-carousel .carousel-arrow:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.page-product .image-carousel .carousel-arrow.left {
    left: auto;
    right: 3.5rem;
    right: calc(3.5rem + 2px);
}
.page-product .image-carousel .carousel-arrow.right {
    right: 0;
    left: auto;
}
@media (min-width: 500px) {
    .page-product .image-carousel .carousel {
        width: 160%;
    }
    .page-product .image-single {
        background-size: auto 100%;
        background-position: 0% 50%;
    }
    .page-product .image-single:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 66.6666666667%;
    }
    .page-product .main .details {
        padding: 3rem 1.5rem;
    }
}
@media (min-width: 500px) and (min-width: 900px) {
    .page-product .main .details {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
@media (min-width: 500px) {
    .page-product .main .pb {
        margin-top: 3.25rem;
        position: relative;
    }
    .page-product .main .pb a.button {
        margin: 0;
    }
    .page-product .main a.scroll-to-spec {
        margin-bottom: 0;
    }
}
@media (min-width: 600px) {
    .page-product .image-carousel .carousel {
        width: 100%;
    }
    .page-product .image-carousel .slick-slide {
        opacity: 1;
    }
}
@media (min-width: 720px) {
    .page-product .main .cell {
        width: calc((100% - 1.8rem) / 1.2);
    }
}
@media (min-width: 720px) and (min-width: 900px) {
    .page-product .main .cell {
        width: calc((100% - 2.4rem) / 1.2);
    }
}
@media (min-width: 720px) {
    .page-product .image-single:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 54.0540540541%;
    }
}
@media (min-width: 900px) {
    .page-product .main .cell {
        width: calc((100% - 2.25rem) / 1.5);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-product .main .cell {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 1200px) {
    .page-product .main {
        position: relative;
    }
    .page-product .main .details {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 0;
        padding-bottom: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
@media (min-width: 1200px) and (min-width: 900px) {
    .page-product .main .details {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
@media (min-width: 1200px) {
    .page-product .main .inner {
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        height: 100%;
    }
    .page-product .main .grid {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .page-product .main .cell {
        width: calc((100% - 3rem) / 2);
        margin-bottom: 0;
    }
}
@media (min-width: 1200px) and (min-width: 900px) {
    .page-product .main .cell {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 1200px) {
    .page-product .main h1 {
        font-size: 160%;
    }
    .page-product .main h1,
    .page-product .main p {
        max-width: 100%;
    }
    .page-product .main p {
        font-size: 1rem;
    }
    .page-product .main p.subtitle {
        font-size: 110%;
        margin-bottom: 0.1em;
    }
    .page-product .image-carousel {
        position: relative;
        z-index: 1;
        margin-left: auto;
        width: 50%;
    }
    .page-product .image-carousel .carousel {
        width: 185%;
    }
    .page-product .image-carousel .slick-slide {
        opacity: 0.6;
    }
    .page-product .image-carousel .slick-current {
        opacity: 1;
    }
    .page-product .image-carousel .carousel-arrow {
        width: 3.5rem;
    }
    .page-product .image-carousel .carousel-arrow.left {
        right: 50%;
        right: calc(50% + 1px);
    }
    .page-product .image-carousel .carousel-arrow.right {
        right: auto;
        left: 50%;
        left: calc(50% + 1px);
    }
    .page-product .image-single {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        margin-left: auto;
        width: 50%;
    }
    .page-product .image-single:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 100%;
    }
    .page-product .image-single.vtop {
        background-position-y: 5%;
    }
    .page-product .image-single.vbottom {
        background-position-y: 95%;
    }
    .page-product .image-single.vcustom-tennis {
        background-position-y: 22%;
    }
    .page-product .image-single.vcustom-squash {
        background-position-y: 56%;
    }
    .page-product .image-single.hleft {
        background-position-x: 20%;
    }
    .page-product .image-single.hright {
        background-position-x: 80%;
    }
}
@media (min-width: 1400px) {
    .page-product .main h1 {
        font-size: 200%;
    }
    .page-product .main p {
        font-size: 1.1rem;
    }
    .page-product .main h1,
    .page-product .main p {
        max-width: 100%;
    }
}
@media (min-width: 1500px) {
    .page-product .image-carousel .carousel {
        width: 175%;
    }
}
@media (min-width: 1650px) {
    .page-product .image-carousel .carousel {
        width: 165%;
    }
}
@media (min-width: 1800px) {
    .page-product .image-carousel .carousel {
        width: 155%;
    }
}
@media (min-width: 2000px) {
    .page-product .image-carousel .carousel {
        width: 145%;
    }
}
@media (min-width: 2150px) {
    .page-product .image-carousel .carousel {
        width: 135%;
    }
}
@media (min-width: 2300px) {
    .page-product .image-carousel .carousel {
        width: 125%;
    }
}
.page-product .spec {
    padding: 3rem 1.5rem;
    background-color: #f6f6f6;
}
@media (min-width: 900px) {
    .page-product .spec {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-product .spec .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-product .spec .c {
    width: calc((100% - 3rem) / 2);
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #000;
    font-size: 100%;
    letter-spacing: 0;
    padding-right: 0.5em;
}
@media (min-width: 900px) {
    .page-product .spec .c {
        width: calc((100% - 4rem) / 2);
    }
}
.page-product .spec .c span {
    display: block;
    color: #4e4e4e;
    text-transform: uppercase;
    font-size: 75%;
    letter-spacing: 0.1em;
}
@media (min-width: 400px) {
    .page-product .spec .c {
        font-size: 120%;
    }
    .page-product .spec .c span {
        font-size: 65%;
    }
}
@media (min-width: 600px) {
    .page-product .spec .c {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-product .spec .c {
        width: calc((100% - 6rem) / 3);
    }
}
@media (min-width: 640px) {
    .page-product .spec .c {
        font-size: 130%;
    }
    .page-product .spec .c span {
        font-size: 50%;
    }
}
@media (min-width: 720px) {
    .page-product .spec {
        padding-bottom: 5.25rem;
    }
    .page-product .spec .c {
        font-size: 150%;
        padding: 0.5em 1em 0.5em 0;
    }
}
.page-product .spec.withimage .inner {
    background-position: -1000% 50%;
    background-size: auto 90%;
    background-repeat: no-repeat;
}
@media (min-width: 850px) {
    .page-product .spec.withimage .inner {
        background-position: 95% 50%;
    }
    .page-product .spec.withimage .c:nth-child(3n + 1),
    .page-product .spec.withimage .c:nth-child(3n + 2) {
        width: calc((100% - 6rem) / 4);
    }
}
@media (min-width: 850px) and (min-width: 900px) {
    .page-product .spec.withimage .c:nth-child(3n + 1),
    .page-product .spec.withimage .c:nth-child(3n + 2) {
        width: calc((100% - 8rem) / 4);
    }
}
@media (min-width: 850px) {
    .page-product .spec.withimage .c:nth-child(3n + 3) {
        width: calc((100% - 3rem) / 2);
        padding-right: 10em;
    }
}
@media (min-width: 850px) and (min-width: 900px) {
    .page-product .spec.withimage .c:nth-child(3n + 3) {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 1000px) {
    .page-product .spec .c {
        font-size: 180%;
    }
}
.herotech {
    padding: 3rem 1.5rem;
    background-color: #000;
}
@media (min-width: 900px) {
    .herotech {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.herotech .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.herotech .grid > * {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .herotech .grid > * {
        width: calc((100% - 2rem) / 1);
    }
}
.herotech .toplogo img {
    width: 10rem;
    height: auto;
}
.herotech .desc img {
    display: none;
}
.herotech .desc h2 {
    font-size: 140%;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 1em;
}
.herotech .desc h2::after {
    display: none;
}
.herotech .desc p {
    color: #aaa;
}
.herotech .desc p b,
.herotech .desc p strong {
    color: #fff;
}
@media (min-width: 600px) {
    .herotech .grid > * {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .herotech .grid > * {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 600px) {
    .herotech .toplogo {
        display: none;
    }
    .herotech .desc img {
        display: block;
        width: 10rem;
        margin-bottom: 2rem;
    }
}
@media (min-width: 720px) {
    .herotech .desc h2 {
        font-size: 170%;
    }
}
@media (min-width: 1000px) {
    .herotech .desc img {
        width: 12rem;
        margin-bottom: 2.75rem;
    }
    .herotech .desc h2 {
        font-size: 200%;
    }
}
.page-product .techs,
.page-range .techs {
    background-color: #000;
}
.page-product .techs .t,
.page-range .techs .t {
    position: relative;
    border-top: solid 1px #313131;
    padding: 1.5rem;
}
.page-product .techs .t .logo,
.page-range .techs .t .logo {
    width: auto;
    height: 2.2rem;
}
.page-product .techs .t a,
.page-range .techs .t a {
    position: absolute;
    display: block;
    top: 2.1rem;
    right: 1.5rem;
}
.page-product .techs .t a svg,
.page-range .techs .t a svg {
    width: 1rem;
    height: 1rem;
    fill: #fff;
    -webkit-transform: rotateZ(225deg);
    transform: rotateZ(225deg);
    transition: -webkit-transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-product .techs .t .content,
.page-range .techs .t .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-product .techs .t p,
.page-range .techs .t p {
    margin: 0;
    color: #aaa;
}
.page-product .techs .t p.headline,
.page-range .techs .t p.headline {
    font-weight: bold;
    color: #fff;
    padding-top: 1em;
}
.page-product .techs .t.open a svg,
.page-range .techs .t.open a svg {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
}
.page-product .techs .t.open .content,
.page-range .techs .t.open .content {
    max-height: 10em;
}
@media (min-width: 550px) {
    .page-product .techs,
    .page-range .techs {
        background-color: #121212;
        padding: 3rem 1.5rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}
@media (min-width: 550px) and (min-width: 900px) {
    .page-product .techs,
    .page-range .techs {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
@media (min-width: 550px) {
    .page-product .techs .inner,
    .page-range .techs .inner {
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    .page-product .techs .layout,
    .page-range .techs .layout {
        margin-bottom: -3rem;
        margin-right: -1.5rem;
    }
    .page-product .techs .layout::after,
    .page-range .techs .layout::after {
        content: "";
        display: table;
        clear: both;
    }
    .page-product .techs .layout > *,
    .page-range .techs .layout > * {
        float: left;
        margin-right: 1.5rem;
        margin-bottom: 3rem;
    }
}
@media (min-width: 550px) and (min-width: 900px) {
    .page-product .techs .layout,
    .page-range .techs .layout {
        margin-bottom: -6rem;
        margin-right: -2rem;
    }
    .page-product .techs .layout > *,
    .page-range .techs .layout > * {
        margin-right: 2rem;
        margin-bottom: 6rem;
    }
}
@media (min-width: 550px) {
    .page-product .techs .t,
    .page-range .techs .t {
        border: none;
        padding: 0;
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 550px) and (min-width: 900px) {
    .page-product .techs .t,
    .page-range .techs .t {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 550px) {
    .page-product .techs .t a,
    .page-range .techs .t a {
        display: none;
    }
    .page-product .techs .t .content,
    .page-range .techs .t .content {
        max-height: none;
    }
}
@media (min-width: 900px) {
    .page-product .techs,
    .page-range .techs {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .page-product .techs .t,
    .page-range .techs .t {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-product .techs .t,
    .page-range .techs .t {
        width: calc((100% - 6rem) / 3);
    }
}
.page-product .action {
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative;
}
@media (min-width: 900px) {
    .page-product .action {
        padding-top: 5.01rem;
        padding-bottom: 6rem;
    }
}
.page-product .action .inner {
    width: 100%;
    max-width: calc(1200px + (3rem * 2));
    margin-left: auto;
    margin-right: auto;
}
.page-product .action h2 {
    position: relative;
    left: 1.5rem;
    width: 12em;
}
@media (min-width: 900px) {
    .page-product .action h2 {
        left: 3rem;
    }
}
.page-product .action .cell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .page-product .action .cell {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-product .action .grid > div {
    width: calc((100% - 1.5rem) / 1);
}
.page-product .action .grid > div:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 120%;
}
@media (min-width: 900px) {
    .page-product .action .grid > div {
        width: calc((100% - 2rem) / 1);
    }
}
.page-product .action .main {
    position: relative;
    background-color: #000;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-position 125ms ease-out;
}
.page-product .action .inner-im {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
}
.page-product .action .inner-im.vtop {
    background-position-y: 5%;
}
.page-product .action .inner-im.vbottom {
    background-position-y: 95%;
}
.page-product .action .inner-im.vcustom-tennis {
    background-position-y: 22%;
}
.page-product .action .inner-im.vcustom-squash {
    background-position-y: 56%;
}
.page-product .action .inner-im.hleft {
    background-position-x: 20%;
}
.page-product .action .inner-im.hright {
    background-position-x: 80%;
}
.page-product .action p {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    position: absolute;
    text-transform: uppercase;
    color: #fff;
    transition: color 125ms ease-out;
}
.page-product .action .name {
    line-height: 1.9;
    top: 50%;
    left: 2rem;
    right: 2rem;
    font-size: 120%;
}
.page-product .action .name a {
    color: inherit;
    text-decoration: none;
    transition: color 125ms ease-out;
}
.page-product .action .name a:hover {
    color: inherit;
}
.page-product .action .read {
    font-size: 90%;
    margin: 0;
    bottom: 2rem;
    right: 2rem;
}
.page-product .action .im {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: none;
}
.page-product .action .im.vtop {
    background-position-y: 5%;
}
.page-product .action .im.vbottom {
    background-position-y: 95%;
}
.page-product .action .im.vcustom-tennis {
    background-position-y: 22%;
}
.page-product .action .im.vcustom-squash {
    background-position-y: 56%;
}
.page-product .action .im.hleft {
    background-position-x: 20%;
}
.page-product .action .im.hright {
    background-position-x: 80%;
}
.page-product .action .grid:hover .main {
    background-position: 0% 0%;
}
.page-product .action .grid:hover p {
    color: #000;
}
.page-product .action .grid:hover p a {
    color: #000;
}
@media (min-width: 380px) {
    .page-product .action .grid > div:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 100%;
    }
}
@media (min-width: 460px) {
    .page-product .action .grid > div {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 460px) and (min-width: 900px) {
    .page-product .action .grid > div {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 460px) {
    .page-product .action .inner-im {
        display: none;
    }
    .page-product .action .name {
        top: 2rem;
        margin: 0;
    }
    .page-product .action .im-one {
        display: block;
    }
}
@media (min-width: 720px) {
    .page-product .action .grid > div {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 720px) and (min-width: 900px) {
    .page-product .action .grid > div {
        width: calc((100% - 6rem) / 3);
    }
}
@media (min-width: 720px) {
    .page-product .action .name {
        top: 2rem;
        margin: 0;
    }
    .page-product .action .im-two {
        display: block;
    }
}
@media (min-width: 1000px) {
    .page-product .action .name {
        top: 3rem;
        left: 3rem;
        right: 3rem;
        font-size: 150%;
    }
    .page-product .action .read {
        bottom: 3rem;
        right: 3rem;
    }
}
.comparemain {
    padding: 1.5rem 0;
}
.comparemain .inner {
    position: relative;
}
.comparemain .inner.mid {
    max-width: 1200px;
    max-width: calc(1200px + (3rem * 2));
    margin: 0 auto;
}
.comparemain .inner::before,
.comparemain .inner::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 1.5rem;
}
.comparemain .inner::before {
    left: 0;
    background-image: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}
.comparemain .inner::after {
    right: 0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
}
.comparemain a.changebtn {
    text-align: center;
    margin-left: 1.5rem;
    width: calc(100% - (1.5rem * 2));
    color: #000;
}
.comparemain .carousel-arrow {
    z-index: 2;
    top: 12rem;
    display: none;
}
@media (min-width: 460px) {
    .comparemain .carousel-arrow {
        top: calc(4.75rem + 21vw);
    }
}
@media (min-width: 720px) {
    .comparemain .carousel-arrow {
        top: calc(5.9rem + 23vw);
    }
}
@media (min-width: 823px) {
    .comparemain .carousel-arrow {
        top: 20.2rem;
    }
}
.comparemain .carousel-arrow.show {
    display: block;
    -webkit-animation: fadeIn 125ms ease-out both;
    animation: fadeIn 125ms ease-out both;
}
.comparemain .carousel-arrow.hide {
    display: block;
    -webkit-animation: fadeOut 125ms ease-out both;
    animation: fadeOut 125ms ease-out both;
}
.comparemain .overflow {
    width: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3rem;
    -ms-overflow-style: none;
}
.comparemain table {
    margin-left: 1.5rem;
}
.comparemain td {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 0;
    width: 1px;
}
.comparemain td::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #dedede;
}
.comparemain td:last-child {
    padding-right: 1.5rem;
}
.comparemain td:last-child::after {
    width: calc(100% - 1.5rem);
}
.comparemain tr:last-child td::after,
.comparemain tr:nth-last-child(2) td::after {
    display: none;
}
.comparemain tr.large td {
    font-size: 130%;
    font-weight: bold;
    font-style: italic;
}
.comparemain tr.withlabel td {
    padding-top: 3.75rem;
}
.comparemain span.label {
    position: absolute;
    left: 1.5rem;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 85%;
    padding-top: 1.125rem;
}
.comparemain .im {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.comparemain .im:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.comparemain .im.vtop {
    background-position-y: 5%;
}
.comparemain .im.vbottom {
    background-position-y: 95%;
}
.comparemain .im.vcustom-tennis {
    background-position-y: 22%;
}
.comparemain .im.vcustom-squash {
    background-position-y: 56%;
}
.comparemain .im.hleft {
    background-position-x: 20%;
}
.comparemain .im.hright {
    background-position-x: 80%;
}
.comparemain .im1 {
    width: 40vw;
    width: calc(50vw - (1.5rem * 0.5) - 1.5rem);
    min-width: 15rem;
    max-width: calc((1200px / 3) - ((2rem * 2) / 3));
}
.comparemain .im2 {
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 1.5rem;
    opacity: 0;
    transition: opacity 125ms ease-out;
}
.comparemain td:last-child .im2 {
    right: 1.5rem;
}
.comparemain .top td:hover .im2 {
    opacity: 1;
}
.comparemain .desc {
    display: block;
    max-width: 94%;
    margin-bottom: 1em;
}
.comparemain .title {
    display: block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 1.33em 0 1em 0;
    font-size: 110%;
}
.comparemain a.viewbtn {
    padding-left: 3em;
    padding-right: 3em;
}
.comparemain .range {
    position: absolute;
    bottom: 1.6em;
    left: 3em;
    height: 4px;
    width: 40%;
}
@media (min-width: 720px) {
    .comparemain {
        padding: 3rem 0;
    }
    .comparemain a.changebtn {
        width: auto;
    }
    .comparemain .overflow {
        padding-top: 1.5rem;
    }
    .comparemain .title {
        font-size: 125%;
    }
    .comparemain .desc {
        font-size: 110%;
    }
    .comparemain span.label {
        font-size: 90%;
    }
    .comparemain tr.large td {
        font-size: 175%;
    }
    .comparemain .range {
        bottom: 1.33em;
        left: 2.5em;
    }
}
@media (min-width: 900px) {
    .comparemain .inner::before,
    .comparemain .inner::after {
        width: 3rem;
    }
    .comparemain a.changebtn {
        margin-left: 3rem;
    }
    .comparemain .overflow {
        padding-bottom: 6rem;
    }
    .comparemain table {
        margin-left: 3rem;
    }
    .comparemain td {
        padding-right: 2rem;
    }
    .comparemain td:last-child {
        padding-right: 3rem;
    }
    .comparemain td:last-child::after {
        width: calc(100% - 3rem);
    }
    .comparemain span.label {
        left: 3rem;
    }
    .comparemain .im2 {
        right: 2rem;
    }
    .comparemain td:last-child .im2 {
        right: 3rem;
    }
    .comparemain a.viewbtn {
        padding-left: 5em;
        padding-right: 5em;
    }
}
.page-player .topcontent,
.page-player .bottomcontent {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-player .topcontent,
    .page-player .bottomcontent {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-player .topcontent .inner,
.page-player .bottomcontent .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-player .topcontent .grid > div,
.page-player .bottomcontent .grid > div {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-player .topcontent .grid > div,
    .page-player .bottomcontent .grid > div {
        width: calc((100% - 2rem) / 1);
    }
}
.page-player .topcontent img,
.page-player .bottomcontent img {
    display: block;
    width: 100%;
    height: auto;
    margin: 4em 0;
}
.page-player .stats-img-small {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.page-player .stats-img-small:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 80%;
}
.page-player .stats-img-small.vtop {
    background-position-y: 5%;
}
.page-player .stats-img-small.vbottom {
    background-position-y: 95%;
}
.page-player .stats-img-small.vcustom-tennis {
    background-position-y: 22%;
}
.page-player .stats-img-small.vcustom-squash {
    background-position-y: 56%;
}
.page-player .stats-img-small.hleft {
    background-position-x: 20%;
}
.page-player .stats-img-small.hright {
    background-position-x: 80%;
}
.page-player .stats {
    padding: 3rem 1.5rem;
    position: relative;
    background-color: #000;
}
@media (min-width: 900px) {
    .page-player .stats {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-player .stats .stats-img-large,
.page-player .stats .stats-img-large-over {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 39%;
}
.page-player .stats .stats-img-large {
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.page-player .stats .stats-img-large.vtop {
    background-position-y: 5%;
}
.page-player .stats .stats-img-large.vbottom {
    background-position-y: 95%;
}
.page-player .stats .stats-img-large.vcustom-tennis {
    background-position-y: 22%;
}
.page-player .stats .stats-img-large.vcustom-squash {
    background-position-y: 56%;
}
.page-player .stats .stats-img-large.hleft {
    background-position-x: 20%;
}
.page-player .stats .stats-img-large.hright {
    background-position-x: 80%;
}
.page-player .stats .stats-img-large-under {
    display: none;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.page-player .stats .stats-img-large-over {
    z-index: 2;
    background-image: linear-gradient(90deg, transparent 60%, #000);
}
.page-player .stats .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 3;
}
.page-player .stats h2 {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-player .stats h2 {
        width: calc((100% - 2rem) / 1);
    }
}
.page-player .stats .stat {
    width: calc((100% - 3rem) / 2);
    color: #fff;
}
@media (min-width: 900px) {
    .page-player .stats .stat {
        width: calc((100% - 4rem) / 2);
    }
}
.page-player .stats .stat span {
    display: block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
}
.page-player .stats .stat span.label {
    font-size: 70%;
    color: #aaa;
    text-transform: uppercase;
    margin-top: 0.5em;
}
.page-player .stats .stat span.value {
    font-size: 140%;
    letter-spacing: 0;
}
.page-player .stats .stat:nth-of-type(1),
.page-player .stats .stat:nth-of-type(2) {
    padding-top: 1.25rem;
}
.page-player .stats .style-desc {
    width: calc((100% - 1.5rem) / 1);
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    font-size: 0.8rem;
    padding-top: 0.75rem;
}
@media (min-width: 900px) {
    .page-player .stats .style-desc {
        width: calc((100% - 2rem) / 1);
    }
}
.page-player .stats .social {
    width: calc((100% - 1.5rem) / 1);
    padding-top: 2rem;
}
@media (min-width: 900px) {
    .page-player .stats .social {
        width: calc((100% - 2rem) / 1);
    }
}
.page-player .stats .social a svg {
    width: 1.5em;
    height: 1.5em;
    fill: #fff;
    margin-right: 1.5em;
    transition: fill 125ms ease-out;
}
.page-player .stats .social a:hover svg {
    fill: #cf0;
}
.page-player .equipment {
    padding: 3rem 1.5rem;
    padding-top: 0;
}
@media (min-width: 900px) {
    .page-player .equipment {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-player .equipment .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-player .equipment .image,
.page-player .equipment .words {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-player .equipment .image,
    .page-player .equipment .words {
        width: calc((100% - 2rem) / 1);
    }
}
.page-player .equipment img {
    display: block;
    width: 70%;
    height: auto;
    margin: 0 auto;
    max-width: 260px;
}
.page-player .equipment .title {
    font-weight: bold;
    font-size: 120%;
    color: #000;
    margin: 0 0 0.3em 0;
}
.page-player .equipment .description {
    margin-top: 0;
}
.page-player .equipment .button {
    margin-top: 1.5em;
}
.page-player .equipment .disclaimer {
    font-size: 85%;
    margin-top: 3.5em;
    margin-bottom: 0;
}
@media (min-width: 450px) {
    .page-player .stats .stat span.value {
        font-size: 180%;
    }
    .page-player .stats .stat span.label,
    .page-player .stats .style-desc {
        font-size: 90%;
    }
    .page-player .stats .social a svg {
        width: 1.75em;
        height: 1.75em;
    }
}
@media (min-width: 600px) {
    .page-player .stats {
        min-height: 26rem;
    }
    .page-player .stats-img-small {
        display: none;
    }
    .page-player .stats .stats-img-large,
    .page-player .stats .stats-img-large-over,
    .page-player .stats .stats-img-large-under {
        display: block;
    }
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        width: calc((100% - 2.25rem) / 1.5);
        margin-left: calc(((100% - 4.5rem) / 3) + 1.5rem - 0.5px);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        margin-left: calc(((100% - 6rem) / 3) + 2rem - 0.5px);
    }
}
@media (min-width: 600px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        width: calc((100% - 4.5rem) / 3);
        margin-left: calc(((100% - 4.5rem) / 3) + 1.5rem - 0.5px);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        width: calc((100% - 6rem) / 3);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        margin-left: calc(((100% - 6rem) / 3) + 2rem - 0.5px);
    }
}
@media (min-width: 600px) {
    .page-player .stats .stat:nth-of-type(2n + 2) {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 2) {
        width: calc((100% - 6rem) / 3);
    }
}
@media (min-width: 600px) {
    .page-player .equipment .image,
    .page-player .equipment .words {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-player .equipment .image,
    .page-player .equipment .words {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 600px) {
    .page-player .equipment img {
        max-width: none;
        width: 90%;
        margin: 0 auto 0 0;
    }
}
@media (min-width: 850px) {
    .page-player .stats .stats-img-large,
    .page-player .stats .stats-img-large-over {
        width: 52%;
    }
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        width: calc((100% - 3rem) / 2);
        margin-left: calc(((100% - 3rem) / 2) + 1.5rem - 0.5px);
    }
}
@media (min-width: 850px) and (min-width: 900px) {
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 850px) and (min-width: 900px) {
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        margin-left: calc(((100% - 4rem) / 2) + 2rem - 0.5px);
    }
}
@media (min-width: 850px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        width: calc((100% - 6rem) / 4);
        margin-left: calc(((100% - 3rem) / 2) + 1.5rem - 0.5px);
    }
}
@media (min-width: 850px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        width: calc((100% - 8rem) / 4);
    }
}
@media (min-width: 850px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        margin-left: calc(((100% - 4rem) / 2) + 2rem - 0.5px);
    }
}
@media (min-width: 850px) {
    .page-player .stats .stat:nth-of-type(2n + 2) {
        width: calc((100% - 6rem) / 4);
    }
}
@media (min-width: 850px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 2) {
        width: calc((100% - 8rem) / 4);
    }
}
@media (min-width: 900px) {
    .page-player .stats {
        min-height: 32rem;
    }
}
@media (min-width: 1050px) {
    .page-player .stats .stats-img-large,
    .page-player .stats .stats-img-large-over {
        width: 62%;
    }
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        width: calc((100% - 3.6rem) / 2.4);
        margin-left: calc(((100% - 2.5714285714rem) / 1.7142857143) + 1.5rem - 0.5px);
    }
}
@media (min-width: 1050px) and (min-width: 900px) {
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        width: calc((100% - 4.8rem) / 2.4);
    }
}
@media (min-width: 1050px) and (min-width: 900px) {
    .page-player .stats h2,
    .page-player .stats .style-desc,
    .page-player .stats .social {
        margin-left: calc(((100% - 3.4285714286rem) / 1.7142857143) + 2rem - 0.5px);
    }
}
@media (min-width: 1050px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        width: calc((100% - 6rem) / 4);
        margin-left: calc(((100% - 2.5714285714rem) / 1.7142857143) + 1.5rem - 0.5px);
    }
}
@media (min-width: 1050px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        width: calc((100% - 8rem) / 4);
    }
}
@media (min-width: 1050px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 1) {
        margin-left: calc(((100% - 3.4285714286rem) / 1.7142857143) + 2rem - 0.5px);
    }
}
@media (min-width: 1050px) {
    .page-player .stats .stat:nth-of-type(2n + 2) {
        width: calc((100% - 9rem) / 6);
    }
}
@media (min-width: 1050px) and (min-width: 900px) {
    .page-player .stats .stat:nth-of-type(2n + 2) {
        width: calc((100% - 12rem) / 6);
    }
}
@media (min-width: 1100px) {
    .page-player .topcontent .grid > div,
    .page-player .bottomcontent .grid > div {
        width: calc((100% - 2.25rem) / 1.5);
        margin-left: calc(((100% - 9rem) / 6) + 1.5rem - 0.5px);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-player .topcontent .grid > div,
    .page-player .bottomcontent .grid > div {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-player .topcontent .grid > div,
    .page-player .bottomcontent .grid > div {
        margin-left: calc(((100% - 12rem) / 6) + 2rem - 0.5px);
    }
}
@media (min-width: 1100px) {
    .page-player .equipment .image,
    .page-player .equipment .words {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-player .equipment .image,
    .page-player .equipment .words {
        width: calc((100% - 6rem) / 3);
    }
}
@media (min-width: 1100px) {
    .page-player .equipment .image {
        margin-left: calc(((100% - 9rem) / 6) + 1.5rem - 0.5px);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-player .equipment .image {
        margin-left: calc(((100% - 12rem) / 6) + 2rem - 0.5px);
    }
}
@media (min-width: 1200px) {
    .page-player .stats {
        min-height: 36rem;
    }
}
a.player-link {
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-position 125ms ease-out;
    background-color: #000;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 0% 100%;
    background-repeat: no-repeat;
}
a.player-link .image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #dedede;
    width: 100%;
}
a.player-link .image:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 72.2222222222%;
}
a.player-link .image.vtop {
    background-position-y: 5%;
}
a.player-link .image.vbottom {
    background-position-y: 95%;
}
a.player-link .image.vcustom-tennis {
    background-position-y: 22%;
}
a.player-link .image.vcustom-squash {
    background-position-y: 56%;
}
a.player-link .image.hleft {
    background-position-x: 20%;
}
a.player-link .image.hright {
    background-position-x: 80%;
}
a.player-link span {
    display: block;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    transition: color 125ms ease-out;
}
a.player-link .title {
    margin: 2rem 2.5rem 6rem 2.5rem;
    line-height: 1.9;
    font-size: 120%;
}
a.player-link .read {
    position: absolute;
    bottom: 2rem;
    right: 2.5rem;
}
a.player-link:hover {
    background-position: 0% 0%;
}
a.player-link:hover span {
    color: #000;
}
.page-latest-archive .pagebody {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-latest-archive .pagebody {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-latest-archive .top h2 {
    width: calc((100% - 4.5rem) / 3);
}
@media (min-width: 900px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 6rem) / 3);
    }
}
.page-latest-archive .top .sports-filter {
    width: calc((100% - 2.25rem) / 1.5);
    margin-top: -0.25em;
}
@media (min-width: 900px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 360px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 3.6rem) / 2.4);
    }
}
@media (min-width: 360px) and (min-width: 900px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 4.8rem) / 2.4);
    }
}
@media (min-width: 360px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 2.5714285714rem) / 1.7142857143);
    }
}
@media (min-width: 360px) and (min-width: 900px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 3.4285714286rem) / 1.7142857143);
    }
}
@media (min-width: 420px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 420px) and (min-width: 900px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 420px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 420px) and (min-width: 900px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 500px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 2.5714285714rem) / 1.7142857143);
    }
}
@media (min-width: 500px) and (min-width: 900px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 3.4285714286rem) / 1.7142857143);
    }
}
@media (min-width: 500px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 3.6rem) / 2.4);
    }
}
@media (min-width: 500px) and (min-width: 900px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 4.8rem) / 2.4);
    }
}
@media (min-width: 630px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 2.25rem) / 1.5);
    }
}
@media (min-width: 630px) and (min-width: 900px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 630px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 630px) and (min-width: 900px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 6rem) / 3);
    }
}
@media (min-width: 720px) {
    .page-latest-archive .top .sports-filter {
        margin-top: -0.15em;
    }
}
@media (min-width: 830px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 2rem) / 1.3333333333);
    }
}
@media (min-width: 830px) and (min-width: 900px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 2.6666666667rem) / 1.3333333333);
    }
}
@media (min-width: 830px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 6rem) / 4);
    }
}
@media (min-width: 830px) and (min-width: 900px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 8rem) / 4);
    }
}
@media (min-width: 1280px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 1.8rem) / 1.2);
    }
}
@media (min-width: 1280px) and (min-width: 900px) {
    .page-latest-archive .top h2 {
        width: calc((100% - 2.4rem) / 1.2);
    }
}
@media (min-width: 1280px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 9rem) / 6);
    }
}
@media (min-width: 1280px) and (min-width: 900px) {
    .page-latest-archive .top .sports-filter {
        width: calc((100% - 12rem) / 6);
    }
}
.page-latest-archive .no-articles {
    padding: 3rem 0;
    min-height: 40vh;
}
.page-latest-archive .articles {
    margin-top: 4.5rem;
}
.page-latest-archive .articles .article-link {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-latest-archive .articles .article-link {
        width: calc((100% - 2rem) / 1);
    }
}
@media (min-width: 600px) {
    .page-latest-archive .articles .article-link {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-latest-archive .articles .article-link {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 1000px) {
    .page-latest-archive .articles .article-link {
        width: calc((100% - 4.5rem) / 3);
    }
}
@media (min-width: 1000px) and (min-width: 900px) {
    .page-latest-archive .articles .article-link {
        width: calc((100% - 6rem) / 3);
    }
}
a.article-link {
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-position 125ms ease-out;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 0% 100%;
    background-repeat: no-repeat;
}
a.article-link .image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #dedede;
    width: 100%;
}
a.article-link .image:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 72.2222222222%;
}
a.article-link .image.vtop {
    background-position-y: 5%;
}
a.article-link .image.vbottom {
    background-position-y: 95%;
}
a.article-link .image.vcustom-tennis {
    background-position-y: 22%;
}
a.article-link .image.vcustom-squash {
    background-position-y: 56%;
}
a.article-link .image.hleft {
    background-position-x: 20%;
}
a.article-link .image.hright {
    background-position-x: 80%;
}
a.article-link .details {
    padding: 1.5rem 2rem 4rem 2rem;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 100%;
}
a.article-link span {
    margin: 0;
    display: block;
    color: #000;
}
a.article-link .category,
a.article-link .sport {
    font-size: 85%;
}
a.article-link .title {
    margin-top: 1.25em;
    line-height: 1.9;
}
a.article-link .category {
    position: relative;
}
a.article-link .category::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: 50%;
    width: 1.25rem;
    height: 3px;
    background-color: #cf0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
a.article-link .sport {
    position: absolute;
    left: 2rem;
    bottom: 1.5rem;
    opacity: 0.5;
}
a.article-link.nosport .details {
    padding: 1.5rem 2rem 2rem 2rem;
}
a.article-link.promotion {
    background-image: linear-gradient(-30deg, #000 50%, #313131 50%);
}
a.article-link.promotion span {
    color: #fff;
}
a.article-link.promotion .category {
    color: #cf0;
}
a.article-link.promotion .category::before {
    display: none;
}
a.article-link.promotion .sport {
    opacity: 0.75;
}
a.article-link:hover {
    background-position: 0% 0%;
}
.page-article .pagebody {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-article .pagebody {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-article .pagebody .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-article .pagebody .grid > div {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-article .pagebody .grid > div {
        width: calc((100% - 2rem) / 1);
    }
}
.page-article .pagebody img {
    display: block;
    width: 100%;
    height: auto;
    margin: 4em 0;
}
.page-article .top {
    font-size: 80%;
    margin-bottom: 3em;
}
.page-article .top::after {
    content: "";
    display: table;
    clear: both;
}
.page-article .top p {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: inherit;
    color: #000;
    line-height: 3.5em;
}
.page-article .top p:first-child {
    float: left;
}
.page-article .top p:last-child {
    float: right;
}
.page-article .top svg {
    display: inline-block;
    vertical-align: -10%;
    width: 1.5em;
    height: 1.5em;
    fill: #000;
    transition: fill 125ms ease-out;
}
.page-article .top a {
    margin-left: 1em;
}
.page-article .top a:last-child {
    margin-left: 0.5em;
}
.page-article .top a:hover svg {
    fill: #4e4e4e;
}
@media (min-width: 500px) {
    .page-article .top {
        font-size: 90%;
    }
}
@media (min-width: 720px) {
    .page-article .top {
        font-size: 100%;
    }
}
@media (min-width: 1100px) {
    .page-article .pagebody .grid > div {
        width: calc((100% - 2.25rem) / 1.5);
        margin-left: calc(((100% - 9rem) / 6) + 1.5rem - 0.5px);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-article .pagebody .grid > div {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-article .pagebody .grid > div {
        margin-left: calc(((100% - 12rem) / 6) + 2rem - 0.5px);
    }
}
.page-story .herobgimage {
    background-image: url("../img/hero-our-story-small.jpg");
    background-position: 60% 20%;
}
@media (min-width: 800px) {
    .page-story .herobgimage {
        background-image: url("../img/hero-our-story-large.jpg");
    }
}
.page-story .intro {
    padding: 3rem 1.5rem;
    padding-bottom: 0;
}
@media (min-width: 900px) {
    .page-story .intro {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-story .intro .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-story .intro .cell {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-story .intro .cell {
        width: calc((100% - 2rem) / 1);
    }
}
@media (min-width: 600px) {
    .page-story .intro {
        padding-bottom: 3rem;
    }
    .page-story .intro .subtitle {
        display: none;
    }
}
@media (min-width: 900px) {
    .page-story .intro .cell {
        width: calc((100% - 2.25rem) / 1.5);
        margin-left: calc(((100% - 9rem) / 6) + 1.5rem - 0.5px);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-story .intro .cell {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-story .intro .cell {
        margin-left: calc(((100% - 12rem) / 6) + 2rem - 0.5px);
    }
}
.page-story .story {
    padding: 3rem;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #f6f6f6;
}
.page-story .story.vtop {
    background-position-y: 5%;
}
.page-story .story.vbottom {
    background-position-y: 95%;
}
.page-story .story.vcustom-tennis {
    background-position-y: 22%;
}
.page-story .story.vcustom-squash {
    background-position-y: 56%;
}
.page-story .story.hleft {
    background-position-x: 20%;
}
.page-story .story.hright {
    background-position-x: 80%;
}
.page-story .story p {
    color: #4e4e4e;
}
.page-story .story .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.page-story .story .content {
    margin-top: 2.5rem;
}
.page-story .story .content:first-of-type {
    margin-top: 0;
}
.page-story .story .year {
    position: relative;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.25em;
    font-size: 180%;
    margin: 0;
}
.page-story .story .year::after {
    position: absolute;
    content: "";
    left: -3rem;
    top: 50%;
    width: 1.5rem;
    height: 6px;
    background-color: #cf0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-story .story .copy {
    margin: 0.5em 0 0 0;
    padding-bottom: 0.3em;
}
.page-story .story img {
    display: block;
    margin: 2.5rem 0;
    width: 45%;
    max-width: 160px;
    height: auto;
}
.page-story .story img.mid {
    width: 60%;
    max-width: 210px;
}
.page-story .story img.wide {
    width: 70%;
    max-width: 250px;
}
.page-story .story img.right {
    margin-left: auto;
}
.page-story .story img:first-child {
    margin-top: 0;
}
.page-story .story.alwaysblack {
    background-color: #000;
}
.page-story .story.alwaysblack p {
    color: #fff;
}
.page-story .keypoint {
    background-color: #000;
}
.page-story .keypoint p {
    color: #fff;
}
.page-story .keypoint .inner {
    height: 10rem;
}
.page-story .keypoint .content {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
}
.page-story .keypoint .year {
    font-size: 250%;
}
.page-story .keypoint .copy {
    display: none;
}
.page-story .understory {
    background-color: #000;
    padding: 3rem;
}
.page-story .understory p {
    margin: 0;
    color: #fff;
}
.page-story .y1888 {
    background-image: url("../img/our-story-1888-small.jpg");
}
@media (min-width: 750px) {
    .page-story .y1888 {
        background-image: url("../img/our-story-1888-large.jpg");
    }
}
.page-story .y1888 h2 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.page-story .y1888 h2::after {
    display: none;
}
.page-story .y1923 {
    background-image: url("https://dunlopsports.com/wp-content/themes/dunlopsports/assets/img/our-story-1923-small.jpg");
    background-position: 100% 25%;
}
@media (min-width: 750px) {
    .page-story .y1923 {
        background-image: url("https://dunlopsports.com/wp-content/themes/dunlopsports/assets/img/our-story-1923-large.jpg");
    }
}
.page-story .y1932 {
    background-image: url("../img/our-story-1932-small.jpg");
    background-position: 50% 50%;
}
@media (min-width: 750px) {
    .page-story .y1932 {
        background-image: url("../img/our-story-1932-large.jpg");
    }
}
.page-story .y1956 {
    background-image: url("../img/our-story-1956-small.jpg");
    background-position: 0% 30%;
}
@media (min-width: 750px) {
    .page-story .y1956 {
        background-image: url("../img/our-story-1956-large.jpg");
    }
}
.page-story .y1967 {
    background-image: url("../img/our-story-1967-small.jpg");
    background-position: 50% 25%;
}
@media (min-width: 750px) {
    .page-story .y1967 {
        background-image: url("../img/our-story-1967-large.jpg");
    }
}
.page-story .y1982 {
    background-image: url("../img/our-story-1982-small.jpg");
    background-position: 50% 50%;
}
@media (min-width: 750px) {
    .page-story .y1982 {
        background-image: url("../img/our-story-1982-large.jpg");
    }
}
.page-story .y1988 {
    background-image: url("../img/our-story-1988-small.jpg");
    background-position: 0% 15%;
}
@media (min-width: 750px) {
    .page-story .y1988 {
        background-image: url("../img/our-story-1988-large.jpg");
    }
}
.page-story .y2010 {
    background-image: url("../img/our-story-2010-small.jpg");
    background-position: 0% 50%;
}
@media (min-width: 750px) {
    .page-story .y2010 {
        background-image: url("../img/our-story-2010-large.jpg");
    }
}
.page-story .y2018 {
    background-image: url("../img/our-story-2018-large.jpg");
    background-position: 0% 5%;
    background-size: 166% auto;
}
@media (min-width: 600px) {
    .page-story .y2018 {
        background-size: cover;
        background-position: 54% 5%;
    }
}
.page-story .y2019 .logos {
    display: block;
    position: relative;
    width: 65%;
    min-width: 200px;
    max-width: 270px;
    margin: 1em 0 0 0 !important;
}
@media (min-width: 400px) {
    .page-story .keypoint .inner {
        height: 15rem;
    }
}
@media (min-width: 600px) {
    .page-story .story {
        padding: 6rem 3rem;
    }
    .page-story .story .year {
        opacity: 0;
    }
    .page-story .story .year::after {
        width: 2.25rem;
        height: 7px;
    }
    .page-story .story .copy {
        opacity: 0;
    }
    .page-story .story .content {
        width: 50%;
        margin-top: 5rem;
    }
    .page-story .story .content.left {
        padding-right: 4.5rem;
    }
    .page-story .story .content.left p {
        text-align: right;
    }
    .page-story .story .content.left .year::after {
        left: initial;
        right: -4.5rem;
    }
    .page-story .story .content.right {
        margin-left: auto;
        padding-left: 4.5rem;
    }
    .page-story .story .content.right .year::after {
        left: -4.5rem;
        right: initial;
    }
    .page-story .story .content.show.left .year {
        -webkit-animation: sa-slide-right 400ms 200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: sa-slide-right 400ms 200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
    .page-story .story .content.show.left .year::after {
        -webkit-animation: expand-width 400ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: expand-width 400ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
    }
    .page-story .story .content.show.left .copy {
        -webkit-animation: sa-slide-right 400ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: sa-slide-right 400ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
    .page-story .story .content.show.right .year {
        -webkit-animation: sa-slide 400ms 200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: sa-slide 400ms 200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
    .page-story .story .content.show.right .year::after {
        -webkit-animation: expand-width 400ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: expand-width 400ms 400ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }
    .page-story .story .content.show.right .copy {
        -webkit-animation: sa-slide 400ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
        animation: sa-slide 400ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
    }
    .page-story .story .content.top .year,
    .page-story .story .content.top .copy {
        opacity: 1;
    }
    .page-story .story img {
        position: absolute;
        z-index: 1;
        max-width: none;
        margin: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        height: auto;
        -webkit-animation: fadeIn 500ms 1000ms ease-out both;
        animation: fadeIn 500ms 1000ms ease-out both;
    }
    .page-story .story img.mid,
    .page-story .story img.wide {
        width: initial;
        max-width: none;
    }
    .page-story .story img.bigleft {
        right: calc(50% + (3rem * 1.5));
    }
    .page-story .story img.bigright {
        left: calc(50% + (3rem * 1.5));
    }
    .page-story .story img.bigrightwide {
        left: 50%;
        width: calc(50% + 3rem);
    }
    .page-story .story img.bigleftwide {
        right: 50%;
        width: calc(50% + 3rem);
    }
    .page-story .story img.jb-dunlop {
        width: 20%;
        top: -7.5%;
    }
    .page-story .story img.golf-ball {
        width: 20%;
        top: 44%;
    }
    .page-story .story img.maxply {
        width: 25%;
        top: -2%;
    }
    .page-story .story img.rackets {
        width: 40%;
        top: 50%;
    }
    .page-story .story img.flying-d {
        width: 20%;
        top: 5%;
    }
    .page-story .story img.rod {
        width: 30%;
        top: 95%;
    }
    .page-story .story img.rod2 {
        width: 30%;
        top: 11%;
    }
    .page-story .story img.i200g {
        width: 40%;
        top: 94%;
    }
    .page-story .story img.greg {
        width: 40%;
        top: 50%;
    }
    .page-story .story img.aoballs {
        top: 17%;
    }
    .page-story .story img.atpballs {
        top: 55%;
    }
    .page-story .story img.cx {
        width: 40%;
        top: 92%;
    }
    .page-story .story::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
    }
    .page-story .story.black {
        background-color: #000;
    }
    .page-story .story.black p {
        color: #fff;
    }
    .page-story .story.black::before,
    .page-story .story.alwaysblack::before,
    .page-story .story.keypoint::before {
        background-color: rgba(255, 255, 255, 0.2);
    }
    .page-story .story.white::before {
        background-color: #dedede;
    }
    .page-story .keypoint .year {
        font-size: 300%;
        margin-bottom: 0.5em;
    }
    .page-story .keypoint .inner {
        height: 24rem;
    }
    .page-story .keypoint .content {
        margin: 0;
    }
    .page-story .keypoint .content.left {
        left: 0;
    }
    .page-story .keypoint .content.right {
        left: initial;
        right: 0;
    }
    .page-story .keypoint .copy {
        display: block;
    }
    .page-story .understory {
        display: none;
    }
    .page-story .y1982 {
        position: relative;
    }
    .page-story .y1982 .content {
        top: 15%;
    }
    .page-story .y1888 {
        overflow: hidden;
    }
    .page-story .y1888 h2 {
        display: block;
    }
    .page-story .y1888 .content.left .year::after {
        right: -5.625rem;
    }
    .page-story .y1888::before {
        display: none;
    }
    .page-story .y1888 .year::before {
        position: absolute;
        content: "";
        top: 0.8em;
        right: -4.5rem;
        width: 1px;
        height: 30rem;
        background-color: rgba(255, 255, 255, 0.2);
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }
    .page-story .y2010 {
        background-position: 50% 0%;
    }
    .page-story .y2019 .inner {
        padding: 5vw 0;
    }
    .page-story .y2019 .content.first {
        padding-bottom: 56vw;
    }
    .page-story .y2019 .logos {
        -webkit-animation: none;
        animation: none;
        margin: 4em 0 0 auto !important;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}
@media (min-width: 800px) {
    .page-story .story {
        padding: 9.99rem 3rem;
    }
    .page-story .story .content {
        margin-top: 8rem;
    }
    .page-story .story .year {
        font-size: 220%;
    }
    .page-story .story img.rod {
        top: 110%;
    }
    .page-story .keypoint .inner {
        height: 30rem;
    }
    .page-story .keypoint .year {
        font-size: 380%;
    }
    .page-story .y1888 h2 {
        margin-top: -2rem;
    }
}
@media (min-width: 900px) {
    .page-story .story .content.left {
        padding-left: 5%;
        padding-right: 6rem;
    }
    .page-story .story .content.left .year::after {
        right: -6rem;
    }
    .page-story .story .content.right {
        padding-right: 5%;
        padding-left: 6rem;
    }
    .page-story .story .content.right .year::after {
        left: -6rem;
    }
    .page-story .story img.bigleft {
        right: calc(50% + (3rem * 2));
    }
    .page-story .story img.bigright {
        left: calc(50% + (3rem * 2));
    }
    .page-story .y1888 .content.left .year::after {
        right: -7.125rem;
    }
    .page-story .y1888 .year::before {
        right: -6rem;
    }
}
@media (min-width: 1000px) {
    .page-story .story img.i200g {
        top: 105%;
    }
    .page-story .story img.cx {
        width: 35%;
    }
}
@media (min-width: 1100px) {
    .page-story .story .content {
        margin-top: 10rem;
    }
    .page-story .story .content.left {
        padding-left: 10%;
    }
    .page-story .story .content.right {
        padding-right: 10%;
    }
    .page-story .story img.rackets {
        top: -3%;
    }
    .page-story .story img.rod {
        top: 120%;
    }
    .page-story .y1960-1962 {
        padding-bottom: 18rem;
    }
}
@media (min-width: 1200px) {
    .page-story .story .content.left {
        padding-left: 11%;
        padding-right: 7.5rem;
    }
    .page-story .story .content.left .year::after {
        right: -7.5rem;
    }
    .page-story .story .content.right {
        padding-right: 11%;
        padding-left: 7.5rem;
    }
    .page-story .story .content.right .year::after {
        left: -7.5rem;
    }
    .page-story .story img.bigleft {
        right: calc(50% + (3rem * 2.5));
    }
    .page-story .story img.bigright {
        left: calc(50% + (3rem * 2.5));
    }
    .page-story .y1888 .content.left .year::after {
        right: -8.625rem;
    }
    .page-story .y1888 .year::before {
        right: -7.5rem;
    }
    .page-story .keypoint .inner {
        height: 36rem;
    }
}
@media (min-width: 1280px) {
    .page-story .y2019 .inner {
        padding: 64px 0;
    }
    .page-story .y2019 .content.first {
        padding-bottom: 720px;
    }
}
.page-story .ltg {
    position: relative;
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-position: 50% 25%;
    background-image: url("../img/hero-home-tennis-small.jpg");
}
.page-story .ltg:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
}
.page-story .ltg.vtop {
    background-position-y: 5%;
}
.page-story .ltg.vbottom {
    background-position-y: 95%;
}
.page-story .ltg.vcustom-tennis {
    background-position-y: 22%;
}
.page-story .ltg.vcustom-squash {
    background-position-y: 56%;
}
.page-story .ltg.hleft {
    background-position-x: 20%;
}
.page-story .ltg.hright {
    background-position-x: 80%;
}
@media (min-width: 720px) {
    .page-story .ltg {
        background-image: url("../img/hero-home-tennis-medium.jpg");
    }
    .page-story .ltg:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 50%;
    }
}
@media (min-width: 1300px) {
    .page-story .ltg {
        height: 44rem;
        background-image: url("../img/hero-home-tennis-large.jpg");
    }
    .page-story .ltg:before {
        display: none;
    }
}
.page-story .ltg::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 30%;
    left: 50%;
    right: 0;
    bottom: 0;
    background-size: 120% auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../img/supergraphic-home-tennis.svg");
}
.page-story .ltg p {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.4em;
    font-size: 120%;
}
@media (min-width: 450px) {
    .page-story .ltg p {
        font-size: 160%;
    }
}
@media (min-width: 600px) {
    .page-story .ltg p {
        font-size: 200%;
    }
}
@media (min-width: 720px) {
    .page-story .ltg p {
        font-size: 250%;
        max-width: 100%;
    }
}
@media (min-width: 900px) {
    .page-story .ltg p {
        font-size: 300%;
    }
}
.page-search .hero form {
    width: calc((100% - 1.5rem) / 1);
    position: relative;
    border-bottom: solid 1px #dedede;
    font-size: 150%;
}
@media (min-width: 900px) {
    .page-search .hero form {
        width: calc((100% - 2rem) / 1);
    }
}
.page-search .hero form input {
    width: 100%;
    width: calc(100% - 2.15em);
    color: #fff;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-style: italic;
    margin-bottom: 0.85em;
}
.page-search .hero form input::-webkit-input-placeholder {
    color: #dedede;
}
.page-search .hero form input:-ms-input-placeholder {
    color: #dedede;
}
.page-search .hero form input::-ms-input-placeholder {
    color: #dedede;
}
.page-search .hero form input::placeholder {
    color: #dedede;
}
.page-search .hero form a {
    position: absolute;
    top: 0;
    right: 0;
}
.page-search .hero form a svg {
    width: 1.15em;
    height: 1.15em;
    fill: #cf0;
    transition: fill 125ms ease-out;
}
.page-search .hero form a:hover svg {
    fill: #fff;
}
.page-search .hero form.pulse {
    -webkit-animation: searchpulse 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: searchpulse 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (min-width: 500px) {
    .page-search .hero form {
        font-size: 170%;
    }
}
@media (min-width: 720px) {
    .page-search .hero form {
        font-size: 200%;
    }
}
@media (min-width: 900px) {
    .page-search .hero {
        padding: 3rem 1.5rem;
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-search .hero {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
@media (min-width: 900px) {
    .page-search .hero form {
        margin-left: calc(((100% - 9rem) / 6) + 1.5rem - 0.5px);
        width: calc((100% - 2.25rem) / 1.5);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-search .hero form {
        margin-left: calc(((100% - 12rem) / 6) + 2rem - 0.5px);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .page-search .hero form {
        width: calc((100% - 3rem) / 1.5);
    }
}
.sres {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .sres {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.sres .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.sres .cell {
    width: calc((100% - 1.5rem) / 1);
    padding-bottom: 4rem;
    min-height: 50vh;
}
@media (min-width: 900px) {
    .sres .cell {
        width: calc((100% - 2rem) / 1);
    }
}
.sres .num span {
    font-weight: bold;
}
.sres .result {
    position: relative;
    border-top: solid 1px #dedede;
    margin-top: 4rem;
    padding-top: 4rem;
    line-height: 1.8;
}
.sres a {
    color: inherit;
    text-decoration: none;
}
.sres .title {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #121212;
    font-size: 120%;
    margin: -0.3em 0 1em 0;
}
.sres .desc {
    margin: 0;
}
.sres .link {
    margin: 1em 0 0 0;
    font-weight: bold;
}
.sres .image {
    display: block;
    margin-bottom: 2.25rem;
    width: 180px;
}
.sres .image div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 100%;
}
.sres .image div:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.sres .image div.vtop {
    background-position-y: 5%;
}
.sres .image div.vbottom {
    background-position-y: 95%;
}
.sres .image div.vcustom-tennis {
    background-position-y: 22%;
}
.sres .image div.vcustom-squash {
    background-position-y: 56%;
}
.sres .image div.hleft {
    background-position-x: 20%;
}
.sres .image div.hright {
    background-position-x: 80%;
}
@media (min-width: 400px) {
    .sres .image {
        position: absolute;
        top: 4rem;
        left: 0;
        width: 7rem;
    }
    .sres .withimage {
        min-height: 11rem;
    }
    .sres .withimage .title,
    .sres .withimage .desc,
    .sres .withimage .link {
        padding-left: 9rem;
    }
}
@media (min-width: 500px) {
    .sres .image {
        width: 9rem;
    }
    .sres .withimage {
        min-height: 13rem;
    }
    .sres .withimage .title,
    .sres .withimage .desc,
    .sres .withimage .link {
        padding-left: 11rem;
    }
}
@media (min-width: 600px) {
    .sres .image {
        width: 10rem;
    }
    .sres .withimage {
        min-height: 14rem;
    }
    .sres .withimage .title,
    .sres .withimage .desc,
    .sres .withimage .link {
        padding-left: 12.5rem;
    }
}
@media (min-width: 900px) {
    .sres .cell {
        margin-left: calc(((100% - 9rem) / 6) + 1.5rem - 0.5px);
        width: calc((100% - 2.25rem) / 1.5);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .sres .cell {
        margin-left: calc(((100% - 12rem) / 6) + 2rem - 0.5px);
    }
}
@media (min-width: 900px) and (min-width: 900px) {
    .sres .cell {
        width: calc((100% - 3rem) / 1.5);
    }
}
.page-retailers .hero .herobgimage {
    background-image: url("../img/hero-retailers.jpg");
    background-repeat: no-repeat;
    background-size: auto 180%;
    background-position: 94% 33%;
}
.page-retailers .hero h1 {
    margin-top: -0.4em;
    margin-right: -2.25rem;
}
.retailer-search-form {
    position: relative;
    border-bottom: solid 1px #4e4e4e;
    font-size: 120%;
    margin-top: 3rem;
}
.retailer-search-form::after {
    content: "";
    display: table;
    clear: both;
}
.retailer-search-form input {
    float: right;
    width: calc(100% - 2.15em);
    background: transparent;
    font-size: inherit;
    color: #fff;
    margin-bottom: 0.85em;
}
.retailer-search-form input::-webkit-input-placeholder {
    font-style: italic;
    color: #dedede;
}
.retailer-search-form input:-ms-input-placeholder {
    font-style: italic;
    color: #dedede;
}
.retailer-search-form input::-ms-input-placeholder {
    font-style: italic;
    color: #dedede;
}
.retailer-search-form input::placeholder {
    font-style: italic;
    color: #dedede;
}
.retailer-search-form a {
    display: inline-block;
}
.retailer-search-form a svg {
    width: 1.15em;
    height: 1.15em;
    fill: #cf0;
    transition: fill 125ms ease-out;
}
.retailer-search-form a:hover svg {
    fill: #fff;
}
.retailer-view-switch::after {
    content: "";
    display: table;
    clear: both;
}
.retailer-view-switch a {
    display: block;
    float: left;
    width: 50%;
    text-align: center;
    background-color: #dedede;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    padding: 1.67em;
    box-sizing: border-box;
    font-size: 90%;
    transition: background-color 125ms ease-out;
    cursor: pointer;
}
.retailer-view-switch a svg {
    display: inline-block;
    width: 1.33em;
    height: 1.33em;
    fill: #000;
    margin-right: 1.25em;
    vertical-align: -0.15em;
}
.retailer-view-switch a.switch-map svg {
    margin-right: 0.8em;
}
.retailer-view-switch a:hover {
    background-color: #cf0;
}
.retailer-view-switch a.active {
    background-color: #fff;
}
.mobile-filter {
    background-color: #fff;
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
.mobile-filter a {
    display: block;
    position: relative;
    padding: 1.8rem 1.5rem;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 80%;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 125ms ease-out;
}
.mobile-filter a:hover {
    background-color: #cf0;
}
.mobile-filter svg {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 1rem;
    height: 1rem;
    fill: #000;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: -webkit-transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mobile-filter ul {
    font-style: italic;
    letter-spacing: 0.1em;
    padding: 0 1.5rem;
    font-size: 90%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mobile-filter li {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    padding: 1.125rem 0;
    cursor: pointer;
    transition: padding-left 125ms ease-out;
}
.mobile-filter li:first-child {
    border-top: none;
    padding-top: 1.875rem;
}
.mobile-filter li:last-child {
    padding-bottom: 1.875rem;
}
.mobile-filter li:hover {
    padding-left: 1rem;
}
.mobile-filter.open a {
    background-color: #dedede;
}
.mobile-filter.open svg {
    -webkit-transform: translateY(-50%) rotateX(180deg);
    transform: translateY(-50%) rotateX(180deg);
}
.mobile-filter.open ul {
    max-height: 18.75rem;
}
.desktop-opts {
    display: none;
    position: relative;
    background-color: #fff;
    padding: 3rem;
}
.desktop-opts .form-wrap {
    max-width: 1200px;
    margin: 0 auto;
}
.desktop-opts form {
    font-size: 80%;
    width: 25rem;
    border-bottom-color: #aaa;
    padding: 1em 0 0 0;
    margin-top: 0;
}
.desktop-opts form input {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 1.5em;
    letter-spacing: 0.11em;
    width: calc(100% - 2.5em);
}
.desktop-opts form input::-webkit-input-placeholder {
    color: #4e4e4e;
    opacity: 1;
}
.desktop-opts form input:-ms-input-placeholder {
    color: #4e4e4e;
    opacity: 1;
}
.desktop-opts form input::-ms-input-placeholder {
    color: #4e4e4e;
    opacity: 1;
}
.desktop-opts form input::placeholder {
    color: #4e4e4e;
    opacity: 1;
}
.desktop-opts form a svg {
    fill: #000;
    width: 1.4em;
    height: 1.4em;
}
.desktop-opts form a:hover svg {
    fill: #4e4e4e;
}
.desktop-opts .retailer-filter {
    position: absolute;
    top: 3rem;
    left: calc(100% - 300px);
    right: 2.25rem;
    margin-left: 2.25rem;
}
.desktop-opts .retailer-filter a::before {
    content: "";
    position: absolute;
    left: -2.25rem;
    top: 0;
    height: 100%;
    width: 1px;
    background: #aaa;
}
.store-locator-results {
    position: relative;
    height: 400px;
    min-height: 50vh;
    background-color: #f6f6f6;
}
.store-locator-results .store-locator-results__panel,
.store-locator-results .store-locator-results__map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 300ms ease;
}
.store-locator-results .store-locator-results__panel.show,
.store-locator-results .store-locator-results__map.show {
    opacity: 1;
}
.store-locator-results .store-locator-results__panel.active,
.store-locator-results .store-locator-results__map.active {
    z-index: 2;
}
.store-locator-results .store-locator-results__panel {
    overflow: auto;
    background-color: #f6f6f6;
}
.store-locator-results__panel .none,
.store-locator-results__panel .show-all-button {
    color: #000;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
}
.store-locator-results__panel .none {
    display: none;
    padding: 3rem 1.5rem;
}
.store-locator-results__panel .show-all-button {
    display: none;
    text-decoration: none;
    padding: 1.5rem;
    background-color: #fff;
    transition: background-color 125ms ease-out;
}
.store-locator-results__panel .show-all-button:hover,
.store-locator-results__panel .show-all-button:focus {
    background-color: #cf0;
}
.results-item {
    background: #fff;
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 1.5rem;
    transition: background-color 125ms ease-out, border-color 125ms ease-out;
    cursor: pointer;
    font-size: 90%;
}
.results-item:hover {
    background-color: #dedede;
    border-color: transparent;
}
.results-item.state-selected {
    background-color: #cf0;
}
.results-item__retailer-name {
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 0.8em;
}
.results-item__retailer-address,
.results-item__retailer-phone {
    line-height: 1.5;
    color: #313131;
    opacity: 0.8;
}
.results-item__retailer-phone {
    display: none;
    margin-top: 0.5em;
}
.results-item__retailer-links {
    font-size: 85%;
    margin-top: 1.25em;
}
.results-item__retailer-links a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 1.75em;
    color: #000;
}
.results-item__retailer-links a svg {
    position: inline-block;
    vertical-align: -0.5em;
    margin-right: 0.6em;
    width: 1.9em;
    height: 1.9em;
    fill: #313131;
    opacity: 0.5;
    transition: opacity 125ms ease-out;
}
.results-item__retailer-links a:last-child {
    margin-right: 0;
}
.results-item__retailer-links a:hover svg {
    opacity: 1;
}
.cluster-marker {
    position: absolute;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url("../img/map-cluster-marker.svg");
    cursor: pointer;
    text-indent: -50px;
    overflow: hidden;
}
@media (min-width: 720px) {
    .page-retailers .hero .retailer-search-form,
    .retailer-view-switch,
    .mobile-filter {
        display: none;
    }
    .page-retailers .hero h1 {
        margin-top: 0;
    }
    .desktop-opts {
        display: block;
    }
    .retailer-hero {
        padding-top: 4.5rem;
        padding-bottom: 9rem;
    }
    .store-locator-results {
        display: -ms-flexbox;
        display: flex;
        height: 600px;
    }
    .store-locator-results .store-locator-results__panel,
    .store-locator-results .store-locator-results__map {
        position: relative;
        top: auto;
        left: auto;
        height: 100%;
        opacity: 1;
    }
    .store-locator-results .store-locator-results__panel {
        width: 300px;
        max-width: 100%;
    }
    .store-locator-results .store-locator-results__map {
        width: calc(100% - 300px);
    }
    .results-item {
        padding: 2.25rem;
    }
    .results-item__retailer-phone {
        display: block;
    }
    .results-item__retailer-links {
        margin-top: 1.875rem;
    }
    .results-item__retailer-links .phone-link {
        display: none;
    }
}
@media (min-width: 840px) {
    .desktop-opts form {
        width: 32rem;
    }
    .desktop-opts .retailer-filter {
        left: calc(100% - 320px);
    }
    .store-locator-results {
        height: 700px;
    }
    .store-locator-results .store-locator-results__panel {
        width: 320px;
    }
    .store-locator-results .store-locator-results__map {
        width: calc(100% - 320px);
    }
}
@media (min-width: 1500px) {
    .store-locator-results {
        height: 800px;
    }
}
.page-info .herobgimage {
    background-image: url("../img/hero-rackets.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 90% 100%;
}
.page-info .pagebody {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-info .pagebody {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-info .pagebody .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-info .pagebody .grid > div {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-info .pagebody .grid > div {
        width: calc((100% - 2rem) / 1);
    }
}
@media (min-width: 1100px) {
    .page-info .pagebody .grid > div {
        width: calc((100% - 2.25rem) / 1.5);
        margin-left: calc(((100% - 9rem) / 6) + 1.5rem - 0.5px);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-info .pagebody .grid > div {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 1100px) and (min-width: 900px) {
    .page-info .pagebody .grid > div {
        margin-left: calc(((100% - 12rem) / 6) + 2rem - 0.5px);
    }
}
.page-contact .herobgimage {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url("../img/contact-hero-bg.jpg");
}
.page-contact .herobgimage.vtop {
    background-position-y: 5%;
}
.page-contact .herobgimage.vbottom {
    background-position-y: 95%;
}
.page-contact .herobgimage.vcustom-tennis {
    background-position-y: 22%;
}
.page-contact .herobgimage.vcustom-squash {
    background-position-y: 56%;
}
.page-contact .herobgimage.hleft {
    background-position-x: 20%;
}
.page-contact .herobgimage.hright {
    background-position-x: 80%;
}
.page-contact .contactlinks {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-contact .contactlinks {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-contact .contactlinks .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0.75em 0;
}
.page-contact .contactlinks .region {
    border-bottom: solid 1px #dedede;
    padding-bottom: 3em;
    margin-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
    max-width: 18em;
}
.page-contact .contactlinks .region:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.page-contact .contactlinks h3,
.page-contact .contactlinks a {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #000;
    text-transform: uppercase;
}
.page-contact .contactlinks h3 {
    font-size: 175%;
    margin-bottom: 1em;
}
.page-contact .contactlinks a {
    text-decoration: none;
    font-size: 100%;
    border-bottom: solid 2px transparent;
    padding-bottom: 0.1em;
    transition: border-color 100ms ease-out;
}
.page-contact .contactlinks a:hover {
    border-bottom-color: #cf0;
}
.page-contact .contactlinks ul {
    list-style: none;
}
.page-contact .contactlinks ul li {
    padding: 0;
    margin: 0.9em 0 0.6em 0;
}
.page-contact .contactlinks ul li::before {
    display: none;
}
@media (min-width: 920px) {
    .page-contact .contactlinks {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .page-contact .contactlinks .wrap::after {
        content: "";
        display: table;
        clear: both;
    }
    .page-contact .contactlinks .inner {
        position: relative;
        padding: 0;
    }
    .page-contact .contactlinks .inner::before,
    .page-contact .contactlinks .inner::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        height: 100%;
        background-color: #dedede;
    }
    .page-contact .contactlinks .inner::before {
        left: 33.333%;
    }
    .page-contact .contactlinks .inner::after {
        left: 66.667%;
    }
    .page-contact .contactlinks .region {
        float: left;
        width: 33.33%;
        max-width: none;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .page-contact .contactlinks h3 {
        margin-bottom: 1.75em;
    }
    .page-contact .contactlinks ul li:last-child {
        margin-bottom: 0;
    }
}
@media (min-width: 1200px) {
    .page-contact .contactlinks {
        padding-top: 10.5rem;
        padding-bottom: 10.5rem;
    }
    .page-contact .contactlinks h3 {
        font-size: 200%;
    }
}
.page-team .pagebody {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-team .pagebody {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-team .pagebody .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-team .angleabove {
    position: relative;
}
.page-team .angleabove::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 18vw;
}
.page-team .angleabove.white.zag::before {
    background-image: linear-gradient(-10deg, #fff 49.75%, rgba(255, 255, 255, 0) 50.25%);
}
.page-team .angleabove.white.zag.better::before {
    background-image: linear-gradient(-10deg, #fff calc(50% - 1px), rgba(255, 255, 255, 0) calc(50% + 1px));
}
.page-team .angleabove.grey.zig::before {
    background-image: linear-gradient(10deg, #f6f6f6 49.75%, rgba(246, 246, 246, 0) 50.25%);
}
.page-team .angleabove.grey.zig.better::before {
    background-image: linear-gradient(10deg, #f6f6f6 calc(50% - 1px), rgba(246, 246, 246, 0) calc(50% + 1px));
}
.page-team .angleabove.grey.zag::before {
    background-image: linear-gradient(-10deg, #f6f6f6 49.75%, rgba(246, 246, 246, 0) 50.25%);
}
.page-team .angleabove.grey.zag.better::before {
    background-image: linear-gradient(-10deg, #f6f6f6 calc(50% - 1px), rgba(246, 246, 246, 0) calc(50% + 1px));
}
.page-team .angleabove.green.zag::before {
    background-image: linear-gradient(-10deg, #cf0 49.75%, rgba(204, 255, 0, 0) 50.25%);
}
.page-team .angleabove.green.zag.better::before {
    background-image: linear-gradient(-10deg, #cf0 calc(50% - 1px), rgba(204, 255, 0, 0) calc(50% + 1px));
}
.page-team .angleabove.blue.zig::before {
    background-image: linear-gradient(10deg, #002e6c 49.75%, rgba(0, 46, 108, 0) 50.25%);
}
.page-team .angleabove.blue.zig.better::before {
    background-image: linear-gradient(10deg, #002e6c calc(50% - 1px), rgba(0, 46, 108, 0) calc(50% + 1px));
}
.page-team p.bold {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    line-height: 2;
    max-width: 58em;
    margin: 0 auto;
    font-size: 90%;
}
@media (min-width: 720px) {
    .page-team p.bold {
        font-size: 100%;
    }
}
.page-team .secthead {
    color: #000;
    padding: 0;
    text-align: center;
    margin: 0 0 1.5em 0;
    letter-spacing: 0.1em;
    font-size: 120%;
}
.page-team .secthead::after {
    display: none;
}
@media (min-width: 440px) {
    .page-team .secthead {
        font-size: 150%;
    }
}
@media (min-width: 720px) {
    .page-team .secthead {
        font-size: 180%;
    }
}
@media (min-width: 900px) {
    .page-team .secthead {
        font-size: 220%;
    }
}
@media (min-width: 1100px) {
    .page-team .secthead {
        font-size: 280%;
    }
}
.page-team .video-swap-v2 {
    position: relative;
}
.page-team .video-swap-v2:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
}
.page-team .video-swap-v2 a {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: #000;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.page-team .video-swap-v2 a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.5rem;
    height: 3.5rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: visible;
}
.page-team .video-swap-v2 a svg circle {
    stroke: #cf0;
    -webkit-transform-origin: 51.5px 51.5px;
    transform-origin: 51.5px 51.5px;
    transition: -webkit-transform 150ms ease-in-out;
    transition: transform 150ms ease-in-out;
    transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}
@media (min-width: 420px) {
    .page-team .video-swap-v2 a svg {
        width: 4.5rem;
        height: 4.5rem;
    }
}
@media (min-width: 720px) {
    .page-team .video-swap-v2 a svg {
        width: 6rem;
        height: 6rem;
    }
}
@media (min-width: 1100px) {
    .page-team .video-swap-v2 a svg {
        width: 8rem;
        height: 8rem;
    }
}
.page-team .video-swap-v2 a.hide {
    opacity: 0;
}
.page-team .video-swap-v2 iframe,
.page-team .video-swap-v2 object,
.page-team .video-swap-v2 embed {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}
.page-team .video-swap-v2:hover svg circle {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.page-team .teamhero {
    position: relative;
    height: 300px;
    min-height: 152px;
    max-height: 684px;
    overflow: hidden;
}
.page-team .teamhero .herobgimage {
    top: auto;
    bottom: 0;
    height: 110%;
    -webkit-animation: fadeIn 3s 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 3s 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-team .teamhero .logo {
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 50%;
    width: 20vw;
    min-width: 140px;
    max-width: 286px;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: fadeIn 3s 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: fadeIn 3s 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page-team .teamhero .sg {
    display: none;
    position: absolute;
    z-index: 1;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation-iteration-count: infinite, 1;
    animation-iteration-count: infinite, 1;
    -webkit-animation-duration: 120s, 3s;
    animation-duration: 120s, 3s;
    -webkit-animation-timing-function: linear, cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: linear, cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0s, 2s;
    animation-delay: 0s, 2s;
}
.page-team .teamhero .sg.tennis {
    background-image: url("../img/supergraphic-team-tennis.svg");
    width: 61vw;
    height: 61vw;
    left: 16%;
    top: 58%;
    -webkit-animation-name: spin-center-ccw, fadeIn;
    animation-name: spin-center-ccw, fadeIn;
}
.page-team .teamhero .sg.squash {
    background-image: url("../img/supergraphic-team-squash.svg");
    width: 46vw;
    height: 46vw;
    left: 15%;
    top: 54%;
    -webkit-animation-name: spin-center, fadeIn;
    animation-name: spin-center, fadeIn;
}
.page-team .teamhero .sg.padel {
    background-image: url("../img/supergraphic-team-padel.svg");
    width: 55vw;
    height: 55vw;
    left: 89%;
    top: 75%;
    -webkit-animation-name: spin-center-ccw, fadeIn;
    animation-name: spin-center-ccw, fadeIn;
}
.page-team .teamhero .sg.badminton {
    background-image: url("../img/supergraphic-team-badminton.svg");
    width: 55vw;
    height: 55vw;
    left: 89%;
    top: 75%;
    -webkit-animation-name: spin-center, fadeIn;
    animation-name: spin-center, fadeIn;
}
@media (min-width: 640px) {
    .page-team .teamhero {
        height: 47.5vw;
    }
}
@media (min-width: 720px) {
    .page-team .teamhero .sg {
        display: block;
    }
}
@media (min-width: 900px) {
    .page-team .generic-underhero .inner {
        position: relative;
        z-index: 2;
        margin-top: -4vw;
    }
}
.page-team .stickybuttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1em 0;
    padding: calc((100vw - 3rem) * 0.04 / 3) 0;
}
.page-team .stickybuttons a {
    width: 24%;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 720px) {
    .page-team .stickybuttons {
        display: -ms-flexbox;
        display: flex;
    }
}
.page-team .stickybuttonholder {
    display: none;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    background-color: #f6f6f6;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 4px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .page-team .stickybuttonholder {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.page-team .stickybuttonholder .stickybuttons {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.page-team .video-underhero {
    padding-top: 1px;
    padding-bottom: 1px;
}
.page-team .video-underhero .inner {
    position: relative;
    z-index: 2;
    margin-top: -150px;
    margin-bottom: 22vw;
}
.page-team .video-underhero p.bold {
    margin: 4em auto 5em auto;
}
.page-team .video-underhero .stickybuttons {
    display: none;
}
@media (min-width: 640px) {
    .page-team .video-underhero .inner {
        margin-top: -24vw;
    }
}
@media (min-width: 720px) {
    .page-team .video-underhero .stickybuttons {
        display: -ms-flexbox;
        display: flex;
    }
}
@media (min-width: 900px) {
    .page-team .video-underhero .inner {
        margin-bottom: 20vw;
    }
}
@media (min-width: 1400px) {
    .page-team .video-underhero .inner {
        margin-top: -335px;
        margin-bottom: calc(200px + 6vw);
    }
}
.page-team .juniors {
    background-color: #cf0;
    padding-top: 1px;
    padding-bottom: 1px;
}
.page-team .juniors .inner {
    position: relative;
    margin-top: 20px;
    margin-bottom: 110px;
}
.page-team .juniors .cell {
    width: calc((100% - 1.5rem) / 1);
    text-align: center;
}
@media (min-width: 900px) {
    .page-team .juniors .cell {
        width: calc((100% - 2rem) / 1);
    }
}
.page-team .juniors p.bold {
    max-width: 56em;
    margin-top: 4em;
    margin-bottom: 3em;
}
.page-team .juniors .jack {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: -21%;
    width: auto;
    height: 120%;
    -webkit-transform: translateX(-36%);
    transform: translateX(-36%);
}
@media (min-width: 600px) {
    .page-team .juniors .inner {
        margin-top: 10px;
        margin-bottom: 120px;
    }
    .page-team .juniors .cell {
        width: calc((100% - 1.8rem) / 1.2);
        margin-left: calc(((100% - 18rem) / 12) + 1.5rem - 0.5px);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-team .juniors .cell {
        width: calc((100% - 2.4rem) / 1.2);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-team .juniors .cell {
        margin-left: calc(((100% - 24rem) / 12) + 2rem - 0.5px);
    }
}
@media (min-width: 720px) {
    .page-team .juniors .inner {
        margin-bottom: 130px;
    }
    .page-team .juniors .grid {
        position: relative;
        z-index: 2;
    }
    .page-team .juniors .cell {
        width: calc((100% - 2.25rem) / 1.5);
        margin-left: calc(((100% - 4.5rem) / 3) + 1.5rem - 0.5px);
    }
}
@media (min-width: 720px) and (min-width: 900px) {
    .page-team .juniors .cell {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 720px) and (min-width: 900px) {
    .page-team .juniors .cell {
        margin-left: calc(((100% - 6rem) / 3) + 2rem - 0.5px);
    }
}
@media (min-width: 720px) {
    .page-team .juniors .jack {
        display: block;
    }
}
@media (min-width: 800px) {
    .page-team .juniors .jack {
        -webkit-transform: translateX(-26%);
        transform: translateX(-26%);
    }
}
@media (min-width: 900px) {
    .page-team .juniors .inner {
        margin-bottom: 150px;
    }
    .page-team .juniors .jack {
        -webkit-transform: translateX(-35%);
        transform: translateX(-35%);
    }
}
@media (min-width: 1000px) {
    .page-team .juniors .inner {
        margin-bottom: calc(70px + 10vw);
    }
    .page-team .juniors .jack {
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }
}
@media (min-width: 1100px) {
    .page-team .juniors .jack {
        top: -21%;
        height: 125%;
    }
}
@media (min-width: 1400px) {
    .page-team .juniors .inner {
        margin-top: calc(130px - 10vw);
    }
}
.page-team .academies {
    padding-top: 1px;
    padding-bottom: 1px;
}
.page-team .academies .inner {
    position: relative;
    z-index: 1;
    margin-top: 5vw;
    margin-bottom: 25vw;
}
.page-team .academies .cell {
    width: calc((100% - 1.5rem) / 1);
}
@media (min-width: 900px) {
    .page-team .academies .cell {
        width: calc((100% - 2rem) / 1);
    }
}
.page-team .academies h2 {
    text-align: left;
    margin: 1.5rem 0;
}
@media (min-width: 720px) {
    .page-team .academies h2 {
        font-size: 180%;
    }
}
.page-team .academies p {
    color: #000;
    font-size: 100%;
}
.page-team .academies img {
    display: block;
    margin-bottom: 2em;
    width: auto;
    height: 5em;
}
.page-team .academies .link {
    display: block;
}
.page-team .academies a {
    color: #0079bc;
    text-decoration: none;
}
.page-team .academies a:hover {
    color: #005889;
}
@media (min-width: 440px) {
    .page-team .academies img {
        height: 7em;
    }
}
@media (min-width: 720px) {
    .page-team .academies .inner {
        margin-top: -1rem;
        margin-bottom: calc(24vw - 2rem);
    }
    .page-team .academies .grid:first-child {
        margin-bottom: 0;
    }
    .page-team .academies .cell {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 720px) and (min-width: 900px) {
    .page-team .academies .cell {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 720px) {
    .page-team .academies .cell:nth-child(1) {
        padding-right: 3%;
    }
    .page-team .academies .cell:nth-child(2) {
        padding-left: 3%;
    }
    .page-team .academies img {
        height: 7.5em;
        margin-bottom: 3em;
    }
}
@media (min-width: 1280px) {
    .page-team .academies .inner {
        margin-top: calc(-10vw + 110px);
        margin-bottom: calc(15vw + 100px);
    }
}
.page-team .pros-head,
.page-team .pros-carousel,
.page-team .pros-foot {
    padding-top: 1px;
    padding-bottom: 1px;
}
.page-team .pros-head .inner {
    position: relative;
    z-index: 1;
    margin-top: -6vw;
}
.page-team .pros-head h2 {
    margin: 3em 0 2em 0;
}
.page-team .pros-foot .inner {
    margin-bottom: calc(20vw + 40px);
}
.page-team .pros-foot p.bold {
    max-width: 54em;
    margin-top: 5em;
}
@media (min-width: 600px) {
    .page-team .pros-foot p.bold {
        margin-top: 6em;
    }
}
@media (min-width: 720px) {
    .page-team .pros-foot .inner {
        margin-bottom: calc(20vw + 100px);
    }
}
.page-team .coaches {
    background-color: #002e6c;
    padding-top: 1px;
    padding-bottom: 1px;
}
.page-team .coaches .inner {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    margin-bottom: 120px;
}
.page-team .coaches .cell {
    width: calc((100% - 1.5rem) / 1);
    text-align: center;
}
@media (min-width: 900px) {
    .page-team .coaches .cell {
        width: calc((100% - 2rem) / 1);
    }
}
.page-team .coaches h2,
.page-team .coaches p {
    color: #fff;
}
.page-team .coaches p.bold {
    max-width: 56em;
    margin-top: 0;
    margin-bottom: 3em;
}
.page-team .coaches .patrick {
    display: none;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -18%;
    width: auto;
    height: 170%;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
}
@media (min-width: 540px) {
    .page-team .coaches .inner {
        margin-bottom: 140px;
    }
}
@media (min-width: 600px) {
    .page-team .coaches .inner {
        margin-top: 40px;
    }
    .page-team .coaches .cell {
        width: calc((100% - 1.8rem) / 1.2);
        margin-left: calc(((100% - 18rem) / 12) + 1.5rem - 0.5px);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-team .coaches .cell {
        width: calc((100% - 2.4rem) / 1.2);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-team .coaches .cell {
        margin-left: calc(((100% - 24rem) / 12) + 2rem - 0.5px);
    }
}
@media (min-width: 720px) {
    .page-team .coaches .inner {
        margin-bottom: calc(10vw + 100px);
    }
    .page-team .coaches .grid {
        position: relative;
        z-index: 2;
    }
    .page-team .coaches .cell {
        float: none;
        margin: 0;
        width: auto;
        width: calc((100% - 2.25rem) / 1.5);
    }
}
@media (min-width: 720px) and (min-width: 900px) {
    .page-team .coaches .cell {
        width: calc((100% - 3rem) / 1.5);
    }
}
@media (min-width: 720px) {
    .page-team .coaches .patrick {
        display: block;
    }
}
@media (min-width: 800px) {
    .page-team .coaches .patrick {
        height: 180%;
    }
}
@media (min-width: 930px) {
    .page-team .coaches .inner {
        margin-bottom: calc(10vw + 180px);
    }
    .page-team .coaches .cell {
        width: calc((100% - 3rem) / 2);
        margin-left: calc(((100% - 18rem) / 12) + 1.5rem - 0.5px);
    }
}
@media (min-width: 930px) and (min-width: 900px) {
    .page-team .coaches .cell {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 930px) and (min-width: 900px) {
    .page-team .coaches .cell {
        margin-left: calc(((100% - 24rem) / 12) + 2rem - 0.5px);
    }
}
@media (min-width: 930px) {
    .page-team .coaches .patrick {
        bottom: -30%;
        height: 200%;
    }
}
@media (min-width: 1000px) {
    .page-team .coaches .inner {
        margin-top: 60px;
    }
    .page-team .coaches .patrick {
        height: 205%;
        -webkit-transform: translateX(20%);
        transform: translateX(20%);
    }
}
@media (min-width: 1200px) {
    .page-team .coaches .patrick {
        height: 225%;
        bottom: -40%;
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
    }
}
@media (min-width: 1400px) {
    .page-team .coaches .inner {
        margin-top: calc(180px - 10vw);
    }
}
.page-team .ambassadors-head,
.page-team .ambassadors-carousel,
.page-team .ambassadors-foot {
    padding-top: 1px;
    padding-bottom: 1px;
}
.page-team .ambassadors-head {
    position: relative;
    z-index: 2;
}
.page-team .ambassadors-head .inner {
    position: relative;
    z-index: 1;
    margin-top: -6vw;
}
.page-team .ambassadors-head h2 {
    margin: 3em 0 2em 0;
}
.page-team .ambassadors-foot {
    padding-bottom: 8rem;
}
.page-team .ambassadors-foot .blurb {
    max-width: 54em;
    margin-top: 5em;
}
.page-team .ambassadors-foot .totop {
    margin-top: 10em;
}
.page-team .ambassadors-foot .totop a {
    color: #000;
    text-decoration: none;
}
.page-team .ambassadors-foot .totop svg {
    display: inline-block;
    vertical-align: 0%;
    width: 0.75em;
    height: 0.75em;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    margin-left: 0.75em;
    transition: fill 125ms ease-out;
}
.page-team .ambassadors-foot .totop a:hover {
    color: #005889;
}
.page-team .ambassadors-foot .totop a:hover svg {
    fill: #005889;
}
@media (min-width: 600px) {
    .page-team .ambassadors-foot .blurb {
        margin-top: 6em;
    }
}
.page-team .playergrid {
    margin-top: 5rem;
    margin-bottom: 4rem;
}
@media (min-width: 900px) {
    .page-team .playergrid {
        margin-top: 7rem;
        margin-bottom: 7rem;
    }
}
.page-team .playergrid .player-link {
    width: calc((100% - 1.5rem) / 1);
    background-color: #fff;
    text-decoration: none;
    position: relative;
    transition: background-position 125ms ease-out;
    background-image: linear-gradient(-30deg, transparent 50%, #cf0 50%);
    background-size: 200% 200%;
    background-position: 0% 100%;
    background-repeat: no-repeat;
}
@media (min-width: 900px) {
    .page-team .playergrid .player-link {
        width: calc((100% - 2rem) / 1);
    }
}
.page-team .playergrid .player-link .image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #dedede;
    width: 100%;
}
.page-team .playergrid .player-link .image:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 72.2222222222%;
}
.page-team .playergrid .player-link .image.vtop {
    background-position-y: 5%;
}
.page-team .playergrid .player-link .image.vbottom {
    background-position-y: 95%;
}
.page-team .playergrid .player-link .image.vcustom-tennis {
    background-position-y: 22%;
}
.page-team .playergrid .player-link .image.vcustom-squash {
    background-position-y: 56%;
}
.page-team .playergrid .player-link .image.hleft {
    background-position-x: 20%;
}
.page-team .playergrid .player-link .image.hright {
    background-position-x: 80%;
}
.page-team .playergrid .player-link .details {
    padding: 2rem 2rem 6.5rem 2rem;
}
.page-team .playergrid .player-link span {
    display: block;
    color: #4e4e4e;
    transition: color 125ms ease-out;
}
.page-team .playergrid .player-link span a {
    color: inherit;
    text-decoration: none;
}
.page-team .playergrid .player-link .name,
.page-team .playergrid .player-link .read {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.page-team .playergrid .player-link .bottom {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
}
.page-team .playergrid .player-link .bottom::after {
    content: "";
    display: table;
    clear: both;
}
.page-team .playergrid .player-link .name {
    font-size: 130%;
}
.page-team .playergrid .player-link .read {
    float: left;
    font-size: 80%;
    line-height: 1.25rem;
}
.page-team .playergrid .player-link .intro {
    margin-top: 1.5em;
}
.page-team .playergrid .player-link .social {
    float: right;
    position: relative;
}
.page-team .playergrid .player-link .social::before {
    display: none;
    content: "";
    position: absolute;
    right: 100%;
    right: calc(100% + 0.33rem);
    top: 40%;
    width: 1.25rem;
    height: 3px;
    background-color: #cf0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-team .playergrid .player-link .social a {
    margin-left: 1.15rem;
}
.page-team .playergrid .player-link .social svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: #4e4e4e;
    transition: fill 125ms ease-out;
}
.page-team .playergrid .player-link:hover {
    background-position: 0% 0%;
}
.page-team .playergrid .player-link:hover span {
    color: #000;
}
.page-team .playergrid .player-link:hover .social svg {
    fill: #000;
}
@media (min-width: 400px) {
    .page-team .playergrid .player-link .details {
        padding: 3.5rem 3.5rem 8rem 3.5rem;
    }
    .page-team .playergrid .player-link .name {
        font-size: 170%;
    }
    .page-team .playergrid .player-link .bottom {
        left: 3.5rem;
        right: 3.5rem;
        bottom: 3.5rem;
    }
    .page-team .playergrid .player-link .read {
        font-size: 90%;
        line-height: 1.5rem;
    }
    .page-team .playergrid .player-link .social::before {
        display: block;
    }
    .page-team .playergrid .player-link .social svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}
@media (min-width: 600px) {
    .page-team .playergrid .player-link {
        width: calc((100% - 3rem) / 2);
    }
}
@media (min-width: 600px) and (min-width: 900px) {
    .page-team .playergrid .player-link {
        width: calc((100% - 4rem) / 2);
    }
}
@media (min-width: 600px) {
    .page-team .playergrid .player-link .details {
        padding: 2rem 2rem 6.5rem 2rem;
    }
    .page-team .playergrid .player-link .name {
        font-size: 130%;
    }
    .page-team .playergrid .player-link .bottom {
        left: 2rem;
        right: 2rem;
        bottom: 2rem;
    }
    .page-team .playergrid .player-link .read {
        line-height: 1.25rem;
    }
    .page-team .playergrid .player-link .social::before {
        display: none;
    }
    .page-team .playergrid .player-link .social svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}
@media (min-width: 780px) {
    .page-team .playergrid .player-link .details {
        padding: 3.5rem 3.5rem 8rem 3.5rem;
    }
    .page-team .playergrid .player-link .name {
        font-size: 170%;
    }
    .page-team .playergrid .player-link .bottom {
        left: 3.5rem;
        right: 3.5rem;
        bottom: 3.5rem;
    }
    .page-team .playergrid .player-link .read {
        font-size: 90%;
        line-height: 1.5rem;
    }
    .page-team .playergrid .player-link .social::before {
        display: block;
    }
    .page-team .playergrid .player-link .social svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}
.page-careers .hero {
    overflow: hidden;
}
.page-careers .herobgimage {
    top: auto;
    bottom: 0;
    height: 125%;
    background-image: url("../img/hero-careers-small.jpg");
    background-size: auto 100%;
    background-position: 50% 100%;
    background-repeat: repeat-x;
}
@media (min-width: 720px) {
    .page-careers .herobgimage {
        background-image: url("../img/hero-careers-large.jpg");
    }
}
.page-careers .pagebody {
    padding: 3rem 1.5rem;
}
@media (min-width: 900px) {
    .page-careers .pagebody {
        padding: 5.01rem 3rem 6rem 3rem;
    }
}
.page-careers .pagebody .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2rem;
}
.page-careers .pagebody h2 {
    margin-bottom: 2em;
}
.page-careers .pagebody h2.big {
    font-size: 160%;
    margin: 0;
    padding: 0;
}
.page-careers .pagebody h2.big::after {
    display: none;
}
.page-careers .pagebody h2,
.page-careers .pagebody p,
.page-careers .pagebody ul {
    max-width: 57rem;
}
.page-careers .pagebody table {
    width: 100%;
    border-spacing: 0;
}
.page-careers .pagebody tr {
    border-bottom: solid 1px #dedede;
}
.page-careers .pagebody td,
.page-careers .pagebody th {
    padding: 1.75rem 1.75rem 1.75rem 0;
}
.page-careers .pagebody td {
    font-size: 100%;
    transition: background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-careers .pagebody td:first-child {
    padding-right: 3.5rem;
}
.page-careers .pagebody td a {
    text-decoration: none;
}
.page-careers .pagebody td a:hover {
    color: #4e4e4e;
}
.page-careers .pagebody th {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #666;
    text-align: left;
    font-size: 90%;
    vertical-align: middle;
}
.page-careers .pagebody th:last-child {
    padding-right: 0;
}
.page-careers .pagebody tbody tr {
    cursor: pointer;
}
.page-careers .pagebody tbody tr:hover td {
    background-color: #cf0;
}
.page-careers .pagebody tbody tr:hover td:first-child {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
.page-careers .pagebody .back {
    position: relative;
    top: -2rem;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 90%;
}
.page-careers .pagebody .back a {
    text-decoration: none;
    color: #666;
}
.page-careers .pagebody .back svg {
    display: inline-block;
    vertical-align: -8%;
    margin-right: 1.25em;
    width: 1em;
    height: 1em;
    fill: #666;
    transition: fill 125ms ease-out;
}
.page-careers .pagebody .back a:hover {
    color: #1a1a1a;
}
.page-careers .pagebody .back a:hover svg {
    fill: #1a1a1a;
}
.page-careers .pagebody .apply {
    margin-top: 6em;
}
.page-careers .pagebody .share {
    margin-top: 5rem;
}
.page-careers .pagebody .share h3 {
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 0.66em;
}
.page-careers .pagebody .share a {
    display: inline-block;
    margin-right: 1.33rem;
}
.page-careers .pagebody .share a:last-child {
    margin-right: 0;
}
.page-careers .pagebody .share a svg {
    display: block;
    width: 1.5rem;
    height: 1.5em;
    fill: #999;
    transition: fill 125ms ease-out;
}
.page-careers .pagebody .share a:hover svg {
    fill: #1a1a1a;
}
@media (min-width: 720px) {
    .page-careers .pagebody .inner {
        padding-bottom: 4rem;
    }
    .page-careers .pagebody h2.big {
        font-size: 210%;
        margin-top: 1em;
    }
    .page-careers .pagebody td {
        font-size: 115%;
    }
    .page-careers .pagebody th {
        font-size: 100%;
    }
}
@media (min-width: 900px) {
    .page-careers .pagebody .back {
        top: -3rem;
    }
}
@media (min-width: 1100px) {
    .page-careers .pagebody .inner {
        padding-bottom: 8rem;
    }
}
.debug-vpsize,
.debug-gridmessage,
.debug-local,
.debug-translation {
    position: fixed;
    z-index: 9999;
    font-size: 9pt;
    background: #cf0;
    color: #000;
    padding: 0.5em 0.75em;
}
.debug-gridmessage {
    bottom: 0;
    left: 0;
    cursor: pointer;
}
.debug-vpsize {
    bottom: 0;
    right: 0;
}
.debug-local {
    top: 0;
    left: 0;
}
.debug-translation {
    top: 0;
    right: 0;
}
.grid-overlay {
    display: none;
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100vw;
    min-width: 320px;
    height: 100vh;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 900px) {
    .grid-overlay {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.grid-overlay .grid div {
    width: calc((100% - 18rem) / 12);
    height: 100vh;
    background-color: pink;
    opacity: 0.25;
}
@media (min-width: 900px) {
    .grid-overlay .grid div {
        width: calc((100% - 24rem) / 12);
    }
}
.grid-overlay.show {
    display: block;
}
.translation-errors {
    display: none;
    position: relative;
    z-index: 2;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #e4002b;
}
@media (min-width: 900px) {
    .translation-errors {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
.translation-errors .inner {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.translation-errors ul {
    margin-top: 1.5rem;
}
.translation-errors li {
    font-weight: bold;
    color: #fff;
    line-height: 1.5;
    padding-left: 1.5rem;
    padding-top: 0.5em;
    position: relative;
}
.translation-errors li::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    content: ">";
}
.translation-stats {
    display: none;
}


@media (min-width: 700px) {
    .slide>div {
        height: 250px !important;
    }
    .slides {
        height: 250px;
    }
}

@media (min-width: 800px) {
    .slide>div {
        height: 270px !important;
    }
    .slides {
        height: 270px;
    }    
}

@media (min-width: 900px) {
    .slide>div {
        height: 300px !important;
    }
    .slides {
        height: 300px;
    }    
}

@media (min-width: 1000px) {
    .slide>div {
        height: 330px !important;
    }
    .slides {
        height: 330px;
    }    
}

@media (min-width: 1100px) {
    .slide>div {
        height: 360px !important;
    }
    .slides {
        height: 360px;
    }    
}

@media (min-width: 1200px) {
    .slide>div {
        height: 390px !important;
    }
    .slides {
        height: 390px;
    }    
}

@media (min-width: 1300px) {
    .slide>div {
        height: 410px !important;
    }
    .slides {
        height: 410px;
    }    
}

@media (min-width: 1400px) {
    .slide>div {
        height: 440px !important;
    }
    .slides {
        height: 440px;
    }    
}

@media (min-width: 1500px) {
    .slide>div {
        height: 480px !important;
    }
    .slides {
        height: 480px;
    }    
}

@media (min-width: 1600px) {
    .slide>div {
        height: 520px !important;
    }
    .slides {
        height: 520px;
    }    
}

@media (min-width: 1700px) {
    .slide>div {
        height: 550px !important;
    }
    .slides {
        height: 550px;
    }    
}

@media (min-width: 1800px) {
    .slide>div {
        height: 570px !important;
    }
    .slides {
        height: 570px;
    }    
}


.getprice {
    min-height: 340px;
}

.getprice input[type='text'] {
    border: 1px solid #cccccc;
    height: 30px;
    width: 300px;
    margin: 4px 0;
}

.getprice textarea {
    border: 1px solid #cccccc;
    width: 400px;
    margin: 4px 0;
}

.getprice label {
    float: left;
    display: block;
    width:200px;
    height: 30px;
    margin: 4px 0;
}

.getprice .text-danger {
    color: red;
}

.getprice input[type='submit'] {
    float: none !important;
    display: inline-block;
    margin-left: 200px;
    margin-bottom: 20px;
    width: 300px;
}


@media (max-width: 600px) {
    .getprice input[type='submit'] {
        margin-left: 0;
    }

    .getprice textarea {
        width: 300px;
    }
}


.gallery > ul {
    margin-bottom: 0;
}
.gallery > ul > li {
    float: left;
    margin-bottom: 15px;
    margin-right: 20px;
    width: 200px;
}
.gallery > ul > li::before{
    background-color: #fff !important;
}
.gallery > ul > li a {
    border: 3px solid #FFF;
    border-radius: 3px;
    display: block;
    overflow: hidden;
    position: relative;
    float: left;
}
.gallery > ul > li a > img {
    -webkit-transition: -webkit-transform 0.15s ease 0s;
    -moz-transition: -moz-transform 0.15s ease 0s;
    -o-transition: -o-transform 0.15s ease 0s;
    transition: transform 0.15s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    height: 100%;
    width: 100%;
}
.gallery > ul > li a:hover > img {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
.gallery > ul > li a:hover .gallery-poster > img {
    opacity: 1;
}
.gallery > ul > li a .gallery-poster {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color 0.15s ease 0s;
    -o-transition: background-color 0.15s ease 0s;
    transition: background-color 0.15s ease 0s;
}
.gallery > ul > li a .gallery-poster > img {
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
}
.gallery > ul > li a:hover .gallery-poster {
    background-color: rgba(0, 0, 0, 0.5);
}
.gallery .justified-gallery > a > img {
    -webkit-transition: -webkit-transform 0.15s ease 0s;
    -moz-transition: -moz-transform 0.15s ease 0s;
    -o-transition: -o-transform 0.15s ease 0s;
    transition: transform 0.15s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    height: 100%;
    width: 100%;
}
.gallery .justified-gallery > a:hover > img {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}
.gallery .justified-gallery > a:hover .gallery-poster > img {
    opacity: 1;
}
.gallery .justified-gallery > a .gallery-poster {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color 0.15s ease 0s;
    -o-transition: background-color 0.15s ease 0s;
    transition: background-color 0.15s ease 0s;
}
.gallery .justified-gallery > a .gallery-poster > img {
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
}
.gallery .justified-gallery > a:hover .gallery-poster {
    background-color: rgba(0, 0, 0, 0.5);
}
.gallery .video .gallery-poster img {
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    opacity: 0.8;
    width: 48px;
}
.gallery.dark > ul > li a {
    border: 3px solid #04070a;
}

nav.wide.main-nav a:nth-of-type(3) {
  display: none !important;
}
ul.navigation-mobile li:nth-of-type(3){
  display: none !important;
}


.sports-name-title h2 {
  text-align: left;                 
  margin-left: 5%;                  
  font-size: clamp(16px, 2vw, 24px);
  margin-top: 20px;
  margin-bottom: 20px;
}


.imgPlayers {
  display: grid !important;
  justify-items: center !important; 
  row-gap: 20px !important;         
  padding: 10px !important;
}

.imgPlayers img {
  max-width: 90% !important;  
  height: auto !important;    
  border-radius: 8px !important;
  object-fit: contain !important;
}