:root{
    --background-color: /*#fefefe*/ #f9fdfd;
    --background-color-second:#fff;
    --background-color-third:#f8f8ff;
    --background-color-info: #4dd1ff;
    --background-color-dark:#121212;
    --background-color-fields:#e8e8e8;
    --background-error: #f44336;
    --background-success: #1ed760;

    --background-color-interest: oklch(0.64 0.21 245.41);
    --background-color-transport: oklch(0.79 0.18 212.49);
    --background-color-lavanda: oklch(0.97 0.02 313.54);
    --background-color-acid-green: oklch(81.76% 0.2713 136.59);
    --bg-plashka: oklch(0.96 0.01 0);

    --figcaption-shadow: oklch(0.58 0 0 / 0.4);

    --transition-time-default: .3s;
    --transition-easing-default: cubic-bezier(.22,.61,.36,1);

    --padding-modal-vertical: 1rem;
    --padding-modal-horizontal: 1.5rem;

    --padding-fields-vertical: 4px;
    --padding-fields-horizontal: 8px;
    --padding-fields-main: .4rem .8rem;

    --radius: .3em;
    --shadow-btn: rgb(0 0 0 / 2%) 0px 1.02388px 1.32828px 0px, rgb(0 0 0 / 3%) 0px 2.46054px 3.19205px 0px, rgb(0 0 0 / 4%) 0px 4.63297px 6.01034px 0px, rgb(0 0 0 / 4%) 0px 8.26443px 10.7214px 0px, rgb(0 0 0 / 5%) 0px 15.4577px 20.0533px 0px, rgb(0 0 0 / 7%) 0px 37px 48px 0px;
    --shadow-block:
    0px 0.9px 1.3px rgba(0, 0, 0, 0.017),
    0px 2.1px 3.2px rgba(0, 0, 0, 0.024),
    0px 4px 6px rgba(0, 0, 0, 0.03),
    0px 7.1px 10.7px rgba(0, 0, 0, 0.036),
    0px 13.4px 20.1px rgba(0, 0, 0, 0.043),
    0px 32px 48px rgba(0, 0, 0, 0.06);


    --text-always-black: #212121;
    --text-color:#121212;
    --text-color-second:#454346;
    --text-color-label:#726868;
    --text-color-readonly:#7d5c86;

    --color-link: #a122dd;
    --link-active:#9932cc;
    --color-error:#f44336;
    --color-green:#1ed760;

    --font-size-xs: .8rem;
    --font-size-s: .9rem;
    --font-size-m: 1rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 3rem;

    /* SYSTEM */
    --system-font-color-l: 7%;

    --system-bg-color-l: 100%;

    --system-color-fuchsia: 313; /* hsl(313, 100%, 50%);*/
    --system-color-mint: 165; /* hsl(165, 89%, 48%);*/
    --system-color-gold: 69;
    --system-color-error: 338; /* hsl(0, 100%, 63%); */
    --system-color-access: 125;
    --system-color-blueSky: 201;
    --system-color-lavanda: 274;


}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color:#191919;
        --background-color-second:#151515;
        --background-color-third:#252525;
        --background-color-fields:#404040;
        --background-color-info: #471ad0;
        --figcaption-shadow: oklch(0.3 0.14 328.97 / 0.4);
        --bg-plashka: oklch(0.27 0 0);

        --text-color:#ececec;
        --text-color-second:#717171;
        --text-color-label:#b7b7b7;
        --text-color-readonly:#e6a2f7;

        --system-font-color-l: 93%;

        --system-bg-color-l: 0%;
    }
}

@view-transition {navigation:auto;}

/**************************
******* MAIN LAYOUT *******
**************************/

*,*::before,*::after{margin:0;padding:0;border:0;box-sizing:border-box;}
*:focus{outline:none;}
*:focus-visible:not(input){outline:3px solid rgba(195,105,255,.3);outline-offset:3px;}

@font-face {font-family:'InterVariable';font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/fonts/InterVariable.woff2') format('woff2');}
@font-face {font-family:'InterVariable';font-style:italic;font-weight:100 900;font-display:swap;src:url('/static/fonts/InterVariable-Italic.woff2') format('woff2');}

html {scroll-behavior:smooth;}
html,body{
	width:100%;
	height:100%;
	font: 16px/1.7 'InterVariable', system-ui, sans-serif;
	font-weight: 480;
	/* font-feature-settings: 'calt', 'ss03'; */
	letter-spacing: -0.011em;
    /* scrollbar-gutter:stable; */
    font-optical-sizing: auto;
}
body{background-color:var(--background-color);color:var(--text-color);hyphens:auto;text-wrap-style:pretty;/*background-image:repeating-radial-gradient(circle at 80% 170%, #0a71f157, #0a71f157 1%, #0a71f130 22%, #0a71f130 35%, #0a71f105 60%, #0a71f105 100%, #0a71f100 100%, #0a71f100 140%);background-attachment:fixed;*/}/*for bottom menu: display:flex;flex-wrap:wrap;*/
.specEffectSvg {position:absolute;top:0;left:0;width:100%;z-index:-50;}

.header, #topInfo, .footer {width:100%;min-width:240px;margin:0 auto;padding:5vh 4vw;}

.floor { width:100%; padding:5vh 4vw; }
.feeds .floor { padding:5vh 0; }

.floorWithAside { display:flex; justify-content:space-between; gap:2rem; align-items:flex-start; flex-wrap:wrap; }
.floor .floorMain { width:100%; }
.floor .floorAside { width:0; }

.floorWithAside .floorMain { width:65%; }
.floorWithAside .floorAside { width:30%; }

.asideFloat { position:sticky; top:8vh; height:auto !important; font-size:15px;}


/*************************
******* TYPOGRAPHY *******
*************************/

p + p, p + ul, p + ol, p + blockquote { margin-top:1.2rem; }
h1,h2,h3,h4{line-height:1;word-wrap:break-word;overflow-wrap:break-word;text-wrap-style: balance;}
h1{margin-bottom:25px;font-size:var(--font-size-xxl);line-height:.9;font-weight:740;letter-spacing:-0.055em;}
h2 { font-size:var(--font-size-xl); letter-spacing: -.05em; }
h3 { font-size:var(--font-size-l); letter-spacing: -.05em; }
h4 { font-size: 1.25rem; letter-spacing: -.05em; }
p + h1, p + h2, p + h3, p + h4, p + figure, p + .booster, p + .beforeAfter,
ul + figure, ul + h2, ul + h3, ul + h4, ul + p,
ol + figure, ol + h2, ol + h3, ol + h4, ol + p,
.video + h2 { margin-top:1.8rem; }

h2 + p, h3 + p, h4 + p, h2 + table, h3 + table, h2 + ul, h3 + ul, h4 + ul, h2 + ol, h3 + ol, h3 + h4, h4 + ol, h2 + section, h3 + section, h4 + section, h2 + blockquote, h3 + blockquote, h4 + blockquote, h2 + figure, h3 + figure, h4 + figure, h4 + label, h2 + .video, h3 + .video, p + .video, p + section, h2 + h3 { margin-top: 1.3em /*1.2rem*/; }

ol li,ul li{margin:0 0 .6em 35px;font-size:1.0625rem;}
ul:not(.markerWithout,.markerNo,.simpleTimeline) li{list-style-position:outside;list-style-type:"— ";}
li::marker{color:var(--text-color-second);}

.simpleTimeline li {
    position: relative;
    margin: 0;
    padding-left: 1.5em;
    padding-bottom: 1.2em;
    list-style-type: none;
}
.simpleTimeline li::before {
    position: absolute;
    inset: 6px 0;
    display: inline-block;
    content: "";
    width: 1em;
    height: 1em;
    background-color: var(--background-color);
    border: 3px solid var(--background-color-fields);
    border-radius: 50%;
    z-index: 1;
}
.simpleTimeline li::after {
    position: absolute;
    inset: 14px 7px;
    display: inline-block;
    content: "";
    width: 3px;
    min-height: 100%;
    background-color: var(--background-color-fields);
}
.simpleTimeline li:last-child { padding-bottom:0; }
.simpleTimeline li:last-child::after { display:none; }

.fakeTable {display:flex;flex-wrap:wrap;gap:0 1rem;}
table {width:100%;margin-bottom:2rem;border-collapse:collapse;line-height:1.3;}
thead {top:8vh;position:sticky;background-color:var(--background-color);font-weight:600;}
tr {border-bottom:1px solid rgba(0,0,0,.1);}
td { padding:.7em 0;vertical-align:top; }
td + td { padding-left:1.2em;}

blockquote {
    position: relative;
    margin: 0 0 1.2rem;
    padding: 1rem 2rem;
    background: linear-gradient(145deg in oklch, rgb(17 163 233) 0%, rgb(220 57 243) 100%);
    border-radius: calc(var(--radius)* 4);
    color: var(--background-color);
}
blockquote::after {
    position: absolute;
    top: -1.4rem;
    right: -1rem;
    content: "❝";
    font-size: 5rem;
    color: rgba(255,0,168,1);
    text-shadow: var(--shadow-block);
}

.asterisk { position:relative; }
.asterisk::before { position:absolute; content: "* "; color:hsl(var(--system-color-blueSky), 100%,50%);left:-.8em; }

.floorMain p { margin-bottom:1.2rem; }
.capitel{text-transform:uppercase;letter-spacing:1px;}

.detal { font-size:15px; color:oklch(from var(--text-color) l c h / 75%)/*var(--text-color-second)*/; }

/* Links */
a { color:hsl(var(--system-color-lavanda),80%,50%); }
a[href^="#anchor"]{display:inline-block;text-decoration:underline from-font dashed;text-underline-position:under;}
a[href^="tel:"], .rub { white-space:nowrap;}

blockquote a {color:var(--background-color);}

.linkBlack { color:var(--text-color); transition:color .2s ease; }
.linkBlack:hover { color:var(--text-color-second); }

.linkOutline {
    border: 1px solid;
    padding: .7em 1em;
    border-radius: calc(var(--radius)*1.8);
    text-decoration: none;
    font-weight: 700;
    transition: all .2s ease-in;
}
.linkOutline:hover {
    background-color: hsl(var(--system-color-lavanda), 80%, 50%);
    color: hsl(0, 100%, var(--system-bg-color-l));;
}

@property --percentage {
    inherits: false;
    initial-value: 0%;
    syntax: '<percentage>';
  }
.userContent h2 {
    background-image: linear-gradient(115deg, var(--text-color) var(--percentage), #00000000 0%);
	background-clip: text;
	color: transparent;
    animation: fillTextOnView linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
}
@keyframes fillTextOnView {to{--percentage:100%;}}

.userContent p { font-size:1.0625rem;}

.userContent a[target="_blank"]:not(.getTickets,.getCalendar,.getTelegram,.insetBase):after {
    content: '';
    display: inline-block;
    background-image: url(/static/img/icons/external.svg);
    margin-left: .15rem;
    margin-bottom: -.1rem;
    width: .85rem;
    height: .85rem;
}
.userContent img { max-width:100%; height: auto; }
.beforeAfter { margin-bottom:1rem; }
.beforeAfter img {max-width:inherit;height:inherit;}

.listOfPhotos { position:relative; display:flex; gap:1rem; overflow-x:scroll; touch-action:manipulation; height:60vh; margin-bottom:5vh; cursor:e-resize; }
.listOfPhotos img { object-fit:contain; height:100%; max-width:90%; display:inline-block; margin-bottom:0; }

.userPofile {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--text-color-readonly);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    box-shadow: var(--shadow-block);
}
.userTg {
    background-image: url(/static/img/soc/telegram.svg);
    background-size: 1.5rem;
}
.userVk {
    background-image: url(/static/img/soc/vk.svg);
    background-size: 1.8rem;
}


/* descNphoto */
figure { display:block; width:100%; margin-bottom:2rem; color:var(--text-color-second); }
figcaption { font-size:.88rem !important; line-height:1.55; }

.figure, .figureReverse {position:relative; display:flex; flex-wrap:wrap; width:100%; margin-bottom:5vh !important; color:var(--text-color);}
.figureReverse {justify-content:flex-end;}
.figure img, .figureReverse img {max-width:85%;margin-bottom:2em;}
.figure figcaption, .figureReverse figcaption {
	position: absolute; right:0; bottom:0;
	width:60%;
	padding: 1.8em 2em 1em;
	background-color: oklch(from var(--background-color) l c h / 15%);
    backdrop-filter: blur(25px);
	box-shadow: 0px 15px 40px var(--figcaption-shadow);
    border-radius: calc(3*var(--radius));
	opacity: 0;
   transform: translate(0, 20%);
   transition: transform .4s ease-out, opacity .4s ease-out;
}
.figureReverse figcaption {left:0;}
figcaption h2, figcaption h3 { margin-bottom: .6em; font-size: 1.7em; }
figcaption p { margin: 0 0 .6em !important; font-size: 1em !important; }

.animated {
   opacity: 1 !important;
   transform: translate(0,0) !important;
}

/* Forms */
form + form { margin-top: 2rem; }

label { display: inline-block; margin-bottom:.5rem; }

input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="datetime-local"], textarea, select { width: 100%; margin-bottom: 1rem; padding: var(--padding-fields-vertical) var(--padding-fields-horizontal); border-radius: var(--radius); background-color: var(--background-color-fields); font: inherit; color: var(--text-color); }
input[type="datetime-local"] { appearance: auto; }
select { padding: .37rem var(--padding-fields-vertical); }
input:read-only {background-color: #404040; color: var(--text-color-readonly) !important; cursor: default;}

textarea {
    min-height:20vh;
    max-height:60vh;
    margin-bottom:1rem;
    padding: var(--padding-fields-main);
    resize:vertical;
    scrollbar-width:thin;
    scrollbar-color:var(--background-color-second) var(--background-color-fields);
}
button { font: 400 1rem/1 'InterVariable', system-ui, sans-serif; cursor: pointer; }
.feedbackSubmitBtn {
    margin-bottom:.5rem;
    padding:.8em 1em;
    border-radius:var(--radius);
    background-color:var(--link-active);
    box-shadow:0 6px 24px -4px var(--link-active);
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 40%);
}
.feedbackSubmitBtn:active {box-shadow: 0 6px 8px -6px var(--link-active); transition: box-shadow var(--transition-time-default) ease;}

