/* Hero */
.radiology .hero {
	--heroAnimationDelay : 0s ;
	
	font-family : Verdana, sans-serif ;
}

.radiology .hero_header {
	--heroHeaderZoomMax : 1.25 ;
	
	height : 130px ;
	width : min(100%, 560px) ;
	padding : 0 24px ;
	overflow : visible ;
	
	background : rgba(255, 255, 255, 0.9) ;
	border : 1px solid rgba(128, 128, 128, 0.9) ;
    border-radius : 20px ;
	
	opacity : 0.5 ;
	
	perspective : 100px ;
	
	animation : radiology_heroHeaderAnimation 5s ease var(--heroAnimationDelay) forwards ;
}
	@keyframes radiology_heroHeaderAnimation {
		0% {
			background : rgba(16, 16, 16, 0.9) ;
			opacity : 0.5 ;
		}
		
		14.5%,
		15.5% {
			background : rgba(16, 16, 16, 0.9) ;
			opacity : 1 ;
		}
		15% {
			background : rgba(255, 255, 255, 0.9) ;
			opacity : 1 ;
			scale : var(--heroHeaderZoomMax) ;
		}
		
		29.5%,
		30.5% {
			background : rgba(16, 16, 16, 0.9) ;
		}
		30% {
			background : rgba(255, 255, 255, 0.9) ;
		}
		
		34.5%,
		35.5% {
			background : rgba(16, 16, 16, 0.9) ;
		}
		35% {
			background : rgba(255, 255, 255, 0.9) ;
		}
		
		70% {
			background : rgba(255, 255, 255, 0.9) ;
			opacity : 1 ;
			scale : var(--heroHeaderZoomMax) ;
		}
		100% {
			opacity : 1 ;
			scale : 1 ;
			box-shadow : 0px 0px 10px white ;
		}
	}

.radiology .hero_title {
	--heroTitleAnimationDuration : 3s ;
	
	--index : 0 ;

	position : relative ;
	margin : 1px ;
	padding : 5px 10px ;
	
	display : flex ;
	align-items : center ;
	justify-content : center ;
	
	font-size : 2.5em ;
	font-weight : bold ;
	text-transform : uppercase ;
	letter-spacing : -0.05em ;
	text-align : center ;

	color : rgba(64, 64, 64, 0.1) ;
	
	border : 1px solid grey ;
	border-radius : 5px ;
	
	filter : blur(1px) ;
	
	opacity : 0 ;
	
	transform-style : preserve-3d ;
	transform : translate(0px, 80px) rotateX(30deg) ;
	
	animation : radiology_heroTitleAnimation 2s ease-in-out calc(1s * var(--index)) forwards ;
	}
		@keyframes radiology_heroTitleAnimation {
			0% {
				
			}
			33% {
				opacity : 1 ;
				transform : translate(0px, 30px) rotateX(10deg) ;
			}
			100% {
				filter : blur(0px) ;
				opacity : 1 ;
				transform : translate(0px, 0px) rotateX(0deg) ;
			}
		}
	
	.radiology .hero_title:after {
		content : attr(data-text) ;

		position : absolute ;
		top : 0 ;
		left : 0 ;
		width : 100% ;
		height : 100% ;

		background : url("/multimedias/images/heroes/radiology_hero_title.jpg") ;

		background-size : 100% ;
		background-repeat : no-repeat ;

		-webkit-background-clip : text ;
		color : transparent ;
		
		animation : radiology_heroTitleAfterAnimation 5s ease var(--heroAnimationDelay) forwards ;
}
	@keyframes radiology_heroTitleAfterAnimation {
		0% {
			opacity : 0.1 ;
		}
		
		14.5%,
		15.5% {
			opacity : 0.1 ;
		}
		15% {
			opacity : 1 ;
		}
		
		29.5%,
		30.5% {
			opacity : 0.1 ;
		}
		30% {
			opacity : 1 ;
		}
		
		34.5%,
		35.5% {
			opacity : 0.1 ;
		}
		35% {
			opacity : 1 ;
		}
		
		70% {
			opacity : 1 ;
		}
		100% {
			opacity : 1 ;
		}
	}

