:root {
    --obl: 1100px;                                /*ширина области*/
    --obl2: 1100px;                                /*ширина области*/
    --obl3: 1100px;                                /*ширина области*/
    --obl4: 1100px;                                /*ширина области*/
    --int: 28px;                                  /*промежуток между плашками*/
    --pad: 30px;                                  /*отстпы padding по ширине*/
    --chng: 2px;                                  /*боковое смещение для рамки*/

    --obj2: calc((var(--obl2) - var(--chng)*2)/2); /*ширина объекта 2 колонки*/
    --pls2: calc((var(--obl2) - var(--int) - var(--chng)*2)/2);  /*ширина плашки 2 колонки*/
    --plo2: calc(var(--pls2) - var(--pad)*2);     /*ширина плашки с отступами 2 колонки*/
 
    --obj3: calc((var(--obl3) - var(--chng)*2)/3);                   /*ширина объекта 3 колонки*/
    --pls3: calc((var(--obl3) - 2*var(--int))/3);  /*ширина плашки 3 колонки*/
    --plo3: calc(var(--pls3) - var(--pad)*2);     /*ширина плашки с отступами 3 колонки*/

    --obj4: calc((var(--obl4) - var(--chng)*2)/4);                   /*ширина объекта 4 колонки*/
    --pls4: calc((var(--obl4) - 3*var(--int))/4);  /*ширина плашки 4 колонки*/
    --plo4: calc(var(--pls4) - var(--pad)*2);     /*ширина плашки с отступами 4 колонки*/

}

.art_bank.art_icon {
    display: block;
    width: 100%;
    position: relative;
    float: left;
}

.art_bank.art_icon .contentBody {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.art_bank.art_icon .contentBody .records-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
     flex-direction: row;
    -webkit-justify-content: space-around;
    -webkit-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	
    position: relative;
    align-items: stretch;
}

.art_bank.art_icon .contentBody .records-container {
    width: var(--obl);
}

.art_bank.art_icon .contentBody .records-container .object {
    display: block;
    position: relative;
    float: left;
    text-align: center;
    overflow: hidden;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-out;
    -o-transition: all 1.5s ease-out;
    transition: all 1.5s ease-in-out;
}

.art_bank.art_icon .contentBody .records-container .object:hover .record-field {
    background: #034176;
}

.art_bank.art_icon .contentBody .records-container .object:hover .record-field .objectImage {
    filter: contrast(0%) brightness(300%);
}

.art_bank.art_icon .contentBody .records-container .object:hover .record-field h4 {
    color: #ffffff;
}

.art_bank.art_icon .contentBody .records-container .object:hover .record-field .objectNote {
    color: #dfdddd;
}



.art_bank.art_icon .contentBody .records-container .object .record-field {
    text-decoration: none;
    margin-bottom: 40px;
    display: block;
    background-color: #f7f7f7;
    /*position: absolute;*/
    position: relative;
    padding: 50px var(--pad);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 0 2px 0 rgb(0 71 133 / 55%);
    -webkit-box-shadow: 0 0 2px 0 rgb(0 71 133 / 55%);
    box-shadow: 0 0 2px 0 rgb(0 71 133 / 55%);
    transition: all 1.5s ease;
    right: 0;
    left: 0;
}

.art_bank.art_icon .contentBody .records-container .object h4 {
    font-size: 20px;
    font-weight: normal;
    color: #155ab9;
}
.art_bank.art_icon .contentBody .records-container .object .record-field {
    background-image: url(x_pr_a.png);
    text-align: center;
    position: relative;
    margin-top: var(--chng);
}
.art_bank.art_icon .contentBody .records-container .object .record-field .objectNote {
    color: #222222;
    font-size: 14px;
}

/* two */
.art_bank.art_icon.two .contentBody .records-container .object {
    width: 50%;
    min-height: 300px;
}
.art_bank.art_icon.two .contentBody .records-container .object .record-field {
    height: 230px;
    width: var(--plo2);
}
.art_bank.art_icon.two .contentBody .records-container .object:nth-child(2n+1) .record-field {
    margin-right: calc(var(--obj2) - var(--pls2));
    margin-right: -o-calc(var(--obj2) - var(--pls2));
    margin-right: -moz-calc(var(--obj2) - var(--pls2));
    margin-right: -ms-calc(var(--obj2) - var(--pls2));
    margin-right: -webkit-calc(var(--obj2) - var(--pls2));
    margin-left: var(--chng);
}
.art_bank.art_icon.two .contentBody .records-container .object:nth-child(2n+2) .record-field {
    margin-left: calc(var(--obj2) - var(--pls2));
    margin-left: -o-calc(var(--obj2) - var(--pls2));
    margin-left: -moz-calc(var(--obj2) - var(--pls2));
    margin-left: -ms-calc(var(--obj3) - var(--pls3));
    margin-left: -webkit-calc(var(--obj2) - var(--pls2));
    margin-right: var(--chng);
}
/* two */

