/*
*
* Author: Baron Samedi
* Site: https://idevweb.ru
*
*/

body{
	
}
.bg-main{
	z-index:0;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background-attachment:fixed;
	background-size: cover;
}
.main{
	z-index:1;
	position:relative;
	/*text-align:right;
	display:flex;
	justify-content:space-between;*/
}
.left{
	width:20%;
	position:absolute;
	top:0;
	left:0;
}
.right{
	width:80%;
	position:absolute;
	top:0;
	right:0;
	padding:5px;
}
.logo{
	max-width:330px;
}

#sidebar{
	z-index:2;
	position:fixed;
	background-color:#fff;
	width:20%;
	opacity:.9;	
}
#content{
	z-index:2;	
	padding:2%;
}
.page,
.page-game .games,
.article{	
	box-shadow:5px 5px 10px #000;
	margin:0 0 40px;
	border-radius:10px;	
}
.page,
.page-game .games{
	background-color:#fff;
}
.page{
	padding: 20px 30px;
}
.article{
	background-color:rgba(255, 255, 255, .9);
}
.logo img{
	width:100%;
}

.logo,
.footer,
.big-menu{
	padding:40px;	
}
.logo{	
	text-align:center;
}
.big-menu{	
	text-align:left;
}
#sidebar .wrapper{
	position:relative;
	height:100%;
}
#sidebar .footer,
#sidebar .top{
	position:absolute;
	left:0;
}
#sidebar .top{
	top:0;	
}
#sidebar .footer{
	bottom:0;
	width: 100%;
    text-align: center;
}
.copyright{
	font-weight: 400;
    font-size: 14px;
}

.big-menu a{
	text-transform:uppercase;
	text-decoration:none;
	color:#212529;
	font-weight:500;
}
.big-menu .item{
	display:block;
	cursor: pointer;
	position:relative;
	overflow:hidden;
	border-left:1px solid #212529;
	width:100%;
	height:50px;
	margin-bottom:10px;
}
.big-menu .item-wrap{	    
	background-color:#212529;
	position:absolute;
	top:0;
	left:-100%;
	width:100%;
	height:50px;	
	z-index:2;
	display:flex;
	align-items:center;
}
.big-menu .item-wrap{
	background-color:#212529;
	transition:.5s;
}
.big-menu .item-text{
	position:relative;
	padding:12px 10px 8px 10px;
	height:50px;
	z-index:3;
}
.big-menu .item:hover{
	cursor: pointer;
}
.big-menu .item.active .item-wrap,
.big-menu .item:hover .item-wrap{
	left:0;
}
.big-menu .item.active .item-text,
.big-menu .item:hover .item-text{
	color:#fff;
}

.ham6{
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    user-select: none;
}
.ham6 path{
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: #000;
    stroke-width: 5.5;
    stroke-linecap: round;
}
.ham6.active path{
	stroke: #084298;
}
.ham6 .top {
    stroke-dasharray: 40 172;
}
.ham6 .middle {
    stroke-dasharray: 40 111;
}
.ham6 .bottom {
    stroke-dasharray: 40 172;
}
.ham6.active .top {
    stroke-dashoffset: -132px;
}
.ham6.active .middle {
    stroke-dashoffset: -71px;
}
.ham6.active .bottom {
    stroke-dashoffset: -132px;
}
#sidebar .btn-mobil{
	display:none;
	position:absolute;
	top:0;
	right:0;
	z-index:10;
}
.sidebar-wrapper{
	position:relative;
}
#sidebar.active{
	width:300px;
}
#sidebar .top{
	width:100%;
}
@media (max-width:1100px){
	.left,
	#sidebar{
		width:35%;
	}
	.right{
		width:65%;
	}
}
@media (max-width:950px){
	.left,
	#sidebar{
		width:40%;
	}
	.right{
		width:60%;
	}
}
@media (max-width:850px){
	.logo,
	.footer,
	.big-menu{
		padding:30px;	
	}
}
@media (max-width:780px){
	.logo,
	.footer,
	.big-menu{
		padding:20px;	
	}
}
@media (max-width:768px){
	#sidebar .sidebar-widget,
	#sidebar .footer{
		display:none;
	}
	#sidebar .btn-mobil{
		display:block;
		position: relative;
		height: 80px;
		width: 100%;		
	}
	#sidebar .btn-mobil .ham6{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	#sidebar.active .btn-mobil{
		width: 80px;
		float: right;
	}
	
	.left,
	#sidebar{		
		transition-property: width;
		transition-duration: .2s;
	}
	.right{
		width:85%;		
	}
	#sidebar,
	.left{
		width:80px;
	}
	#content{
		padding:20px 10px;
	}
	#sidebar.active .logo{
		width:220px;
	}
	#content{
		padding-left:0;
		padding-right:0;
	}
}
@media (max-width:375px){
	#sidebar,
	.left{
		width:15%;
	}	
}

