:root {
    --btn-color: #ce3df2;
}

a {
    color: rgb(22, 219, 226);
    cursor: pointer;
    /* text-decoration: none; */
}

h2 {
    color: azure;
    font-size: 40px;
    font-style: italic;
    font-weight: 200;
    margin-bottom: 10vh;
}


footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body {
    background-color: black;
}

.container {
    width: 90vw;
    margin: auto;
    position: relative;
}

.fon {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    width: 100%;
    height: 100%;
    /* opacity: 0.7; */
    left: 0;
    /* background-color: rgb(0 0 0 / 67%); */
    background: linear-gradient(129deg, rgb(0 0 0 / 100%), rgb(0 247 255 / 14%));
}

.win {
    border-radius: 10px;
    width: 40vw;
    opacity: 85%;
    height: 28vw;
    background: linear-gradient(125deg, var(--btn-color), rgb(0 0 0 / 100%));
}

form {
    position: relative;
    display: flex;
    flex-direction: column;
    /* padding-left: 1vw; */
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.nameDiv, .telDiv {
    width: 90%;
}

.successWin {
    position: absolute;
    top: 0%;
    left: 24%;
    width: 100%;
    height: 100%;
}

.successWin:after {
    font-size: 4vw;
    content: 'Отправлено';
    color: #09e709;
    text-shadow: 0 0 #021b21;
}


.nameLabelName, .nameLabelPhone {
    /* margin-top: 4vw; */
    font-size: 2.5vw;
    font-style: italic;
    display: inline-block;
    text-shadow: 0 0 #021b21;
}

.nameIputPhone {
    width: 100%;
    /* margin-top: 3vw; */
    border: none;
    font-size: 1.6vw;
    font-style: italic;
    border-radius: 10px;
    height: 26px;
}

.nameIputName {
    width: 100%;
    /* margin-top: 5vw; */
    border-radius: 10px;
    height: 26px;
    font-size: 1.6vw;
    font-style: italic;
    border: navajowhite;
}

.nameIputPhone {
    width: 100%;
    /* margin-top: 3vw; */
    border: none;
    font-size: 1.6vw;
    font-style: italic;
    border-radius: 10px;
    height: 26px;
}

.btnSubmit {
    margin-top: 3vw;
    /* margin-left: 11vw; */
    width: 14vw;
    font-size: 17px;
    border: none;
    border-radius: 10px;
    color: #036352;
    font-style: italic;
    height: 26px;
}

.dialog_cam_l {
    position: absolute;
    width: 25vw;
    height: 32vh;
    top: 1%;
    left: 30%;
    background-color: rgb(70, 66, 66);
    color: white;
    padding: 20px;
    border-radius: 10px;
    opacity: 50%;
}

.dialog_cam_c {
    position: absolute;
    width: 25vw;
    height: 32vh;
    top: 1%;
    left: 45%;
    background-color: rgb(70, 66, 66);
    color: white;
    padding: 20px;
    border-radius: 10px;
    opacity: 50%;
}

.dialog_cam_r {
    position: absolute;
    width: 25vw;
    height: 32vh;
    top: 1%;
    left: 55%;
    background-color: rgb(70, 66, 66);
    color: white;
    padding: 20px;
    border-radius: 10px;
    opacity: 50%;
}

button {
    background-color: var(--btn-color);
    width: 200px;
    height: 37px;
    border-style: double;
    border-radius: 9px;
    font-style: italic;
    font-size: 18px;
    color: black;
    margin-right: 20px;
}

#logo-img {
    width: 205px;
    margin-top: 20px;
}

.section-advantages {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(rgb(0, 247, 255) -160%, black 47%)
}

.section-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section_slider__bl {
    display: flex;
    margin-top: 25px;
    margin-bottom: 80px;
    background: radial-gradient(rgb(0, 247, 255) -122%, black 68%);
    align-items: center;
}

.section_slider__bl-description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40%;
}

.section-capability {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(rgb(0, 247, 255) -160%, black 47%)
}

