@charset "utf-8";
/* CSS Document */


body	{background: #f8f8f8; color: #000000; position: relative;
		 font-family: 'Open Sans', sans-serif; text-align: center; 
		 font-size: 16px; line-height: 1.6; font-weight: 400;}
strong	{font-weight: 700;}
a, a:hover, a:focus {text-decoration: none; color: #e42313;
		 -o-transition: all .3s; -moz-transition: all .3s;
		 -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}
h1		{font-family: 'Oswald', sans-serif; color: #ffffff; 
		 font-size: 2.5rem; font-weight: 700; line-height: 1.1;}
h2		{font-family: 'Oswald', sans-serif; color: #e42313;
		 font-size: 1.8rem; font-weight: 700; line-height: 1.1;
		 margin-top: 1rem; margin-bottom: 0.5rem;}
h3		{font-family: 'Oswald', sans-serif; color: #000000;
		 font-size: 1.4rem; font-weight: 700; line-height: 1.1;}
h4		{font-family: 'Oswald', sans-serif; color: #000000;
		 font-size: 1.3rem; font-weight: 700; line-height: 1.1;}
h5		{font-family: 'Oswald', sans-serif; color: #000000;
		 font-size: 1.1rem; font-weight: 700; line-height: 1.1;}
img		{max-width: 100%; height: auto;}




.sirka	{width: 100%; max-width: 960px; margin: 0 auto;}
.obsah	{padding: 1rem;}
.obsah:after {clear: both; content: "."; display: block; height: 0; line-height: 0; overflow:  hidden; visibility: hidden;}
.text .obsah {padding-top: 2rem; padding-bottom: 2rem;}

.predel		{background-size: auto; background-repeat: no-repeat; background-position: center;
			 width: 100%; height: 550px;}
.predel h1	{text-shadow: 3px 3px 10px #000000, -3px -3px 10px #000000, 
                          3px -3px 10px #000000, -3px 3px 10px #000000;
			 margin-top: 125px; padding-bottom: 2rem;}
