@media (max-width: 1920px) {
	.main-wrapper {
		width:75%;
		margin-top:35px;
	}
	
	.full-wrapper {
		width:70%;
		margin:0 40%;
	}
	
	.left-wrapper {
		margin-left:8%;
	}
	
	.right-wrapper {
		width:50%;
		margin-right:8%;
	}
	
	.right-wrapper .servers .item {
		margin:0 1%;
		width:48.8%;
	}
}

@media (max-width: 1680px) {
	.main-wrapper {
		width:75%;
		margin-top:35px;
	}
	
	.full-wrapper {
		width:70%;
		margin:0 35%;
	}
	
	.left-wrapper {
		margin-left:5%;
	}
	
	.right-wrapper {
		width:50%;
		margin-right:5%;
	}
	
	.right-wrapper .servers .item {
		margin:0 1%;
		width:48.8%;
	}
}

@media (max-width: 1600px) {
	.full-wrapper {
		width:100%;
		margin:0 35%;
	}
	
	.main-wrapper {
		width:75%;
		margin-top:40px;
	}
	
	.left-wrapper {
		margin-left:0;
	}
	
	.right-wrapper {
		width:65%;
		margin-right:0;
	}

	.right-wrapper .servers .item {
		margin:0 1%;
	}
}

@media (max-width: 1440px) {
	.main-wrapper {
		width:80%;
		margin-top:25px;
	}
	
	.right-wrapper .servers .item {
		margin:0 1%;
	}
}

@media (max-width: 1366px) {
	.main-wrapper {
		width:90%;
		margin-top:35px;
	}
	
	.right-wrapper .servers .item {
		width:46%;
		margin:0 2%;
	}
}

@media (max-width: 1280px) {
    .main-wrapper {
		width:90%;
		margin-top:35px;
	}
	
    .full-wrapper {
		margin:0 25%;
    }	
    
    .right-wrapper .servers .item {
		width:48%;
		margin:0 2%;
	}
}

@media (max-width: 1024px) {
	.main-wrapper {
		margin-top:30px;
	}
	
    .full-wrapper {
		margin:0 25%;
    }
    
	.right-wrapper,
	.left-wrapper {
		margin-top:-35px;
	}
	
	.right-wrapper .servers .item {
		width:49%;
		margin:0 1%;
	}
}

/* Inherit <= 720 & => 640 */
@media (max-width: 800px) {
	.main-wrapper {
		margin-top:30px;
		margin-bottom: 0;
		display: flex;
		flex-direction: column;
	}
	
	.full-wrapper #logo {
		margin:0 0%;
	}
	
	.right-wrapper,
	.left-wrapper {
		float:initial;
		margin-top:0;
		width:100%;
	}
	
	.right-wrapper {
		order:1;
	}
	
	.left-wrapper {
		order:2;
		margin:10px 0;
	}
	
	.left-wrapper .community .content .icon {
		width:10%;
	}

	.left-wrapper .community .content .desc {
		width:84%;
	}
}

@media (max-width: 720px) {
	body {
		background-size:cover;
	}

	.full-wrapper #logo {
		margin:0 -25%;
	}
	
	.right-wrapper .servers .item .footer-wrapper .link {
		margin-top:0;
	}
}

@media (max-width: 533px) {
	.main-wrapper {
		margin-top:100px;
	}
	
	.full-wrapper #logo {
		margin:0 -25%;
	}
	
	.right-wrapper {
		margin-top:10px;
	}
	
	.left-wrapper {
		margin-bottom:80px;
	}
	
	.left-wrapper .community .content .icon {
		width:10%;
	}

	.left-wrapper .community .content .desc {
		width:82%;
		margin-left:3%;
	}
	
	.right-wrapper .servers .item {
		margin:5px 0;
		width:100%;
		height:auto;
	}
	
	.right-wrapper .servers::after,
	.right-wrapper .servers .item::after {
		display: block;
		content: "";
		clear: both;
	}
	
	.right-wrapper .servers .item .footer-wrapper .link {
		margin-top:-10px;
	}
}

@media (max-width: 424px) {
    
    .full-wrapper #logo {
		margin:0 -25%;
	}
	.left-wrapper .community .content .desc {
		width:77%;
		margin-left:7%;
	}
}

@media (max-width: 375px) {
    
	.full-wrapper #logo {
		margin:0 -25%;
	}
    
	.left-wrapper .community .content .desc {
		width:75%;
		margin-left:9%;
	}
	
	.right-wrapper .servers .item .footer-wrapper .link {
		margin-top:0;
	}
}

@media (max-width: 320px) {
    
	.full-wrapper #logo {
		margin:0 -25%;
	}
	.left-wrapper .community .content .desc {
		width:73%;
		margin-left:11%;
	}
}