html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: 'PT Sans', sans-serif;
  overflow-x: hidden;
}
body>section {  
  padding: 0 0 100px 0;
}

body>section.home {  
  padding: 0;
}
.clearfix {  
  display: block;
  clear: both;
}
.wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.full-fluid {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
}
.makeCenter {
    display: table;
    margin: 0 auto;
}
.textCenter {
  text-align: center;
}
a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #444444;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #000000;
  text-decoration: none;
}
.pad0 {
  padding:0px 0;
}.pad10 {
  padding:10px 0;
}.pad20 {
  padding:20px 0;
}.pad30 {
  padding:30px 0;
}.pad40 {
  padding:40px 0;
}.pad50 {
  padding:50px 0;
}.pad60 {
  padding:60px 0;
}

.margin0 {
  margin-top:0px;
}.margin10 {
  margin-top:10px;
}.margin20 {
  margin-top:20px;
}.margin30 {
  margin-top:30px;
}.margin40 {
  margin-top:40px;
}.margin50 {
  margin-top:50px;
}.margin60 {
  margin-top:60px;
}
img {
  max-width:100%;
}

/****************Header************/
div.logo {
  float: left;
}
#topMenu {
  float: right;
}
#topMenu nav {
}
#topMenu nav ul {
  list-style: none;
  margin:0; 
  padding: 10px 0 0 0;
}
#topMenu nav ul li {
  display: inline-block;
}
#topMenu nav ul li a{  
  display: inline-block;
  color: #320049;
  font-size: 18px;
    padding: 14px;
    background-color: #00b050;
    font-weight: bold;
}
#topMenu nav ul li a:hover, 
#topMenu nav ul li a:active{  
  color: #320049;
  text-decoration: underline;
}
#topMenu nav ul li a.regButton{  
  font-family: 'Open Sans', sans-serif;
  color: #444444;
  font-size: 14px;   
    background: green;
    color: #ffffff;
    padding: 17px;
}
#topMenu nav ul li a.regButton i{  
  font-size: 16px;
}

#topMenu nav ul li a.regButton:hover, 
#topMenu nav ul li a.regButton:active{ 
  color: #333333;
}
#mainNav {
  background-color:#b686da;
  position: relative;
}
#mainNav nav {
  display: table;
  margin: 0 auto;
}
#mainNav nav ul {
  list-style: none;
  margin:0;
}
#mainNav nav ul li {
  display: inline-block;
  position: relative;
}
#mainNav nav ul li a{  
  display: inline-block;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  padding:14px 20px;
  position: relative;
}
#mainNav li ul {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mainNav li:hover ul {   display: block;} 
#mainNav li ul li a {
    color: #320049;
    padding: 10px;
    min-width: 220px;
    text-decoration: none;
    display: block;
    font-size:14px;
}
#mainNav nav ul li ul a:hover,
#mainNav nav ul li ul a:active {background-color: #cccccc;
    color: #320049;}
#mainNav nav ul li a:hover, #mainNav nav ul li a:active{  
  color: #cccccc;
}
#mainNav nav ul li a.donation_button {
  background-color: #00b050;
}
#mainNav nav ul li a.donation_button i{  
  font-size: 14px;
  color: #ff3f3f;
}
#mainNav nav ul li a.subMenu:hover:after {
    content: "";
    display: block;
    border: 12px solid transparent;
    border-bottom-color: #ffffff;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -12px;
}
/****************Header************/