button:disabled {
    background-color: #404040;
    box-shadow: none;
    cursor: default;
    opacity: .5;
}

.inputWithPlaceholder { position: relative; display: block; margin-bottom: 1rem; border-top: .5rem solid transparent; }
.inputWithPlaceholder input {
  border: none;
  appearance: none;
  background-color: var(--background-color-fields);
  padding: .4rem .8rem;
  width: 100%;
  color: var(--text-color);
}
.inputWithPlaceholder .placeholder {
  position: absolute;
  left: .8rem;
  top: .3rem;
  font-size: 1rem;
  color: var(--text-color-label);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition:
    top var(--transition-time-default) ease,
    font-size var(--transition-time-default) ease;
}
.inputWithPlaceholder input:focus + .placeholder, .inputWithPlaceholder input:not(:placeholder-shown) + .placeholder {
  top: -.6rem;
  font-size: .7rem;
  color: var(--text-color-label);
}

/* CHECKs */
.checksGroup { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-bottom: 2rem; }
.check {position: relative;display: inline-block; padding-left:1.5rem; font-size:.9rem;}
.check__input {-webkit-appearance:none;appearance:none;position:absolute;width:auto;padding:0;}
.check__box {position:absolute;top:.15rem;width:1.2rem;height:1.2rem;margin-left:-1.55rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Cpath fill='%23fff' stroke='%23A122DD' stroke-width='2' stroke-miterlimit='10' d='M40.6 24c0 13-3.6 16.6-16.6 16.6-13 0-16.6-3.6-16.6-16.6 0-12.9 2.7-16.6 16.6-16.6 13 0 16.6 3.7 16.6 16.6z'/%3E%3C/svg%3E");font-size:inherit;}
.check__input:checked + .check__box {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' enable-background='new 0 0 48 48'%3E%3Cg stroke-miterlimit='10'%3E%3Cpath fill='%23fff' stroke='%23A122DD' stroke-width='2' d='M40.6 24c0 13-3.6 16.6-16.6 16.6-13 0-16.6-3.6-16.6-16.6 0-12.9 2.7-16.6 16.6-16.6 13 0 16.6 3.7 16.6 16.6z'/%3E%3Cpath stroke='%23444' stroke-width='5' fill='none' d='M15.8 22.2l8.7 7.6 15.3-20.6'/%3E%3C/g%3E%3C/svg%3E");}
.check__input:focus + .check__box {filter:drop-shadow(0 2px 2px rgba(74,9,104,.5));}
.check__input:disabled + .check__box {background-image:url(/static/img/controls/checkbox/offDisabled.svg);}
.check__input:checked:disabled + .check__box {background-image:url(/static/img/controls/checkbox/onDisabled.svg);}

/* details for filters */
/* details {display: contents;} */
details summary {
    display: inline-block;
    position: relative;
    padding: .3rem 2rem .3rem 1rem;
    margin-bottom: 1vh;
    color: #fff;
    background-color: hsl(var(--system-color-lavanda), 100%, 50%);
    background-image: url(/static/img/icons/filter.svg);
    background-position: 98% 9px;
    background-repeat: no-repeat;
    background-size: 25px;
    border-radius: var(--radius);
    box-shadow: 0 .5em 1.2em -.1em hsla(var(--system-color-lavanda), 100%, 35%, .5);
    cursor: pointer;
    list-style: none;
    transition: box-shadow .1s;
}
details summary:hover {box-shadow: 0 0 .2em hsla(var(--system-color-lavanda), 100%, 35%, .5);}

details section {
    margin-bottom: 2vh;
    padding: 1rem;
    background-color: var(--background-color-second);
    box-shadow: var(--shadow-block);
    border-radius: calc(var(--radius)*2);
}
details[open] section {
  animation: detailSlide .3s ease-in-out;
}
.feelters section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}
details section select {
    margin-top: 10px;
    padding: .5rem;
}
details section div {
    display: inline-block;
    margin-right: 1.6rem;
    user-select: none;
}

.feeltersItem {
    width: calc(50% - .5rem);
    margin-right: 0;
    font-size:var(--font-size-s);
}
.feeltersItem label {
    margin: 0;
}

@keyframes detailSlide {
  0%   {opacity:0; transform:translate(0,-10px); }
  100% {opacity:1; transform:translate(0,0);}
}


/* UTILs */
.score {
    display: inline-block;
    margin-left: 6px;
    padding-left: 1.8em;
    background-image: url(/static/img/iconScore.svg);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: 4px 1px;
    color: var(--text-color-second);
}

.editorsChoice,.allowBycicle,.allowKids,.hasParking,.hasWifi,.hasCreditCard,.hasSea,.hasAffordable,.hasCharge,.isRingy,.allowPets,.needAllow{display:inline-block;width:26px;height:26px;margin-right:12px}
.editorsChoice{background-image:url(/static/img/icons/editorsChoice.svg)}
.hasParking{background-image:url(/static/img/icons/hasParking.svg)}
.hasWifi{background-image:url(/static/img/icons/hasWifi.svg)}
.hasCreditCard{background-image:url(/static/img/icons/creditCard.svg)}
.hasAffordable{background-image:url(/static/img/icons/affordable.svg);background-position:-5px 25px;}
.allowBycicle{background-image:url(/static/img/icons/bycicle.svg);background-position-y:-1px;}
.allowKids{background-image:url(/static/img/icons/kids.svg)}
.allowPets{background-image:url(/static/img/icons/pets.svg);background-position-y:3px;}
.hasSea{background-image:url(/static/img/icons/sea.svg)}
.hasCharge{background-image:url(/static/img/icons/hasCharge.svg)}
.isRingy{background-image:url(/static/img/icons/circle.svg);background-position-y:3px;}
.needAllow{background-image:url(/static/img/icons/ticket.svg);background-position-y:center;}


.iconCat, .iconTag {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.2rem 1rem;
    background-color: hsl(var(--system-color-lavanda), 80%, 50%);
    background-repeat: no-repeat;
    background-position: 0.2em center;
    background-size: 32px;
    border-radius: var(--radius);
    color: var(--background-color);
    font-size: 1.15rem;
    text-decoration: none;
}
.iconTag { padding: .3em 1em; font-size: 1rem; }


/* GLYPHS */
.glyphs {
    display: inline;
    margin: 0 .5em;
    padding: .2em .8em;
    background-repeat: no-repeat;
}

.glyphPlane {
    background-image: url(/static/img/glyphs/plane.svg);
}
.glyphTrain {
    padding: .2em .4em .2em .8em;
    background-image: url(/static/img/glyphs/train.svg);
}
.glyphBus {
    background-image: url(/static/img/glyphs/bus.svg);
}
.glyphCar {
    background-image: url(/static/img/glyphs/car.svg);
}
.glyphShip {
    background-image: url(/static/img/glyphs/ship.svg);
}
.glyphRoad {
    background-image: url(/static/img/glyphs/road.svg);
}

/* OPINIONS */

.opinionLike {
    padding-left: 2em;
    background-image: url(/static/img/glyphs/thumbsUp.svg);
    background-repeat: no-repeat;
    background-size: 1.5em;
}
.opinionDislike {
    padding-left: 2em;
    background-image: url(/static/img/glyphs/thumbsDown.svg);
    background-repeat: no-repeat;
    background-position-y: .3em;
    background-size: 1.5em;
}
.opinionInfrastructure {
    padding-left: 2em;
    background-image: url(/static/img/glyphs/store.svg);
    background-repeat: no-repeat;
    background-position-y: .2em;
    background-size: 1.5em;
}
.opinionHousing {
    padding-left: 2em;
    background-image: url(/static/img/glyphs/house.svg);
    background-repeat: no-repeat;
    background-position-y: .2em;
    background-size: 1.5em;
}
.opinionTransport {
    padding-left: 2em;
    background-image: url(/static/img/glyphs/bus.svg);
    background-repeat: no-repeat;
    background-position-y: .2em;
    background-size: 1.5em;
}
.opinionCrown {
    padding-left: 2em;
    background-image: url(/static/img/glyphs/crown.svg);
    background-repeat: no-repeat;
    background-position-y: .1em;
    background-size: 1.5em;
}


/* Videoplayer */
.video {position:relative;width:100%;aspect-ratio:16/9;margin-bottom:2rem;overflow:clip;}
.video__media {position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.video__button {display:none;position:absolute;top:50%;left:50%;width:68px;height:48px;border:none;background-color:transparent;transform:translate(-50%,-50%);outline:none;}
.video__button-shape {fill:#212121;fill-opacity:.8;}
.video__button-icon {fill:#ffffff;}
.video__button:focus {outline:none;}
.video:hover .video__button-shape,.video__button:focus .video__button-shape {fill:var(--color-link);fill-opacity:1;}
.video--enabled {cursor: pointer;}
.video--enabled .video__button {display:block;}

.videoWrapper {margin-bottom:2rem;aspect-ratio:16/9;}
.videoWrapper iframe {width:100%;height:100%;}


/*************************
******* + HEADER *********
*************************/

.header {
    position: fixed;
    z-index:1500;
    display: grid;
    grid-template-columns: min-content 1fr 2fr;
    gap: 2vw;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: hsl(0, 0%, var(--system-bg-color-l), .2);
    backdrop-filter: blur(18px);
    transition:transform .3s .3s;
    place-self:start center;
    word-wrap: break-word;
}
.js_header_hidden {transform:translateY(-100%);}

.logoMain {display:block;width:28px;height:28px;background-image:url(/static/img/logo.svg);transform:scale(1.5) translate(1px, 3px);}
.logoMain:active { transform:scale(1.8); transition:transform .2s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

.header__search { position: relative; display: grid; grid-template-columns: 1fr min-content; width: 100%; }
.header__search input { width: inherit; margin-bottom: 0; border-bottom-right-radius: 0; border-top-right-radius: 0; background-color: var(--background-color-third); }
.header__search button {
    border-bottom-right-radius: var(--radius);
    border-top-right-radius: var(--radius);
    padding: 0 9px;
    background-color: var(--background-color-third);
}
#searchComplete {
    position:absolute; top:32px; right: 0; left:0;
    display:block;
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--background-color-second) var(--background-color-fields);
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    background-color: var(--background-color-fields);
    box-shadow: var(--shadow-btn);
}
#searchComplete::-webkit-scrollbar, textarea::-webkit-scrollbar { width:12px; }

#searchComplete::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track { background:var(--background-color-fields); border-radius: var(--radius); }

#searchComplete::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
    background-color:var(--background-color-second);
    border-radius: 20px;
}

#searchComplete span { display:inline-block; width:100%; padding: var(--padding-fields-vertical) var(--padding-fields-horizontal); font-size:var(--font-size-s); color: var(--text-color) /*#8c8c8c*/; }
#searchComplete span:hover { background-color: var(--background-color-third) /*#f5f5f5*/; transition: background-color var(--transition-time-default) ease; }

.menuList { display: grid; grid-template-columns: 1fr min-content; gap: 2vw; padding-top: 4px; }
.menuList li { display:inline-block;margin:0 1vw 0 0;text-indent:0;font-size:1rem; }
.menuList li:before {content:''}
.menuList a { font-weight: 700; color: var(--text-color); }
.menuList a:hover { color: oklch(from var(--text-color) calc(l + 20%) c h); transition: color var(--transition-time-default) ease; }

.menuBtn { display: none; }


/***************************
******* FIRST SCREEN *******
***************************/

.firstScreen {
    position: relative;
	width: 100%;
    height: 100vh;
    padding: 0;
    clip-path: circle(0%);
    animation: firstScreenUp .5s cubic-bezier(.87,.01,1,.64) forwards;
}
@keyframes firstScreenUp {
    0% { clip-path: circle(0); }
    100% { clip-path: circle(120%); }
}

.firstScreenVideo {
    width: 100%;
    height: 100lvh;
    padding: 0;
    object-fit: cover;
}

.firstScreen header {
    position:absolute;
    bottom: 8vh;
    right: 4vw;
    z-index: 50;
    width: 440px;
    color: #fff;
}
.firstScreen h1 {
    display: inline;
    margin-bottom: 4rem;
    padding: 0 1rem;
    background-color: hsl(var(--system-color-lavanda), 100%, 50%);
    box-shadow: 0 .5em .9em -.45em hsl(var(--system-color-lavanda), 100%, 35%);
    font-size: 3.2rem;
    line-height: 1.1;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    hyphens: none;
}
.firstScreen h1 + p { margin-top: 2rem; }
.firstScreen a {
    display: inline-block;
    margin-bottom: 0.6em;
    background-color: oklch(from var(--background-color) l c h / .8); /*.2*/
    /* backdrop-filter: blur(18px); */
    padding: 0.5rem 1rem;
    border-radius: calc(var(--radius)*6);
    color: var(--text-color);
    font-size:var(--font-size-s);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-btn);
    transition: background-color .2s ease-in;
}
.firstScreen a:hover { background-color: var(--background-color);}



/****************************
******** TOP CONTENT ********
****************************/
#topInfo { display: flex; justify-content:space-between; align-items: stretch; align-content: stretch; padding: 49px 0 0 0; }
#about { width: 50vw; padding: 12vh 4vw 5vh 4vw; will-change:transform; }
#topInfo.fullWidth #about {width:100%;}
#infoImg {position:relative;width:50vw;min-height:100%;order:1;}
#infoImg img {aspect-ratio:16/9;width:100%;min-height:100%;object-fit:cover;}

.screenCard25 {
	display: grid;
	grid-template-columns: 4vw auto 4vw;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	margin-bottom: 2rem;
	position: relative;
	width: 100%;
	min-height: 90vh;
}
.screenCard25 img {
	width: 100%;
    min-height: 90vh;
    object-fit: cover;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    transform: translate(0, 0px); /* animate it! */
}
.screenCard25 header {
	grid-column: 2 / 3;
	grid-row: 4 / -1;
	max-width: clamp(32rem, 50vw + 2rem, 44rem);
	background-color: oklch(from var(--background-color) l c h / 15%);
	backdrop-filter: blur(25px);
	padding: 2rem 3rem;
	border-radius: calc(var(--radius)* 3);
	transform: translate(0px, 2.5em);
	box-shadow: var(--shadow-block);
	line-height: 1.6;
}

/**************************
***** OLD SCREENCARDS *****
**************************/

.screenCard {
    margin-bottom: 2rem;
    padding: 50vh 4vw 0;
    position: relative;
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-position-x: center;
    background-position-y: 50%;
    background-repeat: no-repeat;
}
.screenCard header {
    max-width: clamp(32rem, 50vw + 2rem, 44rem);
    background-color: /*var(--background-color-second)*/ oklch(from var(--background-color) l c h / 15%);
    backdrop-filter: blur(25px);
    padding: 2rem 3rem;
    border-radius: calc(var(--radius)*3);
    transform: translate(0px, 2.5em);
    box-shadow: var(--shadow-block);
    line-height: 1.6;
}
.screenCardType {
    display: inline-block;
    margin-bottom: 3em;
    padding: .55em 1em .45em;
    background-color: hsl(var(--system-color-mint), 100%, 50%);
    border-radius: calc(var(--radius)*1.5);
    box-shadow: 0 .4em 1.4em -.2em hsla(var(--system-color-mint), 100%, 35%,.5);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-always-black);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .1em;
}
.rateWrap{padding-left:.5rem;vertical-align:middle;height:14px;}
.rateStar{stroke-width:1px;stroke:hsl(var(--system-color-fuchsia), 100%, 50%);fill:none;}
.rateStarActive{fill:hsl(var(--system-color-fuchsia), 100%, 50%);}

