.w3-flat-turquoise
{color:#fff;background-color:#1abc9c}
.w3-flat-emerald
{color:#fff;background-color:#2ecc71}
.w3-flat-peter-river
{color:#fff;background-color:#3498db}
.w3-flat-amethyst
{color:#fff;background-color:#9b59b6}
.w3-flat-wet-asphalt
{color:#fff;background-color:#34495e}
.w3-flat-green-sea
{color:#fff;background-color:#16a085}
.w3-flat-nephritis
{color:#fff;background-color:#27ae60}
.w3-flat-belize-hole
{color:#fff;background-color:#2980b9}
.w3-flat-wisteria
{color:#fff;background-color:#8e44ad}
.w3-flat-midnight-blue
{color:#fff;background-color:#2c3e50}
.w3-flat-sun-flower
{color:#fff;background-color:#f1c40f}
.w3-flat-carrot
{color:#fff;background-color:#e67e22}
.w3-flat-alizarin
{color:#fff;background-color:#e74c3c}
.w3-flat-clouds
{color:#000;background-color:#ecf0f1}
.w3-flat-concrete
{color:#fff;background-color:#95a5a6}
.w3-flat-orange
{color:#fff;background-color:#f39c12}
.w3-flat-pumpkin
{color:#fff;background-color:#d35400}
.w3-flat-pomegranate
{color:#fff;background-color:#c0392b}
.w3-flat-silver
{color:#000;background-color:#bdc3c7}
.w3-flat-asbestos
{color:#fff;background-color:#7f8c8d}

:root {
	--primary-color: white;/*#fff;*/
	--background-color:  white; /* #ebebeb;*//* #F8F8FF;*/ /*ghost white*/ /*#ecf0f1;*/ /*#e5e5e5;*/
	--text-color: #2c3e50;/*#2d2d2d;*/

	--menu-background-color: #2980b9;
	--menu-text-color: #ecf0f1;
	--submenu-background-color: #ecf0f1;
	--submenu-text-color: #2c3e50;
}


@font-face {
	font-family: 'OmoType';
	src: url('OmoType-BlackStdFour.woff2') format('woff2'),
	     url('OmoType-BlackStdFour.woff') format('woff'),
	     url("OmoType-BlackStdFour.ttf") format('truetype');
}

body, h1, h2, h3, h4, h5, h6 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, OmoType !important;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
}

body.noscroll{
    /*position:fixed;
	overflow:hidden;*/
	overscroll-behavior: contain;
}

h1, h2 {
	font-weight: bolder;
}

/*:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}*/

/*[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

body {
  font-family: "Lato", sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}

h1 {
    color: var(--heading-color);
    font-family: "Sansita One", serif;
    font-size: 2rem;
    margin-bottom: 1vh;
}

p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  /*border-bottom: 3px solid transparent;
  font-weight: bold;
  &:hover, &:focus {border-bottom: 3px solid currentColor;
  }
*/

:focus {
	background-color: #f1c40f;
	color: black;
}

  /* ################################################################################ */
.dark-mode {
	/*background-color: black;*/
	/*background-color: #121212;
	color: white;*/
	background-color: #2c3e50;/*ghost white*/ /*#ecf0f1;*/ /*#e5e5e5;*/
	color:  #F8F8FF;/*#2d2d2d;*/
  }

/*.logo {
	filter: invert(0%);
	src: url('slike/logo_b.svg');
	content: url('slike/logo_b.svg');
}*/

* {
	font-size: inherit;
	
		/*scroll-behavior: smooth;*/
	
	/*font-family: "Segoe UI", Calibri, Candara, Segoe, Optima, Arial, sans-serif;*/
	/*color: #444;*/
/*	font-family: 'Roboto' !important;*/
	/* Cantarell, BlinkMacSystemFont, Oxygen, Ubuntu, Roboto, 'Segoe UI', -apple-system, 'Open Sans', 'Helvetica Neue', sans-serif !important;*/
}

/*body, textarea{*/
	/*padding: 0 0 1em 0 !important;*/
	/*line-height: 1.6em !important;
}*/
/*h1,
h2,
h3,
h4,
h5,
h6,
body,
input,
textarea {
	font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

h1 {
	*font-size: 2.074em;
}

h2 {
	font-size: 1.728em;
}

h3 {
	font-size: 1.440em;
}

h4 {
	font-size: 1.200em;
}*/


/*h5{font-size:1.64em;}
		h6{font-size:1.10em;}*/



html {
	font-size: calc(15px + 0.390625vw);
}
		/*		
html,
body {
	font-size: 100% !important;
}*/

/*:root {
	--main-radius: 5px;
	--main-padding: 5px;
	--main-font-family : "Inter", sans-serif;
	--main-font-weight: 800;
}*/

.disable-text-selection{
	-ms-user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	 user-select:none;
 }

.izbornik {
	color: white;
	background-color: #2980b9;;
	background-color: var(--menu-background-color);
	/*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;*/
	border-radius: 4px 4px 0 0;
	/*font-size: 100% !important;*/
	border-bottom: #ecf0f1;
	border-bottom: var(--submenu-background-color);
	border-style: solid;
	border: #c0392b;
}

.sub_menu {
	color: var(--submenu-text-color); /* #000;*/
	background-color: #ecf0f1;
	background-color: var(--submenu-background-color);
	border-radius: 0px 0px 4px 4px;	
	border-bottom: 1px solid lightgray;
	/*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
	font-size: 100% !important;*/
}

/*
h2::before { 
	display: block; 
	content: " "; 
	margin-top: -118.3px; 
	height: 118.3px; 
	visibility: hidden; 
	pointer-events: none;
	background-color: tomato;
  }

.a {
	display: block; 
	content: " "; 
	margin-top: -118.3px; 
	height: 118.3px; 
	visibility: hidden; 
	pointer-events: none;
	background-color: tomato;	
}*/

/*
a {
	color: #fff;
	text-decoration-line: none;
}

a:link {
	color: #2980b9;
}

a:hover {
	text-decoration-line: underline;
	text-decoration-style: solid;
}

a:active {
	color: #2980b9;
}

a:visited {
	color: #2980b9;
	font-weight: bold;
}*/

p {
	margin: 0;
	padding: 0 0 1em 0;
	line-height: 1.6em;
}

ul.block {
	list-style-type: square;
}

ul.none {
	list-style-type: none;
}

a.block
{
	text-decoration: none;
	text-align: left;
	/*color: #2196F3;*/
	min-width: 100%;
}
/*ul {
	padding-left: 2em;
	padding-right: 2em;
	margin-left: 0;
}*/

.izdvojeno {
	/*text-align: right;*/
	list-style-type: square;
	overflow-y: auto;
	/*padding-right: 2em;
	line-height: 2em;*/
}

/*
.ex1 {
	max-width: 100%!important;
	width: 100%;
	margin: auto;
	align-content: center;
	background-color: #ff9800;
	margin-left: 1em; 
}*/

.x_container {
	/*border-style: solid;
			border-width: medium;
			border-radius: 8px;
			padding-top: 4px;
			padding-left: 4px;
			padding-right: 4px;
			padding-bottom: 2px;*/
	text-align: center;
	max-width: 100%; 
	width: 100%;
	background-repeat: no-repeat;
	/*background-clip: border-box;*/
	/*background-size: 100% auto; */
}

.x_container.film {
	border-color: lightgray !important;
}

.x_container.glazba {
	border-color: #8bc34a !important;
	/*background-image: url('slike/OIP_2');*/
	background-position: top;
}

.x_container.publicistika {
	border-color: #ff9800 !important;
}

.x_container.beletristika {
	border-color: #87CEEB !important;
}

.ex2 {
	border-width: 1px;
	border-color: lightgray;
	border-style: hidden hidden hidden solid;
}

/*
.w3-bar-item active { 
	background-color: yellow;
	color: white;
}*/

.litle_header {
	font-size: small;
	font-weight: bold;
	/*background-color: orange;*/
	color: orange;
	margin: 0;
	padding: 1em 0 0 0;
	line-height: 1.6em;
}

.litle_header.Izlozba {
	color: orange;
}
.litle_header.Radionica {
	color: blue;
}
.litle_header.Predstavljanje {
	color: green;
}

.litle_header.podnaslov {
	font-weight: bold; /*normal*/
	color: unset;
	padding: 0 0 0 0;
	opacity: 50%;
	min-width: 160px;
	max-width: 160px;
	width: 160px;
}
.litle_header.naslov {
	font-weight: bold;
}


figure {
	height: 0;	
	margin: 0;
	padding: 0;
	width: 100%;
}

figcaption {
	font-size: small;
	padding: 2px 8px 2px 8px; /*top right bottom left*/
	background-color: #333;
	color: #fff;
	/*padding-left: 8px;
	padding-right: 8px;*/
}

#myBtn {
	display: none;
	font-size: 24px;
	border: 0px;
	border-color: transparent;
	outline: none;
	/*background-color: black;*/
	background-color: rgba(255, 0, 0, 0.9); /* rgba(0,0,0, 0.6);*/
	color: white;
	cursor: pointer;
	/*padding: 10px;*/
	position: fixed;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	right: 30px;
	bottom: 20px;
	z-index: 99;
	font-weight: bold;
	transition: all 0.25s linear;
	text-align: center;
	width: 54px;
	height: 54px;
	/*opacity: 50%;*/
	border-radius: 8px;
	/*4px;*/
}

#myBtn:hover {
	background-color: #2980b9;
	/* #555; w3-flat-belize-hole*/
}

#move-to-top {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	position: fixed;
	right: 10px;
	bottom: 45px;
	z-index: 25;
	transition: all 0.25s linear;
	/*-webkit-backface-visibility: hidden;*/
	text-align: center;
	width: 44px;
	height: 44px;
	border-radius: 3px;
}

.btn-group button {
  background-color: #4CAF50; /* Green background */
  border: 1px solid green; /* Green border */
  color: white; /* White text */
  /*padding: 10px 24px;*/ /* Some padding */
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 2px;
  padding-right: 2px;
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
  font-size: small;
  text-align: center; 
  margin-bottom: 2px;
  width: 25%;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 26px;
  }
  
  .slider.round:before {
	border-radius: 50%;
}

#omot {
	/*background-color: yellow;*/
	width: 75%;
}

#sadrzaj {
	float: left;
	/*background-color: darkblue;*/
	width: 100%;
}

#desni {
	float: left;
	/*background-color: greenyellow;*/
	width: 100%;
}

#lijevi {
	float: left;
	/*background-color: lightgray;*/
	width: 100%;
}

.m_sticky {	
	position: -webkit-sticky;
	position: sticky;
	top: 128px;
}

.sticky {	
	position: -webkit-sticky;
	position: sticky;
	top: 0;/*118.3;*/
	/*background-color: yellowgreen;*/
}


/*.anchor {
	padding-top: 426.3px;
	margin-top: -426.3px;
}*/

body {
	margin: 0px 0px 0px 0px !important;	/*top right bottom left*/
	padding: 0px 0px 0px 0px !important;
}

.holds-the-iframe {
	/*background:url('/slike/giphy.webp') center center no-repeat;*/
	background:url('/slike/loader.gif') center center no-repeat;
}

#our_logo .darktheme,
#our_logo .lighttheme {
 display: none;
}

[data-theme="dark"] #our_logo .darktheme {
  display: inline;
}

[data-theme="light"] #our_logo .lighttheme {
  display: inline;
}

/* 'light' ili 'dark' opcije 
@media (prefers-color-scheme: dark) {
	:root {
	  --primary-color: #455363;
	  --background-color: #1f2935;
	  --text-color: #fff;
	}
  }
  */

/* ###################################################################################################################*/
@media only screen and (orientation: portrait) {
	/*html{
		max-width: 280px!important;	
	}

	@media only screen and (min-device-width: 608px) {
		html, body {			
			background-color: red!important;
			margin: 0!important;
			padding: 0!important;
			max-width: 280px!important;
		}
	}*/
	h1, h2, h3 {text-align: center;}
	html, body, ul {text-align: left;} /*p,*/
	#visina {
		max-width: 100%;
		margin: auto;
		width: 100%;
	}
	#NAV_AKTUAL {border-bottom:1px solid #ccc!important}
	#NAV_O_NAMA {border-bottom:1px solid #ccc!important}
	#NAV_ODJELI {border-bottom:1px solid #ccc!important}
	#NAV_SADRZA {border-bottom:1px solid #ccc!important}
	#NAV_KATALO {border-bottom:1px solid #ccc!important}	
	#omega {height: 100vh;}

	#opcija1 {
		padding: 0px 0px 0px 0px !important;
	}
	#omot {
		/*background-color: yellow;*/
		width: 100%;
	}
	
	#sadrzaj {
		float: left;
		/*background-color: darkblue;*/
		width: 100%;
	}
	
	#desni {
		float: left;
		/*background-color: greenyellow;*/
		width: 100%;
	}
	
	#lijevi {
		float: left;
		/*background-color: lightgray;*/
		width: 100%;
	}
}
/* ###################################################################################################################*/
@media only screen and (orientation: landscape) {            
	/*samsung*/
	/*body {
		background-color: greenyellow;
	}*/
	/*#visina {
		max-width: 95%;
		margin: auto;
		width: 95%;
	}*/
	#omega {height: 100vw;}
	#opcija1 {
		padding-right: 0px;
		/*font-family: var(--main-font-family);
		font-weight: var(--main-font-weight);*/
	}
	#omot {
		width: 75%;
	}
	#lijevi {
		width: 25%;
	}	
	#sadrzaj {
		 width: 100%;
	}
	#desni {
		width: 100%;
	}	

	/*@media screen and (min-device-width: 1025px) {
		body {
			background-color: yellow;
		}
	}*/

	/*Noa, Huawei */
	@media only screen and (min-width: 480px), (min-width: 768px) {
		/*body {
			background-color: orange;
		}
		main.ex1 {
			background-color: orange;
		}*/
		#opcija1 {
			padding: 0px;
		}
		#omot {
			width: 100%;
		}
		#lijevi {
			width: 100%;
		}	
		#sadrzaj {
			width: 100%;
		}
		#desni {
			width: 100%;
		}			
	}

	/*Desktop*/
	@media only screen and (min-width: 801px) {
		/*body {
			background-color: lightblue;
		}
		main.ex1 {
			background-color: lightblue;
		}*/
		/*#visina {
			background-color: gray;
		}*/
		#opcija1 {
			padding-left: 15px;
			padding-right: 15px;
		}
		#omot {
			width: 75%;
		}
		#lijevi {
			width: 25%;
		}	
		#sadrzaj {
			 width: 70%; /*70*/
		}
		#desni {
			width: 30%; /*30*/
		}			
	}
}
/* ###################################################################################################################*/
/*blockquote {
	display: block;
	border-width: 2px 0;
	border-style: solid;
	border-color: #eee;
	padding: 1.5em 0 0.5em;
	margin: 1.5em 0;
	position: relative;
  }
  blockquote:before {
	content: '\201C';
	position: absolute;
	top: 0em;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	width: 3rem;
	height: 2rem;
	font: 6em/1.08em 'PT Sans', sans-serif;
	color: #666;
	text-align: center;
  }
  blockquote:after {
	content: "\2013 \2003" attr(cite);
	display: block;
	text-align: right;
	font-size: 0.875em;
	color: #e74c3c;
  }*/

  blockquote{
	display:block;
	background: #eee; /* #fff;*/
	padding: 30px 30px 30px 60px;
	margin: 0 0 20px;
	position: relative;
	
	/*Font*/
	font-family: Georgia, serif;
	font-size: 16px;
	line-height: 1.6;
	color: #666;
	text-align: left;
	
	/*Borders - (Optional)*/
	/*border-left: 15px solid orange;
	border-right: 2px solid orange;*/
	
	/*Box Shadow - (Optional)*/
	/*-moz-box-shadow: 2px 2px 15px #ccc;
	-webkit-box-shadow: 2px 2px 15px #ccc;
	box-shadow: 2px 2px 15px #ccc;*/
  }
  
  blockquote::before{
	content: "\201C"; /*Unicode for Left Double Quote*/
	
	/*Font*/
	font-family: Georgia, serif;
	font-size: 60px;
	font-weight: bold;
	color: #999;
	
	/*Positioning*/
	position: absolute;
	left: 10px;
	top:5px;
  }
  
  blockquote::after{
	/*Reset to make sure*/
	content: "";
  }
  
  blockquote a{
	text-decoration: none;
	background: #eee;
	cursor: pointer;
	padding: 0 3px;
	color: #c76c0c;
  }
  
  blockquote a:hover{
   color: #666;
  }
  
  blockquote em{
	font-style: italic;
  }