@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    color: var(--colorText);
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}

@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
    }
}

* {
    --colorPrimaryBlue: #3b8c90;
    --colorPrimaryBlue50: #3b8c9080;
    --colorPrimaryGreen: #5e9f71;
    --colorWhite: #F3F2F2;
    --colorText: #333233;
    --colorAltBlue: #30485E;
    --colorBeige: #F6F0E6;
    --colorGray: #696969;
    --colorGrayLight: #d0d0d0;
    --colorRed: #D32F2F;
    --colorCoral: #FF6E60;
    --colorYellow: #FED900;
    --colorOrange: #F4A162;
    --colorTeal: #299D8F;

    --colorBody: var(--colorPrimaryBlue);
    --colorLink: var(--colorPrimaryBlue);
    --colorLinkOverlay: var(--colorPrimaryGreen);
    --colorHighlight: var(--colorAltBlue);

    --gradientPrimary: linear-gradient(30deg, var(--colorPrimaryBlue) 0%, var(--colorPrimaryGreen) 100%);

    /* Bg Gradient */
    --colorGradientStart: #000000c0;
    --colorGradientEnd: #00000000;

    /* Header & Footer */
    --colorHeader: var(--colorPrimaryBlue);
    --colorFooter: var(--colorPrimaryBlue);

    /* Header: Dots for top Navigator */
    --navigatorIconLast: url('data: image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="12" height="12" rx="6" fill="black" fill-opacity="0.2" stroke="white" stroke-opacity="1" stroke-width="1" /></svg>');
    --navigatorIcon: url('data: image/svg+xml;utf8,<svg width="34" height="14" viewBox="0 0 34 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="14" y="6" width="20" height="1" fill="%23ffffff" /><rect x="1" y="1" width="12" height="12" rx="6" fill="black" fill-opacity="0.2" stroke="white" stroke-opacity="1.5" stroke-width="1" /></svg>');
    --navigatorIconSelected: url('data: image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="14" height="14" rx="7" fill="%2392CFD2" /></svg>');
    --navigatorIconHovered: url('data: image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="14" height="14" rx="7" fill="%23F3F2F2" /></svg>');



    /* Menu */
    --menuTop: var(--colorWhite);
    --menuBottom: var(--colorWhite);
    --menuBottomText: var(--colorText);
    --menu1levelBg: var(--colorPrimaryBlue);
    --menu1levelHoverBg: var(--colorPrimaryGreen);
    --menu1levelActive: var(--colorAltBlue);
    --menuTextActive: #ffffff;
    --menuTextHover: #ffffff;
    --menuText: #ffffff;


    --menu2levelBg: #000;
    --menu2levelHoverBg: #000;
    /* Map */


    /* Fonts */
    --fontHeader: "Georgia", serif;
    --fontRegular: "Open Sans", sans-serif;
    --fontBig: "Open Sans", sans-serif;
    --fontSerif: "Georgia", serif;

    /* Buttons */
    --buttonGradient: linear-gradient(30deg, var(--colorPrimaryBlue) 30%, var(--colorPrimaryGreen) 70%);
    --buttonOverGradient: linear-gradient(30deg, var(--colorPrimaryBlue) 0%, var(--colorPrimaryGreen) 100%);
    --buttonOverOutline: 0 0 0 2px rgba(255, 255, 255, 1.2) !important;
    --buttonOverTransition: background-color 0.3s ease, background-position 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, border 0.3s ease;
    --buttonSize: 40px;
    --shareIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000000"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>');
    --shareIconWhite:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23ffffff"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>');
    --shareIconGreen:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%233b8c90"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>');
    --checkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000000"><path d="M382-253.85 168.62-467.23 211.38-510 382-339.38 748.62-706l42.76 42.77L382-253.85Z"/></svg>');
    --checkIconWhite:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23ffffff"><path d="M382-253.85 168.62-467.23 211.38-510 382-339.38 748.62-706l42.76 42.77L382-253.85Z"/></svg>');
}

html,body{
    background-color: var(--colorPrimaryBlue);
    background: var(--gradientPrimary);
    width: 100vw;
    height: 100vh;
}
.mainIframe, .panoContainer, .mapContainer {
    background-color: var(--colorPrimaryBlue) !important;
    background: var(--gradientPrimary);
}
.startScreenLoader {
    background-color: transparent;
}
.blindsScreenNext, .blindsScreenPrev{
    background: var(--gradientPrimary);
    opacity: 0.7;
}
input, textarea {
    font-size:1rem;
    font-family: var(--fontRegular);
}

.buttonPrimary,
.buttonSecondary {
    background-color: var(--colorPrimaryBlue);
}

.buttonSecondary {
    color: white;
    border-radius: 1em 3em 3em 3em;
    background: var(--buttonGradient);
    background-size: 200% 100%;
    background-position: left;
}

