@media screen and (max-width : 780px){
	.navbar{
		width : 100%;
		height : 50px;
		background-color : white;
		color : black;
		padding-top : 10px;
		padding-right : 10px;
	}
	
	.navbar label{
		cursor : pointer;
		float : right;
	}
	
	.navbar label :hover{
		box-shadow : 1px 1px 1px 1PX GRAY;
		border-radius : 100%;
	}
	
	.container-fluid > .navbar-header {
		margin : 0 auto;
		border-radius:0;
		height : auto;
	}
	
	.navbar-brand{
		float: none;
		height: auto;
		padding: none;
		font-size: 18px;
		line-height: none;
		margin : 0 auto;
	}
	
	.navbar-brand h1 {
		float: none;
		line-height:none;
		padding: none;
		font-size: 30px;
		margin-top:none;
		color : white;	
		text-align : center;
	}
	
	#box-bar{
		width : 100%;
		padding : 10px;
	}
	
	#box-bar label{
		cursor : pointer;
	}
	
	header{
		z-index : 1000;
	}
		
	#tag-menu{
		display : none;
	}
	
	#tag-menu:checked ~ div.container-fluid{
		animation : slide-in 0.5s ease;
		animation-fill-mode : forwards;
	}
	
	label[for = tag-menu]{
		display : block;
	}
	
	.container-fluid{
		position : fixed;
		top : -200%;
		left : 0px;
		background-color : rgb(40,50,50);
		height : 100%;
		z-index : 100;
		width : 100%;
		padding : 0px;
		animation : slide-out 0.5s ease;
		animation-fill-mode : forwards;
	}
	
	.container-fluid .menu ul{
		display : inline;
	}
	
	.container-fluid .menu ul li{
		list-style : none;
		width : 100%;
		border-top : 1px solid white;
	}
	
	.active{
		display : none;
	}
	
	.container-fluid .menu ul li a{
		padding-top : 10px;
		padding-bottom : 10px;
		border-radius : 0px;
		text-decoration : none;
		display : block;
		color : #FFF;
	}
	
	.container-fluid .menu ul li a:hover{
		background : white;
		color : black;
	}
	
	.menu{
		width : 100%;
		margin : 0;
	}
	
	.menu ul.nav-tabs li a {
		float:none; 
		width: 100%;
	}
	
	.menu ul.nav-tabs li:hover ul {
		display:block;
	}
	 
	.menu ul.nav-tabs ul {
		position : relative;
		width : 100%; 
		top : 0px;
	}
	
	.menu ul.nav-tabs ul li {
		padding : 0px;
		background : white;
	}
	
	.menu ul.nav-tabs ul li a{
		color : black;
	}
	
	.menu ul.nav-tabs ul li a:hover{
		background : rgba(40,50,50,0.8);
		color : white;
	}
	
	#nav-index{
		padding : none;
		width : 100%;
		margin : none;
	}
	
	#my-caption{
		padding : none;
		margin : 0 auto;
		margin-top : 0;
	}
	
	#my_btn{
		padding : 0px;
		float : none;
		text-align : center;
		background-color : transparent;
		color : #FFF;
		height : 30px;
	}
	
	#my_btn h2{
		font-size : 0.5em;
	}
	
	#my_btn h3,h4{
		font-size : 0.4em;
	}
	
	.col-lg-12,.contents{
		width : 100%;
		padding : 0px;
	}
	
	.contents h2{
		font-size : 1.4em; 
	}
	
	.contents p{
		font-size : 0.8em;
	}
	
	.fadeInUp #on-box, .fadeInUp #in-box{
		height : auto;
		float : left;
		padding : 5px;
		width : 100%;
	}
	
	.flipInY #in-box{
		height : auto;
		padding : 5px;
		width : 100%;
	}
	
	#in-box .table{
		width : 100%;
	}
	
	#in-box h4,#on-box h4{
		font-size : 1.4em;
	}
	
	.recent #my_btn_primer h3{
		font-size : 1.4em;
	}
	
	.recent{
		text-align : center;
	}
	
	.bounceIn #wkt-box{
		height : auto;
		padding : 5px;
		width : 100%;
	}
	
	#wkt-box{
		padding : 5px;
	}
	
	#wkt-box .icon{
		width : 100%;
		padding : 5px;
		margin : 0 auto;
		font-size : 0.5em;
	}
	
	.pendaftaran-header{
		width : auto;
	}

	.pendaftaran{
		width : auto;
	}
	
	#maps{
		width : auto;
	}
	
	#in-box-utama{
	    width : 100%;
	}
	
	.keynote_utama{
	    width : 100%;
	}
	
	.sub_tema{
	    height : auto;
	}
	
	#in-box{
	    height : auto;
	}
	
	.wow{
	    height : auto;
	}
	
	#n-box{
	    height : auto;
	}
}

@keyframes slide-in{
	from{top : -200%}
	to{top : 0px}
}

@keyframes slide-out{
	from{top : 0px}
	to{top : -200%;}
}