@import url('https://fonts.googleapis.com/css?family=Neucha|Quicksand:400,500|Vollkorn|Open+Sans&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Acme&family=Kaisei+HarunoUmi:wght@500&family=Libre+Baskerville&family=Vollkorn:wght@400;500;700&display=swap');
*/

*
{
	box-sizing:border-box;
	caret-color: rgba(0,0,0,0);
}
body
{
	font-family:"Open Sans",sans-serif;
	font-size:18px;
	margin:0;
	color:black;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
} 

.font_1
{
	font-family:"Neucha";
	font-size:24px;
	font-weight:normal;
	text-transform:uppercase;
}
.font_2
{
	font-size:3.5vh;
	line-height:1.4;
	font-family:"Quicksand";
	font-weight:500;
	text-transform: uppercase;
}

h1,h2,h3,h4
{
	font-family:"Neucha",serif;
	font-weight:normal;
}
.uppercase
{
	text-transform:uppercase;
}

.break_word
{
	word-break: break-word;
}
.hide, .hidden
{
	 display:none !important;
}
.bubble
{
	position:absolute;
	padding:10px 20px;
	border-radius:10px;
	z-index:255;
	left:50px;
	top:0;
	background:deeppink;
	border:0;
	font-weight:500;
	font-size:16px;
	color:white;
	border-bottom:2px solid darkred;
	atext-transform: uppercase;
	width:max-content;
}
.bubble_root
{
	width:auto !important;
}
.bubble:before {
	acontent: "";
	position: absolute;
	left: 10px;
	top: 26px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 20px solid deeppink;
	border-bottom: 10px solid transparent;
  }
.no-pointer
{
	pointer-events: none;
}
.pointer
{
	cursor:pointer;
	/*cursor:url("../img/cursor.png"), pointer;*/
}
.pointer_click
{
	aanimation: zoom_effect 0.35s ease-out;
}
.pointer:before 
{
	position:absolute;
	acontent:"";
	left:0;
	top:0;
	right:0;
	bottom:0;
	border-radius:50%;
	background:rgba(255,255,255,0.5);
	transform: scale(0.001, 0.001);
	z-index:300;
}
.pointer.pointer_click:before 
{
	animation: Click_Effect 0.8s ease-out;
}
@keyframes zoom_effect {
	50% {
	  transform: scale(1.05, 1.05);
	}
	100% {
	  transform: scale(1, 1);
	}
  }
  @keyframes Click_Effect {
	50% {
	  transform: scale(1.5, 1.5);
	  opacity: 0;
	}
	99% { 
	  transform: scale(0.001, 0.001);
	  opacity: 0;
	}
	100% {
	  transform: scale(0.001, 0.001);
	  opacity: 1;
	}
  }

.lng
{
	display:none;
}
.lng_en
{
	adisplay:inherit;
}

/*---- content ----*/
.log 
{
	position:absolute;
	right:0px;
	top:0px;
	background:black;
	color:white;
	padding:5px 10px;
	font-size:16px;
	z-index: 200;;
}
.log:empty
{
	display:none;
}

.wrapper
{
	adisplay:flex;
	aalign-items:center;
	ajustify-content: center;
	position:relative;
	width:100vw;
	height:100vh;
	overflow:hidden;
}
.panel_padding
{
	padding-left:10%;
	padding-right:10%;
}
.panel
{
	height:100vh;
	background:white;
	position:absolute;
	z-index:600;
	display:flex;
	flex-direction: column;
	overflow:auto;
	width:0;
	box-sizing: border-box;
}
.panel::after
{
	position:absolute;
	content:"";
	background:rgba(0,0,0,0.1);
	right:0px;
	top:0;
	width:2px;
	height:100%;
	z-index:400;
}
::-webkit-scrollbar {
	width: 10px;
  }
  
  /* Track */
 ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey; 
	border-radius: 10px;
  }
   
  /* Handle */
::-webkit-scrollbar-thumb {
	background: lightpink; 
	border-radius: 10px;
  }
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: pink; 
  }

