* {
/*
    margin: 0;
    padding: 0;
*/
	box-sizing: border-box;
/*
    filter: blur(1px);
    -webkit-filter: blur(1px);
*/    
/*    backdrop-filter: blur(10px);*/
/*    backdrop-filter: sepia(90%);*/
    
}

/* scroll smooth */
html, body {
  scroll-behavior: smooth;
}

/* BODY */
body {  
    background: url(../slike/bg/bg.jpg) top fixed;
    background-size: 100%;
    font-family: Georgia, Times, Times New Roman, serif;
    position: relative;
    /* margin-left: 0; */
/*    margin: 0;*/
/*    margin-top: 7px;*/
/*    filter: blur(0);*/
/*    -webkit-filter: blur(0);*/
}

/* Headernav */
.headernav {
    z-index: 777;
    position: sticky;
    position: -webkit-sticky;  Safari
    padding: 0;
    background-color: #222222;
    opacity:0.97;
    max-width: 1360px;
    overflow: auto;
    margin: 0 auto;
    top: 0;
}

/*Topnav*/
.topnav {
  /* overflow: hidden; */
  z-index: 777;
  position: sticky;
  position: -webkit-sticky;  Safari
  padding: 0;    
  background-color: #222222;
  opacity:0.97;
  max-width: 1360px;
  overflow: auto;
  margin: 0 auto;
  top: 0;
}

.topnav a,
.headernav a {
    float: left;
    /* display: block; */
    color: #ff9933;
    padding: 14px 16px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 17px;
    text-align: center;
    text-decoration: none;  
	transition: 300ms;
}

.topnav a:hover, .headernav a:hover {
    background-color: #ff9933;
    color: #222222;
}

.topnav a.active, .headernav a.active {
  background-color: #ff9933;
  color: #222222;
}

.topnav .icon, .headernav .icon {
  display: none;
  background-color: #ff9933;
  color: #222222;
}

/*HEADER*/
.header {
    max-width: 1360px;
    margin: auto;
    box-sizing: border-box;
}

/*SLIDER*/
.slider-wrap {
    position: relative;
    margin: 5px auto;
    overflow:hidden;
}

.slider {
position: relative;
min-width: 1360px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.slider-wrapp {
position: relative;
max-width: 100%;
}

.sliderp {
margin: auto;
}

.slider-wrap-mfa {
position: relative;
max-width: 100%;
}

.slider-mfa {
margin: auto;
}

/* UL */

ul {
margin: 0;
padding: 0;
}

ul li {
list-style: none;
text-align: center;
}

ul li span {
display: inline-block;
vertical-align: middle;
width: 300px;
height: 250px;
}

.slider-arrow {
position: absolute;
top: 100px;
width: 30px;
height: 30px;
background-color: #222222;
opacity:0.9;
color: #fff;
font-size: 25px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}

.sa-left {
left: 10px;
}

.sa-right {
right: 10px;
}

.gslider-bcontext {
  position: relative;    
}

/*
.gslider-broj {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 17px;
  background-color: #222222;
  opacity: 0.8;
  font-size: 14px;
  font-weight: bold;
  color: white;
}
*/

.gslider-context {
  position: relative;  
}

.gslider-text {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom: 0px;
  background-color: black;
  opacity: 0.8;
  font-weight: bold;
  color: white;
}

/*MAIN*/
.main {
    display:flex;
    max-width: 1360px;
    overflow:hidden;
    margin: auto;
    flex-wrap:wrap;
    margin-bottom: 7px;
}

.b1 {
    order: 1;
	background: #222222;
	width: 25%;
    padding:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
    color: #ff9933;
	margin-top:7px;
}

.b1 a {
	padding:8px;
	display:block;
    color: #ff9933;
	text-align: left;
    text-decoration: none;
/*    font-weight: bold;*/
    margin-top:7px;
/*    transition: 0.2s;*/
}

.b1 a:hover{
    color: #f24f24;
	font-weight: bold;
    text-shadow: 2px 2px 8px #d9480f;
/*    text-shadow: 2px 2px 8px #FF0000;    */
/*    text-shadow: 0 0 3px #FF0000;*/
/*    text-shadow: 0 0 3px #d9480f;*/
/*    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;*/
}

.b2 {
    order: 2;
    background: url(../slike/bg/bgc.jpg); background-attachment: fixed; background-position: center;
	width: 55%;
	padding: 0 20px;
	margin-top: 7px;
    text-align:justify;
    font-size: 19px;
}

/* TOPBTN */
#topBtn {
  display: none;
  position: fixed;
  right: 10px;
  /* left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  */
  bottom: 60px;    
  z-index: 778;
  outline: none;
  color: #fff;
  cursor: pointer;
  padding: 12px 0 0 0;
  width: 45px;
  aspect-ratio: 1;
  background: #222222;
  border: 1px solid #fff;
  border-radius: 5px;
  opacity: 95%;
}
#topBtn:hover {
  background-color: #ff9933;
}
/* BOTTOM BTN */
#botBtn {
  display: none;
  position: fixed;
  right: 10px;
  /* left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  */
  bottom: 10px;    
  z-index: 778;
  outline: none;
  color: #fff;
  cursor: pointer;
  padding: 0 0 0 0;
  width: 45px;
  aspect-ratio: 1;
  background: #222222;
  border: 1px solid #fff;
  border-radius: 5px;
  opacity: 95%;
}
#botBtn:hover {
  background-color: #ff9933;
}

