@media (max-width: 1300px){
	.content-area{
		width: calc( 100% - 60px );
	}
}
@media (max-width: 1240px){
	/* footer */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	.f-navigation{
		width: 100%;
	}
}
@media (max-width: 1170px){
	.statistic{
		padding-top: 0px;
	}
	.statistic > .block{
		width: calc( ( 100% - 40px ) / 2 );
		justify-content: flex-start;
		margin-top: 30px;
	}
}
@media (max-width: 1150px){
	.slider-title{
		font-size: 24px;
	}
	.news > .news-item > .news-area > .title{
		font-size: 22px;
	}
}
@media (max-width: 970px){
	aside{
		width: 100%;
	}
	main{
		width: 100%;
	}
	/* navigation */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	nav{
		height: auto;
		margin-bottom: 30px;
	}
	.open_navigation{
		display: flex;
	}
	nav:before{
		display: none;
	}
	nav > .nav-area{
		width: 100%;
		height: 0px;
		 overflow: hidden;
		background: #1f0f0d;
	}
	nav > .active{
		height: 585px;
	}
	nav > .nav-area > a{
		width: 100%;
	}
	nav > .nav-area > a:after{
		display: none;
	}
	/* resource */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	.resource{
		padding-top: 30px;
		justify-content: space-between;
		padding-bottom: 16px;
	}
	.button{
		width: calc( ( 100% - 30px ) / 2 );
	}
	/* articles */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	.articles{
		margin-bottom: 30px;
	}
}
@media (max-width: 950px){
	.f-navigation > a{
		font-size: 14px;
	}
}
@media (max-width: 820px){
	.block-title > .icon{
		width: 40px;
		height: 40px;
	}
	.block-title > .text > span{
		display: none;
	}
	.streams > .stream{
		width: calc( ( 100% - 30px ) / 2 );
	}
	.streams > .stream:nth-child(4){
		display: none;
	}
}
@media (max-width: 780px){
	.f-navigation > a{
		width: calc( ( 100% - 30px ) / 2 );
		text-align: center;
		padding: 10px;
		border: 1px solid rgba(255,255,255,0.05);
		border-radius: 4px;
		margin-bottom: 10px;
	}
}
@media (max-width: 750px){
	.progress-bg{
		width: 100%;
		margin-bottom: 20px;
	}
	.progress-bg > .progress{
		width: calc( 100% - 180px );
	}
}
@media (max-width: 720px){
	.social > .social-list{
		width: 44px;
		height: 44px;
		top: -10px;
		margin: 5px 5px;
		overflow: hidden;
		border: 1px solid rgba(0,0,0,0);
	}
	.social > .active{
		height: auto;
		background: #0a0302;
		border-radius: 5px;
		border: 1px solid #210c03;
	}
	.social > .social-list > a{
		margin: 5px 5px;
	}
	.social > .social-list > .open-social{
		display: flex;
	}
}
@media (max-width: 680px){
	.server-item-bg > .server-item > .name{
		width: auto;
		marhi;
	}
	.server-item-bg > .server-item > .online{
		width: 100%;
		padding-left: 21px;
	}
	.server-item-bg > .server-item > .time{
		width: 100%;
		padding-left: 21px;
		margin-left: 0px;
	}
	.server-item-bg > .server-item > .arrow{
		position: absolute;
		top: 12px;
		right: 12px;
	}
	.list-item .yellow-button.pull-right,
 .list-item .image-wrapper.pull-left {
  float: none;
  width: 100%;
  margin: 5px 0;
 }

 .list-item .content {
  margin: 10px 0;
 }

 .inner-text {
  padding: 0 10px;
 }
}
@media (max-width: 650px){
	.news > .news-item{
		width: 100%;
	}
}
@media (max-width: 620px){
	.button{
		width: 100%;
	}
}
@media (max-width: 600px){
	.block-title{
		justify-content: center;
	}
	.block-title > .text{
		width: 100%;
		text-align: center;
		margin-left: 0px;
		margin: 20px 0px;
	}
	.page-title h1 {
  text-align: center;
 }
}
@media (max-width: 570px){
	.slider-title{
		font-size: 18px;
	}
	.slider-text{
		font-size: 12px;
	}
}
@media (max-width: 560px){
	/* lang switch */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	.lang-switch{
		width: 45px;
	}
	.lang-switch:before{
		display: none;
	}
	.lang-switch > .lang-list{
		width: 100%;
	}
	.lang-switch > .lang-list > .lang-item > .lang-name{
		display: none;
	}
}
@media (max-width: 550px){
	.streams > .stream{
		width: 100%;
		height: 240px;
	}
	.streams > .stream:nth-child(4){
		display: block;
	}
}
@media (max-width: 540px){
	/* logo */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	.logo{
		width: 100%;
	}
	.f-navigation > a{
		width: 100%;
	}
}
@media (max-width: 530px){
	.statistic > .block{
		width: 100%;
	}
}
@media (max-width: 490px){
	/* status servers */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	main > .title{
		font-size: 24px;
	}
}
@media (max-width: 480px){
	table tr td{
		font-size: 12px;
	}
	.no-sm {
  display: none;
 }
	.inner-text select, .inner-text input {
  width: 100%;
 }
}
@media (max-width: 466px){
	.f-block{
		width: 100%;
	}
	.f-block > .f-banners > a > img{
		width: 100%;
	}
	.f-block > .f-cpr{
		text-align: center;
		justify-content: center;
	}
	.f-block > .f-cpr > img{
		margin-top: 15px;
	}
	.f-block > .unsimple{
		margin: 50px auto;
	}
}
@media (max-width: 420px){
	.slider-title{
		margin-top: 50px;
	}
	.slide-more-button{
		width: 150px;
		 height: 38px;
		font-size: 14px;
	}
}
@media (max-width: 400px){
	/* lang switch */
	/* -------------------------------------------------------------------------------------------------------------------- */
	
	.login-switch{
		width: 120px;
		right: calc( 50% - 60px );
	}
	.streams > .stream{
		width: 100%;
		height: 170px;
	}
}
@media (max-width: 370px){
	.button{
		font-size: 13px;
		text-align: center;
	}
	.button > i{
		display: none;
	}
}