.naslov{
  box-shadow:-7px -7px 20px #888 inset;
  padding:2px 10px 10px 10px;
  background:#eee;
  border-size:0;
}
H1{
	color: #147;
	font-size:xxlarge;
	font-weight: bold;
	text-align: center;
	text-shadow: 5px 5px 15px #c90;
}
H2{
	background-image:linear-gradient(to right,#369 0%, #59c 100%);
	color:#eee;
	padding:15 0 15 20;
	font-weight:bold;
	font-size:xlarge;
	font-align: left;
	margin-top:5;
}
H3{
	background-color:#eee;
	color: #444444;
	padding:10;
	font-size:large;
	font-weight: bold;
	font-align: left;
	margin-left:-10;
}
H4{
	color: #258;
	font-size:medium;
	font-weight: bold;
	font-align: left;
	line-height: 1;
	display:inline;
}
hr{border:1px dotted #000;}
div.sl{
	float:left;
	padding: 0px 10px 0px 0px
}
div.v1{
  float:left;
  width:20;
  height:30;
  border-width:0;
  background:linear-gradient(to bottom, #cc9900 0%, #ffffcc 100%);
  margin: 3 -20 0 0;
  position:relative;
  left:-30px;
  border-radius:5px;
}
div.v2{
  float:left;
  width:10;
  height:20;
  border-width:0;
  background:linear-gradient(to bottom, #369 0%, #9cf 100%);
  margin: 5 -10 0 0;
  position: relative;
  left: -20px;
  border-radius:5px;
}

img.a{
	height:60px;
	border-style: solid;
	border-width: 2px;
	border-color:#369;
	border-radius:15px;
}
p.potpis{
  font-size:small;
  font-style:italic;
  color:#369;
  align:right;
}
* {box-sizing: border-box;}

.Foto {
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  border-color:#369;
  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: 1000px;
}

.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:center;
  height:60px;
}

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

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

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

div.desna{
  width:95%;
  max-width:960;
  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:100%
  max-width:960;
  text-align:left;
  box-shadow:2px -2px 13px #888;
  padding:20px 30px 20px 20px;
  font-size:normal;
  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;
}

#main {
  display:flex;
  max-width:1440;
  justify-content:center;
  padding:10;
  margin:auto;
}
#main > article {
  flex: 1.5 1.5 700;
}
#main > aside {
  flex: 1.5 1.5 330;
}
#main > nav {
  flex: 1.5 1.5 190;
  order: -1;
}
@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 45%;order:3;}
  #main > nav {flex 1 1 45%;order:2;}
  div.leva {max-width:450;}
  div.desna {max-width:450;}
  div.desnacolona {max-width:450;} 
}
@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;}
  #main > nav {flex 1 1 100%;order:3;}
  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;}
  #main > article {flex 1 1 100%;}
  #main > aside {flex 1 1 100%;order:2;}
  #main > nav {flex 1 1 100%;order:3;}
  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;}
  div.button{font-size:small;padding:5px;height:30px;}
}

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