@font-face {
    font-family: ubuntu;
    src: url(../font/Ubuntu-M_0.ttf)
}

body {
    background-image: url(../images/background.png);
    background-repeat: repeat-y;
    background-size: 100%;
    padding: 50px 0;
    font-family: ubuntu
}
.language-selector {
    position: absolute !important;
    top: 20px;
    right: 20px !important;
    z-index: 99999 !important;
    pointer-events: auto;
}

.language-dropdown {
    position: relative;
    display: inline-block;
}

.ipr-container {
    display: none;
}

.language-btn {
    background: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.language-btn:hover {
    background-color: #f8f8f8;
}

.language-btn:focus {
    outline: none;
}

.flag-icon {
    width: 30px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid #ddd;
}

.dropdown-arrow {
    font-size: 10px;
    color: #000;
    line-height: 1;
    margin-left: 2px;
}

.language-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 50px;
    overflow: hidden;
}

.language-dropdown.active .language-menu {
    display: block;
}

.language-option {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.language-option:hover {
    background-color: #f5f5f5;
}

.language-option .flag-icon {
    display: block;
}

@media (max-width: 768px) {
    .language-selector {
        top: 10px;
        right: 10px;
    }
    
    .language-btn {
        padding: 5px 6px;
    }
    
    .flag-icon {
        width: 28px;
        height: 18px;
    }
    
    .dropdown-arrow {
        font-size: 9px;
    }
}

body.horoskopy
{
    background-image: url(../images/horoskopy.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    min-height: 100vh;
}

body.horoskopy > .col-lg-1,
body.horoskopy > .col-md-1 {
    background: transparent !important;
}

body.horoskopy .siteAdColumn {
    padding-left: 0;
    padding-right: 0;
}



#content {
    width: 100%
}

#side1 {
    width: 100%;
    background-color: #fff;
    position: relative
}

#side2,
#side3,
#side4,
#side5 {
    width: 100%;
    background-color: #fff;
    display: none;
    position: relative
}

.posRel {
    position: relative;
    background-color: #fff;
    padding: 30px
}

.cLogo {
    background-image: url(../images/cLogo.png);
    background-size: cover;
    width: 54px;
    height: 53px;
    position: absolute;
    left: 50%;
    margin-left: -27px;
    top: -27px
}

.horoskopy .cLogo {
    background-image: url(../images/cLogoHoroskopy.png);
    border: solid 1px white;
    border-radius: 180px;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -9px;
}

.headlineBlock,
.headlineRow {
    width: 100%;
    overflow: hidden;
    margin-top: 25px;
    text-align: center;
    margin-bottom: 15px
}

.horoskopy .headlineBlock,
.headlineRow {
   margin-top: 35px;
}

.headlineBlock2 {
    width: 100%;
    overflow: hidden;
    margin-top: 62px;
    text-align: center;
    margin-bottom: 45px
}

.step {
    background-color: #f3d68b;
    color: #fff;
    border-radius: 180px;
    width: 35px;
    height: 35px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-top: 2px;
    float: left
}

.headlineRow.mainRow {
    margin: auto;
    width: fit-content;
}

.mainRow h1,
.mainRow h3 {
    float: left;
    margin-left: 15px;
    margin-top: 5px;
    font-size: 25px;
    font-weight: 700
}

.headlineRow.secondaryRow {
    margin-top: 6px;
    font-size: 14px
}
.horoskopy .headlineRow.secondaryRow
{
    margin-top: 6px;
    font-size: 14px;
    background-color: white;
    color: #29034c;
    padding: 15px 17px;
    border-radius: 13px;
}
.cremeBackground {
    background-color: #fbf5f2;
    padding: 0;
    margin-bottom: 40px
}
.horoskopy .cremeBackground
{
    background-color:#32026f;
}
.horoskopy .posRel
{
    background-color: #29034c;
    min-height: 743px;
}
.horoskopy .footer
{
    background-color: #21033c;
}
.horoskopy .footerIn
{
    color:white;
}
.footerIn:nth-child(2)
{
    margin-top:-13px;
}
.horoskopy .step
{
    background-color: #6815a5;
}
.horoskopy .mainRow h1, .horoskopy .mainRow h3
{
    color:white;
}

#smsCode,
.form-group input {
    border-radius: 17px;
    padding: 20px 25px
}

.ubut {
    margin-top: 5px;
    font-size: 10px
}