.buttonWhite {
    color: var(--colorPrimaryBlue);
    background: none;
    background-color: var(--colorWhite);
    border-color: var(--colorPrimaryBlue)
}

body.hasHover .buttonWhite:hover {
    background-color: var(--colorPrimaryGreen);
    border-color: var(--colorPrimaryGreen);
}

body.hasHover .buttonPrimary:hover {
    background-color: var(--colorPrimaryGreen);
}

body.hasHover .buttonSecondary:hover {
    background-position: right;
}

/* Buttons */


h1,
.h1 {
    font-family: var(--fontHeader);
    font-weight: 100;
    font-size: max(4vh, 14px);
    font-size: 4vh;
    color: var(--colorPrimaryBlue);
}

h2,
.h2 {
    font-family: var(--fontHeader);
    color: var(--colorText);
    font-weight: normal;
    font-size: 2vh;
    text-transform: uppercase;
}

h3,
.h3 {
    font-family: var(--fontHeader);
    color: var(--colorPrimaryBlue);
    text-transform: uppercase;
    margin: 0;
    font-size: 1rem;
}

h4,
.h4 {
    color: var(--colorText);
    font-weight: bold;
    /* font-size: min(16px, 2vh); */
    font-size: 1rem;
    text-transform: uppercase;
}




.slideTitleItem {
    letter-spacing: 0.05em;
    font-weight: bold;
}

.slideNumber {
    color: var(--colorBeige);
}

