body {
  margin: 0;
  padding: 0;
/*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
  background: #333;
  background-attachment: fixed;
  background-size: cover;
}

/* The only rule that matters */
#video-background {
/*  making the video fullscreen  */
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

/* These just style the content */
article {
/*  just a fancy border  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(255, 255, 255, 0.5);
  margin: 10px;
}

h1 {
  position: absolute;
  top: 60%;
  width: 100%;
  font-size: 36px;
  letter-spacing: 3px;
  color: #fff;
  font-family: Oswald, sans-serif;
  text-align: center;
}

h1 span {
  font-family: sans-serif;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
}

h1 span a {
  color: #fff;
}















.speaker {
	height: 30px;
	width: 30px;
	position: relative;
	overflow: hidden;
	display: inline-block;

	span {
		display: block;
		width: 8px;
		height: 8px;
		background: #fff;
		margin: 11px 0 0 2px;

		&:after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent #fff transparent transparent;
			border-width: 10px 14px 10px 15px;
			left: -13px;
			top: 5px;
		}

		&:before {
			transform: rotate(45deg);
			border-radius: 0 50px 0 0;
			content: '';
			position: absolute;
			width: 5px;
			height: 5px;
			border-style: double;
			border-color: #fff;
			border-width: 7px 7px 0 0;
			left: 18px;
			top: 9px;
			transition: all 0.2s ease-out;
		}
	}

	&:hover {

		span:before {
			transform: scale(.8) translate(-3px, 0) rotate(42deg);		
    }
	}
  
  &.mute {
    span:before {
			transform: scale(.5) translate(-15px, 0) rotate(36deg);
      opacity: 0;
    }
  }
}

body {
  color: #fff;
  font-family: arial, sans-sarif;
  background-color: #333;
  text-align: center;
}
