@charset "utf-8";
/*! CSS Document */
#loadingTemplates {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: auto;
}
#amtLoading, #qtyLoading {
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 100%;
}
#disclaimer {
  font-style: italic;
  font-size: 12px;
  line-height: 150%;
}
.borderBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
#cws_val_cartSize {
  position: absolute;
  left: -20px;
  right: auto;
  bottom: 76px;
  background-color: #ffe6e6;
  padding: 10px;
  border: 1px solid #aa0d0d;
  z-index: 500;
  white-space: nowrap;
}
#cws_val_cartSize:after {
  content: "";
  display: block;
  width: 0px;
  height: 10px;
  border-top: 10px solid #aa0d0d;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
}
.fieldHint {
  text-align: left;
  font-size: 11px;
  font-style: italic;
  padding: 3px 0 0 0;
}
.customFont {
  width: 136px;
}
.customSize {
  width: 62px;
}
#cws_val_gcBuyAmt {
  width: 232px;
  right: 70px;
  bottom: -4px;
}
#cws_lbl_gcBuyAmt, #cws_lbl_gcBuyAmtTxt, #cws_lbl_gcBuyAmtFixed {
  display: none;
}
#amtDenom {
  font-size: 18px;
}
#cws_lbl_gcBuyAmtFixed {
  font-size: 14px;
  line-height: 120%;
  margin: 0 0 10px 0;
  font-weight: bold;
}
#qtyDropdown, #qtyOther {
  width: 50%;
  float: left;
}
#amtOther, #qtyOther {
  display: none;
  position: relative;
}
#cws_label_cardDisclaim {
  font-size: 13px;
}
#amtField {
  min-height: 97px;
  display: block;
  vertical-align: top;
}
#seeMore {
  width: 93%;
  margin: 0 auto;
  display: none;
}
#qtyField {
  display: block;
  vertical-align: top;
}
#cws_list_gcBuyAmt, #cws_txt_gcBuyAmt, #amtHint, #qtyOther, #cws_list_gcBuyQty {
  display: none;
}
#cws_list_gcBuyAmt, #cws_list_amtDenom, #cws_list_gcBuyQty, #cws_txt_gcBuyAmt, #cws_btn_gcBuyAdd, #cws_txt_gcBuyAmt2 {
  width: 94%;
}
#cws_list_gcBuyAmt, #cws_btn_gcBuyAdd {
  margin-right: 2%;
}
#cws_btn_gcBuyAdd, #cws_btn_gcBuyCheckout {
  margin-bottom: 10px;
  width:100%;
}
.field.disclaimField {
  margin: 0 0 25px 0;
}
#cws_btn_gcBuyCheckout:disabled {
  background-color: #c4c4c4;
}
#cws_val_gcBuyQty, #cws_val_gcBuyAmtOther {
  right: initial;
}
#imageScaling {
  margin: 0 0 20px 0;
}

/* Hidden labels for accessiblity */
#cws_lbl_gcBuyQtyTxt, #cws_lbl_gcBuyAmt2, #cws_lbl_msgTextArea, .fontHold label, .fontStyleHold label {
  font-size: 0;
  margin: 0;
}
/* /// Hidden labels for accessiblity */

#goToCart {
  display: inline-block;
  float: right;
}
a.scrollBtn {
  display: none;
  padding: 20px 0 20px 0;
}
.btn.inactive {
  background-color: #E4E4E4;
}
#expandCards {
  display: none;
}
#btnField {
  margin: 0 0 75px 0;
}

.templateThumb {
  width:117px;
  margin:0 auto;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
}

.customizeLeft {
  width:72%;
  float:left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-left:1px solid #cccccc;
}

.customHeading {
  margin: 0;
  background-color: #f4f4f4;
  padding: 10px;
  border: none;
  font-weight: normal;
  text-align: center;
}

