/* =====================================================
   The "account masthead" bar across the top of the site
   ===================================================== */

body{
font-family: 'IBM Plex Sans', sans-serif;
}

.account-masthead {
    background-color: rgb(0, 156, 188);
}
/* The "bubble" containing the number of new notifications. */
.account-masthead .account .notificatpetrolions a span {
  background-color: #009CBC;
}
/* The text and icons in the user account info. */
.account-masthead .account ul li a {
  color: rgba(238, 238, 238, 1);
}
/* The user account info text and icons, when the user's pointer is hovering
   over them. */
.account-masthead .account ul li a:hover {
  color: rgba(238, 238, 238, 1) ;
  background-color: #009CBC;
}


/* ========================================================================
   The main master head bar that contains the site logo, nav links, and search
   ======================================================================== */

.masthead {
  background-color: white;
  height: 120px;

}
.masthead .container{
height: 80px;
}

.masthead .navbar-collapse{
padding : 30px 0;
}

.masthead a.logo,
.masthead a.logo:focus,
.masthead a.logo:active,
.masthead a.logo:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.masthead a.logo img {
  border: none;
  max-height: 100px;
  outline: none;
  box-shadow: none;
}
/* The "navigation pills" in the masthead (the links to Datasets,
   Organizations, etc) when the user's pointer hovers over them. */
.masthead .navigation .nav-pills li a:hover {
  background-color: rgb(0,156,188);
  color: white;
}
/* The "active" navigation pill (for example, when you're on the /dataset page
   the "Datasets" link is active). */
.masthead .navigation .nav-pills li.active a {
  background-color: rgb(0,156,188);
}
.masthead .nav li a{
color: black;
}
/* The "box shadow" effect that appears around the search box when it
   has the keyboard cursor's focus. */
.masthead input[type="text"]:focus {
  -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.7);
}

.masthead .navbar-toggle {
    background-color: rgb(0,156,188);
}

/* ===========================================
   The content in the middle of the front page
   =========================================== */

/* Remove the "box shadow" effect around various boxes on the page. */
.box {
  box-shadow: none;
}
/* Remove the borders around the "Welcome to CKAN" and "Search Your Data"
   boxes. */
.hero .box {
  border: none;
}
/* Change the colors of the "Search Your Data" box. */
.homepage .module-search .module-content {
  color: rgb(68, 68, 68);
  background-color: white;
}

.main {
  min-height: 35px;
}

/* Change the background color of the "Popular Tags" box. */
.homepage .module-search .tags {
  background-color: rgb(61, 61, 61);
}
/* Remove some padding. This makes the bottom edges of the "Welcome to CKAN"
   and "Search Your Data" boxes line up. */
.module-content:last-child {
  padding-bottom: 0px;
}
.homepage .module-search {
  padding: 0px;
}
/* Add a border line between the top and bottom halves of the front page. */
.homepage [role="main"] {
  border-top: 1px solid rgb(204, 204, 204);
}

/* for the description on repository/organization page */

.media-grid {
  padding-left: 20px;
  margin: 0;
  list-style: none;
  min-height: 205px;
  padding-top: 15px;
  background: #fbfbfb url("../../../base/images/bg.png");
  border: 1px solid #ddd;
  border-width: 1px 0;
}

/* Text wrapping */
.media-description {
  word-wrap: break-word;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Each tile */
.media-grid > li {
  float: left;
  width: 23%;              /* adjust if needed */
  margin: 0 1% 20px 0;
  box-sizing: border-box;
  height: 310px;           /* same height for all tiles */
  overflow: hidden;        /* hide extra text */
  background: #fff;
  border: 1px solid #e3e3e3;
  padding: 10px;
}

/* IMAGE – this is on the <img> itself:
   <img class="img-responsive media-image"> */
.img-responsive.media-image {
  display: block;
  width: 100%;
  height: 140px;           /* fixed image height */
  border-radius: 4px;
  margin-bottom: 10px;

  object-fit: contain;     /* show whole logo without distortion */
}

.media-item {
  position: relative;
    cursor: pointer;
}

/* full tile overlay clickable */
.media-item .media-view {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
}

/* content sits above clickable layer */
.media-item .media-inner {
  position: relative;
  z-index: 2;
}

/* ensure [more] beats overlay */
.media-description .read-more-link {
  position: relative;
  z-index: 3;
  cursor: pointer;
}





/* ====================================
   The footer at the bottom of the site
   ==================================== */

.site-footer,
body {
  background-color: #808080;
}
/* The text in the footer. */
.site-footer,
.site-footer label,
.site-footer small {
  color: rgba(238, 238, 238, 1);
}
/* The link texts in the footer. */
.site-footer a {
  color: rgba(238,238,238,1);

.hero{
 background:url("");
}

.footer-links a {
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
}

.footer-links a:hover {
  color: #00bfff;
}