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

@font-face {
			font-family: 'TiltNeon-Regular';
			src: url('/fonts/TiltNeon-Regular.woff2') format('woff2');
			font-weight: normal;
			font-style: normal;

		}
@font-face {
			font-family: 'TiltNeon-Regular-Bold';
			src: url('/fonts/TiltNeon-Regular-Bold.woff2') format('woff2');
			font-weight: normal;
			font-style: normal;

}
@font-face {
			font-family: 'TiltNeon-Regular';
			src: url('/fonts/TiltNeon-Regular.woff2') format('woff2');
			font-weight: normal;
			font-style: normal;

		}

@font-face {
			font-family: 'TiltNeon-Regular-Bold';
			src: url('/fonts/TiltNeon-Regular.woff2') format('woff2');
			font-weight: normal;
			font-style: normal;

		}

		
		/*@-ms-viewport { width:device-width; }
		@media only screen and (min-device-width:800px) { html { overflow:hidden; } }*/
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
		.info {
			position: fixed;
			background-color: rgba(11,87,171,0.85);
			color: #000;
			max-width: 406px;
			top: 17%;
			transform: translateX(-50%);
			left: 50%;
			z-index: 1;
			display: none;
			border-radius: 20px;
			color: #fff;
			padding: 33px 50px 50px; box-sizing: border-box; text-align: center
		}
		.chiudi {
			position: absolute;
			right: 25px; top: 25px;
			cursor: pointer
		}
		#inizio {display: none; max-width: 725px}
#inizio .pulsante {display: none;}
		#inizio p {font-size: 20px; line-height: 20px}
		.iconaabio {width: 83px; height: 96px; margin: 0 auto; margin-top: 9px;}
		.iconabee {width: 112px; height: auto; margin: 0 auto; margin-top: 9px;}
		.iconaselfie {width: 107px; height: auto; margin: 0 auto; margin-top: 9px;}
		.iconamusica {width: 116px; height: auto; margin: 0 auto; margin-top: 9px;}
		.infoabio .iconaabio img {width: 100%; height: auto }
		h2 {font-size:24px; margin: 0; padding: 0; color: #fff; text-align: center; font-family: 'TiltNeon-Regular-Bold', "sans-serif"; font-weight: bold; line-height: 24px;}
		p {color: #fff; font-size: 15px; text-align: center; font-family: 'TiltNeon-Regular', "sans-serif"; font-weight: normal; line-height: 20px;  margin: 0; padding: 0; margin-top: 18px;}
		.pulsante {color: #fff; font-size: 16px; padding: 16px 34px; line-height: 16px; border-radius: 20px; font-family: 'TiltNeon-Regular-Bold', "sans-serif"; font-weight: bold; text-decoration: none; display: inline-block; margin-top: 18px;}
		.pulsanterosso {background-color: #ff1b1b}
		.pulsantearancio {background-color: #f66200}

.moodlist {display: flex;
    width: 95%;
    gap: 17px;
    margin: 27px auto 10px;
    align-items: center;
    align-content: stretch;
    flex-wrap: wrap;}
.mood {position: relative;
    padding-bottom: 22px;
    width: 22%;
    height: 160px;
    display: flex;}
.mood img {width: 100%;
    max-height: 143px;
    object-fit: contain; cursor: pointer}
.mood span {position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;}
.mood.moodselezionato span {color: #ff1b1b; font-weight: bold}

.moodmascotte {position: absolute;     width: 29%;
    top: -5%;
    left: -12%;}
.moodmascotte img {    max-width: 100%;
    height: 120px;
    object-fit: contain;}
	
#iframemusic {
position: fixed;
    top: 5%;
    transform: translateX(-50%);
    left: 50%;
    z-index: 1;
    height: 90%;
    max-width: 725px;
    width: 90%;
	margin: 0; padding: 0;
	display: none
	
}

@media screen and (max-width: 1094px) {
	#inizio {
			max-width: none;
			width: 90%;
			top: 7%;
		}
}


@media screen and (max-width: 768px) {		
		#inizio {
			max-width: none;
			width: 90%;
			top: 7%;
			
		}
		.info {max-width: none;
			width: 90%;
		top: 7%; height: 87%}
	.cont {max-height: 100%;
    overflow: scroll;
    height: 100%;}
}
@media screen and (max-width: 736px) {
	.info {padding: 33px 28px 50px;font-size:15px}
	#inizio p{font-size:15px}
	.mood span { font-size: 15px;}
	.mood {height: 117px;}
	.mood img {max-height: 98px;}
}
@media screen and (max-width: 560px) {
	.mood {width: 47%; height: 74px;}
}
@media screen and (max-width: 414px) {

.moodmascotte {left: -5%;}
}
@media screen and (max-width: 393px) {
	.mood {
    width: 46%;
    height: 55px;
}
}