.customizeRight {
  float:left;
  width:34%;
}
.customRightBox {
  background-color:#f7f7f7;
}
.customCardHold {
  width:100%;
  padding:20px 0 40px 0;
  position:relative;
}

/* Scale and Move Image */
.resizePic {
  position: absolute;
  right: 0;
  top: 50%;
  text-align: center;
}
.resizePic h4 {
  font-weight: 600;
}
.resizePic img {
  cursor: pointer;
}
.resizePic button {
  width: 25px;
  height: 25px;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 0;
  display: inline-block;
}
.resizePic button ~ button {
  margin-left: 10px;
}    
#resizeSmaller {
  background-image: url(/cws4.0/global-unix/images/customize-card/resizeSmaller.gif);
}
#resizeBigger {
  background-image: url(/cws4.0/global-unix/images/customize-card/resizeBigger.gif);
}
#mobMoveUp {
  background-image: url(/cws4.0/global-unix/images/customize-card/upArrow.gif);
}
#mobMoveLeft {
  background-image: url(/cws4.0/global-unix/images/customize-card/leftArrow.gif);
}
#mobMoveRight {
  background-image: url(/cws4.0/global-unix/images/customize-card/rightArrow.gif);
}
#mobMoveDown {
  background-image: url(/cws4.0/global-unix/images/customize-card/downArrow.gif);
}
.scale {
  vertical-align: top;
}

/* /// Scale and Move Image */

.textControls {
  background-color:#f4f4f4;
  border:1px solid #cccccc;
  padding:25px 60px 25px 60px;
  margin: 30px 0 0 0;
}

.fontStyleHold input + label {
  background-size: 25px;
  background-position: 3px 4px;
  border:1px solid #ccc;
  background-color:#FFF;
  transition: linear 0.23s;
}

.fontStyleHold input:checked + label {
  background-color:#7b7b7b;
  outline:0;
}
.fontStyleHold label:hover, .fontStyleHold input:focus + label {
  outline: 1px dotted #222;
}
#cws_lbl_txtBold {
  background-image:url(/cws4.0/global-unix/images/customize-card/bold-icon.png);
  margin:0 0 0 20px;
}
#cws_chk_txtBold:checked + label {
  background-image:url(/cws4.0/global-unix/images/customize-card/bold-icon-checked.png);
}
#cws_lbl_txtItalic {
  background-image:url(/cws4.0/global-unix/images/customize-card/italic-icon.png);
}
#cws_chk_txtItalic:checked + label {
  background-image:url(/cws4.0/global-unix/images/customize-card/italic-icon-checked.png);
}
#cws_lbl_txtUnderline {
  background-image:url(/cws4.0/global-unix/images/customize-card/underline-icon.png);
}
#cws_chk_txtUnderline:checked + label {
  background-image:url(/cws4.0/global-unix/images/customize-card/underline-icon-checked.png);
}
#cws_label_txtLeft {
  background-image:url(/cws4.0/global-unix/images/customize-card/alignLeft-icon.png);
}
#cws_rad_txtLeft:checked + label {
  background-image:url(/cws4.0/global-unix/images/customize-card/alignLeft-icon-checked.png);
}
#cws_label_txtCenter {
  background-image:url(/cws4.0/global-unix/images/customize-card/alignCenter-icon.png);
}
#cws_rad_txtCenter:checked + label {
  background-image:url(/cws4.0/global-unix/images/customize-card/alignCenter-icon-checked.png);
}
#cws_label_txtRight {
  background-image:url(/cws4.0/global-unix/images/customize-card/alignRight-icon.png);
}
#cws_rad_txtRight:checked + label {
  background-image:url(/cws4.0/global-unix/images/customize-card/alignRight-icon-checked.png);
}
#cws_txt_message, #cws_list_fontfamily, #cws_list_fontsize {
  background-color:#FFF;  
}

#cws_lbl_txtBold:before, #cws_lbl_txtItalic:before, #cws_lbl_txtUnderline:before, #cws_label_txtLeft:before, #cws_label_txtCenter:before, #cws_label_txtRight:before {
  display: none;
}

