html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul,li {
	list-style: none;
}


blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html, body {   height: 100%; }

.wing-r {width:50%;height: 100%;min-height:600px;  position:relative;float:left;}
.wing-l {width:50%;height: 100%;min-height:600px; position:relative; float:left; }
.wing-c {width:100%;height: 100%;min-height:600px; position:relative; float:left;}
@media (max-width: 1024px)
{
	header { display:none;}
	#shortcut { display:none;}
	#header {display: block;   }
	
	}
	@media (min-width: 1024px)
{

	#header {display:none;  }
	
	}
	
	/*Landing page Css*/
#landing-letter{ width:688px; height:100%; background:url(images/landingPage.png) center bottom no-repeat; position:absolute; top: 0; left: 0; bottom: 0; right: 0;margin: auto; z-index:3;}
#landing-letter #title { margin:80px 25% 00px 25%;}
#landing-letter h2{ font-family:Verdana, Geneva, sans-serif; font-size:35px; color:#fff;font-weight:bold;}
#landing-letter h1{ font-family:Verdana, Geneva, sans-serif; font-size:64px; color:#fff; font-weight:bold;}

#landing-letter h3{  margin-top:20px; margin-left:45px; font-family: Geneva, sans-serif; font-size:16px; color:#fff;font-weight:bold; border:solid 2px #fff; display:inline-block; padding:10px; float:left;-webkit-transition:color 0.5s, background 0.5s;  -moz-transition:color 0.5s, background 0.5s; -o-transition:color 0.5s, background 0.5s;       transition:color 0.5s, background 0.5s;}
#landing-letter h4{   margin-top:20px ;  margin-right:90px;font-family: Geneva, sans-serif; font-size:16px; color:#fff;font-weight:bold; border:solid 2px #fff; display:inline-block; padding:10px; float:right;-webkit-transition:color 0.5s, background 0.5s;  -moz-transition:color 0.5s, background 0.5s; -o-transition:color 0.5s, background 0.5s;       transition:color 0.5s, background 0.5s;}
#landing-letter h3:hover, #landing-letter h4:hover{background:#FFF; color:#333333; }

#landing-classic{width:50%;height: 100%; position:relative;float:left; background:#333333;}
#landing-contemporary{width:50%;height: 100%; position:relative;float:right; background:url(images/homeBg.jpg) right top no-repeat; }
#landing-classic-box{width:50%;height: 100%; position:absolute;left:0;  background:right bottom no-repeat;z-index:5;}
#landing-contemporary-box{width:50%;height: 100%; position:absolute; right:0; background:left bottom no-repeat;z-index:3; display:block}
#landing-classic,#landing-contemporary,#landing-classic-box,#landing-contemporary-box{-webkit-transition:opacity 0.5s,background 0.5s;
   -moz-transition:opacity 0.5s,background 0.5s;
     -o-transition:opacity 0.5s,background 0.5s;
        transition:opacity 0.5s,background 0.5s;}

#landing-classic-box:hover { background: #fff url(images/landingPage-classic.png)right bottom no-repeat; opacity:0.3; }
#landing-contemporary-box:hover{ background: #fff url(images/landingPage-contemporary.png)left bottom no-repeat; opacity:0.3; }




.nextBtn{height: 50px; width:150px; position:relative;float:right; z-index:1;
}

#menu_bg{ background: url(images/menu_bg.jpg) no-repeat top left fixed; background-size:cover; }
#activities_bg{ background: url(images/activities_bg.jpg) no-repeat top left fixed; background-size:cover;}
#story_bg{ background: url(images/story_bg.jpg) no-repeat top left fixed; background-size:cover;}
#home_bg{  background:url(images/bg_body.jpg) no-repeat center fixed;background-size:cover;}



#nextBtn_10{top:10%; margin-right:15px;} 
 .nextBtn_head{width: 0px;
height: 0px;
border-style: solid;
border-width: 25px 15px 25px 0;
border-color: transparent rgba(40, 40,40, 1) transparent transparent; position:relative; float:right;}

