@charset "utf-8";

@font-face {
	font-family: 'korean';
	src: url(//font/1HoonGomusin.woff) format('woff')
}

* {
	margin: 0 auto
}

img {
	display: inline
}

div {
	display: grid
}

body {
	background: #1b1716;
	font-family: 'Onest', sans-serif;
	/* background-image: url(img/bg.png); */
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center
}

#bg-video {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100vw;
	min-height: 100vh;
	width: auto;
	height: auto;
	z-index: -1;
	object-fit: cover;
}

button {
	background: none;
	color: inherit;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit
}



			/* Tüm metin sınıfları için çerçeve ve stil - Title'lar hariç */
			.text, .text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9, .text10,
			.text11, .text12, .text13, .text14, .text15, .text16, .text17, .text18, .text19, .text20,
			.text21, .text22, .text23, .text24, .text25, .text26, .text27, .text28, .text29, .text30,
			.text31, .text32, .text33, .text34, .text35, .text36, .text37, .text38, .text39, .text40,
			.text41, .text42, .text43, .text44, .text45, .text46, .text47, .text48, .text49, .text50,
			.text51, .text52, .text53, .text54, .text55, .text56, .text57, .text58, .text59
			{
				background-color: rgba(0, 0, 0, 0.5); /* %60 siyah arka plan */
				border-radius: 16px;
				padding: 18px 24px 18px 50px;
				margin: 12px 0;
				box-shadow: 0 4px 20px rgb(255 247 232 / 40%), inset 0 1px 0 #000;
				transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
				position: relative;
				overflow: hidden;
				/* Flexibel pozisyonlama için varsayılan değerler */
				left: auto;
				right: auto;
				width: auto;
				max-width: none;
			}

			/* Metin içindeki ikonlar için stil */
			.text-icon {
				position: absolute;
				left: 15px;
				top: 50%;
				
				transform: translateY(-50%);
				width: 32px;
				height: 27px;
				transition: all 0.3s ease;
				z-index: 2;
				filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
			}

			/* Hover efekti - daha şık */
			.text:hover, .text1:hover, .text2:hover, .text3:hover, .text4:hover, .text5:hover, .text6:hover, .text7:hover, .text8:hover, .text9:hover, .text10:hover,
			.text11:hover, .text12:hover, .text13:hover, .text14:hover, .text15:hover, .text16:hover, .text17:hover, .text18:hover, .text19:hover, .text20:hover,
			.text21:hover, .text22:hover, .text23:hover, .text24:hover, .text25:hover, .text26:hover, .text27:hover, .text28:hover, .text29:hover, .text30:hover,
			.text31:hover, .text32:hover, .text33:hover, .text34:hover, .text35:hover, .text36:hover, .text37:hover, .text38:hover, .text39:hover, .text40:hover,
			.text41:hover, .text42:hover, .text43:hover, .text44:hover, .text45:hover, .text46:hover, .text47:hover, .text48:hover, .text49:hover, .text50:hover,
			.text51:hover, .text52:hover, .text53:hover, .text54:hover, .text55:hover, .text56:hover, .text57:hover, .text58:hover, .text59:hover {
				border-color: rgba(255, 255, 255, 0.15);
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
				transform: translateY(-3px) scale(1.01);
				box-shadow: 
					0 8px 30px rgba(0, 0, 0, 0.15),
					0 4px 10px rgba(0, 0, 0, 0.1),
					inset 0 1px 0 rgba(255, 255, 255, 0.15);
			}

			/* Hover'da ikon animasyonu */
			.text:hover .text-icon, .text1:hover .text-icon, .text2:hover .text-icon, .text3:hover .text-icon, .text4:hover .text-icon, .text5:hover .text-icon, .text6:hover .text-icon, .text7:hover .text-icon, .text8:hover .text-icon, .text9:hover .text-icon, .text10:hover .text-icon,
			.text11:hover .text-icon, .text12:hover .text-icon, .text13:hover .text-icon, .text14:hover .text-icon, .text15:hover .text-icon, .text16:hover .text-icon, .text17:hover .text-icon, .text18:hover .text-icon, .text19:hover .text-icon, .text20:hover .text-icon,
			.text21:hover .text-icon, .text22:hover .text-icon, .text23:hover .text-icon, .text24:hover .text-icon, .text25:hover .text-icon, .text26:hover .text-icon, .text27:hover .text-icon, .text28:hover .text-icon, .text29:hover .text-icon, .text30:hover .text-icon,
			.text31:hover .text-icon, .text32:hover .text-icon, .text33:hover .text-icon, .text34:hover .text-icon, .text35:hover .text-icon, .text36:hover .text-icon, .text37:hover .text-icon, .text38:hover .text-icon, .text39:hover .text-icon, .text40:hover .text-icon,
			.text41:hover .text-icon, .text42:hover .text-icon, .text43:hover .text-icon, .text44:hover .text-icon, .text45:hover .text-icon, .text46:hover .text-icon, .text47:hover .text-icon, .text48:hover .text-icon, .text49:hover .text-icon, .text50:hover .text-icon,
			.text51:hover .text-icon, .text52:hover .text-icon, .text53:hover .text-icon, .text54:hover .text-icon, .text55:hover .text-icon, .text56:hover .text-icon, .text57:hover .text-icon, .text58:hover .text-icon, .text59:hover .text-icon {
				transform: translateY(-50%) translateX(3px) scale(1.1);
				filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
			}

			/* Liste öğeleri için daha şık çerçeve */
			li {
				border: 1px solid rgba(255, 255, 255, 0.06);
				border-radius: 12px;
				padding: 12px 16px 12px 45px;
				margin: 6px 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
				backdrop-filter: blur(15px);
				box-shadow: 
					0 2px 10px rgba(0, 0, 0, 0.08),
					inset 0 1px 0 rgba(255, 255, 255, 0.05);
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				position: relative;
				/* Flexibel pozisyonlama için varsayılan değerler */
				left: auto;
				right: auto;
				width: auto;
				max-width: none;
			}

			/* Liste öğeleri için ikon */
			li::before {
				content: '';
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
				width: 16px;
				height: 13px;
				background: url('img/ikon/arrow-sm-r.png') no-repeat center;
				background-size: contain;
				transition: all 0.3s ease;
				filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
			}

			li:hover {
				border-color: rgba(255, 255, 255, 0.12);
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
				transform: translateX(8px) scale(1.02);
				box-shadow: 
					0 4px 15px rgba(0, 0, 0, 0.12),
					0 2px 5px rgba(0, 0, 0, 0.08),
					inset 0 1px 0 rgba(255, 255, 255, 0.08);
			}

			/* Liste hover'da ikon animasyonu */
			li:hover::before {
				transform: translateY(-50%) scale(1.2);
				filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
			}

			/* Bonus metin sınıfları için özel stil */
			.bonus-text {
				border: 1px solid rgba(255, 255, 255, 0.08);
				border-radius: 10px;
				padding: 8px 14px 8px 35px;
				margin: 4px 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
				backdrop-filter: blur(10px);
				box-shadow: 
					0 2px 8px rgba(0, 0, 0, 0.06),
					inset 0 1px 0 rgba(255, 255, 255, 0.03);
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				position: relative;
				/* Flexibel pozisyonlama için varsayılan değerler */
				left: auto;
				right: auto;
				width: auto;
				max-width: none;
			}

			/* Bonus metin için ikon */
			.bonus-text::before {
				content: '';
				position: absolute;
				left: 10px;
				top: 50%;
				transform: translateY(-50%);
				width: 14px;
				height: 11px;
				background: url('img/ikon/arrow-sm-r.png') no-repeat center;
				background-size: contain;
				transition: all 0.3s ease;
				filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
			}

			.bonus-text:hover {
				border-color: rgba(255, 255, 255, 0.15);
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
				transform: scale(1.03) translateY(-1px);
				box-shadow: 
					0 4px 12px rgba(0, 0, 0, 0.1),
					inset 0 1px 0 rgba(255, 255, 255, 0.08);
			}

			/* Bonus hover'da ikon animasyonu */
			.bonus-text:hover::before {
				transform: translateY(-50%) scale(1.3);
				filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
			}

			/* Event listesi için özel stil */
			.event {
				border: 1px solid rgba(255, 255, 255, 0.06);
				border-radius: 12px;
				padding: 14px 18px 14px 45px;
				margin: 6px 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
				backdrop-filter: blur(15px);
				box-shadow: 
					0 3px 12px rgba(0, 0, 0, 0.08),
					inset 0 1px 0 rgba(255, 255, 255, 0.05);
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				position: relative;
				/* Flexibel pozisyonlama için varsayılan değerler */
				left: auto;
				right: auto;
				width: auto;
				max-width: none;
			}

			/* Event için ikon */
			.event::before {
				content: '';
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
				width: 18px;
				height: 14px;
				background: url('img/ikon/arrow-sm-r.png') no-repeat center;
				background-size: contain;
				transition: all 0.3s ease;
				filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.25));
			}

			.event:hover {
				border-color: rgba(255, 255, 255, 0.12);
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
				transform: translateY(-2px) scale(1.01);
				box-shadow: 
					0 6px 20px rgba(0, 0, 0, 0.12),
					0 3px 8px rgba(0, 0, 0, 0.08),
					inset 0 1px 0 rgba(255, 255, 255, 0.08);
			}

			/* Event hover'da ikon animasyonu */
			.event:hover::before {
				transform: translateY(-50%) rotate(15deg) scale(1.1);
				filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
			}

			/* Metin içeriği için sol padding */
			.text, .text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9, .text10,
			.text11, .text12, .text13, .text14, .text15, .text16, .text17, .text18, .text19, .text20,
			.text21, .text22, .text23, .text24, .text25, .text26, .text27, .text28, .text29, .text30,
			.text31, .text32, .text33, .text34, .text35, .text36, .text37, .text38, .text39, .text40,
			.text41, .text42, .text43, .text44, .text45, .text46, .text47, .text48, .text49, .text50,
			.text51, .text52, .text53, .text54, .text55, .text56, .text57, .text58, .text59 {
				padding-left: 50px;
			}

			/* Sadece animasyonlu elementler için */
			/* Typing-Animation entfernt - alle Texte sind sofort sichtbar */
			
			/* Tablo içindeki elementleri hariç tut */
			.modern-table,
			.modern-table *,
			.progression-wrapper,
			.progression-wrapper * {
			  opacity: 1 !important;
			  transition: none !important;
			}

			.anasayfa-btn-fixed {
			  position: fixed;
			  left: 0;
			  top: 50%;
			  transform: translateY(-50%);
			  z-index: 99999;
			  background: linear-gradient(90deg, #ffb300 0%, #ff7c00 100%);
			  color: #fff;
			  font-size: 18px;
			  font-weight: 600;
			  padding: 16px 32px;
			  border-radius: 0 32px 32px 0;
			  text-decoration: none;
			  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
			  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
			  display: flex;
			  align-items: center;
			  gap: 10px;
			}
			.anasayfa-btn-fixed:hover {
			  background: linear-gradient(90deg, #ff7c00 0%, #ffb300 100%);
			  transform: translateY(-50%) scale(1.08);
			  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
			}
			@media (max-width: 700px) {
			  .anasayfa-btn-fixed {
				font-size: 14px;
				padding: 10px 14px;
				left: 0;
				border-radius: 0 20px 20px 0;
			  }
			}
			.register-btn-fixed {
			  position: fixed;
			  left: 0;
			  top: calc(50% + 60px);
			  transform: translateY(430%);
			  z-index: 99999;
			  background: linear-gradient(to right, #b67429, #3c2c1a);
			  color: #fff;
			  font-size: 18px;
			  font-weight: 600;
			  padding: 16px 32px;
			  border-radius: 0 16px 9px 0;
			  text-decoration: none;
			  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
			  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
			  display: flex;
			  align-items: center;
			  gap: 10px;
			}
			.register-btn-fixed:hover {
			  background: linear-gradient(141deg, #ff7c00 0%, #382418 100%);
			  transform: translateY(430%) scale(1.08);
			  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
			}
			@media (max-width: 700px) {
			  .register-btn-fixed {
				font-size: 14px;
				padding: 10px 14px;
				left: 0;
				border-radius: 0 20px 20px 0;
			  }
			  .register-btn-fixed {
				top: calc(50% + 44px);
			  }
			}
			.earlyaccess-btn-fixed {
			  position: fixed;
			  left: 0;
			  top: calc(50% + 120px);
			  transform: translateY(-50%);
			  z-index: 99999;
			  background: linear-gradient(90deg, #2979ff 0%, #00b8d4 100%);
			  color: #fff;
			  font-size: 18px;
			  font-weight: 600;
			  padding: 16px 32px;
			  border-radius: 0 32px 32px 0;
			  text-decoration: none;
			  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
			  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
			  display: flex;
			  align-items: center;
			  gap: 10px;
			}
			.earlyaccess-btn-fixed:hover {
			  background: linear-gradient(90deg, #00b8d4 0%, #2979ff 100%);
			  transform: translateY(-50%) scale(1.08);
			  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
			}
			@media (max-width: 700px) {
			  .earlyaccess-btn-fixed {
				font-size: 14px;
				padding: 10px 14px;
				left: 0;
				border-radius: 0 20px 20px 0;
				top: calc(50% + 80px);
			  }
			}
			
			/* Ansiklopedi İpuçları Bölümü için Özel Stil */
			.encyclopedia-tips {
			  display: block !important;
			  visibility: visible !important;
			  opacity: 1 !important;
			  background: rgba(0,150,255,0.4) !important;
			  border: 3px solid #0096ff !important;
			  border-radius: 12px !important;
			  padding: 20px !important;
			  margin-top: 20px !important;
			  position: relative !important;
			  z-index: 1000 !important;
			}
			
			.encyclopedia-tips h3 {
			  color: #0096ff !important;
			  font-size: 22px !important;
			  font-weight: bold !important;
			  text-align: center !important;
			  text-shadow: 0 0 10px rgba(0,150,255,0.5) !important;
			  margin-bottom: 15px !important;
			}

			.encyclopedia-bg {
			  background-image: url('img/bg.jpg');
			  background-size: cover;
			  background-position: center;
			  background-repeat: no-repeat;
			  position: relative;
			}
			.encyclopedia-bg > * {
			  position: relative;
			  z-index: 1;
			}
   /* Modern Sabit Butonlar */
   .fixed-buttons {
     position: fixed;
     bottom: 40px;
     right: 40px;
     display: flex;
     flex-direction: column;
     gap: 18px;
     z-index: 999;
   }
   
   .fixed-buttons button {
     background: rgb(0 0 0 / 12%);
     border: none;
     border-radius: 18px;
     box-shadow: 0 4px 24px rgba(0,0,0,0.18);
     padding: 0;
     cursor: pointer;
     overflow: hidden;
     transition: box-shadow 0.2s, transform 0.2s;
     display: flex;
     flex-direction: column;
     align-items: center;
     min-width: 210px;
   }
   
   .fixed-buttons button:hover {
     box-shadow: 0 8px 32px rgba(0,0,0,0.28);
     transform: translateY(-4px) scale(1.04);
   }
   
   .fixed-buttons button img {
     width: 210px;
     height: 140px;
     object-fit: cover;
     border-radius: 18px 18px 0 0;
     transition: filter 0.2s;
   }
   
   .fixed-buttons button span {
     background: rgba(0,0,0,0.45);
     color: #fff;
     font-size: 17px;
     font-weight: 600;
     width: 100%;
     text-align: center;
     padding: 8px 0;
     border-radius: 0 0 18px 18px;
     letter-spacing: 0.5px;
   }
   
   @media (max-width: 700px) {
     .fixed-buttons {
       right: 10px;
       bottom: 10px;
       gap: 10px;
     }
     .fixed-buttons button, .fixed-buttons button img {
       min-width: 140px;
       width: 140px;
       height: 90px;
     }
     .fixed-buttons button span {
       font-size: 13px;
       padding: 5px 0;
     }
   }

   /* Modern Popup Arkaplan */
   .popup-overlay {
     display: none;
     position: fixed;
     z-index: 9999;
     top: 0; left: 0;
     width: 100vw; height: 100vh;
     background: rgba(30,30,40,0.55);
     justify-content: center;
     align-items: center;
     animation: fadeIn 0.3s;
   }
   
   @keyframes fadeIn {
     from { opacity: 0; }
     to   { opacity: 1; }
   }
   
   .popup-overlay.active { display: flex; }

   .popup-content {
     background: rgba(34, 34, 44, 0.85);
     background-image: url('img/bg.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     box-shadow: 0 8px 40px rgba(0,0,0,0.35);
     border-radius: 24px;
     padding: 36px 32px 24px 32px;
     max-width: 96vw;
     width: 1100px;
     max-height: 80vh;
     overflow-y: auto;
     position: relative;
     backdrop-filter: blur(18px) saturate(1.2);
     border: 1.5px solid rgba(255,255,255,0.09);
     animation: popupIn 0.4s cubic-bezier(.4,2,.6,1);
   }
   
   /* Popup Navigation Okları */
   .popup-nav-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     background: rgba(255,255,255,0.15);
     border: none;
     border-radius: 50%;
     color: #fff;
     font-size: 24px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     z-index: 10003;
     backdrop-filter: blur(10px);
   }
   
   .popup-nav-arrow:hover {
     background: rgba(255,255,255,0.25);
     color: #ffb300;
     transform: translateY(-50%) scale(1.1);
   }
   
   .popup-nav-arrow:active {
     transform: translateY(-50%) scale(0.95);
   }
   
   .popup-nav-arrow.prev {
     left: -14px;
   }
   
   .popup-nav-arrow.next {
     right: -14px;
   }
   
   .popup-nav-arrow:disabled {
     opacity: 0.3;
     cursor: not-allowed;
     transform: translateY(-50%) scale(0.8);
   }
   
   .popup-nav-arrow:disabled:hover {
     background: rgba(255,255,255,0.15);
     color: #fff;
     transform: translateY(-50%) scale(0.8);
   }
   
   /* Sayfa Göstergesi */
   .page-indicator {
     position: absolute;
     top: 15px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 8px;
     z-index: 10003;
   }
   
   .page-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(255,255,255,0.3);
     cursor: pointer;
     transition: all 0.3s ease;
   }
   
   .page-dot.active {
     background: #ffb300;
     transform: scale(1.2);
   }
   
   .page-dot:hover {
     background: rgba(255,255,255,0.6);
   }
   
   @keyframes popupIn {
     from { transform: scale(0.92) translateY(40px); opacity: 0; }
     to   { transform: scale(1) translateY(0); opacity: 1; }
   }
   
   .popup-close {
     position: absolute;
     top: 18px; right: 18px;
     background: rgba(255,255,255,0.13);
     border: none;
     width: 40px; height: 40px;
     border-radius: 50%;
     font-size: 28px;
     color: #fff;
     cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     transition: background 0.2s, color 0.2s, transform 0.2s;
   }
   
   .popup-close:hover {
     background: rgba(255,255,255,0.25);
     color: #ffb300;
     transform: rotate(90deg) scale(1.1);
   }
   
   .popup-content .page {
     color: #fff;
     font-size: 18px;
     line-height: 1.7;
     margin-bottom: 18px;
     display: none;
     animation: fadeIn 0.3s;
   }
   
   .popup-content .page.active { display: block; }
   
   .popup-buttons {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     margin-top: 10px;
   }
   
   .popup-buttons button {
     background: linear-gradient(90deg, #ffb300 0%, #ff7c00 100%);
     color: #fff;
     border: none;
     border-radius: 8px;
     padding: 7px 22px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(0,0,0,0.10);
     transition: background 0.2s, transform 0.2s;
   }
   
   .popup-buttons button:hover {
     background: linear-gradient(90deg, #ff7c00 0%, #ffb300 100%);
     transform: scale(1.07);
   }
   
   @media (max-width: 600px) {
     .popup-content {
       width: 98vw;
       padding: 18px 6vw 18px 6vw;
       max-height: 90vh;
     }
   }
.language-dropdown {
	position: fixed;
	top: 60px;
	left: 500px
}

.language-dropdown .language-select {
    width: 73px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
    background-image: linear-gradient(to right, #d5c4b1, rgba(255, 255, 255, 0.15));
    align-self: center;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;
    margin-top: -78px;
    margin-left: -1px;
}

.language-dropdown .texts {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px
}

.language-dropdown .languages {
	position: absolute;
	top: 100%;
	left: 0px;
	width: 73px;
	background-color: #17120c;
	border-radius: 4px;
	margin-top: 5px;
	display: none;
	z-index: 200
}

.language-dropdown .languages a {
	box-sizing: border-box;
	margin: 0 auto;
	line-height: 40px;
	float: left;
	color: #ffffff;
	width: 100%;
	height: 40px;
	padding-left: 12px;
	font-size: 14px;
	text-decoration: none
}

.language-dropdown .languages a:hover {
	background-color: #aa610e;
	border-radius: 15px;
}

.language-dropdown .languages a i {
	margin-top: 9px
}

.language-dropdown .flags {
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	margin-right: 5px
}

.language-dropdown .flag-en {
	background: url(img/flag/en.png)
}

.language-dropdown .flag-de {
	background: url(img/flag/de.png)
}

.language-dropdown .flag-tr {
	background: url(img/flag/tr.png)
}

.language-dropdown .flag-tr {
	background: url(img/flag/ar.png)
}

.language-dropdown .flag-ro {
	background: url(img/flag/ro.png)
}

.language-dropdown .flag-es {
	background: url(img/flag/es.png)
}

.language-dropdown .flag-cz {
	background: url(img/flag/cz.png)
}

.language-dropdown .flag-fr {
	background: url(img/flag/fr.png)
}

.language-dropdown .flag-gr {
	background: url(img/flag/gr.png)
}

.language-dropdown .flag-hu {
	background: url(img/flag/hu.png)
}

.language-dropdown .flag-it {
	background: url(img/flag/it.png)
}

.language-dropdown .flag-pl {
	background: url(img/flag/pl.png)
}

.language-dropdown .flag-pt {
	background: url(img/flag/pt.png)
}





.presentation {
	width: 750px
}

.presentation .title {
	font-size: 25px;
	color: white;
	text-align: center;
	font-family: 'Georgia', serif; /* değiştirilen kısım */
}


.presentation .inner {
	color: #ff8e01
}


.introduction,
.introduction.en {
	background: url(img/introduction.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 1200px
}

.introduction.ro {
	background: url(img/introduction-ro.jpg)
}

.introduction.de {
	background: url(img/introduction-de.jpg)
}

.introduction.tr {
	background: url(img/theerds.jpg)
}

.introduction.pt {
	background: url(img/introduction-pt.jpg)
}

.introduction.pl {
	background: url(img/introduction-pl.jpg)
}

.introduction.it {
	background: url(img/introduction-it.jpg)
}

.introduction.fr {
	background: url(img/introduction-fr.jpg)
}

.introduction.gr {
	background: url(img/introduction-gr.jpg)
}

.introduction.es {
	background: url(img/introduction-es.jpg)
}

.introduction.hu {
	background: url(img/introduction-hu.jpg)
}

.introduction .inner {
	margin-top: 435px
}

.introduction .text {
	width: 384px;
	/* height: 40px; */
	text-align: center;
	margin-left: 10px;
	font-size: 19px;
	top:13px;
	/* font-family: 'Georgia', sans-serif */
}

.graphic {
	position: relative
}


.graphic1 {
	background: url(img/graphic1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 181px
}

.graphic1 .inner {
	margin-top: 17px
}

.graphic1 .text {
	width: 600px;
	text-align: center;
	font-size: 16px
}

.graphic .overlay {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 1;
	color: #dac0a3
}

.graphic .overlay .title1 {
	position: absolute;
	top: 207px;
	left: 14px;
	width: 278px;
	text-align: center;
	font-size: 16px;
	margin-top: 205px
}

.graphic .overlay .title2 {
	position: absolute;
	top: 500px;
	left: 449px;
	width: 278px;
	text-align: center;
	font-size: 16px
}

.graphic2 {
	background: url(img/graphic2.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 80px;
	margin-top: -20px
}

.qol {
	background: url(img/qol.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 796px
}

.qol .inner {
	margin-top: 19px;
	display: block
}

.selector {
	width: 750px;
	height: 65px;
	margin-top: 55px;
	text-align: center;
	font-size: 16px;
	display: flex;
	align-items: center
}

.eq_changes .selector {
	margin-top: 160px
}

.common_drops .selector {
	margin-top: 141px
}

.selector.sm {
	color: #7a4f32;
	font-size: 12px;
	width: 290px;
	margin-top: -3px;
	position: absolute;
	bottom: 0
}

.selector .arrow {
	width: 34px;
	height: 50px;
	cursor: pointer;
	transition: all .3s ease
}

.selector .arrow.sm {
	width: 29px;
	height: 34px;
	cursor: pointer;
	transition: all .3s ease
}

.selector .arrow:hover,
.selector .arrow.sm:hover {
	-webkit-filter: brightness(140%);
	filter: brightness(140%)
}

.selector .arrow.left {
	margin-left: 20px;
	background: url(img/arrow-l.png) no-repeat
}

.selector .arrow.right {
	margin-right: 20px;
	background: url(img/arrow-r.png) no-repeat
}

.selector .arrow.sm.left {
	margin-left: 20px;
	background: url(img/arrow-sm-l.png) no-repeat
}

.selector .arrow.sm.right {
	margin-right: 20px;
	background: url(img/arrow-sm-r.png) no-repeat
}

.selector .arrow.disabled,
.selector .arrow.sm.disabled {
	opacity: .5;
	pointer-events: none;
	cursor: default
}

.list ul li {
	font-size: 16px;
	width: 275px;
	height: 69px;
	margin-bottom: 30px
}

.list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 19px
}

.split-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 50%
}

.split-list li {
	width: 357px;
	height: 69px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center
}

.split-list.right-align li {
	justify-content: flex-end;
	padding-right: 10px;
	text-align: right
}

.split-list.left-align li {
	justify-content: flex-start;
	padding-left: 10px;
	text-align: left
}

.split-list li:last-child:nth-child(odd) {
	width: 100%
}

.instructions {
	background: url(img/instructions.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 2360px
}



.instructions .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.instructions .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.instructions .text2 {
	text-align: center;
	font-size: 16px;
	width: 340px;
	position: absolute;
	top: 1550px;
	margin-left: 360px
}

.instructions .text3 {
	text-align: center;
	font-size: 16px;
	width: 340px;
	position: absolute;
	top: 2050px
}

.beginning {
	background: url(img/beginning.jpg) no-repeat;
	width: 750px;
	height: 2464px
}

.beginning .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.beginning .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.beginning .text2 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 268px;
	margin-left: 284px
}

.beginning .text3 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 385px;
	margin-left: 296px
}

.beginning .text4 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 753px;
	margin-left: -24px
}

.beginning .text5 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 753px;
	margin-left: 318px
}

.beginning .text6 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 938px;
	margin-left: -24px
}

.beginning .text7 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 1014px;
	margin-left: 318px
}

.beginning .text8 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 1291px;
	margin-left: -24px
}

.beginning .text9 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 1366px;
	margin-left: 318px
}

.beginning .text10 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 1724px;
	margin-left: -24px
}

.beginning .text11 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 1643px;
	margin-left: 318px
}

.beginning .text12 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 2001px;
	margin-left: -24px
}

