:root {
    --size-275: clamp(14rem, calc(11.92rem + 6.49vw), 27.5rem);
    --size-200: clamp(1rem, calc(-1.92rem + 9.13vw), 20rem);
    --size-180: clamp(9rem, calc(7.62rem + 4.33vw), 18rem);
    --size-20: clamp(1rem, calc(0.85rem + 0.48vw), 2rem);
}

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=auto');
@font-face {
    font-family: 'KabelC';
    src: url('fonts/KabelC-Ultra.eot');
    src: url('fonts/KabelC-Ultra.eot?#iefix') format('embedded-opentype'),
        url('fonts/KabelC-Ultra.woff2') format('woff2'),
        url('fonts/KabelC-Ultra.woff') format('woff'),
        url('fonts/KabelC-Ultra.ttf') format('truetype'),
        url('fonts/KabelC-Ultra.svg#KabelC-Ultra') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: auto; }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; }
html { font-size: 10px; }
body { 
    font-family: Rubik; 
    font-size: clamp(1.4rem, calc(0.8rem + 0.98vw), 1.8rem); 
    color: black; }
input, textarea, label { 
    outline: none;
    border: none;
    font-family: Rubik;
    font-size: clamp(1.4rem, calc(0.8rem + 0.98vw), 1.8rem); 
    color: black; }
a {
    text-decoration: underline;
    color: #0066cc; }

.nwr { white-space: nowrap; }

.mmenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.66em;
    padding: 0 4.1em;
    z-index: 1000;
    background-color: #304370;
    font-family: KabelC;
    display: flex;
    justify-content: center;    
    align-items: center; 
    font-size: clamp(1.4rem, calc(0.8rem + 0.98vw), 2.4rem); }
.mmenu .mlogoTXT {
    display: none;
    color: white;
    font-weight: bold;
    font-size: 2.2em;
    line-height: 1;
    -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.72);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.72); }
.mmenu .mlogo { height: 2.66em; }
.mmenu .mlogo img { 
    width: 16.6em;
    padding-top: 1.22em; }
.mmenu .mstar { 
    width: 0.91em ;
    vertical-align: middle; }
.mmenu .mlink {
    margin: 0 1em;
    color: #f0e1a0;
    text-decoration: none; }
.mmenu .mbtn {
    display: none;
    text-decoration: none !important; }

.mblock {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    justify-content: end;    
    align-items: center;
    background-position: center bottom;
    background-size: cover; }
.pmain { background-image: url(img/bg_page_main.png); }
.pinfo { background-image: url(img/bg_page_info.png); }
.pnews { background-image: url(img/bg_page_news.png); }
.pcontacts { background-image: url(img/bg_page_contacts.png); }

.downloads {
    position: absolute;
    bottom: var(--size-275);
    left: var(--size-200);
    white-space: nowrap;
    font-size: 0; }
.downloads a { text-decoration: none !important; }
.downloads a img { width: var(--size-180); }

h1.ttl {
    font-family: KabelC;
    color: white;
    font-weight: bold;
    font-size: clamp(4.4rem, 7vw, 7.2rem);
    -webkit-text-stroke: 2px black;
    text-shadow: 0 4px 0 black; }
.rblock h1.ttl {
    position: absolute;
    top: -1.5em;
    left: 0; 
    white-space: nowrap; }

.rblock {
    position: relative;
    width: 65%;    
    max-width: 1200px;
    min-height: 680px;
    padding: clamp(2.5 * 0.9rem, 2.6 * calc(0.8rem + 0.98vw), 2.77 * 1.8rem);
    margin: 11em 7% 7em 0;
    overflow-wrap: break-word;    
    font-weight: normal;
    color: black;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px; }
.pnews .rblock {
    background-image: url('img/char_aquarium.png');
    background-repeat: no-repeat;
    background-size: 40% auto;
    background-position: 640px 50%; }
