@import "fonts/kelson.css";			
			* {
				margin: 0;
				padding: 0;
			}
			
			
			body {
				font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
				background-image: url(pics/bg.jpg);
				background-size: cover;
				background-attachment: fixed;
				height: 100vh;
				
			}

			.x1 {
				font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
				background-color: white;
				background-size: cover;
				background-attachment: fixed;
				height: 100vh;
				
			}
/* 				BARRA DE NAVEGACIÓN                          */			
.nav_bar {
    width: 100%;
    height: 60px; /* Altura fija para la barra de navegación */
    background-color: black;
    padding: 0 20px; /* Espaciado a los lados para que no se pegue a los bordes */
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px; /* Tamaño de fuente fijo */
    overflow: hidden; /* Evitar que el contenido se desborde */
    position: relative;
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
}

.nav_bar .active {
    background-position: center 40px;
}

.nav_bar a {
    text-decoration: none;
    padding: 18px;
    color: #a29ea2;
    display: inline-block; /* Mantener los enlaces como bloques en línea */
}

.nav_bar .center_content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.nav_bar .left {
    float: left;
    width: 50px; /* Fijar el tamaño del logo */
}

.nav_bar .left a {
    padding: 0;
    margin: 0;
    background: url(pics/logo.png) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: background-color 0.3s;
}

.nav_bar .left a:hover {
    background-color: #990ac4b3;
    background: rgb(67, 64, 101);
}

.nav_bar .center {
    letter-spacing: 1px;
    display: inline-block;
}

