* {
    margin: 0;
    padding: 0%;

}


/* NAV1*/

/* NAV2 start*/
/* .navbar {
    margin-top: 1%;
    margin-top: 1%;

}

.container {
    margin-top: -5%;
}

.logo {
    width: 13%;
    margin-left: -26px;
}

.menu {
    line-height: 60px;
}

.menu ul {
    list-style-type: none;
    display: flex;
    margin-left: 300px;
}

.menu ul li {
    padding: 0%;
    font-weight: bold;
    margin-left: 15%;
}

.menu ul li a {
    color: #45ac34;

}

.menu ul li a:hover {
    transition: all 0.3s esae 0s;
    color: #2b801e;
} */

/* NAV2 end*/


.bannertext {
    margin-top: 10%;

}

.bannertexth {
    color: #16550d;
}

.bannertexth h6 {
    border-bottom: #16550d solid 1px;
    color: #16550d ;
}

.bannertexth h6:hover {
    color: #2b801e;

}

.bannertexth:hover {
    animation-delay: 0.3s;
    color: #2b801e;
}

.bannertextp {
    color: #258319;
}

.bannertextp:hover {
    animation-delay: 0.3s;
    color: #2b801e;

}

.column1 p {
    margin-left: 5%;
    margin-top: 7%;
}

.myowncards {
    margin-top: 5%;
}

.content {
    margin-top: 4%;
    text-align: center;
}
.content h1{
    color: #16550d;
 
}
.content h1:hover{
    color: #228315;
 
}
.content h2{
    color: #16550d;
 
}

.content h1:hover {
    color: #16550d;
}

.gallery {
    margin-top: 10%;
}

.gallery2 {
    margin-top: 4%;
}

.gallery3 {
    margin-top: 4%;
}

.content2 {
    margin-top: 8%;
    text-align: center;
}

.donationcard {
    margin-top: 5%;
}

.card p {
        font-weight: bold;
    color: #45ac34;
    text-align:center;
}

.card p:hover {
    color: #16550d;
}

.card h5 {
    color: black;
    text-align: center;
}

.card h5:hover {
    color: #16550d;
    text-align: center;
}

.thumbnail {
    position: relative;
}

.caption {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
}

.bannerimg {
    margin-top: 5%;
    margin-left: 3.1%;
    opacity: 83%;
}

.caption h1 {
    margin-top: 10% !important;
}

.latest {
    margin-top: 4%;
    text-align: center;
}

/* footer css */
.footer-content {
    background-color: whitesmoke;
}

.container-fluid {

    padding-right: 0px;
    padding-left: 0px;

}

.about-text h4 {
    padding: 8px;
    margin-left: 1%;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    color: #28a745;

}

.about-text p {

    color: #28a745;

}

.abouth h4 {
    color: #28a745;
}

.abouth p {
    color: #28a745;
}

.about-text a i {
    color: #28a745;
    padding: 10px;
    font-size: 30px;
}

.socialh h4 {
    margin-left: 21%;
}

.twitter {
    margin-left: 21%;
}

.middle h4 {
    margin-left: 10.5%;
}

.middle p {
    margin-left: 13%;
}

.abouts h4 {
    margin-left: 3%;
}

.abouts p {
    margin-left: 3%;
}

/* footer css ended */

/* about section */
.container5 {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2rem;
    font-weight: 300;
    transform: translate(-50%, -50%);
}

.hov:hover {
    font-weight: 400;
    color: whitesmoke;
    text-decoration: none;
}

.para {
    color: #45ac34;
}

.para:hover {
    color: #2b801e;
}

.col2:hover {
    font-weight: 800;
}

.hov2 {
    /* font-weight: 400; */
    font-size: 29px;
    color: #16550d;
}

.hov3:hover {
    font-size: 29px;
}

.p-what {
    color: #28a745;
}

.hr2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e5e5;
    border-top: 1px solid rgba(0, 0, 0, .1);
    width: 20%;
    margin-left: 40%;
}

.under-bord{
    border-bottom: #e5e5e5 2px solid;
}
.causeh
{
    text-align: center;
}


.form-style-5{
	max-width: 500px;
	padding: 10px 20px;
	background: #f4f7f8;
	margin: 10px auto;
	padding: 20px;
	background: #f4f7f8;
	border-radius: 8px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
	border: none;
}
.form-style-5 legend {
	font-size: 1.4em;
	margin-bottom: 10px;
}
.form-style-5 label {
	display: block;
	margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
	font-family: Georgia, "Times New Roman", Times, serif;
	background: rgba(255,255,255,.1);
	border: none;
	border-radius: 4px;
	font-size: 15px;
	margin: 0;
	outline: 0;
	padding: 10px;
	width: 100%;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	background-color: #e8eeef;
	color:#8a97a0;
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
	background: #d2d9dd;
}
.form-style-5 select{
	-webkit-appearance: menulist-button;
	height:35px;
}
.form-style-5 .number {
	background:#228315;
	color: #fff;
	height: 30px;
	width: 30px;
	display: inline-block;
	font-size: 0.8em;
	margin-right: 4px;
	line-height: 30px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,0.2);
	border-radius: 15px 15px 15px 0px;
}

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
	position: relative;
	display: block;
	padding: 19px 39px 18px 39px;
	color: #FFF;
	margin: 0 auto;
	background:#228315;
	font-size: 18px;
	text-align: center;
	font-style: normal;
	width: 100%;
	border: 1px solid #16a085;
	border-width: 1px 1px 3px;
	margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
	background:#16550d;
}

















.container {
    margin: 30px auto;
}

.container .card {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: #fff;
    border-radius: 0px;
}

body {
    background: #eee
}



