.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}body.toplevel_page_woocommerce-notification {
overflow-x: hidden;
}
#message-purchased {
border: 0 none;
border-radius: 0;
bottom: 20px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
display: none;
font-family: tahoma, sans-serif;
left: 20px;
padding: 0;
position: fixed;
right: auto !important;
text-align: left;
top: auto !important;
width: auto;
z-index: 99999;
} #message-purchased.wn-rtl p {
margin: 0 13px 0 0;
float: right;
}
#message-purchased.wn-rtl {
padding: 0 0 0 25px;
text-align: right;
}
#message-purchased.wn-rtl img {
float: right;
}
#message-purchased.bottom_right {
left: auto !important;
right: 20px !important;
}
#message-purchased.top_right {
left: auto !important;
right: 20px !important;
top: 20px !important;
bottom: auto !important;
}
#message-purchased.top_left {
left: auto !important;
top: 20px !important;
bottom: auto !important;
}
#message-purchased img {
cursor: pointer;
float: left;
max-height: 85px;
max-width: 85px;
width: auto;
align-self: center;
}
#message-purchased.img-right img {
cursor: pointer;
float: right;
max-height: 85px;
max-width: 120px;
width: auto;
}
#message-purchased p {
float: left;
font-size: 13px;
line-height: 20px;
margin: 0 0 0 13px;
padding: 10px 5px 5px 0;
width: auto;
}
#message-purchased p a {
color: #000;
display: block;
font-size: 15px;
font-weight: 700;
width: 100%;
margin: 0;
}
#message-purchased p a:hover {
color: #000;
}
#message-purchased p small {
display: block;
font-size: 10px;
margin-bottom: 8px;
}
#message-purchased {
padding-right: 25px;
}
#message-purchased.img-right {
padding: 0;
}
#message-purchased #notify-close {
background: rgba(0, 0, 0, 0) url(//mailinhmart.com/wp-content/plugins/woocommerce-notification/images/close.png) repeat scroll 0 0 / cover;
cursor: pointer;
height: 16px;
position: absolute;
right: 10px;
top: 10px;
width: 16px;
}
@media screen and (max-width: 767px) {
#message-purchased {
bottom: 0 !important;
box-sizing: border-box;
left: 0 !important;
top: auto !important;
width: 100%;
padding: 0;
}
#message-purchased.bottom_right {
right: 0 !important;
}
#message-purchased.top_right {
right: 0 !important;
}
#message-purchased img {
max-width: 20%;
}
#message-purchased a img {
max-width: 100%;
}
#message-purchased p {
font-size: 11px;
width: 70%;
}
#message-purchased p a {
font-size: 13px;
}
#message-purchased p small {
margin-bottom: 0;
}
}
#woocommerce-notification-audio {
display: none;
}
#message-purchased {
background-color: #ffffff;
color: #0f0f0f;
}
#message-purchased a {
color: #0f0f0f;
}
@keyframes nFadeIn {
0% {
opacity: 0;
transform: translate3d(0px, 100%, 0px);
}
100% {
opacity: 1;
transform: none;
}
}
#message-purchased.fade-in {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: nFadeIn;
opacity: 0;
}
@keyframes nFadeOut {
0% {
opacity: 1;
}
100% {
bottom: 0;
opacity: 0;
transform: translate3d(0px, 100%, 0px);
}
}
#message-purchased.fade-out {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: nFadeOut;
opacity: 1;
} @keyframes nbounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
#message-purchased.bounceIn {
animation-duration: 1s;
animation-name: nbounceIn;
} @keyframes nbounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
#message-purchased.bounceInDown {
animation-duration: 1s;
animation-name: nbounceInDown;
} @keyframes nbounceInLeft {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
#message-purchased.bounceInLeft {
animation-duration: 1s;
animation-name: nbounceInLeft;
} @keyframes nbounceInRight {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
#message-purchased.bounceInRight {
animation-duration: 1s;
animation-name: nbounceInRight;
} @keyframes nbounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
#message-purchased.bounceInUp {
animation-duration: 1.5s;
animation-name: nbounceInUp;
} @keyframes nbounceOut {
20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
#message-purchased.bounceOut {
animation-duration: 1.5s;
animation-name: nbounceOut;
opacity: 0;
} @keyframes nbounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
#message-purchased.bounceOutDown {
animation-duration: 1.5s;
animation-name: nbounceOutDown;
opacity: 0;
} @keyframes nbounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
#message-purchased.bounceOutLeft {
animation-duration: 1.5s;
animation-name: nbounceOutLeft;
opacity: 0;
} @keyframes nbounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
#message-purchased.bounceOutRight {
animation-duration: 1.5s;
animation-name: nbounceOutRight;
opacity: 0;
} @keyframes nbounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
#message-purchased.bounceOutUp {
animation-duration: 1.5s;
animation-name: nbounceOutUp;
opacity: 0;
} @keyframes nfadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInDown {
animation-duration: 1s;
animation-name: nfadeInDown;
} @keyframes nfadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInDownBig {
animation-duration: 1s;
animation-name: nfadeInDownBig;
} @keyframes nfadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInLeft {
animation-duration: 1s;
animation-name: nfadeInLeft;
} @keyframes nfadeInLeftBig {
from {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInLeftBig {
animation-duration: 1s;
animation-name: nfadeInLeftBig;
} @keyframes nfadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInRight {
animation-duration: 1s;
animation-name: nfadeInRight;
} @keyframes nfadeInRightBig {
from {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInRightBig {
animation-duration: 1s;
animation-name: nfadeInRightBig;
} @keyframes nfadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInUp {
animation-duration: 1s;
animation-name: nfadeInUp;
} @keyframes nfadeInUpBig {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.fadeInUpBig {
animation-duration: 1s;
animation-name: nfadeInUpBig;
} @keyframes nfadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
#message-purchased.fadeOutDown {
animation-duration: 1.5s;
animation-name: nfadeOutDown;
opacity: 0;
} @keyframes nfadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
#message-purchased.fadeOutDownBig {
animation-duration: 1.5s;
animation-name: nfadeOutDownBig;
opacity: 0;
} @keyframes nfadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
#message-purchased.fadeOutLeft {
animation-duration: 1.5s;
animation-name: nfadeOutLeft;
opacity: 0;
} @keyframes nfadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
#message-purchased.fadeOutLeftBig {
animation-duration: 1.5s;
animation-name: nfadeOutLeftBig;
opacity: 0;
} @keyframes nfadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
#message-purchased.fadeOutRight {
animation-duration: 1.5s;
animation-name: nfadeOutRight;
opacity: 0;
} @keyframes nfadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
#message-purchased.fadeOutRightBig {
animation-duration: 1.5s;
animation-name: nfadeOutRightBig;
opacity: 0;
} @keyframes nfadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
#message-purchased.fadeOutUp {
animation-duration: 1.5s;
animation-name: nfadeOutUp;
opacity: 0;
} @keyframes nfadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
#message-purchased.fadeOutUpBig {
animation-duration: 1.5s;
animation-name: nfadeOutUpBig;
opacity: 0;
} @keyframes nflipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
#message-purchased.flipInX {
animation-duration: 1s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: nflipInX;
} @keyframes nflipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
#message-purchased.flipInY {
animation-duration: 1s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-name: nflipInY;
} @keyframes nflipOutX {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
#message-purchased.flipOutX {
animation-duration: 1.5s;
animation-name: nflipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
opacity: 0;
} @keyframes nflipOutY {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
#message-purchased.flipOutY {
animation-duration: 1.5s;
animation-name: nflipOutY;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
opacity: 0;
} @keyframes nlightSpeedIn {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
#message-purchased.lightSpeedIn {
animation-duration: 1s;
animation-name: nlightSpeedIn;
animation-timing-function: ease-out;
} @keyframes nlightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
#message-purchased.lightSpeedOut {
animation-duration: 1.5s;
animation-name: nlightSpeedOut;
animation-timing-function: ease-in;
opacity: 0;
} @keyframes nrotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
#message-purchased.rotateIn {
animation-duration: 1s;
animation-name: nrotateIn;
} @keyframes nrotateInDownLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
#message-purchased.rotateInDownLeft {
animation-duration: 1s;
animation-name: nrotateInDownLeft;
} @keyframes nrotateInDownRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
#message-purchased.rotateInDownRight {
animation-duration: 1s;
animation-name: nrotateInDownRight;
} @keyframes nrotateInUpLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: none;
opacity: 1;
}
}
#message-purchased.rotateInUpLeft {
animation-duration: 1s;
animation-name: nrotateInUpLeft;
} @keyframes nrotateInUpRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: none;
opacity: 1;
}
}
#message-purchased.rotateInUpRight {
animation-duration: 1s;
animation-name: nrotateInUpRight;
} @keyframes nrotateOut {
from {
transform-origin: center;
opacity: 1;
}
to {
transform-origin: center;
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
#message-purchased.rotateOut {
animation-duration: 1.5s;
animation-name: nrotateOut;
opacity: 0;
} @keyframes nrotateOutDownLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
#message-purchased.rotateOutDownLeft {
animation-duration: 1.5s;
animation-name: nrotateOutDownLeft;
opacity: 0;
} @keyframes nrotateOutDownRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
#message-purchased.rotateOutDownRight {
animation-duration: 1.5s;
animation-name: nrotateOutDownRight;
opacity: 0;
} @keyframes nrotateOutUpLeft {
from {
transform-origin: left bottom;
opacity: 1;
}
to {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
#message-purchased.rotateOutUpLeft {
animation-duration: 1.5s;
animation-name: nrotateOutUpLeft;
opacity: 0;
} @keyframes nrotateOutUpRight {
from {
transform-origin: right bottom;
opacity: 1;
}
to {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
#message-purchased.rotateOutUpRight {
animation-duration: 1.5s;
animation-name: nrotateOutUpRight;
opacity: 0;
} @keyframes nrollIn {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
transform: none;
}
}
#message-purchased.rollIn {
animation-duration: 1s;
animation-name: nrollIn;
} @keyframes nrollOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
#message-purchased.rollOut {
animation-duration: 1.5s;
animation-name: nrollOut;
opacity: 0;
} @keyframes nzoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#message-purchased.zoomIn {
animation-duration: 1s;
animation-name: nzoomIn;
} @keyframes nzoomInDown {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#message-purchased.zoomInDown {
animation-duration: 1s;
animation-name: nzoomInDown;
} @keyframes nzoomInLeft {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#message-purchased.zoomInLeft {
animation-duration: 1s;
animation-name: nzoomInLeft;
} @keyframes nzoomInRight {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#message-purchased.zoomInRight {
animation-duration: 1s;
animation-name: nzoomInRight;
} @keyframes nzoomInUp {
from {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#message-purchased.zoomInUp {
animation-duration: 1s;
animation-name: nzoomInUp;
} @keyframes nzoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#message-purchased.zoomOut {
animation-duration: 1.5s;
animation-name: nzoomOut;
opacity: 0;
} @keyframes nzoomOutDown {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#message-purchased.zoomOutDown {
animation-duration: 1.5s;
animation-name: nzoomOutDown;
opacity: 0;
} @keyframes nzoomOutLeft {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(-2000px, 0, 0);
transform-origin: left center;
}
}
#message-purchased.zoomOutLeft {
animation-duration: 1.5s;
animation-name: nzoomOutLeft;
opacity: 0;
} @keyframes nzoomOutRight {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
transform: scale(.1) translate3d(2000px, 0, 0);
transform-origin: right center;
}
}
#message-purchased.zoomOutRight {
animation-duration: 1.5s;
animation-name: nzoomOutRight;
opacity: 0;
} @keyframes nzoomOutUp {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#message-purchased.zoomOutUp {
animation-duration: 1.5s;
animation-name: nzoomOutUp;
opacity: 0;
} @keyframes nslideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
#message-purchased.slideInDown {
animation-duration: 1s;
animation-name: nslideInDown;
} @keyframes nslideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
#message-purchased.slideInLeft {
animation-duration: 1s;
animation-name: nslideInLeft;
} @keyframes nslideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
#message-purchased.slideInRight {
animation-duration: 1s;
animation-name: nslideInRight;
} @keyframes nslideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
#message-purchased.slideInUp {
animation-duration: 1s;
animation-name: nslideInUp;
} @keyframes nslideOutDown {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
opacity: 0;
}
}
#message-purchased.slideOutDown {
animation-duration: 1.5s;
animation-name: nslideOutDown;
opacity: 0;
} @keyframes nslideOutLeft {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
}
#message-purchased.slideOutLeft {
animation-duration: 1.5s;
animation-name: nslideOutLeft;
opacity: 0;
} @keyframes nslideOutRight {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
opacity: 0;
}
}
#message-purchased.slideOutRight {
animation-duration: 1.5s;
animation-name: nslideOutRight;
opacity: 0;
} @keyframes nslideOutUp {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
visibility: hidden;
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
#message-purchased.slideOutUp {
animation-duration: 1.5s;
animation-name: nslideOutUp;
opacity: 0;
} #message-purchased .wn-nonajax {
display: flex;
} #message-purchased.extended {
width: 400px;
}
#message-purchased.extended.wn-boxing::before {
background-color: #c41c2f;
}
#message-purchased.extended::before {
right: 0;
position: absolute;
top: 0;
content: " ";
bottom: 0;
left: 0;
background-repeat: no-repeat;
background-position: top right;
}
#message-purchased.extended > * {
z-index: 1;
}
#message-purchased.extended img {
padding: 7px 0 7px 5px;
}
#message-purchased.extended p {
width: 270px;
}
#message-purchased.extended p a {
width: 270px;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0;
}  #message-purchased.extended.wn-boxing::before {
background-color: #c41c2f;
} #message-purchased.extended.wn-christmas {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
background-color: #ec6a6f;
}
#message-purchased.extended.wn-christmas::before {
right: -47px;
background-position: bottom right;
} #message-purchased.extended.wn-black_friday::before {
background-size: auto 100%;
} #message-purchased.extended.wn-valentine::before {
background-position: bottom right;
background-color: #fce9f6;
}