* {
	padding:0;
	margin:0;
}

body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	background-color:#e1e1e1;
	position:relative;
}

header {
	width:100%;
	background-color:#767fbc ;
/*	background-color:#012231 ; */
	z-index:1000;
	position:fixed;
}

p{
  text-align: center;
}
 
a{
  color: #232323;
  text-decoration: none;
  font-weight: 500;
}

a:hover{
  text-decoration: underline;
}
 
.wrapper {
  width: 100%;
  margin: 0 auto;
}
.zoom-effect {  
  position: relative;
  width: 100%;
  height: 270px;
  margin: 0 auto;
  overflow: hidden;  
}
 
.kotak {
  position: absolute;
  top: 0;
  left: 0;
  
}
.kotak img {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  width: 350px;
}
 
.zoom-effect:hover .kotak img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

.menu-bar {
	color:#FFF;
	font-size:25px;
	cursor:pointer;
	padding:10px 12px;
	margin-left:10px;
	margin-top:5px;
	margin-bottom:5px;
}

.menu-bar:hover {
	background-color:rgba(0, 0, 0, 0.1);
	border-radius:50px;
}

#tag-menu {
	display:none;
}


#tag-menu:checked ~ div.jw-drawer {
 animation: slide-in 0.5s ease;
 animation-fill-mode: forwards;
}

.jw-drawer {
	position:fixed;
	left:-280px;
	background-color:#767fbc;
		/*background-color:#012231;*/
	height:100%;
	z-index:100;
	width:230px;
	animation: slide-out 0.5s ease;
	animation-fill-mode: forwards;
}

.jw-drawer ul li {
	list-style:none;
}

.jw-drawer ul li a {
	padding:10px 20px;
	text-decoration:none;
	display:block;
	color:#FFF;
	border-top:1px solid #059;
}
.nav-link.active{color:#fff;background-color:#02547a;border-color:#dee2e6 #dee2e6 #fff}

.circular-image {
     width: 300px;
     height: 300px;
     overflow: hidden;
}

.jw-drawer ul li a:hover{
	background-color:rgba(0, 0, 0, 0.1);
}

.jw-drawer ul li a i {
	width:50px;
	height:35px;
	text-align:center;
	padding-top:15px;
}

@keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}

@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}




.content{
  padding: 100px 0 0 250px;
}
#slider-wrapper{
            width: 940px;
            height: 470px;
            margin: 50px auto;
            position: relative;
            margin-bottom: 0px;
            background: rgba(0,0,0,0.5);
            overflow: hidden;
        }
        
                #s1{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: -36px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }
                
                #s2{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: -12px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }
                
                #s3{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: 12px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }
                
                #s4{
                    padding: 6px;
                    background: #FFFFFF;
                    position: absolute;
                    left: 50%;
                    bottom: 25px;
                    margin-left: 36px;
                    border-radius: 20px;
                    opacity: 0.3;
                    cursor: pointer;
                    z-index: 999;
                }
                
                
               
                #s1:hover, #s2:hover, #s3:hover, #s4:hover{ opacity: 1;}
                
            .inner-wrapper{
                width: 940px;
                height: 470px;
                position: absolute;
                top: 0;
                left: 0;
                margin-bottom: 0px;
                overflow: hidden;
            }
                .control{ display: none;}
                
                #Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }
                #Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }
                #Slide3:checked ~ .overflow-wrapper{ margin-left: -200%; }
                #Slide4:checked ~ .overflow-wrapper{ margin-left: -300%; }
  
                

  
                #Slide1:checked + #s1 { opacity: 1; }
                #Slide2:checked + #s2 { opacity: 1; }
                #Slide3:checked + #s3 { opacity: 1; }
                #Slide4:checked + #s4 { opacity: 1; }

                
                
            .overflow-wrapper{
                width: 400%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                overflow-y: hidden;
                z-index: 1;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }
            
                .slide img{
                    width: 25%;
                    float: left;
                }

#konten {
	margin: 20px auto;
	width: 300px;
	font-family: Helvetica;
	font-size: 0.8em;
}
#konten form fieldset label, #konten form fieldset input  {
	width: 100%;
	float: left;
	margin-top: 5px;
}
#konten form fieldset legend {
	padding: 5px;
	background-color: #DBEAF9;
	font-weight: bold;
}
#konten form fieldset {
	background-color: #ECF4FC;
	border: 1px solid #DBEAF9;
}
#konten form fieldset input[type=submit] {
	width: 30% !important;
	margin-top: 20px;
}