body{margin: 0px; background-color: #f0eff4;}
*{margin: 0; font-family: "SF"; font-weight: 500;}
a{color: black;}

hr{
	color: #193441;
	height: 3px !important;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 40px;
	width: 1350px;
    max-width: 90%;
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: auto;
    padding: 7px 40px;
}

footer{
	width: 100%;
	height: 29px;
	background-color: #04354f;
	color: rgb(229, 235, 240);
    box-shadow: 0px 0px 7px rgb(172, 186, 187);
	padding: 6px 0px 10px 0px;
}

.header--container{
    width: 100%;
    background-color: #04354f;
    box-shadow: 0px 0px 7px rgb(172, 186, 187);
    min-height: 70px;
}

.border-1{
    border: 1px solid black;
    border-color: black;
}

.common-btn{
    text-decoration: none;
    color: white;
    background-color: rgb(49, 115, 153);
    border-radius: 0px;
    font-size: 20px;
    margin: 10px 10px;
    padding: 8px 10px;
    white-space: nowrap;
}

.common-btn:hover{
    color: white;
    background-color: rgb(39, 81, 105);
}

.secondary-btn{
    text-decoration: none;
    color: white;
    background-color: #6c757d;
    border-radius: 0px;
    font-size: 20px;
    margin: 10px 10px;
    padding: 8px 10px;
    white-space: nowrap;
}

.secondary-btn:hover{
    color: white;
    background-color: #53595f;
}

.messenger--container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.messenger_block{
    margin: 10px;
}

.whatsapp-btn{
    background-color: rgb(52, 167, 90);
    color: white;
    border-radius: 0px;
    font-size: 20px;
    margin: 10px 10px;
    padding: 8px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.whatsapp-btn:hover{
    color: rgb(255, 255, 255);
    background-color: rgb(57, 167, 53);
}

.instr--container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -20px;
}

/* -------------------------------------------------------- */
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
    border: none;
    border-right: 1px solid #193441;
    border-bottom: 1px solid #193441 !important;
}
.table.table-borderless {
    border-right: 3px solid #f0eff4 !important;
    border-collapse: collapse !important;
    max-height: 200px;
}

th{
	text-align: left;
	font-weight: normal;
}

/* -------------------------------------------------------- */

.block{
    max-width: 1200px;
    margin: auto;
    padding: 20px 40px;
}

.card{
    margin: 10px;
    max-width: 300px;
    width: 100%;
    min-height: 200px;
    text-align: center;
    padding: 25px;
    font-size: 18px;
    background-color: white;
    box-shadow: 0px 0px 7px rgba(209, 216, 217, 0.55);
}

.notify{
    margin: 5px auto;
    width: 100%;
    text-align: center;
    padding: 18px;
    font-size: 18px;
    background-color: #ccddff;
    box-shadow: 0px 0px 7px rgba(209, 216, 217, 0.55);
    flex-direction: row;
    display: flex;
    justify-content: center;
}

.card-w{
    margin: 15px 10px;
    max-width: 40%;
    padding: 25px;
    font-size: 18px;
    background-color: white;
    box-shadow: 0px 0px 7px rgba(209, 216, 217, 0.55);
}

.card-prod{
    margin: 10px;
    max-width: 100%;
    min-height: 200px;
    padding: 25px;
    font-size: 18px;
    background-color: white;
    box-shadow: 0px 0px 7px rgba(209, 216, 217, 0.55);
}

.card--head{
    font-size: 30px;
    padding: 0 0 15px 0;
    font-family: "SF-Semi";
}

.card--container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.card--container-w{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    flex-wrap: wrap;
}

.row{
    display: flex;
    flex-direction: row;
}

.link-bar{
    display: flex;
    flex-direction: row;
}

.img--main{
    max-height: 35vh;
}

.body--main{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 50vh;
}

.body--container{
    display: flex;
    flex-direction: column;
    margin: 0px;
}

.body--c{
    max-width: 650px;
    font-size: 30px;
    margin: 0 0 50px 0;
}
.body--h{
    font-size: 4rem;
    margin-bottom: 10px;
    font-family: "SF-Semi";
}

.header--p{
    font-size: 30px;
    margin: auto 0px auto 0px;
    color: rgb(247, 249, 250);
    font-family: "SF-Semi";
}

.header--a{
    padding-left: 20px;
    font-size: 20px;
    margin: auto;
    color: rgb(250, 251, 252);
}

.btw-header{
    font-family: "SF-Semi";
    font-size: 34px;
    text-align: center;
    margin: 20px 0px 20px 0px;
}

.ctrl-img{
    max-width: 900px;
    width: 90%;
    margin: auto;
    display: block;
}

.prod--img-cont{
    width: 25%;
    text-align: center;
}

.prod--text-cont{
    max-width: 60%;
    display: flex;
    flex-direction: column;
}

#lang {
    display: none;
}
#lang:checked ~ .rus,   
#lang:not(:checked) ~ .eng {
    display:none;
}
label[for="lang"] {
    user-select: none;
    cursor: pointer;
}

@media (max-width: 1200px){
    .body--c{font-size: 30px;}
    .body--h{font-size: 45px;}
    .header--p{font-size: 35px;}

}

@media (max-width: 992px){
    .body--c{font-size: 30px;}
    .body--h{font-size: 50px;}
    .header--p{font-size: 40px;}
    .body--main{flex-direction: column;}
    .img--main{padding: 0; max-width: 55vw;}
    .body--main{height: 75vh; justify-content: flex-start; height: auto; padding-bottom: 15px;}
    .body--main *{margin-top: 20px;}
    .card--container{flex-direction: column; align-items: center;}
    .card--container-w{flex-direction: column; align-items: center; flex-wrap: nowrap;}
    .card-w{max-width: 300px; width: 100%}
    .prod--img-cont{width: 35%}
}

@media (max-width: 767px){
    .table--container{display: none;}
    .table--container--m{display: block !important;}
    .body--c{font-size: 25px; margin: 0px 0px 20px 0px;}
    .body--h{font-size: 36px;}
    .header--p{font-size: 30px;}
    header{flex-direction: column;}
    .link-bar{flex-direction: column;}
    .header--a{margin-top: 10px;}
    .body--main *{margin-top: 17px;}
    .card-prod > div{flex-direction: column !important; align-items: center;}
    .prod--text-cont{max-width: 90%;}
    .prod--img-cont{width: 100%}
    .prod--img-cont > img{max-width: 100%}
    .card-prod{text-align: center;}
    .block:has(> .card-prod){padding: 20px 0px;}
    .block:has(> .table--container--m){padding: 20px 0px;}
    .obzor{width: 80vw !important; height: 45vw !important;}
}

@media (max-width: 420px){
    .body--c{font-size: 25px;}
    .body--h{font-size: 32px;}
    .header--p{font-size: 26px;}
    header{flex-direction: column; padding: 7px 15px;}
    .link-bar{flex-direction: column;}
    .header--a{margin-top: 5px;}
    .body--main *{margin-top: 14px;}
    .ctrl-img{width:90%;}
    .block:has(> img.ctrl-img){padding: 0px;}
}

@font-face {
    font-family: "Main";
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: "Semi";
    src: url(../fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: "SF";
    src: url(../fonts/SF/sf-ui-display-regular.ttf);
}

@font-face {
    font-family: "SF-Semi";
    src: url(../fonts/SF/sf-ui-display-semibold.ttf);
}