@media (max-width: 1199px) {
    :root {
        --widthBB: 950px;
    }
    div#GridContainer {
        width: 950px;
    }
    div#Header {
        width: 950px;
        height: 75px;
    }
    div#HeaderLogo {
        width: 75px;
        height: 75px;
        background-size: 75px;
    }
    div#HeaderText h1 {
        font-size: 46px;
    }
    div#HeaderText h2 {
        font-size: 22px;
    }
    div#HeaderText h3 {
        font-size: 10px;
    }
    div#HeaderSocialVK {
        width: 75px;
        height: 75px;
        background-size: 75px;
    }
    div#HeaderSocialViber {
        width: 75px;
        height: 75px;
        background-size: 70px;
    }
    div#TopMenu div h1 {
        font-size: 20px;
    }
    div.BodyBlock {
        width: 950px;
        height: 360px;
    }
    div#CompanyBlock h1 {
        font-size: 60px;
    }
    div#CompanyBlock h2 {
        font-size: 20px;
    }
    div.BlockSpacer {
        height: 50px;
        background-size: 150px;
    }
    div.InfoBlock h1 {
        font-size: 36px;
    }
    div.InfoBlock p {
        font-size: 22px;
    }
    .DetailsButton {
        font-size: 30px;
        padding: 10px 20px;
        margin: 0 20px;
    }
    div.PageText h1 {
        font-size: 36px;
    }
    div.PageText p, div.PageText div.FileAttached a {
        font-size: 20px;
    }
    div#BottomBlock {
        font-size: 16px;
    }

    .hrMiniBlock div, .hrMiniBlock li {
        font-size: 16px;
    }

    div#MapBlock a img {
        width: 75%;
        height: 75%;
    }
    #ImageScrollerBlock .Images .ScrollerItem div:nth-child(2) {
        font-size: 12pt !important;
    }
}
@media (min-width: 1200px) and (max-width: 1600px) {
    :root {
        --widthBB: 1150px;
    }
    div#GridContainer {
        width: 1150px;
    }
    div#Header {
        width: 1150px;
        height: 150px;
    }
    div#HeaderLogo {
        width: 150px;
        height: 150px;
        background-size: 150px;
    }
    div#HeaderText h1 {
        font-size: 60px;
    }
    div#HeaderText h2 {
        font-size: 28px;
    }
    div#HeaderText h3 {
        font-size: 18px;
    }
    div#HeaderSocialVK {
        width: 150px;
        height: 150px;
        background-size: 150px;
    }
    div#HeaderSocialViber {
        width: 190px;
        height: 150px;
        background-size: 140px;
    }
    div#TopMenu div h1 {
        font-size: 24px;
    }
    div.BodyBlock {
        width: 1150px;
        height: 430px;
    }
    div#CompanyBlock h1 {
        font-size: 80px;
    }
    div#CompanyBlock h2 {
        font-size: 28px;
    }
    div.BlockSpacer {
        height: 60px;
        background-size: 200px;
    }
    div.InfoBlock h1 {
        font-size: 46px;
    }
    div.InfoBlock p {
        font-size: 30px;
    }
    .DetailsButton {
        font-size: 35px;
        padding: 10px 25px;
        margin: 0 30px;
    }
    div.PageText h1 {
        font-size: 40px;
    }
    div.PageText p, div.PageText div.FileAttached a {
        font-size: 24px;
    }
    div#BottomBlock {
        font-size: 20px;
    }

    .hrMiniBlock div, .hrMiniBlock li {
        font-size: 20px;
    }
}
@media (min-width: 1601px) {
    :root {
        --widthBB: 1600px;
    }
    div#GridContainer {
        width: 1600px;
    }
    div#Header {
        width: 1600px;
        height: 170px;
    }
    div#HeaderLogo {
        width: 170px;
        height: 170px;
        background-size: 170px;
    }
    div#HeaderText h1 {
        font-size: 80px;
    }
    div#HeaderText h2 {
        font-size: 38px;
    }
    div#HeaderText h3 {
        font-size: 20px;
    }
    div#HeaderSocialVK {
        width: 170px;
        height: 170px;
        background-size: 170px;
    }
    div#HeaderSocialViber {
        width: 160px;
        height: 170px;
        background-size: 160px;
    }
    div#TopMenu div h1 {
        font-size: 30px;
    }
    div.BodyBlock {
        width: var(--widthBB);
        height: 600px;
    }
    div#CompanyBlock h1 {
        font-size: 110px;
    }
    div#CompanyBlock h2 {
        font-size: 36px;
    }
    div.BlockSpacer {
        height: 75px;
        background-size: 250px;
    }
    div.InfoBlock h1 {
        font-size: 60px;
    }
    div.InfoBlock p {
        font-size: 40px;
    }
    .DetailsButton {
        font-size: 45px;
        padding: 10px 30px;
        margin: 0 50px;
    }
    div.PageText h1 {
        font-size: 48px;
    }
    div.PageText p, div.PageText div.FileAttached a {
        font-size: 30px;
    }
    div#BottomBlock {
        font-size: 24px;
    }

    .hrMiniBlock div, .hrMiniBlock li {
        font-size: 24px;
    }
}

