@import url('//fonts.googleapis.com/css?family=Poppins:20');

html,body {
   margin:0;
   padding:0;
   height:100%;
   font-family: 'Poppins', sans-syerif;  
   }

#container {
  position:relative;
  min-height: 100%;
}

.container-fluid {
  position:relative;
  min-height: 100%;
  backgroundx: linear-gradient(180deg, #142C49, white);
}

header {
      border-top:2px solid #ffd502;
      position: fixed;
      top:0;
      width:97.8%;
      z-index: 1;
      margin: 0px auto;
      padding: 0px;
      background: #3f3e41;
      box-sizing:border-box; 
      border-radius: 0px;
      box-shadow: 5 5px 5px rgba(0,0,0,5);
      margin-left: 0px;

      }

nav {
      float:right;
      height:50px;  
      }

.clearfix {
      clear: b;
      }

nav ul li{
      list-style: none;
      }      

nav ul {
      margin: 0px;
      padding: 50px;
      display: flex;
      }



nav ul li a {
      display: block;
      width:160px;
      padding: 10px 30px;
      text-decoration:none;
      color: white;
      }

nav ul li a:hover {
      cursor: pointer;
      display: block;
      color: #FF5F13;
      transition: 0.5s;
      height:45px;
      text-decoration: none;
      }

nav.menu ul li {
      display:block;
      }

nav.menu ul li a {
      display: block;
      padding: 0px 0px;

      }

#menu {
      padding: 0px 0px;
      margin: 0px 0px;
      margin-top: 0px;        
      }       

.dropdown-item {
      overflow: hidden
      color:black;
      padding: 10px 0px;
      width:100%;
      border-bottom: 1px solid #DCDCDC;       
}   

a.dropdown-item:hover {
      color:black;
      padding: 10px 0px;
      width:100%;
      background:#EBEBEB;
      border-bottom: 1px solid #DCDCDC;

      }

@media (max-width: 1200px) {
  header {
      margin:0px;
      background: #142C49;
      height: 50px;
      }
      }

@media (max-width: 768px){
.menu-toggle{
      display: block;
      width: 50px;
      height: 47px;
      margin: 0px;
      background: #142C49;
      float: right;
      cursor:pointer;
      text-align: center;
      font-size: 32px;
      color: #faa315;
      }

img.img  {
      width:100%;
}

.menu-toggle:before {
      content:'\f0c9';
      font-family: fontAwesome;
      line-height: 40px;
      }
.menu-toggle.active:before {
      content:'\f00d';
      line-height: 40px;
      }

.clearfix {
      clear: both;
      }

nav ul.navbar-nav {
      display:none;
      }

nav {
      
      display:block;
      height: 0px;
      width: 100%;
      }

nav.active {
      margin-top: 5px;
      display: block;
      padding: 0px 0px;
      text-decoration:none;
      width: 100%;
      height: 250px;
      background: #faa315;
      xborder:1px solid #DCDCDC;
      }

nav ul {
      margin: 0px;
      padding: 0px;
      display: none;
      }

nav.active ul {
      display: block;
      }

nav.active ul li a {
      margin-left:0px;
      border-bottom: 1px solid #DCDCDC;
      padding: 10px 10px;
      width: 100%;
      text-align: : center;
      color:#142c49;
      
      }

nav ul li a:hover {
      cursor: pointer;
      padding: 10px 10px;
      text-align: : center;
      width: 100%;
      background: #DCDCDC;
      color:#FF6600;
      transition: 0.9s;
      border-bottom: 1px solid #DCDCDC;
      }

.dropdown-item {
      color:blue;
      padding: 10px 10px;
      border-bottom: 1px solid #DCDCDC;
      background:white;        
}   

a.dropdown-item:hover {
      color:#ff5e13;
      padding: 10px 10px;
      border-bottom: 1px solid #DCDCDC;
      background:#EBEBEB;
     
      }


#linkri {

  display: block;
  margin-left: auto;
  margin-right: auto;

}
      }
      }      

.card-title {
      text-decoration:none;
      font-size: 14px;
      color:#F75B00;
      font-weight:bold;
      text-align:left;
      line-height: 5px;      
      }   

.card-title h5 {
      text-decoration:none;
      font-size: 14px;
      color:#F75B00;
      font-weight:bold;
      text-align:left;
      line-height: 5px;
      }   

.card-text a {
     text-decoration:none;
     color:#012233;
     line-height: 5px  
     }

.card-text a:hover {
     text-decoration:none;
     background:white;
     color:#F75B00;
     font-weight:;
     line-height: 5px 
     }

.widget-title {
  border-bottom: 2px solid #3C70FF;
  padding-bottom: 4px;
}

#pilar2a {
      border-left:0px solid #DCDCDC;
      padding:5px;
      margin-left:0px;
      margin-top:0px;
      }
.berita {
      margin-top: 0px;
      margin-left:0px;
      background: #F7F7F7;
      border-radius:7px;
      height:300px;
      text-align: left;
      border: 1px solid #DCDCDC;
      padding: 0px;
      color: white;
      padding-left: 0px;
      padding-right:0px;
      padding-top:0px;
      color:#000000;
      } 

.card-title h5 {
      margin-top:0px;
      font-size: 14px;
      text-decoration:none;
      color:#F75B00;
      font-weight:bold;
      text-align:left;
      line-height: 0px;
      }

      .card-title {
      text-decoration:none;
      font-size: 15px;
      color:#F75B00;
      font-weight:bold;
      text-align:left;
      margin-top:  10px;
      padding-left: 10px;
      padding-right:10px;
      padding-top:0px;
      line-height: 10px;
      }  

      #artikel {
      margin-top: -10px;
      background: white;
      min-height: 400px;
      padding:10px;
      border:1px solid #DCDCDC;
      box-shadow: 1px 1px 7px #DCDCDC;
      border-radius: 7px;
      
    }

#pilar1 {
      padding-left: 0px;
      padding-right:30px;
      }

#footer{
      bottom: 0;
    width: 97.8%;
    position: fixedx;
    
  } 
  .responsive {
  width: 100%;
  height: auto;
}