@charset "utf-8";
/* CSS Document */

/* Awal mega menu*/
.panel{
				position:relative;
				top:0;
				width:auto;
				margin:40px 0;
			}
			.panel a{
				display: inline-block; 
				width:20px; 
				margin: 0;
				height:20px; 
				outline:none; 
				border-radius:2px;
			}
			.panel a:nth-child(1){ background: #000;}
			.panel a:nth-child(2){ background: #dedede;}
			.panel a:nth-child(3){ background: #ff670f;}
			.panel a:nth-child(4){ background: #C21A01;}
			.panel a:nth-child(5){ background: #519548;}
			.panel a:nth-child(6){ background: #88C425;}
			.panel a:nth-child(7){ background: #02B8FA;}
			.panel a:nth-child(8){ background: #0180a3;}
			.panel a:nth-child(9){ background: #ECBE13;}
			.panel a:nth-child(10){ background: #FE4365;}
			.panel a:nth-child(11){ background: #920bf9;}
			.megamenu{
				margin: 0 0 0 0;
			}
			.megamenu > li:nth-child(3) .megapanel .row [class*="col"]{
				background: #ccc !important;
			}
			.megamenu h4{
				margin-top: 0;
			}
			.megamenu .adress{
			
			}
			.megamenu .adress label{
				float: left;
				width: 100%;
			}
/* Akhir mega menu*/

header{
	background-color:#353535;
	color:#FFF;
	padding:10px 0px;
	width:100%;
	transition:1s;
}

.fixtop{
	z-index:100;
	top:0px;
	position:fixed;
	padding:5px 0px;
	background-color:#292929;
}

.main-menu{
	margin:0px;
	padding:0px;
	list-style-type:none;
	float:right;
}
	.main-menu li{
		float:left;
	}
	
		.main-menu li a{
			color:#fdfdfd;
			background-color:#666;
			padding:10px;
			display:block;
			margin-left:2px;
			transition:1s;
			text-transform:uppercase;
		}
		
		.main-menu li a:hover{
			color:#ffffff;
			background-color:#CCC;
		}

.slideshow{
	height:auto;
	background-color:#9F3;
	padding:0px;
}
	.wonderful{
		width:209px;
		height:118px;
		position:absolute;
		right:20px;
		bottom:20px;
	}
	
	.slide-desc{
		width:400px;

		background-color:rgba(255,255,255,.5);
		border:solid 1px rgba(255,255,255,.8);
		position:absolute;
		bottom:20px;
		right:20px;
		padding:10px;
		border-radius:5px;
	}

.img-responsive{
	max-width:100%;
}

.meta-keyword{
	text-align:center;
	padding:20px 20%;
}

	.meta-keyword h1{
		font-family:"Arial Black", Gadget, sans-serif;
		color:#06C;
	}

.row-gal{
	text-align:justify;
	margin:0px -25px 0px -25px;
}

.soldout{
	width:77px;
	height:80px;
	position:absolute;
	top:-10px;
	right:-10px;
}

	.gal-title{
		position:absolute;
		color:#FFF;
		background-color:#333;
		bottom:150px;
		padding:10px;
		left:30px;
	}

.gal{
	padding:0px 10px 0px 10px;
}

.star{
	width:100px;
	height:17px;
	background-image:url(file://///server/Sharing/Web%20Design/Kelas%20Web%20Desain%20Reguler/Kelas%20Web%20Design%20Angkatan%2045/Pertemuan%2010/Instruktur/Web%20Responsive%20Lat/images/5-star_rating.png);
	float:left;
}

.five{
	background-position:0px 0px;
}

.four{
	background-position:0px -24px;
}

.three{
	background-position:0px -48px;
}

.two{
	background-position:0px -70px;
}


.one{
	background-position:0px -93px;
}


.popular-item{
	border:solid 1px #cecece;
	padding:10px;
	margin-bottom:15px;
	
}
	.popular-item img{
		width:250px;
		height:150px;
		float:left;
		margin-right:10px;
	}

.include{
	width:200px;
	height:17px
	background-color:#9F3;
	float:right;
	text-align:right;
}

.title-info{
	border-bottom:solid 1px #CCC;
	padding-bottom:10px;
	margin-bottom:15px;
}

.mb-30{
	margin-bottom:30px;
}

footer{
	background-color:#292929;
}

.to-top{
	width:60px;
	height:60px;
	position:fixed;
	bottom:10px;
	right:10px;
	cursor:pointer;
	display:none;
}