body {
	font-family: 'open-sans', sans-serif
}
#wrap:after {
	clear: both;
}
#wrap {
	width: 90%;
	margin: 10px auto 0px;
	z-index: 10
}
#timeScore {margin-left: 25%; margin-top:2%; padding:5px; border-radius: 46px; 
-moz-border-radius: 46px; 
-webkit-border-radius: 46px; 
border: 2px solid rgba(4,106,215,1.00); background-color:#fff; width: 50%; text-align:center;}

#activityButtons{margin-left:46%; margin-top:2%;}

#clue {
  width: 80%;
  margin: 10px auto;
  text-align: center;
}

#word {
  text-align: center;
  margin: 20px auto;
  font-size:32px;

}
#clock{
	border: 1px solid rgba(4,106,215,1.00);
	background-color: rgba(112,185,239,1.00);
	padding: 20px;
	width: 55%;
	margin: 0% 20%; 
	
	}
	
#time-out{
	 text-align: center;
  margin: 10px auto;
  font-size:24px;
  color: RED;  
	
	}
#reveal {
  text-align: center;
  margin: 20px auto;
  font-size:32px;
  color: green;  
}


#letters {
  list-style: none;
  display: block;
  
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 0
}

.letter {

  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: #4C7ACD;
  margin: 10px 4px;
  cursor: pointer;
  transition:all 150ms ease;
}

.letter:hover{
	transform:scale(1.5);
}
.incorrect:hover, .correct:hover{
	transform:none;
}

.first-res {
  padding-left: .5em
}

.last-res {
  padding-right: .5em
}

.correct {
  background-color: green
}

.incorrect {
  background-color: red
}

#nextBtn {display:none}




/* Portrait */
@media only screen  and (min-device-width: 768px)  and (max-device-width: 1024px)  and (orientation: portrait)  and (-webkit-min-device-pixel-ratio: 2) {
	#wrap{
		width:90%;
		margin:10px auto;
		
	}
}