/* ---- Telo ---- */
body{
	background:#F2F2F2;
	color:#5B5B5B;
	margin:0px;
	font-family: Sans-Serif;
	}
	
a {
    color: white;
	text-decoration: none;
}	

.obsahbloku{
	padding: 20px;	
	}	
	
.zaoblene{
	border-radius: 10px;	
	}
	
.napravo{
	float:right;
	right:10px;
	}
	
.tucne{
	font-weight: bold;
	}		

/* ---- Varování ---- */	
	
.panel{
	width:100%;
	z-index:2;
	padding-top:0px;

	}
	
.panel-obsah{
	padding:20px;
	}	
	
/* ---- Text ---- */
h1{
	font-size: 40px;
	}
	
h2{
	font-size: 30px;
	}
	
h3{
	font-size: 20px;
	}

h4{
	font-size: 15px;
	}	
	
p{
	text-align:justify;
	margin-top:10px;
	}

/* ---- Tlačítka ---- */	

button{
	border:none;
	padding:10px;
	}
	
.button{
	border:none;
	padding:10px;
	}
	
/* ---- Barvy ---- */	

.bila{
	background:white;
	color:#5b5b5b;
	}

.tmavemodra{
	background:#363785;
	color:#fff;
	}

.modra{
	background:#2873B9;
	color:#fff;
	}

.seda{
	background:#F2F2F2;
	color:#5B5B5B;
	}
	
.svetlezelena{
	background:#B2CF7F;
	color:#fff;
	}
	
.zelena{
	background:#8AB839;
	color:#fff;
	}
	
.cervena{
	background:#E85F4A;
	color:#fff;
	}
	
.tmavecervena{
	background:#BA5445;
	color:#fff;
	}		

/* ---- Barvy - Hover ---- */	

.bila-hover:hover{
	background:#5b5b5b;
	color:#fff;
	}	

.tmavemodra-hover:hover{
	background:#303266;
	color:#fff;
	}
	
.modra-hover:hover{
	background:#363785;
	color:#fff;
	}		

.zelena-hover:hover{
	background:#B2CF7F;
	color:#fff;
	}
	
.svetlezelena-hover:hover{
	background:#8AB839;
	color:#fff;
	}

.cervena-hover:hover{
	background:#BA5445;
	color:#fff;
	}

.tmavecervena-hover:hover{
	background:#E85F4A;
	color:#fff;
	}	
	
/* ---- menu ----*/
.panelblok{
	padding:8px 16px;
	float:left;
	width:auto;
	border:none;
	display:block;
	outline:0
	}

.menubutton{
	min-width:150px;
	border:none;
	padding:10px;
	text-decoration:none;
	display:block;
	}
	
.submenu-hover{
	position:relative;
	display:inline-block;
	cursor:pointer
	}
	
.submenu-hover:hover .submenu-obsah{
	display:block
	}
	
.submenu-hover:first-child,.w3-dropdown-click:hover{
	background-color:#ccc;
	color:#000
	}
	
.submenu-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{
	background-color:#ccc;
	color:#000
	}

.submenu-obsah{
	cursor:auto;
	color:#000;
	display:none;
	position:absolute;
	min-width:160px;
	margin:0;
	padding:0;
	z-index:1
	}
	
	
/* ---- Responzivita ----*/
@viewport {
  width: device-width;
  initial-scale:1.0;
}	

/* Velký display */
@media only screen and (min-width: 800px) {

.pouzemale{
	display:none;
	}
	
.tretina{
	width:33.4%;
	float:left;
	}

.tretina~.tretina{
	width:33.3%;
}
	
.polovina{
	width:50%;
	float:left;
	}
	
.obsah{
	margin-left:20%;
	margin-right:20%;
	}
	
/* Popup okno velké */
.popup{
	z-index:3;
	display:none;
	padding-top:100px;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.4)
	}
	
.popup-obsah{
	border-radius: 10px;
	margin:auto;
	position:relative;
	padding:0;
	outline:0;
	width:700px;
	padding:20px;
	}
	
}

/* Malý display */
@media only screen and (max-width: 800px) {

.pouzevelke{
	display:none;
	}

.tretina{
	width:100%;
	}		

.polovina{
	width:100%;
	}	
	
.obsah{
	margin-left:5%;
	margin-right:5%;
	}
	
/* Popup okno malé */
.popup{
	z-index:3;
	display:none;
	padding-top:50px;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.4)
	}
	
.popup-obsah{
	border-radius: 10px;
	margin:auto;
	position:relative;
	padding:0;
	outline:0;
	width:80%;
	padding:20px;
	}
	
}

/* Animace */	
.zleva{
	position:relative;
	animation:animateleft 0.8s
	}@keyframes animateleft{
		from{left:-300px;opacity:0} 
		to{left:0;opacity:1}
	}
	
.zprava{
	position:relative;
	animation:animateright 0.8s
	}@keyframes animateright{
		from{right:-300px;opacity:0} 
		to{right:0;opacity:1}
	}