@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;
}

.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;
    }
}

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

.blogShell.posRel {
    background-color: #fff;
}

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

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

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

.blogHeadlineBlock .secondaryRow {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.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: #fffdfb;
    border: 1px solid #ecd9cc;
    border-radius: 28px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blogCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    border-color: #d9c6b9;
}

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

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

.blogCardMedia {
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 18px;
}

.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: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.blogCard p {
    margin: 0 0 18px;
    color: #000;
    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: 500;
}

.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: 1px solid #ecd9cc;
    border-radius: 999px;
    background: #fffdfb;
    color: #4f4a46;
    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: #f7efe9;
    border-color: #d9c6b9;
    color: #2d2926;
    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: 1px dashed #dfcdc0;
    border-radius: 28px;
    background: #fff8f3;
}

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

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

.blogDetailShell {
    max-width: none;
}

.blogBackButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-top: 4px;
    border: 1px solid #ead8ca;
    border-radius: 999px;
    color: #796d65;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.blogBackButton:hover,
.blogBackButton:focus {
    color: #71b620;
    border-color: #cfd8bf;
    background-color: #fbf8f4;
    text-decoration: none;
}

.blogArticle {
    max-width: 760px;
    margin: 0 auto;
}

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

.blogArticleHeader h1 {
    margin: 0;
    color: #242424;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.blogHeroImage {
    margin: 0 0 26px;
    overflow: hidden;
    border-radius: 24px;
}

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

.blogRichContent {
    color: #2d2d2d;
    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: #232323;
    font-weight: 700;
}

.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;
}

.blogRichContent blockquote {
    padding: 18px 22px;
    border-left: 4px solid #71b620;
    border-radius: 0 16px 16px 0;
    background: #fff8f3;
    color: #564c48;
}

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

@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 img {
        height: 180px;
    }

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

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

    .blogBackButton {
        display: flex;
        width: fit-content;
        margin: 14px auto 0;
        padding: 9px 14px;
        font-size: 13px;
    }
}
body.horoskopy
{
    background-image: url(../images/horoskopy.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#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: #ff74d4;
    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: 9px
}

.cvTemplate {
    margin-bottom: 30px;
    position: relative
}

.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;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease
}

.templateSelectedOverlay {
    position: absolute;
    inset: 0;
    background-color: rgba(72, 72, 72, .35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease
}

.templateSelectedOverlayIcon {
    width: 46px;
    height: 46px;
    border-radius: 180px;
    background-color: #1fc01d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18)
}

.templateSelectedOverlayText {
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25)
}

.sablona-cc.active .templateSelectedOverlay {
    opacity: 1;
    visibility: visible
}

.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,
#previewStepPrice {
    text-align: center;
    font-size: 55px;
    font-weight: 700;
    color: #71b620
}

.serviceFeeInfo {
    display: none;
    max-width: 470px;
    margin: 12px auto 18px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    line-height: 1.6;
    color: #ababab;
}

.serviceFeeInfo a,
.serviceFeeInfo a:hover {
    color: inherit;
    text-decoration: underline;
}

.spec h2 {
    margin-bottom: 10px
}

.spec .servis {
    text-align: center;
    font-size: 11px;
    margin-top: 10px;
    margin-bottom: 20px;
    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 .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;
    box-shadow: 0 0 0 1px rgba(113, 182, 32, .2)
}

.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%
}

.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;
        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: #71b620;
}
.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;
}
.howToGetStartedRow {
    width: 100%;
    text-align: center;
    margin: 15px 0 20px 0;
}

.howToGetStartedBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 184px;
    border: none;
    background-color: #fe5550;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: ubuntu;
    position: relative;
    animation: pulseBtn 2s infinite;
}

.howToGetStartedBtn:hover {
    background-color: #e64843;
}

.howToGetStartedBtn .fa-play {
    font-size: 12px;
}

@keyframes pulseBtn {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(254, 85, 80, 0.5);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(254, 85, 80, 0);
    }
}

.videoPopupOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.videoPopupOverlay.active {
    display: flex;
}

.videoPopup {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    max-width: 90%;
    max-height: 90%;
}

.videoPopup video {
    display: block;
    max-width: 800px;
    max-height: 80vh;
}

.videoPopupClose {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color 0.3s;
    z-index: 1;
}

.videoPopupClose:hover {
    background-color: #fe5550;
}

.cvPreviewContainer {
    width: 100%;
    max-width: 450px;
    margin: 20px auto;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    min-height: 250px;
}

.cvPreviewOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

.previewWatermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.previewWatermark span {
    display: block;
    color: rgba(120, 120, 120, 0.16);
    font-size: clamp(40px, 11vw, 96px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-58deg);
    user-select: none;
}

#cvPreviewFrameContainer .previewWatermark span {
    font-size: clamp(34px, 9vw, 80px);
}

.pdfPopupOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
}

.pdfPopupOverlay.active {
    display: flex;
}

.pdfPopup {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    height: auto;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.pdfPopupClose {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color 0.3s;
    z-index: 1;
}

.pdfPopupClose:hover {
    background-color: #fe5550;
}

.pdfPopupLoader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #555;
}

#pdfPopupCanvasContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    width: fit-content;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    padding: 0;
    background: #fff;
    border-radius: 8px;
}

#pdfPopupCanvasContainer:empty + .pdfPopupWatermark {
    opacity: 0;
}

.editButtonAbovePrice {
    text-align: center;
    margin: 20px 0 15px 0;
}

.editButtonAbovePrice .buttonBack {
    margin: 0 auto;
    display: block;
}

@media (max-width: 990px) {
    #side2 {
        overflow: visible;
    }

    #side2 .mobileBack {
        display: none;
    }

    #side2 .mobileSpec {
        padding-top: 34px;
        overflow: visible;
    }

    #side2 .cLogo.mobile {
        top: -27px;
        width: 54px;
        height: 53px;
        margin-left: -27px;
        z-index: 2;
    }

    .cvPreviewContainer {
        max-width: 120px;
        min-height: 170px;
        margin: 8px auto 6px auto;
        background: none;
        border: none;
        padding: 0;
        overflow: visible;
    }

    #cvPreviewFrameContainer {
        overflow: visible;
        text-align: center;
    }

    #cvPreviewCanvasContainer {
        display: inline-block;
        overflow: visible;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 0;
        background: #fff;
    }

    #cvPreviewCanvasContainer canvas {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }

    #side2 .headlineBlock {
        margin-top: 0;
        margin-bottom: 8px;
    }

    #side2 .headlineRow {
        margin-top: 20px;
    }

    #side2 .editButtonAbovePrice {
        margin: 12px 0 8px 0;
    }

    #side2 h2 {
        margin-top: 10px;
        margin-bottom: 12px;
    }

    #side2 #totalPrice,
    #previewStepPrice {
        font-size: 38px;
        line-height: 1.1;
    }

    #side2 .agree {
        margin-top: 4px;
        margin-bottom: 14px;
        font-size: 15px;
    }

    #side2 .buttonOut {
        width: 100%;
        max-width: 320px;
        min-width: 0 !important;
        margin-top: 16px !important;
    }

    #side2 #downloadCV {
        width: 100%;
        max-width: 320px;
        min-width: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 16px !important;
        line-height: 1.25;
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .pdfPopupOverlay {
        padding: 32px 8px 8px;
        align-items: center;
    }

    .pdfPopup {
        width: 100%;
        max-width: none;
        max-height: none;
        height: calc(100vh - 40px);
        padding: 8px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .pdfPopupClose {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    #pdfPopupCanvasContainer {
        max-height: calc(100vh - 110px);
        padding: 0;
    }

    .previewWatermark span {
        font-size: clamp(34px, 18vw, 80px);
        letter-spacing: 0.12em;
    }
}
@media (max-width: 470px) {
    #side3 .mainRow h3
    {
        font-size: 22px;
        line-height:15px;
    }
    #novyRiadok
    {
        display:block;
    }
}
@media(max-width:412px) {
    .nestiahlo
    {
        font-size: 15px;
    }
}

.formSend.formSendOutline {
    background-color: transparent;
    border: 2px solid #71b620;
    color: #71b620;
    font-size: 17px;
    padding: 16px 36px;
}

.formSend.formSendOutline:hover {
    background-color: #71b620;
    color: #fff;
}

#generatePreviewBtn.formSendOutline,
#formSend2.formSendOutline {
    background-color: #71b620;
    border-color: #71b620;
    color: #fff;
}

#generatePreviewBtn.formSendOutline:hover,
#generatePreviewBtn.formSendOutline:focus,
#generatePreviewBtn.formSendOutline:active,
#formSend2.formSendOutline:hover,
#formSend2.formSendOutline:focus,
#formSend2.formSendOutline:active {
    background-color: #71b620;
    border-color: #71b620;
    color: #fff;
}

#side1 .cvTemplateList {
    width: 100%;
}

