@charset "utf-8";
/* CSS Document */
/* Default hide the video on all devices */
#video{display:none}
 
/* Default display the image to replace the video on all devices */
#videosubstitute{
	display:block;
	width:616px;
	height:auto;
	max-width:616px;
	transform: translateX(-1.7%) translateY(-2%);
}
 
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none;}
}
#videoDiv {width: 596px; height: 335px; position: relative;}
#videoBlock,#videoMessage {
	width: 596px;
	height: 335px;
	position: absolute;
	top: 5px;
	left: 10px;
}
#videoMessage {padding:0.1em; margin:0}
#videoMessage {text-shadow: 2px 2px 2px #000000; color:white;z-index:500 }
video {
	position: relative;
	background-color: #FFFFFF;
    min-width: 100%;
    min-height: 100%;
    width: 596px;
    height: 335px;
    z-index: 300;
    transform: translateX(-1.5%) translateY(-30%);
 	background-size: cover;
    transition: 1s opacity;
	background: url(https://www.chaffey.edu/home_slides/vidbg_assets/poster.jpg) no-repeat;
}
video.scale{
  -moz-transform:scale(1.035);
  -webkit-transform:scale(1.035);
  -o-transform:scale(1.035);
  -ms-transform:scale(1.035);
  transform:scale(1.035);
}
.stopfade { 
   opacity: .5;
}

#homeInfo { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100;
  line-height: normal;
  text-align: center;
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 0rem;
  width: 34%;
  float: right;
  font-size: 1.2rem;
  margin-top: 13.4rem;
}
h1.homeInfo {
  font-size: 1.35rem;
	color: #FFFFFF;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .2rem;
}
#homeInfo button { 
  display: block;
  width: 60%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#homeInfo button:hover { 
   background: rgba(0,0,0,0.5);
}

a.homeInfo {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a.homeInfo:hover{
  background:rgba(0,0,0,0.9);
}