:root {
    --green   : #2dd291FF;
    --green-75: #2dd291c0;
    --green-50: #2dd29180;
    --green-25: #2dd29140;
    --green-0 : #2dd29100;

    --green-darker-1   : #1daa72FF;
    --green-darker-1-75: #1daa72c0;
    --green-darker-1-50: #1daa7280;
    --green-darker-1-25: #1daa7240;
    --green-darker-1-0 : #1daa7200;

    --green-darker-2   : #1b9464FF;
    --green-darker-2-75: #1b9464c0;
    --green-darker-2-50: #1b946480;
    --green-darker-2-25: #1b946440;
    --green-darker-2-0 : #1b946400;

    --green-darker-3   : #12704aFF;
    --green-darker-3-75: #12704ac0;
    --green-darker-3-50: #12704a80;
    --green-darker-3-25: #12704a40;
    --green-darker-3-0 : #12704a00;

    --green-to-darker-1: linear-gradient(135deg, var(--green), var(--green-darker-1));
    --green-to-darker-2: linear-gradient(135deg, var(--green), var(--green-darker-2));
    --green-to-darker-3: linear-gradient(135deg, var(--green), var(--green-darker-3));
    
    --swiper-theme-color: #e7e7e7;
}

/* @font-face {
    font-family: Futura;
    font-weight: 400 600;
    src        : url('/site/templates/res/font/futura\ medium\ bt.ttf');
}

@font-face {
    font-family: Futura;
    font-weight: 100 300;
    src        : url('/site/templates/res/font/futura\ light\ bt.ttf');
} */

/* body {
    font-family: Futura, Arial, Helvetica, sans-serif;
} */

body {
    font-family: "Noto Sans", sans-serif;
}

:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    box-shadow: var(--accessibility-outline-box-shadow);
}

.content {
    scrollbar-color: var(--green) var(--green-darker-3);
    scrollbar-width: thin;
    background     : linear-gradient(to right, var(--green-25), var(--green-50), var(--green-50), var(--green-25));
    overflow-y     : auto;
}

.services {
    background: rgba(48, 48, 48, 0.70);
}

.textblock:not(.quote) .content {
    border-style       : solid;
    border-width       : 1px;
    border-image-source: url('/site/templates/res/content/pattern_border_image.png');
    border-image-slice : 140 0 139 45;
    border-image-repeat: round;
    border-image-width : 140px 0 139px 45px;
    border-image-outset: 0 0 25px 25px;
    margin-left        : 25px;
    padding            : 0.5em;
}

.services .content {
    background     : none;
    backdrop-filter: none;
}

.content::-webkit-scrollbar {
    width     : 22px;
    background: none;
}

.content::-webkit-scrollbar-track {
    background         : none;
    border-style       : solid;
    border-width       : 1px;
    border-image-source: url('/site/templates/res/scroll_track.png');
    border-image-slice : 100 11 20 11;
    border-image-repeat: repeat;
    border-image-width : 100px 11px 20px 11px;
}

.content::-webkit-scrollbar-thumb {
    background         : none;
    border-style       : solid;
    border-width       : 1px;
    border-image-source: url('/site/templates/res/scroll_thumb.png');
    border-image-slice : 5 0 5 0 fill;
    border-image-repeat: stretch;
    border-image-width : 5px 0 5px 0;
}

.quote .content {
    background     : none;
    backdrop-filter: none;
}

.title {
    background     : linear-gradient(to left, var(--green-0), var(--green), var(--green), var(--green-0));
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 100%;
    height         : 75px;
}

.title h2 {
    color         : white;
    font-size     : 33px;
    text-shadow   : #2c453f50 8px 8px 8px;
    padding       : 0;
    margin        : 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}


.textblock {
    font-size: 14px;
}

.textblock p {
    color         : white;
    letter-spacing: 0.03em;
    margin        : 0 0 1em 0;
}

.textblock h2 {
    font-size                : 1.3em;
    color                    : var(--green);
    letter-spacing           : 0.05em;
    text-shadow              : #2c453fA0 15px 15px 8px;
    background-image         : linear-gradient(to right, var(--green-darker-2-75), var(--green-darker-2-25));
    background-clip          : padding-box;
    background-repeat        : no-repeat;
    padding                  : 0.8em 0.4em;
    padding-right            : 60px;
    margin                   : 6px 0 15px 10px;
    border-bottom-left-radius: 20px;
    border-style             : solid;
    border-width             : 1px;
    border-image-source      : url('/site/templates/res/content/H1_border_shadow.png');
    border-image-slice       : 20 147 58 125;
    border-image-repeat      : repeat;
    border-image-width       : 20px 147px 58px 125px;
    border-image-outset      : 6px 0 30px 10px;
    width                    : 100%;
    box-sizing               : border-box;
}

