@media only screen and (max-width: 400){
	#left_fixed{
	display:none;
	}
}
@media only screen and (max-width: 799px) {
	#recap_wrapper{
	display:none;
}

.ilgioco{
	margin:0px auto;
	border:1px solid black;
}

#center_wrapper{
width:100%;
overflow:scroll;}

	
}


.to_guess_wrapper{
	text-align:center;
	padding:5px 0px;
}

@media only screen and (max-width: 400px) {
	
	.ilgioco{
		float:none;
	}
#img_fine{
	width:100px;
	height:100px;
}
.modal .btn{
	width:80%;
}
#pre_istruzioni h3{
	font-size:12px;
	margin:0px;
}

#pre_istruzioni .btn{
	margin:10px 0px;
}





#save{
	width:150px;
	float:right;
}
.page_title{
	text-align:center;
	font-weight:600;
	margin-bottom:10px;
	font-size:20px;
}

.panel{
	padding:20px 10px;
	background-color:#f7f7f7;
}
.left-button{
	text-align: center;
	cursor:pointer;
	width:33%;
	border-bottom: 3px solid white;
}

.left_button_selected{
	border-bottom:3px solid red;
}

.rigaspiegazione{
	margin:10px 0px;
}
	
#sfondomob{
	background-color:white;
}
.page{
	padding:5px;
	background-color:white;
	border:1px solid lightgrey;
}
nav{
	width:100%;	
	background-color:#0bb1e5;
	position:sticky;
	z-index:10;
	color:white;
	height:40px;
}

.btn{
	width:280px;
	font-size:14px;
	margin:5px;
}
nav h1{
	margin:0px;
	font-size:18px;
	line-height:24px;
	color:white;
	font-weight:600;
}

nav h3{
	margin:0px;
	font-size:14px;
	line-height:16px;
}

nav h4 a{
	color:white;
	line-height:24px;
	font-size:18px;

}

nav h4 a:hover{
	color:white;
}

nav h4{
	margin:0px 20px 0px 0px;
	float:right;
}

.nav_right{
	display:none;
}

#left_fixed{
	display:flex;
	width:100%;
	background-color:#f7f7f7;
	height: 40px;
	justify-content:space-around;
	
}

hr{
	margin:0px;
	width:0px;
	display:inline-block;
}

#time_wrapper, #esatte_wrapper, #errate_wrapper, #omesse_wrapper,#totale_wrapper{
	float:left;
	width:50%;
	font-size:14px;
	height:40px;
	display:flex;
}

#time_wrapper h3, #esatte_wrapper h3, #errate_wrapper h3, #omesse_wrapper h3,#totale_wrapper  h3{
	font-size:14px;
	margin:0px;
}

#done,#lowrefresh,#lowback{
	width:40%;
	height:30px;
	display:inline-block;
}



body{
	padding-bottom:70px;
}
.esatta_super_wrapper{
		width:100%;
		height:30px;
		display:flex;
		justify-content:center;
      text-align:center;
      padding:0px;

}
}


@media only screen and (min-width: 401px) {
	
	h3{
		font-size:16px;
	}
	
.esatta_super_wrapper{
  width:100%;
      text-align:center;
	  height:40px;
}

#left_fixed{
display:none;
}
#game{
	background-color:transparent;
	padding:0px;

}

.ilgioco{
	border:1px solid black;
	margin:0px auto;

}

#center_wrapper{
	float:left;
	width: 100%;
}
#recap_wrapper{
	float:left;
	background-color:#f7f7f7;
	width:180px;
	padding:5px;
	height: calc( 100vh - 70px);
}

#refresh,#back,#done,#lowrefresh,#lowback{
	width:150px;
}

#refresh h5,#back h5,#done h5,#lowrefresh h5,#lowback h5{
	font-size:16px;
	margin:0px;
}


.panel{
	padding:20px 10px;
	background-color:#f7f7f7;
}
.left-button{
	text-align: center;
	cursor:pointer;
	width:33%;
	border-bottom: 3px solid white;
}

.left_button_selected{
	border-bottom:3px solid red;
}
nav{
	height:70px;
	position:sticky;
}



.nav_left{
	float:left;
	margin-left:10px;
	cursor:pointer;
}

nav h1{
	margin:0px;
	font-size:36px;
	line-height:42px;
	color:white;
	font-weight:600;
}

nav h3{
	margin:0px;
	font-size:18px;
	line-height:28px;
}

nav h4 a{
	color:white;
	line-height:28px;
	font-size:18px;

}

nav h4 a:hover{
	color:white;
}

nav h4{
	margin:0px 20px 0px 0px;
	float:right;
}

.btn{
	width:300px;
	margin:20px 10px;
}

.page{
	background-color:white;
	padding:20px;
		border:1px solid lightgrey;
		max-width:970px;
}

.page_title{
	text-align:center;
	font-weight:600;
	font-size:20px;
	line-height:30px;
}

.rigaspiegazione{
	margin-top:20px;
}
	


nav{
	width:100%;	
	background-color:#0bb1e5;
	position:sticky;
	z-index:10;
	color:white;
}

.nav_right{
	float:right;
	margin-right:20px;
}
}
	#left_fixed{
	display:flex;
	width:100%;
	background-color:#f7f7f7;
	height: 40px;
	justify-content:space-around;
	}
	









#done{
  margin-bottom:10px;
}





.prev{
  cursor:pointer;
}

.next{
  cursor:pointer;
}


.mydisabled{
  opacity:0.3;

}

.more{
  cursor:pointer;
}

.less{
  cursor:pointer;
}

.barrarossa{
  border-left:50px solid red;
}

#totale{
  margin-bottom:10px;
}

.myselecteded{
  border:2px solid red;
}



#pre_instructions{
  border-radius:5px;
  margin-bottom:10px;
  background-color:white;
  padding:10px;
}

.imgintro{
  border:2px solid black;
  border-radius:5px;
}