@font-face {
    font-family: 'HamburgSymbols';
    font-style: normal;
    font-weight: 400;
    src: local('HamburgSymbols'), url('HamburgSymbols.woff') format('woff');
}

html * {
    max-height: 1000000px;
}

.hamburgsymbols {
    font-family: "hamburgsymbols";
}

.arrhow {
    transform: rotate(90deg);
    display: inline-block;
}

.calcline {
    text-align: center;
}

.calc {
    display: inline-block;
    margin: 15px auto auto 0;
    height: 60px;
    line-height: 60px;
    width: 50%;
    text-align: center;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    color: #464544;
    cursor: pointer;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 20%);
    background-color: #FCC52C;
}

.calc:hover {
    background-color: #ffdd43;
}

/* Natal chart counter */
.natal-counter {
    text-align: center;
    margin: 15px 0 0;
}

.natal-counter-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-family: Arial, sans-serif;
}

.natal-counter-emoji {
    font-size: 16px;
    line-height: 1;
}

.natal-counter-text {
    color: #8da2b0;
    font-size: 14px;
}

.natal-counter-number {
    color: #5FCAEE;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 480px) {
    .natal-counter-text {
        font-size: 13px;
    }
    .natal-counter-number {
        font-size: 14px;
    }
}

.formbord {
    border: 2px solid #5FCAEE;
    border-radius: 10px;
    color: #404C61;
    font-size: 16px;
    font-family: arial;
    padding-top: 90px;
    padding-bottom: 8px;
    position: relative;
    margin-top: 80px;
}

.formbord a,
.formbord a:hover {
    color: #5FCAEE;
}

.formtop {
    position: absolute;
    left: 50%;
    margin-left: -80px;
    top: -80px;
}

.poyastxt,
.kordtxt,
.tmtxt {
    padding: 0 30px;
    display: none;
    color: #999999;
}

.korintro {
    padding: 0 30px;
    color: #999999;
    font-size: 15px;
}

.dataitem {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 15px 30px;
}

.dataitem .fbord {
    border: 1px solid #94AFBE;
    border-radius: 10px;
    height: 40px;
    position: relative;
    margin: 5px 0;
}

.dataitem .fbord input,
.dataitem .fbord select,
.dataitem .fbord input:focus {
    border: none;
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0 5px;
    box-sizing: border-box;
    width: calc(100% - 40px);
    float: right;
    color: #999999;
    font-family: arial;
    background: none;
    box-shadow: none;
}

.dataitem .fbord select option:disabled {
    color: #999999;
    opacity: 0.5;
}

.kord {
    display: none;
}

.kord .dataitem .fbord {
    border: none;
}

.kord .dataitem .fbord input,
.kord .dataitem .fbord select {
    border: 1px solid #94AFBE;
    border-radius: 10px;
    float: left;
    width: 30%;
}

.kord .dataitem .fbord select {
    margin: 0 5%;
}

.dataitem .fbord.poyas select {
    width: 100%;
}

.dataitem .fbord img {
    position: absolute;
    left: 8px;
    top: 7px;
}

.poyashide {
    display: none;
}

.formerr {
    border-radius: 10px;
    border: 1px solid red;
    padding: 10px;
    width: calc(100% - 60px);
    margin: 10px auto 0;
    box-sizing: border-box;
}

.asptabs {
    display: flex;
    align-items: stretch;
    margin-top: 1em;
}

.asptab {
    width: 50%;
    text-align: center;
    color: #bbc5cc;
    font-size: 22px;
    border: 1px solid #d9e4ea;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 70px;
    cursor: pointer;
}

.asptab.act,
.asptab:hover {
    border: none;
    background: linear-gradient(to right, rgba(75, 219, 245, 1), rgba(87, 159, 254, 1));
    color: #fff;
}

.asptabs .asptab:nth-of-type(1) {
    border-radius: 25px 0 0 25px;
}

.asptabs .asptab:nth-of-type(2) {
    border-radius: 0 25px 25px 0;
}

.aspkol {
    margin-top: 1em;
    color: #4c4c4c;
    font-size: 18px;
    padding-left: 130px;
}