.btn.btn-primary {
    background-color: #ddd;
    color: black;
    box-shadow: none;
    border: none;
    font-size: 20px;
    width: 100%;
    height: 100%;
}

.btn.btn-primary:focus {
    box-shadow: none;
}

.container .card .img-box {
    width: 80px;
    height: 50px;
}

.container .card img {
    width: 100%;
    object-fit: fill;
}

.container .card .number {
    font-size: 24px;
}

.container .card-body .btn.btn-primary .fab.fa-cc-paypal {
    font-size: 32px;
    color:#16a085;
}

.fab.fa-cc-amex {
    color:#228315;
    font-size: 32px;
}

.fab.fa-cc-mastercard {
    font-size: 32px;
    color: red;
}

.fab.fa-cc-discover {
    font-size: 32px;
    color: orange;
}

.c-green {
    color: green;
}

.box {
    height: 40px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ddd;
}

.btn.btn-primary.payment {
    background-color:#28a745;
    color: white;
    border-radius: 0px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}


.form__div {
    height: 50px;
    position: relative;
    margin-bottom: 24px;
}

.form-control {
    width: 100%;
    height: 45px;
    font-size: 14px;
    border: 1px solid #DADCE0;
    border-radius: 0;
    outline: none;
    padding: 2px;
    background: none;
    z-index: 1;
    box-shadow: none;
}

.form__label {
    position: absolute;
    left: 16px;
    top: 10px;
    background-color: #fff;
    color: #80868B;
    font-size: 16px;
    transition: .3s;
    text-transform: uppercase;
}

.form-control:focus+.form__label {
    top: -8px;
    left: 12px;
    color:#258319;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
}

.form-control:not(:placeholder-shown).form-control:not(:focus)+.form__label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
}

.form-control:focus {
    border: 1.5px solid #258319;
    box-shadow: none;
}

body{
    background:#eee;    
   }
   
   p {
       font-size: 14px;
       color: #777;
   }
   
   .blog .image {
       height: 250px;
       overflow: hidden;
       border-radius: 3px 0 0 3px;
   }
   
   .blog .image img {
       width: 100%;
       height: auto;
   }
   
   .blog .date {
       top: -10px;
       z-index: 99;
       width: 65px;
       right: -10px;
       height: 65px;
       padding: 10px;
       position: absolute;
       color:#FFFFFF;
       font-weight:bold;
       background: #5bc0de;
       border-radius: 999px;
   }
   
   .blog .blog-details {
       padding: 0 20px 0 0;
   }
   
   .blog {
       padding: 0;
   }
   
   .well {
       border: 0;
       padding: 20px;
       min-height: 63px;
       background: #fff;
       box-shadow: none;
       border-radius: 3px;
       position: relative;
       max-height: 100000px;
       border-bottom: 2px solid #ccc;
   }
   
   .blog .blog-details h2 {
       margin-bottom: 10px;
       padding-bottom: 10px;
       border-bottom: 1px solid #eee;
   }
   
   .blog .date .blog-number {
       color: #fff;
       display: block;
       font-size: 24px;
       text-align: center;
   }                    

/* gallery images responsive sites*/

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      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 {
      flex: 100%;
      max-width: 100%;
    }
  }

/* gallery ended */






@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);

html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%; 
  background: #FFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
 
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
}

.container-fostrap {
  display: table-cell;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
}
.fostrap-logo {
  width: 100px;
  margin-bottom:15px
}
h1.heading {
  color: #fff;
  font-size: 1.15em;
  font-weight: 900;
  margin: 0 0 0.5em;
  color: #505050;
}
@media (min-width: 450px) {
  h1.heading {
    font-size: 3.55em;
  }
}
@media (min-width: 760px) {
  h1.heading {
    font-size: 3.05em;
  }
}
@media (min-width: 900px) {
  h1.heading {
    font-size: 3.25em;
    margin: 0 0 0.3em;
  }
} 
.card {
  display: block; 
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
    transition: box-shadow .25s; 
}
.card:hover {
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.img-card {
  width: 100%;
  height:200px;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  display:block;
    overflow: hidden;
}
.img-card img{
  width: 100%;
  height: 200px;
  object-fit:cover; 
  transition: all .25s ease;
} 
.card-content {
  padding:15px;
  text-align:left;
}
.card-title {
  margin-top:0px;
  font-weight: 700;
  font-size: 1.65em;
}
.card-title a {
  color: #000;
  text-decoration: none !important;
}
.card-read-more {
  border-top: 1px solid #D4D4D4;
}
.card-read-more a {
  text-decoration: none !important;
  padding:10px;
  font-weight:600;
  text-transform: uppercase
}






.column {
    float: left;
    width: 33.33%;
    padding: 5px;
  }
  
  /* Clear floats after image containers */
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  








    input[type=text], input[type=password] {
    width: 100%;
    padding: 10px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    }
    .submit{
    margin-top:15px;
    }
    .popup-btn a{
    top:200px;
    position:fixed;
    right:-90px;
    z-index: 1000;
    transform: rotate(-90deg);
    
    padding:10px 20px 35px;
    height: 0px;
    background-color: #000;
    color:#fff;
    }
    .popup-btn a:hover{
    text-decoration: none;
    color:#fff;
    padding-left: 20px;
    }
    .form-part{
    padding: 20px 0px;
    }
    .modal-header{
    padding:10px 0px !important;
    }
    .modal {
    display: none;
    position: fixed;
    z-index: 1 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
    }
    .modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    width: 80%;
    padding: 20px;
    border:3px solid #000 !important;
    }
    .close {
    position: absolute;
    right:10px;
    top:8px;
    font-size: 35px;
    font-weight: bold;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    }
    .close:hover,
    .close:focus {
    cursor: pointer;
    }
    .animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
    }
    @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
    }
    @keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
    }