@font-face { font-family: Avenir; src: url('AvenirNextLTPro-UltLt.otf'); } 

body{
    background: white;
    font-family: 'Avenir', sans-serif;
	font-size: 17pt;
}

#obsah{
	width: 480px;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#obsah a{
	margin: 0 20px 0 20px;
}

h1 {
    font-size: 20pt;
    text-align: center;
}

h2 {
    font-size: 20pt;
    text-align: center;
}

.responsive {
	width: 40px;
	height: auto;
  }

.center {
	text-align: center;
}

#mapa {
	height: 250px;
	width: 350px;
	text-align: center;
}

iframe { 
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: url(grayscale.svg); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
  }

a:link    {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none;}
a:active  {color: black; text-decoration: none;}
a:hover   {color: red; text-decoration: none}

@media screen and (max-width: 650px) {

	h1 {
	    font-size: 17pt;
	}

	#obsah {
		font-size: 14pt;
		width: 80%;
	}

	#obsah a{
		margin: 0 10px 0 10px;
	}
	.responsive {
		width: 40px;
		height: auto;
	}
	#mapa {
		height: 180px;
		width: 250px;
		text-align: center;
	}
}