.beginning .text13 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 1917px;
	margin-left: 318px
}

.beginning .text14 {
	text-align: center;
	font-size: 16px;
	width: 415px;
	position: absolute;
	top: 2172px;
	margin-left: 318px
}

.maps {
	background: url(img/mapsx1.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx1 {
	background: url(img/mapsx2.png) no-repeat;
	width: 750px;
	height: 794px
}



.maps .inner {
	margin-top: 15px;
	display: block;
	position: relative
}
.mapsx1 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.maps .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx1 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.maps .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}
.mapsx1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx3 {
	background: url(img/mapsx3.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx3 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx3 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx3 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}

.mapsx4 {
	background: url(img/mapsx4.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx4 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx4 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx4 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}

.mapsx5 {
	background: url(img/mapsx5.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx5 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx5 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx5 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}

.mapsx6 {
	background: url(img/mapsx6.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx6 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx6 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx6 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx7 {
	background: url(img/mapsx7.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx7 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx7 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx7 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}



.mapsx8 {
	background: url(img/mapsx8.jpg) no-repeat;
	width: 750px;
	height: 794px
}



.mapsx8 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx8 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx8 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}



.mapsx9 {
	background: url(img/mapsx9.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx9 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx9 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx9 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx10 {
	background: url(img/mapsx10.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx10 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx10 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx10 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}



.mapsx11 {
	background: url(img/mapsx11.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx11 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx11 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx11 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx12 {
	background: url(img/mapsx12.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx12 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx12 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx12 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx13 {
	background: url(img/mapsx13.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx13 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx13 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx13 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx14 {
	background: url(img/mapsx14.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx14 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx14 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx14 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx15 {
	background: url(img/mapsx15.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx15 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx15 .text {
	width: 550px;
	text-align: center;
	font-size: 16px;
	margin-top: 544px
}

.mapsx15 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}



.mapsx16 {
	background: url(img/mapsx16.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx16 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx16 .text {
	width: 406px;
	text-align: center;
	font-size: 16px;
	margin-top: 54px
}

.mapsx16 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx17 {
	background: url(img/mapsx17.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx17 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx17 .text {
	width: 471px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx17 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx18 {
	background: url(img/mapsx18.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx18 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx18 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx18 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx19 {
	background: url(img/mapsx19.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx19 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx19 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx19 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -114px
}

.mapsx20 {
	background: url(img/mapsx20.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx20 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx20 .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx20 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -159px
}


.mapsx21 {
	background: url(img/mapsx21.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx21 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx21 .text {
	width: 600px;
	text-align: center;
	font-size: 17px;
	margin-top: 60px
}

.mapsx21 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx22 {
	background: url(img/mapsx22.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx22 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx22 .text {
	width: 313px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx22 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -124px
}



.mapsx23 {
	background: url(img/mapsx23.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx23 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx23 .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx23 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: -156px;
	margin-top: -345px
}




.mapsx24 {
	background: url(img/mapsx24.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx24 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx24 .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx24 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -108px
}



.mapsx25 {
	background: url(img/mapsx25.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx25 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx25 .text {
	width: 658px;
	text-align: center;
	font-size: 16px;
	margin-top: 45px
}

.mapsx25 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -28px
}




.mapsx26 {
	background: url(img/mapsx26.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx26 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx26 .text {
	width: 664px;
	text-align: center;
	font-size: 16px;
	margin-top: 117px
}

.mapsx26 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 588px;
	margin-left: 18px;
	margin-top: -56px
}



.mapsx27 {
	background: url(img/mapsx27.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx27 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx27 .text {
	width: 394px;
	text-align: center;
	font-size: 16px;
	margin-top: 44px
}

.mapsx27 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -140px
}



.mapsx28 {
	background: url(img/mapsx28.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx28 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx28 .text {
	width: 303px;
	text-align: center;
	font-size: 16px;
	margin-top: 43px
}

.mapsx28 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -120px
}


.mapsx29 {
	background: url(img/mapsx29.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx29 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx29 .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx29 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -191px
}


.mapsx30 {
	background: url(img/mapsx30.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx30 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx30 .text {
	width: 290px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx30 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}



.mapsx31 {
	background: url(img/mapsx31.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx31 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx31 .text {
	width: 587px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx31 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 155px;
	margin-top: -90px
}

.mapsx425 {
	background: url(img/mapsx425.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx425 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx425 .text {
	width: 587px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx425 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 155px;
	margin-top: -90px
}


.voice35 {
	background: url(img/voice35.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.voice35 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.voice35 .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.voice35 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx32 {
	background: url(img/mapsx32.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx32 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx32 .text {
	width: 405px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx32 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}



.mapsx33 {
	background: url(img/mapsx33.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx33 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx33 .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx33 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx34 {
	background: url(img/mapsx34.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx34 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx34 .text {
	width: 625px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx34 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx35 {
	background: url(img/mapsx35global.png) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx35 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx35 .text {
	width: 663px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx35 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}



.mapsx36 {
	background: url(img/zindanlar.jpg) no-repeat;
	width: 750px;
	height: 2597px
}

.mapsx36 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx36 .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx36 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}


.mapsx37 {
	background: url(img/lastmaps.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsx37 .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsx37 .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsx37 .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}





.discord-widget {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9999;
  display: inline-block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(116, 90, 5, 0.18), 0 1.5px 6px rgba(0,0,0,0.20);
  transition: transform 0.22s cubic-bezier(.4,2,.6,1), box-shadow 0.22s;
  animation: discordWiggle 2.5s ease-in-out infinite alternate;
}
.discord-widget img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  transition: filter 0.22s;
}
.discord-widget:hover {
  transform: scale(1.06) rotate(-1.5deg);
  box-shadow: 0 8px 36px rgba(88,101,242,0.28), 0 3px 12px rgba(0,0,0,0.16);
  z-index: 10;
}
.discord-widget:hover img {
  filter: brightness(1.08) saturate(1.2);
}
@keyframes discordWiggle {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-1deg); }
  20% { transform: rotate(1.2deg); }
  30% { transform: rotate(-0.8deg); }
  40% { transform: rotate(0.8deg); }
  50% { transform: rotate(-0.5deg); }
  60% { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}



.maps_wrap {
	background-image: url(img/maps_base.jpg);
	width: 750px;
	height: 1369px;
	position: relative
}

.maps_wrap .selector,
.dungeons_wrap .selector {
	position: absolute;
	top: -40px;
	z-index: 100
}

.maps_display {
	width: 750px;
	height: 1369px
}

.maps_display.map1 {
	background: url(img/maps_map1.jpg) no-repeat
}

.maps_display.map2 {
	background: url(img/maps_map2.jpg) no-repeat
}

.maps_display.wonsung {
	background: url(img/maps_wonsung.jpg) no-repeat
}

.maps_display.seungryong {
	background: url(img/maps_seungryong.jpg) no-repeat
}

.maps_display.yongbi {
	background: url(img/maps_yongbi.jpg) no-repeat
}

.maps_display.hwang {
	background: url(img/maps_hwang.jpg) no-repeat
}

.maps_display.sohan {
	background: url(img/maps_sohan.jpg) no-repeat
}

.maps_display.sd {
	background: url(img/maps_sd.jpg) no-repeat
}

.maps_display.snake {
	background: url(img/maps_snake.jpg) no-repeat
}

.maps_display.doyyumhwan {
	background: url(img/maps_doyyumhwan.jpg) no-repeat
}

.maps_display.lungsam {
	background: url(img/maps_lungsam.jpg) no-repeat
}

.maps_display.red_forest {
	background: url(img/maps_red_forest.jpg) no-repeat
}

.maps_display.grotto {
	background: url(img/maps_grotto.jpg) no-repeat
}

.maps_display.grotto2 {
	background: url(img/maps_grotto2.jpg) no-repeat
}

.maps_display.beta {
	background: url(img/maps_beta.jpg) no-repeat
}

.maps_display.enchanted {
	background: url(img/maps_enchanted.jpg) no-repeat
}

.maps_display.ochao {
	background: url(img/maps_ochao.jpg) no-repeat
}

.maps_display .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.maps_display .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 22px
}

.dungeons {
	background: url(img/dungeons.jpg) no-repeat;
	width: 750px;
	height: 175px
}

.dungeons .inner {
	margin-top: 15px;
	display: block
}

.dungeons .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 73px
}

.dungeons_wrap {
	background-image: url(img/dungeons_base.jpg);
	width: 750px;
	height: 859px;
	position: relative
}

.dungeons_drop {
	width: 750px;
	height: 859px
}

.dungeons_drop.dt {
	background: url(img/dungeons_dt.jpg) no-repeat
}

.dungeons_drop.mystic {
	background: url(img/dungeons_mystic.jpg) no-repeat
}

.dungeons_drop.spider {
	background: url(img/dungeons_spider.jpg) no-repeat
}

.dungeons_drop.dc {
	background: url(img/dungeons_dc.jpg) no-repeat
}

.dungeons_drop.beran {
	background: url(img/dungeons_beran.jpg) no-repeat
}

.dungeons_drop.razador {
	background: url(img/dungeons_razador.jpg) no-repeat
}

.dungeons_drop.nemere {
	background: url(img/dungeons_nemere.jpg) no-repeat
}

.dungeons_drop .inner {
	margin-top: 15px;
	display: block
}

.dungeons_drop .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 17px
}

.dungeons_drop .comparison-slider-wrapper {
	margin: 60px auto 0 auto
}

.comparison-slider-wrapper {
	position: relative;
	width: 645px;
	height: 330px;
	margin: 69px auto 0 auto;
	background-color: white;

	.comparison-slider {
		position: relative;
		width: 100%;
		margin: 0;
		box-sizing: border-box;

		>img {
			width: 100%;
			height: auto;
			display: block
		}

		.overlay {
			display: none;
			position: absolute;
			width: 250px;
			bottom: 20px;
			right: 20px;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 10px;
			box-sizing: border-box;
			color: #DDD;
			text-align: right;

		}

		.resize {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 50%;
			overflow: hidden;

			>img {
				display: block
			}

			.overlay {
				right: auto;
				left: 20px;
				text-align: left
			}
		}

		.divider {
			position: absolute;
			width: 2px;
			height: 100%;
			background-color: #382418;
			left: 50%;
			top: 0;
			bottom: 0;
			margin-left: -1px;
			cursor: ew-resize;

			&:before {
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				left: -9px;
				top: 50%;
				margin-top: -10px;
				background-color: #382418;
				transform: rotate(45deg);
				transition: all .1s ease-in-out
			}

			&:after {
				content: "";
				position: absolute;
				width: 12px;
				height: 12px;
				left: -5px;
				top: 50%;
				margin-top: -6px;
				background-color: #533724;
				transform: rotate(45deg);
				transition: all .1s ease-in-out
			}

			&.draggable {
				&:before {
					width: 30px;
					height: 30px;
					left: -14px;
					margin-top: -15px
				}

				&:after {
					width: 20px;
					height: 20px;
					left: -9px;
					margin-top: -10px;
					background-color: #64432d
				}
			}
		}
	}

	.caption {
		position: relative;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		font-size: 12px;
		font-style: italic
	}
}

.comp-handle {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 2;
	width: 5px;
	height: 100%;
	background: #fff;
	cursor: ew-resize
}

.multi_farm {
	background: url(img/multifarm.jpg) no-repeat;
	width: 750px;
	height: 874px
}

.multi_farm .inner {
	margin-top: 15px;
	display: block
}

.multi_farm .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 62px
}

.hunting {
	position: relative
}

.hunting1 {
	background: url(img/hunting1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 243px
}

.hunting1 .inner {
	margin-top: 17px
}

.hunting1 .text {
	width: 600px;
	text-align: center;
	font-size: 16px
}

.hunting2 {
	background: url(img/hunting3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 523px;
	margin-top: 0
}

.mount_system {
	background: url(img/mounts.jpg) no-repeat;
	width: 750px;
	height: 1590px
}

.mount_system .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mount_system .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 62px
}

.mount_system .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1063px;
	margin-left: 18px
}

.mount_system .text3 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1164px;
	margin-left: 328px
}

.mount_system .text4 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1203px;
	margin-left: 328px
}

.mount_system .text5 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1242px;
	margin-left: 328px
}

.mount_system .text6 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1279px;
	margin-left: 328px
}

.mount_system .text7 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1414px
}

.pet_system {
	background: url(img/pets.jpg) no-repeat;
	width: 750px;
	height: 2275px
}

.pet_system .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.pet_system .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 46px
}

.pet_system .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 662px;
	margin-left: -90px
}

.pet_system .text3 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 712px;
	margin-left: 50px
}

.pet_system .text4 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 772px;
	margin-left: 33px
}

.pet_system .text5 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 772px;
	margin-left: 20px
}

.pet_system .text6 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 831px;
	margin-left: 33px
}

.pet_system .text7 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 831px;
	margin-left: 20px
}

.pet_system .text8 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 889px;
	margin-left: 33px
}

.pet_system .text9 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 889px;
	margin-left: 20px
}

.pet_system .text10 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 947px;
	margin-left: 33px
}

.pet_system .text11 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 947px;
	margin-left: 20px
}

.pet_system .text12 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1007px;
	margin-left: 33px
}

.pet_system .text13 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1007px;
	margin-left: 20px
}

.pet_system .text14 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1066px;
	margin-left: 33px
}

.pet_system .text15 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1066px;
	margin-left: 20px
}

.pet_system .text16 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1143px;
	margin-left: 97px
}

.pet_system .text17 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1219px;
	margin-left: 34px
}

.pet_system .text18 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1219px;
	margin-left: -34px
}

.pet_system .text19 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1290px;
	margin-left: -10px
}

.pet_system .text20 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1290px;
	margin-left: 10px
}

.pet_system .text21 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1349px;
	margin-left: 34px
}

.pet_system .text22 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1349px;
	margin-left: -34px
}

.pet_system .text23 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1418px;
	margin-left: -10px
}

.pet_system .text24 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1418px;
	margin-left: 10px
}

.pet_system .text25 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1477px;
	margin-left: 34px
}

.pet_system .text26 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1477px;
	margin-left: -34px
}

.pet_system .text27 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1545px;
	margin-left: -10px
}

.pet_system .text28 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1545px;
	margin-left: 10px
}

.pet_system .text29 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1608px;
	margin-left: 34px
}

.pet_system .text30 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1608px;
	margin-left: -34px
}

.pet_system .text31 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1675px;
	margin-left: -10px
}

.pet_system .text32 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1675px;
	margin-left: 10px
}

.pet_system .text33 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1736px;
	margin-left: 34px
}

.pet_system .text34 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1736px;
	margin-left: -34px
}

.pet_system .text35 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1804px;
	margin-left: -10px
}

.pet_system .text36 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1804px;
	margin-left: 10px
}

.pet_system .text37 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1866px;
	margin-left: 34px
}

.pet_system .text38 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1866px;
	margin-left: -34px
}

.pet_system .text39 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1934px;
	margin-left: -10px
}

.pet_system .text40 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1934px;
	margin-left: 10px
}

.pet_system .text41 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1995px;
	margin-left: 34px
}

.pet_system .text42 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1995px;
	margin-left: -34px
}

.pet_system .text43 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 2062px;
	margin-left: -10px
}