.nextBtn_body{width: 60px;
height: 50px;
background-color: rgba(40, 40,40, 1);position:relative;float:right;transition:width 0.5s; text-align:left; overflow:hidden;
}

.nextBtn_body:hover{ width: 100px;}

.map{z-index: 0; position:absolute;}
#logo{width:120px;height: 165px; background:url(images/logo.png); background-size:cover; position:relative; margin: 0 auto; }

header {width: 120px; position:fixed;z-index: 2;left:0; top:20%;
box-shadow: 0 0 0 12px rgba(40, 40,40, 0.9), 0 0 0 15px #ca202d,0 0 0 20px rgba(40, 40,40, 0.9);   overflow: hidden;
}
header a p{
	
	width:100%;
	color: #282828;
font-family: wellfleet, serif;

padding : 10px;

display:inline-block;
	font-size:14px;
 left:0;right:0;
	position:relative;
	 background-color:rgba(255,255,255,0.9);
	 transition:color 0.5s,background-color 0.5s;
	 }
	 
	 
header a:hover,header a p:hover{color: #fff;  background-color:rgba(203,32,45,0.9);}

#header{ height:40px; width:100%; background-color:rgba(33, 32,37, 1); position:fixed; top:0; z-index:5; text-align:left; } 
#header h2{ width:150px; font-family: arial, serif;font-weight:bold;background-color:rgba(200, 32,45, 1); color:#FFF;	font-size:18px; position:relative; float:left; display:block;  height:40px; padding:10px 10px 0 10px; text-shadow:0px 0px 0 rgb(158,158,158), 0px 1px 0 rgb(71,71,71),0px 2px 1px rgba(0,0,0,0),0px 2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);}
#header a{ min-width:100px; font-family: wellfleet, serif; background-color:rgba(33, 32,37, 1);font-size:14px; position:relative; float:left; display:block;  height:40px; padding:10px 20px 0 20px;  color:#FFF; transition:color 0.3s, background-color 0.3s;}
#header a:hover{ background-color:rgba(255,255,255, 1); color:#000;}


footer{ height:40px; width:100%; background-color:rgba(33, 32,37, 1); position:fixed; bottom:0; z-index:6; padding-top:5px;text-align:center;} 
footer h2{ font-family: Geneva, sans-serif; position:relative; display:inline-block; color:#FFF; font-size:12px;   padding-bottom:10px;} 


.familyTree{ width:100%; height: 192px; border: solid 3px; position:relative; text-align:left;}
.familyTree_btn{
	margin: 0 auto;
	width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 25px 0 25px;
border-color: #000 transparent transparent transparent;
}
#familyTree_bonton{ background: url(images/story_bonton.jpg) no-repeat bottom center; background-size:cover; }
#familyTree_temple{ background: url(images/story_temple.jpg) no-repeat center center; background-size:cover; }
#familyTree_china{ background: url(images/story_china.jpg) no-repeat center center; background-size:cover; }
#familyTree_lassie{ background: url(images/story_lassie.jpg) no-repeat center center; background-size:cover; }

.locationMap{ width:30%; position:relative; float: right; top:10%;z-index:1;background-color: rgba(255, 255,255, 0.9);  box-shadow: 0 0 0 12px rgba(40, 40,40, 0.9), 0 0 0 15px #ca202d,0 0 0 20px rgba(40, 40,40, 0.9); text-align:center; padding:0 30px 30px 0; margin:0 30px 0 0 ;}
.instagram{width:10%; height:93%; min-width:276px;position:relative; float: right;z-index:1;background-color: rgba(255, 255,255, 0.7);  box-shadow: 0 0 0 12px rgba(40, 40,40, 0.9), 0 0 0 15px #ca202d,0 0 0 20px rgba(40, 40,40, 0.9); text-align:center; padding:10px; margin:0 30px 0 0 ; overflow:hidden; transition:width 0.5s;}
.story{width:50%; min-width:276px;position:relative; float: right;z-index:1;background-color: rgba(255, 255,255, 0.7);  box-shadow: 0 0 0 12px rgba(40, 40,40, 0.9), 0 0 0 15px #ca202d,0 0 0 20px rgba(40, 40,40, 0.9); text-align:center; padding:10px; margin:0 30px 0 0 ; overflow:hidden; transition:width 0.5s;}

.instagram:hover{width:25%;}

#bentol_box {background: url(images/bentol_bg.jpg) top left no-repeat; background-size:cover;}

#home_container{ width:100%; height:100%; margin:0 auto ;background:url(images/homeBg.jpg) center top fixed; background-size:cover;  }
#home_head{ width:384px; height:25px;background:url(images/home_head.png) top center no-repeat; margin: 0 auto;}

.home_body{ width:384px;background:url(images/home_body.png) top center repeat-y; margin: 0 auto; padding:10px 20px; overflow:hidden;}

.home_body a ,#shortcut a { color:#000; font-family: noticia-text, serif; text-decoration:none; font-size:16px; }

#home_tail{ width:384x;height:50px;background:url(images/home_tail.png) top center no-repeat;margin: 0 auto;}




#home_banner{width:532.96px;height:240.12px;position:relative; margin:0 auto; background:url(images/homepage_banner.svg) no-repeat center;background-size:contain;}

#shortcut{ right:0; position:fixed; width:200px; top:20%; z-index:2;}
.tags_kopi {  width:160px; float:right; height:43px; background:url(images/shortcuts.png) no-repeat left;transition:width 0.5s;  text-align:left;  padding:15px 10px 10px 40px;}
.tags_kopi:hover{width:200px;}

#tags_library {  width:107px; background:url(images/homepage_library.svg) no-repeat left; transition:width 0.5s;}
#tags_library:hover{width:150px;}

#tags_courtyard {  width:125px; background:url(images/homepage_courtyard.svg) no-repeat left;transition:width 0.5s; }
#tags_courtyard:hover{width:190px;}

#tags_btb {  width:90px; background:url(images/homepage_btb.svg) no-repeat right;transition:width 0.5s;}
#tags_btb:hover{width:120px;}

#tags_chairs {  width:107px; background:url(images/homepage_chairs.svg) no-repeat right; transition:width 0.5s;}
#tags_chairs:hover{width:150px;}

#tags_canteen {  width:125px; background:url(images/homepage_canteen.svg) no-repeat right;transition:width 0.5s; }
#tags_canteen:hover{width:190px;}

.nextBtn_body h2 {
width:80%; 
	color: #fff;
font-family: noticia-text, serif;
position:relative;
line-height:20px;
padding:8px 0 0 0;

	font-size:18px;	
	z-index: 2;
		display:block;
		margin: 0 auto;
 	text-shadow:0px 1px 1px rgb(255,255,255); 
}






#plate-bg {background:url(images/ricepaper.png) no-repeat fixed; background-size:cover;}
#plate { width:70%; min-width:768px;height: 50%; margin: 0 auto;   left:0;
        right:0;
		top:0;
       position:fixed;background:url(images/bg.png) no-repeat; background-size:100% 100%; text-align:center; top:50px;z-index:2;}
#home_container h1 {
		color: #cb202d;
font-family: sancreek, fantasy;
font-size:60px;
text-align:center;
text-shadow:0px 0px 0 rgb(195,24,38),0px 1px 0 rgb(186,15,29),0px 2px 0 rgb(178,7,21),0px 3px 0 rgb(169,-2,12),0px 4px 0 rgb(161,-10,4), 0px 5px 0 rgb(153,-18,-4),0px 6px 5px rgba(0,0,0,0.6),0px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);}

#home_container h2 {font-family: wellfleet, serif; font-size:14px; color:#000; padding: 5px 18px 0px 18px;}

#plate h1,{

	color: #cb202d;
font-family: sancreek, fantasy;

padding : 50px 0 0 0;
	font-size:72px;
	text-shadow:0px 2px 1px rgb(255,255,255);	z-index: 10;

	
}
#plate h1:before 
{ content:' ~ ';
}
#plate h1:after 
{ content:' ~ ';
}
#plate h2 {

	color: #6b6c6f;
font-family: wellfleet, serif;
width:80%;
margin: 0 auto;
padding : 10px;
line-height:30px;
	font-size:20px;
	z-index: 2;
	text-shadow:0px 1px 1px rgb(255,255,255);
 

}



