@font-face {
    font-family: Opensans;
	src: url('../fonts/OpenSans-Regular.woff2') format("woff2"),
    url('../fonts/OpenSans-Regular.woff') format("woff");
   font-weight: normal;
   font-style: normal;
}
@font-face {
    font-family: Opensansl;
    src: url('../fonts/OpenSans-Light.woff2') format("woff2"),
    url('../fonts/OpenSans-Light.woff') format("woff");
}

@font-face {
    font-family: Opensansb;
    src: url('../fonts/OpenSans-SemiBold.woff2') format("woff2"),
    url('../fonts/OpenSans-SemiBold.woff') format("woff");
   font-weight: normal;
   font-style: normal;
}




:root {
    --bg:#17171A;
	--leftbar-bg:#232530;
    --form-border:#50577A;
}
 

.clear, .cl{
	clear: both;
}


* {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-width: 1400px;
}

body {
  color: #fff;
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #17171A;
  font:  16px Opensans;
	 
  
}  
 
input,
button,
textarea {
  font:  17px Opensansb;
  font-size: inherit;
}

button {
  cursor: pointer;
  color: inherit;
  background-color: inherit;
}

a {
  color: inherit;
}

a:link,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}






 
.head{
     position: sticky;
	 left: 0px;
	 top:0;
	 width: 100%;
	 height:90px;
	 z-index: 2;
	 padding: 0px 5% 0px 5%;
	 background-color:rgb(45, 47, 61,.7);
     backdrop-filter: blur(5px);
}


.categ{
	  display:   flex;
	  width: 100%;
	  margin-top: 40px;
   
	
}


.categ A{
	  display:   flex;
	 padding:10px 20px 10px 20px;
	 height: 40px;
	 color:white;
	 background-color: #2D2F3D;
	margin-left: 10px;
	border-radius:10px;
	transition: all 0.5s ease;
}

