.showOn, .topNav .open{ display: none; }


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

	html,body{  min-width: 260px;  }

	.topNav a{  padding: 0 18px;}
	.header-in .logo img{ max-width: 250px; }


	.menu{ display: none; }

	.header-in, .main-in, .footer-in{ width: auto; margin: 0; padding: 0; position: relative; padding: 0 15px; }
	.HPindex #base{  padding-top: 476px; }
	
	.HPindex .fastmall{right: auto; left: 10px; top: -360px; }

	.lang  { top: 5px;}

	.row{ margin-left: -15px !important ; margin-right: -15px !important ; }
	.row div[class^="col"] { padding-left: 15px !important; padding-right: 15px !important; }
	.row-pad5 div[class^="col"] { padding-left: 5px !important; padding-right: 5px !important; }
	.row-pad10 div[class^="col"] { padding-left: 10px !important; padding-right: 10px !important; }
	.row-pad5{ margin-left: -5px !important ; margin-right: -5px !important ; }
	.row-pad10{ margin-left: -10px !important ; margin-right: -10px !important ; }

	img[src*="wysiwyg_thumbs"]{ width: 100% !important; max-width: 250px; height: auto !important; }
	

	
	.claim{ position: absolute; left: 0; z-index: 1; top: 80px; width: 100%; }
	.claim p{ max-width: 1200px; margin: 0 auto;  color: #0c4da2; font-size: 2em; line-height: 1.4em; padding-left: 290px;}

	
	.prepinac{ top: 295px;}
	.prepinac p{ margin: 0; max-width: 1200px; margin: 0 auto; text-align: center; width: 100%; }
	
	


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


	.footer div[class^="col"]{ padding: 0 15px; float: none; text-align: center !important ; width: 100%; float: none; margin: 3px 0;  }

	#base{ position: relative; padding-top: 220px;}
	.slideShow{ display: none; }
	.HPindex #page{ background: transparent url(../img/bg4.jpg) no-repeat fixed center 0; background-size: 990px auto; min-height: 100%;}
	.HPindex #base{ position: static; z-index: 1; left: 0; top: 0; width: 100%; padding-top: 200px; }
	.fastmall{ position: static; display: none;}
	.header{ background: white; -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1); box-shadow: 0 2px 2px rgba(0,0,0,.1);}
	.header .logo{ padding-bottom: 10px; }
	
	body{ padding-top: 55px; }
	
	.showOn{  display: block; position:  absolute; left: -50px; top: 0; cursor: pointer; text-transform: uppercase; z-index: 1000;  padding: 9px 10px;  margin: 0;  width: 50px; background: #ed1c24; }
	.showOn span{ background: white; display: block; height: 4px; margin: 4px 0; width: 30px;  }

	.topNav{display: block; position:  fixed;  margin: 0; padding: 0; right: -240px; top: 13px; padding-bottom: 13px;  z-index: 1000;  height: 100%; width: 240px; }
	.topNav ul{ display: block; }
	.topNav li{ float: none; margin: 0; padding: 0;}
	.topNav li a{ background: #ed1c24; color: white !important; text-align: left; line-height: 1.2em; padding: 15px 50px 15px 20px; border-bottom: 1px solid rgba(255,255,255,.2); }
	.topNav li a:hover{ background: #c50f19; color: white !important; }
	.topNav ul ul{ position: static;  min-width: 0; padding-top: 0; -webkit-opacity: 1; -moz-opacity:1; opacity: 1;  visibility: visible; border-bottom: 1px solid rgba(255,255,255,.2); }
	.topNav ul ul a{ text-transform: none; font-size: 1em; border: 0; font-size: .9em; padding-left: 30px; background: #c50f19; border: 0;}
	.topNav.rozbal{ right: 0; }
	.topNav.rozbal .showOn{ right: 240px; }
	.topNav,  .showOn{ -webkit-transition: right 0.4s ease-out; -moz-transition: right .4s ease-out; -o-transition: right .4s  ease-out; transition: right .4s ease-out; -webkit-transition-delay: 0; transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; }
	.topNav-in {  overflow: auto; background: #ed1c24;}
	.topNav ul ul{ display: none; }
	.topNav .rozbal>ul{ display: block; }
	.topNav .subex .open:before{ content: "\f107"; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; font-size: 20px; line-height: 48px;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	.topNav .subex .open{color: rgba(255, 255, 255, .7); display: block; position: absolute; z-index: 5; right: 0; top: 0; z-index: 800; cursor: pointer;  width: 50px; text-align: center; line-height: 48px; height: 48px;}
	.topNav .subex .open:hover{  color: rgba(255, 255, 255, 1); }
	.topNav .rozbal.subex>.open:before{ content: "\f106"; }
	.topNav .rozbal>a{  border: 0; background: #c50f19; color: white;  }
	.topNav ul ul:before{ display: none; }
	.topNav ul ul a, .topNav li:hover a, .topNav a.aktivni{ color: white;  text-decoration: none; }
	.topNav li:hover a span, .topNav a.aktivni span{ color: white; border-bottom-color: #ee2e2a;  }
	.topNav a span{ border: 0; }
	.mutace{ padding-right: 50px; }
	.header .logo{ height: 55px; vertical-align: middle; }

}

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

	.col-4{ width: 50%; }
	.col-6, .col-5, .col-7{ width: 100%; float: none; margin: 1.2em 0; }
	.fotbal img{ display: block; margin: 0  auto 0 auto; }
	.rozc .col-4{ width: 33.33%; }

}

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

	body{ font-size: .85em; }
	#base{ position: relative; padding-top: 170px;}
	.col-4, .col-3, .col-5, .col-6, .col-7, .col-2, .col-8{ width: 100%;  margin: 10px auto;   float: none;}
		.rozc .col-4{ width: 100%; }

	.potvrzeni{ top: 10%;  max-width: 280px; margin-left: -140px;}
	.potvrzeni .btn{ float: none !important; display: block; margin: 10px auto; text-align: center; width: auto; }

	table.tab, table.tab tr, table.tab td, table.tab th, tbody{ display: block; width: 100% !important; text-align: left !important; border: 0; background: transparent; }
	thead{ display: none; }
	table.tab tr{ border-bottom: 1px solid #eaeaea; padding: 10px 0; }
	table.tab{ border-top: 1px solid #eaeaea; }
	table.tab td:empty, table.tab th:empty, table.tab tr:empty{ display: none; }
	
	.news h2{ float: none;  margin-bottom: 10px;}
	.archiv{ float: none; clear: left; }
	
	.topNav{top: 4px;}
	.header .logo img{ max-width: 150px; }
	
	
	.fotogaltab{ width: 100%; display: block; }
	.fotogaltab td{ display: block; max-width: 290px; padding: 2px 0; }
	.fotogaltab tr{ display: block;  }
	.fotogaltab img{ display: block; max-width: 288px; max-height: 235px; width: 100%; height: auto;  margin: 0 auto;  }
	.galpic a{  display: block;  }
	.galpic { width: 100%; }
	.galpic td{ display: block; }
	.header .logo img{ height: 35px;  }
	


}