.pet_system .text44 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 2062px;
	margin-left: 10px
}

.pet_system .text45 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 2124px;
	margin-left: 34px
}

.pet_system .text46 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 2124px;
	margin-left: -34px
}

.pet_system .text47 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 2191px;
	margin-left: -10px
}

.pet_system .text48 {
	text-align: -webkit-right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 2191px;
	margin-left: 10px
}

.battle_pass {
	position: relative
}

.battle_pass1 {
	background: url(img/battlepass1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 556px
}

.battle_pass1 .inner {
	margin-top: 17px
}

.battle_pass1 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 119px;
	margin-left: -290px
}

.battle_pass1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 284px;
	margin-left: -290px
}

.battle_pass2 {
	background: url(img/battlepass3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 94px;
	margin-top: 0
}

.challenges {
	position: relative
}

.challenges1 {
	background: url(img/challenges1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 798px
}

.challenges1 .inner {
	margin-top: 17px;
	display: block;
	width: 750px;
	position: relative
}

.challenges1 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 71px;
	margin-left: 24px
}

.challenges1 .text2 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 649px;
	margin-left: 118px
}

.challenges1 .text3 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1184px;
	margin-left: 30px
}

.challenges2 {
	background: url(img/challenges3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 293px;
	margin-top: 0
}

.costumes {
	position: relative
}

.costumes1 {
	background: url(img/costume1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 1992px
}

.costumes1 .inner {
	margin-top: 17px;
	width: 749px
}

.costumes1 .text {
	text-align: center;
	font-size: 16px;
	width: 470px;
	position: absolute;
	top: 198px;
	margin-left: 12px
}

.costumes1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 612px;
	position: absolute;
	top: 384px;
	margin-left: 110px
}

.costumes1 .text3 {
	text-align: center;
	font-size: 16px;
	width: 613px;
	position: absolute;
	top: 528px;
	margin-left: 120px
}

.costumes1 .text4 {
	text-align: center;
	font-size: 16px;
	width: 452px;
	position: absolute;
	top: 728px;
	margin-left: 15px
}

.costumes1 .text5 {
	text-align: center;
	font-size: 16px;
	width: 452px;
	position: absolute;
	top: 1044px;
	margin-left: 34px
}

.costumes1 .text6 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1666px;
	margin-left: 123px
}

