@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
body.active{
	overflow: hidden;
}
html,
body{
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.container-fluid{
	padding-left: 0;
	padding-right: 0;
}

.guru-link{
	position: absolute;
	left: 20px;
	top: 20px;
	padding: 6px 0;
	padding-left: 30px;
	transition: .3s all;
	color: #fff;
	cursor: pointer;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.guru-link.active{
	display: none;
}
.guru-link::after{
	content: ' Guru';
	opacity: 0;
	transition: .2s all;
}
.guru-link:hover{
	padding-left: 0;
	padding: 6px 12px;
	color: #fff;
	background: #276BB0;
}
.guru-link:hover::after{
	opacity: 1;
}

.profile-photo{
	position: absolute;
	left: 20px; top: 20px;
	width: 50px; height: 50px;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid #fff;
	padding: 0;
	z-index: 2;
	display: none;
}
.profile-photo.active{
	display: block;
}
.profile-photo img{
	width: 60px;
	position: absolute;
	display: block;
	margin: 0 auto;
}

.account-menu{
	position: absolute;
	left: 20px;
	/* top: 85px; */
	top: 70px;
	width: 300px; height: 150px;
	background: #fff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: .3s all;
}
.account-menu::after{
	content: " ";
	position: absolute;
	bottom: 100%;
	left: 6%;
	border-width: 8px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
}
.account-menu.active{
	visibility: visible;
	opacity: 1;
}

.account-menu-left{
	width: 29.99999%;
	height: 100%;
	float: left;
	position: relative;
}
.account-menu-left .profile-photo{
	width: 80px;
	height: 80px;
	top: 20px;
	border: none;
	position: relative;
	display: block;
	margin: 0 auto;
	left: 0;
}
.account-menu-right{
	width: 69.99999%;
	height: 100%;
	float: left;
	position: relative;
	padding: 20px 10px;
}
.account-menu-right .profile-photo{
	width: 70px;
	height: 70px;
	border: none;
}
.account-menu-right p{
	padding: 0;
	margin: 0;
}
.account-menu-right p:nth-child(1){
	font-size: 17px;
}
.account-menu-right p:nth-child(2){
	font-size: 14px;
}

.account-signout,
.account-dashboard{
	width: 49.99999%;
	position: absolute;
	bottom: 0;
	background: #02A8DB;
	border: none;
	padding: 6px 12px;
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	font-weight: 700;
	z-index: 1;
	transition: .3s all;
	text-align: center;
}
.account-signout{
	right: 0;
}
.account-dashboard{
	left: 0;
}
.account-signout:hover,
.account-dashboard:hover{
	background: #07B4E9;
	color: #EDEDED;
}
.account-signout:active,
.account-dashboard:active{
	background: #18A2CC;
}

/*======================DayBackground==============*/
#body{
	position: absolute;
	min-width: 100%; min-height: 100%;
	top: 0; left: 0;
	z-index: -1;
}
#body.pagi{
	background: 
		url("../images/bg/Komponen_Pagi/pagi.png"),
		linear-gradient(#0085CD, #fff);
}

#body.siang{
	background: 
		url("../images/bg/Komponen_Siang/siang.png"),
		linear-gradient(#60D4EE, #fff);
}
.pesawat-1{
	display: none;
}
#body-img.siang [class*=pesawat-]{
	display: block;
	position: absolute;
	width: 100px;
	/*animation: plane 5s infinite linear;*/
}
#body-img.siang .pesawat-1{
	top: 65%;
	right: -100px;
	transform: rotateZ(-7deg);
	animation: pesawat1 50s infinite linear;
}
@keyframes pesawat1 {
	from{
		transform: translateX(0px) rotateZ(-7deg);
	}
	to{
		transform: translateX(-1500px) rotateZ(-7deg);
	}
}
.pesawat-2{
	top: 30%;
	left: -100px;
	transform: rotateZ(7deg);
	animation: pesawat2 25s infinite linear;
	animation-delay: 30s;
}
@keyframes pesawat2 {
	from{
		transform: translateX(0px) rotateZ(7deg);
	}
	to{
		transform: translateX(1500px) rotateZ(7deg);
	}
}

#body.sore{
	background:
		url("../images/bg/Komponen_Sore/sore.png"),
		linear-gradient(#F49D54, #fff);
}