.rblock h3.ttl {
    margin-bottom: 0.7em;
    font-family: Rubik;
    font-weight: bold;
    font-size: 1.66em; 
    color: #333333; }
.rblock .tdate {
    font-size: clamp(1.4rem, calc(0.8rem + 0.98vw), 1.8rem);
    font-weight: normal;
    white-space: nowrap;
    color: #666666; }
.rblock p { padding: 10px 0; }

.rblock .pgn {
    position: absolute;
    bottom: calc(-1 * clamp(4em, calc(5 * (0.8rem + 0.98vw)), 5em));;
    left: 0;
    right: 0; }    
.pgn {
    display: flex;
    justify-content: center;    
    align-items: center;    
    color: #f0e1a0;
    font-size: 1.33em;
    font-weight: bold; }
.pgn .arrow img { 
    height: clamp(3em, calc(4 * (0.8rem + 0.98vw)), 4em); 
    vertical-align: top;}
.pgn .item { 
    padding: 0 0.1em;
    margin: 0 0.3em; }
.pgn .arrow { 
    margin: 0;
    padding: 0; }
.pgn a { color: #f0e1a0; }
.pgn a.cur { text-decoration: none !important; }

.iswiper {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;   
    align-items: center; }
.iswiper .content { text-align: center; }
.iswiper .content img {     
    width: 95%;
    max-width: 900px;
    vertical-align: bottom; }
.iswiper a.arrow {
    height: 100%;   
    text-decoration: none !important; }
.iswiper a.arrow img { height: clamp(3em, calc(4 * (0.8rem + 0.98vw)), 4em); }
.swpoints {
    margin-top: 1em;
    display: flex;
    justify-content: center;   
    align-items: center; }
.swpoints a {
    display: inline-block;
    width: clamp(1rem, calc(0.8rem + 0.98vw), 2rem);
    height: clamp(1rem, calc(0.8rem + 0.98vw), 2rem);
    margin: 0 clamp(0.2rem, calc(0.1rem + 0.98vw), 1.8rem);
    text-decoration: none !important;
    background-image: url('img/ico_point_blue.png');
    background-repeat: no-repeat;
    background-size: 100%; }
.swpoints a.curr { background-image: url('img/ico_point_white.png'); }

.fcontacts {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: start;    
    align-items: center; }
.fcontacts .mail { margin-right: 2.77em; }
.communities {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;    
    align-items: center; }
.communities a { margin: 0.5em 2em 1.5em 0; }
.pcontacts .twoblocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;    
    align-items: flex-start; }
.pcontacts .twoblocks .tblock { width: 50%; }

.pcontacts input[type="text"], .pcontacts textarea {
    width: 100%;
    margin-bottom: 1em;
    padding: 0.6em;
    border-radius: 5px; 
    background: white; }
.pcontacts .check {
    display: block;
    margin-bottom: 1em; 
    color: #333333; }
.pcontacts input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    vertical-align: top; 
    border-radius: 5px;
    background: white; }
.pcontacts input[type="submit"] {
    height: 3em;
    min-width: 6.66em;
    font-family: KabelC;
    color: white;
    font-weight: bold;
    font-size: 1.33em;
    -webkit-text-stroke: 1.6px rgba(0, 0, 0, 0.72);
    background-color: transparent;    
    background-image: url('img/btn_blue.png');
    background-repeat: no-repeat;
    background-size: cover; }

.mla { margin-left: auto; }
.mra { margin-right: auto; }
.mb20 { margin-bottom: 20px; }
.mr20 { margin-right: var(--size-20); }

.ico24 {
    width: 1.33em;
    height: 1.33em;
    vertical-align: bottom; }
.ico100 {
    width: 5.55em;
    height: 5.55em;
    vertical-align: bottom; }

@media (max-width: 1400px) {
.mmenu {padding: 0 2em; }
.mmenu .mstar { display: none; }
}

@media (max-width: 1200px) {
.pnews .rblock { background-image: none; }
.pcontacts .twoblocks .tblock { width: 100%; }
.mmenu .mlink { margin: 0 0.6em; } 
.mmenu .mlogo img { 
    width: 14em;
    padding-top: 0.8em; }
}

@media (max-width: 960px) {
.mblock { justify-content: center; }
.rblock { 
    width: 80%;
    margin-right: 0; }
}

@media (max-width: 700px) {
.mmenu .mlogoTXT { display: inline; }
.mmenu .mbtn { display: inline; }
.mmenu .mlogo { display: none; }
.mmenu .mlink { display: none; }
.mmenu {padding: 0 1em; }
.downloads {
    left: 50%;
    transform: translateX(-50%); }
}

@media (max-width: 640px) {
.communities a { margin: 0.2em 1.4em 1.2em 0; }
.ico100 {
    width: 4.55em;
    height: 4.55em; }
}

@media (max-width: 365px) {
.mmenu .mlogoTXT { font-size: 1.8em; }
}

.pgn .cur {
    color: red; /* Подсветка текущего номера */
}
.hidden {
    display: none; /* Скрытие новостей */
}

.iswiper {
    display: flex;
    align-items: center;
}
.content img {
    max-width: 100%;
    height: auto;
}
.swpoints a {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
}
.curr {
    background-color: red; /* Цвет для текущей точки */
}