#cws_txt_message {
  height:60px;
  margin:0 0 20px 0;
}

.topRow {
  height:48px;
  width: 443px;
  margin: 0 auto;
}

.textControls select {
  display:inline-block;
  padding:7px 12px 7px 12px;
  border:1px solid #ccc;
}

.textControls .field {
  display:inline-block;
  width:auto;
}

.textControls label {
  height:31px;
  width:31px;
}

.customFont, .customSize, .customTextStyle, .customTextAlign {
  display:inline-block;
  vertical-align:top;
} 

.customColor, .customBgColor {
  display:inline-block;
  width: 49%;
  vertical-align:top;
}
.textArrow {
  display:inline-block;
  width:10px;
  height:8px;
  background-repeat:no-repeat;
  background-image:url(/cws4.0/global-unix/images/structure/smallArrow.png);
  margin:16px 0 0 7px;
}
#cws_list_colors, #cws_list_bgcolors {
  display:none;
}
#cardTemplates {
  padding:0 0 10px 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width:28%;
  float:left;
}
#cws_val_templates {
  position: static;
  text-align: left;
}
#openTextColor, #openTextBgColor{
  display:inline-block;
  cursor:pointer;
  position:relative;
}
.colorBox {
  position:absolute;
  bottom:38px;
  left:0;
  width:200px;
  padding:15px 0 7px 0;
  z-index:9999;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  background-color:#f7f7f7;
}
.bottomRow {
  padding:15px 0 0 0;
}
#cws_txt_gcBuyAmt {
  width:46%;
}

.textControls .customColor label, .textControls .customBgColor label {
  width:auto;
  display:inline-block;
  vertical-align: top;
  padding: 11px 2px 0 0;
  margin: 0;
  font-weight:600;
  font-size:13px;
}
.colorLabel {
  margin: 0px 0px 0 9px;
  display: inline-block;
  vertical-align: top;
}

.textControls input[type="text"] {
  display:inline-block;
  width:41%;
  vertical-align: top;
  border:1px solid #ccc;
}

#textColorTile, #textBgColorTile {
  display:inline-block;
  width: 34px;
  height: 34px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  vertical-align: top;
  border:1px solid #ccc;
} 

.colorItem {
  cursor:pointer;
  font-size:14px;
  line-height:14px;
  vertical-align:top;
  transition: linear 0.23s;
  margin: 0 20px 0 20px;
  padding: 5px 0 5px 5px;

}
.colorItem:hover {
  background-color:#e1e1e1;
}
.colorPreview {
  display:inline-block;
  width: 15px;
  height: 15px;
  border:1px solid #cacaca;
  vertical-align: top;
}

.textControls input[type="checkbox"] + label, .textControls input[type="radio"] + label {
  float: left;
  padding: 0;
  margin: 0;
}

.form {
  float:left;
  width:51%;
}
#btnField {
  width: 43%;
  float: right;
  position:relative;
  margin: 23px 0 0 0;
}

#cardTemplates ul {
  list-style-type:none;
}
.customizeControls {
  width:100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  clear:both;
}

#amtDenom, #amtOther {
  float: left;
  width: 50%;
}
#amtOther .val, #qtyOther .val {
  white-space: nowrap;
}
.form select {
  padding: 12px;
}
#cws_txt_gcBuyAmt2, #cws_txt_gcBuyQtyTxt {
  padding: 12px 12px 13px 12px;
}