#body.malam{
	background: 
		url("../images/bg/Komponen_Malam/malam.png"),
		linear-gradient(#000000, #2196F3);
}
#body-part.malam [class^=planet]{
	opacity: 1;
}
/*======================Background-Elements======================*/
#body{
	overflow: hidden;
}
#body-part{
	visibility: visible;
}
#body-part .komponen-awan{
	position: fixed;
	width: 200px;
	left: -300px;
	animation: clouds infinite linear;
}
@keyframes clouds {
	0%{
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
	50%{
		-webkit-transform: translateX(2000px);
		-moz-transform: translateX(2000px);
		-o-transform: translateX(2000px);
		transform: translateX(2000px);
	}
	100%{
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}
#body-part .komponen-awan:nth-child(1){
	top: 300px;
	width: 160px;
	animation-duration: 70s;
	animation-delay: 9s;
}
#body-part .komponen-awan:nth-child(2){
	top: 90px;
	width: 180px;
	animation-duration: 50s;
	animation-delay: 5s;
}
#body-part .komponen-awan:nth-child(3){
	top: 100px;
	width: 50px;
	animation-duration: 90s;
	animation-delay: 1s;
}
#body-part .komponen-awan:nth-child(4){
	top: 140px;
	animation-duration: 100s;
	animation-delay: 20s;
}
#body-part .komponen-awan:nth-child(5){
	top: 220px;
	width: 100px;
	animation-duration: 120s;
	animation-delay: 15s;
}

[class^=planet]{
	position: absolute;
	top: 50px;
	z-index: -1;
	transition: .3s all;
	opacity: 0;
}
.planet1{
	width: 30px;
	right: 300px;
}
.planet2{
	width: 70px;
	left: 50%;
	top: 55%;
}
.planet3{
	width: 50px;
	left: 200px;
	top: 100px;
}
.el-malam{
	opacity: 1;
}

/*======================Fonts======================*/
@font-face{
	font-family: 'lora-regular';
	src: url(Lora-Regular.ttf) format('truetype');
}
@font-face{
	font-family: 'lora-bold';
	src: url(Lora-Bold.ttf) format('truetype');
}
@import url('https://fonts.googleapis.com/css?family=Lora:400,700');

.container-fluid{
	transition: transform .3s;
	-webkit-transition: transform .3s;
	-moz-transition: transform .3s;
}
.img-logo{
	position: relative;
	width: 100%;
	text-align: center;
}
.img-logo a{
	display: inline-block;
	margin: 0 auto;
	position: relative;
}
.img-logo img{
	width: 120px;
}
.container-fluid.active{
	-webkit-transform: translateY(60px);
	-webkit-transition: transform .3s;
	overflow: hidden;
}

/*======================Top Wrapper======================*/
.top-wrapper{
	background: #888;
	width: 100%;
	height: 60px;
	position: fixed;
	z-index: 300;
	transform: translateY(-57px);
	-webkit-transform: translateY(-57px);
	-moz-transform: translateY(-57px);
	-o-transform: translateY(-57px);

	transition: transform .3s;
	-webkit-transition: transform .3s;
	-moz-transition: transform .3s;
	-o-transition: transform .3s;
}
.top-wrapper.active{
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);

	transition: transform .3s;
	-webkit-transition: transform .3s;
	-moz-transition: transform .3s;
	-o-transition: transform .3s;
}
.top-title{
	width: 100px;
	height: 100%;
	background: #F8C224;
	color: #47443F;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	padding-top: 15px;
}
.title{vertical-align: middle;}
.top-item ul{
	list-style: none;
	padding: 0;
	text-align: center;
}
.top-item ul li a{
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
}
.top-item ul li a{
	color: #fff;
}
.top-item ul li a:hover{
	background: #bbb;
}

