body{background-color: black;color:black;/*color:#d3e1fd;*/text-align: center;transition: all .5s ease 0s;margin:0;}
body:hover{color: #212529;}

.playground{/*width: 90vw;*/display: block; margin: 0 auto ; background: transparent;}
.body{height: 100vh; display: flex;}
@media screen and (orientation:landscape) {
    .nixie{
        /*width:calc(100% / 6);*/ display: table-cell;
        background-size: 100vw 66.25vw;
        height: 44.0vw;
        margin-top: calc((100vh - 55vw) / 2);
    }
    .nixie0{width:18.5vw;background-position: 0 0;}
    .nixie1{width:14.9vw;background-position: -18.5vw 0;}
    .nixie2{width:15.6vw;background-position: -33.9vw 0;}
    .nixie3{width:16.0vw;background-position: -49.5vw 0;}
    .nixie4{width:16.4vw;background-position: -65.6vw 0;}
    .nixie5{width:18.0vw;background-position: -82.0vw 0;}
}

@media screen and (orientation:portrait) {
    .body{
        flex-wrap: wrap;
    }

    .nixie{
        /*box-shadow: 0px 0px 10px inset white;*/
        width: 50vw;
        height: calc(100vh/3);
        position: relative;

        background-size: 150vh calc(100vh + 0px);
        background-position: calc(150vh + 50vw + 1.5 * 150vh) -26vh;
    }
    .nixie:after{
        display: block; content: ""; background: #020107;
        position: absolute; top: 0; left: 0;
        width: calc(50vw - 1.5 * 16vh);height: 100%;
    }
    .nixie:nth-child(2n){
        background-position: calc(150vh + 0vw + 1.5 * -50vh) -26vh;
    }
    .nixie:nth-child(2n):after{
        left: auto; right: 0;
    }
    body{
        background: black;
    }
}

.nixie[data-d="0"]{background-image: url(./img/0.JPG);}
.nixie[data-d="1"]{background-image: url(./img/1.JPG);}
.nixie[data-d="2"]{background-image: url(./img/2_.JPG);}
.nixie[data-d="3"]{background-image: url(./img/3_.JPG);}
.nixie[data-d="4"]{background-image: url(./img/4.JPG);}
.nixie[data-d="5"]{background-image: url(./img/5.JPG);}
.nixie[data-d="6"]{background-image: url(./img/6_.JPG);}
.nixie[data-d="7"]{background-image: url(./img/7_.JPG);}
.nixie[data-d="8"]{background-image: url(./img/8.JPG);}
.nixie[data-d="9"]{background-image: url(./img/9.JPG);}


/*
.nixie0{width:238px;background-position: 0 0;}
.nixie1{width:191px;background-position: -238px 0;}
.nixie2{width:200px;background-position: -434px 0;}
.nixie3{width:206px;background-position: -634px 0;}
.nixie4{width:210px;background-position: -840px 0;}
.nixie5{width:230px;background-position: -1050px 0;}
*/
@media screen and (min-width: 768px) and (max-width: 1279px){
	/* 768 - 1280 */
    .nixie[data-d="0"]{background-image: url(./img/768/0.JPG);}
    .nixie[data-d="1"]{background-image: url(./img/768/1.JPG);}
    .nixie[data-d="2"]{background-image: url(./img/768/2_.JPG);}
    .nixie[data-d="3"]{background-image: url(./img/768/3_.JPG);}
    .nixie[data-d="4"]{background-image: url(./img/768/4.JPG);}
    .nixie[data-d="5"]{background-image: url(./img/768/5.JPG);}
    .nixie[data-d="6"]{background-image: url(./img/768/6_.JPG);}
    .nixie[data-d="7"]{background-image: url(./img/768/7_.JPG);}
    .nixie[data-d="8"]{background-image: url(./img/768/8.JPG);}
    .nixie[data-d="9"]{background-image: url(./img/768/9.JPG);}
}

@media screen and (min-width: 480px) and (max-width: 767px){
	/* 768 - 1280 */
    .nixie[data-d="0"]{background-image: url(./img/480/0.JPG);}
    .nixie[data-d="1"]{background-image: url(./img/480/1.JPG);}
    .nixie[data-d="2"]{background-image: url(./img/480/2_.JPG);}
    .nixie[data-d="3"]{background-image: url(./img/480/3_.JPG);}
    .nixie[data-d="4"]{background-image: url(./img/480/4.JPG);}
    .nixie[data-d="5"]{background-image: url(./img/480/5.JPG);}
    .nixie[data-d="6"]{background-image: url(./img/480/6_.JPG);}
    .nixie[data-d="7"]{background-image: url(./img/480/7_.JPG);}
    .nixie[data-d="8"]{background-image: url(./img/480/8.JPG);}
    .nixie[data-d="9"]{background-image: url(./img/480/9.JPG);}
}
/*
@media screen and (min-width: 0px) and (max-width: 479px){
    .playground{margin-top:-204px;}
    .playground:after{color:#212529;content:"too small screen"};
    .body{width: 210px; height:0;}
    .nixie{display: none;}
    .nixie5{width:210px;background-position: -1050px 0;display: table-cell;}
}
*/
@media  all and (orientation: landscape){
    .b-ofert{
        min-height: 100vh;
    }
}

@media (device-width: 100vw) and (device-height: 100vh) {
   /* body {
      background: red;
    }*/
    html { overflow:  hidden; }
  }


/*
Боевая окраска!
*/

.nixie{
    position: relative;
    /* filter: saturate(1.5); */
}
.nixie:after{
    content: "";
    background: #f30000;
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
    mix-blend-mode: hue;
    /* filter: saturate(4.5); */
}