@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body { 
    
    

    
    
    
    font-family: 'Ubuntu', sans-serif;    background: url('bg.png');}.social-media1{width:40px; height:40px; background-color:#ccc; border-radius:100px; float:left; margin:10px; padding:8px;}

.social-media1:hover {width:40px; height:40px; background-color:#f4f4f4; border-radius:100px; float:left; margin:10px; padding:10px;}



.social-media2{width:40px; height:40px; background-color:#c75307; border-radius:100px; float:left; margin:10px; padding:10px;}

.social-media2:hover{width:40px; height:40px; background-color:#c75307; border-radius:100px; float:left; margin:10px; padding:10px;}

.social-media3{width:40px; height:40px; background-color:#c44209; border-radius:100px; float:left; margin:10px; padding:10px;}

.social-media-footer{width:40px; height:40px; border:1px solid #fff; border-radius:100px; float:left; margin:10px; padding:10px;} .social-media2:hover{width:40px; height:40px; background-color:#38a807; border-radius:100px; float:left; margin:10px; padding:10px;}

.social-media-header{width:40px; height:40px; border:1px solid #ccc; border-radius:100px; float:left; margin:10px; padding:10px;}


.about-keystaff-wrap{border-bottom:2px solid #ccc; overflow: auto; margin-bottom:15px; border-radius: 10px 10px 10px 10px; background: #fff;  background: -webkit-linear-gradient(to top, #e7ffe1, #fff); background: linear-gradient(to top, #e7ffe1, #fff); border-bottom:2px solid #e7ffe1;    border-bottom: 2px solid #b2e6a6;} .footer-link{    list-style-type: none;    margin:0px;    padding: 0px;}


.footer-link-li{ 
    margin-bottom: 5px;
    padding: 8px;
    background-color: #c75307;
}

.footer-link-li:hover
{
    background-color: #d55a0a;
}

@media screen and (max-width: 1000px) {
  .only-pc {
    visibility: hidden;
    clear: both;
    display: none;
  }
}


@media only screen 
  and (min-width: 680px) 
  and (max-width: 1200px) {

      
        .only-ipad {
    visibility: hidden;
    clear: both;
    display: none;
  }
      
}


@media screen and (min-width: 1000px) {
  .only-mobile {
    visibility: hidden;
    clear: both;
   
    display: none;
  }
}




.header-design {

width:100%; height:120px;
background-color:#fff;
margin: 0px;
}



.header-design-mobile {

width:100%; min-height:90px;
background-color:#fff;

    }











.footer-wrap{    background:#f3731f; padding-bottom:80px; padding-top:10px; color:#fff; }

.footer-title { border-bottom: 2px solid #fff; padding-bottom: 5px; } 

.donor-logo:hover
 { background-color:#d5eeb4; border-radius: 20px; } 

.section-home { opacity: 0.8;  width:200px; height:200px; background-color:#f47320; border-radius:100px; margin-left:auto; margin-right:auto; text-align:center; color:#fff; } 

.section-home:hover { opacity: 0.8;
 width:200px; height:200px; background-color:#034da2; border-radius:100px; margin-left:auto; margin-right:auto; text-align:center; color:#fff; } .home-news { border-bottom:2px solid #fff; margin-bottom: 10px; } .home-news:hover
 { background: #fff;  /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #c3fab6, #fff);  /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #c3fab6, #fff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ border-bottom:2px solid #c3fab6; } .proz { transition: transform .2s; /* Animation */ margin: 0 auto;
 } .proz:hover { transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } 

.navbar-dropmenu 
{ overflow: hidden; 
background: rgba(0, 0, 0, 0.2); 
border-radius:0px;
 } 

.navbar-dropmenu a { float: left; font-size: 17px; font-weight:  color: #333; text-align: center; padding: 0px 6px; text-decoration: none; } .dropmenu { float: left; overflow: hidden; } 

.dropmenu .dropbtn { font-size: 16px; border: none; outline: none; color: #fff; padding: 14px 16px; background-color: inherit; font-family: 'Ubuntu', sans-serif; margin: 0; } .navbar-dropmenu a:hover, .dropdown:hover 

.dropbtn { background-color: #034da2; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none;
 color: black; padding: 12px 16px; text-decoration: none; display: block;
 text-align: left; }

.dropdown-content a:hover { background-color: #ddd; } .dropmenu:hover .dropdown-content { display: block;
 } /* Slider */
 .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list
 { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus
 { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track
 { position: relative; top: 0;
 left: 0; display: block; } .slick-track:before, .slick-track:after { display: table;
 content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide
 { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right;
 } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none;
 } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block;
 } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block;
 height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none;
 } #loader { position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px;
 height: 120px;
 -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin {
 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Add animation to "page content" */ .animate-bottom {
 position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @-webkit-keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 } } @keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } } #myDiv {
 display: none;
 text-align: center; } 




.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}