@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

@font-face {
    font-family: 'Gilroy';
    src: url('/design/images/fonts/Gilroy-ExtraBold.eot');
    src: local('Gilroy ExtraBold'), local('Gilroy-ExtraBold'),
        url('/design/images/fonts/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('/design/images/fonts/Gilroy-ExtraBold.woff') format('woff'),
        url('/design/images/fonts/Gilroy-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: 'Roboto Condensed';
}

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --bs-body-font-family: 'Roboto Condensed', sans-serif;
    --bs-body-font-size: 18px;
    --bs-body-color: #333;
}

/* Цвета ссылок сайта: приоритет выше :root из Bootstrap, даже при загрузке перед ним. */
html:root {
    --bs-link-color: rgba(87, 152, 181, 1);
    --bs-link-color-rgb: 87, 152, 181;
    --bs-link-hover-color: rgba(184, 72, 72, 1);
    --bs-link-hover-color-rgb: 184, 72, 72;
}

a {
    text-decoration: underline;
}

a:hover {
    color: rgba(184, 72, 72, 1);
}


.h1,h1 {
    font-family: 'Gilroy', sans-serif;}

.h2,.h3,.h4,.h5,.h6,h2,h3,h4,h5,h6 {
     font-family: 'Manrope', sans-serif;
}

.wid {
    margin: 0 16px;
}

@media screen and (min-width: 830px) {
    .wid {
        width: 800px;
        margin: 0 auto;
    }
}
.fansy-window {
    max-width: 750px;
    display: none;
    padding: 15px;
}


.admin {
    font-size: 12px;
    margin-left: 20px;
}

/* colors */
/* =========================================
   BACKGROUND COLORS
   ========================================= */

.bg-gray        { --block-bg: #f5f5f5; }
.bg-gray2       { --block-bg: #e8e8e8; }
.bg-yellow      { --block-bg: #ffeeb1; }
.bg-yellow2     { --block-bg: #f3cf4f; }
.bg-red         { --block-bg: #f2c7c7; }
.bg-reddark     { --block-bg: #d37171; --block-color: #fff; }
.bg-violet      { --block-bg: #dcd8fa; }
.bg-violetdark  { --block-bg: #8881b0; --block-color: #fff; }
.bg-violetdark2 { --block-bg: #5d3db0; --block-color: #fff; }
.bg-green       { --block-bg: #def6db; }
.bg-greendark   { --block-bg: #558b4e; --block-color: #fff; }
.bg-greendark2  { --block-bg: #5f8d59; --block-color: #fff; }
.bg-blue        { --block-bg: #c8e3f8; }
.bg-bluedark    { --block-bg: #85b5db; --block-color: #fff; }
.bg-bluedark2   { --block-bg: #4b84c9; --block-color: #fff; }
.bg-orange      { --block-bg: #f58026; --block-color: #fff; }
.bg-orangedark  { --block-bg: #ff983c; --block-color: #fff; }
.bg-magentadark { --block-bg: #b85fb3; --block-color: #fff; }
.bg-black       { --block-bg: #000; --block-color: #fff; }
.bg-white       { --block-bg: #fff; --block-color: #333; }

/* Общие правила для цветных блоков */

:is(
    .bg-gray, .bg-gray2,
    .bg-yellow, .bg-yellow2,
    .bg-red, .bg-reddark,
    .bg-violet, .bg-violetdark, .bg-violetdark2,
    .bg-green, .bg-greendark, .bg-greendark2,
    .bg-blue, .bg-bluedark, .bg-bluedark2,
    .bg-orange, .bg-orangedark,
    .bg-magentadark, .bg-black, .bg-white
) {
    background-color: var(--block-bg);
    color: var(--block-color, #000);

    --bs-heading-color: var(--block-color, #000);
    --bs-link-color-rgb: var(--block-link-rgb, 0, 0, 0);
    --bs-link-hover-color-rgb: var(--block-link-rgb, 0, 0, 0);
}

/* Цвет ссылок и заголовков */

:is(
    .bg-gray, .bg-gray2,
    .bg-yellow, .bg-yellow2,
    .bg-red, .bg-reddark,
    .bg-violet, .bg-violetdark, .bg-violetdark2,
    .bg-green, .bg-greendark, .bg-greendark2,
    .bg-blue, .bg-bluedark, .bg-bluedark2,
    .bg-orange, .bg-orangedark,
    .bg-magentadark, .bg-black, .bg-white
) :is(a, a:hover) {
    color: var(--block-color, #000);
}

/* Темные блоки */

:is(
    .bg-reddark,
    .bg-violetdark, .bg-violetdark2,
    .bg-greendark, .bg-greendark2,
    .bg-bluedark, .bg-bluedark2,
    .bg-orange, .bg-orangedark,
    .bg-magentadark, .bg-black
) {
    --block-link-rgb: 255, 255, 255;
}


/* =========================================
   TEXT COLORS
   ========================================= */

.text-gray         { color: #898989 !important; }
.text-greendark    { color: #558b4e !important; }
.text-greendark2   { color: #00a651 !important; }
.text-bluedark2    { color: #4b84c9 !important; }
.text-blue         { color: #00aeef !important; }
.text_bluedark     { color: #85b5db !important; }
.text_magentadark  { color: #b85fb3 !important; }
.text_magentadark2 { color: #9c298d !important; }
.text_orangedark   { color: #ff983c !important; }
.text_reddark      { color: #d37171 !important; }
.text-black        { color: #000 !important; }
.text-yellow       { color: #fffb60 !important; }

/* .text-white уже есть в Bootstrap 5 */


/* =========================================
   PAGINATION — BOOTSTRAP 5
   ========================================= */

.pagination {
    --bs-pagination-color: #4ca517;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #89b583;

    --bs-pagination-hover-color: #333;
    --bs-pagination-hover-bg: #def6db;
    --bs-pagination-hover-border-color: #89b583;

    --bs-pagination-focus-color: #333;
    --bs-pagination-focus-bg: #def6db;

    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #4ca517;
    --bs-pagination-active-border-color: #89b583;
}

/* email рассылки */
.btnmail {margin:24px 0; text-align:center}
.btnmail a {display: inline-block; text-decoration:none; padding:6px 12px; border-radius:6px; }
.plashka {
    /*width: 95%;*/
    margin: 16px auto;
    padding: 18px 24px;
    border-radius: 8px ;
    font-size:90%;    
    /*padding: 10px 20px;*/
    /*border-radius: 10px;*/
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.plashka .p:nth-child(1),
.plashka p:nth-child(1),
.plashka h2:nth-child(1),
.plashka h3:nth-child(1),
.plashka h4:nth-child(1),
.plashka h5:nth-child(1) 
{
    margin-top: 0;
    padding-top: 0;
    margin-block-start: 0;
    margin-inline-start: 0;

}


.plashka .p:nth-last-child(1),
.plashka p:nth-last-child(1),
.plashka h2:nth-last-child(1),
.plashka h3:nth-last-child(1),
.plashka h4:nth-last-child(1),
.plashka h5:nth-last-child(1) 
{
    margin-bottom:  0;
    padding-bottom: 0;
    margin-block-end: 0;
    margin-inline-end: 0;  
}


/* Исходные стили topSite@standart из a22.css, без изменений. */

.top-26 {
    background-size: cover;
    position: relative;
    background-position: center;
        height:45vw;
        max-height:500px;    
}

.top-26  h1,
.top-26 h2,
.top-26 h3,
.top-26 h4 {
    color: #fff;
    line-height: 100%;
    text-shadow: 1px 1px 1px #000;
    font-family: 'Gilroy', sans-serif;
    padding: 0;
}

.top-26  h1 {
    font-size: 50px;
    margin: 16px 0;
}

.top-26  h2 {
    font-size: 28px;
}

.top-26 h3 {
    font-size: 24px;
}

.top-26  h4 {
    font-size: 20px;
}


@media screen and (max-width: 600px) {
.top-26 {
        height: 60vh;
    }

    .top-26 h1 {
        font-size: 34px;
    }

    .top-26 h2 {
        font-size: 26px;
    }

    .top-26 h3 {
        font-size: 20px;
    }

    .top-26 h4 {
        font-size: 18px;
        margin: 0;
    }

    .top-26 .head {
        bottom: 10px;
    }

}

.top-26 .center { text-align: center; }