/* ~*~*~ Common ~*~*~ */
.mouse-focus .collection-page *:focus {
    outline: none;
}

.collection-logo {
    max-width: 320px;
}
ol:not(.continue) {
    counter-reset: my-awesome-counter;
}
ol {
    list-style: none;
    padding-left: 40px;
}
ol li {
    counter-increment: my-awesome-counter;
    position: relative;
}
ol li::before {
    content: counter(my-awesome-counter);
    color: #fff;
    font-weight: bold;
    position: absolute;
    font-size: 1.25rem;
    vertical-align: middle;
    --size: 2rem;
    padding-left: 1px;
    left: calc(-1 * var(--size) - 10px);
    line-height: 1.9rem;
    width: var(--size);
    height: var(--size);
    top: 0;
    background-color: #58cfff;
    border-radius: 50%;
    text-align: center;
}
@media only screen and (max-width: 768px) {
    .full-width-mobile {
        width: calc(100% + 32px);
        margin-left: -16px;
        right: 0;
    }
    ol {
        padding-left: 0;
    }
    ol li::before {
        position: static;
        margin: 0 auto 0.5rem;
        display: block;
    }
}

/* ~*~*~ Brine Advanced/Intermediate Collection ~*~*~ */
.brine-advanced .category-slider > .slick-arrow {
    background-color: #b79e69 !important;
}
.brine-advanced .btn-sharp-dark:hover,
.brine-advanced .btn-sharp-dark.showing,
.brine-inter .btn-sharp-dark:hover,
.brine-inter .btn-sharp-dark.showing,
.brine-youth .btn-sharp-dark:hover,
.brine-youth .btn-sharp-dark.showing {
    background-color: #b79e69 !important;
    color: #fff !important;
}
.brine-advanced .content-main ul li {
    margin-bottom: 1rem;
}
@media only screen and (max-width: 768px) {
    .brine-advanced .content-main ul {
        list-style-type: none;
        padding-left: 0;
    }
}

/* ~*~*~ Youth Collection ~*~*~ */
.youth .category-slider > .slick-arrow {
    background-color: #a5a5a5 !important;
}
.youth .category-slider > .slick-arrow::before {
    color: #fff;
}
.youth .btn-sharp-dark:hover,
.youth .btn-sharp-dark.showing {
    background-color: #a5a5a5 !important;
    color: #fff !important;
}
.youth .image-1 {
    margin-top: -61px;
}

/* ~*~*~ Box Collection ~*~*~ */
.box .btn-sharp-dark:hover,
.box .btn-sharp-dark.showing {
    background-color: #a5a5a5 !important;
    color: #fff !important;
}
.collection-logo.fatboy {
    max-width: 546px;
}
.box .image-1 {
    margin-top: -61px;
}
.box .protective .image-1 {
    margin-top: -15px;
    margin-left: 0;
}
@media only screen and (max-width: 768px) {
    .box .protective .image-1 {
        margin-top: 0;
        margin-left: 15px;
    }
}

/* ~*~*~ Nemesis Collection ~*~*~ */
.nemesis .btn-sharp-dark:hover,
.nemesis .btn-sharp-dark.showing {
    background-color: #fdc42e !important;
    color: #fff !important;
}
.collection-logo.nemesis3 {
    max-width: 546px;
}
.collection-logo.nemesis-pro {
    max-width: 615px;
}
.nemesis .image-1 {
    margin-top: -61px;
}
.nemesis .protective .image-1 {
    margin-top: -15px;
    margin-left: 0;
}
.nemesis .yellow-square,
.nemesis .blue-square {
    white-space: nowrap;
}
.nemesis .yellow-square::after {
    content: "";
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-left: .25em;
    border: 1px solid #000;
    background-color: #fff219;
}
.nemesis .blue-square::after {
    content: "";
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-left: .25em;
    border: 1px solid #000;
    background-color: #00b0f0;
}
@media only screen and (max-width: 768px) {
    .nemesis .protective .image-1 {
        margin-top: 0;
        margin-left: -15px;
    }
}

/* ~*~*~ Burn Collection ~*~*~ */
.burn .category-slider > .slick-arrow {
    background-color: #b5191e !important;
}
.burn .category-slider > .slick-arrow::before {
    color: #fff;
}
.burn .btn-sharp-dark:hover,
.burn .btn-sharp-dark.showing {
    background-color: #b5191e !important;
    color: #fff !important;
}
.collection-logo.burn-pro {
    max-width: 460px;
}
.collection-logo.burn-carbon {
    max-width: 668px;
}
.burn .image-1 {
    margin-top: -61px;
}
.burn .flush-right {
    margin-left: 1rem !important;
}
.burn ol li::before {
    background-color: #b5191e;
}
.burn .shoulders .image-1 {
    margin-top: -15px;
    margin-left: 1px;
}