#content .article{
	padding:10px 20px;
}
#content .article{
	padding-bottom:20px;
}
#content .article > .title{
	border-bottom: 1px solid #3f3f3f;
	margin-bottom: 20px;	
}
#content .article h2{
	font-size: 1.6rem;
    display: inline-block;    
    margin-bottom: 5px;
}
#content .article .list{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
#content .article .list.games .item-img{
	width:100%;
}
#content .article .list.games .item{
	display:block;
	position:relative;
	width:23%;
	overflow:hidden;
	border-radius:10px;
	width:240px;
	height:240px;
	margin:5px;
	border: 1px solid #141619;
}
#content .article .list.games .item .title{
	position:absolute;
	bottom:0;
	left:0;
	background-color:rgba(20, 22, 25, .85);
	display:flex;
	justify-content:center;
	align-items:center;
	padding: 5px 10px 8px;
    color: #fff;
    text-align: center;
    font-weight: 500;
	width: 100%;
    min-height: 20%;
}
#content .article .list.games .item .meta-desc{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(65, 70, 75, .9);    
    border-radius: 10px;
    padding: 0;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
	color: #f9fafb;
    font-weight: 500;
	-webkit-transition: height .5s ease;
	-moz-transition: height .5s ease;
	transition: height .5s ease;
	overflow:hidden;
}
#content .article .list.games .item .meta-desc .desc{
	padding: 10px 15px;
}
#content .article .list.games .item:hover{
	cursor:pointer;
}
#content .article .list.games .item:hover .meta-desc{	
	height:100%;
}

.youtube {
    background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
	border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 0 3px #000;
}
.youtube .play {
    background: url('../images/btn-youtube.png') no-repeat;    
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 70px;
    width: 70px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}


.page-game .img img,
.page-news .img img{
	width:100%;	
	border: 3px solid #fff;
	border-radius:10px;
	box-shadow:0 0 1px #000;
}
.breadcrumbs{
	font-size: 12px;
    padding: 10px 20px;
}
.breadcrumbs .breadcrumb{
	margin-bottom:0;
}
.page .title,
.page-game .games .title{
	border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.page .title h1,
.games .title h1{
	font-size: calc(1.1rem + 1.5vw);
}
.games #lightgallery{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.games #lightgallery img{
	width:100%;
}
.games #lightgallery a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:30%;
	border:1px solid #fff;
	box-shadow:0 0 2px #000;
	margin:1%;	
}
.games .wrap-media{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding-top:20px;
	padding-bottom:20px;
}
.games .info{
	padding:20px 0;
}
.games .rating{
	justify-content:center;
	margin:10px 0;
	width:100%;
}
.games .rating-block .title-rating{
	font-weight:bold;
}
.games .prohogdenie{
	border-top:1px solid #ccc;
	padding:10px 0 20px;
}
.games .prohogdenie h3{
	margin-bottom:20px;
}
.games .info,
.games .desc{
	text-align:justify;
}

.page .desc{
	padding-top:10px;
	padding-bottom:20px;
}
.page-404{
	font-size: 18px;
    font-style: italic;
    text-align: center;
	align-items:center;
}
.page-404 .left-block{
	padding:0 20px;
}
.info-games{ 
	font-size: 13px;
    padding-top: 10px;
	padding-bottom:10px;
    border-top: 1px solid #ccc;
}
.info-games .block{
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;	
	padding:5px;
}
.info-games .block .kluch{
	font-weight:500;
	margin-right:10px;
	width:30%;
}
.info-games .block .value{
	font-style:italic;
}
.urls{
	padding: 10px;
    border-top: 1px solid #ccc;
    font-size: 13px;
}
.iweb{
	font-size:10px;
}
.list.inter a,
a.item{
	display:block;
	color:#000;
	text-decoration:none;
}
.list.news .item{
	width: 30%;
    margin: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
}
.list.news .title{
	padding-top: 5px;
    padding-bottom: 5px;    
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
.list.news .title h3{
	font-size: 20px;
}
.list.news .item:hover{
	box-shadow:0 0 10px #000;
}
.list.inter a:hover h3,
.list.news .item:hover .title{
	color:#0d6efd;
}

.list.news .intro{
	font-size: 14px;
    padding: 5px 10px 10px;
    text-align: justify;
}
.list.inter .item{
	width: 45%;
    margin: 5px 10px;
}
.list.inter h3{
	font-weight: bold;
    font-size: 20px;
}
.list.inter .intro{
	font-size:12px;
}
.page .list.inter .title{
	border:unset;
	margin:0;
}
@media (max-width:1410px){
	.list.news .item{
		width:45%;
	}
}
@media (max-width:1110px){
	.list.news .item{
		width:95%;
	}
}
@media (max-width:768px){
	.list.news .item{
		width:45%;
	}
}
@media (max-width:635px){
	.list.news .item{
		width:95%;
	}
	#sidebar, .left{
		width:60px;
	}
}
@media (max-width:490px){
	#sidebar, .left{
		width:50px;
	}
	#content .article{
		padding-left:5px;
		padding-right:5px;
	}
	.list.inter .item{
		width:95%;
		margin:10px 0;
	}
}





.urls .item span{
	font-weight:bold;
}
.list.inter{
	display: flex;
    flex-wrap: wrap;
}
.video{
	border-top: 1px solid #ccc;
    padding-top: 10px;
    text-align: center;
}
.social{
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid #ccc;
    padding: 20px 10px;
}
.social .social-text{
	font-weight:bold;
	font-size:16px;
	width:100%;
	text-align:center;
	margin-bottom:10px;
}
.welcome{
	padding:40px;
}
.welcome h4{
	font-size:16px;
}
.welcome a{
	display:block;
	text-decoration:none;
	font-size:14px;
}
.welcome a:hover{
	text-decoration:underline;
}
.content iframe{
	max-width:100%;
}