/***************Homepage*****************/
#carousel-example-generic {
  border-bottom:1px solid #dddddd;
}
.carousel-control {
  top: 50%;
  margin-top: -60px;
  width: 100px;
  height: 60px;
  background-color:#320049;
}
.carousel-caption {
  left:10%;
  top: 20%;
  bottom: inherit;
  max-width: 400px;
  padding: 40px;
  background-color: rgba(50,0,73,0.9);
  filter: alpha(opacity=90);
  opacity: 0.9;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
#ubatMenu {
  text-align: center;
  margin: 0 0 0 30px;
}
#ubatMenu h2 {
  font-size: 40px;
  font-weight: bold;
  color: #320049;
}
#ubatMenu p {
  text-align: center;  
  color: #000000;
  font-size: 18px;
  font-weight: bold;
}
#ubatMenu nav {

}
#ubatMenu nav ul {
  list-style: none;
  margin: 30px 0 0 0;
  padding: 0;
}
#ubatMenu nav ul li {
  display: inline-block;
  padding: 10px 30px;
}
#ubatMenu nav ul li a {
  color: #320049;
  font-size: 14px;
}
#ubatMenu nav ul li a i {
  color: #ff3f3f;
  font-size: 35px;
  margin: 0 0 15px 0;
}
#ubatMenu nav ul li a:hover,
#ubatMenu nav ul li a:active {

}
.home_projects {
  background: url('../img/home_projects.jpg') center center no-repeat;
  display: table-cell;
  padding: 50px;
  float: none;
  color: #000000;
}
.home_projects h3{
  margin:0 0 10px 0;
  font-size: 18px;
  color: #000000;
  padding: 0 0 5px 0;
  font-weight: bold;
  border-bottom: 2px solid #000000;
  display: inline-block;
}
.ubat_mission {
  background-color: #5d67b4;
  display: table-cell;
  padding: 50px;
  float: none;
  color: #ffffff;
}
.ubat_mission h3{
  margin:0 0 10px 0;
  font-size: 18px;
  color: #ffffff;
  padding: 0 0 5px 0;
  font-weight: bold;
  border-bottom: 2px solid #ffffff;
  display: inline-block;
}
.full-fluid .table {
  display: table;
  border-collapse: separate;
  margin: 0;
}
.full-fluid .row {
  display: table-row;
}

.register_volunteer {
  background: #981f44;
  display: table-cell;
  padding: 50px;
  float: none;
  color: #ffffff;
}
.register_volunteer h3{
  margin:0 0 10px 0;
  font-size: 18px;
  padding: 0 0 5px 0;
  font-weight: bold;
  border-bottom: 2px solid #ffffff;
  display: inline-block;
}
.home_blog {
  background: url('../img/home_blog.jpg') center center no-repeat;
  display: table-cell;
  padding: 50px;
  float: none;
  color: #000000;
}
.home_blog h3{
  margin:0 0 10px 0;
  font-size: 18px;
  padding: 0 0 5px 0;
  font-weight: bold;
  border-bottom: 2px solid #000000;
  display: inline-block;
}
.contactPage .error{
  color: #ff0000;
  font-size: 14px;
}
/****************Homepage****************/

/****************About Us****************/
.pageTitle {
  padding: 40px 0 0 0;
}
.pageTitle h3{  
  font-size: 20px;
  color: #000000;
  padding: 0 0 3px 0;
  font-weight: bold;
  border-bottom: 2px solid #000000;
  display: inline-block;
}
.pageTitle h5.subtitle{  
  font-size: 20px;
  color: #ff3f3f;
  font-weight: bold;
}
.headline {
  padding: 30px;
  background-color: #eeeeee;
  margin: 40px 0;
}
.headline label{
  color: #320049;
  font-size: 18px;
  font-weight: bold;
}
.headline p{
  font-size: 14px;
}
.page_content {
  margin: 0;
}
.page_content label{
  color: #320049;
  font-size: 18px;
  font-weight: bold;
}
.page_content p{
  font-size: 14px;    
  line-height: 24px;
}
/****************About Us****************/

