@charset "utf-8";
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
	-moz-box-sizing: border-box

}
body {
	_font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	_font: 13px Arial, Helvetica, sans-serif;
	_font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	 font-family: 'Open Sans',sans-serif;
	background-color: #F8F8F8;
	margin: 0;
	padding: 0;
	color: #222;
	font-size:14px;
	line-height:1.3;
	min-width:1000px;
	box-sizing:border-box;
	
	
}
#main{
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
}
a{
outline: 0px none;
	color: #00467f

}

#header-top {
	height: 35px;
     border-bottom: 1px solid #E6E6E7;
     padding-top: 10px;
     color: #7E8083;

}
#header-main {
    height: 115px;
    border-bottom: 5px solid rgba(0, 70, 127, 0.4);
    background-color: #FFF;
}
show-case {
	background-size: 100% auto;
background-position: 0px 0px;
color: #222;
height: 400px;
overflow: hidden;
transition: all 2000ms ease 0s;
}
#showcase.short {
    height: 220px !important;
}
.grey-bg {
	background-color: #F8F8F8;
}

.separator.green {
    background-color: rgba(0, 108, 179, 0.4);
}
.separator.gray {
    background-color: #BFC0C1;
}
.separator.blue {
    background-color: rgba(0, 70, 127, 0.4);
}
.separator {
    text-align: center;
    height: 5px;
}
.content:nth-child(4n+2), .pagination {
    background-color: #FFF !important;
}
.content {
    padding: 10px 0px 80px;
    background-color: #FFF !important;
}
.wrapper > div {
    margin: 0px auto;
    position: relative;
}

.wrapper > div > span,.wrapper > div > div > span {
    margin: auto 20px;
    position: relative;
}

.wrapper > div.left {
	width: 75%;
	line-height: 1.6em;
	display: inline-block;
}
.wrapper > div.right {
	width: 25%;
	border-left: 1px solid #C6C6C6;
	border-collapse: collapse;
	height:auto;
	padding:5px;
	display: inline-block;
}

.clear {
    clear: both;
}
.float-left {
    float: left;
	position: relative;
}
.float-right {
    float: right;
}

h4 {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
}
.col-5 {
    width: 20%;
    padding: 5px 20px;
    border-right: 1px solid #E6E6E7;
}
.logo {
    padding: 0px 0px;
    border: 0px none;
}
.logo-text {
    padding: 0px 0px;
    border: 0px none;
    font-size: 22px;
    font-weight: 500;
    position:absolute;
    top:60px;
    left:510px;
   	color: #00467f;
    text-shadow: 2px 2px 2px #aaaaaa ;
    
    
}

a {
    outline: 0px none;
    color: #00467F;
}
td {padding:2px;
text-align:center;
 border-style:solid; 
 border-width:1px;
  border-color:silver;
}
th { padding:2px;
text-align:center;
 border-style:solid;
  border-width:1px; 
  border-color:silver;
 font-weight:bold;
 
}
.tbl-adr{
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2), 2px 2px 4px rgba(0,0,255,0.2);

}

/* navigation*/
#nav {
	font-size: 14px;
	float: right;
	list-style: none;
	position: relative;
	top: 5px;
	z-index: 10
	text-align:left;
}
#nav li {
	display: inline-block
}
#nav li:hover>.flyout {
	display: block;
	height: auto;
	z-index: 1000;
	position: absolute;
}
#nav  li:hover > a {
    color: rgba(0, 70, 127, 0.7);
    border-bottom: 5px solid rgba(0, 70, 127, 0.7);
}
#nav  a {
    display: inline-block;
    text-decoration: none;
    color: #444;
    border-bottom: 5px solid rgba(255, 255, 255, 0);
    padding: 39px 10px 25px;
    font-weight: 700;
   -moz-transition: all 250ms ease;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease
}
#nav li {
    display: inline-block;
}
#nav > li.submenu > a:after {
	font-family: 'FontAwesome';
	font-weight: 400;
	margin-left: 10px;
	content:'\f0d7';

}
#nav > li.fb-ico > a:before {
	font-family: 'FontAwesome';
	font-weight: 400;
	margin-left: 10px;
	content:'\f09a';
	color:rgba(0, 70, 127, 0.9);
}
#nav > li.home-ico > a:before {
	font-family: 'FontAwesome';
	font-weight: 400;
	margin-right: 3px;
	content:'\f015';
	
}
#nav > li.shop-ico > a:before {
	font-family: 'FontAwesome';
	font-weight: 400;
	margin-right: 3px;
	content:'\f07a';
	
}
#nav > li.phone-ico > a:before {
	font-family: 'FontAwesome';
	font-weight: 400;
	margin-right: 3px;
	content:'\f095';
	
}



