:root{
    --color-black: #1b1c1d;
    --color-black-sel: #37393a;
    --color-green: #008055;
    --color-main: #0168cf;
    --color-back-ground: rgba(1, 104, 207, 0.15);
    --color-back-error: rgba(207, 8, 1, 0.15);
    --color-shadow: #aaa;
}

@font-face {
    font-family:Icons;
    src:url(./fonts/icons.eot);
    src:url(./fonts/icons.eot?#iefix) format("embedded-opentype"),
    url(./fonts/icons.woff2) format("woff2"),
    url(./fonts/icons.woff) format("woff"),
    url(./fonts/icons.ttf) format("truetype");
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-decoration:inherit;
    text-transform:none
}

@font-face {font-family: 'Roboto'; font-style: normal; font-weight: normal; src: local('Roboto'), url(./fonts/Roboto-Regular.ttf);}
@font-face {font-family: 'Roboto'; font-style: italic; font-weight: normal; src: local('Roboto'), url(./fonts/Roboto-Italic.ttf);}
@font-face {font-family: 'Roboto'; font-style: normal; font-weight: bold; src: local('Roboto'), url(./fonts/Roboto-Bold.ttf);}
@font-face {font-family: 'Roboto'; font-style: italic; font-weight: bold; src: local('Roboto'), url(./fonts/Roboto-BoldItalic.ttf);}

*{padding: 0; margin: 0; box-sizing: border-box;}
body{
    min-height: 100vh; 
    color: var(--color-black); 
    font-family: Roboto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
a, button, [onclick], menu *{cursor: pointer;}
a{text-decoration: none; color: var(--color-black);}
h3{margin-bottom: 20px;}
em{color: red;}
li{margin-left: 30px;}

input, select, option, textarea{
    border: 1px solid var(--color-main);
    border-radius: 5px;
    padding: 10px 15px;
}

button{
    color: #fff;
    border-radius: 4px;
    border: none;
    padding: 8px 16px;
    min-width: 39px;
    background-color: var(--color-black);
    transition: background-color 0.5s;
    box-shadow: 3px 3px 7px var(--color-black);
}
button.white{
    color: var(--color-black);
    background-color: white;
}
button:hover{background-color: var(--color-black-sel);}
button.icon{
    background: none;
    border: none;
    color: black;
}
img.icon{
    height: 48px; 
    width: auto; 
    -webkit-filter: drop-shadow(0 0 30px white);
    filter: drop-shadow(0 0 30px white);
}

.icon{font-family: Icons; }
.icon.big{font-size: 2em;}
.icon.left::before{content: "\f053";}
.icon.right::before{content: "\f054";}
.icon.phone::before{content: "\f095";}
.icon.mail::before{content: "\f0e0";}
.icon.email::before{content: "\f1fa";}
.icon.address::before{content: "\f2bb";}
.icon.bank::before{content: "\f19c";}
.icon.mob::before{content: "\f0c9";}
.icon.user::before{content: "\f007";}
.icon.download::before{content: "\f019";}
.icon.user.in{color: var(--color-green);}

.high{font-weight: 600; color: var(--color-main);}
.high.big{font-size: 1.2em;}

/** МЕНЮ */
mx-panel.top{
    position: fixed;
    top: 0; left: 0; right: 0;
    justify-content: space-between;
    z-index: 4;
}
footer, mx-panel.top:not(.main){
    backdrop-filter: blur(9px);
}
mx-panel.top:not(.main){
    background-color: rgba(240, 240, 240, 0.7);
    box-shadow: 0 0 7px var(--color-black);
}
mx-panel.top > img{height: 48px; width: auto;}
span.mob{display: none;}
.menu span{
    font-size: 1.2em;
    color: var(--color-black);
    border-bottom: rgba(0,0,0,0) solid 2px;
    padding: 5px 15px;
    display: block;
}
.menu span.selected{
    color: var(--color-green);
    border-bottom: 2px solid var(--color-green);
}
.menu span:hover{
    color: var(--color-main);
    border-bottom: 2px solid var(--color-main);
}
.img-top{
    position: relative;
    width: 100vw;
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
}
.img-top:not(.main){
    background-position-y: 50%;
    background-position-x: center;
}
.img-top.main{
    background-position: bottom;
}
.img-top > span{
    position: absolute;
    bottom: 50px;
    background-color: var(--color-back-ground);
    padding: 15px 80px;
    color: white;
    text-shadow: 0 0 15px var(--color-black);
    width: 100%;
    backdrop-filter: blur(9px);
    border-top: 4px solid var(--color-black-sel);
    border-bottom: 2px solid var(--color-black-sel);
}
/** МЕНЮ END */

content{
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    gap: 80px;
    display: flex; flex-direction: column;
}
.caption-top{text-align: center; width: 100%; padding: 0 15%;} 
table{
    max-width: inherit;
    border-collapse: collapse;
    table-layout: auto;
}
table:not(.no-bord) td, table:not(.no-bord) th{border: 1px solid var(--color-main);}
td, th {
    padding: 7px;
    width: 1%;
}
table.up td{align-content: baseline;}
table.down td{align-content: end;}
th{background-color: rgba(1,104,207,0.3);}

mx-panel.info{
    box-shadow: 0 0 70px var(--color-shadow);
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    
}
/*mx-panel.info > div.img {
    background-position-y: 50%;
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
}*/
mx-panel.info .text{padding: 20px; text-shadow: 0 0 8px var(--color-shadow);}

.comment{
    font-size: 0.9em;
}

footer{
    width: 100%;
    padding: 25px 50px;
    background-color: var(--color-back-ground);
    border-top: 4px solid var(--color-black);
}

.img-cover {
    background-size: cover;
    background-position: 50%;
    background-position-x: center;
    background-repeat: no-repeat;
}
.img-w100{
    background-size: 100% auto;
    background-position: 50%;
    background-position-x: center;
    background-repeat: no-repeat;
}

.dialog{
    display: none;
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: var(--color-back-ground);
    backdrop-filter: blur(30px);
    z-index: 100;
    overflow: auto;
}
.dialog.error{background-color: var(--color-back-error);}
.dialog input{width: 100%;}
.dialog td{font-weight: bold;}


@media screen and ((orientation: landscape) or (min-width: 961px)) {
    content{padding: 40px;}
    .img-top > span{
        padding: 15px 80px;
        font-size: 2em;
    }
    mx-panel.top{padding: 20px 40px !important;}
    mx-panel.info:nth-child(even){flex-direction: row-reverse;}
    mx-panel.info:nth-child(odd) .text{text-align: right;}
    mx-panel.info{
        width: 75%;
        min-height: 300px;
        justify-content: space-between;
    }
    mx-panel.info > * {width: calc(50% - 20px);}
    .dialog td{white-space: nowrap;}
    mx-panel.adapt{gap: 80px;}
    mx-panel.adapt:not(.inner){padding: 50px;}
}
@media screen and ((orientation: portrait) or (max-width: 960px)) {
    content{padding: 40px 20px; max-width: 95vw;}
    .img-top > span{padding: 10px 20px;}
    .menu{display: none;}
    span.mob{display: block;}
    .menu.mob{
        padding: 40px;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background-color: white;
        z-index: 10;
    }
    body:has(.menu.mob){
        overflow: hidden;
    }
    mx-panel.info{width: 95%;}
    mx-panel.info{flex-direction: column;}
    mx-panel.info > div.img-cover, mx-panel.info > div.img-w100, mx-panel.info > mx-swipe {
        width: 100%;
        height: 250px;
    }
    mx-panel:has(> .info){padding: 0 !important;}
    mx-panel.adapt{gap: 20px;}
    mx-panel.adapt:not(.inner){padding: 20px;}
}