@charset "utf-8";


/**
	Ruang Lensa
	ThemeColor: #98B827/#BDDB57
 	Copyright (c) Ruang Coding 
	Author: ruangcoding.id
	Website: https://ruangcoding.id
	
**/

/* ================================================== */


input[type="submit"],input[type="button"]{
background:#98B827;
	cursor: pointer;
	height: 30px;
	color:#FFFFFF;
border:1px solid #98B827;
padding-left:4px;
padding-right:4px;

}

input[type="submit"]:hover,input[type="button"]:hover {
	background-color:#000;
	border:1px solid #000;
	

}







.detail_text{
text-align:justify;
line-height:normal;
font-size:12px
}



	ol, ul, li {
		list-style: none; }


* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #1a1a1a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #7e7e7e;
	line-height: 20px;
}

img {
	vertical-align: top;
}

a img {
	border: none;
    color: #7e7e7e;

}


a {
    color: #7e7e7e;
	text-decoration: none;

}

a:hover {
	color:#98B827;
	text-decoration: none;
}

a:focus {
	outline: 0;
}




select {
background:#3A3A3A;
   width: 200px;
   color: #7e7e7e;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
    cursor:pointer;
}


img:hover {   
  filter: gray; /* IE6-9 */
  filter: grayscale(3); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */}



h1,h2,h3,h4,h5,h6 {
	font-family: 'Open Sans', sans-serif;
	
	
}


/** Main Menu **/
.header-section {
	width: 240px;
	height: 100%;
	position: fixed;
	margin-top: -40px;
	background-color: #98B827;
	box-shadow: 3px 0px 3px #000000;
	z-index: 100;
}

.logo {
	width: 100%;
	height: auto;
	text-align: center;
	padding: 40px 0px 38px 0px;
	background-color: #ffffff;
	border-bottom: #666 solid 5px;
}


/** Nav Menu **/
.header-section #navbtn {
  display: none;
  float: right;
  top: 0;
  margin-top: 18px;
  margin-right: 20px;
}

.main-menu {
	width: 100%;
	position: absolute;
	margin-top: 120px;
}

.main-menu ul ul {
	display: none;
}

.main-menu ul li:hover > ul {
	display: block;
}

.main-menu ul {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 20px;
	text-align: right;
	list-style: none;
	text-transform:uppercase
}

.main-menu ul li {
	padding: 10px 20px;
	position: relative;
	background-color: transparent;

	-webkit-transition: background-color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out;
	-ms-transition: background-color 0.3s ease-in-out;
	-o-transition: background-color 0.3s ease-in-out;
	transition: background-color 0.3s ease-in-out;
}

.main-menu ul li:hover {
	background-color: #BDDB57;
}

.main-menu ul li a {
	color: #ffffff;
	text-decoration: none;
}

.hover-active {
	width: 10px;
	height: 41px;
	position: absolute;
	top: 0;
	margin-left: 220px;
	background: url(../images/hover-active-menu4.png) no-repeat;
	opacity: 0;

	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.main-menu ul li:hover > .hover-active {
	opacity: 1;
}

.main-menu ul .menu-active {
	background-color: #BDDB57;
}

.menu-active .hover-active {
	opacity: 1;
}

.main-menu ul ul {
	width: 190px;
	position: absolute;
	left: 100%;
	top: 0;
	padding-left: 20px;
	text-align: left;
	background: url(../images/blank.gif) repeat;
}

.main-menu ul ul li {
	float: none;
	position: relative;
	margin-bottom: 3px;
}

.main-menu ul ul li a {
	font-size: 14px;
}

.main-menu ul ul ul {
	position: absolute;
	left: 100%;
	top:0;
	padding-left: 3px;
}

.submenu-bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #98B827;
	z-index: -1;
	
	/* These three lines are for transparency in all browsers. */
	opacity: 0.8;
}


/** Social icon navigation **/
.social-main {
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 20px;
	margin-bottom: 10px;
}

.social-main ul {
	list-style: none;
}

.social-main ul li {
	display: inline;
	float: left;
	margin-left: 4px;
}


/** Content **/
.wrapper {
	width: 1024px;
	height: auto;
	margin-top: 40px;
	margin-left: 290px;
}

.container {
	width: 100%;
	height: auto;
	margin-top: 20px;
}