.costumes1 .text7 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1756px;
	margin-left: 21px
}

.costumes3 {
	background: url(img/costume3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 56px;
	margin-top: 0
}

.ranking {
	background: url(img/ranking.jpg) no-repeat;
	width: 750px;
	height: 2158px
}

.ranking .inner {
	margin-top: 15px;
	display: block;
	width: 750px;
	position: relative
}

.ranking .text {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 111px;
	margin-left: 176px
}

.ranking .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 632px;
	margin-left: 29px
}

.ranking .text3 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 781px;
	margin-left: 176px
}

.ranking .text4 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1302px;
	margin-left: 22px
}

.ranking .text5 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1467px;
	margin-left: 176px
}

.ranking .text6 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1986px;
	margin-left: 22px
}

.daily_quests {
	background: url(img/quests1.jpg) no-repeat;
	width: 750px;
	height: 869px
}

.daily_quests .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.daily_quests .text {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 105px;
	margin-left: -238px
}

.daily_quests .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 160px;
	margin-left: -315px
}

.daily_quests .text3 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 250px;
	margin-left: -281px
}

.daily_quests .text4 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 288px;
	margin-left: -281px
}

.daily_quests .text5 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 326px;
	margin-left: -281px
}

.daily_quests .text6 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 364px;
	margin-left: -281px
}

