/*style_adaptive.css*/

/*telo-doka*/

body {
    margin: 0 auto;
    max-width: 1024px;
}

#slogan_ba {
    background: url(../../img/online/slogan.png);
    grid-column: 5/9;
    grid-row: 8/18;
    background-size: 88%;
    background-repeat: no-repeat;
    background-position: 97% 24%;
}



/*shema_raboti_h*/

#h_shem {
    background: url(../../img/online/job-shem.png) no-repeat;
    grid-column: 5/8;
    grid-row: 12/19;
    background-size: 43%;
    background-position: 43% 77%;
}


/*general-block*/

/*old*/
/*#block_adap {
    background: url(../../img/online/background.png);
    min-height: 366px;
    background-size: 82%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;
}*/
/*new*/
#block_adap {
    background: url(../../img/online/background.png);
    min-height: 427px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;
    padding-top: 6rem;
}


/*shema-raboti*/
.bap1 {
    background: url(../../img/online/1.png);
    grid-column: 5/8;
    grid-row: 19/26;
    background-size: 45%;
    background-repeat: no-repeat;
    font-size: small;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 44%;
    padding-right: 29%;
    padding-top: 5px;
    background-position-x: 43%;
}

.bap_a {
    color: white;
}


.bap2 {
    font-size: small;
    background: url(../../img/online/2.png);
    grid-column: 6/9;
    grid-row: 19/25;
    background-size: 39%;
    background-repeat: no-repeat;
    background-position-x: 68%;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 61%;
    padding-right: 11%;
    padding-top: 5px;
    background-position-y: 5%;
}

.bap3 {
    background: url(../../img/online/Vector-Smart-Object.png);
    grid-column: 4/8;
    grid-row: 16/21;
    background-size: 7%;
    background-repeat: no-repeat;
    background-position-x: 80%;
    background-position-y: 65%;
}

.bap4 {
    background: url(../../img/online/Vector-Smart-Object-copy.png);
    grid-column: 7/9;
    grid-row: 23/29;
    background-repeat: no-repeat;
    background-size: 12%;
    background-position-x: 48%;
    background-position-y: 34%;
    transform: rotate(6deg);
}

.bap5 {
    grid-column: 6/10;
    grid-row: 27/33;
    font-size: small;
    color: white;
    padding-left: 31%;
    padding-right: 44%;
    font-family: sans-serif;
    font-weight: inherit;
    background: url(../../img/online/3.png);
    background-size: 34%;
    background-repeat: no-repeat;
    padding-top: 2%;
    background-position-x: 22%;
    background-position-y: 15%;
    z-index: 3;
}

.bap6 {
    grid-column: 4/8;
    grid-row: 27/33;
    font-size: small;
    color: white;
    padding-left: 29%;
    padding-right: 42%;
    font-family: sans-serif;
    font-weight: inherit;
    background: url(../../img/online/4.png);
    background-size: 36%;
    background-repeat: no-repeat;
    padding-top: 2%;
    background-position-x: 24%;
    background-position-y: 0%;
}

.bap7 {
    background: url(../../img/online/Vector-Smart-Object-copy-2.png);
    grid-column: 6/9;
    grid-row: 23/30;
    background-repeat: no-repeat;
    background-size: 9%;
    background-position: 12% 79%;
    transform: rotate(4deg);
}
/*old*/
/*
a#ba_btn {
    grid-column: 5/7;
    grid-row: 35/38;
    color: black;
    font-size: small;
    align-self: center;
    justify-self: center;
    text-decoration: none;
    font-family: sans-serif;
    background-color: #fdc932;
    padding: 5px;
    text-shadow: 0.1px 0.1px white;
}*/
/*new*/
a#ba_btn {
    grid-column: 5/7;
    grid-row: 39/42;
    color: black;
    font-size: small;
    align-self: center;
    justify-self: center;
    text-decoration: none;
    font-family: sans-serif;
    background-color: #fdc932;
    padding: 9px;
    text-shadow: 0.1px 0.1px white;
}

a#ba_btn:active {
    color: #fedb79;
    text-shadow: none;
}


/*media*/