input[type="checkbox"], input[type="radio"] {
  position: absolute;
  left: -9999px;
}
input[type="text"].invalid ~ .fieldHint {
  display:block;
}
.cardDesign input[type="radio"] + label {
  background-image: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1%;
}
.cardDesign input[type="radio"] + label:before {
  background: none;
  border: none;
}
.cardDesign input[type="radio"] + label:hover:before, .cardDesign input[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-box-shadow: inset 0 0 0px 3px #979797, inset 0 0 10px 7px #fff;
  -webkit-box-shadow: inset 0 0 0px 3px #979797, inset 0 0 10px 7px #fff;
  box-shadow: inset 0 0 0px 3px #979797, inset 0 0 10px 7px #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#templateHeading {
  margin:0 0 35px 0;
}
.cardDesign {
  display: inline-block;
  width: 44%;
  margin: 0px 8px 15px 8px;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #EAEAEA;
  height: 123px;
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: 50%;
}
.cardDesign img {
  height: auto;
  width: auto;
  max-width: 90px;
  max-height: 90px;
  display: block;
  margin: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
}
.cardDesign input[type="radio"]:checked + label:after {
  content: "";
  display: block;
  width: 20px;
  height: 22px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-image: url(/cws4.0/global-unix/images/checkmark.png);
}
.templateThumb {
  cursor:pointer;
}
.templateThumb:hover {
  opacity:0.65;
}
#customizeLeftInside {
  padding:15px 25px 0 25px;
}
input[type="file"]{
  display: none;
}
.fileUpload {
  text-align: center;
  border: 1px solid #ccc;
  padding: 15px 0 15px 0;
  margin: 0 0 35px 0;
  position: relative;
  font-size: 0; /*to counter spaces created by inline-block set on children*/
}
#fileText {
  border: 1px solid #ccc;
  padding: 10px;
  color: #000;
  vertical-align: middle;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 140%;
}
#maxFileSize {
  font-size: 12px;
  margin: 10px 0 0 0;
}
#cws_val_files {
  right: initial;
  position: static;
  text-align: center;
  margin: 8px 0 0 0;
}
input[type="file"].invalid {
  border: 1px solid #aa0d0d;
}
.uploadTitle {
  vertical-align: middle;
  display: inline-block;
}
#customCard {
  width:435px;
  height:271px;
  overflow:hidden;
  position:relative;
  margin: 0 auto;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.19);
}
#holderImg {
  position:absolute;
  width:100%;
  z-index:7;
}
#overlayTemplate {
  position:absolute;
  top:0;
  left:0;
  z-index:8;
  width:435px;
  height:271px;
}
#overLayDrag {
  position:absolute;
  top:0;
  left:0;
  z-index:9;
  width:780px;
  height:511px;
  cursor:move;
}
.dragme {
  position:relative;
}
#messageHold {
  position:absolute;
  width:175px;
  height:80px;
  padding:20px;
  padding:0;
  font-size:14px;
  color:#000;
  cursor:move;
  z-index:52 !important;
  background-color:transparent;
  border:1px #000 dotted; 
}
#messageHold  textarea {
  width:175px;
  height:80px;
  cursor:move;
  resize: none;
  background-color:transparent;
  font-family: Arial, sans-serif;
  z-index:53 !important;
  position:absolute;
  border:none;
  overflow:hidden;
  font-size:24px;
  margin:0;
  padding:0;
}

#messageHold:hover {
  
}
#bakedImage, #bakedImagePreview {
  border:1px solid red;
  background-color:#FFF;
}
#scale {
  position:absolute;
  left:-9999em;
}
.white {
  background-color:#FFF;
}
.black {
  background-color:#000;
}
.red {
  background-color:#a72f2f;
}
.orange {
  background-color:#d09329;
}
.green {
  background-color:#62be42;
}
.blue {
  background-color:#2e68af;    
}
.purple {
  background-color:#9835b8;   
}

/* ============ DRAG RESIZE PLUGIN CLASSES ================== */


/* Required CSS classes: must be included in all pages using this script */

/* Apply the element you want to drag/resize */
.drsElement {
position: absolute;
}

/*
The main mouse handle that moves the whole element.
You can apply to the same tag as drsElement if you want.
*/
.drsMoveHandle {
height: 20px;
background-color: #CCC;
cursor: move;
}