.section-online {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-online_videoout {
    display: flex;
    background: radial-gradient(rgb(0, 247, 255)-216%, black 66%);
    align-items: center;
}

.section-mobapp {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-mobapp_bl {
    display: flex;
    background: radial-gradient(rgb(0, 247, 255)-216%, black 66%);
    align-items: center;
}

#advantages,
#capability {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 74vh;
}

#advantages div,
.cap-text {
    margin-left: 10px;
    margin-top: 5px;
    color: grey;
    font-size: 18px;
}

iframe {
    width: 47vw;
    height: 31vw;
    border: none;
    margin-left: 7vw;
}

.iv-video-ui-panel {
    opacity: 0.7;
}

#slider_container {
    height: 60vh;
    opacity: 1;
    width: auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.opacity_on {
    opacity: 0;
    transition: opacity 7s;
}

.js_height {
    border-bottom: solid rgb(161, 160, 160, 0.1) 1px;
}

#screen {
    grid-column: 2/6;
    grid-row: 2/10;
    background: radial-gradient(rgb(0, 247, 255) -160%, black 47%);
    opacity: 0;
    color: white;
    font-size: 2vw;
}

.cameras {
    display: flex;
    background-color: black;
}

.camers-description {
    width: 45%;
    color: white;
}

.camers-description_p1 {
    margin-top: 10vh;
    font-style: italic;
    margin-bottom: 20px;
    font-size: 50px;
}

#camers {
    background: radial-gradient(rgb(0, 247, 255) -122%, black 68%);
    height: 70vh;
    width: 55%;
    position: relative;
}

#cam_l {
    width: 15vw;
    position: absolute;
    left: 9.5%;
    top: 36%;
}

#cam_c {
    width: 15vw;
    position: absolute;
    left: 36%;
    top: 20%;
}

#cam_r {
    width: 15vw;
    position: absolute;
    left: 61%;
    top: 24%;
}

.camers-description_p2 {
    color: aquamarine;
    margin-bottom: 20px;
    margin-top: 0;
    font-size: 35px;
}

.camers-description_p3 {
    color: grey;
    font-size: 22px;
    font-style: italic;
}

.offer-tel {
    display: flex;
    align-items: center;
    font-size: 20px;
    text-decoration: none;
    color: azure;
}

.dialog_cam_r, .dialog_cam_c, .dialog_cam_l {
    overflow-y: scroll;
}

.dialog_cam_r::-webkit-scrollbar, .dialog_cam_c::-webkit-scrollbar, .dialog_cam_l::-webkit-scrollbar {
    width: 0;
    background-color: #cdcdff;
}

#adv-1, #adv-7 {
    grid-column: 1/2;
    grid-row: 1/2;
}

#adv-2, #adv-8 {
    grid-column: 1/2;
    grid-row: 2/3;
}

#adv-3, #adv-9 {
    grid-column: 1/2;
    grid-row: 3/4;
}

#adv-4, #adv-10 {
    grid-column: 7/8;
    grid-row: 1/2;
}

#adv-5, #adv-11 {
    grid-column: 7/8;
    grid-row: 2/3;
}

#adv-6, #adv-12 {
    grid-column: 7/8;
    grid-row: 3/4;
}

#adv-1-text, #adv-7-text {
    grid-column: 2/7;
    grid-row: 1/2;
}

#adv-2-text, #adv-8-text {
    grid-column: 2/7;
    grid-row: 2/3;
}

#adv-3-text, #adv-9-text {
    grid-column: 2/7;
    grid-row: 3/4;
}

#adv-4-text, #adv-10-text {
    grid-column: 8/13;
    grid-row: 1/2;
}

#adv-5-text, #adv-11-text {
    grid-column: 8/13;
    grid-row: 2/3;
}

#adv-6-text, #adv-12-text {
    grid-column: 8/13;
    grid-row: 3/4
}

.slider_div {
    width: 60%;
}

.offer-tel img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.section_slider__bl-description p {
    font-size: 22px;
    font-style: italic;
    color: grey;
    font-weight: 200;
}

.section-online_iframe {
    width: 60%;
}


.section-online_videoout p {
    font-size: 22px;
    font-style: italic;
    color: grey;
    font-weight: 200;
}

.section-online_iframe {
    width: 60%;
}


.section-online_description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40%;
}

.zayavka {
    display: flex;
    justify-content: start;
}

.section-mobapp_description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40%;
}

.section-mobapp_description p {
    font-size: 22px;
    font-style: italic;
    color: grey;
    font-weight: 200;
}

