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;
}
@font-face {
  font-family: 'Foo-Regular';
  src: url('../fonts/Foo-Regular.svg#Foo-Regular') format('svg'),
       url('../fonts/Foo-Regular.ttf') format('truetype'),
       url('../fonts/Foo-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'foo';
  src: url('../fonts/foo.eot');
  src: url('../fonts/foo.eot?#iefix') format('embedded-opentype'),
       url('../fonts/foo.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

#video_over .button.active, #video_over .text.active, #video_over .image.active, #video_over .input.active, #video_over .list.active, #video_over .puzzle.active {
    opacity: 1;
}

#video_over .list {
    opacity: 0;
}

#video_over .list .list_info div, .input_info {
	font-family: 'Foo-Regular';
	text-decoration: none;
	font-variant: petite-caps;
}

#page {
	text-align:center;
	padding: 2vh 10vh;
}
video {
  width: 100%;
  height: auto;
  max-height: 100%;
}
.quest a{
    display: inline-block;
    background: #254b90;
    padding: 2vh 4vh;
    text-decoration: none;
    border-radius: 10px;
    color: #ffffff;
    margin-bottom: 2vh;
}

.quest a .quest_image img{
    vertical-align: top;
    object-fit: cover;
    padding-bottom: 10px;
    max-width: 100%;
}

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

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

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

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

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

#back svg, #volume svg, #fullscreen svg {
	padding: 1vh;
	width:3vh;
	margin:1vh;
	fill:#fff;
	/*background:rgba(66, 133, 255, 0.5);*/
}

/*#back:hover svg, #volume:hover svg, #fullscreen:hover svg {
	background:rgba(66, 133, 255, 0.5);
	border-radius:5%;
}*/


#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: 100vw !important;
    display: inline-block;
    text-align: center;
    height: 100vh !IMPORTANT;
    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:8vh;
	/*margin-top:14vh;*/
}

/*#video_over .input .input_info div {
background: rgba(57, 70, 182, 0.5);
    font-size: 6vh;
    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;
	color: #292fde;
}
.input_input {
	margin-bottom: 6vh;
}
#video_over .input .input_input div {
color: #68c0ff;
    font-size: 2.5vh;
    line-height: 3vh;
    padding: 0 1vh;
    display: block;
    /*background: #00000075;*/
    margin-bottom: 3vh;
    margin-top: 6vh;
}

#video_over .input .input_input .l {
	width: 6vh;
    background: #fff;
    color: #141cff;
    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;
    margin-right: 15px;
}

#video_over .input .input_input .l {
display: inline-block;
    background: #0a239f8c;
    color: #fff;
    font-size: 6vh;
    font-weight: 700;
    padding: 3vh;
    margin-bottom: 2vh;
    cursor: pointer;
    text-align: center;
    border: 2px solid #ffffff;
    padding-left: 3vh;
    /* margin: auto; */
    /* background: linear-gradient(100deg, #124ef3, #2995ff); */
    -webkit-box-shadow: 0px 3px 4px 1px rgba(1,1,1,.5);
    box-shadow: 0px 3px 4px 1px rgba(1,1,1,.5);
    border: 2px solid #359dff;
    -webkit-animation: neon-select 2.5s ease-in-out infinite alternate;
    -moz-animation: neon-select 2.5s ease-in-out infinite alternate;
    animation: neon-select 2.5s ease-in-out infinite alternate;

}
/*#video_over .input .input_input .l.hover {
    background: #ff3;
}*/

/*#video_over .input .input_input .l:focus {
    background: rgb(45 81 255 / 87%);
    border: 2px solid #ffffff;
}*/

#video_over .input .check_letter .l {
    width: 6vh;
    background: #fff;
    color: #141cff;
    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;
    margin-right: 15px;
}
#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;
    top: 60vh;
    /* left: 75vh; */
    /* position: absolute; */
    display: none;
    margin: auto;
}

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

#video_over .list .list_info div, #video_over .input .input_info div  {
	/*display: inline-block;
	max-width: 50vh;*/
	/*background: rgba(57, 70, 182, 0.5);*/
	font-size: 5vh;
	line-height: 6vh;
	padding:3vh;
background: rgb(18,62,181);
background: linear-gradient(100deg, rgba(18,62,181,1) 6%, rgba(54,60,224,1) 43%, rgba(74,23,201,1) 55%, rgba(0,148,197,1) 100%);
    background-size: 400% 400%;
    -webkit-animation: Anim-question-grad 12s ease infinite;
    -moz-animation: Anim-question-grad 12s ease infinite;
    animation: Anim-question-grad 12s ease infinite;
	text-shadow: 0 2px 4px rgba(3,6,74,.8);
}
@-webkit-keyframes Anim-question-grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes Anim-question-grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes Anim-question-grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
#video_over .list .list_option {
	width: 70vh;
    display: inline-block;

}

#video_over .input input {
    display: block;
    background: #0a239f8c;
    color: #fff;
    font-size: 3vh;
	font-weight: 700;
    padding: 1vh;
    margin-bottom: 2vh;
    cursor: pointer;
    text-align: center;
    border: 2px solid #ffffff;
    padding-left: 3vh;
	margin:auto;
	
	/*    background: linear-gradient(100deg, #124ef3, #2995ff);*/
    -webkit-box-shadow: 0px 3px 4px 1px rgba(1,1,1,.5);
    box-shadow: 0px 3px 4px 1px rgba(1,1,1,.5);
    border: 2px solid #359dff;
    -webkit-animation: neon-select 2.5s ease-in-out infinite alternate;
    -moz-animation: neon-select 2.5s ease-in-out infinite alternate;
    animation: neon-select 2.5s ease-in-out infinite alternate;
	
	
	
}
#video_over .input input:focus {
    
    background: #fff;
    color: #292fde;    
    border: 2px solid #ffffff;
	
	-webkit-box-shadow: 0px 4px 5px 5px rgba(1,1,1,.7);
    box-shadow: 0px 4px 5px 5px rgba(1,1,1,.7);
}

