/*--  RADOVI  --*/

#body.body-radovi {
  height: 80% !important;
}


.radovi {
  height:100%;
}

/*--  ----------------  --*/
/*--  ASIDE NAVIGATION  --*/
/*--  ----------------  --*/

.radovi aside {
  width:170px;
  float: left;
  margin-bottom: 25px;
}

.radovi aside nav ul li {
  padding-bottom: 20px;
  cursor: pointer;
}

.radovi aside nav ul li:last-child {
  padding-bottom: 0;
}

.radovi aside nav ul li a {
  display: block;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 0.75em;
  color: #9da3ac;
  line-height: 1.2em;
}

.radovi aside nav ul li a:hover {
  color: black;
}

.radovi aside nav ul li a.active {
  color: black;
}

.radovi aside nav ul li ul li span.bullet-nav {
  padding: 0 30px 32px 0;
  float: left;
}

.radovi aside nav ul li ul li span.year-nav{
  display:block;
}

.radovi aside nav ul li ul a .image-nav{
  display:none;
}

.radovi aside nav ul li ul {
  display:none
}

.radovi aside nav ul li.active ul {
  display:block;
}



/*--  ----------------  --*/
/*--  THUMB NAVIGATION  --*/
/*--  ----------------  --*/

.radovi .thumbwraper {
  position: relative;
  margin-left: 25px;
  float: left;
  width: 195px;
}

/*-- BUTTON UP --*/

.radovi .thumbwraper .button-up {
  position: absolute;
  width: 100%;
  height: 30px;
  margin-bottom: 0;
  cursor: pointer;
  background-color: white;
  z-index: 0;
  opacity: 0;
  -webkit-transition:opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.radovi .thumbwraper .button-up span {
  position: absolute;
  font-family: 'Anaheim', sans-serif;
  font-size: 0.9em;
  color: #9da3ac;
  left: 45%;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
}

.radovi .thumbwraper .button-up.active {
  z-index: 10;
  opacity: 1;
  -webkit-transition:opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.radovi .thumbwraper .button-up:hover span {
  color: black;
}

/*-- SCROLL CONTAINER --*/

.radovi .thumbwraper .scroll-container {
  height: 735px;
  overflow: hidden;
  position: relative;
}

/*-- SCROLL INNER --*/

.radovi .thumbwraper .scroll-container .scroll-inner {
  position: absolute;
  top: 0;
  -webkit-transition:top 0.6s ease-out;
  transition: top 0.6s ease-out;
}

/*-- TEXT --*/

.radovi .thumbwraper .scroll-container .scroll-inner div.text {
  font-family: 'Lato', sans-serif;
  color: black;
  margin-bottom: 10px;
  cursor: pointer;
}

.radovi .thumbwraper .scroll-container .scroll-inner div.text .heading {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 0.6em;
}

.radovi .thumbwraper .scroll-container .scroll-inner div.text .desc {
  font-weight: 400;
  margin-bottom: 6px;
  font-size: 0.3em;
}

.radovi .thumbwraper .scroll-container .scroll-inner  div.text .text {
  font-weight: 300;
  text-align: justify;
  font-size: 0.3em;
  line-height: 1.4;
}

.radovi .thumbwraper .scroll-container .scroll-inner div.text span {
  background-color: #b0b0b0;
}

.radovi .thumbwraper .scroll-container .scroll-inner div.text img {
  width: 100%;
}


/*-- THUMBS --*/

.radovi .thumbwraper .scroll-container .scroll-inner .thumbs {
  margin-left: -2px;
}

.radovi .thumbwraper .scroll-container .scroll-inner .thumbs nav ul li {
  position: relative;
  width: 96px;
  height: 62px;
  margin-left: 2px;
  margin-bottom: 2px;
  float: left;
  overflow: hidden;
  background-color: white;
}

.radovi .thumbwraper .scroll-container .scroll-inner .thumbs nav ul li img{
  position: absolute;
  min-width: 100%;
  max-width:100%;
  left:50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 1;
}


.radovi .thumbwraper .scroll-container .scroll-inner .thumbs nav ul li img.active{
  opacity:0.4;
}


/*-- BUTTON DOWN --*/

.radovi .thumbwraper .button-down {
  position: absolute;
  width: 100%;
  height: 35px;
  margin-top: 10px;
  bottom: 0;
  cursor: pointer;
  background-color: white;
  z-index: 0;
  opacity: 0;
  -webkit-transition:opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.radovi .thumbwraper .button-down span {
  position: absolute;
  font-family: 'Anaheim', sans-serif;
  font-size: 0.9em;
  color: #9da3ac;
  left: 46%;
  bottom: 0;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}

.radovi .thumbwraper .button-down.active {
  z-index: 10;
  opacity: 1;
  -webkit-transition:opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.radovi .thumbwraper .button-down:hover span {
  color: black;
}


/*--  ----------------  --*/
/*--   MAIN CONTAINER   --*/
/*--  ----------------  --*/

.radovi #mainFrame {
  opacity: 1;
  position: relative;
  font-family: 'Lato', sans-serif;
  margin-left: 430px;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  height: 75vh;
}

.radovi #mainFrame.unactive {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.radovi #mainFrame #frame-text {
  overflow: hidden;
}

.radovi #mainFrame h1 {
  font-weight: 400;
  font-size: 1em;
  margin-bottom: 7px;
}

.radovi #mainFrame .desc {
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1.3em;
  margin-bottom: 21px;
}

.radovi #mainFrame .text {
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1.5em;
  color: #9da3ac;
}

.radovi #mainFrame #frame-img {
  font-family: lato, sans-serif;
  font-weight: 400;
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.radovi #mainFrame #frame-img.unactive {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.radovi #mainFrame #frame-img .radovi-tekst {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 0.75em;
  line-height: 1.3em;
  color: #9da3ac;
}