/****************Store ****************/
#store_columns .buynow{
  background-color: green;
  color: #ffffff;
  padding: 6px 15px;
  font-size: 18px;
  border-radius: 10px;
}
#store_columns .storeRow {
  border-bottom: 1px solid #aaaaaa;
  max-width: 900px;
}
#store_columns img {
  margin-right: 20px;
}
#store_columns label {
  font-size: 20px;
  display:inherit;
}
/****************Store****************/
/****************User ****************/
#user_columns nav{
  width:500px;
  
}#user_columns nav ul{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;  
}#user_columns nav ul li{
  display: inline-block;  
}#user_columns nav ul li a{
  padding: 10px 15px;
  font-size: 16px;
  color: #ffffff;
  background-color: #320049;
}#user_columns nav ul li a:hover, #user_columns nav ul li a.active{  
  color: #320049;
  background-color: #dddddd;
}
/****************User****************/

/****************Profile ****************/
.pin {
  display: inline-block;
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
}
.pin a {
  font-weight: bold;
  color: #000000;
  font-size: 14px;
  display: inline-block;
  padding-bottom: 10px;
  text-decoration: underline;
}
.pin a:active,.pin a:hover {
  color: #aaaaaa;
}

.pin label {
  color: #320049;
  font-size: 18px;
  font-weight: bold;
}

.pin img {
  width: 100%;
  margin-bottom: 5px;
}

.pin p.highlight {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
}
.pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}
#profile_columns {
  list-style: none;
  margin: 0;
  padding: 0;
}

#profile_columns .pin {
  display: inline-block;
  margin: 10px 0;
  padding: 15px;
  background-color: #eeeeee;
  width: 33%;
  vertical-align: top;
}
#profile_columns .pin a {
  font-weight: bold;
  color: #000000;
  font-size: 14px;
  display: inline-block;
  padding-bottom: 10px;
  text-decoration: underline;
}
#profile_columns .pin a:active,#profile_columns .pin a:hover {
  color: #aaaaaa;
}

#profile_columns .pin label {
  color: #320049;
  font-size: 18px;
  font-weight: bold;
}

#profile_columns .pin img {
  width: auto;
  display: table;
  margin: 0 auto;   
  max-width: 380px;
  max-height: 350px;
}

#profile_columns .pin p.highlight {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
}
#profile_columns .pin p.description {
  text-align: justify;
  font-size: 14px;
}

#profile_columns .pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}

@media (max-width: 600px) {
  #profile_columns .pin{
    width: 50%;
    width: auto;
    height: 600px;
  }
  #profile_columns .pin img {
    width: auto;
    display: table;
    margin: 0 auto;   
    max-width: 100%;
    max-height: 350px;
  }
}

@media (max-width: 480px) {
  #profile_columns .pin{
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
  }
}
/****************Profile****************/

/****************Contact****************/
.contactPage p{
  line-height: 20px;
}
.contactPage p i {
  color: #ff3f3f;
  width: 20px;
  font-size: 16px;
}
.contactPage label {
  color: #000000;
}
.form-control {
  background-color: #eeeeee;
  border: 1px solid #aaaaaa;
}
textarea.form-control {
  min-height: 100px;
}
.formbutton {
  background-color: #ff3f3f;
  color: #eeeeee;
  padding: 6px 20px;
  font-weight: bold;
}
/****************Contact****************/
/****************Volunteer****************/
.volunteerPage {
}
.volunteerPage div {  
  padding-bottom: 15px;
  border-bottom: 2px solid #cccccc;
  width: 48%;
  margin: 0 2% 0 0;
}
.volunteerPage p{
  line-height: 20px;
}
.volunteerPage p.role {
  font-size: 18px;
}
.volunteerPage p.vol_name {
  font-size: 15px;
}
.volunteerPage p.vol_details {
  line-height: 30px;
}
.volunteerPage p.vol_details i {
  color: #ff3f3f;
  width: 20px;
  font-size: 16px;
}
.volunteerPage label {
  color: #000000;
}

@media (max-width: 767px) {
  .volunteerPage  div {    
    width: 98%;
    margin: 0 2% 0 0;
  }
}
/****************Volunteer****************/

/****************Blog****************/
#blog_columns {
}

#blog_columns a.edit-blog-btn{
  font-size:25px;
  background-color:#dddddd;
  padding:5px 10px;
  position: absolute;
  right: 30px;
}

