:root {
  --font-family: "Arimo", sans-serif;
  --second-family: "Nunito", sans-serif;
  --third-family: "Inter Tight", sans-serif;
  --text-color: #fff;
  --hover-color: #acacac;
  --background-color: #191919;
  --hover-btn-color: #acacac;
}

body { font-family: var(--font-family); color: var(--text-color); background: var(--background-color); }
a, a.nav-link{ color: var(--text-color); text-decoration: none; transition: all 0.4s ease; }
a:hover{ color: var(--hover-color); }

h2 { font: 700 30px var(--font-family); text-transform: uppercase; margin: 0; }
h2 span { color: #acacac; }

ul.nav .nav-link { padding: 0; }
ul.nav .nav-link:focus { background-color: unset; color: var(--hover-color); }
ul.nav .nav-link:hover{ color: var(--hover-color); }
ul.nav .nav-link.is-active { color: var(--text-color); }

.pager { display: flex; justify-content: center; margin-top: 20px; }
.pager .page-link { box-shadow: none!important; }
.pagination {
    --bs-pagination-color: black;
    --bs-pagination-hover-color: var(--hover-color);
    --bs-pagination-focus-color: black;
    --bs-pagination-active-bg: black;
    --bs-pagination-active-border-color: black;
}

.btn {
    background: #fff;
    padding: 16px 28px 15px 28px;
    color: #000;
    border-radius: 0px;
    font: 700 16px var(--font-family);
    text-align: center;
    transition: all ease-in-out .3s;
}
.btn:hover, .btn:active, .btn:focus, .btn:focus-visible, .btn:disabled{
    color: #000!important;
    background: var(--hover-btn-color);
}

.btn-close{
    --bs-btn-close-color: #fff;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-focus-shadow: none;
}

.block-title { font: italic 400 16px var(--font-family); margin-bottom: 15px; }

.row { margin: 0 -15px; row-gap: 30px; }
.row > * { padding-right: 15px; padding-left: 15px; }

.vpa-container.vpa-short .vpa-actions .btn {
    color: #fff!important;
}
.vpa-container.vpa-short .vpa-actions .btn:hover,
.vpa-container.vpa-short .vpa-actions .btn:active,
.vpa-container.vpa-short .vpa-actions .btn:focus,
.vpa-container.vpa-short .vpa-actions .btn:focus-visible,
.btn:disabled { background: #303030!important; color: #fff!important; }

@media screen and (max-width: 991px) {
  h2 { font-size: 20px; }
}
@media screen and (max-width: 575px) {
    .row { margin: 0 -12px; row-gap: 24px; }
    .row > * { padding-right: 12px; padding-left: 12px; }
}
/*========================= HEADER =========================*/
header#header { padding: 20px 0; }
header#header .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
header#header .container > *:not(.wr-logo) { width: 100%; margin-bottom: 43px; }

header#header .container .wr-nav ul.nav { display: flex; flex-direction: row; gap: 8px 30px; }
header#header .container .wr-nav ul.nav .nav-link { font: italic 400 16px var(--font-family); }

header#header .container .wr-logo { flex: 0 0 auto; }
header#header .container .wr-logo .logo a { display: flex; flex-direction: column; align-items: center; }
header#header .container .wr-logo .logo a:hover { color: inherit; }
header#header .container .wr-logo .logo a img { width: 105px; height: 105px; }
header#header .container .wr-logo .logo p { margin-top: 25px; font: 700 16px var(--font-family); }

header#header .container .wr-contacts { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 35px; }
header#header .container .wr-contacts a { font: italic 400 16px var(--font-family); }
header#header .container .wr-contacts .wr-social { display: flex; flex-direction: row; gap: 12px; }
/*==========================================================*/

/*========================= MOBILE HEADER =========================*/
header#header-mob  {
    gap: 10px;
    padding: 8px 16px;
    background-color: var(--background-color);
}
header#header-mob > *:not(.wr-logo) { width: 100%; }
header#header-mob .wr-logo { flex: 0 0 auto; }
header#header-mob .wr-logo a img { width: 60px; height: 60px; }
header#header-mob .wr-contacts { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-end; align-items: center; gap: 12px 35px; }
header#header-mob .wr-contacts a { font: italic 400 16px var(--font-family); }
header#header-mob .wr-contacts .wr-social { display: flex; flex-direction: row; gap: 12px; }

.offcanvas {
    --bs-offcanvas-bg: var(--background-color);
}
.offcanvas .wr-logo {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}
.offcanvas .wr-logo a { display: flex; flex-direction: column; align-items: center; }
.offcanvas .wr-logo a img { width: 90px; height: 90px; }
.offcanvas .wr-logo p { margin-top: 12px; font: 700 16px var(--font-family); }
.offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.offcanvas .offcanvas-body .wr-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 450px) {
    header#header-mob .wr-contacts a.tel { display: none; }
}
/*=================================================================*/