.details {
	background-color: #2a2a2a;
	padding: 40px;
	display: table;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.content-header {
	position: relative;
	margin-top: -13px;
	padding-bottom: 10px;
	overflow: hidden;
	border-bottom: #4e4e4e solid 1px;
}

.content-header h1{
	font-size: 2.2em;
	font-weight: 300;
	color: #ffffff;
	line-height: 42px;
	float: left;
}

.content-header nav {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-bottom: 15px;
}

.content-header nav a {
	color: #aaaaaa;
	text-decoration: none;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.content-header nav a:hover {
	color: #ffffff;
}

.content-header ul {
	list-style: none;
}

.content-header ul li {
	display: inline;
	float: left;
	margin-left: 7px;
	padding-left: 13px;
	background: url(../images/back-space-non-breaking-space.png) no-repeat left;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.content-header ul li:first-child {
	background: none;
}

.content-body {
	margin-top: 28px;
}

.content-body a {
	text-decoration: none;
}


.content-body p {
text-align:justify
}






.content-body .large-button{
	margin-top: 40px;
}


/** Page Header **/
.page-header {
	width: 100%;
	height: 120px;
	display: table;
	background-color: #2a2a2a;
	box-sizing:border-box;
  	-moz-box-sizing:border-box;
  	-webkit-box-sizing:border-box;
	border-left: #BDDB57 solid 5px;
}

.light {
	background-color: #98B827;
	border-left: none;
}

.page-header .content {
	padding: 30px 40px;
	display: table-cell;
	vertical-align: middle;
}

.header-title {
	float: left;
	margin-top: 5px;
}

.header-title h1 {
	text-transform: uppercase;
}

.page-header h1 {
	font-size: 2.5em;
	font-weight: 300;
	color: #ffffff;
	line-height: 25px;
}

.sub-title {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #aaaaaa;
	margin-top: 8px;
}

.light .sub-title {
	color: #ffffff;
}

.page-navigation {
	float: right;
	margin-top: 20px;
}

.page-navigation a {
	color: #aaaaaa;
	text-decoration: none;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.page-navigation a:hover {
	color: #ffffff;
}

.light .page-navigation a {
	color: #ffffff;
}

.page-navigation ul {
	list-style: none;
}

.page-navigation ul li {
	display: inline;
	float: left;
	margin-left: 7px;
	padding-left: 13px;
	background: url(../images/back-space-non-breaking-space.png) no-repeat left;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.light .page-navigation ul li {
	background: url(../images/back-space-non-breaking-space-white.png) no-repeat left;
}

.page-navigation ul li:first-child {
	background: none;
}


/** Category Filter **/
.category-filter ul {
	list-style: none;
	margin-top: 15px;
}

.category-filter ul li {
	color:#aaaaaa;
	text-decoration: none;
	float: left;
	margin-right: 20px;
	display: inline;
	cursor: pointer;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.category-filter ul li:hover,
.category-filter .active {
	color: #ffffff;
}

.grid .mix{
    opacity: 0;
    display: none;
}


/** Service **/
.service ul {
	list-style: none;
	margin-left: -20px;
	margin-top: -20px;
}

.service ul li {
	width: 241px;
	height: 241px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
}

.service .flip-front {
	width: 100%;
	height: 100%;
	background-color: #2a2a2a;
	position: relative;
	text-align: center;
}

.service .grid-title {
	font-size: 1.5em;
	font-weight: 300;
	color: #aaaaaa;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	padding: 30px;
}

.service-icon {
	padding-top: 28%;
}

.service-large ul li {
	width: 502px;
	height: 502px;
	position: relative;
	background-color: #2a2a2a;
}

.service-details {
	padding: 30px 40px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.service-details a {
	text-decoration: none;
}

.service-details h2 a {
	font-size: 24px;
	font-weight: 300;
	color: #aaaaaa;
	line-height: 20px;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.service-details h2 a:hover {
	color: #ffffff;
}

.service-details p {
	margin-top: 20px;
}

.service-details .large-button {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-right: 40px;
	margin-bottom: 40px;
}

.service-large .thumb-hover {
	width: 502px;
	height: 251px;
}


/** Grid Content Area **/
.grid-half {
	width: 502px;
	height: auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

.large-grid {
	width: 100%;
	height: 502px;
	position: relative;
}

.large-grid a {
	text-decoration: none;
}

.large-grid .flip-back {
	width: 100%;
	height: 100%;
	background-color: #2a2a2a;
	padding: 30px;
	position: relative;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.large-grid .large-button {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-right: 30px;
	margin-bottom: 30px;
}

.large-grid blockquote {
	margin-top: 120px;
}

.large-grid .quote-author {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-right: 30px;
	margin-bottom: 40px;
}

.small-grid {
	list-style: none;
	margin-top: -20px;
	margin-left: -20px;
}

.small-grid li {
	width: 241px;
	height: 241px;
	float: left;
	margin-top: 20px;
	margin-left: 20px;
}

.left .small-grid {
	margin-top: 0px;
}

.right .large-grid {
	margin-top: 20px;
}

.small-grid .flip-front {
	width: 100%;
	height: 100%;
}

.icon .flip-front {
	width: 100%;
	height: 100%;
	background-color: #2a2a2a;
	position: relative;
	text-align: center;
}

.icon .grid-title {
	font-size: 1.5em;
	font-weight: 300;
	color: #aaaaaa;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	padding: 30px;
}

.icon .icon-light {
	background-color: #98B827;
}

.icon .text-white {
	color: #ffffff;
}


/** Portfolio **/
.portfolio ul {
	list-style: none;
	margin-left: -20px;
	margin-top: -20px;
}

.portfolio ul li {
	width: 241px;
	height: 241px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	overflow: hidden;
	
	
}






/** Portfolio **/
.portfolio2 ul {
	list-style: none;
	margin-left: -20px;
	margin-top: -20px;
}

.portfolio2 ul li {
	width: 241px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
}







.work-meta {
	width: 23%;
	padding-right: 20px;
}

.work-meta ul {
	list-style: none;
}

.work-meta ul li {
	margin-bottom: 15px;
}

.work-meta a {
	text-decoration: none;
}

.work-meta .work-button {
	margin-top: 28px;
}

.status {
	color: #666;
	margin-left:5px;
	margin-right:5px
}

.portfolio-detail {
	display: table-cell;
	width: 77%;
	vertical-align: top;
}


/** Related Work **/
.related ul {
	list-style: none;
	margin-left: -20px;
	margin-top: -20px;
}

.related ul li {
	width: 241px;
	height: 241px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
}


/** Gallery **/
.gallery-list ul {
	list-style: none;
	margin-left: -20px;
	margin-top: -20px;
}

.gallery-list ul li {
	width: 241px;
	height:183px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
}


/** Our Team **/
.team ul {
	list-style: none;
	margin-left: -20px;
	margin-top: -20px;
}

.team ul li {
	width: 241px;
	height: 241px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
}


/** Call to Action **/
.call-action {
	width: 100%;
	height: 120px;
	margin-top: 40px;
	display: table;
	background-color: #2a2a2a;
	box-sizing:border-box;
  	-moz-box-sizing:border-box;
  	-webkit-box-sizing:border-box;
	border-left: #BDDB57 solid 5px;
}






.call-action2 {
	width: 100%;
	height: 50px;
	margin-top: 20px;
	display: table;
	background-color: #2a2a2a;
	box-sizing:border-box;
  	-moz-box-sizing:border-box;
  	-webkit-box-sizing:border-box;
	border-left: #98B827 solid 5px;
}




.call-action2 .content2 {
	display: table-cell;
	vertical-align: middle;
	padding-top: 5px;
	padding-right: 40px;
	padding-bottom: 5px;
	padding-left: 40px;
}

.call-action2 h2 {
	font-size: 24;
	font-weight: 300;
	line-height: 24px;
	color: #aaaaaa;
	float: left;
	font-weight:bold;
	
}




.call-action2 h3 {
	font-size: 24px;
	font-weight: 300;
	line-height: 34px;
	color: #aaaaaa;
	font-weight:bold;
	
}



.call-action2 a {
	text-decoration: none;
}







.light {
	background-color: #98B827;
	border-left: none;
}

.call-action .content {
	padding: 30px 40px;
	display: table-cell;
	vertical-align: middle;
}

.call-action h1 {
	font-size: 2.2em;
	font-weight: 300;
	line-height: 42px;
	color: #aaaaaa;
	float: left;
	
}

.call-action a {
	text-decoration: none;
}

.call-action .large-button {
	float: right;
	margin: 38px 40px;
}

.full-grid {
	margin-top: 20px;
}


/** Grid Box Title **/
.box-title {
	width: 100%;
	height: 100%;
	background-color: #2a2a2a;
	position: relative;
	text-align: center;
}

.box-title h2 {
	font-size: 1.5em;
	font-weight: 300;
	color: #aaaaaa;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	padding: 30px;	font-weight:bold

}

.box-title .icon {
	padding-top: 18%;
}

.tiny-grid .icon {
	padding-top: 23%;
}

.tiny-grid h2 {
	font-size: 1em;
	font-weight: 400;
	padding: 20px;
}


/** Detail Flip Back **/
.title-back {
	font-size: 1.5em;
	font-weight: 300;
	color: #ffffff;
	text-align: left;
}

.description-back {
	font-size: 14px;
	color: #ffffff;
	line-height: 20px;
	margin-top: 10px;
}


.text-gray {
	color: #aaaaaa;
}

.text-dark {
	color: #7e7e7e;
	font-size:12px;
	line-height:normal
}

.more-details {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: 33px;
	margin-right: 20px;
	padding-right: 27px;
	background: url(../images/big-arrow.png) no-repeat right;
}

.tiny-active {
	margin-bottom: 25px;
	padding-right: 20px;
	background: url(../images/plus-link-readmore.png) no-repeat right;
}

.large-title-back {
	font-size: 2.2em;
	font-weight: 300;
	line-height: 45px;
	color: #aaaaaa;
}

.large-description-back {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;
	font-weight: 300;
	line-height: 34px;
	color: #7e7e7e;
	margin-top: 50px;
}

.active-details {
	width: 100%;
	height: 100%;
	background-color: #98B827;
	padding: 20px;
	position: relative;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.active-details a {
	opacity: 0.6;
	
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.active-details a:hover {
	opacity: 1;
}

.tiny-title {
	font-weight: 300;
	margin-top: 0px;
}

.gray {
	background-color: #2a2a2a;
}


/** Text Thumbnail **/
.small-thumb {
	width: 241px;
	height: 241px;
	background-color: #98B827;
	padding: 20px;
	position: relative;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.dark {
	background-color: #2a2a2a;
}

.small-thumb h2 {
	font-size: 1.5em;
	font-weight: 300;
	color: #ffffff;
	line-height: 33px;
}

.small-thumb .text-gray {
	color: #aaaaaa;
}

.small-thumb p {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	line-height: 20px;
	position: absolute;
	right: 0;
	bottom: 0;
	margin-right: 20px;
	margin-bottom: 33px;
}


/** Blog **/
.blog {
	display: table;
	border-collapse: collapse;
}

.blog-content {
	display: table-cell;
	width: 704px;
	border-right: #1a1a1a solid 20px;
	vertical-align: top;
}

.content-list {
	list-style: none;
	margin-top: -20px;
}

.content-list li {
	width: 100%;
	height: auto;
	margin-top: 20px;
	background-color: #2a2a2a;
}

.blog-details {
	padding: 30px 40px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.blog-details a {
	text-decoration: none;
}

.blog-details h2 a {
	font-size: 24px;
	font-weight: 300;
	color: #aaaaaa;
	line-height: 20px;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.blog-details h2 a:hover {
	color: #ffffff;
}

.blog-details p {
	margin-top: 20px;
}

.bottom-active {
	width: 100%;
	margin-top: 20px;
	overflow: hidden;
}

.blog-meta {
	margin-top: 5px;
	float: left;font-size:12px
}


.tgl-meta {
	margin-top: 5px;

	
	float: left;
	font-size:12px
}
.tgl-meta a {
	color: #7e7e7e;
	text-decoration: none;
	
}
.tgl-meta a:hover {
	color: #fff;
	text-decoration: none;
	
}

.garis {
	color: #666;
	text-decoration: none;
	margin-left:3px;
	margin-right:3px
}







.post-navigation {
	clear: both;
	overflow: hidden;
	margin-right: 0;
	margin-bottom:0px;
	margin-left: 0;
	
}



.post-navigation a {
	color: #7e7e7e;
text-decoration:none
	
}



.post-navigation a:hover {
color:#fff;
text-decoration:none
	
}



.post-navigation
div {
    display: block;
    width:40%;
    position: relative;
    font-size: 16px;
	line-height:normal;
	
	margin-top:20px;
	font-family: 'Open Sans', sans-serif;

}

.post-previous {
    float: left;
    padding-left:25px;
}

.post-next {
    float: right;
    text-align: right;
    padding-right:25px;
}

.post-navigation div
span {
    display: block;
    font-size: 70%;
    color: #ccc;
	font-family: 'Open Sans', sans-serif;
	margin-bottom:3px;
}

.post-navigation div a:after {
    position: absolute;
    color: #ccc;
    font-size: 20px;
    height: 22px;
    line-height: 22px;
    top: 134%;
}

.post-previous  {
background : url(../images/prev_blog.png) no-repeat left center;
float : left;


}

.post-next  {
background : url(../images/next_blog.png) no-repeat right center;
float : right;}




.garispemisah {
	float: none;
	padding-top: 15px;
	border-top: #4e4e4e solid 1px;
}

.garispemisah2 {
	float: none;
	padding-top: 15px;
	border-top: #4e4e4e dashed 1px;
}







.blog-single {
	float: none;
	padding-top: 15px;
	border-top: #4e4e4e solid 1px;
}

.blog-meta a {
	color: #7e7e7e;
	text-decoration: none;
	
}

.blog-meta a:hover {
	text-decoration: underline;
}

.bottom-active .readmore-button{
	float: right;
}

.next-page ul {
	margin-top: 20px;
	float: right;
	list-style: none;
}

.next-page ul li {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #aaaaaa;
	width: 23px;
	height: 27px;
	float: left;
	margin-left: 5px;
	text-align: center;
	padding-top: 3px;
	vertical-align: middle;
	background-color: #2a2a2a;
	
	-webkit-transition: color, background-color 0.2s ease-in-out;
	-moz-transition: color, background-color 0.2s ease-in-out;
	-ms-transition: color, background-color 0.2s ease-in-out;
	-o-transition: color, background-color 0.2s ease-in-out;
	transition: color, background-color 0.2s ease-in-out;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.next-page ul li:hover{
	color: #ffffff;
	background-color: #98B827;
}

.next-page .page-active {
	color: #ffffff;
	background-color: #98B827;
}

.next {
	background: url(../images/next.png) no-repeat center;
}

.next:hover {
	background: url(../images/next-white.png) no-repeat center;
}

.blog-single-details {
	width: 100%;
	height: auto;
	padding: 30px 40px 40px 40px;
	background-color: #2a2a2a;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.blog-single-details h1 {
	font-size: 24px;
	font-weight: 300;
	color: #ffffff;
	margin-bottom: 20px;
}

.blog-single-content {
	margin-top: 20px;
}

.blog-related ul {
	list-style: none;
	margin-left: -20px;
}

.blog-related ul li {
	width: 161px;
	height: 161px;
	float: left;
	margin-top: 20px;
	margin-left: 20px;
}

.blog-single-content p{
text-align:justify
}


.subjud{
font-size:14px;
color:#757575

}

.ket_gambar{
float:left;
font-size:11px;
color:#484848;
width:360px;
margin-bottom:5px

}



.img-berita {
	padding:5px;
	border: 1px solid #484848;
	float: left;
	margin-top: 4px;
	margin-right:15px;
	margin-bottom: 15px;
	margin-left: 0;
}







.img-berita2 {
	padding:5px;
	border: 1px solid #484848;
}





.img-berita3 {
	padding: 5px;
	border: 1px solid #484848;
	float: left;
	margin-right:15px;
	margin-bottom: 5px;
	margin-left: 0;
	width:350px;
	margin-top:10px
	
	
}


/* Comment */
.comment-area {
	margin-top: 30px;
}

.comment-area h1 {
	font-size: 24px;
	font-weight: 300;
	color: #ffffff;
	text-transform: uppercase;
}

.comment-area ul {
	list-style: none;
}

.comment-list {
	display: table;
	margin-top: 20px;
	background-color: #2a2a2a;
	border-left: #98B827 solid 5px;
	border-collapse: separate;
	border-spacing: 30px;
}

.comment-reply {
	background-color: #4a4a4a;
}

.comment-reply p {
	color: #aaaaaa;
}

.avatar-table {
	display: table-cell;
	vertical-align: top;
	padding: 0px 5px;
}

.avatar-table figure {
	border-radius: 50%;
	overflow: hidden;
}

.comment-table {
	display: table-cell;
}

.comment-table p {
	margin-top: 15px;
}

.comment-top {
	overflow: hidden;
}

.name-date {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	float: left;
}

.reply {
	float: right;
}

.reply a {
	color: #aaaaaa;
	text-decoration: none;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.reply a:hover {
	color: #ffffff;
}


/* Leave a Comment */
.leave-comment {
	margin-top: 20px;
	padding: 35px 40px;
	background-color: #2a2a2a;
}

.leave-comment input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	width: 302px;
	height: 35px;
	padding: 0px 20px;
	color: #aaaaaa;
	background-color: #4a4a4a;
	border: #4a4a4a solid 1px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.leave-comment .input-name {
	float: left;
	margin-right: 20px;
}

.leave-comment textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	width: 100%;
	height:120px;
	margin-top: 20px;
	padding: 10px 20px;
	color: #aaaaaa;
	background-color: #4a4a4a;
	border: #4a4a4a solid 1px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.comment-active {
	margin-top: 10px;
	overflow: hidden;
}

.comment-active span {
	float: left;
	color: #aaaaaa;
	line-height: 14px;
}

.comment-active .submit-button {
	width: auto;
	height: auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	float:left;
	background-color: #98B827;
	margin-top: 5px;
	padding: 9px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.comment-active .submit-button:hover {
	background-color: #BDDB57;
}


/* placeholder color */
.leave-comment .placeholder { /* Internet Explorer */
	color: #aaaaaa;
}

.leave-comment input::-webkit-input-placeholder,
.leave-comment textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #aaaaaa;
}

.leave-comment input:-moz-placeholder,
.leave-comment textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #eeeeee;
}
.leave-comment input::-moz-placeholder,
.leave-comment textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #eeeeee;
}


/** Contact **/
.map {
	width: 100%;
	
}

#map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

.contact {
	display: table;
}

.send-message {
	display: table-cell;
	width: 502px;
	border-right: #1a1a1a solid 20px;
	vertical-align: top;
}

.contact-info {
	display: table-cell;
	width: 502px;
	background-color: #2a2a2a;
}

.message {
	margin-top: 0px;
	padding: 35px 40px 20px 40px;
}

.message h2 {
	font-size: 24px;
	font-weight: 300;
	color: #ffffff;
	text-transform: uppercase;
}

.message input {
	margin-top: 20px;
}

.email_success {
	color: #aaaaaa;
	text-align: right;
	margin-top: 20px;
}

.info-box {
	padding: 35px 40px;
}

.info-box h2 {
	font-size: 24px;
	font-weight: 300;
	color: #ffffff;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.info-box ul {
	list-style: none;
}

.info-box ul li {
	margin-top: 5px;
}

.info-box .blog-single-content {
	margin-top: 30px;
}

.info-box .blog-single-content figure {
	float: left;
	margin: 0px 25px 15px 0px;
}


/** Thumbnail Hover Effect **/
.thumb-hover {
	position: relative;
overflow: hidden;
	horizontal-align:middle;
	text-align:center;}




.thumb-hover figure {
	transition:All 1s ease-in-out;
	-webkit-transition:All 1s ease-in-out;
	-moz-transition:All 1s ease-in-out;
	-o-transition:All 1s ease-in-out;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
}

.thumb-hover figure:hover {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
}





.cover {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.sidebar-cover {
	opacity: 0;
	
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-ms-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

.cover:hover {
	opacity: 1;
}

.cover-background {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #1a1a1a;
	z-index: 0;
	opacity: 0.5;
}

.plus-hover {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	background: url(../images/plus-hover.png) center center no-repeat;
    background-position: center center;
}

.zoom {
	background: url(../images/zoom-hover.png) no-repeat center;
}


/** Flip Effect **/
.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}

.flip .flip-front {
    z-index: 5;
}

.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip:hover .flip-back {
    z-index: 10;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip a {
	text-decoration: none;
}


/** Blockquote **/
blockquote {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;
	font-weight: 300;
	color: #aaaaaa;
	line-height: 34px;
	padding-left: 35px;
	background: url(../images/quote-icon.png) no-repeat;
}

.quote-author {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;
	font-weight: 300;
	color: #aaaaaa;
}


/** Button **/
.large-button {
	width: 195px;
	height: auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	background-color: #98B827;
	padding: 12px;
	border-radius: 5px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.dark-button {
	background-color: #1a1a1a;
	
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.large-button:hover,
.work-button:hover,
.readmore-button:hover {
	background-color: #BDDB57;
}

.dark-button:hover {
	background-color: #2a2a2a;
}

.work-button {
	width: 140px;
	height: auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	background-color: #98B827;
	padding: 10px;
	border-radius: 5px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.readmore-button {
	width: 107px;
	height: auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	background-color: #98B827;
	padding: 5px 10px;
	border-radius: 5px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}


/** Sidebar **/
aside {
	display: table-cell;
}

.sidebar {
	width: 300px;
}

.sidebar-box {
	width: 100%;
	margin-bottom: 20px;
}

.sidebar-title {
	background-color: #98B827;
}

.sidebar-title h2{
	font-size: 20px;
	font-weight: 400;
	color: #ffffff;
	text-transform: uppercase;
	padding: 15px 30px;
}

.sidebar-details {
	width: 100%;
	height: auto;
	padding: 20px;
	background-color: #2a2a2a;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


/* Recent News */
.recent {
	list-style: none;
	margin-top: -10px;

}

.recent li {
	padding: 20px 0px;
	border-bottom: #4e4e4e solid 1px;
}

.recent li:last-child {
	border-bottom: none;
}

.recent-list {
	display: table;
}



.crop { 
    width: 65px; 
    height: 65px; 
    overflow: hidden; 
}
.crop img { 
    width: 100%;
}





.recent-list figure {
	display: table-cell;
	position: relative;
	float: left;
	margin-right: 20px;
}

.recent-details {
	display: table-cell;
	vertical-align: top;
}

.recent-details h4 a {
	font-size: 14px;
	font-weight: 400;
	color: #aaaaaa;
	line-height: 20px;
	text-decoration: none;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.recent-details h4 a:hover {
	color: #ffffff;
}

.recent-details a {
	text-decoration: none;
}

.readmore {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #ffffff;
	line-height: 11px;
	text-transform: uppercase;
	padding-left: 20px;
	margin-top: 13px;
	background: url(../images/plus-link-readmore.png) no-repeat left center;
	
	-webkit-transition: padding-left 0.5s ease-in-out;
	-moz-transition: padding-left 0.5s ease-in-out;
	-ms-transition: padding-left 0.5s ease-in-out;
	-o-transition: padding-left 0.5s ease-in-out;
	transition: padding-left 0.5s ease-in-out;
}

.readmore:hover {
	padding-left: 25px;
}


/* Sidebar Categries */
.category {
	list-style: none;
	margin-top: -10px;
}

.category li {
	border-bottom: #4e4e4e solid 1px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}

.category li:last-child {
	margin-top: 5px;
	border-bottom: none;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.category li a {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #aaaaaa;
	text-decoration: none;
	
	-webkit-transition: color 0.5s ease-in-out;
	-moz-transition: color 0.5s ease-in-out;
	-ms-transition: color 0.5s ease-in-out;
	-o-transition: color 0.5s ease-in-out;
	transition: color 0.5s ease-in-out;
}

.category li a:hover {
	color: #ffffff;
}

.category-list {
	padding-left:15px;
	background: url(../images/big-arrow.png) no-repeat left center;
	
	-webkit-transition: padding-left 0.5s ease-in-out;
	-moz-transition: padding-left 0.5s ease-in-out;
	-ms-transition: padding-left 0.5s ease-in-out;
	-o-transition: padding-left 0.5s ease-in-out;
	transition: padding-left 0.5s ease-in-out;
}

.category-list:hover {
	padding-left: 25px;
}


/* Sidebar Gallery */
.gallery {
	list-style: none;
	overflow: hidden;
}

.gallery li {
	float: left;
}



.gallery-list figure {
	position: relative;
}

.jumfot {
float:right;
color:#666
}

.float_share {
float:right;

}




/* Sidebar Tags */
.sidebar-tags {
	list-style: none;
	margin-top: 15px;
}

.sidebar-tags li {
	float: left;
	margin-top: 5px;
	margin-right: 5px;
	padding: 5px 10px;
	background-color: #2a2a2a;
	border-radius: 3px;
	
	-webkit-transition: background-color 0.5s ease;
	-moz-transition: background-color 0.5s ease;
	-ms-transition: background-color 0.5s ease;
	-o-transition: background-color 0.5s ease;
	transition: background-color 0.5s ease;
}

.sidebar-tags li:hover {
	background-color: #98B827;
}

.sidebar-tags a {
	text-decoration: none;
	color: #aaaaaa;
	
	-webkit-transition: color 0.5s ease;
	-moz-transition: color 0.5s ease;
	-ms-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	transition: color 0.5s ease;
}

.sidebar-tags a:hover {
	color: #ffffff;
}


/** Footer **/
.footer-section {
	width: 1024px;
	height: auto;
	margin-top: 20px;
	margin-left: 290px;
	padding: 35px 30px 0px 30px;
	background-color: #2a2a2a;
	overflow: hidden;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.footer-text {
	font-size: 14px;
	font-weight: normal;
	color: #7e7e7e;
	line-height: 20px;
}

.footer-title {
	font-size: 20px;
	font-weight: 600;
	color: #aaaaaa;
	line-height: 16px;
}

.footer-content {
	margin-top: 30px;
}

.footer-about .footer-content {
	margin-top: 0px;
}

.footer-about {
	width: 302px;
	height: auto;
	float: left;
	margin-right: 29px;
}

.footer-contact {
	width: 302px;
	height: auto;
	float: left;
	margin-right: 29px;
}

.footer-contact ul {
	list-style: none;
}

.footer-contact ul li {
	border-bottom: #404040 solid 1px;
	padding: 15px 0px;
}

.footer-contact ul li:first-child {
	padding: 0px 0px 15px 0px;
}

.footer-contact ul li:last-child {
	border-bottom: none;
}

.footer-contact .email {
	background: url(../images/footer-icon-email.png) no-repeat;
}

.footer-contact .phone {
	background: url(../images/footer-icon-phone.png) no-repeat;
}

.contact-list {
	width: 100%;
	height: 41px;
	display: table;
	padding-left: 55px;
	box-sizing:border-box;
  	-moz-box-sizing:border-box;
  	-webkit-box-sizing:border-box;
	background: url(../images/footer-icon-home.png) no-repeat;
}

.contact-list span {
	display: table-cell;
	vertical-align: middle;
}

.footer-subscribe {
	width: 302px;
	height: auto;
	float: right;
}

.footer-subscribe a {
	text-decoration: none;
}


/** Footer Bottom **/
.footer-bottom {
	width: 100%;
	height: auto;
	margin-top: 40px;
	margin-bottom: 20px;
	overflow: hidden;
}

.copyright {
	font-size: 12px;
	font-weight: normal;
	color: #7e7e7e;
	float: left;
}

.copyright a {
	color: #7e7e7e;
	text-decoration: none;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.copyright a:hover {
	color: #cccccc;
}

.footer-bottom nav {
	float: right;
}

.footer-bottom ul {
	list-style: none;
}

.footer-bottom ul li {
	display: inline;
	float: left;
	margin-left: 14px;
}

.footer-bottom ul li a {
	font-size: 12px;
	font-weight: normal;
	color: #7e7e7e;
	text-decoration: none;
	
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

.footer-bottom ul li a:hover {
	color: #cccccc;
}


/** Subscribe Field Box **/
.subscribe-box {
	width: 100%;
	height: auto;
	margin-top: 25px;
}

.subscribe-box input {
	font-size: 12px;
	font-weight: normal;
	width: 145px;
	height: 33px;
	padding: 0px 15px;
	color: #6e6e6e;
	background-color: #1e1e1e;
	border: #404040 solid 1px;
	border-radius: 5px;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.subscribe-box .first-name {
	float: left;
	margin-right: 12px;
}

.subscribe-box .email {
	width: 100%;
	margin-top: 12px;
}

.subscribe-box .subscribe-button {
	width: 145px;
	height: auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	float:left;
	background-color: #98B827;
	margin-top: 20px;
	padding: 9px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	
	/* div padding fix */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

.subscribe-box .subscribe-button:hover {
	background-color: #BDDB57;
}

/* placeholder color */
.subscribe-box .placeholder { /* Internet Explorer */
	color: #6e6e6e;
}

.subscribe-box input::-webkit-input-placeholder { /* WebKit browsers */
    color: #6e6e6e;
}

.subscribe-box input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #9e9e9e;
}
.subscribe-box input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #9e9e9e;
}


/* for Firefox only */
@-moz-document url-prefix() {
    .comment-active {
		margin-top: 13px;
	}
}




/* Table 1 Style */
table[border="1"] {
	  border-collapse:collapse;
	  font:normal 13px Verdana,Arial,Sans-Serif;
   
 	border:1px solid #E8EAEE;
	text-align:left
	
}

table[border="1"] tr {
	  background:#2A2A2A;
}

table[border="1"] th, table[border="1"] td {
	  vertical-align:top;
	  padding:5px 10px;
	  border:1px solid #484848;
	  vertical-align:middle
}

table[border="1"] tr:nth-child(even) {
	  background:#1F1F1F;
}

table[border="1"] th {
	  background:#98B827;
	  color:#fff;
	  font-weight:bold;
}



.nama_pengajar {
 font-weight:bold;
}


.tidakada {
 font-weight:bold;
 font-size:14px
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}

table {
   
    border-width: 0px;
    line-height: 18px;
   
    text-align: left;
    padding: 0 5px;
	width:100%;
	text-align:left;
}

table .even {
    background:#3C3C3C;
}

caption {
    text-align: left;
}

tr {
    border-bottom: 1px solid #ccc;
}

th,
td {
    padding: 5px;
    vertical-align: middle;
    text-align:left;
}








.center-cropped {
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height:241px;
  width:241px;
 
}



	
	/* facebook comments */
.fb-comments, .fb-comments iframe[style]{width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style] {width: 100% !important;}
.fb-page, .fb-page span, .fb-page span iframe[style] { width: 100% !important; }
.twitter-tweet{width: 100% !important;}
.twitter-timeline { width: 100%; }






.animate { transition: all .5s ease-in-out; }

.kotak {
  float: left;
  height: auto;
  margin: 0 10px 10px 0;
}
.kotak .link {
  display: block;
  position: relative;
  overflow: hidden;  
  width: 241px; height: 180px;
}
.kotak .image {
  position: absolute;
  width: 241px;
}
.kotak .blend {
  position: absolute;
  bottom: 0; left: 0;
  width: 241px;
  font-weight: normal;
  background: #98B827;
  color: #fff;
  transition-duration: .4s;
}
.kotak .head {
  height: 1.2em;
  padding: 10px;
  margin: 0;
  display: block;
  text-shadow: 1px 1px 1px #98B827;
    font:13px arial;
  font-weight:bold

}
.kotak .text {
  display: none;
  position: relative;
  overflow: hidden;
  height: 8.5em; 
  padding: .5em 10px;
  font-size:12px;
  line-height:normal
}
.kotak .link:hover .image {
  left: -125%; top: -125%;
 width: 241px;
}
.kotak .link:hover .blend {
  height: 100%;
}
.kotak .link:hover .text {
  display: block;
}



.font_detail3{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
	
}


.font_detail3 ul li{
	padding: 5px 0 6px;
    background: url("../images/big-arrow4.png") no-repeat scroll left top transparent;
	padding-left: 15px;
	
}




.font_detail3{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
margin-top:-10px;
	
}


.jumlahfoto{
color:#FFFFFF;
font-size:14px;
font-weight:bold;
margin-bottom:10px;
margin-top:5px
}




 #search input {
	background: none repeat scroll 0 0 #353535;
	border: 0 none;
	color: #7e7e7e;
	float: left;
	font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
	height: 20px;
	margin: 0;
	padding: 10px;
	transition: background 0.3s ease-in-out 0s;
	width: 180px;
}

#search input[type="submit"] {
	background: url("../images/search.png") no-repeat scroll center center #98B827;
	cursor: pointer;
	height: 40px;
	text-indent: -99999em;
	transition: background 0.3s ease-in-out 0s;
	width: 41px;
	border:1px solid #2A2A2A;
}

#search input[type="submit"]:hover {
	background-color:#000;
}









#colorbox, #cboxOverlay, #cboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}

#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
    clear: left;
}

#cboxContent {
    position: relative;
}

#cboxLoadedContent {
    overflow: auto;
}

#cboxTitle {
    margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
    cursor: pointer;
}

.cboxPhoto {
    float: left;
    margin: auto;
    border: 0;
    display: block;
    max-width: none;
}

.cboxIframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

#cboxOverlay {
    background: #000;
}

#colorbox {
}

#cboxTopLeft {
    width: 14px;
    height: 14px;
    background: url('../images/controls.png') no-repeat 0 0;
}

#cboxTopCenter {
    height: 14px;
    background: url('../images/border.png') repeat-x top left;
}

#cboxTopRight {
    width: 14px;
    height: 14px;
    background: url('../images/controls.png') no-repeat -36px 0;
}

#cboxBottomLeft {
    width: 14px;
    height: 43px;
    background: url('../images/controls.png') no-repeat 0 -32px;
}

#cboxBottomCenter {
    height: 43px;
    background: url('../images/border.png') repeat-x bottom left;
}

#cboxBottomRight {
    width: 14px;
    height: 43px;
    background: url('../images/controls.png') no-repeat -36px -32px;
}

#cboxMiddleLeft {
    width: 14px;
    background: url('../images/controls.png') repeat-y -175px 0;
}

#cboxMiddleRight {
    width: 14px;
    background: url('../images/controls.png') repeat-y -211px 0;
}

#cboxContent {
    background: #fff;
    overflow: visible;
}

.cboxIframe {
    background: #fff;
}

#cboxError {
    padding: 50px;
    border: 1px solid #ccc;
}

#cboxLoadedContent {
    margin-bottom: 5px;
}

#cboxLoadingOverlay {
    background: url('../images/loading_background.png') no-repeat center center;
}

#cboxLoadingGraphic {
    background: url('../images/loading.gif') no-repeat center center;
}

#cboxTitle {
    position: absolute;
    bottom: -25px;
    left: 0;
    text-align: center;
    width: 100%;
    font-weight: bold;
    color: #7C7C7C;
}

#cboxCurrent {
    position: absolute;
    bottom: -25px;
    left: 58px;
    font-weight: bold;
    color: #7C7C7C;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
    position: absolute;
    bottom: -29px;
    background: url('../images/controls.png') no-repeat 0px 0px;
    width: 23px;
    height: 23px;
    text-indent: -9999px;
}

#cboxPrevious {
    left: 0px;
    background-position: -51px -25px;
}