#side1 .cvTemplateList .cvTemplate {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 20px 12px 24px;
}

#side1 .cvTemplateList .cvTemplate:nth-child(odd) {
    background-color: #f0ece8;
}

#side1 .cvTemplateList .cvTemplate:nth-child(even) {
    background-color: #fcf5f3;
}

#side1 .cvTemplateList .cvTemplate:last-child {
    margin-bottom: 0;
}

#side1 .cvTemplateList .helpCircle {
    width: 176px;
    margin: 0 auto;
}

#side1 .cvTemplateList .cena {
    left: auto;
    right: -20px;
    top: -14px;
}

#side1 .cvTemplateList .cvTemplate label {
    display: block;
    width: 176px;
    margin: 0 auto;
    border: 4px solid transparent;
    background-color: #fff;
}

#side1 .cvTemplateList .cvTemplate label.active
{
    border: 4px solid #1fc01d;
}

#side1 .cvTemplateList .sablona-cc {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.cvTemplateActions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.templateActionBtn {
    min-width: 112px;
    border: none;
    border-radius: 184px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.templatePreviewBtn {
    background-color: #f3d68b;
    color: #6a5320;
}

.templatePreviewBtn:hover {
    background-color: #eaca76;
}

.templateChooseBtn {
    background-color: #71b620;
    color: #fff;
}

.templateChooseBtn:hover {
    background-color: #5f991c;
}

.templatePreviewOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.templatePreviewOverlay.active {
    display: flex;
}

.templatePreviewPopup {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 16px 16px 14px 16px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.templatePreviewPopup img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
}

.templatePreviewPrice {
    margin-top: 12px;
    color: #71b620;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
}

.templatePreviewClose {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background-color .3s;
    z-index: 1;
}

.templatePreviewClose:hover {
    background-color: #fe5550;
}

@media (max-width:990px) {
    #side1 .cvSelect .headlineBlock2 {
        margin-bottom: 18px;
    }

    #chooseTemplateBtn.formSendOutline,
    #formSend2.formSendOutline {
        margin-top: 28px;
        padding: 15px 24px;
        font-size: 15px;
        white-space: nowrap;
    }

    #chooseTemplateBtn.formSendOutline {
        margin-bottom: 0;
    }

    #formSend2.formSendOutline {
        margin-top: 18px;
        margin-bottom: 0;
    }

    #side1 .cvTemplateList .cvTemplate {
        width: 100%;
        margin: 0;
        padding: 18px 14px 24px;
    }

    #side1 .cvTemplateList .cvTemplate:last-child {
        padding-bottom: 24px;
    }

    #side1 .cvTemplateList .helpCircle {
        width: 176px;
    }

    #side1 .cvTemplateList .cena {
        right: -16px;
    }
}

@media (max-width:768px) {
    .templatePreviewPopup {
        max-width: 390px;
        padding: 10px 10px 12px 10px;
    }

    .templatePreviewClose {
        top: 8px;
        right: 8px;
    }
}

@media (max-width:400px) {
    .cvTemplateActions {
        gap: 8px;
    }

    .templateActionBtn {
        min-width: 102px;
        font-size: 11px;
        padding: 8px 12px;
    }
}

html,
body {
    overflow-x: hidden;
}

.resumeBuilderShell {
    padding: 38px 30px 0;
}

.resumeBuilderShell.is-form-step .resumePreviewSection {
    display: none;
}

.resumeBuilderShell.is-preview-step .resumeBuilderSections {
    display: none;
}

.resumeBuilderShell.is-preview-step .resumePreviewSection {
    display: block;
    margin-top: 0;
    padding-top: 8px;
    border-top: none;
}

.resumeBuilderShell::after,
.resumeBuilderForm::after,
.resumeBuilderSections::after {
    content: "";
    display: block;
    clear: both;
}

.resumeBuilderSections {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
    gap: 34px;
    align-items: start;
}

.resumeBuilderSection {
    min-width: 0;
}

.resumeBuilderSection .headlineRow.mainRow,
.resumePreviewSection .headlineRow.mainRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

.resumeBuilderSection .mainRow h1,
.resumeBuilderSection .mainRow h3,
.resumePreviewSection .mainRow h3 {
    float: none;
    margin: 0;
}

.resumeBuilderSection .headlineRow.secondaryRow,
.resumePreviewSection .headlineRow.secondaryRow {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    line-height: 1.55;
}

