styles.css

@font-face {
    font-family: raleway;
    src: url(graphics/font/Raleway-Regular.ttf) format('truetype');
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
body {
   background-image: url(graphics/background-web.jpg); 
   background-size: cover;  
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: scroll; 
   font-size: 1.6em;
   font-family: raleway;
}
nav {
    width: 100%;
    transition: background 0.5s ease-in-out, border 0.5s ease-in-out;
    border-radius:6px 6px 0px 0px;
    font-family: raleway;
    font-size: 1.3em;
}
nav:hover {
    background-color: white;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}
nav:hover a#a-special {
    color: black;    
}
nav:hover ~ #c{    
    border-radius: 0px 0px 6px 6px;
}
li a{
	text-decoration: none!important;
    color: Black; 
    transition: color 0.47s ease-in-out, font-size 0.47s, padding 1.5s;
}
a#a-special {
    
}
li a:focus{ 
    padding: 0px;
    margin: 0px;
    font-size: 1.1em; 
    font-weight: bold;
}
li a:hover{ 
    padding: 0px;
    margin: 0px;
    font-size: 1.1em; 
    font-weight: bold;
}
li {
    padding-bottom: 18px;
}
nav ul{
    list-style-type: none;  
    margin: auto;
    text-align: left;
}
nav li{
    display: inline;
    text-align: center;
    padding: 10px;  
    margin: auto;
}
.mainli{
    font-size: 2.2em;
}
.leftli{
    margin: auto auto auto 27%;
}
div {
    text-align: center;
}
footer {
     text-align: center;
}
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
p {
    text-align: justify;
    margin: auto;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10px;
    padding-top: 10px;
    font-family: raleway;
}
header {
    width: 100%;
    height: 120px;    
    margin: auto;
    text-align: center;
}
article {
    text-align: center;
    margin: auto;
}
section {
         text-align: center;
         background-color: white;
         padding: 5px;  
         border-radius: 6px;
         transition: border-radius 0.7s;
         height: 70%;
         font-size: 1.1em;
         height: 700px;
         border: 1px solid black;
}
img#index_icon{
    transition: opacity 0.2s, border 0.1s;
}
img#index_icon:hover{
    opacity: 0.7;
    border: solid 3px black;
}
h2 {
    font-size: 3.8em;
    font-family: raleway;
    text-align: center;    
}
h3 {
	font-weight: bold;
	font-family: raleway;
	font-size: 2em;
}
h4 {
    font-size: 1.2em;
    text-align: left;
    font-family: raleway;
}
/*.imgli {
    margin: auto;
    padding-left: 13%;
}*/
@media screen and (min-width: 801px){
	.sideNavHide {
		display: none;
	}
	.mainNavHide{
		display: initial;
	}
	#headerCol{
		height: 75px;
	}
}
@media screen and (max-width: 800px) {
    h2{
        font-size: 2em;
    }   
    nav ul{
        list-style-type: none;  
        margin: auto;
        text-align: left;
    }
    nav li{
        display: inline;
        text-align: center;
        padding: 10px;  
        margin: auto;
    }
    .leftli{
        margin: auto;
    }
    .mainli{
        font-size: 1.5em;
        margin: auto;
        padding: auto;
    }
    body{
    	font-size: 1em;
    }
	.sideNavHide{
		display: initial;
	}
	.mainNavHide{
		display: none;
	}
	#headerCol{
		height: auto;
	}
}
.sidenav {
	  height: 100%; /* 100% Full-height */
	  width: 0; /* 0 width - change this with JavaScript */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Stay on top */
	  top: 0; /* Stay at the top */
	  left: 0;
	  background-color: #111; /* Black*/
	  overflow-x: hidden; /* Disable horizontal scroll */
	  padding-top: 60px; /* Place content 60px from the top */
	  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}	
	/* The navigation menu links */
	.sidenav a {
	  padding: 8px 8px 8px 15px;
	  text-decoration: none;
	  font-size: 25px;
	  color: white;
	  display: block;
	  transition: 0.3s;
	}
		/* When you mouse over the navigation links, change their color */
	.sidenav a:hover {
	  /*color: #f1f1f1;*/
	  text-decoration: underline;
	}	
	/* Position and style the close button (top right corner) */
	.sidenav .closebtn {
	  position: absolute;
	  top: 0;
	  right: 25px;
	  font-size: 50px;
	  margin-left: 50px;
	}	
	/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
	#main {
	  transition: margin-left .5s;
	  padding: 20px;
	}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/*

table#tbl1 {
	border: 1px solid black;
	width:80%;
	border-collapse: collapse;
	margin-left: 10%;
	text-align: center;
		
}
table#tbl1 th, td, tr {
	border: 1px solid black;
	text-align: center;
}
table#tbl1 tr:nth-child(even) {
	background-color: #f2f2f2;
}*/
.tbl1 {
	border: 1px solid black;
	width:80%;
	border-collapse: collapse;
	margin-left: 10%;
	text-aligh: center;
		
}
.tbl1 th, td, tr {
	border: 1px solid black;
	text-aligh: center;
}
.tbl1 tr:nth-child(even) {
	background-color: #f2f2f2;
}
input {
	width: 10%;
}
.kontaktBox {
	width: 100%;
}
table#tbl-k {
	border: 0px;
	align: center;
	margin-left: 36%;
	border-collapse: collapse;
	width: 30%;
	border: none;
}
table#product-table {
	border: none;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
	margin-bottom: 5%;
}
table#product-table th,td,tr {
	border:  none;
}
table#product-table tr {
	border-bottom: none;
}
.module-border-wrap {
  
}
td#productName{
	width: 40%;
	text-align: right;
	padding-right: 1%;
}
.textBox {
	width: 100%;
}
/*td#textBox {
	width: 7%;
}
td#productPrices {
	text-align: left;
	padding-left: 1%;
}
td#maxNaOS {
	text-align: center;
}*/
td#outOfStock {
	text-align: left;
	padding-left: 32%;
}
th#nabidka{
	text-align: center;
}
th#admin{
	text-align: center;
}
/*td#stock{
	text-align: center;
}*/
@media print {
    .pagebreak { page-break-after: always; }
}
.pagebreak{
	 page-break-before: always;
}