#cboxPrevious:hover {
    background-position: -51px 0px;
}

#cboxNext {
    left: 27px;
    background-position: -75px -25px;
}

#cboxNext:hover {
    background-position: -75px 0px;
}

#cboxClose {
    right: 0;
    background-position: -100px -25px;
}

#cboxClose:hover {
    background-position: -100px 0px;
}

.cboxSlideshow_on #cboxSlideshow {
    background-position: -125px 0px;
    right: 27px;
}

.cboxSlideshow_on #cboxSlideshow:hover {
    background-position: -150px 0px;
}

.cboxSlideshow_off #cboxSlideshow {
    background-position: -150px -25px;
    right: 27px;
}

.cboxSlideshow_off #cboxSlideshow:hover {
    background-position: -125px 0px;
}



.margincaptcha3{
    margin-top:-35px;
   margin-left:90px;
   border:none;
   margin-bottom:20px;
}


.margincaptcha2{
   margin-top:-35px;
   margin-left:175px;
   border:none;
   margin-bottom:20px;
}

.margincaptcha2 .img{
   border: 0px solid #CCCCCC;
}

	
	

/* =========================KALENDER =======================================*/
.dzscalendar {
  position: relative;
  width: 100%;
  min-height: 150px;
  transition-property: height;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  -moz-transition-property: height;
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: height;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: height;
  -o-transition-duration: 0.3s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: height;
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: ease-out; }

