.saijal-align-justify {
  text-align: justify;
}

.saijal-color-black {
  color: black !important;
}

.saijal-font-30 {
  font-size: 30px;
}

.yo-ji {
  text-align: justify;
  padding: 20px;
  color: black;
  box-shadow: 0 5px 27px -8px #00000f;
  border-radius: 12px;
  margin-bottom: 40px;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
}


.pd30-saijal
{
  padding-bottom: 30px;
}

.index-grid {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  grid-column-gap: 0;
  color: white;
}

.index-grid .served {
  padding: 20px;
  background: #115b9b;
}

.index-grid .donate {
  padding: 20px;
  background: #1f76be;
}

.index-grid .volunteer {
  padding: 20px;
  background: #539dda;
}

.index-grid .saijal-btn {
  font-size: 20px;
  box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.5);
  background: #fff;
  padding: 10px;
  color: black;
  position: relative;
  top: 5%;
}

.index-grid .saijal-btn:hover {
  text-decoration: none;
  background: black;
  color: white;
}

.index-grid .button {
  margin-top: 30px;
}

.blue {
  background: #2196f3;
}

#heart {
  color: red;
}

footer .fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
  opacity: 0.7;
}

footer a {
  text-decoration: none !important;
}

.follow-grid {
  display: grid;
  width: 100%;
  grid-template-columns: 30% 30% 30%;
}

.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top: 10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
}

.lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
  top: 0px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.reasons-col .reasons-titles {
  padding: 8px 0 !important;
}

.navbar-brand > img {
  display: block;
  height: 50px;
  position: relative;
  top: -8%;
}
.navbar-brand {
  float: left;
  height: 50px;
  padding: 9px 15px;
  font-size: 18px;
  line-height: 20px;
  display: inline-flex;
}

.navbar-header {
  width: auto;
}

.navbar-header #company-name {
  position: relative;
  top: 50%;
}

.navbar-top {
  padding: unset;
  height: 8vh;
}

.navbar-top .saijal-nav {
  height: 100%;
}

.saijal-fix {
  position: relative;
  top: 50%;
  transform: translate(0px, -50%);
}

.top-donate {
  border: 0;
  background: #1f76be;
}

.history-container {
  width: 100%;
}

.history-container img {
  width: 100%;
}

.mt40 {
  margin-top: 40px;
}