/*
The DragResize object name is automatically applied to all generated
corner resize handles, as well as one of the individual classes below.
*/
.dragresize {
position: absolute;
width: 8px;
height: 8px;
font-size: 1px;
background: #EEE;
}

/*
Individual corner classes - required for resize support.
These are based on the object name plus the handle ID.
*/
.dragresize-tl {
  top: -10px;
  left: -10px;
  cursor: nw-resize;
}
.dragresize-tm {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: n-resize;
}
.dragresize-tr {
  top: -10px;
  right: -10px;
  cursor: ne-resize;
}

.dragresize-ml {
  top: 50%;
  margin-top: -5px;
  left: -10px;
  cursor: w-resize;
}
.dragresize-mr {
  top: 50%;
  margin-top: -5px;
  right: -10px;
  cursor: e-resize;
}

.dragresize-bl {
  bottom: -8px;
  left: -8px;
  cursor: sw-resize;
}
.dragresize-bm {
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: s-resize;
}
.dragresize-br {
  bottom: -10px;
  right: -10px;
  cursor: se-resize;
}

.customSizeMobile {
  display:none;
  float:left;
  width:10%;
}
.customTextStyle {
  clear:both;
}
.bx-wrapper {
  max-width:100% !important;
}
.customizeControls h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.purchaseInfo {
  margin:0 0 30px 0;
}

.purchaseButtons {
  margin:0 0 30px 0;
}

.disclaimer {
  padding:0 0 20px 0;
  position:relative;
}

.addCart {
  float:left;
  width:100px;
}

.amount, .quantity, .fromField, .toField, .messageField  {
  padding:0 0 20px 0;
}

.checkout {
  float:left;
  width:195px;
}

.amount select {
  width:100px;
  float:left;
  margin:0 10px 0 0;
}
.amount input[type="text"] {
  width:115px;
}

.quantity {
  clear:both;
}

.fromField input[type="text"], .toField input[type="text"] {
  width:175px;
}

.quantity input[type="text"] {
  width:100px;
}

.customSize label {
  padding:0 0 10px 0;
}

#mobileControls {
  padding:0 0 30px 0;
  display: none;
}

#bld, #ita, #under {
  display:none;
}
/* ============= Add to Cart Pop Up =============== */
#itemAddPopup {
  display: none;
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
  bottom: 135px;
  left: -54px;
  padding: 30px 20px 20px 20px;
}
#itemAddPopup:after {
  content: "";
  display: block;
  border-top: 10px solid #000;
  width: 0px;
  position: absolute;
  bottom: -10px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
#popupImg {
  width: 80px;
  display: inline-block;
  vertical-align: top;
}
#itemPopupClose {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  z-index: 8040;
  background-image: url(/cws4.0/global-unix/images/gift-cards/x.png);
  background-repeat: no-repeat;
}
.btn#toCart {
  display: block;
  margin-top: 10px;
  float: none;
}
.createdImages {
  display:none;
}
.fontStyleHold, .fontHold {
  display:inline-block;
}

#toFrom {
  padding:30px 0 30px 0;
  display: none;
}
#toFrom input {
  padding:12px 12px 12px 12px;
}
.field.to {
  margin:0 5% 0 0;
}
.field.to, .field.from {
  width:42%;
  float:left;
  clear:none;
}

.hldButtons {
  border:1px solid #CCC;
  box-sizing:border-box;
  padding:25px 30px 25px 30px;
  margin: 0 0 30px 0;
}
.mobileArrows {
  cursor:pointer;
  width: 27px;
}
#customCardDisclaimer {
  display: block;
  margin: 0 0 20px 0;
}

@media only screen and (min-width:1024px) {
  #imageScaling {
    max-width: 120px;
  }
}