.file-upload-content {
    display: none;
    text-align: center
}

.image-upload-wrap {
    font-weight: 300;
    padding: 33px 30px;
    border-radius: 17px;
    border: 1px solid #ccc;
    color: #555
}

input[type=file] {
    display: block
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    outline: 0;
    opacity: 0;
    cursor: pointer
}

.drag-text {
    text-align: center;
    color: #999
}

.plus {
    background-color: #f3d68b;
    padding: 10px;
    border-radius: 360px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: 22px;
    margin-right: 7px;
    padding-top: 3px;
    padding-bottom: 5px
}

h2 {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 28px
}

.educationRow,
.skillsRow {
    position: relative
}

.pmbut {
    position: absolute;
    right: 6px;
    top: 5px;
    border-radius: 180px;
    padding: 6px 9px;
    font-size: 14px
}

.formSend {
    display: block;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    border-style: none;
    padding: 18px 40px;
    border-radius: 184px;
    color: #fff;
    font-size: 18px;
    background-color: #71b620;
    transition: .3s, all
}

#alertPage a,
#alertPage a:hover,
#formSend,
#formSend:hover {
    text-decoration: none
}

.bottomMargin {
    margin-bottom: 20px
}

.horoskop .bottomMargin {
    margin-bottom: 20px;
    margin-top: 40px;
}

.help-block.bottomMarg {
    margin-bottom: 40px
}

.mobilLogo {
    width: 160px;
    float: right;
    margin-top: 14px;
    margin-right: 5px
}

.headlineBlock2 .mainRow h1,
.headlineBlock2 .mainRow h3 {
    font-size: 16px;
    margin-top: 10px
}

.cvTemplate {
    margin-bottom: 30px
}

.cvTemplate:last-child {
    margin-bottom: 0
}

.helpCircle {
    position: relative
}

.cena {
    position: absolute;
    border-radius: 180%;
    width: 60px;
    height: 60px;
    background-color: #71b620;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    line-height: 60px;
    left: 70%;
    z-index: 10;
    top: -24px
}

.cvTemplate label {
    margin-bottom: 0;
    border: solid #fff 4px;
    background-color: #fff
}

.sablona-cc {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 176px;
    height: 246px
}

.cc-selector input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.footer {
    background-color: #efe6e1
}

.footerIn {
    text-align: center;
    line-height: 22px;
    color: #716e6d;
    font-size: 12px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.footerIn a {
    padding: 0 4px;
    cursor: pointer;
    color: #656362
}
.horoskopy .footerIn a
{
    color:white;
}

.template1 {
    background-image: url(../images/zivotopis-1.jpg)
}

.template2 {
    background-image: url(../images/zivotopis-2-plateny.jpg)
}

.template3 {
    background-image: url(../images/zivotopis-3-plateny.jpg)
}

.template4 {
    background-image: url(../images/zivotopis-4-plateny.jpg)
}

.coverLetter .template1 {
    background-image: url(../images/cl1.jpg)
}

.coverLetter .template2 {
    background-image: url(../images/cl2.jpg)
}

.horoskop .template1 {
    background-image: url(../images/hor1.jpg)
}

.horoskop .template2 {
    background-image: url(../images/hor2.jpg)
}

.coverLetter .template3 {
    background-image: url(../images/cl3.jpg)
}

.coverLetter .template4 {
    background-image: url(../images/cl4.jpg)
}

#side2 .headlineRow.mainRow,
#side3 .headlineRow.mainRow {
    width: 395px
}
#side2 .headlineRow.mainRow
{
	width:100%;
	text-align:center;
}

#side4 .headlineRow.mainRow {
    width: 260px
}

#totalPrice {
    text-align: center;
    font-size: 55px;
    font-weight: 700;
    color: #71b620
}

.spec h2 {
    margin-bottom: 10px
}

.spec .servis {
    text-align: center;
    font-size: 11px;
    margin-top: 10px;
    margin-bottom: -13px;
    font-style: italic;
    color: #ababab
}

.smsBlock {
    margin: 27px 0;
    padding: 24px;
    border-style: solid;
    border-color: #efe6e1;
    border-width: 8px
}

.smsBlock .headline {
    background-color: #008000;
    color: #fff;
    text-align: center;
    line-height: 42px;
    font-weight: 700;
    font-size: 23px;
    margin-bottom: 15px;
    padding: 0px 18px;
}

