:root{
    /* рабочая область */
    --work-bg: #151515;
    --work-color: #FFF;
    --work-color-hover: #000;

    /* главный цвет */
    --primary-bg: #6C757D;
    --primary-bg-hover: #5C636A;
    --primary-color: #FFF;
    --primary-color-hover: #FFF;
    --primary-border: 1px solid #F8F9FA;
    --primary-border-hover: 1px solid #F8F9FA;

    /* контролы, линии, рамки */
    --control-bg: #FFF;
    --control-color: #212529;
    --control-border: 1px solid #CED4DA;
    --control-placeholder: #6C757D;
    --control-shadow: none;
    --control-bg-hover: #FFF;
    --control-color-hover: #000;
    --control-border-hover: 1px solid #CED4DA;
    --control-placeholder-hover: #6C757D;
    --control-shadow-hover: none;
    --control-bg-focus: #FFF;
    --control-color-focus: #000;
    --control-border-focus: 1px solid #CED4DA;
    --control-shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

    /* меню */
    --menu-fs: 14px;
    --menu-height: 50px;
    --menu-button-height: 40px;
    --menu-divider: 1px solid #333;
    --menu-color: #FFF;
    --menu-bg: #1A4F66;
    --menu-color-hover: #FFF;
    --menu-bg-hover: #154154;
    --menu-color-active: #FFF;
    --menu-bg-active: #154154;

    /* шрифт для компонентов */
    --component-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --base-tile-good: 320px;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    /* отступы */
    --bs-gutter-x: 15px;
    --bs-gutter-y: 15px;
}

html, body{
    height: 100%;
}

