@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
                  
				         /* | ----------------- | */
				         /* | -- ОБЩИЕ СТИЛИ -- | */
				         /* | ----------------- | */

body {
	font-family: 'Roboto', Arial, sans-serif;
	background: #090915; /* общий цвет фона */
	color: #eeeeee;      /* общий цвет текста для заголовков и описаний */
}

::selection { /* задаём цвет выделения текста на сайте */
  background: #006109; /* цвет фона */
  color: #ffffff; /* цвет текста */
  text-shadow: none;
}


				         /* | ------------------ | */
				         /* | -- СТИЛИ БЛОКОВ -- | */
				         /* | ------------------ | */

/* ШАПКА */
    header {
	  /* position: fixed; */ /* фиксируем шапку сверху */
	  top: 0;       /* отступ сверху */
	  width: 100%;  /* резиновый макет ширины блока шапки */
	  z-index: 900; /* позиция шапки по отношению других блоков */
	  background: #26182f; /* цвет фона шапки */
}

    .blok-header {
	   margin: 0 auto;    /* выравнивание блока шапки по центру */
	   max-width: 1300px; /* макс. ширина блок шапки */
	   padding-top: 5px;   /* отступ внутри блока сверху 5 */
}


/* КОНТЕНТ */
    main {
	  margin: 0 auto;    /* выравнивание блока меню по центру */
	  width: 100%;       /* задаём резиновый макет ширины блока main */
	  max-width: 1300px; /* задаём макс. ширину блока */
      margin-top: 30px; /* отступ сверху от края экрана*/
}

    .blok-content { /* OLD NAME: blok-center */
	   margin: 0 auto;    /* выравнивание блока с контентом по центру */
	   max-width: 1300px; /* макс. ширина блок контента */
	   padding: 0 15px;   /* отступ внутри блока слева/справо 15 */
}

    article {
	   margin-bottom: 20px; /* отступ снизу от блока к следующему */
}

	.info-content {
       padding: 0;
}

    .blok-series-content {
	   margin: 0 auto;
	   max-width: 1300px;
	   padding: 8px 15px;
	   /* background: #26182f; */
}

    footer {
	   border-top: 1px solid #e1e0e0;
	   font-size: 0.85em;  /* размер шрифта для заголовка */
	   text-align: center; /* выравниваем все блоки внутри тега footer по центру */
}


				         /* | ------------------ | */
				         /* | --- СТИЛИ МЕНЮ --- | */
				         /* | ------------------ | */
						 
/* МЕНЮ ШАПКИ */
    nav {
	  margin: 0 auto;    /* выравнивание блока меню по центру */
	  max-width: 1000px; /* макс. ширина блок контента */
}

    .menu-header {
	  width: 100%;
	  text-align: center;
	  padding-bottom: 15px;   /* отступ внутри блока снизу 15 */
}
  
    .menu-header li {
	   display: inline-block; /* Делаем меню по горизонтали */
	   font-weight: 600;      /* толщина шрифта */
}
  
    .menu-header li a {
	   color: #eeeeee;        /* цвет текста меню */
	   text-decoration: none; /* убираем нижнее подчёркивание */
	   padding: 1px 5px;      /* отступы сверху\снизу 1 слева\справо 5 */
	   display: block;
	   text-transform: uppercase; /* заголовок всегда заглавными буквами */
}

    .menu-header li a:hover {
	   color: #58c93a; /* цвет текста при наведении стрелки мышки */
}


