/* MUTE.JQ.JS - 2014 */
/* rhq.be - haqqazi.com - github @rhq */



/* Font(s) */
@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");
.material-icons, #mute:after {
	font-family: "Material Icons Round";
	font-weight: normal;
	font-style: normal;
	font-size: inherit;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	-webkit-font-smoothing: antialiased; /* Support for all WebKit browsers. */
	text-rendering: optimizeLegibility; /* Support for Safari and Chrome. */
	-moz-osx-font-smoothing: grayscale; /* Support for Firefox. */
	font-feature-settings: "liga"; /* Support for IE. */
}



/* Global */
html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	font-family: arial, sans-serif;
	font-size: 7px;
	line-height: 1.6;
	background-color: #ecf0e9;
}
.none { display: none !important; }
.button {
	display: inline-block;
	margin: 5px; padding: 10px 15px;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.6;
	text-decoration: none;
	text-transform: capitalize;
	opacity: .8;
	outline: none;
	border: none;
	border-radius: 2px;
	-webkit-transition: opacity 100ms ease-in-out 0s;
	   -moz-transition: opacity 100ms ease-in-out 0s;
		-ms-transition: opacity 100ms ease-in-out 0s;
		 -o-transition: opacity 100ms ease-in-out 0s;
		 	transition: opacity 100ms ease-in-out 0s;
}
.button:hover {
	opacity: .6;
	cursor: pointer;
}
.button.disabled {
	opacity: .3;
	pointer-events: none;
    cursor: default;
}
ul { list-style: none; }
ul li { text-align: center; }



/* Color(s) */
.button { background-color: blue; }
#mute:after { color: blue; }



/* Layout */
#main {
	width: 100%; height: 100%;
	display: table;
}
#main #content {
	display: table-cell;
	vertical-align: middle;
}
#main #content #block {
	display: block; position: relative;
	vertical-align: middle;
	width: 90%;
	margin: auto;
	text-align: center;
}
#main #content #block video {
	width: 100%;
	max-width: 600px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 2px;
	box-sizing: border-box;
	background-color: rgba(1,1,1,.6);
}
#main #content #block nav { overflow: hidden; }
#main #content #block nav ul {
	margin: 0; padding: 10px;
}
#main #content #block nav ul li {
	display: inline-block;
	vertical-align: middle;
}



/* Mute.jq.js */
#mute {
	display: block;
	width: 40px; height: 40px; /* Icon sizes */
	position: fixed;
	right: 15px; /* "left" ou "right" */
	top: 15px; /* "top" ou "bottom" */
	/* 	background: url("../img/mute-blue.png") no-repeat; /* Lien vers l'image. */
	/*	background-position: 0 0; */
	opacity: .8;
	cursor: pointer;
	z-index: 9999;
}
#mute:hover { opacity: .6; }
#mute.off { background-position: -40px 0; }
#mute.off:hover {}
#mute:after {
	display: block;
	position: absolute;
	top: 0; left: 0;
	font-size: 5rem;
	content: "volume_up";
}
#mute.off:after {
	content: "volume_off";
}