.smsBlock .smsText {
    text-align: center;
    font-weight: 700;
    margin-bottom: 17px;
    font-size: 23px;
    border-bottom-style: solid;
    border-color: #bbb;
    padding-bottom: 15px
}

.smsBlock .smsFee {
    display: none;
}

.smsFee {
    display: none;
}

.smsBlock .smsText span {
    color: #ad2a1a;
    font-size: 28px
}

.smsInput {
    font-weight: 700;
    font-size: 18px
}

#smsCode {
    width: 262px;
    display: inline-block;
    margin-left: 26px
}

.agreements {
    margin-bottom: 45px;
    text-align: center
}

#agree {
    margin-right: 10px;
    position: relative;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-color: #424242;
    border-style: solid;
    cursor: pointer
}

.agreements a {
    color: #000;
    text-decoration: underline
}

.agree {
    margin-top: -6px;
    margin-bottom: 21px;
    text-align: center;
    font-size: 17px;
}

.agree input {
    position: relative;
    top: 1px;
    margin-right: 6px;
    cursor: pointer
}

.agree a {
    cursor: pointer
}

.posRel #downloadCV {
    display: block;
    border-style: none;
    padding: 18px 40px;
    border-radius: 184px;
    color: #fff;
    font-size: 18px;
    background-color: #71b620;
    padding-right: 65px;
    margin: 0
}

.buttonOut {
    position: relative;
    width: 268px;
    margin: auto
}

#cvLoader {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading.svg);
    top: 0;
    left: 0;
    background-size: 27px;
    background-repeat: no-repeat;
    background-position: 92% center
}

.bottomBanner {
    margin-top: 60px;
    margin-bottom: 75px
}

.bottomBanner.mobile {
    width: 100%;
    height: 300px
}

.buttonBack .fa-arrow-left {
    margin-right: 7px
}

.buttonBack {
    width: 124px;
    color: #fff;
    background-color: #f3d68b;
    margin-top: 52px;
    border-radius: 180px;
    font-size: 17px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    margin-left: 23px;
    transition: .3s all
}

.buttonBack:hover {
    background-color: #f7ce65
}

.sablona-cc.active {
    border-color: #71b620
}

.file-upload-image {
    height: 150px;
    width: 150px;
    margin: auto;
    border-radius: 180px;
}

.image-title-wrap {
    color: #222
}

.ubut {
    margin-top: 5px;
    font-size: 10px
}

.formLogin {
    width: 500px;
    max-width: 100%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px
}

.list-unstyled {
    padding-left: 27px
}

.headlineBlock2 .mainRow {
    width: 100%
}

.interests2 {
    display: none
}

.form-group .btn-success,
.form-group .btn-success:active,
.form-group .btn-success:focus {
    background-color: #71b620;
    border-color: #71b620;
    transition: .3s, all
}

.form-group .btn-success:hover {
    background-color: #9eb316;
    border-color: #9eb316
}

.formSend:hover {
    background-color: #e481c6;
}
.horoskopy .formSend:hover {
    background-color: #fe5550;
}


#mobileAlternative {
    display: none
}

.popup-gallery {
    display: none
}

.price_sum {
    color: #9dc548;
    font-size: 40px;
    font-weight: 700;
    padding-top: 35px;
    letter-spacing: 3px;
    font-style: italic
}

.price {
    letter-spacing: 7px;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: #d8d8d8
}

.mfp-content .mfp-close {
    display: none
}

#side3 h4 {
    font-weight: 700;
    margin-top: 42px
}

#side3 h4 {
    margin-top: 30px
}

.inputLeft {
    width: 48%;
    float: left
}

.inputRight {
    width: 48%;
    float: right
}

#side4 textarea {
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 17px;
    padding: 20px 25px;
    height: 160px
}
#cover-letter
{
    border-radius: 17px;
    padding: 20px 25px;
    height: 300px;
}

#side4 h4 {
    font-weight: 700;
    margin-top: 13px;
    margin-bottom: 12px
}

#side4 p {
    line-height: 24px
}

.sendContact {
    display: block;
    margin: auto;
    margin-bottom: 60px;
    border-style: none;
    padding: 18px 40px;
    border-radius: 184px;
    color: #fff;
    font-size: 18px;
    background-color: #71b620;
    transition: .3s, all
}

.sendContact:hover {
    background-color: #e481c6;
}

.sendContact .fas {
    margin-left: 10px
}