/* МЕНЮ НАВИГАЦИИ */
    .menu-txt {
	   margin: 0 0 15px 10px; /* отступы сверху\справо 0, снизу 15, слева 10 */
}


				  /* | ------------------------------- | */
				  /* | -- СТИЛИ ТЕКСТА И ЗАГОЛОВКОВ -- | */
				  /* | ------------------------------- | */

    li {
	  list-style-type: none; /* Убираем маркеры у списков */
}

    p {
	  font-family: 'Roboto', Arial, sans-serif;
	  font-size: 1.22em; /* размер шрифта для текста описаний */
      line-height: 1.5; /* межстрочный интервал */
	  white-space: pre-wrap; /* свободное форматирование текста, учитывает пробелы переносы и не выходит за пределы границы ширины внутри блока в котором находится */
}

    .akcent {
	    color: #ffe498;
	    font-size: 1.25em;  /* Задаём размер текста */
        font-weight: 500;
}

    kbd {
	    display: inline;
	    display: inline-block;
	    min-width: 1em;
	    padding: .2em .3em;
	    font: normal .85em/1 "Arial, Lucida Grande", Lucida, sans-serif;
	    text-align: center;
	    text-decoration: none;
	    -moz-border-radius: .3em;
	    -webkit-border-radius: .3em;
	    border-radius: .3em;
	    border: none;
		cursor: pointer;
}

    kbd {
	    background: rgb(250, 250, 250);
	    background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
	    background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	    color:  rgb(50, 50, 50);
	    text-shadow: 0 0 2px rgb(255, 255, 255);
	    -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	   -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	   box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

    kbd:active {
	    transform: scale(0.85); 
        box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

	.zag-center {
		 text-align: center; /* выравнивание по центру */
}

	h1 { /* OLD NAME: zag2-h1 */
	     margin: 0 0 20px 0; /* отступы: сверху, справо, снизу, слева */
		 font-size: 2.50em;  /* размер текста для заголовка */
         /* text-transform: uppercase; */ /* текст заглавными буквами */
		 font-weight: 600;   /* толщина шрифта */
		 color: #eeeeee;     /* цвет текста */
		 line-height: 1.1;   /* межстрочный интервал */
}

	h2 { /* OLD NAME: zag2-h2 */
	     margin: 20px 0 10px 0; /* отступы: сверху, справо, снизу, слева */
		 font-size: 1.75em;     /* размер шрифта для заголовка */
		 font-weight: 600;      /* толщина шрифта */
		 color: #eeeeee;        /* цвет шрифта */
		 line-height: 1.0;      /* межстрочный интервал */
}

    .zag-screenshot {
	    margin: 10px 0 10px 0;
		font-size: 1.50em;
		text-align: center;
		font-weight: 600;
		color: #eeeeee;
		line-height: 1.1;
}

    .zag-post {
	    margin: 10px 0 0 0;
		font-weight: 600;
		font-size: 1.50em;
}

	h4 {
	     margin: 0 0 10px 0; /* отступы: сверху, справо, снизу, слева */
		 font-size: 1.20em;  /* размер текста для заголовка */
		 font-weight: 600;   /* толщина шрифта */
		 color: #eeeeee;     /* цвет текста */
}


/* ТЕКСТ ЦИТАТ */
    .block-citat {
	     padding: 0 120px;
}

    .citata {
	     min-height: 20px;
         padding: 18px;
         margin-bottom: 20px;
         background-color: #372044;
         border: 1px solid #eeeeee;
         border-radius: 4px;
         -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
         box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
}


				         /* | ------------------ | */
				         /* | --- WEB ССЫЛКИ --- | */
				         /* | ------------------ | */

    a.web {
	  color: #58c93a;   /* цвет ссылок */
	  text-decoration: none; /* убираем нижнее подчёркивание */
}

    .web:hover {
	  color: #ffe498;        /* цвет ссылок при наведении стрелки мышки */
	  text-decoration: underline; /* нижнее подчёркивание */
}

/* СОДЕРЖАНИЕ */

    a.settings {
	  font-size: 1.20em;
	  color: #58c93a;   /* цвет ссылок */
	  text-decoration: none; /* убираем нижнее подчёркивание */
}

    .settings:hover {
	  color: #eeeeee;        /* цвет ссылок при наведении стрелки мышки */
	  text-decoration: underline; /* нижнее подчёркивание */
}

    a.options {
	  font-size: 1.20em;
	  color: #ffe498;   /* цвет ссылок */
	  text-decoration: none; /* убираем нижнее подчёркивание */
}

    .options:hover {
	  color: #eeeeee;        /* цвет ссылок при наведении стрелки мышки */
	  text-decoration: underline; /* нижнее подчёркивание */
}



				       /* | ---------------------- | */
				       /* | -- БЛОК АУДИО-ВИДЕО -- | */
				       /* | ---------------------- | */


/* ВИДЕО */
	.blog-video { /* OLD NAME: blog-content-video */
	   margin: 0 auto;   /* выравниваем блок видео по центру */
	   max-width: 850px; /* задаём макс. ширину блока для видео */
}

    .blog-mini-video { /* OLD NAME: blog-content-mini-vide */
	   margin: 0 auto;    /* выравниваем блок виде по центру */
	   max-width: 1300px; /* задаём макс. ширину блока под нсколько видео */
}

    .Player-mini-center {
       text-align: center;
}

	iframe {
	   margin: 10px 10px 0 0; /* отступы: сверху, справо, снизу, слева */
}

    .Player-full {
        position: relative;
        padding-bottom: 56.25%;
        overflow: hidden;
}

    .Player-full iframe {		
        position: absolute;
        width: 100%;
        height: 100%;        
}


				     /* | ------------------------- | */
				     /* | --- СТИЛИ ИЗОБРАЖЕНИЙ --- | */
				     /* | ------------------------- | */

/* ЛОГОТИП */
    .logo {
	  margin: 20px auto; /* отступ лого сверху и снизу 20 */
	  width: 100%;       /* адаптивная ширина изображения */
	  max-width: 300px;  /* максимальная ширина изображения */
	  display: block;
	  padding: 0 10px;    /* отступы слева\справо */
}

    .logo-footer {
	  width: 100%;       /* адаптивная ширина изображения */
	  max-width: 220px;  /* максимальная ширина изображения */
}

    .img-block { /* OLD NAME: img-content */
	   text-align: center; /* выравнивание блока по центру */
}

    .soc_footer {
      -webkit-filter: sepia(100%);
      filter: sepia(100%);
}

    .soc_footer:hover {
      filter: none;
}

/* ОБТЕКАНИЕ ТЕКСТА */
    .img-left {
		 float: left;         /* обтекание текста слева от фото */
		 padding-right: 10px; /* отступы: сверху, справо, снизу, слева */
}

    .img-right {
		 float: right;       /* обтекание текста справа от фото */
		 padding-left: 10px; /* отступы: сверху, справо, снизу, слева */
}


/* ОБЛОЖКА ИГРЫ */
    .img200-Post { /* OLD NAME: img-mini-cover-4x3 */
	   margin: 20px 10px 10px 0; /* отступы: сверху, справо, снизу, слева */
	   width: 100%;              /* адаптивная ширина изображения */
	   max-width: 200px;         /* максимальная ширина изображения */
}

    .img220-Post {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   max-width: 220px;
}

    .img240-Post {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   max-width: 240px;
}

    .img250-Post {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   max-width: 250px;
}

    .img275-Post-height {
	   margin: 20px 10px 10px 0;
	   height: 100%;
	   max-height: 275px;
}

    .img250-cover {
	   float: left;              /* обтекание текста слева от изображения */
	   margin: 10px 20px 10px 0; /* отступы: сверху, справо, снизу, слева */
	   width: 100%;              /* адаптивная ширина изображения */
	   max-width: 250px;         /* максимальная ширина изображения */
}

    .img300-cover {
	   float: left;
	   margin: 10px 20px 10px 0;
	   width: 100%;
	   max-width: 300px;
}

    .img320-cover {
	   float: left;
	   margin: 10px 20px 10px 0;
	   width: 100%;
	   max-width: 320px;
}

    .img350-cover {
	   float: left;
	   margin: 10px 20px 10px 0;
	   width: 100%;
	   max-width: 350px;
}

    .img400-cover {
	   float: left;
	   margin: 10px 20px 10px 0;
	   width: 100%;
	   max-width: 400px;
}


/* COVER CD, DVD и КАРТРИДЖЕЙ ИГР */
   	.img300-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 300px;
}

   	.img350-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 350px;
}

   	.img400-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 400px;
}

   	.img450-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 450px;
}

  	.img500-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 500px;
}

  	.img550-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 550px;
}

  	.img600-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 600px;
}

  	.img700-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 700px;
}

  	.img800-CD {
	   margin: 20px 10px 10px 0;
	   width: 100%;
	   height: auto;
	   max-width: 800px;
}


