@font-face {
    font-family: "theminion";
    src: url('../fonts/theminion.otf') format("truetype");
}

@font-face {
    font-family: "Lobster";
    src: url('../fonts/Lobster.otf') format("truetype");
}

#inst_wrap{
	background-color:darkgreen;
	padding:20px;
}

#inst_wrap h4{
	text-shadow:0px 0px 0px black;
}

.buy{
	width:100%;
font-size:20px;
position:absolute;
line-height:40px;
left:0;
top:70;
height:40;
z-index:5;
	background-color:darkorange;
	color:white;
	text-align:center;
	font-weight:400;
}

.buy a{
	color:white;
}

.buy a:hover{
	color:white;
}

nav{
	height:70px;
	background-color:darkgreen;
}



.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;
	color:white;
}

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

}

nav h4 a:hover{
	color:white;
}

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

.btn{
	min-width:300px;
	margin:20px;
}

#turn_row{
	color:white;
	font-size:20px;
	font-family:theminion;
	font-weight:600;
	text-align:center;
	margin:10px auto;
}

.immaginesuggerimento{
	width:130px;
	height:130px;
	margin-top:20px;
	border-radius:100%;
	border:1px solid black;
	box-shadow:2px 2px 2px black;
}

#fineimmagine{
	width:130px;
	height:130px;
	margin-top:20px;
	border-radius:100%;
	border:1px solid black;
	box-shadow:2px 2px 2px black;
}

.less,.more,.settingsitem{
	text-align:center;
}

.definizione{
	font-size:22px;
	text-align:center;
	color:white;
	font-weight:600;
	width:80%;
	margin:20px auto;
	background-color:darkred;
	padding:10px 0px;
	border:1px solid black;
}

#dai_soluzione{
	border:0px solid black;
	border-bottom:1px solid black;
	font-size:16px;
	text-align:center;
}

.soluzione{
	background-color:darkorange;
	color:black;
	font-weight:600;
}
#poor{
	height:200px;
}

#fine_parola{
	color:darkgreen;
}

.modal-title{
	color:black;
	text-shadow:0px 0px 0px black;
}
.lettera{
	display:inline-block;
	width:40px;
	height:50px;
	background-color:white;
	border:2px solid black;
	font-size:30px;
	padding-top:5px;
}

.vincitore{
	text-align:center;
	font-size:30px;
	color:navy;
	line-height:40px;
	margin:10px auto;
}

.vincitore_avatar{
	display:inline-block;
	height:40px;
	width:40px;
}

#fine_partita_immagine{
	height:200px;
}

.player_box{
	width:100%;	height:28px;	
	 background-image:url('../img/128-180.jpg');
	background-repeat:repeat; 
	float:left;
	text-align:center;
	border:4px solid grey;
	box-shadow:2px 2px 2px black;
	opacity:0.5
}

.tasto{
	display:inline-block;
	width:50px;
	height:50px;
	background-color:white;
	color:black;
	line-height:50px;
	text-align:center;
	font-size:30px;
	border:1px solid black;
	cursor:pointer;
	margin:10px;
}

.soluzione{
	min-width:50px;	max-width:150px;	float:right;	margin:0px;	font-size:14px;	line-height:16px;	padding:0px;	height:20px;
}

#tastiera_row{
	text-align:center;
	cursor:pointer;
}

.tasto_vocale{
	background-color:orange;
}
.active_player{
	opacity:1;
	border:4px solid yellow;
}

.game_avatar{
	margin:2;		float:left;
	height:15px;	width: 15px;
	border:1px solid black;
	border-radius:100%;
}

.game_name{		float:left;	
	margin:2px auto;
	font-size:14px;		line-height:16px;
	color:white;
	font-family:theminion;

}

.game_points{
	float:left;		max-width:25%;
	margin:2px 0px 2px 20px;
	background-color:black;
	border:1px solid yellow;
	color:yellow;
	height:16px;
	font-size:14px;
	line-height:16px;		min-width:100px;
}

#parola_row{
	text-align:center;
	margin:40px auto;
	width:70%;
}

.isvocale{
	background-color:orange
}


.lastdetailsitem{
	font-size:24px;
	margin-top:40px;
	color:white;
	font-weight:600;
	text-shadow:2px 2px 2px black;
	font-family:"theminion"
}
.playername{
	    background-color: transparent;
    color: white;
    outline: none;
    border: 0px;
    border-bottom: 1px solid white;
	font-size:35px;
	height:50px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}



.horbody{

}

.verbody{
		background-image:url('../img/verbg.png');
	background-size:cover;
}

h2{
	font-family:"theminion";
	color:white;
	font-weight:600;
	text-shadow:2px 2px 2px black;
}

h4{

	color:white;
	text-shadow:2px 2px 2px black;
}

.martop{
	padding-top:20px;
}

.player{
	cursor:pointer;
	max-width:300px;
	width:calc(24% - 20px);
	margin:10px;
	display:inline-block;
	border-radius:25px;
	border:1px solid black;
}

.lastsettings{
	cursor:pointer;
	max-width:300px;
	width:calc(24% - 20px);
	margin:10px;
	display:inline-block;
	border-radius:25px;
	border:1px solid black;
}

