@media screen and (max-width: 1083px) {
    nav.c-in-page-navigation {
        display: none;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1255px) {
    nav.c-in-page-navigation>p {
        display: none;
    }
    .m-in-page-navigation .c-navigation-menu {
        display: block;
    }
    .c-in-page-navigation ul.desktop-items {
        display: none;
    }
}

.c-in-page-navigation .CTAdiv .c-select {
    padding-left: 5px;
    float: left;
    font-weight: 700;
}
.c-in-page-navigation .CTAdiv .c-select button,
    .c-in-page-navigation .CTAdiv .c-select button:after{
        font-weight: 700;
        color: black;
}

.c-in-page-navigation .CTAdiv .c-select .c-menu-item{
    color: white;
}


.c-in-page-navigation .CTAdiv .c-hyperlink {
   color: #000;
}

.c-in-page-navigation .CTAdiv .PBColorCircleContainer .color-indicator-border {
    position: absolute;
    bottom: -44px;
}

.c-in-page-navigation.f-sticky .CTAdiv .PBColorCircleContainer .color-indicator-border {
    position: absolute;
    bottom: 17px;
}

.c-select-menu .c-menu {
    width: 150px !important;
    background-color: #1a1a1a;
}

.c-select-menu .c-menu .c-menu-item:hover {
    background-color: #333;
    text-decoration: underline;
    color: #FFF
}

.c-menu-item span[aria-selected="true"] {
    background: #444;
}
.high-contrast-mode.white-on-black .c-menu-item span[aria-selected="true"] {
    color: #fff !important;
}

@media screen and (-ms-high-contrast: black-on-white) {
nav.c-in-page-navigation .c-select-menu button:not(.c-select-button):not(.c-sequence-indicator):focus:not(:disabled):not(.c-flipper):not(.vidPlayPause):not(.c-action-toggle) {
    background-color: Highlight !important;
    color: HighlightText !important;}
}

nav.c-in-page-navigation .c-select-menu li span:focus {
    outline: 2px dotted #000 !important;
    border: 2px dotted #FFF !important;
}

.m-in-page-navigation .c-in-page-navigation button {
    top: -2px;
}
.m-in-page-navigation .c-in-page-navigation button:not(:focus){
 border:2px solid transparent;
 outline:2px solid transparent;
}


.CTAdiv .priceCTA {
    float: right;
}

.accInfo .c-group .f-lightweight {
   margin-left: 40px !important;
}

.CTAdiv .priceCTA .c-subheading-3 {
    padding-top: 5px !important;
}

.CTAdiv .priceCTA a.addToCartBtn,
.trans nav.c-in-page-navigation .priceCTA a.addToCartBtn,
.m-multi-feature:not(.f-console) [role="tabpanel"] .purchRow1 a.addToCartBtn {
    color: #054b16;
    background-color: #9bf00b;
    border: none;
    padding: 5px 20px 5px 22px !important;
}

.CTAdiv .priceCTA a.addToCartBtn:hover {
    color: #054b16 !important;
    background-color: #8bd80a !important;
}

.secondaryColorChooser {
    padding-top: 30px;
}

.secondaryColorChooser .heroSequenceIndicatorContainer ul[role="tablist"] {
    display: flex;
    justify-content: center;
}

.secondaryColorChooser .heroSequenceIndicatorContainer ul[role="tablist"] li {
    margin-right: 10px;
    float: left;
    display: block;
    text-align: center;
}

.secondaryColorChooser .heroSequenceIndicatorContainer ul[role="tablist"] li>a {
    background: #fff !important;
}

.secondaryColorChooser .heroSequenceIndicatorContainer ul[role="tablist"] li>.c-logo.f-active {
    outline-color: #FFF !important;
    outline-style: none !important;
    border-color: #000000;
}
/***** Hero *******/

.m-banner.purchRow1 {
    padding-top: 0px !important;
}

#heroTabControls {
    padding-bottom: 22px;
    z-index: 2;
}

@media screen and (max-width: 1084px) {
    #heroTabControls {
        margin-top: -20px;
    }
}

.hero-slider div.m-multi-feature {
    padding-top: 0px !important;
}

@media screen and (max-width: 859px) {
    .hero-slider div.m-multi-feature {
        margin-top: 0 !important;
    }
}
.hero-slider .m-banner:not(.accInfo .m-banner) {
    max-width: 960px;
    margin: 0 auto;
    white-space: normal;
    padding-top: 0;
    padding-bottom: 36px;
}

.hero-slider #heroTabControls > li > p {
    display:none;
}

@media only screen and (min-width: 1921px) {
    div.m-multi-feature>section,
    section.m-hero-item,
    div.m-image {
        max-width: 1920px;
        margin: 0px auto;
        float: none !important;
    }
}

.c-carousel .c-flipper {
    opacity: 1 !important;
}

ul[role="tablist"].heroTabControls li:focus-within {
    outline-color: #000 !important;
    outline-style: dashed !important;
    outline-width: 1px;
}

