/* ====GLOBAL STYLE==== */

/*==============================
======== BODY AND CONTAINER=====
===============================*/

@media only screen and (max-width: 480px) {
	body{
		width: 100%;
	}
	#container {
		width: 100%;
	}
}

/*==============================
======== BOX LOGIN =============
===============================*/

@media only screen and (max-width: 480px) {
	.box-nav-login {
		width: 100%;
		padding: 0;
	}
	.nav-login {
		width: 100%;
		padding: 0;
	}
	.box-login {
		padding: 0;
		margin: 0;
	}
	#icon-web {
		width: 15%;
	}
	#icon-web img {
		margin-left: -7px;
		width: 80%;
		margin-top: 3px;
	}
	.login {

	}
	.masuk, .daftar {
		margin-top: 15px;
		padding:  7px 5px;
	}
	.daftar {		
		background-color: #0A0962;
	}
	.nama-user {
		padding: 0;
		margin: 0;
		width: 100px;
		height: 18px;
		overflow: hidden;		
	}
	.home-user {
		margin-top: 3px;
		width: 50px;
		padding: 2px 0;
	}
	.nav-user {
		top: 7px;
		left: 7px;
		display: block;
	}
	.logout {
		margin: 0;
		margin-left: 35px;
		margin-top: -3px;
		padding: 0;
	}
	.img-profile{
		display: block;
		float: left;
		margin-top: 0;
	}
	#box-nav-post {
		position: absolute;
		display: none;
		top: 30px;
		width: 45%;
		z-index: 2;
		left: 15px;
		border-radius: 25px;
		border-top: 15px solid transparent;
		border-left: 15px solid black;
		border-bottom: 10px solid black;
		border-right: 10px solid black;
		transition: block 5s ease-in 100ms;
		-webkit-transition: block 5s ease-in 100ms;
		-o-transition: block 5s ease-in 100ms;
		-moz-transition: block 5s ease-in 100ms;
	}
	.tambah-artikel, .nav-user-close {
		width: 90%;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background-color: black;
		border: 1px solid black;
		color: white;
		text-align: left;
		padding-left: 20px;
	}
	.nav-user-close {
		display: block;
		background-color: transparent;
	}
	#box-tombol-close {
		display: block;
		position: absolute;
		left: 78%;
		top: -7px;
		border: none;
		background-color: transparent;
	}
	#tombol-close-nav-user{
		display: block;
	}
	.cari-artikel {
		padding: 1px 1px 0 2px;
		margin-top: 3px;
		position: absolute;
		left: 45px;
		z-index: 1;
	}
	#cari-artikel {
		width: 70px;
		margin-right: 0;
	}
	#search {
		width: 20px;
		height: 20px;
		color: #777EA8;
		font: 700 16px/10px arial, calibri, san-serif;
		padding: 0 2px;
		border: solid 1px none;
		border-radius: 15px 15px;
		margin-left: 0;
		background-color: none;
	}
	.nav-menu {
        top: 40px;
        max-height: 0;
        overflow: hidden;
    }
    .navigasi > .nav-menu {
    background: #121211;
	}
    .nav-menu > li {
        display: block;
    }
    .btn-responsive {
        display: block;
    }
    #btn-responsive:checked ~ .nav-menu {
        max-height: 600px;
        overflow: visible;
		z-index: 10;
		width: 100%;
    }

}

/*==============================
========== HEADER ==============
===============================*/
@media only screen and (max-width: 480px) {
	#box-header {
		width: 100%;
		left: 0;
	}
	#header-logo {
		display: none;
	}
	#logo {
		display: none;
	}
	#prefix-header {
		width: 100%;
		height: 250px;
		left: 0;
		overflow: hidden;
		overflow-x: scroll;
	}
	#box-story {
		width: 100%;
		height: 240px;
		width: 820px;
		overflow-x: scroll;
	}
	.story-header {
		margin-left: 1%;
		height: 100%;
		width: 150px;
		margin-bottom: 10px;
	}
	#prefix-story {
		width: 100%;
	}
}
/*==============================
======== MAIN CONTENT ==========
===============================*/

/*===== CONTENT HIGHLIGHT =====*/
@media only screen and (max-width: 480px) {
	#highlight {
		padding: 0;
		width: 100%;
		overflow-x: scroll;
	}
	#highlight-slider {
		width: 1040px;
	}
}