/* three */
.art_bank.art_icon.three .contentBody .records-container .object {
    width: 33.33%;
    min-height: 300px;
}
.art_bank.art_icon.three .contentBody .records-container .object .record-field {
    width: var(--plo3);
    height: 250px;
}

.art_bank.art_icon.three .contentBody .records-container .object:nth-child(3n+1) .record-field {
    margin-right: calc(var(--obj3) - var(--pls3));
    margin-right: -o-calc(var(--obj3) - var(--pls3));
    margin-right: -moz-calc(var(--obj3) - var(--pls3));
    margin-right: -ms-calc(var(--obj3) - var(--pls3));
    margin-right: -webkit-calc(var(--obj3) - var(--pls3));
    margin-left: var(--chng);
}
.art_bank.art_icon.three .contentBody .records-container .object:nth-child(3n+2) .record-field {
    margin-right: calc((var(--obj3) - var(--pls3))/2);
    margin-right: -o-calc((var(--obj3) - var(--pls3))/2);
    margin-right: -moz-calc((var(--obj3) - var(--pls3))/2);
    margin-right: -ms-calc((var(--obj3) - var(--pls3))/2);
    margin-right: -webkit-calc((var(--obj3) - var(--pls3))/2);
    margin-left: calc((var(--obj3) - var(--pls3))/2);
    margin-left: -o-calc((var(--obj3) - var(--pls3))/2);
    margin-left: -moz-calc((var(--obj3) - var(--pls3))/2);
    margin-left: -ms-calc((var(--obj3) - var(--pls3))/2);
    margin-left:  -webkit-calc((var(--obj3) - var(--pls3))/2);
}
.art_bank.art_icon.three .contentBody .records-container .object:nth-child(3n+3) .record-field {
    margin-left: calc(var(--obj3) - var(--pls3));
    margin-left: -o-calc(var(--obj3) - var(--pls3));
    margin-left: -moz-calc(var(--obj3) - var(--pls3));
    margin-left: -ms-calc(var(--obj3) - var(--pls3));
    margin-left: -webkit-calc(var(--obj3) - var(--pls3));
    margin-right: var(--chng);
}

/* four */
.art_bank.art_icon.four .contentBody .records-container .object {
    width: 25%;
    min-height: 500px;
}

.art_bank.art_icon.four .contentBody .records-container .object .record-field {
    width: var(--plo4);
    height: 330px;
}

.art_bank.art_icon.four .contentBody .records-container .object:nth-child(4n+1) .record-field {
    margin-right: calc(var(--obj4) - var(--pls4));
    margin-right: -o-calc(var(--obj4) - var(--pls4));
    margin-right: -moz-calc(var(--obj4) - var(--pls4));
    margin-right: -ms-calc(var(--obj4) - var(--pls4));
    margin-right: -webkit-calc(var(--obj4) - var(--pls4));
    margin-left: var(--chng);
}

.art_bank.art_icon.four .contentBody .records-container .object:nth-child(4n+2) .record-field {
    margin-left: calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-left: -o-calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-left: -moz-calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-left: -ms-calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-left: -webkit-calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-right: calc(var(--int)/2);
    margin-right: -o-calc(var(--int)/2);
    margin-right: -moz-calc(var(--int)/2);
    margin-right: -ms-calc(var(--int)/2);
    margin-right: -webkit-calc(var(--int)/2);
}

.art_bank.art_icon.four .contentBody .records-container .object:nth-child(4n+3) .record-field {
    margin-left: calc(var(--int)/2);
    margin-left: -o-calc(var(--int)/2);
    margin-left: -moz-calc(var(--int)/2);
    margin-left: -ms-calc(var(--int)/2);
    margin-left: -webkit-calc(var(--int)/2);
    margin-right: calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-right: -o-calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-right: -moz-calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-right: -ms-calc(var(--obj4) - var(--pls4) - var(--int)/2);
    margin-right: -webkit-calc(var(--obj4) - var(--pls4) - var(--int)/2);
}

.art_bank.art_icon.four .contentBody .records-container .object:nth-child(4n+4) .record-field {
    margin-left: calc(var(--obj4) - var(--pls4));
    margin-left: -o-calc(var(--obj4) - var(--pls4));
    margin-left: -moz-calc(var(--obj4) - var(--pls4));
    margin-left: -ms-calc(var(--obj4) - var(--pls4));
    margin-left: -webkit-calc(var(--obj4) - var(--pls4));
    margin-right: var(--chng);
}