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


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

	html,body{  margin: 0; padding: 0; min-width: 0px; background: White none; }


	.header-in, .main-in, .footer-in{ width: auto;  padding: 0; position: relative; padding: 0 15px; width: 960px; }


	.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: 50%; height: auto !important; }
	
	.rightCol{ width: 200px;}
	.midCol{  width: 730px; padding-right: 30px; }
	
	.article img{ width: 150px;    }

	.tags ul{  width: 25%;}
	.tags ul:nth-of-type(4n+1){ clear: left; }

	.footertags .ftbox {width: 25%;}
	.footertags .ftbox:nth-of-type(4n+1){ clear: left; }
}



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

	.header-in, .main-in, .footer-in{ width: auto;   }
	.marText p, .perex p {margin-left:0px !important;}
	.rightCol{ width: 100%; float: none;}
	.midCol{  width: 100%; padding-right: 0; max-width: 700px; float: none; }

	.footer div[class^="col"]{ padding: 0 15px; float: none; text-align: center !important ; width: 100%; float: none; margin: 3px 0;  }
	.footer .row li{ float: none; display: inline-block; padding: 2px 10px; }
	.footer{  padding-bottom: 15px; }
	.tags{ padding: 15px 0; }
	.tags ul{ width: 25%; }
	.tags ul:nth-of-type(4n+1){ clear: left; }

	.footertags {padding: 15px 0;}
	.footertags .ftbox {width: 25%;}
	.footertags .ftbox:nth-of-type(4n+1){ clear: left; }

	.header .soc{ padding-right: 70px; }
	.header-in .logo{ width: 35%; }

	.header .soc a{ line-height: 50px; }

	.showOn{  display: inline-block; position: absolute; top: 0; left: -60px; vertical-align: middle;   cursor: pointer; text-transform: uppercase; z-index: 1000;  padding: 13px 10px;   width: 60px; background: #1174c1; }
	.showOn span{ background: white; display: block; height: 4px; margin: 4px auto; width: 30px;  }

	.topBar{ display: block; position: fixed; margin: 0; padding: 0; right: -300px; top: 0; padding-bottom: 0; z-index: 20;  width: 300px; height: 100%; min-height: 100%;    }
	.topBar-in{ margin: 0; padding: 0; width: auto; position: static; border: 0; min-height: 100%; overflow: auto; max-height: 100%;  }
	.topNav{ border: 0; min-height: 100%; overflow: auto; position: relative; height: 100%; }
	.topNav ul{ display: block; margin: 0; padding: 0; min-height: 100%; overflow: auto; }
	.topNav li{ float: none; margin: 0; padding: 0; display: block;}
	.topNav li a{ display: block; background: #1174c1; color: white; text-align: left; line-height: 1.25em; font-size: .9em; padding: 14px 40px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.2); }
	.topNav li a:hover{ background: #03B480; color: white; }
	.topNav a span{ display: block; height: auto; vertical-align: middle;  }
	.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: #03B480; border: 0;}
	.topBar.rollOut{ right: 0; }
	/*.topBar.rollOut .showOn{ right: 240px; }*/
	.topBar,  .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 { max-height: 100%;  overflow: auto; background: #1174c1; position: static;}
	.topNav ul ul{ display: none; }
	.topNav .rozbal>ul{ display: block; }
	.topNav ul ul{ -webkit-opacity: 1; -moz-opacity:1; opacity: 1;  visibility: visible; position: static; width: 100%; min-width: 0; }
	.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: 40px; text-align: center; line-height: 54px; height: 54px; border-left: 1px solid rgba(255,255,255,.2);}
	.topNav .subex .open:hover{  color: rgba(255, 255, 255, 1); } 
	.topNav .rozbal.subex>.open:before{ content: "\f106"; }
	.topNav .rozbal>a{  border: 0; background: #03B480; color: white;  }
	.topNav .rozbal .open{ border-bottom: 1px solid rgba(255, 255, 255, .2); }	
	.topNav ul ul:before{ display: none; }
	.topNav ul ul a, .topNav li:hover a, .topNav a.aktivni{ color: white;  text-decoration: none; }
	.topNav ul ul a{ padding: 8px 15px; }
	#base{ overflow: hidden; }
	.respNav{ display: block; }
	.respNav li a{ font-weight: 400; background: #1174c1; }
	
	.topNav .rozbal ul ul{ display: block; background: #03B480; border: 0; padding-left: 10px; }
	.topNav .rozbal ul li:hover a, .topNav .rozbal ul ul a,  .topNav .rozbal ul > a{ background: #03B480; }
	.topNav .rozbal ul ul a span:before{ content: "\f105"; font-family: FontAwesome; margin-right: 5px; display: inline-block;  vertical-align: baseline; }
	
	.rightCol{ width: auto; margin: 0 -5px; padding-top: 15px; border-top: 1px solid #E8E8E8;}
	.boxes .box{ float: left;  width: 25%; padding: 0 5px; max-width: 100%; margin-top: 10px; min-width: 50px; }
	.searchG{ margin-left: 5px;   }
	.boxes .box:nth-of-type(4n+1){ clear: left; }

}

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

	.citat{ display: block; background: #D5EDF9; text-align: center; padding: 5px 10px;    font-size: 16px; }
	.header .citat{ display: none; }
	.onTop{ float: right; display: block; width: 50%; }
	.topCont{ display: block; float: left; width: 50%; padding-top: 5px; }
	.header .soc{ display: block; }

	.header-in .logo img{ display: block; width: auto; max-width: 100%; max-height: 50px;  }
	.header-in .logo a{ display: table-cell; height: 50px; vertical-align: bottom; }
	.header{ position: fixed; left: 0; top: 0; width: 100%; z-index: 100; }
	#base{ padding-top: 55px; }
	.navBar{ display: none; }
	.footer .navBar{ display: block; background: #363436; text-align: center; padding: 10px 0; margin-top: 10px; }	
	.footer .navBar ul a{  font-size: 1em; padding: 5px 10px; line-height: 1.25em; text-decoration: underline; }
	.footer .navBar ul li{ float: none; display: inline-block; padding: 0; margin: 0; }
	.footer{ padding-bottom: 0; }
	
	.tags ul{  width: 50%;}
	.tags ul:nth-of-type(4n+1){ clear: none; }
	.tags ul:nth-of-type(2n+1){ clear: left; }

	.footertags .ftbox {width: 50%;}
	.footertags .ftbox:nth-of-type(4n+1){ clear: none; }
	.footertags .ftbox:nth-of-type(2n+1){ clear: left; }
	
	.subList .row .col-4{ width: 50%; clear: none; float: left; margin: 0 0 30px 0; }	
	.subList .row .col-4:nth-of-type(2n+1){ clear: left; }
	
	.articleFtr div[class^="col"]{ padding: 0 15px; float: none; width: 100%; float: none; margin: 0 0; }
	.articleFtr p{ text-align: left; }
	
	.midCol{ font-size: 1em; line-height: 1.5em; }
	
}

@media screen and (max-width: 650px){
	
	.col-4, .col-6, .col-5, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{ width: 100%; float: none; margin: 10px 0; clear: both; }
	.col-1, .col-2, .col-3{ width: 50%; margin: 10px 0; }
	.row div[class^="col"]:first-child{ margin-top: 0; }
	.row.separated div[class^="col"] { border: 0; margin-left: 0; margin-right: 0; }
	
	.boxes .box{  width: 50%;  }
	.boxes .box:nth-of-type(2n+1){ clear: left; }
	
	

}

@media screen and (max-width: 768px) and (min-width: 471px) {
	p.date { padding-left:170px;}
}

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

	.col-1, .col-2, .col-3{ width: 100%; float: none; margin: 10px 0; clear: both; }
	
	.topBar{ right: -240px;  width: 240px;  }

	.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, .tab tbody,table[border="1"] tbody,	table[border="1"], table[border="1"] tr, table[border="1"] td, table[border="1"] th{ display: block; width: 100% !important; text-align: left !important; border: 0; background: transparent; }
	thead{ display: none; }
	table.tab tr, table[border="1"] tr{ border-bottom: 1px solid #eaeaea; padding: 10px 0; }
	table.tab, table[border="1"]{ border-top: 1px solid #eaeaea; }
	table.tab td:empty, table.tab th:empty, table.tab tr:empty, table[border="1"] td:empty, table[border="1"] th:empty, table[border="1"] tr:empty{ display: none; }
	table.tab tr:nth-of-type(even){ background-color: #F8f8f8;  }

	.help{ position: static;  }
	.help .popup{ position: fixed; left: 2.5%; top: 75px; width: 95%; z-index: 10000; cursor: pointer; }
	.popup .arrow{ display: none; }
	
	.tags ul{  width: 100%; float: none;}

	.footertags .ftbox {width: 100%;float:none}

	.header .soc { padding-right: 55px; }
	.header-in .logo{ padding-right: 0; margin-left: -5px; }
	.subList .row .col-4{ width: 100%; float: none; clear: none; }
	.date{ text-align: left; }
	.navig span{ display: block; line-height: 10px; height: 20px; }
	
	.boxes .box{  width: 100%; float: none  }


	.katalog, .katalog table, .katalog tbody, .katalog tr {display:block}
	.katalog td {padding:0;padding-left:10px;padding-right:10px;width:100%;display:block}
	.katalog td:first-child {border-right:none;padding-left:10px;padding-right:10px}
	.katalog td:nth-child(2) {border-right:none;padding-left:10px;padding-right:10px}
	
	#respalphabet {display:none;}
	#respalphabetsel {display:block;}
}