:root {
	--banner-margintop: -0px;
	--banner-paddingright: 0px;
	--comunity-margintop:120px;
	--height30: 30px;
	--height80: 80px;
	--fontsize12: 14px;
	--fontsize18: 18px;
	--fontsize20: 16px;
	--fontsize26: 26px;
	--fontsize30: 30px;
	--fontsize32: 32px;	
	--fontsize40: 40px;
	--fontsize50: 50px;
	--fontsize60: 80px;
	--fontsize100: 100px;
	--bannerheight: 800px;
	--bannerheightlittle: 500px;
	--bannerprotector: -400px;
	
	
}

.imgBanner {
	display: flex;
	justify-content: center; /* Centra horizontalmente */
	align-items: center;     /* Centra verticalmente */
	height: 300px;           /* Ajusta según necesites */
}

.imgBanner img {
  max-width: 100%;
  height: auto;
}
  
.font-weight-normal { 
	font-weight: 300; 
	font-size: 16px;
	color:#a0a0a0;
}
.font-weight-important { 
	color: #e74c3c;
	font-size: 20px;
	font-weight: 600; 
}

.font-color-red {
	color: #e74c3c;
}

a.link {
	color:#000;
	text-decoration:none;
}

a.link:hover {
	color:#e74c3c;
}

a.nav-option {
	font-size: var(--fontsize18);
	display: block;
	padding: 20px;
	text-decoration:none;
	font-weight:bold;
	color: #fff;
	transition: color 0.3s;
}

a.nav-option.active {
	display: block;
	text-decoration:none;
	font-weight:bold;
	color:#e74c3c;
}

a.nav-option:hover {
	color: #e74c3c;
}


a.nav-option-black {
	font-size: var(--fontsize18);
	display: block;
	padding: 20px;
	text-decoration:none;
	font-weight:bold;
	color: #000;
	transition: color 0.3s;
}

a.nav-option-black.active {
	display: block;
	padding: 20px;
	text-decoration:none;
	font-weight:bold;
	color:#e74c3c;
}

a.nav-option-black:hover {
	color: #e74c3c;
}

a.inscriptionbox {
	float:left; 
	cursor:pointer; 
	text-align:left;
	border-bottom: 1px solid #a0a0a0; 
	padding-left:10px; 
	background-color:#a0a0a0; 
	padding-right:10px;
	padding-top:40px; 
	padding-bottom:30px;
	color:#fff;
	transition: background-color 0.5s;
}

a.inscriptionbox:hover {
	background-color:#e74c3c; 
	background-opacity:0.5;
	border:1px solid #a0a0a0;
}

.font-title {
	display:block;
	font-size:var(--fontsize100);
	font-weight:bold;
	color:#fff;
	text-shadow: 1px 1px 1px #000;
	font-family: "Barlow Condensed";
}

.font-subtitle {
	display:block;
	font-size:26px;
	font-weight:bold;
	color:#fff;
	text-shadow: 1px 1px 1px #000;
}

.news {
	transition: 0.3s;
	color:#000;
}

.news:hover {	
	color:#e74c3c;
}


.banner-action-button {
	background-color: #e74c3c;
	color:#fff;
	padding:20px 30px 20px 30px;
	border-radius:20px;
	text-decoration:none;
	font-size:var(--fontsize40);
	font-size:20px;
	font-weight:bold;
}

.banner-action-button-green {
	background-color: #27ae60;
	color:#fff;
	padding:20px 30px 20px 30px;
	border-radius:20px;
	text-decoration:none;
	font-size:var(--fontsize40);
	font-size:20px;
	font-weight:bold;
}

.banner-action-button-active {
	background-color: #fff;
	color:#e74c3c;
	padding:20px 30px 20px 30px;
	border:2px solid #e74c3c;
	border-radius:20px;
	text-decoration:none;
	font-size:var(--fontsize40);
	font-size:20px;
	font-weight:bold;
}


.action-button {
	background-color: #fff;
	color:#000;
	padding:20px 30px 20px 30px;
	border-radius:20px;
	border-color: #e74c3c;
	text-decoration:none;
	font-size:20px;
	font-weight:bold;
	font-family: Arial;
	transition: color 0.3s;
}

.action-button:hover {
	background-color: #e74c3c;
	color:#fff;
}

.action-button-red-to-black {
	background-color: #e74c3c;
	color:#fff;
	padding:20px 30px 20px 30px;
	border:2px solid #e74c3c;
	border-radius:20px;
	text-decoration:none;
	font-size:var(--fontsize40);
	font-size:20px;
	font-weight:bold;
}

