div.Steps {
    z-index: 1;
}

/*Edit Account*/
#my-account div.RightContent
{
    width:460px;
    float:right;
}

#my-account div.LeftContent
{
    width:460px;
    float:left;
}

#my-account div.FieldStyle
{
    color: #999999;
    float: left;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    width: 140px;
}
#my-account div.FormField
{
    width:290px;
    float:left;
}

#my-account div.Form .Clear
{
    clear:both;
}

#my-account div.Form div.Row
{
    padding: 10px 0;
}

#my-account div.Form div.Row input.FormText, .FormInputText
{
    font-size: 11px;
    font-weight: bold;
    height: 20px;
    padding: 2px 5px;
    width: 250px;
    -moz-box-shadow:inset 2px 3px 3px #999;
    -webkit-box-shadow:inset 2px 3px 3px #999;
    box-shadow:inset 2px 3px 3px #999;
    
}

input.FormInputText.Short
{
    width:50px;
}

#my-account div.Form div.Row select.FormDropdown, .FormDropDown
{
    background-color: #666666;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: bold;
    height: 24px;
    padding: 4px 5px;
    width: 260px;
}

select.FormDropDown.Short
{
    width:110px;
     margin-bottom: 10px;
}
#my-account div.ConditionContainer
{
    margin: 10px 0 10px 140px;
    font-size:12px;   
}

@media screen and (max-width : 1100px) {
    /*section#secondary.opaque-footer {
        background-color: #333333;
        opacity: 1;
    }*/

    /*Login page*/
    #my_account_container div.LoginPanel {
        margin-right: 0px;
    }

    /*Archive*/
    .featured#putter-detail > article > nav section.model .select > p {
        left: auto;
        right: 0px;
    }
    
    /*Membership Options*/
    section.featured#membership-options .container {
        width: 840px;
    }

    section.featured#membership-options #my-scotty-cameron, section.featured#membership-options #club-cameron {
        padding: 20px;
    }

    .featured#membership-options .register-now {
        position: static;
    }

    /*Account*/
    section.featured#my-account,
    section.featured header#category {
        min-width: initial !important;
    }
}

@media screen and (max-width : 1024px) {
    section div.ContentContainer {
        width: auto;
        position: static;
        margin-left: 0;
        width: 100%;
        padding: 0 20px 120px;
        box-sizing: border-box;
    }

    /*Articles/CS Putter Gallery*/
    .featured#article .container {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
    }

    .featured#article #content {
        width: auto;
    }

    .featured#article #content article, .featured#article #content header h1 {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    /*Archive*/
    .featured.archive-list .container {
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }

    .featured#putter-detail .container {
        width: auto;
    }

    .featured#putter-detail > article > nav > div {
        width: auto;
        padding: 0px 20px;
    }

    .featured#putter-detail > article > nav section.family {
        float: left;
    }
    
    .featured#putter-detail .image-viewer .image-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }

    .featured#putter-detail .image-viewer {
        width: auto;
    }

    /*Reset Password*/
    div.Overview {
        width: auto;
    }
}

@media screen and (max-width : 1000px) {
    
    /*Archive*/
    .featured#putter-detail .left-column {
        width: 450px;
        padding-left: 20px;
        padding-right: 40px;
    }

    .featured#putter-detail .right-column {
        width: 300px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .featured.archive-categories .container .content {
        width: 900px;
        margin-right: auto;
        margin-left: auto;
    }

    .featured.archive-categories .container {
        width: 100%;
        margin: 0 auto;
    }

    .featured.archive-categories .container .content a {
        float: left;
    }
        
    /*Login/Register and Address*/
    #prod-listview div#my_account_container, section.forgot-password div#my_account_container
    {
        padding-top: 10px;
    }

    #my_account_container div.LoginPanel, #my_account_container div.RegisterPanel {
        width: 50%;
        box-sizing: border-box;
        padding-right: 10px;
    }

    #my_account_container div.LoginPanel div.FieldStyle, #my_account_container div.RegisterPanel div.FieldStyle {
        float: none;
        margin-bottom: 5px;
    }

    #my_account_container div.LoginPanel div.CheckOutButtonContainer, #my_account_container div.RegisterPanel div.CheckOutButtonContainer {
        float: none;
        margin-top: 0px;
        padding-left: 0px;
        max-width: 260px;
    }

    .account div.ForgetLink
    {
        padding-left: 140px;
    }

    /*Edit Account*/
    #my-account div.LeftContent, #my-account div.RightContent {
        width: 50%;
        box-sizing: border-box;
        padding-right: 10px;
    }

    #my-account div.FieldStyle {
        float: none;
        margin-bottom: 5px;
    }
}

