@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
		}

#start {position: fixed; bottom: 17%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%;z-index: 1; background-color: #f66200; font-family: 'TiltNeon-Regular-Bold', "sans-serif"; font-weight: bold; font-size: 23px; padding: 29px 90px; border-radius: 48px; cursor: pointer;-webkit-box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.45); box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.45);}
.risultato {position: fixed; top: 17%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%;z-index: -1; background-color: #fff; color: #000; padding: 20px}

.conttimer {position: relative;}

.menusinistra {position: fixed; left: 26px; bottom: 35px; z-index: 1; display: flex; column-gap: 16px;}
.menusinistra.menustop {left: auto; right: 26px;}
.menusinistra div {font-family: 'TiltNeon-Regular-Bold', "sans-serif"; font-weight: bold; font-size: 18px; background-color: rgba(0,0,0,0.4); color: #fff; padding: 15px 26px; border-radius: 30px; cursor: pointer; line-height: 30px;}
.menusinistra div.informazioni {font-size: 32px; padding: 15px 22.5px;}
.menusinistra div.indietro {display: flex;    align-items: center; column-gap: 10px;     padding: 15px 18px;}
.menusinistra div.stop {display: none; padding: 15px 35px;}
.menudestra {position: fixed; right: 0; top: 28px; z-index: 1; display: flex; background-color: rgba(0,0,0,0.4); padding: 4px 28px 4px 50px; column-gap: 20px; border-bottom-left-radius: 43px; border-top-left-radius: 43px;}
.menudestra h6 {color: #fff; font-family: 'TiltNeon-Regular-Bold', "sans-serif"; font-weight: bold; font-size: 15px; display: block; margin: 0; padding: 0}
.flexpunti {display: flex; column-gap: 26px;}
.flexpunti img {margin-right: 10px; vertical-align: middle}
.menudestra .punti, .menudestra .tempo {border-right: 1px solid #fff; padding-right: 20px}
.menudestra .tempo {padding-right: 40px;}
.menudestra.punteggio {
    position: fixed;
    right: 0;
    top: 111px;
    z-index: 1;
    display: flex;
    background-color: rgba(0,0,0,0.4);
    padding: 4px 28px 4px 28px;
    column-gap: 33px;
    border-bottom-left-radius: 13px;
    border-top-left-radius: 13px;
    font-size: 15px;
}

.final {position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background-color: rgba(0,80,161,0.9); width: 48%; height: auto; border-radius: 60px; left: 50%; top: 50%; padding: 50px; display: none}
.final.nobgpadding {padding: 0; background-color: transparent}
.final h5 {margin: 0; padding: 0; font-family: 'TiltNeon-Regular', "sans-serif"; text-align: center; font-weight: 400; font-size: 43px; line-height: 43px; margin-bottom: 10px;}
.final h5 span {font-family: 'TiltNeon-Regular-Bold', "sans-serif"; font-weight: bold; color: #ffe501}
.final img {display: block; margin: 0 auto; margin-bottom: 20px; width: 53%;  height: auto;}
.final .bottoni {display: flex; column-gap: 30px; justify-content: center; opacity: 0}
.final .bottoni div {background-color: #f66200; font-family: 'TiltNeon-Regular-Bold', "sans-serif"; font-weight: bold; font-size: 23px; padding: 21px 70px; border-radius: 40px; cursor: pointer;}
.final .wrap {width: 100%}

#inizio {display: block; max-width: 725px; z-index: 2}
#inizio p {font-size: 20px; line-height: 20px}
.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
		}

@media screen and (max-width: 1250px) {
	.final .bottoni div { font-size: 17px;  padding: 14px 54px;}
	.final h5 {font-size: 30px; line-height: 30px}
}

@media screen and (max-width: 1000px) {
	#inizio {width: 90%; max-width: none; padding: 15px 25px 20px}
}

@media screen and (max-width: 768px) {
	.menusinistra {left: 15px; column-gap: 10px}
	.menusinistra div {font-size: 14px;}
	.menudestra {column-gap: 10px; padding: 4px 17px 4px 40px}
	.menudestra.punteggio {column-gap: 10px; padding: 4px 17px 4px 17px}
	.menudestra .punti, .menudestra .tempo {padding-right: 10px}
	.menusinistra div.informazioni {font-size: 26px; padding: 15px 24px;}
	.final {width: 75%}
	.final h5 {font-size: 25px; line-height: 25px}
	
}

@media screen and (max-width: 736px) {
	#start {padding: 23px 69px; font-size: 16px}
	.flexpunti img {max-height: 37px; width: auto;}
	.final img {max-height: 130px;    width: auto;}
	.final {padding: 30px}
.cont {max-height: 100%;
    overflow: scroll;
    height: 100%;}
	#inizio {height: 75%}
	
	
}
@media screen and (max-width: 667px) {
	.menudestra h6 {font-size: 12px}
	.conttimer p {margin: 10px 0}
	.menusinistra {zoom:0.8}
	.menudestra {zoom:0.9}
	.menudestra.punteggio {zoom:0.9}
	.final .bottoni div { font-size: 12px;  padding: 12px 25px;}
}
@media screen and (max-width: 536px) {
	.menudestra {top:0px; border-radius: 0; width: 100%; box-sizing: border-box; justify-content: center; padding: 4px 17px }
	.menudestra.punteggio {top:64px; border-radius: 0; width: 100%; box-sizing: border-box; justify-content: center; padding: 4px 17px }
	#inizio {top: 127px; padding: 15px 25px 20px}
	#start {bottom: 117px; text-wrap:nowrap}
}
@media screen and (max-width: 390px) {
	.menudestra {padding: 4px 7px}
	.menudestra.punteggio {padding: 4px 7px}

}
@media screen and (max-height: 390px) {
	
	.final {height: 75%}
}