.contactAlert {
    border-radius: 17px
}

.bottomMarginAdditional {
    display: none
}

.two-pages {
    width: 80%
}

#bannerLeft,
#bannerRight {
    height: 200px;
    width: 100%
}

body.horoskopy #bannerLeft,
body.horoskopy #bannerRight {
    height: auto;
    min-height: 0;
    background: transparent !important;
    overflow: visible;
    text-align: center;
}

body.horoskopy #bannerLeft .adsbygoogle,
body.horoskopy #bannerRight .adsbygoogle {
    background: transparent !important;
    display: inline-block !important;
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    min-height: 0 !important;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden !important;
}

@media (min-width: 1800px) {
    body.horoskopy #bannerLeft .adsbygoogle,
    body.horoskopy #bannerRight .adsbygoogle {
        width: 160px !important;
        max-width: 160px !important;
        min-width: 160px !important;
    }
}

.g-recaptcha {
    width: 305px;
    margin: auto;
    margin-bottom: 25px
}

#captcha {
    width: 100%;
    overflow: hidden
}

.contactInfoBlock.alternative {
    display: none
}

.advertBanner {
    width: 80%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 100px
}

@media(max-width:1350px) {
    #smsCode {
        width: 225px
    }
}

@media(max-width:1320px) {
    .headlineBlock2 h1,
    .headlineBlock2 h3 {
        width: 77%
    }
}

@media(max-width:1290px) {
    .image-upload-wrap {
        padding: 33px 10px
    }
    .cena {
        width: 50px;
        height: 50px;
        font-size: 15px;
        line-height: 50px;
        left: 77%
    }
}

@media(max-width:1290px) {
    .headlineBlock2 h1,
    .headlineBlock2 h3 {
        width: 68%
    }
}

@media(max-width:1260px) {
    #smsCode {
        width: 190px
    }
}

@media(max-width:1200px) {
    .inputLeft,
    .inputRight {
        width: initial;
        float: initial
    }
    .contactInfoBlock {
        display: none
    }
    .contactInfoBlock.alternative {
        display: block;
        text-align: center;
        margin-bottom: 25px
    }
}

@media(max-width:1175px) {
    .smsInput {
        text-align: center
    }
    #smsCode {
        width: 85%;
        margin-left: 0;
        margin-top: 13px
    }
}

@media(max-width:1100px) {
    .drag-text {
        line-height: 28px
    }
}

@media(max-width:1020px) {
    .cvTemplate label {
        margin-top: -10px
    }
}

@media(max-width:990px) {
    .bottomMargin.main {
        display: none
    }
    #bannerLeft,
    #bannerRight {
        height: 0;
        display: none;
    }
    .interests2 {
        display: block
    }
    .interests1 {
        display: none
    }
    .cvSelect {
        background-color: #fbf5f2
    }
    .horoskopy .cvSelect {
        background-color: #261739
    }
    .headlineBlock2 {
        width: 100%;
        overflow: hidden;
        padding-top: 25px;
        text-align: center;
        margin-bottom: 60px
    }
    .headlineBlock2 .headlineRow {
        margin: auto;
        width: 372px;
        overflow: hidden;
        text-align: center
    }
    .headlineBlock2 .mainRow h1,
    .headlineBlock2 .mainRow h3 {
        float: left;
        margin-left: 15px;
        margin-top: 5px;
        font-size: 25px;
        font-weight: 700;
        width: 307px;
        max-width: 90%
    }
    .cvTemplate {
        margin: auto;
        margin-bottom: 35px;
        width: 176px
    }
    .cvTemplate:last-child {
        padding-bottom: 35px
    }
    #side2,
    #side3,
    #side4 {
        overflow: hidden
    }
    .mobileBack {
        position: absolute;
        z-index: 1
    }
    .cLogo.mobile {
        top: 22px;
        width: 40px;
        height: 40px
    }
    .mobileSpec {
        padding-top: 60px
    }
    .buttonBack {
        margin-top: 23px
    }
    .mobileRight {
        position: absolute;
        top: 18px;
        right: 21px
    }
    .bottomBanner.mobile img {
        margin: auto
    }
    #mobileAlternative {
        display: block
    }
    #mobileAlternative.formSend {
        margin-top: 40px;
        margin-bottom: 40px
    }
    #mobileAlternative img {
        margin: auto;
        width: 90%;
        margin-bottom: 45px
    }
    .bottomMarginAdditional {
        display: block
    }
    .bottomMarginAdditional {
        width: 80%;
        margin: auto;
        margin-bottom: 45px
    }
    #horoskopFormInputs
    {
        margin-top:55px;
    }
    .horoskopy .posRel
    {
        min-height:590px;
    }
    .horoskopy #side1
    {
        background-color:#261739;
    }
    .horoskopy .headlineBlock2 .mainRow h3
    {
        width: 322px;
    }
}

