* {
    box-sizing: border-box;
}

*{margin:0;padding:0;}

html {
    font-family: Arial, sans-serif;
	color:#555555;
}

body {
   background:#f5f5f5;
   text-align:center;
   }
.row:after {
    content: "";
    clear: both;
    display: block;
}

img {
max-width: 100%;
height: auto;
border:none;
}

a {
color:#555555;
text-decoration:none;
}


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top:0;
    left: 0;
	text-align:left;
   background-color:#dbdbdb;
    overflow-x: hidden;
    transition: 0.5s;
   
}

.sidenav a {
    padding: 8px;
    text-decoration: none;
    font-size: 25px;
    color: #f1f1f1;
    display: block;
	border-bottom:1px solid #ffffff;
    transition: 0.3s
}

.sidenav a.bl {
background-color: #555555;
}

.sidenav a.blu {
background-color: #008cba;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #ffffff;
}

.sidenav .closebtn {
position:relative;
left:80%;
padding:0 20px;
font-size:50px;
color:#555555;
}


.header p{
position:absolute;
top:10px;
right:5%;
font-size:36px;
color:#f5f5f5;
box-shadow:none;
cursor:pointer;
}

@media screen and (max-height: 680px) {
  .sidenav {padding-top: 1px;}
  .sidenav a {font-size: 16px;}
 .header p{
position:absolute;
top:15px;
right:5%;
color:red;
font-size:36px;
font-weight:bold;
color:#555555;
box-shadow:none;
cursor:pointer;
}
}


.header{
padding-top:10px;
padding-bottom:10px;
border-top: 10px solid #c5c5c5;
border-bottom: 10px solid #555555;
}

.container{
width:80%;
margin:0 auto;
}

.left{
width:23%;
margin-top:10px;
float:left;
}

.left ul{
   text-align:left;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
	}
.left ul li a{
	display:block;
	background:#555555;
	font-size:90%;
	font-weight:bold;
	color:#ffffff;
	border-bottom:1px solid #ffffff;
	padding:5px;
	}
.left ul li a:hover{
background:#5f5f5f;
}

.left ul.newsmenu{
margin-top:20px;
margin-bottom:20px;
}

.left ul.newsmenu li a{
background:#008cba;
}

.right{
width:73%;
float:right;
background:#ffffff;
padding:0 1%;
}
.right p.menu2{
 text-align:left;
 padding:5px;
 margin:2px 0;
 background:#757575;
 }
 
 .right p.menu2 a{
 font-size:90%;
 font-weight:bold;
 display:block;
 color:#ffffff;
 }
 
 .right p.menu2:hover{
 background:#7b7b7b;
 }

.right p.menu2 a span{
float:right;
margin-right:70%;
}


.natrag{
font-size:70%;
float:left;
margin-left:5px;
color:#7b7b7b;
}

.natrag:hover{
color:#555555;
}
.right form label{
width:100%;
float:left;
text-align:left;
font-weight:bold;
margin-bottom:5px;
}

.right form input,.right form textarea  {
width:100%;
padding:3px;
border:1px solid #cccccc;
background:#f1f1f1;
margin-bottom:10px;
float:right;
}


.right form input.sub, form input.subm{
border:none;
padding:5px;
background-color:#5bb50b;
color:#ffffff;
cursor:pointer;
cursor:hand;
}

.right form input.subm1{
float:left;
width:27%;
border:none;
padding-top :10px;
padding-bottom :10px;
color:#ffffff;
cursor:pointer;
cursor:hand;
}
.cl{
clear:both;
}

h2, h3,h4{
margin-top:10px;
margin-bottom:10px;
padding:5px 0;
background:#c5c5c5;

}

.clean{
color:red;
font-size:90%;
font-weight:bold;
}
.clean:hover{
text-decoration:underline;
}

.doplavo{
color:#2865d2;
font-size:90%;
font-weight:bold;
}

.doplavo:hover{
color:#2865d2;
font-size:90%;
font-weight:bold;
text-decoration:underline;
}


.doplavo span{
color:#555555;
text-decoration:none;
}
.doplavo span:hover{
text-decoration:none;
}

.pagination a{
margin:1px;
padding:1px 2px;
}
.pagination span.current{
background:#c5c5c5;
padding:1px 2px;
}

.leftimg {
padding:10px;
width:100%;
background:#ffffff;
margin-bottom:10px;
}

.leftimg img{
width:15%;
height:auto;
float:left;
padding:5px;
}
.leftimg div{
width:70%;
float:right;
}
.leftimg .sub{
float:right;
width:150px;
margin-left:10px;
}


a.slanje{
display:block;
color:#ffffff;
background-color:#008cba;
font-weight:bold;
padding:10px 30px;
margin-top:10px;
margin-bottom:10px;
}

a.slanje:hover{
background-color:#024c64;
}

a.slanjeaktivno{
display:block;
color:#ffffff;
background-color:#024c64;
font-weight:bold;
padding:10px 30px;
margin-top:10px;
margin-bottom:10px;
}

table{
 width:100%;
 font-size:80%;
 margin-bottom:15px;
 }
 
table, caption,th, td {
    border: 1px solid #cccccc;
    border-collapse: collapse;
}

caption{
border:none;
text-align:left;
padding:5px;
font-size:100%;
font-weight:bold;
}

th, td{
    padding: 2px 0;
    text-align: center;
}

.nalijevo{
text-align:left;
padding-left:2px;
}


table tr:nth-child(even) {
    background-color: #eee;
}
table tr:nth-child(odd) {
   background-color:#fff;
}
table th {
    background-color: #555555;
    color: white;
}
table tr.klik{
background-color:#d4daf4;
}

table tr.foc:hover{
background-color:#DBFBD9;
}

table a{
display:block;
}
table a:hover{color:red;}


.footer{
width:100%;
margin-top:5px;
}


@media screen and (max-width:680px) {
body {
   background:#ffffff;
   }
  .left{
  display:none;

}

.header img{
float:left;
margin-left:5%;
}
  .right{
width:100%;
float:right;
}
.container{
width:96%;
margin:0 auto;
text-align:center;
}
.leftimg img{
width:50%;
height:auto;
margin-left: 24%;
padding:2px;
}
.leftimg div{
width:100%;
}
.right form input.sub{
width:100%;
}

label{
font-size:80%;
font-weight:bold;
}
table{
font-size:70%;
}
th, td{
    padding: 5px 0;
   }
.right p.menu2 a span{
margin-right:10%;
}
}