html {
height: 100%;
width: 100%;
font-size: 100%;
margin: 0;
}   
body {
font-size: 1.1em;
font-family: Verdana, sans-serif;
text-align: justify;
color: black;
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #9DBFD9;
background-image:url(../images/background.png);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
overflow-x:hidden;
}
::-webkit-scrollbar {
    width: 1em;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 0.2em;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 0.2em;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

body a {
color: #0C1A97;
text-decoration: underline;
}
.topnav {
display: none;
}
header {
margin-top: 0em;
}
article {
padding: 0.4em 0em 0em 2em;
margin: -0.3em 3em 0em 11.5em;
min-height: 28em;
position: relative;
background-image:url(../images/stuha-y.png);
background-position: left top;
background-repeat: repeat-y;
z-index: 400;  
}
a:hover {
color: black;
}
h1 {
color: black;
font-size: 1.8em;
font-weight: bold;
font-family: Verdana, sans-serif;
text-align: left;
}
h1 a {
color: black;
}
h2 {
font-size: 1.4em;
font-family: Verdana, sans-serif;
text-align: left;
color: black;
}
h2 a {
color: black;
}
h3 {
font-size: 1.2em;
font-family: Verdana, sans-serif;
text-align: left;
color: black;
}
h3 a {
color: black;
}
#logo {
width: 90%;
height: 10em;
float: left;
position: absolute;
padding: 0em auto;
margin: 1em 0em 0em 0em;
z-index:500; 
}
#logo img {
width: 32em;
}
#stuha_vodorovne {
width: 70%;
height: 1em;
float: right;
background-image:url(../images/stuha-x.png);
background-position: right top;
background-repeat: repeat-x;
position: absolute;
padding: 0em auto;
margin: -5.2em 0em 0em 32em;
}
.popisek {
width: 100%;
height: auto;
font-weight: bold;
padding: 0em auto;
margin: 0.5em 0em 0.2em 0em;
}
nav {
min-height: 9em;
}
#navigace {
width: 100%;
height: auto;
position: absolute;
padding: 0em auto;
margin: 5.6em 0em 0em 13.5em;
z-index: 600;
}
#navigace ul {
list-style-type: none;
}
#navigace li {
font-size: 1.3em;
font-family: Verdana, sans-serif;
float: left;
padding: 0.3em 0em 0.3em 0em;
margin: 1em 1em 0em 0em;
text-align: center;
display: inline;
opacity: 0.8;
}
#navigace a {
background: #E7B933;
color: black;
padding: 0.3em 0.3em 0.3em 0.3em;
text-decoration: none;
}
#navigace ul a:hover {
background: #FFEF00;
color: black;
text-decoration: none;
}
#navigace_ {
width: 15em;
height: auto;
position: absolute;
padding: 0em auto;
margin: 7em 0em 0em -1.5em;
z-index: 600;  
}
#navigace_ ul {
list-style-type: none;
}
#navigace_ li {
font-size: 0.9em;
font-family: Verdana, sans-serif;
float: left;
text-align: left;
padding: 0em auto;
margin: 1em 0em 0em 0em;
opacity: 0.8;
}
#navigace_ a {
width: 10em;
height: 1.8em;
padding: 0.4em 0em 0em 0.4em;
float: left;
text-align: left;
color: black;
background: #E7B933;
text-decoration: none;
}
#navigace_ ul a:hover {
float: left;
text-align: left;
background: #FFEF00;
}
#red a {
border: 3px solid #F63A3D;
}
input[type="submit"] {
width: 11em;
height: 3em;
background: #E7B933;
color: black;
margin: 1em 0em 0em 0em;
font-weight: bold;
display: block;
border: 0;
opacity: 0.8;
z-index: 1500;
}
input[type="submit"]:hover {
background: #FFEF00;
color: black;
cursor: pointer;
}
.btn btn-default {
z-index: 1500;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 98%;
height: 1.5em;
border: 1px solid #2B39B8;
padding: 0.3em;
}
input[type="number"] {
width: 93%;
height: 1.5em;
border: 1px solid #2B39B8;
padding: 0.3em;
}
select {
width: 100%;
height: 2.5em;
border: 1px solid #2B39B8;
}
#fotka{
width: 23%;
height: 29em;
margin: 0.3em 0.3em 0.3em 0.3em;
padding: 0.5em 0.3em 0.3em 0.3em;
float:left;
border: 2px solid #B6CCDC;
text-align: center;
font-size: 0.7em;
line-height: 1.2em;
background-color: rgba(192, 192,192, 0.7);
overflow-y:auto;
overflow-x:hidden;
}
textarea {
border: 1px solid #2B39B8;
width: 99%;
height: 7em;
}
#message {
width:21em;
border: 2px solid #2B39B8;
color: black;
background: white;
padding: 0.3em 0.6em 0.3em 0.3em;
margin: 1em 0em 1em 0em;
}
.end {
width: 97%;
height: auto;
margin: 1em 0em 1em 0em;
}
.end a {
color: black;
background: #E7B933;
font-weight: bold;
text-decoration: none;
margin: 1em 0em 1em 0em;
padding: 0.3em 0.3em 0.3em 0.3em;
 }