/* STRELICE */
.arrowu {
  border: solid #fff;
  border-width: 0 7px 7px 0;
  display: inline-block;
  padding: 7px;
}
.arrowd {
  border: solid #fff;
  border-width: 0 7px 7px 0;
  display: inline-block;
  padding: 7px;
}
.arrow-right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.b2 h3 {
    text-align: center;
}
.b2 a {	
	color: #0000FF;
	font-weight: bold;
    text-decoration: none;
}
.b2 a:hover{
    color:#f24f24;
	text-decoration: none;
}

/* PROBA BTN */
#probaBtn {
  display: none;
  position: fixed;
  /*
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  */
  bottom: 150px;
  z-index: 778;
  outline: none;
  color: #fff;
  cursor: pointer;
  padding: 12px 0 0 0;
  width: 45px;
  aspect-ratio: 1;
  background: #222222;
  border: 1px solid #fff;
  border-radius: 5px;
  opacity: 95%;
}
#probaBtn:hover {
  background-color: #ff9933;
}

/* B3 */
.b3 {
    order: 3;
	background: #222222;
	width: 20%;
	padding:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	text-align:left;
    color: #ff9933;
    margin-top:7px;
}

.b3 a {	
	color: #ff9933;
    text-decoration: none;
}
.b3 a:hover{
    color:#f24f24;
	font-weight: bold;
    text-shadow: 2px 2px 8px #d9480f; 
}

/* Content 'postovi' */
.container {
    display: flex;
    flex-wrap: wrap;
}
.container div {
    /* text-align: justify; */
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /*for IE9+,F-fox4+,Opera,Chrome*/
}

.respimg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 5px;
}

.zoom {
  transition: transform .2s;
  margin: 0 auto;
}
.zoom:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05);
}

.darker {
    transition: transform .3s;
}
.darker:hover{
    filter: brightness(50%);
}

.gallery {
    margin: 10px 10px;
}
.gallery img {
  transition: 0.5s;
  padding: 10px;
  max-width: 135px;
  max-height: 135px;
}
.gallery img:hover {
  filter: grayscale(50%);
  transform: scale(1.1);
}

.spotlight {
}

/*FONT*/
.redfo {
    color: red;
}

.blufo {
    color: #3b8dbd;
}

.blufo a:hover {
    color: yellow;
}

#kategorija {
    color: #3b8dbd;
/*    font-weight: bold;*/
}

#kategorija a {
    color: green;
}

.kategorija {
    color: #3b8dbd;
    font-weight: bold;
}

.kategorija a {
    color: #3b8dbd;
}

/*a:link {
	color: green;
}*/

/* ANCHOR PADDING */
.anchor-padding {
  display: block;
  padding-top: 50px;
}

/* a skok */
.askok {
  display: block;
  padding-top: 30px;
}

/* BTNS */
.btn-next {
    font-size: 16px;
    padding: 12px 22px;
}

.btn-next:link,
.btn-next:visited {
    color: #000;
/*    text-decoration: none;*/
    font-weight: 600;
    display: inline-block;
    border-radius: 100px;
    transition: background-color .3s;
    border: 1px solid dodgerblue;
}

.btn-next:hover:not(.active) {background-color: dodgerblue; color: #fff;}


/*MULTIMEDIA*/
.responsive-youtube{
  overflow:hidden;
  position: relative;
  /* padding-bottom: 56.25%; */
  padding-bottom: 65%;
  height: 0;
}
.responsive-youtube iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 90%;
  border-radius: 5px;
}

audio { width: 100%;
    filter: invert(100%);
}
audio:-moz-read-only {
    filter: invert(0%);    
}

.center {
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.right {
  text-align: right;
}
.left {
  text-align: left;
}

textarea {
    width: 100%;
    resize: none;
}

/* PAGINATION */
.pagination-naslov {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 0.5em;
    margin: 0.5em 0 0 0;
}

.pagination {
    display: inline-block;
    padding-bottom: 14px;
}

.pagination a {
    color: black;
    float: left;
    width: 70px;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid dodgerblue;
    margin: 0 4px;
}

.pagination a.active {
  background-color: dodgerblue;
  color: white;
  border: 1px solid dodgerblue;
}

.pagination a:hover:not(.active) {background-color: dodgerblue; color: white;}

/* FOOTER */
.footer {
/*
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    column-gap: 80px;
    grid-row-gap: 20px;
*/
    
	background-color:#222222;
    color: #ff9933;    
/*	font-family:Verdana, Arial, Helvetica, sans-serif;*/
    font-family: Verdana;
    font-size: 16px;
	padding:10px;
/*	margin-top:7px;*/
    
}

/*
.footer a {	
	color: #ff9933;
    text-decoration: none;
}
*/
/*.footer a:hover{*/
/*    color:#f24f24;*/
/*	font-weight: bold;*/
/*    text-shadow: 2px 2px 8px #d9480f; */
/*}*/

.sn {
    display: flex;
    color: #fff;
/*    text-align: center;*/
}

.copyright {
    grid-column: 1/-1;
    grid-row: 3;
    align-self: flex-end;
/*    justify-self: start;*/
    color: #fff;
/*	text-align:center;*/
}