.section-mobapp_phone-bl {
    width: 60%;
    display: flex;
    justify-content: center;
}

.section-mobapp_phone {
    display: grid;
    grid-template-columns: 1.05vw 1fr 1fr 1fr 1fr 1.2vw;
    width: 23vw;
    grid-template-rows: 3.5vw repeat(8, 3.8vw) auto auto;
    height: 44vw;
}

.phone-pattern {
    height: 44vw;
    width: 23vw;
}

#icon-1 {
    justify-self: center;
    width: 3.8vw;
    grid-column: 2/3;
    grid-row: 10/11;
}

#icon-2 {
    justify-self: center;
    margin-top: 0.2vw;
    width: 3.8vw;
    grid-column: 3/4;
    grid-row: 10/11;
}

#icon-3 {
    justify-self: center;
    width: 3.8vw;
    grid-column: 4/5;
    grid-row: 10/11;
}

#icon-4 {
    justify-self: center;
    margin-top: 0.25vw;
    width: 3.8vw;
    grid-column: 5/6;
    grid-row: 10/11;
}

#icon-5 {
    justify-self: center;
    margin-left: 0.2vw;
    width: 3.8vw;
    grid-column: 2/3;
    grid-row: 11/12;
}

#icon-6 {
    justify-self: center;
    margin-top: -0.2vw;
    width: 3.8vw;
    grid-column: 3/4;
    grid-row: 11/12;
}

#icon-7 {
    justify-self: center;
    width: 3.8vw;
    grid-column: 4/5;
    grid-row: 11/12;
}

#icon-8 {
    justify-self: center;
    width: 3.8vw;
    grid-column: 5/6;
    margin-top: -0.2vw;
    grid-row: 11/12;
}

.screen_div {
    margin: 0 auto;
    width: 18vw;
}

.screen_logo {
    width: 55px;
    margin-top: 10px;
}

.footer-btn {
    font-size: 14px;
}

#logo img {
    width: 150px;
    margin-top: 20px;
}

footer p {
    font-size: 22px;
    font-style: italic;
    color: grey;
    font-weight: 200;
}

.redInp::placeholder {
    color: red;
}


.checkDiv {
    display: grid;
    width: 83%;
    margin-top: 2vh;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
}
.labCheck {
    grid-column: 2/7;
    grid-row: 1/2;
    font-size: 100%;
    margin-top: 0.5vh;
}

.aCheck {
    color: white;
}
.btnCheckbox {
    height: 100%;
    /* width: 3vw; */
}

