* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	background-color: #000;
}

.popup {
  	position: relative;
  	background: #000;
  	width: auto;
  	width: 800px;
  	height: 450px;
  	margin: 20px auto;
}

.videoLink,
.pdfLink
{
	display: none;
	width: 100%;
	height: 100%;
}

span.logo {
	display: block;
	width: 130px;
	height: 27px;
	margin: 0px auto;
	background-image: url('../assets/logo.svg');
	background-position: center center;
	background-repeat: no-repeat;
}

.container {
	width: 990px;
	height: 701px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
}

.unmute {
	cursor: pointer;
	position: absolute;
	right: 40px;
	bottom: 40px;
	width: 22px;
	height: 18px;
	background-image: url('../assets/unmute.svg');
	background-position: left top;
	background-repeat: no-repeat;
}

.unmute.mute {
	background-image: url('../assets/mute.svg');
}

.screw {
	width: 330px;
	height: 674px;
	float: left;
	position: relative;
	cursor: pointer;
}

.screw .locked {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: transparent;
	background-image: url('../assets/locked.svg');
	background-position: left 136px top 140px;
	background-repeat: no-repeat;
	background-size: 70px;
	z-index: 1;
	cursor: default;
}