.categ A:hover {
   background-color: #005BFF;
   transform: translateY(-3px);
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


.head .logo{
    position: relative;
    display: block;
    margin: 20px 16px 0 0;
    width: 170px;
    height: 48px;
    text-decoration: none;
}
.head .logo__mark{
    display: block;
    width: 170px;
    height: 48px;
    background: url('../img/logo.png') no-repeat left center / contain;
}
.head .logo__games{
    position: absolute;
    left: 109px;
    top: -6px;
    width: 65px;
    margin: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2px;
    text-align: center;
}


.head .search {
	 display:inline-block;
	 width: 40%;
	 height: 40px;
     position: relative;
	 margin-left: 20px;
     margin-top: 22px;
	 margin-right: auto;
}


.head .add {
	 width: 120px;
	 height: 40px;
	 margin: 22px 0 0 12px;
	 display:   flex;
}


.head .add_mob{
   display: none;
}

.head .search .q{

	  width:100%;
	 height: 40px;
  	border-radius:12px;
		 background-color: #2D2F3D;
	border: 2px solid #005BFF;
	 color: #FFFFFF;

	padding: 0px 20px 0px 20px;
}





 





.head .search .b{
 
	 width: 60px;
	 height: 40px;
	  	border-radius:12px;
	 position: absolute;
	right: 0px;
	top: 0px;
	cursor: pointer;
	background: #005BFF url('../img/search.svg') 20px 10px  no-repeat;
	background-size: 21px 21px;
}

.head .search .b:hover, .head .add:hover{
 
	background-color: #4C8BFD;
}

.head .login{
	 display: flex;
    height: 42px;
  	border-radius:12px;
	 cursor: pointer;
	background:url('../img/login.svg') 20px 10px  no-repeat;
	background-size: 21px 21px;
	padding: 9px 30px 0px 50px;
	 color: #FFFFFF;
	margin-right: 20px;
	   margin-top: 22px;
	border: 2px solid  #FFFFFF;
	opacity:  0.7;

}


.button_add{
	 display: table;
	width: 200px;
  	border-radius:12px;
	 cursor: pointer;
	background: #005BFF url('../img/reg.svg') 20px 12px  no-repeat;
	background-size: 21px 21px;
	padding: 8px 30px 8px 50px;
	 color: #FFFFFF;
	margin-right: 20px;
	   margin-top: 22px;

}


.head .reg{
		display: flex;
    height: 42px;
  	border-radius:12px;
	 cursor: pointer;
	background: #005BFF url('../img/reg.svg') 20px 10px  no-repeat;
	background-size: 21px 21px;
	padding: 9px 30px 0px 50px;
	 color: #FFFFFF;
	margin-right: 20px;
	   margin-top: 22px;
}





.head .cat{
	position: relative;
	display: flex;
  	margin-top: 22px;
    margin-left: auto;
}



.head .cat__name{
	display: flex;
    height: 42px;
  	border-radius:12px;
	 cursor: pointer;
	background: #005BFF url('../img/login.svg') 20px 10px  no-repeat;
	background-size: 21px 21px;
	padding: 9px 30px 0px 50px;
	 color: #FFFFFF;
}



.head .cat__list{
	display: none;
	left: 0px;
	top:50px;
	width: 800px;
	min-height: 600px;
	background-color: #242424;
	position: absolute;
  	border-radius:12px;
	padding-bottom: 20px;
}

.mr30{
 
	margin-top: 30px;
}


.head .cat__categ{
    float: left;
	width:30%;
	margin-top: 20px;
}

.head .cat__categ__name{
    text-align: center;
}

.head .cat__item{
	 display: table;
	 border-radius:12px;
	 padding: 4px 10px 4px 10px;
     text-align: center;
	 min-width: 120px;
	 margin: 0 auto;
	 margin-top: 5px;
	 background-color: #393939;
	 font-size:14px;
	 cursor: pointer;
	 color: white;
	 text-decoration: none;
}


.head__center{
	 display:   flex;
	 max-width:1900px;
	 margin:0 auto;
 
     flex-wrap:       wrap;
     justify-content: center;	 
}
	

.main__center{
	 display:   flex;
	 max-width:1900px;
	 margin:0 auto;
	 padding: 0px 5% 0px 5%;
     flex-wrap:       wrap;
     justify-content: center;

}

.main{
	width: 100%;
	display:         flex;
    flex-wrap:       wrap;
    justify-content: left;
}




.main .product{
	position: relative;
    display: flex;
	 width: 180px; 
	height:180px;
	border-radius:32px;
   background-size: 100% 100%;
	margin: 60px 30px 30px 30px;
}

.main .product .name{
    margin-top: 190px;
    font: 17px Opensans;
	color:  #FFFFFF;
 
}

 
.main .product IMG{
	display:  block;
	width: 120%;
    height: 120%;
    object-fit: contain;
	border-radius:32px;
	
}




.window{
	display: none;
	position: fixed;
	margin: auto;
	left:0;
	right: 0px;
	width: 600px;
	min-height: 150px;
	padding: 0px 0px 50px 0px;
	border-radius: 10px;
	background-color: var(--leftbar-bg);
	z-index:3;	
	top: 50px;
}


.window .userpic{
	width: 100px;
    height: 100px;
	margin: 0 auto;
    margin-top: 30px;
	border-radius:100px;
	overflow: hidden;
}

.window .userpic IMG{
	width: 100px;
    height: 100px;
}


.window .tb{
	 padding: 20px;
	 overflow-x: hidden;
	 overflow-y: auto;
	 height: 600px;
}



.window  .close{
	position: absolute;
	right:10px;
	top: 10px;
	width: 40px;
	height: 40px;
	background: url('../img/close.svg') 0px 0px  no-repeat; 
	opacity: 0.5;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
   -moz-opacity: 0.5;
   -khtml-opacity: 0.5;
	cursor: pointer;
}

.window  .close:hover{
   opacity: 1;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=1);
   -moz-opacity: 1;
   -khtml-opacity: 1;
}


.window .title{
	width: 100%;
	margin: 20px 0px 0px 30px;
	font:  27px Opensansl;
}
		
.window .text{
	font-size: 13px;
  	margin: 25px 15px 0px 23px;
	color: #7F8397;
	line-height: 25px;
}
	
.window .switch{
	float: left;
  	margin: 35px 0px 0px 23px;
}
	
.window .switch_text{
	float: left;
  	margin: 36px 0px 0px 13px;
}


.window_menu{
   display: table;
   margin: 30px 0px 0px 30px;
   border-radius:8px;
   overflow: hidden;
}

.window_menu .item{
   float: left;
   background-color: #3E4664;
   padding: 10px 15px 10px 15px;
   border-right: 3px solid black;
   text-align: center;
   cursor: pointer;
   text-decoration: none;
}

.window_menu .item:last-child { 
   border-right: 0;

}

.window_menu .selected{
 	background-color: #318ED2 !important;
	color: black;
	font:  15px Opensansb;	
}



.button1{
    border-radius:10px;
	-moz-border-radius: 10px;
  	-webkit-border-radius: 10px;
  	-khtml-border-radius: 10px;
  	border-radius: 10px;   
   padding: 11px 40px  11px 40px;
   float:right;
   display: table;
   color: black;
   font:15px Opensansb;
   text-decoration: none;
   margin: 20px 30px 0 20px;
   background: #2ea3fb;
   cursor: pointer;
}


.button1:hover{
    opacity: 0.8;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.8);
   -moz-opacity: 0.8;
   -khtml-opacity: 0.8;
}





.form{
  position: relative;
  width: 90%;
  min-height: 48px;
  border: 2px solid var(--form-border);
  border-radius: 8px;	
  margin: 50px 0 0 5%;
}



.small{
  width: 42%;
  float: left;
}