.predel h1.solo	{margin-top: 220px;}
.predel .obsah {text-align: center;}
.predel img.ikona	{width: 200px; height: 200px; margin: 0 auto;}
.cervena    {color: #e42313;}
.zvyrazneni	{font-family: 'Oswald', sans-serif!important; 
			 font-size: 1.2rem; font-weight: 700; line-height: 1.3;}




nav {position: fixed; background-color: #000000; color: #ffffff; width: 100%;
	 font-family: 'Oswald', sans-serif; font-size: 1.1rem; line-height: 1; z-index: 10;}
nav ul		{display: block;}
nav ul li	{display: block; float: left; cursor: pointer;}
nav ul.main-menu 		 {float: left;}
nav ul.main-menu li		 {padding: 0.3rem 0.6rem;}
nav ul.main-menu li	a	 {color: #ffffff;}
nav ul.lang-box			 {float: right;}
nav ul.lang-box li		 {padding: 0 0.4rem;}
nav ul.lang-box li.facebook {padding-right: 1.5rem; padding-left: 1rem;}
nav ul.lang-box li a img {max-height: 20px; width: auto;}
nav .collapse-menu       {display: none;}
@media screen and (max-width:768px) {
nav {font-size: 1rem;}
nav ul		{float: none!important; clear: both!important;}
nav ul li	{float: none; display: inline-block; text-align: center;}
nav ul.main-menu		 {padding-top: 1rem;}
nav ul.main-menu li		 {padding-left: 0.3rem; padding-right: 0.3rem;}
nav ul.lang-box li.facebook {padding-left: 0;}
}
@media screen and (max-width:480px) {
nav .collapse-menu       {display: block; width: 100%; text-align: center;
						  padding-top: 1rem;}
nav .collapse-menu:after {content: "\f008"; font-family: "mfg"; font-size: 2rem;}
nav ul.main-menu li	{display: block; width: 100%; padding: 0.8rem 1rem; border-top: 1px solid #ffffff;}
nav ul.main-menu li:hover	{background-color: #e42313;}
nav ul.main-menu		 {display: none;}
nav ul.main-menu.show-menu {display: block!important;}
}

/* vlajky pryč 
nav ul.lang-box li.flag {display: none;}
nav ul.lang-box li.facebook {padding-right: 0; padding-left: 0;}
@media screen and (max-width:768px) {
nav ul.main-menu		 {padding-top: 0;}
nav ul.lang-box {text-align: right;}}
@media screen and (max-width:480px) {
nav .collapse-menu       {padding-top: 0;}}*/





.uvod .obsah	{text-align: center;}
.uvod img		{padding-top: 140px; width: 80%; max-width: 350px; height: auto; margin: 0 auto;}




.submenu		{background-color: #000000; color: #ffffff;}
.submenu ul		{list-style: none; padding: 0; margin: 0;}
.submenu ul li	{display: block; float: left; padding: 1rem 0.5rem; width: 20%; text-align: center; position: relative;}
.submenu ul li h4	{color: #ffffff; padding-bottom: 1rem;}
.submenu ul li a img	{width: 80%; max-width: 120px; height: auto; margin: 0 auto;}
@media screen and (max-width:768px) {.submenu ul li	{width: 33.33%;}}
@media screen and (max-width:480px) {.submenu ul li	{width: 50%;}}




.text p			  {text-align: left;}
.text h2		  {text-align: left; padding-top: 1rem;}
.text .mensi-foto {margin-top: 2rem; margin-bottom: 2rem;}
.text h4		  {text-align: left; padding-top: 1rem; padding-bottom: 1rem;}
.text h5		  {text-align: left; padding-top: 1rem; padding-bottom: 0.5rem;}


.ramecek		  {display: block; padding: 1rem; border-radius: 0.8rem;}
.ramecek.cerveny  {background-color: none; border: 2px dotted #e42313;}
.ramecek.sedy	  {background-color: #e8e8e8; border: 2px dotted #999999;}




.rameckovky	{width: 100%; padding-top: 1rem; padding-bottom: 1rem;}
.rameckovky .ramecek-text {margin-left: 200px;}
.rameckovky .ramecek	  {width: 170px; float: left;}
.rameckovky .ramecek h3, .rameckovky .ramecek h4, .rameckovky .ramecek h5
			{margin: 0; padding: 0; text-align: center;}
@media screen and (max-width:768px) {
.rameckovky .ramecek-text {margin-left: 0;}
.rameckovky .ramecek	  {float: none; margin-bottom: 1rem;}
}




ul.seznam  {list-style: none; padding: 0; margin: 0; text-align: left;}
ul.seznam li {padding-left: 1.2rem; text-indent: -1.2rem; text-align: left;}
ul.seznam li:before {display: inline-block; background-color: #e42313; 
			  border-radius: 50%; content: ''; height: 0.45rem; width: 0.45rem;
			  margin-right: 0.8rem; margin-bottom: 0.1rem;}




ul.loga 		{padding-top: 1rem; padding-bottom: 1rem;}
ul.loga li		{padding: 1rem; position: relative; float:left;
				 border-left: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb;
				 width: 23%; height: auto; min-height: 90px; 
				 margin-right: 2%; margin-bottom: 1rem;}
ul.loga li img	{display: block; max-width: 100%; height: auto; max-height: 50px;
				 margin: 0 auto;}
@media screen and (max-width:768px) {ul.loga li {width: 30%; margin-right: 3%;}}
@media screen and (max-width:480px) {ul.loga li {width: 45%; margin-right: 5%;}}




ul.portrety 	{list-style: none; padding: 0; margin: 0; padding-left: 1rem;}
ul.portrety li	{display: block; padding: 1rem; margin-top: 1rem; margin-bottom: 1rem; 
				 float: left; width: 100%; text-align: center;
				 border-left: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb;}
ul.portrety li h3	{margin-top: 1rem; margin-bottom: 0.5rem;}
ul.portrety li img	{width: 70%; max-width: 160px; height: auto; border-radius: 50%; margin: 0 auto;}
ul.portrety li p	{text-align: center;}
@media screen and (max-width:480px) {
ul.portrety li	{margin-left: 5%; margin-right: 5%; width: 90%;}
ul.portrety 	{padding-left: 0; padding-top: 1rem;}
}




ul li.bublina {padding-top: 0.5rem; padding-bottom: 0.5rem;}
ul li.bublina:after {content: ''; display: block; clear: both;}
ul li.bublina div 
	{width: 150px; height: 100px; float: left; color: #ffffff;
	 padding: 1rem;
	 background-image: url(../img/tpl2018-bublina.png); background-size: cover;
	 font-family: 'Oswald', sans-serif; font-size: 1.4rem; line-height: 1;}
ul li.bublina div.solo {padding-top: 1.8rem;}
ul li.bublina p {padding: 0.5rem 0.5rem 0.5rem 1rem; margin-left: 160px; 
	 min-height: 82px; text-align: left;
	 border: 2px dotted #bbbbbb; border-left: none;}
@media screen and (max-width:480px) {
	ul li.bublina div {width: 120px; height: 80px; font-size: 1.2rem; padding: 0.7rem; padding-right: 1.2rem;}
	ul li.bublina div.solo {padding-top: 1.4rem;}
	ul li.bublina p {padding-left: 0.5rem; margin-left: 135px;}}




.ke-stazeni img {width: 80%;}
.ke-stazeni h4 {text-align: left;}
.ke-stazeni p a:hover {text-decoration: underline;}




.mapa {padding-top: 2rem;}
.download .text h2 {padding-bottom: 1rem!important;}
.formular {background-color: #000000; color: #ffffff; margin-top: 2rem}
.formular form {text-align: left; padding-top: 1rem;}
.formular form div {padding-top: 0.5rem;}
.formular form input.policko {width: 60%; background-color: #000000; 
	color: #ffffff; padding: 0.3rem 1rem; border: 1px solid #ffffff;}
.formular form input.policko.zprava {height: 5rem;}
.formular form input.tlacitko {display: block; background-color: #000000; 
	color: #ffffff; padding: 0.3rem 1rem; border: 1px solid #ffffff;
	margin-top: 1rem;}
.formular form input.tlacitko:hover {background-color: #e41b13;}
@media screen and (max-width:768px) {.formular form input.policko {width: 80%;}}
@media screen and (max-width:480px) {.formular form input.policko {width: 100%;}}




footer	  {background-color: #000000; color: #ffffff; 
		   padding: 1rem; font-size: 0.7rem;}


.uvod        .predel	{background-image: url(../img/tpl2018-foto-uvodni.jpg);}
.skladovani  .predel	{background-image: url(../img/tpl-foto-sklad.jpg);}
.doprava     .predel	{background-image: url(../img/tpl-foto-doprava.jpg);}
.ecommerce   .predel	{background-image: url(../img/tpl-foto-ecommerce.jpg);}
.vas         .predel	{background-image: url(../img/tpl-foto-vas.jpg);}
.lead-reseni .predel	{background-image: url(../img/tpl-foto-4pl.jpg);}
.onas        .predel	{background-image: url(../img/tpl-foto-onas.jpg);}
.novinky     .predel	{background-image: url(../img/tpl-foto-novinky.jpg);}
.reference   .predel	{background-image: url(../img/tpl-foto-reference.jpg);}
.kontakty    .predel	{background-image: url(../img/tpl-foto-kontakty.jpg);}