@media only screen and (max-width: 768px) {
    .section-border:last-child {
        border: none;
    }
}

/* ~*~*~ Evo Collection ~*~*~ */
.evo .btn-sharp-dark:hover,
.evo .btn-sharp-dark.showing {
    background-color: #18a7e0 !important;
    color: #fff !important;
}
.evo .category-slider > .slick-arrow {
    background-color: #18a7e0 !important;
}
.evo .category-slider > .slick-arrow::before {
    color: #fff;
}
.evo .flush-right {
    margin-left: 1rem !important;
}
.evo .image-1 {
    margin-top: -61px;
}
.evo .shoulders .image-1 {
    margin-top: -15px;
    margin-left: 1px;
}
.evo .shafts .collection-logo {
    max-width: 485px;
}
.evo .shoulders .collection-logo {
    max-width: 416px;
}
.evo .arms .collection-logo {
    max-width: 243px;
}
.section-border {
    border-top: 1px solid #a5a5a5;
}
@media only screen and (max-width: 768px) {
    .evo .shaft-image {
        width: 100% !important;
        margin-left: -1rem;
    }
}

/* ~*~*~ Ritual Collection ~*~*~ */
.ritual .category-slider > .slick-arrow {
    background-color: #f6ec3f !important;
}
.ritual .category-slider > .slick-arrow::before {
    color: #000;
}
.ritual .btn-sharp-dark:hover,
.ritual .btn-sharp-dark.showing {
    background-color: #f6ec3f !important;
    color: #000 !important;
}
.ritual .rg5-logo,
.ritual .rgt2-logo,
.ritual .rx3-logo,
.ritual .rf1-logo {
    max-width: 320px;
}
.ritual img.slidergrip {
    width: 113%;
    margin-left: -3%;
    margin-top: -41%;
}
.ritual .sticks .top-image {
    max-height: 311px;
    height: 26vw;
}
.ritual .sticks .top-image img {
    position: absolute;
    width: 103%;
    right: 0;
    bottom: 0;
}
.ritual .sticks .content-1 {
    padding-left: 40%;
}
.ritual .mask .image-1 {
    margin-top: -61px;
}
.ritual .protective .chest.x3 .pads-diagram {
    margin-top: -5%;
}
.ritual .protective .pants.x3 .back-view {
    width: 120%;
    position: relative;
    right: 50px;
}
.ritual .protective .chest.x3 .back-view {
    width: 140%;
    position: relative;
    right: 40%;
}
.ritual .protective .pants.x3 .image-1 {
    width: 125%;
    left: -74px;
}
.ritual .protective .chest.x3 .image-1 {
    margin-top: -35px;
}
.ritual .protective .image-1 {
    width: 130%;
    margin-top: -61px;
    position: relative;
    left: -99px;
}
.ritual .protective .intro {
    width: 80%;
}
.ritual .pads .image-1 {
    width: 120%;
    margin-top: -61px;
    margin-left: -20%;
}
.ritual .pads .intro {
    width: 75%;
}
.ritual .pads .gt2 .intro {
    width: 80%;
    line-height: 1.2em;
}
.ritual .gt2 ol li::before  {
    background-color: #ff342b;
}
.ritual .trap-coverage {
    width: 125%;
}
@media only screen and (max-width: 1200px) {
    .ritual img.slidergrip {
        margin-left: -1%;
    }
    .ritual .protective .chest.x3 .back-view {
        width: 115%;
        right: 15%;
    }
    .ritual .protective .chest.x3 .pads-diagram {
        margin-top: 0;
    }
    .ritual .protective .pants.x3 .back-view {
        right: 30px;
    }
    .ritual .protective .pants.x3 .image-1 {
        left: -50px;
    }
    .ritual .protective .image-1 {
        left: -69px;
    }
}
@media only screen and (max-width: 991px) {
    .ritual img.slidergrip {
        width: 117%;
        margin-left: 0;
    }
    .ritual .protective .chest.x3 .back-view {
        width: 100%;
        right: 0;
    }
    .ritual .protective .pants.x3 .back-view {
        right: 8px;
    }
    .ritual .protective .pants.x3 .image-1 {
        left: -22px;
    }
    .ritual .protective .image-1 {
        left: -36px;
    }
}
@media only screen and (max-width: 768px) {
    .ritual .sticks .content-1 {
        padding-left: 0;
    }
    .ritual .sticks .mobile-title {
        width: 103%;
        margin-left: -3%;
        margin-top: 0;
    }
    .ritual .pants.x3 .intro {
        width: 100%;
    }
    .ritual .protective .chest.x3 .back-view,
    .ritual .protective .pants.x3 .back-view  {
        width: calc(100% + 32px);
        margin-left: -16px;
        right: 0;
    }
    .ritual .chest .intro {
        width: 100%;
    }
    .ritual .protective .chest .image-1,
    .ritual .protective .chest.x3 .image-1 {
        position: relative;
        right: -16px;
        margin-top: 0;
        left: auto;
    }
    .ritual .pads .gt2 .intro {
        width: 100%;
        line-height: 1.2em;
    }
    .ritual .pads .intro {
        width: 100%;
    }
}