.flag {
    padding-left: 2.2em;
    background-image: url(/static/img/map/location.svg);
    background-repeat: no-repeat;
    background-size: 1.8em;
    background-position: 0 0;
}
.eventSummary {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 1em;
}
.allowedAge {
    min-width: 30px;
    padding: .2em;
    background-color: oklch(from var(--text-color) l c h / 8%);
    border-radius: 8px;
    text-align: center;
    font-feature-settings: 'calt', 'ss03';
}


/*****************************
********  HERO MAIN *********
*****************************/

.heroRecord, .freeMic, .heroSeasons { display:block; padding:36vh 4vw 10vh 4vw; background-size:cover; background-position:center center; background-attachment:fixed; border-radius: 2em; box-shadow: var(--shadow-btn); text-decoration:none; }
.freeMic { background-image: url(/static/img/bgs/freeMic.jpg); }
.seasonVelvet { background-image: url(/static/img/bgs/velvet.jpg); }
.seasonWinter { background-image: url(/uploads/img/tips/new-year-and-christmas/skies.jpg); }
.seasonSpring { background-image: url(/uploads/img/tips/what-take-to-yalta-in-spring/magnolia.webp); }
.seasonSummer { background-image: url(/uploads/img/tips/yalta-in-3-days/promenade1.webp); }
.topBeaches { background-image: url(/uploads/img/tips/the-best-beaches-of-yalta/plyazhi.webp); }
.howSunbathe { background-image: url(/uploads/img/tips/how-to-sunbathe-on-the-sea/zontiki.webp); }
.freeMic .headline {margin-left: -1.1rem;}
.heroRecord .headline, .heroSeasons .headline {font-size:3em;}
.freeMic p {
    width: 80%;
    margin-top:0;
    padding:1rem;
    background-color: var(--background-color);
    color: var(--text-color);
}
.heroRecord header, .heroSeasons header { width:40vw; color:var(--text-color); }
.heroRecord span, .heroSeasons span {
    display: table;
    padding: .8em;
    background-color: var(--background-color-second);
    font-size:var(--font-size-s);
}