.resumeBuilderSection .step,
.resumePreviewSection .step {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mobile-step {
    display: none !important;
}

.builderIntroCtas {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.desktopOnly {
    display: flex;
}

.mobileOnly {
    display: none;
}

.chooseTemplateMobileWrap,
.mobileTemplateHeading,
.mobileHeroIntro {
    display: none;
}

.singleTemplateMode #builderTemplateSection,
.singleTemplateMode .chooseTemplateMobileWrap,
.singleTemplateMode #myDescriptionSmall,
.singleTemplateMode #myDescriptionBig,
.singleTemplateMode .bottomMargin.main hr {
    display: none !important;
}

.singleTemplateMode .resumeBuilderSections {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
}

.singleTemplateMode .resumeFormSection {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}

.resumeBuilderForm {
    margin-top: 6px;
}

.interestsTextarea.form-control {
    min-height: 120px;
    padding-top: 14px;
    padding-bottom: 14px;
    resize: vertical;
    line-height: 1.5;
}

.detailsTextarea.form-control {
    min-height: 92px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
    line-height: 1.45;
}

.resumeTemplateSection .headlineBlock2 {
    margin-top: 40px;
    margin-bottom: 26px;
}

.templateCarouselShell {
    position: relative;
}

.templateCarouselViewport {
    width: 100%;
    min-width: 0;
}

#side1 .resumeTemplateSection .cvTemplateList {
    display: grid;
    gap: 22px;
}

#side1 .resumeTemplateSection .cvTemplate {
    margin-bottom: 0;
}

.templateSelectionNote {
    display: none;
    margin-top: 18px;
    text-align: center;
    color: #6f6661;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.templateNav {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid #dfd3cb;
    border-radius: 999px;
    background: #fff;
    color: #7a736f;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition: transform .2s ease, border-color .2s ease, color .2s ease;
}

.resumePreviewSection {
    margin-top: 36px;
    padding: 26px 24px 34px;
    border-top: 1px solid #f1e5dd;
    background: #efe6e1;
}

.resumePreviewTop,
.resumePreviewBottom {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.resumePreviewCard {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.cvPreviewContainer {
    max-width: 100%;
    margin: 0 auto 18px;
}

.cvPreviewEmptyState,
.cvPreviewLoaderContainer {
    min-height: 430px;
    padding: 28px 20px;
    background: #faf6f2;
    border: 1px solid #ebddd3;
    border-radius: 26px;
}

.cvPreviewEmptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cvPreviewEmptyCanvas {
    width: 220px;
    height: 311px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
    border-radius: 8px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.08);
    position: relative;
}

.cvPreviewEmptyCanvas::before,
.cvPreviewEmptyCanvas::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    height: 8px;
    border-radius: 999px;
    background: #efe6e1;
}

.cvPreviewEmptyCanvas::before {
    top: 38px;
}

.cvPreviewEmptyCanvas::after {
    top: 64px;
}

.cvPreviewHint {
    margin-top: 18px;
    max-width: 360px;
    color: #7a736f;
    font-size: 14px;
    line-height: 1.5;
}

.cvPreviewLoaderContainer {
    display: none;
    text-align: center;
}

.cvPreviewSpinner {
    display: inline-block;
    width: 42px;
    height: 42px;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-top-color: #71b620;
    border-radius: 50%;
    animation: cvPreviewSpin 1s linear infinite;
}

.cvPreviewLoaderLabel {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #5f5752;
}

@keyframes cvPreviewSpin {
    to {
        transform: rotate(360deg);
    }
}

.previewActionRow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
    margin: 14px 0 8px;
}

.previewStepPriceBlock {
    text-align: center;
    margin: 18px 0 6px;
}

.previewTrustNote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: -10px 0 26px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    color: #000;
}

.previewTrustStar {
    color: #f0b625;
    font-size: 19px;
    line-height: 1;
    flex: 0 0 auto;
}

.previewEditButton,
.previewProceedButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    line-height: 1;
    margin: 0 !important;
    -webkit-appearance: none;
    appearance: none;
}

.previewEditButton {
    min-height: 46px;
    height: 46px;
    width: 136px;
    padding: 0 22px;
    color: #656362 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.previewEditButton .fa-arrow-left {
    color: #656362 !important;
}

.previewProceedButton {
    min-width: 158px;
    min-height: 46px;
    height: 46px;
    font-size: 16px;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.previewProceedButton.is-waiting {
    opacity: 0.92;
}

.previewTermsNotice {
    max-width: 420px;
    margin: 18px auto 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #6f6661;
}

.previewTermsNotice a {
    color: inherit;
    text-decoration: underline;
}

.previewPaymentLogos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 18px auto 0;
}

