.page > #frm-monogram {
    display: none;
}

#frm-monogram {
    width: 700px;
    position: relative;
}

#frm-monogram .tab {
    overflow: hidden;
}

#frm-monogram .tab.closed {
    background-color: transparent;
}

#frm-monogram:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

#frm-monogram ul,
#frm-monogram ol {
    padding: 0;
    margin: 0;
}

#frm-monogram fieldset input.invalid {
    border-color: red;
}

#frm-monogram fieldset.font input.invalid + label,
#frm-monogram fieldset.style input.invalid + label {
    border-color: red;
}

/*
#frm-monogram h2 {
    font-family: "ltc-bodoni-175",serif;
    font-size: 1.4em;
    margin: 0;
    padding: 0;
}
*/

#frm-monogram .about {
    /*margin-bottom: 35px;*/
    margin-bottom: 1em;
    padding-right: 40px;
    margin-top: 1em;
}

#frm-monogram .about p {
    font-size: 18px;
    margin: 0;
    padding: 0;
}

#frm-monogram .about p + p {
    margin-top: 1em;
}

#frm-monogram .col-container {
    position: relative;
    overflow: hidden;
    margin: 0 0 28px 0;
}

#frm-monogram .col-left {
    width: 366px;
    float: left;
    margin: 0;
}

#frm-monogram .col-right {
    width: 322px;
    float: right;
    margin: 0;
}

#frm-monogram .legal {
    clear: both;
}

#frm-monogram .preview-container {
    position: absolute;
    top: 50%;
    left: 25px;
}

#frm-monogram .preview {
    position: relative;
    top: 50%;
    overflow: hidden;
}

#frm-monogram .preview .monogram-pinch-2-zoom-callout {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: rgba(0,0,0,.5);
    z-index: 1000;
}

#frm-monogram .preview .monogram-pinch-2-zoom-callout p {
    text-align: center;
    color: white;
    padding: 1em;
}

#frm-monogram .preview .preview-text {
    display: block;
    position: absolute;
    top: 50px;
    padding: 0 10px;
    font-size: 83px;
    letter-spacing: .1em;
    font-family: "ltc-bodoni-175", serif;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

#frm-monogram .preview-container .preview-label {
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    margin: 10px 0 0 0;
}

#frm-monogram .preview-container .preview-label .note {
    font-size: small;
    text-transform: none;
    font-style: italic;
}

#frm-monogram fieldset {
    margin: 0;
    padding: 0;
}

#frm-monogram fieldset legend {
    display: block;
    width: 100%;
    padding: .5em;
    background-color: #f2f2f2;
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: .1em;
    box-sizing: border-box;
    font-size: 14px;
}

#frm-monogram fieldset legend > span {
    display: block;
    position: relative;
}

#frm-monogram fieldset legend .control-collapse {
    display: none;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 0;
    right: 0;
}

#frm-monogram fieldset.placement .field-container {
    padding: 17px 0;
}

#frm-monogram fieldset.placement .placement-preview {
    text-align: center;
}

#frm-monogram fieldset.placement .placement-text {
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    margin: 10px 0 0 0;
}

#frm-monogram fieldset.style .field-container {
    position: relative;
    padding: 28px 10px;
}

#frm-monogram fieldset.style ul {
    overflow: hidden;
}

#frm-monogram fieldset.style ul li {
   float: left;
   margin: 0 0 0 10px;
}

#frm-monogram fieldset.style .styledRadio {
    display: none;
}

#frm-monogram fieldset.style ul li:first-child {
    margin-left: 0;
}

#frm-monogram fieldset.style input {
    /*
     * Can't use display none because click events won't
     * fire in IE8 on the label nor the radio button. So this
     * seems like a viable option and doesn't disrupt our layout.
     */
    opacity: 0;
    position: absolute;
    top: -100px;
    left: 0;
}