/* КЛИПАРТЫ */
    .img150-kliparty { /* OLD NAME: img-mini-kliparty */
	   margin: 0 10px;
	   width: 100%;
	   height: auto;
	   max-width: 150px;
}

    .img200-kliparty {
	   margin: 0 10px;   /* отступы: сверху-снизу, справо-слева */
	   width: 100%;       /* адаптивная ширина изображения */
	   height: auto;     /* размер по вертикале изображения */
	   max-width: 200px; /* максимальная ширина изображения */
}

    .img250-kliparty {
	   margin: 0 10px;
	   width: 100%;
	   height: auto;
	   max-width: 250px;
}

    .img300-kliparty {
	   margin: 0 10px;
	   width: 100%;
	   height: auto;
	   max-width: 300px;
}

    .img500-kliparty {
	   margin: 0 10px;
	   width: 100%;
	   height: auto;
	   max-width: 500px;
}

    .img600-kliparty {
	   margin: 0 10px;
	   width: 100%;
	   height: auto;
	   max-width: 600px;
}


/* СКРИНШОТЫ */
    .img250-screenshot { /* OLD NAME: img-screenshot-mini */
		 margin: 10px; /* отступы: сверху, справо, снизу, слева */
		 width: 100%;                 /* адаптивная ширина изображения */
		 height: auto;                /* размер по вертикале изображения */
		 max-width: 250px;            /* максимальная ширина изображения */
}

    .img300-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 300px;
}

    .img350-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 350px;
}

    .img400-screenshot { /* OLD NAME: img-screenshot-mini */
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 400px;
}

    .img450-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 450px;
}

    .img500-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 500px;
}

    .img600-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 600px;
}

    .img700-screenshot {
		 margin: 10px;
		 width: 100%;
		 height: auto;
		 max-width: 700px;
}


				         /* | -------------- | */
				         /* | --- КНОПКИ --- | */
				         /* | -------------- | */

	a.knopka {
	    border: 2px solid #c2c2c2; /* размер рамки кнопки и её цвет */
		color: #c2c2c2;   /* цвет ссылки */
		padding: 7px 15px;  /* отступы текста внутри кнопки сверху/снизу и слева и справо */
		border-radius: 20px; /* закругляем углы */
		text-decoration: none; /* убираем нижнее подчёркивание */
		display: inline-block;
  }

    a:hover.knopka  {
	    color: #58c93a; /* цвет ссылок в шапке меню при наведении мышки */
		border-color: #58c93a; /* цвет рамки кнопки при наведении */
  }

    .knopka:hover {        
	    border: 2px solid #413f3f; /* толщина, тип и цвет рамки */	    
}


			 /* | ------------------------------------ | */
			 /* | --- АДАПТИВНЫЙ ДИЗАЙН ПОД МОБИЛУ --- | */
			 /* | ------------------------------------ | */
			 
