.animated-bg-1 {
	background: linear-gradient(-45deg, #F3E2A9, #9FF781, #D0A9F5, #81BEF7);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	
}

.animated-bg-2 {
	background: linear-gradient(-75deg, #D0A9F5, #81BEF7, #F3E2A9, #9FF781);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	font-weight:700;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.home-shardul-img {
	max-width:350px;
	height:auto;
	background-color: #30B2BF;
    padding: 4px;
}

.myred {
	color:#FF0000 ! important;
}
.myblue{
	color:#30B2BF ! important;
}
.myyellow {
	color:#F8C901 ! important;
}
.mygreen {
	color:#059847 ! important;
}
.mykeshari {
	/*color:#DE3812 ! important;*/
		color:#8A2908 ! important;
}
.mykesharidark {
	color:#8A2908 ! important;
}

.resp-table {
width: 100%;
display: table;

}
.resp-table-caption{
display: table-caption;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.resp-table-header{
display: table-header-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
}
.table-header-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}
.resp-table-body{
display: table-row-group;
}
.resp-table-row{
display: table-row;
}
.table-body-cell{
display: table-cell;
border:1px solid #211C54;
padding:10px 5px 10px 10px;
border-radius:7px;
background-color:#eee;
}
.resp-table-footer {
display: table-footer-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
color: rgba(255, 255, 255, 0.45);
}
.table-footer-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}


/* below code Taken from https://codepen.io/studiojvla/pen/qVbQqW  */

@-webkit-keyframes scrollSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@keyframes scrollSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 250px;
  margin: auto;
  overflow: hidden;
  position: relative;
  min-width: 100%;
  
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 250px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scrollSlider 40s linear infinite;
          animation: scrollSlider 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 250px;
  width: 250px;
}





/* advertisement slider taken from  https://codepen.io/Julka85/pen/xaeYrz */

.insize{
  max-width:100%;

  
}
.item {
 height:250px;
  width:100%;
  
}

	

.owl-thumbs{}
.owl-thumbs .owl-thumb-item{
  height:150px;
  width: 100%;
  max-width:150px;
  background: transparent;
  border: none;
  overflow: hidden;
}
.owl-thumbs .owl-thumb-item img{
  max-width:100%;
  height:auto;
}
.owl-dots{
  position:absolute;
  bottom:-10px;
  left:0;
  right:0;
  
}

.onlymob {
	display:none;
}
.onlydesktop {
	display:block;
}

@media (max-width: 768px) {
	
	.onlymob {
	display:block;
}
.onlydesktop {
	display:none;
}


	.item {
 height:340px !important;
  width:100%;
  
}

.item img{
  max-width:100%;
  min-height:150px !important;
}
	
}






/* Taken from https://codepen.io/kthao/pen/vYYVxwx 
css needed
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css

js needed
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js

<main class="main-photo">
  <div class="container-photo">
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/34MdBRc" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/34MdBRc" alt="Image Gallery">
        </a>
      </div>
       <div class="c1">25 / March / 2025</div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/2Nv9zHh" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/2Nv9zHh" alt="Image Gallery">
        </a>
      </div>
       <div class="c1">26 / March / 2025</div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/2q0iuay" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/2q0iuay" alt="Image Gallery">
        </a>
      </div>
       <div class="c1">27 / March / 2025</div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/34PEofp" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/34PEofp" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/2X4z711" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/2X4z711" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/2rtIqMl" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/2rtIqMl" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/33xTVAn" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/33xTVAn" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/2K3jaDa" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/2K3jaDa" alt="Image Gallery">
        </a>
      </div>
    </div>
    <div class="card">
      <div class="card-image">
        <a href="https://bit.ly/2WZ3fe2" data-fancybox="gallery" data-caption="Caption Images 1">
          <img src="https://bit.ly/2WZ3fe2" alt="Image Gallery">
        </a>
      </div>
    </div>
  </div>
</main>


*/



.main-photo {
	width:100%;
}
.container-photo {
  padding: 2rem 1rem;
  margin: 0 auto;
  /*max-width: 68rem;*/
  max-width:100%;
  width: 100%;
}

.main-photo .container-photo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
}
.main-photo .card {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
  color: #333333;
  border-radius: 2px;
}
.main-photo .card-image {
  background: #ffffff;
  display: block;
  padding-top: 40%;
  position: relative;
  width: 100%;
}
.main-photo .card-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c1 {
  color: #FF00ff;
  padding: 8px 10px;
  text-align: center;
  font-weight: 800;
  margin: auto;
  background: #ccc;
  width:100%;
}

@media only screen and (max-width: 600px) {
  .main-photo .container-photo {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}