/*	Mobile  */
@media screen and (max-width: 440px) {

	.Container {
	    margin-top: 7rem;
	    padding-top: 0;
	    width: 85vw;
	    margin-left: auto;
	    margin-right: auto;
	    display: block;
	}
		.Container h1.PageTitle {
			margin-bottom: 1.7rem;
		}
		.CoverContainer {
			width: 100%;
		    overflow: hidden;
		    margin-top: 5rem;
		    height: 12rem;
		    position: relative;
		    background-size: cover;
		}
		.Container .EventLocation {
			display: flex;
			align-items: center;
		}
		.Container .EventLocation i {
			margin-right: 0.4rem;
		}
		.Container .EventLocation p {
			text-transform: uppercase;
		    font-weight: 600;
		    font-size: 0.9rem;
		}
		.CoverContainer img {
			width: 100vw;
			height: auto;
			position: absolute;
			top: -3rem;
		}
		.CoverContainer::after {
		    content: "";
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    width: 100%;
		    height: 2rem;
			background: linear-gradient(to top, rgba(239, 239, 239, 1) -3%, rgba(239, 239, 239, 0.8) 0%, rgba(239, 239, 239, 0.4) 45.9%, rgba(239, 239, 239, 0) 40%);
		    pointer-events: none;
		}
		.Container {
	        display: block;
	        max-width: 85vw;
	        margin-left: auto;
	        margin-right: auto;
	        margin-top: 2.5rem;
	        margin-bottom: 5rem;
	        padding-top: 0;
	        color: var(--Page_Text_Color);
	    }
	    .Container .Testo {
	    	font-size: 1.1rem;
	    	font-family: var(--Font_Normal);
	    	line-height: 1.65rem;
	    }
	    .Container .Testo h4 {
	    	font-size: 1.2rem;
	    	text-transform: uppercase;
	    }
	    .Container .ButtonBox {
	    	margin-top: 3rem;
	    }
	    .Container .ButtonBox a {
	    	text-decoration: none;
	    	text-transform: uppercase;
	    	padding: 1.5rem 0rem;
	    	background: var(--Palette1dark);
	    	color: var(--Palette5);
	    	font-weight: 700;
	    	border-radius: 0.2rem;
	    	transition: all 0.2sease;
	    	width: 100%;
	    	display: block;
	    	max-width: 92vw;
	    	text-align: center;
	    	font-size: 1.3rem;
	    	margin-bottom: 1rem;
	    }
	    .Container .ButtonBox a:hover {
	    	background-color: var(--Palette1);
	    }

	    #ElencoEventi .Evento {
			display: flex;
			box-sizing: border-box;
			padding: 1rem;
			background-color: #ffffff;
			margin-bottom: 1rem;
			-webkit-border-radius: 0.3rem;
			-moz-border-radius: 0.3rem;
			border-radius: 0.3rem;
			overflow: hidden;
			flex-direction: column;
			align-items: flex-start;
	    }
	    .Evento::after {
	        content: "";
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        background: rgba(0, 0, 0, 0.5);
	        backdrop-filter: blur(2px);
	        -webkit-backdrop-filter: blur(2px);
	        z-index: 1;
	    }
	    .Container #EventiPrenotazione H3:first-child {
            text-transform: uppercase;
            font-size: 1.5rem;
            color: var(--Palette1);
            text-shadow: none;
            margin-top: 3rem;
        }
        .Container #EventiPrenotazione #ElencoEventi .Evento p {
            display: none;
            position: relative;
            z-index: 2;
            color: var(--Palette5);
            text-shadow: 2px 2px 3px rgba(18, 22, 25, 11.7);
            margin-top: 0rem;
            font-size: 0.5rem;
            order: 1;
        }
        .Container #EventiPrenotazione #ElencoEventi .Evento .Sell::before {
            content: "\f111";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            margin-right: 0.4rem;
            color: var(--Palette2light);
            text-shadow: none;
        }
        .Container #EventiPrenotazione H3 {
            display: block;
            margin: 0;
            padding: 0;
            font-size: 1.2rem;
            line-height: 1em;
            text-transform: uppercase;
            letter-spacing: -0.03em;
            margin-bottom: 0.6rem;
            position: relative;
            z-index: 2;
            color: var(--Palette5);
            text-shadow: 2px 2px 3px rgba(18, 22, 25, 0.4);
            order: 2;
            width: 100%;
        }
        .Container #EventiPrenotazione H5 {
        	display: block;
        	margin: 0;
        	padding: 0;
        	font-size: 0.9rem;
        	line-height: 1em;
        	font-weight: 300;
        	letter-spacing: -0.03em;
        	margin-bottom: 0.8rem;
        	position: relative;
        	z-index: 2;
        	color: var(--Palette5);
        	text-shadow: 2px 2px 3px rgba(18, 22, 25, 0.4);
        	text-transform: uppercase;
        	max-width: 100%;
        	white-space: wrap;
        	margin-top: -0.3rem;
        	order: 3;
        }
        .Evento .Date {
            position: relative;
            z-index: 2;
            color: var(--Palette5);
            text-shadow: 2px 2px 3px rgba(18, 22, 25, 0.4);
            order: 3;
            display: block;
            width: 100%;
            font-size: 1rem;
            font-weight: 600;
        }
        .Container #EventiPrenotazione #ElencoEventi .Evento .BookButton {
            position: relative;
            background: var(--Palette2dark);
            color: var(--Palette5);
            text-transform: uppercase;
            text-decoration: none;
            font-size: 1.1rem;
            line-height: 2.5rem;
            font-weight: 600;
            letter-spacing: -0.1rem;
            border-radius: 0.2rem;
            z-index: 2;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
            order: 4;
            width: 100%;
            margin-top: 1rem;
            text-align: center;
        }

	/*---------------------------------------------------------------------RASS-------------------*/


		.Evento.Rass::after {
		    content: "";
		    position: static;
		    top: 0;
		    left: 0;
		    width: 1px;
		    height: 1px;
		    background: #fff;
		    backdrop-filter: unset;
		    -webkit-backdrop-filter: none;
		    z-index: 1;
		}
		.Evento.Rass {
			display: flex !important;
			color: var(--Palette1);
			padding: 1rem !important;
			background: #ffffff !important;
			margin-bottom: 1rem !important;
			-webkit-border-radius: 0.3rem !important;
			-moz-border-radius: 0.3rem !important;
			border-radius: 0.3rem !important;
			min-height: 8rem !important;
			overflow: hidden !important;
			cursor: default !important;
			padding-left: 9.5rem !important;
			position: relative !important;
			max-height: 12rem !important;
			height: 100%;
			box-sizing: border-box !important;
			box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
		}
		.Evento.Rass .Image{
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
			max-width: 8rem;
			height: 100%;
		}
		#ElencoEventi .Evento.Rass p,
		.Container #EventiPrenotazione #ElencoEventi .Evento.Rass h3,
		.Container #EventiPrenotazione #ElencoEventi .Evento.Rass h5,
		#ElencoEventi .Evento.Rass .Date {
			color: var(--Palette1) !important;
			text-shadow: none !important;
		}
		.Container #EventiPrenotazione #ElencoEventi .Evento.Rass h3 {
			font-size: 1.1rem !important;
		}
		#ElencoEventi .Evento.Rass .Date {
			font-size: 0.8rem !important;
		}
		.Container #EventiPrenotazione #ElencoEventi .Evento.Rass h5 {
			display: none;
		}


}

