@font-face {
    font-family: 'Handwritten';
    src: url("../fonts/Caveat-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Italic';
    src: url("../fonts/GenBkBasI.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Serif';
    src: url("../fonts/Merriweather-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Classic Script';
    src: url("../fonts/DancingScript-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Script';
    src: url("../fonts/CURSIV.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Sans Serif';
    src: url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

.product-options-bottom #engraving-popup-modal {display: none;}
.field.engraving-line:not(.field.engraving-line-1) {display: none;}
.image-container {position: relative;}
.content-details {position: absolute;opacity: 1;text-align: left;width: 100%;overflow: hidden;}
.content-details p {width: 100%;margin: 0;}
#engraving-popup-modal .image-container {width: 65%;}
#engraving-popup-modal .image-panel-controls {width: 25%;}
.product-options-wrapper .field.engraving, .product-options-wrapper .field.engraving-line, .engraving_text, #engraving_font_colour > .control > div, #engraving_font_colour > .label, .engraving-select {display: none;}
#myCanvas {display: none;}
.fieldset.engraving-lines {display: none;}
#engraving-popup-modal {-webkit-transform: none !important;}
#engraving-popup-modal .image-container .image-box {width: 100%;}
.position-3.image-container {width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: start;align-items: baseline;}
.image-container #engraving_content2, .position-3.image-container .image-box {display: none;}
.position-3.image-container .content-details {display: block !important;width: 100% !important;text-align: center;}
.add-another {border: 1px solid #000;padding: 3px;}
.engraving-lines-pos3 {display: none;}
.field.engraving.engraving-colour {display: none;}
.engraving-modal-popup .image-container .content-box {display: inline-block;position: relative;}
.image-container.position-3 #engraving_content2 {margin-left: 10%;}
.image-container.position-3 .content-box {width: 100%;max-width: 100%;height: 100%;overflow: visible;}
.embossing #engraving_content {font-size: 32px !important;}
#engraving_content p.small, #engraving_content2 p.small {font-size: 33%;}
#engraving_content p.medium, #engraving_content2 p.medium {font-size: 66%;}
#engraving_content p.large, #engraving_content2 p.large {font-size: 100%;}
#engraving_content, #engraving_content2 {font-size: 60px;}
.position-3 .content-box {height: auto;display: block;position: static !important;}
.position-3 #engraving_content2, .position-3 #engraving_content {font-size: 60px;text-align: left;height: 100%;}
.position-3 #engraving_content .medium, .position-3 #engraving_content2 .medium {text-overflow: ellipsis;}
.noscroll {position: fixed;overflow-y: scroll;width: 100%;left: 0;top: 0;}
.fieldset.engraving-lines {margin-bottom: 10px;}
.fieldset.engraving-lines-pos3 {border-top: 1px solid;padding-top: 10px;}
.engraving-modal-popup .engraving-line .control #remove-line, .engraving-modal-popup .engraving-line .control #remove-line2 {float: right;margin-top: 10px;color: #66666a;font-size: 12px;font-family: "avenir-r";text-transform: capitalize;}
.fieldset .engraving_text .control > strong br {display: block;}
body._has-modal div#fc_frame {visibility: hidden;}
.engraving-modal-popup .position-3.image-container .content-box {display: flex !important;width: 100%;position: static !important;vertical-align: middle;}
.engraving-modal-popup .position-3.image-container .content-box .content-details {width: 100%;margin-top: 20%;position: static !important;}
.engraving-modal-popup .position-3.image-container .content-box .content-details p {width: 100% !important;position: static !important;}
div#engraving_content.one-line {font-size: 60px;text-align: center;height: 100%;}
.position-3 .content-details p {font-size: 50% !important;}
body.is-embossing .engraving-lines input, body.is-embossing  #engraving_content, body.is-embossing  #engraving_content p, body.is-embossing .engraving-line p{text-transform: uppercase !important;}

@media all and (min-device-width: 991.98px) {
    .engraving-modal-popup #engraving-popup-modal {display: flex;flex-wrap: nowrap;}
}

@media all and (max-device-width: 991.98px) {
    #engraving_content p.large {font-size: 14px;}
    #engraving_content p.medium {font-size: 13px;}
    #engraving_content p.small {font-size: 12px;}
    #engraving-popup-modal {display: flex;flex-direction: column;}
    #engraving-popup-modal .image-container {width: 100%;}
    #engraving-popup-modal .image-panel-controls {width: 100%;flex-wrap: wrap;}
}

@media all and (max-device-width: 640px) {
    #engraving_content p.large {font-size: 8px;}
    #engraving_content p.medium {font-size: 7px;}
    #engraving_content p.small {font-size: 6px;}
}

@media all and (max-device-width: 320px) {
    #engraving_content p.large {font-size: 8px;}
    #engraving_content p.medium {font-size: 7px;}
    #engraving_content p.small {font-size: 6px;}
}

@media all and (max-device-width: 991px) {
    .embossing #engraving_content {font-size: 22px;}
    #engraving_content p.small, #engraving_content2 p.small {font-size: 33%;}
    #engraving_content p.medium, #engraving_content2 p.medium {font-size: 66%;}
    #engraving_content p.large, #engraving_content2 p.large {font-size: 100%;}
}

@media only screen and (min-width: 600px) {
    .position-3 .content-box {padding: 5% 10% 5%;}
}

@media only screen and (max-width: 600px) {
    .position-3 #engraving_content p.small, .position-3 #engraving_content2 p.small {font-size: 14px !important;}
}