@media(max-width:650px) {
    .bottomMarginAdditional {
        width: 100%
    }
}

@media(max-width:600px) {
    .bottomBanner.mobile {
        margin-top: 36px;
        margin-bottom: 31px
    }
}

@media(max-width:570px) {
    .mobileBack {
        position: initial;
        width: 155px;
        margin: auto
    }
    .buttonBack {
        margin-left: 0
    }
    .mobileRight {
        display: none
    }
}

@media(max-width:480px) {
    .footer {
        height: initial
    }
}

@media(max-width:460px) {
    .mainRow h1,
    .mainRow h3 {
        font-size: 19px;
        margin-top: 8px
    }
    .headlineBlock2 .mainRow h1,
    .headlineBlock2 .mainRow h3 {
        width: 248px;
        margin-top: 9px;
        font-size: 19px
    }
    #side4 .headlineRow.mainRow {
        width: 200px
    }
}

@media (max-width:1155px) {
    .mfp-container {
        width: 462px
    }
}

@media (max-width:550px) {
    .mfp-container {
        width: 100%
    }
    .container.footer {
        margin-bottom: 0
    }
}

@media (max-width:1160px) {
    .two-pages {
        width: 100%
    }
}

.fa-arrow-down,
.fa-arrow-right {
    margin-left: 10px
}

textarea {
    resize: none
}

.description {
    margin-top: 30px;
    margin-bottom: 45px;
    text-align: center;
    padding-top: 30px;
    border-top-style: solid;
    border-width: 1px;
    border-color: #f1ce90
}

#side5 .headlineRow.mainRow {
    width: 99px
}

.msgAgree {
    overflow: hidden;
    width: 100%;
    margin-bottom: 28px;
    margin-top: -12px;
    float: left;
    text-align: center;
    padding: 0 20px
}

#msgAgree {
    position: relative;
    top: 2px;
    margin-right: 5px;
    cursor: pointer
}

#alertButtons {
    width: 800px;
    margin: auto;
    overflow: hidden
}

#alertButtons .formSend {
    float: right
}

#alertButtons .formSend.kontakt {
    float: left
}

@media (max-width:1070px) {
    #alertButtons .formSend {
        float: initial
    }
    #alertButtons .formSend.kontakt {
        float: initial
    }
    #alertButtons {
        width: 100%
    }
}
#myDescriptionBig
{
	display:none;
}
#showMore
{
	margin-left:5px;
}
#showMore, #showLess 
{
	color:blue;
	cursor:pointer;
}
#showMore:hover, #showLess:hover
{
	text-decoration:underline;
}
#showLess
{
    display: block;
    margin-top: 7px;
}

#myDescriptionBig, #myDescriptionSmall
{
	text-align:left;
	margin-top:15px;
	margin-bottom:15px;
}
.adsbygoogle.adsbygoogle-noablate
{
	display:none!important;
}
#side2 .mainRow h3, #side4 .mainRow h3
{
	text-align: center;
    width: 100%;
    margin-left: 0px;
}
#side4 .headlineRow.mainRow
{
	width:100%;
}
.headlineRow.mainRow.letter
{
    width: 100%;
    display: flex;
    justify-content: center;
}
.cvSelect.letter
{
    margin-bottom: 40px;
}
#cvSwitcher
{
    width: 395px;
    margin: auto;
    max-width: 100%;
    background-color: white;
    border-radius: 184px;
    display: flex;
    padding: 8px 28px;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 45px;
}
#cvSwitcher a,
#cvSwitcher a:hover,
#cvSwitcher a:visited
{
    text-decoration: none;
    color:black;
}
#cvSwitcher a.item
{
    font-size: 16px;
    padding: 5px 24px;
    border-radius: 184px;
    cursor: pointer;
    margin-right: 3px;
    margin-left: 3px;
}
#cvSwitcher a.item.active, #cvSwitcher a.item:hover
{
    background-color: #fe5550;
    color:white;
}
@media (max-width:450px) {
    #cvSwitcher a.item
    {
        font-size:14px;
    }
    #cvSwitcher
    {
        padding: 5px 5px;
    }
    #cvSwitcher a.item
    {
        padding:5px 17px;
    }
}

