@import url("https://fonts.googleapis.com/css?family=Anton");
@import url("https://fonts.googleapis.com/css?family=Roboto:900");

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");



body,
html {
  height: 100%;
  margin: 0;
  width: 100%;
}

.vl {
  border-left: 2px solid #515689;
  height: 200px;
}

.nav-padding-top {
  padding-top: 100px;
}

.txtpad {
  font-size: 15px;
  word-break: break-all;
}

.llogo {
  align-content: center;
}

.alignleft {
  float: left;
}
.alignright {
  float: right;
}

.hugepadding {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: white;
  transition: all 0.5s;
}

.navbar.scrolled {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgb(138, 198, 255);
  transition: all 0.5s;
}

.donatebutton.scrolled {
  display: none;
  transition: all 0.5s;
}


#navmedia:hover{
  background-color: rgb(243, 237, 157);
  
}

#navimage.scrolled {
  width: 90px;
  transition: all 0.5s;
}

.navbar-brand.scrolled {
  font-size: 15px;
  transition: all 0.5s;
}

/*button shits*/

.fa {
  padding: 10px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  border-color: #88bbd6;
}

.fa:hover {
   background-color:rgb(0, 0, 0);
   color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 100px;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 160px;
}

.social-flex{
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

.fa-instagram {
  background: #ebec91;
  color: rgb(0, 0, 0);
  display: none;
  position: fixed;
  bottom: 20px;
  right: 220px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(49, 55, 71);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
  margin: 3px 2px;
}






/*ENDDDDD SHIT*/


.nav-img {
  width: 120px;
}

.donatebutton {
  display: block;
  margin-top: 5px;
  width: 50%;
  margin-left: auto;
  background-color: #88bbd6;
  color: black;
}

.background1 {
  /* The image used */
  background-image: url("../img/back.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 100px;
  position: relative;
}



.background10 {
  /* The image used */
 
  background-image: url("../img/SPSP_Bannerphoto.jpg");
  /* Full height */
  height: 700px;
  /* Center and scale the image nicely */
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 100px;
  position: relative;
font-size: 16px;
color:rgb(0, 0, 0);
transition: all 0.5s;


}



.overlay {
  background-color: rgb(4, 48, 85);
  margin-top: 100px;
  transition: all 0.5s;
  color:rgb(255, 255, 255);
  font-size:15px;
  height: 700px;

  
}

#textseemore{
  display:none;
}





.text-block1 {
  position: absolute;
  top: 50px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding-left: 40px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.background2 {
  /* The image used */
  background-image: url("../img/background2.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.text-block2 {
  position: absolute;
  bottom: 50px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding-left: 40px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.background3 {
  /* The image used */
  background-image: url("../img/bannerphotoforsusAg.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.text-block3 {
  position: absolute;
  top: 50px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding-left: 40px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.background4 {
  /* The image used */
  background-image: url("../img/2.JPG");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-repeat: no-repeat;

  background-position: center;
  background-size: cover;
  position: relative;
}

.background-banner {
  /* The image used */
  margin-top:120px;
  background-image: url("../img/susAg.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-repeat: no-repeat;

  background-position: 0% 50%;
  background-size: cover;
  position: relative;
}


.background-donate {
  /* The image used */
  background-image: url("../img/Headerphoto.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-repeat: no-repeat;
  margin-top: 100px;
  background-position: 50% 0%;
  background-size: cover;
  position: relative;
}

.text-block-donate {
  position: absolute;
  bottom: 25%;
  left: 0px;
  background-color: rgba(87, 184, 130, 0.678);
  color: white;
  padding-left: 40px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}


.text-block4 {
  position: absolute;
  bottom: 50px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding-left: 40px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.text-block5 {
  position: absolute;
  bottom: 50px;
  left: 15%;

  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  transform: translateX(-10%);
}

.background-light-green {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  height: auto;
}

.background-grey {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 49, 49);
  height: auto;
}

.background-light-grey {
  color: rgb(0, 0, 0);
  background-color: rgb(197, 196, 196);
  height: auto;
}
.background-red {
  color: rgb(255, 255, 255);
  background-color: rgb(105, 0, 0);
  height: auto;
  padding-top: 150px;
}

.background-blueopacity{
  background-color: rgba(4, 48, 85, 0.705);
  color:white;


  
}

#navitem {
  color: rgb(255, 255, 255);
}

#navpills{
  color:black;
}

#navpills.active{
  color:rgb(5, 6, 7);
  background-color: rgb(128, 185, 250);
}


#navitem:hover {
  background-color: #88bbd6;
}

#navright {
  color: black;
}
#navlink {
  color: black;
}

#navlink:hover {
  background-color: #2a3a42;
  color: white;
}

#navright:hover {
  background-color: #252e33;
  color: white;
}