@media(max-width: 410px) {
    .successWin {
        position: absolute;
        top: 8%;
        left: 18%;
        width: 100%;
        height: 100%;
    }
    
    .successWin:after {
        font-size: 9vw;
        content: 'Отправлено';
        color: #09e709;
        text-shadow: 0 0 #021b21;
    }

    .win {
        width: 85vw;
        height: 104vw;
    }

    .nameLabelName {
        margin-top: 11vw;
        font-size: 7.5vw;
        font-style: italic;
        display: inline-block;
        text-shadow: 0 0 #021b21;
    }

    .nameIputName {
        width: 100%;
        /* margin-top: 5vw; */
        border-radius: 10px;
        height: 26px;
        font-size: 4.6vw;
        font-style: italic;
        border: navajowhite;
    }

    .nameLabelPhone {
        margin-top: 7vw;
        font-size: 7.5vw;
        font-style: italic;
        display: inline-block;
        text-shadow: 0 0 #021b21;
    }

    .nameIputPhone {
        width: 100%;
        /* margin-top: 3vw; */
        border: none;
        font-size: 4.6vw;
        font-style: italic;
        border-radius: 10px;
        height: 26px;
    }

    .btnSubmit {
        margin-top: 15vw;
        width: 37vw;
        font-size: 5vw;
        border: none;
        border-radius: 10px;
        color: #036352;
        font-style: italic;
        height: 29px;
    }

    #logo img {
        width: 32vw;
        margin-top: 10px;
    }

    footer p {
        font-size: 6vw;
    }


    .screen_div {
        margin: 0 auto;
        width: 39vw;
        font-size: 3vw;
    }

    .screen_logo {
        width: 20vw;
        margin-top: 20px;
    }

    .section-mobapp_phone {
        grid-template-columns: 3.0vw 1fr 1fr 1fr 1fr 2.8vw;
        width: 50vw;
        grid-template-rows: 7.6vw repeat(8, 7.9vw) auto auto;
        height: 92vw;
    }

    .phone-pattern {
        height: 92vw;
        width: 50vw;
    }

    .section-mobapp_bl {
        position: relative;
        flex-direction: column;
        width: 100%;
    }

    .section-mobapp_phone-bl {
        position: absolute;
        width: 100%;
        top: 22vw;
    }

    .section-mobapp_description p {
        font-size: 6vw;
    }

    .section-mobapp_description h2 {
        margin-bottom: 106vw;
    }

    .section-mobapp_description {
        width: 100%;
    }

    .zayavka {
        display: flex;
        justify-content: space-between;
    }

    .section-online_description {
        width: 100%;
    }

    .section-online_videoout p {
        font-size: 6vw;
    }

    iframe {
        position: absolute;
        top: 20vw;
        width: 73vw;
        height: 56vw;
        margin-left: 9vw;
    }

    .section-online_iframe {
        width: 100%;
    }

    .section-online_videoout {
        position: relative;
        flex-direction: column;
        align-items: normal;
    }

    .offer-tel img {
        width: 6vw;
        height: 6vw;
    }

    .section_slider__bl-description {
        width: 100%;
    }

    .section_slider__bl-description h2 {
        margin-top: 0;
        margin-bottom: 71%;
    }

    .section-online_videoout h2 {
        margin-top: 0;
        margin-bottom: 71%;
    }

    .section_slider__bl-description p {
        font-size: 6vw;
    }

    #slider_container {
        height: 58vw;
    }

    .slider_div {
        width: 100%;
        position: absolute;
        top: 14vw;
        left: 0vw;
    }

    h2 {
        font-size: 7vw;
        margin-bottom: 4vh;
        /* border-top: solid #101010c7 1px; */
    }

    button {
        width: 39vw;
        height: 8vw;
        font-size: 4vw;
        margin-right: 2vw;
    }

    #logo-img {
        width: 37vw;
    }

    .offer-tel {
        font-size: 5vw;
    }

    .camers-description_p2 {
        color: aquamarine;
        margin-bottom: 20px;
        margin-top: 0;
        font-size: 7vw;
    }

    .camers-description_p3 {
        font-size: 6vw;
    }

    .section_slider__bl {
        position: relative;
        flex-direction: column;
    }

    .cameras {
        display: block;
        position: relative;
    }

    .camers-description {
        width: 100%;
    }

    .camers-description_p1 {
        margin-top: 5vw;
        margin-bottom: 70vw;
        font-size: 7vw;
    }

    #camers {
        height: 64vw;
        width: 100%;
        position: absolute;
        top: 23vw;
    }

    #cam_l {
        width: 25vw;
    }

    #cam_c {
        width: 25vw;
    }

    #cam_r {
        width: 23vw;
    }

    .dialog_cam_l {
        position: absolute;
        width: 35vw;
        height: 55vw;
        top: 1%;
        left: 30%;
        padding: 2vw;
        font-size: 3vw;
        overflow-y: scroll;
    }

    .dialog_cam_c {
        position: absolute;
        width: 35vw;
        height: 55vw;
        top: 1%;
        left: 55%;
        padding: 2vw;
        font-size: 3vw;
        overflow-y: scroll;
    }

    .dialog_cam_r {
        position: absolute;
        width: 35vw;
        height: 55vw;
        top: 1%;
        left: 30%;
        padding: 2vw;
        font-size: 3vw;
        overflow-y: scroll;
    }

    #adv-1, #adv-7 {
        grid-column: 1/2;
        grid-row: 1/2;
        width: 12vw;
    }

    #adv-2, #adv-8 {
        grid-column: 1/2;
        grid-row: 2/3;
        width: 12vw;
    }

    #adv-3, #adv-9 {
        grid-column: 1/2;
        grid-row: 3/4;
        width: 12vw;
    }

    #adv-4, #adv-10 {
        grid-column: 1/2;
        grid-row: 4/5;
        width: 12vw;
    }

    #adv-5, #adv-11 {
        grid-column: 1/2;
        grid-row: 5/6;
        width: 12vw;
    }

    #adv-6, #adv-12 {
        grid-column: 1/2;
        grid-row: 6/7;
        width: 12vw;
    }

    #adv-1-text, #adv-7-text {
        grid-column: 2/7;
        grid-row: 1/2;
        font-size: 3vw;
    }

    #adv-2-text, #adv-8-text {
        grid-column: 2/7;
        grid-row: 2/3;
        font-size: 3vw;
    }

    #adv-3-text, #adv-9-text {
        grid-column: 2/7;
        grid-row: 3/4;
        font-size: 3vw;
    }

    #adv-4-text, #adv-10-text {
        grid-column: 2/7;
        grid-row: 4/5;
        font-size: 3vw;
    }

    #adv-5-text, #adv-11-text {
        grid-column: 2/7;
        grid-row: 5/6;
        font-size: 3vw;
    }

    #adv-6-text, #adv-12-text {
        grid-column: 2/7;
        grid-row: 6/7;
        font-size: 3vw;
    }

    #advantages,
    #capability {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(6, 1fr);
        height: 100vw;
        margin-bottom: 20px;
    }

    #advantages div,
    .cap-text {
        font-size: 3vw;
    }

    .js_height {
        /* height: auto !important; */
        /* border-bottom: none; */
    }

    #icon-1 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 2/3;
        grid-row: 10/11;
    }

    #icon-2 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 3/4;
        grid-row: 10/11;
    }

    #icon-3 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 4/5;
        grid-row: 10/11;
    }

    #icon-4 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 5/6;
        grid-row: 10/11;
    }

    #icon-5 {
        justify-self: center;
        align-self: center;
        margin-left: 0.2vw;
        width: 7.8vw;
        grid-column: 2/3;
        grid-row: 11/12;
    }

    #icon-6 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 3/4;
        grid-row: 11/12;
    }

    #icon-7 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 4/5;
        grid-row: 11/12;
    }

    #icon-8 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        margin-top: -0.2vw;
        grid-row: 11/12;
    }

    .footer-btn {
        font-size: 2vw;
        height: 5vw;
        width: 42vw;
        color: white;
        text-shadow: 1px 1px 2px black; 
    }
    
    footer {
        margin-top: 25px;
    }

    @media screen and (orientation:landscape) {
        .js_height {
            height: auto !important;
            border-bottom: none;
        }
    }


}