@media screen and (max-width : 920px) {
    #search input[type="image"] {
        display: none;
    }

    .mobile-menu {
        display: block;
        position: relative;
        margin-top: -5px;
        width: 58px;
        height: 44px;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        float: right;
    }

    .mobile-menu .togglecontainer {
        display: block;
        height: 28px;
        margin: 8px auto 0;
        position: relative;
        vertical-align: middle;
        width: 25px;
    }

    .menutoggle__bar {
        background: #fff;
        height: 2px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: background .2s ease-in-out;
        -o-transition: background .2s ease-in-out;
        transition: background .2s ease-in-out;
        width: 100%;
    }

    .menutoggle__bar:after, .menutoggle__bar:before {
        background: #fff;
        content: '';
        height: inherit;
        left: 0;
        position: absolute;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
        -ms-transform-origin: center;
        -o-transform-origin: center;
        transform-origin: center;
        -webkit-transition: top .4s ease-in-out,bottom .4s ease-in-out,-webkit-transform .2s ease-in-out;
        -moz-transition: transform .2s ease-in-out,top .4s ease-in-out,bottom .4s ease-in-out,-moz-transform .2s ease-in-out;
        -o-transition: transform .2s ease-in-out,top .4s ease-in-out,bottom .4s ease-in-out,-o-transform .2s ease-in-out;
        transition: transform .2s ease-in-out,top .4s ease-in-out,bottom .4s ease-in-out;
        transition: transform .2s ease-in-out,top .4s ease-in-out,bottom .4s ease-in-out,-webkit-transform .2s ease-in-out,-moz-transform .2s ease-in-out,-o-transform .2s ease-in-out;
        width: 100%;
        z-index: 1;
    }

    .menutoggle__bar:before {
        top: -7px;
    }

    .menutoggle__bar:after {
        bottom: -7px;
    }

    .has-open-nav .menutoggle__bar {
        background: 0 0;
    }

    .has-open-nav .menutoggle__bar:before {
        top: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .has-open-nav .menutoggle__bar:after {
        bottom: 0px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .has-open-nav .menutoggle__bar:after, .has-open-nav .menutoggle__bar:before {
        -webkit-transition: top .2s ease-in-out,bottom .2s ease-in-out,-webkit-transform .4s ease-in-out;
        -moz-transition: top .2s ease-in-out,bottom .2s ease-in-out,transform .4s ease-in-out,-moz-transform .4s ease-in-out;
        -o-transition: top .2s ease-in-out,bottom .2s ease-in-out,transform .4s ease-in-out,-o-transform .4s ease-in-out;
        transition: top .2s ease-in-out,bottom .2s ease-in-out,transform .4s ease-in-out;
        transition: top .2s ease-in-out,bottom .2s ease-in-out,transform .4s ease-in-out,-webkit-transform .4s ease-in-out,-moz-transform .4s ease-in-out,-o-transform .4s ease-in-out;
    }

    .opaque-footer {
        display: none;
    }

    section#secondary.opaque-footer {
        display: block;
    }

    
    section#secondary #search {
        float: right;
        margin-left: 0;
        margin-right: 10px;
    }

    #shopping-nav nav ul {
        margin-right: 10px;
    }

    /*Archive*/
   .featured.archive-categories .container .content {
        width: 600px;
    }

   /*Articles/CS Putter of the Day*/
    .players-view .players-modal .close {
        right: 22px;
        z-index: 11;
    }
}


@media screen and (max-width : 865px) {
    .mobile-hide {
        display: none;
    }

    /*Membership Options*/
    section.featured#membership-options .container {
        width: 720px;
        padding-bottom: 100px;
    }

    section.featured#membership-options #my-scotty-cameron, section.featured#membership-options #club-cameron {
        padding: 20px;
    }
    
    section.featured#membership-options #my-scotty-cameron, section.featured#membership-options #club-cameron {
        height: auto;
        width: 320px;
    }

    /*Archive*/        
    .featured#putter-detail .left-column {
        width: 450px;
        padding-left: 10px;
        padding-right: 30px;
    }

    .featured#putter-detail .right-column {
        width: 230px;
        padding-left: 0px;
        padding-right: 0px;
    }

    /*Archive Accessories popup*/
    /*.featured.non-grouped #details div {
        margin: 0 auto;
        width: 550px;
    }*/

    .featured.non-grouped #details nav div {
        left: 0;
    }

    
    .featured.non-grouped #details nav .close-x {
        right: 10px;
        top: 50px;
        z-index: 12;
    }


    .featured.non-grouped #details nav .left {
        z-index: 12;
        left: 5px;
    }

    .featured.non-grouped #details nav .right {
        z-index: 12;
        right: 5px;    
    }

    .featured.non-grouped #details div {
        width: 100%;
    }

    .featured.non-grouped #details article {
        left: 0;
        right: 0;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        height: auto;
        box-sizing: border-box;
        height: auto !important;
    }

    .featured.non-grouped #details article div {
        width: 330px;
        margin-right: 25px;
        float: right;
    }

    /*locator*/
    #email-directions .locator-modal {
        width: 520px;
        margin-left: 0;
        margin-top: 0;
        top: 0;
        left: 50%;
        padding: 10px;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);    
    }
    
    .locator-modal .close {
        top: 20px;
        right: 20px;
        background: black;
    }

    .locator-modal .close img {
        width: 16px;
        height: 16px;
    }

    #directions-wrapper ol li span {
        width: 200px;
        margin: 0px 0px 0 0;
    }
}

