.clear {
  display: block;
  clear: both;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  font-size: 10px;
  overflow-x: hidden;
  font-size: 8px;
}
@media (max-width: 1540px) {
  html {
    font-size: 0.51948052vw;
  }
}
@-ms-viewport {
  width: device-width;
}
body {
  font-family: "omnes-cyrillic", sans-serif;
  font-style: normal;
  line-height: 1;
  color: #003833;
  background: url(https://evn-koleda.com/public/images/backgr_pattern.svg) center center #143b12;
  background-size: 150px;
  background: #ffe5c9;
  position: relative;
  flex-grow: 1;
  padding: 0;
  margin: 0;
}
.page-content {
  display: flex;
  align-items: center;
  padding: 3rem;
}
.popup-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
.popup-wrapper.active {
  z-index: 100;
}
.card-wrapper {
  width: 144rem;
  height: 89.6rem;
  position: relative;
  margin: 0 auto;
  border-radius: 2rem;
  box-shadow: 0px 1rem 1.5rem -0.3rem rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 2rem 1rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  aspect-ratio: 1440 / 896;
  z-index: 10;
  background: #FFE5C9;
}
.card-wrapper .logo {
  position: absolute;
  top: -6.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 19.2rem;
  height: 16.5rem;
  font-size: 0;
}
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://evn-koleda.com/public/images/step_loading@2x.png) center center no-repeat;
  background-size: cover;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.loading__bar {
  position: absolute;
  top: 43.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 68.5rem;
  height: 5.9rem;
  border-radius: 200px;
  border: 1rem solid #EF5633;
}
.loading__bar__inner {
  height: 5.9rem;
  width: 0;
  background: #EF5633;
  border-radius: 200px;
  transform: translateX(-1rem) translateY(-1rem);
}
.loading .row-1 {
  position: absolute;
  left: 50%;
  top: 31.5rem;
  transform: translateX(-50%);
  text-align: center;
  color: #073733;
  width: 100%;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-style: italic;
  font-size: 8rem;
}
.loading .row-2 {
  position: absolute;
  left: 50%;
  top: 54.5rem;
  transform: translateX(-50%);
  font-weight: 500;
  font-style: italic;
  font-size: 3.2rem;
  text-align: center;
  color: #073733;
  width: 100%;
}
.loading.hide {
  opacity: 0;
  pointer-events: none;
}
.manifesto {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.manifesto--bg {
  background: url(https://evn-koleda.com/public/images/step_0_text_bg@2x.png) center center no-repeat;
  background-size: cover;
}
.manifesto--en {
  background: url(https://evn-koleda.com/public/images/step_0_text_en@2x.png) center center no-repeat;
  background-size: cover;
}
.manifesto .stars {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transform: translateY(-15%) skewY(-4deg) skewX(-2deg) rotate(-2deg);
  transition: transform 1s;
}
.manifesto .stars.animate {
  transform: translateY(0) skewY(0deg) skewX(0deg) rotate(0deg);
}
.manifesto .ball {
  position: absolute;
  pointer-events: none;
}
.manifesto .ball-1 {
  top: -9rem;
  left: -2.8rem;
  width: 31.8rem;
  z-index: 10;
  transform: translateY(-30%) translateX(-5%) rotateY(40deg) skewY(-7deg);
  transition: transform 1s;
}
.manifesto .ball-1.animate {
  transform: translateY(0) translateX(0) rotateY(0deg) skewY(0deg);
}
.manifesto .ball-2 {
  top: -9rem;
  left: 9.3rem;
  width: 24.8rem;
  transform: translateY(-15%) translateX(-5%) rotateY(40deg) skewY(-8deg);
  transition: transform 1s;
}
.manifesto .ball-2.animate {
  transform: translateY(0) translateX(0) rotateY(0deg) skewY(0deg);
}
.manifesto .ball-3 {
  top: -9rem;
  left: 116rem;
  width: 20rem;
  z-index: 10;
  transform: translateY(-35%) translateX(-25%) rotateY(40deg) skewY(-7deg);
  transition: transform 1s;
}
.manifesto .ball-3.animate {
  transform: translateY(0) translateX(0) rotateY(0deg) skewY(0deg);
}
.manifesto .ball-4 {
  top: -6.8rem;
  left: 118.6rem;
  width: 21.4rem;
  transform: translateY(-15%) translateX(8%) rotateY(40deg) skewY(-4deg);
  transition: transform 1s;
}
.manifesto .ball-4.animate {
  transform: translateY(0) translateX(0) rotateY(0deg) skewY(0deg);
}
.manifesto .ball-5 {
  top: -9rem;
  left: 3.8rem;
  width: 6.8rem;
  transform: translateY(-120%);
  transition: transform 1s;
}
.manifesto .ball-5.animate {
  transform: translateY(0);
}
.manifesto .ball-6 {
  top: -23rem;
  left: 117.6rem;
  width: 6.8rem;
  transform: translateY(-120%);
  transition: transform 1s;
}
.manifesto .ball-6.animate {
  transform: translateY(0);
}
.manifesto .row-1 {
  position: absolute;
  left: 50%;
  top: 50.8rem;
  transform: translate(-50%);
  font-weight: normal;
  font-style: italic;
  font-size: 2.4rem;
  line-height: 2.6rem;
  text-align: center;
  color: #000;
  width: 100%;
  opacity: 0;
  transition: opacity 1.5s;
  pointer-events: none;
  max-width: 90rem;
  font-size: 2.6rem;
  line-height: 1.08333333;
  top: 48.8rem;
}
.manifesto .row-1.animate {
  opacity: 1;
  pointer-events: all;
}
@media (max-height: 450px) {
  .manifesto .row-1 {
    font-size: 3rem;
    line-height: 1.08333333;
    top: 48.8rem;
  }
}
.manifesto .row-2 {
  position: absolute;
  left: 50%;
  top: 57.8rem;
  transform: translate(-50%);
  font-weight: normal;
  font-style: italic;
  font-size: 2.4rem;
  line-height: 2.6rem;
  text-align: center;
  color: #000;
  width: 100%;
  opacity: 0;
  transition: opacity 1.5s;
  pointer-events: none;
  max-width: 75rem;
  font-size: 2.6rem;
  line-height: 1.08333333;
  top: 55rem;
}
.manifesto .row-2.animate {
  opacity: 1;
  pointer-events: all;
}
@media (max-height: 450px) {
  .manifesto .row-2 {
    font-size: 3rem;
    line-height: 1.08333333;
    top: 55rem;
  }
  .manifesto .row-2 br {
    display: none;
  }
}
.manifesto a {
  position: absolute;
  bottom: 9rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.5s;
  pointer-events: none;
}
.manifesto a svg {
  width: 24.1rem;
  height: 7.1rem;
}
.manifesto a:hover path {
  fill: #FDB13E;
}
.manifesto a.animate {
  opacity: 1;
  pointer-events: all;
}
.manifesto.hide {
  opacity: 0;
  pointer-events: none;
}
.step-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.step-1--bg {
  background: url(https://evn-koleda.com/public/images/step_1_text_bg@2x.png) center center no-repeat;
  background-size: cover;
}
.step-1--en {
  background: url(https://evn-koleda.com/public/images/step_1_text_en@2x.png) center center no-repeat;
  background-size: cover;
}
.step-1 a:hover path {
  fill: #EF5633;
}
.step-1 a:hover text {
  fill: #fff;
}
.step-1 a.btn {
  position: absolute;
}
.step-1 a.btn svg {
  width: 54.7rem;
  height: 24.3rem;
}
.step-1 a.btn-1-1 {
  bottom: 38.3rem;
  left: 16.2rem;
}
.step-1 a.btn-1-2 {
  bottom: 38.3rem;
  left: 73.1rem;
}
.step-1 a.btn-1-3 {
  bottom: 11.8rem;
  left: 16.2rem;
}
.step-1 a.btn-1-4 {
  bottom: 11.8rem;
  left: 73.1rem;
}
.step-1 a.btn-1-5 {
  bottom: 24rem;
  left: 53.4rem;
  z-index: 10;
}
.step-1 a.btn-1-5 svg {
  width: 37.3rem;
  height: 26.2rem;
}
.step-1 .step_1_lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: url(https://evn-koleda.com/public/images/step_1_1@2x.png) center center no-repeat, url(https://evn-koleda.com/public/images/step_1_2@2x.png) center center no-repeat;
  background-size: cover, 0;
}
.step-1 .step_1_lights--1 {
  background-size: cover, 0;
}
.step-1 .step_1_lights--2 {
  background-size: 0, cover;
}
.step-1.hide {
  opacity: 0;
  pointer-events: none;
}
.step-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.step-2--bg {
  background: url(https://evn-koleda.com/public/images/step_2_bg@2x.png) center center no-repeat;
  background-size: cover;
}
.step-2--en {
  background: url(https://evn-koleda.com/public/images/step_2_en@2x.png) center center no-repeat;
  background-size: cover;
}
.step-2.hide {
  opacity: 0;
  pointer-events: none;
}
.step-2 a {
  position: absolute;
}
.step-2 a img {
  display: block;
  width: 46.6rem;
  height: 34.9rem;
}
.step-2 a.card-1 {
  top: 10.4rem;
  left: 86rem;
}
.step-2 a.card-2 {
  top: 46.7rem;
  left: 86rem;
}
.step-3 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.step-3--bg {
  background: url(https://evn-koleda.com/public/images/step_3_bg@2x.png) center center no-repeat;
  background-size: cover;
}
.step-3--en {
  background: url(https://evn-koleda.com/public/images/step_3_en@2x.png) center center no-repeat;
  background-size: cover;
}
.step-3.hide {
  opacity: 0;
  pointer-events: none;
}
.step-3 .card {
  position: absolute;
  width: 48.6rem;
  height: 64.8rem;
  top: 14.6rem;
  left: 18.6rem;
}
.step-3 .card img {
  display: block;
  width: 100%;
}
.step-3 .field {
  position: absolute;
  width: 38.2rem;
  height: 5.8rem;
  color: #fff;
  border-style: none;
  background: transparent;
  outline: none;
  font-size: 2rem;
  font-weight: bold;
  padding: 0 1em;
  display: flex;
  align-items: center;
}
.step-3 .field.sender {
  top: 57.5rem;
  left: 96.5rem;
}
.step-3 .field.receiver {
  top: 66.1rem;
  left: 96.5rem;
}
.step-3 a.next {
  position: absolute;
  bottom: 7.5rem;
  left: 110.6rem;
}
.step-3 a.next svg {
  width: 24.1rem;
  height: 7.1rem;
}
.step-3 a.next:hover path {
  fill: #FDB13E;
}
.step-3 .step_3_lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: url(https://evn-koleda.com/public/images/step_3_1@2x.png) center center no-repeat, url(https://evn-koleda.com/public/images/step_3_2@2x.png) center center no-repeat;
  background-size: cover, 0;
}
.step-3 .step_3_lights--1 {
  background-size: cover, 0;
}
.step-3 .step_3_lights--2 {
  background-size: 0, cover;
}
.step-4 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.step-4--bg {
  background: url(https://evn-koleda.com/public/images/step_4_bg@2x.png) center center no-repeat;
  background-size: cover;
}
.step-4--en {
  background: url(https://evn-koleda.com/public/images/step_4_en@2x.png) center center no-repeat;
  background-size: cover;
}
.step-4.hide {
  opacity: 0;
  pointer-events: none;
}
.step-4 .card {
  position: absolute;
  top: 14.6rem;
  left: 18.6rem;
}
.step-4 .card img {
  display: block;
  width: 100%;
}
.step-4 .wishes {
  position: absolute;
  top: 34rem;
  left: 71rem;
}
.step-4 .wishes .wish {
  width: 64.8rem;
  min-height: 10rem;
  border-radius: 500px;
  background: #ef5633;
  font-weight: 600;
  font-style: italic;
  font-size: 3.2rem;
  text-align: center;
  color: #ffe5c9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  cursor: pointer;
  padding: 0.5em;
}
.step-4 .wishes .wish:hover {
  background: #FDB13E;
}
.step-4 .step_4_lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: url(https://evn-koleda.com/public/images/step_4_1@2x.png) center center no-repeat, url(https://evn-koleda.com/public/images/step_4_2@2x.png) center center no-repeat;
  background-size: cover, 0;
}
.step-4 .step_4_lights--1 {
  background-size: cover, 0;
}
.step-4 .step_4_lights--2 {
  background-size: 0, cover;
}
.card {
  font-size: 1rem;
  width: 48.6em;
  height: 64.8em;
  color: #fff;
  position: absolute;
}
.card--bg .card__overlay__text {
  display: none !important;
}
.card__header,
.card__header-2 {
  font-size: 2.1em;
  position: absolute;
  top: 2em;
  text-align: center;
  width: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
}
.card__header:after,
.card__header-2:after {
  height: 0.05em;
  max-height: 1px;
  background: #fff;
  content: '';
  position: absolute;
  bottom: -0.5em;
  width: 86%;
  left: 50%;
  transform: translateX(-50%);
}
.card--2_1,
.card--2_2,
.card--5_1,
.card--5_2 {
  color: #073733;
}
.card--2_1 .card__header:after,
.card--2_2 .card__header:after,
.card--5_1 .card__header:after,
.card--5_2 .card__header:after,
.card--2_1 .card__header-2:after,
.card--2_2 .card__header-2:after,
.card--5_1 .card__header-2:after,
.card--5_2 .card__header-2:after,
.card--2_1 .card__wish__inner:after,
.card--2_2 .card__wish__inner:after,
.card--5_1 .card__wish__inner:after,
.card--5_2 .card__wish__inner:after {
  background: #073733;
}
.card img {
  display: block;
  width: 100%;
}
.card__header-2 {
  line-height: 1.1;
}
.card__header-2:after {
  display: none;
}
.card__wish__inner {
  font-size: 1.54166667em;
  margin-top: 0.75em;
  font-family: "Playfair Display", serif;
  color: inherit;
  font-weight: 600;
  font-style: italic;
  width: 100%;
  text-align: center;
  position: relative;
  line-height: 1.05;
}
.card__wish__inner:after {
  height: 1px;
  background: #fff;
  content: '';
  position: absolute;
  top: -0.4em;
  width: 86%;
  left: 50%;
  transform: translateX(-50%);
}
.card__wish__inner div {
  font-size: 0.88em;
}
.card__wish {
  position: absolute;
  font-size: 3.7em;
  top: 2.75em;
  font-family: "Playfair Display", serif;
  color: inherit;
  font-weight: 600;
  font-style: italic;
  width: 100%;
  text-align: center;
}
.card__overlay {
  background: #fff;
  position: absolute;
  bottom: 2em;
  left: 2em;
  right: 2em;
  height: 7.5em;
}
.card__overlay__text {
  position: absolute;
  bottom: 2em;
  left: 21em;
  right: 2em;
  height: 7.5em;
  opacity: 1;
  background: url(https://evn-koleda.com/public/images/card_en.png) 0 1.7em no-repeat;
  background-size: 23em;
}
.card__overlay__text > div {
  font-size: 2.1em;
  height: inherit;
  display: flex;
  align-items: center;
  line-height: normal;
  color: #000;
  font-weight: 500;
  display: none;
}
.step-5 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.step-5--bg {
  background: url(https://evn-koleda.com/public/images/step_5_bg@2x.png) center center no-repeat;
  background-size: cover;
}
.step-5--en {
  background: url(https://evn-koleda.com/public/images/step_5_en@2x.png) center center no-repeat;
  background-size: cover;
}
.step-5.hide {
  opacity: 0;
  pointer-events: none;
}
.step-5 .card {
  position: absolute;
  font-size: 1.14rem;
  top: 13rem;
  left: 81rem;
}
.step-5 .card img {
  display: block;
  width: 100%;
}
.step-5 .options {
  position: absolute;
  top: 41.3rem;
  left: 13.6rem;
}
.step-5 .options > div:first-child {
  display: flex;
  gap: 1.8rem;
  padding-bottom: 1.8rem;
}
.step-5 .options a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 1.3em;
  width: max-content;
  height: 7.8rem;
  background: #ef5633;
  border-radius: 500px;
  font-weight: bold;
  font-size: 3.2rem;
  color: #ffe5c9;
}
.step-5 .options a:hover {
  background-color: #FFA200;
}
.step-5 .options a.facebook img {
  width: 2.3rem;
  height: auto;
}
.step-5 .options a.email img {
  width: 6.6rem;
  height: auto;
}
.step-5 .options a.copy img {
  width: 4.2rem;
  height: auto;
}
.step-5 .options a.facebook,
.step-5 .options a.email,
.step-5 .options a.copy {
  width: 10rem;
}
.step-5 .step_5_lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: url(https://evn-koleda.com/public/images/step_5_1@2x.png) center center no-repeat, url(https://evn-koleda.com/public/images/step_5_2@2x.png) center center no-repeat;
  background-size: cover, 0;
}
.step-5 .step_5_lights--1 {
  background-size: cover, 0;
}
.step-5 .step_5_lights--2 {
  background-size: 0, cover;
}
.step-preview {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://evn-koleda.com/public/images/step_receive_2@2x.png) center center no-repeat, url(https://evn-koleda.com/public/images/step_receive_1@2x.png) center center no-repeat;
  background-size: cover, 0;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
  border-radius: 2rem;
}
.step-preview--1 {
  background: url(https://evn-koleda.com/public/images/step_receive_1@2x.png) center center no-repeat;
  background-size: cover;
}
.step-preview--2 {
  background: url(https://evn-koleda.com/public/images/step_receive_2@2x.png) center center no-repeat;
  background-size: cover;
}
.step-preview.hide {
  opacity: 0;
  pointer-events: none;
}
.step-preview .card {
  position: absolute;
  font-size: 1.14rem;
  top: 11.5rem;
  left: 14.5rem;
}
.step-preview .card img {
  display: block;
  width: 100%;
}
.step-preview .create {
  position: absolute;
  top: 69rem;
  left: 87rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em 1.3em;
  width: max-content;
  height: 7.8rem;
  background: #ef5633;
  border-radius: 500px;
  font-weight: bold;
  font-size: 3.2rem;
  color: #ffe5c9;
}
.step-preview .create:hover {
  background-color: #FFA200;
}
.step-preview .row-1 {
  position: absolute;
  left: 87rem;
  top: 49.23rem;
  font-weight: normal;
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  text-align: left;
  color: #073733;
}
.back {
  position: absolute;
  bottom: 3.5rem;
  left: 4.5rem;
  z-index: 50;
}
.back svg {
  width: 8.5rem;
  height: 8.5rem;
}
.back:hover rect {
  fill: #FFA200;
}
.card-share {
  width: 1200px;
  height: 630px;
  background: url(https://evn-koleda.com/public/images/facebook_share@2x.png) center center no-repeat;
  background-size: cover;
  font-size: 10px;
}
.card-share .card {
  position: absolute;
  font-size: 8.8px;
  top: 33px;
  left: 388px;
}
.card-share .card img {
  display: block;
  width: 100%;
}
.sound {
  z-index: 50;
  position: absolute;
  width: 6.5rem;
  height: 6.5rem;
  top: 3.5rem;
  right: 3.5rem;
  background: url(https://evn-koleda.com/public/images/btn_play.svg) center center no-repeat;
  background-size: contain;
  cursor: pointer;
  display: none;
}
.sound.show {
  display: block;
}
.sound--off {
  background: url(https://evn-koleda.com/public/images/btn_mute.svg) center center no-repeat;
  background-size: contain;
}
.expand {
  z-index: 50;
  position: absolute;
  width: 6.5rem;
  height: 6.5rem;
  top: 3.5rem;
  right: 11.5rem;
  background: url(https://evn-koleda.com/public/images/btn_expand.svg) center center no-repeat;
  background-size: contain;
  cursor: pointer;
}
body .cc-window {
  font-size: 14px;
  border-radius: 3.4rem;
  max-width: 300px !important;
  font-family: "omnes-cyrillic", sans-serif;
}
@media (max-width: 768px) {
  body .cc-window {
    font-size: 12px;
    max-width: calc(100vw - 2rem) !important;
    bottom: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    border-radius: 1.6rem;
  }
}
body .cc-window a {
  color: #CC0000;
}
body .cc-btn.cc-dismiss {
  color: #ffe5c9;
  background: #ef5633;
  border-radius: 500px;
  font-weight: bold;
  font-size: 20px;
  padding: 0.9em 1.5em;
  display: inline-block !important;
  margin: 0 auto;
  transition: none;
  font-family: "omnes-cyrillic", sans-serif;
  flex: none !important;
}
@media (max-width: 1024px) {
  body .cc-btn.cc-dismiss {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  body .cc-btn.cc-dismiss {
    font-size: 16px !important;
  }
}
body .cc-btn.cc-dismiss:hover {
  background-color: #FFA200;
}
#msg-dialog {
  border: none;
  border-radius: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
}
#msg-dialog::backdrop {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
}
#msg-dialog .dialog-content {
  font-size: 3rem;
  text-align: center;
  padding: 0.5em;
}
#msg-dialog .dialog-buttons {
  margin-top: 1.5rem;
  text-align: center;
}
#msg-dialog .button {
  font-family: "omnes-cyrillic", sans-serif;
  font-weight: bold;
  font-size: 2.56rem;
  padding: 0.5em 1.5em;
  color: #ffe5c9;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}
#msg-dialog .button.close {
  background-color: #ef5633;
}
#msg-dialog .button:hover {
  background-color: #FDB13E;
}
@keyframes rotateHoldRotateBack {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
.rotating-element {
  animation: rotateHoldRotateBack 4s infinite;
  animation-timing-function: ease-in-out;
}
#turn-screen {
  display: none;
}
@media (max-width: 450px) {
  #turn-screen {
    display: block;
    position: fixed;
    height: 100%;
    width: 100%;
    min-height: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
  }
  #turn-screen.disable-turn {
    display: none !important;
  }
  #turn-screen.turn-screen--1 {
    background: url(https://evn-koleda.com/public/images/mobile_top_2.png) center top no-repeat, url(https://evn-koleda.com/public/images/mobile_bottom_2.png) left bottom no-repeat, url(https://evn-koleda.com/public/images/mobile_top_1.png) center top no-repeat, url(https://evn-koleda.com/public/images/mobile_bottom_1.png) left bottom no-repeat;
    background-color: #FFE5C9;
    background-size: cover, 80%, 0, 0;
  }
  #turn-screen.turn-screen--2 {
    background: url(https://evn-koleda.com/public/images/mobile_top_2.png) center top no-repeat, url(https://evn-koleda.com/public/images/mobile_bottom_2.png) left bottom no-repeat, url(https://evn-koleda.com/public/images/mobile_top_1.png) center top no-repeat, url(https://evn-koleda.com/public/images/mobile_bottom_1.png) left bottom no-repeat;
    background-color: #FFE5C9;
    background-size: 0, 0, cover, 80%;
  }
  #turn-screen img {
    width: 110px;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%);
    animation: rotateHoldRotateBack 4s infinite;
    animation-timing-function: ease-in-out;
  }
  #turn-screen div {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translateX(-50%) translateY(calc(-50% - 110px));
    font-weight: normal;
    font-style: italic;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    color: #073733;
    width: 80vw;
  }
}