@charset "utf-8";
/* CSS Document */

 .video-background {
/* To show the whole Television... width:auto; height:auto; */	 
    width:100%;
    height:50vh; /* was 29vh, but depends on size of video */
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

.video-background video {
    position:relative;
    top:0;
    left:0;
    object-fit:cover;
}

.videoA { 
  position: absolute;
  z-index: -1000;
  right: 0;
  bottom: 0;
  max-width: 100%;	/*to show a slice of the video*/
  min-height: 100%;	/*to show a slice of the video*/
}


.hero-image {
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../img/oli-col-2.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 120px 10px;
}
 .hero-text {
	 position: relative;
	 color: white;
	 text-align:center;
}

/*Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }*/
@media (min-width: 576px) {
	/*h1 {color: yellow;}*/
	/*.video-background {height:100vh;}*/
	.video-background {width: auto; height:auto;}
}

/*Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	/*h1 {color: red;}*/
	.hero-image {padding: 200px 10px;}
	/*.video-background {height:40vh;}*/
}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	/*h1 {color: green;}*/
	.hero-image {padding: 500px 10px;}
	/*.video-background {height:70vh;}*/
}


/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	/*h1 {color: cyan;}*/
	/*.video-background {height:100vh;}*/
}


/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
	/*h1 {color: blue;}*/
	/*.video-background {height:100vh;}*/
}