.counter {
  display: inline-flex;

  /*cursor:none;*/
  width:450px;
  height:450px;
  max-width:100%;
  position:relative;
  justify-content:center;
  align-items:center;
  font-size: 50px;
  font-weight: 500;
  transition: height .2s ease-in-out;
  background: #fff;
  border-radius:50%;
}
.percentage {
  position:absolute;
  text-align:center;
  top:50%;
  left:0;
  right:0;
  vertical-align:middle;
  transform:translate3d(0,-50%,0);
}

progress.styled {
    display: block;
    /*border-radius: 6px;*/
    width: 100%;
    height: 22px;
    border: 1px solid gray;
}
progress.styled::-webkit-progress-bar {
    background-color: white;
    /*border-radius: 6px;*/
}

progress::-webkit-progress-value {
background: green;
}



/*canvas {
  position:absolute;
  top:0;
  left:0;
}*/

body {
  font-family: 'Noto Sans', sans-serif;
  text-align:center;
}

p {
  font-size: 28px;
}


/*ДЛЯ МОБИЛКА*/
@media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
html
{
  overflow-x: hidden;
}

.fs
{
 font-size: 42px;
}

.run_plan
{
    color: green; 
    margin-top: 1em; 
    font-size: 38px
}

.correct_g
{
    color:lime; 
    text-align: left; 
    font-size: 24px
}

.no_correct_n
{
    color:red; 
    text-align: left; 
    font-size: 24px
}

.comment_k
{
  font-size: 42px; 
  color: red; 
  margin: 0 auto; 
  width: 350px;
}

.counter {
  /*display: inline-flex;*/
  /*cursor:none;*/
  width:250px;
  height:250px;
  max-width:100%;
  position:relative;
  justify-content:center;
  align-items:center;
  font-size: 36px;
  font-weight: 500;
  transition: height .2s ease-in-out;
  background: #fff;
  border-radius:50%;
}

  .bg-style {
  /*margin-top: 250px;*/
  /*position: block;*/
  /*display: -webkit-inline-box;*/
  flex-direction: row;
}
.percentage {
  position:absolute;
  text-align:center;
  top:50%;
  left:0;
  right:0;
  vertical-align:middle;
  transform:translate3d(0,-50%,0);
}
.fs_contract
{
  text-align: left; 
  font-size: 24px
}
}

/*ДЛЯ ПЕКА*/
@media only screen and (min-device-width: 480px) {
    /* новое изменение */
.rovno_pacan 
{
  /*right: 50%;*/
  margin-left: auto;
  
}

.prpl
{
  padding-right: 50px; 
  padding-left: 50px;
}

.fs
{
 font-size: 55px;
}

.comment_k
{
  font-size: 50px; 
  color: red; 
  margin: 0 auto; 
  width: 350px;
}

.run_plan
{
    color: green; 
    margin-top: 1em; 
    font-size: 64px
}

.correct_g
{
    color:lime; 
    text-align: left; 
    font-size: 50px
}

.no_correct_n
{
    color:red; 
    text-align: left; 
    font-size: 50px
}

.counter {
  /*display: inline-flex;*/
  /*cursor:none;*/
  width:450px;
  height:450px;
  max-width:100%;
  position:relative;
  justify-content:center;
  align-items:center;
  font-size: 74px;
  font-weight: 500;
  transition: height .2s ease-in-out;
  background: #fff;
  border-radius:50%;
}

  .bg-style {
  margin-top: 250px;
  /*position: block;*/
  display: -webkit-inline-box;
  flex-direction: row;
}
.percentage {
  position:absolute;
  text-align:center;
  top:50%;
  left:0;
  right:0;
  vertical-align:middle;
  transform:translate3d(0,-50%,0);
}

.mt_contract
{
  margin-top: 50px;
}
.fs_contract
{
  text-align: left; 
  font-size: 34px
}
}