/* roboto-slab-regular - cyrillic_latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/roboto-slab-v24-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
   src: url('../fonts/roboto-slab-v24-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/roboto-slab-v24-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/roboto-slab-v24-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
        url('../fonts/roboto-slab-v24-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/roboto-slab-v24-cyrillic_latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
 }
 /* roboto-slab-500 - cyrillic_latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/roboto-slab-v24-cyrillic_latin-500.eot'); /* IE9 Compat Modes */
   src: url('../fonts/roboto-slab-v24-cyrillic_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/roboto-slab-v24-cyrillic_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/roboto-slab-v24-cyrillic_latin-500.woff') format('woff'), /* Modern Browsers */
        url('../fonts/roboto-slab-v24-cyrillic_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/roboto-slab-v24-cyrillic_latin-500.svg#RobotoSlab') format('svg'); /* Legacy iOS */
 }
 /* roboto-slab-600 - cyrillic_latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto Slab';
   font-style: normal;
   font-weight: 600;
   src: url('../fonts/roboto-slab-v24-cyrillic_latin-600.eot'); /* IE9 Compat Modes */
   src: url('../fonts/roboto-slab-v24-cyrillic_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/roboto-slab-v24-cyrillic_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/roboto-slab-v24-cyrillic_latin-600.woff') format('woff'), /* Modern Browsers */
        url('../fonts/roboto-slab-v24-cyrillic_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/roboto-slab-v24-cyrillic_latin-600.svg#RobotoSlab') format('svg'); /* Legacy iOS */
 }
