body{
	font-family: "Verdana", serif;
	color:#444;
	background-color:#fff;
	width:100%;
	position:relative;
	text-align:center;
	margin:0;
	padding:0;
	max-width:1440;
	margin:auto;
	background-image:url(texture2.jpg);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

.naslov{
  box-shadow:-7px -7px 20px #888 inset;
  padding:2px 10px 10px 10px;
  background:#eee;
  border-size:0;
  position:sticky;
  left:0;
  top:60;
  width:100%;
}
H1{
	color: #630;<!--#147;-->
	font-size:xxlarge;
	font-weight: bold;
	text-align: center;
	text-shadow: 5px 5px 15px #c90;
}
H2{
	position:relative;
	background-image:linear-gradient(to right,#630 0%, #a74 100%);
	color:#eee;
	padding:15 0 15 20;
	font-weight:bold;
	font-size:xlarge;
	font-align: left;
	margin-top:5;
	z-index:-1;
}
H3{
	position:relative;
	background-color:#edb;
	color: #741;
	padding:10;
	font-size:large;
	font-weight: bold;
	font-align: left;
	margin-left:-10;
	z-index:-1;
}
H4{
	position:relative;
	color: #741;
	font-size:medium;
	font-weight: bold;
	font-align: left;
	line-height: 1;
	display:inline;
	z-index:-1;
}

H2 a{position:absolute;top:-155px;}
H3 a{position:absolute;top:-155px;}
H4 a{position:absolute;top:-155px;}

hr{border:1px dotted #000;}
div.sl{
	float:left;
	padding: 0px 10px 0px 0px
}

img.a{
	height:60px;
	border-style: solid;
	border-width: 2px;
	border-color:#741;<!--369-->
	border-radius:15px;
}

p.nav1{
  margin-left:5;
  padding-left:5;
  background-image:linear-gradient(to right,#630 0%, #c96 100%);
  color:#eee;
  margin-bottom:5;
  margin-top:0;
}

p.nav2{
  padding-left:10;
  margin-top:0;
  margin-bottom:0;
}

p.nav2:hover a:hover{color:#630;font-weight:550}

.potpis{
  font-size:small;
  font-style:italic;
  color:#630;
  text-align:right;
}
* {box-sizing: border-box;}

.Foto {
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  border-color:#630;
  border-style: solid;
  border-width: 2px;
  width:100%;
}

.Foto:hover {opacity: 0.7;}

.modalDialog {
        position: fixed;
	padding-top: 100px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
	overflow: auto;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 700px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1440px;
}

.caption {
  font-size:30px;
  font-weight:bold;
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}


/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}


/* Add Animation */
.modal-content, .caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

div.button{
  float:left;
  background: rgba(100,100,100,0);
  color:#eee;
  font-size:20px;
  font-weight:bold;
  padding:15px;
  vertical-align:center;
  text-align:left;
  height:60px;
}

div.button:hover{
  background:linear-gradient(to right, #630 0%, #c96 40%);
  color:#fc0;
}

div.desnodesno{
  display:flex;
  flex-direction:row;
  background:rgba(100,100,100,0);
  font-size:medium;
  color:black;
}

div.desnodesno:hover a:hover{color:#fc0;}

div.desnodesno:hover img{opacity:0.7;}

div.desni_header{
  min-width:150;
  margin:10;
}

div.desna{
  width:95%;
  max-width:450;
  text-align:right;
  box-shadow:-2px 2px 13px #888;
  padding:10px 5px 10px 10px;
  margin: 5px;
}

div.desnacolona{
  display:flex;
  flex-direction:column;
  max-width:450;
}

div.leva{
  width:95%;
  max-width:220;
  text-align:left;
  box-shadow:2px 2px 3px #888;
  padding:0 10px 10px 0;
  font-size:small;
  margin:5px;
}

div.srednja{
  display:flex;
  flex-direction:column;
  width:95%;
  max-width:1000;
  text-align:left;
  margin-left:20;
  margin-right:20;
  font-size:normal;
}

a{
  color:inherit;text-decoration:none;
}
a:hover{
  color:#fc0;
}

.potpis li {float: right;clear: right;padding-left:0;}

#main {
  display: flex;
  max-width: 1440;
  justify-content:center;
  padding: 10;
  margin:auto;
  z-index:-1;
}
#main > article {
  flex: 1.5 1.5 700;
}
#main > aside {
  flex: 1.5 1.5 330;
}
#nav {
  position:fixed;
  top:155;
  width:190;
}

.dropbtn {
  display:none;
  background-color: #630;
  padding: 16px;
  border: none;
}
.menu {
  position: relative;
  display: flex; flex-direction:row;
}

.dropdown-content {
  display:flex; flex-direction:row;
}

.dropdown-content a {
  display: flex; flex-direction:row;
}


@media only screen and (max-width: 1023px){
.dropbtn {
  display:block;
  padding: 6px;
  font-size: 16px;
  border: none;
}
.menu {
  position: relative;
  display: inline-block;
  z-index:10;
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100px;
  background:linear-gradient(to right, #630 0%, #c96 100%);
  z-index:20;
}

div.button{font-size:16px;height:inherit;padding:5px;}
.menu:hover .dropdown-content {display: block;}

}

@media only screen and (max-width: 1023px) and (min-width: 768px){
  #main {flex-wrap:wrap;}
  #main > article {flex 1 1 100%;}
  #main > aside {flex 1 1 100%;order:2;}
  #nav {width:150;}
  div.leva {max-width:450;}
  div.desna {max-width:760;}
  div.desnacolona {max-width:760;}
}


@media only screen and (max-width: 767px) and (min-width:400px){
  #main {flex-wrap:wrap;}
  #main > article {flex 1 1 100%;}
  #main > aside {flex 1 1 100%;order:2;}
  #nav {width:110;}
  div.leva {max-width:760;}
  div.desna {max-width:760;}
  div.desnacolona {max-width:760;} 
  div.desni_header{font-size:small;max-width:100;}
}
@media only screen and (max-width: 399px){
  #main {flex-wrap:wrap;margin:left:0;}
  #main > article {flex 1 1 100%;}
  #main > aside {flex 1 1 100%;order:2;}
  #nav {width:100%;}
  div.leva {max-width:400;}
  div.desna {max-width:400;}
  div.desnacolona {max-width:400;} 
  div.desni_header{font-size:small;max-width:100;flex-wrap:wrap;}
  div.desnodesno{flex-direction:column;}
  .potpis{font-size:normal;}
<!--  div.button{font-size:small;padding:5px;height:30px;}-->
}

.arrow{
      stroke:rgb(0,0,0);
      stroke-width:2; 
      marker-end:url(#markerArrow)
    }