.end a:hover{
text-decoration: none;
background: #FFEF00;
margin: 1em 0em 1em 0em;
padding: 0.3em 0.3em 0.3em 0.3em;
}
.message h2 {
text-align: center;
color: black;
}
.message a {
color: black;
text-decoration: underline;
}
.message a:hover {
color: #B21016;
text-decoration: underline;
}
#ajax-spinner {
position: fixed;
width: 32px;
height: 32px;
/* - use if you use bacground image, no ico */
background: url('../img/ajax-loader.gif') no-repeat;
z-index: 123456;
color: #2B39B8;
}
#box {
width: 25em;  
height: auto; 
float: left;	
}
#obch {
width: 40%; 
height: 19.5em; 
overflow: scroll;
padding: 0.5em  0.5em 0.5em 0.5em;
border: 2px solid #2B39B8;
overflow-x:hidden;
float: left;	
}
#frm-signInForm {
width: 20em; 
height: 2em; 
padding: 0.3em  0.3em 0.3em 0.3em;
}
#frm-datadopravaForm {
width: 26em; 
height: 2em; 
padding: 0.3em  0.3em 0.3em 0.3em;
}
#frm-dataobdobiForm {
width: 25em; 
height: 2em; 
padding: 0.3em  0.3em 0.3em 0.3em;
}
#frm-dataslevyForm {
width: 29em; 
height: 2em; 
padding: 0.3em  0.3em 0.3em 0.3em;
}
#frm-dataramecekForm {
width: 20em; 
height: 2em; 
padding: 0.3em  0.3em 0.3em 0.3em;
}
#frm-transakceForm {
width: 38em; 
height: 7em;
text-align: right;
background-color: rgba(255, 255, 255, 0.6);
border: 3px solid #F63A3D; 
}

#frm-calculForm {
width: 21em; 
height: 5em;
padding: 0.3em  0.6em 0.3em 0.3em; 
text-align: left;
background-color: rgba(255, 255, 255, 0.6);
border: 3px solid #F63A3D;
}
#frm-webinarForm {
width: 60%; 
height: auto;
}
#frm-editorForm {
width: 65em; 
height: 60em;
padding: 0em auto;
margin: 0em  0em 0em 0em;
text-align: left;
background-color: #B6C1CD;
z-index: 1400;
}
#navigace_editace_list {
width: 100%;
height: auto;
font-size: 0.8em;
margin: 0em 0em 0em -3em;
}
#navigace_editace_list ul {
list-style-type: none;
text-indent: 0%;
}
#navigace_editace_list li {
float: left;
margin: 0em 0.3em 1em 0em;
list-style-position: inside;
text-indent: 0%;
opacity: 0.8;
}
#navigace_editace_list a {
background: #E7B933;
color: black;
padding: 0.3em 0.3em 0.3em 0.3em;
text-decoration: none;
border: none;
}
#navigace_editace_list a:hover {
background: #FFEF00;
color: black;
text-decoration: none;
}
#frm-contactForm {
width: 60%; 
height: auto;
}
input.button {
width: 75%;
height: 3em;
margin: 0em 0em 0em 3em;
text-align: center;
}  
#navigace_editace {
width: 100%;
height: auto;
font-size: 0.8em;
margin: 0em 0em 0em 0em;
z-index: 1000;
}
#navigace_editace ul {
list-style-type: none;
text-indent: 0%;
}
#navigace_editace li {
float: left;
margin: 0em 0.3em 1em 0em;
list-style-position: inside;
text-indent: 0%;
opacity: 0.8;
}
#navigace_editace a {
background: #E7B933;
color: black;
padding: 0.3em 0.3em 0.3em 0.3em;
text-decoration: none;
border: none;
}
#navigace_editace a:hover {
background: #FFEF00;
color: black;
text-decoration: none;
}
#navigace_editace_admin {
width: 100%;
height: auto;
font-size: 0.8em;
margin: -1em 0em 0em 0em;
z-index: 1000;
}
#navigace_editace_admin ul {
list-style-type: none;
text-indent: 0%;
}
#navigace_editace_admin li {
float: left;
margin: 0em 0.3em 1em 0em;
list-style-position: inside;
text-indent: 0%;
opacity: 0.8;
}
#navigace_editace_admin a {
background: #E7B933;
color: black;
padding: 0.3em 0.3em 0.3em 0.3em;
text-decoration: none;
border: none;
}
#navigace_editace_admin a:hover {
background: #FFEF00;
color: black;
text-decoration: none;
}
table {
width: 100%;
margin-left: auto; 
margin-right: auto;
border-collapse: collapse;
}
table, th, td {
padding: 0.3em 0.3em 0.3em 0.3em;
vertical-align: top;
}


