/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:#fff0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
 /*! base.css v1.0 */
/* ======================================================================================================
 *			-- FILE STRUCTURE --
 *
 *	[ 1] Core Definitions		__core
 *	[ 2] Main IDs & Classes		__main-ids-&-classes
 *	[ 3] 
 *	[ 4] 
 *	[ 5] 
 *	[ 6] 
 *	[ 7] 
 *	[ 8] Page Errors			__page-errors
 *	[ 9] 
 *	[10] Media Queries			__media-queries
====================================================================================================== */

/* NOTE: If adding any new font-face, place it here. */

/* ======================================================================================================
 *									GLOBAL Z-INDEX CHART
 * ======================================================================================================
 * 1. 
 * 2. 
====================================================================================================== */
/* Banner styling */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #1e1e1e;
  color: #fff;
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
  z-index: 9999;
}

#cookie-banner p {
  margin: 0 0 15px;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
  /* Add this to confirm buttons align within the wrapper */
  justify-content: center; 
  /* Make sure the container takes up the necessary width */
  width: 100%; 
}

.cookie-buttons button {
  padding: 10px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.accept {
  background: #4CAF50;
  color: #fff;
}
.accept:hover { background: #45a049; }

.reject {
  background: #f44336;
  color: #fff;
}
.reject:hover { background: #da190b; }

.preferences {
  background: #2196F3;
  color: #fff;
}
.preferences:hover { background: #0b7dda; }

/* Preferences modal */
#preferences-modal-wrapper {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1;
  display: none;
}
#preferences-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #333;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: none;
  z-index: 10000;
  width: 300px;
}

#preferences-modal h3 {
  margin-top: 0;
}

#preferences-modal label {
  display: block;
  margin: 10px 0;
}

#preferences-modal button {
  margin-top: 15px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background: #4CAF50;
  color: #fff;
  cursor: pointer;
}

/* ======================================================================================================
 *	[ 1] Core Definitions		__core
====================================================================================================== */
html { width: 100%; height: 100%; padding: 0; margin: 0; border: none; float: left; }
body { width: 100%; height: 100%; padding: 0; margin: 0; background: linear-gradient(rgba(52,73,94,0.3)), url(image/icon/bg.png) repeat 0 0; border: none; float: left; overflow-x: hidden; overflow-y: auto; }
*, *:before, *:after {
  padding: 0;
  margin: 0;
    -o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
    -moz-osx-font-smoothing: grayscale; /* Same as -webkit-font-smoothing: antialiased; property/value but for Firefox */
    -webkit-font-smoothing: antialiased; /* Supposed to make fonts smoother - but I can't really tell the difference... */
  font-family: Arial, Helvetica, sans-serif;
  outline: none;
}
h1,h2,h3,h4,h5,h6 { font-weight: lighter; }
h1,h2,h3,h4,h5,h6,p { cursor: default; }
a { text-decoration: none; border: none; outline: none; }
.clr, .clear:after { content: ""; display: table; clear: both; }

noscript {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #2c3e50; /* MIDNIGHT BLUE */
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  overflow: hidden;
}
noscript .img {
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0 auto;
  background: url(image/icon/logo-60x59.png) no-repeat center center;
    background-size: contain;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
}
noscript .nojs {
  width: 80%;
  padding: 20px 0;
  margin: 0 auto 100px auto; /* Margin-Bottom = IMPORTANT */
  background: #EDEDED;
    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
  border-top: 3px solid #d35400; /* PUMPKIN */
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
  text-align: center;
}
noscript .nojs h3 {
  width: 96%;
  padding: 0 10px 5px 10px;
  margin: 0 2%;
  border-bottom: 1px dotted #000;
  float: left;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
}
noscript .nojs p {
  width: 100%;
  padding: 0 10px;
  margin: 10px 0 0 0;
  float: left;
  color: #555;
}
noscript .nojs p:first-of-type {
  margin: 20px 0 0 0;
}
noscript .nojs p a {
  color: #E67E22;
}
noscript .nojs p a:hover {
  text-decoration: underline;
}