.form .name{
   position: absolute;
   left: 25px;
   top:-17px;
   background: #232530;
   padding: 5px 12px 5px 12px;
   font: 14px Opensansb;
   color: #797E97;
}

.form INPUT{
   background: #232530;
   border: 0;
   margin: 5px 0 0 5px;
   display:inline-flex;
   color: white;
   width: 94%;
   height: 32px;
   padding-left: 5px;
   font: 16px Opensansb;
}

.form TEXTAREA{
   background: #232530;
   border: 0;
   margin: 5px 0 0 5px;
   display: block;
   color: white;
   width: 98%;
   height: 32px;
   padding-left: 5px;
   font: 16px Opensansb;
   max-width:98%;
}


.form INPUT:focus,.form TEXTAREA:focus {
    outline:none;
}


.file{
	cursor: pointer;
}
	

.file INPUT{
  cursor: pointer;
  font-size: 12px;	
  margin: 12px 0 0 10px;
}


h1{
	font:  27px Opensans;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 35px;
	
}



.product h2{
	font:  16px Opensans !important;
	margin: 0 !important;
	color:white !important;
}


.product{
	padding-top: 35px;
	font-size: 16px;
}

.product__img{
 
	 width: 50px;
	float:left;
 
 
}

.product__info{
	float:left;
    width:50%;
	line-height:22px; 
    padding-left:265px; 
}


.product__info2{
	width:100%;
    line-height:27px;
	padding-top:50px;
	min-height: 200px;
	padding-bottom:150px;
}


.dl__info{
	 float:left;
  width:25%;
}

.dl{
	display: table; 
  	border-radius:12px;
	 cursor: pointer;
	background: #199700 url('../img/dl.svg') 20px 18px  no-repeat;
	background-size: 21px 21px;
	padding: 16px 35px 16px 58px;
	 color: #FFFFFF; 
}

.dl:hover{
 
	background-color: #23B306;
	 
}


.dl__file{
    width:100%;
    font-size: 14px;
	margin-top: 15px;
}


.dl__item{ 
	margin-top: 10px;
}



.submenu{
     width:100%;
	 height: 52px;
	 margin-top: 50px;
	 background-color: #272833;
	 border-bottom: 4px solid   #005BFF; 
	 border-radius:8px;
	
	 border-bottom-left-radius:0;
     border-bottom-right-radius:0;
}

 

.submenu .item{
	 position: relative;
     display: table;
     float:left;
     border-radius:12px;
	 cursor: pointer;
	
	 border-bottom-left-radius:0;
     border-bottom-right-radius:0;
	
 	 padding: 10px 40px 10px 40px;
	 color: #FFFFFF; 
	 margin-top: 6px;
	 
}


.submenu .sel{
     background: #005BFF !important;
}

.submenu .item:hover{
     background:#3E3F4F;
}


.footer{
	  margin-top: 100px;
	  width: 100%;
	  height: 100px;
      background-color: #272833;
}




.jq-stars {
  display: inline-block;
}

.jq-rating-label {
  font-size: 22px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-family: helvetica, arial, verdana;
}

.jq-star {
  width: 100px;
  height: 100px;
  display: inline-block;
  cursor: pointer;
}

.jq-star-svg {
  padding-left: 3px;
  width: 100%;
  height: 100% ;
}

.jq-star:hover .fs-star-svg path {
}

.jq-star-svg path {
  /* stroke: #000; */
  stroke-linejoin: round;
}

/* un-used */
.jq-shadow {
  -webkit-filter: drop-shadow( -2px -2px 2px #888 );
  filter: drop-shadow( -2px -2px 2px #888 );
}

.rating{
	margin-top: 20px;
}

.share{  	 
   zoom:0.8;
   margin-top:20px;
}
.share_item{  	 
   float: left;
   margin-right:20px;
}



.fancybox-image {
   object-position: 0 -37px;
}

.comment{
	 width: 100%;
	 padding: 20px 20px 15px 20px;
	 background-color: #22232D;
	 border-radius:20px;
	 margin-bottom: 20px;
}


.comment__user{
	
	 float: left;
	 display: table;
}

.comment__mess{
	width: 90%;
	 float: left;
	 display: table;
	 padding-left:50px;
}

.comment__ava{
	 width: 80px;
	 height: 80px;
	 border-radius:100px;
	 background-color: #b5b5b6;
}

.comment__nick{
	margin-top: 10px;
	text-align: center;
}


.add__comment{
	margin-top: 50px;
}

.add__comment__title{
	padding-bottom: 10px;
	font-size: 18px;
}


.add__comment__form{
 	  width:100%;
	 max-width:100%;
	max-height: 290px;
	 min-height: 90px;
  	border-radius:12px;
		 background-color: #2D2F3D;
	border: 2px solid #005BFF;
	 color: #FFFFFF;
  
	padding: 5px 20px 10px 5px;
}