@media screen and (max-width: 1023px) {
    #slogan_ba {display: none;}
#block_adap {
    background: url(../../img/online/bgrd_m.png);
    background-position: center;
    display: grid;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;
    background-size: contain;
    background-repeat: no-repeat;
}
.bap1 {
    background: url(../../img/online/1.png);
    grid-column: 2/10;
    grid-row: 45/56;
    background-size: 85%;
    background-repeat: no-repeat;
    font-size: small;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 47%;
    padding-right: 15%;
    padding-top: 22px;
    background-position-x: 55%;
}

.bap2 {
    background: url(../../img/online/2.png);
    grid-column: 2/10;
    grid-row: 56/67;
    background-size: 72%;
    background-repeat: no-repeat;
    font-size: small;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 47%;
    padding-right: 15%;
    padding-top: 21px;
    background-position-x: 30%;
}
 
.bap6 {
    background: url(../../img/online/4.png);
    grid-column: 2/10;
    grid-row: 78/88;
    background-size: 90%;
    background-repeat: no-repeat;
    font-size: small;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 47%;
    padding-right: 4%;
    padding-top: 15px;
    background-position-x: 100%;
}
.bap5 {
    grid-column: 2/10;
    grid-row: 79/65;
    font-size: small;
    color: white;
    padding-left: 46%;
    padding-right: 2%;
    font-family: sans-serif;
    font-weight: inherit;
    background: url(../../img/online/3.png);
    background-size: 79%;
    background-repeat: no-repeat;
    padding-top: 13%;
    background-position-x: 45%;
    background-position-y: 62%;
}
#h_shem {
    background: url(../../img/online/job-shem.png) no-repeat;
    grid-column: 4/8;
    grid-row: 37/44;
    background-size: 100%;
    background-position: 43% 77%;
}
    
    a#ba_btn {
    grid-column: 2/10;
    grid-row: 92/95;
    color: black;
    font-size: large;
    align-self: unset;
    justify-self: unset;
    text-decoration: none;
    font-family: sans-serif;
    background-color: #fdc932;
    padding: 5px;
    text-shadow: 0.1px 0.1px white;
    text-align: center;
}
    .bap3 {
    background: url(../../img/online/Vectorm1.png);
    grid-column: 7/10;
    grid-row: 54/58;
    background-size: 14%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 65%;
}
    .bap4 {
    background: url(../../img/online/Vectorm2.png);
    grid-column: 4/7;
    grid-row: 64/69;
    background-repeat: no-repeat;
    background-size: 18%;
    background-position-x: 48%;
    background-position-y: 34%;
    transform: none;
}
    .bap7 {
    background: url(../../img/online/Vectorm3.png);
    grid-column: 6/10;
    grid-row: 75/78;
    background-repeat: no-repeat;
    background-size: 14%;
    background-position: 72% 79%;
    transform: none;
}
}

@media screen and (min-width: 1366px) {
#block_adap {
    background: url(../../img/online/background.png);
    min-height: 542px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;
    padding-top: 12rem;
}  
.bap2 {
    font-size: small;
    background: url(../../img/online/2.png);
    grid-column: 6/9;
    grid-row: 19/27;
    background-size: 39%;
    background-repeat: no-repeat;
    background-position-x: 72%;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 64%;
    padding-right: 11%;
    padding-top: 11px;
    background-position-y: 5%;
}
    