.textblock h3 {
    font-size     : 1.3em;
    color         : var(--green);
    letter-spacing: 0.2em;
    text-shadow   : #2c453fA0 8px 8px 10px;
    margin-top: 0;
}

/* .textblock h3 {
    font-size     : 1.1em;
    color         : var(--green);
    letter-spacing: 0.2em;
} */

.textblock h4 {
    color              : white;
    font-size          : 1.7em;
    /* font-family        : Futura, Arial, Helvetica, sans-serif; */
    font-family        : Arial, Helvetica, sans-serif;
    font-weight        : lighter;
    position           : relative;
    z-index            : 1;
    background         : linear-gradient(to right, var(--green-0), var(--green-25), var(--green-25), var(--green-0));
    border-style       : solid;
    border-width       : 1px;
    border-image-source: url('/site/templates/res/content/h4_border_image.png');
    border-image-slice : 100% 269 0 25;
    border-image-repeat: repeat;
    border-image-width : 127px 269px 0 25px;
    border-image-outset: 56px 0 0 3px;
    padding            : 1em 0.4em;
    margin             : 0 0 0 3px;
}

.textblock hr {
    opacity            : 0.6;
    border-style       : solid;
    border-width       : 1px;
    border-image-source: url('/site/templates/res/content/hr_border_image.png');
    border-image-slice : 34 165 0 130;
    border-image-repeat: round repeat;
    border-image-width : 34px 165px 0 130px;
    border-image-outset: 0 25px 25px 0;
    padding            : 0;
    padding-bottom     : 9px;
}

.textblock img {
    width     : 100% !important;
    height    : auto !important;
    max-height: 290px;
    object-fit: contain;
    box-sizing: border-box;
}

.textblock.quote img {
    padding         : 10%;
    background-image: url('/site/templates/res/content/img_frame.svg');
    background-size : 100% 100%;
}

.textblock .frame {
    background-color     : #ffffff99;
    background-blend-mode: saturation;
    padding              : 1em;
}

button.tts {
    background: transparent;
    border: none;
}

.tts {
    width              : 56px;
    height             : 37px;
    display            : inline-block;
    background-position: center;
    background-size    : contain;
    background-repeat  : no-repeat;
    cursor             : pointer;
}

.tts.start {
    background-image: url('/site/templates/res/ui/General_Default_Sound_Unmute_V1.png');
}

.tts.start:hover {
    background-image: url('/site/templates/res/ui/General_Hover_Sound_Unmute_V1.png');
    background-size: contain;
}

.tts.start:active {
    background-image: url('/site/templates/res/ui/General_Active_Sound_Unmute_V1.png');
}

.tts.stop {
    background-image: url('/site/templates/res/ui/General_Default_Sound_Mute_V2.png');
}

.tts.stop:hover {
    background-image: url('/site/templates/res/ui/General_Hover_Sound_Mute_V2.png');
    background-size: contain;
}

.tts.stop:active {
    background-image: url('/site/templates/res/ui/General_Active_Sound_Mute_V2.png');
}

.service-list p {
    color    : white;
    cursor   : pointer;
    font-size: 1.3em;
    margin   : 0;
    padding  : 0.4em 1em;
}

.service-list {
    padding-right: 1em;
}

.references p:hover,
.service-list p:hover {
    background: #888d;
}

.references p.selected,
.service-list p.selected {
    background: var(--green-to-darker-1);
}

.references h2,
.service-list h1 {
    background: linear-gradient(to right, var(--green-darker-2-50), var(--green-darker-2-0));
    margin    : 0;
    padding   : 0.6em;
}

.service-info h1 {
    background: var(--green-to-darker-1);
    font-size : 1.3em;
    margin    : 0;
    padding   : 0.6em;
}

.references-background {
    background-size    : cover;
    background-position: center;
    width              : 100%;
    height             : 100%;
}

.references {
    background: #111a;
}

@supports (backdrop-filter: blur(5px)) {
    .references {
        backdrop-filter: blur(5px);
        background     : #1118;
    }
}

.references p {
    padding: 0.4em;
    margin : 0;
}

.references p:hover {
    background: #888d;
}

.references p.selected {
    background: var(--green-to-darker-1);
}

