/* Required height of parents of the Full Page Carousel for proper displaying carousel itself */
html,
body,
.view {
  height: 100%; }

html{
  scroll-behavior: smooth;
}

h1{
  color: #f57f20;
}

p{
  line-height: 1.6em;
  font-size: 1.2em;
  text-align: justify;
}

a{
  color: #f57f20;
}

a:hover{
  color: #000;
}

/* Full Page Carousel itself*/
.carousel {
  height: 100%; }
  .carousel .carousel-inner {
    height: 100%; }
    .carousel .carousel-inner .carousel-item,
    .carousel .carousel-inner .active {
      height: 100%; }

/* Navbar animation */
.navbar {
  background-color: rgba(255,255,255, 0.92); }

.top-nav-collapse {
  background-color: #fff; }

/* Adding color to the Navbar on mobile */
@media only screen and (max-width: 768px) {
  .navbar {
    background-color: #fff; } }

/* Footer color for sake of consistency with Navbar */
.page-footer {
  background-color: #f57f20; 
}

#glava{
  border-bottom: 2px solid #f57f20;
}

#glava h1{
  font-size: 64px;
  text-shadow: 1px 1px 5px #000;
}

@media only screen and (max-width: 768px) {
  #glava h1{
    font-size: 32px;
  }
}

.figure {
  position: relative;
  
  max-width: 100%;
}
.figure img.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}
.figure:hover img.image-hover {
  opacity: 1;
}