html,body{
    height:100%;
    font-family: "Open-Sans", Arial, Sans-serif;
    color: #666;
    background-color: #e6e9ed;
}
#container{
    min-height:100%;
    position:relative;      
}
#content{
    color: #444444;
    padding-bottom:60px; /*sama atau lebih besar dari tinggi footer*/    
}

.content{
    background-color: #fff;
    padding: 8px 5px 5px 5px;
}

/*--------------------------------------------------------------------------Header-------------------------------------------------------*/
#header{
}

.top{        
}
.content-top{
        min-height: 90px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top:15px;
        padding-bottom:15px;

}
.left-header{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: -13px;
}

.left-item{    
    font-size: 12px;
    color: #ccc;
    line-height: 1.8;
    padding: 0 13px;
    position: relative;
}

/*--------------------------------------------------------------------------Header-------------------------------------------------------*/


/*--------------------------------------------------------------------------Footer-------------------------------------------------------*/
#footer{
    margin-top: 10px;
    height:50px;
    line-height:20px;
    background:#438eb0;
    color:#fff;
    width: 100%;
    position:absolute;
    bottom:0px;
}

  

.footertop
{   
    font-family: arial;
    background:#444444;
    padding:20px 20px;
    border-top: 1px solid #e7e7e7;
    font-color:#ffffff;
    font-style : normal;
}
.footerbottom
{
    background:#333333;
    padding:18px 0;
    color:#ffffff;
    font-size: 12px;
}

.footer h3{
    color : #ffffff;
    font-size: 16px;
}
.footer p{
    color : #fff;
    font-size: 12px;
}
.footer ul {
  padding-left: 0;
  list-style: none;
}
.footer li {
  list-style: none;
}
.footer li {
  margin-bottom: 10px;
  font-size: 12px;
}
.footer li:hover {
    background:#0288d1;
    padding: 4px 4px 4px 4px;
}

.footer  a,p{
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}
/*--------------------------------------------------------------------------Footer-------------------------------------------------------*/


/*------------------------------Widget-------------------------------------*/
 .widget ul {
  padding-left: 0;
  list-style: none;
}
.widget li {
  list-style: none;
  padding: 5px;
}
.widget li {
  margin-bottom: 10px;
  font-size: 15px;
}
.widget li:hover {
    background:#E74C3C; 
    color: #ffffff;
    /* Biru muda background:#00AEEF;  */
    /* background:#0288d1;  */
    padding: 5px 5px 5px 5px;
    line-height: 25px;
}
.widget a:hover {    
    color: #ffffff;    
}
.widget li,a{
    color: #606068;
    display: block;

}
.link_widget a{
    text-decoration:none;
    color: #606068;
}



.widget {
    margin-bottom: 30px
}



.widget .widget_title {  
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 8px 15px 11px;
    font-size: 18px;
    margin-bottom: 10px;
}
.widget .widget_title h3 {
    font-weight: 700; 
    font-size: 18px; 
    padding-right: 10px;
    font-size: 16px;
    height: 15px;
    line-height: 15px;
    text-transform: uppercase;    
    display: inline-block;
    margin: 0
}
/*------------------------------------------------------------------------------

    22.8 Widget recent list
-------------------------------------------------------------------------------*/
.list_widget .item {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px
}
#footer .list_widget .item {
    border-bottom: 1px solid #444
}

.list_widget .item .item_thumb {
    width: 75px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    float: left;
    margin: 0 10px 0 0
}
.list_widget .item .item_thumb .thumb_icon {
    z-index: 5;
    opacity: 0;
    position: absolute;
    margin-left: -13px;
    margin-top: -13px;
    top: 50%;
    left: 50%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s
}
.list_widget .item .item_thumb .thumb_icon a {
    font-size: 11px;
    color: #fff;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.list_widget .item:hover .item_thumb .thumb_icon {
    opacity: 1;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
}
.list_widget .item:hover .item_thumb img {
    opacity: 0.3
}
.list_widget .item .item_thumb .thumb_hover a {
    display: block
}
.list_widget .item .item_thumb img {
    width: 100%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s
}