.bap3 {
    background: url(../../img/online/Vector-Smart-Object.png);
    grid-column: 4/8;
    grid-row: 19/21;
    background-size: 7%;
    background-repeat: no-repeat;
    background-position-x: 81%;
    background-position-y: 65%;
}
.bap5 {
    grid-column: 6/10;
    grid-row: 30/38;
    font-size: small;
    color: white;
    padding-left: 31%;
    padding-right: 48%;
    font-family: sans-serif;
    font-weight: inherit;
    background: url(../../img/online/3.png);
    background-size: 32%;
    background-repeat: no-repeat;
    padding-top: 4%;
    background-position-x: 22%;
    background-position-y: 3%;
    z-index: 3;
}
.bap6 {
    grid-column: 4/8;
    grid-row: 30/37;
    font-size: small;
    color: white;
    padding-left: 39%;
    padding-right: 40%;
    font-family: sans-serif;
    font-weight: inherit;
    background: url(../../img/online/4.png);
    background-size: 38%;
    background-repeat: no-repeat;
    padding-top: 2%;
    background-position-x: 37%;
    background-position-y: 0%;
}
.bap7 {
    background: url(../../img/online/Vector-Smart-Object-copy-2.png);
    grid-column: 6/9;
    grid-row: 33/30;
    background-repeat: no-repeat;
    background-size: 9%;
    background-position: 12% 79%;
    transform: rotate(4deg);
}
a#ba_btn {
    grid-column: 5/7;
    grid-row: 46/49;
    color: black;
    font-size: x-small;
    align-self: center;
    justify-self: center;
    text-decoration: none;
    font-family: sans-serif;
    background-color: #fdc932;
    padding: 11px;
    text-shadow: 0.1px 0.1px white;
}
    .bap4 {
    background: url(../../img/online/Vector-Smart-Object-copy.png);
    grid-column: 7/9;
    grid-row: 23/29;
    background-repeat: no-repeat;
    background-size: 12%;
    background-position-x: 48%;
    background-position-y: 81%;
    transform: rotate(6deg);
}
}
@media screen and (min-width: 1600px) {
#block_adap {
    background: url(../../img/online/background.png);
    min-height: 542px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;
    padding-top: 12rem;
}
.bap1 {
    background: url(../../img/online/1.png);
    grid-column: 5/8;
    grid-row: 19/28;
    background-size: 45%;
    background-repeat: no-repeat;
    font-size: small;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 51%;
    padding-right: 29%;
    padding-top: 16px;
    background-position-x: 52%;
}
.bap2 {
    font-size: small;
    background: url(../../img/online/2.png);
    grid-column: 6/9;
    grid-row: 19/28;
    background-size: 39%;
    background-repeat: no-repeat;
    background-position-x: 82%;
    color: white;
    font-family: sans-serif;
    font-weight: inherit;
    padding-left: 72%;
    padding-right: 8%;
    padding-top: 14px;
    background-position-y: 5%;
}
.bap3 {
    background: url(../../img/online/Vector-Smart-Object.png);
    grid-column: 4/8;
    grid-row: 19/21;
    background-size: 7%;
    background-repeat: no-repeat;
    background-position-x: 85%;
    background-position-y: 97%;
}
.bap5 {
    grid-column: 6/10;
    grid-row: 30/41;
    font-size: small;
    color: white;
    padding-left: 31%;
    padding-right: 53%;
    font-family: sans-serif;
    font-weight: inherit;
    background: url(../../img/online/3.png);
    background-size: 32%;
    background-repeat: no-repeat;
    padding-top: 4%;
    background-position-x: 22%;
    background-position-y: 3%;
    z-index: 3;
}
    .bap7 {
    background: url(../../img/online/Vector-Smart-Object-copy-2.png);
    grid-column: 6/9;
    grid-row: 35/30;
    background-repeat: no-repeat;
    background-size: 9%;
    background-position: 10% 79%;
    transform: rotate(4deg);
}
.bap6 {
    grid-column: 4/8;
    grid-row: 30/39;
    font-size: small;
    color: white;
    padding-left: 42%;
    padding-right: 40%;
    font-family: sans-serif;
    font-weight: inherit;
    background: url(../../img/online/4.png);
    background-size: 37%;
    background-repeat: no-repeat;
    padding-top: 4%;
    background-position-x: 40%;
    background-position-y: 32%;
}
    a#ba_btn {
    grid-column: 5/7;
    grid-row: 49/54;
    color: black;
    font-size: x-small;
    align-self: center;
    justify-self: center;
    text-decoration: none;
    font-family: sans-serif;
    background-color: #fdc932;
    padding: 11px;
    text-shadow: 0.1px 0.1px white;
}
    .bap4 {
    background: url(../../img/online/Vector-Smart-Object-copy.png);
    grid-column: 7/9;
    grid-row: 23/29;
    background-repeat: no-repeat;
    background-size: 12%;
    background-position-x: 61%;
    background-position-y: 81%;
    transform: rotate(6deg);
}
}