@font-face {
	font-family: 'Friz Quadrata TT Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Friz Quadrata TT Regular'), url('../fonts/friz-quadrata-tt-regular.woff') format('woff');
}

@font-face {
	font-family: 'Friz Quadrata Std Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Friz Quadrata Std Italic'), url('../fonts/friz-quadrata-std-italic-587033b2c95df.woff') format('woff');
}


@font-face {
	font-family: 'Friz Quadrata Std Medium';
	font-style: normal;
	font-weight: normal;
	src: local('Friz Quadrata Std Medium'), url('../fonts/friz-quadrata-std-medium-5870338ec7ef8.woff') format('woff');
}


@font-face {
	font-family: 'Friz Quadrata Std Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Friz Quadrata Std Bold'), url('../fonts/friz-quadrata-std-bold-587034a220f9f.woff') format('woff');
}


@font-face {
	font-family: 'Friz Quadrata Std Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Friz Quadrata Std Bold Italic'), url('../fonts/friz-quadrata-std-bold-italic-587033d6d4298.woff') format('woff');
}

body{
	background: #bdbdca;
	color: #fff;
	font-family: "Open Sans", sans-serif;
}

.download-button{
	background: url("../images/download.png") no-repeat;
	background-size: cover;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	cursor: pointer;
}

.card-button:hover{
	filter: brightness(1.2);
}

.card-button{
	text-align: center;
	justify-content: center;
}

.card-button img{
	max-height: 80px;
}
.card-button {
	display: flex;
	align-items: center;
}

.download-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 10px;
	text-align: left;

}

.download-text span:nth-of-type(1){
	color: #ffeff0;
	font-weight: 800;
	font-size: 18px;
}

.download-text span:nth-of-type(2){
	color: #f2d9c0!important;
	font-size: 14px!important;
	font-weight: 400!important;
}

.odometer *{
	color: #f2d9c0!important;
	font-size: 14px!important;
	font-weight: 400!important;
}

.card{
	background: #151516;
	color: #fff;
	padding: 15px;
}

textarea{
	background: #141516;
	color: #fff;
	border: 1px solid #2c2921;
	padding: 10px;
}
.stats-card{
	background: url("../images/stats.png") no-repeat;
}

.card-button img{
	margin-right: 20px;
}

.server-news {
	background: url("../images/news-bg.png") no-repeat;
	background-size: cover;
	padding: 20px;
	color: #fff;
}

.server-news h2 {
	font-size: 24px;
	margin-bottom: 20px;
	text-align: center;
	color: #fbeedc;
	padding-top: 10px;
	font-family: 'Friz Quadrata TT Regular', serif;
}

.news-list {
	list-style: none;
	padding: 0;
}

.news-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 10px;
	border-bottom: 1px solid #333;
	border-image: url("../images/news-border.png") 30 round;
}

/* last li element should not have border */
.news-list li:last-child {
	border-bottom: none;
}

.news-badge {
	background-color: #224432;
	padding: 2px 8px;
	border-radius: 5px;
	color: #c5e2cb;
	margin-right: 10px;
	font-size: 14px;
}

.news-content {
	flex-grow: 1;
	margin-right: 10px;
	color: #dbcac0;
	font-size: 14px;
}

.news-date {
	color: #f1cfb8;
	font-size: 14px;
}

.guilds-rank-container {
	display: flex;
	justify-content: space-around;

}

/* on larger than 1000px add padding */
@media (min-width: 1000px) {
	.guilds-rank-container {
		padding: 20px;
	}
}

.guilds-rank {
	background: url("../images/ranking-bg.png") no-repeat;
	background-size: cover;
	padding: 10px;
	color: #fff;
	clip-path: polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin-bottom: 20px;
}

.header h2 {
	font-size: 24px;
}

.accounts {
	font-size: 14px;
	color: #fff;
	align-items: center;
	display: flex;
}

.rank-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.rank-table th, .rank-table td {
	padding: 5px 7px;
	text-align: left;
}

.rank-table th {
	background-color: #463c2f;
	color: #f4e4d6;
	text-align: center;
	font-size: 14px;
}

