h2{
	font-family: sans-serif;
	font-weight: normal;
}

.paul-slider { 
	border: 10px solid #efefef; 
	position: relative; 
	overflow: hidden; 
	background: #efefef;
}

.paul-slider { 
	margin:20px auto;
	width: 768px;
	height: 450px; 
}

.isi-slider img { 
	width: 768px;
	height: 450px; 
	float: left;
}

.isi-slider { 
	position: absolute; 
	width:3900px;  

	/*pengaturan durasi lama tampil gambar bisa di atur di bawah ini*/
	animation-name:slider;
	animation-duration:5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
	-webkit-animation-name:slider;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:slider;
	-moz-animation-duration:5s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count:infinite;
	-o-animation-name:slider;
	-o-animation-duration:5s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count:infinite;
}


/*saat gambar di hover oleh cursor mouse maka berhenti slide*/
.isi-slider:hover { 
	-webkit-animation-play-state:paused; 
	-moz-animation-play-state:paused; 
	-o-animation-play-state:paused; 
	animation-play-state:paused; }
}

.isi-slider img { 
	float: right; 
}

.paul-slider:after { 
	font-size: 150px; 
	position: absolute; 
	z-index: 12; 
	color: rgba(255,255,255, 0); 
	left: 300px; top: 80px; 
	-webkit-transition: 1s all ease-in-out; 
	-moz-transition: 1s all ease-in-out; 
	transition: 1s all ease-in-out; 
}

.paul-slider:hover:after { 
	color: rgba(255,255,255, 0.6);  
}



@-moz-keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}       
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0;
	}   	
	100% {
		left: 0; opacity: 0; 
	}
} 

@-webkit-keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}       
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0;
	}   	
	100% {
		left: 0; opacity: 0; 
	}
} 


@keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}     
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0; 
	} 

	100% {
		left: 0; opacity: 0; 
	}
}