.modalita{
	cursor:pointer;
	max-width:300px;
	width:calc(24% - 20px);
	margin:10px;
	display:inline-block;
	border-radius:25px;
}

.vittoria{
	cursor:pointer;
	max-width:300px;
	width:calc(24% - 20px);
	margin:10px;
	display:inline-block;
	border-radius:25px;
}

.pre_avatar{
	width:60px;
	height:60px;
}

.details_player{
	margin-top:15px;
}

.container{
		padding-top:25px;
}
#gioco{	width:100%;}

.total{	width:100%;	max-width:100%;height:100%;	
	background-size:cover;	 	
	background-image:url('../img/bg.png');	
	position:absolute;	
	top:0;	left:0;} 

@media (min-width: 1024px)
{ 

.page{	width:1024px;	
		
	} 

} 
@media screen and (max-width:400px){ 
.isvocale{
	background-color:orange !important;
}

.martop{
	padding-top:5px;
}
.soluzione{
	min-width:calc(60% - 50px) !important;
	max-width:calc(60% - 50px) !important;
}

#parola_row {
    text-align: center;
    margin: 20px auto;
    width: 100%;

}

.lettera {
    display: inline-block;

    height: 60px;
    background-color: white;
    border: 2px solid black;
    font-size: 30px;
    padding-top: 12px;
}

#tastiera_row{
	margin-bottom:20px;
}
.tasto {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: white;
    color: black;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border: 1px solid black;
    cursor: pointer;
    margin: 5px;
}

.game_avatar{
	margin:5px;
	display:inline-block;
	height:30px;
	border:1px solid black;
	border-radius:100%;
}

.game_name{
	margin:10px auto;
	font-size:18px;
	color:white;
	font-family:theminion;
	display:inline-block;
	line-height:30px;
	display:none;
}

.game_points{
	width: calc(40% - 50px);
	margin:5px;
	background-color:black;
	border:1px solid yellow;
	border-radius:10px;
	color:yellow;
	height:30px;
	font-size:14px;
	line-height:30px;
	display:inline-block;
}

.immaginesuggerimento{
	width:100px;
}
.player_box{
	width:90%;
	 background-image:url('../img/128-180.jpg');
	background-repeat:repeat; 
	float:left;
	text-align:center;
	margin:5px 5%;
	border:1px solid grey;
	box-shadow:2px 2px 2px black;
	opacity:0.5
}

.active_player{
	opacity:1;
	border:4px solid yellow;
}

#players_row{
		position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	margin:5px 0px;
}

.vittoria{
	cursor:pointer;
	max-width:300px;
	width:calc(48% - 20px);
	margin:10px;
	display:inline-block;
	border-radius:5px;
}
body{
	max-width:100%;
	height:100vh;

}


#gioco{
	padding-bottom:240px;
}
.modalita{
	cursor:pointer;
	max-width:300px;
	width:calc(48% - 20px);
	margin:10px;
	display:inline-block;
	border-radius:5px;
}

.lastdetailsitem{
	font-size:14px;
}

.playername{
	height:30px;
	margin: 10px 0px;
	font-size:16px;
}

.player{
	cursor:pointer;
	max-width:300px;
	width:calc(48% - 20px);
	margin:10px;
	display:inline-block;
	box-shadow:2px 2px 2px black;
	border-radius:10px;
	border:1px solid black;
}

.lastsettings{
	cursor:pointer;
	max-width:300px;
	width:calc(48% - 20px);
	margin:10px;
	display:inline-block;
	box-shadow:2px 2px 2px black;
	border-radius:10px;
	border:1px solid black;
}
.pre_avatar{
	width:50px;
	height:50px;
}

.details_player{
	margin:20px;
}

.btn{
	min-width:140px;
	max-width:140px;
	margin:5px;
	font-size:11px;
	min-height:46px;
}

.tasto_vocale{
	background-color:orange;
}


#suggestions_row{
	font-size:16px;
}

.container{
		padding-top:30px;
}

nav{
	height:70px;
}


nav{
	width:100%;	
	background-color:darkgreen;
	position:fixed;
	top:0;
	z-index:10;
	color:white;
	height:40px;
}


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:70px;
	font-size:18px;

}

nav h4 a:hover{
	color:white;
}

nav h4{
	margin:0px 20px 0px 0px;
	float:right;
}.soluzione{	min-height:30px;}
}

@media only screen and (max-width: 1023px) and (min-width: 769px){
	.wrapper,.page{	width:100%;	
		max-width:100%;
	} 

#menuwrapper{
display:none;
}

#logowrapper{
display:block;
margin:0px auto;
}

#mywrapper{
	width:100%;
}


#myheader{
	width:100%;
}

#wrapper-interno,#topwrapper{
	width:100%;
}
}

@media only screen and (max-width: 768px) {
	.wrapper,
	.page{	width:100%;	
	max-width:100%;
		
	} 
#mywrapper{
	width:100%;
}

#myheader{
	width:100%;
}
#menuwrapper{
display:none;
}

}