@import "vendor/front/css/typo.css";
@import "vendor/simple-css-styles/src/nav/bar.css";
@import "vendor/simple-css-styles/src/nav/feed.css";
@import "vendor/simple-css-styles/src/card/card.css";
@import "vendor/simple-css-styles/src/header/breadcrumbs.css";

/*@import "vendor/simple-css-styles/src/grid.css";*/
@import "vendor/simple-css-styles/src/layout.css";
@import "vendor/simple-css-styles/src/form/form.css";

@import "vendor/simple-css-styles/src/overlay/overlay.css";

@import "https://unpkg.com/prismjs@1.29.0/themes/prism.css";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif&display=swap');

:root{
    --bg:white;
    --bg-soft:#161b22;
    --bg-card:white;
    --border:#2d333b;
    --text:#e6edf3;
    --text-dim:#9da7b3;
    --accent:rgb(88, 166, 255);
    --accent-2:rgb(63, 185, 80);
    --accent-3:#d29922;
    --radius:12px;
    --max:1100px;
}

body {
    font-size: 18px; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.5;
    font-weight: 400;
    font-family: "Noto Sans", sans-serif;
    color: #222; }

@media (max-width: 1040px) {
    html, body {
        font-size: 16px;
    }
}


h1, h2, h3, h4 {
    font-weight: 300;
    font-size: 2em;
    padding: 0.2em;
    margin: 0.2em -0.2em 0.2em;
    /*background: #FAF46A;*/
    font-family: "Noto Serif", serif;
}

h2, h3, h4 {
    font-size: 2em;
}
h3, h4 {
    font-size: 1.5em;
}
.article h2, .article h3 {
    font-size: 1.25em;
    line-height: 1.75em;
    border-bottom: 1px solid #eee;
    margin-top: 2em;
}

.article h2 {
    text-transform: uppercase;
}

.article h4 {
    font-size: 1em;
    line-height: 1.5;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

a {
    /*background-color: #FAF46A;*/
    color: #222;
}

p {
    line-height: 1.5;
}

/** тянем центальную часть, чтобы подвал не висел в воздухе */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main, body > .page-header + .container {
    flex-grow: 1;
}

body > header, body > .section-header {
    padding: 1em 0;
}
body > header {
    border-bottom: 1px solid #eee;
}
body > header a, body > header ul.nav > li > a, body > .section-header ul.nav > li > a {
}

body > header ul.nav > li.active > a, body > .section-header ul.nav > li.active > a,
body > header ul.nav > li > a:hover, body > .section-header ul.nav > li > a:hover {
    color: var(--accent);
}

body > header .container, footer .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.page-header {
    position:relative;
}

.page-header .breadcrumbs {
    padding: 1rem 0 0 0;
}

.page-header h1 {
    margin: 0;
    padding: 1em 0;
}
.page-header .breadcrumbs + h1 {
    padding: 0.5rem 0 1rem 0;
}

.logo, .copyright, header .social, header .social a {
    display: inline-block;
}

body > header .social a {
    margin-right: 0.4em;
}

body > header .social a:last-child {
    margin-right: 0;
}

/* Larger than mobile */
@media (min-width: 550px) {
    .copyright {
        display: inline;
    }
}
.danger {
    color: #E25E5B;
}
.section {
    clear: both;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.container img, .container table {
    max-width: 100%;
}
.image-style-side {
    width: auto;
    max-width: 50%;
    float: right;
    margin: 0 0 0.4em 0.4em;
}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
    background-color: #74BADE;
}

.row > .columns > img + span:after, .row > .columns > img + a:after {
    content: ' ';
    display: block;
    height: 0.4em;
}

body > footer {
    padding: 1em 0;
}

body > footer a {
}

pre {
    max-width: 100%;
    white-space: pre;
    overflow: auto;
    background: #eee;
    margin-bottom: 1rem;
}

blockquote {
    position: relative;
    background: #eee;
    padding: 1em 1em 1em 3em;
    margin-left: 0;
    margin-right: 0;
}

blockquote:before {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 25px;
    height: 25px;
    content: open-quote;
    quotes: "“" "”";
    font-size: 75px;
    line-height: 1;
}

.card-body > .table {
    width: 100%;
}

figure.table {
    overflow-x: scroll;
}

.form-group .form-control.image-control {
    height: auto;
}

.control-panel {
    text-align: center;
}

.tiles > * {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

@media (max-width: 687px) {
    .tiles > * {
        flex-direction: column-reverse;
    }
}


.top-text {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 687px) {
    .top-text {
        flex-direction: column;
    }
}

.top-text > .message {
    max-width: 800px;
}

.top-text > .me {
    min-width: 200px;
}

.top-text > .me > img {
    border-radius: 1rem;
}



.container{width:1248px;}
.limited.container,body.limited-containers .container{width:992px;}
html{font-size:24px;}
.tiles > *, .tile{min-width:400px;width:400px;}
@media (max-width: 1295px){.container,.limited.container,body.limited-containers .container{width:992px;}html{font-size:16px;}.tiles > *, .tile{min-width:320px;width:320px;}
}
@media (max-width: 1023px){.container,.limited.container,body.limited-containers .container{width:824px;}html{font-size:24px;}.tiles > *, .tile{min-width:400px;width:400px;}
}
@media (max-width: 871px){.container,.limited.container,body.limited-containers .container{width:656px;}html{font-size:16px;}.tiles > *, .tile{min-width:320px;width:320px;}
}
@media (max-width: 687px){.container,.limited.container,body.limited-containers .container{width:400px;}html{font-size:24px;}.tiles > *, .tile{min-width:400px;width:400px;}
}
@media (max-width: 447px){.container,.limited.container,body.limited-containers .container{width:320px;}html{font-size:16px;}.tiles > *, .tile{min-width:320px;width:320px;}
}
@media (max-width: 1023px) {
    .desktop {display: none !important;}
    .mobile-fluid.container {width: 100%;}
    .with-sidebar {flex-direction: column;}
}

@media (min-width: 1024px) {
    .mobile {display: none !important;}
}

@media (max-width: 687px) {
    .boxes {flex-direction: column;}
}



/* ---------- CASE CARD ---------- */
.case{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-left:3px solid var(--accent);
    border-radius:var(--radius);
    padding:26px 28px;
    margin-bottom:18px;
    transition:border-color .15s ease, transform .15s ease;
}
.case:hover{border-left-color:var(--accent-2);transform:translateX(4px)}

.case h3 a{color:var(--text)}
.case h3 a:hover{color:var(--accent);text-decoration:none}

.case p:last-child{margin-bottom:0}
.case .who{
    font-size:14px;color:var(--text-dim);
    padding-top:14px;border-top:1px dashed var(--border);
}
.case .who b{color:var(--accent-2);font-weight:600}

.case-num{
    display:inline-block;
    font-size:12px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent);
    margin-bottom:10px;
}

.buttons {
    justify-content: flex-start;
}

.btn-primary {
    border: 1px solid #eee;
    background: rgb(88, 166, 255, 0.2);
}

.btn-primary:hover {
}

.contacts.section {
    padding: 3rem 0;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
}

.clean.section .card.covered > figure:after {
    background: none;
}

.clean.section .card.covered figure + .card-body > * {
    color: inherit;
    background-color: rgba(255,255,255,.6);
}