@charset "utf-8";
/* CSS Document */

body{
	background-color:#FAFAFA;
}

.content{
	position:relative;
	margin-top:20px;
	z-index:20;
}

.responsive-video{
	position:relative;
	z-index:1;
}

.logo{
	width:202px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:30px;
}

.decoration-line{
	background-image:url(../images/decoration-black.png);
	background-size:280px 1px;
	background-repeat:no-repeat;
	height:1px;
	width:280px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
}

.decoration-line2{
	background-image:url(../images/decoration-white.png);
	background-size:280px 1px;
	background-repeat:no-repeat;
	height:1px;
	width:280px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
}

.navigation{
	opacity:0.7;
	width:280px;
	margin-left:auto;
	margin-right:auto;
}

.nav-icon{
	float:left;
	background-position:15px 5px;
	background-size:30px 30px;
	background-repeat:no-repeat;
	height:60px;
	width:60px;
	text-align:center;
	padding-top:40px;
	color:#FFFFFF;
	font-size:12px;
	margin-right:5px;
	margin-left:5px;
	margin-bottom:20px;
}

.home-icon{background-image:url(../images/icon/misc/home.png);}
.type-icon{background-image:url(../images/icon/misc/textstyle3.png);}
.about-icon{background-image:url(../images/icon/settings/cog5.png);}
.other-icon{background-image:url(../images/icon/misc/bullseye.png);}

.gallery-icon{background-image:url(../images/icon/media/image2.png);}
.portfolio-icon{background-image:url(../images/icon/media/image3.png);}
.videos-icon{background-image:url(../images/icon/media/film.png);}
.contact-icon{background-image:url(../images/icon/misc/mail.png);}

.call-icon{background-image:url(../images/icon/communication/phonehook.png);}
.text-icon{background-image:url(../images/icon/communication/speechbubble4.png);}
.facebook-icon{background-image:url(../images/icon/social/facebook.png);}
.twitter-icon{background-image:url(../images/icon/social/twitter.png);}


.top-navigation{
	z-index:25;
	position:fixed;
	width:100%;
	top:-310px;
}

.top-navigation-wrapper{
	height:330px;
	background-color:rgba(0,0,0,0.95);
}

.deploy-top-navigation{
	background-image:url(../images/misc/open_up.png);
	background-repeat:no-repeat;
	width:40px;
	height:20px;
	background-size:40px 20px;
	margin-left:auto;
	margin-right:auto;
	margin-top:-1px;
	position:relative;
	z-index:9999;
}


.close-top-navigation{
	display:none;
	background-image:url(../images/misc/close_down.png);
	background-repeat:no-repeat;
	width:40px;
	height:20px;
	background-size:40px 20px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:9999;
	margin-top:-20px;
}


.bottom-navigation{
	position:fixed;
	width:100%;
	bottom:-180px;
	z-index:9999
}

.bottom-navigation-wrapper{
	padding-top:20px;
	height:200px;
	background-color:rgba(0,0,0,0.95);
}

.deploy-bottom-navigation{
	background-image:url(../images/misc/open_down.png);
	background-repeat:no-repeat;
	width:40px;
	height:20px;
	background-size:40px 20px;
	margin-left:auto;
	margin-right:auto;
	margin-top:-1px;
	position:relative;
	z-index:99999;
}

.close-bottom-navigation{
	margin-bottom:-20px;
	display:none;
	background-image:url(../images/misc/close_up.png);
	background-repeat:no-repeat;
	width:40px;
	height:20px;
	background-size:40px 20px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:99999;
	margin-top:-20px;
	margin-bottom:20px;
}

.footer{
	margin-bottom:30px;
}

.footer p{
	text-transform:uppercase;
}

.copyright{
	color:#FFFFFF;
	text-transform:uppercase;
	text-align:center;
	font-size:12px;	
}
h4.heading-icon{font-weight:bold;background-color: rgba(255, 210, 1, 0.5);border-radius:5px;	margin-bottom:5px; padding:5px;	padding-left:10px;	float:none;}

div.pagination {
	padding: 3px;
	margin: 3px;

}

@media screen and (max-width: 767px) {

.daftar-produk  div.side1{width:35%;}
.daftar-produk  div.side2{width:50%;}
.responsive-image{ max-width:70%;}
.responsive-video{ max-width:50%;}
}
@media screen and (max-width: 480px) {

	.daftar-produk  div.side1{width:100%;}
	.daftar-produk  div.side2{width:100%;}
	.responsive-image{ max-width:100%;}
	.responsive-video{ max-width:100%;}
}