/* =============================================== *\
  HTML5 VIDEO BACKGROUND
  This is the important part
  It can be used for a 'hero' section or a
  full-screen background
\* =============================================== */
/* This first class is not necessary for full-screen backgrounds */
.video-hero {
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.video-bg {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.video-bg video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
  /**
   * For full-screen video backgrounds, add the
   * .video-bg--fullscreen class to .video-bg div
   */
  .video-bg--fullscreen {
    position: fixed;
  }
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none; /* Allows right click menu on the video */
  background: rgba(0,0,0,0.4); /* You can play with the opacity */
  z-index: 6;
}
/**
 * This part should be set separately for each video
 * if there are multiple videos in your site.
 * I.e. '.demo-video' is the name of the video
 */
.video-bg.demo-video {
  background-image: url(https://e5c6ed.claudeassets.com/20260509165519im_/https://atarasova.com/files/video.jpg);
}
/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.js .video-bg video {
  opacity: 0;
  transition: opacity .8s linear;
}
.js .video-bg video.is-playing {
  opacity: 1;
}

/* =============================================== *\
  HTML5 VIDEO HERO
  You don't need to copy this, but you might
  draw some inspiration from it
\* =============================================== */
.video-hero {
  height: 680px; /* Feel free to set a height in your own way */
}
.video-hero--content {
  position: relative;
  z-index: 7;
  text-align: center;
  margin-top: 250px;
  color: #E0CFAF;
    font-family: 'Open Sans', sans-serif;
    font-size: 200%;
    font-weight: 300;
/*  text-shadow: 0 0 5px rgba(0,0,0,0.4);*/
}
.video-hero--content__header {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 275%;
    margin-bottom: 60px;
    color: #E0CFAF;
    letter-spacing: 20px;
}    

.video-hero--content__desc {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVQImWNgQAKJDAz/SeUwMDAAALeQBYHNG4B7AAAAAElFTkSuQmCC) repeat;
    display: inline-block;
    padding: 5px 40px 12px;
}


@media screen and (max-width: 48em) {
    .video-hero--content__header {
      letter-spacing: normal;
    }
}
@media screen and (max-width: 35.5em) {
  .video-hero {
    height: 480px; /* Feel free to set a height in your own way */
  }
  .video-hero--content {margin-top: 150px;}
  .video-hero--content__header {font-size: 175%; margin-bottom: 30px;}
}
/*
     FILE ARCHIVED ON 00:06:34 Jun 11, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 08:36:31 Jul 28, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.397
  exclusion.robots: 0.058
  exclusion.robots.policy: 0.052
  esindex: 0.006
  cdx.remote: 11.7
  LoadShardBlock: 100.148 (3)
  PetaboxLoader3.datanode: 100.776 (5)
  PetaboxLoader3.resolve: 128.022 (2)
  load_resource: 146.191
  loaddict: 23.573
*/