@media (min-width: 380px) and (max-width: 768px) {
    .section-mobapp, .section-online, .section-advantages, .section-slider, .section-capability {
        margin-bottom: 25vw;
    }
    header {
        margin-bottom: 35vw;
    }
}
@media (min-width: 410px) and (max-width: 768px) {

    .btnSubmit {
        font-size: 2vw;
    }

    .win {
        height: 35vw;
    }

    #logo img {
        width: 32vw;
        margin-top: 10px;
    }

    footer p {
        font-size: 6vw;
    }


    .screen_div {
        margin: 0 auto;
        width: 39vw;
        font-size: 3vw;
    }

    .screen_logo {
        width: 20vw;
        margin-top: 20px;
    }

    .section-mobapp_phone {
        grid-template-columns: 3.0vw 1fr 1fr 1fr 1fr 2.8vw;
        width: 50vw;
        grid-template-rows: 7.6vw repeat(8, 7.9vw) auto auto;
        height: 92vw;
    }

    .phone-pattern {
        height: 92vw;
        width: 50vw;
    }

    .section-mobapp_bl {
        position: relative;
        flex-direction: column;
        width: 100%;
    }

    .section-mobapp_phone-bl {
        position: absolute;
        width: 100%;
        top: 14vw;
    }

    .section-mobapp_description p {
        font-size: 5vw;
        margin-top: 1px;
    }

    .section-mobapp_description h2 {
        margin-bottom: 98vw;
    }

    .section-mobapp_description {
        width: 100%;
    }

    .zayavka {
        display: flex;
        justify-content: space-between;
    }

    .section-online_description {
        width: 100%;
    }

    .section-online_videoout p {
        font-size: 5vw;
    }

    iframe {
        position: absolute;
        top: 10vw;
        width: 73vw;
        height: 56vw;
        margin-left: 9vw;
    }

    .section-online_iframe {
        width: 100%;
    }

    .section-online_videoout {
        position: relative;
        flex-direction: column;
        align-items: normal;
    }

    .offer-tel img {
        width: 6vw;
        height: 6vw;
    }

    .section_slider__bl-description {
        width: 100%;
    }

    .section_slider__bl-description h2 {
        margin-top: 0;
        margin-bottom: 71%;
    }

    .section-online_videoout h2 {
        margin-top: 0;
        margin-bottom: 62vw;
    }

    .section_slider__bl-description p {
        font-size: 6vw;
    }

    #slider_container {
        height: 58vw;
    }

    .slider_div {
        width: 100%;
        position: absolute;
        top: 14vw;
        left: 0vw;
    }

    h2 {
        font-size: 5vw;
        margin-bottom: 2vh;
        /* border-top: solid #101010c7 1px; */
    }

    .section-capability h2 {
        margin-top: 0vh;
        margin-bottom: 2vh !important;
    }

    button {
        width: 39vw;
        height: 8vw;
        font-size: 4vw;
        margin-right: 2vw;
    }

    #logo-img {
        width: 37vw;
    }

    .offer-tel {
        font-size: 5vw;
    }

    .camers-description_p2 {
        color: aquamarine;
        margin-bottom: 20px;
        margin-top: 0;
        font-size: 5vw;
    }

    .camers-description_p3 {
        font-size: 5vw;
    }

    .section_slider__bl {
        position: relative;
        flex-direction: column;
    }

    .cameras {
        display: block;
        position: relative;
    }

    .camers-description {
        width: 100%;
    }

    .camers-description_p1 {
        margin-top: 5vw;
        margin-bottom: 60vw;
        font-size: 5.5vw;
    }

    #camers {
        height: 56vw;
        width: 100%;
        position: absolute;
        top: 15vw;
    }

    #cam_l {
        width: 25vw;
    }

    #cam_c {
        width: 25vw;
    }

    #cam_r {
        width: 23vw;
    }

    .dialog_cam_l {
        position: absolute;
        width: 35vw;
        height: 55vw;
        top: 1%;
        left: 30%;
        padding: 2vw;
        font-size: 3vw;
        overflow-y: scroll;
    }

    .dialog_cam_c {
        position: absolute;
        width: 35vw;
        height: 55vw;
        top: 1%;
        left: 55%;
        padding: 2vw;
        font-size: 3vw;
        overflow-y: scroll;
    }

    .dialog_cam_r {
        position: absolute;
        width: 35vw;
        height: 55vw;
        top: 1%;
        left: 30%;
        padding: 2vw;
        font-size: 3vw;
        overflow-y: scroll;
    }

    #adv-1, #adv-7 {
        grid-column: 1/2;
        grid-row: 1/2;
        width: 12vw;
    }

    #adv-2, #adv-8 {
        grid-column: 1/2;
        grid-row: 2/3;
        width: 12vw;
    }

    #adv-3, #adv-9 {
        grid-column: 1/2;
        grid-row: 3/4;
        width: 12vw;
    }

    #adv-4, #adv-10 {
        grid-column: 1/2;
        grid-row: 4/5;
        width: 12vw;
    }

    #adv-5, #adv-11 {
        grid-column: 1/2;
        grid-row: 5/6;
        width: 12vw;
    }

    #adv-6, #adv-12 {
        grid-column: 1/2;
        grid-row: 6/7;
        width: 12vw;
    }

    #adv-1-text, #adv-7-text {
        grid-column: 2/7;
        grid-row: 1/2;
        font-size: 3vw;
    }

    #adv-2-text, #adv-8-text {
        grid-column: 2/7;
        grid-row: 2/3;
        font-size: 3vw;
    }

    #adv-3-text, #adv-9-text {
        grid-column: 2/7;
        grid-row: 3/4;
        font-size: 3vw;
    }

    #adv-4-text, #adv-10-text {
        grid-column: 2/7;
        grid-row: 4/5;
        font-size: 3vw;
    }

    #adv-5-text, #adv-11-text {
        grid-column: 2/7;
        grid-row: 5/6;
        font-size: 3vw;
    }

    #adv-6-text, #adv-12-text {
        grid-column: 2/7;
        grid-row: 6/7;
        font-size: 3vw;
    }

    #advantages,
    #capability {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(6, 1fr);
        height: 100vw;
        margin-bottom: 20px;
    }

    #advantages div,
    .cap-text {
        font-size: 3vw;
    }



    #icon-1 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 2/3;
        grid-row: 10/11;
    }

    #icon-2 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 3/4;
        grid-row: 10/11;
    }

    #icon-3 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 4/5;
        grid-row: 10/11;
    }

    #icon-4 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 5/6;
        grid-row: 10/11;
    }

    #icon-5 {
        justify-self: center;
        align-self: center;
        margin-left: 0.2vw;
        width: 7.8vw;
        grid-column: 2/3;
        grid-row: 11/12;
    }

    #icon-6 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 3/4;
        grid-row: 11/12;
    }

    #icon-7 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        grid-column: 4/5;
        grid-row: 11/12;
    }

    #icon-8 {
        justify-self: center;
        align-self: center;
        width: 5.8vw;
        margin-top: -0.2vw;
        grid-row: 11/12;
    }

    .footer-btn {
        font-size: 2vw;
        height: 5vw;
        width: 42vw;
        color: white;
        text-shadow: 1px 1px 2px black;
    }
  
    footer {
        margin-top: 10vw;
    }

    footer p {
        font-size: 4vw !important;
    }

    @media screen and (orientation:landscape) {
        .js_height {
            height: auto !important;
            border-bottom: none;
        }
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .win {
        height: 28vw;
    }

    @media screen and (orientation:landscape) {
        .js_height {
            height: auto !important;
            border-bottom: none;
        }

        .camers-description_p1 {
            margin-top: 10vh;
            font-style: italic;
            margin-bottom: 20px;
            font-size: 4.5vw;
        }

        .camers-description_p2 {
            color: aquamarine;
            margin-bottom: 20px;
            margin-top: 0;
            font-size: 4vw;
        }

        .camers-description_p3 {
            color: grey;
            font-size: 3vw;
            font-style: italic;
        }

        button {
            background-color: var(--btn-color);
            width: 200px;
            height: 37px;
            border-style: double;
            border-radius: 9px;
            font-style: italic;
            font-size: 1.8vw;
            color: black;
            margin-right: 20px;
        }

        #advantages, #capability {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(3, 1fr);
            height: 95vh;
        }

        h2 {
            color: azure;
            font-size: 5vw;
            font-style: italic;
            font-weight: 200;
            margin-bottom: 2vh;
        }

        .section-mobapp_phone-bl {
            width: 50%;
            display: flex;
            justify-content: center;
        }

        .section-mobapp_description {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 50%;
        }

        .section-online_description {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 50%;
        }

        .section-online_iframe {
            width: 50%;
        }

        iframe {
            width: 40vw;
            height: 29vw;
            border: none;
            margin-left: 7vw;
        }

        .section_slider__bl-description {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 50%;
        }

        .slider_div {
            width: 50%;
        }

        .js_height {
            height: auto !important;
            border-bottom: none;
            margin-bottom: 50px;
        }

        .cameras {
            align-items: center;
        }

        .footer-btn {
            font-size: 1.5vw;
            height: 3.9vw;
        }

    }
}