.hero-slider ul li[role="tabpanel"] {
    outline: none;
}

.m-multi-feature .heroTabControls[role="tablist"] li>a {
    background: #fff;
}

.high-contrast-mode.black-on-white .m-multi-feature .heroTabControls[role="tablist"] li>a.f-active,
.high-contrast-mode.black-on-white .m-multi-feature .heroTabControls[role="tablist"] li>a {
    background: #000;
}

.heroTabControls .c-logo p {
    padding-top: 0px !important;
    font-weight: 700;
}

.heroTabControls .c-logo.f-active:after {
    display: none !important;
}

.heroTabControls[role="tablist"] li {
    margin-right: 3.174% !important;
    width: 120px;
}

@media screen and (max-width: 376px) {
    .heroTabControls[role="tablist"] li {
  width: 28%;
        /*margin-right: 20px !important;*/
    }

    .hero-slider div section ul li.hero-content section[role="tabpanel"] {
        width: 95%;
        padding-left: 5%;
    }
}

.heroTabControls[role="tablist"] li:last-child {
    margin-right: 0px !important;
}

.c-pivot .heroTabControls li a {
    margin-right: 0;
}

.m-multi-feature .heroTabControls[role="tablist"] li>.c-logo.f-active {
    outline-color: #FFF !important;
    outline-style: none !important;
    border-color: #000000;
    background-color: #d5d5d5;
}

.high-contrast-mode.black-on-white .m-multi-feature .heroTabControls[role="tablist"] li>.c-logo.f-active {
outline: 1px dashed black !important;
outline-offset: 0px;
}


.c-logo:focus:after {
    outline: none;
}

.heroTabControls a.c-logo {
    padding-left: 0;
    padding-right: 0;
    border: 2px solid #505050;
}

.heroTabControls a.c-logo.f-active {
    border-color: black;
}

.heroTabControls a.c-logo p {
    border: 1px solid transparent;

}

.heroTabControls a.c-logo.f-active p {
    border: 1px solid black;
}

.heroTabControls li > p {
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
    color: rgb(0,0,0,.6)
}
.heroTabControls a.c-logo.f-active + p {
    color: black;
}

.heroSequenceIndicatorContainer {
    padding-bottom: 40px
}
/*
@media screen and (min-width: 1084px) {
.elevate-hero .c-hero.f-transparent:before,
.m-hero-item.f-transparent:before {
padding-bottom: 74% !important;
}
}
*/

.ottoinlinemedia .m-hero-item {
    background: white;
}

.dedicated-share .m-feature>div .c-heading {
    margin-top: 50px;
}

@media screen and (max-width: 767px) {
    .hero-slider li[role="tabpanel"] .accInfo .m-banner.purchRow2 a {
        padding-left: 0px !important;
    }
}
/***** Elevate your game ******/

@media screen and (max-width: 767px) {
    .featuretall .m-feature {
        background: #2f2f2f;
        color: #FFF;
    }
}
/* Custom Tall Feature */

@media screen and (min-width: 768px) {
    .darkgreyback span {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        height: 35vw;
        padding-right: 16px;
    }
}

@media screen and (min-width: 900px) {
    .darkgreyback span {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        height: 20vw;
    }
}

@media screen and (min-width: 1084px) {
    .featuretall {
        max-width: 100%;
        overflow: hidden;
    }
    .featuretall .darkgreyback {
        background: #2f2f2f;
        color: #FFF;
        width: 35% !important;
        height: 66.6%;
    }
    .featuretall .f-align-left .darkgreyback {
        left: -9.94%;
    }
    .darkgreyback span {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        width: 85%;
        height: 25vw;
    }
    .f-align-left .darkgreyback span {
        right: 2vw;
    }
    .featuretall .darkgreyback h2.c-heading {
        margin-top: 0;
    }
}

@media screen and (min-width: 1500px) {
    .darkgreyback span {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        width: 85%;
        height: 12vw;
    }
}

