.cosmogram-and-form-wrapper > figure {
  position: relative;
}
.cosmogram-image {
  display: block;
  height: auto;
  left: 0;
  margin: 0 auto;
  max-width: 100%;
  position: absolute;
  top: 0;
  transition: opacity 0.5s ease-out;
  width: 600px;
}
.cosmogram-image.is-hidden {
  opacity: 0;
}
#cosmogram {
  display: block;
  height: 600px;
  margin: 0 auto;
  position: relative;
  transition: opacity 0.5s ease-out;
  width: 600px;
}
#cosmogram.is-hidden {
  opacity: 0;
}
#cosmogram .cosmogram-initial-bg,
#cosmogram .cosmogram-ring {
  display: block;
  height: 600px;
  position: absolute;
  width: 600px;
}
#cosmogram .cosmogram-initial-bg {
  transition: all 1.5s ease-out;
  z-index: 1;
}
#cosmogram .cosmogram-ring {
  height: 600px;
  left: 0;
  top: 0;
  transition: all 1.5s ease-out;
  width: 600px;
  z-index: 5;
}
#cosmogram .cosmogram-ring-symbol {
  transition: all 1.5s ease-out;
}
#cosmogram .cosmogram-star,
#cosmogram .cosmogram-center {
  left: 50%;
  position: absolute;
  top: 50%;
  transition: all 1.5s ease-out;
}
#cosmogram .cosmogram-star {
  height: 116px;
  margin: -58px 0 0 -58px;
  opacity: 0;
  transform: rotate(7.5deg);
  width: 116px;
  z-index: 4;
}
#cosmogram .cosmogram-center {
  height: 296px;
  margin: -148px 0 0 -147px;
  width: 300px;
  z-index: 2;
}
#cosmogram .cosmogram-object {
  height: 400px;
  left: 100px;
  opacity: 0;
  position: absolute;
  top: 100px;
  transition: transform 1.5s ease-out, opacity 0.5s ease-out;
  transition-delay: .5s;
  width: 400px;
  z-index: 5;
}
#cosmogram .cosmogram-object svg {
  left: 40px;
  margin: 0;
  position: absolute;
  top: calc(37.5%);
  z-index: 5;
}
#cosmogram img.cosmogram-object {
  height: 440px;
  width: 440px;
}
#cosmogram #cosmogram-symbol-bliznieta,
#cosmogram #cosmogram-symbol-byk,
#cosmogram #cosmogram-symbol-baran,
#cosmogram #cosmogram-symbol-ryby,
#cosmogram #cosmogram-symbol-wodnik,
#cosmogram #cosmogram-symbol-koziorozec,
#cosmogram #cosmogram-symbol-strzelec,
#cosmogram #cosmogram-symbol-skorpion,
#cosmogram #cosmogram-symbol-waga,
#cosmogram #cosmogram-symbol-panna,
#cosmogram #cosmogram-symbol-lew,
#cosmogram #cosmogram-symbol-rak {
  position: absolute;
}
#cosmogram #cosmogram-symbol-bliznieta {
  left: 5%;
  top: 32%;
}
#cosmogram #cosmogram-symbol-byk {
  left: 16%;
  top: 15%;
}
#cosmogram #cosmogram-symbol-baran {
  left: 32%;
  top: 5%;
}
#cosmogram #cosmogram-symbol-ryby {
  left: 52%;
  top: 5%;
}
#cosmogram #cosmogram-symbol-wodnik {
  left: 68%;
  top: 15%;
}
#cosmogram #cosmogram-symbol-koziorozec {
  left: 78%;
  top: 32%;
}
#cosmogram #cosmogram-symbol-strzelec {
  left: 78%;
  top: 52%;
}
#cosmogram #cosmogram-symbol-skorpion {
  left: 68%;
  top: 69%;
}
#cosmogram #cosmogram-symbol-waga {
  left: 52%;
  top: 78%;
}
#cosmogram #cosmogram-symbol-panna {
  left: 32%;
  top: 78%;
}
#cosmogram #cosmogram-symbol-lew {
  left: 16%;
  top: 69%;
}
#cosmogram #cosmogram-symbol-rak {
  left: 5%;
  top: 52%;
}
#cosmogram.is-calculated .cosmogram-star {
  opacity: 1;
}
#cosmogram.is-calculated .cosmogram-center {
  opacity: 0;
  transform: scale(0.5);
}
#cosmogram.is-calculated .cosmogram-object {
  opacity: 1;
}
@keyframes cosmogram-dash {
  to {
    stroke-dashoffset: 0;
  }
}
.section-birthday-horoscope .cosmogram-label-empty {
  display: none;
}
.section-birthday-horoscope.is-empty .cosmogram-label-empty {
  display: block;
}
.section-birthday-horoscope.is-empty .cosmogram-selected-date-wrapper,
.section-birthday-horoscope.is-empty .birthday-list {
  display: none;
}
.cosmogram-form .city {
  position: relative;
}
.cosmogram-form .error {
  color: #ee78a1;
  bottom: 0px;
  font-size: 12px;
  left: 10px;
  pointer-events: none;
  position: absolute;
}
.cosmogram-form .error-no-city {
  bottom: -60px;
}
.cosmogram-form .error.is-hidden {
  display: none;
}
.cosmogram-form .btn[disabled] {
  opacity: .5;
  pointer-events: none;
}
/**
 * Color variants
 */