/* ======================================================================================================
 *	[ 2] Main IDs & Classes		__main-ids-&-classes
====================================================================================================== */
#canvas {
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
}

header {
  width: 100%;
  height: 60px;
  background: #1B2631;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,0.15), inset 0 1px #243342;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

.left_side_header {
  width: 300px;
  height: 100%;
  float: left;
  position: relative;
  z-index: 10;
}
.left_side_header a {
  width: 100%;
  height: 100%;
  float: left;
}
.left_side_header a:hover > .sitename h3 {
  color: #FFF;
  text-shadow: -1px -1px rgba(0,0,0,0.3), 1px 1px #000, 0 -2px 3px #FFF, 0 -3px 5px #F1C40F, 0 -4px 10px #D35400, 0 -5px 12px #E74C3C, 0 -6px 15px #C0392B;
}

.logo {
  width: 60px;
  height: 60px;
  background: url(image/logo-50x49.png) no-repeat center center;
  float: left;
  position: relative;
  z-index: 15;
}

.sitename {
  width: 240px;
  height: 60px;
  float: left;
  position: relative;
  z-index: 10;
}
.sitename h3 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -240px;
  z-index: 5;
  color: #ECF0F1;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 60px;
  text-shadow: 2px 2px #000;
    -o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
  transition: all .3s ease;
  animation: sitenameSlider 1s ease .5s forwards;
}
@keyframes sitenameSlider {
	0% { left: -240px; }
	100% { left: 0; }
}

.center_header {
  width: calc(100% - 360px);
  height: 100%;
  float: left;
  position: relative;
}

.right_side_header {
  width: 60px;
  height: 100%;
  float: left;
}

#page-content-wrapper {
  width: calc(100% - 420px);
  height: calc(100% - 160px);
  position: absolute;
  top: 80px;
  left: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #233140 transparent;
  scrollbar-width: thin;
}
#page-content-wrapper:hover {
  scrollbar-color: #1a2430 transparent;
}
#page-content-wrapper::-webkit-scrollbar {
  width: 10px;
}
#page-content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
#page-content-wrapper::-webkit-scrollbar-thumb {
  background: #233140; /* Darker shade */
  border-radius: 5px; /* Optional: adds rounded corners to the thumb */
}
#page-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #1a2430; /* Even darker shade on hover */
}

#profile-wrapper {
  width: 360px;
  height: calc(100% - 160px);
  background: radial-gradient(circle at bottom left, #2c3e50 0.5%, #1B2631);
    box-shadow: 0 2px 1px -1px rgba(0,0,0,0.5), inset 0 1px #2d4052;
  border: 1px solid #000;
    border-radius: 5px;
  position: absolute;
  top: 80px;
  right: 20px;
  overflow: hidden;
}

footer {
  width: 100%;
  padding: 5px 0;
  background: #06090B;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,0.20), inset 0 1px #151e27;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  position: absolute;
  left: 0;
  bottom: 0;
}
footer p {
  width: 100%;
  padding: 5px 0 0 0;
  float: left;
  color: #CCC;
  text-align: center;
}
footer p span {
  color: #555;
}
footer p a {
  color: #CCC;
  font-size: .8em;
  text-align: center;
}
footer p a:hover,
footer p a.active {
  color: #e67e22;
}


/* ======================================================================================================
 *	[ 3] 
====================================================================================================== */
.content {
  width: calc(100% - 20px);
  margin: 0 0 20px 0;
  float: left;
}
.content h2 {
  width: 100%;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0 7px;
  border-left: 3px solid #d35400;
  float: left;
  color: #CCC;
  line-height: 40px;
}
.content h4 {
  width: 100%;
  padding: 0 16px;
  float: left;
  color: #777;
  font-size: .8em;
  font-style: italic;
}

