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

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

body {
		background-color: #E6F4FF;
	}
#container {
    width: 1040px;
    margin: 0 auto;
    padding: 0;
    }

#container {
		position: relative;
		top: 45px;
	}
.clear {

    clear: both;

    }

main {
		padding-bottom: 20px;
	}
em {
		font-style: italic;
	}
strong {
		font-weight: bold;
	}
a {
		color: blue;
	}

/*==============================
======== BOX LOGIN =============
===============================*/
	#box-nav-login {
		margin: 0;
		width: 100%;
		position: fixed;
		height: 60px;
		background-color: white;
		z-index: 10;
		box-shadow: 3px 3px 6px -3px #D1BFB3, -3px -3px 6px -3px #D1BFB3;
	}
	.nav-login {
		width: 1040px;
		margin: 0 auto;
	}
	.box-login {
		padding: 0 15px;
		height: 50px;
		margin: 5px;
		float: right;
		border-radius: 25px;
		text-align: center;
		position: relative;
		width: 100%;
	}
	#icon-web {
		width: 5%;
		position: absolute;
	}
	#icon-web img {
		width: 90%;
	}
	.login {
		height: 30px;
		margin: 2px 0;
		padding: 2px 0;
		float: right;
		background-color: #B5ECF7;
		border-radius: 20px;
		text-align: center;
	}
	.masuk, .daftar, .email-log {
		text-decoration: none;
		background-color: #0288B8;
		color: white;
		font: bold 14px/15px arial, calibri, sans-serif;
		border-radius: 20px;
		margin: 4px 2.5px;
		padding:  7px 15px;
		float: right;
	}
	.daftar {
		background-color: #0A0962;
	}
	.email-log {
	    height: 30px;
		background-color: white;
		padding: 0;
	}
	.email-log img {
	    height: 90%;
	    border-radius: 7px;
	}
	.login a {
		font: bold 14px/30px arial, calibri, san-serif;
		color: #777EA8;
	}
	.nama-user {
		font: bold 14px/20px arial, calibri, san-serif;
		color: #777EA8;
		float: right;
		margin-right: 5px;
	}
	.logout {
		float: left;
		position: absolute;
		top: 20px;
		margin-left: 35px;
		margin-top: 1px;
	}
	.img-profile {
		width: 30px !important;
		height: 30px;
		float: left;
		margin: 0 2px 5px 0px;
		border: 1px solid white;
		border-radius: 15px;
		background-color: #ADC3D9;
	}
	.logout a {
		font: normal 12px calibri, arial, sans-serif;
		color: #A1A690;
	}
	.tambah-artikel, .home-user {
		padding: 2px 20px;
		height: 30px;
		margin: 0 5px;
		float: right;
		background-color: #B5ECF7;
		border-radius: 20px;
		text-align: center;
		font: bold 14px/30px arial, calibri, san-serif;
		color: #777EA8;
		text-decoration: none;
	}
	.nav-user, .nav-user-close {
		position: absolute;
		top: 1px;
		display: none;
		float: left;
	}
	#tombol-nav-user, #tombol-close-nav-user{
		width: 30px;
		height: 30px;
	}
	#box-tombol-close {
		display: none;
	}
	.cari-artikel {
		padding: 0 10px 0 2px;
		height: 40px;
		float: left;
		position: relative;
		left: 6%;
		top: 12%;
		background-color: #B5ECF7;
		border-radius: 20px;
		text-align: center;
		font: bold 14px/30px arial, calibri, san-serif;
		color: #777EA8;
		text-decoration: none;
	}
	#cari-artikel {
		border: solid 0px white;
		border-radius: 15px;
		width: 160px;
		height: 26px;
		padding: 0 10px;
		margin: 3px;
		float: left;
		background-color: #B5ECF7;
		font: normal 14px/30px arial, calibri, san-serif;
		color: #6B6867;
	}
	#search {
		width: 32px;
		height: 28px;
		margin: 5px 2px;
		padding: 0 5px;
		float: left;
		border: solid 0px #B5ECF7;
	}



/*==============================
============ HEADER ============
===============================*/
#box-header {
	width: 81.5%;
	height: 270px;
	padding: 0;
	border:0;
	margin-top: 10px;
	position: relative;
	top: 50px;
	left: 60px;
	margin-bottom: 10px;
}
#header-logo {
	width: 35%;
	height: 200px;
	padding: 0 5px;
	border:0;
	margin: 0;
	position: relative;
	left: 5px;
}
#logo {
	position: relative;
	width: 100%;
	float: left;
}
#logo img {
	width: 60%;
	height: 85px;
	float: left;
}
#subname-web {
	width: 90%;
	font: bold 16px arial, calibri, sans-serif;
	position: absolute;
	left: 20%;
	top: 80%;
}
#logo a {
	text-decoration: none;
	color: black;
}
#header-sosmed {
	width: 90%;
	height: 50%;
	margin-top: 1%;
	position: relative;
	float: left;
}
#header-sosmed img {
	width: 12%;
	background-color: #2ECADE;
	border-radius: 50%;
	margin-top: 1.5%;
	margin-left: 2%;
	float: left;
}
#header-sosmed p {
	font: bold 17px arial, calibri, sans-serif;
	margin-top: 5%;
	margin-left: 3%;
	color: green;
}

/*============ STORY HEADER ============*/

