body {
	background-color: #0ae;
}

@font-face {
  font-family: 'Lemon';
  font-style: normal;
  /*font-weight: 300;*/
  src: url(../font/Lemon-Regular.ttf) format('truetype');
}

/* Common style */
.grid {
	margin: 40px auto 120px;
	max-width: 1000px;
	width: 90%;
}

.grid a {
	float: left;
	max-width: 250px;
	/*width: 25%;*/
	color: #333;
}

.grid a:nth-child(odd) {
	margin: 30px 0 -30px 0;
}

/**** css tambahan ****/
.grid a:nth-child(even) {
	margin: 30px 0 -30px 0;
}
/**** end css tambahan ****/

.grid figure {
	position: relative;
	overflow: hidden;
	margin: 5px;
	background: #333;
}

.grid figure img {
	position: relative;
	display: block;
	width: 100%;
	opacity: 0.7;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.grid figcaption {
	position: absolute;
	top: 0;
	z-index: 11;
	padding: 10px;
	width: 100%;
	height: 100%;
	text-align: center;
}

.grid figcaption h2 {
	/*margin: 0 0 20px 0;*/
	/*margin: 0;*/
	margin: -15px 0 0 0;
	color: #3e4f01;
	/*color: #3498db;*/
	/*color: #abbd73;*/
	text-transform: uppercase;
	letter-spacing: 1px;
	/*font-weight: 300;*/
	font-size: 130%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	font-family: Lemon;
	line-height: 40px;
}

.grid figcaption p {
	/*padding: 0 20px;*/
	margin: 0;
	padding: 0;
	color: #aaa;
	font-weight: 300;
	font-size: 10pt; /**** css tambahan ****/
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption h2,
.grid figcaption p {
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
}

.grid figure button {
	position: absolute;
	padding: 4px 20px;
	border: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Style for SVG */
.grid svg {
	position: absolute;
	top: -1px; /* fixes rendering issue in FF */
	z-index: 10;
	width: 100%;
	height: 100%;
}

/**** warna tutup ****/
.grid svg path {
	fill: #fff;
	/*fill: #838383;*/
	/*fill: #045D6B;*/
	/*fill: #F2E9E1;*/
}
/**** end warna tutup ****/

/* Hover effects */
.grid a:hover figure img {
	opacity: 1;
}

.grid a:hover figcaption h2,
.grid a:hover figcaption p {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.grid a:hover figcaption p {
	opacity: 0;
}

/* Individual styles */
.portal-1 body {
	background: #3498db;
}

.portal-1 .grid figure button,
.portal-3 .grid figure button {
	top: 50%;
	left: 50%;
	/*border: 3px solid #fff;*/
	border: 3px solid #465701;
	background: transparent;
	/*color: #fff;*/
	color: #465701;
	opacity: 0;
	-webkit-transform: translateY(-50%) translateX(-50%) scale(0.25);
	transform: translateY(-50%) translateX(-50%) scale(0.25);
}

.portal-1 .grid a:hover figure button,
.portal-3 .grid a:hover figure button {
	opacity: 1;
	-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
	transform: translateY(-50%) translateX(-50%) scale(1);
}

.portal-2 body {
	background: #e74c3c;
}

.portal-2 .grid figcaption h2 {
	color: #e74c3c;
}

.portal-2 .grid figcaption p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.portal-2 .grid figure button {
	bottom: 0;
	left: 0;
	padding: 15px;
	width: 100%;
	background: #fff;
	color: #333;
	font-weight: 300;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

.portal-2 .grid a:hover figure button {
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.portal-2 .grid figcaption h2, 
.portal-2 .grid figcaption p,
.portal-3 .grid figcaption h2,
.portal-3 .grid figcaption p {
	-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */
	-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
	timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
}

.portal-2 .grid a:hover figcaption p,
.portal-3 .grid a:hover figcaption p {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
}

.portal-3 body {
	background: #52be7f;
}

.portal-3 .grid figcaption h2 {
	color: #52be7f;
}

.portal-3 .grid a:hover figcaption h2 {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
}

/* Media Queries */
/* Let's redefine the width of each anchor and the margins */

@media screen and (max-width: 58em) {
	.grid a {
		width: 33.333%;
	}

	.grid a:nth-child(odd) {
		margin: 0;
	}

	.grid a:nth-child(3n-1) {
		margin: 30px 0 -30px 0;
	}
}

@media screen and (max-width: 45em) {
	.grid {
		max-width: 500px;
	}

	.grid a {
		width: 50%;
	}

	.grid a:nth-child(3n-1) {
		margin: 0;
	}

	.grid a:nth-child(even) {
		margin: 30px 0 -30px 0;
	}


	.grid figcaption h2 {
		margin-bottom: 0px;
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}

	.grid figcaption p {
		margin: 0;
		padding: 0 10px;
	}
}

@media screen and (max-width: 27em) {
	.grid {
		max-width: 250px;
	}

	.grid a {
		width: 100%;
	}

	.grid a:nth-child(even) {
		margin: 0;
	}
}

/************* box-effect *****************/
.container {
	/*width: 820px;*/
	/*width: 1310px;*/
	width: 1000px;
	/*margin: 10px auto;*/
	margin: auto;
	/*margin: 30px auto;*/
	/*margin: 20px 0;*/
	padding: 25px;
	min-height: 400px;
	height: auto;
}
.box {
	/*width: 70%;*/
	width: auto;
	/*height: 200px;*/
	height: 430px;
	/*background: #fff;*/
	/*background: #C4CBB7;*/
	/*background: #EBEFC9;*/
	/*background: -moz-radial-gradient(center, ellipse cover, #e4efc0 0%, #abbd73 100%);*/
	background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
	/*margin: 40px auto;*/
	/*margin: 80px auto;*/
	margin: -40px auto;
	/*margin-top: 30px;*/
}
/*.box-effect {
	position: relative;
	height: 200px;
	width: 600px;
}
.box-effect:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	right: 10px;
	left: auto;
	width: 50%;
	top: 80%;
	max-width: 300px;
	background: #777;
	-webkit-box-shadow: 0 15px 10px #777;
	-moz-box-shadow: 0 15px 10px #777;
	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}
.contentBox {
	color: #000;
	font-size: 16px;
	font-style: italic;
	font-weight: 300;
	margin: 0;
	padding: 40px 0 5px;
	text-shadow: 1px 1px 1px rgba(255,255,255,.9);
}
*/

.box-effect {
	position: relative;
}
.box-effect:before, .box-effect:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 25px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width: 300px;
	background: #777;
	-webkit-box-shadow: 0 35px 20px #777;
	-moz-box-shadow: 0 35px 20px #777;
	box-shadow: 0 35px 20px #777;
  	-webkit-transform: rotate(-8deg);
  	-moz-transform: rotate(-8deg);
  	-o-transform: rotate(-8deg);
  	-ms-transform: rotate(-8deg);
  	transform: rotate(-8deg);
}
.box-effect:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
/*.box-effect {
	position: relative;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box-effect:before, .box-effect:after {
	content: "";
	position: absolute;
	z-index: -1;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
	box-shadow: 0 0 20px rgba(0,0,0,0.8);
	top: 0;
	bottom: 0;
	left: 10px;
	right: 10px;
	-moz-border-radius: 100px / 10px;
	border-radius: 100px / 10px;
}
.box-effect:after {
	right: 10px;
	left: auto;
	-webkit-transform: skew(8deg) rotate(3deg);
	-moz-transform: skew(8deg) rotate(3deg);
	-ms-transform: skew(8deg) rotate(3deg);
	-o-transform: skew(8deg) rotate(3deg);
	transform: skew(8deg) rotate(3deg);
}*/

/************ end box-effect *************/

/************ Avatar *********************/

.avatar {
	display: inline-block;
	float: left;
	z-index: 99999;
	position: relative;
	margin-top: 20px;
}

.avatar img {
	border: 4px solid #ffffff;
	max-height: 100px;
	max-width: 100px;
	border-radius: 50%;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
}

.circular {
	display: inline-block; /**** css tambahan ****/
	margin-top: 20px; /**** css tambahan ****/
	float: left; /**** css tambahan ****/
	z-index: 9999; /**** css tambahan ****/
	position: relative; /**** css tambahan ****/
	width: 100px;
	height: 100px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: #ffffff url(../images/logo-sip-pbb-non-title.png) no-repeat center center;
	/*background: url(../images/logo-sip-pbb-non-title.png) no-repeat;
	background-position: center center;
	background-color: #fff;*/
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	}

/************ end of avatar **************/

/************ start hover circle *********/

.ch-grid {
	/*margin: 20px 0 0 0;*/
	padding: 0;
	list-style: none;
	display: block;
	/*text-align: center;
	width: 100%;*/
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	/*width: 220px;
	height: 220px;*/
	width: 180px;
	height: 180px;
	display: inline-block;
	/*margin: 20px;*/
	margin: 10px 0 0;
}

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

.ch-info-wrap, 
.ch-info{
	z-index: 9999;
	position: absolute;
	/*width: 180px;
	height: 180px;*/
	width: 140px;
	height: 140px;
	border-radius: 50%;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
}

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
	
}

.ch-info {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-front {
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	
	z-index: 100;
	box-shadow: 
		inset 2px 1px 4px rgba(0,0,0,0.1);
}

.ch-info .ch-info-back {
	background: rgba(230,132,107,0);
}

.ch-img-1 { 
	background-image: url(../images/16.jpg);
}

.ch-img-2 { 
	background-image: url(../images/17.jpg);
}

.ch-img-3 { 
	background-image: url(../images/18.jpg);
}

.ch-img-4 {
	background-image: url(../images/19.jpg); 
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	/*margin: 0 25px;*/
	margin: 0 2px;
	padding: 40px 0 0 0;
	/*height: 90px;*/
	height: 72px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
	text-align: center;
}

.ch-info p {
	color: #fff;
	/*padding: 10px 5px;*/
	padding: 0 5px;
	font-style: italic;
	/*margin: 0 30px;*/
	margin: 0 11px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	text-align: center;
}

.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}

.ch-item:hover .ch-info-front {
	-webkit-transform: rotate3d(1,0,0,-180deg);
	-moz-transform: rotate3d(1,0,0,-180deg);
	-o-transform: rotate3d(1,0,0,-180deg);
	-ms-transform: rotate3d(1,0,0,-180deg);
	transform: rotate3d(1,0,0,-180deg);
	
	box-shadow: 
		inset 0 0 5px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
	background: rgba(230,132,107,0.6);
}

/*********** end of hover circle ****************/