.slider_wrapper {
  width: 100%;
  height: 340px;
  margin: 0 0 30px 0;
  border: 1px solid #000;
    border-radius: 5px;
  float: left;
}
.slider {
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(0,0,0,0.5),rgba(204,204,204,0.15)), url(image/icon/texture.png) repeat 0 0, url(image/banner.png) no-repeat center center;
    background-size: contain, auto, cover;
	border-radius: 5px;
  float: left;
}
.slider h2 {
  width: 100%;
  padding: 10px 20px;
  border: none;
  float: left;
  color: #FFF;
  font-weight: bold;
}
.slider p {
  width: 100%;
  padding: 0 20px 10px 20px;
  float: left;
  color: #CCC;
}
.slider p span {
  color: #e74c3c;
}
.slider p span2 {
  color: #e67e22;
}
.slider p span3 {
  color: #FFF;
}
.slider p:first-of-type {
  padding: 5px 20px 10px 20px;
}
.slider a {
  width: 200px;
  height: 40px;
  margin: 10px 20px;
  background: #c0392b;
    box-shadow: inset 0 1px #e74c3c;
  border: 1px solid #c0392b;
    border-radius: 3px;
  float: left;
  color: #ecf0f1;
  line-height: 40px;
  text-align: center;
}
.slider a:hover {
  background: #e74c3c;
    box-shadow: inset 0 1px #ee8377;
  border: 1px solid #e74c3c;
  color: #FFF;
}

.videos_wrapper {
  width: 100%;
  height: 320px;
  margin: 0 0 80px 0;
  float: left;
  position: relative;
}

.swiper-button-next,
.swiper-button-next2,
.swiper-button-next3,
.swiper-button-prev,
.swiper-button-prev2,
.swiper-button-prev3 {
  color: rgba(0,0,0,0.5);
}
.swiper-button-next:hover,
.swiper-button-next2:hover,
.swiper-button-next3:hover,
.swiper-button-prev:hover,
.swiper-button-prev2:hover,
.swiper-button-prev3:hover {
  color: #000;
}
.swiper-button-next:active,
.swiper-button-next2:active,
.swiper-button-next3:active,
.swiper-button-prev:active,
.swiper-button-prev2:active,
.swiper-button-prev3:active {
  color: #000; /* Your desired active color */
}
.swiper-pagination-bullet:hover {
  background-color: #000;
}
.swiper-pagination-bullet-active {
  background-color: #000 !important;
}
.swiper {
  width: calc(100% - 20px);
  height: 260px;
  margin: 10px;
  position: relative;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 18px;
  text-align: center;
}

.iframe_wrapper {
  width: 80%;
  height: 80%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.iframe {
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
}

.youtube-lazy {
  width: 100%;
  height: 100%;
    border-radius: 10px;
  float: left;
}
.youtube-lazy img {
  width: 100%;
  height: 100%;
    border-radius: 10px;
  float: left;
  position: relative;
}
.video-player-container {
  /* Set a 16:9 aspect ratio placeholder */
  aspect-ratio: 16 / 9;
  position: relative;
  width: 100%;
}
.play-button {
  width: 100%;
  min-width: 50px;
  height: 100%;
  min-height: 50px;
  margin: auto;
  background: url(image/icon/play-button.png) no-repeat center center, linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.35));
    background-size: 20%;
	border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.play-button p {
  width: 100%;
  padding: 5px 8px;
  float: left;
  color: #FFF;
  font-size: .8em;
  text-align: left;
}

.swiper-slide iframe {
  width: 100%;
  height: 100%;
    border-radius: 10px;
  float: left;
  display: block;
  object-fit: cover;
  z-index: 1;
}

.swiper-pagination,
.swiper-pagination2,
.swiper-pagination3 {
  position: absolute;
  bottom: 0;
}

.swiper-pagination-bullet {
  width: 16px;
  height: 16px;
}