.nav_bar .right {
    letter-spacing: 2px;
    display: inline-block;
    float: right;
}

				
				
			
			.main_content {
				margin: 0 auto;
				text-align: center;
				padding-top: 100px;
				padding-top: 15vh;
				
				font-family: 'kelson_sans_rubold', sans-serif;
			
				text-transform: uppercase;
				
				font-weight: 700;
				
				background: url(pics/shadow.png) no-repeat center;
			}
			
		
			.main_content .number  {
				padding: 50px 31px;
				margin-right: 1px;
				display: inline-block;
				background-position: center;
				background-repeat: no-repeat;
			}
			
			.main_content .nmb_0 { background-image: url(pics/0.png);}
			.main_content .nmb_1 { background-image: url(pics/1.png);}
			.main_content .nmb_2 { background-image: url(pics/2.png);}
			.main_content .nmb_3 { background-image: url(pics/3.png);}
			.main_content .nmb_4 { background-image: url(pics/4.png);}
			.main_content .nmb_5 { background-image: url(pics/5.png);}
			.main_content .nmb_6 { background-image: url(pics/6.png);}
			.main_content .nmb_7 { background-image: url(pics/7.png);}
			.main_content .nmb_8 { background-image: url(pics/8.png);}
			.main_content .nmb_9 { background-image: url(pics/9.png);}
		
			.main_content .players_online {
				background: url(pics/players-online.png) no-repeat center;
				background-size: contain; /* Mantiene el tamaño original de la imagen */
				background-position: center top; /* Alinea la imagen en la parte superior */
				padding: 200px 2px; /* Reduce el padding superior para subir la imagen */
				margin: -125px auto 10px; /* Aplica un margen negativo para subir el contenedor */
				max-width: 900px;
			}
			
		
		
			input[type=submit] {
				font-family: 'kelson_sans_ruregular', sans-serif;
				text-transform: uppercase;					
			}
			
			.connect_btn {
				letter-spacing: 2px;	
				border-radius: 20px;
				border: none;
				padding: 12px 33px 12px 33px;
				background: linear-gradient(to right, #c81fc5, #5a0ab6);
				font-size: 12px;
				font-weight: 900;	
				font-family: 'kelson_sans_ruregular', sans-serif;
				text-transform: uppercase;	
				
				color: black;
				text-decoration: none;
			}
			
			.connect_btn:hover {
				background: #5d0ab6;
			}
			
			input[type=submit]:focus {
				outline: 0;
				border: 0;
			}
			

			
			input[type=submit]:hover {
				cursor: pointer;
			}
			
			
			.main_foot {
				position: absolute;
				bottom: 0;
				width: 100%;
				
				text-transform: uppercase;
				font-weight: 700;
				
				margin-bottom: 15px;
				margin-left: -2px;
			}
			
			.main_foot a {
				text-decoration: none;
			}
			
				.main_foot .main_foot_conter {
					width: 90%;
					max-width: 1100px;
					margin: 0 auto;
					text-align: center;				
				}
					.main_foot .main_foot_conter .left {
						display: inline-block;
						margin-right: -120px;
						margin-top: 15px;
						font-size: 14px;
						margin-right: 100px;
						cursor: default;
						color:rgb(252, 252, 252)
					}
			
					.main_foot .main_foot_conter .center {
						letter-spacing: 1px;
						display: inline-block;
						
						background: rgba(0, 0, 0, 0.8);
						
						padding: 14px 25px 14px 25px;
						border-radius: 30px;
						
						font-family: 'Open Sans', sans-serif;
						font-weight: 700;
						font-size: 10px;
						
						margin-left: 35px;
					}
					
					.main_foot .main_foot_conter .center a.about {
						color: #8f7198;
						transition: 0.2s;
					}
					
					.main_foot .main_foot_conter .center a.about:hover {
						color: white;
					}
					.main_foot .main_foot_conter .center a.share:hover {
						color: white;
					}
					
					.main_foot .main_foot_conter .center a.share {
						color: #987a71;
						float: right;
						margin-left: 50px;
						transition: 0.2s;
					}
						
					.main_foot .main_foot_conter .right {
						letter-spacing: 1px;
						display:inline-block;
						margin-left: 100px;
						font-size: 14px;
									
				/*		background-image: url(pics/active.png); */
						background-position: right;
						background-repeat: no-repeat;
						padding-right: 35px;
						padding-bottom: 5px;
						padding-top: 5px;
					}
					
					.main_foot .main_foot_conter .right a {
						color: rgb(237, 231, 240);
					}
					
			.popup {
				width: 1070px;
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				margin-bottom: 80px;
				
				font-size: 14px;
				line-height: 1.8;
				color: #83646f;
				
				display: none;
			}
			.popup .about_title {
				height: 86px;
				background-image: url(pics/about-title.png);
				background-position: center;
				background-repeat: no-repeat;
			}
			.popup .about_foot {
				height: 95px;
				background-image: url(pics/about-foot.png);
				background-position: center;
				background-repeat: no-repeat;
			}
			
			
			.popup .social_title {
				height: 86px;
				background-image: url(pics/social-title.png);
				background-position: center;
				background-repeat: no-repeat;
			}
			.popup .social_foot {
				height: 95px;
				background-image: url(pics/social-foot.png);
				background-position: center;
				background-repeat: no-repeat;
			}
			
			
			.popup .line_content {
				padding-left: 5px;
				padding-right: 5px;
				border-left: 49px solid rgba(255, 255, 255, 0.97);
				border-right: 50px solid rgba(255, 255, 255, 0.97);
				width: 961px;
			}
			.popup .line_content .space {
				padding: 0 5px 0 10px;
				background-color: rgba(255, 255, 255, 0.97);
			}
			.about .line_content .content {
				text-align: justify;
				overflow: auto;
				overflow-x: hidden;
				padding: 0 25px 20px 20px;
				max-height: 45vh;
			}
			.about .line_content .content p {
				padding-bottom: 10px;
			}
			
			.social .content {
				text-align: center;
				padding-top: 40px;
				padding-bottom: 40px;
			}
			.social table {
				margin: 0 auto;
			}
			
			.social span {
				display: block;
				padding-top: 20px;
				font-family: 'Open Sans', sans-serif;
				text-transform: uppercase;
				font-weight: 700;
				font-size: 10px;
			}
			.social_btn {
				margin: 0 20px;
				border: 2px solid #a568ee;
				padding: 14px 37px 14px 37px;
				border-radius: 30px;
				-webkit-filter: grayscale(100%);  
				filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
				transition: 0.2s;
			}
			.social_btn:hover {
				-webkit-filter: grayscale(0%);  
				filter: none;
			}
			.vk_btn {
				background: url(pics/vk.png) no-repeat center center;
			}
			.ok_btn {
				background: url(pics/ok.png) no-repeat center center;
			}
			.fb_btn {
				background: url(pics/facebook.png) no-repeat center center;
			}
			.gplus_btn {
				background: url(pics/gplus.png) no-repeat center center;
			}
			.tweet_btn {
				background: url(pics/tweet.png) no-repeat center center;
			}
			.mail_btn {
				background: url(pics/mail.png) no-repeat center center;
			}
			.lj_btn {
				background: url(pics/lj.png) no-repeat center center;
			}


			
			.popup ::-webkit-scrollbar {  
				width: 8px;  
			}  
			.popup ::-webkit-scrollbar-track {  
				background-color: rgba(255, 255, 255, 0.0);
			}  
			.popup ::-webkit-scrollbar-thumb {  
				background-color: #ccc;  
				border-radius: 15px;
			}  
			.popup ::-webkit-scrollbar-thumb:hover {  
				background-color: #aaa;  
			} 
			
			
			
		.white_bg {
			background: rgba(255, 255, 255, 0.95);
			min-height: 100vh;
			position: relative;
		}
		
		
		.container {
			margin: 0 auto;
			width: 90%;
			max-width: 900px;
			padding-top: 50px;
			
			font-size: 15px;
			
			color: #5d5155;
			
			padding-bottom: 130px;
		}
		
		.container .header , h1{
			margin: 0 auto;
			text-align: center;
			font-family: 'kelson_sans_rubold', sans-serif;
			text-transform: uppercase;
			font-weight: 700;
			font-size: 40px;
			padding-bottom: 30px;
			color: black;
		}
		
		.container p {
			padding-top: 10px;
		}
		
		.container a {
			color: #a568ee;
		}
		
		.container .torrent {
			background-image: url(pics/logos.webp);
			background-position: right;
			background-repeat: no-repeat;
			background-size: 50px; /* Adjust the size as needed */
			padding-right: 60px;
		}
		
		h2, h3 {
			color: #524842;
			font-size: 15px;
		}
		
		.container .spacedown {
			padding-bottom: 50px;
		}
		
		.startgame_p {
			margin-top: 20px;
			margin-left: 35px;
		}
		
		.container .howtostart {
			margin-left: 20px;
			margin-top: 35px;
		}
		.container .howtostart li {
			margin-top: 20px;
			padding-left: 15px;
		}
		
		
		.footer {
			width: 100%;
			background-color: black;
			height: 80px;
			bottom: 0px;
			position: absolute;
		}
		
		.footer .center {
			margin: 0 auto;
			width: 98%;
			max-width: 900px;
			color: white;
		}
		
		.footer .header {
			padding-top: 30px;
			float: left;
			font-family: 'Open Sans', sans-serif;
			text-transform: uppercase;
			font-weight: 700;
			font-size: 12px;
			cursor: default;
		}
		
		.footer .footer_content {
			float: right;
			padding-top: 25px;
		}
		
		
		.footer .footer_content a {
			color: #a29ea2;
			text-decoration: none;
			font-size: 12px;
		}
		
		
		
		.footer_content .gtasa {
			background-image: url(pics/gta_link.png);
			background-position: 10px center;
			background-repeat: no-repeat;
			padding-top: 28px;
			padding-bottom: 36px;
			padding-left: 70px;
			padding-right: 10px;
			margin-right: 40px;
		}
		
		.footer_content .gtaexe {
			background-image: url(pics/gtaexe_link.png);
			background-position: 10px center;
			background-repeat: no-repeat;
			padding-top: 28px;
			padding-bottom: 36px;
			padding-left: 70px;
			padding-right: 10px;
			margin-right: 40px;
		}
		
		.footer_content .gtasamp {
			background-image: url(pics/samp_link.png);
			background-position: 10px center;
			background-repeat: no-repeat;
			padding-top: 28px;
			padding-bottom: 36px;
			padding-left: 70px;
			padding-right: 10px;
		}
		
		.footer_content .aly {
			background-image: url("pics/aly.png");
			background-position: 10px center;
			background-repeat: no-repeat;
			background-size: 40px 40px; /* Ajusta el tamaño de la imagen de fondo */
			padding: 18px 10px 16px 70px; /* Simplifica el padding */
		}
		
		
		
		.footer_content .accept_wm {
			background-image: url(pics/metododepago.png);
			background-position: center center;
			background-repeat: no-repeat;
			padding-top: 28px;
			padding-bottom: 36px;
			padding-left: 60px;
			padding-right: 60px;
			margin-right: 40px;
		}
		
		.footer_content .accept_ya {
			background-image: url(pics/metododepago.png);
			background-position: center center;
			background-repeat: no-repeat;
			padding-top: 28px;
			padding-bottom: 36px;
			padding-left: 60px;
			padding-right: 60px;
			margin-right: 40px;
		}
		
		.footer_content .wm_atestat {
			background-image: url(pics/paypal.png);
			background-position: center center;
			background-repeat: no-repeat;
			padding-top: 28px;
			padding-bottom: 36px;
			padding-left: 60px;
			padding-right: 60px;
		}
		
		
		
		
		.container .monitoring {
			margin: 0 auto;
			width: 100%;
			border: none;
			font-family: 'Open Sans', sans-serif;
			padding-top: 50px;
			padding-bottom: 30px;
		}
		.monitoring .last_cell {
			text-align: right !important;
		}
		.container .monitoring th {
			text-transform: uppercase;
			text-align: left;
			border-bottom: 1px solid #9d9b9a;
			padding-bottom: 20px;
			color: #524842;
		}
		
		.container .monitoring a {
			text-decoration: none;
			border-bottom: 1px dashed;
			padding-bottom: 2px;
			color: #a568ee;
		}
		
		.container .monitoring td {
			border-bottom: 1px dashed #9d9b9a;
			padding-bottom: 20px;
			padding-top: 20px;
			color: #5d5155;
			font-weight: 700;
			font-size: 13px;
		}
		
		.container .monitoring .noborder td{
			border: none !important;
			font-weight: 100;
		}
		
		
		.FAQ {
			margin: 0 auto;
			width: 100%;
			text-align: center;
			font-style: italic;
			font-size: 11px;
			padding-top: 30px;
		}
		
		.faq_btn {
			margin: 0 auto;
			border-radius: 50px;
			padding-left: 14px;
			padding-right: 14px;
			padding-top: 12px;
			padding-bottom: 12px;
			border: 2px solid #a568ee;
			background-color: rgba(255, 255, 255, 0.0);	
			font-weight: 700;
			color: #a568ee;		
			text-align: center;
			margin-bottom: 10px;
			display: block;
			text-decoration: none;
			width: 50px;
			font-style: normal;
			line-height: 1.0;
			transition: 0.2s;
		}
		
		.faq_btn:hover {
			color: white;
			background-color: #a568ee
		}
		.faq_btn:focus {
			border: 2px solid #a568ee !important;
		}
		
		
		.donate_action {
			background-color: #f7efca;
			padding: 20px;
			padding-right: 0px;
			font-family: 'Open Sans', sans-serif;
			margin-bottom: 40px;
			text-transform: uppercase;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.3;
			text-align: center;
		}
		
		.donate_codes {
			background-color: #f7efca;
			padding: 20px;
			padding-right: 0px;
			font-family: 'Open Sans', sans-serif;
			margin-bottom: 40px;
		}
		
		.donate_codes .donate_header {
			float: left;
			text-transform: uppercase;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.3;
			
			width: 35%;
			max-width: 300px;
			display:inline-block;
		}
		
		.donate_codes .donate_content {
			font-size: 16px;
			border-left: 1px solid #d6c8ae;
			display:inline-block;
			padding-left: 20px;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		
		.donate_codes .hide_row {
			overflow: hidden;
			float: right;
			max-width: 54%;
			margin-top: -6px;
		}
		.donate_codes .row {
			margin: 0 0 0 -10px;
		}
		.donate_codes .donate_content .copy {
			
			background-image: url(pics/copy.png);
			background-position: right;
			background-repeat: no-repeat;
			
			padding: 10px;
			display: inline-block;
			
			margin-right: 25px;
			margin-left: 20px;
			margin-bottom: -3px;
		}
		
		.zeroclipboard-is-hover { 
			cursor: pointer; 
		}
		
		
		
		.pay_form {
			width: 100%;
			max-width: 355px;
			margin: 0 auto;
			text-align: center;
			color: #947e85;
		}
		
		.pay_form .pay {
			display:inline-block;
			float: left;
			
			background-image: url(pics/payment-arrow.png);
			background-position: right;
			background-repeat: no-repeat;
			
			padding-right: 80px;
			padding-top: 30px;
			padding-bottom: 30px;

		}
			.pay_form  .pay .pay_head {
				padding-bottom: 20px;
			}
			
			select {
				border: 1px solid #b9aaaf;
				color: #474344;
				border-radius: 20px;
				padding-top: 5px;
				padding-bottom: 5px;
				padding-right: 40px;
				padding-left: 10px;
				
				-webkit-appearance: button;
				background-image:  url(pics/select.png);
				background-position: right;
				background-repeat: no-repeat;
				
				transition: 0.2s;
			}  
			
		
		.pay_form .get {
			padding-top: 30px;
			display:inline-block;
			float: right;
		}
		
		.pay_form .get .get_head {
			padding-bottom: 25px;
		}
		
		.pay_form  #i200, #i300, #i400, #i500, #i1000, #i1500, #i2000 {
			display:none;
		}
		
		
		.pay_form .pay_btn {
			margin-top: 20px;
			margin-bottom: 20px;
			
			border-radius: 50px;
			padding-left: 25px;
			padding-right: 25px;
			padding-top: 9px;
			padding-bottom: 9px;
			border: 2px solid #a568ee;
			background: linear-gradient(to right, #c1502a, #b13232);
			font-weight: 700;
			color: white;		
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 2px;
		}
		
		.pay_form .pay_btn:focus {
			outline: 0;
		}
		.pay_btn:hover {
			cursor:pointer;
			background: #b13232;
		}
		
		.pay_desc {
			text-align: center;
			max-width: 700px;
			margin: 0 auto;
			line-height: 1.8;
			margin-bottom: 80px;
		}
		
		.pay_instruction_b {
			color: #524842;
			font-size: 15px;
		}
		
		
		.howtopay {
			margin-left: 20px;
			margin-top: 35px;
		}
		.howtopay li {
			margin-top: 20px;
			padding-left: 15px;
		}
		
		
		.donate_success {
			background-image:  url(pics/success.png);
			background-position: center top;
			background-repeat: no-repeat;
				
			font-family: 'kelson_sans_ruregular', sans-serif;
			font-size: 23px;
			text-transform: uppercase;
			color: #62ab75;
			
			margin: 0 auto;
			text-align: center;
			
			padding-top: 60px;
			
		}
		
		.your_code {
			text-align: center;
			margin-top: 50px;
			color: #8d757d;
		}
		
		.your_code .donate_code {
			margin-top: 15px;
			margin-left: -15px;
			background-color: #eae6e8;
			border: 0;
			border-radius: 20px;
			padding: 10px 20px;
			border: 1px solid #bebcbd;
			font-weight: 700;
			color: #765963;
			transition: 0.2s;
		}
		.your_code .copy {		
			background-image: url(pics/copy.png);
			background-position: center;
			background-repeat: no-repeat;
			
			padding: 10px;
			display: inline-block;
			
			margin-left: -40px;
			margin-bottom: -4px;
		}
		
		
		.success_desc {
			margin: 0 auto;
			margin-top: 40px;
			text-align: center;
			max-width: 700px;
		}
		
		
		.ent_psw {
			margin: 0 auto;
			width: 100%;
			text-align: center;
		}
		
		.ent_psw input[type="password"] {
			border-radius: 50px;
			padding-left: 14px;
			padding-right: 14px;
			padding-top: 6px;
			padding-bottom: 6px;
			
			display: block;
			margin: 0 auto;
			margin-bottom: 20px;
			
			border: 1px solid #bebcbd;
			font-weight: 700;
			color: #765963;
			transition: 0.2s;
		}

		.ent_psw input[type="submit"] {
			margin: 0 auto;
			border-radius: 50px;
			padding-left: 14px;
			padding-right: 14px;
			padding-top: 8px;
			padding-bottom: 8px;
			border: 2px solid #a568ee;
			background-color: rgba(255, 255, 255, 0.0);	
			font-weight: 600;
			color: #a568ee;		
			text-align: center;
			margin-bottom: 10px;
			display: block;
			text-decoration: none;
			font-style: normal;
			line-height: 1.0;
			font-size: 12px;
			transition: 0.2s;
		}
		
		.ent_psw input[type="submit"]:hover {
			color: white;
			background-color: #a568ee;
		
		}
		
		.ent_psw input[type="password"]:focus {
			outline: 0;
		}

		
		@media (max-width: 850px) {
		
			body {
				background-size: auto;
				background-position: center center; 
			}
			
			.main_foot {
				position: static;
				margin-top: 20vh;
			}
			.main_foot .main_foot_conter .center {
				display: none;
			}
			
			.main_foot .main_foot_conter .left {
				display: inline;
				margin: 0;
				width: 100%;
				margin-left: 20px;
				margin-right: 20px;
			}
			
			.main_foot .main_foot_conter .right {
				margin: 0;
				margin-top: 20px;
				margin-left: 20px;
				margin-right: 20px;
			}
			
			.nav_bar .left {
				width: 100%;
				margin: 0 auto;
			}
			.nav_bar .center {
				padding-top: 30px;
				width: 100%;
			}
			.nav_bar .right {
				float: center;
				width: 1000%
			}
			
			.nav_bar .left a {
				
				padding-top: 15px;
				padding-bottom: 15px;
				
				display: block;
			}
			
			.nav_bar .right a {
				display: block;
				
				padding-top: 15px;
				padding-bottom: 15px;
			}

			
			.nav_bar .center a {
				padding: 0;
				padding-top: 15px;
				padding-bottom: 15px;
				display: block;
			}
			

			
			.footer {
				display: none;
			}
			
			.nav_bar .active {
				background: none;
				color: white;
			}
			
			.nav_bar a:hover  {
				background-color: transparent;
				color: white;
			}
			
			.nav_bar .right a:hover  {
				background-color: transparent;
				color: white;
			}
			.nav_bar .left a:hover  {
				background-color: transparent;
			}
			
			
			.howtostart img {
				display: none;
			}
			
			.pay_form .pay {
				padding-right: 60px;
			}
			
			.mob_hide {
				display: none;
			}
			
		}

/* Estilos para la barra lateral más pequeña y más abajo */
.sidebar {
    position: fixed;
    top: 400px; /* Ajusta este valor para colocar la barra más cerca de la parte inferior */
    left: 10px;
    width: 40px; /* Reduce el ancho de la barra lateral */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background-color: #141414; /* Fondo oscuro opcional */
    border-radius: 8px;
}

.sidebar a {
    color: #9436a7;
    font-size: 1.2em; /* Reduce el tamaño de los iconos */
    margin-bottom: 15px;
    text-decoration: none;
    transition: color 0.2s;
}

.sidebar a:hover {
    color: white;
}
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que se muestre por encima de otros elementos */
    visibility: hidden; /* Ocultar por defecto */
}

.spinner {
    border: 8px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid #fff; /* Color del spinner */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite; /* Animación de rotación */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
	display: flex;
	flex-direction: column; /* Apilar verticalmente */
	justify-content: center;
	align-items: center;
	z-index: 9999; /* Asegura que se muestre por encima de otros elementos */
	visibility: hidden; /* Ocultar por defecto */
}

.loading-overlay img {
	width: 200px; /* Ajusta el tamaño de la imagen */
	height: auto; /* Mantener proporciones */
	margin-bottom: 10px; /* Espacio entre la imagen y el texto */
}

/* Estilos responsivos para teléfonos */
    #content 
	{
        font-size: 1.2rem; /* Tamaño de texto más pequeño */
        margin: 10px; /* Margen más pequeño */
   
	}
  /* Icono de Discord */
  .discord-icon i {
	font-size: 24px;
	color: #c0bfbc; /* Color base para el icono */
	transition: color 0.3s, box-shadow 0.3s;
	}

	.discord-icon i:hover {
		color: #990ac4b3; /* Color amarillo más claro al pasar el cursor */
	box-shadow: 0 0 5px #990ac4b3; /* Efecto de sombra al pasar el cursor */
	}
	.center a:hover {
	color: #a568ee;
	box-shadow: 0 0 5px #990ac4b3; /* Efecto de sombra al pasar el cursor */
		}

/* General styles for the prices section */
.prices-section {
    background-color: #333;
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 1s ease forwards;
}

.prices-section h2 {
    font-size: 24px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
    animation: fadeIn 1s ease forwards;
}

.prices-section p em {
    color: #e4b637;
    font-size: 14px;
    display: block;
    text-align: center;
    margin-bottom: 20px;
    animation: fadeIn 1s ease forwards;
}

.vip-package, .coins-package {
    background-color: #ffffff;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border-left: 6px solid #e9aa08; 
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
}

.vip-package:hover, .coins-package:hover {
    background-color: #990ac4b3;
    transform: scale(1.03);
	box-shadow: 0 6px 12px rgba(137, 46, 179, 0.823);
}

.vip-package h3, .coins-package h3 {
    font-size: 18px;
    color: #333;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    align-items: center;
    animation: fadeInLeft 0.8s ease forwards;
}

.vip-package h3::before, .coins-package h3::before {
    content: " ";
    font-size: 24px;
    margin-right: 8px;
}

.vip-package p, .coins-package p {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
    text-align: right;
    animation: fadeIn 0.8s ease forwards;
}

/* Fade-in Animations */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInTitle {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Contact Section */
.contact-section {
    background-color: #333;
    color: #f5f5f5;
    text-align: center;
    padding: 30px;
    border-radius: 10px;
    margin: 40px auto;
    max-width: 800px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease forwards;
}

.contact-section h2 {
    font-size: 2em;
    color: #ffd700;
    margin-bottom: 15px;
    animation: fadeInTitle 0.8s ease forwards;
}

.contact-section p {
    font-size: 1.2em;
    margin-bottom: 20px;
    animation: fadeIn 0.8s ease forwards;
}

.contact-section button {
    background-color: #ffd700;
    color: #333;
    font-size: 1em;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInUp 0.8s ease forwards;
}

.contact-section button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(228, 154, 6, 0.8);
}
.footer {
	width: 100%;
	background-color: black;
	padding-top: 18px;
	padding-bottom: 18px;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 10px;
}

/* Centrar los botones dentro de su contenedor */

.buy-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #a78528; /* Color verde */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 10px 0; /* Márgenes verticales */
    text-align: center; /* Asegura que el texto dentro del botón esté centrado */
}

