﻿
.blog-cards,
#blog-card-container {
   transition: opacity 0.2s ease;
}
   .blog-cards.is-fading {
      opacity: 0.1;
   }
.blog-cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   margin: 0 -15px;
}

.blog-card-wrapper {
   flex: 0 1 100%;
   height: inherit;
   margin-bottom: 30px;
}

.blog-card {
   /* padding: 40px; */
   background: #ffffff;
   border-radius: 30px;
   display: flex;
   flex-direction: column;
   /* align-items: center; */
   transition: all 0.18s ease-in-out;
   margin: 0 15px;
   min-height: 300px;
   height: 100%;
   overflow: hidden;
   text-decoration: none;
   /* justify-content: center; */
   color: #000;
   position: relative;
}

.blog-card-body {
   padding: 20px 20px 80px 20px;
   text-decoration: none;
   color: #000;
}

   .blog-card-body .btn {
      position: absolute;
      bottom: 20px;
      right: 20px;
   }

.blog-card-title {
   font-size: 1.5rem;
   line-height: 1.8rem;
   color: #000;
}

.blog-card-description {
   color: #000;
}


div.spinner {
   perspective: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 100%;
   z-index: 10;
   position: absolute;
   height: 50vh;
   width: 100%;
}

.logo-rotate {
   width: 120px;
   height: 120px;
   background: transparent;
   /*transform: rotateY(45deg);*/
   animation: rotateAnimation 2s linear infinite !important;
}

@keyframes rotateAnimation {
   from {
      transform: rotateY(0deg);
   }

   to {
      transform: rotateY(365deg);
   }
}

@media (min-width: 60em) {
   .blog-card-wrapper {
      flex: 0 1 50%;
   }

   .blog-filters {
      display: flex;
      align-items: center;
      padding-bottom: 60px;
      border-bottom: 1px solid #E0E0E0;
      margin-bottom: 60px;
   }

   .blog-card {
      min-height: 540px;
   }
}


@media (min-width: 71.25em) {
   .blog-card-wrapper {
      flex: 0 1 33.33%;
   }
}