.profile {
  width: 100%;
  height: 100%;
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #233140 transparent;
  scrollbar-width: thin;
}
.profile:hover {
  scrollbar-color: #1a2430 transparent;
}
.profile::-webkit-scrollbar {
  width: 10px;
}
.profile::-webkit-scrollbar-track {
  background: transparent;
}
.profile::-webkit-scrollbar-thumb {
  background: #233140; /* Darker shade */
  border-radius: 5px; /* Optional: adds rounded corners to the thumb */
}
.profile::-webkit-scrollbar-thumb:hover {
  background: #1a2430; /* Even darker shade on hover */
}
.profile_pic {
  width: 140px;
  height: 140px;
  margin: 20px auto;
  background: url(image/logo.png), radial-gradient(rgba(0,0,0,0.15) 85%,rgba(0,0,0,0.35));
    background-position: 0 1px;
    background-size: contain;
	box-shadow: inset 0 1px #2d4052;
  border: 8px solid rgba(0,0,0,0.8);
    border-radius: 50%;
}
.profile h2 {
  width: 100%;
  float: left;
  color: #bdc3c7;
  font-weight: bold;
  text-align: center;
}
.profile p {
  width: 100%;
  padding: 10px 0;
  float: left;
  color: #95a5a6;
  font-size: .9em;
  text-align: center;
}
.profile_stats_wrapper {
  width: 100%;
  padding: 0 0 20px 0;
  margin: 40px 0 10px 0;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.profile_stats_wrapper a {
  width: 200px;
  height: 40px;
  margin: 0 0 20px 0;
  background: #c0392b;
    box-shadow: inset 0 1px #e74c3c;
  border: 1px solid #c0392b;
    border-radius: 3px;
  float: left;
  color: #CCC;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  animation: shimmer 3s infinite;
  background: linear-gradient(45deg, #c0392b 5%, #d35400 25%, #c0392b 35%);
  background-size: 1000px 100%;
}
@keyframes shimmer {
   from {
    background-position: -1000px 0;
  }
  to {
    background-position: 1000px 0;
  }
}
.profile_stats_wrapper a:hover {
  background: #e74c3c;
    box-shadow: inset 0 1px #eb6e60;
  border: 1px solid #e74c3c;
  color: #FFF;
  animation: shimmer 3s infinite;
  background: linear-gradient(45deg, #e74c3c 5%, #e67e22 25%, #e74c3c 35%);
  background-size: 1000px 100%;
}
.profile_stats_wrapper p span {
  width: 100%;
  color: #6c797a;
  font-size: .75em;
  text-align: center;
}
.profile_stats {
  width: calc(100% / 3);
  height: 60px;
  margin: 0 0 20px 0;
  float: left;
}
.profile_stats h2,
.profile_stats p {
  width: 100%;
  padding: 0;
  margin: 0;
  float: left;
  color: #bdc3c7;
  text-align: center;
}
.profile_stats p {
  color: #95a5a6;
}

.policy_wrapper {
  width: 100%;
  padding: 20px;
  float: left;
}
.policy_wrapper h3 {
  width: 100%;
  margin: 20px 0 0 0;
  float: left;
  color: #AAA;
}
.policy_wrapper p {
  width: 100%;
  padding: 7px 22px 0 22px;
  float: left;
  color: #888;
}


/* ======================================================================================================
 *	[ 4] 
====================================================================================================== */



/* ======================================================================================================
 *	[ 5] 
====================================================================================================== */



/* ======================================================================================================
 *	[ 6] 
====================================================================================================== */



/* ======================================================================================================
 *	[ 7] 
====================================================================================================== */



/* ======================================================================================================
 *	[ 8] Page Errors			__page-errors
====================================================================================================== */



/* ======================================================================================================
 *	[ 9] 
====================================================================================================== */



/* ======================================================================================================
 *	[10] Media Queries			__media-queries
====================================================================================================== */
@media screen and (max-width: 1200px) {
	
	#page-content-wrapper {
	  width: calc(100% - 40px);
	  height: auto;
	  margin: 20px;
	  float: left;
	  position: static;
	}
	
	#profile-wrapper {
	  width: calc(100% - 40px);
	  height: auto;
	  margin: 80px 20px 40px 20px;
	  float: left;
	  position: static;
	}
	
	.content {
	  width: 100%;
	}
	
	footer {
	  float: left;
	  position: static;
	}
	footer p {
	  font-size: .8em;
	}
	
}