.radiology .hero_header_background_container {
	position : absolute ;
	top : 0 ;
	left : 0 ;
	width : 100% ;
	height : 100% ;
	overflow : hidden ;
	z-index : -1 ;
	
	border-radius : inherit ;
}
	.radiology .hero_header_background_container:after {
		content : " " ;
		position : absolute ;
		top : 0 ;
		left : 0 ;
		width : 100% ;
		height : 100% ;
		
		background : rgba(0, 0, 0, 0.75) ;
		
		animation : radiology_heroHeaderBackgroundContainerAfterAnimation 5s ease var(--heroAnimationDelay) forwards ;
	}
		@keyframes radiology_heroHeaderBackgroundContainerAfterAnimation {
			0% {
				background : rgba(0, 0, 0, 0.9) ;
			}
			
			14.5%,
			15.5% {
				background : rgba(0, 0, 0, 0.9) ;
			}
			15% {
				background : rgba(0, 0, 0, 0.75) ;
			}
			
			29.5%,
			30.5% {
				background : rgba(0, 0, 0, 0.9) ;
			}
			30% {
				background : rgba(0, 0, 0, 0.75) ;
			}
			
			34.5%,
			35.5% {
				background : rgba(0, 0, 0, 0.9) ;
			}
			35% {
				background : rgba(0, 0, 0, 0.75) ;
			}
			
			70% {
				background : rgba(0, 0, 0, 0.75) ;
			}
			100% {
				background : rgba(0, 0, 0, 0.75) ;
			}
		}

.radiology .hero_header_background {
	width : 100% ;
	height : auto ;
	
	border-radius : inherit ;
}

.radiology .hero_description {
	--unitAnimationDuration1 : 3s ;
	--unitAnimationDuration2 : 1.5s ;
	--unitAnimationDelayBase : 0s ;
	--unitAnimationDelayMultiplier : 0.5s ;
	
	background : black ;
}
	.radiology .hero_description.equilibrium {
		animation : radiology_heroDescriptionEquilibriumAnimation 1s ease forwards ;
	}
		@keyframes radiology_heroDescriptionEquilibriumAnimation {
			0% {
				opacity : 1 ;
			}
			75% {
				background : transparent ;
			}
			100% {
				background : transparent ;
				color : var(--textColor) ;
				opacity : 1 ;
			}
		}

.radiology .hero_description_paragraph {
	--index : 0 ;
	
	position : relative ;

	text-align : center ;
	background : linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 0) 100%) ;
	background-size : 80% ;
	background-repeat : no-repeat ;
	-webkit-background-clip : text ;
	background-clip : text ;
	-webkit-text-fill-color : transparent ;
	color : transparent ;

	filter : blur(1px) ;
	opacity : 0 ;
}
	.radiology .hero_description_paragraph.show {
		animation : radiology_heroDescriptionParagraphShowAnimation var(--unitAnimationDuration1) linear calc(var(--unitAnimationDelayBase) + (var(--unitAnimationDelayMultiplier) * var(--index))) forwards ;
	}
		@keyframes radiology_heroDescriptionParagraphShowAnimation {
			0% {
				opacity : 1 ;
				background-position-x : -500% ;
			}
			100% {
				opacity : 1 ;
				background-position-x : 500% ;
			}
		}
	.radiology .hero_description_paragraph.equilibrium {
		opacity : 1 ;

		background : unset ;
		-webkit-background-clip : unset ;
		background-clip : unset ;
		-webkit-text-fill-color : unset ;

		color : var(--textColor) ;

		animation : radiology_heroDescriptionParagraphEquilibriumAnimation var(--unitAnimationDuration2) ease forwards ;
	}
		@keyframes radiology_heroDescriptionParagraphEquilibriumAnimation {
			0% {
				opacity : 0 ;
			}
			25% {
				filter : blur(0px) ;
				opacity : 0.75 ;
				scale : 1.1 ;
			}
			100% {
				filter : blur(0px) ;
				opacity : 1 ;
				scale : 1 ;
			}
		}