:root {
   --color-green: #58c93a
}
html{
   height: 100%;
}
body {
   background-color: #f9fff9;
   font-family: 'Roboto Slab', serif;
   min-height: 100%;
   position: relative;
}
p::selection{
   background: var(--color-green);
}
/*Decoracion*/
.decoration{
   display: none;
   flex-flow: row nowrap;
   width: 100%;
   position: absolute;
   overflow: hidden;
}
/*popup-container*/
.container-popup{
   display: none;
   position: fixed;
   background-image: url(../img/bg.png);
   background-repeat: repeat;
   width: 100%;
   height: 100%;
   z-index: 300;
}
.popup{
   width: 300px;
   height: 500px;
   margin: 32px auto;
   background-color: #f9fff9;
   padding: 25px 15px 15px 15px;
   border-radius: 20px;
   -webkit-box-shadow: 0px 0px 35px 9px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 0px 0px 35px 9px rgba(0, 0, 0, 0.6);
   box-shadow: 0px 0px 35px 9px rgba(0, 0, 0, 0.6);
}
.popup>h2{
   color: #454545;
   text-align: center;
   font-size: 110%;
   font-weight: 600;
   margin-bottom: 10px;
}
.popup>p{
   color: #606060;
   text-align: center;
   line-height: 110%;
   font-weight: 400;
}
.popup-block{
   margin: 0 auto;
   width: 100%;
}
.popup-block>div{
   display: flex;
   justify-content: center;
   margin-top: 15px;
}
.popup-icon{

   width: 34px;
   height: 34px;
   border-radius: 10px;
   position: relative;
   overflow: hidden;
   clear: both;
}
.popup-block>div>p{
   display: block;
   position: relative;
   color: #606060;
   font-weight: 600;
   font-size: 85%;
   padding: 10px 10px 0 10px;
   text-transform: uppercase;
}
div.container-popup>div>div:nth-child(4){
   width: 180px;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   margin: 40px auto ;
   background-color: #ffffff;
   border-radius: 10px;
   border: 1px solid  var(--color-green);
   padding-top:5px ;
}
div.container-popup>div>div:nth-child(4)>p{
   display: block;
   position: relative;
   color: #606060;
   font-weight: 600;
   font-size: 85%;
   text-transform: uppercase;
}
div.container-popup>div>div:nth-child(4)>img{
   padding: 0 0 4px 10px;
   cursor: pointer;
}
div.container-popup>div>div:nth-child(5)>p{
   display: none;
   text-align: center;
   font-size: 80%;
}
header , footer {  /*site header styles*/
   background-color: #292929;
   -webkit-box-shadow: 0px 0px 35px 9px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 0px 0px 35px 9px rgba(0, 0, 0, 0.6);
   box-shadow: 0px 0px 35px 9px rgba(0, 0, 0, 0.6);
}
header{
   height: 88px;  
}
.header{
   position: relative;
}
.content-center{
   max-width: 1000px;
   margin: 0 auto;
}
.logo {
   padding-top: 1px;
   float: left;
}
body > header > div > div.logo > a > img:hover{
   transform: scale(0.95);
   transition: 1s;
}
/*menu-burger*/
.btn-burger{
   display: none;
   cursor: pointer;
   float: right;
   position: relative;
   top: -55px;
   margin-right: 20px;
}
.bar1 , .bar2 , .bar3{
   display: block;
   width: 24px;
   height: 4px;
   background-color: #dedede;
   border-radius: 3px;
   position: relative;
}
.bar1chan{
   transform-origin: left center;
   transform: rotate(45deg);
   transition-duration: 500ms;
}
.bar2{
   margin: 4px 0;
   opacity: 0;
}
.bar3chan{
   transform-origin: left center;
   transform: rotate(-45deg);
   transition-duration: 500ms;
   top: 1px; 
}
.header-right {
   display: block;
   float: right;
   position: relative;
}
.change-icon{
   float: right;
   position: absolute;
   right: 460px;
   padding-top: 25px;
   cursor: pointer;
}
.menu {
  float: right;
}
.menu-list {
   display: flex; 
   flex-wrap: wrap;
   margin: 0 auto;
}
.menu-list:last-child{
   border-right: 1px solid #000000;
}
.menu-iteam {
    height: 85px;
    border-left: 1px solid #000000; 
}
.menu-iteam:hover {
border-bottom: 3px solid var(--color-green);
}
.menu-link {
  overflow: hidden;
}
nav>ul>li>a {
   color: #ffffff;
   font-size: 104%;
   font-weight: 600;
   text-align: center;
   display: block;
   height: 100%;
   padding: 33px 25px 0 25px;
}  
nav>ul>li>a:active {
   color: var(--color-green);
} 
nav>ul>li>a:hover {
   color: var(--color-green);
}
main{
   -moz-min-height: calc(100vh - 90px - 28px);
   -webkit-min-height: calc(100vh - 90px - 28px);
   min-height: calc(100vh - 90px - 28px);
}
.main{
   margin: 32px 1% 32px 1%;
   overflow: hidden;
   width: 98%;
}
.article{
   width: 70%;
   margin-right: 3.2% ;
   float: left;
}
.your-class{
   width: 100%;
}
.your-class div{
   border-radius: 10px;
}
.your-class img{
   max-width: 100%;
}
.heading{
   color: #454545;
   text-align: center;
   font-size: 130%;
   font-weight: 600;
   margin: 0 0 22px 0;
}
.text>p{
   font-family: 'Roboto Slab', serif;
   color: #606060;
   line-height: 165%;
   font-weight: 400;
}
.dark-text{
   color: #9c9c9c;
}
.aside{
   width: 25.8%;
   float: right;
}
.block-view{
   float: left;
   width: 100%;
}
.aside h2{
   font-weight: 500;
   color: #454545;
   background: #f1f1f1;
   border-left: 3px solid var(--color-green);
   border-radius: 0 10px 10px 0;
   padding: 8px;
   clear: both;
  }