.leftSide {
    overflow-x: hidden;
    color: var(--colorText);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.leftSide hr {
    background-color: var(--colorPrimaryBlue);
}

.bottomMenu {
    font-size: 0.8em;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-around;
}

.bottomMenu>div>div:first-child {
    text-transform: uppercase;
}

.startPageLogo {
    margin-bottom: 4vh;
}

.startPageLogo img {
    width: 15vh;
}

.menuTop {
    height: 200px;
}

.mainMenu {
    height: calc(100vh - 100px - 200px);
    top: 200px;
    background: linear-gradient(-30deg, var(--colorPrimaryGreen) 20%, var(--colorPrimaryBlue) 100%);
}

header {
    background: linear-gradient(-90deg, var(--colorPrimaryGreen) 20%, var(--colorPrimaryBlue) 100%);
}

footer {
    background: linear-gradient(-90deg, var(--colorPrimaryGreen) 00%, var(--colorPrimaryBlue) 50%);
}

.topMenuLogo {
    height: 130px;
}

.headerProjectTitle {
    user-select: none;
}

/* Icons */
.icon__replay,
.icon__mail {
    display: inline-block;
    width: min(1.7rem, 1.5vw);
    height: min(1.7rem, 1.5vw);
    margin: -2rem 0.5rem -2rem -1rem;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.icon__replay {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23FFFFFF"><path d="M480-100q-70.77 0-132.61-26.77-61.85-26.77-107.85-72.77-46-46-72.77-107.85Q140-369.23 140-440h60q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-10.62l63.54 63.54-42.15 43.38-136.92-137.3 137.69-137.31 42.15 43.38L469.38-780H480q70.77 0 132.61 26.77 61.85 26.77 107.85 72.77 46 46 72.77 107.85Q820-510.77 820-440q0 70.77-26.77 132.61-26.77 61.85-72.77 107.85-46 46-107.85 72.77Q550.77-100 480-100Z"/></svg>');
    transition: transform 0.5s cubic-bezier(.67, .01, .36, .96);
}

.icon__mail {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23FFFFFF"><path d="M172.31-180Q142-180 121-201q-21-21-21-51.31v-455.38Q100-738 121-759q21-21 51.31-21h615.38Q818-780 839-759q21 21 21 51.31v455.38Q860-222 839-201q-21 21-51.31 21H172.31ZM480-457.69 160-662.31v410q0 5.39 3.46 8.85t8.85 3.46h615.38q5.39 0 8.85-3.46t3.46-8.85v-410L480-457.69Zm0-62.31 313.85-200h-627.7L480-520ZM160-662.31V-720v467.69q0 5.39 3.46 8.85t8.85 3.46H160v-422.31Z"/></svg>');
    transition: transform 0.3s cubic-bezier(0.5, -2, 0.5, 2);
}

body.hasHover .buttonSecondary:hover .icon__replay {
    transform: rotate(-360deg);
}

body.hasHover .buttonSecondary:hover .icon__mail {
    transform: scale(120%);
}

/* Icons */







/* Form */
.modalWindow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    pointer-events: all;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.modalWindow>div {
    background-color: var(--colorWhite);
}

.mailForm {
    width: min(100%, 500px) !important;
    max-height: 95%;
    overflow-y: auto;
}

.modalWindow .mailForm {
    padding: 2.5em;
    border-radius: 0.5em 2em 2em 2em;
    border-radius: 0.5vh 2vh 2vh 2vh;
    
}

.buttonFormClose {
    display: none;
}

.modalWindow .buttonFormClose {
    display: block;
}

form>div {
    margin: 1em 0;
}

form input:read-only {
    color: var(--colorPrimaryBlue);
}

form>div {
    display: flex;
    align-items: center;
}

form>div>* {
    position: relative;
}

form sup {
    color: var(--colorRed);
    vertical-align: super;
}

form label {
    color: #808080;
    display: inline-block;
    width: 6em;
    flex: auto 1 1;
}

form>div>textarea,
form>div>input {
    width: 100%;
    border-radius: 0.5em;
    border: solid 1px silver;
    padding: 0.6em;
    transition: all 0.3s ease;
}

form>div>textarea {
    height: 6em;
    font-family: var(--fontRegular);
}

body.hasHover form>div>textarea:hover,
body.hasHover form>div>input:hover {
    border-color: var(--colorText);
}

form>button {
    margin: 1em auto 0 auto;
    display: block !important;
}

.buttonBlock {
    pointer-events: none;
    opacity: 0.5;
}

.buttonBlock .icon__mail {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 50 50"><defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="white" stop-opacity="1" /><stop offset="100%" stop-color="white" stop-opacity="0" /></linearGradient></defs><g transform="translate(25, 25)"><!-- 12 лепестков с постепенным затуханием --><g><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="1"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(30)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.083s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(60)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.166s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(90)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.25s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(120)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.333s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(150)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.416s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(180)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.5s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(210)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.583s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(240)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.666s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(270)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.75s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(300)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.833s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(330)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.916s" /></circle></g></g></svg>');
}

.resultMessage.success {
    color: var(--colorPrimaryGreen);
    display: block;
}

.resultMessage.fail {
    color: var(--colorRed);
    display: block;
}

.resultMessage {
    font-size: 0.9em;
    text-align: center;
    display: none;
    font-weight: 500;
}

.checkboxLine input {
    width: auto;
    flex: auto 0 0;
}
.checkboxLine input[type="checkbox"]{
    margin-right: 0.3em;
}

.checkboxLine {
    font-size: 0.7em !important;
}

form .buttonsLine {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin-top: 2em;
}

/* Form */



/* Popup */



/* popup-iframe || html */
.fancybox__slide.has-html .fancybox__content,
.fancybox__slide.has-iframe .fancybox__content {
    width: 100% !important;
    height: 100% !important;
}

.fancybox__slide.has-iframe,
.fancybox__slide.has-html,
.fancybox__slide.has-iframe .fancybox__content,
.fancybox__slide.has-html .fancybox__content,
.fancybox__slide.has-iframe .fancybox__slide,
.fancybox__slide.has-html .fancybox__slide {
    padding: 0 !important;
}

/* popup-iframe || html */



.fancybox__backdrop {
    background-color: #00000080 !important;
}


.fancybox__content {
    box-shadow: 0 0 30px #00000040;
}

.is-close-btn,
[data-fancybox-close] {
    border: none !important;
    background-color: var(--colorLink) !important;
    top: 5px !important;
    right: 5px !important;
}

[data-fancybox-close] .material-icons {
    color: #fff;
}

.is-close-btn svg {
    color: #fff;
    width: 40% !important;
    height: 40% !important;
}

.is-close-btn::after,
[data-fancybox-close]:hover {
    background-color: var(--colorLinkOverlay) !important;
}

/* Popup */

/* Theme changes */
.slideNumber {
    display: none;
}
.menuContainer{
    background: var(--gradientPrimary); 
}
.bottomMenuName {
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--colorPrimaryBlue) 0%, var(--colorPrimaryGreen) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.menuTop{
    background: transparent;
}
.mainMenu{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
}
.mainMenu>div{
    position: relative;
}
.mainMenu .mainMenuExtra {
    padding: 0 0.5rem 0.5rem 0.5rem;
    color: var(--colorWhite);
    font-size: 0.8em;
    text-align: center;
    width: max-content;
    margin: 0 auto;
}
.mainMenu .mainMenuExtra a{
    color:#fff !important;
}
/* Theme changes */

.projectMessage{
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #00000080;
    color: #fff;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    z-index: 10000;
    display: none;
    pointer-events: none;
}

/* Copy to Clipboard */
.copyToClipboard{
    position: relative;
    display: inline-block;
    font-size: 0.9em;
    padding-left: 1.5em;
    background-image: var(--shareIcon);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    width: auto;
    cursor: pointer;
}
.popup360 .copyToClipboard{
    position: absolute;
    top:1rem;
    right: 5rem;
}
.copyToClipboard.icon__check{
    pointer-events: none;
    background-image: var(--checkIcon);
}
body.hasHover .copyToClipboard:hover{
    color:var(--colorPrimaryBlue);
}
/* Copy to Clipboard */