/* 
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:2rem; line-height:2rem; 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 }

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

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


body { background-color:rgb(var(--body-bg)) }
.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:35%; text-align:left}
header .logo img { aspect-ratio:4.2; max-height:70px }
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}
    }
	@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:.75} }

.frame {border: 2px dashed rgb(var(--color1-ui)); padding:.75rem 1rem; border-radius: .5rem;}
.focused {padding:.75rem 1rem; border-radius: .5rem; background-color:rgba(var(--color2), .25)}

.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;}