.boxes { display: flex; flex-direction: column; align-items: center; max-width: 1000px; margin: 0px auto; }
.boxes__header { text-align: center !important; font-weight: 700 !important; }
.boxes__header h2 { margin: 15px 0px !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.2;}
.boxes__header p { font-size: 20px !important;max-width: 500px; }
.boxes__h1 { font-size: 23px !important; padding: 15px 0px !important; text-shadow: rgb(204, 0, 0) 0px 0px 0px !important; background-color: rgb(255, 255, 0) !important; color: rgb(204, 0, 0) !important; margin: 5px auto !important; width: 100% !important; text-align: center !important; }
.boxes__instructions { display: flex; flex-flow: row nowrap; width: 100%; justify-content: space-between; padding: 20px 10px; background-color: rgb(35, 47, 62); border-radius: 4px; color: rgb(255, 255, 255); margin-top: 20px; text-align: center; }
.boxes__wrapper { display: flex; flex-flow: row wrap; justify-content: center; max-width: 800px; }
.boxes__wrapper > div { position: relative; display: flex; width: 32.5%; justify-content: center; transition-duration: 0.2s; cursor: pointer; }
.boxes__wrapper > div:hover { transform: scale(1.1, 1.1); }
.boxes__discount img, .try { width: 180px; height: 165px; }
@media screen and (max-width: 600px) {
  .boxes__discount img, .try { width: 150px; height: 135px; }
}
@media screen and (max-width: 400px) {
  .boxes__discount img, .try { width: 130px; height: 115px; }
}
@media screen and (max-width: 340px) {
  .boxes__discount img, .try { width: 110px; height: 95px; }
}
@keyframes showSweetAlert {
  0% { transform: scale(0.7); }
  45% { transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes showSweetAlert {
  0% { transform: scale(0.7); }
  45% { transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes hideSweetAlert {
  0% { transform: scale(1); }
  100% { transform: scale(0.5); }
}
@keyframes hideSweetAlert {
  0% { transform: scale(1); }
  100% { transform: scale(0.5); }
}
@keyframes slideFromTop {
  0% { top: 0px; }
  100% { top: 50%; }
}
@keyframes slideFromTop {
  0% { top: 0px; }
  100% { top: 50%; }
}
@keyframes slideToTop {
  0% { top: 50%; }
  100% { top: 0px; }
}
@keyframes slideToTop {
  0% { top: 50%; }
  100% { top: 0px; }
}
@keyframes slideFromBottom {
  0% { top: 70%; }
  100% { top: 50%; }
}
@keyframes slideFromBottom {
  0% { top: 70%; }
  100% { top: 50%; }
}
@keyframes slideToBottom {
  0% { top: 50%; }
  100% { top: 70%; }
}
@keyframes slideToBottom {
  0% { top: 50%; }
  100% { top: 70%; }
}
@keyframes animateSuccessTip {
  0%, 54% { width: 0px; left: 1px; top: 19px; }
  70% { width: 50px; left: -8px; top: 37px; }
  84% { width: 17px; left: 21px; top: 48px; }
  100% { width: 25px; left: 14px; top: 45px; }
}
@keyframes animateSuccessTip {
  0%, 54% { width: 0px; left: 1px; top: 19px; }
  70% { width: 50px; left: -8px; top: 37px; }
  84% { width: 17px; left: 21px; top: 48px; }
  100% { width: 25px; left: 14px; top: 45px; }
}
@keyframes animateSuccessLong {
  0%, 65% { width: 0px; right: 46px; top: 54px; }
  84% { width: 55px; right: 0px; top: 35px; }
  100% { width: 47px; right: 8px; top: 38px; }
}
@keyframes animateSuccessLong {
  0%, 65% { width: 0px; right: 46px; top: 54px; }
  84% { width: 55px; right: 0px; top: 35px; }
  100% { width: 47px; right: 8px; top: 38px; }
}
@keyframes rotatePlaceholder {
  0%, 5% { transform: rotate(-45deg); }
  100%, 12% { transform: rotate(-405deg); }
}
@keyframes rotatePlaceholder {
  0%, 5% { transform: rotate(-45deg); }
  100%, 12% { transform: rotate(-405deg); }
}
@keyframes animateErrorIcon {
  0% { transform: rotateX(100deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes animateErrorIcon {
  0% { transform: rotateX(100deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes animateXMark {
  0%, 50% { transform: scale(0.4); margin-top: 26px; opacity: 0; }
  80% { transform: scale(1.15); margin-top: -6px; }
  100% { transform: scale(1); margin-top: 0px; opacity: 1; }
}
@keyframes animateXMark {
  0%, 50% { transform: scale(0.4); margin-top: 26px; opacity: 0; }
  80% { transform: scale(1.15); margin-top: -6px; }
  100% { transform: scale(1); margin-top: 0px; opacity: 1; }
}
@keyframes pulseWarning {
  0% { border-color: rgb(248, 212, 134); }
  100% { border-color: rgb(248, 187, 134); }
}
@keyframes pulseWarning {
  0% { border-color: rgb(248, 212, 134); }
  100% { border-color: rgb(248, 187, 134); }
}
@keyframes pulseWarningIns {
  0% { background-color: rgb(248, 212, 134); }
  100% { background-color: rgb(248, 187, 134); }
}
@keyframes pulseWarningIns {
  0% { background-color: rgb(248, 212, 134); }
  100% { background-color: rgb(248, 187, 134); }
}
@keyframes rotate-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotate-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes ball-fall {
  0% { opacity: 0; transform: translateY(-145%); }
  10%, 90% { opacity: 0.5; }
  20%, 80% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(145%); }
}
@keyframes ball-fall {
  0% { opacity: 0; transform: translateY(-145%); }
  10%, 90% { opacity: 0.5; }
  20%, 80% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(145%); }
}
@keyframes bounce {
  0%, 100%, 20%, 53%, 80% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0px, 0px, 0px); }
  40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0px, -30px, 0px); }
  70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0px, -15px, 0px); }
  90% { transform: translate3d(0px, -4px, 0px); }
}
@keyframes bounce {
  0%, 100%, 20%, 53%, 80% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0px, 0px, 0px); }
  40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0px, -30px, 0px); }
  70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0px, -15px, 0px); }
  90% { transform: translate3d(0px, -4px, 0px); }
}
@keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}