#finalButtons
{
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 595px;
    margin: auto;
    max-width: 100%;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 40px;
}
#finalButtons button
{
    margin-top: 0px;
    margin-bottom: 0px;
}
#finalButtons button:first-child
{
    background-color:#e481c6;
}
#finalButtons button:first-child:hover
{
    background-color:#71b620;
}

 .horoskop-group {
        display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem;
    border-radius: 8px;
    width: 100%;
    margin: 4rem auto;
    justify-content: center;
    max-width: 900px;
}

    /* Skrytý skutočný input[type="radio"] */
    .horoskop-group input[type="radio"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    /* Label, ktorý obklopuje každý „checkbox“ */
    .horoskop-label {
         position: relative;
    padding-left: 29px;
    font-size: 13px;
    line-height: 19px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    font-weight: normal;
    margin: 0px 15px;
    }

    /* Vlastné políčko (to, čo vidíme namiesto skrytého rádiobutto­nu) */
    .horoskop-label .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: transparent;
      border: 2px solid #ccc;
      border-radius: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }

    /* Keď je zakliknuté, zmeň farbu pozadia a okraj */
    .horoskop-label input[type="radio"]:checked + .checkmark {
      background-color: white;
      border-color: white;
    }

    /* Vnútorná fajka, ktorá sa ukáže, keď je input:checked */
    .horoskop-label .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }

    .horoskop-label input[type="radio"]:checked + .checkmark:after {
      display: block;
    }

    /* Umiestnenie a štýl fajky */
    .horoskop-label .checkmark:after {
      left: 6px;
      top: 2px;
      width: 6px;
      height: 12px;
      border: solid #1db954;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    /* Hover efekt (voliteľné) */
    .horoskop-label:hover .checkmark {
      border-color: #aaa;
    }

    #horoskopFormInputs
    {
           max-width: 900px;
    margin: auto;
    width: initial;
    float: initial;
    margin-bottom: 55px;
    margin-top: 55px;
    }

.horoskopy #side2 {
    color:white;
}
@media(max-width:1350px) {
    .horoskopy .horoskop-group
    {
        max-width: 650px;
    }
    .horoskopy .horoskop-label
    {
        width: 174px;
    }
}
@media(max-width:520px) {
    .horoskopy .horoskop-label
    {
        width: 158px;
        margin:auto;
    }
}
.horoskopy #side2, .horoskopy #side4
{
    background-color: #29034c;
}
.horoskopy #side4
{
    color:white;
}
.horoskopy .smsBlock .smsText span
{
    color: #fff;
    font-size: inherit;
}

.horoskopy .smsBlock {
    padding: 23px;
}

.horoskopy .smsBlock .headline {
    margin-bottom: 10px;
}

.horoskopy .smsBlock .smsText {
    margin-bottom: 5px;
    padding-bottom: 0;
    border-bottom: 0;
}

.horoskopy .smsBlock .smsFee {
    display: block;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: solid 3px #bbb;
    color: #fff;
    font-size: 12px;
    font-style: italic;
    line-height: 1.35;
    text-align: center;
}

.horoskopy #smsFeeText {
    display: block;
    margin-top: -6px;
    margin-bottom: 18px;
    color: #fff;
    font-size: 12px;
    font-style: italic;
    line-height: 1.35;
    text-align: center;
}
.horoskopy .buttonBack
{
    background-color:#fe5550;
}
@media(max-width:430px) {
    .horoskopy .horoskop-group
    {
        margin: 0px;
        padding: 0px;
    }   
    .horoskopy #side1 .posRel
    {
        padding:10px;
    }
    .horoskopy .headlineBlock,
    .headlineRow {
       margin-top: 50px;
    }

}
.horoskopy #side3 
{
    color:white;
    background-color: #29034c;
}