body {
    background-color: #E6E6E6;
    padding: 0;
    margin: 0;
}
div#MainContainer {
    width: 100%;
    text-align: center;
}
div#GridContainer {
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
}
div#Header {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 15px;
}
div#HeaderLogo {
    background-image: url("img/logo_200.png");
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 15px;
}
div#HeaderText {
    color: #A52C85;
    white-space: nowrap;
    font-weight: bold;
    font-family: sans-serif;
    vertical-align: middle;
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
}
div#HeaderText h1,h2,h3 {
    padding: 0;
    margin: 0 0 0 10px;
    flex: 0 1 auto;
    align-self: stretch;
    text-align: left;
    line-height: 0.9;
}
div#HeaderText h3 {
    text-transform: uppercase;
    font-weight: lighter;
    padding-top: 10px;
}
div#HeaderText h3 a {
    text-decoration: none;
    color: #A52C85;
}
div#HeaderSocial {
    white-space: nowrap;
}
div#HeaderSocialVK {
    display: inline-block;
    background-image: url("img/vk_200.png");
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}
div#HeaderSocialViber {
    background-image: url("img/viber200.png");
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    cursor: pointer;
}
div#TopMenu {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
div#TopMenu div {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #E6E6E6;
    background-color: #A52C85;
    color: #FFF;
}
div#TopMenu div h1 {
    font-weight: bold;
    font-family: sans-serif;
    padding: 0.3em;
    margin: 0;
    line-height: 100%;
    text-align: center;
}
div#TopMenu div:hover {
    background-color: #E6E6E6;
    color: #A52C85;
    cursor: pointer;
    border-top-color: #A52C85;
}
div.BodyBlock {
    background-color: rgba(0,0,0,0.75);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #FFFFFF;
}
div#CompanyBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/1.jpg');
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 100%;
}
div#CompanyBlock h1, div#CompanyBlock h2 {
    flex: 0 1 auto;
    font-family: sans-serif;
    text-shadow: -1px -1px 0 #000, 2px -1px 0 #000, -1px 2px 0 #000, 2px 2px 0 #000;
    margin: .25em;
    padding: 0;
    line-height: 1.2;
    text-align: center;
}
div#CompanyBlock h2 {
    text-transform: uppercase;
    font-weight: normal;
}
div.BlockSpacer {
    text-align: center;
    background-image: url("img/spacer50.png");
    background-repeat: no-repeat;
    background-position: center center;
}
div.InfoBlock {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
}
div.InfoBlock h1, div.InfoBlock p {
    text-align: left;
    text-shadow: -1px -1px 5px rgba(0,0,0,0.5), 2px -1px 5px rgba(0,0,0,0.5), -1px 2px 5px #000, 2px 2px 5px rgba(0,0,0,0.5);
    padding: 0 45px;
}
div.InfoBlock h1 {
    padding-top: 10px;
    font-family: sans-serif;
    margin: 0;
}
div.InfoBlock p {
    font-family: serif;
    margin: 0;
}
div.InfoBlock a {
    color: #FFFFFF;
}
div.DetailsButtonContainer {
    text-align: right;
}
.DetailsButton {
    color: #FFFFFF;
    background-color: #A52C85;
    font-family: sans-serif;
    font-weight: bold;
    border: 1px solid #A52C85;
    border-radius: 15px;
    text-decoration: none;
}
.DetailsButton:hover {
    border-color: #FFFFFF;
}
.DetailsButton:active {
    background-color: #FFFFFF;
    color: #A52C85;
}
div#ServiceBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/2.jpg');
}