#navigace_objednavka {
width: 40%;
height: auto;
text-align: right;
padding: 0.0em 0.5em 0.0em 0.5em;
margin: 0em 0em 0em 60%;
}
#navigace_objednavka ul {
list-style-type: none;
}
#navigace_objednavka li {
float: left;
margin: 0em 1em 1.5em 0em;
opacity: 0.8;
}
#navigace_objednavka a {
background: #0C1A97;
color: black;
padding: 0.3em 0.3em 0.3em 0.3em;
text-decoration: none;
border: none;
}
#navigace_objednavka a:hover {
background: #FFEF00;
color: black;
text-decoration: none;
}
.perex_pole{
width: 20.1em;
height: 9em;
text-align: left;
margin: 0em 0.3em 0.3em 0.3em;
padding:0em 0.3em 0.4em 0.4em;
float:left;
border: 0.1em solid #2B39B8;
background-color: rgba(255, 255, 255, 0.6);
overflow-y: auto; 
}
.perex_pole h2{
font-size: 90%;
}
.perex_pole a{
text-decoration: none;
}
.ObrazekUPerexu {
width: 130px;
height: 120px;
margin: 0em 0.6em 0em 0em;
padding: 0em 0em 0em 0em;
text-align: left;
float:left;
}
.perex_pole p {
font-size: 0.8em;
}
#navigace_editace_main {
width: 100%;
height: auto;
font-size: 1.5em;
margin: 0em 0em 0em 0em;
}
#navigace_editace_main ul {
list-style-type: none;
text-indent: 0%;
}
#navigace_editace_main li {
float: left;
margin: 0em 0.3em 1em 0em;
list-style-position: inside;
text-indent: 0%;
opacity: 0.8;
}
#navigace_editace_main a {
background: #E7B933;
color: black;
padding: 0.3em 0.3em 0.3em 0.3em;
text-decoration: none;
border: none;
}
#navigace_editace_main a:hover {
background: #FFEF00;
color: black;
text-decoration: none;
}
footer {
width: 100%;
height: 100%;
position: relative;
margin: -11em auto;
background-image:url(../images/footer.png);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}
#spodek {
text-align: center;
font-size: 0.9em;
width: 100%;
height: 4.5em;
padding: 0.3em 0.3em 0em 0.3em;
margin: 0em auto 1em auto;
position: absolute;
z-index: 300;
}
.obr_detail {
float: left;
border-right: 2em solid transparent; 
}
.pole_form input{
text-align: left;
width: 68em;                         
height: 1.4em;
}
.pole_form textarea{
text-align: left;
width: 70em;
height: 23em;
margin-left: -1em;
}
.clear {
clear: both;
height: 1px;
font-size: 1px;
line-height: .1;
} 
@media only screen and ( max-width: 100em )  {
html {
    font-size: 90%; /* 12 */
}
img {
width: auto; 
max-height: 19em;
}
#box {
width: 24em;
}
 #obch {
