.thump-image {
  height:57px; 
  width:57px; 
  object-fit:cover
}

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  background: #F99D1C;
  border-radius: 3px 0 0 3px;
  color: #FFF;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #F99D1C;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: rgb(192, 118, 14);
  color: white;
}

.tag:hover::after {
   border-left-color: rgb(192, 118, 14); 
}



/* .tags {
    display: inline;
    border-radius: 5px;
   
 } 
 .tags a {
   margin-bottom: 20px;
   background-color: #F99D1C;
    color:white;
    padding: 5px 20px;
 } */

 /* .tags :hover {
    padding: 8px;
    background-color:rgb(5, 41, 23);
    color:white !important
 } */

 .readMore {
   padding: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px
 }

 .galleryThumb {
    margin-top: 10px;
   height: 250px; 
   width:100%;
   object-fit: cover;
 }

 .gallery-modal-image {
   padding: 0;
   display: block;
   margin: 0 auto;
   max-height: 100vh;
   max-width: 100%;
 }

 .project-image {
  height: 300px;
  object-fit: cover;
 }

 

 .mainLogo {
   height: 70px;
 }

 /* Extra Small Devices, Phones 
 @media only screen and (min-width : 480px) {
  .mainLogo {
    height: 70px;
  }
} */
 
    @media only screen and (min-width : 320px) {
      .mainLogo {
        height: 30px;
      }
      /* .tags{
        padding-bottom: 10px;
      } */
      
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
      .mainLogo {
        height: 30px;
      }
      /* .tags{
      
        margin-bottom: 10px;
      } */
      
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
      .mainLogo {
        height: 70px;
      }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
      .mainLogo {
        height: 70px;
      }
    }

 #backToTop {
   display: inline-block;
   background-color: #F99D1C;
   width: 40px;
   height: 40px;
   text-align: center;
   border-radius: 4px;
   position: fixed;
   bottom: 30px;
   right: 30px;
   transition: background-color .3s, 
     opacity .5s, visibility .5s;
   opacity: 0;
   visibility: hidden;
   z-index: 1000;
 }
 #backToTop::after {
   content: "\f077";
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   font-size: 1em;
   line-height: 30px;
   color: #fff;
 }
 #backToTop:hover {
   cursor: pointer;
   background-color: #333;
 }
 #backToTop:active {
   background-color: #555;
 }
 #backToTop.show {
   opacity: 1;
   visibility: visible;
 }
 


 .row > .column {
   padding: 0 8px;
 }
 
 .row:after {
   content: "";
   display: table;
   clear: both;
 }
 
 /* Create four equal columns that floats next to eachother */
 .column {
   float: left;
   width: 25%;
 }
 
 /* The Modal (background) */
 .modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: black;
 }
 
 /* Modal Content */
 .modal-content {
   position: relative;
   background-color: #fefefe;
   margin: auto;
   padding: 0;
   width: 90%;
   max-width: 1200px;
 }
 
 /* The Close Button */
 .close {
   color: white;
   position: absolute;
   top: 10px;
   right: 25px;
   font-size: 35px;
   font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
   color: #999;
   text-decoration: none;
   cursor: pointer;
 }
 
 /* Hide the slides by default */
 .mySlides {
   display: none;
 }
 
 /* Next & previous buttons */
 .prev,
 .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -50px;
   color: white;
   font-weight: bold;
   font-size: 20px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
   -webkit-user-select: none;
 }
 
 /* Position the "next button" to the right */
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 
 /* On hover, add a black background color with a little bit see-through */
 .prev:hover,
 .next:hover {
   background-color: rgba(0, 0, 0, 0.8);
 }
 
 /* Number text (1/3 etc) */
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }
 
 /* Caption text */
 .caption-container {
   text-align: center;
   background-color: black;
   padding: 2px 16px;
   color: white;
 }
 
 img.demo {
   opacity: 0.6;
 }
 
 .active,
 .demo:hover {
   opacity: 1;
 }
 
 img.hover-shadow {
   transition: 0.3s;
 }
 
 .hover-shadow:hover {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

 ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #fff;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #01070c;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #f15010;
  text-decoration: underline;
}