/* MAIN SECTION */
[role="main"] {padding:0;}
.content, #feeds { padding:5vh 4vw; }
.contentWithAside { display: flex; justify-content: space-between; align-items: flex-start; }

aside h3{margin-bottom: 3vh;}

.split { display: flex; flex-wrap: wrap; justify-content: space-between; background-color: var(--background-color-second); font-size: .95rem; }
.split div { width: 50%; padding: 8vh 4vw 7vh; }
.splitImg { display: block; background-size: cover; background-position: center center; }

.kletka {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 2em;
    margin-bottom: 2em;
}

/***********************
******* FEATURES *******
***********************/

.features h3 { margin-bottom: 1rem; }
.featuresList {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1rem;
}
.featuresList p { margin-top: .3rem; }

.featuresManage { margin-bottom: 2rem; }
.featureStorageField {
    display: grid;
    grid-template-columns: 2fr 3fr min-content;
    gap: 1rem;
    font-size: .75rem;
}
.featureStorageField input, .featureStorageField select { height: fit-content; font-size: .75rem; }
.featureStorageField button {
    width: 28px;
    height: 28px;
    background: transparent url(/static/img/manager/iconDelete.svg) center center no-repeat;
    background-size: 24px;
}

/* boosters */
.featureBooster, .featureSeance { margin-bottom: 1rem; }
.featureAddBtn, .featureDelBtn { align-self: center; }
.featureAddBtn {
    margin: 2.2rem 0;
    padding: 0.5rem 0.8rem;
    background-color: transparent;
    border: 1px dashed;
    border-radius: var(--radius);
    color: var(--color-green);
}
.featureDelBtn {
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    color: var(--color-error);
    font-size:var(--font-size-xl);
    font-weight: 600;
}


/********************
******* CARDS *******
********************/

.listOfCards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(17.5rem,100%),1fr));
    grid-auto-flow: dense;
    gap: 2rem;
    margin: 2vh 0 5vh;
    padding-top: 1vh;
}

.card {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    text-decoration: none;
    border-radius: 1rem;
    background-color: var(--background-color-second);
    box-shadow: var(--shadow-btn);
    font-size:var(--font-size-s);
}

.js_hide { display: none !important; }

.related .card:nth-child(3),
.card.size2x2,
.card:nth-child(15n + 7) {
    grid-column: span 2;
    grid-row: span 2;
}

.related .card:nth-child(3) .cardImg,
.card.size2x2 .cardImg,
.card:nth-child(15n + 7) .cardImg {
    height: 50vh;
}

.related .card:nth-child(4),
.card.size2x1,
.card:nth-child(7n + 15) {
    grid-column: span 2;
}
.card.size1x2,
.card:nth-child(12n + 8) {
    grid-row: span 2;
}
.card.size1x2 .cardImg,
.card:nth-child(12n + 8) .cardImg {
    height: 50vh;
}


.cardImgWrap {
    position: relative;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    overflow: clip;
 }
.cardImg {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    transition: filter .2s ease-in;
}

.card:hover .cardImg, .card:focus-within .cardImg { filter: brightness(1.1); }

.cardRightCell {
    position: absolute;
    bottom: 2em;
    right: 1.2em;
    color: #fff;
    font-weight: 300;
}
.cardRightCell svg { fill: #fff; }

.specialWrapTop {
    position: absolute;
    top: 1.8em;
    left: 1.5em;
}
.cardCost {
    padding: .5em 1em;
    background-color: hsl(var(--system-color-mint), 100%, 50%);
    border-radius: var(--radius);
    box-shadow: 0 .4em 1.4em -.2em hsla(var(--system-color-mint), 100%, 35%,.5);
    color: #191919;
    font-weight: 600;
}

.bookmark {
    position: absolute;
    top: 2.3rem;
    right: 2.7rem;
    background-color: transparent;
    cursor: pointer;
}
.bookmark svg { margin-top: -.4rem; width: 2.1em; height: 2.1em; stroke: hsl(var(--system-color-mint), 100%, 50%); filter: drop-shadow(0 8px .4rem  hsla(var(--system-color-mint), 100%, 35%,.4)); }

.specialWrapBottom {
    position: absolute;
    bottom: 1.5em;
    left: 1.5em;
}

.cardParams { position: absolute; bottom: 1rem; left: 1rem; }
.cardParams span, .cardParams object { display: inline-block; padding: 4px 8px; background-color: var(--background-color); box-shadow: 0 2px 12px -3px rgba(0,0,0,.6); font-size: 13px; color: var(--text-color); }

.cardDesc { padding: 1.2em 1.5em 1.5em; flex-basis: 25%; line-height: 1.4; }
.cardDesc h3 { font-size: 22px; letter-spacing: -.05em; }
.cardDesc h3 + p { margin-top: 8px; color: var(--text-color-second); }
.cardDesc time { display: inline-block; margin-bottom: 8px; color: var(--text-color-second); }

.gigTag {
    display: inline-block;
    margin: 0 .45em .5em 0;
    padding: .1em .5em;
    background-color: var(--background-color);
    border: 1px solid var(--background-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-btn);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-color);
}