#blog_columns .pin {
  display: inline-block;
  margin: 0 2px 15px;
  padding: 15px;
  border-bottom:1px solid #aaaaaa;
  position: relative;
  width:98%;
}
#blog_columns .pin label {
  color: #320049;
  font-size: 18px;
  font-weight: bold;
}

#blog_columns .pin img {
  width: 100%;
  margin-bottom: 5px;
}

#blog_columns .pin p.highlight {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 10px;
}

#blog_columns .pin p {
  font: 21px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}

@media (max-width: 480px) {
}
/****************Blog****************/
/****************Project****************/
#project_columns {
  -webkit-column-count: 1;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 1;
  -moz-column-gap: 10px;
  -moz-column-fill: balance;
  column-count: 1;
  column-gap: 15px;
  column-fill: balance;
  position: relative;
}

#project_columns .pin {
  display: inline-block;
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 15px;
  width: 100%;
  border-bottom: 1px solid #000000;
  position: relative;
}

#project_columns .pin label {
  color: #320049;
  font-size: 18px;
  font-weight: bold;
}

#project_columns .pin img {
  width: 100%;
  margin-bottom: 5px;
}

#project_columns .pin p.highlight {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
}

#project_columns .pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}
#project_columns .pin div {
  border: 1px solid #aaaaaa;
  background-color: #eeeeee;
  margin: 20px 0;
  padding: 10px 15px;
}
#project_columns .pin span.completed {
  color: #019f17;
}
#project_columns .pin span.future {
  color: #ff3f3f;
}
#project_columns .pin span.inprogress {
  color: #ff7e00;
}
@media (max-width: 480px) {
  #project_columns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}
/****************Project****************/

/****************Footer*****************/
footer {
  background-color: #eeeeee;
}
footer nav.footer_menu{
  position: relative;
}
footer nav.footer_menu ul{
  list-style: none;
  margin: 0;
  padding: 0 20px;
}
footer nav.footer_menu ul li{
  padding: 0 7px;
  display: inline-block;
}
footer nav.footer_menu ul li a{
  color: #444444;
  font-size: 12px;
}
footer nav.footer_menu ul li a:hover{
  color: #000000;
}
footer nav.social_button{
  position: relative;
  padding: 0 40px 0 0;
}
footer nav.social_button ul{
  list-style: none;
  margin: 0;
}
footer nav.social_button ul li{
  padding: 0 7px;
  display: inline-block;
}
footer nav.social_button ul li a{
  color: #444444;
  font-size: 12px;
}
footer nav.social_button ul li a:hover{
  color: #000000;
}
footer p {
  margin: 20px 0 0 42px;
  display: block;
  font-size: 12px;
}
footer div.full-fluid .row {
  display: block;
  padding: 0 30px;
}
#uvon {
  background-color: #320049;
  color: #ffffff;
  letter-spacing: 2px;
  padding: 5px 10px;
}
/****************Footer*****************/

/****************User*****************/
input.form-user {
  border: none;
  border-bottom: 1px solid #cccccc;
  outline: none;
  width:350px;
}
select.form-user {
  border: none;
  border-bottom: 1px solid #cccccc;
  outline: none;
  width:350px;
}
#edit-user-detail div.row {
  padding:5px 0;
}
#edit-user-detail div.row div{
 vertical-align: top;
}
textarea.form-user {
    resize: none;
  border: 1px solid #cccccc;
  outline: none;
  width:350px;
  margin-top:-20px;
  min-height: 100px;
}
#user_columns ol {
  padding:10px 30px;
  font-size:16px;
}
#user_columns ol a {
  text-decoration: underline;
}
/****************User*****************/

/****************Blogs*****************/
.note-group-select-from-files {
  display: none;
}
/*.note-btn[data-original-title="Picture"] {
  display: none;
}*/
#add-modal .modal-dialog,
#edit-modal .modal-dialog {
  width:760px;
}
/****************Blogs*****************/