#cosmogram.cosmogram-green .cosmogram-center {
  height: 300px;
  margin: -162px 0 0 -148px;
  width: 300px;
}
#cosmogram.cosmogram-pink .cosmogram-center {
  height: 300px;
  margin: -149px 0 0 -150px;
  width: 300px;
  z-index: 2;
}
#cosmogram.cosmogram-blue .cosmogram-center {
  height: 300px;
  margin: -150px 0 0 -150px;
  width: 300px;
  transform: rotate(5deg);
}
#cosmogram.cosmogram-orange .cosmogram-center {
  height: 300px;
  margin: -150px 0 0 -150px;
  width: 300px;
  transform: rotate(0deg);
}
/**
 * Cosmogram RWD
 */
@media (max-width: 1300px) {
  .cosmogram-and-form-wrapper {
    overflow: hidden;
  }
  #cosmogram {
    transform: scale(0.75) translateX(0px);
  }
}
@media (max-width: 1200px) {
  .cosmogram-and-form-wrapper {
    overflow: hidden;
  }
  #cosmogram {
    transform: scale(0.7) translateX(-80px);
  }
}
@media (max-width: 1100px) {
  .cosmogram-and-form-wrapper {
    flex-wrap: wrap;
  }
  .cosmogram-and-form-wrapper > .content {
    margin: 0 auto;
    max-width: 570px;
    width: 100%;
  }
  .cosmogram-and-form-wrapper > figure {
    width: 100%!important;
  }
  #cosmogram {
    margin: 60px auto 30px auto;
    transform: scale(1);
  }
  .cosmogram-image {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 760px) {
  .cosmogram-and-form-wrapper > figure {
    padding-bottom: 100%;
    position: relative;
  }
  #cosmogram {
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.75);
  }
}
@media (max-width: 640px) {
  #cosmogram {
    transform: translateX(-50%) translateY(-50%) scale(0.66);
  }
}
@media (max-width: 580px) {
  #cosmogram {
    transform: translateX(-50%) translateY(-50%) scale(0.5);
  }
}
@media (max-width: 460px) {
  .cosmogram-and-form-wrapper > figure {
    padding-bottom: 400px;
  }
}
@media (max-width: 400px) {
  .cosmogram-and-form-wrapper > figure {
    padding-bottom: 320px;
  }
  #cosmogram {
    transform: translateX(-50%) translateY(-50%) scale(0.4);
  }
}