#frm-monogram fieldset.style label {
    padding: 8px 11px;
    border: 1px solid #C4C4C4;
    font-size: x-small;
    text-transform: uppercase;
    font-weight: bolder;
    display: block;
    box-sizing: border-box;
}

#frm-monogram fieldset.style input.checked ~ label {
    border-width: 2px;
    padding: 7px 10px;
    border-color: black;
}

#frm-monogram fieldset.font {
    display: none; /* Need to test in IE to make sure hiding doesn't affect triggering events. */
}

#frm-monogram fieldset.font .field-container {
    padding: 28px 10px;
    position: relative;
}

#frm-monogram fieldset.font ul {
    overflow: hidden;
}

#frm-monogram fieldset.font ul li {
    float: left;
    overflow: hidden;
    position: relative;
    margin-left: 10px;
}

#frm-monogram fieldset.font .styledRadio {
    display: none;
}

#frm-monogram fieldset.font ul li:first-child {
    margin-left: 0;
}

#frm-monogram fieldset.font input {
    /*
     * Can't use display none because click events won't
     * fire in IE8 on the label nor the radio button. So this
     * seems like a viable option and doesn't disrupt our layout.
     */
    position: absolute;
    left: -25px;
}

#frm-monogram fieldset.font label {
    padding: 8px 11px;
    border: 1px solid #C4C4C4;
    font-size: x-small;
    text-transform: uppercase;
    font-weight: bolder;
    display: block;
    box-sizing: border-box;
}

#frm-monogram fieldset.font label:hover {
    cursor: default;
}

#frm-monogram fieldset.font input.checked ~ label {
    border-width: 2px;
    border-color: black;
    padding: 7px 10px;
}

/* Specific font icon/image */
#frm-monogram fieldset.font ul li:first-child label .font-img {
    content: " ";
    display: block;
    height: 20px;
    margin-bottom: 7px;
    background-size: contain;
}

#frm-monogram fieldset.font ul li:first-child label[data-font="classic-small"] .font-img {
    background: transparent url("../../images/shinola/productpersonalization/monogram/font/classic-small.svg") no-repeat center center;
}

html.no-svg #frm-monogram fieldset.font ul li:first-child label[data-font="classic-small"] .font-img {
    background-image: url("../../images/shinola/productpersonalization/monogram/font/classic-small.png");

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shop/skin/frontend/base/default/images/shinola/productpersonalization/monogram/font/classic-small.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shop/skin/frontend/base/default/images/shinola/productpersonalization/monogram/font/classic-small.png', sizingMethod='scale')";
}

#frm-monogram fieldset.text .field-container {
    margin: 17px 0 17px 10px;
}

#frm-monogram fieldset.text .field-container ol {
    opacity: .4;
}

#frm-monogram fieldset.text label {
    text-transform: uppercase;
    font-size: 11px;
}

#frm-monogram fieldset.text .text-actual label {
    display: block;
    margin-bottom: 17px !Important;
}

#frm-monogram fieldset.text .text-confirm label {
    float: right;
    margin-right: 6px;
    line-height: 26px;
}

#frm-monogram fieldset.text #monogram-text {
    float: left;
}

#frm-monogram fieldset.text #monogram-text-confirm {
    float: right;
}

#frm-monogram fieldset.text ol {
    overflow: hidden;
}

#frm-monogram fieldset.text ol li {
    float: left;
    margin-left: 5px;
}

#frm-monogram fieldset.text ol li:first-child {
    margin-left: 0;
}

#frm-monogram fieldset.text input {
    width: 34px;
    font-size: 18px;
    padding: 2px !Important;
    box-sizing: border-box;
    text-align: center;
}

#frm-monogram fieldset.text input:focus {
    padding: 1px !Important;
    border-width: 2px;
    border-color: black;
}

#frm-monogram .legal .field-container {
    position: relative;
    padding: 24px 0 20px 0;
}

#frm-monogram .legal input {
    float: left;
}

