*{padding: 0; margin: 0; border: 0;}
body{
  /*background: url(varos.jpg) no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.link_link{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    color: #FFFFFF;  

}
.link_span{
       display: inline-block;
  vertical-align: middle;
  line-height: normal;   
}
.fejlec{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    
}
a{ color: #fff; }
div.clear{ clear:both;}
div#content{
    width: 100%;
    height: 100%;
    background-image: url('pozadie.jpg');
    background: cover;    
}
div#wraper{
	max-width: 800px;
	margin: 20px auto;
    
}
header{
	font-size: 360%;
	text-shadow: 2px 2px 2px #0080FF;
	color: #fff;
}
header span{ color: #848484; }
nav{
	padding: 5px 0;
	margin 20px 0;
	color: #000;
    background-color: #0B610B;
}
nav a{
    margin: 0 10px;
	text-decoration: none;
	font-family: "trebuchet MS";
}
nav a:hover{ text-decoration: underline; }
section{
	width: 558px;
	float: left;
	/*border-right: 2px dotted #c57240;*/
}
section article{ margin: 0 0 0 0;}
section article h1{
    font-style: italic;
	margin: 10px 0 20px 0;
	font-size: 114%;
	color: #E6E6E6;
	text-shadow: 2px 2px 2px #6d2a15;
}
figure{
	padding: 10px;
	background: #fff;
	margin: 20px 0 20px 10px;
    display: table;
}
figure img{ max-width: 100%}
figure figcaption{
	font-style: italic;
	font-size: 80%;
	margin: 6px 0 0 0;
}
.clanok{
    float: right; width: 64%; background-color: #ffffff;
   line-height: height: auto;
    
}
aside{
	width: 200px;
	float: right;
	font-size: 100%;
}
footer{
	width: 800px;
	margin: 30px auto;
	padding: 10px;
	/*background: rgba(129,63,21,0.5);*/
    background-color: #0B610B;
	text-align: center;
}
footer a{ margin: 0 15px;
text-decoration: none;
}
footer a:hover{ text-decoration: underline;}

@media only screen
and (min-width :  480px)
and (max-width : 800px){
 div#wraper{ width: 600px}
header{ font-size: 320%}
section{width: 580px}
aside, footer{ display: none;}

/*aside{ width: 150px; margin-right: 5px;}*/
footer{ width: 510px; display: block;}
/*footer a{ text-decoration: none;}*/ 
footer a:hover{ text-decoration: underline;}
}
@media only screen
and (min-width :  320px)
and (max-width : 480px){
 div#wraper{ width: 400px}
header{ font-size: 220%}
section{width: 400px; border: 0; margin: 0; padding: 0}
aside{ display: none}
footer{ width: 360px;}
figcaption{display: none;}
.clanok{float: left; width: 100%;}
footer a{
text-decoration: none;} 
footer a:hover{ text-decoration: underline;}
}
@media only screen
and (min-width :  240px)
and (max-width : 320px){
 div#wraper{ width: 300px}
header{ font-size: 220%; text-align: center}
section{width: 300px; border: 0; margin: 0; padding: 0}
nav{ text-align: center}
nav a:first-child{ margin: 0 3px}
section{ width: 300px; padding: 0; margin: 0; border: 0}
aside, footer{ display: none;}
figcaption{display: none;}
.clanok{float: left; width: 100%;}
footer a{ text-decoration: none;}
footer a:hover{ text-decoration: underline;}

}
@media only screen
and (min-width :  128px)
and (max-width : 240px){
 div#wraper{ width: 230px}
header{ font-size: 220%; text-align: center}
section{width: 230px; border: 0; margin: 0; padding: 0}
nav{ text-align: center}
nav a:first-child{ margin: 0 1px}
nav a{ margin: 0 1px;}
section{ width: 230px; padding: 0; margin: 0; border: 0}
aside, footer{ display: none;}
footer a{ text-decoration: none;}
footer a:hover{ text-decoration: underline;}

}