#myheader{
	width:1024px;
	height:80px;
	margin:0px auto;
	border-bottom:1px solid lightgrey;
}

#logo{
	width:151px; 
	height:46px;
	margin:15px 22px;
}

#menuwrapper{
float:right;
height:80px;
display:inline-block;
}

#logowrapper{
	display:inline-block;
}

#titlebg{
background: rgb(12,104,149);
background: linear-gradient(90deg, rgba(12,104,149,1) 0%, rgba(12,104,149,1) 0%, rgba(77,183,224,1) 100%);	
max-width: 1024px;
height: 80px;
}

h1{
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 80px;
color: #0C6895;
margin:0px 0px 0px 40px;
color:white;
font-family: Poppins;

}

h3{
font-family: Poppins;
font-size: 26px;
font-weight: 700;
line-height: 60px;
letter-spacing: 0em;
text-align: left;
color:#0C6895;
text-align:left;
margin:0px 0px 0px 40px;
}

#menuwrapper ul li{
	display:inline-block;
	line-height:80px;
	margin:0px 25px;
	font-family: Poppins;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0em;
	text-align: left;
	color:#424242;
}

#menuwrapper ul li:hover{
	text-decoration:underline;
}


#contenitore{
	max-width:1024px;
	margin:0px auto;
}

body{
	font-family:Poppins;
}

.fullflex{
	width:100%;
	display:flex;
}

.halfflex{
	width:50%;
	padding:20px;
}

.screen{
	padding:20px;
}


.newbutton{
width: 258px;
height: 50px;
background-color:#0C6895;
color:white;
border-radius:100px;
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 50px;
text-align: center;
margin:30px auto;
cursor:pointer;
}

.fullflexkey{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

.pulsante{
background-color:#0C6895;
color:white;
margin:10px;
width:50px;
height:50px;
cursor:pointer;
line-height:50px;
text-align:center;
font-weight: 600;
font-size:32px;
border-radius:10px;
}

.cancella{
background-color:darkred;
color:white;
margin:10px;
width:50px;
height:50px;
cursor:pointer;
line-height:50px;
text-align:center;
font-weight: 600;
font-size:32px;
border-radius:10px;
}

.ok{
background-color:darkgreen;
color:white;
margin:10px;
width:50px;
height:50px;
cursor:pointer;
line-height:50px;
text-align:center;
font-weight: 600;
font-size:32px;
border-radius:10px;
}

#gioco{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	align-items:center;
}

.flexbuttons{
	width:100%;
	margin:10px auto;
	display:flex;
	justify-content:center;
}

#flexspeed, #flexspan{
	width:100%;
	margin:10px auto;
	display:flex;
	justify-content:center;
}

#feedbackwrapper{
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	justify-content:center;
}

#feedbackwrapper h3{
text-align:center;	
margin:0px;
font-weight: 400;
}

#pre h3{
text-align:center;	
margin:0px;
font-weight: 400;
}

@media (min-width: 768px) and (max-width: 991px) {
/* Tablet */
#mywrapper{
	width:100%;
}

#myheader{
	width:100%;

}
.mycard-title,.mycard-btn{
	width:100%;
}
#menuwrapper{
display:none;
}
}


@media (max-width: 767px) {
/* Mobile */

.newbutton{
margin:10px auto;	
}

#flexspeed, #flexspan{
	flex-direction:column;
}

.pulsante, .cancella, .ok{
width:50px;
height:50px;
line-height:50px;
font-size:32px;
}
h1{
	margin:0px;

}

#titlebg{
	text-align:center;
}

#logowrapper{
	text-align:center;
		text-align:center;
}

#mywrapper{
	width:100%;
}

#myheader{
	width:100%;
	text-align:center;
}
.mycard-title,.mycard-btn{
	width:100%;
}
#menuwrapper{
display:none;
}
.halfflex{
	width:100%;
}

.fullflex{
	flex-direction:column;
}
}






.myselect{
	text-align:center;
	font-weight:bold;
	width:100%;
	padding:10px;
}

.mycheck{
	width:30px;
	height:30px;
	float:right;
	margin-top:15px;
}




#ds_speaker{
	width:150px;
	height:150px;
	margin:30px auto;
	cursor:pointer;
}

.answer{
	border:1px solid black;
	border-radius:10px;
	box-shadow:2px 2px 2px black;
	font-size:100px;
	text-align:center;
	cursor:pointer;
	margin:10px;
	min-height:200px;
	line-height:200px;
}

#ds_progress{
	margin-top:20px;
	font-size:20px;
}

.riga{
	padding:15px;
}


.right{
	background-color:green;
}

.wrong{
	background-color:yellow;
}

.hover{
	background-color:lightblue;
}

.feedback h1{
	font-size:150px;
	color:darkgreen;
}

#ds_torna{
	padding:10px;
	min-width:200px;
	margin-top:30px;
}

.risposta{
	font-size:30px;
	text-align:center;
	display:inline-block;
	margin:10px;
}




body{
background-color:white;
}

#cerchione_wrapper{
	width:300px;
	height:300px;
	
	margin:0px auto;
}
#cerchione{
	display:inline-block;
	margin:25px;
	width:250px;
	height:250px;
	font-size:100px;
	text-align:center;
	line-height:250px;
	border:1px solid lightgrey;
	box-shadow:0px 0px 20px 7px lightgrey;
	border-radius:100%;
}