@media (max-width: 1200px) and (min-width: 1084px) {
    .featuretall .darkgreyback {
        height: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1083px) {
    .featuretall .darkgreyback {
        background: #2f2f2f;
        color: #FFF;
        width: 50% !important;
        height: 100%;
    }
    .featuretall .f-align-left .darkgreyback {
        left: 0;
    }
    .featuretall .darkgreyback h2.c-heading {
        margin-top: 0;
    }
    .featuretall .f-align-left .darkgreyback span {
        padding-right: 8px;
    }
}
/***** Custom 3 Up ******/

.special3UP.m-content-placement-item .c-heading {
    font-weight: 700;
}

.special3UP .m-content-placement-item>picture {
    padding-bottom: 115%;
}

.special3UP .m-content-placement-item>div {
    text-align: center;
}

.special3UP .greyDiv {
    padding-bottom: 130px;
    height: 28vw;
    background-color: #e6e6e6;
    position: relative;
    z-index: 2;
}

.special3UP .m-banner {
    padding-bottom: 48px;
}

@media screen and (min-width: 768px) {
    .special3UP .m-content-placement {
        transform: translateY(-26.6vw);
        -ms-transform: translateY(-26.6vw);
        width: 100%;
        z-index: 2;
        position: relative;
        margin-bottom: -23vw;
    }
    .special3UP [data-grid~="pad-6x"]>[data-grid] {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media screen and (max-width: 768px) {
    .special3UP .m-content-placement {
        padding-bottom: 48px;
    }
    .special3UP .greyDiv {
        display: none;
    }
}
/**** Switch devices hero ****/

@media only screen and (min-width: 540px) and (max-width: 767px) {
    .switch-devices .m-hero-item>div {
        height: 320px;
    }
    .switch-devices .m-hero-item>div>div.high-contrast {
        top: calc(80%);
    }
}

@media only screen and (min-width: 0px) and (max-width: 539px) {
    .switch-devices .m-hero-item>div {
        height: 280px;
    }
    .switch-devices .m-hero-item>div>div.high-contrast {
        top: calc(70%);
    }
}

@media only screen and (max-width: 1083px) {
    .switch-devices h2.c-heading-3,
    .special3UP h2.c-heading-3 {
        font-size: 20px;
        line-height: 24px;
    }
}
/****Custom small box feature ****/

@media screen and (min-width: 1084px) {
    .custom-feature .m-feature {
        height: 32.5vw;
        /*margin-top: 159px;*/
        max-height: 585px;
    }
    .custom-feature .m-feature picture {
        margin-top: -3.55%;
    }
}

.hero-content.f-hidden {
    display: none !important;
}

.hero-content h1[class^="c-heading"] {
    padding-bottom: 12px;
}

.hero-content p.buyText {
    padding-top: 12px;
}

.hero-content .priceCTA p{
    padding-top: 18px;
}


@media screen and (max-width: 479px) {
    .hero-content h1[class^="c-heading"] {
        font-size: 30px;
        line-height: 1.15em;
    }
    
}
.newAvailableDate {
    padding-top: 0px;
    padding-bottom: 24px;
}

.hero-slider .m-multi-feature .hero-content:focus {
    outline: -webkit-focus-ring-color auto 1px;
}
/* tech specs */

.m-system-requirements [class^="c-heading"] {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: .5em;
}

.m-system-requirements .c-table.f-divided {
    margin-top: 0px;
}
/*
@media screen and (min-width: 768px) and (max-width: 1083px) {
.hero-play .m-hero-item.f-y-center.f-transparent>div>div {
top: calc(50%);
}
.hero-play .m-hero-item.f-y-center.f-transparent>div>div [class^="c-paragraph"] {
font-size: 15px;
line-height: 20px;
}
}
*/

@media only screen and (max-width: 767px) {
    .custom-hero {
        padding-bottom: 48px;
    }
    .custom-hero .m-hero-item:before {
        /* This is what defines the aspect ratio of the hero */
        display: none;
    }
    .custom-hero .m-hero-item>div,
    .custom-hero .m-hero-item.f-y-center>div>div,
    .custom-hero .m-hero-item.f-y-center>div>div,
    .custom-hero .m-hero-item.f-y-bottom>div>div,
    .custom-hero .m-hero-item.f-y-bottom>div>div,
    .custom-hero .m-hero-item>picture img,
    .custom-hero .m-hero-item>img,
    .custom-hero .m-hero-item>picture {
        /* Some of these styles are redundant for some of these elements, but it doesn't hurt to pile them up in one place */
        position: relative;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        overflow: visible;
        height: auto;
    }
    .custom-hero .m-hero-item>div {
        padding-top: 36px;
        padding-bottom: 56px;
    }
}


html.high-contrast-mode .hero-slider .m-multi-feature .m-banner a.c-call-to-action:focus {
    border-style: dashed !important;
    outline-style: dashed !important;
}

.CTAdiv {
 display:flex;
}
.CTAdiv .c-select {
 /*white-space: nowrap;*/
 min-width: 120px;
}

.CTAdiv .c-select .c-select-menu {
 margin: 0 0 0 20px;
}

.CTAdiv .priceCTA {
 float: none;
 white-space: nowrap;
 line-height: 37px;
}

.CTAdiv .priceCTA > * {
 vertical-align: middle;
 white-space: normal;
}


.m-in-page-navigation nav.c-in-page-navigation .c-hyperlink:focus {
    color: #107c10 !important;
    outline: #107c10 dashed 2px !important;
}




.primary-button  {
      color: #054b16 !Important;
      background-color: #9bf00b !important;
      border: none !important;
      padding: 5px 20px 5px 22px !important;
  }

.primary-button:hover {
          color: #054b16 !important;
          background-color: #8bd80a !important;
      }

.primary-button:focus {
          color: #054b16 !important;
          background-color: #8bd80a !important;
          border: 2px solid #107c10 !important;
          outline: 1px solid #000 !important;
      }