@media screen and (max-width : 740px) {

    /*Archive*/
    .featured.archive-list section.content {
        padding-left: 75px;
    }

    .featured#putter-detail > article > nav section .select > a {
        padding-right: 25px;
    }


    .featured#putter-detail > article > nav section label {
        margin-right: 0px;
    }

    .featured#putter-detail .image-viewer .image-wrapper {
        padding-left: 0px;
        padding-right: 0px;
    }

    .featured#putter-detail .image-viewer > nav a {
        padding: 4px 0px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .featured#putter-detail .image-viewer > nav {
        margin-left: 0px;
    }

    .featured#putter-detail .image-viewer > nav a.selected:before, .featured#putter-detail .image-viewer > nav a.selected.before {
        top: 29px;
    }

    .featured#putter-detail .left-column,
    .featured#putter-detail .right-column {
        width: auto;
        max-width: 550px;
        float: none;
        padding-left: 10px;
        box-sizing: border-box;
    }

    /*Archive Accessories popup*/
   .featured.non-grouped #details article img {
        position: static;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }


    .featured.non-grouped #details article div {
        background: #000;
        max-width: 400px;
        width: auto;
        float: none;
        margin: 0 auto;
    }
    
    /*Membership Options*/
    section.featured#membership-options .container {
        width: 520px;
    }

    section.featured#membership-options #my-scotty-cameron, section.featured#membership-options #club-cameron {
        width: 220px;
    }

    section.featured#membership-options #my-scotty-cameron header, section.featured#membership-options #club-cameron header {
        height: auto;
        margin-bottom: 20px;
    }

    section.featured#membership-options #my-scotty-cameron img, section.featured#membership-options #club-cameron img {
        width: 100%;
        height: auto;
    }

    .featured#membership-options .register-now a {
        max-width: 170px;
        line-height: 1em;
    }

    
    /*CS Gallery*/
    #article.featured .page .slides {
        width: 520px;
        margin: 0 auto;
    }

    /*Mobile Nav*/
    nav.nav > ul.topnav--main {
        top: 30px;
    }
}

@media screen and (max-width: 680px) {

    /*Archive*/    
    .featured#putter-detail > article > nav > div {
        padding: 0px 2px;
    }
    
    .featured#putter-detail .image-viewer {
        width: auto;
        height: auto;
        float: none;
        overflow: hidden;
    }

    .featured#putter-detail .image-wrapper {
        left: 50%;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        padding: 0;
    }
    
    .featured#putter-detail .image-viewer > nav {
        float: none;
        width: auto;
        clear: both;
        overflow: hidden;
    }

    .featured#putter-detail .image-viewer > nav a.selected:before, .featured#putter-detail .image-viewer > nav a.selected.before {
        display: none;
    }

    .featured#putter-detail .image-viewer > nav p {
        margin-top: 10px;
        margin-bottom: 5px;
        padding-left: 5px;
    }

    /*Login/Register*/
    #my_account_container div.LoginPanel, #my_account_container div.RegisterPanel {
        width: 100%;
        float: none;
        margin-bottom: 50px;
        overflow: hidden;
    }

    #my_account_container div.LoginPanel div.CheckOutButtonContainer
    {
        position: static;
    }

    /*Edit Account*/
    #my-account div.LeftContent, #my-account div.RightContent {
        width: 100%;
        float: none;
    }

    /*Locator*/
    .infoBox {
	    width: 250px !important;
        transform: translate(58px, 32px);
        -webkit-transform: translate(58px, 32px);
        -moz-transform: translate(58px, 32px);
        -ms-transform: translate(58px, 32px);
    }

    .infoBox div {
	    padding: 6px 8px;
	    border-bottom: 1px solid #CCC;
    }

    .infoBox p {
        font-size: 11px;
        margin-bottom: 5px;
        line-height: 15px;
    }

    .infoBox div h3 {
	    color: #000;
	    font-size: 12px;
	    margin: 0 0 5px 0;
            line-height: 16px;
    }
	
    .infoBox div a {
	    font-size: 11px;
	    margin: 5px 0 0 0px;
    }

    .infoBox .triangle {
	    position: absolute;
	    bottom: -54px;
	    left: 92px;
	    width: 32px;
	    height: 43px;
	    background: url(../png/triangle.png) no-repeat;
        background-size: 20px;
    }
}

