/*
class-book.css for CERI Website
Page kancil.html & bawang.html
created : 11 - November - 2013
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.lutung{
	/*background: url(../img/book/bg-kancil.png) 50% -400px no-repeat;
	background-size: 120%;*/
background: #7f756d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmNzU2ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2RhZDk3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYWRhNzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #7f756d 0%, #dad971 44%, #dada71 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f756d), color-stop(44%,#dad971), color-stop(100%,#dada71)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7f756d 0%,#dad971 44%,#dada71 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7f756d 0%,#dad971 44%,#dada71 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7f756d 0%,#dad971 44%,#dada71 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7f756d 0%,#dad971 44%,#dada71 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f756d', endColorstr='#dada71',GradientType=0 ); /* IE6-8 */

overflow: hidden;
}
	#wrapper:after{
		content: "";
		position: absolute;
		top:0;	
		width: 100%;
		height: 1170px;
		z-index: 1;
	}
	#wrapper.lutung:after{
		background: url(../img/book/lutung/lutung-bg.png) 50% -315px no-repeat;
	}
header{
	z-index: 3;
	}
	#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: 0px 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: 30px;
  	}
  	#objects{
  		width: 960px;
  		position: relative;	
  	}
	#buttons{
		position: absolute;
		top: 90%;
		left: 20%;
	}
		#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.7);
	}
	#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;
				text-align: justify;
			}
				.key-features{
					padding: 0 0 20px 20px;
					margin: 0;
				}
				.key-features li{
					padding: 0;
					margin: 0;
					list-style: disc;
				}
				.appstore, .appstore li{
					padding: 0; margin: 15px 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: 25px;
						background-position: -412px 0;
					}
/* ========================
   BOOK LUTUNG & PURBASARI
   ======================== */
   	#bunga{
   		height: 336px;
   		width: 286px;
   		background-image: url(../img/book/lutung/bunga.png);
		background-repeat: no-repeat;
		background-size: 100%;
		left:18%;
		top:25px;
   	}
   	#bird{
   		width: 78px;
   		height: 59px;
   		background-image: url(../img/book/lutung/bird.png);
		background-repeat: no-repeat;
		left:58%;
		top:0px;
		transform:translate(0,0);
		transition:transform 1s;
		animation: fly .5s steps(1) infinite, move 1s infinite;
   	}
   		@keyframes fly{
	 		0%,100%{background-position: 0px 0px;}
	 		50% {background-position: -80px 1px;}
	 	}
	 	@keyframes move{
	 		0%,100%{transform:translate(0,0);}
	 		50%{transform:translate(5px,10px);}
	 	}
   	#antagonis{
   		width: 110px;
   		height: 340px;
   		background-image: url(../img/book/lutung/antagonis.png);
		background-repeat: no-repeat;
		background-size: 100%;
		left:17%;
		top:-91px;
   	}
   	#lutung{
   		width: 190px;
   		height: 190px;
   		background-image: url(../img/book/lutung/lutung.png);
		background-repeat: no-repeat;
		background-size: 100%;
		left:27%;
		top:129px;
   	}
   	#purbasari{
   		width: 300px;
   		height: 345px;
   		background-image: url(../img/book/lutung/purbasari.png);
		background-repeat: no-repeat;
		background-size: 100%;
		left:63%;
		top:27px;
   	}
   	#logo-lutung{
   		width: 185px;
   		height: 140px;
   		background-image: url(../img/book/lutung/logo-lutung.png);
		background-repeat: no-repeat;
		background-size: 100%;
		left:44%;
		top:220px;
   	}
   	#plant{
   		width: 500px;
   		height: 230px;
   		background-image: url(../img/book/lutung/plant.png);
		background-repeat: no-repeat;
		background-size: 100%;
		left:3%;
		top:250px;
   	}