body {
	
  overflow-x: hidden;
}
.header {
	color:#fff;
	height:80px;
	background: #3aa3fd;
	padding:2px;
	text-align:center;
}
@media only screen and (max-width: 600px) {
  .header  {
    
	height:80px;
  }
  
.header h2 {
	font-size:16px;
	}
}
@media only screen and (max-width: 1000px) {
  .header  {
    
	height:60px;
  }
	.header h2 {
	font-size:22px !important;
	height:8px;
	margin-top:-2px !important;
	margin-bottom:-10px;
	}
	.header b { 
	line-height:20% !important; 
	}
}

.header h2 {
	color:#fff;
	font-weight:bold;
	text-shadow:  2px 1px #3d3dcc;
	height:28px;
	margin-top:10px;
}
.header b {
	font-weight:bold;
	text-shadow:  1px 1px #3d3dcc; 
	margin-top:1px;
}
.jambu {
	background: #3aa3fd;
	padding:5px;
}
.jelas {
	font-size:14px;
}
.panel-body {
	text-align: justify;
}
 .img1:hover {
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
}
.img2 {
    opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
}

.img2:hover {
    opacity:1.0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity:1.0;
    -khtml-opacity:1;
}
.img3{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.img3:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.img36{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.img36:hover {
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
-ms-transform:rotate(60deg);
transform:rotate(60deg);
}
.img4 {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.img4:hover {
-webkit-transform: scale(1.2) rotate(1080deg);
-moz-transform: scale(1.2) rotate(1080deg);
-o-transform: scale(1.2) rotate(1080deg);
-ms-transform: scale(1.2) rotate(1080deg);
transform: scale(1.2) rotate(1080deg);
}
.img5 {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.img5:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
.img6 {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.img6:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}
.img7 {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}

.img7:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}