#plate a{
	z-index: 2; 
 
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #d01f2d;
	color: #fff;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none; 
	position:relative;
	clear:both;
}








#kopiC { width:70%; min-width:384px;height:100%; position:relative; float:right;display: inline-block; background:url(images/kopiC_bg.svg) no-repeat right bottom; background-size:cover; -webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 -10px 6px -6px #777;
	        box-shadow: 0 -10px 6px -6px #777;}
 #kopiC .card-info { background:url(images/slideshow/kopiC.jpg); background-size:cover;}

#bonton { width:70%;min-width:384px;height:30%; position:relative; float:left; display: inline-block;background:url(images/bonton_bg.svg) no-repeat left bottom; background-size:cover;
	-webkit-box-shadow: 0 -10px 6px -6px #777;
	   -moz-box-shadow: 0 -10px 6px -6px #777;
	        box-shadow: 0 -10px 6px -6px #777;}
 #bonton .card-info { background:url(images/slideshow/bonton.jpg); background-size:cover;}

#btb { width:70%;min-width:384px;height:70%; position:relative; float:left;display: inline-block;background:url(images/btb_bg.svg) no-repeat left top; background-size:cover;   clear:left;}
 #btb .card-info { background:url(images/slideshow/btb.jpg); background-size:cover;}