.icon-link{
   display: flex;
   box-sizing: border-box;
   margin: 20px 0;
}
.icon-link:hover{
   background: #f1f1f1;
   border-radius: 10px;
   box-sizing: border-box;
}
.icon-link-dark{
   display: flex;
   box-sizing: border-box;
   margin: 20px 0; 
}
.icon-link-dark:hover{
   background: #177526;
   border-radius: 10px;
   box-sizing: border-box;
}
.aside a:nth-child(odd){ 
   display: block;
   width: 34px;
   height: 34px;
   margin: 0  10px 0 0;
   border-radius: 10px;
   position: relative;
   overflow: hidden;
   clear: both;
}
.aside a:nth-child(even){
   display: block;
   margin-top: 11px;
   font-weight: 600;
   font-size: 75%;
   color: #707070;
   text-transform: uppercase;
}
.dzen-icon{
   position: absolute;
   left: -1px;  
}
.youtube-icon{
   position: absolute;
   left: -37px;
}
.insta-icon{
   position: absolute;
   left: -73px;
}
.vk-icon{
   position: absolute;
   left: -327px;
}
.rut-icon{
   position: absolute;
   left: -363px;
}

.sber-icon{
   position: absolute;
   left: -111px;
}
.qiwi-icon{
   position: absolute;
   left: -147px;
}
.youm-icon{
   position: absolute;
   left: -183px;
}
.whats-icon{
   position: absolute;
   left: -219px;
}
.tele-icon{
   position: absolute;
   left: -255px;
}
.yand-icon{
   position: absolute;
   left: -291px;
}
.footer{
   height: 90px;
}
.copyright{
   display: block;
   float: left;
   padding: 36px 0 0 8px;
   color: #dedede;
   font-size: 85%;
}
.container-logo-footer{ 
   width: 25.8%;
   float: right;
   display: flex;
   justify-content: center;
}
.logo-footer{
   padding-top: 3px;
}
.logo-footer:hover{
   transform: scale(0.95);
   transition: 1s;
}
.tab{
   margin: 0 auto;
   width: 80%;
}
table{
   width: 100%;
   margin-top: 30px;
}
table>tbody>tr>td>h2{
   border-left: 4px solid var(--color-green);
   padding: 8px;
   margin: 8px 0 8px 0;
   font-weight: 400;
   color: #454545;
   background: #f1f1f1;
}
table>tbody>tr>td>a{
   border: 1px solid var(--color-green);
   border-radius: 15px;
   padding: 5px;
   margin: 8px 0 8px 50%;
   font-weight: 500;
   color: #656565;
   background: #ffffff;
}
table>tbody>tr>td>a:hover{
   transition-duration: 500ms;
   color: var(--color-green);
   -webkit-box-shadow: 0px 0px 10px 7px rgba(88, 201, 58, 0.21);
   -moz-box-shadow: 0px 0px 10px 7px rgba(88, 201, 58, 0.21);
   box-shadow: 0px 0px 10px 7px rgba(88, 201, 58, 0.21);  
}
.btns{
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
   align-items: center;
   width: 300px;
   margin: 18px auto;
   overflow: hidden;
}
.sett-icon{
   width: 45%; 
}
body > main > div > div.btns > a:nth-child(1) > img{
   display:block;
}
body > main > div > div.btns > a:nth-child(2){ 
   display:block;
   border: 1px solid var(--color-green);
   border-radius: 15px;
   padding: 8px;
   font-weight: 500;
   color: #656565;
   background: #ffffff;
}
body > main > div > div.btns > a:nth-child(2):hover{
   transition-duration: 500ms;
   color: var(--color-green);
   -webkit-box-shadow: 0px 0px 10px 7px rgba(88, 201, 58, 0.21);
   -moz-box-shadow: 0px 0px 10px 7px rgba(88, 201, 58, 0.21);
   box-shadow: 0px 0px 10px 7px rgba(88, 201, 58, 0.21);
}
body > main > div > div.btns > a:nth-child(2):visited{
   color: red;
}
/*Help chapter*/
.inDevelopment{
   background-image: url(../img/bg.png);
   background-repeat: repeat;
   height: 180px;
   width: 90%;
   margin: 20px auto;
   border-radius: 10px;
}
.help{
   
   color: #c6c6c6;
   padding: 20px;
   text-align: center;
   font-size: 110%;
   font-weight: 600;  
}