.background-agrarian-reform {
  color: white;
  background-color: #5a7bc2;
  padding-top: 120px;
}

.background-social-protection {
  color: rgb(0, 0, 0);
  background-color: #eeffa1;
  padding-top: 120px;
}

.background-susAgriculture {
  color: rgb(255, 255, 255);
  background-color: #4d7756;
  padding-top: 120px;
}

.background-socialEnterprise {
  color: rgb(255, 255, 255);
  background-color: rgb(64, 37, 75);
  padding-top: 120px;
}

.background-color1 {
  color: white;
  background-color: #88bbd6;
}

.background-color2 {
  color: rgb(0, 0, 0);
  background-color: #c9fcda;
}


.background-green {
  color: white;
  background-color: rgb(0, 115, 115);
  padding-top: 150px;
}

.background-blue {
  color: white;
  background-color: rgb(26, 52, 109);
  padding-top: 150px;
}

.background-blueshade {
  margin-top:120px;
  color: white;
  background-color: rgb(65, 104, 187);
}

.background-light-blue {
  color: rgb(0, 0, 0);
  background-color: rgb(104, 209, 216);
}

.background-light {
  color: rgb(0, 0, 0);
  background-color: rgb(138, 198, 255);
}

.buttons {
  word-break: break-word;
}

.middle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#redhr {
  display: block;

  border-top: 2px solid rgb(148, 39, 39);

  padding: 0;
}

#bluehr {
  display: block;

  border-top: 2px solid rgba(32, 18, 18, 0.349);

  padding: 0;
}

.break-word{
  word-wrap: break-word;

}

.font-size-index{
    font-size:20px;
}

.hr-green {
  display: block;

  border-top: 2px solid rgb(58, 143, 103) !important;

  padding: 0;
}

.image-container {
  position: relative;
  text-align: center;
}

.grayscale {
  -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
  -webkit-transition: filter 1s; /* Safari */
  transition: all 0.5s ease 4s;
}

.grayscale:hover {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transition: all 0.5s ease 0s;
}

.image-over-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.bold-text {
  font-weight: bold;
  color: rgb(97, 182, 252) !important;
  font-family: "Anton", sans-serif !important;
  font-size: 40px;
  text-shadow: 3px 3px rgb(0, 0, 0) !important;
}


.paragraph-banner-text {
  font-family: "Roboto", sans-serif;
  text-shadow: 2px 2px rgb(0, 0, 0);
  opacity: 0;
  transition: all 0.5s ease 5s;
}

.grayscale:hover .paragraph-banner-text {
  opacity: 1;
  transition: all 0.5s ease 0s;
}

.paragraph-font-size {
  font-size: 25px;
}

.paragraph-bigger-font-size {
  font-size: 35px;
}

.image-fill {
  width: 100%;
  object-fit: contain;
}

.carrdimage{
  width: 100%;
  object-fit: cover;
  height: 500px;
}

.card-img-overlay{

background-color:rgba(9, 16, 20, 0.87);
transition: all 0.5s;

}

.width-container{
  width:75%;
 margin: auto;
}

.file-title{
  font-size: 45px;
}

.card-img-overlay:hover{

  background-color:rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);

  }

.image-file {
  height: 300px;
  object-fit: contain;

}

.paragraph-red {
  color: rgb(255, 255, 255) !important;
}

.paragraph-yellow {
  color: rgb(255, 255, 255) !important;
}

.paragraph-green {
  color: rgb(255, 255, 255) !important;
}

.paragraph-violet {
  color: rgb(255, 255, 255) !important;
}
.paragraph-orange {
  color: rgb(255, 255, 255) !important;
}

.align-middle-property {
  text-align: center;
}
.align-middle-image-property {
  margin-right: auto;
  margin-left: auto;
}

.widthenhancer {
  width: 85%;
  border-radius: 50%;
}

.widthenhancer:hover {
  background-color: #88bbd6;
}

.padding-properties {
  padding-top: 30px;
  padding-bottom: 30px;
}

.more-padding-properties {
  padding-top: 50px;
  padding-bottom: 50px;
}

.optional-padding-top-and-bottom-property {
  padding-top: 5%;
  padding-bottom: 5%;
}



@media screen and (max-width: 1420px) {
  #navtext {
    font-size: 17px;
  }
}

@media screen and (max-width: 1300px) {
  #navtext {
    font-size: 15px;
  }

  .display-1{
    font-size: 80px;
  }
}

