@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
@import url("fontawesome-all.min.css");

#dimensions {
	position: fixed;
    font-size: 24px;
    z-index: 20;
	margin-top: 300px;
	font-weight: 600;
	min-width: 500px;
	text-align: center;
	border: solid black 3px;
	color:#fff;
}

#homeLogo{position: fixed; left: 0; top: 0; border: solid #ffffff 0px; width: 80px; height: 80px; z-index: 10;}
#logoImg{position: relative; width: 80%; height: 80%; margin-top: 10px; margin-left: 5px; cursor: pointer;}
#logoImg:hover{filter: brightness(1.3) drop-shadow(0px 0px 8px rgba(254, 208, 1, 0.4));}

.glowY {
    color: #fff;
    text-shadow: 0 0 7px rgb(255, 208, 0), 0 0 14px rgb(255, 208, 0), 0 0 20px rgb(255, 208, 0);
}
.glowR {
    color: #ff0000;
    text-shadow: 0 0 7px rgb(255, 208, 0), 0 0 14px rgb(255, 208, 0), 0 0 20px rgb(255, 208, 0);
}
.glowW {
    color: #ff0000;
    text-shadow: 0 0 8px rgb(255, 255, 255), 0 0 8px rgb(255, 255, 255), 0 0 12px rgb(255, 255, 255), 0 0 24px rgb(255, 255, 255), 0 0 24px rgb(255, 255, 255);
}

.space10 {
	height: 10px;
}

.spaceAll {
	height: 100%;
	border: solid black 1px;
}

body {
	background: #000000;
	font-family: 'Source Sans Pro', sans-serif;
	min-height: 460px;
}

.icon {
	text-decoration: none;
	position: relative;
	font-size: 26px;
	margin-right: 30px;
	margin-left: 30px;
	color: #fff;
	opacity: 0.35;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}

.icon:hover {
	opacity: 0.8;
	text-shadow: 0 0 7px rgb(255, 208, 0), 0 0 14px rgb(255, 208, 0), 0 0 20px rgb(255, 208, 0);
}

.icon > .label {
	display: none;
}

.icon.solid:before {
	font-weight: 900;
}

.icon.brands:before {
	font-family: 'Font Awesome 5 Brands';
}

#BG {
	top: 0;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	background-color: black;
}

#headline1 {			
	text-align: center;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	font-size: 22px;
	font-weight: 600;
	z-index: 1;
	margin-top: 8px;
	min-width: 320px;
	max-width: 400px;
}

#headline2 {text-align: center;	position: fixed; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: 600;
    z-index: 1;	margin-top: 40px; min-width: 500px;}
#headline3 {position: fixed; left: 50%; transform: translateX(-50%); font-size: 24px; z-index: 10; margin-top: 430px; font-weight: 600;
	min-width: 500px; text-align: center;}
#headline4 {position: fixed; border: 0px solid black; left: 50%; transform: translateX(-50%); font-size: 17px; z-index: 10;
	margin-top: 470px; font-weight: 600; text-align: center; display: flex; justify-content: center; column-gap: 15px;
    flex-wrap: wrap; width: 1072px;}
#headline4 > div {white-space: nowrap;}
#bgImage {border: solid black 1px;}
#smash {position: fixed; margin-top: 150px; left: 50%; transform: translateX(-50%); z-index: 1; border:#000000 0px solid;}
/*#imgSmash {position:absolute; width: auto;	height: 300px; margin-left: -350px; transition: opacity 1s ease; opacity: 1; z-index: 4;}
#imgSmash.hidden {opacity: 0;}
#imgSmash1 {position:absolute; width: auto; height: 270px; margin-left: -480px; margin-bottom: 2vh; transition: opacity 1s ease; opacity: 1; 
	z-index: 4; box-shadow: 0 0 1px 1px #fbf2cb, 0 0 32px 1px #fbf2cb;}
#imgSmash1.hidden {opacity: 0;}
#imgSmash2 {width: auto; height: 270px; margin-left: 0px; margin-bottom: 2vh; transition: opacity 1s ease; opacity: 1; z-index: 4; 
	box-shadow: 0 0 1px 1px #fbf2cb, 0 0 32px 1px #fbf2cb;}
#imgSmash2.hidden {opacity: 0;}*/