.daily_quests .text7 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 402px;
	margin-left: -281px
}

.daily_quests .text8 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 440px;
	margin-left: -281px
}

.daily_quests .text9 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 478px;
	margin-left: -281px
}

.daily_quests .text10 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 516px;
	margin-left: -281px
}

.daily_quests .text11 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 554px;
	margin-left: -281px
}

.daily_quests .text12 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 775px;
	margin-left: -305px
}

.missionbook {
	background: url(img/quests2.jpg) no-repeat;
	width: 750px;
	height: 945px
}

.missionbook .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.missionbook .text {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 0;
	margin-left: -271px
}

.missionbook .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 70px;
	margin-left: -344px
}

.biologist_quests {
	background: url(img/quests3.jpg) no-repeat;
	width: 750px;
	height: 2333px
}

.biologist_quests .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.biologist_quests .text {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 0;
	margin-left: -271px
}

.biologist_quests .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 80px;
	margin-left: -349px
}

.biologist_quests .text3 {
	text-align: left;
	font-size: 16px;
	width: 610px;
	position: absolute;
	top: 225px;
	margin-left: -256px
}

.biologist_quests .text4 {
	text-align: left;
	font-size: 16px;
	width: 610px;
	position: absolute;
	top: 343px;
	margin-left: -256px
}

.biologist_quests .text5 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 520px;
	margin-left: -149px
}

.biologist_quests .text6 {
	text-align: center;
	font-size: 16px;
	width: 101px;
	position: absolute;
	top: 573px;
	margin-left: -334px
}

.biologist_quests .text7 {
	text-align: center;
	font-size: 16px;
	width: 101px;
	position: absolute;
	top: 573px;
	margin-left: -234px
}

.biologist_quests .text8 {
	text-align: center;
	font-size: 16px;
	width: 154px;
	position: absolute;
	top: 573px;
	margin-left: -133px
}

.biologist_quests .text9 {
	text-align: center;
	font-size: 16px;
	width: 310px;
	position: absolute;
	top: 573px;
	margin-left: 27px
}

.biologist_quests .text10 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 653px;
	margin-left: -234px
}

.biologist_quests .text11 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 653px;
	margin-left: -133px
}

.biologist_quests .text12 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 644px;
	margin-left: 27px
}

.biologist_quests .text13 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 725px;
	margin-left: -234px
}

.biologist_quests .text14 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 725px;
	margin-left: -133px
}

.biologist_quests .text15 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 714px;
	margin-left: 27px
}

.biologist_quests .text16 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 792px;
	margin-left: -234px
}

.biologist_quests .text17 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 792px;
	margin-left: -133px
}

.biologist_quests .text18 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 792px;
	margin-left: 27px
}

.biologist_quests .text19 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 862px;
	margin-left: -234px
}

.biologist_quests .text20 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 862px;
	margin-left: -133px
}

.biologist_quests .text21 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 862px;
	margin-left: 27px
}

.biologist_quests .text22 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 930px;
	margin-left: -234px
}

.biologist_quests .text23 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 930px;
	margin-left: -133px
}

.biologist_quests .text24 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 930px;
	margin-left: 27px
}

.biologist_quests .text25 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 999px;
	margin-left: -234px
}

.biologist_quests .text26 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 999px;
	margin-left: -133px
}

.biologist_quests .text27 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 999px;
	margin-left: 27px
}

.biologist_quests .text28 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1069px;
	margin-left: -234px
}

.biologist_quests .text29 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1069px;
	margin-left: -133px
}

.biologist_quests .text30 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1069px;
	margin-left: 27px
}

.biologist_quests .text31 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1139px;
	margin-left: -234px
}

.biologist_quests .text32 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1139px;
	margin-left: -133px
}

.biologist_quests .text33 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1139px;
	margin-left: 27px
}

.biologist_quests .text34 {
	text-align: left;
	font-size: 16px;
	width: 310px;
	position: absolute;
	top: 1299px;
	margin-left: -134px
}

.biologist_quests .text35 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1374px;
	margin-left: -234px
}

.biologist_quests .text36 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1374px;
	margin-left: -133px
}

.biologist_quests .text37 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1354px;
	margin-left: 27px
}

.biologist_quests .text38 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1440px;
	margin-left: -234px
}

.biologist_quests .text39 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1440px;
	margin-left: -133px
}

.biologist_quests .text40 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1422px;
	margin-left: 27px
}

.biologist_quests .text41 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1510px;
	margin-left: -234px
}

.biologist_quests .text42 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1510px;
	margin-left: -133px
}

.biologist_quests .text43 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1490px;
	margin-left: 27px
}

.biologist_quests .text44 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1564px;
	margin-left: -353px
}

.biologist_quests .text45 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1780px;
	margin-left: -143px
}

.biologist_quests .text46 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1855px;
	margin-left: -234px
}

.biologist_quests .text47 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1855px;
	margin-left: -133px
}

.biologist_quests .text48 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1855px;
	margin-left: 27px
}

.biologist_quests .text49 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1925px;
	margin-left: -234px
}

.biologist_quests .text50 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1925px;
	margin-left: -133px
}

.biologist_quests .text51 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1925px;
	margin-left: 27px
}

.biologist_quests .text52 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 1995px;
	margin-left: -234px
}

.biologist_quests .text53 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 1995px;
	margin-left: -133px
}

.biologist_quests .text54 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 1995px;
	margin-left: 27px
}

.biologist_quests .text55 {
	text-align: center;
	font-size: 14px;
	width: 101px;
	position: absolute;
	top: 2063px;
	margin-left: -234px
}

.biologist_quests .text56 {
	text-align: center;
	font-size: 14px;
	width: 154px;
	position: absolute;
	top: 2063px;
	margin-left: -133px
}

.biologist_quests .text57 {
	text-align: center;
	font-size: 14px;
	width: 310px;
	position: absolute;
	top: 2063px;
	margin-left: 27px
}

.biologist_quests .text58 {
	text-align: left;
	font-size: 16px;
	width: 310px;
	position: absolute;
	top: 2150px;
	margin-left: -270px
}

.biologist_quests .text59 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 2220px;
	margin-left: -350px
}