/*========================= BANNER =========================*/
#banner-block .region-banner { display: flex; flex-direction: column; gap: 60px; }
#banner-block .region-banner #block-vesta-theme-tekstbannera .field.field--name-body.clearfix::after { display: none; }
#banner-block .region-banner #block-vesta-theme-tekstbannera .field.field--name-body { display: flex; flex-direction: column; gap: 30px; align-items: center; text-align: center;  }
#banner-block .region-banner #block-vesta-theme-tekstbannera .field.field--name-body h1 { max-width: 770px; font: 700 40px var(--font-family); text-transform: uppercase; margin: 0; }
#banner-block .region-banner #block-vesta-theme-tekstbannera .field.field--name-body h1 span { color: #acacac; }
#banner-block .region-banner #block-vesta-theme-tekstbannera .field.field--name-body p { max-width: 570px; font: 400 16px var(--font-family); }
#banner-block .region-banner #block-vesta-theme-izobrazheniebannera .field.field--name-body { display: flex; justify-content: center; position: relative; }
#banner-block .region-banner #block-vesta-theme-izobrazheniebannera .field.field--name-body > div {  position: relative; }
#banner-block .region-banner #block-vesta-theme-izobrazheniebannera .field.field--name-body > div::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: black; opacity: .6; }
#banner-block .region-banner #block-vesta-theme-izobrazheniebannera .field.field--name-body img { width: 100%; max-width: 1820px; height: 576px; object-fit: cover; }


@media screen and (max-width: 991px) {
    #banner-block .region-banner #block-vesta-theme-izobrazheniebannera .field.field--name-body img { height: 450px; }
    #banner-block .region-banner #block-vesta-theme-tekstbannera .field.field--name-body h1 { font-size: 25px; }
}
/*==========================================================*/

/*========================= ABOUT =========================*/
#about-block .wr-title { display: flex; flex-direction: column; justify-content: space-between; }
#about-block .wr-title > img { width: 270px; height: 270px; object-fit: cover; }
#about-block .wr-info { display: flex; flex-direction: column;;}
#about-block .wr-info .region-about #block-vesta-theme-tekstokompanii .field.field--name-body.clearfix::after { display: none; }
#about-block .wr-info .region-about #block-vesta-theme-tekstokompanii .field.field--name-body { display: flex; flex-direction: column; gap: 40px; }
#about-block .wr-info .region-about #block-vesta-theme-tekstokompanii .field.field--name-body p { font: 400 16px var(--font-family); }
#about-block .wr-info .wr-rates { display: flex; flex-direction: row; margin-top: 100px; gap: 30px; }
#about-block .wr-info .wr-rates .rate { display: flex; flex-direction: column; margin-top: 5px; width: 100%; max-width: 160px;}
#about-block .wr-info .wr-rates .rate p { font: 400 16px var(--font-family); color: #7d7d7d; }
#about-block .wr-info .wr-rates .rate p:first-of-type { font: 700 55px var(--font-family); text-transform: uppercase; }
#about-block .wr-info > a.btn { width: 100%; margin-top: 40px; }

@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 767px) {
    #about-block .wr-info .wr-rates { margin-top: 20px }
}
@media screen and (max-width: 575px) {
    #about-block .wr-info .wr-rates { flex-wrap: wrap; justify-content: center; }
}
/*=========================================================*/

/*========================= ADVANTAGES =========================*/
#advantages-block .wr-advantages-text { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
#advantages-block .wr-advantages-text .region-advantages-text #block-vesta-theme-tekstpreimuschestva h2 { margin-bottom: 40px; }
#advantages-block .wr-advantages-text .region-advantages-text #block-vesta-theme-tekstpreimuschestva p { font: 400 16px var(--font-family); }
/*==============================================================*/

/*========================= SERVICES =========================*/
#services-block { padding: 110px 0 100px 0; position: relative; }
#services-block .bg-services-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    justify-content: center;
}
#services-block .bg-services-block > div { width: 100%; max-width: 1820px; height: 100%; }
#services-block .bg-services-block > div::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: black; opacity: .6; }
#services-block .bg-services-block img {
    width: 100%;
    max-width: 1820px;
    height: 100%;
    object-fit: cover;
}
/*============================================================*/

