@charset "utf-8";

@keyframes toaster-right-exit { 
  0% { right: 0px; }
  100% { right: -9999px; }
}

@keyframes toaster-right { 
  0% { right: -9999px; }
  100% { right: 0px; }
}

@keyframes toaster-left-exit { 
  0% { left: 0px; }
  100% { left: -9999px; }
}

@keyframes toaster-left { 
  0% { left: -9999px; }
  100% { left: 0px; }
}

@keyframes left-exit { 
  100% { left: -9999px; }
}

@keyframes left { 
  100% { left: 0px; }
}

@keyframes right-exit { 
  100% { right: -9999px; }
}

@keyframes right { 
  100% { right: 0px; }
}

@keyframes top-exit { 
  0% { top: 0px; }
  100% { top: -9999px; }
}

@keyframes top { 
  100% { top: 0px; }
}

@keyframes bottom-exit { 
  0% { bottom: 0px; }
  100% { bottom: -9999px; }
}

@keyframes bottom { 
  100% { bottom: 0px; }
}

@keyframes center-exit { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes center { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#promo-designer-modal-custom-pop.toaster_left.visible, #promo-designer-modal-custom-pop.toaster_right.visible { visibility: hidden !important; }

.promo-designer-modal .modal-dialog.toaster_right, .promo-designer-modal .modal-dialog.toaster_left { visibility: hidden; position: fixed; top: 25%; }

.promo-designer-modal.visible .modal-dialog.toaster_right { animation: 0.5s ease 0s 1 normal forwards running toaster-right; }

.promo-designer-modal.visible.exit .modal-dialog.toaster_right { animation: 0.5s ease 0s 1 normal forwards running toaster-right-exit; }

.promo-designer-modal.visible .modal-dialog.toaster_left { animation: 0.5s ease 0s 1 normal forwards running toaster-left; margin: 0px; }

.promo-designer-modal.visible.exit .modal-dialog.toaster_left { animation: 0.5s ease 0s 1 normal backwards running toaster-left-exit; }

#promo-designer-modal-custom-pop.visible .modal-dialog.left { animation: 1s ease 0s 1 normal forwards running left; left: -999px; }

#promo-designer-modal-custom-pop.visible.exit .modal-dialog.left { animation: 1s ease 0s 1 normal backwards running left-exit; }

#promo-designer-modal-custom-pop.visible .modal-dialog.right { animation: 1s ease 0s 1 normal forwards running right; right: -999px; }

#promo-designer-modal-custom-pop.visible.exit .modal-dialog.right { animation: 1s ease 0s 1 normal backwards running right-exit; }

#promo-designer-modal-custom-pop.visible .modal-dialog.top { animation: 1s ease 0s 1 normal forwards running top; top: -999px; }

#promo-designer-modal-custom-pop.visible.exit .modal-dialog.top { animation: 1s ease 0s 1 normal backwards running top-exit; }

#promo-designer-modal-custom-pop.visible .modal-dialog.bottom { animation: 1s ease 0s 1 normal forwards running bottom; bottom: -999px; }

#promo-designer-modal-custom-pop.visible.exit .modal-dialog.bottom { animation: 1s ease 0s 1 normal backwards running bottom-exit; }

#promo-designer-modal-custom-pop.visible.exit .modal-dialog.centered { animation: 1s ease 0s 1 normal forwards running center-exit; }

#promo-designer-modal-custom-pop.visible .modal-dialog.centered { animation: 1s ease 0s 1 normal forwards running center; }

#promo-designer-modal-custom-pop { overflow: inherit; background: rgba(0, 0, 0, 0.6); opacity: 0; }

#promo-designer-modal-custom-pop.visible .modal-dialog { visibility: visible; opacity: 1; overflow: auto; }

#promo-designer-modal-custom-pop .panel { box-shadow: none; margin-bottom: 0px; border-radius: 6px; }

.promo-design .panel { box-shadow: none; position: relative; }

.promo-design .headline, .promo-design .subheadline { font-weight: 700; text-align: center; padding-bottom: 20px; }

.promo-design button.close { position: absolute; right: 0px; z-index: 99; opacity: 0.8; font-size: 24px; }

#promo-designer-modal-custom-pop .card-bg-color { border-radius: 6px; }

.promo-designer-modal .modal-content { background-color: transparent; box-shadow: none; border: none; }

.promo-design .headline.small { font-size: 25px; line-height: 25px; }

.promo-design .headline.medium { font-size: 45px; line-height: 45px; }

.promo-design .headline.large { font-size: 65px; line-height: 65px; }

.promo-design p.text { text-align: center; padding-bottom: 20px; }

.promo-design .light { color: rgb(255, 255, 255); }

.promo-design .info-text { text-align: center; font-size: 12px; margin-top: 20px; }

.promo-design .image { margin: 0px auto; position: relative; }

.promo-design .image.small { width: 50%; }

.promo-design .image.medium { width: 65%; }

.promo-design .image.large { width: 85%; }

.promo-design .image { padding-top: 20px; padding-bottom: 20px; }

.promo-design .text-shadow { text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 3px; }

.promo-design .sticker { width: 100px; z-index: 1; position: relative; margin: 0px auto -54px; font-size: 70px; text-align: center; vertical-align: middle; padding-top: 0px; height: 80px; }

.promo-design .sticker .jp-svg { vertical-align: baseline; }

.promo-design .sticker.rounded, .promo-design .rounded_rectangle div, .promo-design .full-width-container { border-radius: 10px; }

.promo-design .full-width-container img { width: 100%; }

.promo-design .rounded_rectangle .full-width-container img { border-radius: 5px 5px 0px 0px; }

.promo-design .sticker.circle { border-radius: 50px; height: 100px; padding-top: 20px; }

.promo-design .promo-designer-wrapper { padding-top: 0px; }

.promo-design .sticker.circle .jp-svg { vertical-align: top; }

.promo-design .sticker.circle { padding-top: 10px; }

.promo-design .card-bg-color.circle .headline.large { font-size: 35px; line-height: 35px; }

.promo-design .card-bg-color.circle .headline.medium { font-size: 30px; line-height: 30px; }

.promo-design a, .promo-design .headline, .promo-design input, .promo-design p, .promo-design button { text-overflow: ellipsis; overflow: hidden; }

.promo-design .card-bg-color.circle .headline.small { font-size: 25px; line-height: 25px; }

.promo-design .card-bg-color.circle .headline, .promo-design .card-bg-color.circle p.text { padding-bottom: 10px; }

.promo-design p.info-text { margin-top: 10px; }

.promo-design::before, .promo-design::after { box-sizing: border-box; }

.promo-design a.manage { color: rgb(0, 0, 0) !important; text-shadow: none; }

.promo-design .mailinglist-container.light .mailinglist-item { color: rgb(255, 255, 255) !important; text-shadow: none; }

.promo-design .mailinglist-container.dark .mailinglist-item { text-shadow: none; }

.promo-design .mailinglist-container.text-shadow .mailinglist-item { text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 3px; }

.promo-show { display: flex !important; background: rgba(0, 0, 0, 0.6) !important; }

#promo-designer-modal-custom-pop.promo-designer-modal { display: flex; height: 100%; visibility: hidden; }

#promo-designer-modal-custom-pop.visible { display: flex; background: rgba(0, 0, 0, 0.6); opacity: 1; visibility: visible; }

#promo-designer-modal-custom-pop .modal-dialog.modal-md { margin: auto; }

.promo-design .promo-design-button { display: block; margin: 10px auto; text-align: center; }

.promo-design .mailinglist-container .mailinglist-item { border-radius: 0px; }

.promo-designer-modal .modal-body { padding: 0px !important; }

.promo-design .lead-in { text-align: center; padding-bottom: 10px; font-size: 18px; }

#promo-designer-modal-custom-pop .promo-design.card-circle .panel { border-radius: 50%; overflow: hidden; }

#promo-designer-modal-custom-pop .promo-design.card-circle .card-bg-color.circle { align-items: center; justify-content: center; }

#promo-designer-modal-custom-pop .promo-design.card-circle .circle button.close { color: rgb(255, 255, 255); opacity: 0.8; right: 0px; position: absolute; }

#promo-designer-modal-custom-pop .promo-design.card-circle .circle button.close .tnt-inverse { color: rgb(0, 0, 0); }

#promo-designer-modal-custom-pop .promo-design.card-circle .circle .promo-designer-wrapper { margin: 15px auto 0px; padding-bottom: 25px; width: 65%; }

@media screen and (max-width: 991px) {
  #promo-designer-modal-custom-pop > div { margin-top: 50px; }
}

@media only screen and (max-width: 1023px) {
  #promo-designer-modal-custom-pop .card.email-signup, #promo-designer-modal-custom-pop .modal-dialog.modal-md { width: auto !important; }
}

@media only screen and (max-width: 768px) {
  #promo-designer-modal-custom-pop .card.email-signup, #promo-designer-modal-custom-pop .modal-dialog.modal-md { width: 100% !important; }
  .promo-design .headline.small { font-size: 25px; line-height: 25px; }
  .promo-design .headline.medium { font-size: 35px; line-height: 35px; }
  .promo-design .headline.large { font-size: 45px; line-height: 45px; }
}

@media only screen and (max-width: 425px) {
  #promo-designer-modal-custom-pop .card.email-signup, #promo-designer-modal-custom-pop .modal-dialog.modal-md { width: 100% !important; }
  .promo-design .headline.small { font-size: 20px; line-height: 20px; }
  .promo-design .headline.medium { font-size: 25px; line-height: 25px; }
  .promo-design .headline.large { font-size: 30px; line-height: 30px; }
}