/*
class-book.css for CERI Website
Page tupai 
created : 2 January 2014
by  : ela@varnion.com
using prefixfree.js, html5 boilerplate
Copyright www.qajoo.com
*/

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
body{
	overflow-x: hidden;
}
#wrapper.tupai{
	background: #b9e3d7; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I5ZTNkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYzJSIgc3RvcC1jb2xvcj0iIzc5YmZiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3OWJmYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #b9e3d7 0%, #79bfbf 63%, #79bfbf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9e3d7), color-stop(63%,#79bfbf), color-stop(100%,#79bfbf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b9e3d7 0%,#79bfbf 63%,#79bfbf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b9e3d7 0%,#79bfbf 63%,#79bfbf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b9e3d7 0%,#79bfbf 63%,#79bfbf 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #b9e3d7 0%,#79bfbf 63%,#79bfbf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9e3d7', endColorstr='#79bfbf',GradientType=0 ); /* IE6-8 */
	overflow: hidden;
}
	#wrapper:before{
		content: "";
		position: absolute;
		top:0;	
		width: 100%;
		height: 1170px;
		z-index: 1;
	}
	#wrapper.tupai:before{
		background: url(../img/book/tupai/bg.png) 50% -310px no-repeat;
	}
	#blink{
		position: absolute;
		top: 87px;
		left: 54%;
		z-index: 4;
	}
		#blink img{
			position: absolute;
			opacity: 0;
			animation: blink 5s infinite ease;
		}
			#blink img:nth-child(2n){
				animation : blink 4s infinite alternate ease;
				left: 200px;
			}
			#blink img:nth-child(3n){
				animation : blink 7s infinite ease;
				top:100px;
			}
		@keyframes blink{
	        0,100%{opacity: 0;}
	        50%{opacity: 1;}
      	}
header{
	z-index: 13;
	}
	#nav-lib{
		position: absolute;
		width: 100%;
		height: 180px;
		right: 0;
		top:-30%;
		z-index: 7;
		text-align: right;
	}
		#nav-lib ul{
			padding: 0 25px;
		}
		#nav-lib li{
            position: relative;
			display: inline-block;
			margin: 20px 25px;
		}
		#nav-lib a{position: relative;display: block;}
		#nav-lib h3{
			display: none;
		}
#content{
	z-index: 2;
	position: relative;
	padding: 0;
	}

/* template book */
  #book-plc{
  	width: 100%;
  	min-height: 400px;
  	margin-top: 20px;
  	position: relative;
  }
  	#open-book{
  		background: url(../img/book/open-book.png) no-repeat;
  		background-position: center bottom; 
  		background-size: 100%;
  		width: 960px;
  		height: 400px;
  		position: absolute;
  		top: 50px;
  		left: 145px;
  	}
  	#objects{
  		width: 960px;
  		position: relative;	
  	}
	#buttons{
		position: absolute;
		top: 90%;
		left: 20%;
	}
	#buttons.on-right{
		left: 60%;
	}
		#buttons ul li{
			display: inline-block;
		}
		#buttons > ul > li > a{
			display: block;
			text-indent: -9999em;
			background-image: url(../img/book/button.png); 
			background-repeat: no-repeat;
			width: 139px;
			height: 40px;
		}
		#buttons > ul > li:nth-child(2) > a{
			background-image: none;
		}
		#buttons > ul > li:nth-child(1) > a:hover{
			background-position: 0 -40px;
		}
		
	.popup{
		position: fixed;
		top:0px; left:0px;
		z-index: 7;
		width: 100%;
		height:100%;
		background: rgba(38,38,38,0.9);
	}
	#video{
		display: none;
	}
		.vid-wrap{
			width: 600px;
			height: 330px;
			position: relative;
			margin: 4% auto;
			padding: 15px 30px 64px 13px;
			border-radius: 10px;
			background: rgba(177,177,177,0.2);
			text-align: center;
		}
			.vid-wrap iframe{
				width: 100%;
				height: 100%;
				border: 10px solid #fff;
				border-bottom: 38px solid #fff;
			}
		.close{
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background: rgba(212,212,212,0.7);
			position: absolute;
			right: 22px;
			bottom:22px;
		}
			.close a,.close a:after{
				display: block;
				position: absolute;
				width: 15px; height: 15px;
				border-right: 1px solid #4d4d4d;
			}
			.close a{
				transform: rotate(45deg);
				left:-1px;
				top:-1px;
			}
			.close a:after{
				content: '';
				transform: rotate(90deg);
				left: 50%;
				top:-8px;
			}
	.callout{
		font-family: 'Source Sans Pro', sans-serif;
	}
		.callout h4{
			display: block;
			background: rgba(255,255,255,0.5);
			border-radius: 20px;
			position: absolute;
			padding: 15px;
			line-height: 15pt;
			top:-80px;
			left: 0;
			color: #747474;
			font-weight: normal;
		}
		.callout h4:after{
			content: "";
			bottom: -20px;
			left: 50%;
			position: absolute;
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			border-top: 20px solid rgba(255,255,255,0.5);
		}
			.callout.bw .callout-cont{
				color: #000;
				bottom: -40px;
				left: -15px;
				position: absolute;
				text-indent: -999em;
			}

  #objects div{
  	position: absolute;
  }
