@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);


.demo-video-wrapper {
  /* background-image: url(../images/banner/pigments.jpg); */
  clip-path: ellipse(136% 69% at 50% 27%);
}

/* Video overlay and content */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  /* background: #04afff; */
  /* background: #48607e; */
  opacity: 0.2;
  clip-path: ellipse(136% 69% at 50% 27%);
}
.video-hero--content {
  position: relative;
  text-align: center;
  color: #fff;
  margin: 205px 0;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.video-hero--content h2 {
  font-size: 34px;
  margin: 0 0 10px;
}

/* Other stuff */

/* .cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
} */
/* .page-width {
  width: 92%;
  max-width: 960px;
  margin: 0 auto;
} */

/* CSS from jQuery Background Video plugin */
/**
 * Set default positioning as a fallback for if the plugin fails
 */
.jquery-background-video-wrapper {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  top: 6px;
}
.jquery-background-video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 22%;
  left: 50%;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.js .jquery-background-video {
  opacity: 0;
  -webkit-transition: opacity 300ms linear;
  transition: opacity 300ms linear;
}
.js .jquery-background-video.is-visible {
  opacity: 1;
}

/**
 * Pause/play button
 */
.jquery-background-video-pauseplay {
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 20px;
  height: 20px;
  top: 15px;
  right: 15px;
  padding: 0;
  cursor: pointer;
  outline: none !important;
}
.jquery-background-video-pauseplay span {
  display: none;
}
.jquery-background-video-pauseplay:after,
.jquery-background-video-pauseplay:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.jquery-background-video-pauseplay.play:before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
}
.jquery-background-video-pauseplay.pause:before,
.jquery-background-video-pauseplay.pause:after {
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
  border-left: 5px solid #fff;
}
.jquery-background-video-pauseplay.pause:after {
  left: 10px;
}


@media only screen and (min-width: 1120px) and (max-width: 1199px){
    .jquery-background-video-wrapper {
        top: 16px;
      }
    .video-hero--content {
        margin: 190px 0;
      }
}
@media only screen and (min-width: 991px) and (max-width: 1119px){
    .jquery-background-video-wrapper {
        top: 16px;
      }
    .video-hero--content {
        margin: 160px 0;
      }
}
@media only screen and (min-width: 800px) and (max-width: 990px){
    .jquery-background-video-wrapper {
        top: 15px;
        margin-top: 69px;
      }
    .video-hero--content {
        margin: 136px 0;
      }
    .caption {
        top: 49%;
        left: 15%;
    }
    .caption h1 {
        font-size: 20px;
        padding: 5px 20px;
    }
    .brdc {
        padding-top: 16px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 799px){
    .jquery-background-video-wrapper {
        top: 10px;
        margin-top: 102px;
      }
    .video-hero--content {
        margin: 92px 0;
      }
    .caption {
        top: 45%;
        left: 15%;
    }
    .caption h1 {
        font-size: 18px;
        padding: 5px 20px;
    }
    .brdc {
        padding-top: 16px;
    }
}
@media only screen and (min-width: 480px) and (max-width: 599px){
    .jquery-background-video-wrapper {
        top: 10px;
        margin-top: 150px;
      }
    .video-hero--content {
        margin: 92px 0;
      }
    .caption {
        top: 45%;
        left: 15%;
    }
    .caption h1 {
        font-size: 16px;
        padding: 5px 20px;
    }
    .brdc {
        padding-top: 16px;
    }
}
@media only screen and (min-width: 400px) and (max-width: 479px){
    .jquery-background-video-wrapper {
        top: 10px;
        margin-top: 150px !important;
      }
    
}
@media only screen and (min-width: 320px) and (max-width: 479px){
    .jquery-background-video-wrapper {
        top: 10px;
        margin-top: 120px;
      }
    .video-hero--content {
        margin: 65px 0;
      }
    .caption {
        top: 45%;
        left: 15%;
    }
    .caption h1 {
        font-size: 14px;
        padding: 5px 20px;
    }
    .brdc {
        padding-top: 16px;
    }
}