#bakery { width:70%; min-width:384px;height:100%; position:relative; float:right;display: inline-block; background:url(images/bakery_bg.svg) no-repeat right top; background-size:cover; }
 #bakery .card-info { background:url(images/slideshow/bakery.jpg); background-size:cover;}

#library { width:70%; min-width:384px;height:100%; position:relative; float:right;display: inline-block; background:url(images/library_bg.svg) no-repeat right top; background-size:cover; }
 #library .card-info { background:url(images/slideshow/library.jpg); background-size:cover;}

#courtyard { width:70%; min-width:768px;height:100%;  margin:0 auto; margin: 0 auto; background:url(images/courtyard_bg.svg) no-repeat center top; background-size:cover; }
 #courtyard .card-info { height:768px; background:url(images/slideshow/courtyard.jpg) right; background-size:cover;}



#canteen { width:70%; min-width:768px;height:100%;  margin:0 auto; margin: 0 auto; background:url(images/canteen_bg.svg) no-repeat center top; background-size:cover; }
 #canteen .card-info { height:768px; background:url(images/slideshow/canteen.jpg) right; background-size:cover;}

#vine { width:70%; min-width:384px;height:50%; position:relative; float:left;display: inline-block; background:url(images/vine_bg.svg) no-repeat left top; background-size:cover; }
 #vine .card-info { background:url(images/slideshow/vine.jpg); background-size:cover;}

#chairs { width:70%; min-width:384px;height:50%; position:relative; float:left;display: inline-block; background:url(images/14Chairs_bg.svg) no-repeat left bottom; background-size:cover; }
 #chairs .card-info { background:url(images/slideshow/chairs.jpg); background-size:cover;}
 

 
 
 

#fun_facts{ background:url(images/ricepaper.png)}
#fun_facts2 { background:url(images/tribune-05.png) right bottom no-repeat;}
#fun_facts3 .card-static{ background:url(images/tribune-04.png) left bottom no-repeat,url(images/tribune-05.png) right bottom no-repeat,url(images/ricepaper.png);}

#container {
	width: 300px;
	height: 300px;
}