/* nav 2*/

#nav2 {
  width: 750px;
  clear: both;
  height: 30px;
  background: transparent url('img/nav-bg.png') 0 0 repeat-x;
}

#nav2 ul {
  margin: 0;
  padding: 0;
  height: 30px;
  list-style-type: none;
}

#nav2 ul li {
  background: transparent url('img/nav-border.png') 0 0 no-repeat;
  color: #eee;
  float: left;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  display: block;
  margin: 0;
  padding: 0;
}

#nav2 ul li a {
  color: #eee;
  text-decoration: none;
  font-size: 14px;
  line-height: 30px;
  display: block;
  padding: 0 12px;
}

 #nav2 ul li a:hover  {
  _background: transparent url('img/nav-act-bg2.png') 0 0 no-repeat;
  
  color:  #ff8844;
  background-color:0030AA;
  background: none;
   -moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease
   
}
#nav2 ul li.current a{
  background: transparent url('img/nav-act-bg-bluetm2.png') 0 0 no-repeat;

  color:  #ff8844;
 border-bottom: 2px solid #ff0000 !important;
 text-shadow: 0px 0px 10px #FDFEF5 ;
   -moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease
   
}

/* ---------------- ----------------- nav 2 end */
.current-page {
    border-bottom: 5px solid #00467F !important;
    color: #00467F !important;
}

.flyout {
	position: absolute;
	min-width: 200px;
	height: 0;
	display: none;
	border-radius: 0 0 3px 3px;
	padding-bottom: 5px;
	margin:-3px;
  opacity: .9;
	overflow: hidden;
	-moz-transition: height 2s ease;
	-webkit-transition: height 2s ease;
	transition: height 2s ease;
 
}
.flyout li {
	display: block!important;
	text-wrap: none
}
.flyout a {
	padding: 0px 20px 5px 20px!important;
	border: 0!important
}
.light-gray-bg {
	background-color: #f8f8f8
}


/* ~~ Selektory elementu/tagu ~~ */
ul, ol, dl { /* Vzhledem k odlišnosti jednotlivých prohlížečů je vhodné používat v seznamech nulové odsazení a okraje. Aby nedocházelo k odchylkám, můžete hodnoty zadat buď zde nebo u položek seznamu (LI, DT, DD). Pamatujte, že pokud neurčíte konkrétnější selektor, budou zde provedené úpravy přeneseny do seznamu .nav. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Odebráním horního okraje se můžete vyhnout situaci, kdy okraje přesáhnou určený blok. Zbývající spodní okraj zajistí oddělení od všech následujících elementů. */
	padding-right: 15px;
	padding-left: 15px; /* Přidáním odsazení po stranách elementů v rámci blok; namísto jejich aplikace na samotné elementy blok; dojde k potlačení výpočtu rámečkového modelu. Stejného výsledku dosáhnete použitím vnořených blok; s odsazením po stranách. */
}
h1, .h1-ish {
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 20px
}
h2 {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 20px;
	
}
h3, .h3-ish {
	font-size: 16px;
	margin-bottom: 20px;
	padding-top: 10px
}
h4 {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 20px
}
h5 {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 10px
}