@media(max-width: 2560px) and (min-width: 1920px) {
    #logo img {
        width: 25vw;
        margin-top: 20px;
    }

    .camers-description_p1 {
        margin-top: 10vh;
        font-style: italic;
        margin-bottom: 20px;
        font-size: 4vw;
    }

    .camers-description_p2 {
        color: aquamarine;
        margin-bottom: 20px;
        margin-top: 0;
        font-size: 3vw;
    }

    .camers-description_p3 {
        color: grey;
        font-size: 2vw;
        font-style: italic;
    }

    button {
        background-color: var(--btn-color);
        width: 14vw;
        height: 3vw;
        border-style: double;
        border-radius: 9px;
        font-style: italic;
        font-size: 1.5vw;
        color: black;
        margin-right: 20px;
    }

    .offer-tel {
        display: flex;
        align-items: center;
        font-size: 2vw;
        text-decoration: none;
        color: azure;
    }

    h2 {
        color: azure;
        font-size: 4vw;
        font-style: italic;
        font-weight: 200;
        margin-bottom: 10vh;
    }

    #advantages div, .cap-text {
        margin-left: 10px;
        margin-top: 5px;
        color: grey;
        font-size: 1.8vw;
    }

    .section_slider__bl-description p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    .section-online_videoout p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    .section-mobapp_description p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    #logo img {
        width: 17vw !important;
        margin-top: 20px;
    }

    footer p, footer a {
        font-size: 2vw !important;
    }

    .footer-btn {
        font-size: 1.2vw;
    }

    footer a img {
        width: 3vw !important;
        height: 3vw !important;
    }

    .offer-tel img {
        width: 3vw;
        height: 3vw;
        margin-right: 10px;
    }

}