.dzscalendar .main-mon, .dzscalendar .mon-body, .dzscalendar .mon-body > .mon-row {
	position: relative;
}

.dzscalendar .events {
  display: none; }

.dzscalendar .calendar-controls {
  position: relative; ;}

.dzscalendar .theMonths {
  position: relative; 
    width: 100%;
}

.dzscalendar .theMonths > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */ }

/* --- estethic styling */
.dzscalendar {
font-family:Open Sans; }

.dzscalendar .testimonial span {
  font-size: 2.5em;
 font-family:Open Sans;
  font-style: italic;
  line-height: 1em;
  color: #555; }

.dzscalendar .testimonial .the-author {
  font-size: 1em;
font-family:Open Sans;
  font-style: italic;
  color: #aaa;
  margin-top: 10px; }
/* --- dirubah border */
.dzscalendar .main-mon .week-day {
	text-align: center;
	font-size: 13px;
	width: 14%;
	font-family:Open Sans;
	width: calc(100%/8);
	display: inline-block;
	border: 1px solid #3B3B3B;

}


.dzscalendar.mode-datepicker .main-mon .mon-body .week-day {
	cursor: pointer;
}

.dzscalendar .main-mon .other-months-date {
  opacity: 0.3;
  filter: alpha(opacity=30); }
/* --- dirubah background color */
.dzscalendar .past-date {
  opacity: 0.5;
  filter: alpha(opacity=50); 
	background-color:#ccc;
	color:#FFFFFF;}



.dzscalendar .hasEvent, .dzscalendar .hasEventForHover{
	line-height:5px;
	text-align:center;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	
	  color:#FFF;
  text-shadow: rgba(0, 0, 0, 0) 0px 0px 1px;
  font-family:Open Sans;
	line-height:10px;
	text-align:center;
   opacity: .9;
  background-color:  #98B827;
  cursor: pointer;
  font-weight: bold; }
  
  
  
  
  
  .week-day curr-months-date.span{

  background-color:#000;
 }
  
  
  
/* --- dirubah background color */
.dzscalendar .calendar-controls {
	min-height: 27px;
	width: 100%;
	background-color:  #98B827;
}
/* --- dirubah top ama left */
.dzscalendar .calendar-controls .arrow-left {
  position: absolute;
  top: 5px;
  left: 15px;
  background: transparent no-repeat center center url(../images/arrowline-left-simple.png);
  width: 16px;
  height: 16px;
  cursor: pointer; }
/* --- dirubah top ama right */
.dzscalendar .calendar-controls .arrow-right {
  position: absolute;
  top: 5px;
  right: 15px;
  background: transparent no-repeat center center url(../images/arrowline-right-simple.png);
  width: 16px;
  height: 16px;
  cursor: pointer; }
  
  
 .curr-month  {
 font-size:14px;
 color:#FFFFFF;
 font-weight:bold;
  }

.dzscalendar .calendar-controls .curr-date {
  text-align: center;
  padding-top: 0px; 
  padding-top:2px;}

.dzscalendar .calendar-controls .curr-month {
  margin-right: 15px; }

.dzscalendar .calendar-controls .curr-year {
  }


.curr-year {
  color: #ccc; }

.dzscalendar .theMonths, .dzscalendar .calendar-controls {
  width: 100%;
  marign-top: 0; }

.dzscalendar .theMonths {
  width:100%;
  min-height: 160px;
  overflow: hidden;
  marign-top: 0; }

.dzscalendar .slideDescription {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  padding: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */

  -webkit-box-sizing: border-box;
  /* Safari */ }

.dzscalendar .slideDescription .desc-close-button {
  position: absolute;
  top: 10px;
  right: 5px;
  text-align: center;
  padding: 1px 7px;
  border: 1px solid white;
  border-radius: 20px;
  font-family: arial, serif;
  cursor: pointer; }

/*=== the DZS tooltip -->
*/
.dzscalendar .dzstooltip {
  position: absolute;
  opacity: 0;
  z-index: 576;
  text-align: left;
  transition-property: height;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  -moz-transition-property: height;
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: height;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: height;
  -o-transition-duration: 0.3s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: height;
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: ease-out; }

.dzstooltip span.label {
  font-weight: bold; }

.dzstooltip > div {
  padding-bottom: 10px; }

.dzstooltip > div > h5 {
  font-family:Open Sans;
  font-size:14px;
  font-weight: bold;
  margin-top: 7px;
  margin-bottom: -15px;}
  
.tema_kal{
  font-family:Open Sans;
  font-size:14px;
  font-weight: bold;
  margin-top: 7px;
  margin-bottom: -5px;}
  


.dzscalendar .aux-transition-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1600px;
  -webkit-perspective: 1600px; }

.dzscalendar .aux-transition {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition-property: transform;
  transition-duration: 0.8s;
  transition-timing-function: ease-out;
  -moz-transition-property: transform;
  -moz-transition-duration: 0.8s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: transform;
  -webkit-transition-duration: 0.8s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: transform;
  -o-transition-duration: 0.8s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: transform;
  -ms-transition-duration: 0.8s;
  -ms-transition-timing-function: ease-out; }

.dzscalendar .aux-transition > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }

.dzscalendar .aux-transition > .theMonths {
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  transition-property: transform;
  transition-duration: 0.8s;
  transition-timing-function: ease-out;
  -moz-transition-property: transform;
  -moz-transition-duration: 0.8s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: transform;
  -webkit-transition-duration: 0.8s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: transform;
  -o-transition-duration: 0.8s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: transform;
  -ms-transition-duration: 0.8s;
  -ms-transition-timing-function: ease-out; }

.dzscalendar .aux-transition > .calendar-controls {
  transform: rotateX(-180deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-180deg);
  -webkit-transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transition-property: transform;
  transition-duration: 0.8s;
  transition-timing-function: ease-out;
  -moz-transition-property: transform;
  -moz-transition-duration: 0.8s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: transform;
  -webkit-transition-duration: 0.8s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: transform;
  -o-transition-duration: 0.8s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: transform;
  -ms-transition-duration: 0.8s;
  -ms-transition-timing-function: ease-out;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); }