.panel_top
{
	background:#d65a5a; /*#e18686;*/ /*#11b1ef;*/
	border-bottom:3px solid #c65a5a; /*f67a7a;*/
	color:white;
	padding-top:10px;
	padding-bottom:10px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content: left;
	z-index:200;
}
.panel_top_vertical
{
	display:none;
}
.top_title
{
	font-family:"aAcme", "Vollkorn","aLibre Baskerville","Kaisei HarunoUmi","Acme";
	font-weight:500;
	font-size:38px;
	margin:0;
	line-height:1;
	apadding-bottom:10px;
	flex:1;
}
.top_title small
{
	font-size:16px;
	display:block;
	font-weight:normal;
}
.top_btn
{
	text-decoration: none;
	fill:#444;
	display:block;
	width:30px;
	-webkit-tap-highlight-color: rgba(0,0,0,0.5);
}

.top_btn span
{
	background:white;
	position:relative;
	height:2px;
	margin:8px 5px;
	width:100%;
	display:block;
	transition:all 0.5s ease-in-out;
}
.top_btn.extended .top 
{
	transform:rotate(45deg) translate(10px,5px);
}
.top_btn.extended .bottom 
{
	transform:rotate(-45deg) translate(10px,-5px);	
}
.top_btn.extended .center 
{
	transform:rotate(135deg) translate(-2px,-2px);
}
.panel_start
{
	position:absolute;
	background:#f5f5dc; 
	left:0;
	top:0;
	width:100%;
	min-height: 100vh;
	z-index:100;
	display:flex;
	align-items: center;
	justify-content: top;
	flex-direction: column;
	transition: all 4s ease-in;
	padding-top:120px;
	padding-bottom:40px;
	border-right:2px solid #c5c5ac;
}
.panel_start_info 
{
	flex:1;
	font-size:22px;
}
.panel_start.started 
{
	opacity:0;
}
.panel_start_buttons
{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	margin-top:40px;
	font-size:20px;
}
.btn_start 
{
	font-size:20px;
	flex:1;
	margin-bottom:20px;
	margin-right:10px !important;
	min-width:150px;
	text-align:center;
	height:70px;
	align-items: center;
	justify-content: center;
}
.panel_center
{
	padding-top:10px;
	padding-bottom:20px;
	flex:1;
	display:flex;
	position:relative;
	overflow: hidden;
}

.scene_text
{
	line-height:1.5;
	position:relative;
	color:#444;
	border-radius:15px;
	padding:20px 0 20px 0; /*5% 5% 5% 5%;*/
	z-index:99;
}

.panel_foot
{
	padding-bottom:40px; 
	display:flex;
}
.panel_foot_right
{
	flex:1;
	justify-content: right;
	display:flex;
}
.panel_btn
{
	display:flex;
	background:#458ee3;
	border-bottom:4px solid #357ed3;
	fill:white;
	color:white;
	padding:10px 20px;
	margin-right:10px;
	text-decoration: none;
	cursor: pointer;
	border-radius:7px;
}
.panel_btn:last-child
{
	margin-right:0;
}
.panel_btn:hover
{
	background:#357ed3;
	text-decoration:none;
}
.panel_btn:active 
{
	border-bottom:2px solid #357ed3;
	border-top:2px solid #357ed3;
}
.panel_btn_disabled:active 
{
	border-bottom:4px solid #357ed3;
	border-top:0;
}
.scene_text span
{
	opacity:0;
	display:inline-block;
	transition:opacity 1s,transform 1s;
}
.animate
{
	opacity:1 !important;
	transform:none !important;
}

@keyframes rotation_360 {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }
.rotate_360 {
	animation: rotation_360 100s infinite linear;
}