body{
    position: relative;
    min-width: 320px;
    color: var(--work-color, #222);
    background-color: var(--work-bg, #FFF);

    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
}

body.subindex{
    background-color: #151515;
    display: flex;
    flex-flow: column;
}

a{
    color: var(--work-color, #222);
    text-decoration: none;
}

a:hover{
    color: var(--work-color-hover, #000);
    text-decoration: underline;
}

.container-fluid{
    width: 100%;
    position: relative;
    padding: 0 var(--bs-gutter-x, 15px) !important;
    /* outline: 1px solid #F00; */
}

.container-fluid:before,
.container-fluid:after{
    content: none;
}

/* шапка */
.index header{
    max-height: 800px;
    height: calc(404px + (686 - 404) * ((100vw - 320px) / (768 - 320)));
    background: url("/frontend/themes/theme_elite_dating/image/girl-small.webp") center top 0 no-repeat,
    url("/frontend/themes/theme_elite_dating/image/header.png") 0 0 repeat-x;
    background-size: cover;
}

.index header .container-fluid{
    max-height: 800px;
    height: calc(404px + (686 - 404) * ((100vw - 320px) / (768 - 320)));
}

header .slogan{
    text-transform: uppercase;
    font-size: 24px;
    color: #F2E5CC;
    text-align: left;
    margin: 0;
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 6em;
}

header .container-fluid{
    height: 100%;
    position: relative;
}

header .logo{
    display: block;
    width: calc(112px + (196 - 112) * ((100vw - 320px) / (768 - 320)));
    max-width: 238px;
    background: url("/frontend/themes/theme_elite_dating/image/logo_top.png") 0 0 no-repeat;
    background-size: contain;
    position: absolute;
    left: 15px;
    top: 15px;
}

header .logo:before{
    content: "";
    display: block;
    padding-top: calc(100% * (354 / 476));
}

.subindex header{
    margin-bottom: 50px;
}

.subindex header .container-fluid{
    display: grid;
    grid-gap: 15px;
    justify-items: center;
    padding: 15px var(--bs-gutter-x, 15px) !important;
}

.subindex header .logo{
    position: static;
    width: 168px;
}


header .phone{
    font-size: 24px;
    color: #E0C490;
}

/* секции */
section{
    --text-color: #000;
}

main .container-fluid{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    display: grid;
    grid-gap: 15px;
}

section .container-fluid{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, max-content));
    grid-auto-rows: auto;
    grid-gap: 15px;
    justify-content: center;
    justify-items: center;
    color: var(--text-color) !important;
}

section a.btn,
section button.btn{
    display: grid;
    width: 100%;
    max-width: 280px;
    height: 66px;
    text-transform: uppercase;
    background: transparent !important;
    font-size: 24px !important;
    border-radius: 50px !important;
    border: 1px solid var(--text-color) !important;
    color: var(--text-color) !important;
    font-family: "Cormorant", serif !important;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    align-items: center;
}

section a:hover,
section button:hover{
    box-shadow: 0 0 5px #FFF !important;
    text-decoration: none;
}

section .item{
    max-width: 366px;
}

main h1,
section h2,
section img,
section a.btn,
section button{
    text-align: center;
    grid-column: 1 / -1;
}

.pdf{
    background: #EAEAEA;
}

section.pdf .container-fluid{
    grid-template-columns: 1fr !important;
}

section.pdf a.btn{
    width: 70%;
    max-width: 380px !important;
    padding: 0 20px 0 70px;
    background: url("/frontend/themes/theme_elite_dating/image/pdf.svg") 16px 6px no-repeat transparent !important;
    line-height: 1.1em;
}

.advantages{
    background-color: #FAF8F3;
}

.advantages h2{
    color: #322B2B;
}

.advantages .item{
    background: url("/frontend/themes/theme_elite_dating/image/sprite.png") -500px 0 no-repeat;
}

.advantages .item:nth-child(3){
    background: url("/frontend/themes/theme_elite_dating/image/sprite.png") -400px -100px no-repeat;
}

.advantages .item:nth-child(4){
    background: url("/frontend/themes/theme_elite_dating/image/sprite.png") -300px -200px no-repeat;
}

.advantages .item:nth-child(5){
    background: url("/frontend/themes/theme_elite_dating/image/sprite.png") -200px -300px no-repeat;
}

.advantages .item:nth-child(6){
    background: url("/frontend/themes/theme_elite_dating/image/sprite.png") -100px -400px no-repeat;
}

.advantages .item:nth-child(7){
    background: url("/frontend/themes/theme_elite_dating/image/sprite.png") 0 -500px no-repeat;
}

.advantages .item h3{
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 27px;
    height: 73px;
    display: grid;
    align-items: center;
    padding-left: 85px;
    margin-bottom: 15px;
}

section.advantages button:hover{
    box-shadow: 0 0 5px #000 !important;
}

.carousel{
    --text-color: #BFA26C;
    background: url("/frontend/themes/theme_elite_dating/image/carousel.svg") center bottom no-repeat #151515;
}

.carousel .container-fluid{
    display: block !important;
}

.carousel .container-fluid .good_list.slick-slider{
    background-color: transparent;
    padding: 0;
}

.carousel .container-fluid .good_list.slick-slider .slick-slide{
    padding: 0 20px;
}

.carousel .container-fluid .slick-prev,
.carousel .container-fluid .slick-next{
    display: none !important;
    font-size: 0;
    background-color: transparent;
    box-shadow: none !important;
}

.carousel .container-fluid .slick-prev:before,
.carousel .container-fluid .slick-next:before{
    /* color: var(--text-color, #f00); */
    border-color: var(--text-color, #F00);
    border-width: 3px;
}

.carousel .container-fluid .slick-dots li button:before{
    color: #FFF;
    font-size: 20px;
}

.carousel .container-fluid .slick-dots li.slick-active button:before{
    color: var(--text-color, #F00);
}

.carousel .container-fluid .btn{
    margin: 30px auto;
}


.stages{
    --text-color: #E0C490;
    background: url("/frontend/themes/theme_elite_dating/image/stages.svg") center -100px no-repeat #3C3324;
}

.stages .item{
    /*text-align: center;*/
    display: grid;
    grid-template-columns: 73px 1fr;
    grid-gap: 15px;
    align-items: center;
}

.stages .item h3{
    width: 73px;
    height: 73px;
    background-color: #3B3324;
    font-family: "Cormorant Infant", serif !important;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 60px;
    margin: 0 auto;
    display: grid;
    text-align: center;
    align-items: center;
    border-radius: 50%;
    grid-column: 1 / 2;
}

.stages .item strong{
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    line-height: 1.2em;
    grid-column: 2 / 3;
}

.stages .item p{
    margin: 0;
    color: #FFF;
    grid-column: 1 / 3;
}

.stages .item:nth-child(8){
    grid-column: 1 / -1;
}

.tariffs{
    --text-color: #E0C490;
    background-color: #151515;
}

.tariffs .container-fluid{
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    max-width: 606px;
}

.tariffs .item{
    width: 100%;
    max-width: 277px;
    text-align: center;
    box-shadow: 0 0 50px 4px rgba(224, 196, 144, 0.09);
}

.tariffs .item h3{
    text-transform: uppercase;
    font-size: 22px;
    margin: 15px 0;
}

.tariffs .item hr{
    max-width: 100px;
    margin: 15px auto;
}

.tariffs .item p{
    color: #FFF;
}

.tariffs .item .price{
    color: #FFF;
    background-color: #312C22;
    padding: 15px 0;
}

.tariffs .container-fluid > p{
    grid-column: 1 / -1;
    color: #FFF;
    justify-self: left;
}

.geography{
    --text-color: #E0C490;
    background: url("/frontend/themes/theme_elite_dating/image/karta.png") left 20vw top 100px no-repeat #151515;
    background-size: contain;
    padding: 30px 0;
    overflow: hidden;
    position: relative;
}

.geography,
.geography .container-fluid{
    display: block;
    height: calc((100vw / 1500 * 610) + 160px);
}

.geography h2{
    color: #E0C490;
}

.geography img{
    position: relative;
    left: calc((100vw - 830px) / 2);
    /*max-height: none;*/
    /*max-width: none;*/
}

.breadcrumb-nav{
    height: 24px !important;
    /* outline: 1px solid #FFF; */
}

.breadcrumb-nav :before,
.breadcrumb-nav li,
.breadcrumb-nav a{
    color: #E0C490 !important;
}

/* главный блок */
main{
    min-height: 300px;
    flex: 0 0 auto;
    color: #BFA26C;
    /* outline: 1px solid #FFF; */
}

main .container-fluid{
    overflow: auto;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

main h1{
    text-align: center;
}

.preview .good_list.tile1{
    /* max-width: 1198px; */
    margin: 0 auto;
    grid-gap: 50px;
}

.good_list.tile1 .good_item{
    padding: 0 !important;
    background-color: #322C21;
    box-shadow: 0 0 5px 15px #202020;
}

.good_list.tile1 .good_item:hover{
    box-shadow: 0 0 5px 15px #282828;
}

.good_list.tile1 .good_item > *{
    display: block;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    text-align: center;
}

.good_list.tile1 .good_item > h2{
    font-size: 23px;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 15px;
}

.good_list.tile1 .good_item > p{
    font-size: 20px;
}

.good_list.tile1 .good_item > a.button{
    border: 1px solid #BFA26C;
    color: #FFF;
    margin: 0 auto 15px auto;
    text-transform: uppercase;
    width: 160px !important;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 50px;
}

.good_list.tile1 .good_item > a.button:hover{
    text-decoration: none;
    box-shadow: 0 0 5px #999;
}

.good_list.tile1 .good_item .flag_field{
    display: none;
}

.good_one .info{
    min-width: 290px;
    max-width: 640px;
    margin: 0 auto;
}

.good_one .flex_good_one .info .title{
    margin: 30px 0 0 0;
    border: none;
    color: #BFA26C;
    text-align: left;
    font-size: 40px;
}

.good_one .flex_good_one .info hr{
    border-color: #BFA26C;
    max-width: 290px;
}

.good_one .flex_good_one .info td{
    vertical-align: top;
    padding: 5px 0;
}

.good_one .flex_good_one .info tr > td:first-child{
    width: 115px;
}

.good_one .info button{
    color: #BFA26C;
    border: 1px solid #BFA26C;
    background: transparent;
    border-radius: 50px;
    padding: 15px 40px;
    margin-top: 60px;
    font-size: 25px;
}

.good_one .info button:hover{
    box-shadow: 0 0 5px #999;
}

.good_one .flex_good_one .image .image_main a.colorbox{
    color: #666;
}

.good_one .flex_good_one .image .image_main a.colorbox:hover{
    color: #BFA26C;
}

.good_one .flex_good_one .image .image_main{
    border: none;
    background-color: transparent;
    border-radius: 0;
    box-shadow: 0 0 10px 10px #202020;
}

.good_one .flex_good_one .image .image_add picture{
    border: none;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.good_one .flex_good_one .image .image_add picture.active{
    outline: 1px solid #423C37;
    box-shadow: none;
}

.good_one .flex_good_one .image .image_add div.prev,
.good_one .flex_good_one .image .image_add div.next{
    background: transparent;
    border: none;
}

.good_one .flex_good_one .image .image_add div.prev:hover,
.good_one .flex_good_one .image .image_add div.next:hover{
    background: transparent;
    border: none;
    color: #BFA26C;
    box-shadow: none;
}

.good_one .flex_good_one .image .image_add div.disabled{
    background: transparent !important;
    border: none !important;
    color: #000 !important;
}

.pagination .page-item{
    margin: 0 3px;
}

.pagination .page-item a{
    border-radius: 6px !important;
    background: none !important;
    color: #FFF !important;
    border: none !important;
}

.pagination .page-item.active a{
    border: 1px solid #BFA26C !important;
}

.zodiac td:nth-child(2){
    position: relative;
    padding-left: 32px !important;
}

.zodiac span{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.4em;
    display: inline-block;
}

.zodiac span:hover{
    cursor: pointer;
    color: #FF6347; /* Цвет при наведении */
    transform: scale(1.5); /* Лёгкое увеличение при наведении */
    transition: transform 0.3s ease-in-out;
}

/* подвал */
footer{
    background: url("/frontend/themes/theme_elite_dating/image/footer.svg") center center no-repeat #3B3324;
    padding: 30px 0;
}

footer .container-fluid{
    height: 225px;
    display: grid;
    /*@formatter:off*/
    grid-template-areas:
        "l"
        "p"
        "s";
    /*@formatter:on*/
    grid-auto-rows: auto;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: end;
    grid-gap: 15px;
}

footer .container-fluid .logo{
    width: 168px;
    height: 123px;
    background: url("/frontend/themes/theme_elite_dating/image/logo_bottom.png") 0 0 no-repeat;
    background-size: contain;
    grid-area: l;
}

footer .container-fluid .phone{
    color: #E0C490;
    grid-area: p;
    font-size: 18px;
}

footer .container-fluid .phone:hover{
    color: #FFF;
}

footer .social{
    grid-area: s;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

footer .social a{
    width: 45px;
    height: 45px;
    color: #E0C490;
    border: 2px solid #E0C490;
    border-radius: 50%;
    display: inline-grid;
    justify-content: center;
    align-content: center;
}

footer .social a:hover{
    color: #FFF;
    border: 2px solid #FFF;
}

#callback_form1 .modal-header{
    border-bottom: none;
    background: #000;
}

#callback_form1 .modal-header .modal-title{
    color: #BFA26C;
}

#callback_form1 .modal-header .btn-close{
    color: #BFA26C;
}

#callback_form1 .modal-body{
    background: #151515;
}

#callback_form1 .modal-body .control-label{
    color: #BFA26C;
}

#callback_form1 .modal-body .control-label:after{
    color: #BFA26C;
}

#callback_form1 .modal-body .form-control{
    box-shadow: 0 4px 50px 0 rgba(224, 196, 144, 0.09);
    background: #000;
    color: #DDD;
    border: none;
}

#callback_form1 .modal-body .form-control::placeholder{
    color: #8B867B;
}

#callback_form1 .modal-body .not_empty_text,
#callback_form1 .modal-body .not_empty_text:before{
    color: #8B867B;
}

#callback_form1 .modal-footer{
    border-top: none;
    background: #000;
}

#callback_form1 .modal-footer .btn-custom:disabled{
    background-color: #000;
    border: 1px solid #BFA26C;
    border-radius: 12px;
    color: #8B867B;
}

#callback_form1 .modal-footer .btn-custom,
#callback_form1 .modal-footer .btn-custom-close{
    background-color:  #000;
    border: 1px solid #BFA26C;
    border-radius: 12px;
    color: #8B867B;
}

#callback_form1 .modal-footer .btn-custom:hover,
#callback_form1 .modal-footer .btn-custom-close:hover{
    background-color:  #BFA26C;
    color: #000;
    font-weight: bold;
}

.more{
    margin-top: 45px;
}
.more .more_text,
.more .progress,
.empty{
    display: none;
}