/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/





.story-box-info {
	box-sizing: border-box;
	padding: 60px;	
	background: #fff;
	box-shadow: 0 10px 45px rgba(0,0,0,.1);
	transition: all ease-in .3s;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
	color:#000 !important;
}


.bg-blue{
	background-color: #112542;
}

.bg-white-transparent{
	background: rgba(255,255,255,.8) !important;
}

h3{
	font-weight: bold !important;
	color:#000;
}

.header-blue-title{
	background-color: #112542;
	color:#fff;
	padding: 80px 0 100px;
}
.header-blue-title h3{
	color:#fff;
}
.header-blue-title .lead{
	font-size: 1.8rem;
}
.header-blue-content{
	margin-top: -70px;
}

.hx-blue{
	color: #112542;
	border-left: 6px #D10E05 solid;
	padding-left: 10px;
}
.hx-red{
	color: #D10E05;
	border-left: 6px #112542 solid;
	padding-left: 10px;
}
.hx-white{
	color: #fff;
	border-left: 6px #D10E05 solid;
	padding-left: 10px;
}

.swiper-slide-bg {
    background-position: 67% center;
}

.top-links-sub-menu .top-links-item > a > img{
	width: auto !important;
}


@media (max-width: 767.98px) {
	.story-box-info{
		padding: 30px;
	}
	#gotoMundial img{
		max-height: 60px;
		width: auto;
	}
	#gotoMundial > div{
		font-size: 1.2em !important;
	}
}

#gotoMundial{
	display: block;
	position: fixed;
	bottom: 1em;
	left: 1em;
	z-index: 10000;

	font-weight:600;    
    /* font-size: 1.2em; */
    text-align: center;	
	letter-spacing: 1px;

}

#gotoMundial > div{
	background: rgba(255, 255, 255, 0.9);
    display: inline-block;
    padding: 10px;
    border: 5px #D69A43 solid;
    font-size: 1.6em;
    font-weight: 800;
    line-height: 34px;
    /* max-width: 254px; */
    animation: blink 1s infinite;
    border-radius: 50%;
    /* padding: 1em; */
    text-align: center;
    padding: 1em 2em;
}
#gotoMundial > span{
	display: block;
	margin-bottom: 10px;
    animation-name: cambioColorTexto; /* Nombre de la animación */
    animation-duration: 1s; /* Duración de cada ciclo: 2 segundos */
    animation-timing-function: linear;
    animation-iteration-count: infinite; /* Repetición infinita */	
}
@keyframes blink {
	0% { opacity: 1.0; }   /* Opacidad completa (visible) */
    50% { opacity: 0.7; }  /* Opacidad parcial (transparente pero visible) */
    100% { opacity: 1.0; } /* Opacidad completa de nuevo */
}


@keyframes cambioColorTexto {
    0% { color: #ffffff; }   /* Inicio: Blanco (#ffffff) */
    50% { color: #000000; }  /* Mitad: Negro (#000000) */
    100% { color: #ffffff; } /* Fin: Blanco de nuevo */
}