width: 39%; 
}
#barva {
display: none;
}
#navigace li {
font-size: 1.1em;
}
#frm-contactForm {
width: 70%; 
height: auto;
} 
#frm-webinarForm {
width: 70%; 
height: auto;
}
.perex_pole{
width: 30%;
}
}
@media only screen and ( max-width: 60em )  {
html {
    font-size: 90%; /* 12 */
}
img {
width: auto; 
max-height: 19em;
}
#spodek {
background-color: rgba(255, 255, 255, 0.6);
}
#barva {
display: none;
}
#navigace {
width: 30em;
}
#navigace li {
font-size: 1.1em;
}
.message {
width: 99.5%;
}
#box {
width: 99.5%;  
}
#obch {
width: 99.5%; 
}

article {
padding: 3em 0em 0em 2em;
}
#frm-transakceForm {
width: 25.5em; 
height: 10em;
text-align: right;
}
#frm-contactForm {
width: 80%; 
height: auto;
} 
#frm-webinarForm {
width: 80%; 
height: auto;
}
.perex_pole{
width: 46%;
}
}
@media only screen and ( max-width: 55em )  {
.perex_pole {
width: 43%;
}
.message {
width: 98%;
}
#box {
width: 99.5%;  
}
#obch {
width: 97%; 
}
}
@media only screen and ( max-width: 43em )  {
html {
    font-size: 90%; /* 12 */
}
img {
width: auto; 
max-height: 19em;
}
#barva {
display: none;
}
#spodek {
background-color: rgba(255, 255, 255, 0.6);
}
#navigace {
width: 22em;
}
#navigace li {
font-size: 1.1em;
}
.message {
width: 98%;
}
#box {
width: 99.5%;  
}
#obch {
width: 97%; 
}
article {
padding: 6em 0em 0em 2em;
}
#frm-contactForm {
width: 100%; 
height: auto;
} 
#frm-webinarForm {
width: 100%; 
height: auto;
}
.perex_pole{
width: 97%;
height: auto;
text-align: left;
margin: 0em 0.3em 0.3em 0.3em;
padding:0em 0.3em 0.4em 0.4em;
float: none;

overflow-y: auto; 
}
}
@media only screen and ( max-width: 38em )  {
html {
font-size: 90%; /* 12 */
}
img {
height: auto; 
max-width: 100%;
}
#logo {
display: none;
}
#barva {
display: none;
}
#navigace {
display: none;
}
nav {
height: 1em;
}
article {
width: 97%;
padding: 0em 0.3em 0.3em 0.3em;
margin: -3em 0em 0em 0em;
background-image: none;
}
#spodek {
font-size: 1em;
height: 5em;
background-color: rgba(255, 255, 255, 0.6);
}
#stuha_vodorovne {
display: none;
}
#navigace_ {
display: none;
}
.perex_pole{
width: 97%;
height: auto;
text-align: left;
margin: 0em 0.3em 0.3em 0.3em;
padding:0em 0.3em 0.4em 0.4em;
float: none;
 overflow-y: auto; 
}
h1 {
color: black;
font-size: 1.3em;
}
h2 {
color: black;
font-size: 1.1em;
}
h3 {
color: black;
font-size: 1em;
}
.message {
width: 98%;
}
#box {
width: 99.5%;  
}
#obch {
width: 97%; 
}
input[type="text"], input[type="email"], input[type="number"], input[type="password"] {
width: 96%;
height: 1.5em;
border: 1px solid #2B39B8;
padding: 0.3em;
}
textarea {
width: 96%;
height: 30em;
border: 1px solid #2B39B8;
padding: 0.3em;
}
#frm-contactForm {
width: 100%; 
height: auto;
} 
#frm-webinarForm {
width: 100%; 
height: auto;
}
#frm-transakceForm {
width: 25.5em; 
height: 10em;
text-align: right;
}
 /* Style the navigation menu */
.topnav {                           
  overflow: hidden;
  background-color: #333;
  font-size: 180%;
  position: relative;
  display: block;
  z-index: 1000;
}
.nadpis_mob {                           
  margin-top: -2em;
  margin-left: 3em;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  color: white;
  font-size: 80%;
  padding: 0.7em 0.3em 0.7em 0.3em;
}

/* Style navigation menu links */
.topnav a {
  color: #F6E700;
  padding: 0.5em 0.5em 0.5em 0.5em;
  text-decoration: none;
  font-size: 95%;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  width: 2.5em;
  height: 2.5em;
  padding: 1em 0em 0em 1.5em;
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #86BBD6;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
height: 2.5em;
margin-top: -0.3em;
}
 
}