/* 
// CSS
// WebVRapp by 3rstudio.com for aVRound
// DEMO
// 
// ver. 1.12.0
*/

/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 400;
  src: local('Calibri Italic'), local('Calibri-Italic'), url(https://fonts.gstatic.com/l/font?kit=J7adnpV-BGlaFfdAhLQo6btP&skey=36a3d5758e0e2f58&v=v10) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 700;
  src: local('Calibri Bold Italic'), local('Calibri-BoldItalic'), url(https://fonts.gstatic.com/l/font?kit=J7aYnpV-BGlaFfdAhLQgUp5aHRge&skey=8b00183e5f6700b6&v=v10) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  src: local('Calibri'), url(https://fonts.gstatic.com/l/font?kit=J7afnpV-BGlaFfdAhLEY6w&skey=a1029226f80653a8&v=v10) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 700;
  src: local('Calibri Bold'), local('Calibri-Bold'), url(https://fonts.gstatic.com/l/font?kit=J7aanpV-BGlaFfdAjAo9_pxqHw&skey=cd2dd6afe6bf0eb2&v=v10) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



.startingMenu{background-color: #000;}

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000002;
	background:linear-gradient(180deg,#000002 0,#000002 400px,#000000 1000px); 
	color:#fcfdff;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size:18px;
	line-height:24px;
}


a:link, a:visited{
	color: #fcfdff;
}


.credit{
	position: absolute;
	text-align: center;
	width: 100%;
	padding: 20px 0;
	color: #fff;
}

#desc-container {
	max-width: 500px;
	max-height: 500px;
	min-width: 200px;
	min-height: 250px;
	background: #fff;
	color: #000;
	border-radius: 3px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;

	-webkit-transition: width 0.3s ease-in-out,
	border-radius 0.3s ease-in-out;
	transition: width 0.3s ease-in-out,
	border-radius 0.3s ease-in-out;
}

#desc-container > iframe {
	border: none;
	width:100%;
}

.title {
	font-size: 1.5em;
	text-align: center;
	padding: 5px;
}

.text {
	padding: 0 20px 20px 20px;
}




/* 3R */

a{text-decoration: none;}
a:hover{color:#ffbe18; transition: ease-in 0.7s; transition: ease-out 0.2s; -webkit-transition: ease-in 0.7s;  -webkit-transition: ease-out 0.2s;}
div {height: 100%;}

::-webkit-scrollbar {width: 0.9em;}
::-webkit-scrollbar-track {background:linear-gradient(to bottom,#333 0,#171717 100%);}
::-webkit-scrollbar-thumb {background: #666; }
::-webkit-scrollbar-thumb:hover {background: #d5d5d5; }

.container-wrapper {overflow-y: scroll; height:100%; }
.container {
	width:1050px;
	margin:0 auto;
	position: relative;
}
.container div{
	height: auto;

}


/* header */
header {height:100px; width:100%; } 
#logo a {display:block; margin:50px 0 0 30px; width:150px;}
#logo img {width:150px;}
#languages_container {position: absolute; top:40px; right:16px; color:#999;}
#languages_container ul{list-style: none; margin:0; padding:0; font-size:15px;}
#languages_container ul li{display:inline-block;}
#languages_container ul li:after{margin: 0 5px; content: ' | ';}
#languages_container ul li:last-child:after{display: none;}
#languages_container a{color:#999;}
#languages_container a:hover{color:#ffbe18;}

/* banner */
#banner {width:100%; height:350px; background: url("asset/img/mbp-vr-banner.jpg"); background-repeat: no-repeat; background-size: auto; background-position: center;}

/* main-info */
#main-info {margin:0 30px;}
#main-info h1{font-size: 40px; line-height: 40px; margin:40px 0 10px 0; font-weight: 500;} 
#main-info h1 span{white-space: nowrap;}
#main-info h2{font-size:28px; line-height: 28px; font-weight: 500; font-style: normal; margin:10px 0 40px 0;}
#main-info p{margin:20px 0; }
	p#text1{margin:20px 0;}
	p#text2{margin:20px 0 0 0;}
	p#text3{margin:20px 0 10px 0;}
	p#text4{}
#main-info ul{padding:5px 0 0 40px; margin:0;}

/* 360 | 360 VR buttons */

#nav-desktop{margin:40px 0;}
#nav-mobile{display: none;}

.nav ul{list-style: none; margin:20px; padding:0; }
.nav ul li{margin:5px 0; padding:0 20px; display:inline-block;}
.nav ul li a, .nav ul li span{display: block; padding:32px 180px; border:2px solid #fff; border-radius: 3px;}
.nav ul li:first-child a{background: url("asset/icon/360-icon-black.svg"); background-repeat: no-repeat; background-size: 100px 100px; background-position: center; background-color:#fff;}
.nav ul li:first-child a:hover{background: url("asset/icon/360-icon-white.svg"); background-repeat: no-repeat; background-size: 104px 104px; background-position: center; background-color: #ffbe18; border:2px solid #ffbe18;}
.nav ul li:last-child span{background: url("asset/icon/360-vr-icon-black.svg"); background-repeat: no-repeat; background-size: 64px 64px; background-position: center; background-color:#fff;}
.nav ul li:last-child span:hover{background: url("asset/icon/360-icon-plus-black.svg"); background-repeat: no-repeat; background-size: 128px 64px; background-position: center; background-color:#fff;  transition: ease-in 0.7s; transition: ease-out 0.2s; -webkit-transition: ease-in 0.7s;  -webkit-transition: ease-out 0.2s;}

.foot-info {margin:50px 300px 100px 40px; }
.foot-info-url{letter-spacing: 1px;  padding:0 5px; white-space: nowrap; border-bottom:1px solid #fff;}
.foot-info img {height: 90px; float:left; margin-right:20px;}
.foot-info p{float:none; padding-top:20px; font-size:0.9em; line-height: 1.4em;}


/* foot - legal info */
#legal-info {height: auto; background-color: #000002; padding:10px 0 40px 0;}
#legal-info ul{list-style: none; margin:0; padding:0; }
#legal-info ul li{margin:0; padding:0 ; display:inline-block; color:#666;}
#legal-info ul li a{text-decoration: none; color:#999; font-size:0.85em;}
#legal-info ul li a:hover{color:#fff;}
#legal-info ul li:after{margin: 0 5px; content: ' | ';}
#legal-info ul li:last-child:after{display: none;}
#legal1:before {content: " \00a9 ";}


/* */
#progress_container {display:none;position:absolute; width: 100%; height: 100%;left:0;top:0; white-space: nowrap;}
#progress_touch {position:absolute; background-color:#00000080; width: 100%; height: 100%;left:0;top:0; white-space: nowrap;}
#progress_cardboard{position:absolute; background-color:#00000080; width: 100%; height: 100%;left:0;top:0; white-space: nowrap;text-align:center; z-index: 10000;  }
#progress_cardboard_left{height:100%; width:50%; float:left; position:relative}
#progress_cardboard_right{height:100%; width:50%; float:right; position:relative}


.nav-list__item {
	display: inline-block;
	margin:0 50px;
	position: absolute;
	right: 0;
	width: 150px;
}
.nav-list__item:hover .dropdown{
	top: -110px;
	height: 110px;
}

div .dropdown{
	overflow: hidden;
   -webkit-transition: top 0.5s, height 0.5s;
	transition: top 0.5s, height 0.5s;
	background-color: black;
	border: 1px solid gray;
	font-size:18px;
	line-height: 135%;
	padding:  2px 0;
	margin: 0 25px;
	box-sizing: border-box;
	position: absolute;
	top: -30px;
	height: 30px;
	left: -25px;
}
.dropdown>div{
	font-size:0.85em;
}
.dropdown>div:hover{
	background-color: #ffbe18;
	color: white !important;
}
section div .dropdown>div{
	color: white !important;
}
.dropdown>div>a{
    padding: 0 25px;
    width: 100px;
    display: inline-block;
    color: #999;
}
section div .arrow{
	position: absolute;
	right: 10px;
	bottom: 2px;
	font-size: 10px;
	transform: scaleX(1.7);

}
section div .arrow_down{
font-size: 10px;
	display: none;
}

section div .dropdown>div>a:hover{
	color: white !important;
}

/* media - smartphone */
@media (max-width:992px) {
	
	html, body {background-color: #000;}
	
	#nav-desktop{display:none;}
	#nav-mobile{display: block;}
	
	.container {
		max-width: 500px;
		width:100%;
	
		position: relative;
	}

	#mb-claim {left:120px;}
	#languages_container {position: absolute; top:5px; right:16px; color:#999; font-size:0.9em;}
	
	#main-info {margin:0 30px;}
	#main-info h1{}
	#main-info h2{}
	#main-info p{}
		p#text3{margin:20px 0 10px 0;}
		p#text4{}
	#main-info ul{padding:5px 0 0 30px; }
	
	.nav ul{margin:20px 20px;}
	.nav ul li{padding:0 10px;}
	
	#nav-mobile li a {padding:48px 65px;}
	#nav-mobile li:last-child a{background: url("asset/icon/360-vr-icon-black.svg"); background-repeat: no-repeat; background-size: 64px 64px; background-position: center; background-color:#fff;}
	#nav-mobile li:last-child a:hover{background: url("asset/icon/360-vr-icon-white.svg"); background-repeat: no-repeat; background-size: 70px 70px; background-position: center; background-color: #ffbe18; border:2px solid #ffbe18;}
	.foot-info {margin:30px 40px 100px 40px;}
	
	#legal-info {padding:10px 20px 40px 20px;}
	
	section .nav-list__item {
		/* left: -10px; */
    	/* right: 0;
		bottom: -150px; */
		height: 120px;
		position: relative;
	}
	.nav-list__item:hover .dropdown{
		top: 10px;
		height: 110px;
	}
	
	div .dropdown{
		left: -55px;
		top: 10px;
		height: 30px;
		width: 150px;
		font-size:18px;
	}

	section div .arrow_down{
		display: inline;
	}
	section div .arrow_up{
		display: none;
	}
	section div .arrow{
		bottom: 0;
		top: 2px;
	
	}
}
	
/* navigation mobile horizontal */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
	#main-info h1{}
	#main-info p{}
	#nav-mobile li a {padding:48px 95px;}
}

.panolens-container{color:#333;}

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}



@-webkit-keyframes swipeme {
	
	/* from {background-position-y: 200px;} */
	/* to {background-position-y: 0px;} */
	from {transform: translateY(0)}
	to {transform: translateY(-80%)}
  }
  
  /* Standard syntax */
  @keyframes swipeme {
	/* from {background-position-y: 200px;}
	to {background-position-y: 0px;} */
	from {transform: translateY(0)}
	to {transform: translateY(-80%)}
  }

  @-webkit-keyframes fadeMe {
	
	0%   {opacity: 0;}
	10%  {opacity: 1;}
	90%  {opacity: 1;}
	100% {opacity: 0;}
  }
  
  /* Standard syntax */
  @keyframes fadeMe {
	0%   {opacity: 0;}
	10%  {opacity: 1;}
	90%  {opacity: 1;}
	100% {opacity: 0;}
  }

.iphone_swiper{
	display: none;
    height: 100vh;
    width: 10vw;

    background-color: #0000006b;
    /* z-index: 100000000; */
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
}
.phone_hand{
    height: 40%;
    width: 100%;
    background: url("asset/icon/hand.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 9vw;
    /* z-index: 100000000; */
    position: fixed;
    right: 0;
    top: 40%;
    bottom: 0;
    -webkit-animation-name: swipeme;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: swipeme, fadeMe;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.confirm_text{
	display: flex;position: fixed;top: 0;bottom: 0;left: 0;right: 0;justify-content: center;align-items: center;
}

.confirm_button{
	font-size: 25px;background-color: mediumturquoise;border: 1px solid aqua;padding: 10px 40px;
}