@media only screen and (max-width:1024px) {
  #cardTemplates, .customizeLeft {
      width:100%;
      float:none;
  }
  .cardDesign {
      width:118px;
  }
  #customTemplates, #moreCards {
      text-align: center;
      width: 553px;
      margin: 0 auto;
  }
  #seeMore {
      width:40%;
      margin: 0 auto 30px auto;
  }
  .customizeLeft {
      border:none;
  }
  #mobileControls {
      display: block;
  }
  .resizePic {
      top: 42%;
  }
}
@media only screen and (min-width:100px) and (max-width:850px) {
  .resizePic button {
      width: 35px;
      height: 35px;
  }
  .resizePic {
      position:static;
      top:0;
      left:0;
      padding:20px 0 0 0;
  }
  .customCardHold {
      padding:20px 0 20px 0;
  }
  .customColor, .customBgColor {
      width:100%; 
      text-align:center;
  }
  .customBgColor {
      margin:20px 0 0 0;
  }
  .colorBox {
      text-align:left;
  }
  #imageScaling {
      width: 40%;
      float: left;
  }
  #mobileControls {
      width: 60%;
      float: left;
  }
}
@media only screen and (min-width:100px) and (max-width:767px) {
  .form, #btnField {
      float:none;
      width:75%;
      margin:0 auto;
  }
  #disclaimer {
      padding:30px 0 0 0;
      display:block;
  }
  #amtField {
      margin:0 3% 0 0;
  }
  #amtField, #qtyField {
      width:100%;
      margin:0;
  }
  #qtyField select {
      width:48%;
  }
  #amtDenom {
      margin:0 3% 0 0;
  }
  #amtDenom, #amtOther {
      width:48%;
  }
  #amtDenom select, #cws_list_gcBuyQty {
      width:100%;
  }
  #customCardDisclaimer {
      margin: 20px 0 20px 0;
  }
  #cws_val_gcBuyAmt {
      position: static;
      left: 0;
      right: inherit;
      text-align: left;
      padding: 3px 0 0 0;
  }
  #editCardInfo .btn {
      margin-right:0;
      width:100%;
  }
}
@media only screen and (min-width:100px) and (max-width:690px) {
  .fontStyleHold, .fontHold {
      display:block;
      text-align:center;
      margin:0 0 20px 0;
  }
  #cws_lbl_txtBold {
      margin:0;
  }
  .topRow {
      height:auto;
      width:100%;
  }
  .fontStyleHold {
      margin:0;
  }
  .colorBox {
      right:0;
      left: inherit;
  }
  
}
@media only screen and (min-width:100px) and (max-width:590px) {
  #customTemplates, #moreCards {
      text-align: center;
      width: 300px;
      margin: 0 auto;
  }
  #messageHold, #messageHold  textarea {
      width: 85px;
      height: 60px;
  }
  #seeMore {
      width: 62%;
      margin: 0 auto 30px auto;
      font-size:14px;
      padding:10px 20px 10px 20px;
  }
  #customCard, #overlayTemplate {
      width:272px;
      height:178px;
  }
  #customizeLeftInside {
      padding: 15px 15px 0 15px;
  }
  .wrapper1240 {
      max-width: 98%;
  }
  .textControls {
      padding:25px 10px 25px 10px;
  }
  .form, #btnField {
      width:88%;
  }
  #goToCart {
      float:none;
  }
  .hldButtons {
      padding:20px 10px 20px 10px;
  }
}
@media only screen and (min-width:100px) and (max-width:400px) {
  .uploadTitle {
      display:block;
      width:100%;
      margin:0 0 10px 0;
      text-align:center;
  }
  .textControls .customColor label, .textControls .customBgColor label {
      font-size:12px;
  }
  #textColorTile, #textBgColorTile {
      width:31px;
  }
  #amtField {
      margin:0 0 20px 0;
  }
  #amtField, #qtyField {
      width:100%;
  }
  .form, #btnField {
      width:100%;
  }
  .fieldHint, input.invalid[type="text"] + span.val, select.invalid ~ span.val {
      font-size:10px;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .fontStyleHold input[type="radio"]:checked + label {
      background-size: 25px;
  }
}