<style type="text/css">
	html,body{
		padding: 0;
		margin:0;
		font-family: sans-serif;
	}

	.menu-malasngoding{
		background-color: #3141ff;
	}





	.menu-malasngoding ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	.menu-malasngoding > ul > li {
		float: left;
	}

	
	.menu-malasngoding li a {
		display: inline-block;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

	.menu-malasngoding li a:hover{
		background-color: #2525ff;
	}

	li.dropdown {
		display: inline-block;
	}

	.dropdown:hover .isi-dropdown {
		display: block;
	}

	.isi-dropdown a:hover {
		color: #fff !important;
	}

	.isi-dropdown {
		position: absolute;
		display: none;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		background-color: #f9f9f9;
	}

	.isi-dropdown a {
		color: #3c3c3c !important;
	}

	.isi-dropdown a:hover {
		color: #232323 !important;
		background: #f3f3f3 !important;
	}
</style>



<style>
*{
            padding: 0;margin: 0;
        }
        h1, h2, h3, h4, h5{
            font-family: 'Concert One', cursive;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        body{
			
            background: -moz-radial-gradient(circle, #093, #fff);
            background: -webkit-radial-gradient(circle, #093, #093);
            background-image: url(robots.png) bottom right no-repeat fixed;
            font-family: 'Source Sans Pro', sans-serif;
        }
        /* Menu atas */
		
		*{
            padding: 0;margin: 0;
        }
        h1, h2, h3, h4, h5{
            font-family: 'Concert One', cursive;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        body{
			
            background: -moz-radial-gradient(circle, #fff, #fff);
            background: -webkit-radial-gradient(circle, #060, #fff);
           
        }
		
		
		
        .fly{
            background-color: #FFF;
			
            background-image: -webkit-linear-gradient(center top , #FFF 0%, #FFF 100%);
            background-image: -moz-linear-gradient(center top , #ff2300 0%, #FFF 100%);
            background-image: -o-linear-gradient(center top , #ff2300 0%, #ff4400 100%);
            background-image: -ms-linear-gradient(center top , #ff2300 0%, #ff4400 100%);
            background-image: linear-gradient(center top , #ff2300 0%, #FFF 100%);
            border-bottom: 0px solid #FFF;
            -webkit-box-shadow: 0 1px 0 #FFF;
            box-shadow: 0 1px 0 #FFF;
            font-size: 13px;
            height: 80px;
            left: 0;
            position: fixed;
			font-family:Verdana, Geneva, sans-serif;
			padding-left:70;
            right: 0;
            top: 0;
			alignment-adjust:auto;
            width: 100%;

        }
            .fly .content ul{
                list-style-type: none;
                float: left;
            }
                .fly .content ul li{
                    display: inline;
                }
                    .fly .content ul li a{
                        display: inline-block;
                        text-decoration: none;
                        padding: 2px 10px;
                        border-right: 1px solid #000;
                        color: #fff;
                        font-weight: bold;
                    }
                  .fly .content ul li a:hover, .fly .content ul li a.active{
                        background: -webkit-linear-gradient(top, #FFF, #FFF);
                        background: -moz-linear-gradient(top, #FFF, #FFF);
                        background: -o-linear-gradient(top, #FFF, #FFF);
                        background: -ms-linear-gradient(top, #FFF, #FFF);
                        background: linear-gradient(top, #FFF, #FFF);
                    }

            .fly .content .ribbon{
                text-align: right;
                float: right;
                width: auto;
                background: none;
                padding: 2px 10px;
                -webkit-box-shadow: 0 8px 6px -6px #999;
                   -moz-box-shadow: 0 8px 6px -6px #999;
                        box-shadow: 0 8px 6px -6px #999;                
            }
            .fly .content .ribbon:hover{
                background: #fff;
            }    

        /* Content untuk semua tempatnya disini */
        .content{
			background:#FFF;
            max-width: 500px;
            margin: 0 auto;
        }

        .flying-robot{
            position:fixed; top:50px; left:10px;padding:10px;
            height: 150px;
            width: 150px;
        }

        /* Halaman Utama */
        .main{
			
            margin-top:10px;
            margin-bottom: 0px
        }
            .main .content p{
                margin-bottom: 0px;
            }



        /* Bagian Footer */
        .footer{
            padding: 0px 0;
            background: none ;
            background: -moz-linear-gradient(left, #033, #033);
            background: -o-linear-gradient(left, #033, #033);
            background: -ms-linear-gradient(left, #033, #033);
            background: linear-gradient(left, #ccc, #033);
            bottom: 0;
            position: fixed;
            width: 100%;
            font-size: 12px;
        }
            .footer a{
                text-decoration: none;
                font-weight: bold;
                color: #033;
            }
			
			
			
			
			
			
			
			
			
			
			
			
			
#button {
  background-color: #F00;
  width: 100%;
  padding: 5px 0 10px 0;
}
			
#button a{
  text-decoration: none;
  color: #ecf0f1;
  background-color: #F00;
  width: 100px;
  padding: 5px 10px;
  margin:5px;
}			

<style>
	body {
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	background-color: #393636;
}

.container {
	width: 900px;
	margin: auto;
}

header {
	height: 120px;
	overflow: hidden;
	background: #000000;
}
header .headerKiri {
	width: 250px;
	float: left;
	margin: 25px 0 0 10px;
}

.profil {
		overflow: hidden;
		background-color: #E9E9E9;
}
.profil img {
	
	width:500px;
	height: auto;
	border: 5px solid #F00;
	}







.class-yang-dipakai {
	
  background-image: url(../berbagi/gambar/icon%20berbagi%20750.jpg);
  background-repeat: no-repeat;
  padding-left: 18px !important;
  background-size: 100%;
  width:100%;
  
  background-position-y: 20%;

}



	</style>
	
	
	
	<style>
	.chat-main{
    bottom: 0;
    right:120px;
    position: fixed;
}
.chat-header{
    background: #E5EFC1;
    border:1px solid #D7DF71;
}
.image img{
    height: 40px;
    width: 40px;
}
.user-detail h6{
    display: inline-block;
}
.user-detail .active{
    color: #32B92D;
    font-size: 12px;
}
.options i{
    color: #a1a1a1;
    font-size: 19px;
    cursor: pointer;
}
.chat-content, .chat-content .sender, .user-detail h6{
    font-size: 14px;
}
.chat-content ul{
    height: 260px;
    overflow-x: scroll;
    overflow-x: hidden;
}
.chat-content ul li{
    list-style: none;
    background: #F5F5F5;
}
.chat-content .msg-box{
    background: #e1e1e1;
}
.chat-content .msg-box .send-btn{
    background: #39AEA9;
}
.chat-content .time{
    font-size: 10px;
    color: #a1a1a1;
}
</style>
	
	

@media (max-width: 767px) {
    .flying-robot{
        position: relative;
        text-align: center;
        top:60px;        
    }    
    .fly{
        text-align: center;
    }
    .fly .content ul li a{
        border:none;
    }
    .content{
        width: 100%;
    }
    .main .content h1,
    .main .content p{
        margin: 10px;
    }
    .footer{
        text-align: center;
    }
	margin-left: auto;
       margin-right: auto;
	
}
@media (max-width: 520px){
    .fly{

                height: 60px;
    }
    .fly .content .ribbon{
        display: block;
        width: 100%;
    }
    .main{
        margin-top:80px;
        margin-bottom: 80px
    }    
	margin-left: auto;
       margin-right: auto;
}
</style>