/* 
Bootstrap breakpoints 
---------------------
Extra small	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px
*/

:root {
	/* Bootstrap override */
	--bs-body-font-size: 1.15rem;
	--bs-body-line-height: 1.5rem;
	--bs-form-control-bg: rgb(var(--content-bg));	
	--primary: rgb(var(--color1));
	--secondary: rgb(var(--color2));
}

:active, :focus, .btn { outline: 0 !important; box-shadow: 0 0 0 0 !important}

h1, .h1, h2, .h2, h3, .h3 {font-weight:400}
h1, .h1 {font-size:1.75rem; line-height:1.75rem; color:rgb(var(--color1)) }
h2, .h2 {font-size:1.5rem; line-height:1.5rem; color:rgb(var(--color1-ui)) }
h3, .h3 {font-size:1.25rem; line-height:1.25rem; }

a { color:rgb(var(--links)); text-underline-offset: 4px }
a:hover { color:rgb(var(--font-color)) }
a.no-link { opacity:.5 }
a.no-line { text-decoration:none }
a.no-line:hover { border-bottom:2px dashed }

b, strong {font-weight:500;}
.small {line-height:1rem}

li {margin-bottom:.5rem}

.col-12 p:last-child { margin-bottom:0}


body { background-color:rgb(var(--body-bg)); background: url('/assets/img/bg.webp') center / cover no-repeat fixed; }
.container {background-color:rgb(var(--content-bg));}
    @media (min-width: 1200px) {
        .container {max-width:1200px;}
    }

header { border-radius: .5rem .5rem 0 0; display:flex; flex-direction: row; justify-content:space-between; align-items: center;}
header .logo { flex-basis:30%; text-align:left}
header .logo-m { text-align:center}
header .logo img { aspect-ratio:4.7;  }
header .logo-m img { aspect-ratio:0.85; max-height:220px }
header .title { font-size:1.25rem; margin-bottom:0.5rem; padding:0 1.5rem;}
header .social {flex-basis:25%}
header .social a {margin:0 .35rem}
header .contacts { flex-basis:20%; font-size:1.25rem; text-align: right;} 
header .contacts a {text-decoration:none;}

    @media (max-width: 768px) {
        header {border-radius:0; padding:.5rem 0; flex-direction: column; justify-content:center;}
		header div {text-align:center}
		header .title {order:-1; font-size:1.1rem; line-height:1.25rem}
		header .logo {width:100%}
		div, p {  font-size:1.15rem; line-height:1.35rem}
		h2 { font-size: 1.35rem; line-height:1.35rem}
    }
	@media (max-width: 992px) {
	    header {flex-wrap: wrap}
        header .title {order:-1; flex-basis:100%; font-size: 1.1rem; text-align:center;}
        header .logo {flex-basis:40%}
		header .contacts {flex-basis:50%}
    }
	@media (max-width: 1200px) {
		header .logo {flex-basis:40%}
        header .contacts {flex-basis:30%}
    }

footer { border-radius: 0 0 .5rem .5rem}
    footer.container { background-color:rgb(var(--color1)); color:rgb(var(--font-color-inv)); text-align:center;}
    footer.container a { color:var(--base-main);}
    @media (max-width: 768px) {
        footer {border-radius:0}
    }

	
.img-top {background-color:rgba(var(--color2-ui), .5); overflow:hidden; width:100% }
.img-top img {aspect-ratio:3}
    @media (max-width: 576px) { .img-top img {aspect-ratio:1.125} }

.frame {border: 2px dashed rgb(var(--color1-ui)); padding:.75rem 1rem; border-radius: .5rem;}
.focused {padding:1rem; border-radius: .5rem; background-color:rgba(var(--color1), .15)}
    @media (max-width: 768px) {
		.focused {padding:1rem; border-radius: 0; margin:1.5rem -1.5rem !important}
	}

.invalid {font-size:.9rem; line-height:1rem; color: #c00} /* Ошибки в формах */

.breadcrumbs { background-color:rgb(var(--content-bg)) }
.breadcrumb { margin:0; padding:.5rem 1.5rem; background-color:rgba(var(--color1), .1)}
	@media (max-width: 992px) { .breadcrumb {padding:.5rem 1rem;} }
.breadcrumb a {text-decoration:none }
.breadcrumb li {opacity:.75 }
.breadcrumbs .separ {width:16px; height:16px; position:relative; margin:0 .5rem;}
.breadcrumbs i, .breadcrumbs i::after {position:absolute; width:9px; height:2px; background: rgba(var(--color1), .75); content: ""}
.breadcrumbs i {transform: rotate(45deg); top:8px; left:5px}
.breadcrumbs i::after {transform: rotate(-90deg); left:5px; top:4px;}



.left {background-color:var(--secondary)}
.menu-left {top:70px; list-style:none; padding:1rem 0; z-index:900;}
.menu-left a {text-decoration:none; color:var(--bs-body-color)}
.menu-left li {line-height:1.1rem; padding:0.5rem 0.5rem} 
.menu-left li:hover {background-color:#c0dae2;}
.-menu-left li:hover a {color:white}
	
.menu-left .active {font-weight:bold; text-decoration:none; color:var(--bs-body-color)}


.creator a { text-decoration:none }


/* Главная навигация на главной */
.main-parts h2 { line-height:1.35rem}
.main-parts a { text-decoration: none }


/* Новости */

.news-img { background-size:cover; background-position:center; width:100%; height:100px; border-radius:.5rem }
.news-no-img { background-color: #eee; width:100%; height:100px; border-radius:.5rem; text-align:center; padding:1rem;
		display: flex; flex-direction: column; justify-content:center }
	.news-no-img .h1 { font-weight: bold }
    @media (max-width: 576px) { 
	.news-img { min-height: 240px }
	.news-no-img { min-height: 160px }
	.news-no-img .h1 { font-size: 2.75rem; padding-bottom:.25rem }
	}

/* Списки файлов */

.file-list { list-style:none }
.file-list li { line-height: 1.1rem; margin-bottom: .5rem }
.file-list a { text-decoration: none } .file-list a:hover { border-bottom: 2px dashed }
.ico { width:24px; height:24px;margin-left: -24px }    
.file-list .date { display: inline-block; white-space:nowrap; font-size: 1rem; opacity:.5}
.file-list .date::before { content:'| '}