a img { /* Tento selektor umožňuje odebrat výchozí modré okraje, které v některých prohlížečích obklopují obrazy, v jejichž blízkosti se nachází odkaz. */
	border: none;
}
/* ~~ Při tvorbě odkazů na stránce je třeba respektovat toto pořadí – včetně skupiny selektorů použitých k vytvoření efektu najetí kurzorem. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* Pokud není vzhled odkazů opravdu výjimečný, je vhodné k jejich rychlému odlišení používat funkci podtržení textu. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* S touto skupinou selektorů můžete uživateli s klávesnicí zajistit stejný efekt najetí kurzorem, jako v případě uživatelů používajících myš. */
	text-decoration: none;
}
/* ~~ Tento kontejner s pevnou šířkou obklopuje ostatní bloky ~~ */
.container {
	width: 960px;
	background-color: #FFFFFF;
	margin: 0 auto; /* Automatická hodnota po stranách spolu s šířkou slouží k vystředění rozvržení. */
}
/* ~~ U záhlaví není určena jeho šířka. Bude roztaženo na plnou šířku vašeho rozvržení. ~~ */

.header-top > div > div > span > a:hover {
	cursor:pointer;
	color:#0000ff;

}

.centered {
	text-align: center
}

/* show case*/

#showcase {
    _background-image: url("img/bg-blur.jpg");
	background-color: #D8E6ED;
    height: 200px;
    overflow: hidden;
    old_transition: all 2000ms ease 0s;
	 -webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}


#showcase h3, #showcase .h3-ish {
	font-size: 18px;
	font-weight: 300;
	margin-bottom: 40px!important
}
#showcase a {
	font-size: 18px;
	font-weight: 600;
	margin-right: 10px
}
#showcase a:before {
	margin-right: 10px
}
#showcase .cutout {
	opacity: 0.7;
	margin-top: 0px;
	height: auto;
	width: 400px;
	-moz-transition: all 1000ms ease;
	-webkit-transition: all 1000ms ease;
	transition: all 1000ms ease
}
#showcase .slide {
	height: 200px;
	overflow: hidden
}
#showcase .slide-container {
	position: relative;
	width: 984px
}
#showcase .text-wrapper {
	width: 554px;
	padding-top: 85px;
	opacity: 0;
	-moz-transition: all 1000ms ease;
	-webkit-transition: all 1000ms ease;
	transition: all 1000ms ease
}
#slider {
	position:relative;
	min-height:1px;
	padding-left:15px;
	padding-right:15px;
}

/* ~~ Sloupce rozvržení ~~ 

1) Odsazení je použito pouze v horní a/nebo spodní části bloku elementů. Elementy v bloku vnořené obsahují odsazení po stranách. Tímto způsobem není třeba „počítat“ rámečkový model. Je třeba si uvědomit, že pokud k samotnému bloku přidáte boční odsazení nebo okraj, budou tyto hodnoty spolu se zadanou šířkou použity k určení *celkové* šířky. Postupovat můžete také takovým způsobem, že z elementu bloku odstraníte hodnotu odsazení a přidáte do něj druhý element bloku bez zadané šířky a s odsazením, které ve vašem návrhu chcete použít.

2) Všechny sloupce jsou plovoucí a neobsahují tedy žádné okraje. Pokud je přidání okrajů nezbytné, nevkládejte je ve směru, ve kterém budou plout (např. pravý okraj bloku, který bude plout vpravo). V mnoha případech lze místo toho použít odsazení. V případě bloků, kde toto pravidlo nelze dodržet, použijte v pravidlech elementu bloku příkaz „display:inline“. Zabráníte tak výskytu chyby, která u některých verzí prohlížeče Internet Explorer způsobuje zdvojení okrajů.

3) Vzhledem k tomu, že třídy mohou být v dokumentu použity několikrát (stejně tak několik tříd může být použito na jeden element), jsou sloupce označeny názvem třídy namísto ID. Např. dva bloky bočních sloupců můžete podle potřeby vrstvit na sebe. Pokud vám více vyhovuje označení pomocí ID, můžete toto nastavení snadno změnit s podmínkou, že každé ID bude v dokumentu použito pouze jednou.

4) Chcete-li navigační prvky umístit po pravé straně namísto po levé, stačí nechat tyto sloupce plout v opačném směru (všechny vlevo, ne vpravo). Budou tak zobrazeny v opačném pořadí a není potřeba bloky přesouvat ve zdrojovém kódu HTML.

*/
.sidebar1 {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
aside {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding: 10px 0;
}

/* ~~ Tato skupina selektorů slouží k vytvoření seznamů v oblasti elementu .content. ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px;
	list-style-type: disc;/* Toto odsazení imituje vzhled pravého odsazení ve výše uvedeném pravidle záhlaví a odstavce. Odsazení se nachází ve spodní části, aby v prostoru mezi ostatními elementy v seznamech a v levé části vytvořilo odrážku. Toto nastavení může být podle potřeby upraveno. */
	list-style-position: outside;
	text-indent: 4px;
}