#frm-monogram .legal label {
    margin-left: 1.5em;
    display: block;
    font-size: 12px;
    line-height: 1.6;
}

#frm-monogram .actions {
    float: right;
}

#frm-monogram .actions li {
    float: right;
}

#frm-monogram .actions li:first-child {
    margin-left: 10px;
}

#frm-monogram .actions input {
    font-size: 13px;
}

#frm-monogram .actions input[name="monogram[action][skip]"] {
    border: 1px solid black;
    background-color: white;
    box-sizing: border-box;
    color: black;
}

#frm-monogram .validation-feedback {
    position: absolute;
    bottom: 25px;
    left: 25px;
    border: 1px solid red;
    padding: .5em;
    width: 325px;
    box-sizing: border-box;
    display: none;
    background-color: white;
}

#frm-monogram.invalid .validation-feedback {
    display: block;
}

#frm-monogram .validation-feedback p {
    font-weight: bold;
    margin: 0;
    padding: 0;
}

#frm-monogram .help-slider {
    background-color: #F2F2F2;
    font-family: ltc-bodoni-175, serif;
    font-size: 13px;
    color: #000;
    position: absolute;
    padding: 20px;
    right: -700px;
    top: 45px;
    z-index: 9;
    width: 660px;
}

#frm-monogram #help-slider-control-monogram {
    position: absolute;
    background-color: #000;
    display: inline-block;
    text-align: center;
    padding: 14px 8px;
    color: #FFF;
    top: 40px;
    left: -24px;
    line-height: 15px;
    font-size: 11px;
    font-family:Berthold Akzidenz Grotesk, Arial, sans-serif;
    text-decoration: none;
    transition: background-color .3s, color .3s, border .3s;
}

#frm-monogram #help-slider-control-monogram:hover {
    text-decoration: none;
    background-color: #515151;
}

#frm-monogram .help-slider h2 {
    font-size: 21px;
    margin: 0 0 18px 0;
    text-transform: uppercase;
}

#frm-monogram .help-slider a {
    text-decoration: underline;
}

#frm-monogram .help-slider h4 {
    font-size: 16px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
}

#frm-monogram .help-slider p {
    margin: 0 0 8px 0;
    line-height: 18px;
    font-size: 16px;
    font-family:Berthold Akzidenz Grotesk, Arial, sans-serif;
}

#frm-monogram .help-slider button.live-chat {
    padding: 6px 50px;
    font-family: Berthold Akzidenz Grotesk, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    border: none;
    transition: background-color .3s, color .3s, border .3s;
}

#frm-monogram .help-slider button.live-chat:hover {
    background-color:#FFC25E !important;
}

#frm-monogram .help-slider section {
    margin: 0 0 20px 0;
    border: none;
}

#frm-monogram .vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
}

