html,body {
	margin:0;
	padding:0;
}

body{
	background:#FFFFFF;  /* backgroud color, #FFA500=yellow*/
	font-family: 'Arial', PT Sans Narrow, sans-serif;  /*font style*/
}

a{
	text-decoration:none;  /* font underline set to none*/
}

.clr{
	clear:both; /* bar*/
}

.header{
	font-size:16px;  /*font size*/
	background:#000; /*bar color*/
	opacity:1;  /*bar fade*/
	text-transform:none;  /*font uppercase*/
}
.header a{
	line-height:22px; /*bar height*/
	padding:0 8px;  /*font distance*/
	letter-spacing:1px; /*font spacing*/
	text-shadow:1px 1px 1px #000;  /*font shadow black*/
	color:#FFFFFF; /*font color white*/
}
.header a:hover{
	color: #FF1A1A; /* font hover set to red */
}
.header a hightlight{  /* set studio convocation */
	font-size: 18px;
	font-weight:bold;  
	color: #FFE711;
}
.header hightlight:hover{	/* studio convocation hover to red */
		color: #FF1A1A;
}

.header span.right_ab{
	float:right;  /* menu set to right side */
}

.content{ /*gap btw menu and title*/
	margin:-10px 25px 10px 25px;
}

h1{ /*set title topic*/
	margin:5px;
	font-size:28px;
	text-align:center;
	color:#FF1010;
	font-family:"Arial", Georgia, "Times New Roman", serif;
	text-shadow:1px 1px 1px #FFFFFF;
	padding-bottom:10px;
	line-height:40px;
}
h1 span{ /*set title topic*/
	font-size:10px;
	display:block;
	letter-spacing:2px;
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
	color:#000000;
	line-height:13px;
	padding-top:9px;
	text-shadow:none;
	text-transform:uppercase;
}

/*set contact icons */
h5{
	text-align: center;
	letter-spacing: 8px;
}

.i:hover {
    opacity: 0.6;
}

.icons {
  background: transparent;
  color: white;
}


/*set handphone*/
@media screen and (max-width: 640px) {
	.header a{
		display:block;
		text-align:center;
		font-size:15px;
		text-shadow:none;
	}
	.header span.right_ab{
		float:none;
	}

.header a{
	line-height:19px; /*bar height*/
	letter-spacing:1px; /*font spacing*/
	
	}
}