body {color: #4B4F5A; background: #DCE1E4; font-family: arial;}
a {color:#FF6C23;}
a:hover {color:#333;}
#wrapper {background: #4B4F5A; border-bottom:1px solid #fff;}
#footer .nav {background: #4B4F5A; border-top:1px solid #fff; border-bottom: 1px solid #4f576b;}
#body {margin-top: 51px; margin-bottom: 100px;}
#comen {margin:0px auto; height: 50px; background: #4B4F5A; }
#comen p {font-size: 18px; padding-top: 13px;}
#comen p a {color: #9EA9AF;}
#comen p a:hover {color: #fff;}
#comments {background:none; color: #4B4F5A;}
#content {width: 960px;margin: 0px auto 0px auto; }
b.bold {font-size: 18px;}
.box img, .box2 img, .box3 img, .box4 img, .box5 img, .box6 img {margin-top: 0px;}
.post {background: none;}
.post h2 {display:none; }
.post p {margin-bottom: 1em;}
.post ul {margin-left: 0px;}
.post ul li { margin-bottom: 20px; font-size: 18px;}
.post ul li a {color: #E9C67B;}
.post ul li a:hover { margin-bottom: 30px; font-size: 18px; color: #fff;}
.post h4 {font-weight: normal;color:#4B4F5A;line-height:20px;padding-top:0px;margin-bottom: 1em;}
.post code {background:#25272C;color:#9EA9AF;font-size:14px; padding:0px 3px 0px 3px;}
.kanan i {color: #FF6C23;}
.kanan2 i {color: #FF6C23;}
p.alert {
font-size: 16px;
text-align:center;
padding: 3px 6px 3px 6px;
font-family: georgia;
background: #7C8B2E;
color: #fff;
margin-top: -80px;
width: 500px;
}

.kotak {
background: #D7DCDF;
clear:both;
padding: 80px 80px 0px 80px;
width: 800px; 
margin: 30px auto 0px auto;
height: 480px; 
border-bottom:1px solid #BDC1C7; 
border-top:1px solid #BDC1C7;
}

.eits {
margin-top: 50px;
font-size: 48px; 
padding: 30px;
font-family: georgia;
background: #25272C;
color: #9EA9AF;
}

.judla {
margin-top: 150px;
text-align: center;
font-size: 36px;
font-variant: uppercase;
}

.judla b {
font-size: 48px;
color: #FF6C23;
}

.css {
color: #FF6C23;
font-family: arial; 
font-size: 15em; 
font-weight:bold;
text-align: center;
letter-spacing: -2px;
z-index: 1;
}

.hebatan {
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
width: 800px;
background-color:rgba(255, 255, 255, 0.6);
font-family: arial; 
font-size: 6em; 
font-weight:bold;
text-align: center;
letter-spacing: -5px;
z-index: 2;
position: relative;
margin: -198px auto 0px auto;
}

.intro {
width: 800px;
margin: 60px auto 0px auto;
padding: 20px 0px 20px 0px;
border-top:1px solid #BDC1C7;
border-bottom:1px solid #BDC1C7;
font-family: arial;
line-height: 1.5em;
font-size: 18px;
}

.intro span {
float:left;
color: #4B4F5A;
font-size: 6em;
padding: 28px 12px 10px 0px;
font-weight: bold;
}

.kete {
border-bottom:1px solid #BDC1C7; 
height: 300px;
width: 760px;
margin:auto;
padding: 20px;
}

.kiri {
float: left;
width: 250px;
height: 300px;
}

.kanan {
overflow: auto;
float: right;
width: 450px;
height: 280px;
background: #25272C;
padding: 0px 20px 20px 20px;
color: #9EA9AF;
}

.kete2 {
border-bottom:1px solid #BDC1C7; 
height: 420px;
width: 760px;
margin:auto;
padding: 20px;
}

.kiri2 {
float: left;
width: 250px;
height: 420px;
}

.kanan2 {
overflow: auto;
float: right;
width: 450px;
height: 390px;
background: #25272C;
padding: 0px 20px 20px 20px;
color: #9EA9AF;
}


.box, .box2, .box3, .box4, .box5, .box6 {
width: 230px;
height: 200px;
background: #fff;
float: left;
margin-left: 28px;
padding: 3px;
-moz-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.25s ease-in-out; 
}

.box2, .box4, .box6 {
position:relative;
z-index: 1;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
}

.box, .box3, .box5 {
position:relative;
z-index: 2;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
}

.box:hover, .box3:hover, .box5:hover, .box2:hover, .box4:hover, .box6:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform:  scale(1.25);
-moz-transform: scale(1.25);
z-index: 3;
}

.box a, .box3 a, .box5 a, .box2 a, .box4 a, .box6 a {
width: 230px;
height: 200px;
display:block;
}












.tombol {
background-color: rgba(60, 132, 198, 0.8);
border: 2px solid #4F93CA;
width: 600px;
height: 200px;
background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
margin: -30px auto;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-moz-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
-webkit-box-shadow:0 20px 20px rgba(66, 140, 240, 0.3);
}

.kilau {
top:1px;
left:50px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
height: 110px;
width: 500px;
background-color: rgba(255, 255, 255, 0.2);
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 80%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));

}


.tombol2 {
background-color:#EE5526;
background-image:-moz-linear-gradient(rgba(239, 97, 49, 0) 0%, rgba(246, 132, 36, 0.8) 90%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(239, 97, 49, 0.8)), to(rgba(246, 132, 36, .9)));
-moz-box-shadow:0 20px 20px rgba(237, 96, 46, 0.3);
-webkit-box-shadow:0 20px 20px rgba(237, 96, 46, 0.3);
margin: 80px auto;
border: 2px solid #EF925E ;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
width: 600px;
height: 200px;
}

.tombol span { 
text-shadow: 0px 1px 8px #2867A5;
font-family: arial black;
color: #fefefe;
font-size: 80px;
position: relative;
top: -20px;
left: 150px;
}

.tombol2 span { 
text-shadow: 0px 1px 8px #C45426;
font-family: arial black;
color: #fefefe;
font-size: 80px;
position: relative;
top: -20px;
left: 150px;
}


.trans1 {
float:left;
width:300px;
height: 400px;
background-color:rgba(239, 95, 48, 1);
}

p.trans2 {
padding: 15px;
left: 0px;
top: -421px;
position:relative;
z-index:2;
width: 400px;
height: 410px;
background-color:rgba(255, 255, 255, 0.8);
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}

.trans3 {
float:right;
width: 300px;
height: 400px;
background-color:rgba(40, 103, 165,1);
}


.kubus {
position: relative;
top: 0px;
left: -30px;
margin: 20px 0px 0px 0px;
float:left;
}

.kubus2 {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
z-index: 2;
position: relative;
top: -50px;
left: 270px;
margin: 20px 0px 0px 0px;
float:left;
}

.left, .right {
top: 130px;
float:left;
padding: 15px;
position:relative;
width: 200px;
height: 200px;
color: #fff;
font-size: 12px;
right: 160px;
}

.top {
	font-size: 12px;
	color: #fff;
	z-index: 2;
	top:-51px;
	left: 185px;
        	-moz-transform: rotate(60deg) skewY(-30deg) scaleY(1.15);
	-webkit-transform: rotate(60deg) skewY(-30deg) scaleY(1.15);
	background: #7C8B2E;
	float:left;
	padding: 15px;
	position:relative;
	width: 200px;
	height: 200px;
}


.left {
	-webkit-transform: skewY(30deg);
	-moz-transform: skewY(30deg);
	background: #2867A5;
}

.right {
	-webkit-transform: skewY(-30deg);
	-moz-transform: skewY(-30deg);
	background: #EF5F30;
}





.left2, .right2 {
top: 130px;
float:left;
padding: 15px;
position:relative;
width: 200px;
height: 100px;
color: #fff;
font-size: 12px;
right: 160px;
}

.top2 {
	font-size: 12px;
	color: #fff;
	z-index: 2;
	top:-1px;
	left: 185px;
        	-moz-transform: rotate(60deg) skewY(-30deg) scaleY(2.04);
	-webkit-transform: rotate(60deg) skewY(-30deg) scaleY(2.04);
	background: #7C8B2E;
	float:left;
	padding: 15px;
	position:relative;
	width: 200px;
	height: 100px;
}


.left2 {
	-webkit-transform: skewY(30deg);
	-moz-transform: skewY(30deg);
	background: #EF5F30;
}

.right2 {
	-webkit-transform: skewY(-30deg);
	-moz-transform: skewY(-30deg);
	background: #2867A5;
}



.kot {
float:left;
width: 180px;
height: 130px;
margin: 30px 0;
border: 1px solid #4B4F5A;
-webkit-transition: all 0.6s ease-in-out; 
}

.kot[title$="kot1"] {
background: #2867A5;
}

.kot[title$="kot1"]:hover {
-moz-transform:translate(3em, 0pt);
-webkit-transform:translate(3em, 0pt);
}

.kot[title$="kot2"] {
margin-left: 23px;
background: #7C8B2E;
}

.kot[title$="kot2"]:hover {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}

.kot[title$="kot3"] {
margin-left: 23px;
background: #EF5F30;
}

.kot[title$="kot3"]:hover {
-moz-transform:translate(-3em, 1em);
-webkit-transform:translate(-3em, 1em);
}

.kot[title$="kot4"] {
margin-left: 23px;
background: #EA2F22;
}

.kot[title$="kot4"]:hover {
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
}

.kot:hover {
z-index: 2;
}


.kolom {
		-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
		margin-top: -30px;
		margin-bottom: 10px;
		padding: 20px;
		background: #fff;
		-webkit-column-count: 3;
		-webkit-column-gap: 20px;
		-moz-column-count: 3;
		-moz-column-gap: 20px;
}

.kolom2 {
		text-align: justify;
		-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
		margin-top: -5px;
		padding: 20px;
		background: #fff;
		-webkit-column-count: 2;
		-webkit-column-gap: 20px;
		-moz-column-count: 2;
		-moz-column-gap: 20px;
		-moz-column-rule: 1px solid #BDC1C7;
		-webkit-column-rule: 1px solid #BDC1C7;
}

.animasi {
top: 180px;
position: relative;
margin-top: 50px; 
height: 230px; 
background: #E9C67B;
}

.anima {
position: relative;
float: left;
left: 23px;
width: 100px;
height: 50px;
background: #4B4F5A;
-webkit-transition: -webkit-transform 1.1s ease-in;
}

.bunder {
position: relative;
float: left;
top: -135px;
left: 250px;
width: 100px;
height: 50px;
background: #4B4F5A;
-webkit-transition: -webkit-transform 1.1s ease-in;
}

.animo {
position: relative;
float: right;
right: 23px;
width: 100px;
height: 50px;
background: #4B4F5A;
-webkit-transition: -webkit-transform 1.1s ease-in-out;
}


.animasi:hover div.anima {
	-webkit-transform: translate(650px,-130px);
	-moz-transform: translate(650px,-130px);
}

.animasi:hover div.animo {
	z-index: 2;
	-webkit-transform: translate(-650px,-130px);
	-moz-transform: translate(-650px,-130px);
}

.animasi:hover div.bunder {
	z-index: 3;
	-webkit-transform: translate(0px,130px);
	-moz-transform: translate(0px,130px);
}




.simpul {
padding: 30px;
margin-top: 150px;
height: 240px;
background: #25272C;
color: #9EA9AF;
}

.simpul h5 {
margin:0px;
letter-spacing: 1px;
padding-bottom: 10px;
font-family: Georgia;
font-weight:normal;
font-size: 24px;
border-bottom: 1px dashed #4B4F5A;
}