@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* === VIDEO TEXT STYLES === */
.title-page {
  padding-top: 10px;
}

.VideoText {
  text-align: center;
  margin: 10px auto;
}

.VideoTitleText {
  font-size: 1rem;
  font-weight: 800;
    padding-top: 20px;
    padding-bottom: 5px;
}

.VideoUnderText,
.VideoAuthors {
  font-size: 0.8rem;
}

.VideoAuthors {
  font-weight: 800;
  margin-top: 8px;
}

/* === VIDEO CONTAINER === */
.video-block {
  text-align: center;
  border: none;
  margin: 0 auto 20px;
  width: 100%;
  max-width: 750px;
  padding: 10px 10px 10px 10px;
}

.video-frame-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.video-frame-container iframe
{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}
.video-frame-container video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.figure_section{
    margin-left: 10px;
}
/* === ACCESSIBILITY === */
.visually-hidden {
  display: none;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* === MEDIA QUERIES (Grouped and Optimized) === */
@media only screen and (max-width: 850px) {
  .AllVideos {
    width: 100%;
    max-width: 95%;
    margin-left: 10px;
  }
}
/* === MEDIA QUERIES (Grouped and Optimized) === */
@media only screen and (min-width: 769px) {
  .AllVideos {
    width: 100%;
    max-width: 95%;
    margin-left: 10px;
  }
}
/* === MEDIA QUERIES (Grouped and Optimized) === */
@media only screen and (max-width: 768px) {
  .VideoTitleText,
  .VideoUnderText,
  .VideoAuthors {
    font-size: 0.75rem;
  }

  .AllVideos {
    width: 100%;
    max-width: 90%;
    margin-left: 40px;
  }

  .video-block {
    padding: 0 5px;
  }

  .figure_section {
    font-size: 13px;
    line-height: 1.4;
    padding-left: 30px;
    width: 85%;
  }

  .side_article {
    margin-left: 35px;
    max-width: 100%;
  }

  .grid_8 {
    transform: scale(1);
    transform-origin: top left;
    margin-left: 60px;
  }

  .footer_text {
    margin-left: 0;
  }
}
/* === ULTRA SMALL DEVICES: 767px === */
@media only screen and (max-width: 767px) {
    
     .AllVideos {
         width: 100%;
    margin-left: 0px;
  } 
  .figure_section, .side_article, .grid_8 {
      width: 100%;
      margin-left:0px;
  }
}
/* === ULTRA SMALL DEVICES: 720px === */
@media only screen and (max-width: 720px) {
    
     .AllVideos {
         width: 100%;
    margin-left: 0px;
  } 
  .figure_section, .side_article, .grid_8 {
      width: 100%;
      margin-left:0px;
  }
}
/* === ULTRA SMALL DEVICES: 600px === */
@media only screen and (max-width: 600px) {
    
     .AllVideos {
    max-width: 100%;
    margin-left: 0px;
  } 
  .side_article, .grid_8 {
      margin-left: 0px;
  }
}
/* === ULTRA SMALL DEVICES: 480px === */
@media only screen and (max-width: 480px) {
    
     .AllVideos {
    max-width: 95%;
    margin-left: 20px;
  } 
    .figure_section, .side_article, .grid_8 {
      width: 90%;
      margin-left:20px;
  }
}
/* === ULTRA SMALL DEVICES: 425px === */
@media only screen and (max-width: 425px) {
    
     .AllVideos {
    max-width: 100%;
    margin-left: 0px;
  } 
}
    
/* === EXTRA SMALL DEVICES: Phones < 375px === */
@media only screen and (max-width: 375px) {
  .AllVideos {
    max-width: 90%;
    margin-left: 20px;
  }

  .grid_8, .side_article {
    transform: scale(1);
    margin-left: 20px;
  }
  .figure_section{
      width: 90%;
      margin-left: 15px;
  }
}

/* === ULTRA SMALL DEVICES: 240px–319px === */
@media only screen and (max-width: 319px) {
  .AllVideos {
    max-width: 60%;
    max-height: 60%;
    margin-left: 30px;
  }

  .footer_text {
    margin-left: -60px;
  }

  .grid_8 {
    transform: scale(0.7);
    margin-left: 30px;
  }

  .side_article {
    width: 60%;
    margin-left: 30px;
  }
  .figure_section {
      margin-left: -5px
  }
}
/*========================================================
                    totop
=========================================================*/
/* UItoTop styles
========================================================*/
#toTop {
  display: none;
  text-decoration: none;
  position: fixed;
  bottom: 80px;
  right: 50px !important;
  border-radius: 50px;
  height: 45px;
  width: 45px;
  background-color: #ccc;
  text-align: center;
  color: #ffffff;
  z-index: 999;
  color: white;
  font-size: 22px;
  line-height: 45px;
}
#toTop:hover {
  background-color: #da917a;
}
@media only screen and (max-width: 1199px) {
  #toTop {
  }
}
@media only screen and (max-width: 767px) {
  #toTop {
  }
}
@media only screen and (max-width: 320px) {
  #toTop {
  }
}