@charset "utf-8";

/* MMD-TEASER.CSS 1.0 January 2022 by Debbie Kurth */
.mmd-teaser-shadow-box {
  width: 100%;
  height: auto;
  float: left;
  margin: 0 auto;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  moz-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
}

.mmd-teaser-video-group {
  width: 100%;
  height: auto;
  float: left;
  margin: 0 auto;
}

.mmd-teaser-thumbnail {
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  float: left;
}

.mmd-teaser-thumbnail img {
  max-width: 100%;
  height: auto;
}

.mmd-teaser-thumbnail-zoom img {
  transition: transform .5s ease;
}

.mmd-teaser-thumbnail-zoom:hover img {
  -ms-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  cursor: pointer;
}

.mmd-teaser-video-title {
  padding-bottom: 10px;
  margin-top: 15px;
  text-align: center;
  width: 100%;
  float: left;
  height: 60px;
  float: left;
  font-size: 16px;
  line-height: 20px;
}

.mmd-teaser-button {
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: white;
  color: black;
  text-align: center;
  display: inline-block;
  font-size: 14px;
  border-radius: 15px;
}

.mmd-teaser-button:hover {
  background-color: rgb(216, 71, 16);
  color: white;
  cursor: pointer;
}

.mmd-teaser-screen {}

.mmd-teaser-modal {
  z-index: 999;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.mmd-teaser-modal-content {
  margin: 20px auto;
  background-color: #fff;
  position: relative;
  padding: 0;
  outline: 0;
  width: 100%;
}

.mmd-teaser-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

.mmd-teaser-container {
  width:100%;
  height:auto;
  position:relative;
  aspect-ratio:16 / 9;
}
.mmd-teaser-VideoPlacement {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
.mmd-teaser-footer-bar {
  background-color: black;
  color: white;
  width: 100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  padding:20px 20px;
}
.mmd-teaser-footer-bar p {
  text-align:center;
  margin:0px;
}
.mmd-teaser-footer-bar p + p {
  margin-top:0px;
}
.mmd-teaser-modal-button {
  background-color: rgb(216, 71, 16);
  color: white;
  border-radius: 10px;
  font-size: 16px;
  line-height: 15px;
  margin:0px 6px;
}
.mmd-login {
  background-color:transparent;
  padding-left:4px;
  text-decoration:underline;
}
.mmd-login:hover {
  background-color:transparent;
}
.mmd-teaser-modal-button:hover {
  background-color: white;
  color: rgb(216, 71, 16);
}

.mmd-teaser-button-spacing {
  float: right;
  margin-left: 5px;
  margin-right: 5px;
}



.mmd-teaser-restricted {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, .2);
  opacity: 100;
  z-index: 99;
  color: white;
  font-size: 13px;
  line-height: 20px;
}

.mmd-restricted-text {
  float: left;
  width: 100%;
  color: #ffffff;
  font-size: 18px;
  line-height: 25px;
  padding-top: 30px;
}
.mmd-teaser-modal-content { 
  width:100%;
}
/*--------------------------------------------------*/
/* CSS BASED ON BROWSER WIDTHS, NOT DEVICE WIDTH*/


/* iPhone 5/SE portrait */
@media screen and (max-width:320px) and (max-height:568px) {


  .mmd-teaser-modal {
    z-index: 999;
  }



  .mmd-teaser-modal-button {
    font-size: 14px;
    line-height: 12px;
  }
}


/* iPhone x/xr/11/12/13 landscape */
@media (max-width:428px) and (max-height:926px) {


  .mmd-teaser-modal {
    z-index: 999;
  }



  .mmd-teaser-modal-button {
    font-size: 14px;
    line-height: 12px;
  }
}

@media(min-width:500px) {
 

  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media screen and (max-width:568px) and (max-height:320px) {


  .mmd-teaser-modal {
    z-index: 999;
  }

 

  .mmd-teaser-modal-button {
    font-size: 14px;
    line-height: 12px;
  }
}


@media(min-width:600px) {
  

  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media(min-width:700px) {
 

  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media(min-width:800px) {
 

  .mmd-teaser-modal {
    z-index: 999;
  }

}




/* iPhone x/xr/11/12/13 landscape */
@media (max-width:926px) and (max-height:428px) {


  .mmd-teaser-modal {
    z-index: 999;
  }


  .mmd-teaser-modal-button {
    font-size: 16px;
    line-height: 15px;
  }
}


@media(min-width:993px) {
 

  .mmd-teaser-modal {
    z-index: 999;
  }


}



@media(min-width:1200px) {


  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media screen and (min-width:1200px) and (max-height:400px) {
 

  .mmd-teaser-modal {
    z-index: 999;
  }

}


@media screen and (min-width:1200px) and (max-height:600px) {
 

  .mmd-teaser-modal {
    z-index: 999;
  }


  .mmd-teaser-modal-button {
    font-size: 16px;
    line-height: 16px;
  }
}


@media(min-width:1300px) {


  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media screen and (min-width:1300px) and (max-height:400px) {
  

  .mmd-teaser-modal {
    z-index: 999;
  }

}



@media screen and (min-width:1300px) and (max-height:600px) {


  .mmd-teaser-modal {
    z-index: 999;
  }


  .mmd-teaser-modal-button {
    font-size: 16px;
    line-height: 16px;
  }
}



@media(min-width:1400px) {
 

  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media screen and (min-width:1400px) and (max-height:400px) {


  .mmd-teaser-modal {
    z-index: 999;
  }

}


@media screen and (min-width:1400px) and (max-height:600px) {


  .mmd-teaser-modal {
    z-index: 999;
  }


  .mmd-teaser-modal-button {
    font-size: 16px;
    line-height: 16px;
  }
}



@media(min-width:1600px) {


  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media(min-width:1800px) {
  

  .mmd-teaser-modal {
    z-index: 999;
  }

}

@media(min-width:2100px) {


  .mmd-teaser-modal {
    z-index: 999;
  }

 


  .mmd-teaser-modal-button {
    font-size: 16px;
    line-height: 22px;
  }
}

@media(min-width:3000px) {


  .mmd-teaser-modal {
    z-index: 999;
  }

 


  .mmd-teaser-modal-button {
    font-size: 18px;
    line-height: 25px;
  }
}