@charset "utf-8";
/* CSS Document */

html, body, p {font-family: Roboto,"Helvetica Neue",sans-serif; font-size:16px;color:#111;}
p {line-height:25px;margin-bottom:25px;}
.line {border-top:1px solid #ccc; display:block; margin:20px 0px;}

td, th {padding:10px 5px;}

table p {font-size:13px;line-height:normal;margin-bottom:10px;text-align:left!important;}

/* TYPO */
h1 {font-size:36px;text-transform:uppercase;}
h1, h2 {color:#ef6c00}
h2 {font-size:24px;line-height:32px;}
h3 {color:grey;font-size:1.2em;}
h2, h3 {font-weight:bold;}
#latest-myeo h2 {color:#000;}
#latest-myeo h3 {margin-bottom:20px;}

/* PADDING & MARGIN */
.nomar-rl {margin-left:0px;margin-right:0px}
.nomar-tb {margin-top:0px;margin-bottom:0px;}
.nopad {padding-left:0;padding-right:0;}
.nopadleft {padding-left:0px}
.padleft10 {padding-left:10px}
.padleft20 {padding-left:20px}
.padleft30 {padding-left:30px}
.padleft40 {padding-left:40px}
.padleft50 {padding-left:50px}
.padright10 {padding-right:10px}
.padright20 {padding-right:20px}
.padright30 {padding-right:30px}
.padright40 {padding-right:40px}
.padright50 {padding-right:50px}
.marleft10 {margin-left:10px}
.marleft20 {margin-left:20px}
.marleft30 {margin-left:30px}
.marleft40 {margin-left:40px}
.marleft50 {margin-left:50px}
.marright10 {margin-right:10px}
.marright20 {margin-right:20px}
.marright30 {margin-right:30px}
.marright40 {margin-right:40px}
.marright50 {margin-right:50px}
.marbot10 {margin-bottom:10px}
.marbot20 {margin-bottom:20px}

/* LAYOUT */
#header {margin:20px 0px 10px 0px;}
#dropbox {margin-bottom:10px;}
#youtube-button {position:relative;margin-top:-50px;}
#content {padding:0 15px;}
#content a {color:#ef6c00;text-decoration:none;}
.btn1 {background-color:#ef6c00;color:#fff;padding:10px;border-radius:none;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);font-size:12px;display:inline-block;text-decoration:none;min-width:88px;text-align:center;}
a.btn1:hover, a.btn1:focus {color:#000;text-decoration:none;border:none;}
.btn2 {background-color:#666666;color:#fff;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);font-size:12px;margin:10px 0 0;border-radius:0 40px 40px 0; line-height:38px;padding:10px}
a.btn2:hover {color:#ccc;text-decoration:none;}
#opening-text p, #opening-message p {text-align:justify;line-height:25px;margin-bottom:25px;}
#opening-message p {font-family:"Comic Sans MS", Arial, sans-serif;}
#signature p {line-height:normal;}
.life {font-family:'Times New Roman', Times, serif;font-weight:bold;font-style:italic;color:#EF6C00;}
.md {font-weight:bold; font-size:150%; font-family:'Times New Roman', Times, serif; font-style:italic;}
#latest-learning {border-right:1px solid #ccc;}
.home-learning .row {margin-bottom:10px}
.event-d {background-color:#ef6c00;color:#fff;font-size:4em;font-weight:bold;text-align:center;}
.event-my {background-color:#000;color:#fff;font-size:1.5em;font-weight:bold;text-align:center;}
.event-desc p {margin-bottom:10px;}
.event-content {margin-bottom:20px;}
.justified, justified p {text-align:justify;}
.img-event {border-bottom:10px solid #ef6c00;}
.mp-item {margin-top:40px;}
.mp-item p {margin-bottom:15px;}
.mp-img {text-align:center;border-bottom:5px solid #ef6c00;}
.mp-img img {margin-bottom:10px}
.mp-logo {margin-top:50px;}
.home-eo-date {background-color:#EF6C00; color:#fff; padding:5px;}
.home-eo-desc {padding-left:0px;}
.myeo-title {text-align:center;margin-bottom:10px;}
#footer-content {background-color: #ccc;padding:15px;}
#footer-content table {border:none; font-size:14px;font-weight:bold;border-collapse:collapse;}
#footer-content table tr td {padding:5px}
#new-member {border-right:1px solid #669900;}
#footer {background-color:#000;color:#fff;padding:5px;text-align:center;margin-top:20px;margin-bottom:30px;}
#contact-box {background-color: black;border-bottom: 10px solid #ef6c00;color: white;padding: 20px;}
.mp-info a {text-decoration:none;color:#ef6c00;}
.mp-info a:hover {text-decoration:underline;}
.mp-title {font-size:20px;color:#ef6c00;margin:20px 0px;}
.books-info span {font-weight:bold;color:#ef6c00;}
.books-desc {margin-top:15px;}
.books-desc p {margin-bottom:0px;line-height:25px;}
.book-item h3 {margin-top:0px;}
.question {color: #ef6c00;font-size: 1.5em;font-weight: bold;}
.suggestion {text-align:center;}
#maincontent p {text-align:justify;}
#sidecontent a {color:#fff;}
#registrasi {margin:20px 0;display:block;line-height:36px;background-color:#333;}
#facebook {margin:20px 0;display:block;line-height:36px;background-color:#003399;}
#mailus {margin:20px 0;display:block;line-height:36px;background-color:#CC0000;}



/* NAVBAR */
nav {font-size:14px;}
.navbar-default {background:none;border:none;}
.navbar-default .navbar-nav > li > a {color:#fff;}
.navbar-default .navbar-nav > li.active > a {background-color:#ef6c00;color:#fff;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);}
.navbar-default .navbar-nav > li > a:hover {background-color:#CCC;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);}
.dropdown-menu {background-color:#000;}
.dropdown-menu > li > a {color:#fff;}

/* FORM */
.group        { 
  position:relative; 
  margin-bottom:20px; 
}
input, textarea         {
  font-size:16px;
  color:#333;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #eee;
}
input:focus, textarea:focus     {outline:none; border-bottom:2px solid #ef6c00;}
input:required, textarea:required {box-shadow:none;}

input[type=submit] {background-color:#ef6c00;padding:10px;width:88px;font-size:12px;color:#fff;border:0px;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26);float:right;}

/* LABEL */
label          {
  color:#999; 
  font-size:16px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
}

/* active state */
input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~ label     {
  top:-10px;
  font-size:12px;
  
}
input:focus ~ label, textarea:focus ~ label {color:#ef6c00;}

/* accordion menu by reinhard  */

#accordion ul{
	display: none;
}
#accordion ul li a {
	font-size:12px;
}


@media (max-width: 767px) {
  .home-eo-desc {padding-left:15px;}
  #new-member {border:0px;}
  .mp-logo img {width:100%;}
}
@media (min-width: 768px) and (max-width: 991px) {
  
}
@media (min-width: 992px) and (max-width: 1199px) {
  
}
@media (min-width: 1200px) {
  .container {
    width: 1030px;
  }
}