.online__gad {
  padding: 20px 0;
}
.online__gad .do_btns {
  margin-top: -2rem;
}
.online__gad * {
  bonline-sizing: border-bonline;
}
.online__gad *:focus {
  outline: none;
}
.online__none {
  display: none;
}
.online__btn {
  cursor: pointer;
border-radius: 6px;
padding: 10px 10px 10px 10px;
text-align: center;
font-size: 18px;
font-weight: bold;
text-decoration: none;
display: inline-block;
border: 0px solid transparent;
line-height: 1;
background: blue;
color: #fff;
border: 1px solid blue;
transition: all 250ms ease-out;
}
.online__btn:focus {
  bonline-shadow: 0px 0px transparent;
}
.online__btn:hover {
  background: #60acec;
  color: #fff;
}
.online__btn:active,
.online__btn:focus {
  background: #3394e6;
  color: #fff;
  border: 1px solid #1c88e3;
}
.online__btn:active:hover,
.online__btn:focus:hover {
  background: #60acec;
  color: #fff;
}
.online__title {
  text-align: center;
  margin: 15px 0;
  padding: 0;
}
.online__title-big {
  font-weight: 800;
  font-size: 2rem;
}
.online__rezult {
  display: none;
  padding: 15px;
}
.online__item .alignleft {
  float: left;
  margin-right: 10px;
  margin-bottom: 16px;
}
.online__item:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  clear: both;
}
.online__info {
  text-align: center;
  margin: 1rem auto 3rem;
  max-width: 500px;
}
.online__info_title {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
}
.online-zodiak {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.online-zodiak__item {
  width: calc(16.66% - 10px);
  margin: 5px;
  cursor: pointer;
  background: #fcfcfc;
  border: 1px solid #ececec;
  padding: 0.5rem;
  border-radius: 6px;
  display: inline-block;
  transition: all 250ms ease-out;
  width: 100px;
height: 100px;
}
 /*.online-zodiak__item.s1 .online-zodiak__icon:before {
  background: #f6cccc;
}
.online-zodiak__item.s1.active .online-zodiak__icon:before,
.online-zodiak__item.s1:hover .online-zodiak__icon:before {
  background: #eea1a1;
}
.online-zodiak__item.s2 .online-zodiak__icon:before {
  background: #d5f3f6;
}
.online-zodiak__item.s2.active .online-zodiak__icon:before,
.online-zodiak__item.s2:hover .online-zodiak__icon:before {
  background: #abe7ed;
}
.online-zodiak__item.s3 .online-zodiak__icon:before {
  background: #f6f3c1;
}
.online-zodiak__item.s3.active .online-zodiak__icon:before,
.online-zodiak__item.s3:hover .online-zodiak__icon:before {
  background: #f0ea94;
}
.online-zodiak__item.s4 .online-zodiak__icon:before {
  background: #d9eed3;
}
.online-zodiak__item.s4.active .online-zodiak__icon:before,
.online-zodiak__item.s4:hover .online-zodiak__icon:before {
  background: #b9e0ae;
}
.online-zodiak__item.s5 .online-zodiak__icon:before {
  background: #f5dec6;
}
.online-zodiak__item.s5.active .online-zodiak__icon:before,
.online-zodiak__item.s5:hover .online-zodiak__icon:before {
  background: #edc59b;
}
.online-zodiak__item.s6 .online-zodiak__icon:before {
  background: #ddcee0;
}
.online-zodiak__item.s6.active .online-zodiak__icon:before,
.online-zodiak__item.s6:hover .online-zodiak__icon:before {
  background: #c7afcc;
}
.online-zodiak__item.s7 .online-zodiak__icon:before {
  background: #f6dae5;
}
.online-zodiak__item.s7.active .online-zodiak__icon:before,
.online-zodiak__item.s7:hover .online-zodiak__icon:before {
  background: #ecb1c8;
}
.online-zodiak__item.s8 .online-zodiak__icon:before {
  background: #dee1f6;
}
.online-zodiak__item.s8.active .online-zodiak__icon:before,
.online-zodiak__item.s8:hover .online-zodiak__icon:before {
  background: #b6bdeb;
}
.online-zodiak__item.s9 .online-zodiak__icon:before {
  background: #e3f6ed;
}
.online-zodiak__item.s9.active .online-zodiak__icon:before,
.online-zodiak__item.s9:hover .online-zodiak__icon:before {
  background: #bcead4;
}
.online-zodiak__item.s10 .online-zodiak__icon:before {
  background: #eee0d6;
}
.online-zodiak__item.s10.active .online-zodiak__icon:before,
.online-zodiak__item.s10:hover .online-zodiak__icon:before {
  background: #dfc5b2;
}
.online-zodiak__item.s11 .online-zodiak__icon:before {
  background: #f2e0f5;
}
.online-zodiak__item.s11.active .online-zodiak__icon:before,
.online-zodiak__item.s11:hover .online-zodiak__icon:before {
  background: #e2b9e9;
}
.online-zodiak__item.s12 .online-zodiak__icon:before {
  background: #e0d291;
}
.online-zodiak__item.s12.active .online-zodiak__icon:before,
.online-zodiak__item.s12:hover .online-zodiak__icon:before {
  background: #d5c269;
} */
.online-zodiak__item.active,
.online-zodiak__item:hover {
  bonline-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.6);
  background: #fff;
  border: 1px solid #c1c1c1;
  width: 100px;
height: 100px;
}
.online-zodiak__item.active .online-zodiak__icon img {
  transform: rotate(360deg);
  transition: all 750ms ease-out;
}
.online-zodiak__item.active .online-zodiak__icon:before {
  width: 100px;
  height: 100px;
  left: calc(50% - 20px);
  top: 0;
}
.online-zodiak__icon {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
 /*.online-zodiak__icon:before {
  content: '';
  display: block;
   width: 0;
  height: 0; 
  position: absolute;
  z-index: 1;
  background: #3394e6;
  left: 50%;
  border-radius: 1000px;
  top: 50%;
  transition: all 250ms ease-out;
   width: 100px;
  height: 100px;
}  */
.online-zodiak__icon img {
  max-width: 100px;
  transition: all 0ms linear;
  position: relative;
  z-index: 3;
  /* margin: 0 0 0 -15px; */
}
 .online-zodiak__text {
  font-size: 0rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
} 
.online-zodiak__desc {
  font-size: 0rem;
}
.btns {
  text-align: center;
  margin: 20px auto;
}
#online__rezult {
  display: none;
  max-width: 750px;
  margin: 0 auto;
  border: 1px solid #262626;
  border-radius: 5px;
  padding: 5px 15px;
}
.rezult-list {
  margin: 1rem auto 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #262626;
}
.rezult-list__cardtitle {
  border: 2px solid #e0c2fe;
border-radius: 6px;
bonline-shadow: 0 0 1em 0.01em #e0c2fe;
  background: #f1e4ff;
  padding: 10px 15px;
  -ms-grid-column: span 2;
      grid-column: span 2;
  font-weight: 600;
  font-size: 24px;
line-height: 28px;
font-family: Arial;
}
.rezult-list__cardtitle span {
  display: block;
  font-size: 0.85rem;
}
.rezult-list__info:after {
  content: '';
  display: block;
  width: 100%;
  clear: both;
}
.rezult-list__pic {
  width: 150px;
      height: 150px;
  float: left;
  margin: 0 1rem 1rem 0;
  border: 1px solid #f2f2f2;
  border-radius: 10px;
  bonline-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.6);
  padding: 1rem;
  text-align: center;
}
.rezult-list__img {
  max-width: 100%;
}
.rezult-list__title {
  font-weight: bold;
  margin-bottom: 15px;
      font-size: 0px;
    font-family: Arial;
}
.rezult-list__desc {
  font-size: 0rem;
  font-style: italic;
}
@media (max-width: 767px) {
  .online-zodiak__item.active,
  .online-zodiak__item:hover {
    bonline-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.6);
  }
}
@media (max-width: 600px) {
  .online-zodiak__item {
    width: calc(33.33% - 10px);
  }
}
@media (max-width: 560px) {
  .online__title {
    font-size: 1.35rem;
  }
  .online__title-big {
    font-size: 1.5rem;
  }
  .rezult-list__cardtitle {
    font-size: 1.35rem;
  }
  .rezult-list__pic {
    float: none;
    margin: 0 auto 1rem;
  }
}