.rank-table td {
	color: #f4e4d6;
	font-size: 14px;
	text-align: center;
}

.rank-table td:nth-of-type(even) {
	color: #fff
}

.rank-table tr:nth-of-type(5) {
	color: #f9d4a9;
}



.show-rank-btn:hover {
	background-color: #555;
}

.main-section{
	background: url("../images/black-bg.png");
	background-size: cover;
	padding-bottom: 5vh;
}

@media(min-width: 1000px) {
	.main-container{
		transform: translateY(-150px);
	}
}


.ranking-section{
	background: url("../images/white-bg.png");
	background-size: cover;
	padding: 20px;
}

.guilds-rank h2::before {
	content: "";
	background: url("../images/arrow.png") no-repeat;
	background-size: cover;
	display: inline-block;
	width: 11px;
	height: 16px;
	margin-right: 10px;
}

.guilds-rank .header::after {
	content: "";
	width: 100%;
	height: 1px;
	background: linear-gradient(to left,#a28867 30%,#3e3829 30%);
	display: block;
	position: absolute;
	margin-top: 50px;
}

.guilds-rank .accounts::before {
	content: "";
	background: url("../images/star.png") no-repeat;
	background-size: cover;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

.rank-table th{
	color: #f4e4d6;
	font-weight: 400;
}

.show-rank-btn{
	background: url("../images/grey_btn.png");
	background-size: contain;
	margin: auto;
	padding: 10px 10px;
	color: #fff;
	text-decoration: none;
	width: 138px;
	height: 44px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.gold-separator{
	background: rgb(187,158,110);
	background: linear-gradient(146deg, rgba(187,158,110,1) 0%, rgba(204,181,144,1) 50%, rgba(187,158,110,1) 100%);
	height: 6px;
	width: 100%;
}

.header-navbar {
	background: url("../images/nav_bg.png");
	background-size: cover;
	margin-bottom: -50px;
	z-index: 9;
}

/* on mobile make the bg black */
@media (max-width: 768px) {
	.header-navbar {
		background: #000;
		text-align: center;
	}

	.header-navbar .navbar-nav .show-rank-btn{
		margin:auto!important;
	}
}

.header-navbar .nav-item{
	padding: 15px 25px;
	padding-top: 10px;
}

.header-navbar .navbar-nav .nav-link {
	color: #eae7e7;
	position: relative;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
}

/* separator before each nav item */

.header-navbar .navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background-color: #252121;
}

.header-navbar .navbar-nav .nav-link::after {
	right: -25px;
}
.header-navbar .navbar-nav .nav-item:first-child .nav-link::before,
.header-navbar .navbar-nav .nav-item:last-child .nav-link::after, .no-separator::before, .no-separator::after {
	display: none;
}

.nav-item{
	transition: background-color 5.3s;
}

.header-navbar  .nav-item.active:not(.no-hover-nav-item), .header-navbar .nav-item:hover:not(.no-hover-nav-item) {
	border-top: 1px solid #655d54;
	background: linear-gradient(180deg, rgba(249, 178, 109, 0.2) 0%,rgba(74,48,31,0) 100%);
}

.footer-section .nav-item{
	padding: 15px 25px;

}

.footer-section .nav-link{
	text-transform: uppercase;
	color: #262728!important;
	/* drop shadow */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	font-family: "Friz Quadrata Std Medium", serif;
}
.copyright-section{
	background: #171819;
	color: #d6d6e5;
	justify-content: center;
	align-items: center;
	font-size: 12px;
}

.text-highlight{
	color: #f8e6c8;
}

h2{
	font-family: 'Friz Quadrata TT Regular', serif;
}

.language-flag{
	height: 15px;
}

.dropdown-toggle::after{
	height: auto!important;
}

#languageDropdown{
	background: #141414;
	border: 1px solid #1b1b1b;
	border-radius: 155px;
	padding: 6px 25px;
	display: flex;
	justify-content: space-around;
	align-content: center;
	align-items: center;

}

#languageDropdown .language-flag{
	padding: 2px;
	background: #141414;
	border: 1px solid #1b1919;
	border-radius: 50%;
	text-align: center;
	margin-left: 8px;
	height: 18px;
}