@media screen and (max-width: 1230px) {
  #orgname {
    display: none;
  }
}

@media screen and (max-width: 1120px) {
  .bold-text {
    font-size: 30px;
   
  }

  .paragraph-font-size {
    font-size: 20px;
  }

  .paragraph-bigger-font-size {
    font-size: 30px;
  }
}

@media screen and (max-width: 980px) {
  .donate-title{
    font-size: 60px;
  }
  .bold-text {
    font-size: 25px;
  }

  .paragraph-font-size {
    font-size: 18px;
  }

  .paragraph-bigger-font-size {
    font-size: 25px;
  }

  .indexh1 {
    font-size: 30px;
  }

  .display-1{
    font-size: 65px;
  }
}

@media screen and (max-width: 800px) {
  .donate-title{
    font-size: 50px;
  }
}

@media screen and (max-width: 780px) {
  .display-1{
    font-size: 55px;
  }
}

@media screen and (max-width: 760px) {
  .bold-text {
    font-size: 20px;
  }

  .paragraph-font-size {
    font-size: 13px;
  }

  .paragraph-bigger-font-size {
    font-size: 18px;
  }
}


@media screen and (max-width: 700px){
  .ARtext{
    font-size: 35px;
  }
}


@media screen and (max-width: 600px) {
  .remove-when-smaller {
    display: none;
  }

  .indexh1 {
    font-size: 20px;
  }


  .widthenhancer {
    width: 40%;
    border-radius: 50%;
  }
}

.widget--facebook--container {
  width: 500px;
}

.widget-facebook {
  height: 600px;
}

@media screen and (max-width: 550px) {
  .widget--facebook--container {
    width: 450px;
  }

  .bold-text {
    font-size: 15px;
  }

  .paragraph-font-size {
    font-size: 12px;
  }

  .paragraph-bigger-font-size {
    font-size: 15px;
  }

  .navbar-brand {
    font-size: 15px;
  }

  .nav-img {
    width: 90px;
  }

  .document-title{
    font-size: 50px;
  }


}

@media screen and (max-width: 480px) {
  .widget--facebook--container {
    width: 400px;
  }
}

@media screen and (max-width: 440px) {
  .bold-text {
    font-size: 12px;
    text-shadow: 1px 1px rgb(0, 0, 0);
  }

  .paragraph-font-size {
    font-size: 10px;
    text-shadow: 1px 1px rgb(0, 0, 0);
  }

  .paragraph-bigger-font-size {
    font-size: 15px;
    text-shadow: 1px 1px rgb(0, 0, 0);
  }
}

@media screen and (max-width: 430px) {
  .widget--facebook--container {
    width: 350px;
  }
}

@media screen and (max-width: 400px) {
  .widget--facebook--container {
    width: 325px;
  }

  .image-nav {
    width: 100px;
  }

  .donatebutton {
    display: none;
  }
  
  .file-title{
  font-size: 25px;
}

  .document-title{
    font-size: 30px;
  }


}

@media screen and (max-width: 385px) {
  .widget--facebook--container {
    width: 300px;
  }

  .image-nav {
    width: 50px;
  }

  .navbar.navbar-expand.navbar-light.fixed-top.bg-light
    .container-fluid
    .d-flex.flex-column.flex-wrap
    .navbar-nav.mb-auto.mt-0.ml-auto
    .nav-item {
    font-size: 13px;
  }
  .donatebutton {
    display: block;
  }

  .bold-text {
    font-size: 11px;
    text-shadow: 1px 1px rgb(0, 0, 0);
  }

  .paragraph-font-size {
    font-size: 9px;
    text-shadow: 1px 1px rgb(0, 0, 0);
  }

  .paragraph-bigger-font-size {
    font-size: 12px;
    text-shadow: 1px 1px rgb(0, 0, 0);
  }
}
@media screen and (max-width: 339px) {
  .widget--facebook--container {
    margin-left: auto;
    margin-right: auto;
    width: 250px;
  }

  .navbar-brand {
    font-size: 13px;
  }

  .nav-img {
    width: 60px;
  }

  #navimage.scrolled {
    width: 60px;
    transition: all 0.5s;
  }
  
  .navbar-brand.scrolled {
    font-size: 12px;
    transition: all 0.5s;
  }


}

@media screen and (max-width: 300px) {
  .widget--facebook--container {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
  }

  .bold-text {
    font-weight: bold;

    font-family: "Anton", sans-serif !important;
    font-size: 12px;
    text-shadow: 3px 3px rgb(0, 0, 0) !important;
  }
}