<style type="text/css">
html,body {
height:100%;
margin:0;
padding:0;
border:0;
}
body {
font-family: 'Open Sans', sans-serif;
font-size:16px;
line-height:1.5;
color: #333;
background: #fff;/* #FFC  #fff;*/
position:relative;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
display:table;
content:'';
}
.clearfix:after {
clear:both;
}
.hidden {
display:none;
}
.container {
width: 1000px;
margin:0 auto;
position:relative;
padding:10px 5px 10px 5px;
font-family: 'Open Sans', sans-serif;
font-size:16px;
line-height:1.3;
color:#222;
background:#fff;
}
a, button, .btn {
outline:none !important;
text-decoration:none;
}
a {padding-top:10px; padding-bottom:10px; font-weight:500;
color:#09c;/*#96b613;*/
}
a:hover {
color:#0c9;/*#c2d501;*/
text-decoration:none;
}
.meni a { padding-top:10px; padding-bottom:10px; font-weight:500;}
.navbar-nav > li::before{content:"";}
.navbar-nav .open .dropdown-menu > li > a{line-height:15px;}
.open > .dropdown-menu{display:block;}
#myBtn{display:none;position:fixed;bottom:20px;right:30px;z-index:99;border:none;outline:none;background-color:red;color:white;cursor:pointer;padding:15px;border-radius:10px;}
#myBtn:hover{background-color:#3FF;}
.tableTable {
BACKGROUND: #f1f3eb;
MARGIN-LEFT: 1px;
BORDER-COLLAPSE: collapse;
empty-cells: show;
}
.tableTable TD {
BORDER-RIGHT: #bbc79d 1px solid;
PADDING-RIGHT: 13px;
BORDER-TOP: #bbc79d 1px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
BORDER-LEFT: #bbc79d 1px solid;
PADDING-TOP: 5px;
BORDER-BOTTOM: #bbc79d 1px solid;
}
.tableHeader {
FONT-SIZE: 20px;
BACKGROUND: #8c9f59;
COLOR: #fff;
FONT-FAMILY: Arial;
}
h1 {
padding-top:15px; padding-bottom:15px;
margin: 0;
line-height:1.25;
font-size:25px;
font-weight:400;
position: relative;
width: 100%;
text-align: left;
color: #F00;
}
h2 {
padding-top:10px; padding-bottom:10px;
margin: 0;
line-height:1.2;
font-size:18px;
font-weight:400;
position: relative;
width: 100%;
text-align: left;
color:#3C9;
}
h3 {
padding-top:8px; padding-bottom:8px;
margin: 0; 
margin-top:10px;
line-height:1.15;
font-size:15px;
font-weight:400;
position: relative;
width: 100%;
text-align: left;
color:#3C9;
}
h4 {
font-size:14px;
line-height: 1.15;
font-weight:700;
color:#3C9;
text-align: left;
}
p.manje {font-size:18px;}
h1.title {font-size:16px;line-height:18px; color:green; line-height:110%;TEXT-TRANSFORM:uppercase;margin:0.8em 0.2em 0.2em 0.2em;padding:5 10 10 5; text-align:center}
h2.title {font-size:14px;line-height:16px; color:#718e41; line-height:100%;TEXT-TRANSFORM:uppercase;margin:0.8em 0.2em 0.2em 0.2em;padding:5 10 5 10; text-align:center}
h2.vazno {font-size:14px;line-height:16px; color:red; line-height:100%;margin:0.8em 0.2em 0.2em 0.2em;padding:0 5 0 5;}
h3.title {font-size:12px;line-height:14px; color:#063; line-height:100%;TEXT-TRANSFORM:uppercase;padding:0 5 0 5;}
h4.title {font-size:12px;line-height:12px; color:#f00; line-height:100%;TEXT-TRANSFORM:uppercase;padding:0 5 0 5;}
h1.pageTitle {font-size:1.3em;line-height:18px; color:#F00; line-height:120%; azimuth:center;padding:0 5 0 5;}
h1.vazno {font-size:1.3em;line-height:18px; color:#fff; line-height:120%; azimuth:center;padding:0 1 0 1;}
h2.pageTitle {font-size:14px;line-height:16px; color:#718e41; line-height:100%;TEXT-TRANSFORM:uppercase;margin:0.8em 0.2em 0.2em 0.2em;padding:0 5 0 5;}
ul { padding 0 0 0 2px; margin: 0; list-style-type:disc;list-style-position: outside;}
ol { padding 0 0 0 2px; margin: 0; list-style-type:decimal;list-style-position: outside;}
li{padding-left:1px; padding-top:5px;}
li:before{padding-right:1px; color:black;}
/* moje  */
.img-left { float:left; margin: 6px 10px 10px 6px;max-width: 100%;height: auto;}
.img-right { float: right; margin: 6px 0 15px 10px;max-width: 100%;height: auto;}
.img-left-malo { float:left; margin: 6px 10px 10px 6px;width: 25%; max-width:150px;height: auto;}
.img-right-malo { float: right; margin: 6px 0 15px 10px;width: 25%; max-width:150px;height: auto;}
.responsive-image { height: auto; width:100%;  max-width: 200px;}
.resp-img { height: auto; width:100%;  max-width: 200px;}
.img-resp { float:right; margin:6px 0 15px 10px;width:50%;height:auto;}
fieldset {
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #09C;
text-align: left;
text-decoration: none;
font-size: 12px;
}
.topnav a:hover {
background-color: #0c9;
color: black;
}
.topnav .icon {
display: none;
}
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: relative;/* absolute;*/
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
/*--------------*/
.topnav1 {
overflow: hidden;
}
.topnav1 a { vertical-align:top;
float: left;
display: block;
color: #09C;/* #f2f2f2;*/
text-align: left;
text-decoration: none;
font-size: 12px;
}
.topnav1 a:hover {
background-color: #0C9;
color: white;
}
.topnav1 .icon {
display: none;
}
.topnav1 a:not(:first-child) {display: none;}
.topnav1 a.icon {
float: left;
display: block;
}
.topnav1.responsive {position: relative;}
.topnav1.responsive .icon {
position: relative;/* absolute;*/
right: 0;
top: 0;
}
.topnav1.responsive a {
float: none;
display: block;
text-align: left;
}
li {
margin:0;
line-height:1.2;
}
p {margin-top:10px; margin-bottom:10px;}
.opis {
padding:10px 5px 10px 5px;
line-height:1.1;
font-size:14px;
border-radius: 40px;
}
header.header {
position:static;
z-index:999;
top:0;
left:0;
right:0;
padding-top:10px;
padding-bottom: 10px;
}
.main-nav {
float:left;
padding:5px 5px 5px 5px;
margin:0;
width: !important;
font-size: 12px;
font-weight:700;
letter-spacing:1.2px;
text-transform:uppercase;
background: #FCC;/*#52ae1d;*/
text-decoration:none !important;
color: #000; /*#fff;*/
display: inline-block;
vertical-align: middle;
position:relative;border-radius: 30px;
}
.main-nav > li {
display:inline-block;
margin:0;
line-height:1.1;
}
.main-nav-meni > li > a,
.main-nav > li > a {
font-size: 12px;
font-weight:700;
letter-spacing:1.2px;
text-transform:uppercase;
background:#fcc:/*#52ae1d;*/
text-decoration:none !important;
color:#000;/* #FFF;*/
display:inline-block;
vertical-align:top;
margin-right: 10px;
position:relative;
}
.main-nav > li > a:hover {color: red;}
.main-nav > li.active > a {color: red;}
.main-nav a:hover {
background-color:#fff;/*#fff;*/
color: f00;
font-weight:700;
}
.opis-nav {
float:left;
padding:3px 3px 3px 3px;
margin:0;
width: !important;
font-size: 12px;
font-weight:700;
color:#000;/* #fff;*/
letter-spacing:1.2px;
text-transform:uppercase;
text-decoration:none !important;
background:#fcc;/*#52ae1d;*/
display: inline-block;
vertical-align: middle;
position:relative;border-radius: 20px;
}
.opis-nav > li {
display:inline-block;
margin:0;
line-height:1.1;
}
.opis-nav > li > a {
font-size: 12px;
font-weight:700;
letter-spacing:1.2px;
text-transform:uppercase;
background:#fcc;/*#52ae1d;*/
text-decoration:none !important;
color: #000;
display:inline-block;
vertical-align:top;
margin-right: 5px;
position:relative;
}
.opis-nav > li > a:hover,
.opis-nav > li.active > a {
color:#00f !important;
}
.foot1{
display:inline-block; 
vertical-align: middle;
position:relative;
padding:2px;
padding-bottom:2px;
padding-top:2px;
padding-left:2px;
margin:0;
width: 100%;
background-color:#6fc; border-radius: 15px; text-align:center;
}
.foot2{
display:inline-block; 
vertical-align: middle;
position:relative;
padding:5;
padding-bottom:5;
padding-top:5;
padding-left:5;
margin:0;
width: 100%;
background-color:#ccc; border-radius: 15px; text-align:center;
}
.index-page .main-nav > li > a,
.index-page  .user-nav > a {
color:#fff;
}
.main-nav > li > a:hover,
.user-nav > a:hover,
.main-nav > li.active > a {
color:#00f !important;
}
.title {
margin: 0;
position: relative;
width: 100%;
text-align: center;
}
.product-items {
background:#faf8f0;
padding:10px 5px 10px 5px;
}
.product-item {
width:25%;
float:left;
padding:10px 5px 10px 5px;
}
.product-item a {
position:relative;
display:block;
color:#222;
background: #fff;
border-radius:5px;
overflow:hidden;
text-align:center;
padding-top:30px;
height:250px;
text-decoration:none !important;
-webkit-transition:.3s ease-out;
transition:.3s ease-out;
}
.product-item a:hover {
box-shadow:0 35px 35px -35px rgba(101,93,78,.5);
color: #000;
background: #fff;
text-decoration:none;
color: #39F !important;
}
.product-item a:before,
.product-item a:after {
content:'';
display:block;
position:absolute;
left:50%;
opacity:0;
}
.product-item a:hover:before,
.product-item a:hover:after {
opacity:1;
}
.product-title,
.product-info {
max-width:330px;
margin-left:auto;
margin-right:auto;
}
.product-title {
font-size: 20px;
margin:8px auto;
}
.product-info {
font-size:14px;
color:#7f858f;
line-height:1.7;
margin-bottom:20px;
height:92px;
}
/* Products catalog */
.products-catalog {
padding:10px 5px 10px 5px;
background: #fff;
font-size: 15px;
font-style:normal;
line-height:1;
}
.catalog-items {
margin:0 -10px;
}
.catalog-item {
width:25%;
float:left;
padding:10px 5px 10px 5px;
clear:none;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
padding:10px 5px 10px 5px;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: #fefdfc;
}
@media (max-width:1770px) {
.product-items {
padding:10px 5px 10px 5px;
}
.product-item {
padding:10px 5px 10px 5px;
width: 30%;
}
.product-items-header {
padding:10px 5px 10px 5px;
}
.main-nav {
font-size:20px;
}
.main-nav > li > a {
margin-right: 5px;
font-size: 20px;
margin-right:5px;
}
}
@media (max-width:1650px) {
.product-item {
width: 33.33%;
}
.main-nav {
font-size:18px;
}
.main-nav > li > a {
margin-right: 5px;
font-size: 18px;
margin-right:5px;
}
}
@media (max-width:1280px) {
.main-nav {
padding:10px 5px 10px 5px;
float:none;
font-size:16px;
}
.main-nav > li > a {
margin-right: 5px;
font-size: 13px;
margin-right:5px;
}
.product-items {
padding:10px 5px 10px 5px;
}
.product-item {
padding:10px 5px 10px 5px;
width: 33.33%;
}
.product-items-header {
padding: 10px;
}
.product-title {
font-size: 18px;
font-weight: 600;
}
.product-info {
font-size: 13px;
height:110px;
max-width: 260px;
}
h3 {
font-size:15px;
margin: 0 0 20px;
}
}
@media (max-width:1160px) {
.product-item {
width: 33.33%;
}
.main-nav {
font-size:18px;
}
.main-nav > li > a {
font-size: 15px;
margin-right:5px;
}
.product-item a,
.product-items-header > div {
height:250px;
}
}
@media (max-width:1023px) {
.product-item {
width: 50%;
}
.product-item a {
padding:10px 5px 10px 5px;
height:200px;
}
.main-nav {
padding:10px 5px 10px 5px;
font-size: 14px;
font-weight:500;
letter-spacing:1.3px;
}
.main-nav > li > a {
font-size: 14px;
margin-right:5px;
}
}
@media (max-width:767px) {
p.manje {font-size:14px;}
.img-left { float:left; margin: 6px 10px 10px 6px; max-width:40%;height: auto;}
.img-right { float: right; margin: 6px 0 15px 10px; max-width:40%;height: auto;}
.container {
width:100%;
padding:10px 5px 10px 5px;
}
.header {
padding-top: 15px;
padding-bottom:5px;
}
.product-item {
width: 100%;
float: none;
}
.product-info {
display:none;
}
.product-item a {
padding:10px 5px 10px 5px;
height: auto;
}
.product-title {
font-size: 16px;
margin: 10px auto 20px;
}
.main-nav {
left:15px;
right:15px;
top:15px;
padding:10px 5px 10px 5px;
}
.index-page .main-nav {
border-top:1px solid rgba(255,255,255,.2);
position:absolute;
margin-top:0px;
}
.main-nav > li > a {
font-size: 12px;
margin-right: 15px;
letter-spacing: 1.2px;
font-weight: 400;
}
.product-items {
padding:10px 5px 10px 5px;
}
/*h3 {
font-size: 12px;
margin: 0 0 15px;
letter-spacing: 2px;
}*/
.product-item a:before,
.product-item a:after {
display:none;
}
}
@media (max-width:500px) {
p.manje {font-size:12px;}
.img-left { float:left; margin: 6px 10px 10px 6px; max-width:30%;height: auto;}
.img-right { float: right; margin: 6px 0 15px 10px; max-width:30%;height: auto;}
.container {
width:100%;}
.catalog-item {
width: 100%;
float:none;
}
.product-item {
padding:10px 5px 10px 5px;
width: 100%;
}
}
@media (min-width:768px){
p.manje {font-size:9px;}
.container{
width:750px}
}
</style>