body,
html {
	height: 100%;
	width: 100%;
	color: #000;
	overscroll-behavior: none;
	position: fixed
}

button:focus {
	outline: 0;
}

a:hover,
a:visited,
a:link,
a:active {
	text-decoration: none;
}

@font-face {
	font-family: Neue-Pixel;
	src: url(../fonts/Neue-Pixel-Grotesk.ttf);
}

@font-face {
	font-family: HelveticaNeueLTStd-Roman;
	src: url(../fonts/HelveticaNeueLTStd-Roman.otf);
}

@font-face {
	font-family: RobotoMono;
	src: url(../fonts/RobotoMono-VariableFont_wght.ttf);
}

@font-face {
	font-family: MyriadPro-Bold;
	src: url(../fonts/MyriadPro-Bold.otf);
}

@font-face {
	font-family: MyriadPro-Regular;
	src: url(../fonts/MyriadPro-Regular.otf);
}

#bkg_grid>.row:first-child>.col:first-child {
	background-image: url('../img/espejo.png');
	background-size: contain;
	background-repeat: no-repeat;
}

#bkg_grid[data-id="0"]>.row:first-child>.col:first-child {
	background: #000;
}

#bkg_grid>.row:first-child {
	height: 4%;
}

#bkg_grid>.row {
	height: 8%;
}

.f_neue_pixel {
	font-family: Neue-Pixel !important;
}

.f_helvetica_neue {
	font-family: HelveticaNeueLTStd-Roman !important;
}

.f_robot_mono {
	font-family: RobotoMono !important;
}

.f_myriadpro_bold {
	font-family: MyriadPro-Bold !important;
}

.f_myriadpro_regular {
	font-family: MyriadPro-Regular !important;
}

.s-100 {
	font-size: 7vh;
	line-height: 8.5vh;
}

.cx {
	line-height: 7.5vh;
	font-size: 8vh;
}

#bkg_grid>.row:first-child .s-100 {
	font-size: 3.5vh;
	line-height: 4vh;
}

.c_black {
	background-color: #000;
}

.c_white {
	background-color: #fff;
}

.c_blue {
	background-color: #0032FF;
}

.c_green {
	background-color: #00FF64;
}

.c_pink {
	background-color: #FF00FF;
}


#wrap_solved {
	display: none;
}

.wrap_pupup_text {
	background-color: #fff;
	position: absolute;
	top: calc(8% *2 + 4%);
	left: 0;
	width: calc(14.285% * 6);
	height: calc(8% *9);
	padding: 20px;
	font-family: RobotoMono;
	font-weight: bold;
	font-size: 2.3vh;
	line-height: 3vh;

}

.pupup_text {
	width: 100%;
	height: 100%;
	padding-right: 30px;
	overflow-y: scroll
}

#ModalTimeout,
#ModalTimeout h5 {
	font-family: RobotoMono;
	font-size: 2.3vh;
	line-height: 3vh;
}

#wrap_zoom_img_desc {
	overflow-y: scroll;
	max-height: 23%;
}

.pupup_text h2 {
	text-decoration: underline;
	font-size: 4vh;
	margin-bottom: 20px;
}

#next :hover {
	text-decoration: none;
}


#help {
	display: none;
}
#wrap_help {
	display: none;
	z-index: 999999999;
	background-color: #fff;
	position: absolute;
	top: calc(8% *2 + 4%);
	left: 0;
	width: calc(14.285% * 6);
	height: calc(8% *9);
	padding: 20px;
	font-family: RobotoMono;
	font-weight: bold;
	font-size: 2.3vh;
	line-height: 3vh;
}

#wrap_info0,
#wrap_info {
	z-index: 999;
}

#wrap_help #close_help {
	position: absolute;
	top: 0;
	right: 0;
	right: -16.5%;
	width: 16.5%;
	height: 11.111%;
	background-color: #FF00FF;
	border: none;
	font-family: Neue-Pixel !important;
    line-height: 7.5vh;
	font-size: 8vh;
	padding: 0px;
}

#wrap_help button {
	width: 100%;
	font-size: 3.5vh;
	line-height: 3vh;
	text-align: center;
	background-color: #FF00FF;
	transition: 1s;
	margin-bottom: 20px;
	border: none;
	font-family: MyriadPro-Regular;
	padding: 8px 8px 4px;
}

#wrap_help button.active {
	background-color: #00FF64;
}

#wrap_help .clue {
	display: none;
}

#countdown {
	position: absolute;
	top: calc(8% *11 + 4%);
	left: calc(14.285% * 3);
	width: 14.285%;
	height: 8%;
	color: #fff;
	font-size: 2.5vh;
	font-family: Neue-Pixel !important;
}

.owl-carousel .owl-item img {
	display: inline !important;
	width: auto !important;
}


.b_stick {
	height: 100%;
	padding: 24%;
}

.b_stick>div {
	background-image: url("../img/stick.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
}

#wrap_fullvideo {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #000;
	z-index: 9999999;
}

#form_key {
	position: absolute;
	top: calc(8% * 11 + 4%);
	left: calc(14.285% * 4);
	width: calc(14.285% * 2);
	height: calc(8%);
	z-index: 9999999;
}

#form_key input {
	width: 100%;
	height: 100%;
	background-color: #fff;
	border: none;
	text-align: center;
}

#key {
	display: none;
}

#landscape_div {
	display: none;
}

@media all and (orientation:landscape) {
	#landscape_div {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 0 20%;
		top: 0px;
		left: 0px;
		background-color: #fff;
		z-index: 99999999999;
	}
}