@charset "UTF-8";
/* CSS Document */

/* ------------------------------------------------------------
   Common 
-------------------------------------------------------------*/

:root {
	--primary-color: #970f00;
	--secondary-color: #000;
	--bg-color: #FFF;
	--dark-color: #000;
	--light-color: #FFF;
	--pnrr-color: #09244f;
	--hover-color: #EFEFEF;
	--gray-color: #D9D9D9;
	--dark-gray-color: #CFCFCF;
	--title-size: 5rem;
	--subtitle-size: 3rem;
	--title2-size: 2.5rem;
	--big-text-size: 1.4rem;
	--normal-text-size: 1rem;
	--caption-text-size: 0.8rem;
}

/* Homepage -------------------------------------------------*/

body {
	background-image: url("../images/home/background.jpg");
	background-size: cover;
}

div#content-container {
	position: fixed;
	bottom: var(--normal-text-size);
	color: var(--light-color);
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
}

div.content-container-title {
	display: flex;
	align-content: flex-start;
	align-items: center;
	width: fit-content;
	min-width: 50%; 
	background-color: var(--primary-color);
}

div.content-container-title > div {
	padding: 2vw 5vw 0 5vw;
	font-size: var(--title-size);
	text-transform: uppercase;
	letter-spacing: calc(var(--normal-text-size) * 0.2);
}

div.content-container-center {
	min-height: 50vh; 
	background-color: var(--primary-color);
	display: flex; 
	align-content: center; 
	align-items: center; 
	width: 100%;
}

div.content-container-item {
	width: 100%; 
	background-color: var(--primary-color);
	line-height: 1;
}

div.content-container-item > div {
	padding: 1vw 5vw 0 5vw;
	font-size: var(--title2-size);
	letter-spacing: calc(var(--normal-text-size) * 0.1);
}

div.content-container-item > div > div {
	border-bottom: 1px solid var(--light-color); 
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	align-content: center; 
	justify-content: space-between; 
	padding-bottom: 1vw;
}

div.content-container-item > div > div > div {
	cursor: pointer;
	transition: opacity 0.2s ease-in-out;
	max-width: 70%;
}

div.content-container-item > div > div > div:hover {
	opacity: 0.7;
}

div.content-container-item:last-child > div > div {
	border: 0;
	/*padding-bottom: 0;
	margin-bottom: 5vw;*/
}

div.go-icon {
	width: var(--title2-size);
	height: var(--title2-size);
	background-image: url("../images/graphics/icon_go.svg");
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
	transition: opacity 0.2s ease-in-out;
	margin-left: var(--title2-size);
}

div.go-icon:hover {
	opacity: 0.7;
}