.card {
	display: block;
	padding: 0px;
	
	-webkit-perspective-origin: 0 50%;
	-moz-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
	
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

.card img{
   position: relative;
 
}
.card-img {

}
/*.no-touch #chairs:hover .card-img img {
	-webkit-transform: translateX(25%);
	-moz-transform: translateX(25%);
	-ms-transform: translateX(25%);
	transform: translateX(25%);
}*/
.no-touch .card:hover .card-info, .card.cs-hover .card-info {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index:1;
}


.card-static
{
	 width:70%; min-width:384px;height:100%;
	position: absolute;
	top: 0;

	display: block;
	padding: 20px;
text-align:center;
	color: #42210b;
	overflow: visible;
	z-index: 1;
	background:url(images/ricepaper.png);
	-moz-box-shadow:inset 0px 0px 17px #282828;
-webkit-box-shadow:inset 0px 0px 17px #282828;
box-shadow:inset 0px 0px 17px #282828;
}

.wing-l .card-static {right:0;}
.wing-r .card-static {left:0;}

.card-info {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	padding: 20px;
text-align:center;
	color: #42210b;
	overflow: visible;
	z-index: 1;

	
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;    

	
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	-webkit-transition: -webkit-transform all 0.3s linear;
	-moz-transition: -moz-transform all 0.3s linear;
	transition: all 0.3s linear;
	

	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-ms-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}

.instagram h1,.locationMap h1,.card-info h1,.card-static h1 {

/*	color: #ffd61c;
		background-color: rgba(40, 40,40, 0.9);
		text-shadow:0px 1px 0 rgb(0,0,0);*/
font-family: sancreek, fantasy;
padding : 10px 0 0 0;
	font-size:26px;
		z-index: 10;
	/*	background: transparent url(images/pattern.png)  repeat top left;*/ 

}
.instagram h1:before,.locationMap h1:before,.card-info h1:before ,.card-static h1:before 
{ content:'☆ ';
}
.instagram h1:after,.locationMap h1:after,.card-info h1:after ,.card-static h1:after 
{ content:' ☆';
}
.instagram h2,.locationMap h2,.card-info h2,.card-static h2 {

/*		color: #feda8b;
		background-color: rgba(40, 40,40, 0.9);
		padding : 20px;
line-height:20px;
	border-bottom:groove  #959595;*/
font-family: wellfleet, serif;

	font-size:18px;
	z-index: 2;


}

.instagram p,.locationMap p,.card-info p,.card-static p {

/*	color: #fff; 
		background-color: rgba(40, 40,40, 0.9);*/
font-family: noticia-text, serif;
width:100%;
line-height:20px;
padding : 0 20px 10px 20px;
	font-size:14px;	z-index: 2;
		display: inline-block;


}
.instagram p{padding : 0 ;}

.card-info a,.card-static a{
	z-index: 2; 
	margin: 0 auto;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #d01f2d;
	color: #fff;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none; clear:both;
}


.card-static h1 {

	color: #cb202d;
text-shadow:0px 1px 0 rgb(255,255,255);
}

.card-static h2 {

	color: #6b6c6f;
	padding : 20px 20px 5px 20px ;
line-height:20px;
}



.card-static p {

	color: #000; 

}


.card-info h1{

	color: #ffd61c;
	text-shadow:0px 1px 0 rgb(0,0,0);
	background-color: rgba(40, 40,40, 0.7);
}

.card-info h2{

	color: #feda8b;
	padding : 20px 20px 0 20px ;
line-height:20px;
	background-color: rgba(40, 40,40, 0.7);

}
.instagram p:after,.instagram h2:after,.card-static h2:after,.card-info h2:after{

height:17px;
width:166px;
content: "";
   display: block;
 
margin:10px auto 0px;
background:url(images/border.png) no-repeat center;
}

.card-info p{

	color: #fff; 
	background-color: rgba(40, 40,40, 0.7);
}


.instagram .menuitems {
	background:url(images/border.png) no-repeat bottom center;
	padding: 20px 0 40px 0;
}