#smash img {position: absolute; width: auto; height: 300px; margin-left: -350px; transition: opacity 1s ease; opacity: 1;}

/* Per tutte le immagini successive */
#smash img.normal { width: auto; height: 270px; margin-left: -240px; margin-bottom: 2vh; margin-top: 0.5vh; transition: opacity 1s ease; opacity: 1; 
	z-index: 4; box-shadow: 0 0 8px 1px #ffffff, 0 0 12px 1px #fbf2cb, 0 0 32px 1px #fbf2cb;}
#smash img.hidden {opacity: 0;}


#BtnAdvise{position: fixed;	left: 50%; transform: translateX(-50%);	z-index: 10; margin-top: 520px;}
.glow-btn {background: #ff0000; color: #fff; border: 2px solid #ffd000; border-radius: 8px; padding: 14px 40px; font-size: 18px;
    font-weight: bold; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; box-shadow: 0 0 0px #ffd000;}
.glow-btn:hover {box-shadow: 0 0 1px 1px #ffd000, 0 0 32px 1px #ffd000; border-color: #fff700;}
#linkmedia {position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 10; width: 100%; text-align: center;}

.particle {position: absolute; background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(100, 14, 14, 0.697) 70%);
	border-radius: 50%;	filter: blur(1.5px); opacity: 0.6; animation: float linear forwards;}
@keyframes float {
	from {
		transform: translateY(0) scale(0.8);
		opacity: 0;
	}
	20% { opacity: 0.6; }
	to {
		transform: translateY(-110vh) scale(1.2);
		opacity: 0;
	}
}

#popupEmail{
	display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; 
	border:3px solid #ffd000; border-radius:10px; padding: 14px; z-index:100; color: black; width: 400px; text-align: center;
}
#h2Email{
	font-family: 'Courier New', Courier, monospace;
	font-size: 16px;
	font-weight: 600;
	color:#ff0000;
	line-height: 1.3;
}
#divPrivacyEmail {
	margin-top: 8px; color:black; text-align: left; font-size: 14px;
}
#inputEmail {
	width:388px; padding: 4px; margin-bottom:16px; font-size:20px; border:2px solid #ffd000; border-radius:6px; color: black;}
#btnEmail{ 
	margin-left:12px; background:#eee; color:#222; border:1px solid #ccc; border-radius:6px; padding:10px 18px; cursor:pointer;}
#privacyCheck {	width: 16px; height: 16px; accent-color: #ffd000; border: 2px solid #ccc; border-radius: 4px;
    vertical-align: middle; margin-right: 8px; appearance: auto;}


@media screen and (max-height: 810px) {
	#bgImage {
		border: solid black 1px;
		height: 800px;
		width: auto;
	}

	#headline4 {
		margin-top: 470px;
		font-size: 17px;
		width: 1072px;
	}

	#BtnAdvise{
		margin-top: 536px;
	}

}

@media screen and (max-height: 750px) {
	#logoImg{width: 80%; height: 80%; margin-top: 5px;}

	#bgImage {
		border: solid black 1px;
		height: 700px;
		width: auto;
	}

	#headline1 {			
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 20px;
		font-weight: 600;
		z-index: 1;
		margin-top: 0px;
		width: 900px;
	}

	#headline2 {
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 20px;
		font-weight: 600;
		z-index: 1;
		margin-top: 30px;
		min-width: 500px;
	}

	#headline3 {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24px;
		z-index: 10;
		margin-top: 380px;
		font-weight: 600;
		min-width: 500px;
		text-align: center;
	}

	#headline4 {
		margin-top: 416px;
		font-size: 16px;
		width: 900px;
	}

	#smash {margin-top: 110px;}
	#smash img {width: auto; height: 300px; margin-left: -340px; transition: opacity 1s ease; opacity: 1;}
	#smash img.normal { width: auto; height: 250px; margin-left: -220px; margin-top: 10px;}
	#BtnAdvise{margin-top: 480px;}
	.glow-btn {padding: 12px 40px; font-size: 17px; font-weight: bold; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; 
		box-shadow: 0 0 0px #ffd000;}
}