.horoskopy #side3 .headlineBlock h3
{
    margin-bottom: 25px;
    margin-left:0px;
    margin-top: 30px;
    font-size: 30px;
}
.horoskopy #side3 .headlineBlock .headlineRow
{
    background-color: white;
    color: #29034c;
    padding: 10px 31px;
    border-radius: 45px;
    margin: 0px;
    margin-bottom:15px;
}
.horoskopy #side3 .headlineBlock .headlineRow h3
{
    color: #29034c;
}
.horoskopy #side3 #finalButtons button:first-child
{
        background-color: #fe5550;
}
.horoskopy #side3 #finalButtons button:first-child:hover
{
    background-color: #71b620;
}
.horoskopy #alertPage
{
    color: white;
}
.horoskopy h3
{
   
    margin-bottom: 35px;
}
.nestiahlo
{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
#lakadlo
{
    font-size: 17px;
    margin-top: 25px;
    margin-bottom: 15px;
}
#lakadlo2
{
    font-size: 19px;
    border-bottom: solid 2px;
    width: 420px;
    margin: auto;
    margin-bottom: 15px;
    margin-top: 26px;
}
#bezZavazkov
{
    text-align: center;
    margin-top: 20px;
}
#nahodnaUkazka
{
    font-size: 16px;
}
.horoskopy .posRel #downloadCV
{
    margin: auto;
    padding: 18px 66px;
}
.horoskopy #side3 .headlineBlock .headlineRow p
{
     font-size: 16px;
    line-height: 29px;
}
#aCoDalej
{
    margin-top: -15px;
    font-size: 20px;
}

.horoskopy #finalButtons
{
 flex-wrap:initial;
     width: 800px;
}
.horoskopy #finalButtons button
{
    width: 402px;
}
@media(max-width:1500px) {
    .horoskopy #finalButtons
    {
        flex-wrap: wrap;
        width: 100%;
    }
}

@media(max-width:460px) {
    .horoskopy #finalButtons button
    {
            font-size: 15px;
    }
}
@media(max-width:403px) {
    #finalButtons button
    {
     padding: 18px 21px;
    }
}

@media (max-width: 990px) {
    .horoskopy .cLogo.mobile {
       margin-top: 30px;
        width: 70px;
        height: 70px;
        top: 0px;
        z-index: 800;
        margin-left: -35px;
    }
    .horoskopy .headlineBlock, .headlineRow
    {
        margin-top: 60px;
    }
}
@media (max-width: 470px) {
    #lakadlo2 {
        font-size: 14px;
        width: 284px;
    }
}
@media (max-width: 668px) {
    #side3 .mainRow h3
    {
        margin-left:0px;
        font-size: 20px;
    }
    .nestiahlo
    {
        font-size: 16px;
    }
}
#novyRiadok
{
    display:none;
}
@media (max-width: 470px) {
    #side3 .mainRow h3
    {
        font-size: 22px;
        line-height: 14px;
    }
    #novyRiadok
    {
        display:block;
    }
}
@media(max-width:412px) {
    .nestiahlo
    {
        font-size: 15px;
    }
}

.blogShell {
    max-width: none;
    min-height: 620px;
    margin: 0;
    padding: 42px 54px 34px;
    color: #fff;
    background: #29034c;
    border-radius: 0;
}

.blogShell.posRel {
    background-color: #29034c;
}

.blogLogoLink {
    display: block;
    text-decoration: none;
}

.blogHeadlineBlock {
    margin-top: 18px;
    margin-bottom: 32px;
}

.blogHeadlineBlock .mainRow h3 {
    font-size: 26px;
    font-weight: 700;
}

.blogHeadlineBlock .secondaryRow {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    color: #f1e9ff;
}

.blogGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}

.blogCard {
    width: auto;
    height: 100%;
    background: #fff;
    border: 2px solid #efe6e1;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blogCard:hover {
    transform: translateY(-4px);
    border-color: #71b620;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .2);
}

.blogCardLink {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px;
    color: #240044;
    text-decoration: none;
}

.blogCardLink:hover,
.blogCardLink:focus {
    color: #240044;
    text-decoration: none;
}

.blogCardMedia {
    margin: -22px -22px 18px;
    overflow: hidden;
    background: #160022;
}

.blogCardMedia img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.blogCardMeta,
.blogArticleMeta {
    display: inline-block;
    margin-bottom: 12px;
    color: #71b620;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.blogCard h2 {
    margin: 0 0 12px;
    color: #240044;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.blogCard p {
    margin: 0 0 18px;
    color: #2c1840;
    font-size: 14px;
    line-height: 1.65;
}

.blogReadMore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: #71b620;
    font-size: 15px;
    font-weight: 700;
}

.blogPagination {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 46px auto 0;
}