@media screen and (max-width: 620px) {
    /*Archive*/
   .featured.archive-categories .container .content {
        width: 300px;
    }

    section.featured#headcovers article.page {
        position: absolute;
        left: 0px;
        margin-top: 30px;
    }

    
    .featured.non-grouped #details div,
    .featured.non-grouped #details nav {
        margin: 0 auto;
        width: 100%;
    }
    
}

@media screen and (max-width : 580px) {
    #signed_in span {
        padding-right: 2px;
    }

    #signed_in a, #signed_in a.logout {
        padding-right: 2px;
        padding-left: 2px;
    }

    #signed_in a.logout {
        padding-right: 0px;
    }
    
    div.ContentContainer {
        padding-left: 20px;
        padding-right: 20px;
    }

    /*Account*/
    #myaccount-wrapper {
        margin-left: 0;
    }

    div.Steps span, div.Steps a {
        white-space: nowrap;
    }

    #my_account_container div.LoginPanel, #my_account_container div.RegisterPanel {
        width: 420px;
        float: none;
    }

    /*Archive*/
    header.top h1, section.featured#prod-listview > header h1, section.shop#product > header h1, section.shop#cartpage > header h1 {

    }

    .featured.archive-list section.content {
        padding-left: 20px;
        margin-top: 20px;
    }

   .featured.archive-list .container {
        margin-left: 10px;
        margin-right: 10px;
    }

    .featured.archive-list section.content h1 {
        position: static;
        padding-top: 20px;
        margin-top: 0px;
        margin-left: 12px;
        text-align: left;
    }

    .featured#putter-detail > article > nav {
        height: auto;
        top: 82px;
    }

    .featured#putter-detail > article > nav > div {
        padding: 0px 10px;
    }

    .featured#putter-detail > article > nav section {
        height: auto;
    }

    .featured#putter-detail > article > nav section label {
        display: block;
        line-height: 12px;
        padding-top: 10px;
    }

    
    /*Locator*/
    body {
        overflow: auto;
    }

    #locator {
        position: relative;
        top: auto;
        bottom: auto;
        overflow: hidden;
    }

    #locator-right {
        width: auto;
        float: none;
        margin-left: 0;
        margin-top: 0px;
    }

    #locator.results #locator-right {
        margin-top: 230px;
    }

    #locator-right .panel {
        position: static;
        width: auto;
    }

    #locator-right .panel .panel-main {
        position: static;
        width: auto;
        margin-left: 0;
    }

    #locator-right .results-message {
        width: auto;
    }

    #locator-right form#shop-search-form {
        margin: 0 auto;
    }

    #locator-right form input {
        width: 200px;
    }

    #locator-left {
        height: 250px;
        margin-right: 0px;
        position: absolute;
        top: 15px;
        left: -9999px;
        width: 100%;
        background: #000;
        padding-bottom: 2px;
    }

    #locator.results #locator-left {
        left: 0;
    }

    .infoBox {
	    width: 200px !important;
        transform: translate(58px, 32px);
    }

    .infoBox div {
	    padding: 6px 8px;
	    border-bottom: 1px solid #CCC;
    }

    .infoBox p {
        font-size: 11px;
        margin-bottom: 5px;
        line-height: 15px;
    }

    .infoBox div h3 {
	    color: #000;
	    font-size: 12px;
	    margin: 0 0 5px 0;
            line-height: 16px;
    }
	
    .infoBox div a {
	    font-size: 11px;
	    margin: 5px 0 0 0px;
    }

    .infoBox .triangle {
	    position: absolute;
	    bottom: -54px;
	    left: 92px;
	    width: 32px;
	    height: 43px;
	    background: url(../png/triangle.png) no-repeat;
        background-size: 20px;
    }

    .infoBox div a.directions-btn,
    #locator-landing a.gray-button,
    #right-features a.gray-button,
    #results-wrapper a.gray-button,
    #directions-wrapper a.gray-button 
    {
	    height: 20px;
	    padding: 2px 8px 0 8px;
	    font-size: 12px;
    }

    #directions-wrapper ol li span {
       width: auto; 
    }

    #directions-wrapper input#directions-input {
        width: 150px;
    }

    #email-directions .locator-modal {
        width: 320px;
    }
}

