/* -- Flexible Grid / Layout -- */
*{
	margin: 0;
	padding: 0;
	background-repeat: repeat-y;
}

body {
	background: #;
	background-size: 100%;
	color: #000;
	background: #0a1859 url('../images/cinta.gif');
}

p {
	line-height:1.4em;
	padding:10px 101px 30px
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
	background-repeat: repeat-y;
}

a {
  background: transparent;
  outline:none;
  text-decoration:none;
  color:#000e77;
}

a:hover { 
  text-decoration:underline;
  color:#ff0000;
  font-weight:normal;
}

.videoyoutube{
    text-align: center;
    background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
    border:1px solid #A8A8A8;
    border-radius:5px;
    margin:20px auto 35px auto;
    width:80%;
    box-shadow: 1px 30px 30px -26px #818181;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

/* -- Menu Navigation -- */
.menu {
width:100%;
height:auto;
}

#nav {
font-family:Tw Cen Mt,Open Sans,Arial,Sans-Serif;
font-size:110%;
font-weight:normal;
text-align: left;
background:#000 url('../images/mustika_cinta_01.jpg');
text-transform:uppercase;
}

#nav ul {
height:auto;
padding-top:0px;
padding-left: 25px;
margin:0 0px 0 0;
padding:0
text-align: left;
}

#nav ul li {
list-style:none;
display:inline-block;
margin:0;
padding:0;
}

#nav ul li a {
display:block;
line-height:39px;
text-decoration:none;
color:#fff;
padding:0 15px;
}

#nav ul li a:hover{
color:#fff;
background:#22529a;
line-height:auto;
font-weight:normal;
margin:0px 0 -10px;
height:70%;
}

#wrap{
width:900px;
background:#fff;
margin:0px auto 0px auto;
}

.header{
width:100%;
max-width:auto;
text-align:center;
float:none;
background:#fff;
margin-bottom:-5px;
}    

.content h1 {
	font-family:Open Sans,Arial,Sans-Serif;
	font-size:170%;
	color:#000e77;
	font-weight:bold;
	text-align:left;
	width:auto;
	height:auto;
	padding:0px 0 20px 0;	
	margin:0 0 20px 0;	
	border-bottom:2px solid #301500;	
}

.content h2 {
	font-family:Open Sans,Arial,Sans-Serif;
	font-size:130%;
	color:#000e77;
	font-weight:bold;
	text-align:justify;
	line-height:1.7em;
	width:auto;
	height:auto;
	padding: 0px 0px 0x 0px;
	margin: 0px 0px 10px 0px;		
}

.content h3 {
	font-family:Open Sans,Arial,Sans-Serif;
	font-size:110%;
	color:#000e77;
	font-weight:bold;
	text-align:justify;
	line-height:1.7em;
	width:auto;
	height:auto;
	padding: 0px 0px 0x 0px;
	margin: 0px 0px 10px 0px;		
}


.content ul {
	padding: 0px 0px 10px 50px;
	list-style: decimal;
}

.content ul li {
	margin-bottom:5px;
	line-height:1.7em;
	text-decoration:none;
	margin-left:10px;
	list-style:decimal;
}

.content li ul {
    list-style:none outside none;
    margin:5px;
}

.content li ul li {
	display:block;
	border-top:none;
	padding:5px;
	margin:0;
	line-height:1.7em;
	font-size:100%;
}

.content li ul li.text { 
	border-bottom:none;
}


/* -- Bawah Footer -- */
.bawahfooter{
clear:both;
background:#fff;
overflow:hidden;
width:100%;
height:auto;
}

/* -- Footer -- */
.footer{
clear:both;
overflow:hidden;
width:100%;
height:auto;
background-image:url('../images/mustikacinta_01.jpg');
}

#foot {
font-family:Tw Cen Mt, Open Sans, Arial, Sans-Serif;
font-size:100%;
text-align:right;
font-color:#fff;
font-weight:normal;
width:100%;
height:auto;
background:#5faa09 url('../images/mustikacinta_02.jpg');
}
#foot ul {
height:3em;
margin:0;
padding: 0 39px 0 0;
}
#foot li {
list-style:none;
display:inline-block;
margin:0;
padding:0
}
#foot li a {
display:block;
line-height:35px;
text-decoration:none;
color:#dfdfdf;
padding:0 10px
}
#foot li a:hover {
color:#dfdfdf;
background:#22529a;
line-height:auto;
font-weight:normal;
}

a#top{position:fixed;
display:none;
bottom:30px;
right:30px;
z-index:9;
color:rgba(255,165,0,0.8);
font-size:4em;
font-weight:300;
border:0px solid rgba(255,165,0,0.8)}

/* -- RESPONSIVE DENGAN MEDIA QUERIES -- */
@media screen and (max-width: 1024px){
/* CSS styles */
#wrap{
width:100%;
}
}

@media screen and (max-width:800px){
/* CSS styles */

.kolomsidebar{

overflow:hidden;
float:left;
width:100%;
max-width:250px;
background:#;
background-image:url('../images/produk_02.jpg');
margin:20px 20px 20px 0px;
padding:0px 0px 0px 0px;
}

.sidebar2{
background:none;
float:none;
display:block;
width:auto;
}

.sidebar{
background:none;
float:none;
display:block;
width:auto;
}

.content{
background:url('../images/bg3.png') top center repeat-x;
float:none;
display:block;
width:auto;
margin:20px 10px 20px 10px;
padding:20px 10px 20px 10px;
}

#wrap{
background:#fff
}

