/* general */
html {
	box-sizing: border-box;
	}

*, *:before, *:after {
	box-sizing: inherit;
	}

body {
	color: #000;
	font-family: 'Roboto', sans-serif;
	font-size: 25px;
	background: #fff;
	padding: 0em;
	margin: 0em;
	}

a {
	color: black;
	}

header .logo  {
	display: inline-block;
	position: absolute;
	margin: 10px 0px 0px 15px;
	width: 283px;
	height: 90px;
	top: 0px;
	left: 0px;
	}



header .nadpis {
	margin-top: 63px;
	text-align: center;
	font-family: 'Roboto-MediumItalic';
	font-size: 35px;
	font-weight: normal;
	text-decoration: underline #FFED00;
	}

	header .nadpis span {
		display: none;
		}

	@media ( max-width: 1380px ) {
		header .nadpis {
			margin-top: 150px;
			padding-right: 50px;
			padding-left: 50px;
			}
		}


header .testovaci-provoz {
	display: inline-block;
	position: absolute;
	top: 0px;
	right: 0px;
	}

	@media ( max-width: 525px ) {
		header .testovaci-provoz {
			display: none;
			}

		header .nadpis span {
			display: block;
			font-size: 30px;
			background: #FFDA00;
			color: #000;
			margin-bottom: 20px;
			}
		}

main {
	margin-top: 50px;
	display: flex;
	flex-flow: row wrap;
	}

main > * {
	flex: 1;
	}

	.mapa,
	.seznam,
	.hlidaci-pes {
		position: relative;
		text-align: center;
		}

	.mapa .image,
	.seznam .image,
	.hlidaci-pes .image {
		width: 215px;
		height: 215px;
		position: relative;
		left: 50%;
		margin-top: 50px;
		margin-bottom: 50px;
		}

	.mapa .image span,
	.seznam .image span,
	.hlidaci-pes .image span {
		margin-top: 240px;
		position: absolute;
		}

	.mapa {
		order: 1;
		}

		.mapa .image {
			background: url("../img/mapa.png") no-repeat center;
			margin-left: -107px;
			}

		.mapa .image span {
			margin-left: -33px;
			}

		.mapa .image:hover {
			background: url("../img/mapa_hover.png") no-repeat center;
			cursor: pointer;
			}

	.seznam {
		order: 2;
		}

		.seznam .image {
			background: url("../img/seznam.png") no-repeat center;
			margin-left: -107px;
			}

		.seznam .image span {
			margin-left: -80px;
			}

		.seznam .image:hover {
			background: url("../img/seznam_hover.png") no-repeat center;
			cursor: pointer;
			}

	.hlidaci-pes {
		order: 3;
		}

		.hlidaci-pes .image {
			/*opacity: 0.2;*/
			background: url("../img/hlidaci_pes.png") no-repeat center;
			margin-left: -107px;
			}

		.hlidaci-pes .image span {
			margin-left: -60px;
			}

		.hlidaci-pes p {
			font-style: italic;
			font-size: 16px;
			padding-top: 10px;
			color: #000;
		}

		.hlidaci-pes .image:hover {
			background: url("../img/hlidaci_pes_hover.png") no-repeat center;
			cursor: pointer;
			}

footer {
	display: flex;
	flex-flow: row wrap;
	}

footer > * {
	flex: 1;
	}

	.navod,
	.dotazy {
		position: relative;
		text-align: center;
		}

	.navod .image,
	.dotazy .image {
		width: 104px;
		height: 104px;
		position: relative;
		text-align: center;
		left: 50%;
		margin-top: 70px;
		margin-bottom: 50px;
		}

	.navod .image span {
		margin-top: 38px;
		margin-left: 70px;
		position: absolute;
		}

	.navod {
		order: 1;
		}

		.navod .image {
			background: url("../img/navod.png") no-repeat center;
			margin-left: -102px;
			}

		.navod .image:hover {
			background: url("../img/navod_hover.png") no-repeat center;
			cursor: pointer;
			}

	.uzitecne-odkazy {
		order: 2;
		text-align: center;
		}

		.uzitecne-odkazy .image {
			width: 124px;
			height: 124px;
			background: url("../img/uzitecne_odkazy.svg") no-repeat center;
			margin-left: -102px;
			position: relative;
			text-align: center;
			left: 50%;
			margin-top: 62px;
			margin-bottom: 50px;
			}

		.uzitecne-odkazy .image:hover {
			background: url("../img/uzitecne_odkazy_hover.svg") no-repeat center;
			cursor: pointer;
			}

		.uzitecne-odkazy .image span {
			margin-top: 32px;
			margin-left: 83px;
			position: absolute;
			}

	.dotazy {
		order: 3;
		}

		.dotazy .image {
			background: url("../img/dotazy.png") no-repeat center;
			margin-left: -102px;
			}

		.dotazy .image:hover {
			background: url("../img/dotazy_hover.png") no-repeat center;
			cursor: pointer;
			}

		.dotazy .image span {
			margin-top: 0px;
			font-size: 13px;
			margin-left: 60px;
			position: absolute;
			text-align: left;
			}

#uzitecne-odkazy .container {
	margin: 0 auto;
	max-width: 1150px;
	background: #f6f6f6;
	height: 100%;
	}

#logo-prahy {
	margin: 10px 30px 0;
	height: 50px;
	}

#uzitecne-odkazy h4 {
	padding-top: 10px;
	padding-left: 30px;
	margin: 0px;
	}

#uzitecne-odkazy li {
	font-size: 16px;
	margin: 10px;
	}

#uzitecne-odkazy li span {
	margin-left: 30px;
	}

#uzitecne-odkazy li a:hover {
	color: #ffda00;
	}

@media screen\0 {

	.mapa .image span {
		margin-left: 80px;
		}

	.seznam .image span {
		margin-left: 30px;
		}

	.hlidaci-pes .image span {
		margin-left: 50px;
		}

	.navod .image span,
	.dotazy .image span {
		margin-left: 120px;
		}

	.uzitecne-odkazy .image span {
		margin-left: 140px;
		}
	}


@media ( max-width: 1000px ) {

	.mapa {
		order: 1;
		flex: 1 100%;
		}

	.seznam {
		order: 2;
		flex: 1 100%;
		}

	.hlidaci-pes {
		order: 3;
		flex: 1 100%;
		}

	.navod {
		order: 1;
		flex: 1 100%;
		}

	.uzitecne-odkazy {
		order: 2;
		flex: 1 100%;
		}

	.dotazy {
		order: 3;
		flex: 1 100%;
		}
}

/*login*/

.pswrd {
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999;
	position: absolute;
	}

#sorry {
    display: none;
    font-size: 18px;
    margin-top: 15px;
	}

.pswrd #login {
	text-align: center;
	position: absolute;
  	margin: auto;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	width: 450px;
  	height: 152px;
  	background-color: lightgrey;
  	border-radius: 3px;
	}

.pswrd #login form {
	vertical-align: middle;
	font-size: 20px;
	}

.pswrd #login span {
	padding: 5px;
	font-size: 18px;
	}

.pswrd #login #my_button {
	width: 100px;
	font-size: 15px;
	}