.story_quests {
	background: url(img/maps.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.story_quests .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.story_quests .inner .quests {
	width: 290px
}

.story_quests .inner .quests .title {
	font-size: 16px;
	text-align: center;
	line-height: 44px;
	height: 44px
}

.story_quests .inner .quests .list-wrap {
	padding: 109px 34px 178px 7px
}

.story_quests .inner .quests .list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block
}

.story_quests .inner .quests .list li {
	padding-left: 30px;
	min-height: 23px;
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	font-size: 16px
}

.story_quests .inner .quests.guard {
	position: absolute;
	right: 4px;
	top: -15px;
	height: 282px;
	display: block;
	text-align: left
}

.story_quests .inner .quests.uriel {
	position: absolute;
	left: 78px;
	top: -15px;
	height: 488px;
	display: block
}

.story_quests .inner .quests.angmur {
	position: absolute;
	right: 4px;
	top: 277px;
	height: 488px;
	display: block
}

.story_quests .inner .quests.leechung {
	position: absolute;
	left: 78px;
	top: 483px;
	height: 395px;
	display: block
}

.dark_shrines {
	background: url(img/dark_shrines.jpg) no-repeat;
	width: 750px;
	height: 824px
}

.dark_shrines .inner {
	margin-top: 15px;
	display: block
}

.dark_shrines .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 62px
}

.cursed_rocks {
	position: relative
}

.cursed_rocks1 {
	background: url(img/cursed_rocks1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 306px
}

.cursed_rocks1 .inner {
	margin-top: 17px
}

.cursed_rocks1 .text {
	width: 600px;
	text-align: center;
	font-size: 16px
}

.cursed_rocks1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 738px;
	margin-left: 8px
}

.cursed_rocks2 {
	background: url(img/cursed_rocks3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 180px;
	margin-top: 0
}

.personal_shop {
	background: url(img/personal_shop.jpg) no-repeat;
	width: 750px;
	height: 1795px
}

.personal_shop .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.personal_shop .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 62px
}

.personal_shop .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 274px;
	margin-left: 8px
}

.personal_shop .text3 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 401px;
	margin-left: 48px
}

.personal_shop .text4 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 439px;
	margin-left: 48px
}

.personal_shop .text5 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 477px;
	margin-left: 48px
}

.personal_shop .text6 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 515px;
	margin-left: 48px
}

.personal_shop .text7 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 553px;
	margin-left: 48px
}

.personal_shop .text8 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 591px;
	margin-left: 48px
}

.personal_shop .text9 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 629px;
	margin-left: 48px
}

.personal_shop .text10 {
	text-align: center;
	font-size: 16px;
	width: 517px;
	position: absolute;
	top: 710px;
	margin-left: -4px
}

.personal_shop .text11 {
	text-align: center;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 1010px;
	margin-left: 9px
}

.personal_shop .text12 {
	text-align: center;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 1320px;
	margin-left: 250px
}

.shop_search {
	background: url(img/shopsearch.jpg) no-repeat;
	width: 750px;
	height: 1151px
}

.shop_search .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.shop_search .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 62px
}

.shop_search .text2 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 272px;
	margin-left: 54px
}

.shop_search .text3 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 300px;
	margin-left: 54px
}

.shop_search .text4 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 328px;
	margin-left: 54px
}

.shop_search .text5 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 356px;
	margin-left: 54px
}

.shop_search .text6 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 384px;
	margin-left: 54px
}

.shop_search .text7 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 412px;
	margin-left: 54px
}

.shop_search .text8 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 440px;
	margin-left: 54px
}

.shop_search .text9 {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 468px;
	margin-left: 54px
}

.shoulder_sash {
	background: url(img/sashes.jpg) no-repeat;
	width: 750px;
	height: 1070px
}

.shoulder_sash .inner {
	margin-top: 15px;
	display: block
}

.shoulder_sash .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 62px
}

.alchemy {
	background: url(img/alchemy.jpg) no-repeat;
	width: 750px;
	height: 1597px
}

.alchemy .inner {
	margin-top: 15px;
	display: block;
	width: 749px;
	position: relative
}

.alchemy .text {
	text-align: left;
	font-size: 16px;
	width: 417px;
	position: absolute;
	top: 108px;
	margin-left: 103px
}

.alchemy .text2 {
	text-align: left;
	font-size: 16px;
	width: 499px;
	position: absolute;
	top: 176px;
	margin-left: 32px
}

.alchemy .text3 {
	text-align: center;
	font-size: 12px;
	width: 380px;
	position: absolute;
	top: 583px;
	margin-left: -3px
}

.alchemy .text4 {
	text-align: center;
	font-size: 12px;
	width: 344px;
	position: absolute;
	top: 583px;
	margin-left: 394px
}

.alchemy .text5 {
	text-align: center;
	font-size: 12px;
	width: 344px;
	position: absolute;
	top: 924px;
	margin-left: -3px
}

.alchemy .text6 {
	text-align: center;
	font-size: 12px;
	width: 344px;
	position: absolute;
	top: 924px;
	margin-left: 394px
}

.alchemy .text7 {
	text-align: center;
	font-size: 12px;
	width: 344px;
	position: absolute;
	top: 1265px;
	margin-left: -3px
}

.alchemy .text8 {
	text-align: center;
	font-size: 12px;
	width: 344px;
	position: absolute;
	top: 1265px;
	margin-left: 394px
}

.gaya {
	background: url(img/gaya.jpg) no-repeat;
	width: 750px;
	height: 824px
}

.gaya .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.gaya .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 81px;
	margin-left: -283px
}

.buffi {
	background: url(img/buffi.jpg) no-repeat;
	width: 750px;
	height: 652px
}

.buffi .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.buffi .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 100px;
	margin-left: -288px
}

.buffi .text2 {
	text-align: center;
	font-size: 16px;
	width: 400px;
	position: absolute;
	top: 270px;
	margin-left: -267px
}

.common_drops {
	position: relative
}

.common_drops1 {
	background: url(img/common_drops1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 244px
}

.common_drops1 .inner {
	margin-top: 17px
}

.common_drops1 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 100px;
	margin-left: 25px
}

.common_drops1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 201px;
	margin-left: -267px
}

.drop-wrap {
	background: url(img/common_drops_base.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 579px;
	margin-top: 0
}

.common_drops2 {
	width: 750px;
	height: 579px;
	margin-top: 0
}

.common_drops2.p1 {
	background: url(img/common_drops_p1.jpg);
	background-repeat: no-repeat
}

.common_drops2.p2 {
	background: url(img/common_drops_p2.jpg);
	background-repeat: no-repeat
}

.common_drops2.p3 {
	background: url(img/common_drops_p3.jpg);
	background-repeat: no-repeat
}

.common_drops3 {
	background: url(img/common_drops2.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 427px;
	margin-top: 0
}

.common_drops3 .inner {
	margin-top: 17px
}

.common_drops3 .text {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 885px;
	margin-left: -182px
}

.common_drops3 .text2 {
	text-align: center;
	font-size: 16px;
	width: 435px;
	position: absolute;
	top: 962px;
	margin-left: -346px
}

.belts {
	background: url(img/belts.jpg) no-repeat;
	width: 750px;
	height: 1398px
}

.belts .inner {
	margin-top: 15px;
	display: block;
	width: 749px;
	position: relative
}

.belts .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 85px;
	margin-left: 27px
}

.belts .text2 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 255px;
	margin-left: 107px
}

.belts .text3 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 363px;
	margin-left: 110px
}

.belts .text4 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 456px;
	margin-left: 110px
}

.belts .text5 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 558px;
	margin-left: 110px
}

.belts .text6 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 652px;
	margin-left: 110px
}

.belts .text7 {
	text-align: right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 750px;
	margin-left: -30px
}

.belts .text8 {
	text-align: right;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 865px;
	margin-left: -60px
}

.belts .text9 {
	text-align: right;
	font-size: 16px;
	width: 200px;
	position: absolute;
	top: 960px;
	margin-left: 440px
}

.belts .text10 {
	text-align: right;
	font-size: 16px;
	width: 200px;
	position: absolute;
	top: 1055px;
	margin-left: 440px
}

.belts .text11 {
	text-align: right;
	font-size: 16px;
	width: 200px;
	position: absolute;
	top: 1150px;
	margin-left: 440px
}

.belts .text12 {
	text-align: right;
	font-size: 16px;
	width: 200px;
	position: absolute;
	top: 1245px;
	margin-left: 440px
}

.eq_changes {
	position: relative
}

.eq_changes1 {
	background: url(img/eq_changes.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 264px
}

.eq_changes1 .inner {
	margin-top: 17px
}

.eq_changes1 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 102px;
	margin-left: 25px
}

.eq_changes1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 222px;
	margin-left: -267px
}

.eq-wrap {
	background: url(img/eq_changes_base.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 482px;
	margin-top: 0
}

.eq_changes2 {
	width: 750px;
	height: 482px;
	margin-top: 0
}

.eq_changes2.p1 {
	background: url(img/eq_changes_p1.jpg);
	background-repeat: no-repeat
}

.eq_changes2.p2 {
	background: url(img/eq_changes_p2.jpg);
	background-repeat: no-repeat
}

.eq_changes2.p3 {
	background: url(img/eq_changes_p3.jpg);
	background-repeat: no-repeat
}

.eq_changes2.p4 {
	background: url(img/eq_changes_p4.jpg);
	background-repeat: no-repeat
}

.eq_changes .row-base {
	display: block
}

.eq_changes .row1 {
	margin-top: 94px;
	display: flex
}

.eq_changes .row2 {
	margin-top: 63px;
	display: flex
}

.eq_changes .bonus-text {
	width: 247px;
	text-align: center;
	font-size: 14px;
	color: #dac0a3;
	height: 65px
}

.upgrade_system {
	background: url(img/upgrade_system.jpg) no-repeat;
	width: 750px;
	height: 686px
}

.upgrade_system .inner {
	margin-top: 15px;
	display: block
}

.worldboss {
	background: url(img/worldboss.jpg) no-repeat;
	width: 750px;
	height: 1210px
}

.worldboss .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.worldboss .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 95px;
	margin-left: -300px
}

.spirit_stones {
	background: url(img/spirit_stones.jpg) no-repeat;
	width: 750px;
	height: 823px
}

.spirit_stones .inner {
	margin-top: 15px;
	display: block;
	width: 749px;
	position: relative
}

.spirit_stones .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 95px;
	margin-left: 29px
}

.bonus_system {
	background: url(img/bonus_system.jpg) no-repeat;
	width: 750px;
	height: 860px
}

