/* video background */
#background-video {
   width: 100vw; 
   height: 100vh;
  object-fit: cover;
  position: fixed;
  /* position: absolute; */
  left: 0;
  right: 0;
  top: 65px; /* possible to calculate the height of navbar + 5 px ? */
  bottom: 0;
  z-index: -10000;
}

.background-podcast {

  background-image: url("../img/podcast/podcast2-bw.jpg");

  background-size: cover;
  /* object-fit: cover; */
  background-repeat: no-repeat;
  position: fixed;

  /* height: 500px; /* set the height of the div */ 
  left: 0;
  right: 0;
  top: 0px;
  bottom: 0;
  
  bottom: 0;
  z-index: -10000;
  height: 100vh;
}

/* for DIV class */
.wrapper-video {
  height: 100vh; 
  display: grid;
  place-items: center;
  
   /* position: fixed; */
    /* top: 0; */
    /* right: 0; */
    /* bottom: 0; */
    /* left: 0; */
    /* overflow: hidden; */
    /* z-index: -100; */
}

/* .videoBg{ */
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */
/* } */


/* FIXME: Mediaquery for bg-h1...h3 */
.bg-h1 {
  
  font-size: 5rem; 
  color: white;
  /* margin-top: 30vh; */
  letter-spacing: 0.2rem;
  text-align: center;
  font-weight: bold;
    
}

.bg-h2 { 
  font-size: 3rem; 
  
  /* color:rgb(0, 193, 231,1); */
  color: white;
  /* margin-top: 30vh; */

  text-align: center;
  font-weight: bold;
  
}

.bg-h3 { 
  font-size: 2.5rem; 
  
  /* color:rgb(0, 193, 231,1); */
  color: white;
  /* margin-top: 30vh; */

  text-align: center;
  font-weight: bolder;
  
}







.bg-text {
  
  background-color: rgba(0, 193, 231, 0.475);
  border-radius: 10px;
  max-width: 80rem;
  margin-inline: auto;
  text-transform: uppercase;
  /* position:absolute; */
   /* top: 40%; */
   /* left:10px; */
  
}

.bg-text > h1 {
  padding: 1rem 1rem;
  font-size: 6rem;
}


.dgm-center-md-hor {
	
}


@media only screen and (max-width: 1330px) {
  .bg-text > h1 {
    font-size: 5rem;
  }

  .bg-text > h2 {
    font-size: 3rem;
  }
}



@media only screen and (max-width: 1150px) {
  .bg-text > h1 {
    font-size: 4rem;
  }
}


@media only screen and (max-width: 820px) {
  .bg-text > h1 {
    font-size: 3rem;
  }

  .text-things > h2 {
    font-size: 2.2rem;
  }
}


@media only screen and (max-width: 740px) {
  .bg-text > h1 {
    font-size: 2.4rem;
  }

  .text-things > h2 {
    font-size: 1.8rem;
  }
}

@media (max-height: 414px) {
   #background-video { 
	   top: 110px;  
   } 

  .bg-text {
    width: 100%;
    border-radius: 0px;
  }
  .bg-text > h1 {
    font-size: 2.5rem;
    /* padding: 0; */
  }

  .text-things > h2 {
    font-size: 1.6rem;

  }
  }


 @media (max-width: 414px) {

	.dgm-center-md-hor {
		display:grid;place-items: center;
	}
 
}



  @media (max-width: 375px) {
	  
	/* #background-video { */
	  /* top: 100px;  */
  /* } */

    .bg-text {
      width: 100%;
      border-radius: 0px;
    }
    .bg-text > h1 {
      font-size: 2.5rem;
    }
  
    .text-things > h2 {
      font-size: 1.6rem;
  
    }
    }
  

/* Ipad */

/* @media (max-width: 414px) {
  #background-video { display: none; }
  body {
    background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
    background-size: cover;
  }



}  */