.language-nav-item:hover{
	background: none!important;
	border-top: none!important;
}

#languageDropdown:hover, #languageDropdown:focus, #languageDropdown:active{
	background: #343434;
	border: 1px solid #1b1b1b;
}

.dropdown-menu{
	background: #141414;
	border: 1px solid #1b1b1b;
}

.dropdown-item{
	color: #fff;
}

.dropdown-item:hover{
	background: #343434;
	color: #fff;
}

.rank-table td:nth-of-type(1), .rank-table td:nth-of-type(3), .rank-table td:nth-of-type(5){
	color: #d6b39a;
}

.footer-section{
	background: url("../images/footer-bg.png") no-repeat;
	background-size: cover;
}

.user-nav-section{
	background: url("../images/black-bg.png") no-repeat;
	background-size: cover;
	padding: 20px;
}

.user-nav-section .list-group{
	flex-direction: row;
}

.user-nav-section .list-group-item{
	background: #585858;
	background-size: cover;
	border: none;
	color: #fff;
	margin: 5px;
	border-radius: 0;
}

.user-nav-section .list-group-item:hover{
	background: #343434;
}

.user-nav-section h2, .pre-social{
	font-family: 'Friz Quadrata TT Regular', serif;
	text-align: center;
	color: #f8e6c8;
}

.page-section{
	background: url("../images/black-bg.png") no-repeat;
	background-size: cover;
	padding: 20px;
	background: #6a6a6a42;
}

.page-hd{
	background: none!important;
	margin-bottom: 2rem;
}

.alert .close{
	display: none;
}

.table > :not(caption) > * > *{
	background-color: #1b1c1d!important;
	border-color: #312d23;
	color: #fff;
}

.form-control, .form-control:focus{
	background: #141516;
	border: 1px solid #3b3628;
	border-radius: 0;
	color: #fff;

}

.btn-primary{
	background: #585858;
	border: 1px solid #585858;
	border-radius: 0;
	transition: all 0.3s;
}

.btn-primary:hover{
	background: #343434;
	border: 1px solid #343434;
}

.btn-primary:active{
	background: #1b1b1b;
	border: 1px solid #1b1b1b;
}

.btn-primary:focus{
	background: #343434;
	border: 1px solid #343434;
}

.btn-primary:disabled{
	background: #585858;
	border: 1px solid #585858;
}

.btn-secondary{
	background: #585858;
	border: 1px solid #585858;
	border-radius: 0;
}

.btn-secondary:hover{
	background: #343434;
	border: 1px solid #343434;
}

.nav-tabs .nav-link.active {
	color: #fff;
	background-color: #141516;
	border-color: #312d23;
	border-radius: 0;
}



.nav-tabs .nav-link:hover {
	color: #fff;
	background-color: #141516;
	border-color: #312d23;
	border-radius: 0;
}

.nav-tabs .nav-link {
	color: #fff;
	border-radius: 0;
}

.nav-tabs{
	border-color: #312d23;
}

.table th{
	color: #d6b39a;
}
.table td:nth-of-type(1), .table td:nth-of-type(3), .table td:nth-of-type(5){
	color: #d6b39a;
}

.wp-pagenavi {
	padding: 20px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.wp-pagenavi a,
.wp-pagenavi .current {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	color: #b1b1b1;
	border: 0;
	text-align: center;
	margin-left: 5px;
	padding: 0 10px;
	font-weight: bold;
	cursor: pointer
}
.wp-pagenavi .current {
	padding: 10px;
	color: #dcc38a!important;
}
.wp-pagenavi a.first,
.wp-pagenavi a.last {
	background-size: 100%
}

.large-form .form-control{
	padding: 15px;
	text-align: center;
}

a{
	color: #f8e6c8;
	text-decoration: none;
	transition: all 0.3s;
}

a:hover{
	color: #d7a657;
	text-decoration: none;
}

.dropdown-arrow {
	display: inline-block;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

.form-control::placeholder {
	color: rgba(243, 243, 243, 0.75);
	opacity: 1;
}