.headliner {
    background-color: transparent;
    box-shadow: none;
}
.headline {
    display: inline;
    padding: .5rem 1rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: hsl(var(--system-color-mint), 100%, 50%);
    box-shadow: 0 .5em 1.4em -.2em hsla(var(--system-color-mint), 100%, 35%,.5);
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--text-always-black);
    hyphens: none;
}

.headliner.fromR {
    grid-column-start: 4;
}

.bestOf .cardImg {
    height: 200px;
}



.commentsCounter { display: inline-block; margin-left: 8px; padding-left: 18px; background-image: url(/static/img/comment.svg); background-repeat: no-repeat; background-size: 14px; background-position: 0 4px; color: var(--text-color-second); }


.cardAdd { display: grid; place-content: center; padding: 30% 15%; background: repeating-radial-gradient(circle, var(--background-color), var(--background-color) 10px, var(--background-color-second) 10px, var(--background-color-second) 20px); color: var(--color-link); text-align: center; }


/*************************
********* UTILS **********
*************************/

.dropdownNearBtn {
    appearance: none;
    position: relative;
    display: inline-block;
    padding: 0;
    width: fit-content;
    background-color: transparent;
    border: none;
    border-bottom: 1px dashed currentColor;
    font: inherit;
    letter-spacing: inherit;
    color: var(--background-color-interest);
    cursor: pointer;
}
.dropdownNearList {
    position: absolute;
    display: block;
    width: max-content;
    z-index: 10;
}
.dropdownNearListSelector {
    display: block;
    width: fit-content;
    cursor: pointer;
    color: var(--text-color);
    transition: color .3s ease-out;
}
.dropdownNearListSelector:hover {
    color: var(--background-color-interest);
}

.messageInfo, .messageClosed, .messageBook, blockquote {
    display: block;
    width: 100%;
    box-shadow: var(--shadow-block);
    /* font-size: .88rem; */
    font-size: .95em !important;
    line-height: 1.6;
}
.messageInfo {
    padding: 1.1rem 1.5rem 1rem 3.5rem;
    background: url(/static/img/icons/info.svg) no-repeat 7px .4em / 3em, linear-gradient(145deg in oklch, rgb(17 163 233) 0%, rgb(220 57 243) 100%) center center / 100%;
    border-radius: calc(var(--radius)*3);
    opacity: 0;

    color: var(--background-color);

    transform: translate(0, 20%);
    transition: all .5s ease-out;

    /* will-change: transform;
    will-change: opacity; */
}
.messageBook {
    padding: 1.1rem 1.5rem 1rem 3.5rem;
    background: url(/static/img/icons/book.svg) no-repeat 14px 1em / 2.2em, linear-gradient(145deg in oklch, rgb(17 163 233) 0%, rgb(220 57 243) 100%) center center / 100%;
    border-radius: calc(var(--radius)*3);
    opacity: 0;

    color: var(--background-color);

    transform: translate(0, 20%);
    transition: all .5s ease-out;

    will-change: transform;
    will-change: opacity;
}
.messageInfo a, .messageBook a { color: var(--background-color); }

.messageClosed {
    padding: .5em 1em;
    background-color: var(--background-error);
}

.messageCrown {
    display: block;
    margin-top: .8em;
    padding: .5em 1em .5em 2.5em;
    background-color: var(--color-green);
    border-radius: calc(var(--radius)*1.5);
    background-image: url(/static/img/icons/crown.svg);
    background-repeat: no-repeat;
    background-size: 1.4em;
    background-position: .6em .5em;
    font-size:var(--font-size-s);
    line-height: 1.4;
    color: #fff;
}

.messageFocus {
    background-color: var(--bg-plashka);
    padding: 2rem 1.6rem;
    border-radius: 1rem;
    font-size: .95rem;
    font-weight: 550;
}

.insetBase {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.5em;
	align-items: center;
    margin-block: 2.5em;
    color: var(--text-color);
    text-decoration: none;
}
.insetBase img {
	aspect-ratio: 1;
	object-fit: cover;
	clip-path: url(#clipSuperellipse);
    transition: scale .3s;
}
.insetBase h4 {
	display: block;
	width: fit-content;
	padding: .5em;
	background-color: var(--background-color-interest);
	border-radius: .3em;
	box-shadow: var(--shadow-btn);
	color: var(--background-color);
	font-size: .85em;
	font-weight: 600;
}
.insetBase span {
	display: block;
	margin-block: .3em 0;
	margin-inline-start: .2em;
	font-size: 1.7em;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -.05em;
	text-decoration: underline;
}
.insetBase:hover img { scale:1.05; }

.insetPractice {
    margin-block-end: 2em;
    padding-block: 2em 1em;
    padding-inline: 2em;
    background-color: oklch(from var(--text-color) l c h / 0.07);
    border-radius: 1em;

    p, li { font-size: 1rem; }
}

.horizonScrollLineWrap, .horizonScrollLineWrapReverse {
    transform: skewY(-5deg) translateY(-15px);
    display: block;
    position: relative;
    width: 100%;
    height: 5.5rem;
    overflow: hidden;
    background-color: hsl(var(--system-color-blueSky), 100%, 50%);
    color: var(--text-color);
    font-size:3rem;
}
.horizonScrollLineWrapReverse {
    transform: skewY(5deg) translateY(10px);
    background-color: hsl(var(--system-color-mint), 100%, 50%);
}
.horizonScrollLine { display:block; width:max-content; will-change:transform; }
.horizonScrollLine a { color:var(--text-color); }


.contacts { margin-bottom: 2rem; }

.externalWrapper {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 1.2rem;
}
.external {
    padding-block: .5em;
    padding-inline-start: 1.7em;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 1.3em;
    text-decoration: none;
    font-weight: 700;
}
.screenCard .external {color:var(--text-color);}

.phoneNumber {
    padding: .5em 1em .5em 2.1em;
    background-image: url(/static/img/icons/phone.svg);
    background-position: -4px center;
    background-repeat: no-repeat;
    background-size: 2.2em;
    text-decoration: none;
}

.externalYandex {
    /* padding: .5em 1em .5em 2em; */
    background-image: url(/static/img/external/yandex.png);
}
.externalPutevka {
    background-image: url(/static/img/external/putevka.png);
}
.externalSutochno {
    background-image: url(/static/img/external/sutochno.svg);
}
.externalTravelata {
    background-image: url(/static/img/external/travelata.ico);
}
.externalOstrovok {
    background-image: url(/static/img/external/ostrovok.png);
}
.externalBronevik {
    background-image: url(/static/img/external/bronevik.png);
}
.externalTvil {
    background-image: url(/static/img/external/tvil.png);
}
.externalAlean {
    background-image: url(/static/img/external/alean.svg);
}
.externalAvito {
    background-image: url(/static/img/external/avito.ico);
}
.externalTutu {
    background-image: url(/static/img/external/tutu.png);
}
.externalTbank {
    background-image: url(/static/img/external/tbank.png);
}

.map {
    width: 100%;
    height: 45vh;
    padding: 0;
    border-radius: 12px;
    content-visibility: auto;
}
.fullscreen-icon {background-image:url(/static/img/map/fullscreen.png);}

.road {
    /* display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); */
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    width: 100%;
    margin-bottom: 2rem;
    font-size:var(--font-size-s);
}

.roadPed, .roadBus, .roadCar {
    flex: 1 1 31%;
    padding: 2em;
    border-radius: 1rem;
    background-color: var(--background-color-second);
    box-shadow: var(--shadow-btn);
    font-size:var(--font-size-s);
    background-repeat: no-repeat;
    background-position: center center;
}

.roadPed {
    background-image: url(/static/img/icons/pedestrian.svg);
}
.roadBus {
    background-image: url(/static/img/icons/bus.svg);
}
.roadCar {
    background-image: url(/static/img/icons/auto.svg);
}

.bus {
    padding:.2em .3em;
    border-radius:.3em;
    background-color:var(--background-color-transport) /*hsl(var(--system-color-mint), 80%, 50%)*/;
    box-shadow:var(--shadow-btn);
    color:var(--text-always-black);
    font-weight:600;
    cursor: pointer;
}

.avgs, .eventsAtPlace, .routesAtPlace, .tipsAtPlace, .moduleMonths, .feedbackMy, .features {
    margin-bottom: 3rem;
    padding: 2em;
    background-repeat: no-repeat;
    background-size: 20%;
    border: 2px solid var(--background-color-fields); /* #ededed */
    border-radius: calc(var(--radius)*3);
    font-size:var(--font-size-s);
}
.avgs {
    background-image: url(/static/img/icons/wallet.svg);
    background-position:95% 15%;
}
.eventsAtPlace {
    background-image: url(/static/img/icons/horn.svg);
    background-position:95% 1.5em;
}
.routesAtPlace {
    background-image: url(/static/img/icons/route.svg);
    background-position:95% 1.5em;
}
.tipsAtPlace {
    background-image: url(/static/img/icons/tip.svg);
    background-position:95% 1.5em;
}
.interestLead {
    display: inline;
    background-color: var(--background-color-interest);
    padding: 0.4em 0.5em;
    border-radius: var(--radius);
    box-shadow: var(--shadow-block);
    color: var(--background-color-second);
    text-shadow: 0 0 -1px var(--text-color);
    text-transform: uppercase;
    font-size: .85em;
}

.feedbackMy {
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: 1rem;
}
.feedbackMy header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--text-color-second);
    font-weight: 700;
    font-size:var(--font-size-s);
}
.feedbackDeleteBtn {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
    font-size:1.2rem;
    font-weight: 700;
    color: var(--color-error);
}