@media(min-width: 2560px) and (max-width: 3840px) {
    #logo img {
        width: 25vw;
        margin-top: 20px;
    }

    .camers-description_p1 {
        margin-top: 10vh;
        font-style: italic;
        margin-bottom: 20px;
        font-size: 4vw;
    }

    .camers-description_p2 {
        color: aquamarine;
        margin-bottom: 20px;
        margin-top: 0;
        font-size: 3vw;
    }

    .camers-description_p3 {
        color: grey;
        font-size: 2vw;
        font-style: italic;
    }

    button {
        background-color: var(--btn-color);
        width: 14vw;
        height: 3vw;
        border-style: double;
        border-radius: 9px;
        font-style: italic;
        font-size: 1.5vw;
        color: black;
        margin-right: 20px;
    }

    .offer-tel {
        display: flex;
        align-items: center;
        font-size: 2vw;
        text-decoration: none;
        color: azure;
    }

    h2 {
        color: azure;
        font-size: 4vw;
        font-style: italic;
        font-weight: 200;
        margin-bottom: 10vh;
    }

    #advantages div, .cap-text {
        margin-left: 10px;
        margin-top: 5px;
        color: grey;
        font-size: 1.8vw;
    }

    .section_slider__bl-description p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    .section-online_videoout p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    .section-mobapp_description p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    #logo img {
        width: 17vw !important;
        margin-top: 20px;
    }

    footer p, footer a {
        font-size: 2vw !important;
    }

    footer a img {
        width: 3vw !important;
        height: 3vw !important;
    }

    .footer-btn {
        font-size: 1.2vw;
    }

    .offer-tel img {
        width: 3vw;
        height: 3vw;
        margin-right: 10px;
    }
}