.main-area{
	position: relative;
	width: 100%;
	top: 50%; left: 0;
	display: block;
}
.search-shadow{
	margin-top: 80px;
}
.btn, .a-btn-group a{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

.a-search-wrapper{
	width: 625px;
}
.form-control.search-field{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	z-index: 5;
}

.input-group-btn.btn-res .btn{
	display: none;
}
.a-search-wrapper .input-group{
	display: inline-block;
	width: 100%;
}
.input-group-btn.btn-res .btn{
	background-color: #be90d4;
	color: #fff;
	border: none;
	height: 46px;
	z-index: 20;
}
.search-field, .btn-res{
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
}
.form-control.search-field:focus{
	z-index: 1;
	box-shadow: 0 0px 4px 0 rgba(117, 54, 47, 0.2), 0 4px 18px 0 rgba(117, 54, 47, 0.19);
}

.a-btn-group{
	padding-top: 20px;
}

.a-btn{
	color: #fff;
	background: #02A8DB;
	cursor: pointer;
	box-shadow: inset 0 -2px #008DB8;
	border-bottom: 2px solid #008DB8;
	position: relative;
	vertical-align: top;
}
.a-btn:hover,
.a-btn:focus{
	color: #fff;
}
.a-btn:active{
	color: #fff;
	top: 1px;
	outline: none;
	box-shadow: none;
}
.a-btn{
	width: 160px;
	overflow: hidden;
}
.a-btn i{
	position: absolute;
	right: 0px;
	top: 0;
	font-size: 5em;
	color: rgba(255, 255, 255, .3);
}

.a-logo{
	margin-top: 80px;
	padding: 30px 5px 0 5px;
}
.a-logo .logo{
	width: auto;
	height: 230px;
	position: relative;
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
}
.img-logo{
	width: auto;
	height: 120px;
	display: block;
	position: relative;
	margin: 0 auto;
}

.menu{
	position: relative;
	padding: 20px;
	float: left;
	width: 100%;
	z-index: 1000;
}
.menu .split-group{
	display: inline-block;
	float: left;
}
.btn-split{
	position: relative;
	margin: 0;
	float: left;
	line-height: 1.5;
	outline: none;
	background: #02a8db;
	/*border: 1px solid #008db8;*/
	/* box-shadow: 1px 1px 2px #E0E0E0; */
	padding: 6px 12px;
	font-size: 12px;
	height: 30px;
	color: #fff;
	margin: 0 5px;
	font-weight: bold;
	box-shadow: inset 0 -2px #008DB8;
}
.btn-split:hover{
	color: #fff;
}
.btn-split.img{
	padding: 0;
	overflow: hidden;
	border-right: none;
	width: 30px; height: 30px;
}
.btn-split.img img{
	height: 30px;
}
.split-group .btn-split{
	margin: 0;
}

@media screen and (max-width: 650px){
	.a-search-wrapper{
		width: 100%;	
	}
}
@media screen and (max-width: 575px){
	.a-logo .logo{
		height: auto;
	}
}
@media screen and (max-width: 414px){
	.a-logo .logo{
		width: 300px;
	}
	#body-part{
		visibility: hidden;
	}
	#body.siang{
		background-size: cover;
		background-position: center center;
	}
	.a-btn-group{
		visibility: hidden;
		display: none;
	}
	.a-search-wrapper .input-group{
		display: table;
	}
	.input-group-btn.btn-res .btn{
		display: inline-block;
	}
	.menu{
		padding: 5px;
	}
}
@media screen and (max-height: 414px) and (orientation: landscape){
	.a-logo .logo{
		width: 300px;
		height: auto;
	}
	.a-logo{
		margin-top: 0px;
		padding: 0px 5px 0 5px;
	}
	.search-shadow{
		margin-top: 36px;
	}
	#body-part{
		visibility: hidden;
	}
	.a-search-wrapper .input-group{
		display: table;
	}
	.input-group-btn.btn-res .btn{
		display: inline-block;
	}
	.a-btn-group{
		visibility: hidden;
		display: none;
	}
	.menu{
		padding: 5px;
	}
}

/*======================Page Mask======================*/
.page-mask{
	position: fixed;
	z-index: 200;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 0;
	height: 0;
	background: #000;
	opacity: 0;
	filter: alpha(opacity=0); /*For IE8 and earlier*/
	-webkit-transition: opacity .3s, width 0s .3s, height 0s .3s;
	-moz-transition: opacity .3s, width 0s .3s, height 0s .3s;
	-o-transition: opacity .3s, width 0s .3s, height 0s .3s;
	transition: opacity .3s, width 0s .3s, height 0s .3s;
}
.page-mask.active{
	width: 100%;
	height: 100%;
	opacity: .7;
	filter: alpha(opacity=70); /*For IE8 and earlier*/
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	transition: opacity .3s;
}