.dzscalendar .aux-transition.dzsflipped > .theMonths {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); }

.dzscalendar .aux-transition.dzsflipped > .calendar-controls {
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0); }

.dzscalendar .aux-transition.backward > .theMonths {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); }

.dzscalendar .aux-transition.backward > .calendar-controls {
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg); }

.dzscalendar .aux-transition.backward.dzsflipped > .theMonths {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); }

.dzscalendar .aux-transition.backward.dzsflipped > .calendar-controls {
  transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg); }

.dzscalendar.skin-other .testimonial span {
  font-size: 1em; }

.dzscalendar.skin-other .testimonial .the-author {
  font-size: 1em;
  font-family:Open Sans;
  font-style: italic;
  color: #aaa;
  margin-top: 0px; }

.dzscalendar.skin-black .testimonial span {
  font-size: 1em; }

.dzscalendar.skin-black .testimonial .the-author {
  font-size: 1em;
  font-family:Open Sans;
  font-style: italic;
  color: #aaa;
  margin-top: 0px; }

.dzscalendar.skin-black {
  background: #222;
  color: #fff;
  padding: 7px 3px 12px;
  border-radius: 5px; }

.dzscalendar.skin-black .calendar-controls .arrow-left {
  position: absolute;
  top: 1px;
  left: 10px;
  background: transparent no-repeat center center url(../images/arrowline-left-simple.png);
  width: 15px;
  height: 16px;
  cursor: pointer; }