@media all and (max-width: 1000px){
   .main{
      margin: 30px 1% 20px 1% ;
      width: 98%;
   }
   .article{
      width: 73%;
      margin: 0 1.2% 18px 0;
   }
   .aside{
      width: 25.8%;
   }
}
@media all and (max-width: 820px){
   .header-right{
      display: block;
      float: none;
   } 
   .logo{
      display: block;
      float: none;
      text-align: center;
   }
   .btn-burger{
      display: block;
   }
   .wrapper{
      position: relative;
      width: 100%;
      margin: 0 auto;
   }
   .change-icon{
      float: none;
      right: 0;
      left: 3%;
      bottom: 30px;
      padding-top: 0;
      position: absolute;
   }
   .menu{
      float: none;
      position: relative;

   }
   .menu-list{
      width: 100%;
      background-color: #292929;
      position: absolute;
      z-index: 10;
      flex-direction: column;
   }
   .menu-iteam {
      width: 120px;
      margin: 0 auto;
      border-left: none;
      height: auto;
   }
   .menu-iteam:hover {
      border-bottom: none;
   }
      nav>ul>li>a{
      margin: 7px auto;
      padding: 7px 5px;
      height: auto;
   }
   nav>ul>li>a:hover{
      border-radius: 10px;
      background: #177526;
      color: #dedede;
   }
}
@media all and (max-width: 760px){
   .heading{
      font-size: 115%;
   }
   .text>p{
      font-size: 90%;
   }
   .aside h2{
      font-size: 90%;
   }
   .aside a:nth-child(even){
      font-size: 70%;
   }
   .icon-link{
      margin: 18px 0; 
   }
   .icon-link-dark{
      margin: 18px 0; 
   }
}
@media all and (max-width: 640px){
   .content-center{
   max-width: 640px;
   }
   body > header > div > div.logo > a > img{
      width: 170px;   
   }
   header{
      height: 80px;
   }
   .popup{
      height: 325px;
      width: 240px;
   }
   .popup>h2{
      font-size: 94%;
   }
   .popup>p{
     
      font-size: 90%;
   }
   div.container-popup>div>div:nth-child(4)>p{
      padding-top: 1px;
      font-size: 80%; 
   }
   main{
      overflow: visible;
      
   }
   .main{
      margin: 21px 1.5% 20px 1.5% ;
      width: 97%;
   }
   .article{
      width: 100%;
      margin:0 auto 18px auto;
   }
   .heading{
      margin: 0 0 13px 0;
   }
   .aside{
      float: none;
      width: 100%;
   }
   .aside h2{
      border-radius: 10px;
      border-left: none;
      text-align: center;
   }
   .container-logo-footer{ 
      width: 48.5%;
      float: right;
      display: block;
      
   }
   .logo-footer{
      padding-top: 3px;
      float: right;
      width: 170px;
   }
   .copyright {
      width: 48.5%;
      font-size: 75%;
      float: left;
      padding: 36px 0 0 8px;
   }
   .footer{
      height: 80px;
   }
   /*Files*/
   .btns{
      width: 220px;
   }
   .tab{
      width: 90%;
   }
   table>tbody>tr>td>h2{
      font-size: 80%;
   }
   table>tbody>tr>td>a{
      font-size: 80%;
      padding: 5px;
      margin: 8px 0 8px 30%;  
   }
   .sett-icon{
      width: 35%;   
   }
   body > main > div > div.btns > a:nth-child(2){
      font-size: 80%;
   }
/*Help and videohost chapter__________________*/
.inDevelopment{
   height: 200px;
   }
   .help{
   font-size: 90%;
   }
}
@media all and (max-width: 360px){
/*Files_______________________________________*/
   table>tbody>tr>td>a{
      margin: 8px 0 8px 18%;
   }
}