.bonus_system .inner {
	margin-top: 15px;
	display: block;
	width: 749px;
	position: relative
}

.bonus_system .text {
	text-align: center;
	font-size: 16px;
	line-height: 17px;
	height: 35px;
	margin-top: 70px;
	width: 100%
}

.bonus_system .text2 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 37px;
	margin-left: 107px;
	height: 53px;
	width: 623px;
	display: flex;
	justify-content: center;
	align-items: center
}

.bonus_system .text3 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 27px;
	margin-left: 107px;
	height: 53px;
	width: 623px;
	display: flex;
	justify-content: center;
	align-items: center
}

.bonus_system .text4 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	height: 35px;
	margin-top: 24px;
	margin-left: 49px;
	height: 53px;
	width: 277px;
	display: flex;
	justify-content: center;
	align-items: center
}

.bonus_system .text5 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: -53px;
	margin-left: 407px;
	height: 53px;
	width: 277px;
	display: grid;
	justify-content: center;
	align-items: center
}

.bonus_system .text6 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 52px;
	margin-left: 33px;
	height: 53px;
	width: 607px;
	display: grid;
	justify-content: center;
	align-items: center
}

.bonus_system .text7 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 96px;
	margin-left: 30px;
	width: 706px;
	display: block
}

.bonus_system .text8 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 25px;
	margin-left: 58px;
	height: 30px;
	width: 300px;
	display: block
}

.bonus_system .text9 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 20px;
	margin-left: 25px;
	width: 706px;
	display: block
}

.bonus_system .text10 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 30px;
	margin-left: 58px;
	height: 30px;
	width: 300px;
	display: block
}

.bonus_system .text11 {
	text-align: left;
	font-size: 16px;
	line-height: 17px;
	margin-top: 20px;
	margin-left: 25px;
	width: 706px;
	display: block
}

.passive_skills {
	background: url(img/passive_skills.jpg) no-repeat;
	width: 750px;
	height: 2362px
}

.passive_skills .inner {
	margin-top: 15px;
	display: block;
	width: 749px;
	position: relative
}

.passive_skills .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 90px;
	margin-left: 20px
}

.passive_skills .text2 {
	text-align: center;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 152px;
	margin-left: -160px
}

.passive_skills .text3 {
	text-align: center;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 152px;
	margin-left: 200px
}

.passive_skills .text4 {
	text-align: center;
	font-size: 14px;
	width: 300px;
	position: absolute;
	top: 370px;
	margin-left: 40px
}

.passive_skills .text5 {
	text-align: center;
	font-size: 14px;
	width: 254px;
	position: absolute;
	top: 370px;
	margin-left: 415px
}

.passive_skills .text6 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 505px;
	margin-left: 210px
}

.passive_skills .text7 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 535px;
	margin-left: 210px
}

.passive_skills .text8 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 695px;
	margin-left: 210px
}

.passive_skills .text9 {
	text-align: left;
	font-size: 14px;
	width: 523px;
	position: absolute;
	top: 730px;
	margin-left: 210px
}

.passive_skills .text10 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 885px;
	margin-left: 210px
}

.passive_skills .text11 {
	text-align: left;
	font-size: 14px;
	width: 523px;
	position: absolute;
	top: 920px;
	margin-left: 210px
}

.passive_skills .text12 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 1080px;
	margin-left: 210px
}

.passive_skills .text13 {
	text-align: left;
	font-size: 14px;
	width: 523px;
	position: absolute;
	top: 1115px;
	margin-left: 210px
}

.passive_skills .text14 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 1265px;
	margin-left: 210px
}

.passive_skills .text15 {
	text-align: left;
	font-size: 14px;
	width: 523px;
	position: absolute;
	top: 1305px;
	margin-left: 210px
}

.passive_skills .text16 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 1460px;
	margin-left: 210px
}

.passive_skills .text17 {
	text-align: left;
	font-size: 14px;
	width: 523px;
	position: absolute;
	top: 1500px;
	margin-left: 210px
}

.passive_skills .text18 {
	text-align: left;
	font-size: 14px;
	width: 600px;
	position: absolute;
	top: 1650px;
	margin-left: 210px
}

.passive_skills .text19 {
	text-align: left;
	font-size: 14px;
	width: 523px;
	position: absolute;
	top: 1695px;
	margin-left: 210px
}

.passive_skills .text20 {
	text-align: left;
	font-size: 16px;
	width: 523px;
	position: absolute;
	top: 1826px;
	margin-left: 123px
}

.passive_skills .text21 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1890px;
	margin-left: 24px
}

.passive_skills .text22 {
	text-align: left;
	font-size: 16px;
	width: 434px;
	position: absolute;
	top: 1973px;
	margin-left: 120px
}

.mining {
	position: relative
}

.mining1 {
	background: url(img/mining1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 737px
}

.mining1 .inner {
	margin-top: 17px
}

.mining1 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 100px;
	margin-left: -312px
}

.mining1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 223px;
	margin-left: -312px
}

.mining1 .text3 {
	text-align: left;
	font-size: 14px;
	width: 636px;
	position: absolute;
	top: 304px;
	margin-left: -230px
}

.mining1 .text4 {
	text-align: left;
	font-size: 14px;
	width: 631px;
	position: absolute;
	top: 346px;
	margin-left: -230px
}

.mining1 .text5 {
	text-align: left;
	font-size: 14px;
	width: 637px;
	position: absolute;
	top: 385px;
	margin-left: -230px
}

.mining2 {
	background: url(img/mining3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 64px;
	margin-top: 0
}

.fishing {
	position: relative
}

.fishing1 {
	background: url(img/fishing1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 606px
}

.fishing1 .inner {
	margin-top: 17px
}

.fishing1 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 95px;
	margin-left: -312px
}

.fishing1 .text2 {
	text-align: left;
	font-size: 16px;
	width: 588px;
	position: absolute;
	top: 276px;
	margin-left: -237px
}

.fishing2 {
	background: url(img/fishing3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 78px;
	margin-top: 0
}

.inventories {
	background: url(img/inventories.jpg) no-repeat;
	width: 750px;
	height: 923px
}

.inventories .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.inventories .text {
	text-align: left;
	font-size: 16px;
	width: 471px;
	position: absolute;
	top: 80px;
	margin-left: -214px
}

.inventories .text2 {
	text-align: left;
	font-size: 16px;
	width: 471px;
	position: absolute;
	top: 161px;
	margin-left: -165px
}

.inventories .text3 {
	text-align: left;
	font-size: 16px;
	width: 471px;
	position: absolute;
	top: 199px;
	margin-left: -165px
}

.inventories .text4 {
	text-align: left;
	font-size: 16px;
	width: 471px;
	position: absolute;
	top: 237px;
	margin-left: -165px
}

.inventories .text5 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 815px;
	margin-left: -213px
}

.guild_system {
	background: url(img/guild_system.jpg) no-repeat;
	width: 750px;
	height: 999px
}

.guild_system .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.guild_system .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 90px;
	margin-left: -288px
}

.event_calendar {
	position: relative
}

.event_calendar1 {
	background: url(img/event_calendar1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 824px
}

.event_calendar1 .inner {
	margin-top: 17px;
	width: 749px
}

.event_calendar1 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 110px;
	margin-left: 26px
}

.event_calendar_wrap {
	background: url(img/event_calendar_base.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 210px;
	position: relative
}

.event_calendar2 {
	width: 750px;
	height: 210px
}

.event_calendar2.p1 {
	background: url(img/event_calendar_p1.jpg)
}

.event_calendar2.p2 {
	background: url(img/event_calendar_p2.jpg)
}

.event_calendar2.p3 {
	background: url(img/event_calendar_p3.jpg)
}

.event_calendar2.p4 {
	background: url(img/event_calendar_p4.jpg)
}

.event_calendar2.p5 {
	background: url(img/event_calendar_p5.jpg)
}

.event_calendar2.p6 {
	background: url(img/event_calendar_p6.jpg)
}

.event_calendar2.p7 {
	background: url(img/event_calendar_p7.jpg)
}

.event_calendar2.p8 {
	background: url(img/event_calendar_p8.jpg)
}

.event_calendar2.p9 {
	background: url(img/event_calendar_p9.jpg)
}

.event_calendar2.p10 {
	background: url(img/event_calendar_p10.jpg)
}

.event_calendar2 .event_list {
	height: 194px;
	display: flex;
	margin-left: 68px;
	margin-top: 7px
}

.event_calendar2 .event {
	color: #dac0a3;
	font-size: 12px;
	text-align: center;
	margin-bottom: 0;
	width: 144px;
	height: 194px;
	margin-right: 12px;
	position: relative
}

.event_calendar2 .event span {
	font-size: 12px;
	position: absolute;
	bottom: 10px;
	right: 0;
	left: 0
}

.event_calendar_wrap .selector {
	position: absolute;
	margin-top: 77px;
	z-index: 40
}

.event_calendar_wrap .selector .arrow.left {
	margin-left: 10px
}

.event_calendar_wrap .selector .arrow.right {
	margin-right: 11px
}

.event_calendar3 {
	background: url(img/event_calendar2.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 79px;
	margin-top: 0
}

.game_options {
	position: relative
}

.game_options1 {
	background: url(img/game_options1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 702px
}

.game_options1 .inner {
	margin-top: 17px
}

.game_options1 .text {
	text-align: center;
	font-size: 16px;
	width: 300px;
	position: absolute;
	top: 228px;
	margin-left: -281px
}

.game_options1 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 492px;
	margin-left: -289px
}

.game_options1 .text3 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 597px;
	margin-left: -289px
}

.game_options2 {
	background: url(img/game_options3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 323px
}

.game_options2 .inner {
	margin-top: 17px
}

.game_options2 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1146px;
	margin-left: -360px
}

.game_options2 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1254px;
	margin-left: -347px
}

.game_options3 {
	background: url(img/game_options5.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 318px
}

.game_options3 .inner {
	margin-top: 17px
}

.game_options3 .text {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1793px;
	margin-left: -360px
}

.game_options3 .text2 {
	text-align: center;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 1900px;
	margin-left: -347px
}

.game_options4 {
	background: url(img/game_options7.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 84px
}

.vote4buff {
	background: url(img/vote4buff.jpg) no-repeat;
	width: 750px;
	height: 536px
}

.vote4buff .inner {
	margin-top: 15px;
	display: block
}

.vote4buff .text {
	width: 600px;
	text-align: center;
	font-size: 16px;
	margin-top: 62px
}

.premium {
	position: relative
}

.premium1 {
	background: url(img/premium1.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 169px
}

.premium1 .inner {
	margin-top: 17px
}

.premium1 .text {
	width: 600px;
	text-align: center;
	font-size: 16px
}

.premium1 .text2 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 190px;
	margin-left: 56px
}

.premium1 .text3 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 228px;
	margin-left: 56px
}

.premium1 .text4 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 266px;
	margin-left: 56px
}