/* Hover y active del botón */
/* Centrar solo el botón dentro de su contenedor */
.package {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    color: #e0e0e0;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar el contenido verticalmente */
    text-align: left; /* El texto seguirá alineado a la izquierda */
}

/* Botón de compra */
.buy-button {
    display: block;  /* Asegura que el botón sea un bloque */
    padding: 10px 20px;
    background-color: #a78528; /* Color verde */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 10px auto; /* Esto centra el botón horizontalmente */
    text-align: center; /* Asegura que el texto dentro del botón esté centrado */
}

/* Hover y active del botón */
.buy-button:hover {
    background-color: #885821; /* Verde más oscuro al pasar el ratón */
    transform: translateY(-2px);
}

.buy-button:active {
    background-color: #1e7e34; /* Verde aún más oscuro al hacer clic */
    transform: translateY(2px);
}

.buy-button:focus {
    outline: none;
}

/* Special Packages Section */
.special-packages {
    max-width: 1200px;
    margin: 80px auto;
    color: #f5f5f5;
    padding: 10px;
    animation: fadeInUp 1.2s ease forwards;
}

.special-packages h2 {
    text-align: center;
    color: #ffd700;
    margin-bottom: 30px;
    font-size: 2.2em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    animation: fadeInTitle 0.8s ease forwards;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
    animation: fadeInUp 1s ease forwards;
}