#video_over .input input.done:focus {
    background: #70ff88;
	border: 2px solid #ffffff;
}


#video_over .list .list_option .option {
    display: block;
    background: #0a239f8c;
    color: #fff;
    font-size: 3vh;
    padding: 1vh;
    margin-bottom: 2vh;
    cursor: pointer;
    text-align: left;
    border: 2px solid #ffffff;
    padding-left: 3vh;
}

#video_over .list .list_option .option:hover{
    background: #2242e0;
  /*  color: #fff;
    border: 2px solid #ffffff;*/

	transition: .5s all ease-in-out;

}

#video_over .list .list_option .option.check {
	background: linear-gradient(100deg, #124ef3, #2995ff);
		-webkit-box-shadow: 0px 3px 4px 1px rgba(1,1,1,.5);
box-shadow: 0px 3px 4px 1px rgba(1,1,1,.5);
    border: 2px solid #359dff;
	-webkit-animation: neon-select 2.5s ease-in-out infinite alternate;
  -moz-animation: neon-select 2.5s ease-in-out infinite alternate;
  animation: neon-select 2.5s ease-in-out infinite alternate;	
	
}

@keyframes neon-select {
  from {
    box-shadow: 0 0 5px #00059e, 0 0 7px #00059e, 0 0 10px #00059e, 0 0 12px #141CFF, 0 0 20px #141CFF, 0 0 25px #141CFF, 0 0 30px #141CFF, 0 0 35px #141CFF;
  }
  to {
    box-shadow: 0 0 2px #00059e, 0 0 3px #00059e, 0 0 5px #00059e, 0 0 5px #141CFF, 0 0 10px #141CFF, 0 0 10px #141CFF, 0 0 12px #141CFF, 0 0 17px #141CFF;
  }
}


#video_over .list .list_check div {
	/*width:auto;
	background: #ccc;
	color:#000;
	font-size:3vh;
	line-height: 3vh;
	padding:3vh;	
	display: inline-block;
	margin-top: 3vh;*/
	cursor:pointer;
}
#video_over .button.active, #video_over .text.active, #video_over .image.active, #video_over .input.active, #video_over .list.active {
    display: block;
    /*position: fixed;*/
    margin: auto;
}
#video_over .button_image {
	position: absolute;
	z-index: 99;
	background: rgba(0,0,0,0.8);
	width:100%;
	height:100vh;
}
#video_over .puzzle.active {
	display:block;
	position: fixed;
	margin: auto;
	top: 0;
}
#video_over .button_image img {
    display:inline-block;
    max-height:50vh;
    margin:10vh 0;
}

/*buttons*/
.but, .button {
/*	 -webkit-transition: box-shadow 500ms ease-in-out, color 500ms ease-in-out;
  transition: box-shadow 500ms ease-in-out, color 500ms ease-in-out;
  
   box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  color: #fff;  
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
	padding: 1.2em 2.8em;*/
 /* text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  border: 0px solid #fff;*/
      width: fit-content;
}
/*.btn:hover, .button:hover {
  box-shadow: 0 0 40px 40px rgb(57 55 185 / 80%) inset;
  color: #fff;
  outline: 0;
}*/
#start{
    margin-top: 70vh;

}
#start:hover {
 /* box-shadow: 0 0 40px 40px #e74c3c inset;
  box-shadow: 0 0 40px 40px rgb(57 55 185 / 75%) inset;
  color: #fff;
  outline: 0;*/
}

/*#start {
background: #9749ff;
    color: #fff;
    font-size: 5vh;
    line-height: 3vh;
    padding: 3vh;
    cursor: pointer;
    display: inline-block;
    margin-top: 70vh;
    font-weight: bold;
    border-radius: 15px;
}
#start:hover, #clear:hover {
	background:#bbb;
}
*/
#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;
}
.video-js .vjs-tech {
    position: fixed !important; 
    top: 0;
    left: 0;
	/*width: 100% !important;
    height: auto !important;*/
}

.button-block {
	position: absolute;
    bottom: 3vh;
    width: 100vw;
	/*height:100vh;*/
}
#video_over .text.active {
	position: fixed !important; 
}

#video_over .input .input_input .l.hover {
	background: #0441fff7;
}
.headd {
	height: 5rem;
    background-color: #254b90;
	padding-top: 10px;
}
.headd-back {
	background-color: aliceblue;
    padding: 10px;
    display: block;
    width: fit-content;
    position: absolute;
	top: 25px;
    left: 15px;
}
.headd-back a{
text-decoration: none;
}
.headd-title {
	color: white;
	text-align:center;
}
.quest {
    position: relative;
    width: 100%;
    height:350px;
	margin-bottom:40px;	

}
.quest_image {
	float: left;
    display: block;
    position: relative;
    width: 50%;  
}
.quest a .quest_image img {
    padding-bottom:0px; 
    border-radius: 15px;
    border: 2px solid white;
}
.quest_name {
	text-align: left;
    width: 48%;
    float: left;
    position: relative;
    display: block;
	height:100%;
	
}
.quest_name_block {
	width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	padding-left: 10%;
}