* {box-sizing: border-box;}
body::before{content:'';background-image:url('back2.png');width:100%;height:100%;position:fixed;background-size:cover;opacity:.1}

.flower-row{color: white;align-items: center; justify-content: center; background-color: #1e1e1e; border-radius: 8px; padding: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); flex-wrap: wrap;margin-top: 10px;}
.flower-row >div{display: flex; align-items: baseline;border-bottom: 1px dashed;padding: 5px 0;margin: 0 5px;}
.flower-row >div:last-child{border-bottom: 0;}
.flower-row >div>div {font-size: 16px; font-weight: 400;background-color: #313131;padding: 4px;margin: 2px;border-radius: 4px;color:#45d545}
.flower-row >div>div>a{color: #f9c21f;text-decoration: none;}
.flower-name{color: #f9c21f;padding-bottom:10px;}

.close{padding:0;cursor:pointer;background:0 0;border:0;outline:0;-webkit-appearance:none;position:absolute;top:10px;right:15px;color:#fff;text-shadow:2px 2px 10px #000;z-index:100;transition:.2s ease-out}
.close::before{font-size:15px;font-weight:400;content:'✖'}
.close:hover{text-shadow:2px 2px 10px #fff}
#notification-container{display:block;position:fixed;bottom:10px;left:10px;z-index:10000}
#notification-container-backup{display:none}
.notification{display:block;position:relative;padding:15px 15px 15px 60px;overflow:hidden;width:290px;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07);color:#fafafa;transform:translate(-500px,0);animation:show-notification 5s cubic-bezier(.64,.09,.08,1);margin-bottom:5px}
.notification-title{font-size:1.1em;font-weight:700}
.notification-error::before,.notification-info::before,.notification-success::before,.notification-warning::before{font-size:35px;display:block;position:absolute;left:15px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.notification-success{background-color:#90b900}
.notification-success::before{content:'☑'}
.notification-error{background-color:#e85656}
.notification-error::before{content:'⨻'}
.notification-info{background-color:#2dacd1}
.notification-info::before{content:'❉'}
.notification-warning{background-color:#dfb81c}
.notification-warning::before{content:'⚐'}
@keyframes show-notification{
0%{opacity:0;-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}
10%{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0)}
90%{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}
}
.gallery{--s:133px;--g:7px;display:grid;margin:calc(var(--s) + var(--g))}
.gallery>div:first-child::before{background-image:url('1.jpg')}
.gallery>div:nth-child(2)::before{background-image:url('2.jpg')}
.gallery>div:nth-child(3)::before{background-image:url('3.jpg')}
.gallery>div:nth-child(4)::before{background-image:url('4.jpg')}
.gallery>div:nth-child(5)::before{background-image:url('5.jpg')}
.gallery>div:nth-child(6)::before{background-image:url('6.jpg')}
.gallery>div:nth-child(7)::before{background-image:url('7.jpg')}
.gallery>div::before{clip-path:polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0);width:96%;grid-area:1/1;content:'';margin:calc(2% / .866);aspect-ratio:0.866;background-size:contain;display:grid;position:absolute}
.gallery div::after{position:absolute;display:flex;justify-content:center;background:linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.5) 21%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.5) 65%,rgba(0,0,0,0) 100%);color:#f9c21f;padding:calc(var(--s) - 35px) 0;text-shadow:1px 1px 3px #000;width:100%;font-size:16px;}
.window-body{width:100%;height:100%;margin:0 auto;overflow-Y:auto;padding: 25px;}
.window-body p{margin:15px;font-size:14pt}
.window-body>p::first-letter{font-size:45pt;color:#f9c21f;font-weight:700;float:left;margin-right:5px;line-height:1;text-shadow:0 0 5px #000}
.window-body hr{opacity:0}
.gallery>div{background-color:#f9c21f;grid-area:1/1;width:var(--s);aspect-ratio:0.866;background-size:contain;clip-path:polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0);transform:translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));cursor:pointer;filter:grayscale(80%);transition:.2s ease-out}

#getAdditional,#getApp,#getInfo,#getDrafts,#getShemes,#getContacts,#getNews{display:none}
h2{color:#f9c21f;margin:0;}
.window-header{width:100%;height:40px;filter:opacity(50%%);text-align:right}
.window{border: 1px solid black;width:100%;height:100%;position:fixed;backdrop-filter:blur(5px) grayscale(0.7);border-radius:20px;overflow:hidden;top:-1000px;opacity:0;transition:all .5s cubic-bezier(.68,-.55,.265,1.55)}
.openwin{top:0;opacity:1;z-index:1000}
.gallery>div:hover{filter:grayscale(0);z-index:1;position:fixed;--_t:1.2;box-shadow:4px 4px 8px 0 #f9c21f}
.gallery>div:first-child{--_x:calc(-100% - var(--g))}
.gallery>div:nth-child(7){--_x:calc(100% + var(--g))}
.gallery>div:nth-child(3),.gallery>div:nth-child(5){--_y:calc(-75% - .87*var(--g))}
.gallery>div:nth-child(4),.gallery>div:nth-child(6){--_y:calc(75% + .87*var(--g))}
.gallery>div:nth-child(3),.gallery>div:nth-child(4){--_x:calc(-50% - .5*var(--g))}
.gallery>div:nth-child(5),.gallery>div:nth-child(6){--_x:calc(50% + .5*var(--g))}
.gallery>div:first-child::after{content:'РАЗНОЕ'}
.gallery>div:nth-child(2)::after{content:'ПРИЛОЖЕНИЕ'}
.gallery>div:nth-child(3)::after{content:'ЧЕРТЕЖИ'}
.gallery>div:nth-child(4)::after{content:'НОВОСТИ'}
.gallery>div:nth-child(5)::after{content:'ИНСТРУКЦИЯ'}
.gallery>div:nth-child(6)::after{content:'КОНТАКТЫ'}
.gallery>div:nth-child(7)::after{content:'СХЕМЫ'}
body{margin:0;min-height:100vh;display:grid;place-content:center;background:#2b2a33}
footer{position:absolute;bottom:0;text-align:right;color:gray;font-weight:700;width:100%}
footer a{color:gray;text-decoration:none;padding:10px 20px;display:inline-block}
footer a:hover{color:#f9c21f;transition:.2s linear}
.logo{max-width:340px;width:90%;margin:10px auto 10px;display:block}
.loader{position:relative;padding-top:100px;width:40px;margin:auto}
.line{position:relative;width:100%}
.line .square{width:3px;height:3px;background:#f9c21f;position:absolute;opacity:0;animation-iteration-count:infinite;animation-name:progress;animation-duration:3.5s}
.line .square:nth-child(2){animation-delay:240ms}
.line .square:nth-child(3){animation-delay:480ms}
.line .square:nth-child(4){animation-delay:720ms}
.line .square:nth-child(5){animation-delay:960ms}
@keyframes progress{
0%{left:0;opacity:1;animation-timing-function:ease-out}
7%{left:40%;animation-timing-function:linear}
90%{left:65%;opacity:1;animation-timing-function:ease-out}
100%{left:100%;opacity:0}
}
.click{opacity:.8;transform:translate(0,0) scale(3)!important;z-index:100;transition:.2s ease-out;position:fixed}
@media screen and (max-width:600px){
.gallery{--s:120px;--g:7px}
.gallery div::after{font-size:15px;}
}
@media screen and (max-width:400px){
.gallery{--s:110px;--g:7px}
.gallery div::after{font-size:14px;}

}