@media (min-width: 3840px) {
    #logo img {
        width: 25vw;
        margin-top: 20px;
    }

    .camers-description_p1 {
        margin-top: 10vh;
        font-style: italic;
        margin-bottom: 20px;
        font-size: 4vw;
    }

    .camers-description_p2 {
        color: aquamarine;
        margin-bottom: 20px;
        margin-top: 0;
        font-size: 3vw;
    }

    .camers-description_p3 {
        color: grey;
        font-size: 2vw;
        font-style: italic;
    }

    button {
        background-color: var(--btn-color);
        width: 14vw;
        height: 3vw;
        border-style: double;
        border-radius: 9px;
        font-style: italic;
        font-size: 1.5vw;
        color: black;
        margin-right: 20px;
    }

    .offer-tel {
        display: flex;
        align-items: center;
        font-size: 2vw;
        text-decoration: none;
        color: azure;
    }

    h2 {
        color: azure;
        font-size: 4vw;
        font-style: italic;
        font-weight: 200;
        margin-bottom: 10vh;
    }

    #advantages div, .cap-text {
        margin-left: 10px;
        margin-top: 5px;
        color: grey;
        font-size: 1.8vw;
    }

    .section_slider__bl-description p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    .section-online_videoout p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    .section-mobapp_description p {
        font-size: 3vw;
        font-style: italic;
        color: grey;
        font-weight: 200;
    }

    #logo img {
        width: 17vw !important;
        margin-top: 20px;
    }

    footer p, footer a {
        font-size: 2vw !important;
    }

    .footer-btn {
        font-size: 1.2vw;
    }

    footer a img {
        width: 3vw !important;
        height: 3vw !important;
    }

    .offer-tel img {
        width: 3vw;
        height: 3vw;
        margin-right: 10px;
    }
}