/* WEATHER */
.weatherWrapper {line-height:1.5;}
.weatherCurrent {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--background-color-fields);
}
.weatherCurrentTemperature {
    font-size: 8rem;
    line-height:.9;
    font-weight:600;
}
.weatherCurrentSummary {font-size:.9rem;}
.weatherHourly {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--background-color-fields);
}
.weatherHourly, .weatherDaily {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
    font-size:var(--font-size-s);
}
.hourlyItem, .dailyItem {
    display: flex;
    flex-direction: column;
}
.hourlyItemTime {
    color:var(--text-color-second);
}
.hourlyItemTemperature {
    margin:.2em 0;
    font-size:2rem;
    line-height:1;
    font-weight:600;
}


/*************************
******* + COMMENTS *******
*************************/

.feeds { width:100%; padding: 5vh 4vw; background-color:var(--background-color-second); }

.feedModeSelector { margin: 0 2vw 2vh 0; display: inline-block; border-radius: 3px; box-shadow: var(--shadow-btn); color: #212121; }
.feedModeSelector button { padding: 8px 12px; font-size: .7rem; }
.feedModeSelector button:first-child { border-radius: 3px 0 0 3px; }
.feedModeSelector button:last-child { border-radius: 0 3px 3px 0; }
.feedModeSelector_selected { font-weight: 700;
    background-color: dodgerblue;
    cursor: default;
    box-shadow: 0 2px 4px rgba(0,0,0,.2) inset; }

.listOfFeedbacks { width: 70%; }
.feed {
	display: flex; justify-content: space-between;
    margin-bottom: 2vh;
    border-radius: 1rem;
    padding: 3vh 2vw .3em;
    font-size: 15px;
    background-color: var(--background-color);
    box-shadow: var(--shadow-block);
}

.feedOrderSelect { margin: 0 2vw 2vh 0;
    font-size: 15px;
    cursor: pointer;
    background-color: #fff;
    display: inline-block; border-radius: 3px; box-shadow: 0 3px 7px -5px rgba(0,0,0,.4); color: #212121; }
.feedOrderSelect span:first-child { border-radius: 3px 0 0 3px; }
.feedOrderSelect span:last-child { border-radius: 0 3px 3px 0; }
.feedOrderSelect span { display: inline-block; padding: 4px 8px; }
.feedOrderSelected { font-weight: 700;
    background-color: dodgerblue;
    cursor: default;
    box-shadow: 0 2px 4px rgba(0,0,0,.2) inset; }

.feedOne { display: flex; justify-content: space-between;
    margin-bottom: 2vh;
    border-radius: var(--radius);
    padding: 3vh 2vw;
    font-size: 16px;
    background-color: var(--background-color);
    box-shadow: 0 12px 27px -28px #4e4e4e; }
.feedContentAbout.author a::after { content: ' (автор)'; }
.feedContent a { font-weight: 700; }

.feeds aside { padding: 0 0 0 4vw; }

#anchorForm { padding-top:3vh; }
.commentHints { color: var(--text-color-second); font-size:15px; }


/*********************
****** ANIMATOR ******
*********************/

.animation_slideFromBottom {
    opacity: 0;
    transform: translate(0, 20%);
    transition: all .4s ease-out;
}

.animated {
    opacity: 1;
    transform: translate(0,0) scale(100%);
}


/* MANAGE CARDS */
.manageCards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    grid-auto-flow: dense;
    margin: 2vh 0 5vh;
    padding-top: 1vh;
}
.manageCards a {
    display: block;
    padding: 5vh 5vw;
    background-color: #212121;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

/* TABS */
.tabWrapper {
    width: 100%;
    margin-bottom: 2em;
}
.tab_titles {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}
.tab_title {
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
}
.tab_title--add { color: var(--color-green); }
.tab_title--active {
    cursor: default;
    font-weight: 800;
}
.tab_content {
    display: none;
}
.tab_content--active {
    display: block;
}


/* EVENTS */
.eventBeforeAfter{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding: 2vh 0;color:var(--text-color-second);font-size:.95rem;}
.eventBeforeAfter a {font-size:1.5rem;line-height:1;}
.eventBeforeAfter span{display:block;max-width:45%}

.eventAtPlace { margin-top:0; padding:0; }


/* COMMENTS */
#feeds { width: 100%; background-color: var(--background-color-second); box-shadow: 0 0px 16px -8px rgba(0,0,0,.2) inset; }
#feeds .content { width: 70%; padding: 0; }
#feeds aside { width: 30%; padding: 0 0 0 4vw; }


/* booster */
.booster { width: 100%; margin-bottom: 2rem; container: booster / inline-size; }
.booster img { max-width: 100%; }

.boosterBasic {
    display: block;
    padding: 1rem 1rem 1rem 4rem;
    background: no-repeat 1rem .6rem / 2rem url(/static/img/soc/telegram.svg), linear-gradient(32deg in oklch, #009aff, #15d3e7);
    line-height: 1;
    border-radius: calc(var(--radius)*1.5);
    box-shadow: var(--shadow-btn);
    color: var(--text-color);
    font-size:var(--font-size-l);
    text-decoration: none;
}

.boosterDonation {
    background: var(--background-color-interest);
    padding: 2em;
    border-radius: calc(var(--radius)* 3);
    color: #fff;
    font-size: .9rem;
}
.boosterDonation a { color: #000; }

@container booster (width < 480px) {
    .boosterBasic {
        padding: 1.5rem 1rem 1.5rem 5.5rem;
        background: no-repeat 0.9rem 0.6rem / 4rem url(/static/img/soc/telegram.svg), linear-gradient(32deg in oklch, #009aff, #15d3e7);
        font-size: 1.1rem;
    }
}


/* VOTES */
.feedVotes { display: grid; grid-template-rows: 32px 32px 32px; margin-left: 3vw; }
.voteUp, .voteDown { width: 48px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 18px; cursor: pointer; transition: .2s ease-in-out all; }
.voteUp { background-image: url(/static/img/soc/like.svg); }
.voteDown { background-image: url(/static/img/soc/dislike.svg); }
.voteCurrent { width: 48px; padding-top: 4px; font-family: monospace; text-align: center; font-weight: 700; color: dimgray; }
.votePositive { color: limegreen; }
.voteNegative { color: var(--color-error); }
.voteMe, .voteUp:hover, .voteDown:hover { background-color: var(--link-active) !important; box-shadow: 0 8px 14px -4px var(--link-active); }


/* TYPOGRAPHY */

.dotCounter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    background-color: hsl(var(--system-color-mint), 100%, 50%);
    border-radius: 50%;
    font-size: .8em;
    vertical-align: middle;
    color: var(--text-always-black);
}

.inaccuracyBtn {
	display: inline-block;
	padding: 4px 0 6px 28px;
	background: transparent url(/static/img/alarm.svg) 0 2px no-repeat;
	color: var(--text-color-second);
    font-size: .95rem;
	cursor: pointer;
}

.getTransport {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}
.promocodeCar {
    display: inline-block;
    width: 20ch;
    padding-top: .4em;
    font-size: .8rem;
    line-height: 1;
    color: var(--text-color-label);
}

.getTaxi, .getCar, .getTelegram, .getDonat, .getTrackBtn {
    border: 0;
    border-radius: calc(var(--radius)*1.5);
    background-repeat: no-repeat;
    font-size: .8rem;
    color: var(--text-always-black);
    text-decoration: none;
    font-weight: 500;
}
.getTaxi {
    padding: .5rem 10px .5rem 42px;
    background-color: gold;
    background-image: url(/static/img/icons/iconTaxi.svg);
    background-size: 20%;
    background-position: 10px center;
    box-shadow: 0 10px 34px -7px rgba(66,61,2,.4);
}
.getCar {
    padding: .5rem 10px .5rem 36px;
    background-color: #009aff;
    background-image: url(/static/img/icons/iconWheel.svg);
    background-size: 1.2rem;
    background-position: 10px center;
    box-shadow: 0 10px 34px -7px rgba(1,52,77,.6);
}
.getTelegram {
    padding: .5rem 10px .5rem 36px;
    background-color: #009aff;
    background-image: url(/static/img/soc/telegram.svg);
    background-size: 1.2rem;
    background-position: 10px center;
    box-shadow: 0 10px 34px -7px rgba(1,52,77,.6);
}
.getTrackBtn {
    padding: .6rem 10px .5rem 36px;
    background-color: var(--background-color-interest);
    background-image: url(/static/img/icons/download.svg);
    background-size: 1.5rem;
    background-position: 10px 6px;
    color: #fff;
    box-shadow: 0 10px 34px -7px rgba(1, 52, 77, .6);
}
.getDonat {
    padding: .5rem 10px .5rem 33px;
    background-color:oklch(0.72 0.23 338.97);
    background-image: url(/static/img/icons/heart.svg);
    background-size: 1.2rem;
    background-position: 10px center;
    box-shadow: 0 10px 34px -7px rgba(1,52,77,.6);
}

.getCalendar {
    display: inline-block;
    padding: .5rem 1rem .5rem 1.6rem;
    background-image: url(/static/img/icons/calendar.svg);
    background-position: -2px center;
    background-repeat: no-repeat;
    background-size: 1.5rem;
    color: var(--text-color);
    font-size:var(--font-size-s);
    text-decoration: none;
}
.getTickets {
    display: inline-block;
    padding: .2rem .6rem .3rem 2.1rem;
    background-color: var(--color-green);
    background-image: url(/static/img/icons/ticket.svg);
    background-repeat: no-repeat;
    background-size: 1.5rem;
    background-position: 6px 0.2em !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-btn);
    white-space: nowrap;
    text-decoration: none;
    font-size:var(--font-size-s);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.getCameras {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--background-color-fields);
    text-decoration: none;
    border-radius: var(--radius);
    color: var(--text-color);
    box-shadow: var(--shadow-btn);
}
.getSound {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--background-color-fields);
    border-radius: var(--radius);
    box-shadow: var(--shadow-btn);
    color: var(--text-color);
    text-decoration: none;
}

.pushkinCard {
    align-self: center;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(/static/img/icons/pushkin.svg);
    background-repeat: no-repeat;
    background-size: 1.4rem;
}


.offerLink { display: inline-block; margin-top: 2vh; padding: 8px 12px; background-color: #121212; color: #fff; text-decoration: none; }

.sourceLink { color: var(--text-color-second); }

.addLink { display: inline-block; padding: 8px 12px; background-color: var(--color-green); color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 700; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }

.goMoreBtn { display: block;
    width: 100%;
    margin-bottom: 2rem;
    padding: 12px;
    background-image: linear-gradient(45deg in oklab, #e511df, transparent);
    background-color: var(--color-link);
    border-radius: var(--radius);
    box-shadow: var(--shadow-btn);
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    cursor: pointer;
}



/*
.passWrap {position:relative;}
.passInput {}
.passVisible { display: none; position: absolute;
    top: 10px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-image: url(/static/img/controls/password/close.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer; }
.passVisible.close {
    background-image: url(/static/img/controls/password/open.svg);
}
*/

/**********************
******** MODAL ********
**********************/

.modal { position: fixed; top:0; width: 100%; height: 100vh; display: grid; place-content: center; padding: 0; background-color:rgba(0,0,0,.7);z-index:100500;font-size:.95rem; opacity: 0; animation: modalShow var(--transition-time-default); animation-fill-mode: forwards; }

.modalForm { position:relative; overflow:clip; width:30vw; background-color: var(--background-color-second); border-radius:1em; box-shadow: 0 8px 40px -8px rgba(0,0,0,.4); }
.modalFormHeader { display:flex; justify-content:space-between; align-items:center; padding: var(--padding-modal-vertical) var(--padding-modal-horizontal); background: var(--background-color-interest); color: #fff; }
.modalFormContent { padding: var(--padding-modal-vertical) var(--padding-modal-horizontal); }
.modalFormFooter { display: flex; flex-wrap: wrap; justify-content: space-between; padding: var(--padding-modal-vertical) var(--padding-modal-horizontal); background-color: var(--background-color-third); }
.modalCloseBtn {
    display: block;
    background-color: transparent;
    color: #fff;
    font-size:var(--font-size-xl);
}

.modalConfirmation {
	margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.modalConfirmAccept, .modalConfirmDecline {
    padding: .6rem .8rem;
    border-radius: var(--radius);
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 40%);
}
.modalConfirmAccept { background-color: var(--background-success); box-shadow: 0 6px 24px -4px var(--background-success); }
.modalConfirmDecline { background-color: var(--background-error); box-shadow: 0 6px 24px -4px var(--background-error); }


/* .freeMic { background-image: url(/static/img/_____/freeMic.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: block;
    padding: 25vh 40vw 7vh 4vw;
    text-decoration: none;
    color: mintcream;
    text-shadow: 0 2px 5px rgba(0,0,0,.3); }
.freeMic h3 { font-size: 13vh; margin-bottom: 18px; } */


#commentForm { display: flex; justify-content:space-between; padding-top: 3vh; }
#commentForm form { width: 70%; }
#commentForm textarea { margin-bottom: 1rem; }
#commentForm button {
    margin-bottom: .5rem;
    padding: .6rem .8rem;
    border-radius: var(--radius);
    background-color: var(--link-active);
    box-shadow: 0 6px 24px -4px var(--link-active);
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 40%);
}
#commentHints { width: 30%; padding-left: 4vw; color: var(--text-color-second); font-size: 15px; }
/* select { margin-bottom: 3vh; }
select, option { width: 100%; padding: 8px 12px; font:inherit; } */

.double { display:flex; justify-content: space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1em;}
.double section { width: 48%; }

.triple {
    display: grid;
    grid-template-columns: 1fr 1fr 2rem;
    gap: 1rem;
}

.space2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1em;
}

/* FILE UPLOADER */
.fotoUploader, .gpxUploader, .avatarUploader { margin-bottom: 2rem; }
.fotoUploaderField, .gpxUploaderField, .avatarUploaderField {
    position: relative;
    display: block;
    width: 100%;
    padding: .5em;
    background-color: var(--background-color-info);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
}
.fotoUploaderInput, .gpxUploaderInput, .avatarUploaderInput {
    position: absolute;
    appearance: none;
    visibility: hidden;
    width: 0;
}

.fotoUploaderList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 1em;
    max-height: 480px;
    overflow-y: scroll;
    border: 3px dashed transparent;
    background-color: var(--background-color-second);
    scrollbar-width: thin;
    scrollbar-color: var(--background-color) var(--background-color-second);
}
.fotoUploaderList::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}
.fotoUploaderList::-webkit-scrollbar-track {
    background: var(--background-color-second);
}
.fotoUploaderList::-webkit-scrollbar-thumb {
    background-color: var(--background-color-fields);
    border-radius: 5px;
    border: 3px solid var(--background-color-second);
}

.fotoListEmpty { width: 100%; padding: 2.5em; text-align: center; }

.fotoListItem {
    position: relative;
    height: 150px;
    flex: 1 1 35%;
    border: 3px solid var(--background-color-second);
    transition: border .2s;
    background-size: cover;
    background-position: center center;
}
.fotoListItem:hover { border: 3px solid var(--background-color-info); }
.fotoListItem img {
    width: 100%;
    height: 100px;
    opacity: 0;
    cursor: grab;
    z-index: -1;
}

.deleteImage, .setFotoLeader {
    margin: 1em 0 1em 1em;
    padding: .2em .5em;
    opacity: 0;
    font-weight: 900;
    background: var(--background-color);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .35s; }

.deleteImage { color: red; }
.fotoListItem:hover .deleteImage { opacity: 1; }

.setFotoLeader { padding: .2em .6em; color: green; }
.fotoListItem:hover .setFotoLeader { opacity: 1; }
.fotoListLeader { background: #27ae60; color: #fff; }

.gpxUploaderList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 1em;
    max-height: 480px;
    border: 3px dashed transparent;
    background-color: var(--background-color-second);
}
.gpxItem {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}
.gpxItem__title {
    font-weight: 700;
}
.gpxItem__delete {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--background-error);
    padding-top: 3px;
    border-radius: 50%;
    line-height: 1;
    text-align: center;
    color: var(--background-color-third);
    cursor: pointer;
}