#prefix-header {
	width: 65%;
	position: absolute;
	left: 39%;
	top: 10px;
}
.story-header {
	width: 18%;
	height: 50%;
	float: left;
	margin: 0 0.3%;
	position: relative;
	border-radius: 20px;
	box-shadow: 3px 3px 6px -3px #D1BFB3, -3px -3px 6px -3px #D1BFB3;
	background-color: white;
}
.story-header img {
	width: 100%;
	height: 240px;
	border-radius: 20px;
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;;
}
.story-header img:hover {
	-webkit-transform: scale(1.07);
	-moz-transform: scale(1.07);
	-o-transform: scale(1.07);
	transform: scale(1.07);
}
.story-header p {
	font: bold 12px arial, calibri, sans-serif;
	color: black;
	width: 85%;
	height: 15%;
	padding: 2px;
	position: absolute;
	background-color: white;
	bottom: 1%;
	left: 6%;
	border-radius: 6px;
	text-align: center;
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
}
.story-header div {
	width: 35%;
	height: 22%;
	padding: 2px;
	position: absolute;
	background-color: white;
	bottom: 13%;
	left: 30%;
	border-radius: 50%;
	text-align: center;
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
}
.story-header > div > img {
	width: 80%;
	height: 80%;
	margin: 2px;
	position: absolute;
	top: 6%;
	left: 7%;
	border-radius: 10px;
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
	z-index: 10;
}
.story-header p:hover {
	-webkit-transform: scale(1.07);
	-moz-transform: scale(1.07);
	-o-transform: scale(1.07);
	transform: scale(1.07);
}
#creat-story > p > strong {
	font-weight: bold;
	font-size: 16px;
	position: relative;
	top: 10px;
}


/*==============================
======= NAVIGATION/MENU ========
===============================*/
#navigasi {
    position: relative;
	top: 59px;
    display: block;
    margin: 0;
	padding: 0;
    width: 100%;
	height: 40px;
    background-color: #020210d9;
    list-style-type: none;
	font: 700 18px arial, calibri, sans-serif;    
}

#navigasi > .nav-menu {
    width: 1040px;
    position: relative;
    margin: 0 auto;
    list-style: none;
    background-color: #020210d9;
    color: white;
    transition: all .3s ease;
}
.nav-menu > li {
    display: inline-block;
}
.nav-menu > li:hover {
    background-color: white;
    color: blue;
}
.nav-menu > li > a {
    display: block;
    margin: 0 5px;
    padding: 0 5px;
    line-height: 40px;
    text-decoration: none;
    color: inherit;
}
.btn-responsive {
    position: absolute;
    display: none;
    top: 5px;right: 5px;
    margin: 0;padding: 0;
    width: 50px;height: 50px;
    cursor: pointer;
    z-index: 100;
}
.btn-responsive > .bar {
    position: absolute;
    top: 5px;left: 10px;
    width: 30px;height: 2px;
    background: #fff;
}
.btn-responsive > .bar:nth-child(1) {
    top: 15px;
}
.btn-responsive > .bar:nth-child(2) {
    top: 25px;
}
li.dropdown {
	display: inline-block;
}
.dropdown:hover .submenu {
	display: block;
}
.submenu a:hover {
	color: blue;
}
.submenu {
	position: absolute;
	padding: 5px 20px 10px;
	display: none;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	color: blue;
	background-color: white;
}
.submenu a {
	color: blue;
   text-decoration: none;
}
.submenu li {
	margin: 10px 0;
}
.submenu a:hover {
	color: #EB3F1A;
}
/*==============================
======== MAIN CONTENT ==========
===============================*/

/*===== CONTENT TERBARU =====*/
.artikel-terbaru {
	width: 100%;
	margin-bottom: 20px;
	height: 700px;
	overflow-x: scroll;
}
.artikel-terbaru > .box-judul {
	width: 95%;
}
.next-baca {
	width: 30%;
	height: 220px;
}
.next-baca img {
	width: 100%;
	height: 200px;
}
.next-baca h2 {
	width: 93%;
	top: 150px;
}

/*===== CONTENT HIGHLIGHT =====*/
   

#highlight {
	width: 98%;
	height: 320px;
	padding: 0 10px;
	margin-bottom: 20px;
	background-color: #E8F3F8;
	float: left;
	overflow: hidden;
}
#highlight > header {
	width: 100%;
	float: left;
}
#highlight > header > h1 {
	font: bold 20px arial, calibri, sans-serif;
	margin: 10px 20px 0px;
	float: left;
}
#highlight-slider {
	width: 100%;
	height: 82%;
	float: left;
	overflow: hidden;
	overflow-x: scroll;
}
#highlight article {
	width: 230px;
	height: 250px;
	margin: 5px 10px 10px;
	float: left;
	background-color: white;
	overflow: hidden;
}
.highlight a {
	text-decoration: none;
}
.highlight > a > p {
	font: bold 20px calibri, arial, sans-serif;
	color: green;
	float: left;
	margin: 5px 10px 0
}
.highlight img {
	width: 90%;
	height: 120px;
	margin: 10px;
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
}
.highlight img:hover {
	-webkit-transform: scale(1.12);
	-moz-transform: scale(1.12);
	-o-transform: scale(1.12);
	transform: scale(1.12);
}
.highlight > a > h2 {
	font: bold 14px calibri, arial, sans-serif;
	width: 200px;
	height: 55px;
	font-size: 16px;
	text-align: center;
	color: black;
}
.highlight >a > h2:hover {
	width: 200px;
	height: 55px;
	font-size: 16px;
	text-align: center;
	color: #EB3F1A;
}