.blogPaginationLink {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border: 2px solid #efe6e1;
    border-radius: 8px;
    background: #fff;
    color: #240044;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.blogPaginationLink:hover,
.blogPaginationLink:focus {
    background: #f4ecff;
    border-color: #71b620;
    color: #240044;
    text-decoration: none;
    transform: translateY(-1px);
}

.blogPaginationLink.is-active {
    background: #71b620;
    border-color: #71b620;
    color: #fff;
}

.blogPaginationNav {
    padding: 0 20px;
}

.blogEmptyState {
    max-width: 580px;
    margin: 32px auto 0;
    padding: 42px 28px;
    text-align: center;
    border: 2px dashed #efe6e1;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.blogEmptyState h4 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
}

.blogEmptyState p {
    margin: 0;
    color: #f1e9ff;
    font-size: 15px;
    line-height: 1.6;
}

.blogDetailTopbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.blogDetailShell .blogDetailTopbar .blogLogoLink {
    position: static;
    flex: 0 0 auto;
    margin: -24px 0 0;
    transform: none;
    z-index: 1;
}

.blogTopbarSpacer {
    display: block;
    flex: 0 0 132px;
}

.blogBackButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: 10px 16px;
    margin-top: 4px;
    border: 2px solid #efe6e1;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.blogBackButton:hover,
.blogBackButton:focus {
    color: #fff;
    border-color: #71b620;
    background-color: rgba(113, 182, 32, .2);
    text-decoration: none;
}

.blogArticle {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px;
    color: #240044;
    background: #fff;
    border: 2px solid #efe6e1;
    border-radius: 8px;
}

.blogArticleHeader {
    max-width: 760px;
    margin: 22px auto 24px;
    text-align: center;
}

.blogArticleHeader h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

.blogHeroImage {
    margin: -28px -28px 26px;
    overflow: hidden;
    background: #160022;
}

.blogHeroImage img {
    display: block;
    width: 100%;
    height: auto;
}

.blogRichContent {
    color: #240044;
    font-size: 16px;
    line-height: 1.8;
}

.blogRichContent > *:first-child {
    margin-top: 0;
}

.blogRichContent > *:last-child {
    margin-bottom: 0;
}

.blogRichContent h1 {
    font-size: 24px;
}

.blogRichContent h2,
.blogRichContent h3,
.blogRichContent h4 {
    margin-top: 32px;
    margin-bottom: 14px;
    color: #240044;
    font-weight: 700;
}

.blogRichContent h2 {
    font-size: 24px;
}

.blogRichContent h3 {
    font-size: 21px;
}

.blogRichContent h4 {
    font-size: 18px;
}

.blogRichContent p,
.blogRichContent ul,
.blogRichContent ol,
.blogRichContent blockquote {
    margin-bottom: 18px;
}

.blogRichContent ul,
.blogRichContent ol {
    padding-left: 24px;
}

.blogRichContent a {
    color: #71b620;
    text-decoration: underline;
}

.blogInlineAd {
    margin: 28px 0;
    text-align: center;
}

.blogRichContent blockquote {
    padding: 18px 22px;
    border-left: 5px solid #71b620;
    border-radius: 0 8px 8px 0;
    background: #f4ecff;
    color: #2c1840;
}

.blogRichContent img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 780px) {
    .blogShell {
        padding: 38px 28px 24px;
        min-height: 0;
    }

    .blogGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .blogShell {
        padding: 36px 16px 18px;
    }

    .blogHeadlineBlock {
        margin-bottom: 24px;
    }

    .blogGrid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .blogCardLink {
        padding: 20px;
    }

    .blogCardMedia {
        margin: -20px -20px 16px;
    }

    .blogCardMedia img {
        height: 180px;
    }

    .blogArticle {
        padding: 20px;
    }

    .blogArticleHeader h1 {
        font-size: 24px;
    }

    .blogDetailTopbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .blogDetailShell .blogDetailTopbar .blogLogoLink {
        order: 1;
        margin: 0;
    }

    .blogDetailTopbar .blogBackButton {
        order: 2;
        margin-top: 0;
    }

    .blogTopbarSpacer {
        display: none;
    }

    .blogHeroImage {
        margin: -20px -20px 22px;
    }

    .blogPagination {
        gap: 10px;
        margin-top: 28px;
    }

    .blogPaginationLink {
        min-width: 40px;
        height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }
}