@media screen and (max-width : 520px) {
    header#main.fixed-header, .featured#article header#category.fixed-header {
        min-width: initial;
    }

    /*Membership Options*/
    section.featured#membership-options .container {
        width: 420px;
        padding-bottom: 100px;
    }

    section.featured#membership-options #my-scotty-cameron, section.featured#membership-options #club-cameron {
        width: 380px;
        padding-bottom: 30px;
    }

    .featured#membership-options .register-now a {
        max-width: 300px;
        line-height: 1em;
    }
    
    /*CS Gallery*/
    #article.featured .page .slides {
        width: 240px;
        margin: 0 auto;
    }
}

@media screen and (max-width : 480px) {
    section#secondary #search {
        padding-right: 2px;
    }

    header#main #breadcrumbs {
        padding-left: 10px;
    }

    /*Archive*/
   header.top h1, section.featured#prod-listview > header h1, section.shop#product > header h1, section.shop#cartpage > header h1, 
    section.featured#headcovers > header h1 {
       margin-left: 10px;
       font-size: 1.4em;
   }

    section.featured#main ul li header h1, section.featured#archive ul li header h1, section.featured#shop ul li header h1 {
        font-size: 1.2em;
    }

    /*Login Page*/
    div.ContentContainer {
        padding-left: 20px;
        padding-right: 20px;
    }

    #my_account_container div.LoginPanel, #my_account_container div.RegisterPanel {
        width: auto;
    }

    div.LoginPanel div.FieldStyle, div.RegisterPanel div.FieldStyle {
        float: none;
        width: auto;
    }

    /*Reset Password*/
    #myaccount-wrapper {
        margin-left: 0;
    }
}

@media screen and (max-width : 420px) {
    /*Membership Options*/
    section.featured#membership-options .container {
        width: 320px;
        padding-bottom: 100px;
    }

    section.featured#membership-options #my-scotty-cameron, section.featured#membership-options #club-cameron {
        padding: 10px 10px 20px 10px;
    }

    section.featured#membership-options #my-scotty-cameron, section.featured#membership-options #club-cameron {
        width: 300px;
    }
}

@media screen and (max-width : 400px) {

   /*Archive*/
    .featured#putter-detail > article > nav > div {
        padding: 0px 5px;
    }

    .featured#putter-detail > article > nav section {
        margin-left: 5px;
    }

    .featured#putter-detail > article > nav section .select > a {
        max-width: 90px;
        overflow: hidden;
        white-space: nowrap;
    }

    .featured#putter-detail > article > nav section select {
        max-width: 100px;
    }
    
    /*Archive Accessories popup*/
    .featured.non-grouped #details article img {
        width: 90%;
        height: auto;
    }

    .featured.non-grouped #details article h1 {
        margin: 10px 0;
    }

    .featured.non-grouped #details article p, .featured.non-grouped #details article div {
        font-size: 12px;
        line-height: 14px;
    }


    /*Login Page*/
    section.featured#prod-listview > header h1, section.shop#product > header h1, section.shop#cartpage > header h1,
    section.featured#membership-options > header h1, section.featured > header h1 {
        margin-left: 10px;
    }

    #my_account_container div.LoginPanel div.Form div.Row input.TextField, #my_account_container div.RegisterPanel div.Form div.Row input.TextField {
        width: 240px;
    }
}

@media screen and (max-width : 340px) {

    /*Archive Accessories popup*/
    .featured.non-grouped #details article img {
        width: 80%;
        height: auto;
    }

    .featured.non-grouped #details article h1 {
        margin: 5px 0;
        font-size: 12px;
    }

    .featured.non-grouped #details article p, .featured.non-grouped #details article div {
        font-size: 11px;
        line-height: 13px;
    }

    .featured.non-grouped #details article {
        margin-top: -175px;
    }

    .featured.non-grouped #details nav div {
        margin-top: -185px;
    }

    /*Login Page*/
    #my_account_container div.LoginPanel div.CheckOutButtonContainer, #my_account_container div.RegisterPanel div.CheckOutButtonContainer {
        padding-right: 0px;
    }
}

@media screen and (min-width: 800px) {
    #secondary .topnav .megamenu {
        top: 82px;
    }
}

@media screen and (max-width: 799px) {
    header#main #signin-register span,
    header#main #signin_register span
    {
        margin-right: 15px;
}
}