.menu {
width:100%;
height:auto;
}

#nav {
font-family:Tw Cen Mt,Arial,Sans-Serif;
font-size:100%;
font-weight:normal;
text-align:center;
background:#0a1859
}

.footer{
clear:both;
overflow:hidden;
width:100%;
height:auto;
}

#foot {
font-family:Tw Cen Mt,Aria,Sans-Serif;
font-size:100%;
text-align:center;
font-color: #dfdfdf;
font-weight:normal;
background: #0a1859
}

}

@media screen and (max-width:768px){
/* CSS styles */
p {
	padding:0px 0px 20px 11px;
	line-height:1.0em;
}
.kolomsidebar{
overflow:hidden;
float:left;
width:100%;
max-width:250px;
background:#;
background-image:url('../images/produk_02.jpg');
margin:20px 20px 20px 0px;
padding:0px 0px 0px 0px;
}

.sidebar2{
background:none;
float:none;
display:block;
width:auto;
}

.sidebar{
background:none;
float:none;
display:block;
width:auto;
}

.content{
background:url('../images/bg3.png') top center repeat-x;
float:none;
display:block;
width:auto;
margin:20px 10px 20px 10px;
padding:20px 10px 20px 10px;
}

#wrap{
background:#fff
}

.menu {
width:100%;
height:auto;
}

#nav {
font-family:Tw Cen Mt,Arial,Sans-Serif;
font-size:100%;
font-weight:normal;
text-align:center;
background:#0a1859
}

.footer{
clear:both;
overflow:hidden;
width:100%;
height:auto;
}

#foot {
font-family:Tw Cen Mt,Aria,Sans-Serif;
font-size:100%;
text-align:center;
font-color: #dfdfdf;
font-weight:normal;
background: #0a1859
}

}

@media screen and (max-width:640px){
/* CSS styles */
p {
	padding:0px 0px 20px 11px;
	line-height:1.0em;
}
.kolomsidebar{
overflow:hidden;
float:left;
width:100%;
max-width:250px;
background:#;
background-image:url('../images/produk_02.jpg');
margin:20px 20px 20px 0px;
padding:0px 0px 0px 0px;
}

.sidebar2{
background:none;
float:none;
display:block;
width:auto;
}

.sidebar{
background:none;
float:none;
display:block;
width:auto;
}

.content{
background:url('../images/bg3.png') top center repeat-x;
float:none;
display:block;
width:auto;
margin:20px 10px 20px 10px;
padding:20px 10px 20px 10px;
}

#wrap{
background:#fff
}

.menu {
width:100%;
height:auto;
}

#nav {
font-family:Tw Cen Mt,Arial,Sans-Serif;
font-size:100%;
font-weight:normal;
text-align:center;
background:#0a1859
}

.footer{
clear:both;
overflow:hidden;
width:100%;
height:auto;
}

#foot {
font-family:Tw Cen Mt,Aria,Sans-Serif;
font-size:100%;
text-align:center;
font-color: #dfdfdf;
font-weight:normal;
background: #0a1859
}

}

@media screen and (max-width:480px){
/* CSS styles */
p {
	padding:0px 0px 20px 11px;
	line-height:1.0em;
}
.kolomsidebar{
overflow:hidden;
float:left;
width:100%;
max-width:250px;
background:#;
background-image:url('../images/produk_02.jpg');
margin:20px 20px 20px 0px;
padding:0px 0px 0px 0px;
}

.sidebar2{
background:none;
float:none;
display:block;
width:auto;
}

.sidebar{
background:none;
float:none;
display:block;
width:auto;
}

.content{
background:url('../images/bg3.png') top center repeat-x;
float:none;
display:block;
width:auto;
margin:20px 10px 20px 10px;
padding:20px 10px 20px 10px;
}

#wrap{
background:#fff
}

.menu {
width:100%;
height:auto;
}

#nav {
font-family:Tw Cen Mt,Arial,Sans-Serif;
font-size:100%;
font-weight:normal;
text-align:center;
background:#0a1859
}

.footer{
clear:both;
overflow:hidden;
width:100%;
height:auto;
}

#foot {
font-family:Tw Cen Mt,Aria,Sans-Serif;
font-size:100%;
text-align:center;
font-color: #dfdfdf;
font-weight:normal;
background: #0a1859
}

}

@media screen and (max-width:320px){
/* CSS styles */
p {
	padding:0px 0px 20px 11px;
	line-height:1.0em;
}
.kolomsidebar{
overflow:hidden;
float:left;
width:100%;
max-width:250px;
background:#;
background-image:url('../images/produk_02.jpg');
margin:20px 20px 20px 0px;
padding:0px 0px 0px 0px;
}

.sidebar2{
background:none;
float:none;
display:block;
width:auto;
}

.sidebar{
background:none;
float:none;
display:block;
width:auto;
}

.content{
background:url('../images/bg3.png') top center repeat-x;
float:none;
display:block;
width:auto;
margin:20px 10px 20px 10px;
padding:20px 10px 20px 10px;
}

#wrap{
background:#fff
}

.menu {
width:100%;
height:auto;
}

#nav {
font-family:Tw Cen Mt,Arial,Sans-Serif;
font-size:100%;
font-weight:normal;
text-align:center;
background:#0a1859
}

.footer{
clear:both;
overflow:hidden;
width:100%;
height:auto;
float:right;
}

#foot {
font-family:Tw Cen Mt,Aria,Sans-Serif;
font-size:100%;
text-align:right;
font-color: #dfdfdf;
font-weight:normal;
background: #0a1859
}

}