@media screen and (max-width:1350px){
	.blok-content {
		padding: 0 50px;  /* отступы слева и права */
   }
}

@media screen and (max-width:1000px){
    .block-citat {
	     padding: 0 70px;
   }
   
   audio {
		width: 35%;
   }
}

@media screen and (max-width:850px){	
	.img-left, .img-right {
	   float: none;
   }
   
   audio {
		width: 45%;
   }
}

@media screen and (max-width:700px){
	.img250-cover, .img300-cover, .img320-cover, .img350-cover, .img400-cover{
	   display: none;
   }
   
    h1 {
	   margin: 0;
   }
}

@media screen and (max-width:650px){
    .block-citat {
	     padding: 0 50px;
   }

    .citata {
	     min-height: 10px;
         padding: 9px;
         margin-bottom: 10px;
         border-radius: 2px;
   }
   
    .img200-Post, .img220-Post, .img250-Post, .img275-Post-height{
	   width: 40%;
   }
}

@media screen and (max-width:500px){
	.blok-content {
		padding: 0 25px;  /* отступы слева и права */
   }
}

@media screen and (max-width:450px){
    .block-citat {
	     padding: 0 30px;
   }
  
    .faq-zagolovok {
		right: 2%;
  }
}

@media screen and (max-width:360px){

    .block-citat {
	     padding: 0 15px;
   }

@media screen and (max-width:330px){	
	main {
       margin-top: 175px;
   }
}