@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Halant|Raleway:700');

body {
	font-family: 'Open Sans', sans-serif;
 	/*padding-top: 160px;*/
}
span {
    /*font-family: initial !important;*/
    font-size: 14px !important;
}
ul {
    margin: 0px;
    padding: 0px 0px 10px 10px;
}
li {
  text-align: left;
}
.scope ul {
  list-style: none !important;
  padding: 0;
}
.scope ul li {
  padding-left: 1.3em;
  list-style-type: none;
}
.scope ul li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}
.header{
	background: #ffffff;
	box-shadow: rgba(0,0,0,.117647) 0 1px 3px;
	z-index: 99;
/*	position: fixed;
	top: 0;
	left: 0;*/
	width: 100%;
	padding: 10px 10px 0 10px;
	box-sizing: border-box;
	transition: .5s;
}
.contentheadXXX {
    background-color: #2b9b39;
    padding: 5px;
}
.logo {
    height: 100%;
    min-height: 40px;
    min-width: 100px;
    /*display: table-cell;*/
    vertical-align: middle;
}

.navbar-brand {
	height: auto;
}
.navbar-text{
	font-family: 'Raleway', serif;
	color: #414141;
	width: 50%;
	font-size: 30px;
	line-height: 16px;	
	display: contents;
}
.navbar-text h4{
  margin-top: 26px;
}
.navbar-header{
  width: 50%;
}
.navbar-header > span{
	font-family: 'Halant', serif;
	font-weight: bold;
	padding-top: 10px;
	font-size: 16px !important;
	display: contents;
	color: #414141;
}
.login{
  width: auto;
  padding-top: 28px;
  color: #000;
}
.logo > h4{
	color: #272727;
}
.logo img{
	width:  100px;
}
.black{
	background: #ffffff;
	box-shadow: rgba(0,0,0,.117647) 0 1px 3px;
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px 10px 0 10px;
	box-sizing: border-box;
	transition: .5s;
	height: 140px;
}
.black > .container > .logo img{
	width: 80px;
}
.nav > li a{
	color: #2e2e2e;
	font-family: 'Open Sans', sans-serif;
}
.navbar-toggle{
	background: #ddd;
}
.icon-bar {
   background-color:#fff !important;
}
.header, .navbar-toggle, .icon-bar{
	color: #fff;
}

#contact{
	padding-bottom: 20px;

}
.bg-dark {
    background-color: #bf5f18 !important;
    color: #fff;
}

.content{
	line-height: 24px;
	padding-top: 25px;
	min-height: 200px;
}
.sidebar{
	background-color: #f0f0f0;
	padding: 10px;
	margin-top: 15px;
	border: 1px solid #ddd;
}

.sidebar2{
	background-color: #c9ecff;
	padding: 0px 10px 30px 20px;
	margin-top: 50px;
	border: 1px solid #ddd;
}
.sidebar2 li {
    padding: 5px 0px;
}


.carousel-inner > .item > img{
	width: 100%;
	height: auto;
}
.speaker {
  /*width: 220px;*/
 min-height: 300px;
  float: left;
  font: bold 18px arial;
  text-align: center;
  margin-bottom: 50px;
}
.speaker a {
  text-decoration: none;
}
.speaker a:hover {
  text-decoration: none;
}
.speaker img {
  margin-bottom: 10px;
  height: 200px;
  border-radius: 100em;
border: 5px solid #fff;
box-shadow: 3px 5px 5px #888888;
}
.speaker span {
  margin-top: 10px;
  font-size: 12px;
  color:grey;
}
.speak {
  width: 100px;
  height: 130px;
  float: left;
  font: bold 12px arial;
  text-align: center;
}
.speak img {
  margin-bottom: 10px;
  height: 80px;
  border-radius: 100em;
border: 2px solid #fff;
box-shadow: 3px 5px 5px #888888;
}

.gallery img {
  /* margin-bottom: 10px; */
  height: 160px;
  /* border: 5px solid #fff;
  box-shadow: 3px 5px 5px #888888; */
}

.modal-title img {
    border: 0 solid #fff;
    border-radius: 37em;
    box-shadow: 3px 3px 5px #888888;
    height: 80px;
    margin-bottom: 10px;
    margin-right: 15px;
}

/* SEARCH FORM */

.form{
display: inline-block;


}

#custom-search-input{
    padding: 3px;
    border: solid 1px #E4E4E4;
    border-radius: 6px;
    background-color: #fff;
}

#custom-search-input input{
    border: 0;
    box-shadow: none;
}

#custom-search-input button{
    margin: 2px 0 0 0;
    background: none;
    box-shadow: none;
    border: 0;
    color: #666666;
    padding: 0 8px 0 10px;
    border-left: solid 1px #ccc;
}

#custom-search-input button:hover{
    border: 0;
    box-shadow: none;
    border-left: solid 1px #ccc;
}

#custom-search-input .glyphicon-search{
    font-size: 23px;
}


/* END OF SEARCH FORM */

@media screen and (max-width: 991px ){
	body{
		/*padding-top: 350px;*/
	}
  .navbar-header{
    width: auto;
  }
	.navbar-text{
		width: auto;
	}
}

.about{
	font-family: 'Open Sans', sans-serif;
	background-color: #c7f3f8;
	padding: 0px 25px 30px 25px;
	font-size: 14px;

}
.about > h2{
	padding-top: 15px;
}
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}
/*Footer*/
.footer{
	background-color: #000;
	height: auto;
	width: 100%;
	color: #fff;
	padding-top: 20px;
}

.title {
background-color: #777;
padding: 50px 0px;
}
.title h2 {
font-family: "Raleway";
font-size: 30px;
color: #fff;
text-align: center;
}
.title h2::after {
    content: "";
    display: block;
    height: 2px;
    width: 50px;
    background-color: orange;
    margin-top: 22px;
    position: absolute;
    left: 48%;
}
.section-heading{
  margin-top: 50px;
  margin-bottom: 50px;
}
.section-heading::after{
      content: "";
    display: block;
    height: 2px;
    width: 50px;
    background-color: orange;
    margin-top: 17px;
    position: absolute;
    left: 46%;
}


.keynote-heading{
  font-weight: bold;
  position: relative;
  text-align: center;
  margin: 40px auto;
  max-width: 600px;
  color: orange;
  font-style: italic;
  z-index: -1;


}
.keynote-heading::before{
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background: #ccc;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -2;
}
.keynote-heading::after{
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background: #ccc;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: -2;
}
.keynote-heading > span{
  background: #fff;
  font-size: 20px !important;
}


.baris-webinar{
  margin-top: 30px;
}
.deskripsi-webinar{
  margin-top: 20px;
  color: #787878;
  text-align: justify;
}

* {
  box-sizing: border-box;
}

.flex {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  object-fit: cover;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.btn-load-more {
  font-size: 14px;
  color: #fff;
  background-color: #00712c;
  border: 0;
  outline: 0;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
}