.cta {
    position           : relative;
    cursor             : pointer;
    color              : white;
    background-image   : url('/site/templates/res/ui/Default_CTA_06.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 100% 100%;
    border             : none;
    background-color   : transparent;
    text-transform     : uppercase;
    letter-spacing     : 0.1em;
}

.cta:hover {
    background-image: url('/site/templates/res/ui/Hover_CTA_06.png');
}

.cta.selected,
.cta:active {
    background-image: url('/site/templates/res/ui/Active_CTA_06.png');
}

.cta.cta_room,
/* .cta.cta_contact, */
.cta.cta_external {
    padding-right: 3.5em;
}

.cta_room::after {
    content            : "";
    background-image   : url('/site/templates/res/ui/General_Room_Link.png');
    background-position: center;
    background-size    : 1.5em 1.5em;
    height             : 1.5em;
    width              : 1.5em;
    margin             : 0 1em;
    position           : absolute;
    right              : 0;
}

.cta_contact::after {
    content            : "";
    background-image   : url('/site/templates/res/ui/General_Contact.png');
    background-position: center;
    background-size    : 1.5em 1.5em;
    height             : 1.5em;
    width              : 1.5em;
    margin             : 0 1em;
    position           : absolute;
    right              : 0;
}

.cta.cta_external::after {
    content            : "";
    background-image   : url('/site/templates/res/ui/General_External_Link.png');
    background-position: center;
    background-size    : 1.5em 1.5em;
    height             : 1.5em;
    width              : 1.5em;
    margin             : 0 1em;
    position           : absolute;
    right              : 0;
}

div[data-view-id="2"] .cta_view::after {
    content            : "";
    background-image   : url('/site/templates/res/ui/General_Back.png');
    background-position: center;
    background-size    : 1.5em 1.5em;
    height             : 1.5em;
    width              : 1.5em;
    margin             : 0 1em;
    position           : absolute;
    right              : 0;
}

.cta::before {
    opacity       : 0.2;
    border-radius : 9px;
    box-shadow    : #53af32 0 15px 45px;
    mix-blend-mode: screen;
    content       : " ";

    position: absolute;
    top     : 0;
    right   : 0;
    left    : 0;
    bottom  : 0;
}

.cta_l {
    font-size: 1.5em;
}

.cta_l:focus-visible,
.cta_l:hover {
    outline-color: #ffffff;
}

.cta_s {
    font-size: 1.2em;
    padding  : 0.6em 1.5em;
    margin   : 0.5em;
}

/* MODALS */

.modal h1 {
    color         : #89bba3;
    font-size     : 1.15em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom : 1.5em;
}

.modal h2 {
    color         : #028044;
    font-size     : 1.2em;
    letter-spacing: 0.1em;
}

.modal p {
    color: #666a6c;
}

.modal a {
    color: #028044;
}

.contact-container {
    display              : grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows   : 100%;
    margin               : 0 3em;
    position             : relative;
}

.contact-container>.contact-image {
    width      : 20em;
    border-left: #048244 solid 4px;
    background : linear-gradient(to right, #51b03729, #51b0370d);
}

.contact-container>.contact-text {
    border-image-source: url('/site/templates/res/ui/General_Popup_Background_Right.png');
    border-image-slice : 44 51 fill;
    border-image-width : 44px 51px 44px 0;
    border-image-repeat: stretch;
    border-image-outset: 0 51px 0 0;
    padding            : 0.5em 1.5em;
    font-size          : 1.15em;
}

.contact-container>.contact-image .image {
    width              : 100%;
    height             : 80%;
    margin-top         : 10%;
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;
    transform          : translateX(-3em);
}

.contact-container>.contact-image .image .green-screen {
    position        : absolute;
    top             : 0;
    left            : 0;
    bottom          : 0;
    width           : 3em;
    background-color: rgba(0, 189, 12, 0.4);
}

.add-icon::before {
    content            : "";
    width              : 2em;
    height             : 1.2em;
    margin-right       : 1em;
    display            : inline-block;
    vertical-align     : bottom;
    background-size    : contain;
    background-position: center;
    background-repeat  : no-repeat;
}

.add-icon.tel::before {
    background-image: url('/site/templates/res/ui/Icon_Phone.png');
}

.add-icon.web::before {
    background-image: url('/site/templates/res/ui/Icon_Globe.png');
}

.add-icon.email::before {
    background-image: url('/site/templates/res/ui/Icon_Mail.png');
}

@media screen and (max-height: 480px) {
    .textblock {
        font-size: 11px;
    }
}