* {
	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%;
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}

.left {
	width: 100%;
	height: 100%;
	background-image: url('../images/left.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
}

.right {
	width: 100%;
	height: 100%;
	background-image: url('../images/right.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: relative;
}

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

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

.door-01 {
	width: 100%;
	height: 100%;
	background-image: url('../images/door-01/door-01-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: relative;
    z-index: 1;
}

.door-02 {
	width: 100%;
	height: 100%;
	background-image: url('../images/door-02/door-02-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: relative;
    z-index: 1;
}

.door-02-locked {
	width: 100%;
	height: 100%;
	background-image: url('../images/door-02/door-02-locked.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 
    display: none;
}

.door-03 {
	width: 100%;
	height: 100%;
	background-image: url('../images/door-03/door-03-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: relative;
    z-index: 1;
}

.door-03-locked {
	width: 100%;
	height: 100%;
	background-image: url('../images/door-03/door-03-locked.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 
    display: none;
}

.door-04 {
	width: 100%;
	height: 100%;
	background-image: url('../images/door-04/door-04-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: relative;
    z-index: 1;
}

.door-04-locked {
	width: 100%;
	height: 100%;
	background-image: url('../images/door-04/door-04-locked.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 
    display: none;
    
}

/* IE 9 */
.ie9 .container {
	width: 1200px;
	height: 675px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -337px 0 0 -600px;
	background-color: #000;
}

.ie9 .left {
	width: 200px;
	height: 675px;
	float: left;
	background-image: url('../images/left.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
}

.ie9 .right {
	width: 200px;
	height: 675px;
	float: left;
	background-image: url('../images/right.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.ie9 .door-01 {
	width: 200px;
	height: 675px;
	float: left;
	background-image: url('../images/door-01/door-01-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
    z-index: 1;
}

.ie9 .door-02 {
	width: 200px;
	height: 675px;
	float: left;
	background-image: url('../images/door-02/door-02-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
    z-index: 1;
}

.ie9 .door-02-locked {
	width: 200px;
	height: 675px;
	background-image: url('../images/door-02/door-02-locked.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 
    display: none;
}

.ie9 .door-03 {
	width: 200px;
	height: 675px;
	float: left;
	background-image: url('../images/door-03/door-03-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
    z-index: 1;
}

.ie9 .door-03-locked {
	width: 200px;
	height: 675px;
	background-image: url('../images/door-03/door-03-locked.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 
    display: none;
}

.ie9 .door-04 {
	width: 200px;
	height: 675px;
	float: left;
	background-image: url('../images/door-04/door-04-01.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
    z-index: 1;
}

.ie9 .door-04-locked {
	width: 200px;
	height: 675px;
	background-image: url('../images/door-04/door-04-locked.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 2; 
    display: none;
    
}