.dzscalendar.skin-black .calendar-controls .arrow-right {
  position: absolute;
  top: 1px;
  right: 10px;
  background: transparent no-repeat center center url(../images/arrowline-right-simple.png);
  width: 15px;
  height: 16px;
  cursor: pointer; }

.dzscalendar.skin-aurora {
  width: 100%;
  min-height: 230px; }

.dzscalendar.skin-aurora .calendar-controls {
  background: #333;
  color: #fff;
  padding-top: 6px; }

.dzscalendar.skin-aurora .theMonths {
  height: auto; }

.dzscalendar.skin-aurora .theMonths > * {
  position: absolute;
  top: 0;
  left: 0; }

.dzscalendar.skin-aurora .main-mon .week-day {
  text-align: center;
  font-size: 11px;
  background: #eeeeee;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #eeeeee 0%, #e5e5e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #e5e5e5));
  background: -webkit-linear-gradient(top, #eeeeee 0%, #e5e5e5 100%);
  background: -o-linear-gradient(top, #eeeeee 0%, #e5e5e5 100%);
  background: -ms-linear-gradient(top, #eeeeee 0%, #e5e5e5 100%);
  background: linear-gradient(to bottom, #eeeeee 0%, #e5e5e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#e5e5e5',GradientType=0 );
  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.2);
  opacity: 0.75;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */ }

.dzscalendar.skin-aurora .main-mon .other-months-date {
  opacity: 0.3;
  filter: alpha(opacity=30); }

.dzscalendar.skin-aurora .past-date {
  opacity: 0.5;
  filter: alpha(opacity=50); }

.dzscalendar.skin-aurora .main-mon .week-day {
  font-size: 11px;
  font-family:Open Sans;
  padding: 3px 7px; }

.dzscalendar.skin-aurora .headerRow .week-day {
  background: #f6f6f6;
  font-size: 8px;
  border: 0;
  box-shadow: none; }

.dzscalendar.skin-aurora .mon-row {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2); }

.dzscalendar.skin-aurora .calendar-controls .arrow-left {
  position: absolute;
  top: 8px;
  left: 10px;
  background: transparent no-repeat center center url(img/arrowleft.png);
  width: 15px;
  height: 16px;
  cursor: pointer; }

.dzscalendar.skin-aurora .calendar-controls .arrow-right {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent no-repeat center center url(img/arrowright.png);
  width: 15px;
  height: 16px;
  cursor: pointer; }

.dzscalendar.skin-aurora .hasEvent, .dzscalendar.skin-aurora .hasEventForHover {
  color: #0074cc;
  cursor: pointer;
  font-weight: normal;
  background: #b0d4e3;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiMGQ0ZTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjODhiYWNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(center, ellipse cover, #b0d4e3 0%, #88bacf 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #b0d4e3), color-stop(100%, #88bacf));
  background: -webkit-radial-gradient(center, ellipse cover, #b0d4e3 0%, #88bacf 100%);
  background: -o-radial-gradient(center, ellipse cover, #b0d4e3 0%, #88bacf 100%);
  background: -ms-radial-gradient(center, ellipse cover, #b0d4e3 0%, #88bacf 100%);
  background: radial-gradient(ellipse at center, #b0d4e3 0%, #88bacf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=1 ); }

/*======
========skin-responsive
*/
.dzscalendar.skin-responsive {
  margin-top: 15px;
  margin-bottom: 20px;
  width: 100%;
  height: auto; }

.dzscalendar.skin-responsive .calendar-controls {
  margin-bottom: 8px; }

.dzscalendar.skin-responsive .theMonths {
  height: auto; }

.dzscalendar.skin-responsive .theMonths > * {
  width: 100%;
  position: relative; }

.dzscalendar.skin-responsive .main-mon .week-day {
  width: 14%;
  height: 30px;
  border-left: 1px solid rgba(0, 0, 0, 0.1); }

.dzscalendar.skin-responsive .main-mon .mon-row .week-day:first-child {
  border-left: 0px solid rgba(0, 0, 0, 0.1); }

.dzscalendar.skin-responsive .calendar-controls .arrow-left {
  left: 35px; }

.dzscalendar.skin-responsive .calendar-controls .arrow-right {
  right: 25px; }

/*==========================================================
========skin-responsive-galileo
=================================================================
*/
.dzscalendar-con.skin-responsive-galileo {
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.2); }

.dzscalendar.skin-responsive-galileo {
  margin-top: 15px;
  margin-bottom: 20px;
  width: 100%;
  height: auto;
  transition-property: height;
  transition-duration: 0.8s;
  transition-timing-function: ease-out;
  -moz-transition-property: height;
  -moz-transition-duration: 0.8s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: height;
  -webkit-transition-duration: 0.8s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: height;
  -o-transition-duration: 0.8s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: height;
  -ms-transition-duration: 0.8s;
  -ms-transition-timing-function: ease-out; }

.dzscalendar.skin-responsive-galileo .calendar-controls {
  margin-bottom: 8px; }

.dzscalendar.skin-responsive-galileo .theMonths {
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */ }

.dzscalendar.skin-responsive-galileo .theMonths > * {
  width: 100%;
  position: relative; }

.dzscalendar.skin-responsive-galileo .past-date {
  color: rgba(0, 0, 0, 0.5);
  opacity: 1; }

.dzscalendar.skin-responsive-galileo .headerRow {
  background: #ba5e5e;
  color: #eee; }

.dzscalendar.skin-responsive-galileo .headerRow .week-day {
  padding: 5px 0; }

.dzscalendar.skin-responsive-galileo .mon-row.separator {
  height: 20px; }

.dzscalendar.skin-responsive-galileo .theMonths {
  background: white;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */ }

.dzscalendar.skin-responsive-galileo .main-mon .mon-body .mon-row {
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

.dzscalendar.skin-responsive-galileo .main-mon .mon-body .mon-row:empty {
  display: none; }

.dzscalendar.skin-responsive-galileo .main-mon .mon-body .mon-row:first-child {
  border-top: 0px solid rgba(0, 0, 0, 0.1); }

.dzscalendar.skin-responsive-galileo .main-mon .mon-body .week-day {
  width: 14%;
  height: 50px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: bottom;
  text-align: right;
  font-size: 14px;
  font-size: 0.8rem;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
  position: relative; }

.dzscalendar.skin-responsive-galileo .main-mon .week-day > span {
  position: absolute;
  right: 4px;
  bottom: 0; }

.dzscalendar.skin-responsive-galileo .main-mon .mon-row .week-day:first-child {
  border-left: 0px solid rgba(0, 0, 0, 0.1); }

.dzscalendar.skin-responsive-galileo .calendar-controls .arrow-left {
  left: 35px; }

.dzscalendar.skin-responsive-galileo .calendar-controls .arrow-right {
  right: 25px; }

.dzscalendar.skin-responsive-galileo .calendar-controls {
  height: 350px;
  background: #eee;
  margin-bottom: 0; }

.dzscalendar.skin-responsive-galileo .calendar-controls .month-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center; }

.dzscalendar.skin-responsive-galileo .curr-date {
  color: #eee;
  position: absolute;
  right: 40px;
  bottom: 40px;
  font-size: 22px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  padding: 15px 20px;
  text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3); }

.dzscalendar.skin-responsive-galileo .curr-date > * {
  color: #eee; }

.dzscalendar.skin-responsive-galileo .calendar-controls .arrow-left {
  position: absolute;
  left: 10px;
  opacity: 0.5;
  top: auto;
  bottom: 40px;
  background: transparent no-repeat center center url(img/arrowleft-galileo.png);
  width: 50px;
  height: 50px;
  cursor: pointer; }

.dzscalendar.skin-responsive-galileo .calendar-controls .arrow-left:hover {
  opacity: 0.7; }

.dzscalendar.skin-responsive-galileo .calendar-controls .arrow-right {
  position: absolute;
  left: auto;
  right: 0px;
  opacity: 0.5;
  top: auto;
  bottom: 40px;
  background: transparent no-repeat center center url(img/arrowright-galileo.png);
  width: 50px;
  height: 50px;

  cursor: pointer; }

.dzscalendar.skin-responsive-galileo .calendar-controls .arrow-right:hover {
  opacity: 0.7; }

.dzscalendar.skin-responsive-galileo.under-480 .curr-date {
  font-size: 13px; }

.dzscalendar.skin-responsive-galileo.under-240 .main-mon .week-day {
  width: 14%;
  height: 30px;
  font-size: 12px;
  font-size: 0.6rem; }

.dzscalendar.skin-responsive-galileo.under-240 .curr-date {
  font-size: 10px; }

.dzscalendar.skin-responsive-galileo.under-240 .calendar-controls {
  height: 230px; }

.non-animation {
  transition-duration: 0s;
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s; }

.event-receiver {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
  padding: 10px 15px;
  border-radius: 0;
  color: #888; }
  
.gbragenda {
padding-top:10px; }

	
	
	
	
	
	
	
	
	/* --- functional styling */
.dzstooltip-con.js {
  position: fixed;
  top: 0;
  left: 0; }

.dzstooltip {
	position: absolute;
	top: 0;
	left: 0;
	float:left;
	z-index: 9999;
}

.with-tooltip {
  position: relative;
  display: inline-block; }

/* --- estethic styling */
.with-tooltip span:first-child, .dzstooltip {
  background: #fafafa;
  border: 2px solid rgba(0, 0, 0, 0.3);
  padding: 1px 12px;
  color:#686c6f;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  -moz-transition-property: all;
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  -o-transition-property: all;
  -o-transition-duration: 0.3s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: all;
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: ease-out; }

.dzstooltip {
	opacity: 3;
	visibility: visible;
	display: inline-block;
	margin-left: -310px;
	width:220px
}


.judul_tooltip{
font-size:14px;
margin-bottom:-3px;
font-weight:bold
}


.with-tooltip span:first-child {
  position: absolute;
  bottom: 150%;
  overflow: visible;
  left: 0px;
  pointer-events: none;
  color: #111111; }

.interactive .with-tooltip span:first-child {
  pointer-events: auto; }

.with-tooltip:hover span:first-child {
  visibility: visible;
  opacity: 1;
  bottom: 120%; }

.dzstooltip {
  position: relative; }

/* -- arrows -> functional + estethic*/
.with-tooltip span:first-child:after, .dzstooltip:after, .with-tooltip span:first-child:before, .dzstooltip:before {
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  content: " ";
  height: 0;
  width: 0; }

.with-tooltip span:first-child:after, .dzstooltip:after, .with-tooltip span:first-child:before, .dzstooltip:before {
  top: 100%; }

.with-tooltip span:first-child:after, .dzstooltip:after {
  border-color: rgba(136, 183, 213, 0);
  border-width: 5px; }

.with-tooltip span:first-child:after, .dzstooltip:after {
  border-top-color: #fafafa;
  left: 12px;
  margin-left: -5px; }

.with-tooltip span:first-child:before, .dzstooltip:before {
  border-color: rgba(194, 225, 245, 0);
  border-width: 8px; }

.with-tooltip span:first-child:before, .dzstooltip:before {
  border-top-color: rgba(0, 0, 0, 0.3);
  left: 12px;
  margin-left: -8px; }

.with-tooltip.arrow-left span:first-child {
  box-shadow: 0 0 0 0; }

.with-tooltip.arrow-left span:first-child {
  left: 200%;
  right: auto;
  bottom: auto;
  top: 0px; }

.with-tooltip.arrow-left span:first-child:after, .dzstooltip.arrow-left:after, .with-tooltip.arrow-left span:first-child:before, .dzstooltip.arrow-left:before {
  top: 0%; }

.with-tooltip.arrow-left span:first-child:after, .dzstooltip.arrow-left:after {
  border-width: 5px;
  border-color: transparent transparent transparent transparent;
  border-right-color: #fafafa;
  top: 7px;
  margin: 0 0 0 0;
  left: -10px;
  margin-top: -5px; 
  -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
		margin-left: 254px;}

.with-tooltip.arrow-left span:first-child:before, .dzstooltip.arrow-left:before {
  border-width: 8px;
  border-color: transparent transparent transparent transparent;
  border-right-color: rgba(0, 0, 0, 0.3);
  top: 7px;
  left: -8px;
  margin-top: -8px; 
  -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";margin-left: 254px;}

.with-tooltip.arrow-right span:first-child {
  box-shadow: 0 0 0 0;
  min-width: 100px; }

.with-tooltip.arrow-right span:first-child {
  left: auto;
  right: 200%;
  bottom: auto;
  top: 0px; }

.arrow-right.with-tooltip:hover span:first-child {
  left: auto;
  right: 150%;
  bottom: auto;
  top: 0px; }

.with-tooltip.arrow-right span:first-child:after, .dzstooltip.arrow-right:after, .with-tooltip.arrow-right span:first-child:before, .dzstooltip.arrow-right:before {
  top: 0%; }

.with-tooltip.arrow-right span:first-child:after, .dzstooltip.arrow-right:after {
  border-width: 5px;
  border-color: transparent transparent transparent transparent;
  border-left-color: #fafafa;
  top: 9px;
  margin: 0 0 0 0;
  left: auto;
  right: -10px;
  margin: 0 0 0 0;
  margin-top: -5px; }

.with-tooltip.arrow-right span:first-child:before, .dzstooltip.arrow-right:before {
  border-width: 8px;
  border-color: transparent transparent transparent transparent;
  border-left-color: rgba(0, 0, 0, 0.3);
  top: 9px;
  left: auto;
  right: -16px;
  margin: 0 0 0 0;
  margin-top: -8px; }

 /*
        margin:0 0 0 0;
*/
.with-tooltip.arrow-up span:first-child {
  top: auto;
  bottom: auto;
  top: 150%;
  min-width: 75px; }

.arrow-up.with-tooltip:hover span:first-child {
  left: auto;
  top: auto;
  bottom: auto;
  top: 100%;
  margin-top: 5px; }

.with-tooltip.arrow-up span:first-child:after, .dzstooltip.arrow-up:after, .with-tooltip.arrow-up span:first-child:before, .dzstooltip.arrow-up:before {
  top: 0%; }

.with-tooltip.arrow-up span:first-child:after, .dzstooltip.arrow-up:after {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  border-width: 5px;
  border-color: transparent transparent transparent transparent;
  border-bottom-color: #fafafa;
  left: 10px;
  top: -5px;
  margin: 0 0 0 0;
  margin-top: -5px; }

.with-tooltip.arrow-up span:first-child:before, .dzstooltip.arrow-up:before {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  border-color: transparent transparent transparent transparent;
  border-bottom-color: rgba(0, 0, 0, 0.3);
  left: 14px;
  top: -8px;
  margin-top: -8px; }


	
	
	
/******************************TOOLIPS****************************************************************/

.tooltip {
  position: relative;
}

.tooltip:hover .tooltip-inner {
  visibility: visible;
  opacity: .9;  
}

.tooltip .tooltip-inner {
  position: absolute;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size:12px;
  	font-family: 'Open Sans', sans-serif;

  left:45%;
  padding: 4px 6px;
  width: auto;
  color: #ffffff;
  background-color: #444;
  border: 2px solid #333;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .6s ease-in-out;
  z-index: 10;
}

.tooltip.top .tooltip-inner {
  bottom: 32px;
}
.tooltip.bottom .tooltip-inner {
  margin-top: 8px;
}

.tooltip.blue .tooltip-inner {
  background-color: #98B827;
  border: 2px solid #BDDB57;
}
.tooltip.green .tooltip-inner {
  background-color: #98B827;
  border: 2px solid #BDDB57;
}
.tooltip.orange .tooltip-inner {
  background-color: #98B827;
  border: 2px solid #BDDB57;
}
.tooltip.red .tooltip-inner {
  background-color: #98B827;
  border: 2px solid #BDDB57;
}

.tooltip-angle {
  position: absolute;
  border-left-width: 0;
  line-height: 0;
  left: 20%;
}
.tooltip-angle-inner {
  position: absolute;
  border-left-width: 0;
  line-height: 0;
  left: 2px;
}

.tooltip.top .tooltip-angle {
  bottom: -10px;
  border-right: solid 10px transparent;
  border-top: solid 10px #333;
}
.tooltip.top.blue .tooltip-angle {
  border-top: solid 10px #BDDB57;
}
.tooltip.top.green .tooltip-angle {
  border-top: solid 10px #387038;
}
.tooltip.top.orange .tooltip-angle {
  border-top: solid 10px #AD6704;
}
.tooltip.top.red .tooltip-angle {
  border-top: solid 10px #802420;
}

.tooltip.top .tooltip-angle-inner {
  bottom: 5px;
  border-right: solid 5px transparent;
  border-top: solid 5px #444;
}
.tooltip.top.blue .tooltip-angle-inner {
  border-top: solid 5px #98B827;
}
.tooltip.top.green .tooltip-angle-inner {
  border-top: solid 5px #98B827;
}
.tooltip.top.orange .tooltip-angle-inner {
  border-top: solid 5px #F89406;
}
.tooltip.top.red .tooltip-angle-inner {
  border-top: solid 5px #98B827;
}

.tooltip.bottom .tooltip-angle {
  top: -10px;
  border-right: solid 10px transparent;
  border-bottom: solid 10px #333;
}
.tooltip.bottom.blue .tooltip-angle {
  border-bottom: solid 10px #BDDB57;
}
.tooltip.bottom.green .tooltip-angle {
  border-bottom: solid 10px #387038;
}
.tooltip.bottom.orange .tooltip-angle {
  border-bottom: solid 10px #AD6704;
}
.tooltip.bottom.red .tooltip-angle {
  border-bottom: solid 10px #802420;
}

.tooltip.bottom .tooltip-angle-inner {
  top: 5px;
  border-right: solid 5px transparent;
  border-bottom: solid 5px #444;
}
.tooltip.bottom.blue .tooltip-angle-inner {
  border-bottom: solid 5px #98B827;
}
.tooltip.bottom.green .tooltip-angle-inner {
  border-bottom: solid 5px #98B827;
}
.tooltip.bottom.orange .tooltip-angle-inner {
  border-bottom: solid 5px #F89406;
}
.tooltip.bottom.red .tooltip-angle-inner {
  border-bottom: solid 5px #98B827;
}

.tooltip.tip .tooltip-angle {
  left: 10px;
}