.avatarPreview {
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}


/* TAGS */
.tagsUse { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 2rem; }
.tagsUse span {
    display: inline-block;
    padding: .4em .8em;
    border: 1px solid var(--background-color-fields);
    border-radius: 4px;
    cursor: pointer;
    font-size: .8rem;
    transition: all .3s;
}
.used, .used:hover { border: 1px solid rgba(0,0,0,.1) !important; color: #aaa; cursor: default !important; }

/* SUGGESTER */
.suggestionFloatWrap { position: relative; }
.suggesterFloat { position: absolute; top: 4.5em; left: 0; width: 100%; box-shadow: var(--shadow-block); background-color: var(--background-color-second); }
.suggesterFloat span { display: block; padding: .5em; color: var(--color-green); cursor: pointer; }

/* COMMANDS */
.iconEdit, .iconDelete { width:1.4rem;height:1.4rem; background-position: 0 center; background-repeat: no-repeat; background-size: 100%; }
.iconDelete {background-image:url(/static/img/manager/iconDelete.svg);}
.iconEdit {background-image:url(/static/img/manager/iconEdit.svg);}

.iconVisible, .iconVisibleHidden {
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
}
.iconVisible {background-image: url(/static/img/manager/iconEyeOpen.svg);}
.iconVisibleHidden {background-image: url(/static/img/manager/iconEyeClose.svg);}


/* ACTIONS */
.responceBubble { position:fixed; left:4vw; animation: responceBubble 5s ease; animation-fill-mode:forwards; }
.responceSuccess, .responceError { display: block; margin-bottom: 1rem; padding: .5em .8em .6em 2.6em; opacity: 1; border-radius: .5em; color: #fff; font-size: 13px; transition: opacity .3s ease-in; background-size: 1.4em !important; }
.responceSuccess { background: var(--background-success) url(/static/img/manager/success.svg) .6em .7em no-repeat; }
.responceError { background: var(--background-error) url(/static/img/manager/error.svg) .6em .7em no-repeat; }
.responceSuccess a, .responceError a { color: #fff; }


/*********************
******* FOOTER *******
*********************/

.footer { display: grid; grid-template-columns: 3fr 3fr min-content; gap: 3vw; }
.footerCopywrite {text-indent:-1.08em;line-height:1.4;}
.footerDeveloper {display:inline-block;width:136px;height:45px;padding-left:72px;background:url(/static/img/axLogo.png) -3px -32px no-repeat;line-height:.8;}
.footerDeveloper a { border: 0; color: #797676; text-decoration: none; text-align: right; font-size: 11px; }


/* STATEMENTs */
.statementSendingBtn {
    background-size: 20px 20px;
    background: repeating-linear-gradient(
    -45deg in oklch,
    var(--link-active),
    var(--link-active) 10px,
    var(--color-link) 10px,
    var(--color-link) 20px);
    animation: barberpole .5s linear infinite;
}
@keyframes barberpole {
    from { background-position: 0 0; }
    to   { background-position: 30px 0px; }
}

.statementSendingForm{animation:sendingForm 1s ease infinite}
.modal_hide {animation: modalHide var(--transition-time-default); animation-fill-mode: forwards; }
@keyframes sendingForm{
    0% {opacity: 1}
    60%{opacity:.7;}
    100%{opacity:1;}
}

@keyframes modalShow { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes modalHide { 0% { opacity:1; } 100% { opacity:0; } }

@keyframes responceBubble {
    0% { bottom: -2vh; opacity: 0; }
    5% { bottom: 2vh; opacity: 1; }
    10% { bottom: 2vh; opacity: 1; }
    90% { bottom: 2vh; opacity: 1; }
    95% { bottom: 2vh; opacity: 1; }
    100% { bottom: -2vh; opacity: 0; }
}

@media (width >= 120rem) {
    .header, .floor, .feeds, .footer { padding-inline:20vw; }
    .firstScreen { padding: 0; }
    .firstScreen header { bottom:15vh; right:20vw; width:600px;}
    .screenCard { padding-left: calc(20vw - 3em); }
    #about {padding-left: 20vw;}

    .figure figcaption, .figureReverse figcaption {width:50%;}

    .listOfCards { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
    section.collectionOfCards.listOfCards.bestOf.related { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
    .cardImg { height: 20vh; }
    .related .card:nth-child(3) .cardImg, .card.size2x2 .cardImg,
    .card:nth-child(15n + 7) .cardImg,
    .card:nth-child(12n + 8) .cardImg { height:40vh; }

    .heroRecord header, .heroSeasons header { width:25vw; }
}
@media (width > 159rem) { .listOfCards { grid-template-columns: repeat(auto-fit,minmax(350px,1fr)); } }
/* @media (min-width: 1440px) and (max-width: 1919px) { */
@media (90rem <= width < 120rem) {
	.header, .floor, .feeds, .footer { padding-inline:12vw; }
    #about {padding-left: 12vw;}
    .firstScreen { padding: 0; }
    .firstScreen header { right:12vw; }
    .screenCard { padding-left: calc(12vw - 3em); }

    .listOfCards { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }

    .responceBubble { left:8vw;}
}

@media (max-width: 1366px) {
    .related .card:nth-child(3) {
        grid-column: span 1;
        grid-row: span 2;
    }

   .modalForm { width: 50vw; }

   .commentForm { flex-wrap: wrap; margin-right: 0; }
}

@media (max-width: 1260px) {
    .headliner.fromR { grid-column-start: 3; }
}
@media (min-width: 1260px) {
    body {background-image:repeating-radial-gradient(circle at 80% 170%, #0a71f157, #0a71f157 1%, #0a71f130 22%, #0a71f130 35%, #0a71f105 60%, #0a71f105 100%, #0a71f100 100%, #0a71f100 140%);background-attachment:fixed;}
    #topInfo.fullWidth #about { width: 60%; }
    .heroRecord header { width: 30vw; }
}

@media (width <= 64rem) {
    /* HEADER */
    .header { grid-template-columns: min-content 1fr min-content; }
    .menuList { display: block; grid-column: span 3; padding-bottom: 1vh; }
    .menuBtn { display: block; /*margin:0; padding:0;*/ width: 28px; height: 32px; background-color: transparent; }
    .menuIcon { stroke: var(--text-color);}
    .menuIcon_humb, .menuBtn_open .menuIcon_cross { display: block; }
    .menuIcon_cross, .menuBtn_open .menuIcon_humb { display: none; }

    .menuList { display: none; }
    .menuList ul { margin: 2vh 0 4vh; }
    .menuList_open { display: block; margin: 4vh 0 0; }
    .menuList_open li { display:inherit; }

    .headliner.fromR { grid-column-start: /*2*/ auto; }

   .modalForm { width: 60vw; }
   .modalSubmitBtn { width: 100%; }

   .related .card:nth-child(3) {
        grid-column: span 1;
        grid-row: span 1;
    }

   .card.size2x2, .card:nth-child(15n + 7) {
        grid-column: span 1;
        grid-row: span 2;
    }

    .related .card:nth-child(4) {
        grid-column: span 1;
    }

    .related .card:nth-child(3) .cardImg {
        height: 20vh;
    }
}

@media (width <= 60rem) {
    #topInfo { flex-wrap: wrap; }
    #about, #infoImg { width: 100%; }
    #infoImg { min-height: 50vh; }

    .firstScreen header {
        position: absolute;
        bottom: 4vh;
        left: 4vw;
        right: initial;
        z-index: 50;
        width: 90%;
        color: #fff;
        font-size:var(--font-size-s);
    }
    .firstScreen h1 { font-size: 2.5rem; }

    .screenCard { padding: 40lvh 4vw 0; }
    .screenCard header { padding: 2em; }
    .screenCardType { margin-bottom: 2em; }
    .bookmark { right: 1.7rem; }

    .floor { flex-wrap: wrap; }
    .floor .floorMain, .floorWithAside .floorMain, .floorWithAside .floorAside { width: 100%; }
	/* .asideFloat { display: none; } */

   .commentForm { display:contents; flex-wrap:wrap; margin-right:0; }
}

@media (width <= 48.125rem) {
    /* bottom header */
    /* .header {place-self:end center;transform:translateY(100%);}
    .js_header_hidden {transform:translateY(0%);} */

    .heroRecord .headline, .heroSeasons .headline { font-size:1.8rem; }

    .figure, .figureReverse {display:block;margin-bottom:2vh !important;}
    .figure img, .figureReverse img, .figure figcaption, .figureReverse figcaption {position:relative;width:100%;max-width:100%;margin:0;padding:.5rem 0;box-shadow:none;background-color:transparent;backdrop-filter:none;}
    figcaption h2, figcaption h3 {font-size: 1.6rem;}

    .eventBeforeAfter span{max-width:100%}

    article, aside, .feeds .content, .feeds aside { width: 100%; }
    aside { padding: 5vh 4vw; }
    .feeds aside { padding: 2vh 0; }

    .weatherHourly, .weatherDaily {
        grid-template-columns: repeat(2, 1fr);
    }

    .split { margin-bottom: 2rem; background-color: transparent; }
    .split div { width: 100%; }
    .splitImg { display: none; }
    #commentHints { width: 100%; padding: 0; }

    .tab_titles { gap: 0 1rem; margin-bottom: 2rem; }
    .tab_title {
        padding: 0;
    }
    .tab_title--add { order: -1; }

    .tab_content { padding: 0; }

    .modal {place-content:inherit;}
    .modalForm { width:100%; border-radius:0; }
}

@media (width <= 41.25rem) {
    .related .card:nth-child(3) .cardImg, .card.size2x2 .cardImg, .card:nth-child(15n + 7) .cardImg, .card.size1x2 .cardImg, .card:nth-child(12n + 8) .cardImg { height:30vh; }

    .related .card:nth-child(4), .card.size2x1, .card:nth-child(7n + 15) {grid-column:auto;}
    .card.size1x2 .cardImg {height: 200px;}

    .heroRecord header, .heroSeasons header { width: 85%; }

    .double section { width:100%; }

    .feed { padding: 3vh 2vw .3em 1em; }

    .footer { display: block; }
    .footer div + div { margin-top: 18px; }
}

@media (width <= 30rem) {

    #infoImg { min-height: 40vh; }
	#about { padding-top: 20px; }

	h1 { margin-left:0; font-size: 40px; }

	.userContent h2 { font-size: 28px; }
    figcaption h2, figcaption h3 {font-size:var(--font-size-l) !important;}

    .content { padding: 0 4vw; }
    .formVis form { width: 100%; }

    table, thead, tbody { display: block; width: 100%; }
    tr {
        display: block;
        margin-bottom: 1rem;
        background-color: var(--background-color-second);
        padding: 1rem;
        box-shadow: var(--shadow-block);
        border-radius: calc(var(--radius)*3);
        border: none;
    }
    td, td + td { display: block; padding: 0;  }
    td + td { margin-top: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
@media print{body{display:none !important;}}