*{
	margin:0;padding:0;box-sizing: border-box;
	font-family: 'Nunito', sans-serif;
}

body{

	background-color: #303030;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23c6c6c6' fill-opacity='0.25' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

h1,h2,h3,h4{
	font-family: 'Oswald', sans-serif;
	color: cyan;
}
#teclat{
	
	display: grid;
	grid-template-rows: 25% 25% 25%;
	grid-template-columns: 33% 33% 33%;
    align-items: center;
    justify-content: center;
}
.num{
	flex: 1 1 30%; /*grow | shrink | basis */
	height: 15vh;
	color: #fff;
	background-color: #303030;
	background-image: linear-gradient(#444, #222); 
	border-radius: 10px;
	border: 2px solid #222;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
	margin: 5px;
	text-align: center;
	font-size: 7vh;
	display: grid;
	place-items: center;
}
.num:active{
	background-image: linear-gradient(#333, #111);
	box-shadow: inset 3px 3px 5px rgba(0,0,0,0.3);
}
.borra, .entrar {
	font-size: 3vh;
}
.borra {
	background-image: linear-gradient(#a34e4e, #3c1919);
}
.entrar {
	background-image: linear-gradient(#9cd79c, #182418);
}



#pantalla{
	display: block;
	font-size: 7vh;
	text-align: center;
	height: 10vh;
	border: 2px solid #222;
	border-radius: 5px;
	margin: 10px;
	background: repeating-linear-gradient( #a4bba4, #a4bba4 1px, #9ead9e 1px, #9ead9e 2px);
	box-shadow: inset 3px 3px 5px rgba(0,0,0,0.3);
}

#idiomes{
	display: grid;
	grid-template-columns: auto auto auto auto;
	text-align: center;
}
.idioma{
	padding: 10px;
	color: #fff;
	background-color: #303030;
	background-image: linear-gradient(#444, #222); 
	border-radius: 10px;
	border: 2px solid #222;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
	margin: 5px;
	text-align: center;
}

.selected{
	background-image: linear-gradient(#9cd79c, #182418);
}
#info{
	position: fixed;
	top:0; left:0;
	width: 100%;
	background: #222;
	height: 100%;
	display: none;
}
audio{
	width: 100%;
	position: absolute;
	left:0; bottom:0;
}
#POI{
	position: absolute;
	width: 100%;
	height: 80%;
	top: 70px;
	border:none;
	bottom: 10%;
	overflow-y: auto;
}

#info button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  position: fixed;
  top:8px;
  right: 8px;
  font-size: 16px;
}
#info #button2{
	background-color: #f2db10;
	right: 90px;
}