div#RepairBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

div#SetupBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

div#ControlBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

div#EmergencyBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

div#HRBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

div#ContactsBlock {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
div#MapBlock {
    background: transparent;
    display: flex;
    justify-content: space-around;
    flex-flow: row nowrap;
    height: 310px;
    color: black;
}
div#MapBlock p, div#MapBlock a {
    flex: 0 1 auto;
    align-self: center;
}
div#MapBlock p, div#MapBlock p span {
    text-shadow: none;
    padding: 0;
    margin: 0;
    font-weight: bold;
    line-height: 125%;
}
div#MapBlock p span {
    margin-right: 15px;
    color: grey;
}
div#MapBlock a img {
    border: 3px solid darkgray;
}
div#MapBlock a img:hover {
    border: 3px solid #A52C85;
    cursor: pointer;
}
div#BottomBlock {
    background-color: #A52C85;
    color: #FFFFFF;
    padding: 30px;
    text-align: left;
    background-image: url("img/logo_200.png");
    background-repeat: no-repeat;
    background-position: right center;
    font-family: monospace;
}
div#BottomBlock a {
    text-decoration: none;
    color: white;
}
div#BottomBlock a:hover {
    text-decoration: underline;
    color: white;
}
div.PageText {
    padding: 25px;
    width:75%;
    min-width: 900px;
    margin: 20px auto;
}
div.PageText h1 {
    font-weight: bold;
    display: block;
    padding: 0;
    margin: 15px;
    color: #A52C85;
    text-align: center;
}
div.PageText p {
    font-weight: normal;
    display: block;
    padding: 0;
    margin: 10px;
    text-align: justify;
    text-indent: 1.5em;
}
div.PageText * {
    font-family: sans-serif;
}
div.SendForm {
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
    align-items: stretch;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}
div.SendForm textarea {
    height: 20em;
}
div.SendForm button {
    height: 2em;
    font-weight: bolder;
    font-size: larger;
}
#PopBlockContacts textarea {
    height: 300px;
    font-family: monospace;
    font-size: 14pt;
    margin: 5px;
    padding: 5px;
    flex: 1 1 auto;
    border: 3px double #A52C85;
    resize: none;
}
#PopBlockContacts div button {
    font-family: sans-serif;
    font-size: 14pt;
    font-weight: bold;
    margin: 5px;
    padding: 5px;
    flex: 1 1 auto;
}
.hrMiniBlock {
    display: inline-grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-auto-rows: 1fr;
    gap: 5px 0;
    grid-auto-flow: row;
    grid-template-areas:
    "hrMiniName hrMiniMoney"
    "hrMiniWork hrMiniWork"
    "hrMiniDesc hrMiniDesc"
    "hrMiniLinks hrMiniLinks";
    border-left: 3px solid #A52C85;
    border-bottom: 3px solid #A52C85;
    margin-left: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    width: calc(50% - 40px);
    flex: 0 1 auto;
}
.hrMiniName {
    grid-area: hrMiniName;
    font-weight: bolder;
    font-size: larger;
}

.hrMiniMoney { grid-area: hrMiniMoney; text-align: right;}

.hrMiniWork { grid-area: hrMiniWork; }
.hrMiniWork ul li {
    margin: 2px;
}

.hrMiniDesc { grid-area: hrMiniDesc; }

