@import url('/inc/fonts/gwf.php?family=Anek+Bangla:wght@100;200;300;400;500;600;700;800&display=swap');

html, body
{
  max-width: 100vw;
  overflow-x: hidden;
}

html
{
  height: 100%;
  padding: 0;
  margin: 0
}

body
{
  height: 100%;
  margin: 0;
  font-family: 'Anek Bangla', sans-serif;
  background-image: url(../images/background.webp?v=1);
  background-size: cover;
  min-height: 100vh;
  background-attachment: fixed;
}

.container
{
  color: #f5f5f5;
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

.container.content
{
  color: #000061;
  font-size: 18px;
  text-align: left;
}

.container.content.center
{
  text-align: center;
}

h1 {
  font-weight: bold;
  font-size: 25px;
  letter-spacing: 0.125rem;
  text-shadow: 0 0 12px rgba(238,238,238,0.5), 0 0 32px rgba(238,238,238,0.3), 0 24px 48px rgba(238,238,238,0.1), 0 -24px 48px rgba(238,238,238,0.1);
}

h1.info
{
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 20px;
  text-align: center;
}


b
{
  text-shadow: 0 0 12px rgba(238,238,238,0.5), 0 0 32px rgba(238,238,238,0.3), 0 24px 48px rgba(238,238,238,0.1), 0 -24px 48px rgba(238,238,238,0.1);
}

ul
{
  padding-left: 0px;
}

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 2.5rem;
}

#timer {
  font-family: 'Anek Bangla', sans-serif;
}
#timer small {
  font-size: 1rem;
  display: block;
}

#countdown .counter {
  width: 92px;
  position: relative;
  font-family: 'Anek Bangla', sans-serif;
  font-size: 108px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
#countdown .counter span::before {
  content: attr(b);
}
#countdown .counter span.ping::before {
  -webkit-animation: pingEffect 0.25s 1 forwards;
          animation: pingEffect 0.25s 1 forwards;
}
#countdown .counter b {
  font-size: 14px;
  position: absolute;
  left: 0;
  width: 100%;
}
@-webkit-keyframes pingEffect {
  to {
    text-shadow: 0 0 12px rgba(238,238,238,0.5), 0 0 32px rgba(238,238,238,0.3), 0 24px 48px rgba(238,238,238,0.1), 0 -24px 48px rgba(238,238,238,0.1);
  }
}
@keyframes pingEffect {
  to {
    text-shadow: 0 0 12px rgba(238,238,238,0.5), 0 0 32px rgba(238,238,238,0.3), 0 24px 48px rgba(238,238,238,0.1), 0 -24px 48px rgba(238,238,238,0.1);
  }
}
.contentblock
{
  padding: 25px;
  background-color: #FFF;
}

.dark
{
  /* background-color: #00001f; */
  background-color: rgba(0, 0, 31, .5);
  color: #f5f5f5;
}

.whitegradiant
{
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 99%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
}

.jumbotron {
  position:relative;
  overflow:hidden;
  margin-bottom: 0;
}

.jumbotron .container {
  position:relative;
  z-index:2;

  background:rgba(0,0,0,0.2);
  padding:2rem;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:3px;
}

.jumbotron-background {
  object-fit:cover;
  font-family: 'object-fit: cover;';
  position:absolute;
  top:0;
  z-index:1;
  width:100%;
  height:100%;
  opacity:0.5;
}

img.blur {
  -webkit-filter: blur(4px);
  filter: blur(4px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');

}

.sticky-top {
    transition: all 0.25s ease-in;
}

.sticky-top img{
    height: 100px;
}


/* style for when sitcky is applied */
.stuck .navbar.sticky-top {
    background-color: #222;
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.sticky-top.small
{
  height: 70px;
}

.sticky-top.small img
{
  height: 45px;
}

.navbar
{
  box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0,0,0,0.75);
}

#footer
{
  /* min-height: 500px; */
  background-color: #00001f;
  color: #f5f5f5;
  padding-top: 25px;
  padding-bottom: 25px;
}

.card
{
  background-color: transparent;
  border: none;
}

.card-genre
{
  font-size: 16px;
  color: #f5f5f5;
}

.card-title
{
  font-weight: bold;
  font-size: 20px;
  color: #f5f5f5;
}

a
{
  text-decoration: none;
  color: #212529;
}


.container-fluid
{
  column-count: 4;
  max-width: none;
}

.container-fluid > *
{
  display: inline-block;
  height: 350px;
  overflow: hidden;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

.container-fluid > * .card-infos
{
  display: none;
  color: #ffffff;
}

.container-fluid > *.moreinfo
{
  height: 708px;
  overflow: auto;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
}

.container-fluid > *.moreinfo .card-infos
{
  display: inline-block;
}

.spacer
{
  padding: 25px;
}

}
thead {
 background-color: #ccc;
}

img.sponsor
{
  height: 100px;
  width: auto;
  padding: 15px;
  max-width: 100%;
}

.mwcontainer
{
  max-width: 100vw;
  overflow: auto;
}

.youtube
{
  width: 1024px;
  height: 576px;
}

@media only screen and (min-width: 1024px)
{
  * {
    scrollbar-width: auto;
    scrollbar-color: #6093cd #131a3f;
  }

  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #131a3f;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #6093cd;
    border-radius: 3px;
    border: 0px none #ffffff;
  }
}

@media only screen and (max-width: 1024px)
{

  .youtube
  {
    width: 100vw;
    height: 57vw;
  }

  .container-fluid > *
  {
    height: 300px;
  }

  .container-fluid > *.moreinfo
  {
    height: 608px;
  }

  .container-fluid
  {
    column-count: 2;
  }

  .contentblock
  {
    padding: 1vw;
  }

  .table td, .table th
  {
    text-align: left;
    padding: 1vw;
    max-width: 45vw;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  img.sponsor
  {
    height: 18vw;
  }

 	.navbar-light .navbar-nav .nav-link
	{
	    font-size: 70%;
	}
}

.modal-backdrop.in
{
	opacity: 0.9;
}

.darklayer
{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1021;
}

a.infolink
{
  color: #000;
}

a.infolink:visited
{
  color: #000;
}

a.infolink:hover
{
  color: #4c0080;
  font-size: 105%;
}

a.footerlink
{
  color: #FFFFFF;
  text-decoration: none;
}

a.footerlink:visited
{
  color: #FFF;
}

a.footerlink:hover
{
  color: #CCC;
}