.icobg {
    width: 115px;
    height: 80px;
    border-radius: 40px;
    background: linear-gradient(141deg, #57a0fe, #4bdbf5);
    box-shadow: -2px 3px 5px 0px rgb(90 90 90 / 20%);
    margin-top: 75px;
    position: relative;
}

.icobg img:nth-of-type(1) {
    width: 40px;
    position: absolute;
    top: 20px;
    left: 15px;
}

.icobg img:nth-of-type(2) {
    width: 50px;
    position: absolute;
    top: 15px;
    left: 55px;
}

.asc .icobg img:nth-of-type(1),
.toasc .icobg img:nth-of-type(1) {
    width: 50px;
    top: 15px;
    left: 35px;
}

.asc .nextline .icobg img:nth-of-type(1) {
    width: 40px;
    top: 20px;
    left: 15px;
}

.asc .nextline .icobg img:nth-of-type(2),
.nextline.toasp .icobg img:nth-of-type(2) {
    width: 40px;
    top: 20px;
}

.aspects .icobg {
    margin-top: 50px;
}

.aspects .icobg img:nth-of-type(2) {
    width: 40px;
    position: absolute;
    top: 20px;
    left: 60px;
}

.icobg img.domico {
    background-color: #fff;
    border-radius: 20px;
    height: 40px;
    width: 40px;
}

.icobg.stihiibg img:nth-of-type(1) {
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: 80%;
    top: 0 !important;
    right: 0;
    bottom: 0;
    left: 0 !important;
    margin: auto;
}

.icobg span {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 20px;
    left: 58px;
    color: #5fcaee;
    font-size: 34px;
    background-color: #fff;
    border-radius: 20px;
    text-align: center;
}

.txtleft,
.txtright {
    display: inline-block;
    vertical-align: top;
}

.txtleft {
    width: 130px;
}

.txtright {
    width: calc(100% - 130px);
}

.txtright .ttl,
.ascttl {
    color: #004377;
    font-size: 28px;
    font-weight: 600;
    line-height: normal;
}

.txtright .ttl i {
    color: #dc78ad;
    font-style: normal;
}

.aspects .txtright .ttl {
    color: #6ac0f3;
    font-weight: 300;
}

.txtright .ttl span {
    display: block;
    color: #5fcaee;
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
}

.txtright .ttl span i {
    color: #cccccc;
    font-style: normal;
}

.txtright .txt,
.asctxt,
.aspintro {
    box-shadow: 0 0 0.5em 0 rgb(0 0 0 / 20%);
    border-radius: 15px;
    padding: 20px;
    color: #676869;
    font-size: 16px;
    margin-top: 20px;
}

.pltxt,
.dtxt {
    display: none;
    padding: 30px 0;
}

.aspects {
    padding-top: 30px;
}

.pldesc .pltxt:first-child,
.domdesc .dtxt:first-child {
    display: block;
}

.pllist {
    margin: 1em 0;
}

.plitem {
    float: left;
    width: 20%;
    padding: 10px 0;
    box-sizing: border-box;
    border: 1px solid #e7e7e7;
    text-align: center;
    font-size: 18px;
    color: #636567;
    cursor: pointer;
}

.plitem img {
    display: block;
    width: 50%;
    max-width: 95%;
    margin: 0 auto 10px;
    transform: scale(0.7);
}

.plitem.notxt img {
    opacity: 0.3;
}

.pllist .plitem:nth-of-type(7) img,
.pllist .plitem:nth-of-type(8) img {
    transform: scale(1);
}

.plitem span {
    display: block;
    font-size: 14px;
}

.plitem:hover,
.plitem.act {
    color: #ffffff;
    background: linear-gradient(90deg, #da8bec, #55c1de);
}

.plitem.notxt {
    cursor: default;
}

.plitem.notxt:hover {
    background: transparent;
    color: #636567;
}

.stihii4,
.dom,
.asp {
    display: none;
}

.asc {
    margin: 1em 0;
}

.natmenu {
    display: flex;
    align-items: stretch;
}

.natmitem {
    width: 25%;
    cursor: pointer;
    border: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    padding: 30px 20px 10px 20px;
    font-size: 18px;
    background-color: #0084c1;
    position: relative;
}

.natmitem span {
    position: absolute;
    width: 100%;
    color: #404040;
    text-align: center;
    font-size: 14px;
    left: 0;
    top: 5px;
    line-height: normal;
}

.natmitem:hover span,
.natmitem.act span {
    color: #fff;
}

.natmitem:hover,
.natmitem.act {
    background: linear-gradient(90deg, #da8bec, #55c1de);
}

.natpic {
    height: 380px;
    background-image: url(img/topbg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    border: 1px solid #fff;
    box-sizing: border-box;
}

.natpic img {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 280px;
    max-width: 90%;
    border-radius: 50%;
    box-shadow: 0px 0px 70px 14px rgba(255, 255, 255, 1);
    z-index: 10;
}

.natpic .lichdan {
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: right;
    z-index: 5;
    color: #5fcaee;
    font-size: 18px;
}

.lichdan a,
.lichdan a:hover {
    color: #5fcaee;
    font-size: 13px;
}

.lichdan {
    color: #5fcaee;
    font-size: 18px;
}

.nextline {
    height: 110px;
    background-image: url(img/nextbg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: stretch;
    cursor: pointer;
}

.nextline:hover {
    box-shadow: 0px 0px 18px 4px rgb(85 171 252 / 80%);
}

.nextline .txtleft,
.nextline .txtright {
    align-items: center;
    display: flex;
}

.nextline .txtright {
    padding-right: 60px;
    padding-left: 20px;
    box-sizing: border-box;
}

.nextline .txtleft {
    justify-content: center;
}

.nextline .txtleft .icobg {
    margin-top: 0;
}

.nextline .txtright .ttl,
.nextline .txtright .ttl i {
    color: #ffffff;
    line-height: 100%;
}

.nextline .nextarr {
    position: absolute;
    width: 27px;
    height: 47px;
    background-image: url(img/narr.png);
    background-position: center;
    top: 31px;
    right: 20px;
}

.newquestion {
    padding-left: 130px;
}

.domlist {
    margin: 1em 0;
    background-image: url(img/dombg.jpg);
    background-size: cover;
    background-position: center;
}

.domitem {
    float: left;
    width: 20%;
    padding: 10px 0;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    cursor: pointer;
    height: 136px;
}

.domitem .numb {
    font-size: 16px;
    color: #9ca5ab;
}

.domitem:hover .numb,
.domitem.act .numb {
    color: #ffffff;
}

.domitem:hover,
.domitem.act {
    background: linear-gradient(90deg, rgba(218, 139, 236, 0.7) 0%, rgba(85, 193, 222, 0.7) 100%);
}

.domitem .ico {
    height: 70px;
    position: relative;
}

.domitem .ico img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.domitem.nodom,
.domitem.nodom:hover {
    background: #ffffff;
    cursor: default;
    height: 136px;
}

.entry-social {
    margin: 0 -20px -20px -20px;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

.aspsoc {
    margin-top: 1em;
    padding-left: 130px;
}

.aspsoc .entry-social {
    margin: 0;
    border-radius: 0;
}

.domintro,
.plintro,
.stihii4intro {
    margin-top: 1em;
    color: #676869;
    font-size: 16px;
}

.domintro a,
.domintro a:hover,
.plintro a,
.plintro a:hover,
.tosoed,
.tosoed:hover {
    color: #5FCAEE;
}

.noplanet .txt a,
.noplanet .txt a:hover,
.stihii4intro a,
.stihii4intro a:hover,
.stihii_intro a,
.stihii_intro a:hover {
    color: #5FCAEE !important;
}

.domintro a.moreshow span,
.plintro a.moreshow span,
.stihii4intro a.moreshow span,
.stihii_intro a.moreshow span {
    transform: rotate(90deg);
    display: inline-block;
}

.domintro a.moreshowno span,
.plintro a.moreshowno span,
.stihii4intro a.moreshowno span,
.stihii_intro a.moreshowno span {
    transform: rotate(-90deg);
    display: inline-block;
}

.domintro .moretxt,
.plintro .moretxt,
.stihii4intro .moretxt,
.stihii_intro .moretxt {
    display: none;
}

.tq {
    vertical-align: sub;
    cursor: pointer;
}

.natart .col {
    align-items: center;
    display: flex;
    width: 15%;
}

.natart .col img {
    display: block;
    margin: auto;
    max-width: 90%;
}

.natart .colmid {
    align-items: center;
    display: flex;
    width: 70%;
    text-align: center;
}

.natart .colmid .ttl {
    color: #ffffff;
    line-height: 100%;
    font-size: 28px;
    font-weight: 600;
    margin: auto;
}

.natart .colmid .ttl span {
    display: block;
    color: #5fcaee;
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
    line-height: normal;
}

.natart.nextline {
    cursor: pointer;
}

.natart.nextline:hover {
    box-shadow: none;
}

.nattxt {
    border: 2px solid #5FCAEE;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 15px;
    color: #676869;
}

.nattxt a,
.nattxt a:hover {
    color: #5FCAEE !important;
}

.nattxt ul ul li:first-child {
    margin-top: 0.7em;
}

.nattxt li {
    padding-bottom: 0.7em;
}

.nattxt ul ul li:last-child {
    padding-bottom: 0;
}

.plzod {
    background-color: #f4efe9;
    padding: 30px 30px 15px 30px;
    color: #4c4c4c;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}

.plzod .hamburgsymbols {
    color: #d6be7a;
    margin-right: 5px;
    font-weight: 400;
    font-size: 20px;
}

.plzod .hamburgsymbols.red {
    color: #e08860;
}

.plzod .hamburgsymbols.green {
    color: #78ba7f;
}

.plzod .hamburgsymbols.purp {
    color: #9870ad;
}

.plzod .hamburgsymbols.blue {
    color: #51bcfa;
}

.plzod tr {
    background-color: transparent !important;
}

.plzod td {
    border: none !important;
    font-size: 16px;
}

.plzod td font {
    cursor: pointer;
}

.plzod td font:hover {
    text-decoration: underline;
}

.plzodtbl tr:not(:nth-of-type(1)) td:nth-of-type(1) {
    font-weight: 600;
}

.plzodtbl {
    width: 70%;
    display: inline-block;
}

.plzodttl td {
    font-size: 18px;
    padding-left: 25px !important;
    padding-bottom: 15px !important;
}

.nattabs.znk .plzodttl td:nth-of-type(3) {
    padding-left: 0 !important;
}

.nattabs.znk .plzodtbl tr td:nth-of-type(3) {
    text-align: center;
}

.plzodtbl tr.hide {
    display: none;
}

.plzodtbl tr.hide.show {
    display: table-row !important;
}

.plzodimg {
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

.plzodimg img {
    max-width: 100%;
}

.plzodtop {
    width: 70%;
    font-size: 24px;
    text-align: center;
    box-sizing: border-box;
}

.plzodtop span {
    font-size: 16px;
    color: #8e8984;
    display: block;
    margin: 15px auto;
}

.plzodmore,
.plzodmore:hover {
    display: block;
    margin: 15px auto 0 auto;
    font-weight: 600;
    text-align: center;
    color: #4c4c4c;
}

.plzodmore span {
    transform: rotate(90deg);
    display: inline-block;
}

.plzod.gtab .plzodmore span {
    transform: rotate(-90deg);
}

.plzod.gtab {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 1em;
}

.plzod.gtab .dreams-block>.dream {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.plzod.gtab .dreams-block>.dream.expandable>.top>.expand {
    margin: 0 30px;
}

.dreams-block>.dream.expandable>.body-container>.body {
    padding: 1em;
}

.plzod.gtab .dreams-block>.dream.expandable.expanded>.body-container {
    height: auto !important;
}

.plzod.gtab .top img {
    margin: 0 15px;
}

.plzod.gtab .top {
    height: 90px;
}

.plzod.gtab .ttl {
    flex: 1 1 100%;
    text-align: center;
    color: #262626;
    font-size: 24px;
}

.plzod.gtab .ttl span {
    display: block;
    font-size: 16px;
    color: #8e8984;
    margin-top: 5px;
}

.plzod .hamburgsymbols.asblue {
    color: #0e0ffa;
}

.plzod .hamburgsymbols.asred {
    color: #d30907;
}

.plzod .hamburgsymbols.asgren1 {
    color: #73e02c;
}

.plzod .hamburgsymbols.asgren2 {
    color: #356715;
}

.plzod .hamburgsymbols.aspink {
    color: #d404fa;
}

.plzod .asred2 {
    color: #d30907;
    margin-right: 15px;
}

.plzod.gtab td {
    font-weight: 600;
}

.plzod.gtab .plzodttl td {
    font-weight: normal;
}

.plzod.gtab .plzodttl td:nth-of-type(4) {
    padding-left: 0 !important;
}

.plzod.gtab .gadalldaily div.names_letter {
    margin-left: 10%;
}

.plzod.gtab .gadalldaily div.names_letter span,
.plzod.gtab .gadalldaily div.names_letter span.act,
.plzod.gtab .gadalldaily div.names_letter span:hover {
    font-size: 18px;
    width: 40%;
    color: #888888;
    font-weight: normal;
}

.plzod.gtab .gadalldaily div.names_letter span.act,
.plzod.gtab .gadalldaily div.names_letter span:hover {
    font-weight: 600;
    background-color: #d6be7a;
    box-shadow: none;
    color: #262626;
}

.nat_pic1,
.nat_pic2 {
    display: none;
}

.nat_pic1 img,
.nat_pic2 img {
    max-width: 100%;
    margin: 20px auto 0 auto;
    display: block;
}

.asp_tab_more2 {
    text-align: center;
    padding: 20px 0 !important;
}

.asp_tab_close1,
.asp_tab_close2 {
    text-align: right;
}

.asp_tab_more1 a,
.asp_tab_more2 a,
.asp_tab_more1 a:hover,
.asp_tab_more2 a:hover,
.asp_tab_close1 a,
.asp_tab_close2 a,
.asp_tab_close1 a:hover,
.asp_tab_close2 a:hover {
    color: #5FCAEE !important;
}

.asp_tab_more1 a span,
.asp_tab_more2 a span {
    transform: rotate(90deg);
    display: inline-block;
}

.asp_tab_close1 a span,
.asp_tab_close2 a span {
    transform: rotate(-90deg);
    display: inline-block;
}

.asp_tab_txt1,
.asp_tab_txt2 {
    display: none;
    padding-top: 20px;
}

.asp_tab1_col {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding-top: 20px;
}

.asp_tab1_col img {
    max-width: 95%;
}

.dreams-block.bg1 {
    background-image: url(img/aspbg.png);
    background-repeat: no-repeat;
    background-position: 80px 20px;
}

.dreams-block.bg2 {
    background-image: url(img/aspbg.png);
    background-repeat: no-repeat;
    background-position: 80px -90px;
}

.stihii_intro {
    color: #676869;
    padding-left: 130px !important;
}

.stobl {
    margin: 1em auto;
    text-align: center;
    position: relative;
    height: 420px;
}

.stround {
    width: 420px;
    height: 420px;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -210px;
}

.stbg1 {
    width: 360px;
    height: 360px;
    position: absolute;
    top: 30px;
    left: 30px;
    border-radius: 50%;
    background: rgba(77, 208, 247);
    background: linear-gradient(90deg, rgba(77, 208, 247, 1) 0%, rgba(83, 178, 251, 1) 100%);
    box-shadow: 0px 0px 5px 3px rgb(0 0 0 / 25%);
}

.stbg2 {
    width: 310px;
    height: 310px;
    position: absolute;
    top: 55px;
    left: 55px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 5px 3px rgb(0 0 0 / 25%);
}

.stbg3 {
    width: 220px;
    height: 220px;
    position: absolute;
    top: 100px;
    left: 100px;
    border-radius: 50%;
    background: rgba(77, 208, 247);
    background: linear-gradient(90deg, rgba(77, 208, 247, 1) 0%, rgba(83, 178, 251, 1) 100%);
    z-index: 20;
}

.stico {
    position: absolute;
    z-index: 25;
    top: 50%;
    left: 50%;
}

.stico:nth-of-type(1) {
    margin-left: -75px;
    margin-top: -87px;
    height: 80px;
}

.stico:nth-of-type(2) {
    margin-left: 15px;
    margin-top: -83px;
    height: 80px;
}

.stico:nth-of-type(3) {
    margin-left: 0px;
    margin-top: 5px;
    height: 80px;
}

.stico:nth-of-type(4) {
    margin-left: -90px;
    margin-top: 25px;
    width: 90px;
}

.percent {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 25;
    box-shadow: 5px 5px 9px 0px rgba(0, 0, 0, 0.25);
}

.percent span {
    display: block;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    line-height: 60px;
    text-align: center;
    position: relative;
    color: #dc78ad;
    font-weight: 600;
    font-size: 24px;
}

.percent.act span {
    background: transparent;
    color: #686868;
}

.percent.per1 {
    background: rgb(231, 161, 51);
    background: linear-gradient(90deg, rgba(231, 161, 51, 1) 0%, rgba(254, 200, 75, 1) 100%);
    top: 40px;
    left: 40px;
}

.percent.per2 {
    background: rgba(77, 208, 247);
    background: linear-gradient(90deg, rgba(77, 208, 247, 1) 0%, rgba(83, 178, 251, 1) 100%);
    top: 40px;
    right: 40px;
}

.percent.per3 {
    background: rgba(86, 139, 219);
    background: linear-gradient(90deg, rgba(86, 139, 219, 1) 0%, rgba(61, 203, 186, 1) 100%);
    bottom: 40px;
    right: 40px;
}

.percent.per4 {
    background: rgba(196, 152, 246);
    background: linear-gradient(90deg, rgba(196, 152, 246, 1) 0%, rgba(161, 146, 244, 1) 100%);
    bottom: 40px;
    left: 40px;
}

.grad {
    width: 210px;
    height: 210px;
    position: absolute;
    z-index: 10;
    background-repeat: no-repeat;
    background-size: 93%;
    opacity: 0;
}

.grad.act {
    opacity: 1;
}

.grad.grad1 {
    top: 0;
    left: 0;
    background-image: url(img/grad1.png);
    background-position: right bottom;
}

.grad.grad2 {
    top: 0;
    right: 0;
    background-image: url(img/grad2.png);
    background-position: left bottom;
}

.grad.grad3 {
    bottom: 0;
    right: 0;
    background-image: url(img/grad3.png);
    background-position: left top;
}

.grad.grad4 {
    bottom: 0;
    left: 0;
    background-image: url(img/grad4.png);
    background-position: right top;
}

.stnm {
    position: absolute;
    color: #686868;
    font-size: 20px;
    text-transform: uppercase;
    top: 50%;
    left: 50%;
    z-index: 20;
}

.stnm.act {
    color: #fff;
}

.stnm.stnm1 {
    margin-top: -130px;
    margin-left: -80px;
}

.stnm.stnm2 {
    margin-top: -130px;
    margin-left: 10px;
}

.stnm.stnm3 {
    margin-top: 110px;
    margin-left: 10px;
}

.stnm.stnm4 {
    margin-top: 110px;
    margin-left: -85px;
}

.perek {
    width: 210px;
    height: 210px;
    z-index: 50;
    position: absolute;
    cursor: pointer;
}

.perek1 {
    top: 0;
    left: 0;
}

.perek2 {
    top: 0;
    left: 50%;
}

.perek3 {
    top: 50%;
    left: 50%;
}

.perek4 {
    top: 50%;
    left: 0;
}

.gline {
    width: 310px;
    height: 1px;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 210px;
    left: 55px;
    z-index: 25;
}

.vline {
    width: 1px;
    height: 310px;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 55px;
    left: 210px;
    z-index: 25;
}

.natinstrclose {
    cursor: pointer;
    text-align: center;
    color: #4c4c4c;
    padding: 10px 0;
    font-weight: 600;
}

.instbut {
    position: absolute;
    left: 30px;
    bottom: 30px;
    color: #011a42;
    height: 36px;
    line-height: 36px;
    padding: 0 15px;
    border-radius: 18px;
    cursor: pointer;
    background: linear-gradient(to right, rgba(83, 174, 252, 1), rgba(77, 209, 247, 1));
}

.instbut:hover {
    box-shadow: 0 0 8px 2px rgb(61 162 234 / 65%);
}

.natalinstr {
    display: none;
}

.natalinstr .top {
    height: 100px;
}

.natalinstr .ttl {
    flex: 1 1 100%;
    color: #2492de;
    font-size: 22px;
    padding-left: 30px;
}

.dreams-block.natalinstr>.dream {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #00b5f0;
    box-sizing: border-box;
}

.dreams-block.natalinstr>.dream.expandable.expanded>.body-container {
    height: auto !important;
}

.dreams-block.natalinstr>.dream.expandable>.body-container>.body {
    color: #676869;
}

.natalinstr .hamburgsymbols {
    margin-right: 5px;
}

.anonses .anons{
	box-sizing:border-box;
	width:calc(50% - 60px);
	border-radius: 1em;
    box-shadow: 0 0 1em 0 rgb(0 0 0 / 10%);
	color:#636567;
	float: left;
	position:relative;
}
.anonses .anons.hover:nth-of-type(1){
	box-shadow: 0 0 1em 0 rgb(81, 193, 249, 10);
}
.anonses .anons.hover:nth-of-type(2){
	box-shadow: 0 0 1em 0 rgb(75, 217, 245, 10);
}
.anonses .anons span.ttl{
	display:block;
	color:#383838;
	font-weight:bold;
	font-size:20px;
	margin-bottom: 10px;
}
.anonses .anons a{
	color:#00c2f6;
}
.anonses .anons .more{
	display:none;
}
.anonses .anons .simg{
	display:block;
	margin:10px auto 0 auto;
	max-width:100%;
	height:30px;
}
.anonses .anons:nth-of-type(1){
	margin:0 10px 1em 50px;
	border:1px solid #51c1f9;
	padding:15px 20px 15px 60px;
}
.anonses .anons:nth-of-type(2){
	margin:0 50px 1em 10px;
	border:1px solid #4bd9f5;
	padding:15px 60px 15px 20px;
}
.anonses .anons:nth-of-type(1) .limg{
	position:absolute; top:50%; left:-50px; margin-top:-50px; width:100px;
}
.anonses .anons:nth-of-type(2) .limg{
	position:absolute; top:50%; right:-50px; margin-top:-50px; width:100px;
}
.anonses .anons:nth-of-type(1) a{
	display:block;
}

@media screen and (max-width: 1100px) {
    .plitem span {
        font-size: 12px;
        letter-spacing: 0;
    }
    .domitem {
        font-size: 14px;
        letter-spacing: 0;
    }
    .icobg,
    .aspects .icobg,
    .noplanet .icobg {
        margin-top: 0px;
    }
    .txtright .txt {
        margin-left: -130px;
    }
    .newquestion,
    .aspkol {
        padding-left: 0;
    }
    .stihii_intro {
        padding-left: 0px !important;
    }
    .txtright .ttl {
        min-height: 80px;
    }
    .nextline .txtright .ttl {
        min-height: 0;
    }
    .natpic .lichdan {
        top: 10px;
        right: 10px;
        font-size: 16px;
        line-height: normal;
    }
    .plzod.gtab .gadalldaily div.names_letter {
        margin-left: 0;
    }
    .plzod.gtab .gadalldaily div.names_letter span,
    .plzod.gtab .gadalldaily div.names_letter span.act,
    .plzod.gtab .gadalldaily div.names_letter span:hover {
        width: 50%;
    }
}

@media screen and (max-width: 1000px) {
    .natmitem span {
        font-size: 12px;
        letter-spacing: 0;
    }
}

@media screen and (max-width: 900px) {
    .nextline .txtright .ttl,
    .natart .colmid .ttl {
        font-size: 22px;
    }
    .domitem,
    .domitem.nodom,
    .domitem.nodom:hover {
        height: 132px;
    }
    .dataitem {
        width: 100%;
        padding-bottom: 0;
    }
.anonses .anons{
	width:calc(100% - 50px);
	float:none;
}
.anonses .anons:nth-of-type(1){
	margin:0 0 1em 50px;
}
.anonses .anons:nth-of-type(2){
	margin:0 50px 1em 0;
}
.anonses .anons:nth-of-type(1) a{
	display:inline;
}
}

@media screen and (max-width: 600px) {
    .domitem .ico {
        height: 55px;
    }
    .domitem,
    .domitem.nodom,
    .domitem.nodom:hover {
        height: 115px;
    }
    .plitem img {
        margin: 0 auto;
    }
    .dataitem {
        width: 50%;
        padding-bottom: 15px;
    }
    .natpic img {
        position: relative;
        display: block;
    }
    .natpic .lichdan.mobile-shown {
        position: relative;
        top: 0;
        right: 0;
        padding: 5px;
        text-align: center;
        overflow: hidden;
    }
    .asp_tab1_col {
        width: 100%;
    }
    .asp_tab1_col img {
        max-width: 100%;
    }
    .natpic {
        height: 430px;
    }
    .instbut {
        bottom: 20px;
        left: 50%;
        margin-left: -90px;
    }
}

@media screen and (max-width: 480px) {
    .dataitem {
        width: 100%;
        padding-bottom: 0;
    }
    .plitem {
        font-size: 16px;
    }
    .plitem span {
        font-size: 11px;
    }
    .domitem {
        font-size: 12px;
        line-height: 19px;
    }
    .domlist .domitem:nth-of-type(12) {
        letter-spacing: -1px;
    }
    .domitem .numb {
        letter-spacing: 0;
    }
    .natmenu {
        flex-wrap: wrap;
    }
    .natmitem {
        width: 50%;
        font-size: 18px;
        align-items: flex-end;
    }
    .natmitem span {
        font-size: 16px;
    }
    .txtright .ttl {
        font-size: 24px;
    }
    .stihii .txtright .ttl {
        word-break: break-all;
    }
    .stihii .txtright .ttl span,
    .nextline.stihii .txtright .ttl span {
        word-break: break-word;
    }
    .nextline {
        background-position: -170px center;
    }
    .natart .col {
        width: 20%;
    }
    .natart .colmid {
        width: 60%;
    }
    .plzodimg {
        display: none;
    }
    .plzodtop,
    .plzodtbl {
        width: 100%;
    }
    .plzod.gtab .top img {
        margin: 0 10px;
    }
    .plzod.gtab .dreams-block>.dream.expandable>.top>.expand {
        margin: 0 25px;
    }
    .plzod.gtab .ttl {
        font-size: 20px;
    }
    .plzod.gtab .ttl span,
    .plzod td {
        font-size: 14px;
    }
    .plzodttl td {
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    .stround {
        transform: scale(0.9);
        margin-top: -20px;
    }
    .stobl {
        height: 380px;
    }
}

@media screen and (max-width: 430px) {
    .domitem {
        width: 33.3333%;
    }
    .plitem {
        width: 33.3333%;
        font-size: 13px;
    }
    .plitem span {
        font-size: 16px;
    }
    .nextline .txtright .ttl,
    .natart .colmid .ttl {
        font-size: 18px;
    }
    .nextline .txtright .ttl span,
    .natart .colmid .ttl span {
        font-size: 14px;
    }
    .plitem img {
        margin: 0 auto 10px;
        transform: scale(1);
    }
    .pllist .plitem:nth-of-type(7) img,
    .pllist .plitem:nth-of-type(8) img {
        transform: scale(1.3);
    }
    .nextline .nextarr {
        right: 5px;
    }
    .calc {
        width: calc(100% - 60px);
    }
    .plzod.gtab .body table {
        width: calc(100% + 2em) !important;
        margin: 0 -1em;
    }
}

@media screen and (max-width: 410px) {
    .asptab {
        font-size: 18px;
    }
}

@media screen and (max-width: 390px) {
    .plzod.gtab .ttl span,
    .plzod td {
        font-size: 12px;
    }
    .stround {
        transform: scale(0.8);
        margin-top: -40px;
    }
    .stobl {
        height: 340px;
    }
.anonses .anons{
	width:100%;
}
.anonses .anons:nth-of-type(1) .limg, .anonses .anons:nth-of-type(2) .limg{
	top:0; left:50%; margin-left:-50px; right:auto;
}
.anonses .anons:nth-of-type(1){
	margin:60px 0 1em 0;
	padding:60px 20px 15px 20px;
}
.anonses .anons:nth-of-type(2){
	margin:60px 0 1em 0;
	padding:60px 20px 15px 20px;
}
}

@media screen and (max-width: 370px) {
    .nextline .txtright {
        padding-left: 5px;
        padding-right: 40px;
    }
    .natart .col {
        width: 30%;
    }
    .natart .colmid {
        width: 70%;
    }
    .natart .col:nth-of-type(1) {
        display: none;
    }
    .natart .colmid .ttl {
        text-align: left;
        padding-left: 5px;
    }
    .plzod {
        padding: 30px 5px;
    }
}

@media screen and (max-width: 360px) {
    .plzod td {
        font-size: 11px;
    }
    .plzod.gtab .gadalldaily div.names_letter span,
    .plzod.gtab .gadalldaily div.names_letter span.act,
    .plzod.gtab .gadalldaily div.names_letter span:hover {
        font-size: 16px;
    }
    .plzod td .hamburgsymbols {
        font-size: 16px;
        margin-right: 2px;
    }
}

@media screen and (max-width: 350px) {
    .plitem span {
        font-size: 14px;
    }
    .plzod.gtab .top img {
        margin: 0 5px;
    }
    .plzod.gtab .dreams-block>.dream.expandable>.top>.expand {
        margin: 0 10px;
    }
    .natalinstr .ttl {
        font-size: 18px;
    }
}

@media screen and (max-width: 330px) {
    .plitem span {
        font-size: 13px;
    }
    .nextline .txtleft {
        width: 60px;
    }
    .nextline .txtright {
        width: calc(100% - 60px);
        padding-left: 10px;
    }
    .nextline .txtleft .icobg {
        width: 55px;
        margin-left: 5px;
        height: 90px;
    }
    .nextline .icobg img:nth-of-type(1),
    .asc .nextline .icobg img:nth-of-type(1) {
        top: 5px;
        left: 7px;
    }
    .nextline .icobg img:nth-of-type(2),
    .nextline .icobg span,
    .asc .nextline .icobg img:nth-of-type(2) {
        top: 46px;
        left: 7px;
        width: 40px;
    }
    .nextline .toasc .icobg img:nth-of-type(1) {
        top: 25px;
        left: 7px;
        width: 40px;
    }
    .stround {
        transform: scale(0.7);
        margin-top: -60px;
    }
    .stobl {
        height: 300px;
    }
}

@media screen and (max-width: 320px) {
    .plzod.gtab .gadalldaily div.names_letter span:nth-of-type(2) {
        line-height: 15px;
    }
}

@media screen and (max-width: 310px) {
    .domitem {
        font-size: 10px;
    }
    .plitem {
        font-size: 12px;
    }
    .plitem span {
        font-size: 12px;
    }
    .asptab {
        font-size: 16px;
    }
    .txtright .ttl {
        font-size: 22px;
    }
    .plzod.gtab .ttl {
        font-size: 18px;
    }
    .plzod.gtab td {
        font-size: 10px;
    }
}

@media screen and (max-width: 300px) {
    .stround {
        transform: scale(0.6);
        margin-top: -85px;
    }
    .stobl {
        height: 250px;
    }
}

/* ===================================================================
   Стили, перенесённые из inline <style> в index.php (SEO-оптимизация)
   =================================================================== */

/* --- Табы-переключатели (.chinazodyear) --- */
.chinazodyear a {
    line-height: 40px;
}
@media screen and (max-width: 850px) {
    .chinazodyear a {
        font-size: 15px;
    }
}
@media screen and (max-width: 730px) {
    .chinazodyear a {
        line-height: 20px;
        padding: 10px 20px;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 600px) {
    .chinazodyear a {
        line-height: 40px;
        padding: 10px 0;
    }
}
@media screen and (max-width: 390px) {
    .chinazodyear a {
        line-height: 20px;
        padding: 10px 20px;
    }
}
@media screen and (max-width: 355px) {
    .chinazodyear a {
        padding: 10px 10px;
    }
}
@media screen and (max-width: 315px) {
    .chinazodyear a {
        padding: 10px 0;
    }
}

/* --- Блок «Планеты в знаках Зодиака» (#natal-planets-links) --- */

/* Сброс лишних отступов от глобального правила #main_content_main .block */
#natal-planets-links.block {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}
#natal-planets-links .img img {
    max-height: 52px;
    max-width: 60%;
}
#natal-planets-links .prev {
    display: none;
}
#natal-planets-links .ttldt {
    width: calc(65% - 20px);
}
#natal-planets-links .line {
    align-items: center;
}
#natal-planets-links .line div {
    margin: 0;
}
#natal-planets-links span a .img {
    background: linear-gradient(141deg, #4bdbf5, #57a0fe) !important;
}
#natal-planets-links .ttl h3 {
    color: #2492de !important;
}
#natal-planets-links .more,
#natal-planets-links .more .mobile-hidden,
#natal-planets-links .more span {
    color: #00b7f4 !important;
}
@media screen and (max-width: 600px) {
    #main_content_main #natal-planets-links.block.suggestions {
        margin: 2.5em 0 0.5em 0;
    }
    #natal-planets-links .line .more {
        display: none;
    }
    #natal-planets-links .prevtxt {
        padding-bottom: 0.35em !important;
    }
    #natal-planets-links .prevtxt p {
        margin: 0 !important;
        padding: 0 !important;
    }
    #natal-planets-links .prevtxt:after {
        content: "Подробнее >";
        display: block;
        text-align: right;
        margin-top: -0.1em;
        color: #00b7f4;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.2;
    }
}