.action-button-red-to-black:hover {
	background-color: #000;
	color:#fff;
	padding:20px 30px 20px 30px;
	border:2px solid #000;
	border-radius:20px;
	text-decoration:none;
	font-size:var(--fontsize40);
	font-size:20px;
	font-weight:bold;
}

.action-button-black-to-red {
	background-color: #000;
	color:#fff;
	padding:20px 30px 20px 30px;
	border:2px solid #000;
	border-radius:20px;
	text-decoration:none;
	font-size:var(--fontsize40);
	font-size:20px;
	font-weight:bold;
}

.action-button-black-to-red:hover {
	background-color: #e74c3c;
	color:#fff;
	padding:20px 30px 20px 30px;
	border:2px solid #e74c3c;
	border-radius:20px;
	text-decoration:none;
	font-size:var(--fontsize40);
	font-size:20px;
	font-weight:bold;
}
	
	
.container-image {
  width: 100%;
  position: relative;
  overflow: hidden;
  height:auto;
}

.container-image img {
  width: 100%;
}

.container-image2::after {
  content: "";
  width: 100%;
  height: var(--bannerheight);
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(to right,#000, transparent);
}

.image-grey {
	//filter:grayscale(50%);
	opacity:.5;
	transition:0.6s;
}


.image-grey:hover {
	filter:grayscale(0%);
	opacity:1;
}


.post {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: left;
	text-align: left;
	padding: 20px;
	
}

.post::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3); /* Capa oscura para mejor legibilidad */
}


.post-content {
	position: relative;
	color: white;
	z-index: 2;
	padding: 20px;
	letter-spacing: 0.1em;
}

@media (min-width: 1200px) and (max-width: 1400px) {
	:root {
		--banner-margintop: -50px;
		--banner-paddingright: 0px;
		--comunity-margintop:20px;
		--height30: 40px;
		--height80: 60px;
		--fontsize18: 16px;		
		--fontsize20: 16px;
		--fontsize26: 18px;
		--fontsize30: 20px;
		--fontsize32: 21px;
		--fontsize40: 26px;
		--fontsize50: 30px;
		--fontsize60: 30px;
		--fontsize100: 80px;
		--bannerheight: 600px;
		--bannerheightlittle: 200px;
		--bannerprotector: -200px;
	}
	
	.banner-action-button {
		background-color: #e74c3c;
		color:#fff;
		padding:15px 20px 15px 20px;
		border-radius:20px;
		text-decoration:none;
		font-size:16px;
		font-weight:bold;
	}	
	
	.banner-action-button-green {
		background-color: #27ae60;
		color:#fff;
		padding:15px 20px 15px 20px;
		border-radius:20px;
		text-decoration:none;
		font-size:16px;
		font-weight:bold;
	}	
}

@media (max-width:1024px) {
	:root {
		--banner-margintop: 0px;
		--banner-paddingright: 100px;		
		--comunity-margintop:20px;		
		--height30: 10px;
		--height80: 30px;
		--fontsize18: 18px;
		--fontsize20: 16px;
		--fontsize26: 18px;
		--fontsize30: 20px;
		--fontsize32: 21px;
		--fontsize40: 30px;
		--fontsize50: 36px;
		--fontsize60: 36px;
		--fontsize100: 60px;
		--bannerheight: 250px;
		--bannerheightlittle: 200px;
		--bannerprotector: -100px;
	}
	
	a.nav-option {
		font-size: var(--fontsize18);
		display: block;
		padding: 10px;
		text-decoration:none;
		font-weight:bold;
		color: #fff;
		transition: color 0.3s;
	}

	.font-title {
		display:block;
		font-size:40px;
		font-weight:bold;
		color:#fff;
		text-shadow: 1px 1px 1px #000;
		font-family: "Barlow Condensed";
	}
	
	.font-subtitle {
		display:block;
		font-size:20px;
		font-weight:bold;
		color:#fff;
		text-shadow: 1px 1px 1px #000;
	}	
	
	.banner-action-button {
		background-color: #e74c3c;
		color:#fff;
		padding:10px 20px 10px 20px;
		border-radius:20px;
		text-decoration:none;
		font-size:14px;
		font-weight:bold;
	}	
	
	.banner-action-button-green {
		background-color: #27ae60;
		color:#fff;
		padding:10px 20px 10px 20px;
		border-radius:20px;
		text-decoration:none;
		font-size:14px;
		font-weight:bold;
	}	

	.action-button {
		background-color: #fff;
		color:#000;
		padding:10px 20px 10px 20px;
		border-radius:20px;
		border-color: #e74c3c;
		text-decoration:none;
		font-size:14px;
		font-weight:bold;
		font-family: Arial;
		transition: color 0.3s;
	}	
}