#desc-plc{
	width: 100%;
	max-width: 1600px;
	margin: 200px auto 50px auto;
	position: relative;
	font-family: 'Source Sans Pro', sans-serif;
	z-index: 5;
}
	.desc-content{
		margin: 20px;
	}
	.column{
		display: block;
		float: left;
		margin: 10px 10px 20px 0;
	}
	.column.two-third{
		width: 47%;
	}
	.column.quarter{
		width: 24%;
	}
		.column-content{
			margin: 10px;
		}
			.column-content h1, .column-content h3{
				margin: 0 0 10px 0; padding: 0;
			}
			.app-icon{
				width: 100px;
				height: 100px;
				margin: 4px 10px 0px 0px;
				display: inline-block;
				float: left;
				border-radius: 10px;
			}
			.column-content p{
				margin: 0px 0 15px 0;
			}
				.key-features{
					padding: 0 0 30px 20px;
					margin: 0;
				}
				.key-features li{
					padding: 0;
					margin: 0;
					list-style: disc;
				}
				.appstore, .appstore li{
					padding: 0; margin: 10px 0 0 0;
				}
				.appstore li a{
					background-image: url(img/app_store_badge.png);
					background-repeat: no-repeat;
					width: 187px;
					height: 58px;
					display: block;
					cursor : pointer;
				}
					.apple{
						background-position: 0 0px;
					}
					.google{
						background-position: -204px 0px;
					}
					.samsung{
						margin-top: 0px;
						background-position: -412px 0;
					}

#batu{
	height: 400px;
	width: 730px;
	background-image: url(../img/book/tupai/rocks.png);
	background-repeat: no-repeat;
	background-size: 100%;
	left:50%;
	top:100px;
}
#kelapa{
	width: 450px;
	height: 268px;
	background-image: url(../img/book/tupai/kelapa.png);
	background-repeat: no-repeat;
	background-size: 100%;
	left:9%;
	top:174px;
}
#judul{
	width: 330px;
	height: 180px;
	background-image: url(../img/book/tupai/judul.png);
	background-repeat: no-repeat;
	background-size: 100%;
	left:47%;
	top:215px;
}
#ikan{
	width: 305px;
	height: 300px;
	background-image: url(../img/book/tupai/fish-sprites.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	left:77%;
	top:52px;
	transform:scale(0.9);
	-moz-transform:scale(0.9);
	-webkit-transform:scale(0.9);
	animation: fishMoves 1s steps(1) infinite;
	-moz-animation: fishMoves 1s steps(1) infinite;
}
	@keyframes fishMoves{
		0%,100%{background-position: 0 0;}
		12%{background-position: -305px 0;}
		24%{background-position: -610px 0;}
		36%{background-position: -915px 0;}
		48%{background-position: -1220px 0;}
		60%{background-position: -1525px 0;}
		72%{background-position: -1830px 0;}
		96%{background-position: -2135px 0;}
	}
	@-moz-keyframes fishMoves{
		0%,100%{background-position: 0 0;}
		12%{background-position: -305px 0;}
		24%{background-position: -610px 0;}
		36%{background-position: -915px 0;}
		48%{background-position: -1220px 0;}
		60%{background-position: -1525px 0;}
		72%{background-position: -1830px 0;}
		96%{background-position: -2135px 0;}
	}
#tupaiWrap{left: 150px;}
#tupai{
	width: 400px;
	height: 370px;
	background-image: url(../img/book/tupai/tupai-sprites-kedip.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	left:15%;
	top:-87px;
	animation:tupai 2s steps(1) infinite;
}
	@keyframes tupai{
		0%,30%,100%{background-position: 0 0;}
		20%{background-position: -400px 0;}
	}
.ekor{
	width: 400px;
	height: 370px;
	background-image: url(../img/book/tupai/ekor01.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	left:15%;
	top:-87px;
	animation: tailMove .8s infinite;
}
	@keyframes tailMove{
		0%{background-image: url(../img/book/tupai/ekor01.png);}
		25%{background-image: url(../img/book/tupai/ekor02.png);}
		50%{background-image: url(../img/book/tupai/ekor03.png);}
		75%{background-image: url(../img/book/tupai/ekor04.png);}
		100%{background-image: url(../img/book/tupai/ekor05.png);}
	}
#jamur{
	width: 180px;
	height: 90px;
	background-image: url(../img/book/tupai/jamur.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	left:55%;
	top:155px;
}