.previewPaymentLogoStripe {
    display: block;
    width: auto;
    height: 28px;
    margin-bottom: -29px;
}

.previewEditButton:hover,
.previewEditButton:focus,
.previewEditButton:active {
    color: #656362 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.previewEditButton:hover .fa-arrow-left,
.previewEditButton:focus .fa-arrow-left,
.previewEditButton:active .fa-arrow-left {
    color: #656362 !important;
}

.previewPriceDivider {
    border: 0;
    height: 2px;
    max-width: 420px;
    margin: 22px auto 18px;
    background: #e1d5cd;
}

.previewPriceLabel {
    font-size: 15px;
    margin: 0 0 6px;
}

#paymentType {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 14px;
    color: #1f1a17;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.paymentTypeStar {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

.paymentStepPitch {
    max-width: 430px;
    margin: 0 auto 18px;
    color: #2f2b28;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.previewAgree {
    margin-top: 8px;
}

.expressCheckoutWrap {
    width: 100%;
    max-width: 520px;
    min-height: 54px;
    margin: 18px auto 0;
    display: none;
}

.expressCheckoutWrap.is-ready {
    display: block;
}

.expressCheckoutWrap.is-confirming {
    opacity: 0.78;
    pointer-events: none;
}

#expressCheckoutElement {
    min-height: 48px;
}

.expressCheckoutMessage {
    display: none;
    margin-top: 10px;
    color: #5f5651;
    font-size: 13px;
    line-height: 1.4;
}

.expressCheckoutMessage.is-error {
    color: #a2412c;
}

.previewButtonOut {
    width: 100%;
    max-width: 360px;
    margin-top: 18px;
}

.previewButtonOut #downloadCV {
    width: 100%;
    margin: 0 auto;
    padding-right: 42px;
}

.previewButtonOut #downloadCV:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.paymentTermsInline {
    max-width: 380px;
    margin: 12px auto 0;
    color: #8a817a;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.paymentTermsInline a {
    color: #8a817a;
    text-decoration: underline;
}

.previewStripeLogo {
    display: block;
    float: none;
    width: 185px;
    margin: 26px auto 0;
}

.paymentStepOuter {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 16px 0;
}

