@keyframes dropdownAnimacia {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
@keyframes podsekciaAnimacia {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

 h3{                /* text nad navbarom */
      font-size: 2vw;
      margin-bottom: 1.5vw;
      text-align: center;
      margin-top:0
      

      
    }

    
h3 img{             /* ikony nad navbarom */
  width: 2.5vw;
  position: relative;
  top: 0.35000000000000003vw;
  margin-left:0.5vw;
  margin-right:0.5vw;
}


.navbar-sekcia-cela{
  padding-top: 2.5vw;
  background-color: #F7FBFC;
}
.navbar-sekcia-cela a{
text-decoration: none;

}

.navbar-sekcia-cela li{
text-decoration: none;
}
.navbar{ /* navbar lista */

  justify-content: center;
  width: 100%;
  display: flex;
  padding-left:0;
  background-image: linear-gradient(to right, black, brown);
  }
 .dropdown-tlacidlo{

   padding: 1.15vw 1.4vw;
   display: flex;
   justify-content: center;
   text-align: center;
   align-items: center;
   color: white;
   position: relative;
   height: 40px;

   font-size: 1vw;
   perspective: 1000px;
   z-index: 3;
   height: 40px;
   
}
   
     .dropdown-tlacidlo:hover{
      background: #20305f ;
      cursor: pointer;
     }

     .dropdown-tlacidlo:hover .dropdown-menu-tlacidla .dropdown_tlacidla{
      display: block;
     }


 .dropdown-menu-tlacidla{
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   perspective: 1000px;
   z-index: 1;
   padding-left:0;
}
    .dropdown-menu-tlacidla li{
      background-attachment: fixed;
      display: none;
      color: white;
      background-color: #34495e;
  
      padding: 0.5vw 1vw; /* Adjust padding */
      font-size: 0.8vw; /* Adjust font size */
      opacity: 0;
    }
    .dropdown-menu-tlacidla li:hover{
      background-color: #516579;
    }
    
.dropdown:hover .dropdown-menu-tlacidla--animated{
  display: block;}

.dropdown-menu-tlacidla--animated{
  display: none;
    li{
      display: block;
      opacity: 1
    }}

  .dropdown_teoria{
    transform-origin: top center;
    animation: dropdownAnimacia 300ms 60ms ease-in-out forwards;
  }
  .dropdown_priklady{
    transform-origin: top center;
    animation: dropdownAnimacia 300ms 120ms ease-in-out forwards;
  }
  .dropdown_video{
    transform-origin: top center;
    animation: dropdownAnimacia 300ms 180ms ease-in-out forwards;
  }



  .dropdown-podtlacidlo{
    /* background: #212A3E; */
    padding: 1.15vw 2.75vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    font-size: 1vw;
    perspective: 1000px;
    z-index: 3;
      }

      .dropdown-podtlacidlo:hover{
        background: #475572 ;
        cursor: pointer;
      }
      .dropdown-podtlacidlo:hover .dropdown-menu-podtlacidla .dropdown_podtlacidlo{
        display: block;
      }
      

  .dropdown-menu-podtlacidla{
    position: absolute;
    top: 0%;
    left: 100%;
    width: 100%;
    perspective: 1000px;
    z-index: 1;
    padding-left:0;
    }

    .dropdown-menu-podtlacidla li{
      display: none;
      color: white;
      background-color: #1F2544;
      padding: 0.5vw 1vw;
      font-size: 0.8vw;
      opacity: 0;
    }

    .dropdown-menu-podtlacidla li:hover{
      background-color: #2D3250;
    }



  .dropdown-menu-podtlacidla--animated{
    display: none;}

  .dropdown-menu-podtlacidla--animated li{
    display: block;
    opacity: 1
    }

.podsekcia1{
  transform-origin: top right;
  animation: podsekciaAnimacia 300ms 60ms ease-in-out forwards;
}
.podsekcia2{
  transform-origin: top right;
  animation: podsekciaAnimacia 300ms 120ms ease-in-out forwards;
}
.podsekcia3{
  transform-origin: top right;
  animation: podsekciaAnimacia 300ms 180ms ease-in-out forwards;
}

  .skolske-logo{
    position: absolute;
    top:1.25vw;
    right:2.5vw;
    width:4.8vw;
    height:4.56vw;
  }


  @media screen and (min-width:1px) and (max-width:780px){

h3{               
  font-size: 2vw;


}

h3{            
  font-size: 3vw;
  margin-bottom: 1vw;
  
}
.dropdown-tlacidlo{

  padding: 1.15vw 2.75vw;
  font-size: 1.5vw;
}
.dropdown-menu-tlacidla{
  li{
   padding: 1.1vw 1vw;
   font-size: 1.1vw;}}


.dropdown-podtlacidlo{
  padding: 1.1vw 1vw;
   font-size: 1vw;
}}



.mobile-navbar {
  overflow: hidden;
  background-color: #121416;
  position: relative;
  display: none;
  }
  
.collapse-button{
  display: none;
}

  #temy a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  }

  .mb-subsekcia{
  margin-left:2vw;
  }
  .mb-sub-subsekcia{
  margin-left:3vw;
  }

  /* Style navigation menu links */
  .mobile-navbar a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  }
  
  /* Style the hamburger menu */

    
  /* Add a grey background color on mouse-over */
  .mobile-navbar a:hover {
  background-color: #222527;

  }
  .hamburger {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    }


      .sub-hamburger{
        color:#c2c2c2;
        position: relative;
        left:0.15rem;
        top:0.08rem;
      }
  /* Style the active link (or home/logo) */
  .hlavny-panel {
    background-image: linear-gradient(to right, black, brown);;
  color: white;
  }




  .mb-subsekcia {
    background-color: #17191b;
    }
  .mb-sub-subsekcia {
    background-color: #1c1e20;
    }

/* MOBILE NAV */
@media screen and (min-width:1px) and (max-width:800px){
.mobile-navbar{
  display: block;
}

/* Style the navigation menu */
.navbar-sekcia-cela{
  display: none;
}


} 


.dropdown-menu-podtlacidla-statistika {
  position: absolute;
  top: 0%;
  right: 100%; 
  width: 100%;
  perspective: 1000px;
  z-index: 2;
  padding-left: 0;
  background-color: #34495e;
}

.dropdown-menu-podtlacidla-statistika li {
  display: block;
  color: white;
  background-color: #1F2544;
  padding: 0.5vw 1vw;
  font-size: 0.8vw;
  opacity: 0;
}

.dropdown-menu-podtlacidla-statistika li:hover {
  background-color: #2D3250;
}

.dropdown-menu-podtlacidla-statistika--animated {
  display: none;
}

.dropdown-menu-podtlacidla-statistika--animated li {
  display: block;
  opacity: 1;
}

.podsekcia1-statistika {
  transform-origin: top left;
  animation: podsekciaAnimacia 300ms 60ms ease-in-out forwards;
}
.podsekcia2-statistika {
  transform-origin: top left;
  animation: podsekciaAnimacia 300ms 120ms ease-in-out forwards;
}
.podsekcia3-statistika {
  transform-origin: top left;
  animation: podsekciaAnimacia 300ms 180ms ease-in-out forwards;
}