.team-grid {
  display: inline-grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.profile-card {
  position: relative;
  width: 280px;
  top: 70px;
  margin: 0 auto;
  padding: 40px 30px 8px;
  background: #fff;
  border: 5px solid rgba(255, 255, 255, 0.7);
  text-align: center;
  border-radius: 4px;
  transition: all 200ms ease;
}
.mask-shadow {
  z-index: -1 !important;
  width: 95%;
  height: 12px;
  background: #000;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  border-radius: 4px;
  opacity: 0;
  transition: all 400ms ease-in;
}

.profile-card:hover {
  box-shadow: 0px 30px 60px -5px rgba(55, 55, 71, 0.3);
  transform: translate3d(0, -5px, 0);
  .mask-shadow {
    opacity: 1;
    box-shadow: 0px 30px 60px -5px rgba(55, 55, 71, 0.3);
    position: absolute;
  }
}
.profile-card header {
  display: block;
  margin-bottom: 10px;
}
.profile-card header a {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 100%;
  margin: -120px auto 0;
  box-shadow: 0 0 0 5px #1f76bd;
}
.profile-card header a img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.profile-card:hover header a,
.profile-card header a:hover {
  animation: bounceOut 0.4s linear;
  -webkit-animation: bounceOut 0.4s linear;
}
.profile-card header h1 {
  font-size: 20px;
  color: #444;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.profile-card header h2 {
  font-size: 14px;
  color: #acacac;
  text-transform: uppercase;
  margin: 0;
}
/*content*/
.profile-bio {
  font-size: 14px;
  color: #a5a5a5;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 30px;
}
/*link social*/
.profile-social-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile-social-links li {
  display: inline-block;
  margin: 0 10px;
}
.profile-social-links li a {
  width: 55px;
  height: 55px;
  display: block;
  background: #f1f1f1;
  border-radius: 50%;
  -webkit-transition: all 2.75s cubic-bezier(0, 0.83, 0.17, 1);
  -moz-transition: all 2.75s cubic-bezier(0, 0.83, 0.17, 1);
  -o-transition: all 2.75s cubic-bezier(0, 0.83, 0.17, 1);
  transition: all 2.75s cubic-bezier(0, 0.83, 0.17, 1);
  transform-style: preserve-3d;
}
.profile-social-links li a img {
  width: 35px;
  height: 35px;
  margin: 10px auto 0;
}
.profile-social-links li a:hover {
  background: #ddd;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
/*animation hover effect*/
@-webkit-keyframes bounceOut {
  0% {
    box-shadow: 0 0 0 4px #1f76bd;
    opacity: 1;
  }
  25% {
    box-shadow: 0 0 0 1px #1f76bd;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 7px #1f76bd;
    opacity: 1;
  }
  75% {
    box-shadow: 0 0 0 4px #1f76bd;
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 5px #1f76bd;
    opacity: 1;
  }
}
@keyframes bounceOut {
  0% {
    box-shadow: 0 0 0 6px #1f76bd;
    opacity: 1;
  }
  25% {
    box-shadow: 0 0 0 2px #1f76bd;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 9px #1f76bd;
    opacity: 1;
  }
  75% {
    box-shadow: 0 0 0 3px #1f76bd;
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 5px #1f76bd;
    opacity: 1;
  }
}

.pt40:last-child {
  margin-bottom: 80px;
}

.navbar-nav li a {
  font-size: 15px;
}

.navbar-nav .submenu li a {
  font-size: 15px;
}

.modal-pic {
  text-align: center;
}

.modal-pic img {
  width: 100%;
  height: 100%;
}

.news-container {
  width: 100%;
  height: 500px;
}

.news-container img {
  width: 100%;
}

.i-i-container {
  height: 200px;
  min-height: 200px;
  width: 100%;
  overflow: hidden;
}

.news-con {
  width: 150px;
  height: 250px;
  overflow: hidden;
}

.pad {
  padding: 20px;
}

.back {
  box-shadow: 0px 9px 20px grey;
}

.pd-bottom {
  margin-bottom: 40px;
}

.news-con img {
  height: auto;
  width: 100%;
}

.n-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.n2-flex {
  display: flex;
  flex-wrap: wrap;
}

.n-flex > div {
  flex: 1 2;
}

.child-img-c {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* to center the container */
}

.child-img-c img {
  width: 100%;
  height: auto;
}

.child .box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.child .box > div {
  margin-bottom: 20px;
}

.child .card {
  position: relative;
  width: 300px;
  height: 350px;
  background: #fff;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.child .card:before,
.child .card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #fff;
  transition: 0.5s;
  z-index: -1;
}
.child .card:hover:before {
  transform: rotate(20deg);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.child .card:hover:after {
  transform: rotate(10deg);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.child .card .imgBx {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: #222;
  transition: 0.5s;
  z-index: 1;
}

.child .card:hover {
  cursor: pointer;
}

.child .card:hover .imgBx {
  bottom: 80px;
}

.child .card .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.child .card .details {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 60px;
  text-align: center;
}

.child .card .details h2 {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 20px;
  color: #777;
  text-transform: uppercase;
}

.child .card .details h2 span {
  font-weight: 500;
  font-size: 16px;
  color: #f38695;
  display: block;
  margin-top: 5px;
}

.one-c {
  height: 350px;
  display: table-cell;
  width: 350px;
  margin: 0 auto;
  vertical-align: middle;
}

.one-c img {
  box-shadow: 0 3px 15px #00000f66;
  width: 100%;
}

#leftPanel {
  color: #fff;
  text-align: center;
}

#rightPanel {
  position: relative;
  top: 50%;
  transform: translate(0px, 35%);
}

.white {
  background: #fff;
  height: 10vh;
  padding: 0;
  margin: 0;
}

/* Credit to bootsnipp.com for the css for the color graph */
.colorgraph {
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(
    left,
    #c4e17f,
    #c4e17f 12.5%,
    #f7fdca 12.5%,
    #f7fdca 25%,
    #fecf71 25%,
    #fecf71 37.5%,
    #f0776c 37.5%,
    #f0776c 50%,
    #db9dbe 50%,
    #db9dbe 62.5%,
    #c49cde 62.5%,
    #c49cde 75%,
    #669ae1 75%,
    #669ae1 87.5%,
    #62c2e4 87.5%,
    #62c2e4
  );
  background-image: -moz-linear-gradient(
    left,
    #c4e17f,
    #c4e17f 12.5%,
    #f7fdca 12.5%,
    #f7fdca 25%,
    #fecf71 25%,
    #fecf71 37.5%,
    #f0776c 37.5%,
    #f0776c 50%,
    #db9dbe 50%,
    #db9dbe 62.5%,
    #c49cde 62.5%,
    #c49cde 75%,
    #669ae1 75%,
    #669ae1 87.5%,
    #62c2e4 87.5%,
    #62c2e4
  );
  background-image: -o-linear-gradient(
    left,
    #c4e17f,
    #c4e17f 12.5%,
    #f7fdca 12.5%,
    #f7fdca 25%,
    #fecf71 25%,
    #fecf71 37.5%,
    #f0776c 37.5%,
    #f0776c 50%,
    #db9dbe 50%,
    #db9dbe 62.5%,
    #c49cde 62.5%,
    #c49cde 75%,
    #669ae1 75%,
    #669ae1 87.5%,
    #62c2e4 87.5%,
    #62c2e4
  );
  background-image: linear-gradient(
    to right,
    #c4e17f,
    #c4e17f 12.5%,
    #f7fdca 12.5%,
    #f7fdca 25%,
    #fecf71 25%,
    #fecf71 37.5%,
    #f0776c 37.5%,
    #f0776c 50%,
    #db9dbe 50%,
    #db9dbe 62.5%,
    #c49cde 62.5%,
    #c49cde 75%,
    #669ae1 75%,
    #669ae1 87.5%,
    #62c2e4 87.5%,
    #62c2e4
  );
}

.justi {
  text-align: justify;
}

.donor-c {
  height: 100px;
  width: 100px;
}

.donor-c img {
  width: 100%;
}

.grid- {
  display: grid;
  grid-column-gap: 100%;
  grid-row-gap: 20px;
}

.grid- .grid-data {
  display: flex;
  border-bottom: 1px solid #1f76be;
}

.grid- .grid-content {
  padding-left: 10px;
}

.o-style {
  box-shadow: 0 0px 12px #00000f;
  border-radius: 8px;
  padding: 14px;
  margin-top: 40px;
}

.donor-grid {
  display: inline-grid;
  grid-template-columns: 25% 25% 25% 25%;
  width: 100%;
}

.donor-grid .card-img-top {
  min-height: 200px;
  max-height: 200px;
  max-width: 100%;
  min-width: 100%;
}

.yahoo-saijal .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 100%;
}

.yahoo-saijal .card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.yahoo-saijal .containers {
  padding: 2px 16px;
}

.yahoo-saijal .cc {
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-height: 200px;
  max-height: 200px;
}
.yahoo-saijal .cc img {
  width: 100%;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* Fake image */
.fakeimgs {
  max-height: 500px;
  min-width: 500px;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  padding: 15px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.fakeimg {
  max-height: 200px;
  min-width: 200px;
  max-width: 200px;
  margin: 0 auto;
  overflow: hidden;
}

.bac {
  background: #1f76be;
  padding: 10px;
  color: white;
}

.fakeimgs img {
  width: 100%;
}

.fakeimg img {
  width: 100%;
}

/* Add a card effect for articles */
.carder {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.rower:after {
  content: "";
  display: table;
  clear: both;
}

.yo-s-yo div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

.yo-s-yo1 div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

.yo-s-yo1 div.gallery:hover {
  border: 1px solid #777;
}

.yo-s-yo1 div.gallery img {
  width: 100%;
  height: auto;
}

.yo-s-yo1 div.desc {
  padding: 15px;
  text-align: center;
}

.yo-s-yo div.gallery:hover {
  border: 1px solid #777;
}

.yo-s-yo div.gallery img {
  width: 100%;
  height: auto;
}

.yo-s-yo div.desc {
  padding: 15px;
  text-align: center;
}

.g-i {
  max-height: 200px;
  min-height: 200px;
  min-width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.ya-saijal img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.ya-saijal .c {
  position: relative;
}

/* Hide the images by default */
.ya-saijal .mySlidess {
  display: none;
  text-align: center;
  margin: 0 auto;
}

/* Add a pointer when hovering over the thumbnail images */
.ya-saijal .cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.ya-saijal .prev,
.ya-saijal .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.ya-saijal .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.ya-saijal .prev:hover,
.ya-saijal .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.ya-saijal .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.ya-saijal .caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.ya-saijal .rowss {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  margin-top: 10px;
}

.ya-saijal .rowss:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.ya-saijal .column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.ya-saijal .demo {
  opacity: 0.6;
}

.ya-saijal .active,
.ya-saijal .demo:hover {
  opacity: 1;
}

.ya-saijal-2 .gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.ya-saijal-2 .gallery img {
  width: 100%;
  height: auto;
  transition: 500ms;
  margin-bottom: 10px;
  opacity: 0.8;
  page-break-inside: avoid; /* For Firefox. */
  -webkit-column-break-inside: avoid; /* For Chrome & friends. */
  break-inside: avoid; /* For standard browsers like IE. :-) */
}

.ya-saijal-2 .gallery img:hover {
  opacity: 1;
}

/* .modal {
display: flex;
align-items: center;
justify-content: center;
flex-direction: center;
} */

.ya-saijal-2 .modal-img,
.ya-saijal-2 .model-vid {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: table;
}
.ya-saijal-2 .modal-body {
  padding: 0px;
}

.ya-saijal-2 .modal-dialog {
  height: 100%;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ya-saijal-2 .modal-content {
  border: none;
}

.ya-saijal-2 .modal-backdrop {
  height: unset !important;
}

.no-a a{
  text-decoration: none;
}

#myModal .img-cont{
  height: 20%;
  width: 20%;
  margin:0 auto;
}

#myModal .img-cont img{
  width: 100%;
}

@media screen and (max-width: 767px) {
  .ya-saijal-2 .gallery {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  .ya-saijal-2 .gallery div {
    margin: 0;
    width: 200px;
  }
  .ya-saijal-2 .modal-dialog {
    margin: 0 8vw;
  }
}

@media screen and (max-width: 479px) {
  .ya-saijal-2 .gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .ya-saijal-2 .gallery div {
    margin: 0;
    width: 200px;
  }
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .navbar-brand > img {
    top: -16%;
  }
}

@media only screen and (max-width: 975px) {
  .pt40 {
    padding-top: 103px;
  }
  .pt40:last-child {
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 750px) {
  .navbar-brand {
    float: left;
    height: 50px;
    padding: 7px 15px;
    font-size: 18px;
    line-height: 20px;
  }
}

@media only screen and (max-width: 770px) {
  .navbar-header #company-name {
    position: relative;
    top: 30%;
  }
}

@media only screen and (max-width: 600px) {
  .index-grid {
    grid-template-columns: 100%;
  }
  .donor-grid {
    width: 100%;
    grid-template-columns: 50% 50%;
  }
}

@media only screen and (max-width: 360px) {
  .donor-grid {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    grid-template-columns: 100%;
  }
}

@media only screen and (max-width: 380px) {
  .yo-s-yo1 div.gallery {
    width: unset;
  }
}

@media only screen and (max-width: 990px) {
  #rightPanel {
    position: unset;
    top: unset;
    transform: unset;
  }
}

@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

.saijal-i-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.saijal-i-grid .img {
  height: 200px;
  width: 200px;
  max-width: 200px;
  max-height: 200px;
}
.saijal-i-grid .img img {
  width: 100%;
}