/*======================Category Settings======================*/
.a-btn-group{
	display: block;
}
.a-btn-group input{
	border: none;
	display: inline-block;
	font-size: 15px;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	margin-right: 5px;
	padding: 5px 10px;
	transition: 0s all;
}
/*Color category*/
.ipa{color: #fff;border: 1px solid #fff;}.ipa:hover{background: #E71A4B;color: #fff; border: 1px solid #E71A4B;}
.ips{color: #fff;border: 1px solid #fff;}.ips:hover{background: #BE90D4;color: #fff; border: 1px solid #BE90D4;}
.bahasa{color: #fff;border: 1px solid #fff;}.bahasa:hover{background: #5F4F84;color: #fff; border: 1px solid #5F4F84;}
.agama{color: #fff;border: 1px solid #fff;}.agama:hover{background: #89C4F4;color: #fff; border: 1px solid #89C4F4;}
.olahraga{color: #fff;border: 1px solid #fff;}.olahraga:hover{background: #87D37C;color: #fff; border: 1px solid #87D37C;}
.kesenian{color: #fff;border: 1px solid #fff;}.kesenian:hover{background: #FCC600;color: #fff; border: 1px solid #FCC600;}
.mulok{color: #fff;border: 1px solid #fff;}.mulok:hover{background: #EB974E;color: #fff; border: 1px solid #EB974E;}

/*======================Category Pop-Up======================*/
.pop-category{
	width: 100%;
	height: 100%;
	background: rgba(33, 33, 33, 1);
	position: fixed;
	top: 0;
	z-index: 100000;
	transition: .2s;
	overflow-x: hidden;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
}
.pop-category-item{
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}
.pop-category.active{
	transition: .3s;
	background: rgba(33, 33, 33, .7);
	opacity: 1;
	visibility: visible;
}
.pop-category-item.active{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-animation: bounce 1s 0s;
	-moz-animation: bounce 1s 0s;
	-o-animation: bounce 1s 0s;
	animation: bounce 1s 0s;
}
.pop-category-close{
	width: 62px;
	font-size: 2em;
	color: #fff;
	text-align: center;
	cursor: pointer;
	z-index: 1;
	transition: .5s all;
	display: inline-block;
	margin-top: 5%;
}
.pop-category-close::before{
	content: '';
	border-radius: 50%;
	background: transparent;
	border: 2px solid #fff;
	width: 62px;
	height: 62px;
	position: absolute;
	left: 0; right: 0;
	margin: 0 auto;
	z-index: -1;
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
	-webkit-animation: close-anim 2s linear infinite;
	-moz-animation: close-anim 2s linear infinite;
	-o-animation: close-anim 2s linear infinite;
	animation: close-anim 2s linear infinite;
}
@keyframes close-anim{
	0%{
		-webkit-transform: scale(.9);
		-moz-transform: scale(.9);
		-o-transform: scale(.9);
		transform: scale(.9);
	}
	50%{
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	100%{
		-webkit-transform: scale(.9);
		-moz-transform: scale(.9);
		-o-transform: scale(.9);
		transform: scale(.9);
	}
}
.pop-category-close:hover{
	color: #000;
}
.pop-category-close:hover::before{
	background: #fff;
}
@keyframes bounce{
	0% {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
		opacity: 1;
		filter: alpha(opacity=100); /*For IE8 and earlier*/
	}
	50% {
		-webkit-transform: scale(1.6);
		-moz-transform: scale(1.6);
		-o-transform: scale(1.6);
		transform: scale(1.6);
		opacity: .7;
		filter: alpha(opacity=70); /*For IE8 and earlier*/
	}
	60% {
		-webkit-transform: scale(0.6);
		-moz-transform: scale(0.6);
		-o-transform: scale(0.6);
		transform: scale(0.6);
		opacity: 1;
		filter: alpha(opacity=100);
	}
	80% {
		-webkit-transform: scale(0.95);
		-moz-transform: scale(0.95);
		-o-transform: scale(0.95);
		transform: scale(0.95);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.pop-category h1{
	text-align: center;
	font-family: sans-serif;
	color: #fff;
	font-size: 1em;
}
.responsive{
	padding: 0 20px;
	float: left;
	width: 33.33333%;
	z-index: -3;
}
.item{
	cursor: pointer;
	padding: 70px 24px;
	background: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	margin: 20px 0;
}
.watermark{
	position: absolute;
	font-size: 8em;
	color: #FAFAFA;
	left: 0; top: 0;
	overflow: visible;
	transition: .3s;
}
.item i,
.item a{
	display: block;
	color: #fff;
	position: absolute;
	left: 50%;
	z-index: 1;
}
.item i{
	font-size: 2em;
	top: 15%;
}
.item a{
	font-size: .8em;
	padding: 6px 12px;
	border: 1px solid #fff;
	border-radius: 6px;
	width: auto;
	bottom: 15%;
}
.item a:hover{
	background: rgba(255,255,255,.2);
	color: #fff;
}
.responsive:hover{
	background: rgba(0,0,0,.1);
}
.item .watermark i{
	color: rgba(255, 255, 255, .1);
}
.responsive:nth-child(2) .item{
	background: #C25975;
}
.responsive:nth-child(3) .item{
	background: #53BBB4;
}
.responsive:nth-child(4) .item{
	background: #F9845B;
}
.responsive:nth-child(5) .item{
	background: #2C9676;
}
.responsive:nth-child(6) .item{
	background: #3079AB;
}
.responsive:nth-child(7) .item{
	background: #E59A13;
}
.item:nth-child(1) .watermark{

}