@media screen and (max-height: 610px) {
	#logoImg{width: 60%; height: 60%; margin-top: 8px; margin-left: 10px;}

	#bgImage {
		border: solid black 1px;
		height: 600px;
		width: auto;
	}

	#headline1 {			
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 18px;
		font-weight: 600;
		z-index: 1;
		margin-top: 0px;
		min-width: 320px;
		max-width: 400px;
	}

	#headline2 {
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 18px;
		font-weight: 600;
		z-index: 1;
		margin-top: 24px;
		min-width: 500px;
	}

	#headline3 {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 22px;
		z-index: 10;
		margin-top: 330px;
		font-weight: 600;
		min-width: 500px;
		text-align: center;
	}

	#headline4 {
		margin-top: 364px;
		font-size: 15px;
	}

	#smash {margin-top: 90px;} 
	#smash img {width: auto; height: 280px; margin-left: -320px; transition: opacity 1s ease; opacity: 1;}
	#smash img.normal { width: auto; height: 210px; margin-left: -190px; margin-top: 15px;}
	#BtnAdvise{margin-top: 480px;}
	.glow-btn {padding: 12px 40px; font-size: 17px; font-weight: bold; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; 
		box-shadow: 0 0 0px #ffd000;}


	#BtnAdvise{
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		margin-top: 420px;
	}

	.glow-btn {
		background: #ff0000;
		color: #fff;
		border: 2px solid #ffd000;
		border-radius: 8px;
		padding: 12px 36px;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		transition: box-shadow 0.2s, border-color 0.2s;
		box-shadow: 0 0 0px #ffd000;
	}
	.glow-btn:hover {
		box-shadow: 0 0 1px 1px #ffd000, 0 0 32px 1px #ffd000;
		border-color: #fff700;
	}
}

@media screen and (max-height: 520px) {
	body{ overflow-y: scroll; }
	#logoImg{width: 50%; height: 50%; margin-top: 8px; margin-left: 10px;}

	#bgImage {
		border: solid black 1px;
		height: 510px;
		width: auto;
	}

	#headline1 {			
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 16px;
		font-weight: 600;
		z-index: 1;
		margin-top: 0px;
		min-width: 320px;
		max-width: 400px;
	}

	#headline2 {
		text-align: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 16px;
		font-weight: 600;
		z-index: 1;
		margin-top: 20px;
		min-width: 500px;
	}

	#headline3 {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 20px;
		z-index: 10;
		margin-top: 280px;
		font-weight: 600;
		min-width: 500px;
		text-align: center;
	}

	#headline4 {
		margin-top: 310px;
		font-size: 15px;
	}

	#smash {margin-top: 60px;} 
	#smash img {width: auto; height: 250px; margin-left: -290px; transition: opacity 1s ease; opacity: 1;}
	#smash img.normal { width: auto; height: 170px; margin-left: -158px; margin-top: 30px;}
	#BtnAdvise{margin-top: 480px;}
	.glow-btn {padding: 12px 40px; font-size: 17px; font-weight: bold; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; 
		box-shadow: 0 0 0px #ffd000;}

	#BtnAdvise{
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		margin-top: 370px;
	}

	.glow-btn {
		background: #ff0000;
		color: #fff;
		border: 2px solid #ffd000;
		border-radius: 8px;
		padding: 10px 34px;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		transition: box-shadow 0.2s, border-color 0.2s;
		box-shadow: 0 0 0px #ffd000;
	}
	.glow-btn:hover {
		box-shadow: 0 0 1px 1px #ffd000, 0 0 32px 1px #ffd000;
		border-color: #fff700;
	}
}