/*	Desktop*/
@media screen and (min-width: 441px) {

	.Container h1.PageTitle {
		margin-bottom: 1.7rem;
	}
	.CoverContainer {
		width: 100%;
		overflow: hidden;
		margin-top: 5rem;
		height: 20vw;
		position: relative;
		background-size: cover;
	}
	.Container .EventLocation {
		display: flex;
		align-items: center;
	}
	.Container .EventLocation i {
		margin-right: 0.4rem;
	}
	.Container .EventLocation p {
		text-transform: uppercase;
	    font-weight: 600;
	    font-size: 0.9rem;
	}
	.CoverContainer img {
		width: 100vw;
		height: auto;
		position: absolute;
		top: -3rem;
	}
	.CoverContainer::after {
	    content: "";
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 2rem;
		background: linear-gradient(to top, rgba(239, 239, 239, 1) -3%, rgba(239, 239, 239, 0.8) 0%, rgba(239, 239, 239, 0.4) 45.9%, rgba(239, 239, 239, 0) 40%);
	    pointer-events: none;
	}
	.Container {
        display: block;
        max-width: 71.222rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5rem;
        margin-bottom: 5rem;
        padding-top: 0;
        color: var(--Page_Text_Color);
    }
    .Container .ButtonBox {
    	margin-top: 3rem;
    }
    .Container .ButtonBox a {
    	text-decoration: none;
    	text-transform: uppercase;
    	padding: 1rem;
    	background: var(--Palette1dark);
    	color: var(--Palette5);
    	font-weight: 700;
    	border-radius: 0.2rem;
    	transition: all 0.2s ease;
    	display: inline-block;
    }
    .Container .ButtonBox a:hover {
    	background-color: var(--Palette1);
    }


    .Container #EventiPrenotazione {
    	display: block;
    	margin-top:5rem;
    }
    .Container #EventiPrenotazione H3 {
    	display: block;
    	margin:0;
    	padding:0;
    	font-size:2rem;
    	line-height:1em;
    	letter-spacing: -0.03em;
    	margin-bottom: 2rem;
    	position: relative;
    	z-index: 2;
    	color: var(--Palette5);
    	text-shadow: 2px 2px 3px rgba(18, 22, 25, 0.4);
    }
    .Container #EventiPrenotazione H3:first-child {
    	text-transform: uppercase;
    	font-size: 1.5rem;
    	color: var(--Palette1);
    	text-shadow: none;
    }
    .Container #EventiPrenotazione H5 {
    	display: block;
    	margin: 0;
    	padding: 0;
    	font-size: 0.9rem;
    	line-height: 1em;
    	font-weight: 300;
    	letter-spacing: -0.03em;
    	margin-bottom: 2rem;
    	position: relative;
    	z-index: 2;
    	color: var(--Palette5);
    	text-shadow: 2px 2px 3px rgba(18, 22, 25, 0.4);
    	text-transform: uppercase;
    	max-width: 85%;
    	white-space: wrap;
    	margin-top: -1.3rem;
    }
	.Container #EventiPrenotazione #ElencoEventi {
		display: block;
	}
	.Container #EventiPrenotazione #ElencoEventi .Evento {
		display: block;
		box-sizing: border-box;
		padding:1rem;
		background-color: #ffffff;
		margin-bottom:1rem;
		-webkit-border-radius: 0.3rem;
		-moz-border-radius: 0.3rem;
		border-radius: 0.3rem;
		min-height: 12rem;
		overflow: hidden;
		cursor: default;
	}
	.Evento::after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.5);
	    backdrop-filter: blur(2px);
	    -webkit-backdrop-filter: blur(2px);
	    z-index: 1;
	}
	
	.Container #EventiPrenotazione #ElencoEventi .Evento p {
		display: block;
		font-size: 0.7rem;
		position: relative;
		z-index: 2;
		color: var(--Palette5);
		text-shadow: 2px 2px 3px rgba(18, 22, 25, 11.7);
		margin-bottom: 1.5rem;
	}
	.Container #EventiPrenotazione #ElencoEventi .Evento .Sell::before {
	    content: "\f111";
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        margin-right: 0.4rem;
        color: var(--Palette2light);
        text-shadow: none;
	}
	.Evento .Date {
		position: relative;
		z-index: 2;
		color: var(--Palette5);
		text-shadow: 2px 2px 3px rgba(18, 22, 25, 0.4);
		font-size: 1.3rem;
		display: block;
		margin-bottom: 1rem;
		font-weight: 300;
		max-width: 85%;
	}
	.Container #EventiPrenotazione #ElencoEventi .Evento .BookButton {
		position: absolute;
		bottom: 1rem;
		right: 2rem;
		background: var(--Palette2dark);
		padding: 0.7rem 2rem;
		color: var(--Palette5);
		text-transform: uppercase;
		text-decoration: none;
		font-size: 1.1rem;
		font-weight: 600;
		letter-spacing: -0.1rem;
		border-radius: 0.2rem;
		z-index: 2;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease;
	}
	.Container #EventiPrenotazione #ElencoEventi .Evento .BookButton:hover {
		transform: scale(1.05);
	}


	/*---------------------------------------------------------------------RASS-------------------*/


	.Evento.Rass::after {
	    content: "";
	    position: static;
	    top: 0;
	    left: 0;
	    width: 1px;
	    height: 1px;
	    background: #fff;
	    backdrop-filter: unset;
	    -webkit-backdrop-filter: none;
	    z-index: 1;
	}
	.Evento.Rass {
		display: block !important;
    	color: var(--Palette1);
        padding: 1rem !important;
        background: #ffffff !important;
        margin-bottom: 1rem !important;
        -webkit-border-radius: 0.3rem !important;
        -moz-border-radius: 0.3rem !important;
        border-radius: 0.3rem !important;
        min-height: 11rem !important;
        overflow: hidden !important;
        cursor: default !important;
        padding-left: 14.5rem !important;
        position: relative !important;
        max-height: 12rem !important;
        height: 14rem;
        box-sizing: border-box !important;
        transition: all 0.2s ease;
	}
	.Evento.Rass:hover {
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
	}
	.Evento.Rass .Image{
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		max-height: 15rem;
		min-height: 12rem;
		height: 100%;
	}
	#ElencoEventi .Evento.Rass p,
	.Container #EventiPrenotazione #ElencoEventi .Evento.Rass h3,
	.Container #EventiPrenotazione #ElencoEventi .Evento.Rass h5,
	#ElencoEventi .Evento.Rass .Date {
		color: var(--Palette1) !important;
		text-shadow: none !important;
	}
	.Container #EventiPrenotazione #ElencoEventi .Evento.Rass h3 {
		font-size: 1.6rem !important;
	}
	#ElencoEventi .Evento.Rass .Date {
		font-size: 1.1rem !important;
	}










}