/* CSS Document */

@import "theme.less?v=1.1";


.topnav, .cat-topnav {
  overflow: hidden;
  clear: both;
  width: fit-content;
  > a {
    float: left;
    display: block;
    font-weight: bold;
    color: var(--bs-body-color);
    text-align: center;
    margin: 0 10px;
    padding: 5px 5px;
    text-decoration: none;
    font-size: 11pt;
    &:hover{ //hover for links
      background-color: rgb(178 56 67 / 0.3);
      border-radius: 6px;
      text-decoration: none;
    }
  }
  .active {
    background-color: rgb(178 56 67 / 0.7);
    border-radius: 6px;
    color: white;
  }
}

#menu-div{display: none;}
//Hide the link that should open and close the topnav on small screens
.icon {
  font-size: 18pt;
  &:hover{
    cursor: pointer;
  }
}


.topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
  z-index: 1;
  &:hover{
    color: white;
    text-decoration: none;
  }
}

//Media icons
#media-div .fa {
  padding: 3px;
  font-size: 10pt;
  width: 25px;
  text-align: center;
  text-decoration: none;
  margin: 1px 2px;
  color: #bdbdbd;
  &:hover {
    opacity: 0.7;
  }
}

.x {
  color: mediumseagreen;
  margin-top: -10px;
  margin-right: 4px;
}

.x:hover,
.x:focus {
  color: yellow;
}

@media screen and (max-width: 768px) {
  .topnav{transition: height 0.5s, opacity 0.5s; opacity: 0;}
  .topnav  a {display: none; margin-top: 5px; padding-top: 4px;}
  #menu-div{display: block;}
  .icon {
    width: 46px;
    height: 46px;
  }
  .topnav {width: 100%; display: block; background-color: white; font-weight: normal;
    &.responsive {position: absolute; float: none; top: -16px; left: 0; height: auto; width: 100%;
      opacity: 1; z-index: 1000; padding-top: 15px;
    > a{color: white}
    }
  }

}

.video-grid{
  width: 100%;
  max-width: 350px!important;
}
.video-cover{
  min-height: 30vh;
  max-height: 30vh;
  /*max-height: 410px!important;*/
}
#txtSearch:focus{box-shadow: none}

#logo{width: 90%;}

@media only screen and (min-width: 600px){
  #logo{width: 40%}

  .video-grid{
    max-width: 263.9px!important;
  }
}
@media only screen and (min-width: 768px){
  #logo{width: 100%;}

  .video-grid{
    max-width: 263.9px!important;
  }
  .video-cover{
    min-height: 30vh;
    max-height: 30vh;
  }
}
@media only screen and (min-width: 900px){
  #logo{width: 80%;}
}