/* Package Card Animations */
.package {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    color: #e0e0e0;
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
	align-items: center;
}

.package:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 24px rgba(228, 154, 6, 0.8);
    background-color: #b06b04;
}

.package h3 {
    margin-top: 0;
    color: #ffd700;
    font-size: 1.4em;
    font-weight: bold;
    animation: fadeIn 0.8s ease forwards;
}

.package ul {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}

.package ul li {
    margin: 15px 0;
    opacity: 0;
    animation: fadeIn 0.7s forwards;
    animation-delay: calc(0.1s * var(--i));
}

.package:hover ul li {
    animation: fadeIn 0.5s forwards;
}

/* Package Images */
.package-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 15px;
    animation: fadeInUp 1s ease forwards;
}

.package-images img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.package-images img:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(17, 8, 4, 0.823);
}


.buy-icon {
    color: #918020; 
    font-size: 1.2em;
    text-decoration: none; 
    margin-left: 10px; 
}

.buy-icon:hover {
    color: #93472e; 
}
.package-link {
    display: block; 
    text-decoration: none; 
    color: inherit; 
}

.package-link:hover {
    cursor: pointer; 
    opacity: 0.8; 
}

.package-link:hover .package {
    transition: opacity 0.3s ease;
}
@keyframes textColorChange {
    0% {
        color: white;
    }
	25% {
		color: rgb(204, 91, 206);
	}
    50% {
        color: #aa1d80; /* Color rosado claro */
    }
	75% {
		color: rgb(190, 120, 211)
	}
    100% {
        color: white;
    }
}

.norm-button {
    display: inline-block;
    text-align: center;
    padding: 15px 10px;
    font-size: 16px;
    font-style: italic; /* Texto en cursiva */
    background-color: #9e2e66; /* Color rosado */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    animation: textColorChange 4s infinite; /* Animación infinita */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.norm-button:hover {
    background-color: #802b94; /* Color rosado más claro */
    transform: scale(1.05);
}
.card {
    background-color: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra más suave y difusa */
    border-radius: 12px; /* Bordes más redondeados */
    padding: 25px;
    margin: 20px auto;
    max-width: 900px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación para hover */
}

.card:hover {
    transform: translateY(-5px); /* Efecto de elevar la tarjeta */
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en hover */
}

.card h2 {
    color: #333;
    margin-top: 0;
    font-size: 24px;
    font-weight: 600; /* Título más destacado */
}

.card p {
    color: #666;
    line-height: 1.8;
    font-size: 16px;
    font-family: 'Arial', sans-serif; /* Fuente más legible */
    margin-bottom: 0;
}

/* Estilo para botones dentro de la tarjeta, si los necesitas */
.card .btn {
    background-color: #9e2e66;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.card .btn:hover {
    background-color: #802b94; /* Color más claro en hover */
}