/* ~~ Styly navigačních seznamů (mohou být odstraněny pokud se rozhodnete použít předem připravenou rozbalovací nabídku Spry) ~~ */
ul.nav {
	list-style: none; /* Slouží k odebrání značky v seznamu. */
	border-top: 1px solid #666; /* Slouží k vytvoření horního okraje odkazů – ostatní jsou vytvořeny pomocí spodního okraje definovaného v elementu LI. */
	margin-bottom: 15px; /* Slouží k vytvoření prostoru mezi prvky navigace a dalším obsahem umístěným níže. */
}
ul.nav li {
	border-bottom: 1px solid #666; /* Slouží k vytvoření mezery mezi tlačítky. */
}
ul.nav a, ul.nav a:visited { /* Při seskupování těchto selektorů dbejte, aby si odkazy zachovaly vzhled tlačítka i po otevření. */
	padding: 5px 5px 5px 15px;
	display: block; /* Umožňuje přiřadit odkazu vlastnosti bloku, čímž způsobí, že odkaz vyplní celý prostor položky seznamu definované elementem LI. Celá oblast tak bude reagovat na klepnutí tlačítkem myši. */
	width: 160px;  /*Zadáním této šířky zajistíte, že v prohlížeči IE6 bude celá oblast tlačítka reagovat na klepnutí tlačítkem myši. Pokud není podpora prohlížeče IE6 zapotřebí, můžete ji odstranit. Správnou šířku určíte odečtením velikosti odsazení odkazu od šířky kontejneru bočních sloupců. */
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* Slouží ke změně pozadí a barvy textu u navigačních prvků pro myš i klávesnici. */
	background-color: #ADB96E;
	color: #FFF;
}

/* ~~ Zápatí ~~ */
footer {

	padding: 10px 0;
	background-color: #CCC49F;
	position: relative;/* Umožňuje řádné vyčištění rozvržení (parametr hasLayout) v prohlížeči IE6. */
	clear: both; /* Díky této vlastnosti čištění může třída .container určit, kde sloupce končí, a poté je obsáhnout. */
}
.light-gray-bg {
    background-color: #F8F8F8;
}
#footer{
	color: #444;
	background-color:#f8f8f8;
}

#footer ul {
    list-style: outside none none;
}
#footer a {
    color: #444;
    text-decoration: none;
}
/* ~~ Různé třídy plovoucích elementů, vymazání elementů ~~ */
.fltrt {  /* Tuto třídu můžete použít k umístění plovoucího elementu v pravé části stránky. Plovoucí element se musí nacházet před elementem, vedle kterého má být na stránce umístěn. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Tuto třídu můžete použít k umístění plovoucího elementu v levé části stránky. Plovoucí element se musí nacházet před elementem, vedle kterého má být na stránce umístěn. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Pokud je z kontejneru odebráno zápatí, můžete tuto třídu aplikovat na <br /> prázdný element bloku nebo jako konečný element po posledním plovoucím elementu bloku (v rámci kontejneru). */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*Podpora HTML5 – Nové tagy syntaxe HTML5 nastaví příkaz diplay:block, takže prohlížeče dokáží vykreslit tagy správně. */
header, section, footer, aside, article, figure {
	display: block;
}