.bg-60,
.bg-80,
.bl-bg {
backdrop-filter: blur(10px) brightness(150%) contrast(120%)
}
.bl-bg,
.mega-menu {
position: absolute
}
.bl-bg,
.toggle-input:checked + label {
color: #fff;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial
}
.mega-menu,
.modal {
left: 0;
width: 100%
}
.mega-menu,
.modal,
.toggle-input,
.toggle-input:not(checked) ~ .mega-menu {
display: none
}
.bg-60 {
background-color: rgba(255,255,255,.6)
}
.bg-80 {
background-color: rgba(255,255,255,.8)
}
.bl-bg {
left: 0;
background-color: rgba(255,255,255,.5);
border-radius: .5rem;
padding: 1rem;
bottom: 0;
right: 0
}
.mega-menu {
text-align: left
}
.toggle-input:checked + label {
background-color: #2c5282
}
.modal {
position: fixed;
z-index: 50;
top: 0;
height: 100%;
overflow-x: auto;
overflow-y: auto;
background-color: rgba(0,0,0,.8)
}
.bg-sc,
.blog-item {
box-shadow: rgba(0,0,0,.2) 0 4px 8px
}
.bg-90 {
background-color: rgba(255,255,255,.9);
backdrop-filter: blur(4px) brightness(100%) contrast(100%)
}
.tx-sc,
.tx-sc-div b,
.tx-sc-div h1,
.tx-sc-div h2,
.tx-sc-div h3,
.tx-sc-div h4,
.tx-sc-div h5,
.tx-sc-div h6 {
text-shadow: rgba(0,0,0,.1) 0 4px 6px;
color: #00214e
}
.bl-bg:hover .button {
transform: translateX(10px)
}
.blog-item img {
width: 100%;
height: auto;
object-fit: cover
}
.blog-item .content {
position: relative;
z-index: 1
}
.hoverable > a::after,
.toggleable > label::after {
content: "▼";
font-size: 10px;
padding-left: 6px;
position: relative;
top: -1px
}
.hoverable:hover .mega-menu,
.toggle-input:checked ~ .mega-menu {
  display: block
  }
.toggle-input:checked ~ label::after {
  font-size: 10px;
  padding-left: 6px;
  position: relative;
  top: -1px;
  content: "▲"
  }
.hoverable {
  position: static
  }