/* ~*~*~ Covert Collection ~*~*~ */
.covert .btn-sharp-dark:hover,
.covert .btn-sharp-dark.showing {
    background-color: #009cdc !important;
    color: #fff !important;
}
.covert .qre-logo,
.covert .rspro-logo {
    max-width: 320px;
}
.covert .helmets .image-1,
.covert .gloves .image-1,
.covert .pants .image-1 {
    margin-top: -61px;
}
.covert .pants .image-1 {
    width: 110%;
    margin-left: -4%;
}
.covert .pants .player {
    width: 110%;
}
.covert .sticks .top-image {
    max-height: 160px;
    height: 13vw;
}
.covert .sticks .top-image img {
    position: absolute;
    width: 103%;
    right: 0;
    bottom: 0;
}
.covert .sticks .content-1 {
    padding-left: 40%;
}
.covert .sticks .gradient-stick {
    position: absolute;
    right: 20%;
    bottom: 0;
    width: 150%;
}
.covert .sticks .stiff-blade {
    position: absolute;
    bottom: 0;
    width: 110%;
    left: -30%
}
.covert .sticks img.slide-grip {
    position: relative;
    margin-left: -48px;
    margin-bottom: -48px;
}
.covert .sticks img.qre-image2 {
    width: 118%;
    margin-left: -18%;
}
@media only screen and (max-width: 768px) {
    .covert .pants .player {
        width: 100%;
    }
    .covert .helmets .vents-image-mobile {
        position: relative;
        right: -16px;
    }
    .covert .sticks .content-1 {
        padding-left: 0;
    }
    .covert .sticks .mobile-title {
        width: 103%;
        margin-left: -3%;
        margin-top: -10px;
    }
    .covert .sticks img.qre-image2 {
        width: 107%;
        margin-left: -7%;
    }
    .covert .sticks img.slide-grip {
        margin-left: -16px;
        margin-bottom: 0;
        width: 104%;
    }
}

/* ~*~*~ Alpha Collection ~*~*~ */
.alpha .category-slider > .slick-arrow {
    background-color: #c8f532 !important;
}
.alpha .category-slider > .slick-arrow::before {
    color: #000;
}
.alpha .helmets .image-1 {
    margin-top: -61px;
}
.alpha .helmets .dx-logo {
    width: 90%;
}
.alpha .gloves .image-1 {
    margin-top: -61px;
}
.alpha .gloves .dx-logo {
    width: 90%;
}
.alpha .protective .elbows .image-1 {
    margin-top: -41px;
}
.alpha .protective .image-1 {
    margin-top: -61px;
}
.alpha .protective .dx-logo {
    width: 75%;
}
.alpha .protective .shins .image-1 {
    position: relative;
    margin-top: -50px;
    right: 99px;
    width: 130%;
}
.alpha .sticks .top-image {
    height: 150px;
}
.alpha .sticks .top-image img {
    position: absolute;
    width: 103%;
    right: 0;
    bottom: 0;
}
.alpha .sticks .content-1 {
    padding-left: 40%;
}
.alpha .sticks .content-1 img {
    width: 100%;
}
.alpha .sticks .content-2 img {
    position: absolute;
    top: -80px;
    right: 0;
    width: 100%;
}
.alpha .sticks .content-3 img {
    position: absolute;
    top: 0;
    left: 70%;
    width: 137%;
}
.alpha .sticks .gradient-stick {
    position: absolute;
    right: 20%;
    bottom: 0;
    width: 150%;
}
.alpha .sticks .stiff-blade {
    position: absolute;
    bottom: 0;
    width: 110%;
    left: -30%
}
@media only screen and (max-width: 1200px) {
    .alpha .protective .dx-logo {
        width: 100%;
    }
    .alpha .protective .shins .image-1 {
        right: 69px;
    }
    .alpha .sticks .content-2 img {
        top: 0;
    }
    .alpha .sticks .stiff-blade {
        width: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .alpha .protective .shins .image-1 {
        right: 36px;
    }
}
@media only screen and (max-width: 768px) {
    .alpha .protective .dx-logo {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .alpha .protective .shins .image-1 {
        float: right;
        position: relative;
        right: -16px;
        margin-top: 0;
    }
    .alpha .sticks .content-1 {
        padding: 0;
    }
    .alpha .sticks .content-1 img {
        position: relative;
        left: -2%;
        top: -10px;
        width: 102%;
    }
    .alpha .sticks .content-2 img {
        position: static;
    }
    .alpha .sticks .content-3 img {
        position: static;
        width: 100%;
    }
}