body, html {
	background:#141515;
	padding:0;
	margin:0;
	font-family: 'Montserrat', sans-serif;
	min-width: 320px;
	height: 100%;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow-x: hidden;
}

#page {
	text-align:center;
	padding:10vh;
}

.quest a{
	display: inline-block;
    background: #f5a623;
    padding: 2vh 4vh;
    text-decoration: none;
    border-radius: 4px;
    color: #252117;
    margin-bottom: 2vh;
}

.quest a .quest_image img{
	width: 200px;
    height: 200px;
    vertical-align: top;
    object-fit: cover;
    padding-bottom:10px;
    border-radius:4px;
}

.quest a .quest_name {
	font-size:24px;
}

.quest a .quest_text {
	padding-top:10px;
	font-size: 14px;
}

#back {
	position:fixed;
	left:0;
	top:0;
	cursor:pointer;
	z-index:999;
}

#volume {
	position:fixed;
	right:0;
	top:0;
	cursor:pointer;
	z-index:999;
}

#fullscreen {
	position:fixed;
	right:6vh;
	top:0;
	cursor:pointer;
	z-index:999;
}

#back svg, #volume svg, #fullscreen svg {
	padding: 2vh;
	width:2vh;
	fill:#fff;
	background:rgba(66, 133, 255, 0.5);
}

#back:hover svg, #volume:hover svg, #fullscreen:hover svg {
	background:rgba(66, 133, 255, 1);
}


#finish {
	display:none;
}

#finish .link a{
	background: #ccc;
    color: #000;
    font-size: 3vh;
    line-height: 3vh;
    padding: 3vh;
    cursor: pointer;
    display: inline-block;
    margin-top: 10vh;
    margin-bottom:3vh;
    text-decoration:none;
}


#video_block {
	position:absolute;
}

#video_over {
	position:absolute;
	width: 960px;
	display: inline-block;
	text-align: center;
	height:540px;
	z-index: 9;
}


#video_over .button {
	position:absolute;
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;
	cursor:pointer;
	display:none;
}

#video_over .text {
	position:absolute;
	background:rgba(0,0,0,0.3);
	color:#fff;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;
	display:none;
}
#video_over .image {
	position:absolute;
	display:none;
}
#video_over .image img{
	width:100%;
	vertical-align: top;
}

#video_over .puzzle {
	position:absolute;
	display:none;
	text-align: center;
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.3);
}

#video_over .puzzle img{
	height: 100%;
    display: inline-block;
    vertical-align: top;
    padding: 10vh;
    box-sizing: border-box;
}

#video_over .input {
	position:absolute;
	color:#fff;
	display:none;
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.3);
}
#video_over .input .input_info {
	margin-bottom:6vh;
	margin-top:14vh;
}

#video_over .input .input_info div {
	display: inline-block;
	max-width: 50vh;
	background: rgba(57, 70, 182, 0.5);
	font-size: 4vh;
	line-height: 6vh;
	padding:3vh;
}
#video_over .input input {
	width:50vh;
	background: #fff;
	border: 2px solid #000;
	font-size:6vh;
	line-height: 6vh;
	padding:3vh;
	margin-bottom:12vh;
	text-align: center;
	text-transform: uppercase;

}

#video_over .input input.error {
	background:#ff8484;
}

#video_over .input input.done {
	background:#8cff84;
}

#video_over .input .input_input div {
	color:#fff;
	font-weight: bold;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;
}


#video_over .input .input_input .l {
	width:6vh;
	background: #fff;
	color:#000;
	border: 2px solid #000;
	font-size: 6vh;
	line-height: 6vh;
	height:6vh;
	padding:3vh;
	margin-bottom:6vh;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
	vertical-align: top;
}
#video_over .input .input_input .l.hover {
	background: #ff3;
}
#video_over .input .check_letter .l {
	width:6vh;
	background: #fff;
	color:#000;
	border: 2px solid #000;
	font-size: 6vh;
	line-height: 6vh;
	height:6vh;
	padding:3vh;
	margin-bottom:12vh;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
	vertical-align: top;
	cursor:pointer;
}
#video_over .input .check_letter .l.hide {
	opacity:0;
}

#video_over .input .input_check .check, #video_over .input .input_check .next, #video_over .input .input_check .wrong, #video_over .button_image .close {
	width:20vh;
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;
	cursor:pointer;
	display: inline-block;
}

#video_over .puzzle .next {
	width:20vh;
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;
	cursor:pointer;
	
	z-index: 100;
	margin-top:60vh;
	left:75vh;
	position:absolute;
	display: none;
}

#video_over .list {
	position:absolute;
	color:#fff;
	display:none;
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.3);
}
#video_over .list .list_info {
	margin-bottom:6vh;
	margin-top:3vh;
}

#video_over .list .list_info div {
	display: inline-block;
	max-width: 50vh;
	background: rgba(57, 70, 182, 0.5);
	font-size: 4vh;
	line-height: 6vh;
	padding:3vh;
}

#video_over .list .list_option {
	width:50vh;
	display: inline-block;

}

#video_over .list .list_option .option{
	width:30vh;
	display: inline-block;
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:2vh;
	margin-bottom:2vh;
	cursor:pointer;
	text-align: left;
}

#video_over .list .list_option .option.check {
	background: #8cff84;
}

#video_over .list .list_check div {
	width:20vh;
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;

	cursor:pointer;
	display: inline-block;
	margin-top: 3vh;
}
#video_over .button.active, #video_over .text.active, #video_over .image.active, #video_over .input.active, #video_over .list.active, #video_over .puzzle.active {
	display:block;
}

#video_over .button_image {
	position: absolute;
	z-index: 99;
	background: rgba(0,0,0,0.8);
	width:100%;
	height:100vh;
}

#video_over .button_image img {
	display:inline-block;
	max-height:50vh;
	margin:10vh 0;
}

#start {
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;
	display: inline-block;
	cursor:pointer;
	position:absolute;
	z-index: 9;
	margin-top:50vh;
}
#start:hover, #clear:hover {
	background:#bbb;
}

#start_image {
	position:absolute;
}
#start_image img{
	vertical-align: top;
	object-fit: cover;
}
#horizontal {
	color:#fff;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh 0;
	display: inline-block;
	padding-top:30vh;
	text-align: center;
	width:100%;
	background: rgba(0,0,0,0.3);
	height:100vh;
}
#horizontal .info {
	width:320px;
	display: inline-block;
}
#clear  {
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;

	cursor:pointer;
	display: inline-block;
	margin-top:20vh;
}