@media all and (max-width: 699px) {

    html.pp-monogram-modal-active body.responsive label {
        width: auto !Important;
        margin-bottom: 0 !Important;
    }

    #frm-monogram {
        width: auto;
        padding: 0;
    }

    #frm-monogram .help-slider {
        display: none;
    }

    #frm-monogram h2 {
        font-size: 1.8em;
        text-align: center;
        padding: 0;
    }

    #frm-monogram .about {
        margin-bottom: 28px;
    }

    #frm-monogram .about p {
        text-align: center;
        padding: 0;
        font-size: 1em;
    }

    #frm-monogram .col-left {
        width: auto;
        float: none;
        padding: 0;
        margin-bottom: 1em;
    }

    #frm-monogram .col-right {
        width: auto;
        float: none;
        margin-bottom: 0;
    }

    #frm-monogram .preview-container {
        display: none;
    }

    #frm-monogram .preview .monogram-pinch-2-zoom-callout p {
        font-size: .8em;
    }

    #frm-monogram fieldset {
        margin-top: 1px;
    }

    #frm-monogram fieldset legend {
        padding: .75em .75em .75em .5em;
    }

    #frm-monogram fieldset legend .control-collapse {
        display: block;
    }

    #frm-monogram fieldset.style .field-container {
        padding: 28px 0;
    }

    #frm-monogram fieldset.style ul li {
        float: none;
        margin-left: 0;
        margin-top: 1em;
    }

    #frm-monogram fieldset.style ul li:first-child {
        margin-top: 0;
    }

    #frm-monogram fieldset.style label {
        text-align: center;
        padding: 18px 0;
    }

    #frm-monogram fieldset.style input.checked ~ label {
        padding: 17px 0;
    }

    #frm-monogram fieldset.font .field-container {
        padding: 28px 0;
    }

    #frm-monogram fieldset.font ul li {
        float: none;
        margin-left: 0;
        margin-top: 1em;
        text-align: center;
    }

    #frm-monogram fieldset.font ul li:first-child {
        margin-top: 0;
    }

    #frm-monogram fieldset.font input {
        display: none;
    }

    #frm-monogram fieldset.font label {
        text-align: center;
        padding: 18px 0;
    }

    #frm-monogram fieldset.font input.checked ~ label {
        padding: 17px 0;
    }

    #frm-monogram fieldset.text .field-container {
        margin: 0;
        padding: 28px 0;
        overflow: hidden;
    }

    #frm-monogram fieldset.text label {
        font-size: small;
    }

    #frm-monogram fieldset.text .text-confirm {
        display: none;
    }

    #frm-monogram fieldset.text ol li {
        margin-left: 1em;
    }

    #frm-monogram fieldset.text input {
        margin-top: 0 !Important;
        margin-bottom: 0 !Important;
        width: 62px !Important;
    }

    #frm-monogram .legal .field-container {
        padding: 33px 0 10px 0;
    }

    #frm-monogram .legal label {
        margin-left: 60px;
        font-size: 1em;
    }

    #frm-monogram .personalize-text {
        display: none;
    }

    #frm-monogram .actions {
        float: none;
        margin-top: 10px;
        padding: 0;
    }

    #frm-monogram .actions li {
        float: none;
    }

    #frm-monogram .actions li:first-child {
        margin-left: 0;
        margin-bottom: 1em;
    }

    #frm-monogram .actions input {
        display: block;
        width: 100%;
        padding: 16px 0;
        font-size: 1em;
    }

    #frm-monogram .validation-feedback {
        position: static;
        width: auto;
        display: block;
        visibility: hidden;
    }

    #frm-monogram.invalid .validation-feedback {
        visibility: visible;
    }

}

/*
 * -------------------------------------------------------------------------------------------------------
 * Details Modal
 * -------------------------------------------------------------------------------------------------------
 */
.page > #monogram-details {
    display: none;
}

#monogram-details {
    /*width: 750px;*/
}

/*
#monogram-details h2 {
    font-family: "ltc-bodoni-175",serif;
    font-size: 1.75em;
    margin: 0 0 22px 0;
    padding: 0;
    text-align: left;
}
*/

#monogram-details h4 {
    font-size: 22px;
    text-transform: uppercase;
    text-align: left;
    margin-top: 20px;
}

#monogram-details p {
    font-size: 18px;
    margin: 18px 0 0 0;
}

#monogram-details h2 + p,
#monogram-details h4 + p {
    margin: 0;
}

#monogram-details .top p {
    margin-right: 195px;
}

#monogram-details .preview-wrapper {
    float: right;
    width: 150px;
}

#monogram-details .preview {
    width: 100%;
    height: 0;
    padding: 100% 0 0 0;
    position: relative;
    overflow: hidden;
}

#monogram-details .preview img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}

@media all and (max-width: 699px) {

    #monogram-details h2 {
        text-align: center;
    }

    #monogram-details {
        /*width: auto;*/
    }

    #monogram-details .top p {
        margin-right: 0;
    }

    #monogram-details .preview-wrapper {
        float: none;
        margin: 0 auto;
    }

}