.radovi #mainFrame #frame-img .tekstlinkovi,
.radovi #mainFrame #frame-img .istrlinkovi{
  margin-top: 20px;
  font-weight: 400;
  font-size: 0.75em;
  line-height: 1.3em;
  line-height: 1.3em;
  color: #9da3ac;
}

.radovi #mainFrame #frame-img a {
  display: block;
  font-weight: 400;
  font-size: 0.75em;
  line-height: 1.3em;
  color: #9da3ac;  
}

.radovi #mainFrame #frame-img a:hover {
  color: black;  
}

.radovi #mainFrame .frame-img-inner{
  width:100%;
  position: relative;
  height: 100%;
}

.radovi #mainFrame .image-desc {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 0.75em;
  line-height: 1.3em;
  color: #9da3ac;
  padding-top: 5px; 
}

.radovi #mainFrame .frame-img-inner img {
  cursor: pointer;
  max-height: 100%;
  max-width: 100%;
}

.radovi #mainFrame .frame-img-inner .videowraper {
  position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  overflow: hidden;
}

.radovi #mainFrame .frame-img-inner .videowraper iframe {
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



 /*--  --------------------  --*/
  /*--  MOB MAIN CONTAINER   --*/
  /*--  -------------------  --*/

  .radovi #mobMainFrame {
    display: none;
  }


/*********************************************/
/*********************************************/
/*             < 850 px
/*********************************************/
/*********************************************/



@media (min-width:0px) and (max-width:850px) {
  
  #body.body-radovi {
  height: auto !important;
}
  
  
  

  /*--  ----------------  --*/
  /*--  ASIDE NAVIGATION  --*/
  /*--  ----------------  --*/

  .radovi aside {
    width: 100%;
    float: none;
    padding: 0 25px 0 25px;
  }
  
  .radovi aside nav ul.unactive {
    display: none;
  }

  .radovi aside nav ul li {
    padding-bottom: 20px;
    cursor: pointer;
  }

  .radovi aside nav ul li:last-child {
    padding-bottom: 0;
  }

  .radovi aside nav ul li a {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.75em;
    color: #9da3ac;
    line-height: 1.2em;
  }
  

  .radovi aside nav ul li a:hover {
    color: black;
  }

  .radovi aside nav ul li a.active {
    color: black;
  }

  .radovi aside nav ul li ul li span.bullet-nav {
    display:none;
  }
  
  .radovi aside nav ul li ul li span.year-nav {
    display: inline;
  }
  
  .radovi aside nav ul li ul li span.year-nav::before {
    content: ", ";
  }

  .radovi aside nav ul li ul a {
    font-weight: bold;
    color: black;
  }
  
  .radovi aside nav ul li ul a .image-nav {
    height: 275px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 7px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
  }
  
  .radovi aside nav ul li ul a .image-nav img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
  }
  
  .radovi aside nav ul li ul li:first-child a {
    padding-top: 10px;
  }

  .radovi aside nav ul li.active ul {
    display:block;
  }
  
  



  /*--  ----------------  --*/
  /*--  THUMB NAVIGATION  --*/
  /*--  ----------------  --*/

  .radovi .thumbwraper {
    display:none;
  }

  /*--  ----------------  --*/
  /*--   MAIN CONTAINER   --*/
  /*--  ----------------  --*/

  .radovi #mainFrame {
    display:none;
  }
  
  /*--  --------------------  --*/
  /*--  MOB MAIN CONTAINER   --*/
  /*--  -------------------  --*/

  .radovi #mobMainFrame {
    display: block;
    padding: 0 25px;
  }
  
  .radovi #mobFrame.unactive {
    display:none;
  }
  
  .radovi #mobMainFrame a.prevButton {
    font-family: 'Anaheim', sans-serif;
    font-size: 0.8em;
    color: #9da3ac;
    float:left;
  }
  
  .radovi #mobMainFrame a.nextButton {
    font-family: 'Anaheim', sans-serif;
    font-size: 0.75em;
    color: #9da3ac;
    float:right;
  }
  
  .radovi #mobMainFrame h1 {
    clear:left;
    padding-top: 40px;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    font-weight: 700;
  }
  
  .radovi #mobMainFrame p.desc {
    padding: 20px 0 21px 0;
    font-family: 'Lato', sans-serif;
    font-size: 0.85em;
    line-height: 1.3em;
    font-weight: 700;
  }
  
  .radovi #mobMainFrame .text {
    font-weight: 400;
    font-size: 0.7em;
    line-height: 1.5em;
    color: #9da3ac;
  }
  
  .radovi #mobMainFrame img {
    width: 100%;
    margin-bottom: 6px;
  }
  
  .radovi #mobMainFrame img:first-of-type {
    margin-top: 25px;
  }
  
  .radovi #mobMainFrame .radovi-tekst {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.8em;
    line-height: 1.3em;
    color: #9da3ac;
  }

  .radovi #mobMainFrame .tekstlinkovi,
  .radovi #mobMainFrame .istrlinkovi{
    margin-top: 20px;
    font-weight: 700;
    font-size: 0.8em;
    line-height: 1.3em;
    color: black;
  }

  .radovi #mobMainFrame a {
    display: block;
    font-weight: 400;
    font-size: 0.8em;
    line-height: 1.3em;
    color: #9da3ac;  
  }
  
  .radovi .videowraper {
    position: relative;
	  padding-bottom: 56.25%; /* 16:9 */
	  padding-top: 25px;
	  height: 0;
    margin-bottom: 10px;
  }
  
  .radovi iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

}