:root{
	--boja: #00ba65;/*#ec8828;*/
	--bojaTekst: #3b4a3f;
	--bojaPaleta: #00b7ff;
	--bojaSenka: #0082d2;
	--padSide: 20px;	
}

@media(min-width: 769px){
	:root{
		--padSide: 40px;	
	}
	
	.drugiBox{
		background-image: url("pic.jpg"), url("znakn.gif");
		background-repeat: no-repeat, no-repeat;
		background-size: 140px, 136px;
		background-position-x: 60px, 600px; /*calc(var(--pad) + var(--sir) - 50px);*/
		background-position-y: 0px, 2px;
		background-blend-mode: normal, darken;
		/*background-image: url("pic.jpg");	
		background-repeat: no-repeat;
		background-size: 200px;
		background-position-x: 250px;
		background-position-y: 0px;
		background-blend-mode: overlay;*/
		display: block;
		box-shadow: 0px 8px 8px var(--bojaTekst);
		background-color: var(--boja);
		color: white;
		padding: 40px var(--padSide) 20px 240px; /* top right bottom left */
		text-align: left;
	}
	
	.treciBox{
		width: 768px;	
	}
}

@media(max-width: 768px){
	.drugiBox{
		background-image: url("znakn.gif");
		background-repeat: no-repeat;
		background-size: 146px;
		/*background-position-x: calc(100vw-140px);/*60px; /*calc(var(--pad) + var(--sir) - 50px);
		background-position-y: 2px;*/
		background-position: calc(100% - 10px) center;
		background-blend-mode: darken;
		display: block;
		box-shadow: 0px 8px 8px var(--bojaTekst);
		background-color: var(--boja);
		color: white;
		padding: 40px var(--padSide) 20px 20px; /* top right bottom left */
		text-align: left;
	}
}


body, html{
	font-family: monospace;
	font-size: 16px;
	height: 100%;
	position: relative;
	width: 100%;
   margin: 0;
}

.strana{
		min-height:100%;
		position:relative;
}

a{
	color: inherit;
}


.prviBox{
	padding: 10px var(--padSide); /* top&bottom right&left */
	text-align: right;
}



.meni{
	background-color: var(--bojaTekst);
	padding-left: var(--padSide);
	padding-right: var(--padSide);
	padding-top: 5px;
}

.treciBox{
	padding: 20px var(--padSide) 100px var(--padSide);
}


@media(min-width: 769px){
	.treciBox{
		width: 768px;	
	}
}


.kraj{
	background-color: var(--bojaTekst);
	color: white;
	text-align: left;
	font-weight: 500;
	padding: 10px var(--padSide);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}


hr {
	color: var(--bojaSenka);
}



/****************************************************************/
.Xul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: inherit;
  width: 100px;
}

.dropdown{
	width: 160px;
}

.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
}

.dropdown:hover .dropbtn {
  /*background-color: var(--boja);*/
  color: white;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bojaPaleta); 
  min-width: 160px;
  box-shadow: 8px 8px 8px var(--bojaSenka);
  z-index: 1;
  padding-top: 5px;
  padding-bottom: 5px;
}

.dropdown-content a {
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
	background-color: var(--bojaSenka);
}

.dropdown:hover .dropdown-content {
  display: block;
}