/* Style the video: 100% width and height to cover the entire window */
body{
	font-family: Lato, Arial, Helvetica, sans-serif;
}

.contbutton {
	width:100%;
}

@contenedor_global {
	    object-fit: cover;
}
.action {
	-webkit-transition: background-color 1s;
	transition: background-color 1s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.action:hover {
	-webkit-transition: background-color 1s;
	transition: background-color 1s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

#mutebutton{
	position:relative;
	top:60px;
	left:60px;
	width:120px;
	height:120px;
	content:'';
	z-index:1000;
}


.muted{
	background-image:url("../img/muted.png");
}

.unmuted{
	background-image:url("../img/unmuted.png");
}


.demobutton {
	margin: auto;
	padding: 5px 20px;
	border-radius:5px;
	background-color: rgba(255,255,255,0);
	color: #fff;
	cursor: pointer;

	font-size: 20px;
	font-weight: bold;
}

.demobutton:hover{
	background-color:rgba(255,255,255,1);
	color:#333;
}

.myPrevVideo {
	position:relative;
  display:block; 
  margin:0 auto;
  width: 100%;
  height: 100%;
  background-color:#303030;
}

.myPrevVideo {
	position:absolute;
  display:block; 
  margin:0 auto;
  width: 100%;
  height: 100%;
  max-width:100%;
  max-height:100%;
  background-color:#505050;
  z-index:1001;
  color:#fff;
}

#myPrevVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  left:0;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255,255,255,0.2);
  width: 100%;
  padding: 20px;
}



.content:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255,255,255,1);
}

/* Style the button used to pause/play the video */
.myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;

}

.myBtn:hover {

  background-color: #fff;
  color: black;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}