.hrMiniLinks { grid-area: hrMiniLinks; align-self: end; }
.hrMiniLinks span {
    text-decoration: underline;
    cursor: pointer;
}
.hrMiniLinks a {
    color: #A52C85;
    text-decoration: none;
}
.hrMiniLinks a:hover {
    text-decoration: underline;
}

div.hidden {
    display: none !important;
}

div.hrFlexContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
#PopBlockRepair table, #PopBlockRepair table tr, #PopBlockRepair table tr td, #PopBlockRepair table tr th {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 3px;
    margin: 0;
    text-align: justify;
    vertical-align: top;
}
#PopBlockRepair table tr th {
    white-space: nowrap;
    text-align: center;
}
#PopBlockRepair table {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    min-width: 850px;
}
#PopBlockRepair table caption {
    margin-top: 25px;
    margin-bottom: 5px;
    font-size: larger;
}
div.PageText li {
    margin: 0.1em;
    text-align: justify;
}
div.FileAttached {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding-left: 36px;
    background-image: url('img/attached_32.png');
    background-position: top left;
    background-repeat: no-repeat;
    margin: 10px;
}
div.FileAttached a {
    flex: 0 1 auto;
    color: black;
}
div.FileAttached a:hover {
    color: #A52C85;
}
.hrMiniBlock li {
    text-align: left;
}

#ImageScrollerBlock {
    width: var(--widthBB);
    height: calc(var(--widthBB) / 4);
    display: grid;
    grid-template-columns: 50px calc(100% - 110px) 50px;
    grid-template-rows: auto;
    gap: 0 5px;
    grid-template-areas:
    "LeftArrow Images RightArrow";
    margin-top: 1em;
    margin-bottom: 1em;
}

#ImageScrollerBlock .LeftArrow, #ImageScrollerBlock .RightArrow {
    position: relative;
    top: 50%;
    width: 3vmin;
    height: 3vmin;
    background: transparent;
    border-top: 1vmin solid #A52C85;
    border-right: 1vmin solid #A52C85;
    box-shadow: 0 0 0 #A52C85;
    transition: all 200ms ease;
    cursor: pointer;
}

#ImageScrollerBlock .LeftArrow:hover, #ImageScrollerBlock .RightArrow:hover {
    border-color: #A52C85;
    box-shadow: 0.5vmin -0.5vmin 0 rgba(165, 44, 133, 0.25);
}

#ImageScrollerBlock .LeftArrow:before, #ImageScrollerBlock .RightArrow:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -60%) rotate(45deg);
    width: 200%;
    height: 200%;
}
#ImageScrollerBlock .LeftArrow {
    grid-area: LeftArrow;
    left: 0;
    transform: translate3d(0, -50%, 0) rotate(-135deg);
}
#ImageScrollerBlock .RightArrow {
    grid-area: RightArrow;
    right: 0;
    transform: translate3d(0, -50%, 0) rotate(45deg);
}
#ImageScrollerBlock .Images {
    grid-area: Images;
    cursor: pointer;
}
#ImageScrollerBlock .Images .ScrollerItem {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1.5em;
    gap: 5px 0;
    grid-template-areas:
    "img"
    "text";
    margin-right: 10px;
    padding: 6px;
    width: calc(var(--widthBB) / 5 - 12px);
    height: calc(var(--widthBB) / 5 - 12px);
    margin-top: calc( ((var(--widthBB) / 4 - 12px) - (var(--widthBB) / 5 - 12px)) / 2);
}
#ImageScrollerBlock .Images .ScrollerItem div:nth-child(1) {
    grid-area: img;
    width: 100%;
    height: 100%;
}
#ImageScrollerBlock .Images .ScrollerItem div:nth-child(2) {
    grid-area: text;
    width: 100%;
    height: 100%;
    font-family: Calibri, serif;
    font-weight: bold;
    font-size: 16pt;
    color: #A52C85;
}

.ScrollerItem div img {
    height: 100%;
    width: 100%;
    object-fit: contain
}