/* --- FAQ Accordion (#natal-faq) --- */
#natal-faq {
    margin-top: 1em;
}
#natal-faq .faq-item {
    border: 2px solid #b8ddf0;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow .2s;
}
#natal-faq .faq-item:hover {
    box-shadow: 0 2px 12px rgba(95, 202, 238, .15);
}
/* Вопрос — голубой фон всегда */
#natal-faq .faq-q {
    padding: 15px 46px 15px 20px;
    cursor: pointer;
    font-weight: 500;
    font-size: 15.5px;
    color: #334a5e;
    background: #f0f9ff;
    position: relative;
    transition: background .2s;
}
#natal-faq .faq-q:hover {
    background: #d6e8ff;
}
/* Открытый: разделитель снизу, фон остаётся голубым */
#natal-faq .faq-item.open .faq-q {
    border-bottom: 1px solid #b8ddf0;
}
/* Стрелка — фирменный голубой */
#natal-faq .faq-q:after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #5fcaee;
    border-bottom: 2px solid #5fcaee;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .3s ease;
}
#natal-faq .faq-item.open .faq-q:after {
    transform: translateY(-25%) rotate(-135deg);
}
/* Ответ */
#natal-faq .faq-a {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height .38s ease;
}
#natal-faq .faq-item.open .faq-a {
    max-height: 700px;
}
/* Промежуточный div itemprop="text" получает отступы */
#natal-faq .faq-a [itemprop="text"] {
    padding: 14px 24px 20px 24px;
}
#natal-faq .faq-a p {
    margin: 0;
    color: #4a5568;
    line-height: 1.72;
    font-size: 15px;
}

/* Стили new-article теперь в общем CSS: /css/style.css */