@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@font-face {
    font-family: dinprolight;
    src: url(../fonts/DINPro-Light_13935.ttf);
}
@font-face {
    font-family: dinprobold;
    src: url(../fonts/DINPro-Black_13933.ttf);
}

	/* body	*/
	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
		font-family: "Open Sans", Helvetica, sans-serif;
	}

	.konten{
		background-image: url("../img/bg.png");

		overflow: hidden;
	}
	/* menu	*/


	#responsive-admin-menu {
		float: left;
		width: 200px;
		height: 100%;
		position: relative;
		overflow: hidden;
		left: 0px;

	}

	#content-wrapper {
		width: auto;
		margin-left: 200px;
	}

	#responsive-admin-menu #responsive-menu {
		height: 50px;
		display: none;
		line-height: 50px;
		cursor: pointer;
		color: #ffffff;
		text-indent: 10px;
	}


	#responsive-admin-menu #responsive-menu .menuicon {
		color: #ffffff;
		font-size: 24px;
		position: absolute;
		right: 10px;
		top: 0px;
	}
	#responsive-admin-menu #logo {
		background-position: -0px -36px;
		height: 70px;
	  background-color: #063962;
	  padding:10px;
	}

	/* Menu Styles */
	#responsive-admin-menu #menu {
		opacity: 0.75;
		background-color: #000;
		width: 100%;
		min-height: 553px;
	}
	#responsive-admin-menu #menu a {
		font-size: 14px;
		font-weight: lighter; text-transform: uppercase;
		text-decoration: none;
		display: block;
		padding: 12px;
		color: #FFFFFF;
		position: relative;
		font-weight: 400;
		overflow: hidden;
	}
	#responsive-admin-menu #menu a:hover {
		color: #52535a;
		background-color:#fcfcfc;
	}
	#responsive-admin-menu #menu i {
		width: 16px;
		padding-right: 4px;
	}
	#responsive-admin-menu #menu div {
		display: none;
		width: 100%;
		background-color: #5c5d64;
		overflow: hidden;
	}
	#responsive-admin-menu #menu div a {
		color: #c0c0c0;
	}
	#responsive-admin-menu #menu div a:hover {
		color: #888888;
	}
	#responsive-admin-menu #menu a.submenu:before {
		font-family: FontAwesome;
		content: "\f054";
	}
	#responsive-admin-menu #menu a.downarrow:before {
		font-family: FontAwesome;
		content: "\f078";
	}
	#responsive-admin-menu #menu a.submenu:before {
		font-size: 14px;
		position: absolute;
		right: 15px;
		top: 17px;
	}

/*Penta Content*/
	.penta {
		width: 480px;
		height: 300px;
		background: #063962;
		opacity: .75;
		margin-top: 250px;
		padding-top: 30px;
		padding-left:100px;
		-webkit-clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
		clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
		float:right;
		color:#fff;
	}

	.penta span{
		font-size:40px;
		font-family: dinprolight;
	}

	.penta b{
		font-family: dinprobold;
	}

	.penta p{
		line-height: 30px;
	}

	/* Menu Styles */

	@media screen and (max-width: 960px) {
		#responsive-admin-menu #responsive-menu {
			display: none;
		}
		#responsive-admin-menu #menu a span {
			display: inline-block;
		}
	}
	@media screen and (max-width: 800px) {
		#responsive-admin-menu #menu a span {
			display: none;
		}
		#responsive-admin-menu {
			float: left;
			width: 40px;
			position: relative;
		}
		#responsive-admin-menu {
			height: 100%;
		}
		#content-wrapper {
			margin-left: 40px;
		}
		#responsive-admin-menu #menu a.submenu:before {
			font-size: 6px;
			right: 5px;
		}
		#responsive-admin-menu #logo {
			background-position: -0px -0px;
			width: 29px;
			height: 26px;
			margin: 10px 10px 10px 5px;
		}
	}
	@media screen and (max-width: 480px) {
		#responsive-admin-menu {
			min-height: 50px;
			float: left;
			width: 100%;
			background-color: #404040;
			height: auto;
			position: static;
			top: 0;
		}
		#responsive-admin-menu #logo {
			display: none;
		}
		#responsive-admin-menu #menu a span {
			display: inline-block;
		}
		#content-wrapper {
			margin-left: 0;
			padding-top: 60px;
		}
		#responsive-admin-menu #responsive-menu {
			display: block;
		}
		#responsive-admin-menu #menu {
			display: none;
		}
		#responsive-admin-menu #menu a {
			color: #FFFFFF;
		}
		#responsive-admin-menu #menu a.submenu:before {
			font-size: 14px;
			right: 15px;
		}
	}