.premium1 .text5 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 304px;
	margin-left: 56px
}

.premium1 .text6 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 342px;
	margin-left: 56px
}

.premium1 .text7 {
	text-align: left;
	font-size: 16px;
	width: 600px;
	position: absolute;
	top: 380px;
	margin-left: 56px
}

.premium1 .text8 {
	text-align: center;
	font-size: 16px;
	width: 400px;
	position: absolute;
	top: 645px;
	margin-left: -3px
}

.premium2 {
	background: url(img/premium3.jpg);
	background-repeat: no-repeat;
	width: 750px;
	height: 686px
}

@media (max-width:850px) {

	.sidebar-navigation,
	.sidebar-r-navigation {
		display: none
	}
}

.hidden {
	display: none !important
}

.footer {
	text-align: center;
	font-size: 12px;
	left: 20px;
	position: absolute;
	bottom: 10px;
	color: #dac0a3
}

.title,
.text,
.text2,
.text3,
.text4,
.text5,
.text6,
.text7,
.text8,
.text9,
.text10,
.text11,
.text12,
.text13,
.text14,
.text15,
.text16,
.text17,
.text18,
.text19,
.text20,
.text21,
.text22,
.text23,
.text24,
.text25,
.text26,
.text27,
.text28,
.text29,
.text30,
.text31,
.text32,
.text33,
.text34,
.text35,
.text36,
.text37,
.text38,
.text39,
.text40,
.text41,
.text42,
.text43,
.text44,
.text45,
.text46,
.text47,
.text48,
.text49,
.text50,
.text51,
.text52,
.text53,
.text54,
.text55,
.text56,
.text57,
.text58,
.text59 {
	transition: all .3s
}

.title:hover {
	transform: scale(1.1)
}

.title:hover,
.text:hover,
.text2:hover,
.text3:hover,
.text4:hover,
.text5:hover,
.text6:hover,
.text7:hover,
.text8:hover,
.text9:hover,
.text10:hover,
.text11:hover,
.text12:hover,
.text13:hover,
.text14:hover,
.text15:hover,
.text16:hover,
.text17:hover,
.text18:hover,
.text19:hover,
.text20:hover,
.text21:hover,
.text22:hover,
.text23:hover,
.text24:hover,
.text25:hover,
.text26:hover,
.text27:hover,
.text28:hover,
.text29:hover,
.text30:hover,
.text31:hover,
.text32:hover,
.text33:hover,
.text34:hover,
.text35:hover,
.text36:hover,
.text37:hover,
.text38:hover,
.text39:hover,
.text40:hover,
.text41:hover,
.text42:hover,
.text43:hover,
.text44:hover,
.text45:hover,
.text46:hover,
.text47:hover,
.text48:hover,
.text49:hover,
.text50:hover,
.text51:hover,
.text52:hover,
.text53:hover,
.text54:hover,
.text55:hover,
.text56:hover,
.text57:hover,
.text58:hover,
.text59:hover {
	color: #f3e0be
}
.detayli-bilgi-link {
  position: absolute;
  bottom: 4px;
  right: 20px;
  text-decoration: none;
  font-size: 15px;
  z-index: 10;
}

.bg-frame {
  display: inline-block;
  background: url('img/cerceve.gif') no-repeat center center;
  background-size: contain;
  padding: 1px 17px;
  color: #e1d6d6;
}

.modal {
	display: block;
	position: fixed;
	z-index: 1050;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
	padding-top: 160px;
	transition: all .5s ease
}

.modal-content {
	background-color: #57412f;
	border: 1px solid #745740;
	margin: auto;
	padding: 0;
	border-radius: 5px;
	width: 40%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transition: opacity .2s ease, transform .2s ease;
	opacity: 1;
	transform: scale(1)
}

.close {
	color: #dac0a3;
	float: right;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer
}

.close:hover,
.close:focus {
	color: #f6dabb;
	text-decoration: none;
	cursor: pointer
}

.modal-header {
	padding: 10px 16px;
	border-radius: 5px;
	background-color: #4a3626;
	color: #dac0a3;
	border-bottom: 1px solid #745740;
	display: block !important;
	margin: initial
}

.modal-body {
	padding: 15px;
	font-size: 14px;
	color: #dac0a3
}

.modal-body a {
	color: #dac0a3;
	text-decoration: none
}

.modal-body a:hover {
	color: #f6dabb;
	text-decoration: none
}

.modal-body img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%
}

/* Bölüm başlıklarını (title) ayrı ayrı özelleştirmek için */
.title-1 { margin-top: 300px; }
.title-2 { margin-top: 17px; }
.title-3 { margin-top: 14px; }
.title-4 { margin-top: 18px; }
.title-5 { margin-top: 25px; }
.title-6 { margin-top: 25px; }
.title-7 { margin-top: 25px; }
.title-8 { margin-top: 25px; }
.title-9 { margin-top: -13px; }
.title-10 { margin-top: 25px; }
.title-11 { margin-top: 25px; }
.title-12 { margin-top: -53px; }
.title-13 { margin-top: 25px; }
.title-14 { margin-top: 25px; }
.title-15 { margin-top: -55px; }
.title-16 { margin-top: 25px; }
.title-17 { margin-top: 25px; }
.title-18 { margin-top: 9px; }
.title-19 { margin-top: 19px; }
.title-20 { margin-top: 19px; }
.title-21 { margin-top: 19px; }
.title-22 { margin-top: 19px; }
.title-23 { margin-top: 19px; }
.title-24 { margin-top: 19px; }
.title-25 { margin-top: 3px; }
.title-26 { margin-top: 19px; }
.title-27 { margin-top: 1px; }
.title-28 { margin-top: 15px; }
.title-29 { margin-top: 17px; }
.title-30 { margin-top: 19px; }
.title-31 { margin-top: 19px; }
.title-32 { margin-top: 19px; }
.title-33 { margin-top: 19px; }
.title-34 { margin-top: 19px; }
.title-35 { margin-top: 19px; }
.title-36 { margin-top: -159px; }

.progression-wrapper {
  margin-top: 40px;
  overflow-x: auto;
}

.modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #2d2121;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  font-family: 'Segoe UI', sans-serif;
}

.modern-table thead {
  background-color: #2d2121;
}

.modern-table th {
  padding: 9px 12px;
  text-align: left;
  color: #b08e57;
  font-size: 16px;
  border-bottom: 1px solid #444;
}

.modern-table td {
  padding: 9px 12px;
  color: #ddd;
  font-size: 15px;
  border-bottom: 1px solid #333;
  transition: background-color 0.3s ease;
}

.modern-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.05);
}
.mapsxgraphic {
	background: url(img/graphichd.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsxgraphic .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsxgraphic .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsxgraphic .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}
.mapsxlauncher {
	background: url(img/launcher.jpg) no-repeat;
	width: 750px;
	height: 794px
}

.mapsxlauncher .inner {
	margin-top: 15px;
	display: block;
	position: relative
}

.mapsxlauncher .text {
	width: 700px;
	text-align: center;
	font-size: 16px;
	margin-top: 60px
}

.mapsxlauncher .text2 {
	text-align: center;
	font-size: 16px;
	width: 700px;
	position: absolute;
	top: 730px;
	margin-left: 18px;
	margin-top: -90px
}
#bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('img/bg11.png') no-repeat center center;
  background-size: cover;
  z-index: -1;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Arapça bayrak ikonu */
.flags.flag-ar {
  background-image: url('img/flag/ar.png');
  background-size: cover;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

/* Türkçe bayrak ikonu */
.flags.flag-tr {
  background-image: url('img/flag/tr.png');
  background-size: cover;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.side-nav {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 200px;
  /* Yükseklik: 10 dot + padding */
  height: 392px; /* 10*32px + 9*8px gap + 2*12px padding = 392px */
  border-radius: 0 18px 18px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1000;
  padding: 12px 0 12px 8px;
}

.side-nav-dots {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: flex-start;
  /* Scrollbar gizleme */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.side-nav-dots::-webkit-scrollbar {
  width: 0 !important; /* Chrome/Safari */
  display: none;
}

.side-nav-dot {
  width: 100%;
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, background 0.2s;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  background: none;
}
.side-nav-dot:hover,
.side-nav-dot.active {
  opacity: 1;
  background: rgba(255,255,0,0.07);
  border-radius: 8px;
}
.side-nav-dot img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  filter: drop-shadow(0 0 2px #000);
  flex-shrink: 0;
}
.side-nav-label {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 140px;
  transition: color 0.2s;
  pointer-events: none;
  flex: 1 1 auto;
  display: block;
}
.side-nav-dot:hover .side-nav-label,
.side-nav-dot.active .side-nav-label {
  color: #ffe066;
}
.side-nav-arrow {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  margin: 4px 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.side-nav-arrow:hover { opacity: 1; }
.side-nav-arrow img {
  width: 60px;
  height: 20px;
  filter: drop-shadow(0 0 2px #000);
  margin-left: 12px;
}
.modern-footer {
  width: 100vw;
  background: rgba(20, 20, 30, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.13);
  padding: 32px 0 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 64px;
}

.footer-icons {
  display: flex;
  gap: 28px;
  margin-bottom: 12px;
}

.footer-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  overflow: hidden;
  position: relative;
}
.footer-icons a:hover, .footer-icons a:focus {
  background: rgba(255,255,255,0.18);
  transform: translateY(-6px) scale(1.12) rotate(-6deg);
  box-shadow: 0 6px 24px rgba(255,255,255,0.13), 0 2px 8px rgba(0,0,0,0.18);
  z-index: 2;
}
.footer-icons img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px #000);
  transition: filter 0.18s;
}
.footer-icons a:hover img, .footer-icons a:focus img {
  filter: drop-shadow(0 0 6px #ffe066) brightness(1.15);
}

.footer-copy {
  color: #bbb;
  font-size: 0.98rem;
  margin-top: 6px;
  letter-spacing: 0.5px;
  text-align: center;
  user-select: none;
}

@media (max-width: 750px) {
  .modern-footer { padding: 18px 0 10px 0; }
  .footer-icons { gap: 16px; }
  .footer-icons a { width: 36px; height: 36px; }
  .footer-icons img { width: 20px; height: 20px; }
  .footer-copy { font-size: 0.88rem; }
}