/*========================= GALLERY =========================*/
#gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery { display: grid; gap: 30px; grid-template-columns: 30% auto; }
#gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery > .field__item:nth-child(1){ grid-column: 2; grid-row: 1 / span 2; position: relative; }
#gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery > .field__item:nth-child(2){ grid-column: 1; }
#gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery > .field__item a { display: block; overflow: hidden; width: 100%; height: 100%; }
#gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery > .field__item a img { width: 100%; height: 100%; object-fit: cover; transition: all ease 0.3s; }
#gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery > .field__item a:hover img { scale: 1.2; }
#gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery > .field__item:nth-child(1)::after {
    position: absolute;
    bottom: 10px;
    left: 10px;
    content: "Зеркала в рамах";
    font: 400 16px var(--font-family);
    line-height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.02);
}


#gallery-block .wr-gallery-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 500px;
    gap: 24px;
}
#gallery-block .wr-gallery-info .region-gallery-info .field.field--name-body h2 { margin-bottom: 40px; }   
#gallery-block .wr-gallery-info .region-gallery-info .field.field--name-body p { font: 400 16px var(--font-family); }   

@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
    #gallery-block .wr-gallery-info { max-width: unset; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 575px) {
    #gallery-block .region-gallery .node.node--type-photogallery.node--view-mode-teaser .field.field--name-field-gallery { gap: 15px; }
}
/*===========================================================*/

/*========================= CALLBACK =========================*/
#callback-block { padding: 110px 0 110px 0; position: relative; }
#callback-block .bg-callback-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    justify-content: center;
}
#callback-block .bg-callback-block > div { width: 100%; max-width: 1820px; height: 100%; }
#callback-block .bg-callback-block > div::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: black; opacity: .5; }
#callback-block .bg-callback-block img {
    width: 100%;
    max-width: 1820px;
    height: 100%;
    object-fit: cover;
}

#callback-block #block-vesta-theme-tekstobratnayasvyaz { display: flex; flex-direction: column; gap: 40px; margin-bottom: 40px; align-items: center; text-align: center; }
#callback-block #block-vesta-theme-tekstobratnayasvyaz .block-title { font: 700 30px var(--font-family); text-transform: uppercase; }
#callback-block #block-vesta-theme-tekstobratnayasvyaz .field.field--name-body { font: 400 16px var(--font-family); max-width: 532px; }

#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] { display: flex; flex-direction: row; justify-content: space-between; gap: 10px; }
#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] > * { width: 100%; max-width: 269px; }
#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] .form-actions button.btn { width: 100%; background: #000; color: #fff; }
#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] .form-actions button.btn:hover,
#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] .form-actions button.btn:active,
#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] .form-actions button.btn:focus,
#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] .form-actions button.btn:focus-visible,
#callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] .form-actions button.btn:disabled { background: #1c1c1c; color: #fff!important; }
#callback-block .webform-submission-form.webform-submission-callback-form .form-item.form-item-privacy { width: 100%; max-width: 630px; align-self: center; }

@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 767px) {
    #callback-block #block-vesta-theme-tekstobratnayasvyaz { gap: 20px; margin-bottom: 20px; }
    #callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] > * { max-width: unset; }
    #callback-block .webform-submission-form.webform-submission-callback-form div[data-drupal-selector="edit-fields"] { flex-direction: column; }
}
@media screen and (max-width: 575px) {
}
/*============================================================*/

/*========================= FOOTER =========================*/
footer#footer { padding-top: 110px; }
footer#footer .content { padding-bottom: 70px; }
footer#footer .block-title { font: italic 700 16px var(--font-family); color: #828282; margin-bottom: 15px; white-space: nowrap; }
footer#footer .wr-contacts a { display: block; margin-bottom: 10px; font: 700 30px var(--font-family); }

footer#footer .wr-nav .region-footer-navigation ul.nav { display: flex; flex-direction: column; gap: 10px; }
footer#footer .wr-nav .region-footer-navigation ul.nav .nav-item { display: flex; }
footer#footer .wr-nav .region-footer-navigation ul.nav .nav-link { font: 400 16px var(--font-family); }

footer#footer .wr-services .region-footer-services .view-content { display: flex; flex-direction: column; gap: 10px; }
footer#footer .wr-services .region-footer-services .view-content .views-row { font: 400 16px var(--font-family); }

footer#footer .wr-info { display: flex; flex-direction: column; gap: 30px; font: 400 16px var(--font-family); }
footer#footer .wr-info .wr-social > div { gap: 12px; }

footer#footer .copyright { display: flex; flex-direction: row; justify-content: space-between; gap: 12px; padding: 20px 0 25px 0; border-top: 1px solid rgba(255, 255, 255, 0.3); }
footer#footer .copyright > div { opacity: 0.3; font: 200 15px var(--third-family); }

@media screen and (max-width: 1199px) {
    footer#footer .wr-contacts a { font-size: 24px; }
}
@media screen and (max-width: 991px) {
    footer#footer .copyright { flex-wrap: wrap; gap: 12px 24px; justify-content: center; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 575px) {
}
/*==========================================================*/