.paymentStepCard {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.paymentStepBack {
    width: auto;
    margin: 0 auto 14px !important;
    padding: 0;
    background: transparent;
    color: #b7aba3;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1.2;
}

.paymentStepBack:hover,
.paymentStepBack:focus,
.paymentStepBack:active {
    background: transparent;
    color: #94877f;
    border: none !important;
    box-shadow: none !important;
}

.paymentStepButtonOut {
    max-width: 380px;
}

@media (max-width:990px) {
    .singleTemplateMode .bottomMargin.main {
        display: block !important;
    }

    #builderFormSection,
    #builderTemplateSection {
        margin: auto;
    }

    .resumeBuilderShell {
        padding: 26px 16px 0;
    }

    .resumeBuilderShell.is-preview-step .resumePreviewSection {
        margin-top: 0;
        padding-top: 0;
    }

    .resumeBuilderSections {
        display: flex;
        flex-direction: column;
        gap: 26px;
    }

    .resumeFormSection {
        order: 1;
    }

    .resumeTemplateSection {
        order: 2;
    }

    .desktop-step {
        display: none !important;
    }

    .mobile-step {
        display: inline-flex !important;
    }

    .desktopOnly {
        display: none !important;
    }

    .mobileOnly {
        display: flex;
    }

    .mobileHeroIntro {
        display: block;
        margin-top: -25px;
        margin-bottom: 18px;
    }

    .mobileHeroIntro .headlineRow.mainRow,
    .mobileTemplateHeading .headlineRow.mainRow {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .mobileHeroIntro .mainRow h3,
    .mobileTemplateHeading .mainRow h3 {
        float: none;
        margin-left: 0;
    }

    .chooseTemplateMobileWrap {
        display: block;
    }

    .resumeTemplateSection .headlineBlock2 {
        display: none;
    }

    .mobileTemplateHeading {
        display: block;
        margin-bottom: 28px;
    }

    .resumeBuilderSection .headlineRow.mainRow,
    .resumePreviewSection .headlineRow.mainRow {
        gap: 10px;
    }

    .templateCarouselShell {
        display: block;
        position: relative;
        width: calc(100% + 32px);
        margin: 0 -16px;
        padding: 20px 46px 22px;
        background: #efe6e1;
    }

    .templateNav {
        display: inline-flex;
        position: absolute;
        top: 42%;
        width: 38px;
        height: 38px;
        transform: translateY(-50%);
        z-index: 2;
    }

    .templatePrev {
        left: 8px;
    }

    .templateNext {
        right: 8px;
    }

    .templateCarouselViewport {
        overflow: visible;
    }

    #side1 .cvTemplateList .cvTemplate:nth-child(odd),
    #side1 .cvTemplateList .cvTemplate:nth-child(even) {
        background-color: transparent;
    }

    #side1 .resumeTemplateSection .cvTemplateList {
        display: block;
    }

    #side1 .resumeTemplateSection .cvTemplate {
        display: none;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    #side1 .resumeTemplateSection .cvTemplate.is-slide-active {
        display: block;
    }

    #side1 .resumeTemplateSection .helpCircle {
        width: 176px;
        margin: 0 auto;
    }

    #side1 .resumeTemplateSection .cena {
        left: auto;
        right: -12px;
        top: -14px;
    }

    #side1 .resumeTemplateSection .cvTemplate label {
        display: block;
        width: 176px;
        margin: 0 auto;
        border: 4px solid transparent;
        background-color: #fff;
        background-position: center top;
    }

    #side1 .resumeTemplateSection .cvTemplate .sablona-cc {
        display: block;
        margin: 0 auto;
    }

    .cvTemplateActions {
        flex-wrap: wrap;
    }

    #side1 .resumeTemplateSection .templateActionBtn {
        flex: 0 1 118px;
    }

    .templateSelectionNote {
        display: block;
        margin-top: 14px;
        padding: 0 10px;
    }

    #mobileAlternative {
        display: block;
        margin-top: 18px;
    }

    .resumePreviewSection {
        width: calc(100% + 32px);
        margin: 18px -16px 0;
        padding: 0;
        border-top: 2px solid #d0c7c1;
        background: #efe6e1;
    }

    .resumePreviewTop,
    .resumePreviewBottom {
        max-width: none;
    }

    .resumePreviewTop {
        background: transparent;
        padding: 24px 16px 22px;
    }

    .resumePreviewBottom {
        background: transparent;
        padding: 22px 16px 30px;
    }

    .resumePreviewCard {
        padding: 0;
    }

    .cvPreviewContainer {
        max-width: 232px;
    }

    .cvPreviewEmptyState,
    .cvPreviewLoaderContainer {
        min-height: 320px;
        padding: 0 0 18px;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .cvPreviewEmptyCanvas {
        width: 160px;
        height: 226px;
    }

    .previewEditButton {
        width: 136px;
    }

    .previewProceedButton {
        width: 158px;
        min-width: 158px;
        min-height: 46px;
        height: 46px;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .previewPriceLabel {
        margin: 0 0 4px;
    }

    .previewStepPriceBlock {
        margin: 14px 0 4px;
    }

    #paymentType {
        gap: 8px;
        margin-bottom: 12px;
        font-size: 16px;
    }

    .paymentTypeStar {
        font-size: 18px;
    }

    .paymentStepPitch {
        max-width: 340px;
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 1.45;
        font-weight: 600;
    }

    .previewButtonOut {
        max-width: 320px;
    }

    .expressCheckoutWrap {
        max-width: 320px;
        margin-top: 16px;
    }

    .expressCheckoutMessage {
        font-size: 12px;
    }

    .previewButtonOut #downloadCV {
        min-width: 0 !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
        white-space: normal;
    }

    .previewStripeLogo {
        width: 150px;
        margin-top: 22px;
        margin-bottom: 12px;
    }

    .previewTrustNote {
        gap: 8px;
        margin: -10px 0 22px;
        font-size: 15px;
        padding: 0 10px;
    }

    .previewTrustStar {
        font-size: 17px;
    }

    .previewPaymentLogos {
        gap: 14px;
        margin-top: 16px;
    }

    .previewPaymentLogoStripe {
        height: 28px;
        margin-bottom: -22px;
    }

    .interestsTextarea.form-control {
        min-height: 128px;
    }

    .detailsTextarea.form-control {
        min-height: 108px;
    }

    .paymentStepOuter {
        padding: 22px 16px 0;
    }

    .paymentStepBack {
        margin-bottom: 12px !important;
        font-size: 14px;
    }

    .paymentStepCard {
        max-width: 100%;
        padding: 0 4px;
    }
}