.list_widget .item:hover .item_thumb img {
    opacity: 0.3
}
.list_widget .item .item_thumb .thumb_hover a {
    display: block;
}

.list_widget .item .item_content {
    padding-left: 1px;
    overflow: hidden
}
.list_widget .item .item_content h4 {
    font-size: 14px;    
    line-height: 18px;
    text-transform: capitalize;
    margin: 0
}
.item .item_content h4 a {
    display: block;
    text-decoration: none;
}


.item_content a:hover{
    font-color: #ccc;
    background:#ccc;
}

.item_meta {
    font-size: 13px;
    line-height: 1;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #999
}
.item_meta span {
    float: left;
    margin-right: 10px
}

/*------------------------------Widget------------------------------*/

/*-----------------------------------------------------------------Navbar------------------------------------------------------------*/
.navbar-inverse {
    background-color: #5BC0DE; 
    border-color: #5BC0DE;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 0px solid transparent;
    border-radius:0px;
    
}
.navbar-brand {
   
    float: left;
    height:auto;
    padding: 10px 10px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-brand>img{ width:80%;}

.navbar-inverse .navbar-nav > li > a {
    color: #FFFFFF; 
    /* color: #d9534f; */
}
.navbar-inverse .navbar-nav > li > a:hover {
    background-color: #d9534f; 
   /*background-color: #d9534f;*/
}
/*-----------------------------------------------------------------Navbar------------------------------------------------------------*/


/* ----------------------------------------------------- Newsticker -------------------------------------------------------------- */
.newsticker{
    margin-top: 20px;
    display: inline-block;
    width: 100%;     
    background-color: #e6e9ed;    
}
.news_span{
    min-width:12%; 
    height: auto;
    float: left;
    color: #fff;
    padding: 10px 15px;
    margin-right: 20px;
    margin-bottom: 0;
    text-align: center;    
    background-color: #5BC0DE; 
    position: relative;
    font-size: 15px;
}
.news_title{
    clear:float:left; 
    overflow:hidden; 
    padding-right:13%;
    font-size: 15px;
}
.news_title p{
    color:#2b2b2b;
    padding:4px 4px; 3px; 8px;
    margin:5px 0px 0px 10px;
    font-size: 15px;
}
.news_title li{
     list-style: none;
     display: inline-block;
}
.news_title span{
     color: #E74C3C;
}
/* ----------------------------------------------------- Newsticker -------------------------------------------------------------- */

/* ----------------------------------------------------- Tags -------------------------------------------------------------- */
.tags a{border:1px solid #DDD;display:inline-block;color:#717171;background:#FFF;-webkit-box-shadow:0 1px 1px 0 rgba(180,180,180,0.1);box-shadow:0 1px 1px 0 rgba(180,180,180,0.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out;border-radius:2px;margin:0 3px 6px 0;padding:5px 10px}
.tags a:hover{border-color:#08C;}
.tags a.primary{color:#FFF;background-color:#428BCA;border-color:#357EBD}
.tags a.success{color:#FFF;background-color:#5CB85C;border-color:#4CAE4C}
.tags a.info{color:#FFF;background-color:#5BC0DE;border-color:#46B8DA}
.tags a.warning{color:#FFF;background-color:#F0AD4E;border-color:#EEA236}
.tags a.danger{color:#FFF;background-color:#D9534F;border-color:#D43F3A}
.tags a.default{color:#444;background-color:#fff;border-color:#ccc}
/* ----------------------------------------------------- Tags -------------------------------------------------------------- */
.border-black{border-left: 3px solid #444;}
.border-primary{border-left: 3px solid #428BCA;}
.border-success{border-left: 3px solid #5CB85C;}
.border-info{border-left: 3px solid #5BC0DE;}
.border-warning{border-left: 3px solid #F0AD4E;}
.border-danger{border-left: 3px solid #D9534F;}


/* ----------------------------------------------------- Custom -------------------------------------------------------------- */
.flat{
    border-radius: 0;
}
/* ----------------------------------------------------- Custom -------------------------------------------------------------- */
#ScrollToTop{text-align:center; position:fixed; bottom:10px; right:10px; cursor:pointer;display:none}

/*-------------------------------------------------------Carousel----------------------------------------------------------------*/
.carousel-caption p {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 5px 5px 5px;
  font-size: 13px;
}
/*-------------------------------------------------------Carousel----------------------------------------------------------------*/

/*-------------------------------------------------------Scale IMage----------------------------------------------------------------*/
.thumb_image_container{
-webkit-backface-visibility:hidden;
position: relative;
overflow: hidden;
margin-bottom: 15px;
}

.scale_image{   
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);  
}

.thumb_image_container:hover .scale_image{
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
}
/*-------------------------------------------------------Scale IMage----------------------------------------------------------------*/

/*-------------------------------------------------------Artikel----------------------------------------------------------------*/
.page{
    background-color:#fff;    
    margin-bottom:0px;
    /* border :1px solid #ccc; */
    
}
.page h3{
    font-size:19px;
    margin-bottom:12px;
    font-weight: 400;
}
.page p{
    font-size:14px;
    font-weight:500;
}
.page .details ul{
    list-style: none;
    padding-left: 0px;
    margin-bottom:18px;
}
.page .details ul li{
   float:left;
   padding-right:15px;
   font-size: 13px;
   font-weight: 600;
}
.page .details ul li:last-child {
  float: inherit;
}
.page h4{
    font-size:14px;
    font-weight:600;
}


article{
    padding: 0px;
    font-color: #333333;
}

.clear {
    clear:both;    
}
article h3{    
    color: #666666;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
}

article p{
    color:#666666;
    font-size: 100%;

}

article a:link, a:visited {        
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

article a,h3:hover{
    color: #5CB85C;
}
.judul{
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 8px 15px 11px;
    font-size: 18px;
    margin-bottom: 10px;
}

.post-desc{
    color: #444;
}
.post-desc p{
    color: #444;
    font-size: 16px;  
    font-color:#444; 
}
.details{
    color: #555555;
}
/*-------------------------------------------------------Artikel----------------------------------------------------------------*/

/*-------------------------------------------------------Thumbnail----------------------------------------------------------------*/
.galeri{
    margin-bottom: 40px;
}

.galeri .galeri-meta {
    margin-top: 15px;
    margin-bottom: 15px;
}

.galeri .galeri-title {
    font-size: 18px;
    margin-bottom: 0px;
    margin-top: 5px;
}
.galeri h3{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    text-transform: capitalize;
    color: #666;
    margin: 0px 0px 15px;
    text-align: left;
}
.galeri a{
    text-align: left;
}

.galeri a:hover{
    color: #5CB85C;
    text-decoration: none;
}
/*-------------------------------------------------------Thumbnail----------------------------------------------------------------*/

/*-------------------------------------------------------Comment----------------------------------------------------------------*/
.comment{
    background-color: #e6e9ed;
    padding: 15px 15px 15px 15px;
}
/*-------------------------------------------------------Comment----------------------------------------------------------------*/

/*-------------------------------------------------------Media Queri----------------------------------------------------------------*/
@media (max-width: 767px) {  
  .footertop {display: none;}
}

/*-------------------------------------------------------Media Queri----------------------------------------------------------------*/


/*-------------------------------------------------------Preloader----------------------------------------------------------------*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  background: #1e1e1e;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;

}

.loader {
  position: absolute;
  left: 45%;
  top: 50%;      
  transform: translate(-50%,-50%);
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*-------------------------------------------------------Preloader----------------------------------------------------------------*/