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

/*.playground{display: table; margin: 0 auto ;}*/
.playground{
    display: flex;
    /*height: 60vh;*/
    align-items: center;
    margin: 5vh 0;
}

h1,.h1{
    /*font-family: Glasten,Helvetica,Arial,Verdana,sans-serif;*/
    /*font-weight: lighter;*/
    /*font-style: normal;*/
    /*font-size: 3.4rem;*/
}
/*.body{width: 1280px;height: 550px;display: table-row;}*/
/*.nixie{width:0; display: table-cell;}*/
/*.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 */
    .cronixie_body[data-ver="1"] .nixie[data-d="0"]{background-image: url(./img/768/0.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="1"]{background-image: url(./img/768/1.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="2"]{background-image: url(./img/768/2_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="3"]{background-image: url(./img/768/3_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="4"]{background-image: url(./img/768/4.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="5"]{background-image: url(./img/768/5.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="6"]{background-image: url(./img/768/6_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="7"]{background-image: url(./img/768/7_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="8"]{background-image: url(./img/768/8.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="9"]{background-image: url(./img/768/9.JPG);}

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

        /*body{background-color: red;}*/
	/*.body{width: 768px;height:340px;}*/
	/*.nixie{background-size: 786px auto;width:0;}*/
    /*.nixie0{width:147px;background-position: 0 0;}*/
    /*.nixie1{width:122px;background-position: -147px 0;}*/
    /*.nixie2{width:125px;background-position: -269px 0;}*/
    /*.nixie3{width:128px;background-position: -394px 0;}*/
    /*.nixie4{width:125px;background-position: -522px 0;}*/
    /*.nixie5{width:144px;background-position: -647px 0;}*/
}

@media screen and (min-width: 480px) and (max-width: 767px){
	/* 480 - 768 */
    .cronixie_body[data-ver="1"] .nixie[data-d="0"]{background-image: url(./img/480/0.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="1"]{background-image: url(./img/480/1.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="2"]{background-image: url(./img/480/2_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="3"]{background-image: url(./img/480/3_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="4"]{background-image: url(./img/480/4.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="5"]{background-image: url(./img/480/5.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="6"]{background-image: url(./img/480/6_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="7"]{background-image: url(./img/480/7_.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="8"]{background-image: url(./img/480/8.JPG);}
    .cronixie_body[data-ver="1"] .nixie[data-d="9"]{background-image: url(./img/480/9.JPG);}

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

	/*body{background-color: red;}*/
	/*.body{width: 480px;height:210px;}*/
	/*.nixie{background-size: 480px auto;width:0;}*/
    /*.nixie0{width:86px;background-position: 0 0;}*/
    /*.nixie1{width:74px;background-position: -86px 0;}*/
    /*.nixie2{width:80px;background-position: -160px 0;}*/
    /*.nixie3{width:77px;background-position: -240px 0;}*/
    /*.nixie4{width:75px;background-position: -317px 0;}*/
    /*.nixie5{width:80px;background-position: -392px 0;}*/
}

/*@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; }*/
    /*.playground{height: 100vh;}*/
  }

body:hover{color: #212529;}

.container{text-align: left;transition: all .5s ease 0s;}
.container:hover{color:#d3e1fd;}
.container:active{color:#646c7a;}
.container.activated{color:#dae5fa;}
.container.activated:active{color:#ffffff;}

.container a{color:inherit;transition: all .5s ease 0s;}
.container a:hover{color:#d3e1fd;}

body:hover button,body:hover a.btn{opacity: .2;}
.container button,.container a.btn{transition: all .5s ease 0s;}
.container:hover button, .container:hover a.btn{opacity: .9;}
.container button:hover, .container a.btn:hover{opacity: 1;}


/*
.fab{display:block;width:32px;height:32px;background-size: contain; filter: invert(1);}
.fa-vk{background: url(./ico/vk-brands.svg) no-repeat center;}
*/

.fa-vk:hover{color: #4a76a8;text-shadow: 0px 0px 3px #ffffff;}
.fa-instagram:hover{color: #E33A61;text-shadow: 0px 0px 1px #ffffff;}
.fa-android:hover{color: #99CC00;}

@media (min-width: 1200px){
  #croppplay{
    --wii: 1140px;
  }
}

.logo{
    background-position: center;
    background-image: url(./images/drawing_curves.opt.min.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 20mm;
    width: 100%;
    display: block;
    margin: 5vh auto;
    transition: all .3s ease 0s;
    filter: invert(0);
}
.logo:hover{
    filter: invert(1);
}
@media screen and (min-width: 768px){
    .logo{
        background-image: url(./images/drawing_curves__left.opt.min.svg);
        background-position: left;
    }
}

.cl_col{
    padding: 0 15px 15px;
    width: 100%;
    display: flex;
}
.cl_frame{
    border: none;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    border-radius: 2em;
    margin: 0 auto;
    float: left;
    width: 500px;
    height: 470px;
}
@media screen and (max-width: 545px) {
    .cl_frame{
        width: calc(100vw - 45px);
        height: calc((100vw - 45px) * 470/500);
    }
}
@media screen and (min-width: 992px) {
    .cl_col{
        margin-right: 15px;
        float: left;
        width: 500px;
    }
    .cl_col + div{

    }
}