/*
	Monochromed by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

@charset 'UTF-8';

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

		
		
	/* Change this to whatever font weight/color pairing is most suitable */
	
	em, i
	{
		font-style: italic;
	}

	/* Don't forget to set this to something that matches the design */
	
	sub
	{
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}
	
	sup
	{
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}
	
	hr
	{
		border: 0;
		border-top: solid 1px #ddd;
	}
	
	blockquote
	{
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}
	
	p, ul, ol, dl, table
	{
		margin-bottom: 1em;
	}

	footer
	{
		background-color: #2700FF;
		margin-top: 0em;
	}

	br.clear
	{
		clear: both;
	}
	
	/* Buttons */
		
		.button
		{
			position: relative;
			display: inline-block;
			margin-top: 2em;
			padding: 0.8em 1.5em;
			background: #1d1d1d;
			border-radius: 6px;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 1em;
			color: #FFF;
			-moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			cursor: pointer;
		}

			.button:hover
			{
				background: #141414;
				color: #FFF !important;
			}
	

	/* Sections/Articles */
	
		section,
		article
		{
			margin-bottom: 3em;
		}
		
		section > :last-child,
		article > :last-child
		{
			margin-bottom: 0;
		}

		section:last-child,
		article:last-child
		{
			margin-bottom: 0;
		}

		.row > section,
		.row > article
		{
			margin-bottom: 0;
		}

	/* Images */

		.image
		{
			display: inline-block;
		}
		
			.image img
			{
				display: block;
				width: 100%;
				border-radius: 6px;
			}

			.image.featured
			{
				display: block;
				width: 100%;
				margin: 0 0 2em 0;
			}
			
			.image.full
			{
				display: block;
				width: 100%;
				margin: 0 0 2em 0;
			}
			
			.image.left
			{
				float: left;
				margin: 0 2em 2em 0;
			}
			
			.image.centered
			{
				display: block;
				margin: 0 0 2em 0;
			}

				.image.centered img
				{
					margin: 0 auto;
					width: auto;
				}

	

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header
	{
		position:relative;
		background:url("../image/header_petir.png")100% no-repeat;
		background-size: 100%;
		background-color: #FFFFFF;
		align-self: center;
		
		margin-left: -120px;
		margin-right: 20px;
	}

	
	
/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner
	{
		position: relative;
		background: #333;
		color: #fff;
	}

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

	#main
	{
		position: relative;
		background: #fff url(images/overlay.png) repeat;
	}
	
	.divider
	{
		overflow: hidden;
		border-top: 1px solid #dbdbdb;
	}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
	#footer
	{
		position: relative;
		background: #121212;
		color: rgba(255,255,255,.4);
	}
	
	#footer header h2
	{
		color: #FFF;
	}
	
/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/
	
	#copyright
	{
		position:relative;
		padding: 2em 2em;
		text-align: center;
		color:#E0FF00;
		background-color:#383838;
		width: 100%;
        font-size: 10px;
        margin-bottom: -100px;
        top : 70px;
        bottom : -110px;
        align-content: center;
        float :none;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;       
	}
	
	#copyright .container h4
	{background-color: #blue;
		color: #D3FF00;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
        font-size: 20px;
        margin-bottom: 0px;
        margin-top:auto;	
		top : 0px;
        bottom : 10px;
	}
	
	#copyright .container h4 a
	{
		text-decoration: none;
		color: blue;
		top: 30px;
        font-size: 20px;
        align-content: center;
	}
   #copyright .container
	{
		text-decoration: none;
		color: yellow;
		top: -30px;
        font-size: 20px;
        align-content: center;
        float: none;
        width: 1200px;
        overflow:hidden;
        margin-left: auto;
        margin-right: auto;
		top : 0px;
        bottom : 10px;
	}

/*=======================SIDENAV */

/* Style the side navigation */
.sidenav {
  height: 100%;
  width: 450px;
  position: relative;
  z-index: 999;
  background-color:#0033CC;
  top: -200;
  left: 0;
  border: 1px;
  border-color:#FFFFFF;
  background: url("../image/molekul.png")100% no-repeat;
  background-size: 100%;
  
}


/* Side navigation links */
.sidenav a {
  color: white;
  padding: 30px;
  margin-left : 0px;
  text-decoration: none;
  display: block;
}
 .sidenav table tr td a .top {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  z-index: 99;
}
  .sidenav table tr td a .top:hover {
  display: inline;
  }
/* Change color on hover */
.sidenav a:hover {
  background-color: #ddd;
  color: #00D6FF;
  padding: 30px 30px;
	margin-left : 0px;
  text-decoration: none;
}
.sidenav a:active {
  background-color: #FF0000;
  color: black;
  padding: 30px 30px;
  margin-left : 0px;
  text-decoration: none;
}
/* Style the content */