@keyframes fadeout{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
@keyframes rotateCW{
	0%{
		transform: rotateY(0deg);
	}
	50%{
		transform: rotateY(180deg);
	}
	100%{
		transform: rotateY(360deg);
	}
}

html, body{
	background-image: url('../img/unj_bg.png');
	background-attachment: fixed;
	margin:0;
	padding:0;
	height:100%;
	/*background-color: #4dbf4c;*/
}

.bigger-text{
	font-size: large;
}

.large-text{
	font-size: x-large;
}

.capital{
	text-transform: capitalize;
}

.bold{
	font-weight: bold !important;
}

.icon-xx-small{
	font-size: xx-small !important;
	padding-bottom: 1px;
}
.grey-color{
	color: grey;
}
#white-cover{
	height: 100%;
	width: 100%;
	background-color: #fff;
	position: fixed;
	z-index: 3;
}
#white-cover.hidding{
  animation-name: fadeout;
  animation-duration: .3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#loading-cover{
	height: 100%;
	width: 100%;
	background-color: rgba(255,255,255,.4);
	position: fixed;
	z-index: 1059;
	text-align: center;
}
.unj-loader{
	padding-bottom: 10px;
  animation-name: rotateCW;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.wrapper {
	min-height:100%;
	position:relative;
}
.content {
	position: relative;
	/* padding-top: 15px; */
	padding-bottom:170px; /* Height of the footer element */
}
.header{
    width: 100%;
    z-index: 1500;
    padding: 15px 0px;
    padding-bottom: 30px;
    background-image: url('../img/green-banner2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.slider-controller{
	position: absolute;
	height: 100%;
	width: 100%;
	margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
}

.slider-controller a.left-controller{
    z-index: 2;
	margin: auto;
	text-align: center;
	width: 50px;
	position: absolute;
	font-size: xx-large;
    left: 20px;
    display: block;
    top: 40%;
    color: #016f00;
    background-color: rgba(255,255,255,.5);
    border-radius: 5px; 

    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
}
.slider-controller a.right-controller{
    z-index: 2;
	margin: auto;
	text-align: center;
	width: 50px;
	position: absolute;
	font-size: xx-large;
    right: 20px;
    display: block;
    top: 40%;
    color: #016f00;
    background-color: rgba(255,255,255,.5);
    border-radius: 5px;

    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
}
.slider-controller a.right-controller:hover, .slider-controller a.left-controller:hover{
    background-color: rgba(255,255,255,.7);
}
.footer{
  	text-align: center;
  	/*border-top: 1px solid #efefef;*/
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
}

.footer .top-side{
  	font-size: small;
  	border-top: 1px solid #484848;
  	color: #999;
	background-color: #222;
  	padding: 7px;
}

.footer .bottom-side{
  	font-size: x-small;
	background-color: #484848;
  	color: #ccc;
  	padding: 5px;
}

.footer .unj-link,.footer .unj-link:focus,.footer .unj-link:visited{
	color: inherit;
	text-decoration: none;
}

.footer .unj-link:hover{
	color: #fff;
	text-decoration: none;
}

.contact-table{
	margin: 0 auto;
}

.contact-table i{
	color: #fff200;
}

.contact-table th, .contact-table td{
	padding: 0 10px;
	text-align: center;
}

.footer .table-contact td, .footer .table-contact th{
	text-align: left;
	vertical-align: top;
}

.green-bg{
	top: 0px;
}
#bg-green1{
	background:url('../img/bg-green1.svg') -25px -50px;
	position:absolute;
	width:100%;
	z-index:0;
  height:100%;
  background-size: calc(100% + 50px);
	background-repeat: no-repeat;
}
#bg-green2{
	background:url('../img/bg-green2.svg') -25px -50px;
	position:absolute;
	width:100%;
	z-index:0;
  height:100%;
  background-size: calc(100% + 50px);
	background-repeat: no-repeat;
}
#bg-green3{
	background:url('../img/bg-green3.svg') -25px -50px;
	position:absolute;
	width:100%;
	z-index:0;
  height:100%;
  background-size: calc(100% + 50px);
	background-repeat: no-repeat;
}
.logo-responsive{
	max-width: 100%;
	height: auto;
}
.text-white{
	color: #fff;
}
.text-green{
	color: #198e19;
}
.text-lg{
	font-size: large;
}
h2.judul-panel, h3.judul-panel{
	margin: 0px;
}
.panel{
  /*box-shadow: 0 0 11px 1px rgba(0, 0, 0, .3);*/
}
.alert-danger-light{
	background-color: #ffccb4;
	color: #b11a1a;
}
.alert-info-light {
    background-color: #b2dfff;
    color: #1c5d8c;
}

.btn-success {
    color: #ffffff;
    background-color: rgb(1, 111, 0);
		border: 1px solid transparent;
}

@media (min-width:1550px){
	.green-bg{
		top: -50px;
	}
}

@media(min-width:768px){
	#loading-cover .loader{
		position: relative;
		background-color:  rgb(1, 111, 0);
		color: #fff;
		padding: 20px 10px;
		width: 30%;
		border-radius: 5px;
		display: inline-block;
		margin-top: 20%;
		box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.49);
	}
}

@media(max-width:767px){
	.header-fixed{
		background-color: #045804;
	}
	#loading-cover .loader{
		position: absolute;
		background-color:  rgb(1, 111, 0);
		color: #fff;
		padding: 20px 10px;
		width: 100%;
		bottom: 0;
		box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.49);
	}
}
@media (max-width: 410px){
	.content {
	    padding-bottom: 200px;
	}
}