@media (hover: none) 
{
 .panel_btn:hover
 {
	fill:white; /*#c16666;*/ /*#21c1ff;*/
 }
}
.panel_btn svg 
{
	width:50px;
}
.panel_btn_disabled
{
	opacity:0.3 !important;
}
.panel_btn_disabled:hover
{
	fill:white;
}
.screen
{
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:50vh;
	background: radial-gradient(circle,white, red, purple);
	background:white;
	overflow: hidden;
	transition:opacity 0.5s;
}
.screen:after
{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:100%;
	background:url("../img/title.jpg"); /*rgb(221, 221, 221);*/
	background-size: cover;
	background-position: right center;
	background:#f3f3f3;
	z-index:500;
	transition:width 0.5s;
}
.screen.starting:after
{
	transition:width 15s ease-in !important;
}
.screen.unload:after
{
	width:100%;
}
.screen.unload
{
	aopacity:0;
}
.item
{
	position:absolute;
	background-size:cover;
}
.item img
{
	position:relative;
	width:100%;
}

.panel_menu
{
	position:absolute;
	width:100%;
	transition:top 0.5s ease-in-out;
	z-index:150;
	left:0;
	top:-100vh;
	overflow:hidden;
	background:#d65a5a;
	color:white;
	padding-bottom:20px;
}

.panel_menu.extended
{
	top:40px;
}

.panel_menu_section
{
	padding:10px 10%;
}
.panel_menu_section:first-child
{
	padding-top:60px !important;
} 
.panel_menu_label
{
	font-size:12px;
	text-transform:uppercase;
}
.panel_menu_row
{
	display:flex;
	flex-wrap:wrap;
}
.menu_btn 
{
	font-size:16px;
	padding:5px 10px;
	background:transparent;
	border-radius:5px;
	margin:5px 10px 5px 0;
	text-align:center;
	text-decoration: none;
	color:white;
	border:1px solid white;
}
.menu_btn.selected 
{
	background:white;
	color:#c65a5a;	
}
.menu_btn:hover
{
	background: #c65a5a;
}
.menu_btn.selected:hover 
{
	background:white;
}

.end_fade
{
	position:absolute;
	left:0;
	top:0;
	background:black;
	width:100%;
	height:100%;
	z-index:500;
	-webkit-mask-image: radial-gradient(circle at center,  transparent 50%, black 40%);
	-webkit-mask-size:20% 20%;	
	-webkit-mask-position:center center;
	aanimation: end-fade-animation 10s;
}
#end_fade
{
	opacity:0;
}
.end_fade_animation
{
	opacity:1 !important;
	transition: all 12s;
	transform:scale(0.8) !important;
}

/* ---- RESPONSIVE -----------------*/

@media (max-width: 768px) 
{

.top_image
{
	width:20px;
	height:20px;
	display:none;
}

.top_btn svg
{
	width:20px;
}
.top_title
{
	font-size:15px;
}
.top_title small
{
	font-size:12px;
}
.scene_text
{
	font-size:15px;
}
.panel
{
	
	aheight:100%;
}
.panel_top
{
	padding:0 5px 10px 5px;
}
.panel_center
{
	padding:10px 0 0 0;
}
.scene_text
{
	padding:10px 10px;
	margin:0;
	background:white;
	aborder-bottom:none;
}
.panel_foot
{
	padding:10px 20px 20px 20px;
}
.panel_btn svg
{
	width:30px;
}

/* vertical */

.wrapper.vertical
{
	display:flex;
	flex-direction:column-reverse;
	aheight:auto !important;
	overflow-y:auto !important;
}
.vertical .top_image
{
	display:none;
}
.vertical .panel
{
	position:relative !important;
	width: 100% !important;
	height: auto;
	flex:1;
}
.vertical .screen
{
	position:relative !important;
}
.vertical .screen:after
{
	border-left:8px solid #4fc1a9; 
	border-bottom:none;
	border-top:none;
}

.vertical .panel_top_vertical
{
	display:flex !important;
	padding:10px 20px;
}
.vertical .panel_top 
{
	display:none;
}

.vertical .scene_text
{
	margin:5px 10px;
	padding:10px 10px;
}
}